spree_backend 2.0.0.rc1

data/app/assets/stylesheets/admin/components/_navigation.scss

@@ -0,0 +1,150 @@
+// Navigation
+//---------------------------------------------------
+.inline-menu { 
+  margin: 0;
+  -webkit-margin-before: 0;
+  -webkit-padding-start: 0;
+}
+
+nav.menu {
+  ul {
+    list-style: none;      
+
+    li {
+      a {
+        padding: 10px 0;
+        display: block;
+        position: relative;
+        text-align: left;
+        border: 1px solid transparent;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 90%;
+      }
+
+      &.active a {
+        color: $color-2;
+        border-left-width: 0;          
+        border-bottom-color: $color-2;
+      }
+
+      &:hover a {
+        color: $color-2;
+      }
+    }      
+  }
+}
+
+[data-hook="admin_login_navigation_bar"] {
+  ul {
+    text-align: right;
+
+    li {
+      padding: 5px 0 5px 10px;
+      text-align: right;
+      font-size: 90%;
+      color: $color-link;
+      margin-top: 8px;
+
+      &[data-hook="user-logged-in-as"] {
+        width: 50%;
+        color: $color-body-text;
+      }
+
+      &:hover {
+        i {
+          color: $color-2;
+        }
+      }
+    }
+  }
+}
+
+#admin-menu {
+  background-color: $color-3;
+
+  li {
+    min-width: 90px;
+
+    a {
+      display: block;
+      padding: 25px 20px;
+      color: $color-1 !important;
+      text-transform: uppercase;
+      position: relative;
+      text-align: center;
+
+      i {
+        display: inline;
+      }
+
+      &:hover {
+        background-color: $color-2;
+
+        &:after {
+          content: '';
+          position: absolute;
+          border-left: 10px solid transparent;
+          border-right: 10px solid transparent;
+          border-top: 5px solid $color-2;          
+          bottom: 0px;
+          margin-bottom: -5px;
+          left: 50%;
+          margin-left: -10px;
+          z-index: 1;
+        }
+      }
+    }
+
+    .dropdown {
+      width: 300px;
+      background-color: $color-3;
+      width: 200px;
+      z-index: 100000;
+
+      > li {
+        width: 200px !important;
+
+        a:after {
+          display: none;
+        }
+      }
+    }
+
+    &.selected a {
+      @extend a:hover;
+    }
+  }
+}
+
+#sub-menu {
+  background-color: $color-2;
+  padding-bottom: 0;
+
+  li {
+    a {
+      display: block;
+      padding: 12px 20px;
+      color: $color-1;      
+      text-align: center;
+      text-transform: uppercase;
+      position: relative;
+      font-size: 85%;      
+    }
+
+    &.selected a, a:hover {
+      &:after {
+        content: '';
+        position: absolute;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 5px solid $color-2;
+        bottom: 0px;
+        margin-bottom: -5px;
+        left: 50%;
+        margin-left: -10px;
+        z-index: 1;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/admin/components/_pagination.scss

@@ -0,0 +1,17 @@
+.pagination {
+  padding: 10px 0;
+  text-align: center;
+
+  .page {
+    padding: 5px 8px;
+    text-align: center;
+    display: inline-block;
+    text-align: center;
+
+    &.current {
+      background-color: $color-2;
+      border-radius: 3px;
+      color: $color-1;
+    }
+  }
+}

data/app/assets/stylesheets/admin/components/_product_autocomplete.scss

@@ -0,0 +1,29 @@
+.select2-result-label {
+  .variant-autocomplete-item {
+    .variant-details {
+      padding: 0 10px;
+      float: left;
+    }
+
+    .variant-image {
+      margin-top: 5px;
+      background-color: white;
+      float: left;
+      margin-right: 10px;
+    }
+
+    ul.variant-details {
+      li {
+        display: inline-block;
+
+        &:after {
+          content: ' / ';
+        }
+
+        &:last-child:after {
+          content: '';
+        } 
+      }
+    }
+  }
+}

data/app/assets/stylesheets/admin/components/_progress.scss

@@ -0,0 +1,35 @@
+#progress { 
+  display: none;
+  position: fixed;
+  top: 0;  
+  z-index: 1000;
+  opacity: 0.8;
+  width: 100%;
+
+  .wrapper {
+    @include border-radius(10px);
+    top: -10px;
+    position: absolute;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    padding: 11px 0;
+    background-color: $color-3;
+    color: $color-1;
+    text-align: center;
+  }
+
+  #spinner {    
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    margin-left: -5px;
+  }
+
+  .progress-message {
+    font-size: 120%;
+    font-weight: $font-weight-bold;
+    margin-top: 20px;
+    text-transform: uppercase;
+  }
+}

data/app/assets/stylesheets/admin/components/_sidebar.scss

@@ -0,0 +1,24 @@
+// Sidebar
+//---------------------------------------------------
+#sidebar {
+  overflow: visible;
+  border-top: 1px solid $color-border;
+  margin-top: 17px;
+
+  .sidebar-title {
+    color: $color-2;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+
+    > span {
+      display: inline;
+      background: #fff;
+      padding: 5px 10px;
+      position: relative;
+      top: -14px;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+}

data/app/assets/stylesheets/admin/components/_states.scss

@@ -0,0 +1,34 @@
+.state {
+  text-transform: uppercase;
+  font-size: 80%;
+  font-weight: 600;
+
+  &:before {
+    content: '';
+    position: relative;
+    display: inline-block;
+    margin-right: 3px;
+    border-radius: $body-font-size/2;
+    width: $body-font-size - 4px;
+    height: $body-font-size - 4px;
+  }
+
+  @each $state in $states {
+    &.#{$state}:before {
+      background-color: get-value($states, $states-bg-colors, $state);
+
+      // &, a {
+      //   color: get-value($states, $states-text-colors, $state);
+      // }
+    }
+  }
+}
+
+table tbody tr {
+  &[class*="state"] td:first-child {
+    border-left-width: 3px;
+  }
+  &.state-complete td:first-child { border-left-color: $color-success }
+  &.state-cart     td:first-child { border-left-color: very-light($color-notice, 6) }
+  &.state-canceled td:first-child { border-left-color: $color-error }
+}

data/app/assets/stylesheets/admin/components/_table-filter.scss

@@ -0,0 +1,14 @@
+#table-filter {
+
+  .field {
+    input[type="text"], input[type="phone"],
+    input[type="email"], input[type="number"],
+    input[type="url"] {
+      width: 100%;
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/admin/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/admin/globals/_mixins.scss

@@ -0,0 +1,25 @@
+//************************************************************************//
+// Default: Webkit, moz, spec
+// Example: @include prefixer(border-radius, $radii, $o: true);
+//
+// Source : https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_prefixer.scss
+//************************************************************************//
+@mixin prefixer ($property, $value,
+                 $webkit: true,
+                    $moz: true,
+                     $ms: false,
+                      $o: false,
+                   $spec: true) {
+  @if $webkit { -webkit-#{$property}: $value; }
+  @if $moz    {    -moz-#{$property}: $value; }
+  @if $ms     {     -ms-#{$property}: $value; }
+  @if $o      {      -o-#{$property}: $value; }
+  @if $spec   {         #{$property}: $value; }
+}
+
+//************************************************************************//
+// Source : https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-radius.scss
+//************************************************************************//
+@mixin border-radius ($radii) {
+  @include prefixer(border-radius, $radii, webkit, moz, ms, o);
+}

data/app/assets/stylesheets/admin/globals/_variables.scss

@@ -0,0 +1,142 @@
+// -------------------------------------------------------------
+//   Variables used in all other files
+//--------------------------------------------------------------
+
+// Fonts
+//--------------------------------------------------------------
+$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+
+// 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
+
+// Body base colors
+$color-body-bg:                  $color-1 !default;
+$color-body-text:                $color-4 !default;
+$color-headers:                  $color-4 !default;
+$color-link:                     $color-3 !default;
+$color-link-hover:               $color-2 !default;
+$color-link-active:              $color-2 !default;
+$color-link-focus:               $color-2 !default;
+$color-link-visited:             $color-3 !default;
+$color-border:                   very-light($color-3, 12) !default;
+
+// Basic flash colors
+$color-success:                  $color-2 !default;
+$color-notice:                   $color-6 !default;
+$color-error:                    $color-5 !default;
+
+// 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;
+
+// Button colors
+$color-btn-bg:                   $color-3 !default;
+$color-btn-text:                 $color-1 !default;
+$color-btn-hover-bg:             $color-2 !default;
+$color-btn-hover-text:           $color-1 !default;
+
+// 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;
+
+// Select2 select field colors
+$color-sel-bg:                   $color-3 !default;
+$color-sel-text:                 $color-1 !default;
+$color-sel-hover-bg:             $color-2 !default;
+$color-sel-hover-text:           $color-1 !default;
+
+// Text inputs colors
+$color-txt-brd:                  $color-border !default;
+$color-txt-text:                 $color-3 !default;
+$color-txt-hover-brd:            $color-2 !default;
+
+// States label colors
+$color-ste-complete-bg:       $color-success !default;
+$color-ste-complete-text:     $color-1 !default;
+$color-ste-completed-bg:      $color-success !default;
+$color-ste-completed-text:    $color-1 !default;
+$color-ste-sold-bg:           $color-success !default;
+$color-ste-sold-text:         $color-1 !default;
+$color-ste-pending-bg:        $color-notice !default;
+$color-ste-pending-text:      $color-1 !default;
+$color-ste-paid-bg:           $color-success !default;
+$color-ste-paid-text:         $color-1 !default;
+$color-ste-shipped-bg:        $color-success !default;
+$color-ste-shipped-text:      $color-1 !default;
+$color-ste-balance_due-bg:    $color-notice !default;
+$color-ste-balance_due-text:  $color-1 !default;
+$color-ste-backorder-bg:      $color-notice !default;
+$color-ste-backorder-text:    $color-1 !default;
+$color-ste-none-bg:           $color-error !default;
+$color-ste-none-text:         $color-1 !default;
+$color-ste-ready-bg:          $color-success !default;
+$color-ste-ready-text:        $color-1 !default;
+$color-ste-void-bg:           $color-error !default;
+$color-ste-void-text:         $color-1 !default;
+$color-ste-canceled-bg:       $color-error !default;
+$color-ste-canceled-text:     $color-1 !default;
+$color-ste-address-bg:        $color-error !default;
+$color-ste-address-text:      $color-1 !default;
+$color-ste-checkout-bg:       $color-notice !default;
+$color-ste-checkout-text:     $color-1 !default;
+$color-ste-cart-bg:           $color-notice !default;
+$color-ste-cart-text:         $color-1 !default;
+$color-ste-payment-bg:        $color-error !default;
+$color-ste-payment-text:      $color-1 !default;
+$color-ste-delivery-bg:       $color-success !default;
+$color-ste-delivery-text:     $color-1 !default;
+$color-ste-confirm-bg:        $color-error !default;
+$color-ste-confirm-text:      $color-1 !default;
+$color-ste-active-bg:         $color-success !default;
+$color-ste-active-text:       $color-1 !default;
+$color-ste-inactive-bg:       $color-notice !default;
+$color-ste-inactive-text:     $color-1 !default;
+
+// Avaliable states
+$states:                      completed,                 complete,                 sold,                 pending,                 paid,                 shipped,                 balance_due,                 backorder,                 checkout,                 cart,                 address,                 delivery,                 payment,                 confirm,                 canceled,                 ready,                 void,                 active,                 inactive  !default;
+$states-bg-colors:            $color-ste-completed-bg,   $color-ste-complete-bg,   $color-ste-sold-bg,   $color-ste-pending-bg,   $color-ste-paid-bg,   $color-ste-shipped-bg,   $color-ste-balance_due-bg,   $color-ste-backorder-bg,   $color-ste-checkout-bg,   $color-ste-cart-bg,   $color-ste-address-bg,   $color-ste-delivery-bg,   $color-ste-payment-bg,   $color-ste-confirm-bg,   $color-ste-canceled-bg,   $color-ste-ready-bg,   $color-ste-void-bg,   $color-ste-active-bg,   $color-ste-inactive-bg  !default;
+$states-text-colors:          $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text, $color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirm-text, $color-ste-canceled-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-active-text, $color-ste-inactive-text !default;
+
+// Avaliable actions
+$actions:                        edit,                   clone,                   remove,                   void,                   capture,                   save,                      cancel,                   mail  !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  !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 !default;
+
+// Sizes
+//--------------------------------------------------------------
+$body-font-size:                 13px !default;
+
+$h6-size:                        $body-font-size + 2 !default;
+$h5-size:                        $h6-size + 2 !default;
+$h4-size:                        $h5-size + 2 !default;
+$h3-size:                        $h4-size + 2 !default;
+$h2-size:                        $h3-size + 2 !default;
+$h1-size:                        $h2-size + 2 !default;
+
+$border-radius:                  3px !default;
+
+$font-weight-bold:               600 !default;
+$font-weight-normal:             400 !default;