mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
♻️ Add border to UI elements
This commit is contained in:
parent
4c683bb10c
commit
1df4118523
18 changed files with 9 additions and 13 deletions
|
@ -583,6 +583,7 @@
|
|||
padding: $s-32;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-2 solid var(--modal-border-color);
|
||||
min-width: $s-364;
|
||||
min-height: $s-192;
|
||||
max-width: $s-512;
|
||||
|
@ -843,6 +844,7 @@
|
|||
z-index: $z-index-10;
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
}
|
||||
|
||||
.menu-item-base {
|
||||
|
@ -904,6 +906,7 @@
|
|||
overflow-x: hidden;
|
||||
background-color: var(--menu-background-color);
|
||||
color: var(--menu-foreground-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
|
||||
--scrollbar-background-color: var(--color-foreground-secondary);
|
||||
--panel-background-color: var(--color-background-primary);
|
||||
--panel-border-color: var(--color-background-quaternary);
|
||||
|
||||
--app-background: var(--color-background-primary);
|
||||
--loader-background: var(--color-background-primary);
|
||||
--panel-title-background-color: var(--color-background-secondary);
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
margin: $s-0;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
background-color: var(--menu-background-color);
|
||||
overflow: auto;
|
||||
& .separator {
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -588,7 +588,6 @@
|
|||
width: $s-400;
|
||||
padding: $s-32;
|
||||
background-color: var(--modal-background-color);
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
&.hero {
|
||||
top: $s-216;
|
||||
right: $s-32;
|
||||
|
@ -676,7 +675,6 @@
|
|||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: $s-712;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-left {
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
@extend .modal-container-base;
|
||||
position: relative;
|
||||
min-width: $s-712;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
@extend .modal-container-base;
|
||||
min-width: $s-512;
|
||||
position: relative;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
// STEP CONTAINER
|
||||
|
|
|
@ -16,7 +16,6 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
min-width: $s-712;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-left {
|
||||
|
|
|
@ -175,7 +175,6 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
width: $s-240;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-3;
|
||||
}
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
.modal-container {
|
||||
@extend .modal-container-base;
|
||||
min-width: $s-408;
|
||||
border: $s-1 solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
|
|
@ -31,6 +31,7 @@
|
|||
padding: $s-0 $s-0 $s-8 $s-8;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--palette-background-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
transition:
|
||||
right 0.3s,
|
||||
opacity 0.2s,
|
||||
|
|
|
@ -17,6 +17,7 @@
|
|||
height: $s-56;
|
||||
padding: $s-8 $s-16;
|
||||
border-radius: $s-8;
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
z-index: $z-index-10;
|
||||
background-color: var(--color-background-primary);
|
||||
transition:
|
||||
|
|
Loading…
Add table
Reference in a new issue