mirror of
https://github.com/penpot/penpot.git
synced 2026-06-01 05:00:17 +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>
202 lines
4.0 KiB
SCSS
202 lines
4.0 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;
|
|
|
|
.share-modal {
|
|
display: block;
|
|
position: absolute;
|
|
top: deprecated.$s-52;
|
|
right: deprecated.$s-12;
|
|
left: calc(100vw - deprecated.$s-512);
|
|
z-index: deprecated.$z-index-modal;
|
|
}
|
|
|
|
.share-link-dialog {
|
|
@extend .modal-container-base;
|
|
min-height: unset;
|
|
}
|
|
|
|
.share-link-header {
|
|
margin-bottom: deprecated.$s-24;
|
|
}
|
|
|
|
.share-link-title {
|
|
@include deprecated.uppercaseTitleTipography;
|
|
color: var(--modal-title-foreground-color);
|
|
}
|
|
|
|
.modal-close-button {
|
|
@extend .modal-close-btn-base;
|
|
}
|
|
|
|
.modal-content {
|
|
@include deprecated.bodySmallTypography;
|
|
@include deprecated.flexColumn;
|
|
gap: deprecated.$s-24;
|
|
}
|
|
|
|
.share-link-section {
|
|
@include deprecated.flexColumn;
|
|
gap: deprecated.$s-8;
|
|
}
|
|
|
|
.hint-wrapper {
|
|
@include deprecated.flexRow;
|
|
}
|
|
|
|
.hint {
|
|
flex-grow: 1;
|
|
color: var(--modal-text-foreground-color);
|
|
}
|
|
|
|
.custon-input-wrapper {
|
|
@include deprecated.flexRow;
|
|
border-radius: deprecated.$br-8;
|
|
height: deprecated.$s-32;
|
|
width: 100%;
|
|
background-color: var(--input-background-color);
|
|
}
|
|
|
|
.input-text {
|
|
@extend .input-element;
|
|
@include deprecated.bodySmallTypography;
|
|
color: var(--input-foreground-color-active);
|
|
padding-left: deprecated.$s-8;
|
|
margin: 0;
|
|
flex-grow: 1;
|
|
&:focus {
|
|
outline: none;
|
|
border: deprecated.$s-1 solid var(--input-border-color-active);
|
|
}
|
|
}
|
|
|
|
.copy-button {
|
|
@extend .button-secondary;
|
|
@include deprecated.flexRow;
|
|
gap: deprecated.$s-8;
|
|
height: deprecated.$s-32;
|
|
width: deprecated.$s-28;
|
|
svg {
|
|
@extend .button-icon;
|
|
stroke: var(--icon-foreground-hover);
|
|
}
|
|
}
|
|
|
|
.description {
|
|
@include deprecated.bodySmallTypography;
|
|
color: var(--modal-text-foreground-color);
|
|
margin-bottom: deprecated.$s-24;
|
|
}
|
|
|
|
.actions {
|
|
@include deprecated.flexRow;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.button-active {
|
|
@extend .modal-accept-btn;
|
|
}
|
|
|
|
.button-cancel {
|
|
@extend .modal-cancel-btn;
|
|
}
|
|
|
|
.button-danger {
|
|
@extend .modal-danger-btn;
|
|
}
|
|
|
|
.permissions-section {
|
|
@include deprecated.flexColumn;
|
|
gap: deprecated.$s-8;
|
|
}
|
|
|
|
.manage-permissions {
|
|
@include deprecated.buttonStyle;
|
|
@include deprecated.uppercaseTitleTipography;
|
|
color: var(--menu-foreground-color-rest);
|
|
height: deprecated.$s-32;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.icon {
|
|
@include deprecated.flexCenter;
|
|
margin-right: deprecated.$s-6;
|
|
svg {
|
|
@extend .button-icon;
|
|
stroke: var(--icon-foreground);
|
|
}
|
|
&.rotated {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.view-mode,
|
|
.access-mode,
|
|
.inspect-mode {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.view-mode {
|
|
max-height: deprecated.$s-216;
|
|
overflow: hidden auto;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--modal-text-foreground-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: deprecated.$s-136;
|
|
height: deprecated.$s-32;
|
|
}
|
|
|
|
.items {
|
|
flex-grow: 1;
|
|
color: var(--input-foreground-color-active);
|
|
}
|
|
.select-all-row {
|
|
@include deprecated.flexRow;
|
|
justify-content: space-between;
|
|
height: deprecated.$s-32;
|
|
border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled);
|
|
}
|
|
.select-all-label {
|
|
color: var(--input-foreground-color-active);
|
|
}
|
|
.pages-selection {
|
|
margin: 0;
|
|
li {
|
|
border-bottom: deprecated.$s-1 solid var(--input-border-color-disabled);
|
|
}
|
|
li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
.count-pages,
|
|
.current-tag {
|
|
@include deprecated.bodySmallTypography;
|
|
color: var(--input-foreground-color);
|
|
}
|
|
|
|
.checkbox-wrapper {
|
|
@extend .input-checkbox;
|
|
height: deprecated.$s-32;
|
|
padding: 0;
|
|
span.checked {
|
|
background-color: var(--input-checkbox-background-color-active);
|
|
border: deprecated.$s-1 solid var(--input-checkbox-background-color-active);
|
|
svg {
|
|
@extend .button-icon-small;
|
|
stroke: var(--input-checkbox-foreground-color-active);
|
|
}
|
|
}
|
|
}
|