@canlooks/can-ui 0.0.97 → 0.0.99

package/dist/cjs/components/progress/progress.style.js

@@ -19,134 +19,134 @@ function useStyle({ color, variant }) {
         const indeterminateBg = (0, color_1.default)(colorValue).alpha(.3).string();
         return variant === 'linear'
             ? (0, react_1.css) `
-                display: flex;
-                gap: ${spacing[3]}px;
-                align-items: center;
-
-                .${exports.classes.track} {
-                    flex: 1;
-                    background-color: ${gray(.1)};
-                    border-radius: 1000em;
-                    overflow: hidden;
-                    position: relative;
-
-                    &:before, .${exports.classes.bar} {
-                        background-color: ${colorValue};
-                        border-radius: inherit;
-                        transition: width .25s ${easing.easeOut};
-                        position: absolute;
-                        inset: 0 auto 0 0;
-                    }
-    
-                    &:before {
-                        content: '';
-                    }
-                }
-
-                &[data-indeterminate=true] {
-                    .${exports.classes.track} {
-                        background-color: ${indeterminateBg};
-                        
-                        &:before {
-                            animation: ${indeterminateAnim2} 2.25s ${easing.linear} infinite 1.1s;
+                    @layer reset {
+                        display: flex;
+                        gap: ${spacing[3]}px;
+                        align-items: center;
+
+                        .${exports.classes.track} {
+                            flex: 1;
+                            background-color: ${gray(.1)};
+                            border-radius: 1000em;
+                            overflow: hidden;
+                            position: relative;
+
+                            &::before, .${exports.classes.bar} {
+                                background-color: ${colorValue};
+                                border-radius: inherit;
+                                transition: width .25s ${easing.easeOut};
+                                position: absolute;
+                                inset: 0 auto 0 0;
+                            }
+
+                            &::before {
+                                content: '';
+                            }
                         }
-                        
-                        .${exports.classes.bar} {
-                            animation: ${indeterminateAnim1} 2.25s ${easing.linear} infinite;
+
+                        &[data-indeterminate=true] {
+                            .${exports.classes.track} {
+                                background-color: ${indeterminateBg};
+
+                                &::before {
+                                    animation: ${indeterminateAnim2} 2.25s ${easing.linear} infinite 1.1s;
+                                }
+
+                                .${exports.classes.bar} {
+                                    animation: ${indeterminateAnim1} 2.25s ${easing.linear} infinite;
+                                }
+                            }
                         }
-                    }
-                }
 
-                .${exports.classes.info} {
-                    line-height: 1;
+                        .${exports.classes.info} {
+                            line-height: 1;
 
-                    .${exports.classes.icon} {
-                        animation: ${iconAnim} .25s ${easing.swing}
-                    }
-                }
+                            .${exports.classes.icon} {
+                                animation: ${iconAnim} .25s ${easing.swing}
+                            }
+                        }
 
-                &[data-success=true] {
-                    .${exports.classes.bar} {
-                        background-color: ${colors.success.main};
-                    }
-                }
+                        &[data-success=true] {
+                            .${exports.classes.bar} {
+                                background-color: ${colors.success.main};
+                            }
+                        }
 
-                &[data-error=true] {
-                    .${exports.classes.bar} {
-                        background-color: ${colors.error.main};
-                    }
-                }
-
-                &[data-processing=true] {
-                    .${exports.classes.bar} {
-                        &:after {
-                            content: '';
-                            background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
-                            border-radius: inherit;
-                            position: absolute;
-                            inset: 0;
-                            animation: ${processingAnim} 2s infinite ${easing.easeOut};
+                        &[data-error=true] {
+                            .${exports.classes.bar} {
+                                background-color: ${colors.error.main};
+                            }
+                        }
+
+                        &[data-processing=true] {
+                            .${exports.classes.bar} {
+                                &::after {
+                                    content: '';
+                                    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
+                                    border-radius: inherit;
+                                    position: absolute;
+                                    inset: 0;
+                                    animation: ${processingAnim} 2s infinite ${easing.easeOut};
+                                }
+                            }
                         }
                     }
-                }
             `
             // variant === 'circular' || variant === 'gauge'
             : (0, react_1.css) `
-                display: inline-flex;
-                position: relative;
-
-                .${exports.classes.svg} {
-                    transform: rotate(-90deg);
-                }
-
-                .${exports.classes.track} {
-                    stroke: ${gray(.1)};
-                    fill: transparent;
-                }
-
-                .${exports.classes.bar} {
-                    stroke: ${colorValue};
-                    fill: transparent;
-                    transition: stroke-dashoffset .25s ${easing.easeOut};
-                }
-
-                &[data-success=true] {
-                    .${exports.classes.bar} {
-                        stroke: ${colors.success.main};
-                    }
-                }
+                    @layer reset {
+                        display: inline-flex;
+                        position: relative;
 
-                &[data-error=true] {
-                    .${exports.classes.bar} {
-                        stroke: ${colors.error.main};
-                    }
-                }
+                        .${exports.classes.svg} {
+                            transform: rotate(-90deg);
+                        }
 
-                .${exports.classes.info} {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    position: absolute;
-                    inset: 0;
+                        .${exports.classes.track} {
+                            stroke: ${gray(.1)};
+                            fill: transparent;
+                        }
 
-                    .${exports.classes.icon} {
-                        animation: ${iconAnim} .25s ${easing.swing}
-                    }
-                }
+                        .${exports.classes.bar} {
+                            stroke: ${colorValue};
+                            fill: transparent;
+                            transition: stroke-dashoffset .25s ${easing.easeOut};
+                        }
 
-                &[data-indeterminate=true] {
-                    .${exports.classes.svg} {
-                        animation: ${indeterminateAnim3} 1.6s ${easing.linear} infinite;
-                    }
+                        &[data-success=true] {
+                            .${exports.classes.bar} {
+                                stroke: ${colors.success.main};
+                            }
+                        }
 
-                    .${exports.classes.track} {
-                        stroke: none;
-                    }
-                }
+                        &[data-error=true] {
+                            .${exports.classes.bar} {
+                                stroke: ${colors.error.main};
+                            }
+                        }
 
-                &[data-variant=gauge] {
-                    
-                }
+                        .${exports.classes.info} {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            position: absolute;
+                            inset: 0;
+
+                            .${exports.classes.icon} {
+                                animation: ${iconAnim} .25s ${easing.swing}
+                            }
+                        }
+
+                        &[data-indeterminate=true] {
+                            .${exports.classes.svg} {
+                                animation: ${indeterminateAnim3} 1.6s ${easing.linear} infinite;
+                            }
+
+                            .${exports.classes.track} {
+                                stroke: none;
+                            }
+                        }
+                    }
             `;
     }, [colorValue, variant]);
 }

package/dist/cjs/components/rating/rating.style.js

@@ -12,73 +12,75 @@ exports.classes = (0, utils_1.defineInnerClasses)('rate', [
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
     return (0, utils_1.useCss)(({ spacing, mode, gray, easing }) => (0, react_1.css) `
-        display: inline-flex;
-        gap: ${spacing[3]}px;
+        @layer reset {
+            display: inline-flex;
+            gap: ${spacing[3]}px;
 
-        .${exports.classes.star} {
-            font-size: ${20 / 14}em;
-            color: ${mode === 'light' ? gray(.14) : '#000000'};
-            display: flex;
-            position: relative;
-            -webkit-tap-highlight-color: transparent;
+            .${exports.classes.star} {
+                font-size: ${20 / 14}em;
+                color: ${mode === 'light' ? gray(.14) : '#000000'};
+                display: flex;
+                position: relative;
+                -webkit-tap-highlight-color: transparent;
 
-            [data-active=true] {
-                position: absolute;
-                color: ${colorValue};
+                [data-active=true] {
+                    position: absolute;
+                    color: ${colorValue};
 
-                &[data-half=true] {
-                    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+                    &[data-half=true] {
+                        clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+                    }
                 }
-            }
 
-            .${exports.classes.starBefore},
-            .${exports.classes.starAfter} {
-                width: 50%;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-            }
+                .${exports.classes.starBefore},
+                .${exports.classes.starAfter} {
+                    width: 50%;
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                }
 
-            .${exports.classes.starBefore} {
-                left: 0;
-            }
+                .${exports.classes.starBefore} {
+                    left: 0;
+                }
 
-            .${exports.classes.starAfter} {
-                right: 0;
+                .${exports.classes.starAfter} {
+                    right: 0;
+                }
             }
-        }
 
-        &[data-size=small] {
-            .${exports.classes.star} {
-                font-size: ${16 / 14}em;
+            &[data-size=small] {
+                .${exports.classes.star} {
+                    font-size: ${16 / 14}em;
+                }
             }
-        }
 
-        &[data-size=large] {
-            .${exports.classes.star} {
-                font-size: ${24 / 14}em;
+            &[data-size=large] {
+                .${exports.classes.star} {
+                    font-size: ${24 / 14}em;
+                }
             }
-        }
 
-        &:not([data-read-only=true]) {
-            .${exports.classes.star} {
-                cursor: pointer;
-                transition: transform .25s ${easing.easeOut};
-    
-                &:hover {
-                    transform: scale(1.2);
-                }
+            &:not([data-read-only=true]) {
+                .${exports.classes.star} {
+                    cursor: pointer;
+                    transition: transform .25s ${easing.easeOut};
+
+                    &:hover {
+                        transform: scale(1.2);
+                    }
 
-                &:active {
-                    transition: transform 0s;
-                    transform: scale(.9);
+                    &:active {
+                        transition: transform 0s;
+                        transform: scale(.9);
+                    }
                 }
             }
-        }
 
-        &[data-disabled=true] {
-            &, .${exports.classes.star} {
-                cursor: not-allowed;
+            &[data-disabled=true] {
+                &, .${exports.classes.star} {
+                    cursor: not-allowed;
+                }
             }
         }
     `, [colorValue]);