spectre_scss 0.3.2.0 → 0.4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5a5cc9555880679eac1e7c98036661315d1fc50c
-  data.tar.gz: fe34e8aaa7a20ea4477b41b2db6c598b20f246fd
+  metadata.gz: f2a78e15389ee42072c759ea1d8282a5b50f7827
+  data.tar.gz: 1f0a6e0518cbd41d4c24b8245e2288cc57e78292
 SHA512:
-  metadata.gz: 8f396555c77dfa21b2e8ba6c7206c990c37a19c9403bc8709d0e7cb8c0c986adfd15ecb2bf8c601659fe8f23f8da9e0329254966e5eb6aff096a7e62f494ff19
-  data.tar.gz: d7ea94c364a1c970e9f9f11fd956dd03266d1e0e718850757613d7bb5908d8ac9c74c74e5f5ec68ad99d76b29d836df62aed8d76a6077b01550bb510cdc7d372
+  metadata.gz: 395d9259c9d37a0a812822376ec1c85c30748c13d1635b0b6a677121ca0267bf7a85da7049cdbc81854b1faf791f427e93dda4299d06493c06b120574891eaae
+  data.tar.gz: 41b5b168dbb02479b83787b5f7cd450b78d764b0f7a21a4c409f8bddce76112ae6b1cc206e02c9bf9c6c3332fa0e56dd6b6e94b8da206b5cf49ab3ae4f7a0388

data/README.md

@@ -1,6 +1,8 @@
 # Spectre.scss
 
-[Spectre](https://picturepan2.github.io/spectre/) is a lightweight, responsive and modern CSS framework. This gem packages a Sass version of Spectre's assets for drop-in use in Rails applications.
+[![Gem Version](https://badge.fury.io/rb/spectre_scss.svg)](https://badge.fury.io/rb/spectre_scss)
+
+[Spectre](https://picturepan2.github.io/spectre/) is a lightweight, responsive and modern CSS framework. This gem packages the Sass version of Spectre's assets for drop-in use in Rails applications.
 
 ## Installation
 
@@ -30,17 +32,17 @@ Or, import components as needed:
 
 ```scss
 // Core variables and mixins
-@import 'spectre/src/variables';
-@import 'spectre/src/mixins';
-@import 'spectre/src/utilities';
+@import 'spectre/variables';
+@import 'spectre/mixins';
+@import 'spectre/utilities';
 
 // Reset and dependencies
-@import 'spectre/src/normalize';
-@import 'spectre/src/base';
+@import 'spectre/normalize';
+@import 'spectre/base';
 
-@import 'spectre/src/buttons';
-@import 'spectre/src/navbar';
-@import 'spectre/src/tables';
+@import 'spectre/buttons';
+@import 'spectre/navbar';
+@import 'spectre/tables';
 ```
 
 ## License

data/Rakefile

@@ -10,12 +10,11 @@ namespace :spectre_scss do
   namespace :assets do
     desc 'Update Spectre\'s assets.'
     task update: :clean do
-      # version = ARGV[1] || "v#{SpectreScss::VERSION.sub(/.\d+$/, '')}"
-      commit = ARGV[1] || 'HEAD'
+      version = ARGV[1] || "v#{SpectreScss::VERSION.sub(/.\d+$/, '')}"
 
-      sh 'git clone git@github.com:trilbymedia/spectre-scss.git spectre_source'
-      sh "cd spectre_source && git checkout #{commit}"
-      sh 'cp -R spectre_source/scss/ vendor/assets/stylesheets/spectre/'
+      sh 'git clone git@github.com:picturepan2/spectre.git spectre_source'
+      sh "cd spectre_source && git checkout tags/#{version}"
+      sh 'cp -R spectre_source/src/ vendor/assets/stylesheets/spectre/'
 
       File.open('vendor/assets/stylesheets/spectre.scss', 'w') do |f|
         f.write('@import "spectre/spectre.scss";')

data/lib/spectre_scss/version.rb

@@ -1,3 +1,3 @@
 module SpectreScss
-  VERSION = '0.3.2.0'
+  VERSION = '0.4.0.0'
 end

data/spectre_scss.gemspec

@@ -8,8 +8,7 @@ Gem::Specification.new do |spec|
   spec.version       = SpectreScss::VERSION
   spec.authors       = ['Zoran']
 
-  spec.summary       = 'Sass port of the Spectre CSS framework'
-  spec.description   = 'Spectre is a lightweight, responsive and modern CSS framework'
+  spec.summary       = 'Spectre is a lightweight, responsive and modern CSS framework.'
   spec.homepage      = 'https://github.com/zokioki/spectre_scss'
   spec.license       = 'MIT'
 

data/vendor/assets/stylesheets/spectre/{src/_accordions.scss → _accordions.scss}

@@ -10,7 +10,7 @@
           }
         }
         & ~ .accordion-body {
-          max-height: 1000px;
+          max-height: 50rem;
         }
       }
     }

data/vendor/assets/stylesheets/spectre/{src/_autocomplete.scss → _autocomplete.scss}

@@ -11,8 +11,8 @@
     padding: $unit-h;
 
     &.is-focused {
-      border-color: $primary-color;
       @include control-shadow();
+      border-color: $primary-color;
     }
 
     .form-input {
@@ -27,11 +27,6 @@
     }
   }
 
-  mark {
-    font-size: 1;
-    padding: .1em 0;
-  }
-
   .menu {
     left: 0;
     position: absolute;

data/vendor/assets/stylesheets/spectre/{src/_buttons.scss → _buttons.scss}

@@ -1,11 +1,11 @@
 // Buttons
 .btn {
+  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   border: $border-width solid $primary-color;
   border-radius: $border-radius;
   color: $primary-color;
-  @include control-transition();
   cursor: pointer;
   display: inline-block;
   font-size: $font-size;

data/vendor/assets/stylesheets/spectre/{src/_calendars.scss → _calendars.scss}

@@ -45,12 +45,12 @@
     padding: $unit-1;
 
     .date-item {
+      @include control-transition();
       appearance: none;
       background: transparent;
       border: $border-width solid transparent;
       border-radius: 50%;
       color: $gray-color-dark;
-      @include control-transition();
       cursor: pointer;
       height: $unit-7;
       line-height: $unit-5;
@@ -199,7 +199,6 @@
       padding: 3px 4px;
       text-align: left;
       text-overflow: ellipsis;
-      vertical-align: baseline;
       white-space: nowrap;
     }
   }

data/vendor/assets/stylesheets/spectre/{src/_cards.scss → _cards.scss}

@@ -36,4 +36,4 @@
       }
     }
   }
-}
+}

data/vendor/assets/stylesheets/spectre/{src/_chips.scss → _chips.scss}

@@ -8,7 +8,7 @@
   height: $unit-6;
   margin: $unit-h;
   max-width: 100%;
-  padding: $unit-h $unit-2 + $unit-h;
+  padding: $unit-h ($unit-2 + $unit-h);
   text-decoration: none;
   vertical-align: middle;
 

data/vendor/assets/stylesheets/spectre/{src/_codes.scss → _codes.scss}

@@ -1,8 +1,8 @@
 // Codes
 code {
-  font-size: .65rem;
   @include label-base();
   @include label-variant($code-color, lighten($code-color, 33%));
+  font-size: .65rem;
 }
 
 .code {

data/vendor/assets/stylesheets/spectre/{src/_forms.scss → _forms.scss}

@@ -31,13 +31,13 @@ legend {
 
 // Form element: Input
 .form-input {
+  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   background-image: none;
   border: $border-width solid $border-color-dark;
   border-radius: $border-radius;
   color: $body-font-color;
-  @include control-transition();
   display: block;
   font-size: $font-size;
   height: $control-size;
@@ -48,8 +48,8 @@ legend {
   position: relative;
   width: 100%;
   &:focus {
-    border-color: $primary-color;
     @include control-shadow();
+    border-color: $primary-color;
   }
   &::placeholder {
     color: $gray-color;
@@ -74,17 +74,17 @@ legend {
     width: auto;
   }
 
-  // Textarea
-  @at-root textarea.form-input {
-    height: auto;
-  }
-
   // Input types
   &[type="file"] {
     height: auto;
   }
 }
 
+// Form element: Textarea
+textarea.form-input {
+  height: auto;
+}
+
 // Form element: Input hint
 .form-input-hint {
   color: $gray-color;
@@ -129,8 +129,8 @@ legend {
     padding-right: $control-icon-size + $control-padding-h;
   }
   &:focus {
-    border-color: $primary-color;
     @include control-shadow();
+    border-color: $primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -202,8 +202,8 @@ legend {
     position: absolute;
     width: 1px;
     &:focus + .form-icon {
-      border-color: $primary-color;
       @include control-shadow();
+      border-color: $primary-color;
     }
     &:checked + .form-icon {
       background: $primary-color;
@@ -212,8 +212,8 @@ legend {
   }
 
   .form-icon {
-    border: $border-width solid $border-color-dark;
     @include control-transition();
+    border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
@@ -312,6 +312,7 @@ legend {
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
+      @include control-transition();
       background: $bg-color-light;
       border-radius: $unit-2;
       content: "";
@@ -320,7 +321,6 @@ legend {
       left: 0;
       position: absolute;
       top: 0;
-      @include control-transition();
       width: $unit-4;
     }
   }
@@ -436,8 +436,8 @@ legend {
       }
 
       &:focus + .form-icon {
-        border-color: $error-color;
         @include control-shadow($error-color);
+        border-color: $error-color;
       }
     }
   }

data/vendor/assets/stylesheets/spectre/{src/_labels.scss → _labels.scss}

@@ -1,9 +1,8 @@
 // Labels
 .label {
-  display: inline-block;
   @include label-base();
   @include label-variant(lighten($body-font-color, 5%), $bg-color);
-  line-height: 1;
+  display: inline-block;
 
   &.label-rounded {
     border-radius: 5rem;

data/vendor/assets/stylesheets/spectre/{src/_layout.scss → _layout.scss}

@@ -7,24 +7,26 @@
   width: 100%;
   @extend .clearfix;
 
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
+
   &.grid-xl {
-    max-width: $size-xl + 2 * strip-unit($layout-spacing) * $html-font-size;
+    max-width: $grid-spacing * 2 + $size-xl;
   }
 
   &.grid-lg {
-    max-width: $size-lg + 2 * strip-unit($layout-spacing) * $html-font-size;
+    max-width: $grid-spacing * 2 + $size-lg;
   }
 
   &.grid-md {
-    max-width: $size-md + 2 * strip-unit($layout-spacing) * $html-font-size;
+    max-width: $grid-spacing * 2 + $size-md;
   }
 
   &.grid-sm {
-    max-width: $size-sm + 2 * strip-unit($layout-spacing) * $html-font-size;
+    max-width: $grid-spacing * 2 + $size-sm;
   }
 
   &.grid-xs {
-    max-width: $size-xs + 2 * strip-unit($layout-spacing) * $html-font-size;
+    max-width: $grid-spacing * 2 + $size-xs;
   }
 }
 
@@ -130,7 +132,7 @@
 .col-mr-auto {
   margin-right: auto;
 }
-@media screen and (max-width: $size-xl ) {
+@media (max-width: $size-xl) {
   .col-xl-12,
   .col-xl-11,
   .col-xl-10,
@@ -188,7 +190,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: $size-lg ) {
+@media (max-width: $size-lg) {
   .col-lg-12,
   .col-lg-11,
   .col-lg-10,
@@ -246,7 +248,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: $size-md ) {
+@media (max-width: $size-md) {
   .col-md-12,
   .col-md-11,
   .col-md-10,
@@ -304,7 +306,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: $size-sm ) {
+@media (max-width: $size-sm) {
   .col-sm-12,
   .col-sm-11,
   .col-sm-10,
@@ -362,7 +364,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: $size-xs) {
+@media (max-width: $size-xs) {
   .col-xs-12,
   .col-xs-11,
   .col-xs-10,

data/vendor/assets/stylesheets/spectre/{src/_media.scss → _media.scss}

@@ -22,7 +22,6 @@
   padding: 0;
   position: relative;
   width: 100%;
-
   &::before {
     content: "";
     display: block;
@@ -41,6 +40,7 @@
     top: 0;
     width: 100%;
   }
+
   video {
     height: auto;
     max-width: 100%;

data/vendor/assets/stylesheets/spectre/{src/_menus.scss → _menus.scss}

@@ -1,12 +1,12 @@
 // Menus
 .menu {
+  @include shadow-variant(.05rem);
   background: $bg-color-light;
   border-radius: $border-radius;
   list-style: none;
   margin: 0;
   min-width: $control-min-width;
   padding: $unit-2;
-  @include shadow-variant(.05rem);
   transform: translateY($layout-spacing-sm);
   z-index: $zindex-1;
 

data/vendor/assets/stylesheets/spectre/{src/_mixins.scss → _mixins.scss}

@@ -1,14 +1,4 @@
 // Mixins
-
-// Strip Units
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / ($number * 0 + 1);
-  }
-
-  @return $number;
-}
-
 // Avatar mixin
 @mixin avatar-base($size: $unit-8) {
   font-size: $size / 2;
@@ -17,8 +7,10 @@
 }
 
 // Background color utility mixin
-@mixin bg-color-variant($color: $primary-color) {
-  background: $color;
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color;
+  }
 }
 
 // Button variant mixin
@@ -99,7 +91,7 @@
 @mixin label-base() {
   border-radius: $border-radius;
   line-height: 1;
-  padding: .15rem .2rem;
+  padding: .15rem;
 }
 
 @mixin label-variant($color: $light-color, $bg-color: $primary-color) {
@@ -108,7 +100,7 @@
 }
 
 // Margin utility mixin
-@mixin margin-variant($id: 1, $size: 1) {
+@mixin margin-variant($id: 1, $size: $unit-1) {
   .m-#{$id} {
     margin: $size;
   }
@@ -135,7 +127,7 @@
 }
 
 // Padding utility mixin
-@mixin padding-variant($id: 1, $size: 1) {
+@mixin padding-variant($id: 1, $size: $unit-1) {
   .p-#{$id} {
     padding: $size;
   }
@@ -167,10 +159,12 @@
 }
 
 // Text color utility mixin
-@mixin text-color-variant($color: $primary-color) {
-  color: $color;
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color;
+  }
 
-  a#{&} {
+  a#{$name} {
     &:focus,
     &:hover {
       color: darken($color, 5%);
@@ -178,6 +172,13 @@
   }
 }
 
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Toast variant mixin
 @mixin toast-variant($color: $dark-color) {
   background: rgba($color, .9);

data/vendor/assets/stylesheets/spectre/{src/_modals.scss → _modals.scss}

@@ -44,11 +44,11 @@
 }
 
 .modal-container {
+  @include shadow-variant(.2rem);
   background: $bg-color-light;
   border-radius: $border-radius;
   display: block;
   padding: 0;
-  @include shadow-variant(.2rem);
   text-align: left;
 
   .modal-header {

data/vendor/assets/stylesheets/spectre/{src/_parallax.scss → _parallax.scss}

@@ -1,16 +1,16 @@
 // Parallax
 $parallax-deg: 3deg;
-$parallax-offset: 6.5px;
-$parallax-offset-z: 100px;
+$parallax-offset: 4.5px;
+$parallax-offset-z: 50px;
 $parallax-perspective: 1000px;
-$parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
+$parallax-scale: .95;
 
 // Mixin: Parallax direction
 @mixin parallax-dir() {
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: $zindex-3;
+  z-index: $zindex-1;
 }
 
 .parallax {
@@ -20,8 +20,8 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
   width: auto;
 
   .parallax-content {
-    height: auto;
     @include shadow-variant(1rem);
+    height: auto;
     transform: perspective($parallax-perspective);
     transform-style: preserve-3d;
     transition: all .4s ease;
@@ -47,7 +47,7 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
     left: 0;
     position: absolute;
     text-align: center;
-    text-shadow: 0 0 20px rgba($dark-color, .5);
+    text-shadow: 0 0 20px rgba($dark-color, .75);
     top: 0;
     transform: translateZ($parallax-offset-z) scale($parallax-scale);
     transition: all .4s ease;
@@ -61,14 +61,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -79,14 +79,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
 
       &::before {
-        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
       }
 
       .parallax-front {
-        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -97,14 +97,14 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
-        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -115,17 +115,15 @@ $parallax-scale: 1 - unit-less($parallax-offset-z / $parallax-perspective);
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
 
       &::before {
-        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
       }
 
       .parallax-front {
-        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
 }
-
-

data/vendor/assets/stylesheets/spectre/{src/_popovers.scss → _popovers.scss}

@@ -64,7 +64,7 @@
   }
 
   .card {
-    border: 0;
     @include shadow-variant(.2rem);
+    border: 0;
   }
 }