NW/FleetCart
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

first upload all files

Browse Source
This commit is contained in:
NW
2023-06-11 13:14:03 +01:00
parent f14dbc52b5
commit c08b36d1b6
1705 changed files with 106852 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Themes/Storefront/resources/assets/public/sass/layout/_cookie-bar.scss Normal file
View File

@@ -0,0 +1,54 @@
.cookie-bar-wrap {
position: fixed;
left: 0;
right: 0;
bottom: -200px;
background: #3b4045;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(0);
z-index: 50;
transition: 600ms ease;
&.show {
opacity: 1;
visibility: visible;
transform: translateY(-200px);
}
}
.cookie-bar {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: 15px 0;
.cookie-bar-text {
font-size: 14px;
margin-right: 100px;
color: $color-white-dark;
}
.cookie-bar-action {
display: flex;
white-space: nowrap;
.btn-accept {
padding: 5px 24px;
}
}
}
@media screen and (max-width: $lg) {
.cookie-bar {
flex-direction: column;
padding: 16px 0 20px;
.cookie-bar-text {
margin: 0 0 14px 0;
text-align: center;
}
}
}

6
Themes/Storefront/resources/assets/public/sass/layout/_footer.scss Normal file
View File

@@ -0,0 +1,6 @@
@import 'footer/_footer-top',
'footer/_footer-bottom';
.footer {
padding-top: 70px;
}

22
Themes/Storefront/resources/assets/public/sass/layout/_header.scss Normal file
View File

@@ -0,0 +1,22 @@
@import 'header/_header-left',
'header/_header-search',
'header/_searched-keywords',
'header/_search-suggestion',
'header/_header-right',
'header/_sticky-header';
.header-wrap {
position: relative;
z-index: 8;
}
.header-wrap-inner {
padding: 40px 0;
}
@media screen and (max-width: $lg) {
.header-wrap-inner {
padding: 15px 0;
border-bottom: 1px solid $border-color;
}
}

42
Themes/Storefront/resources/assets/public/sass/layout/_landscape-products.scss Normal file
View File

@@ -0,0 +1,42 @@
.landscape-products-wrap {
margin-top: 45px;
.products-header {
border-bottom: 1px solid $border-color-lite;
}
.section-title {
padding-bottom: 14px;
}
}
.landscape-products {
.arrow-prev.slick-arrow,
.arrow-next.slick-arrow {
top: -40px;
}
.slick-list {
margin: 0 -15px -50px;
padding: 30px 0 50px;
.slick-track {
display: flex;
align-items: stretch;
}
}
.slick-dots {
position: relative;
bottom: auto;
margin-top: 30px;
}
}
@media screen and (max-width: $lg) {
.landscape-products {
.slick-list {
margin: 0 -8px -50px;
}
}
}

409
Themes/Storefront/resources/assets/public/sass/layout/_navigation.scss Normal file
View File

@@ -0,0 +1,409 @@
.navigation-inner {
display: flex;
align-items: center;
border: 1px solid $border-color;
border-radius: $radius-default;
.navbar {
padding: 0;
z-index: 2;
.navbar-nav {
margin: 0 30px;
}
}
.navigation-text {
margin-left: auto;
margin-right: 25px;
color: $color-yellow;
}
}
.category-nav {
position: relative;
width: 262px;
min-width: 262px;
display: flex;
padding: 4px 0 4px 4px;
align-items: center;
align-self: stretch;
&.show {
.category-nav-inner {
cursor: default;
}
.category-dropdown-wrap {
display: block;
}
}
.category-nav-inner {
font-weight: 500;
line-height: 24px;
width: 100%;
display: flex;
padding: 14px 35px 13px 30px;
color: $color-white;
flex-grow: 1;
align-items: center;
justify-content: space-between;
background: $color-default;
background: var(--color-primary);
border-radius: $radius-default 0 0 $radius-default;
cursor: pointer;
&:after {
display: none;
}
> i {
font-size: 16px;
}
}
.category-dropdown-wrap {
position: absolute;
left: -1px;
top: calc(100% + 31px);
display: none;
width: 263px;
background: $color-white;
border: 1px solid $border-color;
border-top: none;
border-bottom: none;
border-radius: $radius-default;
z-index: 4;
&:before,
&:after {
position: absolute;
content: '';
left: 0;
height: 1px;
width: 100%;
background: $border-color;
}
&:before {
top: 0;
}
&:after {
bottom: 0;
}
&.show {
display: block;
}
.category-dropdown {
&:before,
&:after {
position: absolute;
content: '';
left: 50%;
border-style: solid;
transform: translateX(-50%);
z-index: 1;
}
&:before {
top: -25px;
border-width: 13px 15px;
border-color: transparent;
border-bottom-color: $border-color;
}
&:after {
top: -23px;
border-width: 12px 14px;
border-color: transparent;
border-bottom-color: $color-white;
}
}
}
}
.vertical-megamenu {
position: static;
padding: 15px 0;
> li {
&.hide {
display: none;
}
&.more-categories {
> .menu-item {
font-weight: 500;
}
}
&:hover {
> .menu-item {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
&:after {
opacity: 1;
visibility: visible;
}
> .menu-item-icon {
color: $color-default;
color: var(--color-primary);
}
> i {
color: $color-default;
color: var(--color-primary);
}
}
}
> .menu-item {
position: relative;
line-height: 46px;
display: block;
padding: 0 50px 0 24px;
color: $color-black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: none;
&:after {
position: absolute;
content: '';
left: 0;
top: 15px;
height: 15px;
width: 7px;
background: $color-default;
background: var(--color-primary);
opacity: 0;
visibility: hidden;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
transition: $transition-default;
}
> .menu-item-icon {
font-size: 16px;
display: inline-flex;
margin: 15px 10px 0 0;
color: $color-gray;
vertical-align: top;
transition: $transition-default;
}
> i {
font-size: 12px;
position: absolute;
top: 17px;
right: 25px;
color: $color-gray;
transition: $transition-default;
}
}
}
&.mega-menu {
.dropdown {
&:hover {
> .sub-menu {
animation: menu-in-left 250ms ease;
}
}
> .sub-menu {
right: -175px;
top: 0;
animation: menu-in-right 250ms ease;
}
}
> .fluid-menu {
&:hover {
> .fluid-menu-wrap {
animation: menu-in-left 250ms ease;
}
}
> .fluid-menu-wrap {
top: 0;
right: -720px;
animation: menu-in-right 250ms ease;
}
}
}
}
.horizontal-megamenu {
position: relative;
flex-wrap: wrap;
&.mega-menu {
> .fluid-menu {
position: relative;
}
}
> .nav-item {
&:hover {
> .nav-link {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
> i {
right: 12px;
color: $color-default;
color: var(--color-primary);
}
}
}
&.multi-level,
&.fluid-menu {
> .nav-link {
padding-right: 35px;
}
}
> .nav-link {
line-height: 36px;
position: relative;
margin-bottom: -1px;
padding: 12px 15px 12px;
color: $color-black;
white-space: nowrap;
transition: none;
&:after {
content: attr(data-text);
font-weight: 500;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
> i {
position: absolute;
top: 50%;
right: 15px;
color: $color-gray;
transform: translateY(-50%) rotate(90deg);
}
}
}
&.mega-menu {
> .dropdown.multi-level {
> .sub-menu {
left: 0;
top: 59px;
}
}
.dropdown {
&:hover {
> .sub-menu {
animation: menu-in-top 250ms ease;
}
}
> .sub-menu {
left: 100%;
top: 0;
animation: menu-in-bottom 250ms ease;
}
}
> .fluid-menu {
&:hover {
> .fluid-menu-wrap {
animation: menu-in-top 250ms ease;
}
}
> .fluid-menu-wrap {
top: 59px;
left: 0;
animation: menu-in-bottom 250ms ease;
}
}
}
}
.rtl {
.horizontal-megamenu {
> .nav-item {
&:hover {
> .nav-link {
> i {
left: 15px #{'/*rtl:ignore*/'};
}
}
}
}
}
}
@media screen and (max-width: 1400px) {
.category-nav {
width: 245px;
min-width: 245px;
.category-dropdown-wrap {
width: 246px;
}
}
}
@media screen and (max-width: 1300px) {
.navigation-inner {
.navigation-text {
display: none;
}
}
}
@media screen and (max-width: 1047px) {
.vertical-megamenu {
&.mega-menu {
> .fluid-menu {
> .fluid-menu-wrap {
right: -696px;
width: 696px;
}
}
}
}
}
@media screen and (max-width: $lg) {
.navigation-wrap {
display: none;
}
.navigation-inner {
.navbar {
.navbar-nav {
margin-left: 0;
}
}
}
.category-nav {
display: none;
.category-dropdown-wrap {
display: none;
}
}
}

160
Themes/Storefront/resources/assets/public/sass/layout/_newsletter.scss Normal file
View File

@@ -0,0 +1,160 @@
.newsletter-wrap {
.modal-dialog {
width: 850px;
max-width: none;
}
}
.newsletter-inner {
position: relative;
display: flex;
.close {
font-size: 20px;
position: absolute;
top: 16px;
right: 15px;
transition: $transition-default;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
.newsletter-left {
width: 63%;
padding: 41px 50px 37px;
.title {
font-weight: 400;
margin-bottom: 16px;
}
.sub-title {
font-size: 18px;
font-weight: 300;
margin-bottom: 45px;
color: $color-gray;
}
.newsletter-form {
margin-bottom: 26px;
.form-group {
display: flex;
margin-bottom: 0;
.error-message {
display: none;
text-align: left;
}
}
> .error-message {
text-align: left;
}
}
.btn-subscribe {
font-weight: 400;
margin-left: 10px;
padding: 7px 30px;
white-space: nowrap;
> i {
margin-right: 4px;
}
}
.info-text {
font-size: 14px;
margin-bottom: 18px;
color: $color-gray-dark;
a {
color: $color-default;
color: var(--color-primary);
&:hover {
color: $color-default-hover;
color: var(--color-primary-hover);
}
}
}
.newsletter-checkbox {
margin-bottom: 0;
}
}
.newsletter-right {
width: 37%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
@media screen and (max-width: $lg) {
.newsletter-wrap {
.modal-dialog {
width: 550px;
}
}
.newsletter-left {
width: 100%;
padding: 33px 40px 27px;
text-align: center;
.title {
font-size: 28px;
line-height: 36px;
}
.sub-title {
font-size: 17px;
}
}
.newsletter-right {
display: none;
}
}
@media screen and (max-width: 600px) {
.newsletter-wrap {
.modal-dialog {
width: calc(100% - 30px);
}
}
}
@media screen and (max-width: 500px) {
.newsletter-left {
padding: 28px 30px 22px;
.sub-title {
margin-bottom: 35px;
}
.newsletter-form {
.form-group {
flex-direction: column;
.error-message {
display: block;
}
}
> .error-message {
display: none;
}
}
.btn-subscribe {
margin: 15px 0 0 0;
}
}
}

28
Themes/Storefront/resources/assets/public/sass/layout/_order-summary.scss Normal file
View File

@@ -0,0 +1,28 @@
@import 'order-summary/_order-summary-top',
'order-summary/_order-summary-middle',
'order-summary/_order-summary-bottom';
.order-summary-wrap {
width: 380px;
min-width: 380px;
padding-left: 15px;
}
.order-summary {
padding: 24px 30px 30px;
background: $color-white-dark;
border-radius: $radius-default;
.price-amount {
font-weight: 500;
}
}
@media screen and (max-width: $lg) {
.order-summary-wrap {
width: 100%;
min-width: 0;
margin-top: 50px;
padding-left: 0;
}
}

78
Themes/Storefront/resources/assets/public/sass/layout/_sidebar-cart.scss Normal file
View File

@@ -0,0 +1,78 @@
@import 'sidebar-cart/_sidebar-cart-top',
'sidebar-cart/_sidebar-cart-middle',
'sidebar-cart/_sidebar-cart-bottom';
.sidebar-cart-wrap {
position: fixed;
top: 0;
right: -200px;
bottom: 0;
height: 100%;
width: 400px;
background: $color-white;
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
opacity: 0;
visibility: hidden;
z-index: 200;
transition: $transition-primary;
&.active {
right: 0;
opacity: 1;
visibility: visible;
}
.empty-message {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
padding: 40px 0;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
svg {
height: 100px;
width: 100px;
margin-bottom: 22px;
g {
fill: $color-default;
fill: var(--color-primary);
}
}
}
}
@media screen and (max-width: 420px) {
.sidebar-cart-wrap {
right: -180px;
width: 360px;
}
}
@media screen and (max-width: 380px) {
.sidebar-cart-wrap {
right: -165px;
width: 330px;
}
}
@media screen and (max-width: 350px) {
.sidebar-cart-wrap {
right: -150px;
width: 300px;
.sidebar-cart-actions {
flex-direction: column;
.btn-view-cart {
margin-bottom: 10px;
}
}
}
}

228
Themes/Storefront/resources/assets/public/sass/layout/_sidebar-menu.scss Normal file
View File

@@ -0,0 +1,228 @@
.sidebar-menu-wrap {
position: fixed;
left: -150px;
top: 0;
bottom: 0;
width: 270px;
background: $color-white;
box-shadow: 2.5px 4.33px 40px 5px rgba(12, 31, 46, 0.1);
opacity: 0;
visibility: hidden;
z-index: 200;
transition: $transition-primary;
&.active {
left: 0;
opacity: 1;
visibility: visible;
}
.sidebar-menu-header {
display: flex;
padding: 15px 26px;
align-items: center;
justify-content: space-between;
background: $color-default;
background: var(--color-primary);
> h4 {
font-weight: 400;
color: $color-white;
}
.sidebar-menu-close {
display: flex;
cursor: pointer;
opacity: 0.8;
transition: $transition-default;
&:hover {
opacity: 1;
}
> i {
font-size: 18px;
color: $color-white;
}
}
}
.sidebar-menu-tab {
border-bottom: none;
.nav-item {
width: 50%;
}
&.nav-tabs {
.nav-link {
padding: 8px;
color: $color-gray-dark;
text-align: center;
background: $color-white-lite;
border: none;
border-radius: 0;
&.active {
font-weight: 400;
color: $color-black;
background: $color-white;
cursor: default;
}
&:after {
content: none;
}
}
}
}
> .tab-content {
position: absolute;
left: 0;
top: 100px;
right: 0;
bottom: 0;
}
}
.sidebar-menu {
margin: 15px 0;
> li {
cursor: pointer;
&:hover {
> .menu-item {
color: $color-default;
color: var(--color-primary);
> .menu-item-icon {
color: $color-default;
color: var(--color-primary);
}
}
> i {
color: $color-default;
color: var(--color-primary);
}
}
&.active {
.menu-item {
color: $color-default;
color: var(--color-primary);
&:after {
opacity: 1;
visibility: visible;
}
> .menu-item-icon {
color: $color-default;
color: var(--color-primary);
}
}
> i {
transform: rotate(90deg);
}
}
> .menu-item {
&:after {
position: absolute;
content: '';
left: 0;
top: 16px;
height: 15px;
width: 7px;
background: $color-default;
background: var(--color-primary);
opacity: 0;
visibility: hidden;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
transition: $transition-default;
}
> .menu-item-icon {
font-size: 16px;
color: $color-gray;
margin: 1px 10px 0 0;
transition: $transition-default;
}
}
> ul {
> li {
> a {
max-width: 160px;
}
> ul {
> li {
> a {
max-width: 155px;
}
}
}
}
}
}
li {
&:hover {
> a,
> i {
color: $color-default;
color: var(--color-primary);
}
}
a {
line-height: 45px;
max-width: 170px;
display: inline-block;
margin-left: 24px;
color: $color-black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
> i {
font-size: 12px;
position: absolute;
top: 18px;
right: 30px;
color: $color-gray;
float: right;
transition: $transition-default;
}
ul {
display: none;
margin-left: 10px;
}
}
.dropdown {
position: relative;
&.active {
> a {
color: $color-default;
color: var(--color-primary);
}
> i {
color: $color-default;
color: var(--color-primary);
transform: rotate(90deg);
}
}
}
}

103
Themes/Storefront/resources/assets/public/sass/layout/_steps.scss Normal file
View File

@@ -0,0 +1,103 @@
.steps-wrap {
margin-bottom: 40px;
}
.step-tabs {
display: flex;
justify-content: center;
.step-tab {
font-size: 18px;
font-weight: 500;
height: 60px;
width: 350px;
display: flex;
margin: 0 15px;
justify-content: center;
align-items: center;
color: $color-black;
text-align: center;
background: $color-white;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
white-space: nowrap;
cursor: default;
&.active {
color: $color-white;
background: $color-default;
background: var(--color-primary);
border-color: $color-default;
border-color: var(--color-primary);
.step-tab-text {
.bg-text {
color: $color-white;
}
}
}
}
.step-tab-link {
display: flex;
width: 100%;
color: $color-black;
justify-content: center;
align-self: stretch;
align-items: center;
}
.step-tab-text {
position: relative;
.bg-text {
font-size: 45px;
position: absolute;
top: 50%;
right: -35px;
width: 50px;
color: $color-black;
opacity: 0.15;
transform: translateY(-50%);
}
}
}
@media screen and (max-width: $lg) {
.steps-wrap {
display: none;
}
.step-tabs {
.step-tab {
font-size: 16px;
height: 50px;
width: 250px;
}
.step-tab-text {
.bg-text {
font-size: 36px;
}
}
}
}
@media screen and (max-width: 886px) {
.step-tabs {
align-items: center;
flex-direction: column;
.step-tab {
margin: 8px 15px;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
}

115
Themes/Storefront/resources/assets/public/sass/layout/_subscribe.scss Normal file
View File

@@ -0,0 +1,115 @@
.subscribe-wrap {
margin-top: 50px;
background: $color-default;
background: var(--color-primary);
}
.subscribe {
display: flex;
justify-content: center;
padding: 30px 0 25px;
> .row {
width: 100%;
}
.subscribe-text {
.title,
.sub-title {
display: block;
color: $color-white;
}
.title {
font-size: 30px;
font-weight: 500;
line-height: 30px;
}
.sub-title {
line-height: 24px;
margin-top: 10px;
}
}
.subscribe-field {
display: flex;
align-items: center;
justify-content: flex-end;
.form-group {
position: relative;
margin-bottom: 0;
> input {
height: 50px;
width: 450px;
border: none;
padding: 12px 147px 10px 20px;
}
> .btn-subscribe {
font-weight: 400;
position: absolute;
top: 5px;
right: 5px;
border-radius: 0 $radius-default $radius-default 0;
}
}
}
}
@media screen and (max-width: 1300px) {
.subscribe {
.subscribe-field {
.form-group {
> input {
width: 400px;
}
}
}
}
}
@media screen and (max-width: $xl) {
.subscribe {
.subscribe-field {
.form-group {
> input {
width: 450px;
}
}
}
}
}
@media screen and (max-width: $lg) {
.subscribe {
padding-bottom: 34px;
.subscribe-text {
text-align: center;
}
.subscribe-field {
margin-top: 25px;
justify-content: center;
}
}
}
@media screen and (max-width: 500px) {
.subscribe {
.subscribe-field {
> form {
width: 100%;
}
.form-group {
> input {
width: 100%;
}
}
}
}
}

84
Themes/Storefront/resources/assets/public/sass/layout/_top-nav.scss Normal file
View File

@@ -0,0 +1,84 @@
.top-nav-wrap {
border-bottom: 1px solid $border-color;
}
.top-nav {
padding: 10px 15px;
.top-nav-left {
> span {
display: block;
}
}
.top-nav-right-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
> li {
border-right: 1px solid $border-color-lite;
display: inline-block;
padding: 0 20px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
border-right: none;
}
> a {
display: block;
color: $color-black;
&:hover {
color: $color-default;
color: var(--color-primary);
}
> i {
margin-right: 5px;
color: $color-default;
color: var(--color-primary);
}
}
> i {
margin-right: 5px;
color: $color-default;
color: var(--color-primary);
}
}
.nice-select {
padding: 0 20px 0 0;
.list {
left: -22px;
min-width: 150px;
margin-top: 11px;
padding: 14px 0 11px;
}
.option {
padding: 0 20px;
}
}
}
}
@media screen and (max-width: $lg) {
.top-nav {
> .row {
flex-direction: column;
}
.top-nav-left {
margin-bottom: 10px;
text-align: center;
}
}
}

47
Themes/Storefront/resources/assets/public/sass/layout/footer/_footer-bottom.scss Normal file
View File

@@ -0,0 +1,47 @@
.footer-bottom {
margin-top: 60px;
padding: 20px 0;
border-top: 1px solid $border-color-lite;
}
.footer-text {
line-height: 26px;
color: $color-gray;
a {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
&:hover {
color: $color-default-hover;
color: var(--color-primary-hover);
}
}
}
.footer-payment {
display: flex;
justify-content: flex-end;
> img {
max-height: 30px;
max-width: 100%;
}
}
@media screen and (max-width: $md) {
.footer-bottom {
margin-top: 50px;
padding-top: 13px;
}
.footer-text {
text-align: center;
}
.footer-payment {
margin-top: 15px;
justify-content: center;
}
}

107
Themes/Storefront/resources/assets/public/sass/layout/footer/_footer-top.scss Normal file
View File

@@ -0,0 +1,107 @@
.footer-top {
.title {
margin-bottom: 23px;
}
.social-links {
margin: 37px 0 0 -8px;
}
}
.footer-links:not(.footer-tags) {
.list-inline {
li {
display: block;
margin-bottom: 14px;
&:last-child {
margin-bottom: 0;
}
a {
display: inline-block;
max-width: 100%;
color: $color-gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
transition: $transition-default;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
}
}
.footer-tags {
.title {
margin-bottom: 28px;
}
.list-inline {
margin-bottom: -7px;
li {
display: inline-block;
max-width: 100%;
margin: 0 4px 7px 0;
&:last-child {
margin-right: 0;
}
a {
line-height: 33px;
display: block;
color: $color-gray;
border: 1px solid $color-gray-lite;
border-radius: $radius-default;
padding: 0 10px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
&:hover {
color: $color-default;
color: var(--color-primary);
border-color: $color-default-transparent;
border-color: var(--color-primary-transparent);
}
}
}
}
}
@media screen and (max-width: $lg) {
.footer-top {
> .row {
> div:nth-child(4) {
.footer-links {
margin-top: 38px;
}
}
}
}
.footer-tags {
margin-top: 38px;
}
}
@media screen and (max-width: $md) {
.footer-top {
.social-links {
margin: 19px 0 -3px -8px;
}
}
.footer-links {
margin-top: 38px;
}
}

110
Themes/Storefront/resources/assets/public/sass/layout/header/_header-left.scss Normal file
View File

@@ -0,0 +1,110 @@
.header-column-left {
display: flex;
align-self: flex-start;
}
.sidebar-menu-icon-wrap {
display: flex;
height: 60px;
padding-left: 15px;
align-items: center;
justify-content: center;
.sidebar-menu-icon {
display: flex;
height: 30px;
width: 35px;
align-items: flex-start;
justify-content: center;
flex-direction: column;
cursor: pointer;
&:hover {
> span {
width: 20px;
background: $color-default;
background: var(--color-primary);
&:last-child {
width: 20px;
}
}
}
> span {
height: 2px;
width: 16px;
margin-bottom: 4px;
background: $color-black;
transition: $transition-primary;
&:nth-child(2) {
width: 20px;
}
&:last-child {
width: 12px;
margin-bottom: 0;
}
}
}
}
.header-logo {
display: flex;
height: 60px;
width: 266px;
padding: 0 15px;
align-items: center;
overflow: hidden;
img {
max-height: 100%;
max-width: 100%;
}
h3 {
color: $color-default;
color: var(--color-primary);
}
svg {
direction: ltr #{'/*rtl:ignore*/'};
height: 60px;
width: 245px;
#logo_f_bg,
#logo_f_text,
#logo_f_text_inner {
fill: $color-default;
fill: var(--color-primary);
}
}
}
@media screen and (max-width: $xl) {
.header-logo {
width: 200px;
}
}
@media screen and (min-width: 992px) {
.sidebar-menu-icon-wrap {
display: none;
}
}
@media screen and (max-width: $lg) {
.header-logo {
h1 {
font-size: 28px;
}
}
}
@media screen and (max-width: 391px) {
.header-logo {
width: 160px;
padding-left: 5px;
}
}

99
Themes/Storefront/resources/assets/public/sass/layout/header/_header-right.scss Normal file
View File

@@ -0,0 +1,99 @@
.header-column-right {
height: 60px;
padding: 0 15px;
.header-wishlist,
.header-cart {
display: flex;
align-items: center;
> span {
line-height: 28px;
color: $color-black;
white-space: nowrap;
transition: $transition-default;
}
}
.header-wishlist {
&:hover {
> span,
.icon-wrap > i {
color: $color-default;
color: var(--color-primary);
}
}
}
.header-cart {
margin-left: 35px;
cursor: pointer;
&:hover {
> span,
.icon-wrap > i {
color: $color-default;
color: var(--color-primary);
}
}
}
.icon-wrap {
position: relative;
margin-right: 10px;
> i {
font-size: 34px;
line-height: 36px;
color: $color-black;
transition: $transition-default;
}
> .count {
position: absolute;
font-size: 10px;
line-height: 20px;
top: 1px;
right: -6px;
height: 18px;
width: 18px;
color: $color-white;
background: $color-red;
text-align: center;
border-radius: 50%;
}
}
}
@media screen and (max-width: $xl) {
.header-column-right {
.icon-wrap {
margin-right: 6px;
}
.header-wishlist,
.header-cart {
> span {
display: none;
}
}
}
}
@media screen and (max-width: $lg) {
.header-column-right {
.header-wishlist {
display: none;
}
.header-cart {
margin-left: 0;
}
}
}
@media screen and (max-width: 391px) {
.header-column-right {
padding-left: 10px;
}
}

175
Themes/Storefront/resources/assets/public/sass/layout/header/_header-search.scss Normal file
View File

@@ -0,0 +1,175 @@
.header-search-wrap {
position: relative;
min-width: 0;
flex-grow: 1;
padding: 0 40px;
}
.header-search {
position: relative;
.header-search-lg {
position: relative;
display: flex;
border: 1px solid $border-color;
border-radius: $radius-default;
.search-input {
height: 58px;
padding-left: 30px;
border: none;
}
.header-search-right {
display: flex;
align-items: center;
margin-right: 4px;
}
.btn-search {
display: flex;
height: 50px;
width: 50px;
margin-left: 40px;
padding: 0;
align-items: center;
justify-content: center;
border-radius: 0 $radius-default $radius-default 0;
> i {
font-size: 18px;
line-height: 36px;
}
}
}
.nice-select {
display: flex;
align-items: center;
.list {
margin-top: 19px;
}
}
}
.header-search-sm-form {
position: absolute;
left: 15px;
right: 15px;
top: 0;
height: 100%;
background: $color-white;
opacity: 0;
z-index: -1;
transform: scale(0.96);
pointer-events: none;
transition: $transition-default;
&.active {
opacity: 1;
transform: scale(1);
z-index: 1;
pointer-events: auto;
}
> form {
position: relative;
display: flex;
width: 100%;
align-items: center;
> input {
height: 60px;
padding: 10px 50px;
border: none;
}
.btn-close,
.btn-search {
position: absolute;
top: 50%;
display: flex;
height: 50px;
width: 50px;
padding: 15px;
align-items: center;
justify-content: center;
cursor: pointer;
transform: translateY(-50%);
&:hover {
> i {
color: $color-default;
color: var(--color-primary);
}
}
> i {
font-size: 24px;
color: $color-gray;
transition: $transition-default;
}
}
.btn-close {
left: 0;
}
.btn-search {
right: 0;
}
}
}
@media screen and (min-width: 992px) {
.header-search {
.header-search-sm {
display: none;
}
}
.header-search-sm-form {
display: none;
}
}
@media screen and (max-width: $lg) {
.header-search-wrap {
position: static;
display: flex;
flex-grow: 0;
margin-left: auto;
padding: 0 15px;
align-items: center;
}
.header-search {
.header-search-lg {
display: none;
}
.header-search-sm {
&:hover {
> i {
color: $color-default;
color: var(--color-primary);
}
}
> i {
font-size: 34px;
line-height: 36px;
color: $color-black;
cursor: pointer;
transition: $transition-default;
}
}
}
}
@media screen and (max-width: 391px) {
.header-search-wrap {
padding: 0 10px;
}
}

191
Themes/Storefront/resources/assets/public/sass/layout/header/_search-suggestion.scss Normal file
View File

@@ -0,0 +1,191 @@
.search-suggestions {
position: absolute;
left: 41px;
top: 60px;
right: 41px;
background: $color-white;
border-bottom: 2px solid $color-default;
border-bottom: 2px solid var(--color-primary);
border-radius: 0 0 $radius-default $radius-default;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
.search-suggestions-inner {
max-height: 425px;
background: $color-white;
padding-bottom: 11px;
}
.title {
font-size: 13px;
font-weight: 400;
position: relative;
padding: 6px 20px;
color: $color-gray-dark;
background: $color-white-dark;
&:after {
position: absolute;
content: '';
left: 0;
top: 7px;
height: 15px;
width: 7px;
background: $color-default;
background: var(--color-primary);
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
}
.list-item {
transition: $transition-default;
&.active {
background: #f7f9fa;
}
}
}
.category-suggestion {
.title {
margin-bottom: 14px;
}
& + .product-suggestion {
margin-top: 11px;
}
}
.category-suggestion-list {
.single-item {
font-size: 14px;
line-height: 26px;
display: block;
max-width: 100%;
padding: 0 20px;
color: $color-gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
}
.product-suggestion {
padding-bottom: 3px;
.title {
margin-bottom: 14px;
}
.more-results {
font-size: 14px;
display: block;
margin: 14px 0 -14px;
padding: 6px 0;
color: $color-gray-dark;
background: $color-white-dark;
text-align: center;
border-top: 1px solid $color-gray-lite;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
.product-suggestion-list {
.list-item {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
}
.single-item {
position: relative;
display: flex;
padding: 6px 20px;
}
.product-image {
height: 50px;
width: 50px;
min-width: 50px;
border-radius: $radius-default;
overflow: hidden;
.image-placeholder {
height: 35px;
width: 35px;
}
}
.product-info {
min-width: 0;
margin-left: 20px;
flex-grow: 1;
}
.product-info-top {
display: flex;
justify-content: space-between;
}
.product-name {
font-size: 14px;
display: inline-block;
max-width: 100%;
margin-bottom: 3px;
color: $color-gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: top;
}
.product-badge {
position: relative;
top: auto;
right: auto;
margin: -2px 0 -1px 15px;
}
em {
font-weight: 500;
font-style: inherit;
color: $color-default;
color: var(--color-primary);
}
}
@media screen and (max-width: $lg) {
.search-suggestions {
top: 76px;
left: 15px;
right: 15px;
display: none;
.search-suggestions-inner {
max-height: 359px;
}
}
.header-wrap-inner {
&.sticky {
.search-suggestions {
top: 71px;
}
}
}
.header-search-sm-form {
&.active {
+ .search-suggestions {
display: block;
}
}
}
}

62
Themes/Storefront/resources/assets/public/sass/layout/header/_searched-keywords.scss Normal file
View File

@@ -0,0 +1,62 @@
.header-search {
.searched-keywords {
display: flex;
width: 95%;
margin: 14px auto -9px;
justify-content: center;
> label {
font-size: 14px;
line-height: 26px;
margin-bottom: 0;
color: $color-default;
color: var(--color-primary);
white-space: nowrap;
}
}
.searched-keywords-list {
height: 26px;
overflow: hidden;
li {
font-size: 14px;
line-height: 26px;
position: relative;
display: inline-block;
padding: 0 15px;
&:after {
position: absolute;
content: '';
left: -1px;
top: 4px;
height: 16px;
width: 1px;
background: $color-gray-dark;
}
&:first-child:after {
height: 0;
width: 0;
}
a {
color: $color-gray-dark;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
}
}
}
@media screen and (max-width: $lg) {
.header-search {
.searched-keywords {
display: none;
}
}
}

36
Themes/Storefront/resources/assets/public/sass/layout/header/_sticky-header.scss Normal file
View File

@@ -0,0 +1,36 @@
.header-wrap-inner {
&.sticky {
position: fixed;
left: 0;
top: -200px;
right: 0;
min-width: 320px;
padding: 10px 0;
background: $color-white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 150;
.row {
&.flex-nowrap {
align-items: center;
}
}
.header-logo {
height: 55px;
svg {
height: 55px;
}
}
.searched-keywords {
display: none;
}
}
&.show {
top: 0;
transition: 600ms ease;
}
}

25
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-bottom.scss Normal file
View File

@@ -0,0 +1,25 @@
.order-summary-bottom {
.checkout-terms-and-conditions {
margin: -1px 0 0;
padding-bottom: 17px;
text-align: center;
.error-message {
margin: -2px 0 8px;
}
}
.btn {
width: 100%;
}
}
#paypal-button-container {
.paypal-buttons {
vertical-align: top;
iframe.component-frame {
z-index: 0;
}
}
}

39
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-middle.scss Normal file
View File

@@ -0,0 +1,39 @@
.order-summary-middle {
padding: 25px 0 8px;
&.loading {
&:before {
left: -15px;
top: 15px;
right: -15px;
bottom: 15px;
}
}
.shipping-methods {
margin: 21px 0 -6px;
> h6 {
margin-bottom: 17px;
}
.error-message {
margin: 0;
padding-bottom: 10px;
}
.form-group {
margin: -1px 0 0;
}
.form-radio {
display: flex;
justify-content: space-between;
label {
padding-right: 20px;
color: $color-black;
}
}
}
}

39
Themes/Storefront/resources/assets/public/sass/layout/order-summary/_order-summary-top.scss Normal file
View File

@@ -0,0 +1,39 @@
.order-summary-top {
.section-title {
padding-bottom: 18px;
border-bottom: 1px solid $border-color-lite;
}
.cart-item {
padding: 25px 0 24px;
border-bottom: 1px solid $color-gray-lite;
li {
display: flex;
margin-bottom: 9px;
justify-content: space-between;
&:last-child {
margin-bottom: 0;
}
}
label {
margin-bottom: 0;
padding-right: 20px;
}
.product-name {
color: $color-black;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.product-quantity {
font-weight: 500;
}
}
}

28
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-bottom.scss Normal file
View File

@@ -0,0 +1,28 @@
.sidebar-cart-bottom {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background: $color-white;
.sidebar-cart-subtotal {
display: flex;
margin: 0 30px;
padding: 25px 0;
justify-content: space-between;
border-top: 1px solid $border-color-lite;
> span {
font-weight: 500;
color: $color-default;
color: var(--color-primary);
}
}
.sidebar-cart-actions {
display: flex;
padding: 20px 30px;
background: $color-white-lite;
justify-content: space-between;
}
}

84
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-middle.scss Normal file
View File

@@ -0,0 +1,84 @@
.sidebar-cart-middle {
position: absolute;
left: 0;
right: 0;
top: 60px;
bottom: 155px;
padding: 0 30px;
&.empty {
bottom: 0;
overflow: visible;
}
}
.sidebar-cart-items-wrap {
padding: 5px 0;
background: $color-white;
}
.sidebar-cart-item {
position: relative;
display: flex;
padding: 25px 0 21px;
border-bottom: 1px solid $color-white-lite;
&:last-child {
border-bottom: none;
}
.product-image {
height: 46px;
width: 46px;
min-width: 46px;
border-radius: $radius-default;
overflow: hidden;
.image-placeholder {
height: 25px;
width: 25px;
}
}
.product-info {
margin: 0 30px 0 20px;
min-width: 0;
.product-name {
font-size: 15px;
font-weight: 400;
line-height: 24px;
display: block;
color: $color-black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
color: $color-default;
color: var(--color-primary);
}
}
.product-quantity {
font-size: 13px;
line-height: 26px;
color: #666666;
}
}
.remove-cart-item {
position: absolute;
top: 16px;
right: -8px;
.btn-remove {
font-size: 14px;
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
}

29
Themes/Storefront/resources/assets/public/sass/layout/sidebar-cart/_sidebar-cart-top.scss Normal file
View File

@@ -0,0 +1,29 @@
.sidebar-cart-top {
display: flex;
padding: 15px 30px;
align-items: center;
justify-content: space-between;
background: $color-default;
background: var(--color-primary);
.title {
font-weight: 400;
color: $color-white;
}
.sidebar-cart-close {
display: flex;
cursor: pointer;
opacity: 0.8;
transition: $transition-default;
&:hover {
opacity: 1;
}
> i {
font-size: 18px;
color: $color-white;
}
}
}