summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_links.scss33
-rw-r--r--src/scopes/_tables.scss115
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}