summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_action-button.scss4
-rw-r--r--src/objects/_avatar.scss43
-rw-r--r--src/objects/_button.scss4
-rw-r--r--src/objects/_checkbox.scss8
-rw-r--r--src/objects/_radio.scss8
-rw-r--r--src/objects/_switch.scss10
6 files changed, 43 insertions, 34 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ab9e38b..83321da 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -4,8 +4,8 @@
4@include iro.props-namespace('action-button') { 4@include iro.props-namespace('action-button') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: iro.fn-px-to-rem(10px), 7 --pad-x: fn.global-dim(--size --125),
8 --pad-y: iro.fn-px-to-rem(10px), 8 --pad-y: fn.global-dim(--size --125),
9 --rounding: 3px, 9 --rounding: 3px,
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 09bebf0..0d9773f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -4,9 +4,18 @@
4@include iro.props-namespace('avatar') { 4@include iro.props-namespace('avatar') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(40px), 7 --100: (
8 --size-sm: iro.fn-px-to-rem(30px), 8 --size: fn.global-dim(--size --450),
9 --size-xs: iro.fn-px-to-rem(18px), 9 --font-size: fn.global-dim(--font-size --100),
10 ),
11 --75: (
12 --size: fn.global-dim(--size --325),
13 --font-size: fn.global-dim(--font-size --75),
14 ),
15 --50: (
16 --size: fn.global-dim(--size --225),
17 --font-size: fn.global-dim(--font-size --50),
18 ),
10 --indicator-size: fn.foreign-dim(--status-indicator, --size), 19 --indicator-size: fn.foreign-dim(--status-indicator, --size),
11 --indicator-spacing: iro.fn-px-to-rem(3px), 20 --indicator-spacing: iro.fn-px-to-rem(3px),
12 --rounding: 25%, 21 --rounding: 25%,
@@ -24,7 +33,7 @@
24 @include iro.bem-object(iro.props-namespace()) { 33 @include iro.bem-object(iro.props-namespace()) {
25 display: inline-block; 34 display: inline-block;
26 position: relative; 35 position: relative;
27 font-size: 1rem; 36 font-size: fn.dim(--100 --font-size);
28 font-style: normal; 37 font-style: normal;
29 38
30 @include iro.bem-elem('status') { 39 @include iro.bem-elem('status') {
@@ -45,12 +54,12 @@
45 54
46 @include iro.bem-elem('content') { 55 @include iro.bem-elem('content') {
47 display: block; 56 display: block;
48 width: fn.dim(--size); 57 width: fn.dim(--100 --size);
49 height: fn.dim(--size); 58 height: fn.dim(--100 --size);
50 border-radius: fn.dim(--rounding); 59 border-radius: fn.dim(--rounding);
51 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); 60 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
52 color: #fff; 61 color: #fff;
53 line-height: fn.dim(--size); 62 line-height: fn.dim(--100 --size);
54 text-align: center; 63 text-align: center;
55 object-fit: cover; 64 object-fit: cover;
56 object-position: center center; 65 object-position: center center;
@@ -68,23 +77,23 @@
68 } 77 }
69 } 78 }
70 79
71 @include iro.bem-modifier('sm') { 80 @include iro.bem-modifier('75') {
72 font-size: iro.fn-px-to-rem(13px); 81 font-size: fn.dim(--75 --font-size);
73 82
74 @include iro.bem-elem('content') { 83 @include iro.bem-elem('content') {
75 width: fn.dim(--size-sm); 84 width: fn.dim(--75 --size);
76 height: fn.dim(--size-sm); 85 height: fn.dim(--75 --size);
77 line-height: fn.dim(--size-sm); 86 line-height: fn.dim(--75 --size);
78 } 87 }
79 } 88 }
80 89
81 @include iro.bem-modifier('xs') { 90 @include iro.bem-modifier('50') {
82 font-size: iro.fn-px-to-rem(11px); 91 font-size: fn.dim(--50 --font-size);
83 92
84 @include iro.bem-elem('content') { 93 @include iro.bem-elem('content') {
85 width: fn.dim(--size-xs); 94 width: fn.dim(--50 --size);
86 height: fn.dim(--size-xs); 95 height: fn.dim(--50 --size);
87 line-height: fn.dim(--size-xs); 96 line-height: fn.dim(--50 --size);
88 } 97 }
89 } 98 }
90 } 99 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 15804f1..94711b7 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -43,8 +43,8 @@
43@include iro.props-namespace('button') { 43@include iro.props-namespace('button') {
44 @include iro.props-store(( 44 @include iro.props-store((
45 --dims: ( 45 --dims: (
46 --pad-x: iro.fn-px-to-rem(19px), 46 --pad-x: fn.global-dim(--size --225),
47 --pad-y: iro.fn-px-to-rem(8px), 47 --pad-y: fn.global-dim(--size --100),
48 --rounding: 10em, 48 --rounding: 10em,
49 ), 49 ),
50 ), 'dims'); 50 ), 'dims');
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 107d7ad..f5c599b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('checkbox') { 4@include iro.props-namespace('checkbox') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(14px), 7 --size: fn.global-dim(--size --175),
8 --label-gap: iro.fn-px-to-rem(10px), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: fn.global-dim(--size --65),
12 --margin-right: fn.global-dim(--size --325), 12 --margin-right: fn.global-dim(--size --325),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 96a5174..9482c5b 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -4,11 +4,11 @@
4@include iro.props-namespace('radio') { 4@include iro.props-namespace('radio') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --diameter: iro.fn-px-to-rem(15px), 7 --diameter: calc(fn.global-dim(--size --175) + 1px),
8 --label-gap: iro.fn-px-to-rem(10px), 8 --label-gap: fn.global-dim(--size --125),
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: fn.global-dim(--size --65),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: fn.global-dim(--size --65),
12 --margin-right: fn.global-dim(--size --325), 12 --margin-right: fn.global-dim(--size --325),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index b5aa839..447335e 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,12 +4,12 @@
4@include iro.props-namespace('switch') { 4@include iro.props-namespace('switch') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --width: iro.fn-px-to-rem(26px), 7 --width: fn.global-dim(--size --325),
8 --height: iro.fn-px-to-rem(15px), 8 --height: calc(fn.global-dim(--size --175) + 1px),
9 --label-gap: iro.fn-px-to-rem(10px), 9 --label-gap: fn.global-dim(--size --125),
10 --border-width: fn.global-dim(--border-width --medium), 10 --border-width: fn.global-dim(--border-width --medium),
11 --pad-x: iro.fn-px-to-rem(5px), 11 --pad-x: fn.global-dim(--size --65),
12 --pad-y: iro.fn-px-to-rem(5px), 12 --pad-y: fn.global-dim(--size --65),
13 --margin-right: fn.global-dim(--size --325), 13 --margin-right: fn.global-dim(--size --325),
14 ), 14 ),
15 ), 'dims'); 15 ), 'dims');