Skip to content

Commit b807e03

Browse files
wesleycolewesleycole
committed
building out the tabs JS plugin and default styles
1 parent 71f141e commit b807e03

24 files changed

+274
-10
lines changed

‎_component/accordion/component-wp.html renamed to ‎_component/accordion/component.php

File renamed without changes.

‎_component/accordion/component-twig.html renamed to ‎_component/accordion/component.twig

File renamed without changes.

‎_component/tabs/component.html

Whitespace-only changes.

‎_component/tabs/component.php

Whitespace-only changes.

‎_component/tabs/component.twig

Whitespace-only changes.

‎_component/tabs/css/component.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Tabs-link {
2+
background: #f9f9f9;
3+
color: #ccc;
4+
display: inline-block;
5+
padding: 10px 15px;
6+
text-decoration: none;
7+
transition: all 0.3s ease-in-out;
8+
}
9+
10+
.Tabs-link:hover,
11+
.Tabs-link.is-active {
12+
background: #eee;
13+
color: #222;
14+
}
15+
16+
.Tab {
17+
border: 2px solid #eee;
18+
display: none;
19+
padding: 30px 15px;
20+
}
21+
22+
.Tab.is-active {
23+
display: block;
24+
}

‎_component/tabs/css/component.scss

Whitespace-only changes.

‎_component/tabs/example.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US" class="no-js">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Accordion</title>
6+
<link rel="stylesheet" href="css/component.css" />
7+
</head>
8+
<body>
9+
10+
<div class="Tabs">
11+
<nav class="Tabs-nav">
12+
<a href="#" class="Tabs-link is-active">Tab 1</a>
13+
<a href="#" class="Tabs-link">Tab 2</a>
14+
</nav>
15+
<div class="Tab is-active">
16+
Tab 1 Content
17+
</div>
18+
<div class="Tab">
19+
Tab 2 Content
20+
</div>
21+
</div><!-- //.Tabs -->
22+
23+
<script src="js/component.js"></script>
24+
<script src="js/component-usage.js"></script>
25+
</body>
26+
</html>

‎_component/tabs/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ layout: component
55
path_slug: tabs
66
category: ui
77
iframe_height: medium
8-
---
8+
---
9+
10+
<iframe {% if page.iframe_height %}class="h-{{ page.iframe_height }}"{% endif %} src="{{ site.baseurl }}/component/{{ page.path_slug }}/example.html"></iframe>

‎_component/tabs/js/component-usage.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
Objectiv.tabs({
2+
target: '.Tabs', // ID (or class) of accordion container
3+
});

0 commit comments

Comments
 (0)