Improve consistency of the layout (#386)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/386 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad
@ -1,7 +1,6 @@
|
||||
@import 'base/all';
|
||||
|
||||
@import 'attachments';
|
||||
@import 'fullpage';
|
||||
@import 'gantt';
|
||||
@import 'labels';
|
||||
@import 'list';
|
||||
@ -22,4 +21,4 @@
|
||||
@import 'legal';
|
||||
@import 'keyboard-shortcuts';
|
||||
@import 'api-config';
|
||||
@import 'datepicker'
|
||||
@import 'datepicker';
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
padding: .5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-lightest;
|
||||
background-color: $grey-100;
|
||||
}
|
||||
|
||||
.filename {
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
.info {
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
font-size: .9rem;
|
||||
|
||||
p {
|
||||
@ -84,20 +84,18 @@
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
font-size: 5em;
|
||||
font-size: 5rem;
|
||||
height: auto;
|
||||
text-shadow: 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px rgba(0, 0, 0, .2), 0 1px 5px rgba(0, 0, 0, .12);
|
||||
-moz-animation: bounce 2s infinite;
|
||||
-webkit-animation: bounce 2s infinite;
|
||||
text-shadow: $shadow-md;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: .5em auto 2em;
|
||||
margin: .5rem auto 2rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
box-shadow: $shadow-md;
|
||||
background: $primary;
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
color: $white;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.card {
|
||||
background-color: rgba($grey-lighter, 0.075);
|
||||
background-color: $white;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@ -11,12 +11,12 @@
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-bottom: 1px solid $grey-200;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box, .card {
|
||||
border: $thickness solid $border;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
border: 1px solid $grey-200;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
&.is-block {
|
||||
margin: .5em .2em;
|
||||
margin: .5rem .2rem;
|
||||
}
|
||||
|
||||
.check {
|
||||
@ -26,9 +26,9 @@
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: top;
|
||||
padding-left: .5em;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
@ -12,19 +12,19 @@
|
||||
background: $white !important;
|
||||
|
||||
&, &:focus-within {
|
||||
border-bottom-color: $grey-lighter !important;
|
||||
border-bottom-color: $grey-200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
padding: 0;
|
||||
background: $white !important;
|
||||
border-color: $grey-lighter !important;
|
||||
border-color: $grey-200 !important;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
border-color: $grey-light !important;
|
||||
border-color: $grey-300 !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
background: $grey-lightest;
|
||||
background: $grey-100;
|
||||
box-shadow: none !important;
|
||||
|
||||
.hint-text {
|
||||
@ -114,7 +114,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $grey-lighter;
|
||||
background: $grey-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,17 +6,13 @@
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $scrollbar-track-color;
|
||||
border-radius: 10px;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
border-radius: .5rem;
|
||||
background: $scrollbar-thumb-color;
|
||||
-webkit-transition: background-color $transition;
|
||||
-moz-transition: background-color $transition;
|
||||
-ms-transition: background-color $transition;
|
||||
-o-transition: background-color $transition;
|
||||
transition: background-color $transition;
|
||||
transition: all $transition;
|
||||
|
||||
&:hover {
|
||||
background: $scrollbar-hover-color;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.tooltip {
|
||||
visibility: collapse;
|
||||
z-index: 10000;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
background: $dark;
|
||||
color: white;
|
||||
@ -37,90 +37,4 @@
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.popover {
|
||||
.popover-inner {
|
||||
background: $light;
|
||||
color: $dark;
|
||||
padding: 24px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 30px rgba(black, .1);
|
||||
}
|
||||
|
||||
.popover-arrow {
|
||||
border-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.verte__guide {
|
||||
border-radius: 100%;
|
||||
border: 1px solid $grey-light;
|
||||
border: 1px solid $grey-300;
|
||||
box-shadow: $card-shadow;
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
align-items: center;
|
||||
|
||||
.media-left {
|
||||
margin: 0 1em;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.comment-info {
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
.fullpage {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
padding: 15vh 20vh;
|
||||
background: $vikunja-blue;
|
||||
color: $vikunja-light-text;
|
||||
font-size: 2em;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding: 20vw 10vw;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 3px solid darken($vikunja-blue, 10);
|
||||
color: $vikunja-light-text;
|
||||
padding: 1em 0.5em;
|
||||
font-size: 1.5em;
|
||||
border-radius: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: $vikunja-light-text;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 1em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: fixed;
|
||||
top: 5vh;
|
||||
right: 6vh;
|
||||
color: $vikunja-light-text;
|
||||
}
|
||||
|
||||
.small {
|
||||
margin-top: 1em;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.fullpage-overlay {
|
||||
z-index: 6 !important;
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
$gantt-border: 1px solid $grey-lighter;
|
||||
$gantt-vertical-border-color: lighten($grey, 45);
|
||||
$gantt-border: 1px solid $grey-200;
|
||||
$gantt-vertical-border-color: $grey-100;
|
||||
|
||||
.gantt-chart-container {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gantt-chart {
|
||||
@ -17,7 +17,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
display: flex;
|
||||
|
||||
.month {
|
||||
padding: 0.5em 0 0;
|
||||
padding: 0.5rem 0 0;
|
||||
border-right: $gantt-border;
|
||||
font-family: $vikunja-font;
|
||||
font-weight: bold;
|
||||
@ -30,7 +30,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
display: flex;
|
||||
|
||||
.day {
|
||||
padding: 0.5em 0;
|
||||
padding: 0.5rem 0;
|
||||
font-weight: normal;
|
||||
|
||||
&.today {
|
||||
@ -41,13 +41,13 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
}
|
||||
|
||||
.theday {
|
||||
padding: 0 .5em;
|
||||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.weekday {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,11 +66,10 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
.task {
|
||||
display: inline-block;
|
||||
border: 2px solid $primary;
|
||||
background: lighten($primary, 40);
|
||||
font-size: 0.85em;
|
||||
margin: 0.5em;
|
||||
font-size: 0.85rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.25em 0.5em;
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: grab;
|
||||
position: relative;
|
||||
|
||||
@ -147,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
}
|
||||
|
||||
.high-priority {
|
||||
margin: 0 0 0 .5em;
|
||||
margin: 0 0 0 .5rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
@ -158,8 +157,8 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
}
|
||||
|
||||
&.nodate {
|
||||
border: 2px dashed $grey-light;
|
||||
background: lighten($grey-light, 40);
|
||||
border: 2px dashed $grey-300;
|
||||
background: $grey-100;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -183,17 +182,17 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
}
|
||||
|
||||
.add-new-task {
|
||||
padding: 1em .7em .4em .7em;
|
||||
padding: 1rem .7rem .4rem .7rem;
|
||||
display: flex;
|
||||
max-width: 450px;
|
||||
|
||||
.input {
|
||||
margin-right: .7em;
|
||||
font-size: .8em;
|
||||
margin-right: .7rem;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: .68em;
|
||||
font-size: .68rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,14 +208,14 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
|
||||
.range-picker {
|
||||
display: flex;
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.field {
|
||||
margin: 0 0 0 .5em;
|
||||
margin: 0 0 0 .5rem;
|
||||
max-width: 100px;
|
||||
|
||||
&, .input {
|
||||
font-size: .8em;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.select {
|
||||
@ -225,12 +224,12 @@ $gantt-vertical-border-color: lighten($grey, 45);
|
||||
|
||||
select {
|
||||
height: auto;
|
||||
font-size: 0.75em;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: .9em;
|
||||
padding-left: .4em;
|
||||
font-size: .9rem;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ $task-background: $white;
|
||||
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
$bucket-width: 300px;
|
||||
|
||||
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
|
||||
|
||||
.app-content.list\.kanban {
|
||||
padding-bottom: 0;
|
||||
@ -17,22 +17,21 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
overflow-y: hidden;
|
||||
height: calc(#{$crazy-height-calculation});
|
||||
margin: 0 -1.5rem;
|
||||
padding: 0 1.5em;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
.bucket {
|
||||
|
||||
background-color: $bucket-background;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
|
||||
flex: 0 0 $bucket-width;
|
||||
margin: 0 1em 0 0;
|
||||
margin: 0 1rem 0 0;
|
||||
max-height: 100%;
|
||||
min-height: 20px;
|
||||
max-width: $bucket-width;
|
||||
|
||||
.tasks {
|
||||
max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em);
|
||||
max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem);
|
||||
overflow: auto;
|
||||
|
||||
.task {
|
||||
@ -50,20 +49,20 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
|
||||
transition: $ease-out;
|
||||
cursor: pointer;
|
||||
box-shadow: 2px 2px 2px darken($white, 12%);
|
||||
box-shadow: $shadow-xs;
|
||||
display: block;
|
||||
|
||||
font-size: .9em;
|
||||
padding: .5em;
|
||||
margin: .5em;
|
||||
font-size: .9rem;
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
border-radius: $radius;
|
||||
background: $task-background;
|
||||
|
||||
&.loader-container.is-loading:after {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
top: calc(50% - .75em);
|
||||
left: calc(50% - .75em);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
left: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@ -94,7 +93,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
}
|
||||
|
||||
.label-wrapper .tag {
|
||||
margin: .5em .5em 0 0;
|
||||
margin: .5rem .5rem 0 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -128,7 +127,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
|
||||
.priority-label {
|
||||
font-size: .75rem;
|
||||
height: 2em;
|
||||
height: 2rem;
|
||||
|
||||
.icon {
|
||||
height: 1rem;
|
||||
@ -141,7 +140,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
.footer .icon,
|
||||
.due-date,
|
||||
.priority-label {
|
||||
background: darken($task-background, 5%);
|
||||
background: $grey-100;
|
||||
border-radius: $radius;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
@ -151,14 +150,14 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
}
|
||||
|
||||
.task-id {
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.is-done {
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
padding: .25em .5em;
|
||||
font-size: .8rem;
|
||||
padding: .25rem .5rem;
|
||||
}
|
||||
|
||||
&.is-moving {
|
||||
@ -173,13 +172,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
color: $white;
|
||||
|
||||
.task-id {
|
||||
color: $grey-lighter;
|
||||
color: $grey-200;
|
||||
}
|
||||
|
||||
.footer .icon,
|
||||
.due-date,
|
||||
.priority-label {
|
||||
background: darken($task-background, 80%);
|
||||
background: $grey-800;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -192,9 +191,9 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
|
||||
.drop-preview {
|
||||
border-radius: $radius;
|
||||
margin: 0 .5em .5em;
|
||||
margin: 0 .5rem .5rem;
|
||||
background: transparent;
|
||||
border: 3px dashed darken($bucket-background, 5%);
|
||||
border: 3px dashed $grey-300;
|
||||
}
|
||||
}
|
||||
|
||||
@ -228,7 +227,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5em;
|
||||
padding: .5rem;
|
||||
|
||||
.limit {
|
||||
padding-left: .5rem;
|
||||
@ -245,13 +244,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
|
||||
|
||||
.title.input {
|
||||
height: auto;
|
||||
padding: .4em .5em;
|
||||
padding: .4rem .5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.bucket-footer {
|
||||
padding: .5em;
|
||||
padding: .5rem;
|
||||
|
||||
.button {
|
||||
background-color: transparent;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
right: 1rem;
|
||||
z-index: 4500; // The modal has a z-index of 4000
|
||||
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
transition: color $transition;
|
||||
}
|
||||
|
||||
@ -33,8 +33,8 @@
|
||||
|
||||
span {
|
||||
padding: .1rem .35rem;
|
||||
border: 1px solid $grey-light;
|
||||
background: lighten($grey-lightest, 2.5);
|
||||
border: 1px solid $grey-300;
|
||||
background: $grey-100;
|
||||
border-radius: 3px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.tag {
|
||||
margin: .5rem 0 .5rem .5rem;
|
||||
background: darken($background, 5);
|
||||
background: $grey-200;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.legal-links {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
color: $grey-light;
|
||||
color: $grey-300;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@ -5,19 +5,19 @@
|
||||
font-size: .8rem;
|
||||
|
||||
a {
|
||||
color: $grey-dark;
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
.image-search-result {
|
||||
margin-top: 1em;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.image {
|
||||
width: calc(100% / 5 - 1em);
|
||||
width: calc(100% / 5 - 1rem);
|
||||
height: 120px;
|
||||
margin: .5em;
|
||||
margin: .5rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: calc(100% / 4 - 1em);
|
||||
width: calc(100% / 4 - 1rem);
|
||||
|
||||
&:nth-child(4n) {
|
||||
page-break-after: always; // CSS 2.1 syntax
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: calc(100% / 2 - 1em);
|
||||
width: calc(100% / 2 - 1rem);
|
||||
|
||||
&:nth-child(2n) {
|
||||
page-break-after: always; // CSS 2.1 syntax
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: ($mobile)) {
|
||||
width: calc(100% - 1em);
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
&:nth-child(1n) {
|
||||
page-break-after: always; // CSS 2.1 syntax
|
||||
@ -61,10 +61,10 @@
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
padding: .25em 0;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: .75em;
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
transition: opacity $transition;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.table {
|
||||
border-top: 1px solid darken(#fff, 15%);
|
||||
border-top: 1px solid $grey-100;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.task-add .button {
|
||||
padding: 10px 1em;
|
||||
padding: 10px 1rem;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $grey-almost-light;
|
||||
color: $grey-400;
|
||||
margin-left: 1rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
.edit-list {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
@ -65,7 +65,7 @@
|
||||
min-width: 400px;
|
||||
max-width: 180px;
|
||||
position: absolute;
|
||||
right: 1.5em;
|
||||
right: 1.5rem;
|
||||
margin-top: -59px;
|
||||
z-index: 4;
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
justify-content: flex-end;
|
||||
|
||||
.button:not(:last-child) {
|
||||
margin-right: .5em;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: .5em;
|
||||
margin-right: .5rem;
|
||||
|
||||
.button, .input {
|
||||
height: $switch-view-height;
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
|
||||
.filters input {
|
||||
font-size: .9em;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
@ -157,5 +157,5 @@
|
||||
}
|
||||
|
||||
.list-namespace-title {
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-transform: capitalize;
|
||||
margin-right: 1em;
|
||||
margin-right: 1rem;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
.migration-in-progress-container {
|
||||
max-width: 400px;
|
||||
margin: 4em auto 0;
|
||||
margin: 4rem auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
max-width: 400px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2em;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@ -39,7 +39,7 @@
|
||||
|
||||
span {
|
||||
transition: all 500ms ease;
|
||||
background: $grey;
|
||||
background: $grey-500;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: $white;
|
||||
font-size: 2em;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ $lists-per-row: 5;
|
||||
|
||||
.is-archived {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid $grey;
|
||||
border: 1px solid $grey-500;
|
||||
color: $grey !important;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
@ -53,7 +53,7 @@ $lists-per-row: 5;
|
||||
margin: 0 1rem 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: $radius;
|
||||
box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
|
||||
box-shadow: $shadow-sm;
|
||||
transition: box-shadow $transition;
|
||||
|
||||
display: flex;
|
||||
@ -61,7 +61,13 @@ $lists-per-row: 5;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 1em lighten($dark, 65);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: $shadow-xs !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $widescreen) {
|
||||
@ -105,7 +111,7 @@ $lists-per-row: 5;
|
||||
text-align: right;
|
||||
|
||||
.is-archived {
|
||||
font-size: .75em;
|
||||
font-size: .75rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@ -130,7 +136,7 @@ $lists-per-row: 5;
|
||||
background-position: center;
|
||||
|
||||
.title {
|
||||
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker;
|
||||
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
.switch-view {
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
border-radius: $radius;
|
||||
font-size: .8em;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
font-size: .75rem;
|
||||
box-shadow: $shadow-sm;
|
||||
height: $switch-view-height;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
padding: .5rem;
|
||||
|
||||
a {
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin: .4em;
|
||||
padding: .25rem .5rem;
|
||||
display: block;
|
||||
border-radius: $radius;
|
||||
|
||||
-webkit-transition: all 100ms;
|
||||
@ -20,7 +20,7 @@
|
||||
transition: all 100ms;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
@ -30,11 +30,11 @@
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
font-weight: bold;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
box-shadow: $shadow-xs;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($primary, 5);
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.is-done {
|
||||
font-size: .9em;
|
||||
font-size: .9rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.task-view {
|
||||
// This is a workaround to hide the llama background from the top on the task detail page
|
||||
margin-top: -1.5em;
|
||||
padding: 1em;
|
||||
margin-top: -1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: $light-background;
|
||||
|
||||
.subtitle {
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
|
||||
a {
|
||||
color: $grey-dark;
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
.icon.is-grey {
|
||||
color: lighten($grey, 5%);
|
||||
color: $grey-400;
|
||||
}
|
||||
|
||||
.heading {
|
||||
@ -30,13 +30,13 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
&.input {
|
||||
// 1.8rem is the font-size, 1.125 is the line-height, .3em padding everywhere, 1px border around the whole thing.
|
||||
min-height: calc(1.8rem * 1.125 + .6em + 2px);
|
||||
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
|
||||
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
.title.task-id {
|
||||
color: lighten($grey, 25%);
|
||||
color: $grey-400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
align-items: start;
|
||||
|
||||
.title.input {
|
||||
margin: 0 -.3em .5rem -.3em; // the title has 0.3em padding - this make the text inside of it align with the rest
|
||||
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,7 +57,7 @@
|
||||
a.remove {
|
||||
color: $red;
|
||||
vertical-align: middle;
|
||||
padding-left: .5em;
|
||||
padding-left: .5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
@ -93,12 +93,12 @@
|
||||
}
|
||||
|
||||
.details {
|
||||
padding-bottom: 0.75em;
|
||||
padding-bottom: 0.75rem;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
color: lighten($grey, 15%);
|
||||
color: $grey-400;
|
||||
}
|
||||
|
||||
.none {
|
||||
@ -187,14 +187,14 @@
|
||||
.action-buttons {
|
||||
a.button {
|
||||
width: 100%;
|
||||
margin-bottom: .5em;
|
||||
margin-bottom: .5rem;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
.created {
|
||||
font-size: .75rem;
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -223,9 +223,9 @@
|
||||
.is-done {
|
||||
background: $green;
|
||||
color: $white;
|
||||
padding: .5em;
|
||||
font-size: 1.5em;
|
||||
margin-left: .5em;
|
||||
padding: .5rem;
|
||||
font-size: 1.5rem;
|
||||
margin-left: .5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
@ -234,7 +234,7 @@
|
||||
|
||||
.modal-container .task-view {
|
||||
border-radius: $radius;
|
||||
padding: 1em;
|
||||
padding: 1rem;
|
||||
color: $text;
|
||||
background-color: $light-background !important;
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ $remove-icon-width: 24px;
|
||||
|
||||
.related-tasks {
|
||||
.title {
|
||||
font-size: 1em;
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -21,14 +21,9 @@ $remove-icon-width: 24px;
|
||||
a:not(.remove) {
|
||||
width: calc(100% - #{$remove-icon-width});
|
||||
|
||||
.task {
|
||||
padding: .5em;
|
||||
max-width: 100%;
|
||||
|
||||
.different-list {
|
||||
color: lighten($dark, 50);
|
||||
width: auto;
|
||||
}
|
||||
.different-list {
|
||||
color: $grey-500;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -21,13 +21,13 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid darken(#fff, 10%);
|
||||
border-bottom: 1px solid $grey-200;
|
||||
transition: background-color $transition;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($light-background, 3);
|
||||
background-color: $grey-200;
|
||||
}
|
||||
|
||||
.tasktext,
|
||||
@ -45,8 +45,8 @@
|
||||
|
||||
.task-list {
|
||||
width: auto;
|
||||
color: lighten($grey, 25%);
|
||||
font-size: .9em;
|
||||
color: $grey-400;
|
||||
font-size: .9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: 0 0.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -85,7 +85,7 @@
|
||||
transition: color ease $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: darken($text, 40%);
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
|
||||
@ -120,11 +120,11 @@
|
||||
|
||||
.tasktext.done {
|
||||
text-decoration: line-through;
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
}
|
||||
|
||||
span.parent-tasks {
|
||||
color: lighten($dark, 50);
|
||||
color: $grey-500;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@ -143,12 +143,12 @@
|
||||
}
|
||||
|
||||
&.loader-container.is-loading:after {
|
||||
top: calc(50% - 1em);
|
||||
left: calc(50% - 1em);
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-left-color: $grey-light;
|
||||
border-bottom-color: $grey-light;
|
||||
top: calc(50% - 1rem);
|
||||
left: calc(50% - 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-left-color: $grey-300;
|
||||
border-bottom-color: $grey-300;
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,7 +189,6 @@
|
||||
min-height: calc(100% - 1rem);
|
||||
margin-top: 1rem;
|
||||
|
||||
|
||||
.priority-select {
|
||||
.select, select {
|
||||
width: 100%;
|
||||
@ -201,23 +200,19 @@
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
padding: 0.5em 0.5em 0;
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
|
||||
a {
|
||||
float: right;
|
||||
color: $red;
|
||||
transition: all $transition;
|
||||
|
||||
&:hover {
|
||||
color: darken($red, 15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
@ -231,7 +226,7 @@
|
||||
|
||||
&.nothing {
|
||||
text-align: center;
|
||||
margin-top: 3em;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
@ -242,7 +237,7 @@
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 2em;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.user img{
|
||||
@ -250,7 +245,7 @@
|
||||
}
|
||||
|
||||
.spinner.is-loading:after {
|
||||
margin-left: calc(40% - 1em);
|
||||
margin-left: calc(40% - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -261,7 +256,7 @@
|
||||
width: 100%;
|
||||
max-width: $defer-task-max-width;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $grey-lighter;
|
||||
border: 1px solid $grey-200;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: $white;
|
||||
|
||||
@ -12,9 +12,10 @@ ul.teams {
|
||||
color: #363636;
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color $transition;
|
||||
|
||||
&:hover {
|
||||
background: darken(#fff, 2%);
|
||||
background: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user