@canlooks/can-ui 0.0.98 → 0.0.100

package/dist/esm/components/pickerDialog/pickerDialog.style.js

@@ -10,35 +10,37 @@ export const classes = defineInnerClasses('picker-dialog', [
     'confirm'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    .${classes.selectedArea} {
-        width: 320px;
-        max-height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: ${spacing[3]}px;
+    @layer reset {
+        .${classes.selectedArea} {
+            width: 320px;
+            max-height: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
 
-        .${classes.count} {
-            b {
-                margin: 0 ${spacing[2]}px;
-            }
+            .${classes.count} {
+                b {
+                    margin: 0 ${spacing[2]}px;
+                }
 
-            .${dividerClasses.content} {
-                display: flex;
-                gap: 12px;
+                .${dividerClasses.content} {
+                    display: flex;
+                    gap: 12px;
+                }
             }
-        }
 
-        .${classes.list} {
-            flex: 1;
-            overflow: hidden auto;
-            
-            .${alertClasses.description} {
-                margin-top: 0;
+            .${classes.list} {
+                flex: 1;
+                overflow: hidden auto;
+
+                .${alertClasses.description} {
+                    margin-top: 0;
+                }
             }
-        }
 
-        .${classes.confirm} {
-            margin-top: ${spacing[4]}px;
+            .${classes.confirm} {
+                margin-top: ${spacing[4]}px;
+            }
         }
     }
 `);

package/dist/esm/components/pinchable/pinchable.style.js

@@ -4,15 +4,17 @@ export const classes = defineInnerClasses('pinchable', [
     'content'
 ]);
 export const style = defineCss(({ easing }) => css `
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @layer reset {
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    &, .${classes.content} {
-        touch-action: none;
-    }
+        &, .${classes.content} {
+            touch-action: none;
+        }
 
-    .${classes.content}[data-transition=true] {
-        transition: all .25s ${easing.easeOut};
+        .${classes.content}[data-transition=true] {
+            transition: all .25s ${easing.easeOut};
+        }
     }
 `);

package/dist/esm/components/placeholder/placeholder.style.js

@@ -7,33 +7,35 @@ export const classes = defineInnerClasses('placeholder', [
     'extra'
 ]);
 export const style = defineCss(({ spacing, text }) => css `
-    width: 100%;
-    height: 100%;
-    flex: 1;
-    padding: ${spacing[8]}px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    
-    .${classes.image} {
-        height: 60px;
-        object-fit: cover;
-    }
+    @layer reset {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        padding: ${spacing[8]}px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
 
-    .${classes.title} {
-        font-size: 1.7em;
-        margin-top: ${spacing[8]}px;
-        font-weight: bold;
-        white-space: nowrap;
-    }
-    
-    .${classes.description} {
-        margin-top: ${spacing[4]}px;
-        color: ${text.placeholder};
-    }
+        .${classes.image} {
+            height: 60px;
+            object-fit: cover;
+        }
+
+        .${classes.title} {
+            font-size: 1.7em;
+            margin-top: ${spacing[8]}px;
+            font-weight: bold;
+            white-space: nowrap;
+        }
+
+        .${classes.description} {
+            margin-top: ${spacing[4]}px;
+            color: ${text.placeholder};
+        }
 
-    .${classes.extra} {
-        margin-top: ${spacing[8]}px;
+        .${classes.extra} {
+            margin-top: ${spacing[8]}px;
+        }
     }
 `);

package/dist/esm/components/popper/popper.style.js

@@ -10,34 +10,36 @@ export const style = defineCss(theme => {
     return [
         appStyleCallback(theme),
         css `
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: ${zIndex.popper};
-            transition-property: transform, opacity;
-            transition-duration: .25s;
+            @layer reset {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: ${zIndex.popper};
+                transition-property: transform, opacity;
+                transition-duration: .25s;
 
-            &[data-open=true] {
-                transition-timing-function: ${easing.bounce}, ${easing.easeOut};
-                opacity: 1;
-                transform: scale(1);
-            }
-
-            &:not([data-open=true]) {
-                transition-timing-function: ${easing.easeIn};
-                opacity: 0;
-
-                &[data-variant=zoom] {
-                    transform: scale(0);
+                &[data-open=true] {
+                    transition-timing-function: ${easing.bounce}, ${easing.easeOut};
+                    opacity: 1;
+                    transform: scale(1);
                 }
 
-                &[data-variant=collapse] {
-                    &[data-place-a=top], &[data-place-a=bottom] {
-                        transform: scaleY(0);
+                &:not([data-open=true]) {
+                    transition-timing-function: ${easing.easeIn};
+                    opacity: 0;
+
+                    &[data-variant=zoom] {
+                        transform: scale(0);
                     }
 
-                    &[data-place-a=left], &[data-place-a=right] {
-                        transform: scaleX(0);
+                    &[data-variant=collapse] {
+                        &[data-place-a=top], &[data-place-a=bottom] {
+                            transform: scaleY(0);
+                        }
+
+                        &[data-place-a=left], &[data-place-a=right] {
+                            transform: scaleX(0);
+                        }
                     }
                 }
             }
@@ -50,7 +52,7 @@ export const style = defineCss(theme => {
  * @param arrowSize
  */
 export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
-    [data-show-arrow=true]:before {
+    [data-show-arrow=true]::before {
         content: '';
         position: absolute;
         width: ${arrowSize}px;
@@ -59,7 +61,7 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
     }
 
     &[data-place-a=top] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 0 0, 100% 0);
             top: 100%;
             left: calc(50% - ${arrowSize / 2}px);
@@ -67,7 +69,7 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
     }
 
     &[data-place-a=bottom] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 100% 100%, 0 100%);
             bottom: 100%;
             left: calc(50% - ${arrowSize / 2}px);
@@ -75,7 +77,7 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
     }
 
     &[data-place-a=left] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 0 0, 0 100%);
             left: 100%;
             top: calc(50% - ${arrowSize / 2}px);
@@ -83,7 +85,7 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
     }
 
     &[data-place-a=right] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 100% 100%, 100% 0);
             right: 100%;
             top: calc(50% - ${arrowSize / 2}px);
@@ -91,26 +93,26 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
     }
 
     &[data-place-b=Left] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             left: 9px;
         }
     }
 
     &[data-place-b=Right] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             left: auto;
             right: 9px;
         }
     }
 
     &[data-place-b=Top] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             top: 9px;
         }
     }
 
     &[data-place-b=Bottom] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             top: auto;
             bottom: 9px;
         }
@@ -120,12 +122,14 @@ export const popperArrowStyle = (colorValue, arrowSize = 10) => css `
  *  通用弹框样式
  */
 export const popperStyleCallback = ({ background, borderRadius, boxShadow }) => css `
-    background-color: ${background.content};
-    border-radius: ${borderRadius}px;
-    box-shadow: ${boxShadow[0]};
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 4px;
+    @layer reset {
+        background-color: ${background.content};
+        border-radius: ${borderRadius}px;
+        box-shadow: ${boxShadow[0]};
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 4px;
+    }
 `;
 export const popperStyle = defineCss(popperStyleCallback);

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

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