diff options
Diffstat (limited to 'assets/css/components')
| -rw-r--r-- | assets/css/components/_header.scss | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index a59c039..c1095b3 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss | |||
| @@ -14,7 +14,7 @@ | |||
| 14 | --dims: ( | 14 | --dims: ( |
| 15 | --height: 4rem, | 15 | --height: 4rem, |
| 16 | --icon: 1.5rem, | 16 | --icon: 1.5rem, |
| 17 | --pad-x: calc(0.5 * (var(--header--dims--height) - var(--header--dims--icon))), | 17 | --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), |
| 18 | ) | 18 | ) |
| 19 | )); | 19 | )); |
| 20 | 20 | ||
| @@ -31,11 +31,11 @@ | |||
| 31 | 31 | ||
| 32 | @include element('item') { | 32 | @include element('item') { |
| 33 | padding: 0 prop(--dims --pad-x); | 33 | padding: 0 prop(--dims --pad-x); |
| 34 | line-height: prop(--dims --height); | 34 | transition: background-color .2s, color .2s, border-left-color .2s; |
| 35 | color: prop(--colors --fg); | ||
| 36 | background-color: prop(--colors --bg); | 35 | background-color: prop(--colors --bg); |
| 36 | color: prop(--colors --fg); | ||
| 37 | line-height: prop(--dims --height); | ||
| 37 | text-decoration: none; | 38 | text-decoration: none; |
| 38 | transition: background-color .2s, color .2s, border-left-color .2s; | ||
| 39 | 39 | ||
| 40 | @include next-twin-element { | 40 | @include next-twin-element { |
| 41 | margin-left: 2px; | 41 | margin-left: 2px; |
| @@ -43,9 +43,9 @@ | |||
| 43 | 43 | ||
| 44 | &:hover, | 44 | &:hover, |
| 45 | &:focus { | 45 | &:focus { |
| 46 | color: prop(--colors --hover --fg); | ||
| 47 | background-color: prop(--colors --hover --bg); | ||
| 48 | border-left-color: prop(--colors --hover --bg); | 46 | border-left-color: prop(--colors --hover --bg); |
| 47 | background-color: prop(--colors --hover --bg); | ||
| 48 | color: prop(--colors --hover --fg); | ||
| 49 | } | 49 | } |
| 50 | 50 | ||
| 51 | @include modifier('icon') { | 51 | @include modifier('icon') { |
| @@ -55,8 +55,8 @@ | |||
| 55 | } | 55 | } |
| 56 | 56 | ||
| 57 | @include modifier('active') { | 57 | @include modifier('active') { |
| 58 | font-weight: bold; | ||
| 59 | color: prop(--colors --active --fg); | 58 | color: prop(--colors --active --fg); |
| 59 | font-weight: bold; | ||
| 60 | } | 60 | } |
| 61 | } | 61 | } |
| 62 | 62 | ||
