luda 0.1.5

data/assets/stylesheets/luda/core/elements/_table.sass

@@ -0,0 +1,102 @@
++install(shared-element-table)
+
+  .table,
+  .table-border
+    word-break: normal
+    overflow: auto
+    -webkit-overflow-scrolling: touch
+    border-radius: $table-border-radius
+
+  .table table,
+  .table-border table
+    min-width: 100%
+
+  .table thead,
+  .table-border thead
+    background: $table-head-background
+
+  .table tbody tr:nth-child(even),
+  .table-border tbody tr:nth-child(even)
+    background: $table-row-even-background
+
+  .table tbody tr:nth-child(odd),
+  .table-border tbody tr:nth-child(odd)
+    background: $table-row-odd-background
+
+  .table th,
+  .table td,
+  .table-border th,
+  .table-border td
+    vertical-align: top
+    text-align: left
+
+  .table th,
+  .table-border th
+    color: $table-head-color
+    font-weight: 700
+
+  .table td,
+  .table-border td
+    color: $table-body-color
+
+  .table th,
+  .table td
+    padding: $table-cell-padding-rem
+
+  $_table-border-cell-padding-top: null
+  $_table-border-top-width-is-rem: _is-rem(nth($table-border-width, 1))
+  $_table-cell-padding-top: nth($table-cell-padding-rem, 1)
+  $_table-border-top-width: nth($table-border-width, 1)
+  @if $_table-border-top-width-is-rem
+    $_table-border-cell-padding-top: $_table-cell-padding-top - $_table-border-top-width
+  @else
+    $_table-border-cell-padding-top: calc(#{$_table-cell-padding-top} - #{$_table-border-top-width})
+  +_sass-lint-fix-if-else
+
+  .table-border
+    border: $table-border-style $table-border-width $table-border-color
+
+  .table-border th,
+  .table-border td
+    $padding-right: mirror-nth($table-cell-padding-rem, 2)
+    $padding-bottom: mirror-nth($table-cell-padding-rem, 3)
+    $padding-left: mirror-nth($table-cell-padding-rem, 4)
+    padding: $_table-border-cell-padding-top $padding-right $padding-bottom $padding-left
+
+  .table-border td
+    border-top: $table-border-style $table-border-width $table-border-color
+
+  .table-border tbody tr:last-child td
+    $padding-right: mirror-nth($table-cell-padding-rem, 2)
+    $padding-bottom: null
+    $padding-left: mirror-nth($table-cell-padding-rem, 4)
+    $table-cell-padding-bottom: mirror-nth($table-cell-padding-rem, 3)
+    $table-border-bottom-width: mirror-nth($table-border-width, 3)
+    $table-border-bottom-width-is-rem: _is-rem(mirror-nth($table-border-width, 3))
+    @if $table-border-bottom-width-is-rem
+      $padding-bottom: $table-cell-padding-bottom - $table-border-bottom-width
+    @else
+      $padding-bottom: calc(#{$table-cell-padding-bottom} - #{$table-border-bottom-width})
+    padding: $_table-border-cell-padding-top $padding-right $padding-bottom $padding-left
+
+
+
+  .table-nowrap.table th,
+  .table-nowrap.table td,
+  .table-nowrap.table-border th,
+  .table-nowrap.table-border td
+    vertical-align: middle
+    white-space: nowrap
+
+  .table-stripless.table thead,
+  .table-stripless.table-border thead
+    background: none
+
+  .table-stripless.table table tbody tr,
+  .table-stripless.table-border table tbody tr
+    background: none
+
+  .table-hover.table tbody tr:hover,
+  .table-hover.table-border tbody tr:hover
+    color: $table-row-hover-color
+    background: $table-row-hover-background

data/assets/stylesheets/luda/core/elements/_turbolinks-progress-bar.sass

@@ -0,0 +1,5 @@
++install(shared-element-turbolinks-progress-bar)
+
+  .turbolinks-progress-bar
+    height: $turbolinks-progress-bar-height-px
+    background: $turbolinks-progress-bar-background

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

@@ -0,0 +1,105 @@
++install(shared-element-form-check-radio)
+
+  .fm-check label,
+  .fm-radio label
+    padding-left: $form-element-checkfield-height-em + 0.4em
+    line-height: typo-line-height($form-element-typography-size-level)
+    overflow: hidden
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+    user-select: none
+
+  .fm-check label:not(:last-child),
+  .fm-radio label:not(:last-child)
+    margin-right: 1.2em
+
+  .fm-check label input,
+  .fm-radio label input
+    $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
+    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
+    border: $form-element-border-style $form-element-border-width $form-element-border-color
+    background: $form-element-background
+    box-shadow: $form-element-box-shadow
+
+  .fm-check input
+    border-radius: $form-element-border-radius
+    transform: scale(0.9)
+
+  .fm-radio input
+    border-radius: 100%
+
+  .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
+
+  .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
+
+  .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)
+
+  @if $form-element-error-background or $form-element-error-checked-icon-color
+    .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)
+
+  @if $form-element-focus-background or $form-element-focus-checked-icon-color
+    .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)
+
+    @if $form-element-error-background or $form-element-error-checked-icon-color
+      .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)
+
+
+
+  .fm-small.fm-check label,
+  .fm-small.fm-radio label
+    line-height: typo-line-height($form-element-small-typography-size-level)
+
+  .fm-large.fm-check label,
+  .fm-large.fm-radio label
+    line-height: typo-line-height($form-element-large-typography-size-level)
+
+  @if $form-element-small-typography-size-level
+    .fm-small.fm-check label input,
+    .fm-small.fm-radio label input
+      $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: $margin-top
+
+  @if $form-element-large-typography-size-level
+    .fm-large.fm-check label input,
+    .fm-large.fm-radio label input
+      $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: $margin-top

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

@@ -0,0 +1,83 @@
++install(shared-element-form-element)
+
+  .fm
+    display: flex
+    flex-wrap: wrap
+    font-size: typo-size($form-element-typography-size-level)
+    color: $form-element-color
+
+  .fm > *
+    flex: 0 0 auto
+
+  .fm input,
+  .fm select,
+  .fm textarea
+    -webkit-appearance: none
+    -moz-appearance: none
+    appearance: none
+    display: block
+
+  .fm .focus
+    outline: none
+
+  // remove webkit number input buttons
+  .fm ::-webkit-inner-spin-button,
+  .fm ::-webkit-outer-spin-button
+    display: none
+
+  // remove firefox number input buttons
+  .fm [type=number]
+    -moz-appearance: textfield
+
+  // remove firefox range input focus dotted outline
+  .fm [type=range]::-moz-focus-outer
+    border: none
+
+  // remove firefox invalid box shadow
+  .fm :invalid
+    box-shadow: none
+
+  // remove ie select icon
+  .fm select::-ms-expand
+    display: none
+
+  //remove search input cancel button
+  .fm ::-webkit-search-cancel-button
+    -webkit-appearance: none
+
+  // remove datalist icon
+  .fm ::-webkit-calendar-picker-indicator
+    display: none
+
+  // remove safari contact icon
+  .fm ::-webkit-contacts-auto-fill-button
+    display: none !important
+
+  // remove safari password icon
+  .fm ::-webkit-credentials-auto-fill-button
+    display: none !important
+
+  // remove safari caps icon
+  .fm ::-webkit-caps-lock-indicator
+    display: none !important
+
+
+
+  .fm-inline.fm
+    display: inline-flex
+    vertical-align: top
+
+  .fm-small.fm
+    font-size: typo-size($form-element-small-typography-size-level)
+
+  .fm-large.fm
+    font-size: typo-size($form-element-large-typography-size-level)
+
+  .fm-inline.fm:not(.fm-check):not(.fm-radio)
+    width: $form-element-inline-width-rem
+
+  .fm-small.fm-inline.fm:not(.fm-check):not(.fm-radio)
+    width: $form-element-small-inline-width-rem
+
+  .fm-large.fm-inline.fm:not(.fm-check):not(.fm-radio)
+    width: $form-element-large-inline-width-rem

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

@@ -0,0 +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)
+      line-height: typo-line-height($form-element-large-helper-typography-size-level)

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

@@ -0,0 +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
+      +typo-level($form-label-large-typography-size-level, $typography-main-baseline-offset-ratio)

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

@@ -0,0 +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
+    height: $form-element-large-textfield-height-rem