Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

adjust modal close icon

Browse source
This commit is contained in:
Felix Niklas 2015-05-08 18:33:50 +02:00
parent 37b7b27525
commit 78db8baa77
6 changed files with 35 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/agent_user_create.jst.eco
View file

@ -3,7 +3,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<div class="close icon"></div> <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
</div> </div>
<h1 class="modal-title"><%- @T( @head ) %></h1> <h1 class="modal-title"><%- @T( @head ) %></h1>
</div> </div>

2
app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
View file

@ -6,7 +6,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<div class="modal-close js-close"> <div class="modal-close js-close">
<div class="close icon"></div> <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
</div> </div>
<h1 class="modal-title">Edit Customer</h1> <h1 class="modal-title">Edit Customer</h1>
</div> </div>

2
app/assets/javascripts/app/views/modal.jst.eco
View file

@ -4,7 +4,7 @@
<div class="modal-header"> <div class="modal-header">
<% if @close: %> <% if @close: %>
<div class="modal-close js-close"> <div class="modal-close js-close">
<div class="close icon"></div> <svg class="close-icon"><use xlink:href="#icon-close" /></svg>
</div> </div>
<% end %> <% end %>
<h1 class="modal-title"><%- @T( @head ) %></h1> <h1 class="modal-title"><%- @T( @head ) %></h1>

6
app/assets/javascripts/app/views/navigation/result.jst.eco
View file

@ -2,9 +2,9 @@
<% if i > 0: %> <li class="divider"></li> <% end %> <% if i > 0: %> <li class="divider"></li> <% end %>
<% for item in area.result: %> <% for item in area.result: %>
<li> <li>
<a href="<%- item.url %>" class="tab tab--search <%= item.class %>" data-id="<%= item.id %>"> <a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>">
<svg class="tab-icon tab-icon--search"><use xlink:href="#icon-<%= item.iconClass %>" /></svg> <svg class="nav-tab-icon tab-icon--search"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
<span class="tab-name flex u-textTruncate"><%= item.display %></span> <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
</a> </a>
</li> </li>
<% end %> <% end %>

10
app/assets/javascripts/app/views/task_widget_tasks.jst.eco
View file

@ -1,6 +1,6 @@
<% for item in @item_list: %> <% 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 %>"> <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="tab-icon"> <svg class="nav-tab-icon">
<% if item.task.notify && item.data.iconClass is 'priority': %> <% if item.task.notify && item.data.iconClass is 'priority': %>
<use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" /> <use class="inner-circle" xlink:href="#icon-priority-modified-inner-circle" />
<use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" /> <use class="outer-circle" xlink:href="#icon-priority-modified-outer-circle" />
@ -8,9 +8,9 @@
<use xlink:href="#icon-<%= item.data.iconClass %>" /> <use xlink:href="#icon-<%= item.data.iconClass %>" />
<% end %> <% end %>
</svg> </svg>
<div class="tab-name u-textTruncate flex"><%= item.data.head %></div> <div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div>
<div class="closeTab js-close" title="<%- @Ti('close') %>"> <div class="nav-tab-close js-close" title="<%- @Ti('close') %>">
<div class="closeTab-inner"> <div class="nav-tab-close-inner">
<svg class="icon"><use xlink:href="#icon-close" /></svg> <svg class="icon"><use xlink:href="#icon-close" /></svg>
</div> </div>
</div> </div>

46
app/assets/stylesheets/zammad.css.scss
View file

@ -2113,27 +2113,27 @@ footer {
color: hsl(198,19%,72%); color: hsl(198,19%,72%);
} }
.tab { .nav-tab {
padding: 10px 15px 7px 0; padding: 10px 15px 7px 0;
position: relative; position: relative;
color: #808080; color: #808080;
@extend .u-clickable, .horizontal, .center; @extend .u-clickable, .horizontal, .center;
} }
.tasks-navigation .tab { .tasks-navigation .nav-tab {
height: 38px; height: 38px;
border-bottom: 1px solid #33363e; border-bottom: 1px solid #33363e;
} }
.tasks-navigation .tab:not(.is-active):hover { .tasks-navigation .nav-tab:not(.is-active):hover {
background: #26272e; background: #26272e;
} }
.navigation .tab-name { .navigation .nav-tab-name {
text-align: left; text-align: left;
} }
.tasks-navigation .tab-icon { .tasks-navigation .nav-tab-icon {
&.loading { &.loading {
width: 10px; width: 10px;
@ -2145,26 +2145,26 @@ footer {
} }
} }
.tab:hover { .nav-tab:hover {
color: #808080; color: #808080;
text-decoration: none; text-decoration: none;
} }
.tab.is-active, .nav-tab.is-active,
.tab.tab--search:hover { .nav-tab.nav-tab--search:hover {
background: #389ed9; background: #389ed9;
color: white; color: white;
.tab-icon { .nav-tab-icon {
fill: white; fill: white;
} }
} }
.tab.tab--search { .nav-tab.nav-tab--search {
height: 30px; height: 30px;
} }
.tab-icon { .nav-tab-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: #808080; fill: #808080;
@ -2176,25 +2176,25 @@ footer {
.level-1.is-active { .level-1.is-active {
background-color: #38ae6a; background-color: #38ae6a;
} }
.level-1 .tab-icon { .level-1 .nav-tab-icon {
fill: #38ae6a; fill: #38ae6a;
} }
.level-2.is-active { .level-2.is-active {
background-color: #f35910; background-color: #f35910;
} }
.level-2 .tab-icon { .level-2 .nav-tab-icon {
fill: #f35910; fill: #f35910;
} }
.level-3.is-active { .level-3.is-active {
background-color: #faab00; background-color: #faab00;
} }
.level-3 .tab-icon { .level-3 .nav-tab-icon {
fill: #faab00; fill: #faab00;
} }
.tab-icon .inner-circle { .nav-tab-icon .inner-circle {
will-change: opacity; will-change: opacity;
animation: fade 3s ease-in-out infinite; animation: fade 3s ease-in-out infinite;
} }
@ -2205,7 +2205,7 @@ footer {
to { opacity: 1 } to { opacity: 1 }
} }
.tab .closeTab { .nav-tab-close {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@ -2215,11 +2215,11 @@ footer {
@extend .u-clickable, .centered; @extend .u-clickable, .centered;
} }
.tab:hover .closeTab { .nav-tab:hover .nav-tab-close {
visibility: visible; visibility: visible;
} }
.closeTab-inner { .nav-tab-close-inner {
width: 21px; width: 21px;
height: 21px; height: 21px;
background-color: #2c2d36; background-color: #2c2d36;
@ -2227,11 +2227,11 @@ footer {
@extend .centered; @extend .centered;
} }
.closeTab:hover .closeTab-inner { .nav-tab-close:hover .nav-tab-close-inner {
background-color: #972e29; background-color: #972e29;
} }
.closeTab .icon { .nav-tab-close .icon {
width: 13px; width: 13px;
height: 13px; height: 13px;
fill: white; fill: white;
@ -2240,7 +2240,7 @@ footer {
transform: scale(0.7); transform: scale(0.7);
} }
.closeTab:hover .icon { .nav-tab-close:hover .icon {
opacity: 1; opacity: 1;
} }
@ -4341,8 +4341,10 @@ footer {
@extend .u-clickable; @extend .u-clickable;
} }
.modal-close .close.icon { .modal-close .close-icon {
opacity: 0.18; opacity: 0.18;
width: 13px;
height: 13px;
} }
.modal-body { .modal-body {