chore(client): tweak style
This commit is contained in:
parent
a50b1d69a1
commit
d7e7152bd3
3 changed files with 12 additions and 11 deletions
|
@ -7,7 +7,8 @@
|
||||||
:aria-disabled="disabled"
|
:aria-disabled="disabled"
|
||||||
@click="toggle"
|
@click="toggle"
|
||||||
>
|
>
|
||||||
<input type="radio"
|
<input
|
||||||
|
type="radio"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
>
|
>
|
||||||
<span class="button">
|
<span class="button">
|
||||||
|
@ -23,27 +24,27 @@ import { defineComponent } from 'vue';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
modelValue: {
|
modelValue: {
|
||||||
required: false
|
required: false,
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
required: false
|
required: false,
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
checked(): boolean {
|
checked(): boolean {
|
||||||
return this.modelValue === this.value;
|
return this.modelValue === this.value;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggle() {
|
toggle() {
|
||||||
if (this.disabled) return;
|
if (this.disabled) return;
|
||||||
this.$emit('update:modelValue', this.value);
|
this.$emit('update:modelValue', this.value);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -53,7 +54,7 @@ export default defineComponent({
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 10px 12px;
|
padding: 9px 12px;
|
||||||
background-color: var(--panel);
|
background-color: var(--panel);
|
||||||
background-clip: padding-box !important;
|
background-clip: padding-box !important;
|
||||||
border: solid 1px var(--panel);
|
border: solid 1px var(--panel);
|
||||||
|
|
|
@ -181,7 +181,7 @@ onUnmounted(() => {
|
||||||
border-bottom: solid 0.5px var(--divider);
|
border-bottom: solid 0.5px var(--divider);
|
||||||
|
|
||||||
&.thin {
|
&.thin {
|
||||||
--height: 50px;
|
--height: 45px;
|
||||||
|
|
||||||
> .buttons {
|
> .buttons {
|
||||||
> .button {
|
> .button {
|
||||||
|
|
|
@ -408,7 +408,7 @@ export default defineComponent({
|
||||||
background: var(--windowHeader);
|
background: var(--windowHeader);
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-bottom: solid 1px var(--divider);
|
//border-bottom: solid 1px var(--divider);
|
||||||
font-size: 95%;
|
font-size: 95%;
|
||||||
|
|
||||||
> .left, > .right {
|
> .left, > .right {
|
||||||
|
|
Loading…
Reference in a new issue