148 lines
2.6 KiB
SCSS
148 lines
2.6 KiB
SCSS
@mixin menu-fullscreen-phone(
|
|
$toggle-size:100px,
|
|
$padding:20px,
|
|
$bg-color:#cccccc,
|
|
$bg-color-hover:#999999,
|
|
$font-color:#666666,
|
|
$font-color-hover:#ffffff
|
|
) {
|
|
|
|
@include absolute-span();
|
|
|
|
padding-top: $toggle-size;
|
|
list-style: none;
|
|
display: block;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
background-color: $bg-color;
|
|
|
|
// First
|
|
li {
|
|
position: relative;
|
|
display: block;
|
|
background-color: $bg-color;
|
|
color: $font-color;
|
|
width: 100%;
|
|
text-transform: uppercase;
|
|
//border-left: solid $padding $font-color;
|
|
|
|
a {
|
|
display: block;
|
|
padding: $padding;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
color: $font-color;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Second
|
|
ul {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
// Second
|
|
li {
|
|
color: $font-color;
|
|
text-transform: none;
|
|
a {
|
|
padding-left: 2*$padding;
|
|
color: $font-color;
|
|
}
|
|
|
|
// Third
|
|
ul {
|
|
position: relative;
|
|
display: block;
|
|
left: auto;
|
|
top: auto;
|
|
|
|
// Third
|
|
li {
|
|
position: relative;
|
|
color: $font-color;
|
|
font-weight: 300;
|
|
|
|
a {
|
|
padding-left: 3*$padding;
|
|
color: $font-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// First
|
|
&:hover {
|
|
background-color: $bg-color-hover;
|
|
color: $font-color-hover;
|
|
//border-left: solid $padding $font-color-hover;
|
|
|
|
a {
|
|
color: $font-color-hover;
|
|
}
|
|
|
|
// Second
|
|
ul {
|
|
display: block;
|
|
|
|
// Second
|
|
li {
|
|
display: block;
|
|
color: $font-color;
|
|
|
|
a {
|
|
color: $font-color;
|
|
}
|
|
// Third
|
|
ul {
|
|
display: block;
|
|
|
|
// Third
|
|
li {
|
|
|
|
}
|
|
}
|
|
|
|
// Second
|
|
&:hover {
|
|
color: $font-color-hover;
|
|
|
|
a {
|
|
color: $font-color-hover;
|
|
}
|
|
|
|
// Third
|
|
ul {
|
|
display: block;
|
|
|
|
// Third
|
|
li {
|
|
color: $font-color;
|
|
|
|
a {
|
|
color: $font-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: $font-color-hover;
|
|
|
|
a {
|
|
color: $font-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:last-of-type {
|
|
ul li ul {
|
|
right: auto;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
} |