mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
select dates text integration colors
This commit is contained in:
tykayn
parent
56397d5a2c
commit
f26a6d7826
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
80
src/styles/partials/_datepicker.scss
Normal file
80
src/styles/partials/_datepicker.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user