@canlooks/can-ui 0.0.98 → 0.0.100

package/dist/esm/components/curd/curdColumnConfig.style.js

@@ -7,26 +7,28 @@ export const classes = defineInnerClasses('curd-column-config', [
     'checkbox'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    .${classes.content} {
-        min-width: 160px;
+    @layer reset {
+        .${classes.content} {
+            min-width: 160px;
 
-        .${classes.title} {
-            font-weight: bold;
-            padding: ${spacing[3]}px;
-        }
+            .${classes.title} {
+                font-weight: bold;
+                padding: ${spacing[3]}px;
+            }
 
-        .${classes.item} {
-            cursor: move;
+            .${classes.item} {
+                cursor: move;
 
-            &[data-dragging=true] {
-                position: relative;
-                z-index: 1;
+                &[data-dragging=true] {
+                    position: relative;
+                    z-index: 1;
+                }
             }
-        }
 
-        .${classes.checkbox} {
-            display: flex;
-            margin-right: ${spacing[1]}px;
+            .${classes.checkbox} {
+                display: flex;
+                margin-right: ${spacing[1]}px;
+            }
         }
     }
 `);

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

@@ -18,153 +18,155 @@ export const classes = defineInnerClasses('data-grid', [
     'resizeHandle'
 ]);
 export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) => css `
-    .${loadingClasses.container} {
-        display: flex;
-        flex-direction: column;
-        gap: ${spacing[5]}px;
-    }
+    @layer reset {
+        .${loadingClasses.container} {
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[5]}px;
+        }
 
-    .${classes.filterForm} {
-        min-height: 0;
-    }
+        .${classes.filterForm} {
+            min-height: 0;
+        }
 
-    .${classes.container} {
-        height: 100%;
-    }
+        .${classes.container} {
+            height: 100%;
+        }
 
-    .${classes.functionalCell} {
-        display: flex;
-        align-items: center;
+        .${classes.functionalCell} {
+            display: flex;
+            align-items: center;
 
-        .${classes.title} {
-            flex: 1;
-        }
+            .${classes.title} {
+                flex: 1;
+            }
 
-        .${classes.sortIcon} {
-            color: ${text.placeholder};
-            transition: translate .25s ${easing.swing};
-        }
+            .${classes.sortIcon} {
+                color: ${text.placeholder};
+                transition: translate .25s ${easing.swing};
+            }
 
-        .${classes.filterButton} {
-            width: ${20 / 14}em;
-            height: ${20 / 14}em;
-            margin-left: ${spacing[2]}px;
+            .${classes.filterButton} {
+                width: ${20 / 14}em;
+                height: ${20 / 14}em;
+                margin-left: ${spacing[2]}px;
+            }
         }
-    }
 
-    th[data-sortable=true] {
-        cursor: pointer;
-        transition: background-color .25s ${easing.easeOut};
-        -webkit-tap-highlight-color: transparent;
+        th[data-sortable=true] {
+            cursor: pointer;
+            transition: background-color .25s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
 
-        &:hover {
-            background-color: ${gray(mode === 'light' ? .05 : .26)};
-        }
+            &:hover {
+                background-color: ${gray(mode === 'light' ? .05 : .26)};
+            }
 
-        &:active {
-            transition: background-color 0s;
-            background-color: ${gray(mode === 'light' ? .01 : .22)};
-        }
+            &:active {
+                transition: background-color 0s;
+                background-color: ${gray(mode === 'light' ? .01 : .22)};
+            }
 
-        &[data-ordering=true] {
-            .${classes.sortIcon} {
-                color: ${colors.primary.main};
+            &[data-ordering=true] {
+                .${classes.sortIcon} {
+                    color: ${colors.primary.main};
+                }
             }
-        }
 
-        &[data-order-type=ascend] {
-            .${classes.sortIcon} {
-                translate: 0 -3px;
-                rotate: 180deg;
+            &[data-order-type=ascend] {
+                .${classes.sortIcon} {
+                    translate: 0 -3px;
+                    rotate: 180deg;
+                }
             }
-        }
 
-        &[data-order-type=descend] {
-            .${classes.sortIcon} {
-                translate: 0 3px;
-                rotate: 0deg;
+            &[data-order-type=descend] {
+                .${classes.sortIcon} {
+                    translate: 0 3px;
+                    rotate: 0deg;
+                }
             }
         }
-    }
 
-    tr {
-        &.${classes.sub} {
-            background-color: ${gray(mode === 'light' ? .02 : .22)};
-        }
+        tr {
+            &.${classes.sub} {
+                background-color: ${gray(mode === 'light' ? .02 : .22)};
+            }
 
-        .${classes.subTd} {
-            padding: 0;
-            border: none;
+            .${classes.subTd} {
+                padding: 0;
+                border: none;
 
-            .${classes.children} {
-                padding: ${spacing[4]}px ${spacing[5]}px;
-                border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
+                .${classes.children} {
+                    padding: ${spacing[4]}px ${spacing[5]}px;
+                    border-bottom: 1px solid ${gray(mode === 'light' ? .12 : .32)};
+                }
             }
         }
-    }
 
-    th, td {
-        &.${classes.selectable} {
-            width: 0;
-            padding-top: 0;
-            padding-bottom: 0;
+        th, td {
+            &.${classes.selectable} {
+                width: 0;
+                padding-top: 0;
+                padding-bottom: 0;
 
-            + *:before {
-                display: none;
-            }
+                + *::before {
+                    display: none;
+                }
 
-            .${classes.resizeHandle} {
-                display: none;
+                .${classes.resizeHandle} {
+                    display: none;
+                }
             }
-        }
 
-        &[data-grouped=true] {
-            text-align: center;
+            &[data-grouped=true] {
+                text-align: center;
+            }
         }
-    }
 
-    .${classes.expandable} {
-        padding-top: 0;
-        padding-bottom: 0;
-        padding-left: 0;
+        .${classes.expandable} {
+            padding-top: 0;
+            padding-bottom: 0;
+            padding-left: 0;
 
-        .${classes.expandableWrap} {
-            display: flex;
-            align-items: center;
-            gap: ${spacing[1]}px;
+            .${classes.expandableWrap} {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[1]}px;
+            }
         }
-    }
 
-    .${classes.empty} {
-        height: auto;
-        position: sticky;
-        left: 0;
-    }
+        .${classes.empty} {
+            height: auto;
+            position: sticky;
+            left: 0;
+        }
 
-    .${classes.resizeHandle} {
-        width: 8px;
-        height: 100%;
-        cursor: col-resize;
-        touch-action: none;
-        position: absolute;
-        top: 0;
-        right: -4px;
-        z-index: 1;
-    }
+        .${classes.resizeHandle} {
+            width: 8px;
+            height: 100%;
+            cursor: col-resize;
+            touch-action: none;
+            position: absolute;
+            top: 0;
+            right: -4px;
+            z-index: 1;
+        }
 
-    &[data-column-resizable=true] table {
-        width: max-content;
-        table-layout: fixed;
-    }
+        &[data-column-resizable=true] table {
+            width: max-content;
+            table-layout: fixed;
+        }
 
-    th:last-of-type {
-        .${classes.resizeHandle} {
-            width: 4px;
-            right: 0;
+        th:last-of-type {
+            .${classes.resizeHandle} {
+                width: 4px;
+                right: 0;
+            }
         }
-    }
 
-    th:has(.${classes.resizeHandle}) {
-        overflow: visible;
+        th:has(.${classes.resizeHandle}) {
+            overflow: visible;
+        }
     }
 `);

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

@@ -10,41 +10,45 @@ export const classes = defineInnerClasses('date-time-picker', [
     'backfill'
 ]);
 export const style = defineCss(({ text, spacing }) => css `
-    cursor: pointer;
-    
-    .${classes.container} {
-        display: flex;
-        align-items: center;
+    @layer reset {
+        cursor: pointer;
 
-        .${classes.placeholder} {
-            flex: 1;
-            color: ${text.placeholder};
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .${classes.backfill} {
-            flex: 1;
-            min-width: 0;
+        .${classes.container} {
             display: flex;
-            flex-wrap: wrap;
-            gap: ${spacing[1]}px;
-        }
-        
-        .${classes.dateTimeIcon} {
-            color: ${text.secondary};
+            align-items: center;
+
+            .${classes.placeholder} {
+                flex: 1;
+                color: ${text.placeholder};
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .${classes.backfill} {
+                flex: 1;
+                min-width: 0;
+                display: flex;
+                flex-wrap: wrap;
+                gap: ${spacing[1]}px;
+            }
+
+            .${classes.dateTimeIcon} {
+                color: ${text.secondary};
+            }
         }
     }
 `);
 export const datePickerPopperStyle = defineCss(theme => [
     popperStyleCallback(theme),
     css `
-        flex-direction: row;
-        padding: 0;
-        
-        .${calendarClasses.root} + .${timerClasses.root} {
-            border-left: 1px solid ${theme.divider};
+        @layer reset {
+            flex-direction: row;
+            padding: 0;
+
+            .${calendarClasses.root} + .${timerClasses.root} {
+                border-left: 1px solid ${theme.divider};
+            }
         }
     `
 ]);

package/dist/esm/components/dateTimePicker/timer.style.js

@@ -8,36 +8,38 @@ export const classes = defineInnerClasses('timer', [
     'timerItem'
 ]);
 export const style = defineCss(({ divider }) => css `
-    display: flex;
-    padding-left: ${menuListPadding}px;
-    
-    .${classes.selectItem} {
-        width: 56px;
-        height: 351px;
+    @layer reset {
         display: flex;
-        flex-direction: column;
-        margin-right: ${menuListPadding}px;
-    
-        .${classes.selectItemTitle} {
-            line-height: 40px;
-            padding-left: 12px;
-            border-bottom: 1px solid ${divider};
-        }
-    
-        .${classes.selectItemBody} {
-            flex: 1;
-            overflow: hidden;
-            font-size: ${13 / 14}em;
-    
-            &:hover {
-                overflow-y: auto;
+        padding-left: ${menuListPadding}px;
+
+        .${classes.selectItem} {
+            width: 56px;
+            height: 351px;
+            display: flex;
+            flex-direction: column;
+            margin-right: ${menuListPadding}px;
+
+            .${classes.selectItemTitle} {
+                line-height: 40px;
+                padding-left: 12px;
+                border-bottom: 1px solid ${divider};
             }
-    
-            .${classes.timerItem} {
-                width: 56px;
 
-                &[data-disabled=true] {
-                    border-radius: 0;
+            .${classes.selectItemBody} {
+                flex: 1;
+                overflow: hidden;
+                font-size: ${13 / 14}em;
+
+                &:hover {
+                    overflow-y: auto;
+                }
+
+                .${classes.timerItem} {
+                    width: 56px;
+
+                    &[data-disabled=true] {
+                        border-radius: 0;
+                    }
                 }
             }
         }

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

@@ -3,11 +3,13 @@ import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as dateTimePickerClasses } from '../dateTimePicker/dateTimePicker.style';
 export const classes = defineInnerClasses('date-time-rage-picker');
 export const style = defineCss(({ spacing }) => css `
-    display: flex;
-    align-items: center;
-    gap: ${spacing[1]}px;
+    @layer reset {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[1]}px;
 
-    .${dateTimePickerClasses.root} {
-        flex: 1;
+        .${dateTimePickerClasses.root} {
+            flex: 1;
+        }
     }
 `);