From f61258d0b4d57bed2bf4ac317ea48e8962dd3690 Mon Sep 17 00:00:00 2001
From: luisramos0 <luisramos0@gmail.com>
Date: Fri, 20 Dec 2019 10:18:48 +0000
Subject: [PATCH] Bring components css from spree_backend

pagination and navigation rules were merged
---
 .../stylesheets/admin/components/actions.scss |  31 ++++
 .../admin/components/admin-menu.css.scss      |  12 --
 .../admin/components/messages.scss            |  43 +++++
 .../admin/components/navigation.scss          | 160 ++++++++++++++++++
 .../admin/components/pagination.scss          |  14 ++
 .../stylesheets/admin/components/sidebar.scss |  26 +++
 .../stylesheets/admin/components/states.scss  |  34 ++++
 .../admin/components/table-filter.scss        |  14 ++
 8 files changed, 322 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/stylesheets/admin/components/actions.scss
 delete mode 100644 app/assets/stylesheets/admin/components/admin-menu.css.scss
 create mode 100644 app/assets/stylesheets/admin/components/messages.scss
 create mode 100644 app/assets/stylesheets/admin/components/navigation.scss
 create mode 100644 app/assets/stylesheets/admin/components/sidebar.scss
 create mode 100644 app/assets/stylesheets/admin/components/states.scss
 create mode 100644 app/assets/stylesheets/admin/components/table-filter.scss

diff --git a/app/assets/stylesheets/admin/components/actions.scss b/app/assets/stylesheets/admin/components/actions.scss
new file mode 100644
index 0000000000..1aeac5e630
--- /dev/null
+++ b/app/assets/stylesheets/admin/components/actions.scss
@@ -0,0 +1,31 @@
+table tbody tr {
+  &.highlight {
+
+    @each $action in $actions {
+      &.action-#{$action} td {
+        background-color: get-value($actions, $actions-bg-colors, $action);
+        border-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+
+    &.action-remove td, &.action-void td {
+      text-decoration: line-through;
+
+      &.actions {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.before-highlight {
+    @each $action in $actions {
+      &.action-#{$action} td {
+        border-bottom-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+  }
+
+  td.actions {
+    background-color: transparent !important;
+  }
+}
diff --git a/app/assets/stylesheets/admin/components/admin-menu.css.scss b/app/assets/stylesheets/admin/components/admin-menu.css.scss
deleted file mode 100644
index fd31bcda1c..0000000000
--- a/app/assets/stylesheets/admin/components/admin-menu.css.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-#admin-menu {
-  li {
-    a {
-      font-weight: 600;
-    }
-
-    a::before {
-      font-weight: normal;
-      padding-top: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/admin/components/messages.scss b/app/assets/stylesheets/admin/components/messages.scss
new file mode 100644
index 0000000000..8300434d62
--- /dev/null
+++ b/app/assets/stylesheets/admin/components/messages.scss
@@ -0,0 +1,43 @@
+.errorExplanation {
+  padding: 5px;
+  border: 1px solid very-light($color-error, 12);
+  background-color: very-light($color-error, 6);
+  border-radius: 3px;
+  color: very-light($color-error, 30);
+  margin-bottom: 15px;
+
+  h2 {
+    font-size: 140%;
+    color: very-light($color-error, 30);
+    margin-bottom: 5px;
+  }
+
+  p {
+    padding: 10px 0;
+  }
+
+  ul {
+    list-style-position: inside;
+
+    li {
+      font-weight: $font-weight-bold;
+    }
+  }
+}
+
+.flash {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 16px;
+  text-align: center;
+  z-index: 1000;
+  font-size: 120%;
+  color: $color-1;
+  font-weight: 600;
+
+  &.notice  { background-color: rgba($color-notice,  0.8) }
+  &.success { background-color: rgba($color-success, 0.8) }
+  &.error   { background-color: rgba($color-error,   0.8) }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/admin/components/navigation.scss b/app/assets/stylesheets/admin/components/navigation.scss
new file mode 100644
index 0000000000..74788ab582
--- /dev/null
+++ b/app/assets/stylesheets/admin/components/navigation.scss
@@ -0,0 +1,160 @@
+// 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;
+      font-weight: 600;      
+
+      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;
+      }
+    }
+
+    a::before {
+      font-weight: normal;
+      padding-top: 0;
+    }
+
+    .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;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/admin/components/pagination.scss b/app/assets/stylesheets/admin/components/pagination.scss
index 05cbf34ca7..c05a9fdd80 100644
--- a/app/assets/stylesheets/admin/components/pagination.scss
+++ b/app/assets/stylesheets/admin/components/pagination.scss
@@ -3,6 +3,20 @@
 .pagination {
   text-align: center;
   margin: 2em 0 1em;
+  padding: 10px 0;
+
+  .page {
+    padding: 5px 8px;
+    text-align: center;
+    display: inline-block;
+    text-align: center;
+
+    &.current {
+      background-color: $color-2;
+      border-radius: 3px;
+      color: $color-1;
+    }
+  }
 
   button {
     margin: 0 0.35em;
diff --git a/app/assets/stylesheets/admin/components/sidebar.scss b/app/assets/stylesheets/admin/components/sidebar.scss
new file mode 100644
index 0000000000..960de96ab0
--- /dev/null
+++ b/app/assets/stylesheets/admin/components/sidebar.scss
@@ -0,0 +1,26 @@
+// 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;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/admin/components/states.scss b/app/assets/stylesheets/admin/components/states.scss
new file mode 100644
index 0000000000..97ad366abf
--- /dev/null
+++ b/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 }
+}
diff --git a/app/assets/stylesheets/admin/components/table-filter.scss b/app/assets/stylesheets/admin/components/table-filter.scss
new file mode 100644
index 0000000000..51504e4589
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file