Reorganize Styles (#45)
This commit is contained in:
konrad
parent
752d6cc6f9
commit
9c66a7570a
37 changed files with 526 additions and 529 deletions
|
|
@ -32,7 +32,7 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../styles/variables';
|
||||
@import '../../../styles/theme/variables';
|
||||
|
||||
span.high-priority{
|
||||
color: $red;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import TaskOverview from './components/tasks/ShowTasks'
|
|||
Vue.component('TaskOverview', TaskOverview)
|
||||
|
||||
// Add CSS
|
||||
import './vikunja.scss'
|
||||
import './styles/vikunja.scss'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
|
|
|||
13
src/styles/components/_all.scss
Normal file
13
src/styles/components/_all.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@import 'base/all';
|
||||
|
||||
@import 'attachments';
|
||||
@import 'fullpage';
|
||||
@import 'gantt';
|
||||
@import 'labels';
|
||||
@import 'list';
|
||||
@import 'reminders';
|
||||
@import 'switch-view';
|
||||
@import 'task';
|
||||
@import 'taskRelations';
|
||||
@import 'tasks';
|
||||
@import 'teams';
|
||||
5
src/styles/components/base/_all.scss
Normal file
5
src/styles/components/base/_all.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import 'card';
|
||||
@import 'fancycheckbox';
|
||||
@import 'multiselect';
|
||||
@import 'scrollbars';
|
||||
@import 'tooltip';
|
||||
22
src/styles/components/base/card.scss
Normal file
22
src/styles/components/base/card.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.card {
|
||||
background-color: rgba($grey-lighter, 0.075);
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box,.card{
|
||||
border: $thickness solid $border;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
|
|
@ -440,4 +440,19 @@ fieldset[disabled] .multiselect {
|
|||
to {
|
||||
transform: rotate(2turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
.remove-assignee {
|
||||
vertical-align: bottom;
|
||||
color: $red;
|
||||
margin-left: -1.8em;
|
||||
background: $white;
|
||||
padding: 0 4px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
font-size: .8em;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,4 +15,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tasks .task span.tag span {
|
||||
width: auto;
|
||||
}
|
||||
39
src/styles/components/switch-view.scss
Normal file
39
src/styles/components/switch-view.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.switch-view {
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
border-radius: $radius;
|
||||
font-size: .8em;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
|
||||
a {
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin: .4em;
|
||||
border-radius: $radius;
|
||||
|
||||
-webkit-transition: all 100ms;
|
||||
-moz-transition: all 100ms;
|
||||
-ms-transition: all 100ms;
|
||||
-o-transition: all 100ms;
|
||||
transition: all 100ms;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
font-weight: bold;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($primary, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
border-bottom: 1px solid darken(#fff, 10%);
|
||||
|
||||
span:not(.tag) {
|
||||
width: calc(100% - 30px);
|
||||
width: calc(100% - 40px);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
|
||||
.settings{
|
||||
float: right;
|
||||
width: 4%;
|
||||
width: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,331 +0,0 @@
|
|||
@import url('/fonts/fonts.css');
|
||||
@import 'variables';
|
||||
@import '../../node_modules/bulma/bulma';
|
||||
|
||||
@import 'animations';
|
||||
|
||||
*, *:hover, *:active, *:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
transition: all $transition;
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
height: 2.648em;
|
||||
box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
|
||||
}
|
||||
|
||||
&.fullheight{
|
||||
padding-right: 7px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
|
||||
}
|
||||
|
||||
&.icon-only{
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
box-shadow: 0.3em 0.3em 1em lighten($color, 30);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: 0.6em 0.6em 1em lighten($color, 30);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0.1em 0.1em 0.7em lighten($color, 30) !important;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
border: 2px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.noshadow{
|
||||
&,
|
||||
&.is-hovered,
|
||||
&:hover,
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all $transition;
|
||||
box-shadow: none;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
border-color: darken($color, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:after {
|
||||
margin-top: -0.575em;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border-width: $thickness;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: calc(2.25em + #{$thickness});
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field.has-addons {
|
||||
.control .select select {
|
||||
height: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
border: $thickness solid $border;
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
border-radius: $radius-large;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba($grey-lighter, 0.075);
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.card-image {
|
||||
img {
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-lighter;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box,.card{
|
||||
border: $thickness solid $border;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
|
||||
.message {
|
||||
.message-body {
|
||||
border: $thickness solid;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
.navbar {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-previous {
|
||||
border-width: $thickness;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../public/images/llama.svg') no-repeat bottom left fixed $light-background;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.buttonright {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar.main-theme {
|
||||
background: $light-background;
|
||||
z-index: 5 !important;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.navbar-brand {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
|
||||
.user {
|
||||
width: 7em;
|
||||
|
||||
.username {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
.remove-assignee {
|
||||
vertical-align: bottom;
|
||||
color: $red;
|
||||
margin-left: -1.8em;
|
||||
background: $white;
|
||||
padding: 0 4px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
font-size: .8em;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.update-notification {
|
||||
margin: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $warning;
|
||||
padding: 0 0 0 .5em;
|
||||
border-radius: $radius;
|
||||
font-size: .9em;
|
||||
color: darken($dark, 5);
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
& {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
margin: 0;
|
||||
width: 450px;
|
||||
left: calc(50vw - 225px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet){
|
||||
& {
|
||||
position: fixed;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
11
src/styles/theme/_all.scss
Normal file
11
src/styles/theme/_all.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import 'variables';
|
||||
@import 'theme';
|
||||
|
||||
@import 'content';
|
||||
@import 'form';
|
||||
@import 'link-share';
|
||||
@import 'loading';
|
||||
@import 'navigation';
|
||||
@import 'notification';
|
||||
@import 'offline';
|
||||
@import 'update-notification';
|
||||
23
src/styles/theme/content.scss
Normal file
23
src/styles/theme/content.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.app-container{
|
||||
min-height: calc(100vh - 65px);
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding-top: $navbar-height + 0.75rem;
|
||||
}
|
||||
|
||||
.app-content{
|
||||
padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
|
||||
z-index: 2;
|
||||
background: url('../../public/images/llama-upside-down.svg') no-repeat top right $light-background;
|
||||
margin-left: 17vw;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
padding-top: 1.5em;
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.card{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
154
src/styles/theme/form.scss
Normal file
154
src/styles/theme/form.scss
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
.button {
|
||||
transition: all $transition;
|
||||
border: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
height: 2.648em;
|
||||
box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
|
||||
}
|
||||
|
||||
&.fullheight{
|
||||
padding-right: 7px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
|
||||
}
|
||||
|
||||
&.icon-only{
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
|
||||
&.is-#{$name} {
|
||||
box-shadow: 0.3em 0.3em 1em lighten($color, 30);
|
||||
|
||||
&.is-hovered,
|
||||
&:hover {
|
||||
box-shadow: 0.6em 0.6em 1em lighten($color, 30);
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: 0.1em 0.1em 0.7em lighten($color, 30) !important;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
border: 2px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.noshadow{
|
||||
&,
|
||||
&.is-hovered,
|
||||
&:hover,
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all $transition;
|
||||
box-shadow: none;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
border-color: darken($color, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:after {
|
||||
margin-top: -0.575em;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border-width: $thickness;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: calc(2.25em + #{$thickness});
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field.has-addons {
|
||||
.control .select select {
|
||||
height: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.bigbuttons{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.buttonright {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Buttons icons
|
||||
.button .icon.is-small {
|
||||
margin-right: 0.05rem !important;
|
||||
}
|
||||
|
||||
// menu buttons
|
||||
.button-bottom {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.button-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
15
src/styles/theme/link-share.scss
Normal file
15
src/styles/theme/link-share.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.link-share-view {
|
||||
.logo {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 2em 0 4em;
|
||||
}
|
||||
|
||||
.logout {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.column {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
32
src/styles/theme/loading.scss
Normal file
32
src/styles/theme/loading.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.loader-container {
|
||||
&.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5em);
|
||||
left: calc(50% - 2.5em);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spinner{
|
||||
&.is-loading {
|
||||
pointer-events: none;
|
||||
&:after {
|
||||
@include loader;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-left: calc(50% - 1em);
|
||||
position: absolute;
|
||||
margin-top: 1em;
|
||||
z-index: 999;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +1,66 @@
|
|||
.navbar {
|
||||
z-index: 2;
|
||||
|
||||
/* Logo */
|
||||
.logo {
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
padding-left: 2rem !important;
|
||||
|
||||
img {
|
||||
max-height: 3rem !important;
|
||||
margin-right: 1rem;
|
||||
&.is-#{$name} {
|
||||
border-color: darken($color, 5);
|
||||
}
|
||||
}
|
||||
.navbar-dropdown {
|
||||
box-shadow: $navbar-dropdown-boxed-shadow;
|
||||
top: 101%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Buttons icons */
|
||||
.button .icon.is-small {
|
||||
margin-right: 0.05rem !important;
|
||||
.navbar.main-theme {
|
||||
background: $light-background;
|
||||
z-index: 5 !important;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.navbar-brand {
|
||||
margin-left: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
|
||||
.user {
|
||||
width: 7em;
|
||||
|
||||
.username {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* menu buttons */
|
||||
.button-bottom {
|
||||
margin-bottom: 1rem;
|
||||
.hero {
|
||||
.navbar {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include touch {
|
||||
.navbar-menu {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu .navbar-item .icon{
|
||||
|
|
@ -28,12 +71,7 @@
|
|||
z-index: 4 !important;
|
||||
}
|
||||
|
||||
.app-container{
|
||||
min-height: calc(100vh - 65px);
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding-top: $navbar-height + 0.75rem;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
.namespace-container{
|
||||
background: $vikunja-nav-background;
|
||||
z-index: 6;
|
||||
|
|
@ -176,23 +214,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-content{
|
||||
padding: $navbar-height + 1.5rem 1.5em 0 1.5em;
|
||||
z-index: 2;
|
||||
background: url('../public/images/llama-upside-down.svg') no-repeat top right $light-background;
|
||||
margin-left: 17vw;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
margin-left: 0;
|
||||
padding-top: 1.5em;
|
||||
min-height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.card{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .user{
|
||||
|
|
@ -291,141 +312,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Logout-icon */
|
||||
.logout-icon {
|
||||
margin-right: 0.85em !important;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.loader-container {
|
||||
&.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5em);
|
||||
left: calc(50% - 2.5em);
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spinner{
|
||||
&.is-loading {
|
||||
pointer-events: none;
|
||||
&:after {
|
||||
@include loader;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-left: calc(50% - 1em);
|
||||
position: absolute;
|
||||
margin-top: 1em;
|
||||
z-index: 999;
|
||||
border-width: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications{
|
||||
left: 0.5em !important;
|
||||
bottom: 1em !important;
|
||||
|
||||
.notification-wrapper .notification{
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.button-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.switch-view {
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
border-radius: $radius;
|
||||
font-size: .8em;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
|
||||
a {
|
||||
padding: .5em;
|
||||
display: inline-block;
|
||||
margin: .4em;
|
||||
border-radius: $radius;
|
||||
|
||||
-webkit-transition: all 100ms;
|
||||
-moz-transition: all 100ms;
|
||||
-ms-transition: all 100ms;
|
||||
-o-transition: all 100ms;
|
||||
transition: all 100ms;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
font-weight: bold;
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($primary, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-share-view {
|
||||
.logo {
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
margin: 2em 0 4em;
|
||||
}
|
||||
|
||||
.logout {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.column {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.offline {
|
||||
background: url('../public/images/llama-nightscape.png') no-repeat center;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
|
||||
.offline-message {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 5vh;
|
||||
color: $white;
|
||||
padding: 0 1em;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/styles/theme/notification.scss
Normal file
32
src/styles/theme/notification.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.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;
|
||||
|
||||
.notification-wrapper .notification{
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
border-left-width: 0.4em;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
.message-body {
|
||||
border: $thickness solid;
|
||||
}
|
||||
}
|
||||
24
src/styles/theme/offline.scss
Normal file
24
src/styles/theme/offline.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.offline {
|
||||
background: url('../../public/images/llama-nightscape.png') no-repeat center;
|
||||
-webkit-background-size: cover;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
|
||||
.offline-message {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 5vh;
|
||||
color: $white;
|
||||
padding: 0 1em;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
src/styles/theme/theme.scss
Normal file
29
src/styles/theme/theme.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
@import url('/fonts/fonts.css');
|
||||
@import '../../../node_modules/bulma/bulma';
|
||||
|
||||
*, *:hover, *:active, *:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('../../public/images/llama.svg') no-repeat bottom left fixed $light-background;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
.logo {
|
||||
|
||||
padding-left: 2rem !important;
|
||||
|
||||
img {
|
||||
max-height: 3rem !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
border-radius: $radius-large;
|
||||
}
|
||||
40
src/styles/theme/update-notification.scss
Normal file
40
src/styles/theme/update-notification.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
.update-notification {
|
||||
margin: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $warning;
|
||||
padding: 0 0 0 .5em;
|
||||
border-radius: $radius;
|
||||
font-size: .9em;
|
||||
color: darken($dark, 5);
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
& {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
margin: 0;
|
||||
width: 450px;
|
||||
left: calc(50vw - 225px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet){
|
||||
& {
|
||||
position: fixed;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
bottom: 1em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
2
src/styles/utilities/_all.scss
Normal file
2
src/styles/utilities/_all.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import 'animations';
|
||||
@import 'transitions';
|
||||
3
src/styles/vikunja.scss
Normal file
3
src/styles/vikunja.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'theme/all';
|
||||
@import 'utilities/all';
|
||||
@import 'components/all';
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
@import 'styles/theme';
|
||||
@import 'styles/scrollbars';
|
||||
@import 'styles/general';
|
||||
@import 'styles/transitions';
|
||||
|
||||
@import 'styles/tasks';
|
||||
@import 'styles/task';
|
||||
@import 'styles/teams';
|
||||
@import 'styles/fullpage';
|
||||
@import 'styles/labels';
|
||||
@import 'styles/list';
|
||||
|
||||
@import 'styles/fancycheckbox';
|
||||
@import 'styles/tooltip';
|
||||
@import 'styles/gantt';
|
||||
|
||||
@import 'styles/attachments';
|
||||
@import 'styles/taskRelations';
|
||||
@import 'styles/reminders';
|
||||
|
||||
@import 'styles/multiselect';
|
||||
Loading…
Reference in a new issue