select dates text integration colors

This commit is contained in:
Tykayn 2021-11-18 11:22:44 +01:00 committed by tykayn
parent 56397d5a2c
commit f26a6d7826
6 changed files with 162 additions and 95 deletions

View File

@ -2,7 +2,8 @@
<div class="columns">
<div class="column">
<!-- ajouter une date-->
<button class="btn btn--primary" (click)="addChoice()">
<button class="button is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
{{ 'dates.add' | translate }}
</button>
</div>
@ -21,12 +22,23 @@
cdkDrag
[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
>
<span class="button is-default">
<i class="icon fa fa-arrows-v"></i>
<span *ngIf="choice.date_object">
{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
</span>
</span>
<!-- <span class="button is-default">-->
<!-- <i class="icon fa fa-arrows-v"></i>-->
<!-- <span *ngIf="choice.date_object">-->
<!-- {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
<!-- </span>-->
<!-- </span>-->
<div class="columns">
<div class="column">
<label for="dateChoices_{{ id }}">
Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
</label>
</div>
<div class="column has-text-right">
<span class="format-helper">JJ/MM/AAAA</span>
</div>
</div>
<input
[(ngModel)]="choice.date_input"
class="date-choice-item"
@ -34,16 +46,16 @@
id="dateChoices_{{ id }}"
type="date"
/>
<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<br />
<hr />
<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer la date
</div>
<div *ngIf="hasSeveralHours" class="several-times">
<br />
<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
<div class="text-right">
<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
<button (click)="addTimeToDate(choice, id)" class="button is-primary">
<i class="fa fa-plus"></i>
{{ 'dates.add_time' | translate }}
<i class="fa fa-clock-o"></i>

View File

@ -1,26 +1,70 @@
@import '../../../../../../../styles/variables';
.day-weekend {
background: #dccfed;
}
.button {
min-width: 9ch;
}
.icon {
margin-right: 1ch;
margin-left: 1ch;
display: inline-block;
}
.several-times {
padding-left: 2em;
width: 96.5%;
}
.date-choice {
&:nth-child(odd) {
background: #fbf8ff;
&.day-weekend {
background: #d7cae9;
margin-bottom: 0.5em;
border-radius: 0.25em;
background: $bg-grey;
.columns {
margin-bottom: 0;
}
label {
font-weight: 600;
}
input,
.button {
width: 100%;
display: block;
}
hr {
margin: 0.5em -1em;
background: $rules;
}
//&.day-weekend {
// background: mix($legend_color_2, $grey-lighter);
//}
//&:nth-child(odd) {
// background: $grey-lighter;
//
// &.day-weekend {
// background: mix($d-neutral, $grey-lighter);
// }
//}
}
.date-choice-item {
width: 75%;
}
.button .fa {
margin-left: 1ch;
display: inline-block;
}
.delete-date {
color: $secondary_color !important;
.fa {
color: $secondary_color !important;
}
}

View File

@ -12,7 +12,7 @@ export class StepThreeComponent implements OnInit {
step_max: any;
@Input()
form: any;
public mode_calendar = true;
public mode_calendar = false;
constructor(public pollService: PollService) {
this.pollService.step_current = 3;

View File

@ -0,0 +1,80 @@
// calendar primeng
.p-datepicker {
border: solid 1px $logo_color;
padding: 0.5em;
margin: 1em auto;
.p-datepicker-title,
.p-datepicker-calendar thead tr th span {
color: $secondary_color !important;
text-align: center;
width: 100%;
display: block;
}
p-button,
button {
border: solid 1px $secondary_color !important;
color: $secondary_color !important;
}
.p-datepicker-buttonbar {
margin-top: 0.5em;
}
.p-datepicker-month {
margin-right: 1em;
}
.p-datepicker-weeknumber span {
border-right: 1px solid $secondary_color;
}
.p-datepicker-today span {
font-weight: bold;
border: solid 3px $secondary_color !important;
background: $white;
}
.p-datepicker-calendar td span {
padding: 1.5em 0.5em;
width: 3.5em;
transition: all ease 0.5s;
background: $white;
border: solid 1px $secondary_color;
color: $secondary_color;
&:hover {
background: mix($white, $secondary_color);
color: $white;
transition: all ease 0.2s;
}
}
table td > span {
border-radius: 0.25em;
}
.p-highlight {
background: $secondary_color !important;
color: $white !important;
}
.p-disabled {
background: $d-grey;
color: $grey;
}
.p-datepicker-other-month {
color: white;
}
// weekend days
tr > td {
&:nth-of-type(6),
&:nth-of-type(7) {
//border-left: 1px solid $border-color;
background: $bg-grey;
}
}
}

View File

@ -1,4 +1,7 @@
@charset "UTF-8";
@import 'datepicker';
.input:hover,
input:hover,
select:hover,
@ -265,81 +268,6 @@ mat-checkbox {
padding: 1em;
}
// calendar primeng
.p-datepicker {
border: solid 1px $logo_color;
padding: 0.5em;
margin: 1em auto;
.p-datepicker-title,
.p-datepicker-calendar thead tr th span {
color: $secondary_color !important;
text-align: center;
width: 100%;
display: block;
}
p-button,
button {
border: solid 1px $secondary_color !important;
color: $secondary_color !important;
}
.p-datepicker-buttonbar {
margin-top: 0.5em;
}
.p-datepicker-month {
margin-right: 1em;
}
.p-datepicker-weeknumber span {
border-right: 1px solid $secondary_color;
}
.p-datepicker-today span {
font-weight: bold;
border: solid 3px $secondary_color !important;
background: $white;
}
.p-datepicker-calendar td span {
padding: 1.5em 0.5em;
width: 3.5em;
transition: all ease 0.5s;
background: $white;
border: solid 1px $secondary_color;
color: $secondary_color;
&:hover {
background: mix($white, $secondary_color);
color: $white;
transition: all ease 0.2s;
}
}
table td > span {
border-radius: 0.25em;
}
.p-highlight {
background: $secondary_color !important;
color: $white !important;
}
.p-disabled {
background: $d-grey;
color: $grey;
}
.p-datepicker-other-month {
color: white;
}
// weekend days
tr > td {
&:nth-of-type(6),
&:nth-of-type(7) {
//border-left: 1px solid $border-color;
background: $grey-lighter;
}
}
}
.advanced-config {
.box {
background: $light;

View File

@ -25,7 +25,8 @@ $beige-lighter: #eff0eb;
$d-primary: #3e3882; // bleu 800
$d-primary-intense: #6359cf; // bleu 600
$d-grey: #f6f5fd;
$d-grey: #f6f5fd; // bleu 300
$d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486;
$d-alt: #a9607f;
@ -42,6 +43,7 @@ $d-error-text: #d51b38;
$primary_color: $d-primary;
$primary: $d-primary;
$secondary_color: $d-primary-intense;
$bg-grey: $d-grey;
$font_color: $black;
$logo_color: $d-primary;
$logo_color_2: $d-primary-intense;
@ -49,6 +51,7 @@ $legend_color: $d-info-text;
$legend_color_2: $d-info;
$choice_select_border_color: $d-info;
$hover-color: $d-neutral;
$rules: $d-rule;
$border-color: $d-neutral;
$grey-dark: $d-primary;
$grey-lighter: $beige-light;