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="columns presentation">
<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>
<h2 class="title is-2">titre h2</h2>
<h3 class="title is-3">titre h3</h3>
<button class="button is-primary is-disabled">bouton primaire inactif</button>
<button class="button is-primary">bouton primaire</button>
<button class="button is-primary is-thin">bouton primaire fin</button>
<button class="button is-secondary is-disabled">bouton secondaire</button>
<button class="button is-secondary">bouton secondaire</button>
<button class="button is-secondary is-thin">bouton secondaire fin</button>
<button class="button is-action">bouton action</button>
<button class="button is-action">bouton action fin</button>
<button class="is-primary is-disabled">bouton primaire inactif</button>
<button class="is-primary">bouton primaire</button>
<button class="is-primary is-thin">bouton primaire fin</button>
<button class="is-final">bouton succès</button>
<button class="is-secondary is-disabled">bouton secondaire inactif</button>
<button class="is-secondary">bouton secondaire</button>
<button class="is-secondary is-thin">bouton secondaire fin</button>
<button class="is-action">bouton action</button>
<button class="is-action is-thin">bouton action fin</button>
</section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 class="title is-2">
{{ 'config.landing_title' | translate }}
</h2>
@ -25,14 +43,14 @@
</p>
<div class="columns">
<div class="column">
<button class="button is-fullwidth is-primary" routerLink="administration">
<button class="is-fullwidth is-primary" routerLink="administration">
{{ 'config.letsgo' | translate }}
</button>
</div>
<div class="column">
<button
id="open_popup_button"
class="button is-fullwidth is-secondary is-outlined"
class="is-fullwidth is-secondary is-outlined"
(click)="openModalFindPoll()"
>
{{ 'config.discover' | translate }}
@ -67,7 +85,7 @@
<div class="top">
<button
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()"
>
{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
@ -112,7 +130,7 @@
<button
type="submit"
role="button"
class="button is-outlined is-fullwidth is-info button-submit"
class="is-outlined is-fullwidth is-info button-submit"
[disabled]="
!storageService.vote_stack.owner.email.length ||
nonexistent_email === storageService.vote_stack.owner.email
@ -129,10 +147,7 @@
<div class="poll-list">
<ul>
<li *ngFor="let p of storageService.userPolls">
<a
class="button is-fullwidth padded"
[routerLink]="'poll/' + p.custom_url + '/consultation'"
>
<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
{{ p.title }}
<i class="fa fa-arrow-right pull-right"></i>
</a>

View File

@ -1,6 +1,6 @@
<div class="admin-consultation min-height padded">
<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>
{{ 'resume.edit' | translate }}
</button>

View File

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

View File

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

View File

@ -70,14 +70,8 @@
.go-to-step,
.custom-action {
@extend .clickable;
color: $secondary_color;
padding: 1.5em;
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/elements/button.sass';
@import '../../../node_modules/bulma/sass/elements/container.sass';
@import '../../../node_modules/bulma/sass/elements/title.sass';
@import '../../../node_modules/bulma/sass/form/_all.sass';
//@import '../../../node_modules/bulma/sass/elements/title.sass';
//@import '../../../node_modules/bulma/sass/form/_all.sass';
@import '../../../node_modules/bulma/sass/components/navbar.sass';
@import '../../../node_modules/bulma/sass/layout/hero.sass';
@import '../../../node_modules/bulma/sass/layout/section.sass';

View File

@ -1,42 +1,62 @@
.outlined {
&:focus {
outline: #6359cf;
outline: $outline-color;
outline-style: solid;
outline-offset: 0.15rem;
}
}
a {
@extend .outlined;
}
button,
.btn {
@extend .outlined;
@extend .button;
}
.btn--full {
@extend .is-block;
}
button {
&.is-white {
button,
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 {
background: $secondary_color;
color: $white;
}
}
&:hover {
outline-color: cadetblue;
}
}
.is-success {
.is-final {
background: #128149;
border-color: #128149;
color: #fff;
&:hover {
background: #07532d;
border-color: #07532d;
}
}
.is-primary {
background: #6359cf;
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 {
@ -48,7 +68,46 @@ button {
background: #fff;
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 {
@extend .is-primary;
}

View File

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

View File

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

View File

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

View File

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