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

Prefix configuable

Browse Source
This commit is contained in:
reverend 2020-12-27 16:00:24 +01:00
parent 96d47dc56a
commit 8b4ba286d9
5 changed files with 216 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,76 +1,70 @@
@mixin RV-Alignment--top {
display: grid;
align-content: start;
display: grid;
align-content: start;
}
@mixin RV-Alignment--bottom {
display: grid;
align-content: end;
display: grid;
align-content: end;
}
@mixin RV-Alignment--left {
display: grid;
justify-content: start;
display: grid;
justify-content: start;
}
@mixin RV-Alignment--right {
display: grid;
justify-content: end;
display: grid;
justify-content: end;
}
@mixin RV-Alignment--horizontalCenter {
display: grid;
justify-content: center;
display: grid;
justify-content: center;
}
@mixin RV-Alignment--verticalCenter {
display: grid;
align-items: center;
display: grid;
align-items: center;
}
@mixin RV-Alignment--center {
@include RV-Alignment--horizontalCenter;
@include RV-Alignment--verticalCenter;
@include RV-Alignment--horizontalCenter;
@include RV-Alignment--verticalCenter;
}
@mixin RV-Alignment__Container {
display: grid;
@mixin RV-Alignment($-prefix: '&') {
display: grid;
&--top {
@include RV-Alignment--top;
}
#{$-prefix}--top {
@include RV-Alignment--top;
}
&--bottom {
@include RV-Alignment--bottom;
}
#{$-prefix}--bottom {
@include RV-Alignment--bottom;
}
&--left {
@include RV-Alignment--left;
}
#{$-prefix}--left {
@include RV-Alignment--left;
}
&--right {
@include RV-Alignment--right;
}
#{$-prefix}--right {
@include RV-Alignment--right;
}
&--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
#{$-prefix}--horizontalCenter {
@include RV-Alignment--horizontalCenter;
}
&--verticalCenter {
@include RV-Alignment--verticalCenter;
}
#{$-prefix}--verticalCenter {
@include RV-Alignment--verticalCenter;
}
&--center {
@include RV-Alignment--center;
}
}
@mixin RV-Alignment {
&__Container {
@include RV-Alignment__Container;
}
#{$-prefix}--center {
@include RV-Alignment--center;
}
}
.RV-Alignment {
@include RV-Alignment;
@include RV-Alignment;
}

96
components/01_Layouts/fan/_fan.scss
View File

@ -1,67 +1,69 @@
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
&__Container#{$-suffix} {
flex-direction: row;
}
#{$-prefix}__Container#{$-suffix} {
flex-direction: row;
}
&__Container#{$-suffix} &__Surface {
min-width: $-base_width;
height: $-base_height;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
min-width: $-base_width;
height: $-base_height;
}
}
@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
&__Container#{$-suffix} {
flex-direction: column;
width:max-content;
}
@mixin RV-Fan--vertical($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} {
flex-direction: column;
width: max-content;
}
&__Container#{$-suffix} &__Surface {
width: $-base_width;
min-height: $-base_height;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: $-base_width;
min-height: $-base_height;
}
}
@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {
@mixin RV-Fan--auto($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
&__Container#{$-suffix} {
flex-flow: row wrap;
}
#{$-prefix}__Container#{$-suffix} {
flex-flow: row wrap;
}
&__Container#{$-suffix} &__Surface {
width: calc(100% - #{$-base_width});
min-width: $-base-width;
height: $-base_height;
}
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
width: calc(100% - #{$-base_width});
min-width: $-base-width;
height: $-base_height;
}
}
@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
flex-grow: 1;
}
@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Base,
#{$-prefix}__Container#{$-suffix} #{$-prefix}__Surface {
flex-grow: 1;
}
}
@mixin RV-Fan ($-base_height, $-base_width) {
@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
@include RV-Fan--auto($-base_height, $-base_width, '--auto');
@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');
@mixin RV-Fan ($-base_height, $-base_width, $-prefix: '&') {
@include RV-Fan--vertical($-base_height, $-base_width, $-prefix, '--vertical');
@include RV-Fan--horizontal($-base_height, $-base_width, $-prefix, '--horizontal');
@include RV-Fan--auto($-base_height, $-base_width, $-prefix, '--auto');
@include RV-Fan--fullWidth($-base_height, $-base_width, $-prefix, '--fullWidth');
&__Container {
display: flex;
}
#{$-prefix}__Container {
display: flex;
}
&__Base {
height: $-base_height;
width: $-base_width;
flex: 0 0 auto;
}
#{$-prefix}__Base {
height: $-base_height;
width: $-base_width;
flex: 0 0 auto;
}
&__Surface {
@include RV-ContentCrop;
}
#{$-prefix}__Surface {
@include RV-ContentCrop;
}
}
.RV-Fan {
@include RV-Fan(280px, 320px);
@include RV-Fan(280px, 320px);
}

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

@ -1,20 +1,20 @@
@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
grid-auto-rows: minmax($-item_height, 1fr);
display: grid;
grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
grid-auto-rows: minmax($-item_height, 1fr);
}
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
&__Container {
@include RV-FlexGrid__Container($-item_width, $-item_height);
}
@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px, $-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexGrid__Container($-item_width, $-item_height);
}
&__Item {
@include RV-Alignment;
}
#{$-prefix}__Item {
@include RV-Alignment;
}
}
.RV-FlexGrid{
@include RV-FlexGrid;
.RV-FlexGrid {
@include RV-FlexGrid;
}

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

@ -1,104 +1,141 @@
@mixin RV-FlexRow__Container--column {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}
@mixin RV-FlexRow__Container--multiRow {
flex-wrap: wrap;
flex-wrap: wrap;
}
@mixin RV-FlexRow__Container {
display: flex;
flex-direction: row;
height: 100%;
@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
flex-direction: row;
flex-wrap: wrap;
&--multiRow {
@include RV-FlexRow__Container--multiRow;
}
* {
flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
}
}
&--column {
@include RV-FlexRow__Container--column;
}
@mixin RV-FlexRow__Container--vertical {
flex-direction: column;
}
@mixin RV-FlexRow__Container($-prefix: '&') {
display: flex;
height: 100%;
}
@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
#{$-prefix}--multiRow {
@include RV-FlexRow__Container--multiRow;
}
#{$-prefix}--column {
@include RV-FlexRow__Container--column;
}
#{$-prefix}--horizontal {
@include RV-FlexRow__Container--horizontal(#{$-break_width});
}
#{$-prefix}--vertical {
@include RV-FlexRow__Container--vertical;
}
}
@mixin RV-FlexRow__Item--normal {
flex-grow: 3;
flex-shrink: 3;
flex-grow: 3;
flex-shrink: 3;
}
@mixin RV-FlexRow__Item--narrower {
flex-grow: 1;
flex-shrink: 5;
flex-grow: 1;
flex-shrink: 5;
}
@mixin RV-FlexRow__Item--narrow {
flex-grow: 2;
flex-shrink: 4;
flex-grow: 2;
flex-shrink: 4;
}
@mixin RV-FlexRow__Item--wide {
flex-grow: 4;
flex-shrink: 2;
flex-grow: 4;
flex-shrink: 2;
}
@mixin RV-FlexRow__Item--wider {
flex-grow: 5;
flex-shrink: 1;
flex-grow: 5;
flex-shrink: 1;
}
@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
flex-grow: 0;
flex-shrink: 0;
width: min-content;
flex-basis: $-width;
}
@mixin RV-FlexRow__Item {
@include RV-Alignment;
@mixin RV-FlexRow__Item($-prefix: '&') {
min-width: min-content;
width: 100%;
min-width: min-content;
width: 100%;
&,&--normal {
@include RV-FlexRow__Item--normal;
}
&--narrower {
@include RV-FlexRow__Item--narrower;
}
&--narrow {
@include RV-FlexRow__Item--narrow;
}
&--wide {
@include RV-FlexRow__Item--wide;
}
&--wider {
@include RV-FlexRow__Item--wider;
}
&--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
#{$-prefix},
#{$-prefix}--normal {
@include RV-FlexRow__Item--normal;
}
}
@mixin RV-FlexRow--multiRow {
&__Container {
@include RV-FlexRow__Container--multiRow;
}
@mixin RV-FlexRow__Item--advanced($-prefix: '&') {
@include RV-Alignment;
#{$-prefix}--narrower {
@include RV-FlexRow__Item--narrower;
}
#{$-prefix}--narrow {
@include RV-FlexRow__Item--narrow;
}
#{$-prefix}--wide {
@include RV-FlexRow__Item--wide;
}
#{$-prefix}--wider {
@include RV-FlexRow__Item--wider;
}
#{$-prefix}--fixedSize {
@include RV-FlexRow__Item--fixedSize;
}
}
@mixin RV-FlexRow {
&__Container {
@include RV-FlexRow__Container;
}
&__Item {
@include RV-FlexRow__Item;
}
@mixin RV-FlexRow--multiRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--multiRow;
}
}
.RV-FlexRow{
@include RV-FlexRow;
@mixin RV-FlexRow($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container($-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item($-prefix: $-prefix);
}
}
@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
#{$-prefix}__Container {
@include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
}
#{$-prefix}__Item {
@include RV-FlexRow__Item--advanced($-prefix: $-prefix);
}
}
.RV-FlexRow {
@include RV-FlexRow;
@include RV-FlexRow--advanced;
}

14
components/01_Layouts/fullWidthContent/_fullWidthContent.scss
View File

@ -1,19 +1,19 @@
@mixin RV-FullWidthContent__Container {
width: 100%;
width: 100%;
}
@mixin RV-FullWidthContent__Item {
width: 100%;
@include RV-ContentCrop;
width: 100%;
@include RV-ContentCrop;
}
@mixin RV-FullWidthContent {
&__Container {
@mixin RV-FullWidthContent($-prefix: '&') {
#{$-prefix}__Container {
@include RV-FullWidthContent__Container;
}
&__Item {
@include RV-FullWidthContent__Item;
#{$-prefix}__Item {
@include RV-FullWidthContent__Item;
}
}