mirror of
https://github.com/penpot/penpot.git
synced 2025-01-06 14:50:20 -05:00
♻️ Remove unused CSS files
This commit is contained in:
Eva Marco
parent
bf7d3dcbb8
commit
3154690101
13 changed files with 2 additions and 1285 deletions
|
|
@ -18,13 +18,10 @@ $da-primary-muted: rgba(126, 255, 245, 0.3);
|
|||
$da-secondary: #bb97d8;
|
||||
$da-tertiary: #00d1b8;
|
||||
|
||||
$d-shadow: rgba(0, 0, 0, 0.6);
|
||||
|
||||
// Colors
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-canvas: #e8e9ea;
|
||||
$color-dashboard: #f6f6f6;
|
||||
|
||||
// Main color
|
||||
$color-primary: #31efb8;
|
||||
|
|
|
|||
|
|
@ -29,57 +29,6 @@ $bp-min-2556: "(min-width: 2556px)";
|
|||
}
|
||||
}
|
||||
|
||||
// Advanced positioning
|
||||
// ----------------
|
||||
@mixin position(
|
||||
$type,
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
position: $type;
|
||||
$allowed_types: absolute relative fixed;
|
||||
@if not index($allowed_types, $type) {
|
||||
@warn "Unknown position: #{$type}.";
|
||||
}
|
||||
@each $data in top $top, right $right, bottom $bottom, left $left {
|
||||
#{nth($data, 1)}: nth($data, 2);
|
||||
}
|
||||
}
|
||||
@mixin absolute(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(absolute, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin relative(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(relative, $top, $right, $bottom, $left);
|
||||
}
|
||||
@mixin fixed(
|
||||
$top: $position-default,
|
||||
$right: $position-default,
|
||||
$bottom: $position-default,
|
||||
$left: $position-default
|
||||
) {
|
||||
@include position(fixed, $top, $right, $bottom, $left);
|
||||
}
|
||||
|
||||
/// Center an element vertically and horizontally with an absolute position.
|
||||
/// @group Mixins
|
||||
|
||||
@mixin centerer {
|
||||
@include absolute(50%, null, null, 50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/// This mixing allow you to add placeholder colors in all available browsers
|
||||
/// @group Mixins
|
||||
|
||||
|
|
@ -106,11 +55,6 @@ $bp-min-2556: "(min-width: 2556px)";
|
|||
/// Allows you to visually
|
||||
/// @group Mixins
|
||||
|
||||
@mixin hide-text {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
|
|
@ -123,41 +67,3 @@ $bp-min-2556: "(min-width: 2556px)";
|
|||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltipShow {
|
||||
&:hover {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin paragraph-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
background-color: $color-gray-50;
|
||||
bottom: -3px;
|
||||
content: "...";
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,11 +33,9 @@
|
|||
//#################################################
|
||||
|
||||
@import "common/base";
|
||||
@import "main/layouts/login";
|
||||
@import "main/layouts/main-layout";
|
||||
@import "main/layouts/not-found";
|
||||
@import "main/layouts/viewer";
|
||||
@import "main/layouts/inspect";
|
||||
|
||||
//#################################################
|
||||
// Commons
|
||||
|
|
@ -46,21 +44,12 @@
|
|||
@import "common/framework";
|
||||
@import "main/partials/forms";
|
||||
@import "main/partials/texts";
|
||||
@import "main/partials/context-menu";
|
||||
@import "main/partials/dropdown";
|
||||
|
||||
//#################################################
|
||||
// Partials
|
||||
//#################################################
|
||||
|
||||
@import "main/partials/activity-bar";
|
||||
@import "main/partials/debug-icons-preview";
|
||||
@import "main/partials/editable-label";
|
||||
@import "main/partials/loader";
|
||||
@import "main/partials/project-bar";
|
||||
@import "main/partials/sidebar";
|
||||
@import "main/partials/tab-container";
|
||||
@import "main/partials/user-settings";
|
||||
@import "main/partials/workspace";
|
||||
@import "main/partials/exception-page";
|
||||
@import "main/partials/signup-questions";
|
||||
|
|
|
|||
|
|
@ -1,161 +0,0 @@
|
|||
$width-left-toolbar: 48px;
|
||||
$width-settings-bar: 256px;
|
||||
|
||||
.inspect-layout {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 48px auto;
|
||||
grid-template-columns: 1fr;
|
||||
user-select: none;
|
||||
|
||||
.viewer-header {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
}
|
||||
|
||||
.viewer-content {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen.inspect-layout.force-visible {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
& .viewer-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
margin-bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen.inspect-layout:not(.force-visible) {
|
||||
& .viewer-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: -48px;
|
||||
left: 0;
|
||||
transition: top 400ms ease 300ms;
|
||||
z-index: 10;
|
||||
margin-bottom: 48px;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-header:hover {
|
||||
top: 0;
|
||||
transition: top 200ms;
|
||||
}
|
||||
|
||||
& .viewer-bottom {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: -48px;
|
||||
left: 0;
|
||||
transition: bottom 400ms ease 300ms;
|
||||
z-index: 2;
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
& .viewer-bottom:hover {
|
||||
bottom: 0px;
|
||||
transition: bottom 200ms;
|
||||
}
|
||||
|
||||
& .viewer-content {
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.inspect-layout {
|
||||
.viewer-section {
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 0;
|
||||
&.fullscreen {
|
||||
.settings-bar,
|
||||
.settings-bar {
|
||||
padding-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-bar {
|
||||
width: $width-settings-bar;
|
||||
|
||||
&.settings-bar-right,
|
||||
&.settings-bar-left {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
.settings-bar-inside {
|
||||
padding-top: 0.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings-bar-right {
|
||||
width: 100%;
|
||||
grid-area: right-sidebar;
|
||||
}
|
||||
}
|
||||
|
||||
.inspect-svg-wrapper {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.inspect-svg-container {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
justify-content: safe center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--width, $width-settings-bar);
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& > .resize-area {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
// 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
|
||||
|
||||
.activity-bar {
|
||||
background-color: $color-gray-50;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 250px;
|
||||
|
||||
.activity-bar-inside {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $color-gray-40;
|
||||
font-size: $fs16;
|
||||
font-weight: $fw700;
|
||||
margin-bottom: $size-1;
|
||||
}
|
||||
|
||||
.date-ribbon {
|
||||
background-color: lighten($color-gray-20, 12%);
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
font-weight: $fw700;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activity-input {
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
display: flex;
|
||||
font-size: $fs12;
|
||||
padding: $size-2;
|
||||
width: 100%;
|
||||
|
||||
img.activity-author {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 30px;
|
||||
margin-right: $size-4;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.activity-project {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
font-weight: $fw700;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.editable-label {
|
||||
display: flex;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-label-input {
|
||||
border: 0;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.editable-label-close {
|
||||
background-color: $color-white;
|
||||
cursor: pointer;
|
||||
padding: 3px 5px;
|
||||
|
||||
& svg {
|
||||
fill: $color-gray-30;
|
||||
height: 15px;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
// 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
|
||||
|
||||
.project-bar {
|
||||
background-color: $color-gray-50;
|
||||
border-right: 1px solid $color-gray-10;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 50px;
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
z-index: 9;
|
||||
|
||||
&.toggle {
|
||||
left: -201px;
|
||||
}
|
||||
|
||||
.project-bar-inside {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding-top: 60px;
|
||||
|
||||
.project-name {
|
||||
border-bottom: 1px solid $color-gray-10;
|
||||
font-size: $fs14;
|
||||
font-weight: $fw700;
|
||||
padding: 0 $size-2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-warning,
|
||||
.btn-danger {
|
||||
font-size: $fs12;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 8px $size-2;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-view {
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $size-1 $size-2;
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
margin-right: $size-1;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.current {
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
right: 0;
|
||||
top: 40%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
margin-right: $size-2;
|
||||
width: 12px;
|
||||
|
||||
&:hover {
|
||||
fill: $color-gray-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,575 +0,0 @@
|
|||
// 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
|
||||
|
||||
.settings-bar {
|
||||
background-color: $color-gray-50;
|
||||
border-left: 1px solid $color-gray-60;
|
||||
position: relative;
|
||||
|
||||
&.settings-bar-left {
|
||||
border-left: none;
|
||||
border-right: 1px solid $color-gray-60;
|
||||
|
||||
& .tab-container-tabs {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-bar-inside {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 100%;
|
||||
height: calc(100% - 2px);
|
||||
|
||||
.tool-window {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tool-window-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: $size-2;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
button,
|
||||
div {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.pages-title {
|
||||
color: #e3e3e3;
|
||||
font-size: 0.875rem;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span.tool-badge {
|
||||
border: 1px solid $color-primary;
|
||||
border-radius: $br2;
|
||||
font-size: $fs10;
|
||||
color: $color-primary;
|
||||
padding: 2px 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
span.tool-link,
|
||||
span.shared-library {
|
||||
margin-left: auto;
|
||||
padding-left: 17px;
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
span.tool-link:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
span.library-title {
|
||||
color: $color-gray-10;
|
||||
font-size: $fs14;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-window-bar-icon {
|
||||
height: 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
height: 3rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tool-window-bar-title {
|
||||
font-size: $fs14;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-window-icon {
|
||||
margin-right: $size-2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tool-window-close {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .view-only-mode {
|
||||
color: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
border-radius: $br3;
|
||||
font-size: $fs10;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
line-height: $lh-150;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 12px;
|
||||
|
||||
.tool-window-bar-icon {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 10px;
|
||||
background-color: $color-gray-60;
|
||||
color: $color-gray-10;
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .resize-area {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&.settings-bar-left > .resize-area {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
&.settings-bar-right > .resize-area {
|
||||
left: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
&.inspect {
|
||||
.tab-container-tabs {
|
||||
padding-bottom: 0.5rem;
|
||||
background-color: $color-gray-50;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
border-radius: $br4;
|
||||
|
||||
&.current {
|
||||
background-color: $color-primary;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-list {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
border-left: 9px solid $color-gray-50;
|
||||
margin: 0 0 0 0.4rem;
|
||||
|
||||
li {
|
||||
border-left: 1px solid $color-gray-40;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
|
||||
&.open {
|
||||
ul {
|
||||
li {
|
||||
.element-list-body {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-list.pages-list {
|
||||
max-height: 10rem;
|
||||
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.context-menu-items {
|
||||
border: none;
|
||||
margin: none;
|
||||
}
|
||||
|
||||
.context-menu-action {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
button.collapse-sidebar {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
padding-top: 0.75rem;
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
|
||||
& svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-20;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
background: $color-gray-60;
|
||||
left: 48px;
|
||||
top: 48px;
|
||||
width: 28px;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
border-radius: 0 $br4 $br4 0;
|
||||
border-left: 1px solid $color-gray-50;
|
||||
|
||||
& svg {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layers-tab {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.resize-area-horiz {
|
||||
position: absolute;
|
||||
top: var(--height, 200px);
|
||||
left: 0;
|
||||
height: 8px;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts,
|
||||
.debug-panel {
|
||||
.shortcuts-header,
|
||||
.debug-panel-header {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
background-color: $color-gray-60;
|
||||
|
||||
.shortcuts-title,
|
||||
.debug-panel-title {
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
transform: rotate(45deg);
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.shortcuts-close-button,
|
||||
.debug-panel-close-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 2px 0 2px 15px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
transform: rotate(45deg);
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-field {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 12px 10px;
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-30;
|
||||
border-radius: $br2;
|
||||
width: 100%;
|
||||
&:focus-within {
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
.input-text {
|
||||
margin: 0;
|
||||
background: $color-gray-50;
|
||||
width: 100%;
|
||||
color: $color-white;
|
||||
&:focus {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&.close {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 7px;
|
||||
cursor: pointer;
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-list {
|
||||
border-top: 1px solid $color-gray-60;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
height: 90%;
|
||||
margin-bottom: 15px;
|
||||
.section-title {
|
||||
background-color: $color-gray-60;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.section-title,
|
||||
.subsection-title {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
font-size: $fs12;
|
||||
|
||||
.section-name {
|
||||
color: $color-white;
|
||||
}
|
||||
.collapesed-shortcuts {
|
||||
padding: 0 10px;
|
||||
svg {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
fill: $color-gray-20;
|
||||
}
|
||||
&.open {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.shortcut-count {
|
||||
padding-left: 5px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
.subsection-title {
|
||||
padding: 4px 0px;
|
||||
.subsection-name {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.subsection-title {
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
.subsection-name,
|
||||
.section-name {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut-name {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br4;
|
||||
padding: 7px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
color: $color-white;
|
||||
font-size: $fs12;
|
||||
.command-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.keys {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.char-box {
|
||||
min-width: 15px;
|
||||
background-color: $color-white;
|
||||
color: $color-black;
|
||||
border-radius: $br3;
|
||||
padding: 2px 5px;
|
||||
font-size: $fs11;
|
||||
font-weight: $fw600;
|
||||
margin: 0 2px;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.space {
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-found {
|
||||
background-color: $color-gray-60;
|
||||
padding: 4px 0;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 4px;
|
||||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
|
||||
.debug-panel {
|
||||
.debug-panel-inner {
|
||||
padding: 8px;
|
||||
}
|
||||
.debug-option {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
|
||||
label {
|
||||
font-size: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: $color-primary;
|
||||
}
|
||||
label {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
.tab-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-container-tabs {
|
||||
background: $color-gray-60;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $fs12;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
align-items: center;
|
||||
background: $color-gray-60;
|
||||
border-radius: $br2 $br2 0 0;
|
||||
color: $color-white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0.5rem 0.25rem 0 0.25rem;
|
||||
width: 100%;
|
||||
|
||||
&.current {
|
||||
background: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.inspect .tab-container-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-element,
|
||||
.tab-element-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
.settings-content {
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 160px;
|
||||
background-color: $color-white;
|
||||
|
||||
.secondary-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
font-size: $fs14;
|
||||
color: $color-gray-60;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: 30px;
|
||||
|
||||
.label {
|
||||
color: $color-primary-dark;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-primary-dark;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.label {
|
||||
color: $color-danger;
|
||||
}
|
||||
svg {
|
||||
fill: $color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
align-items: top;
|
||||
color: $color-gray-60;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
font-size: $fs24;
|
||||
font-weight: $fw400;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
|
||||
.nav-item {
|
||||
align-items: center;
|
||||
color: $color-gray-40;
|
||||
display: flex;
|
||||
flex-basis: 140px;
|
||||
justify-content: center;
|
||||
|
||||
&.current {
|
||||
border-bottom: 3px solid $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-profile {
|
||||
.forms-container {
|
||||
margin-top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-form {
|
||||
flex-basis: 168px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.image-change-field {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.update-overlay {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
height: 121px;
|
||||
border-radius: 50%;
|
||||
font-size: $fs24;
|
||||
color: $color-white;
|
||||
line-height: $lh-500; // Original value was 120px; 120px/24px =500% => $lh-500
|
||||
text-align: center;
|
||||
background: $color-primary-dark;
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
.update-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
flex-grow: 1;
|
||||
flex-basis: 390px;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
.change-email {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $fs14;
|
||||
color: $color-primary-dark;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-form {
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 120px;
|
||||
margin-right: $size-4;
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.options-form,
|
||||
.password-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 368px;
|
||||
|
||||
h2 {
|
||||
font-size: $fs14;
|
||||
font-weight: $fw400;
|
||||
margin-bottom: $size-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -339,7 +339,7 @@
|
|||
|
||||
.profile-fullname {
|
||||
@include smallTitleTipography;
|
||||
@include text-ellipsis;
|
||||
@include textEllipsis;
|
||||
align-self: center;
|
||||
max-width: $s-160;
|
||||
color: var(--profile-foreground-color);
|
||||
|
|
|
|||
|
|
@ -49,11 +49,6 @@
|
|||
|
||||
// STEP 1
|
||||
|
||||
// .step-1 {
|
||||
// max-height: $s-468;
|
||||
// height: $s-468;
|
||||
// }
|
||||
|
||||
.header-image {
|
||||
height: $s-112;
|
||||
width: auto;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
.layer-title {
|
||||
@include bodySmallTypography;
|
||||
@include text-ellipsis;
|
||||
@include textEllipsis;
|
||||
height: $s-32;
|
||||
padding: $s-8 0;
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
|
|
|
|||
Loading…
Reference in a new issue