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

6
routes/_components/ExternalLink.html
View file

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

20
routes/_components/IconButton.html
View file

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

10
routes/_components/NavItem.html
View file

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

4
routes/_components/NotLoggedInHome.html
View file

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

4
routes/_components/PlayVideoIcon.html
View file

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

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

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

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

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

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

@ -2,13 +2,13 @@
{{#each items as item @key}}
<li class="generic-dialog-list-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}}" />
</svg>
<span>
{{item.label}}
</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" />
</svg>
</button>
@ -29,7 +29,7 @@
font-size: 1.2em;
display: flex;
}
.generic-dialog-list-item svg {
.generic-dialog-list-item-svg {
width: 24px;
height: 24px;
fill: var(--svg-fill);

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

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

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

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

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

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

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

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

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

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