@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -5,38 +5,40 @@ export const classes = defineInnerClasses('upload-drop-area', [
     'description'
 ]);
 export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors, easing }) => 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;
-    }
-    
-    .${classes.icon}, .${classes.description} {
-        pointer-events: none;
-    }
+        &:active {
+            background-color: ${gray(.08)};
+            transition: background-color 0s;
+        }
 
-    .${classes.icon} {
-        font-size: ${30 / 14}em;
-    }
+        .${classes.icon}, .${classes.description} {
+            pointer-events: none;
+        }
+
+        .${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/esm/components/upload/upload.style.js

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

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

@@ -5,15 +5,17 @@ export const classes = defineInnerClasses('waterfall', [
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {
     return useCss(theme => css `
-        ${responsiveVariables(theme.breakpoints, k => `
+        @layer reset {
+            ${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/esm/extensions/documentViewer/documentViewer.style.js

@@ -19,57 +19,59 @@ export const iframeStyle = css `
     display: block;
 `;
 export const svgStyle = defineCss(({ spacing, background, divider, text, colors, easing }) => css `
-    .${loadingClasses.container} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .${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 {
+        .${loadingClasses.container} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
 
-        .${classes.svgTitle} {
+        .${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;
 
-            .${classes.svgIcon} {
-                color: ${colors.primary.main};
+            .${classes.svgTitle} {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+                color: ${text.primary};
+
+                .${classes.svgIcon} {
+                    color: ${colors.primary.main};
+                }
             }
-        }
 
-        .${classes.svgToolbarRight} {
-            display: flex;
-            gap: ${spacing[2]}px;
+            .${classes.svgToolbarRight} {
+                display: flex;
+                gap: ${spacing[2]}px;
+            }
+
+            .${classes.svgDivider} {
+                padding: ${spacing[2]}px 0;
+            }
         }
 
-        .${classes.svgDivider} {
-            padding: ${spacing[2]}px 0;
+        .${classes.svgContainer} {
+            width: 100%;
+            flex: 1;
+            background-color: ${background.body};
+            overflow: hidden;
         }
-    }
 
-    .${classes.svgContainer} {
-        width: 100%;
-        flex: 1;
-        background-color: ${background.body};
-        overflow: hidden;
-    }
-    
-    .${classes.svgContent}, .${classes.object} {
-        width: 100%;
-        height: 100%;
-    }
+        .${classes.svgContent}, .${classes.object} {
+            width: 100%;
+            height: 100%;
+        }
 
-    .${classes.object} {
-        pointer-events: none;
-        user-select: none;
-        transition: rotate .4s ${easing.easeOut};
+        .${classes.object} {
+            pointer-events: none;
+            user-select: none;
+            transition: rotate .4s ${easing.easeOut};
+        }
     }
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",