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
parent
b2098d65fd
commit
d1a2eefca6
54 changed files with 307 additions and 446 deletions
|
|
@ -361,10 +361,7 @@ describe('Lists', () => {
|
|||
})
|
||||
cy.visit('/lists/1/kanban')
|
||||
|
||||
cy.get('.kanban .bucket .tasks')
|
||||
.should('contain', tasks[0].title)
|
||||
|
||||
cy.get('.kanban .bucket .tasks .task')
|
||||
cy.getAttached('.kanban .bucket .tasks .task')
|
||||
.contains(tasks[0].title)
|
||||
.click()
|
||||
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@ describe('Team', () => {
|
|||
.contains('Create')
|
||||
.click()
|
||||
|
||||
cy.get('.fullpage')
|
||||
.should('not.exist')
|
||||
cy.url()
|
||||
.should('contain', '/edit')
|
||||
cy.get('input#teamtext')
|
||||
|
|
|
|||
17
cypress/support/commands.js
Normal file
17
cypress/support/commands.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* getAttached(selector)
|
||||
* getAttached(selectorFn)
|
||||
*
|
||||
* Waits until the selector finds an attached element, then yields it (wrapped).
|
||||
* selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
|
||||
*
|
||||
* Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
|
||||
*/
|
||||
Cypress.Commands.add('getAttached', selector => {
|
||||
const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
|
||||
let $el = null;
|
||||
return cy.document().should($d => {
|
||||
$el = getElement(Cypress.$($d));
|
||||
expect(Cypress.dom.isDetached($el)).to.be.false;
|
||||
}).then(() => cy.wrap($el));
|
||||
});
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
|
||||
import './commands'
|
||||
import 'cypress-file-upload'
|
||||
|
|
|
|||
|
|
@ -442,7 +442,7 @@ export default {
|
|||
<style lang="scss">
|
||||
@import '../../../node_modules/highlight.js/scss/atelier-heath-light';
|
||||
@import '../../../node_modules/easymde/dist/easymde.min.css';
|
||||
@import '../../styles/theme/variables';
|
||||
@import '../../styles/theme/variables/all';
|
||||
|
||||
.editor {
|
||||
.clear {
|
||||
|
|
@ -505,7 +505,7 @@ pre.CodeMirror-line {
|
|||
}
|
||||
|
||||
ul.actions {
|
||||
font-size: .8em;
|
||||
font-size: .8rem;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
|
|
@ -522,7 +522,7 @@ ul.actions {
|
|||
}
|
||||
|
||||
&, a {
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,6 @@ export default {
|
|||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 0.5em;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -40,7 +40,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
margin: .5em;
|
||||
margin: .5rem;
|
||||
|
||||
&.is-inline {
|
||||
display: inline;
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
border-radius: 100%;
|
||||
|
||||
vertical-align: middle;
|
||||
margin-right: .5em;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -284,6 +284,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
form {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../../styles/theme/variables';
|
||||
@import '../../../styles/theme/variables/all';
|
||||
|
||||
.priority-label {
|
||||
display: inline-flex;
|
||||
|
|
@ -58,7 +58,7 @@ span.high-priority {
|
|||
.icon {
|
||||
vertical-align: middle;
|
||||
width: auto !important;
|
||||
padding: 0 .5em;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
&.not-so-high {
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/styles/theme/variables';
|
||||
@import '@/styles/theme/variables/all';
|
||||
|
||||
.add-task-relation-button {
|
||||
margin-top: -3rem;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'variables';
|
||||
@import 'variables/all';
|
||||
@import 'theme';
|
||||
|
||||
@import 'content';
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.task-view {
|
||||
border-radius: $radius;
|
||||
margin-top: 1em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.kanban .tasks {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
.app-content {
|
||||
padding: $navbar-height + 1.5rem 1.5em 1rem 1.5em;
|
||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||
z-index: 2;
|
||||
|
||||
&.is-menu-enabled {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
padding-top: 1.5em;
|
||||
padding-top: 1.5rem;
|
||||
min-height: calc(100vh - 4rem);
|
||||
|
||||
&.is-menu-enabled {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.media-content {
|
||||
width: calc(100% - 48px - 2em);
|
||||
width: calc(100% - 48px - 2rem);
|
||||
}
|
||||
|
||||
.content h3 {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
height: $button-height;
|
||||
box-shadow: .2rem 0.2rem .5rem $grey-lighter;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: .1rem .1rem 1rem $grey-lighter;
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
&.fullheight {
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: .1rem .1rem .75rem $grey-lighter !important;
|
||||
box-shadow: $shadow-xs !important;
|
||||
}
|
||||
|
||||
&.is-primary.is-outlined:hover {
|
||||
|
|
@ -60,21 +60,21 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
border-color: darken($color, 10);
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:after {
|
||||
margin-top: -0.575em;
|
||||
margin-top: -0.575rem;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border-width: $thickness;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: calc(2.25em + #{$thickness});
|
||||
height: calc(2.25rem + #{$thickness});
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
|
|
@ -119,9 +119,9 @@
|
|||
font-weight: 400 !important;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
margin: 0 .3em;
|
||||
margin: 0 .3rem;
|
||||
height: auto;
|
||||
padding: .3em;
|
||||
padding: .3rem;
|
||||
|
||||
&:focus {
|
||||
background: $input-background-color;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.logo {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 2em 0 4em;
|
||||
margin: 2rem 0 4rem;
|
||||
}
|
||||
|
||||
.logout {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5em);
|
||||
left: calc(50% - 2.5em);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-width: 0.25em;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
|
||||
&:after {
|
||||
@include loader;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-left: calc(50% - 1em);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(50% - 1rem);
|
||||
position: absolute;
|
||||
margin-top: 1em;
|
||||
margin-top: 1rem;
|
||||
z-index: 999;
|
||||
border-width: 0.25em;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
.navbar {
|
||||
z-index: 2;
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
box-shadow: $navbar-dropdown-boxed-shadow;
|
||||
top: 101%;
|
||||
|
|
@ -99,7 +90,7 @@
|
|||
}
|
||||
|
||||
.navbar-menu .navbar-item .icon {
|
||||
margin: 0 0.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
|
@ -119,7 +110,7 @@
|
|||
overflow-x: auto;
|
||||
width: $navbar-width;
|
||||
|
||||
padding: 0 0 1em;
|
||||
padding: 0 0 1rem;
|
||||
left: -147vw;
|
||||
bottom: 0;
|
||||
|
||||
|
|
@ -134,13 +125,13 @@
|
|||
|
||||
.menu {
|
||||
.menu-label {
|
||||
font-size: 1em;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
font-family: $vikunja-font;
|
||||
color: $grey;
|
||||
color: $vikunja-nav-color;
|
||||
font-weight: 500;
|
||||
min-height: 2.5em;
|
||||
min-height: 2.5rem;
|
||||
padding-top: 0;
|
||||
padding-left: $navbar-padding;
|
||||
|
||||
|
|
@ -246,9 +237,9 @@
|
|||
opacity: 0;
|
||||
height: 0;
|
||||
text-align: center;
|
||||
color: $grey;
|
||||
color: $grey-500;
|
||||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
|
|
@ -264,7 +255,7 @@
|
|||
}
|
||||
|
||||
span.list-menu-link, a {
|
||||
padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
|
||||
padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
|
|
@ -280,12 +271,12 @@
|
|||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 4px;
|
||||
padding-right: 0.5em;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: $primary;
|
||||
border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
|
||||
border-left: $vikunja-nav-selected-width solid $primary;
|
||||
|
||||
.icon {
|
||||
color: $primary;
|
||||
|
|
@ -294,7 +285,7 @@
|
|||
|
||||
&:hover {
|
||||
background: $white;
|
||||
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
|
||||
border-left: $vikunja-nav-selected-width solid $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -313,15 +304,15 @@
|
|||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $grey-almost-light;
|
||||
color: $grey-400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -335,7 +326,7 @@
|
|||
}
|
||||
|
||||
span.list-menu-link, a {
|
||||
padding-left: 2em;
|
||||
padding-left: 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
@ -357,7 +348,7 @@
|
|||
}
|
||||
|
||||
.logout-icon {
|
||||
color: lighten($black, 10);
|
||||
color: $grey-900;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
|
|
@ -377,7 +368,7 @@
|
|||
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -386,12 +377,12 @@
|
|||
display: none;
|
||||
z-index: 31;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
font-size: 2rem;
|
||||
color: $dark;
|
||||
line-height: 1;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: darken($dark, 20);
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -443,14 +434,14 @@
|
|||
}
|
||||
|
||||
.logout-icon {
|
||||
margin-right: 0.85em !important;
|
||||
margin-right: 0.85rem !important;
|
||||
}
|
||||
|
||||
.menu-bottom-link {
|
||||
width: 100%;
|
||||
color: $grey-light;
|
||||
color: $grey-300;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
font-size: .8em;
|
||||
margin: 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,10 @@
|
|||
.notification {
|
||||
border: $thickness solid $border;
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications {
|
||||
left: 0.5em !important;
|
||||
bottom: 1em !important;
|
||||
left: 0.5rem !important;
|
||||
bottom: 1rem !important;
|
||||
|
||||
.notification-wrapper .notification {
|
||||
-webkit-border-radius: 0;
|
||||
|
|
@ -21,7 +13,7 @@
|
|||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0.4em;
|
||||
border-left-width: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
width: 100vw;
|
||||
bottom: 5vh;
|
||||
color: $white;
|
||||
padding: 0 1em;
|
||||
padding: 0 1rem;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ button.table {
|
|||
}
|
||||
|
||||
.pagination {
|
||||
padding-bottom: 1em;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.pagination-previous,
|
||||
.pagination-next {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
.update-notification {
|
||||
margin: 1em;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $warning;
|
||||
padding: 0 0 0 .5em;
|
||||
padding: 0 0 0 .5rem;
|
||||
border-radius: $radius;
|
||||
font-size: .9em;
|
||||
color: darken($dark, 5);
|
||||
font-size: .9rem;
|
||||
color: $grey-900;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
& {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
bottom: 1rem;
|
||||
margin: 0;
|
||||
width: 450px;
|
||||
left: calc(50vw - 225px);
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
@media screen and (max-width: $tablet) {
|
||||
& {
|
||||
position: fixed;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,6 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
margin-left: .5em;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
src/styles/theme/variables/_all.scss
Normal file
3
src/styles/theme/variables/_all.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'colors';
|
||||
@import 'shadows';
|
||||
@import 'variables';
|
||||
17
src/styles/theme/variables/colors.scss
Normal file
17
src/styles/theme/variables/colors.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
$grey-100: #f3f4f6;
|
||||
$grey-200: #E5E7EB;
|
||||
$grey-300: #D1D5DB;
|
||||
$grey-400: #9CA3AF;
|
||||
$grey-500: #6B7280;
|
||||
$grey-600: #4B5563;
|
||||
$grey-700: #374151;
|
||||
$grey-800: #1F2937;
|
||||
$grey-900: #111827;
|
||||
|
||||
// Bulma defaults
|
||||
$grey-dark: $grey-800;
|
||||
$grey-darker: $grey-700;
|
||||
$grey: $grey-500;
|
||||
$grey-light: $grey-300;
|
||||
$grey-lighter: $grey-200;
|
||||
$grey-lightest: $grey-100;
|
||||
5
src/styles/theme/variables/shadows.scss
Normal file
5
src/styles/theme/variables/shadows.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
|
||||
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
|
||||
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
|
||||
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
|
||||
$shadow-xl: 0 20px 40px rgba($grey-500, .2);
|
||||
|
|
@ -1,52 +1,45 @@
|
|||
@import 'colors';
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default;
|
||||
$orange: #ff851b;
|
||||
$green: #00db60;
|
||||
$red: #ff4136;
|
||||
$blue: #1973ff;
|
||||
$primary: $blue;
|
||||
$dark: lighten($black, 8);
|
||||
$grey: hsl(0, 0%, 48%);
|
||||
$grey-almost-light: hsl(0, 0%, 57%);
|
||||
$dark: $grey-900;
|
||||
|
||||
$info-invert: #fff;
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: darken($primary, 5);
|
||||
$pagination-current-border: $primary;
|
||||
$navbar-item-active-color: $primary;
|
||||
$dropdown-content-shadow: none;
|
||||
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$light-background: #F1F5F8;
|
||||
$light-background: $grey-100;
|
||||
$transition-duration: 100ms;
|
||||
$flash-background-duration: 750ms;
|
||||
$transparent-background-light: rgba($light-background, 0.9);
|
||||
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
$vikunja-light-text: darken(#fff, 10%);
|
||||
$vikunja-light-text: $grey-100;
|
||||
$vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
|
||||
$vikunja-green: #4DB788;
|
||||
|
||||
$navbar-padding: 2em;
|
||||
$navbar-padding: 2rem;
|
||||
$vikunja-nav-background: $light-background;
|
||||
$vikunja-nav-color: lighten($black, 25);
|
||||
$vikunja-nav-selected-width: 0.4em;
|
||||
$vikunja-nav-color: $grey-800;
|
||||
$vikunja-nav-selected-width: 0.4rem;
|
||||
|
||||
$transition-duration: 150ms;
|
||||
$transition: $transition-duration ease;
|
||||
|
||||
$multiselect-primary: $green;
|
||||
$multiselect-dark: #35495e;
|
||||
$multiselect-border: #e8e8e8;
|
||||
$multiselect-highlight: $green;
|
||||
$multiselect-highlight-negative: $red;
|
||||
$multiselect-disabled: darken(#fff, 40);
|
||||
|
||||
$scrollbar-height: 8px;
|
||||
$scrollbar-track-color: lighten($dark, 65);
|
||||
$scrollbar-thumb-color: lighten($dark, 40);
|
||||
$scrollbar-hover-color: lighten($dark, 30);
|
||||
$scrollbar-track-color: $grey-300;
|
||||
$scrollbar-thumb-color: $grey-500;
|
||||
$scrollbar-hover-color: $grey-700;
|
||||
|
||||
$button-height: 2.648em;
|
||||
$button-height: 2.648rem;
|
||||
|
||||
$switch-view-height: 43px;
|
||||
|
||||
|
|
@ -57,3 +50,5 @@ $navbar-height: 4rem;
|
|||
$navbar-width: 300px;
|
||||
|
||||
$editor-border-color: #ddd;
|
||||
|
||||
$dropdown-item-hover-background-color: $grey-100;
|
||||
|
|
@ -186,7 +186,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 0 0.4em 0 0;
|
||||
margin: 0 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.reset-password-link {
|
||||
|
|
|
|||
|
|
@ -114,6 +114,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 0 0.4em 0 0;
|
||||
margin: 0 0.4rem 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.button {
|
||||
margin: 0 0.4em 0 0;
|
||||
margin: 0 0.4rem 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue