spree_backend 2.4.10 → 3.0.0.rc1

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

@@ -0,0 +1,70 @@
+.taxon-products-view {
+  ul.taxon {
+    list-style: none;
+    margin-left: -2%;
+    padding: 0;
+    > * {
+      margin-left: 2%;
+    }
+    li.product {
+      position: relative;
+      float: left;
+      width: 18%;
+      margin-bottom: 2%;
+      padding: 8px 8px 5px 8px;
+      border-radius: 4px;
+      background: #f4f4f4;
+      .well {
+        padding-bottom: 12px;
+      }
+      .sort-handle {
+        position: absolute;
+        top: 14px;
+        left: 16px;
+        color: $gray;
+        cursor: move;
+      }
+      .btn-group {
+        display: none;
+        position: absolute;
+        top: 14px;
+        right: 16px;
+        .btn {
+          padding: 2px 7px;
+        }
+        .dropdown-menu {
+          left: auto;
+          right: 0;
+        }
+        a.delete-product {
+          color: red;
+        }
+      }
+      .image {
+        .thumbnail {
+          margin-bottom: 8px;
+          display: inline-block;
+          width: 100%;
+        }
+      }
+      .product-info {
+        margin-bottom: 0.3em;
+        font-size: 0.9em;
+        div.name {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: bold;
+        }
+        div.price {
+          color: $gray;
+        }
+      }
+      &:hover {
+        .btn-group {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+// Colors
+$brand-success: #79B340;
+$brand-primary: #468ABD;
+$black:         #444;
+$grey:          #666;
+$medium-grey:   lighten($grey, 30%);
+$light-grey:    #f5f5f5;
+$color-border:  #CCCCCC;
+
+// Well
+$well-bg:       white;
+$well-border:   $color-border;

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

@@ -0,0 +1,3 @@
+.well {
+  box-shadow: none;
+}

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

@@ -0,0 +1,37 @@
+/*------------------------------------------
+  Colors
+  -----------------------------------------*/
+  $brand-primary: #478DC1;
+  $brand-success: #7DB942;
+  $brand-info:    #48B0F7;
+  $brand-warning: #F8D053;
+  $brand-danger:  #F55753;
+
+  $input-border:  darken(#EDEDED, 5);
+
+/*------------------------------------------
+  Components
+  -----------------------------------------*/
+  $border-radius-base: 2px;
+  $padding-base-vertical: 8px;
+  $padding-base-horizontal: 16px;
+
+/*------------------------------------------
+  Fonts
+  -----------------------------------------*/
+  $headings-font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  $headings-font-weight: 300;
+
+/*------------------------------------------
+  Buttons
+  -----------------------------------------*/
+
+/*------------------------------------------
+  Navbar
+  -----------------------------------------*/
+  $navbar-inverse-bg: darken($brand-primary, 35);
+
+/*------------------------------------------
+  Wells
+  -----------------------------------------*/
+  $well-bg: #fbfbfb;

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

@@ -0,0 +1,109 @@
+.ui-widget {
+  font-family: $headings-font-family;
+  font-size: $font-size-base - 1;
+  font-weight: 400;
+}
+
+#ui-datepicker-div {
+  background-color: white;
+  background-image: none;
+  color: $gray;
+  border-color: $input-border;
+  width: auto;
+  padding: 20px;
+
+  &.ui-corner-all {
+    border-radius: $border-radius-base;
+  }
+
+  .ui-datepicker-header {
+    border-radius: 0;
+    border: none;
+    background-image: none;
+    background-color: transparent;
+  }
+
+  .ui-widget-header .ui-icon {
+    background-color: transparent;
+    background-image: none;
+    text-indent: 0;
+    vertical-align: bottom !important;
+    width: 12px;
+    color: $brand-primary;
+
+    &.ui-icon-circle-triangle-w {
+      @extend .glyphicon;
+      @extend .glyphicon-chevron-left;
+    }
+
+    &.ui-icon-circle-triangle-e {
+      @extend .glyphicon;
+      @extend .glyphicon-chevron-right;
+    }
+  }
+
+  .ui-state-hover {
+    border: none;
+    background-image: none;
+    background-color: transparent;
+    transition: color 0.2s ease-in-out;
+    cursor: pointer;
+    
+    span.ui-icon {
+      color: $brand-success;
+    }
+  }
+
+  .ui-datepicker-next-hover {
+    right: 2;
+  }
+
+  .ui-datepicker-prev-hover {
+    left: 2;
+  }
+
+  .ui-datepicker-title {
+    font-weight: 500;
+    color: $gray;
+  }
+
+  table.ui-datepicker-calendar {
+    th {
+      span {
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: $brand-primary;
+        font-weight: 500;
+      }
+    }
+
+    td {
+      width: 31px;
+      height: 29px;
+      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+
+      .ui-state-default, 
+      .ui-widget-content .ui-state-default, 
+      .ui-widget-header .ui-state-default {
+        background-color: transparent;
+        background-image: none;
+        border: none;
+        text-align: center;
+        font-weight: 300;
+      }
+
+      &:hover {
+        background-color: $gray-lighter;
+      }
+
+      &:active {
+        background-color: $brand-success;
+
+        a {
+          color: white;  
+        }        
+      }
+    }
+  }
+}
+

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

@@ -1,198 +1,127 @@
 .select2-container {
-  &:hover .select2-choice, &.select2-container-active .select2-choice {
-    background-color: $color-sel-hover-bg !important;
-    border-color: $color-sel-hover-bg !important;
-  }
+  display: block;
+
   .select2-choice {
-    background-image: none !important;
-    background-color: $color-sel-bg;
-    border: none !important;
-    box-shadow: none !important;
-    @include border-radius($border-radius);
-    color: $color-1 !important;
-    font-size: 90%;
-    height: 31px;
-    line-height: inherit !important;
-    padding: 5px 15px 7px;
-
-    span {
-      display: block;
-      padding: 2px;
+    height: $input-height-base;
+    line-height: 2.2;
+    border-color: $input-border;
+    background-image: none;
+    background-color: $input-bg;
+
+    &, .select2-arrow {
+      border-radius: $border-radius-base;
     }
 
-    .select2-search-choice-close {
-      @extend .fa;
-      @extend .fa-times;
-      margin-top: 2px;
-      font-size: 100% !important;
-      background-image: none !important;
+    .select2-arrow {
+      background-image: none;
+      background-color: $input-bg;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: $input-border;
+
+      b {
+        background-position: 0 7px;
+      }
     }
-  }
 
-  &.select2-container-active {
-    .select2-choice {
-      box-shadow: none !important;
+    .select2-chosen {
+      line-height: 36px;
+      vertical-align: middle;
+      display: inline;
     }
 
-    &.select2-dropdown-open .select2-choice div b {
-      @extend .fa-caret-up
+    abbr {
+      top: 12px;
     }
   }
 }
 
-.select2-drop {  
-  box-shadow: none !important;
-  z-index: 1000000;
-  max-width: auto !important;
-  border-top: 1px solid;
-  border-color: $color-sel-hover-bg;
-
-  &.select2-drop-above {
-    border-color: $color-sel-hover-bg;
-  }
+.select2-search input {
+  border-color: $input-border;
+  border-radius: $border-radius-base;
 }
 
-.select2-search {
-  @extend .fa; 
-  @extend .fa-search;
-
-  font-size: 100%;
-  color: darken($color-border, 15);
-  padding: 0 9px 0 0;
-
-  &:before {
-    @extend [class^="icon-"]:before;
-
-    position: absolute;
-    top: 16px;
-    left: 13px;
-  }
-
-  input {
-    @extend input[type="text"];
-    margin-top: 5px;
-    margin-left: 4px;
-    padding-left: 25px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    font-family: $base-font-family;
-    font-size: 90%;
+.select2-drop {
+  &, &.select2-drop-above {
+    border-radius: $border-radius-base;
     box-shadow: none;
-    background-image: none;
   }
 }
 
-.select2-container .select2-choice .select2-arrow {
-  background-image: none;
-  background: transparent;
-  border: 0;
-
-  b {
-    padding-top: 7px;
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: none !important;
-    font-family: FontAwesome;
-    font-weight: 200 !important;
-
-    &:before {
-      content: "\f0d7";
-    }
+.select2-container-active {
+  &, & a {
+    box-shadow: none !important;
   }
 }
 
-.select2-results { 
-  padding-left: 0 !important;
-
-  li {
-    font-size: 85% !important;
-
+.select2-dropdown-open.select2-drop-above .select2-choice, 
+.select2-dropdown-open.select2-drop-above .select2-choices {
+  background-image: none;
+}
 
-    &:nth-child(odd) {
-      background: #efefef;
-    }
+.select2-dropdown-open.select2-drop-above .select2-choice {
+  border-radius: 0 0 $border-radius-base $border-radius-base;
+}
 
-    &.select2-highlighted {
-      .select2-result-label {
-        &, h6 {
-          color: $color-1 !important;
-        }
-      }
-    }
+.select2-drop-above,
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open .select2-choice,
+.select2-drop.select2-drop-above.select2-drop-active,
+.select2-drop.select2-drop-active {
+  border-color: lighten($brand-success, 20);
+}
 
-    .select2-result-label {
-      color: $color-body-text;
-      min-height: 22px;
-      clear: both;
-      overflow: auto;
-    }
+.select2-result-label {
+  color: $gray;
+}
 
-    &.select2-no-results, &.select2-searching {
-      padding: 5px;
-      background-color: transparent;
-      color: $color-body-text;
-      text-align: center;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-    }
-  }
+.select2-results .select2-highlighted {
+  background-color: $brand-primary;
 
-  .select2-highlighted {
-    background-color: $color-sel-bg !important;
+  .select2-result-label {
+    color: white;
   }
 }
 
 .select2-container-multi {
-  &.select2-container-active, &.select2-dropdown-open {
-    .select2-choices {
-      border-color: $color-sel-hover-bg !important;
-      box-shadow: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
   .select2-choices {
-    @extend input[type="text"];
-    padding: 6px 3px 3px 3px;
-    box-shadow: none;
-    background-image: none !important;
+    line-height: 1.8;
+    border-color: $input-border;
+    background-image: none;
+    background-color: $input-bg;
 
     .select2-search-choice {
-      @include border-radius($border-radius);
-      margin: 0 0 3px 3px;
-      background-image: none;
-      background-color: $color-sel-bg;
-      border: none;
-      box-shadow: none;
-      color: $color-1 !important;
-      font-size: 85%;
+      @extend .label;
+      @extend .label-info;
 
-      &:hover {
-        background-color: $color-sel-hover-bg;
-      }
+      box-shadow: none;
+      border: none;
+      background-image: none;
+      margin: 5px;
+      padding: 7px;
 
       .select2-search-choice-close {
+        @extend .glyphicon;
+        @extend .glyphicon-remove;
+
         background-image: none !important;
-        font-size: 85% !important;
-        @extend .fa;
-        @extend .fa-times;
-        margin-left: 2px;
-        color: $color-1;
-        &:before {
-          font-size: 11px;
-        }
+        font-size: 100%;
+        color: white !important;
+        position: absolute;
+        left: 7px;
+        top: 7px;
+      }
+
+      div {
+        padding-left: 15px;
       }
     }
   }
-}
 
-label .select2-container {
-  margin-top: -6px;
-  .select2-choice {
-    span {
-      text-transform: none;
-      font-weight: normal;
+  &.select2-container-active {
+    .select2-choices {
+      box-shadow: none;
+      border-color: lighten($brand-success, 20);
     }
   }
-}
+}

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

@@ -0,0 +1,16 @@
+.dropdown.user-menu {
+  a {
+    color: white !important;
+    font-weight: 400;
+  }
+
+  .dropdown-menu {
+    padding: 20px;
+    min-width: 240px;
+    text-align: center;
+
+    a {
+      color: $dropdown-link-color !important;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+body {
+  padding-top: $navbar-height + 2px;
+}
+
+.row {
+  padding: 0 0 15px 0;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.no-padding-bottom {
+  padding-bottom: 0;
+}