Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Incorporate styling changes to match Penpot design language

Browse source
This commit is contained in:
Akshay Gupta 2024-06-24 19:07:53 +05:30
parent fb7b11a139
commit 29e3171bd9
No known key found for this signature in database
2 changed files with 7 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -168,6 +168,6 @@
[:div {:class (stl/css :sidebar-tab-wrapper)}
[:& tokens-explorer]
[:button {:class (stl/css :download-json-button)
:on-click wtc/download-tokens-as-json} "Download Tokens as JSON"
[:span.separator]
download-icon]])
:on-click wtc/download-tokens-as-json}
download-icon
"Export JSON"]])

27
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -51,39 +51,20 @@
}
.download-json-button {
@extend .button-secondary;
position: absolute;
bottom: $s-12;
right: $s-12;
padding: $s-8 $s-16;
font-size: $fs-12;
background-color: var(--button-primary-background-color-rest);
color: var(--button-primary-foreground-color-rest);
border: none;
border-radius: $br-4;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
background-color: var(--button-primary-background-color-hover);
}
&:active {
background-color: var(--button-primary-background-color-active);
}
padding: $s-6 $s-8;
text-transform: uppercase;
gap: $s-8;
.download-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
width: 20px;
height: 20px;
margin-left: $s-8;
}
.separator {
height: 16px;
width: 1px;
background-color: var(--button-primary-foreground-color-rest);
margin-left: $s-8;
}
}