@canlooks/can-ui 0.0.98 → 0.0.100

package/dist/cjs/components/upload/dropArea.style.js

@@ -8,38 +8,40 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
     'description'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors, easing }) => (0, react_1.css) `
-    height: 100px;
-    display: flex;
-    gap: ${spacing[1]}px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 1px dashed ${divider};
-    border-radius: ${borderRadius}px;
-    color: ${text.disabled};
-    cursor: pointer;
-    background-color: ${gray(.1)};
-    transition: background-color .25s ${easing.easeOut};
+    @layer reset {
+        height: 100px;
+        display: flex;
+        gap: ${spacing[1]}px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px dashed ${divider};
+        border-radius: ${borderRadius}px;
+        color: ${text.disabled};
+        cursor: pointer;
+        background-color: ${gray(.1)};
+        transition: background-color .25s ${easing.easeOut};
 
-    &:hover {
-        background-color: ${gray(.15)};
-    }
+        &:hover {
+            background-color: ${gray(.15)};
+        }
 
-    &:active {
-        background-color: ${gray(.08)};
-        transition: background-color 0s;
-    }
-    
-    .${exports.classes.icon}, .${exports.classes.description} {
-        pointer-events: none;
-    }
+        &:active {
+            background-color: ${gray(.08)};
+            transition: background-color 0s;
+        }
 
-    .${exports.classes.icon} {
-        font-size: ${30 / 14}em;
-    }
+        .${exports.classes.icon}, .${exports.classes.description} {
+            pointer-events: none;
+        }
+
+        .${exports.classes.icon} {
+            font-size: ${30 / 14}em;
+        }
 
-    &[data-over=true] {
-        border-color: ${colors.primary.main};
-        color: ${colors.primary.main};
+        &[data-over=true] {
+            border-color: ${colors.primary.main};
+            color: ${colors.primary.main};
+        }
     }
 `);

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

@@ -22,147 +22,149 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload', [
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
     const maskBg = (0, color_1.default)(background.content).alpha(.9).string();
     return (0, react_1.css) `
-        position: relative;
-
-        .${exports.classes.input} {
-            position: absolute;
-            opacity: 0;
-            pointer-events: none;
-        }
+        @layer reset {
+            position: relative;
 
-        &[data-file-type=file] {
-            .${exports.classes.files} {
-                display: flex;
-                flex-direction: column;
-                margin-top: ${spacing[2]}px;
+            .${exports.classes.input} {
+                position: absolute;
+                opacity: 0;
+                pointer-events: none;
+            }
 
-                .${exports.classes.file} {
+            &[data-file-type=file] {
+                .${exports.classes.files} {
                     display: flex;
-                    align-items: center;
-                    gap: ${spacing[3]}px;
-                    padding-right: ${spacing[2]}px;
-                    border-radius: ${borderRadius}px;
-
-                    .${exports.classes.icon} {
-                        color: ${text.secondary};
-                    }
-
-                    .${exports.classes.info} {
-                        min-width: 0;
-                        flex: 1;
-                        position: relative;
-                        padding: ${spacing[2]}px 0;
+                    flex-direction: column;
+                    margin-top: ${spacing[2]}px;
 
-                        .${exports.classes.name} {
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
+                    .${exports.classes.file} {
+                        display: flex;
+                        align-items: center;
+                        gap: ${spacing[3]}px;
+                        padding-right: ${spacing[2]}px;
+                        border-radius: ${borderRadius}px;
 
-                        .${exports.classes.progress} {
-                            position: absolute;
-                            inset: auto 0 0;
+                        .${exports.classes.icon} {
+                            color: ${text.secondary};
                         }
-                    }
-
-                    .${exports.classes.control} {
-                        display: none;
-                        gap: ${spacing[4]}px;
-                    }
 
-                    &:hover {
-                        background-color: ${gray(mode === 'light' ? .03 : .18)};
+                        .${exports.classes.info} {
+                            min-width: 0;
+                            flex: 1;
+                            position: relative;
+                            padding: ${spacing[2]}px 0;
 
-                        &:not([data-status=uploading]) {
-                            .${exports.classes.control} {
-                                display: flex;
+                            .${exports.classes.name} {
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
                             }
-                        }
-                    }
 
-                    &[data-status=error] {
-                        .${exports.classes.name} {
-                            color: ${colors.error.main};
+                            .${exports.classes.progress} {
+                                position: absolute;
+                                inset: auto 0 0;
+                            }
                         }
 
                         .${exports.classes.control} {
-                            display: flex;
+                            display: none;
+                            gap: ${spacing[4]}px;
                         }
-                    }
-                }
-            }
-        }
 
-        &[data-file-type=image] {
-            .${exports.classes.images} {
-                display: flex;
-                gap: ${spacing[3]}px;
-                flex-wrap: wrap;
-            }
+                        &:hover {
+                            background-color: ${gray(mode === 'light' ? .03 : .18)};
 
-            .${exports.classes.imageWrap} {
-                width: 96px;
-                height: 96px;
-                border: 1px dashed ${divider};
-                padding: 4px;
+                            &:not([data-status=uploading]) {
+                                .${exports.classes.control} {
+                                    display: flex;
+                                }
+                            }
+                        }
 
-                &[data-clickable=true] {
-                    cursor: pointer;
-                    transition: border-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
+                        &[data-status=error] {
+                            .${exports.classes.name} {
+                                color: ${colors.error.main};
+                            }
 
-                    &:hover {
-                        border-color: ${colors.primary.main};
-                        color: ${colors.primary.main};
+                            .${exports.classes.control} {
+                                display: flex;
+                            }
+                        }
                     }
                 }
+            }
 
-                .${exports.classes.image} {
-                    width: 100%;
-                    height: 100%;
-                    background-color: ${gray(.05)};
-                    border-radius: inherit;
+            &[data-file-type=image] {
+                .${exports.classes.images} {
                     display: flex;
-                    align-items: center;
-                    justify-content: center;
+                    gap: ${spacing[3]}px;
+                    flex-wrap: wrap;
+                }
 
-                    .${exports.classes.progress} {
-                        background-color: ${maskBg};
-                        position: absolute;
-                        inset: 0;
+                .${exports.classes.imageWrap} {
+                    width: 96px;
+                    height: 96px;
+                    border: 1px dashed ${divider};
+                    padding: 4px;
+
+                    &[data-clickable=true] {
+                        cursor: pointer;
+                        transition: border-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
+
+                        &:hover {
+                            border-color: ${colors.primary.main};
+                            color: ${colors.primary.main};
+                        }
+                    }
+
+                    .${exports.classes.image} {
+                        width: 100%;
+                        height: 100%;
+                        background-color: ${gray(.05)};
+                        border-radius: inherit;
                         display: flex;
                         align-items: center;
                         justify-content: center;
+
+                        .${exports.classes.progress} {
+                            background-color: ${maskBg};
+                            position: absolute;
+                            inset: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
                     }
                 }
-            }
 
-            &[data-variant=circular] {
-                .${exports.classes.imageWrap} {
-                    border-radius: 50%;
+                &[data-variant=circular] {
+                    .${exports.classes.imageWrap} {
+                        border-radius: 50%;
+                    }
                 }
-            }
 
-            &[data-variant=square] {
-                .${exports.classes.imageWrap} {
-                    border-radius: ${borderRadius}px;
+                &[data-variant=square] {
+                    .${exports.classes.imageWrap} {
+                        border-radius: ${borderRadius}px;
+                    }
                 }
             }
-        }
 
-        .${exports.classes.sortable}[data-dragging=true] {
-            position: relative;
-            z-index: 1;
-        }
+            .${exports.classes.sortable}[data-dragging=true] {
+                position: relative;
+                z-index: 1;
+            }
 
-        &[data-sortable=true] {
-            .${exports.classes.file}, .${exports.classes.imageWrap} {
-                cursor: grab;
+            &[data-sortable=true] {
+                .${exports.classes.file}, .${exports.classes.imageWrap} {
+                    cursor: grab;
+                }
             }
-        }
 
-        &:not([data-sortable=true]) {
-            .${exports.classes.file}, .${exports.classes.imageWrap} {
-                cursor: default;
+            &:not([data-sortable=true]) {
+                .${exports.classes.file}, .${exports.classes.imageWrap} {
+                    cursor: default;
+                }
             }
         }
     `;

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

@@ -9,15 +9,17 @@ exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {
     return (0, utils_1.useCss)(theme => (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
+        @layer reset {
+            ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
             ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};
         `)}
 
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        column-gap: var(--waterfall-column-gap);
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            column-gap: var(--waterfall-column-gap);
+        }
     `);
 }

package/dist/cjs/extensions/documentViewer/documentViewer.style.js

@@ -22,57 +22,59 @@ exports.iframeStyle = (0, react_1.css) `
     display: block;
 `;
 exports.svgStyle = (0, utils_1.defineCss)(({ spacing, background, divider, text, colors, easing }) => (0, react_1.css) `
-    .${loading_style_1.classes.container} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .${exports.classes.svgToolbar} {
-        padding: ${spacing[3]}px ${spacing[8]}px;
-        background: ${background.content};
-        border-bottom: 1px solid ${divider};
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+    @layer reset {
+        .${loading_style_1.classes.container} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
 
-        .${exports.classes.svgTitle} {
+        .${exports.classes.svgToolbar} {
+            padding: ${spacing[3]}px ${spacing[8]}px;
+            background: ${background.content};
+            border-bottom: 1px solid ${divider};
             display: flex;
             align-items: center;
-            gap: ${spacing[2]}px;
-            color: ${text.primary};
+            justify-content: space-between;
 
-            .${exports.classes.svgIcon} {
-                color: ${colors.primary.main};
+            .${exports.classes.svgTitle} {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+                color: ${text.primary};
+
+                .${exports.classes.svgIcon} {
+                    color: ${colors.primary.main};
+                }
             }
-        }
 
-        .${exports.classes.svgToolbarRight} {
-            display: flex;
-            gap: ${spacing[2]}px;
+            .${exports.classes.svgToolbarRight} {
+                display: flex;
+                gap: ${spacing[2]}px;
+            }
+
+            .${exports.classes.svgDivider} {
+                padding: ${spacing[2]}px 0;
+            }
         }
 
-        .${exports.classes.svgDivider} {
-            padding: ${spacing[2]}px 0;
+        .${exports.classes.svgContainer} {
+            width: 100%;
+            flex: 1;
+            background-color: ${background.body};
+            overflow: hidden;
         }
-    }
 
-    .${exports.classes.svgContainer} {
-        width: 100%;
-        flex: 1;
-        background-color: ${background.body};
-        overflow: hidden;
-    }
-    
-    .${exports.classes.svgContent}, .${exports.classes.object} {
-        width: 100%;
-        height: 100%;
-    }
+        .${exports.classes.svgContent}, .${exports.classes.object} {
+            width: 100%;
+            height: 100%;
+        }
 
-    .${exports.classes.object} {
-        pointer-events: none;
-        user-select: none;
-        transition: rotate .4s ${easing.easeOut};
+        .${exports.classes.object} {
+            pointer-events: none;
+            user-select: none;
+            transition: rotate .4s ${easing.easeOut};
+        }
     }
 `);

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

@@ -9,121 +9,123 @@ export const classes = defineInnerClasses('accordion', [
     'content'
 ]);
 export const style = defineCss(({ divider, borderRadius, background, spacing, text, gray, easing }) => css `
-    border: 1px solid ${divider};
-    border-radius: ${borderRadius}px;
-    background-color: ${background.content};
-    transition: margin .25s ${easing.easeOut};
-
-    .${classes.titleRow} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[2]}px;
-        padding: 9px ${spacing[5]}px;
-        transition: padding .25s ${easing.easeOut};
-
-        .${classes.expandIcon} {
-            color: ${text.disabled};
-            transition: transform .25s ${easing.easeOut};
-        }
-
-        .${classes.title} {
-            flex: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .${classes.prefix},
-        .${classes.suffix} {
-            color: ${text.secondary};
-        }
-    }
+    @layer reset {
+        border: 1px solid ${divider};
+        border-radius: ${borderRadius}px;
+        background-color: ${background.content};
+        transition: margin .25s ${easing.easeOut};
 
-    &:not([data-read-only=true]):not([data-disabled=true]) {
         .${classes.titleRow} {
-            cursor: pointer;
-        }
-    }
-
-    &[data-disabled=true] {
-        background-color: ${gray(.1)};
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+            padding: 9px ${spacing[5]}px;
+            transition: padding .25s ${easing.easeOut};
+
+            .${classes.expandIcon} {
+                color: ${text.disabled};
+                transition: transform .25s ${easing.easeOut};
+            }
 
-        .${classes.titleRow} {
-            cursor: not-allowed;
-        }
-    }
+            .${classes.title} {
+                flex: 1;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
 
-    &[data-expanded=true] {
-        .${classes.titleRow} {
-            padding: 15px ${spacing[5]}px;
+            .${classes.prefix},
+            .${classes.suffix} {
+                color: ${text.secondary};
+            }
         }
 
-        .${classes.expandIcon} {
-            transform: rotate(90deg);
+        &:not([data-read-only=true]):not([data-disabled=true]) {
+            .${classes.titleRow} {
+                cursor: pointer;
+            }
         }
-    }
 
-    .${classes.content} {
-        padding: 0 ${spacing[5]}px ${spacing[5]}px;
-    }
+        &[data-disabled=true] {
+            background-color: ${gray(.1)};
 
-    &[data-size=small] {
-        .${classes.titleRow} {
-            padding: 6px ${spacing[5]}px;
+            .${classes.titleRow} {
+                cursor: not-allowed;
+            }
         }
 
         &[data-expanded=true] {
             .${classes.titleRow} {
-                padding: 11px ${spacing[5]}px;
+                padding: 15px ${spacing[5]}px;
+            }
+
+            .${classes.expandIcon} {
+                transform: rotate(90deg);
             }
         }
-    }
 
-    &[data-size=large] {
-        .${classes.titleRow} {
-            padding: 12px ${spacing[5]}px;
+        .${classes.content} {
+            padding: 0 ${spacing[5]}px ${spacing[5]}px;
         }
 
-        &[data-expanded=true] {
+        &[data-size=small] {
             .${classes.titleRow} {
-                padding: 17px ${spacing[5]}px;
+                padding: 6px ${spacing[5]}px;
             }
-        }
-    }
 
-    &[data-compact=column] {
-        &:not([data-first=true]) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            margin-top: -1px;
+            &[data-expanded=true] {
+                .${classes.titleRow} {
+                    padding: 11px ${spacing[5]}px;
+                }
+            }
         }
-    
-        &:not([data-last=true]) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+
+        &[data-size=large] {
+            .${classes.titleRow} {
+                padding: 12px ${spacing[5]}px;
+            }
+
+            &[data-expanded=true] {
+                .${classes.titleRow} {
+                    padding: 17px ${spacing[5]}px;
+                }
+            }
         }
-        
-        &[data-expanded=true] {
+
+        &[data-compact=column] {
             &:not([data-first=true]) {
-                margin-top: ${spacing[3]}px;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                margin-top: -1px;
             }
 
-            &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
-                margin-bottom: ${spacing[3]}px
+            &:not([data-last=true]) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
             }
-        }
-    }
 
-    &[data-compact=row] {
-        &:not([data-first=true]) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            margin-left: -1px;
+            &[data-expanded=true] {
+                &:not([data-first=true]) {
+                    margin-top: ${spacing[3]}px;
+                }
+
+                &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
+                    margin-bottom: ${spacing[3]}px
+                }
+            }
         }
-    
-        &:not([data-last=true]) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
+
+        &[data-compact=row] {
+            &:not([data-first=true]) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-left: -1px;
+            }
+
+            &:not([data-last=true]) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
         }
     }
 `);