Quickfixes and boxshadow
This commit is contained in:
parent
552123c0cf
commit
1b053523d1
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
@mixin RV-Alignment--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin RV-Alignment--center {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
@mixin RV-FlexRow__Container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
&--multiRow {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
|
|
@ -83,6 +83,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow--multiRow {
|
||||
&__Container {
|
||||
@include RV-FlexRow__Container--multiRow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin RV-FlexRow {
|
||||
&__Container {
|
||||
@include RV-FlexRow__Container;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@mixin RV-BoxShadow($color) {
|
||||
@mixin RV-BoxShadow--simple($-color) {
|
||||
box-shadow: 0 0 10px $-color;
|
||||
}
|
||||
|
||||
@mixin RV-BoxShadow($-color) {
|
||||
|
||||
position:relative;
|
||||
float:left;
|
||||
width:40%;
|
||||
margin:2em 10px 4em;
|
||||
background:#fff;
|
||||
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
|
||||
|
||||
&:before, &:after {
|
||||
content:"";
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
&--simple {
|
||||
box-shadow: 0 0 20px $color;
|
||||
@include RV-BoxShadow--simple($-color);
|
||||
}
|
||||
|
||||
&--raised {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
&__Container {
|
||||
position: relative;
|
||||
|
||||
&--small {
|
||||
top: -.25em;
|
||||
}
|
||||
|
||||
&--medium {
|
||||
top: -.5em;
|
||||
}
|
||||
|
|
@ -19,12 +23,20 @@
|
|||
@include RV-Reset;
|
||||
}
|
||||
|
||||
&__Container--small &__Icon{
|
||||
&__Container--extraSmall &__Icon{
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
top: .125em;
|
||||
}
|
||||
|
||||
&__Container--small &__Icon{
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
position: relative;
|
||||
top: .45em;
|
||||
}
|
||||
|
||||
&__Container--medium &__Icon{
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,23 @@
|
|||
<span class="RV-Iconized__Container RV-Iconized__Container--extraSmall">
|
||||
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="RV-Iconized__Text">This is a text</span>
|
||||
</span>
|
||||
<br>
|
||||
<span class="RV-Iconized__Container RV-Iconized__Container--small">
|
||||
<svg class="RV-Iconized__Icon RV-Iconized__Icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
|
||||
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="RV-Iconized__Text">This is a text</span>
|
||||
</span>
|
||||
|
|
@ -26,19 +42,15 @@
|
|||
You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
<a href="#">
|
||||
<span class="RV-Iconized__Container RV-Iconized__Container--small">
|
||||
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.136 482.135" style="enable-background:new 0 0 482.136 482.135;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M455.482,198.184L326.829,326.832c-35.535,35.54-93.108,35.54-128.646,0l-42.881-42.886l42.881-42.876l42.884,42.876
|
||||
c11.845,11.822,31.064,11.846,42.886,0l128.644-128.643c11.816-11.831,11.816-31.066,0-42.9l-42.881-42.881
|
||||
c-11.822-11.814-31.064-11.814-42.887,0l-45.928,45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526
|
||||
c35.535-35.521,93.136-35.521,128.644,0l42.886,42.881C491.018,105.045,491.018,162.663,455.482,198.184z M201.206,366.698
|
||||
l-45.903,45.9c-11.845,11.846-31.064,11.817-42.881,0l-42.884-42.881c-11.845-11.821-11.845-31.041,0-42.886l128.646-128.648
|
||||
c11.819-11.814,31.069-11.814,42.884,0l42.886,42.886l42.876-42.886l-42.876-42.881c-35.54-35.521-93.113-35.521-128.65,0
|
||||
L26.655,283.946c-35.538,35.545-35.538,93.146,0,128.652l42.883,42.882c35.51,35.54,93.11,35.54,128.646,0l72.496-72.499
|
||||
C246.724,384.578,222.588,379.197,201.206,366.698z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
|
||||
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="RV-Iconized__Text">Wurstwasser</span>
|
||||
</span>
|
||||
</a>
|
||||
You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
||||
|
|
|
|||
133
public/rcss.css
133
public/rcss.css
|
|
@ -18,76 +18,77 @@
|
|||
justify-content: center; }
|
||||
.RV-Alignment__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-Alignment__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-FlexRow__Container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around; }
|
||||
height: 100%; }
|
||||
.RV-FlexRow__Container--multiRow {
|
||||
flex-wrap: wrap; }
|
||||
.RV-FlexRow__Container--column {
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
.RV-FlexRow__Item__Container {
|
||||
display: grid; }
|
||||
.RV-FlexRow__Item__Container--top {
|
||||
display: grid;
|
||||
align-content: start; }
|
||||
.RV-FlexRow__Item__Container--bottom {
|
||||
display: grid;
|
||||
align-content: end; }
|
||||
.RV-FlexRow__Item__Container--left {
|
||||
display: grid;
|
||||
justify-content: start; }
|
||||
.RV-FlexRow__Item__Container--right {
|
||||
display: grid;
|
||||
justify-content: end; }
|
||||
.RV-FlexRow__Item__Container--horizontalCenter {
|
||||
display: grid;
|
||||
justify-content: center; }
|
||||
.RV-FlexRow__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
.RV-FlexRow__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
|
||||
.RV-FlexRow__Item, .RV-FlexRow__Item--normal {
|
||||
flex-grow: 3;
|
||||
flex-shrink: 3; }
|
||||
|
||||
.RV-FlexRow__Item--narrower {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 5; }
|
||||
|
||||
.RV-FlexRow__Item--narrow {
|
||||
flex-grow: 2;
|
||||
flex-shrink: 4; }
|
||||
|
||||
.RV-FlexRow__Item--wide {
|
||||
flex-grow: 4;
|
||||
flex-shrink: 2; }
|
||||
|
||||
.RV-FlexRow__Item--wider {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 1; }
|
||||
|
||||
.RV-FlexRow__Item--fixedSize {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: min-content; }
|
||||
.RV-FlexRow__Item {
|
||||
min-width: min-content;
|
||||
width: 100%; }
|
||||
.RV-FlexRow__Item__Container {
|
||||
display: grid; }
|
||||
.RV-FlexRow__Item__Container--top {
|
||||
display: grid;
|
||||
align-content: start; }
|
||||
.RV-FlexRow__Item__Container--bottom {
|
||||
display: grid;
|
||||
align-content: end; }
|
||||
.RV-FlexRow__Item__Container--left {
|
||||
display: grid;
|
||||
justify-content: start; }
|
||||
.RV-FlexRow__Item__Container--right {
|
||||
display: grid;
|
||||
justify-content: end; }
|
||||
.RV-FlexRow__Item__Container--horizontalCenter {
|
||||
display: grid;
|
||||
justify-content: center; }
|
||||
.RV-FlexRow__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-items: center; }
|
||||
.RV-FlexRow__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-items: center; }
|
||||
.RV-FlexRow__Item, .RV-FlexRow__Item--normal {
|
||||
flex-grow: 3;
|
||||
flex-shrink: 3; }
|
||||
.RV-FlexRow__Item--narrower {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 5; }
|
||||
.RV-FlexRow__Item--narrow {
|
||||
flex-grow: 2;
|
||||
flex-shrink: 4; }
|
||||
.RV-FlexRow__Item--wide {
|
||||
flex-grow: 4;
|
||||
flex-shrink: 2; }
|
||||
.RV-FlexRow__Item--wider {
|
||||
flex-grow: 5;
|
||||
flex-shrink: 1; }
|
||||
.RV-FlexRow__Item--fixedSize {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: min-content;
|
||||
flex-basis: 100px; }
|
||||
|
||||
.RV-FlexGrid__Container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-rows: repeat(auto-fill, 300px);
|
||||
grid-auto-rows: 300px; }
|
||||
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(300px, 1fr); }
|
||||
|
||||
.RV-FlexGrid__Item__Container {
|
||||
display: grid; }
|
||||
|
|
@ -108,12 +109,12 @@
|
|||
justify-content: center; }
|
||||
.RV-FlexGrid__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-FlexGrid__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
|
||||
overflow: hidden;
|
||||
|
|
@ -293,6 +294,8 @@
|
|||
|
||||
.RV-Iconized__Container {
|
||||
position: relative; }
|
||||
.RV-Iconized__Container--small {
|
||||
top: -.25em; }
|
||||
.RV-Iconized__Container--medium {
|
||||
top: -.5em; }
|
||||
.RV-Iconized__Container--large {
|
||||
|
|
@ -309,12 +312,18 @@
|
|||
right: 0;
|
||||
border: none; }
|
||||
|
||||
.RV-Iconized__Container--small .RV-Iconized__Icon {
|
||||
.RV-Iconized__Container--extraSmall .RV-Iconized__Icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
top: .125em; }
|
||||
|
||||
.RV-Iconized__Container--small .RV-Iconized__Icon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
position: relative;
|
||||
top: .45em; }
|
||||
|
||||
.RV-Iconized__Container--medium .RV-Iconized__Icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
|
|
@ -355,8 +364,8 @@
|
|||
.RV-ImageGrid__Container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-rows: repeat(auto-fill, 300px);
|
||||
grid-auto-rows: 300px; }
|
||||
grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-auto-rows: minmax(300px, 1fr); }
|
||||
|
||||
.RV-ImageGrid__Item__Container {
|
||||
display: grid; }
|
||||
|
|
@ -377,12 +386,12 @@
|
|||
justify-content: center; }
|
||||
.RV-ImageGrid__Item__Container--verticalCenter {
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
.RV-ImageGrid__Item__Container--center {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
align-content: center; }
|
||||
align-items: center; }
|
||||
|
||||
.RV-ImageGrid__Container {
|
||||
padding: 25px; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue