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
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
+7 -3
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,10 +29,9 @@
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
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 {