flake-scss 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f88dcfd5b28accc2e7efe4596e3752d135b1e78b
-  data.tar.gz: a58c0eb19396fc13a5fc9e8003196d4114c172c3
+  metadata.gz: 4bae1c46e37e957be66d2237ddd8b9bea43cd356
+  data.tar.gz: 6ab7f8411de6096c687b7e5f4f2e6af846e1f939
 SHA512:
-  metadata.gz: 9b0f84656d7f9dd61c35950231e36f7de0bf0c8c7801deb5a4ea2648345a6f94dfb50ce97f824c61bd68fcc460fc98dec250080b7057670702604ae04895bbb2
-  data.tar.gz: 912f415c652c5c0bf1079029f7bc977242366cadf92b6f11d9c5d0b8edf02930e392c9a5a7802e78aae49b7f78635e534f1f8eac427d29683e089eadcbd4d4c0
+  metadata.gz: 9c70e060f89541d4eff0f6e3ff36f74ce79f3b2ca4646ca4f911451b1c42b93d924acaa17712bb23697255da610dccb8a496e2442e148e16c1193d47403b592a
+  data.tar.gz: 4312a50502d9f85d21f1b803d043b9403b4a7cd354eb1e93a316432d84da2e2dba9ebf7e435e808f4d3e42ef29c399a6e926936a34ebf9d263a2ef4ad6595d54

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.11"
+    VERSION = "0.1.12"
   end
 end

data/vendor/assets/stylesheets/_variables.scss

@@ -51,3 +51,11 @@ $classnames-default: (
     $classnames: map-merge($classnames, ($type: $classname));
   }
 }
+
+$important: true !default;
+
+@if $important == true {
+  $important: "!important" !global;
+} @else {
+  $important: "" !global;
+}

data/vendor/assets/stylesheets/animations/_transitions.scss

@@ -7,32 +7,30 @@ $transitions: (
 ) !default;
 
 @if index($components, transition) {
-  :root {
-    @each $transition, $value in $transitions {
-      $sep: "";
-      @if $transition != "" {
-        $sep: "-"
-      }
-
-      .#{map-get($classnames, transition)}#{$sep}#{$transition} {
-        transition: #{$value};
-      }
+  @each $transition, $value in $transitions {
+    $sep: "";
+    @if $transition != "" {
+      $sep: "-"
+    }
 
-      $addme: add-to-apply-map(#{map-get($classnames, transition)}#{$sep}#{$transition}, "transition", "#{$value}");
+    .#{map-get($classnames, transition)}#{$sep}#{$transition} {
+      transition: #{$value} #{$important};
     }
 
-    @if $transitions-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $transition, $value in $transitions {
-            $sep: "";
-            @if $transition != "" {
-              $sep: "-";
-            }
+    $addme: add-to-apply-map(#{map-get($classnames, transition)}#{$sep}#{$transition}, "transition", "#{$value}");
+  }
+
+  @if $transitions-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $transition, $value in $transitions {
+          $sep: "";
+          @if $transition != "" {
+            $sep: "-";
+          }
 
-            .#{$breakpoint}\:#{map-get($classnames, transition)}#{$sep}#{$transition} {
-              transition: #{$value};
-            }
+          .#{$breakpoint}\:#{map-get($classnames, transition)}#{$sep}#{$transition} {
+            transition: #{$value} #{$important};
           }
         }
       }

data/vendor/assets/stylesheets/background/_colors.scss

@@ -12,7 +12,7 @@ $bg-responsive: true !default;
 
       .#{map-get($classnames, background)}-#{"" + $color}
       #{$hover} {
-        background-color: #{$value};
+        background-color: #{$value} #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, background)}-#{"" + $color}, "background-color", "#{$value}");
@@ -32,7 +32,7 @@ $bg-responsive: true !default;
 
         .#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade}
         #{$hover} {
-          background-color: $value;
+          background-color: #{$value} #{$important};
         }
 
         $addme: add-to-apply-map(#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade}, "background-color", "#{$value}");
@@ -46,7 +46,7 @@ $bg-responsive: true !default;
         @if $theme-colors != () {
           @each $color, $value in $theme-colors {
             .#{$breakpoint}\:#{map-get($classnames, background)}-#{"" + $color} {
-              background-color: #{$value};
+              background-color: #{$value} #{$important};
             }
           }
         }
@@ -57,7 +57,7 @@ $bg-responsive: true !default;
 
             @each $shade, $value in $medium {
               .#{$breakpoint}\:#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade} {
-                background-color: $value;
+                background-color: $value #{$important};
               }
             }
           }

data/vendor/assets/stylesheets/background/_position.scss

@@ -6,7 +6,7 @@ $background-positions: (
   :root {
     @each $value in $background-positions {
       .#{map-get($classnames, background)}-#{$value} {
-        background-position: $value;
+        background-position: $value #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-position", "#{$value}");

data/vendor/assets/stylesheets/background/_sizes.scss

@@ -7,7 +7,7 @@ $background-sizes: (
   :root {
     @each $value in $background-sizes {
       .#{map-get($classnames, background)}-#{$value} {
-        background-size: $value;
+        background-size: $value #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-size", "#{$value}");

data/vendor/assets/stylesheets/border/_colors.scss

@@ -2,63 +2,61 @@ $border-color-hover: true !default;
 $border-color-responsive: false !default;
 
 @if index($components, border-colors) {
-  :root {
-    @if $theme-colors != () {
-      @each $color, $value in $theme-colors {
-        $hover: "";
+  @if $theme-colors != () {
+    @each $color, $value in $theme-colors {
+      $hover: "";
 
-        @if $border-color-hover {
-          $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}:hover";
-        }
-
-        .#{map-get($classnames, border)}-#{"" + $color}
-        #{$hover} {
-          border-color: #{$value};
-        }
+      @if $border-color-hover {
+        $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}:hover";
+      }
 
-        $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
+      .#{map-get($classnames, border)}-#{"" + $color}
+      #{$hover} {
+        border-color: #{$value} #{$important};
       }
-    }
 
-    @if $full-colors {
-      @each $color in $colors {
-        $medium: map-get($colors-list, $color);
+      $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
+    }
+  }
 
-        @each $shade, $value in $medium {
-          $hover: "";
+  @if $full-colors {
+    @each $color in $colors {
+      $medium: map-get($colors-list, $color);
 
-          @if $border-color-hover {
-            $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}:hover";
-          }
+      @each $shade, $value in $medium {
+        $hover: "";
 
-          .#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}
-          #{$hover} {
-            border-color: $value;
-          }
+        @if $border-color-hover {
+          $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}:hover";
+        }
 
-          $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+        .#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}
+        #{$hover} {
+          border-color: $value #{$important};
         }
+
+        $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
       }
     }
+  }
 
 
-    @if $border-color-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @if $theme-colors != () {
-            @each $color, $value in $theme-colors {
-              .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
-                border-color: #{$value};
-              }
+  @if $border-color-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @if $theme-colors != () {
+          @each $color, $value in $theme-colors {
+            .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
+              border-color: #{$value} #{$important};
             }
           }
+        }
 
-          @if $full-colors {
-            @each $color in $colors {
-              @each $shade, $value in $medium {
-                .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade} {
-                  border-color: $value;
-                }
+        @if $full-colors {
+          @each $color in $colors {
+            @each $shade, $value in $medium {
+              .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade} {
+                border-color: $value #{$important};
               }
             }
           }

data/vendor/assets/stylesheets/border/_general.scss

@@ -31,11 +31,11 @@ $border-sizes: (
   }
 
   .#{$bp}b#{$space}-#{$size} {
-    border#{$sep}#{$value}: #{$size}px solid black;
+    border#{$sep}#{$value}: #{$size}px solid black #{$important};
   }
 
   .#{$bp}b#{$space}-0 {
-    border#{$sep}#{$value}: 0;
+    border#{$sep}#{$value}: 0 #{$important};
   }
 
   @if $breakpoint == 0 {
@@ -45,20 +45,18 @@ $border-sizes: (
 }
 
 @if index($components, borders) {
-  :root {
-    @each $border, $value in $borders {
-      @each $size in $border-sizes {
-        @include makeBorder($border, $value, $size);
-      }
+  @each $border, $value in $borders {
+    @each $size in $border-sizes {
+      @include makeBorder($border, $value, $size);
     }
+  }
 
-    @if $border-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $border, $value in $borders {
-            @each $size in $border-sizes {
-              @include makeBorder($border, $value, $size, $breakpoint);
-            }
+  @if $border-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $border, $value in $borders {
+          @each $size in $border-sizes {
+            @include makeBorder($border, $value, $size, $breakpoint);
           }
         }
       }

data/vendor/assets/stylesheets/border/_radius.scss

@@ -13,22 +13,20 @@ $radius: (
 ) !default;
 
 @if index($components, border-radius) {
-  :root {
-    @each $radi, $value in $radius {
-      .#{map-get($classnames, border-radius)}-#{$radi} {
-        border-radius: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, border-radius)}-#{$radi}, "border-radius", "#{$value}");
+  @each $radi, $value in $radius {
+    .#{map-get($classnames, border-radius)}-#{$radi} {
+      border-radius: $value #{$important};
     }
 
-    @if $radius-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $radi, $value in $radius {
-            .#{$breakpoint}\:#{map-get($classnames, border-radius)}-#{$radi} {
-              border-radius: $value;
-            }
+    $addme: add-to-apply-map(#{map-get($classnames, border-radius)}-#{$radi}, "border-radius", "#{$value}");
+  }
+
+  @if $radius-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $radi, $value in $radius {
+          .#{$breakpoint}\:#{map-get($classnames, border-radius)}-#{$radi} {
+            border-radius: $value #{$important};
           }
         }
       }

data/vendor/assets/stylesheets/flake/_functions.scss

@@ -1,7 +1,3 @@
-@function spacing($key: 0) {
-  @return map-get($spacing, $key);
-}
-
 @function add-to-apply-map($classname, $property, $value) {
   $to-add-to-map: "";
 

data/vendor/assets/stylesheets/general/_display.scss

@@ -9,37 +9,35 @@ $display: (
 ) !default;
 
 @if index($components, display) {
-  :root {
-    @each $property in $display {
-      .#{$property} {
-        display: $property;
-      }
-
-      $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
+  @each $property in $display {
+    .#{$property} {
+      display: $property #{$important};
     }
 
-    .hidden {
-      display: none;
-    }
+    $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
+  }
 
-    @if $display-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $property in $display {
-            .#{$breakpoint}\:#{$property} {
-              display: $property;
-            }
+  .hidden {
+    display: none #{$important};
+  }
+
+  @if $display-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $property in $display {
+          .#{$breakpoint}\:#{$property} {
+            display: $property #{$important};
           }
         }
       }
     }
+  }
 
-    @if $display-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          .#{$breakpoint}\:hidden {
-            display: none;
-          }
+  @if $display-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        .#{$breakpoint}\:hidden {
+          display: none #{$important};
         }
       }
     }

data/vendor/assets/stylesheets/general/_overflow.scss

@@ -10,22 +10,20 @@ $overflow: (
 ) !default;
 
 @if index($components, overflow) {
-  :root {
-    @each $property in $overflow {
-      .#{map-get($classnames, overflow)}-#{$property} {
-        overflow: $property;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, overflow)}-#{$property}, "overflow", "#{$property}");
+  @each $property in $overflow {
+    .#{map-get($classnames, overflow)}-#{$property} {
+      overflow: $property #{$important};
     }
 
-    @if $overflow-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $property in $overflow {
-            .#{$breakpoint}\:overflow-#{$property} {
-              overflow: $property;
-            }
+    $addme: add-to-apply-map(#{map-get($classnames, overflow)}-#{$property}, "overflow", "#{$property}");
+  }
+
+  @if $overflow-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $property in $overflow {
+          .#{$breakpoint}\:overflow-#{$property} {
+            overflow: $property #{$important};
           }
         }
       }

data/vendor/assets/stylesheets/general/_position.scss

@@ -9,22 +9,20 @@ $positions: (
 ) !default;
 
 @if index($components, position) {
-  :root {
-    @each $position in $positions {
-      .#{$position} {
-        position: $position;
-      }
-
-      $addme: add-to-apply-map(#{$position}, "position", "#{$position}");
+  @each $position in $positions {
+    .#{$position} {
+      position: $position #{$important};
     }
 
-    @if $positions-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $position in $positions {
-            .#{$breakpoint}\:#{$position} {
-              position: $position;
-            }
+    $addme: add-to-apply-map(#{$position}, "position", "#{$position}");
+  }
+
+  @if $positions-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $position in $positions {
+          .#{$breakpoint}\:#{$position} {
+            position: $position #{$important};
           }
         }
       }
@@ -43,7 +41,7 @@ $positions: (
   @if index($components, position) {
     @each $pin, $value in $pins {
       .pin-#{$pin} {
-        #{$value}: 0;
+        #{$value}: 0 #{$important};
       }
 
       $addme: add-to-apply-map(pin-#{$pin}, "#{$value}", "0");
@@ -54,7 +52,7 @@ $positions: (
         @include breakpoint($breakpoint) {
           @each $pin, $value in $pins {
             .#{$breakpoint}\:pin-#{$pin} {
-              #{$value}: 0;
+              #{$value}: 0 #{$important};
             }
           }
         }

data/vendor/assets/stylesheets/general/_z-index.scss

@@ -9,13 +9,11 @@ $z-index: (
 ) !default;
 
 @if index($components, z-index) {
-  :root {
-    @each $value in $z-index {
-      .#{map-get($classnames, z-index)}-#{$value} {
-        z-index: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, z-index)}-#{$value}, "z-index", "#{$value}");
+  @each $value in $z-index {
+    .#{map-get($classnames, z-index)}-#{$value} {
+      z-index: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, z-index)}-#{$value}, "z-index", "#{$value}");
   }
 }

data/vendor/assets/stylesheets/layout/_flex.scss

@@ -56,45 +56,43 @@ $flex-list: (
 );
 
 @if index($components, flex) {
-  :root {
-    @each $property in $flex {
-      $medium: map-get($flex-list, $property);
-      $classstart: "";
+  @each $property in $flex {
+    $medium: map-get($flex-list, $property);
+    $classstart: "";
 
-      @each $name, $value in $medium {
-        @if $name == "class" {
-          $classstart: #{map-get($classnames, flex)}#{$value};
-        }
-
-        @if $name == "values" {
-          @each $value-name, $value-value in $value {
-            .#{$classstart}-#{$value-name} {
-              #{$property}: #{$value-value};
-            }
+    @each $name, $value in $medium {
+      @if $name == "class" {
+        $classstart: #{map-get($classnames, flex)}#{$value};
+      }
 
-            $addme: add-to-apply-map(#{$classstart}-#{$value-name}, "#{$property}", "#{$value-value}");
+      @if $name == "values" {
+        @each $value-name, $value-value in $value {
+          .#{$classstart}-#{$value-name} {
+            #{$property}: #{$value-value} #{$important};
           }
+
+          $addme: add-to-apply-map(#{$classstart}-#{$value-name}, "#{$property}", "#{$value-value}");
         }
       }
     }
+  }
 
-    @if $flex-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $property in $flex {
-            $medium: map-get($flex-list, $property);
-            $classstart: "";
+  @if $flex-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $property in $flex {
+          $medium: map-get($flex-list, $property);
+          $classstart: "";
 
-            @each $name, $value in $medium {
-              @if $name == "class" {
-                $classstart: #{$value};
-              }
+          @each $name, $value in $medium {
+            @if $name == "class" {
+              $classstart: #{$value};
+            }
 
-              @if $name == "values" {
-                @each $value-name, $value-value in $value {
-                  .#{$breakpoint}\:#{$classstart}-#{$value-name} {
-                    #{$property}: #{$value-value};
-                  }
+            @if $name == "values" {
+              @each $value-name, $value-value in $value {
+                .#{$breakpoint}\:#{$classstart}-#{$value-name} {
+                  #{$property}: #{$value-value} #{$important};
                 }
               }
             }

data/vendor/assets/stylesheets/shadows/_shadows.scss

@@ -11,29 +11,27 @@ $shadows: (
 ) !default;
 
 @if index($components, shadows) {
-  :root {
-    @each $shadow, $value in $shadows {
-      $hover: "";
+  @each $shadow, $value in $shadows {
+    $hover: "";
 
-      @if $shadows-hover {
-        $hover: ", .hover\\:#{map-get($classnames, shadow)}-#{$shadow}:hover";
-      }
-
-      .#{map-get($classnames, shadow)}-#{$shadow}
-      #{$hover} {
-        box-shadow: #{$value};
-      }
+    @if $shadows-hover {
+      $hover: ", .hover\\:#{map-get($classnames, shadow)}-#{$shadow}:hover";
+    }
 
-      $addme: add-to-apply-map(#{map-get($classnames, shadow)}-#{$shadow}, "box-shadow", "#{$value}");
+    .#{map-get($classnames, shadow)}-#{$shadow}
+    #{$hover} {
+      box-shadow: #{$value} #{$important};
     }
 
-    @if $shadows-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $shadow, $value in $shadows {
-            .#{$breakpoint}\:#{map-get($classnames, shadow)}-#{$shadow} {
-              box-shadow: #{$value};
-            }
+    $addme: add-to-apply-map(#{map-get($classnames, shadow)}-#{$shadow}, "box-shadow", "#{$value}");
+  }
+
+  @if $shadows-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $shadow, $value in $shadows {
+          .#{$breakpoint}\:#{map-get($classnames, shadow)}-#{$shadow} {
+            box-shadow: #{$value} #{$important};
           }
         }
       }

data/vendor/assets/stylesheets/sizing/_grid.scss

@@ -18,67 +18,65 @@ $grid-full: true !default;
 $grid-single: false !default;
 
 @if index($components, grid) {
-  :root {
-    // No Breakpoints
-    @if $grid-single {
-      @for $i from 1 through $grid-size {
-        .#{map-get($classnames, width)}-#{$i} {
-          width: (100% / $grid-size) * $i;
-        }
-
-        $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");
+  // No Breakpoints
+  @if $grid-single {
+    @for $i from 1 through $grid-size {
+      .#{map-get($classnames, width)}-#{$i} {
+        width: (100% / $grid-size) * $i #{$important};
       }
-    } @else {
-      @for $i from 1 through $grid-size {
-        @if $grid-full {
-          @for $j from 1 through $i {
-            @include widthify($i, $j);
-          }
-        } @else {
-          @include widthify($i, 1);
+
+      $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");
+    }
+  } @else {
+    @for $i from 1 through $grid-size {
+      @if $grid-full {
+        @for $j from 1 through $i {
+          @include widthify($i, $j);
         }
+      } @else {
+        @include widthify($i, 1);
       }
     }
+  }
 
-    // Breakpoints
-    @if $grid-single {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @for $i from 1 through $grid-size {
-            .#{$breakpoint}\:#{map-get($classnames, width)}-#{$i} {
-              width: (100% / $grid-size) * $i;
-            }
+  // Breakpoints
+  @if $grid-single {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @for $i from 1 through $grid-size {
+          .#{$breakpoint}\:#{map-get($classnames, width)}-#{$i} {
+            width: (100% / $grid-size) * $i #{$important};
           }
         }
       }
-    } @else {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @for $i from 1 through $grid-size {
-            @if $grid-full {
-              @for $j from 1 through $i {
-                @include widthify($i, $j, $breakpoint);
-              }
-            } @else {
-              @include widthify($i, 1, $breakpoint);
+    }
+  } @else {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @for $i from 1 through $grid-size {
+          @if $grid-full {
+            @for $j from 1 through $i {
+              @include widthify($i, $j, $breakpoint);
             }
+          } @else {
+            @include widthify($i, 1, $breakpoint);
           }
         }
       }
     }
+  }
 
-    @if map-get($breakpoints, mw) {
-      .#{map-get($classnames, width)}-max {
-        max-width: map-get($breakpoints, mw);
-      }
+  @if map-get($breakpoints, mw) {
+    .#{map-get($classnames, width)}-max {
+      max-width: map-get($breakpoints, mw) #{$important};
     }
+  }
 
-    .h-1\/1 {
-      height: 100%;
-    }
+  .h-1\/1 {
+    height: 100% #{$important};
+  }
 
-    .h-auto {
-      height: auto;
-    }
+  .h-auto {
+    height: auto #{$important};
   }
 }

data/vendor/assets/stylesheets/sizing/_spacing.scss

@@ -55,7 +55,7 @@ $types: (
 
           $map: (#{$type-value}#{$sep}#{$loc-value}: "");
           $properties: map-merge($properties, $map);
-          #{$type-value}#{$sep}#{$loc-value}: $value;
+          #{$type-value}#{$sep}#{$loc-value}: $value #{$important};
         }
 
         @if $bp == "" {
@@ -67,7 +67,7 @@ $types: (
           $sep: "-";
         }
 
-        #{$type-value}#{$sep}#{$location-value}: $value;
+        #{$type-value}#{$sep}#{$location-value}: $value #{$important};
 
         @if $bp == "" {
           $addme: add-to-apply-map(#{$bp}#{$type}#{$l}#{$s}, "#{$type-value}#{$sep}#{$location-value}", "#{$value}");
@@ -78,49 +78,47 @@ $types: (
 }
 
 @if index($components, spacing) {
-  :root {
-    @each $space, $value in $spacing {
-      @include paddingmargin($space, $value);
+  @each $space, $value in $spacing {
+    @include paddingmargin($space, $value);
 
-      @each $location, $location-value in $spacing-locations {
-        @include paddingmargin($space, $value, 0, $location, $location-value);
-      }
+    @each $location, $location-value in $spacing-locations {
+      @include paddingmargin($space, $value, 0, $location, $location-value);
     }
+  }
 
-    @if $spacing-responsive {
-      @each $space, $value in $spacing {
-        @each $breakpoint, $breakpoint-value in $breakpoints {
-          @include breakpoint($breakpoint) {
-            @include paddingmargin($space, $value, $breakpoint);
+  @if $spacing-responsive {
+    @each $space, $value in $spacing {
+      @each $breakpoint, $breakpoint-value in $breakpoints {
+        @include breakpoint($breakpoint) {
+          @include paddingmargin($space, $value, $breakpoint);
 
-            @each $location, $location-value in $spacing-locations {
-              @include paddingmargin($space, $value, $breakpoint, $location, $location-value);
-            }
+          @each $location, $location-value in $spacing-locations {
+            @include paddingmargin($space, $value, $breakpoint, $location, $location-value);
           }
         }
       }
     }
+  }
 
-    @each $space, $value in $spacing {
-      @if type-of($value) == "number" {
-        .-mx-#{$space} {
-          margin-left: $value * -1;
-          margin-right: $value * -1;
-        }
-
-        $addme: add-to-apply-map(-mx-#{$space}, ("margin-left": "", "margin-right": ""), "#{$value * -1}");
+  @each $space, $value in $spacing {
+    @if type-of($value) == "number" {
+      .-mx-#{$space} {
+        margin-left: $value * -1 #{$important};
+        margin-right: $value * -1 #{$important};
       }
+
+      $addme: add-to-apply-map(-mx-#{$space}, ("margin-left": "", "margin-right": ""), "#{$value * -1}");
     }
+  }
 
-    @if $spacing-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $space, $value in $spacing {
-            @if type-of($value) == "number" {
-              .#{$breakpoint}\:-mx-#{$space} {
-                margin-left: $value * -1;
-                margin-right: $value * -1;
-              }
+  @if $spacing-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $space, $value in $spacing {
+          @if type-of($value) == "number" {
+            .#{$breakpoint}\:-mx-#{$space} {
+              margin-left: $value * -1 #{$important};
+              margin-right: $value * -1 #{$important};
             }
           }
         }

data/vendor/assets/stylesheets/text/_align.scss

@@ -7,22 +7,20 @@ $align: (
 ) !default;
 
 @if index($components, text-align) {
-  :root {
-    @each $value in $align {
-      .#{map-get($classnames, text)}-#{$value} {
-        text-align: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-align", "#{$value}");
+  @each $value in $align {
+    .#{map-get($classnames, text)}-#{$value} {
+      text-align: $value #{$important};
     }
 
-    @if $text-align-responsive {
-      @each $breakpoint, $breakpoint-value in $breakpoints {
-        @include breakpoint($breakpoint) {
-          @each $value in $align {
-            .#{$breakpoint}\:#{map-get($classnames, text)}-#{$value} {
-              text-align: $value;
-            }
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-align", "#{$value}");
+  }
+
+  @if $text-align-responsive {
+    @each $breakpoint, $breakpoint-value in $breakpoints {
+      @include breakpoint($breakpoint) {
+        @each $value in $align {
+          .#{$breakpoint}\:#{map-get($classnames, text)}-#{$value} {
+            text-align: $value #{$important};
           }
         }
       }

data/vendor/assets/stylesheets/text/_colors.scss

@@ -1,42 +1,40 @@
 $text-colors-hover: true !default;
 
 @if index($components, text-colors) {
-  :root {
-    @if $theme-colors != () {
-      @each $color, $value in $theme-colors {
-        $hover: "";
-
-        @if $text-colors-hover {
-          $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}:hover";
-        }
+  @if $theme-colors != () {
+    @each $color, $value in $theme-colors {
+      $hover: "";
 
-        .#{map-get($classnames, text)}-#{"" + $color}
-        #{$hover} {
-          color: #{$value};
-        }
+      @if $text-colors-hover {
+        $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}:hover";
+      }
 
-        $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");
+      .#{map-get($classnames, text)}-#{"" + $color}
+      #{$hover} {
+        color: #{$value} #{$important};
       }
-    }
 
-    @if $full-colors {
-      @each $color in $colors {
-        $medium: map-get($colors-list, $color);
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");
+    }
+  }
 
-        @each $shade, $value in $medium {
-          $hover: "";
+  @if $full-colors {
+    @each $color in $colors {
+      $medium: map-get($colors-list, $color);
 
-          @if $text-colors-hover {
-            $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}:hover";
-          }
+      @each $shade, $value in $medium {
+        $hover: "";
 
-          .#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}
-          #{$hover} {
-            color: $value;
-          }
+        @if $text-colors-hover {
+          $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}:hover";
+        }
 
-          $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
+        .#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}
+        #{$hover} {
+          color: $value #{$important};
         }
+
+        $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
       }
     }
   }

data/vendor/assets/stylesheets/text/_fonts.scss

@@ -59,13 +59,11 @@ $font-families: (
 );
 
 @if index($components, fonts) {
-  :root {
-    @each $font-family, $value in $font-families {
-      .#{map-get($classnames, font)}-#{$font-family} {
-        font-family: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$font-family}, "font-family", "#{$value}");
+  @each $font-family, $value in $font-families {
+    .#{map-get($classnames, font)}-#{$font-family} {
+      font-family: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$font-family}, "font-family", "#{$value}");
   }
 }

data/vendor/assets/stylesheets/text/_sizes.scss

@@ -5,13 +5,11 @@ $font-sizes: (
 ) !default;
 
 @if index($components, font-sizes) {
-  :root {
-    @each $size, $value in $font-sizes {
-      .#{map-get($classnames, text)}-#{$size} {
-        font-size: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$size}, "font-size", "#{$value}");
+  @each $size, $value in $font-sizes {
+    .#{map-get($classnames, text)}-#{$size} {
+      font-size: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$size}, "font-size", "#{$value}");
   }
 }

data/vendor/assets/stylesheets/text/_style.scss

@@ -6,14 +6,12 @@ $decoration: (
 ) !default;
 
 @if index($components, text-decoration) {
-  :root {
-    @each $value in $decoration {
-      .#{map-get($classnames, text)}-#{$value} {
-        text-decoration: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-decoration", "#{$value}");
+  @each $value in $decoration {
+    .#{map-get($classnames, text)}-#{$value} {
+      text-decoration: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-decoration", "#{$value}");
   }
 }
 
@@ -24,14 +22,12 @@ $font-style: (
 ) !default;
 
 @if index($components, font-style) {
-  :root {
-    @each $value in $font-style {
-      .#{map-get($classnames, font)}-#{$value} {
-        font-style: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-style", "#{$value}");
+  @each $value in $font-style {
+    .#{map-get($classnames, font)}-#{$value} {
+      font-style: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-style", "#{$value}");
   }
 }
 
@@ -43,14 +39,12 @@ $font-weights: (
 ) !default;
 
 @if index($components, font-weights) {
-  :root {
-    @each $value in $font-weights {
-      .#{map-get($classnames, font)}-#{$value} {
-        font-weight: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-weight", "#{$value}");
+  @each $value in $font-weights {
+    .#{map-get($classnames, font)}-#{$value} {
+      font-weight: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-weight", "#{$value}");
   }
 }
 
@@ -61,13 +55,11 @@ $text-transform: (
 ) !default;
 
 @if index($components, text-transform) {
-  :root {
-    @each $value in $text-transform {
-      .#{map-get($classnames, text)}-#{$value} {
-        text-transform: $value;
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-transform", "#{$value}");
+  @each $value in $text-transform {
+    .#{map-get($classnames, text)}-#{$value} {
+      text-transform: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-transform", "#{$value}");
   }
 }

data/vendor/assets/stylesheets/text/_titles.scss

@@ -7,13 +7,11 @@ $title-sizes: (
 ) !default;
 
 @if index($components, title-sizes) {
-  :root {
-    @each $size, $value in $title-sizes {
-      #{$size} {
-        font-size: $value;
-      }
-
-      $addme: add-to-apply-map(#{$size}, "font-size", "#{$value}");
+  @each $size, $value in $title-sizes {
+    #{$size} {
+      font-size: $value #{$important};
     }
+
+    $addme: add-to-apply-map(#{$size}, "font-size", "#{$value}");
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flake-scss
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.12
 platform: ruby
 authors:
 - Mitcheljager
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-29 00:00:00.000000000 Z
+date: 2017-12-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler