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

Spacing is a special case, no bem generator here

Browse Source
This commit is contained in:
reverend 2021-03-09 20:42:43 +01:00
parent a1d1f85085
commit 47f7f7efcf
1 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
components/03_Styles/spacing/_spacing.styl
View File

@ -1,63 +1,65 @@
RV-Spacing__Outer--small() RV-Spacing__Outer--small()
+RV-Element--modifier() --outer-spacing spacing-small
--outer-spacing spacing-small margin var(--outer-spacing)
margin var(--outer-spacing) * > {
* > { --outer-spacing 0
--outer-spacing 0 }
}
RV-Spacing__Outer--medium() RV-Spacing__Outer--medium()
+RV-Element--modifier() --outer-spacing spacing-medium
--outer-spacing spacing-medium margin var(--outer-spacing)
margin var(--outer-spacing) * > {
* > { --outer-spacing 0
--outer-spacing 0 }
}
RV-Spacing__Outer--large() RV-Spacing__Outer--large()
+RV-Element--modifier() --outer-spacing spacing-large
--outer-spacing spacing-large margin var(--outer-spacing)
margin var(--outer-spacing) * > {
* > { --outer-spacing 0
--outer-spacing 0 }
}
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
+RV-Element--modifier() --inner-spacing spacing-small
--inner-spacing spacing-small padding var(--inner-spacing)
padding var(--inner-spacing) gap var(--inner-spacing)
gap var(--inner-spacing) column-gap var(--inner-spacing)
column-gap var(--inner-spacing) * > {
* > { --inner-spacing 0
--inner-spacing 0 }
}
RV-Spacing__Inner--medium() RV-Spacing__Inner--medium()
+RV-Element--modifier() --inner-spacing spacing-medium
--inner-spacing spacing-medium padding var(--inner-spacing)
padding var(--inner-spacing) gap var(--inner-spacing)
gap var(--inner-spacing) column-gap var(--inner-spacing)
column-gap var(--inner-spacing) * > {
* > { --inner-spacing 0
--inner-spacing 0 }
}
RV-Spacing__Inner--large() RV-Spacing__Inner--large()
+RV-Element--modifier() --inner-spacing spacing-large
--inner-spacing spacing-large padding var(--inner-spacing)
padding var(--inner-spacing) gap var(--inner-spacing)
gap var(--inner-spacing) column-gap var(--inner-spacing)
column-gap var(--inner-spacing) * > {
* > { --inner-spacing 0
--inner-spacing 0 }
}
+RV-Block('RV-Spacing') .RV-Spacing
+RV-Element('Outer')
RV-Spacing__Outer--small()
RV-Spacing__Outer--medium()
RV-Spacing__Outer--large()
+RV-Element('Inner') &__Outer
RV-Spacing__Inner--small() &--small
RV-Spacing__Inner--medium() RV-Spacing__Outer--small()
RV-Spacing__Inner--large() &--medium
RV-Spacing__Outer--medium()
&--large
RV-Spacing__Outer--large()
&__Inner
&--small
RV-Spacing__Inner--small()
&--medium
RV-Spacing__Inner--medium()
&--large
RV-Spacing__Inner--large()