// Typography // ------------------------- @rtl-font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @rtl-font-family-serif: Georgia, "Times New Roman", Times, serif; @rtl-font-family-base: @rtl-font-family-sans-serif; @rtl-headings-font-family: @rtl-font-family-base; body { direction: rtl; } // Brand/project name .navbar-brand { float: right; @media (min-width: @grid-float-breakpoint) { .navbar > .container & { margin-right: -@navbar-padding-horizontal; margin-left: 0; } } } // Navbar heading // // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy // styling of responsive aspects. .navbar-header { @media (min-width: @grid-float-breakpoint) { float: right; } } // Navbar toggle // // Custom button for toggling the `.navbar-collapse`, powered by the collapse // JavaScript plugin. .navbar-toggle { float: left; margin-left: @navbar-padding-horizontal; } .navbar-collapse { @media (min-width: @grid-float-breakpoint) { width: auto; border-top: 0; box-shadow: none; .navbar-nav.navbar-right:last-child { margin-right: 0; } } } // Navbar form // // Extension of the `.form-inline` with some extra flavor for optimum display in // our navbars. .navbar-form { margin-left: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal; } // Text in navbars // // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { float: right; @media (min-width: @grid-float-breakpoint) { margin-left: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal; } } // Navbar nav links // // Builds on top of the `.nav` components with it's own modifier class to make // the nav the full height of the horizontal nav (above 768px). .navbar-nav { @media (max-width: @screen-xs-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { > li > a, .dropdown-header { padding: 5px 25px 5px 15px; } } } // Uncollapse the nav @media (min-width: @grid-float-breakpoint) { float: right; > li { float: right; } } } .nav-justified { width: 100%; > li { float: none; > a { text-align: center; margin-bottom: 5px; } } @media (min-width: @screen-sm-min) { > li { display: table-cell; width: 1%; > a { margin-bottom: 0; } } } } // Tabs // ------------------------- // Tabs // ------------------------- // Give the tabs something to sit on .nav-tabs { border-bottom: 1px solid @nav-tabs-border-color; > li { float: right; // Make the list-items overlay the bottom border margin-bottom: -1px; // Actual tabs (as links) > a { margin-right: -2px; border-radius: @border-radius-base @border-radius-base 0 0; } } // pulling this in mainly for less shorthand &.nav-justified { .nav-justified(); .nav-tabs-justified(); } } .nav-tabs-justified { > li > a { // Override margin from .nav-tabs margin-left: 0; } @media (min-width: @screen-sm-min) { > li > a { border-radius: @border-radius-base @border-radius-base 0 0; color:blue; } } } // progress-bar // Bar of progress .progress-bar { float: right; } // Alerts // Dismissable alerts // // Expand the right padding and account for the close button's positioning. .alert-dismissable { //padding-left: (@alert-padding + 20); // Adjust close link position .close { font-family: @font-family-base; top: -2px; left: 21px; right: 0px; } } // // Close icons // -------------------------------------------------- .close { font-family: @font-family-base; float: left; } // // Dropdown menus // -------------------------------------------------- // Dropdown arrow/caret .caret { margin-right: 2px; } // The dropdown menu (ul) .dropdown-menu { right: 0; float: left; left: auto; // Aligns the dropdown menu to left &.pull-left { left: 0; float: right; right: auto; } } // Left aligned dropdowns .pull-left > .dropdown-menu { left: 0; float: right; right: auto; } // Right aligned menus need alt position .navbar-nav.pull-left > li > .dropdown-menu, .navbar-nav > li > .dropdown-menu.pull-left { right: auto; left: 0; } // Justified navbar .nav-tabs-justified { > li > a { margin-left: 0; } @media (min-width: @screen-sm-min) { > li > a { } } } // Give the tabs something to sit on .nav-tabs { > li { float: right; // Actual tabs (as links) > a { margin-left: 2px; } } } // Pills // ------------------------- .nav-pills { > li { float: right; // Links rendered as pills > a { border-radius: @nav-pills-border-radius; } + li { margin-right: 2px; } } } // Stacked pills .nav-stacked { > li { float: none; + li { margin-right: 0; // no need for this gap between nav items } } } // Base nav class .nav { padding-right: 0; // Override default ul/ol } // Reverse input group round corners in RTL // Reset rounded corners .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { .border-right-radius(@border-radius-base); .border-left-radius(0); } .input-group-addon:first-child { border-right: 1px solid @input-group-addon-border-color; border-left: 0px; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) { .border-left-radius(@border-radius-base); .border-right-radius(0); } .input-group-addon:last-child { border-left: 1px solid @input-group-addon-border-color; border-right: 0px; } // Button input groups // ------------------------- .input-group-btn { // Negative margin to only have a 1px border between the two &:first-child > .btn { margin-left: -1px; } &:last-child > .btn { margin-right: -1px; } } .input-group-btn > .btn { position: relative; // Jankily prevent input button groups from wrapping + .btn { margin-right: -4px; } // Bring the "active" button to the front &:hover, &:active { z-index: 2; } } .radio, .checkbox { padding-right: 20px; } .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { float: right; margin-right: -20px; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-right: 10px; // space out consecutive inline controls } .form-inline { // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match (which also avoids // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). .radio, .checkbox { padding-right: 0; } .radio input[type="radio"], .checkbox input[type="checkbox"] { margin-right: 0; } } // Horizontal forms // .form-horizontal { // Only right align form labels here when the columns stop stacking @media (min-width: @screen-sm-min) { .control-label { text-align: left; } } } // Tables // ----------------- th { text-align: right; } .list-group { padding-right: 0; }