first commit

This commit is contained in:
2024-11-11 18:46:54 +01:00
commit a630d17338
25634 changed files with 4923715 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;
}
}

View File

@@ -0,0 +1,17 @@
// EMPTY STATES
@keyframes showcase-img-appearance {
from {
-webkit-transform: translate(-20px);
-ms-transform: translate(-20px);
-webkit-transform: translate(-20px);
transform: translate(-20px);
opacity: 0;
}
to {
-webkit-transform: translate(0);
-ms-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
}
}

View File

@@ -0,0 +1,94 @@
// Colors
$gray-dark-text: #bebebe;
$gray-dark-title: #bbcdd1;
$gray-dark-hover: #282b30;
$background-grey: #eaebec;
$gray-dark-text-hover: #ffffff;
$gray-dark-divider: #eeeeee;
$color-separator: #dfdfdf;
// Sizes
$size-navbar-width: 13.13rem;
$size-navbar-width-mini: 3.125rem;
$size-navbar-link-height: 1.75rem;
$size-header-height: 2.5rem;
$size-header-toolbar-height: 5.313rem;
$header-mobile-padding-y: .625rem;
// Imported from bootstrap
$grid-gutter-width: 1.875rem;
$border-radius: 0;
//UI Kit variables - to be removed
$gray-soft: #FAFBFC;
$gray-light: #BBCDD2;
$medium-gray: #6c868e;
$gray-medium: $medium-gray;
$gray-dark: #363a41;
$primary: #25b9d7;
$primary-hover: #3ED2F0;
$secondary: $medium-gray;
$secondary-hover: $gray-dark;
$notice: #DFF5F9;
$success: #78D07D;
$warning: #CD9321;
$warning-hover: #FDE7BB;
$danger: #c05c67;
$danger-hover: #fde1e1;
$brand-primary: $primary;
$brand-secondary: $secondary;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$font-size-base: .875rem;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-size-xs: 0.625rem;
$font-size-h1: 1.5rem;
$nav-tabs-active-link-hover-border-color: $brand-primary;
$link-color: $brand-primary;
$brand-success: $success;
$brand-danger: $danger;
$dropdown-link-hover-color: $primary;
$dropdown-link-hover-bg: #fff;
$spacing-base: 30px;
$spacing-widths: (
xxs: $spacing-base / 6,
xs: $spacing-base / 3,
s: $spacing-base / 2,
n: $spacing-base,
l: $spacing-base * 2
);
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 1024px,
xl: 1300px,
xxl: 1600px // PS custom
);
$card-border-color: #dbe6e9 !default;
$module-logo-size: 45px;
$card-spacer-x: .625rem !default;
$card-spacer-y: .625rem !default;
$card-border-width: 1px !default;
$card-border-radius: 5px !default;
$card-border-radius-inner: $card-border-radius !default;
$card-cap-bg: $gray-soft !default;
$card-bg: #fff !default;
$card-link-hover-color: #fff !default;
$enable-rounded: true !default;
$enable-hover-media-query: true;
$btn-primary-bg: $primary-hover;
$btn-secondary-border: #000;
$btn-info-bg: $brand-info !default;
$btn-success-bg: $brand-success !default;
$btn-warning-bg: $brand-warning !default;
$btn-danger-bg: $brand-danger !default;

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,38 @@
// Card variants
@mixin card-variant($background, $border) {
background-color: $background;
border-color: $border;
}
@mixin card-outline-variant($color) {
background-color: transparent;
border-color: $color;
}
//
// Inverse text within a card for use with dark backgrounds
//
@mixin card-inverse {
.card-header,
.card-footer {
border-bottom: $card-border-width solid rgba(255,255,255,.2);
}
.card-header,
.card-footer,
.card-title,
.card-blockquote {
color: #fff;
}
.card-link,
.card-text,
.card-blockquote > footer {
color: rgba(255,255,255,.65);
}
.card-link {
@include hover-focus {
color: $card-link-hover-color;
}
}
}

View File

@@ -0,0 +1,59 @@
@mixin hover {
@if $enable-hover-media-query {
// See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
// Currently shimmed by https://github.com/twbs/mq4-hover-shim
@media (hover: hover) {
&:hover { @content }
}
}
@else {
&:hover { @content }
}
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus { @content }
@include hover { @content }
}
@else {
&:focus,
&:hover {
@content
}
}
}
@mixin plain-hover-focus {
@if $enable-hover-media-query {
&,
&:focus {
@content
}
@include hover { @content }
}
@else {
&,
&:focus,
&:hover {
@content
}
}
}
@mixin hover-focus-active {
@if $enable-hover-media-query {
&:focus,
&:active {
@content
}
@include hover { @content }
}
@else {
&:focus,
&:active,
&:hover {
@content
}
}
}

View File

@@ -0,0 +1,6 @@
@mixin notification_container($height) {
@include single-line-block($height);
cursor: pointer;
color: $medium-gray;
position: relative;
}

View File

@@ -0,0 +1,13 @@
@mixin notification_counter() {
display: inline-block;
position: absolute;
top: 0.25rem;
right: 0;
color: #fff;
background: #f1b746;
font-size: 0.625rem;
line-height: .75rem;
padding: 0 .1875rem;
border-radius: 1rem;
border: .125rem solid #fff;
}

View File

@@ -0,0 +1,5 @@
@mixin single-line-block($line-height) {
line-height: $line-height;
height: $line-height;
vertical-align: middle;
}

View File

@@ -0,0 +1,58 @@
// ==========================================================================
// Extends
// ==========================================================================
@mixin m($modifier) {
&-#{$modifier} {
@content;
}
}
$ps-stars: (
"0": "\E839",
"05": "\E839",
"1": "\E838",
"15": "\E838\E839",
"2": "\E838\E838",
"25": "\E838\E838\E839",
"3": "\E838\E838\E838",
"35": "\E838\E838\E838\E838",
"4": "\E838\E838\E838\E838",
"45": "\E838\E838\E838\E838\E839",
"5": "\E838\E838\E838\E838\E838"
);
// Generate modifier color classes
@mixin stars($map) {
@each $theme, $stars in $map {
@include m($theme) {
display: inline-block;
position: absolute;
color: $gray-medium;
text-align: right;
left: 90px;
bottom: 50px;
&:before {
font-family: 'Material Icons';
content: "\E838\E838\E838\E838\E838";
color: $gray-light;
float: left;
font-size: 1.1em;
margin-right: 0.5em;
position: absolute;
left: -70px;
top: 0;
}
&:after {
position: absolute;
font-family: 'Material Icons';
content: $stars;
color: #FFD100;
font-size: 1.1em;
left: -70px;
top: 0;
}
}
}
}

View File

@@ -0,0 +1,3 @@
.helper-card__cms-pages-background {
background-image: url(img/helper-card/content-background@3x.png);
}

View File

@@ -0,0 +1,5 @@
#currency_grid_panel {
#currency_iso_code {
max-width: 120px;
}
}

View File

@@ -0,0 +1,4 @@
.clickable-avatar {
width: 100px;
height: 100px;
}

View File

@@ -0,0 +1,6 @@
#import_progress_modal {
.modal-body {
overflow: auto;
max-height: 65vh;
}
}

View File

@@ -0,0 +1,8 @@
#by-status-block {
.badge {
margin-top: 1px;
height: 19px;
padding: .3rem .4rem;
vertical-align: top;
}
}

View File

@@ -0,0 +1,3 @@
.helper-card__meta-background {
background-image: url(img/helper-card/seo-background@3x.png);
}

View File

@@ -0,0 +1,661 @@
/**
* Module Modal CSS
*/
.module-modal-title {
display: inline-block;
vertical-align: top;
> h4 {
color: #1E2024 !important;
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
font-weight: bold !important;
font-size: 14px;
}
}
.module-badges-display {
display: inline-block;
}
.module-modal-header {
.read-more-stars {
bottom: 82px;
left: 120px;
&:before, &:after {
left: -80px;
}
}
button.close {
width: auto;
margin-top: -8px;
.material-icons {
font-size: 30px;
}
}
}
.module-modal-footer {
.module-badges-action {
display: flex;
justify-content: space-between;
align-items: center;
}
.module-price {
position: relative;
right: auto;
bottom: auto;
}
.module-stars-price {
padding: 0 0 10px 0;
}
}
.module-big-cover {
height: 240px;
overflow: hidden;
margin-top: -15px;
text-align: center;
}
.module-big-cover > img {
max-width: 100%;
max-height: 100%;
height: auto;
padding: 4px;
}
.module-menu-readmore {
margin-top: 2px;
}
.module-readmore-tab-content {
text-align: justify;
padding: 5px 15px;
line-height: 20px;
margin-bottom: 61px !important;
}
.module-menu-readmore > .tab-content {
margin-top: 5px;
color: black;
text-align: justify;
}
.module-modal-badges {
margin-top: 1em;
}
.module-modal-badges > img {
margin-right: 1em;
}
.module-modal-dialog {
height: 85%;
width: 50%;
}
.module-modal-content {
border: none;
box-shadow: none;
}
.module-modal-close {
width: auto !important;
margin-right: 5px;
}
.module-short-list {
margin: 2em 0;
.module-list-empty {
background: rgba(255,255,255,0.4);
border-radius: 3px;
padding: 20px;
border: dashed 1px #696969;
p {
margin: 0;
padding: 0;
}
}
}
/**
* Module list
*/
.module-item-list {
.container-fluid {
padding: {
top: $grid-gutter-width / 2;
bottom: $grid-gutter-width / 2;
}
background-color: white;
}
+:nth-child(even) {
.container-fluid {
background-color: #f5f8f9 !important;
}
}
.module-item-wrapper-list {
@media (max-width: 33.9em) {
text-align: center;
}
.module-logo-thumb-list {
height:64px;
max-width:64px;
margin: 0 auto;
@media (max-width: 33.9em) {
height: auto;
max-height: 64px;
}
img {
width: 100%;
max-width: 40px;
margin-bottom: 0.5em;
}
}
.module-name-list {
font-weight: bolder;
color: $gray-dark;
margin: 0;
}
.module-version-author-list {
font-weight: bold;
color: $gray-medium;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
b {
font-weight: bold;
color: $gray-dark;
}
}
.module-quick-action-list {
> [class^="module-star-ranking-"] {
display:none;
}
}
}
}
.badges-container {
min-height: 30px;
font-size: .9rem;
line-height: 50%;
}
.module-price {
position: absolute;
right: 15px;
bottom: 50px;
}
.module-item-wrapper-grid .module-quick-action-grid {
.spinner {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
}
.module-actions {
display: flex;
justify-content: flex-end;
.dropdown-menu {
right: 10px;
left: 10px;
}
.btn-group, .btn {
width: 100%;
}
}
}
@media (min-width: 1300px) and (max-width: 1550px) {
.module-item-grid {
width: 33.333333%;
}
}
/**
* Addons Module Cast (List view);
**/
.module-addons-item-list {
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-list {
vertical-align: middle;
text-align: center;
> .module-icon-addons-exit-list {
> img {
height: 3em;
}
}
}
}
/**
* Error message on catalog loading
**/
.module-placeholders-failure {
display: none;
.module-placeholders-failure-wrapper {
text-align: center;
margin-top: 40px;
}
.module-placeholders-failure-msg {
color: red;
}
#module-placeholders-failure-retry {
margin-top: 10px;
}
}
/**
* OTHER: Generalist CSS for module pages
*/
#module-modal-bulk-confirm-action-name {
font-weight: bold;
}
.module-checkbox-bulk-list {
position: absolute;
right: 7px;
top: 7px;
&.md-checkbox label {
padding: 0;
}
}
.module-search-bar {
height: 50px !important;
border: 0 !important;
background-color: white !important;
}
.module-search-block {
background: white;
width: 100%;
.search-button {
border-radius: 0;
position: absolute;
top: 0;
right: 0;
height: 35px;
}
}
.module-sorting-menu {
margin-bottom: 30px;
}
.module-sorting {
margin-left: 35px;
.select2-selection {
border-radius: 0;
min-width: 175px;
.select2-selection__arrow {
b {
display: none;
}
&:before {
content: "\E313";
font-family: 'Material Icons';
font-size: 1.5rem;
position: relative;
color: $gray-medium;
right: 20px;
}
}
}
}
.module-sorting i {
margin-left: 10px;
cursor: pointer;
font-size: 26px;
}
.module-sort-active {
color: #A6B9C0 !important;
}
.module-sort-switch {
color: #C7D6DB;
}
.module-search-result-title {
color: #1E2024 !important;
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
display: inline-block;
}
.module-addons-search {
font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
font-weight: bold;
font-size: 14px;
display: none;
}
.module-category-recently-used {
a {
text-align: center;
border-bottom: 1px solid #E7E8E8;
}
}
.module-category-reset, .module-status-reset {
display: none;
a {
color: #2eacce !important;
text-align: center;
border-bottom: 1px solid #E7E8E8;
&:hover {
color: white !important;
background-color: #2eacce !important;
text-align: center;
border-bottom: 1px solid #E7E8E8;
}
}
}
.module-notification-kpis {
margin: auto;
}
.module-kpi {
margin-right: 15px;
display: initial;
.material-icons {
font-size: 1.875rem;
vertical-align: middle;
}
}
.module-kpi-number {
margin: auto;
font-size: 30px;
font-weight: bold;
}
.module-top-menu {
min-height: 74px;
.module-top-menu-item {
&.disabled {
opacity: 0.5;
pointer-events: none;
}
h3 {
margin-top: 30px;
font-size: 14px;
}
}
}
.toolbar-icons {
.btn-primary {
border-radius: 0;
}
}
/**
* Module Categories Grid
*/
#modules-categories-grid {
display: none;
}
.module-category-item {
display: table;
padding-bottom: 10px;
cursor: pointer;
}
.module-category-item-wrapper {
background: white;
padding: 20px;
margin-bottom: 10px;
box-shadow: 0 1px 0 #C7D6DB;
height: 247px;
max-height: 247px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 15px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
* Module import
**/
.module-import-processing {
display: none;
text-align: center;
.btn {
margin: 25px;
}
}
.module-import-processing-footer-text {
font-size: smaller;
font-style: italic;
color: #CECCCC;
}
.module-import-success {
display: none;
text-align: center;
}
.module-import-success-icon {
color: #1c8ca3;
font-size: 70px;
}
.module-import-failure {
display: none;
text-align: center;
}
.module-import-failure-icon {
color: #C45C67;
font-size: 70px;
}
.module-import-failure-msg {
font-weight: bold;
margin-bottom: 0;
}
.module-import-failure-details-action {
display: block;
cursor: pointer !important;
}
.module-import-failure-details {
word-wrap: break-word;
font-size: small;
overflow: auto;
overflow-y: hidden;
margin: 35px 5px 20px 5px;
text-align: justify;
display: none;
}
.module-import-start-icon {
font-size: 70px;
color: #CECCCC;
}
.module-import-start-select-manual {
cursor: pointer !important;
}
.module-import-start-select-manual:hover {
text-decoration: none;
}
.module-import-start-footer-text {
font-size: smaller;
font-style: italic;
color: #CECCCC;
}
form#importDropzone {
border: 2px dashed #6c868e;
}
.dropzone.dz-clickable {
cursor: auto !important;
}
.module-import-start {
text-align: center;
}
.module-import-failure-retry {
margin-top: 15px;
}
.module-import-success-configure {
display: none;
}
/**
* PrestaTrust modal
**/
#pstrust-img {
max-height: 64px;
max-width: 64px;
}
/**
* Module positions
*/
#modules-position-selection-panel {
position: relative;
display: none;
}
.hook-panel {
margin-bottom: 10px !important;
border: solid #E6E6E6 1px;
box-shadow: rgba(black,0.10) 0 -2px 0 inset;
border-radius: 3px;
padding: 10px 10px 5px 10px;
.highlight {
background-color: #F7E69F !important;
}
.hook-panel-header {
margin: 0 -10px 0 -10px;
padding: 0 10px 10px 10px;
.hook-name {
font-size: 1.4em;
color: $brand-primary;
background-color: white;
padding: 0 4px;
border-radius: 3px;
}
.hook_title {
@extend .text-muted;
}
.hook_description {
@extend .text-muted;
padding: 3px 0 0 3px;
}
}
}
.modules_list_container_tab {
img {
max-width: 66px;
}
}
.module-list {
.module-item {
display: table;
width: 100%;
padding: 5px 0;
margin-bottom: -1px;
border: solid 1px #9ed0ec;
background: #fff;
&.draggable {
cursor: pointer;
}
}
.module-column-select {
display: table-cell;
width: 22px;
min-height: 35px;
vertical-align: middle;
text-align: center;
border-right: 1px solid #ddd;
}
.module-column-position {
display: table-cell;
width: 80px;
vertical-align: middle;
text-align: right;
.index-position {
border: solid 1px #ccc;
background-color: #eee;
padding: 0 5px;
font-size: 1em;
color: #aaa;
text-shadow: white 1px 1px;
border-radius: 3px;
box-shadow: rgba(0,0,0,0.2) 0 1px 3px inset;
}
}
.module-column-icon {
display: table-cell;
width: 75px;
text-align: center;
vertical-align: middle;
img {
max-width: 57px;
}
}
.module-column-infos {
display: table-cell;
height: 50px;
vertical-align: middle;
.module-name {
font-size: 1.2em;
}
.module-description {
@extend .text-muted;
}
}
.module-column-actions {
display: table-cell;
padding: 0 10px;
vertical-align: middle;
text-align: right;
.btn-group {
text-align: right;
}
}
.dropdown-menu {
min-width: auto;
}
}
#unhook-button-position-bottom {
display: none;
}
.module-actions {
// @toDo: move to ui kit
.dropdown-toggle-split-text {
color: #AEAEAE;
border-color: #AEAEAE;
margin-left: 10px !important;
&:hover {
background-color: #AEAEAE;
color: white;
}
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,76 @@
.products-catalog {
> .content {
background: #ffffff;
padding: {
top: $grid-gutter-width / 2;
bottom: $grid-gutter-width / 2;
}
margin-bottom: 20px;
.row {
align-items: center;
}
}
> .content:last-child {
margin-bottom: 0;
}
// actions at the top of the page
#catalog-actions {
align-items: start;
.row + .row {
padding-top: $grid-gutter-width / 2;
}
}
.icon-caret {
font-size: 0.625rem;
vertical-align: 0.0625rem;
cursor: pointer;
display: inline-block;
&.-current {
color: $primary;
}
}
table {
.form-control,
.select2 {
font-weight: normal;
}
.form-min-max {
display: inline-block;
width: 48%;
}
.action-enabled {
color: $brand-success
}
.action-disabled {
color: $brand-danger
}
}
.bulk-catalog {
.dropdown-item {
border: 0;
}
}
.dropdown-toggle.product-edit {
color: $gray-medium;
&:after {
content: "more_vert";
}
}
}
.emptycatalog-icon {
> .material-icons {
color: $gray-light;
font-size: 12rem;
}
}

View File

@@ -0,0 +1,219 @@
.stock-app {
padding: 0;
.table {
td:first-child {
// product description inside the product column
p {
margin-bottom: 0;
}
}
}
#search {
.search-input {
box-shadow: none;
border: $gray-light 1px solid;
background-color: white;
min-height: 35px;
outline: none;
border-radius: 0;
}
.alert-box {
padding-top: 28px;
position: fixed;
right: 5px;
top: 40px;
z-index: 1000; // above header toolbar
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
}
#filters-container {
.collapse-button {
width: 100%;
text-align: left;
.material-icons {
vertical-align: bottom;
font-size: 20px;
color: $gray-medium;
}
}
.filter-container {
border: $gray-light 1px solid;
padding: 10px;
&.filter-suppliers {
.item {
margin-bottom: 5px;
}
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
}
}
}
.low-filter-label {
cursor: pointer;
}
#filters {
background: white;
border-radius: 2px;
box-shadow: 1px 2px 3px 0 rgba(108, 134, 142, 0.3);
border: solid 1px #b9cdd2;
width: 150%;
.row {
padding: 0.625rem; // 10px
}
}
// form that allows changing stock quantities
form.qty {
position: relative;
display: inline-block;
width: 7rem;
&:hover,
&.active {
input[type=number] {
// we need this offset to make room for the confirmation button
padding-right: 34px;
}
.ps-number-spinner {
right: 34px;
}
}
.check-button {
outline: none;
opacity: 0;
position: absolute;
top: 1px;
right: 1px;
border: none;
height: 33px;
width: 33px;
background: $brand-primary;
z-index: 2;
padding: 0;
cursor: pointer;
.material-icons {
color: white;
vertical-align: middle;
}
&:hover {
background: $primary-hover;
}
}
&.active {
.check-button {
opacity: 1;
cursor: pointer;
}
}
&.disabled {
.check-button {
background: $gray-light;
cursor: default;
}
}
}
.pagination {
justify-content: center;
}
.stock-movements {
.qty-number {
padding: 2px 5px;
background-color: $gray-dark;
display: inline-block;
min-width: 50px;
color: white;
&.is-positive {
background-color: $brand-primary;
}
}
}
.stock-overview {
.table {
table-layout: fixed;
thead {
th {
&.product-title {
padding-left: 6rem;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.material-icons {
margin-right: 5px;
}
}
}
}
.qty-update {
color: $brand-primary;
.material-icons {
vertical-align: middle;
}
}
.enable {
color: $success;
}
.disable {
color: $danger;
}
.low-stock {
background: $danger-hover;
.stock-warning {
color: $danger;
font-weight: bold;
&.ico {
border: 1px solid $danger;
background: lighten($danger, 30%);
padding: 0 5px;
cursor: pointer;
}
}
}
}
.product-actions {
small {
display: block;
}
.bulk-qty {
max-width: 100px;
}
.update-qty {
color: white;
transition: background-color 0.2s ease;
}
.qty {
padding-left: 20px;
}
}
}
}

View File

@@ -0,0 +1,73 @@
#themes-logo-page {
@import "partials/theme_logo_configuration";
@import "partials/theme_logo_theme_card";
#adapt_theme_to_rtl_languages_theme_to_adapt {
width: 18.75rem;
}
.btn-tertiary {
border-radius: 2px;
background-color: #6c868e;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.2px;
text-align: center;
color: #ffffff;
}
.btn-tertiary-outline {
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.2px;
text-align: center;
color: #363a41;
border: 1px solid #6C858C;
background-color: transparent;
}
.btn-tertiary:hover {
background-color: #363a41;
}
.layout-configuration {
.inner-content {
padding: 0.9375rem;
background-color: #f8f8f8;
border-radius: 0.25rem;
.title {
font-size: 14px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #4a4a4a;
}
.description {
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.33;
letter-spacing: normal;
color: #6c868e;
}
}
.layout-logo {
vertical-align: text-bottom;
padding-right: 1rem;
}
.choose-layouts-button {
margin-right: 0.9375rem;
}
}
}

View File

@@ -0,0 +1,307 @@
$color-error: #c05c67;
$color-active: #25B9D7;
.search-translation,
.domains-tree {
.alerts {
margin-top: 1rem;
}
.col-offset {
margin-left: 1rem;
}
.hide {
display: none;
}
}
.breadcrumb {
small {
color: $gray-medium;
}
}
.total-remaining-translations {
color: $color-error;
}
.search-translation {
margin-bottom: 1.25rem;
.summary {
font-size: 0.875rem;
color: #363A41;
}
.search {
width: 100%;
margin-top: 1px;
}
.search-button {
margin-right: 0.625rem;
}
.alert {
float: left;
margin-top: 1.875rem;
width: 42.63rem;
height: 3.438rem;
i,
span {
float: left;
}
span {
margin-left: 2.5rem;
}
}
}
.domains-tree {
float: left;
hr {
clear: both;
height: 0.125rem;
border-top: solid 1px #bbcdd2;
margin-top: 0;
}
.btn-expand,
.btn-reduce {
cursor: pointer;
height: 0.875rem;
object-fit: contain;
font-size: $font-size-xs;
font-weight: bold;
font-style: normal;
font-stretch: normal;
margin-bottom: 0.9375rem;
text-transform: uppercase;
color: #70848b;
i {
float: left;
font-size: 25px;
}
span {
float: left;
line-height: 1.563rem;
}
}
.btn-expand {
margin-left: -0.3125rem;
margin-top: 0.9375rem;
}
.btn-reduce {
float: right;
}
.card {
padding: 0.9375rem 0.9375rem 0 0.9375rem;
border-radius: 0;
}
.domain-first-part,
.domain-part {
width: 100%;
height: 1.375rem;
object-fit: contain;
font-size: $font-size-base;
font-weight: 400;
font-style: normal;
font-stretch: normal;
margin-left: -0.3125rem;
margin-bottom: 0.9375rem;
overflow: hidden;
text-align: left;
color: #363a41;
i {
color: #70848b;
float: left;
font-size: 1.563rem;
font-weight: 400;
&.expanded {
transform: rotate(90deg);
}
}
span {
float: left;
line-height: 1.563rem;
cursor: pointer;
.missing-translations {
color: $color-error;
}
}
&:hover {
color: $color-active;
}
.missing-translations {
line-height: 1.563rem;
color: $color-error;
}
}
.domain-first-part {
&.active {
font-weight: 600;
}
.material-icons {
cursor: pointer;
}
}
.domain-part {
margin-left: 1.25rem;
}
.translation-domain {
.btn {
display: none;
}
}
.domain-actions {
margin-left: 0.625rem;
margin-bottom: 0.9375rem;
width: 100%;
i {
cursor: pointer;
float: left;
color: $color-active;
line-height: 1.563rem;
}
.btn-hide-messages,
.btn-show-messages {
cursor: pointer;
float: left;
height: 0.875rem;
line-height: 1.563rem;
font-size: $font-size-xs;
font-weight: 600;
font-style: normal;
font-stretch: normal;
text-align: center;
color: $color-active;
}
.missing-translations {
color: $color-error;
text-transform: uppercase;
margin-right: 0.9375rem;
font-size: $font-size-xs;
}
}
}
.translation-domains {
background-color: #fff;
float: left;
min-height: 50rem;
h1 {
width: auto;
height: 1.375rem;
object-fit: contain;
font-size: $font-size-h1;
font-weight: 600;
font-style: normal;
font-stretch: normal;
text-align: left;
color: #363a41;
margin-top: 0.9375rem;
}
.hide {
display: none;
}
.navbar-container {
position: absolute;
top: -0.625rem;
right: 0;
&.relative-position {
position: relative;
}
}
.forms-container + .navbar-container {
position: relative;
bottom: 0;
right: 0;
}
.form-control-warning {
background-image: none;
border-color: $color-error;
}
.reset-translation-value {
margin-right: 0.3125rem;
}
form {
margin-top: 0.625rem;
float: left;
width: 100%;
p {
margin-bottom: 0.3125rem;
}
}
.form-group {
margin-bottom: 0.625rem;
}
.missing-translations,
.missing-translations-paragraph {
color: $color-error;
}
}
.translations-results {
display: none;
margin-top: 3.125rem;
padding-top: 0.9375rem;
padding-left: 0.9375rem;
margin-left: 0.9375rem;
}
#jetsContent {
form {
margin-bottom: 3.125rem;
margin-top: 1.25rem;
width: 100%;
.form-group {
margin-bottom: 0.625rem;
}
.form-control-warning {
border-color: $color-error;
}
}
p {
margin-bottom: 0.3125rem;
}
.buttons {
.reset-translation-value {
margin-right: 0.3125rem;
}
}
}

View File

@@ -0,0 +1,89 @@
.logo-configuration-card-body {
padding: inherit;
.logo-card {
border-radius: 0;
border: 0;
.logo-card-title {
font-size: 1rem;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.01875rem;
text-align: center;
color: #4a4a4a;
}
.nav-pills {
.nav-item {
padding-right: 1.25rem;
}
border-top: 0;
border-bottom: 0;
.nav-link {
&.active {
color: #363a41;
background-color: inherit;
}
color: #afbbbe;
height: 1.65rem;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
}
.tab-content {
padding: 0;
.input-in-tab {
margin-top: -2px;
}
}
.logo-card-description {
font-size: 0.75rem;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.0125rem;
color: #6c868e;
margin-top: 20px;
height: 34px;
}
.logo-image-container {
display: flex;
justify-content: center;
align-items: center;
height: 6.625rem;
margin-top: 2rem;
margin-bottom: 1.6875rem;
.header-logo,
.email-logo,
.invoice-logo {
max-width: 6.25rem;
max-height: 6.625rem;
}
.favicon-logo {
width: 2.41875rem;
height: 2.41875rem;;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
border: 1px solid transparent;
}
}
}
.logo-card:not(:last-child) {
border-right: 0.0625rem solid #dedede;
}
}

View File

@@ -0,0 +1,160 @@
//local mixins
@mixin theme-card-overlay() {
width:100%;
height:100%;
position:absolute;
background-color:#000000;
opacity:0.25;
}
@mixin card-width() {
max-width: 24.1875rem;
@include media-breakpoint-down(sm) {
max-width: 100%;
}
}
@mixin card-width-and-height() {
height: 15.125rem;
@include card-width;
}
@mixin action-button {
height: 2.5rem;
border-radius: 1.65rem;
background-color: #ffffff;
}
@mixin theme-name-and-version() {
font-size: 1rem;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.01875rem;
text-align: center;
color: #363a41;
}
.theme-card-container {
.theme-card {
position: relative;
.active-card-overlay {
&.active {
display: block;
}
display: none;
@include theme-card-overlay;
}
.actions-container {
&.active {
display: block;
}
display: none;
}
@include card-width-and-height;
overflow-y: hidden;
border-radius: 0.25rem;
img {
max-width: 100%;
height: auto;
}
.actions-container {
width: 100%;
text-align: center;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
.action-button {
@include action-button;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.0125rem;
text-align: center;
color: #363a41;
.icon-current-theme {
color: #25b9d7;
}
}
.action-button:disabled {
i,
span {
opacity: 0.5;
}
}
.delete-button {
@include action-button;
position: relative;
width: 2.5rem;
i {
position: absolute;
bottom: 25%;
right: 25%;
}
}
.action-button:not(:first-child):not(:disabled):hover,
.delete-button:hover {
box-shadow: 0 0 0.9375rem 0 rgba(0, 0, 0, 0.2);
background-color: #3ed1f0;
color: #ffffff;
}
}
}
.theme-card-description {
@include card-width;
}
.theme-name {
font-weight: bold;
@include theme-name-and-version;
}
.theme-version {
@include theme-name-and-version;
}
.theme-author {
font-size: 0.8125rem;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: -0.01875rem;
text-align: center;
color: #618596;
padding-bottom: 1.6875rem;
}
.theme-catalog-card {
background-color: #f8f8f8;
.catalog-image {
padding-top: 3.7rem;
}
.catalog-description {
padding-top: 0.975rem;
}
}
}
// actions
.theme-card:hover .active-card-overlay,
.theme-card:hover .actions-container
{
display: block;
}

View File

@@ -0,0 +1,139 @@
// Tools
@import "~prestakit/dist/css/bootstrap-prestashop-ui-kit";
@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css";
@import "mixins/single_line_block";
@import "mixins/notification_container";
@import "mixins/notification_counter";
@import "~bootstrap/scss/mixins/breakpoints";
@import "mixins/cards";
@import "mixins/hover";
@import "mixins/stars";
// Settings
@import "config/settings";
@import "config/keyframes";
// Components
@import "components/layout/content_div";
@import "components/layout/header_toolbar";
@import "components/layout/kpi";
@import "components/layout/main_header";
@import "components/layout/nav_bar";
@import "components/layout/non_responsive";
@import "components/cards";
@import "components/category_tree";
@import "components/dropzone";
@import "components/modulescards";
@import "components/notifications";
@import "components/datepicker";
@import "components/help_box";
@import "components/ps_dropdown";
@import "components/ps_number";
@import "components/ps_radio";
@import "components/ps_spinner";
@import "components/ps_tree";
@import "components/translatable_input";
@import "components/choice_table";
@import "components/form";
@import "components/grid";
@import "components/showcase-card";
@import "components/material_choice_tree";
@import "components/button_groups";
@import "components/cursor";
@import "components/toggable_field";
@import "components/form_popover_error";
// Pages specifics SCSS files
@import "pages/product_page";
@import "pages/products_catalog";
@import "pages/translation_page";
@import "pages/stock_page";
@import "pages/invoices";
@import "pages/meta";
@import "pages/import_data";
@import "pages/currency";
@import "pages/themes_logo";
@import "pages/cms_page";
@import "pages/employee";
// Main Layout
@import "pages/modules";
// Other
@import "components/tinymce";
@import "../css/right-sidebar.css";
@import "../css/module/drop.css";
// Main Layout
body {
direction: ltr;
background: $background-grey;
}
// To put into the PrestaKit
._fullspace {
width: 100%;
height: 100%;
}
.bordered {
> .panel {
border: 0;
}
> .nav-item > .nav-link {
&.active {
border-bottom: 1px solid #FFFFFF;
}
}
}
#product_filter_column_active .select2 {
min-width: 4.375rem;
}
// Needed to override the default inline style of typeahead and take all the width
span.twitter-typeahead {
display: block !important;
width: 100% !important;
input.tt-input {
width: 100% !important;
}
}
// text buttons
.btn.btn-text {
cursor: pointer;
padding: 0;
background: transparent;
&:focus {
box-shadow: none;
}
}
// setting dropdown button
.dropdown-toggle.tool-button {
&:after {
content: "settings";
font-size: 1.375rem;
color: $medium-gray;
}
}
.translation-field {
display: none;
&.visible {
display: block;
}
}
table.table {
font-size: 0.8rem;
}
// Needed to override the default inline style of modal header in translations-app
.translations-app{
.modal-header{
display: initial;
}
}