@keenmate/pure-css 1.0.0-rc08 → 1.0.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/CHANGELOG.md +50 -0
- package/README.md +213 -184
- package/dist/css/base.css +3 -0
- package/dist/css/pure-css.css +11 -8
- package/package.json +1 -1
- package/src/scss/_base-css-variables.scss +17 -0
- package/src/scss/_fit-flyout.scss +1 -1
- package/src/scss/_navbar-elements.scss +4 -4
- package/src/scss/_resize-handle.scss +1 -1
- package/src/scss/_sidebar.scss +443 -443
- package/src/scss/variables/_base.scss +382 -368
|
@@ -215,7 +215,17 @@
|
|
|
215
215
|
--base-icon-delete: #{$base-icon-delete};
|
|
216
216
|
|
|
217
217
|
// === Utility icons ===
|
|
218
|
+
// search = magnifying glass (find by text); filter = funnel (refine/narrow a
|
|
219
|
+
// list — distinct affordance from search, its own knob).
|
|
218
220
|
--base-icon-search: #{$base-icon-search};
|
|
221
|
+
--base-icon-filter: #{$base-icon-filter};
|
|
222
|
+
|
|
223
|
+
// === Selection icons — checkbox / tree-node state pair ===
|
|
224
|
+
// check = ✓ (selected), indeterminate = − (tri-state parent, partially selected).
|
|
225
|
+
// Shared by web-multiselect / web-treeview / checkboxes. indeterminate shares the
|
|
226
|
+
// minus shape with collapse but is its OWN knob (selection ≠ disclosure).
|
|
227
|
+
--base-icon-check: #{$base-icon-check};
|
|
228
|
+
--base-icon-indeterminate: #{$base-icon-indeterminate};
|
|
219
229
|
|
|
220
230
|
// === Theme palette slots (1–9) + paired contrast text (WS7.6) ===
|
|
221
231
|
// Promoted into the --base-* contract so the branded/data-viz palette is
|
|
@@ -295,6 +305,13 @@
|
|
|
295
305
|
// .pc-mode-dark` covers html, body in light mode, and body in dark mode —
|
|
296
306
|
// regardless of which class layout each theme uses for mode switching.
|
|
297
307
|
//
|
|
308
|
+
// NOTE: this placement-agnosticism only covers the base tokens pure-css emits
|
|
309
|
+
// here. The pure-admin COMPONENT tokens (e.g. `--pa-btn-info-bg: var(--pc-info)`)
|
|
310
|
+
// are emitted once at `:root` by core and are NOT re-emitted per mode, so they
|
|
311
|
+
// only re-resolve when the mode/variant class sits on the :root element itself.
|
|
312
|
+
// Consumers MUST therefore apply `.pc-mode-*` / `.pa-color-*` to `<html>`, not
|
|
313
|
+
// `<body>` — see README "Mode & variant class placement".
|
|
314
|
+
//
|
|
298
315
|
// This is a TOP-LEVEL rule (not inside the mixin) because themes only call
|
|
299
316
|
// the mixin from their light-mode block; they don't call it again in the
|
|
300
317
|
// dark-mode block. Emitting at framework level means themes get correct
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
min-width: 20rem;
|
|
61
61
|
max-width: 32rem;
|
|
62
62
|
padding: $spacing-sm;
|
|
63
|
-
background: var(--
|
|
63
|
+
background: var(--base-main-bg);
|
|
64
64
|
border: $border-width-base solid var(--pc-border-color);
|
|
65
65
|
border-radius: var(--pc-border-radius);
|
|
66
66
|
box-shadow: $shadow-lg;
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
top: 100%;
|
|
143
143
|
inset-inline-start: 0; // RTL: flips to right: 0
|
|
144
144
|
min-width: 19.2rem;
|
|
145
|
-
background-color: var(--
|
|
145
|
+
background-color: var(--base-main-bg);
|
|
146
146
|
border: $border-width-base solid var(--pc-border-color);
|
|
147
147
|
border-radius: var(--pc-border-radius);
|
|
148
148
|
box-shadow: $shadow-lg;
|
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
// SVG mask chevron (was a "›" text glyph). Shares --base-icon-chevron with the
|
|
260
|
-
// sidebar + components; --
|
|
260
|
+
// sidebar + components; --pa-icon-chevron (core) overrides, #{$base-icon-chevron} is
|
|
261
261
|
// the standalone fallback. `font-size: 0` hides any legacy "›" in old markup.
|
|
262
262
|
&__more-chevron {
|
|
263
263
|
display: inline-block;
|
|
@@ -267,8 +267,8 @@
|
|
|
267
267
|
flex-shrink: 0;
|
|
268
268
|
font-size: 0;
|
|
269
269
|
background-color: currentColor;
|
|
270
|
-
-webkit-mask: var(--
|
|
271
|
-
mask: var(--
|
|
270
|
+
-webkit-mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.1rem no-repeat;
|
|
271
|
+
mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.1rem no-repeat;
|
|
272
272
|
transition: transform $transition-fast $easing-snappy;
|
|
273
273
|
}
|
|
274
274
|
|
|
@@ -46,7 +46,7 @@ $resize-knob-radius-lg: 6px !default;
|
|
|
46
46
|
// themes (radius 0) stay square via min(). High-contrast fill / border / shadow
|
|
47
47
|
// so the knob stands out on both light and dark surfaces.
|
|
48
48
|
border-radius: min(var(--pc-border-radius-lg), #{$resize-knob-radius});
|
|
49
|
-
background-color: var(--
|
|
49
|
+
background-color: var(--base-main-bg);
|
|
50
50
|
border: $border-width-medium solid var(--pc-border-color);
|
|
51
51
|
color: var(--pc-text-color-2);
|
|
52
52
|
font-size: $font-size-lg;
|