@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -16,7 +16,8 @@ exports.classes = (0, utils_1.defineInnerClasses)('drawer', [
 function useStyle({ size }) {
     return (0, utils_1.useCss)(({ breakpoints, spacing, background, boxShadow, borderRadius, divider }) => {
         return (0, react_1.css) `
-            ${(0, utils_1.responsiveVariables)(breakpoints, k => {
+            @layer reset {
+                ${(0, utils_1.responsiveVariables)(breakpoints, k => {
             let _size = size[k];
             if (typeof _size === 'undefined') {
                 return '';
@@ -26,96 +27,96 @@ function useStyle({ size }) {
             }
             return `--drawer-size: ${_size};`;
         })}
-
-            .${exports.classes.drawer} {
-                position: absolute;
-                padding: ${spacing[2]}px;
-            }
-        
-            &[data-placement=top] {
                 .${exports.classes.drawer} {
-                    height: var(--drawer-size);
-                    transform-origin: top;
-                    inset: 0 0 auto;
+                    position: absolute;
+                    padding: ${spacing[2]}px;
                 }
-            }
-        
-            &[data-placement=bottom] {
-                .${exports.classes.drawer} {
-                    height: var(--drawer-size);
-                    transform-origin: bottom;
-                    inset: auto 0 0;
+
+                &[data-placement=top] {
+                    .${exports.classes.drawer} {
+                        height: var(--drawer-size);
+                        transform-origin: top;
+                        inset: 0 0 auto;
+                    }
                 }
-            }
-        
-            &[data-placement=left] {
-                .${exports.classes.drawer} {
-                    width: var(--drawer-size);
-                    transform-origin: left;
-                    inset: 0 auto 0 0;
+
+                &[data-placement=bottom] {
+                    .${exports.classes.drawer} {
+                        height: var(--drawer-size);
+                        transform-origin: bottom;
+                        inset: auto 0 0;
+                    }
                 }
-            }
-        
-            &[data-placement=right] {
-                .${exports.classes.drawer} {
-                    width: var(--drawer-size);
-                    transform-origin: right;
-                    inset: 0 0 0 auto;
+
+                &[data-placement=left] {
+                    .${exports.classes.drawer} {
+                        width: var(--drawer-size);
+                        transform-origin: left;
+                        inset: 0 auto 0 0;
+                    }
                 }
-            }
 
-            .${exports.classes.drawerWrap} {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                background-color: ${background.content};
-                box-shadow: ${boxShadow[1]};
-                border-radius: ${borderRadius}px;
-            }
-        
-            .${exports.classes.titleRow} {
-                font-size: ${16 / 14}em;
-                font-weight: bold;
-                display: flex;
-                align-items: center;
-                padding: 0 ${spacing[2]}px;
-        
-                .${exports.classes.title} {
-                    flex: 1;
-                    padding: ${spacing[5]}px ${spacing[6]}px;
+                &[data-placement=right] {
+                    .${exports.classes.drawer} {
+                        width: var(--drawer-size);
+                        transform-origin: right;
+                        inset: 0 0 0 auto;
+                    }
                 }
-        
-                .${exports.classes.close} {
-                    margin: ${spacing[3]}px;
+
+                .${exports.classes.drawerWrap} {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    background-color: ${background.content};
+                    box-shadow: ${boxShadow[1]};
+                    border-radius: ${borderRadius}px;
                 }
 
-                & + .${exports.classes.body} {
-                    padding-top: 0;
+                .${exports.classes.titleRow} {
+                    font-size: ${16 / 14}em;
+                    font-weight: bold;
+                    display: flex;
+                    align-items: center;
+                    padding: 0 ${spacing[2]}px;
+
+                    .${exports.classes.title} {
+                        flex: 1;
+                        padding: ${spacing[5]}px ${spacing[6]}px;
+                    }
+
+                    .${exports.classes.close} {
+                        margin: ${spacing[3]}px;
+                    }
+
+                    & + .${exports.classes.body} {
+                        padding-top: 0;
+                    }
                 }
-            }
 
-            &[data-placement=right] {
-                .${exports.classes.title}:has(+ .${exports.classes.close}) {
-                    padding-left: 0;
+                &[data-placement=right] {
+                    .${exports.classes.title}:has(+ .${exports.classes.close}) {
+                        padding-left: 0;
+                    }
                 }
-            }
-        
-            &[data-placement=right] {
-                .${exports.classes.titleRow} {
-                    flex-direction: row-reverse;
+
+                &[data-placement=right] {
+                    .${exports.classes.titleRow} {
+                        flex-direction: row-reverse;
+                    }
                 }
-            }
-        
-            .${exports.classes.body} {
-                flex: 1;
-                overflow: auto;
-                padding: ${spacing[6]}px ${spacing[8]}px;
-                border-top: 1px solid transparent;
-                border-bottom: 1px solid transparent;
 
-                &[data-bordered=true] {
-                    border-top-color: ${divider};
+                .${exports.classes.body} {
+                    flex: 1;
+                    overflow: auto;
+                    padding: ${spacing[6]}px ${spacing[8]}px;
+                    border-top: 1px solid transparent;
+                    border-bottom: 1px solid transparent;
+
+                    &[data-bordered=true] {
+                        border-top-color: ${divider};
+                    }
                 }
             }
         `;

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

@@ -9,14 +9,16 @@ exports.classes = (0, utils_1.defineInnerClasses)('dropdown', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
-    z-index: ${theme_1.zIndex.dropdown};
+    @layer reset {
+        z-index: ${theme_1.zIndex.dropdown};
 
-    .${exports.classes.content} {
-        background-color: ${background.content};
-        box-shadow: ${boxShadow[0]};
-        border-radius: ${borderRadius}px;
-        padding: 4px;
-    }
+        .${exports.classes.content} {
+            background-color: ${background.content};
+            box-shadow: ${boxShadow[0]};
+            border-radius: ${borderRadius}px;
+            padding: 4px;
+        }
 
-    ${(0, popper_style_1.popperArrowStyle)(background.content)}
+        ${(0, popper_style_1.popperArrowStyle)(background.content)}
+    }
 `);

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

@@ -9,39 +9,41 @@ exports.classes = (0, utils_1.defineInnerClasses)('form', [
     'helperText'
 ]);
 exports.style = (0, utils_1.defineCss)(({ colors, spacing }) => (0, react_1.css) `
-    .${exports.classes.requiredMark} {
-        color: ${colors.error.main};
-        margin-right: ${spacing[1]}px;
-    }
+    @layer reset {
+        .${exports.classes.requiredMark} {
+            color: ${colors.error.main};
+            margin-right: ${spacing[1]}px;
+        }
 
-    .${exports.classes.helperText} {
-        font-size: ${13 / 14}em;
-        color: ${colors.error.main};
-    }
+        .${exports.classes.helperText} {
+            font-size: ${13 / 14}em;
+            color: ${colors.error.main};
+        }
 
-    .${exports.classes.item} {
-        &:not([data-disable-margin=true]) {
-            &[data-label-placement=left], &[data-label-placement=right] {
-                margin-bottom: ${spacing[6]}px;
+        .${exports.classes.item} {
+            &:not([data-disable-margin=true]) {
+                &[data-label-placement=left], &[data-label-placement=right] {
+                    margin-bottom: ${spacing[6]}px;
 
-                &[data-size=small] {
-                    margin-bottom: ${spacing[4]}px;
-                }
+                    &[data-size=small] {
+                        margin-bottom: ${spacing[4]}px;
+                    }
 
-                &[data-size=large] {
-                    margin-bottom: ${spacing[8]}px;
+                    &[data-size=large] {
+                        margin-bottom: ${spacing[8]}px;
+                    }
                 }
-            }
 
-            &[data-label-placement=top], &[data-label-placement=bottom] {
-                margin-bottom: ${spacing[7]}px;
+                &[data-label-placement=top], &[data-label-placement=bottom] {
+                    margin-bottom: ${spacing[7]}px;
 
-                &[data-size=small] {
-                    margin-bottom: ${spacing[5]}px;
-                }
+                    &[data-size=small] {
+                        margin-bottom: ${spacing[5]}px;
+                    }
 
-                &[data-size=large] {
-                    margin-bottom: ${spacing[9]}px;
+                    &[data-size=large] {
+                        margin-bottom: ${spacing[9]}px;
+                    }
                 }
             }
         }

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

@@ -14,105 +14,107 @@ exports.classes = (0, utils_1.defineInnerClasses)('image-preview', [
     'image'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, easing, breakpoints }) => (0, react_1.css) `
-    .${exports.classes.control} {
-        display: flex;
-        gap: ${spacing[4]}px;
-        position: absolute;
-        top: ${spacing[10]}px;
-        right: ${spacing[10]}px;
-        z-index: 1;
-    }
-
-    .${exports.classes.swap} {
-        width: 100%;
-        height: 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 ${spacing[8]}px;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        z-index: 1;
-    }
-
-    .${exports.classes.counter} {
-        line-height: 40px;
-        padding: 0 24px;
-        border-radius: 1000em;
-        color: #ffffff;
-        background-color: rgba(0, 0, 0, .3);
-        position: absolute;
-        bottom: ${spacing[10]}px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 1;
-    }
-
-    .${exports.classes.button} {
-        background-image: none !important;
-        background-color: rgba(0, 0, 0, .4);
-        transition: background-color .25s ${easing.easeOut};
-
-        &:hover {
-            background-color: rgba(0, 0, 0, .3);
+    @layer reset {
+        .${exports.classes.control} {
+            display: flex;
+            gap: ${spacing[4]}px;
+            position: absolute;
+            top: ${spacing[10]}px;
+            right: ${spacing[10]}px;
+            z-index: 1;
         }
 
-        &:active {
-            transition: background-color 0s;
-            background-color: rgba(0, 0, 0, .5);
+        .${exports.classes.swap} {
+            width: 100%;
+            height: 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 ${spacing[8]}px;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            z-index: 1;
         }
 
-        &:last-of-type {
-            margin-left: ${spacing[4]}px;
+        .${exports.classes.counter} {
+            line-height: 40px;
+            padding: 0 24px;
+            border-radius: 1000em;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, .3);
+            position: absolute;
+            bottom: ${spacing[10]}px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1;
         }
-    }
 
-    .${exports.classes.galleryContainer} {
-        &, .${exports.classes.galleryWrapper}, .${exports.classes.imageItem}, .${exports.classes.image} {
-            width: 100%;
-            height: 100%;
-        }
+        .${exports.classes.button} {
+            background-image: none !important;
+            background-color: rgba(0, 0, 0, .4);
+            transition: background-color .25s ${easing.easeOut};
 
-        overflow: hidden;
-        position: relative;
+            &:hover {
+                background-color: rgba(0, 0, 0, .3);
+            }
 
-        .${exports.classes.galleryWrapper} {
-            &, .${exports.classes.imageItem} {
-                position: absolute;
-                top: 0;
+            &:active {
+                transition: background-color 0s;
+                background-color: rgba(0, 0, 0, .5);
             }
-            
-            &[data-transition=set] {
-                transition: left .5s ${easing.bounce} 0s;
+
+            &:last-of-type {
+                margin-left: ${spacing[4]}px;
             }
+        }
 
-            &[data-transition=drag] {
-                transition: left .1s linear;
+        .${exports.classes.galleryContainer} {
+            &, .${exports.classes.galleryWrapper}, .${exports.classes.imageItem}, .${exports.classes.image} {
+                width: 100%;
+                height: 100%;
             }
 
-            .${exports.classes.imageItem} {
-                padding: 90px;
+            overflow: hidden;
+            position: relative;
 
-                .${exports.classes.image} {
-                    object-fit: contain;
+            .${exports.classes.galleryWrapper} {
+                &, .${exports.classes.imageItem} {
+                    position: absolute;
+                    top: 0;
+                }
+
+                &[data-transition=set] {
+                    transition: left .5s ${easing.bounce} 0s;
+                }
+
+                &[data-transition=drag] {
+                    transition: left .1s linear;
                 }
-            }
-        }
-    }
 
-    @media (max-width: ${breakpoints.sm}px) {
-        .${exports.classes.control}, .${exports.classes.swap}, .${exports.classes.button} {
-            display: none;
+                .${exports.classes.imageItem} {
+                    padding: 90px;
+
+                    .${exports.classes.image} {
+                        object-fit: contain;
+                    }
+                }
+            }
         }
 
-        .${exports.classes.galleryContainer} .${exports.classes.galleryWrapper} {
-            &[data-transition=true] {
-                transition: left .4s ${easing.ease};
+        @media (max-width: ${breakpoints.sm}px) {
+            .${exports.classes.control}, .${exports.classes.swap}, .${exports.classes.button} {
+                display: none;
             }
-            
-            .${exports.classes.imageItem} {
-                padding: 0;
+
+            .${exports.classes.galleryContainer} .${exports.classes.galleryWrapper} {
+                &[data-transition=true] {
+                    transition: left .4s ${easing.ease};
+                }
+
+                .${exports.classes.imageItem} {
+                    padding: 0;
+                }
             }
         }
     }

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

@@ -14,51 +14,53 @@ exports.classes = (0, utils_1.defineInnerClasses)('image', [
 exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
     const maskBg = (0, color_1.default)(background.content).alpha(.9).string();
     return (0, react_1.css) `
-        display: inline-flex;
-        position: relative;
-        overflow: hidden;
+        @layer reset {
+            display: inline-flex;
+            position: relative;
+            overflow: hidden;
 
-        .${exports.classes.img} {
-            width: inherit;
-            height: inherit;
-        }
-
-        &[data-error=true] {
             .${exports.classes.img} {
-                opacity: 0;
+                width: inherit;
+                height: inherit;
             }
-        }
 
-        .${exports.classes.skeleton} {
-            height: 100%;
-            position: absolute;
-            inset: 0;
-        }
-        
-        .${exports.classes.mask} {
-            background-color: ${maskBg};
-            position: absolute;
-            inset: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            transition: opacity .25s ${easing.easeOut};
+            &[data-error=true] {
+                .${exports.classes.img} {
+                    opacity: 0;
+                }
+            }
 
-            .${exports.classes.previewButton} {
+            .${exports.classes.skeleton} {
+                height: 100%;
+                position: absolute;
+                inset: 0;
+            }
+
+            .${exports.classes.mask} {
+                background-color: ${maskBg};
                 position: absolute;
                 inset: 0;
                 display: flex;
-                gap: ${spacing[2]}px;
                 align-items: center;
                 justify-content: center;
-                cursor: pointer;
+                opacity: 0;
+                transition: opacity .25s ${easing.easeOut};
+
+                .${exports.classes.previewButton} {
+                    position: absolute;
+                    inset: 0;
+                    display: flex;
+                    gap: ${spacing[2]}px;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                }
             }
-        }
 
-        &:hover {
-            .${exports.classes.mask} {
-                opacity: 1;
+            &:hover {
+                .${exports.classes.mask} {
+                    opacity: 1;
+                }
             }
         }
     `;

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

@@ -18,36 +18,37 @@ exports.commonNativeInputStyle = (0, react_1.css) `
     font-size: 1em;
 `;
 exports.style = (0, react_1.css) `
-    position: relative;
+    @layer reset {
+        position: relative;
 
-    .${exports.classes.input} {
-        ${exports.commonNativeInputStyle}
-    
-        &::-webkit-search-cancel-button {
-            display: none;
-        }
-    
-        &::-ms-clear,
-        &::-webkit-search-cancel-button {
-            display: none;
-        }
-    
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            width: 12px;
+        .${exports.classes.input} {
+            ${exports.commonNativeInputStyle}
+            &::-webkit-search-cancel-button {
+                display: none;
+            }
+
+            &::-ms-clear,
+            &::-webkit-search-cancel-button {
+                display: none;
+            }
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                width: 12px;
+            }
         }
-    }
 
-    &[data-adaptable=true] {
-        .${exports.classes.input} {
-            height: 100%;
-            position: absolute;
-            inset: 0;
+        &[data-adaptable=true] {
+            .${exports.classes.input} {
+                height: 100%;
+                position: absolute;
+                inset: 0;
+            }
         }
-    }
 
-    .${exports.classes.adaptable} {
-        opacity: 0;
-        pointer-events: none;
+        .${exports.classes.adaptable} {
+            opacity: 0;
+            pointer-events: none;
+        }
     }
 `;