@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/mixins/FlexableMixin.css

@@ -1,79 +0,0 @@
-/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
-
-:host{
-  box-sizing: border-box;
-}
-
-:host([flex]) {
-  display:flex;
-}
-
-:host([flex="column"]) {
-  flex-direction: column;
-}
-
-:host(:where([flex][y="start"], [flex="column"][x="start"])) {
-  align-items: flex-start;
-}
-
-:host(:where([flex][y="end"], [flex="column"][x="end"])) {
-  align-items: flex-end;
-}
-
-:host(:where([flex][y="center"], [flex="column"][x="center"])) {
-  align-items: center;
-}
-
-:host(:where([flex][y="between"], [flex="column"][x="between"])) {
-  align-items: space-between;
-}
-
-:host(:where([flex][y="around"], [flex="column"][x="around"])) {
-  align-items: space-around;
-}
-
-:host(:where([flex][y="stretch"], [flex="column"][x="stretch"])) {
-  align-items: stretch;
-}
-
-:host(:where([flex][x="start"], [flex="column"][y="start"])) {
-  justify-content: flex-start;
-}
-
-:host(:where([flex][x="end"], [flex="column"][y="end"])) {
-  justify-content: flex-end;
-}
-
-:host(:where([flex][x="center"], [flex="column"][y="center"])) {
-  justify-content: center;
-}
-
-:host(:where([flex][x="between"], [flex="column"][y="between"])) {
-  justify-content: space-between;
-}
-
-:host(:where([flex][x="stretch"], [flex="column"][y="stretch"])) {
-  justify-content: space-around;
-}
-
-:host([wrap]) {
-  flex-wrap: wrap;
-}
-
-:host([wrap="reverse"]) {
-  flex-wrap: wrap-reverse;
-}
-
-:host([gap="4"]) {gap: 4px;}
-:host([gap="8"]) {gap: 8px;}
-:host([gap="12"]) {gap: 12px;}
-:host([gap="16"]) {gap: 16px;}
-:host([gap="20"]) {gap: 20px;}
-:host([gap="24"]) {gap: 24px;}
-
-:host([padding="4"]) {padding: 4px;}
-:host([padding="8"]) {padding: 8px;}
-:host([padding="12"]) {padding: 12px;}
-:host([padding="16"]) {padding: 16px;}
-:host([padding="20"]) {padding: 20px;}
-:host([padding="24"]) {padding: 24px;}

package/mixins/RippleMixin.css

@@ -1,12 +0,0 @@
-:host {
-  --mdw-state__pressed-opacity: 0;
-}
-
-#ripple-container {
-  position: absolute;
-  inset: 0;
-
-  overflow: hidden;
-
-  pointer-events: none;
-}

package/mixins/ShapeMixin.css

@@ -1,135 +0,0 @@
-:host {
-  --mdw-shape__size: 0px;
-  --mdw-shape__bg: transparent;
-  z-index: 0;
-}
-
-/** Without CSS Mixins, we have to use external attributes to tag hosts **/
-.shape {
-  --mdw-surface__will-change: none;
-  --mdw-shape__size__top-start-size: var(--mdw-shape__size);
-  --mdw-shape__size__top-end-size: var(--mdw-shape__size);
-  --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
-  --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
-
-  /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
-  --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
-  --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
-  --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
-  --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
-  --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
-  --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
-
-  --mdw-shape__rounded: 1;
-  --mdw-shape__mask-border-source: none;
-  --mdw-shape__mask: none;
-  --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
-
-  position: absolute;
-  inset: 0;
-
-  overflow: hidden;
-
-  z-index: -1;
-
-  background-color: var(--mdw-shape__bg, transparent);
-
-  border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
-  border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
-  border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
-  border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-  transition-property: background-color, color;
-  will-change: background-color, color;
-
-}
-
-.shape[outlined] {
-  background-color: transparent;
-}
-
-.shape[color] {
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-}
-
-.shape:is([color="none"], [color="transparent"]) {
-  background-color: transparent;
-}
-
-.shape[shape-style="none"] {
-  --mdw-shape__size: 0px;
-}
-
-.shape[shape-style="extra-small"] {
-  --mdw-shape__size: var(--mdw-shape__extra-small);
-}
-
-.shape[shape-style="small"] {
-  --mdw-shape__size: var(--mdw-shape__small);
-}
-
-.shape[shape-style="medium"] {
-  --mdw-shape__size: var(--mdw-shape__medium);
-}
-
-.shape[shape-style="large"] {
-  --mdw-shape__size: var(--mdw-shape__large);
-}
-
-.shape[shape-style="extra-large"] {
-  --mdw-shape__size: var(--mdw-shape__extra-large);
-}
-
-.shape[shape-style="full"] {
-  --mdw-shape__size: var(--mdw-shape__full);
-}
-
-.shape[shape-style="inherit"] {
-  --mdw-shape__size: inherit;
-}
-
-.shape[shape-top] {
-  --mdw-shape__size__bottom-start-size: 0px;
-  --mdw-shape__size__bottom-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
-
-}
-
-.shape[shape-bottom] {
-  --mdw-shape__size__top-start-size: 0px;
-  --mdw-shape__size__top-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
-}
-
-.shape[shape-start] {
-  --mdw-shape__size__top-end-size: 0px;
-  --mdw-shape__size__bottom-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
-}
-
-.shape[shape-end] {
-  --mdw-shape__size__top-start-size: 0px;
-  --mdw-shape__size__bottom-start-size: 0px;
-  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
-}
-
-@supports(-webkit-mask-box-image: none) {
-  .shape {
-    --mdw-shape__rounded: inherit;
-    --mdw-shape__mask-border-source: inherit;
-
-    -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
-      8 fill /
-      var(--mdw-shape__size)
-      stretch;
-
-    -webkit-mask: var(--mdw-shape__mask);
-
-    transition-duration: 200ms, 200ms, 200ms;
-    transition-property: background-color, color, -webkit-mask-box-image-width;
-    will-change: background-color, color, -webkit-mask-box-image;
-  }
-}

package/mixins/StateMixin.css

@@ -1,82 +0,0 @@
-/* https://m3.material.io/foundations/interaction-states */
-
-:host {
-  --mdw-state__hovered-opacity: 0.08;
-  --mdw-state__focused-opacity: 0.12;
-  --mdw-state__pressed-opacity: 0.12;
-  --mdw-state__dragged-opacity: 0.12;
-  position: relative;
-
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* Remove Firefox inner */
-:host(::-moz-focus-inner) {
-  border: 0;
-}
-
-#state {
-  position: absolute;
-  inset: 0;
-
-  pointer-events: none;
-
-  opacity: calc(
-      var(--mdw-state__hovered-opacity) +
-      var(--mdw-state__focused-opacity) +
-      var(--mdw-state__pressed-opacity) +
-      var(--mdw-state__dragged-opacity)
-    );
-  /* opacity handled by theme engine */
-  background-color: currentColor;
-  border-radius: inherit;
-
-  transition-delay: 0ms;
-  transition-duration: 000ms;
-  transition-property: opacity, color, background-color;
-  will-change: opacity;
-}
-
-#state[touched] {
-  --mdw-state__hovered-opacity: 0;
-  --mdw-state__focused-opacity: 0;
-}
-
-/* Remove Hover State */
-#state:is(
-:not([hovered]),
-[disabled]:not([state-disabled~="hover"]),
-[state-off~="hover"]) {
-  --mdw-state__hovered-opacity: 0;
-}
-
-/* Remove Focus State */
-#state:is(
-:not([focused]),
-[disabled]:not([state-disabled~="focus"]),
-[state-off~="focus"]) {
-  --mdw-state__focused-opacity: 0;
-}
-
-/* Remove Pressed State */
-
-#state:is(
-:not([pressed]),
-[disabled]:not([state-disabled~="pressed"]),
-[state-off~="pressed"]) {
-  --mdw-state__pressed-opacity: 0;
-}
-
-/* Remove Dragged State */
-:host(:not([aria-dragged="true"])) #state,
-#state:is(
-  [disabled]:not([state-disabled~="dragged"]),
-  [state-off~="dragged"]) {
-  --mdw-state__dragged-opacity: 0;
-}
-
-/* Disabled */
-#state[disabled]:not([state-disabled]) {
-  display: none;
-}

package/mixins/SurfaceMixin.css

@@ -1,150 +0,0 @@
-:host {
-
-  /** Filter blur is 1/2 CSS blur */
-
-  /** Reference Properties */
-  /*
-  --mdw-surface__box-shadow__1__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
-  --mdw-surface__box-shadow__2__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
-  --mdw-surface__box-shadow__3__umbra: 0px 1px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
-  --mdw-surface__box-shadow__4__umbra: 0px 2px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
-  --mdw-surface__box-shadow__5__umbra: 0px 4px 4px 0px rgba(var(--mdw-color__shadow), 0.30);
-
-  --mdw-surface__filter__0__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0));
-  --mdw-surface__filter__1__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
-  --mdw-surface__filter__2__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
-  --mdw-surface__filter__3__umbra: drop-shadow(0px 1px 1.5px rgba(var(--mdw-color__shadow), 0.30));
-  --mdw-surface__filter__4__umbra: drop-shadow(0px 2px 1.5px rgba(var(--mdw-color__shadow), 0.30));
-  --mdw-surface__filter__5__umbra: drop-shadow(0px 4px 2px rgba(var(--mdw-color__shadow), 0.30));
-
-  --mdw-surface__box-shadow__1__penumbra: 0px 1px 3px 1px  rgba(var(--mdw-color__shadow), 0.15);
-  --mdw-surface__box-shadow__2__penumbra: 0px 2px 6px 2px  rgba(var(--mdw-color__shadow), 0.15);
-  --mdw-surface__box-shadow__3__penumbra: 0px 4px 8px 3px  rgba(var(--mdw-color__shadow), 0.15);
-  --mdw-surface__box-shadow__4__penumbra: 0px 6px 10px 4px rgba(var(--mdw-color__shadow), 0.15);
-  --mdw-surface__box-shadow__5__penumbra: 0px 8px 12px 6px rgba(var(--mdw-color__shadow), 0.15);
-
-  --mdw-surface__filter__0__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0));
-  --mdw-surface__filter__1__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0.25));
-  --mdw-surface__filter__2__penumbra: drop-shadow(0px 2px 5px rgba(var(--mdw-color__shadow), 0.25));
-  --mdw-surface__filter__3__penumbra: drop-shadow(0px 4px 7px rgba(var(--mdw-color__shadow), 0.263));
-  --mdw-surface__filter__4__penumbra: drop-shadow(0px 6px 9px rgba(var(--mdw-color__shadow), 0.27));
-  --mdw-surface__filter__5__penumbra: drop-shadow(0px 8px 12px rgba(var(--mdw-color__shadow), 0.30));
-
-  --mdw-surface__filter__0: var(--mdw-surface__shadow__0__umbra) var(--mdw-surface__shadow__0__penumbra);
-  --mdw-surface__filter__1: var(--mdw-surface__shadow__1__umbra) var(--mdw-surface__shadow__1__penumbra);
-  --mdw-surface__filter__2: var(--mdw-surface__shadow__2__umbra) var(--mdw-surface__shadow__2__penumbra);
-  --mdw-surface__filter__3: var(--mdw-surface__shadow__3__umbra) var(--mdw-surface__shadow__3__penumbra);
-  --mdw-surface__filter__4: var(--mdw-surface__shadow__4__umbra) var(--mdw-surface__shadow__4__penumbra);
-  --mdw-surface__filter__5: var(--mdw-surface__shadow__5__umbra) var(--mdw-surface__shadow__5__penumbra);
-  */
-
-  /** Flatten for performance */
-  --mdw-surface__shadow__0: drop-shadow(0px 1px 001px rgba(0,0,0,000)) drop-shadow(0px 1px 2.5px rgba(0,0,0,00000));
-  --mdw-surface__shadow__1: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 1px 2.5px rgba(0,0,0,0.250));
-  --mdw-surface__shadow__2: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 2px 005px rgba(0,0,0,0.250));
-  --mdw-surface__shadow__3: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 4px 007px rgba(0,0,0,0.263));
-  --mdw-surface__shadow__4: drop-shadow(0px 2px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 6px 009px rgba(0,0,0,0.270));
-  --mdw-surface__shadow__5: drop-shadow(0px 4px 2.0px rgba(0,0,0,0.3)) drop-shadow(0px 8px 012px rgba(0,0,0,0.300));
-
-  --mdw-surface__tint__1: 0.05;
-  --mdw-surface__tint__2: 0.08;
-  --mdw-surface__tint__3: 0.11;
-  --mdw-surface__tint__4: 0.12;
-  --mdw-surface__tint__5: 0.14;
-
-  /** Configurables */
-
-  --mdw-surface__shadow__resting: none;
-  --mdw-surface__shadow: var(--mdw-surface__shadow__resting);
-  --mdw-surface__tint: 0;
-  --mdw-surface__tint__raised: 0;
-  z-index: 0;
-}
-
-:host([elevation="0"]) {
-  --mdw-surface__tint: 0;
-  --mdw-surface__shadow__resting: none;
-}
-
-:host([elevation="1"]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-}
-
-:host([elevation="2"]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__2);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__2);
-}
-
-:host([elevation="3"]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__3);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-}
-
-:host([elevation="4"]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__4);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__4);
-}
-
-:host([elevation="5"]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__5);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__5);
-}
-
-:host([elevation]) {
-  --mdw-surface__tint__raised: var(--mdw-surface__tint);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
-}
-
-.surface {
-  position: absolute;
-  inset: 0;
-
-  pointer-events: none;
-
-  filter: var(--mdw-surface__shadow);
-  z-index: -1;
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-  transition-property: filter;
-  transition-timing-function: linear;
-  will-change: filter;
-}
-
-.surface[raised] {
-  filter: var(--mdw-surface__shadow__raised, var(--mdw-surface__shadow__resting));
-}
-
-.surface[disabled] {
-  filter:none;
-}
-
-.surface-tint {
-  position: absolute;
-  inset: 0;
-
-  pointer-events: none;
-
-  opacity: var(--mdw-surface__tint, 0);
-
-  background-color: rgb(var(--mdw-color__primary));
-  border-radius: inherit;
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-  transition-property: opacity;
-  will-change: opacity;
-}
-
-.surface-tint[raised] {
-  opacity: var(--mdw-surface__tint__raised, 0);
-}
-
-.surface-tint[pressed] {
-  opacity: var(--mdw-surface__tint, 0);
-}
-
-.surface-tint[color]:not([color|="surface"]) {
-  display: none;
-}