local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chore: small CSS format changes

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-10-18 14:33:52 +02:00
parent 7ca355db66
commit 32a0106819
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
13 changed files with 101 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/input/editor.vue
View file

@ -312,6 +312,8 @@ export default {
@import './vue-easymde/vue-easymde.css'; @import './vue-easymde/vue-easymde.css';
@import 'highlight.js/scss/base16/equilibrium-gray-light'; @import 'highlight.js/scss/base16/equilibrium-gray-light';
$editor-border-color: #ddd;
.editor { .editor {
.clear { .clear {
clear: both; clear: both;
@ -371,7 +373,7 @@ export default {
} }
} }
&:after { &::after {
position: absolute; position: absolute;
top: 24px; top: 24px;
margin-left: -3px; margin-left: -3px;
@ -396,7 +398,7 @@ ul.actions {
li { li {
display: inline-block; display: inline-block;
&:after { &::after {
content: '·'; content: '·';
padding: 0 .25rem; padding: 0 .25rem;
} }

16
src/styles/components/tasks.scss
View file

@ -3,16 +3,17 @@
padding: 0; padding: 0;
text-align: left; text-align: left;
@media screen and (min-width: $tablet) {
&.short { @media screen and (max-width: $tablet) {
max-width: 100%;
}
&.short {
@media screen and (min-width: $tablet) {
max-width: 53vw; max-width: 53vw;
} }
} }
@media screen and (max-width: $tablet) {
max-width: 100%;
}
.progress { .progress {
// overwrite bulma // overwrite bulma
margin-bottom: 0; margin-bottom: 0;
@ -44,7 +45,8 @@
.is-menu-enabled .tasks .task { .is-menu-enabled .tasks .task {
span:not(.tag), a { span:not(.tag), a {
.tasktext, &.tasktext { .tasktext,
&.tasktext {
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop) {
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
} }

2
src/styles/global.scss
View file

@ -14,4 +14,4 @@
@import "bulma/sass/layout/_all"; @import "bulma/sass/layout/_all";
@import "theme"; @import "theme";
@import "components"; @import "components";

4
src/styles/theme/_index.scss
View file

@ -2,10 +2,10 @@
@import "theme"; @import "theme";
@import "background";
@import "content"; @import "content";
@import "form"; @import "form";
@import "link-share"; @import "link-share";
@import "loading"; @import "loading";
@import "navigation"; @import "navigation";
@import "notification"; @import "notification";
@import "background";

3
src/styles/theme/background.scss
View file

@ -1,4 +1,5 @@
.app-container.has-background, .link-share-container.has-background { .app-container.has-background,
.link-share-container.has-background {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;

3
src/styles/theme/content.scss
View file

@ -1,5 +1,6 @@
.content h3 { .content h3 {
.icon, .is-small { .icon,
.is-small {
font-size: 1rem; font-size: 1rem;
} }
} }

18
src/styles/theme/form.scss
View file

@ -95,8 +95,9 @@
height: 100%; height: 100%;
} }
.control.has-icons-left .icon, .control.has-icons-right .icon { .control.has-icons-left .icon,
z-index: 0; .control.has-icons-right .icon {
z-index: 4;
} }
// Buttons icons // Buttons icons
@ -104,19 +105,6 @@
margin-right: 0.05rem !important; margin-right: 0.05rem !important;
} }
// menu buttons
.button-bottom {
margin-bottom: 1rem;
}
.button-right {
float: right;
}
.control.has-icons-left .icon, .control.has-icons-right .icon {
z-index: 4;
}
// Contenteditable form // Contenteditable form
.input.title { .input.title {
font-size: 1.8rem; font-size: 1.8rem;

35
src/styles/theme/link-share.scss
View file

@ -1,25 +1,24 @@
.field.has-addons.no-input-mobile { .field.has-addons.no-input-mobile {
.control:first-child { .control:first-child {
width: 100%; width: 100%;
@media screen and (max-width: $tablet) {
display: none;
}
} }
.button { .button {
height: 40px; height: 40px;
}
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
.control:first-child { border-radius: $radius !important;
display: none; }
}
.button {
border-radius: $radius !important;
}
} }
} }
.link-share-container { .link-share-container {
&.has-background,&.list\.kanban-view { &.has-background,
&.list\.kanban-view {
.container { .container {
max-width: 100vw; max-width: 100vw;
@ -36,14 +35,12 @@
max-width: 100%; max-width: 100%;
} }
.loader-container, .gantt-chart-container { .loader-container, .gantt-chart-container > .card {
> .card { box-shadow: none !important;
box-shadow: none !important; border: none;
border: none;
.task-add { .task-add {
padding: 1rem 0 0; padding: 1rem 0 0;
} }
}
} }
} }

52
src/styles/theme/loading.scss
View file

@ -1,32 +1,28 @@
.loader-container { .loader-container.is-loading {
&.is-loading { position: relative;
position: relative; pointer-events: none;
pointer-events: none; opacity: 0.5;
opacity: 0.5;
&:after { &::after {
@include loader; @include loader;
position: absolute; position: absolute;
top: calc(50% - 2.5rem); top: calc(50% - 2.5rem);
left: calc(50% - 2.5rem); left: calc(50% - 2.5rem);
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-width: 0.25rem; border-width: 0.25rem;
} }
}
} }
.spinner { .spinner.is-loading {
&.is-loading { pointer-events: none;
pointer-events: none;
&:after { &::after {
@include loader; @include loader;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin-left: calc(50% - 1rem); margin-left: calc(50% - 1rem);
margin-top: 1rem; margin-top: 1rem;
border-width: 0.25rem; border-width: 0.25rem;
} }
} }
}

49
src/styles/theme/navigation.scss
View file

@ -1,4 +1,5 @@
.menu-hide-button, .menu-show-button { .menu-hide-button,
.menu-show-button {
display: none; display: none;
z-index: 31; z-index: 31;
font-weight: bold; font-weight: bold;
@ -7,7 +8,8 @@
line-height: 1; line-height: 1;
transition: all $transition; transition: all $transition;
&:hover, &:focus { &:hover,
&:focus {
height: 1rem; height: 1rem;
color: $grey-600; color: $grey-600;
} }
@ -17,7 +19,14 @@
height: .75rem; height: .75rem;
width: 2rem; width: 2rem;
&:before, &:after { @media screen and (max-width: $tablet) {
display: block;
margin-left: $hamburger-menu-icon-spacing;
}
// menu line icon and animationanimation // START
&::before,
&::after {
display: block; display: block;
content: ''; content: '';
border-top: 3px solid $grey-400; border-top: 3px solid $grey-400;
@ -25,31 +34,38 @@
transition: all $transition; transition: all $transition;
} }
&:before { &::before {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
&:after { &::after {
margin-top: .5rem; margin-top: .5rem;
} }
&:hover, &:focus { &:hover,
color: $grey-600; &:focus {
&::before {
&:before {
margin-bottom: .75rem; margin-bottom: .75rem;
} }
&:after { &::after {
margin-top: .75rem; margin-top: .75rem;
} }
} }
// menu line animation // END
} }
.menu-hide-button { .menu-hide-button {
position: fixed; position: fixed;
&:hover, &:focus { @media screen and (max-width: $tablet) {
display: block;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
&:hover,
&:focus {
color: $text; color: $text;
} }
} }
@ -59,17 +75,6 @@
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
.menu-hide-button {
display: block;
top: $hamburger-menu-icon-spacing;
right: $hamburger-menu-icon-spacing;
}
.menu-show-button {
display: block;
margin-left: $hamburger-menu-icon-spacing;
}
.navbar.is-dark .navbar-brand > .navbar-item { .navbar.is-dark .navbar-brand > .navbar-item {
margin: 0 auto; margin: 0 auto;
} }

6
src/styles/theme/notification.scss
View file

@ -15,8 +15,6 @@
} }
} }
.message { .message .message-body {
.message-body { border: $thickness solid;
border: $thickness solid;
}
} }

6
src/styles/theme/theme.scss
View file

@ -144,10 +144,8 @@ button.table {
margin-right: 4px; margin-right: 4px;
} }
.dropdown-menu { .dropdown-menu .dropdown-content {
.dropdown-content { box-shadow: $shadow-md;
box-shadow: $shadow-md;
}
} }
.is-strikethrough { .is-strikethrough {

14
src/styles/variables/variables.scss
View file

@ -6,18 +6,20 @@ $red: #ff4136;
$blue: #1973ff; $blue: #1973ff;
$primary: $blue; $primary: $blue;
$info-invert: #fff; $info-invert: $white;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif; $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif;
$thickness: 1px; $thickness: 1px;
$pagination-current-border: $primary; $pagination-current-border: $primary;
$navbar-item-active-color: $primary; $navbar-item-active-color: $primary;
$dropdown-content-shadow: none; $dropdown-content-shadow: none;
$dropdown-item-hover-background-color: $grey-100;
$bulmaswatch-import-font: false !default; $bulmaswatch-import-font: false !default;
$light-background: $grey-100; $light-background: $grey-100;
$transition-duration: 100ms;
$vikunja-font: 'Quicksand', sans-serif;
$transition-duration: 150ms; $transition-duration: 150ms;
$transition: $transition-duration ease; $transition: $transition-duration ease;
@ -33,9 +35,7 @@ $navbar-height: 4rem;
$navbar-width: 300px; $navbar-width: 300px;
$navbar-icon-width: 40px; $navbar-icon-width: 40px;
$editor-border-color: #ddd;
$dropdown-item-hover-background-color: $grey-100;
$lists-per-row: 5; $lists-per-row: 5;
$list-height: 150px; $list-height: 150px;
$list-spacing: 1rem; $list-spacing: 1rem;