Initial commit

This commit is contained in:
2020-10-07 10:37:15 +02:00
commit ce5f440392
28157 changed files with 4429172 additions and 0 deletions

View File

@@ -0,0 +1,10 @@
@import "../config/settings";
.dropdown-toggle {
&.dropdown-toggle-dots {
&::after {
color: $medium-gray;
content: "more_vert";
}
}
}

View File

@@ -0,0 +1,286 @@
//
// Base styles
//
.card {
position: relative;
display: block;
margin-bottom: $card-spacer-y;
background-color: $card-bg;
border: $card-border-width solid $card-border-color;
border-radius: $card-border-radius;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.06);
}
.card-block {
padding: $card-spacer-x;
}
.card-title {
margin-bottom: $card-spacer-y;
}
.card-subtitle {
margin-top: -($card-spacer-y / 2);
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
// .card-actions {
// padding: $card-spacer-y $card-spacer-x;
// .card-link + .card-link {
// margin-left: $card-spacer-x;
// }
// }
.card-link {
@include hover {
text-decoration: none;
}
+ .card-link {
margin-left: $card-spacer-x;
}
}
@if $enable-rounded {
.card {
> .list-group:first-child {
.list-group-item:first-child {
border-radius: $card-border-radius $card-border-radius 0 0;
}
}
> .list-group:last-child {
.list-group-item:last-child {
border-radius: 0 0 $card-border-radius $card-border-radius;
}
}
}
}
//
// Optional textual caps
//
.card-header {
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
font-weight: 600;
line-height: 1.5rem; // same as material icons
.card-header-title {
font-weight: 600;
line-height: 1.5rem;
}
&:first-child {
border-radius: $card-border-radius-inner $card-border-radius-inner 0 0;
}
.material-icons {
vertical-align: text-bottom;
color: $medium-gray;
margin-right: 5px;
}
h3 {
margin-bottom: 0;
}
// toolbar buttons at the top of the card
.btn-toolbar {
.btn {
padding: 0 .125rem;
}
}
}
.card-footer {
padding: $card-spacer-y $card-spacer-x * 1.5;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
&:last-child {
border-radius: 0 0 $card-border-radius-inner $card-border-radius-inner;
}
}
//
// Background variations
//
.card-primary {
@include card-variant($brand-primary, $brand-primary);
}
.card-success {
@include card-variant($brand-success, $brand-success);
}
.card-info {
@include card-variant($brand-info, $brand-info);
}
.card-warning {
@include card-variant($brand-warning, $brand-warning);
}
.card-danger {
@include card-variant($brand-danger, $brand-danger);
}
// Remove all backgrounds
.card-primary-outline {
@include card-outline-variant($btn-primary-bg);
}
.card-secondary-outline {
@include card-outline-variant($btn-secondary-border);
}
.card-info-outline {
@include card-outline-variant($btn-info-bg);
}
.card-success-outline {
@include card-outline-variant($btn-success-bg);
}
.card-warning-outline {
@include card-outline-variant($btn-warning-bg);
}
.card-danger-outline {
@include card-outline-variant($btn-danger-bg);
}
//
// Inverse text within a card for use with dark backgrounds
//
.card-inverse {
@include card-inverse;
}
//
// Blockquote
//
.card-blockquote {
padding: 0;
margin-bottom: 0;
border-left: 0;
}
// Card image
.card-img {
// margin: -1.325rem;
border-radius: .25rem;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
// Card image caps
.card-img-top {
border-radius: $card-border-radius-inner $card-border-radius-inner 0 0;
}
.card-img-bottom {
border-radius: 0 0 $card-border-radius-inner $card-border-radius-inner;
}
//
// Card set
//
@include media-breakpoint-up(sm) {
.card-deck {
display: flex;
flex-flow: row wrap;
margin-right: -.625rem;
margin-left: -.625rem;
.card {
flex: 1 0 0;
margin-right: .625rem;
margin-left: .625rem;
}
}
}
//
// Card groups
//
@include media-breakpoint-up(sm) {
.card-group {
display: flex;
flex-flow: row wrap;
.card {
flex: 1 0 0;
+ .card {
margin-left: 0;
border-left: 0;
}
// Handle rounded corners
@if $enable-rounded {
&:first-child {
@include border-right-radius(0);
.card-img-top {
border-top-right-radius: 0;
}
.card-img-bottom {
border-bottom-right-radius: 0;
}
}
&:last-child {
@include border-left-radius(0);
.card-img-top {
border-top-left-radius: 0;
}
.card-img-bottom {
border-bottom-left-radius: 0;
}
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
.card-img-top,
.card-img-bottom {
border-radius: 0;
}
}
}
}
}
}
//
// Card
//
@include media-breakpoint-up(sm) {
.card-columns {
column-count: 3;
column-gap: 1.25rem;
.card {
display: inline-block;
width: 100%; // Don't let them exceed the column width
}
}
}

View File

@@ -0,0 +1,99 @@
ul.category-tree {
padding: 0;
.less,
.more {
background: none;
position: relative;
> .checkbox,
> .radio {
cursor: pointer;
&::before {
position: absolute;
font-family: 'Material Icons';
cursor: pointer;
font-size: 1.25rem;
color: $gray-medium;
top: -0.25rem;
left: -0.1rem;
}
}
}
.less {
> .checkbox,
> .radio {
&::before {
content: "\E313";
}
}
}
.more {
> .checkbox,
> .radio {
&::before {
content: "\E5CC";
}
}
}
.category-label {
display: block;
padding-left: 0;
position: relative;
.category {
cursor: pointer;
position: absolute;
top: .4em; // relative to the current font size, so "em" and not "rem"
right: .4em;
}
}
ul {
padding-left: 1.563rem;
}
li {
list-style: none;
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: 0 3px;
.checkbox,
.radio {
padding-left: 20px;
padding-top: 0;
}
}
}
// category tree on the catalog page
#tree-categories {
padding: 0.625rem;
.categories-tree-actions {
border-bottom: .063rem solid $gray-light;
margin-bottom: .625rem;
white-space: nowrap; // prevent buttons from collapsing
> a {
display: inline-block;
margin-bottom: .625rem;
+ a {
margin-left: 0.9375rem;
}
&:hover {
text-decoration: none;
}
i.material-icons {
font-size: 1.25rem;
vertical-align: bottom;
}
color: $gray-medium;
}
}
#choice_tree {
.category-tree {
margin-bottom: 0;
}
}
}

View File

@@ -0,0 +1,5 @@
.choice-table {
max-height: 300px;
overflow-y: auto;
}

View File

@@ -0,0 +1,3 @@
.cursor-pointer {
cursor: pointer;
}

View File

@@ -0,0 +1,11 @@
.datepicker {
.prev span::before, .next span::before {
font-family: 'Material Icons';
}
.prev span::before {
content: "\E314";
}
.next span::before {
content: "\E315";
}
}

View File

@@ -0,0 +1,9 @@
.dropzone .dz-preview .dz-progress {
height: 10px;
background: none;
background-color: #363a41;
> .dz-upload {
background: none;
background-color: #25b9d7;
}
}

View File

@@ -0,0 +1,73 @@
/*!
* 2007-2019 PrestaShop and Contributors
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/OSL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2019 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*
*/
.form-horizontal {
.card-block {
justify-content: center;
padding: 1.875rem $card-spacer-x;
&.row {
margin: 0; // used to override negative margins brought by .row
}
}
.card-text {
@extend .col-sm-10;
}
.form-group.row {
margin-bottom: 1.2rem;
// label column in forms
> .form-control-label:first-of-type {
@extend .col-sm-4;
@extend .col-form-label;
@include media-breakpoint-up('sm') {
text-align: right;
padding-right: 25px;
}
}
}
// make ps-switch align with label
.ps-switch:not(.ps-switch-lg) {
@include media-breakpoint-up('sm') {
margin-top: 5px;
}
}
// small size form controls
.size-small {
width: 150px;
}
.custom-file {
input {
outline: none;
}
}
}

View File

@@ -0,0 +1,28 @@
.form-group {
[class^="popover-error-container"] {
.popover {
max-width: inherit !important;
border: inherit !important;
border-radius: 5px;
box-shadow: 0px 1px 10px lightgrey;
.popover-body {
padding: 15px 15px 15px 15px;
}
.popover-error-list {
ul {
padding-left: 18px;
margin-bottom: 0;
}
li {
font-family: Open Sans,Helvetica,Arial,sans-serif;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
}
}
}
}
}

View File

@@ -0,0 +1,153 @@
.grid-toggler-icon-valid {
color: #78d07d;
cursor: pointer;
}
.grid-toggler-icon-not-valid {
color: #c05c67;
cursor: pointer;
}
table.grid-ordering-column tr {
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-out;
&.hover {
background-color: $gray-soft;
}
&:hover {
.position-drag-handle {
visibility: visible;
}
}
}
table.grid-ordering-column tr.position-row-while-drag {
box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.2);
color: white;
transform: translate(5px,10px);
background: none;
td {
background-color: $medium-gray;
}
td:first-child { border-top-left-radius: 3px; }
td:first-child { border-bottom-left-radius: 3px; }
td:last-child { border-top-right-radius: 3px; }
td:last-child { border-bottom-right-radius: 3px; }
.position-drag-handle,
.position-drag-handle:hover,
.btn, .btn:after, .btn .material-icons {
color: white;
}
}
.js-drag-handle {
cursor: move;
}
.position-drag-handle {
color: $gray-medium;
visibility: hidden;
&:hover {
color: $primary;
}
}
.btn-group-action {
a.dropdown-toggle,
button.dropdown-toggle,
.dropdown-toggle {
color: $gray-medium;
&:after {
content: "more_vert";
}
&:hover {
color: $primary;
}
}
}
table .thead-default .column-headers th:last-child .grid-actions-header-text {
float: right;
span {
padding-right: 14px;
}
}
table .column-filters td:last-child .grid-search-button,
table .column-filters td:last-child .grid-reset-button {
float: right;
}
.grid {
table.grid-table {
tbody {
tr {
$tr: &;
&:hover {
background: #fafbfc;
}
// styling for row that is being dragged
&.dragging-row {
background: #fafbfc;
cursor: move;
td {
background: #67868e;
color: white;
-webkit-transform: translate(5px, 10px);
transform: translate(5px, 10px);
// make all icons and links white
i.grid-toggler-icon-valid,
i.grid-toggler-icon-not-valid,
i.material-icons,
a,
a:after {
color: white;
}
}
}
// ---------------------------------
// Styling for specific column types
// ---------------------------------
td {
word-break: break-word;
&.draggable-type {
.draggable-column {
color: transparent;
cursor: move;
}
@at-root {
#{$tr}:hover .draggable-column {
color: #15b7d7 !important;
}
}
}
&.action-type {
.btn-group > .dropdown-item {
&:hover,
&:focus {
background-color: transparent;
}
}
}
}
}
}
}
.table-responsive .row {
margin: 0;
}
}

View File

@@ -0,0 +1,25 @@
.help-box {
display: inline-block;
box-sizing: border-box;
color: $brand-primary;
background-color: $notice;
height: 1rem;
width: 1rem;
font-weight: bold;
font-size: 10px;
line-height: 12px;
vertical-align: middle;
text-align: center;
border: 2px solid $brand-primary;
cursor: pointer;
padding: 0;
margin: 0 5px 2px;
&:after {
content: '?'
}
&:focus {
outline: none;
}
}

View File

@@ -0,0 +1,100 @@
.material-choice-tree-container {
padding: .625rem;
border: 1px solid $gray-light;
.choice-tree-actions {
border-bottom: .063rem solid $gray-light;
margin-bottom: 10px;
}
ul.choice-tree {
padding: 0;
margin: 0;
li {
list-style: none;
background-size: 12px 12px;
background: no-repeat 0 3px;
.checkbox,
.radio {
padding-left: 20px;
padding-top: 0;
}
.checkbox {
i.md-checkbox-control {
// make material checkbox smaller
&::before {
width: 16px;
height: 16px;
margin-top: 3px;
}
}
input[type="checkbox"] {
&:checked,
&:indeterminate {
+ i.md-checkbox-control {
&:after {
// make material checkmark smaller
top: 5px;
left: 3px;
width: 11px;
height: 7px;
}
}
}
}
}
ul {
padding-left: 1rem;
}
}
.collapsed,
.expanded {
background: none;
position: relative;
> .checkbox,
> .radio {
cursor: pointer;
&::before {
position: absolute;
font-family: 'Material Icons';
cursor: pointer;
font-size: 1.25rem;
color: $gray-medium;
top: -0.25rem;
left: -0.1rem;
}
}
}
.expanded {
> .checkbox,
> .radio {
&::before {
content: "\E313";
}
}
}
.collapsed {
// hide inner tree when item is collapsed
> ul {
display: none;
}
> .checkbox,
> .radio {
&::before {
content: "\E5CC";
}
}
}
}
}

View File

@@ -0,0 +1,268 @@
.module-item-wrapper-grid {
@extend .card;
@extend .card-block;
border: none;
border-radius: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
min-height: 415px;
.module-item-heading-grid {
position: relative;
text-align: center;
.module-logo-thumb-grid {
text-align: center;
width: 100%;
> img {
max-width: $module-logo-size;
max-height: $module-logo-size;
}
width: $module-logo-size;
height: $module-logo-size;
text-align: center;
margin: 0 auto;
border-radius: 0;
}
.module-name-grid {
@extend .card-title;
position: relative;
text-align: center;
font-weight: bolder;
margin: 1rem 0 .5rem;
min-height: 40px;
}
.module-version-author-grid {
@extend .card-title;
text-align: center;
font-weight: lighter;
color: $gray-medium;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
b {
font-weight: lighter;
}
}
}
.module-container {
text-align:center;
}
.module-star-ranking-grid {
@include stars($ps-stars);
}
.module-quick-action-grid {
display: inline;
color: $gray-dark;
.module-actions {
position: absolute;
bottom: 10px;
width: 100%;
left: 0;
}
.light-button {
height: 32px;
font-size: 0.625rem;
padding: 0.5rem;
width: 92%;
float: none;
margin: 0 auto;
}
.onclick {
margin-bottom: -7px;
}
}
.module-quick-description-grid {
margin: 15px 0;
text-align: center;
min-height: 100px;
.module-read-more-grid {
display: inline-block;
.module-read-more-grid-btn {
font-weight: bold;
}
}
}
}
/**
* Marketplace Module card
**/
.module-addons-item-grid {
height: 258px;
margin-bottom: 0.75rem;
display: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
.module-addons-item-wrapper-grid {
@extend .module-item-wrapper-grid;
height: 100%;
vertical-align: middle;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
.module-icon-addons-exit-grid {
display: block;
padding-bottom: 20px;
}
}
}
/**
* Facebook-like module cards
**/
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
.module-placeholders-wrapper {
.timeline-item-wrapper {
@extend .module-item-wrapper-grid;
height: 250px;
.animated-background {
-webkit-animation-duration: 1.75s;
animation-duration: 1.75s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #f6f7f8;
background: #eeeeee;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-webkit-background-size: 800px 104px;
background-size: 800px 104px;
height: 96px;
position: relative;
.background-masker {
background: #fff;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
}
}
.outlined .background-masker {
border: 1px solid #ddd;
}
.outlined:hover .background-masker {
border: none;
}
.outlined:hover .background-masker:hover {
border: 1px solid #ccc;
z-index: 1;
}
.background-masker.header-top, .background-masker.header-bottom, .background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
}
.background-masker.header-left, .background-masker.subheader-left, .background-masker.header-right, .background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
}
.background-masker.header-bottom {
top: 18px;
height: 6px;
}
.background-masker.subheader-left, .background-masker.subheader-right {
top: 24px;
height: 6px;
}
.background-masker.header-right, .background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
}
.background-masker.subheader-right {
left: 230px;
}
.background-masker.subheader-bottom {
top: 30px;
height: 10px;
}
.background-masker.content-top, .background-masker.content-second-line, .background-masker.content-third-line, .background-masker.content-second-end, .background-masker.content-third-end, .background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}
.background-masker.content-top {
height: 20px;
}
.background-masker.content-first-end, .background-masker.content-second-end, .background-masker.content-third-end {
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
}
.background-masker.content-second-line {
top: 68px;
}
.background-masker.content-second-end {
left: 420px;
top: 74px;
}
.background-masker.content-third-line {
top: 82px;
}
.background-masker.content-third-end {
left: 300px;
top: 88px;
}
.module-placeholders-wrapper {
margin-top: 76px;
}
.modal-read-more {
.modal-dialog {
max-width: none;
}
}
.module-modal-footer {
display: block;
}

View File

@@ -0,0 +1,186 @@
.notification-center {
> .notification {
padding: 9px 5px;
border: none;
color: $medium-gray;
background: transparent;
> .material-icons {
font-size: 1.375rem;
line-height: 1.375rem;
vertical-align: middle;
}
> .count {
@include notification_counter();
&.hide {
display: none;
}
}
}
> .notification::after {
display: none;
}
.dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
min-width: 25rem;
}
.notifications {
font-size: $font-size-base;
margin: 0;
padding: 0;
border-radius: 0;
min-width: 25rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
top: 42px;
right: 5px !important;
&:before, &:after {
bottom: 100%;
right: 9px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: transparent;
border-bottom-color: white;
border-width: 7px;
margin-right: 1px;
}
&:before {
border-color: transparent;
border-bottom-color: #bbcdd2;
border-width: 8px;
margin-left: -8px;
}
.nav {
.nav-item {
margin-left: 0;
width: 33%;
text-align: center;
}
.nav-link {
color: $gray-medium;
font-weight: $font-weight-normal;
padding: 0.9375rem 0.9375rem 0.625rem 0.9375rem;
&.active {
border-top: 0;
border-bottom: 2px solid $nav-tabs-active-link-hover-border-color;
color: $gray-dark;
}
&:hover {
color: $link-color;
}
}
}
.tab-content {
border-top: 0.125rem solid $gray-light;
padding: 0;
margin-top: -0.0625rem;
> .tab-pane {
height: 11.88rem;
overflow-y: auto;
.no-notification {
display: none;
}
&.empty {
color: $gray-medium;
text-align: center;
&::after {
content: "\E7F5";
font-family: "Material Icons";
opacity: 0.7;
font-size: 5.625rem;
color: $gray-light;
}
> .no-notification {
position: absolute;
bottom: 0;
width: 100%;
display: block;
.mobile & {
bottom: 3.125rem;
}
}
}
}
.notif {
display: block;
padding: 0.625rem 0.9375rem;
color: $gray-medium;
.material-icons {
vertical-align: top;
}
.message-notification-status {
&.open {
color: $brand-success;
}
&.closed {
color: $brand-danger;
}
&.pending1, &.pending2 {
color: $brand-secondary;
}
}
strong {
color: $gray-dark;
}
&:hover {
background-color: $dropdown-link-hover-bg;
color: $dropdown-link-hover-color;
text-decoration: none;
strong {
color: $dropdown-link-hover-color;
}
}
}
}
}
.mobile & {
.nav-link::before {
font-family: 'Material Icons';
display: block;
font-size: 30px;
color: $gray-dark;
}
#orders-tab::before {
content: "\E8CB";
}
#customers-tab::before {
content: "\E7FE";
}
#messages-tab::before {
content: "\E0BE";
}
.no-notification {
top: 13.75rem;
}
}
}

View File

@@ -0,0 +1,40 @@
.ps-alert {
.close {
position: absolute;
right: 0.625rem;
top: 0.9375rem;
opacity: 1;
.material-icons {
font-size: 1.5rem;
.alert-info & {
color: $primary;
}
.alert-warning & {
color: $warning
}
.alert-danger & {
color: $danger;
}
}
}
.alert {
border-radius: 0;
border-width: 0.125rem;
padding: 0;
margin: 0;
&.alert-info {
background: $notice;
}
&.alert-warning {
background: $warning-hover;
}
&.alert-danger {
background: $danger-hover;
}
.alert-text {
padding: 0.9375rem 0 0.9375rem 0.9375rem;
margin-left: 3.438rem;
background: white;
}
}
}

View File

@@ -0,0 +1,63 @@
.ps-dropdown{
font-size: 1em;
padding: .188em 0;
background: #fff;
width: 100%;
line-height: 2.286em;
cursor: pointer;
&.bordered {
border: $gray-light 1px solid;
}
.dropdown-label {
padding: 0 0.5em;
flex-grow: 1;
}
.arrow-down{
font-size: 1.8em;
position: relative;
cursor: pointer;
color: $gray-medium;
line-height: 2rem;
}
> .ps-dropdown-menu {
z-index: 1;
width: 100%;
border-radius: 0;
min-width: 300px;
margin-top: 4px;
padding: 0;
.dropdown-item {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.items-list {
list-style-type: none;
padding: 0;
line-height: 0.75rem;
margin: 0;
.dropdown-item {
padding: 10px;
&.selected {
color: $gray-light;
}
&.selected span {
color: $gray-light;
}
&:hover {
background-color: $primary;
color: #fff;
span {
color: #fff;
}
}
span {
color: #AEAEAE;
font-size: 0.75rem;
padding: 0.25rem;
}
}
}
}
}

View File

@@ -0,0 +1,60 @@
.ps-number {
position: relative;
display: inline-block;
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}
.danger {
border: 1px solid $danger;
background-color: #fff;
color: $gray-dark;
&:focus {
outline: none;
}
}
.ps-number-spinner {
position: absolute;
top: 1px;
flex-direction: column;
right: 0;
cursor: pointer;
line-height: 17px;
}
&.hover-buttons {
.ps-number-spinner {
display: none;
opacity: 0;
}
&:hover .ps-number-spinner {
opacity: 1;
display: inline-block;
}
}
.ps-number-up::before {
font-family: 'Material Icons';
content: "\E5C7";
font-size: 20px;
color: $gray-dark;
position: relative;
}
.ps-number-down::before {
font-family: 'Material Icons';
content: "\E5C5";
font-size: 20px;
color: $gray-dark;
bottom: 6px;
position: relative;
}
}

View File

@@ -0,0 +1,56 @@
.ps-radio {
[type="radio"] {
position: absolute;
left: -9999px;
& + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: $gray-dark;
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 2px solid $gray-medium;
border-radius: 100%;
background: #ffffff;
}
&:after {
content: '';
width: 10px;
height: 10px;
background: $primary;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
transition: all 0.2s ease;
}
}
&:checked + label {
&:before {
border: 2px solid $primary;
}
&:after {
opacity: 1;
transform: scale(1);
}
}
&:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
}
}

View File

@@ -0,0 +1,13 @@
.ps-spinner {
color: #ffffff;
background-color: #ffffff;
width: 40px;
height: 40px;
border-radius: 40px;
font-size: 0;
outline: none;
border: 3px solid $gray-light;
border-left-color: $primary;
animation: rotating 2s linear infinite;
margin: 50px auto;
}

View File

@@ -0,0 +1,59 @@
.ps-tree {
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
.tree-header {
border-bottom: $gray-light 1px solid;
button {
color: $gray-medium;
font-size: .65rem;
font-weight: 700;
height: 1.563rem;
}
}
}
.ps-tree-items {
.tree-name {
align-items: center;
button {
&:before {
@extend .material-icons;
font-size: 1.25rem;
}
&.open:before {
content: "keyboard_arrow_down";
}
&.closed:before {
content: "keyboard_arrow_right"
}
}
}
.tree {
padding: 0 0 0 20px;
.tree-item {
margin: 5px 0;
list-style-type: none;
}
}
.tree-label {
margin-left: 5px;
}
.warning {
color: $danger;
background: none;
}
.hidden {
visibility: hidden;
}
.disable {
display: none;
}
}

View File

@@ -0,0 +1,108 @@
.showcase-card, .helper-card {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
max-width: 810px;
position: relative;
margin: auto;
margin-bottom: 17px;
display: flex;
flex-direction: row;
&__left, &__right {
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
&__team, &__customer {
background-image: url('img/helper-card/wave-shape-background.png');
}
&__category {
background-image: url('img/helper-card/seo-background@3x.png');
}
&__left {
width: 320px;
animation: showcase-img-appearance 1s;
@include media-breakpoint-down(md) {
display: none;
}
img {
animation: showcase-img-appearance 1.5s;
padding: 40px;
width: 100%;
}
&.shape-one {
background-repeat: no-repeat;
background-size: contain;
}
}
&__right {
width: 480px;
padding: 45px 55px 0 20px;
font-size: 14px;
@include media-breakpoint-down(md) {
padding: 3.438rem 1.25rem;
}
h2 {
font-size: 18px;
font-family: 'Open Sans';
font-weight: 600;
color: #363a41;
}
p {
margin: 22px 0;
text-align: left;
}
> a {
&.btn-outline-secondary {
margin-right: .95rem;
}
}
button {
background-color: white;
border: 1px solid #899ea5;
padding: 7px 15px;
color: #576c72;
font-weight: 600;
outline: 0;
}
@include media-breakpoint-down(md) {
width: inherit;
text-align: center;
}
}
&__close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
}
.showcase-list-card {
&__header {
color: #363a41;
opacity: 0.7;
font-size: 20px;
font-weight: 600;
}
&__message {
max-width: 460px;
font-size: 14px;
line-height: 1.43;
color: #6c868e;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,50 @@
@import "../config/settings";
.tokenfield {
height: auto;
input.token-input[type="text"] {
display: inline-block;
border: 0;
outline: none;
background-color: transparent;
max-width: 100%;
}
.token {
display: inline-block;
padding: .4rem;
margin: .1rem;
line-height: 1;
color: #fff;
text-align: center;
vertical-align: baseline;
background-color: $brand-primary;
> .token-label {
white-space: nowrap;
}
.close {
margin: 0 .4rem;
color: $gray-dark;
text-decoration: none;
font-size: .875rem;
font-weight: 400;
text-shadow: none;
&:hover {
color: $gray-dark;
}
}
}
.token-input {
width: auto !important;
}
}
.locale-input-group {
.js-taggable-field {
width: 80%;
}
}

View File

@@ -0,0 +1,17 @@
.locale-input-group {
.dropdown {
margin-left: 0.625em;
button.dropdown-toggle {
border-color: $gray-light;
}
.dropdown-menu {
min-width: auto;
.dropdown-item {
cursor: pointer;
}
}
}
}

View File

@@ -0,0 +1,45 @@
.content-div {
padding-left: $size-navbar-width + ($grid-gutter-width / 2);
padding-right: $grid-gutter-width / 2;
padding-top: $size-header-height + $size-header-toolbar-height + ($grid-gutter-width / 2);
padding-bottom: $grid-gutter-width / 2;
transition: padding .5s ease; // transition when collapsing the nav menu
// with hidden navbar
@include media-breakpoint-down(md) {
padding-left: $grid-gutter-width / 2;
}
@include media-breakpoint-down(sm) {
padding-top: 10.4rem;
padding-left: 0;
padding-right: 0;
// remove gutters (except on product page)
// @todo remove the :not() once the product page has been made responsive
body:not(.adminproducts) & .row {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
}
}
&.-notoolbar {
padding-top: $size-header-height + $grid-gutter-width / 2;
}
&.with-tabs {
padding-top: $size-header-height + $size-header-toolbar-height + $grid-gutter-width + 2.5rem;
}
}
.page-sidebar-closed:not(.mobile) {
.content-div {
padding-left: $size-navbar-width-mini + ($grid-gutter-width / 2);
}
}

View File

@@ -0,0 +1,104 @@
.header-toolbar {
position: fixed;
background: #ffffff;
top: $size-header-height;
left: $size-navbar-width;
right: 0;
z-index: 990; // popup menus' z-index is 1000, so it has to be just below that
border-bottom: 0.0625rem solid $color-separator;
transition: left .5s ease; // transition when collapsing the nav menu
.mobile & {
top: $size-header-height + ($header-mobile-padding-y * 2);
}
@include media-breakpoint-down(md) {
left: 0;
}
@include media-breakpoint-down(sm) {
padding-top: 0.3rem;
top: 3.5rem;
}
// page title
.title {
padding: 0.3125rem;
padding-left: 0;
font-size: 1.625rem;
font-weight: normal;
margin-bottom: 0;
float: left;
@include media-breakpoint-down(sm) {
float: none;
}
}
// breadcrumb
nav > ol {
padding-left: 0;
}
// toolbar buttons
.toolbar-icons {
@include media-breakpoint-down(sm) {
overflow-x: auto;
float: none;
}
> .wrapper {
display: flex;
justify-content: flex-end;
align-items: flex-start;
@include media-breakpoint-down(sm) {
justify-content: flex-start;
}
a + a {
margin-left: $grid-gutter-width / 2;
}
}
}
// bottom spacing for title & toolbar row
.title-row {
@include clearfix;
margin-bottom: $grid-gutter-width / 2;
}
}
.page-head-tabs {
background: #fff;
> ul {
border-bottom: 0;
}
.tab {
position: relative;
.notification-container {
@include notification_container(1.5rem)
position: absolute;
bottom: -5px;
right: 15px;
.notification-counter {
@include notification_counter();
top: -1.75rem;
right: -0.9375rem;
}
}
}
}
.page-sidebar-closed:not(.mobile) {
.header-toolbar {
left: $size-navbar-width-mini;
}
}

View File

@@ -0,0 +1,78 @@
.kpi-container {
position: relative;
text-decoration: none;
background: $gray-soft;
padding-top: .9375rem;
padding-bottom: .9375rem;
text-align: center;
display: block;
&:hover {
text-decoration: none;
}
}
.kpi-refresh {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
.kpi-content {
position: relative;
text-align: left;
padding-left: 40px;
> .material-icons {
position: absolute;
top: 0;
left: 0;
font-size: 2.25rem;
color: $primary;
}
&.-color2 {
> .value,
> .material-icons {
color: $danger;
}
}
&.-color3 {
> .value,
> .material-icons {
color: $success;
}
}
> .title,
> .subtitle,
> .value {
font-size: 0.75rem;
padding-left: .125rem;
color: $gray-dark;
}
> .title {
display: inline-block;
}
> .subtitle {
text-transform: uppercase;
color: $gray-medium;
display: block;
}
> .value {
font-size: 1.25rem;
color: $primary;
display: block;
}
}
.container-fluid {
> .kpi-container {
padding-left: 1rem;
padding-right: 1rem;
}
}

View File

@@ -0,0 +1,635 @@
$header-text-color: #4e6167;
.main-header {
position: fixed;
z-index: 1040; // modal backdrop's z-index is 1050, so this must be just below that
background: #ffffff;
height: $size-header-height;
width: 100%;
display: flex;
align-items: stretch;
color: $header-text-color;
font-size: 0.8125rem;
.material-icons {
position: relative;
}
.mobile & {
padding: $header-mobile-padding-y 0;
height: $size-header-height + ($header-mobile-padding-y * 2);
> .component {
margin-right: 0;
}
.notification-center .dropdown-menu {
margin-top: 0.3125rem;
}
> .material-icons:not(.js-mobile-menu) {
padding-top: 0.625rem;
font-size: 1.313rem;
}
}
> .logo {
height: 100%;
background: url(img/logo.png) no-repeat center left;
width: 13.13rem;
.mobile & {
margin-left: -15px;
min-width: 172px;
width: 0;
flex-grow: 1;
}
}
#shop_version {
font-size: 0.625rem;
position: absolute;
left: 11.25rem;
top: 0.9375rem;
// hide if viewport <= tablet portrait size
@include media-breakpoint-down('md') {
display: none;
}
}
.ajax-spinner {
position: absolute;
left: 0;
margin-left: 0;
top: 5px;
width: 30px;
height: 30px;
}
#quick-access-container {
height: 100%; // needed to make the drop-down appear at the correct position
// hide if viewport <= tablet portrait size
@include media-breakpoint-down('md') {
display: none;
}
#quick_select {
color: $header-text-color;
height: 100%;
font: {
weight: normal;
size: 0.8125rem;
}
text-decoration: none;
letter-spacing: normal;
&:hover {
@extend #quick_select;
color: $primary;
}
&:after {
margin-left: -0.313rem;
}
}
}
#header-search-container {
padding-left: 0;
flex-grow: 1;
// hide on very small screens
@include media-breakpoint-down('sm') {
display: none;
}
form {
height: 1.875rem; // necessary because of elements stretching vertically
width: 100%; // needed for transition
transition: width 0.5s ease-in-out;
.btn {
opacity: 1;
transition: all 0.5s;
}
// behavior when the search form is collapsed
&.collapsed {
width: 15.625rem;
input#bo_query {
border-radius: 0.983rem;
padding-left: 2rem; // leave out space for the loupe
}
.input-group {
// loupe icon
&:before {
opacity: 1;
font-size: 1.250rem;
margin-top: -(1.250rem/2);
}
}
.btn {
// we can't use display:none or else the transition doesn't work
opacity: 0;
padding: 0;
border: 0;
width: 0;
overflow: hidden;
}
}
}
// search input
input#bo_query {
font-size: 0.75rem;
border: 1px solid #bbcdd2 {
top-left-radius: 0.983rem;
bottom-left-radius: 0.983rem;
};
padding: {
top: 0.375rem;
bottom: 0.375rem;
}
transition: padding-left .5s;
&::placeholder {
font-style: italic;
color: $medium-gray !important;
}
}
.input-group {
// loupe icon (hidden by default)
&:before {
@extend .material-icons;
font-size: 0;
opacity: 0;
content: 'search';
position: absolute;
z-index: 5;
top: 50%;
left: 0.563rem;
transition: all .5s;
}
button:not(:first-of-type) {
margin-left: -1px; // collapse borders
}
}
.btn,
.btn-primary {
font: {
size: 0.75rem;
weight: normal;
}
color: $medium-gray;
background-color: #fafbfc;
border: 1px solid #bbcdd2;
text-transform: none;
letter-spacing: normal;
padding: 0.313rem 0.625rem;
&:hover {
background-color: #eff1f2
}
&:active,
&:focus {
box-shadow: none;
}
}
// search button
.btn-primary {
border: {
top-right-radius: 0.983rem;
bottom-right-radius: 0.983rem;
}
padding: {
left: 1rem;
right: 1rem;
}
}
.show > .btn-outline-secondary.dropdown-toggle {
box-shadow: none;
}
}
#quick-access-container,
#header-search-container {
.dropdown-toggle {
&:after {
content: 'arrow_drop_down';
font-size: 1.6em; // use of em so that the size is relative to the component's font size
}
}
.dropdown-menu {
font: {
size: 0.75rem;
}
color: $gray-dark;
padding: 0.313rem 0;
min-width: 15.625rem;
.material-icons {
color: $medium-gray;
vertical-align: text-bottom;
padding-right: 0.5rem;
}
> a {
color: inherit;
border-bottom: 0;
padding: 0.438rem 0.938rem {
right: 1.5rem;
};
&:hover {
color: #fff;
background-color: $primary;
.material-icons {
color: #fff;
}
}
}
> .dropdown-divider {
margin: 0.313rem 0;
}
}
}
> .component {
display: flex;
align-items: center;
margin: {
left: 0.5rem;
right: 0.5rem;
}
// hide on very small screens
&.hide-mobile-sm {
@media (max-width: breakpoint-max('sm')) {
display: none;
}
}
&.header-right-component,
&.gamification-component {
margin: {
left: 0.3125rem;
right: 0.3125rem;
}
}
> .stores .ps-dropdown-menu {
left: auto;
right: 0;
}
}
// Shop state / Maintenance / Debug / View my shop
.shop-state,
.shop-list > .link {
height: 100%;
display: flex;
align-items: center;
color: $header-text-color;
font-size: 0.8125rem;
white-space: nowrap;
&:hover {
text-decoration: none;
color: $primary;
}
}
.shop-state {
.material-icons {
color: $medium-gray;
font-size: 1.25rem;
padding: {
right: .3125rem;
}
}
// hide label if width <= tablet landscape size
@media (max-width: breakpoint-max('lg')) {
span {
display: none;
}
}
}
.shop-list {
> .link {
> .material-icons {
color: $primary;
font-size: 1.25rem;
padding-right: .3125rem;
}
}
}
#header-employee-container {
margin-right: .3125rem;
.mobile & {
display: none;
}
}
#header-notification-container {
min-width: $size-header-height;
}
}
// multishop
#shop-list {
> .btn {
color: $header-text-color;
padding: 0;
font-weight: 400;
text-decoration: none !important;
&:hover {
color: $primary;
}
.selected-item {
font-size: .8125rem;
line-height: 17px;
.material-icons {
font-size: 1.25rem;
top: -1px;
&.visibility {
color: $primary;
}
}
}
}
&.show {
.selected-item {
color: $primary;
}
}
.dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
min-width: 17.75rem !important;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #bbcdd2;
font-size: 13px;
.items-list {
list-style: none;
padding-left: 0;
overflow-y: auto;
max-height: 500px;
margin: 20px;
a {
color: $header-text-color;
}
li:first-child a {
color: $brand-info !important;
font-size: 0.875rem !important;
font-weight: bold;
padding-left: 0;
&:hover {
cursor: pointer;
}
}
li:not(:first-child) {
line-height: 32px;
a:not(.link-shop) {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
display: inline-block;
width: inherit;
}
}
.group {
a {
padding-left: 0.625rem;
}
}
.shop {
display: flex;
a {
padding-left: 1.5625rem;
justify-content: space-between;
font-weight: 600;
}
a.disabled {
cursor: not-allowed;
}
a.link-shop {
text-decoration: none;
float: right;
margin-left: auto;
padding-left: inherit;
padding-right: 10px;
padding-top: 3px;
i.material-icons {
cursor: pointer;
color: $gray-medium;
border: solid 1px $gray-light;
border-radius: 0.0625rem;
padding: 0.125rem 0.625em;
font-size: 1.25rem;
width: inherit;
height: inherit;
}
}
}
.material-icons {
vertical-align: middle;
margin-right: 0.625rem;
}
li {
&.active, &:hover {
a {
color: $header-text-color !important;
background: none !important;
}
i.material-icons {
color: $brand-info !important;
border: solid 1px $brand-info !important;
}
}
}
}
}
.selected-item {
cursor: pointer;
.material-icons {
vertical-align: middle;
}
.arrow-down {
top: 0;
left: 0;
font-size: 1.25rem;
}
vertical-align: middle;
}
.dropdown-item {
margin: 0;
justify-content: flex-start;
}
}
.employee-dropdown {
> .person {
margin-right: 0.625rem;
cursor: pointer;
.material-icons {
font-size: 1.5rem;
color: $gray-medium;
vertical-align: bottom;
}
}
.dropdown-menu {
top: 0.9rem !important;
left: 0.3rem !important;
margin: 0;
min-width: 17.5rem;
hr {
border-top-width: 2px;
}
.divider {
border: 1px solid $gray-dark-divider;
clear: both;
margin: 5px auto;
width: 90%;
}
a {
&.dropdown-item {
margin: 10px 0;
}
&.admin-link {
border: 1px solid #899EA5;
border-radius: 1px;
color: #576C72;
background-color: inherit;
&:hover {
border-color: $primary;
color: $primary;
.material-icons {
color: $primary;
}
}
}
&:hover {
.material-icons {
color: $dropdown-link-hover-bg;
}
}
}
.employee_avatar {
text-align: center;
padding: 0.687rem 0 1rem;
margin-bottom: 0.46875rem;
font-weight: 600;
}
.profile-link {
margin: 0 0 0 auto !important;
border: 1px solid #899EA5;
border-radius: 1px;
color: #576C72;
min-width: 130px;
width: auto;
display: table;
&:hover {
border-color: $primary;
color: $primary;
.material-icons {
color: $primary;
}
}
}
.employee_profile {
display: inline-block;
max-width: 120px;
text-align: left;
margin-left: 20px;
font-weight: 600;
}
.employee-wrapper {
&-avatar {
float: left;
margin: 20px;
}
&-profile {
max-width: 130px;
text-align: right;
display: inline-block;
margin: 0 0 12.5px;
}
}
&::after {
position: absolute;
top: -6px;
right: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
&::before {
position: absolute;
top: -7px;
right: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.avatar {
cursor: pointer;
width: 3.8rem;
height: 3.8rem;
margin-bottom: 0.3125rem;
}
.material-icons {
color: $gray-medium;
font-size: 1.5rem;
vertical-align: middle;
}
.employee-link {
&#header_logout {
color: $medium-gray;
margin: 10px 0;
&:hover {
background-color: inherit;
color: $primary;
}
}
}
}
}

View File

@@ -0,0 +1,520 @@
.js-mobile-menu {
display: none;
float: left;
cursor: pointer;
padding-top: 0;
margin-left: 0.6rem;
margin-right: 0.6rem;
font-size: 1.8rem;
flex-direction: column;
justify-content: center;
@include media-breakpoint-down(md) {
display: inline-flex;
}
}
.nav-bar {
position: fixed;
top: 0;
bottom: 0;
z-index: 502;
background: $gray-dark;
width: $size-navbar-width;
margin-top: $size-header-height;
height: 100%;
overflow-y: auto;
transition: all .5s ease-out;
.material-icons {
color: white;
font-size: 1.188rem;
line-height: inherit;
}
&.mobile-nav {
margin-left: -100%;
margin-top: $size-header-height + ($header-mobile-padding-y * 2);
width: 70%;
@include media-breakpoint-only(sm) {
width: 60%;
}
@include media-breakpoint-only(md) {
width: 40%;
}
&.expanded {
display: block;
margin-left: 0;
overflow-y: scroll;
}
.onboarding-navbar {
display: none;
}
.panel-collapse {
padding-left: 0;
.link-leveltwo .link {
padding-left: 0.75rem;
}
}
.employee_avatar {
text-decoration: none;
text-align: center;
padding-top: 1rem;
.material-icons {
line-height: 3.75rem;
font-size: 3.75rem;
@include media-breakpoint-down(md) {
line-height: 4.6875rem;
font-size: 4.6875rem;
}
}
span {
color: white;
display: block;
margin-bottom: 0.625rem;
@include media-breakpoint-down(md) {
font-size: 1.09375rem;
}
}
img {
width: 3.75rem;
height: 3.75rem;
margin-bottom: .625rem;
&.img-thumbnail {
border-radius: 36px;
}
}
}
.shop-list {
padding-bottom: 1rem;
text-align: center;
font-weight: bold;
a {
@include media-breakpoint-down(md) {
font-size: 1.09375rem;
}
}
}
.main-menu {
margin-top: 0.625rem;
& > li:first-child {
padding-bottom: 1rem;
}
}
.shop-list-title {
color: $brand-primary;
text-transform: uppercase;
font-size: 1rem;
text-align: center;
margin-bottom: 0.9375rem;
&::after {
font-family: 'Material Icons';
content: "\E313";
font-size: 1.25rem;
line-height: 1.375rem;
margin-left: 0.625rem;
vertical-align: bottom;
}
}
.items-list {
padding-left: 0;
a:focus {
background-color: transparent;
}
li {
background-color: white;
border-bottom: $gray-light 1px solid;
&.group a{
padding: 0.9375rem 2.5rem;
font-weight: bold;
}
&.shop {
padding: 0.9375rem 0.9375rem 0.9375rem 2.5rem;
a {
display: inline-block;
width: auto;
&.link-shop {
float: right;
.material-icons {
font-size: 1.25rem;
color: $gray-medium;
}
}
}
}
}
li:first-child a {
color: $brand-primary;
text-transform: uppercase;
font-size: 0.9375rem;
padding: 0.9375rem 1.25rem;
}
}
}
}
.main-menu {
padding: 0 0 5.313rem 0;
margin: 0;
.category-title > .title {
text-transform: uppercase;
}
.link-levelone {
$padding-size: 1.25rem;
display: block;
&[data-submenu] {
@include media-breakpoint-down(md) {
a.link {
font-size: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
line-height: inherit;
.material-icons {
font-size: 2rem;
line-height: 2rem;
&.sub-tabs-arrow {
padding-right: 1.2rem;
}
}
}
}
&.has_submenu {
@include media-breakpoint-down(md) {
.sub-tabs-arrow {
visibility: visible;
}
}
}
}
&.-active {
@include media-breakpoint-down(md) {
border-right: none;
}
> .link {
border-left: .25rem solid #25b9d7;
padding-left: .638rem;
.material-icons {
&:first-child {
color: #25b9d7;
}
}
}
}
&:not(#subtab-AdminParentModulesSf) {
i.material-icons.mi-extension {
color: #6c868e;
}
}
> .link {
font-size: .75rem;
display: flex;
height: initial;
line-height: 1rem;
align-items: end;
color: $gray-dark-text;
text-decoration: none;
padding: 0.5rem .3125rem 0.5rem .938rem;
word-break: break-word;
white-space: initial;
text-overflow: initial;
overflow: hidden;
@include media-breakpoint-down(md) {
font-size: 1rem;
}
span {
padding-left: .625rem;
}
.sub-tabs-arrow {
margin-left: auto;
visibility: hidden;
color: #6c868e;
vertical-align: middle;
line-height: inherit;
}
}
&.ul-open,
&.-active,
&.-hover {
& > .link {
background: #202226;
color: white;
transition: background 300ms ease;
@include media-breakpoint-down(md) {
background: $gray-dark;
}
}
&.has_submenu {
.link {
.sub-tabs-arrow {
visibility: visible;
}
}
}
}
> .submenu {
list-style: none;
background: #202226;
display: none;
white-space: nowrap;
padding-left: 2.75rem;
& > li {
@include media-breakpoint-down(md) {
a.link {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
}
&:first-of-type {
padding-top: .625rem;
@include media-breakpoint-down(md) {
padding-top: 0;
}
}
&:last-of-type {
padding-bottom: .750rem;
@include media-breakpoint-down(md) {
padding-bottom: 0;
a.link {
padding-bottom: 1.5rem;
}
}
}
}
}
&.ul-open,
&.-active {
.link {
background: #202226;
}
}
&.open {
> .submenu {
display: block;
}
}
}
.link-leveltwo {
@extend .link-levelone;
&.-active {
> .link {
padding-left: 0;
border-left: none;
color: white;
}
}
> .link {
height: initial;
line-height: 0.9rem;
padding: 0.3125rem 0.3rem 0.3125rem 0;
@include media-breakpoint-down(md) {
padding-top: 1.4rem;
padding-bottom: 1.4rem;
line-height: 1.6rem;
}
}
> .link:hover {
color: $gray-dark-text-hover;
}
}
}
.category-title {
display: block;
font-weight: bold;
font-size: 0.75rem;
border-top: 1px solid #bbcdd2;
margin: 1.813rem 0 0 .938rem;
padding: .875rem 0 .750rem 0;
@include media-breakpoint-down(md) {
display: none;
}
& > .title {
color: white;
background: $gray-dark;
}
}
.menu-collapse {
height: .813rem;
font-size: 2rem;
display: block;
cursor: pointer;
text-align: right;
padding: .688rem .938rem 2.188rem 0;
line-height: .813rem;
color: $gray-dark-text;
@include media-breakpoint-down(md) {
display: none;
padding-bottom: 1rem;
}
.material-icons {
color: #BEBEBE;
&:last-child {
margin-left: -1.313rem;
}
}
}
.page-sidebar-closed:not(.mobile) {
.menu-collapse {
transform: rotate(180deg);
padding-right: .8rem;
}
.nav-bar {
overflow: visible;
width: $size-navbar-width-mini;
.main-menu {
.category-title > .title,
.link-levelone span {
display: none;
}
.sub-tabs-arrow {
display: none !important;
}
.category-title {
margin-top: 0.8rem;
padding-bottom: 0;
}
.link-levelone {
position: relative;
.link {
line-height: initial;
}
&:first-of-type {
margin-bottom: 0;
}
&.-hover {
> .link {
transition: all 0s ease 0s;
width: 250px;
> span {
display: inline-block;
padding-left: 1.563rem;
}
}
ul.submenu {
position: absolute !important;
display: block !important;
top: 34px !important;
width: 200px !important;
left: 50px;
padding-left: 5px;
}
}
.link-leveltwo {
&:first-of-type {
padding-top: 0 !important;
margin-top: .2rem;
}
&:last-of-type {
padding-bottom: 0 !important;
margin-bottom: 1rem;
}
.link {
padding-left: 1.5rem;
}
}
}
}
@media (max-height: 870px) {
// this two tabs need to be flipped, otherwise
// css issue with bottom of the page
#subtab-ShopParameters:hover,
#subtab-AdminAdvancedParameters:hover {
ul.submenu {
display: flex !important;
flex-direction: column-reverse;
top: 0 !important;
transform: rotate(180deg);
transform-origin: top;
li {
transform: rotate(180deg);
&:last-of-type {
margin-bottom: 0;
}
}
}
}
}
}
}
.mobile-layer {
display: none;
transition: all 0.2s ease-in-out;
position: fixed;
background: rgba(0,0,0,.7);
width: 100%;
height: 100%;
z-index: 501;
top: 0;
left: 0;
&.expanded {
display: block;
}
}

View File

@@ -0,0 +1,18 @@
#non-responsive {
display: none;
position: fixed;
background: $gray-dark;
width: 100%;
height: 100%;
z-index: 501;
top: 3.438rem;
left: 0.125rem;
color: #ffffff;
padding: 4.375rem 2.5rem 0 2.5rem;
font-size: 1.063rem;
h1 {
color: #ffffff;
font-size: 1.875rem;
font-weight: 400;
}
}