butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Styling tweaks for channel polls

Browse source
This commit is contained in:
N-Pex 2024-11-04 13:06:25 +01:00
parent e31ea61c97
commit 867696af86
3 changed files with 38 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/assets/css/channel.scss
View file

@ -124,8 +124,17 @@
} }
} }
.poll-bubble svg {
color: black;
}
.poll-answer { .poll-answer {
border-radius: 10px;
&.selected {
font-weight: 500;
}
}
.poll-check-icon {
display: none;
} }
.messageOut.pinned, .messageOut.pinned,

3
src/assets/css/components/_poll.scss
View file

@ -37,7 +37,7 @@
border-radius: 4px; border-radius: 4px;
padding: 15px 14px; padding: 15px 14px;
margin: 0px; margin: 0px;
height: $min-touch-target; min-height: $min-touch-target;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@ -165,6 +165,7 @@
color: white; color: white;
text-transform: uppercase; text-transform: uppercase;
height: 42px; height: 42px;
min-width: 132px;
} }
.poll-disclose { .poll-disclose {

56
src/components/InputControl.vue
View file

@ -1,21 +1,18 @@
<template> <template>
<div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }"> <div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }">
<input <div class="input-wrapper">
ref="input" <input ref="input" type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
type="text" v-on:blur="onBlur" />
:value="modelValue" <div class="slot">
@input="$emit('update:modelValue', $event.target.value)" <slot></slot>
v-on:blur="onBlur" </div>
/> </div>
<div class="placeholder-container"> <div class="placeholder-container">
<div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }"> <div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }">
{{ label }} {{ label }}
</div> </div>
<div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div> <div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div>
</div> </div>
<div class="slot">
<slot></slot>
</div>
</div> </div>
</template> </template>
@ -29,25 +26,25 @@ export default {
props: { props: {
label: { label: {
type: String, type: String,
default: function() { default: function () {
return ""; return "";
}, },
}, },
error: { error: {
type: String, type: String,
default: function() { default: function () {
return ""; return "";
}, },
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: function() { default: function () {
return false; return false;
}, },
}, },
modelValue: { modelValue: {
type: String, type: String,
default: function() { default: function () {
return null; return null;
}, },
}, },
@ -73,12 +70,20 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
position: relative; position: relative;
min-height: $min-touch-target; min-height: 58px;
background: #f5f5f5; background: #f5f5f5;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.4s, box-shadow 0.4s; transition: background-color 0.4s, box-shadow 0.4s;
margin-bottom: 12px; margin-bottom: 12px;
.input-wrapper {
width: 100%;
display: flex;
flex-direction: row;
padding: 22px 16px 0px 16px;
}
&.errored { &.errored {
border: 1px solid #e31b00; border: 1px solid #e31b00;
} }
@ -95,6 +100,7 @@ export default {
right: 16px; right: 16px;
display: flex; display: flex;
} }
.placeholder { .placeholder {
text-align: start; text-align: start;
font-family: "Inter"; font-family: "Inter";
@ -122,10 +128,11 @@ export default {
position: absolute; position: absolute;
left: 0px; left: 0px;
right: 0px; right: 0px;
top: 14px; top: 20px;
font-size: 16px; font-size: 16px;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
margin-right: 0px; margin-right: 0px;
&:only-child { &:only-child {
top: 8px; top: 8px;
} }
@ -139,16 +146,12 @@ export default {
line-height: 117%; line-height: 117%;
letter-spacing: 0.4px; letter-spacing: 0.4px;
color: #000000; color: #000000;
position: absolute; flex: 1 1 100%;
top: 20px;
left: 16px;
right: 16px;
bottom: 0;
width: 100%;
&:focus { &:focus {
top: 20px; top: 20px;
} }
&:focus, &:focus,
&:focus-visible { &:focus-visible {
border: none; border: none;
@ -157,14 +160,7 @@ export default {
} }
.slot { .slot {
position: absolute; flex: 0 0 auto;
right: 16px;
align-self: center;
[dir="rtl"] & {
left: 16px;
right: unset;
}
} }
} }
</style> </style>