luda 0.1.11 → 0.1.12

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

@@ -63,6 +63,6 @@
     vertical-align: middle
     width: 2em
     margin-right: 1em
-    border-width: $typography-quote-block-cite-lead-height 0 0
+    border-width: $typography-quote-block-cite-line-height 0 0
     content: ""
     border-style: solid

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

@@ -4,13 +4,13 @@
 
     $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
+    $heading-selector: "h#{$type-level},.h#{$type-level}"
+    $baseline-offset-ratio-changed: $typography-heading-baseline-offset-ratio != $typography-main-baseline-offset-ratio
 
-    @if $typography-lead-baseline-offset-ratio and $baseline-offset-ratio-changed
+    @if $typography-heading-baseline-offset-ratio and $baseline-offset-ratio-changed
 
-      #{$lead-selector}
-        +typo-level($type-level, $typography-lead-baseline-offset-ratio)
+      #{$heading-selector}
+        +typo-level($type-level, $typography-heading-baseline-offset-ratio)
         display: block
 
       #{$paragraph-selector}
@@ -19,7 +19,7 @@
 
     @else
 
-      #{$lead-selector},
+      #{$heading-selector},
       #{$paragraph-selector}
         +typo-level($type-level, $typography-main-baseline-offset-ratio)
         display: block
@@ -40,9 +40,9 @@
   .h4,
   .h5,
   .h6
-    color: $typography-lead-color
-    font-family: $typography-lead
-    font-weight: $typography-lead-font-weight
+    color: $typography-heading-color
+    font-family: $typography-heading
+    font-weight: $typography-heading-font-weight
 
 
 

data/assets/stylesheets/luda/_core/mixins/_dropdown.sass

@@ -2,17 +2,19 @@
 
   $class-fix: if($breakpoint, "-#{$breakpoint}", null)
 
-  .dropdown-absolute#{$class-fix}.dropdown-active > .dropdown-menu
-    display: block
+  .dropdown-absolute#{$class-fix} > .dropdown-menu
     position: relative
     z-index: $z-index-much-higher
     margin: 0
     overflow: visible
 
+  .dropdown-absolute#{$class-fix}.dropdown-active > .dropdown-menu
+    display: block
+
   .dropdown-absolute#{$class-fix} > .dropdown-menu > .dropdown-items
     position: absolute
     max-height: $dropdown-absolute-max-height-rem
-    margin: $dropdown-absolute-drop-gap-rem 0 0
+    margin: $dropdown-absolute-active-gap-rem 0 0
     overflow: auto
     -webkit-overflow-scrolling: touch
     background: $dropdown-absolute-fixed-background
@@ -26,15 +28,15 @@
 
   .dropdown-absolute#{$class-fix}.dropdown-top > .dropdown-menu > .dropdown-items
     bottom: 0
-    margin: 0 0 $dropdown-absolute-drop-gap-rem
+    margin: 0 0 $dropdown-absolute-active-gap-rem
 
   .dropdown-absolute#{$class-fix}.dropdown-align-right > .dropdown-menu > .dropdown-items
     right: 0
 
   .dropdown-absolute#{$class-fix}.dropdown-right > .dropdown-menu > .dropdown-items
     left: 100%
-    margin: 0 0 0 $dropdown-absolute-drop-gap-rem
+    margin: 0 0 0 $dropdown-absolute-active-gap-rem
 
   .dropdown-absolute#{$class-fix}.dropdown-left > .dropdown-menu > .dropdown-items
     right: 100%
-    margin: 0 $dropdown-absolute-drop-gap-rem 0 0
+    margin: 0 $dropdown-absolute-active-gap-rem 0 0

data/assets/stylesheets/luda/_core/mixins/_form.sass

@@ -1,14 +1,14 @@
-=form-checkbox-or-radio-background-icon($icon, $icon-color, $background)
+=form-element-checkfield-background($icon, $icon-color, $background)
   background: url(svg-icon($icon, $icon-color)) center / contain no-repeat, $background
 
-=form-row-background-icon($icon, $icon-color, $background)
-  background: url(svg-icon($icon, $icon-color)) right $form-element-text-helvertical-padding-em (center / $form-element-icon-size-em) no-repeat, $background
+=form-element-background($icon, $icon-color, $background)
+  background: url(svg-icon($icon, $icon-color)) right $form-element-horizontal-padding-em (center / $form-element-icon-size-em) no-repeat, $background
 
 =_form-range-track-skin
   background: $form-element-track-background
   border-radius: $form-element-track-border-radius
 
-=_form-range-thumb-styles
+=_form-thumb-styles
   width: $form-element-thumb-width-em
   height: $form-element-thumb-height-em
   border: $form-element-border-style $form-element-border-width $form-element-thumb-border-color
@@ -16,12 +16,12 @@
   border-radius: $form-element-thumb-border-radius
   box-shadow: $form-element-box-shadow
 
-=_form-range-focus-thumb-skin
-  background: $form-element-focus-thumb-background
-  border-color: $form-element-focus-thumb-border-color
-  box-shadow: $form-element-focus-box-shadow
+=_form-thumb-skin-on-focus
+  background: $form-element-thumb-background-on-focus
+  border-color: $form-element-thumb-border-color-on-focus
+  box-shadow: $form-element-box-shadow-on-focus
 
-=_form-range-error-thumb-skin
-  background: $form-element-error-thumb-background
-  border-color: $form-element-error-thumb-border-color
-  box-shadow: $form-element-error-box-shadow
+=_form-thumb-skin-on-error
+  background: $form-element-thumb-background-on-error
+  border-color: $form-element-thumb-border-color-on-error
+  box-shadow: $form-element-box-shadow-on-error

data/assets/stylesheets/luda/_core/mixins/_media-query.sass

@@ -1,4 +1,4 @@
-=_media-query($breakpoints, $breakpoint, $query-rule, $down-value: 0)
+=_media-query($breakpoints, $breakpoint, $query-rule, $minus-value: 0)
   $breakpoint-value: map-get($breakpoints, $breakpoint)
   $query-rule-min: null
   $breakpoint-max-value: null
@@ -10,13 +10,13 @@
     @else
       $query-rule-min: "(min-#{$query-rule}:#{$breakpoint-value})"
 
-  @if $down-value > 0
+  @if $minus-value > 0
     $breakpoints-keys: map-keys($breakpoints)
     $breakpoints-values: map-values($breakpoints)
     $breakpoint-index: index($breakpoints-keys, $breakpoint)
     $breakpoint-max-value: null
     @if $breakpoint-index < length($breakpoints-keys)
-      $breakpoint-max-value: nth($breakpoints-values, $breakpoint-index + 1) - $down-value
+      $breakpoint-max-value: nth($breakpoints-values, $breakpoint-index + 1) - $minus-value
     @else
       $breakpoint-max-value: null
     @if $breakpoint-max-value and $breakpoint-max-value > 0
@@ -46,19 +46,19 @@
 
 
 
-=media-width($breakpoint, $only-breakpoint: false)
-  $down-value: if($only-breakpoint, 1, 0)
-  +_media-query($breakpoint-width-pxs, $breakpoint, width, $down-value)
+=media-width($breakpoint, $less-than-next: false)
+  $minus-value: if($less-than-next, 1, 0)
+  +_media-query($breakpoint-width-pxs, $breakpoint, width, $minus-value)
     @content
 
-=media-resolution($breakpoint, $only-breakpoint: false)
-  $down-value: if($only-breakpoint, 9.6, 0)
-  +_media-query($breakpoint-resolutions, $breakpoint, resolution, $down-value)
+=media-resolution($breakpoint, $less-than-next: false)
+  $minus-value: if($less-than-next, 9.6, 0)
+  +_media-query($breakpoint-resolutions, $breakpoint, resolution, $minus-value)
     @content
 
-=media-aspect-ratio($breakpoint, $only-breakpoint: false)
-  $down-value: if($only-breakpoint, 0.0001, 0)
-  +_media-query($breakpoint-aspect-ratios, $breakpoint, aspect-ratio, $down-value)
+=media-aspect-ratio($breakpoint, $less-than-next: false)
+  $minus-value: if($less-than-next, 0.0001, 0)
+  +_media-query($breakpoint-aspect-ratios, $breakpoint, aspect-ratio, $minus-value)
     @content
 
 =media-print

data/assets/stylesheets/luda/_core/mixins/_typography.sass

@@ -7,14 +7,14 @@
   font-size: typo-size($type-level)
   line-height: typo-line-height($type-level)
 
-=typo-link($class: null, $color: null, $hover-color: null, $active-color: null)
-  a.link-#{$class}:not(.btn)
+=typo-link($name: null, $color: null, $hover-color: null, $active-color: null)
+  a.link-#{$name}:not(.btn)
     color: $color
 
-  a.link-#{$class}:not(.btn):hover
+  a.link-#{$name}:not(.btn):hover
     color: $hover-color
 
-  a.link-#{$class}:not(.btn):active
+  a.link-#{$name}:not(.btn):active
     color: $active-color
 
 =font-face($family: null, $style: normal, $weight: 400, $locals: null, $urls: null, $unicodes: null)

data/assets/stylesheets/luda/_core/patterns/_breadcrumb.sass

@@ -8,8 +8,8 @@
     color: $breadcrumb-color
 
   .breadcrumb li:not(:first-child)::before
-    padding: $breadcrumb-children-padding-em
-    content: $breadcrumb-children-spliter
+    padding: $breadcrumb-spliter-padding-em
+    content: $breadcrumb-spliter
 
   .breadcrumb a
     text-decoration: none

data/assets/stylesheets/luda/_core/patterns/_button-group.sass

@@ -18,7 +18,7 @@
 
   .btns-x.btns-margin [class*=btn-],
   .btns-y.btns-margin [class*=btn-]
-    margin: $button-group-children-margin-rem
+    margin: $button-group-buttons-margin-rem
 
   .btns-x:not(.btns-margin),
   .btns-y:not(.btns-margin)

data/assets/stylesheets/luda/_core/patterns/_button-icon.sass

@@ -41,7 +41,7 @@
 
 
   .btn-large[class*=btn-].btn-ico-top
-    height: $button-large-icon-top-height-rem
+    height: $button-icon-top-large-height-rem
 
   .btn-small[class*=btn-].btn-ico-top
-    height: $button-small-icon-top-height-rem
+    height: $button-icon-top-small-height-rem

data/assets/stylesheets/luda/_core/patterns/_carousel.sass

@@ -17,23 +17,23 @@
   .carousel-indicators
     display: flex
     position: absolute
-    top: $carousel-control-indicators-top-rem
-    right: $carousel-control-indicators-right-rem
+    top: $carousel-indicators-top-spacing-rem
+    right: $carousel-indicators-right-spacing-rem
     z-index: $z-index-higher
     justify-content: center
 
   .carousel-indicators .btn
-    height: $carousel-control-indicator-height-rem
+    height: $carousel-indicator-height-rem
     font-size: 0
-    opacity: $carousel-control-disabled-opacity
+    opacity: $carousel-controls-disabled-opacity
     outline-offset: $carousel-indicator-outline-offset-px
-    transition: opacity $carousel-control-opacity-transition-duration $carousel-control-opacity-transition-timing-function
+    transition: opacity $carousel-controls-opacity-transition-duration $carousel-controls-opacity-transition-timing-function
 
   .carousel-indicators.btns-x.btns-margin .btn:last-child
     margin-right: 0
 
   .carousel-indicators .btn[disabled]
-    opacity: $carousel-control-opacity
+    opacity: $carousel-controls-opacity
 
   .carousel-item,
   .carousel-figure
@@ -72,7 +72,7 @@
       z-index: $z-index-higher
       margin: auto
       opacity: 0
-      transition: opacity $carousel-control-opacity-transition-duration $carousel-control-opacity-transition-timing-function
+      transition: opacity $carousel-controls-opacity-transition-duration $carousel-controls-opacity-transition-timing-function
 
     .carousel-prev.btn-text-light,
     .carousel-next.btn-text-light
@@ -82,23 +82,23 @@
     .carousel-box:hover > .carousel-next,
     .carousel-prev.focus,
     .carousel-next.focus
-      opacity: $carousel-control-opacity
+      opacity: $carousel-controls-opacity
 
     .carousel-box:hover > .carousel-prev[disabled],
     .carousel-box:hover > .carousel-next[disabled],
     .carousel-prev.focus[disabled],
     .carousel-next.focus[disabled]
-      opacity: $carousel-control-disabled-opacity
+      opacity: $carousel-controls-disabled-opacity
 
     .carousel-prev
-      left: $carousel-breakpoint-control-prev-left-rem
+      left: $carousel-breakpoint-prev-button-left-spacing-rem
 
     .carousel-next
-      right: $carousel-breakpoint-control-next-right-rem
+      right: $carousel-breakpoint-next-button-right-spacing-rem
 
     .carousel-indicators
-      top: $carousel-breakpoint-control-indicators-top-rem
-      right: $carousel-breakpoint-control-indicators-right-rem
+      top: $carousel-breakpoint-indicators-top-spacing-rem
+      right: $carousel-breakpoint-indicators-right-spacing-rem
 
     .carousel-description
       padding: $carousel-breakpoint-description-padding-rem

data/assets/stylesheets/luda/_core/patterns/_dropdown.sass

@@ -47,8 +47,12 @@
 
 
 
-  .dropdown-fixed.dropdown-active > .dropdown-menu
+  .dropdown-fixed > .dropdown-menu
     +overlay
+    display: none
+
+  .dropdown-fixed.dropdown-active > .dropdown-menu
+    display: flex
 
   .dropdown-fixed > .dropdown-menu > .dropdown-items
     +overlay-body

data/assets/stylesheets/luda/_core/patterns/_form-dropdown.sass

@@ -12,10 +12,10 @@
         order: -1
 
       > .dropdown-menu > .dropdown-items
-        margin-top: $form-element-textfield-height-rem + $dropdown-absolute-drop-gap-rem
+        margin-top: $form-element-height-rem + $dropdown-absolute-active-gap-rem
 
       > .fm-small ~ .dropdown-menu > .dropdown-items
-        margin-top: $form-element-small-textfield-height-rem + $dropdown-absolute-drop-gap-rem
+        margin-top: $form-element-small-height-rem + $dropdown-absolute-active-gap-rem
 
       > .fm-large ~ .dropdown-menu > .dropdown-items
-        margin-top: $form-element-large-textfield-height-rem + $dropdown-absolute-drop-gap-rem
+        margin-top: $form-element-large-height-rem + $dropdown-absolute-active-gap-rem

data/assets/stylesheets/luda/_core/patterns/_form-group.sass

@@ -13,34 +13,34 @@
 
   .fm-group .fm-label-nowrap.fm-label,
   .fm-group .fm-label-wrap.fm-label
-    height: $form-element-textfield-height-rem
+    height: $form-element-height-rem
     padding-top: 0
     padding-bottom: 0
     overflow: hidden
     text-overflow: ellipsis
 
   .fm-group .fm-label-nowrap.fm-label
-    line-height: $form-element-textfield-height-rem
+    line-height: $form-element-height-rem
     white-space: nowrap
 
   .fm-group .fm-label-small.fm-label-nowrap.fm-label
-    height: $form-element-small-textfield-height-rem
-    line-height: $form-element-small-textfield-height-rem
+    height: $form-element-small-height-rem
+    line-height: $form-element-small-height-rem
 
   .fm-group .fm-label-large.fm-label-nowrap.fm-label
-    height: $form-element-large-textfield-height-rem
-    line-height: $form-element-large-textfield-height-rem
+    height: $form-element-large-height-rem
+    line-height: $form-element-large-height-rem
 
   .fm-group .fm-label-wrap.fm-label
-    line-height: $form-element-textfield-height-rem / 2
+    line-height: $form-element-height-rem / 2
 
   .fm-group .fm-label-small.fm-label-wrap.fm-label
-    height: $form-element-small-textfield-height-rem
-    line-height: $form-element-small-textfield-height-rem / 2
+    height: $form-element-small-height-rem
+    line-height: $form-element-small-height-rem / 2
 
   .fm-group .fm-label-large.fm-label-wrap.fm-label
-    height: $form-element-large-textfield-height-rem
-    line-height: $form-element-large-textfield-height-rem / 2
+    height: $form-element-large-height-rem
+    line-height: $form-element-large-height-rem / 2
 
 
 

data/assets/stylesheets/luda/_core/patterns/_form-icon.sass

@@ -3,12 +3,12 @@
   .fm.fm-ico-left input,
   .fm.fm-ico-left select[multiple],
   .fm.fm-ico-left textarea
-    padding-left: $form-element-text-helvertical-padding-em * 2 + $form-element-icon-size-em
+    padding-left: $form-element-horizontal-padding-em * 2 + $form-element-icon-size-em
 
   .fm.fm-ico-right input,
   .fm.fm-ico-right select[multiple],
   .fm.fm-ico-right textarea
-    padding-right: $form-element-text-helvertical-padding-em * 2 + $form-element-icon-size-em
+    padding-right: $form-element-horizontal-padding-em * 2 + $form-element-icon-size-em
 
 
 
@@ -21,24 +21,18 @@
   .fm-select.fm-ico-right[data-error] input,
   .fm-file.fm-ico-right[data-error] input,
   .fm-search.fm-ico-right[data-error] input
-    background: form-error-background()
+    background: form-element-background-on-error()
 
   .fm.fm-select.fm-ico-right .focus ~ input,
   .fm.fm-select.fm-ico-right input.focus,
   .fm.fm-file.fm-ico-right .focus ~ input,
   .fm.fm-search.fm-ico-right input.focus
-    background: form-focus-background()
-
-  .fm.fm-select[data-error].fm-ico-right .focus ~ input,
-  .fm.fm-select[data-error].fm-ico-right input.focus,
-  .fm.fm-file[data-error].fm-ico-right .focus ~ input,
-  .fm.fm-search[data-error].fm-ico-right input.focus
-    background: form-error-focus-background()
+    background: form-element-background-on-focus()
   // sass-lint:enable empty-args
 
 
   .fm > .ico
-    margin-top: _form-icon-margin-top($form-element-textfield-height-rem, $form-element-typography-size-level)
+    margin-top: _form-icon-margin-top($form-element-height-rem, $form-element-typography-size-level)
     font-size: $form-element-icon-size-em
     pointer-events: none
     color: $form-element-icon-color
@@ -47,27 +41,27 @@
 
 
   .fm.fm-ico-left > .ico
-    margin-left: $form-element-text-helvertical-padding-em / strip-unit($form-element-icon-size-em)
+    margin-left: $form-element-horizontal-padding-em / strip-unit($form-element-icon-size-em)
 
   .fm.fm-ico-right > .ico
-    margin-right: $form-element-text-helvertical-padding-em / strip-unit($form-element-icon-size-em)
+    margin-right: $form-element-horizontal-padding-em / strip-unit($form-element-icon-size-em)
     margin-left: auto
 
 
 
   .fm-small.fm > .ico
-    margin-top: _form-icon-margin-top($form-element-small-textfield-height-rem, $form-element-small-typography-size-level)
+    margin-top: _form-icon-margin-top($form-element-small-height-rem, $form-element-small-typography-size-level)
 
   .fm-large.fm > .ico
-    margin-top: _form-icon-margin-top($form-element-large-textfield-height-rem, $form-element-large-typography-size-level)
+    margin-top: _form-icon-margin-top($form-element-large-height-rem, $form-element-large-typography-size-level)
 
 
 
   .fm[data-error] .ico
-    color: $form-element-error-icon-color
-    fill: $form-element-error-icon-color
+    color: $form-element-icon-color-on-error
+    fill: $form-element-icon-color-on-error
 
   .fm.fm-ico-left .focus ~ .ico,
   .fm.fm-ico-right .focus ~ .ico
-    color: $form-element-focus-icon-color
-    fill: $form-element-focus-icon-color
+    color: $form-element-icon-color-on-focus
+    fill: $form-element-icon-color-on-focus