@lynx-js/web-elements 0.2.4

package/src/common-css/linear.css

@@ -0,0 +1,386 @@
+/* Copyright 2024 The Lynx Authors. All rights reserved.
+ Licensed under the Apache License Version 2.0 that can be found in the
+ LICENSE file in the root directory of this source tree. 
+ */
+@property --lynx-display {
+  syntax: "linear | flex";
+  inherits: false;
+  initial-value: linear;
+}
+@property --lynx-linear-weight-sum {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --lynx-linear-weight {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --justify-content-column {
+  syntax: "flex-start|flex-end|center|space-between|space-around";
+  inherits: false;
+  initial-value: flex-start;
+}
+@property --justify-content-column-reverse {
+  syntax: "flex-start|flex-end|center|space-between|space-around";
+  inherits: false;
+  initial-value: flex-start;
+}
+@property --justify-content-row {
+  syntax: "flex-start|flex-end|center|space-between|space-around";
+  inherits: false;
+  initial-value: flex-start;
+}
+@property --justify-content-row-reverse {
+  syntax: "flex-start|flex-end|center|space-between|space-around";
+  inherits: false;
+  initial-value: flex-start;
+}
+@property --align-self-row {
+  syntax: "start|end|center|stretch|auto";
+  inherits: false;
+  initial-value: auto;
+}
+@property --align-self-column {
+  syntax: "start|end|center|stretch|auto";
+  inherits: false;
+  initial-value: auto;
+}
+@property --lynx-linear-weight-basis {
+  syntax: "auto|<number>|<length>";
+  inherits: false;
+  initial-value: auto;
+}
+@property --lynx-linear-orientation {
+  syntax: "<custom-ident>";
+  inherits: false;
+  initial-value: vertical;
+}
+
+@property --flex-direction {
+  syntax: "*";
+  inherits: false;
+}
+@property --flex-wrap {
+  syntax: "*";
+  inherits: false;
+}
+@property --justify-content {
+  syntax: "*";
+  inherits: false;
+}
+@property --align-self {
+  syntax: "*";
+  inherits: false;
+}
+@property --flex-grow {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --flex-shrink {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --flex-basis {
+  syntax: "*";
+  inherits: false;
+  initial-value: auto;
+}
+@property --flex-value {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --linear-justify-content {
+  syntax: "flex-start|flex-end|center|space-between|space-around";
+  inherits: false;
+  initial-value: flex-start;
+}
+
+x-view,
+x-blur-view,
+scroll-view,
+x-foldview-ng,
+x-foldview-slot-ng,
+x-foldview-header-ng,
+x-foldview-toolbar-ng,
+x-foldview-drag-ng,
+x-text,
+inline-text,
+inline-image,
+inline-truncation,
+x-viewpager-ng,
+x-viewpager-item-ng,
+x-canvas,
+x-svg,
+x-image,
+filter-image,
+x-input,
+x-swiper,
+x-swiper-item,
+x-textarea,
+x-list,
+list-item {
+  display: flex;
+  box-sizing: border-box;
+  border-width: 0px;
+  position: relative;
+  overflow: clip;
+  min-width: 0;
+  min-height: 0;
+  border-style: solid;
+}
+
+/**
+ * only enable this toggle logic for those container elements
+ */
+x-view,
+scroll-view,
+x-foldview-header-ng,
+x-foldview-ng,
+x-foldivew-slot-drag-ng,
+x-foldview-slot-ng,
+x-foldview-toolbar-ng,
+x-refresh-footer,
+x-refresh-header,
+x-refresh-view,
+x-swiper-item,
+x-viewpager-item-ng,
+x-viewpager-ng {
+  /*
+  --lynx-display-toggle is compile-time generated.
+  */
+  --lynx-display-toggle: var(--lynx-display-linear);
+  --lynx-display-linear: var(--lynx-display-toggle,);
+  --lynx-display-flex: var(--lynx-display-toggle,);
+  /*
+  --lynx-linear-orientation-toggle is compile-time generated.
+  */
+  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+  --lynx-linear-orientation-horizontal: var(--lynx-linear-orientation-toggle,);
+  --lynx-linear-orientation-vertical: var(--lynx-linear-orientation-toggle,);
+  --lynx-linear-orientation-horizontal-reverse: var(
+    --lynx-linear-orientation-toggle,
+  );
+  --lynx-linear-orientation-vertical-reverse: var(
+    --lynx-linear-orientation-toggle,
+  );
+
+  --linear-flex-direction: var(--lynx-linear-orientation-horizontal, row) var(
+    --lynx-linear-orientation-vertical,
+    column
+  ) var(--lynx-linear-orientation-horizontal-reverse, row-reverse) var(
+    --lynx-linear-orientation-vertical-reverse,
+    column-reverse
+  );
+  --linear-justify-content: var(
+    --lynx-linear-orientation-horizontal,
+    var(--justify-content-row)
+  ) var(--lynx-linear-orientation-vertical, var(--justify-content-column)) var(
+    --lynx-linear-orientation-horizontal-reverse,
+    var(--justify-content-row-reverse)
+  ) var(
+    --lynx-linear-orientation-vertical-reverse,
+    var(--justify-content-column-reverse)
+  );
+}
+x-view,
+x-foldview-header-ng,
+x-foldview-ng,
+x-foldivew-slot-drag-ng,
+x-foldview-slot-ng,
+x-foldview-toolbar-ng,
+x-refresh-footer,
+x-refresh-header,
+x-refresh-view,
+x-swiper-item,
+x-viewpager-item-ng,
+x-viewpager-ng {
+  flex-wrap: var(--lynx-display-linear, nowrap) var(
+    --lynx-display-flex,
+    var(--flex-wrap)
+  );
+  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction)) var(
+    --lynx-display-flex,
+    var(--flex-direction)
+  );
+  justify-content: var(--lynx-display-linear, var(--linear-justify-content))
+    var(--lynx-display-flex, var(--justify-content));
+}
+
+/** For @container
+ *
+ * when the chromuim version is less than 116.0.5806.0, the following code will crash:
+ * ```
+ *  <style>
+      #container {
+        --lynx-display: flex;
+      }
+
+      #target {
+        background-color: red;
+        width: 400px;
+        height: 400px;
+      }
+
+      @container style(--lynx-display: flex) {
+        #target {
+          background-color: green;
+        }
+      }
+    </style>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+    <script>
+      const target = document.getElementById('container');
+      container.style.setProperty('display', 'none');
+      setTimeout(() => {
+        target.style.removeProperty('display');
+      }, 10);
+    </script>
+ * ```
+ * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
+ *
+ * so we limit this feature to chrome 117, safari 18, firefox no:
+ * rex unit: chrome 111, safari 17.2, firefox no
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
+ *  https://caniuse.com/mdn-css_properties_display_is_transitionable
+ *
+ * update this once firefox supports this.
+ * 
+ * If you want to be fully compatible with chrome below 117, you need to use a plugin @lynx-js/web-elements-compat.
+ */
+@supports (content-visibility: auto) and
+  (transition-behavior: allow-discrete) and (width: 1rex) {
+  @container style(--lynx-display: linear) {
+    x-view,
+    x-blur-view,
+    scroll-view,
+    x-foldview-ng,
+    x-foldview-slot-ng,
+    x-foldview-header-ng,
+    x-foldview-toolbar-ng,
+    x-foldview-drag-ng,
+    x-text,
+    inline-text,
+    inline-image,
+    inline-truncation,
+    x-viewpager-ng,
+    x-viewpager-item-ng,
+    x-canvas,
+    x-svg,
+    x-image,
+    filter-image,
+    x-input,
+    x-swiper,
+    x-swiper-item,
+    x-textarea,
+    x-list,
+    list-item {
+      flex-shrink: 0;
+      flex-grow: calc(
+        var(--lynx-linear-weight) / var(--lynx-linear-weight-sum)
+      );
+      flex-basis: var(--lynx-linear-weight-basis);
+    }
+  }
+  @container not style(--lynx-display: linear) {
+    x-view,
+    x-blur-view,
+    scroll-view,
+    x-foldview-ng,
+    x-foldview-slot-ng,
+    x-foldview-header-ng,
+    x-foldview-toolbar-ng,
+    x-foldview-drag-ng,
+    x-text,
+    inline-text,
+    inline-image,
+    inline-truncation,
+    x-viewpager-ng,
+    x-viewpager-item-ng,
+    x-canvas,
+    x-svg,
+    x-image,
+    filter-image,
+    x-input,
+    x-swiper,
+    x-swiper-item,
+    x-textarea,
+    x-list,
+    list-item {
+      flex-grow: var(--flex-grow);
+      flex-shrink: var(--flex-shrink);
+      flex-basis: var(--flex-basis);
+      align-self: var(--align-self);
+    }
+  }
+
+  @container style(--lynx-display: linear) and
+    (style(--lynx-linear-orientation: vertical) or
+      style(--lynx-linear-orientation: vertical-reverse)) {
+    x-view,
+    x-blur-view,
+    scroll-view,
+    x-foldview-ng,
+    x-foldview-slot-ng,
+    x-foldview-header-ng,
+    x-foldview-toolbar-ng,
+    x-foldview-drag-ng,
+    x-text,
+    inline-text,
+    inline-image,
+    inline-truncation,
+    x-viewpager-ng,
+    x-viewpager-item-ng,
+    x-canvas,
+    x-svg,
+    x-image,
+    filter-image,
+    x-input,
+    x-swiper,
+    x-swiper-item,
+    x-textarea,
+    x-list,
+    list-item {
+      align-self: var(--align-self-column);
+    }
+  }
+
+  @container style(--lynx-display: linear) and
+    (style(--lynx-linear-orientation: horizontal) or
+      style(--lynx-linear-orientation: horizontal-reverse)) {
+    x-view,
+    x-blur-view,
+    scroll-view,
+    x-foldview-ng,
+    x-foldview-slot-ng,
+    x-foldview-header-ng,
+    x-foldview-toolbar-ng,
+    x-foldview-drag-ng,
+    x-text,
+    inline-text,
+    inline-image,
+    inline-truncation,
+    x-viewpager-ng,
+    x-viewpager-item-ng,
+    x-canvas,
+    x-svg,
+    x-image,
+    filter-image,
+    x-input,
+    x-swiper,
+    x-swiper-item,
+    x-textarea,
+    x-list,
+    list-item {
+      align-self: var(--align-self-row);
+    }
+  }
+}