diff --git a/components/01_Layouts/flexGrid/flexGrid.config.json b/components/01_Layouts/flexGrid/flexGrid.config.json index 6b4800d..b4d5767 100644 --- a/components/01_Layouts/flexGrid/flexGrid.config.json +++ b/components/01_Layouts/flexGrid/flexGrid.config.json @@ -1,5 +1,8 @@ { "title": "FlexGRid", + "context": { + "item-shadow" : "drop" + }, "variants": [ { "name": "AutoWidth", @@ -18,6 +21,12 @@ "context": { "modifier": "--masonry" } + }, + { + "name": "Horizontal Masonry", + "context": { + "modifier": "--horizontalMasonry" + } } ] } \ No newline at end of file diff --git a/components/02_Styles/spacing/_spacing.styl b/components/02_Styles/spacing/_spacing.styl index f3e5ac6..fb840d6 100644 --- a/components/02_Styles/spacing/_spacing.styl +++ b/components/02_Styles/spacing/_spacing.styl @@ -1,38 +1,55 @@ RV-Spacing__Outer--small() +RV-Element__Modifier('small') - margin spacing-small --outer-spacing spacing-small + margin var(--outer-spacing) + * > { + --outer-spacing 0 + } RV-Spacing__Outer--medium() +RV-Element__Modifier('medium') - margin spacing-medium --outer-spacing spacing-medium + margin var(--outer-spacing) + * > { + --outer-spacing 0 + } RV-Spacing__Outer--large() - +RV-Element__Modifier('large') - margin spacing-large + +RV-Element__Modifier('large') --outer-spacing spacing-large - + + * > { + --outer-spacing 0 + } RV-Spacing__Inner--small() +RV-Element__Modifier('small') - padding spacing-small - gap spacing-small - column-gap spacing-small --inner-spacing spacing-small + padding var(--inner-spacing) + gap var(--inner-spacing) + column-gap var(--inner-spacing) + * > { + --inner-spacing 0 + } RV-Spacing__Inner--medium() +RV-Element__Modifier('medium') - padding spacing-medium - gap spacing-medium - column-gap spacing-medium --inner-spacing spacing-medium + padding var(--inner-spacing) + gap var(--inner-spacing) + column-gap var(--inner-spacing) + * > { + --inner-spacing 0 + } RV-Spacing__Inner--large() +RV-Element__Modifier('large') - padding spacing-large - gap spacing-large - column-gap spacing-large --inner-spacing spacing-large + padding var(--inner-spacing) + gap var(--inner-spacing) + column-gap var(--inner-spacing) + * > { + --inner-spacing 0 + } +RV-Block('RV-Spacing') +RV-Element('Outer')