back to wip

userlike · Oct 29, 2023 · 83e2e2e · 83e2e2e
1 parent 0057952
commit 83e2e2e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 61 deletions.
diff --git a/packages/storybook-web/src/Example.stories.ts b/packages/storybook-web/src/Example.stories.ts
@@ -22,14 +22,13 @@ export const Example = () => html`
     }
 
     .c2 {
-      // min-width: 100px;
       background: green;
     }
   </style>
 
-  <x-flex style="flex-direction:row;align-items:flex-end;">
+  <x-flex direction="row" align-items="flex-end">
     <x-flex-item>
-      <x-flex style="flex-direction:column;">
+      <x-flex direction="column">
         <x-flex-item> C1.1 </x-flex-item>
         <x-flex-item> C1.2 </x-flex-item>
       </x-flex>

diff --git a/packages/web/src/Flex.ts b/packages/web/src/Flex.ts
@@ -13,18 +13,14 @@ export class Flex extends LitElement {
   rowGap?: string;
 
   static styles = css`
-    /**
-     * Display
-     * ===================================
-     */
     :host {
       display: flex;
+      align-items: stretch;
     }
 
     :host([inline]) {
       display: inline-flex;
     }
-    /* =================================== */
 
     /**
      * Direction
@@ -50,11 +46,6 @@ export class Flex extends LitElement {
       --moblin-direction: row;
     }
 
-    ::slotted(x-flex-item) {
-      --moblin-direction: inherit;
-      flex-direction: var(--moblin-direction);
-    }
-
     /* =================================== */
 
     /**
@@ -144,33 +135,6 @@ export class Flex extends LitElement {
       --moblin-child-grow: 1;
     }
 
-    ::slotted(x-flex-item) {
-      --moblin-align: inherit;
-    }
-
-    ::slotted(x-flex-item[align-self="flex-start"]) {
-      --moblin-align: flex-start;
-      --moblin-child-grow: 0;
-    }
-
-    ::slotted(x-flex-item[align-self="flex-end"]) {
-      --moblin-align: flex-end;
-      --moblin-child-grow: 0;
-    }
-
-    ::slotted(x-flex-item[align-self="center"]) {
-      --moblin-align: center;
-      --moblin-child-grow: 0;
-    }
-
-    ::slotted(x-flex-item[align-self="stretch"]) {
-      --moblin-align: stretch;
-      --moblin-child-grow: 1;
-    }
-
-    ::slotted(x-flex-item) {
-      justify-content: var(--moblin-align);
-    }
     /* =================================== */
 
     /**
@@ -190,12 +154,6 @@ export class Flex extends LitElement {
       --moblin-child-min-height: auto;
     }
 
-    ::slotted(x-flex-item:not([shrink="0"])) {
-      --moblin-item-min-width: inherit;
-      --moblin-item-min-height: inherit;
-      min-width: var(--moblin-item-min-width);
-      min-height: var(--moblin-item-min-height);
-    }
     /* =================================== */
 
     /**

diff --git a/packages/web/src/FlexItem.ts b/packages/web/src/FlexItem.ts
@@ -14,34 +14,54 @@ export class FlexItem extends LitElement {
 
   static styles = css`
     :host {
+      --moblin-direction: inherit;
+      --moblin-align: inherit;
+      --moblin-item-min-width: inherit;
+      --moblin-item-min-height: inherit;
+      --moblin-child-min-width: inherit;
+      --moblin-child-min-height: inherit;
+
       display: flex;
+      flex-direction: var(--moblin-direction);
+      justify-content: var(--moblin-align);
+      align-items: stretch;
     }
 
-    ::slotted(*) {
-      flex-shrink: 1;
-      flex-basis: auto;
+    :host(:not([shrink="0"])) {
+      min-width: var(--moblin-item-min-width);
+      min-height: var(--moblin-item-min-height);
     }
 
-    /**
-     * Flex grow handling for align=stretch
-     */
     ::slotted(*) {
       --moblin-child-grow: inherit;
-      flex-grow: var(--moblin-child-grow, 0);
-    }
-
-    /**
-     * Child min width/height normalization
-     * ===================================
-     */
-    ::slotted(*) {
       --moblin-child-min-width: inherit;
       --moblin-child-min-height: inherit;
+      flex-shrink: 1;
+      flex-basis: auto;
+      flex-grow: var(--moblin-child-grow, 0);
       min-width: var(--moblin-child-min-width);
       min-height: var(--moblin-child-min-height);
     }
 
-    /* =================================== */
+    :host([align-self="flex-start"]) {
+      --moblin-align: flex-start;
+      --moblin-child-grow: 0;
+    }
+
+    :host([align-self="flex-end"]) {
+      --moblin-align: flex-end;
+      --moblin-child-grow: 0;
+    }
+
+    :host([align-self="center"]) {
+      --moblin-align: center;
+      --moblin-child-grow: 0;
+    }
+
+    :host([align-self="stretch"]) {
+      --moblin-align: stretch;
+      --moblin-child-grow: 1;
+    }
 
     /**
      * extended inheritance