Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 16:18:11 -05:00
Code Issues 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
Show stats 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%;
li {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box;
cursor: pointer;
display: flex;
padding: $small;
flex-direction: column;
width: 100%;
svg {
fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
.element-list-body {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box;
display: flex;
width: 62px;
}
.element-icon,
.sublevel-element {
padding: $small;
width: 100%;
svg {
fill: $color-gray-darker;
fill: $color-gray;
height: 13px;
margin-right: 8px;
width: 13px;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $color-gray-darker;
transform: rotate(90deg);
width: 12px;
.element-actions {
align-items: center;
display: flex;
width: 62px;
}
&:hover {
.element-icon,
.sublevel-element {
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 {
.toggle-content {
&:hover {
svg {
transform: rotate(270deg);
fill: $color-white;
}
}
}
}
&.group {
span {
color: darken($color-gray-darker, 8%);
font-size: $fs13;
}
&.open {
&.selected {
background-color: lighten($color-gray-darker, 5%);
.toggle-content {
.element-icon {
svg {
transform: rotate(270deg);
}
}
svg {
fill: $color-primary;
}
}
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;
}
}
&:hover {
border-color: $color-gray-light;
.element-icon {
.selected {
svg {
fill: $color-gray-lighter;
@ -302,8 +297,21 @@
}
span {
color: $color-gray-lighter;
&:hover {
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))
:on-click select
:class (when selected? "selected")}
[:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility}
i/eye]
[:div.block-element {:class (when (:blocked item) "selected")
[:div.element-list-body
[:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected")
:on-click toggle-visibility}
i/eye]
[:div.block-element {:class (when (:blocked item) "selected")
:on-click toggle-blocking}
i/lock]]
[:div.element-icon (shapes/render item)]
[:span (or (:name item)
(:id item))]])))
i/lock]]
[:div.element-icon (shapes/render item)]
[:span (or (:name item)
(:id item))]]])))
(def ^:static ^:private layer-element
(mx/component
@ -173,29 +174,35 @@
(rum/with-key component (:id shape)))
[:li.group.open
[:div.element-actions
[:div.toggle-element i/eye]
[:div.block-element i/lock]
[:div.chain-element i/chain]]
[:div.element-icon i/folder]
[:span "Opened group"]
[:span.toggle-content i/arrow-slide]
[:ul
[: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.element-list-body
[:div.element-actions
[:div.toggle-element i/eye]
[:div.block-element i/lock]
[:div.chain-element i/chain]]
[:div.element-icon i/folder]
[:span "Opened group"]
[:span.toggle-content i/arrow-slide]]
[:ul
[: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-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
[:ul.layers-tools-content
[:li.clone-layer {:on-click copy}