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,11 +38,13 @@
                 <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">
-                  <input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
+                  <div class="controls-button-inner">
-                  <label for="User_510389_email1_switch">primary</label>
+                    <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>
@@ -53,11 +55,13 @@
                 <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">
-                  <input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
+                  <div class="controls-button-inner">
-                  <label for="User_510389_email2_switch">primary</label>
+                    <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>

app/assets/stylesheets/zammad.scss

@@ -1506,190 +1506,198 @@ input.time.time--12 {
   width: 7.5ch;
 }
 
-  .tokenfield.focus {
+.tokenfield.focus {
-    border-color: hsl(200,71%,59%);
+  border-color: hsl(200,71%,59%);
-    box-shadow: 0 0 0 3px hsl(201,62%,90%);
+  box-shadow: 0 0 0 3px hsl(201,62%,90%);
-  }
+}
 
-  .richtext.form-control {
+.richtext.form-control {
-    padding-bottom: 28px;
+  padding-bottom: 28px;
-  }
+}
 
-  .richtext.form-control [contenteditable] {
+.richtext.form-control [contenteditable] {
-    height: auto;
+  height: auto;
-    min-height: 82px;
+  min-height: 82px;
-    background: none;
+  background: none;
-  }
+}
 
-  .richtext.form-control .attachments.attachments--list:not(:empty) {
+.richtext.form-control .attachments.attachments--list:not(:empty) {
-    border-top: 1px solid rgba(0,0,0,.04);
+  border-top: 1px solid rgba(0,0,0,.04);
-    white-space: normal;
+  white-space: normal;
-    margin: 0 -12px -28px;
+  margin: 0 -12px -28px;
-    padding: 25px 20px 21px 72px;
+  padding: 25px 20px 21px 72px;
-    position: relative;
+  position: relative;
-    line-height: 1;
+  line-height: 1;
-  }
+}
 
-  textarea.form-control {
+textarea.form-control {
-    height: 118px;
+  height: 118px;
-  }
+}
 
-  select.form-control:not([multiple]) {
+select.form-control:not([multiple]) {
-    padding-left: 10px;
+  padding-left: 10px;
-    padding-right: 34px;
+  padding-right: 34px;
-    word-wrap: normal;
+  word-wrap: normal;
-  }
+}
 
-  .form-control.is-hidden {
+.form-control.is-hidden {
-    display: none;
+  display: none;
-  }
+}
 
-  .form-control[disabled], .form-control.is-disabled {
+.form-control[disabled], .form-control.is-disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
-    background-color: #fff;
+  background-color: #fff;
-    color: #d5d5d5;
+  color: #d5d5d5;
-    opacity: 1;
+  opacity: 1;
-  }
+}
 
-  .form-control.form-control--borderless {
+.form-control.form-control--borderless {
-    border: none;
+  border: none;
-    padding: 0;
+  padding: 0;
-    line-height: inherit;
+  line-height: inherit;
-    height: auto;
+  height: auto;
   
-    &:focus {
+  &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .form-control + .icon-arrow-down,
-  .dropdown-arrow {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    margin-top: -3px;
-    fill: black;
-    opacity: 0.39;
-    width: 13px;
-    height: 7px;
-    @extend .u-unclickable;
-  }
-
-  /* 
-
-    Firefox only hack
-    -----------------
-
-    Firefox below version 35 doesn't allow us to 
-    hide the dropdown arrow but we want to replace 
-    it with our own icon. So we have to hide our own 
-    icon in Firefox versions under 35.
-    
-    The class is set via Javascript
-
-  */
-
-  html.ff-lt-35 .form-control + .icon-arrow-down,
-  html.ff-lt-35 .dropdown-arrow {
-    display: none;
-  }
-
-  select::-ms-expand {
-    display: none;
-  }
-
-  .has-error .form-control,
-  .has-error .form-control:focus,
-  .has-error .form-control.focus {
     box-shadow: none;
-    border-color: red !important;
+  }
+}
+
+.form-control + .icon-arrow-down,
+.dropdown-arrow {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  margin-top: -3px;
+  fill: black;
+  opacity: 0.39;
+  width: 13px;
+  height: 7px;
+  @extend .u-unclickable;
+}
+
+/* 
+
+  Firefox only hack
+  -----------------
+
+  Firefox below version 35 doesn't allow us to 
+  hide the dropdown arrow but we want to replace 
+  it with our own icon. So we have to hide our own 
+  icon in Firefox versions under 35.
+  
+  The class is set via Javascript
+
+*/
+
+html.ff-lt-35 .form-control + .icon-arrow-down,
+html.ff-lt-35 .dropdown-arrow {
+  display: none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+.has-error .form-control,
+.has-error .form-control:focus,
+.has-error .form-control.focus {
+  box-shadow: none;
+  border-color: red !important;
+}
+
+input.has-error {
+  box-shadow: none;
+  border-color: red !important;
+}
+
+.help-inline:not(:empty) {
+  color: red;
+  padding: 2px;
+  font-size: 13px;
+}
+
+/* use on input[type=radio] */
+.primary-email-switch {
+  display: none;
+
+  & + label {
+    font-size: 11px;
+    color: #DBDBDB;
+    cursor: pointer;
+    margin: 0;
   }
 
-  input.has-error {
+  &:checked + label {
-    box-shadow: none;
+    color: $highlight-color;
-    border-color: red !important;
   }
+}
 
-  .help-inline:not(:empty) {
+.primary-email-switch-label {
-    color: red;
+  text-overflow: ellipsis;
-    padding: 2px;
+  overflow: hidden;
-    font-size: 13px;
+  white-space: nowrap;
-  }
+}
 
-  /* use on input[type=radio] */
+.primary-email-switch + label {
-  .primary-email-switch {
+  align-self: stretch;
-    display: none;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+}
 
-    & + label {
+.controls--button {
-      font-size: 11px;
+  display: flex;
-      color: #DBDBDB;
-      cursor: pointer;
-      margin: 0;
-    }
   
-    &:checked + label {
+  input,
-      color: $highlight-color;
+  .form-control {
-    }
+    flex: 1;
-  }
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
     
-  .primary-email-switch-holder {
+    &:focus + .controls-button {
-    position: relative;
+      .controls-button-inner {
-    display: flex;
+        border-color: hsl(200,71%,59%);
+      }
       
-    .primary-email-switch-label {
+      /* 
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
 
-    .primary-email-switch + label {
+        fake the form-control outline 
-      align-self: stretch;
-      padding: 0 5px;
-      display: flex;
-      align-items: center;
-    }
-  }
 
-  .controls--emailSwitch {
+      */
-    display: flex;
+      &:before {
-    
+        content: "";
-    .form-control {
+        position: absolute;
-      flex: 1;
+        left: 0;
-      border-right: none;
+        top: -3px;
-      border-top-right-radius: 0;
+        right: -3px;
-      border-bottom-right-radius: 0;
+        bottom: -3px;
-      
+        background: hsl(201,62%,90%);
-      &:focus + .primary-email-switch-holder {
+        border-radius: 0 7px 7px 0;
-        label {
-          border-color: hsl(200,71%,59%);
-        }
-        
-        /* 
-
-          fake the form-control outline 
-
-        */
-        &:before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: -3px;
-          right: -3px;
-          bottom: -3px;
-          background: hsl(201,62%,90%);
-          border-radius: 0 7px 7px 0;
-        }
       }
     }
-
-    .primary-email-switch-holder label {
-      padding: 0 9px;
-      background: white;
-      position: relative;
-      border: 1px solid hsl(0, 0%, 90%);
-      border-radius: 0 3px 3px 0;
-    }
   }
+}
+
+.controls-button {
+  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;
   }