From 0398657ece274388fcac820be92016eb75b80c5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 20 Oct 2019 22:45:29 +0200 Subject: [PATCH] adding --- dist/example/index.html | 101 ++++++++++++++++++++++++++++------------ src/_modifiers.scss | 6 ++- 2 files changed, 75 insertions(+), 32 deletions(-) diff --git a/dist/example/index.html b/dist/example/index.html index 07b4e2a..14e6dae 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -679,26 +679,27 @@ toRem(10px 10px 0 0); Returns value without unit.

+ +

+ zIndex(name) +

+

Sass:

+ 
zIndex('modal');
+

+ Returns value from $crispy__z-index. +

+

Sass:

+ 
$crispy__z-index: (
+    'overlay': 90,
+    'modal'  : 100
+);
+

Modifiziers

- -

- Float -

- 
<div class="text-left"></div>
-<div class="text-center"></div>
-<div class="text-right"></div>
-<div class="text-justify"></div>
-<div class="float-left"></div>
-<div class="float-center"></div>
-<div class="float-none"></div>
-<div class="center"></div>
-<div class="clearfix"></div>
-

Margin & Padding @@ -726,6 +727,13 @@ $crispy__spacing__steps: 5;
margin-bottom-4
margin-bottom-5
+

+ Also set padding and margin to 0, +

+ + 
<div class="marginless"</div>
+<div class="paddingless"</div>
+

Media @@ -749,31 +757,26 @@ $crispy__spacing__steps: 5; -
-
-
- -
-
-
- +

- Text + Typography 

<div class="text-left"></div>
 <div class="text-center"></div>
 <div class="text-right"></div>
 <div class="text-justify"></div>
 <div class="text-italic"></div>
-<div class="text-light"></div>
-<div class="text-normal"></div>
-<div class="text-medium"></div>
-<div class="text-bold"></div>
+<div class="text-weight-light"></div>
+<div class="text-weight-normal"></div>
+<div class="text-weight-medium"></div>
+<div class="text-weight-bold"></div>
+<div class="text-capitalize"></div>
 <div class="text-uppercase"></div>
 <div class="text-lowercase"></div>
-<div class="text-small"></div>
-<div class="text-crossed"></div>
+<div class="text-smaller"></div> +<div class="text-crossed"></div> +<div class="text-underline"></div>

Also there are classes for, @@ -784,7 +787,34 @@ $crispy__spacing__steps: 5;

  • background-color-* with $crispy__font-sizes for "background-color"
    • - + +

    + Float +

    + 
    <div class="float-left"></div>
+<div class="float-right"></div>
+<div class="float-none"></div>
+<div class="centered"></div>
+<div class="clearfix"></div>
    + + +

    + Position +

    + 
    <div class="relative"></div>
+<div class="absolute"></div>
+<div class="fixed"></div>
    + + +

    + Border +

    + 
    <div class="bordered"></div>
+<div class="rounded"></div>
+<div class="borderless"></div>
+<div class="radiusless"></div>
    + +

    Visibility

    @@ -793,10 +823,19 @@ $crispy__spacing__steps: 5; <div class="visible visible--inline"></div> <div class="visible visible--inline-block"></div> - +

    Width

    +

    Sass:

    + 
    $crispy__width: (
+    '25' : 25%,
+    '50' : 50%,
+    '75' : 75%,
+    '100': 100%
+)
    + +

    Html:

    <div class="panel width-25">width-25</div>
 <div class="width-50">width-50</div>
 <div class="width-75">width-75</div>
diff --git a/src/_modifiers.scss b/src/_modifiers.scss
index 8a8f53c..794330f 100644
--- a/src/_modifiers.scss
+++ b/src/_modifiers.scss
@@ -46,7 +46,7 @@
         text-decoration: underline !important;
     }
 
-    .text-capitalized {
+    .text-capitalize {
         text-transform: capitalize !important;
     }
 
@@ -70,6 +70,10 @@
         font-weight: bolder !important;
     }
 
+    .text-smaller {
+        font-size: 80% !important
+    }
+
     @each $name, $font-size in $crispy__font-sizes {
         .text-size-#{$name} {
             font-size: $font-size !important;