mirror of
https://github.com/rust-lang/rust.git
synced 2024-11-22 14:55:26 +00:00
Make "copy code" button the same size as the "copy path" button
This commit is contained in:
parent
ddaa90fc56
commit
578810b4d2
@ -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);
|
||||
|
@ -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"],
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
|
@ -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",
|
||||
})
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user