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-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>

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-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>

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

@ -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>

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

@ -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 %>

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

@ -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>

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

@ -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 {