@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -4,56 +4,60 @@ export const classes = defineInnerClasses('transition-base');
 export function useTransitionBaseStyle({ timeout }) {
     const timeoutIsNumber = typeof timeout === 'number';
     return useCss(() => css `
-        ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
-
-        &.appear-active {
-            ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
-        }
+        @layer reset {
+            ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+            &.appear-active {
+                ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
+            }
 
-        &.enter-active {
-            ${!timeoutIsNumber ? `transition-duration: ${timeout.enter}ms;` : ''}
-        }
+            &.enter-active {
+                ${!timeoutIsNumber ? `transition-duration: ${timeout.enter}ms;` : ''}
+            }
 
-        &.exit-active {
-            ${!timeoutIsNumber ? `transition-duration: ${timeout.exit}ms;` : ''}
+            &.exit-active {
+                ${!timeoutIsNumber ? `transition-duration: ${timeout.exit}ms;` : ''}
+            }
         }
     `, [timeout]);
 }
 export const fadeStyle = defineCss(({ easing }) => css `
-    transition-property: opacity;
-    transition-timing-function: ${easing.easeOut};
+    @layer reset {
+        transition-property: opacity;
+        transition-timing-function: ${easing.easeOut};
 
-    &,
-    &.appear,
-    &.enter {
-        opacity: 0;
-    }
+        &,
+        &.appear,
+        &.enter {
+            opacity: 0;
+        }
 
-    &.appear-active,
-    &.enter-active,
-    &.enter-done,
-    &.exit {
-        opacity: 1;
-    }
+        &.appear-active,
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+        }
 
-    &.exit-active,
-    &.exit-done {
-        opacity: 0;
+        &.exit-active,
+        &.exit-done {
+            opacity: 0;
+        }
     }
 `);
 export const sweepingStyle = defineCss(({ easing }) => css `
-    //overflow: hidden;
-    transition-property: opacity, width, height;
+    @layer reset {
+        transition-property: opacity, width, height;
 
-    &.appear-active,
-    &.enter-active,
-    &.enter-done {
-        transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
-    }
+        &.appear-active,
+        &.enter-active,
+        &.enter-done {
+            transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
+        }
 
-    &.exit-active,
-    &.exit-done {
-        transition-timing-function: ${easing.easeOut};
+        &.exit-active,
+        &.exit-done {
+            transition-timing-function: ${easing.easeOut};
+        }
     }
 `);
 export function useGrowAndCollapseStyle({ orientation, _mode }) {
@@ -64,34 +68,35 @@ export function useGrowAndCollapseStyle({ orientation, _mode }) {
                 ? 'scaleY'
                 : 'scaleX';
         return css `
-            transition-property: opacity, transform;
-            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
-            
-            &,
-            &.appear,
-            &.enter {
-                transform: ${transformMethod}(0);
-            }
-        
-            &.appear-active,
-            &.enter-active,
-            &.enter-done,
-            &.exit {
-                transform: scale(1);
-            }
-        
-            &.exit-active,
-            &.exit-done {
-                transform: ${transformMethod}(0);
-            }
-        
-            &.appear-active,
-            &.enter-active {
-                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-            }
-        
-            &.exit-active {
-                transition-timing-function: ${easing.easeOut};
+            @layer reset {
+                transition-property: opacity, transform;
+                ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
+                &,
+                &.appear,
+                &.enter {
+                    transform: ${transformMethod}(0);
+                }
+
+                &.appear-active,
+                &.enter-active,
+                &.enter-done,
+                &.exit {
+                    transform: scale(1);
+                }
+
+                &.exit-active,
+                &.exit-done {
+                    transform: ${transformMethod}(0);
+                }
+
+                &.appear-active,
+                &.enter-active {
+                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+                }
+
+                &.exit-active {
+                    transition-timing-function: ${easing.easeOut};
+                }
             }
         `;
     }, [orientation, _mode]);
@@ -104,36 +109,38 @@ export function useSlideStyle({ direction, offset }) {
             offsetValue = '-' + offsetValue;
         }
         return css `
-            transition-property: opacity, transform;
-            
-            &,
-            &.appear,
-            &.enter {
-                pointer-events: none;
-                transform: ${transformMethod}(${offsetValue});
-            }
-        
-            &.appear-active,
-            &.enter-active,
-            &.enter-done,
-            &.exit {
-                pointer-events: inherit;
-                transform: translate(0);
-            }
-        
-            &.exit-active,
-            &.exit-done {
-                pointer-events: none;
-                transform: ${transformMethod}(${offsetValue});
-            }
-        
-            &.appear-active,
-            &.enter-active {
-                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-            }
-        
-            &.exit-active {
-                transition-timing-function: ${easing.easeOut};
+            @layer reset {
+                transition-property: opacity, transform;
+
+                &,
+                &.appear,
+                &.enter {
+                    pointer-events: none;
+                    transform: ${transformMethod}(${offsetValue});
+                }
+
+                &.appear-active,
+                &.enter-active,
+                &.enter-done,
+                &.exit {
+                    pointer-events: inherit;
+                    transform: translate(0);
+                }
+
+                &.exit-active,
+                &.exit-done {
+                    pointer-events: none;
+                    transform: ${transformMethod}(${offsetValue});
+                }
+
+                &.appear-active,
+                &.enter-active {
+                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+                }
+
+                &.exit-active {
+                    transition-timing-function: ${easing.easeOut};
+                }
             }
         `;
     }, [direction, offset]);

package/dist/esm/components/transportStyle/transportStyle.style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+export const style = css `
+    --align-items: unset;
+    --justify-content: unset;
+    --align-self: unset;
+    --justify-self: unset;
+    --flex: unset;
+    --width: unset;
+    --min-width: unset;
+    --max-width: unset;
+    --height: unset;
+    --min-height: unset;
+    --max-height: unset;
+    --line-height: unset;
+    --padding: unset;
+    --padding-top: unset;
+    --padding-bottom: unset;
+    --padding-left: unset;
+    --padding-right: unset;
+    --margin: unset;
+    --margin-top: unset;
+    --margin-bottom: unset;
+    --margin-left: unset;
+    --margin-right: unset;
+    --overflow: unset;
+    --overflow-x: unset;
+    --overflow-y: unset;
+    
+    align-items: var(--align-items);
+    justify-content: var(--justify-content);
+    align-self: var(--align-self);
+    justify-self: var(--justify-self);
+    flex: var(--flex);
+    width: var(--width);
+    min-width: var(--min-width);
+    max-width: var(--max-width);
+    height: var(--height);
+    min-height: var(--min-height);
+    max-height: var(--max-height);
+    line-height: var(--line-height);
+    padding: var(--padding);
+    padding-top: var(--padding-top);
+    padding-bottom: var(--padding-bottom);
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+    margin: var(--margin);
+    margin-top: var(--margin-top);
+    margin-bottom: var(--margin-bottom);
+    margin-left: var(--margin-left);
+    margin-right: var(--margin-right);
+    overflow: var(--overflow);
+    overflow-x: var(--overflow-x);
+    overflow-y: var(--overflow-y);
+`;

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

@@ -24,107 +24,111 @@ export function useStyle({ indent }) {
             const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
             const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
             return css `
-                .${classes.search} {
-                    margin-bottom: ${spacing[3]}px;
-                }
-
-                .${classes.node} {
-                    display: flex;
-                    align-items: center;
-                    padding-right: ${spacing[2]}px;
-                    border-radius: ${borderRadius}px;
-                    transition: background-color .25s ${easing.easeOut};
-                    touch-action: none;
-                    -webkit-tap-highlight-color: transparent;
-
-                    &[data-disabled=true] {
-                        color: ${text.disabled};
-                        cursor: not-allowed;
+                @layer reset {
+                    .${classes.search} {
+                        margin-bottom: ${spacing[3]}px;
                     }
 
-                    &:not([data-read-only=true]) {
-                        cursor: pointer;
-                    }
-
-                    .${classes.indent} {
-                        width: ${indent}px;
-                        align-self: stretch;
+                    .${classes.node} {
                         display: flex;
-                    }
-
-                    .${classes.expand} {
-                        width: 29px;
-                        align-self: stretch;
                         align-items: center;
-                        justify-content: center;
+                        padding-right: ${spacing[2]}px;
+                        border-radius: ${borderRadius}px;
+                        transition: background-color .25s ${easing.easeOut};
+                        touch-action: none;
+                        -webkit-tap-highlight-color: transparent;
+
+                        &[data-disabled=true] {
+                            color: ${text.disabled};
+                            cursor: not-allowed;
+                        }
 
-                        .${classes.icon} {
-                            transition: rotate .25s ${easing.easeOut};
+                        &:not([data-read-only=true]) {
+                            cursor: pointer;
                         }
-                    }
 
-                    .${classes.contentWrap} {
-                        flex: 1;
-                        display: flex;
-                        align-items: center;
-                        position: relative;
-                    }
+                        .${classes.indent} {
+                            width: ${indent}px;
+                            align-self: stretch;
+                            display: flex;
+                        }
 
-                    .${classes.checkbox} {
-                        margin-right: ${spacing[3]}px;
-                    }
+                        .${classes.expand} {
+                            width: 29px;
+                            align-self: stretch;
+                            align-items: center;
+                            justify-content: center;
 
-                    .${classes.label} {
-                        flex: 1;
-                        padding: 6px 0;
+                            .${classes.icon} {
+                                transition: rotate .25s ${easing.easeOut};
+                            }
+                        }
 
-                    }
+                        .${classes.contentWrap} {
+                            flex: 1;
+                            display: flex;
+                            align-items: center;
+                            position: relative;
+                        }
 
-                    .${classes.prefix} {
-                        color: ${text.secondary};
-                        margin-right: ${spacing[2]}px;
-                    }
+                        .${classes.checkbox} {
+                            margin-right: ${spacing[3]}px;
+                        }
+
+                        .${classes.label} {
+                            flex: 1;
+                            padding: 6px 0;
 
-                    .${classes.suffix} {
-                        color: ${text.disabled};
-                        margin-left: ${spacing[2]}px;
+                        }
+
+                        .${classes.prefix} {
+                            color: ${text.secondary};
+                            margin-right: ${spacing[2]}px;
+                        }
+
+                        .${classes.suffix} {
+                            color: ${text.disabled};
+                            margin-left: ${spacing[2]}px;
+                        }
                     }
-                }
-                
-                &:not(:has([data-dragging=true])) { {
-                    .${classes.node} {
-                        &[data-selected=true] {
-                            background-color: ${selectedBg};
 
-                            &:hover {
-                                background-color: ${selectedHover};
+                    &:not(:has([data-dragging=true])) {
+                    {
+                        .${classes.node} {
+                            &[data-selected=true] {
+                                background-color: ${selectedBg};
+
+                                &:hover {
+                                    background-color: ${selectedHover};
+                                }
+
+                                &:active {
+                                    transition: background-color 0s;
+                                    background-color: ${selectedActive};
+                                }
                             }
 
-                            &:active {
-                                transition: background-color 0s;
-                                background-color: ${selectedActive};
+                            &:not([data-disabled=true]):not([data-selected=true]):hover {
+                                background-color: ${hover};
                             }
-                        }
 
-                        &:not([data-disabled=true]):not([data-selected=true]):hover {
-                            background-color: ${hover};
+                            &:not([data-disabled=true]):not([data-selected=true]):active {
+                                transition: background-color 0s;
+                                background-color: ${active};
+                            }
                         }
+                    }
+                    }
 
-                        &:not([data-disabled=true]):not([data-selected=true]):active {
-                            transition: background-color 0s;
-                            background-color: ${active};
+                    &[data-show-line=true] {
+                        .${classes.indent}::after {
+                            content: '';
+                            width: 1px;
+                            height: 100%;
+                            margin-left: 14px;
+                            background-color: ${divider};
                         }
                     }
-                }}
-
-                &[data-show-line=true] {
-                    .${classes.indent}:after {
-                        content: '';
-                        width: 1px;
-                        height: 100%;
-                        margin-left: 14px;
-                        background-color: ${divider};
-                    }
                 }
             `;
         }),