Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -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)} [:div {:class (stl/css :sidebar-tab-wrapper)}
[:& tokens-explorer] [:& tokens-explorer]
[:button {:class (stl/css :download-json-button) [:button {:class (stl/css :download-json-button)
:on-click wtc/download-tokens-as-json} "Download Tokens as JSON" :on-click wtc/download-tokens-as-json}
[:span.separator] download-icon
download-icon]]) "Export JSON"]])

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

@ -51,39 +51,20 @@
} }
.download-json-button { .download-json-button {
@extend .button-secondary;
position: absolute; position: absolute;
bottom: $s-12; bottom: $s-12;
right: $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; display: flex;
align-items: center; align-items: center;
cursor: pointer; padding: $s-6 $s-8;
text-transform: uppercase;
&:hover { gap: $s-8;
background-color: var(--button-primary-background-color-hover);
}
&:active {
background-color: var(--button-primary-background-color-active);
}
.download-icon { .download-icon {
@extend .button-icon; @extend .button-icon;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: $s-8;
}
.separator {
height: 16px;
width: 1px;
background-color: var(--button-primary-foreground-color-rest);
margin-left: $s-8;
} }
} }