161sh/trashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/trashposs synced 2024-11-22 17:03:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

button styling

Browse Source
This commit is contained in:
Freeplay 2023-05-31 16:28:07 -04:00
parent f56136f680
commit 87967b5662
3 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/client/src/components/MkInfo.vue
View File

@ -10,7 +10,7 @@
<button
v-if="closeable"
v-tooltip="i18n.ts.close"
class="_button close"
class="_buttonIcon close"
@click.stop="close"
>
<i class="ph-x ph-bold ph-lg"></i>
@ -48,6 +48,9 @@ function close() {
background: var(--infoBg);
color: var(--infoFg);
border-radius: var(--radius);
display: flex;
align-items: center;
gap: .4em;
&.warn {
background: var(--infoWarnBg);
@ -55,6 +58,7 @@ function close() {
}
&.card {
display: inline;
background: var(--panel);
color: var(--fg);
padding: 48px;

24
packages/client/src/components/global/MkPageHeader.vue
View File

@ -11,7 +11,7 @@
<div class="buttons">
<button
v-if="props.displayBackButton"
class="_button button icon backButton"
class="_buttonIcon button icon backButton"
@click.stop="goBack()"
@touchstart="preventDrag"
v-tooltip.noDelay="i18n.ts.goBack"
@ -110,7 +110,7 @@
<template v-for="action in actions">
<button
v-tooltip.noDelay="action.text"
class="_button button"
class="_buttonIcon button"
:class="{ highlighted: action.highlighted }"
@click.stop="action.handler"
@touchstart="preventDrag"
@ -393,26 +393,6 @@ onUnmounted(() => {
}
}
> .button/*, @at-root .backButton*/ {
/* I don't know how to get this to work */
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--height) - (var(--margin) * 2));
width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box;
position: relative;
border-radius: 5px;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&.highlighted {
color: var(--accent);
}
}
> .fullButton {
& + .fullButton {
margin-left: 12px;

30
packages/client/src/style.scss
View File

@ -219,6 +219,36 @@ hr {
}
}
._buttonIcon {
@extend ._button;
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--height) - (var(--margin) * 2));
height: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box;
position: relative;
border-radius: 5px;
&::before {
content: "";
position: absolute;
width: 2.7em;
height: 2.7em;
border-radius: inherit;
transition: background 0.2s;
}
&:hover:before {
// background: rgba(0, 0, 0, 0.05);
background: var(--buttonBg);
}
&.highlighted::before {
color: var(--accent);
}
}
._buttonPrimary {
@extend ._button;
color: var(--fgOnAccent);