reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Quickfixes and boxshadow

Browse Source
This commit is contained in:
reverend 2020-08-27 15:47:37 +02:00
parent 552123c0cf
commit 1b053523d1
6 changed files with 126 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/01_Layouts/alignment/_alignment.scss
View File

@ -25,7 +25,7 @@
@mixin RV-Alignment--verticalCenter { @mixin RV-Alignment--verticalCenter {
display: grid; display: grid;
align-content: center; align-items: center;
} }
@mixin RV-Alignment--center { @mixin RV-Alignment--center {

8
components/01_Layouts/flexRow/_flexRow.scss
View File

@ -11,7 +11,7 @@
@mixin RV-FlexRow__Container { @mixin RV-FlexRow__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; height: 100%;
&--multiRow { &--multiRow {
@include RV-FlexRow__Container--multiRow; @include RV-FlexRow__Container--multiRow;
@ -83,6 +83,12 @@
} }
} }
@mixin RV-FlexRow--multiRow {
&__Container {
@include RV-FlexRow__Container--multiRow;
}
}
@mixin RV-FlexRow { @mixin RV-FlexRow {
&__Container { &__Container {
@include RV-FlexRow__Container; @include RV-FlexRow__Container;

12
components/02_Styles/boxShadow/_boxShadow.scss
View File

@ -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; position:relative;
float:left; 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 { &:before, &:after {
content:""; content:"";
@ -14,7 +14,7 @@
} }
&--simple { &--simple {
box-shadow: 0 0 20px $color; @include RV-BoxShadow--simple($-color);
} }
&--raised { &--raised {

14
components/02_Styles/iconized/_iconized.scss
View File

@ -2,6 +2,10 @@
&__Container { &__Container {
position: relative; position: relative;
&--small {
top: -.25em;
}
&--medium { &--medium {
top: -.5em; top: -.5em;
} }
@ -19,12 +23,20 @@
@include RV-Reset; @include RV-Reset;
} }
&__Container--small &__Icon{ &__Container--extraSmall &__Icon{
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
top: .125em; top: .125em;
} }
&__Container--small &__Icon{
width: 1.5em;
height: 1.5em;
position: relative;
top: .45em;
}
&__Container--medium &__Icon{ &__Container--medium &__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;

42
components/02_Styles/iconized/iconized.hbs
View File

@ -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"> <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"> <svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
<path d="M0 0h24v24H0z" fill="none"></path> xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
<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> 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> </svg>
<span class="RV-Iconized__Text">This is a text</span> <span class="RV-Iconized__Text">This is a text</span>
</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. 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="#"> <a href="#">
<span class="RV-Iconized__Container RV-Iconized__Container--small"> <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;" <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"> xml:space="preserve">
<g> <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 <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
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 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" />
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 </g>
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 </svg>
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 <span class="RV-Iconized__Text">Wurstwasser</span>
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>
</span> </span>
</a> </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. 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.

65
public/rcss.css
View File

@ -18,21 +18,27 @@
justify-content: center; } justify-content: center; }
.RV-Alignment__Container--verticalCenter { .RV-Alignment__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-Alignment__Container--center { .RV-Alignment__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Container { .RV-FlexRow__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; } height: 100%; }
.RV-FlexRow__Container--multiRow { .RV-FlexRow__Container--multiRow {
flex-wrap: wrap; } flex-wrap: wrap; }
.RV-FlexRow__Container--column {
display: flex;
flex-direction: column; }
.RV-FlexRow__Item__Container { .RV-FlexRow__Item {
min-width: min-content;
width: 100%; }
.RV-FlexRow__Item__Container {
display: grid; } display: grid; }
.RV-FlexRow__Item__Container--top { .RV-FlexRow__Item__Container--top {
display: grid; display: grid;
@ -51,43 +57,38 @@
justify-content: center; } justify-content: center; }
.RV-FlexRow__Item__Container--verticalCenter { .RV-FlexRow__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Item__Container--center { .RV-FlexRow__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexRow__Item, .RV-FlexRow__Item--normal {
.RV-FlexRow__Item, .RV-FlexRow__Item--normal {
flex-grow: 3; flex-grow: 3;
flex-shrink: 3; } flex-shrink: 3; }
.RV-FlexRow__Item--narrower {
.RV-FlexRow__Item--narrower {
flex-grow: 1; flex-grow: 1;
flex-shrink: 5; } flex-shrink: 5; }
.RV-FlexRow__Item--narrow {
.RV-FlexRow__Item--narrow {
flex-grow: 2; flex-grow: 2;
flex-shrink: 4; } flex-shrink: 4; }
.RV-FlexRow__Item--wide {
.RV-FlexRow__Item--wide {
flex-grow: 4; flex-grow: 4;
flex-shrink: 2; } flex-shrink: 2; }
.RV-FlexRow__Item--wider {
.RV-FlexRow__Item--wider {
flex-grow: 5; flex-grow: 5;
flex-shrink: 1; } flex-shrink: 1; }
.RV-FlexRow__Item--fixedSize {
.RV-FlexRow__Item--fixedSize {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
width: min-content; } width: min-content;
flex-basis: 100px; }
.RV-FlexGrid__Container { .RV-FlexGrid__Container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fill, 300px); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 300px; } grid-auto-rows: minmax(300px, 1fr); }
.RV-FlexGrid__Item__Container { .RV-FlexGrid__Item__Container {
display: grid; } display: grid; }
@ -108,12 +109,12 @@
justify-content: center; } justify-content: center; }
.RV-FlexGrid__Item__Container--verticalCenter { .RV-FlexGrid__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-FlexGrid__Item__Container--center { .RV-FlexGrid__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ContentCrop__Container, .RV-ContentCrop__Container * { .RV-ContentCrop__Container, .RV-ContentCrop__Container * {
overflow: hidden; overflow: hidden;
@ -293,6 +294,8 @@
.RV-Iconized__Container { .RV-Iconized__Container {
position: relative; } position: relative; }
.RV-Iconized__Container--small {
top: -.25em; }
.RV-Iconized__Container--medium { .RV-Iconized__Container--medium {
top: -.5em; } top: -.5em; }
.RV-Iconized__Container--large { .RV-Iconized__Container--large {
@ -309,12 +312,18 @@
right: 0; right: 0;
border: none; } border: none; }
.RV-Iconized__Container--small .RV-Iconized__Icon { .RV-Iconized__Container--extraSmall .RV-Iconized__Icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
top: .125em; } 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 { .RV-Iconized__Container--medium .RV-Iconized__Icon {
width: 2em; width: 2em;
height: 2em; height: 2em;
@ -355,8 +364,8 @@
.RV-ImageGrid__Container { .RV-ImageGrid__Container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: repeat(auto-fill, 300px); grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 300px; } grid-auto-rows: minmax(300px, 1fr); }
.RV-ImageGrid__Item__Container { .RV-ImageGrid__Item__Container {
display: grid; } display: grid; }
@ -377,12 +386,12 @@
justify-content: center; } justify-content: center; }
.RV-ImageGrid__Item__Container--verticalCenter { .RV-ImageGrid__Item__Container--verticalCenter {
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ImageGrid__Item__Container--center { .RV-ImageGrid__Item__Container--center {
display: grid; display: grid;
justify-content: center; justify-content: center;
display: grid; display: grid;
align-content: center; } align-items: center; }
.RV-ImageGrid__Container { .RV-ImageGrid__Container {
padding: 25px; } padding: 25px; }