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

Relativ CSS Class Names

Browse Source
This commit is contained in:
reverend 2020-08-21 17:20:29 +02:00
parent 232c869d43
commit 066de9a052
4 changed files with 65 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/01_Layouts/flexGrid/_flexGrid.scss
View File

@ -1,4 +1,5 @@
RV-FlexGrid{ @mixin RV-FlexGrid {
&__Container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@ -9,12 +10,13 @@ RV-FlexGrid{
&--spacing { &--spacing {
gap: 10px; gap: 10px;
} }
} }
.RV-FlexGrid__Container { &__Item {
@extend RV-FlexGrid;
.RV-FlexGrid__Item {
@include align-content; @include align-content;
} }
} }
.RV-FlexGrid{
@include RV-FlexGrid;
}

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

@ -1,4 +1,5 @@
RV-FlexRow { @mixin RV-FlexRow {
&__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
@ -7,16 +8,14 @@ RV-FlexRow {
&--wrap { &--wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
* {
width: 100%;
} }
}
.RV-FlexRow__Container { &__Item {
@extend RV-FlexRow; width: 100%;
.RV-FlexRow__Item {
@include align-content; @include align-content;
} }
} }
.RV-FlexRow{
@include RV-FlexRow;
}

2
components/rcss.scss
View File

@ -1,2 +1,2 @@
@import './components';
@import './pink.css'; @import './pink.css';
@import './components';

50
public/rcss.css
View File

@ -1,68 +1,64 @@
@import url(./pink.css); @import url(./pink.css);
RV-FlexRow, .RV-FlexRow__Container { .RV-FlexRow__Container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
justify-content: space-around; } justify-content: space-around; }
RV-FlexRow--wrap { .RV-FlexRow__Container--wrap {
flex-wrap: wrap; } flex-wrap: wrap; }
RV-FlexRow *, .RV-FlexRow__Container * {
width: 100%; }
.RV-FlexRow__Container .RV-FlexRow__Item * { .RV-FlexRow__Item {
width: 100%; }
.RV-FlexRow__Item * {
text-align: unset; text-align: unset;
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
.RV-FlexRow__Item--fixedSize {
.RV-FlexRow__Container .RV-FlexRow__Item--fixedSize {
flex: 0 0; flex: 0 0;
width: min-content; } width: min-content; }
.RV-FlexRow__Item--center {
.RV-FlexRow__Container .RV-FlexRow__Item--center {
text-align: center; } text-align: center; }
.RV-FlexRow__Container .RV-FlexRow__Item--center * { .RV-FlexRow__Item--center * {
justify-content: center; } justify-content: center; }
.RV-FlexRow__Item--left {
.RV-FlexRow__Container .RV-FlexRow__Item--left {
text-align: left; } text-align: left; }
.RV-FlexRow__Container .RV-FlexRow__Item--left * { .RV-FlexRow__Item--left * {
justify-content: flex-start; } justify-content: flex-start; }
.RV-FlexRow__Item--right {
.RV-FlexRow__Container .RV-FlexRow__Item--right {
text-align: right; } text-align: right; }
.RV-FlexRow__Container .RV-FlexRow__Item--right * { .RV-FlexRow__Item--right * {
justify-content: flex-end; } justify-content: flex-end; }
RV-FlexGrid, .RV-FlexGrid__Container { .RV-FlexGrid__Container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
RV-FlexGrid--sameHeight { .RV-FlexGrid__Container--sameHeight {
grid-auto-rows: 1fr; } grid-auto-rows: 1fr; }
RV-FlexGrid--spacing { .RV-FlexGrid__Container--spacing {
gap: 10px; } gap: 10px; }
.RV-FlexGrid__Container .RV-FlexGrid__Item * { .RV-FlexGrid__Item * {
text-align: unset; text-align: unset;
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--fixedSize { .RV-FlexGrid__Item--fixedSize {
flex: 0 0; flex: 0 0;
width: min-content; } width: min-content; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--center { .RV-FlexGrid__Item--center {
text-align: center; } text-align: center; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--center * { .RV-FlexGrid__Item--center * {
justify-content: center; } justify-content: center; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--left { .RV-FlexGrid__Item--left {
text-align: left; } text-align: left; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--left * { .RV-FlexGrid__Item--left * {
justify-content: flex-start; } justify-content: flex-start; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--right { .RV-FlexGrid__Item--right {
text-align: right; } text-align: right; }
.RV-FlexGrid__Container .RV-FlexGrid__Item--right * { .RV-FlexGrid__Item--right * {
justify-content: flex-end; } justify-content: flex-end; }
RV-ContentCrop, .RV-ContentCrop__Container, RV-ContentCrop *, .RV-ContentCrop__Container * { RV-ContentCrop, .RV-ContentCrop__Container, RV-ContentCrop *, .RV-ContentCrop__Container * {