convert to scss

2025-08-30 16:50:00 +02:00 · 2014-12-02 14:02:35 -08:00
parent 6bd84210ff
commit 27df020852
102 changed files with 8449 additions and 6837 deletions
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -0,0 +1,168 @@
+//
+// Navs
+// --------------------------------------------------
+
+.nav {
+  margin-bottom: 0;
+  @extend .list-unstyled;
+  @include clearfix();
+}
+
+.nav-item {
+  position: relative;
+  display: inline-block;
+}
+
+.nav-link {
+  display: inline-block;
+  padding: $nav-link-padding;
+  line-height: $line-height-base;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: $nav-link-hover-bg;
+  }
+
+  // Disabled state sets text to gray and nukes hover/tab effects
+  .disabled > &,
+  &.disabled {
+    color: $nav-disabled-link-color;
+
+    &,
+    &:hover,
+    &:focus {
+      color: $nav-disabled-link-hover-color;
+      background-color: transparent;
+      cursor: $cursor-disabled;
+    }
+  }
+}
+
+
+//
+// Tabs
+//
+
+.nav-tabs {
+  border-bottom: 1px solid $nav-tabs-border-color;
+
+  .nav-item {
+    float: left;
+    // Make the list-items overlay the bottom border
+    margin-bottom: -1px;
+
+    + .nav-item {
+      margin-left: .2rem;
+    }
+  }
+
+  .nav-link {
+    display: block;
+    border: 1px solid transparent;
+    @include border-radius($border-radius-base $border-radius-base 0 0);
+
+    &:hover,
+    &:focus {
+      border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
+    }
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    &,
+    &:hover,
+    &:focus {
+      color: $nav-tabs-active-link-hover-color;
+      background-color: $nav-tabs-active-link-hover-bg;
+      border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
+    }
+  }
+
+  .disabled > .nav-link,
+  .nav-link.disabled {
+    &,
+    &:hover,
+    &:focus {
+      color: $nav-disabled-link-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+  .nav-item {
+    float: left;
+
+    + .nav-item {
+      margin-left: .2rem;
+    }
+  }
+
+  .nav-link {
+    display: block;
+    @include border-radius($nav-pills-border-radius);
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    &,
+    &:hover,
+    &:focus {
+      color: $component-active-color;
+      background-color: $component-active-bg;
+      cursor: default;
+    }
+  }
+}
+
+.nav-stacked {
+  .nav-item {
+    float: none;
+    display: block;
+
+    + .nav-item {
+      margin-top: .2rem;
+      margin-left: 0;
+    }
+  }
+}
+
+
+//
+// Tabbable tabs
+//
+
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+  > .tab-pane {
+    display: none;
+    visibility: hidden;
+  }
+  > .active {
+    display: block;
+    visibility: visible;
+  }
+}
+
+
+//
+// Dropdowns
+//
+
+.nav-tabs .dropdown-menu {
+  // Make dropdown border overlap tab border
+  margin-top: -1px;
+  // Remove the top rounded corners here since there is a hard edge above the menu
+  @include border-top-radius(0);
+}