@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/mixins/TextFieldMixin.css

@@ -1,657 +0,0 @@
-/* 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: inline-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;
-}