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
.idea/deployment.xml
Generated
+2 -9
View File
@@ -2,21 +2,14 @@
<project version="4">
<component name="PublishConfigData">
<serverData>
<paths name="SELFOMAT Server">
<paths name="lisanahartl.de">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
<paths name="selfom.at (production)">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
</mappings>
</serverdata>
</paths>
<paths name="selfom.at (website)">
<paths name="simongehrig.support">
<serverdata>
<mappings>
<mapping local="$PROJECT_DIR$" web="/" />
.idea/scopes/Unnamed.xml
Generated
+3
View File
@@ -0,0 +1,3 @@
<component name="DependencyValidationManager">
<scope name="Unnamed" pattern="file[00 SCSS Framework]:*/" />
</component>
.idea/watcherTasks.xml
Generated
+1 -1
View File
@@ -16,7 +16,7 @@
<option name="outputFromStdout" value="false" />
<option name="program" value="C:/Ruby23-x64/bin/scss.bat" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="false" />
<option name="trackOnlyRoot" value="true" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
_framework.scss
+4 -11
View File
@@ -1,15 +1,8 @@
/* Simons SCSS Framework */
/* Basic CSS Functions */
@import "mixins/css/reset";
@import "mixins/css/filters";
// Basic CSS Functions
@import "mixins/css/css";
/* Layout */
@import "mixins/layout/layout";
/* Queries */
@import "mixins/queries/media-queries";
/* FX / Effects */
@import "mixins/fx/camera";
// Mixins
@import "mixins/mixins";
examples/fx/camera/camera.html
+4 -4
View File
@@ -11,29 +11,29 @@
<div class="wrap focus">
<div class="inner">
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/1"></div>
<p class="head">Off-Focus</p>
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
</div>
</div>
<div class="wrap zoom">
<div class="inner">
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/2"></div>
<p class="head">Zoom</p>
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
</div>
</div>
<div class="wrap shake">
<div class="inner">
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/3"></div>
<p class="head">Shake</p>
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
</div>
</div>
<div class="wrap all">
<div class="inner">
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/4"></div>
<p class="head">None</p>
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
</div>
</div>
examples/fx/camera/camera.scss
+6 -2
View File
@@ -5,11 +5,16 @@
background-color: #6ac88e;
border-bottom: solid 40px #c86350;
@include absolute-span(0, 0, 0, 0);
.wrap {
/*BASIC LAYOUT*/
@include cols(4, 20);
.inner {
background-color: #ffffff;
padding: 20px 20px 40px 20px !important;
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
.head {
font-family: sans-serif;
@@ -24,7 +29,6 @@
position: relative;
box-sizing: border-box;
overflow: hidden;
border: solid thick #c86350;
img {
width: 100%; // make sure thins dont get wider than the parent cols element
@@ -68,7 +72,7 @@
&.all {
/*ALL EFFECTS*/
.head {
@include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
@include camera-focus($FOCUS-OUT, 0.4, 10, $EASE);
}
img {
examples/layout/menus/horizontal/horizontal.html
+180
View File
@@ -0,0 +1,180 @@
<head>
<link rel="stylesheet" type="text/css" href="horizontal.css">
</head>
<body>
<div class="header">
<input id="navcheck" type="checkbox" name="menu">
<label class="navbar" for="navcheck">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<ul class="nav">
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="content"></div>
</body>
examples/layout/menus/horizontal/horizontal.scss
+21
View File
@@ -0,0 +1,21 @@
@import "../../../../_framework";
body {
background-color: #d9ffd9;
font-family: Calibri, sans-serif;
.header {
//transform: rotate(-1deg);
#navcheck {
@include toggle-tablet(100px, #ffd9d9, #806c80) {
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
}
}
.nav {
font-weight: 700;
letter-spacing: 1px;
font-size: 20px;
@include menu-horizontal-desktop(20px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
}
}
}
examples/layout/menus/vertical/vertical.html
+180
View File
@@ -0,0 +1,180 @@
<head>
<link rel="stylesheet" type="text/css" href="vertical.css">
</head>
<body>
<div class="header">
<input id="navcheck" type="checkbox" name="menu">
<label class="navbar" for="navcheck">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<ul class="nav">
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="content"></div>
</body>
examples/layout/menus/vertical/vertical.scss
+26
View File
@@ -0,0 +1,26 @@
@import "../../../../framework";
body {
background-color: #d9ffd9;
font-family: Calibri, sans-serif;
.header {
//transform: rotate(-1deg);
#navcheck {
@include toggle-tablet(100px, #ffd9d9, #806c80) {
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
}
}
.nav {
font-weight: 700;
letter-spacing: 1px;
font-size: 20px;
@include menu-vertical-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
position: fixed;
top: 0;
bottom: 0;
}
}
}
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 {