@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -12,142 +12,146 @@ export const classes = defineInnerClasses('descriptions', [
     'verticalColWrap'
 ]);
 export const tableStyle = defineCss(({ divider, spacing, background }) => css `
-    width: 100%;
-    border-collapse: collapse;
+    @layer reset {
+        width: 100%;
+        border-collapse: collapse;
 
-    td {
-        padding: 0;
-        border: 1px solid ${divider};
-    }
+        td {
+            padding: 0;
+            border: 1px solid ${divider};
+        }
 
-    .${classes.col} {
-        &:not([data-disable-padding=true]) {
-            padding: 12px ${spacing[5]}px;
+        .${classes.col} {
+            &:not([data-disable-padding=true]) {
+                padding: 12px ${spacing[5]}px;
 
-            &[data-size=small] {
-                padding: 7px ${spacing[4]}px;
-            }
-            
-            &[data-size=large] {
-                padding: 17px ${spacing[6]}px;
+                &[data-size=small] {
+                    padding: 7px ${spacing[4]}px;
+                }
+
+                &[data-size=large] {
+                    padding: 17px ${spacing[6]}px;
+                }
             }
         }
-    }
 
-    .${classes.labelCol} {
-        background-color: ${background.fixed};
-    }
+        .${classes.labelCol} {
+            background-color: ${background.fixed};
+        }
 
-    .${classes.vertical} {
-        vertical-align: top;
-    }
+        .${classes.vertical} {
+            vertical-align: top;
+        }
 
-    .${classes.verticalColWrap} {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
+        .${classes.verticalColWrap} {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
 
-        .${classes.labelCol} {
-            flex: 1;
-            border-bottom: 1px solid ${divider};
+            .${classes.labelCol} {
+                flex: 1;
+                border-bottom: 1px solid ${divider};
+            }
         }
     }
 `);
 export const gridItemStyle = defineCss(({ spacing, text }) => css `
-    display: flex;
-    gap: ${spacing[1]}px 0;
+    @layer reset {
+        display: flex;
+        gap: ${spacing[1]}px 0;
 
-    &[data-label-placement=top] {
-        flex-direction: column;
-    }
+        &[data-label-placement=top] {
+            flex-direction: column;
+        }
 
-    &[data-label-placement=bottom] {
-        flex-direction: column-reverse;
-    }
+        &[data-label-placement=bottom] {
+            flex-direction: column-reverse;
+        }
 
-    &[data-label-placement=right] {
-        flex-direction: row-reverse;
-    }
+        &[data-label-placement=right] {
+            flex-direction: row-reverse;
+        }
 
-    &:not([data-disable-margin=true]) {
-        &[data-label-placement=left], &[data-label-placement=right] {
-            margin-bottom: ${spacing[4]}px;
+        &:not([data-disable-margin=true]) {
+            &[data-label-placement=left], &[data-label-placement=right] {
+                margin-bottom: ${spacing[4]}px;
 
-            &[data-size=small] {
-                margin-bottom: ${spacing[2]}px;
+                &[data-size=small] {
+                    margin-bottom: ${spacing[2]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[6]}px;
+                }
             }
 
-            &[data-size=large] {
-                margin-bottom: ${spacing[6]}px;
+            &[data-label-placement=top], &[data-label-placement=bottom] {
+                margin-bottom: ${spacing[5]}px;
+
+                &[data-size=small] {
+                    margin-bottom: ${spacing[3]}px;
+                }
+
+                &[data-size=large] {
+                    margin-bottom: ${spacing[7]}px;
+                }
             }
         }
-        
-        &[data-label-placement=top], &[data-label-placement=bottom] {
-            margin-bottom: ${spacing[5]}px;
 
-            &[data-size=small] {
-                margin-bottom: ${spacing[3]}px;
-            }
+        .${classes.label} {
+            display: flex;
+            align-items: center;
+            color: ${text.disabled};
 
-            &[data-size=large] {
-                margin-bottom: ${spacing[7]}px;
+            .${classes.colon} {
+                margin-left: 1px;
             }
         }
-    }
-
-    .${classes.label} {
-        display: flex;
-        align-items: center;
-        color: ${text.disabled};
 
-        .${classes.colon} {
-            margin-left: 1px;
+        .${classes.content} {
+            flex: 1;
         }
-    }
 
-    .${classes.content} {
-        flex: 1;
-    }
+        &[data-label-placement=left], &[data-label-placement=right] {
+            &[data-size=small] {
+                .${classes.label} {
+                    max-height: 24px;
+                }
+            }
 
-    &[data-label-placement=left], &[data-label-placement=right] {
-        &[data-size=small] {
-            .${classes.label} {
-                max-height: 24px;
+            &[data-size=medium] {
+                .${classes.label} {
+                    max-height: 32px;
+                }
             }
-        }
 
-        &[data-size=medium] {
-            .${classes.label} {
-                max-height: 32px;
+            &[data-size=large] {
+                .${classes.label} {
+                    max-height: 40px;
+                }
             }
         }
 
-        &[data-size=large] {
+        &[data-label-placement=left] {
             .${classes.label} {
-                max-height: 40px;
-            }
-        }
-    }
+                text-align: right;
+                justify-content: flex-end;
 
-    &[data-label-placement=left] {
-        .${classes.label} {
-            text-align: right;
-            justify-content: flex-end;
-            
-            + .${classes.content} {
-                margin-left: ${spacing[3]}px;
+                + .${classes.content} {
+                    margin-left: ${spacing[3]}px;
+                }
             }
         }
-    }
 
-    &[data-label-placement=right] {
-        .${classes.content} {
-            text-align: right;
-            justify-content: flex-end;
-        }
+        &[data-label-placement=right] {
+            .${classes.content} {
+                text-align: right;
+                justify-content: flex-end;
+            }
 
-        .${classes.label} + .${classes.content} {
-            margin-right: ${spacing[3]}px;
+            .${classes.label} + .${classes.content} {
+                margin-right: ${spacing[3]}px;
+            }
         }
     }
 `);

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

@@ -15,128 +15,130 @@ export const classes = defineInnerClasses('dialog', [
     'footer'
 ]);
 export const style = defineCss(({ background, borderRadius, boxShadow, spacing, colors, divider }) => css `
-    .${classes.container} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 40px;
-        overflow: hidden;
-    }
-    
-    .${classes.card} {
-        display: flex;
-        background-color: ${background.content};
-        border-radius: ${borderRadius}px;
-        box-shadow: ${boxShadow[0]};
-    }
+    @layer reset {
+        .${classes.container} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 40px;
+            overflow: hidden;
+        }
 
-    &[data-scroll-behavior=card] {
         .${classes.card} {
-            max-height: 100%;
+            display: flex;
+            background-color: ${background.content};
+            border-radius: ${borderRadius}px;
+            box-shadow: ${boxShadow[0]};
         }
-    }
 
-    &[data-scroll-behavior=body] {
-        .${classes.container} {
-            overflow: hidden auto;
-            scrollbar-width: none;
-            
-            &[data-scrollable=true] {
-                align-items: flex-start;
+        &[data-scroll-behavior=card] {
+            .${classes.card} {
+                max-height: 100%;
             }
         }
-        
-        .enter-done .${classes.container} {
-            scrollbar-width: auto;
-        }
-    }
 
-    .${classes.icon} {
-        color: ${colors.primary.main};
-        font-size: ${21 / 14}em;
-        padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
-        display: flex;
-        align-items: flex-start;
+        &[data-scroll-behavior=body] {
+            .${classes.container} {
+                overflow: hidden auto;
+                scrollbar-width: none;
+
+                &[data-scrollable=true] {
+                    align-items: flex-start;
+                }
+            }
 
-        & + .${classes.content} {
-            padding-left: ${spacing[4]}px;
+            .enter-done .${classes.container} {
+                scrollbar-width: auto;
+            }
         }
-    }
 
-    .${classes.content} {
-        min-width: 0;
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: 0 ${spacing[8]}px;
-    }
+        .${classes.icon} {
+            color: ${colors.primary.main};
+            font-size: ${21 / 14}em;
+            padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
+            display: flex;
+            align-items: flex-start;
 
-    .${classes.titleRow} {
-        display: flex;
-        align-items: center;
-        font-size: ${16 / 14}em;
-        font-weight: bold;
-        margin-right: -${spacing[8]}px;
+            & + .${classes.content} {
+                padding-left: ${spacing[4]}px;
+            }
+        }
 
-        .${classes.title} {
+        .${classes.content} {
+            min-width: 0;
             flex: 1;
-            padding: ${spacing[6]}px 0 ${spacing[3]}px;
+            display: flex;
+            flex-direction: column;
+            padding: 0 ${spacing[8]}px;
         }
 
-        .${classes.close} {
-            margin: ${spacing[3]}px ${spacing[4]}px;
-        }
+        .${classes.titleRow} {
+            display: flex;
+            align-items: center;
+            font-size: ${16 / 14}em;
+            font-weight: bold;
+            margin-right: -${spacing[8]}px;
+
+            .${classes.title} {
+                flex: 1;
+                padding: ${spacing[6]}px 0 ${spacing[3]}px;
+            }
 
-        & + .${classes.body} {
-            padding-top: ${spacing[3]}px;
+            .${classes.close} {
+                margin: ${spacing[3]}px ${spacing[4]}px;
+            }
+
+            & + .${classes.body} {
+                padding-top: ${spacing[3]}px;
+            }
         }
-    }
 
-    &[data-draggable=true] {
-        .${classes.titleRow} {
-            cursor: move;
-            touch-action: none;
+        &[data-draggable=true] {
+            .${classes.titleRow} {
+                cursor: move;
+                touch-action: none;
+            }
         }
-    }
 
-    .${classes.body} {
-        overflow: hidden auto;
-        padding: ${spacing[6]}px 0;
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-        display: flex;
-        gap: ${spacing[6]}px;
+        .${classes.body} {
+            overflow: hidden auto;
+            padding: ${spacing[6]}px 0;
+            border-top: 1px solid transparent;
+            border-bottom: 1px solid transparent;
+            display: flex;
+            gap: ${spacing[6]}px;
+
+            &:has(+ .${classes.footer}) {
+                padding-bottom: 0;
+            }
 
-        &:has(+ .${classes.footer}) {
-            padding-bottom: 0;
-        }
+            &[data-border-top=true] {
+                border-top-color: ${divider};
+            }
 
-        &[data-border-top=true] {
-            border-top-color: ${divider};
-        }
+            &[data-border-bottom=true] {
+                border-bottom-color: ${divider};
+            }
 
-        &[data-border-bottom=true] {
-            border-bottom-color: ${divider};
-        }
+            .${classes.bodyWrap} {
+                min-width: 0;
+                flex: 1;
+            }
 
-        .${classes.bodyWrap} {
-            min-width: 0;
-            flex: 1;
+            .${classes.prefix}, .${classes.suffix} {
+                max-height: 100%;
+                overflow: auto;
+            }
         }
 
-        .${classes.prefix}, .${classes.suffix} {
-            max-height: 100%;
-            overflow: auto;
+        .${classes.footer} {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: ${spacing[3]}px;
+            padding: ${spacing[4]}px 0 ${spacing[6]}px;
         }
     }
-
-    .${classes.footer} {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: ${spacing[3]}px;
-        padding: ${spacing[4]}px 0 ${spacing[6]}px;
-    }
 `);

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

@@ -7,27 +7,29 @@ export const classes = defineInnerClasses('divider', [
     'content'
 ]);
 export const style = defineCss(({ spacing, divider }) => css `
-    gap: ${spacing[4]}px;
-    align-items: center;
+    @layer reset {
+        gap: ${spacing[4]}px;
+        align-items: center;
 
-    .${classes.line} {
-        background-color: ${divider};
-    }
+        .${classes.line} {
+            background-color: ${divider};
+        }
 
-    &[data-orientation=horizontal] {
-        display: flex;
+        &[data-orientation=horizontal] {
+            display: flex;
 
-        .${classes.line} {
-            height: 1px;
+            .${classes.line} {
+                height: 1px;
+            }
         }
-    }
 
-    &[data-orientation=vertical] {
-        display: inline-flex;
-        flex-direction: column;
+        &[data-orientation=vertical] {
+            display: inline-flex;
+            flex-direction: column;
 
-        .${classes.line} {
-            width: 1px;
+            .${classes.line} {
+                width: 1px;
+            }
         }
     }
 `);