Skip to content
Permalink
Browse files

EZP-29597: Added component Tabs to UI Guidelines Documentation (#398)

  • Loading branch information...
inakijv authored and DominikaK committed Sep 17, 2018
1 parent e235c86 commit 5f6ad985e63e62fbb2c2a90433135eda715edb90
@@ -0,0 +1,28 @@
.ez-guidelines-tabs .ez-code-example {
font-family: 'Noto Sans', 'Helvetica', 'Arial', sans-serif;
}
.ez-guidelines-tabs .ez-code-example .nav-tabs {
margin-left: 0;
border-bottom: 2px solid #e5e3e3;
}
.ez-guidelines-tabs .ez-code-example .nav-tabs .nav-item {
margin-bottom: -2px;
margin-left: 0;
}
.ez-guidelines-tabs .ez-code-example .nav-link {
border: 1px solid transparent;
padding: .5em 1em;
border-top-left-radius: .25em;
border-top-right-radius: .25em;
color: #646464;
}
.ez-guidelines-tabs .ez-code-example .nav-tabs .nav-link:hover {
background-color: #dbdbdb;
border-color: #dbdbdb;
color: #646464;
}
.ez-guidelines-tabs .ez-code-example .nav-tabs .nav-link.active {
background-color: #f5f5f5;
border-color: #f5f5f5;
color: #333;
}
@@ -0,0 +1,35 @@
# Tabs

We use Tabs component to offer structured views of information to users.

###<div class="mgt-1">Standard tabs</div>
<div class="mgt-2 ez-guidelines-tabs">
[[code_example {html}
<ul class="nav nav-tabs ez-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#ez-tab-location-view-content" role="tab" aria-controls="ez-tab-location-view-content" aria-expanded="1">View</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-details" role="tab" aria-controls="ez-tab-location-view-details" aria-expanded="1">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-versions" role="tab" aria-controls="ez-tab-location-view-versions" aria-expanded="1">Versions</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-locations" role="tab" aria-controls="ez-tab-location-view-locations" aria-expanded="1">Locations</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-relations" role="tab" aria-controls="ez-tab-location-view-relations" aria-expanded="1">Relations</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-translations" role="tab" aria-controls="ez-tab-location-view-translations" aria-expanded="1">Translations</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#ez-tab-location-view-urls" role="tab" aria-controls="ez-tab-location-view-urls" aria-expanded="1">URL</a>
</li>
</ul>
code_example]]
</div>

!!! note
Standard tabs component will have a darker background, `ez-header`, in the application that will enhance active tab's color contrast.
@@ -9,4 +9,5 @@
<link rel="stylesheet" href="{{ base_url }}/css/ez-guidelines-colors.css">
<link rel="stylesheet" href="{{ base_url }}/css/ez-guidelines-icons.css">
<link rel="stylesheet" href="{{ base_url }}/css/ez-guidelines-buttons.css">
<link rel="stylesheet" href="{{ base_url }}/css/ez-guidelines-tabs.css">
<link rel="stylesheet" href="{{ base_url }}/css/bootstrap-iso.css">
@@ -163,6 +163,7 @@ pages:
- 'Introduction': 'guidelines/Introduction.md'
- Components:
- 'Buttons': 'guidelines/components/buttons.md'
- 'Tabs': 'guidelines/components/tabs.md'
- Resources:
- 'Typography': 'guidelines/resources/typography.md'
- 'Colors': 'guidelines/resources/colors.md'

0 comments on commit 5f6ad98

Please sign in to comment.
You can’t perform that action at this time.