summaryrefslogtreecommitdiff
path: root/sass/components/_tabs.scss
diff options
context:
space:
mode:
Diffstat (limited to 'sass/components/_tabs.scss')
-rw-r--r--sass/components/_tabs.scss99
1 files changed, 99 insertions, 0 deletions
diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
new file mode 100644
index 0000000..072d4b6
--- /dev/null
+++ b/sass/components/_tabs.scss
@@ -0,0 +1,99 @@
+.tabs {
+ &.tabs-transparent {
+ background-color: transparent;
+
+ .tab a,
+ .tab.disabled a,
+ .tab.disabled a:hover {
+ color: rgba(255,255,255,0.7);
+ }
+
+ .tab a:hover,
+ .tab a.active {
+ color: #fff;
+ }
+
+ .indicator {
+ background-color: #fff;
+ }
+ }
+
+ &.tabs-fixed-width {
+ display: flex;
+
+ .tab {
+ flex-grow: 1;
+ }
+ }
+
+ position: relative;
+ overflow-x: auto;
+ overflow-y: hidden;
+ height: 48px;
+ width: 100%;
+ background-color: $tabs-bg-color;
+ margin: 0 auto;
+ white-space: nowrap;
+
+ .tab {
+ display: inline-block;
+ text-align: center;
+ line-height: 48px;
+ height: 48px;
+ padding: 0;
+ margin: 0;
+ text-transform: uppercase;
+
+ a {
+ &:focus,
+ &:focus.active {
+ background-color: transparentize($tabs-underline-color, .8);
+ outline: none;
+ }
+
+ &:hover,
+ &.active {
+ background-color: transparent;
+ color: $tabs-text-color;
+ }
+
+ color: rgba($tabs-text-color, .7);
+ display: block;
+ width: 100%;
+ height: 100%;
+ padding: 0 24px;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ transition: color .28s ease, background-color .28s ease;
+ }
+
+ &.disabled a,
+ &.disabled a:hover {
+ color: rgba($tabs-text-color, .4);
+ cursor: default;
+ }
+ }
+ .indicator {
+ position: absolute;
+ bottom: 0;
+ height: 2px;
+ background-color: $tabs-underline-color;
+ will-change: left, right;
+ }
+}
+
+// Fixed Sidenav hide on smaller
+@media #{$medium-and-down} {
+ .tabs {
+ display: flex;
+
+ .tab {
+ flex-grow: 1;
+
+ a {
+ padding: 0 12px;
+ }
+ }
+ }
+}