Merge branch 'release/1.2.5'

CHANGELOG.md

@@ -1,3 +1,11 @@
+# v1.2.5
+## 12/07/2018
+
+1. [](#improved)
+    * Updated [Spectre.css](https://picturepan2.github.io/spectre/) to latest `0.5.7` version
+1. [](#bugfix)
+    * Fixed missing `</html>` close tag in bae template [#76](https://github.com/getgrav/grav-theme-quark/pull/)
+
 # v1.2.4
 ## 11/12/2018
 

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Quark
-version: 1.2.4
+version: 1.2.5
 description: New Grav Default Theme
 icon:  microchip
 author:

scss/spectre-exp.scss

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

scss/spectre/_accordions.scss

@@ -18,15 +18,15 @@
     padding: $unit-1 $unit-2;
 
     .icon {
-      transition: all .2s ease;
+      transition: transform .25s;
     }
   }
 
   .accordion-body {
     margin-bottom: $layout-spacing;
     max-height: 0;
     overflow: hidden;
-    transition: max-height .2s ease;
+    transition: max-height .25s;
   }
 }
 

scss/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;
     }
 

scss/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;

scss/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;
+      }
     }
   }
 

scss/spectre/_chips.scss

@@ -27,6 +27,7 @@
   }
 
   .btn-clear {
+    border-radius: 50%;
     transform: scale(.75);
   }
 }

scss/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
@@ -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;
     }
   }
@@ -486,7 +490,7 @@ textarea.form-input {
       border-color: $error-color;
       &:focus {
         @include control-shadow($error-color);
-        background: lighten($error-color, 10%);
+        background: lighten($error-color, 53%);
       }
 
       & + .form-input-hint {

scss/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;
+  }
+}

scss/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;
 

scss/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";

scss/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;

scss/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;
   }

scss/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;
   }

scss/spectre/_sliders.scss

@@ -26,23 +26,23 @@
     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 {
     background: $primary-color;
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
   &::-ms-thumb {
     background: $primary-color;
     border: 0;
     border-radius: 50%;
     height: $unit-3;
-    transition: transform .2s ease;
+    transition: transform .2s;
     width: $unit-3;
   }
 

scss/spectre/_tables.scss

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

scss/spectre/_toasts.scss

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

scss/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;
   }

scss/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

scss/spectre/_variables.scss

@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.5";
+$version: "0.5.7";
 
 // Core features
 $rtl: false !default;