From f64548574ac718e45baeba238d6e418ae669fcdc Mon Sep 17 00:00:00 2001 From: nirgendswo Date: Thu, 17 Aug 2017 19:33:28 +0200 Subject: [PATCH] adding icon sizes change dir --- package.json | 2 +- scss/components/_icon.scss | 28 ------ {scss => src}/_mixins.scss | 19 ++++ {scss => src}/components/_align.scss | 0 {scss => src}/components/_animation.scss | 0 {scss => src}/components/_body.scss | 0 {scss => src}/components/_button.scss | 0 {scss => src}/components/_heading.scss | 0 src/components/_icon.scss | 102 +++++++++++++++++++++ {scss => src}/components/_list.scss | 0 {scss => src}/components/_margin.scss | 0 {scss => src}/components/_normalize.scss | 0 {scss => src}/components/_text-colors.scss | 0 {scss => src}/crispyBoilerplate.scss | 0 {scss => src}/example.scss | 0 {scss => src}/functions/_units.scss | 0 {scss => src}/functions/_zIndex.scss | 0 17 files changed, 122 insertions(+), 29 deletions(-) delete mode 100644 scss/components/_icon.scss rename {scss => src}/_mixins.scss (61%) rename {scss => src}/components/_align.scss (100%) rename {scss => src}/components/_animation.scss (100%) rename {scss => src}/components/_body.scss (100%) rename {scss => src}/components/_button.scss (100%) rename {scss => src}/components/_heading.scss (100%) create mode 100644 src/components/_icon.scss rename {scss => src}/components/_list.scss (100%) rename {scss => src}/components/_margin.scss (100%) rename {scss => src}/components/_normalize.scss (100%) rename {scss => src}/components/_text-colors.scss (100%) rename {scss => src}/crispyBoilerplate.scss (100%) rename {scss => src}/example.scss (100%) rename {scss => src}/functions/_units.scss (100%) rename {scss => src}/functions/_zIndex.scss (100%) diff --git a/package.json b/package.json index b6f7a52..adbc308 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "crispy-boilerplate", - "version": "0.6.0", + "version": "0.7.0", "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", "repository": { "type": "git", diff --git a/scss/components/_icon.scss b/scss/components/_icon.scss deleted file mode 100644 index eb10fd6..0000000 --- a/scss/components/_icon.scss +++ /dev/null @@ -1,28 +0,0 @@ -/** - * icon - * - * use svg as icon - * - * - * - * - * - * - * @author Björn Hase - * - */ - - -$icon__vertical-align: middle !default; -$icon__margin: 0 2px !default; - -@mixin crispy-boilerplate-icon() { - .icon { - display: inline-block; - position: relative; - vertical-align: $icon__vertical-align; - margin: $icon__margin; - - @content; - } -} diff --git a/scss/_mixins.scss b/src/_mixins.scss similarity index 61% rename from scss/_mixins.scss rename to src/_mixins.scss index 30ecab2..48cf659 100644 --- a/scss/_mixins.scss +++ b/src/_mixins.scss @@ -11,6 +11,25 @@ font-size: pxToRem($font-size); } +/** + * add modificators for font-size from a map + * + * + * @param {map} $font-sizes + * + */ +@mixin font-sizes($font-sizes) { + @each $name, $font-size in $font-sizes { + @if ($name == 'default') { + @include font-size($font-size); + } @else { + &--#{$name} { + @include font-size($font-size); + } + } + } +} + /** * clearfix to end floating * diff --git a/scss/components/_align.scss b/src/components/_align.scss similarity index 100% rename from scss/components/_align.scss rename to src/components/_align.scss diff --git a/scss/components/_animation.scss b/src/components/_animation.scss similarity index 100% rename from scss/components/_animation.scss rename to src/components/_animation.scss diff --git a/scss/components/_body.scss b/src/components/_body.scss similarity index 100% rename from scss/components/_body.scss rename to src/components/_body.scss diff --git a/scss/components/_button.scss b/src/components/_button.scss similarity index 100% rename from scss/components/_button.scss rename to src/components/_button.scss diff --git a/scss/components/_heading.scss b/src/components/_heading.scss similarity index 100% rename from scss/components/_heading.scss rename to src/components/_heading.scss diff --git a/src/components/_icon.scss b/src/components/_icon.scss new file mode 100644 index 0000000..428ab7c --- /dev/null +++ b/src/components/_icon.scss @@ -0,0 +1,102 @@ +/** + * icon + * + * use svg as icon + * + * + * + * + * + * + * @author Björn Hase + * + */ + + +$icon__vertical-align: middle !default; +$icon__margin: 0 2px !default; + +// width & height +$icon__sizes: ( + 'default': 18px, + 'small': 14px, + 'large': 28px +) !default; + +// colors +$icon__colors: ( + 'default' : black, + 'secondary' : grey, +) !default; + +@mixin crispy-boilerplate-icon() { + .icon { + display: inline-block; + position: relative; + vertical-align: $icon__vertical-align; + margin: $icon__margin; + + @content; + } +} + +/** + * add modificators for icons as fill from map + * + * + * @param {map} $colors + * + */ +@mixin crispy-boilerplate-icon-colors($colors) { + @each $name, $color in $colors { + @if ($name == 'default') { + @include crispy-boilerplate-icon-color($color); + } @else { + &--#{$name} { + @include crispy-boilerplate-icon-color($color); + } + } + } +} + +/** + * add color as fill + * + * + * @param {color} $color + * + */ +@mixin crispy-boilerplate-icon-color($color) { + fill: $color; +} + +/** + * adding sizes for icons from map + * + * + * @param {map} $sizes + * + */ +@mixin crispy-boilerplate-icon-sizes($sizes) { + @each $name, $size in $sizes { + @if ($name == 'default') { + @include crispy-boilerplate-icon-size($size); + } @else { + &--#{$name} { + @include crispy-boilerplate-icon-size($size); + } + } + } +} + +/** + * add size for icon as width and height + * + * + * @param {px} $size + * + */ +@mixin crispy-boilerplate-icon-size($size) { + width: $size; + height: $size; +} diff --git a/scss/components/_list.scss b/src/components/_list.scss similarity index 100% rename from scss/components/_list.scss rename to src/components/_list.scss diff --git a/scss/components/_margin.scss b/src/components/_margin.scss similarity index 100% rename from scss/components/_margin.scss rename to src/components/_margin.scss diff --git a/scss/components/_normalize.scss b/src/components/_normalize.scss similarity index 100% rename from scss/components/_normalize.scss rename to src/components/_normalize.scss diff --git a/scss/components/_text-colors.scss b/src/components/_text-colors.scss similarity index 100% rename from scss/components/_text-colors.scss rename to src/components/_text-colors.scss diff --git a/scss/crispyBoilerplate.scss b/src/crispyBoilerplate.scss similarity index 100% rename from scss/crispyBoilerplate.scss rename to src/crispyBoilerplate.scss diff --git a/scss/example.scss b/src/example.scss similarity index 100% rename from scss/example.scss rename to src/example.scss diff --git a/scss/functions/_units.scss b/src/functions/_units.scss similarity index 100% rename from scss/functions/_units.scss rename to src/functions/_units.scss diff --git a/scss/functions/_zIndex.scss b/src/functions/_zIndex.scss similarity index 100% rename from scss/functions/_zIndex.scss rename to src/functions/_zIndex.scss