0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00

💄 Fix css format (spacing)

This commit is contained in:
Pablo Alba 2024-12-09 09:35:53 +01:00
parent cf72b35e73
commit f2f3d9f7eb
2 changed files with 27 additions and 0 deletions

View file

@ -18,6 +18,7 @@
opacity: $op-10; opacity: $op-10;
visibility: visible; visibility: visible;
} }
&.fixed { &.fixed {
position: fixed; position: fixed;
} }
@ -35,6 +36,7 @@
border: $s-2 solid var(--panel-border-color); 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 {
border-top: solid $s-1 var(--color-background-quaternary); border-top: solid $s-1 var(--color-background-quaternary);
} }
@ -45,6 +47,7 @@
.context-menu-item { .context-menu-item {
display: flex; display: flex;
.context-menu-action { .context-menu-action {
@include bodySmallTypography; @include bodySmallTypography;
display: flex; display: flex;
@ -56,12 +59,15 @@
border-radius: $br-8; border-radius: $br-8;
white-space: nowrap; white-space: nowrap;
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
&.submenu { &.submenu {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.submenu-icon { .submenu-icon {
margin-left: 0.5rem; margin-left: 0.5rem;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--menu-foreground-color); stroke: var(--menu-foreground-color);
@ -76,6 +82,7 @@
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
.submenu-icon-back svg { .submenu-icon-back svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--menu-foreground-color); stroke: var(--menu-foreground-color);
@ -83,27 +90,34 @@
} }
} }
} }
&:hover .context-menu-action { &:hover .context-menu-action {
background-color: var(--menu-background-color-hover); background-color: var(--menu-background-color-hover);
text-decoration: none; text-decoration: none;
color: var(--menu-foreground-color); color: var(--menu-foreground-color);
&.submenu .submenu-icon svg { &.submenu .submenu-icon svg {
stroke: var(--menu-foreground-color); stroke: var(--menu-foreground-color);
} }
&.submenu-back .submenu-icon-back svg { &.submenu-back .submenu-icon-back svg {
stroke: var(--menu-foreground-color); stroke: var(--menu-foreground-color);
} }
} }
&:focus { &:focus {
outline: none; outline: none;
} }
&:focus-visible { &:focus-visible {
outline: none; outline: none;
.context-menu-action { .context-menu-action {
border: 1px solid var(--menu-border-color-focus); border: 1px solid var(--menu-border-color-focus);
background-color: var(--menu-background-color-focus); background-color: var(--menu-background-color-focus);
text-decoration: none; text-decoration: none;
color: var(--menu-foreground-color-focus); color: var(--menu-foreground-color-focus);
&.submenu .submenu-icon svg { &.submenu .submenu-icon svg {
stroke: var(--menu-foreground-color-focus); stroke: var(--menu-foreground-color-focus);
} }
@ -113,15 +127,18 @@
} }
} }
} }
&.selected { &.selected {
.context-menu-action { .context-menu-action {
justify-content: space-between; justify-content: space-between;
color: var(--menu-foreground-color-focus); color: var(--menu-foreground-color-focus);
} }
.selected-icon { .selected-icon {
@extend .button-tag; @extend .button-tag;
border-radius: $br-8; border-radius: $br-8;
height: 100%; height: 100%;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--menu-foreground-color-focus); stroke: var(--menu-foreground-color-focus);
@ -129,6 +146,7 @@
} }
} }
} }
.is-selected .context-menu-action { .is-selected .context-menu-action {
padding-left: $s-28; padding-left: $s-28;
background-image: url(/images/icons/tick.svg); background-image: url(/images/icons/tick.svg);
@ -138,6 +156,7 @@
font-weight: $fw700; font-weight: $fw700;
} }
} }
&.is-selectable { &.is-selectable {
.context-menu-action { .context-menu-action {
padding-left: 1.5rem; padding-left: 1.5rem;

View file

@ -78,6 +78,7 @@
// This icon still use the old svg // This icon still use the old svg
.penpot-icon { .penpot-icon {
@include flexCenter; @include flexCenter;
svg { svg {
fill: var(--icon-foreground); fill: var(--icon-foreground);
width: $s-24; width: $s-24;
@ -138,6 +139,7 @@
.action { .action {
--sidebar-action-icon-color: var(--icon-foreground); --sidebar-action-icon-color: var(--icon-foreground);
--sidebar-icon-backgroun-color: var(--color-background-secondary); --sidebar-icon-backgroun-color: var(--color-background-secondary);
&:hover { &:hover {
--sidebar-action-icon-color: var(--color-background-secondary); --sidebar-action-icon-color: var(--color-background-secondary);
--sidebar-icon-backgroun-color: var(--color-accent-primary); --sidebar-icon-backgroun-color: var(--color-accent-primary);
@ -175,6 +177,7 @@
right: $s-2; right: $s-2;
top: $s-52; top: $s-52;
max-height: $s-480; max-height: $s-480;
&:not(.teams-dropdown) { &:not(.teams-dropdown) {
min-width: $s-160; min-width: $s-160;
} }
@ -204,8 +207,10 @@
.sidebar-nav-item { .sidebar-nav-item {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--sidebar-element-background-color-hover); background-color: var(--sidebar-element-background-color-hover);
span { span {
color: var(--sidebar-element-foreground-color-hover); color: var(--sidebar-element-foreground-color-hover);
} }
@ -213,6 +218,7 @@
&.current { &.current {
background-color: var(--sidebar-element-background-color-selected); background-color: var(--sidebar-element-background-color-selected);
.element-title { .element-title {
color: var(--sidebar-element-foreground-color-selected); color: var(--sidebar-element-foreground-color-selected);
} }
@ -228,6 +234,7 @@
padding: $s-8 $s-8 $s-8 $s-24; padding: $s-8 $s-8 $s-8 $s-24;
font-weight: $fw400; font-weight: $fw400;
width: 100%; width: 100%;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
@ -293,6 +300,7 @@
outline: none; outline: none;
border: $s-1 solid var(--search-bar-input-border-color-focus); border: $s-1 solid var(--search-bar-input-border-color-focus);
} }
::placeholder { ::placeholder {
color: var(--search-bar-placeholder-foreground-color); color: var(--search-bar-placeholder-foreground-color);
} }