3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 12:08:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix group styles

Browse source
This commit is contained in:
Juan de la Cruz 2016-01-17 11:02:59 +01:00
parent 6c0d61278a
commit ee3ed22e2c
2 changed files with 104 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

124
resources/public/styles/partials/settings-bar.scss
View file

@ -195,106 +195,101 @@
width: 100%; width: 100%;
li { li {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
padding: $small; flex-direction: column;
width: 100%; width: 100%;
svg { .element-list-body {
fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
align-items: center; align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box;
display: flex; display: flex;
width: 62px; padding: $small;
} width: 100%;
.element-icon,
.sublevel-element {
svg { svg {
fill: $color-gray-darker; fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
} }
} .element-actions {
align-items: center;
.toggle-content { display: flex;
margin-left: auto; width: 62px;
width: 12px;
svg {
fill: $color-gray-darker;
transform: rotate(90deg);
width: 12px;
} }
&:hover { .element-icon,
.sublevel-element {
svg { svg {
fill: $color-white; fill: $color-gray-darker;
} }
} }
} .toggle-content {
margin-left: auto;
width: 12px;
&.group { svg {
fill: $color-gray-darker;
transform: rotate(90deg);
width: 12px;
}
&.open { &:hover {
.toggle-content {
svg { svg {
transform: rotate(270deg); fill: $color-white;
} }
} }
} }
} &.group {
span { &.open {
color: darken($color-gray-darker, 8%);
font-size: $fs13;
}
&.selected { .toggle-content {
background-color: lighten($color-gray-darker, 5%);
.element-icon { svg {
transform: rotate(270deg);
}
}
svg {
fill: $color-primary;
} }
} }
span { span {
color: $color-primary; color: darken($color-gray-darker, 8%);
font-size: $fs13;
} }
} &.selected {
background-color: lighten($color-gray-darker, 5%);
.selected { .element-icon {
svg {
fill: $color-primary;
}
}
span {
color: $color-primary;
}
svg {
fill: $color-gray-lighter;
} }
} .selected {
&:hover {
border-color: $color-gray-light;
.element-icon {
svg { svg {
fill: $color-gray-lighter; fill: $color-gray-lighter;
@ -302,8 +297,21 @@
} }
span { &:hover {
color: $color-gray-lighter; border-color: $color-gray-light;
.element-icon {
svg {
fill: $color-gray-lighter;
}
}
span {
color: $color-gray-lighter;
}
} }
} }

69
src/uxbox/ui/workspace/toolboxes.cljs
View file

@ -134,16 +134,17 @@
[:li {:key (str (:id item)) [:li {:key (str (:id item))
:on-click select :on-click select
:class (when selected? "selected")} :class (when selected? "selected")}
[:div.element-actions [:div.element-list-body
[:div.toggle-element {:class (when-not (:hidden item) "selected") [:div.element-actions
:on-click toggle-visibility} [:div.toggle-element {:class (when-not (:hidden item) "selected")
i/eye] :on-click toggle-visibility}
[:div.block-element {:class (when (:blocked item) "selected") i/eye]
[:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock]] i/lock]]
[:div.element-icon (shapes/render item)] [:div.element-icon (shapes/render item)]
[:span (or (:name item) [:span (or (:name item)
(:id item))]]))) (:id item))]]])))
(def ^:static ^:private layer-element (def ^:static ^:private layer-element
(mx/component (mx/component
@ -173,29 +174,35 @@
(rum/with-key component (:id shape))) (rum/with-key component (:id shape)))
[:li.group.open [:li.group.open
[:div.element-actions [:div.element-list-body
[:div.toggle-element i/eye] [:div.element-actions
[:div.block-element i/lock] [:div.toggle-element i/eye]
[:div.chain-element i/chain]] [:div.block-element i/lock]
[:div.element-icon i/folder] [:div.chain-element i/chain]]
[:span "Opened group"] [:div.element-icon i/folder]
[:span.toggle-content i/arrow-slide] [:span "Opened group"]
[:ul [:span.toggle-content i/arrow-slide]]
[:li
[:div.element-actions [:ul
[:div.toggle-element i/eye]
[:div.block-element i/lock]] [:li
[:div.sublevel-element i/sublevel] [:div.element-list-body
[:div.element-icon i/box] [:div.element-actions
[:span "Sub layer"]] [:div.toggle-element i/eye]
[:div.block-element i/lock]]
[:div.sublevel-element i/sublevel]
[:div.element-icon i/box]
[:span "Sub layer"]]]
[:li
[:div.element-list-body
[:div.element-actions
[:div.toggle-element i/eye]
[:div.block-element i/lock]]
[:div.sublevel-element i/sublevel]
[:div.element-icon i/box]
[:span "Sub layer"]]]]]]]
[:li
[:div.element-actions
[:div.toggle-element i/eye]
[:div.block-element i/lock]]
[:div.sublevel-element i/sublevel]
[:div.element-icon i/box]
[:span "Sub layer"]]]]]]
[:div.layers-tools [:div.layers-tools
[:ul.layers-tools-content [:ul.layers-tools-content
[:li.clone-layer {:on-click copy} [:li.clone-layer {:on-click copy}