buttons and boxes
All checks were successful
the build was successful

This commit is contained in:
kolaente 2018-12-23 15:11:01 +01:00
parent e264fbcf73
commit c07a696b74
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
5 changed files with 216 additions and 30 deletions

View File

@ -12,9 +12,9 @@
version="1.1"
id="svg2"
xml:space="preserve"
width="171.46495"
height="260"
viewBox="0 0 171.46494 260.00001"
width="145.37993"
height="204.53957"
viewBox="0 0 145.37992 204.53957"
sodipodi:docname="llama.svg"
inkscape:version="0.92.2 2405546, 2018-03-11"><metadata
id="metadata8"><rdf:RDF><cc:Work
@ -35,28 +35,28 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1025"
inkscape:window-height="1017"
id="namedview4"
showgrid="false"
inkscape:zoom="0.62657276"
inkscape:cx="-32.45051"
inkscape:cy="270.91286"
inkscape:zoom="2.506291"
inkscape:cx="50.240047"
inkscape:cy="137.78869"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="g12"
fit-margin-left="-0.2"
fit-margin-left="30"
fit-margin-top="0"
fit-margin-right="25"
fit-margin-right="0"
fit-margin-bottom="0" /><g
id="g10"
inkscape:groupmode="layer"
inkscape:label="ink_ext_XXXXXX"
transform="matrix(1.3333333,0,0,-1.3333333,-370.94351,512.6115)"><g
transform="matrix(1.3333333,0,0,-1.3333333,-389.82001,456.75206)"><g
id="g12"
transform="scale(0.1)"><g
id="g934"
transform="matrix(-0.42070396,0,0,-0.42070396,5780.5504,5256.0109)"><path
transform="matrix(0.33096386,0,0,-0.33096386,1653.9483,4535.995)"><path
inkscape:connector-curvature="0"
id="path44"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -25,7 +25,7 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-success is-fullwidth" :class="{ 'is-loading': loading}">
<button @click="submit()" class="button is-primary is-fullwidth" :class="{ 'is-loading': loading}">
Save
</button>
</div>

View File

@ -4,18 +4,21 @@ $green: #42B256;
$blue: #5974d9;
$red: #ff4136;
$primary: #158cba !default;
$primary: #198CFF !default;
$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: 0 0 0 1px #dbdbdb, 0 #{$thickness} 0 1px #dbdbdb;
$dropdown-content-shadow: none;
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
$bulmaswatch-import-font: false !default;
$vikunja-font: 'Quicksand', sans-serif;
$vikunja-light-text: darken(#fff, 10%);
$vikunja-blue: #5974d9;
$vikunja-green: #4DB788;
$vikunja-green: #4DB788;
$navbar-padding: 1.5em;
$transition: 150ms ease;

View File

@ -24,12 +24,11 @@
margin: 0 0.5em;
}
//
.app-container{
min-height: calc(100vh - 69px);
min-height: calc(100vh - 64px);
.namespace-container{
background: $vikunja-blue;
background: url('../public/images/llama.svg') no-repeat bottom left fixed $vikunja-blue;
box-shadow: 0 0 1em darken(#fff, 30%);
z-index: 2;
color: $vikunja-light-text;
@ -40,7 +39,7 @@
font-size: 1em;
font-weight: 400;
min-height: 2.5em;
padding-top: 0.3em;
padding-top: $navbar-padding * 0.3;
}
.nsettings{
@ -60,11 +59,11 @@
}
.menu-label{
padding-left: 1em;
padding-left: $navbar-padding;
}
.menu-list a{
padding-left: 2em;
padding-left: $navbar-padding * 2;
transition: all 0.2s ease;
.icon{
@ -85,10 +84,10 @@
}
.top-menu {
margin: 1em 0;
margin: $navbar-padding 0;
.menu-list a {
padding-left: 1em;
padding-left: $navbar-padding;
}
}
}
@ -96,7 +95,7 @@
.app-content{
padding: 1.5em;
z-index: 1;
background: url('../public/images/llama.svg') no-repeat bottom right fixed darken(#fff, 2%);
background: darken(#fff, 1%);
.card{
background: #fff;
@ -126,3 +125,18 @@
}
}
}
.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;
}
}

View File

@ -1,15 +1,184 @@
@import url('/fonts/fonts.css');
@import 'variables';
@import "../../node_modules/bulma/bulma";
*, *:hover, *:active, *:focus{
outline: none;
}
@import 'variables';
@import "../../node_modules/bulma/bulma";
@import '../../node_modules/bulmaswatch/lumen/overrides';
.button {
transition: all $transition;
border: 0;
text-transform: uppercase;
font-size: 0.85rem;
font-weight: bold;
height: 2.648em;
@import url('/fonts/fonts.css');
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
box-shadow: 0.5em 0.5em 1.2em lighten($color, 30);
&.is-hovered,
&:hover {
box-shadow: 0.8em 0.8em 1.2em lighten($color, 30);
}
&.is-active,
&.is-focused,
&:active,
&:focus {
box-shadow: 0.5em 0.5em 0.8em lighten($color, 30);
}
}
}
}
.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;
.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 1em darken($light, 8);
}
.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 {
@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 right fixed darken(#fff, 7%);
background: url('../public/images/llama.svg') no-repeat bottom left fixed darken(#fff, 5%);
min-height: 100vh;
}