luda 0.1.5

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

@@ -0,0 +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
+    color: $form-element-focus-placeholder-color

data/assets/stylesheets/luda/core/elements/typography/_code.sass

@@ -0,0 +1,27 @@
++install(shared-element-typography-code)
+
+  code,
+  kbd,
+  samp
+    padding: $typography-code-padding-em
+    line-height: 0
+    color: $typography-code-color
+    font-family: $typography-code
+    background: $typography-code-background
+    border-radius: $typography-code-border-radius
+
+  .code
+    padding: $typography-code-block-padding-rem
+    background: $typography-code-background
+    border-radius: $typography-code-border-radius
+
+  .code code,
+  .code samp,
+  .code kbd
+    $baseline-offset: existing($typography-code-baseline-offset-ratio, $typography-main-baseline-offset-ratio)
+    +typo-level($typography-block-code-size-level, $baseline-offset)
+    display: block
+    padding-right: 0
+    padding-left: 0
+    background: none
+    border-radius: if($typography-code-border-radius, 0, null)

data/assets/stylesheets/luda/core/elements/typography/_link.sass

@@ -0,0 +1,15 @@
++install(shared-element-typography-link)
+
+  a:not(.btn)
+    color: $typography-link-color
+    text-decoration: $typography-link-text-decoration
+
+  a:not(.btn):hover
+    color: $typography-link-hover-color
+    text-decoration: $typography-link-hover-text-decoration
+
+  a:not(.btn):active
+    color: $typography-link-active-color
+    text-decoration: $typography-link-active-text-decoration
+
+  +typo-link(light, $typography-link-light-color, $typography-link-light-hover-color, $typography-link-light-active-color)

data/assets/stylesheets/luda/core/elements/typography/_list.sass

@@ -0,0 +1,14 @@
++install(shared-element-typography-list)
+
+  ul,
+  ol
+    list-style-position: outside
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol
+    padding: $typography-list-nested-padding-em
+
+  dt
+    font-weight: 700

data/assets/stylesheets/luda/core/elements/typography/_mark.sass

@@ -0,0 +1,7 @@
++install(shared-element-typography-mark)
+
+  mark
+    padding: $typography-mark-padding-em
+    color: $typography-mark-color
+    background: $typography-mark-background
+    border-radius: $typography-mark-border-radius

data/assets/stylesheets/luda/core/elements/typography/_quote.sass

@@ -0,0 +1,68 @@
++install(shared-element-typography-quote)
+
+  q,
+  .quote p
+    font-family: $typography-quote
+    font-style: italic
+
+  q
+    line-height: 0
+
+  q::before
+    padding: 0 0.3em
+    content: '"'
+
+  q::after
+    padding: 0 0.3em 0 0.2em
+    content: '"'
+
+  q q::before
+    content: "'"
+
+  q q::after
+    content: "'"
+
+  cite
+    color: $typography-cite-color
+    font-style: italic
+    font-weight: 700
+
+  .quote
+    padding: $typography-quote-block-padding-rem
+
+  .quote p
+    $offset-diff: $typography-quote-baseline-offset-ratio != $typography-main-baseline-offset-ratio
+    $size-diff: $typography-block-quote-size-level != $typography-main-size-level
+    @if $typography-quote-baseline-offset-ratio and $offset-diff or $size-diff
+      $baseline-offset-ratio: existing($typography-quote-baseline-offset-ratio, $typography-main-baseline-offset-ratio)
+      +typo-level($typography-block-quote-size-level, $baseline-offset-ratio)
+    margin: $typography-quote-block-p-margin-rem
+
+  .quote p:first-child
+    position: relative
+
+  .quote p:first-child::before
+    display: block
+    position: absolute
+    top: 0
+    left: - mirror-nth($typography-quote-block-padding-rem, 4)
+    width: mirror-nth($typography-quote-block-padding-rem, 4)
+    font-size: 3em
+    text-align: center
+    content: '"'
+    color: $typography-cite-color
+
+  .quote p:last-of-type
+    margin-bottom: 0
+
+  .quote footer
+    color: $typography-cite-color
+
+  .quote footer::before
+    display: inline-block
+    vertical-align: middle
+    width: 2em
+    margin-right: 1em
+    border-width: $typography-quote-block-cite-lead-height 0 0
+    content: ""
+    border-style: solid

data/assets/stylesheets/luda/core/elements/typography/_sub-sup.sass

@@ -0,0 +1,16 @@
++install(shared-element-typography-sub-sup)
+
+  sub,
+  sup
+    vertical-align: baseline
+    position: relative
+    font-size: $typography-sub-sup-size
+    line-height: 0
+
+  sub
+    bottom: $typography-sub-bottom-offset-em
+    font-feature-settings: "subs" 1
+
+  sup
+    top: $typography-sup-top-offset-em
+    font-feature-settings: "sups" 1

data/assets/stylesheets/luda/core/elements/typography/_typography.sass

@@ -0,0 +1,52 @@
++install(shared-element-typography-typography)
+
+  @for $type-level from 1 through 6
+
+    $is-default-typo-level: $type-level == $typography-main-size-level
+    $paragraph-selector: if($is-default-typo-level, "p,.p#{$type-level}", ".p#{$type-level}")
+    $lead-selector: "h#{$type-level},.h#{$type-level}"
+    $baseline-offset-ratio-changed: $typography-lead-baseline-offset-ratio != $typography-main-baseline-offset-ratio
+
+    @if $typography-lead-baseline-offset-ratio and $baseline-offset-ratio-changed
+
+      #{$lead-selector}
+        +typo-level($type-level, $typography-lead-baseline-offset-ratio)
+        display: block
+
+      #{$paragraph-selector}
+        +typo-level($type-level, $typography-main-baseline-offset-ratio)
+        display: block
+
+    @else
+
+      #{$lead-selector},
+      #{$paragraph-selector}
+        +typo-level($type-level, $typography-main-baseline-offset-ratio)
+        display: block
+
+  +_sass-lint-fix-if-else
+
+
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6
+    color: $typography-lead-color
+    font-family: $typography-lead
+    font-weight: $typography-lead-font-weight
+
+
+
+  .typo-inline
+    display: inline !important
+    padding: 0 !important
+    line-height: 0 !important

data/assets/stylesheets/luda/core/mixins/_browser.sass

@@ -0,0 +1,15 @@
+=browser-firefox
+  @-moz-document url-prefix()
+    @content
+
+=browser-ios-safari
+  @supports (-webkit-overflow-scrolling: touch)
+    @content
+
+=browser-edge
+  @supports (-ms-ime-align: auto)
+    @content
+
+=browser-chrome-and-opera
+  @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)
+    @content

data/assets/stylesheets/luda/core/mixins/_button.sass

@@ -0,0 +1,90 @@
+=button-solid($name: null, $color: null, $hover-color: null, $active-color: null, $background: null, $hover-background: null, $active-background: null, $border-color: null, $hover-border-color: null, $active-border-color: null, $box-shadow: null, $hover-box-shadow: null, $active-box-shadow: null)
+
+  .btn.btn-#{$name},
+  .btn-check.btn-#{$name} label,
+  .btn-radio.btn-#{$name} label,
+  .btn-file.btn-#{$name} label
+    color: $color
+    background: $background
+    border-color: existing($border-color, transparent)
+    box-shadow: $box-shadow
+
+  .btn.btn-#{$name}:hover,
+  .btn-file.btn-#{$name} input:hover ~ label
+    color: $hover-color
+    background: $hover-background
+    border-color: $hover-border-color
+    box-shadow: $hover-box-shadow
+
+  .btn.btn-#{$name}:active,
+  .btn.btn-#{$name}.btn-active,
+  .btn-file.btn-#{$name} input:active ~ label,
+  .btn-check.btn-#{$name} input:checked ~ label,
+  .btn-radio.btn-#{$name} input:checked ~ label,
+  .btn-check.btn-#{$name}.btn-active input ~ label,
+  .btn-radio.btn-#{$name}.btn-active input ~ label,
+  .btn-file.btn-#{$name}.btn-active input ~ label
+    color: $active-color
+    background: $active-background
+    border-color: $active-border-color
+    box-shadow: $active-box-shadow
+
+
+
+=button-hollow($name: null, $color: null, $hover-color: null, $active-color: null, $hover-background: null, $active-background: null, $border-color: null, $hover-border-color: null, $active-border-color: null, $box-shadow: null, $hover-box-shadow: null, $active-box-shadow: null)
+
+  .btn.btn-hollow-#{$name},
+  .btn-check.btn-hollow-#{$name} label,
+  .btn-radio.btn-hollow-#{$name} label,
+  .btn-file.btn-hollow-#{$name} label
+    color: $color
+    border-color: existing($border-color, $color)
+    box-shadow: $box-shadow
+
+  .btn.btn-hollow-#{$name}:hover,
+  .btn-file.btn-hollow-#{$name} input:hover ~ label
+    color: $hover-color
+    background: $hover-background
+    border-color: $hover-border-color
+    box-shadow: $hover-box-shadow
+
+  .btn.btn-hollow-#{$name}:active,
+  .btn.btn-hollow-#{$name}.btn-active,
+  .btn-file.btn-hollow-#{$name} input:active ~ label,
+  .btn-check.btn-hollow-#{$name} input:checked ~ label,
+  .btn-radio.btn-hollow-#{$name} input:checked ~ label,
+  .btn-check.btn-hollow-#{$name}.btn-active input ~ label,
+  .btn-radio.btn-hollow-#{$name}.btn-active input ~ label,
+  .btn-file.btn-hollow-#{$name}.btn-active input ~ label
+    color: $active-color
+    background: $active-background
+    border-color: $active-border-color
+    box-shadow: $active-box-shadow
+
+
+
+=button-text($name: null, $color: null, $hover-color: null, $active-color: null, $text-shadow: null, $hover-text-shadow: null, $active-text-shadow: null)
+
+  .btn.btn-text-#{$name},
+  .btn-check.btn-text-#{$name},
+  .btn-radio.btn-text-#{$name},
+  .btn-file.btn-text-#{$name}
+    color: $color
+    text-shadow: $text-shadow
+    border-color: transparent
+
+  .btn.btn-text-#{$name}:hover,
+  .btn-file.btn-text-#{$name} input:hover ~ label
+    color: $hover-color
+    text-shadow: $hover-text-shadow
+
+  .btn.btn-text-#{$name}:active,
+  .btn.btn-text-#{$name}.btn-active,
+  .btn-file.btn-text-#{$name} input:active ~ label,
+  .btn-check.btn-text-#{$name} input:checked ~ label,
+  .btn-radio.btn-text-#{$name} input:checked ~ label,
+  .btn-check.btn-text-#{$name}.btn-active input ~ label,
+  .btn-radio.btn-text-#{$name}.btn-active input ~ label,
+  .btn-file.btn-text-#{$name}.btn-active input ~ label
+    color: $active-color
+    text-shadow: $active-text-shadow