| @ -1,3 +1,101 @@ | |||
| @import | |||
| 'functions/units', | |||
| 'functions/zIndex'; | |||
| /** | |||
| * functions | |||
| * | |||
| * | |||
| * | |||
| * | |||
| * @author Björn Hase | |||
| * @license http://opensource.org/licenses/MIT The MIT License | |||
| * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy | |||
| * | |||
| */ | |||
| /** | |||
| * px 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); | |||
| } | |||
| /** | |||
| * px 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); | |||
| } | |||
| /** | |||
| * 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; | |||
| } | |||
| } | |||
| @ -1,7 +0,0 @@ | |||
| @import | |||
| 'helpers/float', | |||
| 'helpers/spacing', | |||
| 'helpers/media', | |||
| 'helpers/text', | |||
| 'helpers/visibility', | |||
| 'helpers/width'; | |||
| @ -1,7 +1,16 @@ | |||
| @import | |||
| 'functions', | |||
| 'variables', | |||
| 'components/button', | |||
| 'helpers/float', | |||
| 'helpers/spacing', | |||
| 'helpers/media', | |||
| 'helpers/text', | |||
| 'helpers/visibility', | |||
| 'helpers/width', | |||
| 'mixins', | |||
| 'config', | |||
| 'core', | |||
| 'components', | |||
| 'helpers'; | |||
| 'mixins/media-queries'; | |||
| @ -1,39 +0,0 @@ | |||
| /** | |||
| * fonts | |||
| * | |||
| * | |||
| * @author Björn Hase | |||
| * | |||
| */ | |||
| /** | |||
| * add font-size in px as fallback and in rem | |||
| * | |||
| * | |||
| * @param {px} $font-size | |||
| * | |||
| */ | |||
| @mixin crispy__font-size($font-size) { | |||
| font-size: $font-size; | |||
| font-size: toRem($font-size); | |||
| } | |||
| /** | |||
| * add font-sizes as modifactors | |||
| * | |||
| * | |||
| * @param {map} $font-sizes | |||
| * | |||
| */ | |||
| @mixin crispy__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); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @ -1,69 +0,0 @@ | |||
| /** | |||
| * media-queries | |||
| * | |||
| * | |||
| * @author Björn Hase | |||
| * | |||
| */ | |||
| @mixin crispy__media-xs() { | |||
| @media only screen and (min-width:$crispy__xs) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-sm() { | |||
| @media only screen and (min-width: $crispy__sm) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-md() { | |||
| @media only screen and (min-width: $crispy__md) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-lg() { | |||
| @media only screen and (min-width: $crispy__lg) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-xlg() { | |||
| @media only screen and (min-width: $crispy__xlg) { | |||
| @content; | |||
| } | |||
| } | |||
| // only | |||
| @mixin crispy__media-xs-only() { | |||
| @media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-sm-only() { | |||
| @media only screen and (min-width: $crispy__sm) and (max-width: $crispy__md - 1) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-md-only() { | |||
| @media only screen and (min-width: $crispy__md) and (max-width: $crispy__lg - 1) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-lg-only() { | |||
| @media only screen and (min-width: $crispy__lg) and (max-width: $crispy__xlg - 1) { | |||
| @content; | |||
| } | |||
| } | |||
| @mixin crispy__media-xlg-only() { | |||
| @media only screen and (min-width: $crispy__xlg) { | |||
| @content; | |||
| } | |||
| } | |||