logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

navbar.less (14688B)

    

  1. //

  2. // Navbars

  3. // --------------------------------------------------

  4. 

  5. 

  6. // Wrapper and base class

  7. //

  8. // Provide a static navbar from which we expand to create full-width, fixed, and

  9. // other navbar variations.

  10. 

  11. .navbar {

  12.   position: relative;

  13.   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

  14.   margin-bottom: @navbar-margin-bottom;

  15.   border: 1px solid transparent;

  16. 

  17.   // Prevent floats from breaking the navbar

  18.   &:extend(.clearfix all);

  19. 

  20.   @media (min-width: @grid-float-breakpoint) {

  21.     border-radius: @navbar-border-radius;

  22.   }

  23. }

  24. 

  25. 

  26. // Navbar heading

  27. //

  28. // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy

  29. // styling of responsive aspects.

  30. 

  31. .navbar-header {

  32.   &:extend(.clearfix all);

  33. 

  34.   @media (min-width: @grid-float-breakpoint) {

  35.     float: left;

  36.   }

  37. }

  38. 

  39. 

  40. // Navbar collapse (body)

  41. //

  42. // Group your navbar content into this for easy collapsing and expanding across

  43. // various device sizes. By default, this content is collapsed when <768px, but

  44. // will expand past that for a horizontal display.

  45. //

  46. // To start (on mobile devices) the navbar links, forms, and buttons are stacked

  47. // vertically and include a `max-height` to overflow in case you have too much

  48. // content for the user's viewport.

  49. 

  50. .navbar-collapse {

  51.   overflow-x: visible;

  52.   padding-right: @navbar-padding-horizontal;

  53.   padding-left:  @navbar-padding-horizontal;

  54.   border-top: 1px solid transparent;

  55.   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);

  56.   &:extend(.clearfix all);

  57.   -webkit-overflow-scrolling: touch;

  58. 

  59.   &.in {

  60.     overflow-y: auto;

  61.   }

  62. 

  63.   @media (min-width: @grid-float-breakpoint) {

  64.     width: auto;

  65.     border-top: 0;

  66.     box-shadow: none;

  67. 

  68.     &.collapse {

  69.       display: block !important;

  70.       height: auto !important;

  71.       padding-bottom: 0; // Override default setting

  72.       overflow: visible !important;

  73.     }

  74. 

  75.     &.in {

  76.       overflow-y: visible;

  77.     }

  78. 

  79.     // Undo the collapse side padding for navbars with containers to ensure

  80.     // alignment of right-aligned contents.

  81.     .navbar-fixed-top &,

  82.     .navbar-static-top &,

  83.     .navbar-fixed-bottom & {

  84.       padding-left: 0;

  85.       padding-right: 0;

  86.     }

  87.   }

  88. }

  89. 

  90. .navbar-fixed-top,

  91. .navbar-fixed-bottom {

  92.   .navbar-collapse {

  93.     max-height: @navbar-collapse-max-height;

  94. 

  95.     @media (max-width: @screen-xs-min) and (orientation: landscape) {

  96.       max-height: 200px;

  97.     }

  98.   }

  99. }

  100. 

  101. 

  102. // Both navbar header and collapse

  103. //

  104. // When a container is present, change the behavior of the header and collapse.

  105. 

  106. .container,

  107. .container-fluid {

  108.   > .navbar-header,

  109.   > .navbar-collapse {

  110.     margin-right: -@navbar-padding-horizontal;

  111.     margin-left:  -@navbar-padding-horizontal;

  112. 

  113.     @media (min-width: @grid-float-breakpoint) {

  114.       margin-right: 0;

  115.       margin-left:  0;

  116.     }

  117.   }

  118. }

  119. 

  120. 

  121. //

  122. // Navbar alignment options

  123. //

  124. // Display the navbar across the entirety of the page or fixed it to the top or

  125. // bottom of the page.

  126. 

  127. // Static top (unfixed, but 100% wide) navbar

  128. .navbar-static-top {

  129.   z-index: @zindex-navbar;

  130.   border-width: 0 0 1px;

  131. 

  132.   @media (min-width: @grid-float-breakpoint) {

  133.     border-radius: 0;

  134.   }

  135. }

  136. 

  137. // Fix the top/bottom navbars when screen real estate supports it

  138. .navbar-fixed-top,

  139. .navbar-fixed-bottom {

  140.   position: fixed;

  141.   right: 0;

  142.   left: 0;

  143.   z-index: @zindex-navbar-fixed;

  144.   .translate3d(0, 0, 0);

  145. 

  146.   // Undo the rounded corners

  147.   @media (min-width: @grid-float-breakpoint) {

  148.     border-radius: 0;

  149.   }

  150. }

  151. .navbar-fixed-top {

  152.   top: 0;

  153.   border-width: 0 0 1px;

  154. }

  155. .navbar-fixed-bottom {

  156.   bottom: 0;

  157.   margin-bottom: 0; // override .navbar defaults

  158.   border-width: 1px 0 0;

  159. }

  160. 

  161. 

  162. // Brand/project name

  163. 

  164. .navbar-brand {

  165.   float: left;

  166.   padding: @navbar-padding-vertical @navbar-padding-horizontal;

  167.   font-size: @font-size-large;

  168.   line-height: @line-height-computed;

  169.   height: @navbar-height;

  170. 

  171.   &:hover,

  172.   &:focus {

  173.     text-decoration: none;

  174.   }

  175. 

  176.   @media (min-width: @grid-float-breakpoint) {

  177.     .navbar > .container &,

  178.     .navbar > .container-fluid & {

  179.       margin-left: -@navbar-padding-horizontal;

  180.     }

  181.   }

  182. }

  183. 

  184. 

  185. // Navbar toggle

  186. //

  187. // Custom button for toggling the `.navbar-collapse`, powered by the collapse

  188. // JavaScript plugin.

  189. 

  190. .navbar-toggle {

  191.   position: relative;

  192.   float: right;

  193.   margin-right: @navbar-padding-horizontal;

  194.   padding: 9px 10px;

  195.   .navbar-vertical-align(34px);

  196.   background-color: transparent;

  197.   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

  198.   border: 1px solid transparent;

  199.   border-radius: @border-radius-base;

  200. 

  201.   // We remove the `outline` here, but later compensate by attaching `:hover`

  202.   // styles to `:focus`.

  203.   &:focus {

  204.     outline: 0;

  205.   }

  206. 

  207.   // Bars

  208.   .icon-bar {

  209.     display: block;

  210.     width: 22px;

  211.     height: 2px;

  212.     border-radius: 1px;

  213.   }

  214.   .icon-bar + .icon-bar {

  215.     margin-top: 4px;

  216.   }

  217. 

  218.   @media (min-width: @grid-float-breakpoint) {

  219.     display: none;

  220.   }

  221. }

  222. 

  223. 

  224. // Navbar nav links

  225. //

  226. // Builds on top of the `.nav` components with its own modifier class to make

  227. // the nav the full height of the horizontal nav (above 768px).

  228. 

  229. .navbar-nav {

  230.   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;

  231. 

  232.   > li > a {

  233.     padding-top:    10px;

  234.     padding-bottom: 10px;

  235.     line-height: @line-height-computed;

  236.   }

  237. 

  238.   @media (max-width: @grid-float-breakpoint-max) {

  239.     // Dropdowns get custom display when collapsed

  240.     .open .dropdown-menu {

  241.       position: static;

  242.       float: none;

  243.       width: auto;

  244.       margin-top: 0;

  245.       background-color: transparent;

  246.       border: 0;

  247.       box-shadow: none;

  248.       > li > a,

  249.       .dropdown-header {

  250.         padding: 5px 15px 5px 25px;

  251.       }

  252.       > li > a {

  253.         line-height: @line-height-computed;

  254.         &:hover,

  255.         &:focus {

  256.           background-image: none;

  257.         }

  258.       }

  259.     }

  260.   }

  261. 

  262.   // Uncollapse the nav

  263.   @media (min-width: @grid-float-breakpoint) {

  264.     float: left;

  265.     margin: 0;

  266. 

  267.     > li {

  268.       float: left;

  269.       > a {

  270.         padding-top:    @navbar-padding-vertical;

  271.         padding-bottom: @navbar-padding-vertical;

  272.       }

  273.     }

  274. 

  275.     &.navbar-right:last-child {

  276.       margin-right: -@navbar-padding-horizontal;

  277.     }

  278.   }

  279. }

  280. 

  281. 

  282. // Component alignment

  283. //

  284. // Repurpose the pull utilities as their own navbar utilities to avoid specificity

  285. // issues with parents and chaining. Only do this when the navbar is uncollapsed

  286. // though so that navbar contents properly stack and align in mobile.

  287. 

  288. @media (min-width: @grid-float-breakpoint) {

  289.   .navbar-left  { .pull-left(); }

  290.   .navbar-right { .pull-right(); }

  291. }

  292. 

  293. 

  294. // Navbar form

  295. //

  296. // Extension of the `.form-inline` with some extra flavor for optimum display in

  297. // our navbars.

  298. 

  299. .navbar-form {

  300.   margin-left: -@navbar-padding-horizontal;

  301.   margin-right: -@navbar-padding-horizontal;

  302.   padding: 10px @navbar-padding-horizontal;

  303.   border-top: 1px solid transparent;

  304.   border-bottom: 1px solid transparent;

  305.   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);

  306.   .box-shadow(@shadow);

  307. 

  308.   // Mixin behavior for optimum display

  309.   .form-inline();

  310. 

  311.   .form-group {

  312.     @media (max-width: @grid-float-breakpoint-max) {

  313.       margin-bottom: 5px;

  314.     }

  315.   }

  316. 

  317.   // Vertically center in expanded, horizontal navbar

  318.   .navbar-vertical-align(@input-height-base);

  319. 

  320.   // Undo 100% width for pull classes

  321.   @media (min-width: @grid-float-breakpoint) {

  322.     width: auto;

  323.     border: 0;

  324.     margin-left: 0;

  325.     margin-right: 0;

  326.     padding-top: 0;

  327.     padding-bottom: 0;

  328.     .box-shadow(none);

  329. 

  330.     // Outdent the form if last child to line up with content down the page

  331.     &.navbar-right:last-child {

  332.       margin-right: -@navbar-padding-horizontal;

  333.     }

  334.   }

  335. }

  336. 

  337. 

  338. // Dropdown menus

  339. 

  340. // Menu position and menu carets

  341. .navbar-nav > li > .dropdown-menu {

  342.   margin-top: 0;

  343.   .border-top-radius(0);

  344. }

  345. // Menu position and menu caret support for dropups via extra dropup class

  346. .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {

  347.   .border-bottom-radius(0);

  348. }

  349. 

  350. 

  351. // Buttons in navbars

  352. //

  353. // Vertically center a button within a navbar (when *not* in a form).

  354. 

  355. .navbar-btn {

  356.   .navbar-vertical-align(@input-height-base);

  357. 

  358.   &.btn-sm {

  359.     .navbar-vertical-align(@input-height-small);

  360.   }

  361.   &.btn-xs {

  362.     .navbar-vertical-align(22);

  363.   }

  364. }

  365. 

  366. 

  367. // Text in navbars

  368. //

  369. // Add a class to make any element properly align itself vertically within the navbars.

  370. 

  371. .navbar-text {

  372.   .navbar-vertical-align(@line-height-computed);

  373. 

  374.   @media (min-width: @grid-float-breakpoint) {

  375.     float: left;

  376.     margin-left: @navbar-padding-horizontal;

  377.     margin-right: @navbar-padding-horizontal;

  378. 

  379.     // Outdent the form if last child to line up with content down the page

  380.     &.navbar-right:last-child {

  381.       margin-right: 0;

  382.     }

  383.   }

  384. }

  385. 

  386. // Alternate navbars

  387. // --------------------------------------------------

  388. 

  389. // Default navbar

  390. .navbar-default {

  391.   background-color: @navbar-default-bg;

  392.   border-color: @navbar-default-border;

  393. 

  394.   .navbar-brand {

  395.     color: @navbar-default-brand-color;

  396.     &:hover,

  397.     &:focus {

  398.       color: @navbar-default-brand-hover-color;

  399.       background-color: @navbar-default-brand-hover-bg;

  400.     }

  401.   }

  402. 

  403.   .navbar-text {

  404.     color: @navbar-default-color;

  405.   }

  406. 

  407.   .navbar-nav {

  408.     > li > a {

  409.       color: @navbar-default-link-color;

  410. 

  411.       &:hover,

  412.       &:focus {

  413.         color: @navbar-default-link-hover-color;

  414.         background-color: @navbar-default-link-hover-bg;

  415.       }

  416.     }

  417.     > .active > a {

  418.       &,

  419.       &:hover,

  420.       &:focus {

  421.         color: @navbar-default-link-active-color;

  422.         background-color: @navbar-default-link-active-bg;

  423.       }

  424.     }

  425.     > .disabled > a {

  426.       &,

  427.       &:hover,

  428.       &:focus {

  429.         color: @navbar-default-link-disabled-color;

  430.         background-color: @navbar-default-link-disabled-bg;

  431.       }

  432.     }

  433.   }

  434. 

  435.   .navbar-toggle {

  436.     border-color: @navbar-default-toggle-border-color;

  437.     &:hover,

  438.     &:focus {

  439.       background-color: @navbar-default-toggle-hover-bg;

  440.     }

  441.     .icon-bar {

  442.       background-color: @navbar-default-toggle-icon-bar-bg;

  443.     }

  444.   }

  445. 

  446.   .navbar-collapse,

  447.   .navbar-form {

  448.     border-color: @navbar-default-border;

  449.   }

  450. 

  451.   // Dropdown menu items

  452.   .navbar-nav {

  453.     // Remove background color from open dropdown

  454.     > .open > a {

  455.       &,

  456.       &:hover,

  457.       &:focus {

  458.         background-color: @navbar-default-link-active-bg;

  459.         color: @navbar-default-link-active-color;

  460.       }

  461.     }

  462. 

  463.     @media (max-width: @grid-float-breakpoint-max) {

  464.       // Dropdowns get custom display when collapsed

  465.       .open .dropdown-menu {

  466.         > li > a {

  467.           color: @navbar-default-link-color;

  468.           &:hover,

  469.           &:focus {

  470.             color: @navbar-default-link-hover-color;

  471.             background-color: @navbar-default-link-hover-bg;

  472.           }

  473.         }

  474.         > .active > a {

  475.           &,

  476.           &:hover,

  477.           &:focus {

  478.             color: @navbar-default-link-active-color;

  479.             background-color: @navbar-default-link-active-bg;

  480.           }

  481.         }

  482.         > .disabled > a {

  483.           &,

  484.           &:hover,

  485.           &:focus {

  486.             color: @navbar-default-link-disabled-color;

  487.             background-color: @navbar-default-link-disabled-bg;

  488.           }

  489.         }

  490.       }

  491.     }

  492.   }

  493. 

  494. 

  495.   // Links in navbars

  496.   //

  497.   // Add a class to ensure links outside the navbar nav are colored correctly.

  498. 

  499.   .navbar-link {

  500.     color: @navbar-default-link-color;

  501.     &:hover {

  502.       color: @navbar-default-link-hover-color;

  503.     }

  504.   }

  505. 

  506.   .btn-link {

  507.     color: @navbar-default-link-color;

  508.     &:hover,

  509.     &:focus {

  510.       color: @navbar-default-link-hover-color;

  511.     }

  512.     &[disabled],

  513.     fieldset[disabled] & {

  514.       &:hover,

  515.       &:focus {

  516.         color: @navbar-default-link-disabled-color;

  517.       }

  518.     }

  519.   }

  520. }

  521. 

  522. // Inverse navbar

  523. 

  524. .navbar-inverse {

  525.   background-color: @navbar-inverse-bg;

  526.   border-color: @navbar-inverse-border;

  527. 

  528.   .navbar-brand {

  529.     color: @navbar-inverse-brand-color;

  530.     &:hover,

  531.     &:focus {

  532.       color: @navbar-inverse-brand-hover-color;

  533.       background-color: @navbar-inverse-brand-hover-bg;

  534.     }

  535.   }

  536. 

  537.   .navbar-text {

  538.     color: @navbar-inverse-color;

  539.   }

  540. 

  541.   .navbar-nav {

  542.     > li > a {

  543.       color: @navbar-inverse-link-color;

  544. 

  545.       &:hover,

  546.       &:focus {

  547.         color: @navbar-inverse-link-hover-color;

  548.         background-color: @navbar-inverse-link-hover-bg;

  549.       }

  550.     }

  551.     > .active > a {

  552.       &,

  553.       &:hover,

  554.       &:focus {

  555.         color: @navbar-inverse-link-active-color;

  556.         background-color: @navbar-inverse-link-active-bg;

  557.       }

  558.     }

  559.     > .disabled > a {

  560.       &,

  561.       &:hover,

  562.       &:focus {

  563.         color: @navbar-inverse-link-disabled-color;

  564.         background-color: @navbar-inverse-link-disabled-bg;

  565.       }

  566.     }

  567.   }

  568. 

  569.   // Darken the responsive nav toggle

  570.   .navbar-toggle {

  571.     border-color: @navbar-inverse-toggle-border-color;

  572.     &:hover,

  573.     &:focus {

  574.       background-color: @navbar-inverse-toggle-hover-bg;

  575.     }

  576.     .icon-bar {

  577.       background-color: @navbar-inverse-toggle-icon-bar-bg;

  578.     }

  579.   }

  580. 

  581.   .navbar-collapse,

  582.   .navbar-form {

  583.     border-color: darken(@navbar-inverse-bg, 7%);

  584.   }

  585. 

  586.   // Dropdowns

  587.   .navbar-nav {

  588.     > .open > a {

  589.       &,

  590.       &:hover,

  591.       &:focus {

  592.         background-color: @navbar-inverse-link-active-bg;

  593.         color: @navbar-inverse-link-active-color;

  594.       }

  595.     }

  596. 

  597.     @media (max-width: @grid-float-breakpoint-max) {

  598.       // Dropdowns get custom display

  599.       .open .dropdown-menu {

  600.         > .dropdown-header {

  601.           border-color: @navbar-inverse-border;

  602.         }

  603.         .divider {

  604.           background-color: @navbar-inverse-border;

  605.         }

  606.         > li > a {

  607.           color: @navbar-inverse-link-color;

  608.           &:hover,

  609.           &:focus {

  610.             color: @navbar-inverse-link-hover-color;

  611.             background-color: @navbar-inverse-link-hover-bg;

  612.           }

  613.         }

  614.         > .active > a {

  615.           &,

  616.           &:hover,

  617.           &:focus {

  618.             color: @navbar-inverse-link-active-color;

  619.             background-color: @navbar-inverse-link-active-bg;

  620.           }

  621.         }

  622.         > .disabled > a {

  623.           &,

  624.           &:hover,

  625.           &:focus {

  626.             color: @navbar-inverse-link-disabled-color;

  627.             background-color: @navbar-inverse-link-disabled-bg;

  628.           }

  629.         }

  630.       }

  631.     }

  632.   }

  633. 

  634.   .navbar-link {

  635.     color: @navbar-inverse-link-color;

  636.     &:hover {

  637.       color: @navbar-inverse-link-hover-color;

  638.     }

  639.   }

  640. 

  641.   .btn-link {

  642.     color: @navbar-inverse-link-color;

  643.     &:hover,

  644.     &:focus {

  645.       color: @navbar-inverse-link-hover-color;

  646.     }

  647.     &[disabled],

  648.     fieldset[disabled] & {

  649.       &:hover,

  650.       &:focus {

  651.         color: @navbar-inverse-link-disabled-color;

  652.       }

  653.     }

  654.   }

  655. }