Edit/delete as buttons with icons
The icons I used are from right here on Github. They're SVG, so there should't be reliability issues. Wanted to see how they'd look, and I really kinda like it. Thoughts?
This commit is contained in:
parent
885bab9a03
commit
b555c395eb
26
popup.css
26
popup.css
|
@ -24,7 +24,6 @@ input[type=checkbox] {
|
|||
.style-name {
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
a, a:visited {
|
||||
|
@ -37,6 +36,7 @@ a, a:visited {
|
|||
vertical-align: top;
|
||||
}
|
||||
.left-gutter input {
|
||||
margin-bottom: 1px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
@ -66,7 +66,29 @@ body.blocked > DIV {
|
|||
text-decoration: line-through;
|
||||
}
|
||||
#installed .actions a {
|
||||
margin-right: 0.2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
#installed .style-edit-link, #installed .delete {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
-webkit-appearance: button;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.svg-icon path,
|
||||
.svg-icon polygon,
|
||||
.svg-icon rect {
|
||||
fill: hsl(0, 0%, 20%);
|
||||
}
|
||||
.svg-icon circle {
|
||||
stroke: hsl(0, 0%, 20%);
|
||||
stroke-width: 1;
|
||||
}
|
||||
body > .actions {
|
||||
margin-top: 0.5em;
|
||||
|
|
12
popup.html
12
popup.html
|
@ -14,8 +14,16 @@
|
|||
<div class="actions">
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
|
||||
<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=">
|
||||
<svg class="svg-icon" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="delete">
|
||||
<svg class="svg-icon" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user