diff --git a/plugin/assets/css/src/components/tab-indicator.css b/plugin/assets/css/src/components/tab-indicator.css new file mode 100644 index 00000000..e620d5d5 --- /dev/null +++ b/plugin/assets/css/src/components/tab-indicator.css @@ -0,0 +1,87 @@ +/* + * + * 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-tab-indicator { + display: flex; + position: absolute; + top: 0; + left: 0; + justify-content: center; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} + +.mdc-tab-indicator .mdc-tab-indicator__content--underline { + border-color: var(--md-sys-color-primary, #6200ee); +} + +.mdc-tab-indicator .mdc-tab-indicator__content--icon { + color: var(--md-sys-color-secondary, #018786); +} + +.mdc-tab-indicator .mdc-tab-indicator__content--underline { + border-top-width: 2px; +} + +.mdc-tab-indicator .mdc-tab-indicator__content--icon { + height: 34px; + font-size: 34px; +} + +.mdc-tab-indicator__content { + -webkit-transform-origin: left; + transform-origin: left; + opacity: 0; +} + +.mdc-tab-indicator__content--underline { + align-self: flex-end; + box-sizing: border-box; + width: 100%; + border-top-style: solid; +} + +.mdc-tab-indicator__content--icon { + align-self: center; + margin: 0 auto; +} + +.mdc-tab-indicator--active .mdc-tab-indicator__content { + opacity: 1; +} + +.mdc-tab-indicator .mdc-tab-indicator__content { + transition: 250ms -webkit-transform cubic-bezier(0.4, 0, 0.2, 1); + transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1); + transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1), 250ms -webkit-transform cubic-bezier(0.4, 0, 0.2, 1); +} + +.mdc-tab-indicator--no-transition .mdc-tab-indicator__content { + transition: none; +} + +.mdc-tab-indicator--fade .mdc-tab-indicator__content { + transition: 150ms opacity linear; +} + +.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content { + transition-delay: 100ms; +} diff --git a/plugin/assets/css/src/components/tab.css b/plugin/assets/css/src/components/tab.css new file mode 100644 index 00000000..884ea23e --- /dev/null +++ b/plugin/assets/css/src/components/tab.css @@ -0,0 +1,322 @@ +/* + * 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-tab { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: var(--md-sys-typescale-label-large-font, Roboto, sans-serif); + font-size: var(--md-sys-typescale-label-large-size, 0.875rem); + line-height: var(--md-sys-typescale-label-large-line-height); + font-weight: var(--md-sys-typescale-label-large-weight, 500); + letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.0892857143em); + text-decoration: none; + text-transform: uppercase; + padding-right: 24px; + padding-left: 24px; + position: relative; + display: flex; + flex: 1 0 auto; + justify-content: center; + box-sizing: border-box; + margin: 0; + padding-top: 0; + padding-bottom: 0; + border: none; + outline: none; + background: none; + text-align: center; + white-space: nowrap; + cursor: pointer; + -webkit-appearance: none; + z-index: 1; +} + +.mdc-tab .mdc-tab__text-label { + color: rgba(0, 0, 0, 0.6); +} + +.mdc-tab .mdc-tab__icon { + color: rgba(0, 0, 0, 0.54); + fill: currentColor; +} + +.mdc-tab::-moz-focus-inner { + padding: 0; + border: 0; +} + +.mdc-tab--min-width { + flex: 0 1 auto; +} + +.mdc-tab__content { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: inherit; + pointer-events: none; +} + +.mdc-tab__text-label { + transition: 150ms color linear; + display: inline-block; + line-height: 1; + z-index: 2; +} + +.mdc-tab__icon { + transition: 150ms color linear; + width: 24px; + height: 24px; + font-size: 24px; + z-index: 2; +} + +.mdc-tab--stacked .mdc-tab__content { + flex-direction: column; + align-items: center; + justify-content: center; +} + +.mdc-tab--stacked .mdc-tab__text-label { + padding-top: 6px; + padding-bottom: 4px; +} + +.mdc-tab--active .mdc-tab__text-label { + color: var(--md-sys-color-primary, #6200ee); +} + +.mdc-tab--active .mdc-tab__icon { + color: var(--md-sys-color-primary, #6200ee); + fill: currentColor; +} + +.mdc-tab--active .mdc-tab__text-label, +.mdc-tab--active .mdc-tab__icon { + transition-delay: 100ms; +} + +.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label { + + /* @noflip */ + padding-left: 8px; + + /* @noflip */ + padding-right: 0; +} + +[dir="rtl"] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label, +.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label[dir="rtl"] { + + /* @noflip */ + padding-left: 0; + + /* @noflip */ + padding-right: 8px; +} + +@-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-tab__ripple { + --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); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.mdc-tab__ripple::before, +.mdc-tab__ripple::after { + position: absolute; + border-radius: 50%; + opacity: 0; + pointer-events: none; + content: ""; +} + +.mdc-tab__ripple::before { + transition: opacity 15ms linear, background-color 15ms linear; + z-index: 1; +} + +.mdc-tab__ripple.mdc-ripple-upgraded::before { + -webkit-transform: scale(var(--mdc-ripple-fg-scale, 1)); + transform: scale(var(--mdc-ripple-fg-scale, 1)); +} + +.mdc-tab__ripple.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-tab__ripple.mdc-ripple-upgraded--unbounded::after { + top: var(--mdc-ripple-top, 0); + + /* @noflip */ + left: var(--mdc-ripple-left, 0); +} + +.mdc-tab__ripple.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-tab__ripple.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-tab__ripple::before, +.mdc-tab__ripple::after { + top: calc(50% - 100%); + + /* @noflip */ + left: calc(50% - 100%); + width: 200%; + height: 200%; +} + +.mdc-tab__ripple.mdc-ripple-upgraded::after { + width: var(--mdc-ripple-fg-size, 100%); + height: var(--mdc-ripple-fg-size, 100%); +} + +.mdc-tab__ripple::before, +.mdc-tab__ripple::after { + background-color: var(--md-sys-color-primary, #6200ee); + color: var(--md-sys-color-primary, #6200ee); +} + +.mdc-tab__ripple:hover::before { + opacity: 0.04; +} + +.mdc-tab__ripple.mdc-ripple-upgraded--background-focused::before, +.mdc-tab__ripple:not(.mdc-ripple-upgraded):focus::before { + transition-duration: 75ms; + opacity: 0.12; +} + +.mdc-tab__ripple:not(.mdc-ripple-upgraded)::after { + transition: opacity 150ms linear; +} + +.mdc-tab__ripple:not(.mdc-ripple-upgraded):active::after { + transition-duration: 75ms; + opacity: 0.12; +} + +.mdc-tab__ripple.mdc-ripple-upgraded { + --mdc-ripple-fg-opacity: 0.12; +} diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 334a5f83..478acb7f 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -21,9 +21,7 @@ @import "@material/icon-button/dist/mdc.icon-button.css"; @import "@material/layout-grid/dist/mdc.layout-grid.css"; @import "@material/list/dist/mdc.list.css"; -@import "@material/tab/dist/mdc.tab.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; -@import "@material/tab-indicator/dist/mdc.tab-indicator.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; @import "@material/tooltip/dist/mdc.tooltip.css"; @import "components/image-card.css"; @@ -32,3 +30,5 @@ @import "./components/text-field.css"; @import "./components/form-field.css"; @import "./components/floating-label.css"; +@import "./components/tab.css"; +@import "./components/tab-indicator.css"; diff --git a/theme/assets/css/src/material-components.css b/theme/assets/css/src/material-components.css index de05bb8e..1cb0a759 100644 --- a/theme/assets/css/src/material-components.css +++ b/theme/assets/css/src/material-components.css @@ -23,7 +23,6 @@ @import "@material/ripple/dist/mdc.ripple.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; -@import "@material/tab-indicator/dist/mdc.tab-indicator.css"; @import "@material/tab/dist/mdc.tab.css"; @import "./components/material.css";