@broxus/react-uikit 0.12.0 → 0.12.2

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 (5) hide show
  1. package/dist/cjs/components/Switch/index.scss +11 -22
  2. package/dist/cjs/styles/mixins.scss +2 -0
  3. package/dist/esm/components/Switch/index.scss +11 -22
  4. package/dist/esm/styles/mixins.scss +2 -0
  5. 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/cjs/styles/mixins.scss CHANGED
@@ -2074,6 +2074,7 @@
2074
2074
  @mixin hook-switch-misc() {}
2075
2075
 
2076
2076
  @mixin hook-switcher-misc() {}
2077
+ @mixin hook-inverse-component-switcher() {}
2077
2078
 
2078
2079
  @mixin hook-tabs() {}
2079
2080
  @mixin hook-tabs-tab() {}
@@ -2390,6 +2391,7 @@
2390
2391
  @include hook-inverse-component-breadcrumb;
2391
2392
 
2392
2393
  @include hook-inverse-component-pagination;
2394
+ @include hook-inverse-component-switcher;
2393
2395
  @include hook-inverse-component-tabs;
2394
2396
  @include hook-inverse-component-table;
2395
2397
 
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/dist/esm/styles/mixins.scss CHANGED
@@ -2074,6 +2074,7 @@
2074
2074
  @mixin hook-switch-misc() {}
2075
2075
 
2076
2076
  @mixin hook-switcher-misc() {}
2077
+ @mixin hook-inverse-component-switcher() {}
2077
2078
 
2078
2079
  @mixin hook-tabs() {}
2079
2080
  @mixin hook-tabs-tab() {}
@@ -2390,6 +2391,7 @@
2390
2391
  @include hook-inverse-component-breadcrumb;
2391
2392
 
2392
2393
  @include hook-inverse-component-pagination;
2394
+ @include hook-inverse-component-switcher;
2393
2395
  @include hook-inverse-component-tabs;
2394
2396
  @include hook-inverse-component-table;
2395
2397
 
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.2",
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": "e37a5bf7d5cfdd437e35168958e949094701e84e"
86
86
  }