diff options
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; + } +} |