cybrespace/pinafore
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Simplify selectors, prefer class selectors for SVGs

Browse source
This commit is contained in:
Nolan Lawson 2018-03-16 08:42:10 -07:00
parent bd0a0bf0be
commit 9de2949cb7
14 changed files with 53 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
routes/_components/DynamicPageBanner.html
View file

@ -1,6 +1,6 @@
<div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}"> <div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
{{#if icon}} {{#if icon}}
<svg> <svg class="dynamic-page-banner-svg">
<use xlink:href="{{icon}}" /> <use xlink:href="{{icon}}" />
</svg> </svg>
{{/if}} {{/if}}
@ -20,18 +20,18 @@
.dynamic-page-banner.dynamic-page-with-icon { .dynamic-page-banner.dynamic-page-with-icon {
grid-template-columns: min-content 1fr min-content; grid-template-columns: min-content 1fr min-content;
} }
.dynamic-page-banner svg { .dynamic-page-banner-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--body-text-color); fill: var(--body-text-color);
} }
h1.dynamic-page-title { .dynamic-page-title {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
button.dynamic-page-go-back { .dynamic-page-go-back {
font-size: 1.3em; font-size: 1.3em;
color: var(--anchor-text); color: var(--anchor-text);
border: 0; border: 0;
@ -39,10 +39,10 @@
background: none; background: none;
justify-self: flex-end; justify-self: flex-end;
} }
button.dynamic-page-go-back:hover { .dynamic-page-go-back:hover {
text-decoration: underline; text-decoration: underline;
} }
button.dynamic-page-go-back::before { .dynamic-page-go-back::before {
content: '<'; content: '<';
margin-right: 5px; margin-right: 5px;
} }
@ -50,10 +50,10 @@
.dynamic-page-banner { .dynamic-page-banner {
margin: 20px 10px 20px; margin: 20px 10px 20px;
} }
h1.dynamic-page-title { .dynamic-page-title {
font-size: 1.3em; font-size: 1.3em;
} }
button.dynamic-page-go-back { .dynamic-page-go-back {
font-size: 1.3em; font-size: 1.3em;
} }
} }

6
routes/_components/ExternalLink.html
View file

@ -3,7 +3,7 @@
href="{{href}}" href="{{href}}"
class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}"> class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
<slot></slot>{{#if showIcon}} <slot></slot>{{#if showIcon}}
<svg> <svg class="external-link-svg">
<use xlink:href="#fa-external-link" /> <use xlink:href="#fa-external-link" />
</svg> </svg>
{{/if}}</a> {{/if}}</a>
@ -12,13 +12,13 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.external-link-with-icon svg { .external-link-with-icon .external-link-svg {
margin-left: 4px; margin-left: 4px;
width: 14px; width: 14px;
height: 14px; height: 14px;
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
} }
.external-link-with-icon.normal-icon-color svg { .external-link-with-icon.normal-icon-color .external-link-svg {
fill: var(--body-text-color); fill: var(--body-text-color);
} }
</style> </style>

20
routes/_components/IconButton.html
View file

@ -5,7 +5,7 @@
class="{{computedClass}}" class="{{computedClass}}"
:disabled :disabled
delegate-key="{{delegateKey}}" > delegate-key="{{delegateKey}}" >
<svg> <svg class="icon-button-svg">
<use xlink:href="{{href}}" /> <use xlink:href="{{href}}" />
</svg> </svg>
</button> </button>
@ -16,46 +16,46 @@
class="{{computedClass}}" class="{{computedClass}}"
:disabled :disabled
on:click > on:click >
<svg> <svg class="icon-button-svg">
<use xlink:href="{{href}}" /> <use xlink:href="{{href}}" />
</svg> </svg>
</button> </button>
{{/if}} {{/if}}
<style> <style>
button.icon-button { .icon-button {
padding: 6px 10px; padding: 6px 10px;
background: none; background: none;
border: none; border: none;
} }
button.icon-button svg { .icon-button-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--action-button-fill-color); fill: var(--action-button-fill-color);
} }
button.icon-button.big-icon svg { .icon-button.big-icon .icon-button-svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
button.icon-button:hover svg { .icon-button:hover .icon-button-svg {
fill: var(--action-button-fill-color-hover); fill: var(--action-button-fill-color-hover);
} }
button.icon-button.not-pressable:active svg { .icon-button.not-pressable:active .icon-button-svg {
fill: var(--action-button-fill-color-active); fill: var(--action-button-fill-color-active);
} }
button.icon-button.pressed svg { .icon-button.pressed .icon-button-svg {
fill: var(--action-button-fill-color-pressed) fill: var(--action-button-fill-color-pressed)
} }
button.icon-button.pressed:hover svg { .icon-button.pressed:hover .icon-button-svg {
fill: var(--action-button-fill-color-pressed-hover); fill: var(--action-button-fill-color-pressed-hover);
} }
button.icon-button.pressed:active svg { .icon-button.pressed:active .icon-button-svg {
fill: var(--action-button-fill-color-pressed-active); fill: var(--action-button-fill-color-pressed-active);
} }
</style> </style>

10
routes/_components/NavItem.html
View file

@ -4,7 +4,7 @@
:href > :href >
{{#if name === 'notifications'}} {{#if name === 'notifications'}}
<div class="nav-link-svg-wrapper"> <div class="nav-link-svg-wrapper">
<svg> <svg class="nav-link-svg">
<use xlink:href="{{svg}}" /> <use xlink:href="{{svg}}" />
</svg> </svg>
{{#if $hasNotifications}} {{#if $hasNotifications}}
@ -14,7 +14,7 @@
{{/if}} {{/if}}
</div> </div>
{{else}} {{else}}
<svg> <svg class="nav-link-svg">
<use xlink:href="{{svg}}" /> <use xlink:href="{{svg}}" />
</svg> </svg>
{{/if}} {{/if}}
@ -75,11 +75,11 @@
.main-nav-link:hover .nav-link-label { .main-nav-link:hover .nav-link-label {
color: var(--nav-text-color-hover); color: var(--nav-text-color-hover);
} }
.main-nav-link:hover svg { .main-nav-link:hover .nav-link-svg {
fill: var(--nav-svg-fill-hover); fill: var(--nav-svg-fill-hover);
} }
.main-nav-link svg { .main-nav-link .nav-link-svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
@ -99,7 +99,7 @@
.main-nav-link .nav-link-label { .main-nav-link .nav-link-label {
display: none; display: none;
} }
.main-nav-link svg { .main-nav-link .nav-link-svg {
width: 25px; width: 25px;
height: 25px; height: 25px;
} }

4
routes/_components/NotLoggedInHome.html
View file

@ -2,7 +2,7 @@
<FreeTextLayout> <FreeTextLayout>
<div class="not-logged-in-home"> <div class="not-logged-in-home">
<div class="banner"> <div class="banner">
<svg aria-hidden="true" class="logo"> <svg aria-hidden="true" class="not-logged-in-home-svg">
<use xlink:href="#pinafore-logo" /> <use xlink:href="#pinafore-logo" />
</svg> </svg>
<h1>Pinafore</h1> <h1>Pinafore</h1>
@ -24,7 +24,7 @@
align-items: center; align-items: center;
margin: 0 0 30px; margin: 0 0 30px;
} }
.not-logged-in-home svg { .not-logged-in-home-svg {
width: 70px; width: 70px;
height: 70px; height: 70px;
fill: royalblue; fill: royalblue;

4
routes/_components/PlayVideoIcon.html
View file

@ -1,5 +1,5 @@
<div class="play-video-icon {{className || ''}}"> <div class="play-video-icon {{className || ''}}">
<svg> <svg class="play-video-icon-svg">
<use xlink:href="#fa-play-circle" /> <use xlink:href="#fa-play-circle" />
</svg> </svg>
</div> </div>
@ -16,7 +16,7 @@
z-index: 40; z-index: 40;
pointer-events: none; pointer-events: none;
} }
.play-video-icon svg { .play-video-icon-svg {
width: 72px; width: 72px;
height: 72px; height: 72px;
fill: var(--mask-svg-fill); fill: var(--mask-svg-fill);

6
routes/_components/community/PageListItem.html
View file

@ -1,6 +1,6 @@
<li class="page-list-item"> <li class="page-list-item">
<a :href> <a :href>
<svg> <svg class="page-list-item-svg">
<use xlink:href="{{icon}}" /> <use xlink:href="{{icon}}" />
</svg> </svg>
<span aria-label="{{label}} {{$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}}"> <span aria-label="{{label}} {{$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}}">
@ -40,7 +40,7 @@
.page-list-item a:active { .page-list-item a:active {
background: var(--settings-list-item-bg-active); background: var(--settings-list-item-bg-active);
} }
.page-list-item svg { .page-list-item-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
display: inline-block; display: inline-block;
@ -57,7 +57,7 @@
.page-list-item a { .page-list-item a {
padding: 20px 10px; padding: 20px 10px;
} }
.page-list-item svg { .page-list-item-svg {
margin-right: 10px; margin-right: 10px;
} }
} }

4
routes/_components/compose/ComposeButton.html
View file

@ -6,7 +6,7 @@
</span> </span>
<div class="compose-box-button-spinner {{$postingStatus ? 'spin' : 'hidden'}}" <div class="compose-box-button-spinner {{$postingStatus ? 'spin' : 'hidden'}}"
aria-hidden="true"> aria-hidden="true">
<svg> <svg class="compose-box-button-spinner-svg">
<use xlink:href="#fa-spinner" /> <use xlink:href="#fa-spinner" />
</svg> </svg>
</div> </div>
@ -31,7 +31,7 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.compose-box-button-spinner svg { .compose-box-button-spinner-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--button-primary-text); fill: var(--button-primary-text);

6
routes/_components/dialog/GenericDialogList.html
View file

@ -2,13 +2,13 @@
{{#each items as item @key}} {{#each items as item @key}}
<li class="generic-dialog-list-item"> <li class="generic-dialog-list-item">
<button class="generic-dialog-list-button" on:click="fire('click', item)"> <button class="generic-dialog-list-button" on:click="fire('click', item)">
<svg> <svg class="generic-dialog-list-item-svg">
<use xlink:href="{{item.icon}}" /> <use xlink:href="{{item.icon}}" />
</svg> </svg>
<span> <span>
{{item.label}} {{item.label}}
</span> </span>
<svg class="{{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}"> <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}">
<use xlink:href="#fa-check" /> <use xlink:href="#fa-check" />
</svg> </svg>
</button> </button>
@ -29,7 +29,7 @@
font-size: 1.2em; font-size: 1.2em;
display: flex; display: flex;
} }
.generic-dialog-list-item svg { .generic-dialog-list-item-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--svg-fill); fill: var(--svg-fill);

4
routes/_components/search/Search.html
View file

@ -8,7 +8,7 @@
bind:value="$queryInSearch"> bind:value="$queryInSearch">
</div> </div>
<button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}"> <button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}">
<svg> <svg class="search-button-svg">
<use xlink:href="#fa-search" /> <use xlink:href="#fa-search" />
</svg> </svg>
</button> </button>
@ -39,7 +39,7 @@
border-radius: 10px; border-radius: 10px;
flex: 1; flex: 1;
} }
.search-button svg { .search-button-svg {
fill: var(--button-primary-text); fill: var(--button-primary-text);
width: 18px; width: 18px;
height: 18px; height: 18px;

6
routes/_components/settings/SettingsListItem.html
View file

@ -1,7 +1,7 @@
<li class="settings-list-item"> <li class="settings-list-item">
<a :href> <a :href>
{{#if icon}} {{#if icon}}
<svg> <svg class="settings-list-item-svg">
<use xlink:href="{{icon}}" /> <use xlink:href="{{icon}}" />
</svg> </svg>
{{/if}} {{/if}}
@ -39,7 +39,7 @@
.settings-list-item a:active { .settings-list-item a:active {
background: var(--settings-list-item-bg-active); background: var(--settings-list-item-bg-active);
} }
.settings-list-item svg { .settings-list-item-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
display: inline-block; display: inline-block;
@ -59,7 +59,7 @@
.settings-list-item a { .settings-list-item a {
padding: 20px 10px; padding: 20px 10px;
} }
.settings-list-item svg { .settings-list-item-svg {
margin-right: 10px; margin-right: 10px;
} }
.settings-list-item .offset-for-icon { .settings-list-item .offset-for-icon {

6
routes/_components/status/StatusDetails.html
View file

@ -5,7 +5,7 @@
<a class="status-favs-reblogs" <a class="status-favs-reblogs"
href="/statuses/{{originalStatusId}}/reblogs" href="/statuses/{{originalStatusId}}/reblogs"
aria-label="{{favoritesLabel}}"> aria-label="{{favoritesLabel}}">
<svg> <svg class="status-favs-reblogs-svg">
<use xlink:href="#fa-retweet"/> <use xlink:href="#fa-retweet"/>
</svg> </svg>
<span>{{numReblogs}}</span> <span>{{numReblogs}}</span>
@ -13,7 +13,7 @@
<a class="status-favs-reblogs" <a class="status-favs-reblogs"
href="/statuses/{{originalStatusId}}/favorites" href="/statuses/{{originalStatusId}}/favorites"
aria-label="{{reblogsLabel}}"> aria-label="{{reblogsLabel}}">
<svg> <svg class="status-favs-reblogs-svg">
<use xlink:href="#fa-star" /> <use xlink:href="#fa-star" />
</svg> </svg>
<span>{{numFavs}}</span> <span>{{numFavs}}</span>
@ -57,7 +57,7 @@
color: var(--deemphasized-text-color); color: var(--deemphasized-text-color);
} }
.status-favs-reblogs svg { .status-favs-reblogs-svg {
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
width: 18px; width: 18px;
height: 18px; height: 18px;

6
routes/_components/status/StatusHeader.html
View file

@ -1,5 +1,5 @@
<div class="status-header {{isStatusInNotification ? 'status-in-notification' : ''}}"> <div class="status-header {{isStatusInNotification ? 'status-in-notification' : ''}}">
<svg> <svg class="status-header-svg">
<use xlink:href="{{icon}}"/> <use xlink:href="{{icon}}"/>
</svg> </svg>
<span> <span>
@ -55,13 +55,13 @@
align-items: center; align-items: center;
} }
.status-header svg { .status-header-svg {
width: 18px; width: 18px;
height: 18px; height: 18px;
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
} }
.status-header.status-in-notification svg { .status-header.status-in-notification .status-header-svg {
fill: var(--body-text-color); fill: var(--body-text-color);
} }
</style> </style>

8
routes/_components/status/StatusMediaAttachments.html
View file

@ -7,7 +7,7 @@
aria-label="Hide sensitive media" aria-label="Hide sensitive media"
delegate-key="{{delegateKey}}" > delegate-key="{{delegateKey}}" >
<div class="svg-wrapper"> <div class="svg-wrapper">
<svg> <svg class="status-sensitive-media-svg">
<use xlink:href="#fa-eye-slash" /> <use xlink:href="#fa-eye-slash" />
</svg> </svg>
</div> </div>
@ -23,7 +23,7 @@
<span>Sensitive content. Click to show.</span> <span>Sensitive content. Click to show.</span>
</div> </div>
<div class="svg-wrapper"> <div class="svg-wrapper">
<svg> <svg class="status-sensitive-media-svg">
<use xlink:href="#fa-eye" /> <use xlink:href="#fa-eye" />
</svg> </svg>
</div> </div>
@ -109,7 +109,7 @@
.status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper { .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
background: none; background: none;
} }
.status-sensitive-media-container svg { .status-sensitive-media-svg {
width: 24px; width: 24px;
height: 24px; height: 24px;
fill: var(--mask-svg-fill); fill: var(--mask-svg-fill);
@ -118,7 +118,7 @@
margin: 1px; margin: 1px;
padding: 6px 10px; padding: 6px 10px;
} }
.status-sensitive-media-container.status-sensitive-media-hidden svg { .status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
background: var(--mask-opaque-bg); background: var(--mask-opaque-bg);
} }