first commit
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Alert component
|
||||
*
|
||||
* Overrides for alerts bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding-left: (@alert-padding + 5);
|
||||
padding-right: (@alert-padding + 5);
|
||||
|
||||
// Alert heading
|
||||
.alert-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.close {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
// -------------------------
|
||||
|
||||
// Primary - custom added
|
||||
.alert-primary {
|
||||
.alert-variant(@alert-primary-bg; @alert-primary-border; @alert-primary-text);
|
||||
|
||||
&,
|
||||
.close {
|
||||
color: darken(@color-primary-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.alert-success {
|
||||
&,
|
||||
.close {
|
||||
color: darken(@color-success-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.alert-info {
|
||||
&,
|
||||
.close {
|
||||
color: darken(@color-info-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.alert-warning {
|
||||
&,
|
||||
.close {
|
||||
color: darken(@color-warning-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.alert-danger {
|
||||
&,
|
||||
.close {
|
||||
color: darken(@color-danger-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Additional styling
|
||||
// -------------------------
|
||||
|
||||
// Rounded alert
|
||||
.alert.alert-rounded {
|
||||
border-radius: 100px;
|
||||
padding-left: (@alert-padding + 10);
|
||||
padding-right: (@alert-padding + 10);
|
||||
}
|
||||
|
||||
// Alert as a component
|
||||
.alert-component {
|
||||
&[class*=alert-styled-] {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom background color
|
||||
.alert[class*=bg-] {
|
||||
a,
|
||||
.alert-link {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styled alerts
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
|
||||
// Icon variations
|
||||
&[class*=alert-styled-] {
|
||||
|
||||
// Icon base
|
||||
&:after {
|
||||
content: '\e9a2';
|
||||
font-family: 'icomoon';
|
||||
color: #fff;
|
||||
width: (((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
left: -(((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
font-size: @icon-font-size;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Danger icon
|
||||
&.alert-danger:after,
|
||||
&[class*=bg-danger]:after {
|
||||
content: '\ed64';
|
||||
}
|
||||
|
||||
// Success icon
|
||||
&.alert-success:after,
|
||||
&[class*=bg-success]:after {
|
||||
content: '\ed6e';
|
||||
}
|
||||
|
||||
// Warning icon
|
||||
&.alert-warning:after,
|
||||
&[class*=bg-warning]:after {
|
||||
content: '\e9bd';
|
||||
}
|
||||
|
||||
// Info icon
|
||||
&.alert-info:after,
|
||||
&[class*=bg-info]:after {
|
||||
content: '\e9b9';
|
||||
}
|
||||
}
|
||||
|
||||
// Right icon position
|
||||
&.alert-styled-right {
|
||||
&:after {
|
||||
left: auto;
|
||||
right: -(((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
}
|
||||
}
|
||||
|
||||
// With custom icon
|
||||
&.alert-styled-custom {
|
||||
&:after {
|
||||
content: "\e81b"; // Change icon code for custom alert
|
||||
}
|
||||
}
|
||||
|
||||
// Styled alert with left icon
|
||||
&.alert-styled-left {
|
||||
border-left-width: (((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
|
||||
&[class*=bg-] {
|
||||
border-left-color: fade(#000, 15%)!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styled alert with right icon
|
||||
&.alert-styled-right {
|
||||
border-right-width: (((@alert-padding * 2) + @icon-font-size) - 2);
|
||||
|
||||
&[class*=bg-] {
|
||||
border-right-color: fade(#000, 15%)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert arrow
|
||||
// -------------------------
|
||||
|
||||
.alert {
|
||||
|
||||
// Left arrow
|
||||
&:not(.ui-pnotify)[class*=alert-arrow-]:before,
|
||||
.ui-pnotify&[class*=alert-arrow-] > .brighttheme:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
border-left: 5px solid;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left-color: inherit;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
// Right arrow
|
||||
&:not(.ui-pnotify).alert-arrow-right:before,
|
||||
.ui-pnotify&.alert-arrow-right > .brighttheme:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-left: 0;
|
||||
border-right: 5px solid;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Badges component
|
||||
*
|
||||
* Overrides for badges bootstrap component
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
.badge {
|
||||
padding: 2px 6px 1px 6px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1px;
|
||||
vertical-align: baseline;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 100px;
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn & {
|
||||
top: 0;
|
||||
}
|
||||
.btn-xs & {
|
||||
padding: 2px 6px 1px 6px;
|
||||
}
|
||||
|
||||
// Account for badges in navs
|
||||
.list-group-item.active > &,
|
||||
.nav-pills > .active > a > &,
|
||||
.nav-tabs-solid > .active > a > &,
|
||||
.nav-tabs[class*=bg-] > li > a > & {
|
||||
color: @badge-active-color;
|
||||
background-color: @badge-active-bg;
|
||||
border-color: @badge-active-bg;
|
||||
}
|
||||
.nav-pills > li > a > & {
|
||||
margin-left: 0;
|
||||
|
||||
&.position-right {
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variations
|
||||
// -------------------------
|
||||
|
||||
// Default
|
||||
.badge-default {
|
||||
background-color: @label-default-bg;
|
||||
border-color: @label-default-bg;
|
||||
}
|
||||
|
||||
// Primary
|
||||
.badge-primary {
|
||||
background-color: @label-primary-bg;
|
||||
border-color: @label-primary-bg;
|
||||
}
|
||||
|
||||
// Success
|
||||
.badge-success {
|
||||
background-color: @label-success-bg;
|
||||
border-color: @label-success-bg;
|
||||
}
|
||||
|
||||
// Info
|
||||
.badge-info {
|
||||
background-color: @label-info-bg;
|
||||
border-color: @label-info-bg;
|
||||
}
|
||||
|
||||
// Warning
|
||||
.badge-warning {
|
||||
background-color: @label-warning-bg;
|
||||
border-color: @label-warning-bg;
|
||||
}
|
||||
|
||||
// Danger
|
||||
.badge-danger {
|
||||
background-color: @label-danger-bg;
|
||||
border-color: @label-danger-bg;
|
||||
}
|
||||
|
||||
|
||||
// Flat labels style
|
||||
// -------------------------
|
||||
|
||||
.badge-flat {
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
padding: 1px 5px 0 5px;
|
||||
|
||||
// Remove background color and shadow on hover
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,442 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Breadcrumb component
|
||||
*
|
||||
* Overrides for breadcrumb bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styles
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.breadcrumb {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Breadcrumb item
|
||||
> li {
|
||||
position: relative;
|
||||
|
||||
// Links
|
||||
> a {
|
||||
color: @breadcrumb-color;
|
||||
|
||||
// Mute on hover
|
||||
&:hover,
|
||||
&:focus {
|
||||
.opacity(0.85);
|
||||
}
|
||||
}
|
||||
|
||||
// Icons
|
||||
i {
|
||||
display: inline-block;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Dropdown menus
|
||||
> .dropdown-menu {
|
||||
margin-top: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
&:first-child > .dropdown-menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
> .dropdown-menu-right {
|
||||
margin-left: 0;
|
||||
margin-right: -10px;
|
||||
}
|
||||
&:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Location text
|
||||
&.location-text {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
|
||||
+ li {
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
> .dropdown-menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Setup mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
||||
// Inside headings
|
||||
.heading-elements & {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Disable absolute positioning
|
||||
> li {
|
||||
position: static;
|
||||
|
||||
// Make dropdown full width
|
||||
.dropdown-menu {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-width: 1px 0;
|
||||
|
||||
> li {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Submenu
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb inside page title
|
||||
.page-title {
|
||||
.breadcrumb {
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
// Add left spacing if title has icon
|
||||
&.position-right {
|
||||
margin-left: (@icon-font-size + @element-horizontal-spacing + 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent breadcrumb
|
||||
.page-header-content {
|
||||
|
||||
// Breadcrumb
|
||||
> .breadcrumb {
|
||||
padding-top: 0;
|
||||
padding-bottom: (@breadcrumb-padding-vertical * 2);
|
||||
|
||||
&:first-child {
|
||||
padding-bottom: 0;
|
||||
padding-top: (@breadcrumb-padding-vertical * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Divider styles
|
||||
// -------------------------
|
||||
|
||||
// Dash
|
||||
.breadcrumb-dash > li + li:before {
|
||||
content: '\2013\00a0';
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.breadcrumb-arrow > li + li:before {
|
||||
content: '\2192\00a0';
|
||||
}
|
||||
|
||||
// Arrows
|
||||
.breadcrumb-arrows > li + li:before {
|
||||
content: '\00bb\00a0';
|
||||
}
|
||||
|
||||
// Caret
|
||||
.breadcrumb-caret > li + li:before {
|
||||
content: '\203A\00a0';
|
||||
}
|
||||
|
||||
|
||||
// Breadcrumb line
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.breadcrumb-line {
|
||||
position: relative;
|
||||
padding-left: @grid-gutter-width;
|
||||
padding-right: @grid-gutter-width;
|
||||
border-top: 1px solid @panel-default-border;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Inside page header (all levels)
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
border-bottom: 1px solid @panel-default-border;
|
||||
|
||||
// Z-index fix
|
||||
.page-header & {
|
||||
z-index: (@zindex-navbar - 6);
|
||||
}
|
||||
}
|
||||
|
||||
// In page header
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @page-header-default-bg;
|
||||
}
|
||||
|
||||
// After page header content
|
||||
.page-header-content + & {
|
||||
margin-bottom: @line-height-computed;
|
||||
border-bottom: 1px solid @panel-default-border;
|
||||
|
||||
// Remove bottom margin if inside colored header
|
||||
.page-header-default &,
|
||||
.page-header-inverse & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// And remove bottom border in light header
|
||||
.page-header-default & {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Darken inside white header
|
||||
.page-header-default &:not([class*=bg-]) {
|
||||
background-color: @panel-footer-bg;
|
||||
}
|
||||
|
||||
// Inside inversed header
|
||||
.page-header-inverse & {
|
||||
border-top-width: 0;
|
||||
|
||||
// Remove bottom border if before title
|
||||
&:first-child {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
margin-right: ((@content-padding-base * 2) + @icon-font-size);
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Z-index correction for mobiles
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
z-index: (@zindex-navbar - 2);
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// As a component
|
||||
.breadcrumb-line-component {
|
||||
border-radius: @border-radius-base;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
// Set colors
|
||||
&:not([class*=bg-]) {
|
||||
background-color: @panel-bg;
|
||||
border: 1px solid @panel-default-border;
|
||||
|
||||
// Inside default header
|
||||
.page-header-default & {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
// Inside inversed header
|
||||
.page-header-inverse & {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust horizontal spacing of breadcrumb
|
||||
.breadcrumb {
|
||||
margin-left: @grid-gutter-width;
|
||||
}
|
||||
|
||||
// Inside page header
|
||||
.page-header & {
|
||||
margin-left: @grid-gutter-width;
|
||||
margin-right: @grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Line with custom bg color
|
||||
.breadcrumb-line[class*=bg-] {
|
||||
|
||||
// Inherit colors
|
||||
a, i {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
.breadcrumb {
|
||||
> .active,
|
||||
> li + li:before {
|
||||
color: fade(#fff, 75%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// In dark containers
|
||||
.breadcrumb-line[class*=bg-] {
|
||||
|
||||
// Breadcrumb elements
|
||||
.breadcrumb-elements {
|
||||
border-top-color: fade(#fff, 10%);
|
||||
|
||||
// Element items
|
||||
> li {
|
||||
> a {
|
||||
color: fade(#fff, 90%);
|
||||
}
|
||||
|
||||
// Highlight on hover
|
||||
&.open > a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Breadrumb elements
|
||||
// ------------------------------
|
||||
|
||||
.breadcrumb-elements {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid @page-header-border-color;
|
||||
font-size: 0;
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Items
|
||||
> li {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
font-size: @font-size-base;
|
||||
|
||||
// Links
|
||||
> a {
|
||||
display: block;
|
||||
padding: @breadcrumb-padding-vertical @content-padding-base;
|
||||
color: @breadcrumb-color;
|
||||
}
|
||||
|
||||
// Highlight on hover
|
||||
&.open > a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
background-color: darken(@panel-footer-bg, 1%);
|
||||
|
||||
.breadcrumb-line[class*=bg-] & {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown menu
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
left: auto;
|
||||
right: -1px;
|
||||
.border-top-radius(0);
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
left: -1px;
|
||||
|
||||
// Links
|
||||
> li > a {
|
||||
padding-left: @content-padding-base;
|
||||
padding-right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropup menu
|
||||
.dropup > .dropdown-menu {
|
||||
margin-bottom: 0;
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
// Collapse button
|
||||
[data-toggle="collapse"] {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: @grid-gutter-width;
|
||||
}
|
||||
|
||||
// Desktop view
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
float: right;
|
||||
text-align: inherit;
|
||||
border-top: 0;
|
||||
|
||||
// Collapse
|
||||
&.collapse {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Items
|
||||
> li {
|
||||
float: left;
|
||||
|
||||
&,
|
||||
.btn-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.breadcrumb-line-component &:last-child > a {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide collapsible toggler
|
||||
[data-toggle="collapse"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
.breadcrumb-line:not(.breadcrumb-line-component) & {
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
background-color: inherit;
|
||||
margin-left: -(@grid-gutter-width);
|
||||
margin-right: -(@grid-gutter-width);
|
||||
padding-left: @grid-gutter-width;
|
||||
padding-right: @grid-gutter-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Button group component
|
||||
*
|
||||
* Overrides for button group bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn-group {
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
// In default button border is darker than bg
|
||||
.btn + .btn-default,
|
||||
.btn-default + .btn-group,
|
||||
.btn-group + .btn-default {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
font-size: 0;
|
||||
|
||||
.btn-group,
|
||||
.input-group {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove left border radius in multiple buttons
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
// -------------------------
|
||||
|
||||
// Since we use overrides in buttons.less, sizing needs to be
|
||||
// dublicated here
|
||||
.btn-group-xlg > .btn {
|
||||
&:extend(.btn-xlg);
|
||||
}
|
||||
.btn-group-lg > .btn {
|
||||
&:extend(.btn-lg);
|
||||
}
|
||||
.btn-group-sm > .btn {
|
||||
&:extend(.btn-sm);
|
||||
}
|
||||
.btn-group-xs > .btn {
|
||||
&:extend(.btn-xs);
|
||||
}
|
||||
|
||||
|
||||
// Caret button size in split buttons
|
||||
// ----------------------
|
||||
|
||||
// Default button and button group
|
||||
.btn-group > .btn + .dropdown-toggle {
|
||||
padding-left: (@padding-base-horizontal - 3);
|
||||
padding-right: (@padding-base-horizontal - 3);
|
||||
}
|
||||
|
||||
// XLarge button and button group
|
||||
.btn-group > .btn-xlg + .dropdown-toggle,
|
||||
.btn-group-xlg > .btn + .dropdown-toggle {
|
||||
padding-left: (@padding-xlarge-horizontal - 3);
|
||||
padding-right: (@padding-xlarge-horizontal - 3);
|
||||
}
|
||||
|
||||
// Large button and button group
|
||||
.btn-group > .btn-lg + .dropdown-toggle,
|
||||
.btn-group-lg > .btn + .dropdown-toggle {
|
||||
padding-left: (@padding-large-horizontal - 3);
|
||||
padding-right: (@padding-large-horizontal - 3);
|
||||
}
|
||||
|
||||
// Small button and button group
|
||||
.btn-group > .btn-sm + .dropdown-toggle,
|
||||
.btn-group-sm > .btn + .dropdown-toggle {
|
||||
padding-left: (@padding-small-horizontal - 3);
|
||||
padding-right: (@padding-small-horizontal - 3);
|
||||
}
|
||||
|
||||
// Mini button and button group
|
||||
.btn-group > .btn-xs + .dropdown-toggle,
|
||||
.btn-group-xs > .btn + .dropdown-toggle {
|
||||
padding-left: (@padding-xs-horizontal - 3);
|
||||
padding-right: (@padding-xs-horizontal - 3);
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// ----------------------
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset);
|
||||
|
||||
&.btn-default {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Justified button groups
|
||||
// ----------------------
|
||||
|
||||
.btn-group-justified {
|
||||
> .btn + .btn,
|
||||
> .btn-group + .btn-group > .btn {
|
||||
border-left-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
> .btn + .btn-default,
|
||||
> .btn-group + .btn-group > .btn-default {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,580 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Buttons component
|
||||
*
|
||||
* Overrides for buttons bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
// -------------------------
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
|
||||
// Remove outline
|
||||
&,
|
||||
&:active,
|
||||
&.active {
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox fix
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 5%) inset); // Use box shadow instead of color for all buttons - contextual and custom
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active,
|
||||
&.active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 10%) inset); // The same as above - no color changes, only box shadow
|
||||
}
|
||||
|
||||
// Custom color buttons
|
||||
&[class*=bg-] {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Correct line heights in smaller text sizes
|
||||
&.text-size-small {
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
&.text-size-mini {
|
||||
line-height: @line-height-mini;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button styling
|
||||
// -------------------------
|
||||
|
||||
// Default button
|
||||
.btn-default {
|
||||
|
||||
// Hover/focus states
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
.box-shadow(0 0 0 100px fade(#000, 1%) inset); // Use box shadow instead of color for all buttons - contextual and custom
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active,
|
||||
&.active {
|
||||
.box-shadow(0 0 0 100px fade(#000, 3%) inset); // The same as above - no color changes, only box shadow
|
||||
}
|
||||
}
|
||||
|
||||
// Labeled button
|
||||
.btn-labeled {
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal;
|
||||
|
||||
// Default button
|
||||
&.btn-default {
|
||||
> b {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
> b {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background-color: fade(#000, 15%);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: ((@line-height-computed - @icon-font-size + @padding-base-vertical - 1));
|
||||
.border-left-radius(@border-radius-base);
|
||||
|
||||
// Center icon vertically
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right icon
|
||||
&.btn-labeled-right {
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: (((@line-height-computed - @icon-font-size + @padding-base-vertical - 1) * 2) + @icon-font-size) + @padding-base-horizontal;
|
||||
|
||||
> b {
|
||||
left: auto;
|
||||
right: -1px;
|
||||
.border-left-radius(0);
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large
|
||||
&.btn-xlg {
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal;
|
||||
|
||||
> b {
|
||||
padding: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1));
|
||||
}
|
||||
|
||||
&.btn-labeled-right {
|
||||
padding-left: @padding-xlarge-horizontal;
|
||||
padding-right: (((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) * 2) + @icon-font-size) + @padding-xlarge-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
&.btn-lg {
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal;
|
||||
|
||||
> b {
|
||||
padding: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1));
|
||||
}
|
||||
|
||||
&.btn-labeled-right {
|
||||
padding-left: @padding-large-horizontal;
|
||||
padding-right: (((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) * 2) + @icon-font-size) + @padding-large-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
&.btn-sm {
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal;
|
||||
|
||||
> b {
|
||||
padding: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1));
|
||||
}
|
||||
|
||||
&.btn-labeled-right {
|
||||
padding-left: @padding-small-horizontal;
|
||||
padding-right: (((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) * 2) + @icon-font-size) + @padding-small-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.btn-xs {
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal;
|
||||
|
||||
> b {
|
||||
padding: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1));
|
||||
}
|
||||
|
||||
&.btn-labeled-right {
|
||||
padding-left: @padding-xs-horizontal;
|
||||
padding-left: (((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) * 2) + @icon-font-size) + @padding-xs-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flat button
|
||||
.btn-flat {
|
||||
border-width: 2px;
|
||||
background-color: transparent;
|
||||
|
||||
// Hover/focus states
|
||||
&:hover,
|
||||
&:focus {
|
||||
.opacity(0.8);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
.opacity(0.95);
|
||||
}
|
||||
|
||||
// Remove shadow in open dropdown button
|
||||
.btn-group.open .dropdown-toggle& {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon button
|
||||
.btn-icon {
|
||||
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);
|
||||
|
||||
// Checkbox and radio button
|
||||
.checker,
|
||||
.choice {
|
||||
margin-top: ((@icon-font-size - @checkbox-size) / 2);
|
||||
}
|
||||
|
||||
// Double sized icon
|
||||
&.icon-2x {
|
||||
padding-left: @padding-base-vertical;
|
||||
padding-right: @padding-base-vertical;
|
||||
|
||||
> i {
|
||||
font-size: (@icon-font-size * 2);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Sizing
|
||||
&.btn-xlg {
|
||||
padding-left: @padding-xlarge-vertical;
|
||||
padding-right: @padding-xlarge-vertical;
|
||||
}
|
||||
&.btn-lg {
|
||||
padding-left: @padding-large-vertical;
|
||||
padding-right: @padding-large-vertical;
|
||||
}
|
||||
&.btn-sm {
|
||||
padding-left: @padding-small-vertical;
|
||||
padding-right: @padding-small-vertical;
|
||||
}
|
||||
&.btn-xs {
|
||||
padding-left: @padding-xs-vertical;
|
||||
padding-right: @padding-xs-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
&.btn-xlg,
|
||||
.input-group-xlg > .input-group-btn > & {
|
||||
padding-left: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1);
|
||||
padding-right: ((@line-height-computed - @icon-font-size + @padding-xlarge-vertical - 1) - 1);
|
||||
}
|
||||
&.btn-lg,
|
||||
.input-group-lg > .input-group-btn > & {
|
||||
padding-left: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1);
|
||||
padding-right: ((@line-height-computed - @icon-font-size + @padding-large-vertical - 1) - 1);
|
||||
}
|
||||
&.btn-sm,
|
||||
.input-group-sm > .input-group-btn > & {
|
||||
padding-left: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1);
|
||||
padding-right: ((@line-height-computed - @icon-font-size + @padding-small-vertical - 1) - 1);
|
||||
}
|
||||
&.btn-xs,
|
||||
.input-group-xs > .input-group-btn > .btn& {
|
||||
padding-left: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1);
|
||||
padding-right: ((@line-height-computed - @icon-font-size + @padding-xs-vertical - 1) - 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Float button
|
||||
.btn-float {
|
||||
padding: @btn-float-padding;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Transparent button
|
||||
&.btn-link {
|
||||
padding: (@btn-float-padding - 5);
|
||||
}
|
||||
|
||||
// Icon
|
||||
i {
|
||||
display: block;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Text
|
||||
> span {
|
||||
display: block;
|
||||
padding-top: (@line-height-computed / 2);
|
||||
margin-bottom: -((@line-height-computed / 2) - 4);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Double icon size in large button
|
||||
&.btn-float-lg i {
|
||||
font-size: (@icon-font-size * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Group of block buttons
|
||||
.btn-block-group {
|
||||
|
||||
// Base
|
||||
.btn {
|
||||
border-radius: 0;
|
||||
border-width: 1px 0 0 1px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Change light button border color to match panel border
|
||||
.btn-default {
|
||||
border-color: @panel-default-border;
|
||||
}
|
||||
|
||||
// Remove vertical spacing between block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Columns
|
||||
div[class*=col-] {
|
||||
|
||||
// First column
|
||||
&:first-child {
|
||||
.btn {
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Last column
|
||||
&:last-child {
|
||||
.btn {
|
||||
border-right-width: 1px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 0 @border-radius-base 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Link button
|
||||
.btn-link {
|
||||
color: @text-color;
|
||||
|
||||
// Remove shadows
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded button
|
||||
.btn-rounded {
|
||||
&,
|
||||
&.btn-labeled > b,
|
||||
img {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Block button
|
||||
.btn-block + .btn-block {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
|
||||
// Contextual classes.
|
||||
// Override all styles
|
||||
// to avoid BS mixin changes
|
||||
// -------------------------
|
||||
|
||||
// Default appears as lighter grey
|
||||
.btn-default {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-default-bg;
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-default-bg;
|
||||
border-color: @btn-default-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-default-bg;
|
||||
border-color: @btn-default-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Primary appears as blue
|
||||
.btn-primary {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-primary-bg;
|
||||
border-color: @btn-primary-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-primary-bg;
|
||||
border-color: @btn-primary-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-primary-bg;
|
||||
border-color: @btn-primary-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Success appears as green
|
||||
.btn-success {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-success-bg;
|
||||
border-color: @btn-success-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-success-bg;
|
||||
border-color: @btn-success-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-success-bg;
|
||||
border-color: @btn-success-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Info appears as light blue
|
||||
.btn-info {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-info-bg;
|
||||
border-color: @btn-info-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-info-bg;
|
||||
border-color: @btn-info-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-info-bg;
|
||||
border-color: @btn-info-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Warning appears as orange
|
||||
.btn-warning {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-warning-bg;
|
||||
border-color: @btn-warning-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-warning-bg;
|
||||
border-color: @btn-warning-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-warning-bg;
|
||||
border-color: @btn-warning-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger and error appear as red
|
||||
.btn-danger {
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:hover {
|
||||
background-color: @btn-danger-bg;
|
||||
border-color: @btn-danger-border;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
background-color: @btn-danger-bg;
|
||||
border-color: @btn-danger-border;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: @btn-danger-bg;
|
||||
border-color: @btn-danger-border;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button size overrides
|
||||
// -------------------------
|
||||
|
||||
// XLarge button
|
||||
.btn-xlg {
|
||||
.button-size(@padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-large; @line-height-large; @border-radius-base);
|
||||
|
||||
&.btn-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Large button
|
||||
.btn-lg {
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&.btn-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Border radius override
|
||||
.btn-sm:not(.btn-rounded),
|
||||
.btn-group-sm > .btn:not(.btn-rounded),
|
||||
.btn-xs:not(.btn-rounded),
|
||||
.btn-group-xs > .btn:not(.btn-rounded) {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Close button component
|
||||
*
|
||||
* Overrides for close button bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base styles
|
||||
.close {
|
||||
text-shadow: none;
|
||||
.opacity(.6);
|
||||
|
||||
// Hover/focus states
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Code related components
|
||||
*
|
||||
* Overrides for code related bootstrap components
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Nov 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
border-radius: @border-radius-small;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
font-size: @font-size-mini;
|
||||
vertical-align: text-top;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
padding: @panel-body-padding;
|
||||
margin: 0;
|
||||
|
||||
// Change tab size
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
// Remove hyphenation
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
@@ -0,0 +1,576 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Dropdown menu component
|
||||
*
|
||||
* Overrides for dropdown menu bootstrap component
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
// Dropdown arrow/caret, full override
|
||||
.caret {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
margin-top: -1px;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c5';
|
||||
font-family: 'icomoon';
|
||||
display: block;
|
||||
font-size: @icon-font-size;
|
||||
width: @icon-font-size;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// The dropdown menu (ul)
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
padding: @list-spacing 0;
|
||||
color: @text-color;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
margin: @list-spacing 0;
|
||||
}
|
||||
|
||||
// Menu item
|
||||
> li {
|
||||
position: relative;
|
||||
margin-bottom: 1px;
|
||||
|
||||
// Last item
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Links within the dropdown menu
|
||||
> li > a {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Elements
|
||||
> li > a,
|
||||
> .dropdown-header {
|
||||
|
||||
// Icons and images
|
||||
> i,
|
||||
> img {
|
||||
margin-right: @padding-base-horizontal;
|
||||
float: left;
|
||||
margin-top: ((@line-height-computed - @icon-font-size) / 2);
|
||||
top: 0;
|
||||
|
||||
// Right aligned icons
|
||||
&.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Labels and badges
|
||||
> .label,
|
||||
> .badge {
|
||||
float: left;
|
||||
margin-right: @padding-base-horizontal;
|
||||
|
||||
&.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
// Image thumbs
|
||||
> img {
|
||||
max-height: @icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
// -------------------------
|
||||
|
||||
// Hover/Focus state for labels
|
||||
.dropdown-menu {
|
||||
|
||||
// Hover/focus states
|
||||
> li > label {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: @dropdown-link-hover-color;
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
> .active > label {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @dropdown-link-active-color;
|
||||
outline: 0;
|
||||
background-color: @dropdown-link-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state for labels
|
||||
.dropdown-menu > .disabled {
|
||||
> label {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: @dropdown-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Checkboxes and radios
|
||||
.dropdown-menu {
|
||||
> li {
|
||||
|
||||
// Label instead of link
|
||||
> label {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
padding-left: (@content-padding-base + @content-padding-small + @checkbox-size);
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
// Positioning
|
||||
.checker,
|
||||
.choice,
|
||||
> input[type=checkbox],
|
||||
> input[type=radio] {
|
||||
left: @content-padding-base;
|
||||
top: auto;
|
||||
margin-top: ((@line-height-computed - @checkbox-size) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove top margin
|
||||
&.checkbox,
|
||||
&.radio {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Right checkbox position
|
||||
&.checkbox-right > label {
|
||||
padding-left: @content-padding-base;
|
||||
padding-right: (@content-padding-base + @content-padding-small + @checkbox-size);
|
||||
|
||||
.checker,
|
||||
> input[type=checkbox] {
|
||||
left: auto;
|
||||
right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Right radio position
|
||||
&.radio-right > label {
|
||||
&:extend(.dropdown-menu > li.checkbox-right > label);
|
||||
|
||||
.choice,
|
||||
> input[type=radio] {
|
||||
left: auto;
|
||||
right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Switchery toggles
|
||||
.dropdown-menu {
|
||||
> .checkbox-switchery {
|
||||
|
||||
// Set left spacing
|
||||
> label > .switchery {
|
||||
left: @content-padding-base;
|
||||
}
|
||||
|
||||
// Set right spacing
|
||||
&.checkbox-right[class*=switchery-] {
|
||||
> label {
|
||||
padding-left: @content-padding-base;
|
||||
|
||||
> .switchery {
|
||||
left: auto;
|
||||
right: @content-padding-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small size
|
||||
&.switchery-sm {
|
||||
margin-bottom: 0;
|
||||
|
||||
> label {
|
||||
padding-left: (((@switchery-small-size + 1) * 2) + (@content-padding-base * 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Mini size
|
||||
&.switchery-xs {
|
||||
margin-bottom: 0;
|
||||
|
||||
> label {
|
||||
padding-left: (((@switchery-mini-size + 1) * 2) + (@content-padding-base * 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Right position
|
||||
&.checkbox-right {
|
||||
|
||||
// Small
|
||||
&.switchery-sm {
|
||||
> label {
|
||||
padding-right: (((@switchery-small-size + 1) * 2) + (@content-padding-base * 2));
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.switchery-xs {
|
||||
> label {
|
||||
padding-right: (((@switchery-mini-size + 1) * 2) + (@content-padding-base * 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Disabled state
|
||||
// -------------------------
|
||||
|
||||
.dropdown-menu > .disabled {
|
||||
.badge,
|
||||
.label,
|
||||
img {
|
||||
.opacity(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Solid color dropdown menu
|
||||
// -------------------------
|
||||
|
||||
.dropdown-menu[class*=bg-] {
|
||||
|
||||
// Links and labels
|
||||
> li {
|
||||
> a,
|
||||
> label {
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
|
||||
// Make badge/label white
|
||||
> .label,
|
||||
> .badge {
|
||||
color: @text-color;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
> .active > a,
|
||||
> .active > label {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#000, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
> .disabled > a,
|
||||
> .disabled > label {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: fade(#fff, 60%);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown header
|
||||
> .dropdown-header {
|
||||
color: fade(#fff, 60%);
|
||||
|
||||
&.highlight {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Divider
|
||||
.divider {
|
||||
background-color: fade(#fff, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.dropdown-menu-lg {
|
||||
> li > a {
|
||||
padding-top: @padding-large-vertical;
|
||||
padding-bottom: @padding-large-vertical;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.dropdown-menu-sm {
|
||||
> li > a {
|
||||
padding-top: @padding-small-vertical;
|
||||
padding-bottom: @padding-small-vertical;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.dropdown-menu-xs {
|
||||
> li > a {
|
||||
padding-top: @padding-xs-vertical;
|
||||
padding-bottom: @padding-xs-vertical;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown submenu
|
||||
// -------------------------
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
// Basic functionality
|
||||
> .dropdown-submenu {
|
||||
|
||||
// Link
|
||||
> a {
|
||||
padding-right: ((@content-padding-base * 2) + (@icon-font-size / 2));
|
||||
position: relative;
|
||||
|
||||
// Arrow icon
|
||||
&:after {
|
||||
content: '\e9c7';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
right: @content-padding-base;
|
||||
font-size: @icon-font-size;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.opacity(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover/focus states
|
||||
&:hover,
|
||||
&:focus {
|
||||
> a {
|
||||
background-color: @dropdown-link-hover-bg;
|
||||
|
||||
&:after {
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active submenu item
|
||||
&.active > a {
|
||||
background-color: @dropdown-link-active-bg;
|
||||
color: @dropdown-link-active-color;
|
||||
}
|
||||
|
||||
// Display submenu on hover
|
||||
&:hover > .dropdown-menu {
|
||||
@media(min-width: @grid-float-breakpoint) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide submenu if parent is disabled
|
||||
&.disabled {
|
||||
> .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Submenu position
|
||||
> .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -(@list-spacing + 1); // List spacing + 1px border
|
||||
|
||||
// Reverse in dropdown and bottom navbars
|
||||
.dropup &,
|
||||
.navbar-fixed-bottom .dropdown & {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -(@list-spacing + 1); // List spacing + 1px border
|
||||
}
|
||||
}
|
||||
|
||||
// Left submenu position
|
||||
&.dropdown-submenu-left > .dropdown-menu {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
// Submenu dropup
|
||||
.dropup &,
|
||||
.dropup& {
|
||||
> .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -(@list-spacing + 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Make submenu levels stacked on mobile
|
||||
@media (max-width: @screen-xs-max) {
|
||||
position: static;
|
||||
|
||||
// Change arrow icon direction
|
||||
> a:after {
|
||||
content: '\e9c5';
|
||||
}
|
||||
|
||||
// Make them stacked
|
||||
&,
|
||||
&.dropdown-submenu-left {
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
float: none;
|
||||
border-width: 0;
|
||||
border-color: fade(#000, 10%);
|
||||
box-shadow: none;
|
||||
min-width: 100%;
|
||||
margin: 0;
|
||||
|
||||
// Second level
|
||||
> li {
|
||||
> a {
|
||||
padding-left: (@content-padding-base * 2);
|
||||
}
|
||||
|
||||
// Third level
|
||||
> ul > li {
|
||||
> a {
|
||||
padding-left: (@content-padding-base * 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background color for submenu link states
|
||||
&[class*=bg-] > .dropdown-submenu {
|
||||
&:hover > a,
|
||||
&:focus > a {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
|
||||
// Remove bg color in disabled links
|
||||
&.disabled {
|
||||
&:hover > a,
|
||||
&:focus > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dropdown header
|
||||
// -------------------------
|
||||
|
||||
.dropdown-header {
|
||||
padding: (@padding-base-vertical + 1) @content-padding-base;
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
color: @text-muted;
|
||||
text-transform: uppercase;
|
||||
margin-top: @list-spacing;
|
||||
|
||||
// Highlighted header
|
||||
&.highlight {
|
||||
margin-top: 0;
|
||||
background-color: @dropdown-annotation-bg;
|
||||
color: @gray-light;
|
||||
|
||||
// Add top spacing
|
||||
li + &,
|
||||
& + li {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
|
||||
// ... but remove from the first one
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// General dropup
|
||||
// -------------------------
|
||||
|
||||
.dropup,
|
||||
.navbar-fixed-bottom .dropdown {
|
||||
|
||||
// Reverse the caret
|
||||
.caret {
|
||||
border: 0;
|
||||
|
||||
// Icon
|
||||
&:after {
|
||||
content: '\e9c6';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,658 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Form related components
|
||||
*
|
||||
* Overrides for bootstrap form related components
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* Form controls
|
||||
----------------------------------*/
|
||||
|
||||
// Normalize non-controls
|
||||
// -------------------------
|
||||
|
||||
// Legend
|
||||
legend {
|
||||
font-size: @font-size-small;
|
||||
padding-top: (@line-height-computed / 2);
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
text-transform: uppercase;
|
||||
|
||||
// Remove top padding in first items
|
||||
fieldset:first-child & {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Control arrow
|
||||
.control-arrow {
|
||||
float: right;
|
||||
color: @text-muted;
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
label {
|
||||
margin-bottom: @padding-base-vertical;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// Normalize form controls
|
||||
// -------------------------
|
||||
|
||||
// Multiple select
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: 200px;
|
||||
padding: @padding-base-vertical;
|
||||
|
||||
// Option
|
||||
option {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
border-radius: @input-border-radius;
|
||||
|
||||
+ option {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Focus for file, radio, and checkbox
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// Common form controls
|
||||
// -------------------------
|
||||
|
||||
.form-control {
|
||||
.box-shadow(none);
|
||||
|
||||
// Remove outline and shadow on focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
&[class*=bg-]:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
// Placeholder in colored input
|
||||
&[class*=bg-] {
|
||||
.placeholder(@input-placeholder-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form controls options
|
||||
// -------------------------
|
||||
|
||||
// Rounded input
|
||||
.input-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
// Roundless input
|
||||
.input-roundless {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Transparent input
|
||||
.form-control-unstyled {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Remove inputs shadow in mobile browsers
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="url"],
|
||||
input[type="tel"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Form components
|
||||
----------------------------------*/
|
||||
|
||||
// Form groups
|
||||
// -------------------------
|
||||
|
||||
.form-group {
|
||||
margin-bottom: @form-group-margin-bottom;
|
||||
position: relative;
|
||||
|
||||
// Form group nesting
|
||||
.form-group {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical spacing for stacked columns
|
||||
//
|
||||
// When nested form groups stack, add top margin for each column, except first.
|
||||
@media (max-width: @screen-sm-max) {
|
||||
div[class*="col-md-"]:not(.control-label) + div[class*="col-md-"] {
|
||||
margin-top: @form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-md-max) {
|
||||
div[class*="col-lg-"]:not(.control-label) + div[class*="col-lg-"] {
|
||||
margin-top: @form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-xs-max) {
|
||||
div[class*="col-sm-"]:not(.control-label) + div[class*="col-sm-"] {
|
||||
margin-top: @form-group-margin-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Floating labels
|
||||
// -------------------------
|
||||
|
||||
.form-group-material {
|
||||
|
||||
// Labels
|
||||
> .control-label {
|
||||
position: relative;
|
||||
top: @padding-base-vertical;
|
||||
.opacity(0);
|
||||
|
||||
// Top spacing for contextual icon
|
||||
~ .form-control-feedback {
|
||||
top: (@line-height-computed + @padding-base-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
// Display label
|
||||
> .control-label.is-visible {
|
||||
top: 0;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Label animation
|
||||
> .control-label.animate {
|
||||
.transition(all linear 0.1s);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
// -------------------------
|
||||
|
||||
// Containers
|
||||
.radio,
|
||||
.checkbox {
|
||||
|
||||
// Make them vertically centered depending on the base input height
|
||||
margin-top: ((@input-height-base - @line-height-computed) / 2);
|
||||
margin-bottom: ((@input-height-base - @line-height-computed) / 2);
|
||||
|
||||
// Inner label element
|
||||
label {
|
||||
padding-left: (@checkbox-size + @content-padding-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox and radio inputs
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
margin-left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Siblings
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
position: relative;
|
||||
padding-left: (@checkbox-size + @content-padding-small);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Right position
|
||||
//
|
||||
|
||||
// Radio
|
||||
.radio-right {
|
||||
&.radio-inline,
|
||||
label {
|
||||
padding-left: 0;
|
||||
padding-right: (@checkbox-size + @content-padding-small);
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
.checkbox-right:extend(.radio-right all) {
|
||||
&.checkbox-inline,
|
||||
label {
|
||||
&:extend(.radio-right.radio-inline);
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
&:extend(.radio-right input[type="radio"]);
|
||||
}
|
||||
}
|
||||
|
||||
// Inline siblings
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-left: @content-padding-base;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.radio,
|
||||
.checkbox {
|
||||
&,
|
||||
&-inline {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
color: @gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Form control sizing
|
||||
----------------------------------*/
|
||||
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
// XLarge
|
||||
.input-xlg {
|
||||
.input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large);
|
||||
}
|
||||
.form-group-xlg {
|
||||
.form-control {
|
||||
.input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large);
|
||||
}
|
||||
.form-control-static {
|
||||
height: @input-height-xlarge;
|
||||
min-height: (@line-height-computed + @font-size-xlarge);
|
||||
padding: @padding-xlarge-vertical @padding-xlarge-horizontal;
|
||||
font-size: @font-size-xlarge;
|
||||
line-height: @line-height-xlarge;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.input-xs {
|
||||
.input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
|
||||
}
|
||||
.form-group-xs {
|
||||
.form-control {
|
||||
.input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
|
||||
}
|
||||
.form-control-static {
|
||||
height: @input-height-mini;
|
||||
min-height: (@line-height-computed + @font-size-small);
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Form helpers
|
||||
----------------------------------*/
|
||||
|
||||
// Form control feedback states
|
||||
// -------------------------
|
||||
|
||||
// Default right icon position
|
||||
.has-feedback {
|
||||
|
||||
// Ensure icons don't overlap text
|
||||
.form-control {
|
||||
padding-right: @input-height-base;
|
||||
|
||||
&.input-xlg {
|
||||
padding-right: @input-height-xlarge;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
padding-right: @input-height-large;
|
||||
}
|
||||
|
||||
&.input-sm {
|
||||
padding-right: @input-height-small;
|
||||
}
|
||||
|
||||
&.input-xs {
|
||||
padding-right: @input-height-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback icon
|
||||
.form-control-feedback {
|
||||
width: @input-height-base + 2;
|
||||
color: @input-color;
|
||||
z-index: 3;
|
||||
|
||||
// Change color if comes after colored input
|
||||
input[class*=bg-] + & {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Left icon position
|
||||
.has-feedback-left {
|
||||
.form-control {
|
||||
padding-right: @padding-base-horizontal;
|
||||
padding-left: @input-height-base;
|
||||
|
||||
&.input-xlg {
|
||||
padding-right: @padding-xlarge-vertical;
|
||||
padding-left: @input-height-xlarge;
|
||||
}
|
||||
|
||||
&.input-lg {
|
||||
padding-right: @padding-large-horizontal;
|
||||
padding-left: @input-height-large;
|
||||
}
|
||||
|
||||
&.input-sm {
|
||||
padding-right: @padding-small-horizontal;
|
||||
padding-left: @input-height-small;
|
||||
}
|
||||
|
||||
&.input-xs {
|
||||
padding-right: @padding-xs-horizontal;
|
||||
padding-left: @input-height-mini;
|
||||
}
|
||||
}
|
||||
.form-control-feedback {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
// XLarge
|
||||
.input-xlg + .form-control-feedback,
|
||||
.form-group-xlg > .form-control-feedback {
|
||||
width: @input-height-xlarge + 2;
|
||||
height: @input-height-xlarge;
|
||||
line-height: @input-height-xlarge;
|
||||
}
|
||||
|
||||
// Large
|
||||
.input-lg + .form-control-feedback,
|
||||
.form-group-lg > .form-control-feedback {
|
||||
width: @input-height-large + 2;
|
||||
}
|
||||
|
||||
// Small
|
||||
.input-sm + .form-control-feedback,
|
||||
.form-group-sm > .form-control-feedback {
|
||||
width: @input-height-small + 2;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.input-xs + .form-control-feedback,
|
||||
.form-group-xs > .form-control-feedback {
|
||||
width: @input-height-mini + 2;
|
||||
height: @input-height-mini;
|
||||
line-height: @input-height-mini;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Feedback states
|
||||
//
|
||||
|
||||
.has-success,
|
||||
.has-warning,
|
||||
.has-error {
|
||||
.form-control:focus {
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Help text
|
||||
// -------------------------
|
||||
|
||||
// Block helpers
|
||||
.help-block {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
margin-top: @padding-base-vertical;
|
||||
margin-bottom: @padding-base-vertical;
|
||||
}
|
||||
|
||||
// Inline helpers
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
margin-top: (@padding-base-vertical + 1);
|
||||
margin-bottom: (@padding-base-vertical + 1);
|
||||
|
||||
// Remove gutter if inside column
|
||||
.form-horizontal .form-group > div[class*="col-"] + & {
|
||||
margin-left: (@grid-gutter-width / 2);
|
||||
margin-right: (@grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
// Inline help works only on large screens
|
||||
@media (min-width: @screen-md) {
|
||||
display: inline-block;
|
||||
margin-top: (@padding-base-vertical + 1);
|
||||
margin-bottom: (@padding-base-vertical + 1);
|
||||
vertical-align: top;
|
||||
|
||||
// Inline text helper
|
||||
&:not(.label) {
|
||||
color: @text-muted
|
||||
}
|
||||
|
||||
// In large group
|
||||
.form-group-lg & {
|
||||
margin-top: (@padding-large-vertical + 1);
|
||||
}
|
||||
|
||||
// In small group
|
||||
.form-group-sm & {
|
||||
margin-top: (@padding-small-vertical + 1);
|
||||
}
|
||||
|
||||
// In mini group
|
||||
.form-group-xs & {
|
||||
margin-top: (@padding-xs-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Form layouts
|
||||
----------------------------------*/
|
||||
|
||||
// Inline forms
|
||||
// -------------------------
|
||||
|
||||
.form-inline {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
& + .form-group {
|
||||
margin-left: @content-padding-base;
|
||||
}
|
||||
|
||||
// Label setup
|
||||
> label {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Horizontal forms
|
||||
// -------------------------
|
||||
|
||||
.form-horizontal {
|
||||
|
||||
// Make form groups behave like rows
|
||||
.form-group {
|
||||
|
||||
// Nesting
|
||||
.form-group {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Control label
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
padding-bottom: @padding-base-vertical;
|
||||
padding-top: 0;
|
||||
|
||||
&:not(.text-right) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom padding for stacked control labels
|
||||
.control-label {
|
||||
@media (min-width: @screen-xs) {
|
||||
&[class*=col-xs-] {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md) {
|
||||
&[class*=col-md-] {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
&[class*=col-sm-] {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg) {
|
||||
&[class*=col-lg-] {
|
||||
padding-top: (@padding-base-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation state icons
|
||||
.has-feedback {
|
||||
> .form-control-feedback {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.has-feedback-left {
|
||||
.form-control-feedback {
|
||||
right: auto;
|
||||
left: (@grid-gutter-width / 2);
|
||||
}
|
||||
|
||||
> .form-control-feedback {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form group sizes
|
||||
//
|
||||
|
||||
// XLarge
|
||||
.form-group-xlg {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
font-size: @font-size-xlarge;
|
||||
padding-top: (@padding-xlarge-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.form-group-lg {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: (@padding-large-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.form-group-sm {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: (@padding-small-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.form-group-xs {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.control-label {
|
||||
font-size: @font-size-small;
|
||||
padding-top: (@padding-xs-vertical + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Glyphicons for Bootstrap
|
||||
*
|
||||
* Glyphicons icon font path and style overrides
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Change paths
|
||||
@font-face {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
src: url('@{icon-font-path}@{icon-font-name}.eot');
|
||||
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
|
||||
url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
|
||||
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
|
||||
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
|
||||
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
|
||||
}
|
||||
|
||||
// Set fixed icon size
|
||||
.glyphicon {
|
||||
font-size: @icon-font-size;
|
||||
vertical-align: middle;
|
||||
top: -1px;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Input groups component
|
||||
*
|
||||
* Overrides for input groups bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
.input-group {
|
||||
|
||||
// Make icon to be always on top
|
||||
.form-control-feedback {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
// -------------------------
|
||||
|
||||
// XLarge size
|
||||
.input-group-xlg > .form-control,
|
||||
.input-group-xlg > .input-group-addon,
|
||||
.input-group-xlg > .input-group-btn > .btn {
|
||||
height: @input-height-xlarge;
|
||||
padding: @padding-xlarge-vertical @padding-xlarge-horizontal;
|
||||
font-size: @font-size-xlarge;
|
||||
line-height: @line-height-xlarge;
|
||||
}
|
||||
|
||||
// Mini size
|
||||
.input-group-xs > .form-control,
|
||||
.input-group-xs > .input-group-addon,
|
||||
.input-group-xs > .input-group-btn > .btn {
|
||||
height: @input-height-mini;
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
|
||||
|
||||
// Transparent input group
|
||||
// -------------------------
|
||||
|
||||
.input-group-transparent {
|
||||
.input-group-addon {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text input groups
|
||||
// -------------------------
|
||||
.input-group-addon {
|
||||
|
||||
// Icon
|
||||
> i {
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Checkbox, radio
|
||||
.checker,
|
||||
.choice {
|
||||
display: block;
|
||||
margin-top: ((@line-height-computed - @checkbox-size) / 2);
|
||||
}
|
||||
|
||||
// Sizing
|
||||
&.input-xlg {
|
||||
padding: (@padding-large-vertical + 2) @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
&.input-xs {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-base;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
&.input-sm {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
&.input-lg {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Labels component
|
||||
*
|
||||
* Overrides for labels bootstrap component
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
padding: 2px 5px 1px 5px;
|
||||
line-height: @line-height-base;
|
||||
border: 1px solid transparent;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1px;
|
||||
border-radius: @border-radius-small;
|
||||
|
||||
// Quick fix for labels in buttons
|
||||
.btn & {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Account for labels in navs
|
||||
.list-group-item.active > &,
|
||||
.nav-pills > .active > a > &,
|
||||
.nav-tabs-solid > .active > a > &,
|
||||
.nav-tabs[class*=bg-] > li > a > & {
|
||||
color: @badge-active-color;
|
||||
background-color: @badge-active-bg;
|
||||
border-color: @badge-active-bg;
|
||||
}
|
||||
|
||||
// Stick labels to the right in list group
|
||||
.list-group-item > & {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
float: right;
|
||||
|
||||
+ .label {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Common styles for labels and badges
|
||||
// -------------------------
|
||||
|
||||
.label,
|
||||
.badge {
|
||||
|
||||
// Make caret centered vertically
|
||||
> .caret {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
// Remove shadow from dropdown toggle
|
||||
.open &.dropdown-toggle {
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Add hover state effect
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.opacity(0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Label colors
|
||||
// -------------------------
|
||||
|
||||
// Default
|
||||
.label-default {
|
||||
border-color: @label-default-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-default-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Primary
|
||||
.label-primary {
|
||||
border-color: @label-primary-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-primary-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.label-success {
|
||||
border-color: @label-success-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-success-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.label-info {
|
||||
border-color: @label-info-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-info-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.label-warning {
|
||||
border-color: @label-warning-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-warning-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.label-danger {
|
||||
border-color: @label-danger-bg;
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @label-danger-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Striped labels
|
||||
// -------------------------
|
||||
|
||||
// Left border is default
|
||||
.label-striped {
|
||||
background-color: #f5f5f5;
|
||||
color: @text-color;
|
||||
border-left-width: 2px;
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
|
||||
// Reverse side border width
|
||||
&.label-striped-right {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 2px;
|
||||
}
|
||||
|
||||
// Remove rounded corners
|
||||
&,
|
||||
&.label-icon {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Hover effect for links
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
background-color: @gray-lighter;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flat labels
|
||||
// -------------------------
|
||||
|
||||
.label-flat {
|
||||
background-color: transparent;
|
||||
border-width: 2px;
|
||||
border-radius: 0;
|
||||
padding: 1px 4px 0 4px;
|
||||
|
||||
// Remove background color and shadow on hover
|
||||
&[href] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Labels with icon only
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.label-icon {
|
||||
padding: @padding-base-vertical;
|
||||
border-radius: @btn-border-radius-small;
|
||||
line-height: 1;
|
||||
|
||||
// Remove top edge from icon
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.label-flat {
|
||||
padding: @padding-base-vertical - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// XLarge
|
||||
.label-icon-xlg {
|
||||
padding: @padding-xlarge-vertical;
|
||||
|
||||
&.label-flat {
|
||||
padding: @padding-xlarge-vertical - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.label-icon-lg {
|
||||
padding: @padding-large-vertical;
|
||||
|
||||
&.label-flat {
|
||||
padding: @padding-large-vertical - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.label-icon-sm {
|
||||
padding: @padding-small-vertical;
|
||||
|
||||
&.label-flat {
|
||||
padding: @padding-small-vertical - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.label-icon-xs {
|
||||
padding: @padding-xs-vertical;
|
||||
|
||||
&.label-flat {
|
||||
padding: @padding-xs-vertical - 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Label options
|
||||
// -------------------------
|
||||
|
||||
// Rounded
|
||||
.label-rounded {
|
||||
border-radius: 100px;
|
||||
|
||||
// Add extra horizontal space to rounded labels, but not for icons
|
||||
&:not(.label-icon) {
|
||||
padding-left: @padding-base-vertical;
|
||||
padding-right: @padding-base-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
// Roundless
|
||||
.label-roundless {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Block level label
|
||||
.label-block {
|
||||
display: block;
|
||||
|
||||
.form-control + & {
|
||||
margin-top: @padding-base-vertical;
|
||||
}
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # List groups component
|
||||
*
|
||||
* Overrides for list groups bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styling
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.list-group {
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
border: 1px solid @list-group-border;
|
||||
padding: @list-spacing 0;
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
// -------------------------
|
||||
|
||||
.list-group-item {
|
||||
background-color: transparent;
|
||||
padding: @content-padding-small @content-padding-large;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.list-group-item {
|
||||
&.disabled,
|
||||
&.disabled:hover,
|
||||
&.disabled:focus {
|
||||
|
||||
// Lower opacity
|
||||
.label,
|
||||
.badge {
|
||||
.opacity(0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List group divider
|
||||
.list-group-divider {
|
||||
height: 1px;
|
||||
display: block;
|
||||
background-color: lighten(@list-group-border, 3%);
|
||||
margin-top: @list-spacing;
|
||||
margin-bottom: @list-spacing;
|
||||
}
|
||||
|
||||
// List group header
|
||||
.list-group-header {
|
||||
padding: @padding-base-vertical @content-padding-large;
|
||||
font-size: @font-size-mini;
|
||||
line-height: @line-height-mini;
|
||||
color: @text-muted;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:first-child {
|
||||
margin-top: @list-spacing;
|
||||
}
|
||||
|
||||
.list-group-item + &,
|
||||
.list-group-divider + & {
|
||||
margin-top: (@list-spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Icons, labels and badges
|
||||
.list-group-item,
|
||||
.list-group-header {
|
||||
> i {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
|
||||
&.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: @element-horizontal-spacing;
|
||||
margin-top: (((@line-height-computed - @icon-font-size) / 2) + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom content options
|
||||
// -------------------------
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: @list-spacing;
|
||||
margin-bottom: @list-spacing;
|
||||
}
|
||||
.list-group-item-text {
|
||||
line-height: @line-height-base;
|
||||
margin-bottom: @list-spacing;
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
// -------------------------
|
||||
|
||||
// Success
|
||||
.list-group-item-variant(success; @state-success-bg; @state-success-text);
|
||||
.list-group-item-success {
|
||||
&,
|
||||
a&,
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color-success-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.list-group-item-variant(info; @state-primary-bg; @state-primary-text);
|
||||
.list-group-item-info {
|
||||
&,
|
||||
a&,
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color-primary-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
|
||||
.list-group-item-warning {
|
||||
&,
|
||||
a&,
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color-warning-800, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
|
||||
.list-group-item-danger {
|
||||
&,
|
||||
a&,
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
color: darken(@color-danger-800, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Media list component
|
||||
*
|
||||
* Overrides for media list bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styling
|
||||
// -------------------------
|
||||
|
||||
// Media base
|
||||
.media {
|
||||
margin-top: @line-height-computed;
|
||||
position: relative;
|
||||
|
||||
// Remove top spacing if inside panel
|
||||
&.panel-body {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Override hidden overflow
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Enable absolute positioning
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Reset margins on headings for tighter default spacing
|
||||
.media-heading {
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Media list variation
|
||||
.media-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Set left/right horizontal spacing
|
||||
// -------------------------
|
||||
|
||||
// Left
|
||||
.media-right,
|
||||
.media > .pull-right {
|
||||
padding-left: @content-padding-large;
|
||||
}
|
||||
|
||||
// Right
|
||||
.media-left,
|
||||
.media > .pull-left {
|
||||
padding-right: @content-padding-large;
|
||||
}
|
||||
|
||||
|
||||
// Make media element stacked on mobile
|
||||
// -------------------------
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.stack-media-on-mobile {
|
||||
|
||||
// Respect text alignment classes
|
||||
&:not(.text-left):not(.text-right) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Annotation
|
||||
.media-annotation {
|
||||
display: block;
|
||||
|
||||
&.dotted:not(.pull-right):before {
|
||||
content: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Annotation inside heading
|
||||
.media-heading .media-annotation {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
// Make all parts stacked
|
||||
.media-left,
|
||||
.media-right,
|
||||
.media-body {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Add to top spacing to elements
|
||||
.media-body,
|
||||
.media-right {
|
||||
margin-top: @content-padding-base;
|
||||
}
|
||||
|
||||
// Heading
|
||||
.media-heading {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Media elements
|
||||
// -------------------------
|
||||
|
||||
// Badge
|
||||
.media-badge {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -2px;
|
||||
|
||||
// Add 2px border for better visual separation
|
||||
&,
|
||||
&[class*=bg-] {
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
// Remove that border in navbar on mobile
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
.navbar-inverse & {
|
||||
border: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Annotation
|
||||
.media-annotation {
|
||||
color: @text-muted;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
font-weight: 400;
|
||||
|
||||
// Inside media heading
|
||||
.media-heading & {
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
|
||||
// Icon
|
||||
i {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Add bullet to the annotation
|
||||
&.dotted:not(.pull-right):before {
|
||||
content: '\2022';
|
||||
margin-right: (@element-horizontal-spacing + 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Media header
|
||||
.media-header {
|
||||
white-space: nowrap;
|
||||
margin-top: @line-height-computed;
|
||||
font-weight: 500;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layouts
|
||||
// -------------------------
|
||||
|
||||
// Bordered list
|
||||
.media-list-bordered {
|
||||
> li {
|
||||
border-top: 1px solid @gray-lighter;
|
||||
padding-top: @content-padding-base;
|
||||
margin-top: @content-padding-base;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.media-list-linked .media-header {
|
||||
margin-bottom: @content-padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Linked list
|
||||
.media-list-linked {
|
||||
|
||||
// Remove spacing
|
||||
.media {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Link itself
|
||||
.media-link {
|
||||
display: block;
|
||||
padding: @content-padding-base @content-padding-large;
|
||||
color: @text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #fafafa;
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Update header
|
||||
.media-header {
|
||||
padding-left: @content-padding-large;
|
||||
padding-right: @content-padding-large;
|
||||
margin-top: @content-padding-small;
|
||||
margin-bottom: @content-padding-small;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// First item top border
|
||||
&.media-list-bordered {
|
||||
> li:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
> .media-header {
|
||||
margin-top: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Modals component
|
||||
*
|
||||
* Overrides for modals bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic structure
|
||||
// -------------------------
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
border-radius: @border-radius-base;
|
||||
.box-shadow(0 1px 4px rgba(0,0,0,.2));
|
||||
}
|
||||
|
||||
// Modal header
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding-bottom: 0;
|
||||
|
||||
// With custom color
|
||||
&[class*=bg-] {
|
||||
padding: @panel-heading-padding;
|
||||
.border-top-radius(@border-radius-base - 1);
|
||||
|
||||
.close {
|
||||
margin-top: -((@font-size-base * 1.5) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button
|
||||
.modal-header {
|
||||
.modal-content[class*=bg-] & .close,
|
||||
&[class*=bg-] .close {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: @modal-inner-padding;
|
||||
top: 50%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Modal body
|
||||
.modal-body {
|
||||
|
||||
// Close button inside modal body
|
||||
.close {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
padding-top: 0;
|
||||
|
||||
// Fix for text alignment
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Setup for mobile
|
||||
// -------------------------
|
||||
|
||||
// Scale up the modal
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
||||
// Modal sizes
|
||||
.modal-xs {
|
||||
width: @modal-xs;
|
||||
}
|
||||
.modal-full {
|
||||
width: @modal-full;
|
||||
margin-left: (100% - @modal-full) / 2;
|
||||
margin-right: (100% - @modal-full) / 2;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,136 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pager component
|
||||
*
|
||||
* Overrides for pager bootstrap component
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Aug 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styles
|
||||
// -------------------------
|
||||
|
||||
.pager {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 0;
|
||||
|
||||
// Pager nav item
|
||||
li {
|
||||
|
||||
// Links
|
||||
> a,
|
||||
> span {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
color: @gray-dark;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Hover/focus states
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
border-color: @pager-hover-bg;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Add space between items
|
||||
li + li {
|
||||
margin-left: @content-padding-small;
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.disabled {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> span {
|
||||
border-color: @pager-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Text alignment
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.pager-lg {
|
||||
li > a,
|
||||
li > span {
|
||||
padding: @padding-large-vertical @padding-large-horizontal;
|
||||
font-size: @font-size-large;
|
||||
line-height: @line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pager-sm {
|
||||
li > a,
|
||||
li > span {
|
||||
padding: @padding-small-vertical @padding-small-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.pager-xs {
|
||||
li > a,
|
||||
li > span {
|
||||
padding: @padding-xs-vertical @padding-xs-horizontal;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional styling
|
||||
// -------------------------
|
||||
|
||||
// Rounded pager
|
||||
.pager-rounded {
|
||||
li > a,
|
||||
li > span {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Linked pager
|
||||
.pager-linked {
|
||||
li {
|
||||
> a,
|
||||
> span {
|
||||
border-color: transparent;
|
||||
color: @link-color;
|
||||
}
|
||||
|
||||
// Hover state
|
||||
> a:hover,
|
||||
> span:hover {
|
||||
background-color: @brand-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
.disabled {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> span {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Pagination (multiple pages) component
|
||||
*
|
||||
* Overrides for pagination bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Basic styles
|
||||
// -------------------------
|
||||
|
||||
.pagination {
|
||||
margin-top: 0;
|
||||
margin-bottom: -6px;
|
||||
|
||||
// Pagination nav item
|
||||
> li {
|
||||
|
||||
// Links
|
||||
> a,
|
||||
> span {
|
||||
min-width: @input-height-base;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
&.pagination-rounded {
|
||||
> li {
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(100px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Pagination styles
|
||||
// -------------------------
|
||||
|
||||
// Flat pagination
|
||||
.pagination-flat {
|
||||
> li > a,
|
||||
> li > span {
|
||||
margin-left: 1px;
|
||||
border-radius: @border-radius-base;
|
||||
min-width: @input-height-base;
|
||||
background-color: transparent;
|
||||
|
||||
// Remove border
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
> .active > a,
|
||||
> .active > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
> .disabled {
|
||||
> span,
|
||||
> span:hover,
|
||||
> span:focus,
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
&.pagination-rounded {
|
||||
> li > a,
|
||||
> li > span {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
// Set min width for pagination links
|
||||
&.pagination-lg {
|
||||
> li > a,
|
||||
> li > span {
|
||||
min-width: @input-height-large;
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
> li > a,
|
||||
> li > span {
|
||||
min-width: @input-height-small;
|
||||
}
|
||||
}
|
||||
&.pagination-xs {
|
||||
> li > a,
|
||||
> li > span {
|
||||
min-width: @input-height-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Separated pagination
|
||||
.pagination-separated {
|
||||
> li > a,
|
||||
> li > span {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.pagination-lg {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
min-width: @input-height-large;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.pagination-sm {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
min-width: @input-height-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.pagination-xs {
|
||||
.pagination-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-base);
|
||||
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
min-width: @input-height-mini;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,453 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Panels component
|
||||
*
|
||||
* Overrides for panels bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
.panel {
|
||||
margin-bottom: @line-height-computed;
|
||||
border-color: @panel-default-border;
|
||||
color: @text-color;
|
||||
|
||||
// Scrollable panel
|
||||
&.has-scroll {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
// Panel with background pattern
|
||||
&.has-bg-image {
|
||||
background-image: url(../images/backgrounds/panel_bg.png);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flat panel
|
||||
// -------------------------
|
||||
|
||||
.panel-flat {
|
||||
> .panel-heading {
|
||||
|
||||
// Add top border if table is after panel body
|
||||
+ .table,
|
||||
+ .table-responsive {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Solid color panels
|
||||
// -------------------------
|
||||
|
||||
.panel[class*=bg-] {
|
||||
|
||||
// Panel heading
|
||||
> .panel-heading {
|
||||
border-color: fade(#fff, 20%);
|
||||
|
||||
// Inherit bg color on mobile
|
||||
@media (max-width: @screen-xs-max) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Panel heading in flat panel
|
||||
&.panel-flat > .panel-heading {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
// Apply white color to panel title
|
||||
.panel-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Table border color
|
||||
.table {
|
||||
thead,
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
border-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline elements color
|
||||
.text-muted,
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: fade(#fff, 80%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom border colors
|
||||
// -------------------------
|
||||
|
||||
.panel {
|
||||
&[class*=border-top-] {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
|
||||
&[class*=border-bottom-] {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&[class*=border-left-] {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
|
||||
&[class*=border-right-] {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panel contents
|
||||
// -------------------------
|
||||
|
||||
.panel-body {
|
||||
position: relative;
|
||||
|
||||
// Inside flat panel
|
||||
.panel-flat > .panel-heading + & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Add top border if panel has multiple bodies
|
||||
// or table comes after body
|
||||
// or use .has-top-border class in .panel-body container
|
||||
+ .panel-body,
|
||||
+ .table,
|
||||
+ .table-responsive,
|
||||
&.has-top-border {
|
||||
border-top: 1px solid @panel-inner-border;
|
||||
}
|
||||
|
||||
// ... and change top border in coloured panel
|
||||
.panel[class*=bg-] & {
|
||||
+ .panel-body,
|
||||
+ .table,
|
||||
+ .table-responsive,
|
||||
&.has-top-border {
|
||||
border-top-color: fade(#fff, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Slightly darker body
|
||||
&-accent {
|
||||
background-color: #fcfcfc;
|
||||
|
||||
// Inside colored panel
|
||||
.panel[class*=bg-] & {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panel heading
|
||||
// -------------------------
|
||||
|
||||
// Base class
|
||||
.panel-heading {
|
||||
position: relative;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
// Bordered panel
|
||||
.panel-bordered > & {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// In flat panel it is higher
|
||||
.panel-flat > & {
|
||||
padding-top: @content-padding-large;
|
||||
padding-bottom: @content-padding-large;
|
||||
background-color: @panel-bg;
|
||||
|
||||
// Add extra vertical spacing for title
|
||||
> .panel-title {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inherit bg color in solid color panel
|
||||
.panel-flat[class*=bg-] > & {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
// Make it pixel perfect by emulating colored border
|
||||
&[class*=bg-],
|
||||
.panel-primary &,
|
||||
.panel-danger &,
|
||||
.panel-success &,
|
||||
.panel-warning &,
|
||||
.panel-info & {
|
||||
margin: -1px -1px 0 -1px;
|
||||
.border-top-radius(@border-radius-base);
|
||||
}
|
||||
|
||||
// Inside white panel
|
||||
.panel-white > & {
|
||||
background-color: @panel-bg;
|
||||
border-bottom-color: @panel-default-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Panel heading title
|
||||
.panel-title {
|
||||
position: relative;
|
||||
font-size: @font-size-base;
|
||||
|
||||
// Allow font size classes
|
||||
&.text-size {
|
||||
&-mini {
|
||||
font-size: @font-size-mini;
|
||||
}
|
||||
&-small {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
&-large {
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Display links as a block element
|
||||
a& {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Title image
|
||||
img {
|
||||
max-height: @line-height-computed;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Add extra spacing between title and subtitle
|
||||
> small:not(.display-block),
|
||||
> .small:not(.display-block) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Title sizing
|
||||
h1&,
|
||||
.h1& {
|
||||
font-size: @font-size-h1;
|
||||
}
|
||||
h2&,
|
||||
.h2& {
|
||||
font-size: @font-size-h2;
|
||||
}
|
||||
h3&,
|
||||
.h3& {
|
||||
font-size: @font-size-h3;
|
||||
}
|
||||
h4&,
|
||||
.h4& {
|
||||
font-size: @font-size-h4;
|
||||
}
|
||||
h5&,
|
||||
.h5& {
|
||||
font-size: @font-size-h5;
|
||||
}
|
||||
h6&,
|
||||
.h6& {
|
||||
font-size: @font-size-h6;
|
||||
}
|
||||
}
|
||||
|
||||
// Control buttons
|
||||
.icons-list {
|
||||
|
||||
// Link base
|
||||
a[data-action] {
|
||||
vertical-align: middle;
|
||||
.transition(all ease-in-out 0.2s);
|
||||
|
||||
// Icons base
|
||||
&:after {
|
||||
font-family: 'icomoon';
|
||||
font-size: @icon-font-size;
|
||||
min-width: @icon-font-size;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
|
||||
// Collapse icon
|
||||
a[data-action="collapse"]:after {
|
||||
content: '\e9c1';
|
||||
}
|
||||
|
||||
// Reload icon
|
||||
a[data-action="reload"]:after {
|
||||
content: '\e9fb';
|
||||
}
|
||||
|
||||
// Close icon
|
||||
a[data-action="close"]:after {
|
||||
content: '\e9b6';
|
||||
}
|
||||
|
||||
// Move icon
|
||||
a[data-action="move"]:after {
|
||||
content: '\e986';
|
||||
}
|
||||
|
||||
// Open modal icon
|
||||
a[data-action="modal"]:after {
|
||||
content: '\e9eb';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panel footer
|
||||
// -------------------------
|
||||
|
||||
// Base styles
|
||||
.panel-footer {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Transparent panel footer
|
||||
.panel-footer-transparent {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: @content-padding-large - ((@input-height-base - @line-height-computed) / 2);
|
||||
}
|
||||
|
||||
// Condensed panel footer
|
||||
.panel-footer-condensed {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
// Bordered panel footer
|
||||
.panel-footer-bordered {
|
||||
background-color: @panel-bg;
|
||||
padding-right: 0;
|
||||
margin-left: @content-padding-large;
|
||||
margin-right: @content-padding-large;
|
||||
}
|
||||
|
||||
|
||||
// Collapsable panels (aka, accordion)
|
||||
// -------------------------
|
||||
|
||||
// Panel group controls
|
||||
.panel-group-control {
|
||||
.panel-title > a {
|
||||
padding-left: (@icon-font-size + @content-padding-small);
|
||||
display: inline-block;
|
||||
|
||||
// Collapsible icon
|
||||
&:before {
|
||||
content: '\e9b7';
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -(@icon-font-size / 2);
|
||||
left: 0;
|
||||
font-size: @icon-font-size;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Change icon if collapsed
|
||||
&.collapsed:before {
|
||||
content: '\e9b8';
|
||||
}
|
||||
}
|
||||
|
||||
// Right controls position
|
||||
&.panel-group-control-right {
|
||||
.panel-title > a {
|
||||
padding-left: 0;
|
||||
padding-right: (@icon-font-size + @content-padding-small);
|
||||
|
||||
// Re-position the icon
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variation overrides
|
||||
// -------------------------
|
||||
|
||||
// Primary
|
||||
.panel-primary {
|
||||
border-color: @panel-default-border;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-primary-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.panel-success {
|
||||
border-color: @panel-default-border;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-success-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.panel-info {
|
||||
border-color: @panel-default-border;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-info-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.panel-warning {
|
||||
border-color: @panel-default-border;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-warning-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.panel-danger {
|
||||
border-color: @panel-default-border;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-danger-border;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Popovers component
|
||||
*
|
||||
* Overrides for popovers bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.popover {
|
||||
border-radius: @border-radius-base;
|
||||
padding: 0;
|
||||
.box-shadow(0 1px 3px fade(#000, 10%));
|
||||
}
|
||||
|
||||
// Title
|
||||
.popover-title {
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-small;
|
||||
border: 0;
|
||||
padding: @content-padding-base @content-padding-base 0 @content-padding-base;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
// Reduce size if inside colored container
|
||||
&[class*=bg-] {
|
||||
padding: @content-padding-small @content-padding-base;
|
||||
margin: -1px -1px 0 -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.popover-content {
|
||||
padding: @content-padding-base;
|
||||
}
|
||||
|
||||
|
||||
// Custom color options
|
||||
// -------------------------
|
||||
|
||||
.popover[class*=bg-],
|
||||
.popover[class*=border-] {
|
||||
|
||||
// Top arrow
|
||||
&.top > .arrow {
|
||||
&,
|
||||
&:after {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Right arrow
|
||||
&.right > .arrow {
|
||||
&,
|
||||
&:after {
|
||||
border-right-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom arrow
|
||||
&.bottom > .arrow {
|
||||
&,
|
||||
&:after {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Left arrow
|
||||
&.left > .arrow {
|
||||
&,
|
||||
&:after {
|
||||
border-left-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Progress bars component
|
||||
*
|
||||
* Overrides for progress bars bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
// Outer container
|
||||
.progress {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
height: @progress-base-height;
|
||||
.box-shadow(inset 0 1px 1px fade(#000, 10%));
|
||||
}
|
||||
|
||||
// Bar of progress
|
||||
.progress-bar {
|
||||
line-height: @progress-base-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Rounded progress bars
|
||||
.progress-rounded {
|
||||
&,
|
||||
> .progress-bar {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Enhanced bars
|
||||
// -------------------------
|
||||
|
||||
.progress {
|
||||
|
||||
// Progress bar back text
|
||||
.progressbar-back-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Progress bar front text
|
||||
.progressbar-front-text {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// Right alignment
|
||||
&.right {
|
||||
|
||||
// Adjust progress bar
|
||||
.progress-bar {
|
||||
right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
// Adjust text
|
||||
.progressbar-front-text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical orientation
|
||||
&.vertical {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
|
||||
// Add horizontal spacing
|
||||
& + & {
|
||||
margin-left: @content-padding-small;
|
||||
}
|
||||
|
||||
// Progress bar adjustment
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.transition(height 0.6s ease);
|
||||
}
|
||||
|
||||
// Bottom direction
|
||||
&.bottom {
|
||||
position: relative;
|
||||
|
||||
.progressbar-front-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional sizing
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.progress-lg {
|
||||
height: @progress-large-height;
|
||||
|
||||
.progress-bar {
|
||||
line-height: @progress-large-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.progress-sm {
|
||||
height: @progress-small-height;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.progress-xs {
|
||||
height: @progress-mini-height;
|
||||
}
|
||||
|
||||
// Tiny
|
||||
.progress-xxs {
|
||||
height: @progress-tiny-height;
|
||||
}
|
||||
|
||||
// Micro
|
||||
.progress-micro {
|
||||
height: @progress-micro-height;
|
||||
}
|
||||
|
||||
// Remove text in small bars
|
||||
.progress-sm,
|
||||
.progress-xs,
|
||||
.progress-xxs,
|
||||
.progress-micro {
|
||||
.progress-bar {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Scaffolding
|
||||
*
|
||||
* Overrides for bootstrap scaffolding
|
||||
*
|
||||
* Version: 1.3
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// HTML and BODY height reset
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
a {
|
||||
cursor: pointer;
|
||||
|
||||
// Remove outline on focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Figures
|
||||
figure {
|
||||
position: relative;
|
||||
}
|
||||
figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
z-index: 2;
|
||||
background-color: fade(#000, 70%);
|
||||
.transition(all ease-in-out 0.2s);
|
||||
|
||||
figure:hover & {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
.img-rounded {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Horizontal rules
|
||||
.hr-condensed {
|
||||
margin-top: (@line-height-computed / 2);
|
||||
margin-bottom: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
// Seamless row
|
||||
.row-seamless {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
> div[class*=col-] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,439 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tables component
|
||||
*
|
||||
* Overrides for tables bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Oct 20, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
// All table headers are semi-bold
|
||||
th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// Table base
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Lighten border in colored tables or panels
|
||||
.panel[class*=bg-] &,
|
||||
&[class*=bg-] {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-color: fade(#fff, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tr {
|
||||
&[class*=bg-] {
|
||||
> td,
|
||||
> th {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> td[class*=bg-],
|
||||
> th[class*=bg-] {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom header bottom border color
|
||||
> thead {
|
||||
> tr[class*=border-bottom-] {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom body and footer bottom border color
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr[class*=border-top-] {
|
||||
> th,
|
||||
> td {
|
||||
border-top-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Darker border colors for thead and tfoot
|
||||
> thead > tr > th {
|
||||
border-bottom: 1px solid @table-border-highlight;
|
||||
}
|
||||
> tfoot > tr > th {
|
||||
border-top: 1px solid @table-border-highlight;
|
||||
}
|
||||
|
||||
// Nesting
|
||||
.table {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Add top border in multiple table rows
|
||||
.table:not(.table-bordered):not(.table-framed) {
|
||||
.table-responsive + .table-responsive > &,
|
||||
& + & {
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove doubled top border if no thead
|
||||
.panel-body {
|
||||
+ .table,
|
||||
+ .table-responsive > .table {
|
||||
> tbody:first-child > tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inside modal dialog body
|
||||
.modal-body {
|
||||
+ .table-responsive > .table,
|
||||
+ .table {
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
// Table responsive div container
|
||||
+ .table-responsive {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply white color to top borders in solid panels
|
||||
.panel[class*=bg-] {
|
||||
> .panel-body {
|
||||
+ .table,
|
||||
+ .table-responsive {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Table borders
|
||||
// -------------------------
|
||||
|
||||
// Solid border
|
||||
.table {
|
||||
> thead > tr {
|
||||
&.border-solid {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr,
|
||||
> tfoot > tr {
|
||||
&.border-solid {
|
||||
> td,
|
||||
> th {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
> thead > tr {
|
||||
&.border-solid:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Double border
|
||||
.table {
|
||||
> thead > tr {
|
||||
&.border-double {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-style: double;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr,
|
||||
> tfoot > tr {
|
||||
&.border-double {
|
||||
> td,
|
||||
> th {
|
||||
border-top-width: 3px;
|
||||
border-top-style: double;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
> thead > tr.border-double:first-child {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-style: double;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dashed border
|
||||
.table {
|
||||
> tbody > tr {
|
||||
&.border-dashed {
|
||||
> td,
|
||||
> th {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Framed table
|
||||
.table-framed {
|
||||
&,
|
||||
.panel > &,
|
||||
.panel > .table-responsive > & {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
// Hide border on mobile
|
||||
@media screen and (max-width: @screen-xs-max) {
|
||||
.table-responsive > & {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Borderless table
|
||||
.table-borderless {
|
||||
> tbody {
|
||||
> tr {
|
||||
> td,
|
||||
> th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Columned table
|
||||
.table-columned {
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> td,
|
||||
> th {
|
||||
border: 0;
|
||||
border-left: 1px solid @table-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> thead {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-left: 1px solid @table-border-color;
|
||||
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Table sizing
|
||||
// -------------------------
|
||||
|
||||
// XLarge
|
||||
.table-xlg {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-xlarge-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
.table-lg {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-large-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
.table-sm {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-small-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mini
|
||||
.table-xs {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-mini-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extra mini
|
||||
.table-xxs {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: @table-micro-cell-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Bordered table
|
||||
// -------------------------
|
||||
|
||||
.table-bordered {
|
||||
tr:first-child {
|
||||
> td,
|
||||
> th {
|
||||
border-top-color: @table-border-highlight;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside colored table elements
|
||||
tr[class*=bg-] > th,
|
||||
tr[class*=bg-] > td,
|
||||
tr > th[class*=bg-],
|
||||
tr > td[class*=bg-] {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Striped table
|
||||
// -------------------------
|
||||
|
||||
.table-striped {
|
||||
.panel[class*=bg-] & > tbody > tr:nth-child(odd),
|
||||
&[class*=bg-] > tbody > tr:nth-child(odd) {
|
||||
background-color: fade(#000, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Hover table
|
||||
// -------------------------
|
||||
|
||||
.table-hover {
|
||||
|
||||
// Inherit bg color on hover
|
||||
> tbody > tr:hover {
|
||||
> th,
|
||||
> td {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Inside colored tables
|
||||
.panel[class*=bg-] & > tbody > tr:hover,
|
||||
&[class*=bg-] > tbody > tr:hover {
|
||||
background-color: fade(#000, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Table backgrounds
|
||||
// -------------------------
|
||||
|
||||
// Change active bg color in colored panel and table
|
||||
.panel[class*=bg-] .panel-body > .table,
|
||||
.panel[class*=bg-] .panel-body > .table-responsive > .table,
|
||||
.table[class*=bg-] {
|
||||
.active > th,
|
||||
.active > td,
|
||||
th.active,
|
||||
td.active {
|
||||
background-color: fade(#000, 15%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Thumbnails component
|
||||
*
|
||||
* Overrides for thumbnails bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
.thumbnail {
|
||||
.box-shadow(0 1px 1px fade(#000, 5%));
|
||||
|
||||
// Links are block elements
|
||||
> a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Images
|
||||
> img,
|
||||
a > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Add a hover state for linked versions only
|
||||
a&:hover,
|
||||
a&:focus,
|
||||
a&.active {
|
||||
border-color: @thumbnail-border;
|
||||
}
|
||||
|
||||
// Image captions
|
||||
.caption {
|
||||
padding: (@thumbnail-caption-padding - @thumbnail-padding);
|
||||
padding-top: @thumbnail-caption-padding;
|
||||
|
||||
// Right icon insidee title
|
||||
i.pull-right,
|
||||
.icons-list.pull-right {
|
||||
margin-top: (@thumbnail-caption-padding - @icon-font-size);
|
||||
}
|
||||
|
||||
// Remove top margin from media heading
|
||||
.media-heading {
|
||||
margin-top: 0;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove borders if inside modal
|
||||
.modal-dialog & {
|
||||
border-width: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Use panel heading element as a thumbnail heading
|
||||
> .panel-heading {
|
||||
margin: -(@thumbnail-padding);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Use panel footer element as a thumbnail footer
|
||||
.panel-footer {
|
||||
margin: -(@thumbnail-padding);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix border radius if thumbnail doesn't have padding
|
||||
&.no-padding {
|
||||
img,
|
||||
.thumb {
|
||||
.border-top-radius(@border-radius-base);
|
||||
.box-shadow(none);
|
||||
}
|
||||
|
||||
// Caption padding
|
||||
.caption {
|
||||
padding: @panel-body-padding;
|
||||
}
|
||||
|
||||
// Remove margin from header and footer
|
||||
.panel-heading,
|
||||
.panel-footer {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Thumb styling and controls
|
||||
// -------------------------
|
||||
|
||||
// Controls appear on image
|
||||
.thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
// Images
|
||||
img:not(.media-preview) {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Thumb with fixed size image
|
||||
&.thumb-fixed {
|
||||
img {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
// Add rounded corners
|
||||
&:not(.thumb-rounded) {
|
||||
img {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom
|
||||
&:hover .caption-zoom {
|
||||
border-radius: 0;
|
||||
.box-shadow(0 0 0 10px fade(#000, 70%));
|
||||
}
|
||||
|
||||
// Offset
|
||||
&:hover .caption-offset {
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
// Collapse
|
||||
.caption-collapse {
|
||||
top: 80%;
|
||||
z-index: 10;
|
||||
height: auto;
|
||||
|
||||
.thumb:hover & {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Rounded thumb
|
||||
.thumb-rounded {
|
||||
width: 60%;
|
||||
margin: @line-height-computed auto 0 auto;
|
||||
|
||||
// Make elements rounded
|
||||
&,
|
||||
img,
|
||||
.caption-overflow {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Display control buttons on hover
|
||||
.caption-overflow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
border-radius: @border-radius-base;
|
||||
.opacity(0);
|
||||
.transition(all 0.15s ease-in-out);
|
||||
|
||||
// Button container
|
||||
span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -((@line-height-computed / 2) + @padding-base-vertical);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Show on hover
|
||||
.thumb:hover > & {
|
||||
background-color: fade(#000, 70%);
|
||||
visibility: visible;
|
||||
.opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom
|
||||
.zoom-image {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.opacity(0);
|
||||
.transition(all 0.15s ease-in-out);
|
||||
|
||||
// Show on hover
|
||||
.thumb:hover & {
|
||||
background-color: fade(#000, 60%);
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Rounded image
|
||||
.img-rounded + & {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Circle image
|
||||
.img-circle + & {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// Icon setup
|
||||
i {
|
||||
font-size: (@icon-font-size * 2);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -(@icon-font-size);
|
||||
margin-left: -(@icon-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
// Slide
|
||||
.thumb-slide {
|
||||
overflow: hidden;
|
||||
|
||||
// Add caption
|
||||
.caption {
|
||||
position: absolute;
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: fade(#000, 70%);
|
||||
z-index: 10;
|
||||
.transition(all 0.1s linear);
|
||||
|
||||
// Buttons
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -((@input-height-base) / 2);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Show on hover
|
||||
&:hover .caption {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Tooltips component
|
||||
*
|
||||
* Overrides for tooltips bootstrap component
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: May 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
.tooltip {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
|
||||
// Custom color
|
||||
[class*=bg-] {
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
> .tooltip-inner {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Inherit arrow color
|
||||
&.top [class*=bg-] .tooltip-arrow { border-top-color: inherit; }
|
||||
&.right [class*=bg-] .tooltip-arrow { border-right-color: inherit; }
|
||||
&.bottom [class*=bg-] .tooltip-arrow { border-bottom-color: inherit; }
|
||||
&.left [class*=bg-] .tooltip-arrow { border-left-color: inherit; }
|
||||
}
|
||||
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
padding: @padding-base-vertical @padding-base-horizontal;
|
||||
}
|
||||
@@ -0,0 +1,891 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Main typography
|
||||
*
|
||||
* Main typography overrides, including custom content
|
||||
*
|
||||
* Version: 1.2
|
||||
* Latest update: Nov 25, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Headings
|
||||
// -------------------------
|
||||
|
||||
// All headings
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
letter-spacing: @heading-letter-spacing;
|
||||
|
||||
// Labels/badges
|
||||
> .label,
|
||||
> .badge {
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
|
||||
&.pull-right {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: @font-size-base;
|
||||
|
||||
&.display-block {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Large headings
|
||||
h1, h2, h3,
|
||||
.h1, .h2, .h3 {
|
||||
> [class*=icon-] {
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
// Small font size
|
||||
small {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Heading with divider
|
||||
.heading-divided {
|
||||
margin-bottom: (@line-height-computed - 5);
|
||||
padding-bottom: (@line-height-computed / 2);
|
||||
border-bottom: 1px solid @panel-default-border;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Emphasis & misc
|
||||
// -------------------------
|
||||
|
||||
// Remove outlines
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
// Mark element
|
||||
mark,
|
||||
.mark {
|
||||
background-color: @text-color;
|
||||
padding: 2px 6px;
|
||||
color: #fff;
|
||||
border-radius: @border-radius-small;
|
||||
}
|
||||
|
||||
|
||||
// Contextual colors
|
||||
.text-muted {
|
||||
a&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// SVG sizing
|
||||
svg {
|
||||
display: block;
|
||||
|
||||
// Inline
|
||||
.svg-inline & {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Centered object
|
||||
.svg-center & {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Large circle icon
|
||||
.letter-icon {
|
||||
width: @icon-font-size;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Content divider
|
||||
.content-divider {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// Text container
|
||||
> span {
|
||||
background-color: @body-bg;
|
||||
display: inline-block;
|
||||
padding-left: @padding-base-horizontal;
|
||||
padding-right: @padding-base-horizontal;
|
||||
|
||||
// Change bg color if inside panel
|
||||
.panel &,
|
||||
.tab-content-bordered &,
|
||||
.modal & {
|
||||
background-color: @panel-bg;
|
||||
}
|
||||
|
||||
// Add line
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background-color: @panel-inner-border;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Muted line
|
||||
&-muted > span:before {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styled icon
|
||||
.icon-object {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
padding: @content-padding-large;
|
||||
display: inline-block;
|
||||
|
||||
// Icon size
|
||||
> i {
|
||||
font-size: (@icon-font-size * 2);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnail preview
|
||||
.img-preview {
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
|
||||
// Video container
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Status mark
|
||||
.status-mark {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: 2px solid;
|
||||
|
||||
.dropdown-menu > .active & {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Extra horizontal spacing for elements
|
||||
//
|
||||
|
||||
// Left
|
||||
.position-left {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
|
||||
// Right
|
||||
.position-right {
|
||||
margin-left: @element-horizontal-spacing;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Contextual backgrounds
|
||||
// -------------------------
|
||||
|
||||
.bg-primary {
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
color: #fff;
|
||||
.bg-variant(@brand-success);
|
||||
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: @brand-success;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
color: #fff;
|
||||
.bg-variant(@brand-info);
|
||||
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: @brand-info;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
color: #fff;
|
||||
.bg-variant(@brand-warning);
|
||||
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: @brand-warning;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
color: #fff;
|
||||
.bg-variant(@brand-danger);
|
||||
|
||||
a&:hover,
|
||||
a&:focus {
|
||||
background-color: @brand-danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Page header
|
||||
// -------------------------
|
||||
|
||||
// Base
|
||||
.page-header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
// Setup desktop view
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.heading-elements.collapse {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark page header
|
||||
.page-header-inverse {
|
||||
background-color: @page-header-inverse-bg;
|
||||
color: #fff;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
// Change color of small element
|
||||
.page-title small {
|
||||
color: fade(#fff, 50%);
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
> .breadcrumb,
|
||||
.page-header-content .breadcrumb {
|
||||
|
||||
// Links
|
||||
> li > a,
|
||||
> li + li:before {
|
||||
color: fade(#fff, 90%);
|
||||
}
|
||||
|
||||
// Hovered links
|
||||
> li > a:hover,
|
||||
> li > a:focus {
|
||||
color: #fff;
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
// Active item
|
||||
> .active {
|
||||
color: fade(#fff, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon addons color
|
||||
.form-control-feedback,
|
||||
.input-group-addon {
|
||||
color: fade(#fff, 75%);
|
||||
}
|
||||
|
||||
// Text links
|
||||
.heading-text > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// Input fields
|
||||
.form-control {
|
||||
border-bottom-color: fade(#fff, 30%);
|
||||
color: #fff;
|
||||
.placeholder(fade(@input-placeholder-light, 75%));
|
||||
|
||||
// Focused
|
||||
&:focus {
|
||||
border-bottom-color: #fff;
|
||||
.box-shadow(0 1px 0 #fff);
|
||||
}
|
||||
}
|
||||
|
||||
// Cover image
|
||||
&.has-cover {
|
||||
background: url(../images/login_cover.jpg); // feel free to change
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// White page header
|
||||
.page-header-default {
|
||||
background-color: @page-header-default-bg;
|
||||
margin-bottom: @line-height-computed;
|
||||
.box-shadow(0 1px 0 0 @navbar-default-border);
|
||||
|
||||
// Cover image
|
||||
&.has-cover {
|
||||
background: url(../images/backgrounds/seamless.png); // feel free to change
|
||||
}
|
||||
}
|
||||
|
||||
// Page title
|
||||
.page-title {
|
||||
padding: 32px (@grid-gutter-width + @icon-font-size) 32px 0;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
// Subtitle
|
||||
small {
|
||||
margin-left: (@grid-gutter-width / 2);
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
content: '/';
|
||||
margin-right: ((@grid-gutter-width / 2) + 5);
|
||||
}
|
||||
|
||||
&.display-block {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add left spacing to align with text
|
||||
i ~ small.display-block {
|
||||
margin-left: (@icon-font-size + (@grid-gutter-width / 2) + 5);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Change page header size by changing title vertical spacing
|
||||
//
|
||||
|
||||
// Large
|
||||
.page-header-lg & {
|
||||
padding-top: (32px) + 5;
|
||||
padding-bottom: (32px) + 5;
|
||||
}
|
||||
|
||||
// Small
|
||||
.page-header-sm & {
|
||||
padding-top: (32px) - 5;
|
||||
padding-bottom: (32px) - 5;
|
||||
}
|
||||
|
||||
// Mini
|
||||
.page-header-xs & {
|
||||
padding-top: (32px) - 10;
|
||||
padding-bottom: (32px) - 10;
|
||||
}
|
||||
|
||||
|
||||
// Remove margin from headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Remove right padding on desktop
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Content itself
|
||||
.page-header-content {
|
||||
position: relative;
|
||||
background-color: inherit;
|
||||
padding: 0 @grid-gutter-width;
|
||||
|
||||
// With custom colored bottom border
|
||||
&[class*=border-bottom-] + .breadcrumb-line {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Text styling
|
||||
// -------------------------
|
||||
|
||||
// Font weights
|
||||
.text-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
.text-semibold {
|
||||
font-weight: 500;
|
||||
}
|
||||
.text-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
.text-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
.text-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
||||
// Font style
|
||||
.text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.text-highlight {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
|
||||
// Font size
|
||||
.text-size-large {
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
.text-size-base {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.text-size-small {
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
.text-size-mini {
|
||||
font-size: @font-size-small - 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Lists
|
||||
// -------------------------
|
||||
|
||||
// Unordered and Ordered lists
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// List options
|
||||
// -------------------------
|
||||
|
||||
// Custom list class
|
||||
.list {
|
||||
|
||||
// Add vertical spacing to the list items
|
||||
> li {
|
||||
&,
|
||||
.list > li {
|
||||
margin-top: @padding-base-vertical;
|
||||
}
|
||||
|
||||
// Remove top margin from the first list item
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Additional sizing
|
||||
//
|
||||
|
||||
// Condensed list
|
||||
&-condensed {
|
||||
> li {
|
||||
&,
|
||||
.list > li {
|
||||
margin-top: (@padding-base-vertical - 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extended list
|
||||
&-extended {
|
||||
> li {
|
||||
&,
|
||||
.list > li {
|
||||
margin-top: (@padding-base-vertical + 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// List item styling
|
||||
ul {
|
||||
&.list-square {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
&.list-circle {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
margin-left: 0;
|
||||
font-size: 0;
|
||||
|
||||
// List item
|
||||
> li {
|
||||
padding-left: 0;
|
||||
padding-right: @content-padding-large;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Additional sizing
|
||||
//
|
||||
|
||||
// Condensed
|
||||
&-condensed {
|
||||
> li {
|
||||
padding-right: @content-padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
// Separate
|
||||
&-separate {
|
||||
> li {
|
||||
padding-right: @content-padding-large;
|
||||
position: relative;
|
||||
|
||||
// Bullet
|
||||
&:before {
|
||||
content: '\2022';
|
||||
position: absolute;
|
||||
right: ((@content-padding-large / 2) - 2);
|
||||
color: #ccc;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
// Remove bullet from the last child list item
|
||||
&:last-child:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// With vertical borders
|
||||
&-bordered {
|
||||
> li {
|
||||
margin-right: @content-padding-large;
|
||||
border-right: 1px solid @panel-inner-border;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List with icons
|
||||
.list-icons {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
i {
|
||||
margin-right: @element-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Feed list
|
||||
// ------------------------------
|
||||
|
||||
// Base
|
||||
.list-feed {
|
||||
margin: 0;
|
||||
padding: @list-spacing 0;
|
||||
list-style: none;
|
||||
|
||||
// List item
|
||||
> li {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding-bottom: @line-height-computed;
|
||||
padding-left: (@content-padding-large + @list-feed-circle-radius);
|
||||
|
||||
// Circle
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: @list-feed-circle-position;
|
||||
width: @list-feed-circle-radius;
|
||||
height: @list-feed-circle-radius;
|
||||
background-color: @panel-bg;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
border: @list-feed-circle-border-width solid @color-slate-500;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: @list-feed-circle-position;
|
||||
left: (@list-feed-circle-radius / 2) - (@list-feed-circle-border-width / 2);
|
||||
bottom: -(@list-feed-circle-position + @list-feed-circle-border-width);
|
||||
width: 0;
|
||||
border-left: (@list-feed-circle-border-width / 2) solid @color-slate-500;
|
||||
border-right: (@list-feed-circle-border-width / 2) solid @color-slate-500;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// First item
|
||||
&:first-child {
|
||||
&:after {
|
||||
top: @list-feed-circle-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Last item
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Setup color inheritance
|
||||
&[class*=border-] {
|
||||
&:before,
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Styles
|
||||
//
|
||||
|
||||
// Filled symbols
|
||||
.list-feed-solid {
|
||||
> li:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: (@list-feed-circle-radius / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Square
|
||||
.list-feed-square {
|
||||
> li:before {
|
||||
content: '';
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Rhombus
|
||||
.list-feed-rhombus {
|
||||
> li:before {
|
||||
content: '';
|
||||
border-radius: 0;
|
||||
.rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Time stamp
|
||||
.list-feed-time {
|
||||
> li {
|
||||
margin-left: 48px;
|
||||
|
||||
.feed-time {
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
top: 0;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Icons list
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal icons list
|
||||
.icons-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
font-size: 0;
|
||||
|
||||
// List item
|
||||
> li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Link
|
||||
> a {
|
||||
color: inherit;
|
||||
display: block;
|
||||
.opacity(1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.opacity(0.75);
|
||||
}
|
||||
|
||||
// Remove top edge spacing from iton
|
||||
> i {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Caret
|
||||
> .caret {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extended list item spacing
|
||||
&-extended > li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Description Lists
|
||||
// -------------------------
|
||||
|
||||
dl {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
dt {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
|
||||
dd + & {
|
||||
margin-top: @line-height-computed;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal description lists
|
||||
.dl-horizontal dt {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
+ dd {
|
||||
margin-top: @line-height-computed;
|
||||
}
|
||||
|
||||
&:first-child + dd {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Blockquotes
|
||||
// -------------------------
|
||||
|
||||
// Basic styles
|
||||
blockquote {
|
||||
margin: 0;
|
||||
|
||||
// Image
|
||||
img {
|
||||
height: 42px;
|
||||
float: left;
|
||||
margin-right: @content-padding-large;
|
||||
|
||||
&.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: @content-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer and small texts
|
||||
footer,
|
||||
small,
|
||||
.small {
|
||||
font-size: @font-size-base;
|
||||
margin-top: @padding-base-vertical;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Opposite alignment of blockquote
|
||||
.blockquote-reverse,
|
||||
blockquote.pull-right {
|
||||
padding-right: @line-height-computed;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Wells component
|
||||
*
|
||||
* Overrides for wells bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
.well {
|
||||
margin-bottom: 0;
|
||||
padding: @panel-body-padding;
|
||||
.box-shadow(none);
|
||||
|
||||
// White background
|
||||
&-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Border radius fix
|
||||
&[class*=border-top-] {
|
||||
.border-top-radius(0);
|
||||
}
|
||||
&[class*=border-bottom-] {
|
||||
.border-bottom-radius(0);
|
||||
}
|
||||
&[class*=border-left-] {
|
||||
.border-left-radius(0);
|
||||
}
|
||||
&[class*=border-right-] {
|
||||
.border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sizes
|
||||
// -------------------------
|
||||
|
||||
// Large
|
||||
.well-lg {
|
||||
padding: (@panel-body-padding + 5);
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
// Small
|
||||
.well-sm {
|
||||
padding: (@panel-body-padding - 5);
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
Reference in New Issue
Block a user