flake-scss 0.1.12 → 0.1.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4bae1c46e37e957be66d2237ddd8b9bea43cd356
-  data.tar.gz: 6ab7f8411de6096c687b7e5f4f2e6af846e1f939
+  metadata.gz: 698409e44375b8c645bf9bda5f1410d6f605ee24
+  data.tar.gz: 1d8d75b39738f89b50838953d14f26c92b88545b
 SHA512:
-  metadata.gz: 9c70e060f89541d4eff0f6e3ff36f74ce79f3b2ca4646ca4f911451b1c42b93d924acaa17712bb23697255da610dccb8a496e2442e148e16c1193d47403b592a
-  data.tar.gz: 4312a50502d9f85d21f1b803d043b9403b4a7cd354eb1e93a316432d84da2e2dba9ebf7e435e808f4d3e42ef29c399a6e926936a34ebf9d263a2ef4ad6595d54
+  metadata.gz: be6bfa13217d20f12b480b793e774afbb6244ad5dc7583ff1d971f0b401eb6f72bb950a423d2471c186b82918c4681fc11128b78892401ae2723f7c568498651
+  data.tar.gz: 24bce6d440b2f340b7001bc5265556d1b3f88a5ca1859925df283f4f993997616e5698d6a7b68e89a5246fd20aa75c698725e4226056f86e3c1c8e215e05fd10

data/lib/flake/scss/version.rb

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

data/vendor/assets/stylesheets/_variables.scss

@@ -1,5 +1,7 @@
 $apply-classes: () !global;
 
+$css-variables: false !default;
+
 $components: (
   transition,
   background-colors,

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

@@ -12,7 +12,7 @@ $bg-responsive: true !default;
 
       .#{map-get($classnames, background)}-#{"" + $color}
       #{$hover} {
-        background-color: #{$value} #{$important};
+        background-color: #{choose-variable-type($color)} #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, background)}-#{"" + $color}, "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} #{$important};
+              background-color: #{choose-variable-type($color)} #{$important};
             }
           }
         }

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

@@ -3,13 +3,11 @@ $background-positions: (
 ) !default;
 
 @if index($components, background-positions) {
-  :root {
-    @each $value in $background-positions {
-      .#{map-get($classnames, background)}-#{$value} {
-        background-position: $value #{$important};
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-position", "#{$value}");
+  @each $value in $background-positions {
+    .#{map-get($classnames, background)}-#{$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

@@ -4,13 +4,11 @@ $background-sizes: (
 ) !default;
 
 @if index($components, background-sizes) {
-  :root {
-    @each $value in $background-sizes {
-      .#{map-get($classnames, background)}-#{$value} {
-        background-size: $value #{$important};
-      }
-
-      $addme: add-to-apply-map(#{map-get($classnames, background)}-#{$value}, "background-size", "#{$value}");
+  @each $value in $background-sizes {
+    .#{map-get($classnames, background)}-#{$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

@@ -12,7 +12,7 @@ $border-color-responsive: false !default;
 
       .#{map-get($classnames, border)}-#{"" + $color}
       #{$hover} {
-        border-color: #{$value} #{$important};
+        border-color: #{choose-variable-type($color)} #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, border)}-#{"" + $color}, "border-color", "#{$value}");
@@ -47,7 +47,7 @@ $border-color-responsive: false !default;
         @if $theme-colors != () {
           @each $color, $value in $theme-colors {
             .#{$breakpoint}\:#{map-get($classnames, border)}-#{"" + $color} {
-              border-color: #{$value} #{$important};
+              border-color: #{choose-variable-type($color)} #{$important};
             }
           }
         }

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

@@ -32,3 +32,11 @@
 @function spacing($space) {
   @return map-get($spacing, $space);
 }
+
+@function choose-variable-type($variable, $map: $theme-colors, $addition: "") {
+  @if $css-variables {
+    @return "var(--#{$addition}#{$variable})";
+  } @else {
+    @return map-get($map, $variable);
+  }
+}

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

@@ -5,7 +5,7 @@
   }
 
   .#{$bp}#{map-get($classnames, width)}-#{$division}\/#{$divide} {
-    width: (100% / $divide) * $division;
+    width: (100% / $divide) * $division #{$important};
   }
 
   @if $breakpoint == 0 {
@@ -17,12 +17,22 @@ $grid-size: 12 !default;
 $grid-full: true !default;
 $grid-single: false !default;
 
+@if $css-variables {
+  :root {
+    --grid-size: #{$grid-size};
+  }
+}
+
 @if index($components, grid) {
   // No Breakpoints
   @if $grid-single {
     @for $i from 1 through $grid-size {
       .#{map-get($classnames, width)}-#{$i} {
-        width: (100% / $grid-size) * $i #{$important};
+        @if $css-variables {
+          width: calc((100% / var(--grid-size)) * #{$i}) #{$important};
+        } @else {
+          width: (100% / $grid-size) * $i #{$important};
+        }
       }
 
       $addme: add-to-apply-map("#{map-get($classnames, width)}-#{$i}", "width", "#{(100% / $grid-size) * $i}");

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 #{$important};
+          #{$type-value}#{$sep}#{$loc-value}: #{choose-variable-type($space, $spacing, "space-")} #{$important};
         }
 
         @if $bp == "" {
@@ -67,7 +67,7 @@ $types: (
           $sep: "-";
         }
 
-        #{$type-value}#{$sep}#{$location-value}: $value #{$important};
+        #{$type-value}#{$sep}#{$location-value}: #{choose-variable-type($space, $spacing, "space-")} #{$important};
 
         @if $bp == "" {
           $addme: add-to-apply-map(#{$bp}#{$type}#{$l}#{$s}, "#{$type-value}#{$sep}#{$location-value}", "#{$value}");
@@ -126,3 +126,11 @@ $types: (
     }
   }
 }
+
+@if $css-variables {
+  :root {
+    @each $space, $value in $spacing {
+      --space-#{$space}: #{$value};
+    }
+  }
+}

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

@@ -11,7 +11,7 @@ $text-colors-hover: true !default;
 
       .#{map-get($classnames, text)}-#{"" + $color}
       #{$hover} {
-        color: #{$value} #{$important};
+        color: #{choose-variable-type($color)} #{$important};
       }
 
       $addme: add-to-apply-map(#{map-get($classnames, text)}-#{"" + $color}, "color", "#{$value}");

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

@@ -58,10 +58,18 @@ $font-families: (
   monospace: $monospace
 );
 
+@if $css-variables {
+  :root {
+    @each $font-family, $value in $font-families {
+      --font-#{$font-family}: #{$value};
+    }
+  }
+}
+
 @if index($components, fonts) {
   @each $font-family, $value in $font-families {
     .#{map-get($classnames, font)}-#{$font-family} {
-      font-family: $value #{$important};
+      font-family: #{choose-variable-type($font-family, $font-families, "font-")} #{$important};
     }
 
     $addme: add-to-apply-map(#{map-get($classnames, font)}-#{$font-family}, "font-family", "#{$value}");

metadata

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