421 lines
7.3 KiB
Sass
421 lines
7.3 KiB
Sass
.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
|
|
|
|
+media-breakpoint-down(md)
|
|
display: inline-flex
|
|
|
|
.nav-bar
|
|
position: fixed
|
|
top: 0
|
|
bottom: 0
|
|
z-index: 502
|
|
background: $gray-dark-menu
|
|
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%
|
|
width: 70%
|
|
margin-top: $size-header-height + (.625rem * 2)
|
|
|
|
+media-breakpoint-only(sm)
|
|
width: 60%
|
|
|
|
+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
|
|
|
|
+media-breakpoint-down(md)
|
|
line-height: 4.6875rem
|
|
font-size: 4.6875rem
|
|
|
|
span
|
|
color: white
|
|
display: block
|
|
margin-bottom: 0.625rem
|
|
|
|
+media-breakpoint-down(md)
|
|
font-size: 1.09375rem
|
|
|
|
img
|
|
width: 3.75rem
|
|
height: 3.75rem
|
|
|
|
&.img-thumbnail
|
|
border-radius: 36px
|
|
|
|
.shop-list
|
|
padding-bottom: 1rem
|
|
text-align: center
|
|
font-weight: bold
|
|
|
|
a
|
|
+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]
|
|
+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
|
|
+media-breakpoint-down(md)
|
|
.sub-tabs-arrow
|
|
visibility: visible
|
|
|
|
&.-active
|
|
+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
|
|
+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
|
|
|
|
+media-breakpoint-down(md)
|
|
background: $gray-dark-menu
|
|
|
|
&.has_submenu
|
|
.link
|
|
.sub-tabs-arrow
|
|
visibility: visible
|
|
|
|
> .submenu
|
|
list-style: none
|
|
background: #202226
|
|
display: none
|
|
white-space: nowrap
|
|
padding-left: 2.75rem
|
|
|
|
& > li
|
|
+media-breakpoint-down(md)
|
|
a.link
|
|
padding-top: 0.75rem
|
|
padding-bottom: 0.75rem
|
|
|
|
&:first-of-type
|
|
padding-top: .625rem
|
|
|
|
+media-breakpoint-down(md)
|
|
padding-top: 0
|
|
|
|
&:last-of-type
|
|
padding-bottom: .750rem
|
|
|
|
+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
|
|
|
|
+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
|
|
|
|
|
|
+media-breakpoint-down(md)
|
|
display: none
|
|
|
|
& > .title
|
|
color: white
|
|
background: $gray-dark-menu
|
|
|
|
.menu-collapse
|
|
height: .813rem
|
|
font-size: 2rem
|
|
display: block
|
|
cursor: pointer
|
|
text-align: right
|
|
padding: .688rem .938rem 1.188rem 0
|
|
line-height: .813rem
|
|
color: $gray-dark-text
|
|
|
|
+media-breakpoint-down(md)
|
|
display: none
|
|
padding-bottom: 1rem
|
|
|
|
.material-icons
|
|
color: #BEBEBE
|
|
|
|
&:last-child
|
|
margin-left: -1.313rem
|
|
|
|
.page-sidebar-closed:not(.mobile)
|
|
.content-div, #content
|
|
transition: padding 1s ease
|
|
|
|
.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: 14.6875rem
|
|
|
|
> 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
|
|
|