Prefix configuable
This commit is contained in:
parent
96d47dc56a
commit
8b4ba286d9
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,67 +1,69 @@
|
|||
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
|
||||
|
||||
&__Container#{$-suffix} {
|
||||
flex-direction: row;
|
||||
}
|
||||
@mixin RV-Fan--horizontal($-base_height, $-base_width, $-prefix: '&', $-suffix: '') {
|
||||
|
||||
&__Container#{$-suffix} &__Surface {
|
||||
min-width: $-base_width;
|
||||
height: $-base_height;
|
||||
}
|
||||
#{$-prefix}__Container#{$-suffix} {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#{$-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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue