diff --git a/package.json b/package.json index a42b9df..98b8fa2 100755 --- a/package.json +++ b/package.json @@ -5,10 +5,10 @@ "dependencies": { "cordova-plugin-splashscreen": "6.0.0", "monaca-plugin-monaca-core": "3.3.1", - "onsenui": "2.11.2", - "react": "^16.8.6", - "react-dom": "^16.4.1", - "react-onsenui": "1.11.4" + "onsenui": "~2.12.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", + "react-onsenui": "~1.12.0" }, "scripts": { "monaca:preview": "npm run dev & npm run watch", diff --git a/src/App.jsx b/src/App.jsx index b04969a..bae61f8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,10 +4,13 @@ import {Navigator} from 'react-onsenui'; import MainPage from './MainPage' +let keyIndex = 0; + export default class App extends React.Component { renderPage(route, navigator) { const props = route.props || {}; props.navigator = navigator; + props.key = keyIndex++; return React.createElement(route.component, props); } @@ -17,4 +20,4 @@ export default class App extends React.Component { ); } -} \ No newline at end of file +} diff --git a/www/734.css b/www/734.css index 456524d..d90f5a4 100644 --- a/www/734.css +++ b/www/734.css @@ -32,10 +32,171 @@ */ :root { /* variables for iOS components */ + --background-color: #efeff4; + --text-color: #1f1f21; + --sub-text-color: #999; + --highlight-color-rgb: 0, 118, 255; + --highlight-color: rgba(var(--highlight-color-rgb)); + --second-highlight-color: #25a6d9; + --border-color: #ccc; + --button-background-color: var(--highlight-color); + --button-cta-background-color: var(--second-highlight-color); + --toolbar-background-color: #fafafa; + --toolbar-button-color: var(--highlight-color); + --toolbar-text-color: #1f1f21; + --toolbar-border-color: #b2b2b2; + --button-bar-color: var(--highlight-color); + --button-bar-active-text-color: #fff; + --button-bar-active-background-color: unset; + --button-bar-active-background-color-default-blend-color: white; + --button-bar-active-background-color-default-blend-time: -0.7s; + --button-light-color: black; + --segment-color: var(--highlight-color); + --segment-active-text-color: #fff; + --segment-active-background-color: unset; + --segment-active-background-color-default-blend-color: white; + --segment-active-background-color-default-blend-time: -0.7s; + --list-background-color: #fff; + --list-header-background-color: #eee; + --list-tap-active-background-color: #d9d9d9; + --list-item-chevron-color: #c7c7cc; + --progress-bar-color: var(--highlight-color); + --progress-bar-secondary-color: #65adff; + --progress-bar-background-color: transparent; + --progress-circle-primary-color: var(--highlight-color); + --progress-circle-secondary-color: #65adff; + --progress-circle-background-color: transparent; + --tabbar-background-color: #fafafa; + --tabbar-text-color: #999; + --tabbar-highlight-text-color: var(--highlight-color); + --tabbar-border-color: #ccc; + --switch-highlight-color: #44db5e; + --switch-border-color: #e5e5e5; + --switch-background-color: white; + --range-track-background-color: #a4aab3; + --range-track-background-color-active: var(--highlight-color); + --range-thumb-background-color: #fff; + --modal-background-color: rgba(0, 0, 0, 0.7); + --modal-text-color: #fff; + --alert-dialog-background-color: #f4f4f4; + --alert-dialog-text-color: #1f1f21; + --alert-dialog-button-color: var(--highlight-color); + --alert-dialog-separator-color: #ddd; + --dialog-background-color: #f4f4f4; + --dialog-text-color: var(--text-color); + --popover-background-color: white; + --popover-text-color: #1f1f21; + --action-sheet-title-color: #8f8e94; + --action-sheet-button-separator-color: rgba(0, 0, 0, 0.1); + --action-sheet-button-color: var(--highlight-color); + --action-sheet-button-destructive-color: #fe3824; + --action-sheet-button-background-color: rgba(255, 255, 255, 0.9); + --action-sheet-button-active-background-color: #e9e9e9; + --action-sheet-cancel-button-background-color: #fff; + --notification-background-color: #fe3824; + --notification-color: white; + --search-input-background-color: rgba(3, 3, 3, 0.09); + --fab-text-color: #ffffff; + --fab-background-color-rgb: var(--highlight-color-rgb); + --fab-background-color: rgba(var(--fab-background-color-rgb)); + --fab-active-background-color: rgba(var(--fab-background-color-rgb), 0.7); /* color-mod(var(--fab-background-color) a(70%)) */ + --card-background-color: white; + --card-text-color: #030303; + --toast-background-color: rgba(0, 0, 0, 0.8); + --toast-text-color: white; + --toast-button-text-color: white; + --select-input-color: var(--text-color); + --select-input-border-color: var(--border-color); /* variables for Material Design components */ + --material-background-color: #eceff1; + --material-text-color: var(--text-color); + --material-notification-background-color: #e91e63; + --material-notification-color: white; + --material-switch-active-thumb-color: #37474f; + --material-switch-active-background-color: rgba(55, 71, 79, 0.5); /* color-mod(#37474f a(50%)) */ + --material-switch-inactive-thumb-color: #f1f1f1; + --material-switch-inactive-background-color: #b0afaf; + --material-range-track-color: #bdbdbd; + --material-range-thumb-color: #31313a; + --material-range-disabled-thumb-color: #b0b0b0; + --material-range-disabled-thumb-border-color: #eeeeee; + --material-range-zero-thumb-color: #f2f2f2; + --material-toolbar-background-color: #ffffff; + --material-toolbar-text-color: #31313a; + --material-toolbar-button-color: #1e88e5; + --material-segment-background-color: #fafafa; + --material-segment-active-background-color: #c8c8c8; + --material-segment-text-color: rgba(0, 0, 0, 0.38); /* color-mod(black a(38%)) */ + --material-segment-active-text-color: #353535; + --material-button-background-color: #2979ff; + --material-button-text-color: #ffffff; + --material-button-disabled-background-color: rgba(79, 79, 79, 0.26); /* color-mod(#4f4f4f a(26%)) */ + --material-button-disabled-color: rgba(0, 0, 0, 0.26); /* color-mod(black a(26%)) */ + --material-flat-button-active-background-color: rgba(153, 153, 153, 0.2); /* color-mod(#999 a(20%)) */ + --material-list-background-color: #fff; + --material-list-item-separator-color: #eee; + --material-list-header-text-color: #757575; + --material-checkbox-active-color: #37474f; + --material-checkbox-inactive-color: #717171; + --material-checkbox-checkmark-color: #ffffff; + --material-radio-button-active-color: #37474f; + --material-radio-button-inactive-color: #717171; + --material-radio-button-disabled-color: #afafaf; + --material-text-input-text-color: #212121; + --material-text-input-active-color: #3d5afe; + --material-text-input-inactive-color: #afafaf; + --material-search-background-color: #fafafa; + --material-dialog-background-color: #ffffff; + --material-dialog-text-color: var(--material-text-color); + --material-alert-dialog-background-color: #ffffff; + --material-alert-dialog-title-color: #31313a; + --material-alert-dialog-content-color: rgba(49, 49, 58, 0.85); + --material-alert-dialog-button-color: #37474f; + --material-progress-bar-primary-color: #37474f; + --material-progress-bar-secondary-color: #548ba7; + --material-progress-bar-background-color: transparent; + --material-progress-circle-primary-color: var(--material-progress-bar-primary-color); + --material-progress-circle-secondary-color: var(--material-progress-bar-secondary-color); + --material-progress-circle-background-color: transparent; + --material-tabbar-background-color: #ffffff; + --material-tabbar-text-color: #31313a; + --material-tabbar-highlight-text-color: #31313a; + --material-tabbar-highlight-color: rgba(49, 49, 58, 0.1); + --material-fab-text-color: #31313a; + --material-fab-background-color: #ffffff; + --material-fab-active-background-color: rgba(255, 255, 255, 0.75); + --material-card-background-color: white; + --material-card-text-color: rgba(0, 0, 0, 0.54); + --material-toast-background-color: rgba(0, 0, 0, 0.8); + --material-toast-text-color: white; + --material-toast-button-text-color: #bbdefb; + --material-select-input-color: var(--material-text-color); + --material-select-input-active-color: rgba(0, 0, 0, 0.15); + --material-select-input-inactive-color: rgba(0, 0, 0, 0.81); + --material-select-border-color: rgba(0, 0, 0, 0.12); /* color-mod(black a(12%)) */ + --material-popover-background-color: #fafafa; + --material-popover-text-color: var(--material-text-color); + --material-action-sheet-text-color: #686868; /* others */ + --tap-highlight-color: transparent; +} +:root { + --input-bg-color: var(--background-color); + --input-border-color: var(--border-color); + --input-text-color: var(--text-color); + --input-placeholder-color: var(--sub-text-color); + --input-invalid-border-color: var(--border-color); + --input-invalid-text-color: var(--text-color); + --input-border: 1px solid var(--input-border-color); + --font-size: 17px; + --font-weight: 400; + --material-font-size: 17px; + --material-font-weight: 400; + --font-size--mini: calc(var(--font-size) - 3px); + --font-weight--large: 500; + --background-color--input: transparent; } html { height: 100%; @@ -69,6 +230,7 @@ time, mark, audio, video { user-select: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: var(--tap-highlight-color); -webkit-touch-callout: none; } input, textarea, select { @@ -95,14 +257,90 @@ h3 { h4, h5, h6 { font-size: 18px; } +/* Hack to replicate the deprecated color-mod function from postcss-color-mod-function. + * Replace this when an alternative function to color-mod is well-supported. + * See: https://css-tricks.com/mixing-colors-in-pure-css/ + * + * For tint, set __base variable to base color, __color variable to white, and + * animation-delay to tint percentage in negative seconds e.g. 70% tint -> -0.7s. + * + * For blackness, do the same as tint but set __color variable to black. + * + * For alpha, do the same as tint but set __base variable (not __color!) to + * transparent, and set __color variable to the color to alter. + */ +@-webkit-keyframes blend-background-color { + 0% { + background-color: var(--blend-background-color__base); + } + + 100% { + background-color: var(--blend-background-color__color); + } +} +@keyframes blend-background-color { + 0% { + background-color: var(--blend-background-color__base); + } + + 100% { + background-color: var(--blend-background-color__color); + } +} +@-webkit-keyframes blend-color { + 0% { + color: var(--blend-color__base); + } + + 100% { + color: var(--blend-color__color); + } +} +@keyframes blend-color { + 0% { + color: var(--blend-color__base); + } + + 100% { + color: var(--blend-color__color); + } +} +@-webkit-keyframes blend-border-color { + 0% { + border-color: var(--blend-border-color__base); + } + + 100% { + border-color: var(--blend-border-color__color); + } +} +@keyframes blend-border-color { + 0% { + border-color: var(--blend-border-color__base); + } + + 100% { + border-color: var(--blend-border-color__color); + } +} +:root { + --page-background-color: var(--background-color); + --page-material-background-color: var(--material-background-color); +} .page { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + background-color: #efeff4; + background-color: #efeff4; + + background-color: var(--page-background-color); position: absolute; top: 0; left: 0; @@ -112,6 +350,7 @@ h4, h5, h6 { overflow-y: hidden; color: #1f1f21; color: #1f1f21; + color: var(--text-color); -ms-overflow-style: none; -webkit-font-smoothing: antialiased; } @@ -121,6 +360,7 @@ h4, h5, h6 { .page__content { background-color: #efeff4; background-color: #efeff4; + background-color: var(--page-background-color); position: absolute; top: 0; left: 0; @@ -131,6 +371,7 @@ h4, h5, h6 { .page__background { background-color: #efeff4; background-color: #efeff4; + background-color: var(--page-background-color); position: absolute; top: 0; left: 0; @@ -139,32 +380,47 @@ h4, h5, h6 { box-sizing: border-box; } .page--material { + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-weight: 400; + font-weight: var(--material-font-weight); + background-color: #eceff1; + background-color: #eceff1; + + background-color: var(--page-material-background-color); } .page--material__content { + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; + font-weight: 400; + font-weight: 400; - font-weight: 400; - font-weight: 400; + + font-weight: var(--font-weight); } .page__content h1, .page__content h2, .page__content h3, .page__content h4, .page__content h5 { + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + font-weight: 500; + font-weight: 500; + + font-weight: var(--font-weight--large); margin: 0.6em 0; padding: 0; } @@ -182,12 +438,16 @@ h4, h5, h6 { .page--material__content h3, .page--material__content h4, .page--material__content h5 { + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + font-weight: 500; + font-weight: 500; + + font-weight: var(--font-weight--large); margin: 0.6em 0; padding: 0; } @@ -203,8 +463,15 @@ h4, h5, h6 { .page--material__background { background-color: #eceff1; background-color: #eceff1; + background-color: var(--page-material-background-color); } -:root { /* background color active */ +:root { + --switch-checked-background-color: var(--switch-highlight-color); /* background color active */ + --switch-thumb-background-color: white; + --switch-thumb-border-color: var(--border-color); + --switch-thumb-border-color-active: var(--switch-highlight-color); + --switch-height: 32px; + --switch-width: 51px; } /*~ name: Switch @@ -233,23 +500,33 @@ h4, h5, h6 { .switch { display: inline-block; vertical-align: top; + + /* mixin: reset-box-model */ box-sizing: border-box; background-clip: padding-box; + + /* mixin: hide-input-parent */ position: relative; + min-width: 51px; font-size: 17px; font-size: 17px; + font-size: var(--font-size); padding: 0 20px; border: none; overflow: visible; width: 51px; width: 51px; + width: var(--switch-width); height: 32px; height: 32px; + height: var(--switch-height); z-index: 0; text-align: left; } .switch__input { + + /* mixin: hide-input */ position: absolute; right: 0; top: 0; @@ -258,20 +535,21 @@ h4, h5, h6 { padding: 0; border: 0; background-color: transparent; - z-index: 1; vertical-align: top; outline: none; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; - appearance: none; + appearance: none; + z-index: 0; } /* switch toggle background */ .switch__toggle { background-color: white; background-color: white; + background-color: var(--switch-background-color); position: absolute; top: 0; left: 0; @@ -283,11 +561,14 @@ h4, h5, h6 { transition-timing-function: ease-out; box-shadow: inset 0 0 0 2px #e5e5e5; box-shadow: inset 0 0 0 2px #e5e5e5; + box-shadow: inset 0 0 0 2px var(--switch-border-color); } /* switch toggle circle */ .switch__handle { + /* mixin: reset-box-model */ box-sizing: border-box; background-clip: padding-box; + position: absolute; content: ''; border-radius: 28px; @@ -295,6 +576,7 @@ h4, h5, h6 { width: 28px; background-color: white; background-color: white; + background-color: var(--switch-thumb-background-color); left: 1px; top: 2px; transition-property: all; @@ -308,14 +590,17 @@ h4, h5, h6 { :checked + .switch__toggle { box-shadow: inset 0 0 0 2px #44db5e; box-shadow: inset 0 0 0 2px #44db5e; + box-shadow: inset 0 0 0 2px var(--switch-checked-background-color); background-color: #44db5e; background-color: #44db5e; + background-color: var(--switch-checked-background-color); } :checked + .switch__toggle > .switch__handle { left: 21px; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25); } :disabled + .switch__toggle { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -363,11 +648,14 @@ h4, h5, h6 { .switch--material__toggle { background-color: #b0afaf; background-color: #b0afaf; + background-color: var(--material-switch-inactive-background-color); margin-top: 5px; height: 14px; box-shadow: none; } .switch--material__input { + + /* mixin: hide-input */ position: absolute; right: 0; top: 0; @@ -376,46 +664,48 @@ h4, h5, h6 { padding: 0; border: 0; background-color: transparent; - z-index: 1; vertical-align: top; outline: none; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; - appearance: none; + appearance: none; + z-index: 0; } .switch--material__handle { background-color: #f1f1f1; background-color: #f1f1f1; + background-color: var(--material-switch-inactive-thumb-color); left: 0; margin-top: -5px; width: 20px; height: 20px; + + /* mixin: material-shadow-2 */ box-shadow: - 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12), - 0 2px 4px -1px rgba(0, 0, 0, 0.4); + 0 4px 5px 0 rgba(0, 0, 0, 0.14), + 0 1px 10px 0 rgba(0, 0, 0, 0.12), + 0 2px 4px -1px rgba(0, 0, 0, 0.4); } :checked + .switch--material__toggle { background-color: rgba(55, 71, 79, 0.5); background-color: rgba(55, 71, 79, 0.5); + background-color: var(--material-switch-active-background-color); box-shadow: none; } :checked + .switch--material__toggle > .switch--material__handle { left: 16px; background-color: #37474f; background-color: #37474f; + background-color: var(--material-switch-active-thumb-color); + + /* mixin: material-shadow-1 */ box-shadow: - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12), - 0 3px 1px -2px rgba(0, 0, 0, 0.2); -} -:disabled + .switch--material__toggle { - opacity: 0.3; - cursor: default; - pointer-events: none; + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .switch--material__handle:before { background: transparent; @@ -432,8 +722,31 @@ h4, h5, h6 { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0.12); } :checked + .switch--material__toggle > .switch--active__handle:before { - box-shadow: 0 0 0 14px rgba(55, 71, 79, 0.2); - box-shadow: 0 0 0 14px rgba(55, 71, 79, 0.2); + /* Hack to replicate color-mod(var(--material-switch-active-thumb-color) alpha(20%)) */ + -webkit-animation: blend-box-shadow 1s -0.2s linear forwards paused; + animation: blend-box-shadow 1s -0.2s linear forwards paused; +} +@-webkit-keyframes blend-box-shadow { + 0% { + box-shadow: 0 0 0 14px transparent; + } + + 100% { + box-shadow: 0 0 0 14px #37474f; + box-shadow: 0 0 0 14px #37474f; + box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color); + } +} +@keyframes blend-box-shadow { + 0% { + box-shadow: 0 0 0 14px transparent; + } + + 100% { + box-shadow: 0 0 0 14px #37474f; + box-shadow: 0 0 0 14px #37474f; + box-shadow: 0 0 0 14px var(--material-switch-active-thumb-color); + } } .switch--material__touch { position: absolute; @@ -442,6 +755,16 @@ h4, h5, h6 { left: -15px; right: -15px; } +:root { + --range-thumb-size: 28px; + --range-track-height: 2px; + + --material-range-track-height: 2px; + --material-range-thumb-size: 14px; + --material-range-thumb-radius: calc(var(--material-range-thumb-size) / 2); + --material-range-thumb-vertical-margin: 24px; + --material-range-thumb-horizontal-margin: 2px; +} /*~ name: Range category: Range @@ -461,21 +784,26 @@ h4, h5, h6 { display: inline-block; position: relative; width: 100px; - height: 30px; - height: 30px; + height: calc(28px + 2px); + height: calc(28px + 2px); + height: calc(var(--range-thumb-size) + 2px); margin: 0; padding: 0; background-image: linear-gradient(#a4aab3, #a4aab3); background-image: linear-gradient(#a4aab3, #a4aab3); + background-image: linear-gradient(var(--range-track-background-color), var(--range-track-background-color)); background-position: left center; background-size: 100% 2px; background-size: 100% 2px; + background-size: 100% var(--range-track-height); background-repeat: no-repeat; background-color: transparent; } .range__input { + /* mixin: reset-input */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + padding: 0; margin: 0; font: inherit; @@ -485,16 +813,21 @@ h4, h5, h6 { vertical-align: top; outline: none; line-height: 1; + -webkit-appearance: none; + appearance: none; - background-image: linear-gradient(#0076ff, #0076ff); - background-image: linear-gradient(#0076ff, #0076ff); + background-image: linear-gradient(rgba(0, 118, 255), rgba(0, 118, 255)); + background-image: linear-gradient(rgba(0, 118, 255), rgba(0, 118, 255)); + background-image: linear-gradient(var(--range-track-background-color-active), var(--range-track-background-color-active)); background-position: left center; background-size: 0% 2px; background-size: 0% 2px; + background-size: 0% var(--range-track-height); background-repeat: no-repeat; - height: 30px; - height: 30px; + height: calc(28px + 2px); + height: calc(28px + 2px); + height: calc(var(--range-thumb-size) + 2px); position: relative; z-index: 1; width: 100%; @@ -513,23 +846,29 @@ h4, h5, h6 { border: none; background-color: #a4aab3; background-color: #a4aab3; + background-color: var(--range-track-background-color); height: 0; border-radius: 50%; } .range__input::-webkit-slider-thumb { + /* mixin: range__thumb */ cursor: pointer; position: relative; height: 28px; height: 28px; + height: var(--range-thumb-size); width: 28px; width: 28px; + width: var(--range-thumb-size); background-color: #fff; background-color: #fff; + background-color: var(--range-thumb-background-color); border: none; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25); border-radius: 50%; margin: 0; padding: 0; + box-sizing: border-box; -webkit-appearance: none; appearance: none; @@ -537,14 +876,18 @@ h4, h5, h6 { z-index: 1; } .range__input::-moz-range-thumb { + /* mixin: range__thumb */ cursor: pointer; position: relative; height: 28px; height: 28px; + height: var(--range-thumb-size); width: 28px; width: 28px; + width: var(--range-thumb-size); background-color: #fff; background-color: #fff; + background-color: var(--range-thumb-background-color); border: none; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25); border-radius: 50%; @@ -552,25 +895,31 @@ h4, h5, h6 { padding: 0; } .range__input::-ms-thumb { + /* mixin: range__thumb */ cursor: pointer; position: relative; height: 28px; height: 28px; + height: var(--range-thumb-size); width: 28px; width: 28px; + width: var(--range-thumb-size); background-color: #fff; background-color: #fff; + background-color: var(--range-thumb-background-color); border: none; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 2px rgba(0, 0, 0, 0.25); border-radius: 50%; margin: 0; padding: 0; + top: 0; } .range__input::-ms-fill-lower { height: 2px; - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--range-track-background-color-active); } .range__input::-ms-tooltip { display: none; @@ -584,31 +933,36 @@ h4, h5, h6 { top: 0; left: 0; display: none; + + /* mixin: reset-input */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + padding: 0; margin: 0; font: inherit; color: inherit; - background: transparent; border: none; vertical-align: top; outline: none; line-height: 1; + -webkit-appearance: none; + appearance: none; background: none; - height: 30px; - height: 30px; + height: calc(28px + 2px); + height: calc(28px + 2px); + height: calc(var(--range-thumb-size) + 2px); position: absolute; z-index: 0; width: 100%; } .range--disabled { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; - pointer-events: none; } /*~ name: Material Range @@ -629,10 +983,12 @@ h4, h5, h6 { position: relative; background-image: linear-gradient(#bdbdbd, #bdbdbd); background-image: linear-gradient(#bdbdbd, #bdbdbd); + background-image: linear-gradient(var(--material-range-track-color), var(--material-range-track-color)); } .range--material__input { background-image: linear-gradient(#31313a, #31313a); background-image: linear-gradient(#31313a, #31313a); + background-image: linear-gradient(var(--material-range-thumb-color), var(--material-range-thumb-color)); background-position: center left; background-size: 0% 2px; } @@ -644,13 +1000,17 @@ h4, h5, h6 { appearance: none; width: 14px; width: 14px; + width: var(--material-range-thumb-size); height: 14px; height: 14px; + height: var(--material-range-thumb-size); border: none; - box-shadow: 0 0 0 9px #31313a; - box-shadow: 0 0 0 9px #31313a; + box-shadow: 0 0 0 calc((32px - 14px) / 2) #31313a; + box-shadow: 0 0 0 calc((32px - 14px) / 2) #31313a; + box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-thumb-color); background-color: #31313a; background-color: #31313a; + background-color: var(--material-range-thumb-color); border-radius: 50%; opacity: 0; transition: opacity 0.25s ease-out, -webkit-transform 0.25s ease-out; @@ -670,11 +1030,13 @@ h4, h5, h6 { background-color: transparent; width: 14px; width: 14px; + width: var(--material-range-thumb-size); height: 32px; border-radius: 0; box-shadow: none; - background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); - background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); + background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a calc(calc(14px / 2) - 0.4px), transparent calc(14px / 2)); + background-image: radial-gradient(circle farthest-corner, #31313a 0%, #31313a calc(calc(14px / 2) - 0.4px), transparent calc(14px / 2)); + background-image: radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius)); transition: -webkit-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; @@ -682,12 +1044,14 @@ h4, h5, h6 { overflow: visible; } .range--material__input[_zero]::-webkit-slider-thumb { - background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd 6.4px, transparent 7px); - background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd 6.4px, transparent 7px); + background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd calc(calc(14px / 2) - 0.6px), transparent calc(calc(14px / 2))); + background-image: radial-gradient(circle farthest-corner, #f2f2f2 0%, #f2f2f2 4px, #bdbdbd 4px, #bdbdbd calc(calc(14px / 2) - 0.6px), transparent calc(calc(14px / 2))); + background-image: radial-gradient(circle farthest-corner, var(--material-range-zero-thumb-color) 0%, var(--material-range-zero-thumb-color) 4px, var(--material-range-track-color) 4px, var(--material-range-track-color) calc(var(--material-range-thumb-radius) - 0.6px), transparent calc(var(--material-range-thumb-radius))); } .range--material__input[_zero] + .range--material__focus-ring::-webkit-slider-thumb { - box-shadow: 0 0 0 9px #bdbdbd; - box-shadow: 0 0 0 9px #bdbdbd; + box-shadow: 0 0 0 calc((32px - 14px) / 2) #bdbdbd; + box-shadow: 0 0 0 calc((32px - 14px) / 2) #bdbdbd; + box-shadow: 0 0 0 calc((32px - var(--material-range-thumb-size)) / 2) var(--material-range-track-color); } .range--material__input::-moz-range-track { background: none; @@ -698,10 +1062,11 @@ h4, h5, h6 { border: none; width: 14px; width: 14px; + width: var(--material-range-thumb-size); height: 32px; border-radius: 0; background-color: transparent; - background-image: -moz-radial-gradient(circle farthest-corner, #31313a 0%, #31313a 6.6px, transparent 7px); /* stylelint-disable-line */ + background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-thumb-color) 0%, var(--material-range-thumb-color) calc(var(--material-range-thumb-radius) - 0.4px), transparent var(--material-range-thumb-radius)); /* stylelint-disable-line */ box-shadow: none; } .range--material__input:active::-webkit-slider-thumb, @@ -722,16 +1087,29 @@ h4, h5, h6 { background-image: none; } .range--material__input:disabled::-webkit-slider-thumb { - background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); - background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); + background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee calc(calc(14px / 2) + 0.6px), transparent calc(calc(14px / 2) + 0.6px)); + background-image: radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee calc(calc(14px / 2) + 0.6px), transparent calc(calc(14px / 2) + 0.6px)); + background-image: radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px)); -webkit-transition: none; transition: none; } .range--material__input:disabled::-moz-range-thumb { - background-image: -moz-radial-gradient(circle farthest-corner, #b0b0b0 0%, #b0b0b0 4px, #eeeeee 4.4px, #eeeeee 7.6px, transparent 7.6px); /* stylelint-disable-line */ + background-image: -moz-radial-gradient(circle farthest-corner, var(--material-range-disabled-thumb-color) 0%, var(--material-range-disabled-thumb-color) 4px, var(--material-range-disabled-thumb-border-color) 4.4px, var(--material-range-disabled-thumb-border-color) calc(var(--material-range-thumb-radius) + 0.6px), transparent calc(var(--material-range-thumb-radius) + 0.6px)); /* stylelint-disable-line */ -moz-transition: none; transition: none; } +:root { + --notification-border-radius: 19px; + --notification-width: auto; + --notification-height: 19px; + --notification-min-width: 19px; + --notification-padding: 0 4px; + --notification-font-weight: var(--font-weight); + --notification-font-size: 16px; + + --material-notification-font-size: 16px; + --material-notification-font-weight: 500; +} /*~ name: Notification category: Notification @@ -746,50 +1124,61 @@ h4, h5, h6 { vertical-align: top; font: inherit; border: none; + + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; + + /* mixin: reset-base */ background: transparent; - border: none; - line-height: normal; + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; + + /* mixin: ellipsis */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + text-decoration: none; margin: 0; padding: 0 4px; - padding: 0 -4px; + padding: 0 4px; + padding: var(--notification-padding); width: auto; width: auto; + width: var(--notification-width); height: 19px; height: 19px; + height: var(--notification-height); border-radius: 19px; border-radius: 19px; + border-radius: var(--notification-border-radius); background-color: #fe3824; background-color: #fe3824; + background-color: var(--notification-background-color); color: white; color: white; + color: var(--notification-color); text-align: center; font-size: 16px; font-size: 16px; + font-size: var(--notification-font-size); min-width: 19px; min-width: 19px; + min-width: var(--notification-min-width); line-height: 19px; line-height: 19px; + line-height: var(--notification-height); font-weight: 400; font-weight: 400; + font-weight: var(--notification-font-weight); } .notification:empty { display: none; @@ -803,18 +1192,33 @@ h4, h5, h6 { 999 */ .notification--material { + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + background-color: #e91e63; + background-color: #e91e63; + + background-color: var(--material-notification-background-color); font-size: 16px; font-size: 16px; + font-size: var(--material-notification-font-size); font-weight: 500; font-weight: 500; + font-weight: var(--material-notification-font-weight); color: white; color: white; + color: var(--material-notification-color); +} +:root { + --toolbar-separator-color: var(--toolbar-border-color); + + --toolbar-height: 44px; + --toolbar-box-shadow: none; + --toolbar-padding: 0; + --toolbar-separator: 1px solid var(--toolbar-separator-color); + --toolbar-material-height: 56px; } /*~ name: Toolbar @@ -826,28 +1230,30 @@ h4, h5, h6 { */ .toolbar { - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; + /* mixin: toolbar */ + /* mixin: reset-font */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + /* mixin: reset-container */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; - white-space: nowrap; + /* mixin: reset-overflow */ overflow: hidden; word-spacing: 0; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; - color: inherit; - background: transparent; border: none; line-height: normal; + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; z-index: 2; + display: -webkit-flex; + display: flex; -webkit-align-items: stretch; align-items: stretch; @@ -855,18 +1261,25 @@ h4, h5, h6 { flex-wrap: nowrap; height: 44px; height: 44px; + height: var(--toolbar-height); padding-left: 0; padding-left: 0; + padding-left: var(--toolbar-padding); padding-right: 0; padding-right: 0; + padding-right: var(--toolbar-padding); background: #fafafa; background: #fafafa; + background: var(--toolbar-background-color); color: #1f1f21; color: #1f1f21; + color: var(--toolbar-text-color); box-shadow: none; box-shadow: none; + box-shadow: var(--toolbar-box-shadow); font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); width: 100%; white-space: nowrap; border-bottom: none; @@ -875,20 +1288,27 @@ h4, h5, h6 { background-position: bottom; background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%); background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%); + background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%); } -@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx) { -.toolbar { - background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); - background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); +/* @media (--retina-query) */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + .toolbar { + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + background-image: linear-gradient(0deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%); + } } - } .toolbar__bg { background: #fafafa; background: #fafafa; + background: var(--toolbar-background-color); } .toolbar__item { + + /* mixin: toolbar__item */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; @@ -896,74 +1316,96 @@ h4, h5, h6 { background: transparent; border: none; line-height: normal; + height: 44px; + height: 44px; + + height: var(--toolbar-height); overflow: visible; display: block; vertical-align: middle; } .toolbar__left { + + /* mixin: toolbar__item */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; - line-height: normal; + max-width: 50%; width: 27%; text-align: left; line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); } .toolbar__right { + + /* mixin: toolbar__item */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; - line-height: normal; + max-width: 50%; width: 27%; text-align: right; line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); } .toolbar__center { + + /* mixin: toolbar__item */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; - color: inherit; background: transparent; border: none; - line-height: normal; + width: 46%; text-align: center; line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); color: #1f1f21; color: #1f1f21; + color: var(--toolbar-text-color); } .toolbar__title { line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); color: #1f1f21; color: #1f1f21; + color: var(--toolbar-text-color); margin: 0; padding: 0; overflow: visible; @@ -1024,47 +1466,52 @@ h4, h5, h6 { */ .bottom-bar { - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; + /* mixin: toolbar */ + /* mixin: reset-font */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + /* mixin: reset-container */ + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + /* mixin: reset-overflow */ white-space: nowrap; overflow: hidden; word-spacing: 0; + /* mixin: reset-base */ padding: 0; margin: 0; font: inherit; - color: inherit; - background: transparent; border: none; line-height: normal; + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; z-index: 2; + display: block; height: 44px; height: 44px; + height: var(--toolbar-height); padding-left: 0; padding-left: 0; + padding-left: var(--toolbar-padding); padding-right: 0; padding-right: 0; + padding-right: var(--toolbar-padding); background: #fafafa; background: #fafafa; + background: var(--toolbar-background-color); color: #1f1f21; color: #1f1f21; + color: var(--toolbar-text-color); box-shadow: none; box-shadow: none; + box-shadow: var(--toolbar-box-shadow); font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); border-bottom: none; - border-top: 1px solid #b2b2b2; - border-top: 1px -solid -#b2b2b2; position: absolute; bottom: 0; right: 0; @@ -1075,16 +1522,20 @@ solid background-position: top; background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%); background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 100%); + background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 100%); } -@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx) { -.bottom-bar { - background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%); - background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%); +/* @media (--retina-query) */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + .bottom-bar { + background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + background-image: linear-gradient(180deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + background-image: linear-gradient(180deg, var(--toolbar-separator-color), var(--toolbar-separator-color) 50%, transparent 50%); + } } - } .bottom-bar__line-height { line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); padding-bottom: 0; padding-top: 0; } @@ -1095,6 +1546,7 @@ solid flex-wrap: nowrap; line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); } .bottom-bar--transparent { background-color: transparent; @@ -1142,11 +1594,13 @@ solid justify-content: space-between; height: 56px; height: 56px; + height: var(--toolbar-material-height); border-bottom: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); padding: 0; background-color: #ffffff; background-color: #ffffff; + background-color: var(--material-toolbar-background-color); background-size: 0; } /*~ @@ -1174,32 +1628,45 @@ solid border-bottom: none; } .toolbar--material__left, .toolbar--material__right { + + /* mixin: toolbar--material-font */ + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; font-size: 20px; font-weight: 500; color: #31313a; color: #31313a; + color: var(--material-toolbar-text-color); + height: 56px; + height: 56px; + + height: var(--toolbar-material-height); min-width: 72px; width: auto; line-height: 56px; line-height: 56px; + line-height: var(--toolbar-material-height); } .toolbar--material__center { + + /* mixin: toolbar--material-font */ + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; font-size: 20px; font-weight: 500; color: #31313a; color: #31313a; + color: var(--material-toolbar-text-color); + height: 56px; + height: 56px; + + height: var(--toolbar-material-height); width: auto; -webkit-flex-grow: 1; flex-grow: 1; @@ -1208,6 +1675,7 @@ solid text-align: left; line-height: 56px; line-height: 56px; + line-height: var(--toolbar-material-height); } .toolbar--material__center:first-child { margin-left: 16px; @@ -1270,6 +1738,17 @@ solid background-image: none; border-bottom: none; } +:root { + --button-text-color: white; + --button-quiet-color: var(--highlight-color); + --button-cta-color: white; + --button-large-padding: 4px 12px; + --button-padding: 4px 10px; + --button-line-height: 32px; + --button-large-line-height: 36px; + --button-active-opacity: 0.2; + --button-border-radius: 3px; +} /*~ name: Button category: Button @@ -1281,44 +1760,54 @@ solid .button { position: relative; display: inline-block; + + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; - padding: 0; + + /* mixin: reset-base */ margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; + + /* mixin: ellipsis */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + height: auto; text-decoration: none; padding: 4px 10px; - padding: 4px -10px; + padding: 4px 10px; + padding: var(--button-padding); font-size: 17px; font-size: 17px; + font-size: var(--font-size); line-height: 32px; line-height: 32px; + line-height: var(--button-line-height); letter-spacing: 0; color: white; color: white; + color: var(--button-text-color); vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--button-background-color); border: 0 solid currentColor; border-radius: 3px; border-radius: 3px; + border-radius: var(--button-border-radius); transition: none; } .button::-moz-focus-inner { @@ -1328,16 +1817,19 @@ solid transition: none; } .button:active { - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--button-background-color); transition: none; opacity: 0.2; opacity: 0.2; + opacity: var(--button-active-opacity); } .button:focus { outline: 0; } .button:disabled, .button[disabled] { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -1352,23 +1844,33 @@ solid */ .button--outline { background-color: transparent; - border: 1px solid #0076ff; - border: 1px solid #0076ff; - color: #0076ff; - color: #0076ff; + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: 1px solid var(--button-background-color); + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-background-color); } .button--outline:active { - background-color: rgb(179, 214, 255); - background-color: rgb(179, 214, 255); - border: 1px solid #0076ff; - border: 1px solid #0076ff; - color: #0076ff; - color: #0076ff; + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: 1px solid var(--button-background-color); + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-background-color); opacity: 1; + + /* Hack to replicate tint from the deprecated color-mod function. */ + --blend-background-color__base: var(--button-background-color); + --blend-background-color__color: white; + /* stylelint-disable-next-line no-unknown-animations */ + -webkit-animation: blend-background-color 1s -0.7s linear forwards paused; + animation: blend-background-color 1s -0.7s linear forwards paused; } .button--outline:hover { - border: 1px solid #0076ff; - border: 1px solid #0076ff; + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: 1px solid var(--button-background-color); transition: 0; } /*~ @@ -1381,18 +1883,47 @@ solid */ .button--light { background-color: transparent; - color: rgba(0, 0, 0, 0.4); - color: rgba(0, 0, 0, 0.4); - border: 1px solid rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid; + + /* Hack to replicate color-mod(var(--button-light-color) a(40%)) */ + --blend-color__base: transparent; + --blend-color__color: var(--button-light-color); + + /* Hack to replicate color-mod(var(--button-light-color) a(20%)) */ + --blend-border-color__base: transparent; + --blend-border-color__color: var(--button-light-color); + + /* stylelint-disable no-unknown-animations */ + -webkit-animation: blend-color 1s -0.4s linear forwards paused, + blend-border-color 1s -0.2s linear forwards paused; + animation: blend-color 1s -0.4s linear forwards paused, + blend-border-color 1s -0.2s linear forwards paused; + /* stylelint-enable no-unknown-animations */ } .button--light:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: rgba(0, 0, 0, 0.05); - color: rgba(0, 0, 0, 0.4); - color: rgba(0, 0, 0, 0.4); - border: 1px solid rgba(0, 0, 0, 0.2); - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid; + + /* Hack to replicate color-mod(var(--button-light-color) a(5%)) */ + --blend-background-color__base: transparent; + --blend-background-color__color: var(--button-light-color); + + /* Hack to replicate color-mod(var(--button-light-color) a(40%)) */ + --blend-color__base: transparent; + --blend-color__color: var(--button-light-color); + + /* Hack to replicate color-mod(var(--button-light-color) a(20%)) */ + --blend-border-color__base: transparent; + --blend-border-color__color: var(--button-light-color); + + /* stylelint-disable no-unknown-animations */ + -webkit-animation: blend-background-color 1s -0.05s linear forwards paused, + blend-color 1s -0.4s linear forwards paused, + blend-border-color 1s -0.2s linear forwards paused; + animation: blend-background-color 1s -0.05s linear forwards paused, + blend-color 1s -0.4s linear forwards paused, + blend-border-color 1s -0.2s linear forwards paused; + /* stylelint-enable no-unknown-animations */ + opacity: 1; } /*~ @@ -1400,157 +1931,62 @@ solid category: Button elements: ons-button markup: | - - + + */ .button--quiet { - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; + /* mixin: button--quiet */ + box-shadow: none; + background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; - background: transparent; - border: 1px solid transparent; - box-shadow: none; - background: transparent; - color: #0076ff; - color: #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-quiet-color); border: none; } .button--quiet:disabled, .button--quiet[disabled] { - opacity: 0.3; - cursor: default; - pointer-events: none; border: none; } -.button--quiet:hover { - transition: none; -} -.button--quiet:focus { - outline: 0; -} .button--quiet:active { background-color: transparent; border: none; transition: none; opacity: 0.2; opacity: 0.2; - color: #0076ff; - color: #0076ff; + opacity: var(--button-active-opacity); + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-quiet-color); } /*~ name: Call To Action Button category: Button elements: ons-button markup: | - - + + */ .button--cta { - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; border: none; background-color: #25a6d9; background-color: #25a6d9; + background-color: var(--button-cta-background-color); color: white; color: white; -} -.button--cta:hover { - transition: none; -} -.button--cta:focus { - outline: 0; + color: var(--button-cta-color); } .button--cta:active { color: white; color: white; + color: var(--button-cta-color); background-color: #25a6d9; background-color: #25a6d9; + background-color: var(--button-cta-background-color); transition: none; opacity: 0.2; opacity: 0.2; -} -.button--cta:disabled, -.button--cta[disabled] { - opacity: 0.3; - cursor: default; - pointer-events: none; + opacity: var(--button-active-opacity); } /* name: Large Button @@ -1562,122 +1998,72 @@ solid .button--large { font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); line-height: 36px; line-height: 36px; + line-height: var(--button-large-line-height); + padding: 4px 12px; padding: 4px 12px; - padding: 4px -12px; + padding: var(--button-large-padding); display: block; width: 100%; text-align: center; } .button--large:active { - background-color: #0076ff; - background-color: #0076ff; - transition: none; - opacity: 0.2; - opacity: 0.2; transition: none; } -.button--large:disabled, -.button--large[disabled] { - opacity: 0.3; - cursor: default; - pointer-events: none; -} -.button--large:hover { - transition: none; -} -.button--large:focus { - outline: 0; -} /*~ name: Large Quiet Button category: Button elements: ons-button markup: | - + */ .button--large--quiet { /* stylelint-disable-line */ - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); line-height: 36px; line-height: 36px; + line-height: var(--button-large-line-height); padding: 4px 12px; - padding: 4px -12px; + padding: 4px 12px; + padding: var(--button-large-padding); display: block; width: 100%; + + /* mixin: button--quiet */ background: transparent; border: 1px solid transparent; box-shadow: none; - color: #0076ff; - color: #0076ff; + + color: rgba(0, 118, 255); + + color: rgba(0, 118, 255); + + color: var(--button-quiet-color); text-align: center; } .button--large--quiet:active { /* stylelint-disable-line */ transition: none; opacity: 0.2; opacity: 0.2; - color: #0076ff; - color: #0076ff; + opacity: var(--button-active-opacity); + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-quiet-color); + + /* mixin: button--quiet */ background: transparent; border: 1px solid transparent; box-shadow: none; } -.button--large--quiet:disabled, .button--large--quiet[disabled] { /* stylelint-disable-line */ - opacity: 0.3; - cursor: default; - pointer-events: none; -} -.button--large--quiet:hover { /* stylelint-disable-line */ - transition: none; -} .button--large--quiet:focus { /* stylelint-disable-line */ outline: 0; } @@ -1686,87 +2072,43 @@ solid category: Button elements: ons-button markup: | - + */ .button--large--cta { /* stylelint-disable-line */ - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; border: none; background-color: #25a6d9; background-color: #25a6d9; + background-color: var(--button-cta-background-color); color: white; color: white; + color: var(--button-cta-color); font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); line-height: 36px; line-height: 36px; + line-height: var(--button-large-line-height); + padding: 4px 12px; padding: 4px 12px; - padding: 4px -12px; + padding: var(--button-large-padding); width: 100%; text-align: center; display: block; } -.button--large--cta:hover { /* stylelint-disable-line */ - transition: none; -} -.button--large--cta:focus { /* stylelint-disable-line */ - outline: 0; -} .button--large--cta:active { /* stylelint-disable-line */ color: white; color: white; + color: var(--button-cta-color); background-color: #25a6d9; background-color: #25a6d9; + background-color: var(--button-cta-background-color); transition: none; opacity: 0.2; opacity: 0.2; -} -.button--large--cta:disabled, .button--large--cta[disabled] { /* stylelint-disable-line */ - opacity: 0.3; - cursor: default; - pointer-events: none; + opacity: var(--button-active-opacity); } /*~ name: Material Button @@ -1777,70 +2119,35 @@ solid */ .button--material { - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; + /* mixin: button--material */ + /* mixin: material-shadow-1 */ box-shadow: - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12), - 0 3px 1px -2px rgba(0, 0, 0, 0.2); + 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 1px 5px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -2px rgba(0, 0, 0, 0.2); + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + min-height: 36px; line-height: 36px; padding: 0 16px; text-align: center; font-size: 14px; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); text-transform: uppercase; background-color: #2979ff; background-color: #2979ff; + background-color: var(--material-button-background-color); color: #ffffff; color: #ffffff; + color: var(--material-button-text-color); font-weight: 500; font-weight: 500; - transition: background-color 0.25s linear; + font-weight: var(--font-weight--large); + opacity: 1; transition: all 0.25s linear; } @@ -1848,26 +2155,35 @@ solid transition: all 0.25s linear; } .button--material:active { + /* mixin: material-shadow-3 */ box-shadow: - 0 6px 10px 0 rgba(0, 0, 0, 0.14), - 0 1px 18px 0 rgba(0, 0, 0, 0.12), - 0 3px 5px -1px rgba(0, 0, 0, 0.4); + 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12), + 0 3px 5px -1px rgba(0, 0, 0, 0.4); + background-color: #2979ff; + background-color: #2979ff; + + background-color: var(--material-button-background-color); opacity: 0.9; transition: all 0.25s linear; } -.button--material:focus { - outline: 0; -} .button--material:disabled, .button--material[disabled] { transition: none; + + /* mixin: material-shadow-0 */ box-shadow: none; + background-color: rgba(79, 79, 79, 0.26); + background-color: rgba(79, 79, 79, 0.26); + + background-color: var(--material-button-disabled-background-color); color: rgba(0, 0, 0, 0.26); color: rgba(0, 0, 0, 0.26); + color: var(--material-button-disabled-color); opacity: 1; } /*~ @@ -1879,106 +2195,79 @@ solid */ .button--material--flat { /* stylelint-disable-line */ - position: relative; - display: inline-block; - box-sizing: border-box; - background-clip: padding-box; - padding: 0; - margin: 0; - font: inherit; - color: inherit; - background: transparent; - border: none; - line-height: normal; - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; - cursor: default; - -webkit-user-select: none; - user-select: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - height: auto; - text-decoration: none; - padding: 4px 10px; - padding: 4px -10px; - font-size: 17px; - font-size: 17px; - line-height: 32px; - line-height: 32px; - letter-spacing: 0; - color: white; - color: white; - vertical-align: middle; - background-color: #0076ff; - background-color: #0076ff; - border: 0 solid currentColor; - border-radius: 3px; - border-radius: 3px; - transition: none; - box-shadow: - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12), - 0 3px 1px -2px rgba(0, 0, 0, 0.2); + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + min-height: 36px; line-height: 36px; padding: 0 16px; text-align: center; font-size: 14px; -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); text-transform: uppercase; - background-color: #2979ff; - background-color: #2979ff; - color: #ffffff; - color: #ffffff; font-weight: 500; font-weight: 500; - transition: background-color 0.25s linear; + font-weight: var(--font-weight--large); + + /* mixin: material-shadow-0 */ box-shadow: none; + background-color: transparent; color: #2979ff; color: #2979ff; + color: var(--material-button-background-color); transition: all 0.25s linear; } .button--material--flat:hover { /* stylelint-disable-line */ transition: all 0.25s linear; } .button--material--flat:focus { /* stylelint-disable-line */ + /* mixin: material-shadow-0 */ box-shadow: none; + background-color: transparent; color: #2979ff; color: #2979ff; + color: var(--material-button-background-color); outline: 0; opacity: 1; border: none; } .button--material--flat:active { /* stylelint-disable-line */ + /* mixin: material-shadow-0 */ box-shadow: none; + outline: 0; opacity: 1; border: none; background-color: rgba(153, 153, 153, 0.2); background-color: rgba(153, 153, 153, 0.2); + background-color: var(--material-flat-button-active-background-color); color: #2979ff; color: #2979ff; + color: var(--material-button-background-color); transition: all 0.25s linear; } .button--material--flat:disabled, .button--material--flat[disabled] {/* stylelint-disable-line */ transition: none; opacity: 1; + + /* mixin: material-shadow-0 */ box-shadow: none; + background-color: transparent; color: rgba(0, 0, 0, 0.26); color: rgba(0, 0, 0, 0.26); + color: var(--material-button-disabled-color); +} +:root { + --button-bar-active-color: var(--button-bar-active-text-color); + --button-bar-border-top: 1px solid var(--button-bar-color); + --button-bar-border-bottom: 1px solid var(--button-bar-color); + --button-bar-border: 0 solid var(--button-bar-color); + --button-bar-border-radius: 4px; } /*~ name: Button Bar @@ -1997,55 +2286,68 @@ solid */ .button-bar { + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + display: -webkit-inline-flex; + display: inline-flex; -webkit-align-items: stretch; - align-items: stretch; + align-items: stretch; -webkit-align-content: stretch; align-content: stretch; -webkit-flex-wrap: nowrap; - flex-wrap: nowrap; + flex-wrap: nowrap; margin: 0; padding: 0; border: none; } .button-bar__item { + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + border-radius: 0; width: 100%; padding: 0; margin: 0; + + /* mixin: hide-input-parent */ position: relative; + overflow: hidden; box-sizing: border-box; } .button-bar__button { + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + border-radius: 0; background-color: transparent; - color: #0076ff; - color: #0076ff; - border: 1px solid #0076ff; - border: 1px solid #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--button-bar-color); + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: 1px solid var(--button-bar-color); border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-left-width: 0; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); padding: 0; font-size: 13px; height: 27px; @@ -2055,6 +2357,7 @@ solid box-sizing: border-box; } .button-bar__button:disabled { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -2066,43 +2369,73 @@ solid outline: 0; } :checked + .button-bar__button { - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--button-bar-color); color: #fff; color: #fff; + color: var(--button-bar-active-color); transition: none; } .button-bar__button:active, :active + .button-bar__button { - background-color: rgb(179, 214, 255); - background-color: rgb(179, 214, 255); - border: 0 solid #0076ff; - border: 0 -solid -#0076ff; - border-top: 1px solid #0076ff; - border-top: 1px -solid -#0076ff; - border-bottom: 1px solid #0076ff; - border-bottom: 1px -solid -#0076ff; - border-right: 1px solid #0076ff; - border-right: 1px solid #0076ff; + background-color: initial; + background-color: initial; + background-color: var(--button-bar-active-background-color); + border: 0 solid rgba(0, 118, 255); + border: 0 solid rgba(0, 118, 255); + border: var(--button-bar-border); + border-top: 1px solid rgba(0, 118, 255); + border-top: 1px solid rgba(0, 118, 255); + border-top: var(--button-bar-border-top); + border-bottom: 1px solid rgba(0, 118, 255); + border-bottom: 1px solid rgba(0, 118, 255); + border-bottom: var(--button-bar-border-bottom); + border-right: 1px solid rgba(0, 118, 255); + border-right: 1px solid rgba(0, 118, 255); + border-right: 1px solid var(--button-bar-color); font-size: 13px; width: 100%; transition: none; } +/* Hack to replicate blend from the deprecated color-mod function. */ +.button-bar__button:active:before, +:active + .button-bar__button:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + --blend-background-color__base: var(--button-bar-color); + --blend-background-color__color: var(--button-bar-active-background-color-default-blend-color); + /* stylelint-disable-next-line no-unknown-animations */ + -webkit-animation: blend-background-color 1s -0.7s linear forwards paused; + animation: blend-background-color 1s -0.7s linear forwards paused; + -webkit-animation: blend-background-color 1s -0.7s linear forwards paused; + -webkit-animation: blend-background-color 1s var(--button-bar-active-background-color-default-blend-time) linear forwards paused; + animation: blend-background-color 1s -0.7s linear forwards paused; + animation: blend-background-color 1s var(--button-bar-active-background-color-default-blend-time) linear forwards paused; +} .button-bar__item:first-child > .button-bar__button { border-left-width: 1px; border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; + border-radius: var(--button-bar-border-radius) 0 0 var(--button-bar-border-radius); } .button-bar__item:last-child > .button-bar__button { border-right-width: 1px; border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; + border-radius: 0 var(--button-bar-border-radius) var(--button-bar-border-radius) 0; +} +:root { + --segment-active-color: var(--segment-active-text-color); + --segment-border-top: 1px solid var(--segment-color); + --segment-border-bottom: 1px solid var(--segment-color); + --segment-border: 0 solid var(--segment-color); + --segment-border-radius: 4px; } /*~ name: Segment @@ -2124,12 +2457,17 @@ solid */ .segment { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + display: -webkit-inline-flex; + display: inline-flex; -webkit-align-items: stretch; align-items: stretch; @@ -2142,16 +2480,23 @@ solid border: none; } .segment__item { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + border-radius: 0; width: 100%; padding: 0; margin: 0; + + /* mixin: hide-input-parent */ position: relative; + overflow: hidden; box-sizing: border-box; display: block; @@ -2159,6 +2504,8 @@ solid border: none; } .segment__input { + + /* mixin: hide-input */ position: absolute; right: 0; top: 0; @@ -2174,26 +2521,30 @@ solid height: 100%; margin: 0; -webkit-appearance: none; - appearance: none; + appearance: none; } .segment__button { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + border-radius: 0; background-color: transparent; - color: #0076ff; - color: #0076ff; - border: 1px solid #0076ff; - border: 1px solid #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--segment-color); + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: 1px solid var(--segment-color); border-top-width: 1px; border-bottom-width: 1px; border-right-width: 1px; border-left-width: 0; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); padding: 0; font-size: 13px; height: 29px; @@ -2204,6 +2555,7 @@ solid text-align: center; } .segment__item:disabled { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -2215,42 +2567,64 @@ solid outline: 0; } :active + .segment__button { - background-color: rgb(179, 214, 255); - background-color: rgb(179, 214, 255); - border: 0 solid #0076ff; - border: 0 -solid -#0076ff; - border-top: 1px solid #0076ff; - border-top: 1px -solid -#0076ff; - border-bottom: 1px solid #0076ff; - border-bottom: 1px -solid -#0076ff; - border-right: 1px solid #0076ff; - border-right: 1px solid #0076ff; + background-color: initial; + background-color: initial; + background-color: var(--segment-active-background-color); + border: 0 solid rgba(0, 118, 255); + border: 0 solid rgba(0, 118, 255); + border: var(--segment-border); + border-top: 1px solid rgba(0, 118, 255); + border-top: 1px solid rgba(0, 118, 255); + border-top: var(--segment-border-top); + border-bottom: 1px solid rgba(0, 118, 255); + border-bottom: 1px solid rgba(0, 118, 255); + border-bottom: var(--segment-border-bottom); + border-right: 1px solid rgba(0, 118, 255); + border-right: 1px solid rgba(0, 118, 255); + border-right: 1px solid var(--segment-color); font-size: 13px; width: 100%; transition: none; } +/* Hack to replicate blend from the deprecated color-mod function. */ +:active + .segment__button:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: -1; + --blend-background-color__base: var(--segment-color); + --blend-background-color__color: var(--segment-active-background-color-default-blend-color); + /* stylelint-disable-next-line no-unknown-animations */ + -webkit-animation: blend-background-color 1s -0.7s linear forwards paused; + animation: blend-background-color 1s -0.7s linear forwards paused; + -webkit-animation: blend-background-color 1s -0.7s linear forwards paused; + -webkit-animation: blend-background-color 1s var(--segment-active-background-color-default-blend-time) linear forwards paused; + animation: blend-background-color 1s -0.7s linear forwards paused; + animation: blend-background-color 1s var(--segment-active-background-color-default-blend-time) linear forwards paused; +} :checked + .segment__button { - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--segment-color); color: #fff; color: #fff; + color: var(--segment-active-color); transition: none; } .segment__item:first-child > .segment__button { border-left-width: 1px; border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; + border-radius: var(--segment-border-radius) 0 0 var(--segment-border-radius); } .segment__item:last-child > .segment__button { border-right-width: 1px; border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; + border-radius: 0 var(--segment-border-radius) var(--segment-border-radius) 0; } /*~ name: Material Segment @@ -2277,35 +2651,45 @@ solid box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24); } .segment--material__button { + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-weight: 400; + font-weight: var(--material-font-weight); + font-size: 14px; height: 32px; line-height: 32px; border-width: 0; color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38); + color: var(--material-segment-text-color); border-radius: 0; background-color: #fafafa; background-color: #fafafa; + background-color: var(--material-segment-background-color); } :active + .segment--material__button { background-color: #fafafa; background-color: #fafafa; + background-color: var(--material-segment-background-color); border-radius: 0; border-width: 0; font-size: 14px; transition: none; color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38); + color: var(--material-segment-text-color); } :checked + .segment--material__button { background-color: #c8c8c8; background-color: #c8c8c8; + background-color: var(--material-segment-active-background-color); color: #353535; color: #353535; + color: var(--material-segment-active-text-color); border-radius: 0; border-width: 0; } @@ -2314,7 +2698,18 @@ solid border-radius: 0; border-width: 0; } -:root { /* Text color */ /* Text color active */ +:root { + --tabbar-button-color: var(--tabbar-text-color); /* Text color */ + --tabbar-active-color: var(--tabbar-highlight-text-color); /* Text color active */ + --material-tabbar-current-color: var(--material-tabbar-highlight-text-color); + --tabbar-active-border-top: none; + --tabbar-focus-border-top: none; + --tabbar-height: 49px; + --tabbar-button-line-height: 49px; + --tabbar-button-border: none; + --tabbar-active-box-shadow: none; + --tabbar-button-focus-box-shadow: none; + --tabbar-border-top: 1px solid var(--tabbar-border-color); } /*~ name: Icon Tabbar @@ -2377,12 +2772,17 @@ solid */ .tabbar { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + display: -webkit-flex; + display: flex; position: absolute; bottom: 0; @@ -2393,32 +2793,41 @@ solid padding: 0; height: 49px; height: 49px; + height: var(--tabbar-height); background-color: #fafafa; background-color: #fafafa; + background-color: var(--tabbar-background-color); border-top: 1px solid #ccc; - border-top: 1px -solid -#ccc; + border-top: 1px solid #ccc; + border-top: var(--tabbar-border-top); width: 100%; } -@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx) { -.tabbar { - border-top: none; - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: top; - background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%); - background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%); +/* @media (--retina-query) */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + .tabbar { + border-top: none; + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: top; + background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%); + background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%); + background-image: linear-gradient(180deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%); + } } - } .tabbar__item { + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + + /* mixin: hide-input-parent */ position: relative; + -webkit-flex-grow: 1; + flex-grow: 1; -webkit-flex-basis: 0; flex-basis: 0; @@ -2426,6 +2835,7 @@ solid border-radius: 0; } .tabbar__item > input { + /* mixin: hide-input */ position: absolute; right: 0; top: 0; @@ -2441,53 +2851,62 @@ solid height: 100%; margin: 0; -webkit-appearance: none; - appearance: none; + appearance: none; } .tabbar__button { - font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; + /* mixin: reset-font */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; - padding: 0; + + /* mixin: reset-base */ margin: 0; font: inherit; - color: inherit; background: transparent; border: none; - line-height: normal; + + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; + + /* mixin: ellipsis */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + position: relative; display: inline-block; text-decoration: none; padding: 0; height: 49px; height: 49px; + height: var(--tabbar-button-line-height); letter-spacing: 0; color: #999; color: #999; + color: var(--tabbar-button-color); vertical-align: top; background-color: transparent; border-top: none; border-top: none; + border-top: var(--tabbar-button-border); width: 100%; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); line-height: 49px; line-height: 49px; + line-height: var(--tabbar-button-line-height); } -@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx) { -.tabbar__button { - border-top: none -} +/* @media (--retina-query) */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + .tabbar__button { + border-top: none; } +} .tabbar__icon { font-size: 24px; padding: 0; @@ -2497,11 +2916,15 @@ solid height: 28px; } .tabbar__label { + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + display: inline-block; } .tabbar__badge.notification { @@ -2527,24 +2950,30 @@ solid margin: 0; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); } .tabbar__label:first-child { font-size: 16px; line-height: 49px; line-height: 49px; + line-height: var(--tabbar-button-line-height); margin: 0; padding: 0; } :checked + .tabbar__button { - color: #0076ff; - color: #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--tabbar-active-color); background-color: transparent; box-shadow: none; box-shadow: none; + box-shadow: var(--tabbar-active-box-shadow); border-top: none; border-top: none; + border-top: var(--tabbar-active-border-top); } .tabbar__button:disabled { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -2553,8 +2982,10 @@ solid z-index: 1; border-top: none; border-top: none; + border-top: var(--tabbar-focus-border-top); box-shadow: none; box-shadow: none; + box-shadow: var(--tabbar-button-focus-box-shadow); outline: 0; } .tabbar__content { @@ -2564,6 +2995,7 @@ solid right: 0; bottom: 49px; bottom: 49px; + bottom: var(--tabbar-height); z-index: 0; } .tabbar--autogrow .tabbar__item { @@ -2636,23 +3068,25 @@ solid bottom: auto; border-top: none; border-bottom: 1px solid #ccc; - border-bottom: 1px -solid -#ccc; + border-bottom: 1px solid #ccc; + border-bottom: var(--tabbar-border-top); } -@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi),(min-resolution: 2dppx) { -.tabbar--top { - border-bottom: none; - background-size: 100% 1px; - background-repeat: no-repeat; - background-position: bottom; - background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%); - background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%); +/* @media (--retina-query) */ +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { + .tabbar--top { + border-bottom: none; + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; + background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%); + background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%); + background-image: linear-gradient(0deg, var(--tabbar-border-color), var(--tabbar-border-color) 50%, transparent 50%); + } } - } .tabbar--top__content { top: 49px; top: 49px; + top: var(--tabbar-height); left: 0; right: 0; bottom: 0; @@ -2728,8 +3162,9 @@ solid } :checked + .tabbar--top-border__button { background-color: transparent; - border-bottom: 4px solid #0076ff; - border-bottom: 4px solid #0076ff; + border-bottom: 4px solid rgba(0, 118, 255); + border-bottom: 4px solid rgba(0, 118, 255); + border-bottom: 4px solid var(--tabbar-active-color); } .tabbar__border { position: absolute; @@ -2737,13 +3172,15 @@ solid left: 0; width: 0; height: 4px; - background-color: #0076ff; - background-color: #0076ff; + background-color: rgba(0, 118, 255); + background-color: rgba(0, 118, 255); + background-color: var(--tabbar-active-color); } .tabbar--material { background: none; background-color: #ffffff; background-color: #ffffff; + background-color: var(--material-tabbar-background-color); border-bottom-width: 0; box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.14), @@ -2754,13 +3191,16 @@ solid background-color: transparent; color: #31313a; color: #31313a; + color: var(--material-tabbar-text-color); text-transform: uppercase; font-size: 14px; - font-weight: 500; + + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-weight: 400; + font-weight: var(--material-font-weight); } .tabbar--material__button:after { content: ''; @@ -2772,6 +3212,7 @@ solid margin-top: -2px; background-color: #31313a; background-color: #31313a; + background-color: var(--material-tabbar-current-color); } :checked + .tabbar--material__button:after { width: 100%; @@ -2781,15 +3222,18 @@ solid background-color: transparent; color: #31313a; color: #31313a; + color: var(--material-tabbar-current-color); } .tabbar--material__item:not([ripple]):active { background-color: rgba(49, 49, 58, 0.1); background-color: rgba(49, 49, 58, 0.1); + background-color: var(--material-tabbar-highlight-color); } .tabbar--material__border { height: 2px; background-color: #31313a; background-color: #31313a; + background-color: var(--material-tabbar-current-color); } /*~ name: Material Tabbar (Icon only) @@ -2855,16 +3299,18 @@ solid */ .tabbar--material__label { + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-weight: 400; + font-weight: var(--material-font-weight); } .tabbar--material__label:first-child { + /* mixin: material-font */ font-family: 'Roboto', 'Noto', sans-serif; -webkit-font-smoothing: antialiased; - font-weight: 400; - font-weight: 400; + letter-spacing: 0.015em; font-weight: 500; font-size: 14px; @@ -2872,6 +3318,14 @@ solid .tabbar--material__icon + .tabbar--material__label { font-size: 10px; } +:root { + --toolbar-button-background-color: rgba(0, 0, 0, 0); + --toolbar-button-border-color: var(--toolbar-button-color); + --toolbar-button-border-radius: 2px; + --toolbar-button-padding: 4px 10px; + --toolbar-button-active-background-color: var(--toolbar-button-background-color); + --toolbar-button-border: 1px solid var(--toolbar-button-border-color); +} /*~ name: Toolbar Button category: Toolbar Button @@ -2891,36 +3345,45 @@ solid */ .toolbar-button { + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-weight: 400; + padding: 4px 10px; - padding: 4px -10px; + + padding: 4px 10px; + + padding: var(--toolbar-button-padding); letter-spacing: 0; - color: #0076ff; - color: #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--toolbar-button-color); background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); + background-color: var(--toolbar-button-background-color); border-radius: 2px; border-radius: 2px; + border-radius: var(--toolbar-button-border-radius); border: 1px solid transparent; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); font-size: 17px; font-size: 17px; + font-size: var(--font-size); transition: none; } .toolbar-button:active { background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); + background-color: var(--toolbar-button-active-background-color); transition: none; opacity: 0.2; } .toolbar-button:disabled, .toolbar-button[disabled] { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -2933,10 +3396,9 @@ solid transition: none; } .toolbar-button--outline { - border: 1px solid #0076ff; - border: 1px -solid -#0076ff; + border: 1px solid rgba(0, 118, 255); + border: 1px solid rgba(0, 118, 255); + border: var(--toolbar-button-border); margin: auto 8px; padding-left: 6px; padding-right: 6px; @@ -2961,6 +3423,7 @@ solid font-size: 22px; color: #1e88e5; color: #1e88e5; + color: var(--material-toolbar-button-color); display: inline-block; padding: 0 12px; height: 100%; @@ -2985,10 +3448,12 @@ solid height: 44px; line-height: 44px; padding-left: 8px; - color: #0076ff; - color: #0076ff; + color: rgba(0, 118, 255); + color: rgba(0, 118, 255); + color: var(--toolbar-button-color); background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0); + background-color: var(--toolbar-button-background-color); display: inline-block; } .back-button:active { @@ -3000,17 +3465,21 @@ solid vertical-align: top; line-height: 44px; line-height: 44px; + line-height: var(--toolbar-height); font-size: 17px; font-size: 17px; + font-size: var(--font-size); font-weight: 500; font-weight: 500; + font-weight: var(--font-weight--large); } .back-button__icon { margin-right: 6px; display: -webkit-inline-flex; display: inline-flex; - fill: #0076ff; - fill: #0076ff; + fill: rgba(0, 118, 255); + fill: rgba(0, 118, 255); + fill: var(--toolbar-button-color); -webkit-align-items: center; align-items: center; height: 100%; @@ -3019,6 +3488,7 @@ solid font-size: 22px; color: #1e88e5; color: #1e88e5; + color: var(--material-toolbar-button-color); display: inline-block; padding: 0 12px; height: 100%; @@ -3038,6 +3508,7 @@ solid display: inline-flex; fill: #1e88e5; fill: #1e88e5; + fill: var(--material-toolbar-button-color); -webkit-align-items: center; align-items: center; height: 100%; @@ -3045,7 +3516,15 @@ solid .back-button--material:active { opacity: 1; } -:root { /* background color active */ +:root { + --checkbox-size: 22px; + --checkbox-border: 1px solid #c7c7cd; + --checkbox-checked-background-color: var(--highlight-color); /* background color active */ + --background-color--before--checkbox: var(--checkbox-checked-background-color); + --checkmark-border: 2px solid #fff; + --material-checkbox-size: 18px; + --material-checkbox-focus-ring-size: 40px; + --material-checkbox-focus-ring-shadow-size: calc((var(--material-checkbox-focus-ring-size) - var(--material-checkbox-size)) / 2); } /*~ name: Checkbox @@ -3074,40 +3553,61 @@ solid position: relative; display: inline-block; vertical-align: top; + + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; + font-weight: var(--font-weight); + line-height: 22px; + line-height: 22px; + + line-height: var(--checkbox-size); } .checkbox__checkmark { + /* mixin: reset-box-model */ box-sizing: border-box; background-clip: padding-box; + position: relative; display: inline-block; vertical-align: top; + + /* mixin: reset-cursor */ cursor: default; -webkit-user-select: none; - user-select: none; + user-select: none; + + /* mixin: reset-font */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-weight: 400; - position: relative; + font-weight: var(--font-weight); + height: 22px; + height: 22px; + + height: var(--checkbox-size); width: 22px; width: 22px; + width: var(--checkbox-size); pointer-events: none; } .checkbox__input, .checkbox__input:checked { + /* mixin: hide-input */ position: absolute; right: 0; top: 0; @@ -3123,39 +3623,47 @@ solid height: 100%; margin: 0; -webkit-appearance: none; - appearance: none; + appearance: none; } .checkbox__checkmark:before { + /* mixin: checkbox--before */ content: ''; position: absolute; + + /* mixin: reset-box-model */ box-sizing: border-box; - background-clip: padding-box; + width: 22px; + width: 22px; + + width: var(--checkbox-size); height: 22px; height: 22px; + height: var(--checkbox-size); background: transparent; border: 1px solid #c7c7cd; - border: 1px -solid -#c7c7cd; + border: 1px solid #c7c7cd; + border: var(--checkbox-border); border-radius: 22px; border-radius: 22px; + border-radius: var(--checkbox-size); left: 0; } /* checkmark's line */ .checkbox__checkmark:after { + /* mixin: checkbox--before */ content: ''; position: absolute; + top: 7px; left: 5px; width: 11px; height: 5px; background: transparent; border: 2px solid #fff; - border: 2px -solid -#fff; + border: 2px solid #fff; + border: var(--checkmark-border); border-width: 1px; border-top: none; border-right: none; @@ -3165,14 +3673,16 @@ solid opacity: 0; } :checked + .checkbox__checkmark:before { - background: #0076ff; - background: #0076ff; + background: rgba(0, 118, 255); + background: rgba(0, 118, 255); + background: var(--background-color--before--checkbox); border: none; } :checked + .checkbox__checkmark:after { opacity: 1; } :disabled + .checkbox__checkmark { + /* mixin: disabled */ opacity: 0.3; cursor: default; pointer-events: none; @@ -3185,122 +3695,47 @@ solid category: Checkbox elements: ons-input markup: | -