diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/index.scss | 1 | ||||
-rw-r--r-- | src/objects/_field-label.scss | 2 | ||||
-rw-r--r-- | src/objects/_radio.scss | 155 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 10 |
4 files changed, 161 insertions, 7 deletions
diff --git a/src/index.scss b/src/index.scss index ad3b1af..faa053e 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -12,6 +12,7 @@ | |||
12 | @import 'objects/button'; | 12 | @import 'objects/button'; |
13 | @import 'objects/text-field'; | 13 | @import 'objects/text-field'; |
14 | @import 'objects/field-label'; | 14 | @import 'objects/field-label'; |
15 | @import 'objects/radio'; | ||
15 | 16 | ||
16 | :root { | 17 | :root { |
17 | @include iro.props-assign; | 18 | @include iro.props-assign; |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 341bf49..d0bc6ad 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -1,6 +1,4 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../vars'; | ||
3 | @use '../mixins/typography'; | ||
4 | 2 | ||
5 | @include iro.props-namespace('field-label') { | 3 | @include iro.props-namespace('field-label') { |
6 | @include iro.props-store(( | 4 | @include iro.props-store(( |
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss new file mode 100644 index 0000000..635a260 --- /dev/null +++ b/src/objects/_radio.scss | |||
@@ -0,0 +1,155 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.props-namespace('radio') { | ||
4 | @include iro.props-store(( | ||
5 | --dims: ( | ||
6 | --diameter: iro.fn-px-to-rem(15px), | ||
7 | --label-gap: .6rem, | ||
8 | --border-width: iro.props-get(--dims --border-width --medium, $global: true), | ||
9 | --padding-x: .3rem, | ||
10 | --padding-y: .3rem, | ||
11 | --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), | ||
12 | ), | ||
13 | --colors: ( | ||
14 | --circle-border: iro.props-get(--colors --fg-hi2, $global: true), | ||
15 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
16 | |||
17 | --hover: ( | ||
18 | --label: iro.props-get(--colors --fg-lo, $global: true), | ||
19 | --circle-border: iro.props-get(--colors --fg-hi, $global: true), | ||
20 | ), | ||
21 | --active: ( | ||
22 | --circle-border: iro.props-get(--colors --accent --primary, $global: true), | ||
23 | |||
24 | --hover: ( | ||
25 | --circle-border: iro.props-get(--colors --accent --primary-lo, $global: true), | ||
26 | ), | ||
27 | ), | ||
28 | --key-focus: ( | ||
29 | --label: iro.props-get(--colors --focus --text, $global: true), | ||
30 | --circle-border: iro.props-get(--colors --focus --fill, $global: true), | ||
31 | --shadow: iro.props-get(--colors --focus --shadow, $global: true), | ||
32 | ), | ||
33 | --disabled: ( | ||
34 | --label: iro.props-get(--colors --fg-hi3, $global: true), | ||
35 | --circle-border: iro.props-get(--colors --obj-lo, $global: true), | ||
36 | --circle-bg: iro.props-get(--colors --bg-hi, $global: true), | ||
37 | |||
38 | --active: ( | ||
39 | --circle-border: iro.props-get(--colors --obj-lo, $global: true), | ||
40 | ), | ||
41 | ) | ||
42 | ), | ||
43 | )); | ||
44 | |||
45 | @include iro.bem-object(iro.props-namespace()) { | ||
46 | display: inline-flex; | ||
47 | position: relative; | ||
48 | align-items: flex-start; | ||
49 | margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); | ||
50 | margin-left: calc(-1 * iro.props-get(--dims --padding-x)); | ||
51 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); | ||
52 | |||
53 | @include iro.bem-elem('circle') { | ||
54 | display: block; | ||
55 | position: relative; | ||
56 | box-sizing: border-box; | ||
57 | flex: 0 0 auto; | ||
58 | width: iro.props-get(--dims --diameter); | ||
59 | height: iro.props-get(--dims --diameter); | ||
60 | margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --diameter)})); | ||
61 | border-radius: 2em; | ||
62 | background-color: iro.props-get(--colors --circle-border); | ||
63 | |||
64 | &::after { | ||
65 | content: ''; | ||
66 | display: block; | ||
67 | position: absolute; | ||
68 | z-index: 10; | ||
69 | top: 50%; | ||
70 | left: iro.props-get(--dims --border-width); | ||
71 | width: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); | ||
72 | height: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); | ||
73 | transform: translateY(-50%); | ||
74 | transition: transform .2s ease; | ||
75 | border-radius: iro.props-get(--dims --diameter); | ||
76 | background-color: iro.props-get(--colors --circle-bg); | ||
77 | } | ||
78 | } | ||
79 | |||
80 | @include iro.bem-elem('label') { | ||
81 | margin-left: iro.props-get(--dims --label-gap); | ||
82 | } | ||
83 | |||
84 | @include iro.bem-elem('native') { | ||
85 | position: absolute; | ||
86 | top: 0; | ||
87 | left: 0; | ||
88 | width: 100%; | ||
89 | height: 100%; | ||
90 | margin: 0; | ||
91 | padding: 0; | ||
92 | overflow: hidden; | ||
93 | opacity: .0001; | ||
94 | |||
95 | &:hover { | ||
96 | @include iro.bem-sibling-elem('label') { | ||
97 | color: iro.props-get(--colors --hover --label); | ||
98 | } | ||
99 | |||
100 | @include iro.bem-sibling-elem('circle') { | ||
101 | background-color: iro.props-get(--colors --hover --circle-border); | ||
102 | } | ||
103 | } | ||
104 | |||
105 | &:checked { | ||
106 | @include iro.bem-sibling-elem('circle') { | ||
107 | background-color: iro.props-get(--colors --active --circle-border); | ||
108 | |||
109 | &::after { | ||
110 | transform: translateY(-50%) scale(.44); | ||
111 | } | ||
112 | } | ||
113 | |||
114 | &:hover { | ||
115 | @include iro.bem-sibling-elem('circle') { | ||
116 | background-color: iro.props-get(--colors --active --hover --circle-border); | ||
117 | } | ||
118 | } | ||
119 | } | ||
120 | |||
121 | &:disabled { | ||
122 | @include iro.bem-sibling-elem('label') { | ||
123 | color: iro.props-get(--colors --disabled --label); | ||
124 | } | ||
125 | |||
126 | @include iro.bem-sibling-elem('circle') { | ||
127 | background-color: iro.props-get(--colors --disabled --circle-border); | ||
128 | |||
129 | &::after { | ||
130 | background-color: iro.props-get(--colors --disabled --circle-bg); | ||
131 | } | ||
132 | } | ||
133 | |||
134 | &:checked { | ||
135 | @include iro.bem-sibling-elem('circle') { | ||
136 | background-color: iro.props-get(--colors --disabled --active --circle-border); | ||
137 | } | ||
138 | } | ||
139 | } | ||
140 | |||
141 | @include iro.bem-at-theme('keyboard') { | ||
142 | &:focus { | ||
143 | @include iro.bem-sibling-elem('label') { | ||
144 | color: iro.props-get(--colors --key-focus --label); | ||
145 | } | ||
146 | |||
147 | @include iro.bem-sibling-elem('circle') { | ||
148 | background-color: iro.props-get(--colors --key-focus --circle-border); | ||
149 | box-shadow: iro.props-get(--colors --key-focus --shadow); | ||
150 | } | ||
151 | } | ||
152 | } | ||
153 | } | ||
154 | } | ||
155 | } | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index ac48216..4201f00 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -39,11 +39,11 @@ | |||
39 | 39 | ||
40 | --hover: ( | 40 | --hover: ( |
41 | --border: iro.props-get(--colors --accent --error, $global: true), | 41 | --border: iro.props-get(--colors --accent --error, $global: true), |
42 | --shadow: iro.props-get(--colors --text-input --error --shadow, null), | 42 | --shadow: 0 0 0 0 transparent, |
43 | ), | 43 | ), |
44 | --focus: ( | 44 | --focus: ( |
45 | --border: iro.props-get(--colors --accent --error, $global: true), | 45 | --border: iro.props-get(--colors --accent --error, $global: true), |
46 | --shadow: iro.props-get(--colors --text-input --error --shadow, null), | 46 | --shadow: 0 0 0 0 transparent, |
47 | ), | 47 | ), |
48 | ), | 48 | ), |
49 | --disabled: ( | 49 | --disabled: ( |
@@ -75,7 +75,7 @@ | |||
75 | pointer-events: none; | 75 | pointer-events: none; |
76 | } | 76 | } |
77 | 77 | ||
78 | @include iro.bem-elem('input') { | 78 | @include iro.bem-elem('native') { |
79 | @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); | 79 | @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); |
80 | 80 | ||
81 | color: iro.props-get(--colors --text); | 81 | color: iro.props-get(--colors --text); |
@@ -144,7 +144,7 @@ | |||
144 | @include iro.bem-modifier('fill') { | 144 | @include iro.bem-modifier('fill') { |
145 | padding: 0; | 145 | padding: 0; |
146 | 146 | ||
147 | @include iro.bem-elem('input') { | 147 | @include iro.bem-elem('native') { |
148 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); | 148 | padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); |
149 | } | 149 | } |
150 | } | 150 | } |
@@ -152,7 +152,7 @@ | |||
152 | @include iro.bem-is('disabled') { | 152 | @include iro.bem-is('disabled') { |
153 | background-color: iro.props-get(--colors --disabled --bg); | 153 | background-color: iro.props-get(--colors --disabled --bg); |
154 | 154 | ||
155 | @include iro.bem-elem('input') { | 155 | @include iro.bem-elem('native') { |
156 | color: iro.props-get(--colors --disabled --text); | 156 | color: iro.props-get(--colors --disabled --text); |
157 | 157 | ||
158 | &::placeholder { | 158 | &::placeholder { |