mirror of https://github.com/4xmen/xshop.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
13 KiB
SCSS
527 lines
13 KiB
SCSS
$hc-offcanvas-nav-background-color: #eee !default;
|
|
$hc-offcanvas-nav-text-color: #111 !default;
|
|
$hc-offcanvas-nav-text-size: 14px !default;
|
|
|
|
.hc-offcanvas-nav {
|
|
font-family: sans-serif;
|
|
|
|
&,
|
|
.nav-wrapper {
|
|
&::after {
|
|
background: rgba(0, 0, 0, .3);
|
|
}
|
|
}
|
|
|
|
.nav-container,
|
|
.nav-wrapper,
|
|
ul {
|
|
background: $hc-offcanvas-nav-background-color;
|
|
}
|
|
|
|
.nav-content > {
|
|
h2, h3, h4, h5, h6 {
|
|
font-size: round($hc-offcanvas-nav-text-size * 1.35);
|
|
font-weight: normal;
|
|
padding: 20px 17px;
|
|
color: darken($hc-offcanvas-nav-background-color, 20%);
|
|
|
|
&:not(.nav-title):not(.level-title) {
|
|
font-size: round($hc-offcanvas-nav-text-size * 1.14);
|
|
padding: 15px 17px;
|
|
background: $hc-offcanvas-nav-background-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item-link,
|
|
li.nav-close a,
|
|
.nav-back a {
|
|
padding: 14px 17px;
|
|
font-size: $hc-offcanvas-nav-text-size;
|
|
color: $hc-offcanvas-nav-text-color;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0);
|
|
border-bottom: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
transition: background .1s ease;
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
z-index: 10;
|
|
}
|
|
|
|
&[disabled] {
|
|
color: rgba($hc-offcanvas-nav-text-color, .5);
|
|
}
|
|
}
|
|
|
|
div.nav-back {
|
|
& + ul > li:first-child > .nav-item-wrapper > .nav-item-link {
|
|
border-top: none !important;
|
|
}
|
|
}
|
|
|
|
&:not(.touch-device) {
|
|
li:not(.nav-item-custom) {
|
|
a:not([disabled]) {
|
|
&:hover {
|
|
background: darken($hc-offcanvas-nav-background-color, 2%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-custom-content {
|
|
padding: 14px 17px;
|
|
font-size: $hc-offcanvas-nav-text-size;
|
|
border-bottom: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
|
|
.nav-highlight {
|
|
background: darken($hc-offcanvas-nav-background-color, 4%);
|
|
}
|
|
|
|
.nav-wrapper {
|
|
& > .nav-content > {
|
|
|
|
ul {
|
|
|
|
&:first-of-type {
|
|
& > li {
|
|
&:first-child:not(.nav-back):not(.nav-close) {
|
|
& > .nav-item-wrapper {
|
|
& > .nav-item-link {
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
|
|
& + a {
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 2px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
|
|
& + {
|
|
h2, h3, h4, h5, h6 {
|
|
margin-top: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
h2, h3, h4, h5, h6 {
|
|
& + ul {
|
|
& > li {
|
|
&:first-child:not(.nav-back):not(.nav-close) {
|
|
& > .nav-item-wrapper {
|
|
& > .nav-item-link {
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-title,
|
|
.level-title,
|
|
.nav-close {
|
|
& + {
|
|
h2, h3, h4, h5, h6 {
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
color: $hc-offcanvas-nav-text-color;
|
|
|
|
&.nav-parent {
|
|
.nav-item-link {
|
|
|
|
&:last-child {
|
|
padding-right: 58px;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-close-button span,
|
|
.nav-parent .nav-next,
|
|
.nav-back span {
|
|
width: 45px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: background .1s ease;
|
|
}
|
|
|
|
.nav-close-button {
|
|
position: relative;
|
|
display: block;
|
|
|
|
span {
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-top: -3px;
|
|
border-top: 2px solid $hc-offcanvas-nav-text-color;
|
|
border-left: 2px solid $hc-offcanvas-nav-text-color;
|
|
}
|
|
|
|
&::before {
|
|
margin-left: -9px;
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
&::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-content > .nav-close {
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
a {
|
|
font-size: $hc-offcanvas-nav-text-size;
|
|
color: $hc-offcanvas-nav-text-color;
|
|
background: rgba(0, 0, 0, 0);
|
|
z-index: 1;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
|
|
&:not(.has-label) {
|
|
height: 50px;
|
|
}
|
|
|
|
&.has-label {
|
|
padding: 14px 17px;
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
|
|
&:hover {
|
|
border: none;
|
|
background: radial-gradient(
|
|
farthest-corner at top right,
|
|
rgba(0, 0, 0, .1),
|
|
rgba(0, 0, 0, 0)
|
|
);
|
|
}
|
|
}
|
|
|
|
&.has-label + ul {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
&:not(.nav-close-button-empty) {
|
|
.nav-content > .nav-close {
|
|
margin-bottom: -1px;
|
|
}
|
|
}
|
|
|
|
.nav-title {
|
|
color: dodgerblue !important;
|
|
& + .nav-close {
|
|
a:not(.has-label) {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 66px;
|
|
line-height: 66px;
|
|
top: -66px;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav-close-button-empty {
|
|
.nav-title {
|
|
padding-right: 55px;
|
|
}
|
|
}
|
|
|
|
li.nav-close {
|
|
a:not(.has-label) {
|
|
height: 49px;
|
|
}
|
|
}
|
|
|
|
.nav-content > .nav-close:first-child a,
|
|
.nav-title + .nav-close a.has-label,
|
|
li.nav-close a,
|
|
.nav-back a {
|
|
background: darken($hc-offcanvas-nav-background-color, 3%);
|
|
border-top: 1px solid darken($hc-offcanvas-nav-background-color, 7%);
|
|
border-bottom: 1px solid darken($hc-offcanvas-nav-background-color, 7%);
|
|
|
|
&:hover {
|
|
background: darken($hc-offcanvas-nav-background-color, 4.3%);
|
|
}
|
|
}
|
|
|
|
li.nav-close,
|
|
li.nav-back {
|
|
&:not(:first-child) {
|
|
a {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.nav-next {
|
|
border-left: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
border-bottom: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
|
|
.nav-next,
|
|
.nav-back {
|
|
span {
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin-left: -2px;
|
|
box-sizing: border-box;
|
|
border-top: 2px solid $hc-offcanvas-nav-text-color;
|
|
border-left: 2px solid $hc-offcanvas-nav-text-color;
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-next {
|
|
span {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
&::before {
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-back {
|
|
span {
|
|
&::before {
|
|
margin-left: 2px;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Left */
|
|
|
|
&.nav-position-left {
|
|
|
|
&.nav-open.nav-levels-overlap {
|
|
.nav-wrapper {
|
|
box-shadow: 1px 0 2px rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Right */
|
|
|
|
&.nav-position-right {
|
|
|
|
&.nav-open.nav-levels-overlap {
|
|
.nav-wrapper {
|
|
box-shadow: -1px 0 2px rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
|
|
.nav-next {
|
|
span {
|
|
&::before {
|
|
margin-left: 2px;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-back {
|
|
span {
|
|
&::before {
|
|
margin-left: -2px;
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Top */
|
|
|
|
&.nav-position-top {
|
|
|
|
&.nav-open {
|
|
.nav-wrapper {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
|
|
.nav-next {
|
|
span {
|
|
&::before {
|
|
margin-left: 0;
|
|
margin-right: -2px;
|
|
transform: translate(-50%, -50%) rotate(-135deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-back {
|
|
span {
|
|
&::before {
|
|
margin-left: 0;
|
|
margin-right: -2px;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Bottom */
|
|
|
|
&.nav-position-bottom {
|
|
|
|
&.nav-open {
|
|
.nav-wrapper {
|
|
box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
|
|
.nav-next {
|
|
span {
|
|
&::before {
|
|
margin-left: 0;
|
|
margin-right: -2px;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-back {
|
|
span {
|
|
&::before {
|
|
margin-left: 0;
|
|
margin-right: -2px;
|
|
transform: translate(-50%, -50%) rotate(-135deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Expand & none */
|
|
|
|
&.nav-levels-expand,
|
|
&.nav-levels-none {
|
|
|
|
ul {
|
|
.nav-wrapper {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
li {
|
|
|
|
&.level-open {
|
|
background: darken($hc-offcanvas-nav-background-color, 4%);
|
|
|
|
& > .nav-item-wrapper > {
|
|
|
|
a {
|
|
border-bottom: 1px solid darken($hc-offcanvas-nav-background-color, 8%);
|
|
|
|
&:hover {
|
|
background: darken($hc-offcanvas-nav-background-color, 3%);
|
|
}
|
|
}
|
|
|
|
.nav-next,
|
|
a > .nav-next {
|
|
span {
|
|
&::before {
|
|
margin-top: -2px;
|
|
transform: translate(-50%, -50%) rotate(-135deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 5 {
|
|
.nav-wrapper-#{$i} .nav-item-link {
|
|
padding-left: calc(17px + 20px * #{$i});
|
|
}
|
|
}
|
|
}
|
|
|
|
/* RTL */
|
|
|
|
&.rtl {
|
|
|
|
a.nav-next {
|
|
border-left: none;
|
|
border-right: 1px solid darken($hc-offcanvas-nav-background-color, 6%);
|
|
}
|
|
|
|
.nav-title + .nav-close a:not(.has-label),
|
|
.nav-close-button span,
|
|
.nav-next,
|
|
.nav-back span {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
li {
|
|
&.nav-parent {
|
|
.nav-item-link {
|
|
|
|
&:last-child {
|
|
padding-left: 58px;
|
|
padding-right: 17px;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-left: 45px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 5 {
|
|
.nav-wrapper-#{$i} li.nav-item .nav-item-link {
|
|
padding-right: calc(17px + 20px * #{$i});
|
|
}
|
|
}
|
|
}
|
|
}
|