Reorganize Styles (#45)
This commit is contained in:
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;
|
||||
}
|
||||
}
|
||||
}
|
317
src/styles/theme/navigation.scss
Normal file
317
src/styles/theme/navigation.scss
Normal file
@ -0,0 +1,317 @@
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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{
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
z-index: 4 !important;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
.namespace-container{
|
||||
background: $vikunja-nav-background;
|
||||
z-index: 6;
|
||||
color: $vikunja-nav-color;
|
||||
padding: 0;
|
||||
transition: all $transition;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: $navbar-height + 0.75rem;
|
||||
overflow-x: auto;
|
||||
width: 17vw;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
padding: 0 0 1em;
|
||||
left: -147vw;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 70vw;
|
||||
|
||||
&.is-active {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu{
|
||||
.menu-label {
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
font-family: $vikunja-font;
|
||||
color: $grey;
|
||||
font-weight: 500;
|
||||
min-height: 2.5em;
|
||||
padding-top: $navbar-padding * 0.3;
|
||||
padding-left: $navbar-padding;
|
||||
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nsettings{
|
||||
float: right;
|
||||
padding: 10px 0.3em 0;
|
||||
}
|
||||
|
||||
.menu-label,.nsettings,.menu-list a{
|
||||
color: $vikunja-nav-color;
|
||||
}
|
||||
|
||||
.checkinput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkinput:checked + .more-container {
|
||||
.menu-list.can-be-hidden {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.checkinput:not(:checked) + .more-container .hidden-hint {
|
||||
opacity: 1;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.hidden-hint {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
text-align: center;
|
||||
color: $grey;
|
||||
cursor: pointer;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
&.can-be-hidden {
|
||||
transition: all $transition;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.75em 1em 0.75em $navbar-padding * 1.5;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
border-radius: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border-left: $vikunja-nav-selected-width solid transparent;
|
||||
|
||||
.icon {
|
||||
color: lighten($vikunja-nav-color, 20);
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 4px;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: $primary;
|
||||
border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
|
||||
.icon {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
margin: $navbar-padding / 2 0 $navbar-padding;
|
||||
|
||||
.menu-list {
|
||||
li {
|
||||
font-weight: 500;
|
||||
font-family: $vikunja-font;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .user{
|
||||
padding: 1em 0.5em 0;
|
||||
|
||||
span {
|
||||
font-family: $vikunja-font;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
color: lighten($black, 10);
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-trigger .button {
|
||||
background: none;
|
||||
|
||||
&:focus:not(:active), &:active{
|
||||
outline: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobilemenu-hide-button,.mobilemenu-show-button{
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 31;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
color: $dark;
|
||||
&:hover, &:focus{
|
||||
color: darken($dark, 20);
|
||||
}
|
||||
}
|
||||
|
||||
.mobilemenu-hide-button{
|
||||
color: $dark;
|
||||
&:hover, &:focus{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-overlay{
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(250,250,250,0.8);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
transition: all $transition;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
.mobilemenu-hide-button{
|
||||
display: block;
|
||||
top: 1vh;
|
||||
right: 4vh;
|
||||
}
|
||||
|
||||
.mobilemenu-show-button{
|
||||
display: block;
|
||||
top: 1vh;
|
||||
left: 4vh;
|
||||
}
|
||||
|
||||
.mobile-overlay{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar.is-dark .navbar-brand > .navbar-item{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
margin-right: 0.85em !important;
|
||||
}
|
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;
|
||||
}
|
||||
}
|
44
src/styles/theme/variables.scss
Normal file
44
src/styles/theme/variables.scss
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default
|
||||
|
||||
$orange: #ff851b;
|
||||
$green: #00CE6E;
|
||||
$blue: #5974d9;
|
||||
$red: #ff4136;
|
||||
$primary: #198CFF !default;
|
||||
$dark: lighten($black, 8);
|
||||
|
||||
$info-invert: #fff;
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: darken($primary, 5);
|
||||
$navbar-item-active-color: $primary;
|
||||
$dropdown-content-shadow: none;
|
||||
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$light-background: #F1F5F8;
|
||||
$transition-duration: 100ms;
|
||||
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
$vikunja-light-text: darken(#fff, 10%);
|
||||
$vikunja-blue: #7F23FF;// #7F23FF; // #5974d9
|
||||
$vikunja-green: #4DB788;
|
||||
|
||||
$navbar-padding: 2em;
|
||||
$vikunja-nav-background: $light-background;
|
||||
$vikunja-nav-color: lighten($black, 25);
|
||||
$vikunja-nav-selected-width: 0.4em;
|
||||
|
||||
$transition: 150ms 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);
|
Reference in New Issue
Block a user