@rufous/ui 0.1.12 → 0.1.13

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 (4) hide show
  1. package/dist/main.css +0 -237
  2. package/dist/main.js +8 -8
  3. package/dist/style.css +0 -237
  4. package/package.json +1 -1
package/dist/main.css CHANGED
@@ -1,241 +1,4 @@
1
1
  /* lib/style.css */
2
- .form__group {
3
- position: relative;
4
- padding: 15px 0 0;
5
- margin-top: 10px;
6
- width: 100%;
7
- }
8
- .form__field {
9
- font-family: inherit;
10
- width: 100%;
11
- border: none;
12
- border-bottom: 2px solid #9b9b9b;
13
- outline: 0;
14
- font-size: 16px;
15
- color: #000;
16
- padding: 7px 0;
17
- background: transparent;
18
- transition: border-color 0.2s;
19
- }
20
- .theme-rufous {
21
- background: #000;
22
- }
23
- .theme-default {
24
- background: rgba(252, 229, 175, 1);
25
- }
26
- .theme-default .form__field {
27
- border-bottom: 2px solid #9b9b9b;
28
- color: #000;
29
- }
30
- .theme-rufous .form__field {
31
- border-bottom: 2px solid #230202;
32
- color: #fff;
33
- }
34
- .form__field::placeholder {
35
- color: transparent;
36
- }
37
- .form__field:placeholder-shown ~ .form__label {
38
- font-size: 16px;
39
- cursor: text;
40
- top: 22px;
41
- }
42
- .form__label {
43
- position: absolute;
44
- top: 0;
45
- display: block;
46
- transition: 0.2s;
47
- font-size: 14px;
48
- color: #9b9b9b;
49
- }
50
- .form__field:focus {
51
- border-bottom: 2px solid #000;
52
- }
53
- .form__field:focus ~ .form__label,
54
- .form__field:not(:placeholder-shown) ~ .form__label {
55
- top: 0;
56
- font-size: 12px;
57
- color: #000;
58
- }
59
- .theme-default .btn {
60
- background: #707070;
61
- border: 1px solid #707070;
62
- color: #ffffff;
63
- }
64
- .theme-default .btn:hover,
65
- .theme-default .btn:active {
66
- background-color: initial;
67
- color: #707070;
68
- }
69
- .theme-default .btn:active {
70
- opacity: 0.5;
71
- }
72
- .theme-default .form__field {
73
- border-bottom: 2px solid #ccc;
74
- color: #2d2d2d;
75
- }
76
- .theme-default .form__field::placeholder {
77
- color: #999;
78
- }
79
- .theme-default .form__label {
80
- color: #999;
81
- }
82
- .theme-default .form__field:focus {
83
- border-bottom: 2px solid #707070;
84
- }
85
- .theme-default .form__field:focus ~ .form__label,
86
- .theme-default .form__field:not(:placeholder-shown) ~ .form__label {
87
- color: #2d2d2d;
88
- }
89
- .theme-rufous .btn {
90
- background: #a81c08;
91
- border: 1px solid #a81c08;
92
- color: #ffffff;
93
- }
94
- .theme-rufous .btn:hover,
95
- .theme-rufous .btn:active {
96
- background-color: initial;
97
- color: #a81c08;
98
- }
99
- .theme-rufous .btn:active {
100
- opacity: 0.5;
101
- }
102
- .theme-rufous .form__field::placeholder {
103
- color: #fff;
104
- }
105
- .theme-rufous .form__label {
106
- color: #fff;
107
- }
108
- .theme-rufous .form__field:focus {
109
- border-bottom: 2px solid #a81c08;
110
- }
111
- .theme-rufous .form__field:focus ~ .form__label,
112
- .theme-rufous .form__field:not(:placeholder-shown) ~ .form__label {
113
- color: #fff;
114
- }
115
- .theme-rufous .component-section h2 {
116
- color: antiquewhite;
117
- }
118
- pre {
119
- padding: 1rem;
120
- overflow-x: auto;
121
- border-radius: 8px;
122
- font-size: 0.9rem;
123
- }
124
- .theme-default pre {
125
- background-color: #222222;
126
- color: #ffedde;
127
- }
128
- .theme-rufous pre {
129
- background-color: #f5f5f5;
130
- color: #2d2d2d;
131
- }
132
- @supports (-webkit-appearance: none) or (-moz-appearance: none) {
133
- .theme-default .checkbox-wrapper-13 input[type=checkbox] {
134
- --active: #275efe;
135
- --border-hover: #275efe;
136
- }
137
- .theme-rufous .checkbox-wrapper-13 input[type=checkbox] {
138
- --active: rgb(168, 28, 8);
139
- --border-hover: rgb(168, 28, 8);
140
- }
141
- .checkbox-wrapper-13 input[type=checkbox] {
142
- --active-inner: #fff;
143
- --focus: 2px rgba(39, 94, 254, 0.3);
144
- --border: #bbc1e1;
145
- --background: #fff;
146
- --disabled: #f6f8ff;
147
- --disabled-inner: #e1e6f9;
148
- -webkit-appearance: none;
149
- -moz-appearance: none;
150
- height: 21px;
151
- outline: none;
152
- display: inline-block;
153
- vertical-align: top;
154
- position: relative;
155
- margin: 0;
156
- cursor: pointer;
157
- border: 1px solid var(--bc, var(--border));
158
- background: var(--b, var(--background));
159
- transition:
160
- background 0.3s,
161
- border-color 0.3s,
162
- box-shadow 0.2s;
163
- }
164
- .checkbox-wrapper-13 input[type=checkbox]:after {
165
- content: "";
166
- display: block;
167
- left: 0;
168
- top: 0;
169
- position: absolute;
170
- transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
171
- }
172
- .checkbox-wrapper-13 input[type=checkbox]:checked {
173
- --b: var(--active);
174
- --bc: var(--active);
175
- --d-o: 0.3s;
176
- --d-t: 0.6s;
177
- --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
178
- }
179
- .checkbox-wrapper-13 input[type=checkbox]:disabled {
180
- --b: var(--disabled);
181
- cursor: not-allowed;
182
- opacity: 0.9;
183
- }
184
- .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
185
- --b: var(--disabled-inner);
186
- --bc: var(--border);
187
- }
188
- .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
189
- cursor: not-allowed;
190
- }
191
- .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
192
- --bc: var(--border-hover);
193
- }
194
- .checkbox-wrapper-13 input[type=checkbox]:focus {
195
- box-shadow: 0 0 0 var(--focus);
196
- }
197
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
198
- width: 21px;
199
- }
200
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
201
- opacity: var(--o, 0);
202
- }
203
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
204
- --o: 1;
205
- }
206
- .theme-rufous .checkbox-wrapper-13 span {
207
- color: #fff;
208
- }
209
- .checkbox-wrapper-13 input[type=checkbox] + label {
210
- display: inline-block;
211
- vertical-align: middle;
212
- cursor: pointer;
213
- margin-left: 4px;
214
- }
215
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
216
- border-radius: 7px;
217
- }
218
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
219
- width: 5px;
220
- height: 9px;
221
- border: 2px solid var(--active-inner);
222
- border-top: 0;
223
- border-left: 0;
224
- left: 7px;
225
- top: 4px;
226
- transform: rotate(var(--r, 20deg));
227
- }
228
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
229
- --r: 43deg;
230
- }
231
- }
232
- .checkbox-wrapper-13 * {
233
- box-sizing: inherit;
234
- }
235
- .checkbox-wrapper-13 *:before,
236
- .checkbox-wrapper-13 *:after {
237
- box-sizing: inherit;
238
- }
239
2
  .theme-rufous .act-icon svg {
240
3
  color: #a81c08 !important;
241
4
  }
package/dist/main.js CHANGED
@@ -93,12 +93,8 @@ import {
93
93
  invoiceIcon_default
94
94
  } from "./chunk-KYJ3475B.js";
95
95
  import {
96
- RufousThemeProvider,
97
- useRufousTheme
98
- } from "./chunk-BCGCLMKA.js";
99
- import {
100
- APP_THEMES
101
- } from "./chunk-2FHTGYR4.js";
96
+ FloatingInput
97
+ } from "./chunk-AWA5Y5LH.js";
102
98
  import {
103
99
  activateUserIcon_default
104
100
  } from "./chunk-AH6RCYDL.js";
@@ -127,8 +123,12 @@ import {
127
123
  Checkbox
128
124
  } from "./chunk-QKDJLUKZ.js";
129
125
  import {
130
- FloatingInput
131
- } from "./chunk-AWA5Y5LH.js";
126
+ RufousThemeProvider,
127
+ useRufousTheme
128
+ } from "./chunk-BCGCLMKA.js";
129
+ import {
130
+ APP_THEMES
131
+ } from "./chunk-2FHTGYR4.js";
132
132
  export {
133
133
  APP_THEMES,
134
134
  activateUserIcon_default as ActivateUserIcon,
package/dist/style.css CHANGED
@@ -1,241 +1,4 @@
1
1
  /* lib/style.css */
2
- .form__group {
3
- position: relative;
4
- padding: 15px 0 0;
5
- margin-top: 10px;
6
- width: 100%;
7
- }
8
- .form__field {
9
- font-family: inherit;
10
- width: 100%;
11
- border: none;
12
- border-bottom: 2px solid #9b9b9b;
13
- outline: 0;
14
- font-size: 16px;
15
- color: #000;
16
- padding: 7px 0;
17
- background: transparent;
18
- transition: border-color 0.2s;
19
- }
20
- .theme-rufous {
21
- background: #000;
22
- }
23
- .theme-default {
24
- background: rgba(252, 229, 175, 1);
25
- }
26
- .theme-default .form__field {
27
- border-bottom: 2px solid #9b9b9b;
28
- color: #000;
29
- }
30
- .theme-rufous .form__field {
31
- border-bottom: 2px solid #230202;
32
- color: #fff;
33
- }
34
- .form__field::placeholder {
35
- color: transparent;
36
- }
37
- .form__field:placeholder-shown ~ .form__label {
38
- font-size: 16px;
39
- cursor: text;
40
- top: 22px;
41
- }
42
- .form__label {
43
- position: absolute;
44
- top: 0;
45
- display: block;
46
- transition: 0.2s;
47
- font-size: 14px;
48
- color: #9b9b9b;
49
- }
50
- .form__field:focus {
51
- border-bottom: 2px solid #000;
52
- }
53
- .form__field:focus ~ .form__label,
54
- .form__field:not(:placeholder-shown) ~ .form__label {
55
- top: 0;
56
- font-size: 12px;
57
- color: #000;
58
- }
59
- .theme-default .btn {
60
- background: #707070;
61
- border: 1px solid #707070;
62
- color: #ffffff;
63
- }
64
- .theme-default .btn:hover,
65
- .theme-default .btn:active {
66
- background-color: initial;
67
- color: #707070;
68
- }
69
- .theme-default .btn:active {
70
- opacity: 0.5;
71
- }
72
- .theme-default .form__field {
73
- border-bottom: 2px solid #ccc;
74
- color: #2d2d2d;
75
- }
76
- .theme-default .form__field::placeholder {
77
- color: #999;
78
- }
79
- .theme-default .form__label {
80
- color: #999;
81
- }
82
- .theme-default .form__field:focus {
83
- border-bottom: 2px solid #707070;
84
- }
85
- .theme-default .form__field:focus ~ .form__label,
86
- .theme-default .form__field:not(:placeholder-shown) ~ .form__label {
87
- color: #2d2d2d;
88
- }
89
- .theme-rufous .btn {
90
- background: #a81c08;
91
- border: 1px solid #a81c08;
92
- color: #ffffff;
93
- }
94
- .theme-rufous .btn:hover,
95
- .theme-rufous .btn:active {
96
- background-color: initial;
97
- color: #a81c08;
98
- }
99
- .theme-rufous .btn:active {
100
- opacity: 0.5;
101
- }
102
- .theme-rufous .form__field::placeholder {
103
- color: #fff;
104
- }
105
- .theme-rufous .form__label {
106
- color: #fff;
107
- }
108
- .theme-rufous .form__field:focus {
109
- border-bottom: 2px solid #a81c08;
110
- }
111
- .theme-rufous .form__field:focus ~ .form__label,
112
- .theme-rufous .form__field:not(:placeholder-shown) ~ .form__label {
113
- color: #fff;
114
- }
115
- .theme-rufous .component-section h2 {
116
- color: antiquewhite;
117
- }
118
- pre {
119
- padding: 1rem;
120
- overflow-x: auto;
121
- border-radius: 8px;
122
- font-size: 0.9rem;
123
- }
124
- .theme-default pre {
125
- background-color: #222222;
126
- color: #ffedde;
127
- }
128
- .theme-rufous pre {
129
- background-color: #f5f5f5;
130
- color: #2d2d2d;
131
- }
132
- @supports (-webkit-appearance: none) or (-moz-appearance: none) {
133
- .theme-default .checkbox-wrapper-13 input[type=checkbox] {
134
- --active: #275efe;
135
- --border-hover: #275efe;
136
- }
137
- .theme-rufous .checkbox-wrapper-13 input[type=checkbox] {
138
- --active: rgb(168, 28, 8);
139
- --border-hover: rgb(168, 28, 8);
140
- }
141
- .checkbox-wrapper-13 input[type=checkbox] {
142
- --active-inner: #fff;
143
- --focus: 2px rgba(39, 94, 254, 0.3);
144
- --border: #bbc1e1;
145
- --background: #fff;
146
- --disabled: #f6f8ff;
147
- --disabled-inner: #e1e6f9;
148
- -webkit-appearance: none;
149
- -moz-appearance: none;
150
- height: 21px;
151
- outline: none;
152
- display: inline-block;
153
- vertical-align: top;
154
- position: relative;
155
- margin: 0;
156
- cursor: pointer;
157
- border: 1px solid var(--bc, var(--border));
158
- background: var(--b, var(--background));
159
- transition:
160
- background 0.3s,
161
- border-color 0.3s,
162
- box-shadow 0.2s;
163
- }
164
- .checkbox-wrapper-13 input[type=checkbox]:after {
165
- content: "";
166
- display: block;
167
- left: 0;
168
- top: 0;
169
- position: absolute;
170
- transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
171
- }
172
- .checkbox-wrapper-13 input[type=checkbox]:checked {
173
- --b: var(--active);
174
- --bc: var(--active);
175
- --d-o: 0.3s;
176
- --d-t: 0.6s;
177
- --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
178
- }
179
- .checkbox-wrapper-13 input[type=checkbox]:disabled {
180
- --b: var(--disabled);
181
- cursor: not-allowed;
182
- opacity: 0.9;
183
- }
184
- .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
185
- --b: var(--disabled-inner);
186
- --bc: var(--border);
187
- }
188
- .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
189
- cursor: not-allowed;
190
- }
191
- .checkbox-wrapper-13 input[type=checkbox]:hover:not(:checked):not(:disabled) {
192
- --bc: var(--border-hover);
193
- }
194
- .checkbox-wrapper-13 input[type=checkbox]:focus {
195
- box-shadow: 0 0 0 var(--focus);
196
- }
197
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
198
- width: 21px;
199
- }
200
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
201
- opacity: var(--o, 0);
202
- }
203
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
204
- --o: 1;
205
- }
206
- .theme-rufous .checkbox-wrapper-13 span {
207
- color: #fff;
208
- }
209
- .checkbox-wrapper-13 input[type=checkbox] + label {
210
- display: inline-block;
211
- vertical-align: middle;
212
- cursor: pointer;
213
- margin-left: 4px;
214
- }
215
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
216
- border-radius: 7px;
217
- }
218
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
219
- width: 5px;
220
- height: 9px;
221
- border: 2px solid var(--active-inner);
222
- border-top: 0;
223
- border-left: 0;
224
- left: 7px;
225
- top: 4px;
226
- transform: rotate(var(--r, 20deg));
227
- }
228
- .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
229
- --r: 43deg;
230
- }
231
- }
232
- .checkbox-wrapper-13 * {
233
- box-sizing: inherit;
234
- }
235
- .checkbox-wrapper-13 *:before,
236
- .checkbox-wrapper-13 *:after {
237
- box-sizing: inherit;
238
- }
239
2
  .theme-rufous .act-icon svg {
240
3
  color: #a81c08 !important;
241
4
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.1.12",
4
+ "version": "0.1.13",
5
5
  "type": "module",
6
6
  "style": "./dist/style.css",
7
7
  "files": [