mirror of
https://github.com/penpot/penpot.git
synced 2025-08-04 10:38:31 +02:00
♻️ Remove new-css-system from sitemap
This commit is contained in:
Eva
Alonso Torres
parent
c439de49a5
commit
831f79d651
4 changed files with 269 additions and 450 deletions
|
|
@ -4,136 +4,7 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
#sitemap,
|
||||
.sitemap {
|
||||
height: var(--height, 200px);
|
||||
|
||||
.element-list,
|
||||
.pages-list {
|
||||
li {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.page-icon {
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 13px;
|
||||
margin-right: $size-1;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
max-width: 75%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
align-items: center;
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 15px;
|
||||
margin-left: $size-1;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
|
||||
.page-icon {
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.page-icon {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.page-icon {
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.element-list-body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: $size-1 $size-2;
|
||||
transition: none;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-60;
|
||||
height: 13px;
|
||||
margin-right: 8px;
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
.element-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
// TODO: revisit this
|
||||
background-color: $color-gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .resize-area {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.add-page,
|
||||
.collapse-pages {
|
||||
.add-page {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border-radius: $br3;
|
||||
|
|
@ -216,11 +87,3 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-pages {
|
||||
margin-left: $size-2;
|
||||
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@
|
|||
grid-template-rows: 100%;
|
||||
height: calc(100% - 2px);
|
||||
|
||||
.tool-window,
|
||||
.sitemap {
|
||||
.tool-window {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $color-gray-60;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.sitemap
|
||||
(:require-macros [app.main.style :as stl :refer [css]])
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
[{:keys [page index deletable? selected? editing? hovering?]}]
|
||||
(let [input-ref (mf/use-ref)
|
||||
id (:id page)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
delete-fn (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
|
||||
navigate-fn (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dw/go-to-page id)))
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
|
@ -116,63 +115,40 @@
|
|||
(dom/select-text! edit-input))
|
||||
nil)))
|
||||
|
||||
[:*
|
||||
[:li {:class (if new-css-system
|
||||
(dom/classnames
|
||||
(css :page-element) true
|
||||
(css :selected) selected?
|
||||
(css :dnd-over-top) (= (:over dprops) :top)
|
||||
(css :dnd-over-bot) (= (:over dprops) :bot))
|
||||
(dom/classnames
|
||||
:selected selected?
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot)))
|
||||
:ref dref}
|
||||
[:div
|
||||
{:class (if new-css-system
|
||||
(dom/classnames
|
||||
(css :element-list-body) true
|
||||
(css :selected) selected?)
|
||||
(dom/classnames
|
||||
:element-list-body true
|
||||
:hover hovering?
|
||||
:selected selected?))
|
||||
:data-test (dm/str "page-" id)
|
||||
:tab-index "0"
|
||||
:on-click navigate-fn
|
||||
:on-double-click on-double-click
|
||||
:on-context-menu on-context-menu}
|
||||
[:div {:class (if new-css-system
|
||||
(dom/classnames (css :page-icon) true)
|
||||
(dom/classnames :page-icon true))}
|
||||
(if new-css-system
|
||||
i/document-refactor
|
||||
i/file-html)]
|
||||
(if editing?
|
||||
[:*
|
||||
[:input {:class (if new-css-system
|
||||
(dom/classnames (css :element-name) true)
|
||||
(dom/classnames :element-name true))
|
||||
:type "text"
|
||||
:ref input-ref
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:auto-focus true
|
||||
:default-value (:name page "")}]]
|
||||
[:*
|
||||
[:span {:class (if new-css-system
|
||||
(dom/classnames (css :page-name) true)
|
||||
(dom/classnames :page-name true))}
|
||||
(:name page)]
|
||||
[:div
|
||||
{:class (if new-css-system
|
||||
(dom/classnames (css :page-actions) true)
|
||||
(dom/classnames :page-actions true))}
|
||||
(when (and deletable? (not workspace-read-only?))
|
||||
[:button {:on-click on-delete}
|
||||
(if new-css-system
|
||||
i/delete-refactor
|
||||
i/trash)])]])]]]))
|
||||
[:li {:class (stl/css-case
|
||||
:page-element true
|
||||
:selected selected?
|
||||
:dnd-over-top (= (:over dprops) :top)
|
||||
:dnd-over-bot (= (:over dprops) :bot))
|
||||
:ref dref}
|
||||
[:div {:class (stl/css-case
|
||||
:element-list-body true
|
||||
:hover hovering?
|
||||
:selected selected?)
|
||||
:data-test (dm/str "page-" id)
|
||||
:tab-index "0"
|
||||
:on-click navigate-fn
|
||||
:on-double-click on-double-click
|
||||
:on-context-menu on-context-menu}
|
||||
[:div {:class (stl/css :page-icon)}
|
||||
i/document-refactor]
|
||||
|
||||
(if editing?
|
||||
[:*
|
||||
[:input {:class (stl/css :element-name)
|
||||
:type "text"
|
||||
:ref input-ref
|
||||
:on-blur on-blur
|
||||
:on-key-down on-key-down
|
||||
:auto-focus true
|
||||
:default-value (:name page "")}]]
|
||||
[:*
|
||||
[:span {:class (stl/css :page-name)}
|
||||
(:name page)]
|
||||
[:div {:class (stl/css :page-actions)}
|
||||
(when (and deletable? (not workspace-read-only?))
|
||||
[:button {:on-click on-delete}
|
||||
i/delete-refactor])]])]]))
|
||||
|
||||
;; --- Page Item Wrapper
|
||||
|
||||
|
|
@ -202,12 +178,8 @@
|
|||
(let [pages (:pages file)
|
||||
deletable? (> (count pages) 1)
|
||||
editing-page-id (mf/deref refs/editing-page-item)
|
||||
current-page-id (mf/use-ctx ctx/current-page-id)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:ul
|
||||
{:class (if new-css-system
|
||||
(dom/classnames (css :pages-list) true)
|
||||
(dom/classnames :pages-list true))}
|
||||
current-page-id (mf/use-ctx ctx/current-page-id)]
|
||||
[:ul {:class (stl/css :page-list)}
|
||||
[:& hooks/sortable-container {}
|
||||
(for [[index page-id] (d/enumerate pages)]
|
||||
[:& page-item-wrapper
|
||||
|
|
@ -232,42 +204,25 @@
|
|||
(fn [event]
|
||||
(st/emit! (dw/create-page {:file-id file-id :project-id project-id}))
|
||||
(-> event dom/get-current-target dom/blur!)))
|
||||
|
||||
size (if show-pages? size 32)
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)]
|
||||
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
[:div {:class (stl/css :sitemap)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (dom/classnames (css :sitemap) true)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not show-pages?)
|
||||
:on-collapsed toggle-pages
|
||||
:clickable-all? true
|
||||
:title (tr "workspace.sidebar.sitemap")
|
||||
:class (stl/css :title-spacing-sitemap)}
|
||||
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not show-pages?)
|
||||
:on-collapsed toggle-pages
|
||||
:clickable-all? true
|
||||
:title (tr "workspace.sidebar.sitemap")
|
||||
:class (css :title-spacing-sitemap)}
|
||||
(if ^boolean read-only?
|
||||
[:di {:class (stl/css :view-only-mode)}
|
||||
(tr "labels.view-only")]
|
||||
[:button {:class (stl/css :add-page)
|
||||
:on-click on-create}
|
||||
i/add-refactor])]
|
||||
|
||||
(if ^boolean read-only?
|
||||
[:div
|
||||
{:class (dom/classnames (css :view-only-mode) true)}
|
||||
(tr "labels.view-only")]
|
||||
[:button {:class (stl/css :add-page)
|
||||
:on-click on-create}
|
||||
i/add-refactor])]
|
||||
|
||||
[:div {:class (dom/classnames (css :tool-window-content) true)}
|
||||
[:& pages-list {:file file :key (:id file)}]]]
|
||||
|
||||
[:div#sitemap.tool-window {:style #js {"--height" (str size "px")}}
|
||||
[:div.tool-window-bar
|
||||
[:span.pages-title (tr "workspace.sidebar.sitemap")]
|
||||
(if ^boolean read-only?
|
||||
[:div.view-only-mode (tr "labels.view-only")]
|
||||
[:div.add-page {:on-click on-create} i/close])
|
||||
[:div.collapse-pages {:on-click toggle-pages
|
||||
:style {:transform (when (not show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
|
||||
|
||||
[:div.tool-window-content
|
||||
[:& pages-list {:file file :key (:id file)}]]])))
|
||||
[:div {:class (stl/css :tool-window-content)}
|
||||
[:& pages-list {:file file :key (:id file)}]]]))
|
||||
|
|
|
|||
|
|
@ -13,226 +13,228 @@
|
|||
flex: 1;
|
||||
width: 100%;
|
||||
height: var(--height, $s-200);
|
||||
.title-bar {
|
||||
.title {
|
||||
margin-left: $s-2;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-page {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
margin-right: $s-12;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.title {
|
||||
margin-left: $s-2;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
||||
.add-page {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
padding: 0;
|
||||
margin-right: $s-12;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.view-only-mode {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: $s-1 solid var(--tag-background-color);
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
|
||||
.view-only-mode {
|
||||
@include flexCenter;
|
||||
@include titleTipography;
|
||||
height: $s-20;
|
||||
padding: $s-4 $s-6;
|
||||
border: $s-1 solid var(--tag-background-color);
|
||||
border-radius: $br-6;
|
||||
color: var(--tag-background-color);
|
||||
}
|
||||
|
||||
.resize-area {
|
||||
position: absolute;
|
||||
bottom: calc(-1 * $s-8);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $s-12;
|
||||
border-top: $s-2 solid var(--resize-area-border-color);
|
||||
background-color: var(--resize-area-background-color);
|
||||
cursor: ns-resize;
|
||||
&:hover {
|
||||
border-color: var(--resize-area-border-color);
|
||||
}
|
||||
.resize-area {
|
||||
position: absolute;
|
||||
bottom: calc(-1 * $s-8);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $s-12;
|
||||
border-top: $s-2 solid var(--resize-area-border-color);
|
||||
background-color: var(--resize-area-background-color);
|
||||
cursor: ns-resize;
|
||||
&:hover {
|
||||
border-color: var(--resize-area-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.tool-window-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(-38px + var(--height, $s-200));
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.pages-list {
|
||||
width: 100%;
|
||||
max-height: $s-152;
|
||||
margin-bottom: $s-12;
|
||||
}
|
||||
|
||||
.page-element {
|
||||
@include titleTipography;
|
||||
min-height: $s-32;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
&.dnd-over-top {
|
||||
border-top: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
.tool-window-content {
|
||||
&.dnd-over-bot {
|
||||
border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
.dnd-over > .element-list-body {
|
||||
border: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
.element-list-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: overlay;
|
||||
height: calc(-38px + var(--height, $s-200));
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
|
||||
.pages-list {
|
||||
width: 100%;
|
||||
max-height: $s-152;
|
||||
margin-bottom: $s-12;
|
||||
.page-element {
|
||||
@include titleTipography;
|
||||
min-height: $s-32;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
&.dnd-over-top {
|
||||
border-top: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
&.dnd-over-bot {
|
||||
border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
.dnd-over > .element-list-body {
|
||||
border: $s-1 solid var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
.element-list-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
padding: 0 $s-12 0 0;
|
||||
transition: none;
|
||||
color: var(--layer-row-foreground-color);
|
||||
.page-name {
|
||||
@include textEllipsis;
|
||||
flex-grow: 1;
|
||||
padding-left: $s-2;
|
||||
}
|
||||
.page-icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.page-actions {
|
||||
height: $s-32;
|
||||
button {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: 100%;
|
||||
opacity: $op-0;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-name {
|
||||
@include textEllipsis;
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
input.element-name {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-8;
|
||||
border: 1px solid var(--input-border-color-focus);
|
||||
color: var(--layer-row-foreground-color);
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&.on-drag {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-drag);
|
||||
background-color: var(--layer-row-background-color-drag);
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-selected);
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.hover {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-hover);
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-focus);
|
||||
border: 1px solid var(--layer-row-border-color-focus);
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
.element-list-body {
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-hidden);
|
||||
background-color: var(--layer-row-background-color-hidden);
|
||||
opacity: $op-7;
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hidden);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-hidden);
|
||||
}
|
||||
}
|
||||
padding: 0 $s-12 0 0;
|
||||
transition: none;
|
||||
color: var(--layer-row-foreground-color);
|
||||
.page-name {
|
||||
@include textEllipsis;
|
||||
flex-grow: 1;
|
||||
padding-left: $s-2;
|
||||
}
|
||||
.page-icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
width: $s-24;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
.page-actions {
|
||||
height: $s-32;
|
||||
button {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: 100%;
|
||||
opacity: $op-0;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
color: transparent;
|
||||
fill: none;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-name {
|
||||
@include textEllipsis;
|
||||
color: var(--layer-row-foreground-color-focus);
|
||||
}
|
||||
input.element-name {
|
||||
@include textEllipsis;
|
||||
@include titleTipography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
padding-left: $s-6;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--input-border-color-focus);
|
||||
color: var(--layer-row-foreground-color);
|
||||
}
|
||||
}
|
||||
.title-spacing-sitemap {
|
||||
padding-left: $s-8;
|
||||
margin-top: $s-8;
|
||||
&:active,
|
||||
&.on-drag {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-drag);
|
||||
background-color: var(--layer-row-background-color-drag);
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-drag);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-selected);
|
||||
background-color: var(--layer-row-background-color-selected);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.hover {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-hover);
|
||||
background-color: var(--layer-row-background-color-hover);
|
||||
box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-focus);
|
||||
border: $s-1 solid var(--layer-row-border-color-focus);
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
.element-list-body {
|
||||
outline: none;
|
||||
.page-actions button {
|
||||
opacity: $op-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
.element-list-body {
|
||||
color: var(--layer-row-foreground-color-hidden);
|
||||
background-color: var(--layer-row-background-color-hidden);
|
||||
opacity: $op-7;
|
||||
.page-actions button {
|
||||
svg {
|
||||
stroke: var(--layer-row-foreground-color-hidden);
|
||||
}
|
||||
}
|
||||
.page-icon svg {
|
||||
stroke: var(--layer-row-foreground-color-hidden);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-spacing-sitemap {
|
||||
padding-left: $s-8;
|
||||
margin-top: $s-8;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue