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

use only one ::pseudo for color swatches

Browse Source
This commit is contained in:
tophf 2018-08-11 12:12:48 +03:00
parent 406a7cd4c0
commit 80ea415287
2 changed files with 5 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
vendor-overwrites/colorpicker/colorpicker.css
View File

@ -6,8 +6,7 @@
display: inline-block; display: inline-block;
} }
.colorview-swatch::before, .colorview-swatch::before {
.colorview-swatch::after {
content: ""; content: "";
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -18,21 +17,14 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
box-sizing: border-box; box-sizing: border-box;
} background: linear-gradient(var(--colorview-swatch), var(--colorview-swatch)), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
.colorview-swatch::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC");
background-repeat: repeat; background-repeat: repeat;
background-position: center; background-position: center;
}
.colorview-swatch::after {
border: 1px solid #8e8e8e; border: 1px solid #8e8e8e;
cursor: pointer; cursor: pointer;
background-color: var(--colorview-swatch);
} }
.colorview-swatch:hover::after { .colorview-swatch:hover::before {
border-color: #494949; border-color: #494949;
} }

4
vendor-overwrites/colorpicker/colorview.js
View File

@ -100,7 +100,7 @@
if (!this.popup) { if (!this.popup) {
delete CM_EVENTS.mousedown; delete CM_EVENTS.mousedown;
document.head.appendChild(document.createElement('style')).textContent = ` document.head.appendChild(document.createElement('style')).textContent = `
.colorview-swatch::after { .colorview-swatch::before {
cursor: auto; cursor: auto;
} }
`; `;
@ -691,7 +691,7 @@
if (button) return; if (button) return;
const swatch = target.closest('.' + COLORVIEW_CLASS); const swatch = target.closest('.' + COLORVIEW_CLASS);
if (!swatch) return; if (!swatch) return;
const {left, width, height} = getComputedStyle(swatch, '::after'); const {left, width, height} = getComputedStyle(swatch, '::before');
const bounds = swatch.getBoundingClientRect(); const bounds = swatch.getBoundingClientRect();
const swatchClicked = const swatchClicked =
offsetX >= parseFloat(left) - 1 && offsetX >= parseFloat(left) - 1 &&