solidus_backend 2.1.1 → 2.2.0.beta1

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

@@ -1,5 +1,5 @@
 .style-guide {
-  @include display(flex);
+  display: flex;
 
   &-sidebar {
     width: 225px;
@@ -23,7 +23,7 @@
   }
 
   &-main-content {
-    @include flex(1);
+    flex: 1;
   }
 
   ul {
@@ -78,7 +78,7 @@
     text-transform: capitalize;
 
     span {
-      background: $color-body-bg;
+      background: $body-bg;
       @include padding(null 0.5em);
     }
 
@@ -109,12 +109,12 @@
 }
 
 .color-variables {
-  @include display(flex);
-  @include flex-wrap(wrap);
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .color-variable {
-  @include flex-shrink(0);
+  flex-shrink: 0;
   width: 240px;
   padding: 1rem;
 

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

@@ -36,7 +36,7 @@
   .sortable-handle {
     background-color: very-light($color-3);
     border: 1px solid $color-border;
-    color: $color-body-text;
+    color: $body-color;
     font-weight: $font-weight-bold;
     padding: 0.5em;
     cursor: move;

data/app/assets/stylesheets/spree/backend/shared/_forms.scss

@@ -7,19 +7,28 @@ input[type="time"],
 input[type="url"],
 input[type="number"],
 input[type="tel"],
-textarea, fieldset {
-  padding: 7px 10px;
-  border: 1px solid $color-txt-brd;
-  border-radius: $border-radius;
-  color: $color-txt-text;
-  font-size: 90%;
+textarea {
+  padding: $input-padding-y $input-padding-x;
+  color: $input-color;
+  border: $input-btn-border-width solid $input-border-color;
+  border-radius: $input-border-radius;
+  background: $input-bg;
+  font-size: $font-size-base;
+  line-height: $input-line-height;
 
   &:focus {
-    border-color: $color-txt-hover-brd;
+    border-color: $input-border-focus;
+    outline: 0;
   }
 
-  &[disabled] {
-    opacity: 0.7;
+  &:disabled {
+    background: $input-bg-disabled;
+  }
+
+  &::placeholder {
+    color: $input-color-placeholder;
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
   }
 }
 
@@ -31,45 +40,6 @@ textarea {
   width: 100%;
 }
 
-.input-group {
-  position: relative;
-  display: table;
-  border-collapse: separate;
-
-  .form-control,
-  .input-group-addon {
-    display: table-cell;
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  .form-control {
-    width: 100%;
-  }
-
-  .input-group-addon {
-    padding: 6px 10px;
-    border: 1px solid #cee1f4;
-    background: #eff5fc;
-    border-radius: 3px;
-
-    &:first-child {
-      border-right: none;
-    }
-
-    &:last-child {
-      border-left: none;
-    }
-  }
-}
-
 label {
   font-weight: $font-weight-bold;
   font-size: 90%;
@@ -95,31 +65,13 @@ label {
 input[type="submit"],
 input[type="button"],
 button, .button {
-  display: inline-block;
-  padding: 6px 15px;
-  border: none;
-  border-radius: $border-radius;
-  background-color: $color-btn-bg;
-  color: $color-btn-text;
-  font-weight: $font-weight-bold !important;
-  white-space: nowrap;
-  line-height: $line-height;
+  @extend .btn;
+  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 
   &:before {
     font-weight: normal !important;
   }
 
-  &:visited, &:active, &:focus { color: $color-btn-text }
-
-  &:hover {
-    background-color: $color-btn-hover-bg;
-    color: $color-btn-hover-text;
-  }
-
-  &:active:focus {
-    box-shadow: 0 0 8px 0 darken($color-btn-hover-bg, 5) inset;
-  }
-
   &.fullwidth {
     width: 100%;
     text-align: center;
@@ -128,7 +80,7 @@ button, .button {
 
 span.info {
   font-size: 85%;
-  color: lighten($color-body-text, 15);
+  color: lighten($body-color, 15);
   display: block;
   line-height: 20px;
   margin: 5px 0;
@@ -142,8 +94,8 @@ span.info {
 
   &.checkbox {
     min-height: 73px;
-    @include display(flex);
-    @include align-items(center);
+    display: flex;
+    align-items: center;
 
     input[type="checkbox"] {
       display: inline-block;
@@ -179,40 +131,32 @@ span.info {
   &.withError {
     .field_with_errors {
       label {
-        color: very-light($color-error, 30);
+        color: very-light($brand-danger, 30);
       }
 
       input {
-        border-color: very-light($color-error, 15);
+        border-color: very-light($brand-danger, 15);
       }
     }
     .formError {
-      color: very-light($color-error, 30);
+      color: very-light($brand-danger, 30);
       font-style: italic;
       font-size: 85%;
     }
     .select2-container {
       border-radius: 4px;
-      border: 1px solid very-light($color-error, 15);
+      border: 1px solid very-light($brand-danger, 15);
     }
   }
 }
 
 fieldset {
-  box-shadow: none;
-  box-sizing: border-box;
-  border-color: $color-border;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  margin-left: 0;
-  margin-right: 0;
+  border: 1px solid $color-border;
   position: relative;
   margin-bottom: 35px;
   padding: 10px 0 15px 0;
-  background-color: transparent;
   border-left: none;
   border-right: none;
-  border-radius: 0;
 
   &.no-border-bottom {
     border-bottom: none;
@@ -225,7 +169,6 @@ fieldset {
   }
 
   legend {
-    background-color: $color-1;
     color: $color-2;
     font-size: 16px;
     font-weight: $font-weight-bold;
@@ -237,12 +180,12 @@ fieldset {
     -moz-osx-font-smoothing: grayscale;
 
     i {
-      color: $color-link;
+      color: $link-color;
     }
   }
 
   label {
-    color: lighten($color-body-text, 8);
+    color: lighten($body-color, 8);
   }
 
   .filter-actions {
@@ -255,17 +198,7 @@ fieldset {
     }
 
     button, .button, input[type="submit"], input[type="button"] {
-      border-radius: $border-radius;
-
-      -webkit-box-shadow: 0 0 0 15px $color-1;
-         -moz-box-shadow: 0 0 0 15px $color-1;
-          -ms-box-shadow: 0 0 0 15px $color-1;
-           -o-box-shadow: 0 0 0 15px $color-1;
-              box-shadow: 0 0 0 15px $color-1;
-
-      &:hover {
-        border-color: $color-1;
-      }
+      box-shadow: 0 0 0 15px $body-bg;
     }
 
     // Always make sure the choices at the bottom of a fieldset are spaced out
@@ -273,31 +206,6 @@ fieldset {
       margin-left: 2em;
     }
   }
-
-  &.labels-inline {
-    .field {
-      margin-bottom: 0;
-      display: table;
-      width: 100%;
-
-      label, input {
-        display: table-cell !important;
-      }
-      input {
-        width: 100%;
-      }
-
-      &.checkbox {
-        input {
-          width: auto !important
-        }
-      }
-    }
-    .actions {
-      padding: 0;
-      text-align: right;
-    }
-  }
 }
 
 .form-actions {

data/app/assets/stylesheets/spree/backend/shared/_header.scss

@@ -1,9 +1,10 @@
 .main-header {
-  @include display(flex);
-  @include align-items(center);
-  padding: 15px $grid-gutter-width;
+  display: flex;
+  align-items: center;
+  padding: 15px map-get($grid-gutter-widths, "xl");
   background-color: very-light($color-3, 4);
   border-bottom: 1px solid $color-border;
+  height: $main-header-height;
 
   body:not(.new-layout) & {
     margin-left: $width-sidebar;
@@ -25,7 +26,7 @@
 }
 
 .header-actions {
-  @include flex-grow(1);
+  flex-grow: 1;
   text-align: right;
   line-height: 38px;
 

data/app/assets/stylesheets/spree/backend/shared/_icons.scss

@@ -51,5 +51,5 @@ button, a {
 
 // Avoid ugly default browser font (usually a serif) when an element has an icon AND text
 .fa {
-  font-family: "FontAwesome", $base-font-family !important;
+  font-family: "FontAwesome", $font-family-base !important;
 }

data/app/assets/stylesheets/spree/backend/shared/_images.scss

@@ -0,0 +1,7 @@
+// Have all images be responsive by default
+img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+  -ms-interpolation-mode: bicubic;
+}

data/app/assets/stylesheets/spree/backend/shared/_layout.scss

@@ -14,9 +14,6 @@ body {
 .admin-nav {
   @include position(absolute, 0 null 0 0);
   width: $width-sidebar;
-  img {
-    max-width: 100%;
-  }
   @media print { display: none }
 }
 
@@ -27,7 +24,7 @@ body {
   }
 
   body.new-layout & {
-    @include padding(1rem $grid-gutter-width null);
+    @include padding(1rem map-get($grid-gutter-widths, "xl") null);
   }
 
   &.centered {
@@ -36,27 +33,20 @@ body {
   }
 }
 
-.content {
-  @include make-row();
-}
-
 .content-main {
-  @include make-col();
-  @include make-col-span(12);
+  @include make-col(12);
   overflow-x: hidden; // makes sure that the tabs are able to resize
 
   .has-sidebar & {
-    @include make-col-span(9);
+    @include make-col(9);
   }
 }
 
 .content-sidebar {
-  @include make-col();
-  @include make-col-span(3);
+  @include make-col(3);
 }
 
 #content {
-  background-color: $color-1;
   position: relative;
   z-index: 0;
   padding: 0;

data/app/assets/stylesheets/spree/backend/shared/_tables.scss

@@ -1,10 +1,9 @@
 table {
-  width: 100%;
-  margin-bottom: 15px;
-  border-collapse: separate;
+  // Extend all tables with Bootstrap's default table style
+  @extend .table;
+  border-spacing: 0;
 
   th, td {
-    padding: 7px 5px;
     border-right: 1px solid $color-border;
     border-bottom: 1px solid $color-border;
     vertical-align: middle;
@@ -19,10 +18,10 @@ table {
     }
 
     a {
-      border-bottom: 1px dotted lighten($color-link, 10);
+      border-bottom: 1px dotted lighten($link-color, 10);
 
       &:hover {
-        border-color: lighten($color-link-hover, 10);
+        border-color: lighten($link-hover-color, 10);
       }
     }
 
@@ -38,7 +37,7 @@ table {
       text-align: center;
 
       span.text {
-        font-size: $body-font-size;
+        font-size: $font-size-base;
       }
 
       [class*='fa-'].no-text {
@@ -64,12 +63,12 @@ table {
       }
 
       button[class*='fa-'] {
-        color: $color-link;
+        color: $link-color;
         padding: 0 !important;
       }
 
       .fa-envelope-alt, .fa-eye-open {
-        color: $color-link;
+        color: $link-color;
         padding-left: 0px;
 
         &:hover {
@@ -78,27 +77,27 @@ table {
         }
       }
       .fa-trash:hover, .fa-void:hover, .fa-failure:hover {
-        background-color: $color-error;
+        background-color: $brand-danger;
         color: $color-1;
       }
       .fa-cancel:hover {
-        background-color: $color-notice;
+        background-color: $brand-warning;
         color: $color-1;
       }
       .fa-edit:hover, .fa-capture:hover, .fa-ok:hover, .fa-plus:hover, .fa-save:hover {
-        background-color: $color-success;
+        background-color: $brand-success;
         color: $color-1;
       }
       .fa-copy:hover {
-        background-color: $color-notice;
+        background-color: $brand-warning;
         color: $color-1;
       }
       .fa-thumbs-up:hover {
-        background-color: $color-success;
+        background-color: $brand-success;
         color: $color-1;
       }
       .fa-thumbs-down:hover {
-        background-color: $color-error;
+        background-color: $brand-danger;
         color: $color-1;
       }
     }
@@ -128,15 +127,18 @@ table {
 
   }
 
+  th:not(.wrap-text), td.actions, td.no-wrap, .state {
+    white-space: nowrap;
+  }
+
   thead {
     th {
-      padding: 10px;
       border-top: 1px solid $color-border;
       border-bottom: none;
       background-color: $color-tbl-thead;
       text-align: center;
-      font-size: 90%;
       font-weight: $font-weight-bold;
+      vertical-align: top;
     }
   }
 
@@ -163,8 +165,8 @@ table {
       }
 
       &.deleted td {
-        background-color: very-light($color-error, 6);
-        border-color: very-light($color-error, 15);
+        background-color: very-light($brand-danger, 6);
+        border-color: very-light($brand-danger, 15);
       }
 
       &.ui-sortable-placeholder td {
@@ -197,18 +199,5 @@ table {
     &.no-border-top tr:first-child td {
       border-top: none;
     }
-
-    &.grand-total {
-      td {
-        border-color: $color-2 !important;
-        font-size: 110%;
-        font-weight: $font-weight-bold;
-        background-color: lighten($color-2, 50);
-      }
-      .total {
-        background-color: $color-2;
-        color: $color-1;
-      }
-    }
   }
 }