spree_backend 2.4.10 → 3.0.0.rc1

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

@@ -0,0 +1,257 @@
+// TODO: Switch everything to use glyphicons
+.icon, .glyphicon {
+  vertical-align: text-top;
+}
+
+// Maps Glyphicons to Spree .icon prefix.
+// You can apply same pattern to extend with more icons.
+//
+// example:
+// glyphicon glyphicon-pencil => icon icon-edit
+//
+
+// All Glyphicons Halflings in Bootstrap v3.3.1.0
+$default_icons: (
+  adjust
+  align-center
+  align-justify
+  align-left
+  align-right
+  arrow-down
+  arrow-left
+  arrow-right
+  arrow-up
+  asterisk
+  backward
+  ban-circle
+  barcode
+  bell
+  bold
+  book
+  bookmark
+  briefcase
+  bullhorn
+  calendar
+  camera
+  certificate
+  check
+  chevron-down
+  chevron-left
+  chevron-right
+  chevron-up
+  circle-arrow-down
+  circle-arrow-left
+  circle-arrow-right
+  circle-arrow-up
+  cloud
+  cloud-download
+  cloud-upload
+  cog
+  collapse-down
+  collapse-up
+  comment
+  compressed
+  copyright-mark
+  credit-card
+  cutlery
+  dashboard
+  download
+  download-alt
+  earphone
+  eject
+  envelope
+  euro
+  exclamation-sign
+  expand
+  export
+  eye-close
+  eye-open
+  facetime-video
+  fast-backward
+  fast-forward
+  file
+  film
+  filter
+  fire
+  flag
+  flash
+  floppy-disk
+  floppy-open
+  floppy-remove
+  floppy-save
+  floppy-saved
+  folder-close
+  folder-open
+  font
+  forward
+  fullscreen
+  gbp
+  gift
+  glass
+  globe
+  hand-down
+  hand-left
+  hand-right
+  hand-up
+  hd-video
+  hdd
+  header
+  headphones
+  heart
+  heart-empty
+  home
+  import
+  inbox
+  indent-left
+  indent-right
+  info-sign
+  italic
+  leaf
+  link
+  list
+  list-alt
+  lock
+  log-in
+  log-out
+  magnet
+  map-marker
+  minus
+  minus-sign
+  move
+  music
+  new-window
+  off
+  ok
+  ok-circle
+  ok-sign
+  open
+  paperclip
+  pause
+  pencil
+  phone
+  phone-alt
+  picture
+  plane
+  play
+  play-circle
+  plus
+  plus-sign
+  print
+  pushpin
+  qrcode
+  question-sign
+  random
+  record
+  refresh
+  registration-mark
+  remove
+  remove-circle
+  remove-sign
+  repeat
+  resize-full
+  resize-horizontal
+  resize-small
+  resize-vertical
+  retweet
+  road
+  saved
+  screenshot
+  sd-video
+  search
+  send
+  share
+  share-alt
+  shopping-cart
+  signal
+  sort
+  sort-by-alphabet
+  sort-by-alphabet-alt
+  sort-by-attributes
+  sort-by-attributes-alt
+  sort-by-order
+  sort-by-order-alt
+  sound-5-1
+  sound-6-1
+  sound-7-1
+  sound-dolby
+  sound-stereo
+  star
+  star-empty
+  stats
+  step-backward
+  step-forward
+  stop
+  subtitles
+  tag
+  tags
+  tasks
+  text-height
+  text-width
+  th
+  th-large
+  th-list
+  thumbs-down
+  thumbs-up
+  time
+  tint
+  tower
+  transfer
+  trash
+  tree-conifer
+  tree-deciduous
+  unchecked
+  upload
+  usd
+  user
+  volume-down
+  volume-off
+  volume-up
+  warning-sign
+  wrench
+  zoom-in
+  zoom-out
+);
+
+// We prefer alias/remap these so its easy to understand which icon to use.
+// Note: If desired alias exist as default, then remove it from default Array,
+//       or write a smarter @each scope below that can actually override.
+// ==========> default | alias
+$alias_icons: (plus add)
+              (pencil edit)
+              (ok capture)
+              (remove void)
+              (bullhorn promotion)
+              (share return)
+              (send shipment)
+              (share clone)
+              (refresh update)
+              (remove cancel)
+              (resize-full split)
+              (ok save)
+              (eye-open show)
+              (remove delete)
+              (minus refund)
+              (th-large products)
+              (th-large variants)
+              (picture images)
+              (tag properties)
+              (inbox stock)
+              (usd money)
+              (globe translate)
+              (ok approve);
+
+.icon {
+  @extend .glyphicon;
+
+  // Map defaults.
+  @each $icon in $default_icons {
+    &.icon-#{$icon} { @extend .glyphicon-#{$icon}; }
+  }
+
+  // Map and override with aliases.
+  @each $map in $alias_icons {
+    $icon:  nth($map, 1);
+    $alias: nth($map, 2);
+    &.icon-#{$alias} { @extend .glyphicon-#{$icon}; }
+  }
+}

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

@@ -0,0 +1,49 @@
+// Green
+.label-completed,
+.label-complete,
+.label-considered_safe,
+.label-paid,
+.label-shipped,
+.label-ready,
+.label-active,
+.label-success,
+.label-sold
+{
+  background-color: $brand-success;
+
+  a {
+    color: white !important;
+  }
+}
+
+// Red
+.label-failed,
+.label-considered_risky,
+.label-error {
+  background-color: $brand-danger;
+}
+
+// Orange
+.label-pending,
+.label-awaiting_return,
+.label-returned,
+.label-credit_owed,
+.label-balance_due,
+.label-backorder,
+.label-checkout,
+.label-cart,
+.label-address,
+.label-delivery,
+.label-payment,
+.label-confirm,
+.label-canceled,
+.label-void,
+.label-inactive,
+.label-notice,
+.label-partial {
+  background-color: $brand-warning;
+
+  a {
+    color: white !important;
+  }
+}

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

@@ -0,0 +1,5 @@
+#main-part {
+  &.sidebar-collapsed {
+    padding-left: 65px;
+  }
+}

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

@@ -1,169 +1,14 @@
-// Navigation
-//---------------------------------------------------
-.inline-menu {
+#sidebar-toggle {
+  display: block;
+  border: none;
+  padding: 0;
   margin: 0;
-  -webkit-margin-before: 0;
-  -webkit-padding-start: 0;
+  position: absolute;
+  right: 0;
+  margin-top: 17px;
+  cursor: pointer;
 }
 
-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;
-      }
-
-      &.fa:before {
-        padding-right: 4px;
-      }
-
-      &:hover {
-        i {
-          color: $color-2;
-        }
-      }
-    }
-  }
-}
-
-#admin-menu {
-  background-color: $color-3;
-
-  ul{
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  li {
-    display: table-cell;
-
-    a {
-      display: block;
-      padding: 25px 15px;
-      color: $color-1 !important;
-      text-transform: uppercase;
-      position: relative;
-      text-align: center;
-
-      @media(max-width: 1009px) {
-        top: -3px;
-        margin-bottom: -5px;
-      }
-
-      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;
-        }
-      }
-
-      span.text {
-        font-weight: 600;
-      }
-    }
-
-    .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;
+.navbar .row {
   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/spree/backend/components/_page_header.scss

@@ -0,0 +1,17 @@
+.content-header.page-header {
+  margin-top: 15px;
+
+  h1 {
+    font-size: $font-size-h1 / 1.5;
+    margin: 0;
+    line-height: 38px;
+  }
+
+  .page-actions {
+    text-align: right;
+
+    form {
+      display: inline-block
+    }
+  }
+}

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

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

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

@@ -1,26 +1,122 @@
-// Sidebar
-//---------------------------------------------------
-#sidebar {
+#main-sidebar {
+  position: fixed;
+  top: $navbar-height + 2px;
+  bottom: 0;
+  left: 0;
+  padding: 0;
+  z-index: 1000;
+  display: block;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+  background-color: lighten($gray-lighter, 5);
+  border-right: 1px solid darken($gray-lighter, 5);
+
+  a {
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+  }
+
+  ul.nav-sidebar {
+    > li {
+      border-bottom: 1px solid $gray-lighter;
+
+      > a {
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 12px;
+        font-weight: 500;
+        padding: 15px;
+        color: $gray;
+
+        .glyphicon {
+          font-size: 18px;
+          vertical-align: bottom;
+          padding-right: 5px;
+        }
+
+        .glyphicon.pull-right {
+          font-size: 8px;
+          line-height: 2;
+          color: $gray-light;
+          position: absolute;
+          right: 5px;
+          top: 50%;
+          margin-top: -8px;
+        }
+      }
+    }
+  }
+
+  ul.nav.nav-pills {
+    background-color: white;
+    border-top: 1px solid $gray-lighter;
+
+    li {
+      a {
+        padding: 5px 15px;
+        font-size: 12px;
+
+        &:hover {
+          border-radius: 0;
+        }
+      }
+
+      &.selected {
+        a {
+          color: $brand-success
+        }
+      }
+    }
+  }
+}
+
+#wrapper.sidebar-minimized #main-sidebar {
+  width: 50px;
   overflow: visible;
-  border-top: 1px solid $color-border;
-  margin-top: 17px;
 
-  .sidebar-title {
-    color: $color-2;
-    text-transform: uppercase;
+  li {
+    &:hover, &.menu-active {
+      background-color: $gray-lighter;
+    }
+  }
+
+  .icon-link, [data-toggle="collapse"] {
     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;
-      -moz-osx-font-smoothing: grayscale;
+
+    .icon {
+      padding: 0;
     }
+
+    .text, .icon-chevron-left, .icon-chevron-down {
+      display: none;
+    }
+  }
+
+  ul.collapse.in {
+    display: none;
+  }
+
+  .submenu-active {
+    display: block !important;
+    height: auto !important;
+    position: fixed;
+    top: $navbar-height + 2px;
+    bottom: 0;
+    left: 0;
+    padding: 0;
+    z-index: 1000;
+    display: block;
+    overflow-x: hidden;
+    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+    left: 50px;
+    min-width: 180px;
+    visibility: visible;
+    background-color: lighten($gray-lighter, 5);
+    border-top: none;
+    border-right: 1px solid darken($gray-lighter, 5);
+    padding-top: 5px;
   }
 }

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

@@ -0,0 +1,51 @@
+table.table {
+  thead {
+    th {
+      text-transform: uppercase;
+      font-size: $font-size-base - 3px;
+      padding-top: 14px;
+      padding-bottom: 14px;
+      vertical-align: middle;
+      letter-spacing: 1px;
+
+      a {
+        .glyphicon {
+          padding-left: 5px;
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        vertical-align: middle;
+        .filterable {
+          font-size: 0.8em;
+          margin-left: 0.2em;
+          color: white; // hidden, but space is reserved for the icon
+          cursor: pointer;
+        }
+      }
+      &:hover td .filterable {
+        color: #666;
+      }
+    }
+  }
+}
+
+.table-active-filters {
+  display: none;
+  margin: -0.5em 0 0.9em 0;
+  .label {
+    margin-right: 0.5em;
+    font-size: 85%;
+    &:hover {
+      opacity: 0.8;
+    }
+    span.icon {
+      margin: 0.3em 0 0 0.6em;
+      font-size: 80%;
+      cursor: pointer;
+    }
+  }
+}