vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Use a consistent set of shadows

This commit is contained in:
kolaente 2021-01-23 17:31:00 +01:00
parent a9ff10aeba
commit e521512bba
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
10 changed files with 27 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/components/attachments.scss
View File

@ -86,16 +86,14 @@
width: 100%;
font-size: 5rem;
height: auto;
text-shadow: 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px rgba(0, 0, 0, .2), 0 1px 5px rgba(0, 0, 0, .12);
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
text-shadow: $shadow-md;
animation: bounce 2s infinite;
}
.hint {
margin: .5rem auto 2rem;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
box-shadow: $shadow-md;
background: $primary;
padding: 1rem;
color: $white;

4
src/styles/components/base/card.scss
View File

@ -17,6 +17,6 @@
}
.box, .card {
border: $thickness solid $border;
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
border: 1px solid $grey-200;
box-shadow: $shadow-md;
}

88
src/styles/components/base/tooltip.scss
View File

@ -37,90 +37,4 @@
opacity: 1;
visibility: visible;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&.popover {
.popover-inner {
background: $light;
color: $dark;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.popover-arrow {
border-color: $light;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}
}

3
src/styles/components/kanban.scss
View File

@ -20,7 +20,6 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
padding: 0 1.5rem;
.bucket {
background-color: $bucket-background;
border-radius: $radius;
position: relative;
@ -50,7 +49,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
transition: $ease-out;
cursor: pointer;
box-shadow: 2px 2px 2px $grey-200;
box-shadow: $shadow-xs;
display: block;
font-size: .9rem;

4
src/styles/components/namespaces.scss
View File

@ -53,7 +53,7 @@ $lists-per-row: 5;
margin: 0 1rem 1rem 0;
padding: 1rem;
border-radius: $radius;
box-shadow: 0.3rem 0.3rem 1rem $grey-300;
box-shadow: $shadow-sm;
transition: box-shadow $transition;
display: flex;
@ -61,7 +61,7 @@ $lists-per-row: 5;
flex-wrap: wrap;
&:hover {
box-shadow: 0 0 1rem $grey-300;
box-shadow: $shadow-md;
}
@media screen and (min-width: $widescreen) {

18
src/styles/components/switch-view.scss
View File

@ -1,16 +1,16 @@
.switch-view {
background: $white;
display: inline-block;
display: inline-flex;
border-radius: $radius;
font-size: .8rem;
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
font-size: .75rem;
box-shadow: $shadow-sm;
height: $switch-view-height;
margin-bottom: 1rem;
padding: .5rem;
a {
padding: .5rem;
display: inline-block;
margin: .4rem;
padding: .25rem .5rem;
display: block;
border-radius: $radius;
-webkit-transition: all 100ms;
@ -20,7 +20,7 @@
transition: all 100ms;
&:not(:last-child) {
margin-right: 0;
margin-right: .5rem;
}
&.is-active, &:hover {
@ -30,7 +30,7 @@
&.is-active {
background: $primary;
font-weight: bold;
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
box-shadow: $shadow-xs;
}
&:hover {

6
src/styles/theme/form.scss
View File

@ -5,11 +5,11 @@
font-size: 0.85rem;
font-weight: bold;
height: $button-height;
box-shadow: .2rem 0.2rem .5rem $grey-200;
box-shadow: $shadow-sm;
&.is-hovered,
&:hover {
box-shadow: .1rem .1rem 1rem $grey-200;
box-shadow: $shadow-md;
}
&.fullheight {
@ -22,7 +22,7 @@
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: .1rem .1rem .75rem $grey-200 !important;
box-shadow: $shadow-xs !important;
}
&.is-primary.is-outlined:hover {

2
src/styles/theme/navigation.scss
View File

@ -368,7 +368,7 @@
.dropdown-menu {
.dropdown-content {
box-shadow: 0.3rem 0.3rem 0.8rem $grey-300;
box-shadow: $shadow-md;
}
}
}

1
src/styles/theme/variables/_all.scss
View File

@ -1,2 +1,3 @@
@import 'colors';
@import 'shadows';
@import 'variables';

5
src/styles/theme/variables/shadows.scss Normal file
View File

@ -0,0 +1,5 @@
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
$shadow-xl: 0 20px 40px rgba($grey-500, .2);