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
examples/layout/buttons/buttons.html
+38
View File
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="buttons.css">
<meta charset="UTF-8">
<title>Buttons</title>
</head>
<body>
<div class="mail">
<div class="mail-15"></div>
<div class="mail-30"></div>
<div class="mail-60"></div>
<div class="mail-120"></div>
</div>
<div class="search">
<div class="search-15"></div>
<div class="search-30"></div>
<div class="search-60"></div>
<div class="search-120"></div>
</div>
<div class="arrow">
<div class="arrow-15"></div>
<div class="arrow-30"></div>
<div class="arrow-60"></div>
<div class="arrow-120"></div>
</div>
</body>
</html>
examples/layout/buttons/buttons.scss
+104
View File
@@ -0,0 +1,104 @@
@import "../../../framework";
body {
background-color: #8faf91;
}
$color-ln: #bab7ff;
$color-bgr: #1d9d73;
.mail {
.mail-15 {
@include mail-button(
15px,
$color-ln,
$color-bgr
)
}
.mail-30 {
@include mail-button(
30px,
$color-ln,
$color-bgr
)
}
.mail-60 {
@include mail-button(
60px,
$color-ln,
$color-bgr
)
}
.mail-120 {
@include mail-button(
120px,
$color-ln,
$color-bgr
)
}
}
.search {
.search-15 {
@include search-symbol-button(
15px,
$color-ln,
$color-bgr
)
}
.search-30 {
@include search-symbol-button(
30px,
$color-ln,
$color-bgr
)
}
.search-60 {
@include search-symbol-button(
60px,
$color-ln,
$color-bgr
)
}
.search-120 {
@include search-symbol-button(
120px,
$color-ln,
$color-bgr
)
}
}
.arrow {
.arrow-15 {
@include arrow-button(
15px,
$color-ln,
$color-bgr
)
}
.arrow-30 {
@include arrow-button(
30px,
$color-ln,
$color-bgr
)
}
.arrow-60 {
@include arrow-button(
60px,
$color-ln,
$color-bgr
)
}
.arrow-120 {
@include arrow-button(
120px,
$color-ln,
$color-bgr
)
}
}
mixins/_00-mixins.scss
+2
View File
@@ -9,6 +9,8 @@
@import "layout/menus/_00-menus"; @import "layout/menus/_00-menus";
@import "layout/buttons/search"; @import "layout/buttons/search";
@import "layout/buttons/mail";
@import "layout/buttons/arrow";
// Queries // Queries
@import "queries/media-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);
}
}