From ebc478a3c0bbeb3583925656190f8fd315363db8 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 26 Sep 2017 09:25:42 +0200
Subject: [PATCH 1/3] Buttons: simplify .btn selectors

---
 .../app/views/report/time_picker.jst.eco      |  8 +--
 .../app/views/time_accounting/index.jst.eco   |  4 +-
 app/assets/stylesheets/zammad.scss            | 51 ++++++++++---------
 3 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/app/views/report/time_picker.jst.eco b/app/assets/javascripts/app/views/report/time_picker.jst.eco
index 96a17b978..2e1486fa5 100644
--- a/app/assets/javascripts/app/views/report/time_picker.jst.eco
+++ b/app/assets/javascripts/app/views/report/time_picker.jst.eco
@@ -2,7 +2,7 @@
   <% if @params.timeRange is 'day': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeDay: %>
-        <div class="btn btn--textLarge js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerDay<%- ' is-selected' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -10,7 +10,7 @@
   <% if @params.timeRange is 'day' || @params.timeRange is 'month': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeMonth: %>
-        <div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -18,7 +18,7 @@
   <% if @params.timeRange is 'week': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeWeek: %>
-        <div class="btn btn--textLarge js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerWeek<%- ' is-selected' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
@@ -26,7 +26,7 @@
   <% if @params.timeRange isnt 'realtime': %>
     <div class="btn-group btn-group--full" role="group" aria-label="">
       <% for item in @timeRangeYear: %>
-        <div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+        <div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
       <% end %>
     </div>
   <% end %>
diff --git a/app/assets/javascripts/app/views/time_accounting/index.jst.eco b/app/assets/javascripts/app/views/time_accounting/index.jst.eco
index da28bb51d..ca3ed3f50 100644
--- a/app/assets/javascripts/app/views/time_accounting/index.jst.eco
+++ b/app/assets/javascripts/app/views/time_accounting/index.jst.eco
@@ -25,13 +25,13 @@
     <div class="well">
       <div class="btn-group btn-group--full" role="group" aria-label="">
         <% for item in @timeRangeYear: %>
-          <div class="btn btn--textLarge js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+          <div class="btn btn--text btn--large js-timePickerYear<%- ' is-selected' if @year is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
         <% end %>
       </div>
 
       <div class="btn-group btn-group--full" role="group" aria-label="">
         <% for item in @timeRangeMonth: %>
-          <div class="btn btn--textLarge js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
+          <div class="btn btn--text btn--large js-timePickerMonth<%- ' is-selected' if @month is item.value %>" data-id="<%= @timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
         <% end %>
       </div>
     </div>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index b732696ba..fdc4abbd2 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -385,7 +385,7 @@ pre code.hljs {
     fill: currentColor;
   }
 
-  &.btn--icon--last .icon {
+  &--icon--last .icon {
     @include bidi-style(margin-left, 5px, margin-right, 0); // so far only used in ticket_zoom secondaryAction dropup
   }
 
@@ -393,23 +393,23 @@ pre code.hljs {
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
   }
 
-  &.btn--small {
+  &--small {
     padding-top: 5px;
     padding-bottom: 4px;
   }
 
-  &.btn--slim {
+  &--slim {
     padding-left: 12px;
     padding-right: 12px;
   }
 
-  &.btn--fullWidth {
+  &--fullWidth {
     width: 100%;
     text-align: center;
     justify-content: center;
   }
 
-  &.btn--table {
+  &--table {
     padding: 4px 9px;
     border: none;
     margin: 5px 6px 0;
@@ -434,7 +434,7 @@ pre code.hljs {
     background: hsl(0,0%,98%);
   }
 
-  &.btn--action {
+  &--action {
     text-transform: uppercase;
     color: hsl(0,0%,60%);
     font-size: 12px;
@@ -471,7 +471,7 @@ pre code.hljs {
   }
 
   // used in .recipientList-controls and in breadcrumbs
-  &.btn--onDark {
+  &--onDark {
     background: hsla(200,100%,97%,0.15);
     border-color: hsl(250,7%,16%);
     color: white;
@@ -481,7 +481,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--primary {
+  &--primary {
     color: white;
     background: hsl(203,65%,55%);
     &:active {
@@ -493,13 +493,13 @@ pre code.hljs {
     }
   }
 
-  &.btn--secondary {
+  &--secondary {
     color: hsl(202,68%,54%);
   }
 
-  &.btn--positive,
-  &.btn--create,
-  &.btn--success {
+  &--positive,
+  &--create,
+  &--success {
     color: white;
     background: hsl(145,51%,45%);
 
@@ -521,7 +521,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--danger {
+  &--danger {
     color: white;
     background: hsl(0,65%,55%);
     
@@ -539,7 +539,7 @@ pre code.hljs {
     }
   }
 
-  &.btn--text {
+  &--text {
     font-size: inherit;
     margin: -10px;
     padding: 10px;
@@ -603,12 +603,13 @@ pre code.hljs {
     }
   }
 
-  &.btn--textLarge {
-    @extend .btn--text;
-    margin: 0px;
+  &--large {
+    &.btn--text {
+      margin: 0;
+    }
   }
 
-  &.btn--quad {
+  &--quad {
     padding: 10px 12px 9px;
 
     .icon {
@@ -616,21 +617,21 @@ pre code.hljs {
     }
   }
 
-  &.btn--split--first {
+  &--split--first {
     @include bidi-style(border-radius, 3px 0 0 3px, border-radius, 0 3px 3px 0);
   }
-  &.btn--split,
-  &.btn--split--last {
+  &--split,
+  &--split--last {
     border-radius: 0;
     @include bidi-style(border-left-width, 0, border-right-width, 1px);
     @include ltr(margin-left, 0 !important);
     @include rtl(margin-right, 0 !important);
   }
-  &.btn--split--last {
+  &--split--last {
     @include bidi-style(border-radius, 0 3px 3px 0, border-radius, 3px 0 0 3px);
   }
 
-  &.btn--dropdown {
+  &--dropdown {
     position: relative;
 
     select {
@@ -717,7 +718,7 @@ pre code.hljs {
   display: inline-flex;
   flex-wrap: wrap;
 
-  &.btn-group--full {
+  &--full {
     display: flex;
   }
 
@@ -744,7 +745,7 @@ pre code.hljs {
     }
   }
 
-  .btn--text, .btn--textLarge {
+  .btn--text {
     padding: 6px 10px 5px; /* reporting main.eco */
     display: inline-block;
     border-radius: 3px;

From a59c23e9f735e5fdb8c603dcf885bdf734adbd03 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 26 Sep 2017 09:26:40 +0200
Subject: [PATCH 2/3] Login: align login buttons

fixes #1475
---
 app/assets/stylesheets/zammad.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index fdc4abbd2..33899e941 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -2334,6 +2334,10 @@ kbd {
         0 6px 20px 0 rgba(0, 0, 0, 0.09);
     }
   }
+
+  .btn:not(.btn--text) {
+    min-width: calc(33% - 6px); // auth provider width
+  }
 }
 
 .login .hero-unit {

From 17fdf715d3a69ff556f0df08fe32d3c5b3635365 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 26 Sep 2017 09:36:32 +0200
Subject: [PATCH 3/3] Login: adjust login width decimal place

see #1475
---
 app/assets/stylesheets/zammad.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 33899e941..f99576096 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -2336,7 +2336,7 @@ kbd {
   }
 
   .btn:not(.btn--text) {
-    min-width: calc(33% - 6px); // auth provider width
+    min-width: calc(33.33% - 6px); // auth provider width
   }
 }