github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/navs.less (about)

     1  //
     2  // Navs
     3  // --------------------------------------------------
     4  
     5  
     6  // Base class
     7  // --------------------------------------------------
     8  
     9  .nav {
    10    margin-bottom: 0;
    11    padding-left: 0; // Override default ul/ol
    12    list-style: none;
    13    &:extend(.clearfix all);
    14  
    15    > li {
    16      position: relative;
    17      display: block;
    18  
    19      > a {
    20        position: relative;
    21        display: block;
    22        padding: @nav-link-padding;
    23        &:hover,
    24        &:focus {
    25          text-decoration: none;
    26          background-color: @nav-link-hover-bg;
    27        }
    28      }
    29  
    30      // Disabled state sets text to gray and nukes hover/tab effects
    31      &.disabled > a {
    32        color: @nav-disabled-link-color;
    33  
    34        &:hover,
    35        &:focus {
    36          color: @nav-disabled-link-hover-color;
    37          text-decoration: none;
    38          background-color: transparent;
    39          cursor: not-allowed;
    40        }
    41      }
    42    }
    43  
    44    // Open dropdowns
    45    .open > a {
    46      &,
    47      &:hover,
    48      &:focus {
    49        background-color: @nav-link-hover-bg;
    50        border-color: @link-color;
    51      }
    52    }
    53  
    54    // Nav dividers (deprecated with v3.0.1)
    55    //
    56    // This should have been removed in v3 with the dropping of `.nav-list`, but
    57    // we missed it. We don't currently support this anywhere, but in the interest
    58    // of maintaining backward compatibility in case you use it, it's deprecated.
    59    .nav-divider {
    60      .nav-divider();
    61    }
    62  
    63    // Prevent IE8 from misplacing imgs
    64    //
    65    // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
    66    > li > a > img {
    67      max-width: none;
    68    }
    69  }
    70  
    71  
    72  // Tabs
    73  // -------------------------
    74  
    75  // Give the tabs something to sit on
    76  .nav-tabs {
    77    border-bottom: 1px solid @nav-tabs-border-color;
    78    > li {
    79      float: left;
    80      // Make the list-items overlay the bottom border
    81      margin-bottom: -1px;
    82  
    83      // Actual tabs (as links)
    84      > a {
    85        margin-right: 2px;
    86        line-height: @line-height-base;
    87        border: 1px solid transparent;
    88        border-radius: @border-radius-base @border-radius-base 0 0;
    89        &:hover {
    90          border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
    91        }
    92      }
    93  
    94      // Active state, and its :hover to override normal :hover
    95      &.active > a {
    96        &,
    97        &:hover,
    98        &:focus {
    99          color: @nav-tabs-active-link-hover-color;
   100          background-color: @nav-tabs-active-link-hover-bg;
   101          border: 1px solid @nav-tabs-active-link-hover-border-color;
   102          border-bottom-color: transparent;
   103          cursor: default;
   104        }
   105      }
   106    }
   107    // pulling this in mainly for less shorthand
   108    &.nav-justified {
   109      .nav-justified();
   110      .nav-tabs-justified();
   111    }
   112  }
   113  
   114  
   115  // Pills
   116  // -------------------------
   117  .nav-pills {
   118    > li {
   119      float: left;
   120  
   121      // Links rendered as pills
   122      > a {
   123        border-radius: @nav-pills-border-radius;
   124      }
   125      + li {
   126        margin-left: 2px;
   127      }
   128  
   129      // Active state
   130      &.active > a {
   131        &,
   132        &:hover,
   133        &:focus {
   134          color: @nav-pills-active-link-hover-color;
   135          background-color: @nav-pills-active-link-hover-bg;
   136        }
   137      }
   138    }
   139  }
   140  
   141  
   142  // Stacked pills
   143  .nav-stacked {
   144    > li {
   145      float: none;
   146      + li {
   147        margin-top: 2px;
   148        margin-left: 0; // no need for this gap between nav items
   149      }
   150    }
   151  }
   152  
   153  
   154  // Nav variations
   155  // --------------------------------------------------
   156  
   157  // Justified nav links
   158  // -------------------------
   159  
   160  .nav-justified {
   161    width: 100%;
   162  
   163    > li {
   164      float: none;
   165       > a {
   166        text-align: center;
   167        margin-bottom: 5px;
   168      }
   169    }
   170  
   171    > .dropdown .dropdown-menu {
   172      top: auto;
   173      left: auto;
   174    }
   175  
   176    @media (min-width: @screen-sm-min) {
   177      > li {
   178        display: table-cell;
   179        width: 1%;
   180        > a {
   181          margin-bottom: 0;
   182        }
   183      }
   184    }
   185  }
   186  
   187  // Move borders to anchors instead of bottom of list
   188  //
   189  // Mixin for adding on top the shared `.nav-justified` styles for our tabs
   190  .nav-tabs-justified {
   191    border-bottom: 0;
   192  
   193    > li > a {
   194      // Override margin from .nav-tabs
   195      margin-right: 0;
   196      border-radius: @border-radius-base;
   197    }
   198  
   199    > .active > a,
   200    > .active > a:hover,
   201    > .active > a:focus {
   202      border: 1px solid @nav-tabs-justified-link-border-color;
   203    }
   204  
   205    @media (min-width: @screen-sm-min) {
   206      > li > a {
   207        border-bottom: 1px solid @nav-tabs-justified-link-border-color;
   208        border-radius: @border-radius-base @border-radius-base 0 0;
   209      }
   210      > .active > a,
   211      > .active > a:hover,
   212      > .active > a:focus {
   213        border-bottom-color: @nav-tabs-justified-active-link-border-color;
   214      }
   215    }
   216  }
   217  
   218  
   219  // Tabbable tabs
   220  // -------------------------
   221  
   222  // Hide tabbable panes to start, show them when `.active`
   223  .tab-content {
   224    > .tab-pane {
   225      display: none;
   226    }
   227    > .active {
   228      display: block;
   229    }
   230  }
   231  
   232  
   233  // Dropdowns
   234  // -------------------------
   235  
   236  // Specific dropdowns
   237  .nav-tabs .dropdown-menu {
   238    // make dropdown border overlap tab border
   239    margin-top: -1px;
   240    // Remove the top rounded corners here since there is a hard edge above the menu
   241    .border-top-radius(0);
   242  }