@limetech/lime-elements 35.0.0-next.2 → 35.0.0-next.20

package/dist/collection/components/icon-button/icon-button.css

@@ -4,41 +4,42 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-@media (pointer: coarse) {
-  .mdc-icon-button:hover::before {
-    opacity: 0;
-  }
-}
-/**
- * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
- */
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host([hidden]) {
-  display: none;
+.mdc-icon-button {
+  font-size: 24px;
+  width: 48px;
+  height: 48px;
+  padding: 12px;
 }
-
-:host([disabled]) {
-  pointer-events: none;
+.mdc-icon-button.mdc-icon-button--reduced-size {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
 }
-
-:host([elevated]) .mdc-icon-button {
-  padding: 0.5625rem;
+.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-right: 4px;
+  margin-left: 4px;
 }
-:host([elevated]) limel-icon {
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  box-shadow: var(--button-shadow-normal);
+.mdc-icon-button .mdc-icon-button__touch {
+  position: absolute;
+  top: 50%;
+  height: 48px;
+  /* @noflip */
+  /*rtl:ignore*/
+  left: 50%;
+  width: 48px;
+  transform: translate(-50%, -50%);
 }
-:host([elevated]) limel-icon:hover {
-  box-shadow: var(--button-shadow-hovered);
+.mdc-icon-button:disabled {
+  color: rgba(0, 0, 0, 0.38);
+  /* @alternate */
+  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
 }
-:host([elevated]) limel-icon:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+.mdc-icon-button svg,
+.mdc-icon-button img {
+  width: 24px;
+  height: 24px;
 }
 
 .mdc-icon-button {
@@ -50,29 +51,32 @@
   background-color: transparent;
   fill: currentColor;
   color: inherit;
-  font-size: 24px;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  width: 48px;
-  height: 48px;
-  padding: 12px;
-}
-.mdc-icon-button svg,
-.mdc-icon-button img {
-  width: 24px;
-  height: 24px;
+  overflow: visible;
 }
-.mdc-icon-button:disabled {
-  color: rgba(0, 0, 0, 0.38);
-  /* @alternate */
-  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
+.mdc-icon-button .mdc-icon-button__touch {
+  position: absolute;
+  top: 50%;
+  height: 48px;
+  /* @noflip */
+  /*rtl:ignore*/
+  left: 50%;
+  width: 48px;
+  transform: translate(-50%, -50%);
 }
 .mdc-icon-button:disabled {
   cursor: default;
   pointer-events: none;
 }
 
+.mdc-icon-button--display-flex {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
 .mdc-icon-button__icon {
   display: inline-block;
 }
@@ -80,6 +84,11 @@
   display: none;
 }
 
+.mdc-icon-button--touch {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .mdc-icon-button--on .mdc-icon-button__icon {
   display: none;
 }
@@ -124,84 +133,91 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   will-change: transform, opacity;
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before,
+.mdc-icon-button .mdc-icon-button__ripple::after {
   position: absolute;
   border-radius: 50%;
   opacity: 0;
   pointer-events: none;
   content: "";
 }
-.mdc-icon-button::before {
+.mdc-icon-button .mdc-icon-button__ripple::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
   /* @alternate */
   z-index: var(--mdc-ripple-z-index, 1);
 }
-.mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::after {
   z-index: 0;
   /* @alternate */
   z-index: var(--mdc-ripple-z-index, 0);
 }
-.mdc-icon-button.mdc-ripple-upgraded::before {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
-.mdc-icon-button.mdc-ripple-upgraded--unbounded::after {
+.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
-.mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after {
+.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after {
   animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
 }
-.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after {
+.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after {
   animation: mdc-ripple-fg-opacity-out 150ms;
   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before,
+.mdc-icon-button .mdc-icon-button__ripple::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
-.mdc-icon-button.mdc-ripple-upgraded::before, .mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-icon-button.mdc-ripple-upgraded::after {
+.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-icon-button::before, .mdc-icon-button::after {
+.mdc-icon-button .mdc-icon-button__ripple::before, .mdc-icon-button .mdc-icon-button__ripple::after {
   background-color: #000;
   /* @alternate */
   background-color: var(--mdc-ripple-color, #000);
 }
-.mdc-icon-button:hover::before, .mdc-icon-button.mdc-ripple-surface--hover::before {
+.mdc-icon-button:hover .mdc-icon-button__ripple::before, .mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
   opacity: 0.04;
   /* @alternate */
   opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-icon-button.mdc-ripple-upgraded--background-focused::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus::before {
+.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
   opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-icon-button:not(.mdc-ripple-upgraded)::after {
+.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
   transition: opacity 150ms linear;
 }
-.mdc-icon-button:not(.mdc-ripple-upgraded):active::after {
+.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
@@ -210,6 +226,47 @@
 .mdc-icon-button.mdc-ripple-upgraded {
   --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
+.mdc-icon-button .mdc-icon-button__ripple {
+  pointer-events: none;
+  z-index: 1;
+}
+
+@media (pointer: coarse) {
+  .mdc-icon-button:hover::before {
+    opacity: 0;
+  }
+}
+/**
+ * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
+ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+:host([elevated]) .mdc-icon-button {
+  padding: 0.5625rem;
+}
+:host([elevated]) limel-icon {
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+}
+:host([elevated]) limel-icon:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+:host([elevated]) limel-icon:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
 
 .mdc-icon-button:disabled {
   color: var(--mdc-theme-text-disabled-on-background);

package/dist/collection/components/icon-button/icon-button.js

@@ -67,6 +67,7 @@ export class IconButton {
       iconAttributes.size = 'small';
     }
     return (h("button", Object.assign({ class: "mdc-icon-button", disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes),
+      h("div", { class: "mdc-icon-button__ripple" }),
       h("limel-icon", Object.assign({ name: this.icon }, iconAttributes))));
   }
   static get is() { return "limel-icon-button"; }