summaryrefslogtreecommitdiffstats
path: root/components/tabs
diff options
context:
space:
mode:
Diffstat (limited to 'components/tabs')
-rw-r--r--components/tabs/tabs-disabled.html8
-rw-r--r--components/tabs/tabs-header.html8
-rw-r--r--components/tabs/tabs-menu.html8
-rw-r--r--components/tabs/tabs.scss35
4 files changed, 59 insertions, 0 deletions
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;
+ }
+}