@broxus/react-uikit 0.12.0 → 0.12.1

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 (3) hide show
  1. package/dist/cjs/components/Switch/index.scss +11 -22
  2. package/dist/esm/components/Switch/index.scss +11 -22
  3. package/package.json +2 -2
package/dist/cjs/components/Switch/index.scss CHANGED
@@ -62,8 +62,7 @@
62
62
  border-radius: var(--switch-handle-border-radius);
63
63
  bottom: 0;
64
64
  content: '';
65
- inset-inline-end: 0;
66
- inset-inline-start: 0;
65
+ inset-inline: 0 0;
67
66
  position: absolute;
68
67
  top: 0;
69
68
  transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
@@ -79,8 +78,7 @@
79
78
  display: block;
80
79
  height: 100%;
81
80
  overflow: hidden;
82
- padding-inline-end: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
83
- padding-inline-start: calc(var(--switch-height) + var(--switch-handle-offset));
81
+ padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
84
82
  transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
85
83
  }
86
84
 
@@ -92,13 +90,11 @@
92
90
  }
93
91
 
94
92
  .uk-switch-inner-checked {
95
- margin-inline-end: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
96
- margin-inline-start: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
93
+ margin-inline: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
97
94
  }
98
95
 
99
96
  .uk-switch-inner-unchecked {
100
- margin-inline-end: 0;
101
- margin-inline-start: 0;
97
+ margin-inline: 0 0;
102
98
  margin-top: calc(var(--switch-height) * -1);
103
99
  }
104
100
 
@@ -108,23 +104,19 @@
108
104
 
109
105
  // Active state
110
106
  .uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
111
- inset-inline-end: -30%;
112
- inset-inline-start: 0;
107
+ inset-inline: 0 -30%;
113
108
  }
114
109
 
115
110
  .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
116
- inset-inline-end: 0;
117
- inset-inline-start: -30%;
111
+ inset-inline: -30% 0;
118
112
  }
119
113
 
120
114
  .uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
121
- margin-inline-end: calc(var(--switch-handle-offset) * -2);
122
- margin-inline-start: calc(var(--switch-handle-offset) * 2);
115
+ margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
123
116
  }
124
117
 
125
118
  .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
126
- margin-inline-end: calc(var(--switch-handle-offset) * 2);
127
- margin-inline-start: calc(var(--switch-handle-offset) * -2);
119
+ margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
128
120
  }
129
121
 
130
122
  // Checked state
@@ -164,18 +156,15 @@
164
156
  }
165
157
 
166
158
  .uk-switch-checked .uk-switch-inner {
167
- padding-inline-end: calc(var(--switch-height) + var(--switch-handle-offset));
168
- padding-inline-start: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
159
+ padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
169
160
  }
170
161
 
171
162
  .uk-switch-checked .uk-switch-inner-checked {
172
- margin-inline-end: 0;
173
- margin-inline-start: 0;
163
+ margin-inline: 0 0;
174
164
  }
175
165
 
176
166
  .uk-switch-checked .uk-switch-inner-unchecked {
177
- margin-inline-end: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
178
- margin-inline-start: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
167
+ margin-inline: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
179
168
  }
180
169
 
181
170
  // Disabled
package/dist/esm/components/Switch/index.scss CHANGED
@@ -62,8 +62,7 @@
62
62
  border-radius: var(--switch-handle-border-radius);
63
63
  bottom: 0;
64
64
  content: '';
65
- inset-inline-end: 0;
66
- inset-inline-start: 0;
65
+ inset-inline: 0 0;
67
66
  position: absolute;
68
67
  top: 0;
69
68
  transition: all var(--transition-medium-fast-duration) var(--ease-in-out);
@@ -79,8 +78,7 @@
79
78
  display: block;
80
79
  height: 100%;
81
80
  overflow: hidden;
82
- padding-inline-end: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
83
- padding-inline-start: calc(var(--switch-height) + var(--switch-handle-offset));
81
+ padding-inline: calc(var(--switch-height) + var(--switch-handle-offset)) calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
84
82
  transition: padding-inline-start var(--transition-medium-fast-duration) var(--ease-in-out), padding-inline-end var(--transition-medium-fast-duration) var(--ease-in-out);
85
83
  }
86
84
 
@@ -92,13 +90,11 @@
92
90
  }
93
91
 
94
92
  .uk-switch-inner-checked {
95
- margin-inline-end: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
96
- margin-inline-start: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
93
+ margin-inline: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
97
94
  }
98
95
 
99
96
  .uk-switch-inner-unchecked {
100
- margin-inline-end: 0;
101
- margin-inline-start: 0;
97
+ margin-inline: 0 0;
102
98
  margin-top: calc(var(--switch-height) * -1);
103
99
  }
104
100
 
@@ -108,23 +104,19 @@
108
104
 
109
105
  // Active state
110
106
  .uk-switch:not(.uk-switch-disabled):active .uk-switch-handle::before {
111
- inset-inline-end: -30%;
112
- inset-inline-start: 0;
107
+ inset-inline: 0 -30%;
113
108
  }
114
109
 
115
110
  .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-handle::before {
116
- inset-inline-end: 0;
117
- inset-inline-start: -30%;
111
+ inset-inline: -30% 0;
118
112
  }
119
113
 
120
114
  .uk-switch:not(.uk-switch-disabled, .uk-switch-checked):active .uk-switch-inner-unchecked {
121
- margin-inline-end: calc(var(--switch-handle-offset) * -2);
122
- margin-inline-start: calc(var(--switch-handle-offset) * 2);
115
+ margin-inline: calc(var(--switch-handle-offset) * 2) calc(var(--switch-handle-offset) * -2);
123
116
  }
124
117
 
125
118
  .uk-switch-checked:not(.uk-switch-disabled):active .uk-switch-inner-checked {
126
- margin-inline-end: calc(var(--switch-handle-offset) * 2);
127
- margin-inline-start: calc(var(--switch-handle-offset) * -2);
119
+ margin-inline: calc(var(--switch-handle-offset) * -2) calc(var(--switch-handle-offset) * 2);
128
120
  }
129
121
 
130
122
  // Checked state
@@ -164,18 +156,15 @@
164
156
  }
165
157
 
166
158
  .uk-switch-checked .uk-switch-inner {
167
- padding-inline-end: calc(var(--switch-height) + var(--switch-handle-offset));
168
- padding-inline-start: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666);
159
+ padding-inline: calc((var(--switch-height) + var(--switch-handle-offset)) / 2.6666) calc(var(--switch-height) + var(--switch-handle-offset));
169
160
  }
170
161
 
171
162
  .uk-switch-checked .uk-switch-inner-checked {
172
- margin-inline-end: 0;
173
- margin-inline-start: 0;
163
+ margin-inline: 0 0;
174
164
  }
175
165
 
176
166
  .uk-switch-checked .uk-switch-inner-unchecked {
177
- margin-inline-end: calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
178
- margin-inline-start: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2));
167
+ margin-inline: calc(100% - var(--switch-height) + ((var(--switch-height) + var(--switch-handle-offset)) * 2)) calc(-100% + var(--switch-height) - ((var(--switch-height) + var(--switch-handle-offset)) * 2));
179
168
  }
180
169
 
181
170
  // Disabled
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@broxus/react-uikit",
3
- "version": "0.12.0",
3
+ "version": "0.12.1",
4
4
  "description": "React-based UIkit library",
5
5
  "license": "AGPL-3.0",
6
6
  "keywords": [
@@ -82,5 +82,5 @@
82
82
  "react": "^16.8.0 || ^17.x || ^18.x",
83
83
  "react-dom": "^16.8.0 || ^17.x || ^18.x"
84
84
  },
85
- "gitHead": "792a63b805b3a83a6fd978c511ba338da0c27369"
85
+ "gitHead": "6dfe94c62db5e8c693af3fe3aae7da4d535b0159"
86
86
  }