adding components

refactoring functions

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%);
-        }
-    }
 }

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;
 

src/scss/components/_group.scss

@@ -0,0 +1,37 @@
+/**
+ * group
+ *
+ * <nav class="group group--horizontal">
+ *     <ul class="group__section">
+ *         <li class="group__item"></li>
+ *     <ul>
+ * </nav>
+ *
+ * @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;
+                }
+            }
+        }
+    }
+}

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,

src/scss/components/_hero.scss

@@ -0,0 +1,32 @@
+/**
+ * hero
+ *
+ * background-position is as default: cover
+ *
+ * <div class="hero" style="width: value height: value; background-image: url(path)"></div>
+ *
+ *
+ * @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;
+        }
+    }
+}

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;

src/scss/components/_nav.scss

@@ -1,20 +0,0 @@
-/**
- *
- *
- *
- */
-
-@mixin $crispy__nav {
-    .nav {
-
-        &__list {
-            @include crispy__clearlist();
-        }
-
-        &--horizontal {
-            .nav__item {
-                display: inline-block;
-            }
-        }
-    }
-}

src/scss/components/_panel.scss

@@ -0,0 +1,38 @@
+/**
+ * panel
+ *
+ * <div class="panel">
+ *
+ * </div>
+ *
+ * @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;
+        }
+    }
+}

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;

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);
 }

src/scss/helpers/_helpers.scss

@@ -2,4 +2,5 @@
     'align',
     'margin',
     'media',
-    'text';
+    'text',
+    'width';

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;

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 {

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%;
+    }
+}