@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -14,127 +14,129 @@ export const classes = defineInnerClasses('calendar', [
     'foot'
 ]);
 export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
+    @layer reset {
+        .${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 ${menuListPadding}px;
+            position: relative;
 
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
+            .${classes.headSide} {
+                z-index: 1;
             }
-        }
-    }
-
-    .${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);
-
-            .${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;
-                }
+            .${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);
 
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
+            .${classes.headCenter} {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                inset: 0;
 
-                &:not([data-variant=filled]) {
+                .${classes.headButton} {
+                    font-weight: bold;
                     color: ${text.primary};
                 }
             }
         }
-    }
-    
-    &[data-size=small] {
+
         .${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);
+
+                .${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);
 
                 .${classes.monthItem},
                 .${classes.yearItem} {
-                    width: 60px;
+                    width: 72px;
+                    padding-inline: 0;
+
+                    &:not([data-variant=filled]) {
+                        color: ${text.primary};
+                    }
                 }
             }
         }
-    }
 
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
+        &[data-size=small] {
+            .${classes.body} {
+                &[data-view-type=date] {
+                    grid-template-columns: repeat(7, 30px);
+                    grid-template-rows: repeat(7, 30px);
+                }
 
-                .${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);
+
+                    .${classes.monthItem},
+                    .${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] {
+            .${classes.body} {
+                &[data-view-type=date] {
+                    font-size: 1em;
+                    grid-template-columns: repeat(7, 42px);
+                    grid-template-rows: repeat(7, 42px);
+
+                    .${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);
+                }
             }
         }
-    }
 
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
+        .${classes.foot} {
+            height: 41px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-top: 1px solid ${divider};
+        }
     }
 `);

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

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

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

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