From 60ffb85bf1f3c5db775144dc0f5ad8cb84e25780 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Sun, 28 Jan 2018 11:56:55 +0100 Subject: [PATCH] adding components refactoring functions --- src/scss/components/_button.scss | 69 ++---------------------------- src/scss/components/_code.scss | 4 +- src/scss/components/_group.scss | 37 ++++++++++++++++ src/scss/components/_heading.scss | 2 +- src/scss/components/_hero.scss | 32 ++++++++++++++ src/scss/components/_icon.scss | 2 +- src/scss/components/_nav.scss | 20 --------- src/scss/components/_panel.scss | 38 +++++++++++++++++ src/scss/components/_table.scss | 2 +- src/scss/functions/_units.scss | 71 ++++++++++++++++++++++++++----- src/scss/helpers/_helpers.scss | 3 +- src/scss/helpers/_media.scss | 29 +------------ src/scss/helpers/_text.scss | 1 + src/scss/helpers/_width.scss | 25 +++++++++++ 14 files changed, 204 insertions(+), 131 deletions(-) create mode 100644 src/scss/components/_group.scss create mode 100644 src/scss/components/_hero.scss delete mode 100644 src/scss/components/_nav.scss create mode 100644 src/scss/components/_panel.scss create mode 100644 src/scss/helpers/_width.scss diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 189c8af..3563572 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -6,11 +6,10 @@ * */ -$crispy__button__padding: pxToEm(10px) pxToEm(25px) !default; -$crispy__button__border: 0 !default; +$crispy__button__padding: toEm(10px 25px) !default; -$crispy__button__up-margin: pxToEm(20px) !default; -$crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default; +$crispy__button__up-margin: toEm(20px) !default; +$crispy__button__up-padding: toEm(8px 13px) !default; @mixin crispy__button() { .button { @@ -22,8 +21,6 @@ $crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default; appearance: none; padding: $crispy__button__padding; - border: $crispy__button__border; - &--wide { width: 100%; } @@ -44,7 +41,6 @@ $crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default; bottom: 0; } - &:hover { cursor: pointer; text-decoration: none; @@ -54,63 +50,4 @@ $crispy__button__up-padding: pxToEm(8px) pxToEm(13px) !default; outline: none; } } - - /** - * grouping buttons - * - * - */ - .button-group { - .button { - float: left; - } - - @include crispy__clearfix(); - } -} - -/** - * adding modifications - * - */ -@mixin crispy__button__colors($colors) { - @each $name, $color in $colors { - - // default has no modification - @if ($name == 'default') { - @include crispy__button__color($color); - } - @else { - &--#{$name} { - @include crispy__button__color($color); - } - } - } -} - -/** - * adding single modification - * - */ -@mixin crispy__button__color($color) { - $background-color: false; - $text-color: false; - - @if (type-of($color) == 'map') { - @if (has-key($color, 'color')) { - $text-color: map-get($color, 'color'); - } - - @if (has-key($color, 'background-color')) { - $background-color: map-get($color, 'background-color'); - } - - color: $text-color; - background-color: $background-color; - - &:hover { - color: $text-color; - background-color: darken($background-color, 10%); - } - } } diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss index e0f849c..3d24f4b 100644 --- a/src/scss/components/_code.scss +++ b/src/scss/components/_code.scss @@ -13,8 +13,8 @@ $crispy__code__font-size: $crispy__body__font-size !default; $crispy__code__font-family: monospace, monospace !default; -$crispy__code__padding: pxToEm(10px) pxToEm(20px) !default; -$crispy__code__margin: 0 0 pxToEm($crispy__margin) !default; +$crispy__code__padding: toEm(10px 20px) !default; +$crispy__code__margin: toEm(0 0 $crispy__margin) !default; $crispy__code__border: 1px solid #d4d4d4 !default; $crispy__code__background-color: #f9f9f9 !default; diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss new file mode 100644 index 0000000..3df21be --- /dev/null +++ b/src/scss/components/_group.scss @@ -0,0 +1,37 @@ +/** + * group + * + * + * + * @author Björn Hase + * + */ + +$crispy__group__character: '/' !default; + +@mixin $crispy__group { + .group { + + &__section { + @include crispy__clearlist(); + } + + &--horizontal { + .group__item { + display: inline-block; + } + } + + &--divider { + .group__item { + &:after { + content: $crispy__group__character; + } + } + } + } +} diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss index 96ff54f..498b87a 100644 --- a/src/scss/components/_heading.scss +++ b/src/scss/components/_heading.scss @@ -21,7 +21,7 @@ $crispy__heading__font-sizes: ( $crispy__heading__font-weight: bold !default; $crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__heading__line-height: $crispy__golden-ratio !default; -$crispy__heading__margin: 0 0 pxToEm(5px) !default; +$crispy__heading__margin: toEm(0 0 5px) !default; @mixin crispy__heading { h1, .h1, diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss new file mode 100644 index 0000000..f2801c6 --- /dev/null +++ b/src/scss/components/_hero.scss @@ -0,0 +1,32 @@ +/** + * hero + * + * background-position is as default: cover + * + *
+ * + * + * @author Björn Hase + * + */ + +@mixin crispy__hero() { + .hero { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + + &--top { + background-position: top center; + } + + &--bottom { + background-position: bottom center; + } + + &--contain { + background-size: contain; + } + } +} diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss index ea5ec65..5f8d844 100644 --- a/src/scss/components/_icon.scss +++ b/src/scss/components/_icon.scss @@ -17,7 +17,7 @@ $crispy__icon__vertical-align: text-bottom !default; $crispy__icon__margin: 0 2px !default; $crispy__icon__sizes: ( - 'default': 18px, + 'default': $cripsy__font-size, 'small': 14px, 'large': 28px ) !default; diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss deleted file mode 100644 index c48c768..0000000 --- a/src/scss/components/_nav.scss +++ /dev/null @@ -1,20 +0,0 @@ -/** - * - * - * - */ - -@mixin $crispy__nav { - .nav { - - &__list { - @include crispy__clearlist(); - } - - &--horizontal { - .nav__item { - display: inline-block; - } - } - } -} diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss new file mode 100644 index 0000000..999681c --- /dev/null +++ b/src/scss/components/_panel.scss @@ -0,0 +1,38 @@ +/** + * panel + * + *
+ * + *
+ * + * @author Björn Hase + * + */ + +$crispy__panel__margin: toEm(20px) !default; + +@mixin crispy__panel { + .panel { + position: absolute; + + &--fixed { + position: fixed; + } + + &--left { + left: 0; + } + + &--top { + top: 0; + } + + &--right { + right: 0; + } + + &--bottom { + bottom: 0; + } + } +} diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 555a322..6c0c0d9 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -20,7 +20,7 @@ * */ -$crispy__table__padding: pxToEm(10px) pxToEm(8px) !default; +$crispy__table__padding: toEm(10px 8px) !default; $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default; $crispy__table__th__border-width: 2px !default; diff --git a/src/scss/functions/_units.scss b/src/scss/functions/_units.scss index 42e50ff..f353465 100644 --- a/src/scss/functions/_units.scss +++ b/src/scss/functions/_units.scss @@ -7,23 +7,72 @@ */ + /** + * to em, wrapper of toRelatives + * + * @param {mixed} $values + * @param {mixed} $base + * @return {rem} + */ +@function toEm($values, $base: $crispy__font-size) { + @return toRelatives($values, 1em, $base); +} + +/** + * to rem, wrapper of toRelatives + * + * @param {mixed} $values + * @param {mixed} $base + * @return {rem} + */ +@function toRem($values, $base: $crispy__font-size) { + @return toRelatives($values, 1rem, $base); +} + +/** + * values to relative + * + * @param {mixed} $values + * @param {mixed} $unit + * @param {mixed} $base + * @return {number} + */ +@function toRelatives($values, $unit, $base: $crispy__font-size) { + @if type-of($values) == 'number' { + $results: toRelative($values, $base: $crispy__font-size); + } else { + $results: (); + + @each $value in $values { + @if $value == 0 { + $results: append($results, $value); + } + @else { + $results: append($results, toRelative($value, $base) * $unit); + } + } + } + + @return $results; +} + /** - * calculate pixel value to em + * to relative * - * @param {px} $fontSize - * @return {em} + * @param {mixed} $value + * @param {mixed} $base + * @return {number} */ -@function pxToEm($font-size) { - @return ($font-size / $crispy__font-size) * 1em; +@function toRelative($value, $base: $crispy__font-size) { + @return stripUnit($value) / $base; } /** - * calculate px value to rem + * strip unit from value * - * @param {px} $fonz-size - * @param {px} $font-size - * @return {em} + * @param {mixed} $value + * @return {number} */ -@function pxToRem($font-size) { - @return ($font-size / $crispy__font-size) * 1rem; +@function stripUnit($value) { + @return $value / ($value * 0 + 1); } diff --git a/src/scss/helpers/_helpers.scss b/src/scss/helpers/_helpers.scss index 8f86e9b..1238f8e 100644 --- a/src/scss/helpers/_helpers.scss +++ b/src/scss/helpers/_helpers.scss @@ -2,4 +2,5 @@ 'align', 'margin', 'media', - 'text'; + 'text', + 'width'; diff --git a/src/scss/helpers/_media.scss b/src/scss/helpers/_media.scss index 157acdb..dc25ef2 100644 --- a/src/scss/helpers/_media.scss +++ b/src/scss/helpers/_media.scss @@ -13,37 +13,10 @@ height: auto; } - .img-fit-contain { - object-fit: contain; - } - - .img-fit-cover { - object-fit: cover; - } - .img-rounded { border-radius: 50%; } - - /** - * - * - */ - .img-hero { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - position: relative; - - &--top { - background-position: top center; - } - - &--bottom { - background-position: bottom center; - } - } - + .video-responsive { display: block; overflow: hidden; diff --git a/src/scss/helpers/_text.scss b/src/scss/helpers/_text.scss index bc97177..4392277 100644 --- a/src/scss/helpers/_text.scss +++ b/src/scss/helpers/_text.scss @@ -11,6 +11,7 @@ */ $crispy__text-colors: $crispy__colors !default; +$crispy__text-font-sizes: $crispy__font-sizes !default; @mixin crispy__text() { @each $name, $font-size in $crispy__font-sizes { diff --git a/src/scss/helpers/_width.scss b/src/scss/helpers/_width.scss new file mode 100644 index 0000000..3b9cded --- /dev/null +++ b/src/scss/helpers/_width.scss @@ -0,0 +1,25 @@ +/** + * helpers for width + * + * + * @author Björn Hase + * + */ + +@mixin crispy__width() { + .width-25 { + width: 25%; + } + + .width-50 { + width: 50%; + } + + .width-75 { + width: 75%; + } + + .width-100 { + width: 100%; + } +}