mirror of
https://github.com/wekan/wekan.git
synced 2026-02-19 14:38:06 +01:00
Converted Stylus to CSS. Removed Stylus. This change removed many error messages.
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
01a1a2cdce
commit
072778b9aa
104 changed files with 9370 additions and 7642 deletions
345
client/components/lists/list.css
Normal file
345
client/components/lists/list.css
Normal 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;
|
||||
}
|
||||
|
|
@ -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
|
||||
Loading…
Add table
Add a link
Reference in a new issue