mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
display all buttons on home, style accordingly, remove bulma buttons styles
This commit is contained in:
parent
e84cfa9194
commit
7d1385185b
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 }})
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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';
|
||||
|
@ -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 {
|
||||
&:hover {
|
||||
background: $secondary_color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
outline-color: cadetblue;
|
||||
}
|
||||
button,
|
||||
a {
|
||||
@extend .outlined;
|
||||
text-align: center;
|
||||
padding: 10px 30px;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.is-success {
|
||||
.is-white {
|
||||
&:hover {
|
||||
background: $secondary_color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -61,12 +61,6 @@ textarea {
|
||||
@extend .clickable;
|
||||
padding: 0.25rem 0.25rem 0.25rem 1rem;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary_color;
|
||||
}
|
||||
|
||||
&[required] {
|
||||
&:after {
|
||||
content: '*';
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user