luda 0.1.13 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. checksums.yaml +5 -5
  2. data/assets/javascripts/luda-degradation.js +1 -1
  3. data/assets/javascripts/luda-degradation.min.js +1 -1
  4. data/assets/javascripts/luda.js +1 -1
  5. data/assets/javascripts/luda.min.js +1 -1
  6. data/assets/javascripts/luda/install.js +1 -1
  7. data/assets/stylesheets/luda/_core/_base.sass +26 -4
  8. data/assets/stylesheets/luda/_core/_functions.sass +101 -46
  9. data/assets/stylesheets/luda/_core/_variables.sass +212 -204
  10. data/assets/stylesheets/luda/_core/elements/_badge.sass +8 -10
  11. data/assets/stylesheets/luda/_core/elements/_baseline.sass +4 -4
  12. data/assets/stylesheets/luda/_core/elements/_button.sass +1 -1
  13. data/assets/stylesheets/luda/_core/elements/_icon.sass +2 -6
  14. data/assets/stylesheets/luda/_core/elements/_table.sass +9 -1
  15. data/assets/stylesheets/luda/_core/elements/form/_form-helper.sass +2 -0
  16. data/assets/stylesheets/luda/_core/elements/form/_form-label.sass +3 -3
  17. data/assets/stylesheets/luda/_core/elements/form/_form-row.sass +3 -1
  18. data/assets/stylesheets/luda/_core/elements/typography/_code.sass +2 -3
  19. data/assets/stylesheets/luda/_core/elements/typography/_heading.sass +24 -0
  20. data/assets/stylesheets/luda/_core/elements/typography/_list.sass +1 -1
  21. data/assets/stylesheets/luda/_core/elements/typography/_paragraph.sass +18 -0
  22. data/assets/stylesheets/luda/_core/elements/typography/_quote.sass +8 -13
  23. data/assets/stylesheets/luda/_core/elements/typography/_typography.sass +0 -46
  24. data/assets/stylesheets/luda/_core/mixins/_base.sass +3 -0
  25. data/assets/stylesheets/luda/_core/mixins/_button.sass +9 -3
  26. data/assets/stylesheets/luda/_core/mixins/_form.sass +3 -1
  27. data/assets/stylesheets/luda/_core/mixins/_typography.sass +11 -14
  28. data/assets/stylesheets/luda/_core/patterns/_alert.sass +2 -5
  29. data/assets/stylesheets/luda/_core/patterns/_article.sass +45 -0
  30. data/assets/stylesheets/luda/_core/patterns/_button-icon.sass +8 -4
  31. data/assets/stylesheets/luda/_core/patterns/_form-group.sass +3 -0
  32. data/assets/stylesheets/luda/_core/patterns/_form-icon.sass +8 -4
  33. data/assets/stylesheets/luda/_core/patterns/_navigation.sass +1 -0
  34. data/assets/stylesheets/luda/_default.sass +1 -0
  35. data/assets/stylesheets/luda/default/_banner.sass +1 -1
  36. data/assets/stylesheets/luda/default/_mixins.sass +1 -0
  37. data/assets/stylesheets/luda/default/elements/_typography.sass +2 -0
  38. data/assets/stylesheets/luda/default/elements/typography/_heading.sass +5 -0
  39. data/assets/stylesheets/luda/default/elements/typography/_paragraph.sass +5 -0
  40. data/assets/stylesheets/luda/default/index.sass +1 -0
  41. data/assets/stylesheets/luda/default/patterns/_article.sass +6 -0
  42. data/lib/luda/version.rb +1 -1
  43. metadata +10 -3
@@ -1,19 +1,17 @@
1
1
  +install(shared-element-badge)
2
2
 
3
- .badge,
4
- .badge-baseline
3
+ .badge
5
4
  display: inline-flex
6
- position: relative
7
- left: $badge-offset-left-em
8
5
  align-items: center
9
- min-width: $badge-height-em
10
- height: $badge-height-em
11
- padding: $badge-padding-em
6
+ min-width: $typography-size-scale-ratio * 1em
7
+ height: $typography-size-scale-ratio * 1em
8
+ padding: 0 $badge-horizontal-padding-em
9
+ margin-left: $badge-margin-left-em
12
10
  font-size: 1em / $typography-size-scale-ratio
11
+ line-height: 0
13
12
  white-space: nowrap
14
13
  color: $badge-color
15
14
  background: $badge-background
16
15
  border-radius: 9999px
17
-
18
- .badge
19
- top: $badge-offset-top-em
16
+ transform: scale(1 / $typography-size-scale-ratio)
17
+ transform-origin: left center
@@ -3,9 +3,6 @@
3
3
  .baseline
4
4
  position: relative
5
5
 
6
- $_baseline-gradient: linear-gradient(to bottom, #0ff 0, rgba(255, 255, 255, 0) 1px)
7
- $_baseline-background: $_baseline-gradient left top / 100% 1rem repeat-y
8
-
9
6
  .baseline::after
10
7
  display: block
11
8
  position: absolute
@@ -16,4 +13,7 @@
16
13
  z-index: $z-index-highest
17
14
  pointer-events: none
18
15
  content: ""
19
- background: $_baseline-background
16
+ @if $typography-baseline-divided
17
+ background: _baseline-background($baseline-height-px, #0ff), _baseline-background($baseline-height-px / 2, #0ff)
18
+ @else
19
+ background: _baseline-background($baseline-height-px, #0ff)
@@ -14,7 +14,7 @@
14
14
  min-width: $button-height-rem
15
15
  height: $button-height-rem
16
16
  font-size: typo-size($button-typography-size-level)
17
- line-height: normal
17
+ line-height: 1
18
18
  white-space: nowrap
19
19
  cursor: pointer
20
20
  -ms-touch-action: manipulation
@@ -2,12 +2,12 @@
2
2
 
3
3
  .ico
4
4
  display: inline-block
5
- vertical-align: text-bottom
5
+ vertical-align: baseline
6
6
  position: relative
7
7
  width: 1em
8
8
  height: 1em
9
9
  font-size: $icon-size-em
10
- line-height: normal
10
+ line-height: 1
11
11
  overflow: hidden
12
12
  -webkit-user-select: none
13
13
  -moz-user-select: none
@@ -19,10 +19,6 @@
19
19
  background-position: center
20
20
  background-size: contain
21
21
 
22
- +browser-firefox
23
- .ico
24
- line-height: $icon-firefox-line-height
25
-
26
22
  .ico::before,
27
23
  .ico::after
28
24
  display: block
@@ -33,7 +33,7 @@
33
33
  .table th,
34
34
  .table-border th
35
35
  color: $table-head-color
36
- font-weight: 700
36
+ font-weight: 500
37
37
 
38
38
  .table td,
39
39
  .table-border td
@@ -81,6 +81,14 @@
81
81
 
82
82
 
83
83
 
84
+ .table-middle.table th,
85
+ .table-middle.table td,
86
+ .table-middle.table-border th,
87
+ .table-middle.table-border td
88
+ vertical-align: middle
89
+
90
+
91
+
84
92
  .table-nowrap.table th,
85
93
  .table-nowrap.table td,
86
94
  .table-nowrap.table-border th,
@@ -4,6 +4,7 @@
4
4
  color: $form-placeholder-color
5
5
 
6
6
  .fm ::-moz-placeholder
7
+ opacity: 1
7
8
  color: $form-placeholder-color
8
9
 
9
10
  .fm :-ms-input-placeholder
@@ -39,6 +40,7 @@
39
40
  .fm[data-hint]::after
40
41
  display: block
41
42
  width: 100%
43
+ margin: $form-helper-margin-rem
42
44
  font-size: typo-size($form-helper-typography-size-level)
43
45
  line-height: typo-line-height($form-helper-typography-size-level)
44
46
 
@@ -1,7 +1,7 @@
1
1
  +install(shared-element-form-label)
2
2
 
3
3
  .fm-label
4
- +typo-level($form-label-typography-size-level, $typography-main-baseline-offset-ratio)
4
+ +typo-level($form-label-typography-size-level)
5
5
  display: block
6
6
  color: $form-label-color
7
7
 
@@ -13,8 +13,8 @@
13
13
 
14
14
  @if $form-label-small-typography-size-level
15
15
  .fm-label-small.fm-label
16
- +typo-level($form-label-small-typography-size-level, $typography-main-baseline-offset-ratio)
16
+ +typo-level($form-label-small-typography-size-level)
17
17
 
18
18
  @if $form-label-large-typography-size-level
19
19
  .fm-label-large.fm-label
20
- +typo-level($form-label-large-typography-size-level, $typography-main-baseline-offset-ratio)
20
+ +typo-level($form-label-large-typography-size-level)
@@ -24,11 +24,13 @@
24
24
  padding: 0 $form-element-horizontal-padding-em
25
25
  background: $form-element-background
26
26
 
27
+ // sass-lint:disable empty-args
27
28
  .fm-search input,
28
29
  .fm-select input,
29
30
  .fm-file input
30
- $padding-right: $form-element-icon-size-em + $form-element-horizontal-padding-em * 2
31
+ $padding-right: _form-icon-size-em() + $form-element-horizontal-padding-em * 2
31
32
  padding: 0 $padding-right 0 $form-element-horizontal-padding-em
33
+ // sass-lint:enable empty-args
32
34
 
33
35
  .fm-search input
34
36
  +form-element-background($form-element-search-icon, $form-element-icon-color, $form-element-background)
@@ -11,15 +11,14 @@
11
11
  border-radius: $typography-code-border-radius
12
12
 
13
13
  .code
14
- padding: $typography-code-block-padding-rem
14
+ padding: $typography-block-code-padding-rem
15
15
  background: $typography-code-background
16
16
  border-radius: $typography-code-border-radius
17
17
 
18
18
  .code code,
19
19
  .code samp,
20
20
  .code kbd
21
- $baseline-offset: existing($typography-code-baseline-offset-ratio, $typography-main-baseline-offset-ratio)
22
- +typo-level($typography-block-code-size-level, $baseline-offset)
21
+ +typo-level($typography-block-code-size-level, code)
23
22
  display: block
24
23
  padding-right: 0
25
24
  padding-left: 0
@@ -0,0 +1,24 @@
1
+ +install(shared-element-typography-heading)
2
+
3
+ h1,
4
+ h2,
5
+ h3,
6
+ h4,
7
+ h5,
8
+ h6,
9
+ .h1,
10
+ .h2,
11
+ .h3,
12
+ .h4,
13
+ .h5,
14
+ .h6
15
+ color: $typography-heading-color
16
+ font-family: $typography-heading
17
+ font-weight: $typography-heading-font-weight
18
+
19
+ @for $typo-level from 1 through 6
20
+
21
+ h#{$typo-level},
22
+ .h#{$typo-level}
23
+ +typo-level($typo-level, heading)
24
+ display: block
@@ -11,4 +11,4 @@
11
11
  padding: $typography-list-nested-padding-em
12
12
 
13
13
  dt
14
- font-weight: 700
14
+ font-weight: 500
@@ -0,0 +1,18 @@
1
+ +install(shared-element-typography-paragraph)
2
+
3
+ .p5
4
+ +typo-level(5)
5
+ display: block
6
+
7
+ p,
8
+ .p6
9
+ +typo-level(6)
10
+ display: block
11
+
12
+ .p7
13
+ +typo-level(7)
14
+ display: block
15
+
16
+ .p8
17
+ +typo-level(8)
18
+ display: block
@@ -25,18 +25,14 @@
25
25
  cite
26
26
  color: $typography-cite-color
27
27
  font-style: italic
28
- font-weight: 700
28
+ font-weight: 500
29
29
 
30
30
  .quote
31
- padding: $typography-quote-block-padding-rem
31
+ padding: $typography-block-quote-padding-rem
32
32
 
33
33
  .quote p
34
- $offset-diff: $typography-quote-baseline-offset-ratio != $typography-main-baseline-offset-ratio
35
- $size-diff: $typography-block-quote-size-level != $typography-main-size-level
36
- @if $typography-quote-baseline-offset-ratio and $offset-diff or $size-diff
37
- $baseline-offset-ratio: existing($typography-quote-baseline-offset-ratio, $typography-main-baseline-offset-ratio)
38
- +typo-level($typography-block-quote-size-level, $baseline-offset-ratio)
39
- margin: $typography-quote-block-p-margin-rem
34
+ +typo-level($typography-block-quote-size-level, quote)
35
+ margin: $typography-block-quote-p-margin-rem
40
36
 
41
37
  .quote p:first-child
42
38
  position: relative
@@ -45,10 +41,9 @@
45
41
  display: block
46
42
  position: absolute
47
43
  top: 0
48
- left: - mirror-nth($typography-quote-block-padding-rem, 4)
49
- width: mirror-nth($typography-quote-block-padding-rem, 4)
50
- font-size: 3em
51
- text-align: center
44
+ left: - mirror-nth($typography-block-quote-padding-rem, 4)
45
+ width: mirror-nth($typography-block-quote-padding-rem, 4)
46
+ font-size: 2.5em
52
47
  content: '"'
53
48
  color: $typography-cite-color
54
49
 
@@ -63,6 +58,6 @@
63
58
  vertical-align: middle
64
59
  width: 2em
65
60
  margin-right: 1em
66
- border-width: $typography-quote-block-cite-line-height 0 0
61
+ border-width: $typography-block-quote-cite-line-height 0 0
67
62
  content: ""
68
63
  border-style: solid
@@ -1,51 +1,5 @@
1
1
  +install(shared-element-typography-typography)
2
2
 
3
- @for $type-level from 1 through 6
4
-
5
- $is-default-typo-level: $type-level == $typography-main-size-level
6
- $paragraph-selector: if($is-default-typo-level, "p,.p#{$type-level}", ".p#{$type-level}")
7
- $heading-selector: "h#{$type-level},.h#{$type-level}"
8
- $baseline-offset-ratio-changed: $typography-heading-baseline-offset-ratio != $typography-main-baseline-offset-ratio
9
-
10
- @if $typography-heading-baseline-offset-ratio and $baseline-offset-ratio-changed
11
-
12
- #{$heading-selector}
13
- +typo-level($type-level, $typography-heading-baseline-offset-ratio)
14
- display: block
15
-
16
- #{$paragraph-selector}
17
- +typo-level($type-level, $typography-main-baseline-offset-ratio)
18
- display: block
19
-
20
- @else
21
-
22
- #{$heading-selector},
23
- #{$paragraph-selector}
24
- +typo-level($type-level, $typography-main-baseline-offset-ratio)
25
- display: block
26
-
27
- +_sass-lint-fix-if-else
28
-
29
-
30
-
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- h5,
36
- h6,
37
- .h1,
38
- .h2,
39
- .h3,
40
- .h4,
41
- .h5,
42
- .h6
43
- color: $typography-heading-color
44
- font-family: $typography-heading
45
- font-weight: $typography-heading-font-weight
46
-
47
-
48
-
49
3
  .typo-inline
50
4
  display: inline !important
51
5
  padding: 0 !important
@@ -0,0 +1,3 @@
1
+ =root-var($prop, $value)
2
+ @if $prop and $value
3
+ #{$prop}: $value
@@ -12,7 +12,9 @@
12
12
  box-shadow: $box-shadow
13
13
 
14
14
  .btn.btn-#{$name}:hover,
15
- .btn-file.btn-#{$name} input:hover ~ label
15
+ .btn-file.btn-#{$name} input:hover ~ label,
16
+ .btn-check.btn-#{$name} input:hover ~ label,
17
+ .btn-radio.btn-#{$name} input:hover ~ label
16
18
  color: $hover-color
17
19
  background: $hover-background
18
20
  border-color: $hover-border-color
@@ -44,7 +46,9 @@
44
46
  box-shadow: $box-shadow
45
47
 
46
48
  .btn.btn-hollow-#{$name}:hover,
47
- .btn-file.btn-hollow-#{$name} input:hover ~ label
49
+ .btn-file.btn-hollow-#{$name} input:hover ~ label,
50
+ .btn-check.btn-hollow-#{$name} input:hover ~ label,
51
+ .btn-radio.btn-hollow-#{$name} input:hover ~ label
48
52
  color: $hover-color
49
53
  background: $hover-background
50
54
  border-color: $hover-border-color
@@ -76,7 +80,9 @@
76
80
  border-color: transparent
77
81
 
78
82
  .btn.btn-text-#{$name}:hover,
79
- .btn-file.btn-text-#{$name} input:hover ~ label
83
+ .btn-file.btn-text-#{$name} input:hover ~ label,
84
+ .btn-check.btn-text-#{$name} input:hover ~ label,
85
+ .btn-radio.btn-text-#{$name} input:hover ~ label
80
86
  color: $hover-color
81
87
  text-shadow: $hover-text-shadow
82
88
 
@@ -1,8 +1,10 @@
1
1
  =form-element-checkfield-background($icon, $icon-color, $background)
2
2
  background: url(svg-icon($icon, $icon-color)) center / contain no-repeat, $background
3
3
 
4
+ // sass-lint:disable empty-args
4
5
  =form-element-background($icon, $icon-color, $background)
5
- background: url(svg-icon($icon, $icon-color)) right $form-element-horizontal-padding-em (center / $form-element-icon-size-em) no-repeat, $background
6
+ background: url(svg-icon($icon, $icon-color)) right $form-element-horizontal-padding-em (center / _form-icon-size-em()) no-repeat, $background
7
+ // sass-lint:enable empty-args
6
8
 
7
9
  =_form-range-track-skin
8
10
  background: $form-element-track-background
@@ -1,11 +1,8 @@
1
- =typo-level-vertical-padding($type-level, $baseline-offset)
2
- padding-top: typo-padding-top($type-level, $baseline-offset)
3
- padding-bottom: typo-padding-bottom($type-level, $baseline-offset)
4
-
5
- =typo-level($type-level, $baseline-offset)
6
- +typo-level-vertical-padding($type-level, $baseline-offset)
7
- font-size: typo-size($type-level)
8
- line-height: typo-line-height($type-level)
1
+ =typo-level($level, $typography: main, $expected-line-height-ratio: null)
2
+ padding-top: typo-padding-top($level, $typography, $expected-line-height-ratio)
3
+ padding-bottom: typo-padding-bottom($level, $typography, $expected-line-height-ratio)
4
+ font-size: typo-size($level)
5
+ line-height: typo-line-height($level, $typography, $expected-line-height-ratio)
9
6
 
10
7
  =typo-link($name: null, $color: null, $hover-color: null, $active-color: null)
11
8
  a.link-#{$name}:not(.btn)
@@ -32,9 +29,9 @@
32
29
  @else
33
30
  $src: "url(#{$url}) format('#{$format}')"
34
31
  @at-root
35
- @font-face
36
- src: unquote($src)
37
- font-family: $family
38
- font-style: $style
39
- font-weight: $weight
40
- unicode-range: $unicodes
32
+ @font-face
33
+ src: unquote($src)
34
+ font-family: $family
35
+ font-style: $style
36
+ font-weight: $weight
37
+ unicode-range: $unicodes
@@ -13,12 +13,9 @@
13
13
  .alert-action
14
14
  flex: 0 0 auto
15
15
  order: 1
16
- margin-left: $alert-action-margin-left-rem
17
-
18
- .alert-title
19
- padding: 0
20
- color: $alert-title-color
16
+ margin: $alert-action-margin-rem
21
17
 
22
18
  .alert-content
23
19
  padding: 0
20
+ margin: $alert-content-margin-rem
24
21
  color: $alert-content-color
@@ -0,0 +1,45 @@
1
+ +install(shared-pattern-article)
2
+
3
+ .article
4
+ max-width: $article-max-width-rem
5
+ padding: $article-padding-rem
6
+ margin: 0 auto
7
+
8
+ .article > *
9
+ margin: $article-elements-margin-rem
10
+
11
+ .article > h1,
12
+ .article > h2,
13
+ .article > h3,
14
+ .article > h4,
15
+ .article > h5,
16
+ .article > h6
17
+ margin: $article-headings-margin-rem
18
+
19
+ .article > h1 + h2,
20
+ .article > h2 + h3,
21
+ .article > h3 + h4,
22
+ .article > h4 + h5,
23
+ .article > h5 + h6
24
+ margin: $article-heading-group-heading-margin-rem
25
+
26
+ .article > p
27
+ margin: $article-paragraph-margin-rem
28
+
29
+ .article > .table
30
+ margin: $article-table-margin-rem
31
+
32
+ .article > .code
33
+ margin: $article-block-code-margin-rem
34
+
35
+ .article > .quote
36
+ margin: $article-block-quote-margin-rem
37
+
38
+ .article > .media
39
+ display: block
40
+ width: 100%
41
+ margin: $article-media-margin-rem
42
+
43
+ .article > ul,
44
+ .article > li
45
+ margin: $article-list-margin-rem