Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

report(redesign): pwa icons #8532

Merged
merged 3 commits into from
Apr 23, 2019
Merged

report(redesign): pwa icons #8532

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
50e2f5b
report(redesign): pwa icons
connorjclark Apr 23, 2019
03cd39b
pr changes
connorjclark Apr 23, 2019
2a907b1
revery greys
connorjclark Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions lighthouse-core/report/html/report-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@
--plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
--plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
--plugin-icon-size: 65%;
--pwa-icon-margin: 0 6px 0 -2px;
--pwa-icon-size: var(--topbar-icon-size);
--score-container-padding: 12px;
--score-container-width: 160px;
--score-number-font-size-big: 42px;
Expand Down Expand Up @@ -136,13 +138,13 @@
--average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="%23E67700" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
--fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="%23C7221F" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');

--pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle fill="%23DAE0E3" cx="12" cy="12" r="12"/><path d="M12.3 4l6.3 2.8V11c0 3.88-2.69 7.52-6.3 8.4C8.69 18.52 6 14.89 6 11V6.8L12.3 4zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.6 12.52c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z" fill="%23FFF"/></g></svg>');
--pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="nonzero"><circle fill="%23DAE0E3" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
--pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23DAE0E3" width="24" height="24" rx="12"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/><path d="M5 5h14v14H5z"/></g></svg>');
--pwa-fast-reliable-gray-url: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><circle fill-opacity=".15" fill="%23000" fill-rule="nonzero" cx="12" cy="12" r="10"/><path d="M12 6l5 2.222v3.334c0 3.083-2.133 5.966-5 6.666-2.867-.7-5-3.583-5-6.666V8.222L12 6zm-.446 10.222s.871-1.533 2.622-4.595l.031-.067c.04-.08.01-.227-.209-.227h-1.555l.444-3.11h-.444c-1.147 2.017-2.01 3.528-2.582 4.542-.01.017.053-.098-.032.053-.084.151-.088.293.17.293h1.555l-.445 3.111h.445z" fill="%23FFF" fill-rule="nonzero"/></g></svg>');
--pwa-installable-gray-url: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><circle fill-opacity=".15" fill="%23000" fill-rule="nonzero" cx="12" cy="12" r="10"/><path d="M12 6c-3.312 0-6 2.688-6 6s2.688 6 6 6 6-2.688 6-6-2.688-6-6-6zm3 6.6h-2.4V15h-1.2v-2.4H9v-1.2h2.4V9h1.2v2.4H15v1.2z" fill="%23FFF" fill-rule="nonzero"/></g></svg>');
patrickhulce marked this conversation as resolved.
Show resolved Hide resolved
--pwa-optimized-gray-url: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><rect fill-opacity=".15" fill="%23000" fill-rule="nonzero" x="2" y="2" width="20" height="20" rx="10"/><path fill="%23FFF" d="M12 15.074l3.605 2.176-.957-4.1 3.185-2.76-4.194-.356L12 6.167l-1.64 3.867-4.193.356 3.185 2.76-.957 4.1z"/><path d="M5 5h14v14H5z"/></g></svg>');

--pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%23CCE3F6" cx="12" cy="12" r="12"/><path d="M12 4.3l6.3 2.8v4.2c0 3.88-2.69 7.52-6.3 8.4-3.61-.88-6.3-4.51-6.3-8.4V7.1L12 4.3zm-.56 12.88l3.3-5.79.04-.08c.05-.1.01-.29-.26-.29h-1.96l.56-3.92h-.56L9.3 12.82c0 .03.07-.12-.03.07-.11.2-.12.37.2.37h1.97l-.56 3.92h.56z" fill="%23304FFE"/></g></svg>');
--pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%23D4ECD5" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23009688"/></g></svg>');
--pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%23FCE4EC" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23EC3F7A" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
--pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><g transform="translate(2 2)" fill-rule="nonzero"><circle fill="%230CCE6B" cx="10" cy="10" r="10"/><path d="M10 4l5 2.222v3.334c0 3.083-2.133 5.966-5 6.666-2.867-.7-5-3.583-5-6.666V6.222L10 4zm-.446 10.222s.871-1.533 2.622-4.595l.031-.067c.04-.08.01-.227-.209-.227h-1.555l.444-3.11h-.444C9.296 8.24 8.433 9.75 7.86 10.764c-.01.017.053-.098-.032.053-.084.151-.088.293.17.293h1.555l-.445 3.111h.445z" fill="%23FFF"/></g></g></svg>');
--pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><g fill-rule="nonzero"><circle fill="%230CCE6B" cx="10" cy="10" r="10"/><path d="M10 4c-3.312 0-6 2.688-6 6s2.688 6 6 6 6-2.688 6-6-2.688-6-6-6zm3 6.6h-2.4V13H9.4v-2.4H7V9.4h2.4V7h1.2v2.4H13v1.2z" fill="%23FFF"/></g></g></svg>');
--pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%230CCE6B" x="2" y="2" width="20" height="20" rx="10"/><path fill="%23FFF" d="M12 15.074l3.605 2.176-.957-4.1 3.185-2.76-4.194-.356L12 6.167l-1.64 3.867-4.193.356 3.185 2.76-.957 4.1z"/><path d="M0 0h24v24H0z"/></g></svg>');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems like most of this is fill changes and stuff we don't need (fill-rule -- no need -- and relative positioning changes -- can just do with the sizing on ::before -- and excess precision), maybe just keep the fill changes?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

}

@media only screen and (max-width: 480px) {
Expand All @@ -155,6 +157,7 @@
--gauge-circle-size: 72px;
--header-padding: 16px 0 16px 0;
--plugin-icon-size: 75%;
--pwa-icon-margin: 0 7px 0 -3px;
--score-container-padding: 8px;
--score-container-width: 112px;
--score-number-font-size-big: 34px;
Expand Down Expand Up @@ -656,29 +659,26 @@
.lh-audit-group__header::before {
/* By default, groups don't get an icon */
content: none;
width: calc(var(--subheader-font-size) / 14 * 24);
height: calc(var(--subheader-font-size) / 14 * 24);
margin-right: calc(var(--subheader-font-size) / 2);
background: var(--medium-100-gray) none no-repeat center / 16px;
width: var(--pwa-icon-size);
height: var(--pwa-icon-size);
margin: var(--pwa-icon-margin);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
background-position: 50% 50%;
background-repeat: no-repeat;
}

.lh-audit-group--pwa-fast-reliable .lh-audit-group__header::before {
content: '';
background-image: var(--pwa-fast-reliable-gray-url);
background-size: var(--lh-group-icon-background-size);
}
.lh-audit-group--pwa-installable .lh-audit-group__header::before {
content: '';
background-image: var(--pwa-installable-gray-url);
background-size: var(--lh-group-icon-background-size);
}
.lh-audit-group--pwa-optimized .lh-audit-group__header::before {
content: '';
background-image: var(--pwa-optimized-gray-url);
background-size: var(--lh-group-icon-background-size);
}
.lh-audit-group--pwa-fast-reliable.lh-badged .lh-audit-group__header::before {
background-image: var(--pwa-fast-reliable-color-url);
Expand Down