tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

uniform titles

Browse Source
This commit is contained in:
Tykayn 2022-03-10 11:06:18 +01:00 committed by tykayn
parent 874b9cdf16
commit 8998ee2d9e
30 changed files with 256 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/home/home.component.html
View File

@ -85,7 +85,7 @@
<div class="top"> <div class="top">
<button <button
id="close_dialog" id="close_dialog"
class="no-outline cancel-button-reject pull-right has-no-border" class="no-outline cancel-button-reject pull-right has-no-border is-closing-popup"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" /> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />

4
src/app/core/components/home/home.component.scss
View File

@ -19,10 +19,6 @@
padding: 6em 0; padding: 6em 0;
color: $primary_color; color: $primary_color;
min-height: 80vh; min-height: 80vh;
.title {
color: $primary_color !important;
}
} }
a .fa { a .fa {

6
src/app/core/services/poll.service.ts
View File

@ -197,8 +197,8 @@ export class PollService implements Resolve<Poll> {
isMaybeAnswerAvailable: [true, [Validators.required]], isMaybeAnswerAvailable: [true, [Validators.required]],
isNoAnswerAvailable: [true, [Validators.required]], isNoAnswerAvailable: [true, [Validators.required]],
allowComments: [true, [Validators.required]], allowComments: [true, [Validators.required]],
maxCountOfAnswers: [300, []], maxCountOfAnswers: [1, []],
hasMaxCountOfAnswers: [300, [Validators.required]], hasMaxCountOfAnswers: ['', [Validators.required]],
useVoterUniqueLink: [false, [Validators.required]], useVoterUniqueLink: [false, [Validators.required]],
voterEmailList: ['', []], voterEmailList: ['', []],
hasSeveralHours: [true, []], hasSeveralHours: [true, []],
@ -226,7 +226,7 @@ export class PollService implements Resolve<Poll> {
richTextMode: false, richTextMode: false,
areResultsPublic: true, areResultsPublic: true,
expiresDaysDelay: environment.expiresDaysDelay, expiresDaysDelay: environment.expiresDaysDelay,
maxCountOfAnswers: 300, maxCountOfAnswers: 1000,
voterEmailList: '', voterEmailList: '',
password: '', password: '',
}); });

22
src/app/features/administration/form/advanced-config/advanced-config.component.html
View File

@ -1,6 +1,6 @@
<form [formGroup]="form" class="form-advanced-config"> <form [formGroup]="form" class="form-advanced-config">
<div class="rounded-block max_count_of_answers"> <div class="rounded-block max_count_of_answers">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.limit_title' | translate }} {{ 'advanced.limit_title' | translate }}
</h2> </h2>
<div *ngIf="form.value.hasMaxCountOfAnswers"> <div *ngIf="form.value.hasMaxCountOfAnswers">
@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<div class="rounded-block"> <div class="rounded-block">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.custom_link' | translate }} {{ 'advanced.custom_link' | translate }}
</h2> </h2>
<label for="custom_url"> <label for="custom_url">
@ -39,7 +39,7 @@
</button> </button>
</div> </div>
<div class="rounded-block"> <div class="rounded-block">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.password_title' | translate }} {{ 'advanced.password_title' | translate }}
</h2> </h2>
@ -103,7 +103,7 @@
</div> </div>
</div> </div>
<div class="rounded-block permissions-modification"> <div class="rounded-block permissions-modification">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.allowances_title' | translate }} {{ 'advanced.allowances_title' | translate }}
</h2> </h2>
<div class="choice"> <div class="choice">
@ -151,7 +151,7 @@
</div> </div>
</div> </div>
<div class="rounded-block notifications"> <div class="rounded-block notifications">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.notifications_title' | translate }} {{ 'advanced.notifications_title' | translate }}
</h2> </h2>
<p> <p>
@ -200,7 +200,7 @@
</div> </div>
<div class="rounded-box"></div> <div class="rounded-box"></div>
<div class="rounded-box"> <div class="rounded-box">
<h2 class="title-advanced"> <h2 class="title is-3">
{{ 'advanced.password_title' | translate }} {{ 'advanced.password_title' | translate }}
</h2> </h2>
@ -209,7 +209,7 @@
</mat-checkbox> </mat-checkbox>
</div> </div>
<h2 class="title-advanced"> <h2 class="title is-3">
<i class="fa fa-envelope-open"></i> <i class="fa fa-envelope-open"></i>
Notifications Notifications
</h2> </h2>
@ -220,7 +220,7 @@
Vous recevrez un mail à chaque nouveau commentaire Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox> </mat-checkbox>
<div class="proposed-answers"> <div class="proposed-answers">
<h2 class="title-advanced"> <h2 class="title is-3">
<i class="fa fa-check-square"></i> <i class="fa fa-check-square"></i>
Réponses proposées Réponses proposées
</h2> </h2>
@ -238,7 +238,7 @@
<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" /> <img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
</mat-checkbox> </mat-checkbox>
</div> </div>
<h2 class="title-advanced"> <h2 class="title is-3">
<i class="fa fa-user-secret"></i> <i class="fa fa-user-secret"></i>
Restrictions visiteurs Restrictions visiteurs
</h2> </h2>
@ -256,7 +256,7 @@
</p> </p>
</div> </div>
<h2 class="title is-2"> <h2 class="title is-3">
<i class="fa fa-wikidata"></i> <i class="fa fa-wikidata"></i>
Fonctionnalités pas encore disponibles: Fonctionnalités pas encore disponibles:
</h2> </h2>
@ -292,7 +292,7 @@
</p> </p>
</fieldset> </fieldset>
<div class="rounded-block propose_expire_input" *ngIf="environment.propose_expire_input"> <div class="rounded-block propose_expire_input" *ngIf="environment.propose_expire_input">
<h2 class="title-advanced"> <h2 class="title is-3">
Saisissez la date de fin de votre sondage Saisissez la date de fin de votre sondage
</h2> </h2>
<p> <p>

8
src/app/features/administration/form/advanced-config/advanced-config.component.scss
View File

@ -49,19 +49,13 @@
background: #fff; background: #fff;
margin: 0; margin: 0;
float: left; float: left;
width: 59%; width: 55%;
line-height: 1.5rem; line-height: 1.5rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border: 0 !important; border: 0 !important;
} }
.title-advanced {
font-size: 20px !important;
line-height: 23px !important;
color: $secondary_color;
margin-bottom: 1rem;
}
.password-box { .password-box {
label { label {
margin-left: 0; margin-left: 0;

13
src/app/features/administration/form/date/list/time/time-list.component.ts
View File

@ -3,6 +3,8 @@ import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/co
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { TimeSlices } from '../../../../../../core/models/dateChoice.model'; import { TimeSlices } from '../../../../../../core/models/dateChoice.model';
import { ToastService } from '../../../../../../core/services/toast.service';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-time-list', selector: 'app-time-list',
@ -15,7 +17,12 @@ export class TimeListComponent implements OnInit {
@Input() @Input()
public prefix_choice_id = ''; public prefix_choice_id = '';
constructor(@Inject(DOCUMENT) private document: any, private cd: ChangeDetectorRef) {} constructor(
@Inject(DOCUMENT) private document: any,
private cd: ChangeDetectorRef,
private toastService: ToastService,
private translate: TranslateService
) {}
ngOnInit(): void {} ngOnInit(): void {}
@ -36,6 +43,10 @@ export class TimeListComponent implements OnInit {
removeTime(id: number) { removeTime(id: number) {
this.timeSlices.splice(id, 1); this.timeSlices.splice(id, 1);
this.focusOnLastField(); this.focusOnLastField();
this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`);
});
} }
focusOnFieldNumber(fieldId: number) { focusOnFieldNumber(fieldId: number) {

6
src/app/features/administration/form/steps/step-five/step-five.component.scss
View File

@ -1,12 +1,6 @@
@import '../../../../../../styles/variables'; @import '../../../../../../styles/variables';
.step-five { .step-five {
.title-step {
font-weight: bold;
font-size: 32px;
line-height: 37px;
margin-bottom: 1rem !important;
}
.decription { .decription {
margin-bottom: 2rem; margin-bottom: 2rem;
} }

8
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -4,7 +4,7 @@
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<div class="custom-day-time-slices" *ngIf="1"> <div class="custom-day-time-slices" *ngIf="1">
<h1 class="title is-2"> <h1 class="title is-1">
{{ 'hours.title' | translate }} {{ 'hours.title' | translate }}
</h1> </h1>
<div <div
@ -23,7 +23,7 @@
<button <button
[attr.aria-label]="'choices.delete' | translate" [attr.aria-label]="'choices.delete' | translate"
class="has-no-border delete-hour" class="has-no-border delete-hour"
(click)="dayChoice.timeSlices.splice(id, 1)" (click)="removeHour(dayChoice.timeSlices, id)"
> >
<!-- {{ 'choices.delete' | translate }}--> <!-- {{ 'choices.delete' | translate }}-->
<img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" /> <img src="assets/icons/trash-2.svg" class="icon is-filtered-icon-primary" />
@ -64,7 +64,7 @@
</div> </div>
</div> </div>
</div> </div>
<button id="apply_same_hour" class="has-text-primary button is-fullwidth" (click)="openModal()"> <button id="apply_same_hour" class="is-secondary is-thin button is-fullwidth" (click)="openModal()">
{{ 'hours.apply_same' | translate }} {{ 'hours.apply_same' | translate }}
</button> </button>
</div> </div>
@ -84,7 +84,7 @@
<div class="column is-narrow"> <div class="column is-narrow">
<button <button
id="close_dialog" id="close_dialog"
class="button cancel-button-reject pull-right has-text-right has-no-border" class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
(click)="closeModalAndFocusOnOpenModalButton()" (click)="closeModalAndFocusOnOpenModalButton()"
> >
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" /> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />

13
src/app/features/administration/form/steps/step-four/step-four.component.ts
View File

@ -7,6 +7,7 @@ import { DOCUMENT } from '@angular/common';
import { StorageService } from '../../../../../core/services/storage.service'; import { StorageService } from '../../../../../core/services/storage.service';
import { DateChoice, TimeSlices, timeSlicesProposals } from '../../../../../core/models/dateChoice.model'; import { DateChoice, TimeSlices, timeSlicesProposals } from '../../../../../core/models/dateChoice.model';
import { ToastService } from '../../../../../core/services/toast.service'; import { ToastService } from '../../../../../core/services/toast.service';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-step-four', selector: 'app-step-four',
@ -28,6 +29,7 @@ export class StepFourComponent implements OnInit {
private dateUtilitiesService: DateUtilitiesService, private dateUtilitiesService: DateUtilitiesService,
private router: Router, private router: Router,
private toastService: ToastService, private toastService: ToastService,
private translate: TranslateService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
@Inject(DOCUMENT) private document: any, @Inject(DOCUMENT) private document: any,
private storageService: StorageService, private storageService: StorageService,
@ -120,4 +122,15 @@ export class StepFourComponent implements OnInit {
buttonClose.focus(); buttonClose.focus();
} }
} }
removeHour(dayChoice, id: number) {
dayChoice.splice(id, 1);
this.cd.detectChanges();
this.focusOnChoice(id - 1 < 0 ? 0 : id - 1);
this.translate.get('success.deleted_option').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp}`);
});
}
} }

2
src/app/features/administration/form/steps/step-six/step-six.component.html
View File

@ -2,7 +2,7 @@
<div class="step min-height"> <div class="step min-height">
<div class="min-height"> <div class="min-height">
<form action="#" [formGroup]="pollService.form"> <form action="#" [formGroup]="pollService.form">
<h1 class="title is-2"> <h1 class="title is-1">
{{ 'owner.title' | translate }} {{ 'owner.title' | translate }}
</h1> </h1>
<label for="name"> <label for="name">

16
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -10,13 +10,19 @@
{{ 'dates.title' | translate }} {{ 'dates.title' | translate }}
</h1> </h1>
<!-- sélecteur d'interface--> <!-- sélecteur d'interface-->
<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()"> <button
<span *ngIf="pollService.mode_calendar"> *ngIf="pollService.mode_calendar"
class="button is-fullwidth date-input-selector is-secondary is-thin text-center"
(click)="changeDateInputMode()"
>
{{ 'dates.manual_input' | translate }} {{ 'dates.manual_input' | translate }}
</span> </button>
<span *ngIf="!pollService.mode_calendar"> <button
*ngIf="!pollService.mode_calendar"
class="button is-fullwidth date-input-selector is-secondary is-thin"
(click)="changeDateInputMode()"
>
{{ 'dates.datepicker_input' | translate }} {{ 'dates.datepicker_input' | translate }}
</span>
</button> </button>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->

10
src/app/features/administration/form/steps/step-three/step-three.component.scss
View File

@ -13,16 +13,6 @@
margin-top: 1em; margin-top: 1em;
} }
.is-secondary {
border-color: $primary-color;
color: $primary-color;
&:hover {
background: $primary_color;
color: $white;
}
}
.date-input-selector { .date-input-selector {
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
} }

5
src/app/features/administration/form/steps/step-two/step-two.component.scss
View File

@ -1,10 +1,5 @@
@import '../../../../../../styles/variables'; @import '../../../../../../styles/variables';
.poll-kind { .poll-kind {
.title {
margin-bottom: 32px;
font-size: 32px;
line-height: 36.8px;
}
} }
.kind-of-poll { .kind-of-poll {
min-height: 30vh; min-height: 30vh;

2
src/app/features/administration/stepper/stepper.component.html
View File

@ -114,7 +114,7 @@
<div class="top"> <div class="top">
<button <button
id="close_dialog" id="close_dialog"
class="button cancel-button-reject pull-right img-marged-left has-no-border" class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ 'SENTENCES.Close' | translate }} {{ 'SENTENCES.Close' | translate }}

6
src/app/features/administration/stepper/stepper.component.scss
View File

@ -99,12 +99,6 @@
#close_stepper { #close_stepper {
border-radius: 3em; border-radius: 3em;
.title {
margin-top: 2rem;
font-size: 24px;
color: $d-primary-intense;
}
.description { .description {
color: $font_color; color: $font_color;
font-size: 1rem; font-size: 1rem;

3
src/app/features/consultation/consultation.component.scss
View File

@ -6,9 +6,6 @@
} }
.poll_loaded { .poll_loaded {
.title {
margin-bottom: 0;
}
.description { .description {
min-height: 2rem; min-height: 2rem;
} }

4
src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
View File

@ -22,10 +22,6 @@
} }
} }
.title {
margin-top: 1em;
}
table { table {
width: 100%; width: 100%;
display: block; display: block;

3
src/app/shared/components/page-not-found/page-not-found.component.scss
View File

@ -1,7 +1,4 @@
.hero-body { .hero-body {
padding-top: 5rem; padding-top: 5rem;
min-height: 50vh; min-height: 50vh;
.title {
color: #222;
}
} }

2
src/app/shared/components/selectors/language-selector/language-selector.component.html
View File

@ -34,7 +34,7 @@
<div class="top"> <div class="top">
<button <button
id="close_dialog{{ idSuffix }}" id="close_dialog{{ idSuffix }}"
class="button cancel-button-reject pull-right img-marged-left has-no-border" class="button cancel-button-reject pull-right img-marged-left has-no-border is-closing-popup"
lang="{{ currentLang }}" lang="{{ currentLang }}"
(click)="closeModalAndFocusOnButtonToOpen()" (click)="closeModalAndFocusOnButtonToOpen()"
> >

2
src/environments/environment.ts
View File

@ -42,7 +42,7 @@ export const environment = {
frontDomain: 'http://127.0.0.1:4200', frontDomain: 'http://127.0.0.1:4200',
interval_days_default: 7, interval_days_default: 7,
description_max_chars: 900, description_max_chars: 900,
maxCountOfAnswers: 300, maxCountOfAnswers: '',
production: false, production: false,
showDemoWarning: false, showDemoWarning: false,
showStepperShortcuts: false, showStepperShortcuts: false,

3
src/styles/dev-utilities/_helpers.scss
View File

@ -108,3 +108,6 @@
background: url('/assets/icons/plus-circle.svg') no-repeat left center; background: url('/assets/icons/plus-circle.svg') no-repeat left center;
//background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center; //background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center;
} }
.is-block {
display: block;
}

8
src/styles/libraries/_frameworks.scss
View File

@ -1,11 +1,11 @@
@import '../../../node_modules/bulma/bulma.sass'; @import '../../../node_modules/bulma/bulma.sass';
// Import only what you need from Bulma // Import only what you need from Bulma
@import '../../../node_modules/bulma/sass/utilities/_all.sass'; @import '../../../node_modules/bulma/sass/utilities/_all.sass';
//@import '../../../node_modules/bulma/sass/base/_all.sass'; @import '../../../node_modules/bulma/sass/base/_all.sass';
//@import '../../../node_modules/bulma/sass/elements/button.sass'; //@import '../../../node_modules/bulma/sass/elements/button.sass';
@import '../../../node_modules/bulma/sass/elements/container.sass'; @import '../../../node_modules/bulma/sass/elements/container.sass';
//@import '../../../node_modules/bulma/sass/elements/title.sass'; //@import '../../../node_modules/bulma/sass/elements/title.sass';
//@import '../../../node_modules/bulma/sass/form/_all.sass'; //@import '../../../node_modules/bulma/sass/form/_all.sass';
@import '../../../node_modules/bulma/sass/components/navbar.sass'; //@import '../../../node_modules/bulma/sass/components/navbar.sass';
@import '../../../node_modules/bulma/sass/layout/hero.sass'; //@import '../../../node_modules/bulma/sass/layout/hero.sass';
@import '../../../node_modules/bulma/sass/layout/section.sass'; //@import '../../../node_modules/bulma/sass/layout/section.sass';

15
src/styles/partials/_buttons.scss
View File

@ -24,6 +24,10 @@ a {
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
&.is-fullwidth {
display: block;
text-align: center;
}
} }
.is-white { .is-white {
@ -101,6 +105,10 @@ a {
color: #3e3882; color: #3e3882;
} }
} }
.is-closing-popup {
background: #fff;
color: #6359cf !important;
}
.buttons-demo button { .buttons-demo button {
float: left; float: left;
@ -115,11 +123,16 @@ a {
.is-warning { .is-warning {
@extend .is-warning; @extend .is-warning;
} }
.is-info {
background-color: #94bae2;
}
.btn--info { .btn--info {
@extend .is-info; @extend .is-info;
} }
.is-danger {
background-color: #e08181;
}
.btn--danger { .btn--danger {
@extend .is-danger; @extend .is-danger;
} }

6
src/styles/partials/_datepicker.scss
View File

@ -10,12 +10,6 @@ p-calendar,
max-width: 90vw; max-width: 90vw;
} }
.p-dialog {
.title {
color: $primary_color;
}
}
.p-datepicker { .p-datepicker {
padding: 0 !important; padding: 0 !important;
margin: 1em auto; margin: 1em auto;

19
src/styles/partials/_forms.scss
View File

@ -19,7 +19,7 @@ input,
select, select,
textarea { textarea {
display: inline-block; display: inline-block;
padding: 1rem; padding: 0.85rem;
margin-right: 2px; margin-right: 2px;
margin-bottom: 1em; margin-bottom: 1em;
@ -44,7 +44,7 @@ input,
select, select,
.select { .select {
font-size: 1rem !important; font-size: 1rem !important;
line-height: 40px; line-height: 28px;
border: solid 1px $font-color !important; border: solid 1px $font-color !important;
border-radius: 4px; border-radius: 4px;
font-family: $default_font; font-family: $default_font;
@ -294,13 +294,6 @@ mat-checkbox {
box-sizing: border-box; box-sizing: border-box;
@extend .top-padding-nav; @extend .top-padding-nav;
.title {
color: $d-primary-intense;
margin-bottom: 36px;
font-size: 28px;
line-height: 32px;
}
.columns { .columns {
margin: 0; margin: 0;
.column { .column {
@ -338,14 +331,6 @@ mat-checkbox {
margin-left: -1em; margin-left: -1em;
margin-right: -1em; margin-right: -1em;
} }
.content {
.title {
&.is-2,
&.is-3 {
color: $secondary_color;
}
}
}
.list-datechoices { .list-datechoices {
ul { ul {

7
src/styles/partials/_tables.scss
View File

@ -1,7 +0,0 @@
table {
@extend .table, .is-striped, .is-hoverable;
}
framadate-voting-summary {
@extend .table-container;
}

73
src/styles/partials/_typo.scss
View File

@ -6,34 +6,52 @@ body {
h5, h5,
h6 { h6 {
font-family: $title_font; font-family: $title_font;
color: $primary_color; color: $d-primary-intense;
} }
h1 { .title {
font-family: $title_font; &.is-1 {
color: $d-primary-intense;
&::after { font-weight: 700;
background-color: $primary_color;
height: 2px;
}
}
h2 {
font-family: $title_font;
font-size: 1.75rem;
font-weight: 600;
line-height: 2rem;
margin-bottom: 2rem;
}
h3 {
font-family: $title_font;
font-size: 32px; font-size: 32px;
line-height: 36.8px; line-height: 37px;
margin-bottom: 1rem;
} }
&.is-2 {
h4 { color: $d-primary-intense;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
&.is-3 {
color: $d-primary-intense;
font-family: $title_font; font-family: $title_font;
font-weight: 700;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
}
.is-1 {
color: $d-primary-intense;
font-weight: 700;
font-size: 32px;
line-height: 37px;
margin-bottom: 1rem;
}
.is-2 {
color: $d-primary-intense;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
}
.is-3 {
color: $d-primary-intense;
font-family: $title_font;
font-weight: 700;
font-size: 20px;
line-height: 23px;
margin-bottom: 1rem;
} }
.p-dialog { .p-dialog {
@ -50,10 +68,6 @@ body {
.p-dialog-content { .p-dialog-content {
padding: 1rem 2rem; padding: 1rem 2rem;
.title {
color: $secondary_color !important;
}
} }
.p-dialog-footer { .p-dialog-footer {
@ -73,11 +87,6 @@ body {
text-align: center; text-align: center;
} }
.title {
&.is-success {
color: $success_color;
}
}
.icon-success { .icon-success {
fill: $success_color; fill: $success_color;
} }

208
src/styles/themes/_dark.scss
View File

@ -1,104 +1,104 @@
$theme-color-primary: #1b6d85; //$theme-color-primary: #1b6d85;
$theme-color-secondary: #1b6d85; //$theme-color-secondary: #1b6d85;
$theme-color-tertiary: #ccc; //$theme-color-tertiary: #ccc;
#big_container { //#big_container {
&.theme-dark-crystal { // &.theme-dark-crystal {
background: #222; // background: #222;
color: $theme-color-tertiary; // color: $theme-color-tertiary;
//
main, // main,
.big-header, // .big-header,
.navbar, // .navbar,
footer { // footer {
background: #444; // background: #444;
} // }
.big-header { // .big-header {
color: $white; // color: $white;
a { // a {
color: $white; // color: $white;
} // }
} // }
input { // input {
background: #222; // background: #222;
color: $white; // color: $white;
} // }
//
h1::after { // h1::after {
background-color: $theme-color-primary; // background-color: $theme-color-primary;
} // }
//
.btn--primary:focus, // .btn--primary:focus,
.btn--primary:hover, // .btn--primary:hover,
.btn--primary:active, // .btn--primary:active,
.btn--primary { // .btn--primary {
background-color: $theme-color-secondary; // background-color: $theme-color-secondary;
} // }
//
.btn--warning:focus, // .btn--warning:focus,
.btn--warning:hover, // .btn--warning:hover,
.btn--warning:active, // .btn--warning:active,
.btn--warning { // .btn--warning {
background-color: $theme-color-secondary; // background-color: $theme-color-secondary;
} // }
//
select { // select {
background: $theme-color-tertiary; // background: $theme-color-tertiary;
border-color: $theme-color-secondary; // border-color: $theme-color-secondary;
//
&:hover { // &:hover {
color: $theme-color-tertiary; // color: $theme-color-tertiary;
} // }
} // }
//
.title { // .title {
color: $theme-color-tertiary; // color: $theme-color-tertiary;
} // }
//
.lang_icon, // .lang_icon,
.menu_icon { // .menu_icon {
fill: $theme-color-secondary !important; // fill: $theme-color-secondary !important;
color: $theme-color-secondary !important; // color: $theme-color-secondary !important;
} // }
//
label { // label {
color: $theme-color-tertiary; // color: $theme-color-tertiary;
} // }
//
// bulma override // // bulma override
.button.is-primary, // .button.is-primary,
.button.btn--primary, // .button.btn--primary,
button.is-primary, // button.is-primary,
button.btn--primary, // button.btn--primary,
.is-primary.btn, // .is-primary.btn,
.btn.btn--primary, // .btn.btn--primary,
.is-primary.back, // .is-primary.back,
.back.btn--primary { // .back.btn--primary {
background-color: $theme-color-primary !important; // background-color: $theme-color-primary !important;
color: $theme-color-tertiary !important; // color: $theme-color-tertiary !important;
} // }
.navbar-dropdown a.navbar-item { // .navbar-dropdown a.navbar-item {
color: #444; // color: #444;
} // }
// material override // // material override
.navbar-dropdown a.navbar-item.is-active, // .navbar-dropdown a.navbar-item.is-active,
body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number, // body .ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number,
a.navbar-item:focus, // a.navbar-item:focus,
a.navbar-item:focus-within, // a.navbar-item:focus-within,
a.navbar-item:hover, // a.navbar-item:hover,
a.navbar-item.is-active, // a.navbar-item.is-active,
.navbar-link:focus, // .navbar-link:focus,
.navbar-link:focus-within, // .navbar-link:focus-within,
.navbar-link:hover, // .navbar-link:hover,
.navbar-link.is-active { // .navbar-link.is-active {
color: $theme-color-primary !important; // color: $theme-color-primary !important;
} // }
//
.navbar-link:not(.is-arrowless)::after { // .navbar-link:not(.is-arrowless)::after {
border-color: $theme-color-primary; // border-color: $theme-color-primary;
} // }
//
body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider { // body .ui-inputswitch.ui-inputswitch-checked:not(.ui-state-disabled) .ui-inputswitch-slider {
background-color: $theme-color-primary; // background-color: $theme-color-primary;
} // }
} // }
} //}

42
src/styles/themes/_high-contrast.scss
View File

@ -1,21 +1,21 @@
/** ///**
aimed for visual impaired people //aimed for visual impaired people
*/ // */
$main-theme-color: #00003b; //$main-theme-color: #00003b;
#big_container { //#big_container {
&.theme-high-contrast { // &.theme-high-contrast {
background: #465f66; // background: #465f66;
color: $main-theme-color; // color: $main-theme-color;
//
h1::after { // h1::after {
background-color: $main-theme-color; // background-color: $main-theme-color;
} // }
//
.btn--primary:focus, // .btn--primary:focus,
.btn--primary:hover, // .btn--primary:hover,
.btn--primary:active, // .btn--primary:active,
.btn--primary { // .btn--primary {
background-color: $main-theme-color !important; // background-color: $main-theme-color !important;
} // }
} // }
} //}

7
src/styles/variables.scss
View File

@ -49,6 +49,7 @@ $d-error-text: #d51b38;
$outline-color: $intense-blue; // #0a76f6 $outline-color: $intense-blue; // #0a76f6
$success_color: $d-success-text; $success_color: $d-success-text;
$primary_color: $d-primary; $primary_color: $d-primary;
$primary-light: mix($d-primary, $white);
$primary: $d-primary; $primary: $d-primary;
$secondary_color: $d-primary-intense; $secondary_color: $d-primary-intense;
$bg-grey: $d-blue30; $bg-grey: $d-blue30;
@ -64,11 +65,14 @@ $hover-color: $d-neutral;
$rules: $d-rule; $rules: $d-rule;
$border-color: $d-neutral; $border-color: $d-neutral;
$input-border-color: $d-border; $input-border-color: $d-border;
$dark: $d-border;
$grey: $font_color_light;
$grey-dark: $d-primary; $grey-dark: $d-primary;
$grey-lighter: $beige-light; $grey-lighter: $beige-light;
$clicked-color: $d-primary; $clicked-color: $d-primary;
$mini-button-color: $d-primary-intense; $mini-button-color: $d-primary-intense;
$warning: $d-warning; $warning: $d-warning;
$warning-dark: mix($d-warning, $dark);
$danger: $d-error; $danger: $d-error;
$success: $d-success; $success: $d-success;
@ -88,6 +92,9 @@ $stepper-nav-height: 2rem;
$stepper-progress-bar-height: 5px; $stepper-progress-bar-height: 5px;
$home-nav-height: 2rem; $home-nav-height: 2rem;
$home-nav-height-small: 3.5rem; $home-nav-height-small: 3.5rem;
//$widescreen: 60em;
// datepicker // datepicker
$cell-size-datepicker-small: 30px; $cell-size-datepicker-small: 30px;
$cell-size-datepicker-desktop: 42px; $cell-size-datepicker-desktop: 42px;