Button styling and added border on click for all buttons/cards

This commit is contained in:
Joseph Hutchinson
2018-04-18 16:47:11 -04:00
parent e09efa9bd7
commit 5a6838cb13
2 changed files with 13 additions and 8 deletions

View File

@@ -107,9 +107,13 @@ strong {
border-radius: 0.2em;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.16), 0 0.3em 0.3em -0.1em rgba(0,0,0,0.23);
}
.card:active {
border: 0.06em solid #7A7B7C;
margin: -0.06em;
}
.card-active {
transform: scale(0.95);
box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
@@ -163,14 +167,14 @@ strong {
padding: 0.5em 0.6em;
background-color: #FFF;
border-radius: 0.2em;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0 0.04em 0.12em rgba(0,0,0,0.12), 0 0.04em 0.08em rgba(0,0,0,0.24);
}
.button:hover {
transform: scale(0.97);
}
.button:active {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border: 0.06em solid #7A7B7C;
padding: 0.44em 0.6em 0.5em 0.54em;
}
.side-gutter {
padding-left: 0.7em !important;