Refactor base styles

This commit is contained in:
John O'Nolan 2019-11-05 15:31:56 +07:00
parent 4a6047adbb
commit 0aa3d40604
9 changed files with 158 additions and 247 deletions

View file

@ -1,10 +1,6 @@
/* Buttons
/* ---------------------------------------------------------- */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
display: inline-block;
height: var(--height);
@ -23,18 +19,10 @@ button,
transition: 0.4s ease;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
button.fit,
.button.fit {
width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
button.small,
.button.small {
height: calc(var(--height) * 0.9);
line-height: calc(var(--height) * 0.9);
@ -42,10 +30,6 @@ button.small,
font-size: 1.2rem;
}
input[type="submit"].large,
input[type="reset"].large,
input[type="button"].large,
button.large,
.button.large {
height: calc(var(--height) * 1.14);
line-height: calc(var(--height) * 1.14);
@ -53,37 +37,18 @@ button.large,
font-size: 1.6rem;
}
input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
pointer-events: none;
opacity: 0.4;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
color: var(--color-primary) !important;
background-color: transparent;
box-shadow: inset 0 0 0 2px var(--color-primary);
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
text-decoration: none;
color: color(var(--color-primary) l(-15%)) !important;
@ -91,20 +56,12 @@ button:hover,
transition: 0.2s ease;
}
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
color: #fff !important;
background-color: var(--color-primary);
box-shadow: none;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
background-color: color(var(--color-primary) l(-10%));
}
background-color: color(var(--color-primary) l(-10%));
}