@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/TextFieldMixin.css

@@ -0,0 +1,657 @@
+/* https://m3.material.io/components/text-fields/specs */
+
+/**
+ * States:      Enabled            / Hover              / Focus              / Error              / Error Hover        / Error Focus
+ * Input:       on-surface         / on-surface         / on-surface         / on-surface         / on-surface         / on-surface
+ * Inline:      on-surface-variant / on-surface-variant / on-surface-variant / on-surface-variant / on-surface-variant / on-surface-variant
+ * Label:       on-surface-variant / on-surface*        / ink                / error              / on-error-container / error
+ * Indicator:   on-surface-variant / on-surface         / ink                / error              / on-error-container / error
+ * Caret:       (any)              / (any)              / ink                / (any)              / (any)              / error
+ * Outline:     outline            / on-surface         / ink                / error              / on-error-container / error
+ * Selection:   on-*               / on-*               / ink                / error              / on-error-container / error
+ *
+ *
+ * *Filled hovered unpopulated label may be on-surface-variant instead
+ *
+ * Input: Always on-surface
+ * Inline: Always on-surface-variant
+ * Indicator: same as label
+ * Label: same as indicator
+ * Outline: outline default, same as label+indicator on :hover or :focus
+ * Caret: same as label+indicator+outline (cannot inherit color or use currentColor)
+ * Selection:  (cannot inherit color or use currentColor)
+ */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__extra-small);
+  /* --mdw-shape__size: 8px; */
+  /* --mdw-shape__size__bottom-start-size: var(--mdw-shape__size); */
+  /* --mdw-shape__size__bottom-end-size: var(--mdw-shape__size); */
+  --mdw-text-field__ratio: calc(var(--mdw-density) * 0.125 + 1);
+
+  --control__margin-top: calc(var(--mdw-typescale__body-small__line-height) / 2);
+  --control__padding-top: calc((var(--mdw-text-field__ratio) * 16px) - calc(var(--mdw-typescale__body-small__line-height) / 2));
+  --control__padding-bottom: calc(var(--mdw-text-field__ratio) * 16px);
+  --control__margin-bottom: 0px;
+
+  --inline-color: rgb(var(--mdw-color__on-surface-variant));
+
+  --descriptor-opacity: 0.5;
+  --mdw-ink: var(--mdw-color__primary);
+  --mdw-bg: var(--mdw-color__surface-variant);
+
+  --mdw-type__font: var(--mdw-typescale__body-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+
+  display: block;
+
+  /* State layer */
+  color: rgb(var(--mdw-color__on-surface));
+
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+}
+
+:host([icon]) {
+  --padding-inline-start: 12px;
+}
+
+:host([trailing-icon]) {
+  --padding-inline-end: 12px;
+}
+
+:host(:is([color], [ink])) {
+  background-color: transparent;
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#label {
+  position: relative;
+
+  display: flex;
+
+  align-items: center;
+  overflow: visible;
+
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+
+  cursor: inherit;
+
+  z-index: 0;
+
+  background-color: transparent;
+
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  letter-spacing: inherit;
+
+  transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+#label:is([filled],[color]) {
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#label[outlined] {
+  background-color: transparent;
+}
+
+#label-text,
+#indicator {
+  color: rgb(var(--mdw-color__on-surface-variant))
+}
+
+:is(#label-text, #indicator)[focused] {
+  color: rgb(var(--mdw-ink))
+}
+
+#label[icon] {
+  padding-inline-start: 12px;
+}
+
+#label[trailing-icon] {
+  padding-inline-end: 12px;
+}
+
+#label[focused] {
+  transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+#prefix,
+#suffix,
+#control::placeholder {
+  opacity: var(--descriptor-opacity);
+
+  color: var(--inline-color);
+
+  transition-duration: inherit;
+  transition-property: opacity;
+  transition-timing-function: inherit;
+  will-change: opacity;
+}
+
+:host([label]:is([filled],[outlined])) {
+  --descriptor-opacity: 0;
+}
+
+#control {
+  position: relative;
+  inset: auto;
+  align-self: flex-start;
+
+  display: inline;
+
+  box-sizing: border-box;
+
+  block-size: auto;
+  min-block-size: none;
+  inline-size: 100%;
+  min-inline-size: none;
+  flex: 1;
+  border-block-start: solid var(--control__margin-top) transparent;
+  border-block-end: solid var(--control__margin-bottom) transparent;
+  padding-block: var(--control__padding-top) var(--control__padding-bottom);
+
+  appearance: none;
+  caret-color: rgb(var(--mdw-ink));
+  cursor: auto;
+
+  transform: none;
+
+  visibility: visible;
+
+  background-color: transparent;
+  border-color: transparent;
+  color: inherit;
+  /* rgb(var(--mdw-color__on-surface)); */
+
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-family: inherit;
+  letter-spacing: inherit;
+
+  transition-duration: inherit;
+  transition-property: color;
+  transition-timing-function: inherit;
+}
+
+#suffix,
+#prefix {
+  /* Symmetrical to allow centering */
+  margin-block: var(--control__margin-top) var(--control__margin-bottom);
+  padding-block: var(--control__padding-top) var(--control__padding-bottom);
+}
+
+/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+#control::selection {
+  background-color: rgb(var(--mdw-ink));
+  color: rgb(var(--mdw-color__surface));
+}
+
+#state {
+  --mdw-state__focus-opacity: 0;
+  --mdw-state__pressed-opacity: 0;
+}
+
+mdw-icon {
+  --mdw-icon__size: 24px;
+  align-self: center;
+
+  color: var(--inline-color);
+}
+
+#icon {
+  order: -2;
+
+  margin-inline-end: 16px;
+
+  font-size: 24px;
+}
+
+#prefix {
+  order: -1;
+}
+
+#suffix {
+  order: 1;
+}
+
+#trailing-icon {
+  order: 2;
+
+  margin-inline-start: 16px;
+}
+
+#indicator {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+
+  border-block-end: 2px solid currentColor;
+
+  pointer-events: none;
+
+  transform: scaleY(0.5);
+  z-index: 1; /* Force new layer to avoid repaint */
+
+  transition-duration: inherit;
+  transition-property: transform;
+  transition-timing-function: inherit;
+  will-change: transform;
+}
+
+#indicator[focused] {
+  transform: scaleY(1);
+
+}
+
+/** Label Text **/
+
+#label-text {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+
+  display: block;
+  overflow-x: clip;
+  overflow-y: visible;
+
+  padding-inline: 16px;
+
+  pointer-events: none;
+
+  opacity: 1;
+  transform: translateY(calc((var(--control__margin-top) + var(--control__padding-top) + 100% + var(--control__padding-bottom) + var(--control__margin-bottom)) / 2)) translateY(-50%);
+  z-index: 4;
+  /* FireFox bug */
+
+  color: rgb(var(--mdw-color__on-surface-variant));
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  transition-duration: 200ms;
+  transition-property: inset-inline-start, font-size, transform;
+  /* transition-timing-function: inherit; */
+  /*Expand*/
+
+  will-change: inset-inline-start, font-size, transform;
+}
+
+@supports (-moz-appearance:none ) {
+  #label-text {
+    /* Firefox clips Y as well as X */
+    overflow-x: hidden;
+  }
+}
+
+#label-text[focused] {
+  color: rgb(var(--mdw-ink));
+}
+
+#label-text[icon] {
+  inset-inline-start: calc(12px + 24px);
+}
+
+#label-text[trailing-icon] {
+  inset-inline-end: calc(24px + 12px);
+}
+
+#label-text:is([focused], [populated]) {
+  transform: translateY(calc(var(--mdw-text-field__ratio) * 8px));
+
+  font: var(--mdw-typescale__body-small__font);
+  /* Not spec: Should only use font-size and line-height */
+  letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+}
+
+#label-text[outlined]:is([focused], [populated]) {
+  inset-inline: 0;
+
+  transform: translateY(-50%);
+}
+
+#label[label][outlined] {
+  /** Guard against bleed */
+  --mdw-shape__size__top-start-size: min(var(--mdw-shape__size), 12px);
+  --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
+  --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
+  --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
+  -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
+}
+
+:is(#prefix, #suffix):is([focused], [populated]) {
+  opacity: 1;
+}
+
+/* If no label */
+#control:is(:focus, :not(:placeholder-shown))::placeholder {
+  opacity: 0.70;
+}
+
+#control[input-suffix] {
+  text-align: end;
+}
+
+/** Outlined **/
+
+#outline::before {
+  content: none;
+}
+
+.outline-section {
+  position: relative;
+
+  border: 1px solid currentColor;
+}
+
+.outline-section[focused] {
+  border-width: 2px;
+}
+
+#outline-left {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-right-width: 0;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-top-left-radius: inherit;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-bottom-left-radius: inherit;
+}
+
+#outline-right {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-left-width: 0;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-top-right-radius: inherit;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  border-bottom-right-radius: inherit;
+}
+
+#outline {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 12px minmax(0,auto) minmax(12px, 1fr);
+
+  color: rgb(var(--mdw-color__outline));
+
+
+}
+
+#outline[hovered] {
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#outline[focused] {
+  color: rgb(var(--mdw-ink));
+}
+
+.outline-section {
+  min-inline-size: 12px;
+}
+
+.outline-section::before,
+.outline-section::after {
+  max-inline-size: none;
+}
+
+.outline-left {
+  grid-column: calc(2 - var(--mdw-dir, 1)) / span 1; /* 1 on LTR, 3 on RTL */
+}
+
+.outline-right {
+  grid-column: calc(2 + var(--mdw-dir, 1)) / span 1;
+}
+
+#gap {
+  position: relative;
+
+  display: inline-block;
+  overflow: clip hidden;
+
+  max-inline-size: 100%;
+  grid-column: 2;
+
+  font: var(--mdw-typescale__body-small__font);
+  /* Not spec: Should only use font-size and line-height */
+  letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+
+  /* Close gap */
+  transition-duration: inherit;
+  transition-property: padding;
+  transition-timing-function: inherit;
+}
+
+#gap-label {
+  display: inline-block;
+  overflow: clip hidden;
+
+  padding-inline: 4px;
+
+  color:transparent;
+
+  white-space: nowrap;
+}
+
+#gap::after {
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  border-block-end: solid 1px currentColor;
+}
+
+#gap[focused]::after {
+  border-block-end-width: 2px;
+}
+
+#gap-slot {
+  position: absolute;
+  inset: 0;
+
+}
+
+#gap-slot::before,
+#gap-slot::after {
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  border-block-start: solid 1px currentColor;
+
+  transition: transform 200ms;
+  will-change: transform;
+}
+
+#gap-slot[focused]::before,
+#gap-slot[focused]::after {
+  border-block-start-width: 2px;
+}
+
+@supports(-webkit-mask-box-image: none) {
+  #outline[focused] {
+    /** Fake 2px outline */
+    filter:
+      drop-shadow(1px 0px 0px currentColor)
+      drop-shadow(0px 1px 0px currentColor)
+      drop-shadow(-1px 0px 0px currentColor)
+      drop-shadow(0px -1px 0px currentColor);
+  }
+
+  #outline::before {
+    content: '';
+
+    position: absolute;
+    inset: 0;
+
+    grid-column: calc(2 - var(--mdw-dir, 1)) / span 1;
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    margin-right: -0.99px;
+    border: none;
+
+    background-color: currentColor;
+    -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
+      8 fill /
+      auto
+      stretch;
+    -webkit-mask-box-image-width: auto 0 auto auto;
+  }
+
+  #outline::after {
+    grid-column: calc(2 + var(--mdw-dir, 1)) / span 1;
+    grid-row: 1;
+
+    /* stylelint-disable-next-line liberty/use-logical-spec */
+    margin-left: -0.99px;
+    -webkit-mask-box-image-width: auto auto auto 0;
+  }
+
+  .outline-section {
+    border: none;
+  }
+
+  #gap::after {
+    border: none;
+
+    background-color: currentColor;
+    -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
+      8 fill /
+      auto
+      stretch;
+    -webkit-mask-box-image-width: 0 0 auto 0;
+  }
+
+  #gap-slot::before,
+  #gap-slot::after {
+    border: none;
+
+    background-color: currentColor;
+
+    -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
+      8 fill /
+      auto
+      stretch;
+    -webkit-mask-box-image-width: auto 0 0 0;
+  }
+}
+
+#gap-slot::before {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  margin-right: -0.99px;
+
+  transform: var(--gap-transform, scaleX(0.5));
+  transform-origin: 0 0;
+}
+
+#gap-slot::after {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  margin-left: -0.99px;
+
+  transform: var(--gap-transform, scaleX(0.5));
+  transform-origin: 100% 0;
+}
+
+#gap:is([focused], [populated]) {
+  /* Open gap */
+  --gap-transform: scaleX(0);
+}
+
+#gap:empty {
+  padding: 0;
+}
+
+#label[label][filled] {
+  align-items: flex-start;
+}
+
+:host([filled]) {
+  --mdw-shape__size__bottom-start-size: 0px;
+  --mdw-shape__size__bottom-end-size: 0px;
+  --mdw-text-field__ratio: calc(var(--mdw-density) * 0.25 + 1);
+}
+
+:host(:is([filled][label])) {
+  --control__margin-top: calc((var(--mdw-text-field__ratio) * 8px) + var(--mdw-typescale__body-small__line-height));
+  --control__padding-top: 0px;
+  --control__padding-bottom: calc(var(--mdw-text-field__ratio) * 4px);
+  --control__margin-bottom: calc(var(--mdw-text-field__ratio) * 4px);
+}
+
+#supporting {
+  min-block-size: var(--mdw-typescale__body-small__line-height);
+  margin-block-start: 4px;
+  margin-inline: 16px;
+
+  font-weight: var(--mdw-typescale__body-small__font-weight); /* Not spec */
+  font-size: var(--mdw-typescale__body-small__font-size);
+  line-height: var(--mdw-typescale__body-small__line-height);
+  font-family: var(--mdw-typescale__body-small__font-family); /* Not spec */
+  letter-spacing: var(--mdw-typescale__body-small__letter-spacing); /* Not spec */
+}
+
+/* Error States */
+
+#control[errored] {
+  caret-color: rgb(var(--mdw-color__error));
+}
+
+#control[errored]::selection {
+  background-color: rgb(var(--mdw-color__on-error-container));
+}
+
+:is(#indicator, #label-text, #supporting, #outline)[errored] {
+  color: rgb(var(--mdw-color__error));
+}
+
+:is(#indicator, #label-text, #supporting, #outline)[errored]:where([hovered]) {
+  color: rgb(var(--mdw-color__on-error-container));
+}
+
+:is(#indicator, #label-text, #supporting, #outline)[errored]:where([focused]) {
+  color: rgb(var(--mdw-color__error));
+}
+
+/* stylelint-disable-next-line selector-max-compound-selectors */
+#label[disabled],
+#label[disabled] #control {
+  cursor: not-allowed;
+}
+
+#outline[disabled] {
+  color: rgba(var(--mdw-color__outline), 0.12);
+}
+
+#label-text[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#supporting[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+.inline[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+mdw-icon[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#label[disabled] {
+  background-color: rgba(var(--mdw-color__on-surface), calc(0.04));
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#indicator[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#label[disabled][outlined] {
+  background-color: transparent;
+}