style helvetica, color on first step

This commit is contained in:
Tykayn 2021-11-30 11:17:44 +01:00 committed by tykayn
parent 3dbb108a2c
commit 1cab5c3cef
10 changed files with 111 additions and 90 deletions

View File

@ -4,7 +4,12 @@
</mat-sidenav>
<mat-sidenav-content>
<div id="big_container" [class]="themeClass">
<div class="sidenav-content">
le contenu de side nav
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<div id="big_container" [class]="themeClass">
<app-header
*ngIf="onHomePage || environment.display_menu_creation"
[appTitle]="appTitle"
@ -16,7 +21,5 @@
</main>
<app-feedback></app-feedback>
</div>
</div>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<app-footer></app-footer>

View File

@ -13,7 +13,6 @@
<input
class="input is-fullwidth"
#title
[placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title"
(keyup)="pollService.updateSlug()"
(blur)="pollService.updateSlug()"
@ -29,11 +28,6 @@
<div class="columns">
<div class="column">
<label for="descr">Description (optionnel)</label>
<!-- <div class="rich-text-toggle">-->
<!-- <label for="richTextMode">mode de saisie avancée</label>-->
<!-- <mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>-->
<!-- </div>-->
<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
richTextMode activé
</div>
@ -43,7 +37,6 @@
matInput
id="descr"
class="is-large is-full input"
placeholder="Description"
formControlName="description"
required
maxlength="300"

View File

@ -63,9 +63,10 @@
<div class="column">
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
</div>
<div class="column is-narrow has-text-right">
<a class="shortcut cancel-button" (click)="cancelDialog()">
<i class="fa fa-times"></i>
<div class="column has-text-right">
<a class="" (click)="cancelDialog()">
Annuler
<span class="cancel-button"><i class="fa fa-times"></i></span>
</a>
</div>
</div>

View File

@ -1,19 +1,16 @@
@import '../../../../styles/variables';
.step-info {
.title.step-title-poll {
font-size: 0.85rem;
color: $border-color;
}
}
.step-bar-container {
margin: 1em 0;
#creation_stepper {
.step-bar-container {
margin: 1rem 0 2rem;
height: 0.6em;
display: inline-block;
min-width: 1px;
background: $d-grey !important;
width: 100%;
}
.step-bar-progress {
}
.step-bar-progress {
position: relative;
top: -0.5em;
left: 0;
@ -21,30 +18,26 @@
display: inline-block;
min-width: 1px;
background: $primary_color;
}
.shortcut {
background: $dark-lavender;
color: white;
}
.shortcut {
padding: 1em;
margin: 1em;
display: inline-block;
border-radius: 100%;
text-align: center;
width: 4em;
&.is-active {
background: $font_color;
}
&:hover {
background: $clicked-color;
}
&.cancel-button {
background: $border-color;
margin-top: -0.5em;
&:hover {
background: $font_color;
}
}
}
.poll-title {
color: $d-neutral;
}
}

View File

@ -15,6 +15,9 @@
}
label {
color: $font_color;
font-wieght: 600;
&[for] {
cursor: pointer;
}

View File

@ -12,7 +12,7 @@ input.is-hovered,
select.is-hovered,
.is-hovered.textarea,
.select select.is-hovered {
border-color: $border-color !important;
border-color: $font_color !important;
}
app-step-one,
@ -41,8 +41,6 @@ select,
textarea {
display: inline-block;
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
width: calc(100% - 45px);
margin-right: 2px;
margin-bottom: 1em;
@ -53,12 +51,19 @@ textarea {
}
}
textarea,
input,
.input,
.textarea,
select,
.select {
border: solid 1px $font_color;
}
input,
select,
textarea {
@extend .clickable;
margin-bottom: 0.25rem;
border-bottom: 2px solid $primary_color;
margin-bottom: 2rem;
padding: 0.5rem;
&:active,
@ -67,10 +72,6 @@ textarea {
color: $primary_color;
}
&.ng-invalid {
border: $warning 3px solid !important;
}
&[required] {
&:after {
content: '*';
@ -131,7 +132,8 @@ select {
}
input {
@extend .input, .text-ellipsis;
border-color: #4e4c59 !important;
@extend .text-ellipsis;
}
textarea {
@ -288,6 +290,25 @@ mat-checkbox {
}
}
.step {
.title {
color: $primary_color;
}
.step-counter-text {
color: $primary_color;
font-size: 1rem;
line-height: 1.25rem;
}
}
.mat-drawer-container {
.step-info {
.step-title-poll {
font-size: 0.85rem !important;
color: $d-neutral !important;
}
}
}
// resume de la création de sondage
.step-resume {
.content {
@ -310,6 +331,7 @@ mat-checkbox {
margin: 0.5em -1em;
background: $rules;
}
.go-to-step,
.custom-action {
@extend .clickable;
@ -327,3 +349,11 @@ mat-checkbox {
.block-resume {
@extend .rounded-block;
}
label {
font-family: $default_font;
color: $font_color;
font-weight: bold;
font-size: 0.85rem;
line-height: 1rem;
margin-bottom: 0.5rem;
}

View File

@ -2,6 +2,7 @@
body,
html {
background: $white;
color: $font_color;
}
main {
display: block;

View File

@ -1,10 +1,11 @@
// small screens
@media (min-width: 600px) {
.feedback-container {
position: fixed;
}
}
// wide screen like desktop
@media (min-width: $widescreen) {
//select,
//input,
//label + select,
//label {
// width: 45%;
//}
.date-choice > input:first-of-type {
width: 75%;
}
@ -15,6 +16,7 @@
}
.time-choice {
padding: 1em;
input {
width: 80%;
}

View File

@ -4,12 +4,10 @@ h3,
h4,
h5,
h6 {
@extend .title;
font-family: $title_font;
}
h1 {
@extend .is-1;
font-family: $title_font;
&::after {
background-color: $primary_color;
@ -18,17 +16,14 @@ h1 {
}
h2 {
@extend .is-2;
font-family: $title_font;
}
h3 {
@extend .is-3;
font-family: $title_font;
}
h4 {
@extend .is-4;
font-family: $title_font;
}

View File

@ -25,7 +25,7 @@ $beige-lighter: #eff0eb;
$d-primary: #3e3882; // bleu 800
$d-primary-intense: #6359cf; // bleu 600
$d-grey: #f6f5fd; // bleu 300
$d-grey: #e3e3ea; // bleu 300
$d-blue30: #f6f5fd; // bleu 300
$d-rule: #e2e0fa; // bleu 100
$d-neutral: #767486;
@ -63,5 +63,5 @@ $warning: $d-warning;
$danger: $d-error;
$success: $d-success;
$default_font: 'helvetica';
$title_font: 'helvetica', 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
$default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';