github-mirrors/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-04-19 11:44:42 -04:00
Code Issues Projects Releases Packages Wiki Activity

Converted Stylus to CSS. Removed Stylus. This change removed many error messages.

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2022-05-17 12:36:10 +03:00
parent 01a1a2cdce
commit 072778b9aa
104 changed files with 9370 additions and 7642 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.meteor/packages
View file

@ -68,7 +68,6 @@ cfs:gridfs
rzymek:fullcalendar
msavin:usercache
# Keep stylus in 1.1.0, because building v2 takes extra 52 minutes.
coagmano:stylus@1.1.0!
meteorhacks:subs-manager
meteorhacks:aggregate@1.3.0
wekan-markdown

1
.meteor/versions
View file

@ -39,7 +39,6 @@ cfs:tempstore@0.1.6
cfs:upload-http@0.0.20
cfs:worker@0.1.5
check@1.3.1
coagmano:stylus@1.1.0
coffeescript@2.4.1
coffeescript-compiler@2.4.1
communitypackages:picker@1.1.0

101
client/components/activities/activities.css Normal file
View file

@ -0,0 +1,101 @@
.activity-title {
margin: 0 0.5em 0.8em;
display: flex;
justify-content: space-between;
}
.reactions-popup .add-comment-reaction {
display: inline-block;
cursor: pointer;
border-radius: 5px;
font-size: 22px;
text-align: center;
line-height: 30px;
width: 40px;
}
.reactions-popup .add-comment-reaction:hover {
background-color: #b0c4de;
}
.activities {
clear: both;
}
.activities .activity {
margin: 0.5px 0;
padding: 6px 0;
display: flex;
}
.activities .activity .member {
width: 32px;
height: 32px;
}
.activities .activity .activity-member {
font-weight: 700;
}
.activities .activity .activity-desc {
word-wrap: break-word;
overflow: hidden;
flex: 1;
align-self: center;
margin: 0;
margin-left: 3px;
overflow: hidden;
word-break: break-word;
}
.activities .activity .activity-desc .activity-comment {
display: block;
border-radius: 3px;
background: #fff;
text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
}
.activities .activity .activity-desc .reactions {
display: flex;
margin-top: 5px;
gap: 5px;
}
.activities .activity .activity-desc .reactions .open-comment-reaction-popup {
display: flex;
align-items: center;
text-decoration: none;
height: 24px;
}
.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o {
font-size: 17px;
font-weight: 500;
margin-left: 2px;
}
.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus {
font-size: 8px;
margin-top: -7px;
margin-left: 1px;
}
.activities .activity .activity-desc .reactions .reaction {
cursor: pointer;
border: 1px solid #808080;
border-radius: 15px;
display: flex;
padding: 2px 5px;
}
.activities .activity .activity-desc .reactions .reaction.selected {
background-color: #b0c4de;
}
.activities .activity .activity-desc .reactions .reaction:hover {
background-color: #b0c4de;
}
.activities .activity .activity-desc .reactions .reaction .reaction-count {
font-size: 12px;
}
.activities .activity .activity-desc .activity-checklist {
display: block;
border-radius: 3px;
background: #fff;
text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
}
.activities .activity .activity-desc .activity-meta {
font-size: 0.8em;
color: #999;
}

105
client/components/activities/activities.styl
View file

@ -1,105 +0,0 @@
@import 'nib'
.activity-title
margin: 0 0.5em 0.8em
display: flex
justify-content:space-between
.reactions-popup
.add-comment-reaction
display: inline-block
cursor: pointer
border-radius: 5px
font-size: 22px
text-align: center
line-height: 30px
width: 40px
&:hover {
background-color: #b0c4de
}
.activities
clear: both
.activity
margin: 0.5px 0
padding: 6px 0;
display: flex
.member
width: 32px
height: @width
.activity-member
font-weight: 700
.activity-desc
word-wrap: break-word
overflow: hidden
flex: 1
align-self: center
margin: 0
margin-left: 3px
overflow: hidden;
word-break: break-word;
.activity-comment
display: block
border-radius: 3px
background: white
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,.2)
margin-top: 5px
padding: 5px
.reactions
display: flex
margin-top: 5px
gap: 5px
.open-comment-reaction-popup
display: flex
align-items: center
text-decoration: none
height: 24px;
i.fa.fa-smile-o
font-size: 17px
font-weight: 500
margin-left: 2px
i.fa.fa-plus
font-size: 8px;
margin-top: -7px;
margin-left: 1px;
.reaction
cursor: pointer
border: 1px solid grey
border-radius: 15px
display: flex
padding: 2px 5px
&.selected {
background-color: #b0c4de
}
&:hover {
background-color: #b0c4de
}
.reaction-count
font-size: 12px
.activity-checklist
display: block
border-radius: 3px
background: white
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,.2)
margin-top: 5px
padding: 5px
.activity-meta
font-size: 0.8em
color: darken(white, 40%)

65
client/components/activities/comments.css Normal file
View file

@ -0,0 +1,65 @@
.new-comment {
position: relative;
margin: 0 0 20px 38px;
}
.new-comment .member {
opacity: 0.7;
position: absolute;
top: 1px;
left: -38px;
}
.new-comment.is-open .member {
opacity: 1;
}
.new-comment.is-open .helper {
display: inline-block;
}
.new-comment.is-open textarea {
min-height: 100px;
color: #4d4d4d;
cursor: auto;
overflow: hidden;
word-wrap: break-word;
}
.new-comment .too-long {
margin-top: 8px;
}
.new-comment textarea {
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
height: 36px;
margin: 4px 4px 6px 0;
padding: 9px 11px;
width: 100%;
}
.new-comment textarea:hover,
.new-comment textarea:is-open {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.33);
border: 0;
cursor: pointer;
}
.new-comment textarea:is-open {
cursor: auto;
}
.comment-item {
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
color: #8c8c8c;
height: 36px;
margin: 4px 4px 6px 0;
width: 92%;
}
.comment-item:hover {
background: #e0e0e0;
}
.comment-item.add-comment {
display: flex;
margin: 5px;
}
.comment-item.add-comment a {
display: block;
margin: auto;
}

67
client/components/activities/comments.styl
View file

@ -1,67 +0,0 @@
@import 'nib'
.new-comment
position: relative
margin: 0 0 20px 38px
.member
opacity: .7
position: absolute
top: 1px
left: -38px
&.is-open
.member
opacity: 1
.helper
display: inline-block
textarea
min-height: 100px
color: #4d4d4d
cursor: auto
overflow: hidden
word-wrap: break-word
.too-long
margin-top: 8px
textarea
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
height: 36px
margin: 4px 4px 6px 0
padding: 9px 11px
width: 100%
&:hover,
&:is-open
background-color: #fff
box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
border: 0
cursor: pointer
&:is-open
cursor: auto
.comment-item
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
color: #8c8c8c
height: 36px
margin: 4px 4px 6px 0
width: 92%
&:hover
background: darken(white, 12%)
&.add-comment
display: flex
margin: 5px
a
display: block
margin: auto

169
client/components/boards/boardBody.css Normal file
View file

@ -0,0 +1,169 @@
.board-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.board-wrapper .board-canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: margin 0.1s;
overflow-y: auto;
}
.board-wrapper .board-canvas.is-sibling-sidebar-open {
margin-right: 248px;
}
.board-wrapper .board-canvas .board-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
top: -100px;
right: -400px;
background: #000;
opacity: 0.33;
animation: fadeIn 0.2s;
z-index: 16;
}
.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
display: none;
}
@media screen and (max-width: 800px) {
.board-wrapper .board-canvas .swimlane {
border-bottom: 1px solid #ccc;
display: flex;
flex-direction: column;
margin: 0;
padding: 0 0px 0px 0;
overflow-x: hidden;
overflow-y: auto;
}
}
.calendar-event-green {
background: #3cb500 !important;
border-color: #2a8000;
color: #fff !important;
}
.calendar-event-yellow {
background: #fad900 !important;
border-color: #c7ac00;
color: #000 !important;
}
.calendar-event-orange {
background: #ff9f19 !important;
border-color: #cc7c14;
color: #000 !important;
}
.calendar-event-red {
background: #eb4646 !important;
border-color: #b83737;
color: #fff !important;
}
.calendar-event-purple {
background: #a632db !important;
border-color: #7d26a6;
color: #fff !important;
}
.calendar-event-blue {
background: #0079bf !important;
border-color: #005a8a;
color: #fff !important;
}
.calendar-event-pink {
background: #ff78cb !important;
border-color: #cc62a3;
color: #000 !important;
}
.calendar-event-sky {
background: #00c2e0 !important;
border-color: #0094ab;
color: #fff !important;
}
.calendar-event-black {
background: #4d4d4d !important;
border-color: #1a1a1a;
color: #fff !important;
}
.calendar-event-lime {
background: #51e898 !important;
border-color: #3eb375;
color: #000 !important;
}
.calendar-event-silver {
background: #c0c0c0 !important;
border-color: #8c8c8c;
color: #000 !important;
}
.calendar-event-peachpuff {
background: #ffdab9 !important;
border-color: #ccaf95;
color: #000 !important;
}
.calendar-event-crimson {
background: #dc143c !important;
border-color: #a8112f;
color: #fff !important;
}
.calendar-event-plum {
background: #dda0dd !important;
border-color: #a87ba8;
color: #000 !important;
}
.calendar-event-darkgreen {
background: #006400 !important;
border-color: #003000;
color: #fff !important;
}
.calendar-event-slateblue {
background: #6a5acd !important;
border-color: #4f4399;
color: #fff !important;
}
.calendar-event-magenta {
background: #f0f !important;
border-color: #c0c;
color: #fff !important;
}
.calendar-event-gold {
background: #ffd700 !important;
border-color: #ca0;
color: #000 !important;
}
.calendar-event-navy {
background: #000080 !important;
border-color: #003;
color: #fff !important;
}
.calendar-event-gray {
background: #808080 !important;
border-color: #333;
color: #fff !important;
}
.calendar-event-saddlebrown {
background: #8b4513 !important;
border-color: #572b0c;
color: #fff !important;
}
.calendar-event-paleturquoise {
background: #afeeee !important;
border-color: #8ababa;
color: #000 !important;
}
.calendar-event-mistyrose {
background: #ffe4e1 !important;
border-color: #ccb8b6;
color: #000 !important;
}
.calendar-event-indigo {
background: #4b0082 !important;
border-color: #2b004d;
color: #fff !important;
}

133
client/components/boards/boardBody.styl
View file

@ -1,133 +0,0 @@
@import 'nib'
position()
if arguments[0] == cover || arguments[0] == fixed-cover
if arguments[0] == cover
position: absolute
else
position: fixed
left: 0
right: 0
top: 0
bottom: 0
else
position: arguments
.board-wrapper
position: cover
overflow-x: hidden
overflow-y: hidden
.board-canvas
position: cover
transition: margin .1s
overflow-y: auto
&.is-sibling-sidebar-open
margin-right: 248px
.board-overlay
position: fixed-cover
top: -100px
right: -400px
background: black
opacity: 0.33
animation: fadeIn 0.2s
z-index: 16
&.is-dragging-active
.open-minicard-composer,
.minicard-wrapper.is-checked
display: none
@media screen and (max-width: 800px)
.board-wrapper
.board-canvas
.swimlane
border-bottom: 1px solid #CCC
display: flex
flex-direction: column
margin: 0
padding: 0 0px 0px 0
overflow-x: hidden
overflow-y: auto
calendar-event-color(background, borderColor, color...)
background: background !important
border-color: borderColor
if color
color: color !important //overwrite text for better visibility
.calendar-event-green
calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility
.calendar-event-yellow
calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility
.calendar-event-orange
calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility
.calendar-event-red
calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility
.calendar-event-purple
calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility
.calendar-event-blue
calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility
.calendar-event-pink
calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility
.calendar-event-sky
calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility
.calendar-event-black
calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility
.calendar-event-lime
calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility
.calendar-event-silver
calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility
.calendar-event-peachpuff
calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility
.calendar-event-crimson
calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility
.calendar-event-plum
calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility
.calendar-event-darkgreen
calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility
.calendar-event-slateblue
calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility
.calendar-event-magenta
calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility
.calendar-event-gold
calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility
.calendar-event-navy
calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility
.calendar-event-gray
calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility
.calendar-event-saddlebrown
calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility
.calendar-event-paleturquoise
calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility
.calendar-event-mistyrose
calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility
.calendar-event-indigo
calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility

2176
client/components/boards/boardColors.css Normal file
View file

File diff suppressed because it is too large Load diff

1232
client/components/boards/boardColors.styl
View file

File diff suppressed because it is too large Load diff

23
client/components/boards/boardHeader.css Normal file
View file

@ -0,0 +1,23 @@
.integration-form {
padding: 5px;
border-bottom: 1px solid #ccc;
}
.flex,
.option {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.option {
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
}

22
client/components/boards/boardHeader.styl
View file

@ -1,22 +0,0 @@
.integration-form
padding: 5px
border-bottom: 1px solid #ccc
.flex
display: -webkit-box
display: -moz-box
display: -webkit-flex
display: -moz-flex
display: -ms-flexbox
display: flex
.option
@extends .flex
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;

280
client/components/boards/boardsList.css Normal file
View file

@ -0,0 +1,280 @@
.board-list {
margin: 0 8px;
}
.board-list li {
float: left;
color: #dedede; /* li same color as background grey */
width: 20%;
box-sizing: border-box;
position: relative;
}
.board-list li.placeholder:after {
content: '';
display: block;
background: #ccc;
border-radius: 3px;
height: 106px;
margin: 8px;
}
.board-list li.ui-sortable-helper {
cursor: grabbing;
transform: rotate(4deg);
display: block !important;
}
.board-list li.starred .fa-star,
.board-list li.starred .fa-star-o {
opacity: 1;
}
.board-list .board-list-item {
overflow: hidden;
background-color: #999;
color: #f6f6f6;
min-height: 100px;
font-size: 16px;
line-height: 22px;
border-radius: 3px;
display: block;
font-weight: 700;
padding: 8px;
margin: 8px;
position: relative;
text-decoration: none;
word-wrap: break-word;
}
.board-list .board-list-item.template-container {
border: 4px solid #fff;
}
.board-list .board-list-item.tile {
background-size: auto;
background-repeat: repeat;
}
.board-list .board-list-item-sub-name {
color: rgba(255,255,255,0.5);
display: block;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
.board-list .board-list-item-desc {
color: #fff;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.board-list .js-add-board {
text-align: center;
}
.board-list .js-add-board .label {
font-weight: normal;
line-height: 56px;
}
.board-list .js-add-board :hover {
background-color: #939393;
}
.board-list .fa-star,
.board-list .fa-star-o {
bottom: 0;
font-size: 14px;
height: 18px;
line-height: 18px;
opacity: 0;
padding: 9px 9px;
position: absolute;
right: 0;
top: 0;
transition-duration: 0.15s;
transition-property: color, font-size, background;
}
.board-list .fa-circle {
bottom: 0;
font-size: 10px;
height: 10px;
line-height: 10px;
padding: 9px 9px;
position: absolute;
right: 0;
transition-duration: 0.15s;
transition-property: color, font-size, background;
}
.board-list .has-overtime-card-active {
color: #eb4646 !important;
}
.board-list .no-overtime-card-active {
color: #3cb500 !important;
}
.board-list .is-star-active {
color: #fff;
}
.board-list .fa-clone {
position: absolute;
bottom: 0;
font-size: 14px;
height: 18px;
line-height: 18px;
opacity: 0;
right: 0;
padding: 9px 9px;
transition-duration: 0.15s;
transition-property: color, font-size, background;
}
.board-list .fa-archive {
position: absolute;
bottom: 0;
font-size: 14px;
height: 18px;
line-height: 18px;
opacity: 0;
left: 0;
padding: 9px 9px;
transition-duration: 0.15s;
transition-property: color, font-size, background;
}
.board-list li:hover a:hover .fa-star,
.board-list li:hover a:hover .fa-clone,
.board-list li:hover a:hover .fa-archive,
.board-list li:hover a:hover .fa-star-o {
color: #fff;
}
.board-list li:hover a .fa-star,
.board-list li:hover a .fa-clone,
.board-list li:hover a .fa-archive,
.board-list li:hover a .fa-star-o {
color: #fff;
opacity: 0.75;
}
.board-list li:hover a .fa-star:hover,
.board-list li:hover a .fa-clone:hover,
.board-list li:hover a .fa-archive:hover,
.board-list li:hover a .fa-star-o:hover {
font-size: 18px;
opacity: 1;
}
.board-list li:hover a .fa-star.is-star-active,
.board-list li:hover a .fa-clone.is-star-active,
.board-list li:hover a .fa-archive.is-star-active,
.board-list li:hover a .fa-star-o.is-star-active {
opacity: 1;
}
.board-backgrounds-list .board-background-select {
box-sizing: border-box;
display: block;
float: left;
width: 50%;
padding-top: 12px;
position: relative;
z-index: 1;
}
.board-backgrounds-list .board-background-select:nth-child(-n + 2) {
padding-top: 0;
}
.board-backgrounds-list .board-background-select:nth-child(2n) {
padding-left: 6px;
}
.board-backgrounds-list .board-background-select:nth-child(2n+1) {
padding-right: 6px;
}
.board-backgrounds-list .board-background-select .background-box {
color: #fff;
border-radius: 3px;
background-size: cover;
display: block;
height: 74px;
position: relative;
width: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.board-backgrounds-list .board-background-select .background-box i.fa-check {
font-size: 25px;
color: #fff;
}
@media screen and (max-width: 800px) {
.board-list {
height: 100%;
overflow: scroll;
}
.board-list li {
width: 50%;
}
.board-list .board-list-item {
overflow: hidden;
height: 8rem;
}
.board-list .board-list-item-sub-name {
position: relative;
top: -100px;
left: -100px;
}
.board-list .board-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 24px;
}
}
@media screen and (max-width: 360px) {
li {
width: 100%;
}
.board-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 24px;
}
}
.AllBoardTeamsOrgs {
list-style-type: none;
overflow: hidden;
}
.AllBoardTeams,
.AllBoardOrgs,
.AllBoardBtns {
float: left;
}
.js-AllBoardOrgs {
margin-left: 16px;
}
.AllBoardTeams {
margin-left: 16px;
}
.AllBoardButtonsContainer {
margin: 16px;
}
#filterBtn,
#resetBtn {
display: inline;
}
.js-board {
display: block;
}
.minicard-members {
padding: 6px 0 6px 8px;
width: 100%;
margin-bottom: 2px;
margin-left: -4px;
display: inline-block;
}
.minicard-lists {
margin: 0 auto;
max-width: 95%;
height: 100%;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap .item {
margin: 2px;
padding-right: 6px;
text-align: center;
}

276
client/components/boards/boardsList.styl
View file

@ -1,276 +0,0 @@
@import 'nib'
$spaceBetweenTiles = 16px
.board-list
margin: 0 ($spaceBetweenTiles/2)
li
float: left
width: 20%
box-sizing: border-box
position: relative
&.placeholder:after
content: '';
display: block;
background: darken(white, 20%)
border-radius: 3px;
height: 106px;
margin: 8px;
&.ui-sortable-helper
cursor: grabbing
transform: rotate(4deg)
display: block !important
&.starred
.fa-star,
.fa-star-o
opacity: 1
.board-list-item
overflow: hidden;
background-color: #999
color: #f6f6f6
min-height: 100px
font-size: 16px
line-height: 22px
border-radius: 3px
display: block
font-weight: 700
padding: 8px
margin: ($spaceBetweenTiles/2)
position: relative
text-decoration: none
word-wrap: break-word
&.template-container
border: 4px solid #fff
&.tile
background-size: auto
background-repeat: repeat
.board-list-item-sub-name
color: rgba(255, 255, 255, .5)
display: block
font-size: 14px
font-weight: 400
line-height: 22px
.board-list-item-desc
color: #fff
display: block
font-size: 14px
font-weight: 400
line-height: 18px
.js-add-board
text-align:center
.label
font-weight: normal
line-height: 56px
:hover
background-color:#939393
.fa-star,
.fa-star-o
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
padding: 9px 9px
position: absolute
right: 0
top: 0
transition-duration: .15s
transition-property: color, font-size, background
.fa-circle
bottom: 0;
font-size: 10px;
height: 10px;
line-height: 10px;
padding: 9px 9px;
position: absolute;
right: 0;
transition-duration: .15s
transition-property: color, font-size, background
.has-overtime-card-active
color: #eb4646 !important
.no-overtime-card-active
color: #3cb500 !important
.is-star-active
color: white
.fa-clone
position: absolute;
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
right: 0
padding: 9px 9px
transition-duration: .15s
transition-property: color, font-size, background
.fa-archive
position: absolute;
bottom: 0
font-size: 14px
height: 18px
line-height: 18px
opacity: 0
left: 0
padding: 9px 9px
transition-duration: .15s
transition-property: color, font-size, background
li:hover a
&:hover
.fa-star,
.fa-clone,
.fa-archive,
.fa-star-o
color: white
.fa-star,
.fa-clone,
.fa-archive,
.fa-star-o
color: white
opacity: .75
&:hover
font-size: 18px
opacity: 1
&.is-star-active
opacity: 1
.board-backgrounds-list
.board-background-select
box-sizing: border-box
display: block
float: left
width: 50%
padding-top: 12px
position: relative
z-index: 1
&:nth-child(-n + 2)
padding-top: 0
&:nth-child(2n)
padding-left: 6px
&:nth-child(2n+1)
padding-right: 6px
.background-box
color: white
border-radius: 3px
background-size: cover
display: block
height: 74px
position: relative
width: 100%
cursor: pointer
display: flex
align-items: center
justify-content: center
i.fa-check
font-size: 25px
color: white
@media screen and (max-width: 800px)
.board-list
height: 100%
overflow: scroll
li
width: 50%
.board-list-item
overflow: hidden
height: 8rem
.board-list-item-sub-name
position: relative
top: -100px
left: -100px
.board-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px
@media screen and (max-width: 360px)
li
width: 100%
.board-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px
.AllBoardTeamsOrgs
list-style-type: none;
overflow: hidden;
.AllBoardTeams,.AllBoardOrgs,.AllBoardBtns
float: left;
.js-AllBoardOrgs
margin-left: 16px;
.AllBoardTeams
margin-left : 16px;
.AllBoardButtonsContainer
margin: 16px;
#filterBtn,#resetBtn
display: inline;
.js-board
display: block;
.minicard-members
padding: 6px 0 6px 8px
width: 100%
margin-bottom: 2px
margin-left: -4px
display: inline-block
.minicard-lists
margin: 0 auto
max-width: 95%
height: 100%
.flex
display: flex
.flex-wrap
flex-wrap: wrap
.item
margin: 2px;
padding-right: 6px
text-align: center

81
client/components/cards/attachments.css Normal file
View file

@ -0,0 +1,81 @@
.attachments-galery {
display: flex;
flex-wrap: wrap;
}
.attachments-galery .attachment-item {
width: 31.33%;
margin: 10px 1% 0;
text-align: center;
border-radius: 3px;
overflow: auto;
background: #ededed;
min-height: 120px;
}
.attachments-galery .attachment-item:hover {
background: #e0e0e0;
}
.attachments-galery .attachment-item.add-attachment {
display: flex;
align-items: center;
}
.attachments-galery .attachment-item.add-attachment a {
display: block;
margin: auto;
}
.attachments-galery .attachment-item .attachment-thumbnail {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img {
max-height: 100%;
max-width: 100%;
}
.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext {
text-transform: uppercase;
font-size: 1.6em;
}
.attachments-galery .attachment-item .attachment-details {
font-size: 0.75em;
margin: 3px;
}
.attachments-galery .attachment-item .attachment-details .attachment-details-actions a {
display: block;
}
.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu {
padding-top: 10px;
}
.attachment-image-preview {
max-width: 100px;
display: block;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.preview-clipboard-image {
width: 280px;
max-width: 100%;
height: 200px;
display: block;
border: 1px solid #000;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
@media screen and (max-width: 800px) {
.attachments-galery .attachment-item {
width: 48%;
}
.attachments-galery .attachment-item .attachment-thumbnail {
height: 130px;
}
.attachments-galery .attachment-item .attachment-details {
font-size: 1.1em;
}
}
@media screen and (max-width: 360px) {
.attachments-galery .attachment-item {
width: 100%;
}
.attachments-galery .attachment-item .attachment-thumbnail {
height: 200px;
}
}

83
client/components/cards/attachments.styl
View file

@ -1,83 +0,0 @@
@import 'nib'
.attachments-galery
display: flex
flex-wrap: wrap
.attachment-item
width: 33.33% - 2%
margin: 10px 1% 0
text-align: center
border-radius: 3px
overflow: auto
background: darken(white, 7%)
min-height: 120px
&:hover
background: darken(white, 12%)
&.add-attachment
display: flex
align-items: center
a
display: block
margin: auto
.attachment-thumbnail
height: 80px
display: flex
align-items: center
justify-content: center
position: relative
.attachment-thumbnail-img
max-height: 100%
max-width: 100%
.attachment-thumbnail-ext
text-transform: uppercase
font-size: 1.6em
.attachment-details
font-size: 0.75em
margin: 3px
.attachment-details-actions a
display: block
&.attachment-details-menu
padding-top: 10px
.attachment-image-preview
max-width: 100px
display: block
box-shadow: 0 1px 2px rgba(0,0,0,.2)
.preview-clipboard-image
width: 280px
max-width: 100%;
height: 200px
display: block
border: 1px solid black
box-shadow: 0 1px 2px rgba(0,0,0,.2)
@media screen and (max-width: 800px)
.attachments-galery
flex-direction
row
.attachment-item
width: 50% - 2%
.attachment-thumbnail
height: 130px
.attachment-details
font-size: 1.1em
@media screen and (max-width: 360px)
.attachments-galery
.attachment-item
width: 100%
.attachment-thumbnail
height: 200px

67
client/components/cards/cardDate.css Normal file
View file

@ -0,0 +1,67 @@
.card-date {
display: block;
border-radius: 4px;
padding: 1px 3px;
background-color: #dbdbdb;
}
.card-date:hover,
.card-date.is-active {
background-color: #b3b3b3;
}
.card-date.current,
.card-date.almost-due,
.card-date.due,
.card-date.long-overdue {
color: #fff;
}
.card-date.current {
background-color: #5ba639;
}
.card-date.current:hover,
.card-date.current.is-active {
background-color: #46802c;
}
.card-date.almost-due {
background-color: #edc909;
}
.card-date.almost-due:hover,
.card-date.almost-due.is-active {
background-color: #bc9f07;
}
.card-date.due {
background-color: #fa3f00;
}
.card-date.due:hover,
.card-date.due.is-active {
background-color: #c73200;
}
.card-date.long-overdue {
background-color: #fd5d47;
}
.card-date.long-overdue:hover,
.card-date.long-overdue.is-active {
background-color: #fd3e24;
}
.card-date.end-date time::before {
content: "\f253";
}
.card-date.due-date time::before {
content: "\f090";
}
.card-date.start-date time::before {
content: "\f251";
}
.card-date.received-date time::before {
content: "\f08b";
}
.card-date time::before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
-webkit-font-smoothing: antialiased;
margin-right: 0.3em;
}
.customfield-date {
display: block;
border-radius: 4px;
padding: 1px 3px;
}

63
client/components/cards/cardDate.styl
View file

@ -1,63 +0,0 @@
.card-date
display: block
border-radius: 4px
padding: 1px 3px
background-color: #dbdbdb
&:hover, &.is-active
background-color: #b3b3b3
&.current, &.almost-due, &.due, &.long-overdue
color: #fff
&.current
background-color: #5ba639
&:hover, &.is-active
background-color: darken(#5ba639, 10)
&.almost-due
background-color: #edc909
&:hover, &.is-active
background-color: darken(#edc909, 10)
&.due
background-color: #fa3f00
&:hover, &.is-active
background-color: darken(#fa3f00, 10)
&.long-overdue
background-color: #fd5d47
&:hover, &.is-active
background-color: darken(#fd5d47, 7)
&.end-date
time
&::before
content: "\f253" // symbol: fa-hourglass-end
&.due-date
time
&::before
content: "\f090" // symbol: fa-sign-in
&.start-date
time
&::before
content: "\f251" // symbol: fa-hourglass-start
&.received-date
time
&::before
content: "\f08b" // symbol: fa-sign-out
time
&::before
font: normal normal normal 14px/1 FontAwesome
font-size: inherit
-webkit-font-smoothing: antialiased
margin-right: 0.3em
.customfield-date
display: block
border-radius: 4px
padding: 1px 3px

56
client/components/cards/cardDescription.css Normal file
View file

@ -0,0 +1,56 @@
.new-description {
position: relative;
margin: 0 0 20px 0;
}
.new-description.is-open .helper {
display: inline-block;
}
.new-description.is-open textarea {
min-height: 100px;
color: #4d4d4d;
cursor: auto;
overflow: hidden;
word-wrap: break-word;
}
.new-description .too-long {
margin-top: 8px;
}
.new-description textarea {
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
height: 36px;
margin: 4px 4px 6px 0;
padding: 9px 11px;
width: 100%;
}
.new-description textarea:hover,
.new-description textarea:is-open {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.33);
border: 0;
cursor: pointer;
}
.new-description textarea:is-open {
cursor: auto;
}
.description-item {
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
color: #8c8c8c;
height: 36px;
margin: 4px 4px 6px 0;
width: 92%;
}
.description-item:hover {
background: #e0e0e0;
}
.description-item.add-description {
display: flex;
margin: 5px;
}
.description-item.add-description a {
display: block;
margin: auto;
}

59
client/components/cards/cardDescription.styl
View file

@ -1,59 +0,0 @@
@import 'nib'
.new-description
position: relative
margin: 0 0 20px 0
&.is-open
.helper
display: inline-block
textarea
min-height: 100px
color: #4d4d4d
cursor: auto
overflow: hidden
word-wrap: break-word
.too-long
margin-top: 8px
textarea
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
height: 36px
margin: 4px 4px 6px 0
padding: 9px 11px
width: 100%
&:hover,
&:is-open
background-color: #fff
box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
border: 0
cursor: pointer
&:is-open
cursor: auto
.description-item
background-color: #fff
border: 0
box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
color: #8c8c8c
height: 36px
margin: 4px 4px 6px 0
width: 92%
&:hover
background: darken(white, 12%)
&.add-description
display: flex
margin: 5px
a
display: block
margin: auto

588
client/components/cards/cardDetails.css Normal file
View file

@ -0,0 +1,588 @@
.assignee {
border-radius: 3px;
display: block;
position: relative;
float: left;
height: 30px;
width: 30px;
margin: 0 4px 4px 0;
cursor: pointer;
user-select: none;
z-index: 1;
text-decoration: none;
border-radius: 50%;
}
.assignee .avatar {
overflow: hidden;
border-radius: 50%;
}
.assignee .avatar.avatar-assignee-initials {
height: 70%;
width: 70%;
padding: 15%;
background-color: #dbdbdb;
color: #444;
position: absolute;
}
.assignee .avatar.avatar-image {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.assignee .assignee-presence-status {
background-color: #b3b3b3;
border: 1px solid #fff;
border-radius: 50%;
height: 7px;
width: 7px;
position: absolute;
right: -1px;
bottom: -1px;
border: 1px solid #fff;
z-index: 15;
}
.assignee .assignee-presence-status.active {
background: #64c464;
border-color: #daf1da;
}
.assignee .assignee-presence-status.idle {
background: #e4e467;
border-color: #f7f7d4;
}
.assignee .assignee-presence-status.disconnected {
background: #bdbdbd;
border-color: #ededed;
}
.assignee .assignee-presence-status.pending {
background: #e44242;
border-color: #f1dada;
}
.assignee.add-assignee {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #bfbfbf inset;
}
.assignee.add-assignee:hover,
.assignee.add-assignee.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.copied-tooltip {
display: none;
padding: 0px 10px;
background-color: rgba(0,0,0,0.875);
color: #fff;
border-radius: 5px;
}
.card-details {
padding: 0;
flex-shrink: 0;
flex-basis: 600px;
will-change: flex-basis;
overflow-y: scroll;
overflow-x: hidden;
background: #f7f7f7;
border-radius: bottom 3px;
z-index: 20;
animation: flexGrowIn 0.1s;
box-shadow: 0 0 7px 0 #b3b3b3;
transition: flex-basis 0.1s;
box-sizing: border-box;
}
.card-details .mCustomScrollBox {
padding-left: 0;
}
.card-details .card-details-canvas {
width: auto;
padding: 0 20px;
}
.card-details .card-details-header {
margin: 0 -20px 5px;
padding: 7px 20px;
background: #ededed;
border-bottom: 1px solid #dbdbdb;
position: sticky;
top: 0px;
z-index: 500;
}
.card-details .card-details-header .card-number {
color: #b3b3b3;
display: inline-block;
margin-right: 5px;
}
.card-details .card-details-header .close-card-details,
.card-details .card-details-header .maximize-card-details,
.card-details .card-details-header .minimize-card-details,
.card-details .card-details-header .card-details-menu,
.card-details .card-details-header .card-copy-button,
.card-details .card-details-header .card-copy-mobile-button,
.card-details .card-details-header .close-card-details-mobile-web,
.card-details .card-details-header .card-details-menu-mobile-web,
.card-details .card-details-header .copied-tooltip {
float: right;
}
.card-details .card-details-header .close-card-details,
.card-details .card-details-header .maximize-card-details,
.card-details .card-details-header .minimize-card-details {
font-size: 24px;
padding: 5px 10px 5px 10px;
margin-right: -8px;
}
.card-details .card-details-header .close-card-details-mobile-web {
font-size: 24px;
padding: 5px;
margin-right: 40px;
}
.card-details .card-details-header .card-copy-button {
font-size: 17px;
padding: 10px;
margin-right: 10px;
}
.card-details .card-details-header .card-copy-mobile-button {
font-size: 17px;
padding: 10px;
margin-right: 10px;
}
.card-details .card-details-header .card-details-menu {
font-size: 17px;
padding: 10px;
}
.card-details .card-details-header .card-details-menu-mobile-web {
font-size: 17px;
padding: 10px;
margin-right: 30px;
}
.card-details .card-details-header .card-details-watch {
font-size: 17px;
padding-left: 7px;
color: #a6a6a6;
}
.card-details .card-details-header .card-details-title {
font-weight: bold;
font-size: 1.33em;
margin: 7px 0 0;
padding: 0;
}
.card-details .card-details-header .linked-card-location {
font-style: italic;
font-size: 1em;
margin-bottom: 0;
}
.card-details .card-details-header .linked-card-location p {
margin-bottom: 0;
}
.card-details .card-details-header form.inlined-form {
margin-top: 5px;
margin-bottom: 10px;
}
.card-details .card-details-header form.inlined-form .copied-tooltip {
padding: 0px 10px;
}
.card-details .card-details-header .card-details-list {
font-size: 0.85em;
margin-bottom: 3px;
}
.card-details .card-details-header .card-details-list a.card-details-list-title {
font-weight: bold;
}
.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
display: inline-block;
background: #e6e6e6;
border-radius: 3px;
padding: 0px 5px;
}
.card-details .card-details-header .copied-tooltip {
margin-right: 10px;
padding: 10px;
}
.card-details .card-description textarea {
min-height: 100px;
}
.card-details .card-details-items {
display: flex;
flex-wrap: wrap;
margin: 15px 0;
}
.card-details .card-details-items .card-details-item {
margin-right: 0.5em;
flex-grow: 1;
}
.card-details .card-details-items .card-details-item:last-child {
margin-right: 0;
}
.card-details .card-details-items .card-details-item.card-details-item-labels {
display: block;
word-wrap: break-word;
max-width: 95%;
}
.card-details .card-details-items .card-details-item.card-details-item-members,
.card-details .card-details-items .card-details-item.card-details-item-assignees,
.card-details .card-details-items .card-details-item.card-details-item-customfield,
.card-details .card-details-items .card-details-item.card-details-item-name {
display: block;
word-wrap: break-word;
max-width: 36%;
}
.card-details .card-details-items .card-details-item.card-details-item-creator,
.card-details .card-details-items .card-details-item.card-details-item-received,
.card-details .card-details-items .card-details-item.card-details-item-start,
.card-details .card-details-items .card-details-item.card-details-item-due,
.card-details .card-details-items .card-details-item.card-details-item-end {
display: block;
word-wrap: break-word;
max-width: 28%;
}
.card-details .card-details-items .card-details-item.custom-fields {
padding-left: 10px;
}
.card-details .card-details-item-title {
font-size: 16px;
font-weight: bold;
color: #4d4d4d;
}
.card-details .activities {
padding-top: 10px;
}
@media screen and (min-width: 801px) {
.card-details-maximized {
padding: 0;
flex-shrink: 0;
flex-basis: calc(100% - 20px);
will-change: flex-basis;
overflow-y: scroll;
overflow-x: scroll;
background: #f7f7f7;
border-radius: bottom 3px;
z-index: 100;
animation: flexGrowIn 0.1s;
box-shadow: 0 0 7px 0 #b3b3b3;
transition: flex-basis 0.1s;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
height: calc(100% - 20px);
width: calc(100% - 20px);
float: left;
}
.card-details-maximized .card-details-left {
float: left;
top: 60px;
left: 20px;
width: 47%;
border-right: solid 2px #dbdbdb;
padding-right: 10px;
}
.card-details-maximized .card-details-right {
position: absolute;
float: right;
left: 50%;
margin: 15px 0;
}
.card-details-maximized .card-details-header {
width: 100%;
}
}
input[type="text"].attachment-add-link-input {
float: left;
margin: 0 0 8px;
width: 80%;
}
input[type="submit"].attachment-add-link-submit {
float: left;
margin: 0 0 8px 4px;
padding: 6px 12px;
width: 18%;
}
@media screen and (max-width: 800px) {
.card-details {
width: calc(100% - 1px);
padding: 0px 20px 0px 20px;
margin: 0px;
transition: none;
overflow-y: revert;
overflow-x: revert;
}
.card-details .card-details-canvas {
width: 100%;
padding-left: 0px;
}
.card-details .card-details-header .close-card-details {
margin-right: 0px;
}
.card-details .card-details-header .card-details-menu {
margin-right: 40px;
}
.card-details .card-details-header .maximize-card-details {
margin-right: 40px;
}
.card-details .card-details-header .minimize-card-details {
margin-right: 40px;
}
.card-details-popup {
padding: 0px 10px;
}
.pop-over > .content-wrapper > .popup-container-depth-0 {
width: 100%;
}
.pop-over > .content-wrapper > .popup-container-depth-0 > .content {
width: calc(100% - 10px);
}
.pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
margin: 15px 0px;
}
.pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
margin: 0;
}
}
.card-details-white {
background: unset !important;
color: #000 !important;
border: 1px solid #eee;
}
.card-details-green {
background: #3cb500 !important;
color: #fff !important;
}
.card-details-yellow {
background: #fad900 !important;
color: #000 !important;
}
.card-details-orange {
background: #ff9f19 !important;
color: #000 !important;
}
.card-details-red {
background: #eb4646 !important;
color: #fff !important;
}
.card-details-purple {
background: #a632db !important;
color: #fff !important;
}
.card-details-blue {
background: #0079bf !important;
color: #fff !important;
}
.card-details-pink {
background: #ff78cb !important;
color: #000 !important;
}
.card-details-sky {
background: #00c2e0 !important;
color: #fff !important;
}
.card-details-black {
background: #4d4d4d !important;
color: #fff !important;
}
.card-details-lime {
background: #51e898 !important;
color: #000 !important;
}
.card-details-silver {
background: #c0c0c0 !important;
color: #000 !important;
}
.card-details-peachpuff {
background: #ffdab9 !important;
color: #000 !important;
}
.card-details-crimson {
background: #dc143c !important;
color: #fff !important;
}
.card-details-plum {
background: #dda0dd !important;
color: #000 !important;
}
.card-details-darkgreen {
background: #006400 !important;
color: #fff !important;
}
.card-details-slateblue {
background: #6a5acd !important;
color: #fff !important;
}
.card-details-magenta {
background: #f0f !important;
color: #fff !important;
}
.card-details-gold {
background: #ffd700 !important;
color: #000 !important;
}
.card-details-navy {
background: #000080 !important;
color: #fff !important;
}
.card-details-gray {
background: #808080 !important;
color: #fff !important;
}
.card-details-saddlebrown {
background: #8b4513 !important;
color: #fff !important;
}
.card-details-paleturquoise {
background: #afeeee !important;
color: #000 !important;
}
.card-details-mistyrose {
background: #ffe4e1 !important;
color: #000 !important;
}
.card-details-indigo {
background: #4b0082 !important;
color: #fff !important;
}
.voted {
opacity: 0.7;
}
.vote-title {
display: flex;
justify-content: space-between;
}
.vote-title .js-edit-date {
align-self: baseline;
margin-left: 5px;
}
.vote-result {
display: flex;
}
.js-show-positive-votes {
cursor: pointer;
}
.poker-voted {
opacity: 0.7;
}
.poker-title {
display: flex;
justify-content: space-between;
}
.poker-title .js-edit-date {
align-self: baseline;
margin-left: 5px;
}
.poker-result {
display: flex;
flex-flow: row wrap;
}
.js-show-positive-poker-votes {
cursor: pointer;
}
.poker-deck {
display: grid;
flex-direction: column;
text-align: center;
}
.poker-card-result {
width: 32px;
font-size: 1em;
font-weight: bold;
padding: 4px 2px 4px 2px;
cursor: default;
}
.winner {
font-weight: bold;
outline: #2d2d2d solid 2px;
}
.loser {
opacity: 0.5;
}
.responsive-table {
overflow-x: auto;
}
.poker-table {
display: table;
width: 100%;
padding-top: 10px;
}
.poker-table-row {
display: table-row;
}
.poker-table-heading {
background-color: #eee;
display: table-header-group;
}
.poker-table-cell {
display: table-cell;
padding: 0 0 5px 2px;
border-bottom: 1px solid #d2d0d0;
text-align: center;
min-width: 45px;
}
.poker-table-cell-who {
width: 150px;
vertical-align: middle;
}
.poker-table-heading-left,
.poker-table-heading-right {
display: table-header-group;
font-weight: bold;
border-top: 1px solid #808080;
}
@media (max-width: 400px) {
.poker-table-heading-right {
display: none;
}
}
.poker-table-body {
display: table-row-group;
}
.poker-table-side-left,
.poker-table-side-right {
display: inline-block;
}
.poker-table-side-right {
padding-left: 10px;
}
@media (max-width: 400px) {
.poker-table-side-right {
padding-left: 0px;
}
}
.estimation-add {
display: block;
overflow: auto;
margin-top: 15px;
margin-bottom: 5px;
}
.estimation-add input {
display: inline-block;
float: right;
margin: auto;
margin-right: 10px;
width: 100px;
}
.estimation-add button {
display: inline-block;
float: right;
margin: auto;
}
.poker-card {
width: 48px;
height: 72px;
float: left;
background: #fff;
border-radius: 5px;
display: table;
box-sizing: border-box;
padding: 5px;
margin: 3px;
font-size: 20px;
font-weight: bold;
text-shadow: #2d2d2d 1px 1px 0;
box-shadow: 0 0 5px #aaa;
text-align: center;
position: relative;
cursor: pointer;
}
.poker-card .inner {
display: table-cell;
vertical-align: middle;
border-radius: 5px;
overflow: hidden;
background-color: #cecece;
}

564
client/components/cards/cardDetails.styl
View file

@ -1,564 +0,0 @@
@import 'nib'
// Assignee, code copied from wekan/client/users/userAvatar.styl
avatar-radius = 50%
.assignee
border-radius: 3px
display: block
position: relative
float: left
height: 30px
width: @height
margin: 0 4px 4px 0
cursor: pointer
user-select: none
z-index: 1
text-decoration: none
border-radius: avatar-radius
.avatar
overflow: hidden
border-radius: avatar-radius
&.avatar-assignee-initials
height: 70%
width: @height
padding: 15%
background-color: #dbdbdb
color: #444444
position: absolute
&.avatar-image
object-fit: cover;
object-position: center;
height: 100%
width: @height
.assignee-presence-status
background-color: #b3b3b3
border: 1px solid #fff
border-radius: 50%
height: 7px
width: @height
position: absolute
right: -1px
bottom: -1px
border: 1px solid white
z-index: 15
&.active
background: #64c464
border-color: #daf1da
&.idle
background: #e4e467
border-color: #f7f7d4
&.disconnected
background: #bdbdbd
border-color: #ededed
&.pending
background: #e44242
border-color: #f1dada
&.add-assignee
display: flex
align-items: center
justify-content: center
box-shadow: 0 0 0 2px darken(white, 25%) inset
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
// Other card details
.copied-tooltip
display: none
padding: 0px 10px;
background-color: #000000df;
color: #fff;
border-radius: 5px;
.card-details
padding: 0
flex-shrink: 0
flex-basis: 600px
will-change: flex-basis
overflow-y: scroll
overflow-x: hidden
background: darken(white, 3%)
border-radius: bottom 3px
z-index: 20
animation: flexGrowIn 0.1s
box-shadow: 0 0 7px 0 darken(white, 30%)
transition: flex-basis 0.1s
box-sizing: border-box
.mCustomScrollBox
padding-left: 0
.card-details-canvas
width: auto
padding: 0 20px
.card-details-header
margin: 0 -20px 5px
padding: 7px 20px
background: darken(white, 7%)
border-bottom: 1px solid darken(white, 14%)
position: sticky
top: 0px
z-index: 500
.card-number {
color: darken(white, 30%);
display: inline-block;
margin-right: 5px;
}
.close-card-details,
.maximize-card-details,
.minimize-card-details,
.card-details-menu,
.card-copy-button,
.card-copy-mobile-button,
.close-card-details-mobile-web,
.card-details-menu-mobile-web,
.copied-tooltip
float: right
.close-card-details,
.maximize-card-details,
.minimize-card-details
font-size: 24px
padding: 5px 10px 5px 10px
margin-right: -8px
.close-card-details-mobile-web
font-size: 24px
padding: 5px
margin-right: 40px
.card-copy-button
font-size: 17px
padding: 10px
margin-right: 10px
.card-copy-mobile-button
font-size: 17px
padding: 10px
margin-right: 10px
.card-details-menu
font-size: 17px
padding: 10px
.card-details-menu-mobile-web
font-size: 17px
padding: 10px
margin-right: 30px
.card-details-watch
font-size: 17px
padding-left: 7px
color: #a6a6a6
.card-details-title
font-weight: bold
font-size: 1.33em
margin: 7px 0 0
padding: 0
.linked-card-location
font-style: italic
font-size: 1em
margin-bottom: 0
& p
margin-bottom: 0
form.inlined-form
margin-top: 5px
margin-bottom: 10px
.copied-tooltip
padding: 0px 10px
.card-details-list
font-size: 0.85em
margin-bottom: 3px
a.card-details-list-title
font-weight: bold
&.is-editable
display: inline-block
background: darken(white, 10%)
border-radius: 3px
padding: 0px 5px
.copied-tooltip
margin-right: 10px
padding: 10px;
.card-description textarea
min-height: 100px
.card-details-items
display: flex
flex-wrap: wrap
margin: 15px 0
.card-details-item
margin-right: 0.5em
flex-grow: 1
&:last-child
margin-right: 0
&.card-details-item-labels
display: block
word-wrap: break-word
max-width: 95%
&.card-details-item-members,
&.card-details-item-assignees,
&.card-details-item-customfield,
&.card-details-item-name
display: block
word-wrap: break-word
max-width: 36%
&.card-details-item-creator,
&.card-details-item-received,
&.card-details-item-start,
&.card-details-item-due,
&.card-details-item-end
display: block
word-wrap: break-word
max-width: 28%
&.custom-fields
padding-left: 10px
.card-details-item-title
font-size: 16px
font-weight: bold
color: #4d4d4d
.activities
padding-top: 10px
@media screen and (min-width: 801px)
.card-details-maximized
padding: 0
flex-shrink: 0
flex-basis: calc(100% - 20px)
will-change: flex-basis
overflow-y: scroll
overflow-x: scroll
background: darken(white, 3%)
border-radius: bottom 3px
z-index: 100
animation: flexGrowIn 0.1s
box-shadow: 0 0 7px 0 darken(white, 30%)
transition: flex-basis 0.1s
box-sizing: border-box
position: absolute
top: 0
left: 0
height: calc(100% - 20px)
width: calc(100% - 20px)
float: left
.card-details-left
float: left
top: 60px
left: 20px
width: 47%
border-right: solid 2px #dbdbdb
padding-right: 10px
.card-details-right
position: absolute
float: right
left: 50%
margin: 15px 0
.card-details-header
width: 100%
input[type="text"].attachment-add-link-input
float: left
margin: 0 0 8px
width: 80%
input[type="submit"].attachment-add-link-submit
float: left
margin: 0 0 8px 4px
padding: 6px 12px
width: 18%
@media screen and (max-width: 800px)
.card-details
width: calc(100% - 1px)
padding: 0px 20px 0px 20px
margin: 0px
transition: none
overflow-y: revert
overflow-x: revert
.card-details-canvas
width: 100%
padding-left: 0px
.card-details-header
.close-card-details
margin-right: 0px
.card-details-menu
margin-right: 40px
.maximize-card-details
margin-right: 40px
.minimize-card-details
margin-right: 40px
.card-details-popup
padding: 0px 10px
.pop-over > .content-wrapper > .popup-container-depth-0
width: 100%
& > .content
width: calc(100% - 10px)
& > .content > .card-details-popup hr
margin: 15px 0px
.card-details-header
margin: 0
card-details-color(background, color...)
background: background !important
if color
color: color !important //overwrite text for better visibility
.card-details-white
card-details-color(unset, #000) //Black text for better visibility
border: 1px solid #eee
.card-details-green
card-details-color(#3cb500, #ffffff) //White text for better visibility
.card-details-yellow
card-details-color(#fad900, #000) //Black text for better visibility
.card-details-orange
card-details-color(#ff9f19, #000) //Black text for better visibility
.card-details-red
card-details-color(#eb4646, #ffffff) //White text for better visibility
.card-details-purple
card-details-color(#a632db, #ffffff) //White text for better visibility
.card-details-blue
card-details-color(#0079bf, #ffffff) //White text for better visibility
.card-details-pink
card-details-color(#ff78cb, #000) //Black text for better visibility
.card-details-sky
card-details-color(#00c2e0, #ffffff) //White text for better visibility
.card-details-black
card-details-color(#4d4d4d, #ffffff) //White text for better visibility
.card-details-lime
card-details-color(#51e898, #000) //Black text for better visibility
.card-details-silver
card-details-color(#c0c0c0, #000) //Black text for better visibility
.card-details-peachpuff
card-details-color(#ffdab9, #000) //Black text for better visibility
.card-details-crimson
card-details-color(#dc143c, #ffffff) //White text for better visibility
.card-details-plum
card-details-color(#dda0dd, #000) //Black text for better visibility
.card-details-darkgreen
card-details-color(#006400, #ffffff) //White text for better visibility
.card-details-slateblue
card-details-color(#6a5acd, #ffffff) //White text for better visibility
.card-details-magenta
card-details-color(#ff00ff, #ffffff) //White text for better visibility
.card-details-gold
card-details-color(#ffd700, #000) //Black text for better visibility
.card-details-navy
card-details-color(#000080, #ffffff) //White text for better visibility
.card-details-gray
card-details-color(#808080, #ffffff) //White text for better visibility
.card-details-saddlebrown
card-details-color(#8b4513, #ffffff) //White text for better visibility
.card-details-paleturquoise
card-details-color(#afeeee, #000) //Black text for better visibility
.card-details-mistyrose
card-details-color(#ffe4e1, #000) //Black text for better visibility
.card-details-indigo
card-details-color(#4b0082, #ffffff) //White text for better visibility
.voted
opacity: .7
.vote-title
display: flex
justify-content: space-between
.js-edit-date
align-self: baseline
margin-left: 5px
.vote-result
display: flex
.js-show-positive-votes
cursor: pointer
.poker-voted
opacity: .7
.poker-title
display: flex
justify-content: space-between
.js-edit-date
align-self: baseline
margin-left: 5px
.poker-result
display: flex
flex-flow: row wrap
.js-show-positive-poker-votes
cursor: pointer
.poker-deck
display: grid
flex-direction: column
text-align: center
.poker-card-result
width: 32px
font-size: 1em
font-weight: bold
padding: 4px 2px 4px 2px
cursor: default
.winner
font-weight: bold
outline: #2d2d2d solid 2px
.loser
opacity: .5
.responsive-table
overflow-x: auto
.poker-table
display: table
width: 100%
padding-top: 10px
.poker-table-row
display: table-row
.poker-table-heading
background-color: #EEE
display: table-header-group
.poker-table-cell
display: table-cell
padding: 0 0 5px 2px
border-bottom: 1px solid #d2d0d0
text-align: center
min-width: 45px
.poker-table-cell-who
width: 150px
vertical-align: middle
.poker-table-heading-left,
.poker-table-heading-right
display: table-header-group
font-weight: bold
border-top: 1px solid #808080
@media (max-width: 400px)
.poker-table-heading-right
display: none
.poker-table-body
display: table-row-group
.poker-table-side-left,
.poker-table-side-right
display: inline-block
.poker-table-side-right
padding-left: 10px
@media (max-width: 400px)
.poker-table-side-right
padding-left: 0px
.estimation-add
display: block
overflow: auto
margin-top: 15px
margin-bottom: 5px
input
display: inline-block
float: right
margin: auto
margin-right: 10px
width: 100px
button
display: inline-block
float: right
margin: auto
.poker-card
width:48px
height:72px
float:left
background:#fff
border-radius:5px
display:table
box-sizing:border-box
padding:5px
margin:3px
font-size:20px
font-weight: bold
text-shadow: #2d2d2d 1px 1px 0
box-shadow:0 0 5px #aaaaaa
text-align:center
position:relative
cursor: pointer
.inner
display:table-cell
vertical-align:middle
border-radius:5px
overflow:hidden
background-color: #cecece

18
client/components/cards/cardTime.css Normal file
View file

@ -0,0 +1,18 @@
.card-time {
display: block;
border-radius: 4px;
padding: 1px 3px;
color: #fff;
background-color: #dbdbdb;
}
.card-time:hover,
.card-time.is-active {
background-color: #b3b3b3;
}
.card-time time::before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
-webkit-font-smoothing: antialiased;
content: "\f017";
margin-right: 0.3em;
}

17
client/components/cards/cardTime.styl
View file

@ -1,17 +0,0 @@
.card-time
display: block
border-radius: 4px
padding: 1px 3px
color: #fff
background-color: #dbdbdb
&:hover, &.is-active
background-color: #b3b3b3
time
&::before
font: normal normal normal 14px/1 FontAwesome
font-size: inherit
-webkit-font-smoothing: antialiased
content: "\f017" // clock symbol
margin-right: 0.3em

173
client/components/cards/checklists.css Normal file
View file

@ -0,0 +1,173 @@
.js-add-checklist {
color: #8c8c8c;
}
textarea.js-add-checklist-item,
textarea.js-edit-checklist-item {
overflow: hidden;
word-wrap: break-word;
resize: none;
height: 34px;
}
.delete-text,
.js-delete-checklist-item,
.js-convert-checklist-item-to-card {
color: #8c8c8c;
text-decoration: underline;
word-wrap: break-word;
float: right;
padding-top: 6px;
}
.delete-text:hover,
.js-delete-checklist-item:hover,
.js-convert-checklist-item-to-card:hover {
color: inherit;
}
.checklists-title {
display: flex;
justify-content: space-between;
}
.checklist-progress-bar-container {
display: flex;
flex-direction: row;
align-items: center;
}
.checklist-progress-bar-container .checklist-progress-text {
margin-right: 10px;
}
.checklist-progress-bar-container .checklist-progress-bar {
width: 80%;
height: 10px;
}
.checklist-progress-bar-container .checklist-progress-bar .checklist-progress {
color: #fff !important;
background-color: #2196f3 !important;
padding: 0.01em 16px;
border-radius: 16px;
height: 100%;
}
.checklist-title .checkbox {
float: left;
width: 30px;
height: 30px;
font-size: 18px;
line-height: 30px;
}
.checklist-title .title {
font-size: 18px;
line-height: 25px;
}
.checklist-title .checklist-stat {
margin: 0 0.5em;
float: right;
padding-top: 6px;
}
.checklist-title .checklist-stat.is-finished {
color: #3cb500;
}
.checklist-title span.fa.checklist-handle {
padding-right: 20px;
padding-top: 3px;
float: left;
}
#card-details-overlay {
top: 0;
bottom: -600px;
right: 0;
}
.checklist {
background: #f7f7f7;
}
.checklist.placeholder {
background: #ccc;
border-radius: 2px;
}
.checklist.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.checklist-item {
margin: 0 0 0 0.1em;
line-height: 18px;
font-size: 1.1em;
margin-top: 3px;
display: flex;
background: #f7f7f7;
opacity: 1;
transition: height 0ms 400ms, opacity 400ms 0ms;
height: auto;
overflow: hidden;
}
.checklist-item.is-checked.invisible {
opacity: 0;
height: 0;
transition: height 0ms 0ms, opacity 600ms 0ms;
margin-top: 0;
margin-bottom: 0;
}
.checklist-item.placeholder {
background: #ccc;
border-radius: 2px;
}
.checklist-item.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.checklist-item:hover {
background-color: #ebebeb;
}
.checklist-item .check-box-container {
padding-right: 10px;
}
.checklist-item .check-box {
margin: 0.1em 0 0 0;
}
.checklist-item .check-box.is-checked {
border-bottom: 2px solid #3cb500;
border-right: 2px solid #3cb500;
}
.checklist-item .item-title {
flex: 1;
}
.checklist-item .item-title.is-checked {
color: #8c8c8c;
font-style: italic;
text-decoration: line-through;
}
.checklist-item .item-title .viewer p {
margin-bottom: 2px;
display: block;
word-wrap: break-word;
max-width: 420px;
}
.checklist-item span.fa.checklistitem-handle {
padding-top: 2px;
padding-right: 10px;
}
.js-delete-checklist-item,
.js-convert-checklist-item-to-card {
margin: 0 0 0.5em 1.33em;
padding: 12px 0 0 0;
}
.add-checklist-item {
margin: 0.2em 0 0.5em 1.33em;
}
.add-checklist-item.js-open-inlined-form,
.add-checklist.js-open-inlined-form {
display: block;
width: 50%;
}
.add-checklist-item.js-open-inlined-form:hover,
.add-checklist.js-open-inlined-form:hover {
background: #dbdbdb;
color: #222;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.checklist-details-menu {
float: right;
padding: 6px 10px 6px 10px;
}
.edit-controls label.toggle-label {
margin-left: 2px;
}

168
client/components/cards/checklists.styl
View file

@ -1,168 +0,0 @@
.js-add-checklist
color: #8c8c8c
textarea.js-add-checklist-item, textarea.js-edit-checklist-item
overflow: hidden
word-wrap: break-word
resize: none
height: 34px
.delete-text
color: #8c8c8c
text-decoration: underline
word-wrap: break-word
float: right
padding-top: 6px
&:hover
color: inherit
.checklists-title
display: flex
justify-content: space-between
.checklist-progress-bar-container
display: flex
flex-direction: row
align-items: center
.checklist-progress-text
margin-right: 10px
.checklist-progress-bar
width: 80%
height: 10px
.checklist-progress
color: #fff !important
background-color: #2196F3 !important
padding: 0.01em 16px
border-radius: 16px
height: 100%
.checklist-title
.checkbox
float: left
width: 30px
height 30px
font-size: 18px
line-height: 30px
.title
font-size: 18px
line-height: 25px
.checklist-stat
margin: 0 0.5em
float: right
padding-top: 6px
&.is-finished
color: #3cb500
span.fa.checklist-handle
padding-right: 20px
padding-top: 3px
float: left
#card-details-overlay
top: 0
bottom: -600px
right: 0
.checklist
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.checklist-item
margin: 0 0 0 0.1em
line-height: 18px
font-size: 1.1em
margin-top: 3px
display: flex
background: darken(white, 3%)
opacity: 1
transition: height 0ms 400ms, opacity 400ms 0ms
height: auto
overflow: hidden
&.is-checked.invisible
opacity: 0
height: 0
transition: height 0ms 0ms, opacity 600ms 0ms
margin-top: 0
margin-bottom: 0
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
&:hover
background-color: darken(white, 8%)
.check-box-container
padding-right: 10px;
.check-box
margin: 0.1em 0 0 0;
&.is-checked
border-bottom: 2px solid #3cb500
border-right: 2px solid #3cb500
.item-title
flex: 1
&.is-checked
color: #8c8c8c
font-style: italic
text-decoration: line-through
& .viewer
p
margin-bottom: 2px
display: block
word-wrap: break-word
max-width: 420px
span.fa.checklistitem-handle
padding-top: 2px
padding-right: 10px;
.js-delete-checklist-item,
.js-convert-checklist-item-to-card
margin: 0 0 0.5em 1.33em
@extends .delete-text
padding: 12px 0 0 0
.add-checklist-item
margin: 0.2em 0 0.5em 1.33em
.add-checklist-item,.add-checklist
&.js-open-inlined-form
display: block
width: 50%
&:hover
background: #dbdbdb
color: #222
box-shadow: 0 1px 2px rgba(0,0,0,.2)
.checklist-details-menu
float: right
padding: 6px 10px 6px 10px
.edit-controls
label.toggle-label
margin-left: 2px

230
client/components/cards/labels.css Normal file
View file

@ -0,0 +1,230 @@
.card-label {
border: 1px solid #000;
border-radius: 4px;
color: #fff;
display: inline-block;
font-weight: 700;
font-size: 13px;
margin-right: 4px;
margin-bottom: 5px;
padding: 3px 8px;
max-width: 210px;
min-width: 8px;
word-wrap: break-word;
min-height: 18px;
vertical-align: middle;
white-space: initial;
overflow: initial;
}
.card-label:hover {
color: #fff;
}
.card-label.square {
height: 30px;
width: 30px;
padding: 0;
}
.card-label.add-label {
box-shadow: 0 0 0 2px #bfbfbf inset;
border: initial;
}
.card-label.add-label:hover,
.card-label.add-label.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.card-label p {
margin: 0px;
}
.palette-colors {
display: flex;
flex-wrap: wrap;
}
.palette-colors .palette-color {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.card-label-white {
background-color: #fff;
color: #000;
}
.card-label-white:hover {
color: #aaa;
}
.card-label-green {
background-color: #3cb500;
}
.card-label-green:hover {
color: #000;
}
.card-label-yellow {
background-color: #fad900;
color: #000;
}
.card-label-orange {
background-color: #ff9f19;
color: #000;
}
.card-label-red {
background-color: #eb4646;
}
.card-label-purple {
background-color: #a632db;
}
.card-label-blue {
background-color: #0079bf;
}
.card-label-pink {
background-color: #ff78cb;
color: #000;
}
.card-label-sky {
background-color: #00c2e0;
}
.card-label-black {
background-color: #4d4d4d;
}
.card-label-lime {
background-color: #51e898;
color: #000;
}
.card-label-silver {
background-color: #c0c0c0;
color: #000;
}
.card-label-peachpuff {
background-color: #ffdab9;
color: #000;
}
.card-label-crimson {
background-color: #dc143c;
}
.card-label-plum {
background-color: #dda0dd;
color: #000;
}
.card-label-darkgreen {
background-color: #006400;
}
.card-label-slateblue {
background-color: #6a5acd;
}
.card-label-magenta {
background-color: #f0f;
}
.card-label-gold {
background-color: #ffd700;
color: #000;
}
.card-label-navy {
background-color: #000080;
}
.card-label-gray {
background-color: #808080;
}
.card-label-saddlebrown {
background-color: #8b4513;
}
.card-label-paleturquoise {
background-color: #afeeee;
color: #000;
}
.card-label-mistyrose {
background-color: #ffe4e1;
color: #000;
}
.card-label-indigo {
background-color: #4b0082;
}
.edit-label .card-label,
.create-label .card-label {
float: left;
height: 25px;
margin: 0px 3% 7px 0px;
width: 10.5%;
max-width: 10.5%;
cursor: pointer;
}
.edit-labels input[type="text"] {
margin: 4px 0 6px 38px;
width: 243px;
}
.edit-labels .card-label {
height: 30px;
left: 0;
padding: 1px 5px;
position: absolute;
top: 0;
width: 24px;
}
.edit-labels .labels-static .card-label {
line-height: 30px;
margin-bottom: 4px;
position: relative;
top: auto;
left: 0;
width: 260px;
}
.edit-labels-pop-over {
margin-bottom: 8px;
}
.edit-labels-pop-over .card-label .viewer p {
margin: 0;
}
.edit-labels-pop-over .shortcut {
display: inline-block;
}
.card-label-selectable {
border-radius: 3px;
cursor: pointer;
margin: 0;
margin-bottom: 3px;
width: 190px;
min-height: 18px;
padding: 8px;
position: relative;
transition: margin-right 0.1s;
}
.card-label-selectable .card-label-selectable-icon {
position: absolute;
top: 8px;
right: -20px;
}
.card-label-selectable.active:hover,
.card-label-selectable.active,
.card-label-selectable.active.selected:hover,
.card-label-selectable.active.selected {
padding-right: 32px;
}
.card-label-selectable.active:hover .card-label-selectable-icon,
.card-label-selectable.active .card-label-selectable-icon,
.card-label-selectable.active.selected:hover .card-label-selectable-icon,
.card-label-selectable.active.selected .card-label-selectable-icon {
right: 6px;
}
.card-label-selectable.selected,
.card-label-selectable:hover {
opacity: 0.8;
}
.active .card-label-selectable,
.active .card-label-selectable:hover {
margin-right: 0;
}
.active .card-label-selectable .card-label-selectable-icon {
right: 8px;
}
.card-label-edit-button {
border-radius: 3px;
float: right;
padding: 8px;
}
.card-label-edit-button:hover {
background: #dbdbdb;
}
ul.edit-labels-pop-over span.fa.label-handle {
padding-right: 10px;
}
ul.edit-labels-pop-over span.fa.label-handle + .card-label {
max-width: 180px;
}

231
client/components/cards/labels.styl
View file

@ -1,231 +0,0 @@
@import 'nib'
// XXX Use .board-widget-labels as a flexbox container
.card-label
border: 1px solid #000000
border-radius: 4px
color: white //Default white text, in select cases, changed to black to improve contrast between label colour and text
display: inline-block
font-weight: 700
font-size: 13px
margin-right: 4px
margin-bottom: 5px
padding: 3px 8px
max-width: 210px
min-width: 8px
word-wrap: break-word
min-height: 18px
vertical-align: middle
white-space: initial
overflow: initial
&:hover
color: white
&.square
height: 30px
width: @height
padding: 0
&.add-label
box-shadow: 0 0 0 2px darken(white, 25%) inset
border: initial
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
p
margin: 0px
.palette-colors
display: flex
flex-wrap: wrap
.palette-color
flex-grow: 1
display: flex
align-items: center
justify-content: center
.card-label-white
background-color: #ffffff
color: #000000 //Black text for better visibility
.card-label-white:hover
color: #aaaaaa //grey text for better visibility
.card-label-green
background-color: #3cb500
.card-label-green:hover
color: #000000 //Black hover text for better visibility
.card-label-yellow
background-color: #fad900
color: #000000 //Black text for better visibility
.card-label-orange
background-color: #ff9f19
color: #000000 //Black text for better visibility
.card-label-red
background-color: #eb4646
.card-label-purple
background-color: #a632db
.card-label-blue
background-color: #0079bf
.card-label-pink
background-color: #ff78cb
color: #000000 //Black text for better visibility
.card-label-sky
background-color: #00c2e0
.card-label-black
background-color: #4d4d4d
.card-label-lime
background-color: #51e898
color: #000000 //Black text for better visibility
.card-label-silver
background-color: #c0c0c0
color: #000000 //Black text for better visibility
.card-label-peachpuff
background-color: #ffdab9
color: #000000 //Black text for better visibility
.card-label-crimson
background-color: #dc143c
.card-label-plum
background-color: #dda0dd
color: #000000 //Black text for better visibility
.card-label-darkgreen
background-color: #006400
.card-label-slateblue
background-color: #6a5acd
.card-label-magenta
background-color: #ff00ff
.card-label-gold
background-color: #ffd700
color: #000000 //Black text for better visibility
.card-label-navy
background-color: #000080
.card-label-gray
background-color: #808080
.card-label-saddlebrown
background-color: #8b4513
.card-label-paleturquoise
background-color: #afeeee
color: #000000 //Black text for better visibility
.card-label-mistyrose
background-color: #ffe4e1
color: #000000 //Black text for better visibility
.card-label-indigo
background-color: #4b0082
.edit-label,
.create-label
.card-label
float: left
height: 25px
margin: 0px 3% 7px 0px
width: 10.5%
max-width: 10.5%
cursor: pointer
.edit-labels
input[type="text"]
margin: 4px 0 6px 38px
width: 243px
.card-label
height: 30px
left: 0
padding: 1px 5px
position: absolute
top: 0
width: 24px
.labels-static .card-label
line-height: 30px
margin-bottom: 4px
position: relative
top: auto
left: 0
width: 260px
.edit-labels-pop-over
margin-bottom: 8px
.card-label .viewer p
margin: 0
.edit-labels-pop-over .shortcut
display: inline-block
.card-label-selectable
border-radius: 3px
cursor: pointer
margin: 0
margin-bottom: 3px
width: 190px
min-height: 18px
padding: 8px
position: relative
transition: margin-right .1s
.card-label-selectable-icon
position: absolute
top: 8px
right: -20px
&.active:hover,
&.active,
&.active.selected:hover,
&.active.selected
padding-right: 32px
.card-label-selectable-icon
right: 6px
&.selected,
&:hover
opacity: .8
.active .card-label-selectable
&,
&:hover
margin-right: 0
.card-label-selectable-icon
right: 8px
.card-label-edit-button
border-radius: 3px
float: right
padding: 8px
&:hover
background: #dbdbdb
ul.edit-labels-pop-over
span.fa.label-handle
padding-right: 10px;
span.fa.label-handle + .card-label
max-width: 180px

550
client/components/cards/minicard.css Normal file
View file

@ -0,0 +1,550 @@
.minicard-wrapper {
cursor: pointer;
position: relative;
display: flex;
align-items: center;
margin-bottom: 9px;
}
.minicard-wrapper.placeholder {
background: #ccc;
border-radius: 9px;
}
.minicard-wrapper.ui-sortable-helper {
cursor: grabbing;
transform: rotate(4deg);
display: block !important;
}
.minicard-wrapper.ui-sortable-helper .and-n-other {
width: 100%;
height: 16px;
padding: 4px;
background-color: #f2f2f2;
text-align: center;
border-radius: 3px;
}
.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox {
display: none;
}
.minicard-wrapper .multi-selection-checkbox + .minicard {
margin-left: 8px;
}
.minicard {
padding: 6px 8px 2px;
position: relative;
flex: 1;
flex-wrap: wrap;
background-color: #fff;
min-height: 20px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
border-radius: 2px;
color: #4d4d4d;
overflow: hidden;
transition: transform 0.2s, border-radius 0.2s;
}
.minicard.linked-board .linked-icon,
.minicard.linked-card .linked-icon {
display: inline-block;
margin-right: 11px;
vertical-align: baseline;
font-size: 0.9em;
}
.minicard.linked-board .linked-archived,
.minicard.linked-card .linked-archived {
color: #937760;
}
.is-selected .minicard {
transform: translateX(11px);
border-bottom-right-radius: 0;
border-top-right-radius: 0;
z-index: 25;
box-shadow: -2px 1px 2px rgba(0,0,0,0.2);
}
.minicard:hover:not(.minicard-composer),
.is-selected .minicard,
.draggable-hover-card .minicard {
background: #f7f7f7;
}
.draggable-hover-card .minicard {
background: #ededed;
}
.minicard .minicard-cover {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 145px;
user-select: none;
margin: -6px -8px 6px -8px;
border-radius: top 2px;
}
.minicard .minicard-labels {
float: none;
}
.minicard .minicard-labels .minicard-label {
width: 11px;
height: 11px;
border-radius: 2px;
margin-right: 3px;
margin-bottom: 3px;
}
.minicard .minicard-labels-no-text {
display: flex;
flex-wrap: wrap;
}
.minicard .minicard-custom-fields {
display: block;
}
.minicard .minicard-custom-field {
display: flex;
}
.minicard .minicard-custom-field-item {
flex-grow: 1;
display: block;
word-wrap: break-word;
max-width: 100px;
margin-right: 4px;
}
.minicard .handle {
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
display: none;
}
@media only screen {
.minicard .handle {
display: block;
}
}
.minicard .handle .fa-arrows {
font-size: 20px;
color: #ccc;
}
.minicard .minicard-title .card-number {
color: #b3b3b3;
display: inline-block;
margin-right: 5px;
}
.minicard .minicard-title p:last-child {
margin-bottom: 0;
}
.minicard .minicard-title .viewer {
display: block;
word-wrap: break-word;
max-width: 230px;
}
.minicard .dates {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.minicard .date {
margin-right: 3px;
}
.minicard .badges {
float: left;
margin-top: 7px;
color: #808080;
}
.minicard .badges:empty {
display: none;
}
.minicard .badges .badge {
float: left;
margin-right: 11px;
margin-bottom: 3px;
font-size: 0.9em;
}
.minicard .badges .badge.is-finished {
background: #3cb500;
padding: 0px 3px;
border-radius: 3px;
color: #fff;
}
.minicard .badges .badge:last-of-type {
margin-right: 0;
}
.minicard .badges .badge .badge-icon,
.minicard .badges .badge .badge-text {
vertical-align: middle;
}
.minicard .badges .badge .badge-icon.badge-comment,
.minicard .badges .badge .badge-text.badge-comment {
margin-bottom: 0.1rem;
}
.minicard .badges .badge .badge-text {
font-size: 0.9em;
padding-left: 2px;
line-height: 14px;
}
.minicard .badges .badge .check-list-text {
padding-left: 0px;
line-height: 12px;
}
.minicard .minicard-members,
.minicard .minicard-assignees,
.minicard .minicard-creator {
float: right;
margin-left: 5px;
margin-bottom: 4px;
}
.minicard .minicard-members .member,
.minicard .minicard-assignees .member,
.minicard .minicard-creator .member {
float: right;
border-radius: 50%;
height: 28px;
width: 28px;
margin-bottom: 4px;
}
.minicard .minicard-members .assignee,
.minicard .minicard-assignees .assignee,
.minicard .minicard-creator .assignee {
float: right;
border-radius: 50%;
height: 28px;
width: 28px;
}
.minicard .minicard-members + .badges,
.minicard .minicard-assignees + .badges,
.minicard .minicard-creator + .badges {
margin-top: 5px;
}
.minicard .minicard-assignees {
border-bottom: 1px solid #f00;
}
.minicard .minicard-creator {
border-bottom: 1px solid #008000;
}
.minicard .minicard-members:empty,
.minicard .minicard-assignees:empty {
display: none;
}
.minicard .minicard-description {
padding: 6px 0 6px 8px;
background-color: #eee;
width: 100%;
margin-bottom: 2px;
margin-left: -4px;
border-radius: 3px;
display: inline-block;
}
.minicard.minicard-composer {
margin-bottom: 10px;
}
.minicard.minicard-composer textarea.minicard-composer-textarea,
.minicard.minicard-composer textarea.minicard-composer-textarea:focus {
resize: none;
background: none;
border: none;
box-shadow: none;
height: auto;
margin: 0;
padding: 0;
max-height: 162px;
min-height: 36px;
margin-bottom: 20px;
overflow-y: auto;
}
.parent-prefix {
color: #b3b3b3;
font-size: 0.9em;
}
.parent-subtext {
color: #b3b3b3;
font-size: 0.9em;
}
@media screen and (max-width: 800px) {
.is-selected .minicard {
transform: translateX(0px);
border-bottom-right-radius: 0;
border-top-right-radius: 0;
z-index: 15;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
}
/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
.minicard-green {
background-color: #3cb500 !important;
color: #fff !important;
}
.minicard-green:hover:not(.minicard-composer),
.is-selected .minicard-green,
.draggable-hover-card .minicard-green {
background: #3ab000;
}
.draggable-hover-card .minicard-green {
background: #38a800;
}
.minicard-yellow {
background-color: #fad900 !important;
}
.minicard-yellow:hover:not(.minicard-composer),
.is-selected .minicard-yellow,
.draggable-hover-card .minicard-yellow {
background: #f3d200;
}
.draggable-hover-card .minicard-yellow {
background: #e9ca00;
}
.minicard-orange {
background-color: #ff9f19 !important;
}
.minicard-orange:hover:not(.minicard-composer),
.is-selected .minicard-orange,
.draggable-hover-card .minicard-orange {
background: #ff9b11;
}
.draggable-hover-card .minicard-orange {
background: #ff9705;
}
.minicard-red {
background-color: #eb4646 !important;
color: #fff !important;
}
.minicard-red:hover:not(.minicard-composer),
.is-selected .minicard-red,
.draggable-hover-card .minicard-red {
background: #ea3e3e;
}
.draggable-hover-card .minicard-red {
background: #e93333;
}
.minicard-purple {
background-color: #a632db !important;
color: #fff !important;
}
.minicard-purple:hover:not(.minicard-composer),
.is-selected .minicard-purple,
.draggable-hover-card .minicard-purple {
background: #a32bda;
}
.draggable-hover-card .minicard-purple {
background: #9e25d5;
}
.minicard-blue {
background-color: #0079bf !important;
color: #fff !important;
}
.minicard-blue:hover:not(.minicard-composer),
.is-selected .minicard-blue,
.draggable-hover-card .minicard-blue {
background: #0075b9;
}
.draggable-hover-card .minicard-blue {
background: #0071b2;
}
.minicard-pink {
background-color: #ff78cb !important;
}
.minicard-pink:hover:not(.minicard-composer),
.is-selected .minicard-pink,
.draggable-hover-card .minicard-pink {
background: #ff6dc7;
}
.draggable-hover-card .minicard-pink {
background: #ff5ec1;
}
.minicard-sky {
background-color: #00c2e0 !important;
color: #fff !important;
}
.minicard-sky:hover:not(.minicard-composer),
.is-selected .minicard-sky,
.draggable-hover-card .minicard-sky {
background: #00bcd9;
}
.draggable-hover-card .minicard-sky {
background: #00b4d0;
}
.minicard-black {
background-color: #4d4d4d !important;
color: #fff !important;
}
.minicard-black:hover:not(.minicard-composer),
.is-selected .minicard-black,
.draggable-hover-card .minicard-black {
background: #4b4b4b;
}
.draggable-hover-card .minicard-black {
background: #484848;
}
.minicard-lime {
background-color: #51e898 !important;
}
.minicard-lime:hover:not(.minicard-composer),
.is-selected .minicard-lime,
.draggable-hover-card .minicard-lime {
background: #49e793;
}
.draggable-hover-card .minicard-lime {
background: #3ee58d;
}
.minicard-silver {
background-color: #c0c0c0 !important;
}
.minicard-silver:hover:not(.minicard-composer),
.is-selected .minicard-silver,
.draggable-hover-card .minicard-silver {
background: #bababa;
}
.draggable-hover-card .minicard-silver {
background: #b3b3b3;
}
.minicard-peachpuff {
background-color: #ffdab9 !important;
}
.minicard-peachpuff:hover:not(.minicard-composer),
.is-selected .minicard-peachpuff,
.draggable-hover-card .minicard-peachpuff {
background: #ffd3ac;
}
.draggable-hover-card .minicard-peachpuff {
background: #ffca9a;
}
.minicard-crimson {
background-color: #dc143c !important;
color: #fff !important;
}
.minicard-crimson:hover:not(.minicard-composer),
.is-selected .minicard-crimson,
.draggable-hover-card .minicard-crimson {
background: #d5133a;
}
.draggable-hover-card .minicard-crimson {
background: #cd1338;
}
.minicard-plum {
background-color: #dda0dd !important;
}
.minicard-plum:hover:not(.minicard-composer),
.is-selected .minicard-plum,
.draggable-hover-card .minicard-plum {
background: #da98da;
}
.draggable-hover-card .minicard-plum {
background: #d68cd6;
}
.minicard-darkgreen {
background-color: #006400 !important;
color: #fff !important;
}
.minicard-darkgreen:hover:not(.minicard-composer),
.is-selected .minicard-darkgreen,
.draggable-hover-card .minicard-darkgreen {
background: #006100;
}
.draggable-hover-card .minicard-darkgreen {
background: #005d00;
}
.minicard-slateblue {
background-color: #6a5acd !important;
color: #fff !important;
}
.minicard-slateblue:hover:not(.minicard-composer),
.is-selected .minicard-slateblue,
.draggable-hover-card .minicard-slateblue {
background: #6453cb;
}
.draggable-hover-card .minicard-slateblue {
background: #5c4ac8;
}
.minicard-magenta {
background-color: #f0f !important;
color: #fff !important;
}
.minicard-magenta:hover:not(.minicard-composer),
.is-selected .minicard-magenta,
.draggable-hover-card .minicard-magenta {
background: #f700f7;
}
.draggable-hover-card .minicard-magenta {
background: #ed00ed;
}
.minicard-gold {
background-color: #ffd700 !important;
}
.minicard-gold:hover:not(.minicard-composer),
.is-selected .minicard-gold,
.draggable-hover-card .minicard-gold {
background: #f7d100;
}
.draggable-hover-card .minicard-gold {
background: #edc800;
}
.minicard-navy {
background-color: #000080 !important;
color: #fff !important;
}
.minicard-navy:hover:not(.minicard-composer),
.is-selected .minicard-navy,
.draggable-hover-card .minicard-navy {
background: #00007c;
}
.draggable-hover-card .minicard-navy {
background: #007;
}
.minicard-gray {
background-color: #808080 !important;
color: #fff !important;
}
.minicard-gray:hover:not(.minicard-composer),
.is-selected .minicard-gray,
.draggable-hover-card .minicard-gray {
background: #7c7c7c;
}
.draggable-hover-card .minicard-gray {
background: #777;
}
.minicard-saddlebrown {
background-color: #8b4513 !important;
color: #fff !important;
}
.minicard-saddlebrown:hover:not(.minicard-composer),
.is-selected .minicard-saddlebrown,
.draggable-hover-card .minicard-saddlebrown {
background: #874312;
}
.draggable-hover-card .minicard-saddlebrown {
background: #814012;
}
.minicard-paleturquoise {
background-color: #afeeee !important;
}
.minicard-paleturquoise:hover:not(.minicard-composer),
.is-selected .minicard-paleturquoise,
.draggable-hover-card .minicard-paleturquoise {
background: #a5ecec;
}
.draggable-hover-card .minicard-paleturquoise {
background: #97e9e9;
}
.minicard-mistyrose {
background-color: #ffe4e1 !important;
}
.minicard-mistyrose:hover:not(.minicard-composer),
.is-selected .minicard-mistyrose,
.draggable-hover-card .minicard-mistyrose {
background: #ffd7d3;
}
.draggable-hover-card .minicard-mistyrose {
background: #ffc6bf;
}
.minicard-indigo {
background-color: #4b0082 !important;
color: #fff !important;
}
.minicard-indigo:hover:not(.minicard-composer),
.is-selected .minicard-indigo,
.draggable-hover-card .minicard-indigo {
background: #49007e;
}
.draggable-hover-card .minicard-indigo {
background: #460079;
}
.text-red {
color: #f00;
}
.text-green {
color: #008000;
}

335
client/components/cards/minicard.styl
View file

@ -1,335 +0,0 @@
@import 'nib'
.minicard-wrapper
cursor: pointer
position: relative
display: flex
align-items: center
margin-bottom: 9px
&.placeholder
background: darken(white, 20%)
border-radius: 9px
&.ui-sortable-helper
cursor: grabbing
transform: rotate(4deg)
display: block !important
.and-n-other
width: 100%
height: 16px
padding: 4px
background-color: darken(white, 5%)
text-align: center
border-radius: 3px
.multi-selection-checkbox
display: none
.multi-selection-checkbox + .minicard
margin-left: 8px
.minicard
padding: 6px 8px 2px
position: relative
flex: 1
flex-wrap: wrap
background-color: #fff
min-height: 20px
box-shadow: 0 1px 2px rgba(0,0,0,.15)
border-radius: 2px
color: #4d4d4d
overflow: hidden
transition: transform 0.2s,
border-radius 0.2s
&.linked-board
&.linked-card
.linked-icon
display: inline-block
margin-right: 11px
vertical-align: baseline
font-size: 0.9em
.linked-archived
color: #937760
.is-selected &
transform: translateX(11px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 25
box-shadow: -2px 1px 2px rgba(0,0,0,.2)
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(white, 3%)
.draggable-hover-card &
background: darken(white, 7%)
.minicard-cover
background-position: center
background-repeat: no-repeat
background-size: contain
height: 145px
user-select: none
margin: -6px -8px 6px -8px
border-radius: top 2px
.minicard-labels
float: none
.minicard-label
width: 11px
height: @width
border-radius: 2px
margin-right: 3px
margin-bottom: 3px
.minicard-labels-no-text
display: flex
flex-wrap: wrap
.minicard-custom-fields
display:block;
.minicard-custom-field
display:flex;
.minicard-custom-field-item
flex-grow: 1
display: block
word-wrap: break-word
max-width: 100px
margin-right: 4px
.handle
width: 20px;
height: 20px;
position: absolute;
right: 5px;
top: 5px;
display:none;
@media only screen {
display:block;
}
.fa-arrows
font-size:20px;
color: #ccc;
.minicard-title
.card-number
color: darken(white, 30%);
display: inline-block;
margin-right: 5px;
p:last-child
margin-bottom: 0
.viewer
display: block
word-wrap: break-word
max-width: 230px
.dates
display: flex;
flex-direction: row;
flex-wrap: wrap;
.date
margin-right: 3px
.badges
float: left
margin-top: 7px
color: darken(white, 50%)
&:empty
display: none
.badge
float: left
margin-right: 11px
margin-bottom: 3px
font-size: 0.9em
&.is-finished
background: #3cb500
padding: 0px 3px
border-radius: 3px
color: white
&:last-of-type
margin-right: 0
.badge-icon,
.badge-text
vertical-align: middle
&.badge-comment
margin-bottom: 0.1rem
.badge-text
font-size: 0.9em
padding-left: 2px
line-height: 14px
.check-list-text
padding-left: 0px
line-height: 12px
.minicard-members,
.minicard-assignees,
.minicard-creator
float: right
margin-left: 5px
margin-bottom: 4px
.member
float: right
border-radius: 50%
height: 28px
width: @height
margin-bottom: 4px
.assignee
float: right
border-radius: 50%
height: 28px
width: @height
+ .badges
margin-top: 5px
.minicard-assignees
border-bottom: 1px solid red
.minicard-creator
border-bottom: 1px solid green
.minicard-members:empty,
.minicard-assignees:empty
display: none
.minicard-description {
padding: 6px 0 6px 8px
background-color: #eee
width: 100%
margin-bottom: 2px
margin-left: -4px
border-radius: 3px
display: inline-block
}
&.minicard-composer
margin-bottom: 10px
textarea.minicard-composer-textarea,
textarea.minicard-composer-textarea:focus
resize: none
background: none
border: none
box-shadow: none
height: auto
margin: 0
padding: 0
max-height: 162px
min-height: 36px
margin-bottom: 20px
overflow-y: auto
.parent-prefix
color: darken(white, 30%)
font-size: 0.9em
.parent-subtext
color: darken(white, 30%)
font-size: 0.9em
@media screen and (max-width: 800px)
.minicard
.is-selected &
transform: translateX(0px)
border-bottom-right-radius: 0
border-top-right-radius: 0
z-index: 15
box-shadow: 0 1px 2px rgba(0,0,0,.15)
/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */
minicard-color(background, color...)
background-color: background !important
if color
color: color !important //overwrite text for better visibility
&:hover:not(.minicard-composer),
.is-selected &,
.draggable-hover-card &
background: darken(background, 3%)
.draggable-hover-card &
background: darken(background, 7%)
.minicard-green
minicard-color(#3cb500, #ffffff) //White text for better visibility
.minicard-yellow
minicard-color(#fad900)
.minicard-orange
minicard-color(#ff9f19)
.minicard-red
minicard-color(#eb4646, #ffffff) //White text for better visibility
.minicard-purple
minicard-color(#a632db, #ffffff) //White text for better visibility
.minicard-blue
minicard-color(#0079bf, #ffffff) //White text for better visibility
.minicard-pink
minicard-color(#ff78cb)
.minicard-sky
minicard-color(#00c2e0, #ffffff) //White text for better visibility
.minicard-black
minicard-color(#4d4d4d, #ffffff) //White text for better visibility
.minicard-lime
minicard-color(#51e898)
.minicard-silver
minicard-color(#c0c0c0)
.minicard-peachpuff
minicard-color(#ffdab9)
.minicard-crimson
minicard-color(#dc143c, #ffffff) //White text for better visibility
.minicard-plum
minicard-color(#dda0dd)
.minicard-darkgreen
minicard-color(#006400, #ffffff) //White text for better visibility
.minicard-slateblue
minicard-color(#6a5acd, #ffffff) //White text for better visibility
.minicard-magenta
minicard-color(#ff00ff, #ffffff) //White text for better visibility
.minicard-gold
minicard-color(#ffd700)
.minicard-navy
minicard-color(#000080, #ffffff) //White text for better visibility
.minicard-gray
minicard-color(#808080, #ffffff) //White text for better visibility
.minicard-saddlebrown
minicard-color(#8b4513, #ffffff) //White text for better visibility
.minicard-paleturquoise
minicard-color(#afeeee)
.minicard-mistyrose
minicard-color(#ffe4e1)
.minicard-indigo
minicard-color(#4b0082, #ffffff) //White text for better visibility
.text-red
color:red
.text-green
color:green

25
client/components/cards/resultCard.css Normal file
View file

@ -0,0 +1,25 @@
.result-card-list-wrapper {
margin: 1rem;
border-radius: 5px;
padding: 1.5rem;
padding-top: 0.75rem;
display: inline-block;
min-width: 250px;
max-width: 350px;
}
.result-card-wrapper {
margin-top: 0;
margin-bottom: 10px;
}
.result-card-context {
display: inline-block;
}
.result-card-context-separator {
font-weight: bold;
}
.result-card-context-list {
margin-bottom: 0.7rem;
}
.result-card-block-wrapper {
display: inline-block;
}

24
client/components/cards/resultCard.styl
View file

@ -1,24 +0,0 @@
.result-card-list-wrapper
margin: 1rem
border-radius: 5px
padding: 1.5rem
padding-top: 0.75rem
display: inline-block
min-width: 250px
max-width: 350px
.result-card-wrapper
margin-top: 0
margin-bottom: 10px
.result-card-context
display: inline-block
.result-card-context-separator
font-weight: bold
.result-card-context-list
margin-bottom: 0.7rem
.result-card-block-wrapper
display: inline-block

152
client/components/cards/subtasks.css Normal file
View file

@ -0,0 +1,152 @@
.js-add-subtask {
color: #8c8c8c;
}
textarea.js-add-subtask-item,
textarea.js-edit-subtask-item {
overflow: hidden;
word-wrap: break-word;
resize: none;
height: 34px;
}
.delete-text,
.subtask-title .js-delete-subtask,
.subtask-title .js-view-subtask,
.js-delete-subtask-item {
color: #8c8c8c;
text-decoration: underline;
word-wrap: break-word;
float: right;
padding-top: 6px;
}
.delete-text:hover,
.subtask-title .js-delete-subtask:hover,
.subtask-title .js-view-subtask:hover,
.js-delete-subtask-item:hover {
color: inherit;
}
.subtask-title .checkbox {
float: left;
width: 30px;
height: 30px;
font-size: 18px;
line-height: 30px;
}
.subtask-title .title {
font-size: 18px;
line-height: 25px;
}
.subtask-title .subtasks-stat {
margin: 0 0.5em;
float: right;
padding-top: 6px;
}
.subtask-title .subtasks-stat.is-finished {
color: #3cb500;
}
.subtask-title .js-delete-subtask {
margin: 0 0.5em;
}
.js-confirm-subtask-delete {
background-color: #f7f7f7;
position: absolute;
float: left;
width: 60%;
margin-top: 0;
margin-left: 13%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
z-index: 17;
border-radius: 3px;
}
.js-confirm-subtask-delete p {
position: relative;
margin-top: 3%;
width: 100%;
text-align: center;
}
.js-confirm-subtask-delete p span {
font-weight: bold;
}
.js-confirm-subtask-delete p i {
font-size: 2em;
}
.js-confirm-subtask-delete .js-subtask-delete-buttons {
position: relative;
padding: left 2% right 2%;
}
.js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete {
margin-left: 12%;
float: left;
}
.js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog {
margin-right: 12%;
float: right;
}
#card-details-overlay {
top: 0;
bottom: -600px;
right: 0;
}
.subtasks {
background: #f7f7f7;
}
.subtasks.placeholder {
background: #ccc;
border-radius: 2px;
}
.subtasks.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.subtasks-item {
margin: 0 0 0 0.1em;
line-height: 18px;
font-size: 1.1em;
margin-top: 3px;
display: flex;
background: #f7f7f7;
}
.subtasks-item.placeholder {
background: #ccc;
border-radius: 2px;
}
.subtasks-item.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.subtasks-item:hover {
background-color: #ebebeb;
}
.subtasks-item .check-box {
margin: 0.1em 0 0 0;
}
.subtasks-item .check-box.is-checked {
border-bottom: 2px solid #3cb500;
border-right: 2px solid #3cb500;
}
.subtasks-item .item-title {
flex: 1;
padding-left: 10px;
}
.subtasks-item .item-title.is-checked {
color: #8c8c8c;
font-style: italic;
}
.subtasks-item .item-title .viewer p {
margin-bottom: 2px;
}
.js-delete-subtask-item {
margin: 0 0 0.5em 1.33em;
padding: 12px 0 0 0;
}
.add-subtask-item {
margin: 0.2em 0 0.5em 1.33em;
display: inline-block;
}
.subtask-details-menu {
float: right;
padding: 6px 10px 6px 10px;
}

146
client/components/cards/subtasks.styl
View file

@ -1,146 +0,0 @@
.js-add-subtask
color: #8c8c8c
textarea.js-add-subtask-item, textarea.js-edit-subtask-item
overflow: hidden
word-wrap: break-word
resize: none
height: 34px
.delete-text
color: #8c8c8c
text-decoration: underline
word-wrap: break-word
float: right
padding-top: 6px
&:hover
color: inherit
.subtask-title
.checkbox
float: left
width: 30px
height 30px
font-size: 18px
line-height: 30px
.title
font-size: 18px
line-height: 25px
.subtasks-stat
margin: 0 0.5em
float: right
padding-top: 6px
&.is-finished
color: #3cb500
.js-delete-subtask
@extends .delete-text
margin: 0 0.5em
.js-view-subtask
@extends .delete-text
.js-confirm-subtask-delete
background-color: darken(white, 3%)
position: absolute
float: left;
width: 60%
margin-top: 0
margin-left: 13%
padding-bottom: 2%
padding-left: 3%
padding-right: 3%
z-index: 17
border-radius: 3px
p
position: relative
margin-top: 3%
width: 100%
text-align: center
span
font-weight: bold
i
font-size: 2em
.js-subtask-delete-buttons
position: relative
padding: left 2% right 2%
.confirm-subtask-delete
margin-left: 12%
float: left
.toggle-delete-subtask-dialog
margin-right: 12%
float: right
#card-details-overlay
top: 0
bottom: -600px
right: 0
.subtasks
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.subtasks-item
margin: 0 0 0 0.1em
line-height: 18px
font-size: 1.1em
margin-top: 3px
display: flex
background: darken(white, 3%)
&.placeholder
background: darken(white, 20%)
border-radius: 2px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
&:hover
background-color: darken(white, 8%)
.check-box
margin: 0.1em 0 0 0;
&.is-checked
border-bottom: 2px solid #3cb500
border-right: 2px solid #3cb500
.item-title
flex: 1
padding-left: 10px;
&.is-checked
color: #8c8c8c
font-style: italic
& .viewer
p
margin-bottom: 2px
.js-delete-subtask-item
margin: 0 0 0.5em 1.33em
@extends .delete-text
padding: 12px 0 0 0
.add-subtask-item
margin: 0.2em 0 0.5em 1.33em
display: inline-block
.subtask-details-menu
float: right
padding: 6px 10px 6px 10px

22
client/components/forms/datepicker.css Normal file
View file

@ -0,0 +1,22 @@
.datepicker-container .fields .left {
width: 56%;
}
.datepicker-container .fields .right {
width: 38%;
}
.datepicker-container .datepicker {
width: 100%;
}
.datepicker-container .datepicker table {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: collapse;
}
.datepicker-container .datepicker table thead {
background: none;
}
.datepicker-container .datepicker table td,
.datepicker-container .datepicker table th {
box-sizing: border-box;
}

17
client/components/forms/datepicker.styl
View file

@ -1,17 +0,0 @@
.datepicker-container
.fields
.left
width: 56%
.right
width: 38%
.datepicker
width: 100%
table
width: 100%
border: none
border-spacing: 0
border-collapse: collapse
thead
background: none
td, th
box-sizing: border-box

736
client/components/forms/forms.css Normal file
View file

@ -0,0 +1,736 @@
select,
textarea,
input:not([type=file]),
button {
box-sizing: border-box;
background-color: #ebebeb;
border: 1px solid #ccc;
border-radius: 3px;
display: block;
margin-bottom: 12px;
min-height: 34px;
padding: 7px;
}
select.full,
textarea.full,
input:not([type=file]).full,
button.full {
width: 100%;
}
select.input-error,
textarea.input-error,
input:not([type=file]).input-error,
button.input-error {
background-color: #ece9e9;
border-color: #ba1212;
}
select:focus,
textarea:focus,
input:not([type=file]):focus,
button:focus {
outline: 0;
}
input[type="file"] {
margin-bottom: 16px;
}
input[type="radio"] {
-webkit-appearance: radio;
min-height: inherit;
}
input[type="text"],
input[type="password"],
input[type="email"] {
transition: background 85ms ease-in, border-color 85ms ease-in;
width: 250px;
}
input[type="text"].inline-input,
input[type="password"].inline-input,
input[type="email"].inline-input {
background: none;
border: 0;
margin: 0;
padding: 2px;
min-height: 0;
height: 18px;
width: 200px;
}
input[type="text"].full-line,
input[type="password"].full-line,
input[type="email"].full-line {
width: 100%;
}
input[type="email"]:invalid {
box-shadow: none;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
textarea:hover {
border-color: #999;
}
input[type="text"]:hover.input-error,
input[type="password"]:hover.input-error,
input[type="email"]:hover.input-error,
textarea:hover.input-error {
border-color: #ba1212;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
background: #fff;
border-color: #318ec4;
box-shadow: 0 0 2px #318ec4;
}
input[type="text"]:focus.input-error,
input[type="password"]:focus.input-error,
input[type="email"]:focus.input-error,
textarea:focus.input-error {
background-color: #f8f7f7;
border-color: #ba1212;
box-shadow: 0 0 2px #d11515;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
textarea:disabled {
background-color: #dcdcdc;
border-color: #bfbfbf;
color: #8c8c8c;
-webkit-touch-callout: none;
user-select: none;
}
select {
max-height: 300px;
width: 256px;
margin-bottom: 8px;
}
select.inline {
width: 100%;
}
option[disabled] {
color: #8c8c8c;
}
textarea {
height: 150px;
transition: background 85ms ease-in, border-color 85ms ease-in;
resize: vertical;
width: 100%;
}
textarea.editor {
resize: none;
padding-bottom: 22px;
}
.button {
border-radius: 3px;
text-decoration: none;
position: relative;
}
input[type="submit"],
button {
background: #cfcfcf;
background: linear-gradient(#cfcfcf, #c2c2c2);
border: none;
cursor: pointer;
display: inline-block;
font-weight: 700;
line-height: 22px;
padding: 7px 20px;
text-align: center;
}
input[type="submit"] .wide,
button .wide {
padding-left: 30px;
padding-right: 30px;
}
input[type="submit"]:hover,
button:hover,
input[type="submit"]:focus,
button:focus {
background: #c2c2c2;
background: linear-gradient(#c2c2c2, #b5b5b5);
}
input[type="submit"]:active,
button:active {
background: #b5b5b5;
background: linear-gradient(#b5b5b5, #a8a8a8);
box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
}
input[type="submit"]:active:hover,
button:active:hover,
input[type="submit"]:active:focus,
button:active:focus,
input[type="submit"]:active:active,
button:active:active {
background: #e6e6e6;
background: linear-gradient(#e6e6e6, #e6e6e6);
}
input[type="submit"].primary,
button.primary {
background: #005377;
box-shadow: 0 1px 0 #4d4d4d;
color: #fff;
}
input[type="submit"].primary:hover,
button.primary:hover,
input[type="submit"].primary:focus,
button.primary:focus {
background: #004766;
}
input[type="submit"].primary:active,
button.primary:active {
background: #01628c;
}
input[type="submit"].negate:hover,
button.negate:hover,
input[type="submit"].negate:focus,
button.negate:focus {
background: #990f0f;
background: linear-gradient(#990f0f, #7d0c0c);
box-shadow: 0 1px 0 #4d4d4d;
color: #fff;
}
input[type="submit"].negate:active,
button.negate:active {
background: #7d0c0c;
box-shadow: 0 1px 0 #4d4d4d;
color: #fff;
}
input[type="submit"] i.fa,
button i.fa {
margin-right: 10px;
}
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="button"].disabled,
button.disabled,
.button.disabled,
input[type="submit"].disabled:hover,
input[type="submit"]:disabled:hover,
input[type="button"].disabled:hover,
button.disabled:hover,
.button.disabled:hover,
input[type="submit"].disabled:active,
input[type="submit"]:disabled:active,
input[type="button"].disabled:active,
button.disabled:active,
.button.disabled:active {
background: #cfcfcf;
cursor: default;
box-shadow: none;
color: #a8a8a8;
}
fieldset {
border: 1px solid #bfbfbf;
padding: 15px;
margin-bottom: 15px;
}
input[type="hidden"] {
display: none;
}
.radio-div,
.check-div {
display: block;
margin: 0 0 4px 20px;
min-height: 20px;
position: relative;
}
.radio-div input,
.check-div input {
left: -18px;
min-height: 0;
margin: 0;
padding: 0;
position: absolute;
top: 2px;
}
.radio-div label,
.check-div label {
font-weight: 400;
}
label {
display: block;
font-weight: 700;
margin-bottom: 4px;
}
label.form-error {
color: #ba1212;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #8c8c8c;
}
.edit-controls,
.add-controls {
display: flex;
align-items: center;
margin-top: 0px;
margin-bottom: 12px;
}
.edit-controls button[type=submit],
.add-controls button[type=submit],
.edit-controls input[type=button],
.add-controls input[type=button] {
float: left;
height: 32px;
margin-bottom: 0px;
}
.edit-controls .fa-times-thin,
.add-controls .fa-times-thin {
font-size: 26px;
margin: 3px 10px;
}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
visibility: hidden;
display: none;
}
.materialCheckBox {
position: relative;
width: 13px;
height: 13px;
z-index: 0;
border: 2px solid #5a5a5a;
border-radius: 1px;
transition: 0.2s;
margin: 0;
cursor: pointer;
}
.materialCheckBox.is-checked {
top: -4px;
left: -3px;
width: 7px;
height: 15px;
margin-right: 6px;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
transform-origin: 100% 100%;
}
.button-link {
background: #fff;
background: linear-gradient(#fff, #f5f5f5);
border-radius: 3px;
box-sizing: border-box;
user-select: none;
border: 1px solid #e3e3e3;
border-bottom-color: #c2c2c2;
cursor: pointer;
display: block;
font-weight: 700;
height: 34px;
margin-top: 6px;
max-width: 300px;
padding: 7px;
position: relative;
text-decoration: none;
overflow: ellipsis;
}
.button-link .on {
background: #48b512;
background: linear-gradient(#48b512, #3d990f);
border-radius: 3px;
color: #fff;
display: none;
font-size: 12px;
font-weight: 700;
height: 17px;
line-height: 17px;
margin: 0;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 5px;
text-align: center;
}
.button-link.is-on {
padding-right: 30px;
max-width: 196px;
}
.button-link.is-on .on {
display: block;
}
.button-link.inline {
color: #666;
padding: 2px 14px;
margin-left: 4px;
}
.button-link.setting {
height: 52px;
float: left;
position: relative;
margin-top: 0;
}
.button-link.setting.disabled {
background: #fff;
border-color: #e9e9e9;
color: #8c8c8c;
cursor: default;
}
.button-link.setting.disabled select {
display: none;
}
.button-link.setting.disabled:hover .label {
color: #8c8c8c;
}
.button-link.setting.disabled,
.button-link.setting.disabled:hover,
.button-link.setting.disabled:active,
.button-link.setting.disabled.primary,
.button-link.setting.disabled.primary:hover,
.button-link.setting.disabled.primary:active {
background: #cfcfcf;
border-color: #c2c2c2;
border-bottom-color: #b5b5b5;
cursor: default;
box-shadow: none;
color: #a8a8a8;
}
.button-link.setting .label {
color: #8c8c8c;
display: block;
font-size: 12px;
line-height: 14px;
margin-bottom: 0;
}
.button-link.setting:hover .label {
color: #eee;
}
.button-link.setting .value {
display: block;
font-size: 18px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
}
.button-link.setting label {
display: none;
}
.button-link.setting select {
border: none;
cursor: pointer;
height: 50px;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: 2;
width: 100%;
}
.button-link:hover {
background: #318ec4;
background: linear-gradient(#318ec4, #2b7cab);
border-color: #2e85b8;
color: #fff;
}
.button-link:hover .on {
background-image: none;
background-color: rgba(255,255,255,0.3);
border-color: transparent;
}
.button-link:active {
background: #2e85b8;
background: linear-gradient(#2e85b8, #28739f);
border-color: #2b7cab;
color: #fff;
}
.button-link .button-link.negate:hover {
background: #990f0f;
background: linear-gradient(#990f0f, #7d0c0c);
border-color: linear-gradient(#990f0f, #7d0c0c);
}
.button-link .button-link.negate:active {
background: #7d0c0c;
border-color: #990f0f;
}
.button-link.primary {
background: #48b512;
background: linear-gradient(#48b512, #3d990f);
border: 1px solid;
border-color: #3d990f;
color: #fff;
}
.button-link.primary:hover {
background: #3d990f;
background: linear-gradient(#3d990f, #327d0c);
border-color: #3d990f;
}
.button-link.danger {
background: #ba1212;
background: linear-gradient(#ba1212, #8b0e0e);
border: 1px solid;
border-color: #a21010;
color: #fff;
}
.button-link.danger:hover {
background: #a21010;
background: linear-gradient(#a21010, #740b0b);
border-color: #8b0e0e;
}
button.quiet-button,
button.loud-text-button {
background: none;
text-align: left;
line-height: normal;
border: none;
box-shadow: none;
}
button.quiet-button:active,
button.loud-text-button:active {
color: #4d4d4d;
background: #d3d3d3;
box-shadow: none;
}
button.quiet-button {
font-weight: 400;
text-decoration: underline;
}
button.loud-text-button {
width: 100%;
}
button.loud-text-button:hover {
color: #111;
}
.emphasis-button,
.quiet-button {
border-radius: 3px;
user-select: none;
color: #8c8c8c;
display: block;
margin: 2px 0;
padding: 6px 8px;
position: relative;
}
.emphasis-button.w-img,
.quiet-button.w-img {
padding-left: 28px;
}
.emphasis-button:hover,
.quiet-button:hover {
color: #4d4d4d;
background: #dcdcdc;
}
.emphasis-button:active,
.quiet-button:active {
color: #4d4d4d;
background: #d3d3d3;
}
.quiet-button-large {
padding: 16px 24px;
}
.emphasis-button {
color: #74663e;
background: #ecdfbb;
}
.emphasis-button:hover {
color: #53492d;
background: #e7d6a7;
}
.emphasis-button:active {
color: #53492d;
background: #e1cc93;
}
.is-editable {
cursor: pointer;
}
.big-link {
border-radius: 3px;
display: block;
margin: 6px 0 6px 40px;
padding: 11px;
position: relative;
text-decoration: none;
font-size: 16px;
line-height: 20px;
}
.big-link .text {
text-decoration: underline;
}
.big-link:hover {
background: #dcdcdc;
}
.big-link.options {
padding-right: 41px;
}
.big-link .option {
height: 30px;
width: 30px;
position: absolute;
right: 6px;
top: 6px;
}
.big-link.none {
color: #8c8c8c;
text-decoration: none;
}
.big-link.none:hover {
background: transparent;
}
.big-link.avatar-changer {
padding-right: 51px;
}
.big-link.avatar-changer .member {
border: 1px solid #ccc;
border-radius: 3px;
height: 40px;
width: 40px;
position: absolute;
right: 0;
top: 0;
}
.big-link.avatar-changer .member .member-avatar {
height: 40px;
width: 40px;
}
.big-link.avatar-changer .member .member-initials {
font-size: 16px;
height: 40px;
line-height: 40px;
max-height: 40px;
}
.show-more {
border-radius: 3px;
color: #8c8c8c;
display: block;
padding: 16px 8px 16px 40px;
margin: 8px 0;
}
.show-more:hover {
background: #dcdcdc;
text-decoration: underline;
}
.show-more.compact {
padding: 12px 8px;
margin: 8px 0 0;
text-align: center;
}
.board-widget .show-more {
padding: 12px 8px 12px 40px;
}
.uploader {
clear: both;
cursor: pointer;
position: relative;
height: 34px;
width: 100%;
}
.uploader .realfile {
cursor: pointer;
height: 34px;
line-height: 34px;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
font-size: 23px;
}
.uploader .realfile input[type="file"] {
cursor: pointer;
height: 34px;
line-height: 34px;
margin: 0;
opacity: 0;
padding: 0;
width: 100%;
z-index: 2;
font-size: 23px;
}
.uploader:hover .fakefile {
background: #318ec4;
background: linear-gradient(#318ec4, #2b7cab);
border-color: #2e85b8;
color: #fff;
}
.dropdown-menu {
border-radius: 2px;
overflow: hidden;
}
.dropdown-menu li {
border-top: none;
}
.dropdown-menu li a {
padding: 4px 12px 4px 8px;
}
.dropdown-menu li a img {
width: 18px;
height: 18px;
margin-right: 5px;
vertical-align: middle;
}
.dropdown-menu li a .minicard-label {
width: 11px;
height: 11px;
border-radius: 2px;
margin: 2px 7px -2px -2px;
display: inline-block;
}
.dropdown-menu li.active {
background: #005377;
}
.dropdown-menu li.active a,
.dropdown-menu li.active .quiet {
color: #fff;
}
.material-toggle-switch {
display: flex;
}
.toggle-label {
position: relative;
display: block;
height: 20px;
width: 44px;
background-color: #a6a6a6;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle-label:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 26px;
height: 26px;
border-radius: 100px;
background-color: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.toggle-label:active:after {
transform: scale(1.15, 0.85);
}
.toggle-switch:checked ~ .toggle-label {
background-color: #6fbeb5;
}
.toggle-switch:checked ~ .toggle-label:after {
left: 20px;
background-color: #179588;
}
.toggle-switch:checked:disabled ~ .toggle-label {
background-color: #d5d5d5;
pointer-events: none;
}
.toggle-switch:checked:disabled ~ .toggle-label:after {
background-color: #bcbdbc;
}
.toggle-switch {
display: none;
}
.toggle-switch-title {
margin: 0 0.5em;
display: flex;
}
@media screen and (max-width: 800px) {
.edit-controls .fa-times-thin,
.add-controls .fa-times-thin {
margin: 3px 20px;
}
}

695
client/components/forms/forms.styl
View file

@ -1,695 +0,0 @@
@import 'nib'
select,
textarea,
input:not([type=file]),
button
box-sizing: border-box
background-color: #ebebeb
border: 1px solid #ccc
border-radius: 3px
display: block
margin-bottom: 12px
min-height: 34px
padding: 7px
&.full
width: 100%
&.input-error
background-color: #ece9e9
border-color: #ba1212
&:focus
outline: 0
input[type="file"]
margin-bottom: 16px
input[type="radio"]
-webkit-appearance: radio
min-height: inherit
input[type="text"],
input[type="password"],
input[type="email"]
transition: background 85ms ease-in,
border-color 85ms ease-in
width: 250px
&.inline-input
background: none
border: 0
margin: 0
padding: 2px
min-height: 0
height: 18px
width: 200px
&.full-line
width: 100%
input[type="email"]:invalid
box-shadow: none
input[type="text"],
input[type="password"],
input[type="email"],
textarea
&:hover
border-color: #999
&.input-error
border-color: #ba1212
&:focus
background: #fff
border-color: #318ec4
box-shadow: 0 0 2px #318ec4
&.input-error
background-color: #f8f7f7
border-color: #ba1212
box-shadow: 0 0 2px #d11515
&:disabled
background-color: #dcdcdc
border-color: #bfbfbf
color: #8c8c8c
-webkit-touch-callout: none
user-select: none
select
max-height: 300px
width: 256px
margin-bottom: 8px
&.inline
width: 100%
option[disabled]
color: #8c8c8c
textarea
height: 150px
transition: background 85ms ease-in,
border-color 85ms ease-in
resize: vertical
width: 100%
&.editor
resize: none
padding-bottom: 22px
.button
border-radius: 3px
text-decoration: none
position: relative
input[type="submit"],
button
background: #cfcfcf
background: linear-gradient(#cfcfcf, #c2c2c2)
border: none
cursor: pointer
display: inline-block
font-weight: 700
line-height: 22px
padding: 7px 20px
text-align: center
.wide
padding-left: 30px
padding-right: 30px
&:hover,
&:focus
background: #c2c2c2
background: linear-gradient(#c2c2c2, #b5b5b5)
&:active
background: #b5b5b5
background: linear-gradient(#b5b5b5, #a8a8a8)
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
&:hover,
&:focus,
&:active
background: #e6e6e6
background: linear-gradient(#e6e6e6, #e6e6e6)
&.primary
background: #005377
box-shadow: 0 1px 0 #4d4d4d
color: white
&:hover,
&:focus
background: #004766
&:active
background: #01628C
&.negate
&:hover,
&:focus
background: #990f0f
background: linear-gradient(#990f0f, #7d0c0c)
box-shadow: 0 1px 0 #4d4d4d
color: #fff
&:active
background: #7d0c0c
box-shadow: 0 1px 0 #4d4d4d
color: #fff
i.fa
margin-right: 10px
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="button"].disabled,
button.disabled,
.button.disabled
&,
&:hover,
&:active
background: #cfcfcf
cursor: default
box-shadow: none
color: #a8a8a8
fieldset
border: 1px solid #bfbfbf
padding: 15px
margin-bottom: 15px
input[type="hidden"]
display: none
.radio-div,
.check-div
display: block
margin: 0 0 4px 20px
min-height: 20px
position: relative
input
left: -18px
min-height: 0
margin: 0
padding: 0
position: absolute
top: 2px
label
font-weight: 400
label
display: block
font-weight: 700
margin-bottom: 4px
&.form-error
color: #ba1212
input,
textarea
&::-webkit-input-placeholder,
&::-moz-placeholder
color: #8c8c8c
.edit-controls,
.add-controls
display: flex
align-items: center
margin-top: 0px
margin-bottom: 12px
button[type=submit]
input[type=button]
float: left
height: 32px
margin-bottom: 0px
.fa-times-thin
font-size: 26px
margin: 3px 10px
// Material Design checkboxes
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked
position: absolute
left: -9999px
visibility: hidden
display: none
.materialCheckBox
position: relative
width: 13px
height: @width
z-index: 0
border: 2px solid #5a5a5a
border-radius: 1px
transition: .2s
margin: 0
cursor: pointer
&.is-checked
top: -4px
left: -3px
width: 7px
height: 15px
margin-right: 6px
border-top: 2px solid transparent
border-left: 2px solid transparent
transform: rotate(40deg)
-webkit-backface-visibility: hidden
transform-origin: 100% 100%
.button-link
background: #fff
background: linear-gradient(#fff, #f5f5f5)
border-radius: 3px
box-sizing: border-box
user-select: none
border: 1px solid #e3e3e3
border-bottom-color: #c2c2c2
cursor: pointer
display: block
font-weight: 700
height: 34px
margin-top: 6px
max-width: 300px
padding: 7px
position: relative
text-decoration: none
overflow: ellipsis
.on
background: #48b512
background: linear-gradient(#48b512, #3d990f)
border-radius: 3px
color: #fff
display: none
font-size: 12px
font-weight: 700
height: 17px
line-height: @height
margin: 0
padding: 2px 4px
position: absolute
right: 5px
top: 5px
text-align: center
&.is-on
padding-right: 30px
max-width: 196px
.on
display: block
&.inline
color: #666
padding: 2px 14px
margin-left: 4px
&.setting
height: 52px
float: left
position: relative
margin-top: 0
&.disabled
background: #fff
border-color: #e9e9e9
color: #8c8c8c
cursor: default
select
display: none
&:hover .label
color: #8c8c8c
&,
&:hover,
&:active,
&.primary,
&.primary:hover,
&.primary:active
background: #cfcfcf
border-color: #c2c2c2
border-bottom-color: #b5b5b5
cursor: default
box-shadow: none
color: #a8a8a8
.label
color: #8c8c8c
display: block
font-size: 12px
line-height: 14px
margin-bottom: 0
&:hover .label
color: #eee
.value
display: block
font-size: 18px
line-height: 24px
overflow: hidden
text-overflow: ellipsis
label
display: none
select
border: none
cursor: pointer
height: 50px
left: 0
margin: 0
opacity: 0
position: absolute
top: 0
z-index: 2
width: 100%
&:hover
background: #318ec4
background: linear-gradient(#318ec4, #2b7cab)
border-color: #2e85b8
color: #fff
.on
background-image: none
background-color: rgba(255, 255, 255, .3)
border-color: transparent
&:active
background: #2e85b8
background: linear-gradient(#2e85b8, #28739f)
border-color: #2b7cab
color: #fff
.button-link.negate
&:hover
background: #990f0f
background: linear-gradient(#990f0f, #7d0c0c)
border-color: @background
&:active
background: #7d0c0c
border-color: #990f0f
&.primary
background: #48b512
background: linear-gradient(#48b512, #3d990f)
border: 1px solid
border-color: #3d990f
color: #fff
&:hover
background: #3d990f
background: linear-gradient(#3d990f, #327d0c)
border-color: #3d990f
&.danger
background: #ba1212
background: linear-gradient(#ba1212, #8b0e0e)
border: 1px solid
border-color: #a21010
color: #fff
&:hover
background: #a21010
background: linear-gradient(#a21010, #740b0b)
border-color: #8b0e0e
button
&.quiet-button,
&.loud-text-button
background: none
text-align: left
line-height: normal
border: none
box-shadow: none
&:active
color: #4d4d4d
background: #d3d3d3
box-shadow: none
&.quiet-button
font-weight: 400
text-decoration: underline
&.loud-text-button
width: 100%
&:hover
color: #111
.emphasis-button,
.quiet-button
border-radius: 3px
user-select: none
color: #8c8c8c
display: block
margin: 2px 0
padding: 6px 8px
position: relative
&.w-img
padding-left: 28px
&:hover
color: #4d4d4d
background: #dcdcdc
&:active
color: #4d4d4d
background: #d3d3d3
.quiet-button-large
padding: 16px 24px
.emphasis-button
color: #74663e
background: #ecdfbb
&:hover
color: #53492d
background: #e7d6a7
&:active
color: #53492d
background: #e1cc93
.is-editable
cursor: pointer
.big-link
border-radius: 3px
display: block
margin: 6px 0 6px 40px
padding: 11px
position: relative
text-decoration: none
font-size: 16px
line-height: 20px
.text
text-decoration: underline
&:hover
background: #dcdcdc
&.options
padding-right: 41px
.option
height: 30px
width: @height
position: absolute
right: 6px
top: 6px
&.none
color: #8c8c8c
text-decoration: none
&:hover
background: transparent
&.avatar-changer
padding-right: 51px
.member
border: 1px solid #ccc
border-radius: 3px
height: 40px
width: @height
position: absolute
right: 0
top: 0
.member-avatar
height: 40px
width: @height
.member-initials
font-size: 16px
height: 40px
line-height: @height
max-height: @height
.show-more
border-radius: 3px
color: #8c8c8c
display: block
padding: 16px 8px 16px 40px
margin: 8px 0
&:hover
background: #dcdcdc
text-decoration: underline
&.compact
padding: 12px 8px
margin: 8px 0 0
text-align: center
.board-widget .show-more
padding: 12px 8px 12px 40px
.uploader
clear: both
cursor: pointer
position: relative
height: 34px
width: 100%
.realfile
cursor: pointer
height: 34px
line-height: @height
position: absolute
top: 0
left: 0
width: 100%
z-index: 2
font-size: 23px
input[type="file"]
cursor: pointer
height: 34px
line-height: @height
margin: 0
opacity: 0
padding: 0
width: 100%
z-index: 2
font-size: 23px
&:hover .fakefile
background: #318ec4
background: linear-gradient(#318ec4, #2b7cab)
border-color: #2e85b8
color: #fff
.dropdown-menu
border-radius: 2px
overflow: hidden
li
border-top: none
a
padding: 4px 12px 4px 8px
img
width: 18px
height: @width
margin-right: 5px
vertical-align: middle
.minicard-label
width: 11px
height: @width
border-radius: 2px
margin: 2px 7px -2px -2px
display: inline-block
&.active
background: #005377
a, .quiet
color: white
// Material Design Toggle Switch
.material-toggle-switch
display: flex
.toggle-label
position: relative
display: block
height: 20px
width: 44px
background-color: #a6a6a6
border-radius: 100px
cursor: pointer
transition: all 0.3s ease
&:after
position: absolute
left: -2px
top: -3px
display: block
width: 26px
height: 26px
border-radius: 100px
background-color: #fff
box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
content: ''
transition: all 0.3s ease
&:active
&:after
transform: scale(1.15, 0.85)
.toggle-switch:checked ~ .toggle-label
background-color: #6fbeb5
&:after
left: 20px
background-color: #179588
.toggle-switch:checked:disabled ~ .toggle-label
background-color: #d5d5d5
pointer-events: none
&:after
background-color: #bcbdbc
.toggle-switch
display: none
.toggle-switch-title
margin: 0 0.5em
display: flex
@media screen and (max-width: 800px)
.edit-controls,
.add-controls
.fa-times-thin
margin: 3px 20px

51
client/components/import/import.css vendored Normal file
View file

@ -0,0 +1,51 @@
.map-members:after {
content: "";
flex: auto;
}
.map-members .mapping-list {
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
}
.map-members .mapping-list .mapping-item {
max-width: 300px;
min-width: 200px;
padding: 6px;
margin: 5px;
flex: 1;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.map-members .mapping-list .mapping-item:hover {
background: #f2f2f2;
}
.map-members .mapping-list .mapping-item.filled {
background: #e0ffe5;
}
.map-members .mapping-list .mapping-item.filled:hover {
background: #ffe0e0;
}
.map-members .mapping-list .mapping-item.ghost-item {
height: 0;
visibility: hidden;
border: none;
}
.map-members .mapping-list .profile-source {
display: inline-block;
width: 80%;
}
.map-members .mapping-list .wekan {
display: inline-block;
width: 35px;
}
.map-members .mapping-list .wekan .member {
float: none;
}
a.show-mapping {
text-decoration: underline;
}
.import-members-map-note {
font-size: 90%;
font-weight: bold;
}

53
client/components/import/import.styl vendored
View file

@ -1,53 +0,0 @@
@import 'nib'
.map-members
&:after
content: "";
flex: auto;
.mapping-list
display: flex
flex-wrap: wrap
margin: 0 -4px
.mapping-item
max-width: 300px
min-width: 200px
padding: 6px
margin: 5px
flex:1
background: white
border-radius: 3px
box-shadow: 0 1px 2px rgba(0,0,0,.15)
&:hover
background: darken(white, 5%)
&.filled
background: #E0FFE5
&:hover
background: #FFE0E0
&.ghost-item
height: 0
visibility: hidden
border: none
.profile-source
display: inline-block
width: 80%
.wekan
display: inline-block
width: 35px
.member
float: none
a.show-mapping
text-decoration underline
.import-members-map-note
font-size: 90%
font-weight: bold

345
client/components/lists/list.css Normal file
View file

@ -0,0 +1,345 @@
.list {
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
background: #dedede;
border-left: 1px solid #ccc;
padding: 0;
float: left;
min-width: 270px;
max-width: 270px;
}
.list:first-child {
margin-left: 5px;
border-left: none;
}
.card-details + .list {
border-left: none;
}
.list.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.list.ui-sortable-helper .list-header.ui-sortable-handle {
cursor: grabbing;
}
.list.placeholder {
background-color: rgba(0,0,0,0.2);
border-color: transparent;
box-shadow: none;
height: 100px;
}
.list.list-composer .open-list-composer,
.list .list-composer .open-list-composer {
color: #8c8c8c;
}
.list.list-composer .list-name-input,
.list .list-composer .list-name-input {
background: #fff;
margin: -3px 0 8px;
}
.list-header-add {
flex: 0 0 auto;
padding: 20px 12px 4px;
position: relative;
min-height: 20px;
}
.list-header {
flex: 0 0 auto;
padding: 20px 12px 4px;
position: relative;
min-height: 20px;
background-color: #e4e4e4;
border-bottom: 6px solid #e4e4e4;
}
.list-header.list-header-card-count {
min-height: 35px;
height: auto;
}
.list-header.ui-sortable-handle {
cursor: grab;
}
.list-header .list-header-left-icon {
display: none;
}
.list-header .list-header-name {
display: inline;
font-size: 16px;
line-height: 17px;
margin: 0;
font-weight: bold;
min-height: 9px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
.list-header .list-header-watch-icon {
padding-left: 10px;
color: #a6a6a6;
}
.list-header .list-header-menu {
float: right;
}
.list-header .list-header-plus-top {
color: #a6a6a6;
margin-right: 15px;
}
.list-header .highlight {
color: #ce1414;
}
.list-header .cardCount {
color: #8c8c8c;
font-size: 12px;
font-weight: bold;
}
.list-header .list-header-plus-top,
.js-open-list-menu,
.list-header-menu a {
color: #4d4d4d;
padding-left: 4px;
}
.list-body {
flex: 1 1 auto;
flex-direction: column;
display: flex;
overflow-y: auto;
padding: 5px 11px;
}
.list-body .minicards {
flex-grow: 1;
flex-shrink: 0;
}
.list-body .minicards form {
margin-bottom: 9px;
}
.list-body .open-minicard-composer {
border-radius: 2px;
color: #8c8c8c;
display: block;
padding: 7px 10px;
position: relative;
text-decoration: none;
animation: fadeIn 0.3s;
}
.list-body .open-minicard-composer i.fa {
margin-right: 7px;
}
.list-body .open-minicard-composer:hover {
background: #fafafa;
color: #222;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#js-wip-limit-edit {
padding-top: 2%;
}
#js-wip-limit-edit p {
margin-bottom: 0;
}
#js-wip-limit-edit input {
display: inline-block;
}
#js-wip-limit-edit .wip-limit-value {
width: 20%;
margin-right: 5%;
}
#js-wip-limit-edit .wip-limit-error {
display: none;
}
#js-wip-limit-edit .soft-wip-limit {
margin-right: 8px;
}
#js-wip-limit-edit div {
float: left;
}
@media screen and (max-width: 800px) {
.mini-list {
flex: 0 0 60px;
height: auto;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list {
display: contents;
flex-basis: auto;
width: 100%;
border-left: 0px;
}
.list:first-child {
margin-left: 0px;
}
.list.ui-sortable-helper {
flex: 0 0 60px;
height: 60px;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list.ui-sortable-helper .list-header.ui-sortable-handle {
cursor: grabbing;
}
.list.placeholder {
flex: 0 0 60px;
height: 60px;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list-body {
padding: 15px 19px;
}
.list-header {
padding: 0 12px 0px;
border-bottom: 0px solid #e4e4e4;
height: 60px;
margin-top: 10px;
display: flex;
align-items: center;
}
.list-header .list-header-left-icon {
padding: 7px;
padding-right: 27px;
margin-top: 1px;
top: -7px;
left: -7px;
}
.list-header .list-header-menu-icon {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 47px;
font-size: 20px;
}
.list-header .list-header-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 24px;
}
.list-header {
display: grid;
grid-template-columns: 30px 5fr 1fr;
}
.list-header .list-header-left-icon {
display: grid;
grid-row: 1/3;
grid-column: 1;
}
.list-header .list-header-name {
grid-row: 1;
grid-column: 2;
align-self: end;
}
.list-header .cardCount {
grid-row: 2;
grid-column: 2;
align-self: start;
}
.list-header .list-header-menu {
grid-row: 1/3;
grid-column: 3;
}
.list-header .inlined-form {
grid-row: 1/3;
grid-column: 1/4;
}
.list-header .edit-controls {
align-items: initial;
}
}
.link-board-wrapper {
display: flex;
align-items: baseline;
}
.link-board-wrapper .js-link-board {
margin-left: 15px;
}
.search-card-results {
max-height: 250px;
overflow: hidden;
}
.sk-spinner-list {
margin-top: unset !important;
}
.list-header-white {
border-bottom: 6px solid #fff;
border: 1px solid #eee;
}
.list-header-green {
border-bottom: 6px solid #3cb500;
}
.list-header-yellow {
border-bottom: 6px solid #fad900;
}
.list-header-orange {
border-bottom: 6px solid #ff9f19;
}
.list-header-red {
border-bottom: 6px solid #eb4646;
}
.list-header-purple {
border-bottom: 6px solid #a632db;
}
.list-header-blue {
border-bottom: 6px solid #0079bf;
}
.list-header-pink {
border-bottom: 6px solid #ff78cb;
}
.list-header-sky {
border-bottom: 6px solid #00c2e0;
}
.list-header-black {
border-bottom: 6px solid #4d4d4d;
}
.list-header-lime {
border-bottom: 6px solid #51e898;
}
.list-header-silver {
border-bottom: 6px solid unset;
}
.list-header-peachpuff {
border-bottom: 6px solid #ffdab9;
}
.list-header-crimson {
border-bottom: 6px solid #dc143c;
}
.list-header-plum {
border-bottom: 6px solid #dda0dd;
}
.list-header-darkgreen {
border-bottom: 6px solid #006400;
}
.list-header-slateblue {
border-bottom: 6px solid #6a5acd;
}
.list-header-magenta {
border-bottom: 6px solid #f0f;
}
.list-header-gold {
border-bottom: 6px solid #ffd700;
}
.list-header-navy {
border-bottom: 6px solid #000080;
}
.list-header-gray {
border-bottom: 6px solid #808080;
}
.list-header-saddlebrown {
border-bottom: 6px solid #8b4513;
}
.list-header-paleturquoise {
border-bottom: 6px solid #afeeee;
}
.list-header-mistyrose {
border-bottom: 6px solid #ffe4e1;
}
.list-header-indigo {
border-bottom: 6px solid #4b0082;
}

341
client/components/lists/list.styl
View file

@ -1,341 +0,0 @@
@import 'nib'
.list
box-sizing: border-box
display: flex
flex-direction: column
position: relative
// Even if this background color is the same as the body we can't leave it
// transparent, because that won't work during a list drag.
background: darken(white, 13%)
border-left: 1px solid darken(white, 20%)
padding: 0
float: left
min-width: 270px
max-width: 270px
&:first-child
margin-left: 5px
border-left: none
.card-details + &
border-left: none
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
cursor: grabbing
.list-header.ui-sortable-handle
cursor: grabbing
&.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
&.list-composer, & .list-composer
.open-list-composer
color: #8c8c8c
.list-name-input
background: white
margin: -3px 0 8px
.list-header-add
flex: 0 0 auto
padding: 20px 12px 4px
position: relative
min-height: 20px
.list-header
flex: 0 0 auto
padding: 20px 12px 4px
position: relative
min-height: 20px
background-color: #e4e4e4;
border-bottom: 6px solid #e4e4e4;
&.list-header-card-count
min-height: 35px
height: auto
&.ui-sortable-handle
cursor: grab
.list-header-left-icon
display: none
.list-header-name
display: inline
font-size: 16px
line-height: 17px
margin: 0
font-weight: bold
min-height: 9px
min-width: 30px
overflow: hidden
text-overflow: ellipsis
word-wrap: break-word
.list-header-watch-icon
padding-left: 10px
color: #a6a6a6
.list-header-menu
float: right
.list-header-plus-top
color: #a6a6a6
margin-right: 15px
.highlight
color: #ce1414
.cardCount
color: #8c8c8c
font-size: 12px
font-weight: bold
.list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a
color #4d4d4d
padding-left 4px
.list-body
flex: 1 1 auto
flex-direction: column
display: flex
overflow-y: auto
padding: 5px 11px
.minicards
flex-grow: 1
flex-shrink: 0
form
margin-bottom: 9px
.open-minicard-composer
border-radius: 2px
color: #8c8c8c
display: block
padding: 7px 10px
position: relative
text-decoration: none
animation: fadeIn 0.3s
i.fa
margin-right: 7px
&:hover
background: #fafafa
color: #222
box-shadow: 0 1px 2px rgba(0,0,0,.2)
#js-wip-limit-edit
padding-top: 2%
p
margin-bottom: 0
input
display: inline-block
.wip-limit-value
width: 20%
margin-right: 5%
.wip-limit-error
display: none
.soft-wip-limit
margin-right: 8px
div
float: left
@media screen and (max-width: 800px)
.mini-list
flex: 0 0 60px
height: auto
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list
display: contents
flex-basis: auto
width: 100%
border-left: 0px
&:first-child
margin-left: 0px
&.ui-sortable-helper
flex: 0 0 60px
height: 60px
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list-header.ui-sortable-handle
cursor: grabbing
&.placeholder
flex: 0 0 60px
height: 60px
width: 100%
border-left: 0px
border-bottom: 1px solid darken(white, 20%)
.list-body
padding: 15px 19px;
.list-header
padding: 0 12px 0px
border-bottom: 0px solid #e4e4e4
height: 60px
margin-top: 10px
display: flex
align-items: center
.list-header-left-icon
padding: 7px
padding-right: 27px
margin-top: 1px
top: -@padding
left: -@padding
.list-header-menu-icon
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 47px
font-size: 20px
.list-header-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
right: 10px
font-size: 24px
.list-header
display: grid
grid-template-columns: 30px 5fr 1fr
.list-header-left-icon
display: grid
grid-row: 1/3
grid-column: 1
.list-header-name
grid-row: 1
grid-column: 2
align-self: end
.cardCount
grid-row: 2
grid-column: 2
align-self: start
.list-header-menu
grid-row: 1/3
grid-column: 3
.inlined-form
grid-row: 1/3
grid-column: 1/4
.edit-controls
align-items: initial
.link-board-wrapper
display: flex
align-items: baseline
.js-link-board
margin-left: 15px
.search-card-results
max-height: 250px
overflow: hidden
.sk-spinner-list
margin-top: unset !important
list-header-color(background, color...)
border-bottom: 6px solid background
.list-header-white
list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
border: 1px solid #eee
.list-header-green
list-header-color(#3cb500, #ffffff) //White text for better visibility
.list-header-yellow
list-header-color(#fad900, #4d4d4d) //Black text for better visibility
.list-header-orange
list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility
.list-header-red
list-header-color(#eb4646, #ffffff) //White text for better visibility
.list-header-purple
list-header-color(#a632db, #ffffff) //White text for better visibility
.list-header-blue
list-header-color(#0079bf, #ffffff) //White text for better visibility
.list-header-pink
list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility
.list-header-sky
list-header-color(#00c2e0, #ffffff) //White text for better visibility
.list-header-black
list-header-color(#4d4d4d, #ffffff) //White text for better visibility
.list-header-lime
list-header-color(#51e898, #4d4d4d) //Black text for better visibility
.list-header-silver
list-header-color(unset, #4d4d4d) //Black text for better visibility
.list-header-peachpuff
list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility
.list-header-crimson
list-header-color(#dc143c, #ffffff) //White text for better visibility
.list-header-plum
list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility
.list-header-darkgreen
list-header-color(#006400, #ffffff) //White text for better visibility
.list-header-slateblue
list-header-color(#6a5acd, #ffffff) //White text for better visibility
.list-header-magenta
list-header-color(#ff00ff, #ffffff) //White text for better visibility
.list-header-gold
list-header-color(#ffd700, #4d4d4d) //Black text for better visibility
.list-header-navy
list-header-color(#000080, #ffffff) //White text for better visibility
.list-header-gray
list-header-color(#808080, #ffffff) //White text for better visibility
.list-header-saddlebrown
list-header-color(#8b4513, #ffffff) //White text for better visibility
.list-header-paleturquoise
list-header-color(#afeeee, #4d4d4d) //Black text for better visibility
.list-header-mistyrose
list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility
.list-header-indigo
list-header-color(#4b0082, #ffffff) //White text for better visibility

28
client/components/main/brokenCards.css Normal file
View file

@ -0,0 +1,28 @@
.broken-cards-card-wrapper {
margin-top: 0;
margin-bottom: 10px;
border-width: 3px !important;
border-color: #808080 !important;
border-style: solid;
border-radius: 5px;
padding: 1.5rem;
background-color: #fff;
}
.broken-cards-wrapper {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.broken-cards-card-title {
font-weight: bold;
}
.broken-cards-context {
display: inline-block;
}
.broken-cards-context-separator {
font-weight: bold;
}
.broken-cards-null {
color: #8b0000;
font-style: italic;
}

31
client/components/main/brokenCards.styl
View file

@ -1,31 +0,0 @@
.broken-cards-card-wrapper
margin-top: 0
margin-bottom: 10px
border-width: 3px !important
border-color: grey !important
border-style: solid
border-radius: 5px
padding: 1.5rem
background-color: white
.broken-cards-wrapper
max-width: 500px
margin-right: auto
margin-left: auto
.broken-cards-card-title
font-weight: bold
//padding: 10px
.broken-cards-context
display: inline-block
.broken-cards-context-separator
font-weight: bold
.broken-cards-context-list
//margin-bottom: 0.7rem
.broken-cards-null
color: darkred
font-style: italic

5
client/components/main/dueCards.css Normal file
View file

@ -0,0 +1,5 @@
.due-cards-dueat-list-wrapper {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}

4
client/components/main/dueCards.styl
View file

@ -1,4 +0,0 @@
.due-cards-dueat-list-wrapper
max-width: 500px
margin-right: auto
margin-left: auto

7
client/components/main/editor.css Normal file
View file

@ -0,0 +1,7 @@
.new-comment a.fa.fa-copy,
.inlined-form a.fa.fa-copy {
float: right;
position: relative;
top: 20px;
right: 6px;
}

7
client/components/main/editor.styl
View file

@ -1,7 +0,0 @@
.new-comment,
.inlined-form
a.fa.fa-copy
float: right
position: relative
top: 20px
right: 6px

30
client/components/main/fonts.css Normal file
View file

@ -0,0 +1,30 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url("/fonts/roboto-regular.woff2") format('woff2'), url("/fonts/roboto-regular.woff") format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url("/fonts/roboto-bold.woff2") format('woff2'), url("/fonts/roboto-bold.woff") format('woff');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: local('Poppins'), local('Poppins-Regular'), url("/fonts/poppins-regular.woff") format('woff');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
src: local('Poppins Medium'), local('Poppins-Medium'), url("/fonts/poppins-medium.woff") format('woff');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: local('Poppins Bold'), local('Poppins-Bold'), url("/fonts/poppins-bold.woff") format('woff');
}

41
client/components/main/fonts.styl
View file

@ -1,41 +0,0 @@
@font-face
font-family: 'Roboto'
font-style: normal
font-weight: 400
src: local('Roboto'),
local('Roboto-Regular'),
url('/fonts/roboto-regular.woff2') format('woff2'),
url('/fonts/roboto-regular.woff') format('woff')
@font-face
font-family: 'Roboto'
font-style: normal
font-weight: 700
src: local('Roboto Bold'),
local('Roboto-Bold'),
url('/fonts/roboto-bold.woff2') format('woff2'),
url('/fonts/roboto-bold.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 400
src: local('Poppins'),
local('Poppins-Regular'),
url('/fonts/poppins-regular.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 500
src: local('Poppins Medium'),
local('Poppins-Medium'),
url('/fonts/poppins-medium.woff') format('woff')
@font-face
font-family: 'Poppins'
font-style: normal
font-weight: 700
src: local('Poppins Bold'),
local('Poppins-Bold'),
url('/fonts/poppins-bold.woff') format('woff')

117
client/components/main/globalSearch.css Normal file
View file

@ -0,0 +1,117 @@
.global-search-board-wrapper {
border-radius: 8px;
min-width: 400px;
border-width: 8px;
border-color: #808080;
border-style: solid;
margin-bottom: 2rem;
margin-right: auto;
margin-left: auto;
}
.global-search-board-title {
font-size: 1.4rem;
font-weight: bold;
padding: 0.5rem;
background-color: #808080;
color: #fff;
}
.global-search-swimlane-title {
font-size: 1.1rem;
font-weight: bold;
padding: 0.5rem;
padding-bottom: 0.4rem;
margin-top: 0;
margin-bottom: 0.5rem;
text-align: center;
}
.swimlane-default-color {
background-color: #d3d3d3;
}
.global-search-list-title {
font-weight: bold;
font-size: 1.1rem;
text-align: center;
margin-bottom: 0.7rem;
}
.global-search-list-wrapper {
margin: 1rem;
border-radius: 5px;
padding: 1.5rem;
padding-top: 0.75rem;
display: inline-block;
min-width: 250px;
max-width: 350px;
}
.global-search-card-wrapper {
margin-top: 0;
margin-bottom: 10px;
}
.global-search-results-list-wrapper {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.global-search-field-name {
font-weight: bold;
}
.global-search-context {
display: inline-block;
}
.global-search-context-separator {
font-weight: bold;
}
.global-search-context-list {
margin-bottom: 0.7rem;
}
.global-search-error-messages {
color: #8b0000;
}
.global-search-page {
width: 40%;
min-width: 400px;
margin-right: auto;
margin-left: auto;
line-height: 150%;
}
.global-search-page h1 {
margin-top: 2rem;
}
.global-search-page h2 {
margin-top: 1rem;
}
.global-search-query-input {
width: 90% !important;
margin-right: auto;
margin-left: auto;
}
.global-search-operator {
font-family: Courier;
}
.global-search-value {
font-family: Courier;
font-style: italic;
}
code {
color: #000;
background-color: #d3d3d3;
padding: 0.1rem !important;
font-size: 0.8rem !important;
}
.list-title {
background-color: #a9a9a9;
}
.global-search-footer {
border: none;
width: 100%;
}
.global-search-next-page {
border: none;
text-align: right;
}
.global-search-previous-page {
border: none;
text-align: left;
}
.global-search-instructions li {
margin-bottom: 0.3rem;
}

121
client/components/main/globalSearch.styl
View file

@ -1,121 +0,0 @@
.global-search-board-wrapper
border-radius: 8px
//padding: 0.5rem
min-width: 400px
border-width: 8px
border-color: grey
border-style: solid
margin-bottom: 2rem
margin-right: auto
margin-left: auto
.global-search-board-title
font-size: 1.4rem
font-weight: bold
padding: 0.5rem
background-color: grey
color: white
.global-search-swimlane-title
font-size: 1.1rem
font-weight: bold
padding: 0.5rem
padding-bottom: 0.4rem
margin-top: 0
margin-bottom: 0.5rem
//border-top: black 1px solid
//border-bottom: black 1px solid
text-align: center
.swimlane-default-color
background-color: lightgrey
.global-search-list-title
font-weight: bold
font-size: 1.1rem
//padding-bottom: 0
//margin-bottom: 0
text-align: center
margin-bottom: 0.7rem
.global-search-list-wrapper
margin: 1rem
border-radius: 5px
padding: 1.5rem
padding-top: 0.75rem
display: inline-block
min-width: 250px
max-width: 350px
.global-search-card-wrapper
margin-top: 0
margin-bottom: 10px
.global-search-results-list-wrapper
max-width: 500px
margin-right: auto
margin-left: auto
.global-search-field-name
font-weight: bold
.global-search-context
display: inline-block
.global-search-context-separator
font-weight: bold
.global-search-context-list
margin-bottom: 0.7rem
.global-search-error-messages
color: darkred
.global-search-page
width: 40%
min-width: 400px
margin-right: auto
margin-left: auto
line-height: 150%
.global-search-page h1
margin-top: 2rem;
.global-search-page h2
margin-top: 1rem;
.global-search-query-input
width: 90% !important
margin-right: auto
margin-left: auto
.global-search-operator
font-family: Courier
.global-search-value
font-family: Courier
font-style: italic
code
color: black
background-color: lightgrey
padding: 0.1rem !important
font-size: 0.8rem !important
.list-title
background-color: darkgray
.global-search-footer
border: none
width: 100%
.global-search-next-page
border: none
text-align: right;
.global-search-previous-page
border: none
text-align: left;
.global-search-instructions li
margin-bottom: 0.3rem

266
client/components/main/header.css Normal file
View file

@ -0,0 +1,266 @@
#header {
color: #fff;
transition: background-color 0.4s;
background: #2980b9;
z-index: 17;
}
#header #header-main-bar {
height: 40px;
padding: 7px 10px 0;
}
#header #header-main-bar h1 {
font-size: 20px;
line-height: 1.7em;
padding: 0 10px;
margin: 0;
margin-right: 10px;
float: left;
border-radius: 3px;
}
#header #header-main-bar h1 .board-header-watch-icon {
padding-left: 7px;
}
#header #header-main-bar h1 a.fa,
#header #header-main-bar h1 a i.fa {
color: #fff;
}
#header #header-main-bar h1 .back-btn {
font-size: 0.9em;
margin-right: 10px;
}
#header #header-main-bar .wekan-logo {
margin: 3px auto auto;
width: 97px;
opacity: 0.6;
transition: opacity 0.15s;
float: right;
}
#header #header-main-bar .wekan-logo:hover {
opacity: 0.9;
}
#header #header-main-bar .board-header-btns {
display: block;
margin-top: 3px;
width: auto;
}
#header #header-main-bar .board-header-btns.left {
float: left;
}
#header #header-main-bar .board-header-btns.right {
float: right;
}
#header #header-main-bar .board-header-btn {
border-radius: 3px;
color: #f2f2f2;
padding: 0;
height: 28px;
font-size: 13px;
float: left;
overflow: hidden;
line-height: 28px;
margin: 0 2px;
}
#header #header-main-bar .board-header-btn i.fa {
float: left;
display: block;
line-height: 28px;
color: #f2f2f2;
margin: 0 10px;
}
#header #header-main-bar .board-header-btn i.fa + span {
display: inline-block;
margin-top: 1px;
margin-right: 10px;
}
#header #header-main-bar .board-header-btn .board-header-btn-close {
float: right;
}
#header #header-main-bar .board-header-btn .board-header-btn-close i.fa {
margin: 0 6px;
}
#header #header-main-bar .board-header-btn.is-active,
#header #header-main-bar h1.is-clickable.is-active,
#header #header-main-bar .board-header-btn:hover:not(.is-disabled),
#header #header-main-bar h1.is-clickable:hover:not(.is-disabled) {
background: rgba(0,0,0,0.15);
}
#header #header-main-bar .separator {
margin: 2px 4px;
border-left: 1px solid rgba(255,255,255,0.3);
height: 24px;
float: left;
}
#header-quick-access {
color: #fff;
transition: background-color 0.4s;
background: #2573a7;
height: 28px;
font-size: 12px;
display: flex;
z-index: 1000;
padding: 10px 0px;
}
#header-quick-access .allBoards {
font-size: 14px;
padding: 4px 15px;
}
#header-quick-access a {
text-decoration: none;
}
#header-quick-access #header-user-bar,
#header-quick-access #header-new-board-icon,
#header-quick-access ul li {
color: #d4d4d4;
}
#header-quick-access #header-user-bar .fa,
#header-quick-access #header-new-board-icon .fa,
#header-quick-access ul li .fa {
color: inherit;
}
#header-quick-access #header-user-bar a:hover,
#header-quick-access #header-new-board-icon a:hover,
#header-quick-access ul li a:hover,
#header-quick-access #header-user-bar a.is-active,
#header-quick-access #header-new-board-icon a.is-active,
#header-quick-access ul li a.is-active {
color: #fff;
}
#header-quick-access ul.header-quick-access-list {
transition: opacity 0.2s;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
margin: -10px;
}
#header-quick-access ul.header-quick-access-list li {
display: inline;
width: auto;
color: #d9d9d9;
padding: 12px 0px;
margin: -10px 0px;
}
#header-quick-access ul.header-quick-access-list li a {
padding: 12px 10px;
margin: -10px 0px;
}
#header-quick-access ul.header-quick-access-list li a .viewer {
display: inline;
white-space: nowrap;
}
#header-quick-access ul.header-quick-access-list li a .viewer p {
display: inline;
white-space: nowrap;
}
#header-quick-access ul.header-quick-access-list li.current {
color: #f2f2f2;
}
#header-quick-access ul.header-quick-access-list li.current.empty {
padding: 12px 10px 12px 10px;
}
#header-quick-access ul.header-quick-access-list li:first-child .fa-home,
#header-quick-access ul.header-quick-access-list li:nth-child(3) .fa-globe {
margin-right: 5px;
}
#header-quick-access ul.header-quick-access-list li a.js-create-board {
margin-left: 5px;
}
#header-quick-access #header-user-bar,
#header-quick-access #header-new-board-icon {
flex-shrink: 0;
}
#header-quick-access #header-user-bar {
margin: 2px 0;
}
#header-quick-access #header-user-bar .header-user-bar-avatar {
float: left;
position: relative;
top: -5px;
margin-right: 5px;
}
#header-quick-access #header-user-bar .header-user-bar-avatar .member {
width: 24px;
height: 24px;
margin: 0;
margin-top: 1px;
}
#header-quick-access #header-user-bar .header-user-bar-name {
margin: 4px 8px 0 0;
float: left;
}
#header-quick-access #header-user-bar .header-user-bar-name i.fa-chevron-down {
margin-right: 4px;
}
#header-quick-access #header-new-board-icon {
flex-grow: 1;
margin: 6px 5px 0;
width: 12px;
}
@media screen and (max-width: 800px) {
#header #header-main-bar {
height: 40px;
}
#header #header-main-bar .board-header-btns {
margin-top: 0px;
}
#header #header-main-bar .board-header-btn {
height: 32px;
line-height: 32px;
font-size: 15px;
}
#header #header-main-bar .board-header-btn i.fa {
line-height: 32px;
}
#header #header-main-bar .board-header-btn i.fa + span {
display: none;
}
#header-quick-access {
transition: background-color 0.4s;
width: 100%;
z-index: 30;
}
#header-quick-access ul {
width: calc(100% - 60px);
margin-right: 10px;
}
#header-quick-access ul li {
height: 100%;
}
#header-quick-access ul li a {
height: 100%;
}
#header-quick-access span .fa-home {
font-size: 26px;
margin-top: -2px;
margin-right: 10px;
margin-left: 10px;
}
#header-quick-access #header-new-board-icon {
display: none;
}
#header-quick-access #header-user-bar {
right: 0px;
padding: 10px;
margin: -8px 0 -10px -10px;
}
}
.announcement .viewer {
display: inline-block;
}
.announcement,
.offline-warning {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
background: #f8ecbd;
clear: both;
}
.announcement p,
.offline-warning p {
margin: 7px;
padding: 0;
}
#headerIsSettingDatabaseCallDone {
display: none;
}

258
client/components/main/header.styl
View file

@ -1,258 +0,0 @@
@import 'nib'
#header
color: white
transition: background-color 0.4s
background: #2980B9
z-index: 17
#header-main-bar
height: 40px
padding: 7px 10px 0
h1
font-size: 20px
line-height: 1.7em
padding: 0 10px
margin: 0
margin-right: 10px
float: left
border-radius: 3px
.board-header-watch-icon
padding-left: 7px
a.fa, a i.fa
color: white
.back-btn
font-size: 0.9em
margin-right: 10px
.wekan-logo
margin: 3px auto auto
width: 97px
opacity: 0.6
transition: opacity 0.15s
float: right
&:hover
opacity: 0.9
.board-header-btns
display: block
margin-top: 3px
width: auto
// XXX Use a flexbox instead of floats?
&.left
float: left
&.right
float: right
.board-header-btn
border-radius: 3px
color: darken(white, 5%)
padding: 0
height: 28px
font-size: 13px
float: left
overflow: hidden
line-height: @height
margin: 0 2px
i.fa
float: left
display: block
line-height: 28px
color: darken(white, 5%)
margin: 0 10px
+ span
display: inline-block
margin-top: 1px
margin-right: 10px
.board-header-btn-close
float: right
i.fa
margin: 0 6px
.board-header-btn,
h1.is-clickable
&.is-active,
&:hover:not(.is-disabled)
background: rgba(0, 0, 0, .15)
.separator
margin: 2px 4px
border-left: 1px solid rgba(255, 255, 255, .3)
height: 24px
float: left
#header-quick-access
color: white
transition: background-color 0.4s
background: #2573a7
height: 28px
font-size: 12px
display: flex
z-index: 1000
padding: 10px 0px
.allBoards
font-size: 14px
padding:4px 15px
a
text-decoration: none;
#header-user-bar,
#header-new-board-icon,
ul li
color: darken(white, 17%)
.fa
color: inherit
a:hover, a.is-active
color: white
ul.header-quick-access-list
transition: opacity 0.2s
overflow-x: auto
overflow-y: hidden
white-space: nowrap
padding: 10px
margin: -10px
li
display: inline
width: auto
color: darken(white, 15%)
padding: 12px 0px
margin: -10px 0px
a
padding: 12px 10px
margin: -10px 0px
.viewer
display: inline
white-space: nowrap
p
display: inline
white-space: nowrap
&.current
color: darken(white, 5%)
&.current.empty
padding: 12px 10px 12px 10px
&:first-child .fa-home,&:nth-child(3) .fa-globe
margin-right: 5px
a.js-create-board
margin-left: 5px
#header-user-bar,
#header-new-board-icon
flex-shrink: 0
#header-user-bar
margin: 2px 0
.header-user-bar-avatar
float: left
position: relative
top: -5px
margin-right: 5px
.member
width: 24px
height: @width
margin: 0
margin-top: 1px
.header-user-bar-name
margin: 4px 8px 0 0
float: left
i.fa-chevron-down
margin-right: 4px
#header-new-board-icon
flex-grow: 1
margin: 6px 5px 0
width: 12px
@media screen and (max-width: 800px)
#header
#header-main-bar
height: 40px
.board-header-btns
margin-top: 0px
.board-header-btn
height: 32px
line-height: @height
font-size: 15px
i.fa
line-height: 32px
+ span
display: none
#header-quick-access
transition: background-color 0.4s
width: 100%
z-index: 30
ul
width: calc(100% - 60px)
margin-right: 10px
li
height: 100%
a
height: 100%
span
.fa-home
font-size: 26px
margin-top: -2px
margin-right: 10px
margin-left: 10px
#header-new-board-icon
display: none
#header-user-bar
right: 0px
padding: 10px
margin: -8px 0 -10px -10px
.announcement .viewer
display: inline-block
.announcement,
.offline-warning
width: 100%
text-align: center
padding: 0
margin: 0
background: #F8ECBD
clear: both
p
margin: 7px
padding: 0
#headerIsSettingDatabaseCallDone
display: none;

20
client/components/main/keyboardShortcuts.css Normal file
View file

@ -0,0 +1,20 @@
.shortcuts-list .shortcuts-list-item {
border-bottom: 1px solid #bfbfbf;
padding: 10px 5px;
}
.shortcuts-list .shortcuts-list-item:last-child {
border-bottom: none;
}
.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys {
margin-top: 5px;
float: right;
}
.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys kbd {
padding: 5px 8px;
margin: 5px;
font-size: 18px;
}
.shortcuts-list .shortcuts-list-item .shortcuts-list-item-action {
font-size: 1.4em;
margin: 5px;
}

20
client/components/main/keyboardShortcuts.styl
View file

@ -1,20 +0,0 @@
.shortcuts-list
.shortcuts-list-item
border-bottom: 1px solid darken(white, 25%)
padding: 10px 5px
&:last-child
border-bottom: none
.shortcuts-list-item-keys
margin-top: 5px
float: right
kbd
padding: 5px 8px
margin: 5px
font-size: 18px
.shortcuts-list-item-action
font-size: 1.4em
margin: 5px

624
client/components/main/layouts.css Normal file
View file

@ -0,0 +1,624 @@
* {
-webkit-box-sizing: unset;
box-sizing: unset;
}
.note-popover .popover-content .note-color-palette div .note-color-btn,
.panel-heading.note-toolbar .note-color-palette div .note-color-btn {
background: none;
}
a:focus {
outline: unset;
outline-offset: unset;
}
a:hover,
a:focus {
color: unset;
text-decoration: unset;
}
.badge {
display: unset;
min-width: unset;
padding: unset;
font-size: unset;
font-weight: unset;
line-height: unset;
color: unset;
text-align: unset;
white-space: unset;
vertical-align: unset;
background-color: unset;
border-radius: unset;
}
html,
body,
input,
select,
textarea,
button {
font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height: 18px;
color: #4d4d4d;
}
html {
font-size: 100%;
max-height: 100%;
user-select: none;
-webkit-text-size-adjust: 100%;
}
body {
background: #dedede;
margin: 0;
position: relative;
z-index: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
height: 100vh;
}
#content {
position: relative;
flex: 1;
overflow-x: hidden;
}
#content .sk-spinner {
margin-top: 30vh;
}
#content > .wrapper {
margin-top: 10px;
padding: 15px;
}
#modal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
z-index: 100;
overflow-y: auto;
}
#modal .modal-content {
width: 500px;
min-height: 160px;
margin: 42px auto;
padding: 12px;
border-radius: 4px;
background: #dedede;
z-index: 110;
}
#modal .modal-content h2 {
margin-bottom: 25px;
}
#modal .modal-content .modal-close-btn {
display: block;
float: right;
font-size: 24px;
}
#modal .modal-content-wide {
width: 800px;
min-height: 0px;
margin: 42px auto;
padding: 12px;
border-radius: 4px;
background: #dedede;
z-index: 110;
}
#modal .modal-content-wide h2 {
margin-bottom: 25px;
}
#modal .modal-content-wide .modal-close-btn {
display: block;
float: right;
font-size: 24px;
}
h1 {
font-size: 22px;
line-height: 1.2em;
margin: 0 0 10px;
}
h2 {
font-size: 18px;
line-height: 1.2em;
margin: 0 0 9px;
}
h3,
h4,
h5,
h6 {
font-size: 16px;
line-height: 1.25em;
margin: 0 0 6px;
}
.quiet,
.quiet a {
color: #8c8c8c;
}
.error,
.error a {
color: #eb3800;
}
.no-items-message {
color: #666;
margin: 30px 0;
text-align: center;
}
.warning {
background: #f0ecdb;
border-radius: 3px;
color: #aa8f09;
padding: 6px 8px;
}
.warning a {
color: #aa8f09;
}
.small {
font-size: 0.8em;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a.is-disabled,
a.is-disabled:hover {
cursor: default;
text-decoration: none;
}
span a {
text-decoration: underline;
}
strong {
font-weight: bold;
}
p {
user-select: text;
}
p a {
text-decoration: underline;
word-wrap: break-word;
}
table,
p {
margin-bottom: 8px;
}
pre {
margin: 15px 0;
white-space: pre;
max-height: 516px;
}
pre,
code,
tt {
font-family: lucida console, monospace;
line-height: 1.25em;
}
blockquote {
margin: 8px 0 8px 8px;
border-left: 1px solid #ccc;
color: #666;
padding: 0 0 0 8px;
}
hr {
height: 1px;
border: 0;
border: none;
width: 100%;
background: #dbdbdb;
color: #dbdbdb;
margin: 15px 0;
padding: 0;
}
table,
td,
th {
vertical-align: top;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
td,
th {
padding: 5px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
th {
font-weight: 700;
}
thead {
background: #fff;
background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%);
}
tbody {
background-color: #fff;
}
dl,
dt {
margin-bottom: 8px;
}
dd {
margin: 0 0 16px 24px;
}
kbd {
padding: 1px 3px;
margin: 3px;
font-weight: bold;
background: #fafafa;
border-radius: 3px;
border: 1px solid #e6e6e6;
color: unset;
box-shadow: 0px 2px 3px rgba(0,0,0,0.15);
}
.clear {
clear: both;
}
.hide {
display: none;
}
.show {
display: block;
}
.bold {
font-weight: 700;
}
.center {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
.first {
margin-left: 0;
padding-left: 0;
}
.last {
margin-right: 0;
padding-right: 0;
}
.top {
margin-top: 0;
padding-top: 0;
}
.bottom {
margin-bottom: 0;
padding-bottom: 0;
}
.wrapper {
width: calc(100% - 20px);
margin: 0 auto;
}
.relative {
position: relative;
}
.block {
display: block;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.pointer {
cursor: pointer;
}
.ellip {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.underline {
text-decoration: underline;
}
.lowercase {
text-transform: lowercase;
}
.invisible {
visibility: hidden;
}
.wrapword {
word-wrap: break-word;
}
.grab {
cursor: grab;
}
.grabbing {
cursor: grabbing;
}
.textcomplete-dropdown {
z-index: 2000 !important;
}
.fa.fa-times-thin:before {
content: '\00d7';
}
.fa.fa-globe.colorful,
.fa.fa-bell.colorful {
color: #4caf50;
}
.fa.fa-lock.colorful,
.fa.fa-bell-slash.colorful {
color: #f44336;
}
.fa.fa-eye.colorful {
color: #4336f4;
}
.pop-over .pop-over-list li a:not(.disabled):hover .fa,
.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful {
color: #fff;
}
.pop-over .pop-over-list li a:not(.disabled):hover .fa:hover,
.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful:hover {
color: #fff;
}
a.fa,
a i.fa {
color: #a6a6a6;
}
a:not(.disabled):hover.fa,
a:not(.disabled).is-active.fa,
a:not(.disabled):hover i.fa,
a:not(.disabled).is-active i.fa {
color: #666;
}
.ui-draggable-dragging {
z-index: 200;
}
.atMention {
background: #dbdbdb;
border-radius: 3px;
padding: 1px 4px;
margin: -1px 0;
display: inline-block;
}
.atMention.me {
background: #cfdfe8;
}
.big-message {
display: block;
margin: 75px auto;
text-align: center;
max-width: 600px;
}
.big-message h1 {
font-size: 26px;
margin-bottom: 24px;
}
.big-message p {
font-size: 18px;
line-height: 22px;
}
.gutter {
margin-left: 38px;
}
.viewer {
min-height: 18px;
display: block;
word-wrap: break-word;
}
.viewer table {
word-wrap: normal;
word-break: normal;
}
.viewer ol {
list-style-type: decimal;
padding-left: 20px;
padding-bottom: 10px;
}
.viewer ul {
list-style-type: initial;
padding-left: 20px;
padding-bottom: 10px;
}
.viewer em {
font-style: italic;
}
.viewer pre {
padding: 10px 12px 7px;
background: #dedede;
overflow-y: auto;
}
.viewer a {
text-decoration: underline;
}
.viewer a:hover {
color: #333;
}
.basicTabs-container .tabs-content-container {
padding: 0;
padding-top: 15px;
}
@media screen and (max-width: 800px) {
#content {
margin: 1px 0px 0px 0px;
height: calc(100% - 0px);
}
#content > .wrapper {
margin-top: 0px;
}
.wrapper {
height: calc(100% - 31px);
margin: 0px;
}
.panel-default {
width: 83vw;
}
}
.inline-input {
height: 37px;
margin: 8px 10px 0 0;
width: 50px;
}
.select-authentication {
width: 100%;
}
.auth-layout {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.auth-layout .auth-dialog {
margin: 0 !important;
}
.loadingText {
text-align: center;
}
.lds-roller {
display: block;
margin: auto;
position: relative;
width: 64px;
height: 64px;
}
.lds-roller div {
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
transform-origin: 32px 32px;
}
.lds-roller div:after {
content: " ";
display: block;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: #dedede;
margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
top: 50px;
left: 50px;
}
.lds-roller div:nth-child(2) {
animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
top: 54px;
left: 45px;
}
.lds-roller div:nth-child(3) {
animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
top: 57px;
left: 39px;
}
.lds-roller div:nth-child(4) {
animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
top: 58px;
left: 32px;
}
.lds-roller div:nth-child(5) {
animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
top: 57px;
left: 25px;
}
.lds-roller div:nth-child(6) {
animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
top: 54px;
left: 19px;
}
.lds-roller div:nth-child(7) {
animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
top: 50px;
left: 14px;
}
.lds-roller div:nth-child(8) {
animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
top: 45px;
left: 10px;
}
#isSettingDatabaseCallDone {
display: none;
}
.at-link {
color: #17683a;
text-decoration: underline;
text-decoration-color: #17683a;
}
@-moz-keyframes fadeIn {
from {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
}
@-o-keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
@-moz-keyframes flexGrowIn {
from {
height: 100%;
}
}
@-webkit-keyframes flexGrowIn {
from {
height: 100%;
}
}
@-o-keyframes flexGrowIn {
from {
height: 100%;
}
}
@keyframes flexGrowIn {
from {
height: 100%;
}
}
@-moz-keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes lds-roller {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

552
client/components/main/layouts.styl
View file

@ -1,552 +0,0 @@
@import 'nib'
global-reset()
*
-webkit-box-sizing: unset
box-sizing: unset
.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn
background: none
a:focus
outline: unset
outline-offset: unset
a:hover,a:focus
color: unset
text-decoration: unset
.badge
display: unset
min-width: unset
padding: unset
font-size: unset
font-weight: unset
line-height: unset
color: unset
text-align: unset
white-space: unset
vertical-align: unset
background-color: unset
border-radius: unset
html, body, input, select, textarea, button
font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif
line-height: 18px
color: #4d4d4d
html
font-size: 100%
max-height: 100%
user-select: none
-webkit-text-size-adjust: 100%
body
background: darken(white, 13%)
margin: 0
position: relative
z-index: 0
overflow-y: auto
display: flex
flex-direction: column
height: 100vh
#content
position: relative
flex: 1
overflow-x: hidden
.sk-spinner
margin-top: 30vh
> .wrapper
margin-top: 10px
padding: 15px
#modal
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background: rgba(0, 0, 0, 0.6)
z-index: 100
overflow-y: auto
.modal-content
width: 500px
min-height: 160px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
.modal-content-wide
width: 800px
min-height: 0px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
h1
font-size: 22px
line-height: 1.2em
margin: 0 0 10px
h2
font-size: 18px
line-height: 1.2em
margin: 0 0 9px
h3, h4, h5, h6
font-size: 16px
line-height: 1.25em
margin: 0 0 6px
.quiet, .quiet a
color: #8c8c8c
.error, .error a
color: #eb3800
.no-items-message
color: darken(white, 60%)
margin: 30px 0
text-align: center
.warning
background: #f0ecdb
border-radius: 3px
color: #aa8f09
padding: 6px 8px
a
color: #aa8f09
.small
font-size: 0.8em
a
color: inherit
cursor: pointer
text-decoration: none
&.is-disabled,
&.is-disabled:hover
cursor: default
text-decoration: none
span a
text-decoration: underline
strong
font-weight: bold
p
user-select: text
a
text-decoration: underline
word-wrap: break-word
table, p
margin-bottom: 8px
pre
margin: 15px 0
white-space: pre
max-height: 516px
pre,
code,
tt
font-family: lucida console, monospace
line-height: 1.25em
blockquote
margin: 8px 0 8px 8px
border-left: 1px solid #ccc
color: #666
padding: 0 0 0 8px
hr
height: 1px
border: 0
border: none
width: 100%
background: #dbdbdb
color: #dbdbdb
margin: 15px 0
padding: 0
table, td, th
vertical-align: top
border-top: 1px solid #ccc
border-left: 1px solid #ccc
td, th
padding: 5px
border-right: 1px solid #ccc
border-bottom: 1px solid #ccc
th
font-weight: 700
thead
background: #fff
background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
tbody
background-color: #fff
dl, dt
margin-bottom: 8px
dd
margin: 0 0 16px 24px
kbd
padding: 1px 3px
margin: 3px
font-weight: bold
background: darken(white, 2%)
border-radius: 3px
border: 1px solid darken(white, 10%)
color: unset
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
.clear
clear: both
.clearfix
clearfix()
.hide
display: none
.show
display: block
.bold
font-weight: 700
.center
text-align: center
.left
float: left
.right
float: right
.first
margin-left: 0
padding-left: 0
.last
margin-right: 0
padding-right: 0
.top
margin-top: 0
padding-top: 0
.bottom
margin-bottom: 0
padding-bottom: 0
.wrapper
width: calc(100% - 20px)
margin: 0 auto
.relative
position: relative
.block
display: block
.inline
display: inline
.inline-block
display: inline-block
.pointer
cursor: pointer
.ellip
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.underline
text-decoration: underline
.lowercase
text-transform: lowercase
.invisible
visibility: hidden
.wrapword
word-wrap: break-word
.grab
cursor: grab
.grabbing
cursor: grabbing
.textcomplete-dropdown
z-index: 2000 !important;
// Implement a thiner close icon as suggested in
// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
.fa.fa-times-thin:before
content: '\00d7'
.fa.fa-globe.colorful, .fa.fa-bell.colorful
color: #4caf50
.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
color: #f44336
.fa.fa-eye.colorful
color: #4336f4
.pop-over .pop-over-list li a:not(.disabled):hover
.fa, .fa.colorful
color: white
&:hover
color: white
a
&.fa, i.fa
color: darken(white, 35%)
&:not(.disabled):hover, &:not(.disabled).is-active
&.fa, i.fa
color: darken(white, 60%)
.ui-draggable-dragging
z-index: 200
.atMention
background: #dbdbdb
border-radius: 3px
padding: 1px 4px
margin: -1px 0
display: inline-block
&.me
background: #cfdfe8
.big-message
display: block
margin: 75px auto
text-align: center
max-width: 600px
h1
font-size: 26px
margin-bottom: 24px
p
font-size: 18px
line-height: 22px
.gutter
margin-left: 38px
.viewer
min-height: 18px
display: block
word-wrap: break-word
table
word-wrap: normal
word-break: normal
ol
list-style-type: decimal
padding-left: 20px
padding-bottom: 10px
ul
list-style-type: initial
padding-left: 20px
padding-bottom: 10px
em
font-style : italic
pre
padding: 10px 12px 7px
background: darken(white, 13%)
overflow-y: auto
a
text-decoration: underline
&:hover
color: #333
.basicTabs-container .tabs-content-container
padding: 0
padding-top: 15px
@keyframes fadeIn
from
opacity: 0
@keyframes flexGrowIn
from
// Support IE11 https://github.com/wekan/wekan/pull/646
height: 100%
@media screen and (max-width: 800px)
#content
margin: 1px 0px 0px 0px
height: calc(100% - 0px)
> .wrapper
margin-top: 0px
.wrapper
height: calc(100% - 31px)
margin: 0px
.panel-default
width: 83vw
.inline-input
height: 37px
margin: 8px 10px 0 0
width: 50px
.select-authentication
width: 100%
.auth-layout
display: flex
flex-direction: column
align-items: center
justify-content: center
.auth-dialog
margin: 0 !important
.loadingText
text-align: center
.lds-roller
display: block
margin: auto
position: relative
width: 64px
height: 64px
div
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
transform-origin: 32px 32px
div:after
content: " "
display: block
position: absolute
width: 6px
height: 6px
border-radius: 50%
background: #dedede
margin: -3px 0 0 -3px
div:nth-child(1)
animation-delay: -0.036s
div:nth-child(1):after
top: 50px
left: 50px
div:nth-child(2)
animation-delay: -0.072s
div:nth-child(2):after
top: 54px
left: 45px
div:nth-child(3)
animation-delay: -0.108s
div:nth-child(3):after
top: 57px
left: 39px
div:nth-child(4)
animation-delay: -0.144s
div:nth-child(4):after
top: 58px
left: 32px
div:nth-child(5)
animation-delay: -0.18s
div:nth-child(5):after
top: 57px
left: 25px
div:nth-child(6)
animation-delay: -0.216s
div:nth-child(6):after
top: 54px
left: 19px
div:nth-child(7)
animation-delay: -0.252s
div:nth-child(7):after
top: 50px
left: 14px
div:nth-child(8)
animation-delay: -0.288s
div:nth-child(8):after
top: 45px
left: 10px
@keyframes lds-roller
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
#isSettingDatabaseCallDone
display: none;
.at-link
color: #17683a;
text-decoration: underline;
text-decoration-color: #17683a;

73
client/components/main/myCards.css Normal file
View file

@ -0,0 +1,73 @@
.my-cards-board-wrapper {
border-radius: 0 0 4px 4px;
min-width: 400px;
margin-bottom: 2rem;
margin-right: auto;
margin-left: auto;
border-width: 2px;
border-style: solid;
border-color: #a2a2a2;
}
.my-cards-board-title {
font-size: 1.4rem;
font-weight: bold;
padding: 0.5rem;
background-color: #808080;
color: #fff;
}
.my-cards-swimlane-title {
font-size: 1.1rem;
font-weight: bold;
padding: 0.5rem;
padding-bottom: 0.4rem;
margin-top: 0;
margin-bottom: 0.5rem;
text-align: center;
}
.swimlane-default-color {
background-color: #d3d3d3;
}
.my-cards-list-title {
font-weight: bold;
font-size: 1.1rem;
text-align: center;
margin-bottom: 0.7rem;
}
.my-cards-list-wrapper {
margin: 1rem;
border-radius: 5px;
display: inline-grid;
min-width: 250px;
max-width: 350px;
}
.my-cards-card-wrapper {
margin-top: 0;
margin-bottom: 10px;
}
.my-cards-dueat-list-wrapper {
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.my-cards-board-table thead {
border-bottom: 3px solid #4d4d4d;
background-color: transparent;
}
.my-cards-board-table th,
.my-cards-board-table td {
border: 0;
}
.my-cards-board-table tr {
border-bottom: 2px solid #a2a2a2;
}
.my-cards-card-title-table {
font-weight: bold;
padding-left: 2px;
}
.my-cards-board-badge {
width: 36px;
height: 24px;
float: left;
border-radius: 5px;
margin-right: 5px;
}

77
client/components/main/myCards.styl
View file

@ -1,77 +0,0 @@
.my-cards-board-wrapper
border-radius: 0 0 4px 4px;
//padding: 0.5rem
min-width: 400px
margin-bottom: 2rem
margin-right: auto
margin-left: auto
border-width: 2px
border-style: solid
border-color: #a2a2a2
.my-cards-board-title
font-size: 1.4rem
font-weight: bold
padding: 0.5rem
background-color: grey
color: white
.my-cards-swimlane-title
font-size: 1.1rem
font-weight: bold
padding: 0.5rem
padding-bottom: 0.4rem
margin-top: 0
margin-bottom: 0.5rem
//border-top: black 1px solid
//border-bottom: black 1px solid
text-align: center
.swimlane-default-color
background-color: lightgrey
.my-cards-list-title
font-weight: bold
font-size: 1.1rem
//padding-bottom: 0
//margin-bottom: 0
text-align: center
margin-bottom: 0.7rem
.my-cards-list-wrapper
margin: 1rem
border-radius: 5px
//padding: 1.5rem
//padding-top: 0.75rem
display: inline-grid
min-width: 250px
max-width: 350px
.my-cards-card-wrapper
margin-top: 0
margin-bottom: 10px
.my-cards-dueat-list-wrapper
max-width: 500px
margin-right: auto
margin-left: auto
.my-cards-board-table
thead
border-bottom: 3px solid #4d4d4d
background-color: transparent
th, td
border: 0
tr
border-bottom: 2px solid #a2a2a2
.my-cards-card-title-table
font-weight: bold
padding-left: 2px
.my-cards-board-badge
width:36px
height:24px
float:left
border-radius:5px
margin-right: 5px

346
client/components/main/popup.css Normal file
View file

@ -0,0 +1,346 @@
.pop-over {
background: #fff;
border-radius: 3px;
border: 1px solid #dbdbdb;
border-bottom-color: #c2c2c2;
box-shadow: 0 1px 6px rgba(0,0,0,0.3);
position: absolute;
width: 300px;
z-index: 99999;
margin-top: 5px;
}
.pop-over hr {
margin: 4px 0px;
}
.pop-over p,
.pop-over textarea,
.pop-over input[type="text"],
.pop-over input[type="email"],
.pop-over input[type="password"],
.pop-over input[type="file"] {
width: 100%;
}
.pop-over select {
width: 100%;
margin-bottom: 14px;
}
.pop-over textarea {
height: 72px;
}
.pop-over form a span {
padding: 0 0.5rem;
}
.pop-over .header {
height: 36px;
position: relative;
margin-bottom: 8px;
background: #f7f7f7;
border-bottom: 1px solid #dcdcdc;
color: #666;
}
.pop-over .header .header-title {
display: block;
line-height: 32px;
padding-top: 4px;
margin: 0 10px;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pop-over .header .back-btn {
float: left;
overflow: hidden;
width: 30px;
transition: width 0.2s;
}
.pop-over .header .back-btn i.fa {
margin: 10px;
margin-top: 12px;
}
.pop-over .header .back-btn.is-hidden {
width: 0;
}
.pop-over .header .close-btn {
padding: 10px 10px 10px 4px;
position: absolute;
top: 0;
right: 0;
}
.pop-over.no-title .header {
background: none;
}
.pop-over .content-wrapper {
width: 100%;
overflow: hidden;
}
.pop-over .content-container {
width: 5000px;
max-height: 550px;
transition: transform 0.2s;
}
.pop-over .content-container .content {
width: 280px;
padding: 0 10px 10px;
float: left;
}
.pop-over .content-container .content.no-height {
height: 20px;
}
.pop-over .quiet {
padding: 6px 6px 4px;
}
.pop-over.search-over {
background: #f0f0f0;
min-height: 114px;
}
.pop-over.search-over .header {
display: none;
}
.pop-over.search-over .content {
padding: 8px 4px 8px 10px;
margin-right: 8px;
}
.pop-over .at-form .at-error,
.pop-over .at-form .at-result {
padding: 8px 12px;
margin: -8px -10px 10px;
}
.pop-over .at-form .at-error {
background: #ef9a9a;
}
.pop-over .at-form .at-result {
background: #b2dfdb;
}
.pop-over .sk-spinner {
margin: 40px auto;
}
.pop-over .popup-container-depth-1 {
transform: translateX(-300px);
}
.pop-over .popup-container-depth-2 {
transform: translateX(-600px);
}
.pop-over .popup-container-depth-3 {
transform: translateX(-900px);
}
.pop-over .popup-container-depth-4 {
transform: translateX(-1200px);
}
.pop-over .popup-container-depth-5 {
transform: translateX(-1500px);
}
.pop-over .popup-container-depth-6 {
transform: translateX(-1800px);
}
.select-members-list,
.select-avatars-list {
margin-bottom: 8px;
}
.pop-over-list li {
display: block;
clear: both;
}
.pop-over-list li > a {
clear: both;
cursor: pointer;
display: block;
font-weight: 700;
padding: 1.5px 10px;
position: relative;
margin: 0 -10px;
text-decoration: none;
overflow: hidden;
line-height: 33px;
}
.pop-over-list li > a .item-name {
display: block;
width: auto;
padding-right: 22px;
}
.pop-over-list li > a:not(.disabled):hover {
background-color: #005377;
color: #fff;
}
.pop-over-list li > a:not(.disabled):hover .sub-name,
.pop-over-list li > a:not(.disabled):hover .quiet {
color: #eee;
}
.pop-over-list li > a:not(.disabled):hover .unread-indicator {
background: #fff;
}
.pop-over-list li > a .sub-name {
color: #8c8c8c;
display: block;
font-size: 12px;
font-weight: 400;
line-height: 15px;
}
.pop-over-list li > a.current {
background-color: #e2e6e9;
}
.pop-over-list li > a:active {
background-color: #2e85b8;
}
.pop-over-list li > a.disabled {
color: #8c8c8c;
cursor: default;
}
.pop-over-list li > a.disabled .vis-icon {
opacity: 0.35;
}
.pop-over-list li > a.disabled:hover {
background: none;
}
.pop-over-list li > a.disabled:hover .sub-name,
.pop-over-list li > a.disabled:hover .quiet {
color: #8c8c8c;
}
.pop-over-list li > a.disabled:active {
background: none;
}
.pop-over-list.inset li > a {
border-radius: 3px;
margin: 0;
}
.pop-over-list .pop-over-list.checkable .fa-check {
display: none;
position: absolute;
top: 6px;
right: 12px;
}
.pop-over-list .pop-over-list.checkable li.active a {
padding-right: 28px;
}
.pop-over-list .pop-over-list.checkable li.active a .fa-check {
display: block;
}
.pop-over.miniprofile .header {
border-bottom-color: transparent;
height: 30px;
position: absolute;
right: 0;
top: 0;
width: 60px;
z-index: 1;
}
.pop-over.miniprofile .header-title {
display: none;
}
.pop-over.miniprofile .pop-over-list {
padding-top: 8px;
}
.pop-over.miniprofile .miniprofile-header {
margin-top: 8px;
min-height: 56px;
position: relative;
}
.pop-over.miniprofile .miniprofile-header .member,
.pop-over.miniprofile .miniprofile-header .avatar {
position: absolute;
top: 2px;
left: 2px;
height: 50px;
width: 50px;
}
.pop-over.miniprofile .miniprofile-header .info {
margin: 0 0 0 64px;
word-wrap: break-word;
}
.pop-over.miniprofile .miniprofile-header .info h3 a {
text-decoration: none;
}
.pop-over.miniprofile .miniprofile-header .info h3 a:hover {
text-decoration: underline;
}
@media screen and (max-width: 800px) {
.pop-over {
width: 100%;
height: 100%;
overflow: hidden;
margin-top: 0px;
border: 0px solid #dbdbdb;
}
.pop-over .header {
color: #fff;
background: #2980b9;
height: 48px;
padding: 0px 0px;
border: 0px;
margin: 0px 0px;
width: 100%;
position: absolute;
top: 0px;
}
.pop-over .header .header-title {
font-size: 20px;
font-weight: normal;
padding-top: 8px;
}
.pop-over .header .back-btn {
width: 30px;
padding: 8px 12px 8px 12px;
}
.pop-over .header .back-btn i.fa {
color: #fff;
}
.pop-over .header .close-btn {
padding: 10px 12px;
}
.pop-over .header .close-btn i.fa {
font-size: 24px;
color: #fff;
}
.pop-over .content-wrapper {
width: 100%;
height: calc(100% - 48px);
overflow-y: scroll;
overflow-x: hidden;
margin: 48px 0px 0px 0px;
}
.pop-over .content-container {
width: 1000%;
height: 100%;
max-height: 100%;
}
.pop-over .content-container .content {
width: calc(10% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.pop-over .content-container .content form {
margin: 10px 10px;
width: calc(100% - 20px);
}
.pop-over .content-container .content p,
.pop-over .content-container .content textarea,
.pop-over .content-container .content input[type="text"],
.pop-over .content-container .content input[type="email"],
.pop-over .content-container .content input[type="password"],
.pop-over .content-container .content input[type="file"] {
width: 100%;
box-sizing: border-box;
}
.pop-over .pop-over-list li > a {
width: calc(100% - 20px);
margin: 0px 0px;
}
.pop-over .popup-container-depth-1 {
transform: translateX(-10%);
}
.pop-over .popup-container-depth-2 {
transform: translateX(-20%);
}
.pop-over .popup-container-depth-3 {
transform: translateX(-30%);
}
.pop-over .popup-container-depth-4 {
transform: translateX(-40%);
}
.pop-over .popup-container-depth-5 {
transform: translateX(-50%);
}
.pop-over .popup-container-depth-6 {
transform: translateX(-60%);
}
}

324
client/components/main/popup.styl
View file

@ -1,324 +0,0 @@
@import 'nib'
$popupWidth = 300px
.pop-over
background: #fff
border-radius: 3px
border: 1px solid #dbdbdb
border-bottom-color: #c2c2c2
box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
position: absolute
width: $popupWidth
z-index: 99999
margin-top: 5px
hr
margin: 4px 0px
p,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"]
width: 100%
select
width: 100%
margin-bottom: 14px
textarea
height: 72px
form a span
padding: 0 0.5rem
.header
height: 36px
position: relative
margin-bottom: 8px
background: #F7F7F7
border-bottom: 1px solid #dcdcdc
color: darken(white, 60%)
.header-title
display: block
line-height: 32px
padding-top: 4px
margin: 0 10px
font-weight: bold
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.back-btn
float: left
overflow: hidden
width: 30px
transition: width 0.2s
i.fa
margin: 10px
margin-top: 12px
&.is-hidden
width: 0
.close-btn
padding: 10px 10px 10px 4px
position: absolute
top: 0
right: 0
&.no-title .header
background: none
.content-wrapper
width: 100%
overflow: hidden
.content-container
width: 5000px
max-height: 550px
transition: transform 0.2s
.content
width: $popupWidth - 20px
padding: 0 10px 10px
float: left
&.no-height
height: 20px
.quiet
padding: 6px 6px 4px
&.search-over
background: #f0f0f0
min-height: 114px
.header
display: none
.content
padding: 8px 4px 8px 10px
margin-right: 8px
.at-form
.at-error, .at-result
padding: 8px 12px
margin: -8px -10px 10px
.at-error
background: #ef9a9a
.at-result
background: #b2dfdb
.sk-spinner
margin: 40px auto
for depth in (1..6)
.popup-container-depth-{depth}
transform: translateX(- depth * $popupWidth)
.select-members-list,
.select-avatars-list
margin-bottom: 8px
.pop-over-list
li
display: block
clear: both
li > a
clear: both
cursor: pointer
display: block
font-weight: 700
padding: 1.5px 10px
position: relative
margin: 0 -10px
text-decoration: none
overflow:hidden
line-height:33px
.item-name
display: block
width: auto
padding-right: 22px
&:not(.disabled):hover
background-color: #005377
color: #fff
.sub-name,
.quiet
color: #eee
.unread-indicator
background: #fff
.sub-name
color: #8c8c8c
display: block
font-size: 12px
font-weight: 400
line-height: 15px
&.current
background-color: #e2e6e9
&:active
background-color: #2e85b8
&.disabled
color: #8c8c8c
cursor: default
.vis-icon
opacity: .35
&:hover
background: none
.sub-name,
.quiet
color: #8c8c8c
&:active
background: none
&.inset li > a
border-radius: 3px
margin: 0
.pop-over-list.checkable
.fa-check
display: none
position: absolute
top: 6px
right: 12px
li.active a
padding-right: 28px
.fa-check
display: block
.pop-over.miniprofile
.header
border-bottom-color: transparent
height: 30px
position: absolute
right: 0
top: 0
width: 60px
z-index: 1
.header-title
display: none
.pop-over-list
padding-top: 8px
.miniprofile-header
margin-top: 8px
min-height: 56px
position: relative
.member,
.avatar
position: absolute
top: 2px
left: 2px
height: 50px
width: @height
.info
margin: 0 0 0 64px
word-wrap: break-word
h3 a
text-decoration: none
&:hover
text-decoration: underline
@media screen and (max-width: 800px)
.pop-over
width: 100%
height: 100%
overflow: hidden
margin-top: 0px
border: 0px solid #dbdbdb
.header
color: white
background: #2980B9
height: 48px
padding: 0px 0px
border: 0px
margin: 0px 0px
width: 100%
position: absolute
top: 0px
.header-title
font-size: 20px
font-weight: normal
padding-top: 8px
.back-btn
width: 30px
padding: 8px 12px 8px 12px
i.fa
color: white
.close-btn
padding: 10px 12px
i.fa
font-size: 24px
color: white
.content-wrapper
width: 100%
height: calc(100% - 48px)
overflow-y: scroll
overflow-x: hidden
margin: 48px 0px 0px 0px
.content-container
width: 1000%
height: 100%
max-height: 100%
.content
width: calc(10% - 20px)
height: calc(100% - 20px)
padding: 10px
form
margin: 10px 10px
width: calc(100% - 20px)
p,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"]
width: 100%
box-sizing: border-box
.pop-over-list
li > a
width: calc(100% - 20px)
margin: 0px 0px
for depth in (1..6)
.popup-container-depth-{depth}
transform: translateX(- depth * 10%)

70
client/components/main/spinner_bounce.css Normal file
View file

@ -0,0 +1,70 @@
.sk-spinner-bounce {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.sk-spinner-bounce div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.sk-spinner-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.sk-spinner-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

44
client/components/main/spinner_bounce.styl
View file

@ -1,44 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-bounce {
margin: 100px auto 0;
width: 70px;
text-align: center;
div {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

123
client/components/main/spinner_cube.css Normal file
View file

@ -0,0 +1,123 @@
.sk-spinner-cube {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-cube1,
.sk-cube2 {
background-color: #333;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.sk-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% {
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
}
50% {
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
}
75% {
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@-moz-keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
}
50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-webkit-keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
}
50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@-o-keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
}
50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
@keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
}
50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
}
75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}

52
client/components/main/spinner_cube.styl
View file

@ -1,52 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-cube {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-cube1, .sk-cube2 {
background-color: #333;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.sk-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
} 50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}

79
client/components/main/spinner_cube_grid.styl → client/components/main/spinner_cube_grid.css
View file

@ -1,64 +1,99 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-spinner-cube-grid .sk-cube-grid {
width: 33%;
height: 33%;
background-color: #333;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-spinner-cube-grid .sk-cube-grid1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube-grid2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube-grid3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
animation-delay: 0.4s;
}
.sk-spinner-cube-grid .sk-cube-grid4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube-grid5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
animation-delay: 0.2s;
}
.sk-spinner-cube-grid .sk-cube-grid6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
animation-delay: 0.3s;
}
.sk-spinner-cube-grid .sk-cube-grid7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
animation-delay: 0s;
}
.sk-spinner-cube-grid .sk-cube-grid8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
animation-delay: 0.1s;
}
.sk-spinner-cube-grid .sk-cube-grid9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
animation-delay: 0.2s;
}
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@-moz-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@-o-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}

104
client/components/main/spinner_dot.css Normal file
View file

@ -0,0 +1,104 @@
.sk-spinner-dot {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2s infinite linear;
animation: sk-rotate 2s infinite linear;
}
.sk-dot1,
.sk-dot2 {
width: 40%;
height: 40%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-bounce 2s infinite ease-in-out;
animation: sk-bounce 2s infinite ease-in-out;
}
.sk-dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes sk-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes sk-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes sk-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes sk-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-o-keyframes sk-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@keyframes sk-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-o-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}

51
client/components/main/spinner_dot.styl
View file

@ -1,51 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-dot {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2.0s infinite linear;
animation: sk-rotate 2.0s infinite linear;
}
.sk-dot1, .sk-dot2 {
width: 40%;
height: 40%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.sk-dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

71
client/components/main/spinner_double_bounce.css Normal file
View file

@ -0,0 +1,71 @@
.sk-spinner-double-bounce {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.sk-double-bounce1,
.sk-double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2s infinite ease-in-out;
animation: sk-bounce 2s infinite ease-in-out;
}
.sk-double-bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes sk-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-webkit-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@-o-keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}

44
client/components/main/spinner_double_bounce.styl
View file

@ -1,44 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-double-bounce {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.sk-double-bounce1, .sk-double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

81
client/components/main/spinner_rotateplane.css Normal file
View file

@ -0,0 +1,81 @@
.sk-spinner-rotateplane {
width: 40px;
height: 40px;
text-align: center;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
.sk-spinner-rotateplane div {
background-color: #333;
height: 100%;
width: 100%;
display: inline-block;
}
@-webkit-keyframes sk-rotateplane {
0% {
-webkit-transform: perspective(120px);
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg);
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
}
}
@-moz-keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@-webkit-keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@-o-keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

38
client/components/main/spinner_rotateplane.styl
View file

@ -1,38 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-rotateplane {
width: 40px;
height: 40px;
text-align: center;
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
div {
background-color: #333;
height: 100%;
width: 100%;
display: inline-block;
}
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}

68
client/components/main/spinner_scaleout.css Normal file
View file

@ -0,0 +1,68 @@
.sk-spinner-scaleout {
width: 40px;
height: 40px;
text-align: center;
margin: 100px auto;
border-radius: 100%;
-webkit-animation: sk-scaleout 1s infinite ease-in-out;
animation: sk-scaleout 1s infinite ease-in-out;
}
.sk-spinner-scaleout div {
background-color: #333;
height: 100%;
width: 100%;
display: inline-block;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
opacity: 0;
}
}
@-moz-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@-o-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}

40
client/components/main/spinner_scaleout.styl
View file

@ -1,40 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-scaleout {
width: 40px;
height: 40px;
text-align: center;
margin: 100px auto;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
div {
background-color: #333;
height: 100%;
width: 100%;
display: inline-block;
}
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}

58
client/components/main/spinner_wave.css Normal file
View file

@ -0,0 +1,58 @@
.sk-spinner-wave {
width: 50px;
height: 50px;
margin: auto;
text-align: center;
font-size: 10px;
}
.sk-spinner-wave div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {
animation-delay: -1.1s;
}
.sk-spinner-wave .sk-rect3 {
animation-delay: -1s;
}
.sk-spinner-wave .sk-rect4 {
animation-delay: -0.9s;
}
.sk-spinner-wave .sk-rect5 {
animation-delay: -0.8s;
}
@-moz-keyframes sk-waveStretchDelay {
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
@-webkit-keyframes sk-waveStretchDelay {
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
@-o-keyframes sk-waveStretchDelay {
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}

29
client/components/main/spinner_wave.styl
View file

@ -1,29 +0,0 @@
@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-wave {
width: 50px;
height: 50px;
margin: auto;
text-align: center;
font-size: 10px;
div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-rect2 { animation-delay: -1.1s }
.sk-rect3 { animation-delay: -1.0s }
.sk-rect4 { animation-delay: -0.9s }
.sk-rect5 { animation-delay: -0.8s }
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100% { transform: scaleY(0.4) }
20% { transform: scaleY(1.0) }
}

67
client/components/notifications/notification.css Normal file
View file

@ -0,0 +1,67 @@
#notifications-drawer.show-read .notification.read {
display: flex;
}
#notifications-drawer .notification {
display: flex;
float: none;
padding: 15px 8px 8px;
color: #000;
border-bottom: 1px solid #dbdbdb;
}
#notifications-drawer .notification.read {
display: none;
}
#notifications-drawer .notification .read-status {
width: 30px;
padding: 0px 10px 0px 0px;
}
#notifications-drawer .notification .read-status input {
width: 24px;
height: 24px;
}
#notifications-drawer .notification .read-status .activity-type {
margin: 16px 0 0;
width: 17px;
height: 17px;
font-size: 17px;
display: block;
color: #bbb;
}
#notifications-drawer .notification .details .activity a.member {
margin: 0px 0px 0px 0px;
padding: 0px;
}
#notifications-drawer .notification .details .activity a.member svg {
padding: 3px;
}
#notifications-drawer .notification .details .activity .activity-desc {
margin: 0px 0px 0px 5px;
}
#notifications-drawer .notification .details .activity .activity-comment {
display: block;
width: 100%;
border-radius: 3px;
background: #fff;
text-decoration: none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
}
#notifications-drawer .notification .details .activity .activity-meta {
display: block;
font-size: 0.8em;
color: #999;
font-style: italic;
}
#notifications-drawer .notification .remove a:hover {
color: #eb4646 !important;
}
@media screen and (max-width: 800px) {
#notifications-drawer .notification {
height: auto;
}
#notifications-drawer .notification .details .activity a.member {
height: 36px;
width: 36px;
}
}

72
client/components/notifications/notification.styl
View file

@ -1,72 +0,0 @@
#notifications-drawer
&.show-read .notification.read
display: flex
.notification
display: flex
float: none
padding: 15px 8px 8px
color: black
border-bottom: 1px solid #dbdbdb
&.read
display: none
.read-status
width: 30px
padding: 0px 10px 0px 0px
input
width: 24px
height: 24px
.activity-type
margin: 16px 0 0
width: 17px
height: 17px
font-size: 17px
display: block
color: #bbb
.details
.activity
a.member
margin: 0px 0px 0px 0px
padding: 0px
svg
padding: 3px
.activity-desc
margin: 0px 0px 0px 5px
.activity-comment
display: block
width: 100%
border-radius: 3px
background: #fff
text-decoration: none
box-shadow: 0 1px 2px rgba(0,0,0,0.2)
margin-top: 5px
padding: 5px
.activity-meta
display: block
font-size: 0.8em
color: #999
font-style: italic
.remove
a:hover
color #eb4646 !important
@media screen and (max-width: 800px)
#notifications-drawer
.notification
height: auto
.details
.activity
a.member
height: 36px
width: 36px

17
client/components/notifications/notifications.css Normal file
View file

@ -0,0 +1,17 @@
#notifications {
position: relative;
}
#notifications .notifications-drawer-toggle {
display: block;
line-height: 28px;
color: #f2f2f2;
margin: 0 10px;
width: 28px;
height: 28px;
text-align: center;
border: 0;
padding: 0;
}
#notifications .notifications-drawer-toggle.alert {
background-color: #eb4646;
}

17
client/components/notifications/notifications.styl
View file

@ -1,17 +0,0 @@
#notifications
position: relative
.notifications-drawer-toggle
display: block
line-height: 28px
color: #f2f2f2
margin: 0 10px
width: 28px
height: 28px
text-align: center
border: 0
padding: 0
&.alert
background-color: #eb4646;

67
client/components/notifications/notificationsDrawer.css Normal file
View file

@ -0,0 +1,67 @@
section#notifications-drawer {
position: fixed;
top: 48px;
right: 0;
width: 400px;
background-color: #fafafa;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
border-radius: 2px;
max-height: calc(100vh - 28px - 36px);
color: #000;
padding-top: 36px;
}
section#notifications-drawer a:hover {
color: #2980b9 !important;
}
section#notifications-drawer .header {
position: fixed;
top: 48px;
right: 0;
width: calc(400px - 32px);
padding: 8px 16px;
background: #ededed;
border-bottom: 1px solid #dbdbdb;
z-index: 2;
}
section#notifications-drawer .header .toggle-read {
position: absolute;
left: 16px;
top: calc(50% - 8px);
color: #2980b9;
}
section#notifications-drawer .header h5 {
text-align: center;
margin: 0;
}
section#notifications-drawer .header .close {
position: absolute;
top: calc(50% - 12px);
right: 12px;
font-size: 24px;
height: 24px;
line-height: 24px;
opacity: 1;
}
section#notifications-drawer .all-read,
section#notifications-drawer .remove-read {
color: #2980b9;
background-color: #fafafa;
margin: 8px 16px 12px;
display: inline-block;
}
section#notifications-drawer .remove-read {
float: right;
}
section#notifications-drawer .remove-read:hover {
color: #eb4646 !important;
}
section#notifications-drawer .remove-read:hover i.fa {
color: inherit;
}
section#notifications-drawer ul.notifications {
display: block;
padding: 0px 16px 0px 16px;
margin: 0;
height: calc(100vh - 122px);
overflow-y: scroll;
}

69
client/components/notifications/notificationsDrawer.styl
View file

@ -1,69 +0,0 @@
belize = #2980b9
section#notifications-drawer
position: fixed
top: 48px
right: 0
width: 400px
background-color: #fafafa
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
border-radius: 2px
max-height: calc(100vh - 28px - 36px)
color: black
padding-top 36px
a:hover
color: belize !important
.header
position: fixed
top 48px
right 0
width calc(400px - 32px)
padding: 8px 16px
background: #ededed
border-bottom: 1px solid #dbdbdb
z-index 2
.toggle-read
position absolute
left 16px
top calc(50% - 8px)
color belize
h5
text-align: center
margin: 0
.close
position: absolute
top: calc(50% - 12px)
right: 12px
font-size: 24px
height: 24px
line-height: 24px
opacity 1
.all-read,
.remove-read
color belize
background-color: #fafafa
margin 8px 16px 12px
display inline-block
.remove-read
float right
&:hover
color #eb4646 !important
i.fa
color inherit
ul.notifications
display: block
padding: 0px 16px 0px 16px
margin: 0
height: calc(100vh - 122px)
overflow-y: scroll

217
client/components/rules/rules.css Normal file
View file

@ -0,0 +1,217 @@
.rules-list {
overflow: hidden;
overflow-y: scroll;
max-height: 400px;
padding-right: 5px;
}
.rules-lists-item {
display: block;
position: relative;
overflow: auto;
border-bottom: 1px solid #bfbfbf;
}
.rules-lists-item p {
display: inline-block;
float: left;
margin: revert;
}
.hide-element {
display: none !important;
}
.user-details {
display: inline-block;
}
.rules-btns-group {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.rules-btns-group button {
margin: auto;
}
.rules-add {
display: block;
overflow: auto;
margin-top: 15px;
margin-bottom: 5px;
}
.rules-add input {
display: inline-block;
float: right;
margin: auto;
margin-right: 10px;
}
.rules-add button {
display: inline-block;
float: right;
margin: auto;
}
.rules-back {
display: block;
overflow: auto;
margin-top: 15px;
margin-bottom: 5px;
}
.rules-back button {
display: inline-block;
float: right;
margin: auto;
margin-right: 14px;
}
.flex,
.triggers-content .triggers-body .triggers-side-menu ul li a {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.triggers-content {
color: #727479;
background: #dedede;
}
.triggers-content .triggers-body {
display: flex;
padding-top: 15px;
height: 100%;
}
.triggers-content .triggers-body .triggers-side-menu {
background-color: #f7f7f7;
border: 1px solid #f0f0f0;
border-radius: 4px;
height: intrinsic;
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05);
}
.triggers-content .triggers-body .triggers-side-menu ul li {
margin: 0.1rem 0.2rem;
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
position: relative;
}
.triggers-content .triggers-body .triggers-side-menu ul li i {
position: absolute;
top: 50%;
left: 50%;
box-shadow: none;
transform: translate(-50%, -50%);
}
.triggers-content .triggers-body .triggers-side-menu ul li.active {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.triggers-content .triggers-body .triggers-side-menu ul li:hover {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.triggers-content .triggers-body .triggers-side-menu ul li a {
padding: 1rem 0 1rem 1rem;
width: 95%;
}
.triggers-content .triggers-body .triggers-side-menu ul li a span {
font-size: 13px;
}
.triggers-content .triggers-body .triggers-main-body {
padding: 0.1em 1em;
width: 100%;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item {
overflow: auto;
padding: 10px;
height: 100px;
margin-bottom: 5px;
border-radius: 3px;
position: relative;
background-color: #fff;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-text {
font-size: 16px;
display: inline-block;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button {
font-size: 16px;
display: inline;
padding: 6px;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05);
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button:hover,
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-text.trigger-text-email {
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown {
display: inline-block;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown select {
width: auto;
height: 30px;
margin: 0px;
margin-left: 5px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown input {
display: inline-block;
width: 80px;
margin: 0;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content-mail {
left: 20px;
right: 100px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: 1px solid #eee;
border-radius: 4px;
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05);
text-align: center;
font-size: 20px;
right: 10px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button i {
position: absolute;
top: 50%;
left: 50%;
box-shadow: none;
transform: translate(-50%, -50%);
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button:hover,
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-email {
top: 30px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-person {
right: -40px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-color {
top: unset;
position: unset;
transform: unset;
font-size: 16px;
width: auto;
padding-left: 10px;
padding-right: 10px;
height: 40px;
}
.triggers-content .triggers-body .triggers-main-body .trigger-item.trigger-item-mail {
height: 300px;
}

192
client/components/rules/rules.styl
View file

@ -1,192 +0,0 @@
.rules-list
overflow:hidden
overflow-y:scroll
max-height: 400px
padding-right: 5px
.rules-lists-item
display: block
position: relative
overflow: auto
border-bottom: 1px solid #bfbfbf
p
display: inline-block
float: left
margin: revert
.hide-element
display:none !important
.user-details
display:inline-block
.rules-btns-group
position: absolute
right: 0
top: 50%
transform: translateY(-50%)
button
margin: auto
.rules-add
display: block
overflow: auto
margin-top: 15px
margin-bottom: 5px
input
display: inline-block
float: right
margin: auto
margin-right: 10px
button
display: inline-block
float: right
margin: auto
.rules-back
display: block
overflow: auto
margin-top: 15px
margin-bottom: 5px
button
display: inline-block
float: right
margin: auto
margin-right:14px
.flex
display: -webkit-box
display: -moz-box
display: -webkit-flex
display: -moz-flex
display: -ms-flexbox
display: flex
.triggers-content
color: #727479
background: #dedede
.triggers-body
display flex
padding-top 15px
height 100%
.triggers-side-menu
background-color: #f7f7f7
border: 1px solid #f0f0f0
border-radius: 4px
height: intrinsic
box-shadow: inset -1px -1px 3px rgba(0,0,0,.05)
ul
li
margin: 0.1rem 0.2rem;
width:50px
height:50px
text-align:center
font-size: 25px
position: relative
i
position: absolute;
top: 50%;
left: 50%;
box-shadow: none
transform: translate(-50%,-50%);
&.active
background #fff
box-shadow 0 1px 2px rgba(0,0,0,0.15);
&:hover
background #fff
box-shadow 0 1px 2px rgba(0,0,0,0.15);
a
@extends .flex
padding: 1rem 0 1rem 1rem
width: 100% - 5rem
span
font-size: 13px
.triggers-main-body
padding: 0.1em 1em
width:100%
.trigger-item
overflow:auto
padding:10px
height:100px
margin-bottom:5px
border-radius: 3px
position: relative
background-color: white
.trigger-content
position:absolute
top:50%
transform: translateY(-50%)
left:10px
.trigger-text
font-size: 16px
display:inline-block
.trigger-inline-button
font-size: 16px
display: inline;
padding: 6px;
border: 1px solid #eee
border-radius: 4px
box-shadow: inset -1px -1px 3px rgba(0,0,0,.05)
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
.trigger-text.trigger-text-email
margin-left: 5px;
margin-top: 10px;
margin-bottom: 10px;
.trigger-dropdown
display:inline-block
select
width:auto
height:30px
margin:0px
margin-left:5px
input
display: inline-block
width: 80px;
margin: 0;
.trigger-content-mail
left:20px
right:100px
.trigger-button
position:absolute
top:50%
transform: translateY(-50%)
width:30px
height:30px
border: 1px solid #eee
border-radius: 4px
box-shadow: inset -1px -1px 3px rgba(0,0,0,.05)
text-align:center
font-size: 20px
right:10px
i
position: absolute
top: 50%
left: 50%
box-shadow: none
transform: translate(-50%,-50%)
&:hover, &.is-active
box-shadow: 0 0 0 2px darken(white, 60%) inset
.trigger-button.trigger-button-email
top:30px
.trigger-button.trigger-button-person
right:-40px
.trigger-button.trigger-button-color
top: unset
position: unset
transform: unset
font-size: 16px
width:auto
padding-left: 10px
padding-right: 10px
height:40px
.trigger-item.trigger-item-mail
height:300px

8
client/components/settings/attachments.css Normal file
View file

@ -0,0 +1,8 @@
.move-attachment-buttons {
display: flex;
gap: 10px;
}
.attachments-content hr {
height: 0px;
border: 1px solid #000;
}

8
client/components/settings/attachments.styl
View file

@ -1,8 +0,0 @@
.move-attachment-buttons
display: flex
gap: 10px
.attachments-content
hr
height: 0px
border: 1px solid black

91
client/components/settings/peopleBody.css Normal file
View file

@ -0,0 +1,91 @@
.main-body {
overflow: scroll;
}
table {
color: #000;
}
table td,
table th {
border: 1px solid #d2d0d0;
text-align: left;
padding: 8px;
}
table tr:nth-child(even) {
background-color: #ddd;
}
.ext-box {
display: flex;
flex-direction: row;
height: 34px;
}
.ext-box .ext-box-left {
display: flex;
width: 100%;
gap: 10px;
}
.ext-box span {
vertical-align: center;
line-height: 34px;
}
.ext-box input,
.ext-box button {
padding: 0;
}
.ext-box button {
min-width: 90px;
}
.content-wrapper {
margin-top: 10px;
}
.buttonsContainer {
display: flex;
}
.buttonsContainer input {
margin: 0;
}
.buttonsContainer div {
margin: auto;
}
.more-settings-user,
.more-settings-team,
.more-settings-org {
margin-left: 10px;
}
.js-orgs,
.js-orgsNewUser {
display: none;
}
.js-teams,
.js-teamsNewUser {
display: none;
}
.selectUserChkBox,
.allUserChkBox {
position: static !important;
visibility: visible !important;
left: 0 !important;
display: block !important;
}
#divAddOrRemoveTeam {
background: #008000;
display: none;
}
#addOrRemoveTeam {
background: #008000;
color: #fff;
}
#divAddOrRemoveTeamContainer {
display: none;
margin: auto;
width: 50%;
border: 3px solid #008000;
padding: 10px;
}
#cancelBtn {
margin-left: 5% !important;
background: #ffa500;
color: #fff;
}
#deleteAction {
margin-left: 5% !important;
}

83
client/components/settings/peopleBody.styl
View file

@ -1,83 +0,0 @@
.main-body
overflow: scroll;
table
color: #000;
td, th
border: 1px solid #d2d0d0;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
.ext-box
display: flex;
flex-direction: row;
height: 34px;
.ext-box-left
display: flex;
width: 100%
gap: 10px
span
vertical-align: center;
line-height: 34px;
input, button
padding: 0;
button
min-width: 90px;
.content-wrapper
margin-top: 10px
.buttonsContainer
display: flex
input
margin: 0
div
margin: auto
.more-settings-user,.more-settings-team,.more-settings-org
margin-left: 10px;
.js-orgs,.js-orgsNewUser
display: none;
.js-teams,.js-teamsNewUser
display: none;
.selectUserChkBox,.allUserChkBox
position: static !important;
visibility: visible !important;
left: 0 !important;
display: block !important;
#divAddOrRemoveTeam
background: green;
display: none;
#addOrRemoveTeam
background: green;
color: white;
#divAddOrRemoveTeamContainer
display: none;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
#cancelBtn
margin-left: 5% !important;
background: orange;
color: white;
#deleteAction
margin-left: 5% !important;

128
client/components/settings/settingBody.css Normal file
View file

@ -0,0 +1,128 @@
.flex,
.setting-content .content-body .side-menu ul li a,
.option {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.setting-content {
color: #727479;
background: #dedede;
width: 100%;
position: absolute;
}
.setting-content .content-title {
font-size: 20px;
}
.setting-content .content-body {
display: flex;
padding-top: 15px;
height: 100%;
gap: 10px;
}
.setting-content .content-body .side-menu {
background-color: #f7f7f7;
border: 1px solid #f0f0f0;
border-radius: 4px;
width: 250px;
box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05);
}
.setting-content .content-body .side-menu ul li {
margin: 0.1rem 0.2rem;
}
.setting-content .content-body .side-menu ul li.active {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.setting-content .content-body .side-menu ul li:hover {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.setting-content .content-body .side-menu ul li a {
padding: 1rem 0 1rem 1rem;
width: 95%;
}
.setting-content .content-body .side-menu ul li a span {
font-size: 13px;
}
.setting-content .content-body .side-menu ul li a i {
margin-right: 20px;
}
.setting-content .content-body .main-body {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.setting-content .content-body .main-body ul li {
padding: 0.5rem 0.5rem;
}
.setting-content .content-body .main-body ul li a .is-checked {
border-bottom: 2px solid #2980b9;
border-right: 2px solid #2980b9;
}
.setting-content .content-body .main-body ul li a span {
padding: 0 0.5rem;
}
.setting-content .content-body .main-body ul li .admin-announcement,
.setting-content .content-body .main-body ul li .invite-people,
.setting-content .content-body .main-body ul li .layout {
padding-left: 20px;
}
.setting-content .content-body .main-body ul li .admin-announcement li,
.setting-content .content-body .main-body ul li .invite-people li,
.setting-content .content-body .main-body ul li .layout li {
min-width: 500px;
}
.setting-content .content-body .main-body ul li .admin-announcement li ul.no-margin-bottom,
.setting-content .content-body .main-body ul li .invite-people li ul.no-margin-bottom,
.setting-content .content-body .main-body ul li .layout li ul.no-margin-bottom {
margin-bottom: 0;
}
.setting-content .content-body .main-body ul li .admin-announcement li .bg-white a,
.setting-content .content-body .main-body ul li .invite-people li .bg-white a,
.setting-content .content-body .main-body ul li .layout li .bg-white a {
background: #f7f7f7;
}
.setting-content .content-body .main-body ul li .admin-announcement li .bg-white a.is-checked,
.setting-content .content-body .main-body ul li .invite-people li .bg-white a.is-checked,
.setting-content .content-body .main-body ul li .layout li .bg-white a.is-checked {
background: #fff;
}
.setting-content .content-body .main-body ul li input[type=radio] {
margin: 4px;
}
.option {
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
}
.title {
font-weight: 700;
margin-bottom: 0.5rem;
}
.description {
margin-bottom: 0.5rem;
}
.bg-white {
background: #f9fbfc;
}
.wekan-form-control.has-error {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
li.has-error {
color: #a94442;
}
li.has-error .form-group .wekan-form-control {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

121
client/components/settings/settingBody.styl
View file

@ -1,121 +0,0 @@
.flex
display: -webkit-box
display: -moz-box
display: -webkit-flex
display: -moz-flex
display: -ms-flexbox
display: flex
.setting-content
color: #727479
background: #dedede
width 100%
position: absolute;
.content-title
font-size 20px
.content-body
display flex
padding-top 15px
height 100%
gap: 10px;
.side-menu
background-color: #f7f7f7;
border: 1px solid #f0f0f0;
border-radius: 4px;
width: 250px;
box-shadow: inset -1px -1px 3px rgba(0,0,0,.05);
ul
li
margin: 0.1rem 0.2rem;
&.active
background #fff
box-shadow 0 1px 2px rgba(0,0,0,0.15);
&:hover
background #fff
box-shadow 0 1px 2px rgba(0,0,0,0.15);
a
@extends .flex
padding: 1rem 0 1rem 1rem
width: 100% - 5rem
span
font-size: 13px
i
margin-right: 20px
.main-body
-webkit-user-select: text // Safari 3.1+
-moz-user-select: text // Firefox 2+
-ms-user-select: text // IE 10+
user-select: text // Standard syntax
ul
li
padding: 0.5rem 0.5rem;
a
.is-checked
border-bottom: 2px solid #2980b9;
border-right: 2px solid #2980b9;
span
padding: 0 0.5rem
.admin-announcement,
.invite-people,
.layout
padding-left 20px;
li
min-width: 500px;
ul.no-margin-bottom
margin-bottom: 0;
.bg-white
a
background #f7f7f7
&.is-checked
background #fff
input[type=radio]
margin: 4px
.option
@extends .flex
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
text-decoration: none;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
margin-top: 5px;
padding: 5px;
.title
font-weight 700;
margin-bottom 0.5rem;
.description
margin-bottom 0.5rem;
.bg-white
background #f9fbfc;
.wekan-form-control.has-error
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
li.has-error
color #a94442
.form-group
.wekan-form-control
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

27
client/components/settings/settingHeader.css Normal file
View file

@ -0,0 +1,27 @@
#header #header-main-bar .setting-header-btn {
color: #f2f2f2;
margin-left: 20px;
padding-right: 10px;
height: 28px;
font-size: 13px;
float: left;
overflow: hidden;
line-height: 28px;
margin: 0 2px;
}
#header #header-main-bar .setting-header-btn.active,
#header #header-main-bar .setting-header-btn:hover:not(.is-disabled) {
background: rgba(0,0,0,0.15);
}
#header #header-main-bar .setting-header-btn i.fa {
float: left;
display: block;
line-height: 28px;
color: #f2f2f2;
margin: 0 10px;
}
#header #header-main-bar .setting-header-btn + span {
display: inline-block;
margin-top: 1px;
margin-right: 10px;
}

25
client/components/settings/settingHeader.styl
View file

@ -1,25 +0,0 @@
#header #header-main-bar .setting-header-btn
&.active,
&:hover:not(.is-disabled)
background: rgba(0, 0, 0, .15)
color: darken(white, 5%)
margin-left: 20px;
padding-right: 10px;
height: 28px;
font-size: 13px;
float: left;
overflow: hidden;
line-height: @height;
margin: 0 2px;
i.fa
float: left
display: block
line-height: 28px
color: darken(white, 5%)
margin: 0 10px
+ span
display: inline-block
margin-top: 1px
margin-right: 10px

252
client/components/sidebar/sidebar.css Normal file
View file

@ -0,0 +1,252 @@
.sidebar {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
.sidebar .sidebar-shadow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #f7f7f7;
box-shadow: -10px 0px 5px -10px #b3b3b3;
z-index: 10;
}
.sidebar .sidebar-content {
padding: 12px;
margin-bottom: 1.6em;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
}
.sidebar .sidebar-content .hide-btn {
display: none;
}
.sidebar .sidebar-content h3 {
color: #808080;
font-size: 1em;
margin-bottom: 10px;
font-weight: bold;
}
.sidebar .sidebar-content h3 i.fa {
margin-right: 3px;
}
.sidebar .sidebar-content hr {
margin: 13px 0;
}
.sidebar .sidebar-content ul.sidebar-list {
display: flex;
flex-direction: column;
}
.sidebar .sidebar-content ul.sidebar-list li > a {
display: flex;
height: 30px;
margin: 0;
padding: 4px;
border-radius: 3px;
align-items: center;
}
.sidebar .sidebar-content ul.sidebar-list li > a:hover,
.sidebar .sidebar-content ul.sidebar-list li > a:hover i,
.sidebar .sidebar-content ul.sidebar-list li > a:hover .quiet {
color: #fff;
}
.sidebar .sidebar-content ul.sidebar-list li > a .member,
.sidebar .sidebar-content ul.sidebar-list li > a .card-label {
margin-right: 7px;
margin-top: 5px;
}
.sidebar .sidebar-content ul.sidebar-list li > a .minicard-edit-button {
float: right;
padding: 8px;
border-radius: 3px;
}
.sidebar .sidebar-content ul.sidebar-list li > a .sidebar-list-item-description {
flex: 1;
overflow: ellipsis;
}
.sidebar .sidebar-content ul.sidebar-list li > a .fa.fa-check {
margin: 0 4px;
}
.sidebar .sidebar-content ul.sidebar-list li .minicard {
padding: 6px 8px 4px;
}
.sidebar .sidebar-content ul.sidebar-list li .minicard .minicard-edit-button {
float: right;
padding: 4px;
border-radius: 3px;
}
.sidebar .sidebar-content ul.sidebar-list li .minicard .minicard-edit-button:hover {
background: #dbdbdb;
}
.sidebar .sidebar-content .sidebar-btn {
display: block;
margin: 5px 0;
padding: 10px;
border-radius: 3px;
background: #e6e6e6;
}
.sidebar .sidebar-content .sidebar-btn:hover * {
color: #fff;
}
.sidebar .sidebar-content .sidebar-btn i.fa {
margin-right: 10px;
}
.sidebar .sidebar-shortcuts {
position: absolute;
margin-left: 40%;
padding: 0;
top: 7px;
font-size: 0.8em;
line-height: 1.6em;
color: #999;
}
.board-sidebar {
width: 548px;
right: -548px;
transition: top 0.1s, right 0.1s, width 0.1s;
}
.board-sidebar.is-open {
right: 0;
}
.board-widget h4 {
margin: 5px 0;
}
.board-widget-activity {
margin-right: -4px;
}
.sidebar-tongue {
display: block;
width: 30px;
height: 30px;
left: -30px;
position: absolute;
top: 0px;
z-index: 15;
background: #f7f7f7;
border-bottom-left-radius: 3px;
box-shadow: -4px 0px 7px -4px #b3b3b3;
color: #808080;
transition: left 0.1s;
}
.sidebar-tongue i.fa {
padding: 3px 9px;
font-size: 24px;
transition: transform 0.5s;
}
.board-sidebar.is-open .sidebar-tongue {
left: -28px;
}
.board-sidebar.is-open .sidebar-tongue:hover {
left: -25px;
}
.board-sidebar.is-open .sidebar-tongue i.fa {
transform: rotate(180deg);
}
.sidebar-tongue.is-hidden,
.board-sidebar.is-open .sidebar-tongue.is-hidden {
z-index: 0;
left: 5px;
}
.archived-lists .archived-lists-item {
border-top: 1px solid #ccc;
clear: both;
padding: 5px 0;
}
.archived-lists .archived-lists-item:first-child {
border-top: none;
}
.archived-lists .archived-lists-item 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: -100%;
}
.board-sidebar .sidebar-content .hide-btn {
width: 40px;
height: 40px;
position: absolute;
right: 5px;
top: 5px;
display: block;
z-index: 15;
background: #f7f7f7;
transition: left 0.1s;
color: #808080;
border-radius: 50%;
border: 1px solid #b3b3b3;
box-shadow: 0 1px 6px rgba(0,0,0,0.3);
color: #808080;
}
.board-sidebar .sidebar-content .hide-btn i.fa {
padding: 8px 16px;
font-size: 24px;
font-weight: bold;
}
.sidebar-tongue {
width: 40px;
height: 40px;
left: -47px;
top: 5px;
display: block;
border-radius: 50%;
border: 1px solid #b3b3b3;
box-shadow: 0 1px 6px rgba(0,0,0,0.3);
color: #808080;
}
.board-sidebar.is-open .sidebar-tongue {
display: none;
}
.sidebar-tongue i.fa {
padding: 8px 0px 8px 16px;
font-weight: bold;
}
}
#jsBoardOrgs,
#jsBoardTeams {
width: 90%;
}
.leaveBoardBtn {
background-color: #008000 !important;
}
.cancelLeaveBoardBtn {
margin-left: 5% !important;
background-color: #f00 !important;
}
.addTeamsLabel,
.addOrganizationsLabel {
font-weight: normal;
}
.js-manage-board-removeTeam:hover,
.js-manage-board-removeTeam.is-active,
.js-manage-board-removeOrg:hover,
.js-manage-board-removeOrg.is-active {
box-shadow: 0 0 0 2px #e23210 inset !important;
}
.js-manage-board-addTeam:hover,
.js-manage-board-addTeam.is-active,
.js-manage-board-addOrg:hover,
.js-manage-board-addOrg.is-active {
box-shadow: 0 0 0 2px #73ea10 inset !important;
}
.addTeamFaPlus {
color: #008000 !important;
}
.removeTeamFaMinus {
color: #f00 !important;
}
.divaddfaplusminus {
padding-top: 5px;
margin-left: 40px;
}

247
client/components/sidebar/sidebar.styl
View file

@ -1,247 +0,0 @@
@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
.addTeamsLabel, .addOrganizationsLabel
font-weight: normal
.js-manage-board-removeTeam:hover, .js-manage-board-removeTeam.is-active,
.js-manage-board-removeOrg:hover, .js-manage-board-removeOrg.is-active
box-shadow: 0 0 0 2px #e23210 inset !important
.js-manage-board-addTeam:hover, .js-manage-board-addTeam.is-active,
.js-manage-board-addOrg:hover , .js-manage-board-addOrg.is-active
box-shadow: 0 0 0 2px #73ea10 inset !important
.addTeamFaPlus
color: green !important
.removeTeamFaMinus
color: red !important
.divaddfaplusminus
padding-top: 5px;
margin-left: 40px;

3
client/components/sidebar/sidebarSearches.css Normal file
View file

@ -0,0 +1,3 @@
input {
max-width: 100%;
}

2
client/components/sidebar/sidebarSearches.styl
View file

@ -1,2 +0,0 @@
input
max-width: 100%

220
client/components/swimlanes/swimlanes.css Normal file
View file

@ -0,0 +1,220 @@
/*
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
.accordion
cursor: pointer
width: 30px
height: 20px
border: none
outline: none
font-size: 18px
transition: 0.4s
padding-top: 0px
margin-top: 0px
.accordion:after
// Unicode triagle right:
content: '\25B6'
color: #777
font-weight: bold
float: left
.active:after
// Unicode triangle down:
content: '\25BC'
.panel
width: 100%
max-height: 0
overflow: hidden
transition: max-height 0.2s ease-out
margin: 0px
padding: 0px
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
*/
@media screen and (min-width: 801px) {
.swimlane.ui-sortable {
width: max-content;
}
}
[class=swimlane] {
position: sticky;
left: 0;
}
.swimlane {
background: #dedede;
display: flex;
flex-direction: row;
overflow: 0;
max-height: calc(100% - 26px);
}
.swimlane.placeholder {
background-color: rgba(0,0,0,0.2);
border-color: transparent;
box-shadow: none;
height: 100px;
}
.swimlane.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(2deg);
cursor: grabbing;
}
.swimlane.ui-sortable-helper .swimlane-header.ui-sortable-handle {
cursor: grabbing;
}
.swimlane .swimlane-header-wrap {
display: flex;
flex-direction: row;
flex: 1 0 100%;
background-color: #ccc;
}
.swimlane .swimlane-header-wrap .swimlane-header {
font-size: 14px;
padding: 5px 5px;
font-weight: bold;
min-height: 9px;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
}
.swimlane .swimlane-header-wrap .swimlane-header-menu {
position: absolute;
padding: 5px 5px;
font-size: 22px;
}
.swimlane .swimlane-header-wrap .swimlane-header-plus-icon {
margin-left: 5px;
padding-right: 20px;
font-size: 22px;
}
.swimlane .swimlane-header-wrap .swimlane-header-menu-icon {
padding-right: 20px;
font-size: 22px;
}
.swimlane .swimlane-header-wrap .swimlane-header-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
left: 230px;
font-size: 18px;
}
.swimlane .swimlane-header-wrap .swimlane-header-miniscreen-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
left: 87vw;
font-size: 24px;
}
.list-group {
height: 100%;
}
.moving-swimlane {
display: none;
}
.swimlane-white {
background: #fff !important;
color: #4d4d4d !important;
border: 1px solid #eee;
}
.swimlane-green {
background: #3cb500 !important;
color: #fff !important;
}
.swimlane-yellow {
background: #fad900 !important;
color: #4d4d4d !important;
}
.swimlane-orange {
background: #ff9f19 !important;
color: #4d4d4d !important;
}
.swimlane-red {
background: #eb4646 !important;
color: #fff !important;
}
.swimlane-purple {
background: #a632db !important;
color: #fff !important;
}
.swimlane-blue {
background: #0079bf !important;
color: #fff !important;
}
.swimlane-pink {
background: #ff78cb !important;
color: #4d4d4d !important;
}
.swimlane-sky {
background: #00c2e0 !important;
color: #fff !important;
}
.swimlane-black {
background: #4d4d4d !important;
color: #fff !important;
}
.swimlane-lime {
background: #51e898 !important;
color: #4d4d4d !important;
}
.swimlane-silver {
background: unset !important;
color: #4d4d4d !important;
}
.swimlane-peachpuff {
background: #ffdab9 !important;
color: #4d4d4d !important;
}
.swimlane-crimson {
background: #dc143c !important;
color: #fff !important;
}
.swimlane-plum {
background: #dda0dd !important;
color: #4d4d4d !important;
}
.swimlane-darkgreen {
background: #006400 !important;
color: #fff !important;
}
.swimlane-slateblue {
background: #6a5acd !important;
color: #fff !important;
}
.swimlane-magenta {
background: #f0f !important;
color: #fff !important;
}
.swimlane-gold {
background: #ffd700 !important;
color: #4d4d4d !important;
}
.swimlane-navy {
background: #000080 !important;
color: #fff !important;
}
.swimlane-gray {
background: #808080 !important;
color: #fff !important;
}
.swimlane-saddlebrown {
background: #8b4513 !important;
color: #fff !important;
}
.swimlane-paleturquoise {
background: #afeeee !important;
color: #4d4d4d !important;
}
.swimlane-mistyrose {
background: #ffe4e1 !important;
color: #4d4d4d !important;
}
.swimlane-indigo {
background: #4b0082 !important;
color: #fff !important;
}

205
client/components/swimlanes/swimlanes.styl
View file

@ -1,205 +0,0 @@
@import 'nib'
/*
// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp
.accordion
cursor: pointer
width: 30px
height: 20px
border: none
outline: none
font-size: 18px
transition: 0.4s
padding-top: 0px
margin-top: 0px
.accordion:after
// Unicode triagle right:
content: '\25B6'
color: #777
font-weight: bold
float: left
.active:after
// Unicode triangle down:
content: '\25BC'
.panel
width: 100%
max-height: 0
overflow: hidden
transition: max-height 0.2s ease-out
margin: 0px
padding: 0px
// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp
*/
@media screen and (min-width: 801px)
.swimlane.ui-sortable
// swimlane must have max width, otherwise lists are not sortable if there are too much lists and the swimlane "scrollable"
width: max-content
[class=swimlane]
position: sticky
left: 0
.swimlane
// Even if this background color is the same as the body we can't leave it
// transparent, because that won't work during a swimlane drag.
background: darken(white, 13%)
display: flex
flex-direction: row
overflow: 0;
max-height: calc(100% - 26px)
&.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
&.ui-sortable-helper
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(2deg)
cursor: grabbing
.swimlane-header.ui-sortable-handle
cursor: grabbing
.swimlane-header-wrap
display: flex
flex-direction: row
flex: 1 0 100%
background-color: #ccc
.swimlane-header
font-size: 14px
padding: 5px 5px
font-weight: bold
min-height: 9px
width: 100%
overflow: hidden
-o-text-overflow: ellipsis
text-overflow: ellipsis
word-wrap: break-word
text-align: center
.swimlane-header-menu
position: absolute
padding: 5px 5px
font-size: 22px
.swimlane-header-plus-icon
margin-left: 5px
padding-right: 20px
font-size: 22px
.swimlane-header-menu-icon
padding-right: 20px
font-size: 22px
.swimlane-header-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
left: 230px
font-size: 18px
.swimlane-header-miniscreen-handle
position: absolute
padding: 7px
top: 50%
transform: translateY(-50%)
left: 87vw
font-size: 24px
.list-group
height: 100%
.moving-swimlane
display: none
swimlane-color(background, color...)
background: background !important
if color
color: color !important //overwrite text for better visibility
.swimlane-white
swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility
border: 1px solid #eee
.swimlane-green
swimlane-color(#3cb500, #ffffff) //White text for better visibility
.swimlane-yellow
swimlane-color(#fad900, #4d4d4d) //Black text for better visibility
.swimlane-orange
swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility
.swimlane-red
swimlane-color(#eb4646, #ffffff) //White text for better visibility
.swimlane-purple
swimlane-color(#a632db, #ffffff) //White text for better visibility
.swimlane-blue
swimlane-color(#0079bf, #ffffff) //White text for better visibility
.swimlane-pink
swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility
.swimlane-sky
swimlane-color(#00c2e0, #ffffff) //White text for better visibility
.swimlane-black
swimlane-color(#4d4d4d, #ffffff) //White text for better visibility
.swimlane-lime
swimlane-color(#51e898, #4d4d4d) //Black text for better visibility
.swimlane-silver
swimlane-color(unset, #4d4d4d) //Black text for better visibility
.swimlane-peachpuff
swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility
.swimlane-crimson
swimlane-color(#dc143c, #ffffff) //White text for better visibility
.swimlane-plum
swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility
.swimlane-darkgreen
swimlane-color(#006400, #ffffff) //White text for better visibility
.swimlane-slateblue
swimlane-color(#6a5acd, #ffffff) //White text for better visibility
.swimlane-magenta
swimlane-color(#ff00ff, #ffffff) //White text for better visibility
.swimlane-gold
swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility
.swimlane-navy
swimlane-color(#000080, #ffffff) //White text for better visibility
.swimlane-gray
swimlane-color(#808080, #ffffff) //White text for better visibility
.swimlane-saddlebrown
swimlane-color(#8b4513, #ffffff) //White text for better visibility
.swimlane-paleturquoise
swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility
.swimlane-mistyrose
swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility
.swimlane-indigo
swimlane-color(#4b0082, #ffffff) //White text for better visibility

116
client/components/users/userAvatar.css Normal file
View file

@ -0,0 +1,116 @@
.member {
border-radius: 3px;
display: block;
position: relative;
float: left;
height: 30px;
width: 30px;
cursor: pointer;
user-select: none;
z-index: 1;
text-decoration: none;
border-radius: 50%;
}
.member .avatar {
overflow: hidden;
border-radius: 50%;
}
.member .avatar.avatar-initials {
height: 70%;
width: 70%;
padding: 15%;
background-color: #dbdbdb;
color: #444;
position: absolute;
}
.member .avatar.avatar-image {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.member .member-presence-status {
background-color: #b3b3b3;
border: 1px solid #fff;
border-radius: 50%;
height: 7px;
width: 7px;
position: absolute;
right: -1px;
bottom: -1px;
border: 1px solid #fff;
z-index: 15;
}
.member .member-presence-status.active {
background: #64c464;
border-color: #daf1da;
}
.member .member-presence-status.idle {
background: #e4e467;
border-color: #f7f7d4;
}
.member .member-presence-status.disconnected {
background: #bdbdbd;
border-color: #ededed;
}
.member .member-presence-status.pending {
background: #e44242;
border-color: #f1dada;
}
.member .edit-avatar {
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.member .edit-avatar:hover {
opacity: 0.6;
}
.member .edit-avatar i.fa-pencil {
color: #fff;
}
.member.add-member {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #bfbfbf inset;
}
.member.add-member:hover,
.member.add-member.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.atMention {
background: #dbdbdb;
border-radius: 3px;
padding: 1px 4px;
margin: -1px 0;
display: inline-block;
}
.atMention.me {
background: #cfdfe8;
}
.mini-profile-info {
margin-top: 10px;
}
.mini-profile-info .info {
padding-top: 5px;
}
.mini-profile-info .info h3,
.mini-profile-info .info p {
margin-bottom: 0;
padding-left: 0;
}
.mini-profile-info .info p {
padding-top: 0;
}
.mini-profile-info .member {
width: 50px;
height: 50px;
margin-right: 10px;
}

Some files were not shown because too many files have changed in this diff Show more