| Index: chrome/browser/resources/md_downloads/vulcanized.html
|
| diff --git a/chrome/browser/resources/md_downloads/vulcanized.html b/chrome/browser/resources/md_downloads/vulcanized.html
|
| index 1658f92c489958641c1e71ca5c412e16874c4e08..35c3c9d60cfe14d71c580d838687f0cb01c2ba94 100644
|
| --- a/chrome/browser/resources/md_downloads/vulcanized.html
|
| +++ b/chrome/browser/resources/md_downloads/vulcanized.html
|
| @@ -59,37 +59,38 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| </head>
|
| <body><div hidden="" by-vulcanize=""><script src="chrome://resources/js/load_time_data.js"></script>
|
| <script src="chrome://downloads/strings.js"></script>
|
| -<dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/">
|
| +<dom-module id="iron-list" assetpath="chrome://resources/polymer/v1_0/iron-list/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| + <style scope="iron-list">:host {
|
| + display: block;
|
| position: relative;
|
| - }
|
| +}
|
| +
|
| +@media only screen and (-webkit-max-device-pixel-ratio: 1) {
|
| +:host {
|
| + will-change: transform;
|
| +}
|
|
|
| - @media only screen and (-webkit-max-device-pixel-ratio: 1) {
|
| - :host {
|
| - will-change: transform;
|
| - }
|
| - }
|
| +}
|
|
|
| - #items {
|
| - @apply(--iron-list-items-container);
|
| +#items {
|
| + ;
|
| position: relative;
|
| - }
|
| +}
|
|
|
| - :host(:not([grid])) #items > ::content > * {
|
| - width: 100%;
|
| - };
|
| +:host(:not([grid])) #items > ::content > * {
|
| + width: 100%;
|
| +}
|
|
|
| - #items > ::content > * {
|
| - box-sizing: border-box;
|
| +#items > ::content > * {
|
| + box-sizing: border-box;
|
| margin: 0;
|
| position: absolute;
|
| top: 0;
|
| will-change: transform;
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
|
|
| <array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}">
|
| </array-selector>
|
| @@ -108,358 +109,132 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| }
|
| </style>
|
|
|
| -<style is="custom-style">
|
| - :root {
|
| +<style is="custom-style" css-build="shadow">html {
|
| + --layout_-_display: flex;;
|
|
|
| - --layout: {
|
| - display: -ms-flexbox;
|
| - display: -webkit-flex;
|
| - display: flex;
|
| - };
|
| -
|
| - --layout-inline: {
|
| - display: -ms-inline-flexbox;
|
| - display: -webkit-inline-flex;
|
| - display: inline-flex;
|
| - };
|
| -
|
| - --layout-horizontal: {
|
| - @apply(--layout);
|
| -
|
| - -ms-flex-direction: row;
|
| - -webkit-flex-direction: row;
|
| - flex-direction: row;
|
| - };
|
| -
|
| - --layout-horizontal-reverse: {
|
| - @apply(--layout);
|
| -
|
| - -ms-flex-direction: row-reverse;
|
| - -webkit-flex-direction: row-reverse;
|
| - flex-direction: row-reverse;
|
| - };
|
| -
|
| - --layout-vertical: {
|
| - @apply(--layout);
|
| -
|
| - -ms-flex-direction: column;
|
| - -webkit-flex-direction: column;
|
| - flex-direction: column;
|
| - };
|
| -
|
| - --layout-vertical-reverse: {
|
| - @apply(--layout);
|
| -
|
| - -ms-flex-direction: column-reverse;
|
| - -webkit-flex-direction: column-reverse;
|
| - flex-direction: column-reverse;
|
| - };
|
| -
|
| - --layout-wrap: {
|
| - -ms-flex-wrap: wrap;
|
| - -webkit-flex-wrap: wrap;
|
| - flex-wrap: wrap;
|
| - };
|
| -
|
| - --layout-wrap-reverse: {
|
| - -ms-flex-wrap: wrap-reverse;
|
| - -webkit-flex-wrap: wrap-reverse;
|
| - flex-wrap: wrap-reverse;
|
| - };
|
| -
|
| - --layout-flex-auto: {
|
| - -ms-flex: 1 1 auto;
|
| - -webkit-flex: 1 1 auto;
|
| - flex: 1 1 auto;
|
| - };
|
| -
|
| - --layout-flex-none: {
|
| - -ms-flex: none;
|
| - -webkit-flex: none;
|
| - flex: none;
|
| - };
|
| -
|
| - --layout-flex: {
|
| - -ms-flex: 1 1 0.000000001px;
|
| - -webkit-flex: 1;
|
| - flex: 1;
|
| - -webkit-flex-basis: 0.000000001px;
|
| - flex-basis: 0.000000001px;
|
| - };
|
| -
|
| - --layout-flex-2: {
|
| - -ms-flex: 2;
|
| - -webkit-flex: 2;
|
| - flex: 2;
|
| - };
|
| -
|
| - --layout-flex-3: {
|
| - -ms-flex: 3;
|
| - -webkit-flex: 3;
|
| - flex: 3;
|
| - };
|
| -
|
| - --layout-flex-4: {
|
| - -ms-flex: 4;
|
| - -webkit-flex: 4;
|
| - flex: 4;
|
| - };
|
| -
|
| - --layout-flex-5: {
|
| - -ms-flex: 5;
|
| - -webkit-flex: 5;
|
| - flex: 5;
|
| - };
|
| -
|
| - --layout-flex-6: {
|
| - -ms-flex: 6;
|
| - -webkit-flex: 6;
|
| - flex: 6;
|
| - };
|
| -
|
| - --layout-flex-7: {
|
| - -ms-flex: 7;
|
| - -webkit-flex: 7;
|
| - flex: 7;
|
| - };
|
| -
|
| - --layout-flex-8: {
|
| - -ms-flex: 8;
|
| - -webkit-flex: 8;
|
| - flex: 8;
|
| - };
|
| -
|
| - --layout-flex-9: {
|
| - -ms-flex: 9;
|
| - -webkit-flex: 9;
|
| - flex: 9;
|
| - };
|
| -
|
| - --layout-flex-10: {
|
| - -ms-flex: 10;
|
| - -webkit-flex: 10;
|
| - flex: 10;
|
| - };
|
| -
|
| - --layout-flex-11: {
|
| - -ms-flex: 11;
|
| - -webkit-flex: 11;
|
| - flex: 11;
|
| - };
|
| -
|
| - --layout-flex-12: {
|
| - -ms-flex: 12;
|
| - -webkit-flex: 12;
|
| - flex: 12;
|
| - };
|
| -
|
| - /* alignment in cross axis */
|
| -
|
| - --layout-start: {
|
| - -ms-flex-align: start;
|
| - -webkit-align-items: flex-start;
|
| - align-items: flex-start;
|
| - };
|
| -
|
| - --layout-center: {
|
| - -ms-flex-align: center;
|
| - -webkit-align-items: center;
|
| - align-items: center;
|
| - };
|
| -
|
| - --layout-end: {
|
| - -ms-flex-align: end;
|
| - -webkit-align-items: flex-end;
|
| - align-items: flex-end;
|
| - };
|
| -
|
| - --layout-baseline: {
|
| - -ms-flex-align: baseline;
|
| - -webkit-align-items: baseline;
|
| - align-items: baseline;
|
| - };
|
| -
|
| - /* alignment in main axis */
|
| -
|
| - --layout-start-justified: {
|
| - -ms-flex-pack: start;
|
| - -webkit-justify-content: flex-start;
|
| - justify-content: flex-start;
|
| - };
|
| -
|
| - --layout-center-justified: {
|
| - -ms-flex-pack: center;
|
| - -webkit-justify-content: center;
|
| - justify-content: center;
|
| - };
|
| -
|
| - --layout-end-justified: {
|
| - -ms-flex-pack: end;
|
| - -webkit-justify-content: flex-end;
|
| - justify-content: flex-end;
|
| - };
|
| -
|
| - --layout-around-justified: {
|
| - -ms-flex-pack: distribute;
|
| - -webkit-justify-content: space-around;
|
| - justify-content: space-around;
|
| - };
|
| -
|
| - --layout-justified: {
|
| - -ms-flex-pack: justify;
|
| - -webkit-justify-content: space-between;
|
| - justify-content: space-between;
|
| - };
|
| -
|
| - --layout-center-center: {
|
| - @apply(--layout-center);
|
| - @apply(--layout-center-justified);
|
| - };
|
| -
|
| - /* self alignment */
|
| -
|
| - --layout-self-start: {
|
| - -ms-align-self: flex-start;
|
| - -webkit-align-self: flex-start;
|
| - align-self: flex-start;
|
| - };
|
| -
|
| - --layout-self-center: {
|
| - -ms-align-self: center;
|
| - -webkit-align-self: center;
|
| - align-self: center;
|
| - };
|
| -
|
| - --layout-self-end: {
|
| - -ms-align-self: flex-end;
|
| - -webkit-align-self: flex-end;
|
| - align-self: flex-end;
|
| - };
|
| -
|
| - --layout-self-stretch: {
|
| - -ms-align-self: stretch;
|
| - -webkit-align-self: stretch;
|
| - align-self: stretch;
|
| - };
|
| -
|
| - --layout-self-baseline: {
|
| - -ms-align-self: baseline;
|
| - -webkit-align-self: baseline;
|
| - align-self: baseline;
|
| - };
|
| -
|
| - /* multi-line alignment in main axis */
|
| -
|
| - --layout-start-aligned: {
|
| - -ms-flex-line-pack: start; /* IE10 */
|
| - -ms-align-content: flex-start;
|
| - -webkit-align-content: flex-start;
|
| - align-content: flex-start;
|
| - };
|
| -
|
| - --layout-end-aligned: {
|
| - -ms-flex-line-pack: end; /* IE10 */
|
| - -ms-align-content: flex-end;
|
| - -webkit-align-content: flex-end;
|
| - align-content: flex-end;
|
| - };
|
| -
|
| - --layout-center-aligned: {
|
| - -ms-flex-line-pack: center; /* IE10 */
|
| - -ms-align-content: center;
|
| - -webkit-align-content: center;
|
| - align-content: center;
|
| - };
|
| -
|
| - --layout-between-aligned: {
|
| - -ms-flex-line-pack: justify; /* IE10 */
|
| - -ms-align-content: space-between;
|
| - -webkit-align-content: space-between;
|
| - align-content: space-between;
|
| - };
|
| -
|
| - --layout-around-aligned: {
|
| - -ms-flex-line-pack: distribute; /* IE10 */
|
| - -ms-align-content: space-around;
|
| - -webkit-align-content: space-around;
|
| - align-content: space-around;
|
| - };
|
| -
|
| - /*******************************
|
| - Other Layout
|
| - *******************************/
|
| -
|
| - --layout-block: {
|
| - display: block;
|
| - };
|
| -
|
| - --layout-invisible: {
|
| - visibility: hidden !important;
|
| - };
|
| -
|
| - --layout-relative: {
|
| - position: relative;
|
| - };
|
| -
|
| - --layout-fit: {
|
| - position: absolute;
|
| - top: 0;
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - };
|
| -
|
| - --layout-scroll: {
|
| - -webkit-overflow-scrolling: touch;
|
| - overflow: auto;
|
| - };
|
| -
|
| - --layout-fullbleed: {
|
| - margin: 0;
|
| - height: 100vh;
|
| - };
|
| -
|
| - /* fixed position */
|
| -
|
| - --layout-fixed-top: {
|
| - position: fixed;
|
| - top: 0;
|
| - left: 0;
|
| - right: 0;
|
| - };
|
| -
|
| - --layout-fixed-right: {
|
| - position: fixed;
|
| - top: 0;
|
| - right: 0;
|
| - bottom: 0;
|
| - };
|
| -
|
| - --layout-fixed-bottom: {
|
| - position: fixed;
|
| - right: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - };
|
| -
|
| - --layout-fixed-left: {
|
| - position: fixed;
|
| - top: 0;
|
| - bottom: 0;
|
| - left: 0;
|
| - };
|
| + --layout-inline_-_display: inline-flex;;
|
|
|
| - }
|
| + --layout-horizontal_-_display: var(--layout_-_display); --layout-horizontal_-_-ms-flex-direction: row; --layout-horizontal_-_-webkit-flex-direction: row; --layout-horizontal_-_flex-direction: row;;
|
| +
|
| + --layout-horizontal-reverse_-_display: var(--layout_-_display); --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse; --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse; --layout-horizontal-reverse_-_flex-direction: row-reverse;;
|
| +
|
| + --layout-vertical_-_display: var(--layout_-_display); --layout-vertical_-_-ms-flex-direction: column; --layout-vertical_-_-webkit-flex-direction: column; --layout-vertical_-_flex-direction: column;;
|
| +
|
| + --layout-vertical-reverse_-_display: var(--layout_-_display); --layout-vertical-reverse_-_-ms-flex-direction: column-reverse; --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse; --layout-vertical-reverse_-_flex-direction: column-reverse;;
|
| +
|
| + --layout-wrap_-_-ms-flex-wrap: wrap; --layout-wrap_-_-webkit-flex-wrap: wrap; --layout-wrap_-_flex-wrap: wrap;;
|
| +
|
| + --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse; --layout-wrap-reverse_-_flex-wrap: wrap-reverse;;
|
| +
|
| + --layout-flex-auto_-_-ms-flex: 1 1 auto; --layout-flex-auto_-_-webkit-flex: 1 1 auto; --layout-flex-auto_-_flex: 1 1 auto;;
|
| +
|
| + --layout-flex-none_-_-ms-flex: none; --layout-flex-none_-_-webkit-flex: none; --layout-flex-none_-_flex: none;;
|
| +
|
| + --layout-flex_-_-ms-flex: 1 1 0.000000001px; --layout-flex_-_-webkit-flex: 1; --layout-flex_-_flex: 1; --layout-flex_-_-webkit-flex-basis: 0.000000001px; --layout-flex_-_flex-basis: 0.000000001px;;
|
| +
|
| + --layout-flex-2_-_-ms-flex: 2; --layout-flex-2_-_-webkit-flex: 2; --layout-flex-2_-_flex: 2;;
|
| +
|
| + --layout-flex-3_-_-ms-flex: 3; --layout-flex-3_-_-webkit-flex: 3; --layout-flex-3_-_flex: 3;;
|
| +
|
| + --layout-flex-4_-_-ms-flex: 4; --layout-flex-4_-_-webkit-flex: 4; --layout-flex-4_-_flex: 4;;
|
| +
|
| + --layout-flex-5_-_-ms-flex: 5; --layout-flex-5_-_-webkit-flex: 5; --layout-flex-5_-_flex: 5;;
|
| +
|
| + --layout-flex-6_-_-ms-flex: 6; --layout-flex-6_-_-webkit-flex: 6; --layout-flex-6_-_flex: 6;;
|
| +
|
| + --layout-flex-7_-_-ms-flex: 7; --layout-flex-7_-_-webkit-flex: 7; --layout-flex-7_-_flex: 7;;
|
| +
|
| + --layout-flex-8_-_-ms-flex: 8; --layout-flex-8_-_-webkit-flex: 8; --layout-flex-8_-_flex: 8;;
|
| +
|
| + --layout-flex-9_-_-ms-flex: 9; --layout-flex-9_-_-webkit-flex: 9; --layout-flex-9_-_flex: 9;;
|
| +
|
| + --layout-flex-10_-_-ms-flex: 10; --layout-flex-10_-_-webkit-flex: 10; --layout-flex-10_-_flex: 10;;
|
| +
|
| + --layout-flex-11_-_-ms-flex: 11; --layout-flex-11_-_-webkit-flex: 11; --layout-flex-11_-_flex: 11;;
|
| +
|
| + --layout-flex-12_-_-ms-flex: 12; --layout-flex-12_-_-webkit-flex: 12; --layout-flex-12_-_flex: 12;;
|
| +
|
| +
|
| +
|
| + --layout-start_-_-ms-flex-align: start; --layout-start_-_-webkit-align-items: flex-start; --layout-start_-_align-items: flex-start;;
|
| +
|
| + --layout-center_-_-ms-flex-align: center; --layout-center_-_-webkit-align-items: center; --layout-center_-_align-items: center;;
|
| +
|
| + --layout-end_-_-ms-flex-align: end; --layout-end_-_-webkit-align-items: flex-end; --layout-end_-_align-items: flex-end;;
|
| +
|
| + --layout-baseline_-_-ms-flex-align: baseline; --layout-baseline_-_-webkit-align-items: baseline; --layout-baseline_-_align-items: baseline;;
|
| +
|
| +
|
| +
|
| + --layout-start-justified_-_-ms-flex-pack: start; --layout-start-justified_-_-webkit-justify-content: flex-start; --layout-start-justified_-_justify-content: flex-start;;
|
| +
|
| + --layout-center-justified_-_-ms-flex-pack: center; --layout-center-justified_-_-webkit-justify-content: center; --layout-center-justified_-_justify-content: center;;
|
| +
|
| + --layout-end-justified_-_-ms-flex-pack: end; --layout-end-justified_-_-webkit-justify-content: flex-end; --layout-end-justified_-_justify-content: flex-end;;
|
| +
|
| + --layout-around-justified_-_-ms-flex-pack: distribute; --layout-around-justified_-_-webkit-justify-content: space-around; --layout-around-justified_-_justify-content: space-around;;
|
| +
|
| + --layout-justified_-_-ms-flex-pack: justify; --layout-justified_-_-webkit-justify-content: space-between; --layout-justified_-_justify-content: space-between;;
|
| +
|
| + --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align); --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items); --layout-center-center_-_align-items: var(--layout-center_-_align-items); --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content); --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);;
|
| +
|
| +
|
| +
|
| + --layout-self-start_-_-ms-align-self: flex-start; --layout-self-start_-_-webkit-align-self: flex-start; --layout-self-start_-_align-self: flex-start;;
|
| +
|
| + --layout-self-center_-_-ms-align-self: center; --layout-self-center_-_-webkit-align-self: center; --layout-self-center_-_align-self: center;;
|
| +
|
| + --layout-self-end_-_-ms-align-self: flex-end; --layout-self-end_-_-webkit-align-self: flex-end; --layout-self-end_-_align-self: flex-end;;
|
| +
|
| + --layout-self-stretch_-_-ms-align-self: stretch; --layout-self-stretch_-_-webkit-align-self: stretch; --layout-self-stretch_-_align-self: stretch;;
|
| +
|
| + --layout-self-baseline_-_-ms-align-self: baseline; --layout-self-baseline_-_-webkit-align-self: baseline; --layout-self-baseline_-_align-self: baseline;;
|
| +
|
| +
|
| +
|
| + --layout-start-aligned_-_-ms-flex-line-pack: start; --layout-start-aligned_-_-ms-align-content: flex-start; --layout-start-aligned_-_-webkit-align-content: flex-start; --layout-start-aligned_-_align-content: flex-start;;
|
| +
|
| + --layout-end-aligned_-_-ms-flex-line-pack: end; --layout-end-aligned_-_-ms-align-content: flex-end; --layout-end-aligned_-_-webkit-align-content: flex-end; --layout-end-aligned_-_align-content: flex-end;;
|
| +
|
| + --layout-center-aligned_-_-ms-flex-line-pack: center; --layout-center-aligned_-_-ms-align-content: center; --layout-center-aligned_-_-webkit-align-content: center; --layout-center-aligned_-_align-content: center;;
|
| +
|
| + --layout-between-aligned_-_-ms-flex-line-pack: justify; --layout-between-aligned_-_-ms-align-content: space-between; --layout-between-aligned_-_-webkit-align-content: space-between; --layout-between-aligned_-_align-content: space-between;;
|
| +
|
| + --layout-around-aligned_-_-ms-flex-line-pack: distribute; --layout-around-aligned_-_-ms-align-content: space-around; --layout-around-aligned_-_-webkit-align-content: space-around; --layout-around-aligned_-_align-content: space-around;;
|
| +
|
| +
|
| +
|
| + --layout-block_-_display: block;;
|
| +
|
| + --layout-invisible_-_visibility: hidden !important;;
|
| +
|
| + --layout-relative_-_position: relative;;
|
| +
|
| + --layout-fit_-_position: absolute; --layout-fit_-_top: 0; --layout-fit_-_right: 0; --layout-fit_-_bottom: 0; --layout-fit_-_left: 0;;
|
| +
|
| + --layout-scroll_-_-webkit-overflow-scrolling: touch; --layout-scroll_-_overflow: auto;;
|
| +
|
| + --layout-fullbleed_-_margin: 0; --layout-fullbleed_-_height: 100vh;;
|
| +
|
| +
|
| +
|
| + --layout-fixed-top_-_position: fixed; --layout-fixed-top_-_top: 0; --layout-fixed-top_-_left: 0; --layout-fixed-top_-_right: 0;;
|
| +
|
| + --layout-fixed-right_-_position: fixed; --layout-fixed-right_-_top: 0; --layout-fixed-right_-_right: 0; --layout-fixed-right_-_bottom: 0;;
|
| +
|
| + --layout-fixed-bottom_-_position: fixed; --layout-fixed-bottom_-_right: 0; --layout-fixed-bottom_-_bottom: 0; --layout-fixed-bottom_-_left: 0;;
|
| +
|
| + --layout-fixed-left_-_position: fixed; --layout-fixed-left_-_top: 0; --layout-fixed-left_-_bottom: 0; --layout-fixed-left_-_left: 0;;
|
| +}
|
|
|
| </style>
|
|
|
|
|
| -<dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/">
|
| +<dom-module id="iron-icon" assetpath="chrome://resources/polymer/v1_0/iron-icon/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - @apply(--layout-inline);
|
| - @apply(--layout-center-center);
|
| + <style scope="iron-icon">:host {
|
| + display: var(--layout-inline_-_display);
|
| + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content);
|
| position: relative;
|
|
|
| vertical-align: middle;
|
| @@ -469,17 +244,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|
|
| width: var(--iron-icon-width, 24px);
|
| height: var(--iron-icon-height, 24px);
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/">
|
| +<dom-module id="paper-ripple" assetpath="chrome://resources/polymer/v1_0/paper-ripple/" css-build="shadow">
|
|
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| + <style scope="paper-ripple">:host {
|
| + display: block;
|
| position: absolute;
|
| border-radius: inherit;
|
| overflow: hidden;
|
| @@ -488,163 +263,149 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| right: 0;
|
| bottom: 0;
|
|
|
| - /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers,
|
| - * creating a node (with a position:absolute) in the middle of an event
|
| - * handler "interrupts" that event handler (which happens when the
|
| - * ripple is created on demand) */
|
| +
|
| pointer-events: none;
|
| - }
|
| -
|
| - :host([animating]) {
|
| - /* This resolves a rendering issue in Chrome (as of 40) where the
|
| - ripple is not properly clipped by its parent (which may have
|
| - rounded corners). See: http://jsbin.com/temexa/4
|
| +}
|
|
|
| - Note: We only apply this style conditionally. Otherwise, the browser
|
| - will create a new compositing layer for every ripple element on the
|
| - page, and that would be bad. */
|
| - -webkit-transform: translate(0, 0);
|
| +:host([animating]) {
|
| + -webkit-transform: translate(0, 0);
|
| transform: translate3d(0, 0, 0);
|
| - }
|
| +}
|
|
|
| - #background,
|
| - #waves,
|
| - .wave-container,
|
| - .wave {
|
| - pointer-events: none;
|
| +#background, #waves, .wave-container, .wave {
|
| + pointer-events: none;
|
| position: absolute;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| height: 100%;
|
| - }
|
| +}
|
|
|
| - #background,
|
| - .wave {
|
| - opacity: 0;
|
| - }
|
| +#background, .wave {
|
| + opacity: 0;
|
| +}
|
|
|
| - #waves,
|
| - .wave {
|
| - overflow: hidden;
|
| - }
|
| +#waves, .wave {
|
| + overflow: hidden;
|
| +}
|
|
|
| - .wave-container,
|
| - .wave {
|
| - border-radius: 50%;
|
| - }
|
| +.wave-container, .wave {
|
| + border-radius: 50%;
|
| +}
|
|
|
| - :host(.circle) #background,
|
| - :host(.circle) #waves {
|
| - border-radius: 50%;
|
| - }
|
| +:host(.circle) #background, :host(.circle) #waves {
|
| + border-radius: 50%;
|
| +}
|
|
|
| - :host(.circle) .wave-container {
|
| - overflow: hidden;
|
| - }
|
| - </style>
|
| +:host(.circle) .wave-container {
|
| + overflow: hidden;
|
| +}
|
| +
|
| +</style>
|
|
|
| <div id="background"></div>
|
| <div id="waves"></div>
|
| </template>
|
| </dom-module>
|
| -<style is="custom-style">
|
| +<style is="custom-style" css-build="shadow">html {
|
| + --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);;
|
|
|
| - :root {
|
| + --shadow-none_-_box-shadow: none;;
|
|
|
| - --shadow-transition: {
|
| - transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
| - };
|
| -
|
| - --shadow-none: {
|
| - box-shadow: none;
|
| - };
|
| -
|
| - /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
| +
|
|
|
| - --shadow-elevation-2dp: {
|
| - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-2dp_-_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 3px 1px -2px rgba(0, 0, 0, 0.2);;
|
|
|
| - --shadow-elevation-3dp: {
|
| - box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
| 0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
| - 0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
| - };
|
| + 0 3px 3px -2px rgba(0, 0, 0, 0.4);;
|
|
|
| - --shadow-elevation-4dp: {
|
| - box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-4dp_-_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 2px 4px -1px rgba(0, 0, 0, 0.4);;
|
|
|
| - --shadow-elevation-6dp: {
|
| - box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-6dp_-_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 3px 5px -1px rgba(0, 0, 0, 0.4);;
|
|
|
| - --shadow-elevation-8dp: {
|
| - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
| 0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
| - 0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
| - };
|
| + 0 5px 5px -3px rgba(0, 0, 0, 0.4);;
|
|
|
| - --shadow-elevation-12dp: {
|
| - box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
|
| 0 4px 22px 3px rgba(0, 0, 0, 0.12),
|
| - 0 6px 7px -4px rgba(0, 0, 0, 0.4);
|
| - };
|
| + 0 6px 7px -4px rgba(0, 0, 0, 0.4);;
|
|
|
| - --shadow-elevation-16dp: {
|
| - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
| + --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
| 0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
| - 0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
| - };
|
| -
|
| - }
|
| + 0 8px 10px -5px rgba(0, 0, 0, 0.4);;
|
| +}
|
|
|
| </style>
|
| -<dom-module id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-material/">
|
| +<dom-module id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-material/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| + <style scope="paper-material-shared-styles">:host {
|
| + display: block;
|
| position: relative;
|
| - }
|
| +}
|
| +
|
| +:host([elevation="1"]) {
|
| + box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
| +}
|
|
|
| - :host([elevation="1"]) {
|
| - @apply(--shadow-elevation-2dp);
|
| - }
|
| +:host([elevation="2"]) {
|
| + box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
|
| +}
|
|
|
| - :host([elevation="2"]) {
|
| - @apply(--shadow-elevation-4dp);
|
| - }
|
| +:host([elevation="3"]) {
|
| + box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
|
| +}
|
|
|
| - :host([elevation="3"]) {
|
| - @apply(--shadow-elevation-6dp);
|
| - }
|
| +:host([elevation="4"]) {
|
| + box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
|
| +}
|
|
|
| - :host([elevation="4"]) {
|
| - @apply(--shadow-elevation-8dp);
|
| - }
|
| +:host([elevation="5"]) {
|
| + box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
|
| +}
|
|
|
| - :host([elevation="5"]) {
|
| - @apply(--shadow-elevation-16dp);
|
| - }
|
| - </style>
|
| +</style>
|
| </template>
|
| </dom-module>
|
|
|
|
|
| -<dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/">
|
| +<dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/" css-build="shadow">
|
| <template strip-whitespace="">
|
| - <style include="paper-material-shared-styles">
|
| - :host {
|
| - @apply(--layout-inline);
|
| - @apply(--layout-center-center);
|
| + <style scope="paper-button">:host {
|
| + display: block;
|
| + position: relative;
|
| +}
|
| +
|
| +:host([elevation="1"]) {
|
| + box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
| +}
|
| +
|
| +:host([elevation="2"]) {
|
| + box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
|
| +}
|
| +
|
| +:host([elevation="3"]) {
|
| + box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
|
| +}
|
| +
|
| +:host([elevation="4"]) {
|
| + box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
|
| +}
|
| +
|
| +:host([elevation="5"]) {
|
| + box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
|
| +}
|
| +
|
| +:host {
|
| + display: var(--layout-inline_-_display);
|
| + -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(--layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_-_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit-justify-content); justify-content: var(--layout-center-center_-_justify-content);
|
| position: relative;
|
| box-sizing: border-box;
|
| min-width: 5.14em;
|
| @@ -664,51 +425,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| z-index: 0;
|
| padding: 0.7em 0.57em;
|
|
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-button);
|
| - }
|
| + font-family: var(--paper-font-common-base_-_font-family); -webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
|
| + ;
|
| +}
|
|
|
| - :host([hidden]) {
|
| - display: none !important;
|
| - }
|
| +:host([hidden]) {
|
| + display: none !important;
|
| +}
|
|
|
| - :host([raised].keyboard-focus) {
|
| - font-weight: bold;
|
| - @apply(--paper-button-raised-keyboard-focus);
|
| - }
|
| +:host([raised].keyboard-focus) {
|
| + font-weight: bold;
|
| + ;
|
| +}
|
|
|
| - :host(:not([raised]).keyboard-focus) {
|
| - font-weight: bold;
|
| - @apply(--paper-button-flat-keyboard-focus);
|
| - }
|
| +:host(:not([raised]).keyboard-focus) {
|
| + font-weight: bold;
|
| + ;
|
| +}
|
|
|
| - :host([disabled]) {
|
| - background: #eaeaea;
|
| +:host([disabled]) {
|
| + background: #eaeaea;
|
| color: #a8a8a8;
|
| cursor: auto;
|
| pointer-events: none;
|
|
|
| - @apply(--paper-button-disabled);
|
| - }
|
| + ;
|
| +}
|
| +
|
| +:host([animated]) {
|
| + transition: var(--shadow-transition_-_transition);
|
| +}
|
|
|
| - :host([animated]) {
|
| - @apply(--shadow-transition);
|
| - }
|
| +paper-ripple {
|
| + color: var(--paper-button-ink-color);
|
| +}
|
|
|
| - paper-ripple {
|
| - color: var(--paper-button-ink-color);
|
| - }
|
| - </style>
|
| +</style>
|
|
|
| <content></content>
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/">
|
| +<dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/" css-build="shadow">
|
| <template strip-whitespace="">
|
| - <style>
|
| - :host {
|
| - vertical-align: middle;
|
| + <style scope="paper-icon-button-light">:host {
|
| + vertical-align: middle;
|
| color: inherit;
|
| outline: none;
|
| width: 24px;
|
| @@ -721,32 +482,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| position: relative;
|
| cursor: pointer;
|
|
|
| - /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| +
|
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| -webkit-tap-highlight-color: transparent;
|
| - }
|
| +}
|
|
|
| - :host([disabled]) {
|
| - color: #9b9b9b;
|
| +:host([disabled]) {
|
| + color: #9b9b9b;
|
| pointer-events: none;
|
| cursor: auto;
|
| - }
|
| +}
|
|
|
| - paper-ripple {
|
| - opacity: 0.6;
|
| +paper-ripple {
|
| + opacity: 0.6;
|
| color: currentColor;
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
| <content></content>
|
| </template>
|
| </dom-module>
|
| -<style is="custom-style">
|
| -
|
| - :root {
|
| -
|
| - /* Material Design color palette for Google products */
|
| -
|
| - --google-red-100: #f4c7c3;
|
| +<style is="custom-style" css-build="shadow">html {
|
| + --google-red-100: #f4c7c3;
|
| --google-red-300: #e67c73;
|
| --google-red-500: #db4437;
|
| --google-red-700: #c53929;
|
| @@ -771,7 +528,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| --google-grey-500: #9e9e9e;
|
| --google-grey-700: #616161;
|
|
|
| - /* Material Design color palette from online spec document */
|
| +
|
|
|
| --paper-red-50: #ffebee;
|
| --paper-red-100: #ffcdd2;
|
| @@ -1046,183 +803,191 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| --paper-blue-grey-800: #37474f;
|
| --paper-blue-grey-900: #263238;
|
|
|
| - /* opacity for dark text on a light background */
|
| +
|
| --dark-divider-opacity: 0.12;
|
| - --dark-disabled-opacity: 0.38; /* or hint text or icon */
|
| + --dark-disabled-opacity: 0.38;
|
| --dark-secondary-opacity: 0.54;
|
| --dark-primary-opacity: 0.87;
|
|
|
| - /* opacity for light text on a dark background */
|
| +
|
| --light-divider-opacity: 0.12;
|
| - --light-disabled-opacity: 0.3; /* or hint text or icon */
|
| + --light-disabled-opacity: 0.3;
|
| --light-secondary-opacity: 0.7;
|
| --light-primary-opacity: 1.0;
|
| -
|
| - }
|
| +}
|
|
|
| </style>
|
|
|
|
|
| -<dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/">
|
| +<dom-module id="paper-progress" assetpath="chrome://resources/polymer/v1_0/paper-progress/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| + <style scope="paper-progress">:host {
|
| + display: block;
|
| width: 200px;
|
| position: relative;
|
| overflow: hidden;
|
| - }
|
| +}
|
|
|
| - :host([hidden]) {
|
| - display: none !important;
|
| - }
|
| +:host([hidden]) {
|
| + display: none !important;
|
| +}
|
|
|
| - #progressContainer {
|
| - @apply(--paper-progress-container);
|
| +#progressContainer {
|
| + ;
|
| position: relative;
|
| - }
|
| -
|
| - #progressContainer,
|
| - /* the stripe for the indeterminate animation*/
|
| - .indeterminate::after {
|
| - height: var(--paper-progress-height, 4px);
|
| - }
|
| -
|
| - #primaryProgress,
|
| - #secondaryProgress,
|
| - .indeterminate::after {
|
| - @apply(--layout-fit);
|
| - }
|
| -
|
| - #progressContainer,
|
| - .indeterminate::after {
|
| - background: var(--paper-progress-container-color, --google-grey-300);
|
| - }
|
| -
|
| - :host(.transiting) #primaryProgress,
|
| - :host(.transiting) #secondaryProgress {
|
| - -webkit-transition-property: -webkit-transform;
|
| +}
|
| +
|
| +#progressContainer, .indeterminate::after {
|
| + height: var(--paper-progress-height, 4px);
|
| +}
|
| +
|
| +#primaryProgress, #secondaryProgress, .indeterminate::after {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| +}
|
| +
|
| +#progressContainer, .indeterminate::after {
|
| + background: var(--paper-progress-container-color,var(--google-grey-300));;
|
| +}
|
| +
|
| +:host(.transiting) #primaryProgress, :host(.transiting) #secondaryProgress {
|
| + -webkit-transition-property: -webkit-transform;
|
| transition-property: transform;
|
|
|
| - /* Duration */
|
| +
|
| -webkit-transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
| transition-duration: var(--paper-progress-transition-duration, 0.08s);
|
|
|
| - /* Timing function */
|
| +
|
| -webkit-transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
| transition-timing-function: var(--paper-progress-transition-timing-function, ease);
|
|
|
| - /* Delay */
|
| +
|
| -webkit-transition-delay: var(--paper-progress-transition-delay, 0s);
|
| transition-delay: var(--paper-progress-transition-delay, 0s);
|
| - }
|
| +}
|
|
|
| - #primaryProgress,
|
| - #secondaryProgress {
|
| - @apply(--layout-fit);
|
| +#primaryProgress, #secondaryProgress {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| -webkit-transform-origin: left center;
|
| transform-origin: left center;
|
| -webkit-transform: scaleX(0);
|
| transform: scaleX(0);
|
| will-change: transform;
|
| - }
|
| +}
|
|
|
| - #primaryProgress {
|
| - background: var(--paper-progress-active-color, --google-green-500);
|
| - }
|
| +#primaryProgress {
|
| + background: var(--paper-progress-active-color,var(--google-green-500));;
|
| +}
|
|
|
| - #secondaryProgress {
|
| - background: var(--paper-progress-secondary-color, --google-green-100);
|
| - }
|
| +#secondaryProgress {
|
| + background: var(--paper-progress-secondary-color,var(--google-green-100));;
|
| +}
|
|
|
| - :host([disabled]) #primaryProgress {
|
| - background: var(--paper-progress-disabled-active-color, --google-grey-500);
|
| - }
|
| +:host([disabled]) #primaryProgress {
|
| + background: var(--paper-progress-disabled-active-color,var(--google-grey-500));;
|
| +}
|
|
|
| - :host([disabled]) #secondaryProgress {
|
| - background: var(--paper-progress-disabled-secondary-color, --google-grey-300);
|
| - }
|
| +:host([disabled]) #secondaryProgress {
|
| + background: var(--paper-progress-disabled-secondary-color,var(--google-grey-300));;
|
| +}
|
|
|
| - :host(:not([disabled])) #primaryProgress.indeterminate {
|
| - -webkit-transform-origin: right center;
|
| +:host(:not([disabled])) #primaryProgress.indeterminate {
|
| + -webkit-transform-origin: right center;
|
| transform-origin: right center;
|
| -webkit-animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
| animation: indeterminate-bar var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
| - }
|
| +}
|
|
|
| - :host(:not([disabled])) #primaryProgress.indeterminate::after {
|
| - content: "";
|
| +:host(:not([disabled])) #primaryProgress.indeterminate::after {
|
| + content: "";
|
| -webkit-transform-origin: center center;
|
| transform-origin: center center;
|
|
|
| -webkit-animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
| animation: indeterminate-splitter var(--paper-progress-indeterminate-cycle-duration, 2s) linear infinite;
|
| - }
|
| -
|
| - @-webkit-keyframes indeterminate-bar {
|
| - 0% {
|
| - -webkit-transform: scaleX(1) translateX(-100%);
|
| - }
|
| - 50% {
|
| - -webkit-transform: scaleX(1) translateX(0%);
|
| - }
|
| - 75% {
|
| - -webkit-transform: scaleX(1) translateX(0%);
|
| +}
|
| +
|
| +@-webkit-keyframes indeterminate-bar {
|
| +0% {
|
| + -webkit-transform: scaleX(1) translateX(-100%);
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: scaleX(1) translateX(0%);
|
| +}
|
| +
|
| +75% {
|
| + -webkit-transform: scaleX(1) translateX(0%);
|
| -webkit-animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
| - }
|
| - 100% {
|
| - -webkit-transform: scaleX(0) translateX(0%);
|
| - }
|
| - }
|
| -
|
| - @-webkit-keyframes indeterminate-splitter {
|
| - 0% {
|
| - -webkit-transform: scaleX(.75) translateX(-125%);
|
| - }
|
| - 30% {
|
| - -webkit-transform: scaleX(.75) translateX(-125%);
|
| +}
|
| +
|
| +100% {
|
| + -webkit-transform: scaleX(0) translateX(0%);
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes indeterminate-splitter {
|
| +0% {
|
| + -webkit-transform: scaleX(.75) translateX(-125%);
|
| +}
|
| +
|
| +30% {
|
| + -webkit-transform: scaleX(.75) translateX(-125%);
|
| -webkit-animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
| - }
|
| - 90% {
|
| - -webkit-transform: scaleX(.75) translateX(125%);
|
| - }
|
| - 100% {
|
| - -webkit-transform: scaleX(.75) translateX(125%);
|
| - }
|
| - }
|
| -
|
| - @keyframes indeterminate-bar {
|
| - 0% {
|
| - transform: scaleX(1) translateX(-100%);
|
| - }
|
| - 50% {
|
| - transform: scaleX(1) translateX(0%);
|
| - }
|
| - 75% {
|
| - transform: scaleX(1) translateX(0%);
|
| +}
|
| +
|
| +90% {
|
| + -webkit-transform: scaleX(.75) translateX(125%);
|
| +}
|
| +
|
| +100% {
|
| + -webkit-transform: scaleX(.75) translateX(125%);
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes indeterminate-bar {
|
| +0% {
|
| + transform: scaleX(1) translateX(-100%);
|
| +}
|
| +
|
| +50% {
|
| + transform: scaleX(1) translateX(0%);
|
| +}
|
| +
|
| +75% {
|
| + transform: scaleX(1) translateX(0%);
|
| animation-timing-function: cubic-bezier(.28,.62,.37,.91);
|
| - }
|
| - 100% {
|
| - transform: scaleX(0) translateX(0%);
|
| - }
|
| - }
|
| -
|
| - @keyframes indeterminate-splitter {
|
| - 0% {
|
| - transform: scaleX(.75) translateX(-125%);
|
| - }
|
| - 30% {
|
| - transform: scaleX(.75) translateX(-125%);
|
| +}
|
| +
|
| +100% {
|
| + transform: scaleX(0) translateX(0%);
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes indeterminate-splitter {
|
| +0% {
|
| + transform: scaleX(.75) translateX(-125%);
|
| +}
|
| +
|
| +30% {
|
| + transform: scaleX(.75) translateX(-125%);
|
| animation-timing-function: cubic-bezier(.42,0,.6,.8);
|
| - }
|
| - 90% {
|
| - transform: scaleX(.75) translateX(125%);
|
| - }
|
| - 100% {
|
| - transform: scaleX(.75) translateX(125%);
|
| - }
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +90% {
|
| + transform: scaleX(.75) translateX(125%);
|
| +}
|
| +
|
| +100% {
|
| + transform: scaleX(.75) translateX(125%);
|
| +}
|
| +
|
| +}
|
| +
|
| +</style>
|
|
|
| <div id="progressContainer">
|
| <div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
|
| @@ -1239,13 +1004,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| </defs>
|
| </svg>
|
| </iron-iconset-svg>
|
| -<dom-module id="downloads-item" assetpath="chrome://downloads/">
|
| - <template><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| -:host {
|
| +<dom-module id="downloads-item" assetpath="chrome://downloads/" css-build="shadow">
|
| + <template><style scope="downloads-item">:host {
|
| display: flex;
|
| flex-direction: column;
|
| }
|
| @@ -1291,7 +1051,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| display: flex;
|
| flex: 1;
|
| flex-direction: column;
|
| - min-width: 0; /* This allows #url to ellide correctly. */
|
| + min-width: 0;
|
| padding-bottom: 12px;
|
| padding-top: 16px;
|
| }
|
| @@ -1317,7 +1077,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| }
|
|
|
| #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
|
| - /* TODO(dbeam): animate from top-aligned to centered when items finish? */
|
| align-self: flex-start;
|
| padding-top: 16px;
|
| }
|
| @@ -1340,24 +1099,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| color: rgb(244, 67, 54);
|
| }
|
|
|
| -#name,
|
| -#file-link,
|
| -#url {
|
| +#name, #file-link, #url {
|
| max-width: 100%;
|
| }
|
|
|
| -#name,
|
| -#file-link {
|
| +#name, #file-link {
|
| font-weight: 500;
|
| word-break: break-all;
|
| }
|
|
|
| #name {
|
| - -webkit-margin-end: 12px; /* Only really affects #tag. */
|
| + -webkit-margin-end: 12px;
|
| }
|
|
|
| -#pause-or-resume,
|
| -.is-active :-webkit-any(#name, #file-link, #show) {
|
| +#pause-or-resume, .is-active :-webkit-any(#name, #file-link, #show) {
|
| color: rgb(51, 103, 214);
|
| }
|
|
|
| @@ -1380,9 +1135,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| color: #969696;
|
| }
|
|
|
| -#progress,
|
| -#description:not(:empty),
|
| -.controls {
|
| +#progress, #description:not(:empty), .controls {
|
| margin-top: 16px;
|
| }
|
|
|
| @@ -1404,10 +1157,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| -webkit-margin-start: -.57em;
|
| }
|
|
|
| -#cancel,
|
| -#retry,
|
| -.keep,
|
| -.discard {
|
| +#cancel, #retry, .keep, .discard {
|
| color: #5a5a5a;
|
| }
|
|
|
| @@ -1419,8 +1169,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| -webkit-margin-start: 8px;
|
| }
|
|
|
| -#controlled-by,
|
| -#controlled-by a {
|
| +#controlled-by, #controlled-by a {
|
| color: #5a5a5a;
|
| }
|
|
|
| @@ -1441,7 +1190,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| color: #969696;
|
| font-size: 16px;
|
| height: 32px;
|
| - line-height: 17px; /* TODO(dbeam): why is this necesssary? */
|
| + line-height: 17px;
|
| width: 32px;
|
| }
|
|
|
| @@ -1454,11 +1203,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| right: 10px;
|
| }
|
|
|
| -</style><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| * {
|
| --downloads-item-width: 622px;
|
| }
|
| @@ -1473,11 +1217,6 @@ paper-button {
|
| min-width: auto;
|
| }
|
|
|
| -</style><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| [is='action-link'] {
|
| cursor: pointer;
|
| display: inline-block;
|
| @@ -1578,25 +1317,15 @@ paper-button {
|
| </dom-module>
|
|
|
|
|
| -<style is="custom-style">
|
| -
|
| - :root {
|
| - /*
|
| - * You can use these generic variables in your elements for easy theming.
|
| - * For example, if all your elements use `--primary-text-color` as its main
|
| - * color, then switching from a light to a dark theme is just a matter of
|
| - * changing the value of `--primary-text-color` in your application.
|
| - */
|
| - --primary-text-color: var(--light-theme-text-color);
|
| +<style is="custom-style" css-build="shadow">html {
|
| + --primary-text-color: var(--light-theme-text-color);
|
| --primary-background-color: var(--light-theme-background-color);
|
| --secondary-text-color: var(--light-theme-secondary-color);
|
| --disabled-text-color: var(--light-theme-disabled-color);
|
| --divider-color: var(--light-theme-divider-color);
|
| --error-color: var(--paper-deep-orange-a700);
|
|
|
| - /*
|
| - * Primary and accent colors. Also see color.html for more colors.
|
| - */
|
| +
|
| --primary-color: var(--paper-indigo-500);
|
| --light-primary-color: var(--paper-indigo-100);
|
| --dark-primary-color: var(--paper-indigo-700);
|
| @@ -1606,33 +1335,26 @@ paper-button {
|
| --dark-accent-color: var(--paper-pink-a400);
|
|
|
|
|
| - /*
|
| - * Material Design Light background theme
|
| - */
|
| +
|
| --light-theme-background-color: #ffffff;
|
| --light-theme-base-color: #000000;
|
| --light-theme-text-color: var(--paper-grey-900);
|
| - --light-theme-secondary-color: #737373; /* for secondary text and icons */
|
| - --light-theme-disabled-color: #9b9b9b; /* disabled/hint text */
|
| + --light-theme-secondary-color: #737373;
|
| + --light-theme-disabled-color: #9b9b9b;
|
| --light-theme-divider-color: #dbdbdb;
|
|
|
| - /*
|
| - * Material Design Dark background theme
|
| - */
|
| +
|
| --dark-theme-background-color: var(--paper-grey-900);
|
| --dark-theme-base-color: #ffffff;
|
| --dark-theme-text-color: #ffffff;
|
| - --dark-theme-secondary-color: #bcbcbc; /* for secondary text and icons */
|
| - --dark-theme-disabled-color: #646464; /* disabled/hint text */
|
| + --dark-theme-secondary-color: #bcbcbc;
|
| + --dark-theme-disabled-color: #646464;
|
| --dark-theme-divider-color: #3c3c3c;
|
|
|
| - /*
|
| - * Deprecated values because of their confusing names.
|
| - */
|
| +
|
| --text-primary-color: var(--dark-theme-text-color);
|
| --default-primary-color: var(--primary-color);
|
| -
|
| - }
|
| +}
|
|
|
| </style>
|
| <style>
|
| @@ -1667,289 +1389,254 @@ paper-button {
|
| </if>
|
|
|
| </style>
|
| -<style is="custom-style">
|
| -
|
| - :root {
|
| -
|
| - /* Shared Styles */
|
| - --paper-font-common-base: {
|
| - font-family: 'Roboto', 'Noto', sans-serif;
|
| - -webkit-font-smoothing: antialiased;
|
| - };
|
| -
|
| - --paper-font-common-code: {
|
| - font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
|
| - -webkit-font-smoothing: antialiased;
|
| - };
|
| -
|
| - --paper-font-common-expensive-kerning: {
|
| - text-rendering: optimizeLegibility;
|
| - };
|
| -
|
| - --paper-font-common-nowrap: {
|
| - white-space: nowrap;
|
| - overflow: hidden;
|
| - text-overflow: ellipsis;
|
| - };
|
| -
|
| - /* Material Font Styles */
|
| -
|
| - --paper-font-display4: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 112px;
|
| - font-weight: 300;
|
| - letter-spacing: -.044em;
|
| - line-height: 120px;
|
| - };
|
| -
|
| - --paper-font-display3: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 56px;
|
| - font-weight: 400;
|
| - letter-spacing: -.026em;
|
| - line-height: 60px;
|
| - };
|
| -
|
| - --paper-font-display2: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 45px;
|
| - font-weight: 400;
|
| - letter-spacing: -.018em;
|
| - line-height: 48px;
|
| - };
|
| -
|
| - --paper-font-display1: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 34px;
|
| - font-weight: 400;
|
| - letter-spacing: -.01em;
|
| - line-height: 40px;
|
| - };
|
| -
|
| - --paper-font-headline: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 24px;
|
| - font-weight: 400;
|
| - letter-spacing: -.012em;
|
| - line-height: 32px;
|
| - };
|
| -
|
| - --paper-font-title: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 20px;
|
| - font-weight: 500;
|
| - line-height: 28px;
|
| - };
|
| -
|
| - --paper-font-subhead: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 16px;
|
| - font-weight: 400;
|
| - line-height: 24px;
|
| - };
|
| -
|
| - --paper-font-body2: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 14px;
|
| - font-weight: 500;
|
| - line-height: 24px;
|
| - };
|
| -
|
| - --paper-font-body1: {
|
| - @apply(--paper-font-common-base);
|
| -
|
| - font-size: 14px;
|
| - font-weight: 400;
|
| - line-height: 20px;
|
| - };
|
| -
|
| - --paper-font-caption: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 12px;
|
| - font-weight: 400;
|
| - letter-spacing: 0.011em;
|
| - line-height: 20px;
|
| - };
|
| -
|
| - --paper-font-menu: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 13px;
|
| - font-weight: 500;
|
| - line-height: 24px;
|
| - };
|
| -
|
| - --paper-font-button: {
|
| - @apply(--paper-font-common-base);
|
| - @apply(--paper-font-common-nowrap);
|
| -
|
| - font-size: 14px;
|
| - font-weight: 500;
|
| - letter-spacing: 0.018em;
|
| - line-height: 24px;
|
| - text-transform: uppercase;
|
| - };
|
| -
|
| - --paper-font-code2: {
|
| - @apply(--paper-font-common-code);
|
| -
|
| - font-size: 14px;
|
| - font-weight: 700;
|
| - line-height: 20px;
|
| - };
|
| -
|
| - --paper-font-code1: {
|
| - @apply(--paper-font-common-code);
|
| -
|
| - font-size: 14px;
|
| - font-weight: 500;
|
| - line-height: 20px;
|
| - };
|
| +<style is="custom-style" css-build="shadow">html {
|
| + --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif; --paper-font-common-base_-_-webkit-font-smoothing: antialiased;;
|
|
|
| - }
|
| + --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace; --paper-font-common-code_-_-webkit-font-smoothing: antialiased;;
|
|
|
| -</style>
|
| -<dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-item/">
|
| - <template>
|
| - <style>
|
| - :host, .paper-item {
|
| - display: block;
|
| - position: relative;
|
| - min-height: var(--paper-item-min-height, 48px);
|
| - padding: 0px 16px;
|
| - }
|
| + --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;;
|
|
|
| - .paper-item {
|
| - @apply(--paper-font-subhead);
|
| - border:none;
|
| - outline: none;
|
| - background: white;
|
| - width: 100%;
|
| - text-align: left;
|
| - }
|
| + --paper-font-common-nowrap_-_white-space: nowrap; --paper-font-common-nowrap_-_overflow: hidden; --paper-font-common-nowrap_-_text-overflow: ellipsis;;
|
|
|
| - :host([hidden]), .paper-item[hidden] {
|
| - display: none !important;
|
| - }
|
| +
|
|
|
| - :host(.iron-selected), .paper-item.iron-selected {
|
| - font-weight: var(--paper-item-selected-weight, bold);
|
| + --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display4_-_font-size: 112px; --paper-font-display4_-_font-weight: 300; --paper-font-display4_-_letter-spacing: -.044em; --paper-font-display4_-_line-height: 120px;;
|
|
|
| - @apply(--paper-item-selected);
|
| - }
|
| + --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-display3_-_font-size: 56px; --paper-font-display3_-_font-weight: 400; --paper-font-display3_-_letter-spacing: -.026em; --paper-font-display3_-_line-height: 60px;;
|
|
|
| - :host([disabled]), .paper-item[disabled] {
|
| - color: var(--paper-item-disabled-color, --disabled-text-color);
|
| + --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display2_-_font-size: 45px; --paper-font-display2_-_font-weight: 400; --paper-font-display2_-_letter-spacing: -.018em; --paper-font-display2_-_line-height: 48px;;
|
|
|
| - @apply(--paper-item-disabled);
|
| - }
|
| + --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-display1_-_font-size: 34px; --paper-font-display1_-_font-weight: 400; --paper-font-display1_-_letter-spacing: -.01em; --paper-font-display1_-_line-height: 40px;;
|
|
|
| - :host(:focus), .paper-item:focus {
|
| - position: relative;
|
| - outline: 0;
|
| + --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-headline_-_font-size: 24px; --paper-font-headline_-_font-weight: 400; --paper-font-headline_-_letter-spacing: -.012em; --paper-font-headline_-_line-height: 32px;;
|
|
|
| - @apply(--paper-item-focused);
|
| - }
|
| + --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-title_-_font-size: 20px; --paper-font-title_-_font-weight: 500; --paper-font-title_-_line-height: 28px;;
|
|
|
| - :host(:focus):before, .paper-item:focus:before {
|
| - @apply(--layout-fit);
|
| + --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-subhead_-_font-size: 16px; --paper-font-subhead_-_font-weight: 400; --paper-font-subhead_-_line-height: 24px;;
|
|
|
| - background: currentColor;
|
| - content: '';
|
| - opacity: var(--dark-divider-opacity);
|
| - pointer-events: none;
|
| + --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body2_-_font-size: 14px; --paper-font-body2_-_font-weight: 500; --paper-font-body2_-_line-height: 24px;;
|
|
|
| - @apply(--paper-item-focused-before);
|
| - }
|
| - </style>
|
| + --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-body1_-_font-size: 14px; --paper-font-body1_-_font-weight: 400; --paper-font-body1_-_line-height: 20px;;
|
| +
|
| + --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-caption_-_font-size: 12px; --paper-font-caption_-_font-weight: 400; --paper-font-caption_-_letter-spacing: 0.011em; --paper-font-caption_-_line-height: 20px;;
|
| +
|
| + --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-menu_-_font-size: 13px; --paper-font-menu_-_font-weight: 500; --paper-font-menu_-_line-height: 24px;;
|
| +
|
| + --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family); --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing); --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space); --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow); --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow); --paper-font-button_-_font-size: 14px; --paper-font-button_-_font-weight: 500; --paper-font-button_-_letter-spacing: 0.018em; --paper-font-button_-_line-height: 24px; --paper-font-button_-_text-transform: uppercase;;
|
| +
|
| + --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code2_-_font-size: 14px; --paper-font-code2_-_font-weight: 700; --paper-font-code2_-_line-height: 20px;;
|
| +
|
| + --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family); --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing); --paper-font-code1_-_font-size: 14px; --paper-font-code1_-_font-weight: 500; --paper-font-code1_-_line-height: 20px;;
|
| +}
|
| +
|
| +</style>
|
| +<dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-item/" css-build="shadow">
|
| + <template>
|
| + <style scope="paper-item-shared-styles">:host, .paper-item {
|
| + display: block;
|
| + position: relative;
|
| + min-height: var(--paper-item-min-height, 48px);
|
| + padding: 0px 16px;
|
| +}
|
| +
|
| +.paper-item {
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
| + border:none;
|
| + outline: none;
|
| + background: white;
|
| + width: 100%;
|
| + text-align: left;
|
| +}
|
| +
|
| +:host([hidden]), .paper-item[hidden] {
|
| + display: none !important;
|
| +}
|
| +
|
| +:host(.iron-selected), .paper-item.iron-selected {
|
| + font-weight: var(--paper-item-selected-weight, bold);
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host([disabled]), .paper-item[disabled] {
|
| + color: var(--paper-item-disabled-color,var(--disabled-text-color));;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host(:focus), .paper-item:focus {
|
| + position: relative;
|
| + outline: 0;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host(:focus):before, .paper-item:focus:before {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| +
|
| + background: currentColor;
|
| + content: '';
|
| + opacity: var(--dark-divider-opacity);
|
| + pointer-events: none;
|
| +
|
| + ;
|
| +}
|
| +
|
| +</style>
|
| </template>
|
| </dom-module>
|
|
|
|
|
| -<dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/">
|
| +<dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/" css-build="shadow">
|
| <template>
|
| - <style include="paper-item-shared-styles"></style>
|
| - <style>
|
| - :host {
|
| - @apply(--layout-horizontal);
|
| - @apply(--layout-center);
|
| - @apply(--paper-font-subhead);
|
| +
|
| + <style scope="paper-item">:host, .paper-item {
|
| + display: block;
|
| + position: relative;
|
| + min-height: var(--paper-item-min-height, 48px);
|
| + padding: 0px 16px;
|
| +}
|
| +
|
| +.paper-item {
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
| + border:none;
|
| + outline: none;
|
| + background: white;
|
| + width: 100%;
|
| + text-align: left;
|
| +}
|
| +
|
| +:host([hidden]), .paper-item[hidden] {
|
| + display: none !important;
|
| +}
|
| +
|
| +:host(.iron-selected), .paper-item.iron-selected {
|
| + font-weight: var(--paper-item-selected-weight, bold);
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host([disabled]), .paper-item[disabled] {
|
| + color: var(--paper-item-disabled-color,var(--disabled-text-color));;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host(:focus), .paper-item:focus {
|
| + position: relative;
|
| + outline: 0;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host(:focus):before, .paper-item:focus:before {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| +
|
| + background: currentColor;
|
| + content: '';
|
| + opacity: var(--dark-divider-opacity);
|
| + pointer-events: none;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host {
|
| + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction);
|
| + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items);
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
|
|
| - @apply(--paper-item);
|
| - }
|
| - </style>
|
| + ;
|
| +}
|
| +
|
| +</style>
|
|
|
| <content></content>
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-menu/">
|
| +<dom-module id="paper-menu-shared-styles" assetpath="chrome://resources/polymer/v1_0/paper-menu/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - /* need a wrapper element to make this higher specificity than the :host rule in paper-item */
|
| - .selectable-content > ::content > .iron-selected {
|
| - font-weight: bold;
|
| + <style scope="paper-menu-shared-styles">.selectable-content > ::content > .iron-selected {
|
| + font-weight: bold;
|
|
|
| - @apply(--paper-menu-selected-item);
|
| - }
|
| + font-weight: var(--paper-menu-selected-item_-_font-weight, bold);
|
| +}
|
|
|
| - .selectable-content > ::content > [disabled] {
|
| - color: var(--paper-menu-disabled-color, --disabled-text-color);
|
| - }
|
| +.selectable-content > ::content > [disabled] {
|
| + color: var(--paper-menu-disabled-color,var(--disabled-text-color));;
|
| +}
|
|
|
| - .selectable-content > ::content > *:focus {
|
| - position: relative;
|
| +.selectable-content > ::content > *:focus {
|
| + position: relative;
|
| outline: 0;
|
|
|
| - @apply(--paper-menu-focused-item);
|
| - }
|
| + ;
|
| +}
|
|
|
| - .selectable-content > ::content > *:focus:after {
|
| - @apply(--layout-fit);
|
| +.selectable-content > ::content > *:focus:after {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| background: currentColor;
|
| opacity: var(--dark-divider-opacity);
|
| content: '';
|
| pointer-events: none;
|
|
|
| - @apply(--paper-menu-focused-item-after);
|
| - }
|
| + ;
|
| +}
|
| +
|
| +.selectable-content > ::content > *[colored]:focus:after {
|
| + opacity: 0.26;
|
| +}
|
|
|
| - .selectable-content > ::content > *[colored]:focus:after {
|
| - opacity: 0.26;
|
| - }
|
| - </style>
|
| +</style>
|
| </template>
|
| </dom-module>
|
|
|
|
|
| -<dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-menu/">
|
| +<dom-module id="paper-menu" assetpath="chrome://resources/polymer/v1_0/paper-menu/" css-build="shadow">
|
| <template>
|
| - <style include="paper-menu-shared-styles"></style>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| +
|
| + <style scope="paper-menu">.selectable-content > ::content > .iron-selected {
|
| + font-weight: bold;
|
| +
|
| + font-weight: var(--paper-menu-selected-item_-_font-weight, bold);
|
| +}
|
| +
|
| +.selectable-content > ::content > [disabled] {
|
| + color: var(--paper-menu-disabled-color,var(--disabled-text-color));;
|
| +}
|
| +
|
| +.selectable-content > ::content > *:focus {
|
| + position: relative;
|
| + outline: 0;
|
| +
|
| + ;
|
| +}
|
| +
|
| +.selectable-content > ::content > *:focus:after {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
| + background: currentColor;
|
| + opacity: var(--dark-divider-opacity);
|
| + content: '';
|
| + pointer-events: none;
|
| +
|
| + ;
|
| +}
|
| +
|
| +.selectable-content > ::content > *[colored]:focus:after {
|
| + opacity: 0.26;
|
| +}
|
| +
|
| +:host {
|
| + display: block;
|
| padding: 8px 0;
|
|
|
| - background: var(--paper-menu-background-color, --primary-background-color);
|
| - color: var(--paper-menu-color, --primary-text-color);
|
| + background: var(--paper-menu-background-color,var(--primary-background-color));;
|
| + color: var(--paper-menu-color,var(--primary-text-color));;
|
| +
|
| + ;
|
| +}
|
|
|
| - @apply(--paper-menu);
|
| - }
|
| - </style>
|
| +</style>
|
|
|
| <div class="selectable-content">
|
| <content></content>
|
| @@ -1957,12 +1644,11 @@ paper-button {
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_0/iron-overlay-behavior/">
|
| +<dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_0/iron-overlay-behavior/" css-build="shadow">
|
|
|
| <template>
|
| - <style>
|
| - :host {
|
| - position: fixed;
|
| + <style scope="iron-overlay-backdrop">:host {
|
| + position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 100%;
|
| @@ -1971,15 +1657,16 @@ paper-button {
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| pointer-events: none;
|
| - @apply(--iron-overlay-backdrop);
|
| - }
|
| + ;
|
| +}
|
|
|
| - :host(.opened) {
|
| - opacity: var(--iron-overlay-backdrop-opacity, 0.6);
|
| +:host(.opened) {
|
| + opacity: var(--iron-overlay-backdrop-opacity, 0.6);
|
| pointer-events: auto;
|
| - @apply(--iron-overlay-backdrop-opened);
|
| - }
|
| - </style>
|
| + ;
|
| +}
|
| +
|
| +</style>
|
|
|
| <content></content>
|
| </template>
|
| @@ -1989,21 +1676,21 @@ paper-button {
|
| <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
|
|
|
|
|
| -<dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/">
|
| +<dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - position: fixed;
|
| - }
|
| + <style scope="iron-dropdown">:host {
|
| + position: fixed;
|
| +}
|
| +
|
| +#contentWrapper ::content > * {
|
| + overflow: auto;
|
| +}
|
|
|
| - #contentWrapper ::content > * {
|
| - overflow: auto;
|
| - }
|
| +#contentWrapper.animating ::content > * {
|
| + overflow: hidden;
|
| +}
|
|
|
| - #contentWrapper.animating ::content > * {
|
| - overflow: hidden;
|
| - }
|
| - </style>
|
| +</style>
|
|
|
| <div id="contentWrapper">
|
| <content id="content" select=".dropdown-content"></content>
|
| @@ -2011,51 +1698,51 @@ paper-button {
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-menu-button" assetpath="chrome://resources/polymer/v1_0/paper-menu-button/">
|
| +<dom-module id="paper-menu-button" assetpath="chrome://resources/polymer/v1_0/paper-menu-button/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: inline-block;
|
| + <style scope="paper-menu-button">:host {
|
| + display: inline-block;
|
| position: relative;
|
| padding: 8px;
|
| outline: none;
|
|
|
| - @apply(--paper-menu-button);
|
| - }
|
| + padding: var(--paper-menu-button_-_padding, 8px);
|
| +}
|
|
|
| - :host([disabled]) {
|
| - cursor: auto;
|
| +:host([disabled]) {
|
| + cursor: auto;
|
| color: var(--disabled-text-color);
|
|
|
| - @apply(--paper-menu-button-disabled);
|
| - }
|
| + ;
|
| +}
|
|
|
| - iron-dropdown {
|
| - @apply(--paper-menu-button-dropdown);
|
| - }
|
| +iron-dropdown {
|
| + ;
|
| +}
|
|
|
| - .dropdown-content {
|
| - @apply(--shadow-elevation-2dp);
|
| +.dropdown-content {
|
| + box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
|
|
|
| position: relative;
|
| border-radius: 2px;
|
| - background-color: var(--paper-menu-button-dropdown-background, --primary-background-color);
|
| + background-color: var(--paper-menu-button-dropdown-background,var(--primary-background-color));;
|
|
|
| - @apply(--paper-menu-button-content);
|
| - }
|
| + ;
|
| +}
|
|
|
| - :host([vertical-align="top"]) .dropdown-content {
|
| - margin-bottom: 20px;
|
| +:host([vertical-align="top"]) .dropdown-content {
|
| + margin-bottom: 20px;
|
| margin-top: -10px;
|
| top: 10px;
|
| - }
|
| +}
|
|
|
| - :host([vertical-align="bottom"]) .dropdown-content {
|
| - bottom: 10px;
|
| +:host([vertical-align="bottom"]) .dropdown-content {
|
| + bottom: 10px;
|
| margin-bottom: -10px;
|
| margin-top: 20px;
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
|
|
| <div id="trigger" on-tap="toggle">
|
| <content select=".dropdown-trigger"></content>
|
| @@ -2069,11 +1756,10 @@ paper-button {
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/">
|
| +<dom-module id="paper-icon-button" assetpath="chrome://resources/polymer/v1_0/paper-icon-button/" css-build="shadow">
|
| <template strip-whitespace="">
|
| - <style>
|
| - :host {
|
| - display: inline-block;
|
| + <style scope="paper-icon-button">:host {
|
| + display: inline-block;
|
| position: relative;
|
| padding: 8px;
|
| outline: none;
|
| @@ -2088,93 +1774,93 @@ paper-button {
|
| width: 40px;
|
| height: 40px;
|
|
|
| - /* NOTE: Both values are needed, since some phones require the value to be `transparent`. */
|
| +
|
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
| -webkit-tap-highlight-color: transparent;
|
|
|
| - /* Because of polymer/2558, this style has lower specificity than * */
|
| +
|
| box-sizing: border-box !important;
|
|
|
| - @apply(--paper-icon-button);
|
| - }
|
| + height: var(--paper-icon-button_-_height, 40px); padding: var(--paper-icon-button_-_padding, 8px); width: var(--paper-icon-button_-_width, 40px);
|
| +}
|
|
|
| - :host #ink {
|
| - color: var(--paper-icon-button-ink-color, --primary-text-color);
|
| +:host #ink {
|
| + color: var(--paper-icon-button-ink-color,var(--primary-text-color));;
|
| opacity: 0.6;
|
| - }
|
| +}
|
|
|
| - :host([disabled]) {
|
| - color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
| +:host([disabled]) {
|
| + color: var(--paper-icon-button-disabled-text,var(--disabled-text-color));;
|
| pointer-events: none;
|
| cursor: auto;
|
|
|
| - @apply(--paper-icon-button-disabled);
|
| - }
|
| + ;
|
| +}
|
|
|
| - :host(:hover) {
|
| - @apply(--paper-icon-button-hover);
|
| - }
|
| +:host(:hover) {
|
| + ;
|
| +}
|
|
|
| - iron-icon {
|
| - --iron-icon-width: 100%;
|
| +iron-icon {
|
| + --iron-icon-width: 100%;
|
| --iron-icon-height: 100%;
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
|
|
| <iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/">
|
| +<dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: inline-block;
|
| + <style scope="iron-a11y-announcer">:host {
|
| + display: inline-block;
|
| position: fixed;
|
| clip: rect(0px,0px,0px,0px);
|
| - }
|
| - </style>
|
| +}
|
| +
|
| +</style>
|
| <div aria-live$="[[mode]]">[[_text]]</div>
|
| </template>
|
|
|
| </dom-module>
|
| -<dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/">
|
| +<dom-module id="paper-input-container" assetpath="chrome://resources/polymer/v1_0/paper-input/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - display: block;
|
| + <style scope="paper-input-container">:host {
|
| + display: block;
|
| padding: 8px 0;
|
|
|
| - @apply(--paper-input-container);
|
| - }
|
| + ;
|
| +}
|
|
|
| - :host([inline]) {
|
| - display: inline-block;
|
| - }
|
| +:host([inline]) {
|
| + display: inline-block;
|
| +}
|
|
|
| - :host([disabled]) {
|
| - pointer-events: none;
|
| +:host([disabled]) {
|
| + pointer-events: none;
|
| opacity: 0.33;
|
|
|
| - @apply(--paper-input-container-disabled);
|
| - }
|
| + ;
|
| +}
|
|
|
| - :host([hidden]) {
|
| - display: none !important;
|
| - }
|
| +:host([hidden]) {
|
| + display: none !important;
|
| +}
|
|
|
| - .floated-label-placeholder {
|
| - @apply(--paper-font-caption);
|
| - }
|
| +.floated-label-placeholder {
|
| + font-family: var(--paper-font-caption_-_font-family); -webkit-font-smoothing: var(--paper-font-caption_-_-webkit-font-smoothing); white-space: var(--paper-font-caption_-_white-space); overflow: var(--paper-font-caption_-_overflow); text-overflow: var(--paper-font-caption_-_text-overflow); font-size: var(--paper-font-caption_-_font-size); font-weight: var(--paper-font-caption_-_font-weight); letter-spacing: var(--paper-font-caption_-_letter-spacing); line-height: var(--paper-font-caption_-_line-height);
|
| +}
|
|
|
| - .underline {
|
| - position: relative;
|
| - }
|
| +.underline {
|
| + position: relative;
|
| +}
|
|
|
| - .focused-line {
|
| - @apply(--layout-fit);
|
| +.focused-line {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
|
| - background: var(--paper-input-container-focus-color, --primary-color);
|
| + background: var(--paper-input-container-focus-color,var(--primary-color));;
|
| height: 2px;
|
|
|
| -webkit-transform-origin: center center;
|
| @@ -2182,536 +1868,1263 @@ paper-button {
|
| -webkit-transform: scale3d(0,1,1);
|
| transform: scale3d(0,1,1);
|
|
|
| - @apply(--paper-input-container-underline-focus);
|
| - }
|
| + display: var(--paper-input-container-underline-focus_-_display);
|
| +}
|
|
|
| - .underline.is-highlighted .focused-line {
|
| - -webkit-transform: none;
|
| +.underline.is-highlighted .focused-line {
|
| + -webkit-transform: none;
|
| transform: none;
|
| -webkit-transition: -webkit-transform 0.25s;
|
| transition: transform 0.25s;
|
|
|
| - @apply(--paper-transition-easing);
|
| - }
|
| + ;
|
| +}
|
|
|
| - .underline.is-invalid .focused-line {
|
| - background: var(--paper-input-container-invalid-color, --error-color);
|
| +.underline.is-invalid .focused-line {
|
| + background: var(--paper-input-container-invalid-color,var(--error-color));;
|
| -webkit-transform: none;
|
| transform: none;
|
| -webkit-transition: -webkit-transform 0.25s;
|
| transition: transform 0.25s;
|
|
|
| - @apply(--paper-transition-easing);
|
| - }
|
| + ;
|
| +}
|
|
|
| - .unfocused-line {
|
| - @apply(--layout-fit);
|
| +.unfocused-line {
|
| + position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
|
|
|
| - background: var(--paper-input-container-color, --secondary-text-color);
|
| + background: var(--paper-input-container-color,var(--secondary-text-color));;
|
| height: 1px;
|
|
|
| - @apply(--paper-input-container-underline);
|
| - }
|
| + display: var(--paper-input-container-underline_-_display);
|
| +}
|
| +
|
| +:host([disabled]) .unfocused-line {
|
| + border-bottom: 1px dashed;
|
| + border-color: var(--paper-input-container-color,var(--secondary-text-color));;
|
| + background: transparent;
|
| +
|
| + ;
|
| +}
|
| +
|
| +.label-and-input-container {
|
| + -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
|
| + position: var(--layout-relative_-_position);
|
| +
|
| + width: 100%;
|
| + max-width: 100%;
|
| +}
|
| +
|
| +.input-content {
|
| + display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction);
|
| + -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items);
|
| +
|
| + position: relative;
|
| +}
|
| +
|
| +.input-content ::content label, .input-content ::content .paper-input-label {
|
| + position: absolute;
|
| + top: 0;
|
| + right: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + font: inherit;
|
| + color: var(--paper-input-container-color,var(--secondary-text-color));;
|
| + -webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
| + transition: transform 0.25s, width 0.25s;
|
| + -webkit-transform-origin: left top;
|
| + transform-origin: left top;
|
| +
|
| + white-space: var(--paper-font-common-nowrap_-_white-space); overflow: var(--paper-font-common-nowrap_-_overflow); text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
| + color: var(--paper-input-container-label_-_color, var(--paper-input-container-color,var(--secondary-text-color))); font-size: var(--paper-input-container-label_-_font-size, var(--paper-font-subhead_-_font-size));
|
| + ;
|
| +}
|
| +
|
| +.input-content.label-is-floating ::content label, .input-content.label-is-floating ::content .paper-input-label {
|
| + -webkit-transform: translateY(-75%) scale(0.75);
|
| + transform: translateY(-75%) scale(0.75);
|
| +
|
| +
|
| + width: 133%;
|
| +
|
| + ;
|
| +}
|
| +
|
| +:host-context([dir="rtl"]) .input-content.label-is-floating ::content label, :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
|
| + width: 100%;
|
| + -webkit-transform-origin: right top;
|
| + transform-origin: right top;
|
| +}
|
| +
|
| +.input-content.label-is-highlighted ::content label, .input-content.label-is-highlighted ::content .paper-input-label {
|
| + color: var(--paper-input-container-focus-color,var(--primary-color));;
|
| +
|
| + ;
|
| +}
|
| +
|
| +.input-content.is-invalid ::content label, .input-content.is-invalid ::content .paper-input-label {
|
| + color: var(--paper-input-container-invalid-color,var(--error-color));;
|
| +}
|
| +
|
| +.input-content.label-is-hidden ::content label, .input-content.label-is-hidden ::content .paper-input-label {
|
| + visibility: hidden;
|
| +}
|
|
|
| - :host([disabled]) .unfocused-line {
|
| - border-bottom: 1px dashed;
|
| - border-color: var(--paper-input-container-color, --secondary-text-color);
|
| +.input-content ::content input, .input-content ::content textarea, .input-content ::content iron-autogrow-textarea, .input-content ::content .paper-input-input {
|
| + position: relative;
|
| + outline: none;
|
| + box-shadow: none;
|
| + padding: 0;
|
| + width: 100%;
|
| + max-width: 100%;
|
| background: transparent;
|
| + border: none;
|
| + color: var(--paper-input-container-input-color,var(--primary-text-color));;
|
| + -webkit-appearance: none;
|
| + text-align: inherit;
|
| +
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
| + ;
|
| +}
|
| +
|
| +::content [prefix] {
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
| +
|
| + ;
|
| + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex);
|
| +}
|
|
|
| - @apply(--paper-input-container-underline-disabled);
|
| - }
|
| +::content [suffix] {
|
| + font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line-height: var(--paper-font-subhead_-_line-height);
|
|
|
| - .label-and-input-container {
|
| - @apply(--layout-flex-auto);
|
| - @apply(--layout-relative);
|
| + ;
|
| + -ms-flex: var(--layout-flex-none_-_-ms-flex); -webkit-flex: var(--layout-flex-none_-_-webkit-flex); flex: var(--layout-flex-none_-_flex);
|
| +}
|
| +
|
| +.input-content ::content input {
|
| + min-width: 0;
|
| +}
|
| +
|
| +.input-content ::content textarea {
|
| + resize: none;
|
| +}
|
| +
|
| +.add-on-content {
|
| + position: relative;
|
| +}
|
| +
|
| +.add-on-content.is-invalid ::content * {
|
| + color: var(--paper-input-container-invalid-color,var(--error-color));;
|
| +}
|
| +
|
| +.add-on-content.is-highlighted ::content * {
|
| + color: var(--paper-input-container-focus-color,var(--primary-color));;
|
| +}
|
| +
|
| +</style>
|
| +
|
| + <template is="dom-if" if="[[!noLabelFloat]]">
|
| + <div class="floated-label-placeholder" aria-hidden="true"> </div>
|
| + </template>
|
| +
|
| + <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
| + <content select="[prefix]" id="prefix"></content>
|
| +
|
| + <div class="label-and-input-container" id="labelAndInputContainer">
|
| + <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
| + </div>
|
| +
|
| + <content select="[suffix]"></content>
|
| + </div>
|
| +
|
| + <div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
| + <div class="unfocused-line"></div>
|
| + <div class="focused-line"></div>
|
| + </div>
|
| +
|
| + <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
| + <content id="addOnContent" select="[add-on]"></content>
|
| + </div>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +<dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow">
|
| + <template>
|
| + <style scope="paper-spinner-styles">:host {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 28px;
|
| + height: 28px;
|
| +
|
| +
|
| + --paper-spinner-container-rotation-duration: 1568ms;
|
| +
|
| +
|
| + --paper-spinner-expand-contract-duration: 1333ms;
|
| +
|
| +
|
| + --paper-spinner-full-cycle-duration: 5332ms;
|
| +
|
| +
|
| + --paper-spinner-cooldown-duration: 400ms;
|
| +}
|
| +
|
| +#spinnerContainer {
|
| + width: 100%;
|
| + height: 100%;
|
| +
|
| +
|
| + direction: ltr;
|
| +}
|
| +
|
| +#spinnerContainer.active {
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| +}
|
| +
|
| +@-webkit-keyframes container-rotate {
|
| +to {
|
| + -webkit-transform: rotate(360deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes container-rotate {
|
| +to {
|
| + transform: rotate(360deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +.spinner-layer {
|
| + position: absolute;
|
| + width: 100%;
|
| + height: 100%;
|
| + opacity: 0;
|
| + white-space: nowrap;
|
| + border-color: var(--paper-spinner-color,var(--google-blue-500));;
|
| +}
|
| +
|
| +.layer-1 {
|
| + border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500));;
|
| +}
|
| +
|
| +.layer-2 {
|
| + border-color: var(--paper-spinner-layer-2-color,var(--google-red-500));;
|
| +}
|
| +
|
| +.layer-3 {
|
| + border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500));;
|
| +}
|
| +
|
| +.layer-4 {
|
| + border-color: var(--paper-spinner-layer-4-color,var(--google-green-500));;
|
| +}
|
| +
|
| +.active .spinner-layer {
|
| + -webkit-animation-name: fill-unfill-rotate;
|
| + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + animation-name: fill-unfill-rotate;
|
| + animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation-iteration-count: infinite;
|
| + opacity: 1;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-1 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-2 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-3 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-4 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| +}
|
| +
|
| +@-webkit-keyframes fill-unfill-rotate {
|
| +12.5% {
|
| + -webkit-transform: rotate(135deg)
|
| +}
|
| +
|
| +25% {
|
| + -webkit-transform: rotate(270deg)
|
| +}
|
| +
|
| +37.5% {
|
| + -webkit-transform: rotate(405deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(540deg)
|
| +}
|
| +
|
| +62.5% {
|
| + -webkit-transform: rotate(675deg)
|
| +}
|
| +
|
| +75% {
|
| + -webkit-transform: rotate(810deg)
|
| +}
|
| +
|
| +87.5% {
|
| + -webkit-transform: rotate(945deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(1080deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes fill-unfill-rotate {
|
| +12.5% {
|
| + transform: rotate(135deg)
|
| +}
|
| +
|
| +25% {
|
| + transform: rotate(270deg)
|
| +}
|
| +
|
| +37.5% {
|
| + transform: rotate(405deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(540deg)
|
| +}
|
| +
|
| +62.5% {
|
| + transform: rotate(675deg)
|
| +}
|
| +
|
| +75% {
|
| + transform: rotate(810deg)
|
| +}
|
| +
|
| +87.5% {
|
| + transform: rotate(945deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(1080deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-1-fade-in-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +26% {
|
| + opacity: 0
|
| +}
|
| +
|
| +89% {
|
| + opacity: 0
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 1
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes layer-1-fade-in-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +26% {
|
| + opacity: 0
|
| +}
|
| +
|
| +89% {
|
| + opacity: 0
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 1
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-2-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +15% {
|
| + opacity: 0
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +50% {
|
| + opacity: 1
|
| +}
|
| +
|
| +51% {
|
| + opacity: 0
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes layer-2-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +15% {
|
| + opacity: 0
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +50% {
|
| + opacity: 1
|
| +}
|
| +
|
| +51% {
|
| + opacity: 0
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-3-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +40% {
|
| + opacity: 0
|
| +}
|
| +
|
| +50% {
|
| + opacity: 1
|
| +}
|
| +
|
| +75% {
|
| + opacity: 1
|
| +}
|
| +
|
| +76% {
|
| + opacity: 0
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes layer-3-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +40% {
|
| + opacity: 0
|
| +}
|
| +
|
| +50% {
|
| + opacity: 1
|
| +}
|
| +
|
| +75% {
|
| + opacity: 1
|
| +}
|
| +
|
| +76% {
|
| + opacity: 0
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-4-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +65% {
|
| + opacity: 0
|
| +}
|
| +
|
| +75% {
|
| + opacity: 1
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes layer-4-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
| +
|
| +65% {
|
| + opacity: 0
|
| +}
|
| +
|
| +75% {
|
| + opacity: 1
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +.circle-clipper {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 50%;
|
| + height: 100%;
|
| + overflow: hidden;
|
| + border-color: inherit;
|
| +}
|
| +
|
| +.spinner-layer::after {
|
| + left: 45%;
|
| + width: 10%;
|
| + border-top-style: solid;
|
| +}
|
| +
|
| +.spinner-layer::after, .circle-clipper::after {
|
| + content: '';
|
| + box-sizing: border-box;
|
| + position: absolute;
|
| + top: 0;
|
| + border-width: var(--paper-spinner-stroke-width, 3px);
|
| + border-color: inherit;
|
| + border-radius: 50%;
|
| +}
|
| +
|
| +.circle-clipper::after {
|
| + bottom: 0;
|
| + width: 200%;
|
| + border-style: solid;
|
| + border-bottom-color: transparent !important;
|
| +}
|
| +
|
| +.circle-clipper.left::after {
|
| + left: 0;
|
| + border-right-color: transparent !important;
|
| + -webkit-transform: rotate(129deg);
|
| + transform: rotate(129deg);
|
| +}
|
| +
|
| +.circle-clipper.right::after {
|
| + left: -100%;
|
| + border-left-color: transparent !important;
|
| + -webkit-transform: rotate(-129deg);
|
| + transform: rotate(-129deg);
|
| +}
|
| +
|
| +.active .gap-patch::after, .active .circle-clipper::after {
|
| + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + animation-duration: var(--paper-spinner-expand-contract-duration);
|
| + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation-iteration-count: infinite;
|
| +}
|
| +
|
| +.active .circle-clipper.left::after {
|
| + -webkit-animation-name: left-spin;
|
| + animation-name: left-spin;
|
| +}
|
| +
|
| +.active .circle-clipper.right::after {
|
| + -webkit-animation-name: right-spin;
|
| + animation-name: right-spin;
|
| +}
|
| +
|
| +@-webkit-keyframes left-spin {
|
| +0% {
|
| + -webkit-transform: rotate(130deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(-5deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes left-spin {
|
| +0% {
|
| + transform: rotate(130deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(-5deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes right-spin {
|
| +0% {
|
| + -webkit-transform: rotate(-130deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(5deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(-130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes right-spin {
|
| +0% {
|
| + transform: rotate(-130deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(5deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(-130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +#spinnerContainer.cooldown {
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| +}
|
| +
|
| +@-webkit-keyframes fade-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes fade-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +</style>
|
| + </template>
|
| +</dom-module>
|
| +
|
| +
|
| +<dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/paper-spinner/" css-build="shadow">
|
| + <template strip-whitespace="">
|
| + <style scope="paper-spinner-lite">:host {
|
| + display: inline-block;
|
| + position: relative;
|
| + width: 28px;
|
| + height: 28px;
|
| +
|
| +
|
| + --paper-spinner-container-rotation-duration: 1568ms;
|
| +
|
| +
|
| + --paper-spinner-expand-contract-duration: 1333ms;
|
| +
|
| +
|
| + --paper-spinner-full-cycle-duration: 5332ms;
|
| +
|
| +
|
| + --paper-spinner-cooldown-duration: 400ms;
|
| +}
|
| +
|
| +#spinnerContainer {
|
| + width: 100%;
|
| + height: 100%;
|
| +
|
| +
|
| + direction: ltr;
|
| +}
|
| +
|
| +#spinnerContainer.active {
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| + animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| +}
|
| +
|
| +@-webkit-keyframes container-rotate {
|
| +to {
|
| + -webkit-transform: rotate(360deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes container-rotate {
|
| +to {
|
| + transform: rotate(360deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +.spinner-layer {
|
| + position: absolute;
|
| + width: 100%;
|
| + height: 100%;
|
| + opacity: 0;
|
| + white-space: nowrap;
|
| + border-color: var(--paper-spinner-color,var(--google-blue-500));;
|
| +}
|
| +
|
| +.layer-1 {
|
| + border-color: var(--paper-spinner-layer-1-color,var(--google-blue-500));;
|
| +}
|
| +
|
| +.layer-2 {
|
| + border-color: var(--paper-spinner-layer-2-color,var(--google-red-500));;
|
| +}
|
| +
|
| +.layer-3 {
|
| + border-color: var(--paper-spinner-layer-3-color,var(--google-yellow-500));;
|
| +}
|
| +
|
| +.layer-4 {
|
| + border-color: var(--paper-spinner-layer-4-color,var(--google-green-500));;
|
| +}
|
| +
|
| +.active .spinner-layer {
|
| + -webkit-animation-name: fill-unfill-rotate;
|
| + -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + -webkit-animation-iteration-count: infinite;
|
| + animation-name: fill-unfill-rotate;
|
| + animation-duration: var(--paper-spinner-full-cycle-duration);
|
| + animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| + animation-iteration-count: infinite;
|
| + opacity: 1;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-1 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-2 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-3 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| +}
|
| +
|
| +.active .spinner-layer.layer-4 {
|
| + -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| + animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| +}
|
| +
|
| +@-webkit-keyframes fill-unfill-rotate {
|
| +12.5% {
|
| + -webkit-transform: rotate(135deg)
|
| +}
|
| +
|
| +25% {
|
| + -webkit-transform: rotate(270deg)
|
| +}
|
| +
|
| +37.5% {
|
| + -webkit-transform: rotate(405deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(540deg)
|
| +}
|
| +
|
| +62.5% {
|
| + -webkit-transform: rotate(675deg)
|
| +}
|
| +
|
| +75% {
|
| + -webkit-transform: rotate(810deg)
|
| +}
|
| +
|
| +87.5% {
|
| + -webkit-transform: rotate(945deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(1080deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes fill-unfill-rotate {
|
| +12.5% {
|
| + transform: rotate(135deg)
|
| +}
|
| +
|
| +25% {
|
| + transform: rotate(270deg)
|
| +}
|
| +
|
| +37.5% {
|
| + transform: rotate(405deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(540deg)
|
| +}
|
| +
|
| +62.5% {
|
| + transform: rotate(675deg)
|
| +}
|
| +
|
| +75% {
|
| + transform: rotate(810deg)
|
| +}
|
| +
|
| +87.5% {
|
| + transform: rotate(945deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(1080deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-1-fade-in-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +26% {
|
| + opacity: 0
|
| +}
|
| +
|
| +89% {
|
| + opacity: 0
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 1
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes layer-1-fade-in-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +25% {
|
| + opacity: 1
|
| +}
|
| +
|
| +26% {
|
| + opacity: 0
|
| +}
|
| +
|
| +89% {
|
| + opacity: 0
|
| +}
|
| +
|
| +90% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 1
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes layer-2-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - width: 100%;
|
| - max-width: 100%;
|
| - }
|
| +15% {
|
| + opacity: 0
|
| +}
|
|
|
| - .input-content {
|
| - @apply(--layout-horizontal);
|
| - @apply(--layout-center);
|
| +25% {
|
| + opacity: 1
|
| +}
|
|
|
| - position: relative;
|
| - }
|
| +50% {
|
| + opacity: 1
|
| +}
|
|
|
| - .input-content ::content label,
|
| - .input-content ::content .paper-input-label {
|
| - position: absolute;
|
| - top: 0;
|
| - right: 0;
|
| - left: 0;
|
| - width: 100%;
|
| - font: inherit;
|
| - color: var(--paper-input-container-color, --secondary-text-color);
|
| - -webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
| - transition: transform 0.25s, width 0.25s;
|
| - -webkit-transform-origin: left top;
|
| - transform-origin: left top;
|
| +51% {
|
| + opacity: 0
|
| +}
|
|
|
| - @apply(--paper-font-common-nowrap);
|
| - @apply(--paper-font-subhead);
|
| - @apply(--paper-input-container-label);
|
| - @apply(--paper-transition-easing);
|
| - }
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - .input-content.label-is-floating ::content label,
|
| - .input-content.label-is-floating ::content .paper-input-label {
|
| - -webkit-transform: translateY(-75%) scale(0.75);
|
| - transform: translateY(-75%) scale(0.75);
|
| +}
|
|
|
| - /* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
| - original space now available */
|
| - width: 133%;
|
| +@keyframes layer-2-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - @apply(--paper-input-container-label-floating);
|
| - }
|
| +15% {
|
| + opacity: 0
|
| +}
|
|
|
| - :host-context([dir="rtl"]) .input-content.label-is-floating ::content label,
|
| - :host-context([dir="rtl"]) .input-content.label-is-floating ::content .paper-input-label {
|
| - /* TODO(noms): Figure out why leaving the width at 133% before the animation
|
| - * actually makes
|
| - * it wider on the right side, not left side, as you would expect in RTL */
|
| - width: 100%;
|
| - -webkit-transform-origin: right top;
|
| - transform-origin: right top;
|
| - }
|
| -
|
| - .input-content.label-is-highlighted ::content label,
|
| - .input-content.label-is-highlighted ::content .paper-input-label {
|
| - color: var(--paper-input-container-focus-color, --primary-color);
|
| -
|
| - @apply(--paper-input-container-label-focus);
|
| - }
|
| -
|
| - .input-content.is-invalid ::content label,
|
| - .input-content.is-invalid ::content .paper-input-label {
|
| - color: var(--paper-input-container-invalid-color, --error-color);
|
| - }
|
| -
|
| - .input-content.label-is-hidden ::content label,
|
| - .input-content.label-is-hidden ::content .paper-input-label {
|
| - visibility: hidden;
|
| - }
|
| -
|
| - .input-content ::content input,
|
| - .input-content ::content textarea,
|
| - .input-content ::content iron-autogrow-textarea,
|
| - .input-content ::content .paper-input-input {
|
| - position: relative; /* to make a stacking context */
|
| - outline: none;
|
| - box-shadow: none;
|
| - padding: 0;
|
| - width: 100%;
|
| - max-width: 100%;
|
| - background: transparent;
|
| - border: none;
|
| - color: var(--paper-input-container-input-color, --primary-text-color);
|
| - -webkit-appearance: none;
|
| - text-align: inherit;
|
| +25% {
|
| + opacity: 1
|
| +}
|
|
|
| - @apply(--paper-font-subhead);
|
| - @apply(--paper-input-container-input);
|
| - }
|
| +50% {
|
| + opacity: 1
|
| +}
|
|
|
| - ::content [prefix] {
|
| - @apply(--paper-font-subhead);
|
| +51% {
|
| + opacity: 0
|
| +}
|
|
|
| - @apply(--paper-input-prefix);
|
| - @apply(--layout-flex-none);
|
| - }
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - ::content [suffix] {
|
| - @apply(--paper-font-subhead);
|
| +}
|
|
|
| - @apply(--paper-input-suffix);
|
| - @apply(--layout-flex-none);
|
| - }
|
| +@-webkit-keyframes layer-3-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - /* Firefox sets a min-width on the input, which can cause layout issues */
|
| - .input-content ::content input {
|
| - min-width: 0;
|
| - }
|
| +40% {
|
| + opacity: 0
|
| +}
|
|
|
| - .input-content ::content textarea {
|
| - resize: none;
|
| - }
|
| +50% {
|
| + opacity: 1
|
| +}
|
|
|
| - .add-on-content {
|
| - position: relative;
|
| - }
|
| +75% {
|
| + opacity: 1
|
| +}
|
|
|
| - .add-on-content.is-invalid ::content * {
|
| - color: var(--paper-input-container-invalid-color, --error-color);
|
| - }
|
| +76% {
|
| + opacity: 0
|
| +}
|
|
|
| - .add-on-content.is-highlighted ::content * {
|
| - color: var(--paper-input-container-focus-color, --primary-color);
|
| - }
|
| - </style>
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - <template is="dom-if" if="[[!noLabelFloat]]">
|
| - <div class="floated-label-placeholder" aria-hidden="true"> </div>
|
| - </template>
|
| +}
|
|
|
| - <div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
| - <content select="[prefix]" id="prefix"></content>
|
| +@keyframes layer-3-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - <div class="label-and-input-container" id="labelAndInputContainer">
|
| - <content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
| - </div>
|
| +40% {
|
| + opacity: 0
|
| +}
|
|
|
| - <content select="[suffix]"></content>
|
| - </div>
|
| +50% {
|
| + opacity: 1
|
| +}
|
|
|
| - <div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
| - <div class="unfocused-line"></div>
|
| - <div class="focused-line"></div>
|
| - </div>
|
| +75% {
|
| + opacity: 1
|
| +}
|
|
|
| - <div class$="[[_computeAddOnContentClass(focused,invalid)]]">
|
| - <content id="addOnContent" select="[add-on]"></content>
|
| - </div>
|
| - </template>
|
| -</dom-module>
|
| +76% {
|
| + opacity: 0
|
| +}
|
|
|
| -<dom-module id="paper-spinner-styles" assetpath="chrome://resources/polymer/v1_0/paper-spinner/">
|
| - <template>
|
| - <style>
|
| - /*
|
| - /**************************/
|
| - /* STYLES FOR THE SPINNER */
|
| - /**************************/
|
| -
|
| - /*
|
| - * Constants:
|
| - * ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
| - * ARCTIME = 1333ms (time it takes to expand and contract arc)
|
| - * ARCSTARTROT = 216 degrees (how much the start location of the arc
|
| - * should rotate each time, 216 gives us a
|
| - * 5 pointed star shape (it's 360/5 * 3).
|
| - * For a 7 pointed star, we might do
|
| - * 360/7 * 3 = 154.286)
|
| - * SHRINK_TIME = 400ms
|
| - */
|
| -
|
| - :host {
|
| - display: inline-block;
|
| - position: relative;
|
| - width: 28px;
|
| - height: 28px;
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
| - --paper-spinner-container-rotation-duration: 1568ms;
|
| +}
|
|
|
| - /* ARCTIME */
|
| - --paper-spinner-expand-contract-duration: 1333ms;
|
| +@-webkit-keyframes layer-4-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - /* 4 * ARCTIME */
|
| - --paper-spinner-full-cycle-duration: 5332ms;
|
| +65% {
|
| + opacity: 0
|
| +}
|
|
|
| - /* SHRINK_TIME */
|
| - --paper-spinner-cooldown-duration: 400ms;
|
| - }
|
| +75% {
|
| + opacity: 1
|
| +}
|
|
|
| - #spinnerContainer {
|
| - width: 100%;
|
| - height: 100%;
|
| +90% {
|
| + opacity: 1
|
| +}
|
|
|
| - /* The spinner does not have any contents that would have to be
|
| - * flipped if the direction changes. Always use ltr so that the
|
| - * style works out correctly in both cases. */
|
| - direction: ltr;
|
| - }
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - #spinnerContainer.active {
|
| - -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| - animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
|
| - }
|
| +}
|
|
|
| - @-webkit-keyframes container-rotate {
|
| - to { -webkit-transform: rotate(360deg) }
|
| - }
|
| +@keyframes layer-4-fade-in-out {
|
| +0% {
|
| + opacity: 0
|
| +}
|
|
|
| - @keyframes container-rotate {
|
| - to { transform: rotate(360deg) }
|
| - }
|
| +65% {
|
| + opacity: 0
|
| +}
|
|
|
| - .spinner-layer {
|
| - position: absolute;
|
| - width: 100%;
|
| - height: 100%;
|
| - opacity: 0;
|
| - white-space: nowrap;
|
| - border-color: var(--paper-spinner-color, --google-blue-500);
|
| - }
|
| -
|
| - .layer-1 {
|
| - border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
| - }
|
| -
|
| - .layer-2 {
|
| - border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
| - }
|
| -
|
| - .layer-3 {
|
| - border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
| - }
|
| -
|
| - .layer-4 {
|
| - border-color: var(--paper-spinner-layer-4-color, --google-green-500);
|
| - }
|
| -
|
| - /**
|
| - * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
| - *
|
| - * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
| - * guarantee that the animation will start _exactly_ after that value. So we avoid using
|
| - * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
| - * seems).
|
| - */
|
| - .active .spinner-layer {
|
| - -webkit-animation-name: fill-unfill-rotate;
|
| - -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
|
| - -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| - -webkit-animation-iteration-count: infinite;
|
| - animation-name: fill-unfill-rotate;
|
| - animation-duration: var(--paper-spinner-full-cycle-duration);
|
| - animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| - animation-iteration-count: infinite;
|
| - opacity: 1;
|
| - }
|
| +75% {
|
| + opacity: 1
|
| +}
|
|
|
| - .active .spinner-layer.layer-1 {
|
| - -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| - animation-name: fill-unfill-rotate, layer-1-fade-in-out;
|
| - }
|
| +90% {
|
| + opacity: 1
|
| +}
|
|
|
| - .active .spinner-layer.layer-2 {
|
| - -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| - animation-name: fill-unfill-rotate, layer-2-fade-in-out;
|
| - }
|
| +to {
|
| + opacity: 0
|
| +}
|
|
|
| - .active .spinner-layer.layer-3 {
|
| - -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| - animation-name: fill-unfill-rotate, layer-3-fade-in-out;
|
| - }
|
| +}
|
|
|
| - .active .spinner-layer.layer-4 {
|
| - -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| - animation-name: fill-unfill-rotate, layer-4-fade-in-out;
|
| - }
|
| -
|
| - @-webkit-keyframes fill-unfill-rotate {
|
| - 12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| - 25% { -webkit-transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| - 37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| - 50% { -webkit-transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| - 62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| - 75% { -webkit-transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| - 87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| - to { -webkit-transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| - }
|
| -
|
| - @keyframes fill-unfill-rotate {
|
| - 12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
|
| - 25% { transform: rotate(270deg) } /* 1 * ARCSIZE */
|
| - 37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
|
| - 50% { transform: rotate(540deg) } /* 2 * ARCSIZE */
|
| - 62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
|
| - 75% { transform: rotate(810deg) } /* 3 * ARCSIZE */
|
| - 87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
|
| - to { transform: rotate(1080deg) } /* 4 * ARCSIZE */
|
| - }
|
| -
|
| - @-webkit-keyframes layer-1-fade-in-out {
|
| - 0% { opacity: 1 }
|
| - 25% { opacity: 1 }
|
| - 26% { opacity: 0 }
|
| - 89% { opacity: 0 }
|
| - 90% { opacity: 1 }
|
| - to { opacity: 1 }
|
| - }
|
| -
|
| - @keyframes layer-1-fade-in-out {
|
| - 0% { opacity: 1 }
|
| - 25% { opacity: 1 }
|
| - 26% { opacity: 0 }
|
| - 89% { opacity: 0 }
|
| - 90% { opacity: 1 }
|
| - to { opacity: 1 }
|
| - }
|
| -
|
| - @-webkit-keyframes layer-2-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 15% { opacity: 0 }
|
| - 25% { opacity: 1 }
|
| - 50% { opacity: 1 }
|
| - 51% { opacity: 0 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @keyframes layer-2-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 15% { opacity: 0 }
|
| - 25% { opacity: 1 }
|
| - 50% { opacity: 1 }
|
| - 51% { opacity: 0 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @-webkit-keyframes layer-3-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 40% { opacity: 0 }
|
| - 50% { opacity: 1 }
|
| - 75% { opacity: 1 }
|
| - 76% { opacity: 0 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @keyframes layer-3-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 40% { opacity: 0 }
|
| - 50% { opacity: 1 }
|
| - 75% { opacity: 1 }
|
| - 76% { opacity: 0 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @-webkit-keyframes layer-4-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 65% { opacity: 0 }
|
| - 75% { opacity: 1 }
|
| - 90% { opacity: 1 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @keyframes layer-4-fade-in-out {
|
| - 0% { opacity: 0 }
|
| - 65% { opacity: 0 }
|
| - 75% { opacity: 1 }
|
| - 90% { opacity: 1 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - .circle-clipper {
|
| - display: inline-block;
|
| +.circle-clipper {
|
| + display: inline-block;
|
| position: relative;
|
| width: 50%;
|
| height: 100%;
|
| overflow: hidden;
|
| border-color: inherit;
|
| - }
|
| -
|
| - /**
|
| - * Patch the gap that appear between the two adjacent div.circle-clipper while the
|
| - * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
|
| - */
|
| - .spinner-layer::after {
|
| - left: 45%;
|
| +}
|
| +
|
| +.spinner-layer::after {
|
| + left: 45%;
|
| width: 10%;
|
| border-top-style: solid;
|
| - }
|
| +}
|
|
|
| - .spinner-layer::after,
|
| - .circle-clipper::after {
|
| - content: '';
|
| +.spinner-layer::after, .circle-clipper::after {
|
| + content: '';
|
| box-sizing: border-box;
|
| position: absolute;
|
| top: 0;
|
| border-width: var(--paper-spinner-stroke-width, 3px);
|
| border-color: inherit;
|
| border-radius: 50%;
|
| - }
|
| +}
|
|
|
| - .circle-clipper::after {
|
| - bottom: 0;
|
| +.circle-clipper::after {
|
| + bottom: 0;
|
| width: 200%;
|
| border-style: solid;
|
| border-bottom-color: transparent !important;
|
| - }
|
| +}
|
|
|
| - .circle-clipper.left::after {
|
| - left: 0;
|
| +.circle-clipper.left::after {
|
| + left: 0;
|
| border-right-color: transparent !important;
|
| -webkit-transform: rotate(129deg);
|
| transform: rotate(129deg);
|
| - }
|
| +}
|
|
|
| - .circle-clipper.right::after {
|
| - left: -100%;
|
| +.circle-clipper.right::after {
|
| + left: -100%;
|
| border-left-color: transparent !important;
|
| -webkit-transform: rotate(-129deg);
|
| transform: rotate(-129deg);
|
| - }
|
| +}
|
|
|
| - .active .gap-patch::after,
|
| - .active .circle-clipper::after {
|
| - -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
|
| +.active .gap-patch::after, .active .circle-clipper::after {
|
| + -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
|
| -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| -webkit-animation-iteration-count: infinite;
|
| animation-duration: var(--paper-spinner-expand-contract-duration);
|
| animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
|
| animation-iteration-count: infinite;
|
| - }
|
| +}
|
|
|
| - .active .circle-clipper.left::after {
|
| - -webkit-animation-name: left-spin;
|
| +.active .circle-clipper.left::after {
|
| + -webkit-animation-name: left-spin;
|
| animation-name: left-spin;
|
| - }
|
| +}
|
|
|
| - .active .circle-clipper.right::after {
|
| - -webkit-animation-name: right-spin;
|
| +.active .circle-clipper.right::after {
|
| + -webkit-animation-name: right-spin;
|
| animation-name: right-spin;
|
| - }
|
| -
|
| - @-webkit-keyframes left-spin {
|
| - 0% { -webkit-transform: rotate(130deg) }
|
| - 50% { -webkit-transform: rotate(-5deg) }
|
| - to { -webkit-transform: rotate(130deg) }
|
| - }
|
| -
|
| - @keyframes left-spin {
|
| - 0% { transform: rotate(130deg) }
|
| - 50% { transform: rotate(-5deg) }
|
| - to { transform: rotate(130deg) }
|
| - }
|
| -
|
| - @-webkit-keyframes right-spin {
|
| - 0% { -webkit-transform: rotate(-130deg) }
|
| - 50% { -webkit-transform: rotate(5deg) }
|
| - to { -webkit-transform: rotate(-130deg) }
|
| - }
|
| -
|
| - @keyframes right-spin {
|
| - 0% { transform: rotate(-130deg) }
|
| - 50% { transform: rotate(5deg) }
|
| - to { transform: rotate(-130deg) }
|
| - }
|
| -
|
| - #spinnerContainer.cooldown {
|
| - -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| +}
|
| +
|
| +@-webkit-keyframes left-spin {
|
| +0% {
|
| + -webkit-transform: rotate(130deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(-5deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes left-spin {
|
| +0% {
|
| + transform: rotate(130deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(-5deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@-webkit-keyframes right-spin {
|
| +0% {
|
| + -webkit-transform: rotate(-130deg)
|
| +}
|
| +
|
| +50% {
|
| + -webkit-transform: rotate(5deg)
|
| +}
|
| +
|
| +to {
|
| + -webkit-transform: rotate(-130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes right-spin {
|
| +0% {
|
| + transform: rotate(-130deg)
|
| +}
|
| +
|
| +50% {
|
| + transform: rotate(5deg)
|
| +}
|
| +
|
| +to {
|
| + transform: rotate(-130deg)
|
| +}
|
| +
|
| +}
|
| +
|
| +#spinnerContainer.cooldown {
|
| + -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
|
| - }
|
| -
|
| - @-webkit-keyframes fade-out {
|
| - 0% { opacity: 1 }
|
| - to { opacity: 0 }
|
| - }
|
| -
|
| - @keyframes fade-out {
|
| - 0% { opacity: 1 }
|
| - to { opacity: 0 }
|
| - }
|
| - </style>
|
| - </template>
|
| -</dom-module>
|
| +}
|
|
|
| +@-webkit-keyframes fade-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
|
|
| -<dom-module id="paper-spinner-lite" assetpath="chrome://resources/polymer/v1_0/paper-spinner/">
|
| - <template strip-whitespace="">
|
| - <style include="paper-spinner-styles"></style>
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +@keyframes fade-out {
|
| +0% {
|
| + opacity: 1
|
| +}
|
| +
|
| +to {
|
| + opacity: 0
|
| +}
|
| +
|
| +}
|
| +
|
| +</style>
|
|
|
| <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]">
|
| <div class="spinner-layer">
|
| @@ -2753,112 +3166,98 @@ paper-button {
|
| </defs>
|
| </svg>
|
| </iron-iconset-svg>
|
| -<dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elements/cr_toolbar/">
|
| +<dom-module id="cr-toolbar-search-field" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - align-items: center;
|
| + <style scope="cr-toolbar-search-field">:host {
|
| + align-items: center;
|
| display: flex;
|
| height: 40px;
|
| transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
| width 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
| width: 44px;
|
| - }
|
| +}
|
|
|
| - [hidden] {
|
| - display: none !important;
|
| - }
|
| +[hidden] {
|
| + display: none !important;
|
| +}
|
|
|
| - paper-icon-button {
|
| - height: 32px;
|
| +paper-icon-button {
|
| + height: 32px;
|
| margin: 6px;
|
| min-width: 32px;
|
| padding: 6px;
|
| width: 32px;
|
| - }
|
| +}
|
|
|
| - #icon {
|
| - --paper-icon-button-ink-color: white;
|
| +#icon {
|
| + --paper-icon-button-ink-color: white;
|
| transition: margin 150ms, opacity 200ms;
|
| - }
|
| +}
|
|
|
| - #prompt {
|
| - opacity: 0;
|
| - }
|
| +#prompt {
|
| + opacity: 0;
|
| +}
|
|
|
| - paper-spinner-lite {
|
| - --paper-spinner-color: white;
|
| +paper-spinner-lite {
|
| + --paper-spinner-color: white;
|
| height: 20px;
|
| margin: 0 6px;
|
| opacity: 0;
|
| padding: 6px;
|
| position: absolute;
|
| width: 20px;
|
| - }
|
| +}
|
|
|
| - paper-spinner-lite[active] {
|
| - opacity: 1;
|
| - }
|
| -
|
| - #prompt,
|
| - paper-spinner-lite {
|
| - transition: opacity 200ms;
|
| - }
|
| -
|
| - paper-input-container {
|
| - --paper-input-container-input-color: white;
|
| - --paper-input-container-underline: {
|
| - display: none;
|
| - };
|
| - --paper-input-container-underline-focus: {
|
| - display: none;
|
| - };
|
| - --paper-input-container-label: {
|
| - color: inherit;
|
| - font-size: inherit;
|
| - };
|
| +paper-spinner-lite[active] {
|
| + opacity: 1;
|
| +}
|
| +
|
| +#prompt, paper-spinner-lite {
|
| + transition: opacity 200ms;
|
| +}
|
| +
|
| +paper-input-container {
|
| + --paper-input-container-input-color: white;
|
| + --paper-input-container-underline_-_display: none;;
|
| + --paper-input-container-underline-focus_-_display: none;;
|
| + --paper-input-container-label_-_color: apply-shim-inherit; --paper-input-container-label_-_font-size: apply-shim-inherit;;
|
| -webkit-padding-start: 2px;
|
| flex: 1;
|
| - }
|
| +}
|
|
|
| - input[type='search']::-webkit-search-decoration,
|
| - input[type='search']::-webkit-search-cancel-button,
|
| - input[type='search']::-webkit-search-results-button {
|
| - -webkit-appearance: none;
|
| - }
|
| +input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button {
|
| + -webkit-appearance: none;
|
| +}
|
|
|
| - /** Wide layout. */
|
| - :host(:not([narrow])) {
|
| - -webkit-padding-end: 0;
|
| +:host(:not([narrow])) {
|
| + -webkit-padding-end: 0;
|
| background: rgba(0, 0, 0, 0.22);
|
| border-radius: 2px;
|
| cursor: text;
|
| width: var(--cr-toolbar-field-width);
|
| - }
|
| +}
|
|
|
| - :host(:not([narrow]):not([showing-search])) #icon,
|
| - :host(:not([narrow])) #prompt {
|
| - opacity: 0.6;
|
| - }
|
| +:host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt {
|
| + opacity: 0.6;
|
| +}
|
|
|
| - :host([narrow]:not([showing-search])) paper-input-container {
|
| - display: none;
|
| - }
|
| +:host([narrow]:not([showing-search])) paper-input-container {
|
| + display: none;
|
| +}
|
|
|
| - /* Search open. */
|
| - :host([showing-search][spinner-active]) #icon {
|
| - opacity: 0;
|
| - }
|
| +:host([showing-search][spinner-active]) #icon {
|
| + opacity: 0;
|
| +}
|
|
|
| - :host([narrow][showing-search]) {
|
| - width: 100%;
|
| - }
|
| +:host([narrow][showing-search]) {
|
| + width: 100%;
|
| +}
|
|
|
| - :host([narrow][showing-search]) #icon,
|
| - :host([narrow][showing-search]) paper-spinner-lite {
|
| - -webkit-margin-start: 18px;
|
| - }
|
| - </style>
|
| +:host([narrow][showing-search]) #icon, :host([narrow][showing-search]) paper-spinner-lite {
|
| + -webkit-margin-start: 18px;
|
| +}
|
| +
|
| +</style>
|
| <paper-spinner-lite active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">
|
| </paper-spinner-lite>
|
| <paper-icon-button id="icon" icon="cr:search" title="[[label]]" tabindex$="[[computeIconTabIndex_(narrow)]]">
|
| @@ -2871,75 +3270,75 @@ paper-button {
|
| </paper-icon-button>
|
| </template>
|
| </dom-module>
|
| -<dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar/">
|
| +<dom-module id="cr-toolbar" assetpath="chrome://resources/cr_elements/cr_toolbar/" css-build="shadow">
|
| <template>
|
| - <style>
|
| - :host {
|
| - --cr-toolbar-field-width: 580px;
|
| + <style scope="cr-toolbar">:host {
|
| + --cr-toolbar-field-width: 580px;
|
| color: #fff;
|
| display: flex;
|
| height: 56px;
|
| - }
|
| +}
|
|
|
| - h1 {
|
| - -webkit-margin-start: 6px;
|
| +h1 {
|
| + -webkit-margin-start: 6px;
|
| flex: 1;
|
| font-size: 123%;
|
| font-weight: 400;
|
| text-overflow: ellipsis;
|
| overflow: hidden;
|
| white-space: nowrap;
|
| - }
|
| +}
|
|
|
| - #leftContent {
|
| - -webkit-margin-start: 18px;
|
| +#leftContent {
|
| + -webkit-margin-start: 18px;
|
| align-items: center;
|
| display: flex;
|
| position: absolute;
|
| transition: opacity 100ms;
|
| - }
|
| +}
|
|
|
| - #menuButton {
|
| - height: 32px;
|
| +#menuButton {
|
| + height: 32px;
|
| margin-bottom: 6px;
|
| margin-top: 6px;
|
| min-width: 32px;
|
| padding: 6px;
|
| width: 32px;
|
| - }
|
| +}
|
|
|
| - #centeredContent {
|
| - -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
|
| +#centeredContent {
|
| + -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
|
| display: flex;
|
| flex: 1 1 0;
|
| justify-content: center;
|
| - }
|
| +}
|
|
|
| - :host([narrow_]) #centeredContent {
|
| - -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px);
|
| - }
|
| +:host([narrow_]) #centeredContent {
|
| + -webkit-padding-end: var(--cr-toolbar-field-end-padding, 12px);
|
| +}
|
|
|
| - :host(:not([narrow_])) h1 {
|
| - @apply(--cr-toolbar-header-wide);
|
| - }
|
| +:host(:not([narrow_])) h1 {
|
| + -webkit-margin-start: var(--cr-toolbar-header-wide_-_-webkit-margin-start); -webkit-margin-end: var(--cr-toolbar-header-wide_-_-webkit-margin-end);
|
| +}
|
|
|
| - :host(:not([narrow_])) #leftContent {
|
| - max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
|
| - @apply(--cr-toolbar-left-content-wide);
|
| - }
|
| +:host(:not([narrow_])) #leftContent {
|
| + max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
|
| + -webkit-margin-start: var(--cr-toolbar-left-content-wide_-_-webkit-margin-start); flex: var(--cr-toolbar-left-content-wide_-_flex); max-width: var(--cr-toolbar-left-content-wide_-_max-width, calc((100% - var(--cr-toolbar-field-width) - 18px) / 2)); position: var(--cr-toolbar-left-content-wide_-_position);
|
| +}
|
|
|
| - :host(:not([narrow_])) #rightContent {
|
| - @apply(--cr-toolbar-right-content-wide);
|
| - }
|
| +:host(:not([narrow_])) #rightContent {
|
| + flex: var(--cr-toolbar-right-content-wide_-_flex); position: var(--cr-toolbar-right-content-wide_-_position);
|
| +}
|
|
|
| - :host([narrow_]) #centeredContent {
|
| - justify-content: flex-end;
|
| - }
|
| +:host([narrow_]) #centeredContent {
|
| + justify-content: flex-end;
|
| +}
|
|
|
| - :host([narrow_][showing-search_]) #leftContent {
|
| - opacity: 0;
|
| - }
|
| - </style>
|
| +:host([narrow_][showing-search_]) #leftContent {
|
| + opacity: 0;
|
| +}
|
| +
|
| +</style>
|
| <div id="leftContent">
|
| <template is="dom-if" if="[[showMenu]]">
|
| <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_" title="[[menuLabel]]">
|
| @@ -2960,13 +3359,8 @@ paper-button {
|
| </div>
|
| </template>
|
| </dom-module>
|
| -<dom-module id="downloads-toolbar" assetpath="chrome://downloads/">
|
| - <template><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| -:host {
|
| +<dom-module id="downloads-toolbar" assetpath="chrome://downloads/" css-build="shadow">
|
| + <template><style scope="downloads-toolbar">:host {
|
| align-items: center;
|
| background: var(--md-toolbar-color);
|
| color: white;
|
| @@ -2977,20 +3371,9 @@ paper-button {
|
| #toolbar {
|
| --cr-toolbar-field-end-padding: 0;
|
| --cr-toolbar-field-width: var(--downloads-item-width);
|
| - --cr-toolbar-header-wide: {
|
| - -webkit-margin-start: 24px;
|
| - -webkit-margin-end: 16px; /* Only matters around 900px in Russian. */
|
| - };
|
| - --cr-toolbar-left-content-wide: {
|
| - -webkit-margin-start: 0;
|
| - flex: 1 0 1px;
|
| - max-width: none;
|
| - position: static;
|
| - };
|
| - --cr-toolbar-right-content-wide: {
|
| - flex: 1 0 1px;
|
| - position: static;
|
| - };
|
| + --cr-toolbar-header-wide_-_-webkit-margin-start: 24px; --cr-toolbar-header-wide_-_-webkit-margin-end: 16px;;
|
| + --cr-toolbar-left-content-wide_-_-webkit-margin-start: 0; --cr-toolbar-left-content-wide_-_flex: 1 0 1px; --cr-toolbar-left-content-wide_-_max-width: none; --cr-toolbar-left-content-wide_-_position: static;;
|
| + --cr-toolbar-right-content-wide_-_flex: 1 0 1px; --cr-toolbar-right-content-wide_-_position: static;;
|
| align-items: center;
|
| flex: 1;
|
| }
|
| @@ -2998,11 +3381,7 @@ paper-button {
|
| paper-icon-button {
|
| --iron-icon-height: 20px;
|
| --iron-icon-width: 20px;
|
| - --paper-icon-button: {
|
| - height: 32px;
|
| - padding: 6px;
|
| - width: 32px;
|
| - };
|
| + --paper-icon-button_-_height: 32px; --paper-icon-button_-_padding: 6px; --paper-icon-button_-_width: 32px;;
|
| }
|
|
|
| .more-actions {
|
| @@ -3012,15 +3391,11 @@ paper-icon-button {
|
| }
|
|
|
| #more {
|
| - --paper-menu-button: {
|
| - padding: 0;
|
| - };
|
| + --paper-menu-button_-_padding: 0;;
|
| }
|
|
|
| paper-menu {
|
| - --paper-menu-selected-item: {
|
| - font-weight: normal;
|
| - };
|
| + --paper-menu-selected-item_-_font-weight: normal;;
|
| }
|
|
|
| paper-item {
|
| @@ -3028,16 +3403,10 @@ paper-item {
|
| cursor: pointer;
|
| font: inherit;
|
| min-height: 40px;
|
| - /* TODO(michaelpg): fix this for everybody ever.
|
| - * https://github.com/PolymerElements/paper-menu-button/issues/56 */
|
| +
|
| white-space: nowrap;
|
| }
|
|
|
| -</style><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| * {
|
| --downloads-item-width: 622px;
|
| }
|
| @@ -3088,13 +3457,9 @@ paper-button {
|
|
|
| </style>
|
|
|
| -<dom-module id="downloads-manager" assetpath="chrome://downloads/">
|
| - <template><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| -:host {
|
| +<dom-module id="downloads-manager" assetpath="chrome://downloads/" css-build="shadow">
|
| + <template>
|
| + <style no-process="" scope="downloads-manager">:host {
|
| display: flex;
|
| flex: 1 0;
|
| flex-direction: column;
|
| @@ -3102,24 +3467,21 @@ paper-button {
|
| }
|
|
|
| @media screen and (max-width: 1024px) {
|
| - :host {
|
| - flex-basis: 670px; /* 622 card width + 24 left margin + 24 right margin. */
|
| - }
|
| +:host {
|
| + flex-basis: 670px;
|
| +}
|
| +
|
| }
|
|
|
| #downloads-list {
|
| - /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
|
| - * style="overflow: auto" is still being set by <iron-list>'s JS. Weird. */
|
| overflow-y: overlay !important;
|
| }
|
|
|
| -#no-downloads,
|
| -#downloads-list {
|
| +#no-downloads, #downloads-list {
|
| flex: 1;
|
| }
|
|
|
| -:host([loading]) #no-downloads,
|
| -:host([loading]) #downloads-list {
|
| +:host([loading]) #no-downloads, :host([loading]) #downloads-list {
|
| display: none;
|
| }
|
|
|
| @@ -3130,8 +3492,7 @@ paper-button {
|
| font-size: 123.1%;
|
| font-weight: 500;
|
| justify-content: center;
|
| - /* To avoid overlapping with the header, we need this min-height
|
| - * until bug 596743 is fixed. */
|
| +
|
| min-height: min-content;
|
| }
|
|
|
| @@ -3139,15 +3500,10 @@ paper-button {
|
| background: -webkit-image-set(
|
| url("chrome://downloads/1x/no_downloads.png") 1x,
|
| url("chrome://downloads/2x/no_downloads.png") 2x) no-repeat center center;
|
| - height: 144px; /* Matches natural image height. */
|
| + height: 144px;
|
| margin-bottom: 32px;
|
| }
|
|
|
| -</style><style>
|
| -/* Copyright 2015 The Chromium Authors. All rights reserved.
|
| - * Use of this source code is governed by a BSD-style license that can be
|
| - * found in the LICENSE file. */
|
| -
|
| * {
|
| --downloads-item-width: 622px;
|
| }
|
| @@ -3162,12 +3518,11 @@ paper-button {
|
| min-width: auto;
|
| }
|
|
|
| +#toolbar {
|
| + background: var(--md-toolbar-color);
|
| +}
|
| +
|
| </style>
|
| - <style no-process="">
|
| - #toolbar {
|
| - background: var(--md-toolbar-color);
|
| - }
|
| - </style>
|
| <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}">
|
| </downloads-toolbar>
|
| <iron-list id="downloads-list" items="{{items_}}" hidden="[[!hasDownloads_]]">
|
|
|
Chromium Code Reviews
Issue 2268863002:
MD History: Run polymer-css-build over vulcanized output (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master