| Linux hkvL61zh9Vexzf 3.10.0-957.1.3.el7.x86_64 #1 SMP Thu Nov 29 14:49:43 UTC 2018 x86_64 Path : /www/wwwroot/fashion-kingdom.com/wp-content/plugins/kitify/assets/css/addons/ |
| Current File : /www/wwwroot/fashion-kingdom.com/wp-content/plugins/kitify/assets/css/addons/category-menu.scss |
.header-category__title {
display: flex;
align-items: center;
color: inherit;
position: relative;
cursor: pointer;
}
.header-category__icon {
@include font-size(20/16);
margin-right: 15px;
}
.header-category__name {
@include font-size(16/16);
font-weight: 500;
white-space: nowrap;
}
.header-category__arrow {
position: absolute;
right: 0;
top: 50%;
transform: translateY( -50% );
@include font-size(11/16);
transition: .2s;
}
.header-category-menu {
&.kitify-open {
> .kitify-button--ghost {
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
border-color: transparent;
.header-category__arrow {
color: var(--site-border-color);
}
}
> .kitify-button--subtle {
border-color: var(--site-border-color);
}
}
&.header-category--icon {
&.kitify-open {
> .kitify-button--ghost {
border-color: var(--site-border-color);
box-shadow: none;
}
}
> .kitify-button--ghost {
width: 48px;
height: 48px;
line-height: 48px;
border: 2px solid;
border-color: inherit;
border-radius: 50%;
min-width: auto;
padding: 0;
position: relative;
transition: .25s;
.header-category__icon {
margin: 0 auto;
}
}
}
&.header-category--text {
&.kitify-open {
opacity: 1;
}
> .kitify-button--text ,
> .kitify-button--subtle {
+ .header-category__content {
margin-top: 3px;
}
}
.header-category__arrow {
opacity: .48;
}
}
&.header-category--both {
> .kitify-button--subtle {
+ .header-category__content {
margin-top: 3px;
}
}
> .kitify-button--subtle {
line-height: 45px;
&:after {
content: "";
position: absolute;
bottom: -21px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: .25s;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
}
> .kitify-button--text {
&:before {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
pointer-events: none;
opacity: 0;
transform: translateY(10px);
transition: .25s;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
}
> .kitify-button--ghost {
height: 58px;
&:after {
bottom: -1px;
}
}
}
&:not( .header-category--icon ) {
> .kitify-button--ghost {
border-bottom: none;
position: relative;
min-width: 267px;
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--mt-header-border-color);
}
}
&.header-category--both {
> .kitify-button--ghost {
&:after {
bottom: -1px;
}
}
}
}
> .kitify-button--ghost {
height: 100%;
border: 1px solid;
padding: 0 21px;
.header-category__icon {
margin-right: 15px;
}
.header-category__arrow {
right: 23px;
}
}
> .kitify-button--subtle {
height: 100%;
padding: 0 18px 0 0;
line-height: 1;
border-color: var(--site-border-color);
.header-category__name {
@include font-size(14/16);
}
}
> .kitify-button--text {
height: 100%;
padding: 0 18px 0 0;
line-height: 1;
&:after {
display: none;
}
.header-category__name {
@include font-size(14/16);
}
}
}
.header-category__menu {
ul {
list-style: none;
margin: 0;
padding-left: 0;
}
ul.menu > li > a {
transition: .2s;
> .menu-item-icon {
@include font-size(20/16);
margin-right: 17px;
}
.menu-icon-item--has-background {
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
border-radius: 50%;
@include font-size(24/16);
margin-right: 16px;
}
}
a {
@include font-size(14/16);
display: block;
text-decoration: none;
padding: 6px 22px;
}
> ul {
flex-direction: column;
padding-bottom: 12px;
> li {
&:first-child {
padding-top: 0;
}
&:hover {
> a {
color: var(--site-heading-color);
.kitify-svg-icon {
color: inherit;
}
}
}
> a {
font-weight: 500;
position: relative;
line-height: ( 40/16 );
}
}
}
.menu-item-mega {
&:hover{
> ul {
left: 100%;
opacity: 1;
visibility: visible;
transform: scaleX(1);
}
}
}
.mega-menu-main {
display: flex;
li {
padding: 3px 0;
}
> li {
padding: 0 24px;
> a ,
> span {
@include font-size(16/16);
font-weight: 500;
margin-bottom: 12px;
}
> span {
display: inline-block;
}
}
.font-weight--medium {
> a {
font-weight: 500;
}
}
.font-weight--large {
> a {
font-weight: 700;
}
}
}
.mega-menu-container {
padding: 23px 8px 20px;
}
.mega-menu {
min-height: 100%;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
top: 0;
left: calc(100% + 10px);
transform: scaleX(0);
opacity: 0;
visibility: hidden;
z-index: 999;
transition: left 0.2s;
&:before {
content: '';
position: absolute;
left: -5px;
top: 0;
width: 5px;
height: 100%;
background-color: var( --kitify-category-menu-nav-bg );
}
}
}
.header-contents {
.header-category-menu {
&.header-category--text {
> .kitify-button--text,
> .kitify-button--subtle {
+ .header-category__content {
.mega-menu-container.full-width {
width: calc( 1170px - 10px - 278px);
}
}
}
}
&.header-category--both {
.header-category__content {
.mega-menu-container.full-width {
width: calc( 1170px - 16px - 267px);
}
}
}
.kitify-hover {
> li:hover {
.mega-menu-container.full-width {
.kitify-container-full-width-hover {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
}
}
}
.header-category__menu {
li {
position: static;
&.menu-item-has-children:not( .menu-item-mega ) {
> ul.sub-menu:not( .sub-mega-menu ) {
width: 100%;
min-height: 100%;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
padding: 19px 20px;
position: absolute;
top: 0;
left: 100%;
transform: translateX(10px);
opacity: 0;
visibility: hidden;
z-index: 999;
transition: .2s;
&:before {
content: '';
position: absolute;
left: -5px;
top: 0;
width: 5px;
height: 100%;
background-color: var( --kitify-category-menu-nav-bg );
}
ul {
min-height: 100%;
top: 0;
}
}
&:hover{
> ul.sub-menu:not( .sub-mega-menu ) {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
}
.kitify-mega-menu__column {
li {
@include font-size(14/16);
padding: 2px 0;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
.menu-taxonomy-grid-widget {
margin: 0 -25px;
&.taxonomy-grid-hide-title {
margin: 0 -12px -12px -12px;
.menu-taxonomy-grid-widget__item {
padding: 0 12px;
}
}
}
.menu-taxonomy-grid-widget__item {
padding: 0 25px;
}
.menu-item--type-label {
padding-top: 0;
}
.menu-item--type-hidden {
padding: 0;
}
}
}
ul {
ul {
li {
> * {
line-height: ( 30/16 );
padding: 0;
position: relative;
}
}
}
}
> ul {
&:after {
z-index: 1000;
}
> li {
> a {
z-index: 1000;
}
}
}
.mega-menu-container.full-width {
.kitify-container-full-width-hover {
content: '';
width: 100vw;
height: calc( 100% + 6px );
position: absolute;
left: 0;
top: -3px;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateX(10px);
}
.kitify-mega-menu__column {
z-index: 1;
}
}
}
}
.header-category--both {
&.kitify-open {
.header-category__content,
> .kitify-button--subtle:after,
> .kitify-button--text:before {
opacity: 1;
pointer-events: initial;
transform: translateY(0);
z-index: 200;
}
.header-category__content {
&:before {
opacity: 1;
}
}
}
.kitify-button--ghost {
> * {
z-index: 1000;
}
+ .header-category__content {
.header-category__menu {
> ul {
> li {
&:hover {
> a {
color: var(--site-heading-color);
&:before {
opacity: 1;
}
}
}
&:first-child {
> a {
padding-top: 0;
&:before {
top: calc( 50% - 4px );
}
}
}
> a {
line-height: 2.14;
&:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY( -50% );
height: 24px;
width: 2px;
background-color: var(--site-heading-color);
opacity: 0;
transition: .3s;
}
}
}
}
}
}
}
.kitify-button--subtle,
.kitify-button--text {
+ .header-category__content {
.header-category__menu > ul {
&:after {
content: '';
position: absolute;
right: 0;
top: 18px;
width: 1px;
height: calc( 100% - 36px );
background-color: #ffffff;
opacity: 0;
pointer-events: none;
}
&.kitify-hover {
&:after {
opacity: 1;
pointer-events: inherit;
}
}
> li{
&:hover > a {
color: var(--site-heading-color);
> .menu-item-icon {
color: inherit;
}
}
&.menu-item-has-children {
padding-right: 15px;
}
> a {
.icon-arrow {
@include font-size(11/16);
color: #7c818b;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
margin: 0;
/*rtl:raw:
transform: translateY(-50%) rotateY(180deg);
*/
}
}
}
}
}
}
.header-category__content {
--kitify-category-menu-nav-bg: #fff;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
min-width: 267px;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
transform: translateY( 10px );
text-align: left;
z-index: 1;
transition: .25s;
&:before {
content: '';
position: absolute;
top: -3px;
left: 1px;
width: calc( 100% - 1px );
height: 3px;
background-color: var( --kitify-category-menu-nav-bg );
opacity: 0;
}
}
.header-category__menu {
&:hover {
> ul {
> li {
> a {
color: var(--site-text-color);
}
}
}
}
ul {
ul {
li {
a {
line-height: ( 32/16 );
padding: 0;
display: inline-block;
position: relative;
&:hover {
&:after {
width: 100%;
left: 0;
}
}
&:after {
content: "";
position: absolute;
right: 0;
bottom: 2px;
width: 0;
border-bottom: 1px solid;
transition: width 0.3s;
}
}
}
}
}
ul.menu {
> li {
> a {
> .menu-item-icon {
position: relative;
top: 3px;
}
}
}
}
li {
position: static;
&.menu-item-has-children:not( .menu-item-mega ) {
> ul.sub-menu:not( .sub-mega-menu ) {
min-height: calc( 100% + 61px );
top: -61px;
ul {
min-height: 100%;
top: 0;
}
}
}
}
.mega-menu-container {
padding: 18px 23px;
}
}
}
.header-category--icon {
height: 100%;
display: flex;
align-items: center;
&.kitify-open {
.header-category__content {
opacity: 1;
pointer-events: initial;
transform: translateY(0);
}
}
&:first-child {
.header-category__content {
right: auto;
left: 0;
}
> .kitify-button--ghost + .header-category__content {
left: 24px;
}
}
.header-category__icon {
margin-right: 0;
}
.kitify-button--subtle {
padding: 0;
}
.header-category__content {
--kitify-category-menu-nav-bg: #fff;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
right: 24px;
width: 267px;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
transform: translateY( 10px );
text-align: left;
transition: .25s;
z-index: 101;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: solid transparent;
pointer-events: none;
border-color: transparent;
border-right-color: #ffffff;
border-width: 12px;
margin-top: -12px;
transition: .25s;
}
}
.header-category__menu {
> ul {
padding: 18px 0 17px;
position: relative;
&:after {
content: '';
position: absolute;
right: 0;
top: 18px;
width: 1px;
height: calc( 100% - 36px );
opacity: 0;
pointer-events: none;
}
&.kitify-hover {
&:after {
opacity: 1;
pointer-events: inherit;
}
}
> li {
&:hover {
> a {
&:before {
display: none;
}
}
}
&:last-child {
> a {
&:before {
display: none;
}
}
}
> a {
display: flex;
align-items: center;
line-height: ( 48/16 );
font-weight: 400;
padding: 5px 24px;
@include line( 100% );
&:before {
width: calc( 100% - 103px );
left: 79px;
}
> img {
max-width: 40px;
margin-right: 15px;
}
> .kitify-svg-icon {
margin-right: 14.5px;
top: 0;
}
.icon-arrow {
@include font-size(11/16);
position: absolute;
right: 24px;
top: calc( 50% + 1px );
transform: translateY(-50%);
margin: 0;
/*rtl:raw:
transform: translateY(-50%) rotateY(180deg);
*/
}
}
}
}
ul {
ul {
li {
a {
line-height: ( 32/16 );
padding: 0;
display: inline-block;
position: relative;
&:hover {
&:after {
width: 100%;
left: 0;
}
}
&:after {
content: "";
position: absolute;
right: 0;
bottom: 2px;
width: 0;
border-bottom: 1px solid;
transition: width 0.3s;
}
}
}
}
}
}
.mega-menu-container {
padding: 23px 27px 13px;
}
}
.header-category--text {
height: 100%;
&.kitify-open {
.header-category__content,
.kitify-button--text:before {
opacity: 1;
pointer-events: initial;
transform: translateY(0);
z-index: 100;
}
.kitify-button--text:before {
transform: translate( -50%, 0 );
}
.header-category__arrow {
opacity: 1;
}
}
.header-category__icon {
display: none;
}
.kitify-button--text {
&:before {
content: '';
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
float: left;
position: absolute;
bottom: 0;
left: 50%;
transform: translate( -50%, 10px );
width: 8px;
height: 8px;
opacity: 0;
pointer-events: none;
transition: .25s;
}
}
.header-category__content {
--kitify-category-menu-nav-bg: #fff;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
min-width: 278px;
background-color: var( --kitify-category-menu-nav-bg );
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
transform: translateY( 10px );
margin-top: -8px;
text-align: left;
transition: .25s;
&:before {
content: '';
position: absolute;
top: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: var( --kitify-category-menu-nav-bg );
}
}
.header-category__menu {
> ul {
position: relative;
padding-top: 11px;
padding-bottom: 15px;
&:after {
content: '';
position: absolute;
right: 5px;
top: 18px;
width: 1px;
height: calc( 100% - 36px );
opacity: 0;
pointer-events: none;
}
&.kitify-hover {
&:after {
opacity: 1;
pointer-events: inherit;
}
}
> li {
&:hover {
> a {
> .menu-item-icon {
color: inherit;
}
}
}
&.menu-item-has-children {
padding-right: 23px;
}
> a {
color: #878b94;
padding-left: 14px;
padding-right: 14px;
}
}
}
ul {
ul {
li {
a {
line-height: ( 32/16 );
padding: 0;
display: inline-block;
position: relative;
&:hover {
&:after {
width: 100%;
left: 0;
}
}
&:after {
content: "";
position: absolute;
right: 0;
bottom: 2px;
width: 0;
border-bottom: 1px solid;
transition: width 0.3s;
}
}
}
}
}
.mega-menu-container {
padding: 22px 23px;
}
}
}
.header-bottom {
.header-category--both {
.header-category__menu {
.mega-menu {
min-height: calc( 100% + 58px );
top: -58px;
}
}
}
}
.menu-item-content {
.menu-banner-list {
display: flex;
flex-wrap: wrap;
margin: -12px;
.menu-banner {
flex: 0 1 50%;
padding: 12px;
&:before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: calc( 100% - 24px );
height: calc( 100% - 24px );
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}
}
.menu-banner__content {
padding: 36px;
}
}
.menu-banner {
position: relative;
color: #ffffff;
&:after {
display: none;
}
}
.menu-banner__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 9;
padding: 24px;
}
.menu-banner__text {
@include font-size(18/16);
font-weight: 500;
line-height: ( 24/16 );
margin-bottom: 16px;
}
.menu-banner__button {
color: inherit;
margin-right: auto;
line-height: ( 22/16 );
font-weight: 500;
}
}
.header-items {
.header-category-menu {
&.kitify-open {
> .kitify-button--ghost {
border-color: transparent;
}
}
> .kitify-button--ghost {
background-color: transparent;
border-color: var(--mt-header-border-color);
}
}
}
// taxonomy List
.menu-taxonomy-list-widget {
.menu-taxonomy-list-widget__item {
padding-left: 0;
padding-right: 0;
&:first-child {
padding-top: 0;
}
}
.menu-taxonomy-list-widget__subitem {
margin-left: 15px;
}
}
// taxonomy Grid
.menu-taxonomy-grid-widget__heading {
@include font-size(14/16);
color: var(--site-heading-color);
font-weight: 500;
line-height: 2;
margin-bottom: 16px;
}
.menu-taxonomy-grid-widget {
display: flex;
flex-wrap: wrap;
&.taxonomy-grid-hide-title {
.menu-taxonomy-grid-widget__item {
width: 124px;
margin-bottom: 12px;
}
}
}
.menu-taxonomy-grid-widget__item {
width: 150px;
text-align: center;
margin-bottom: 14px;
a {
&:after {
display: none;
}
}
}
.menu-taxonomy-grid-widget__image {
height: 100px;
width: 100px;
display: flex;
align-items: center;
border-radius: 50%;
margin: 0 auto;
background-color: #ffffff;
img {
border-radius: 50%;
}
}
.menu-taxonomy-grid-widget__name {
display: block;
margin-top: 10px;
}
li.menu-taxonomy-grid-widget__item--all-cats {
a {
width: 100px;
height: 100px;
@include font-size(16/16);
font-weight: 700;
text-align: center;
border-radius: 50%;
border: 2px solid var(--site-border-color);
display: flex;
align-items: center;
justify-content: center;
span {
line-height: 6.5;
position: relative;
&:before {
content: '';
position: absolute;
left: 0;
bottom: calc( ( 100% / 2 ) - 10px );
width: 100%;
height: 1px;
background-color: var(--site-heading-color);;
}
}
}
}