|
.hover-button.active { |
|
display: block; |
|
visibility: visible; |
|
} |
|
|
|
.nav-close-button { |
|
margin-left: 8px; |
|
} |
|
|
|
.nav { |
|
position: fixed; |
|
z-index: 40; |
|
top: 0; |
|
|
|
|
|
|
|
bottom: 0; |
|
opacity: 0; |
|
} |
|
|
|
.nav.active { |
|
position: relative; |
|
left: 0; |
|
opacity: 1; |
|
} |
|
|
|
.nav-mask.active { |
|
opacity: 1; |
|
pointer-events: auto; |
|
} |
|
|
|
@media (max-width: 767px) { |
|
.nav { |
|
width: calc(100% - 10px) ; |
|
transition: all 0.2s; |
|
} |
|
.nav-mask { |
|
position: fixed; |
|
z-index: 35; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 0; |
|
background-color: rgba(86, 88, 105, 0.75); |
|
padding-left: 420px; |
|
padding-top: 12px; |
|
opacity: 0; |
|
transition: all 0.5s; |
|
pointer-events: none; |
|
} |
|
|
|
.nav-open-button { |
|
opacity: 0; |
|
} |
|
|
|
.nav-mask.active { |
|
opacity: 1; |
|
pointer-events: auto; |
|
} |
|
|
|
.nav.active { |
|
position: fixed; |
|
} |
|
} |
|
|
|
@media (min-width: 1024px) { |
|
.switch-container { |
|
display: none; |
|
} |
|
} |
|
|
|
|
|
.switch-result { |
|
display: block !important; |
|
visibility: visible; |
|
} |
|
|
|
@media (max-width: 1024px) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sibling-switch { |
|
display: none; |
|
} |
|
|
|
.hover-button { |
|
display: block; |
|
visibility: visible; |
|
} |
|
} |
|
|
|
@media (max-width: 767px) { |
|
.input-panel-button { |
|
border: 0; |
|
} |
|
|
|
.input-panel-button svg { |
|
width: 16px; |
|
height: 16px; |
|
} |
|
|
|
.input-panel { |
|
} |
|
|
|
.nav-open-button |
|
{ |
|
visibility: hidden; |
|
} |
|
} |
|
|