Subida del módulo y tema de PrestaShop

admin_o2w/themes/default/scss/partials/_alerts.scss

@@ -0,0 +1,72 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.alert {
+  a:not(.btn),
+  p {
+    color: var(--#{$cdk}primary-800);
+  }
+
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+
+  h4 {
+    margin-bottom: var(--#{$cdk}size-16);
+    font-size: var(--#{$cdk}size-24);
+  }
+}
+
+// Alerts mixins
+@mixin alert-panel($icon, $color, $border-color: $color) {
+  position: relative;
+  padding: 16px 15px 16px 56px;
+  font-size: 14px;
+  border: none;
+  border: solid 1px $border-color;
+
+  &::before {
+    position: absolute;
+    top: 13px;
+    display: block;
+    width: 25px;
+    height: 25px;
+    font-size: 24px;
+    color: $border-color;
+    content: "#{$icon}";
+    @include left(15px);
+    @extend .material-icons;
+  }
+}
+
+.alert.alert-warning {
+  @include alert-panel("\e002", $brand-warning, $alert-warning-border);
+}
+
+.alert.alert-danger {
+  @include alert-panel("\e000", $brand-danger, $alert-danger-border);
+}
+
+.alert.alert-success {
+  @include alert-panel("\e86c", $brand-success, $alert-success-border);
+}
+
+.alert.alert-info {
+  @include alert-panel("\e88e", $brand-info, $alert-info-border);
+}
+
+.alert.alert-addons {
+  @include alert-panel("\e887", $brand-info, $alert-info-border);
+  background-color: $alert-info-bg;
+}
+
+.alert.alert-onboarding {
+  @include alert-panel("\e887", $brand-info, $alert-info-border);
+  background-color: $alert-info-bg;
+}
+
+.alert.alert-message {
+  @include alert-panel("\e000", $brand-danger, $alert-danger-border);
+  background-color: $alert-danger-bg;
+}

admin_o2w/themes/default/scss/partials/_backward.scss

@@ -0,0 +1,408 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.page-sidebar:not(.page-sidebar-closed) .nobootstrap {
+  margin-left: 200px;
+}
+
+.nobootstrap {
+  min-width: 1200px;
+  padding: 110px 30px 100px;
+  background-color: #fff;
+
+  .form-group {
+    float: left;
+    width: 100%;
+    margin-bottom: 1em;
+    clear: both;
+
+    > div {
+      float: left;
+    }
+  }
+
+  .panel:not(.bootstrap) {
+    box-sizing: border-box;
+    float: left;
+    width: 100%;
+    padding: 1em;
+    margin: 0 0 10px;
+    color: #585a69;
+    background-color: #ebedf4;
+    border: 1px solid #ccced7;
+
+    img {
+      padding: 0 4px 0 0;
+      vertical-align: bottom;
+    }
+
+    h3 {
+      position: relative;
+      top: -25px;
+      display: inline-block;
+      padding: 0.2em 0.5em;
+      margin: 0;
+      font-weight: 700;
+      text-align: left;
+      background: #ebedf4;
+      border: 1px solid #ccced7;
+
+      a {
+        color: #585984;
+        text-decoration: none;
+      }
+
+      i {
+        font-family: FontAwesome, sans-serif;
+      }
+    }
+
+    .help-block {
+      float: left;
+      clear: both;
+    }
+
+    .switch {
+      float: left;
+      clear: both;
+      line-height: 1.3em;
+
+      label {
+        float: left;
+        width: auto;
+        padding: 0 10px 0 5px;
+      }
+
+      input[type="checkbox"],
+      input[type="radio"] {
+        float: left;
+      }
+    }
+
+    .radio {
+      label {
+        width: auto;
+        margin-right: 4px;
+        clear: both;
+      }
+    }
+
+    button {
+      padding: 3px 8px;
+      margin: 5px 0;
+      color: #000;
+      text-align: center;
+      text-decoration: none;
+      text-shadow: 0 1px 0 #fff;
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      // stylelint-disable-next-line
+      background: -moz-linear-gradient(center top, #f9f9f9, #e3e3e3) repeat scroll 0 0 transparent;
+      background: -webkit-gradient(linear, center top, center bottom, from(#f9f9f9), to(#e3e3e3)) repeat scroll 0 0 transparent;
+      border-color: #ccc #bbb #a0a0a0;
+      border-style: solid;
+      border-width: 1px;
+      border-right: 1px solid #bbb;
+      border-left: 1px solid #bbb;
+      border-radius: 3px;
+      outline: medium none;
+
+      &:hover {
+        border-color: #aaa #999 #888;
+      }
+    }
+
+    .tree-panel-heading-controls {
+      padding: 5px;
+      margin: -8px -8px 20px;
+      font-size: 13px;
+      background-color: #dde0e9;
+      border-bottom: solid 1px #dfdfdf;
+
+      a {
+        display: inline-block;
+        padding: 0 8px;
+        border-right: solid 1px #888;
+      }
+    }
+
+    .tree {
+      padding: 0 0 0 20px;
+      list-style: none;
+
+      input {
+        margin-right: 4px;
+        line-height: normal;
+        vertical-align: baseline;
+      }
+
+      i {
+        font-size: $icon-size-base;
+      }
+
+      .tree-item-name,
+      .tree-folder-name {
+        padding: 2px 5px;
+        @include border-radius(4px);
+
+        label {
+          float: none;
+          font-size: 13px;
+          font-weight: 400;
+          text-shadow: none;
+        }
+
+        &:hover {
+          cursor: pointer;
+          background-color: #eee;
+        }
+      }
+
+      .tree-selected {
+        background-color: #ccced7;
+
+        &:hover {
+          background-color: darken(#ccced7, 15%);
+        }
+
+        i.tree-dot {
+          background-color: #eee;
+        }
+      }
+
+      .tree-folder,
+      .tree-item {
+        margin: 3px 0;
+      }
+
+      i.tree-dot {
+        position: relative;
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        margin: 0 4px;
+        background-color: #ccc;
+        @include border-radius(6px);
+      }
+
+      .tree-item-disable,
+      .tree-folder-name-disable {
+        color: #ccc;
+
+        &:hover {
+          color: #ccc;
+          background-color: none;
+        }
+      }
+    }
+  }
+
+  form p {
+    padding: 0 0 0.5em;
+    margin: 0.5em 0 0;
+  }
+
+  fieldset {
+    padding: 1em;
+    margin: 0 0 10px;
+    color: #585a69;
+    background-color: #ebedf4;
+    border: 1px solid #ccced7;
+
+    img {
+      padding: 0 4px 0 0;
+      vertical-align: bottom;
+    }
+  }
+
+  legend {
+    padding: 0.2em 0.5em;
+    margin: 0;
+    font-weight: 700;
+    text-align: left;
+    background: #ebedf4;
+    border: 1px solid #ccced7;
+
+    a {
+      color: #585984;
+      text-decoration: none;
+    }
+  }
+
+  label {
+    float: left;
+    width: 250px;
+    padding: 0.2em 0.5em 0 0;
+    font-weight: 700;
+    color: #585a69;
+    text-align: right;
+    text-shadow: 0 1px 0 #fff;
+
+    &.t {
+      float: none;
+      padding: 0 5px;
+      margin: 0;
+      clear: none;
+      font-size: 12px;
+      font-weight: 500;
+      text-shadow: none;
+    }
+  }
+
+  a {
+    color: #415260;
+  }
+
+  .pull-right,
+  .pull-left {
+    float: none;
+  }
+
+  .clear {
+    clear: both;
+  }
+
+  .margin-form {
+    padding: 0 0 1em 260px;
+    font-size: 0.85em;
+    color: #7f7f7f;
+  }
+
+  .button {
+    padding: 3px 8px;
+    margin: 5px 0;
+    color: #000;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: 0 1px 0 #fff;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    // stylelint-disable-next-line
+    background: -moz-linear-gradient(center top, #f9f9f9, #e3e3e3) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, center top, center bottom, from(#f9f9f9), to(#e3e3e3)) repeat scroll 0 0 transparent;
+    border-color: #ccc #bbb #a0a0a0;
+    border-style: solid;
+    border-width: 1px;
+    border-right: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-radius: 3px;
+    outline: medium none;
+
+    &:hover {
+      border-color: #aaa #999 #888;
+    }
+  }
+
+  input {
+    vertical-align: middle;
+  }
+
+  select {
+    font-size: 12px;
+    border: 1px solid #ccc;
+  }
+
+  input,
+  textarea,
+  option {
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    color: #000;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="file"],
+  textarea {
+    padding: 2px 4px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
+  }
+
+  .table_grid {
+    width: 100%;
+  }
+
+  .table {
+    padding: 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+
+    th a {
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    tr {
+      th {
+        padding: 4px 6px;
+        font-size: 13px;
+        color: #333;
+        text-align: left;
+        background-color: #f1f1f1;
+
+        &.right {
+          text-align: center;
+        }
+      }
+
+      td {
+        padding: 4px 4px 4px 6px;
+        font-size: 12px;
+        color: #333;
+        border-bottom: 1px solid #ccc;
+      }
+
+      &.row_hover.filter:hover td {
+        background: #f1f9ff;
+      }
+
+      td.row_hover:hover table tr td {
+        background: none;
+      }
+
+      &.action_details td {
+        background: #fafafa;
+      }
+
+      &.alt_row.action_details td {
+        background: #e8e8e8;
+      }
+
+      td.empty {
+        background: #fff !important;
+        border-bottom: none;
+      }
+
+      td.first {
+        border-left: 1px solid #dedede;
+      }
+
+      td.last {
+        border-right: 1px solid #dedede;
+      }
+
+      &.small td {
+        height: 15px;
+      }
+
+      &.last td {
+        border-bottom: none;
+      }
+
+      .filter {
+        background-color: #f1f9ff;
+      }
+      // Helper 1.6
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_badges.scss

@@ -0,0 +1,36 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.badge {
+  min-width: var(--#{$cdk}size-20);
+  min-height: var(--#{$cdk}size-20);
+  padding: var(--#{$cdk}size-4) var(--#{$cdk}size-6);
+
+  &.badge-info {
+    background-color: $brand-info;
+  }
+
+  &.badge-success {
+    background-color: $brand-success;
+  }
+
+  &.badge-warning {
+    background-color: $brand-warning;
+  }
+
+  &.badge-danger {
+    background-color: $brand-danger;
+  }
+
+  &.badge-critical {
+    background-color: var(--#{$cdk}red-700);
+  }
+}
+
+// Custom
+.list-group-item.active > .badge,
+.nav-pills > .active > a > .badge {
+  color: $badge-active-color;
+  background-color: $badge-active-bg;
+}

admin_o2w/themes/default/scss/partials/_buttons.scss

@@ -0,0 +1,107 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.btn {
+  display: inline-flex;
+  gap: var(--#{$cdk}size-4);
+  align-items: center;
+  justify-content: center;
+  white-space: normal;
+
+  i {
+    &.material-icons {
+      font-size: var(--#{$cdk}size-20);
+    }
+  }
+
+  // Default
+  &.btn-default {
+    &:focus,
+    &.focus {
+      color: var(--#{$cdk}primary-800);
+      background-color: var(--#{$cdk}primary-400);
+      border-color: var(--#{$cdk}primary-800);
+    }
+
+    &:hover {
+      color: var(--#{$cdk}primary-800);
+      background-color: var(--#{$cdk}primary-300);
+      border-color: var(--#{$cdk}primary-800);
+    }
+
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+      color: var(--#{$cdk}primary-800);
+      background-color: var(--#{$cdk}primary-300);
+      background-image: none;
+      border-color: var(--#{$cdk}primary-800);
+
+      &:hover,
+      &:focus,
+      &.focus {
+        color: var(--#{$cdk}primary-800);
+        background-color: var(--#{$cdk}primary-400);
+        border-color: var(--#{$cdk}primary-800);
+      }
+    }
+  }
+
+  // Secondary
+  &.btn-secondary {
+    @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
+  }
+
+  // Group
+  &-group {
+    > .btn {
+      display: block;
+      height: 100%;
+    }
+
+    .btn {
+      &:not(.btn-default):not(.btn-link) {
+        &.dropdown-toggle {
+          &:not(:first-child){
+            margin-left: var(--#{$cdk}size-0);
+            border-left-color: var(--#{$cdk}white);
+          }
+        }
+      }
+
+      &-default {
+        &:not(:active),
+        &:not(.active){
+          &:hover {
+            color: var(--#{$cdk}primary-800);
+            background: var(--#{$cdk}primary-300);
+            border-color: var(--#{$cdk}primary-800);
+          }
+        }
+
+        &:not(.active){
+          &:active,
+          &:focus {
+            color: var(--#{$cdk}primary-800);
+            background: var(--#{$cdk}primary-400);
+            border-color: var(--#{$cdk}primary-800);
+          }
+        }
+
+        &.active {
+          color: var(--#{$cdk}white);
+          background: var(--#{$cdk}primary-800);
+          border-color: var(--#{$cdk}primary-800);
+
+          &:hover,
+          &:focus {
+            color: var(--#{$cdk}white);
+            background: var(--#{$cdk}primary-700);
+            border-color: var(--#{$cdk}primary-700);
+          }
+        }
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_chosen.scss

@@ -0,0 +1,497 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+//
+// bootstrap-chosen.scss
+//
+// An alternate stylesheet for Chosen (http://harvesthq.github.com/chosen/).
+// This one is supposed to integrate better with Bootstrap.
+//
+// Submit bugfixes to: http://github.com/alxlit/bootstrap-chosen
+//
+
+$chosen-background: $input-bg;
+$chosen-border: $input-border;
+$chosen-border-radius: $input-border-radius;
+$chosen-multi-border-radius: 0;
+$chosen-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+$chosen-drop-border: $gray-light;
+$chosen-drop-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+$chosen-drop-zindex: 1060;
+$chosen-focus-border: var(--#{$cdk}blue-500);
+$chosen-focus-box-shadow: none;
+$chosen-focus-transition: border linear 0.2s, box-shadow linear 0.2s;
+$chosen-height: $input-height-base;
+$chosen-multi-height: $input-height-base + 6px;
+$chosen-sprite-path: "../img/chosen-sprite.png";
+
+.chosen-select {
+  width: 100%;
+}
+
+.chosen-select-deselect {
+  width: 100%;
+}
+
+.chosen-container {
+  position: relative;
+  display: inline-block;
+  font-size: $font-size-base;
+  vertical-align: middle;
+
+  .chosen-drop {
+    position: absolute;
+    top: 100%;
+    z-index: $chosen-drop-zindex;
+    margin-top: -1px;
+    background: $chosen-background;
+    border: 1px solid $chosen-drop-border;
+    border-top-color: lighten($chosen-drop-border, 25%);
+    @include left(-9000px);
+    @include border-bottom-radius($chosen-border-radius);
+    @include box-shadow($chosen-drop-box-shadow);
+  }
+
+  &.chosen-with-drop .chosen-drop {
+    @include left(0);
+    @include right(0);
+  }
+
+  .chosen-results {
+    position: relative;
+    max-height: 240px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    color: $gray;
+    -webkit-overflow-scrolling: touch;
+    @include padding(0, 0, 0, 4px);
+    @include margin(0, 4px, 4px, 0);
+
+    li {
+      display: none;
+      padding: 5px 6px;
+      margin: 0;
+      line-height: $line-height-base;
+      list-style: none;
+
+      em {
+        font-style: normal;
+        background: #feffde;
+      }
+
+      &.group-result {
+        display: list-item;
+        font-weight: 700;
+        color: #999;
+        cursor: default;
+      }
+
+      &.group-option {
+        @include padding-left(15px);
+      }
+
+      &.active-result {
+        display: list-item;
+        cursor: pointer;
+      }
+
+      &.highlighted {
+        color: #fff;
+        background-color: $link-color;
+
+        em {
+          background: transparent;
+        }
+      }
+
+      &.disabled-result {
+        display: list-item;
+        color: $gray-light;
+      }
+    }
+
+    .no-results {
+      display: list-item;
+      background: $gray-lighter;
+    }
+  }
+
+  .chosen-results-scroll {
+    position: absolute;
+    z-index: 1;
+    width: 321px;
+    margin: 0 4px;
+    text-align: center;
+    background: #fff;
+
+    span {
+      display: inline-block;
+      width: 9px;
+      height: $line-height-base;
+      text-indent: -5000px;
+    }
+  }
+
+  .chosen-results-scroll-down {
+    bottom: 0;
+
+    span {
+      background: url($chosen-sprite-path) no-repeat -4px -3px;
+    }
+  }
+
+  .chosen-results-scroll-up {
+    span {
+      background: url($chosen-sprite-path) no-repeat -22px -3px;
+    }
+  }
+}
+
+.chosen-container-single {
+  .chosen-single {
+    position: relative;
+    display: block;
+    height: $chosen-height;
+    overflow: hidden;
+    line-height: $chosen-height;
+    color: $gray;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: $chosen-background;
+    border: 1px solid $chosen-border;
+    @include padding(0, 0, 0, 8px);
+    @include box-shadow($chosen-box-shadow);
+    @include border-radius($input-border-radius);
+
+    &:hover {
+      text-decoration: none;
+      cursor: pointer;
+    }
+    // stylelint-disable-next-line
+    &:span {
+      display: block;
+      @include margin-right(26px);
+      @include text-overflow();
+    }
+    // stylelint-disable-next-line
+    &:abbr {
+      position: absolute;
+      top: ($chosen-height - 10px) / 2;
+      display: block;
+      width: 12px;
+      height: 10px;
+      font-size: 1px;
+      background: url($chosen-sprite-path) right top no-repeat;
+      @include right(26px);
+
+      &:hover {
+        background-position: right -11px;
+      }
+    }
+
+    &.chosen-disabled .chosen-single abbr:hover {
+      background-position: right 2px;
+    }
+
+    div {
+      position: absolute;
+      top: 0;
+      display: block;
+      width: 18px;
+      height: 100%;
+      @include right(0);
+
+      b {
+        @extend .icon;
+        @extend .icon-caret-down;
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        line-height: 28px;
+        text-align: center;
+      }
+    }
+  }
+
+  .chosen-default {
+    color: $gray-light;
+  }
+
+  .chosen-search {
+    position: relative;
+    z-index: $zindex-dropdown;
+    padding: 3px 4px;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+
+    input {
+      width: 100%;
+      margin: 1px 0;
+      border: 1px solid $chosen-border;
+      @include padding(4px, 20px, 4px, 4px);
+      @include border-top-radius($chosen-border-radius);
+      @include border-bottom-radius($chosen-border-radius);
+      @include box-shadow($chosen-box-shadow);
+    }
+  }
+
+  .chosen-search::before {
+    @extend .icon;
+    @extend .icon-search;
+    position: absolute;
+    top: 7px;
+    display: block;
+    width: 22px;
+    height: 22px;
+    font-size: 14px;
+    line-height: 22px;
+    color: $brand-primary;
+    text-align: center;
+    @include right(7px);
+  }
+
+  .chosen-drop {
+    margin-top: -1px;
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+    @include border-bottom-radius($chosen-border-radius);
+  }
+}
+
+.chosen-container-single-nosearch {
+  .chosen-search {
+    input {
+      position: absolute;
+      @include left(-9000px);
+    }
+  }
+}
+
+.chosen-container-multi {
+  .chosen-choices {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--#{$cdk}size-8);
+    height: auto !important;
+    padding: var(--#{$cdk}size-8);
+    margin: 0;
+    overflow: hidden;
+    cursor: text;
+    background-color: $chosen-background;
+    border: 1px solid $chosen-border;
+
+    li {
+      list-style: none;
+      @include float(left);
+    }
+
+    .search-field {
+      padding: 0;
+      margin: 0;
+      white-space: nowrap;
+
+      input {
+        height: var(--#{$cdk}size-24);
+        padding: var(--#{$cdk}size-4);
+        margin: 0 !important;
+        color: $gray;
+        background: transparent !important;
+        border: 0 !important;
+        outline: 0;
+        @include box-shadow(none);
+      }
+
+      .default {
+        color: #999;
+      }
+    }
+
+    .search-choice {
+      position: relative;
+      padding: var(--#{$cdk}size-2) var(--#{$cdk}size-24) var(--#{$cdk}size-2) var(--#{$cdk}size-8);
+      margin: 0;
+      font-size: var(--#{$cdk}size-12);
+      font-weight: 700;
+      line-height: var(--#{$cdk}size-18);
+      color: $gray-dark;
+      cursor: default;
+      background-color: var(--#{$cdk}primary-300);
+      -webkit-background-clip: padding-box;
+      -moz-background-clip: padding;
+      background-clip: padding-box;
+      border: none;
+      @include border-top-radius($chosen-border-radius);
+      @include border-bottom-radius($chosen-border-radius);
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .search-choice-close {
+        position: absolute;
+        top: 50%;
+        right: var(--#{$cdk}size-8);
+        display: block;
+        width: var(--#{$cdk}size-10);
+        height: var(--#{$cdk}size-10);
+        font-size: 0;
+        background: url($chosen-sprite-path) right top no-repeat;
+        transform: translateY(-50%);
+
+        &:hover {
+          background-position: right -11px;
+        }
+      }
+    }
+
+    .search-choice-focus {
+      background: #d4d4d4;
+
+      .search-choice-close {
+        background-position: right -11px;
+      }
+    }
+  }
+
+  .chosen-results {
+    padding: 0;
+    margin: 0;
+  }
+
+  .chosen-drop {
+    .result-selected {
+      display: none;
+    }
+  }
+}
+
+.chosen-container-active {
+  .chosen-single {
+    border: 1px solid var(--#{$cdk}primary-800);
+    outline: 2px solid $chosen-focus-border;
+    @include box-shadow($chosen-focus-box-shadow);
+    @include transition($chosen-focus-transition);
+  }
+
+  &.chosen-with-drop .chosen-single {
+    background-color: $gray-lighter;
+    border: 1px solid var(--#{$cdk}primary-800);
+    outline: 2px solid $chosen-focus-border;
+    @include box-shadow($chosen-focus-box-shadow);
+    @include transition($chosen-focus-transition);
+
+    div {
+      background: transparent;
+      @include border-left(none);
+
+      b {
+        background-position: -18px 7px;
+      }
+    }
+  }
+
+  .chosen-choices {
+    border: 1px solid var(--#{$cdk}primary-800);
+    outline: 2px solid $chosen-focus-border;
+    @include border-bottom-radius(0);
+    @include box-shadow($chosen-focus-box-shadow);
+    @include transition($chosen-focus-transition);
+
+    .search-field input {
+      color: var(--#{$cdk}primary-800) !important;
+    }
+  }
+}
+
+.chosen-disabled {
+  cursor: default;
+  opacity: 0.5 !important;
+
+  .chosen-single {
+    cursor: default;
+  }
+
+  .chosen-choices .search-choice .search-choice-close {
+    cursor: default;
+  }
+}
+
+.chosen-rtl {
+  text-align: right;
+
+  .chosen-single {
+    padding: 0 8px 0 0;
+    overflow: visible;
+
+    span {
+      margin-right: 0;
+      margin-left: 26px;
+      direction: rtl;
+    }
+
+    div {
+      right: auto;
+      left: 7px;
+    }
+
+    abbr {
+      right: auto;
+      left: 26px;
+    }
+  }
+
+  .chosen-choices {
+    .search-field input {
+      direction: rtl;
+    }
+
+    li {
+      float: right;
+    }
+
+    .search-choice {
+      padding: 3px 5px 3px 19px;
+      margin: 6px 5px 3px 0;
+
+      .search-choice-close {
+        right: auto;
+        left: 4px;
+        background-position: right top;
+      }
+    }
+  }
+
+  &.chosen-container-single .chosen-results {
+    padding: 0 4px 0 0;
+    margin: 0 0 4px 4px;
+  }
+
+  .chosen-results .group-option {
+    padding-right: 15px;
+    padding-left: 0;
+  }
+
+  &.chosen-container-active.chosen-with-drop .chosen-single div {
+    border-right: none;
+  }
+
+  .chosen-search input {
+    padding: 4px 5px 4px 20px;
+    direction: rtl;
+    background: url($chosen-sprite-path) no-repeat -28px -20px, $chosen-background;
+  }
+}

admin_o2w/themes/default/scss/partials/_commons.scss

@@ -0,0 +1,28 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+// Global custom styles
+
+// List
+.list-detail {
+  dd:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+
+// Colors square for attributes color type
+.attributes-color-container {
+  display: block;
+  width: var(--#{$cdk}size-32);
+  height: var(--#{$cdk}size-32);
+  border: 1px solid var(--#{$cdk}primary-800);
+}
+
+// Color picker hex value text
+@at-root {
+  #mColorPickerInput {
+    font-family: var(--#{$cdk}font-family-primary);
+    color: var(--#{$cdk}primary-800);
+  }
+}

admin_o2w/themes/default/scss/partials/_content.scss

@@ -0,0 +1,190 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+}
+
+body {
+  font-family: var(--#{$cdk}font-family-primary);
+  font-size: $font-size-base;
+  font-weight: 400;
+  line-height: $line-height-base;
+  color: $text-color;
+  background-color: $body-bg;
+
+  &.mobile {
+    #content.bootstrap {
+      .page-head {
+        ul.page-breadcrumb {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+#main {
+  z-index: 10;
+  width: 100%;
+  padding: var(--#{$cdk}header-height) 0 var(--#{$cdk}size-60);
+}
+
+#content.bootstrap {
+  padding: var(--#{$cdk}page-head-height) var(--#{$cdk}size-16) 0 calc(var(--#{$cdk}sidebar-width) + var(--#{$cdk}size-16));
+
+  &.with-tabs {
+    padding-top: var(--#{$cdk}page-head-with-tabs-height);
+  }
+
+  form .alert {
+    clear: both;
+  }
+
+  .mobile & {
+    padding: var(--#{$cdk}page-head-with-tabs-height) var(--#{$cdk}size-16) var(--#{$cdk}size-16) var(--#{$cdk}size-16);
+    margin: 0;
+  }
+
+  .help-block {
+    font-style: italic;
+  }
+
+  .nav.nav-tabs li.active a {
+    z-index: 99;
+  }
+
+  // Links
+  a {
+    &[href] {
+      // Exclude classes that don't need underline
+      &:not(
+      .breadcrumb a,
+      .dropdown-menu a,
+      table a,
+      [class*="btn"],
+      [class*="dropdown"],
+      [class*="list-group-item"],
+      [class*="kpi-container"],
+      [class*="nav-link"]) {
+        text-decoration: underline;
+        text-underline-offset: var(--#{$cdk}size-2);
+        transition: var(--#{$cdk}default-transition);
+
+        &:hover {
+          text-underline-offset: var(--#{$cdk}size-4);
+        }
+      }
+    }
+  }
+}
+
+body.adminmodules {
+  #content.bootstrap {
+    padding-top: var(--#{$cdk}page-head-with-tabs-height);
+  }
+}
+
+.data-focus {
+  &.data-focus-primary {
+    color: var(--#{$cdk}white);
+    background-color: $brand-primary;
+    @include border-radius(10px);
+  }
+}
+
+#customer_part {
+  .customerCard {
+    &.selected-customer .panel {
+      color: $brand-success;
+      border: solid 2px $brand-success;
+    }
+  }
+}
+
+body.display-modal {
+  #content,
+  #main {
+    padding: 0;
+    margin: 0;
+    background: var(--#{$cdk}primary-200);
+  }
+}
+
+.bootstrap {
+  input[type="text"],
+  input[type="number"],
+  input[type="search"],
+  input[type="password"],
+  textarea,
+  select {
+    @extend .form-control;
+  }
+
+  .modal {
+    .alert {
+      h3 {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .modal-footer {
+    .alert {
+      text-align: left;
+    }
+  }
+}
+
+#main.helpOpen {
+  float: left;
+  width: 70%;
+
+  @media (max-width: $screen-lg) {
+    width: 100%;
+  }
+}
+
+#help-container {
+  position: relative;
+  box-sizing: border-box;
+  float: right;
+  width: 30%;
+  padding: 0;
+  margin: calc(var(--#{$cdk}page-head-with-tabs-height) + var(--#{$cdk}header-height)) 0 0 0;
+  overflow-x: hidden;
+  background-color: var(--#{$cdk}white);
+
+  @media (max-width: $screen-lg) {
+    display: none;
+  }
+}
+
+.page-sidebar-closed {
+  &:not(.mobile) {
+    #content {
+      padding-left: calc(var(--#{$cdk}sidebar-width-collapse) + var(--#{$cdk}size-16));
+
+      .page-head {
+        padding-left: var(--#{$cdk}sidebar-width-collapse);
+      }
+    }
+  }
+}
+
+div[data-role="search-panels"] {
+  .panel {
+    a[target="_blank"]::after {
+      position: relative;
+      top: 2px;
+      left: 10px;
+      font-family: var(--#{$cdk}font-family-material-icons);
+      color: var(--#{$cdk}primary-500);
+      content: "\e89e";
+      opacity: 0.7;
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_date-picker.scss

@@ -0,0 +1,89 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+// ui-datepicker: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a ui-datepicker-inline class. If the isRTL option is set, this element will additionally have a class of ui-datepicker-rtl.
+// ui-datepicker-header: The container for the datepicker's header.
+// ui-datepicker-prev: The control used to select previous months.
+// ui-datepicker-next: The control used to select subsequent months.
+// ui-datepicker-title: The container for the datepicker's title containing the month and year.
+// ui-datepicker-month: The textual display of the month or a <select> element if the changeMonth option is set.
+// ui-datepicker-year: The textual display of the year or a <select> element if the changeYear option is set.
+// ui-datepicker-calendar: The table that contains the calendar itself.
+// ui-datepicker-week-end: Cells containing weekend days.
+// ui-datepicker-other-month: Cells containing days that occur in a month other than the currently selected month.
+// ui-datepicker-unselectable: Cells containing days that are not selectable by the user.
+// ui-datepicker-current-day: The cell containing the selected day.
+// ui-datepicker-today: The cell containing today's date.
+// ui-datepicker-buttonpane: The buttonpane that is used when the showButtonPanel option is set.
+// ui-datepicker-current: The button used to select today's date.
+
+.ui-datepicker {
+  top: 0;
+  left: 0;
+  padding: 4px;
+  margin-top: 1px;
+  @include border-radius(4px);
+
+  &::before {
+    position: absolute;
+    top: -7px;
+    left: 6px;
+    display: inline-block !important;
+    content: "";
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-bottom-color: rgba(#000, 0.2);
+    border-left: 7px solid transparent;
+  }
+
+  &::after {
+    position: absolute;
+    top: -6px;
+    left: 7px;
+    display: inline-block !important;
+    content: "";
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
+  }
+
+  .ui-datepicker-header {
+    font-weight: 500;
+    color: #808080;
+    background: transparent !important;
+  }
+
+  .ui-state-default {
+    background: transparent !important;
+  }
+
+  .ui-state-highlight {
+    background: #fefbe2 !important;
+    border: solid 1px darken(#fefbe2, 50%) !important;
+  }
+
+  .ui-state-active {
+    color: #fff !important;
+    background: $primary-color !important;
+    border: solid 1px darken($primary-color, 10%) !important;
+  }
+
+  .ui-slider-handle {
+    cursor: pointer !important;
+    background: var(--#{$cdk}primary-300) !important;
+    border: var(--#{$cdk}size-1) solid var(--#{$cdk}primary-800) !important;
+    transition-duration: var(--#{$cdk}default-transition-duration);
+    transition-property: border, background;
+
+    &.ui-state-hover {
+      background: var(--#{$cdk}primary-800) !important;
+      border: var(--#{$cdk}size-1) solid var(--#{$cdk}primary-800) !important;
+    }
+
+    &.ui-state-focus {
+      background: var(--#{$cdk}primary-700) !important;
+      border: var(--#{$cdk}size-1) solid var(--#{$cdk}primary-700) !important;
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_date-range-picker.scss

@@ -0,0 +1,413 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+$color-bright: map-get($map: $cdk-common, $key: "white");
+
+$color-calendar: map-get($map: $cdk-primary, $key: "primary-800");
+$color-calendar-compare: map-get($map: $cdk-blue, $key: "blue-700");
+
+$color-calendar-day: $color-bright;
+
+$color-calendar-outrange: map-get($map: $cdk-primary, $key: "primary-400");
+
+$color-calendar-day-selected: $color-calendar;
+$color-calendar-day-selected-compare: $color-calendar-compare;
+
+$color-calendar-range: map-get($map: $cdk-primary, $key: "primary-600");
+$color-calendar-range-compare: map-get($map: $cdk-blue, $key: "blue-300");
+
+#datepicker {
+  .input-selected {
+    margin: 0;
+  }
+
+  #date-start.input-selected,
+  #date-end.input-selected {
+    border: solid 1px $color-calendar-day-selected;
+  }
+
+  #date-start-compare.input-selected,
+  #date-end-compare.input-selected {
+    border: solid 1px $color-calendar-day-selected-compare;
+  }
+
+  div#datepicker-form {
+    #date-range {
+      border: solid 1px $color-calendar;
+
+      .form-date-heading {
+        background-color: $color-calendar;
+      }
+    }
+
+    #date-compare {
+      border: solid 1px $color-calendar-compare;
+
+      .form-date-heading {
+        background-color: $color-calendar-compare;
+      }
+    }
+
+    .form-date-heading {
+      height: 30px;
+      line-height: 30px;
+      @include padding(0, 0, 0, 8px);
+
+      .title,
+      .checkbox-title label {
+        margin-top: 0;
+        font-size: 1.15em;
+        font-weight: 200;
+        line-height: 2em;
+        color: $color-bright;
+        text-transform: uppercase;
+      }
+
+      .btn-default {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: rgba($color-bright, 0.3);
+        border: none;
+      }
+
+      select {
+        @include margin(2px,2px,0,0);
+        @include padding(2px, 4px, 2px, 4px);
+        height: 1.625rem;
+        line-height: 1;
+      }
+    }
+
+    .form-date-body,
+    .form-date-actions {
+      display: inline-block;
+      width: 100%;
+      padding: 10px;
+      background-color: #fff;
+    }
+
+    .form-date-actions {
+      padding: 8px;
+      border: solid 1px var(--#{$cdk}primary-400);
+
+      .btn.pull-right {
+        @extend .btn-primary;
+      }
+    }
+
+    .form-date-group {
+      width: 100%;
+      margin: 0 auto 6px;
+      clear: both;
+
+      label {
+        margin-top: 5px;
+        font-size: 0.8em;
+        font-weight: 700;
+        text-transform: uppercase;
+      }
+
+      input {
+        @include margin(0, 2px, 0, 0);
+      }
+
+      input[type="text"] {
+        @include margin(0, 8px, 0, 0);
+        width: 35%;
+        height: 2.25rem;
+      }
+
+      button {
+        @include margin(5px, 0, 0, 0);
+      }
+    }
+  }
+
+  .daterangepicker {
+    position: relative;
+    width: 100%;
+    font-size: 13px;
+    border: solid 1px var(--#{$cdk}primary-400);
+    @include margin(0, 0, 8px, 0);
+
+    table {
+      width: 100%;
+      margin: 0;
+      border-spacing: 1px;
+    }
+
+    thead {
+      tr th {
+        height: 1.5em;
+        font-size: 0.7em;
+        color: var(--#{$cdk}white);
+        text-transform: uppercase;
+        background-color: $color-calendar;
+      }
+
+      tr:first-child th {
+        font-size: 1.4em;
+        font-weight: 200;
+        color: $color-calendar-day-selected;
+        cursor: pointer;
+        background-color: $color-bright;
+        border-bottom: 1px solid $color-calendar;
+      }
+    }
+
+    td,
+    th {
+      position: relative;
+      padding: 0;
+      text-align: center;
+    }
+
+    tr {
+      border-bottom: solid 1px var(--#{$cdk}white);
+    }
+
+    td {
+      height: 2.4em;
+      padding: 0 8px;
+      color: $color-calendar-day-selected;
+      @include transition-property(all);
+      @include transition-duration(0.2s);
+      @include transition-timing-function(ease-out);
+
+      &.day::after {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        display: block;
+        width: 100%;
+        content: "";
+        background-color: transparent;
+        @include left(0);
+      }
+
+      &.day:hover {
+        cursor: pointer;
+      }
+
+      &.day.disabled {
+        color: $color-calendar-outrange;
+      }
+
+      &.old,
+      &.new {
+        color: $color-calendar-outrange;
+      }
+
+      &.start-selected:not(.old):not(.new):not(.end-selected) {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected;
+
+        &.range-compare {
+          background-color: mix($color-calendar-day-selected, $color-calendar-range-compare, 50%);
+        }
+
+        &.end-selected-compare,
+        &.start-selected-compare {
+          background-color: mix($color-calendar-day-selected, $color-calendar-day-selected-compare, 50%);
+        }
+      }
+
+      &.end-selected:not(.old):not(.new):not(.start-selected) {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected;
+
+        &.range-compare {
+          background-color: mix($color-calendar-day-selected, $color-calendar-range-compare, 50%);
+        }
+
+        &.end-selected-compare,
+        &.start-selected-compare {
+          background-color: mix($color-calendar-day-selected, $color-calendar-day-selected-compare, 50%);
+        }
+      }
+
+      &.start-selected-compare:not(.old):not(.new):not(.end-selected-compare) {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected-compare;
+
+        &.range {
+          background-color: mix($color-calendar-day-selected-compare, $color-calendar-range, 50%);
+        }
+      }
+
+      &.end-selected-compare:not(.old):not(.new):not(.start-selected-compare) {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected-compare;
+
+        &.range {
+          background-color: mix($color-calendar-day-selected-compare, $color-calendar-range, 50%);
+        }
+      }
+
+      &.end-selected.start-selected {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected;
+
+        &.range-compare {
+          background-color: mix($color-calendar-day-selected, $color-calendar-range-compare, 50%);
+        }
+      }
+
+      &.end-selected-compare.start-selected-compare {
+        font-weight: 700;
+        color: $color-bright;
+        background-color: $color-calendar-day-selected-compare;
+
+        &.range {
+          background-color: mix($color-calendar-day-selected-compare, $color-calendar-range, 50%);
+        }
+      }
+
+      &.range {
+        color: var(--#{$cdk}white);
+        background-color: $color-calendar-range;
+
+        &.range-compare {
+          background-color: mix($color-calendar-range, $color-calendar-range-compare, 50%);
+        }
+      }
+
+      &.range-compare {
+        color: var(--#{$cdk}white);
+        background-color: $color-calendar-range-compare;
+
+        &.range {
+          background-color: mix($color-calendar-range, $color-calendar-range-compare, 50%);
+        }
+      }
+
+      &.today {
+        background-color: $color-bright;
+      }
+
+      span {
+        display: block;
+        float: left;
+        width: 33.333%;
+        height: 3em;
+        padding: 0;
+        font-weight: 400;
+        line-height: 3em;
+        text-transform: uppercase;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--#{$cdk}white);
+          background-color: $color-calendar-day-selected;
+        }
+
+        &.active {
+          color: var(--#{$cdk}white);
+          background-color: $color-calendar-day-selected;
+        }
+
+        &.old {
+          color: $color-calendar-outrange;
+        }
+      }
+    }
+
+    th {
+      &.next {
+        @include text-align(right);
+        @include padding(0, 10px, 0, 0);
+      }
+
+      &.prev {
+        @include text-align(left);
+        @include padding(0, 0, 0, 10px);
+      }
+
+      &.next,
+      &.prev,
+      &.month-switch {
+        height: 2em;
+        font-size: 1.3em;
+        line-height: 2em;
+
+        &:hover {
+          color: var(--#{$cdk}white);
+          background-color: $color-calendar;
+        }
+      }
+    }
+  }
+}
+
+#datepickerExpand {
+  i {
+    vertical-align: middle;
+  }
+}
+
+//chevrons are disabled time to figure out the firefox incompatibility..
+.chevron-left,
+.chevron-right {
+  position: relative;
+}
+
+.chevron-left::before,
+.chevron-right::before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  content: "";
+  border-style: solid;
+}
+
+.chevron-left::before {
+  top: 0;
+  background-color: $color-calendar-range;
+  border-color: transparent transparent transparent $color-calendar-day-selected;
+  @include right(0);
+  @include border-width(1.2em, 0, 1.2em, 0.5em);
+}
+
+.chevron-right::before {
+  top: 0;
+  background-color: $color-calendar-day-selected;
+  border-color: transparent transparent transparent $color-calendar-range;
+  @include left(0);
+  @include border-width(1.2em, 0, 1.2em, 0.5em);
+}
+
+.input-complete {
+  -webkit-animation: one 0.2s ease-in-out;
+  -moz-animation: one 0.2s ease-in-out;
+  -ms-animation: one 0.2s ease-in-out;
+  -o-animation: one 0.2s ease-in-out;
+  animation: one 0.2s ease-in-out;
+}
+// stylelint-disable-next-line
+@-webkit-keyframes one {
+  0% {
+    background-color: $color-calendar;
+  }
+
+  100% {
+    background-color: $color-bright;
+  }
+}
+
+// stylelint-disable-next-line
+@-webkit-keyframes two {
+  0% {
+    @include box-shadow($color-calendar 0 0 0 20px inset);
+  }
+
+  100% {
+    @include box-shadow($color-calendar 0 0 0 inset);
+  }
+}

admin_o2w/themes/default/scss/partials/_dropdowns.scss

@@ -0,0 +1,33 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.dropdown-menu {
+  min-width: var(--#{$cdk}size-176);
+  padding: var(--#{$cdk}size-8);
+  margin: var(--#{$cdk}size-6) 0 0 0;
+  box-shadow: var(--#{$cdk}box-shadow-md);
+
+  > li > a {
+    display: flex;
+    gap: var(--#{$cdk}size-8);
+    align-items: center;
+    padding: var(--#{$cdk}size-6) var(--#{$cdk}size-16);
+
+    i {
+      font-size: var(--#{$cdk}size-18);
+      color: var(--#{$cdk}primary-500);
+    }
+
+    &:hover,
+    &:focus {
+      color: $dropdown-link-hover-color;
+      text-decoration: none;
+      background-color: $dropdown-link-hover-bg;
+
+      i {
+        color: currentcolor;
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_forms.scss

@@ -0,0 +1,344 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+//form
+.form-control {
+  &:hover {
+    border-color: var(--#{$cdk}primary-800);
+  }
+
+  &:focus {
+    outline: 2px solid var(--#{$cdk}blue-500);
+    @include box-shadow(none);
+  }
+}
+
+label {
+  &,
+  &.control-label {
+    font-size: var(--#{$cdk}size-14);
+    font-weight: 500;
+    color: $main-color;
+  }
+}
+
+label.control-label span.label-tooltip {
+  padding: 0 5px;
+  font-size: var(--#{$cdk}size-14);
+  color: $main-color;
+  text-decoration: none;
+  border: none;
+}
+
+label.required::before {
+  position: relative;
+  font-size: var(--#{$cdk}size-14);
+  line-height: var(--#{$cdk}size-12);
+  color: var(--#{$cdk}red-500);
+  content: "*";
+}
+
+select.input-tiny,
+input[type="text"].input-tiny,
+input[type="password"].input-tiny {
+  width: 80px;
+  @include float(left);
+}
+
+textarea {
+  resize: none;
+}
+
+.form-control[disabled],
+.form-control[readonly],
+input[disabled][type="password"],
+input[disabled][type="search"],
+input[disabled][type="text"],
+input[disabled][type="email"],
+input[disabled][type="number"],
+input[readonly][type="password"],
+input[readonly][type="search"],
+input[readonly][type="text"],
+input[readonly][type="email"],
+input[readonly][type="number"],
+select[disabled],
+select[readonly],
+textarea[disabled],
+textarea[readonly],
+fieldset[disabled] .form-control,
+fieldset[disabled] input[type="password"],
+fieldset[disabled] input[type="search"],
+fieldset[disabled] input[type="text"],
+fieldset[disabled] input[type="email"],
+fieldset[disabled] input[type="number"],
+fieldset[disabled] select,
+fieldset[disabled] textarea {
+  background-color: var(--#{$cdk}primary-200);
+  border-color: var(--#{$cdk}primary-400);
+
+  &:hover {
+    background-color: var(--#{$cdk}primary-200);
+    border-color: var(--#{$cdk}primary-400);
+  }
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+  background-color: $input-focus-background;
+  border-color: $input-border-focus;
+  outline: 2px solid var(--#{$cdk}blue-500);
+  @include box-shadow(none);
+}
+
+textarea:hover,
+input[type="text"]:hover,
+input[type="number"]:hover,
+input[type="password"]:focus,
+input[type="datetime"]:hover,
+input[type="datetime-local"]:hover,
+input[type="date"]:hover,
+input[type="month"]:hover,
+input[type="time"]:hover,
+input[type="week"]:hover,
+input[type="email"]:hover,
+input[type="url"]:hover,
+input[type="search"]:hover,
+input[type="tel"]:hover,
+input[type="color"]:hover,
+.uneditable-input:hover {
+  background-color: $input-focus-background;
+}
+
+.help-block {
+  color: var(--#{$cdk}primary-700);
+}
+
+//buttons
+.dropdown-menu {
+  @include text-align(left);
+}
+
+.btn-group-action {
+  line-height: 0;
+
+  .btn {
+    font-family: $font-family-sans-serif;
+  }
+
+  .btn-group {
+    white-space: nowrap;
+
+    > a,
+    button {
+      display: inline-block;
+      float: none;
+      text-decoration: none;
+
+      i {
+        font-size: var(--#{$cdk}size-14);
+      }
+    }
+
+    > a:first-child {
+      @include margin-right(-3px);
+    }
+  }
+}
+
+.dummyfile {
+  position: relative;
+
+  .hide-file-upload {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include opacity(0);
+  }
+  //typeahead
+}
+
+.tt-query {
+  border-radius: 0;
+}
+
+.tt-dropdown-menu {
+  font-size: 0.9em;
+  text-transform: none;
+  background-color: var(--#{$cdk}white);
+  border: solid 1px var(--#{$cdk}primary-400);
+}
+
+.tt-suggestions {
+  padding: 0 var(--#{$cdk}size-6);
+  box-shadow: var(--#{$cdk}box-shadow-md);
+}
+
+.tt-suggestion p {
+  padding: 0 !important;
+  margin: 0 !important;
+  border-bottom: solid 1px var(--#{$cdk}primary-400);
+}
+
+.tt-suggestion:last-child p {
+  border-bottom: none;
+}
+//tag
+.tagify-container {
+  min-height: 30px;
+  padding: 0 3px;
+  overflow: auto;
+  background-color: var(--#{$cdk}white);
+  border: solid 1px var(--#{$cdk}primary-400);
+  border-radius: 0;
+  box-shadow: var(--#{$cdk}box-shadow-md);
+
+  span {
+    @include float(left);
+  }
+
+  > span {
+    display: inline-block;
+    padding: 2px 5px;
+    margin: 3px;
+    color: var(--#{$cdk}white);
+    background-color: lighten($brand-primary, 15%);
+    border: 1px solid $brand-primary;
+    border-radius: 0;
+
+    > a {
+      font-weight: 700;
+      color: $brand-primary;
+      text-decoration: none;
+      @include padding-left(5px);
+    }
+  }
+
+  > input {
+    width: 140px;
+    height: auto;
+    margin-top: 2px;
+    border: 0 none;
+    @include box-shadow(none);
+  }
+
+  > input:focus {
+    outline: 0;
+    @include box-shadow(none);
+  }
+}
+
+.form-group {
+  @media (max-width: $screen-lg) {
+    input[type="text"],
+    input[type="number"],
+    input[type="search"],
+    input[type="password"],
+    textarea,
+    select {
+      margin: 4px 0;
+    }
+
+    .input-group {
+      margin: 4px 0;
+
+      input[type="text"],
+      input[type="number"],
+      input[type="search"],
+      input[type="password"],
+      textarea,
+      select {
+        margin: 0;
+      }
+    }
+  }
+
+  .input-group {
+    &-btn {
+      > .btn {
+        height: $input-height-base;
+      }
+    }
+  }
+
+  .translatable-field {
+    .btn.dropdown-toggle {
+      height: $input-height-base;
+      white-space: nowrap;
+    }
+  }
+}
+
+input[type="text"],
+input[type="number"],
+input[type="search"],
+input[type="password"],
+input[type="email"],
+input[type="tel"] {
+  font-family: $url-font-content-name, Helvetica, Arial, $icon-font-family, sans-serif !important;
+}
+
+
+@media (min-width: $screen-sm-min) {
+  .control-label {
+    padding-top: 7px;
+    padding-right: 25px;
+  }
+}
+
+.form-horizontal {
+  .form-wrapper {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+    padding: 14px 0;
+    margin: auto;
+  }
+
+  .form-group {
+    .btn[id^="add_condition_"] {
+      white-space: nowrap;
+    }
+  }
+}
+
+.modal-checkbox {
+  input {
+    margin: 0;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
+  label {
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+}
+
+// Feedback states
+.has-success {
+  @include form-control-validation($state-success-text, $state-success-text, $state-success-bg);
+}
+
+.has-warning {
+  @include form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+}
+
+.has-error {
+  @include form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+}

admin_o2w/themes/default/scss/partials/_growl.scss

@@ -0,0 +1,125 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+/*
+ * jQuery Growl
+ * Copyright 2013 Kevin Sylvestre
+ * 1.1.4
+ */
+
+$namespace: "growl";
+$duration: 0.3s;
+
+#growls {
+  position: fixed;
+  z-index: 50000;
+
+  &.default {
+    top: 10px;
+    @include right(10px);
+  }
+
+  &.tl {
+    top: 10px;
+    @include left(10px);
+  }
+
+  &.tr {
+    top: 10px;
+    @include right(10px);
+  }
+
+  &.bl {
+    bottom: 10px;
+    @include left(10px);
+  }
+
+  &.br {
+    bottom: 10px;
+    @include right(10px);
+  }
+}
+
+.growl {
+  position: relative;
+  box-shadow: var(--#{$cdk}box-shadow-lg);
+  opacity: 1;
+  @include transition(all $duration ease-in-out);
+
+  &.#{$namespace}-incoming {
+    opacity: 0;
+  }
+
+  &.#{$namespace}-outgoing {
+    opacity: 0;
+  }
+
+  &.#{$namespace}-small {
+    width: 200px;
+    padding: 10px;
+    padding-right: 3rem;
+    margin: 10px;
+  }
+
+  &.#{$namespace}-medium {
+    width: 250px;
+    padding: 15px;
+    padding-right: 3rem;
+    margin: 10px;
+  }
+
+  &.#{$namespace}-large {
+    width: 300px;
+    padding: 15px;
+    padding-right: 3rem;
+    margin: 10px;
+  }
+
+  &.#{$namespace}-default {
+    color: var(--#{$cdk}primary-800);
+    background: var(--#{$cdk}blue-50);
+    border: 1px solid var(--#{$cdk}blue-500);
+  }
+
+  &.#{$namespace}-error {
+    color: var(--#{$cdk}primary-800);
+    background: var(--#{$cdk}red-50);
+    border: 1px solid var(--#{$cdk}red-500);
+  }
+
+  &.#{$namespace}-notice {
+    color: var(--#{$cdk}primary-800);
+    background: var(--#{$cdk}green-50);
+    border: 1px solid var(--#{$cdk}green-500);
+  }
+
+  &.#{$namespace}-warning {
+    color: var(--#{$cdk}primary-800);
+    background: var(--#{$cdk}yellow-50);
+    border: 1px solid var(--#{$cdk}yellow-500);
+  }
+
+  .#{$namespace}-close {
+    position: absolute;
+    top: 50%;
+    right: 1.125rem;
+    font-family: helvetica, verdana, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 300;
+    line-height: 1;
+    cursor: pointer;
+    transform: translateY(-50%);
+  }
+
+  .#{$namespace}-title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .#{$namespace}-message {
+    font-size: 14px;
+    line-height: 18px;
+  }
+}

admin_o2w/themes/default/scss/partials/_header.scss

@@ -0,0 +1,566 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+:root {
+  --#{$cdk}header-text-color: var(--#{$cdk}white);
+  --#{$cdk}header-text-color-hover: var(--#{$cdk}primary-500);
+  --#{$cdk}header-bg: var(--#{$cdk}primary-800);
+  --#{$cdk}search-color: var(--#{$cdk}primary-800);
+  --#{$cdk}search-border-color: var(--#{$cdk}primary-400);
+  --#{$cdk}header-version-color: var(--#{$cdk}white);
+  --#{$cdk}header-version-bg: var(--#{$cdk}primary-600);
+}
+
+#header {
+  z-index: 20;
+}
+
+#header_infos {
+  position: fixed;
+  top: 0;
+  z-index: 503;
+  display: flex;
+  gap: var(--#{$cdk}size-4);
+  align-items: stretch;
+  width: 100%;
+  height: $size-header-height;
+  padding: 0 var(--#{$cdk}size-16);
+  font-size: var(--#{$cdk}size-14);
+  color: var(--#{$cdk}header-text-color);
+  background: var(--#{$cdk}header-bg);
+
+  .mobile & {
+    padding: 0 var(--cdk-size-8);
+  }
+
+  .material-icons {
+    position: relative;
+    vertical-align: middle;
+  }
+
+  #header_logo {
+    width: var(--#{$cdk}size-144);
+    height: 100%;
+    background: url("../img/ps-logo-white.svg") left center no-repeat;
+    background-size: contain;
+
+    .mobile & {
+      width: var(--#{$cdk}size-128);
+      margin-right: auto;
+    }
+  }
+
+  #shop_version {
+    align-self: center;
+    padding: var(--#{$cdk}size-4) var(--#{$cdk}size-8) var(--#{$cdk}size-2) var(--#{$cdk}size-8);
+    margin: 0 var(--#{$cdk}size-4) 0 var(--#{$cdk}size-12);
+    font-size: var(--#{$cdk}size-12);
+    color: var(--#{$cdk}header-version-color);
+    background-color: var(--#{$cdk}header-version-bg);
+    border-radius: var(--#{$cdk}size-12);
+
+    // hide if viewport <= tablet portrait size
+    @media (max-width: breakpoint-max("md")) {
+      display: none;
+    }
+  }
+
+  > .component {
+    margin: 0;
+    font-size: var(--#{$cdk}size-14);
+    color: var(--#{$cdk}header-text-color);
+
+    .dropdown-toggle {
+      color: var(--#{$cdk}header-text-color);
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: var(--#{$cdk}header-text-color-hover);
+        text-decoration: none;
+      }
+
+      .material-icons {
+        font-size: var(--#{$cdk}size-24);
+        color: currentcolor;
+      }
+    }
+
+    // hide on very small screens
+    &.hide-mobile-sm {
+      @media (max-width: breakpoint-max("sm")) {
+        display: none;
+      }
+    }	// disable bootstrap styling
+  }
+
+  .shop-state {
+    display: inline-flex;
+    gap: var(--#{$cdk}size-8);
+    align-items: center;
+    height: $navbar-height;
+    padding: var(--#{$cdk}size-8);
+    margin: 0;
+    font-size: var(--#{$cdk}size-14);
+    line-height: 1;
+    color: var(--#{$cdk}header-text-color);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--#{$cdk}header-text-color-hover);
+      text-decoration: none;
+    }
+  }
+
+  .btn-link {
+    color: initial;
+
+    &:hover {
+      color: initial;
+      text-decoration: none;
+    }
+
+    &:active,
+    &:focus {
+      text-decoration: none;
+      outline: none;
+      box-shadow: none;
+    }
+  }
+
+  #quick_select {
+    height: $size-header-height;
+    padding: var(--#{$cdk}size-4) var(--#{$cdk}size-8);
+    font-size: var(--#{$cdk}size-14);
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--#{$cdk}header-text-color);
+
+    &:hover {
+      color: var(--#{$cdk}header-text-color-hover);
+      text-decoration: none;
+    }
+
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    > .material-icons {
+      font-size: var(--#{$cdk}size-20);
+    }
+  }
+
+  #header_shopname,
+  #debug-mode,
+  #maintenance-mode {
+    @include media-breakpoint-down(lg) {
+      > span {
+        display: none;
+      }
+    }
+  }
+
+  #maintenance-mode {
+    color: var(--#{$cdk}yellow-500);
+  }
+
+  .header-list {
+    padding: 0;
+    margin: 0;
+    font-size: var(--#{$cdk}size-14);
+
+    li {
+      display: block;
+      list-style: none;
+
+      > a {
+        &.notifs {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: $size-header-height;
+          padding: var(--#{$cdk}size-8);
+          line-height: 1;
+        }
+      }
+    }
+  }
+
+  #header_employee_box {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin-right: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    list-style-type: none;
+
+    #employee_infos {
+      #employee_links {
+        color: var(--#{$cdk}primary-800);
+
+        .employee_avatar {
+          width: auto;
+          height: auto;
+          margin: 0 !important;
+
+          img {
+            width: var(--#{$cdk}size-48);
+            height: var(--#{$cdk}size-48);
+            padding: 0;
+            margin: 0;
+            border: none;
+          }
+        }
+
+        .employee-wrapper {
+          &-avatar {
+            float: left;
+            margin: 0;
+          }
+
+          &-profile {
+            display: block;
+            padding: var(--#{$cdk}size-16) 0 0 0;
+            clear: both;
+            text-align: center;
+          }
+        }
+      }
+
+      .employee_name {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: $size-header-height;
+        padding: var(--#{$cdk}size-8);
+        line-height: 1;
+      }
+
+      .dropdown-menu {
+        min-width: var(--#{$cdk}size-256);
+        padding: var(--#{$cdk}size-16);
+
+        .divider {
+          width: 100%;
+          margin: var(--#{$cdk}size-16) 0;
+          clear: both;
+          border-top: 1px solid var(--#{$cdk}primary-400);
+        }
+
+        li {
+          margin: 0;
+
+          &.username {
+            display: inline-block;
+            max-width: calc(100% - var(--#{$cdk}size-48));
+            padding: var(--#{$cdk}size-4) 0 var(--#{$cdk}size-4) var(--#{$cdk}size-16);
+            margin: 0;
+            font-weight: 700;
+            white-space: normal;
+            vertical-align: top;
+          }
+
+          a {
+            &[target="_blank"]::after {
+              position: relative;
+              font-family: var(--#{$cdk}font-family-material-icons);
+              color: currentcolor;
+              content: "\e89e";
+            }
+
+
+            &.admin-link {
+              @extend .btn;
+              @extend .btn-default;
+
+              &:hover {
+                i {
+                  color: currentcolor;
+                }
+              }
+
+              i {
+                color: currentcolor;
+              }
+            }
+          }
+
+          &.signout {
+            margin: 0;
+
+            a {
+              @extend .btn;
+              @extend .btn-link;
+
+              &:hover {
+                color: var(--#{$cdk}red-500) !important;
+                text-decoration: none !important;
+              }
+
+              i {
+                display: inline-flex !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.bo_search_form {
+  @extend .hidden-xs;
+  flex-grow: 1;
+  align-self: center;
+
+  #bo_query {
+    padding-inline: var(--#{$cdk}size-8) var(--#{$cdk}size-32);
+    color: var(--#{$cdk}search-color);
+    border: 1px solid var(--#{$cdk}search-border-color);
+    border-left: none;
+
+    &::placeholder {
+      color: var(--#{$cdk}primary-600);
+    }
+  }
+
+  .form-group {
+    width: var(--#{$cdk}size-240);
+    margin: 0;
+
+    .input-group {
+      display: flex;
+
+      .input-group-btn {
+        width: auto;
+        border: none;
+
+        .btn-default {
+          align-items: center;
+          justify-content: center;
+          padding: 0 var(--#{$cdk}size-8) 0 var(--#{$cdk}size-8);
+          border: 1px solid var(--#{$cdk}search-border-color);
+          border-right: none;
+
+          &:active,
+          &:hover,
+          &:focus {
+            background-color: var(--#{$cdk}white);
+          }
+
+          #search_type_icon {
+            color: var(--#{$cdk}primary-800);
+          }
+        }
+      }
+    }
+  }
+
+  .clear_search {
+    position: absolute;
+    top: 50%;
+    right: var(--#{$cdk}size-8);
+    z-index: 10;
+    transform: translateY(-50%);
+
+    .material-icons {
+      font-size: var(--#{$cdk}size-20);
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+#header_quick {
+  @extend .hidden-xs;
+  @extend .hidden-sm;
+}
+
+#ajax_running {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$cdk}size-52);
+  height: 100%;
+  text-align: center;
+  background-color: rgba(map-get($map: $cdk-blue, $key: "blue-500"), 0.8);
+
+  i {
+    font-size: var(--#{$cdk}size-18);
+    line-height: 100%;
+    color: var(--#{$cdk}white);
+  }
+}
+
+#notification,
+#employee_infos {
+
+  @include media-breakpoint-down(sm) {
+    position: initial;
+
+    &::before {
+      position: fixed;
+      top: var(--#{$cdk}header-height);
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      pointer-events: none;
+      content: "";
+      background: rgba(map-get($map: $cdk-primary, $key: "primary-800"), 0.8);
+      opacity: 0;
+    }
+  }
+
+  &.open {
+    // Show overlay
+    @include media-breakpoint-down(sm) {
+      &::before {
+        pointer-events: all;
+        opacity: 1;
+      }
+    }
+  }
+
+  #total_notif_number_wrapper {
+    position: absolute;
+    top: var(--#{$cdk}size-2);
+    right: var(--#{$cdk}size-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--#{$cdk}size-18);
+    height: var(--#{$cdk}size-18);
+    padding: 0 var(--#{$cdk}size-2);
+    line-height: 1;
+    color: var(--#{$cdk}white);
+    background: var(--#{$cdk}red-500);
+    border: 2px solid var(--#{$cdk}white);
+    border-radius: var(--#{$cdk}size-10);
+
+    font: {
+      size: var(--#{$cdk}size-10);
+    }
+
+    > span {
+      font-size: inherit;
+      color: inherit;
+    }
+  }
+
+  .dropdown-menu {
+    min-width: 400px;
+    padding: 0;
+    margin: 0;
+
+    @include media-breakpoint-down(sm) {
+      top: var(--#{$cdk}header-height);
+      right: 0;
+      left: 0;
+      // stylelint-disable-next-line
+      //width: 100vw !important;
+      min-width: inherit;
+      overflow: hidden;
+      transform: inherit !important;
+    }
+
+    .notifications {
+      .nav-tabs {
+        display: flex;
+        border-bottom: var(--#{$cdk}size-1) solid var(--#{$cdk}primary-400);
+
+        .nav-item {
+          //width: 33.33333%;
+          flex-grow: 1;
+          text-align: center;
+
+          .nav-link {
+            margin: 0;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      .tab-content {
+        padding: var(--#{$cdk}size-16);
+
+        .tab-pane {
+          height: var(--#{$cdk}size-160);
+          overflow-y: auto;
+
+          .no-notification {
+            display: none;
+          }
+
+          &.empty {
+            color: var(--#{$cdk}primary-800);
+            text-align: center;
+
+            &::before {
+              font-family: var(--#{$cdk}font-family-material-icons);
+              font-size: var(--#{$cdk}size-56);
+              color: var(--#{$cdk}primary-400);
+              content: "\E7F5";
+            }
+
+            > .no-notification {
+              display: block;
+            }
+          }
+        }
+
+        .notif {
+          display: inline-block;
+          width: 100%;
+          padding: var(--#{$cdk}size-8);
+          vertical-align: middle;
+
+          * {
+            display: inline-block;
+            line-height: var(--#{$cdk}size-18);
+            vertical-align: text-top;
+          }
+
+          .material-icons {
+            font-size: var(--#{$cdk}size-16);
+            line-height: var(--#{$cdk}size-18);
+          }
+
+          &__carrier {
+            color: var(--#{$cdk}primary-600);
+          }
+
+          &__status {
+            &.open {
+              color: var(--#{$cdk}green-500);
+            }
+
+            &.closed {
+              color: var(--#{$cdk}red-500);
+            }
+
+            &.pending1,
+            &.pending2 {
+              color: var(--#{$cdk}yellow-500);
+            }
+          }
+
+          &:hover {
+            text-decoration: none;
+            background-color: var(--#{$cdk}blue-50);
+          }
+        }
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_helpers.scss

@@ -0,0 +1,86 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+// Helpers
+
+// Helpers class for fixing input width
+.fixed-width-xs {
+  width: 48px !important;
+}
+
+.fixed-width-sm {
+  width: 80px !important;
+}
+
+.fixed-width-md {
+  width: 120px !important;
+}
+
+.fixed-width-lg {
+  width: 160px !important;
+}
+
+.fixed-width-xl {
+  width: 200px !important;
+}
+
+.fixed-width-xxl {
+  width: 250px !important;
+}
+
+// Quick fix for inline hidden content on device width - waiting for bootstrap update https://github.com/twbs/bootstrap/issues/8869
+.hidden-inline-xs {
+  @media (max-width: $screen-xs) {
+    display: none !important;
+  }
+}
+
+// Helpers for row class
+.row-margin-bottom {
+  margin-bottom: 15px;
+}
+
+.row-margin-top {
+  margin-top: 15px;
+}
+
+.row-padding-top {
+  padding-top: 15px;
+}
+
+// Others
+.highlight {
+  background-color: var(--#{$cdk}amber-500);
+}
+
+.text-orange {
+  color: var(--#{$cdk}yellow-500);
+}
+
+.overflow-y {
+  max-height: 200px;
+  margin-bottom: var(--#{$cdk}size-16);
+  overflow-y: auto;
+}
+
+.modal-content-overflow {
+  max-height: 400px;
+  overflow-y: scroll;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.multiple-checkboxes {
+  padding-left: var(--#{$cdk}size-24);
+}
+
+select[multiple] {
+  overflow: auto;
+
+  option {
+    width: max-content;
+  }
+}

admin_o2w/themes/default/scss/partials/_icons.scss

@@ -0,0 +1,875 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+//migrationfromfont-awesomev3tov4
+[class^="icon-"] {
+  font-size: var(--#{$cdk}size-14);
+  @extend .icon;
+}
+
+.icon-bar-chart {
+  @extend .icon-bar-chart-o;
+}
+
+.icon-beaker {
+  @extend .icon-flask;
+}
+
+.icon-bell{
+  @extend .icon-bell-o;
+}
+
+.icon-bell-alt{
+  @extend .icon-bell;
+}
+
+.icon-bitbucket-sign{
+  @extend .icon-bitbucket-square;
+}
+
+.icon-bookmark-empty{
+  @extend .icon-bookmark-o;
+}
+
+.icon-building{
+  @extend .icon-building-o;
+}
+
+.icon-calendar-empty{
+  @extend .icon-calendar-o;
+}
+
+.icon-check-empty{
+  @extend .icon-square-o;
+}
+
+.icon-check-minus{
+  @extend .icon-minus-square-o;
+}
+
+.icon-check-sign{
+  @extend .icon-check-square;
+}
+
+.icon-chevron-sign-down{
+  @extend .icon-chevron-circle-down;
+}
+
+.icon-chevron-sign-left{
+  @extend .icon-chevron-circle-left;
+}
+
+.icon-chevron-sign-right{
+  @extend .icon-chevron-circle-right;
+}
+
+.icon-chevron-sign-up{
+  @extend .icon-chevron-circle-up;
+}
+
+.icon-circle-arrow-down{
+  @extend .icon-arrow-circle-down;
+}
+
+.icon-circle-arrow-left{
+  @extend .icon-arrow-circle-left;
+}
+
+.icon-circle-arrow-right{
+  @extend .icon-arrow-circle-right;
+}
+
+.icon-circle-arrow-up{
+  @extend .icon-arrow-circle-up;
+}
+
+.icon-circle-blank{
+  @extend .icon-circle-o;
+}
+
+.icon-cny{
+  @extend .icon-rub;
+}
+
+.icon-collapse-alt{
+  @extend .icon-minus-square-o;
+}
+
+.icon-collapse-top{
+  @extend .icon-caret-square-o-up;
+}
+
+.icon-collapse{
+  @extend .icon-caret-square-o-down;
+}
+
+.icon-comment-alt{
+  @extend .icon-comment-o;
+}
+
+.icon-comments-alt{
+  @extend .icon-comments-o;
+}
+
+.icon-copy{
+  @extend .icon-files-o;
+}
+
+.icon-cut{
+  @extend .icon-scissors;
+}
+
+.icon-dashboard{
+  @extend .icon-tachometer;
+}
+
+.icon-double-angle-down{
+  @extend .icon-angle-double-down;
+}
+
+.icon-double-angle-left{
+  @extend .icon-angle-double-left;
+}
+
+.icon-double-angle-right{
+  @extend .icon-angle-double-right;
+}
+
+.icon-double-angle-up{
+  @extend .icon-angle-double-up;
+}
+
+.icon-download{
+  @extend .icon-arrow-circle-o-down;
+}
+
+.icon-download-alt{
+  @extend .icon-download;
+}
+
+.icon-edit-sign{
+  @extend .icon-pencil-square;
+}
+
+.icon-edit{
+  @extend .icon-pencil-square-o;
+}
+
+.icon-ellipsis-horizontal{
+  @extend .icon-ellipsis-h;
+}
+
+.icon-ellipsis-vertical{
+  @extend .icon-ellipsis-v;
+}
+
+.icon-envelope-alt{
+  @extend .icon-envelope-o;
+}
+
+.icon-exclamation-sign{
+  @extend .icon-exclamation-circle;
+}
+
+.icon-expand-alt{
+  @extend .icon-plus-square-o;
+}
+
+.icon-external-link-sign{
+  @extend .icon-external-link-square;
+}
+
+.icon-eye-close{
+  @extend .icon-eye-slash;
+}
+
+.icon-eye-open{
+  @extend .icon-eye;
+}
+
+.icon-facebook-sign{
+  @extend .icon-facebook-square;
+}
+
+.icon-facetime-video{
+  @extend .icon-video-camera;
+}
+
+.icon-file-alt{
+  @extend .icon-file-o;
+}
+
+.icon-file-text-alt{
+  @extend .icon-file-text-o;
+}
+
+.icon-flag-alt{
+  @extend .icon-flag-o;
+}
+
+.icon-folder-close-alt{
+  @extend .icon-folder-o;
+}
+
+.icon-folder-close{
+  @extend .icon-folder;
+}
+
+.icon-folder-open-alt{
+  @extend .icon-folder-open-o;
+}
+
+.icon-food{
+  @extend .icon-cutlery;
+}
+
+.icon-frown{
+  @extend .icon-frown-o;
+}
+
+.icon-fullscreen{
+  @extend .icon-arrows-alt;
+}
+
+.icon-github-sign{
+  @extend .icon-github-square;
+}
+
+.icon-google-plus-sign{
+  @extend .icon-google-plus-square;
+}
+
+.icon-group{
+  @extend .icon-users;
+}
+
+.icon-h-sign{
+  @extend .icon-h-square;
+}
+
+.icon-hand-down{
+  @extend .icon-hand-o-down;
+}
+
+.icon-hand-left{
+  @extend .icon-hand-o-left;
+}
+
+.icon-hand-right{
+  @extend .icon-hand-o-right;
+}
+
+.icon-hand-up{
+  @extend .icon-hand-o-up;
+}
+
+.icon-hdd{
+  @extend .icon-hdd-o;
+}
+
+.icon-heart-empty{
+  @extend .icon-heart-o;
+}
+
+.icon-hospital{
+  @extend .icon-hospital-o;
+}
+
+.icon-indent-left{
+  @extend .icon-outdent;
+}
+
+.icon-indent-right{
+  @extend .icon-indent;
+}
+
+.icon-info-sign{
+  @extend .icon-info-circle;
+}
+
+.icon-keyboard{
+  @extend .icon-keyboard-o;
+}
+
+.icon-legal{
+  @extend .icon-gavel;
+}
+
+.icon-lemon{
+  @extend .icon-lemon-o;
+}
+
+.icon-lightbulb{
+  @extend .icon-lightbulb-o;
+}
+
+.icon-linkedin-sign{
+  @extend .icon-linkedin-square;
+}
+
+.icon-meh{
+  @extend .icon-meh-o;
+}
+
+.icon-microphone-off{
+  @extend .icon-microphone-slash;
+}
+
+.icon-minus-sign-alt{
+  @extend .icon-minus-square;
+}
+
+.icon-minus-sign{
+  @extend .icon-minus-circle;
+}
+
+.icon-mobile-phone{
+  @extend .icon-mobile;
+}
+
+.icon-moon{
+  @extend .icon-moon-o;
+}
+
+.icon-move{
+  @extend .icon-arrows;
+}
+
+.icon-off{
+  @extend .icon-power-off;
+}
+
+.icon-ok-circle{
+  @extend .icon-check-circle-o;
+}
+
+.icon-ok-sign{
+  @extend .icon-check-circle;
+}
+
+.icon-paper-clip{
+  @extend .icon-paperclip;
+}
+
+.icon-paste{
+  @extend .icon-clipboard;
+}
+
+.icon-phone-sign{
+  @extend .icon-phone-square;
+}
+
+.icon-picture{
+  @extend .icon-picture-o;
+}
+
+.icon-pinterest-sign{
+  @extend .icon-pinterest-square;
+}
+
+.icon-play-circle{
+  @extend .icon-play-circle-o;
+}
+
+.icon-play-sign{
+  @extend .icon-play-circle;
+}
+
+.icon-plus-sign-alt{
+  @extend .icon-plus-square;
+}
+
+.icon-plus-sign{
+  @extend .icon-plus-circle;
+}
+
+.icon-pushpin{
+  @extend .icon-thumb-tack;
+}
+
+.icon-question-sign{
+  @extend .icon-question-circle;
+}
+
+.icon-remove-circle{
+  @extend .icon-times-circle-o;
+}
+
+.icon-remove-sign{
+  @extend .icon-times-circle;
+}
+
+.icon-remove{
+  @extend .icon-times;
+}
+
+.icon-reorder{
+  @extend .icon-bars;
+}
+
+.icon-resize-full{
+  @extend .icon-expand;
+}
+
+.icon-resize-horizontal{
+  @extend .icon-arrows-h;
+}
+
+.icon-resize-small{
+  @extend .icon-compress;
+}
+
+.icon-resize-vertical{
+  @extend .icon-arrows-v;
+}
+
+.icon-rss-sign{
+  @extend .icon-rss-square;
+}
+
+.icon-save{
+  @extend .icon-floppy-o;
+}
+
+.icon-screenshot{
+  @extend .icon-crosshairs;
+}
+
+.icon-share-alt{
+  @extend .icon-share;
+}
+
+.icon-share-sign{
+  @extend .icon-share-square;
+}
+
+.icon-share{
+  @extend .icon-share-square-o;
+}
+
+.icon-sign-blank{
+  @extend .icon-square;
+}
+
+.icon-signin{
+  @extend .icon-sign-in;
+}
+
+.icon-signout{
+  @extend .icon-sign-out;
+}
+
+.icon-smile{
+  @extend .icon-smile-o;
+}
+
+.icon-sort-by-alphabet-alt{
+  @extend .icon-sort-alpha-desc;
+}
+
+.icon-sort-by-alphabet{
+  @extend .icon-sort-alpha-asc;
+}
+
+.icon-sort-by-attributes-alt{
+  @extend .icon-sort-amount-desc;
+}
+
+.icon-sort-by-attributes{
+  @extend .icon-sort-amount-asc;
+}
+
+.icon-sort-by-order-alt{
+  @extend .icon-sort-numeric-desc;
+}
+
+.icon-sort-by-order{
+  @extend .icon-sort-numeric-asc;
+}
+
+.icon-sort-down{
+  @extend .icon-sort-asc;
+}
+
+.icon-sort-up{
+  @extend .icon-sort-desc;
+}
+
+.icon-stackexchange{
+  @extend .icon-stack-overflow;
+}
+
+.icon-star-empty{
+  @extend .icon-star-o;
+}
+
+.icon-star-half-empty{
+  @extend .icon-star-half-o;
+}
+
+.icon-sun{
+  @extend .icon-sun-o;
+}
+
+.icon-thumbs-down-alt{
+  @extend .icon-thumbs-o-down;
+}
+
+.icon-thumbs-up-alt{
+  @extend .icon-thumbs-o-up;
+}
+
+.icon-time{
+  @extend .icon-clock-o;
+}
+
+.icon-trash{
+  @extend .icon-trash-o;
+}
+
+.icon-tumblr-sign{
+  @extend .icon-tumblr-square;
+}
+
+.icon-twitter-sign{
+  @extend .icon-twitter-square;
+}
+
+.icon-unlink{
+  @extend .icon-chain-broken;
+}
+
+.icon-upload{
+  @extend .icon-arrow-circle-o-up;
+}
+
+.icon-upload-alt{
+  @extend .icon-upload;
+}
+
+.icon-warning-sign{
+  @extend .icon-exclamation-triangle;
+}
+
+.icon-xing-sign{
+  @extend .icon-xing-square;
+}
+
+.icon-youtube-sign{
+  @extend .icon-youtube-square;
+}
+
+.icon-zoom-in{
+  @extend .icon-search-plus;
+}
+
+.icon-zoom-out{
+  @extend .icon-search-minus;
+}
+
+//icons page-head
+[class^="icon-Admin"] {
+  @extend .icon-fw;
+  @extend .icon-2x;
+}
+
+.icon-AdminDashboard {
+  @extend .icon-dashboard;
+}
+
+.icon-AdminCatalog{
+  @extend .icon-book;
+}
+
+.icon-AdminParentOrders{
+  @extend .icon-credit-card;
+}
+
+.icon-AdminParentCustomer{
+  @extend .icon-group;
+}
+
+.icon-AdminPriceRule{
+  @extend .icon-tags;
+}
+
+.icon-AdminParentShipping{
+  @extend .icon-truck;
+}
+
+.icon-AdminParentLocalization{
+  @extend .icon-globe;
+}
+
+.icon-AdminParentModules{
+  @extend .icon-puzzle-piece;
+}
+
+.icon-AdminParentPreferences{
+  @extend .icon-wrench;
+}
+
+.icon-AdminTools{
+  @extend .icon-cogs;
+}
+
+.icon-AdminAdmin{
+  @extend .icon-cog;
+}
+
+.icon-AdminParentStats{
+  @extend .icon-bar-chart;
+}
+
+.icon-AdminStock{
+  @extend .icon-archive;
+}
+
+.icon-AdminSearch{
+  @extend .icon-search;
+}
+
+.icon-AdminShopUrl{
+  @extend .icon-link;
+}
+
+.icon-AdminAttributeGenerator{
+  @extend .icon-magic;
+}
+
+.icon-AdminShop{
+  @extend .icon-sitemap;
+}
+
+.icon-AdminFlash{
+  @extend .icon-flash;
+}
+
+//Toolbar
+[class^="process-icon-"] {
+  display: block;
+  width: var(--#{$cdk}size-18);
+  height: var(--#{$cdk}size-18);
+  margin: 0 auto;
+  font-size: var(--#{$cdk}size-18);
+  background: transparent;
+  background-position: center;
+  background-size: 14px;
+  @extend .icon;
+  @extend .icon-2x;
+  @extend .icon-fw;
+}
+
+#content,
+.panel {
+  .process-icon-save,
+  .process-icon-save-and-stay,
+  .process-icon-save-and-preview {
+    @extend .icon-save;
+  }
+
+  .process-icon-ok {
+    @extend .icon-check;
+  }
+
+  .process-icon-cancel {
+    @extend .icon-remove;
+  }
+
+  .process-icon-back {
+    @extend .icon-circle-arrow-left;
+  }
+
+  .process-icon-next {
+    @extend .icon-circle-arrow-right;
+  }
+
+  .process-icon-help {
+    @extend .icon-question-circle;
+  }
+
+  .process-icon-export {
+    @extend .icon-share-square;
+  }
+
+  .process-icon-import {
+    @extend .icon-cloud-upload;
+  }
+
+  .process-icon-help-new {
+    @extend .icon-question-sign;
+  }
+
+  .process-icon-edit {
+    @extend .icon-edit;
+  }
+
+  .process-icon-newAttributes,
+  .process-icon-new,
+  .process-icon-new-url {
+    @extend .icon-plus-sign;
+  }
+
+  .process-icon-modules-list {
+    @extend .icon-puzzle-piece;
+  }
+
+  .process-icon-save-date {
+    @extend .icon-download;
+  }
+
+  .process-icon-save-status {
+    @extend .icon-download;
+  }
+
+  .process-icon-new-module {
+    @extend .icon-plus;
+  }
+
+  .process-icon-delete {
+    @extend .icon-trash;
+  }
+
+  .process-icon-update {
+    @extend .icon-refresh;
+  }
+
+  .process-icon-preview,
+  .process-icon-previewURL {
+    @extend .icon-eye-open;
+  }
+
+  .process-icon-stats {
+    @extend .icon-bar-chart;
+  }
+
+  .process-icon-duplicate {
+    @extend .icon-copy;
+  }
+
+  .process-icon-newCombination.toolbar-new,
+  .process-icon-plus {
+    @extend .icon-plus-sign;
+  }
+
+  .process-icon-newCombination.toolbar-cancel,
+  .process-icon-minus {
+    @extend .icon-minus-sign;
+  }
+
+  .process-icon-partial_refund {
+    @extend .icon-exchange;
+  }
+
+  .process-icon-anchor {
+    @extend .icon-anchor;
+  }
+
+  .process-icon-refresh {
+    @extend .icon-refresh;
+  }
+
+  .process-icon-configure {
+    @extend .icon-cog;
+  }
+
+  .process-icon-uninstall {
+    @extend .icon-trash;
+  }
+
+  .process-icon-off {
+    @extend .icon-off;
+  }
+
+  .process-icon-reset {
+    @extend .icon-rotate-left;
+  }
+
+  .process-icon-upload {
+    @extend .icon-cloud-upload;
+  }
+
+  .process-icon-download {
+    @extend .icon-cloud-download;
+  }
+
+  .process-icon-cogs {
+    @extend .icon-cogs;
+  }
+
+  .process-icon-download-alt {
+    @extend .icon-download-alt;
+  }
+
+  .process-icon-mail-reply {
+    @extend .icon-mail-reply;
+  }
+
+  .process-icon-power {
+    @extend .icon-power-off;
+  }
+
+  .process-icon-dropdown {
+    @extend .icon-caret-down;
+  }
+
+  .process-icon-envelope {
+    @extend .icon-envelope-o;
+  }
+
+  .process-icon-compress {
+    @extend .icon-compress;
+  }
+
+  .process-icon-expand {
+    @extend .icon-expand;
+  }
+
+  .process-icon-eraser {
+    @extend .icon-eraser;
+  }
+
+  .process-icon-flag {
+    @extend .icon-flag-alt;
+  }
+
+  .process-icon-close {
+    @extend .icon-times-circle;
+  }
+
+  .process-icon-loading {
+    @extend .icon-spin;
+    @extend .icon-circle-o-notch;
+    font-size: var(--#{$cdk}size-20);
+    line-height: var(--#{$cdk}size-30);
+  }
+
+  .process-icon-cart {
+    @extend .icon-shopping-cart;
+  }
+
+  .process-icon-payment {
+    @extend .icon-credit-card;
+  }
+
+  .process-icon-themes {
+    @extend .icon-html5;
+  }
+
+  .process-icon-database {
+    @extend .icon-database;
+  }
+
+  .process-icon-terminal {
+    @extend .icon-terminal;
+  }
+
+  .process-icon-toggle-on {
+    @extend .icon-toggle-on;
+  }
+
+  .process-icon-toggle-off {
+    @extend .icon-toggle-off;
+  }
+}

admin_o2w/themes/default/scss/partials/_input-groups.scss

@@ -0,0 +1,9 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.input-group {
+  &-btn {
+    z-index: 2;
+  }
+}

admin_o2w/themes/default/scss/partials/_kpi.scss

@@ -0,0 +1,133 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.kpi-container {
+  padding-bottom: 10px !important;
+
+  .kpi-refresh {
+    position: absolute;
+    right: 20px;
+    z-index: 1;
+  }
+}
+
+.box-stats {
+  display: block;
+  height: 64px;
+  margin-bottom: 10px;
+
+  .boxchart-overlay {
+    @include padding(10px, 10px, 5px, 10px);
+    @include margin-right(10px);
+    @include float(left);
+    @include border-radius(3px);
+  }
+
+  .kpi-content {
+    position: relative;
+    width: 100%;
+    @include padding-left(40px);
+    @include float(left);
+
+    i {
+      position: absolute;
+      top: 0;
+      font-size: 26px;
+      line-height: 26px;
+      color: var(--#{$cdk}white);
+      text-align: center;
+      @include left(0);
+      @include border-radius(3px);
+    }
+
+    .title {
+      display: block;
+      color: var(--#{$cdk}primary-800);
+    }
+
+    .subtitle {
+      display: block;
+      color: var(--#{$cdk}primary-500);
+      text-transform: uppercase;
+    }
+
+    .value {
+      display: block;
+      overflow: hidden;
+      clear: both;
+      font-size: 1.5em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.color1 {
+  i,
+  .boxchart-overlay {
+    color: var(--#{$cdk}blue-500) !important;
+  }
+
+  .value {
+    color: var(--#{$cdk}blue-500);
+  }
+}
+
+.color2 {
+  i,
+  .boxchart-overlay {
+    color: var(--#{$cdk}red-500) !important;
+  }
+
+  .value {
+    color: var(--#{$cdk}red-500);
+  }
+}
+
+.color3 {
+  i,
+  .boxchart-overlay {
+    color: var(--#{$cdk}purple-700) !important;
+  }
+
+  .value {
+    color: var(--#{$cdk}purple-700);
+  }
+}
+
+.color4 {
+  i,
+  .boxchart-overlay {
+    color: var(--#{$cdk}green-500) !important;
+  }
+
+  .value {
+    color: var(--#{$cdk}green-500);
+  }
+}
+
+.data_chart {
+  rect {
+    fill: var(--#{$cdk}white);
+  }
+
+  path {
+    fill: none;
+    stroke: var(--#{$cdk}white);
+    stroke-width: 2;
+  }
+
+  line {
+    stroke: var(--#{$cdk}primary-800);
+  }
+
+  .area {
+    fill: rgba(#fff, 0.3);
+    stroke-width: 0;
+  }
+}

admin_o2w/themes/default/scss/partials/_labels.scss

@@ -0,0 +1,10 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.label {
+  padding: var(--#{$cdk}size-4) var(--#{$cdk}size-8);
+  font-size: var(--#{$cdk}size-10);
+  font-weight: 500;
+  border-radius: var(--#{$cdk}size-0);
+}

admin_o2w/themes/default/scss/partials/_ladda.scss

@@ -0,0 +1,474 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+/*!
+ * Ladda
+ * http://lab.hakim.se/ladda
+ * MIT licensed
+ *
+ * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
+ */
+
+
+// CONFIG
+$spinnerSize: 32px;
+
+// MIXINS
+@mixin prefix( $property, $value ) {
+  -webkit-#{$property}: $value;
+  -moz-#{$property}: $value;
+  -ms-#{$property}: $value;
+  -o-#{$property}: $value;
+  $property: $value;
+}
+
+@mixin transition( $value ) {
+  -webkit-transition: $value !important;
+  -moz-transition: $value !important;
+  -ms-transition: $value !important;
+  -o-transition: $value !important;
+  transition: $value !important;
+}
+
+@mixin vendor-transform( $value ) {
+  @include prefix( transform, $value );
+}
+
+@mixin transform-origin( $value ) {
+  @include prefix( transform-origin, $value );
+}
+
+@mixin buttonColor( $name, $color ) {
+  &[data-color=#{$name}] {
+    background: $color;
+
+    &:hover {
+      background-color: lighten($color, 5%);
+    }
+  }
+}
+
+// BUTTON BASE
+.ladda-button {
+  position: relative;
+
+  .ladda-spinner {
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: inline-block;
+    width: $spinnerSize;
+    height: $spinnerSize;
+    margin-top: -$spinnerSize / 2;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .ladda-label {
+    position: relative;
+    z-index: 3;
+  }
+
+  .ladda-progress {
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 100%;
+    visibility: hidden;
+    background: rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    @include left(0);
+    @include transition( 0.1s linear all );
+
+    &[data-loading] .ladda-progress {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &[disabled],
+  &[data-loading] {
+    cursor: default;
+    background-color: #999;
+    border-color: rgba(0, 0, 0, 0.07);
+
+    &:hover {
+      cursor: default;
+      background-color: #999;
+    }
+  }
+
+  &[data-size="xs"] {
+    padding: 4px 8px;
+
+    .ladda-label {
+      font-size: 0.7em;
+    }
+  }
+
+  &[data-size="s"] {
+    padding: 6px 10px;
+
+    .ladda-label {
+      font-size: 0.9em;
+    }
+  }
+
+  &[data-size="l"] .ladda-label {
+    font-size: 1.2em;
+  }
+
+  &[data-size="xl"] .ladda-label {
+    font-size: 1.5em;
+  }
+}
+
+// EASING
+.ladda-button,
+.ladda-button .ladda-spinner,
+.ladda-button .ladda-label {
+  @include transition( 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) background-color );
+}
+
+.ladda-button[data-style="zoom-in"],
+.ladda-button[data-style="zoom-in"] .ladda-spinner,
+.ladda-button[data-style="zoom-in"] .ladda-label,
+.ladda-button[data-style="zoom-out"],
+.ladda-button[data-style="zoom-out"] .ladda-spinner,
+.ladda-button[data-style="zoom-out"] .ladda-label {
+  @include transition( 0.3s ease all );
+}
+
+// EXPAND LEFT
+.ladda-button[data-style="expand-right"] {
+  .ladda-spinner {
+    @include right(14px);
+  }
+
+  &[data-size="s"] .ladda-spinner,
+  &[data-size="xs"] .ladda-spinner {
+    @include right(4px);
+  }
+
+  &[data-loading] {
+    @include padding-right(56px);
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+
+    &[data-size="s"],
+    &[data-size="xs"] {
+      @include padding-right(40px);
+    }
+  }
+}
+
+// EXPAND RIGHT
+.ladda-button[data-style="expand-left"] {
+  .ladda-spinner {
+    @include left(14px);
+  }
+
+  &[data-size="s"] .ladda-spinner,
+  &[data-size="xs"] .ladda-spinner {
+    @include left(4px);
+  }
+
+  &[data-loading] {
+    @include padding-left(56px);
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+
+    &[data-size="s"],
+    &[data-size="xs"] {
+      @include padding-left(40px);
+    }
+  }
+}
+
+// EXPAND UP
+.ladda-button[data-style="expand-up"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    top: -$spinnerSize;
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+  }
+
+  &[data-loading] {
+    padding-top: 54px;
+
+    .ladda-spinner {
+      top: 14px;
+      margin-top: 0;
+      opacity: 1;
+    }
+
+    &[data-size="s"],
+    &[data-size="xs"] {
+      padding-top: 32px;
+
+      .ladda-spinner {
+        top: 4px;
+      }
+    }
+  }
+}
+
+// EXPAND DOWN
+.ladda-button[data-style="expand-down"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    top: 62px;
+    @include left(50%);
+    margin-left: -$spinnerSize / 2;
+  }
+
+  &[data-size="s"] .ladda-spinner,
+  &[data-size="xs"] .ladda-spinner {
+    top: 40px;
+  }
+
+  &[data-loading] {
+    padding-bottom: 54px;
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+  }
+
+  &[data-size="s"],
+  &[data-size="xs"] {
+    padding-bottom: 32px;
+  }
+}
+
+// SLIDE LEFT
+.ladda-button[data-style="slide-left"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    @include left(100%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      opacity: 0;
+      @include left(-100%);
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+      @include left(50%);
+    }
+  }
+}
+
+// SLIDE RIGHT
+.ladda-button[data-style="slide-right"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    @include right(100%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      opacity: 0;
+      @include left(100%);
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+      @include left(50%);
+    }
+  }
+}
+
+// SLIDE UP
+.ladda-button[data-style="slide-up"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    margin-top: 1em;
+    @include left(50%);
+    @include margin-left(-$spinnerSize / 2);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      top: -1em;
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      margin-top: -$spinnerSize / 2;
+      opacity: 1;
+    }
+  }
+}
+
+// SLIDE DOWN
+.ladda-button[data-style="slide-down"] {
+  overflow: hidden;
+
+  .ladda-label {
+    position: relative;
+  }
+
+  .ladda-spinner {
+    margin-top: -2em;
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+  }
+
+  &[data-loading] {
+    .ladda-label {
+      top: 1em;
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      margin-top: -$spinnerSize / 2;
+      opacity: 1;
+    }
+  }
+}
+
+// ZOOM-OUT
+.ladda-button[data-style="zoom-out"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    @include left(50%);
+    @include margin-left(-$spinnerSize / 2);
+    @include vendor-transform( scale( 2.5 ) );
+  }
+
+  .ladda-label {
+    position: relative;
+    display: inline-block;
+  }
+
+  &[data-loading] .ladda-label {
+    opacity: 0;
+    @include vendor-transform( scale( 0.5 ) );
+  }
+
+  &[data-loading] .ladda-spinner {
+    opacity: 1;
+    @include vendor-transform( none );
+  }
+}
+
+// ZOOM-IN
+.ladda-button[data-style="zoom-in"] {
+  overflow: hidden;
+
+  .ladda-spinner {
+    @include margin-left(-$spinnerSize / 2);
+    @include left(50%);
+    @include vendor-transform( scale( 0.2 ) );
+  }
+
+  .ladda-label {
+    position: relative;
+    display: inline-block;
+  }
+
+  &[data-loading] .ladda-label {
+    opacity: 0;
+    @include vendor-transform( scale( 2.2 ) );
+  }
+
+  &[data-loading] .ladda-spinner {
+    opacity: 1;
+    @include vendor-transform( none );
+  }
+}
+
+// CONTRACT
+.ladda-button[data-style="contract"] {
+  width: 100px;
+  overflow: hidden;
+
+  .ladda-spinner {
+    @include left(50%);
+    @include margin-left(-16px);
+  }
+}
+
+.ladda-button[data-style="contract"][data-loading] {
+  width: 52px;
+  border-radius: 50%;
+
+  .ladda-label {
+    opacity: 0;
+  }
+
+  .ladda-spinner {
+    opacity: 1;
+  }
+}
+
+// OVERLAY
+.ladda-button[data-style="contract-overlay"] {
+  width: 100px;
+  overflow: hidden;
+
+  @include ltr () {
+    box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0);
+  }
+
+  @include rtl () {
+    box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  .ladda-spinner {
+    @include left(50%);
+    @include margin-left(-16px);
+  }
+
+  &[data-loading] {
+    width: 52px;
+    border-radius: 50%;
+
+    @include ltr () {
+      box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.8);
+    }
+
+    @include rtl () {
+      box-shadow: 0 3000px 0 0 rgba(0, 0, 0, 0.8);
+    }
+
+    .ladda-label {
+      opacity: 0;
+    }
+
+    .ladda-spinner {
+      opacity: 1;
+    }
+  }
+}
+

admin_o2w/themes/default/scss/partials/_multistore.scss

@@ -0,0 +1,196 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.breadcrumb-multishop {
+  position: relative;
+  width: auto;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding: 0 7px;
+    font-family: FontAwesome, sans-serif;
+    font-size: 14px;
+    line-height: 22px;
+    color: #fff;
+    pointer-events: none;
+    content: "\f0d7";
+    background-color: darken($secondary-color, 15%);
+    @include right(0);
+    @include border-radius(0 4px 4px 0);
+  }
+
+  select {
+    position: relative;
+    display: inline-block;
+    height: 22px;
+    margin: 0;
+    line-height: 20px;
+    color: #666;
+    background: #fff;
+    border: 1px solid darken($secondary-color, 15%);
+    outline: none;
+    -webkit-appearance: none;
+    @include padding(0, 5px, 0, 8px);
+    @include border-radius(4px);
+
+    &:focus {
+      box-shadow: 0 0 0 1px darken($secondary-color, 15%);
+    }
+  }
+}
+
+#header_shop {
+  padding: 0;
+
+  .dropdown {
+    display: inline-flex;
+    gap: var(--#{$cdk}size-8);
+    align-items: center;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: var(--#{$cdk}size-14);
+    line-height: 1;
+    color: var(--#{$cdk}header-text-color);
+
+    > span {
+      height: 100%;
+    }
+
+    .dropdown-toggle {
+      display: flex;
+      gap: var(--#{$cdk}size-8);
+      align-items: center;
+      height: 100%;
+      padding: var(--#{$cdk}size-8);
+      color: var(--#{$cdk}header-text-color);
+
+      &:hover,
+      &:focus {
+        color: var(--#{$cdk}header-text-color-hover);
+        text-decoration: none;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    min-width: var(--#{$cdk}size-240);
+    max-width: var(--#{$cdk}size-320);
+
+    li {
+      &.active {
+        a {
+          color: var(--#{$cdk}white);
+        }
+      }
+
+      a {
+        color: var(--#{$cdk}primary-800);
+        white-space: normal;
+      }
+    }
+
+    .all-stores {
+      a {
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+    }
+
+    .group {
+      > a {
+        color: var(--#{$cdk}primary-500);
+
+        &::before {
+          @extend .material-icons;
+          font-size: var(--#{$cdk}size-14);
+          content: "\e1a0";
+        }
+      }
+    }
+
+    .shop {
+      display: flex;
+      justify-content: space-between;
+      padding-block: var(--#{$cdk}size-4);
+
+      &.active {
+        a {
+          &.link-shop {
+            color: var(--#{$cdk}white);
+
+            i {
+              color: currentcolor;
+            }
+          }
+        }
+      }
+
+      a {
+        &.link-shop {
+          margin: 0 0 0 auto;
+          border: 1px solid var(--#{$cdk}primary-800);
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .multistore-toggle {
+      > span {
+        display: none;
+      }
+    }
+  }
+}
+
+// stylelint-disable-next-line
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .custom-select select {
+    @include padding-right(30px);
+  }
+}
+
+
+.no-pointer-events .custom-select::after {
+  content: none;
+}
+
+.multishop-well {
+  @extend .row;
+  padding: 20px 20px 10px;
+  margin-bottom: 15px;
+  background-color: #faf8f0;
+  border: none;
+  @include border-left(3px solid #FBECCB);
+}
+
+@at-root .adminshop .bootstrap {
+  .table-responsive-row {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    /* stylelint-disable */
+    .dropdown-menu {
+      position: fixed !important;
+      top: auto !important;
+      margin-right: 36px;
+    }
+    /* stylelint-enable */
+
+    table {
+      max-width: 100%;
+
+      @include media-breakpoint-down(sm) {
+        td::before {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_nav.scss

@@ -0,0 +1,449 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+// Header navigation bar
+#header_infos {
+  .js-mobile-menu {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--#{$cdk}size-8);
+    font-size: var(--#{$cdk}size-24);
+    cursor: pointer;
+
+    @include media-breakpoint-down(md) {
+      display: inline-flex;
+    }
+  }
+}
+
+// Menu sidebar navigation
+.nav-bar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 502;
+  width: $size-navbar-width;
+  height: 100%;
+  margin-top: var(--#{$cdk}header-height);
+  overflow-y: auto;
+  background: $sidebar-menu-bg;
+  border-right: 1px solid var(--#{$cdk}primary-400);
+  //transition: var(--#{$cdk}default-transition);
+
+  // CSS var
+  --#{$cdk}sidebar-category-color: var(--#{$cdk}primary-500);
+  --#{$cdk}sidebar-icon-color: var(--#{$cdk}primary-800);
+  --#{$cdk}sidebar-icon-active: var(--#{$cdk}blue-700);
+  --#{$cdk}sidebar-link-color: var(--#{$cdk}primary-800);
+  --#{$cdk}sidebar-link-color-hover: var(--#{$cdk}blue-700);
+  --#{$cdk}sidebar-link-color-active: var(--#{$cdk}blue-700);
+  --#{$cdk}sidebar-link-bg-hover: var(--#{$cdk}primary-200);
+  --#{$cdk}sidebar-link-bg-active: var(--#{$cdk}primary-300);
+  --#{$cdk}sidebar-link-lvl-one-bg-active: var(--#{$cdk}primary-200);
+  --#{$cdk}sidebar-submenu-bg: var(--#{$cdk}primary-200);
+
+  .logo-container {
+    display: none;
+  }
+
+  .material-icons {
+    font-size: var(--#{$cdk}size-24);
+    line-height: 1;
+    color: currentcolor;
+  }
+
+  &.mobile-nav {
+    z-index: 2000;
+    width: 70%;
+    margin-top: 0;
+    margin-left: -100%;
+
+    .logo-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--#{$cdk}size-4) var(--#{$cdk}size-4) var(--#{$cdk}size-4) var(--#{$cdk}size-16);
+      color: var(--#{$cdk}primary-800);
+      border-bottom: 1px solid var(--#{$cdk}primary-400);
+
+      &__close {
+        padding: var(--#{$cdk}size-8);
+        line-height: 1;
+        cursor: pointer;
+      }
+
+      &__header {
+        display: flex;
+        gap: var(--#{$cdk}size-16);
+        align-items: center;
+      }
+
+      .logo {
+        width: var(--#{$cdk}size-128);
+        height: var(--#{$cdk}size-24);
+        background: url("../img/ps-logo-dark.svg") left center no-repeat;
+        background-size: contain;
+      }
+
+      .header-version {
+        font-size: var(--#{$cdk}size-16);
+      }
+    }
+
+    @include media-breakpoint-only(sm) {
+      width: 60%;
+    }
+
+    @include media-breakpoint-only(md) {
+      width: 40%;
+    }
+
+    &.expanded {
+      display: block;
+      margin-left: 0;
+    }
+
+    .onboarding-navbar {
+      display: none;
+    }
+
+    .employee_avatar {
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      @include media-breakpoint-down(md) {
+        display: flex;
+        gap: var(--#{$cdk}size-16);
+        align-items: center;
+        color: var(--#{$cdk}primary-800);
+      }
+
+      img {
+        width: var(--#{$cdk}size-48);
+        height: var(--#{$cdk}size-48);
+
+        @include media-breakpoint-down(md) {
+          width: var(--#{$cdk}size-36);
+          height: var(--#{$cdk}size-36);
+        }
+
+        &.img-thumbnail {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .main-menu {
+      margin-top: var(--#{$cdk}size-8);
+
+      > li:first-child {
+        padding: 0 var(--#{$cdk}size-8) var(--#{$cdk}size-16) var(--#{$cdk}size-8);
+      }
+    }
+  }
+}
+
+// Main menu
+.main-menu {
+  padding: var(--#{$cdk}size-8) var(--#{$cdk}size-8) var(--#{$cdk}size-128) var(--#{$cdk}size-8);
+  margin: 0;
+
+  .category-title > .title {
+    text-transform: uppercase;
+  }
+
+  .link-levelone {
+    display: block;
+
+    &.link-levelone-active {
+      > .link {
+        font-weight: 700;
+        color: var(--#{$cdk}sidebar-link-color-active);
+        background: var(--#{$cdk}sidebar-link-lvl-one-bg-active);
+      }
+    }
+
+    &:not(.has_submenu) {
+      .sub-tabs-arrow {
+        display: none;
+      }
+    }
+
+    &.link-active {
+      > .link {
+        font-weight: 700;
+
+        .material-icons {
+          &:first-child {
+            color: var(--#{$cdk}sidebar-icon-active);
+          }
+        }
+      }
+    }
+
+    &.ul-open,
+    &.link-active,
+    &.-hover {
+      > .link {
+        color: var(--#{$cdk}sidebar-link-color-active);
+        background: var(--#{$cdk}sidebar-link-lvl-one-bg-active);
+      }
+    }
+
+    &:not(.link-active):not(.open) {
+      > .link {
+        &:hover {
+          background-color: var(--#{$cdk}sidebar-link-bg-hover);
+        }
+      }
+    }
+
+    > .link {
+      display: flex;
+      gap: var(--#{$cdk}size-8);
+      align-items: center;
+      height: initial;
+      padding: var(--#{$cdk}size-8);
+      overflow: hidden;
+      font-size: var(--#{$cdk}size-14);
+      line-height: 1;
+      color: var(--#{$cdk}sidebar-link-color);
+      text-decoration: none;
+      text-overflow: initial;
+      word-break: break-word;
+      white-space: initial;
+      transition: background var(--#{$cdk}default-transition-duration);
+
+      .sub-tabs-arrow {
+        margin-left: auto;
+        line-height: 1;
+        color: var(--#{$cdk}primary-800);
+      }
+    }
+
+    #header_logout {
+      column-gap: var(--#{$cdk}size-8);
+      align-items: center;
+      margin-top: var(--#{$cdk}size-32);
+      font-weight: 700;
+      color: var(--#{$cdk}red-500);
+      transition: var(--#{$cdk}default-transition);
+
+      &:hover {
+        background-color: var(--#{$cdk}red-50);
+      }
+
+      i {
+        color: currentcolor;
+      }
+    }
+
+    > .submenu {
+      display: none;
+      padding: var(--#{$cdk}size-8) 0;
+      white-space: nowrap;
+      list-style: none;
+      background: var(--#{$cdk}sidebar-submenu-bg);
+    }
+
+    &.open {
+      > .submenu {
+        display: block;
+      }
+    }
+  }
+
+  .link-leveltwo {
+    @extend .link-levelone;
+
+    &.link-active {
+      > .link {
+        color: var(--#{$cdk}sidebar-link-color-hover);
+        background-color: inherit;
+      }
+    }
+
+    > .link {
+      height: initial;
+      padding: var(--#{$cdk}size-8) var(--#{$cdk}size-12);
+      line-height: 1;
+      color: var(--#{$cdk}sidebar-link-color);
+
+      &:hover {
+        color: var(--#{$cdk}sidebar-link-color-hover);
+      }
+    }
+  }
+}
+
+.category-title {
+  display: block;
+  padding: var(--#{$cdk}size-8);
+  margin: var(--#{$cdk}size-16) 0 var(--#{$cdk}size-8) 0;
+  font-size: var(--#{$cdk}size-12);
+  font-weight: 700;
+  line-height: 1;
+  border-bottom: 1px solid var(--#{$cdk}primary-300);
+
+  > .title {
+    color: var(--#{$cdk}sidebar-category-color);
+  }
+}
+
+.menu-collapse {
+  display: block;
+  padding: var(--#{$cdk}size-8) var(--#{$cdk}size-16);
+  font-size: 2rem;
+  line-height: 1rem;
+  color: var(--#{$cdk}primary-800);
+  text-align: right;
+  cursor: pointer;
+  transition: color var(--#{$cdk}default-transition-duration);
+
+  &:hover {
+    color: var(--#{$cdk}blue-500);
+  }
+
+  .material-icons {
+    font-size: var(--#{$cdk}size-24);
+    line-height: 1;
+    color: currentcolor;
+  }
+
+  @include media-breakpoint-down(md) {
+    display: none;
+    padding-bottom: var(--#{$cdk}size-16);
+  }
+}
+
+.page-sidebar-closed:not(.mobile) {
+  .content-div,
+  #content {
+    transition: padding var(--#{$cdk}default-transition-duration);
+  }
+
+  .menu-collapse {
+    padding: var(--#{$cdk}size-8);
+    text-align: center;
+    transform: rotate(180deg);
+  }
+
+  .link-levelone {
+    > .link {
+      justify-content: center;
+
+      > span {
+        display: none;
+
+        &.open {
+          > .submenu {
+            display: none;
+          }
+        }
+      }
+
+      > .sub-tabs-arrow{
+        display: none;
+      }
+    }
+  }
+
+  .category-title > .title {
+    display: none;
+  }
+
+  .nav-bar {
+    width: $size-navbar-width-mini;
+    overflow: visible !important;
+
+    &-overflow {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .main-menu {
+      padding: var(--#{$cdk}size-4) var(--#{$cdk}size-4) var(--#{$cdk}size-128) var(--#{$cdk}size-4);
+      overflow: hidden;
+
+      .category-title {
+        padding-top: 0;
+        padding-bottom: 0;
+
+        > .title {
+          display: none;
+        }
+      }
+
+      .link-levelone {
+        &.ul-open {
+          .link {
+            > span,
+            > .sub-tabs-arrow {
+              display: none;
+            }
+          }
+
+          .submenu {
+            position: absolute;
+            left: var(--#{$cdk}size-52);
+            display: block;
+            width: var(--#{$cdk}size-208);
+            padding: var(--#{$cdk}size-8) 0;
+            text-align: left;
+          }
+        }
+
+        .link-leveltwo {
+          > .link {
+            justify-content: start;
+            padding: var(--#{$cdk}size-8) var(--#{$cdk}size-12);
+          }
+        }
+      }
+    }
+
+    @media (max-height: 1040px) {
+      // these two tabs need to be flipped, otherwise
+      // css issue with bottom of the page
+      #subtab-ShopParameters.ul-open,
+      #subtab-AdminAdvancedParameters.ul-open {
+        ul.submenu {
+          display: flex !important;
+          flex-direction: column-reverse;
+          margin-top: var(--#{$cdk}size-40);
+          transform: rotate(180deg);
+          transform-origin: top;
+
+          li {
+            transform: rotate(180deg);
+
+            &:last-of-type {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.mobile-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1999;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: rgba(map-get($map: $cdk-primary, $key: "primary-800"), 0.8);
+  transition: var(--#{$cdk}default-transition);
+
+  &.expanded {
+    display: block;
+  }
+}

admin_o2w/themes/default/scss/partials/_navs.scss

@@ -0,0 +1,46 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.nav-tabs {
+  border-bottom: none;
+
+  > li {
+    > a {
+      color: var(--#{$cdk}primary-600);
+      border: none;
+      border-bottom: 3px solid transparent;
+
+      &:hover {
+        color: var(--#{$cdk}primary-800);
+        background-color: transparent;
+        border: none;
+        border-color: transparent;
+        border-bottom: 3px solid transparent;
+      }
+    }
+
+    // Active state, and its :hover to override normal :hover
+    &.active > a {
+      &,
+      &:focus {
+        border: none;
+        border-bottom: 3px solid var(--#{$cdk}primary-800);
+      }
+
+      &:hover {
+        border: none;
+        border-bottom: 3px solid var(--#{$cdk}primary-800);
+      }
+    }
+  }
+
+  // Custom
+  &#custom-address-fields {
+    > li {
+      > a {
+        padding-inline: var(--#{$cdk}size-12);
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_pagination.scss

@@ -0,0 +1,7 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.pagination {
+  margin: var(--#{$cdk}size-16) 0 0 0;
+}

admin_o2w/themes/default/scss/partials/_panels.scss

@@ -0,0 +1,119 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+$component: panel;
+
+.#{$component} {
+  padding: 0;
+  box-shadow: none;
+
+  &-heading,
+  > h3 {
+    display: flex;
+    gap: map-get($map: $cdk-size, $key: "size-16");
+    align-items: center;
+    width: 100%;
+    padding: map-get($map: $cdk-size, $key: "size-16");
+    margin: map-get($map: $cdk-size, $key: "size-0");
+    font-size: map-get($map: $cdk-size, $key: "size-18");
+    font-weight: 600;
+
+    > i {
+      font-size: map-get($map: $cdk-size, $key: "size-18");
+    }
+  }
+
+  &-title {
+    font-size: map-get($map: $cdk-size, $key: "size-18");
+    font-weight: 600;
+  }
+
+  &-heading-action {
+    display: flex;
+    gap: map-get($map: $cdk-size, $key: "size-12");
+    align-items: center;
+    margin: 0 0 0 auto;
+
+    .list-toolbar-btn {
+      color: map-get($map: $cdk-primary, $key: "primary-500");
+
+      &:hover {
+        color: map-get($map: $cdk-primary, $key: "primary-800");
+        text-decoration: none;
+      }
+
+      [class^="process-icon-"] {
+        color: var(--#{$cdk}primary-800);
+      }
+    }
+  }
+
+  &-footer {
+    @extend .clearfix;
+    padding-inline: var(--#{$cdk}size-20) !important;
+    margin-top: var(--#{$cdk}size-16);
+
+    .btn {
+      margin-inline: var(--#{$cdk}size-4);
+    }
+  }
+
+  &:not(
+  .#{$component}-default,
+  .#{$component}-primary,
+  .#{$component}-success,
+  .#{$component}-info,
+  .#{$component}-warning,
+  .#{$component}-danger
+) {
+    @extend .#{$component}-default;
+
+    .#{$component}-heading {
+      border-bottom: none;
+    }
+
+    &:not(:has(.#{$component}-heading, .#{$component}-body, .#{$component}-footer)) {
+      padding: map-get($map: $cdk-size, $key: "size-16");
+    }
+  }
+
+  &:has(.#{$component}-footer) {
+    padding: 0;
+
+    > *:not(.#{$component}-heading, .#{$component}-body, .alert) {
+      padding-inline: map-get($map: $cdk-size, $key: "size-24");
+
+      *:is(.panel) {
+        &:not(:has(.#{$component}-footer)) {
+          padding: map-get($map: $cdk-size, $key: "size-16");
+        }
+      }
+    }
+
+    > .alert {
+      margin-inline: map-get($map: $cdk-size, $key: "size-24");
+    }
+  }
+
+  &:has(.#{$component}-heading, > h3) {
+    &:not(:has(.#{$component}-footer, .#{$component}-body)) {
+      padding: map-get($map: $cdk-size, $key: "size-16");
+
+      .#{$component}-heading,
+      .#{$component} > h3
+      .#{$component}-body {
+        padding: map-get($map: $cdk-size, $key: "size-0");
+      }
+
+      .#{$component}-heading,
+      .#{$component} > h3 {
+        padding-bottom: map-get($map: $cdk-size, $key: "size-16");
+      }
+    }
+  }
+
+  &:not(:has(> *)) {
+    padding: map-get($map: $cdk-size, $key: "size-16");
+  }
+}

admin_o2w/themes/default/scss/partials/_popovers.scss

@@ -0,0 +1,20 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.popover {
+  padding: var(--#{$cdk}size-8);
+  color: var(--#{$cdk}white);
+  box-shadow: var(--#{$cdk}box-shadow-md);
+
+  &-title {
+    padding: 0;
+    font-weight: 700;
+    color: var(--#{$cdk}white);
+  }
+
+  &-content {
+    padding: 0;
+    color: var(--#{$cdk}white);
+  }
+}

admin_o2w/themes/default/scss/partials/_print.scss

@@ -0,0 +1,174 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+@media print {
+  * {
+    font-family: Georgia, "Times New Roman", Times, serif !important;
+    color: #000 !important;
+    text-shadow: none !important;
+    background: transparent !important;
+    border-color: #000 !important;
+    @include box-shadow(none!important);
+  }	// commons
+  [class^="icon-"],
+  [class^="process-icon-"] {
+    font-family: $icon-font-family !important;
+  }
+
+  #header,
+  #footer,
+  #nav-bar,
+  #nav-topbar,
+  #nav-sidebar,
+  .hidden-print {
+    display: none !important;
+  }
+
+  .visible-print {
+    display: block !important;
+  }
+
+  hr {
+    display: none !important;
+  }
+
+  #main {
+    float: none !important;
+    width: 8.5in !important;
+    padding: 0 !important;
+    margin: 0 auto !important;
+
+    #content.bootstrap {
+      padding: 0 !important;
+      margin: 0 !important;
+
+      .page-head {
+        display: none !important;
+      }
+
+      .panel {
+        padding: 0 !important;
+        margin: 0 0 40px !important;
+        clear: both !important;
+        border: none !important;
+        page-break-inside: avoid !important;
+        @include box-shadow(none!important);
+
+        .panel-heading {
+          margin: 0 0 20px !important;
+        }
+
+        .panel,
+        .well {
+          margin: 0 !important;
+        }
+      }
+
+      .tab-pane {
+        margin-bottom: 20px !important;
+      }
+
+      .row {
+        margin-bottom: 20px !important;
+      }
+
+      .btn {
+        display: none !important;
+      }
+
+      .panel-heading-action {
+        display: none;
+      }
+
+      .nav-tabs li a {
+        display: none;
+        background-color: #fff !important;
+        border-bottom-color: #fff !important;
+      }
+
+      .tab-content > .tab-pane {
+        display: block !important;
+        opacity: 1 !important;
+      }
+
+      h4 {
+        margin: 0 0 10px !important;
+      }			// orders
+      #shipping {
+        .form-horizontal {
+          padding-bottom: 10px !important;
+        }
+      }
+
+      #addressShipping {
+        float: left !important;
+        width: 49% !important;
+        margin-bottom: 0 !important;
+      }
+
+      #addressInvoice {
+        float: right !important;
+        width: 49% !important;
+        margin-bottom: 0 !important;
+      }
+
+      #status {
+        tr:first-child td {
+          font-weight: 700 !important;
+        }
+      }
+
+      .table {
+        margin-bottom: 10px !important;
+        border: solid 1px #000 !important;
+
+        th {
+          font-style: italic;
+        }
+      }
+
+      .label-inactive {
+        font-size: 11pt !important;
+        text-decoration: line-through !important;
+
+        i {
+          display: none !important;
+        }
+      }
+
+      .kpi-container.panel {
+        margin: 30px 0 20px !important;
+        border: solid 1px #000 !important;
+
+        .box-stats {
+          width: 25% !important;
+          height: auto !important;
+          padding: 10px 0 !important;
+          font-size: 8pt !important;
+
+          i {
+            font-size: 20pt !important;
+          }
+        }
+      }
+
+      .alert {
+        border: 1px solid #000 !important;
+
+        &::before {
+          color: #000 !important;
+        }
+      }
+
+      .table-responsive {
+        margin: 0 !important;
+        border: none !important;
+      }
+
+      .panel-total td {
+        font-size: 13pt !important;
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_product.scss

@@ -0,0 +1,64 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.media-product-pack {
+  position: relative;
+  width: 200px;
+  padding: 4px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  border: solid 2px var(--#{$cdk}primary-300);
+  @include margin-right(10px);
+  @include border-radius(0);
+  @include float(left);
+
+  .media-product-pack-img {
+    width: 100%;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid var(--#{$cdk}primary-500);
+  }
+
+  .media-product-pack-title {
+    display: inline-block;
+    width: 100%;
+    padding: 0 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .media-product-pack-ref {
+    display: inline-block;
+    width: 100%;
+    padding: 0 5px;
+    overflow: hidden;
+    color: var(--#{$cdk}primary-500);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .media-product-pack-action {
+    position: absolute;
+    top: 7px;
+    text-align: center;
+    border: solid 1px var(--#{$cdk}primary-500);
+    @include right(7px);
+    @include border-radius(0);
+  }
+
+  .media-product-pack-quantity {
+    position: absolute;
+    top: 7px;
+    min-width: 35px;
+    height: 25px;
+    padding: 0 4px;
+    line-height: 23px;
+    text-align: center;
+    background-color: var(--#{$cdk}white);
+    border: solid 1px var(--#{$cdk}primary-300);
+    @include left(7px);
+    @include border-radius(0);
+  }
+}

admin_o2w/themes/default/scss/partials/_progress-bars.scss

@@ -0,0 +1,12 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.progress {
+  height: var(--#{$cdk}size-16);
+  box-shadow: none;
+
+  &-bar {
+    box-shadow: none;
+  }
+}

admin_o2w/themes/default/scss/partials/_rtl.scss

@@ -0,0 +1,212 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+html {
+  font-family: tahoma, sans-serif;
+  direction: rtl;
+}
+
+.bootstrap {	/* fix SVG */
+  .chart svg {
+    direction: ltr;
+
+    svg {
+      text {
+        font: 500 11px Tahoma, Arial, sans-serif !important;
+      }
+    }
+  }/* reverse font awesome icon directions */
+  .icon-step-forward::before {
+    content: "\f048";
+  }
+
+  .icon-fast-forward::before {
+    content: "\f049";
+  }
+
+  .icon-forward::before {
+    content: "\f04a";
+  }
+
+  .icon-backward::before {
+    content: "\f04e";
+  }
+
+  .icon-fast-backward::before {
+    content: "\f050";
+  }
+
+  .icon-step-backward::before {
+    content: "\f051";
+  }
+
+  .icon-chevron-right::before {
+    content: "\f053";
+  }
+
+  .icon-chevron-left::before {
+    content: "\f054";
+  }
+
+  .icon-arrow-right::before {
+    content: "\f060";
+  }
+
+  .icon-arrow-left::before {
+    content: "\f061";
+  }
+
+  .icon-hand-o-left::before,
+  .icon-hand-right::before {
+    content: "\f0a4";
+  }
+
+  .icon-hand-o-right::before,
+  .icon-hand-left::before {
+    content: "\f0a5";
+  }
+
+  .icon-caret-right::before {
+    content: "\f0d9";
+  }
+
+  .icon-caret-left::before {
+    content: "\f0da";
+  }
+
+  .icon-angle-double-right::before,
+  .icon-double-angle-right::before {
+    content: "\f100";
+  }
+
+  .icon-angle-double-left::before,
+  .icon-double-angle-left::before {
+    content: "\f101";
+  }
+
+  .icon-angle-right::before {
+    content: "\f104";
+  }
+
+  .icon-angle-left::before {
+    content: "\f105";
+  }
+
+  .icon-quote-right::before {
+    content: "\f10d";
+  }
+
+  .icon-quote-left::before {
+    content: "\f10e";
+  }
+
+  .icon-chevron-circle-right::before,
+  .icon-chevron-sign-right::before {
+    content: "\f137";
+  }
+
+  .icon-chevron-circle-left::before,
+  .icon-chevron-sign-left::before {
+    content: "\f138";
+  }
+
+  .icon-toggle-left::before,
+  .icon-caret-square-o-left::before {
+    content: "\f152";
+  }
+
+  .icon-long-arrow-right::before {
+    content: "\f177";
+  }
+
+  .icon-long-arrow-left::before {
+    content: "\f178";
+  }
+
+  .icon-arrow-circle-o-left::before {
+    content: "\f18e";
+  }
+
+  .icon-arrow-circle-o-right::before {
+    content: "\f190";
+  }
+
+  .icon-toggle-right::before,
+  .icon-caret-square-o-right::before {
+    content: "\f191";
+  }
+  //fix bootstrap
+  dd {
+    margin-right: 0;
+  }
+
+  .pull-right {
+    float: left !important;
+  }
+
+  .pull-left {
+    float: right !important;
+  }
+
+  .input-group input[type="text"] {
+    float: right;
+  }
+}
+
+.kpi-container {
+  padding-bottom: 10px !important;
+
+  .kpi-refresh {
+    position: absolute;
+    left: 20px;
+    z-index: 1;
+  }
+}
+
+#nav-bar {
+  ul.menu {
+    li.link-levelone {
+      &.hover:not(.active) {
+        &::before {
+          position: absolute;
+          right: inherit;
+          left: 0;
+          z-index: 1;
+          width: 0;
+          height: 0;
+          margin-top: 6px;
+          content: "";
+          background-color: transparent;
+          border-color: transparent transparent transparent $main-color;
+          border-style: solid;
+          border-width: 8px 0 8px 10px;
+          @media (min-height: $min-height) {
+            margin-top: 10px;
+          }
+        }
+      }
+
+      &.active {
+        a,
+        li.active a {
+          &.title {
+            background-color: $sidebar-menu-bg-hover-color;
+            border-right: 0;
+            border-left: 3px solid #fff;
+          }
+        }
+        @media (min-height: $min-height) {
+          ul.submenu {
+            body:not(.page-sidebar-closed) & {
+              margin-right: 35px;
+              margin-left: 0;
+              @include border-right(1px solid $sidebar-menu-bg-hover-color);
+              border-left: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_select2.scss

@@ -0,0 +1,705 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+/*
+Version: 3.4.6 Timestamp: Sat Mar 22 22:30:15 EDT 2014
+*/
+.select2-container {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+  vertical-align: middle;
+
+  /* inline-block for ie7 */
+  zoom: 1;
+}
+
+.select2-container,
+.select2-drop,
+.select2-search,
+.select2-search input {
+  /*
+    Force border-box so that % widths fit the parent
+    container without overlap because of margin/padding.
+    More Info : http://www.quirksmode.org/css/box.html
+  */
+  -webkit-box-sizing: border-box; /* webkit */
+  -moz-box-sizing: border-box; /* firefox */
+  box-sizing: border-box; /* css3 */
+}
+
+.select2-container .select2-choice {
+  position: relative;
+  display: block;
+  height: 26px;
+  padding: 0 0 0 8px;
+  overflow: hidden;
+  line-height: 26px;
+  color: #444;
+  text-decoration: none;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  background-color: #fff;
+  // stylelint-disable-next-line
+  background-image: linear-gradient(to top, #eee 0%, #fff 50%);
+
+  background-clip: padding-box;
+
+  border: 1px solid #aaa;
+
+  border-radius: 4px;
+
+  -webkit-touch-callout: none;
+}
+
+.select2-container.select2-drop-above .select2-choice {
+  border-bottom-color: #aaa;
+  border-radius: 0 0 4px 4px;
+}
+
+.select2-container.select2-allowclear .select2-choice .select2-chosen {
+  margin-right: 42px;
+}
+
+.select2-container .select2-choice > .select2-chosen {
+  display: block;
+  float: none;
+  width: auto;
+  margin-right: 26px;
+  overflow: hidden;
+
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+}
+
+.select2-container .select2-choice abbr {
+  position: absolute;
+  top: 8px;
+  right: 24px;
+  display: none;
+  width: 12px;
+  height: 12px;
+
+  font-size: 1px;
+  text-decoration: none;
+  cursor: pointer;
+  background: url("../img/select2.png") right top no-repeat;
+
+  border: 0;
+  outline: 0;
+}
+
+.select2-container.select2-allowclear .select2-choice abbr {
+  display: inline-block;
+}
+
+.select2-container .select2-choice abbr:hover {
+  cursor: pointer;
+  background-position: right -11px;
+}
+
+.select2-drop-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9998;
+  width: auto;
+  min-width: 100%;
+  height: auto;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+
+  /* styles required for IE to work */
+  background-color: #fff;
+  filter: alpha(opacity=0);
+  border: 0;
+  opacity: 0;
+}
+
+.select2-drop {
+  position: absolute;
+  top: 100%;
+  z-index: 9999;
+  width: 100%;
+  margin-top: -1px;
+  color: #000;
+
+  background: #fff;
+  border: 1px solid #ccc;
+  border-top: 0;
+
+  border-radius: 0 0 4px 4px;
+
+  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+}
+
+.select2-drop.select2-drop-above {
+  margin-top: 1px;
+  border-top: 1px solid #aaa;
+  border-bottom: 0;
+
+  border-radius: 4px 4px 0 0;
+
+  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+}
+
+.select2-drop-active {
+  border-top: none;
+}
+
+.select2-drop-auto-width {
+  width: auto;
+  border-top: 1px solid #aaa;
+}
+
+.select2-drop-auto-width .select2-search {
+  padding-top: 4px;
+}
+
+.select2-container .select2-choice .select2-arrow {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-block;
+  width: 18px;
+  height: 100%;
+  background-color: #eee;
+  background-clip: padding-box;
+  border-left: 1px solid #ccc;
+  border-radius: 0 4px 4px 0;
+}
+
+.select2-container .select2-choice .select2-arrow b {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url("../img/select2.png") no-repeat 0 1px;
+}
+
+.select2-search {
+  position: relative;
+  z-index: 10000;
+  display: inline-block;
+  width: 100%;
+  min-height: 26px;
+  padding-top: 4px;
+  padding-right: 4px;
+  padding-left: 4px;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.select2-search input {
+  width: 100%;
+  height: auto !important;
+  min-height: 26px;
+  padding: 4px 20px 4px 5px;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+
+  background: #fff url("../img/select2.png") no-repeat 100% -22px;
+  background: url("../img/select2.png") no-repeat 100% -22px;
+
+  border: 1px solid #aaa;
+  border-radius: 0;
+
+  outline: 0;
+
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.select2-drop.select2-drop-above .select2-search input {
+  margin-top: 4px;
+}
+
+.select2-search input.select2-active {
+  background: #fff url("../img/select2-spinner.gif") no-repeat 100%;
+  background: url("../img/select2-spinner.gif") no-repeat 100%;
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices {
+  outline: none;
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.select2-dropdown-open .select2-choice {
+
+  background-color: #eee;
+  border-bottom-color: transparent;
+  border-bottom-right-radius: 0;
+
+  border-bottom-left-radius: 0;
+  -webkit-box-shadow: 0 1px 0 #fff inset;
+  box-shadow: 0 1px 0 #fff inset;
+}
+
+.select2-dropdown-open.select2-drop-above .select2-choice,
+.select2-dropdown-open.select2-drop-above .select2-choices {
+  border-top-color: transparent;
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow {
+  background: transparent;
+  filter: none;
+  border-left: none;
+}
+
+.select2-dropdown-open .select2-choice .select2-arrow b {
+  background-position: -18px 1px;
+}
+
+.select2-hidden-accessible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+
+/* results */
+.select2-results {
+  position: relative;
+  max-height: 200px;
+  padding: 0 0 0 4px !important;
+  margin: 4px 4px 4px 0 !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.select2-results ul.select2-result-sub {
+  padding-left: 0;
+  margin: 0;
+}
+
+.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px; }
+
+.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px; }
+
+.select2-results li {
+  display: list-item;
+  list-style: none;
+  background-image: none;
+}
+
+.select2-results li.select2-result-with-children > .select2-result-label {
+  font-weight: 700;
+}
+
+.select2-results .select2-result-label {
+
+  min-height: 1em;
+  padding: 3px 7px 4px;
+  margin: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-touch-callout: none;
+}
+
+.select2-results .select2-highlighted {
+  color: #fff;
+  background: #3875d7;
+}
+
+.select2-results li em {
+  font-style: normal;
+  background: #feffde;
+}
+
+.select2-results .select2-highlighted em {
+  background: transparent;
+}
+
+.select2-results .select2-highlighted ul {
+  color: #000;
+  background: #fff;
+}
+
+
+.select2-results .select2-no-results,
+.select2-results .select2-searching,
+.select2-results .select2-selection-limit {
+  display: list-item;
+  padding: 5px;
+  background: #f4f4f4;
+}
+
+/*
+disabled look for disabled choices in the results dropdown
+*/
+.select2-results .select2-disabled.select2-highlighted {
+  display: list-item;
+  color: #666;
+  cursor: default;
+  background: #f4f4f4;
+}
+
+.select2-results .select2-disabled {
+  display: list-item;
+  cursor: default;
+  background: #f4f4f4;
+}
+
+.select2-results .select2-selected {
+  display: none;
+}
+
+.select2-more-results.select2-active {
+  background: #f4f4f4 url("../img/select2-spinner.gif") no-repeat 100%;
+}
+
+.select2-more-results {
+  display: list-item;
+  background: #f4f4f4;
+}
+
+/* disabled styles */
+
+.select2-container.select2-container-disabled .select2-choice {
+  cursor: default;
+  background-color: #f4f4f4;
+  background-image: none;
+  border: 1px solid #ddd;
+}
+
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
+  background-color: #f4f4f4;
+  background-image: none;
+  border-left: 0;
+}
+
+.select2-container.select2-container-disabled .select2-choice abbr {
+  display: none;
+}
+
+
+/* multiselect */
+
+.select2-container-multi .select2-choices {
+  position: relative;
+  height: auto !important;
+  height: 1%;
+  min-height: 26px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  cursor: text;
+  background-color: #fff;
+  border: 1px solid #aaa;
+}
+
+.select2-locked {
+  padding: 3px 5px !important;
+}
+
+.select2-container-multi.select2-container-active .select2-choices {
+  outline: none;
+  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.select2-container-multi .select2-choices li {
+  float: left;
+  list-style: none;
+}
+
+html[dir="rtl"] .select2-container-multi .select2-choices li
+{
+  float: right;
+}
+
+.select2-container-multi .select2-choices .select2-search-field {
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input {
+  padding: 5px;
+  margin: 1px 0;
+
+  font-family: sans-serif;
+  font-size: 100%;
+  color: #666;
+  background: transparent !important;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.select2-container-multi .select2-choices .select2-search-field input.select2-active {
+  background: #fff url("../img/select2-spinner.gif") no-repeat 100% !important;
+}
+
+.select2-default {
+  color: #999 !important;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+  position: relative;
+  padding: 3px 5px 3px 18px;
+  margin: 3px 0 3px 5px;
+
+  line-height: 13px;
+  color: #333;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  background-color: #e4e4e4;
+  // stylelint-disable
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
+  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+  background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
+  // stylelint-enable
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr="#eeeeee", endColorstr="#f4f4f4", GradientType=0);
+
+  background-clip: padding-box;
+  border: 1px solid #aaa;
+
+  border-radius: 3px;
+
+  -webkit-touch-callout: none;
+}
+
+html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
+{
+  margin-right: 5px;
+  margin-left: 0;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
+  cursor: default;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice-focus {
+  background: #d4d4d4;
+}
+
+.select2-search-choice-close {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  display: block;
+  width: 12px;
+  height: 13px;
+
+  font-size: 1px;
+  background: url("../img/select2.png") right top no-repeat;
+  outline: none;
+}
+
+html[dir="rtl"] .select2-search-choice-close {
+  right: auto;
+  left: 3px;
+}
+
+.select2-container-multi .select2-search-choice-close {
+  left: 3px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+  background-position: right -11px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+  background-position: right -11px;
+}
+
+/* disabled styles */
+.select2-container-multi.select2-container-disabled .select2-choices {
+  cursor: default;
+  background-color: #f4f4f4;
+  background-image: none;
+  border: 1px solid #ddd;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
+  padding: 3px 5px;
+  background-color: #f4f4f4;
+  background-image: none;
+  border: 1px solid #ddd;
+}
+
+.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
+  display: none;
+  background: none;
+}
+
+/* end multiselect */
+
+
+.select2-result-selectable .select2-match,
+.select2-result-unselectable .select2-match {
+  text-decoration: underline;
+}
+
+.select2-offscreen,
+.select2-offscreen:focus {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  border: 0 !important;
+  outline: 0 !important;
+}
+
+.select2-display-none {
+  display: none;
+}
+
+.select2-measure-scrollbar {
+  position: absolute;
+  top: -10000px;
+  left: -10000px;
+  width: 100px;
+  height: 100px;
+  overflow: scroll;
+}
+
+/* Retina-ize icons */
+
+// stylelint-disable-next-line
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
+  .select2-search input,
+  .select2-search-choice-close,
+  .select2-container .select2-choice abbr,
+  .select2-container .select2-choice .select2-arrow b {
+    background-image: url("../img/select2x2.png") !important;
+    background-repeat: no-repeat !important;
+    // stylelint-disable-next-line
+    background-size: 60px 40px !important;
+  }
+
+  .select2-search input {
+    background-position: 100% -21px !important;
+  }
+}
+
+
+.form-control .select2-choice {
+  border: 0;
+  border-radius: 2px;
+}
+
+.form-control .select2-choice .select2-arrow {
+  border-radius: 0 2px 2px 0;
+}
+
+.form-control.select2-container {
+  height: auto !important;
+  padding: 0;
+}
+
+.form-control.select2-container.select2-dropdown-open {
+  border-radius: 3px 3px 0 0;
+}
+
+.form-control .select2-container.select2-dropdown-open .select2-choices {
+  border-radius: 3px 3px 0 0;
+}
+
+.form-control.select2-container .select2-choices {
+  border: 0 !important;
+  border-radius: 3px;
+}
+
+.control-group.warning .select2-container .select2-choice,
+.control-group.warning .select2-container .select2-choices,
+.control-group.warning .select2-container-active .select2-choice,
+.control-group.warning .select2-container-active .select2-choices,
+.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.warning .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.warning .select2-container-multi.select2-container-active .select2-choices {
+  border: 1px solid #c09853 !important;
+}
+
+.control-group.warning .select2-container .select2-choice div {
+  background: #fcf8e3 !important;
+  border-left: 1px solid #c09853 !important;
+}
+
+.control-group.error .select2-container .select2-choice,
+.control-group.error .select2-container .select2-choices,
+.control-group.error .select2-container-active .select2-choice,
+.control-group.error .select2-container-active .select2-choices,
+.control-group.error .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.error .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.error .select2-container-multi.select2-container-active .select2-choices {
+  border: 1px solid #b94a48 !important;
+}
+
+.control-group.error .select2-container .select2-choice div {
+  background: #f2dede !important;
+  border-left: 1px solid #b94a48 !important;
+}
+
+.control-group.info .select2-container .select2-choice,
+.control-group.info .select2-container .select2-choices,
+.control-group.info .select2-container-active .select2-choice,
+.control-group.info .select2-container-active .select2-choices,
+.control-group.info .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.info .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.info .select2-container-multi.select2-container-active .select2-choices {
+  border: 1px solid #3a87ad !important;
+}
+
+.control-group.info .select2-container .select2-choice div {
+  background: #d9edf7 !important;
+  border-left: 1px solid #3a87ad !important;
+}
+
+.control-group.success .select2-container .select2-choice,
+.control-group.success .select2-container .select2-choices,
+.control-group.success .select2-container-active .select2-choice,
+.control-group.success .select2-container-active .select2-choices,
+.control-group.success .select2-dropdown-open.select2-drop-above .select2-choice,
+.control-group.success .select2-dropdown-open.select2-drop-above .select2-choices,
+.control-group.success .select2-container-multi.select2-container-active .select2-choices {
+  border: 1px solid #468847 !important;
+}
+
+.control-group.success .select2-container .select2-choice div {
+  background: #dff0d8 !important;
+  border-left: 1px solid #468847 !important;
+}

admin_o2w/themes/default/scss/partials/_switch-btn.scss

@@ -0,0 +1,118 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+// on-off switch control
+.prestashop-switch {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 22px;
+  margin-top: 7px;
+
+  &-nolabel {
+    label {
+      display: none;
+    }
+  }
+
+  label {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 1;
+    padding-left: 45px;
+    margin: 0;
+    font-size: 14px;
+    font-weight: 500;
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+
+  .slide-button {
+    position: absolute;
+    top: 0;
+    z-index: 0;
+    display: block;
+    width: 36px;
+    height: 22px;
+    background: var(--#{$cdk}primary-800);
+    border: 0;
+    @include transition(0.25s ease-out);
+    @include border-radius(1000px);
+
+    &::after {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      content: "";
+      background: var(--#{$cdk}white);
+      @include border-radius(50%);
+      @include transition(0.25s ease-out);
+    }
+  }
+
+  &-center {
+    .slide-button {
+      position: inherit;
+      margin: auto;
+    }
+  }
+
+  input {
+    position: absolute;
+    left: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    opacity: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+
+      ~ .slide-button {
+        opacity: 0.2;
+      }
+    }
+
+    &:checked {
+      z-index: 0;
+    }
+
+    &:last-of-type:checked {
+      ~ label:last-of-type {
+        opacity: 1;
+      }
+
+      &:disabled ~ label:last-of-type {
+        opacity: 0.2;
+      }
+
+      ~ .slide-button {
+        background: var(--#{$cdk}primary-800);
+      }
+    }
+
+    &:first-of-type:checked {
+      ~ label:first-of-type {
+        opacity: 1;
+      }
+
+      &:disabled ~ label:first-of-type {
+        opacity: 0.2;
+      }
+
+      ~ .slide-button {
+        background: $brand-success;
+
+        &::after {
+          transform: translateX(14px);
+        }
+      }
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_tables.scss

@@ -0,0 +1,401 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.table {
+  thead {
+    > tr > th {
+      font-weight: 400;
+      vertical-align: top;
+      border: none;
+      border-bottom: 2px solid var(--#{$cdk}primary-800);
+
+      .title_box {
+        display: block;
+        color: var(--#{$cdk}primary-800);
+        word-wrap: nowrap;
+        white-space: nowrap;
+
+        &.active {
+          font-weight: 700;
+        }
+
+        a {
+          text-decoration: none;
+
+          .active {
+            color: var(--#{$cdk}primary-800);
+          }
+        }
+
+        .label-tooltip {
+          padding: 0 var(--#{$cdk}size-4);
+          color: var(--#{$cdk}primary-700);
+          background-color: var(--#{$cdk}primary-200);
+          border: none;
+          border-bottom: solid var(--#{$cdk}size-1) var(--#{$cdk}primary-200);
+        }
+      }
+    }
+
+    > tr.filter > th {
+      vertical-align: middle;
+      background-color: var(--#{$cdk}primary-100);
+      border-color: var(--#{$cdk}primary-400);
+      border-width: var(--#{$cdk}size-1);
+
+      input[type="text"].filter,
+      input[type="password"].filter {
+        padding: var(--#{$cdk}size-4);
+        font-size: var(--#{$cdk}size-12);
+      }
+
+      select.filter {
+        padding: var(--#{$cdk}size-4) var(--#{$cdk}size-16) var(--#{$cdk}size-4) var(--#{$cdk}size-4);
+      }
+    }
+  }
+
+  input,
+  select {
+    margin: 0;
+
+    &.center {
+      margin: 0 auto;
+    }
+  }
+
+  tbody {
+    > tr > td {
+      padding: var(--#{$cdk}size-4) var(--#{$cdk}size-8);
+      font-size: 12px;
+      color: var(--#{$cdk}primary-800);
+      word-wrap: nowrap;
+      vertical-align: middle;
+      background-color: var(--#{$cdk}white);
+      border-top: none;
+      border-bottom: solid 1px var(--#{$cdk}primary-400);
+    }
+
+    > tr.odd > td {
+      background-color: var(--#{$cdk}primary-200);
+    }
+
+    > tr:hover > td {
+      background-color: var(--#{$cdk}primary-100);
+    }
+  }
+
+  td.center,
+  th.center {
+    text-align: center;
+  }
+
+  td.pointer {
+    cursor: pointer;
+  }
+
+  td.dragHandle {
+    .dragGroup {
+      position: relative;
+      width: var(--#{$cdk}size-80);
+      padding: var(--#{$cdk}size-4) var(--#{$cdk}size-4) var(--#{$cdk}size-4) var(--#{$cdk}size-28);
+      font-size: $icon-size-base;
+      text-align: center;
+      cursor: move;
+      transition: all 0.3s;
+
+      &:hover {
+        color: var(--#{$cdk}white);
+        background-color: var(--#{$cdk}primary-800);
+      }
+
+      &::before {
+        @extend .icon;
+        @extend .icon-arrows;
+        position: absolute;
+        top: 50%;
+        left: var(--#{$cdk}size-6);
+        display: block;
+        width: var(--#{$cdk}size-16);
+        height: var(--#{$cdk}size-16);
+        transform: translateY(-7px);
+      }
+
+      .positions {
+        display: inline-block;
+        width: var(--#{$cdk}size-44);
+        padding: 0 var(--#{$cdk}size-4);
+        color: var(--#{$cdk}primary-600);
+        background-color: var(--#{$cdk}primary-200);
+        border: solid 1px var(--#{$cdk}primary-400);
+      }
+    }
+  }
+
+  tr.actions {
+    @include text-align(right);
+  }
+
+  tr.parent {
+    td {
+      background-color: var(--#{$cdk}primary-300) !important;
+      border-bottom: 1px solid var(--#{$cdk}primary-500) !important;
+    }
+  }
+
+  td.actions {
+    @include text-align(right);
+    padding-right: var(--#{$cdk}size-4);
+  }
+
+  th.actions .btn {
+    margin-bottom: var(--#{$cdk}size-4) !important;
+  }
+
+  tr.myDragClass {
+    padding: var(--#{$cdk}size-10);
+    background-color: var(--#{$cdk}primary-300);
+
+    td {
+      color: var(--#{$cdk}white);
+      background-color: $brand-primary !important;
+      transform: translate(5px, 10px);
+    }
+  }
+
+  &.tableDnD td {
+    @include transition-property(all);
+    @include transition-duration(0.2s);
+    @include transition-timing-function(ease-out);
+  }
+
+  .btn-group-action,
+  .btn-group {
+    .btn {
+      white-space: nowrap;
+    }
+  }
+}
+
+tr.highlighted td {
+  color: var(--#{$cdk}white);
+  background-color: $brand-primary !important;
+}
+
+.bulk-actions {
+  @include margin(17px, 0, 0, 0);
+
+  ul i {
+    font-size: 14px;
+  }
+}
+
+.list-action-enable {
+  display: inline-block;
+  width: 30px;
+  font-size: 1.3em;
+  color: rgba(var(--#{$cdk}white), 0.8);
+  text-align: center;
+  @include border-radius(3px);
+
+  &.action-enabled {
+    color: $brand-success;
+  }
+
+  &.action-disabled {
+    color: $brand-danger;
+  }
+
+  &:hover {
+    color: var(--#{$cdk}primary-800);
+  }
+}
+
+.list-empty {
+  background-color: var(--#{$cdk}primary-200) !important;
+
+  .list-empty-msg {
+    display: block;
+    width: 50%;
+    margin: var(--#{$cdk}size-20) auto;
+    font-family: $headings-font-family;
+    font-size: var(--#{$cdk}size-16);
+    color: var(--#{$cdk}primary-800);
+    text-align: center;
+  }
+
+  .list-empty-icon {
+    display: block;
+    clear: both;
+    font-size: $icon-size-base * 6;
+    color: var(--#{$cdk}primary-400);
+  }
+}
+
+.date_range .input-group:first-child {
+  margin-bottom: 5px;
+}
+@media (max-width: $screen-sm-max) {
+  .table-responsive-row {
+    overflow: visible;
+
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+    }
+
+    thead {
+      @include clearfix();
+
+      tr {
+        display: block;
+        float: left;
+        width: 70%;
+        margin-bottom: var(--#{$cdk}size-8);
+
+        &:first-child {
+          width: 30%;
+
+          th {
+            width: 100% !important;
+          }
+        }
+
+        &:first-child:last-child {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      height: var(--#{$cdk}size-60);
+      text-align: center;
+      border-color: var(--#{$cdk}primary-400) !important;
+      border-width: var(--#{$cdk}size-1) !important;
+    }
+
+    th .fixed-width-md {
+      float: left;
+    }
+
+    th .fixed-width-sm {
+      width: 100% !important;
+    }
+
+    tr {
+      width: 100%;
+      margin-bottom: var(--#{$cdk}size-8);
+      border: 1px solid var(--#{$cdk}primary-400);
+
+      &:last-child {
+        border-bottom: 1px solid var(--#{$cdk}primary-400);
+      }
+    }
+
+    td {
+      position: relative;
+      width: 100% !important;
+      min-height: var(--#{$cdk}size-40);
+      padding-left: calc(30% + var(--#{$cdk}size-16)) !important;
+      overflow: hidden;
+      font-size: 1.15em !important;
+      line-height: 2em !important;
+      text-align: left !important;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:last-child {
+        padding: 0 !important;
+        text-align: right !important;
+        border: none;
+
+        &::before {
+          content: none !important;
+        }
+      }
+
+      .btn-group-action {
+        .dropdown-toggle {
+          display: none !important;
+        }
+
+        ul.dropdown-menu,
+        .dropdown-menu li {
+          position: relative;
+          z-index: 13;
+          display: inline-block;
+          float: right;
+          padding: 0;
+          margin: 0;
+          background: transparent;
+          border: none;
+          @include box-shadow(none);
+        }
+      }
+
+      .dropdown-menu li a,
+      a.btn,
+      button.btn {
+        z-index: 13;
+        display: inline-block;
+        float: right;
+        padding: 12px 10px !important;
+        margin: 0 !important;
+        margin-right: 5px;
+        font-weight: 700;
+        color: $brand-primary;
+        background-color: var(--#{$cdk}white);
+        border: none;
+        border-left: 1px solid #eaedef;
+        @include box-shadow(none);
+        @include border-radius(0);
+
+        i {
+          color: $brand-primary;
+        }
+
+        &:hover {
+          color: var(--#{$cdk}white);
+          background-color: $brand-primary;
+
+          i {
+            color: var(--#{$cdk}white);
+          }
+        }
+      }
+    }
+
+    .odd td {
+      background-color: var(--#{$cdk}primary-200);
+    }
+
+    td.row-selector {
+      display: none;
+    }
+
+    td::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30%;
+      height: 100%;
+      padding-right: var(--#{$cdk}size-16);
+      padding-left: var(--#{$cdk}size-8);
+      font-size: 0.9em;
+      font-style: italic;
+      color: var(--#{$cdk}primary-600);
+      text-align: right;
+      white-space: nowrap;
+      border-right: 1px solid var(--#{$cdk}primary-400);
+    }
+
+    .btn-group {
+      float: none !important;
+    }
+  }
+}

admin_o2w/themes/default/scss/partials/_toolbar.scss

@@ -0,0 +1,244 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.page-head {
+  position: fixed;
+  top: var(--#{$cdk}header-height);
+  left: 0;
+  z-index: 499;
+  width: 100%;
+  padding: 0 0 0 var(--#{$cdk}sidebar-width);
+  margin: 0;
+  color: var(--#{$cdk}primary-800);
+  background-color: var(--#{$cdk}white);
+  border-bottom: 1px solid var(--#{$cdk}primary-400);
+  transition: padding-left var(--#{$cdk}default-transition-duration);
+
+  // Remove padding because menu is hide
+  @include media-breakpoint-down(md) {
+    padding: 0;
+  }
+
+  &.with-tabs {
+    border-bottom: none;
+  }
+
+  // Edit structure
+  > .wrapper {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: var(--#{$cdk}size-8);
+    padding: var(--#{$cdk}size-16);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    &:has(.page-subtitle) {
+      .toolbarBox {
+        grid-row: 1 / span 3;
+      }
+    }
+
+    .breadcrumb,
+    .page-title,
+    .page-subtitle {
+      grid-column: 1;
+      padding: 0;
+      margin: 0;
+    }
+
+    .btn-toolbar {
+      margin: 0;
+    }
+
+    .toolbarBox {
+      display: flex;
+      flex-wrap: wrap;
+      grid-row: 1 / span 2;
+      grid-column: 2;
+      gap: var(--#{$cdk}size-8);
+      justify-content: end;
+    }
+
+    .dropdown-toolbar {
+      @extend .btn;
+      @extend .btn-default;
+      display: none !important;
+      float: right;
+      margin: 0;
+
+      @media (max-width: $screen-sm) {
+        display: inline-flex !important;
+      }
+    }
+
+    .nav-pills {
+      display: flex !important;
+      flex-wrap: wrap;
+      gap: var(--#{$cdk}size-8);
+      justify-content: flex-end;
+      padding: 0;
+
+      &::before,
+      &::after {
+        display: none;
+      }
+
+      li {
+        margin: 0;
+      }
+
+      &.collapse {
+        display: flex !important;
+      }
+
+      .toolbar_btn {
+        &.btn-help {
+          @extend .btn;
+          @extend .btn-default;
+        }
+
+        &:not(.btn-help) {
+          @extend .btn;
+          @extend .btn-primary;
+        }
+
+        i {
+          &.btn-primary {
+            background-color: transparent !important;
+          }
+
+          &.switch_demo {
+            width: auto;
+            color: var(--#{$cdk}white);
+          }
+
+          &.process-icon-loading {
+            line-height: 1 !important;
+          }
+        }
+      }
+    }
+
+    @media (max-width: $screen-sm) {
+      .btn-toolbar {
+        &:has(.dropdown-toolbar) {
+          display: grid;
+          grid-template-columns: repeat(1, minmax(0, 1fr));
+          justify-items: end;
+        }
+      }
+
+      .toolbarBox {
+        grid-row: 1 / span 1;
+      }
+
+      .nav-pills {
+        &.collapse {
+          display: none !important;
+        }
+
+        &.collapsing,
+        &.in {
+          display: flex !important;
+          padding: var(--#{$cdk}size-8) 0 0 0;
+        }
+      }
+    }
+  }
+
+  .page-title {
+    position: relative;
+    float: left;
+    padding: 0;
+    margin: 0 0 var(--#{$cdk}size-12) 0;
+    clear: left;
+    font-size: var(--#{$cdk}size-32);
+    font-weight: 600;
+    white-space: nowrap;
+
+    a {
+      border-bottom: dotted 1px var(--#{$cdk}white);
+
+      &:hover {
+        color: var(--#{$cdk}primary-800);
+        border-color: var(--#{$cdk}primary-800);
+      }
+    }
+  }
+
+  .page-subtitle {
+    margin: 0;
+  }
+
+  ul.page-breadcrumb {
+    float: left;
+    padding: 0 0 var(--#{$cdk}size-8) 0;
+    margin: 0;
+    font-size: var(--#{$cdk}size-12);
+    line-height: 1.5;
+    color: var(--#{$cdk}primary-600);
+    white-space: nowrap;
+    list-style: none;
+
+    li {
+      i {
+        font-size: var(--#{$cdk}size-12);
+      }
+
+      &::before {
+        color: var(--#{$cdk}primary-800);
+      }
+
+      a {
+        color: var(--#{$cdk}primary-800);
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .page-head-tabs {
+    clear: left;
+    background-color: var(--#{$cdk}white);
+
+    ul {
+      border-top: 1px solid var(--#{$cdk}primary-400);
+      border-bottom: 1px solid var(--#{$cdk}primary-400);
+    }
+
+    li {
+      display: inline-block;
+
+      a {
+        box-sizing: border-box;
+        padding: var(--#{$cdk}size-16) var(--#{$cdk}size-20);
+        font-size: var(--#{$cdk}size-14);
+        line-height: 1;
+        color: var(--#{$cdk}primary-700);
+        text-decoration: none !important;
+        vertical-align: middle;
+
+        &:hover {
+          color: var(--#{$cdk}primary-800);
+        }
+
+        &.current {
+          color: var(--#{$cdk}primary-700);
+          background-color: var(--#{$cdk}white);
+          border-bottom: 3px solid var(--#{$cdk}primary-800);
+        }
+      }
+    }
+  }
+}
+
+.page-header-toolbar-back {
+  display: inline-block;
+  border: none;
+}

admin_o2w/themes/default/scss/partials/_tooltips.scss

@@ -0,0 +1,10 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.tooltip {
+  &-inner {
+    padding: var(--#{$cdk}size-8);
+    box-shadow: var(--#{$cdk}shadow-xl);
+  }
+}

admin_o2w/themes/default/scss/partials/_tree.scss

@@ -0,0 +1,104 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+.tree-panel-heading-controls {
+  margin: 0 0 var(--#{$cdk}size-16) 0;
+
+  .tree-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--#{$cdk}size-4);
+
+    .pull-right {
+      order: 10;
+    }
+  }
+}
+
+.tree {
+  padding: 0 0 0 var(--#{$cdk}size-16);
+  margin: 0;
+  list-style: none;
+
+  input {
+    margin: 0;
+    line-height: normal;
+    vertical-align: baseline;
+  }
+
+  i {
+    font-size: $icon-size-base;
+  }
+
+  .tree-item-name,
+  .tree-folder-name {
+    display: inline-flex;
+    gap: var(--#{$cdk}size-8);
+    align-items: center;
+    padding: var(--#{$cdk}size-2) var(--#{$cdk}size-4);
+    margin: var(--#{$cdk}size-2) 0;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--#{$cdk}primary-200);
+    }
+
+    label {
+      margin: 0;
+    }
+  }
+
+  .tree-selected {
+    background-color: var(--#{$cdk}primary-200);
+
+    &:hover {
+      background-color: var(--#{$cdk}primary-400);
+    }
+  }
+
+  i.tree-dot {
+    position: relative;
+    display: inline-block;
+    width: var(--#{$cdk}size-6);
+    height: var(--#{$cdk}size-6);
+    background-color: var(--#{$cdk}primary-500);
+    border-radius: var(--#{$cdk}size-6);
+  }
+
+  .tree-item-disable,
+  .tree-folder-name-disable {
+    color: var(--#{$cdk}primary-300);
+
+    &:hover {
+      color: var(--#{$cdk}primary-300);
+      background-color: none;
+    }
+  }
+}
+
+.tree-actions {
+  display: inline-block;
+
+  .twitter-typeahead {
+    position: relative;
+    top: var(--#{$cdk}size-1);
+    padding: 0 0 0 var(--#{$cdk}size-4);
+  }
+
+  .tt-hint {
+    // stylelint-disable-next-line
+    left: var(--#{$cdk}size-4) !important;
+    color: var(--#{$cdk}primary-300);
+  }
+
+  .search-field[type="text"]{
+    margin: 0;
+  }
+}
+
+.tree-panel-label-title {
+  padding: 0 0 0 var(--#{$cdk}size-8);
+  margin: 0;
+  font-weight: 400;
+}

admin_o2w/themes/default/scss/partials/index.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+
+header("Location: ../");
+exit;