luda 0.1.13 → 0.2.0

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

@@ -1,19 +1,17 @@
 +install(shared-element-badge)
 
-  .badge,
-  .badge-baseline
+  .badge
     display: inline-flex
-    position: relative
-    left: $badge-offset-left-em
     align-items: center
-    min-width: $badge-height-em
-    height: $badge-height-em
-    padding: $badge-padding-em
+    min-width: $typography-size-scale-ratio * 1em
+    height: $typography-size-scale-ratio * 1em
+    padding: 0 $badge-horizontal-padding-em
+    margin-left: $badge-margin-left-em
     font-size: 1em / $typography-size-scale-ratio
+    line-height: 0
     white-space: nowrap
     color: $badge-color
     background: $badge-background
     border-radius: 9999px
-
-  .badge
-    top: $badge-offset-top-em
+    transform: scale(1 / $typography-size-scale-ratio)
+    transform-origin: left center

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

@@ -3,9 +3,6 @@
   .baseline
     position: relative
 
-  $_baseline-gradient: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px)
-  $_baseline-background: $_baseline-gradient left top / 100% 1rem repeat-y
-
   .baseline::after
     display: block
     position: absolute
@@ -16,4 +13,7 @@
     z-index: $z-index-highest
     pointer-events: none
     content: ""
-    background: $_baseline-background
+    @if $typography-baseline-divided
+      background: _baseline-background($baseline-height-px, #0ff), _baseline-background($baseline-height-px / 2, #0ff)
+    @else
+      background: _baseline-background($baseline-height-px, #0ff)

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

@@ -14,7 +14,7 @@
     min-width: $button-height-rem
     height: $button-height-rem
     font-size: typo-size($button-typography-size-level)
-    line-height: normal
+    line-height: 1
     white-space: nowrap
     cursor: pointer
     -ms-touch-action: manipulation

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

@@ -2,12 +2,12 @@
 
   .ico
     display: inline-block
-    vertical-align: text-bottom
+    vertical-align: baseline
     position: relative
     width: 1em
     height: 1em
     font-size: $icon-size-em
-    line-height: normal
+    line-height: 1
     overflow: hidden
     -webkit-user-select: none
     -moz-user-select: none
@@ -19,10 +19,6 @@
     background-position: center
     background-size: contain
 
-  +browser-firefox
-    .ico
-      line-height: $icon-firefox-line-height
-
   .ico::before,
   .ico::after
     display: block

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

@@ -33,7 +33,7 @@
   .table th,
   .table-border th
     color: $table-head-color
-    font-weight: 700
+    font-weight: 500
 
   .table td,
   .table-border td
@@ -81,6 +81,14 @@
 
 
 
+  .table-middle.table th,
+  .table-middle.table td,
+  .table-middle.table-border th,
+  .table-middle.table-border td
+    vertical-align: middle
+
+
+
   .table-nowrap.table th,
   .table-nowrap.table td,
   .table-nowrap.table-border th,

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

@@ -4,6 +4,7 @@
     color: $form-placeholder-color
 
   .fm ::-moz-placeholder
+    opacity: 1
     color: $form-placeholder-color
 
   .fm :-ms-input-placeholder
@@ -39,6 +40,7 @@
   .fm[data-hint]::after
     display: block
     width: 100%
+    margin: $form-helper-margin-rem
     font-size: typo-size($form-helper-typography-size-level)
     line-height: typo-line-height($form-helper-typography-size-level)
 

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

@@ -1,7 +1,7 @@
 +install(shared-element-form-label)
 
   .fm-label
-    +typo-level($form-label-typography-size-level, $typography-main-baseline-offset-ratio)
+    +typo-level($form-label-typography-size-level)
     display: block
     color: $form-label-color
 
@@ -13,8 +13,8 @@
 
   @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)
+      +typo-level($form-label-small-typography-size-level)
 
   @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)
+      +typo-level($form-label-large-typography-size-level)

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

@@ -24,11 +24,13 @@
     padding: 0 $form-element-horizontal-padding-em
     background: $form-element-background
 
+  // sass-lint:disable empty-args
   .fm-search input,
   .fm-select input,
   .fm-file input
-    $padding-right: $form-element-icon-size-em + $form-element-horizontal-padding-em * 2
+    $padding-right: _form-icon-size-em() + $form-element-horizontal-padding-em * 2
     padding: 0 $padding-right 0 $form-element-horizontal-padding-em
+  // sass-lint:enable empty-args
 
   .fm-search input
     +form-element-background($form-element-search-icon, $form-element-icon-color, $form-element-background)

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

@@ -11,15 +11,14 @@
     border-radius: $typography-code-border-radius
 
   .code
-    padding: $typography-code-block-padding-rem
+    padding: $typography-block-code-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)
+    +typo-level($typography-block-code-size-level, code)
     display: block
     padding-right: 0
     padding-left: 0

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

@@ -0,0 +1,24 @@
++install(shared-element-typography-heading)
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6
+    color: $typography-heading-color
+    font-family: $typography-heading
+    font-weight: $typography-heading-font-weight
+
+  @for $typo-level from 1 through 6
+
+    h#{$typo-level},
+    .h#{$typo-level}
+      +typo-level($typo-level, heading)
+      display: block

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

@@ -11,4 +11,4 @@
     padding: $typography-list-nested-padding-em
 
   dt
-    font-weight: 700
+    font-weight: 500

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

@@ -0,0 +1,18 @@
++install(shared-element-typography-paragraph)
+
+  .p5
+    +typo-level(5)
+    display: block
+
+  p,
+  .p6
+    +typo-level(6)
+    display: block
+
+  .p7
+    +typo-level(7)
+    display: block
+
+  .p8
+    +typo-level(8)
+    display: block

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

@@ -25,18 +25,14 @@
   cite
     color: $typography-cite-color
     font-style: italic
-    font-weight: 700
+    font-weight: 500
 
   .quote
-    padding: $typography-quote-block-padding-rem
+    padding: $typography-block-quote-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
+    +typo-level($typography-block-quote-size-level, quote)
+    margin: $typography-block-quote-p-margin-rem
 
   .quote p:first-child
     position: relative
@@ -45,10 +41,9 @@
     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
+    left: - mirror-nth($typography-block-quote-padding-rem, 4)
+    width: mirror-nth($typography-block-quote-padding-rem, 4)
+    font-size: 2.5em
     content: '"'
     color: $typography-cite-color
 
@@ -63,6 +58,6 @@
     vertical-align: middle
     width: 2em
     margin-right: 1em
-    border-width: $typography-quote-block-cite-line-height 0 0
+    border-width: $typography-block-quote-cite-line-height 0 0
     content: ""
     border-style: solid

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

@@ -1,51 +1,5 @@
 +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}")
-    $heading-selector: "h#{$type-level},.h#{$type-level}"
-    $baseline-offset-ratio-changed: $typography-heading-baseline-offset-ratio != $typography-main-baseline-offset-ratio
-
-    @if $typography-heading-baseline-offset-ratio and $baseline-offset-ratio-changed
-
-      #{$heading-selector}
-        +typo-level($type-level, $typography-heading-baseline-offset-ratio)
-        display: block
-
-      #{$paragraph-selector}
-        +typo-level($type-level, $typography-main-baseline-offset-ratio)
-        display: block
-
-    @else
-
-      #{$heading-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-heading-color
-    font-family: $typography-heading
-    font-weight: $typography-heading-font-weight
-
-
-
   .typo-inline
     display: inline !important
     padding: 0 !important

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

@@ -0,0 +1,3 @@
+=root-var($prop, $value)
+  @if $prop and $value
+    #{$prop}: $value

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

@@ -12,7 +12,9 @@
     box-shadow: $box-shadow
 
   .btn.btn-#{$name}:hover,
-  .btn-file.btn-#{$name} input:hover ~ label
+  .btn-file.btn-#{$name} input:hover ~ label,
+  .btn-check.btn-#{$name} input:hover ~ label,
+  .btn-radio.btn-#{$name} input:hover ~ label
     color: $hover-color
     background: $hover-background
     border-color: $hover-border-color
@@ -44,7 +46,9 @@
     box-shadow: $box-shadow
 
   .btn.btn-hollow-#{$name}:hover,
-  .btn-file.btn-hollow-#{$name} input:hover ~ label
+  .btn-file.btn-hollow-#{$name} input:hover ~ label,
+  .btn-check.btn-hollow-#{$name} input:hover ~ label,
+  .btn-radio.btn-hollow-#{$name} input:hover ~ label
     color: $hover-color
     background: $hover-background
     border-color: $hover-border-color
@@ -76,7 +80,9 @@
     border-color: transparent
 
   .btn.btn-text-#{$name}:hover,
-  .btn-file.btn-text-#{$name} input:hover ~ label
+  .btn-file.btn-text-#{$name} input:hover ~ label,
+  .btn-check.btn-text-#{$name} input:hover ~ label,
+  .btn-radio.btn-text-#{$name} input:hover ~ label
     color: $hover-color
     text-shadow: $hover-text-shadow
 

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

@@ -1,8 +1,10 @@
 =form-element-checkfield-background($icon, $icon-color, $background)
   background: url(svg-icon($icon, $icon-color)) center / contain no-repeat, $background
 
+// sass-lint:disable empty-args
 =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
+  background: url(svg-icon($icon, $icon-color)) right $form-element-horizontal-padding-em (center / _form-icon-size-em()) no-repeat, $background
+// sass-lint:enable empty-args
 
 =_form-range-track-skin
   background: $form-element-track-background

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

@@ -1,11 +1,8 @@
-=typo-level-vertical-padding($type-level, $baseline-offset)
-  padding-top: typo-padding-top($type-level, $baseline-offset)
-  padding-bottom: typo-padding-bottom($type-level, $baseline-offset)
-
-=typo-level($type-level, $baseline-offset)
-  +typo-level-vertical-padding($type-level, $baseline-offset)
-  font-size: typo-size($type-level)
-  line-height: typo-line-height($type-level)
+=typo-level($level, $typography: main, $expected-line-height-ratio: null)
+  padding-top: typo-padding-top($level, $typography, $expected-line-height-ratio)
+  padding-bottom: typo-padding-bottom($level, $typography, $expected-line-height-ratio)
+  font-size: typo-size($level)
+  line-height: typo-line-height($level, $typography, $expected-line-height-ratio)
 
 =typo-link($name: null, $color: null, $hover-color: null, $active-color: null)
   a.link-#{$name}:not(.btn)
@@ -32,9 +29,9 @@
       @else
         $src: "url(#{$url}) format('#{$format}')"
   @at-root
-  @font-face
-    src: unquote($src)
-    font-family: $family
-    font-style: $style
-    font-weight: $weight
-    unicode-range: $unicodes
+    @font-face
+      src: unquote($src)
+      font-family: $family
+      font-style: $style
+      font-weight: $weight
+      unicode-range: $unicodes

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

@@ -13,12 +13,9 @@
   .alert-action
     flex: 0 0 auto
     order: 1
-    margin-left: $alert-action-margin-left-rem
-
-  .alert-title
-    padding: 0
-    color: $alert-title-color
+    margin: $alert-action-margin-rem
 
   .alert-content
     padding: 0
+    margin: $alert-content-margin-rem
     color: $alert-content-color 

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

@@ -0,0 +1,45 @@
++install(shared-pattern-article)
+
+  .article
+    max-width: $article-max-width-rem
+    padding: $article-padding-rem
+    margin: 0 auto
+
+  .article > *
+    margin: $article-elements-margin-rem
+
+  .article > h1,
+  .article > h2,
+  .article > h3,
+  .article > h4,
+  .article > h5,
+  .article > h6
+    margin: $article-headings-margin-rem
+
+  .article > h1 + h2,
+  .article > h2 + h3,
+  .article > h3 + h4,
+  .article > h4 + h5,
+  .article > h5 + h6
+    margin: $article-heading-group-heading-margin-rem
+
+  .article > p
+    margin: $article-paragraph-margin-rem
+
+  .article > .table
+    margin: $article-table-margin-rem
+
+  .article > .code
+    margin: $article-block-code-margin-rem
+
+  .article > .quote
+    margin: $article-block-quote-margin-rem
+
+  .article > .media
+    display: block
+    width: 100%
+    margin: $article-media-margin-rem
+
+  .article > ul,
+  .article > li
+    margin: $article-list-margin-rem