From 4847b525a3411947e731331bd980f04e799b8383 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Wed, 24 Aug 2022 12:55:46 -0500 Subject: [PATCH] Add missing icon styles --- .../assets/css/src/components/icon-button.css | 264 ++++++++++++++++++ theme/assets/css/src/material-components.css | 2 +- 2 files changed, 265 insertions(+), 1 deletion(-) create mode 100644 plugin/assets/css/src/components/icon-button.css diff --git a/plugin/assets/css/src/components/icon-button.css b/plugin/assets/css/src/components/icon-button.css new file mode 100644 index 00000000..1455804a --- /dev/null +++ b/plugin/assets/css/src/components/icon-button.css @@ -0,0 +1,264 @@ +/** + * Copyright 2022 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.mdc-icon-button { + display: inline-block; + position: relative; + box-sizing: border-box; + border: none; + outline: none; + background-color: transparent; + fill: currentColor; + color: inherit; + font-size: 24px; + text-decoration: none; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 48px; + height: 48px; + padding: 12px; +} + +.mdc-icon-button svg, +.mdc-icon-button img { + width: 24px; + height: 24px; +} + +.mdc-icon-button:disabled { + color: rgba(0, 0, 0, 0.38); + + /* @alternate */ + color: rgba(var(--md-sys-color-on-surface-rgb), 0.38); +} + +.mdc-icon-button:disabled { + cursor: default; + pointer-events: none; +} + +.mdc-icon-button__icon { + display: inline-block; +} + +.mdc-icon-button__icon.mdc-icon-button__icon--on { + display: none; +} + +.mdc-icon-button--on .mdc-icon-button__icon { + display: none; +} + +.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on { + display: inline-block; +} + +@-webkit-keyframes mdc-ripple-fg-radius-in { + + from { + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + + to { + -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} + +@keyframes mdc-ripple-fg-radius-in { + + from { + -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + -webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1); + } + + to { + -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + } +} + +@-webkit-keyframes mdc-ripple-fg-opacity-in { + + from { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + opacity: 0; + } + + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} + +@keyframes mdc-ripple-fg-opacity-in { + + from { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + opacity: 0; + } + + to { + opacity: var(--mdc-ripple-fg-opacity, 0); + } +} + +@-webkit-keyframes mdc-ripple-fg-opacity-out { + + from { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + + to { + opacity: 0; + } +} + +@keyframes mdc-ripple-fg-opacity-out { + + from { + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + opacity: var(--mdc-ripple-fg-opacity, 0); + } + + to { + opacity: 0; + } +} + +.mdc-icon-button { + --mdc-ripple-fg-size: 0; + --mdc-ripple-left: 0; + --mdc-ripple-top: 0; + --mdc-ripple-fg-scale: 1; + --mdc-ripple-fg-translate-end: 0; + --mdc-ripple-fg-translate-start: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.mdc-icon-button::before, +.mdc-icon-button::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} + +.mdc-icon-button::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; +} + +.mdc-icon-button.mdc-ripple-upgraded::before { + -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} + +.mdc-icon-button.mdc-ripple-upgraded::after { + top: 0; + + /* @noflip */ + left: 0; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: center center; + transform-origin: center center; +} + +.mdc-icon-button.mdc-ripple-upgraded--unbounded::after { + top: var(--mdc-ripple-top, 0); + + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} + +.mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after { + -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; + animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards; +} + +.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after { + -webkit-animation: mdc-ripple-fg-opacity-out 150ms; + animation: mdc-ripple-fg-opacity-out 150ms; + -webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); + transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1)); +} + +.mdc-icon-button::before, +.mdc-icon-button::after { + top: calc(50% - 50%); + + /* @noflip */ + left: calc(50% - 50%); + width: 100%; + height: 100%; +} + +.mdc-icon-button.mdc-ripple-upgraded::before, +.mdc-icon-button.mdc-ripple-upgraded::after { + top: var(--mdc-ripple-top, calc(50% - 50%)); + + /* @noflip */ + 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 { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} + +.mdc-icon-button::before, +.mdc-icon-button::after { + background-color: #000; +} + +.mdc-icon-button:hover::before { + opacity: 0.04; +} + +.mdc-icon-button.mdc-ripple-upgraded--background-focused::before, +.mdc-icon-button:not(.mdc-ripple-upgraded):focus::before { + transition-duration: 75ms; + opacity: 0.12; +} + +.mdc-icon-button:not(.mdc-ripple-upgraded)::after { + transition: opacity 150ms linear; +} + +.mdc-icon-button:not(.mdc-ripple-upgraded):active::after { + transition-duration: 75ms; + opacity: 0.12; +} + +.mdc-icon-button.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.12; +} diff --git a/theme/assets/css/src/material-components.css b/theme/assets/css/src/material-components.css index 1fdd7afd..eaa1a724 100644 --- a/theme/assets/css/src/material-components.css +++ b/theme/assets/css/src/material-components.css @@ -14,7 +14,6 @@ * limitations under the License. */ -@import "@material/icon-button/dist/mdc.icon-button.css"; @import "@material/layout-grid/dist/mdc.layout-grid.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; @@ -23,6 +22,7 @@ @import "./material/drawer.css"; @import "./material/top-app-bar.css"; @import "../../../../plugin/assets/css/src/components/ripple.css"; +@import "../../../../plugin/assets/css/src/components/icon-button.css"; /** Todo: Add style from plugin for material card, image card, checkbox.