Use a consistent set of shadows
This commit is contained in:
parent
a9ff10aeba
commit
e521512bba
|
@ -86,16 +86,14 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
height: auto;
|
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);
|
text-shadow: $shadow-md;
|
||||||
-moz-animation: bounce 2s infinite;
|
|
||||||
-webkit-animation: bounce 2s infinite;
|
|
||||||
animation: bounce 2s infinite;
|
animation: bounce 2s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
margin: .5rem auto 2rem;
|
margin: .5rem auto 2rem;
|
||||||
border-radius: 2px;
|
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;
|
background: $primary;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
|
|
@ -17,6 +17,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.box, .card {
|
.box, .card {
|
||||||
border: $thickness solid $border;
|
border: 1px solid $grey-200;
|
||||||
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
|
box-shadow: $shadow-md;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,90 +37,4 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -20,7 +20,6 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
|
|
||||||
.bucket {
|
.bucket {
|
||||||
|
|
||||||
background-color: $bucket-background;
|
background-color: $bucket-background;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -50,7 +49,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
|
||||||
|
|
||||||
transition: $ease-out;
|
transition: $ease-out;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 2px 2px 2px $grey-200;
|
box-shadow: $shadow-xs;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
|
|
|
@ -53,7 +53,7 @@ $lists-per-row: 5;
|
||||||
margin: 0 1rem 1rem 0;
|
margin: 0 1rem 1rem 0;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
box-shadow: 0.3rem 0.3rem 1rem $grey-300;
|
box-shadow: $shadow-sm;
|
||||||
transition: box-shadow $transition;
|
transition: box-shadow $transition;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -61,7 +61,7 @@ $lists-per-row: 5;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 0 1rem $grey-300;
|
box-shadow: $shadow-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: $widescreen) {
|
@media screen and (min-width: $widescreen) {
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
.switch-view {
|
.switch-view {
|
||||||
background: $white;
|
background: $white;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
font-size: .8rem;
|
font-size: .75rem;
|
||||||
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
|
box-shadow: $shadow-sm;
|
||||||
height: $switch-view-height;
|
height: $switch-view-height;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
|
padding: .5rem;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
padding: .5rem;
|
padding: .25rem .5rem;
|
||||||
display: inline-block;
|
display: block;
|
||||||
margin: .4rem;
|
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
|
|
||||||
-webkit-transition: all 100ms;
|
-webkit-transition: all 100ms;
|
||||||
|
@ -20,7 +20,7 @@
|
||||||
transition: all 100ms;
|
transition: all 100ms;
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
margin-right: 0;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-active, &:hover {
|
&.is-active, &:hover {
|
||||||
|
@ -30,7 +30,7 @@
|
||||||
&.is-active {
|
&.is-active {
|
||||||
background: $primary;
|
background: $primary;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
box-shadow: 0.3rem 0.3rem 0.8rem $grey-200;
|
box-shadow: $shadow-xs;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -5,11 +5,11 @@
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: $button-height;
|
height: $button-height;
|
||||||
box-shadow: .2rem 0.2rem .5rem $grey-200;
|
box-shadow: $shadow-sm;
|
||||||
|
|
||||||
&.is-hovered,
|
&.is-hovered,
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: .1rem .1rem 1rem $grey-200;
|
box-shadow: $shadow-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fullheight {
|
&.fullheight {
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:focus:not(:active) {
|
&:focus:not(:active) {
|
||||||
box-shadow: .1rem .1rem .75rem $grey-200 !important;
|
box-shadow: $shadow-xs !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-primary.is-outlined:hover {
|
&.is-primary.is-outlined:hover {
|
||||||
|
|
|
@ -368,7 +368,7 @@
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
.dropdown-content {
|
.dropdown-content {
|
||||||
box-shadow: 0.3rem 0.3rem 0.8rem $grey-300;
|
box-shadow: $shadow-md;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,2 +1,3 @@
|
||||||
@import 'colors';
|
@import 'colors';
|
||||||
|
@import 'shadows';
|
||||||
@import 'variables';
|
@import 'variables';
|
|
@ -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);
|
Reference in New Issue