Button has more styles w/ added clases.

- .small: minimal height for content.
 - .pulse-button: animate a pulsating effect, used for getting user
 attention.
 - .warning: new orange warning button styling, used for update buttons.
This commit is contained in:
2021-02-18 23:51:05 +01:00
parent 9b2d0f2d31
commit f1a0f2a0f2

View File

@@ -93,10 +93,6 @@ a {
}
}
&.small > button {
height: min-content;
}
@include mobile {
&:not(.row) {
flex-direction: column;
@@ -114,6 +110,8 @@ input,
textarea {
border-radius: 0;
box-shadow: none;
padding: 0;
margin: 0;
-webkit-appearance: none;
font-size: 1.1rem;
border: 1px solid rgba(#333333, 0.3);
@@ -127,7 +125,6 @@ textarea {
color: #333;
padding: 10px 30px;
margin: 0;
border: 0;
width: fit-content;
font-size: 1.3rem;
line-height: 1.3rem;
@@ -145,6 +142,11 @@ textarea {
height: auto;
}
&.warning {
background-color: #f9826c;
color: white;
}
&.danger {
background-color: $red;
color: white;
@@ -160,9 +162,12 @@ textarea {
top: 0;
left: 0;
opacity: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
}
&.active {
font-weight: bold;
}
&:hover:not(:disabled) {
@@ -172,7 +177,7 @@ textarea {
opacity: 1;
}
}
&:disabled{
&:disabled {
opacity: 0.25;
cursor: not-allowed;
}
@@ -182,6 +187,21 @@ textarea {
}
}
.pulse-button:not(:hover) {
animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.cursor {
&-pointer {
@@ -202,7 +222,8 @@ textarea {
text-decoration: none;
color: $matte-text-color;
&:focus, &:hover {
&:focus,
&:hover {
border-color: $link-color;
}
}