mirror of
https://github.com/penpot/penpot.git
synced 2026-08-29 16:18:48 +00:00
139 lines
2.8 KiB
SCSS
139 lines
2.8 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 "ds/typography.scss" as *;
|
|
@use "ds/_sizes.scss" as *;
|
|
@use "refactor/common-refactor.scss" as deprecated;
|
|
@use "ds/_utils.scss" as *;
|
|
|
|
.settings-bar-right {
|
|
min-inline-size: px2rem(252);
|
|
inline-size: 100%;
|
|
block-size: 100vh;
|
|
position: relative;
|
|
inset-inline-start: unset;
|
|
inset-inline-end: unset;
|
|
grid-area: right-sidebar;
|
|
overflow: hidden;
|
|
|
|
&.viewer-code {
|
|
block-size: calc(100vh - $sz-48);
|
|
}
|
|
}
|
|
|
|
.tool-windows {
|
|
block-size: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
gap: var(--sp-s);
|
|
}
|
|
|
|
.shape-info {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--sp-s);
|
|
align-items: center;
|
|
block-size: $sz-32;
|
|
padding-inline-start: var(--sp-m);
|
|
}
|
|
|
|
.shape-info-subtitle {
|
|
block-size: fit-content;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.layers-icon,
|
|
.shape-icon {
|
|
--icon-stroke-color: var(--color-foreground-primary);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
block-size: $sz-32;
|
|
}
|
|
|
|
.layer-title {
|
|
@include deprecated.body-small-typography;
|
|
@include deprecated.text-ellipsis;
|
|
|
|
block-size: $sz-32;
|
|
padding: var(--sp-s) 0;
|
|
color: var(--color-foreground-primary);
|
|
}
|
|
|
|
.layer-title-with-subtitle {
|
|
block-size: fit-content;
|
|
padding-block-end: 0;
|
|
}
|
|
|
|
.layer-subtitle {
|
|
@include deprecated.body-small-typography;
|
|
@include deprecated.text-ellipsis;
|
|
|
|
color: var(--assets-item-name-foreground-color-rest);
|
|
}
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--sp-xxxl);
|
|
margin: var(--sp-xxxl) auto;
|
|
inline-size: $sz-200;
|
|
}
|
|
|
|
.empty-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.inspect-tab-switcher {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-m);
|
|
gap: var(--sp-m);
|
|
}
|
|
|
|
.inspect-tab-switcher-label {
|
|
@include use-typography("body-medium");
|
|
|
|
color: var(--color-foreground-primary);
|
|
flex: 0 1 40%;
|
|
}
|
|
|
|
.inspect-tab-switcher-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
gap: var(--sp-s);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.inspect-tab-switcher-controls-color-space {
|
|
// 65px is the minimum size of the switcher to avoid text ellipsis on the options
|
|
flex: 0 0 65px;
|
|
}
|
|
|
|
.inspect-tab-switcher-controls-color-space-select {
|
|
justify-self: end;
|
|
}
|
|
|
|
.inspect-tab-switcher-controls-tab {
|
|
// 110px is the minimum size of the switcher to avoid text ellipsis on the options
|
|
flex: 0 0 110px;
|
|
}
|
|
|
|
.inspect-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.viewer-tab-switcher {
|
|
--tabs-nav-padding-inline-start: 0;
|
|
--tabs-nav-padding-inline-end: var(--sp-m);
|
|
|
|
overflow: auto;
|
|
}
|