@canlooks/can-ui 0.0.98 → 0.0.100

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

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

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

@@ -21,64 +21,66 @@ export function useStyle({ variant, handleSize, handleColor }) {
     return useCss(({ divider, easing }) => {
         const ret = [
             css `
-                position: relative;
-
-                .${classes.container} {
-                    width: 100%;
-                    height: 100%;
+                @layer reset {
                     position: relative;
-                    z-index: 0;
-                }
-
-                .${classes.edge}, .${classes.corner} {
-                    touch-action: none;
-                    position: absolute;
-                    -webkit-tap-highlight-color: transparent;
-                }
 
-                .${classes.edge} {
-                    z-index: 1;
-        
-                    &[data-handle=t], &[data-handle=b] {
+                    .${classes.container} {
                         width: 100%;
-                        height: ${handleSize}px;
-                        left: 0;
-                        cursor: ${handleCursors.t};
-                    }
-                    
-                    &[data-handle=l], &[data-handle=r] {
-                        width: ${handleSize}px;
                         height: 100%;
-                        top: 0;
-                        cursor: ${handleCursors.l};
+                        position: relative;
+                        z-index: 0;
                     }
-                }
-
-                .${classes.corner} {
-                    width: ${handleSize}px;
-                    height: ${handleSize}px;
-                    z-index: 2;
 
-                    &[data-handle=tl] {
-                        cursor: ${handleCursors.tl};
-                    }
-        
-                    &[data-handle=tr] {
-                        cursor: ${handleCursors.tr};
+                    .${classes.edge}, .${classes.corner} {
+                        touch-action: none;
+                        position: absolute;
+                        -webkit-tap-highlight-color: transparent;
                     }
-        
-                    &[data-handle=bl] {
-                        cursor: ${handleCursors.bl};
+
+                    .${classes.edge} {
+                        z-index: 1;
+
+                        &[data-handle=t], &[data-handle=b] {
+                            width: 100%;
+                            height: ${handleSize}px;
+                            left: 0;
+                            cursor: ${handleCursors.t};
+                        }
+
+                        &[data-handle=l], &[data-handle=r] {
+                            width: ${handleSize}px;
+                            height: 100%;
+                            top: 0;
+                            cursor: ${handleCursors.l};
+                        }
                     }
-        
-                    &[data-handle=br] {
-                        cursor: ${handleCursors.br};
+
+                    .${classes.corner} {
+                        width: ${handleSize}px;
+                        height: ${handleSize}px;
+                        z-index: 2;
+
+                        &[data-handle=tl] {
+                            cursor: ${handleCursors.tl};
+                        }
+
+                        &[data-handle=tr] {
+                            cursor: ${handleCursors.tr};
+                        }
+
+                        &[data-handle=bl] {
+                            cursor: ${handleCursors.bl};
+                        }
+
+                        &[data-handle=br] {
+                            cursor: ${handleCursors.br};
+                        }
                     }
-                }
 
-                &:has([data-dragging=true]) {
-                    .${classes.edge}, .${classes.corner} {
-                        cursor: inherit;
+                    &:has([data-dragging=true]) {
+                        .${classes.edge}, .${classes.corner} {
+                            cursor: inherit;
+                        }
                     }
                 }
             `
@@ -105,80 +107,82 @@ export function useStyle({ variant, handleSize, handleColor }) {
         };
         if (variant === 'mouse') {
             const hoverStyle = `
-                &:before {
+                &::before {
                     transition: background-color 1s ${easing.easeOut};
                     background-color: ${color};
                 }
             `;
             ret.push(css `
-                .${classes.edge} {
-                    &:before {
-                        content: '';
-                        position: absolute;
-                    }
+                @layer reset {
+                    .${classes.edge} {
+                        &::before {
+                            content: '';
+                            position: absolute;
+                        }
 
-                    &:hover, &[data-dragging=true] {
-                        ${hoverStyle}
-                    }
+                        &:hover, &[data-dragging=true] {
+                            ${hoverStyle}
+                        }
 
-                    &[data-handle=t], &[data-handle=b] {
-                        &:before {
-                            width: 100%;
-                            height: 1px;
-                            top: 50%;
-                            left: 0;
+                        &[data-handle=t], &[data-handle=b] {
+                            &::before {
+                                width: 100%;
+                                height: 1px;
+                                top: 50%;
+                                left: 0;
+                            }
                         }
-                    }
 
-                    &[data-handle=t] {
-                        top: ${-handleSize / 2}px;
-                    }
-                    
-                    &[data-handle=b] {
-                        bottom: ${-handleSize / 2}px;
-                    }
+                        &[data-handle=t] {
+                            top: ${-handleSize / 2}px;
+                        }
 
-                    &[data-handle=l], &[data-handle=r] {
-                        &:before {
-                            width: 1px;
-                            height: 100%;
-                            top: 0;
-                            left: 50%;
+                        &[data-handle=b] {
+                            bottom: ${-handleSize / 2}px;
                         }
-                    }
 
-                    &[data-handle=l] {
-                        left: ${-handleSize / 2}px;
-                    }
-                    
-                    &[data-handle=r] {
-                        right: ${-handleSize / 2}px;
-                    }
-                }
+                        &[data-handle=l], &[data-handle=r] {
+                            &::before {
+                                width: 1px;
+                                height: 100%;
+                                top: 0;
+                                left: 50%;
+                            }
+                        }
 
-                .${classes.corner} {
-                    &[data-handle=tl] {
-                        top: ${-handleSize / 2}px;
-                        left: ${-handleSize / 2}px;
-                    }
+                        &[data-handle=l] {
+                            left: ${-handleSize / 2}px;
+                        }
 
-                    &[data-handle=tr] {
-                        top: ${-handleSize / 2}px;
-                        right: ${-handleSize / 2}px;
+                        &[data-handle=r] {
+                            right: ${-handleSize / 2}px;
+                        }
                     }
 
-                    &[data-handle=bl] {
-                        bottom: ${-handleSize / 2}px;
-                        left: ${-handleSize / 2}px;
-                    }
+                    .${classes.corner} {
+                        &[data-handle=tl] {
+                            top: ${-handleSize / 2}px;
+                            left: ${-handleSize / 2}px;
+                        }
 
-                    &[data-handle=br] {
-                        bottom: ${-handleSize / 2}px;
-                        right: ${-handleSize / 2}px;
+                        &[data-handle=tr] {
+                            top: ${-handleSize / 2}px;
+                            right: ${-handleSize / 2}px;
+                        }
+
+                        &[data-handle=bl] {
+                            bottom: ${-handleSize / 2}px;
+                            left: ${-handleSize / 2}px;
+                        }
+
+                        &[data-handle=br] {
+                            bottom: ${-handleSize / 2}px;
+                            right: ${-handleSize / 2}px;
+                        }
                     }
-                }
 
-                ${linkEdge(hoverStyle, 'hover')}
+                    ${linkEdge(hoverStyle, 'hover')}
+                }
             `);
         }
         else {
@@ -187,153 +191,155 @@ export function useStyle({ variant, handleSize, handleColor }) {
             const hoverStyle = `
                 background-color: ${hoverColor};
 
-                &:before {
+                &::before {
                     background-color: #ffffff;
                 }
             `;
             ret.push(css `
-                .${classes.edge}, .${classes.corner} {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    overflow: hidden;
-
-                    &:active, &[data-dragging=true] {
-                        ${hoverStyle}
-                    }
-                }
+                @layer reset {
+                    .${classes.edge}, .${classes.corner} {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        overflow: hidden;
 
-                &[data-handle-position=outside] {
-                    .${classes.edge} {
-                        &[data-handle=t] {
-                            top: ${-handleSize}px;
-                        }
-        
-                        &[data-handle=b] {
-                            bottom: ${-handleSize}px;
-                        }
-        
-                        &[data-handle=l] {
-                            left: ${-handleSize}px;
-                        }
-        
-                        &[data-handle=r] {
-                            right: ${-handleSize}px;
+                        &:active, &[data-dragging=true] {
+                            ${hoverStyle}
                         }
                     }
 
-                    .${classes.corner} {
-                        &[data-handle=tl] {
-                            top: ${-handleSize}px;
-                            left: ${-handleSize}px;
-                        }
-        
-                        &[data-handle=tr] {
-                            top: ${-handleSize}px;
-                            right: ${-handleSize}px;
-                        }
-        
-                        &[data-handle=bl] {
-                            bottom: ${-handleSize}px;
-                            left: ${-handleSize}px;
+                    &[data-handle-position=outside] {
+                        .${classes.edge} {
+                            &[data-handle=t] {
+                                top: ${-handleSize}px;
+                            }
+
+                            &[data-handle=b] {
+                                bottom: ${-handleSize}px;
+                            }
+
+                            &[data-handle=l] {
+                                left: ${-handleSize}px;
+                            }
+
+                            &[data-handle=r] {
+                                right: ${-handleSize}px;
+                            }
                         }
-        
-                        &[data-handle=br] {
-                            bottom: ${-handleSize}px;
-                            right: ${-handleSize}px;
+
+                        .${classes.corner} {
+                            &[data-handle=tl] {
+                                top: ${-handleSize}px;
+                                left: ${-handleSize}px;
+                            }
+
+                            &[data-handle=tr] {
+                                top: ${-handleSize}px;
+                                right: ${-handleSize}px;
+                            }
+
+                            &[data-handle=bl] {
+                                bottom: ${-handleSize}px;
+                                left: ${-handleSize}px;
+                            }
+
+                            &[data-handle=br] {
+                                bottom: ${-handleSize}px;
+                                right: ${-handleSize}px;
+                            }
                         }
                     }
-                }
 
-                &[data-handle-position=inside] {
-                    .${classes.edge} {
-                        &[data-handle=t] {
-                            top: 0;
-                        }
-        
-                        &[data-handle=b] {
-                            bottom: 0;
-                        }
-        
-                        &[data-handle=l] {
-                            left: 0;
+                    &[data-handle-position=inside] {
+                        .${classes.edge} {
+                            &[data-handle=t] {
+                                top: 0;
+                            }
+
+                            &[data-handle=b] {
+                                bottom: 0;
+                            }
+
+                            &[data-handle=l] {
+                                left: 0;
+                            }
+
+                            &[data-handle=r] {
+                                right: 0;
+                            }
                         }
-        
-                        &[data-handle=r] {
-                            right: 0;
+
+                        .${classes.corner} {
+                            &[data-handle=tl] {
+                                top: 0;
+                                left: 0;
+                            }
+
+                            &[data-handle=tr] {
+                                top: 0;
+                                right: 0;
+                            }
+
+                            &[data-handle=bl] {
+                                bottom: 0;
+                                left: 0;
+                            }
+
+                            &[data-handle=br] {
+                                bottom: 0;
+                                right: 0;
+                            }
                         }
                     }
 
-                    .${classes.corner} {
-                        &[data-handle=tl] {
-                            top: 0;
-                            left: 0;
-                        }
-        
-                        &[data-handle=tr] {
-                            top: 0;
-                            right: 0;
+                    .${classes.edge} {
+                        overflow: hidden;
+
+                        &::before {
+                            content: '';
+                            background-color: ${divider};
+                            border-radius: 2px;
                         }
-        
-                        &[data-handle=bl] {
-                            bottom: 0;
-                            left: 0;
+
+                        &[data-handle=t], &[data-handle=b] {
+                            &::before {
+                                width: 40px;
+                                height: 3px;
+                            }
                         }
-        
-                        &[data-handle=br] {
-                            bottom: 0;
-                            right: 0;
+
+                        &[data-handle=l], &[data-handle=r] {
+                            &::before {
+                                width: 3px;
+                                height: 40px;
+                            }
                         }
                     }
-                }
 
-                .${classes.edge} {
-                    overflow: hidden;
-                    
-                    &:before {
-                        content: '';
-                        background-color: ${divider};
-                        border-radius: 2px;
-                    }
-    
-                    &[data-handle=t], &[data-handle=b] {
-                        &:before {
-                            width: 40px;
+                    .${classes.corner} {
+                        &::before {
+                            content: '';
+                            width: ${Math.sqrt(handleSize * handleSize)}px;
                             height: 3px;
+                            background-color: ${divider};
+                            border-radius: 2px;
                         }
-                    }
-    
-                    &[data-handle=l], &[data-handle=r] {
-                        &:before {
-                            width: 3px;
-                            height: 40px;
-                        }
-                    }
-                }
-    
-                .${classes.corner} {
-                    &:before {
-                        content: '';
-                        width: ${Math.sqrt(handleSize * handleSize)}px;
-                        height: 3px;
-                        background-color: ${divider};
-                        border-radius: 2px;
-                    }
-    
-                    &[data-handle=tl], &[data-handle=br] {
-                        &:before {
-                            transform: rotate(-45deg);
+
+                        &[data-handle=tl], &[data-handle=br] {
+                            &::before {
+                                transform: rotate(-45deg);
+                            }
                         }
-                    }
-    
-                    &[data-handle=tr], &[data-handle=bl] {
-                        &:before {
-                            transform: rotate(45deg)
+
+                        &[data-handle=tr], &[data-handle=bl] {
+                            &::before {
+                                transform: rotate(45deg)
+                            }
                         }
                     }
-                }
 
-                ${linkEdge(hoverStyle, 'active')}
+                    ${linkEdge(hoverStyle, 'active')}
+                }
             `);
         }
         return ret;