solidus_backend 2.3.1 → 2.4.0.beta1

data/vendor/assets/stylesheets/solidus_admin/bootstrap/_custom-forms.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable PropertyCount
+// scss-lint:disable PropertyCount, VendorPrefix
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
@@ -15,7 +15,6 @@
   min-height: (1rem * $line-height-base);
   padding-left: $custom-control-gutter;
   margin-right: $custom-control-spacer-x;
-  cursor: pointer;
 }
 
 .custom-control-input {
@@ -24,31 +23,29 @@
   opacity: 0;
 
   &:checked ~ .custom-control-indicator {
-    color: $custom-control-checked-indicator-color;
-    background-color: $custom-control-checked-indicator-bg;
-    @include box-shadow($custom-control-checked-indicator-box-shadow);
+    color: $custom-control-indicator-checked-color;
+    background-color: $custom-control-indicator-checked-bg;
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
   }
 
   &:focus ~ .custom-control-indicator {
     // the mixin is not used here to make sure there is feedback
-    box-shadow: $custom-control-focus-indicator-box-shadow;
+    box-shadow: $custom-control-indicator-focus-box-shadow;
   }
 
   &:active ~ .custom-control-indicator {
-    color: $custom-control-active-indicator-color;
-    background-color: $custom-control-active-indicator-bg;
-    @include box-shadow($custom-control-active-indicator-box-shadow);
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    @include box-shadow($custom-control-indicator-active-box-shadow);
   }
 
   &:disabled {
     ~ .custom-control-indicator {
-      cursor: $custom-control-disabled-cursor;
-      background-color: $custom-control-disabled-indicator-bg;
+      background-color: $custom-control-indicator-disabled-bg;
     }
 
     ~ .custom-control-description {
-      color: $custom-control-disabled-description-color;
-      cursor: $custom-control-disabled-cursor;
+      color: $custom-control-description-disabled-color;
     }
   }
 }
@@ -79,17 +76,17 @@
 
 .custom-checkbox {
   .custom-control-indicator {
-    @include border-radius($custom-checkbox-radius);
+    @include border-radius($custom-checkbox-indicator-border-radius);
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-checkbox-checked-icon;
+    background-image: $custom-checkbox-indicator-icon-checked;
   }
 
   .custom-control-input:indeterminate ~ .custom-control-indicator {
-    background-color: $custom-checkbox-indeterminate-bg;
-    background-image: $custom-checkbox-indeterminate-icon;
-    @include box-shadow($custom-checkbox-indeterminate-box-shadow);
+    background-color: $custom-checkbox-indicator-indeterminate-bg;
+    background-image: $custom-checkbox-indicator-icon-indeterminate;
+    @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
   }
 }
 
@@ -99,11 +96,11 @@
 
 .custom-radio {
   .custom-control-indicator {
-    border-radius: $custom-radio-radius;
+    border-radius: $custom-radio-indicator-border-radius;
   }
 
   .custom-control-input:checked ~ .custom-control-indicator {
-    background-image: $custom-radio-checked-icon;
+    background-image: $custom-radio-indicator-icon-checked;
   }
 }
 
@@ -136,8 +133,7 @@
 .custom-select {
   display: inline-block;
   max-width: 100%;
-  $select-border-width: ($border-width * 2);
-  height: calc(#{$input-height} + #{$select-border-width});
+  height: $input-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   line-height: $custom-select-line-height;
   color: $custom-select-color;
@@ -145,10 +141,12 @@
   background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
   background-size: $custom-select-bg-size;
   border: $custom-select-border-width solid $custom-select-border-color;
-  @include border-radius($custom-select-border-radius);
-  // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  @if $enable-rounded {
+    border-radius: $custom-select-border-radius;
+  } @else {
+    border-radius: 0;
+  }
+  appearance: none;
 
   &:focus {
     border-color: $custom-select-focus-border-color;
@@ -168,7 +166,6 @@
 
   &:disabled {
     color: $custom-select-disabled-color;
-    cursor: $cursor-disabled;
     background-color: $custom-select-disabled-bg;
   }
 
@@ -179,14 +176,10 @@
 }
 
 .custom-select-sm {
+  height: $custom-select-height-sm;
   padding-top: $custom-select-padding-y;
   padding-bottom: $custom-select-padding-y;
-  font-size: $custom-select-sm-font-size;
-
-  // &:not([multiple]) {
-  //   height: 26px;
-  //   min-height: 26px;
-  // }
+  font-size: $custom-select-font-size-sm;
 }
 
 
@@ -200,7 +193,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin-bottom: 0;
-  cursor: pointer;
 }
 
 .custom-file-input {
@@ -208,7 +200,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin: 0;
-  filter: alpha(opacity = 0);
   opacity: 0;
 
   &:focus ~ .custom-file-control {
@@ -234,7 +225,7 @@
   @include box-shadow($custom-file-box-shadow);
 
   @each $lang, $text in map-get($custom-file-text, placeholder) {
-    &:lang(#{$lang})::after {
+    &:lang(#{$lang}):empty::after {
       content: $text;
     }
   }

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

@@ -10,21 +10,27 @@
     display: inline-block;
     width: 0;
     height: 0;
-    margin-left: $caret-width;
-    vertical-align: middle;
+    margin-left: $caret-width * .85;
+    vertical-align: $caret-width * .85;
     content: "";
     border-top: $caret-width solid;
     border-right: $caret-width solid transparent;
     border-left: $caret-width solid transparent;
   }
 
-  // Prevent the focus on the dropdown toggle when closing dropdowns
-  &:focus {
-    outline: 0;
+  &:empty::after {
+    margin-left: 0;
   }
 }
 
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
 .dropup {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
   .dropdown-toggle {
     &::after {
       border-top: 0;
@@ -43,7 +49,7 @@
   float: left;
   min-width: $dropdown-min-width;
   padding: $dropdown-padding-y 0;
-  margin: $dropdown-margin-top 0 0; // override default ul
+  margin: $dropdown-spacer 0 0; // override default ul
   font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
   color: $body-color;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
@@ -66,7 +72,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: 3px $dropdown-item-padding-x;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
   clear: both;
   font-weight: $font-weight-normal;
   color: $dropdown-link-color;
@@ -91,7 +97,6 @@
   &.disabled,
   &:disabled {
     color: $dropdown-link-disabled-color;
-    cursor: $cursor-disabled;
     background-color: transparent;
     // Remove CSS gradients if they're enabled
     @if $enable-gradients {
@@ -102,29 +107,14 @@
 
 // Open state for the dropdown
 .show {
-  // Show the menu
-  > .dropdown-menu {
-    display: block;
-  }
-
   // Remove the outline when :focus is triggered
   > a {
     outline: 0;
   }
 }
 
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
+.dropdown-menu.show {
+  display: block;
 }
 
 // Dropdown section headers
@@ -136,26 +126,3 @@
   color: $dropdown-header-color;
   white-space: nowrap; // as with > li > a
 }
-
-// Backdrop to catch body clicks on mobile, etc.
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $zindex-dropdown-backdrop;
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-//
-// Just add .dropup after the standard .dropdown class and you're set.
-
-.dropup {
-  // Different positioning for bottom up menu
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: $dropdown-margin-top;
-  }
-}

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

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// scss-lint:disable QualifyingElement, VendorPrefix
 
 //
 // Textual form controls
@@ -9,9 +9,9 @@
   width: 100%;
   // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   // height: $input-height;
-  padding: $input-padding-y $input-padding-x;
+  padding: $input-btn-padding-y $input-btn-padding-x;
   font-size: $font-size-base;
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   color: $input-color;
   background-color: $input-bg;
   // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@@ -42,7 +42,7 @@
 
   // Placeholder
   &::placeholder {
-    color: $input-color-placeholder;
+    color: $input-placeholder-color;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -54,20 +54,15 @@
   // don't honor that edge case; we style them as disabled anyway.
   &:disabled,
   &[readonly] {
-    background-color: $input-bg-disabled;
+    background-color: $input-disabled-bg;
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
   }
-
-  &:disabled {
-    cursor: $cursor-disabled;
-  }
 }
 
 select.form-control {
   &:not([size]):not([multiple]) {
-    $select-border-width: ($border-width * 2);
-    height: calc(#{$input-height} + #{$select-border-width});
+    height: $input-height;
   }
 
   &:focus::-ms-value {
@@ -95,20 +90,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
-  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }
 
@@ -120,23 +115,23 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the legend text to
 // be the same size as regular labels, and to align with the form controls.
 .col-form-legend {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0;
   font-size: $font-size-base;
 }
 
 
-// Static form control text
+// Readonly controls as plain text
 //
-// Apply class to an element to make any string of text align with labels in a
-// horizontal form layout.
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
 
-.form-control-static {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+.form-control-plaintext {
+  padding-top: $input-btn-padding-y;
+  padding-bottom: $input-btn-padding-y;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-line-height;
+  line-height: $input-btn-line-height;
   border: solid transparent;
   border-width: $input-btn-border-width 0;
 
@@ -157,8 +152,9 @@ select.form-control {
 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
 
 .form-control-sm {
-  padding: $input-padding-y-sm $input-padding-x-sm;
+  padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
   font-size: $font-size-sm;
+  line-height: $input-btn-line-height-sm;
   @include border-radius($input-border-radius-sm);
 }
 
@@ -169,8 +165,9 @@ select.form-control-sm {
 }
 
 .form-control-lg {
-  padding: $input-padding-y-lg $input-padding-x-lg;
+  padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
   font-size: $font-size-lg;
+  line-height: $input-btn-line-height-lg;
   @include border-radius($input-border-radius-lg);
 }
 
@@ -196,6 +193,24 @@ select.form-control-lg {
 }
 
 
+// Form grid
+//
+// Special replacement for our grid system's `.row` for tighter form layouts.
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -5px;
+  margin-left: -5px;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+}
+
+
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
@@ -208,7 +223,6 @@ select.form-control-lg {
   &.disabled {
     .form-check-label {
       color: $text-muted;
-      cursor: $cursor-disabled;
     }
   }
 }
@@ -216,7 +230,6 @@ select.form-control-lg {
 .form-check-label {
   padding-left: $form-check-input-gutter;
   margin-bottom: 0; // Override default `<label>` bottom margin
-  cursor: pointer;
 }
 
 .form-check-input {
@@ -243,48 +256,37 @@ select.form-control-lg {
 }
 
 
-// Form control feedback states
+// Form validation
 //
-// Apply contextual and semantic states to individual form controls.
-
-.form-control-feedback {
-  margin-top: $form-feedback-margin-top;
-}
-
-.form-control-success,
-.form-control-warning,
-.form-control-danger {
-  padding-right: ($input-padding-x * 3);
-  background-repeat: no-repeat;
-  background-position: center right ($input-height / 4);
-  background-size: ($input-height / 2) ($input-height / 2);
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server side validation.
+
+.invalid-feedback {
+  display: none;
+  margin-top: .25rem;
+  font-size: .875rem;
+  color: $form-feedback-invalid-color;
 }
 
-// Form validation states
-.has-success {
-  @include form-control-validation($brand-success);
-
-  .form-control-success {
-    background-image: $form-icon-success;
-  }
-}
-
-.has-warning {
-  @include form-control-validation($brand-warning);
-
-  .form-control-warning {
-    background-image: $form-icon-warning;
-  }
-}
-
-.has-danger {
-  @include form-control-validation($brand-danger);
-
-  .form-control-danger {
-    background-image: $form-icon-danger;
-  }
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  width: 250px;
+  padding: .5rem;
+  margin-top: .1rem;
+  font-size: .875rem;
+  line-height: 1;
+  color: #fff;
+  background-color: rgba($form-feedback-invalid-color,.8);
+  border-radius: .2rem;
 }
 
+@include form-validation-state("valid", $form-feedback-valid-color);
+@include form-validation-state("invalid", $form-feedback-invalid-color);
 
 // Inline forms
 //
@@ -333,7 +335,7 @@ select.form-control-lg {
     }
 
     // Make static controls behave like regular ones
-    .form-control-static {
+    .form-control-plaintext {
       display: inline-block;
     }
 

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

@@ -0,0 +1,90 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map) {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@mixin color-yiq($color) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= 150) {
+    color: #111;
+  } @else {
+    color: #fff;
+  }
+}
+
+// Retreive color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function grayscale($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, #000, #fff);
+
+  @if $level < 0 {
+    // Lighter values need a quick double negative for the Sass math to work
+    @return mix($color-base, $color, $level * -1 * $theme-color-interval);
+  } @else {
+    @return mix($color-base, $color, $level * $theme-color-interval);
+  }
+}

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

@@ -11,11 +11,12 @@
 
 // Fluid container
 //
-// Utilizes the mixin meant for fixed width containers, but without any defined
-// width for fluid, full width layouts.
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
 
 @if $enable-grid-classes {
   .container-fluid {
+    width: 100%;
     @include make-container();
   }
 }

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

@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }