open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixup 'style-name-text', checkboxes and attempt to clean up CSS

Browse Source
This commit is contained in:
narcolepticinsomniac 2017-09-06 18:19:50 -04:00 committed by GitHub
parent 3cdbaf6175
commit 5a31855db6
2 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
popup/popup.css
View File

@ -32,15 +32,15 @@ body {
input[type="checkbox"]:checked:hover + .svg-icon.checked, input[type="checkbox"]:checked:hover + .svg-icon.checked,
.style-name:hover input[type="checkbox"]:checked + .svg-icon.checked { .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
fill: #666; fill: hsl(0, 0%, 100%);
} }
input[type="checkbox"]:checked + .svg-icon.checked { input[type="checkbox"]:checked + .svg-icon.checked {
display: inline-flex; display: inline-flex;
transition: fill .25s;
} }
input[type="checkbox"], input[type="checkbox"] {
.entry.disabled:not(.not-applied) .style-name:hover input[type="checkbox"] {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
border: 1px solid hsl(0, 0%, 20%); border: 1px solid hsl(0, 0%, 20%);
@ -51,34 +51,25 @@ input[type="checkbox"],
background-color: hsl(0, 0%, 94%); background-color: hsl(0, 0%, 94%);
outline: none; outline: none;
margin: 0; margin: 0;
transition: background-color .5s, border-color .5s; transition: background-color .25s, border-color .25s;
} }
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"] { input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 54%);
border-color: hsl(0, 0%, 50%); border-color: #000;
} }
.entry.disabled:not(.not-applied) input[type="checkbox"], input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
.entry.disabled .style-name:hover input[type="checkbox"] {
border-color: #000;
background-color: hsl(0, 0%, 74%);
}
.entry.disabled input[type="checkbox"],
.entry.not-applied input[type="checkbox"], .entry.not-applied input[type="checkbox"],
.entry.disabled:not(.not-applied) input[type="checkbox"] + .svg-icon.checked, .entry.disabled input[type="checkbox"] + .svg-icon.checked,
.entry.not-applied input[type="checkbox"] + .svg-icon.checked, .entry.not-applied input[type="checkbox"] + .svg-icon.checked {
.entry.disabled:not(.not-applied) .style-name, transition: background-color .5s ease-in-out .25s, border-color .5s ease-in-out .25s, fill .5s ease-in-out .25s;
.entry.not-applied .style-name {
transition: none;
}
.entry.disabled:not(.not-applied) .style-name:hover .style-name-span {
color: #000;
}
a:hover, input[type="checkbox"]:hover + .svg-icon + label {
color: #666;
}
label {
color: #000;
transition: color .5s;
} }
#no-styles { #no-styles {
@ -165,7 +156,7 @@ body.blocked > DIV {
} }
.entry .main-controls .style-name { .entry .style-name {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
@ -173,7 +164,8 @@ body.blocked > DIV {
align-items: center; align-items: center;
} }
.entry .main-controls .style-name-span{ .entry .style-name-text {
color: #000;
cursor: default; cursor: default;
font-weight: bold; font-weight: bold;
overflow: hidden; overflow: hidden;
@ -182,6 +174,10 @@ body.blocked > DIV {
margin: 1px 0 0 4px; margin: 1px 0 0 4px;
pointer-events: none; pointer-events: none;
} }
.entry .style-name:hover .style-name-text {
color: #000;
}
.entry.disabled:not(.not-applied) .style-name, .entry.disabled:not(.not-applied) .style-name,
.entry.disabled:not(.not-applied) .actions, .entry.disabled:not(.not-applied) .actions,
@ -208,15 +204,20 @@ body.blocked > DIV {
opacity: 1; opacity: 1;
} }
.not-applied .style-name, .not-applied .style-name-span { .entry.not-applied .style-name .style-name-text,
.entry.disabled.not-applied .style-name .style-name-text,
.entry.not-applied .style-name:hover .style-name-text,
.entry.disabled.not-applied .style-name:hover .style-name-text {
color: hsl(0, 100%, 30%); color: hsl(0, 100%, 30%);
} }
.entry.not-applied .svg-icon, .not-applied input[type="checkbox"]:checked + .svg-icon.checked, .entry.not-applied .svg-icon,
.not-applied input[type="checkbox"]:checked + .svg-icon.checked,
.entry.not-applied .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked { .entry.not-applied .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
fill: hsl(0, 100%, 30%); fill: hsl(0, 100%, 30%);
} }
.entry.not-applied .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked,
.entry.not-applied a:hover .svg-icon.remove { .entry.not-applied a:hover .svg-icon.remove {
fill: hsl(0, 100%, 50%); fill: hsl(0, 100%, 50%);
} }
@ -225,11 +226,18 @@ body.blocked > DIV {
fill: hsl(170, 70%, 38%); fill: hsl(170, 70%, 38%);
} }
.entry.not-applied input[type="checkbox"], .entry.not-applied .style-name:hover input[type="checkbox"] { .entry.not-applied input[type="checkbox"],
.entry.not-applied .style-name:hover input[type="checkbox"] {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 100%, 30%); border-color: hsl(0, 100%, 30%);
} }
.entry.not-applied .style-name:hover input[type="checkbox"],
.entry.disabled.not-applied .style-name:hover input[type="checkbox"] {
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 100%, 50%);
}
.regexp-problem-indicator { .regexp-problem-indicator {
background-color: #d00; background-color: #d00;
width: 14px; width: 14px;
@ -248,7 +256,7 @@ body.blocked > DIV {
.regexp-partial .actions, .regexp-partial .actions,
.regexp-invalid .actions { .regexp-invalid .actions {
order: 2; order: 2;
} }
#regexp-explanation { #regexp-explanation {

5
popup/popup.js
View File

@ -249,10 +249,7 @@ function createStyleElement({
onclick: handleEvent.name, onclick: handleEvent.name,
}); });
styleName.checkbox = checkbox; styleName.checkbox = checkbox;
var styleNameSpan = document.createElement("span"); $('.style-name-text', entry).textContent = style.name;
styleName.appendChild(styleNameSpan);
styleNameSpan.setAttribute("class","style-name-span");
styleNameSpan.appendChild(document.createTextNode(style.name));
$('.enable', entry).onclick = handleEvent.toggle; $('.enable', entry).onclick = handleEvent.toggle;
$('.disable', entry).onclick = handleEvent.toggle; $('.disable', entry).onclick = handleEvent.toggle;