Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-26 01:44:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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
Download patch file Download diff file Expand all files Collapse all files

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