css: refactor controls--emailSwitch to generic --button

app/assets/javascripts/app/views/layout_ref/inputs.jst.eco

@@ -2,6 +2,21 @@
   <h1>Inputs</h1>
 
   <div style="max-width: 500px">
+    <h2>Color</h2>
+    <div class="color form-group">
+      <div class="formGroup-label">
+        <label for="background-color"><%- @T('Background color') %></label>
+      </div>
+      <div class="controls controls--button">
+        <input type="text" id="background-color" value="">
+        <div class="controls-button">
+          <div class="controls-button-inner u-clickable">
+            <%- @Icon('eyedropper') %>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <h2>Time</h2>
     <p>A time of the day</p>
     <input type="text" value="14:40" class="time js-timepicker1">

app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco

@@ -103,13 +103,13 @@
   <div class="merge-target">
     <label>Email</label>
     <div class="merge-value">
-      <div class="primary-email-switch-holder">
+      <div class="controls-button">
         <span class="primary-email-switch-label">nicole.braun@zammad.org</span>
         <input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-1" checked><label for="input-1">main</label>
       </div>
     </div>
     <div class="merge-value">
-      <div class="primary-email-switch-holder">
+      <div class="controls-button">
         <span class="primary-email-switch-label">nicole.mueller@zammad.org</span>
         <input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-2"><label for="input-2">main</label>
       </div>

app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco

@@ -38,14 +38,16 @@
                 <span class="formGroup-metaControl js-addEmail" title="Add Email Address">+</span>
               </div>
 
-              <div class="controls controls--emailSwitch">
+              <div class="controls controls--button">
                 <input class="form-control" id="User_510389_email1" name="email" required="" type="email" value="">
-                <div class="primary-email-switch-holder">
+                <div class="controls-button">
+                  <div class="controls-button-inner">
                     <input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
                     <label for="User_510389_email1_switch">primary</label>
                   </div>
                 </div>
               </div>
+            </div>
 
             <div class="input form-group formGroup--halfSize">
               <div class="formGroup-label">
@@ -53,14 +55,16 @@
                 <span class="formGroup-metaControl js-removeEmail" title="Remove Email Address">&times;</span>
               </div>
 
-              <div class="controls controls--emailSwitch">
+              <div class="controls controls--button">
                 <input class="form-control" id="User_510389_email2" name="email" required="" type="email" value="">
-                <div class="primary-email-switch-holder">
+                <div class="controls-button">
+                  <div class="controls-button-inner">
                     <input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
                     <label for="User_510389_email2_switch">primary</label>
                   </div>
                 </div>
               </div>
+            </div>
 
             <div class="input form-group formGroup--halfSize">
               <div class="formGroup-label">

app/assets/stylesheets/zammad.scss

@@ -1632,10 +1632,6 @@ input.time.time--12 {
   }
 }
 
-  .primary-email-switch-holder {
-    position: relative;
-    display: flex;
-    
 .primary-email-switch-label {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -1648,19 +1644,19 @@ input.time.time--12 {
   display: flex;
   align-items: center;
 }
-  }
 
-  .controls--emailSwitch {
+.controls--button {
   display: flex;
   
+  input,
   .form-control {
     flex: 1;
     border-right: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     
-      &:focus + .primary-email-switch-holder {
+    &:focus + .controls-button {
-        label {
+      .controls-button-inner {
         border-color: hsl(200,71%,59%);
       }
       
@@ -1681,15 +1677,27 @@ input.time.time--12 {
       }
     }
   }
+}
 
-    .primary-email-switch-holder label {
+.controls-button {
-      padding: 0 9px;
+  position: relative;
+  display: flex;
+
+  &.is-active .icon  {
+    fill: $highlight-color;
+  }
+}
+
+.controls-button-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
   background: white;
   position: relative;
   border: 1px solid hsl(0, 0%, 90%);
   border-radius: 0 3px 3px 0;
 }
-  }
 
 .searchfield {
   position: relative;
@@ -7643,24 +7651,11 @@ output {
     transform-origin: left top;
     overflow: hidden;
 
-    &[data-mode=screenshot] iframe,
+    &.is-picking {
-    &[data-mode=iframe] img {
+      cursor: image_url("/assets/images/eyedropper.gif") 0 15, auto;
-      display: none;
     }
   }
 
-  iframe {
-    position: absolute;
-    border: none;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: white;
-    border-radius: 0 0 5px 5px;
-    pointer-events: none;
-  }
-
   img {
     vertical-align: bottom;
   }