mirror of
https://github.com/penpot/penpot.git
synced 2026-06-05 23:20:19 +00:00
f00b222262
* Revert "♻️ Replace some components with DS ones" This reverts commit 6879f54e5da45b38173c3e2660d88b4ea6939bb0. * 📎 Restore missing styles * 📎 Fix tests --------- Co-authored-by: Luis de Dios <luis.dedios@kaleidos.net>
246 lines
4.6 KiB
SCSS
246 lines
4.6 KiB
SCSS
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
//
|
|
// Copyright (c) KALEIDOS INC
|
|
|
|
@use "refactor/common-refactor.scss" as deprecated;
|
|
|
|
.workspace-header-right {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-width: deprecated.$s-256;
|
|
padding: deprecated.$s-8;
|
|
gap: deprecated.$s-8;
|
|
background-color: var(--panel-background-color);
|
|
}
|
|
|
|
.users-section {
|
|
position: relative;
|
|
min-width: deprecated.$s-32;
|
|
max-width: deprecated.$s-72;
|
|
padding: deprecated.$s-4 deprecated.$s-6;
|
|
}
|
|
|
|
.separator {
|
|
flex: 1;
|
|
}
|
|
|
|
.zoom-widget {
|
|
@include deprecated.buttonStyle;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: deprecated.$s-28;
|
|
max-width: deprecated.$s-48;
|
|
width: deprecated.$s-48;
|
|
border-radius: deprecated.$br-8;
|
|
|
|
.label {
|
|
@include deprecated.bodySmallTypography;
|
|
height: 100%;
|
|
padding: deprecated.$s-8 0;
|
|
color: var(--button-tertiary-foreground-color-rest);
|
|
}
|
|
|
|
&:hover {
|
|
.label {
|
|
color: var(--button-tertiary-foreground-color-focus);
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
.label {
|
|
color: var(--button-tertiary-foreground-color-focus);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
@extend .menu-dropdown;
|
|
right: deprecated.$s-2;
|
|
top: calc(deprecated.$s-2 + deprecated.$s-48);
|
|
width: deprecated.$s-272;
|
|
}
|
|
|
|
.basic-zoom-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: deprecated.$s-6;
|
|
cursor: auto;
|
|
}
|
|
|
|
.zoom-btns {
|
|
display: flex;
|
|
}
|
|
|
|
.zoom-text {
|
|
@include deprecated.flexCenter;
|
|
height: 100%;
|
|
min-width: deprecated.$s-48;
|
|
padding: 0;
|
|
margin: 0 deprecated.$s-2;
|
|
color: var(--modal-title-foreground-color);
|
|
}
|
|
|
|
.reset-btn {
|
|
@extend .button-tertiary;
|
|
color: var(--button-tertiary-foreground-color-hover);
|
|
height: deprecated.$s-28;
|
|
border-radius: deprecated.$br-8;
|
|
}
|
|
|
|
.zoom-option {
|
|
@extend .menu-item-base;
|
|
|
|
.shortcuts {
|
|
@extend .shortcut-base;
|
|
|
|
.shortcut-key {
|
|
@extend .shortcut-key-base;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--menu-foreground-color-hover);
|
|
|
|
.shortcuts {
|
|
.shortcut-key {
|
|
color: var(--menu-foreground-color-hover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.comments-btn {
|
|
@extend .button-tertiary;
|
|
border-radius: deprecated.$br-8;
|
|
margin: 0;
|
|
height: deprecated.$s-28;
|
|
width: deprecated.$s-28;
|
|
border: none;
|
|
|
|
svg {
|
|
@extend .button-icon;
|
|
stroke: var(--icon-foreground);
|
|
height: deprecated.$s-16;
|
|
width: deprecated.$s-16;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--button-tertiary-background-color-selected);
|
|
|
|
svg {
|
|
stroke: var(--button-tertiary-foreground-color-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.history-button {
|
|
@extend .button-tertiary;
|
|
border-radius: deprecated.$br-8;
|
|
margin: 0;
|
|
height: deprecated.$s-28;
|
|
width: deprecated.$s-28;
|
|
border: none;
|
|
|
|
svg {
|
|
@extend .button-icon;
|
|
stroke: var(--icon-foreground);
|
|
height: deprecated.$s-16;
|
|
width: deprecated.$s-16;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--button-tertiary-background-color-selected);
|
|
|
|
svg {
|
|
stroke: var(--button-tertiary-foreground-color-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.persistence-status-widget {
|
|
@include deprecated.flexCenter;
|
|
width: deprecated.$s-28;
|
|
height: deprecated.$s-28;
|
|
}
|
|
|
|
.status-icon {
|
|
@include deprecated.flexCenter;
|
|
width: deprecated.$s-24;
|
|
height: deprecated.$s-24;
|
|
margin: 0;
|
|
border-radius: deprecated.$br-circle;
|
|
|
|
svg {
|
|
@extend .button-icon;
|
|
stroke: var(--status-widget-icon-foreground-color);
|
|
}
|
|
}
|
|
|
|
.pending-status {
|
|
background-color: var(--status-widget-background-color-warning);
|
|
}
|
|
|
|
.saving-status {
|
|
background-color: var(--status-widget-background-color-pending);
|
|
|
|
svg {
|
|
animation: spin-animation 1s infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
|
|
.saved-status {
|
|
background-color: var(--status-widget-background-color-success);
|
|
}
|
|
|
|
.error-status {
|
|
background-color: var(--status-widget-background-color-error);
|
|
}
|
|
|
|
.share-btn,
|
|
.viewer-btn {
|
|
@extend .button-tertiary;
|
|
border-radius: deprecated.$br-8;
|
|
margin: 0;
|
|
width: deprecated.$s-28;
|
|
height: deprecated.$s-28;
|
|
border: none;
|
|
|
|
svg {
|
|
@extend .button-icon;
|
|
height: deprecated.$s-16;
|
|
width: deprecated.$s-16;
|
|
stroke: var(--icon-foreground);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.unread {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 2px solid var(--color-background-tertiary);
|
|
border-radius: 50%;
|
|
background: red;
|
|
top: 6px;
|
|
right: 6px;
|
|
}
|