Anson/Redline-Racing-Website
1
0
Fork 0
mirror of https://gitlab.com/redline-racing-division/redline-racing-website.git synced 2025-07-26 08:01:35 +00:00
Code Releases Activity

init commit

Browse Source
This commit is contained in:
Anson
2019-09-17 00:04:46 -07:00
commit 50d15b917c
72 changed files with 18203 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
assets/sass/layout/_menu.scss Normal file
View File

@@ -0,0 +1,127 @@
///
/// 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;
}
}
}