googlechrome
/
chromium-dashboard
зеркало из https://github.com/GoogleChrome/chromium-dashboard.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Replace scss files used by chromedash elements with -css.js files. (#1816) 

* Remove python2 scripts. Add `npm stop`.

* Add py2 scripts back in.

* Add dialog before drafting email

* Fix computation of prerequests.

* Fix broken "Edit fields" button by removing it.

* Move the item_stage_map setup to willUpdate.

* Replace shared.scss with shared-css.js and _vars.scss with _vars-css.js

* Delete the errant test file.

* Replace static/sass/element scss files with -css.js files.  Delete redundant _element.scss. Update chromedash elements.

* Delete commented code.

* Add fixes for css variables.

* More fixes to css vars.

* Remove top-level shared-css.js
This commit is contained in:
Daniel LaLiberte 2022-04-08 12:04:23 -04:00 коммит произвёл GitHub
Родитель 988c11948e
Коммит be0e5c996d
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
33 изменённых файлов: 737 добавлений и 617 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
static/elements/chromedash-accordion.js
Просмотреть файл

@ -2,7 +2,7 @@ import {LitElement, css, html} from 'lit';
import '@polymer/iron-icon';
import '@polymer/iron-collapse';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
// This implements one section of an accordion widget. In other words, it is
// just a header that controls one secton on content.
@ -17,7 +17,7 @@ class ChromedashAccordion extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
h3 {
margin: var(--content-padding-half) 0 0 0;

4
static/elements/chromedash-approvals-dialog.js
Просмотреть файл

@ -1,7 +1,7 @@
import {LitElement, css, html, nothing} from 'lit';
import './chromedash-dialog';
import '@polymer/iron-icon';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
export const STATE_NAMES = [
// Not used: [0, 'Needs review'],
@ -75,7 +75,7 @@ class ChromedashApprovalsDialog extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
.loading {
width: 650px;

4
static/elements/chromedash-banner.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html, nothing} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashBanner extends LitElement {
@ -18,7 +18,7 @@ class ChromedashBanner extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
div {
display: inline-block;

4
static/elements/chromedash-callout.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashCallout extends LitElement {
static get properties() {
@ -41,7 +41,7 @@ class ChromedashCallout extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
#bubble {
position: absolute;

4
static/elements/chromedash-color-status.js
Просмотреть файл

@ -1,6 +1,6 @@
import {LitElement, css, html} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
const CYAN = 120;
const DEFAULT_MAX = 7;
@ -20,7 +20,7 @@ class ChromedashColorStatus extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
span {
background-color: rgb(255,0,0);

4
static/elements/chromedash-feature-detail.js
Просмотреть файл

@ -1,7 +1,7 @@
import {LitElement, css, html, nothing} from 'lit';
import '@polymer/iron-icon';
import './chromedash-callout';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashFeatureDetail extends LitElement {
static get properties() {
@ -23,7 +23,7 @@ class ChromedashFeatureDetail extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: block;

4
static/elements/chromedash-feature-table.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html, nothing} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
import {STATE_NAMES} from './chromedash-approvals-dialog.js';
class ChromedashFeatureTable extends LitElement {
@ -67,7 +67,7 @@ class ChromedashFeatureTable extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
table {
width: var(--max-content-width);

8
static/elements/chromedash-feature.js
Просмотреть файл

@ -4,15 +4,15 @@ import {autolink} from './utils.js';
import '@polymer/iron-icon';
import './chromedash-color-status';
import style from '../css/elements/chromedash-feature.css';
import sharedStyle from '../css/shared.css';
import {FEATURE_CSS} from '../sass/elements/chromedash-feature-css.js';
import {SHARED_STYLES} from '../sass/shared-css.js';
const MAX_STANDARDS_VAL = 5;
const MAX_VENDOR_VIEW = 7;
const MAX_WEBDEV_VIEW = 6;
class ChromedashFeature extends LitElement {
static styles = style;
static styles = FEATURE_CSS;
static get properties() {
return {
@ -497,7 +497,7 @@ customElements.define('chromedash-feature', ChromedashFeature);
class ChromedashMultiLinks extends LitElement {
static styles = sharedStyle;
static styles = SHARED_STYLES;
static get properties() {
return {

4
static/elements/chromedash-featurelist.js
Просмотреть файл

@ -1,12 +1,12 @@
import {LitElement, html} from 'lit';
// eslint-disable-next-line no-unused-vars
import './chromedash-feature';
import style from '../css/elements/chromedash-featurelist.css';
import {FEATURELIST_CSS} from '../sass/elements/chromedash-featurelist-css.js';
const MAX_FEATURES_SHOWN = 500;
class ChromedashFeaturelist extends LitElement {
static styles = style;
static styles = FEATURELIST_CSS;
static get properties() {
return {

4
static/elements/chromedash-gantt.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html, nothing} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashGantt extends LitElement {
static get properties() {
@ -19,7 +19,7 @@ class ChromedashGantt extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
width: 200px;

4
static/elements/chromedash-legend.js
Просмотреть файл

@ -1,7 +1,7 @@
import {LitElement, css, html, nothing} from 'lit';
import './chromedash-color-status';
import './chromedash-dialog';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashLegend extends LitElement {
static get properties() {
@ -13,7 +13,7 @@ class ChromedashLegend extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
h3 {
border-bottom: var(--heading-underbar);

4
static/elements/chromedash-metadata.js
Просмотреть файл

@ -1,6 +1,6 @@
import {LitElement, css, html} from 'lit';
import {ifDefined} from 'lit/directives/if-defined.js';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashMetadata extends LitElement {
static get properties() {
@ -37,7 +37,7 @@ class ChromedashMetadata extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: block;

4
static/elements/chromedash-metrics.js
Просмотреть файл

@ -3,7 +3,7 @@ import {ifDefined} from 'lit/directives/if-defined.js';
import '@polymer/iron-icon';
import './chromedash-x-meter';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashMetrics extends LitElement {
static get properties() {
@ -31,7 +31,7 @@ class ChromedashMetrics extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: block;

4
static/elements/chromedash-myfeatures.js
Просмотреть файл

@ -2,7 +2,7 @@ import {LitElement, css, html, nothing} from 'lit';
import './chromedash-accordion';
import './chromedash-approvals-dialog';
import './chromedash-feature-table';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashMyFeatures extends LitElement {
@ -26,7 +26,7 @@ class ChromedashMyFeatures extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
chromedash-accordion {
padding: 0 var(--content-padding);

7
static/elements/chromedash-process-overview.js
Просмотреть файл

@ -2,9 +2,9 @@ import {LitElement, css, html, nothing} from 'lit';
import '@polymer/iron-icon';
import './chromedash-callout';
import './chromedash-dialog';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashProcessOverview extends LitElement {
export class ChromedashProcessOverview extends LitElement {
static get properties() {
return {
feature: {type: Object},
@ -27,7 +27,7 @@ class ChromedashProcessOverview extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: block;
@ -163,7 +163,6 @@ class ChromedashProcessOverview extends LitElement {
});
if (pendingItems.length > 0) {
pendingItems.continueUrl = url;
console.info('url', url);
this.pendingItems = pendingItems; // Note: one assignment to this.pendingItems.
// Open the dialog.
this.shadowRoot.querySelector('chromedash-dialog').open();

5
static/elements/chromedash-roadmap-milestone-card.js
Просмотреть файл

@ -1,8 +1,9 @@
import {LitElement, html, nothing} from 'lit';
import style from '../css/elements/chromedash-roadmap-milestone-card.css';
import {ROADMAP_MILESTONE_CARD_CSS} from
'../sass/elements/chromedash-roadmap-milestone-card-css.js';
class ChromedashRoadmapMilestoneCard extends LitElement {
static styles = style;
static styles = ROADMAP_MILESTONE_CARD_CSS;
static get properties() {
return {
// Assigned in schedule-apge.js, value from Django

4
static/elements/chromedash-roadmap.js
Просмотреть файл

@ -1,6 +1,6 @@
import {LitElement, html} from 'lit';
import '@polymer/iron-icon';
import style from '../css/elements/chromedash-roadmap.css';
import {ROADMAP_CSS} from '../sass/elements/chromedash-roadmap-css.js';
const TEMPLATE_CONTENT = {
stable_minus_one: {
@ -52,7 +52,7 @@ const SHOW_DATES = true;
const compareFeatures = (a, b) => a.name.localeCompare(b.name, 'fr', {ignorePunctuation: true}); // comparator for sorting milestone features
class ChromedashRoadmap extends LitElement {
static styles = style;
static styles = ROADMAP_CSS;
static get properties() {
return {

4
static/elements/chromedash-timeline.js
Просмотреть файл

@ -1,6 +1,6 @@
// TODO(yangguang): This component is not tested. Data is not available in devserver, so cannot be tested locally.
import {LitElement, css, html} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashTimeline extends LitElement {
static get properties() {
@ -29,7 +29,7 @@ class ChromedashTimeline extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: block;

4
static/elements/chromedash-toast.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
const DEFAULT_DURATION = 7000;
@ -21,7 +21,7 @@ class ChromedashToast extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: flex;

5
static/elements/chromedash-userlist.js
Просмотреть файл

@ -1,6 +1,5 @@
import {LitElement, css, html, nothing} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashUserlist extends LitElement {
static get properties() {
@ -16,7 +15,7 @@ class ChromedashUserlist extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
form {
padding: var(--content-padding);

4
static/elements/chromedash-x-meter.js
Просмотреть файл

@ -1,5 +1,5 @@
import {LitElement, css, html} from 'lit';
import SHARED_STYLES from '../css/shared.css';
import {SHARED_STYLES} from '../sass/shared-css.js';
class ChromedashXMeter extends LitElement {
static get properties() {
@ -19,7 +19,7 @@ class ChromedashXMeter extends LitElement {
static get styles() {
return [
SHARED_STYLES,
...SHARED_STYLES,
css`
:host {
display: inline-block;

19
static/sass/_layout-css.js Normal file
Просмотреть файл

@ -0,0 +1,19 @@
import { css } from "lit";
export const LAYOUT_CSS = css`
.layout {
display: flex;
}
.layout.wrap {
flex-wrap: wrap;
}
.layout.center {
align-items: center;
}
.layout.center-center {
align-items: center;
justify-content: center;
}
.layout.vertical {
flex-direction: column;
}`;

44
static/sass/_vars-css.js Normal file
Просмотреть файл

@ -0,0 +1,44 @@
import {css} from 'lit';
export const VARS = css`
:root {
--default-font-color: #222;
--page-background: #fafafa;
--light-grey: #eee;
--gray-1: #e6e6e6;
--gray-2: #a9a9a9;
--gray-3: #797979;
--gray-4: #515151;
--nav-link-color: #444;
--bar-shadow-color: rgba(0, 0, 0, .065);
--bar-border-color: #D4D4D4;
--chromium-color-dark: #366597;
--chromium-color-medium: #85b4df;
--chromium-color-light: #bdd6ed;
--chromium-color-center: #4580c0;
--material-primary-button: #58f;
--card-background: white;
--card-border: 1px solid #ddd;
--card-box-shadow: rgba(0, 0, 0, 0.067) 1px 1px 4px;
--md-yellow-100: #FFF9C4;
--md-yellow-200: #FFF59D;
/* App specific */
--invalid-color: rgba(255,0,0,0.75);
--content-padding: 16px;
--content-padding-negative: -16px;
--content-padding-huge: 80px;
--default-border-radius: 3px;
--app-drawer-width: 200px;
--header-height: 135px;
--max-content-width: 760px;
}`;

17
static/sass/elements/_element.scss
Просмотреть файл

@ -1,17 +0,0 @@
@import "../shared";
@import "../vars";
$feature-min-height: 75px;
* {
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
font: inherit;
text-decoration: inherit;
}
.conditional-comma:last-child {
display: none;
}

282
static/sass/elements/chromedash-feature-css.js Normal file
Просмотреть файл

@ -0,0 +1,282 @@
import { css } from "lit";
import { SHARED_STYLES } from "../shared-css.js";
export const FEATURE_CSS = [
SHARED_STYLES,
css`
:host {
display: block;
position: relative;
background: #fff;
border-radius: 3px;
border: 1px solid #ddd;
box-shadow: rgba(0, 0, 0, 0.067) 1px 1px 4px;
padding: 10px 10px 10px 20px !important;
list-style: none;
box-sizing: border-box;
contain: content;
overflow: hidden;
}
:host:active {
outline: none;
}
:host([open]) {
outline: none;
}
:host([open]) .desc summary {
white-space: normal;
}
[hidden] {
display: none !important;
}
button {
background: transparent;
border: 0;
padding: 0;
}
h2 {
display: inline-block;
font-size: 25px;
flex: 1 0 0;
}
iron-icon {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
}
iron-icon.android {
color: #a4c739;
}
iron-icon.remove {
color: var(--paper-red-700);
}
iron-icon.deprecated {
color: var(--paper-orange-700);
}
iron-icon.experimental {
color: var(--paper-green-700);
}
iron-icon.intervention {
color: var(--paper-yellow-800);
}
iron-icon.disabled {
opacity: 0.5;
}
.opennew {
width: 18px;
height: 18px;
}
.open-standalone {
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
height: 100%;
border-left: 2px solid #eee;
padding: 4px;
}
.iconrow {
display: flex;
align-items: center;
}
.category-tooltip,
.topcorner .tooltip {
margin-left: 4px;
}
.topcorner a {
text-decoration: none;
}
hgroup {
display: flex;
align-items: flex-start;
cursor: pointer;
}
hgroup .category {
color: #a9a9a9;
}
hgroup chromedash-color-status {
position: absolute;
top: 0;
left: 0;
}
section {
margin: 18px 0;
}
section.desc {
margin: 10px 0 0 0;
cursor: pointer;
color: #797979;
line-height: 20px;
}
section.desc summary p:not(.preformatted) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
section.desc summary p:not(:first-child) {
margin: 10px 0 0 0;
}
section h3 {
margin: 10px 0;
font-size: 18px;
font-weight: 400;
}
section div > span {
flex-shrink: 0;
}
section .impl_status {
display: flex;
flex-direction: column;
}
section .impl_status > span {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
}
section .impl_status > span:nth-of-type(odd) {
background: #eee;
}
section .impl_status .chromium_status {
font-weight: 500;
}
section .impl_status .vendor_icon,
section .impl_status .chrome_icon,
section .impl_status .opera_icon {
background: url(/static/img/browsers-logos.png) no-repeat;
background-size: cover;
height: 20px;
width: 20px;
margin-right: 4px;
display: inline-block;
}
section .impl_status .chrome_icon {
background-position: 0px 50%;
}
section .impl_status .opera_icon {
background-position: -75px 50%;
}
section .impl_status_label {
display: flex;
align-items: center;
}
section .impl_status_icons {
display: flex;
align-items: center;
min-width: 50px;
}
section .views {
display: flex;
flex-wrap: wrap;
}
section .views .view {
display: flex;
align-items: center;
position: relative;
height: 35px;
background: #eee;
margin: 0 8px 16px 0;
padding: 8px;
}
section .views .standardization .vendor-view {
margin-left: 0;
}
section .views iron-icon {
margin: 0 8px;
}
section .views .vendor-view {
background: url(/static/img/browsers-logos.png) no-repeat;
background-size: cover;
height: 16px;
margin: 8px;
display: inline-block;
}
section .views .edge-view {
background-position: -80px 50%;
width: 16px;
}
section .views .safari-view {
background-position: -20px 50%;
width: 17px;
}
section .views .ff-view {
background-position: -40px 50%;
width: 17px;
}
section .views .w3c-view {
background-position: -99px 50%;
width: 22px;
}
section chromedash-color-status {
overflow: hidden;
}
section chromedash-color-status.bottom {
margin-top: 3px;
}
section .owner-list {
display: flex;
align-items: flex-end;
flex-direction: column;
}
section .owner-list a {
display: block;
}
section .comments html-echo {
white-space: pre-wrap;
}
section .doc_links,
section .sample_links,
section .owner {
flex-shrink: 1 !important;
}
section .sample_links {
margin-left: 8px;
}
.sidebyside {
display: flex;
justify-content: space-between;
}
.sidebyside .flex {
flex: 0 0 calc(50% - 16px);
}
.resources label {
margin-right: 8px;
}
@media only screen and (max-width: 700px) {
:host {
border-radius: 0 !important;
margin: 7px initial !important;
transition: none !important;
}
iron-icon {
--iron-icon-height: 16px;
--iron-icon-width: 16px;
}
h2 {
font-size: 20px !important;
}
section {
margin-left: 0;
}
.category {
display: none;
}
.impl_status > span:not([hidden]):not(:last-of-type),
.impl_status > a {
margin-bottom: 10px;
}
.views > span {
margin-bottom: 10px;
}
.sidebyside {
display: block;
}
}
@media only screen and (min-width: 701px) {
.resources {
display: flex;
align-items: center;
}
}
`,
];

333
static/sass/elements/chromedash-feature.scss
Просмотреть файл

@ -1,333 +0,0 @@
@import "element";
:host {
display: block;
position: relative;
background: $card-background;
border-radius: $default-border-radius;
border: $card-border;
box-shadow: $card-box-shadow;
padding: 10px 10px 10px 20px !important;
list-style: none;
box-sizing: border-box;
contain: content;
overflow: hidden;
&:active {
outline: none;
}
}
:host([open]) {
outline: none;
.desc summary {
white-space: normal;
}
}
[hidden] {
display: none !important;
}
button {
background: transparent;
border: 0;
padding: 0;
}
h2 {
display: inline-block;
font-size: 25px;
flex: 1 0 0;
}
iron-icon {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
&.android {
color: #A4C739;
}
&.remove {
color: var(--paper-red-700);
}
&.deprecated {
color: var(--paper-orange-700);
}
&.experimental {
color: var(--paper-green-700);
}
&.intervention {
color: var(--paper-yellow-800);
}
&.disabled {
opacity: 0.5;
}
}
.opennew {
width: 18px;
height: 18px;
}
.open-standalone {
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
height: 100%;
border-left: 2px solid #eee;
padding: 4px;
}
.iconrow {
display: flex;
align-items: center;
}
.category-tooltip,
.topcorner .tooltip {
margin-left: 4px;
}
.topcorner a {
text-decoration: none;
}
hgroup {
display: flex;
align-items: flex-start;
cursor: pointer;
.category {
color: $gray-2;
}
chromedash-color-status {
position: absolute;
top: 0;
left: 0;
}
}
section {
margin: 18px 0;
&.desc {
margin: 10px 0 0 0;
cursor: pointer;
color: $gray-3;
line-height: 20px;
summary p:not(.preformatted) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
summary p:not(:first-child) {
margin: 10px 0 0 0;
}
}
h3 {
margin: 10px 0;
font-size: 18px;
font-weight: 400;
}
div {
> span {
flex-shrink: 0;
}
}
.impl_status {
display: flex;
flex-direction: column;
> span {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
&:nth-of-type(odd) {
background: #eee;
}
}
.chromium_status {
font-weight: 500;
}
.vendor_icon {
background: url(/static/img/browsers-logos.png) no-repeat;
background-size: cover;
height: 20px;
width: 20px;
margin-right: 4px;
display: inline-block;
}
.chrome_icon {
@extend .vendor_icon;
background-position: 0px 50%;
}
.opera_icon {
@extend .vendor_icon;
background-position: -75px 50%;
}
}
.impl_status_label {
display: flex;
align-items: center;
}
.impl_status_icons {
display: flex;
align-items: center;
min-width: 50px;
}
.views {
display: flex;
flex-wrap: wrap;
.view {
display: flex;
align-items: center;
position: relative;
height: 35px;
background: #eee;
margin: 0 8px 16px 0;
padding: 8px;
}
.standardization {
.vendor-view {
margin-left: 0;
}
}
iron-icon {
margin: 0 8px;
}
.vendor-view {
background: url(/static/img/browsers-logos.png) no-repeat;
background-size: cover;
height: 16px;
margin: 8px;
display: inline-block;
}
.edge-view {
background-position: -80px 50%;
width: 16px;
}
.safari-view {
background-position: -20px 50%;
width: 17px
}
.ff-view {
background-position: -40px 50%;
width: 17px;
}
.w3c-view {
background-position: -99px 50%;
width: 22px;
}
}
chromedash-color-status {
overflow: hidden;
&.bottom {
margin-top: 3px;
}
}
.owner-list {
display: flex;
align-items: flex-end;
flex-direction: column;
a {
display: block;
}
}
.comments html-echo {
white-space: pre-wrap;
}
.doc_links, .sample_links, .owner {
flex-shrink: 1 !important;
}
.sample_links {
margin-left: 8px;
}
}
.sidebyside {
display: flex;
justify-content: space-between;
.flex {
flex: 0 0 calc(50% - 16px);
}
}
.resources {
label {
margin-right: 8px;
}
}
@media only screen and (max-width: 700px) {
:host {
border-radius: 0 !important;
margin: 7px initial !important;
transition: none !important;
}
iron-icon {
--iron-icon-height: 16px;
--iron-icon-width: 16px;
}
h2 {
font-size: 20px !important;
}
section {
margin-left: 0;
}
.category {
display: none;
}
.impl_status {
> span:not([hidden]):not(:last-of-type),
> a {
margin-bottom: 10px;
}
}
.views > span {
margin-bottom: 10px;
}
.sidebyside {
display: block;
}
}
@media only screen and (min-width: 701px) {
.resources {
display: flex;
align-items: center;
}
}

40
static/sass/elements/chromedash-featurelist-css.js Normal file
Просмотреть файл

@ -0,0 +1,40 @@
import { css } from "lit";
import { SHARED_STYLES } from "../shared-css.js";
export const FEATURELIST_CSS = [
SHARED_STYLES,
css`
:host {
display: block;
}
#ironlist {
min-height: 0;
}
.milestone-marker {
margin: 32px 0 8px 0;
font-size: 18px;
-webkit-font-smoothing: initial;
}
.item {
width: 100%;
padding-bottom: 8px;
}
p {
margin: 32px;
}
@media only screen and (max-width: 700px) {
.milestone-marker {
font-size: 14px;
font-weight: 500;
margin: 8px;
}
[data-first-of-milestone]:after {
font-size: 12px;
font-weight: normal;
top: -22px;
opacity: 1;
text-transform: uppercase;
}
}
`,
];

44
static/sass/elements/chromedash-featurelist.scss
Просмотреть файл

@ -1,44 +0,0 @@
@import "element";
:host {
display: block;
}
// See https://crbug.com/553278
#ironlist {
min-height: 0;
}
.milestone-marker {
$milestone-label-size: 18px;
margin: 32px 0 8px 0;
font-size: $milestone-label-size;
-webkit-font-smoothing: initial;
}
.item {
width: 100%;
padding-bottom: 8px;
}
p {
margin: 32px;
}
@media only screen and (max-width: 700px) {
.milestone-marker {
font-size: 14px;
font-weight: 500;
margin: 8px;
}
[data-first-of-milestone] {
$milestone-label-size: 12px;
&:after {
font-size: $milestone-label-size;
font-weight: normal;
top: -$milestone-label-size - 10;
opacity: 1;
text-transform: uppercase;
}
}
}

15
static/sass/elements/chromedash-roadmap-css.js Normal file
Просмотреть файл

@ -0,0 +1,15 @@
import { css } from "lit";
import { SHARED_STYLES } from "../shared-css.js";
import { LAYOUT_CSS } from "../_layout-css.js";
export const ROADMAP_CSS = [
SHARED_STYLES,
LAYOUT_CSS,
css`
:host {
display: inline-flex;
padding: 0 0em var(--content-padding-huge);
margin-right: var(--content-padding-negative);
}
`,
];

164
static/sass/elements/chromedash-roadmap-milestone-card-css.js Normal file
Просмотреть файл

@ -0,0 +1,164 @@
import { css } from "lit";
import { SHARED_STYLES } from "../shared-css.js";
import { LAYOUT_CSS } from "../_layout-css.js";
export const ROADMAP_MILESTONE_CARD_CSS = [
SHARED_STYLES,
LAYOUT_CSS,
css`
.layout {
display: flex;
}
.layout.wrap {
flex-wrap: wrap;
}
.layout.center {
align-items: center;
}
.layout.center-center {
align-items: center;
justify-content: center;
}
.layout.vertical {
flex-direction: column;
}
:host {
padding: 16px;
background: #fff;
padding: 16px;
margin-bottom: 16px !important;
border-radius: 3px;
margin-right: 8px !important;
margin-left: 8px !important;
counter-reset: featurecount;
margin: 8px;
}
iron-icon {
--iron-icon-height: 18px;
--iron-icon-width: 18px;
color: #366597;
}
iron-icon:hover.android {
color: #a4c739;
}
iron-icon:hover.remove {
color: var(--paper-red-700);
}
iron-icon:hover.deprecated {
color: var(--paper-orange-700);
}
iron-icon:hover.experimental {
color: var(--paper-green-700);
}
iron-icon:hover.intervention {
color: var(--paper-yellow-800);
}
iron-icon.pushicon {
cursor: pointer;
}
.main-toolbar .toolbar-content {
max-width: 100%;
width: 100%;
}
.chrome_version {
font-size: 45px;
margin: 8px 0 16px 0;
white-space: nowrap;
}
.channel_label {
font-weight: 600;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
.chrome_version .chrome-logo,
.chrome_version--stable .chrome-logo {
position: relative;
width: 45px;
height: 45px;
background: url(/static/img/chrome_logo.svg) no-repeat 50% 50%;
background-size: contain;
margin-right: 8px;
}
.chrome_version--beta .chrome-logo {
background-image: url(/static/img/chrome_logo_beta.svg);
}
.chrome_version--dev .chrome-logo {
background-image: url(/static/img/chrome_logo_dev.svg);
}
.chrome_version--canary .chrome-logo {
background-image: url(/static/img/chrome_logo_canary.svg);
background-size: 42px;
}
.chrome_version--dev_plus_one .chrome-logo {
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.release {
padding: 16px;
background: #fff;
padding: 16px;
margin-bottom: 16px !important;
border-radius: 3px;
flex: 1 0 0;
min-width: 300px;
counter-reset: featurecount;
}
.release.no-components .feature_shipping_type {
display: none;
}
.release.no-components .feature_shipping_type + ul {
margin-top: 0;
}
.milestone_info {
margin-bottom: 8px;
}
.milestone_info:nth-of-type(3) {
border-bottom: 1px solid #e6e6e6;
padding-bottom: 16px;
}
.milestone_info .channel_label {
font-size: inherit;
font-weight: 500;
text-transform: none;
}
.no_feature_released {
color: #737373;
}
.features_list {
margin-top: 32px;
}
.features_list ul,
.features_list ol {
margin-top: 8px;
list-style: none;
}
.features_list li {
padding: 8px;
font-weight: 500;
display: flex;
justify-content: space-between;
}
.features_list li .icon_row {
flex-shrink: 0;
}
.features_list li > :first-child {
overflow: hidden;
text-overflow: ellipsis;
}
.features_list .features_header {
font-weight: 500;
text-transform: uppercase;
margin-bottom: 16px;
}
.feature_shipping_type {
margin-top: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.highlight {
background: var(--light-accent-color);
}
`,
];

168
static/sass/elements/chromedash-roadmap-milestone-card.scss
Просмотреть файл

@ -1,168 +0,0 @@
@import "element";
@import "../_layout";
:host {
padding: $content-padding;
background: #fff;
padding: $content-padding;
margin-bottom: $content-padding !important;
border-radius: $default-border-radius;
margin-right: $content-padding/2 !important;
margin-left: $content-padding/2 !important;
counter-reset: featurecount;
margin: $content-padding / 2;
}
iron-icon {
--iron-icon-height: 18px;
--iron-icon-width: 18px;
color: $chromium-color-dark;
&:hover.android {
color: #A4C739;
}
&:hover.remove {
color: var(--paper-red-700);
}
&:hover.deprecated {
color: var(--paper-orange-700);
}
&:hover.experimental {
color: var(--paper-green-700);
}
&:hover.intervention {
color: var(--paper-yellow-800);
}
&.pushicon {
cursor: pointer;
}
}
.main-toolbar .toolbar-content {
max-width: 100%; // override.
width: 100%;
}
.chrome_version {
font-size: 45px;
margin: $content-padding / 2 0 $content-padding 0;
white-space: nowrap;
}
.channel_label {
font-weight: 600;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
.chrome_version .chrome-logo,
.chrome_version--stable .chrome-logo {
position: relative;
width: 45px;
height: 45px;
background: url(/static/img/chrome_logo.svg) no-repeat 50% 50%;
background-size: contain;
margin-right: $content-padding / 2;
}
.chrome_version--beta .chrome-logo {
background-image: url(/static/img/chrome_logo_beta.svg);
}
.chrome_version--dev .chrome-logo {
background-image: url(/static/img/chrome_logo_dev.svg);
}
.chrome_version--canary .chrome-logo {
background-image: url(/static/img/chrome_logo_canary.svg);
background-size: 42px;
}
.chrome_version--dev_plus_one .chrome-logo {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
.release {
padding: $content-padding;
background: #fff;
padding: $content-padding;
margin-bottom: $content-padding !important;
border-radius: $default-border-radius;
flex: 1 0 0;
min-width: 300px;
counter-reset: featurecount;
&.no-components {
.feature_shipping_type {
display: none;
}
.feature_shipping_type + ul {
margin-top: 0;
}
}
}
.milestone_info {
margin-bottom: $content-padding / 2;
&:nth-of-type(3) {
border-bottom: 1px solid $gray-1; //$bar-border-color;
padding-bottom: $content-padding;
}
.channel_label {
font-size: inherit;
font-weight: 500;
text-transform: none;
}
}
.no_feature_released {
color: #737373;
}
.features_list {
margin-top: $content-padding * 2;
ul, ol {
margin-top: $content-padding / 2;
list-style: none;
}
li {
padding: $content-padding / 2;
font-weight: 500;
display: flex;
justify-content: space-between;
.icon_row {
flex-shrink: 0;
}
> :first-child {
overflow: hidden;
text-overflow: ellipsis;
}
}
.features_header {
font-weight: 500;
text-transform: uppercase;
margin-bottom: $content-padding;
}
}
.feature_shipping_type {
margin-top: $content-padding;
overflow: hidden;
text-overflow: ellipsis;
}
.highlight {
background: var(--light-accent-color);
}

8
static/sass/elements/chromedash-roadmap.scss
Просмотреть файл

@ -1,8 +0,0 @@
@import "element";
@import "../_layout";
:host {
display: inline-flex;
padding: 0 0em $content-padding * 5;
margin-right: $content-padding * -1;
}

127
static/sass/shared-css.js Normal file
Просмотреть файл

@ -0,0 +1,127 @@
import { css } from "lit";
import {VARS} from "./_vars-css.js";
export const SHARED_STYLES = [
VARS,
css`
* {
box-sizing: border-box;
list-style: none;
font: inherit;
text-decoration: inherit;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.conditional-comma:last-child {
display: none;
}
h1,
h2,
h3,
h4 {
font-weight: 300;
}
h1 {
font-size: 30px;
}
h2,
h3,
h4 {
background: var(--heading-background);
color: var(--heading-color);
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
a {
text-decoration: none;
color: var(--link-color);
}
a:hover {
text-decoration: underline;
color: var(--link-hover-color);
cursor: pointer;
}
input:not([type="submit"]),
textarea {
border: 1px solid var(--bar-border-color);
}
input:not([type="submit"])[disabled],
textarea[disabled],
button[disabled] {
opacity: 0.5;
}
button,
input[type="submit"],
.button {
display: inline-block;
padding: 4px 16px;
background: var(--button-background);
border: var(--button-border);
border-radius: var(--button-border-radius);
color: var(--button-color);
white-space: nowrap;
user-select: none;
cursor: pointer;
font-size: var(--button-font-size);
}
button.primary,
input[type="submit"],
.button.primary {
background: var(--primary-button-background);
color: var(--primary-button-color);
font-weight: bold;
}
.button.secondary {
margin: var(--content-padding);
border: var(--default-border);
border-color: var(--primary-border-background);
border-radius: var(--border-radius);
}
button:not(:disabled):hover {
border-color: var(--gray-4);
}
.comma::after {
content: ",";
margin-right: 0.2em;
}
.no-web-share {
display: none;
}
iron-icon {
height: var(--icon-size);
width: var(--icon-size);
}
.preformatted {
white-space: pre-wrap;
}
#updated {
padding-top: var(--content-padding);
}
#updated span {
color: var(--unimportant-text-color);
border-top: var(--default-border);
padding: var(--content-padding-quarter) var(--content-padding) 0 0;
}
`];