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

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

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