spectre_scss 0.5.4.0 → 0.5.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2cd9ab46565dc71ca114340dffb962dc11f0afc77d68237bf351e0a645535c2
-  data.tar.gz: 20e791aec52f3a48e1b086a3fcbf073215fe398b4961f6743035c5cff1fb37cb
+  metadata.gz: ba27d5263e127dcc86b766b30d022b7d0c0e193982d8f845ec5b09b197b629a6
+  data.tar.gz: 568bc3512e63d8d0805d05197c4982b075103d1f229ba8d79e9c35ee979d1e66
 SHA512:
-  metadata.gz: 457bc40945c2a83666949528bf9e3418c810c5203791c5ae78bd77d4d3058a3b8a2832d6c1f6a2904b57ebdfe4eb88e2cf178f63e4ade9fc92ff9acb61dfcc5d
-  data.tar.gz: '005757181c47896cd21f05c0d7eaf90348a2224399fc00cb0a0e1b28cb50c05bc333d454a378d3c05290de4ae7e999f6c978880d40714881be96ddc1f4eabe32'
+  metadata.gz: c8d9d2a471543158abd130fd4261b1d1a90aaf2e7d950acf039fad057d964ece8dd4d3f5826974ce2411f08f7fadb935f0c1bfd8d1fb0efb3a93fb871050ff4a
+  data.tar.gz: '001969d606228eba9e18b7abb8881045009bbe4f736d135ecaf7bfa64880c245c7ac94d951a2ac686b7ee744b495a05e09c06b6fceb9f5e7df3693080b2da14b'

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Zoran Pesic
+Copyright (c) 2020 Zoran Pesic
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/bin/console

@@ -1,5 +1,7 @@
 #!/usr/bin/env ruby
 
+# frozen_string_literal: true
+
 require 'bundler/setup'
 require 'spectre_scss'
 

data/lib/spectre_scss.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require 'spectre_scss/version'
 require 'spectre_scss/engine' if (defined?(Rails) && defined?(Rails::Engine))
 

data/lib/spectre_scss/engine.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module SpectreScss
   class Engine < Rails::Engine
   end

data/lib/spectre_scss/version.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module SpectreScss
-  VERSION = '0.5.4.0'
+  VERSION = '0.5.9.0'
 end

data/spectre_scss.gemspec

@@ -1,4 +1,6 @@
 # coding: utf-8
+# frozen_string_literal: true
+
 lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require 'spectre_scss/version'
@@ -19,7 +21,7 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ['lib']
 
-  spec.add_development_dependency 'bundler', '~> 1.15'
+  spec.add_development_dependency 'bundler', '~> 2.1.0'
   spec.add_development_dependency 'rake', '~> 10.0'
   spec.add_development_dependency 'rspec', '~> 3.0'
 end

data/vendor/assets/stylesheets/spectre/_accordions.scss

@@ -2,8 +2,8 @@
 .accordion {
   input:checked ~,
   &[open] {
-    & .accordion-header {
-      .icon {
+    & .accordion-header > {
+      .icon:first-child {
         transform: rotate(90deg);
       }
     }
@@ -18,7 +18,7 @@
     padding: $unit-1 $unit-2;
 
     .icon {
-      transition: all .2s ease;
+      transition: transform .25s;
     }
   }
 
@@ -26,7 +26,7 @@
     margin-bottom: $layout-spacing;
     max-height: 0;
     overflow: hidden;
-    transition: max-height .2s ease;
+    transition: max-height .25s;
   }
 }
 

data/vendor/assets/stylesheets/spectre/_asian.scss

@@ -1,24 +1,29 @@
 // Optimized for East Asian CJK
-:lang(zh),
-:lang(zh-Hans) {
+html:lang(zh),
+html:lang(zh-Hans),
+.lang-zh,
+.lang-zh-hans {
   font-family: $cjk-zh-hans-font-family;
 }
 
-:lang(zh-Hant) {
+html:lang(zh-Hant),
+.lang-zh-hant {
   font-family: $cjk-zh-hant-font-family;
 }
 
-:lang(ja) {
+html:lang(ja),
+.lang-ja {
   font-family: $cjk-jp-font-family;
 }
 
-:lang(ko) {
+html:lang(ko),
+.lang-ko {
   font-family: $cjk-ko-font-family;
 }
 
 :lang(zh),
 :lang(ja),
-.cjk {
+.lang-cjk {
   ins,
   u {
     border-bottom: $border-width solid;

data/vendor/assets/stylesheets/spectre/_buttons.scss

@@ -1,6 +1,5 @@
 // Buttons
 .btn {
-  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   border: $border-width solid $primary-color;
@@ -15,6 +14,7 @@
   padding: $control-padding-y $control-padding-x;
   text-align: center;
   text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
@@ -134,16 +134,18 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: $unit-4;
+    height: $unit-5;
     line-height: $unit-4;
     margin-left: $unit-1;
     margin-right: -2px;
     opacity: 1;
-    padding: 0;
+    padding: $unit-h;
     text-decoration: none;
-    width: $unit-4;
+    width: $unit-5;
 
+    &:focus,
     &:hover {
+      background: rgba($bg-color, .5);
       opacity: .95;
     }
 

data/vendor/assets/stylesheets/spectre/_calendars.scss

@@ -45,7 +45,6 @@
     padding: $unit-1;
 
     .date-item {
-      @include control-transition();
       appearance: none;
       background: transparent;
       border: $border-width solid transparent;
@@ -60,6 +59,7 @@
       position: relative;
       text-align: center;
       text-decoration: none;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s;
       vertical-align: middle;
       white-space: nowrap;
       width: $unit-7;

data/vendor/assets/stylesheets/spectre/_carousels.scss

@@ -1,4 +1,17 @@
 // Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
 .carousel {
   background: $bg-color;
   display: block;
@@ -44,7 +57,7 @@
       opacity: 0;
       position: absolute;
       top: 50%;
-      transition: all .4s ease;
+      transition: all .4s;
       transform: translateY(-50%);
       z-index: $zindex-1;
     }
@@ -57,19 +70,16 @@
   }
 
   .carousel-locator {
-    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
-    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
-    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
-    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-      animation: carousel-slidein .75s ease-in-out 1;
-      opacity: 1;
-      z-index: $zindex-1;
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
     }
-    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
-    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
-    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
-    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: $gray-color-light;
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
     }
   }
 

data/vendor/assets/stylesheets/spectre/_chips.scss

@@ -9,7 +9,7 @@
   line-height: $unit-4;
   margin: $unit-h;
   max-width: $control-width-sm;
-  overflow-x: hidden;
+  overflow: hidden;
   padding: $unit-1 $unit-2;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -27,6 +27,7 @@
   }
 
   .btn-clear {
+    border-radius: 50%;
     transform: scale(.75);
   }
 }

data/vendor/assets/stylesheets/spectre/_comparison-sliders.scss

@@ -58,6 +58,7 @@
       color: $light-color;
       content: "";
       height: 3px;
+      pointer-events: none;
       position: absolute;
       right: $unit-2;
       top: 50%;

data/vendor/assets/stylesheets/spectre/_forms.scss

@@ -34,7 +34,6 @@ legend {
 
 // Form element: Input
 .form-input {
-  @include control-transition();
   appearance: none;
   background: $bg-color-light;
   background-image: none;
@@ -49,6 +48,7 @@ legend {
   outline: none;
   padding: $control-padding-y $control-padding-x;
   position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;
   &:focus {
     @include control-shadow();
@@ -85,7 +85,11 @@ legend {
 
 // Form element: Textarea
 textarea.form-input {
-  height: auto;
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
 }
 
 // Form element: Input hint
@@ -199,7 +203,7 @@ textarea.form-input {
   display: block;
   line-height: $line-height;
   margin: ($control-size - $control-size-sm) / 2 0;
-  min-height: 1.2rem;
+  min-height: $control-size-sm;
   padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 
@@ -221,11 +225,11 @@ textarea.form-input {
   }
 
   .form-icon {
-    @include control-transition();
     border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
   }
 
   // Input checkbox, radio and switch sizes
@@ -331,7 +335,6 @@ textarea.form-input {
     top: ($control-size-sm - $unit-4) / 2 - $border-width;
     width: $unit-8;
     &::before {
-      @include control-transition();
       background: $bg-color-light;
       border-radius: 50%;
       content: "";
@@ -340,6 +343,7 @@ textarea.form-input {
       left: 0;
       position: absolute;
       top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
       width: $unit-4;
     }
   }
@@ -427,6 +431,7 @@ textarea.form-input {
 .form-select {
   .has-success &,
   &.is-success {
+    background: lighten($success-color, 53%);
     border-color: $success-color;
     &:focus {
       @include control-shadow($success-color);
@@ -435,6 +440,7 @@ textarea.form-input {
 
   .has-error &,
   &.is-error {
+    background: lighten($error-color, 53%);
     border-color: $error-color;
     &:focus {
       @include control-shadow($error-color);
@@ -484,6 +490,7 @@ textarea.form-input {
       border-color: $error-color;
       &:focus {
         @include control-shadow($error-color);
+        background: lighten($error-color, 53%);
       }
 
       & + .form-input-hint {

data/vendor/assets/stylesheets/spectre/_hero.scss

@@ -0,0 +1,22 @@
+// Hero
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+
+  &.hero-sm {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+
+  &.hero-lg {
+    padding-bottom: 8rem;
+    padding-top: 8rem;
+  }
+
+  .hero-body {
+    padding: $layout-spacing;
+  }
+}

data/vendor/assets/stylesheets/spectre/_layout.scss

@@ -5,7 +5,6 @@
   padding-left: $layout-spacing;
   padding-right: $layout-spacing;
   width: 100%;
-  @extend .clearfix;
 
   $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
 
@@ -40,6 +39,7 @@
 }
 
 // Responsive grid system
+.cols,
 .columns {
   display: flex;
   flex-wrap: wrap;
@@ -60,6 +60,7 @@
     overflow-x: auto;
   }
 }
+[class~="col-"],
 .column {
   flex: 1;
   max-width: 100%;
@@ -77,7 +78,8 @@
   &.col-4,
   &.col-3,
   &.col-2,
-  &.col-1 {
+  &.col-1,
+  &.col-auto {
     flex: none;
   }
 }
@@ -144,7 +146,8 @@
   .col-xl-4,
   .col-xl-3,
   .col-xl-2,
-  .col-xl-1 {
+  .col-xl-1,
+  .col-xl-auto {
     flex: none;
   }
   .col-xl-12 {
@@ -183,6 +186,9 @@
   .col-xl-1 {
     width: 8.33333333%;
   }
+  .col-xl-auto {
+    width: auto;
+  }
   .hide-xl {
     display: none !important;
   }
@@ -202,7 +208,8 @@
   .col-lg-4,
   .col-lg-3,
   .col-lg-2,
-  .col-lg-1 {
+  .col-lg-1,
+  .col-lg-auto {
     flex: none;
   }
   .col-lg-12 {
@@ -241,6 +248,9 @@
   .col-lg-1 {
     width: 8.33333333%;
   }
+  .col-lg-auto {
+    width: auto;
+  }
   .hide-lg {
     display: none !important;
   }
@@ -260,7 +270,8 @@
   .col-md-4,
   .col-md-3,
   .col-md-2,
-  .col-md-1 {
+  .col-md-1,
+  .col-md-auto {
     flex: none;
   }
   .col-md-12 {
@@ -299,6 +310,9 @@
   .col-md-1 {
     width: 8.33333333%;
   }
+  .col-md-auto {
+    width: auto;
+  }
   .hide-md {
     display: none !important;
   }
@@ -318,7 +332,8 @@
   .col-sm-4,
   .col-sm-3,
   .col-sm-2,
-  .col-sm-1 {
+  .col-sm-1,
+  .col-sm-auto {
     flex: none;
   }
   .col-sm-12 {
@@ -357,6 +372,9 @@
   .col-sm-1 {
     width: 8.33333333%;
   }
+  .col-sm-auto {
+    width: auto;
+  }
   .hide-sm {
     display: none !important;
   }
@@ -376,7 +394,8 @@
   .col-xs-4,
   .col-xs-3,
   .col-xs-2,
-  .col-xs-1 {
+  .col-xs-1,
+  .col-xs-auto {
     flex: none;
   }
   .col-xs-12 {
@@ -415,6 +434,9 @@
   .col-xs-1 {
     width: 8.33333333%;
   }
+  .col-xs-auto {
+    width: auto;
+  }
   .hide-xs {
     display: none !important;
   }

data/vendor/assets/stylesheets/spectre/_menus.scss

@@ -18,8 +18,8 @@
   .menu-item {
     margin-top: 0;
     padding: 0 $unit-2;
+    position: relative;
     text-decoration: none;
-    user-select: none;
 
     & > a {
       border-radius: $border-radius;
@@ -52,11 +52,15 @@
   }
 
   .menu-badge {
-    float: right;
-    padding: $unit-1 0;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
 
-    .btn {
-      margin-top: -$unit-h;
+    .label {
+      margin-right: $unit-2;
     }
   }
-}
+}

data/vendor/assets/stylesheets/spectre/_mixins.scss

@@ -7,5 +7,4 @@
 @import "mixins/position";
 @import "mixins/shadow";
 @import "mixins/text";
-@import "mixins/toast";
-@import "mixins/transition";
+@import "mixins/toast";

data/vendor/assets/stylesheets/spectre/_navbar.scss

@@ -23,7 +23,6 @@
 
   .navbar-brand {
     font-size: $font-size-lg;
-    font-weight: 500;
     text-decoration: none;
   }
 }

data/vendor/assets/stylesheets/spectre/_off-canvas.scss

@@ -28,7 +28,7 @@ $off-canvas-breakpoint: $size-lg !default;
     overflow-y: auto;
     position: fixed;
     top: 0;
-    transition: transform .25s ease;
+    transition: transform .25s;
     z-index: $zindex-2;
     @if $rtl == true {
       right: 0;

data/vendor/assets/stylesheets/spectre/_parallax.scss

@@ -52,7 +52,7 @@ $parallax-fade-color: rgba(255, 255, 255, .35) !default;
     text-shadow: 0 0 20px rgba($dark-color, .75);
     top: 0;
     transform: translateZ($parallax-offset-z) scale($parallax-scale);
-    transition: all .4s ease;
+    transition: transform .4s;
     width: 100%;
     z-index: $zindex-0;
   }

data/vendor/assets/stylesheets/spectre/_popovers.scss

@@ -10,7 +10,7 @@
     position: absolute;
     top: 0;
     transform: translate(-50%, -50%) scale(0);
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $control-width-sm;
     z-index: $zindex-3;
   }

data/vendor/assets/stylesheets/spectre/_sliders.scss

@@ -26,7 +26,7 @@
     border-radius: 50%;
     height: $unit-3;
     margin-top: -($unit-3 - $unit-h) / 2;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
   &::-moz-range-thumb {
@@ -34,7 +34,7 @@
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
   &::-ms-thumb {
@@ -42,7 +42,7 @@
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
 

data/vendor/assets/stylesheets/spectre/_steps.scss

@@ -24,7 +24,7 @@
     }
 
     a {
-      color: $gray-color;
+      color: $primary-color;
       display: inline-block;
       padding: 20px 10px 0;
       text-decoration: none;
@@ -59,9 +59,10 @@
         }
 
         a {
+          color: $gray-color;
 
           &::before {
-            background: $gray-color-light;
+            background: $border-color;
           }
         }
       }

data/vendor/assets/stylesheets/spectre/_tables.scss

@@ -38,7 +38,7 @@
     }
   }
 
-  // Tables with horizontal scrollbar
+  // Scollable tables
   &.table-scroll {
     display: block;
     overflow-x: auto;

data/vendor/assets/stylesheets/spectre/_toasts.scss

@@ -37,6 +37,12 @@
   }
 
   .btn-clear {
-    margin: 4px -2px 4px 4px;
+    margin: $unit-h;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }

data/vendor/assets/stylesheets/spectre/_tooltips.scss

@@ -18,7 +18,7 @@
     position: absolute;
     text-overflow: ellipsis;
     transform: translate(-50%, $unit-2);
-    transition: all .2s ease;
+    transition: opacity .2s, transform .2s;
     white-space: pre;
     z-index: $zindex-3;
   }

data/vendor/assets/stylesheets/spectre/_typography.scss

@@ -71,8 +71,9 @@ kbd {
 
 mark {
   @include label-variant($body-font-color, $highlight-color);
+  border-bottom: $unit-o solid darken($highlight-color, 15%);
   border-radius: $border-radius;
-  padding: .05rem;
+  padding: $unit-o $unit-h 0;
 }
 
 // Blockquote

data/vendor/assets/stylesheets/spectre/_variables.scss

@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.4";
+$version: "0.5.9";
 
 // Core features
 $rtl: false !default;
@@ -21,6 +21,7 @@ $gray-color-light: lighten($gray-color, 20%) !default;
 
 $border-color: lighten($dark-color, 65%) !default;
 $border-color-dark: darken($border-color, 10%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
 $bg-color: lighten($dark-color, 75%) !default;
 $bg-color-dark: darken($bg-color, 3%) !default;
 $bg-color-light: $light-color !default;

data/vendor/assets/stylesheets/spectre/_viewer-360.scss

@@ -0,0 +1,34 @@
+// 360 Degree Viewer
+
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
+  @for $s from 1 through ($image-number) {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
+      background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+    }
+  }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
+
+  .viewer-slider {
+    cursor: ew-resize;
+    margin: 1rem;
+    order: 2;
+    width: 60%;
+  }
+
+  .viewer-image {
+    background-position-y: 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    max-width: 100%;
+    order: 1;
+  }
+}

data/vendor/assets/stylesheets/spectre/icons/_icons-action.scss

@@ -1,4 +1,3 @@
-
 // Icon resize
 .icon-resize-horiz,
 .icon-resize-vert {
@@ -7,7 +6,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .45em;
     width: .45em;
   }
@@ -35,7 +33,6 @@
     background: currentColor;
     box-shadow: -.4em 0, .4em 0;
     border-radius: 50%;
-    content: "";
     height: 3px;
     width: 3px;
   }
@@ -53,7 +50,6 @@
 .icon-cross {
   &::before {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     width: 100%;
   }
@@ -63,7 +59,6 @@
 .icon-cross {
   &::after {
     background: currentColor;
-    content: "";
     height: 100%;
     width: $icon-border-width;
   }
@@ -88,7 +83,6 @@
     border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
-    content: "";
     height: .5em;
     width: .9em;
     transform: translate(-50%, -75%) rotate(-45deg);
@@ -101,7 +95,6 @@
   border-radius: 50%;
   &::before {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 1em;
@@ -128,7 +121,6 @@
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
     border-right-color: transparent;
-    content: "";
     height: 1em;
     width: 1em;
   }
@@ -136,7 +128,6 @@
     border: .2em solid currentColor;
     border-top-color: transparent;
     border-left-color: transparent;
-    content: "";
     height: 0;
     left: 80%;
     top: 20%;
@@ -149,7 +140,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .75em;
     left: 5%;
     top: 5%;
@@ -158,7 +148,6 @@
   }
   &::after {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     left: 80%;
     top: 80%;
@@ -171,7 +160,6 @@
 .icon-edit {
   &::before {
     border: $icon-border-width solid currentColor;
-    content: "";
     height: .4em;
     transform: translate(-40%, -60%) rotate(-45deg);
     width: .85em;
@@ -180,7 +168,6 @@
     border: .15em solid currentColor;
     border-top-color: transparent;
     border-right-color: transparent;
-    content: "";
     height: 0;
     left: 5%;
     top: 95%;
@@ -196,7 +183,6 @@
     border-bottom-left-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
     border-top: 0;
-    content: "";
     height: .75em;
     top: 60%;
     width: .75em;
@@ -204,7 +190,6 @@
   &::after {
     background: currentColor;
     box-shadow: -.25em .2em, .25em .2em;
-    content: "";
     height: $icon-border-width;
     top: $icon-border-width/2;
     width: .5em;
@@ -221,7 +206,6 @@
     border: $icon-border-width solid currentColor;
     border-left: 0;
     border-top: 0;
-    content: "";
     height: .4em;
     left: 100%;
     top: .25em;
@@ -233,7 +217,6 @@
     border-bottom: 0;
     border-right: 0;
     border-radius: 75% 0;
-    content: "";
     height: .5em;
     width: .6em;
   }
@@ -243,7 +226,6 @@
 .icon-flag {
   &::before {
     background: currentColor;
-    content: "";
     height: 1em;
     left: 15%;
     width: $icon-border-width;
@@ -253,7 +235,6 @@
     border-bottom-right-radius: $border-radius;
     border-left: 0;
     border-top-right-radius: $border-radius;
-    content: "";
     height: .65em;
     top: 35%;
     left: 60%;
@@ -268,7 +249,6 @@
     border-bottom: 0;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
-    content: "";
     height: .9em;
     width: .8em;
   }
@@ -277,7 +257,6 @@
     border-bottom: 0;
     border-left: 0;
     border-radius: $border-radius;
-    content: "";
     height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
     width: .5em;
@@ -292,14 +271,12 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .5em;
     width: .5em;
     transform: translate(-50%, -60%) rotate(-135deg);
   }
   &::after {
     background: currentColor;
-    content: "";
     height: .6em;
     top: 40%;
     width: $icon-border-width;
@@ -314,3 +291,25 @@
     top: 50%;
   }
 }
+
+// Icon copy
+.icon-copy {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    border-right: 0;
+    border-bottom: 0;
+    height: .8em;
+    left: 40%;
+    top: 35%;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    left: 60%;
+    top: 60%;
+    width: .8em;
+  }
+}

data/vendor/assets/stylesheets/spectre/icons/_icons-core.scss

@@ -15,6 +15,7 @@ $icon-prefix: "icon";
   width: 1em;
   &::before,
   &::after {
+    content: "";
     display: block;
     left: 50%;
     position: absolute;

data/vendor/assets/stylesheets/spectre/icons/_icons-navigation.scss

@@ -11,7 +11,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    content: "";
     height: .65em;
     width: .65em;
   }
@@ -45,7 +44,6 @@
 .icon-forward {
   &::after {
     background: currentColor;
-    content: "";
     height: $icon-border-width;
     width: .8em;
   }
@@ -55,7 +53,6 @@
 .icon-upward {
   &::after {
     background: currentColor;
-    content: "";
     height: .8em;
     width: $icon-border-width;
   }
@@ -103,7 +100,6 @@
     border-top: .3em solid currentColor;
     border-right: .3em solid transparent;
     border-left: .3em solid transparent;
-    content: "";
     height: 0;
     transform: translate(-50%, -25%);
     width: 0;
@@ -115,7 +111,6 @@
   &::before {
     background: currentColor;
     box-shadow: 0 -.35em, 0 .35em;
-    content: "";
     height: $icon-border-width;
     width: 100%;
   }
@@ -126,7 +121,6 @@
   &::before {
     background: currentColor;
     box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
-    content: "";
     height: 3px;
     width: 3px;
   }

data/vendor/assets/stylesheets/spectre/icons/_icons-object.scss

@@ -4,14 +4,12 @@
   border-radius: 50%;
   &::before {
     background: currentColor;
-    content: "";
     height: .4em;
     transform: translate(-50%, -75%);
     width: $icon-border-width;
   }
   &::after {
     background: currentColor;
-    content: "";
     height: .3em;
     transform: translate(-50%, -75%) rotate(90deg);
     transform-origin: 50% 90%;
@@ -24,7 +22,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: $border-radius;
-    content: "";
     height: .8em;
     width: 1em;
   }
@@ -32,7 +29,6 @@
     border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
-    content: "";
     height: .5em;
     transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
     width: .5em;
@@ -44,7 +40,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .45em;
     top: 25%;
     width: .45em;
@@ -52,7 +47,6 @@
   &::after {
     border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 0 0;
-    content: "";
     height: .4em;
     top: 75%;
     width: .9em;
@@ -70,7 +64,6 @@
     border-bottom-right-radius: $border-radius;
     border-left: 0;
     border-top: 0;
-    content: "";
     height: .8em;
     left: 65%;
     top: 40%;
@@ -79,7 +72,6 @@
   &::after {
     background: currentColor;
     border-radius: $border-radius;
-    content: "";
     height: .3em;
     left: 10%;
     top: 100%;
@@ -95,7 +87,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .25em;
     left: 35%;
     top: 35%;
@@ -105,7 +96,6 @@
     border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
-    content: "";
     height: .5em;
     left: 60%;
     transform: translate(-50%, 25%) rotate(-45deg);
@@ -120,7 +110,6 @@
     border: $icon-border-width solid currentColor;
     border-radius: 5em 0 0 5em;
     border-right: 0;
-    content: "";
     height: .5em;
     width: .75em;
   }
@@ -137,7 +126,6 @@
   &::before {
     border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 50% 0;
-    content: "";
     height: .8em;
     transform: translate(-50%, -60%) rotate(-45deg);
     width: .8em;
@@ -145,7 +133,6 @@
   &::after {
     border: $icon-border-width solid currentColor;
     border-radius: 50%;
-    content: "";
     height: .2em;
     transform: translate(-50%, -80%);
     width: .2em;
@@ -158,17 +145,15 @@
   border-radius: 50%;
   &::before {
     border-radius: 50%;
-    box-shadow: -.17em -.15em, .17em -.15em;
-    content: "";
-    height: .1em;
-    width: .1em;
+    box-shadow: -.17em -.1em, .17em -.1em;
+    height: .15em;
+    width: .15em;
   }
   &::after {
     border: $icon-border-width solid currentColor;
     border-bottom-color: transparent;
     border-radius: 50%;
     border-right-color: transparent;
-    content: "";
     height: .5em;
     transform: translate(-50%, -40%) rotate(-135deg);
     width: .5em;

data/vendor/assets/stylesheets/spectre/mixins/_label.scss

@@ -1,7 +1,7 @@
 // Label base style
 @mixin label-base() {
   border-radius: $border-radius;
-  line-height: 1.2;
+  line-height: 1.25;
   padding: .1rem .2rem;
 }
 

data/vendor/assets/stylesheets/spectre/spectre-exp.scss

@@ -15,3 +15,4 @@
 @import "progress";
 @import "sliders";
 @import "timelines";
+@import "viewer-360";

data/vendor/assets/stylesheets/spectre/spectre.scss

@@ -19,6 +19,7 @@
 
 // Layout
 @import "layout";
+@import "hero";
 @import "navbar";
 
 // Components

data/vendor/assets/stylesheets/spectre/utilities/_colors.scss

@@ -3,7 +3,7 @@
 
 @include text-color-variant(".text-secondary", $secondary-color-dark);
 
-@include text-color-variant(".text-gray", $gray-color-dark);
+@include text-color-variant(".text-gray", $gray-color);
 
 @include text-color-variant(".text-light", $light-color);
 

data/vendor/assets/stylesheets/spectre/utilities/_cursors.scss

@@ -21,4 +21,4 @@
 
 .c-auto {
   cursor: auto;
-}
+}

data/vendor/assets/stylesheets/spectre/utilities/_divider.scss

@@ -16,7 +16,7 @@
 }
 
 .divider {
-  border-top: $border-width solid $border-color;
+  border-top: $border-width solid $border-color-light;
   height: $border-width;
   margin: $unit-2 0;
 

data/vendor/assets/stylesheets/spectre/utilities/_loading.scss

@@ -6,6 +6,7 @@
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
+    background: transparent;
     border: $border-width-lg solid $primary-color;
     border-radius: 50%;
     border-right-color: transparent;
@@ -16,6 +17,8 @@
     left: 50%;
     margin-left: -$unit-2;
     margin-top: -$unit-2;
+    opacity: 1;
+    padding: 0;
     position: absolute;
     top: 50%;
     width: $unit-4;

data/vendor/assets/stylesheets/spectre/utilities/_text.scss

@@ -46,6 +46,18 @@
   font-size: 1.2em;
 }
 
+.text-small {
+  font-size: .9em;
+}
+
+.text-tiny {
+  font-size: .8em;
+}
+
+.text-muted {
+  opacity: .8;
+}
+
 // Text overflow utilities
 .text-ellipsis {
   @include text-ellipsis();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spectre_scss
 version: !ruby/object:Gem::Version
-  version: 0.5.4.0
+  version: 0.5.9.0
 platform: ruby
 authors:
 - Zoran
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-11-04 00:00:00.000000000 Z
+date: 2020-07-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.15'
+        version: 2.1.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.15'
+        version: 2.1.0
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -92,6 +92,7 @@ files:
 - vendor/assets/stylesheets/spectre/_empty.scss
 - vendor/assets/stylesheets/spectre/_filters.scss
 - vendor/assets/stylesheets/spectre/_forms.scss
+- vendor/assets/stylesheets/spectre/_hero.scss
 - vendor/assets/stylesheets/spectre/_icons.scss
 - vendor/assets/stylesheets/spectre/_labels.scss
 - vendor/assets/stylesheets/spectre/_layout.scss
@@ -120,6 +121,7 @@ files:
 - vendor/assets/stylesheets/spectre/_typography.scss
 - vendor/assets/stylesheets/spectre/_utilities.scss
 - vendor/assets/stylesheets/spectre/_variables.scss
+- vendor/assets/stylesheets/spectre/_viewer-360.scss
 - vendor/assets/stylesheets/spectre/icons/_icons-action.scss
 - vendor/assets/stylesheets/spectre/icons/_icons-core.scss
 - vendor/assets/stylesheets/spectre/icons/_icons-navigation.scss
@@ -133,7 +135,6 @@ files:
 - vendor/assets/stylesheets/spectre/mixins/_shadow.scss
 - vendor/assets/stylesheets/spectre/mixins/_text.scss
 - vendor/assets/stylesheets/spectre/mixins/_toast.scss
-- vendor/assets/stylesheets/spectre/mixins/_transition.scss
 - vendor/assets/stylesheets/spectre/spectre-exp.scss
 - vendor/assets/stylesheets/spectre/spectre-icons.scss
 - vendor/assets/stylesheets/spectre/spectre.scss
@@ -164,8 +165,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.6
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Spectre is a lightweight, responsive and modern CSS framework.

data/vendor/assets/stylesheets/spectre/mixins/_transition.scss

@@ -1,4 +0,0 @@
-// Component transition
-@mixin control-transition() {
-  transition: all .2s ease;
-}