@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc09
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/CHANGELOG.md +513 -411
- package/README.md +40 -11
- package/dist/css/base.css +133 -67
- package/dist/css/component-reset.css +27 -0
- package/dist/css/pure-css.css +157 -79
- package/package.json +83 -81
- package/src/js/fit.js +5 -2
- package/src/scss/_base-css-variables.scss +429 -655
- package/src/scss/_fit-flyout.scss +1 -1
- package/src/scss/_layout-container.scss +168 -168
- package/src/scss/_navbar-elements.scss +11 -2
- package/src/scss/_resize-handle.scss +1 -1
- package/src/scss/_sidebar-states.scss +2 -2
- package/src/scss/_sidebar.scss +21 -6
- package/src/scss/component-reset.scss +65 -0
- package/src/scss/reboot.scss +134 -134
- package/src/scss/scrollbars.scss +48 -48
- package/src/scss/variables/_base.scss +150 -38
- package/src/scss/variables/_colors.scss +208 -237
- package/src/scss/variables/_index.scss +27 -23
- package/src/scss/variables/_system.scss +19 -23
- package/src/scss/variables/_components.scss +0 -840
package/src/scss/reboot.scss
CHANGED
|
@@ -1,134 +1,134 @@
|
|
|
1
|
-
// @keenmate/pure-css — reset & base element styling ("reboot")
|
|
2
|
-
// ============================================================================
|
|
3
|
-
// The foundation's reset layer. Establishes the 10px rem base that EVERY
|
|
4
|
-
// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
|
|
5
|
-
// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
|
|
6
|
-
// base styling for standard HTML elements (headings, paragraphs, links, lists,
|
|
7
|
-
// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
|
|
8
|
-
//
|
|
9
|
-
// This lives in pure-css — not in a consuming app — because the 10px base is
|
|
10
|
-
// part of the foundation's sizing contract: without it, a standalone consumer
|
|
11
|
-
// inherits the browser's 16px root and every rem renders 1.6x too large. Link
|
|
12
|
-
// it (or the full `pure-css.css` bundle) and the scale just works.
|
|
13
|
-
//
|
|
14
|
-
// App-specific base rules (the admin dashboard's decorative body background,
|
|
15
|
-
// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
|
|
16
|
-
// foundation shouldn't impose them on every consumer.
|
|
17
|
-
// ============================================================================
|
|
18
|
-
|
|
19
|
-
@use 'variables/index' as *;
|
|
20
|
-
|
|
21
|
-
// 10px rem base for intuitive sizing (1rem = 10px)
|
|
22
|
-
// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
|
|
23
|
-
html {
|
|
24
|
-
font-size: 10px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Reset and base styles
|
|
28
|
-
* {
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// Standard HTML element spacing (using framework variables)
|
|
33
|
-
// Headings
|
|
34
|
-
h1, h2, h3, h4, h5, h6 {
|
|
35
|
-
margin: $heading-margin-top 0 $heading-margin-bottom 0;
|
|
36
|
-
padding: 0;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// Paragraphs
|
|
40
|
-
p {
|
|
41
|
-
margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
|
|
42
|
-
padding: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// Links — global default. Wrapped in :where() so specificity is 0,
|
|
46
|
-
// letting component scopes (alerts, navbar, sidebar) override with even a
|
|
47
|
-
// single class without fighting the pseudo-class specificity raise that
|
|
48
|
-
// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
|
|
49
|
-
:where(a) {
|
|
50
|
-
color: var(--pc-link-color);
|
|
51
|
-
text-decoration: underline;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:where(a:hover) {
|
|
55
|
-
color: var(--pc-link-color-hover);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
:where(a:visited) {
|
|
59
|
-
color: var(--pc-link-color-visited);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// Lists - styled lists (default browser styling)
|
|
63
|
-
ul, ol {
|
|
64
|
-
margin: $list-margin-top 0 $list-margin-bottom 0;
|
|
65
|
-
padding: 0;
|
|
66
|
-
padding-inline-start: $list-padding-left; // RTL: flips to right
|
|
67
|
-
|
|
68
|
-
li {
|
|
69
|
-
margin-bottom: $list-item-margin-bottom;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// Lists - unstyled (for navigation, etc.)
|
|
74
|
-
ul.unstyled, ol.unstyled {
|
|
75
|
-
list-style: none;
|
|
76
|
-
padding-inline-start: 0; // RTL: flips to right
|
|
77
|
-
|
|
78
|
-
li {
|
|
79
|
-
margin-bottom: 0;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// Definition lists
|
|
84
|
-
dl {
|
|
85
|
-
margin: $list-margin-top 0 $list-margin-bottom 0;
|
|
86
|
-
padding: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
dd {
|
|
90
|
-
margin: 0;
|
|
91
|
-
padding: 0;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// Blockquote
|
|
95
|
-
blockquote {
|
|
96
|
-
margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
|
|
97
|
-
padding-inline-start: $blockquote-padding-left; // RTL: flips to right
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Pre/Code blocks
|
|
101
|
-
pre {
|
|
102
|
-
overflow-x: auto;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Horizontal rule
|
|
106
|
-
hr {
|
|
107
|
-
margin: $hr-margin-top 0 $hr-margin-bottom 0;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
// Figure
|
|
111
|
-
figure {
|
|
112
|
-
margin: $figure-margin-top 0 $figure-margin-bottom 0;
|
|
113
|
-
padding: 0;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
body {
|
|
117
|
-
margin: 0;
|
|
118
|
-
padding: 0;
|
|
119
|
-
font-family: var(--base-font-family);
|
|
120
|
-
font-size: 1.6rem; // 16px default text (with 10px rem base)
|
|
121
|
-
color: var(--pc-text-color-1);
|
|
122
|
-
background-color: var(--pc-page-bg);
|
|
123
|
-
line-height: $line-height-base;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// Ensure form elements and labels inherit theme font and size instead of browser defaults
|
|
127
|
-
button,
|
|
128
|
-
input,
|
|
129
|
-
select,
|
|
130
|
-
textarea,
|
|
131
|
-
label {
|
|
132
|
-
font-family: inherit;
|
|
133
|
-
font-size: inherit;
|
|
134
|
-
}
|
|
1
|
+
// @keenmate/pure-css — reset & base element styling ("reboot")
|
|
2
|
+
// ============================================================================
|
|
3
|
+
// The foundation's reset layer. Establishes the 10px rem base that EVERY
|
|
4
|
+
// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
|
|
5
|
+
// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
|
|
6
|
+
// base styling for standard HTML elements (headings, paragraphs, links, lists,
|
|
7
|
+
// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
|
|
8
|
+
//
|
|
9
|
+
// This lives in pure-css — not in a consuming app — because the 10px base is
|
|
10
|
+
// part of the foundation's sizing contract: without it, a standalone consumer
|
|
11
|
+
// inherits the browser's 16px root and every rem renders 1.6x too large. Link
|
|
12
|
+
// it (or the full `pure-css.css` bundle) and the scale just works.
|
|
13
|
+
//
|
|
14
|
+
// App-specific base rules (the admin dashboard's decorative body background,
|
|
15
|
+
// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
|
|
16
|
+
// foundation shouldn't impose them on every consumer.
|
|
17
|
+
// ============================================================================
|
|
18
|
+
|
|
19
|
+
@use 'variables/index' as *;
|
|
20
|
+
|
|
21
|
+
// 10px rem base for intuitive sizing (1rem = 10px)
|
|
22
|
+
// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
|
|
23
|
+
html {
|
|
24
|
+
font-size: 10px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Reset and base styles
|
|
28
|
+
* {
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Standard HTML element spacing (using framework variables)
|
|
33
|
+
// Headings
|
|
34
|
+
h1, h2, h3, h4, h5, h6 {
|
|
35
|
+
margin: $heading-margin-top 0 $heading-margin-bottom 0;
|
|
36
|
+
padding: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Paragraphs
|
|
40
|
+
p {
|
|
41
|
+
margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Links — global default. Wrapped in :where() so specificity is 0,
|
|
46
|
+
// letting component scopes (alerts, navbar, sidebar) override with even a
|
|
47
|
+
// single class without fighting the pseudo-class specificity raise that
|
|
48
|
+
// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
|
|
49
|
+
:where(a) {
|
|
50
|
+
color: var(--pc-link-color);
|
|
51
|
+
text-decoration: underline;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:where(a:hover) {
|
|
55
|
+
color: var(--pc-link-color-hover);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:where(a:visited) {
|
|
59
|
+
color: var(--pc-link-color-visited);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Lists - styled lists (default browser styling)
|
|
63
|
+
ul, ol {
|
|
64
|
+
margin: $list-margin-top 0 $list-margin-bottom 0;
|
|
65
|
+
padding: 0;
|
|
66
|
+
padding-inline-start: $list-padding-left; // RTL: flips to right
|
|
67
|
+
|
|
68
|
+
li {
|
|
69
|
+
margin-bottom: $list-item-margin-bottom;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Lists - unstyled (for navigation, etc.)
|
|
74
|
+
ul.unstyled, ol.unstyled {
|
|
75
|
+
list-style: none;
|
|
76
|
+
padding-inline-start: 0; // RTL: flips to right
|
|
77
|
+
|
|
78
|
+
li {
|
|
79
|
+
margin-bottom: 0;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Definition lists
|
|
84
|
+
dl {
|
|
85
|
+
margin: $list-margin-top 0 $list-margin-bottom 0;
|
|
86
|
+
padding: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
dd {
|
|
90
|
+
margin: 0;
|
|
91
|
+
padding: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Blockquote
|
|
95
|
+
blockquote {
|
|
96
|
+
margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
|
|
97
|
+
padding-inline-start: $blockquote-padding-left; // RTL: flips to right
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Pre/Code blocks
|
|
101
|
+
pre {
|
|
102
|
+
overflow-x: auto;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Horizontal rule
|
|
106
|
+
hr {
|
|
107
|
+
margin: $hr-margin-top 0 $hr-margin-bottom 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Figure
|
|
111
|
+
figure {
|
|
112
|
+
margin: $figure-margin-top 0 $figure-margin-bottom 0;
|
|
113
|
+
padding: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
body {
|
|
117
|
+
margin: 0;
|
|
118
|
+
padding: 0;
|
|
119
|
+
font-family: var(--base-font-family);
|
|
120
|
+
font-size: 1.6rem; // 16px default text (with 10px rem base)
|
|
121
|
+
color: var(--pc-text-color-1);
|
|
122
|
+
background-color: var(--pc-page-bg);
|
|
123
|
+
line-height: $line-height-base;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Ensure form elements and labels inherit theme font and size instead of browser defaults
|
|
127
|
+
button,
|
|
128
|
+
input,
|
|
129
|
+
select,
|
|
130
|
+
textarea,
|
|
131
|
+
label {
|
|
132
|
+
font-family: inherit;
|
|
133
|
+
font-size: inherit;
|
|
134
|
+
}
|
package/src/scss/scrollbars.scss
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
// @keenmate/pure-css — global scrollbar styling
|
|
2
|
-
// ============================================================================
|
|
3
|
-
// Themed, consistent scrollbars across browsers (WebKit `::-webkit-scrollbar`
|
|
4
|
-
// pseudo-elements + the Firefox `scrollbar-width` / `scrollbar-color`
|
|
5
|
-
// properties). Global `*` chrome — part of the foundation's "consistent
|
|
6
|
-
// appearance" promise, so a standalone pure-css page gets the same thin themed
|
|
7
|
-
// scrollbars as a full pure-admin app rather than native browser ones.
|
|
8
|
-
//
|
|
9
|
-
// Colours come from the emitted `--pc-*` cascade, so scrollbars re-theme at
|
|
10
|
-
// runtime with everything else.
|
|
11
|
-
// ============================================================================
|
|
12
|
-
|
|
13
|
-
@use 'variables/index' as *;
|
|
14
|
-
|
|
15
|
-
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
16
|
-
*::-webkit-scrollbar {
|
|
17
|
-
width: $scrollbar-width;
|
|
18
|
-
height: $scrollbar-width;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
*::-webkit-scrollbar-track {
|
|
22
|
-
background: var(--pc-page-bg);
|
|
23
|
-
border-radius: var(--pc-border-radius-sm);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
*::-webkit-scrollbar-thumb {
|
|
27
|
-
background: var(--pc-border-color);
|
|
28
|
-
border-radius: var(--pc-border-radius-sm);
|
|
29
|
-
border: $border-width-base solid var(--pc-page-bg);
|
|
30
|
-
|
|
31
|
-
&:hover {
|
|
32
|
-
background: var(--pc-accent);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
&:active {
|
|
36
|
-
background: var(--pc-accent-hover);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
*::-webkit-scrollbar-corner {
|
|
41
|
-
background: var(--pc-page-bg);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/* Firefox */
|
|
45
|
-
* {
|
|
46
|
-
scrollbar-width: thin;
|
|
47
|
-
scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
|
|
48
|
-
}
|
|
1
|
+
// @keenmate/pure-css — global scrollbar styling
|
|
2
|
+
// ============================================================================
|
|
3
|
+
// Themed, consistent scrollbars across browsers (WebKit `::-webkit-scrollbar`
|
|
4
|
+
// pseudo-elements + the Firefox `scrollbar-width` / `scrollbar-color`
|
|
5
|
+
// properties). Global `*` chrome — part of the foundation's "consistent
|
|
6
|
+
// appearance" promise, so a standalone pure-css page gets the same thin themed
|
|
7
|
+
// scrollbars as a full pure-admin app rather than native browser ones.
|
|
8
|
+
//
|
|
9
|
+
// Colours come from the emitted `--pc-*` cascade, so scrollbars re-theme at
|
|
10
|
+
// runtime with everything else.
|
|
11
|
+
// ============================================================================
|
|
12
|
+
|
|
13
|
+
@use 'variables/index' as *;
|
|
14
|
+
|
|
15
|
+
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
16
|
+
*::-webkit-scrollbar {
|
|
17
|
+
width: $scrollbar-width;
|
|
18
|
+
height: $scrollbar-width;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
*::-webkit-scrollbar-track {
|
|
22
|
+
background: var(--pc-page-bg);
|
|
23
|
+
border-radius: var(--pc-border-radius-sm);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
*::-webkit-scrollbar-thumb {
|
|
27
|
+
background: var(--pc-border-color);
|
|
28
|
+
border-radius: var(--pc-border-radius-sm);
|
|
29
|
+
border: $border-width-base solid var(--pc-page-bg);
|
|
30
|
+
|
|
31
|
+
&:hover {
|
|
32
|
+
background: var(--pc-accent);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:active {
|
|
36
|
+
background: var(--pc-accent-hover);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
*::-webkit-scrollbar-corner {
|
|
41
|
+
background: var(--pc-page-bg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Firefox */
|
|
45
|
+
* {
|
|
46
|
+
scrollbar-width: thin;
|
|
47
|
+
scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
|
|
48
|
+
}
|