luda 0.1.5 → 0.1.6

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

@@ -1,66 +1,66 @@
-+install(shared-element-form-helper)
-
-  .fm ::-webkit-input-placeholder
-    color: $form-element-placeholder-color
-
-  .fm ::-moz-placeholder
-    color: $form-element-placeholder-color
-
-  .fm :-ms-input-placeholder
-    color: $form-element-placeholder-color
-
-  .fm[data-error] ::-webkit-input-placeholder
-    color: $form-element-error-placeholder-color
-
-  .fm[data-error] ::-moz-placeholder
-    color: $form-element-error-placeholder-color
-
-  .fm[data-error] :-ms-input-placeholder
-    color: $form-element-error-placeholder-color
-
-  .fm input.focus::-webkit-input-placeholder,
-  .fm textarea.focus::-webkit-input-placeholder,
-  .fm .focus ~ input::-webkit-input-placeholder
-    color: $form-element-focus-placeholder-color
-
-  .fm input.focus::-moz-placeholder,
-  .fm textarea.focus::-moz-placeholder,
-  .fm .focus ~ input::-moz-placeholder
-    color: $form-element-focus-placeholder-color
-
-  .fm input.focus:-ms-input-placeholder,
-  .fm textarea.focus:-ms-input-placeholder,
-  .fm .focus ~ input:-ms-input-placeholder
-    color: $form-element-focus-placeholder-color
-
-
-
-  .fm[data-error]::after,
-  .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)
-
-  .fm[data-hint]::after
-    content: attr(data-hint)
-    color: $form-element-hint-message-color
-
-  .fm[data-error]::after,
-  .fm[data-hint][data-error]::after
-    content: attr(data-error)
-    color: $form-element-error-message-color
-
-
-
-  @if $form-element-small-helper-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)
-
-  @if $form-element-large-helper-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)
++install(shared-element-form-helper)
+
+  .fm ::-webkit-input-placeholder
+    color: $form-element-placeholder-color
+
+  .fm ::-moz-placeholder
+    color: $form-element-placeholder-color
+
+  .fm :-ms-input-placeholder
+    color: $form-element-placeholder-color
+
+  .fm[data-error] ::-webkit-input-placeholder
+    color: $form-element-error-placeholder-color
+
+  .fm[data-error] ::-moz-placeholder
+    color: $form-element-error-placeholder-color
+
+  .fm[data-error] :-ms-input-placeholder
+    color: $form-element-error-placeholder-color
+
+  .fm input.focus::-webkit-input-placeholder,
+  .fm textarea.focus::-webkit-input-placeholder,
+  .fm .focus ~ input::-webkit-input-placeholder
+    color: $form-element-focus-placeholder-color
+
+  .fm input.focus::-moz-placeholder,
+  .fm textarea.focus::-moz-placeholder,
+  .fm .focus ~ input::-moz-placeholder
+    color: $form-element-focus-placeholder-color
+
+  .fm input.focus:-ms-input-placeholder,
+  .fm textarea.focus:-ms-input-placeholder,
+  .fm .focus ~ input:-ms-input-placeholder
+    color: $form-element-focus-placeholder-color
+
+
+
+  .fm[data-error]::after,
+  .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)
+
+  .fm[data-hint]::after
+    content: attr(data-hint)
+    color: $form-element-hint-message-color
+
+  .fm[data-error]::after,
+  .fm[data-hint][data-error]::after
+    content: attr(data-error)
+    color: $form-element-error-message-color
+
+
+
+  @if $form-element-small-helper-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)
+
+  @if $form-element-large-helper-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)

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

@@ -1,20 +1,20 @@
-+install(shared-element-form-label)
-
-  .fm-label
-    +typo-level($form-label-typography-size-level, $typography-main-baseline-offset-ratio)
-    display: block
-    color: $form-label-color
-
-
-
-  .fm-label-required.fm-label::after
-    content: $form-label-required-content
-    color: $form-label-required-color
-
-  @if $form-label-small-typography-size-level
-    .fm-label-small.fm-label
-      +typo-level($form-label-small-typography-size-level, $typography-main-baseline-offset-ratio)
-
-  @if $form-label-large-typography-size-level
-    .fm-label-large.fm-label
++install(shared-element-form-label)
+
+  .fm-label
+    +typo-level($form-label-typography-size-level, $typography-main-baseline-offset-ratio)
+    display: block
+    color: $form-label-color
+
+
+
+  .fm-label-required.fm-label::after
+    content: $form-label-required-content
+    color: $form-label-required-color
+
+  @if $form-label-small-typography-size-level
+    .fm-label-small.fm-label
+      +typo-level($form-label-small-typography-size-level, $typography-main-baseline-offset-ratio)
+
+  @if $form-label-large-typography-size-level
+    .fm-label-large.fm-label
       +typo-level($form-label-large-typography-size-level, $typography-main-baseline-offset-ratio)

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

@@ -1,92 +1,92 @@
-+install(shared-element-form-range)
-
-  .fm-range input
-    width: 100%
-    height: $form-element-textfield-height-rem
-    background: none
-
-  .fm-range ::-webkit-slider-runnable-track
-    +_form-range-track-skin
-    height: $form-element-track-height-em
-
-  .fm-range ::-moz-range-track
-    +_form-range-track-skin
-    height: $form-element-track-height-em
-
-  .fm-range ::-ms-track
-    height: $form-element-track-height-em
-    color: transparent
-    background: transparent
-
-  .fm-range ::-ms-fill-lower
-    +_form-range-track-skin
-
-  .fm-range ::-ms-fill-upper
-    +_form-range-track-skin
-
-  .fm-range ::-webkit-slider-thumb
-    +_form-range-thumb-styles
-    -webkit-appearance: none
-    -moz-appearance: none
-    appearance: none
-    margin-top: $form-element-track-height-em / 2 - $form-element-thumb-height-em / 2
-
-  +browser-edge
-    .fm-range ::-webkit-slider-thumb
-      margin-top: 0
-
-  .fm-range ::-moz-range-thumb
-    +_form-range-thumb-styles
-
-  .fm-range ::-ms-thumb
-    +_form-range-thumb-styles
-
-  .fm-range ::-ms-tooltip
-    display: none
-
-  .fm-range[data-error] ::-webkit-slider-runnable-track
-    background: $form-element-error-track-background
-
-  .fm-range[data-error] ::-moz-range-track
-    background: $form-element-error-track-background
-
-  .fm-range[data-error] ::-ms-fill-lower
-    background: $form-element-error-track-background
-
-  .fm-range[data-error] ::-ms-fill-upper
-    background: $form-element-error-track-background
-
-  .fm-range[data-error] ::-webkit-slider-thumb
-    +_form-range-error-thumb-skin
-
-  .fm-range[data-error] ::-moz-range-thumb
-    +_form-range-error-thumb-skin
-
-  .fm-range[data-error] ::-ms-thumb
-    +_form-range-error-thumb-skin
-
-  .fm-range input.focus::-webkit-slider-runnable-track
-    background: $form-element-focus-track-background
-
-  .fm-range input.focus::-moz-range-track
-    background: $form-element-focus-track-background
-
-  .fm-range input.focus::-ms-track
-    background: $form-element-focus-track-background
-
-  .fm-range input.focus::-webkit-slider-thumb
-    +_form-range-focus-thumb-skin
-
-  .fm-range input.focus::-moz-range-thumb
-    +_form-range-focus-thumb-skin
-
-  .fm-range input.focus::-ms-thumb
-    +_form-range-focus-thumb-skin
-
-
-
-  .fm-small.fm-range input
-    height: $form-element-small-textfield-height-rem
-
-  .fm-large.fm-range input
++install(shared-element-form-range)
+
+  .fm-range input
+    width: 100%
+    height: $form-element-textfield-height-rem
+    background: none
+
+  .fm-range ::-webkit-slider-runnable-track
+    +_form-range-track-skin
+    height: $form-element-track-height-em
+
+  .fm-range ::-moz-range-track
+    +_form-range-track-skin
+    height: $form-element-track-height-em
+
+  .fm-range ::-ms-track
+    height: $form-element-track-height-em
+    color: transparent
+    background: transparent
+
+  .fm-range ::-ms-fill-lower
+    +_form-range-track-skin
+
+  .fm-range ::-ms-fill-upper
+    +_form-range-track-skin
+
+  .fm-range ::-webkit-slider-thumb
+    +_form-range-thumb-styles
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    margin-top: $form-element-track-height-em / 2 - $form-element-thumb-height-em / 2
+
+  +browser-edge
+    .fm-range ::-webkit-slider-thumb
+      margin-top: 0
+
+  .fm-range ::-moz-range-thumb
+    +_form-range-thumb-styles
+
+  .fm-range ::-ms-thumb
+    +_form-range-thumb-styles
+
+  .fm-range ::-ms-tooltip
+    display: none
+
+  .fm-range[data-error] ::-webkit-slider-runnable-track
+    background: $form-element-error-track-background
+
+  .fm-range[data-error] ::-moz-range-track
+    background: $form-element-error-track-background
+
+  .fm-range[data-error] ::-ms-fill-lower
+    background: $form-element-error-track-background
+
+  .fm-range[data-error] ::-ms-fill-upper
+    background: $form-element-error-track-background
+
+  .fm-range[data-error] ::-webkit-slider-thumb
+    +_form-range-error-thumb-skin
+
+  .fm-range[data-error] ::-moz-range-thumb
+    +_form-range-error-thumb-skin
+
+  .fm-range[data-error] ::-ms-thumb
+    +_form-range-error-thumb-skin
+
+  .fm-range input.focus::-webkit-slider-runnable-track
+    background: $form-element-focus-track-background
+
+  .fm-range input.focus::-moz-range-track
+    background: $form-element-focus-track-background
+
+  .fm-range input.focus::-ms-track
+    background: $form-element-focus-track-background
+
+  .fm-range input.focus::-webkit-slider-thumb
+    +_form-range-focus-thumb-skin
+
+  .fm-range input.focus::-moz-range-thumb
+    +_form-range-focus-thumb-skin
+
+  .fm-range input.focus::-ms-thumb
+    +_form-range-focus-thumb-skin
+
+
+
+  .fm-small.fm-range input
+    height: $form-element-small-textfield-height-rem
+
+  .fm-large.fm-range input
     height: $form-element-large-textfield-height-rem

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

@@ -1,214 +1,214 @@
-+install(shared-element-form-row)
-
-  .fm-text input,
-  .fm-search input,
-  .fm-select input,
-  .fm-file input,
-  .fm-text textarea,
-  .fm-select select
-    width: 100%
-    border: $form-element-border-style $form-element-border-width $form-element-border-color
-    border-radius: $form-element-border-radius
-    box-shadow: $form-element-box-shadow
-
-  .fm-text input,
-  .fm-search input,
-  .fm-select input,
-  .fm-file input,
-  .fm-select select:not([multiple])
-    height: $form-element-textfield-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
-    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
-
-  .fm-search input
-    +form-row-background-icon($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)
-
-  .fm-file input
-    +form-row-background-icon($form-element-add-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
-    line-height: typo-line-height($form-element-typography-size-level)
-    overflow: auto
-    -webkit-overflow-scrolling: touch
-    background: $form-element-background
-
-  .fm-text[data-error] input,
-  .fm-search[data-error] input,
-  .fm-select[data-error] input,
-  .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
-
-  .fm-text[data-error] input,
-  .fm-text[data-error] textarea,
-  .fm-select[data-error] select[multiple]
-    background: $form-element-error-background
-
-  @if $form-element-error-background or $form-element-error-icon-color
-    $icon-color: form-error-icon-color
-    $background: form-error-background
-
-    .fm-search[data-error] input
-      +form-row-background-icon($form-element-search-icon, $icon-color, $background)
-
-    .fm-select[data-error] input
-      +form-row-background-icon($form-element-select-icon, $icon-color, $background)
-
-    .fm-file[data-error] input
-      +form-row-background-icon($form-element-add-icon, $icon-color, $background)
-  +_sass-lint-fix-if-else
-
-  .fm.fm-text input.focus,
-  .fm.fm-search input.focus,
-  .fm.fm-select .focus ~ input,
-  .fm.fm-select input.focus,
-  .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
-
-  .fm.fm-text input.focus,
-  .fm.fm-text textarea.focus,
-  .fm.fm-select select[multiple].focus
-    background: $form-element-focus-background
-
-  @if $form-element-focus-background or $form-element-focus-icon-color
-    $icon-color: form-focus-icon-color
-    $background: form-focus-background
-
-    .fm.fm-search input.focus
-      +form-row-background-icon($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)
-
-    .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
-      $focus-icon-color: form-error-focus-icon-color
-      $focus-background: form-error-focus-background
-
-      .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
-
-
-
-  .fm-small.fm-text input,
-  .fm-small.fm-search input,
-  .fm-small.fm-select input,
-  .fm-small.fm-file input,
-  .fm-small.fm-select select:not([multiple])
-    height: $form-element-small-textfield-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
-    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)
-
-  .fm-large.fm-text input,
-  .fm-large.fm-search input,
-  .fm-large.fm-select input,
-  .fm-large.fm-file input,
-  .fm-large.fm-select select:not([multiple])
-    height: $form-element-large-textfield-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
-    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)
-
-
-
-  .fm-select select:not([multiple]),
-  .fm-file [type=file]
-    width: 100%
-    margin-bottom: - $form-element-textfield-height-rem
-    // opacity: 0
-
-  .fm.fm-select select:not([multiple]),
-  .fm.fm-file [type=file]
-    opacity: 0
-
-  .fm-file [type=file]
-    overflow: hidden
-
-
-
-  .fm-small.fm-select select:not([multiple]),
-  .fm-small.fm-file [type=file]
-    margin-bottom: - $form-element-small-textfield-height-rem
-
-  .fm-large.fm-select select:not([multiple]),
-  .fm-large.fm-file [type=file]
-    margin-bottom: - $form-element-large-textfield-height-rem
-
-
-
-  .fm-select select[multiple] option
-    display: flex
-    align-items: center
-    height: typo-line-height($form-element-typography-size-level)
-    min-height: 0
-    padding: 0
-
-
-
-  .fm-small.fm-select select[multiple] option
-    height: if($form-element-small-typography-size-level, typo-line-height($form-element-small-typography-size-level), null)
-
-  .fm-large.fm-select select[multiple] option
-    height: if($form-element-large-typography-size-level, typo-line-height($form-element-large-typography-size-level), null)
-
-
-
-  .fm-select select[multiple] option.fm-select-multiple-placeholder:disabled
-    overflow: hidden
-    opacity: 1
-    color: $form-element-placeholder-color
-    text-overflow: ellipsis
-
-  .fm-select[data-error] select[multiple] option.fm-select-multiple-placeholder:disabled
-    color: $form-element-error-placeholder-color
-
-  .fm.fm-select select[multiple].focus option.fm-select-multiple-placeholder:disabled
++install(shared-element-form-row)
+
+  .fm-text input,
+  .fm-search input,
+  .fm-select input,
+  .fm-file input,
+  .fm-text textarea,
+  .fm-select select
+    width: 100%
+    border: $form-element-border-style $form-element-border-width $form-element-border-color
+    border-radius: $form-element-border-radius
+    box-shadow: $form-element-box-shadow
+
+  .fm-text input,
+  .fm-search input,
+  .fm-select input,
+  .fm-file input,
+  .fm-select select:not([multiple])
+    height: $form-element-textfield-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
+    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
+
+  .fm-search input
+    +form-row-background-icon($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)
+
+  .fm-file input
+    +form-row-background-icon($form-element-add-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
+    line-height: typo-line-height($form-element-typography-size-level)
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+    background: $form-element-background
+
+  .fm-text[data-error] input,
+  .fm-search[data-error] input,
+  .fm-select[data-error] input,
+  .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
+
+  .fm-text[data-error] input,
+  .fm-text[data-error] textarea,
+  .fm-select[data-error] select[multiple]
+    background: $form-element-error-background
+
+  @if $form-element-error-background or $form-element-error-icon-color
+    $icon-color: form-error-icon-color
+    $background: form-error-background
+
+    .fm-search[data-error] input
+      +form-row-background-icon($form-element-search-icon, $icon-color, $background)
+
+    .fm-select[data-error] input
+      +form-row-background-icon($form-element-select-icon, $icon-color, $background)
+
+    .fm-file[data-error] input
+      +form-row-background-icon($form-element-add-icon, $icon-color, $background)
+  +_sass-lint-fix-if-else
+
+  .fm.fm-text input.focus,
+  .fm.fm-search input.focus,
+  .fm.fm-select .focus ~ input,
+  .fm.fm-select input.focus,
+  .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
+
+  .fm.fm-text input.focus,
+  .fm.fm-text textarea.focus,
+  .fm.fm-select select[multiple].focus
+    background: $form-element-focus-background
+
+  @if $form-element-focus-background or $form-element-focus-icon-color
+    $icon-color: form-focus-icon-color
+    $background: form-focus-background
+
+    .fm.fm-search input.focus
+      +form-row-background-icon($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)
+
+    .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
+      $focus-icon-color: form-error-focus-icon-color
+      $focus-background: form-error-focus-background
+
+      .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
+
+
+
+  .fm-small.fm-text input,
+  .fm-small.fm-search input,
+  .fm-small.fm-select input,
+  .fm-small.fm-file input,
+  .fm-small.fm-select select:not([multiple])
+    height: $form-element-small-textfield-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
+    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)
+
+  .fm-large.fm-text input,
+  .fm-large.fm-search input,
+  .fm-large.fm-select input,
+  .fm-large.fm-file input,
+  .fm-large.fm-select select:not([multiple])
+    height: $form-element-large-textfield-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
+    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)
+
+
+
+  .fm-select select:not([multiple]),
+  .fm-file [type=file]
+    width: 100%
+    margin-bottom: - $form-element-textfield-height-rem
+    // opacity: 0
+
+  .fm.fm-select select:not([multiple]),
+  .fm.fm-file [type=file]
+    opacity: 0
+
+  .fm-file [type=file]
+    overflow: hidden
+
+
+
+  .fm-small.fm-select select:not([multiple]),
+  .fm-small.fm-file [type=file]
+    margin-bottom: - $form-element-small-textfield-height-rem
+
+  .fm-large.fm-select select:not([multiple]),
+  .fm-large.fm-file [type=file]
+    margin-bottom: - $form-element-large-textfield-height-rem
+
+
+
+  .fm-select select[multiple] option
+    display: flex
+    align-items: center
+    height: typo-line-height($form-element-typography-size-level)
+    min-height: 0
+    padding: 0
+
+
+
+  .fm-small.fm-select select[multiple] option
+    height: if($form-element-small-typography-size-level, typo-line-height($form-element-small-typography-size-level), null)
+
+  .fm-large.fm-select select[multiple] option
+    height: if($form-element-large-typography-size-level, typo-line-height($form-element-large-typography-size-level), null)
+
+
+
+  .fm-select select[multiple] option.fm-select-multiple-placeholder:disabled
+    overflow: hidden
+    opacity: 1
+    color: $form-element-placeholder-color
+    text-overflow: ellipsis
+
+  .fm-select[data-error] select[multiple] option.fm-select-multiple-placeholder:disabled
+    color: $form-element-error-placeholder-color
+
+  .fm.fm-select select[multiple].focus option.fm-select-multiple-placeholder:disabled
     color: $form-element-focus-placeholder-color