monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 21:51:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: move button styles to their own file

Browse source
This commit is contained in:
Miodec 2023-09-19 17:17:22 +01:00
parent f63e6a227b
commit c43e5324c2
3 changed files with 133 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
frontend/src/styles/buttons.scss Normal file
View file

@ -0,0 +1,129 @@
a.button {
text-decoration: none;
}
.button {
color: var(--text-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5em;
border-radius: var(--roundness);
background: var(--sub-alt-color);
text-align: center;
-webkit-user-select: none;
user-select: none;
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
&.active {
background: var(--main-color);
color: var(--bg-color);
&:hover {
background: var(--text-color);
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&:hover {
color: var(--bg-color);
background: var(--text-color);
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 0.15em var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
.textButton {
color: var(--sub-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5em;
border-radius: var(--roundness);
text-align: center;
-webkit-user-select: none;
user-select: none;
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
width: -moz-max-content;
width: max-content;
display: grid;
grid-auto-flow: column;
gap: 0.25em;
text-decoration: none;
.fas,
.far {
display: grid;
place-content: center center;
}
&.active {
color: var(--main-color);
&:hover {
color: var(--text-color);
}
&:active {
color: var(--sub-color);
}
}
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&:hover {
color: var(--text-color);
}
&:focus {
color: var(--text-color);
outline: none;
}
&:active {
color: var(--sub-color);
}
}

130
frontend/src/styles/core.scss
View file

@ -89,10 +89,6 @@ a[router-link] * {
pointer-events: none;
}
a.button {
text-decoration: none;
}
body {
margin: 0;
padding: 0;
@ -296,132 +292,6 @@ key {
pointer-events: none !important;
}
.button {
color: var(--text-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5em;
border-radius: var(--roundness);
background: var(--sub-alt-color);
text-align: center;
-webkit-user-select: none;
user-select: none;
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
&.active {
background: var(--main-color);
color: var(--bg-color);
&:hover {
background: var(--text-color);
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&:hover {
color: var(--bg-color);
background: var(--text-color);
outline: none;
}
&:focus-visible {
box-shadow: 0 0 0 0.15em var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
.textButton {
color: var(--sub-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5em;
border-radius: var(--roundness);
text-align: center;
-webkit-user-select: none;
user-select: none;
align-content: center;
height: -moz-min-content;
height: min-content;
line-height: 1.25em;
appearance: none;
border: none;
font-family: inherit;
font-size: 1em;
width: -moz-max-content;
width: max-content;
display: grid;
grid-auto-flow: column;
gap: 0.25em;
text-decoration: none;
.fas,
.far {
display: grid;
place-content: center center;
}
&.active {
color: var(--main-color);
&:hover {
color: var(--text-color);
}
&:active {
color: var(--sub-color);
}
}
&.disabled {
opacity: 0.33;
cursor: default;
pointer-events: none;
&:hover {
background: var(--text-color);
outline: none;
}
&:active {
background: var(--sub-color);
color: var(--bg-color);
}
}
&:hover {
color: var(--text-color);
}
&:focus {
color: var(--text-color);
outline: none;
}
&:active {
color: var(--sub-color);
}
}
.scrollToTopButton {
bottom: 2rem;
right: 2rem;

8
frontend/src/styles/index.scss
View file

@ -1,4 +1,4 @@
@import "normalize.css", "fonts", "404", "ads", "about", "account", "animations",
"banners", "caret", "commandline", "core", "footer", "inputs", "keymap",
"leaderboards", "login", "monkey", "nav", "notifications", "popups", "profile",
"scroll", "settings", "test", "z_media-queries";
@import "normalize.css", "buttons", "fonts", "404", "ads", "about", "account",
"animations", "banners", "caret", "commandline", "core", "footer", "inputs",
"keymap", "leaderboards", "login", "monkey", "nav", "notifications", "popups",
"profile", "scroll", "settings", "test", "z_media-queries";