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

♻️ Add border to UI elements

Browse source
This commit is contained in:
Eva 2024-02-02 09:14:38 +01:00 • committed by Andrey Antukh
parent 4c683bb10c
commit 1df4118523
18 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -583,6 +583,7 @@
padding: $s-32; padding: $s-32;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--modal-background-color); background-color: var(--modal-background-color);
border: $s-2 solid var(--modal-border-color);
min-width: $s-364; min-width: $s-364;
min-height: $s-192; min-height: $s-192;
max-width: $s-512; max-width: $s-512;
@ -843,6 +844,7 @@
z-index: $z-index-10; z-index: $z-index-10;
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
border: $s-2 solid var(--panel-border-color);
} }
.menu-item-base { .menu-item-base {
@ -904,6 +906,7 @@
overflow-x: hidden; overflow-x: hidden;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
border: $s-2 solid var(--panel-border-color);
} }
.select-wrapper { .select-wrapper {

2
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -13,6 +13,8 @@
--scrollbar-background-color: var(--color-foreground-secondary); --scrollbar-background-color: var(--color-foreground-secondary);
--panel-background-color: var(--color-background-primary); --panel-background-color: var(--color-background-primary);
--panel-border-color: var(--color-background-quaternary);
--app-background: var(--color-background-primary); --app-background: var(--color-background-primary);
--loader-background: var(--color-background-primary); --loader-background: var(--color-background-primary);
--panel-title-background-color: var(--color-background-secondary); --panel-title-background-color: var(--color-background-secondary);

1
frontend/src/app/main/ui/components/context_menu_a11y.scss
View file

@ -32,6 +32,7 @@
margin: $s-0; margin: $s-0;
padding: $s-4; padding: $s-4;
border-radius: $br-8; border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
overflow: auto; overflow: auto;
& .separator { & .separator {

1
frontend/src/app/main/ui/dashboard/change_owner.scss
View file

@ -12,7 +12,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/dashboard/import.scss vendored
View file

@ -12,7 +12,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

2
frontend/src/app/main/ui/dashboard/team.scss
View file

@ -588,7 +588,6 @@
width: $s-400; width: $s-400;
padding: $s-32; padding: $s-32;
background-color: var(--modal-background-color); background-color: var(--modal-background-color);
border: $s-1 solid var(--modal-border-color);
&.hero { &.hero {
top: $s-216; top: $s-216;
right: $s-32; right: $s-32;
@ -676,7 +675,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/dashboard/team_form.scss
View file

@ -12,7 +12,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/onboarding.scss
View file

@ -17,7 +17,6 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
min-width: $s-712; min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
} }
.modal-left { .modal-left {

1
frontend/src/app/main/ui/onboarding/newsletter.scss
View file

@ -14,7 +14,6 @@
@extend .modal-container-base; @extend .modal-container-base;
position: relative; position: relative;
min-width: $s-712; min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/onboarding/questions.scss
View file

@ -14,7 +14,6 @@
@extend .modal-container-base; @extend .modal-container-base;
min-width: $s-512; min-width: $s-512;
position: relative; position: relative;
border: $s-1 solid var(--modal-border-color);
} }
// STEP CONTAINER // STEP CONTAINER

1
frontend/src/app/main/ui/onboarding/team_choice.scss
View file

@ -16,7 +16,6 @@
display: flex; display: flex;
position: relative; position: relative;
min-width: $s-712; min-width: $s-712;
border: $s-1 solid var(--modal-border-color);
} }
.modal-left { .modal-left {

1
frontend/src/app/main/ui/settings/access_tokens.scss
View file

@ -175,7 +175,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
min-width: $s-408; min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/settings/change_email.scss
View file

@ -13,7 +13,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
min-width: $s-408; min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/settings/delete_account.scss
View file

@ -13,7 +13,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
min-width: $s-408; min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -17,6 +17,7 @@
width: $s-240; width: $s-240;
padding: $s-4; padding: $s-4;
border-radius: $br-8; border-radius: $br-8;
border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
z-index: $z-index-3; z-index: $z-index-3;
} }

1
frontend/src/app/main/ui/workspace/nudge.scss
View file

@ -13,7 +13,6 @@
.modal-container { .modal-container {
@extend .modal-container-base; @extend .modal-container-base;
min-width: $s-408; min-width: $s-408;
border: $s-1 solid var(--modal-border-color);
} }
.modal-header { .modal-header {

1
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -31,6 +31,7 @@
padding: $s-0 $s-0 $s-8 $s-8; padding: $s-0 $s-0 $s-8 $s-8;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--palette-background-color); background-color: var(--palette-background-color);
border: $s-2 solid var(--panel-border-color);
transition: transition:
right 0.3s, right 0.3s,
opacity 0.2s, opacity 0.2s,

1
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -17,6 +17,7 @@
height: $s-56; height: $s-56;
padding: $s-8 $s-16; padding: $s-8 $s-16;
border-radius: $s-8; border-radius: $s-8;
border: $s-2 solid var(--panel-border-color);
z-index: $z-index-10; z-index: $z-index-10;
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
transition: transition: