Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

💄 Fix css format (spacing)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

8
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

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