@oardi/css-utils 0.19.6 → 0.21.0
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.
- package/package.json +1 -1
- package/readme.md +5 -26
- package/scss/components/button.scss +3 -3
- package/scss/components/icon-button.scss +2 -3
- package/scss/components/list.scss +3 -3
- package/scss/flex-responsive.scss +0 -4
- package/scss/index.scss +1 -0
- package/scss/reboot.scss +106 -0
- package/scss/typography.scss +1 -1
- package/scss/utilities.scss +10 -8
- package/scss/variables.scss +7 -10
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Powerful set of CSS Utility classes for Colors, Typography, Spacings, Flex and CSS Grid.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Showcase
|
|
6
6
|
|
|
7
7
|
Browse the Showcase [here](https://css-utils.oardi.com/)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
### Install npm package
|
|
10
12
|
|
|
11
13
|
```
|
|
12
14
|
npm i @oardi/css-utils
|
|
@@ -14,36 +16,13 @@ npm i @oardi/css-utils
|
|
|
14
16
|
|
|
15
17
|
### Import SCSS files
|
|
16
18
|
|
|
17
|
-
#### Option 1 - Import full library
|
|
18
|
-
|
|
19
19
|
This will import the theme with all utility classes and their responsive classes as well as predefined components. This will result in a bundle size around 44kb.
|
|
20
20
|
|
|
21
21
|
```scss
|
|
22
|
-
@use '@oardi/css-
|
|
22
|
+
@use '@oardi/css-utilss/scss/index.scss';
|
|
23
23
|
@use '@oardi/css-utils/scss/components.scss';
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
#### Option 2 - Import minimal set only
|
|
27
|
-
|
|
28
|
-
To reduce the bundle size, import only what you really need or use a tool like PurgeCSS.
|
|
29
|
-
|
|
30
|
-
Example of a minimal set for colors, typography and spacings like margins and paddings.
|
|
31
|
-
|
|
32
|
-
```scss
|
|
33
|
-
@use '@oardi/css-utils/scss/variables.scss';
|
|
34
|
-
@use '@oardi/css-utils/scss/typography.scss';
|
|
35
|
-
@use '@oardi/css-utils/scss/spacings.scss';
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
#### Option 3 - Import specific component only
|
|
39
|
-
|
|
40
|
-
You can import only specific predefined components as well.
|
|
41
|
-
|
|
42
|
-
```scss
|
|
43
|
-
@use '@oardi/css-utils/scss/variables.scss';
|
|
44
|
-
@use '@oardi/css-utils/scss/components/button.scss';
|
|
45
|
-
```
|
|
46
|
-
|
|
47
26
|
### Use Utility classes
|
|
48
27
|
|
|
49
28
|
```html
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&:focus {
|
|
75
|
-
outline:
|
|
75
|
+
outline: 2px solid var(--#{$name}-light);
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
&:focus {
|
|
92
92
|
color: var(--on-#{$name});
|
|
93
|
-
outline:
|
|
93
|
+
outline: 2px solid var(--#{$name}-light);
|
|
94
94
|
background-color: var(--#{$name});
|
|
95
95
|
}
|
|
96
96
|
}
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
color: var(--#{$name});
|
|
100
100
|
|
|
101
101
|
&:focus {
|
|
102
|
-
outline:
|
|
102
|
+
outline: 2px solid var(--#{$name}-light);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
}
|
|
@@ -85,7 +85,7 @@ $sizes: (
|
|
|
85
85
|
&:hover,
|
|
86
86
|
&:active,
|
|
87
87
|
&:focus {
|
|
88
|
-
outline:
|
|
88
|
+
outline: 2px solid var(--#{$name}-light);
|
|
89
89
|
color: var(--on-#{$name});
|
|
90
90
|
}
|
|
91
91
|
|
|
@@ -105,12 +105,11 @@ $sizes: (
|
|
|
105
105
|
color: var(--on-#{$name});
|
|
106
106
|
fill: var(--on-#{$name});
|
|
107
107
|
background-color: var(--#{$name});
|
|
108
|
-
box-shadow: 0 0 0 0.2rem transparent;
|
|
109
108
|
|
|
110
109
|
&:hover,
|
|
111
110
|
&:active,
|
|
112
111
|
&:focus {
|
|
113
|
-
|
|
112
|
+
outline: 2px solid var(--#{$name}-light);
|
|
114
113
|
background-color: var(--#{$name}-dark);
|
|
115
114
|
}
|
|
116
115
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--list-bg-color: var(--white);
|
|
3
2
|
--list-border-color: transparent;
|
|
4
|
-
// --list-item-hover-bg-color: var(--highlight);
|
|
5
3
|
--list-border-width: 1px;
|
|
6
4
|
--list-padding: 0rem;
|
|
7
5
|
--list-item-padding: 1rem;
|
|
6
|
+
--list-item-bg-color: var(--white);
|
|
7
|
+
// --list-item-hover-bg-color: var(--highlight);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.list {
|
|
11
|
-
background-color: var(--list-bg-color);
|
|
12
11
|
border: var(--list-border-width) solid var(--list-border-color);
|
|
13
12
|
padding: var(--list-padding);
|
|
14
13
|
list-style-type: none;
|
|
15
14
|
|
|
16
15
|
.list-item {
|
|
16
|
+
background-color: var(--list-item-bg-color);
|
|
17
17
|
color: var(--font-color);
|
|
18
18
|
min-height: 1px;
|
|
19
19
|
padding: var(--list-item-padding);
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use './theme.scss';
|
|
3
3
|
|
|
4
|
-
// TODO
|
|
5
|
-
// add responsive classes for
|
|
6
|
-
// d-flex, d-inline-flex
|
|
7
|
-
|
|
8
4
|
@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
|
|
9
5
|
@media (min-width: #{$bp-value}) {
|
|
10
6
|
@each $key, $value in map.get(theme.$theme, spacings) {
|
package/scss/index.scss
CHANGED
package/scss/reboot.scss
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
*,
|
|
2
|
+
::after,
|
|
3
|
+
::before {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html {
|
|
8
|
+
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
9
|
+
line-height: 1.15;
|
|
10
|
+
-webkit-text-size-adjust: 100%;
|
|
11
|
+
tab-size: 4;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
b,
|
|
19
|
+
strong {
|
|
20
|
+
font-weight: bolder;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
code,
|
|
24
|
+
kbd,
|
|
25
|
+
pre,
|
|
26
|
+
samp {
|
|
27
|
+
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
28
|
+
font-size: 1em;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
small {
|
|
32
|
+
font-size: 80%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
sub,
|
|
36
|
+
sup {
|
|
37
|
+
font-size: 75%;
|
|
38
|
+
line-height: 0;
|
|
39
|
+
position: relative;
|
|
40
|
+
vertical-align: baseline;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
sub {
|
|
44
|
+
bottom: -0.25em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
sup {
|
|
48
|
+
top: -0.5em;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
table {
|
|
52
|
+
border-color: currentcolor;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
button,
|
|
56
|
+
input,
|
|
57
|
+
optgroup,
|
|
58
|
+
select,
|
|
59
|
+
textarea {
|
|
60
|
+
font-family: inherit;
|
|
61
|
+
font-size: 100%;
|
|
62
|
+
line-height: 1.15;
|
|
63
|
+
margin: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[type='button'],
|
|
67
|
+
[type='reset'],
|
|
68
|
+
[type='submit'],
|
|
69
|
+
button {
|
|
70
|
+
-webkit-appearance: button;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
legend {
|
|
74
|
+
padding: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
progress {
|
|
78
|
+
vertical-align: baseline;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
::-webkit-inner-spin-button,
|
|
82
|
+
::-webkit-outer-spin-button {
|
|
83
|
+
height: auto;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
[type='search'] {
|
|
87
|
+
-webkit-appearance: textfield;
|
|
88
|
+
outline-offset: -2px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
::-webkit-search-decoration {
|
|
92
|
+
-webkit-appearance: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
::-webkit-file-upload-button {
|
|
96
|
+
-webkit-appearance: button;
|
|
97
|
+
font: inherit;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
summary {
|
|
101
|
+
display: list-item;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
ul {
|
|
105
|
+
padding-left: 1rem;
|
|
106
|
+
}
|
package/scss/typography.scss
CHANGED
package/scss/utilities.scss
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use './theme.scss';
|
|
3
3
|
|
|
4
|
+
.d-block {
|
|
5
|
+
display: block;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.d-inline-block {
|
|
9
|
+
display: inline-block;
|
|
10
|
+
}
|
|
11
|
+
|
|
4
12
|
.d-none {
|
|
5
13
|
display: none;
|
|
6
14
|
}
|
|
@@ -16,15 +24,9 @@
|
|
|
16
24
|
max-width: var(--container);
|
|
17
25
|
margin-left: auto;
|
|
18
26
|
margin-right: auto;
|
|
19
|
-
padding-left:
|
|
20
|
-
padding-right:
|
|
27
|
+
padding-left: 1rem;
|
|
28
|
+
padding-right: 1rem;
|
|
21
29
|
width: 100%;
|
|
22
|
-
|
|
23
|
-
// use breakpoint utility
|
|
24
|
-
@media (max-width: 576px) {
|
|
25
|
-
padding-left: 1.25rem;
|
|
26
|
-
padding-right: 1.25rem;
|
|
27
|
-
}
|
|
28
30
|
}
|
|
29
31
|
|
|
30
32
|
.text-center {
|
package/scss/variables.scss
CHANGED
|
@@ -3,12 +3,6 @@
|
|
|
3
3
|
@use './theme.scss';
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--white: #ffffff;
|
|
7
|
-
--black: #000000;
|
|
8
|
-
|
|
9
|
-
--font-color: #000000;
|
|
10
|
-
--body-bg-color: #f9f9f9;
|
|
11
|
-
|
|
12
6
|
@each $name, $value in map.get(theme.$theme, colors) {
|
|
13
7
|
--#{$name}-light: #{color.adjust($value, $lightness: 15%)};
|
|
14
8
|
--#{$name}: #{$value};
|
|
@@ -24,6 +18,12 @@
|
|
|
24
18
|
--gray-#{$name}: #{$value};
|
|
25
19
|
}
|
|
26
20
|
|
|
21
|
+
--white: #ffffff;
|
|
22
|
+
--black: #000000;
|
|
23
|
+
|
|
24
|
+
--font-color: var(--gray-10);
|
|
25
|
+
--body-bg-color: #f9f9f9;
|
|
26
|
+
|
|
27
27
|
--highlight: rgba(189, 189, 189, 0.1);
|
|
28
28
|
--border-radius: 6px;
|
|
29
29
|
|
|
@@ -31,12 +31,9 @@
|
|
|
31
31
|
--shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
|
|
32
32
|
--shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.005);
|
|
33
33
|
|
|
34
|
-
--box-shadow: 0 0 0 0.2rem var(--primary-light);
|
|
35
|
-
--box-shadow-error: 0 0 0 0.2rem var(--error-light);
|
|
36
|
-
|
|
37
34
|
--focus-outline: 2px solid var(--primary-light);
|
|
38
35
|
--focus-outline-error: 2px solid var(--error-light);
|
|
39
36
|
--focus-offset: -2px;
|
|
40
37
|
|
|
41
|
-
--container:
|
|
38
|
+
--container: 780px;
|
|
42
39
|
}
|