diff options
Diffstat (limited to 'src/objects/_rule.scss')
| -rw-r--r-- | src/objects/_rule.scss | 66 |
1 files changed, 35 insertions, 31 deletions
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index bfd1240..b0679ee 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss | |||
| @@ -1,54 +1,58 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
| 2 | @use '../functions' as fn; | ||
| 2 | 3 | ||
| 3 | @include iro.props-namespace('rule') { | 4 | @include iro.props-namespace('rule') { |
| 4 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 5 | --dims: ( | 6 | --dims: ( |
| 6 | --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true), | 7 | --margin-y: fn.dim(--spacing --y --xs, $global: true), |
| 7 | 8 | ||
| 8 | --strong: ( | 9 | --strong: ( |
| 9 | --border-width: iro.props-get(--dims --border-width --thick, $global: true), | 10 | --border-width: fn.dim(--border-width --thick, $global: true), |
| 10 | --label-font-size: iro.props-get(--dims --font-size --md, $global: true), | 11 | --label-font-size: fn.dim(--font-size --md, $global: true), |
| 11 | ), | 12 | ), |
| 12 | --medium: ( | 13 | --medium: ( |
| 13 | --border-width: iro.props-get(--dims --border-width --medium, $global: true), | 14 | --border-width: fn.dim(--border-width --medium, $global: true), |
| 14 | --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), | 15 | --label-font-size: fn.dim(--font-size --sm, $global: true), |
| 15 | ), | 16 | ), |
| 16 | --faint: ( | 17 | --faint: ( |
| 17 | --border-width: iro.props-get(--dims --border-width --thin, $global: true), | 18 | --border-width: fn.dim(--border-width --thin, $global: true), |
| 18 | --label-font-size: iro.props-get(--dims --font-size --xs, $global: true), | 19 | --label-font-size: fn.dim(--font-size --xs, $global: true), |
| 19 | ), | 20 | ), |
| 20 | ), | 21 | ), |
| 22 | ), 'dims'); | ||
| 23 | |||
| 24 | @include iro.props-store(( | ||
| 21 | --colors: ( | 25 | --colors: ( |
| 22 | --strong: ( | 26 | --strong: ( |
| 23 | --bg: iro.props-get(--colors --fg, $global: true), | 27 | --bg: fn.color(--fg, $global: true), |
| 24 | --label: iro.props-get(--colors --fg, $global: true), | 28 | --label: fn.color(--fg, $global: true), |
| 25 | ), | 29 | ), |
| 26 | --medium: ( | 30 | --medium: ( |
| 27 | --bg: iro.props-get(--colors --obj, $global: true), | 31 | --bg: fn.color(--obj, $global: true), |
| 28 | --label: iro.props-get(--colors --fg-hi, $global: true), | 32 | --label: fn.color(--fg-hi, $global: true), |
| 29 | ), | 33 | ), |
| 30 | --faint: ( | 34 | --faint: ( |
| 31 | --bg: iro.props-get(--colors --obj, $global: true), | 35 | --bg: fn.color(--obj, $global: true), |
| 32 | --label: iro.props-get(--colors --fg-hi2, $global: true), | 36 | --label: fn.color(--fg-hi2, $global: true), |
| 33 | ), | 37 | ), |
| 34 | ), | 38 | ), |
| 35 | )); | 39 | ), 'colors'); |
| 36 | 40 | ||
| 37 | @include iro.bem-object(iro.props-namespace()) { | 41 | @include iro.bem-object(iro.props-namespace()) { |
| 38 | display: block; | 42 | display: block; |
| 39 | height: iro.props-get(--dims --strong --border-width); | 43 | height: fn.dim(--strong --border-width); |
| 40 | margin-top: iro.props-get(--dims --margin-y); | 44 | margin-top: fn.dim(--margin-y); |
| 41 | margin-bottom: iro.props-get(--dims --margin-y); | 45 | margin-bottom: fn.dim(--margin-y); |
| 42 | background-color: iro.props-get(--colors --strong --bg); | 46 | background-color: fn.color(--strong --bg); |
| 43 | 47 | ||
| 44 | @include iro.bem-modifier('medium') { | 48 | @include iro.bem-modifier('medium') { |
| 45 | height: iro.props-get(--dims --medium --border-width); | 49 | height: fn.dim(--medium --border-width); |
| 46 | background-color: iro.props-get(--colors --medium --bg); | 50 | background-color: fn.color(--medium --bg); |
| 47 | } | 51 | } |
| 48 | 52 | ||
| 49 | @include iro.bem-modifier('faint') { | 53 | @include iro.bem-modifier('faint') { |
| 50 | height: iro.props-get(--dims --faint --border-width); | 54 | height: fn.dim(--faint --border-width); |
| 51 | background-color: iro.props-get(--colors --faint --bg); | 55 | background-color: fn.color(--faint --bg); |
| 52 | } | 56 | } |
| 53 | 57 | ||
| 54 | @include iro.bem-modifier('labelled') { | 58 | @include iro.bem-modifier('labelled') { |
| @@ -66,7 +70,7 @@ | |||
| 66 | flex: 1 1 auto; | 70 | flex: 1 1 auto; |
| 67 | width: 100%; | 71 | width: 100%; |
| 68 | height: 3px; | 72 | height: 3px; |
| 69 | background-color: iro.props-get(--colors --strong --bg); | 73 | background-color: fn.color(--strong --bg); |
| 70 | } | 74 | } |
| 71 | 75 | ||
| 72 | &::before { | 76 | &::before { |
| @@ -79,8 +83,8 @@ | |||
| 79 | 83 | ||
| 80 | @include iro.bem-elem('label') { | 84 | @include iro.bem-elem('label') { |
| 81 | flex: 0 0 auto; | 85 | flex: 0 0 auto; |
| 82 | color: iro.props-get(--colors --strong --label); | 86 | color: fn.color(--strong --label); |
| 83 | font-size: iro.props-get(--dims --strong --label-font-size); | 87 | font-size: fn.dim(--strong --label-font-size); |
| 84 | font-weight: 700; | 88 | font-weight: 700; |
| 85 | letter-spacing: .5px; | 89 | letter-spacing: .5px; |
| 86 | text-transform: uppercase; | 90 | text-transform: uppercase; |
| @@ -90,12 +94,12 @@ | |||
| 90 | &::before, | 94 | &::before, |
| 91 | &::after { | 95 | &::after { |
| 92 | height: 2px; | 96 | height: 2px; |
| 93 | background-color: iro.props-get(--colors --medium --bg); | 97 | background-color: fn.color(--medium --bg); |
| 94 | } | 98 | } |
| 95 | 99 | ||
| 96 | @include iro.bem-elem('label') { | 100 | @include iro.bem-elem('label') { |
| 97 | color: iro.props-get(--colors --medium --label); | 101 | color: fn.color(--medium --label); |
| 98 | font-size: iro.props-get(--dims --medium --label-font-size); | 102 | font-size: fn.dim(--medium --label-font-size); |
| 99 | font-weight: 500; | 103 | font-weight: 500; |
| 100 | } | 104 | } |
| 101 | } | 105 | } |
| @@ -104,12 +108,12 @@ | |||
| 104 | &::before, | 108 | &::before, |
| 105 | &::after { | 109 | &::after { |
| 106 | height: 1px; | 110 | height: 1px; |
| 107 | background-color: iro.props-get(--colors --faint --bg); | 111 | background-color: fn.color(--faint --bg); |
| 108 | } | 112 | } |
| 109 | 113 | ||
| 110 | @include iro.bem-elem('label') { | 114 | @include iro.bem-elem('label') { |
| 111 | color: iro.props-get(--colors --faint --label); | 115 | color: fn.color(--faint --label); |
| 112 | font-size: iro.props-get(--dims --faint --label-font-size); | 116 | font-size: fn.dim(--faint --label-font-size); |
| 113 | font-weight: 500; | 117 | font-weight: 500; |
| 114 | } | 118 | } |
| 115 | } | 119 | } |
