diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_links.scss | 33 | ||||
-rw-r--r-- | src/scopes/_tables.scss | 115 |
2 files changed, 135 insertions, 13 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 9e0b18a..552b02a 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
@@ -9,7 +9,13 @@ | |||
9 | 9 | ||
10 | --hover: ( | 10 | --hover: ( |
11 | --underline: fn.global-dim(--border --medium), | 11 | --underline: fn.global-dim(--border --medium), |
12 | ) | 12 | ), |
13 | |||
14 | --key-focus: ( | ||
15 | --border: fn.global-dim(--key-focus --border), | ||
16 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
17 | --outline: fn.global-dim(--key-focus --border), | ||
18 | ), | ||
13 | ), | 19 | ), |
14 | --colors: ( | 20 | --colors: ( |
15 | --underline: fn.global-color(--text-mute-more), | 21 | --underline: fn.global-color(--text-mute-more), |
@@ -33,22 +39,24 @@ | |||
33 | ), | 39 | ), |
34 | 40 | ||
35 | --key-focus: ( | 41 | --key-focus: ( |
36 | --bg: fn.global-color(--focus-static --400), | 42 | --text: fn.global-color(--focus --text), |
37 | --text: fn.global-color(--focus-static --400-text), | 43 | --border: fn.global-color(--focus --border), |
38 | ) | 44 | --outline: fn.global-color(--focus --outline), |
39 | ) | 45 | ), |
46 | ), | ||
40 | )); | 47 | )); |
41 | 48 | ||
42 | @include iro.bem-scope(iro.props-namespace()) { | 49 | @include iro.bem-scope(iro.props-namespace()) { |
43 | :link, | 50 | :link, |
44 | :visited { | 51 | :visited { |
45 | margin: calc(-1 * fn.global-dim(--border --thick)); | 52 | margin: calc(-1 * fn.dim(--key-focus --border-offset)); |
46 | padding: fn.global-dim(--border --thick); | 53 | padding: fn.dim(--key-focus --border-offset); |
47 | border-radius: calc(fn.dim(--rounding) + fn.global-dim(--border --thick)); | 54 | border-radius: fn.dim(--rounding); |
48 | color: currentColor; | 55 | color: currentColor; |
49 | text-decoration: underline; | 56 | text-decoration: underline; |
50 | text-decoration-color: fn.color(--underline); | 57 | text-decoration-color: fn.color(--underline); |
51 | text-decoration-thickness: fn.dim(--underline); | 58 | text-decoration-thickness: fn.dim(--underline); |
59 | box-decoration-break: clone; | ||
52 | 60 | ||
53 | &:hover { | 61 | &:hover { |
54 | text-decoration: underline; | 62 | text-decoration: underline; |
@@ -57,11 +65,10 @@ | |||
57 | } | 65 | } |
58 | 66 | ||
59 | &:focus-visible { | 67 | &:focus-visible { |
60 | background-color: fn.color(--key-focus --bg); | 68 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
61 | color: fn.color(--key-focus --text); | 69 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); |
62 | text-decoration: underline; | 70 | color: fn.color(--key-focus --text); |
63 | text-decoration-thickness: fn.dim(--hover --underline); | 71 | text-decoration: none; |
64 | text-decoration-skip-ink: none; | ||
65 | } | 72 | } |
66 | } | 73 | } |
67 | 74 | ||
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss new file mode 100644 index 0000000..016ed31 --- /dev/null +++ b/src/scopes/_tables.scss | |||
@@ -0,0 +1,115 @@ | |||
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-i: fn.foreign-dim(--table, --pad-i), | ||
9 | --pad-b: fn.foreign-dim(--table, --pad-b), | ||
10 | --rounding: fn.foreign-dim(--table, --rounding), | ||
11 | --border: fn.foreign-dim(--table, --border), | ||
12 | --margin-bs: fn.global-dim(--paragraph --margin-bs), | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --border: fn.foreign-color(--table, --border), | ||
16 | --heading: fn.foreign-color(--table, --heading), | ||
17 | --box: ( | ||
18 | --bg: fn.foreign-color(--table, --box --bg), | ||
19 | ) | ||
20 | ) | ||
21 | )); | ||
22 | |||
23 | @include iro.bem-scope(iro.props-namespace()) { | ||
24 | table { | ||
25 | margin-block-start: fn.dim(--margin-bs); | ||
26 | border-spacing: 0; | ||
27 | border-collapse: separate; | ||
28 | } | ||
29 | |||
30 | th { | ||
31 | @include mx.set-font(--standard, ( | ||
32 | --line-height: null, | ||
33 | --size: fn.global-dim(--font-size --50), | ||
34 | --weight: bold, | ||
35 | --transform: uppercase, | ||
36 | --spacing: .5px | ||
37 | )); | ||
38 | |||
39 | padding-block: fn.dim(--pad-b); | ||
40 | padding-inline: fn.dim(--pad-i); | ||
41 | color: fn.color(--heading); | ||
42 | text-align: left; | ||
43 | } | ||
44 | |||
45 | td { | ||
46 | padding-block: fn.dim(--pad-b); | ||
47 | padding-inline: fn.dim(--pad-i); | ||
48 | border-width: 0; | ||
49 | border-block-start-width: fn.dim(--border); | ||
50 | border-style: solid; | ||
51 | border-color: fn.color(--border); | ||
52 | } | ||
53 | |||
54 | tr { | ||
55 | &:last-child { | ||
56 | td { | ||
57 | border-block-end-width: fn.dim(--border); | ||
58 | } | ||
59 | } | ||
60 | } | ||
61 | |||
62 | @include iro.bem-modifier('flush') { | ||
63 | th, | ||
64 | td { | ||
65 | &:first-child { | ||
66 | padding-inline-start: 0; | ||
67 | } | ||
68 | |||
69 | &:last-child { | ||
70 | padding-inline-end: 0; | ||
71 | } | ||
72 | } | ||
73 | } | ||
74 | |||
75 | @include iro.bem-modifier('box') { | ||
76 | td { | ||
77 | background-color: fn.color(--box --bg); | ||
78 | |||
79 | &:first-child { | ||
80 | border-inline-start-width: fn.dim(--border); | ||
81 | } | ||
82 | |||
83 | &:last-child { | ||
84 | border-inline-end-width: fn.dim(--border); | ||
85 | } | ||
86 | } | ||
87 | |||
88 | tr { | ||
89 | &:first-child { | ||
90 | td { | ||
91 | &:first-child { | ||
92 | border-start-start-radius: fn.dim(--rounding); | ||
93 | } | ||
94 | |||
95 | &:last-child { | ||
96 | border-start-end-radius: fn.dim(--rounding); | ||
97 | } | ||
98 | } | ||
99 | } | ||
100 | |||
101 | &:last-child { | ||
102 | td { | ||
103 | &:first-child { | ||
104 | border-end-start-radius: fn.dim(--rounding); | ||
105 | } | ||
106 | |||
107 | &:last-child { | ||
108 | border-end-end-radius: fn.dim(--rounding); | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | } | ||
115 | } | ||