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

Converting Layouts to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:36:12 +01:00
parent 3f3874427c
commit 333aa9d1b5
36 changed files with 1088 additions and 1773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/02_Styles/_styles.scss
View File

@@ -1,3 +0,0 @@
@import 'boxShadow/boxShadow';
@import 'spacing/spacing';
@import 'iconized/iconized';

6
components/02_Styles/_styles.styl Normal file
View File

@@ -0,0 +1,6 @@
@import 'spacing/_spacing'
/*
@import 'boxShadow/boxShadow';
@import 'iconized/iconized';
*/

99
components/02_Styles/spacing/_spacing.scss
View File

@@ -1,99 +0,0 @@
@use "sass:meta";
@mixin RV-Spacing__Outer--small {
margin: $-spacing-small;
}
@mixin RV-Spacing__Outer--medium {
margin: $-spacing-medium;
}
@mixin RV-Spacing__Outer--large {
margin: $-spacing-large;
}
@mixin _flexrow_breakpoint_min_width($-gap) {
@include RV-Utils__Hook--catch {
$-breakpoint: get-hook-value('breakPoint');
@include RV-Utils__ElementAmount using($-index) {
min-width: calc((#{$-breakpoint} - (#{$-gap} * (#{$-index} - 1))) / #{$-index} - (2 * #{$-gap}));
* {
min-width: initial;
}
}
}
}
@mixin _flexgrid_masonry_column_gap($-gap) {
@include RV-Utils__Hook--catch {
* {
margin: $-gap/2 0;
}
}
}
@mixin RV-Spacing__Inner--small() {
padding: $-spacing-small;
gap: $-spacing-small;
column-gap: $-spacing-small;
@include _flexrow_breakpoint_min_width($-spacing-small);
@include _flexgrid_masonry_column_gap($-spacing-small);
}
@mixin RV-Spacing__Inner--medium() {
padding: $-spacing-medium;
gap: $-spacing-medium;
column-gap: $-spacing-medium;
@include _flexrow_breakpoint_min_width($-spacing-medium);
@include _flexgrid_masonry_column_gap($-spacing-medium);
}
@mixin RV-Spacing__Inner--large() {
padding: $-spacing-large;
gap: $-spacing-large;
column-gap: $-spacing-large;
@include _flexrow_breakpoint_min_width($-spacing-large);
@include _flexgrid_masonry_column_gap($-spacing-medium);
}
@mixin RV-Spacing {
&__Outer {
&--small {
@include RV-Spacing__Outer--small;
}
&--medium {
@include RV-Spacing__Outer--medium;
}
&--large {
@include RV-Spacing__Outer--large;
}
}
&__Inner {
&--small {
@include RV-Spacing__Inner--small;
}
&--medium {
@include RV-Spacing__Inner--medium;
}
&--large {
@include RV-Spacing__Inner--large;
}
}
}
.RV-Spacing {
@include RV-Spacing;
}

56
components/02_Styles/spacing/_spacing.styl Normal file
View File

@@ -0,0 +1,56 @@
RV-Spacing__Outer--small()
margin spacing-small
RV-Spacing__Outer--medium()
margin spacing-medium
RV-Spacing__Outer--large()
margin spacing-large
RV-Spacing__Inner--small()
padding spacing-small
gap spacing-small
column-gap spacing-small
RV-Utils__Hook--catch('masonry_grid', spacing-small)
RV-Spacing__Inner--medium()
padding spacing-medium
gap spacing-medium
column-gap spacing-medium
RV-Utils__Hook--catch('masonry_grid', spacing-medium)
RV-Spacing__Inner--large()
padding spacing-large
gap spacing-large
column-gap spacing-large
RV-Utils__Hook--catch('masonry_grid', spacing-large)
RV-Spacing(prefix='&')
{prefix}__Outer
&--small
RV-Spacing__Outer--small()
&--medium
RV-Spacing__Outer--medium()
&--large
RV-Spacing__Outer--large()
{prefix}__Inner
&--small
RV-Spacing__Inner--small()
&--medium
RV-Spacing__Inner--medium()
&--large
RV-Spacing__Inner--large()
.RV-Spacing
RV-Spacing()
test()