chore: small CSS format changes
This commit is contained in:
Dominik Pschenitschni
parent
7ca355db66
commit
32a0106819
13 changed files with 101 additions and 113 deletions
|
|
@ -312,6 +312,8 @@ export default {
|
|||
@import './vue-easymde/vue-easymde.css';
|
||||
@import 'highlight.js/scss/base16/equilibrium-gray-light';
|
||||
|
||||
$editor-border-color: #ddd;
|
||||
|
||||
.editor {
|
||||
.clear {
|
||||
clear: both;
|
||||
|
|
@ -371,7 +373,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
margin-left: -3px;
|
||||
|
|
@ -396,7 +398,7 @@ ul.actions {
|
|||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '·';
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
padding: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
// overwrite bulma
|
||||
margin-bottom: 0;
|
||||
|
|
@ -44,7 +45,8 @@
|
|||
|
||||
.is-menu-enabled .tasks .task {
|
||||
span:not(.tag), a {
|
||||
.tasktext, &.tasktext {
|
||||
.tasktext,
|
||||
&.tasktext {
|
||||
@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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,4 +14,4 @@
|
|||
@import "bulma/sass/layout/_all";
|
||||
|
||||
@import "theme";
|
||||
@import "components";
|
||||
@import "components";
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
@import "theme";
|
||||
|
||||
@import "background";
|
||||
@import "content";
|
||||
@import "form";
|
||||
@import "link-share";
|
||||
@import "loading";
|
||||
@import "navigation";
|
||||
@import "notification";
|
||||
@import "background";
|
||||
@import "notification";
|
||||
|
|
@ -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-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.content h3 {
|
||||
.icon, .is-small {
|
||||
.icon,
|
||||
.is-small {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,8 +95,9 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
||||
z-index: 0;
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
// Buttons icons
|
||||
|
|
@ -104,19 +105,6 @@
|
|||
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
|
||||
.input.title {
|
||||
font-size: 1.8rem;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
.field.has-addons.no-input-mobile {
|
||||
.control:first-child {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.control:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-share-container {
|
||||
&.has-background,&.list\.kanban-view {
|
||||
&.has-background,
|
||||
&.list\.kanban-view {
|
||||
.container {
|
||||
max-width: 100vw;
|
||||
|
||||
|
|
@ -36,14 +35,12 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.loader-container, .gantt-chart-container {
|
||||
> .card {
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
.loader-container, .gantt-chart-container > .card {
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
|
||||
.task-add {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
.task-add {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +1,28 @@
|
|||
.loader-container {
|
||||
&.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
.loader-container.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
&.is-loading {
|
||||
pointer-events: none;
|
||||
.spinner.is-loading {
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
@include loader;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(50% - 1rem);
|
||||
margin-top: 1rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
@include loader;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(50% - 1rem);
|
||||
margin-top: 1rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.menu-hide-button, .menu-show-button {
|
||||
.menu-hide-button,
|
||||
.menu-show-button {
|
||||
display: none;
|
||||
z-index: 31;
|
||||
font-weight: bold;
|
||||
|
|
@ -7,7 +8,8 @@
|
|||
line-height: 1;
|
||||
transition: all $transition;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
height: 1rem;
|
||||
color: $grey-600;
|
||||
}
|
||||
|
|
@ -17,7 +19,14 @@
|
|||
height: .75rem;
|
||||
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;
|
||||
content: '';
|
||||
border-top: 3px solid $grey-400;
|
||||
|
|
@ -25,31 +34,38 @@
|
|||
transition: all $transition;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $grey-600;
|
||||
|
||||
&:before {
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::before {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
}
|
||||
// menu line animation // END
|
||||
}
|
||||
|
||||
.menu-hide-button {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -59,17 +75,6 @@
|
|||
}
|
||||
|
||||
@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 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
.message-body {
|
||||
border: $thickness solid;
|
||||
}
|
||||
.message .message-body {
|
||||
border: $thickness solid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -144,10 +144,8 @@ button.table {
|
|||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
.dropdown-menu .dropdown-content {
|
||||
box-shadow: $shadow-md;
|
||||
}
|
||||
|
||||
.is-strikethrough {
|
||||
|
|
|
|||
|
|
@ -6,18 +6,20 @@ $red: #ff4136;
|
|||
$blue: #1973ff;
|
||||
$primary: $blue;
|
||||
|
||||
$info-invert: #fff;
|
||||
$info-invert: $white;
|
||||
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: $primary;
|
||||
$navbar-item-active-color: $primary;
|
||||
|
||||
$dropdown-content-shadow: none;
|
||||
$dropdown-item-hover-background-color: $grey-100;
|
||||
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$light-background: $grey-100;
|
||||
$transition-duration: 100ms;
|
||||
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
|
||||
$transition-duration: 150ms;
|
||||
$transition: $transition-duration ease;
|
||||
|
|
@ -33,9 +35,7 @@ $navbar-height: 4rem;
|
|||
$navbar-width: 300px;
|
||||
$navbar-icon-width: 40px;
|
||||
|
||||
$editor-border-color: #ddd;
|
||||
|
||||
$dropdown-item-hover-background-color: $grey-100;
|
||||
$lists-per-row: 5;
|
||||
$list-height: 150px;
|
||||
$list-spacing: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue