Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 15:26:29 -05:00
Code Issues Activity

🐛 Fix some visual errors

Browse source
This commit is contained in:
Eva 2023-01-05 16:35:12 +01:00
parent 94fc067286
commit 937713311e
9 changed files with 77 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -13,7 +13,7 @@
width: 65px;
.color-bullet {
border: 2px solid $color-gray-60;
border: 2px solid $color-gray-30;
position: relative;
width: var(--bullet-size);
height: var(--bullet-size);
@ -30,21 +30,21 @@
.color-cell.current {
.color-bullet {
border-color: $color-gray-50;
border-color: $color-gray-30;
}
}
ul.palette-menu .color-bullet {
width: 20px;
height: 20px;
border: 1px solid $color-gray-10;
border: 1px solid $color-gray-30;
margin-right: 5px;
background-size: 8px;
}
.color-cell.add-color .color-bullet {
align-items: center;
background-color: $color-gray-50;
border: 3px dashed $color-gray-10;
border: 3px dashed $color-gray-30;
cursor: pointer;
display: flex;
justify-content: center;
@ -62,17 +62,24 @@ ul.palette-menu .color-bullet {
grid-area: color;
width: 20px;
height: 20px;
border: 1px solid $color-gray-10;
border: 1px solid $color-gray-30;
background-size: 8px;
overflow: hidden;
}
.asset-section .asset-list-item .color-bullet {
border: 1px solid $color-gray-20;
border: 1px solid $color-gray-30;
height: 20px;
margin-right: $size-1;
width: 20px;
}
.asset-list .asset-list-item {
&:hover {
.color-bullet {
border: 1px solid $color-primary;
}
}
}
.color-cell.add-color:hover .color-bullet {
border-color: $color-gray-30;

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

@ -522,6 +522,7 @@
&:focus {
border-color: $color-primary !important;
color: $color-white;
outline: none;
}
&:hover {

2
frontend/resources/styles/main/partials/inspect.scss
View file

@ -148,7 +148,7 @@
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid $color-gray-60;
border: 1px solid $color-gray-30;
}
.hide-color .color-bullet {

5
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -67,6 +67,7 @@
&:focus {
color: lighten($color-gray-10, 8%);
outline: none;
}
}
@ -99,6 +100,10 @@
color: lighten($color-gray-10, 8%);
}
&:active {
border-color: $color-primary;
}
option {
background: $color-white;
color: $color-gray-60;

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

@ -199,6 +199,7 @@
&:focus {
color: lighten($color-gray-10, 8%);
border-color: $color-primary;
}
option {
@ -312,6 +313,14 @@
border: 1px solid $color-gray-20;
}
}
.opened {
border: 1px solid $color-primary;
&:hover,
&:focus {
outline: none;
border: 1px solid $color-primary;
}
}
.custom-select-dropdown {
background-color: $color-white;
@ -549,6 +558,11 @@
}
.presets {
&:focus,
&:focus-within {
outline: none;
border: 1px solid $color-primary;
}
.custom-select-dropdown {
width: 237px;
@ -968,6 +982,15 @@
input {
margin-right: 1em;
width: 74px;
&:focus {
border-color: $color-primary !important;
color: $color-white;
outline: none;
}
&:hover {
border-color: $color-gray-20;
}
}
}
}

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

@ -54,6 +54,9 @@
span {
color: $color-gray-60;
}
input {
color: $color-white !important;
}
.toggle-content {
svg {
@ -149,6 +152,9 @@
span.element-name {
color: $color-gray-60;
}
input.element-name {
color: $color-white !important;
}
svg {
fill: $color-gray-60;
@ -203,6 +209,14 @@
input.element-name {
max-width: 75%;
margin-right: 5px;
background-color: $color-gray-50;
color: $color-white;
&:focus,
&:focus-within {
outline: none;
border: 1px solid $color-primary;
}
}
span.element-name {
@ -306,12 +320,16 @@ span.element-name {
&.search {
.search-box {
border: 1px solid $color-primary;
border: 1px solid $color-gray-20;
border-radius: 4px;
height: 32px;
width: 100%;
display: flex;
align-items: center;
&:active,
&:focus-within {
border: 1px solid $color-primary;
}
input {
border: 0;
width: 100%;
@ -319,6 +337,9 @@ span.element-name {
color: $color-white;
font-size: 12px;
height: 16px;
&:focus {
outline: none;
}
}
span {
height: 16px;

4
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -390,6 +390,7 @@ button.collapse-sidebar {
justify-content: center;
align-items: center;
padding: 12px 10px;
.search-box {
display: flex;
justify-content: space-between;
@ -397,6 +398,9 @@ button.collapse-sidebar {
border: 1px solid $color-gray-30;
border-radius: 2px;
width: 100%;
&:focus-within {
border: 1px solid $color-primary;
}
.input-text {
margin: 0;
background: $color-gray-50;

6
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -145,6 +145,12 @@
background: $color-gray-50;
color: $color-gray-10;
margin-bottom: -1px;
&:focus,
&:focus-within {
outline: none;
border-radius: 3px;
border: 1px solid $color-primary;
}
}
}

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -282,7 +282,8 @@
(when (and (options :presets)
(or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected
[:div.row-flex ;; some frames and some non frames
[:div.presets.custom-select.flex-grow {:on-click #(reset! show-presets-dropdown? true)}
[:div.presets.custom-select.flex-grow {:class (when @show-presets-dropdown? "opened")
:on-click #(reset! show-presets-dropdown? true)}
[:span (tr "workspace.options.size-presets")]
[:span.dropdown-button i/arrow-down]
[:& dropdown {:show @show-presets-dropdown?