83 lines
1.5 KiB
SCSS
83 lines
1.5 KiB
SCSS
@import "../../stylesheets/variables/_all";
|
|
|
|
$poll-width: 18rem;
|
|
$max-btn-width: 9em;
|
|
$col-amount: 2;
|
|
|
|
// pollingAnswer position offsets
|
|
$xs-portrait-offset: 8.75em;
|
|
$xs-landscape-offset: 4.75em;
|
|
$s-portrait-offset: 11.75em;
|
|
$s-landscape-offset: 1.75em;
|
|
|
|
.pollingContainer {
|
|
width: $poll-width;
|
|
position: absolute;
|
|
z-index: 1015;
|
|
border: 1px solid $color-off-white;
|
|
border-radius: $border-radius;
|
|
////
|
|
box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.25);
|
|
align-items: center;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
padding: $md-padding-y;
|
|
background-color: $color-white;
|
|
bottom: $sm-padding-x;
|
|
right: $sm-padding-x;
|
|
}
|
|
|
|
.pollingTitle {
|
|
color: $color-text;
|
|
white-space: nowrap;
|
|
padding-bottom: $md-padding-y;
|
|
padding-top: $md-padding-y;
|
|
}
|
|
|
|
.pollingAnswers {
|
|
display: grid;
|
|
grid-template-columns: repeat($col-amount, 1fr);
|
|
|
|
> pollButtonWrapper:nth-child(odd) {
|
|
grid-column: 1;
|
|
}
|
|
|
|
> pollButtonWrapper:nth-child(even) {
|
|
grid-column: $col-amount;
|
|
}
|
|
|
|
z-index: 1;
|
|
|
|
:global(.browser-safari) & {
|
|
@include mq($ip5-portrait) {
|
|
bottom: $xs-portrait-offset;
|
|
}
|
|
@include mq($ip678-portrait) {
|
|
bottom: $s-portrait-offset;
|
|
}
|
|
@include mq($ip5-landscape) {
|
|
bottom: $xs-landscape-offset;
|
|
}
|
|
@include mq($ip678-landscape) {
|
|
bottom: $s-landscape-offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pollButtonWrapper {
|
|
text-align: center;
|
|
padding: $sm-padding-y;
|
|
}
|
|
|
|
.pollingButton {
|
|
width: 100%;
|
|
max-width: $max-btn-width;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|