diff --git a/_lib/solid-utilities/_layout.scss b/_lib/solid-utilities/_layout.scss index 71779eca..cf27d2c8 100644 --- a/_lib/solid-utilities/_layout.scss +++ b/_lib/solid-utilities/_layout.scss @@ -11,13 +11,9 @@ // ------------------------- @import "layout/_display.scss"; -// Margin +// Spacing // ------------------------- -@import "layout/_margin.scss"; - -// Padding -// ------------------------- -@import "layout/_padding.scss"; +@import "layout/_spacing.scss"; // Positioning // ------------------------- diff --git a/_lib/solid-utilities/layout/_margin.scss b/_lib/solid-utilities/layout/_margin.scss deleted file mode 100644 index 939f04a5..00000000 --- a/_lib/solid-utilities/layout/_margin.scss +++ /dev/null @@ -1,71 +0,0 @@ - -// Margin -// ------------------------- - -@include generate-breakpoint-prefixes { - &m0 { margin: 0 !important; } - &mt0 { margin-top: 0 !important; } - &mr0 { margin-right: 0 !important; } - &mb0 { margin-bottom: 0 !important; } - &ml0 { margin-left: 0 !important; } - &mx0 { margin-left: 0 !important; margin-right: 0 !important; } - &my0 { margin-top: 0 !important; margin-bottom: 0 !important; } - - &m05 { margin: $space-05 !important; } - &mt05 { margin-top: $space-05 !important; } - &mr05 { margin-right: $space-05 !important; } - &mb05 { margin-bottom: $space-05 !important; } - &ml05 { margin-left: $space-05 !important; } - &mx05 { margin-left: $space-05 !important; margin-right: $space-05 !important;} - &my05 { margin-top: $space-05 !important; margin-bottom: $space-05 !important;} - - &m1 { margin: $space-1 !important; } - &mt1 { margin-top: $space-1 !important; } - &mr1 { margin-right: $space-1 !important; } - &mb1 { margin-bottom: $space-1 !important; } - &ml1 { margin-left: $space-1 !important; } - &mx1 { margin-left: $space-1 !important; margin-right: $space-1 !important;} - &my1 { margin-top: $space-1 !important; margin-bottom: $space-1 !important;} - - &m2 { margin: $space-2 !important; } - &mt2 { margin-top: $space-2 !important; } - &mr2 { margin-right: $space-2 !important; } - &mb2 { margin-bottom: $space-2 !important; } - &ml2 { margin-left: $space-2 !important; } - &mx2 { margin-left: $space-2 !important; margin-right: $space-2 !important;} - &my2 { margin-top: $space-2 !important; margin-bottom: $space-2 !important;} - - &m3 { margin: $space-3 !important; } - &mt3 { margin-top: $space-3 !important; } - &mr3 { margin-right: $space-3 !important; } - &mb3 { margin-bottom: $space-3 !important; } - &ml3 { margin-left: $space-3 !important; } - &mx3 { margin-left: $space-3 !important; margin-right: $space-3 !important;} - &my3 { margin-top: $space-3 !important; margin-bottom: $space-3 !important;} - - &m4 { margin: $space-4 !important; } - &mt4 { margin-top: $space-4 !important; } - &mr4 { margin-right: $space-4 !important; } - &mb4 { margin-bottom: $space-4 !important; } - &ml4 { margin-left: $space-4 !important; } - &mx4 { margin-left: $space-4 !important; margin-right: $space-4 !important;} - &my4 { margin-top: $space-4 !important; margin-bottom: $space-4 !important;} - - &m5 { margin: $space-5 !important; } - &mt5 { margin-top: $space-5 !important; } - &mr5 { margin-right: $space-5 !important; } - &mb5 { margin-bottom: $space-5 !important; } - &ml5 { margin-left: $space-5 !important; } - &mx5 { margin-left: $space-5 !important; margin-right: $space-5 !important;} - &my5 { margin-top: $space-5 !important; margin-bottom: $space-5 !important;} - - &m6 { margin: $space-6 !important; } - &mt6 { margin-top: $space-6 !important; } - &mr6 { margin-right: $space-6 !important; } - &mb6 { margin-bottom: $space-6 !important; } - &ml6 { margin-left: $space-6 !important; } - &mx6 { margin-left: $space-6 !important; margin-right: $space-6 !important;} - &my6 { margin-top: $space-6 !important; margin-bottom: $space-6 !important;} - - &mx-auto { margin-left: auto !important; margin-right: auto !important; } -} diff --git a/_lib/solid-utilities/layout/_padding.scss b/_lib/solid-utilities/layout/_padding.scss deleted file mode 100644 index b6238175..00000000 --- a/_lib/solid-utilities/layout/_padding.scss +++ /dev/null @@ -1,69 +0,0 @@ - -// Padding -// ------------------------- - -@include generate-breakpoint-prefixes { - &p0 { padding: 0 !important; } - &pt0 { padding-top: 0 !important; } - &pr0 { padding-right: 0 !important; } - &pb0 { padding-bottom: 0 !important; } - &pl0 { padding-left: 0 !important; } - &px0 { padding-left: 0 !important; padding-right: 0 !important;} - &py0 { padding-top: 0 !important; padding-bottom: 0 !important;} - - &p05 { padding: $space-05 !important; } - &pt05 { padding-top: $space-05 !important; } - &pr05 { padding-right: $space-05 !important; } - &pb05 { padding-bottom: $space-05 !important; } - &pl05 { padding-left: $space-05 !important; } - &px05 { padding-left: $space-05 !important; padding-right: $space-05 !important; } - &py05 { padding-top: $space-05 !important; padding-bottom: $space-05 !important; } - - &p1 { padding: $space-1 !important; } - &pt1 { padding-top: $space-1 !important; } - &pr1 { padding-right: $space-1 !important; } - &pb1 { padding-bottom: $space-1 !important; } - &pl1 { padding-left: $space-1 !important; } - &px1 { padding-left: $space-1 !important; padding-right: $space-1 !important; } - &py1 { padding-top: $space-1 !important; padding-bottom: $space-1 !important; } - - &p2 { padding: $space-2 !important; } - &pt2 { padding-top: $space-2 !important; } - &pr2 { padding-right: $space-2 !important; } - &pb2 { padding-bottom: $space-2 !important; } - &pl2 { padding-left: $space-2 !important; } - &px2 { padding-left: $space-2 !important; padding-right: $space-2 !important;} - &py2 { padding-top: $space-2 !important; padding-bottom: $space-2 !important;} - - &p3 { padding: $space-3 !important; } - &pt3 { padding-top: $space-3 !important; } - &pr3 { padding-right: $space-3 !important; } - &pb3 { padding-bottom: $space-3 !important; } - &pl3 { padding-left: $space-3 !important; } - &px3 { padding-left: $space-3 !important; padding-right: $space-3 !important;} - &py3 { padding-top: $space-3 !important; padding-bottom: $space-3 !important;} - - &p4 { padding: $space-4 !important; } - &pt4 { padding-top: $space-4 !important; } - &pr4 { padding-right: $space-4 !important; } - &pb4 { padding-bottom: $space-4 !important; } - &pl4 { padding-left: $space-4 !important; } - &px4 { padding-left: $space-4 !important; padding-right: $space-4 !important;} - &py4 { padding-top: $space-4 !important; padding-bottom: $space-4 !important;} - - &p5 { padding: $space-5 !important; } - &pt5 { padding-top: $space-5 !important; } - &pr5 { padding-right: $space-5 !important; } - &pb5 { padding-bottom: $space-5 !important; } - &pl5 { padding-left: $space-5 !important; } - &px5 { padding-left: $space-5 !important; padding-right: $space-5 !important;} - &py5 { padding-top: $space-5 !important; padding-bottom: $space-5 !important;} - - &p6 { padding: $space-6 !important; } - &pt6 { padding-top: $space-6 !important; } - &pr6 { padding-right: $space-6 !important; } - &pb6 { padding-bottom: $space-6 !important; } - &pl6 { padding-left: $space-6 !important; } - &px6 { padding-left: $space-6 !important; padding-right: $space-6 !important;} - &py6 { padding-top: $space-6 !important; padding-bottom: $space-6 !important;} -} diff --git a/_lib/solid-utilities/layout/_spacing.scss b/_lib/solid-utilities/layout/_spacing.scss new file mode 100644 index 00000000..bf05d973 --- /dev/null +++ b/_lib/solid-utilities/layout/_spacing.scss @@ -0,0 +1,20 @@ + +// Spacing +// ------------------------- + +@include generate-breakpoint-prefixes { + $sizes: ("0": 0, "05": $space-05, "1": $space-1, "2": $space-2, "3": $space-3, "4": $space-4, "5": $space-5, "6": $space-6); + $properties: ("m": "margin", "p": "padding"); + + @each $propPrefix, $property in $properties { + @each $name, $size in $sizes { + &#{$propPrefix}#{$name} { #{$property}: $size !important; } // m0 + &#{$propPrefix}t#{$name}, &#{$propPrefix}y#{$name} { #{$property}-top: $size !important; } // mt0, my0 + &#{$propPrefix}r#{$name}, &#{$propPrefix}x#{$name} { #{$property}-right: $size !important; } // mr0, mx0 + &#{$propPrefix}b#{$name}, &#{$propPrefix}y#{$name} { #{$property}-bottom: $size !important; } // mb0, my0 + &#{$propPrefix}l#{$name}, &#{$propPrefix}x#{$name} { #{$property}-left: $size !important; } // ml0, mx0 + } + } + + &mx-auto { margin-left: auto !important; margin-right: auto !important; } +} \ No newline at end of file diff --git a/package.json b/package.json index 3e46d3ba..ce9293e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bf-solid", - "version": "2.11.2", + "version": "2.12.0", "description": "Solid CSS Styling", "scripts": { "prepublish": "grunt dist" diff --git a/release-notes/2019-10-28-2.12.0.html b/release-notes/2019-10-28-2.12.0.html new file mode 100644 index 00000000..0d17859b --- /dev/null +++ b/release-notes/2019-10-28-2.12.0.html @@ -0,0 +1,14 @@ +--- +category: release-notes +version: 2.12.0 +title: Consolidate spacing properties + +breaking-changes: + +potential-breaking-changes: +- removal of _padding.scss and _margin.scss files + +release-notes: +- created _spacing.scss and consolidated padding and margin utility classes +- combined x and y spacing classes with left, right and top, bottom for smaller final file size +---