Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 16:30:37 -05:00
Code Issues Activity

add view nav styles

Browse source
This commit is contained in:
elhombretecla 2016-06-26 12:22:34 +02:00 committed by Andrey Antukh
parent 6c26ffecd5
commit fb913fcefc
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
3 changed files with 116 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
resources/styles/main/partials/workspace-bar.scss
View file

@ -218,3 +218,55 @@
}
}
.options-btn {
align-items: center;
border-right: 4px double $soft-ui-border;
display: flex;
margin: 0;
&:last-child {
border: none;
}
li {
align-items: center;
background-color: $secondary-ui-bg;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 30px;
justify-content: center;
margin: 0 $small;
position: relative;
width: 30px;
a {
padding-top: 6px;
}
svg {
fill: $intense-ui-icons;
height: 18px;
width: 18px;
}
&:hover {
background-color: $color-white;
border-color: $soft-ui-border;
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
}
}
}
}

53
resources/styles/view/layouts/main-layout.scss
View file

@ -23,12 +23,65 @@
flex-shrink: 0;
height: 55px;
width: 100%;
@include bp(tablet) {
border-right: 1px solid $soft-ui-border;
border-top: 0;
height: 100%;
width: 70px;
}
}
.view-options-btn {
align-items: center;
display: flex;
margin: auto;
@include bp(tablet) {
flex-direction: column;
}
li {
align-items: center;
background-color: $secondary-ui-bg;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
flex-shrink: 0;
height: 40px;
justify-content: center;
margin: $small;
position: relative;
width: 40px;
a {
padding-top: 6px;
}
svg {
fill: $intense-ui-icons;
height: 24px;
width: 24px;
}
&:hover {
background-color: $color-white;
border-color: $soft-ui-border;
}
&.selected {
background-color: $main-ui-color;
svg {
fill: $color-white;
}
}
}
}
.view-canvas {

12
src/uxbox/view/ui.cljs
View file

@ -12,6 +12,7 @@
[uxbox.common.i18n :refer (tr)]
;; [uxbox.view.ui.loader :refer (loader)]
;; [uxbox.view.ui.lightbox :refer (lightbox)]
[uxbox.main.ui.icons :as i]
[uxbox.common.ui.mixins :as mx]))
;; --- Main App (Component)
@ -20,7 +21,16 @@
[own]
(html
[:section.view-content
[:div.view-nav "NAV"]
[:div.view-nav
[:ul.view-options-btn
[:li.tooltip.tooltip-right
{:alt "sitemap"} i/project-tree]
[:li.tooltip.tooltip-right
{:alt "view interactions"} i/action]
[:li.tooltip.tooltip-right
{:alt "share"} i/export]
[:li.tooltip.tooltip-right
{:alt "save SVG"} i/save]]]
[:div.view-canvas "VIEW CONTENT"]
]
))