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

✨ Add new text and grid advanced opt css

Browse source
This commit is contained in:
elhombretecla 2021-06-07 18:14:49 +02:00 • committed by alonso.torres
parent 6404907699
commit a2b0305162
4 changed files with 23 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -480,6 +480,7 @@
.color-data { .color-data {
align-items: center; align-items: center;
display: flex; display: flex;
margin-bottom: $small;
position: relative; position: relative;
.color-name { .color-name {

23
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -733,6 +733,16 @@
.grid-option { .grid-option {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
.advanced-options {
.row-flex {
justify-content: flex-end;
}
.custom-button {
left: 0;
position: absolute;
top: 12px;
}
}
} }
.element-set-content .custom-select.input-option { .element-set-content .custom-select.input-option {
@ -822,7 +832,7 @@
border: 1px solid $color-gray-60; border: 1px solid $color-gray-60;
background-color: $color-gray-50; background-color: $color-gray-50;
border-radius: 4px; border-radius: 4px;
padding: 8px 3px; padding: 8px;
position: relative; position: relative;
top: 2px; top: 2px;
width: 100%; width: 100%;
@ -936,6 +946,10 @@
&:hover svg { &:hover svg {
fill: $color-primary; fill: $color-primary;
} }
&.actions-inside {
position: absolute;
right: 0;
}
} }
.element-set-label { .element-set-label {
@ -1062,17 +1076,16 @@
.go-to-lib-button { .go-to-lib-button {
transition: border 0.3s, color 0.3s; transition: border 0.3s, color 0.3s;
text-align: center; text-align: center;
background: $color-gray-60; background: $color-gray-50;
padding: 0.5rem; padding: 0.5rem;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
margin-top: 1rem; margin-top: 1rem;
border: 1px solid $color-gray-60;
&:hover { &:hover {
border: 1px solid $color-primary; background: $color-primary;
color: $color-primary; color: $color-black;
} }
} }
} }

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -150,6 +150,8 @@
[:& advanced-options {:visible? (:show-advanced-options @state) [:& advanced-options {:visible? (:show-advanced-options @state)
:on-close toggle-advanced-options} :on-close toggle-advanced-options}
[:button.custom-button {:class (when (:show-advanced-options @state) "is-active")
:on-click toggle-advanced-options} i/actions]
(when (= :square type) (when (= :square type)
[:& input-row {:label (t locale "workspace.options.grid.params.size") [:& input-row {:label (t locale "workspace.options.grid.params.size")
:class "pixels" :class "pixels"

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -502,8 +502,8 @@
[:span.label (tr "workspace.assets.typography.font-id")] [:span.label (tr "workspace.assets.typography.font-id")]
[:span (:font-id typography)]] [:span (:font-id typography)]]
[:div.element-set-actions-button [:div.element-set-actions-button.actions-inside
{:on-click #(reset! open? true)} {:on-click #(reset! open? false)}
i/actions] i/actions]
[:div.row-flex [:div.row-flex