summaryrefslogtreecommitdiffstats
path: root/portal-FE-common/src/styles/bootstrap/_nav.scss
diff options
context:
space:
mode:
authorSunder Tattavarada <statta@research.att.com>2020-01-14 15:22:26 +0000
committerGerrit Code Review <gerrit@onap.org>2020-01-14 15:22:26 +0000
commitdc9f0cb59c4b105de8ee17bc3e9e565870e02935 (patch)
treea7cae689d8d43cfd406aa04516cf1771a4434c99 /portal-FE-common/src/styles/bootstrap/_nav.scss
parentf81c0c718043517218d55908bdad0bfcada9a969 (diff)
parentf446cfb57f14004d6b34b137f8fa9802f6fdbdf6 (diff)
Merge "Added portal-FE-common - angular upgrade code"
Diffstat (limited to 'portal-FE-common/src/styles/bootstrap/_nav.scss')
-rw-r--r--portal-FE-common/src/styles/bootstrap/_nav.scss118
1 files changed, 118 insertions, 0 deletions
diff --git a/portal-FE-common/src/styles/bootstrap/_nav.scss b/portal-FE-common/src/styles/bootstrap/_nav.scss
new file mode 100644
index 00000000..fc82161e
--- /dev/null
+++ b/portal-FE-common/src/styles/bootstrap/_nav.scss
@@ -0,0 +1,118 @@
+// Base class
+//
+// Kickstart any navigation component with a set of style resets. Works with
+// `<nav>`s or `<ul>`s.
+
+.nav {
+ display: flex;
+ flex-wrap: wrap;
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
+}
+
+.nav-link {
+ display: block;
+ padding: $nav-link-padding-y $nav-link-padding-x;
+
+ @include hover-focus {
+ text-decoration: none;
+ }
+
+ // Disabled state lightens text
+ &.disabled {
+ color: $nav-link-disabled-color;
+ }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+ .nav-item {
+ margin-bottom: -$nav-tabs-border-width;
+ }
+
+ .nav-link {
+ border: $nav-tabs-border-width solid transparent;
+ @include border-top-radius($nav-tabs-border-radius);
+
+ @include hover-focus {
+ border-color: $nav-tabs-link-hover-border-color;
+ }
+
+ &.disabled {
+ color: $nav-link-disabled-color;
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
+
+ .nav-link.active,
+ .nav-item.show .nav-link {
+ color: $nav-tabs-link-active-color;
+ background-color: $nav-tabs-link-active-bg;
+ border-color: $nav-tabs-link-active-border-color;
+ }
+
+ .dropdown-menu {
+ // Make dropdown border overlap tab border
+ margin-top: -$nav-tabs-border-width;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ @include border-top-radius(0);
+ }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+ .nav-link {
+ @include border-radius($nav-pills-border-radius);
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ background-color: $nav-pills-link-active-bg;
+ }
+}
+
+
+//
+// Justified variants
+//
+
+.nav-fill {
+ .nav-item {
+ flex: 1 1 auto;
+ text-align: center;
+ }
+}
+
+.nav-justified {
+ .nav-item {
+ flex-basis: 0;
+ flex-grow: 1;
+ text-align: center;
+ }
+}
+
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+ > .tab-pane {
+ display: none;
+ }
+ > .active {
+ display: block;
+ }
+}