diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_colored-links.scss | 9 | ||||
-rw-r--r-- | src/scopes/_invisible-links.scss | 9 | ||||
-rw-r--r-- | src/scopes/_tables.scss | 55 |
3 files changed, 61 insertions, 12 deletions
diff --git a/src/scopes/_colored-links.scss b/src/scopes/_colored-links.scss index cdd3ed4..0c58bf1 100644 --- a/src/scopes/_colored-links.scss +++ b/src/scopes/_colored-links.scss | |||
@@ -8,7 +8,7 @@ | |||
8 | --visited: fn.global-color(--accent --link-visited --obj-lo), | 8 | --visited: fn.global-color(--accent --link-visited --obj-lo), |
9 | --key-focus: ( | 9 | --key-focus: ( |
10 | --border: fn.global-color(--focus --fill), | 10 | --border: fn.global-color(--focus --fill), |
11 | --shadow: fn.global-color(--focus --shadow), | 11 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), |
12 | ), | 12 | ), |
13 | ) | 13 | ) |
14 | ), 'colors'); | 14 | ), 'colors'); |
@@ -26,14 +26,11 @@ | |||
26 | 26 | ||
27 | :link, | 27 | :link, |
28 | :visited { | 28 | :visited { |
29 | margin: -2px; | 29 | border-radius: .5px; |
30 | border: 2px solid transparent; | ||
31 | border-radius: 2px; | ||
32 | 30 | ||
33 | @include iro.bem-at-theme('keyboard') { | 31 | @include iro.bem-at-theme('keyboard') { |
34 | &:focus { | 32 | &:focus { |
35 | border-color: fn.color(--key-focus --border); | 33 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); |
36 | box-shadow: fn.color(--key-focus --shadow); | ||
37 | } | 34 | } |
38 | } | 35 | } |
39 | } | 36 | } |
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss index 0326bd2..e4493d4 100644 --- a/src/scopes/_invisible-links.scss +++ b/src/scopes/_invisible-links.scss | |||
@@ -6,7 +6,7 @@ | |||
6 | --colors: ( | 6 | --colors: ( |
7 | --key-focus: ( | 7 | --key-focus: ( |
8 | --border: fn.global-color(--focus --fill), | 8 | --border: fn.global-color(--focus --fill), |
9 | --shadow: fn.global-color(--focus --shadow), | 9 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), |
10 | ), | 10 | ), |
11 | ) | 11 | ) |
12 | ), 'colors'); | 12 | ), 'colors'); |
@@ -14,9 +14,7 @@ | |||
14 | @include iro.bem-scope(iro.props-namespace()) { | 14 | @include iro.bem-scope(iro.props-namespace()) { |
15 | :link, | 15 | :link, |
16 | :visited { | 16 | :visited { |
17 | margin: -2px; | 17 | border-radius: .5px; |
18 | border: 2px solid transparent; | ||
19 | border-radius: 2px; | ||
20 | color: currentColor; | 18 | color: currentColor; |
21 | text-decoration: none; | 19 | text-decoration: none; |
22 | 20 | ||
@@ -26,8 +24,7 @@ | |||
26 | 24 | ||
27 | @include iro.bem-at-theme('keyboard') { | 25 | @include iro.bem-at-theme('keyboard') { |
28 | &:focus { | 26 | &:focus { |
29 | border-color: fn.color(--key-focus --border); | 27 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); |
30 | box-shadow: fn.color(--key-focus --shadow); | ||
31 | } | 28 | } |
32 | } | 29 | } |
33 | } | 30 | } |
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss new file mode 100644 index 0000000..e8135eb --- /dev/null +++ b/src/scopes/_tables.scss | |||
@@ -0,0 +1,55 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | @use '../mixins' as mx; | ||
4 | |||
5 | @include iro.props-namespace('tables') { | ||
6 | @include iro.props-store(( | ||
7 | --dims: ( | ||
8 | --pad-x: fn.global-dim(--size --175), | ||
9 | --pad-y: fn.global-dim(--size --125), | ||
10 | ), | ||
11 | ), 'dims'); | ||
12 | |||
13 | @include iro.props-store(( | ||
14 | --colors: ( | ||
15 | --border: fn.global-color(--obj), | ||
16 | --heading: fn.global-color(--fg-hi), | ||
17 | ) | ||
18 | ), 'colors'); | ||
19 | |||
20 | @include iro.bem-scope(iro.props-namespace()) { | ||
21 | table { | ||
22 | border-spacing: 0; | ||
23 | border-collapse: separate; | ||
24 | } | ||
25 | |||
26 | th { | ||
27 | @include mx.set-font(--standard, ( | ||
28 | --line-height: null, | ||
29 | --size: fn.global-dim(--font-size --50), | ||
30 | --weight: 500, | ||
31 | --transform: uppercase, | ||
32 | --spacing: .5px | ||
33 | )); | ||
34 | |||
35 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
36 | color: fn.color(--heading); | ||
37 | text-align: left; | ||
38 | } | ||
39 | |||
40 | td { | ||
41 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
42 | border-width: 1px 0 0; | ||
43 | border-style: solid; | ||
44 | border-color: fn.color(--border); | ||
45 | } | ||
46 | |||
47 | tr { | ||
48 | &:last-child { | ||
49 | td { | ||
50 | border-bottom-width: 1px; | ||
51 | } | ||
52 | } | ||
53 | } | ||
54 | } | ||
55 | } | ||