funky-framadate-front/src/app/vote-choice/vote-choice.component.scss

289 lines
5.8 KiB
SCSS
Raw Normal View History

2019-10-17 21:56:59 +02:00
// ---------------------------------------------------------
// -- VOTE CHOICE COMPONENT
// ---------------------------------------------------------
// -- IMPORTS
// ----------------------------
@import "../../assets/scss/variables";
// -- VARIABLES
// ----------------------------
2019-10-23 18:08:35 +02:00
$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;
2019-10-23 18:08:35 +02:00
$breakpoint-responsive : 640px; // à définir
2019-10-17 21:56:59 +02:00
// -- GLOBAL
// ----------------------------
.choicebox {
position: relative;
min-width: 32rem;
min-height: 16rem;
2019-10-17 21:56:59 +02:00
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent;
background-color: $white;
2019-10-23 18:08:35 +02:00
box-shadow: 0 0 .6rem 0 rgba($black, .2);
2019-10-17 21:56:59 +02:00
&--active {
padding-left: $box-padding;
border-left-color: $primary_color;
}
@media (min-width: $breakpoint-responsive) {
display: flex;
align-items: center;
justify-content: space-between;
min-height: auto;
2019-10-17 21:56:59 +02:00
}
2019-10-01 18:59:14 +02:00
}
2019-10-03 11:52:26 +02:00
.choicebox__subject {
2019-10-17 21:56:59 +02:00
margin-bottom: 3rem;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
padding-right: 0;
}
2019-10-01 18:59:14 +02:00
}
// -- DATE
// ----------------------------
2019-10-17 21:56:59 +02:00
.choicebox__date {
font-size: 1.8rem;
2019-10-17 21:56:59 +02:00
margin-bottom: .5rem;
white-space: nowrap;
text-transform: capitalize;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
}
2019-10-01 18:59:14 +02:00
}
2019-10-17 21:56:59 +02:00
.choicebox__day {
font-size: 2.4rem;
font-weight: bold;
2019-10-01 18:59:14 +02:00
}
2019-10-01 18:59:14 +02:00
2019-10-17 21:56:59 +02:00
// -- IMG
// ----------------------------
.choicebox__img {
max-width: 100%;
max-height: $img-maxheight;
}
// -- TXT
// ----------------------------
.choicebox__txt {
margin: 0;
font-size: 1.8rem;
}
2019-10-17 21:56:59 +02:00
// -- VOTE BTNS
// ----------------------------
.choicebox__actions {
position: absolute;
2019-10-23 18:08:35 +02:00
z-index: 1;
2019-10-17 21:56:59 +02:00
display: flex;
max-width: $btn-wrap-size;
top: 50%;
right: $box-padding;
flex-flow: row-reverse wrap;
transform: translateY(-50%);
@media (min-width: $breakpoint-responsive) {
position: static;
max-width: none;
flex-flow: row nowrap;
transform: none;
margin: 0 1.5rem;
2019-10-17 21:56:59 +02:00
}
2019-10-01 18:59:14 +02:00
}
2019-10-17 21:56:59 +02:00
.choicebox__btn {
display: flex;
width: $btn-size;
height: $btn-size;
align-items: center;
justify-content: center;
margin: $btn-margin-y $btn-margin-x;
border: .1rem solid $primary_color;
2019-10-24 20:16:14 +02:00
background-color: transparent;
2019-10-17 21:56:59 +02:00
border-radius: 50%;
@media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
&:focus,
&:hover,
&:active {
border-color: #ccc9c9;
background-color: #f7f7f7;
}
&--maybe {
position: relative;
top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 );
@media (min-width: $breakpoint-responsive) {
top: auto;
left: auto;
}
}
&--active {
border-width: .3rem;
border-color: #bf83c2;
}
2019-10-03 18:36:06 +02:00
}
2019-10-17 21:56:59 +02:00
// -- VOTE COUNT
// ----------------------------
.choicebox__count {
2019-10-23 18:08:35 +02:00
position: relative;
2019-10-17 21:56:59 +02:00
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
flex-shrink: 0;
2019-10-23 18:08:35 +02:00
text-align: right;
2019-10-17 21:56:59 +02:00
padding-right: 0;
}
2019-10-03 18:36:06 +02:00
}
2019-10-17 21:56:59 +02:00
2019-10-23 18:08:35 +02:00
.choicebox__votes {
border: 0;
padding: 0;
line-height: normal;
2019-10-24 20:16:14 +02:00
background-color: transparent;
2019-10-23 18:08:35 +02:00
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
&:focus,
&:hover,
&:active {
& .choicebox__tooltip {
display: flex;
}
}
}
}
2019-10-17 21:56:59 +02:00
.choicebox__vote {
display: inline-block;
vertical-align: middle;
2019-10-23 18:08:35 +02:00
& + .choicebox__vote {
margin-left: 1.5rem;
}
2019-10-03 18:36:06 +02:00
}
2019-10-17 21:56:59 +02:00
.choicebox__countxt {
display: none;
margin-top: .5rem;
.choicebox--active & {
display: block;
2019-10-23 18:08:35 +02:00
@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;
2019-10-17 21:56:59 +02:00
}
2019-10-23 18:08:35 +02:00
ul {
2019-10-24 20:16:14 +02:00
max-height: 11rem;
overflow: auto;
2019-10-23 18:08:35 +02:00
}
}
.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;
}
}
}