mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-23 01:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #16 from rcoup/web-components-host

Browse source 
Support web components/shadow DOM.
This commit is contained in:
JWB 2024-12-03 09:14:58 -05:00 • committed by GitHub
commit 5d2e82ddaf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
scss/colors/utilities/_css-vars.scss
View file

@ -10,7 +10,8 @@
$css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name}; $css-var-color-prefix: #{settings.$css-var-prefix}#{$color-property-name};
@if $enable-css-vars { @if $enable-css-vars {
:root { :root,
:host {
// Loop through color families // Loop through color families
@each $family, $colors in colors.$colors { @each $family, $colors in colors.$colors {
@if list.index(map.get(settings.$palette, "color-families"), $family) { @if list.index(map.get(settings.$palette, "color-families"), $family) {

3
scss/components/_modal.scss
View file

@ -6,7 +6,8 @@
* Modal (<dialog>) * Modal (<dialog>)
*/ */
:root { :root,
:host {
#{$css-var-prefix}scrollbar-width: 0px; #{$css-var-prefix}scrollbar-width: 0px;
} }

3
scss/content/_embedded.scss
View file

@ -47,7 +47,8 @@
} }
// Hide the overflow in IE // Hide the overflow in IE
#{$parent-selector} svg:not(:root) { #{$parent-selector} svg:not(:root),
#{$parent-selector} svg:not(:host) {
overflow: hidden; overflow: hidden;
} }
} }

3
scss/layout/_document.scss
View file

@ -34,7 +34,8 @@
// 3. Use a 4-space tab width in all browsers (opinionated) // 3. Use a 4-space tab width in all browsers (opinionated)
// 4. Remove the grey highlight on links in iOS (opinionated) // 4. Remove the grey highlight on links in iOS (opinionated)
// 5. Prevent adjustments of font size after orientation changes in iOS // 5. Prevent adjustments of font size after orientation changes in iOS
:where(:root) { :where(:root),
:where(:host) {
-webkit-tap-highlight-color: transparent; // 4 -webkit-tap-highlight-color: transparent; // 4
-webkit-text-size-adjust: 100%; // 5 -webkit-text-size-adjust: 100%; // 5
text-size-adjust: 100%; // 5 text-size-adjust: 100%; // 5

6
scss/themes/default/_schemes.scss
View file

@ -12,14 +12,16 @@
// Light color scheme (Default) // Light color scheme (Default)
// Can be forced with data-theme="light" // Can be forced with data-theme="light"
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]),
:host(:not([data-theme="dark"])) {
@include light.theme; @include light.theme;
} }
// Dark color scheme (Auto) // Dark color scheme (Auto)
// Automatically enabled if user has Dark mode enabled // Automatically enabled if user has Dark mode enabled
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) { :root:not([data-theme]),
:host(:not([data-theme])) {
@include dark.theme; @include dark.theme;
} }
} }

3
scss/themes/default/_styles.scss
View file

@ -9,7 +9,8 @@
* Styles * Styles
*/ */
:root { :root,
:host {
// Typography // Typography
#{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", #{$css-var-prefix}font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji"; "Noto Color Emoji";