natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

button styling

This commit is contained in:
Freeplay 2023-05-31 16:28:07 -04:00
parent 38b92b7aee
commit 3443e5d649
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 <button
v-if="closeable" v-if="closeable"
v-tooltip="i18n.ts.close" v-tooltip="i18n.ts.close"
class="_button close" class="_buttonIcon close"
@click.stop="close" @click.stop="close"
> >
<i class="ph-x ph-bold ph-lg"></i> <i class="ph-x ph-bold ph-lg"></i>
@ -48,6 +48,9 @@ function close() {
background: var(--infoBg); background: var(--infoBg);
color: var(--infoFg); color: var(--infoFg);
border-radius: var(--radius); border-radius: var(--radius);
display: flex;
align-items: center;
gap: .4em;
&.warn { &.warn {
background: var(--infoWarnBg); background: var(--infoWarnBg);
@ -55,6 +58,7 @@ function close() {
} }
&.card { &.card {
display: inline;
background: var(--panel); background: var(--panel);
color: var(--fg); color: var(--fg);
padding: 48px; padding: 48px;

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

@ -11,7 +11,7 @@
<div class="buttons"> <div class="buttons">
<button <button
v-if="props.displayBackButton" v-if="props.displayBackButton"
class="_button button icon backButton" class="_buttonIcon button icon backButton"
@click.stop="goBack()" @click.stop="goBack()"
@touchstart="preventDrag" @touchstart="preventDrag"
v-tooltip.noDelay="i18n.ts.goBack" v-tooltip.noDelay="i18n.ts.goBack"
@ -110,7 +110,7 @@
<template v-for="action in actions"> <template v-for="action in actions">
<button <button
v-tooltip.noDelay="action.text" v-tooltip.noDelay="action.text"
class="_button button" class="_buttonIcon button"
:class="{ highlighted: action.highlighted }" :class="{ highlighted: action.highlighted }"
@click.stop="action.handler" @click.stop="action.handler"
@touchstart="preventDrag" @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 {
& + .fullButton { & + .fullButton {
margin-left: 12px; 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 { ._buttonPrimary {
@extend ._button; @extend ._button;
color: var(--fgOnAccent); color: var(--fgOnAccent);