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

[front] global : update button styles

Browse Source
This commit is contained in:
22px 2019-10-16 21:33:49 +02:00
parent 69802a99ff
commit 802f54b930
11 changed files with 116 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/debugger/debugger.component.html
View File

@ -32,7 +32,7 @@
(click)="config.set('pollType' , 'classic')"
[class.active]="config.pollType == 'classic'"
[disabled]="!formIsValid"
class="btn btn-primary next"
class="btn btn--primary next"
>
<span i18n>
sondage classique
@ -46,7 +46,7 @@
(click)="selectOption('pollType' ,'dates')"
[class.active]="config.pollType == 'dates'"
[disabled]="!formIsValid"
class="btn btn-primary next"
class="btn btn--primary next"
>
<span i18n>
sondage spécial date
@ -58,7 +58,7 @@
</button>
<button
class="btn"
class="btn btn--primary"
i18n
(click)="config.sendForm()"
>

4
src/app/pages/answers/answers.component.html
View File

@ -21,7 +21,7 @@
</ol>
<button
class="btn_border"
class="btn btn--primary btn--outline"
(click)="addAnswer()"
i18n
>
@ -30,7 +30,7 @@
<br>
<button
[routerLink]="'/step/resume'"
class="btn_background btn_white_text"
class="btn btn--primary"
i18n
>
Voyons ce que ça donne

2
src/app/pages/base-page/base.component.html
View File

@ -1,2 +1,2 @@
<h1>Ce composant est celui de base pour les pages</h1>
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>

4
src/app/pages/create-or-retrieve/create-or-retrieve.component.html
View File

@ -11,7 +11,7 @@
</p>
<div class="btn-next">
<button
class="btn_background btn_white_text"
class="btn btn--primary"
[routerLink]="'/home'"
>
<span
@ -48,7 +48,7 @@
/>
<input
type="submit"
class="btn_border"
class="btn btn--primary btn--outline"
i18n
value="Retrouver mes sondages"
/>

4
src/app/pages/dates/dates.component.html
View File

@ -24,7 +24,7 @@
</div>
<button
class="btn btn-primary"
class="btn btn--primary"
(click)="addDate()"
i18n
>
@ -52,7 +52,7 @@
<a
[routerLink]="'/step/end'"
class="btn btn-block"
class="btn btn--primary"
>
C'est parfait!
</a>

2
src/app/pages/home/home.component.html
View File

@ -74,7 +74,7 @@
<button
[routerLink]="'/step/answers'"
class="btn btn_background btn_white_text"
class="btn btn--primary"
i18n
>
Continuer

79
src/app/pages/kind/kind.component.html
View File

@ -1,7 +1,7 @@
<h1>page de démo</h1>
<p>cette étape est en cours de développement. <br> S'inspirer de la page de Home pour réaliser d'autres pages
</p>
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
<h1>Atoms</h1>
<section>
<article>
@ -33,26 +33,67 @@
<article>
<h2>Buttons</h2>
<p>
<input type="submit" value="Input Submit with border" class="btn_border"><br>
<input type="submit" value="Input Submit with background" class="btn_background"><br>
<input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br>
<input type="submit" value="Input Submit delete with background" class="btn_background btn_delete">
<input type="submit" value="Input Submit with background and white text" class="btn_background btn_white_text">
</p>
<button type="submit" class="btn btn--primary">
primary - default
</button>
<p>
<button class="btn_border">Button with border</button><br>
<button class="btn_background">Button with background</button><br>
<button class="btn_border btn_delete">Button delete with background</button><br>
<button class="btn_background btn_delete">Button delete with background</button>
<button class="btn_background btn_white_text">Button with background and white text</button>
</p>
<br>
<p>
Warning, in the mockups, some buttons have different paddings.<br>
Example: "Copier le lien" has smaller paddings, maybe a `btn_small` class could do the job, to check.
</p>
<button type="submit" class="btn btn--primary btn--small">
primary - small
</button>
<br>
<a href="#" class="btn btn--primary btn--outline">
primary - outline - default
</a>
<br>
<button type="submit" class="btn btn--primary btn--outline btn--small">
primary - outline - small
</button>
<br>
<input type="submit" class="btn btn--alert" value="alert - default">
<br>
<button type="submit" class="btn btn--alert btn--small">
alert - small
</button>
<br>
<button type="submit" class="btn btn--alert btn--outline">
alert - outline - default
</button>
<br>
<button type="submit" class="btn btn--alert btn--outline btn--small">
alert - outline - small
</button>
<br><br>
<button type="submit" class="btn btn--primary btn--full">
primary - full
</button>
<button type="submit" class="btn btn--primary btn--outline btn--full">
primary - outline - full
</button>
<button type="submit" class="btn btn--alert btn--full">
alert - full
</button>
<button type="submit" class="btn btn--alert btn--outline btn--full">
alert - outline - full
</button>
</article>

2
src/app/pages/pictures/pictures.component.html
View File

@ -2,5 +2,5 @@
<h1 i18n>
Images
</h1>
<a [routerLink]="'/step/visibility'" class="btn btn-block">ok</a>
<a [routerLink]="'/step/visibility'" class="btn btn--primary">ok</a>

2
src/app/pages/resume/resume.component.html
View File

@ -7,4 +7,4 @@
{{config |json}}
</pre>
</section>
<button [routerLink]="'/step/end'" class="btn_background btn_white_text" i18n="@@confirm">C'est parfait!</button>
<button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>

2
src/app/pages/visibility/visibility.component.html
View File

@ -11,4 +11,4 @@
<h1 i18n>
Accès au sondage
</h1>
<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>

92
src/assets/scss/atoms/_buttons.scss
View File

@ -1,55 +1,47 @@
@charset "UTF-8";
button,
input[type="submit"] {
padding-right: 1.5rem;
padding-left: 1.5rem;
font-size: 1.6rem;
line-height: 1;
background-color: #fff;
border: 2px solid $primary_color;
border-radius: 0.3rem;
font-family: $default_font;
font-weight: 600;
&.btn_background {
padding-top: 1rem;
padding-bottom: 1rem;
font-weight: 600;
background-color: $primary_color;
&:hover {
background-color: $secondary_color;
border-color: $secondary_color;
@mixin btnTheme ($color) {
background-color: $color;
color: $white;
&.btn--outline {
background-color: transparent;
border-color: $color;
color: $font-color;
}
&.btn_delete {
color: #fff;
background-color: $red;
&:hover {
color: $red;
background-color: #fff;
}
&:focus,
&:hover,
&:active {
background-color: rgba($color, .8);
&.btn--outline {
background-color: rgba($color, .2);
}
}
&.btn_white_text{
color:$white;
}
}
&.btn_border {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
&:hover {
background-color: rgba($primary_color, 0.2);
}
}
&.btn_delete {
&,
&:hover {
border-color: $red;
}
}
}
.btn {
margin: .5rem 0;
padding: 1rem 1.5rem;
font-size: 1.6rem;
line-height: normal;
border: .2rem solid transparent;
border-radius: .3rem;
font-weight: normal;
&--primary {
@include btnTheme($primary_color);
}
&--alert {
@include btnTheme($red);
}
&--small {
padding: .75rem 1.25rem;
}
&--full {
display: block;
min-width: 100%;
}
}