diff --git a/src/assets/css/channel.scss b/src/assets/css/channel.scss index ef96e9e..366ff80 100644 --- a/src/assets/css/channel.scss +++ b/src/assets/css/channel.scss @@ -124,8 +124,17 @@ } } + .poll-bubble svg { + color: black; + } .poll-answer { - border-radius: 10px; + + &.selected { + font-weight: 500; + } + } + .poll-check-icon { + display: none; } .messageOut.pinned, diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss index 4715902..9541f2f 100644 --- a/src/assets/css/components/_poll.scss +++ b/src/assets/css/components/_poll.scss @@ -37,7 +37,7 @@ border-radius: 4px; padding: 15px 14px; margin: 0px; - height: $min-touch-target; + min-height: $min-touch-target; &:hover { cursor: pointer; } @@ -165,6 +165,7 @@ color: white; text-transform: uppercase; height: 42px; + min-width: 132px; } .poll-disclose { diff --git a/src/components/InputControl.vue b/src/components/InputControl.vue index fb74749..539831c 100644 --- a/src/components/InputControl.vue +++ b/src/components/InputControl.vue @@ -1,21 +1,18 @@ @@ -29,25 +26,25 @@ export default { props: { label: { type: String, - default: function() { + default: function () { return ""; }, }, error: { type: String, - default: function() { + default: function () { return ""; }, }, disabled: { type: Boolean, - default: function() { + default: function () { return false; }, }, modelValue: { type: String, - default: function() { + default: function () { return null; }, }, @@ -73,12 +70,20 @@ export default { width: 100%; display: flex; position: relative; - min-height: $min-touch-target; + min-height: 58px; background: #f5f5f5; border-radius: 4px; transition: background-color 0.4s, box-shadow 0.4s; margin-bottom: 12px; + + .input-wrapper { + width: 100%; + display: flex; + flex-direction: row; + padding: 22px 16px 0px 16px; + } + &.errored { border: 1px solid #e31b00; } @@ -95,6 +100,7 @@ export default { right: 16px; display: flex; } + .placeholder { text-align: start; font-family: "Inter"; @@ -122,10 +128,11 @@ export default { position: absolute; left: 0px; right: 0px; - top: 14px; + top: 20px; font-size: 16px; color: rgba(0, 0, 0, 0.7); margin-right: 0px; + &:only-child { top: 8px; } @@ -139,16 +146,12 @@ export default { line-height: 117%; letter-spacing: 0.4px; color: #000000; - position: absolute; - top: 20px; - left: 16px; - right: 16px; - bottom: 0; - width: 100%; + flex: 1 1 100%; &:focus { top: 20px; } + &:focus, &:focus-visible { border: none; @@ -157,14 +160,7 @@ export default { } .slot { - position: absolute; - right: 16px; - align-self: center; - - [dir="rtl"] & { - left: 16px; - right: unset; - } + flex: 0 0 auto; } }