mirror of
https://github.com/penpot/penpot.git
synced 2025-01-07 15:39:42 -05:00
💄 Fix css format (spacing)
This commit is contained in:
parent
cf72b35e73
commit
f2f3d9f7eb
2 changed files with 27 additions and 0 deletions
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue