Make "copy code" button the same size as the "copy path" button

This commit is contained in:
Guillaume Gomez 2024-06-03 09:55:11 +02:00
parent ddaa90fc56
commit 578810b4d2
3 changed files with 19 additions and 25 deletions

View File

@ -25,14 +25,8 @@ xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
</svg>');
--clipboard-image-big: url('data:image/svg+xml,<svg width="22" height="23" viewBox="0 0 24 25" \
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
</svg>');
--copy-path-height: 34px;
--copy-path-width: 33px;
/* Checkmark <https://www.svgrepo.com/svg/335033/checkmark> */
--checkmark-image: url('data:image/svg+xml,<svg viewBox="-1 -1 23 23" \
xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
@ -1453,9 +1447,9 @@ documentation. */
z-index: 1;
}
a.test-arrow {
padding: 5px 10px 5px 10px;
padding: 5px 7px;
border-radius: 5px;
font-size: 1.375rem;
font-size: 1rem;
color: var(--test-arrow-color);
background-color: var(--test-arrow-background-color);
}
@ -1467,7 +1461,7 @@ a.test-arrow:hover {
display: flex;
}
.example-wrap:hover > .test-arrow {
padding: 3px 10px;
padding: 2px 7px;
}
.example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder {
visibility: visible;
@ -1475,28 +1469,24 @@ a.test-arrow:hover {
.example-wrap .button-holder .copy-button {
color: var(--copy-path-button-color);
background: var(--main-background-color);
height: 43px;
width: 40px;
height: var(--copy-path-height);
width: var(--copy-path-width);
margin-left: 5px;
padding: 2px 0 0 4px;
border: 0;
cursor: pointer;
border-radius: 5px;
}
.example-wrap .button-holder .copy-button.clicked {
padding-top: 4px;
}
.example-wrap .button-holder .copy-button::before {
filter: var(--copy-path-img-filter);
content: var(--clipboard-image-big);
width: 23px;
height: 22px;
content: var(--clipboard-image);
}
.example-wrap .button-holder .copy-button:hover::before {
filter: var(--copy-path-img-hover-filter);
}
.example-wrap .button-holder .copy-button.clicked::before {
content: var(--checkmark-image);
padding-right: 5px;
}
.code-attribute {
@ -1745,8 +1735,8 @@ a.tooltip:hover::after {
#copy-path {
color: var(--copy-path-button-color);
background: var(--main-background-color);
height: 34px;
width: 33px;
height: var(--copy-path-height);
width: var(--copy-path-width);
margin-left: 10px;
padding: 0;
padding-left: 2px;
@ -1756,8 +1746,6 @@ a.tooltip:hover::after {
#copy-path::before {
filter: var(--copy-path-img-filter);
content: var(--clipboard-image);
width: 19px;
height: 18px;
}
#copy-path:hover::before {
filter: var(--copy-path-img-hover-filter);

View File

@ -14,6 +14,12 @@ define-function: (
assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
move-cursor-to: ".search-input"
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
// Checking that the copy button has the same size as the "copy path" button.
compare-elements-size: (
"#copy-path",
".example-wrap:nth-of-type(1) .copy-button",
["height", "width"],
)
},
)

View File

@ -17,7 +17,7 @@ define-function: (
"visibility": "visible",
"color": |color|,
"background-color": |background|,
"font-size": "22px",
"font-size": "16px",
"border-radius": "5px",
})
move-cursor-to: ".test-arrow"
@ -25,7 +25,7 @@ define-function: (
"visibility": "visible",
"color": |hover_color|,
"background-color": |hover_background|,
"font-size": "22px",
"font-size": "16px",
"border-radius": "5px",
})
},