diff options
Diffstat (limited to 'assets/css/components/_header.scss')
-rw-r--r-- | assets/css/components/_header.scss | 77 |
1 files changed, 42 insertions, 35 deletions
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index ca85438..cf396ce 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss | |||
@@ -1,86 +1,93 @@ | |||
1 | @include namespace('header') { | 1 | @use 'iro-sass/src/index' as iro; |
2 | @include store(( | 2 | @use 'iro-design/src/functions' as fn; |
3 | @use 'include-media/dist/include-media' as media; | ||
4 | |||
5 | @include iro.props-namespace('header') { | ||
6 | @include iro.props-store(( | ||
3 | --colors: ( | 7 | --colors: ( |
4 | --bg: prop(--colors --bg-lo, $global: true), | 8 | --bg: fn.global-color(--bg-hi), |
5 | --fg: prop(--colors --fg-lo, $global: true), | 9 | --fg: fn.global-color(--fg-lo), |
6 | --hover: ( | 10 | --hover: ( |
7 | --bg: prop(--colors --fg-lo, $global: true), | 11 | --bg: fn.global-color(--fg-lo), |
8 | --fg: prop(--colors --bg-hi, $global: true), | 12 | --fg: fn.global-color(--bg-hi), |
9 | ), | 13 | ), |
10 | --active: ( | 14 | --active: ( |
11 | --fg: prop(--colors --fg-lo, $global: true), | 15 | --fg: fn.global-color(--fg-lo), |
12 | ) | 16 | ) |
13 | ), | 17 | ) |
18 | ), 'colors'); | ||
19 | |||
20 | @include iro.props-store(( | ||
14 | --dims: ( | 21 | --dims: ( |
15 | --height: 4rem, | 22 | --height: 4rem, |
16 | --icon: 1.5rem, | 23 | --icon: 1.5rem, |
17 | --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), | 24 | --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), |
18 | --gap: 2px, | 25 | --gap: 2px, |
19 | ) | 26 | ) |
20 | )); | 27 | ), 'dims'); |
21 | 28 | ||
22 | @include store(( | 29 | @include iro.props-store(( |
23 | --colors: ( | 30 | --colors: ( |
24 | --bg: prop(--colors --bg-hi, $global: true), | 31 | --bg: fn.global-color(--obj-hi), |
25 | ) | 32 | ) |
26 | ), 'light'); | 33 | ), 'colors-dark'); |
27 | 34 | ||
28 | @include store(( | 35 | @include iro.props-store(( |
29 | --dims: ( | 36 | --dims: ( |
30 | --height: 3.4rem, | 37 | --height: 3.4rem, |
31 | ) | 38 | ) |
32 | ), 'sm'); | 39 | ), 'sm'); |
33 | 40 | ||
34 | @include component(namespace()) { | 41 | @include iro.bem-component(iro.props-namespace()) { |
35 | display: flex; | 42 | display: flex; |
36 | width: 0; | 43 | width: 0; |
37 | height: prop(--dims --height); | 44 | height: fn.dim(--height); |
38 | padding: prop(--dims --gap); | 45 | padding: fn.dim(--gap); |
39 | gap: prop(--dims --gap); | 46 | gap: fn.dim(--gap); |
40 | 47 | ||
41 | @include element('item') { | 48 | @include iro.bem-elem('item') { |
42 | padding: 0 prop(--dims --pad-x); | 49 | padding: 0 fn.dim(--pad-x); |
43 | transition: background-color .2s, color .2s, border-left-color .2s; | 50 | transition: background-color .2s, color .2s, border-left-color .2s; |
44 | background-color: prop(--colors --bg); | 51 | background-color: fn.color(--bg); |
45 | color: prop(--colors --fg); | 52 | color: fn.color(--fg); |
46 | line-height: prop(--dims --height); | 53 | line-height: fn.dim(--height); |
47 | text-decoration: none; | 54 | text-decoration: none; |
48 | 55 | ||
49 | &:hover, | 56 | &:hover, |
50 | &:focus { | 57 | &:focus { |
51 | border-left-color: prop(--colors --hover --bg); | 58 | border-left-color: fn.color(--hover --bg); |
52 | background-color: prop(--colors --hover --bg); | 59 | background-color: fn.color(--hover --bg); |
53 | color: prop(--colors --hover --fg); | 60 | color: fn.color(--hover --fg); |
54 | } | 61 | } |
55 | 62 | ||
56 | @include modifier('icon') { | 63 | @include iro.bem-modifier('icon') { |
57 | display: flex; | 64 | display: flex; |
58 | align-items: center; | 65 | align-items: center; |
59 | justify-content: center; | 66 | justify-content: center; |
60 | } | 67 | } |
61 | 68 | ||
62 | @include modifier('active') { | 69 | @include iro.bem-modifier('active') { |
63 | color: prop(--colors --active --fg); | 70 | color: fn.color(--active --fg); |
64 | font-weight: bold; | 71 | font-weight: bold; |
65 | } | 72 | } |
66 | } | 73 | } |
67 | 74 | ||
68 | @include element('icon') { | 75 | @include iro.bem-elem('icon') { |
69 | width: prop(--dims --icon); | 76 | width: fn.dim(--icon); |
70 | height: prop(--dims --icon); | 77 | height: fn.dim(--icon); |
71 | } | 78 | } |
72 | 79 | ||
73 | @include modifier('fixed') { | 80 | @include iro.bem-modifier('fixed') { |
74 | position: fixed; | 81 | position: fixed; |
75 | } | 82 | } |
76 | 83 | ||
77 | @include media('>=lg') { | 84 | @include media.media('>=lg') { |
78 | position: sticky; | 85 | position: sticky; |
79 | z-index: 100; | 86 | z-index: 100; |
80 | top: 0; | 87 | top: 0; |
81 | margin-bottom: calc(-.75 * #{prop(--dims --height)}); | 88 | margin-bottom: calc(-.75 * #{fn.dim(--height)}); |
82 | 89 | ||
83 | @include modifier('fixed') { | 90 | @include iro.bem-modifier('fixed') { |
84 | position: fixed; | 91 | position: fixed; |
85 | } | 92 | } |
86 | } | 93 | } |