simongehrig.de/SCSS-Framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Menu Mixins:

Browse Source 
Desktop vertical
Desktop vertical
Tablet/Phone Fullscreen
Toggle Button
This commit is contained in:
Simon Gehrig
2017-02-22 01:21:17 +01:00
parent 6d9ce3dacc
commit 5cafe3670b
24 changed files with 946 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mixins/layout/_layout.scss
+3 -3
View File
@@ -1,6 +1,4 @@
@mixin cols($columns, $gutter) {
/* Wrapper inside Element needed
because of gutter >* */
/* Positioning */
position: relative;
@@ -24,7 +22,9 @@
}
> * {
width: 100%;
/* Wrapper inside Element needed
because of gutter >* */
max-width: 100%;
box-sizing: border-box;
}
}
mixins/layout/_position.scss
+8
View File
@@ -0,0 +1,8 @@
@mixin absolute-span($top:0,$right:0,$bottom:0,$left:0) {
/* Absolute Positioning */
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
mixins/layout/menus/_00-menus.scss
+4
View File
@@ -0,0 +1,4 @@
@import "fullscreen-phone";
@import "horizontal-desktop";
@import "vertical-desktop";
@import "toggle";
mixins/layout/menus/_fullscreen-phone.scss
+148
View File
@@ -0,0 +1,148 @@
@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;
}
}
}
}
mixins/layout/menus/_horizontal-desktop.scss
+136
View File
@@ -0,0 +1,136 @@
@mixin menu-horizontal-desktop(
$padding:15px,
$bg-color:#cccccc,
$bg-color-hover:#999999,
$font-color:#666666,
$font-color-hover:#ffffff
) {
position: relative;
list-style: none;
display: table;
table-layout: fixed;
width: 100%;
background-color: $bg-color;
// First
li {
position: relative;
display: table-cell;
background-color: $bg-color;
color: $font-color;
width: 100%;
a {
display: block;
padding: $padding;
width: 100%;
text-decoration: none;
color: $font-color;
box-sizing: border-box;
}
// Second
ul {
display: none;
position: absolute;
width: 100%;
// Second
li {
color: $font-color;
a {
color: $font-color;
}
// Third
ul {
position: absolute;
display: none;
left: 100%;
top: 0;
// Third
li {
position: relative;
color: $font-color;
a {
color: $font-color;
}
}
}
}
}
// First
&:hover {
background-color: $bg-color-hover;
color: $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: none;
// 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: 100%;
left: auto;
}
}
}
}
mixins/layout/menus/_toggle.scss
+54
View File
@@ -0,0 +1,54 @@
@mixin toggle-tablet(
//$navclass:nav,
$size:100px,
$background-color:#cccccc,
$bar-color:#999999
) {
display: none;
+ .navbar {
display: none;
}
@include tablet($DOWNWARDS-OPEN) {
// Tablet Mode
+ .navbar {
position: fixed;
z-index: 10000;
display: block;
padding: $size/7;
background-color: $background-color;
box-sizing: border-box;
span {
display: block;
margin-bottom: $size/7;
width: ($size/7)*5;
height: $size/7;
background-color: $bar-color;
box-sizing: border-box;
&:last-of-type {
margin-bottom: 0;
}
}
// Navigation List
// TODO Add Selector Support
+ ul {
display: none;
}
}
// Enabled Menu
&:checked {
+ .navbar {
+ ul {
@content
}
}
}
}
}
mixins/layout/menus/_vertical-desktop.scss
+133
View File
@@ -0,0 +1,133 @@
@mixin menu-vertical-desktop(
$padding:15px,
$width:200px,
$bg-color:#cccccc,
$bg-color-hover:#999999,
$font-color:#666666,
$font-color-hover:#ffffff
) {
// First
position: relative;
list-style: none;
display: block;
width: $width;
background-color: $bg-color;
// First
li {
position: relative;
display: block;
background-color: $bg-color;
color: $font-color;
width: auto;
a {
display: block;
padding: $padding;
width: 100%;
text-decoration: none;
color: $font-color;
box-sizing: border-box;
}
// Second
ul {
display: none;
position: absolute;
width: 100%;
left: 100%;
top: 0;
// Second
li {
color: $font-color;
a {
color: $font-color;
}
// Third
ul {
position: absolute;
display: none;
left: 100%;
top: 0;
// Third
li {
position: relative;
color: $font-color;
a {
color: $font-color;
}
}
}
}
}
// First
&:hover {
background-color: $bg-color-hover;
color: $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: none;
// 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;
}
}
}
}
}
}
}
}
}
}