react-asc 21.0.2 → 21.0.3

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/package.json +1 -1
  2. package/react-asc.scss +155 -130
  3. package/readme.md +54 -56
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "21.0.2",
3
+ "version": "21.0.3",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",
package/react-asc.scss CHANGED
@@ -1,3 +1,17 @@
1
+ :root {
2
+ --breakpoint-xs: 0;
3
+ --breakpoint-sm: 576px;
4
+ --breakpoint-md: 768px;
5
+ --breakpoint-lg: 992px;
6
+ --breakpoint-xl: 1200px;
7
+ --breakpoint-xxl: 1400px;
8
+ }
9
+
10
+ :root {
11
+ --buttonMinWidth: 62px;
12
+ --buttonPadding: 11px 15px;
13
+ }
14
+
1
15
  :root {
2
16
  --primary-light: #6573c3;
3
17
  --primary: #3f51b5;
@@ -35,121 +49,182 @@
35
49
  --bodyBg: white;
36
50
  --bodyColor: #212529;
37
51
 
38
- --borderRadius: 5px;
52
+ --highlight: rgba(204, 216, 224, 0.2); // ???
53
+
39
54
  --shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
40
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
55
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
41
56
 
42
- --buttonMinWidth: 62px;
43
- --buttonPadding: 11px 15px;
57
+ --muted: #6c757d !important;
58
+ }
44
59
 
60
+ :root {
45
61
  --fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
46
62
  sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
47
63
  --fontSize: 16px;
48
64
  --fontWeight: 400;
49
65
 
50
- --highlight: rgba(204, 216, 224, 0.2); // ???
66
+ --fontLineHeight: 1.5;
67
+ }
51
68
 
52
- --breakpointMd: 768px;
69
+ :root {
70
+ .ml-0 {
71
+ margin-left: var(--0);
72
+ }
53
73
 
54
- --bodyLineHeight: 1.5;
74
+ .ml-1 {
75
+ margin-left: var(--1);
76
+ }
55
77
 
56
- --breakpoint-xs: 0;
57
- --breakpoint-sm: 576px;
58
- --breakpoint-md: 768px;
59
- --breakpoint-lg: 992px;
60
- --breakpoint-xl: 1200px;
61
- --breakpoint-xxl: 1400px;
62
- }
78
+ .ml-2 {
79
+ margin-left: var(--2);
80
+ }
63
81
 
64
- .input-group-append {
65
- .btn {
66
- min-width: auto;
82
+ .ml-3 {
83
+ margin-left: var(--3);
84
+ }
67
85
 
68
- .svg-icon {
69
- margin-left: 0;
70
- margin-right: 0;
71
- }
86
+ .ml-auto {
87
+ margin-left: var(--auto);
72
88
  }
73
- }
74
89
 
75
- .text-muted {
76
- color: #6c757d !important;
77
- }
90
+ .mr-0 {
91
+ margin-right: var(--0);
92
+ }
78
93
 
79
- .ml-0 {
80
- margin-left: 0px !important;
81
- }
94
+ .mr-1 {
95
+ margin-right: var(--1);
96
+ }
82
97
 
83
- .ml-1 {
84
- margin-left: 10px !important;
85
- }
98
+ .mr-2 {
99
+ margin-right: var(--2);
100
+ }
86
101
 
87
- .ml-2 {
88
- margin-left: 20px !important;
89
- }
102
+ .mr-3 {
103
+ margin-right: var(--3);
104
+ }
90
105
 
91
- .ml-3 {
92
- margin-left: 30px !important;
93
- }
106
+ .mr-auto {
107
+ margin-right: var(--auto);
108
+ }
94
109
 
95
- .ml-auto {
96
- margin-left: auto !important;
97
- }
110
+ .mt-0 {
111
+ margin-top: var(--0);
112
+ }
98
113
 
99
- .mr-0 {
100
- margin-right: 0px !important;
101
- }
114
+ .mt-1 {
115
+ margin-top: var(--1);
116
+ }
102
117
 
103
- .mr-1 {
104
- margin-right: 10px !important;
105
- }
118
+ .mt-2 {
119
+ margin-top: var(--2);
120
+ }
106
121
 
107
- .mr-2 {
108
- margin-right: 20px !important;
109
- }
122
+ .mt-3 {
123
+ margin-top: var(--3);
124
+ }
110
125
 
111
- .mr-3 {
112
- margin-right: 30px !important;
113
- }
126
+ .mt-4 {
127
+ margin-top: var(--4);
128
+ }
114
129
 
115
- .mr-auto {
116
- margin-right: auto !important;
117
- }
130
+ .mb-0 {
131
+ margin-bottom: var(--0);
132
+ }
118
133
 
119
- .mt-0 {
120
- margin-top: 0px !important;
121
- }
134
+ .mb-1 {
135
+ margin-bottom: var(--1);
136
+ }
122
137
 
123
- .mt-1 {
124
- margin-top: 10px !important;
125
- }
138
+ .mb-2 {
139
+ margin-bottom: var(--2);
140
+ }
126
141
 
127
- .mt-2 {
128
- margin-top: 20px !important;
142
+ .mb-3 {
143
+ margin-bottom: var(--3);
144
+ }
129
145
  }
130
146
 
131
- .mt-3 {
132
- margin-top: 30px !important;
133
- }
147
+ :root {
148
+ .pt-1 {
149
+ padding-top: var(--1);
150
+ }
134
151
 
135
- .mt-4 {
136
- margin-top: 40px !important;
137
- }
152
+ .pt-2 {
153
+ padding-top: var(--2);
154
+ }
155
+
156
+ .pt-3 {
157
+ padding-top: var(--3);
158
+ }
159
+
160
+ .pb-1 {
161
+ padding-bottom: var(--1);
162
+ }
163
+
164
+ .pb-2 {
165
+ padding-bottom: var(--2);
166
+ }
167
+
168
+ .pb-3 {
169
+ padding-bottom: var(--3);
170
+ }
171
+
172
+ .pb-4 {
173
+ padding-bottom: var(--4);
174
+ }
175
+
176
+ .p-3 {
177
+ padding: var(--3);
178
+ }
138
179
 
139
- .mb-0 {
140
- margin-bottom: 0px !important;
180
+ .p-1 {
181
+ padding: var(--1);
182
+ }
183
+
184
+ .p-2 {
185
+ padding: var(--2);
186
+ }
187
+
188
+ .p-3 {
189
+ padding: var(--3);
190
+ }
191
+
192
+ .p-4 {
193
+ padding: var(--3);
194
+ }
195
+
196
+ .pt-0 {
197
+ padding-top: var(--0);
198
+ }
199
+
200
+ .pb-0 {
201
+ padding-bottom: var(--0);
202
+ }
141
203
  }
142
204
 
143
- .mb-1 {
144
- margin-bottom: 10px !important;
205
+ :root {
206
+ --borderRadius: 5px;
207
+ --0: 0px !important;
208
+ --1: 15px !important;
209
+ --2: 25px !important;
210
+ --3: 35px !important;
211
+ --4: 45px !important;
212
+ --auto: auto !important;
145
213
  }
146
214
 
147
- .mb-2 {
148
- margin-bottom: 20px !important;
215
+ .input-group-append {
216
+ .btn {
217
+ min-width: auto;
218
+
219
+ .svg-icon {
220
+ margin-left: 0;
221
+ margin-right: 0;
222
+ }
223
+ }
149
224
  }
150
225
 
151
- .mb-3 {
152
- margin-bottom: 30px !important;
226
+ .text-muted {
227
+ color: var(--muted);
153
228
  }
154
229
 
155
230
  .d-flex {
@@ -171,12 +246,15 @@
171
246
  .flex-row {
172
247
  flex-direction: row;
173
248
  }
249
+
174
250
  .flex-row-reverse {
175
251
  flex-direction: row-reverse;
176
252
  }
253
+
177
254
  .flex-column {
178
255
  flex-direction: column;
179
256
  }
257
+
180
258
  .flex-column-reverse {
181
259
  flex-direction: column-reverse;
182
260
  }
@@ -189,60 +267,7 @@
189
267
  height: 100%;
190
268
  }
191
269
 
192
- .pt-1 {
193
- padding-top: 10px !important;
194
- }
195
-
196
- .pt-2 {
197
- padding-top: 20px !important;
198
- }
199
-
200
- .pt-3 {
201
- padding-top: 30px !important;
202
- }
203
-
204
- .pb-1 {
205
- padding-bottom: 10px !important;
206
- }
207
-
208
- .pb-2 {
209
- padding-bottom: 20px !important;
210
- }
211
-
212
- .pb-3 {
213
- padding-bottom: 30px !important;
214
- }
215
-
216
- .pb-4 {
217
- padding-bottom: 40px !important;
218
- }
219
-
220
- .p-3 {
221
- padding: 1rem !important;
222
- }
223
-
224
- .p-1 {
225
- padding: 10px !important;
226
- }
227
270
 
228
- .p-2 {
229
- padding: 20px !important;
230
- }
231
-
232
- .p-3 {
233
- padding: 30px !important;
234
- }
235
- .p-4 {
236
- padding: 40px !important;
237
- }
238
-
239
- .pt-0 {
240
- padding-top: 0px !important;
241
- }
242
-
243
- .pb-0 {
244
- padding-bottom: 0px !important;
245
- }
246
271
 
247
272
  .text-center {
248
273
  text-align: center;
package/readme.md CHANGED
@@ -1,85 +1,83 @@
1
1
  # react-asc
2
- handcrafted components inspired by Material Design and bundled with rollup.
3
2
 
3
+ handcrafted components inspired by Material Design and bundled with rollup.
4
4
 
5
5
  ## showcase
6
- react-asc interactive showcase [link](https://react-asc.netlify.app)
7
6
 
7
+ react-asc interactive showcase [link](https://react-asc.netlify.app)
8
8
 
9
9
  ## usage
10
10
 
11
11
  ### install package
12
- `npm install react-asc`
13
12
 
13
+ `npm install react-asc`
14
14
 
15
15
  ### install modern-normalize
16
- `npm install modern-normalize`
17
16
 
17
+ `npm install modern-normalize`
18
18
 
19
- ### Include needed scss files
19
+ ### Include styles
20
20
 
21
21
  ```scss
22
22
  @import "modern-normalize";
23
23
  @import "react-asc/react-asc.scss";
24
24
  ```
25
25
 
26
+ ### Usage
26
27
 
27
- ### Start using it
28
28
  ```js
29
- import React from 'react';
30
- import { Button } from 'react-asc';
29
+ import React from "react";
30
+ import { Button } from "react-asc";
31
31
 
32
32
  const MyApp = () => {
33
- return (
34
- <Button>some button</Button>
35
- )
36
- }
33
+ return <Button>some button</Button>;
34
+ };
37
35
  ```
38
36
 
39
-
40
- ## Included
41
-
42
- - Alert (beta)
43
- - AppBar
44
- - AutoComplete (beta)
45
- - Backdrop
46
- - Badge
47
- - Button
48
- - ButtonGroup
49
- - Breadcrumb
50
- - Card
51
- - Checkbox
52
- - Chip
53
- - ConditionalWrapper
54
- - DateSelect
55
- - Drawer
56
- - ExpansionPanel
57
- - FileInput
58
- - FloatingActionButton
59
- - Form (beta)
60
- - Grid
61
- - Icon
62
- - IconButton
63
- - Link
64
- - List
65
- - LoadingIndicator
66
- - Modal + ModalService
67
- - Menu
68
- - NumberSelect
69
- - Select
70
- - Snackbar + SnackbarService
71
- - SpeedDial
72
- - Stepper (beta)
73
- - Table (beta)
74
- - Tabs
75
- - TimeSelect
76
- - Textarea
77
- - Tooltip
78
- - TreeView (beta)
79
- - Typography
80
-
81
-
82
- ## Credit
37
+ ## Included Components
38
+
39
+ - Alert (beta)
40
+ - AppBar
41
+ - AutoComplete (beta)
42
+ - Backdrop
43
+ - Badge
44
+ - Breadcrumb
45
+ - Button
46
+ - ButtonGroup
47
+ - Card
48
+ - Checkbox
49
+ - Chip
50
+ - ConditionalWrapper
51
+ - DateSelect
52
+ - Drawer
53
+ - ExpansionPanel
54
+ - FileInput
55
+ - FloatingActionButton
56
+ - Form (beta)
57
+ - Grid
58
+ - Icon
59
+ - IconButton
60
+ - Link
61
+ - List
62
+ - LoadingIndicator
63
+ - Menu
64
+ - Modal + ModalService
65
+ - NumberSelect
66
+ - Select
67
+ - Sidebar
68
+ - Snackbar + SnackbarService
69
+ - SpeedDial
70
+ - Stepper (beta)
71
+ - Table (beta)
72
+ - Tabs
73
+ - Textarea
74
+ - TimeSelect
75
+ - Tooltip
76
+ - TreeView (beta)
77
+ - Typography
78
+
79
+
80
+ ## Credit
83
81
 
84
82
  uses fontawesome icons as SVGs
85
83
  https://fontawesome.com/license