diff --git a/src/scss/_components.scss b/src/scss/_components.scss deleted file mode 100644 index 5894e51..0000000 --- a/src/scss/_components.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import - 'components/button', - 'components/code', - 'components/group', - 'components/heading', - 'components/hero', - 'components/modal', - 'components/panel', - 'components/table', - 'components/field'; diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 870a799..d09cb1f 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -1,8 +1,12 @@ /** - * normalize + * core + * + * import normalize * * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ @@ -48,10 +52,10 @@ } a { - color: $crispy__color-primary; + color: $crispy__color-link; &:hover { - color: $crispy__color-hover; + color: $crispy__color-link-hover; } &:focus { @@ -135,6 +139,6 @@ background-color: $crispy__color-background; direction: $crispy__direction; - @include crispy__font-size($crispy__font-size); + font-size: toRem($crispy__font-size); } } diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss index 0616375..2391af5 100644 --- a/src/scss/_functions.scss +++ b/src/scss/_functions.scss @@ -99,3 +99,36 @@ @return null; } } + +/** + * + * + * + * @param {[type]} $directions [description] + * @return {[type]} [description] + * + */ +@function opposite-direction($directions) { + $opposite-directions: (); + $direction-map: ( + 'top': 'bottom', + 'right': 'left', + 'bottom': 'top', + 'left': 'right', + 'center': 'center', + 'ltr': 'rtl', + 'rtl': 'ltr' + ); + + @each $direction in $directions { + $direction: to-lower-case($direction); + + @if map-has-key($direction-map, $direction) { + $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction))); + } @else { + @warn "No opposite direction can be found for `#{$direction}`. Direction omitted."; + } + } + + @return $opposite-directions; +} diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 58db371..5f15538 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -28,6 +28,7 @@ } } + /** * clear styles from list * @@ -44,12 +45,13 @@ } } + /** * media-queries * * * - * @author Björn Hase + * * */ @mixin crispy__media-xs() { @@ -82,7 +84,6 @@ } } -// only @mixin crispy__media-xs-only() { @media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) { @content; @@ -112,3 +113,35 @@ @content; } } + + +/** + * triangle + * + * + * @param {Direction} $direction - Triangle direction, either 'top', 'right', 'bottom' or 'left' + * @param {Color} $color [currentcolor] - Triangle color + * @param {Length} $size [1em] - Triangle size + * + */ +@mixin triangle($direction, $color: currentcolor, $size: 1em) { + @if not index(top right bottom left, $direction) { + @error "Direction must be either `top`, `right`, `bottom` or `left`."; + } + + width: 0; + height: 0; + content: ''; + z-index: 2; + border-#{opposite-position($direction)}: ($size * 1.5) solid $color; + + $perpendicular-borders: $size solid transparent; + + @if $direction == top or $direction == bottom { + border-left: $perpendicular-borders; + border-right: $perpendicular-borders; + } @else if $direction == right or $direction == left { + border-bottom: $perpendicular-borders; + border-top: $perpendicular-borders; + } +} diff --git a/src/scss/_modifiers.scss b/src/scss/_modifiers.scss new file mode 100644 index 0000000..d9fbca8 --- /dev/null +++ b/src/scss/_modifiers.scss @@ -0,0 +1,245 @@ +/** + * helper: visibility + * + * + * @author Björn Hase + * + */ + +@mixin crispy__modifiers() { + + /** + * typography + * + * + */ + + .text-left { + text-align: left !important; + } + + .text-right { + text-align: right !important; + } + + .text-center { + text-align: center !important; + } + + .text-justify { + text-align: justify !important; + } + + .text-uppercase { + text-transform: uppercase !important; + } + + .text-lowercase { + text-transform: lowercase !important; + } + + .text-crossed { + text-decoration: line-through !important; + } + + .text-underline { + text-decoration: underline !important; + } + + .text-capitalized { + text-transform: capitalize !important; + } + + .text-italic { + font-style: italic !important; + } + + .text-weight-light { + font-weight: lighter !important; + } + + .text-weight-normal { + font-weight: normal !important; + } + + .text-weight-bold { + font-weight: bolder !important; + } + + .text-weight-medium { + font-weight: medium !important; + } + + @each $name, $font-size in $crispy__font-sizes { + .text-size-#{$name} { + font-size: $font-size !important; + } + } + + /** + * floating + * + * + */ + + .float-left { + float: left; + } + + .float-right { + float: right; + } + + .float-none { + float: none; + } + + .centered { + margin-left: auto; + margin-right: auto; + } + + .clearfix { + @include crispy__clearfix(); + } + + /** + * colors + * + * + */ + + @each $name, $color in $crispy__colors { + .text-color-#{$name} { + color: $color !important; + } + } + + @each $name, $color in $crispy__colors { + .background-color-#{$name} { + background-color: $color !important; + } + } + + /** + * position + * + * + */ + + .absolute { + position: absolute !important; + } + + .fixed { + position: fixed !important; + } + + .relative { + position: relative !important; + } + + /** + * visibility + * + * + */ + + .hidden { + display: none !important; + } + + .visible { + display: block !important; + + &--inline { + display: inline !important; + } + + &--inline-block { + display: inline-block !important; + } + } + + /** + * borders + * + * + */ + + .bordered { + border: $crispy__border !important; + } + + .rounded { + border-radius: 50% !important; + } + + .borderless { + border: 0 !important; + } + + .radiusless + border-radius: 0 !important; + } + + /** + * width + * + * + */ + + @each $name, $width in $crispy__width { + .width-#{$name} { + width: $width !important; + } + } + + /** + * margin & padding + * + * + */ + + .marginless { + margin: 0 !important; + } + + .paddingless { + padding: 0 !important; + } + + @for $i from 0 through $crispy__spacing__steps { + .margin-top-#{($i + 1)} { + margin-top: ($crispy__spacing * $i) !important; + } + + .margin-left-#{($i + 1)} { + margin-left: ($crispy__spacing * $i) !important; + } + + .margin-bottom-#{($i + 1)} { + margin-bottom: ($crispy__spacing * $i) !important; + } + + .margin-right-#{($i + 1)} { + margin-right: ($crispy__spacing * ($i)) !important; + } + + .padding-top-#{($i + 1)} { + padding-top: ($crispy__spacing * $i) !important; + } + + .padding-left-#{($i + 1)} { + padding-left: ($crispy__spacing * $i) !important; + } + + .padding-bottom-#{($i + 1)} { + padding-bottom: ($crispy__spacing * $i) !important; + } + + .padding-right-#{($i + 1)} { + padding-right: ($crispy__spacing * $i) !important; + } + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 58b96a8..c5e8073 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -23,7 +23,6 @@ $crispy__family-secondary: $family-sans-serif !default $crispy__family-code: $family-monospace !default $crispy__direction: ltr !default; -$crispy__border-radius: 0 !default; // spacing $crispy__spacing: 10px !default; @@ -36,6 +35,7 @@ $crispy__color-success: #5cb85c !default; $crispy__color-warning: #f0ad4e !default; $crispy__color-danger: #d9534f !default; $crispy__color-info: #0090d4 !default; + $crispy__color-text: #363636 !default; $crispy__color-border: #d0d0d0 !default; $crispy__color-background: #ffffff !default; @@ -46,6 +46,10 @@ $crispy__color-link-visited: $purple !default; $crispy__color-link-focus: $grey-darker !default; $crispy__color-link-active: $grey-darker !default; +// borders +$crispy__border-radius: 0 !default; +$cirspy__border: 1px solid $crispy__color-border !default; + // breakpoints $crispy__xs: 576px !default; $crispy__sm: 768px !default; @@ -74,3 +78,10 @@ $crispy__font-sizes: ( $crispy__z-index: ( 'modal': 100 ) !default; + +$crispy__width: ( + '25' : 25%, + '50' : 50%, + '75' : 75%, + '100': 100% +) !default; diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss index 9f59243..336a469 100644 --- a/src/scss/components/_code.scss +++ b/src/scss/components/_code.scss @@ -8,6 +8,8 @@ * * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ @@ -31,7 +33,6 @@ $crispy__code__background-color: #f9f9f9 !default; background-color: $crispy__code__background-color; margin: $crispy__code__margin; - - @include crispy__font-size($crispy__code__font-size); + font-size: $crispy__code__font-size; } } diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index a90c15c..ce502e3 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -8,6 +8,8 @@ * * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss index 3d46ed5..ba32ebb 100644 --- a/src/scss/components/_heading.scss +++ b/src/scss/components/_heading.scss @@ -6,6 +6,8 @@ * * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ @@ -38,7 +40,7 @@ $crispy__heading__margin: toEm(0 0 5px) !default; @each $h, $font-size in $crispy__heading__font-sizes { #{$h}, .#{$h} { - @include crispy__font-size($font-size); + font-size: toRem($font-size); } } } diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss index 98330c4..b777bbf 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -2,10 +2,15 @@ * component: hero * * background-size is as default: cover - Resize the background image to cover the entire container - *
+ * + *
+ * + *
* * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ diff --git a/src/scss/helpers/_media.scss b/src/scss/components/_media.scss similarity index 91% rename from src/scss/helpers/_media.scss rename to src/scss/components/_media.scss index 1624583..6471512 100644 --- a/src/scss/helpers/_media.scss +++ b/src/scss/components/_media.scss @@ -15,10 +15,6 @@ height: auto; } - .img-rounded { - border-radius: 50%; - } - .video-responsive { display: block; overflow: hidden; diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 557e208..dbc0710 100644 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -6,10 +6,11 @@ * * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ - $crispy__modal__margin: toEm($crispy__spacing * 2) !default; $crispy__modal__z-index: zIndex('modal') !default; @@ -42,6 +43,12 @@ $crispy__modal__z-index: zIndex('modal') !default; bottom: 0; } + &--center { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + .panel { margin: $crispy__modal__margin; } diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss index a144f43..88e3b42 100644 --- a/src/scss/components/_panel.scss +++ b/src/scss/components/_panel.scss @@ -1,5 +1,5 @@ /** - * component: panel + * componente: panel * *
*
@@ -8,6 +8,8 @@ *
* * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index affe109..b604475 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -1,5 +1,5 @@ /** - * component: table + * componente: table * * * @@ -16,7 +16,10 @@ * *
* + * * @author Björn Hase + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy * */ diff --git a/src/scss/crispy.scss b/src/scss/crispy.scss index 4733c39..87d7734 100644 --- a/src/scss/crispy.scss +++ b/src/scss/crispy.scss @@ -1,16 +1,18 @@ @import + 'functions', 'variables', + 'core', 'components/button', + 'components/code', + 'components/group', + 'components/heading', + 'components/hero', + 'components/modal', + 'components/panel', + 'components/table', + 'components/field', - - 'helpers/float', - 'helpers/spacing', - 'helpers/media', - 'helpers/text', - 'helpers/visibility', - 'helpers/width', - - 'mixins', - 'mixins/media-queries'; + 'modifiers', + 'mixins'; diff --git a/src/scss/functions/_units.scss b/src/scss/functions/_units.scss deleted file mode 100644 index fedd512..0000000 --- a/src/scss/functions/_units.scss +++ /dev/null @@ -1,82 +0,0 @@ -/** - * functions: units - * - * convert px to em and rem - * - * - * @author Björn Hase - * - */ - - - /** - * 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) { - $results: 0; - - @if type-of($values) == 'number' { - $results: toRelative($values, $base) * $unit; - } @else { - $results: (); - - @each $value in $values { - @if $value == 0 { - $results: append($results, $value); - } - @else { - $results: append($results, toRelative($value, $base) * $unit); - } - } - } - - @return $results; -} - -/** - * to relative - * - * @param {mixed} $value - * @param {mixed} $base - * @return {number} - */ -@function toRelative($value, $base: $crispy__font-size) { - @return stripUnit($value) / stripUnit($base); -} - -/** - * strip unit from value - * - * @param {mixed} $value - * @return {number} - */ -@function stripUnit($value) { - @return $value / ($value * 0 + 1); -} diff --git a/src/scss/functions/_zIndex.scss b/src/scss/functions/_zIndex.scss deleted file mode 100644 index ec92256..0000000 --- a/src/scss/functions/_zIndex.scss +++ /dev/null @@ -1,17 +0,0 @@ -/** - * function: z-index - * - * uses map $crispy__z-index to get value by key - * - * @author Björn Hase - * - */ - -@function zIndex($name) { - @if map-has-key($crispy__z-index, $name) { - @return map-get($crispy__z-index, $name); - } @else { - @warn 'There is no item "#{$name}" in this list; choose one of: #{$crispy__z-index}'; - @return null; - } -} diff --git a/src/scss/helpers/_float.scss b/src/scss/helpers/_float.scss deleted file mode 100644 index 4a26dd5..0000000 --- a/src/scss/helpers/_float.scss +++ /dev/null @@ -1,33 +0,0 @@ -/** - * helper: float - * - * float & centering - * - * - * - * @author Björn Hase - * - */ - -@mixin crispy__float() { - .has-float-left { - float: left; - } - - .has-float-right { - float: right; - } - - .has-float-none { - float: none; - } - - .is-centered { - margin-left: auto; - margin-right: auto; - } - - .is-clearfixed { - @include crispy__clearfix(); - } -} diff --git a/src/scss/helpers/_modifizer.scss b/src/scss/helpers/_modifizer.scss deleted file mode 100644 index 2a3b5b6..0000000 --- a/src/scss/helpers/_modifizer.scss +++ /dev/null @@ -1,42 +0,0 @@ -/** - * 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 !important; - } - - &--inline-block { - display: inline !important; - } - } - - .is-radiusless - border-radius: 0 !important - } -} diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss deleted file mode 100644 index f87ec66..0000000 --- a/src/scss/helpers/_spacing.scss +++ /dev/null @@ -1,52 +0,0 @@ -/** - * helper: spacing - * - * - * @author Björn Hase - * - */ - -@mixin crispy__spacing() { - - .is-marginless { - margin: 0 !important; - } - - .is-paddingless { - padding: 0 !important; - } - - @for $i from 0 through $crispy__spacing__steps { - .has-margin-top-#{($i + 1)}x { - margin-top: ($crispy__spacing * $i) !important; - } - - .has-margin-left-#{($i + 1)}x { - margin-left: ($crispy__spacing * $i) !important; - } - - .has-margin-bottom-#{($i + 1)}x { - margin-bottom: ($crispy__spacing * $i) !important; - } - - .has-margin-right-#{($i + 1)}x { - margin-right: ($crispy__spacing * ($i)) !important; - } - - .has-padding-top-#{($i + 1)}x { - padding-top: ($crispy__spacing * $i) !important; - } - - .has-padding-left-#{($i + 1)}x { - padding-left: ($crispy__spacing * $i) !important; - } - - .has-padding-bottom-#{($i + 1)}x { - padding-bottom: ($crispy__spacing * $i) !important; - } - - .has-padding-right-#{($i + 1)}x { - padding-right: ($crispy__spacing * $i) !important; - } - } -} diff --git a/src/scss/helpers/_typography.scss b/src/scss/helpers/_typography.scss deleted file mode 100644 index 1597cf5..0000000 --- a/src/scss/helpers/_typography.scss +++ /dev/null @@ -1,92 +0,0 @@ -/** - * 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() { - - // text align - .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; - } - - // - .is-text-uppercase { - text-transform: uppercase !important; - } - - .is-text-lowercase { - text-transform: lowercase !important; - } - - .is-text-crossed { - text-decoration: line-through !important; - } - - .is-capitalized { - text-transform: capitalize !important; - } - - .is-text-italic { - font-style: italic !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; - } - - .is-text-weight-medium { - font-weight: medium !important; - } - - .ist-text-weight-semibold { - font-weight: semibold !important; - } - - @each $name, $font-size in $crispy__typography-font-sizes { - .has-text-size-#{$name} { - font-size: $font-size !important; - } - } - - @each $name, $color in $crispy__typography-colors { - .has-text-color-#{$name} { - color: $color !important; - } - } - - @each $name, $color in $crispy__typography-colors { - .has-background-color-#{$name} { - background-color: $color !important; - } - } -} diff --git a/src/scss/helpers/_width.scss b/src/scss/helpers/_width.scss deleted file mode 100644 index 89a265c..0000000 --- a/src/scss/helpers/_width.scss +++ /dev/null @@ -1,25 +0,0 @@ -/** - * helper: width - * - * - * @author Björn Hase - * - */ - -@mixin crispy__width() { - .has-width-25 { - width: 25%; - } - - .has-width-50 { - width: 50%; - } - - .has-width-75 { - width: 75%; - } - - .has-width-100 { - width: 100%; - } -}