mirror of
https://github.com/penpot/penpot.git
synced 2025-06-06 09:31:38 +02:00
♻️ Refactor dashboard sidebar css
This commit is contained in:
Eva Marco
Alonso Torres
parent
9ad0662409
commit
c2b8e5c946
5 changed files with 700 additions and 677 deletions
|
|
@ -848,6 +848,7 @@
|
||||||
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);
|
border: $s-2 solid var(--panel-border-color);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item-base {
|
.menu-item-base {
|
||||||
|
|
|
||||||
|
|
@ -155,6 +155,7 @@
|
||||||
--icon-foreground-hover: var(--color-foreground-primary);
|
--icon-foreground-hover: var(--color-foreground-primary);
|
||||||
--icon-foreground-accept: var(--status-color-success-500);
|
--icon-foreground-accept: var(--status-color-success-500);
|
||||||
--icon-foreground-discard: var(--status-color-error-500);
|
--icon-foreground-discard: var(--status-color-error-500);
|
||||||
|
--icon-foreground-active: var(--color-accent-primary);
|
||||||
|
|
||||||
// INPUTS, SELECTS, DROPDOWNS
|
// INPUTS, SELECTS, DROPDOWNS
|
||||||
|
|
||||||
|
|
@ -201,6 +202,7 @@
|
||||||
|
|
||||||
--menu-background-color: var(--color-background-tertiary);
|
--menu-background-color: var(--color-background-tertiary);
|
||||||
--menu-foreground-color: var(--color-foreground-primary);
|
--menu-foreground-color: var(--color-foreground-primary);
|
||||||
|
--menu-icon-foreground-color: var(--color-foreground-secondary);
|
||||||
--menu-background-color-selected: var(--color-background-tertiary);
|
--menu-background-color-selected: var(--color-background-tertiary);
|
||||||
--menu-background-color-hover: var(--color-background-quaternary);
|
--menu-background-color-hover: var(--color-background-quaternary);
|
||||||
--menu-foreground-color-hover: var(--color-foreground-primary);
|
--menu-foreground-color-hover: var(--color-foreground-primary);
|
||||||
|
|
@ -358,6 +360,11 @@
|
||||||
--search-bar-background-color: var(--color-background-primary);
|
--search-bar-background-color: var(--color-background-primary);
|
||||||
--search-bar-input-background-color: var(--color-background-tertiary);
|
--search-bar-input-background-color: var(--color-background-tertiary);
|
||||||
--search-bar-input-border-color: var(--color-background-tertiary);
|
--search-bar-input-border-color: var(--color-background-tertiary);
|
||||||
|
--search-bar-input-border-color-focus: var(--color-accent-primary);
|
||||||
|
--search-bar-placeholder-foreground-color: var(--color-foreground-secondary);
|
||||||
|
--search-bar-foreground-color: var(--color-foreground-primary);
|
||||||
|
--search-bar-icon-foreground-color: var(--color-foreground-secondary);
|
||||||
|
--search-bar-icon-foreground-color-hover: var(--color-accent-primary);
|
||||||
|
|
||||||
--pill-background-color: var(--color-background-tertiary);
|
--pill-background-color: var(--color-background-tertiary);
|
||||||
--pill-foreground-color: var(--color-foreground-primary);
|
--pill-foreground-color: var(--color-foreground-primary);
|
||||||
|
|
@ -369,6 +376,8 @@
|
||||||
--resize-area-background-color: var(--color-background-primary);
|
--resize-area-background-color: var(--color-background-primary);
|
||||||
--resize-area-border-color: var(--color-background-quaternary);
|
--resize-area-border-color: var(--color-background-quaternary);
|
||||||
|
|
||||||
|
--profile-section-background-color: var(--color-background-tertiary);
|
||||||
|
|
||||||
--flow-tag-background-color: var(--color-background-tertiary);
|
--flow-tag-background-color: var(--color-background-tertiary);
|
||||||
--flow-tag-foreground-color: var(--color-foreground-secondary);
|
--flow-tag-foreground-color: var(--color-foreground-secondary);
|
||||||
--flow-tag-background-color-hover: var(--color-background-quaternary);
|
--flow-tag-background-color-hover: var(--color-background-quaternary);
|
||||||
|
|
@ -393,6 +402,14 @@
|
||||||
// NEW TEAM BUTTON
|
// NEW TEAM BUTTON
|
||||||
// TODO: we should not put these functional tokens here, but rather in the components they belong to
|
// TODO: we should not put these functional tokens here, but rather in the components they belong to
|
||||||
--new-team-button-background-color: var(--color-background-primary);
|
--new-team-button-background-color: var(--color-background-primary);
|
||||||
|
|
||||||
|
//DASHBOARD
|
||||||
|
--sidebar-element-foreground-color: var(--color-foreground-secondary);
|
||||||
|
--sidebar-element-background-color-hover: var(--color-background-secondary);
|
||||||
|
--sidebar-element-foreground-color-hover: var(--color-accent-primary);
|
||||||
|
--sidebar-element-background-color-selected: var(--color-background-quaternary);
|
||||||
|
--sidebar-element-foreground-color-selected: var(--color-accent-primary);
|
||||||
|
--profile-foreground-color: var(--color-foreground-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
|
|
||||||
|
|
@ -12,10 +12,10 @@
|
||||||
|
|
||||||
(mf/defc link
|
(mf/defc link
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [action klass data-test keyboard-action children]}]
|
[{:keys [action class data-test keyboard-action children]}]
|
||||||
(let [keyboard-action (d/nilv keyboard-action action)]
|
(let [keyboard-action (d/nilv keyboard-action action)]
|
||||||
[:a {:on-click action
|
[:a {:on-click action
|
||||||
:class klass
|
:class class
|
||||||
:on-key-down (fn [event]
|
:on-key-down (fn [event]
|
||||||
(when ^boolean (kbd/enter? event)
|
(when ^boolean (kbd/enter? event)
|
||||||
(keyboard-action event)))
|
(keyboard-action event)))
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -7,498 +7,393 @@
|
||||||
@use "common/refactor/common-refactor.scss" as *;
|
@use "common/refactor/common-refactor.scss" as *;
|
||||||
@use "common/refactor/common-dashboard";
|
@use "common/refactor/common-dashboard";
|
||||||
|
|
||||||
|
// SIDEBAR COMPONENT
|
||||||
.dashboard-sidebar {
|
.dashboard-sidebar {
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
|
display: grid;
|
||||||
background-color: var(--panel-background-color);
|
grid-template-rows: 1fr auto;
|
||||||
border-right: $s-1 solid $db-quaternary;
|
height: 100%;
|
||||||
margin: 0 $s-16 0 0;
|
width: 100%;
|
||||||
padding: $s-16 0 0 0;
|
padding: $s-16 0 0 0;
|
||||||
|
margin: 0 $s-16 0 0;
|
||||||
|
border-right: $s-1 solid var(--panel-border-color);
|
||||||
|
background-color: var(--panel-background-color);
|
||||||
z-index: $z-index-1;
|
z-index: $z-index-1;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//SIDEBAR CONTENT COMPONENT
|
||||||
.sidebar-content {
|
.sidebar-content {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-rows: auto auto auto auto 1fr;
|
||||||
|
gap: $s-24;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
overflow-y: auto;
|
||||||
hr {
|
|
||||||
border-color: transparent;
|
|
||||||
margin: $s-12 $s-16;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// SIDEBAR TEAM SWITCH
|
||||||
.sidebar-team-switch {
|
.sidebar-team-switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
margin: $s-4 $s-16;
|
margin: $s-4 $s-16;
|
||||||
|
|
||||||
.switch-content {
|
|
||||||
background-color: $db-tertiary;
|
|
||||||
border-radius: $br-8;
|
|
||||||
height: $s-48;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
border: $s-1 solid $db-tertiary;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: #8f9da3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $df-secondary;
|
|
||||||
width: $s-12;
|
|
||||||
height: $s-12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-team {
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: $fs-14;
|
|
||||||
padding: 0 $s-12;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-name {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
height: $s-40;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-text {
|
|
||||||
color: $df-primary;
|
|
||||||
width: $s-144;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-right: $s-12;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
height: $s-24;
|
|
||||||
width: $s-24;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: $s-24;
|
|
||||||
height: $s-24;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.switch-options {
|
|
||||||
@include buttonStyle;
|
|
||||||
@include flexCenter;
|
|
||||||
max-width: $s-24;
|
|
||||||
min-width: $s-28;
|
|
||||||
height: 100%;
|
|
||||||
border-left: $s-1 solid $db-primary;
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $df-secondary;
|
|
||||||
width: $s-16;
|
|
||||||
height: $s-12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
right: $s-2;
|
|
||||||
top: $s-52;
|
|
||||||
max-height: $s-480;
|
|
||||||
&:not(.teams-dropdown) {
|
|
||||||
min-width: $s-160;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
.switch-content {
|
||||||
@include menuShadow;
|
display: grid;
|
||||||
position: absolute;
|
grid-template-columns: 1fr auto;
|
||||||
z-index: $z-index-4;
|
align-items: center;
|
||||||
background-color: $db-tertiary;
|
height: $s-48;
|
||||||
border: $s-1 solid $db-quaternary;
|
width: 100%;
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
|
border: $s-1 solid var(--menu-background-color);
|
||||||
|
background-color: var(--menu-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
.separator {
|
.current-team {
|
||||||
border-color: transparent;
|
@include buttonStyle;
|
||||||
margin-top: $s-12;
|
display: grid;
|
||||||
}
|
align-items: center;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
gap: $s-8;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 $s-12;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
.team-name {
|
||||||
border-radius: $br-8;
|
display: grid;
|
||||||
height: $s-40;
|
align-items: center;
|
||||||
margin: $s-6;
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: $s-12;
|
||||||
|
height: $s-40;
|
||||||
|
}
|
||||||
|
|
||||||
display: flex;
|
.team-text {
|
||||||
align-items: center;
|
@include textEllipsis;
|
||||||
cursor: pointer;
|
@include smallTitleTipography;
|
||||||
font-size: $fs-14;
|
width: $s-144;
|
||||||
padding: $s-6 $s-16;
|
text-align: left;
|
||||||
|
color: var(--menu-foreground-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
.warning {
|
.team-icon {
|
||||||
color: var(--element-foreground-warning);
|
@include flexCenter;
|
||||||
}
|
svg {
|
||||||
|
fill: var(--icon-foreground);
|
||||||
&:hover {
|
width: $s-24;
|
||||||
background-color: $db-quaternary;
|
height: $s-24;
|
||||||
}
|
|
||||||
svg {
|
|
||||||
height: $s-12;
|
|
||||||
width: $s-12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-color: transparent;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.options-dropdown {
|
|
||||||
li {
|
|
||||||
color: $df-primary;
|
|
||||||
&.warning {
|
|
||||||
color: var(--element-foreground-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.team-picture {
|
||||||
|
@include flexCenter;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: $s-24;
|
||||||
|
width: $s-24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-icon {
|
||||||
|
@include flexCenter;
|
||||||
|
svg {
|
||||||
|
fill: var(--icon-foreground);
|
||||||
|
width: $s-12;
|
||||||
|
height: $s-12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-options {
|
||||||
|
@include buttonStyle;
|
||||||
|
@include flexCenter;
|
||||||
|
max-width: $s-24;
|
||||||
|
min-width: $s-28;
|
||||||
|
height: 100%;
|
||||||
|
border-left: $s-1 solid var(--panel-background-color);
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: var(--icon-foreground);
|
||||||
|
width: $s-16;
|
||||||
|
height: $s-12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DROPDOWNS
|
||||||
|
|
||||||
.teams-dropdown {
|
.teams-dropdown {
|
||||||
background-color: $db-tertiary;
|
@extend .menu-dropdown;
|
||||||
border-radius: $br-8;
|
|
||||||
border: $s-1 solid $db-quaternary;
|
|
||||||
min-width: $s-248;
|
|
||||||
|
|
||||||
left: 0;
|
left: 0;
|
||||||
top: $s-52;
|
top: $s-52;
|
||||||
|
height: fit-content;
|
||||||
max-height: $s-480;
|
max-height: $s-480;
|
||||||
|
min-width: $s-248;
|
||||||
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
.team-dropdown-item {
|
||||||
border-radius: $br-8;
|
@extend .menu-item-base;
|
||||||
height: $s-40;
|
display: grid;
|
||||||
padding: 0 $s-6;
|
grid-template-columns: $s-24 1fr auto;
|
||||||
margin: $s-6;
|
gap: $s-8;
|
||||||
|
height: $s-40;
|
||||||
|
}
|
||||||
|
|
||||||
svg {
|
.team-dropdown-item.action .team-icon {
|
||||||
fill: $df-secondary;
|
height: $s-24;
|
||||||
|
width: $s-24;
|
||||||
|
padding: $s-6;
|
||||||
|
margin-right: $s-12;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--new-team-button-background-color);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: $s-12;
|
||||||
|
width: $s-12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-separator {
|
||||||
|
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-icon {
|
||||||
|
@extend .button-icon;
|
||||||
|
fill: var(--icon-foreground);
|
||||||
|
svg {
|
||||||
|
height: 12px;
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-dropdown {
|
||||||
|
@extend .menu-dropdown;
|
||||||
|
right: $s-2;
|
||||||
|
top: $s-52;
|
||||||
|
max-height: $s-480;
|
||||||
|
&:not(.teams-dropdown) {
|
||||||
|
min-width: $s-160;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-options-item {
|
||||||
|
@extend .menu-item-base;
|
||||||
|
height: $s-40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-option-separator {
|
||||||
|
height: $s-1;
|
||||||
|
margin: 0;
|
||||||
|
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sections
|
||||||
|
.sidebar-nav {
|
||||||
|
margin: 0;
|
||||||
|
user-select: none;
|
||||||
|
overflow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinned-projects {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav-item {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: var(--icon-foreground);
|
||||||
|
margin-right: $s-8;
|
||||||
|
height: $s-12;
|
||||||
|
width: $s-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--sidebar-element-background-color-hover);
|
||||||
|
span {
|
||||||
|
color: var(--sidebar-element-foreground-color-hover);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&.current {
|
||||||
background-color: $db-quaternary;
|
background-color: var(--sidebar-element-background-color-selected);
|
||||||
.team-icon {
|
.element-title {
|
||||||
&.new-team {
|
color: var(--sidebar-element-foreground-color-selected);
|
||||||
background-color: $da-primary;
|
|
||||||
color: $db-primary;
|
|
||||||
svg {
|
|
||||||
fill: $db-secondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.team-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.team-text {
|
|
||||||
color: $df-primary;
|
|
||||||
width: $s-168;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.action {
|
|
||||||
.team-icon {
|
|
||||||
background-color: #2e3434;
|
|
||||||
background-color: var(--new-team-button-background-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
height: $s-24;
|
|
||||||
margin-right: $s-12;
|
|
||||||
padding: $s-6;
|
|
||||||
width: $s-24;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
height: $s-12;
|
|
||||||
width: $s-12;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recent-projects svg {
|
||||||
|
fill: var(--main-icon-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-link {
|
||||||
|
display: block;
|
||||||
|
padding: $s-8 $s-8 $s-8 $s-24;
|
||||||
|
font-weight: $fw400;
|
||||||
|
width: 100%;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-element {
|
||||||
|
padding: $s-8 $s-8 $s-8 $s-24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-title {
|
||||||
|
@include textEllipsis;
|
||||||
|
color: var(--sidebar-element-foreground-color);
|
||||||
|
font-size: $fs-14;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pinned projects
|
||||||
|
|
||||||
.sidebar-empty-placeholder {
|
.sidebar-empty-placeholder {
|
||||||
padding: $s-12;
|
padding: $s-12;
|
||||||
color: $df-secondary;
|
color: var(--empty-message-foreground-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.empty-placeholder-icon {
|
||||||
padding: 0 $s-12;
|
padding: 0 $s-12;
|
||||||
svg {
|
svg {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
width: $s-12;
|
width: $s-12;
|
||||||
height: $s-12;
|
height: $s-12;
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
font-size: $fs-12;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: $fs-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search
|
||||||
|
|
||||||
.sidebar-search {
|
.sidebar-search {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: $s-1 solid transparent;
|
border: $s-1 solid transparent;
|
||||||
display: flex;
|
margin: 0 $s-16;
|
||||||
margin: $s-6 $s-16;
|
|
||||||
|
|
||||||
background-color: $db-tertiary;
|
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
margin-bottom: $s-32;
|
background-color: var(--search-bar-input-background-color);
|
||||||
margin-top: 0;
|
}
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
background: transparent;
|
@include smallTitleTipography;
|
||||||
border: 0;
|
height: $s-40;
|
||||||
font-size: $fs-14;
|
width: 100%;
|
||||||
margin: 0;
|
padding: $s-6 $s-12;
|
||||||
width: 100%;
|
margin: 0;
|
||||||
height: $s-40;
|
border: transparent;
|
||||||
|
border-radius: $br-8;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--search-bar-foreground-color);
|
||||||
|
|
||||||
border-radius: $br-8;
|
&:focus,
|
||||||
color: $df-primary;
|
&:focus-within,
|
||||||
max-width: 100%;
|
&:focus-visible {
|
||||||
padding: $s-6 $s-12;
|
outline: none;
|
||||||
|
border: $s-1 solid var(--search-bar-input-border-color-focus);
|
||||||
&:focus,
|
|
||||||
&:focus-within {
|
|
||||||
border: $s-1 solid $da-primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
::placeholder {
|
::placeholder {
|
||||||
color: $df-secondary;
|
color: var(--search-bar-placeholder-foreground-color);
|
||||||
}
|
|
||||||
|
|
||||||
.search,
|
|
||||||
.clear-search {
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
height: $s-24;
|
|
||||||
margin-left: auto;
|
|
||||||
padding: 0 $s-8;
|
|
||||||
width: $s-32;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: calc(50% - $s-12);
|
|
||||||
right: $s-2;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $df-secondary;
|
|
||||||
height: $s-16;
|
|
||||||
width: $s-16;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clear-search svg {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
fill: $da-primary;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-nav {
|
.search-btn {
|
||||||
display: flex;
|
@include buttonStyle;
|
||||||
flex-direction: column;
|
@include flexCenter;
|
||||||
overflow-y: auto;
|
position: absolute;
|
||||||
margin: 0;
|
right: 0;
|
||||||
user-select: none;
|
height: $s-24;
|
||||||
|
width: $s-32;
|
||||||
|
padding: 0 $s-8;
|
||||||
|
|
||||||
&.no-overflow {
|
svg {
|
||||||
overflow: unset;
|
fill: var(--search-bar-icon-foreground-color);
|
||||||
}
|
height: $s-16;
|
||||||
|
width: $s-16;
|
||||||
& > li {
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
&.project-element {
|
|
||||||
padding: $s-8 $s-8 $s-8 $s-24;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
padding: $s-8 $s-8 $s-8 $s-24;
|
|
||||||
font-weight: $fw400;
|
|
||||||
width: 100%;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $db-secondary;
|
|
||||||
margin-right: $s-8;
|
|
||||||
height: $s-12;
|
|
||||||
width: $s-12;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-title {
|
|
||||||
color: $df-secondary;
|
|
||||||
font-size: $fs-14;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.recent-projects {
|
|
||||||
svg {
|
|
||||||
fill: $df-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input.element-title {
|
|
||||||
border: 0;
|
|
||||||
height: $s-32;
|
|
||||||
padding: $s-6;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: $df-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
background-color: $df-primary;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: $s-6;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $df-secondary;
|
|
||||||
height: $s-16;
|
|
||||||
transform: rotate(45deg) translateY(7px);
|
|
||||||
width: $s-16;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-subtitle {
|
|
||||||
color: $df-secondary;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $db-secondary;
|
|
||||||
span {
|
|
||||||
color: $da-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
background-color: $db-quaternary;
|
|
||||||
.element-title {
|
|
||||||
color: $da-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear-search-btn svg {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
fill: var(--search-bar-icon-foreground-color-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile
|
||||||
.profile-section {
|
.profile-section {
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
padding: $s-12 $s-16;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
padding: $s-12 $s-16;
|
||||||
|
border-top: $s-1 solid var(--panel-border-color);
|
||||||
|
background-color: var(--profile-section-background-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
background-color: $db-tertiary;
|
.profile {
|
||||||
border-top: $s-1 solid $db-quaternary;
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
.profile {
|
gap: $s-8;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
svg {
|
||||||
display: flex;
|
height: $s-12;
|
||||||
flex-grow: 1;
|
width: $s-12;
|
||||||
|
margin-left: auto;
|
||||||
span {
|
margin-right: $s-8;
|
||||||
@include text-ellipsis;
|
}
|
||||||
color: $df-primary;
|
}
|
||||||
margin: $s-12;
|
|
||||||
font-size: $fs-14;
|
.profile-fullname {
|
||||||
max-width: $s-160;
|
@include smallTitleTipography;
|
||||||
}
|
@include text-ellipsis;
|
||||||
|
align-self: center;
|
||||||
img {
|
max-width: $s-160;
|
||||||
border-radius: 50%;
|
color: var(--profile-foreground-color);
|
||||||
flex-shrink: 0;
|
}
|
||||||
height: $s-40;
|
|
||||||
width: $s-40;
|
.profile-img {
|
||||||
}
|
height: $s-40;
|
||||||
svg {
|
width: $s-40;
|
||||||
height: $s-12;
|
border-radius: $br-circle;
|
||||||
margin-left: auto;
|
}
|
||||||
margin-right: $s-8;
|
|
||||||
width: $s-12;
|
.profile-dropdown {
|
||||||
}
|
@extend .menu-dropdown;
|
||||||
}
|
left: $s-16;
|
||||||
|
bottom: $s-72;
|
||||||
.dropdown {
|
min-width: $s-252;
|
||||||
left: $s-16;
|
// TODO ADD animation fadeInUp
|
||||||
bottom: $s-44;
|
}
|
||||||
background-color: var(--profile-drowpdown-background-color);
|
|
||||||
border: $s-1 solid $db-tertiary;
|
.profile-dropdown-item {
|
||||||
border-radius: $br-8;
|
@extend .menu-item-base;
|
||||||
min-width: $s-252;
|
@include smallTitleTipography;
|
||||||
|
height: $s-40;
|
||||||
@include animation(0, 0.2s, fadeInUp);
|
padding: $s-8 $s-16;
|
||||||
|
}
|
||||||
li {
|
|
||||||
font-size: $fs-14;
|
.profile-separator {
|
||||||
padding: $s-8 $s-16;
|
height: $s-6;
|
||||||
|
}
|
||||||
svg {
|
|
||||||
fill: $df-secondary;
|
.item-with-icon {
|
||||||
margin-right: $s-8;
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
height: $s-12;
|
|
||||||
width: $s-12;
|
svg {
|
||||||
}
|
fill: var(--menu-icon-foreground-color);
|
||||||
|
margin-right: $s-8;
|
||||||
.text {
|
height: $s-12;
|
||||||
color: $df-primary;
|
width: $s-12;
|
||||||
}
|
|
||||||
|
|
||||||
&.separator {
|
|
||||||
border-top: $s-1 solid transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue