simongehrig.de/scss-grid
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/_mixins.scss
+10
View File
@@ -0,0 +1,10 @@
// Layout
@import "layout/layout";
@import "layout/position";
@import "layout/menus/_00-menus";
// Queries
@import "queries/media-queries";
// FX / Effects
@import "fx/camera";
mixins/css/_css.scss
+10
View File
@@ -0,0 +1,10 @@
// CSS Properties
// Reset
@import "reset";
// Layout
// FX
@import "fx/transform";
@import "fx/filters";
mixins/css/_filters.scss
-3
View File
@@ -1,3 +0,0 @@
@mixin blur($pixel){
filter: blur($pixel);
}
mixins/css/fx/_filters.scss
View File
mixins/css/fx/_transform.scss
View File
mixins/fx/_camera.scss
+2 -2
View File
@@ -1,4 +1,4 @@
/* CONSTANTS */
// CONSTANTS
$ZOOM-IN: 0;
$ZOOM-OUT: 1;
@@ -11,7 +11,7 @@ $EASE: 1;
$EASEINOUT: 2;
$BACKWARD: 3;
/* MIXINS */
// MIXINS
/// Gives the Element a focusing Effect
/// @param {int} $direction
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;
}
}
}
}
}
}
}
}
}
}
mixins/queries/_media-queries.scss
+10 -18
View File
@@ -1,55 +1,50 @@
/*
// CONSTANTS
CONSTANTS
*/
// Directions
$UPWARDS-OPEN: 2;
$DOWNWARDS-OPEN: 1;
$LIMITED: 0;
/*
Widths
*/
// Widths
$phone-width: 480px;
$tablet-width: 768px;
$notebook-width: 980px;
$desktop-width: 1280px;
/*
Queries
*/
// Queries
@mixin small-phone($direction:0) {
/* small phone */
@include querybuilder(0, $phone-width, $direction) {
@content
}
}
@mixin phone($direction:0) {
/* phone */
@include querybuilder($phone-width, $tablet-width, $direction) {
@content
}
}
@mixin tablet($direction:0) {
/* tablet */
@include querybuilder($tablet-width, $notebook-width, $direction) {
@content
}
}
@mixin notebook($direction:0) {
/* notebook */
@include querybuilder($notebook-width, $desktop-width, $direction) {
@content
}
}
@mixin desktop($direction:0) {
/* desktop */
@include querybuilder($desktop-width, 99999, $direction) {
@content
}
@@ -61,11 +56,8 @@ Queries
}
}
/*
QUERY-BUILDER
*/
//QUERY-BUILDER
@mixin querybuilder($low-px, $high-px, $direction) {
@if $direction == $LIMITED {