solidus_backend_devise_token_auth 2.8.0.alpha.2

data/app/assets/stylesheets/spree/backend/components/_stock_table.scss

@@ -0,0 +1,29 @@
+.stock-table {
+  .stock-variant-field-table {
+    tr td {
+      padding: 2px;
+      border: none;
+      text-align: left;
+    }
+    tr td:first-child {
+      font-weight: bold;
+    }
+    margin-bottom: 0px;
+  }
+
+  > tbody {
+    .variant-image {
+      width: 31%;
+      padding: 0 2%;
+      img { width: 100%; }
+    }
+    .variant-details {
+      width: 65%;
+      padding: 0px 5px;
+    }
+    .variant-image,
+    .variant-details {
+      float: left;
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/components/_table-filter.scss

@@ -0,0 +1,20 @@
+#table-filter {
+
+  /* This is needed to avoid overriding the bootstrap's styles for
+   * .input-group, which sets the form-control's width to 1%.
+   * Without this, the date range overflows its container on firefox.
+   */
+  .field:not(.date-range-filter) {
+    input[type="text"], input[type="phone"],
+    input[type="email"], input[type="number"],
+    input[type="url"] {
+      width: 100%;
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+
+  @media print { display: none }
+}

data/app/assets/stylesheets/spree/backend/components/_tabs.scss

@@ -0,0 +1,112 @@
+.tabs {
+  display: flex;
+  margin: 1em 0;
+  border-bottom: 1px solid $color-border;
+  white-space: nowrap;
+
+  &,
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  a {
+    padding: 1em;
+  }
+
+  @media print { display: none }
+}
+
+.tabs > li:not(.in-dropdown) {
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  // Move down one pixel to sit on top of the ul's border-bottom
+  position: relative;
+  top: 1px;
+
+  > a {
+    display: block;
+    border: 1px solid $color-border;
+    border-radius: 2px 2px 0 0;
+    line-height: 1;
+  }
+
+  &:not(:first-child) > a {
+    border-left: none;
+  }
+
+  &:not(.active) > a {
+    background: $color-tbl-thead;
+  }
+
+  &.active > a,
+  &.active:hover {
+    background: white;
+    border-bottom-color: white;
+    color: $body-color;
+  }
+
+  &:not(.active):hover > a {
+    background: darken($color-tbl-thead, 5%);
+    color: $link-color;
+  }
+}
+
+.tabs-overflowed.tabs > li:not(.tabs-dropdown) {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.tabs-dropdown {
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+
+  .tabs:not(.tabs-overflowed) & {
+    visibility: hidden;
+  }
+
+  > a {
+    position: relative;
+    background: white;
+    z-index: 1;
+
+    &:before {
+      content: "\f107";
+      font-family: FontAwesome;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+
+  &:hover > a {
+    background: white;
+  }
+
+  &:not(:hover) ul {
+    display: none;
+  }
+
+  ul {
+    position: absolute;
+    top: calc(100% - 1px);
+    right: 0;
+    z-index: 1;
+  }
+}
+
+.tabs li.in-dropdown {
+  a {
+    display: block;
+    border: 1px solid $color-border;
+    background: white;
+  }
+
+  &:not(:first-child) a {
+    border-top: none;
+  }
+
+  &:last-child a {
+    border-radius: 0 0 3px 3px;
+  }
+}

data/app/assets/stylesheets/spree/backend/globals/_deprecation.scss

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+/// Throws Sass warnings to announce backend deprecations. You can disable them
+/// by setting the `$output-solidus-deprecation-warnings` variable to `false`.
+///
+/// @access private
+
+$output-solidus-deprecation-warnings: true !default;
+
+@mixin solidus-deprecated-variable($variable, $replacement) {
+  @if $output-solidus-deprecation-warnings == true {
+    @if global-variable-exists($variable) {
+      @warn "[Solidus] [Deprecation] `$#{$variable}` is deprecated and will be " +
+        "removed in 3.0.0. Please use Bootstraps $#{$replacement} instead";
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/globals/_functions.scss

@@ -0,0 +1,25 @@
+// Make color very close to white
+@function very-light($color, $adjust: 3){  
+  @if type-of($adjust) == 'number' and $adjust > 0 {
+    @for $i from 0 through 100 {
+      @if lighten($color, $i) == white and ($i - $adjust) > $adjust {
+        @return lighten($color, $i - $adjust);
+      }
+    }
+  }
+  @else {
+    @debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'"
+  }
+};
+
+// Quick fix for dynamic variables missing in SASS
+@function get-value($prop, $val, $search) {
+  $n1: index($prop, $search);
+  $n2: index($val, $search);
+
+  @if($n1) {
+    @return nth($val, $n1);
+  } @else {
+    @return nth($prop, $n2);
+  }
+}

data/app/assets/stylesheets/spree/backend/globals/_mixins.css

@@ -0,0 +1,2 @@
+@import "mixins/caret";
+@import "mixins/line_through";

data/app/assets/stylesheets/spree/backend/globals/_variables.scss

@@ -0,0 +1,148 @@
+// -------------------------------------------------------------
+//   Variables used in all other files
+//--------------------------------------------------------------
+
+// Fonts
+//--------------------------------------------------------------
+$font-size-pill: 11px;
+
+// Colors
+//--------------------------------------------------------------
+
+// Basic color palette for admin
+$color-1:                        #FFFFFF !default;    // White
+$color-2:                        #9FC820 !default;    // Green
+$color-3:                        #5498DA !default;    // Light Blue
+$color-4:                        #6788A2 !default;    // Dark Blue
+$color-5:                        #C60F13 !default;    // Red
+$color-6:                        #FF9300 !default;    // Yellow
+$color-7:                        #F4F4F4 !default;    // Light Gray
+
+// Basic accents for admin
+$box-shadow:                     0px 3px 3px -2px hsla(0, 0%, 0%, 0.2) !default;
+
+// Body base colors
+$color-border:                   very-light($color-3, 12) !default;
+
+// Basic navigation colors
+$color-sidebar-bg:              $color-1 !default;
+$color-sidebar-border:          $color-border !default;
+$color-navbar:                  $color-1 !default;
+$color-navbar-bg:               $color-3 !default;
+$color-navbar-active:           $color-1 !default;
+$color-navbar-active-bg:        $color-2 !default;
+$color-navbar-submenu:          $color-3 !default;
+$color-navbar-submenu-bg:       very-light($color-navbar-bg, 4) !default;
+$color-navbar-submenu-active:   $color-2 !default;
+$color-navbar-footer:           $color-3 !default;
+$color-navbar-footer-bg:        $color-sidebar-bg !default;
+$color-navbar-footer-active:    $color-2 !default;
+
+// Basic flash colors
+@include solidus-deprecated-variable("color-success", "brand-success");
+$color-success:                  $color-2 !default;
+@include solidus-deprecated-variable("color-notice", "brand-warning");
+$color-notice:                   $color-6 !default;
+@include solidus-deprecated-variable("color-error", "brand-danger");
+$color-error:                    $color-5 !default;
+
+// Color for spinner
+$color-spinner: #fff;
+
+// Style Guide
+$color-style-guide-code: darken($color-7, 10%);
+$color-style-guide-link: darken($color-7, 65%);
+$color-style-guide-nav: $color-7;
+$color-style-guide-nav-border: darken($color-7, 5%);
+$color-style-guide-nav-link: darken($color-7, 65%);
+$color-style-guide-nav-link-hover: darken($color-7, 5%);
+$color-style-guide-section-border: darken($color-7, 10%);
+$color-style-guide-swatch-border: darken($color-7, 10%);
+
+// Table colors
+$color-tbl-odd:                  $color-1 !default;
+$color-tbl-even:                 very-light($color-3, 4) !default;
+$color-tbl-thead:                very-light($color-3, 4) !default;
+
+// Pill colors
+//
+// For now these are custom assigned colors just for this section. As we go
+// about updating other areas of the admin we will likely want to pull these
+// colors out into better named variables.
+$color-pill-text: #1f2933;
+$color-pill-neutral: #e6e6e6;
+$color-pill-neutral-text: $color-pill-text;
+$color-pill-complete: #c8d8e8;
+$color-pill-complete-text: $color-pill-text;
+$color-pill-active: #bbe5b3;
+$color-pill-active-text: $color-pill-text;
+$color-pill-inactive: $color-pill-neutral;
+$color-pill-inactive-text: lighten($color-pill-text, 30%);
+$color-pill-pending: #ffe87d;
+$color-pill-pending-text: $color-pill-text;
+$color-pill-warning: #f9b36d;
+$color-pill-warning-text: $color-pill-text;
+$color-pill-error: #ff967b;
+$color-pill-error-text: $color-pill-text;
+
+// Actions colors
+$color-action-edit-bg:           very-light($color-success, 5  ) !default;
+$color-action-edit-brd:          very-light($color-success, 20 ) !default;
+$color-action-clone-bg:          very-light($color-notice,  5  ) !default;
+$color-action-clone-brd:         very-light($color-notice,  15 ) !default;
+$color-action-remove-bg:         very-light($color-error,   5  ) !default;
+$color-action-remove-brd:        very-light($color-error,   10 ) !default;
+$color-action-void-bg:           very-light($color-error,   10 ) !default;
+$color-action-void-brd:          very-light($color-error,   20 ) !default;
+$color-action-cancel-bg:         very-light($color-notice,  10 ) !default;
+$color-action-cancel-brd:        very-light($color-notice,  20 ) !default;
+$color-action-capture-bg:        very-light($color-success, 5  ) !default;
+$color-action-capture-brd:       very-light($color-success, 20 ) !default;
+$color-action-save-bg:           very-light($color-success, 5  ) !default;
+$color-action-save-brd:          very-light($color-success, 20 ) !default;
+$color-action-mail-bg:           very-light($color-success, 5  ) !default;
+$color-action-mail-brd:          very-light($color-success, 20 ) !default;
+$color-action-failure-bg:        very-light($color-error,   10 ) !default;
+$color-action-failure-brd:       very-light($color-error,   20 ) !default;
+
+// Available states
+$states: (
+  active,
+  address,
+  awaiting_return,
+  backorder,
+  balance_due,
+  canceled,
+  cart,
+  checkout,
+  complete,
+  completed,
+  confirm,
+  credit_owed,
+  delivery,
+  error,
+  failed,
+  inactive,
+  paid,
+  payment,
+  pending,
+  ready,
+  returned,
+  shipped,
+  void
+) !default;
+
+// Available actions
+$actions: edit, clone, remove, void, capture, save, cancel, mail, failure !default;
+$actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg, $color-action-failure-bg !default;
+$actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd, $color-action-failure-brd !default;
+
+// Sidebar
+//--------------------------------------------------------------
+$width-sidebar:                  200px !default;
+$width-sidebar-flyout:           225px !default;
+$border-sidebar:                 1px solid $color-sidebar-border !default;
+
+// Main
+//--------------------------------------------------------------
+$main-header-height:             75px !default;

data/app/assets/stylesheets/spree/backend/globals/_variables_override.scss

@@ -0,0 +1,7 @@
+/*--------------------------------------------------------- 
+  Empty file to override variables in user applications.
+
+  To set your own colors, sizes or fonts just override this 
+  file in your application and set variables according to
+  globals/_variables.scss file.
+  --------------------------------------------------------- */

data/app/assets/stylesheets/spree/backend/globals/mixins/_caret.scss

@@ -0,0 +1,35 @@
+@mixin caret($width: 1em, $height: 1em, $direction: up, $color-caret: $color-3) {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    border-width: $height $width;
+    border-style: solid;
+    border-color: transparent;
+
+    @if $direction == up {
+      border-bottom-color: $color-caret;
+      top: -2 * $width;
+      left: 50%;
+      margin-left: -$height;
+    }
+    @else if $direction == down {
+      border-top-color: $color-caret;
+      top: -2 * $width;
+      left: 50%;
+      margin-left: -$height;
+    }
+    @else if $direction == left {
+      border-right-color: $color-caret;
+      left: -2 * $width;
+      top: 50%;
+      margin-top: -$height;
+    }
+    @else {
+      border-left-color: $color-caret;
+      right: -2 * $width;
+      top: 50%;
+      margin-top: -$height;
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/globals/mixins/_line_through.scss

@@ -0,0 +1,23 @@
+@mixin line-through($color: $color-2, $background: $body-bg) {
+  position: relative;
+  text-align: center;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 1px);
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: $color;
+    z-index: 0;
+  }
+
+  > * { // usually a <span> but we'll use an * just in case
+    padding-left: 1rem;
+    padding-right: 1rem;
+    position: relative;
+    background: $background;
+    z-index: 1;
+  }
+}

data/app/assets/stylesheets/spree/backend/plugins/_bootstrap_tooltip.scss

@@ -0,0 +1,43 @@
+@mixin bootstrap-tooltip-color($color) {
+  .tooltip-inner{
+    background-color: $color;
+  }
+
+  &.bs-tooltip-top {
+    .arrow::before {
+      border-top-color: $color;
+    }
+  }
+
+  &.bs-tooltip-right {
+    .arrow::before {
+      border-right-color: $color;
+    }
+  }
+
+  &.bs-tooltip-bottom {
+    .arrow::before {
+      border-bottom-color: $color;
+    }
+  }
+
+  &.bs-tooltip-left {
+    .arrow::before {
+      border-left-color: $color;
+    }
+  }
+}
+
+.tooltip {
+  pointer-events: none;
+
+  &.action-edit, &.action-save, &.action-capture, &.action-add {
+    @include bootstrap-tooltip-color(theme-color("success"));
+  }
+  &.action-clone, &.action-cancel {
+    @include bootstrap-tooltip-color(theme-color("warning"));
+  }
+  &.action-void, &.action-failure, &.action-remove {
+    @include bootstrap-tooltip-color(theme-color("danger"));
+  }
+}

data/app/assets/stylesheets/spree/backend/plugins/_select2.scss

@@ -0,0 +1,119 @@
+.select2-container,
+.select2-container.select2-drop-above {
+  .select2-choice, .select2-choices {
+    border: $input-btn-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background: $input-bg;
+    height: $input-height;
+    padding: 0;
+
+    .select2-arrow {
+      background: transparent;
+      border-left: 0;
+      b {
+        // Need to be !important to override media query select2 defaults
+        // Inline icon taken from bootstrap's custom-select class
+        background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center !important;
+        background-size: 8px 10px !important;
+      }
+    }
+
+    >.select2-chosen {
+      padding: $input-btn-padding-y $input-btn-padding-x;
+      line-height: $input-btn-line-height;
+      color: $input-color;
+    }
+  }
+}
+
+.select2-container.select2-dropdown-open {
+  .select2-choice,
+  .select2-choices {
+    border-radius: $input-border-radius $input-border-radius 0 0;
+  }
+
+  &.select2-drop-above {
+    .select2-choice,
+    .select2-choices {
+      border-radius: 0 0 $input-border-radius $input-border-radius;
+    }
+  }
+}
+
+.select2-container .select2-choice .select2-search-choice-close {
+  @extend .fa;
+  @extend .fa-times;
+  color: #333; /* matches bootstrap's custom-select arrow */
+
+  /* See https://github.com/solidusio/solidus/pull/1314 */
+  display: none;
+
+  /* Hide the default icon */
+  background-image: none;
+}
+
+.select2-container-active, .select2-dropdown-open,
+.select2-container-active.select2-drop-above,
+.select2-dropdown-open.select2-drop-above {
+  .select2-choices.select2-choices, /* Needs extra specificity */
+  .select2-choice {
+    box-shadow: none; /* Remove default outline */
+    border-color: $input-focus-border-color;
+  }
+}
+
+.select2-container-multi .select2-choices {
+  .select2-search-choice, .select2-search-field {
+    line-height: 1.35; /* Fill height of input */
+  }
+
+  .select2-search-choice {
+    background: $gray-200;
+    border: 0;
+    margin: 2px 0 3px 5px; // adjust the margin to respect the adjusted line height
+  }
+}
+
+.select2-container-multi .select2-search-choice-close {
+  height: 12px; // fix the height to fit the actual content
+  /* Making the vertical position always respect the height of parent */
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.select2-search input {
+  background: white;
+}
+
+.select2-drop {
+  /* Remove default shadow */
+  box-shadow: none;
+
+  &.select2-drop-active,
+  &.select2-drop-active.select2-drop-above {
+    border: $input-btn-border-width solid $input-focus-border-color;
+  }
+
+  &.select2-drop-active {
+    border-top: 0;
+
+    &.select2-drop-above {
+      border-bottom: 0;
+    }
+  }
+}
+
+.select2-results {
+  .select2-no-results, .select2-searching {
+    /* Remove light grey background */
+    background: transparent;
+    line-height: 2.5;
+  }
+
+  .select2-highlighted {
+    background-color: $dropdown-link-hover-bg;
+
+    // Ensure all remote results have correct colors on hover
+    * { color: $dropdown-link-hover-color }
+  }
+}

data/app/assets/stylesheets/spree/backend/plugins/_sortable.scss

@@ -0,0 +1,3 @@
+.sortable-ghost {
+  opacity: 0.4;
+}

data/app/assets/stylesheets/spree/backend/sections/_adjustments.scss

@@ -0,0 +1,3 @@
+.adjustment-ineligible {
+  text-decoration: line-through;
+}

data/app/assets/stylesheets/spree/backend/sections/_bulk_transfer.scss

@@ -0,0 +1,8 @@
+#add-variant-to-transfer {
+  .field {
+    .bulk_add_variant {
+      margin-top: 19px;
+      width: 100%;
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/sections/_image_settings.scss

@@ -0,0 +1,3 @@
+.destroy_style, .destroy_header {
+  float: right;
+}

data/app/assets/stylesheets/spree/backend/sections/_log_entries.scss

@@ -0,0 +1,17 @@
+.log_entry {
+  &.success {
+    background: lighten($color-2, 15);
+
+    td h4 {
+      color: darken($body-color, 25);
+    }
+  }
+
+  &.fail {
+    background: lighten($color-5, 25);
+
+    td h4 {
+      color: lighten($body-color, 50);
+    }
+  }
+}