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

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

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

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

@ -1,22 +1,21 @@
RV-FlexRow {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-around;
@mixin RV-FlexRow {
&__Container {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: space-around;
&--wrap {
flex-wrap: wrap;
&--wrap {
flex-wrap: wrap;
}
}
* {
&__Item {
width: 100%;
@include align-content;
}
}
.RV-FlexRow__Container {
@extend RV-FlexRow;
.RV-FlexRow__Item {
@include align-content;
}
.RV-FlexRow{
@include RV-FlexRow;
}

4
components/rcss.scss
View File

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

72
public/rcss.css
View File

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