amis-ui 1.0.0-beta.0

package/scss/helper/typography/_font-style.scss

@@ -0,0 +1,31 @@
+/*!markdown
+
+---
+title: Font Style
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| italic | font-style: italic |
+| not-italic | font-style: normal |
+
+
+*/
+@mixin make-font-style($prefix: '.') {
+  #{$prefix}italic {
+    font-style: italic;
+  }
+
+  #{$prefix}not-italic {
+    font-style: normal;
+  }
+}
+
+@include make-font-style();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-font-style('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_font-weight.scss

@@ -0,0 +1,49 @@
+/*!markdown
+
+---
+title: Font Weight
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| font-thin | font-weight: 100 |
+| font-extralight | font-weight: 200 |
+| font-light | font-weight: 300 |
+| font-normal | font-weight: 400 |
+| font-medium | font-weight: 500 |
+| font-semibold | font-weight: 600 |
+| font-bold | font-weight: 700 |
+| font-extrabold | font-weight: 800 |
+| font-black | font-weight: 900 |
+
+
+*/
+@mixin make-font-weight($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'thin': 100,
+        'extralight': 200,
+        'light': 300,
+        'normal': 400,
+        'medium': 500,
+        'semibold': 600,
+        'bold': 700,
+        'extrabold': 800,
+        'black': 900
+      )
+  {
+    #{$prefix}font-#{$name} {
+      font-weight: $value;
+    }
+  }
+}
+
+@include make-font-weight();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-font-weight('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_letter-spacing.scss

@@ -0,0 +1,43 @@
+/*!markdown
+
+---
+title: Letter Spacing
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| tracking-tighter | letter-spacing: -0.05em |
+| tracking-tight | letter-spacing: -0.025em |
+| tracking-normal | letter-spacing: 0em |
+| tracking-wide | letter-spacing: 0.025 |
+| tracking-wider | letter-spacing: 0.05em |
+| tracking-widest | letter-spacing: 0.1em |
+
+
+*/
+@mixin make-letter-spacing($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'tighter': -0.05em,
+        'tight': -0.025em,
+        'normal': 0em,
+        'wide': 0.025,
+        'wider': 0.05em,
+        'widest': 0.1em
+      )
+  {
+    #{$prefix}tracking-#{$name} {
+      letter-spacing: $value;
+    }
+  }
+}
+
+@include make-letter-spacing();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-letter-spacing('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_line-height.scss

@@ -0,0 +1,59 @@
+/*!markdown
+
+---
+title: Line Height
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| leading-3 | line-height: 0.75rem |
+| leading-4 | line-height: 1rem |
+| leading-5 | line-height: 1.25rem |
+| leading-6 | line-height: 1.5rem |
+| leading-7 | line-height: 1.75rem |
+| leading-8 | line-height: 2rem |
+| leading-9 | line-height: 2.25rem |
+| leading-10 | line-height: 2.5rem |
+| leading-none | line-height: 1 |
+| leading-tight | line-height: 1.25 |
+| leading-snug | line-height: 1.375 |
+| leading-normal | line-height: 1.5 |
+| leading-relaxed | line-height: 1.625 |
+| leading-loose | line-height: 2 |
+
+
+*/
+@mixin make-line-height($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        '3': 0.75rem,
+        '4': 1rem,
+        '5': 1.25rem,
+        '6': 1.5rem,
+        '7': 1.75rem,
+        '8': 2rem,
+        '9': 2.25rem,
+        '10': 2.5rem,
+        'none': 1,
+        'tight': 1.25,
+        'snug': 1.375,
+        'normal': 1.5,
+        'relaxed': 1.625,
+        'loose': 2
+      )
+  {
+    #{$prefix}leading-#{$name} {
+      line-height: $value;
+    }
+  }
+}
+
+@include make-line-height();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-line-height('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_list-style-type.scss

@@ -0,0 +1,43 @@
+/*!markdown
+
+---
+title: List Style Type
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| list-none | list-style-type: none |
+| list-disc | list-style-type: disc |
+| list-decimal | list-style-type: decimal |
+| list-inside | list-style-position: inside |
+| list-outside | list-style-position: outside |
+
+
+*/
+
+@mixin make-list-style-type($prefix: '.') {
+  @each $name, $value in ('none': none, 'disc': disc, 'decimal': decimal) {
+    #{$prefix}list-#{$name} {
+      list-style-type: $value;
+    }
+  }
+}
+
+@mixin make-list-style-position($prefix: '.') {
+  @each $name, $value in ('inside': inside, 'outside': outside) {
+    #{$prefix}list-#{$name} {
+      list-style-position: $value;
+    }
+  }
+}
+
+@include make-list-style-type();
+@include make-list-style-position();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-list-style-type('.' + selector-escape($deivce + ':'));
+    @include make-list-style-position('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_text-align.scss

@@ -0,0 +1,34 @@
+/*!markdown
+
+---
+title: Text Align
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| text-left | text-align: left |
+| text-center | text-align: center |
+| text-right | text-align: right |
+| text-justify | text-align: justify |
+
+
+*/
+@mixin make-text-align($prefix: '.') {
+  @each $name,
+    $value
+      in ('left': left, 'center': center, 'right': right, 'justify': justify)
+  {
+    #{$prefix}text-#{$name} {
+      text-align: $value;
+    }
+  }
+}
+
+@include make-text-align();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-text-align('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_text-color.scss

@@ -0,0 +1,184 @@
+/*!markdown
+
+---
+title: Text Color
+---
+
+| Class       | Properties               | 示例效果               |
+| ----------- | ------------------------ | ------------------------ |
+| text-transparent | color: transparent | <span style="color: #transparent">AaBbCcDd</span>|
+| text-current | color: currentColor | <span style="color: #currentColor">AaBbCcDd</span>|
+| text-black | color: #000 | <span style="color: #000">AaBbCcDd</span>|
+| text-white | color: #fff | <span style="color: #fff">AaBbCcDd</span>|
+| text-primary | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
+| text-secondary | color: #6c757d | <span style="color: #6c757d">AaBbCcDd</span>|
+| text-success | color: #28a745 | <span style="color: #28a745">AaBbCcDd</span>|
+| text-info | color: #007bff | <span style="color: #007bff">AaBbCcDd</span>|
+| text-warning | color: #fad733 | <span style="color: #fad733">AaBbCcDd</span>|
+| text-danger | color: #dc3545 | <span style="color: #dc3545">AaBbCcDd</span>|
+| text-light | color: #f8f9fa | <span style="color: #f8f9fa">AaBbCcDd</span>|
+| text-dark | color: #343a40 | <span style="color: #343a40">AaBbCcDd</span>|
+| text-gray-50 | color: #f9fafb | <span style="color: #f9fafb">AaBbCcDd</span>|
+| text-gray-100 | color: #f3f4f6 | <span style="color: #f3f4f6">AaBbCcDd</span>|
+| text-gray-200 | color: #e5e7eb | <span style="color: #e5e7eb">AaBbCcDd</span>|
+| text-gray-300 | color: #d1d5db | <span style="color: #d1d5db">AaBbCcDd</span>|
+| text-gray-400 | color: #9ca3af | <span style="color: #9ca3af">AaBbCcDd</span>|
+| text-gray-500 | color: #6b7280 | <span style="color: #6b7280">AaBbCcDd</span>|
+| text-gray-600 | color: #4b5563 | <span style="color: #4b5563">AaBbCcDd</span>|
+| text-gray-700 | color: #374151 | <span style="color: #374151">AaBbCcDd</span>|
+| text-gray-800 | color: #1f2937 | <span style="color: #1f2937">AaBbCcDd</span>|
+| text-gray-900 | color: #111827 | <span style="color: #111827">AaBbCcDd</span>|
+| text-red-50 | color: #fef2f2 | <span style="color: #fef2f2">AaBbCcDd</span>|
+| text-red-100 | color: #fee2e2 | <span style="color: #fee2e2">AaBbCcDd</span>|
+| text-red-200 | color: #fecaca | <span style="color: #fecaca">AaBbCcDd</span>|
+| text-red-300 | color: #fca5a5 | <span style="color: #fca5a5">AaBbCcDd</span>|
+| text-red-400 | color: #f87171 | <span style="color: #f87171">AaBbCcDd</span>|
+| text-red-500 | color: #ef4444 | <span style="color: #ef4444">AaBbCcDd</span>|
+| text-red-600 | color: #dc2626 | <span style="color: #dc2626">AaBbCcDd</span>|
+| text-red-700 | color: #b91c1c | <span style="color: #b91c1c">AaBbCcDd</span>|
+| text-red-800 | color: #991b1b | <span style="color: #991b1b">AaBbCcDd</span>|
+| text-red-900 | color: #7f1d1d | <span style="color: #7f1d1d">AaBbCcDd</span>|
+| text-yellow-50 | color: #fffbeb | <span style="color: #fffbeb">AaBbCcDd</span>|
+| text-yellow-100 | color: #fef3c7 | <span style="color: #fef3c7">AaBbCcDd</span>|
+| text-yellow-200 | color: #fde68a | <span style="color: #fde68a">AaBbCcDd</span>|
+| text-yellow-300 | color: #fcd34d | <span style="color: #fcd34d">AaBbCcDd</span>|
+| text-yellow-400 | color: #fbbf24 | <span style="color: #fbbf24">AaBbCcDd</span>|
+| text-yellow-500 | color: #f59e0b | <span style="color: #f59e0b">AaBbCcDd</span>|
+| text-yellow-600 | color: #d97706 | <span style="color: #d97706">AaBbCcDd</span>|
+| text-yellow-700 | color: #b45309 | <span style="color: #b45309">AaBbCcDd</span>|
+| text-yellow-800 | color: #92400e | <span style="color: #92400e">AaBbCcDd</span>|
+| text-yellow-900 | color: #78350f | <span style="color: #78350f">AaBbCcDd</span>|
+| text-green-50 | color: #ecfdf5 | <span style="color: #ecfdf5">AaBbCcDd</span>|
+| text-green-100 | color: #d1fae5 | <span style="color: #d1fae5">AaBbCcDd</span>|
+| text-green-200 | color: #a7f3d0 | <span style="color: #a7f3d0">AaBbCcDd</span>|
+| text-green-300 | color: #6ee7b7 | <span style="color: #6ee7b7">AaBbCcDd</span>|
+| text-green-400 | color: #34d399 | <span style="color: #34d399">AaBbCcDd</span>|
+| text-green-500 | color: #10b981 | <span style="color: #10b981">AaBbCcDd</span>|
+| text-green-600 | color: #059669 | <span style="color: #059669">AaBbCcDd</span>|
+| text-green-700 | color: #047857 | <span style="color: #047857">AaBbCcDd</span>|
+| text-green-800 | color: #065f46 | <span style="color: #065f46">AaBbCcDd</span>|
+| text-green-900 | color: #064e3b | <span style="color: #064e3b">AaBbCcDd</span>|
+| text-blue-50 | color: #eff6ff | <span style="color: #eff6ff">AaBbCcDd</span>|
+| text-blue-100 | color: #dbeafe | <span style="color: #dbeafe">AaBbCcDd</span>|
+| text-blue-200 | color: #bfdbfe | <span style="color: #bfdbfe">AaBbCcDd</span>|
+| text-blue-300 | color: #93c5fd | <span style="color: #93c5fd">AaBbCcDd</span>|
+| text-blue-400 | color: #60a5fa | <span style="color: #60a5fa">AaBbCcDd</span>|
+| text-blue-500 | color: #3b82f6 | <span style="color: #3b82f6">AaBbCcDd</span>|
+| text-blue-600 | color: #2563eb | <span style="color: #2563eb">AaBbCcDd</span>|
+| text-blue-700 | color: #1d4ed8 | <span style="color: #1d4ed8">AaBbCcDd</span>|
+| text-blue-800 | color: #1e40af | <span style="color: #1e40af">AaBbCcDd</span>|
+| text-blue-900 | color: #1e3a8a | <span style="color: #1e3a8a">AaBbCcDd</span>|
+| text-cyan-50 | color: #ecfeff | <span style="color: #ecfeff">AaBbCcDd</span>|
+| text-cyan-100 | color: #cffafe | <span style="color: #cffafe">AaBbCcDd</span>|
+| text-cyan-200 | color: #a5f3fc | <span style="color: #a5f3fc">AaBbCcDd</span>|
+| text-cyan-300 | color: #67e8f9 | <span style="color: #67e8f9">AaBbCcDd</span>|
+| text-cyan-400 | color: #22d3ee | <span style="color: #22d3ee">AaBbCcDd</span>|
+| text-cyan-500 | color: #06b6d4 | <span style="color: #06b6d4">AaBbCcDd</span>|
+| text-cyan-600 | color: #0891b2 | <span style="color: #0891b2">AaBbCcDd</span>|
+| text-cyan-700 | color: #0e7490 | <span style="color: #0e7490">AaBbCcDd</span>|
+| text-cyan-800 | color: #155e75 | <span style="color: #155e75">AaBbCcDd</span>|
+| text-cyan-900 | color: #164e63 | <span style="color: #164e63">AaBbCcDd</span>|
+| text-indigo-50 | color: #eef2ff | <span style="color: #eef2ff">AaBbCcDd</span>|
+| text-indigo-100 | color: #e0e7ff | <span style="color: #e0e7ff">AaBbCcDd</span>|
+| text-indigo-200 | color: #c7d2fe | <span style="color: #c7d2fe">AaBbCcDd</span>|
+| text-indigo-300 | color: #a5b4fc | <span style="color: #a5b4fc">AaBbCcDd</span>|
+| text-indigo-400 | color: #818cf8 | <span style="color: #818cf8">AaBbCcDd</span>|
+| text-indigo-500 | color: #6366f1 | <span style="color: #6366f1">AaBbCcDd</span>|
+| text-indigo-600 | color: #4f46e5 | <span style="color: #4f46e5">AaBbCcDd</span>|
+| text-indigo-700 | color: #4338ca | <span style="color: #4338ca">AaBbCcDd</span>|
+| text-indigo-800 | color: #3730a3 | <span style="color: #3730a3">AaBbCcDd</span>|
+| text-indigo-900 | color: #312e81 | <span style="color: #312e81">AaBbCcDd</span>|
+| text-purple-50 | color: #f5f3ff | <span style="color: #f5f3ff">AaBbCcDd</span>|
+| text-purple-100 | color: #ede9fe | <span style="color: #ede9fe">AaBbCcDd</span>|
+| text-purple-200 | color: #ddd6fe | <span style="color: #ddd6fe">AaBbCcDd</span>|
+| text-purple-300 | color: #c4b5fd | <span style="color: #c4b5fd">AaBbCcDd</span>|
+| text-purple-400 | color: #a78bfa | <span style="color: #a78bfa">AaBbCcDd</span>|
+| text-purple-500 | color: #8b5cf6 | <span style="color: #8b5cf6">AaBbCcDd</span>|
+| text-purple-600 | color: #7c3aed | <span style="color: #7c3aed">AaBbCcDd</span>|
+| text-purple-700 | color: #6d28d9 | <span style="color: #6d28d9">AaBbCcDd</span>|
+| text-purple-800 | color: #5b21b6 | <span style="color: #5b21b6">AaBbCcDd</span>|
+| text-purple-900 | color: #4c1d95 | <span style="color: #4c1d95">AaBbCcDd</span>|
+| text-pink-50 | color: #fdf2f8 | <span style="color: #fdf2f8">AaBbCcDd</span>|
+| text-pink-100 | color: #fce7f3 | <span style="color: #fce7f3">AaBbCcDd</span>|
+| text-pink-200 | color: #fbcfe8 | <span style="color: #fbcfe8">AaBbCcDd</span>|
+| text-pink-300 | color: #f9a8d4 | <span style="color: #f9a8d4">AaBbCcDd</span>|
+| text-pink-400 | color: #f472b6 | <span style="color: #f472b6">AaBbCcDd</span>|
+| text-pink-500 | color: #ec4899 | <span style="color: #ec4899">AaBbCcDd</span>|
+| text-pink-600 | color: #db2777 | <span style="color: #db2777">AaBbCcDd</span>|
+| text-pink-700 | color: #be185d | <span style="color: #be185d">AaBbCcDd</span>|
+| text-pink-800 | color: #9d174d | <span style="color: #9d174d">AaBbCcDd</span>|
+| text-pink-900 | color: #831843 | <span style="color: #831843">AaBbCcDd</span>|
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:text-black`
+
+*/
+@mixin text-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
+  @each $name, $color in $colors {
+    @if (is-map($color)) {
+      @include text-colors-map($color, #{'-' + $name}, $prefix, $suffix);
+    } @else if $suffix == '.is-active' {
+      #{$prefix}text#{$namePrefix}-#{'' + $name}.is-active,
+      #{$prefix}text#{$namePrefix}-#{'' + $name}:active {
+        color: $color;
+      }
+    } @else if $suffix == '.is-disabled' {
+      #{$prefix}text#{$namePrefix}-#{'' + $name}.is-disabled,
+      #{$prefix}text#{$namePrefix}-#{'' + $name}:disabled {
+        color: $color;
+      }
+    } @else {
+      #{$prefix}text#{$namePrefix}-#{'' + $name}#{$suffix} {
+        color: $color;
+      }
+    }
+  }
+}
+
+@mixin text-colors($prefix: '.', $suffix: '') {
+  #{$prefix}text-transparent#{$suffix} {
+    color: transparent;
+  }
+  #{$prefix}text-current#{$suffix} {
+    color: currentColor;
+  }
+  @include text-colors-map($colors, '', $prefix, $suffix);
+}
+
+@include text-colors();
+@include text-colors('.' + selector-escape('hover:'), ':hover');
+@include text-colors('.' + selector-escape('active:'), '.is-active');
+@include text-colors('.' + selector-escape('focus:'), ':focus');
+@include text-colors('.' + selector-escape('disabled:'), '.is-disabled');
+@include text-colors('.group:hover .' + selector-escape('group-hover:'));
+
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include text-colors('.' + selector-escape($deivce + ':'));
+
+    @include text-colors(
+        '.' + selector-escape($deivce + ':') + selector-escape('hover:'),
+        ':hover'
+    );
+    @include text-colors(
+        '.' + selector-escape($deivce + ':') + selector-escape('active:'),
+        '.is-active'
+    );
+    @include text-colors(
+        '.' + selector-escape($deivce + ':') + selector-escape('focus:'),
+        ':focus'
+    );
+    @include text-colors(
+        '.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
+        '.is-disabled'
+    );
+    @include text-colors(
+        '.group:hover .' + selector-escape($deivce + ':') +
+        selector-escape('group-hover:')
+    );
+  }
+}

package/scss/helper/typography/_text-decoration.scss

@@ -0,0 +1,34 @@
+/*!markdown
+
+---
+title: Text Decoration
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| underline | text-decoration: underline |
+| line-through | text-decoration: line-through |
+| no-underline | text-decoration: none |
+
+
+*/
+@mixin make-text-decoration($prefix: '.') {
+  #{$prefix}underline {
+    text-decoration: underline;
+  }
+  #{$prefix}line-through {
+    text-decoration: line-through;
+  }
+  #{$prefix}no-underline {
+    text-decoration: none;
+  }
+}
+
+@include make-text-decoration();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-text-decoration('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_text-overflow.scss

@@ -0,0 +1,40 @@
+/*!markdown
+
+---
+title: Text OverFlow
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
+| overflow-ellipsis | text-overflow: ellipsis |
+| overflow-clip | text-overflow: clip |
+
+
+
+*/
+
+@mixin make-text-overflow($prefix: '.') {
+  #{$prefix}truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  #{$prefix}overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  #{$prefix}overflow-clip {
+    text-overflow: clip;
+  }
+}
+
+@include make-text-overflow();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-text-overflow('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_text-transform.scss

@@ -0,0 +1,40 @@
+/*!markdown
+
+---
+title: Text Transform
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| uppercase | text-transform: uppercase |
+| lowercase | text-transform: lowercase |
+| capitalize | text-transform: capitalize |
+| normal-case | text-transform: none |
+
+
+
+*/
+@mixin make-text-transform($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'uppercase': uppercase,
+        'lowercase': lowercase,
+        'capitalize': capitalize,
+        'normal-case': none
+      )
+  {
+    #{$prefix}#{$name} {
+      text-transform: $value;
+    }
+  }
+}
+
+@include make-text-transform();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-text-transform('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_vertical-align.scss

@@ -0,0 +1,44 @@
+/*!markdown
+
+---
+title: Vertial Align
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| align-baseline | vertical-align: baseline |
+| align-top | vertical-align: top |
+| align-middle | vertical-align: middle |
+| align-bottom | vertical-align: bottom |
+| align-text-top | vertical-align: text-top |
+| align-text-bottom | vertical-align: text-bottom |
+
+
+
+*/
+@mixin make-vertical-align($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'baseline': baseline,
+        'top': top,
+        'middle': middle,
+        'bottom': bottom,
+        'text-top': text-top,
+        'text-bottom': text-bottom
+      )
+  {
+    #{$prefix}align-#{$name} {
+      vertical-align: $value;
+    }
+  }
+}
+
+@include make-vertical-align();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-vertical-align('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?

package/scss/helper/typography/_whitespace.scss

@@ -0,0 +1,42 @@
+/*!markdown
+
+---
+title: Whitespace
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| white-space-normal | align: normal |
+| white-space-nowrap | white-space: nowrap |
+| white-space-pre | white-space: pre |
+| white-space-pre-line | white-space: pre-line |
+| white-space-pre-wrap | white-space: pre-wrap |
+
+
+
+*/
+@mixin make-whitespace($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        'normal': normal,
+        'nowrap': nowrap,
+        'pre': pre,
+        'pre-line': pre-line,
+        'pre-wrap': pre-wrap
+      )
+  {
+    #{$prefix}white-space-#{$name} {
+      white-space: $value;
+    }
+  }
+}
+
+@include make-whitespace();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-whitespace('.' + selector-escape($deivce + ':'));
+  }
+}
+
+// hover ?