@mirai/ui 1.1.7 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +3 -2
  2. package/build/components/InputNumber/InputNumber.module.css +1 -1
  3. package/build/components/InputOption/InputOption.module.css +2 -2
  4. package/build/components/InputPhone/InputPhone.module.css +1 -1
  5. package/build/components/InputText/InputText.module.css +1 -1
  6. package/build/primitives/Checkbox/Checkbox.module.css +4 -2
  7. package/build/primitives/Radio/Radio.module.css +38 -4
  8. package/build/theme/default.theme.css +3 -2
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -763,8 +763,8 @@ const MyComponent = () => {
763
763
 
764
764
  ```css
765
765
  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
766
- --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
767
- --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
766
+ --mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
767
+ --mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
768
768
  ```
769
769
 
770
770
  ### InputPhone
@@ -913,6 +913,7 @@ const MyComponent = (props) => {
913
913
  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
914
914
  --mirai-ui-input-text-error: var(--mirai-ui-error);
915
915
  --mirai-ui-input-text-focus: var(--mirai-ui-content);
916
+ --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
916
917
  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
917
918
  --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
918
919
  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
package/build/components/InputNumber/InputNumber.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .inputNumber {
2
- margin-bottom: var(--mirai-ui-input-text-padding-y);
2
+ margin-bottom: var(--mirai-ui-input-text-gap);
3
3
  }
4
4
 
5
5
  .texts {
package/build/components/InputOption/InputOption.module.css CHANGED
@@ -2,8 +2,8 @@
2
2
  align-items: center;
3
3
  display: flex;
4
4
  flex-direction: var(--mirai-ui-row-direction);
5
- gap: var(--mirai-ui-input-option-gap);
6
- margin-bottom: var(--mirai-ui-input-option-padding-y);
5
+ gap: var(--mirai-ui-input-option-gap-x);
6
+ margin-bottom: var(--mirai-ui-input-option-gap-y);
7
7
  position: relative;
8
8
  width: 100%;
9
9
  }
package/build/components/InputPhone/InputPhone.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- margin-bottom: var(--mirai-ui-input-text-padding-y);
2
+ margin-bottom: var(--mirai-ui-input-text-gap);
3
3
  }
4
4
 
5
5
  .prefix {
package/build/components/InputText/InputText.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .inputContainer {
2
2
  flex: 1;
3
- margin-bottom: var(--mirai-ui-input-text-padding-y);
3
+ margin-bottom: var(--mirai-ui-input-text-gap);
4
4
  position: relative;
5
5
  }
6
6
 
package/build/primitives/Checkbox/Checkbox.module.css CHANGED
@@ -55,7 +55,8 @@
55
55
  top: 0;
56
56
  }
57
57
 
58
- @media only screen and (max-width: 431px) {
58
+ /* S */
59
+ @media only screen and (max-width: 430px) {
59
60
  .checkbox {
60
61
  height: var(--mirai-ui-checkbox-size-mobile);
61
62
  width: var(--mirai-ui-checkbox-size-mobile);
@@ -67,7 +68,8 @@
67
68
  }
68
69
  }
69
70
 
70
- @media only screen and (min-width: 430px) {
71
+ /* M & L */
72
+ @media only screen and (min-width: 431px) {
71
73
  .checkbox {
72
74
  height: var(--mirai-ui-checkbox-size);
73
75
  width: var(--mirai-ui-checkbox-size);
package/build/primitives/Radio/Radio.module.css CHANGED
@@ -1,7 +1,5 @@
1
1
  .radio {
2
2
  position: relative;
3
- height: var(--mirai-ui-radio-size);
4
- width: var(--mirai-ui-radio-size);
5
3
  }
6
4
 
7
5
  .radio input {
@@ -10,14 +8,12 @@
10
8
  border-radius: 50%;
11
9
  box-sizing: border-box;
12
10
  cursor: pointer;
13
- height: var(--mirai-ui-radio-size);
14
11
  margin: 0;
15
12
  outline: none;
16
13
  user-select: none;
17
14
  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
18
15
  border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
19
16
  box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
20
- width: var(--mirai-ui-radio-size);
21
17
 
22
18
  appearance: none;
23
19
  -webkit-appearance: none;
@@ -74,3 +70,41 @@
74
70
  margin-right: 0;
75
71
  top: 0;
76
72
  }
73
+
74
+ /* S */
75
+ @media only screen and (max-width: 430px) {
76
+ .radio {
77
+ height: var(--mirai-ui-radio-size-mobile);
78
+ width: var(--mirai-ui-radio-size-mobile);
79
+ }
80
+
81
+ .radio input {
82
+ height: var(--mirai-ui-radio-size-mobile);
83
+ width: var(--mirai-ui-radio-size-mobile);
84
+ }
85
+
86
+ .radio .checkmark {
87
+ margin: calc(var(--mirai-ui-radio-size-mobile) / 4);
88
+ height: calc(var(--mirai-ui-radio-size-mobile) / 2);
89
+ width: calc(var(--mirai-ui-radio-size-mobile) / 2);
90
+ }
91
+ }
92
+
93
+ /* M & L */
94
+ @media only screen and (min-width: 431px) {
95
+ .radio {
96
+ height: var(--mirai-ui-radio-size);
97
+ width: var(--mirai-ui-radio-size);
98
+ }
99
+
100
+ .radio input {
101
+ height: var(--mirai-ui-radio-size);
102
+ width: var(--mirai-ui-radio-size);
103
+ }
104
+
105
+ .radio .checkmark {
106
+ margin: calc(var(--mirai-ui-radio-size) / 4);
107
+ height: calc(var(--mirai-ui-radio-size) / 2);
108
+ width: calc(var(--mirai-ui-radio-size) / 2);
109
+ }
110
+ }
package/build/theme/default.theme.css CHANGED
@@ -206,8 +206,8 @@
206
206
 
207
207
  /* InputOption */
208
208
  --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
209
- --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
210
- --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
209
+ --mirai-ui-input-option-gap-x: var(--mirai-ui-space-XS);
210
+ --mirai-ui-input-option-gap-y: var(--mirai-ui-space-M);
211
211
 
212
212
  /* InputSelect */
213
213
 
@@ -216,6 +216,7 @@
216
216
  --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
217
217
  --mirai-ui-input-text-error: var(--mirai-ui-error);
218
218
  --mirai-ui-input-text-focus: var(--mirai-ui-content);
219
+ --mirai-ui-input-text-gap: var(--mirai-ui-space-M);
219
220
  --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
220
221
  --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
221
222
  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",