mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
style helvetica, color on first step
This commit is contained in:
tykayn
parent
3dbb108a2c
commit
1cab5c3cef
@ -4,19 +4,22 @@
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content>
|
||||
<div id="big_container" [class]="themeClass">
|
||||
<app-header
|
||||
*ngIf="onHomePage || environment.display_menu_creation"
|
||||
[appTitle]="appTitle"
|
||||
[appLogo]="appLogo"
|
||||
></app-header>
|
||||
<div [class.container]="!onHomePage">
|
||||
<main [@routeAnimations]="prepareRoute(outlet)">
|
||||
<router-outlet #outlet></router-outlet>
|
||||
</main>
|
||||
<app-feedback></app-feedback>
|
||||
</div>
|
||||
<div class="sidenav-content">
|
||||
le contenu de side nav
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
<div id="big_container" [class]="themeClass">
|
||||
<app-header
|
||||
*ngIf="onHomePage || environment.display_menu_creation"
|
||||
[appTitle]="appTitle"
|
||||
[appLogo]="appLogo"
|
||||
></app-header>
|
||||
<div [class.container]="!onHomePage">
|
||||
<main [@routeAnimations]="prepareRoute(outlet)">
|
||||
<router-outlet #outlet></router-outlet>
|
||||
</main>
|
||||
<app-feedback></app-feedback>
|
||||
</div>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,50 +1,43 @@
|
||||
@import '../../../../styles/variables';
|
||||
.step-info {
|
||||
.title.step-title-poll {
|
||||
font-size: 0.85rem;
|
||||
color: $border-color;
|
||||
|
||||
#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-container {
|
||||
margin: 1em 0;
|
||||
height: 0.6em;
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
background: $d-grey !important;
|
||||
width: 100%;
|
||||
}
|
||||
.step-bar-progress {
|
||||
position: relative;
|
||||
top: -0.5em;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
background: $primary_color;
|
||||
}
|
||||
.shortcut {
|
||||
background: $dark-lavender;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
&.is-active {
|
||||
background: $font_color;
|
||||
|
||||
.step-bar-progress {
|
||||
position: relative;
|
||||
top: -0.5em;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
background: $primary_color;
|
||||
}
|
||||
&:hover {
|
||||
background: $clicked-color;
|
||||
}
|
||||
&.cancel-button {
|
||||
background: $border-color;
|
||||
margin-top: -0.5em;
|
||||
&:hover {
|
||||
|
||||
.shortcut {
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
|
||||
&.is-active {
|
||||
background: $font_color;
|
||||
}
|
||||
|
||||
&.cancel-button {
|
||||
background: $border-color;
|
||||
margin-top: -0.5em;
|
||||
|
||||
&:hover {
|
||||
background: $font_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.poll-title {
|
||||
color: $d-neutral;
|
||||
}
|
||||
|
||||
@ -15,6 +15,9 @@
|
||||
}
|
||||
|
||||
label {
|
||||
color: $font_color;
|
||||
font-wieght: 600;
|
||||
|
||||
&[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
body,
|
||||
html {
|
||||
background: $white;
|
||||
color: $font_color;
|
||||
}
|
||||
main {
|
||||
display: block;
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user