diff --git a/less/navs.less b/less/navs.less index 4051dbb75a..340b63970c 100644 --- a/less/navs.less +++ b/less/navs.less @@ -73,6 +73,36 @@ // Nav variations // -------------------------------------------------- +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + > li { + float: none; + display: table-cell; + width: 1%; + > a { + text-align: center; + } + } +} + +// Move borders to anchors instead of bottom of list +.nav-tabs-justified { + border-bottom: 0; + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + + // Override margin from .nav-tabs + margin-right: 0; + } + > .active > a { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } + +} + // Tabs // ------------------------- @@ -154,37 +184,6 @@ } } -// Justified nav links -// ------------------------- - -.nav-justified { - width: 100%; - > li { - float: none; - display: table-cell; - width: 1%; - > a { - text-align: center; - } - } -} - -// Move borders to anchors instead of bottom of list -.nav-tabs-justified { - border-bottom: 0; - > li > a { - border-bottom: 1px solid @nav-tabs-justified-link-border-color; - - // Override margin from .nav-tabs - margin-right: 0; - } - > .active > a { - border-bottom-color: @nav-tabs-justified-active-link-border-color; - } - -} - - // Tabbable tabs // ------------------------- diff --git a/less/variables.less b/less/variables.less index 878725f6c4..71e813d320 100644 --- a/less/variables.less +++ b/less/variables.less @@ -174,6 +174,39 @@ @zindex-modal-background: 1040; @zindex-modal: 1050; +// Media queries breakpoints +// -------------------------------------------------- + +// Tiny screen / phone +@screen-tiny: 480px; +@screen-phone: @screen-tiny; + +// Small screen / tablet +@screen-small: 768px; +@screen-tablet: @screen-small; + +// Medium screen / desktop +@screen-medium: 992px; +@screen-desktop: @screen-medium; + +// So media queries don't overlap when required, provide a maximum +@screen-small-max: (@screen-medium - 1); +@screen-tablet-max: @screen-small-max; + +// Large screen / wide desktop +@screen-large: 1200px; +@screen-large-desktop: @screen-large; + +// Grid system +// -------------------------------------------------- + +// Number of columns in the grid system +@grid-columns: 12; +// Padding, to be divided by two and applied to the left and right of all columns +@grid-gutter-width: 30px; +// Point at which the navbar stops collapsing +@grid-float-breakpoint: @screen-tablet; + // Navbar // ------------------------- @@ -520,30 +553,6 @@ @component-offset-horizontal: 180px; -// Media queries breakpoints -// -------------------------------------------------- - -// Tiny screen / phone -@screen-tiny: 480px; -@screen-phone: @screen-tiny; - -// Small screen / tablet -@screen-small: 768px; -@screen-tablet: @screen-small; - -// Medium screen / desktop -@screen-medium: 992px; -@screen-desktop: @screen-medium; - -// So media queries don't overlap when required, provide a maximum -@screen-small-max: (@screen-medium - 1); -@screen-tablet-max: @screen-small-max; - -// Large screen / wide desktop -@screen-large: 1200px; -@screen-large-desktop: @screen-large; - - // Container sizes // -------------------------------------------------- @@ -555,14 +564,3 @@ // Large screen / wide desktop @container-large-desktop: 1170px; - - -// Grid system -// -------------------------------------------------- - -// Number of columns in the grid system -@grid-columns: 12; -// Padding, to be divided by two and applied to the left and right of all columns -@grid-gutter-width: 30px; -// Point at which the navbar stops collapsing -@grid-float-breakpoint: @screen-tablet;