diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 4 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 43 | ||||
-rw-r--r-- | src/objects/_button.scss | 4 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 8 | ||||
-rw-r--r-- | src/objects/_radio.scss | 8 | ||||
-rw-r--r-- | src/objects/_switch.scss | 10 |
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'); |