luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Update styles for box shadows

This commit is contained in:
Joshua Ogle 2018-05-24 11:09:50 -06:00
parent a259c16c8b
commit 2377e2769d
7 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/styles/components/global-flash.scss
View File

@ -15,7 +15,7 @@
z-index: 1;
.notification {
box-shadow: 0 0 25px rgba($black, 0.2);
box-shadow: $box-shadow-high;
margin: 20px;
@include until($desktop) {
margin: 1rem 0;

3
ui/app/styles/components/login-form.scss Normal file
View File

@ -0,0 +1,3 @@
.login-form {
box-shadow: $box-shadow, $box-shadow-high;
}

6
ui/app/styles/components/sidebar.scss
View File

@ -72,14 +72,8 @@
transition: 250ms border-width;
&.is-active {
color: $blue;
background-color: $dark-white;
border-right: 4px solid $blue;
}
&:hover {
background-color: $dark-white;
}
}
}
}

1
ui/app/styles/core.scss
View File

@ -54,6 +54,7 @@
@import "./components/linked-block";
@import "./components/list-pagination";
@import "./components/loader";
@import "./components/login-form";
@import "./components/message-in-page";
@import "./components/page-header";
@import "./components/popup-menu";

5
ui/app/styles/core/buttons.scss
View File

@ -1,8 +1,8 @@
$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
.button {
box-shadow: $button-box-shadow-standard;
border: 1px solid $grey-light;
box-shadow: $box-shadow-low;
color: $grey-dark;
display: inline-block;
font-size: $size-small;
@ -57,13 +57,14 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
&.is-hovered {
background-color: darken($color, 5%);
border-color: darken($color, 5%);
box-shadow: $box-shadow-middle;
}
&:active,
&.is-active {
background-color: darken($color, 10%);
border-color: darken($color, 10%);
box-shadow: none;
box-shadow: $box-shadow-middle;
}
&:focus,

10
ui/app/styles/utils/_bulma_variables.scss
View File

@ -61,6 +61,10 @@ $radius: 2px;
//box
$box-radius: 0;
$box-shadow: 0 0 0 1px rgba($black, 0.1);
$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.10), 0 6px 8px -2px rgba($black, 0.05);
$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.10);
$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.20);
$link: $blue;
$text: $black;
@ -78,6 +82,12 @@ $progress-bar-background-color: lighten($grey-light, 15%);
$base-border: 1px solid $grey-light;
//menu
$menu-item-hover-color: $text;
$menu-item-hover-background-color: $grey-lighter;
$menu-item-active-color: $link;
$menu-item-active-background-color: transparent;
// animations
$speed: 150ms;
$speed-slow: $speed * 2;

2
ui/app/templates/components/splash-page.hbs
View File

@ -1,7 +1,7 @@
<div class="is-flex-v-centered-tablet is-flex-1 is-fullwidth">
<div class="columns is-centered is-gapless is-fullwidth">
<div class="column is-4-desktop is-7-tablet">
<div class="box is-paddingless has-glow is-relative">
<div class="login-form box is-paddingless is-relative">
<div class="hero has-dark-grey-gradient">
<div class="hero-body">
<div class="has-current-color-fill has-text-white">