From 7f00d7aaad19cbb6e9976e4f012525c8a72d460b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Mon, 14 Oct 2019 22:23:19 +0200 Subject: [PATCH] adding --- src/scss/components/_button.scss | 20 ------- src/scss/helpers/_float.scss | 10 ++-- src/scss/helpers/_modifizer.scss | 34 ++++++++++++ src/scss/helpers/_spacing.scss | 32 +++++------ src/scss/helpers/_text.scss | 76 -------------------------- src/scss/helpers/_typography.scss | 89 +++++++++++++++++++++++++++++++ src/scss/helpers/_visibility.scss | 21 -------- src/scss/helpers/_width.scss | 8 +-- 8 files changed, 148 insertions(+), 142 deletions(-) create mode 100644 src/scss/helpers/_modifizer.scss delete mode 100644 src/scss/helpers/_text.scss create mode 100644 src/scss/helpers/_typography.scss delete mode 100644 src/scss/helpers/_visibility.scss diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 49f236b..f6dd00c 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -8,10 +8,6 @@ $crispy__button__padding: toEm(10px 25px) !default; -$crispy__button__up__margin: toEm(20px) !default; -$crispy__button__up__padding: toEm(8px 13px) !default; -$crispy__button__up__z-index: zIndex('modal') !default; - @mixin crispy__button() { .button { position: relative; @@ -26,22 +22,6 @@ $crispy__button__up__z-index: zIndex('modal') !default; width: 100%; } - // button for scroll up and down - &--up, &--down { - position:fixed; - z-index: $crispy__button__up__z-index; - margin: $crispy__button__up__margin; - padding: $crispy__button__up__padding; - } - - &--down { - top: 0; - } - - &--up { - bottom: 0; - } - &:hover { cursor: pointer; text-decoration: none; diff --git a/src/scss/helpers/_float.scss b/src/scss/helpers/_float.scss index 0524402..73ef2cc 100644 --- a/src/scss/helpers/_float.scss +++ b/src/scss/helpers/_float.scss @@ -10,24 +10,24 @@ */ @mixin crispy__float() { - .float-left { + .is-float-left { float: left; } - .float-right { + .is-float-right { float: right; } - .float-none { + .has-float-none { float: none; } - .center { + .is-centered { margin-left: auto; margin-right: auto; } - .clearfix { + .is-clearfixed { @include crispy__clearfix(); } } diff --git a/src/scss/helpers/_modifizer.scss b/src/scss/helpers/_modifizer.scss new file mode 100644 index 0000000..fc8905a --- /dev/null +++ b/src/scss/helpers/_modifizer.scss @@ -0,0 +1,34 @@ +/** + * helper: visibility + * + * + * @author Björn Hase + * + */ + +@mixin crispy__modifiers() { + + .is-absolute { + position: absolute !important; + } + + .is-fixed { + position: fixed !important; + } + + .is-relative { + position: relative !important; + } + + .is-hidden { + display: none !important; + } + + .is-visible { + display: block !important; + + &--inline { + display: inline; + } + } +} diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index aa13573..8d1f4ff 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -8,36 +8,36 @@ @mixin crispy__spacing() { @for $i from 0 through $crispy__spacing__steps { - .margin-top-#{($i + 1)}x { - margin-top: ($crispy__spacing * $i); + .has-margin-top-#{($i + 1)}x { + margin-top: ($crispy__spacing * $i) !important; } - .margin-left-#{($i + 1)}x { - margin-left: ($crispy__spacing * $i); + .has-margin-left-#{($i + 1)}x { + margin-left: ($crispy__spacing * $i) !important; } - .margin-bottom-#{($i + 1)}x { - margin-bottom: ($crispy__spacing * $i); + .has-margin-bottom-#{($i + 1)}x { + margin-bottom: ($crispy__spacing * $i) !important; } - .margin-right-#{($i + 1)}x { - margin-right: ($crispy__spacing * ($i)); + .has-margin-right-#{($i + 1)}x { + margin-right: ($crispy__spacing * ($i)) !important; } - .padding-top-#{($i + 1)}x { - padding-top: ($crispy__spacing * $i); + .has-padding-top-#{($i + 1)}x { + padding-top: ($crispy__spacing * $i) !important; } - .padding-left-#{($i + 1)}x { - padding-left: ($crispy__spacing * $i); + .has-padding-left-#{($i + 1)}x { + padding-left: ($crispy__spacing * $i) !important; } - .padding-bottom-#{($i + 1)}x { - padding-bottom: ($crispy__spacing * $i); + .has-padding-bottom-#{($i + 1)}x { + padding-bottom: ($crispy__spacing * $i) !important; } - .padding-right-#{($i + 1)}x { - padding-right: ($crispy__spacing * $i); + .has-padding-right-#{($i + 1)}x { + padding-right: ($crispy__spacing * $i) !important; } } } diff --git a/src/scss/helpers/_text.scss b/src/scss/helpers/_text.scss deleted file mode 100644 index f3c25d5..0000000 --- a/src/scss/helpers/_text.scss +++ /dev/null @@ -1,76 +0,0 @@ -/** - * helper: text - * - * align, font-sizes, color, background-color - * - * - * @author Björn Hase - * - */ - -$crispy__text-colors: $crispy__colors !default; -$crispy__text-font-sizes: $crispy__font-sizes !default; - -@mixin crispy__text() { - .text-left { - text-align: left; - } - - .text-right { - text-align: right; - } - - .text-center { - text-align: center; - } - - .text-justify { - text-align: justify; - } - - .text-italic { - font-style: italic; - } - - .text-normal { - font-style: normal; - } - - .text-bold { - font-weight: bold; - } - - .text-uppercase { - text-transform: uppercase; - } - - .text-lowercase { - text-transform: lowercase; - } - - .text-small { - font-size: 80%; - } - - .text-crossed { - text-decoration: line-through; - } - - @each $name, $font-size in $crispy__font-sizes { - .text-#{$name} { - @include crispy__font-size($font-size); - } - } - - @each $name, $color in $crispy__text-colors { - .text-#{$name} { - color: $color; - } - } - - @each $name, $color in $crispy__text-colors { - .background-#{$name} { - background-color: $color; - } - } -} diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss new file mode 100644 index 0000000..fcb6d8a --- /dev/null +++ b/src/scss/helpers/_typography.scss @@ -0,0 +1,89 @@ +/** + * helper: typography + * + * align, font-sizes, color, background-color + * + * + * @author Björn Hase + * + */ + +$crispy__typography-colors: $crispy__colors !default; +$crispy__typography-font-sizes: $crispy__font-sizes !default; + +@mixin crispy__typography() { + .has-text-left { + text-align: left !important; + } + + .has-text-right { + text-align: right !important; + } + + .has-text-center { + text-align: center !important; + } + + .has-text-justify { + text-align: justify !important; + } + + .has-text-italic { + font-style: italic !important; + } + + .has-text-uppercase { + text-transform: uppercase !important; + } + + .has-text-lowercase { + text-transform: lowercase !important; + } + + .has-text-crossed { + text-decoration: line-through !important; + } + + .is-capitalized { + text-transform: capitalize !important; + } + + // text weight + .is-text-weight-light { + font-weight: light !important; + } + + .is-text-weight-normal { + font-weight: normal !important; + } + + .is-text-weight-bold { + font-weight: bold !important; + } + + .has-text-weight-medium { + + } + + .has-text-weight-semibold { + + } + + @each $name, $font-size in $crispy__typography-font-sizes { + .has-font-size-#{$name} { + font-size: $font-size !important; + } + } + + @each $name, $color in $crispy__typography-colors { + .has-text-#{$name} { + color: $color !important; + } + } + + @each $name, $color in $crispy__typography-colors { + .has-background-#{$name} { + background-color: $color !important; + } + } +} diff --git a/src/scss/helpers/_visibility.scss b/src/scss/helpers/_visibility.scss deleted file mode 100644 index 97f8183..0000000 --- a/src/scss/helpers/_visibility.scss +++ /dev/null @@ -1,21 +0,0 @@ -/** - * helper: visibility - * - * - * @author Björn Hase - * - */ - -@mixin crispy__visibility() { - .hide { - display: none; - } - - .show { - display: block; - - &--inline { - display: inline; - } - } -} diff --git a/src/scss/helpers/_width.scss b/src/scss/helpers/_width.scss index 467647d..89a265c 100644 --- a/src/scss/helpers/_width.scss +++ b/src/scss/helpers/_width.scss @@ -7,19 +7,19 @@ */ @mixin crispy__width() { - .width-25 { + .has-width-25 { width: 25%; } - .width-50 { + .has-width-50 { width: 50%; } - .width-75 { + .has-width-75 { width: 75%; } - .width-100 { + .has-width-100 { width: 100%; } }