You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1733 lines
31 KiB
1733 lines
31 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # jQuery UI Widgets |
|
* |
|
* Styles for jQuery UI widgets |
|
* |
|
* Version: 1.2 |
|
* Latest update: Aug 10, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// Accordion |
|
// ------------------------- |
|
|
|
// Base |
|
.ui-accordion { |
|
|
|
// Header |
|
.ui-accordion-header { |
|
display: block; |
|
cursor: pointer; |
|
margin: 0; |
|
outline: 0; |
|
position: relative; |
|
background-color: @panel-bg; |
|
padding: @panel-heading-padding; |
|
border: 1px solid @panel-default-border; |
|
margin-top: 5px; |
|
border-radius: @panel-border-radius; |
|
|
|
// Remove top margin from the first item |
|
&:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
// Border radius correction |
|
&.ui-accordion-header-active { |
|
.border-bottom-radius(0); |
|
} |
|
|
|
// Icons |
|
.ui-accordion-header-icon { |
|
position: absolute; |
|
top: 50%; |
|
right: @content-padding-large; |
|
margin-top: -(@icon-font-size / 2); |
|
|
|
// Iconll |
|
&:before { |
|
content: '\e9b8'; |
|
font-family: 'Icomoon'; |
|
display: block; |
|
width: @icon-font-size; |
|
font-size: @icon-font-size; |
|
line-height: 1; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
} |
|
} |
|
|
|
// Change icon in active header |
|
.ui-accordion-header-active { |
|
.ui-accordion-header-icon:before { |
|
content: '\e9b7'; |
|
} |
|
} |
|
|
|
// Icons |
|
.ui-accordion-icons { |
|
padding-right: (@content-padding-large + @content-padding-small + @icon-font-size); |
|
} |
|
|
|
// Content |
|
.ui-accordion-content { |
|
padding: @panel-body-padding; |
|
background-color: @panel-bg; |
|
border: 1px solid @panel-default-border; |
|
border-top: 0; |
|
overflow: auto; |
|
.border-bottom-radius(@panel-border-radius); |
|
} |
|
} |
|
|
|
// Sortable vertical spacing |
|
.accordion-sortable-group { |
|
& + & { |
|
margin-top: 5px; |
|
} |
|
} |
|
|
|
|
|
|
|
// Autocomplete |
|
// ------------------------- |
|
|
|
// Base |
|
.ui-autocomplete { |
|
position: absolute; |
|
display: none; |
|
padding: @list-spacing 0; |
|
z-index: @zindex-dropdown; |
|
max-height: 250px; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
|
|
// Category title |
|
.ui-autocomplete-category { |
|
padding: (@padding-base-vertical + 1) @padding-base-horizontal; |
|
font-size: @font-size-mini; |
|
line-height: @line-height-mini; |
|
text-transform: uppercase; |
|
font-weight: 700; |
|
margin-top: 2px; |
|
margin-bottom: 2px; |
|
|
|
// Optgroup items have double horizontal spacing |
|
~ .ui-menu-item { |
|
padding-left: (@padding-base-horizontal * 2); |
|
} |
|
} |
|
} |
|
|
|
// Animated processing icon |
|
.ui-autocomplete-processing:after { |
|
content: '\eb51'; |
|
font-family: 'Icomoon'; |
|
display: inline-block; |
|
position: absolute; |
|
top: 50%; |
|
right: @padding-base-horizontal; |
|
width: @icon-font-size; |
|
text-align: right; |
|
margin-top: -(@icon-font-size / 2); |
|
font-size: @icon-font-size; |
|
line-height: 1; |
|
color: inherit; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
.animation(rotation 1s linear infinite); |
|
} |
|
|
|
// Inside input group, remove border and border radius from the last element |
|
.input-group { |
|
.ui-autocomplete-input { |
|
+ .input-group-btn, |
|
+ .input-addon { |
|
> .btn { |
|
border-left: 0; |
|
.border-left-radius(0); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
// Buttons |
|
// ------------------------- |
|
|
|
// Base |
|
.ui-button { |
|
display: inline-block; |
|
position: relative; |
|
touch-action: manipulation; |
|
margin-bottom: 0; |
|
padding: @padding-base-vertical @padding-base-horizontal; |
|
border-radius: @border-radius-base; |
|
cursor: pointer; |
|
vertical-align: middle; |
|
text-align: center; |
|
background-color: @btn-default-bg; |
|
border: 1px solid @btn-default-border; |
|
color: @btn-default-color; |
|
|
|
// Hover and focus states |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
color: @btn-default-color; |
|
.box-shadow(0 0 0 100px fade(#000, 1%) inset); |
|
} |
|
|
|
// Active state |
|
&.ui-state-active { |
|
.box-shadow(0 0 0 100px fade(#000, 3%) inset); |
|
} |
|
|
|
// Disabled |
|
&.ui-state-disabled { |
|
cursor: @cursor-disabled; |
|
.opacity(.65); |
|
.box-shadow(none); |
|
} |
|
|
|
// Colored button |
|
&[class*=bg-] { |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
color: #fff; |
|
.box-shadow(0 0 0 100px fade(#000, 5%) inset); |
|
} |
|
&.ui-state-active { |
|
.box-shadow(0 0 0 100px fade(#000, 10%) inset); |
|
} |
|
} |
|
|
|
// Transparent button |
|
&.ui-button-link { |
|
background-color: transparent; |
|
border-color: transparent; |
|
|
|
// Change link color on hover and focus |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
color: @link-hover-color; |
|
} |
|
|
|
// Remove box shadow |
|
&.ui-state-hover, |
|
&.ui-state-focus, |
|
&.ui-state-active { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Reset extra padding in Firefox |
|
&::-moz-focus-inner { |
|
border: 0; |
|
padding: 0; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Buttons with icons |
|
// |
|
|
|
// Primary icon |
|
.ui-button-icon-primary { |
|
.ui-button-text-icon-primary &, |
|
.ui-button-text-icons &, |
|
.ui-button-icons-only { |
|
margin-right: @element-horizontal-spacing; |
|
} |
|
} |
|
|
|
// Secondary icon |
|
.ui-button-icon-secondary { |
|
.ui-button-text-icon-secondary &, |
|
.ui-button-text-icons &, |
|
.ui-button-icons-only & { |
|
margin-left: @element-horizontal-spacing; |
|
} |
|
} |
|
|
|
// Icon only |
|
.ui-button-icon-only { |
|
padding-left: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1); |
|
padding-right: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) - 1); |
|
} |
|
|
|
// Hide text in button with icons only |
|
.ui-button-text { |
|
.ui-button-icon-only &, |
|
.ui-button-icons-only & { |
|
display: none; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Button sets |
|
// |
|
|
|
// Base |
|
.ui-buttonset { |
|
display: inline-block; |
|
vertical-align: middle; |
|
position: relative; |
|
|
|
// Child buttons |
|
.ui-button { |
|
border-radius: 0; |
|
margin-left: -1px; |
|
float: left; |
|
} |
|
|
|
// Remove left margin for first childs |
|
.ui-button:first-child, |
|
.ui-helper-hidden-accessible:first-child + .ui-button { |
|
margin-left: 0; |
|
} |
|
|
|
// Add border radius for the first button |
|
.ui-button:first-child, |
|
.ui-helper-hidden-accessible:first-child + .ui-button:not(:last-child) { |
|
.border-left-radius(@border-radius-base); |
|
} |
|
|
|
// Add border radius for the last button |
|
.ui-button:last-child { |
|
.border-right-radius(@border-radius-base); |
|
} |
|
} |
|
|
|
// Split button |
|
.ui-buttonset-split { |
|
position: relative; |
|
display: inline-block; |
|
|
|
> ul { |
|
position: absolute; |
|
text-align: left; |
|
min-width: 180px; |
|
} |
|
} |
|
|
|
|
|
|
|
// Datepicker |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-datepicker { |
|
min-width: 270px; |
|
background-color: @dropdown-bg; |
|
padding: (@list-spacing * 2); |
|
display: none; |
|
border: 1px solid @dropdown-border; |
|
border-radius: @border-radius-base; |
|
z-index: 190; |
|
.box-shadow(0 1px 3px fade(#000, 10%)); |
|
|
|
// Make it flexible in sidebar |
|
.sidebar & { |
|
min-width: 0; |
|
} |
|
|
|
|
|
// Header |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-datepicker-header { |
|
position: relative; |
|
} |
|
|
|
// Title |
|
.ui-datepicker-title { |
|
margin: 0 40px; |
|
padding-top: @content-padding-base; |
|
padding-bottom: @content-padding-base; |
|
font-size: @font-size-h6; |
|
text-align: center; |
|
line-height: 1; |
|
|
|
// Show month |
|
.ui-datepicker-month { |
|
font-weight: 500; |
|
} |
|
|
|
// Show year |
|
.ui-datepicker-year { |
|
font-size: @font-size-small; |
|
color: @text-muted; |
|
margin-left: 5px; |
|
} |
|
|
|
// Date select |
|
select { |
|
outline: 0; |
|
height: (@icon-font-size + (@padding-base-vertical * 2)); |
|
border-color: @input-border; |
|
|
|
&.ui-datepicker-month, |
|
&.ui-datepicker-year { |
|
width: 48%; |
|
font-size: @font-size-base; |
|
font-weight: 400; |
|
color: @text-color; |
|
} |
|
} |
|
} |
|
|
|
|
|
// Nav buttons |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-datepicker-prev, |
|
.ui-datepicker-next { |
|
position: absolute; |
|
top: 50%; |
|
margin-top: -((@icon-font-size / 2) + @padding-base-vertical); |
|
line-height: 1; |
|
color: @text-color; |
|
padding: @padding-base-vertical; |
|
border-radius: @border-radius-small; |
|
|
|
// Icon base |
|
&:after { |
|
font-family: 'icomoon'; |
|
display: block; |
|
font-size: @icon-font-size; |
|
width: @icon-font-size; |
|
text-align: center; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
|
|
// Hide text |
|
span { |
|
display: none; |
|
} |
|
} |
|
|
|
// Prev button icon |
|
.ui-datepicker-prev { |
|
left: 0; |
|
|
|
&:after { |
|
content: '\e9c8'; |
|
} |
|
} |
|
|
|
// Next btn icon |
|
.ui-datepicker-next { |
|
right: 0; |
|
|
|
&:after { |
|
content: '\e9cb'; |
|
} |
|
} |
|
|
|
// Hover state |
|
.ui-datepicker-prev-hover, |
|
.ui-datepicker-next-hover { |
|
background-color: @dropdown-link-hover-bg; |
|
} |
|
|
|
|
|
// Components |
|
// ------------------------------ |
|
|
|
// Table |
|
table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
margin: 0; |
|
|
|
// Header cells |
|
th { |
|
text-align: center; |
|
font-weight: 400; |
|
border: 0; |
|
padding-top: @content-padding-small; |
|
padding-bottom: @content-padding-small; |
|
font-size: @font-size-small; |
|
color: @text-muted; |
|
} |
|
|
|
// Body cells |
|
td { |
|
border: 0; |
|
padding: 1px; |
|
position: relative; |
|
|
|
// Day element |
|
span, |
|
a { |
|
display: block; |
|
padding: 6px; |
|
text-align: center; |
|
text-decoration: none; |
|
border-radius: @border-radius-base; |
|
color: @text-color; |
|
min-width: 34px; |
|
} |
|
|
|
// Hover state |
|
.ui-state-hover { |
|
background-color: @dropdown-link-hover-bg; |
|
} |
|
|
|
&.ui-state-disabled span { |
|
color: #ccc; |
|
} |
|
|
|
// Week column |
|
&.ui-datepicker-week-col { |
|
padding: 6px; |
|
color: @text-muted; |
|
} |
|
|
|
// Active day |
|
&.ui-datepicker-current-day .ui-state-active { |
|
background-color: @color-teal-400; |
|
color: #fff; |
|
} |
|
|
|
// Today |
|
&.ui-datepicker-today .ui-state-highlight { |
|
background-color: @brand-primary; |
|
color: #fff; |
|
|
|
&:after { |
|
content: ""; |
|
position: absolute; |
|
top: 3px; |
|
right: 3px; |
|
width: 0; |
|
height: 0; |
|
border-top: 6px solid #fff; |
|
border-left: 6px solid transparent; |
|
} |
|
} |
|
|
|
a.ui-priority-secondary { |
|
.opacity(0.6); |
|
} |
|
} |
|
} |
|
|
|
// Button panel |
|
.ui-datepicker-buttonpane { |
|
button { |
|
float: right; |
|
border: 1px solid @btn-default-border; |
|
background-color: @btn-default-bg; |
|
font-weight: 400; |
|
margin-top: (@list-spacing * 2); |
|
cursor: pointer; |
|
padding: @padding-base-vertical @padding-base-horizontal; |
|
width: auto; |
|
overflow: visible; |
|
outline: 0; |
|
border-radius: @border-radius-base; |
|
|
|
// Hover state |
|
&.ui-state-hover { |
|
.box-shadow(0 0 0 100px fade(#000, 1%) inset); |
|
} |
|
|
|
// Current date |
|
&.ui-datepicker-current { |
|
float: left; |
|
} |
|
|
|
// Active state |
|
&:active { |
|
.box-shadow(0 0 0 100px fade(#000, 3%) inset); |
|
} |
|
} |
|
} |
|
|
|
// Multiple calendars |
|
&.ui-datepicker-multi { |
|
width: auto!important; |
|
} |
|
} |
|
|
|
// Inline datepicker |
|
.datepicker-inline { |
|
width: 264px; |
|
max-width: 100%; |
|
overflow-x: auto; |
|
|
|
.full-width&, |
|
.sidebar &, |
|
.popover & { |
|
width: 100%; |
|
} |
|
} |
|
|
|
// Trigger |
|
.ui-datepicker-trigger { |
|
position: absolute; |
|
top: 4px; |
|
right: 5px; |
|
z-index: 4; |
|
padding: 6px; |
|
cursor: pointer; |
|
} |
|
|
|
// Clearfix |
|
.ui-datepicker-row-break { |
|
clear: both; |
|
width: 100%; |
|
font-size: 0; |
|
} |
|
|
|
// Multiple datepickers |
|
.ui-datepicker-multi { |
|
.ui-datepicker-group { |
|
float: left; |
|
|
|
+ .ui-datepicker-group { |
|
padding-left: 15px; |
|
} |
|
} |
|
|
|
.ui-datepicker-group-last { |
|
.ui-datepicker-header { |
|
border-left-width: 0; |
|
} |
|
} |
|
|
|
.ui-datepicker-buttonpane { |
|
clear: left; |
|
} |
|
} |
|
.ui-datepicker-multi-2 .ui-datepicker-group { |
|
width: 46%; |
|
} |
|
.ui-datepicker-multi-3 .ui-datepicker-group { |
|
width: 33.3%; |
|
} |
|
.ui-datepicker-multi-4 .ui-datepicker-group { |
|
width: 25%; |
|
} |
|
|
|
|
|
|
|
// Dialog |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-dialog { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
background-color: @modal-content-bg; |
|
border-radius: @border-radius-base; |
|
border: 1px solid @modal-content-border-color; |
|
outline: 0; |
|
overflow: hidden; |
|
.box-shadow(0 1px 4px rgba(0,0,0,.2)); |
|
|
|
// Make it full width on mobiles |
|
@media (max-width: @screen-xs-max) { |
|
width: 90%!important; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Dialog header |
|
// |
|
|
|
// Header |
|
.ui-dialog-titlebar { |
|
position: relative; |
|
padding: @modal-title-padding; |
|
padding-bottom: 0; |
|
|
|
// Draggable cursor |
|
.ui-draggable & { |
|
cursor: move; |
|
} |
|
} |
|
|
|
// Title |
|
.ui-dialog-title { |
|
float: left; |
|
font-size: @font-size-h6; |
|
white-space: nowrap; |
|
width: 90%; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
// Close button |
|
.ui-dialog-titlebar-close { |
|
position: absolute; |
|
background-color: transparent; |
|
border: 0; |
|
right: @content-padding-large; |
|
top: 50%; |
|
padding: 0; |
|
margin-top: ((@line-height-computed - @icon-font-size) / 2); |
|
|
|
// Cross icon |
|
&:after { |
|
content: '\ed6b'; |
|
font-family: 'Icomoon'; |
|
display: block; |
|
width: @icon-font-size; |
|
font-size: @icon-font-size; |
|
line-height: 1; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
|
|
|
|
// Remove default button shadows |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
|
|
// |
|
// Dialog content |
|
// |
|
|
|
// Content itself |
|
.ui-dialog-content { |
|
position: relative; |
|
border: 0; |
|
padding: @modal-inner-padding; |
|
background: none; |
|
overflow: auto; |
|
|
|
// Remove bottom margin from last childs |
|
.form-group:last-child, |
|
p:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
// Buttons |
|
.ui-dialog-buttonpane { |
|
padding: @modal-inner-padding; |
|
padding-top: 0; |
|
|
|
.ui-dialog-buttonset { |
|
float: right; |
|
} |
|
|
|
button + button { |
|
margin-left: 5px; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
|
|
|
|
// Menu |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-menu { |
|
list-style: none; |
|
padding: @list-spacing 0; |
|
margin: 0; |
|
display: block; |
|
outline: none; |
|
min-width: 180px; |
|
white-space: nowrap; |
|
background-color: @dropdown-bg; |
|
border: 1px solid @input-border; |
|
border-radius: @border-radius-base; |
|
z-index: @zindex-dropdown; |
|
.box-shadow(0 1px 3px fade(#000, 10%)); |
|
|
|
// Nested menu |
|
.ui-menu { |
|
position: absolute; |
|
top: -(@list-spacing + 1)!important; |
|
} |
|
|
|
// Menu item |
|
.ui-menu-item { |
|
position: relative; |
|
margin: 0; |
|
cursor: pointer; |
|
padding: (@padding-base-vertical + 1) @content-padding-base; |
|
min-height: 0; |
|
outline: 0; |
|
|
|
// Links |
|
> a { |
|
display: block; |
|
color: @text-color; |
|
} |
|
|
|
// Icons |
|
> i { |
|
margin-right: @element-horizontal-spacing; |
|
} |
|
|
|
// Submenu arrow icon |
|
> .ui-menu-icon { |
|
position: absolute; |
|
top: 50%; |
|
margin-top: -(@icon-font-size / 2); |
|
right: @content-padding-base; |
|
|
|
&:after { |
|
content: '\e9c7'; |
|
font-family: 'icomoon'; |
|
font-size: @icon-font-size; |
|
font-weight: 400; |
|
line-height: 1; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
.opacity(0.8); |
|
} |
|
} |
|
|
|
// Disabled state |
|
&.ui-state-disabled { |
|
&, |
|
a { |
|
color: @text-muted; |
|
cursor: @cursor-disabled; |
|
} |
|
} |
|
} |
|
|
|
// Header |
|
.ui-menu-header { |
|
padding: (@padding-base-vertical + 1) @content-padding-base; |
|
font-size: @font-size-mini; |
|
line-height: @line-height-mini; |
|
text-transform: uppercase; |
|
color: @text-muted; |
|
margin-top: @list-spacing; |
|
|
|
// Highlighted header |
|
&.highlight { |
|
margin-top: 0; |
|
background-color: @dropdown-annotation-bg; |
|
color: @gray-light; |
|
|
|
// ... but remove from the first one |
|
&:first-child { |
|
margin-top: 0; |
|
} |
|
} |
|
} |
|
.ui-menu-item + .highlight, |
|
.highlight + .ui-menu-item { |
|
margin-top: @list-spacing; |
|
} |
|
|
|
// Icons |
|
.ui-menu-item > a, |
|
.ui-menu-header { |
|
> i[class*=icon-] { |
|
margin-top: ((@line-height-computed - @icon-font-size) / 2); |
|
float: left; |
|
margin-right: @content-padding-small; |
|
top: 0; |
|
|
|
// Right icon |
|
&.pull-right { |
|
margin-right: 0; |
|
margin-left: @content-padding-small; |
|
} |
|
} |
|
} |
|
|
|
// Divider |
|
.ui-menu-divider { |
|
margin: @list-spacing 0; |
|
height: 0; |
|
font-size: 0; |
|
line-height: 0; |
|
border-top: 1px solid @dropdown-divider-bg; |
|
} |
|
|
|
// States |
|
.ui-state-focus, |
|
.ui-state-active { |
|
color: @dropdown-link-hover-color; |
|
background-color: @dropdown-link-hover-bg; |
|
} |
|
|
|
// Disabled state |
|
&.ui-state-disabled { |
|
&, |
|
.ui-menu-item, |
|
a { |
|
color: @text-muted; |
|
cursor: @cursor-disabled; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
// Progress bar |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-progressbar { |
|
height: @progress-base-height; |
|
overflow: hidden; |
|
position: relative; |
|
background-color: @progress-bg; |
|
border-radius: @progress-border-radius; |
|
.box-shadow(inset 0 1px 1px fade(#000, 10%)); |
|
} |
|
|
|
// Value |
|
.ui-progressbar-value { |
|
float: left; |
|
width: 0%; |
|
height: 100%; |
|
background-color: @progress-bar-bg; |
|
color: #fff; |
|
overflow: hidden; |
|
.transition(width .6s ease); |
|
} |
|
|
|
// Overlay |
|
.ui-progressbar-value, |
|
.ui-progressbar-overlay { |
|
height: 100%; |
|
background-size: 40px 40px; |
|
} |
|
|
|
// Stripes |
|
.ui-progressbar-striped { |
|
.ui-progressbar-value, |
|
.ui-progressbar-overlay { |
|
#gradient > .striped(); |
|
} |
|
} |
|
|
|
// Stripes for overlay |
|
.ui-progressbar-overlay { |
|
#gradient > .striped(); |
|
} |
|
|
|
// Animated stripes |
|
.ui-progressbar-active .ui-progressbar-value, |
|
.ui-progressbar-overlay { |
|
.animation(progress-bar-stripes 2s linear infinite); |
|
} |
|
|
|
// Remove stripes in indeterminate mode |
|
.ui-progressbar-indeterminate .ui-progressbar-value { |
|
background-image: none; |
|
} |
|
|
|
|
|
|
|
// Select menu |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-selectmenu-menu { |
|
padding: 0; |
|
margin: 0; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
display: none; |
|
|
|
// Set max width for menu |
|
.ui-menu { |
|
max-height: 250px; |
|
overflow-y: auto; |
|
overflow-x: hidden; |
|
|
|
// Optgroups |
|
.ui-selectmenu-optgroup { |
|
font-size: @font-size-mini; |
|
font-weight: 700; |
|
line-height: @line-height-mini; |
|
padding: @padding-base-vertical @padding-base-horizontal; |
|
margin: 2px 0; |
|
text-transform: uppercase; |
|
height: auto; |
|
border: 0; |
|
|
|
// Add double horizontal padding for items |
|
~ .ui-menu-item { |
|
padding-left: (@padding-base-horizontal * 2); |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Display if opened |
|
.ui-selectmenu-open { |
|
display: block; |
|
} |
|
|
|
// Select button |
|
.ui-selectmenu-button { |
|
display: inline-block; |
|
position: relative; |
|
text-decoration: none; |
|
cursor: pointer; |
|
height: @input-height-base; |
|
padding: @padding-base-vertical @padding-base-horizontal; |
|
padding-right: ((@padding-base-horizontal * 2) + @content-padding-small); |
|
background-color: @input-bg; |
|
border: 1px solid @input-border; |
|
border-radius: @input-border-radius; |
|
outline: 0; |
|
|
|
// Darken on hover and focus |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
.box-shadow(0 0 0 100px fade(#000, 1%) inset); |
|
} |
|
|
|
// Down arrow |
|
&:after { |
|
content: '\e9c5'; |
|
font-family: 'Icomoon'; |
|
display: inline-block; |
|
position: absolute; |
|
top: 50%; |
|
right: @padding-base-horizontal; |
|
text-align: right; |
|
margin-top: -(@icon-font-size / 2); |
|
font-size: @icon-font-size; |
|
line-height: 1; |
|
color: inherit; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
|
|
// Button text |
|
.ui-selectmenu-text { |
|
display: block; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
|
|
// Disabled menu |
|
.ui-selectmenu-disabled { |
|
cursor: @cursor-disabled; |
|
background-color: @input-bg-disabled; |
|
color: @gray-light; |
|
|
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
|
|
// |
|
// Optional sizing to match form controls |
|
// |
|
|
|
// Large |
|
.ui-selectmenu-lg { |
|
.ui-selectmenu-button { |
|
height: @input-height-large; |
|
|
|
.ui-selectmenu-text { |
|
padding: @padding-large-vertical @padding-large-horizontal; |
|
padding-right: ((@padding-large-horizontal * 2) + @content-padding-small); |
|
} |
|
} |
|
} |
|
|
|
// Small |
|
.ui-selectmenu-sm { |
|
.ui-selectmenu-button { |
|
height: @input-height-small; |
|
|
|
.ui-selectmenu-text { |
|
padding: @padding-small-vertical @padding-base-horizontal; |
|
padding-right: ((@padding-small-horizontal * 2) + @content-padding-small); |
|
font-size: @font-size-small; |
|
line-height: @line-height-small; |
|
} |
|
} |
|
} |
|
|
|
// Mini |
|
.ui-selectmenu-xs { |
|
.ui-selectmenu-button { |
|
height: @input-height-mini; |
|
|
|
.ui-selectmenu-text { |
|
padding: @padding-xs-vertical @padding-xs-horizontal; |
|
padding-right: ((@padding-xs-horizontal * 2) + @content-padding-small); |
|
font-size: @font-size-small; |
|
line-height: @line-height-small; |
|
} |
|
} |
|
} |
|
|
|
|
|
// |
|
// Images |
|
// |
|
|
|
.ui-selectmenu-images { |
|
|
|
// Image base |
|
.ui-menu-item > span { |
|
display: inline-block; |
|
margin-right: @content-padding-small; |
|
border-radius: @border-radius-small; |
|
width: @line-height-computed; |
|
height: @line-height-computed; |
|
background-size: @line-height-computed @line-height-computed; |
|
float: left; |
|
} |
|
|
|
// Demo images, replace with your own |
|
.demo-img-amazon { |
|
background: url('../images/brands/amazon.png') no-repeat; |
|
} |
|
.demo-img-youtube { |
|
background: url('../images/brands/youtube.png') no-repeat; |
|
} |
|
.demo-img-twitter { |
|
background: url('../images/brands/twitter.png') no-repeat; |
|
} |
|
.demo-img-bing { |
|
background: url('../images/brands/bing.png') no-repeat; |
|
} |
|
.demo-img-spotify { |
|
background: url('../images/brands/spotify.png') no-repeat; |
|
} |
|
} |
|
|
|
|
|
|
|
// Sliders |
|
// ------------------------------ |
|
|
|
.ui-slider { |
|
position: relative; |
|
text-align: left; |
|
background-color: @gray-lighter; |
|
border-radius: 100px; |
|
.box-shadow(inset 0 1px 1px fade(#000, 10%)); |
|
|
|
// Handle |
|
.ui-slider-handle { |
|
position: absolute; |
|
z-index: 2; |
|
width: (@slider-base-size * 3); |
|
height: (@slider-base-size * 3); |
|
cursor: pointer; |
|
border-radius: 50%; |
|
background-color: #fcfcfc; |
|
border: 1px solid #bbb; |
|
outline: 0; |
|
|
|
// Hover color |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
background-color: #f8f8f8; |
|
|
|
// Mute circle |
|
&:after { |
|
.opacity(0.9); |
|
} |
|
} |
|
|
|
// Active color |
|
&.ui-state-active { |
|
background-color: #fefefe; |
|
|
|
// Mute circle |
|
&:after { |
|
.opacity(0.9); |
|
} |
|
} |
|
|
|
// Inner circle |
|
&:after { |
|
content: ''; |
|
display: inline-block; |
|
width: @slider-base-size; |
|
height: @slider-base-size; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
margin-top: -(@slider-base-size / 2); |
|
margin-left: -(@slider-base-size / 2); |
|
background-color: @color-slate-600; |
|
border-radius: 50%; |
|
} |
|
} |
|
|
|
// Range |
|
.ui-slider-range { |
|
position: absolute; |
|
z-index: 1; |
|
display: block; |
|
border: 0; |
|
background-color: @color-slate-500; |
|
border-radius: 100px; |
|
} |
|
|
|
// Disabled state |
|
&.ui-slider-disabled { |
|
.opacity(0.6); |
|
} |
|
} |
|
|
|
|
|
// |
|
// Orientations |
|
// |
|
|
|
// Horizontal |
|
.ui-slider-horizontal { |
|
height: @slider-base-size; |
|
|
|
// Handle |
|
.ui-slider-handle { |
|
top: -(@slider-base-size * 1.5) + (@slider-base-size / 2); |
|
margin-left: -(@slider-base-size * 1.5); |
|
} |
|
|
|
// Ranges |
|
.ui-slider-range { |
|
top: 0; |
|
height: 100%; |
|
} |
|
.ui-slider-range-min { |
|
left: 0; |
|
} |
|
.ui-slider-range-max { |
|
right: 0; |
|
} |
|
} |
|
|
|
// Vertical |
|
.ui-slider-vertical { |
|
width: @slider-base-size; |
|
height: 150px; |
|
display: inline-block; |
|
margin: 0 10px; |
|
|
|
// Handle |
|
.ui-slider-handle { |
|
left: -(@slider-base-size * 1.5) + (@slider-base-size / 2); |
|
margin-bottom: -(@slider-base-size * 1.5); |
|
} |
|
|
|
// Ranges |
|
.ui-slider-range { |
|
left: 0; |
|
width: 100%; |
|
} |
|
.ui-slider-range-min { |
|
bottom: 0; |
|
} |
|
.ui-slider-range-max { |
|
top: 0; |
|
} |
|
} |
|
|
|
|
|
// |
|
// Handles |
|
// |
|
|
|
// Slider with solid handle |
|
.ui-slider-solid { |
|
.ui-slider-handle { |
|
background-color: @gray-light; |
|
border-color: @gray-light; |
|
.box-shadow(none); |
|
|
|
&:after { |
|
background-color: #fff; |
|
.transition(opacity ease-in-out 0.2s); |
|
} |
|
|
|
&.ui-state-hover:after, |
|
&.ui-state-active:after { |
|
background-color: #fff; |
|
.opacity(0.75); |
|
} |
|
} |
|
} |
|
|
|
// White handle |
|
.ui-handle-white .ui-slider-handle:after { |
|
content: none; |
|
} |
|
|
|
|
|
// |
|
// Sizing |
|
// |
|
|
|
// Large |
|
.ui-slider-lg { |
|
|
|
// Handle |
|
.ui-slider-handle { |
|
width: (@slider-large-size * 3); |
|
height: (@slider-large-size * 3); |
|
|
|
// Inner circle |
|
&:after { |
|
width: @slider-large-size; |
|
height: @slider-large-size; |
|
margin-top: -(@slider-large-size / 2); |
|
margin-left: -(@slider-large-size / 2); |
|
} |
|
} |
|
|
|
// In horizontal orientation |
|
&.ui-slider-horizontal { |
|
height: @slider-large-size; |
|
|
|
.ui-slider-handle { |
|
top: -(@slider-large-size * 1.5) + (@slider-large-size / 2); |
|
margin-left: -(@slider-large-size * 1.5); |
|
} |
|
} |
|
|
|
// In vertical orientation |
|
&.ui-slider-vertical { |
|
width: @slider-large-size; |
|
|
|
.ui-slider-handle { |
|
left: -(@slider-large-size * 1.5) + (@slider-large-size / 2); |
|
margin-bottom: -(@slider-large-size * 1.5); |
|
} |
|
} |
|
} |
|
|
|
// Small and mini have the same handle size |
|
.ui-slider-sm, |
|
.ui-slider-xs { |
|
.ui-slider-handle { |
|
width: (@slider-small-size * 3); |
|
height: (@slider-small-size * 3); |
|
|
|
// Inner circle |
|
&:after { |
|
width: @slider-small-size; |
|
height: @slider-small-size; |
|
margin-top: -(@slider-small-size / 2); |
|
margin-left: -(@slider-small-size / 2); |
|
} |
|
} |
|
} |
|
|
|
// Small |
|
.ui-slider-sm { |
|
|
|
// In horizontal orientation |
|
&.ui-slider-horizontal { |
|
height: @slider-small-size; |
|
|
|
.ui-slider-handle { |
|
top: -(@slider-small-size * 1.5) + (@slider-small-size / 2); |
|
margin-left: -(@slider-small-size * 1.5); |
|
} |
|
} |
|
|
|
// In vertical orientation |
|
&.ui-slider-vertical { |
|
width: @slider-small-size; |
|
|
|
.ui-slider-handle { |
|
left: -(@slider-small-size * 1.5) + (@slider-small-size / 2); |
|
margin-bottom: -(@slider-small-size * 1.5); |
|
} |
|
} |
|
} |
|
|
|
// Mini |
|
.ui-slider-xs { |
|
|
|
// In horizontal orientation |
|
&.ui-slider-horizontal { |
|
height: @slider-mini-size; |
|
|
|
.ui-slider-handle { |
|
top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2); |
|
margin-left: -(@slider-small-size * 1.5); |
|
} |
|
} |
|
|
|
// In vertical orientation |
|
&.ui-slider-vertical { |
|
width: @slider-mini-size; |
|
|
|
.ui-slider-handle { |
|
left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2); |
|
margin-bottom: -(@slider-small-size * 1.5); |
|
} |
|
} |
|
} |
|
|
|
|
|
// |
|
// Contextual colors |
|
// |
|
|
|
.ui-slider-primary .ui-slider-range, |
|
.ui-slider-solid.ui-slider-primary .ui-slider-handle { |
|
background-color: @brand-primary; |
|
border-color: @brand-primary; |
|
} |
|
.ui-slider-danger .ui-slider-range, |
|
.ui-slider-solid.ui-slider-danger .ui-slider-handle { |
|
background-color: @brand-danger; |
|
border-color: @brand-danger; |
|
} |
|
.ui-slider-success .ui-slider-range, |
|
.ui-slider-solid.ui-slider-success .ui-slider-handle { |
|
background-color: @brand-success; |
|
border-color: @brand-success; |
|
} |
|
.ui-slider-warning .ui-slider-range, |
|
.ui-slider-solid.ui-slider-warning .ui-slider-handle { |
|
background-color: @brand-warning; |
|
border-color: @brand-warning; |
|
} |
|
.ui-slider-info .ui-slider-range, |
|
.ui-slider-solid.ui-slider-info .ui-slider-handle { |
|
background-color: @brand-info; |
|
border-color: @brand-info; |
|
} |
|
|
|
|
|
|
|
// Spinner |
|
// ------------------------------ |
|
|
|
// Base |
|
.ui-spinner { |
|
position: relative; |
|
display: table; |
|
} |
|
|
|
// Input |
|
.ui-spinner-input { |
|
padding-right: (@padding-base-vertical * 2) + @icon-font-size; |
|
display: table-cell; |
|
width: 100%; |
|
border-radius: @input-border-radius 0 0 @input-border-radius; |
|
border-right: 0; |
|
} |
|
|
|
|
|
// |
|
// Buttons |
|
// |
|
|
|
// Button base |
|
.ui-spinner-button { |
|
font-size: 0; |
|
color: @text-color; |
|
cursor: pointer; |
|
background-color: @input-bg; |
|
border: 1px solid @input-border; |
|
border-radius: 0; |
|
display: table-cell; |
|
width: 1%; |
|
padding: 0 @padding-base-vertical; |
|
|
|
// Button icons base |
|
&:after { |
|
font-family: 'Icomoon'; |
|
display: inline-block; |
|
width: @icon-font-size; |
|
font-size: @icon-font-size; |
|
line-height: 1; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
} |
|
|
|
// Remove left border from 2ns button |
|
& + & { |
|
border-left: 0; |
|
} |
|
|
|
// Hide button text |
|
.ui-button-text { |
|
display: none; |
|
} |
|
|
|
// Hover/focus states |
|
&.ui-state-hover, |
|
&.ui-state-focus { |
|
color: @text-color; |
|
} |
|
|
|
// Disabled state |
|
&.ui-state-disabled { |
|
background-color: @input-bg-disabled; |
|
color: @text-muted; |
|
cursor: @cursor-disabled; |
|
.box-shadow(none); |
|
} |
|
} |
|
|
|
// Up button icon |
|
.ui-spinner-up { |
|
&:after { |
|
content: '\e9f7'; |
|
} |
|
} |
|
|
|
// Down button icon |
|
.ui-spinner-down { |
|
&:after { |
|
content: '\e9e2'; |
|
} |
|
.border-right-radius(@input-border-radius); |
|
} |
|
|
|
|
|
|
|
// Tabs |
|
// ------------------------------ |
|
|
|
.ui-tabs { |
|
position: relative; |
|
|
|
// Tabs navigation |
|
.ui-tabs-nav { |
|
margin-bottom: @line-height-computed; |
|
border-bottom: 1px solid @nav-tabs-border-color; |
|
|
|
// Items |
|
li { |
|
list-style: none; |
|
position: relative; |
|
padding: 0; |
|
white-space: nowrap; |
|
margin-bottom: -1px; |
|
|
|
// Setup desktop view |
|
@media (min-width: @screen-sm-min) { |
|
float: left; |
|
} |
|
} |
|
|
|
// Links |
|
.ui-tabs-anchor { |
|
display: block; |
|
color: @color-grey-400; |
|
padding: @nav-link-padding; |
|
border: 1px solid transparent; |
|
border-top-width: 2px; |
|
} |
|
|
|
// Hover/focus states |
|
.ui-state-hover, |
|
.ui-state-focus { |
|
.ui-tabs-anchor:not(.ui-state-disabled) { |
|
color: @text-color; |
|
} |
|
} |
|
|
|
// Active item |
|
.ui-tabs-active { |
|
.ui-tabs-anchor { |
|
color: @nav-tabs-active-link-hover-color; |
|
background-color: @nav-tabs-active-link-hover-bg; |
|
cursor: default; |
|
border-color: @brand-primary @nav-tabs-active-link-hover-border-color transparent; |
|
} |
|
} |
|
|
|
// Disabled item |
|
.ui-state-disabled { |
|
color: @nav-disabled-link-color; |
|
cursor: @cursor-disabled; |
|
.opacity(0.75); |
|
} |
|
|
|
// Add bottom border and bg to sortable helper |
|
.ui-sortable-helper:not(.ui-tabs-active) { |
|
.ui-tabs-anchor { |
|
background-color: #fff; |
|
border-bottom-color: @nav-tabs-border-color; |
|
} |
|
} |
|
|
|
|
|
// Setup mobile view |
|
@media (max-width: @screen-xs-max) { |
|
border-bottom: 0; |
|
position: relative; |
|
background-color: #fff; |
|
padding: @list-spacing 0; |
|
border: 1px solid @panel-default-border; |
|
border-radius: @border-radius-base; |
|
|
|
// Tab nav item |
|
li { |
|
margin-bottom: 0; |
|
|
|
// Add 1px spacing between items |
|
& + li { |
|
margin-top: 1px; |
|
} |
|
} |
|
|
|
// Add permanent link styles |
|
.ui-tabs-anchor { |
|
border-width: 0 0 0 2px; |
|
border-left-color: transparent; |
|
} |
|
|
|
// Background color for hover/focus states |
|
.ui-state-hover, |
|
.ui-state-focus { |
|
.ui-tabs-anchor { |
|
background-color: @nav-tabs-mobile-link-hover-bg; |
|
} |
|
} |
|
|
|
// Left border and bg colors for active link |
|
.ui-state-active { |
|
.ui-tabs-anchor { |
|
border-left-color: @brand-primary; |
|
background-color: @nav-tabs-mobile-link-active-bg; |
|
} |
|
} |
|
|
|
// Add text header to the tabs section |
|
&:before { |
|
content: 'Contents'; |
|
color: inherit; |
|
font-size: @font-size-small; |
|
line-height: @line-height-small; |
|
font-weight: 500; |
|
margin-top: (@content-padding-base - @list-spacing); |
|
margin-left: @content-padding-base; |
|
margin-bottom: @content-padding-base; |
|
text-transform: uppercase; |
|
.opacity(0.5); |
|
} |
|
} |
|
} |
|
|
|
// Display tabs panel |
|
.ui-tabs-panel { |
|
display: block; |
|
} |
|
} |
|
|
|
|
|
|
|
// Tooltip |
|
// ------------------------------ |
|
|
|
.ui-tooltip { |
|
position: absolute; |
|
z-index: @zindex-tooltip; |
|
max-width: @tooltip-max-width; |
|
padding: 3px 8px; |
|
color: @tooltip-color; |
|
text-align: center; |
|
background-color: @tooltip-bg; |
|
border-radius: @border-radius-base; |
|
} |
|
|
|
|
|
|
|
// Misc |
|
// ------------------------------ |
|
|
|
// Overlay |
|
.ui-widget-overlay { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: @modal-backdrop-bg; |
|
.opacity(@modal-backdrop-opacity); |
|
} |
|
|
|
// |
|
// Layout helpers |
|
// |
|
|
|
// Hide element |
|
.ui-helper-hidden { |
|
display: none; |
|
} |
|
|
|
// Accessible element |
|
.ui-helper-hidden-accessible { |
|
border: 0; |
|
clip: rect(0 0 0 0); |
|
height: 1px; |
|
margin: -1px; |
|
overflow: hidden; |
|
padding: 0; |
|
position: absolute; |
|
width: 1px; |
|
} |
|
|
|
// Reset |
|
.ui-helper-reset { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
outline: 0; |
|
list-style: none; |
|
} |
|
|
|
// Clearfix |
|
.ui-helper-clearfix { |
|
&:before, |
|
&:after { |
|
content: ""; |
|
display: table; |
|
border-collapse: collapse; |
|
} |
|
|
|
&:after { |
|
clear: both; |
|
} |
|
} |
|
|
|
// iFrame fix |
|
.ui-helper-zfix { |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
position: absolute; |
|
.opacity(0); |
|
} |
|
|
|
// Overlay z-index |
|
.ui-front { |
|
z-index: @zindex-modal-background; |
|
}
|
|
|