You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.7 KiB
127 lines
2.7 KiB
/// |
|
/// Solid State by HTML5 UP |
|
/// html5up.net | @ajlkn |
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
|
/// |
|
|
|
/* Menu */ |
|
|
|
#page-wrapper { |
|
@include vendor('transition', 'filter 0.25s ease'); |
|
} |
|
|
|
#menu { |
|
@include vendor('align-items', 'center'); |
|
@include vendor('display', 'flex'); |
|
@include vendor('justify-content', 'center'); |
|
@include vendor('pointer-events', 'none'); |
|
@include vendor('transition', ('opacity #{_duration(menu)} ease', 'visibility #{_duration(menu)}')); |
|
-moz-user-select: none; |
|
-webkit-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
-webkit-tap-highlight-color: rgba(0,0,0,0); |
|
background: transparentize(_palette(bg), 0.2); |
|
cursor: default; |
|
height: 100%; |
|
left: 0; |
|
opacity: 0; |
|
position: fixed; |
|
text-align: center; |
|
top: 0; |
|
visibility: hidden; |
|
width: 100%; |
|
|
|
.inner { |
|
@include padding(2.5em, 1.5em); |
|
@include vendor('transform', 'translateY(0.5em)'); |
|
@include vendor('transition', ('opacity #{_duration(menu)} ease','transform #{_duration(menu)} ease')); |
|
-webkit-overflow-scrolling: touch; |
|
background: _palette(accent); |
|
border-radius: _size(border-radius); |
|
display: block; |
|
max-width: 100%; |
|
opacity: 0; |
|
position: relative; |
|
width: 18em; |
|
} |
|
|
|
h2 { |
|
border-bottom: solid 2px _palette(border); |
|
padding-bottom: 1em; |
|
} |
|
|
|
.close { |
|
background-image: url('images/close.svg'); |
|
background-position: 75% 25%; |
|
background-repeat: no-repeat; |
|
background-size: 2em 2em; |
|
border: 0; |
|
content: ''; |
|
display: block; |
|
height: 4em; |
|
overflow: hidden; |
|
position: absolute; |
|
right: 0; |
|
text-align: center; |
|
text-indent: 4em; |
|
top: 0; |
|
width: 4em; |
|
} |
|
|
|
.links { |
|
list-style: none; |
|
margin-bottom: (_size(element-margin) - 0.5em); |
|
padding: 0; |
|
|
|
li { |
|
padding: 0; |
|
|
|
a { |
|
border-radius: _size(border-radius); |
|
border: 0; |
|
display: block; |
|
font-family: _font(family-heading); |
|
font-size: 0.8em; |
|
font-weight: _font(weight-heading); |
|
letter-spacing: _font(kern-heading); |
|
line-height: 1.85em; |
|
padding: 0.75em 0; |
|
text-transform: uppercase; |
|
|
|
&:hover { |
|
background: saturate(darken(_palette(accent), 3), 1.5); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=small') { |
|
.inner { |
|
max-height: 100%; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
|
|
.close { |
|
background-size: 1.5em 1.5em; |
|
} |
|
} |
|
} |
|
} |
|
|
|
body.is-menu-visible { |
|
#page-wrapper { |
|
@include vendor('filter', 'blur(1.5px)'); |
|
} |
|
|
|
#menu { |
|
@include vendor('pointer-events', 'auto'); |
|
opacity: 1; |
|
visibility: visible; |
|
|
|
.inner { |
|
@include vendor('transform', 'translateY(0)'); |
|
opacity: 1; |
|
} |
|
} |
|
} |