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

SCSS Framework

Browse Source 
Added mail-button
Added arrow-button
Added search-button
This commit is contained in:
Simon Gehrig
2017-05-04 17:15:27 +02:00
parent 7df2406a6e
commit 16f1da1357
5 changed files with 244 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mixins/_00-mixins.scss
+2
View File
@@ -9,6 +9,8 @@
@import "layout/menus/_00-menus";
@import "layout/buttons/search";
@import "layout/buttons/mail";
@import "layout/buttons/arrow";
// Queries
@import "queries/media-queries";
mixins/layout/buttons/_arrow.scss
+50
View File
@@ -0,0 +1,50 @@
@mixin arrow-button(
$size,
$color-lines,
$color-bg
) {
$size-line: $size/15;
position: relative;
box-sizing: border-box;
width: $size;
height: $size;
border: solid $size-line $color-lines;
border-radius: $size;
background-color: $color-bg;
&:before {
//content: '';
//display: block;
//
//position: absolute;
//top:($size/3) - ($size-line*2);
//left:($size/4) - ($size-line*2);
//
////box-sizing: border-box;
//width: $size/2;
//height: $size/3;
//
//border:solid $size-line $color-lines;
}
&:after {
content: '';
display: block;
position: absolute;
top: $size/3;
left:$size*0.2643;
box-sizing: border-box;
width: $size/3;
height: $size/3;
border-top:solid $size-line $color-lines;
border-left:solid $size-line $color-lines;
transform: rotate(45deg);
}
}
mixins/layout/buttons/_mail.scss
+50
View File
@@ -0,0 +1,50 @@
@mixin mail-button(
$size,
$color-lines,
$color-bg
) {
$size-line: $size/15;
position: relative;
box-sizing: border-box;
width: $size;
height: $size;
border: solid $size-line $color-lines;
border-radius: $size;
background-color: $color-bg;
&:before {
content: '';
display: block;
position: absolute;
top:($size/3) - ($size-line*2);
left:($size/4) - ($size-line*2);
//box-sizing: border-box;
width: $size/2;
height: $size/3;
border:solid $size-line $color-lines;
}
&:after {
content: '';
display: block;
position: absolute;
top: $size*0.0976;
left:$size*0.2643;
box-sizing: border-box;
width: $size/3;
height: $size/3;
border-bottom:solid $size-line $color-lines;
border-right:solid $size-line $color-lines;
transform: rotate(45deg);
}
}