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

style helvetica, color on first step

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/app.component.html
View File

@ -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>

7
src/app/features/administration/form/steps/step-one/step-one.component.html
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"

7
src/app/features/administration/stepper/stepper.component.html
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>

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

@ -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;
}

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

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

50
src/styles/partials/_forms.scss
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;
}

1
src/styles/partials/_main.scss
View File

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

14
src/styles/partials/_responsive.scss
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%;
}

5
src/styles/partials/_typo.scss
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;
}

6
src/styles/variables.scss
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';