Merge pull request #7 from IBM/marginBugFix

fix(scss): avoid skipping margin if it repeats size in breakpoints

Author: seejamescode

bin/src/scss/_core.scss

@@ -85,7 +85,7 @@ body {
       }
     }
 
-    @if (map-has-key($cleanedBreakpoints, $name)) {
+    @if (map-has-key($allBreakpoints, $name)) {
       @include gridMargin($breakpoint, $last);
       @include gridPadding($breakpoint);
       @include gridLegacyWrapper($includeFlexFallback) {

bin/src/scss/_functions.scss

@@ -62,36 +62,6 @@
   @return maps-sort($allBreakpoints, breakpoint);
 }
 
-@function cleanBreakpoint($name, $breakpoint) {
-  $cleanBreakpoint: $breakpoint;
-  $previousKey: index(map-keys($breakpoints), $name) - 1;
-
-  @if $previousKey != 0 {
-    $prevMap: nth(nth($breakpoints, $previousKey), 2);
-
-    @each $key, $value in $breakpoint {
-      @if $value == map-get($prevMap, $key) {
-        $cleanBreakpoint: map-remove($cleanBreakpoint, $key);
-      }
-    }
-  }
-
-  @return ($name: map-merge($cleanBreakpoint, (columns: map-get($breakpoint, columns))));
-}
-
-@function cleanBreakpoints($breakpoints) {
-  $cleanBreakpoints: $breakpoints;
-
-  @each $name, $breakpoint in $breakpoints {
-    $cleanBreakpoints: map-merge(
-      $cleanBreakpoints,
-      cleanBreakpoint($name, $breakpoint)
-    );
-  }
-
-  @return $cleanBreakpoints;
-}
-
 @function columnStringWidth($string, $multiple) {
   @return 1rem;
 }

bin/src/scss/_variables.scss

@@ -6,15 +6,9 @@ $prefix: gridish !default;
 }
 $extraBreakpoints: () !default;
 $breakpoints: addPadding(map-get($grid-values, "breakpoints"));
-$cleanedBreakpoints: cleanBreakpoints($breakpoints);
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
-$allBreakpoints: allBreakpoints(
-  $cleanedBreakpoints,
-  $extraBreakpoints,
-  $first,
-  $last
-);
+$allBreakpoints: allBreakpoints($breakpoints, $extraBreakpoints, $first, $last);

examples/bootstrap/css-gridish/bootstrap-grid.sketch

@@ -323,6 +323,22 @@ body {
     display: none; }
   [class*="bootstrap-grid__col--"] {
     min-width: 0; }
+  .bootstrap-padding {
+    padding: calc(30px / 2); }
+  .bootstrap-padding--bottom {
+    padding-bottom: calc(30px / 2); }
+  .bootstrap-padding--left {
+    padding-left: calc(30px / 2); }
+  .bootstrap-padding--right {
+    padding-right: calc(30px / 2); }
+  .bootstrap-padding--top {
+    padding-top: calc(30px / 2); }
+  .bootstrap-padding--horizontal {
+    padding-left: calc(30px / 2);
+    padding-right: calc(30px / 2); }
+  .bootstrap-padding--vertical {
+    padding-bottom: calc(30px / 2);
+    padding-top: calc(30px / 2); }
   @supports (display: grid) {
     .bootstrap-grid {
       grid-template-columns: repeat(auto-fill, calc( 100rem / 12)); }

examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css

@@ -96,6 +96,22 @@ body {
   --bootstrap-height-29: 29rem; }
 
 @media (min-width: 100rem) {
+  .bootstrap-padding {
+    padding: calc(30px / 2); }
+  .bootstrap-padding--bottom {
+    padding-bottom: calc(30px / 2); }
+  .bootstrap-padding--left {
+    padding-left: calc(30px / 2); }
+  .bootstrap-padding--right {
+    padding-right: calc(30px / 2); }
+  .bootstrap-padding--top {
+    padding-top: calc(30px / 2); }
+  .bootstrap-padding--horizontal {
+    padding-left: calc(30px / 2);
+    padding-right: calc(30px / 2); }
+  .bootstrap-padding--vertical {
+    padding-bottom: calc(30px / 2);
+    padding-top: calc(30px / 2); }
   .bootstrap-grid {
     grid-template-columns: repeat(auto-fill, calc( 100rem / 12)); }
     .bootstrap-grid.bootstrap-grid--fixed-columns {