solidus_backend 2.1.1 → 2.2.0.beta1

data/vendor/assets/stylesheets/solidus_admin/bootstrap/bootstrap-grid.scss

@@ -1,62 +1,43 @@
 // Bootstrap Grid only
 //
-// Includes relevant variables and mixins for the regular (non-flexbox) grid
-// system, as well as the generated predefined classes (e.g., `.col-4-sm`).
-
+// Includes relevant variables and mixins for the flexbox grid
+// system, as well as the generated predefined classes (e.g., `.col-sm-4`).
 
 //
-// Variables
+// Box sizing, responsive, and more
 //
 
+@at-root {
+  @-ms-viewport { width: device-width; }
+}
 
-// Grid breakpoints
-//
-// Define the minimum and maximum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 544px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px
-) !default;
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
+html {
+  box-sizing: border-box;
+  -ms-overflow-style: scrollbar;
+}
 
-$container-max-widths: (
-  sm: 576px,
-  md: 720px,
-  lg: 940px,
-  xl: 1140px
-) !default;
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 
 
-// Grid columns
 //
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns:               12 !default;
-$grid-gutter-width:          1.875rem !default; // 30px
+// Variables
+//
 
+@import "variables";
 
 //
 // Grid mixins
 //
 
-@import "variables";
-
 @import "mixins/clearfix";
 @import "mixins/breakpoints";
 @import "mixins/grid-framework";
 @import "mixins/grid";
 
+@import "custom";
+
 @import "grid";

data/vendor/assets/stylesheets/solidus_admin/bootstrap/bootstrap-reboot.scss

@@ -3,8 +3,8 @@
 // Includes only Normalize and our custom Reboot reset.
 
 @import "variables";
-@import "mixins/hover";
-@import "mixins/tab-focus";
+@import "mixins";
+@import "custom";
 
 @import "normalize";
 @import "reboot";

data/vendor/assets/stylesheets/solidus_admin/bootstrap/bootstrap.scss

@@ -1,12 +1,14 @@
 /*!
- * Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
+ * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 
 // Core variables and mixins
 @import "variables";
 @import "mixins";
+@import "custom";
 
 // Reset and dependencies
 @import "normalize";
@@ -23,7 +25,7 @@
 @import "buttons";
 
 // Components
-@import "animation";
+@import "transitions";
 @import "dropdown";
 @import "button-group";
 @import "input-group";
@@ -33,8 +35,7 @@
 @import "card";
 @import "breadcrumb";
 @import "pagination";
-@import "pager";
-@import "labels";
+@import "badge";
 @import "jumbotron";
 @import "alert";
 @import "progress";
@@ -51,6 +52,3 @@
 
 // Utility classes
 @import "utilities";
-@import "utilities-background";
-@import "utilities-spacing";
-@import "utilities-responsive";

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_background-variant.scss

@@ -2,12 +2,11 @@
 
 @mixin bg-variant($parent, $color) {
   #{$parent} {
-    color: #fff !important;
     background-color: $color !important;
   }
   a#{$parent} {
     @include hover-focus {
-      background-color: darken($color, 10%);
+      background-color: darken($color, 10%) !important;
     }
   }
 }

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/{_label.scss → _badge.scss}

@@ -1,6 +1,6 @@
-// Labels
+// Badges
 
-@mixin label-variant($color) {
+@mixin badge-variant($color) {
   background-color: $color;
 
   &[href] {

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_breakpoints.scss

@@ -2,7 +2,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 544px, md: 768px)
+//    (xs: 0, sm: 576px, md: 768px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -10,7 +10,7 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
 //    md
@@ -21,8 +21,8 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px))
-//    544px
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
+//    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map-get($breakpoints, $name);
   @return if($min != 0, $min, null);
@@ -31,13 +31,24 @@
 // Maximum breakpoint width. Null for the largest (last) breakpoint.
 // The maximum value is calculated as the minimum of the next one less 0.1.
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px))
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
 //    767px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
   @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@@ -64,17 +75,6 @@
   }
 }
 
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  @include media-breakpoint-up($name, $breakpoints) {
-    @include media-breakpoint-down($name, $breakpoints) {
-      @content;
-    }
-  }
-}
-
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
 @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
@@ -84,3 +84,12 @@
     }
   }
 }
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  @include media-breakpoint-between($name, $name, $breakpoints) {
+    @content;
+  }
+}

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_buttons.scss

@@ -10,91 +10,77 @@
   color: $color;
   background-color: $background;
   border-color: $border;
-  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+  @include box-shadow($btn-box-shadow);
 
+  // Hover and focus styles are shared
   @include hover {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
+    border-color: $active-border;
   }
-
   &:focus,
   &.focus {
-    color: $color;
-    background-color: $active-background;
-        border-color: $active-border;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
+    } @else {
+      box-shadow: 0 0 0 2px rgba($border, .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
   }
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .show > &.dropdown-toggle {
     color: $color;
     background-color: $active-background;
-        border-color: $active-border;
-    // Remove the gradient for the pressed/active state
-    background-image: none;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
-
-    &:hover,
-    &:focus,
-    &.focus {
-      color: $color;
-      background-color: darken($background, 17%);
-          border-color: darken($border, 25%);
-    }
-  }
-
-  &.disabled,
-  &:disabled {
-    &:focus,
-    &.focus {
-      background-color: $background;
-          border-color: $border;
-    }
-    @include hover {
-      background-color: $background;
-          border-color: $border;
-    }
+    background-image: none; // Remove the gradient for the pressed/active state
+    border-color: $active-border;
+    @include box-shadow($btn-active-box-shadow);
   }
 }
 
-@mixin button-outline-variant($color) {
+@mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
   background-image: none;
   background-color: transparent;
   border-color: $color;
 
-  &:focus,
-  &.focus,
-  &:active,
-  &.active,
-  .open > &.dropdown-toggle {
-    color: #fff;
-    background-color: $color;
-        border-color: $color;
-  }
   @include hover {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
-        border-color: $color;
+    border-color: $color;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 2px rgba($color, .5);
   }
 
   &.disabled,
   &:disabled {
-    &:focus,
-    &.focus {
-      border-color: lighten($color, 20%);
-    }
-    @include hover {
-      border-color: lighten($color, 20%);
-    }
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    color: $color-hover;
+    background-color: $color;
+    border-color: $color;
   }
 }
 
 // Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   font-size: $font-size;
-  line-height: $line-height;
   @include border-radius($border-radius);
 }

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_cards.scss

@@ -3,6 +3,11 @@
 @mixin card-variant($background, $border) {
   background-color: $background;
   border-color: $border;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+  }
 }
 
 @mixin card-outline-variant($color) {
@@ -15,9 +20,12 @@
 //
 
 @mixin card-inverse {
+  color: rgba(255,255,255,.65);
+
   .card-header,
   .card-footer {
-    border-bottom: $card-border-width solid rgba(255,255,255,.2);
+    background-color: transparent;
+    border-color: rgba(255,255,255,.2);
   }
   .card-header,
   .card-footer,
@@ -27,7 +35,8 @@
   }
   .card-link,
   .card-text,
-  .card-blockquote > footer {
+  .card-subtitle,
+  .card-blockquote .blockquote-footer {
     color: rgba(255,255,255,.65);
   }
   .card-link {

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_clearfix.scss

@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
+    display: block;
     content: "";
-    display: table;
     clear: both;
   }
 }

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_float.scss

@@ -0,0 +1,9 @@
+@mixin float-left {
+  float: left !important;
+}
+@mixin float-right {
+  float: right !important;
+}
+@mixin float-none {
+  float: none !important;
+}

data/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_forms.scss

@@ -5,27 +5,20 @@
 
 @mixin form-control-validation($color) {
   // Color the label and help text
-  .text-help,
+  .form-control-feedback,
   .form-control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label  {
+  .col-form-label,
+  .form-check-label,
+  .custom-control {
     color: $color;
   }
+
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: $color;
-    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 
     &:focus {
-      // border-color: darken($border-color, 10%);
-      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
-      // @include box-shadow($shadow);
+      @include box-shadow($input-box-shadow, 0 0 6px lighten($color, 20%));
     }
   }
 
@@ -35,10 +28,6 @@
     border-color: $color;
     background-color: lighten($color, 40%);
   }
-  // Optional feedback icon
-  .form-control-feedback {
-    color: $color;
-  }
 }
 
 // Form control focus state
@@ -55,10 +44,11 @@
 // contrast against a dark gray background.
 @mixin form-control-focus() {
   &:focus {
+    color: $input-color-focus;
+    background-color: $input-bg-focus;
     border-color: $input-border-focus;
     outline: none;
-    $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
-    @include box-shadow($shadow);
+    @include box-shadow($input-box-shadow-focus);
   }
 }
 
@@ -68,10 +58,10 @@
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
 
-@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
   #{$parent} {
     height: $input-height;
-    padding: $padding-vertical $padding-horizontal;
+    padding: $padding-y $padding-x;
     font-size: $font-size;
     line-height: $line-height;
     @include border-radius($border-radius);