The Open Source kanban (built with Meteor). Keep variable/table/field names camelCase. For translations, only add Pull Request changes to wekan/i18n/en.i18n.json , other translations are done at https://transifex.com/wekan/wekan only.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
wekan/client/components/sidebar/sidebar.styl

226 lines
4.1 KiB

@import 'nib'
.sidebar
position: absolute
top: 0
bottom: 0
right: 0
.sidebar-shadow
position: absolute
top: 0
bottom: 0
right: 0
left: 0
background: darken(white, 3%)
box-shadow: -10px 0px 5px -10px darken(white, 30%)
z-index: 10
.sidebar-content
padding: 12px
margin-bottom: 1.6em
position: absolute
top: 0
bottom: 0
right: 0
left: 0
overflow-x: hidden
overflow-y: auto
.hide-btn
display: none
h3
color: darken(white, 50%)
font-size: 1em
margin-bottom: 10px
font-weight: bold
i.fa
margin-right: 3px
hr
margin: 13px 0
ul.sidebar-list
display: flex
flex-direction: column
li
& > a
display: flex
height: 30px
margin: 0
padding: 4px
border-radius: 3px
align-items: center
&:hover
&, i, .quiet
color white
.member, .card-label
margin-right: 7px
margin-top: 5px
.minicard-edit-button
float: right
padding: 8px
border-radius: 3px
.sidebar-list-item-description
flex: 1
overflow: ellipsis
.fa.fa-check
margin: 0 4px
.minicard
padding: 6px 8px 4px
.minicard-edit-button
float: right
padding: 4px
border-radius: 3px
&:hover
background: #dbdbdb
.sidebar-btn
display: block
margin: 5px 0
padding: 10px
border-radius: 3px
background: darken(white, 10%)
&:hover *
color: white
i.fa
margin-right: 10px
.sidebar-shortcuts
position: absolute
margin-left: 40%
padding: 0
top: 7px
font-size: 0.8em
line-height: 1.6em
color: darken(white, 40%)
.board-sidebar
width: 548px
right: -@width
transition: top .1s, right .1s, width .1s
&.is-open
right: 0
.board-widget h4
margin: 5px 0
.board-widget-activity
margin-right: -4px
.sidebar-tongue
display: block
width: 30px
height: @width
left: -@width
position: absolute
top: 0px
z-index: 15
background: darken(white, 3%)
border-bottom-left-radius: 3px
box-shadow: -4px 0px 7px -4px darken(white, 30%)
color: darken(white, 50%)
transition: left .1s
i.fa
padding: 3px 9px
font-size: 24px
transition: transform 0.5s
.board-sidebar.is-open &
left: -@width + 2px
// XXX Bug: we should add a padding left
&:hover
left: -@width + 5px
i.fa
transform: rotate(180deg)
&.is-hidden,
.board-sidebar.is-open &.is-hidden
z-index: 0
left: 5px
.archived-lists .archived-lists-item
border-top: 1px solid darken(white, 20%)
clear: both
padding: 5px 0
&:first-child
border-top: none
button
float: right
margin: 0
margin: 0 0 5px 5px
padding: 0 10px 0 10px
@media screen and (max-width: 800px)
.board-sidebar
width: 100%
right: -@width
.sidebar-content
.hide-btn
width: 40px
height: @width
position: absolute
right: 5px
top: 5px
display: block
z-index: 15
background: darken(white, 3%)
transition: left .1s
color: darken(white, 50%)
border-radius: 50%
border: 1px solid darken(white, 30%)
box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
color: darken(white, 50%)
i.fa
padding: 8px 16px
font-size: 24px
font-weight: bold
.sidebar-tongue
width: 40px
height: @width
left: -@width - 7px
top: 5px
display: block
border-radius: 50%
border: 1px solid darken(white, 30%)
box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
color: darken(white, 50%)
.board-sidebar.is-open &
display: none
i.fa
padding: 8px 0px 8px 16px
font-weight: bold
#jsBoardOrgs, #jsBoardTeams
width: 90%
.leaveBoardBtn
background-color: green !important
.cancelLeaveBoardBtn
margin-left: 5% !important
background-color: red !important