summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_colored-links.scss9
-rw-r--r--src/scopes/_invisible-links.scss9
-rw-r--r--src/scopes/_tables.scss55
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}