summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-16 09:22:21 +0200
committerVolpeon <git@volpeon.ink>2022-06-16 09:22:21 +0200
commit9ea95d1bed4adc3551a6fa01b40b9d0e1ccacb81 (patch)
tree03798cef246e413ddac4a38976d1c8108c89f86e /src
parentUpdate (diff)
downloadiro-design-9ea95d1bed4adc3551a6fa01b40b9d0e1ccacb81.tar.gz
iro-design-9ea95d1bed4adc3551a6fa01b40b9d0e1ccacb81.tar.bz2
iro-design-9ea95d1bed4adc3551a6fa01b40b9d0e1ccacb81.zip
Added tables scope, fixed anchor styling
Diffstat (limited to 'src')
-rw-r--r--src/_declare-vars.scss6
-rw-r--r--src/_scopes.scss1
-rw-r--r--src/scopes/_colored-links.scss9
-rw-r--r--src/scopes/_invisible-links.scss9
-rw-r--r--src/scopes/_tables.scss55
5 files changed, 66 insertions, 14 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2fe7dca..3fe8389 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -92,7 +92,9 @@
92 --thin: 1px, 92 --thin: 1px,
93 ), 93 ),
94 94
95 --focus-outline-width: 3px, 95 --focus: (
96 --outline-width: 3px,
97 ),
96 98
97 --paragraph: ( 99 --paragraph: (
98 --margin-top: fn.dim(--size --300, null), 100 --margin-top: fn.dim(--size --300, null),
@@ -183,7 +185,7 @@
183 ), 185 ),
184 186
185 --focus: ( 187 --focus: (
186 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), 188 --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --semi, null),
187 --fill: fn.color(--accent --primary --bg, null), 189 --fill: fn.color(--accent --primary --bg, null),
188 --text: fn.color(--accent --primary --obj, null), 190 --text: fn.color(--accent --primary --obj, null),
189 --fill-text: fn.color(--accent --primary --fg, null), 191 --fill-text: fn.color(--accent --primary --fg, null),
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 9a9d8ca..abfb6a0 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -4,3 +4,4 @@
4@use 'scopes/blockquotes'; 4@use 'scopes/blockquotes';
5@use 'scopes/lists'; 5@use 'scopes/lists';
6@use 'scopes/headings'; 6@use 'scopes/headings';
7@use 'scopes/tables';
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}