diff options
| author |   Israel Lavi <israel.lavi@intl.att.com> | 2018-05-21 17:42:00 +0300 |
|---|---|---|
| committer |   Israel Lavi <il0695@att.com> | 2018-05-21 17:52:01 +0300 |
| commit | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch) | |
| tree | f30beeaf15a8358f6da78fdd74bcbda74bd334f8 /components/tabs | |
| parent | 4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff) | |
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
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; + } +} |