From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 components/tabs/tabs-disabled.html |  8 ++++++++
 components/tabs/tabs-header.html   |  8 ++++++++
 components/tabs/tabs-menu.html     |  8 ++++++++
 components/tabs/tabs.scss          | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 59 insertions(+)
 create mode 100644 components/tabs/tabs-disabled.html
 create mode 100644 components/tabs/tabs-header.html
 create mode 100644 components/tabs/tabs-menu.html
 create mode 100644 components/tabs/tabs.scss

(limited to 'components/tabs')

diff --git a/components/tabs/tabs-disabled.html b/components/tabs/tabs-disabled.html
new file mode 100644
index 0000000..5e67f2a
--- /dev/null
+++ b/components/tabs/tabs-disabled.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-header">
+    <ul class="sdc-tabs-list" role="tablist">
+        <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+        <li class="sdc-tab" role="tab" disabled>tab 2</li>
+        <li class="sdc-tab" role="tab" disabled>tab 3</li>
+    </ul>
+    <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs-header.html b/components/tabs/tabs-header.html
new file mode 100644
index 0000000..622dc32
--- /dev/null
+++ b/components/tabs/tabs-header.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-header">
+    <ul class="sdc-tabs-list" role="tablist">
+        <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+        <li class="sdc-tab" role="tab">tab 2</li>
+        <li class="sdc-tab" role="tab">tab 3</li>
+    </ul>
+    <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs-menu.html b/components/tabs/tabs-menu.html
new file mode 100644
index 0000000..753886f
--- /dev/null
+++ b/components/tabs/tabs-menu.html
@@ -0,0 +1,8 @@
+<div class="sdc-tabs sdc-tabs-menu">
+    <ul class="sdc-tabs-list" role="tablist">
+        <li class="sdc-tab sdc-tab-active" role="tab">tab 1</li>
+        <li class="sdc-tab" role="tab">tab 2</li>
+        <li class="sdc-tab" role="tab">tab 3</li>
+    </ul>
+    <div class="sdc-tab-content" role="tabpanel"><div>This is the active tab content</div></div>
+</div>
diff --git a/components/tabs/tabs.scss b/components/tabs/tabs.scss
new file mode 100644
index 0000000..f5df0ba
--- /dev/null
+++ b/components/tabs/tabs.scss
@@ -0,0 +1,35 @@
+.sdc-tabs {
+  .sdc-tab {
+	display: inline-block;
+	cursor: pointer;
+	text-transform: capitalize;
+	color: $dark-gray;
+	padding: 0px 10px 7px 10px;
+	margin-right: 20px;
+	&:last-child {
+	  margin-right: 0;
+	}
+	&.sdc-tab-active {
+	  color: $blue;
+	  border-bottom: 2px solid $blue;
+	}
+	&[disabled] {
+		opacity: 0.3;
+    cursor: default;
+	}
+  }
+  &.sdc-tabs-header {
+	.sdc-tab {
+	  @include heading-2;
+	}
+  }
+  &.sdc-tabs-menu {
+	.sdc-tab {
+	  @include body-1;
+	  padding: 0px 10px 4px 10px;
+	}
+  }
+  .sdc-tab-content {
+	margin-top: 30px;
+  }
+}
-- 
cgit 1.2.3-korg