Rounded Kanban app

master
David Benqué 3 years ago
parent 29eb25d668
commit df0c8f3eb4

@ -1,5 +1,6 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./variables.less";
.tokenfield_main () { .tokenfield_main () {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -51,6 +52,7 @@
margin: 2px 0; margin: 2px 0;
margin-right: 5px; margin-right: 5px;
height: 24px; height: 24px;
border-radius: @variables_radius;
vertical-align: middle; vertical-align: middle;
cursor: default; cursor: default;
color: @cp_token-fg; color: @cp_token-fg;

@ -26,6 +26,7 @@
.kanban-board-header { .kanban-board-header {
background-color: @palette0; background-color: @palette0;
color: @cp_kanban-fg; color: @cp_kanban-fg;
border-radius: @variables_radius @variables_radius 0px 0px;
} }
.kanban-board { .kanban-board {
.kanban-board-inner { .kanban-board-inner {
@ -34,6 +35,8 @@
max-height: 100%; max-height: 100%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
border-radius: @variables_radius;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB
} }
color: @cp_kanban-fg; color: @cp_kanban-fg;
button { button {
@ -81,9 +84,11 @@
} }
#cp-kanban-edit-body { #cp-kanban-edit-body {
border: 1px solid @cp_forms-border; border: 1px solid @cp_forms-border;
border-radius: @variables_radius;
.CodeMirror { .CodeMirror {
height: 105px; height: 105px;
resize: vertical; resize: vertical;
border-radius: 0px 0px @variables_radius @variables_radius;
} }
.CodeMirror-scroll { .CodeMirror-scroll {
box-sizing: content-box; box-sizing: content-box;
@ -91,6 +96,7 @@
.cp-markdown-toolbar { .cp-markdown-toolbar {
background-color: @cp_kanban-conflict-bg; background-color: @cp_kanban-conflict-bg;
color: @cp_kanban-fg; color: @cp_kanban-fg;
border-radius: @variables_radius @variables_radius 0px 0px;
button { button {
&:hover { &:hover {
background-color: @cp_kanban-fg; background-color: @cp_kanban-fg;
@ -174,8 +180,10 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
border-radius: @variables_radius;
flex-wrap: wrap; flex-wrap: wrap;
background: @cp_kanban-item-bg; background: @cp_kanban-item-bg;
box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable?
.tools_unselectable(); .tools_unselectable();
touch-action: none; touch-action: none;
cursor: move; cursor: move;
@ -250,6 +258,7 @@
padding: 0 5px; padding: 0 5px;
margin-right: 5px; margin-right: 5px;
margin-top: 5px; margin-top: 5px;
border-radius: @variables_radius;
background-color: @cp_kanban-tags-bg; background-color: @cp_kanban-tags-bg;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
@ -291,8 +300,8 @@
} }
main { main {
padding: 0 10px; padding: 10px 5px;
margin: 10px 0; //margin: 10px 0;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
justify-content: space-around; justify-content: space-around;
@ -327,8 +336,8 @@
} }
} }
footer { footer {
margin: 10px; margin: 5px;
margin-top: 0px; margin-top: 5px;
display: flex; display: flex;
span { span {
.tools_unselectable(); .tools_unselectable();
@ -336,7 +345,7 @@
width: 50%; width: 50%;
border: 1px solid fade(@cp_kanban-fg, 70%); border: 1px solid fade(@cp_kanban-fg, 70%);
color: fade(@cp_kanban-fg, 70%); color: fade(@cp_kanban-fg, 70%);
border-radius: 0px; border-radius: @variables_radius;
font-size: 25px; font-size: 25px;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -420,6 +429,7 @@
margin-right: 5px; margin-right: 5px;
margin-top: 5px; margin-top: 5px;
background-color: @cp_kanban-tags-bg; background-color: @cp_kanban-tags-bg;
border-radius: @variables_radius;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -445,6 +455,12 @@
&:hover { &:hover {
background-color: darken(@board-bg, 10%); background-color: darken(@board-bg, 10%);
} }
&:first-child {
border-radius: @variables_radius 0px 0px @variables_radius;
}
&:last-child {
border-radius: 0px @variables_radius @variables_radius 0px;
}
} }
} }
} }
@ -456,16 +472,16 @@
background-color: @cp_kanban-fg !important; background-color: @cp_kanban-fg !important;
color: @cp_app-bg; color: @cp_app-bg;
} }
span.cp-kanban-view-small { // span.cp-kanban-view-small {
} // }
} }
} }
} }
&.cp-kanban-quick { &.cp-kanban-quick {
#cp-kanban-controls { #cp-kanban-controls {
.cp-kanban-changeView { .cp-kanban-changeView {
span.cp-kanban-view { // span.cp-kanban-view {
} // }
span.cp-kanban-view-small { span.cp-kanban-view-small {
background-color: @cp_kanban-fg !important; background-color: @cp_kanban-fg !important;
color: @cp_app-bg; color: @cp_app-bg;
@ -558,6 +574,7 @@
width: 50px; width: 50px;
margin: 10px 5px; margin: 10px 5px;
border: 1px solid @cp_kanban-fg; border: 1px solid @cp_kanban-fg;
border-radius: @variables_radius;
color: @cp_kanban-fg; color: @cp_kanban-fg;
height: 40px; height: 40px;
display: inline-flex; display: inline-flex;
@ -655,6 +672,6 @@
.form-group { .form-group {
text-align: right; text-align: right;
margin-button: 5px; margin-bottom: 5px;
} }
} }

Loading…
Cancel
Save