funky-framadate-front/src/app/pages/voting/voting-choice/voting-choice.component.scss

277 lines
5.5 KiB
SCSS

// ---------------------------------------------------------
// -- VOTE CHOICE COMPONENT
// ---------------------------------------------------------
// -- IMPORTS
// ----------------------------
@import "../../../../assets/scss/variables";
// -- VARIABLES
// ----------------------------
$box-padding: 2rem;
$box-border-width: .6rem;
$btn-size: 5rem;
$btn-margin-x: 1rem;
$btn-margin-y: 1.5rem;
$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
$img-maxheight: 12rem;
$breakpoint-responsive: 640px; // à définir
// -- GLOBAL
// ----------------------------
.choicebox {
position: relative;
min-width: 32rem;
min-height: 16rem;
display: block;
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent;
background-color: $white;
box-shadow: 0 0 .6rem 0 rgba($black, .2);
&--active {
padding-left: $box-padding;
border-left-color: $primary_color;
}
&.selection-yes {
font-weight: 700;
background: #e9bdeb;
}
@media (min-width: $breakpoint-responsive) {
align-items: center;
justify-content: space-between;
min-height: auto;
}
.title {
max-width: 25%;
}
}
.choicebox__subject {
margin-bottom: 3rem;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
padding-right: 0;
}
}
// -- DATE
// ----------------------------
.choicebox__date {
font-size: 1.8rem;
margin-bottom: .5rem;
white-space: nowrap;
text-transform: capitalize;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
}
}
.choicebox__day {
font-size: 2.4rem;
font-weight: bold;
}
// -- IMG
// ----------------------------
.choicebox__img {
max-width: 100%;
max-height: $img-maxheight;
}
// -- TXT
// ----------------------------
.choicebox__txt {
margin: 0;
font-size: 1.8rem;
min-width: 10em;
}
// -- VOTE BTNS
// ----------------------------
.choicebox__actions {
position: absolute;
z-index: 1;
max-width: $btn-wrap-size;
top: 50%;
right: $box-padding;
@media (min-width: $breakpoint-responsive) {
position: static;
max-width: none;
transform: none;
margin: 0 1.5rem;
}
}
.choicebox__btn {
width: $btn-size;
height: $btn-size;
align-items: center;
justify-content: center;
margin: $btn-margin-y $btn-margin-x;
border: .3rem solid #ccc9c9;
background-color: transparent;
border-radius: 50%;
cursor: pointer;
float: left;
&--maybe {
position: relative;
top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2);
@media (min-width: $breakpoint-responsive) {
top: auto;
left: auto;
}
}
&--active {
border-color: #bf83c2;
}
@media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
}
// -- VOTE COUNT
// ----------------------------
.choicebox__count {
position: relative;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
text-align: right;
padding-right: 0;
}
}
.choicebox__votes {
border: 0;
padding: 0;
line-height: normal;
background-color: transparent;
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
}
}
.choicebox__vote {
display: inline-block;
vertical-align: middle;
& + .choicebox__vote {
margin-left: 1.5rem;
}
}
.choicebox__countxt {
display: none;
margin-top: .5rem;
.choicebox--active & {
display: block;
@media (min-width: $breakpoint-responsive) {
display: none;
}
}
}
// -- TOOLTIP
// ----------------------------
.choicebox__tooltip {
display: none;
@media (min-width: $breakpoint-responsive) {
position: absolute;
min-width: 18rem;
font-weight: normal;
top: 5rem;
left: 50%;
z-index: 1;
padding: 2rem;
border: .1rem solid rgba($black, .1);
background-color: $white;
text-align: left;
transform: translateX(-50%);
&::after,
&::before {
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 50%;
content: " ";
pointer-events: none;
border: solid transparent;
}
&::after {
margin-left: -1.5rem;
border-width: 1.5rem;
border-color: rgba($white, 0);
border-bottom-color: #fff;
}
&::before {
margin-left: -1.6rem;
border-width: 1.6rem;
border-color: rgba($black, 0);
border-bottom-color: rgba($black, .1);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
}
.choicebox__tooltiplist {
& + .choicebox__tooltiplist {
padding-left: 3rem;
}
ul {
max-height: 11rem;
overflow: auto;
}
}
.choicebox__tooltipttl {
@media (min-width: $breakpoint-responsive) {
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: bold;
white-space: nowrap;
img {
margin-right: .5rem;
vertical-align: sub;
}
& ~ .choicebox__tooltipttl {
margin-top: 3rem;
}
}
}