display all buttons on home, style accordingly, remove bulma buttons styles

This commit is contained in:
Tykayn 2022-03-10 09:30:27 +01:00 committed by tykayn
parent e84cfa9194
commit 7d1385185b
11 changed files with 119 additions and 73 deletions

View File

@ -3,20 +3,38 @@
<div class="landing container content"> <div class="landing container content">
<div class="columns presentation"> <div class="columns presentation">
<div class="column"> <div class="column">
<section class="buttons contained-in-main-column"> <section class="buttons-demo contained-in-main-column">
<h1 class="title is-1">titre h1</h1> <h1 class="title is-1">titre h1</h1>
<h2 class="title is-2">titre h2</h2> <h2 class="title is-2">titre h2</h2>
<h3 class="title is-3">titre h3</h3> <h3 class="title is-3">titre h3</h3>
<button class="button is-primary is-disabled">bouton primaire inactif</button> <button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="button is-primary">bouton primaire</button> <button class="is-primary">bouton primaire</button>
<button class="button is-primary is-thin">bouton primaire fin</button> <button class="is-primary is-thin">bouton primaire fin</button>
<button class="button is-secondary is-disabled">bouton secondaire</button> <button class="is-final">bouton succès</button>
<button class="button is-secondary">bouton secondaire</button> <button class="is-secondary is-disabled">bouton secondaire inactif</button>
<button class="button is-secondary is-thin">bouton secondaire fin</button> <button class="is-secondary">bouton secondaire</button>
<button class="button is-action">bouton action</button> <button class="is-secondary is-thin">bouton secondaire fin</button>
<button class="button is-action">bouton action fin</button> <button class="is-action">bouton action</button>
<button class="is-action is-thin">bouton action fin</button>
</section> </section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'config.landing_title' | translate }} {{ 'config.landing_title' | translate }}
</h2> </h2>
@ -25,14 +43,14 @@
</p> </p>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<button class="button is-fullwidth is-primary" routerLink="administration"> <button class="is-fullwidth is-primary" routerLink="administration">
{{ 'config.letsgo' | translate }} {{ 'config.letsgo' | translate }}
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<button <button
id="open_popup_button" id="open_popup_button"
class="button is-fullwidth is-secondary is-outlined" class="is-fullwidth is-secondary is-outlined"
(click)="openModalFindPoll()" (click)="openModalFindPoll()"
> >
{{ 'config.discover' | translate }} {{ 'config.discover' | translate }}
@ -67,7 +85,7 @@
<div class="top"> <div class="top">
<button <button
id="close_dialog" id="close_dialog"
class="button no-outline cancel-button-reject pull-right has-no-border" class="no-outline cancel-button-reject pull-right has-no-border"
(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" />
@ -112,7 +130,7 @@
<button <button
type="submit" type="submit"
role="button" role="button"
class="button is-outlined is-fullwidth is-info button-submit" class="is-outlined is-fullwidth is-info button-submit"
[disabled]=" [disabled]="
!storageService.vote_stack.owner.email.length || !storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email nonexistent_email === storageService.vote_stack.owner.email
@ -129,10 +147,7 @@
<div class="poll-list"> <div class="poll-list">
<ul> <ul>
<li *ngFor="let p of storageService.userPolls"> <li *ngFor="let p of storageService.userPolls">
<a <a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
{{ p.title }} {{ p.title }}
<i class="fa fa-arrow-right pull-right"></i> <i class="fa fa-arrow-right pull-right"></i>
</a> </a>

View File

@ -1,6 +1,6 @@
<div class="admin-consultation min-height padded"> <div class="admin-consultation min-height padded">
<h2 class="title is-2">Consulter le sondage</h2> <h2 class="title is-2">Consulter le sondage</h2>
<button class="btn is-primary" [routerLink]="'/administration'"> <button class="is-primary" [routerLink]="'/administration'">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</button> </button>

View File

@ -46,7 +46,7 @@
<button <button
(click)="pollService.removeAllTimes()" (click)="pollService.removeAllTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours" *ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged" class="is-warning marged"
id="remove_time_button" id="remove_time_button"
> >
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
@ -55,7 +55,7 @@
<button <button
(click)="pollService.resetTimes()" (click)="pollService.resetTimes()"
*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours" *ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
class="btn is-warning marged" class="is-warning marged"
id="reset_time_button" id="reset_time_button"
> >
<i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i>

View File

@ -2,13 +2,13 @@
<form [formGroup]="form"> <form [formGroup]="form">
<span class="columns"> <span class="columns">
<span class="column"> <span class="column">
<button class="btn is-primary" (click)="addChoice()"> <button class="is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
Ajouter un choix Ajouter un choix
</button> </button>
</span> </span>
<span class="column pull-right"> <span class="column pull-right">
<button class="btn is-warning" (click)="reinitChoices()"> <button class="is-warning" (click)="reinitChoices()">
<i class="fa fa-recycle"></i> <i class="fa fa-recycle"></i>
Réinitialiser Réinitialiser
</button> </button>
@ -22,7 +22,7 @@
<div class="form-row" [formGroup]="choice"> <div class="form-row" [formGroup]="choice">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)"> <button class="is-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
{{ i * 1 + 1 }}) {{ i * 1 + 1 }})

View File

@ -70,14 +70,8 @@
.go-to-step, .go-to-step,
.custom-action { .custom-action {
@extend .clickable; @extend .clickable;
color: $secondary_color;
padding: 1.5em; padding: 1.5em;
border-radius: 0.25em; border-radius: 0.25em;
&:hover {
background: $secondary_color;
color: $white;
}
} }
} }

View File

@ -4,8 +4,8 @@
//@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';

View File

@ -1,42 +1,62 @@
.outlined { .outlined {
&:focus { &:focus {
outline: #6359cf; outline: $outline-color;
outline-style: solid; outline-style: solid;
outline-offset: 0.15rem;
} }
} }
a {
@extend .outlined;
}
button, button,
.btn { .btn {
@extend .outlined; @extend .outlined;
@extend .button;
} }
.btn--full { .btn--full {
@extend .is-block; @extend .is-block;
} }
button { button,
&.is-white { a {
@extend .outlined;
text-align: center;
padding: 10px 30px;
border: 1px solid transparent;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
}
.is-white {
&:hover { &:hover {
background: $secondary_color; background: $secondary_color;
color: $white; color: $white;
} }
} }
&:hover { .is-final {
outline-color: cadetblue;
}
}
.is-success {
background: #128149; background: #128149;
border-color: #128149;
color: #fff; color: #fff;
&:hover {
background: #07532d;
border-color: #07532d;
}
} }
.is-primary { .is-primary {
background: #6359cf; background: #6359cf;
color: #fff; color: #fff;
border-color: #6359cf;
&.is-disabled {
background: #767486;
}
&:hover {
background-color: #3e3882;
border-color: #3e3882;
&.is-disabled {
background: #767486;
border-color: #6359cf;
}
}
} }
.is-disabled { .is-disabled {
@ -48,7 +68,46 @@ button {
background: #fff; background: #fff;
color: #6359cf; color: #6359cf;
border-color: #6359cf; border-color: #6359cf;
&.is-disabled {
color: #767486;
border-color: #767486;
} }
&:hover {
background-color: #f6f5fb;
border-color: #3e3882;
color: #3e3882;
&.is-disabled {
color: #767486;
border-color: #767486;
}
}
}
.is-thin {
font-size: 14px;
line-height: 18px;
}
.is-action {
background: #fff;
color: #6359cf;
border-radius: 100px;
border-color: transparent;
padding: 4px !important;
&:hover {
background-color: #e3e3ea;
border-color: #e3e3ea;
color: #3e3882;
}
}
.buttons-demo button {
float: left;
clear: both;
margin-bottom: 1rem;
}
.btn-primary { .btn-primary {
@extend .is-primary; @extend .is-primary;
} }

View File

@ -60,10 +60,8 @@ p-calendar,
font-weight: normal; font-weight: normal;
} }
p-button, p-button {
button {
color: $primary_color !important; color: $primary_color !important;
&:hover { &:hover {
color: $white !important; color: $white !important;
background: $secondary_color !important; background: $secondary_color !important;

View File

@ -61,12 +61,6 @@ textarea {
@extend .clickable; @extend .clickable;
padding: 0.25rem 0.25rem 0.25rem 1rem; padding: 0.25rem 0.25rem 0.25rem 1rem;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
&[required] { &[required] {
&:after { &:after {
content: '*'; content: '*';

View File

@ -22,15 +22,6 @@ nav {
&::after { &::after {
display: none; display: none;
} }
&.active,
&.is-active {
color: $white;
background: $primary_color !important;
&:hover {
background: $dark !important;
}
}
} }
} }
a { a {
@ -45,13 +36,6 @@ a {
content: ''; content: '';
} }
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span { span {
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;

View File

@ -37,6 +37,7 @@ $d-alt: #a9607f;
$d-info: #ecf4ff; $d-info: #ecf4ff;
$d-info-text: #316ec7; $d-info-text: #316ec7;
$intense-blue: #0a76f6;
$d-success: #ecfff5; $d-success: #ecfff5;
$d-success-text: #128149; $d-success-text: #128149;
$d-warning: #dcd3bb; $d-warning: #dcd3bb;
@ -45,6 +46,7 @@ $d-error: #ffecee;
$d-error-text: #d51b38; $d-error-text: #d51b38;
// interpretations in app // interpretations in app
$outline-color: $intense-blue; // #0a76f6
$success_color: $d-success-text; $success_color: $d-success-text;
$primary_color: $d-primary; $primary_color: $d-primary;
$primary: $d-primary; $primary: $d-primary;