You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
481 lines
8.4 KiB
Plaintext
481 lines
8.4 KiB
Plaintext
// 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;
|
|
font-family: @rtl-font-family-base;
|
|
}
|
|
|
|
// Headings
|
|
// -------------------------
|
|
|
|
h1, h2, h3, h4, h5, h6,
|
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
|
font-family: @rtl-headings-font-family;
|
|
}
|
|
|
|
// 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;
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 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
|
|
}
|
|
|
|
|
|
// Justified nav links
|
|
// -------------------------
|
|
|
|
.nav-tabs.nav-justified,
|
|
.nav-pills.nav-justified {
|
|
width: 100%;
|
|
> li {
|
|
float: none!important;
|
|
> a {
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
> .dropdown .dropdown-menu {
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
|
|
@media (min-width: @screen-sm-min) {
|
|
> li {
|
|
display: table-cell;
|
|
width: 1%;
|
|
> a {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-tabs.nav-justified > li > a {
|
|
color:@link-color;
|
|
}
|
|
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Popovers
|
|
// -------------------------
|
|
.popover.top,
|
|
.popover.bottom {
|
|
direction:ltr
|
|
}
|
|
|
|
.popover.top .popover-title,
|
|
.popover.top .popover-content,
|
|
.popover.bottom .popover-title,
|
|
.popover.bottom .popover-content {
|
|
direction:rtl;
|
|
text-align:right;
|
|
}
|
|
|
|
// Tables
|
|
// -----------------
|
|
th {
|
|
text-align: right;
|
|
}
|
|
|
|
.list-group
|
|
{
|
|
padding-right: 0;
|
|
}
|