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-03-29 12:14:21 +02:00
parent 5cafe3670b
commit 9cd926a1e5
25 changed files with 2269 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mixins/_mixins.scss
+1
View File
@@ -1,6 +1,7 @@
// Layout
@import "layout/layout";
@import "layout/position";
@import "layout/image/cover";
@import "layout/menus/_00-menus";
// Queries
mixins/layout/image/_cover.scss
+18
View File
@@ -0,0 +1,18 @@
@mixin image-cover($heightaspect) {
position: relative;
display: inline-block;
overflow: hidden;
img {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
&:after {
content: "";
display: block;
padding-bottom: 100% * $heightaspect;
}
}
mixins/layout/menus/_00-menus.scss
+7
View File
@@ -1,4 +1,11 @@
@import "fullscreen-phone";
@import "horizontal-desktop";
@import "vertical-desktop";
@import "vertical-open";
@import "vertical-right-desktop";
@import "vertical-right-open";
@import "toggle";
mixins/layout/menus/_vertical-open.scss
+133
View File
@@ -0,0 +1,133 @@
@mixin menu-vertical-open(
$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/layout/menus/_vertical-right-desktop.scss
+134
View File
@@ -0,0 +1,134 @@
@mixin menu-vertical-right-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;
text-align: right;
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%;
right: 100%;
top: 0;
// Second
li {
color: $font-color;
a {
color: $font-color;
}
// Third
ul {
position: absolute;
display: none;
right: 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/layout/menus/_vertical-right-open.scss
+131
View File
@@ -0,0 +1,131 @@
@mixin menu-vertical-right-open(
$padding:15px,
$width:200px,
$bg-color:#cccccc,
$bg-color-hover:#999999,
$font-color:#666666,
$font-color-hover:#ffffff
) {
// First
position: relative;
list-style: none;
text-align: right;
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 {
width: 100%;
padding-right: $padding;
// Second
li {
color: $font-color;
a {
color: $font-color;
}
// Third
ul {
//position: absolute;
//display: none;
//right: 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;
}
}
}
}
}
}
}
}
}
}