diff options
| author |   Israel Lavi <israel.lavi@intl.att.com> | 2018-08-07 11:36:58 +0300 |
|---|---|---|
| committer |   Israel Lavi <il0695@att.com> | 2018-08-07 11:48:04 +0300 |
| commit | 75dc1476d6d592c6c2c54f8d08d3047c90c8f9dc (patch) | |
| tree | b1412c3c7616b07852c941fd21fc9836f2d43e86 /components/tabs | |
| parent | 57a7853903df631a2031b5b57ce4d131364006f6 (diff) | |
Initial commit
Change-Id: I061d81a33aebadb83ba0e085e8e34339fed5ed53
Issue-ID: SDC-1609
Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'components/tabs')
| -rw-r--r-- | components/tabs/tabs-disabled.html | 8 | ||||
| -rw-r--r-- | components/tabs/tabs-header.html | 8 | ||||
| -rw-r--r-- | components/tabs/tabs-menu.html | 8 | ||||
| -rw-r--r-- | components/tabs/tabs.scss | 35 |
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; + } +} |