@san-siva/stylekit 1.0.3 → 1.0.4
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/README.md +2 -0
- package/package.json +1 -1
- package/styles/dimensions.module.scss +25 -28
- package/styles/typography.module.scss +2 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# StyleKit
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
|
|
3
5
|
A comprehensive, modular SCSS design system providing colors, typography, animations, utilities, and layout dimensions for building consistent, beautiful user interfaces. Built with CSS Modules support and designed for modern web applications.
|
|
4
6
|
|
|
5
7
|
**[View Full Documentation](https://stylekit-68309.web.app/)**
|
package/package.json
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
padding: utils.rem(18);
|
|
17
17
|
min-height: calc(100% - #{utils.rem(36)});
|
|
18
|
-
|
|
18
|
+
width: calc(100% - #{utils.rem(36)});
|
|
19
19
|
height: auto;
|
|
20
20
|
|
|
21
21
|
&--contents-centered {
|
|
@@ -23,35 +23,30 @@
|
|
|
23
23
|
align-items: center;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
&--no-padding {
|
|
27
|
+
padding: 0;
|
|
28
|
+
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
$max-width--page-contents: utils.rem(780);
|
|
32
32
|
|
|
33
33
|
.page {
|
|
34
|
-
|
|
34
|
+
$padding-top: utils.rem(80);
|
|
35
|
+
$padding-bottom: utils.rem(48);
|
|
36
|
+
|
|
35
37
|
display: block;
|
|
38
|
+
margin: 0 auto;
|
|
36
39
|
|
|
37
40
|
height: auto;
|
|
38
|
-
min-height: calc(
|
|
39
|
-
100% - var(--topbar-height) - #{utils.rem(48)} - #{utils.rem(48)} -
|
|
40
|
-
#{utils.rem(160)} - #{utils.rem(489)}
|
|
41
|
-
);
|
|
42
|
-
max-width: utils.rem(1216);
|
|
43
|
-
margin: 0 auto;
|
|
41
|
+
min-height: calc(100% - #{$padding-top} - #{$padding-bottom});
|
|
44
42
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
); // width should be 120px + remaining width + 120px
|
|
43
|
+
max-width: utils.rem(1216);
|
|
44
|
+
--width-sections: calc(100% - #{utils.rem(240)});
|
|
48
45
|
width: var(--width-sections);
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
padding:
|
|
53
|
-
--topbar-buffer: #{utils.rem(28)};
|
|
54
|
-
padding-top: utils.rem(80);
|
|
46
|
+
|
|
47
|
+
--padding-sections-left: calc((100% - var(--width-sections)) / 2);
|
|
48
|
+
padding: $padding-bottom var(--padding-sections-left);
|
|
49
|
+
padding-top: $padding-top;
|
|
55
50
|
|
|
56
51
|
&--contents-max-width {
|
|
57
52
|
> * {
|
|
@@ -59,15 +54,17 @@ $max-width--page-contents: utils.rem(780);
|
|
|
59
54
|
}
|
|
60
55
|
}
|
|
61
56
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
&--no-extra-padding {
|
|
58
|
+
--width-sections: calc(
|
|
59
|
+
100% - #{utils.rem(16)} - #{utils.rem(16)}
|
|
60
|
+
) !important;
|
|
61
|
+
--padding-sections-left: #{utils.rem(32)} !important;
|
|
62
|
+
padding: utils.rem(16) var(--padding-sections-left);
|
|
63
|
+
}
|
|
67
64
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
&--no-max-width {
|
|
66
|
+
max-width: unset;
|
|
67
|
+
}
|
|
71
68
|
}
|
|
72
69
|
|
|
73
70
|
$border-radius: utils.rem(4);
|
|
@@ -13,7 +13,8 @@ $font-weight--600: 600;
|
|
|
13
13
|
$font-weight--700: 700;
|
|
14
14
|
$font-weight--800: 800;
|
|
15
15
|
|
|
16
|
-
$font-size--very-
|
|
16
|
+
$font-size--very-large: utils.rem(64);
|
|
17
|
+
$font-size--large: utils.rem(48);
|
|
17
18
|
$font-size--h1: utils.rem(36);
|
|
18
19
|
$font-size--h2: utils.rem(32);
|
|
19
20
|
$font-size--h3: utils.rem(28);
|