From 16f1da1357402a1a7954c62899a7e2cb74ff2489 Mon Sep 17 00:00:00 2001 From: simongehrig Date: Thu, 4 May 2017 17:15:27 +0200 Subject: [PATCH] SCSS Framework Added mail-button Added arrow-button Added search-button --- examples/layout/buttons/buttons.html | 38 ++++++++++ examples/layout/buttons/buttons.scss | 104 +++++++++++++++++++++++++++ mixins/_00-mixins.scss | 2 + mixins/layout/buttons/_arrow.scss | 50 +++++++++++++ mixins/layout/buttons/_mail.scss | 50 +++++++++++++ 5 files changed, 244 insertions(+) create mode 100644 examples/layout/buttons/buttons.html create mode 100644 examples/layout/buttons/buttons.scss create mode 100644 mixins/layout/buttons/_arrow.scss create mode 100644 mixins/layout/buttons/_mail.scss diff --git a/examples/layout/buttons/buttons.html b/examples/layout/buttons/buttons.html new file mode 100644 index 0000000..717112b --- /dev/null +++ b/examples/layout/buttons/buttons.html @@ -0,0 +1,38 @@ + + + + + + Buttons + + + +
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/examples/layout/buttons/buttons.scss b/examples/layout/buttons/buttons.scss new file mode 100644 index 0000000..7097683 --- /dev/null +++ b/examples/layout/buttons/buttons.scss @@ -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 + ) + } +} \ No newline at end of file diff --git a/mixins/_00-mixins.scss b/mixins/_00-mixins.scss index ac823f6..6f12335 100644 --- a/mixins/_00-mixins.scss +++ b/mixins/_00-mixins.scss @@ -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"; diff --git a/mixins/layout/buttons/_arrow.scss b/mixins/layout/buttons/_arrow.scss new file mode 100644 index 0000000..c31b382 --- /dev/null +++ b/mixins/layout/buttons/_arrow.scss @@ -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); + } +} \ No newline at end of file diff --git a/mixins/layout/buttons/_mail.scss b/mixins/layout/buttons/_mail.scss new file mode 100644 index 0000000..b72fe8a --- /dev/null +++ b/mixins/layout/buttons/_mail.scss @@ -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); + } +} \ No newline at end of file