diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/_utils.scss | 4 | ||||
| -rw-r--r-- | assets/css/components/_card.scss | 25 | ||||
| -rw-r--r-- | assets/css/components/_section-heading.scss | 5 | ||||
| -rw-r--r-- | assets/css/layouts/_card-grid.scss | 2 | ||||
| -rw-r--r-- | assets/css/layouts/_container.scss | 2 | ||||
| -rw-r--r-- | assets/css/objects/_icon.scss | 2 |
6 files changed, 24 insertions, 16 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 3eff6fc..5e07d6f 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss | |||
| @@ -20,6 +20,10 @@ | |||
| 20 | margin-top: 0; | 20 | margin-top: 0; |
| 21 | } | 21 | } |
| 22 | 22 | ||
| 23 | @include utility('ml') { | ||
| 24 | margin-left: auto; | ||
| 25 | } | ||
| 26 | |||
| 23 | @include utility('db') { | 27 | @include utility('db') { |
| 24 | display: block; | 28 | display: block; |
| 25 | } | 29 | } |
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 21eeb9f..6260518 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
| @@ -1,8 +1,8 @@ | |||
| 1 | @include namespace('card') { | 1 | @include namespace('card') { |
| 2 | @include store(( | 2 | @include store(( |
| 3 | --dims: ( | 3 | --dims: ( |
| 4 | --pad-x: 1.3em, | 4 | --pad-x: 1.1em, |
| 5 | --pad-y: 1em | 5 | --pad-y: .8em |
| 6 | ), | 6 | ), |
| 7 | --colors: ( | 7 | --colors: ( |
| 8 | --bg: prop(--colors --bg-lo, $global: true), | 8 | --bg: prop(--colors --bg-lo, $global: true), |
| @@ -13,8 +13,9 @@ | |||
| 13 | )); | 13 | )); |
| 14 | 14 | ||
| 15 | @include component(namespace()) { | 15 | @include component(namespace()) { |
| 16 | display: block; | 16 | display: flex; |
| 17 | position: relative; | 17 | position: relative; |
| 18 | align-items: center; | ||
| 18 | background-color: prop(--colors --bg); | 19 | background-color: prop(--colors --bg); |
| 19 | line-height: 1.4; | 20 | line-height: 1.4; |
| 20 | 21 | ||
| @@ -37,18 +38,15 @@ | |||
| 37 | } | 38 | } |
| 38 | 39 | ||
| 39 | @include element('content') { | 40 | @include element('content') { |
| 40 | display: flex; | 41 | box-sizing: border-box; |
| 41 | box-sizing: border-box; | 42 | width: 100%; |
| 42 | flex-direction: row; | 43 | padding: prop(--dims --pad-y) prop(--dims --pad-x); |
| 43 | align-items: center; | ||
| 44 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
| 45 | 44 | ||
| 46 | @include modifier('flip') { | 45 | @include modifier('flip') { |
| 47 | visibility: hidden; | 46 | visibility: hidden; |
| 48 | position: absolute; | 47 | position: absolute; |
| 49 | top: 0; | 48 | top: 0; |
| 50 | left: 0; | 49 | left: 0; |
| 51 | width: 100%; | ||
| 52 | height: 100%; | 50 | height: 100%; |
| 53 | transition: | 51 | transition: |
| 54 | visibility 0s linear .2s, | 52 | visibility 0s linear .2s, |
| @@ -56,10 +54,17 @@ | |||
| 56 | opacity: 0; | 54 | opacity: 0; |
| 57 | background-color: prop(--colors --flip --bg); | 55 | background-color: prop(--colors --flip --bg); |
| 58 | } | 56 | } |
| 57 | |||
| 58 | @include sibling-element('icon') { | ||
| 59 | padding-right: prop(--dims --pad-x); | ||
| 60 | padding-left: 0; | ||
| 61 | } | ||
| 59 | } | 62 | } |
| 60 | 63 | ||
| 61 | @include element('icon') { | 64 | @include element('icon') { |
| 62 | margin-left: auto; | 65 | display: block; |
| 66 | flex: 0 0 auto; | ||
| 67 | padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); | ||
| 63 | } | 68 | } |
| 64 | } | 69 | } |
| 65 | } | 70 | } |
diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss index e904943..717442b 100644 --- a/assets/css/components/_section-heading.scss +++ b/assets/css/components/_section-heading.scss | |||
| @@ -10,8 +10,9 @@ | |||
| 10 | 10 | ||
| 11 | @include component(namespace()) { | 11 | @include component(namespace()) { |
| 12 | margin: 0 0 prop(--dims --pad-y); | 12 | margin: 0 0 prop(--dims --pad-y); |
| 13 | font-size: 1 / 16 * 12em; | 13 | font-family: $font-fam--text; |
| 14 | font-weight: 550; | 14 | font-size: 1 / 16 * 13em; |
| 15 | font-weight: bold; | ||
| 15 | letter-spacing: .2em; | 16 | letter-spacing: .2em; |
| 16 | text-transform: uppercase; | 17 | text-transform: uppercase; |
| 17 | 18 | ||
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss index 7998952..8e9091a 100644 --- a/assets/css/layouts/_card-grid.scss +++ b/assets/css/layouts/_card-grid.scss | |||
| @@ -1,7 +1,7 @@ | |||
| 1 | @include namespace('card-grid') { | 1 | @include namespace('card-grid') { |
| 2 | @include layout(namespace()) { | 2 | @include layout(namespace()) { |
| 3 | display: grid; | 3 | display: grid; |
| 4 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); | 4 | grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); |
| 5 | gap: .7rem; | 5 | gap: .7rem; |
| 6 | } | 6 | } |
| 7 | } | 7 | } |
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 218841d..d63460b 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss | |||
| @@ -15,7 +15,7 @@ | |||
| 15 | 15 | ||
| 16 | @include store(( | 16 | @include store(( |
| 17 | --dims: ( | 17 | --dims: ( |
| 18 | --pad-x: 5%, | 18 | --pad-x: 4%, |
| 19 | --pad-y: $line-height * 1rem | 19 | --pad-y: $line-height * 1rem |
| 20 | ) | 20 | ) |
| 21 | ), 'sm'); | 21 | ), 'sm'); |
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss index cb966c8..e708dd5 100644 --- a/assets/css/objects/_icon.scss +++ b/assets/css/objects/_icon.scss | |||
| @@ -5,8 +5,6 @@ | |||
| 5 | height: 16px; | 5 | height: 16px; |
| 6 | stroke-width: 1.5px; | 6 | stroke-width: 1.5px; |
| 7 | stroke-linecap: round; | 7 | stroke-linecap: round; |
| 8 | stroke: currentColor; | ||
| 9 | stroke-linejoin: round; | 8 | stroke-linejoin: round; |
| 10 | fill: none; | ||
| 11 | } | 9 | } |
| 12 | } | 10 | } |
