luda 0.1.11 → 0.1.12

data/assets/stylesheets/luda/_core/behaviors/_focus.sass

@@ -1,7 +1,7 @@
 +install(shared-behavior-focus)
 
-  \:focus
+  html:not([data-focus-disabled]) :focus
     outline: none
 
-  .focus
+  html:not([data-focus-disabled]) .focus
     +_focus

data/assets/stylesheets/luda/_core/elements/_button.sass

@@ -37,7 +37,7 @@
   .btn-file label
     align-items: center
     justify-content: center
-    padding: 0 $button-helvertical-padding-em
+    padding: 0 $button-horizontal-padding-em
     border: $button-border-style $button-border-width
     overflow: hidden
     border-radius: existing($button-border-radius, 0)

data/assets/stylesheets/luda/_core/elements/_grid.sass

@@ -31,9 +31,6 @@
     margin-right: 0
     margin-left: 0
 
-  .grid-edge.container
-    padding: 0
-
 
 
   @each $breakpoint in map-keys($breakpoint-width-pxs)

data/assets/stylesheets/luda/_core/elements/_scrollbar.sass

@@ -3,7 +3,7 @@
   +media-width($scrollbar-width-breakpoint)
 
     html
-      -ms-overflow-style: $scrollbar-ie-edge-overflow-style
+      -ms-overflow-style: $scrollbar-edge-overflow-style
 
   +browser-chrome-and-opera
 
@@ -18,4 +18,10 @@
 
       ::-webkit-scrollbar-thumb
         background: $scrollbar-thumb-background
-        border-radius: $scrollbar-thumb-border-radius
+        border-radius: $scrollbar-thumb-border-radius
+
+      ::-webkit-scrollbar-corner
+        display: none
+
+      ::-webkit-resizer
+        display: none

data/assets/stylesheets/luda/_core/elements/form/_form-check-radio.sass

@@ -3,7 +3,7 @@
   .fm-check label,
   .fm-radio label
     flex: 0 1 auto
-    padding-left: $form-element-checkfield-height-em + 0.4em
+    padding-left: $form-element-checkfield-size-em + 0.4em
     line-height: typo-line-height($form-element-typography-size-level)
     overflow: hidden
     -webkit-user-select: none
@@ -20,15 +20,15 @@
     $line-height-rem: typo-line-height($form-element-typography-size-level)
     $font-size-rem: typo-size($form-element-typography-size-level)
     $line-height-em: $line-height-rem / $font-size-rem * 1em
-    $margin-top: ($line-height-em - $form-element-checkfield-height-em) / 2
-    $margin-left: - $form-element-checkfield-height-em - 0.4em
+    $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
+    $margin-left: - $form-element-checkfield-size-em - 0.4em
     float: left
     margin: $margin-top 0.4em 0 $margin-left
 
   .fm-check input,
   .fm-radio input
-    width: $form-element-checkfield-height-em
-    height: $form-element-checkfield-height-em
+    width: $form-element-checkfield-size-em
+    height: $form-element-checkfield-size-em
     border: $form-element-border-style $form-element-border-width $form-element-border-color
     background: $form-element-background
     box-shadow: $form-element-box-shadow
@@ -42,47 +42,38 @@
 
   .fm-check[data-error] input,
   .fm-radio[data-error] input
-    background: $form-element-error-background
-    border-color: $form-element-error-border-color
-    box-shadow: $form-element-error-box-shadow
+    background: $form-element-background-on-error
+    border-color: $form-element-border-color-on-error
+    box-shadow: $form-element-box-shadow-on-error
 
   .fm.fm-check .focus,
   .fm.fm-radio .focus
-    background: $form-element-focus-background
-    border-color: $form-element-focus-border-color
-    box-shadow: $form-element-focus-box-shadow
+    background: $form-element-background-on-focus
+    border-color: $form-element-border-color-on-focus
+    box-shadow: $form-element-box-shadow-on-focus
 
   .fm.fm-check input:checked,
   .fm.fm-radio input:checked
-    +form-checkbox-or-radio-background-icon($form-element-checked-icon, $form-element-checked-icon-color, $form-element-background)
+    +form-element-checkfield-background($form-element-checked-icon, $form-element-checked-icon-color, $form-element-background)
 
-  @if $form-element-error-background or $form-element-error-checked-icon-color
+  @if $form-element-background-on-error or $form-element-checked-icon-color-on-error
     // sass-lint:disable empty-args
     .fm.fm-check[data-error] input:checked,
     .fm.fm-radio[data-error] input:checked
-      $icon-color: existing($form-element-error-checked-icon-color, $form-element-checked-icon-color)
-      $background: form-error-background()
-      +form-checkbox-or-radio-background-icon($form-element-checked-icon, $icon-color, $background)
+      $icon-color: existing($form-element-checked-icon-color-on-error, $form-element-checked-icon-color)
+      $background: form-element-background-on-error()
+      +form-element-checkfield-background($form-element-checked-icon, $icon-color, $background)
     // sass-lint:enable empty-args
 
-  @if $form-element-focus-background or $form-element-focus-checked-icon-color
+  @if $form-element-background-on-focus or $form-element-checked-icon-color-on-focus
     // sass-lint:disable empty-args
     .fm.fm-check input.focus:checked,
     .fm.fm-radio input.focus:checked
-      $icon-color: existing($form-element-focus-checked-icon-color, $form-element-checked-icon-color)
-      $background: form-focus-background()
-      +form-checkbox-or-radio-background-icon($form-element-checked-icon, $icon-color, $background)
+      $icon-color: existing($form-element-checked-icon-color-on-focus, $form-element-checked-icon-color)
+      $background: form-element-background-on-focus()
+      +form-element-checkfield-background($form-element-checked-icon, $icon-color, $background)
     // sass-lint:enable empty-args
 
-    @if $form-element-error-background or $form-element-error-checked-icon-color
-      // sass-lint:disable empty-args
-      .fm.fm-check[data-error] input.focus:checked,
-      .fm.fm-radio[data-error] input.focus:checked
-        $icon-color: existing($form-element-focus-checked-icon-color, $form-element-error-checked-icon-color)
-        $background: form-error-focus-background()
-        +form-checkbox-or-radio-background-icon($form-element-checked-icon, $icon-color, $background)
-      // sass-lint:enable empty-args
-
 
 
   .fm-small.fm-check label,
@@ -99,7 +90,7 @@
       $line-height-rem: typo-line-height($form-element-small-typography-size-level)
       $typo-size-rem: typo-size($form-element-small-typography-size-level)
       $line-height-em: $line-height-rem / $typo-size-rem * 1em
-      $margin-top: ($line-height-em - $form-element-checkfield-height-em) / 2
+      $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
       margin-top: $margin-top
 
   @if $form-element-large-typography-size-level
@@ -108,5 +99,5 @@
       $line-height-rem: typo-line-height($form-element-large-typography-size-level)
       $typo-size-rem: typo-size($form-element-large-typography-size-level)
       $line-height-em: $line-height-rem / $typo-size-rem * 1em
-      $margin-top: ($line-height-em - $form-element-checkfield-height-em) / 2
+      $margin-top: ($line-height-em - $form-element-checkfield-size-em) / 2
       margin-top: $margin-top

data/assets/stylesheets/luda/_core/elements/form/_form-element.sass

@@ -17,7 +17,7 @@
     appearance: none
     display: block
 
-  .fm .focus
+  html:not([data-focus-disabled]) .fm .focus
     outline: none
 
   // remove webkit number input buttons

data/assets/stylesheets/luda/_core/elements/form/_form-helper.sass

@@ -1,37 +1,37 @@
 +install(shared-element-form-helper)
 
   .fm ::-webkit-input-placeholder
-    color: $form-element-placeholder-color
+    color: $form-placeholder-color
 
   .fm ::-moz-placeholder
-    color: $form-element-placeholder-color
+    color: $form-placeholder-color
 
   .fm :-ms-input-placeholder
-    color: $form-element-placeholder-color
+    color: $form-placeholder-color
 
   .fm[data-error] ::-webkit-input-placeholder
-    color: $form-element-error-placeholder-color
+    color: $form-placeholder-color-on-error
 
   .fm[data-error] ::-moz-placeholder
-    color: $form-element-error-placeholder-color
+    color: $form-placeholder-color-on-error
 
   .fm[data-error] :-ms-input-placeholder
-    color: $form-element-error-placeholder-color
+    color: $form-placeholder-color-on-error
 
   .fm input.focus::-webkit-input-placeholder,
   .fm textarea.focus::-webkit-input-placeholder,
   .fm .focus ~ input::-webkit-input-placeholder
-    color: $form-element-focus-placeholder-color
+    color: $form-placeholder-color-on-focus
 
   .fm input.focus::-moz-placeholder,
   .fm textarea.focus::-moz-placeholder,
   .fm .focus ~ input::-moz-placeholder
-    color: $form-element-focus-placeholder-color
+    color: $form-placeholder-color-on-focus
 
   .fm input.focus:-ms-input-placeholder,
   .fm textarea.focus:-ms-input-placeholder,
   .fm .focus ~ input:-ms-input-placeholder
-    color: $form-element-focus-placeholder-color
+    color: $form-placeholder-color-on-focus
 
 
 
@@ -39,28 +39,28 @@
   .fm[data-hint]::after
     display: block
     width: 100%
-    font-size: typo-size($form-element-helper-typography-size-level)
-    line-height: typo-line-height($form-element-helper-typography-size-level)
+    font-size: typo-size($form-helper-typography-size-level)
+    line-height: typo-line-height($form-helper-typography-size-level)
 
   .fm[data-hint]::after
     content: attr(data-hint)
-    color: $form-element-hint-message-color
+    color: $form-hint-color
 
   .fm[data-error]::after,
   .fm[data-hint][data-error]::after
     content: attr(data-error)
-    color: $form-element-error-message-color
+    color: $form-error-color
 
 
 
-  @if $form-element-small-helper-typography-size-level
+  @if $form-helper-small-typography-size-level
     .fm-small.fm[data-hint]::after,
     .fm-small.fm[data-error]::after
-      font-size: typo-size($form-element-small-helper-typography-size-level)
-      line-height: typo-line-height($form-element-small-helper-typography-size-level)
+      font-size: typo-size($form-helper-small-typography-size-level)
+      line-height: typo-line-height($form-helper-small-typography-size-level)
 
-  @if $form-element-large-helper-typography-size-level
+  @if $form-helper-large-typography-size-level
     .fm-large.fm[data-hint]::after,
     .fm-large.fm[data-error]::after
-      font-size: typo-size($form-element-large-helper-typography-size-level)
-      line-height: typo-line-height($form-element-large-helper-typography-size-level)
+      font-size: typo-size($form-helper-large-typography-size-level)
+      line-height: typo-line-height($form-helper-large-typography-size-level)

data/assets/stylesheets/luda/_core/elements/form/_form-range.sass

@@ -2,7 +2,7 @@
 
   .fm-range input
     width: 100%
-    height: $form-element-textfield-height-rem
+    height: $form-element-height-rem
     background: none
 
   .fm-range ::-webkit-slider-runnable-track
@@ -25,7 +25,7 @@
     +_form-range-track-skin
 
   .fm-range ::-webkit-slider-thumb
-    +_form-range-thumb-styles
+    +_form-thumb-styles
     -webkit-appearance: none
     -moz-appearance: none
     appearance: none
@@ -36,57 +36,57 @@
       margin-top: 0
 
   .fm-range ::-moz-range-thumb
-    +_form-range-thumb-styles
+    +_form-thumb-styles
 
   .fm-range ::-ms-thumb
-    +_form-range-thumb-styles
+    +_form-thumb-styles
 
   .fm-range ::-ms-tooltip
     display: none
 
   .fm-range[data-error] ::-webkit-slider-runnable-track
-    background: $form-element-error-track-background
+    background: $form-element-track-background-on-error
 
   .fm-range[data-error] ::-moz-range-track
-    background: $form-element-error-track-background
+    background: $form-element-track-background-on-error
 
   .fm-range[data-error] ::-ms-fill-lower
-    background: $form-element-error-track-background
+    background: $form-element-track-background-on-error
 
   .fm-range[data-error] ::-ms-fill-upper
-    background: $form-element-error-track-background
+    background: $form-element-track-background-on-error
 
   .fm-range[data-error] ::-webkit-slider-thumb
-    +_form-range-error-thumb-skin
+    +_form-thumb-skin-on-error
 
   .fm-range[data-error] ::-moz-range-thumb
-    +_form-range-error-thumb-skin
+    +_form-thumb-skin-on-error
 
   .fm-range[data-error] ::-ms-thumb
-    +_form-range-error-thumb-skin
+    +_form-thumb-skin-on-error
 
   .fm-range input.focus::-webkit-slider-runnable-track
-    background: $form-element-focus-track-background
+    background: $form-element-track-background-on-focus
 
   .fm-range input.focus::-moz-range-track
-    background: $form-element-focus-track-background
+    background: $form-element-track-background-on-focus
 
   .fm-range input.focus::-ms-track
-    background: $form-element-focus-track-background
+    background: $form-element-track-background-on-focus
 
   .fm-range input.focus::-webkit-slider-thumb
-    +_form-range-focus-thumb-skin
+    +_form-thumb-skin-on-focus
 
   .fm-range input.focus::-moz-range-thumb
-    +_form-range-focus-thumb-skin
+    +_form-thumb-skin-on-focus
 
   .fm-range input.focus::-ms-thumb
-    +_form-range-focus-thumb-skin
+    +_form-thumb-skin-on-focus
 
 
 
   .fm-small.fm-range input
-    height: $form-element-small-textfield-height-rem
+    height: $form-element-small-height-rem
 
   .fm-large.fm-range input
-    height: $form-element-large-textfield-height-rem
+    height: $form-element-large-height-rem

data/assets/stylesheets/luda/_core/elements/form/_form-row.sass

@@ -16,36 +16,36 @@
   .fm-select input,
   .fm-file input,
   .fm-select select:not([multiple])
-    height: $form-element-textfield-height-rem
+    height: $form-element-height-rem
     line-height: normal // fix safari blinking cursor not in input center
 
   .fm-text input,
   .fm-select select:not([multiple])
-    padding: 0 $form-element-text-helvertical-padding-em
+    padding: 0 $form-element-horizontal-padding-em
     background: $form-element-background
 
   .fm-search input,
   .fm-select input,
   .fm-file input
-    $padding-right: $form-element-icon-size-em + $form-element-text-helvertical-padding-em * 2
-    padding: 0 $padding-right 0 $form-element-text-helvertical-padding-em
+    $padding-right: $form-element-icon-size-em + $form-element-horizontal-padding-em * 2
+    padding: 0 $padding-right 0 $form-element-horizontal-padding-em
 
   .fm-search input
-    +form-row-background-icon($form-element-search-icon, $form-element-icon-color, $form-element-background)
+    +form-element-background($form-element-search-icon, $form-element-icon-color, $form-element-background)
 
   .fm-select input
-    +form-row-background-icon($form-element-select-icon, $form-element-icon-color, $form-element-background)
+    +form-element-background($form-element-select-icon, $form-element-icon-color, $form-element-background)
 
   .fm-file input
-    +form-row-background-icon($form-element-add-icon, $form-element-icon-color, $form-element-background)
+    +form-element-background($form-element-file-icon, $form-element-icon-color, $form-element-background)
 
   .fm-text textarea,
   .fm-select select[multiple]
     $padding-top: typo-padding-top($form-element-typography-size-level, $typography-main-baseline-offset-ratio)
     $padding-bottom: typo-padding-bottom($form-element-typography-size-level, $typography-main-baseline-offset-ratio)
-    height: $form-element-textarea-height-rem
-    min-height: $form-element-textarea-height-rem
-    padding: $padding-top $form-element-text-helvertical-padding-em $padding-bottom
+    height: $form-element-multiple-rows-height-rem
+    min-height: $form-element-multiple-rows-height-rem
+    padding: $padding-top $form-element-horizontal-padding-em $padding-bottom
     line-height: typo-line-height($form-element-typography-size-level)
     overflow: auto
     -webkit-overflow-scrolling: touch
@@ -57,29 +57,29 @@
   .fm-file[data-error] input,
   .fm-text[data-error] textarea,
   .fm-select[data-error] select[multiple]
-    color: $form-element-error-color
-    border-color: $form-element-error-border-color
-    box-shadow: $form-element-error-box-shadow
+    color: $form-element-color-on-error
+    border-color: $form-element-border-color-on-error
+    box-shadow: $form-element-box-shadow-on-error
 
   .fm-text[data-error] input,
   .fm-text[data-error] textarea,
   .fm-select[data-error] select[multiple]
-    background: $form-element-error-background
+    background: $form-element-background-on-error
 
-  @if $form-element-error-background or $form-element-error-icon-color
+  @if $form-element-background-on-error or $form-element-icon-color-on-error
     // sass-lint:disable empty-args
-    $icon-color: form-error-icon-color()
-    $background: form-error-background()
+    $icon-color: form-element-icon-color-on-error()
+    $background: form-element-background-on-error()
     // sass-lint:enable empty-args
 
     .fm-search[data-error] input
-      +form-row-background-icon($form-element-search-icon, $icon-color, $background)
+      +form-element-background($form-element-search-icon, $icon-color, $background)
 
     .fm-select[data-error] input
-      +form-row-background-icon($form-element-select-icon, $icon-color, $background)
+      +form-element-background($form-element-select-icon, $icon-color, $background)
 
     .fm-file[data-error] input
-      +form-row-background-icon($form-element-add-icon, $icon-color, $background)
+      +form-element-background($form-element-file-icon, $icon-color, $background)
   +_sass-lint-fix-if-else
 
   .fm.fm-text input.focus,
@@ -89,47 +89,31 @@
   .fm.fm-file .focus ~ input,
   .fm.fm-text textarea.focus,
   .fm.fm-select select[multiple].focus
-    color: $form-element-focus-color
-    border-color: $form-element-focus-border-color
-    box-shadow: $form-element-focus-box-shadow
+    color: $form-element-color-on-focus
+    border-color: $form-element-border-color-on-focus
+    box-shadow: $form-element-box-shadow-on-focus
 
   .fm.fm-text input.focus,
   .fm.fm-text textarea.focus,
   .fm.fm-select select[multiple].focus
-    background: $form-element-focus-background
+    background: $form-element-background-on-focus
 
-  @if $form-element-focus-background or $form-element-focus-icon-color
+  @if $form-element-background-on-focus or $form-element-icon-color-on-focus
     // sass-lint:disable empty-args
-    $icon-color: form-focus-icon-color()
-    $background: form-focus-background()
+    $icon-color: form-element-icon-color-on-focus()
+    $background: form-element-background-on-focus()
     // sass-lint:enable empty-args
 
     .fm.fm-search input.focus
-      +form-row-background-icon($form-element-search-icon, $icon-color, $background)
+      +form-element-background($form-element-search-icon, $icon-color, $background)
 
     .fm.fm-select .focus ~ input,
     .fm.fm-select input.focus
-      +form-row-background-icon($form-element-select-icon, $icon-color, $background)
+      +form-element-background($form-element-select-icon, $icon-color, $background)
 
     .fm.fm-file .focus ~ input
-      +form-row-background-icon($form-element-add-icon, $icon-color, $background)
-
-    @if $form-element-error-background or $form-element-error-icon-color
-      // sass-lint:disable empty-args
-      $focus-icon-color: form-error-focus-icon-color()
-      $focus-background: form-error-focus-background()
-      // sass-lint:enable empty-args
-
-      .fm.fm-search[data-error] input.focus
-        +form-row-background-icon($form-element-search-icon, $focus-icon-color, $focus-background)
-
-      .fm.fm-select[data-error] .focus ~ input,
-      .fm.fm-select[data-error] input.focus
-        +form-row-background-icon($form-element-select-icon, $focus-icon-color, $focus-background)
-
-      .fm.fm-file[data-error] .focus ~ input
-        +form-row-background-icon($form-element-add-icon, $focus-icon-color, $focus-background)
-    +_sass-lint-fix-if-else
+      +form-element-background($form-element-file-icon, $icon-color, $background)
+  +_sass-lint-fix-if-else
 
 
 
@@ -138,12 +122,12 @@
   .fm-small.fm-select input,
   .fm-small.fm-file input,
   .fm-small.fm-select select:not([multiple])
-    height: $form-element-small-textfield-height-rem
+    height: $form-element-small-height-rem
 
   .fm-small.fm-text textarea,
   .fm-small.fm-select select[multiple]
-    height: $form-element-small-textarea-height-rem
-    min-height: $form-element-small-textarea-height-rem
+    height: $form-element-multiple-rows-small-height-rem
+    min-height: $form-element-multiple-rows-small-height-rem
     padding-top: typo-padding-top($form-element-small-typography-size-level, $typography-main-baseline-offset-ratio)
     padding-bottom: typo-padding-bottom($form-element-small-typography-size-level, $typography-main-baseline-offset-ratio)
     line-height: typo-line-height($form-element-small-typography-size-level)
@@ -153,12 +137,12 @@
   .fm-large.fm-select input,
   .fm-large.fm-file input,
   .fm-large.fm-select select:not([multiple])
-    height: $form-element-large-textfield-height-rem
+    height: $form-element-large-height-rem
 
   .fm-large.fm-text textarea,
   .fm-large.fm-select select[multiple]
-    height: $form-element-large-textarea-height-rem
-    min-height: $form-element-large-textarea-height-rem
+    height: $form-element-multiple-rows-large-height-rem
+    min-height: $form-element-multiple-rows-large-height-rem
     padding-top: typo-padding-top($form-element-large-typography-size-level, $typography-main-baseline-offset-ratio)
     padding-bottom: typo-padding-bottom($form-element-large-typography-size-level, $typography-main-baseline-offset-ratio)
     line-height: typo-line-height($form-element-large-typography-size-level)
@@ -168,7 +152,7 @@
   .fm-select select:not([multiple]),
   .fm-file [type=file]
     width: 100%
-    margin-bottom: - $form-element-textfield-height-rem
+    margin-bottom: - $form-element-height-rem
     // opacity: 0
 
   .fm.fm-select select:not([multiple]),
@@ -182,11 +166,11 @@
 
   .fm-small.fm-select select:not([multiple]),
   .fm-small.fm-file [type=file]
-    margin-bottom: - $form-element-small-textfield-height-rem
+    margin-bottom: - $form-element-small-height-rem
 
   .fm-large.fm-select select:not([multiple]),
   .fm-large.fm-file [type=file]
-    margin-bottom: - $form-element-large-textfield-height-rem
+    margin-bottom: - $form-element-large-height-rem
 
 
 
@@ -210,11 +194,11 @@
   .fm-select select[multiple] option.fm-select-multiple-placeholder:disabled
     overflow: hidden
     opacity: 1
-    color: $form-element-placeholder-color
+    color: $form-placeholder-color
     text-overflow: ellipsis
 
   .fm-select[data-error] select[multiple] option.fm-select-multiple-placeholder:disabled
-    color: $form-element-error-placeholder-color
+    color: $form-placeholder-color-on-error
 
   .fm.fm-select select[multiple].focus option.fm-select-multiple-placeholder:disabled
-    color: $form-element-focus-placeholder-color
+    color: $form-placeholder-color-on-focus