Merge branch 'ui/buttons' into 'styles'

[front] global : update button styles

See merge request framasoft/framadate/funky-framadate-front!6

src/app/debugger/debugger.component.html

@@ -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()"
 >

src/app/pages/answers/answers.component.html

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

src/app/pages/base-page/base.component.html

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

src/app/pages/create-or-retrieve/create-or-retrieve.component.html

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

src/app/pages/dates/dates.component.html

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

src/app/pages/home/home.component.html

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

src/app/pages/kind/kind.component.html

@@ -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>
+        <button type="submit" class="btn btn--primary">
-            <input type="submit" value="Input Submit with border" class="btn_border"><br>
+            primary - default
-            <input type="submit" value="Input Submit with background" class="btn_background"><br>
+        </button>
-            <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>
 
-        <p>
+        <br>
-            <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>
 
-        <p>
+        <button type="submit" class="btn btn--primary btn--small">
-            Warning, in the mockups, some buttons have different paddings.<br>
+            primary - small
-            Example: "Copier le lien" has smaller paddings, maybe a `btn_small` class could do the job, to check.
+        </button>
-        </p>
+
+        <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>
 

src/app/pages/pictures/pictures.component.html

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

src/app/pages/resume/resume.component.html

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

src/app/pages/visibility/visibility.component.html

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

src/assets/scss/atoms/_buttons.scss

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