From 78db8baa77b839fb40c5d84ec979413e397d579b Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 8 May 2015 18:33:50 +0200
Subject: [PATCH] adjust modal close icon

---
 .../app/views/agent_user_create.jst.eco       |  2 +-
 .../app/views/layout_ref/local_modal.jst.eco  |  2 +-
 .../javascripts/app/views/modal.jst.eco       |  2 +-
 .../app/views/navigation/result.jst.eco       |  6 +--
 .../app/views/task_widget_tasks.jst.eco       | 10 ++--
 app/assets/stylesheets/zammad.css.scss        | 46 ++++++++++---------
 6 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/app/views/agent_user_create.jst.eco b/app/assets/javascripts/app/views/agent_user_create.jst.eco
index 1864543b0..89f47efec 100644
--- a/app/assets/javascripts/app/views/agent_user_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_user_create.jst.eco
@@ -3,7 +3,7 @@
   <div class="modal-content">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <div class="close icon"></div>
+        <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
       </div>
       <h1 class="modal-title"><%- @T( @head ) %></h1>
     </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
index 0eb1249f0..c1f3494a0 100644
--- a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
@@ -6,7 +6,7 @@
         <div class="modal-content">
           <div class="modal-header">
             <div class="modal-close js-close">
-              <div class="close icon"></div>
+              <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
             </div>
             <h1 class="modal-title">Edit Customer</h1>
           </div>
diff --git a/app/assets/javascripts/app/views/modal.jst.eco b/app/assets/javascripts/app/views/modal.jst.eco
index 21764759b..b2b47500e 100644
--- a/app/assets/javascripts/app/views/modal.jst.eco
+++ b/app/assets/javascripts/app/views/modal.jst.eco
@@ -4,7 +4,7 @@
       <div class="modal-header">
   <% if @close: %>
         <div class="modal-close js-close">
-          <div class="close icon"></div>
+          <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
         </div>
   <% end %>
         <h1 class="modal-title"><%- @T( @head ) %></h1>
diff --git a/app/assets/javascripts/app/views/navigation/result.jst.eco b/app/assets/javascripts/app/views/navigation/result.jst.eco
index 85a339c33..322dad88a 100644
--- a/app/assets/javascripts/app/views/navigation/result.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/result.jst.eco
@@ -2,9 +2,9 @@
   <% if i > 0: %> <li class="divider"></li> <% end %>
   <% for item in area.result: %>
     <li>
-      <a href="<%- item.url %>" class="tab tab--search <%= item.class %>" data-id="<%= item.id %>">
-        <svg class="tab-icon tab-icon--search"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
-        <span class="tab-name flex u-textTruncate"><%= item.display %></span>
+      <a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>">
+        <svg class="nav-tab-icon tab-icon--search"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
+        <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
       </a>
     </li>
   <% end %>
diff --git a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
index 0d311e962..0e3de05de 100644
--- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
+++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
@@ -1,6 +1,6 @@
 <% for item in @item_list: %>
-  <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="tab <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
-    <svg class="tab-icon">
+  <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab <%= item.data.class %><% if item.task.active: %> is-active<% end %>" data-key="<%- item.task.key %>">
+    <svg class="nav-tab-icon">
       <% if item.task.notify && item.data.iconClass is 'priority': %>
       <use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
       <use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
@@ -8,9 +8,9 @@
       <use xlink:href="#icon-<%= item.data.iconClass %>" />
       <% end %>
     </svg>
-    <div class="tab-name u-textTruncate flex"><%= item.data.head %></div>
-    <div class="closeTab js-close" title="<%- @Ti('close') %>">
-      <div class="closeTab-inner">
+    <div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div>
+    <div class="nav-tab-close js-close" title="<%- @Ti('close') %>">
+      <div class="nav-tab-close-inner">
         <svg class="icon"><use xlink:href="#icon-close" /></svg>
       </div>
     </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index c6422cba1..0919b66e3 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -2113,27 +2113,27 @@ footer {
       color: hsl(198,19%,72%);
     }
 
-  .tab {
+  .nav-tab {
     padding: 10px 15px 7px 0;
     position: relative;
     color: #808080;
     @extend .u-clickable, .horizontal, .center;
   }
 
-    .tasks-navigation .tab {
+    .tasks-navigation .nav-tab {
       height: 38px;
       border-bottom: 1px solid #33363e;
     }
 
-    .tasks-navigation .tab:not(.is-active):hover {
+    .tasks-navigation .nav-tab:not(.is-active):hover {
       background: #26272e;
     }
 
-    .navigation .tab-name {
+    .navigation .nav-tab-name {
       text-align: left;
     }
 
-    .tasks-navigation .tab-icon {
+    .tasks-navigation .nav-tab-icon {
       
       &.loading {
         width: 10px;
@@ -2145,26 +2145,26 @@ footer {
       }
     }
 
-  .tab:hover {
+  .nav-tab:hover {
     color: #808080;
     text-decoration: none;
   }
 
-  .tab.is-active,
-  .tab.tab--search:hover {
+  .nav-tab.is-active,
+  .nav-tab.nav-tab--search:hover {
     background: #389ed9;
     color: white;
     
-    .tab-icon {
+    .nav-tab-icon {
       fill: white;
     }
   }
 
-  .tab.tab--search {
+  .nav-tab.nav-tab--search {
     height: 30px;
   }
 
-  .tab-icon {
+  .nav-tab-icon {
     width: 16px;
     height: 16px;
     fill: #808080;
@@ -2176,25 +2176,25 @@ footer {
   .level-1.is-active {
     background-color: #38ae6a;
   }
-  .level-1 .tab-icon {
+  .level-1 .nav-tab-icon {
     fill: #38ae6a;
   }
 
   .level-2.is-active {
     background-color: #f35910;
   }
-  .level-2 .tab-icon {
+  .level-2 .nav-tab-icon {
     fill: #f35910;
   }
 
   .level-3.is-active {
     background-color: #faab00;
   }
-  .level-3 .tab-icon {
+  .level-3 .nav-tab-icon {
     fill: #faab00;
   }
 
-  .tab-icon .inner-circle {
+  .nav-tab-icon .inner-circle {
     will-change: opacity;
     animation: fade 3s ease-in-out infinite;
   }
@@ -2205,7 +2205,7 @@ footer {
     to { opacity: 1 }
   }
 
-  .tab .closeTab {
+  .nav-tab-close {
     position: absolute;
     right: 0;
     top: 0;
@@ -2215,11 +2215,11 @@ footer {
     @extend .u-clickable, .centered;
   }
 
-    .tab:hover .closeTab {
+    .nav-tab:hover .nav-tab-close {
       visibility: visible;
     }
 
-    .closeTab-inner {
+    .nav-tab-close-inner {
       width: 21px;
       height: 21px;
       background-color: #2c2d36;
@@ -2227,11 +2227,11 @@ footer {
       @extend .centered;
     }
 
-    .closeTab:hover .closeTab-inner {
+    .nav-tab-close:hover .nav-tab-close-inner {
       background-color: #972e29;
     }
 
-    .closeTab .icon {
+    .nav-tab-close .icon {
       width: 13px;
       height: 13px;
       fill: white;
@@ -2240,7 +2240,7 @@ footer {
               transform: scale(0.7);
     }
 
-    .closeTab:hover .icon {
+    .nav-tab-close:hover .icon {
       opacity: 1;
     } 
 
@@ -4341,8 +4341,10 @@ footer {
     @extend .u-clickable;
   }
 
-  .modal-close .close.icon {
+  .modal-close .close-icon {
     opacity: 0.18;
+    width: 13px;
+    height: 13px;
   }
 
   .modal-body {