rework nav-tab design
This commit is contained in:
Felix Niklas
parent
a1f3f08ff0
commit
c294fba2e3
5 changed files with 205 additions and 282 deletions
|
|
@ -363,6 +363,7 @@ class App.ControllerTabs extends App.Controller
|
|||
super
|
||||
|
||||
render: ->
|
||||
@el.addClass 'main--tabs'
|
||||
|
||||
@html App.view('generic/tabs')(
|
||||
header: @header
|
||||
|
|
|
|||
|
|
@ -1,196 +1,188 @@
|
|||
<div class="page-header">
|
||||
<div class="page-header-title">
|
||||
<h1><%- @T('Chat Widget') %></h1>
|
||||
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
|
||||
|
||||
<% if _.isEmpty(@chats): %>
|
||||
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
||||
<% else: %>
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Name') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Note') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for chat in @chats: %>
|
||||
<tr data-id="<%= chat.id %>">
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<a class="js-edit is-clickable"><%= chat.name %></a>
|
||||
</label>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<%= chat.note %>
|
||||
</label>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<%= chat.max_queue %>
|
||||
</label>
|
||||
<td>
|
||||
<div class="settings-list-rowControls">
|
||||
<div class="btn btn--text js-remove">
|
||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<tr class="settings-list-controlRow">
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<div class="btn btn--text js-add">
|
||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
|
||||
<h2><%- @T('Designer') %></h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="formGroup-label"><%- @T('Preview Width') %></label>
|
||||
<div class="control">
|
||||
<div class="select-tabs js-selectBrowserWidth">
|
||||
<div class="tab" data-value="375">iPhone 6</div>
|
||||
<div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
|
||||
<div class="tab" data-value="1280">MacBook</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
|
||||
|
||||
<% if _.isEmpty(@chats): %>
|
||||
<p><%- @T('You have no configured chat\'s right now.') %></p>
|
||||
<% else: %>
|
||||
<div class="browser chat-demo js-browser">
|
||||
<div class="browser-head">
|
||||
<form class="browser-input js-testurl" novalidate>
|
||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
||||
</form>
|
||||
</div>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
<style>@import "/assets/chat/chat.css";</style>
|
||||
<div class="chat-demo-animationHolder">
|
||||
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
|
||||
<div class="zammad-chat-header js-chat-open js-backgroundColor">
|
||||
<div class="zammad-chat-header-controls">
|
||||
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
|
||||
<span class="zammad-chat-header-icon">
|
||||
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
|
||||
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="zammad-chat-agent">
|
||||
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
|
||||
<span class="zammad-chat-agent-sentence">
|
||||
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="zammad-chat-welcome zammad-chat-is-hidden">
|
||||
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
|
||||
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zammad-chat-body">
|
||||
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div>
|
||||
<div class="zammad-chat-message zammad-chat-message--customer">
|
||||
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span>
|
||||
</div>
|
||||
<div class="zammad-chat-message zammad-chat-message--agent">
|
||||
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="zammad-chat-controls">
|
||||
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
|
||||
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="js-params">
|
||||
<fieldset>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-title"><%- @T('Chat Title') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-title" name="title" value="<strong>Chat</strong> with us!">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
|
||||
</div>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-background"><%- @T('Background color') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-background" name="background" value="">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
|
||||
</div>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Name') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Note') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Max Queue') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Delete') %></th>
|
||||
<th style="white-space: nowrap;"><%- @T('Option') %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% for chat in @chats: %>
|
||||
<tr data-id="<%= chat.id %>">
|
||||
<tr>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<a class="js-edit is-clickable"><%= chat.name %></a>
|
||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||
<input type="checkbox" name="debug" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</span>
|
||||
<%- @T('Enable debugging for implementation.') %>
|
||||
</label>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<%= chat.note %>
|
||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||
<input type="checkbox" name="flat" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</span>
|
||||
<%- @T('Flat design.') %>
|
||||
</label>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<%= chat.max_queue %>
|
||||
</label>
|
||||
<td>
|
||||
<div class="settings-list-rowControls">
|
||||
<div class="btn btn--text js-remove">
|
||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<tr class="settings-list-controlRow">
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<div class="btn btn--text js-add">
|
||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||
</div>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<% end %>
|
||||
|
||||
<h2><%- @T('Designer') %></h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="formGroup-label"><%- @T('Preview Width') %></label>
|
||||
<div class="control">
|
||||
<div class="select-tabs js-selectBrowserWidth">
|
||||
<div class="tab" data-value="375">iPhone 6</div>
|
||||
<div class="tab is-selected" data-value="fit"><%- @T('Fit Width') %></div>
|
||||
<div class="tab" data-value="1280">MacBook</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="browser chat-demo js-browser">
|
||||
<div class="browser-head">
|
||||
<form class="browser-input js-testurl" novalidate>
|
||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
||||
</form>
|
||||
</div>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
<style>@import "/assets/chat/chat.css";</style>
|
||||
<div class="chat-demo-animationHolder">
|
||||
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
|
||||
<div class="zammad-chat-header js-chat-open js-backgroundColor">
|
||||
<div class="zammad-chat-header-controls">
|
||||
<span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
|
||||
<span class="zammad-chat-header-icon">
|
||||
<svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
|
||||
<svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="zammad-chat-agent">
|
||||
<img class="zammad-chat-agent-avatar" src="/assets/images/chat-demo-avatar.png">
|
||||
<span class="zammad-chat-agent-sentence">
|
||||
<span class="zammad-chat-agent-name"><%- @T('John Smith') %></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="zammad-chat-welcome zammad-chat-is-hidden">
|
||||
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
|
||||
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zammad-chat-body">
|
||||
<div class="zammad-chat-timestamp"><strong><%- @T('Today') %></strong> 14:45</div>
|
||||
<div class="zammad-chat-message zammad-chat-message--customer">
|
||||
<span class="zammad-chat-message-body js-backgroundColor"><%- @T('Hello! I need help with your product.') %></span>
|
||||
</div>
|
||||
<div class="zammad-chat-message zammad-chat-message--agent">
|
||||
<span class="zammad-chat-message-body"><%- @T('Hi! Which one of our products?') %></span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="zammad-chat-controls">
|
||||
<textarea class="zammad-chat-input" rows="1" placeholder="Ihre Nachricht..."></textarea>
|
||||
<button type="submit" class="zammad-chat-button zammad-chat-send js-backgroundColor"><%- @T('Send') %></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
||||
|
||||
<form class="js-params">
|
||||
<fieldset>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-title"><%- @T('Chat Title') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-title" name="title" value="<strong>Chat</strong> with us!">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
|
||||
</div>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-background"><%- @T('Background color') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-background" name="background" value="">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
|
||||
</div>
|
||||
<div class="input form-group formGroup--halfSize">
|
||||
<div class="formGroup-label">
|
||||
<label for="form-chat-fontsize"><%- @T('Font size') %></label>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input type="text" id="form-chat-fontsize" name="fontSize" value="12px">
|
||||
</div>
|
||||
<span class="help-block"><%- @T('The default font size is 12px.') %></span>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;"><%- @T('Option') %></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||
<input type="checkbox" name="debug" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</span>
|
||||
<%- @T('Enable debugging for implementation.') %>
|
||||
</label>
|
||||
<tr>
|
||||
<td>
|
||||
<label class="inline-label">
|
||||
<span class="checkbox-replacement checkbox-replacement--inline">
|
||||
<input type="checkbox" name="flat" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</span>
|
||||
<%- @T('Flat design.') %>
|
||||
</label>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
|
||||
|
||||
<pre>
|
||||
<pre>
|
||||
<script src="<%= @baseurl %>/assets/chat/chat.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
new ZammadChat({
|
||||
new ZammadChat({
|
||||
<span class="js-modal-params"></span>
|
||||
});
|
||||
});
|
||||
});
|
||||
</script></pre>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<div class="js-settings"></div>
|
||||
|
||||
</div>
|
||||
<div class="js-settings"></div>
|
||||
|
|
@ -2,6 +2,13 @@
|
|||
<div class="page-header-title">
|
||||
<h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
|
||||
</div>
|
||||
<% if @addTab: %>
|
||||
<div class="page-header-meta">
|
||||
<div class="btn btn--success btn--quad">
|
||||
<%- @Icon('plus') %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div class="page-tabs">
|
||||
|
|
@ -10,11 +17,6 @@
|
|||
<li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% if @addTab: %>
|
||||
<div class="btn btn--success btn--quad">
|
||||
<%- @Icon('plus') %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="tab-content"></div>
|
||||
</div>
|
||||
71
app/assets/stylesheets/bootstrap.css
vendored
71
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -2491,7 +2491,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
.nav > li.disabled > a {
|
||||
color: #777;
|
||||
|
|
@ -2518,75 +2517,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
|||
.nav > li > a > img {
|
||||
max-width: none;
|
||||
}
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
.nav-tabs > li {
|
||||
float: left;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.nav-tabs > li > a {
|
||||
margin-right: 2px;
|
||||
line-height: 1.42857143;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
border-color: #eee #eee #ddd;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
color: #555;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.nav-tabs.nav-justified {
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs.nav-justified > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.nav-tabs.nav-justified > li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
margin-right: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.nav-tabs.nav-justified > .active > a,
|
||||
.nav-tabs.nav-justified > .active > a:hover,
|
||||
.nav-tabs.nav-justified > .active > a:focus {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1831,9 +1831,30 @@ kbd {
|
|||
color: initial;
|
||||
}
|
||||
|
||||
.main--tabs .page-header {
|
||||
background: hsl(200,12%,90%);
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main--tabs .page-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.page-tabs {
|
||||
display: flex;
|
||||
margin: 28px 0 50px;
|
||||
margin: -20px -20px 50px;
|
||||
padding: 0 20px;
|
||||
background: hsl(200,12%,90%);
|
||||
border-bottom: 1px solid hsl(200,12%,87%);
|
||||
|
||||
.nav-tabs li.active {
|
||||
background: hsl(210,17%,98%);
|
||||
border-bottom-color: hsl(210,17%,98%);
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: auto;
|
||||
|
|
@ -3351,9 +3372,10 @@ footer {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.main.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
.main--tabs,
|
||||
.main.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-family: inherit;
|
||||
|
|
@ -5629,46 +5651,21 @@ footer {
|
|||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.nav-tabs li {
|
||||
margin: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid hsl(200,12%,87%);
|
||||
border-bottom-color: transparent;
|
||||
background: hsl(197,14%,93%);
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a,
|
||||
.nav-tabs > li > a:hover,
|
||||
.nav-tabs > li > a:focus {
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
border: 1px solid hsl(0,0%,90%);
|
||||
color: hsl(0,0%,70%);
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li:not(:last-child):not(:only-child) > a {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tabs > li:first-child > a {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.nav-tabs > li:last-child > a {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li:only-child > a {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.active > a:focus {
|
||||
background: hsl(206,7%,28%);
|
||||
color: white;
|
||||
border-color: hsl(0,0%,90%);
|
||||
.nav-tabs li.active {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue