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

Resolve "Polling: Updated poll admin UX"

Browse source
This commit is contained in:
N Pex 2022-06-08 18:53:50 +00:00 • committed by n8fr8
parent 90daf060cc
commit 4f6238bc59
11 changed files with 1531 additions and 1111 deletions
Download patch file Download diff file Expand all files Collapse all files

1880
src/assets/css/chat.scss
View file

File diff suppressed because it is too large Load diff

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

@ -1,5 +1,6 @@
.poll-bubble {
width: 70%;
text-align: start;
}
.poll-bubble {
@ -36,6 +37,7 @@
border-radius: 4px;
padding: 15px 14px;
margin: 0px;
height: 48px;
&.winner {
font-weight: 700;
}
@ -77,40 +79,190 @@
.poll-status {
justify-content: space-between;
align-items: flex-start;
font-size: 13px;
line-height: 117%;
margin: 0px;
margin: 17px 0px 0px 0px;
.poll-status-title {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 117%;
display: flex;
align-items: center;
letter-spacing: 0.4px;
color: #1d1d1d;
opacity: 0.8;
.from-admin & {
color: white;
}
}
.poll-status-close {
color: $poll-hilite-color;
background: transparent;
border: 1px solid #000000;
border-radius: 32px;
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 133%;
letter-spacing: 0.34px;
text-transform: uppercase;
color: #181719;
padding: 7px 14px;
text-align: center;
}
.poll-status-closed {
background: white;
border-radius: 32px;
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 133%;
letter-spacing: 0.34px;
text-transform: uppercase;
color: #181719;
padding: 7px 14px;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 9px;
height: 8px;
margin-right: 3px;
}
}
}
.poll-submit {
.v-btn {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 11 * $chat-text-size;
color: white;
text-transform: uppercase;
background-color: $poll-hilite-color !important;
border: 1px solid black;
border-radius: 21px !important;
height: 42px !important;
margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-xs;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
border-radius: 32px;
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-size: 11.5411px;
line-height: 140%;
text-align: center;
letter-spacing: 0.34px;
text-transform: uppercase;
color: #ffffff;
padding: 14px 18px;
color: white;
text-transform: uppercase;
height: 42px;
}
.poll-disclose {
height: 18px;
margin: 0;
padding: 0;
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 100%;
display: flex;
align-items: center;
letter-spacing: 0.4px;
color: #1d1d1d;
opacity: 0.8;
.poll-disclose-track {
position: relative;
width: 30px;
height: 18px;
background: #ededed;
border-radius: 16px;
transform: rotate(180deg);
margin-left: 8px;
transition: background-color 0.3s linear;
.poll-disclose-knob {
position: absolute;
background: #ffffff;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);
border-radius: 16px;
transform: rotate(180deg);
width: 16px;
right: 1px;
top: 1px;
bottom: 1px;
transition: right 0.3s linear;
}
}
&.selected .poll-disclose-track {
background: #1d1d1d;
.poll-disclose-knob {
right: 13px;
}
}
}
// Creation dialog
//
.poll-create-dialog-content {
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
}
.poll-create-status {
font-size: 0.7rem;
.poll-create {
.poll-create-dialog-content {
overflow-x: hidden;
overflow-y: auto;
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 117%;
letter-spacing: 0.4px;
color: rgba(0, 0, 0, 0.7);
.add-answer-button {
border-radius: 4px;
height: 48px;
width: 100%;
overflow: hidden;
border: 1px solid #242424;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 1s linear, height 0.3s linear;
&.hidden {
opacity: 0;
height: 0;
transition: opacity 0s linear, height 0s linear;
}
img {
width: 14.88px;
height: 14.88px;
object-fit: contain;
}
}
}
.filled-button.publish-button {
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe !important;
padding-left: 30px;
padding-right: 30px;
height: 42px !important;
border-radius: 32px;
}
.tip {
font-family: "Inter";
font-style: normal;
font-size: 13px;
line-height: 117%;
letter-spacing: 0.4px;
color: #1d1d1d;
opacity: 0.8;
text-align: left;
b {
margin-right: 4px;
}
}
.poll-create-status {
font-size: 0.7rem;
}
}