solidus_backend 2.1.1 → 2.2.0.beta1

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

@@ -1,3 +1,5 @@
+// scss-lint:disable QualifyingElement
+
 //
 // Base styles
 //
@@ -5,44 +7,38 @@
 .btn {
   display: inline-block;
   font-weight: $btn-font-weight;
+  line-height: $btn-line-height;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: pointer;
   user-select: none;
   border: $input-btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
-  @include transition(all .2s ease-in-out);
-
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      @include tab-focus();
-    }
-  }
+  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
+  @include transition($btn-transition);
 
+  // Share hover and focus styles
   @include hover-focus {
     text-decoration: none;
   }
+  &:focus,
   &.focus {
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    background-image: none;
     outline: 0;
-    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    box-shadow: $btn-focus-box-shadow;
   }
 
+  // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
     opacity: .65;
     @include box-shadow(none);
   }
+
+  &:active,
+  &.active {
+    background-image: none;
+    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+  }
 }
 
 // Future-proof disabling of clicks on `<a>` elements
@@ -76,22 +72,22 @@ fieldset[disabled] a.btn {
 }
 
 // Remove all backgrounds
-.btn-primary-outline {
+.btn-outline-primary {
   @include button-outline-variant($btn-primary-bg);
 }
-.btn-secondary-outline {
+.btn-outline-secondary {
   @include button-outline-variant($btn-secondary-border);
 }
-.btn-info-outline {
+.btn-outline-info {
   @include button-outline-variant($btn-info-bg);
 }
-.btn-success-outline {
+.btn-outline-success {
   @include button-outline-variant($btn-success-bg);
 }
-.btn-warning-outline {
+.btn-outline-warning {
   @include button-outline-variant($btn-warning-bg);
 }
-.btn-danger-outline {
+.btn-outline-danger {
   @include button-outline-variant($btn-danger-bg);
 }
 
@@ -102,7 +98,7 @@ fieldset[disabled] a.btn {
 
 // Make a button look and behave like a link
 .btn-link {
-  font-weight: normal;
+  font-weight: $font-weight-normal;
   color: $link-color;
   border-radius: 0;
 
@@ -127,8 +123,9 @@ fieldset[disabled] a.btn {
     background-color: transparent;
   }
   &:disabled {
+    color: $btn-link-disabled-color;
+
     @include hover-focus {
-      color: $btn-link-disabled-color;
       text-decoration: none;
     }
   }
@@ -141,11 +138,11 @@ fieldset[disabled] a.btn {
 
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
 }
 .btn-sm {
   // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
 }
 
 
@@ -160,7 +157,7 @@ fieldset[disabled] a.btn {
 
 // Vertically space out multiple block buttons
 .btn-block + .btn-block {
-  margin-top: 5px;
+  margin-top: $btn-block-spacing-y;
 }
 
 // Specificity overrides

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

@@ -4,14 +4,17 @@
 
 .card {
   position: relative;
-  display: block;
-  margin-bottom: $card-spacer-y;
+  display: flex;
+  flex-direction: column;
   background-color: $card-bg;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
 
 .card-block {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
   padding: $card-spacer-x;
 }
 
@@ -28,14 +31,6 @@
   margin-bottom: 0;
 }
 
-// .card-actions {
-//   padding: $card-spacer-y $card-spacer-x;
-
-//   .card-link + .card-link {
-//     margin-left: $card-spacer-x;
-//   }
-// }
-
 .card-link {
   @include hover {
     text-decoration: none;
@@ -46,18 +41,16 @@
   }
 }
 
-@if $enable-rounded {
-  .card {
-    > .list-group:first-child {
-      .list-group-item:first-child {
-        border-radius: $card-border-radius $card-border-radius 0 0;
-      }
+.card {
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($card-border-radius);
     }
+  }
 
-    > .list-group:last-child {
-      .list-group-item:last-child {
-        border-radius: 0 0 $card-border-radius $card-border-radius;
-      }
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($card-border-radius);
     }
   }
 }
@@ -69,6 +62,7 @@
 
 .card-header {
   padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
   background-color: $card-cap-bg;
   border-bottom: $card-border-width solid $card-border-color;
 
@@ -88,6 +82,23 @@
 }
 
 
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -($card-spacer-x / 2);
+  margin-bottom: -$card-spacer-y;
+  margin-left: -($card-spacer-x / 2);
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -($card-spacer-x / 2);
+  margin-left: -($card-spacer-x / 2);
+}
+
+
 //
 // Background variations
 //
@@ -109,22 +120,22 @@
 }
 
 // Remove all backgrounds
-.card-primary-outline {
+.card-outline-primary {
   @include card-outline-variant($btn-primary-bg);
 }
-.card-secondary-outline {
+.card-outline-secondary {
   @include card-outline-variant($btn-secondary-border);
 }
-.card-info-outline {
+.card-outline-info {
   @include card-outline-variant($btn-info-bg);
 }
-.card-success-outline {
+.card-outline-success {
   @include card-outline-variant($btn-success-bg);
 }
-.card-warning-outline {
+.card-outline-warning {
   @include card-outline-variant($btn-warning-bg);
 }
-.card-danger-outline {
+.card-outline-danger {
   @include card-outline-variant($btn-danger-bg);
 }
 
@@ -149,7 +160,7 @@
 // Card image
 .card-img {
   // margin: -1.325rem;
-  @include border-radius(.25rem);
+  @include border-radius($card-border-radius-inner);
 }
 .card-img-overlay {
   position: absolute;
@@ -157,81 +168,53 @@
   right: 0;
   bottom: 0;
   left: 0;
-  padding: 1.25rem;
+  padding: $card-img-overlay-padding;
 }
 
 
 
 // Card image caps
 .card-img-top {
-  @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+  @include border-top-radius($card-border-radius-inner);
 }
 .card-img-bottom {
-  @include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
+  @include border-bottom-radius($card-border-radius-inner);
 }
 
 
-//
-// Card set
-//
+// Card deck
+
+@include media-breakpoint-up(sm) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
 
-@if $enable-flex {
-  @include media-breakpoint-up(sm) {
-    .card-deck {
+    .card {
       display: flex;
-      flex-flow: row wrap;
-      margin-right: -.625rem;
-      margin-left: -.625rem;
-
-      .card {
-        flex: 1 0 0;
-        margin-right: .625rem;
-        margin-left: .625rem;
-      }
-    }
-  }
-} @else {
-  @include media-breakpoint-up(sm) {
-    .card-deck {
-      display: table;
-      table-layout: fixed;
-      border-spacing: 1.25rem 0;
-
-      .card {
-        display: table-cell;
-        width: 1%;
-        vertical-align: top;
-      }
-    }
-    .card-deck-wrapper {
-      margin-right: -1.25rem;
-      margin-left: -1.25rem;
+      flex: 1 0 0;
+      flex-direction: column;
+
+      // Selectively apply horizontal margins to cards to avoid doing the
+      // negative margin dance like our grid. This differs from the grid
+      // due to the use of margins as gutters instead of padding.
+      &:not(:first-child) { margin-left: $card-deck-margin; }
+      &:not(:last-child) { margin-right: $card-deck-margin; }
     }
   }
 }
 
+
 //
 // Card groups
 //
 
 @include media-breakpoint-up(sm) {
   .card-group {
-    @if $enable-flex {
-      display: flex;
-      flex-flow: row wrap;
-    } @else {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
+    display: flex;
+    flex-flow: row wrap;
 
     .card {
-      @if $enable-flex {
-        flex: 1 0 0;
-      } @else {
-        display: table-cell;
-        vertical-align: top;
-      }
+      flex: 1 0 0;
 
       + .card {
         margin-left: 0;
@@ -276,17 +259,18 @@
 
 
 //
-// Card
+// Columns
 //
 
 @include media-breakpoint-up(sm) {
   .card-columns {
-    column-count: 3;
-    column-gap: 1.25rem;
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
 
     .card {
-      display: inline-block;
-      width: 100%; // Don't let them exceed the column width
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+      margin-bottom: $card-columns-margin;
     }
   }
 }

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

@@ -7,77 +7,47 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+}
 
-  > .carousel-item {
-    position: relative;
-    display: none;
-    transition: .6s ease-in-out left;
-
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @extend .img-fluid;
-      line-height: 1;
-    }
+.carousel-item {
+  position: relative;
+  display: none;
+  width: 100%;
 
-    // WebKit CSS3 transforms for supported devices
-    @media all and (transform-3d), (-webkit-transform-3d) {
-      transition: transform .6s ease-in-out;
-      backface-visibility: hidden;
-      perspective: 1000px;
-
-      &.next,
-      &.active.right {
-        left: 0;
-        transform: translate3d(100%, 0, 0);
-      }
-      &.prev,
-      &.active.left {
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        left: 0;
-        transform: translate3d(0, 0, 0);
-      }
-    }
+  @include if-supports-3d-transforms() {
+    @include transition($carousel-transition);
+    backface-visibility: hidden;
+    perspective: 1000px;
   }
+}
 
-  > .active,
-  > .next,
-  > .prev {
-    display: block;
-  }
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: flex;
+}
 
-  > .active {
-    left: 0;
-  }
+.carousel-item-next,
+.carousel-item-prev {
+  position: absolute;
+  top: 0;
+}
 
-  > .next,
-  > .prev {
-    position: absolute;
-    top: 0;
-    width: 100%;
+// CSS3 transforms when supported by the browser
+@include if-supports-3d-transforms() {
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    transform: translate3d(0, 0, 0);
   }
 
-  > .next {
-    left: 100%;
-  }
-  > .prev {
-    left: -100%;
-  }
-  > .next.left,
-  > .prev.right {
-    left: 0;
+  .carousel-item-next,
+  .active.carousel-item-right {
+    transform: translate3d(100%, 0, 0);
   }
 
-  > .active.left {
-    left: -100%;
-  }
-  > .active.right {
-    left: 100%;
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    transform: translate3d(-100%, 0, 0);
   }
 }
 
@@ -86,30 +56,22 @@
 // Left/right controls for nav
 //
 
-.carousel-control {
+.carousel-control-prev,
+.carousel-control-next {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
-  font-size: $carousel-control-font-size;
   color: $carousel-control-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
   opacity: $carousel-control-opacity;
-  // We can't have this transition here because WebKit cancels the carousel
+  // We can't have a transition here because WebKit cancels the carousel
   // animation if you trip this while in the middle of another animation.
 
-  // Set gradients for backgrounds
-  &.left {
-    @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
-  }
-  &.right {
-    right: 0;
-    left: auto;
-    @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
-  }
-
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
@@ -117,78 +79,83 @@
     outline: 0;
     opacity: .9;
   }
+}
+.carousel-control-prev {
+  left: 0;
+}
+.carousel-control-next {
+  right: 0;
+}
 
-  // Toggles
-  .icon-prev,
-  .icon-next {
-    position: absolute;
-    top: 50%;
-    z-index: 5;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
-    font-family: serif;
-    line-height: 1;
-  }
-  .icon-prev {
-    left: 50%;
-    margin-left: -10px;
-  }
-  .icon-next {
-    right: 50%;
-    margin-right: -10px;
-  }
-
-  .icon-prev {
-    &::before {
-      content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
-    }
-  }
-  .icon-next {
-    &::before {
-      content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
-    }
-  }
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: transparent no-repeat center center;
+  background-size: 100% 100%;
+}
+.carousel-control-prev-icon {
+  background-image: $carousel-control-prev-icon-bg;
+}
+.carousel-control-next-icon {
+  background-image: $carousel-control-next-icon-bg;
 }
 
 
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
 
 .carousel-indicators {
   position: absolute;
+  right: 0;
   bottom: 10px;
-  left: 50%;
+  left: 0;
   z-index: 15;
-  width: 60%;
-  padding-left: 0;
-  margin-left: -30%;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
   list-style: none;
 
   li {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin: 1px;
+    position: relative;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    // IE9 hack for event handling
-    //
-    // Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
-    // so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
-    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
-    background-color: rgba(0,0,0,0); // IE9
-    border: 1px solid $carousel-indicator-border-color;
-    border-radius: 10px;
+    background-color: rgba($carousel-indicator-active-bg, .5);
+
+    // Use pseudo classes to increase the hit area by 10px on top and bottom.
+    &::before {
+      position: absolute;
+      top: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
+    &::after {
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      display: inline-block;
+      width: 100%;
+      height: 10px;
+      content: "";
+    }
   }
+
   .active {
-    width: 12px;
-    height: 12px;
-    margin: 0;
     background-color: $carousel-indicator-active-bg;
   }
 }
@@ -196,57 +163,16 @@
 
 // Optional captions
 //
-// Hidden by default for smaller viewports.
+//
 
 .carousel-caption {
   position: absolute;
-  right: 15%;
+  right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
-  left: 15%;
+  left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: $carousel-caption-color;
   text-align: center;
-  text-shadow: $carousel-text-shadow;
-
-  .btn {
-    text-shadow: none; // No shadow for button elements in carousel-caption
-  }
-}
-
-
-//
-// Responsive variations
-//
-
-@include media-breakpoint-up(sm) {
-  // Scale up the controls a smidge
-  .carousel-control {
-    .icon-prev,
-    .icon-next {
-      width: 30px;
-      height: 30px;
-      margin-top: -15px;
-      font-size: 30px;
-    }
-    .icon-prev {
-      margin-left: -15px;
-    }
-    .icon-next {
-      margin-right: -15px;
-    }
-  }
-
-  // Show and left align the captions
-  .carousel-caption {
-    right: 20%;
-    left: 20%;
-    padding-bottom: 30px;
-  }
-
-  // Move up the indicators
-  .carousel-indicators {
-    bottom: 20px;
-  }
 }