flake-scss 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a7ea091e2abe62febbead567390875257fe11b9f
-  data.tar.gz: d98788bd2b13fe1d84a6008cde922dfacba508f2
+  metadata.gz: 630b9907efb82ae55df133a0a9ac2cfebbf654d1
+  data.tar.gz: b8e66da1084703870a73f0ebc14ca7ee6e4f7693
 SHA512:
-  metadata.gz: 332f5b84710b6369b2a58dd403fc79e40a464c0b6207ad072d731cc184019e5a3dfdcea3ff25e4f1501480deb8239db389d6e3a14f40300e4fce5219e429017f
-  data.tar.gz: fcfc75d9b8a4894226ff95cd45870fa4edee388d27e26a90b8841120a1903ab91de949f793b00ff0bd2e2227af0bce79d762d9dd23e5e879dab56dcd9fa038b4
+  metadata.gz: 60fd80d03472f6ec19094445a66d6c7a328d5b68ae2edeca5314146ba07810af6a41227d20d11a8817281f2d3090fe5b8ea60c25b57f38bdbb947921719bf145
+  data.tar.gz: 0c978441389095ddb5044cd3458617f92fc2500ad0f6c97ce1ff4ecdeab65d933dd7ac96e7fb505addaa60178d3eacae4361069c9dc46a951bb42bd53c6fa8ec

data/lib/flake/scss/version.rb

@@ -1,5 +1,5 @@
 module Flake
   module Scss
-    VERSION = "0.1.9"
+    VERSION = "0.1.10"
   end
 end

data/vendor/assets/stylesheets/_variables.scss

@@ -21,3 +21,20 @@ $components: (
   font-weights,
   text-decoration
 ) !default;
+
+$classnames: (
+  position: "",
+  display: "",
+  width: "w",
+  padding: "p",
+  margin: "m",
+  border: "b",
+  border-radius: "radius",
+  flex: "",
+  background: "bg",
+  text: "text",
+  font: "font",
+  transition: "transition",
+  shadow: "shadow",
+  z-index: "z"
+) !default;

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

@@ -12,11 +12,11 @@ $transitions: (
     $sep: "-"
   }
 
-  .transition#{$sep}#{$transition} {
+  .#{map-get($classnames, transition)}#{$sep}#{$transition} {
     transition: #{$value};
   }
 
-  $addme: add-to-apply-map(transition-#{$transition}, "transition", "#{$value}");
+  $addme: add-to-apply-map(#{map-get($classnames, transition)}#{$sep}#{$transition}, "transition", "#{$value}");
 }
 
 @if $transitions-responsive {
@@ -28,7 +28,7 @@ $transitions: (
           $sep: "-";
         }
 
-        .#{$breakpoint}\:transition#{$sep}#{$transition} {
+        .#{$breakpoint}\:#{map-get($classnames, transition)}#{$sep}#{$transition} {
           transition: #{$value};
         }
       }

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

@@ -10,12 +10,12 @@ $bg-responsive: true !default;
         $hover: ", .hover\\:bg-#{"" + $color}:hover";
       }
 
-      .bg-#{"" + $color}
+      .#{map-get($classnames, background)}-#{"" + $color}
       #{$hover} {
         background-color: #{$value};
       }
 
-      $addme: add-to-apply-map(bg-#{"" + $color}, "background-color", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, background)}-#{"" + $color}, "background-color", "#{$value}");
     }
   }
 
@@ -27,15 +27,15 @@ $bg-responsive: true !default;
         $hover: "";
 
         @if $bg-hover {
-          $hover: ", .hover\\:bg-#{"" + $color}-#{"" + $shade}:hover";
+          $hover: ", .hover\\:#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade}:hover";
         }
 
-        .bg-#{"" + $color}-#{"" + $shade}
+        .#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade}
         #{$hover} {
           background-color: $value;
         }
 
-        $addme: add-to-apply-map(bg-#{"" + $color}-#{"" + $shade}, "background-color", "#{$value}");
+        $addme: add-to-apply-map(#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade}, "background-color", "#{$value}");
       }
     }
   }
@@ -45,7 +45,7 @@ $bg-responsive: true !default;
       @include breakpoint($breakpoint) {
         @if $theme-colors != () {
           @each $color, $value in $theme-colors {
-            .#{$breakpoint}\:bg-#{"" + $color} {
+            .#{$breakpoint}\:#{map-get($classnames, background)}-#{"" + $color} {
               background-color: #{$value};
             }
           }
@@ -56,7 +56,7 @@ $bg-responsive: true !default;
             $medium: map-get($colors-list, $color);
 
             @each $shade, $value in $medium {
-              .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
+              .#{$breakpoint}\:#{map-get($classnames, background)}-#{"" + $color}-#{"" + $shade} {
                 background-color: $value;
               }
             }

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

@@ -7,15 +7,15 @@ $border-color-responsive: false !default;
       $hover: "";
 
       @if $border-color-hover {
-        $hover: ", .hover\\:b-#{"" + $color}:hover";
+        $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}:hover";
       }
 
-      .b-#{"" + $color}
+      .#{map-get($classnames, border)}-#{"" + $color}
       #{$hover} {
         border-color: #{$value};
       }
 
-      $addme: add-to-apply-map(b-#{"" + $color}, "border-color", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
     }
   }
 
@@ -27,15 +27,15 @@ $border-color-responsive: false !default;
         $hover: "";
 
         @if $border-color-hover {
-          $hover: ", .hover\\:b-#{"" + $color}-#{"" + $shade}:hover";
+          $hover: ", .hover\\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}:hover";
         }
 
-        .b-#{"" + $color}-#{"" + $shade}
+        .#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}
         #{$hover} {
           border-color: $value;
         }
 
-        $addme: add-to-apply-map(b-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
+        $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade}, "border-color", "#{$value}");
       }
     }
   }
@@ -46,7 +46,7 @@ $border-color-responsive: false !default;
       @include breakpoint($breakpoint) {
         @if $theme-colors != () {
           @each $color, $value in $theme-colors {
-            .#{$breakpoint}\:b-#{"" + $color} {
+            .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
               border-color: #{$value};
             }
           }
@@ -55,7 +55,7 @@ $border-color-responsive: false !default;
         @if $full-colors {
           @each $color in $colors {
             @each $shade, $value in $medium {
-              .#{$breakpoint}\:bg-#{"" + $color}-#{"" + $shade} {
+              .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color}-#{"" + $shade} {
                 border-color: $value;
               }
             }

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

@@ -14,18 +14,18 @@ $radius: (
 
 @if index($components, border-radius) {
   @each $radi, $value in $radius {
-    .radius-#{$radi} {
+    .#{map-get($classnames, border-radius)}-#{$radi} {
       border-radius: $value;
     }
 
-    $addme: add-to-apply-map(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}\:radius-#{$radi} {
+          .#{$breakpoint}\:#{map-get($classnames, border-radius)}-#{$radi} {
             border-radius: $value;
           }
         }

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

@@ -17,6 +17,10 @@ $display: (
     $addme: add-to-apply-map(#{$property}, "display", "#{$property}");
   }
 
+  .hidden {
+    display: none;
+  }
+
   @if $display-responsive {
     @each $breakpoint, $breakpoint-value in $breakpoints {
       @include breakpoint($breakpoint) {
@@ -29,10 +33,6 @@ $display: (
     }
   }
 
-  .hidden {
-    display: none;
-  }
-
   @if $display-responsive {
     @each $breakpoint, $breakpoint-value in $breakpoints {
       @include breakpoint($breakpoint) {

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

@@ -10,10 +10,10 @@ $z-index: (
 
 @if index($components, z-index) {
   @each $value in $z-index {
-    .z-#{$value} {
+    .#{map-get($classnames, z-index)}-#{$value} {
       z-index: $value;
     }
 
-    $addme: add-to-apply-map(z-#{$value}, "z-index", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, z-index)}-#{$value}, "z-index", "#{$value}");
   }
 }

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

@@ -62,7 +62,7 @@ $flex-list: (
 
     @each $name, $value in $medium {
       @if $name == "class" {
-        $classstart: #{$value};
+        $classstart: #{map-get($classnames, flex)}#{$value};
       }
 
       @if $name == "values" {

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

@@ -15,22 +15,22 @@ $shadows: (
     $hover: "";
 
     @if $shadows-hover {
-      $hover: ", .hover\\:shadow-#{$shadow}:hover";
+      $hover: ", .hover\\:#{map-get($classnames, shadow)}-#{$shadow}:hover";
     }
 
-    .shadow-#{$shadow}
+    .#{map-get($classnames, shadow)}-#{$shadow}
     #{$hover} {
       box-shadow: #{$value};
     }
 
-    $addme: add-to-apply-map(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}\:shadow-#{$shadow} {
+          .#{$breakpoint}\:#{map-get($classnames, shadow)}-#{$shadow} {
             box-shadow: #{$value};
           }
         }

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

@@ -4,12 +4,12 @@
     $bp: "#{$breakpoint}\\:";
   }
 
-  .#{$bp}w-#{$division}\/#{$divide} {
+  .#{$bp}#{map-get($classnames, width)}-#{$division}\/#{$divide} {
     width: (100% / $divide) * $division;
   }
 
   @if $breakpoint == 0 {
-    $addme: add-to-apply-map("#{$bp}w-#{$division}/#{$divide}", "width", "#{(100% / $divide) * $division}");
+    $addme: add-to-apply-map("#{$bp}#{map-get($classnames, width)}-#{$division}/#{$divide}", "width", "#{(100% / $divide) * $division}");
   }
 }
 
@@ -21,11 +21,11 @@ $grid-single: false !default;
   // No Breakpoints
   @if $grid-single {
     @for $i from 1 through $grid-size {
-      .w-#{$i} {
+      .#{map-get($classnames, width)}-#{$i} {
         width: (100% / $grid-size) * $i;
       }
 
-      $addme: add-to-apply-map("w-#{$i}", "width", "#{(100% / $grid-size) * $i}");
+      $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");
     }
   } @else {
     @for $i from 1 through $grid-size {
@@ -44,7 +44,7 @@ $grid-single: false !default;
     @each $breakpoint, $breakpoint-value in $breakpoints {
       @include breakpoint($breakpoint) {
         @for $i from 1 through $grid-size {
-          .#{$breakpoint}\:w-#{$i} {
+          .#{$breakpoint}\:#{map-get($classnames, width)}-#{$i} {
             width: (100% / $grid-size) * $i;
           }
         }
@@ -67,7 +67,7 @@ $grid-single: false !default;
   }
 
   @if map-get($breakpoints, mw) {
-    .w-max {
+    .#{map-get($classnames, width)}-max {
       max-width: map-get($breakpoints, mw);
     }
   }

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

@@ -25,8 +25,8 @@ $spacing-locations: (
 ) !default;
 
 $types: (
-  m: margin,
-  p: padding
+  #{map-get($classnames, margin)}: margin,
+  #{map-get($classnames, padding)}: padding
 );
 
 @mixin paddingmargin($space, $value, $breakpoint: 0, $location: "", $location-value: "") {

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

@@ -8,18 +8,18 @@ $align: (
 
 @if index($components, text-align) {
   @each $value in $align {
-    .text-#{$value} {
+    .#{map-get($classnames, text)}-#{$value} {
       text-align: $value;
     }
 
-    $addme: add-to-apply-map(text-#{$value}, "text", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text", "#{$value}");
   }
 
   @if $text-align-responsive {
     @each $breakpoint, $breakpoint-value in $breakpoints {
       @include breakpoint($breakpoint) {
         @each $value in $align {
-          .#{$breakpoint}\:text-#{$value} {
+          .#{$breakpoint}\:#{map-get($classnames, text)}-#{$value} {
             text-align: $value;
           }
         }

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

@@ -6,15 +6,15 @@ $text-colors-hover: true !default;
       $hover: "";
 
       @if $text-colors-hover {
-        $hover: ", .hover\\:text-#{"" + $color}:hover";
+        $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}:hover";
       }
 
-      .text-#{"" + $color}
+      .#{map-get($classnames, text)}-#{"" + $color}
       #{$hover} {
         color: #{$value};
       }
 
-      $addme: add-to-apply-map(text-#{"" + $color}, "color", "#{$value}");
+      $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");
     }
   }
 
@@ -26,15 +26,15 @@ $text-colors-hover: true !default;
         $hover: "";
 
         @if $text-colors-hover {
-          $hover: ", .hover\\:text-#{"" + $color}-#{"" + $shade}:hover";
+          $hover: ", .hover\\:#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}:hover";
         }
 
-        .text-#{"" + $color}-#{"" + $shade}
+        .#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}
         #{$hover} {
           color: $value;
         }
 
-        $addme: add-to-apply-map(text-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
+        $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}-#{"" + $shade}, "color", "#{$value}");
       }
     }
   }

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

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

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

@@ -6,10 +6,10 @@ $font-sizes: (
 
 @if index($components, font-sizes) {
   @each $size, $value in $font-sizes {
-    .text-#{$size} {
+    .#{map-get($classnames, text)}-#{$size} {
       font-size: $value;
     }
 
-    $addme: add-to-apply-map(text-#{$size}, "font-size", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$size}, "font-size", "#{$value}");
   }
 }

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

@@ -7,11 +7,11 @@ $decoration: (
 
 @if index($components, text-decoration) {
   @each $value in $decoration {
-    .text-#{$value} {
+    .#{map-get($classnames, text)}-#{$value} {
       text-decoration: $value;
     }
 
-    $addme: add-to-apply-map(text-#{$value}, "text-decoration", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-decoration", "#{$value}");
   }
 }
 
@@ -23,28 +23,28 @@ $font-style: (
 
 @if index($components, font-style) {
   @each $value in $font-style {
-    .font-#{$value} {
+    .#{map-get($classnames, font)}-#{$value} {
       font-style: $value;
     }
 
-    $addme: add-to-apply-map(font-#{$value}, "font-style", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-style", "#{$value}");
   }
 }
 
 $font-weights: (
-lighter,
-normal,
-bold,
-bolder
+  lighter,
+  normal,
+  bold,
+  bolder
 ) !default;
 
 @if index($components, font-weights) {
   @each $value in $font-weights {
-    .font-#{$value} {
+    .#{map-get($classnames, font)}-#{$value} {
       font-weight: $value;
     }
 
-    $addme: add-to-apply-map(font-#{$value}, "font-weight", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$value}, "font-weight", "#{$value}");
   }
 }
 
@@ -57,10 +57,10 @@ $text-transform: (
 @if index($components, text-transform) {
 
   @each $value in $text-transform {
-    .text-#{$value} {
+    .#{map-get($classnames, text)}-#{$value} {
       text-transform: $value;
     }
 
-    $addme: add-to-apply-map(text-#{$value}, "text-transform", "#{$value}");
+    $addme: add-to-apply-map(#{map-get($classnames, text)}-#{$value}, "text-transform", "#{$value}");
   }
 }

metadata

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