diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 8 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 89 | ||||
-rw-r--r-- | src/objects/_button.scss | 8 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 10 | ||||
-rw-r--r-- | src/objects/_radio.scss | 10 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 33 | ||||
-rw-r--r-- | src/objects/_switch.scss | 10 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 8 |
8 files changed, 149 insertions, 27 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index dd5cea7..86c7089 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss | |||
@@ -4,9 +4,9 @@ | |||
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 | --padding-x: .6rem, | 7 | --pad-x: .6rem, |
8 | --padding-y: .6rem, | 8 | --pad-y: .6rem, |
9 | --rounding: 3px, | 9 | --rounding: 3px, |
10 | ), | 10 | ), |
11 | ), 'dims'); | 11 | ), 'dims'); |
12 | 12 | ||
@@ -93,7 +93,7 @@ | |||
93 | 93 | ||
94 | @include iro.bem-object(iro.props-namespace()) { | 94 | @include iro.bem-object(iro.props-namespace()) { |
95 | display: inline-block; | 95 | display: inline-block; |
96 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 96 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
97 | border: 1px solid fn.color(--border); | 97 | border: 1px solid fn.color(--border); |
98 | border-radius: fn.dim(--rounding); | 98 | border-radius: fn.dim(--rounding); |
99 | background-color: fn.color(--bg); | 99 | background-color: fn.color(--bg); |
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss new file mode 100644 index 0000000..3bdfddc --- /dev/null +++ b/src/objects/_avatar.scss | |||
@@ -0,0 +1,89 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('avatar') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --size: iro.fn-px-to-rem(40px), | ||
8 | --size-sm: iro.fn-px-to-rem(30px), | ||
9 | --size-xs: iro.fn-px-to-rem(20px), | ||
10 | --indicator-size: fn.foreign-dim(--status-indicator, --size), | ||
11 | --indicator-spacing: iro.fn-px-to-rem(3px), | ||
12 | --rounding: 25%, | ||
13 | ), | ||
14 | ), 'dims'); | ||
15 | |||
16 | @include iro.props-store(( | ||
17 | --colors: ( | ||
18 | --h: 354, | ||
19 | --s: 44%, | ||
20 | --l: 45%, | ||
21 | ), | ||
22 | ), 'colors'); | ||
23 | |||
24 | @include iro.bem-object(iro.props-namespace()) { | ||
25 | display: inline-block; | ||
26 | position: relative; | ||
27 | font-size: 1rem; | ||
28 | font-style: normal; | ||
29 | |||
30 | @include iro.bem-elem('status') { | ||
31 | position: absolute; | ||
32 | right: 0; | ||
33 | bottom: 0; | ||
34 | |||
35 | @include iro.bem-next-elem('content') { | ||
36 | mask-image: radial-gradient( | ||
37 | circle calc(.5 * fn.dim(--indicator-size) + fn.dim(--indicator-spacing)) at | ||
38 | calc(100% - .5 * fn.dim(--indicator-size)) | ||
39 | calc(100% - .5 * fn.dim(--indicator-size)), | ||
40 | transparent 95%, | ||
41 | #fff | ||
42 | ); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | @include iro.bem-elem('content') { | ||
47 | display: block; | ||
48 | width: fn.dim(--size); | ||
49 | height: fn.dim(--size); | ||
50 | border-radius: fn.dim(--rounding); | ||
51 | background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); | ||
52 | color: #fff; | ||
53 | line-height: fn.dim(--size); | ||
54 | text-align: center; | ||
55 | } | ||
56 | |||
57 | @include iro.bem-modifier('circle') { | ||
58 | @include iro.bem-elem('content') { | ||
59 | border-radius: 100%; | ||
60 | } | ||
61 | } | ||
62 | |||
63 | @include iro.bem-modifier('placeholder') { | ||
64 | @include iro.bem-elem('content') { | ||
65 | background-color: hsl(0, 0%, fn.color(--l)); | ||
66 | } | ||
67 | } | ||
68 | |||
69 | @include iro.bem-modifier('sm') { | ||
70 | font-size: iro.fn-px-to-rem(13px); | ||
71 | |||
72 | @include iro.bem-elem('content') { | ||
73 | width: fn.dim(--size-sm); | ||
74 | height: fn.dim(--size-sm); | ||
75 | line-height: fn.dim(--size-sm); | ||
76 | } | ||
77 | } | ||
78 | |||
79 | @include iro.bem-modifier('xs') { | ||
80 | font-size: iro.fn-px-to-rem(12px); | ||
81 | |||
82 | @include iro.bem-elem('content') { | ||
83 | width: fn.dim(--size-xs); | ||
84 | height: fn.dim(--size-xs); | ||
85 | line-height: fn.dim(--size-xs); | ||
86 | } | ||
87 | } | ||
88 | } | ||
89 | } | ||
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 57c49e8..f158176 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -35,9 +35,9 @@ | |||
35 | @include iro.props-namespace('button') { | 35 | @include iro.props-namespace('button') { |
36 | @include iro.props-store(( | 36 | @include iro.props-store(( |
37 | --dims: ( | 37 | --dims: ( |
38 | --padding-x: 1.2rem, | 38 | --pad-x: 1.2rem, |
39 | --padding-y: .5rem, | 39 | --pad-y: .5rem, |
40 | --rounding: 10em, | 40 | --rounding: 10em, |
41 | ), | 41 | ), |
42 | ), 'dims'); | 42 | ), 'dims'); |
43 | 43 | ||
@@ -114,7 +114,7 @@ | |||
114 | @include typography.set-font(vars.$font--main, (weight: 500)); | 114 | @include typography.set-font(vars.$font--main, (weight: 500)); |
115 | 115 | ||
116 | display: inline-block; | 116 | display: inline-block; |
117 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 117 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
118 | border: 2px solid transparent; | 118 | border: 2px solid transparent; |
119 | border-radius: fn.dim(--rounding); | 119 | border-radius: fn.dim(--rounding); |
120 | line-height: 1; | 120 | line-height: 1; |
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 377b002..3bda5e7 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -7,8 +7,8 @@ | |||
7 | --size: iro.fn-px-to-rem(14px), | 7 | --size: iro.fn-px-to-rem(14px), |
8 | --label-gap: .6rem, | 8 | --label-gap: .6rem, |
9 | --border-width: fn.global-dim(--border-width --medium), | 9 | --border-width: fn.global-dim(--border-width --medium), |
10 | --padding-x: .3rem, | 10 | --pad-x: .3rem, |
11 | --padding-y: .3rem, | 11 | --pad-y: .3rem, |
12 | --margin-right: fn.global-dim(--spacing --x --md), | 12 | --margin-right: fn.global-dim(--spacing --x --md), |
13 | ), | 13 | ), |
14 | ), 'dims'); | 14 | ), 'dims'); |
@@ -46,9 +46,9 @@ | |||
46 | display: inline-flex; | 46 | display: inline-flex; |
47 | position: relative; | 47 | position: relative; |
48 | align-items: flex-start; | 48 | align-items: flex-start; |
49 | margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); | 49 | margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); |
50 | margin-left: calc(-1 * fn.dim(--padding-x)); | 50 | margin-left: calc(-1 * fn.dim(--pad-x)); |
51 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 51 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
52 | 52 | ||
53 | @include iro.bem-elem('box') { | 53 | @include iro.bem-elem('box') { |
54 | display: block; | 54 | display: block; |
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 51bfcd8..26e8c31 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -7,8 +7,8 @@ | |||
7 | --diameter: iro.fn-px-to-rem(15px), | 7 | --diameter: iro.fn-px-to-rem(15px), |
8 | --label-gap: .6rem, | 8 | --label-gap: .6rem, |
9 | --border-width: fn.global-dim(--border-width --medium), | 9 | --border-width: fn.global-dim(--border-width --medium), |
10 | --padding-x: .3rem, | 10 | --pad-x: .3rem, |
11 | --padding-y: .3rem, | 11 | --pad-y: .3rem, |
12 | --margin-right: fn.global-dim(--spacing --x --md), | 12 | --margin-right: fn.global-dim(--spacing --x --md), |
13 | ), | 13 | ), |
14 | ), 'dims'); | 14 | ), 'dims'); |
@@ -46,9 +46,9 @@ | |||
46 | display: inline-flex; | 46 | display: inline-flex; |
47 | position: relative; | 47 | position: relative; |
48 | align-items: flex-start; | 48 | align-items: flex-start; |
49 | margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); | 49 | margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); |
50 | margin-left: calc(-1 * fn.dim(--padding-x)); | 50 | margin-left: calc(-1 * fn.dim(--pad-x)); |
51 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 51 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
52 | 52 | ||
53 | @include iro.bem-elem('circle') { | 53 | @include iro.bem-elem('circle') { |
54 | display: block; | 54 | display: block; |
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss new file mode 100644 index 0000000..18d6f81 --- /dev/null +++ b/src/objects/_status-indicator.scss | |||
@@ -0,0 +1,33 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('status-indicator') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --size: iro.fn-px-to-rem(10px), | ||
8 | ), | ||
9 | ), 'dims'); | ||
10 | |||
11 | @include iro.props-store(( | ||
12 | --colors: ( | ||
13 | --default: fn.global-color(--obj-lo), | ||
14 | --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 15%), | ||
15 | --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 15%), | ||
16 | --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 15%), | ||
17 | ), | ||
18 | ), 'colors'); | ||
19 | |||
20 | @include iro.bem-object(iro.props-namespace()) { | ||
21 | display: inline-block; | ||
22 | width: fn.dim(--size); | ||
23 | height: fn.dim(--size); | ||
24 | border-radius: fn.dim(--size); | ||
25 | background-color: fn.color(--default); | ||
26 | |||
27 | @each $color in 'green' 'yellow' 'red' { | ||
28 | @include iro.bem-is($color) { | ||
29 | background-color: fn.color(--#{$color}); | ||
30 | } | ||
31 | } | ||
32 | } | ||
33 | } | ||
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 85aa782..2d70844 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
@@ -8,8 +8,8 @@ | |||
8 | --height: iro.fn-px-to-rem(15px), | 8 | --height: iro.fn-px-to-rem(15px), |
9 | --label-gap: .6rem, | 9 | --label-gap: .6rem, |
10 | --border-width: fn.global-dim(--border-width --medium), | 10 | --border-width: fn.global-dim(--border-width --medium), |
11 | --padding-x: .3rem, | 11 | --pad-x: .3rem, |
12 | --padding-y: .3rem, | 12 | --pad-y: .3rem, |
13 | --margin-right: fn.global-dim(--spacing --x --md), | 13 | --margin-right: fn.global-dim(--spacing --x --md), |
14 | ), | 14 | ), |
15 | ), 'dims'); | 15 | ), 'dims'); |
@@ -50,9 +50,9 @@ | |||
50 | display: inline-flex; | 50 | display: inline-flex; |
51 | position: relative; | 51 | position: relative; |
52 | align-items: flex-start; | 52 | align-items: flex-start; |
53 | margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); | 53 | margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); |
54 | margin-left: calc(-1 * fn.dim(--padding-x)); | 54 | margin-left: calc(-1 * fn.dim(--pad-x)); |
55 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 55 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
56 | 56 | ||
57 | @include iro.bem-elem('indicator') { | 57 | @include iro.bem-elem('indicator') { |
58 | display: block; | 58 | display: block; |
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index ca0eb5b..90d4b11 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -34,8 +34,8 @@ | |||
34 | @include iro.props-namespace('text-field') { | 34 | @include iro.props-namespace('text-field') { |
35 | @include iro.props-store(( | 35 | @include iro.props-store(( |
36 | --dims: ( | 36 | --dims: ( |
37 | --padding-x: .6rem, | 37 | --pad-x: .6rem, |
38 | --padding-y: .5rem, | 38 | --pad-y: .5rem, |
39 | --border-width: fn.global-dim(--border-width --thin), | 39 | --border-width: fn.global-dim(--border-width --thin), |
40 | --border-radius: 2px, | 40 | --border-radius: 2px, |
41 | 41 | ||
@@ -91,7 +91,7 @@ | |||
91 | @include iro.bem-object(iro.props-namespace()) { | 91 | @include iro.bem-object(iro.props-namespace()) { |
92 | position: relative; | 92 | position: relative; |
93 | min-width: 0; | 93 | min-width: 0; |
94 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 94 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
95 | background-color: fn.color(--bg); | 95 | background-color: fn.color(--bg); |
96 | 96 | ||
97 | @include iro.bem-elem('bg') { | 97 | @include iro.bem-elem('bg') { |
@@ -176,7 +176,7 @@ | |||
176 | 176 | ||
177 | @include iro.bem-elem('native') { | 177 | @include iro.bem-elem('native') { |
178 | box-sizing: border-box; | 178 | box-sizing: border-box; |
179 | padding: fn.dim(--padding-y) fn.dim(--padding-x); | 179 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
180 | } | 180 | } |
181 | } | 181 | } |
182 | 182 | ||