3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-28 11:56:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix copy button cropped

Browse source
This commit is contained in:
Eva 2024-01-12 13:23:28 +01:00 • committed by Alonso Torres
parent af6e808337
commit 6ecf0f4ca4
6 changed files with 49 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/components/copy_button.cljs
View file

@ -25,7 +25,7 @@
(let [sub (timers/schedule 1000 #(reset! just-copied false))]
;; On unmount we dispose the timer
#(rx/-dispose sub)))))
[:button {:class (dm/str class " " (stl/css-case :copy-button true
[:button {:class (dm/str class " " (stl/css-case :copy-button (not (some? children))
:copy-wrapper (some? children)))
:on-click #(when-not @just-copied
(reset! just-copied true)

66
frontend/src/app/main/ui/components/copy_button.scss
View file

@ -10,7 +10,7 @@
@include buttonStyle;
@include flexCenter;
height: $s-32;
width: $s-28;
width: $s-32;
border: $s-1 solid transparent;
border-radius: $br-8;
background-color: transparent;
@ -46,32 +46,50 @@
stroke: var(--button-tertiary-foreground-color-active);
}
}
}
&.copy-wrapper {
@include copyWrapper;
height: fit-content;
text-align: left;
.icon-btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: 32px;
width: 28px;
svg {
@extend .button-icon-small;
display: none;
}
.copy-wrapper {
@include buttonStyle;
@include copyWrapperBase;
display: grid;
grid-template-columns: 1fr $s-24;
grid-template-areas: "name button";
width: 100%;
height: fit-content;
text-align: left;
.icon-btn {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: $s-32;
width: $s-32;
svg {
@extend .button-icon-small;
display: none;
}
&:hover {
.icon-btn {
svg {
display: flex;
stroke: var(--button-tertiary-foreground-color-active);
}
}
&:hover {
.icon-btn {
svg {
display: flex;
stroke: var(--button-tertiary-foreground-color-active);
}
}
}
&:hover {
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: $s-1 solid var(--color-background-tertiary);
}
&:focus,
&:focus-visible {
outline: none;
border: $s-1 solid var(--button-tertiary-border-color-focus);
background-color: transparent;
color: var(--button-tertiary-foreground-color-focus);
}
}