@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -17,127 +17,129 @@ exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'foot'
 ]);
 exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.headSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.headCenter} {
+    @layer reset {
+        .${exports.classes.head} {
+            height: 40px;
             display: flex;
             align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
+            justify-content: space-between;
+            border-bottom: 1px solid ${divider};
+            padding: 0 ${menuItem_style_1.menuListPadding}px;
+            position: relative;
 
-            .${exports.classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
+            .${exports.classes.headSide} {
+                z-index: 1;
             }
-        }
-    }
-
-    .${exports.classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${exports.classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
 
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
+            .${exports.classes.headControl} {
+                color: ${text.placeholder};
             }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
 
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
+            .${exports.classes.headCenter} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                inset: 0;
 
-                &:not([data-variant=filled]) {
+                .${exports.classes.headButton} {
+                    font-weight: bold;
                     color: ${text.primary};
                 }
             }
         }
-    }
-    
-    &[data-size=small] {
+
         .${exports.classes.body} {
+            padding: ${spacing[3]}px ${spacing[4]}px;
+            display: grid;
+            place-items: center;
+
             &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
+                font-size: ${13 / 14}em;
+                grid-template-columns: repeat(7, 36px);
+                grid-template-rows: repeat(7, 36px);
+
+                .${exports.classes.dateItem} {
+                    width: 24px;
+                    height: 24px;
+
+                    &:not([data-variant=filled]) {
+                        color: ${text.primary};
+                        border-color: ${text.disabled};
+
+                        &[data-other-month=true] {
+                            color: ${text.placeholder};
+                        }
+                    }
+
+                    &:disabled {
+                        width: 100%;
+                        border-radius: 0;
+                    }
+                }
             }
 
             &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
+                grid-template-columns: repeat(3, 84px);
+                grid-template-rows: repeat(4, 63px);
 
                 .${exports.classes.monthItem},
                 .${exports.classes.yearItem} {
-                    width: 60px;
+                    width: 72px;
+                    padding-inline: 0;
+
+                    &:not([data-variant=filled]) {
+                        color: ${text.primary};
+                    }
                 }
             }
         }
-    }
 
-    &[data-size=large] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
+        &[data-size=small] {
+            .${exports.classes.body} {
+                &[data-view-type=date] {
+                    grid-template-columns: repeat(7, 30px);
+                    grid-template-rows: repeat(7, 30px);
+                }
 
-                .${exports.classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
+                &[data-view-type=month], &[data-view-type=year] {
+                    grid-template-columns: repeat(3, 70px);
+                    grid-template-rows: repeat(4, 52.5px);
+
+                    .${exports.classes.monthItem},
+                    .${exports.classes.yearItem} {
+                        width: 60px;
+                    }
                 }
             }
+        }
 
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
+        &[data-size=large] {
+            .${exports.classes.body} {
+                &[data-view-type=date] {
+                    font-size: 1em;
+                    grid-template-columns: repeat(7, 42px);
+                    grid-template-rows: repeat(7, 42px);
+
+                    .${exports.classes.dateItem} {
+                        width: 32px;
+                        height: 32px;
+                    }
+                }
+
+                &[data-view-type=month], &[data-view-type=year] {
+                    grid-template-columns: repeat(3, 98px);
+                    grid-template-rows: repeat(4, 73.5px);
+                }
             }
         }
-    }
 
-    .${exports.classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
+        .${exports.classes.foot} {
+            height: 41px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-top: 1px solid ${divider};
+        }
     }
 `);

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

@@ -5,61 +5,64 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('card');
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, boxShadow, gray }) => [
-    (0, react_1.css) `
-        padding: ${spacing[8]}px;
-    `,
-    ...[mode === 'light'
-            ? (0, react_1.css) `
-            background-color: ${background.content};
+    mode === 'light'
+        ? (0, react_1.css) `
+                @layer reset {
+                    padding: ${spacing[8]}px;
+                    background-color: ${background.content};
 
-            &[data-bordered=true] {
-                border: 1px solid ${divider};
-            }
+                    &[data-bordered=true] {
+                        border: 1px solid ${divider};
+                    }
 
-            &[data-elevation="1"] {
-                box-shadow: ${boxShadow[2]};
-            }
+                    &[data-elevation="1"] {
+                        box-shadow: ${boxShadow[2]};
+                    }
 
-            &[data-elevation="2"] {
-                box-shadow: ${boxShadow[3]};
-            }
+                    &[data-elevation="2"] {
+                        box-shadow: ${boxShadow[3]};
+                    }
 
-            &[data-elevation="3"] {
-                box-shadow: ${boxShadow[4]};
-            }
+                    &[data-elevation="3"] {
+                        box-shadow: ${boxShadow[4]};
+                    }
 
-            &[data-elevation="4"] {
-                box-shadow: ${boxShadow[5]};
-            }
+                    &[data-elevation="4"] {
+                        box-shadow: ${boxShadow[5]};
+                    }
 
-            &[data-elevation="5"] {
-                box-shadow: ${boxShadow[6]};
-            }
+                    &[data-elevation="5"] {
+                        box-shadow: ${boxShadow[6]};
+                    }
+                }
         `
-            : (0, react_1.css) `
-            &[data-elevation="0"] {
-                background-color: ${gray(.1)};
-            }
+        : (0, react_1.css) `
+                @layer reset {
+                    padding: ${spacing[8]}px;
 
-            &[data-elevation="1"] {
-                background-color: ${gray(.14)};
-            }
+                    &[data-elevation="0"] {
+                        background-color: ${gray(.1)};
+                    }
 
-            &[data-elevation="2"] {
-                background-color: ${gray(.2)};
-            }
+                    &[data-elevation="1"] {
+                        background-color: ${gray(.14)};
+                    }
 
-            &[data-elevation="3"] {
-                background-color: ${gray(.26)};
-            }
+                    &[data-elevation="2"] {
+                        background-color: ${gray(.2)};
+                    }
 
-            &[data-elevation="4"] {
-                background-color: ${gray(.34)};
-            }
+                    &[data-elevation="3"] {
+                        background-color: ${gray(.26)};
+                    }
 
-            &[data-elevation="5"] {
-                background-color: ${gray(.45)};
-            }
+                    &[data-elevation="4"] {
+                        background-color: ${gray(.34)};
+                    }
+
+                    &[data-elevation="5"] {
+                        background-color: ${gray(.45)};
+                    }
+                }
         `
-    ]
 ]);

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

@@ -18,78 +18,82 @@ exports.classes = (0, utils_1.defineInnerClasses)('cascade', [
     'searchResult'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_1.css) `
-    cursor: pointer;
-    position: relative;
+    @layer reset {
+        cursor: pointer;
+        position: relative;
 
-    .${exports.classes.contentWrap} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[1]}px;
-    }
+        .${exports.classes.contentWrap} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[1]}px;
+        }
 
-    .${exports.classes.placeholder} {
-        flex: 1;
-        color: ${text.placeholder};
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
+        .${exports.classes.placeholder} {
+            flex: 1;
+            color: ${text.placeholder};
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
 
-    .${exports.classes.arrow} {
-        color: ${text.placeholder};
-        transition: transform .25s ${easing.easeOut};
+        .${exports.classes.arrow} {
+            color: ${text.placeholder};
+            transition: transform .25s ${easing.easeOut};
 
-        &[data-open=true] {
-            transform: rotate(180deg);
+            &[data-open=true] {
+                transform: rotate(180deg);
+            }
         }
-    }
 
-    .${exports.classes.backfill} {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: ${spacing[1]}px;
-
-        .${tag_style_1.classes.root} {
+        .${exports.classes.backfill} {
+            flex: 1;
             min-width: 0;
-        }
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[1]}px;
 
-        .${tag_style_1.classes.content},
-        .${exports.classes.backfillWrap} {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            direction: rtl;
+            .${tag_style_1.classes.root} {
+                min-width: 0;
+            }
+
+            .${tag_style_1.classes.content},
+            .${exports.classes.backfillWrap} {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                direction: rtl;
+            }
         }
     }
 `);
 exports.cascadePopperStyle = (0, utils_1.defineCss)(theme => [
     (0, popper_style_1.popperStyleCallback)(theme),
     (0, react_1.css) `
-        .${exports.classes.searchInput} {
-            margin-bottom: ${menuItem_style_1.menuListPadding}px;
-        }
-        
-        .${exports.classes.panelContainer} {
-            display: flex;
-            gap: ${menuItem_style_1.menuListPadding}px;
-        }
-        
-        .${exports.classes.panel} {
-            min-width: 120px;
-            overflow: hidden;
-            max-height: ${32 * 8 + 8}px;
-            position: relative;
+        @layer reset {
+            .${exports.classes.searchInput} {
+                margin-bottom: ${menuItem_style_1.menuListPadding}px;
+            }
 
-            &:hover {
-                overflow: hidden auto;
+            .${exports.classes.panelContainer} {
+                display: flex;
+                gap: ${menuItem_style_1.menuListPadding}px;
             }
 
-        }
+            .${exports.classes.panel} {
+                min-width: 120px;
+                overflow: hidden;
+                max-height: ${32 * 8 + 8}px;
+                position: relative;
+
+                &:hover {
+                    overflow: hidden auto;
+                }
 
-        .${exports.classes.searchResult} {
-            min-width: 360px;
+            }
+
+            .${exports.classes.searchResult} {
+                min-width: 360px;
+            }
         }
     `
 ]);