You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
767 lines
18 KiB
767 lines
18 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # Heading elmeents |
|
* |
|
* Display default and custom components in page header and panel heading |
|
* |
|
* Version: 1.3 |
|
* Latest update: Aug 10, 2016 |
|
* |
|
* ---------------------------------------------------------------------------- */ |
|
|
|
|
|
// Base |
|
// ------------------------- |
|
|
|
// Heading elements toggler |
|
.heading-elements-toggle { |
|
cursor: pointer; |
|
display: block; |
|
line-height: 1; |
|
position: absolute; |
|
top: 50%; |
|
right: 0; |
|
margin-top: -(@icon-font-size / 2); |
|
} |
|
|
|
// Breadcrumb toggler position |
|
.breadcrumb-elements-toggle { |
|
float: right; |
|
cursor: pointer; |
|
line-height: 1; |
|
margin-top: ((((@breadcrumb-padding-vertical * 2) + @line-height-computed) - @icon-font-size) / 2); |
|
|
|
// Stand alone component |
|
.breadcrumb-line-component & { |
|
margin-right: @grid-gutter-width; |
|
} |
|
} |
|
|
|
// Common styles for togglers |
|
.heading-elements-toggle, |
|
.breadcrumb-elements-toggle { |
|
|
|
// Inherit colors |
|
&, |
|
&:hover, |
|
&:focus { |
|
color: inherit; |
|
} |
|
|
|
// Remove top edge frop icons |
|
> i { |
|
top: 0; |
|
} |
|
|
|
// Hide on desktop |
|
@media (min-width: @screen-sm-min) { |
|
display: none; |
|
} |
|
} |
|
|
|
|
|
// Heading elements base |
|
.heading-elements { |
|
background-color: inherit; |
|
position: absolute; |
|
top: 50%; |
|
right: @grid-gutter-width; |
|
height: @input-height-base; |
|
margin-top: -(@input-height-base / 2); |
|
|
|
// Mobile view |
|
@media (max-width: @screen-xs-max) { |
|
&:not(.not-collapsible) { |
|
position: static; |
|
margin-top: 0; |
|
height: auto; |
|
} |
|
} |
|
} |
|
|
|
|
|
// |
|
// Inside panel |
|
// |
|
|
|
// Inside panel body |
|
.panel-body { |
|
> .heading-elements { |
|
top: 0; |
|
margin-top: (@input-height-base - @content-padding-large - 2); |
|
z-index: 10; |
|
} |
|
|
|
// Mobile view |
|
@media (max-width: @screen-xs-max) { |
|
> .heading-elements-toggle { |
|
top: @panel-body-padding; |
|
margin-top: 0; |
|
} |
|
|
|
> .heading-elements.visible-elements { |
|
top: ((@panel-body-padding * 2) + @icon-font-size); |
|
background-color: @panel-bg; |
|
} |
|
} |
|
} |
|
|
|
// Inside panel footer |
|
.panel-footer { |
|
> .heading-elements { |
|
position: static; |
|
margin-top: 0; |
|
padding-right: @content-padding-large; |
|
|
|
// Clear floats |
|
&:after { |
|
content: ''; |
|
display: table; |
|
clear: both; |
|
} |
|
} |
|
|
|
// Inside bordered panel footer |
|
&-bordered { |
|
> .heading-elements:not(.visible-elements) { |
|
margin-left: -(@content-padding-large); |
|
padding-right: 0; |
|
} |
|
} |
|
|
|
// Mobile view |
|
@media (max-width: @screen-xs-max) { |
|
> .heading-elements:not(.not-collapsible) > .pull-right { |
|
float: none!important; |
|
} |
|
|
|
// Toggle button |
|
.heading-elements-toggle { |
|
position: static; |
|
padding-top: @content-padding-small; |
|
padding-bottom: @content-padding-small; |
|
margin-top: 0; |
|
display: block; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
|
|
// |
|
// Heading thumbnails |
|
// |
|
|
|
.heading-thumbnails { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
font-size: 0; |
|
|
|
// Items |
|
> li { |
|
position: relative; |
|
display: inline-block; |
|
font-size: @font-size-base; |
|
|
|
// Multiple items |
|
+ li { |
|
margin-left: 10px; |
|
} |
|
|
|
// Images |
|
img { |
|
height: auto; |
|
max-height: @input-height-base; |
|
max-width: 100%; |
|
border-radius: 100px; |
|
} |
|
|
|
// Labels and badges |
|
.label, |
|
.badge { |
|
position: absolute; |
|
top: -8px; |
|
right: -8px; |
|
border: 2px solid @panel-footer-bg; |
|
|
|
// Inside transparent panel footer |
|
.panel-default > .panel-heading &, |
|
.panel-footer-transparent & { |
|
border-color: @panel-bg; |
|
} |
|
} |
|
|
|
// Status mark |
|
.status-mark { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
box-shadow: 0 0 0 2px @panel-footer-bg; |
|
|
|
// Add background color if circle |
|
&[class*=border-] { |
|
background-color: @panel-footer-bg; |
|
|
|
// Inside transparent panel footer |
|
.panel-default > .panel-heading &, |
|
.panel-footer-transparent & { |
|
background-color: @panel-bg; |
|
} |
|
} |
|
|
|
// Inside transparent panel footer |
|
.panel-default > .panel-heading &, |
|
.panel-footer-transparent & { |
|
background-color: @panel-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Elements |
|
// ------------------------- |
|
|
|
.heading-elements { |
|
|
|
// Element's horizontal spacing |
|
.heading-btn + .heading-btn, |
|
.page-header & .icons-list > li + li, |
|
.thumbnail-heading & .icons-list > li + li { |
|
margin-left: (@content-padding-large / 2); |
|
} |
|
|
|
// Button link inside dark page header |
|
.page-header-inverse & { |
|
.btn-link { |
|
color: #fff; |
|
} |
|
} |
|
|
|
// List |
|
.list-inline { |
|
margin-bottom: 0; |
|
} |
|
|
|
// Breadcrumb inside page header |
|
.breadcrumb { |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
} |
|
|
|
// Align text left in panel tabs/pills |
|
&.panel-nav { |
|
.nav > li > a { |
|
text-align: left; |
|
} |
|
} |
|
|
|
// Custom date range display |
|
.daterange-custom { |
|
margin-top: ((@input-height-base - 28px) / 2); // half of elements general height - font size |
|
} |
|
|
|
// Button group |
|
.heading-btn-group { |
|
font-size: 0; |
|
|
|
> .btn + .btn:not(.btn-link) { |
|
margin-left: (@content-padding-large / 2); |
|
} |
|
} |
|
|
|
// Hide elements on mobile, but display them |
|
// when toggle button is clicked |
|
&.visible-elements { |
|
text-align: center; |
|
|
|
// Add vertical spacing |
|
.heading-text, |
|
.heading-btn, |
|
.heading-btn-group > .btn, |
|
.ui-slider, |
|
.noui-slider, |
|
.nav-tabs, |
|
.nav-pills, |
|
.pagination, |
|
.progress, |
|
.icons-list, |
|
.pager, |
|
.breadcrumb, |
|
.daterange-custom, |
|
.heading-thumbnails, |
|
.heading-form .form-group, |
|
> .btn-group { |
|
margin-top: @line-height-computed; |
|
} |
|
|
|
// Remove bottom margin from tabs/pills |
|
.nav-tabs, |
|
.nav-pills { |
|
margin-bottom: 0; |
|
} |
|
|
|
// Heading text |
|
.heading-text:not(.label):not(.badge) { |
|
display: block; |
|
} |
|
|
|
// Make selects full width |
|
.select2-container, |
|
.selectboxit-container, |
|
.selectboxit-options, |
|
.multiselect + .btn-group, |
|
div.bootstrap-select { |
|
width: 100%!important; |
|
} |
|
|
|
// Static position |
|
.input-group, |
|
.input-group-btn, |
|
.btn-group, |
|
.dropdown, |
|
.dropup { |
|
position: static; |
|
} |
|
|
|
// Make dropdown menus full width |
|
.dropdown-menu:not(.multiselect-container) { |
|
left: -1px; |
|
right: -1px; |
|
margin-top: 0; |
|
.border-top-radius(0); |
|
} |
|
|
|
// Multiselect container is not full width |
|
.multiselect-container { |
|
left: 0; |
|
right: 0; |
|
} |
|
} |
|
|
|
// Make them visible-elements starting from tablet |
|
// or on mobile if container is not collapsible |
|
&:not(.visible-elements) { |
|
|
|
// Make them inline |
|
.heading-text, |
|
.heading-btn, |
|
.ui-slider, |
|
.noui-slider, |
|
.nav-tabs, |
|
.nav-pills, |
|
.pagination, |
|
.progress, |
|
.icons-list, |
|
.breadcrumb, |
|
.pager, |
|
.heading-form, |
|
.daterange-custom, |
|
.heading-thumbnails, |
|
> .btn-group { |
|
float: left; |
|
margin-left: @content-padding-large; |
|
} |
|
|
|
// Heading text |
|
.heading-text { |
|
display: inline-block; |
|
|
|
& + .heading-text { |
|
margin-left: @content-padding-large; |
|
} |
|
} |
|
|
|
// Elements width |
|
.selectbox-fixed + .selectboxit-container, |
|
.selectbox-fixed + .selectboxit-options, |
|
.progress, |
|
.ui-slider, |
|
.noui-slider, |
|
.input-group, |
|
.selectboxit-container .selectboxit-options, |
|
.uploader, |
|
.heading-form .form-control { |
|
width: 220px; |
|
} |
|
|
|
|
|
// Elements sizes spacing |
|
// ------------------------------ |
|
|
|
// Small elements corrections |
|
.select-sm, |
|
.input-sm, |
|
.input-group-sm, |
|
.uploader-sm, |
|
.pagination-sm, |
|
.pager-sm, |
|
.selectbox-sm + .selectboxit-container, |
|
.btn-sm, |
|
.btn-group-sm > .btn { |
|
margin-top: (@input-height-base - @input-height-small) / 2; |
|
} |
|
|
|
// Mini elements corrections |
|
.select-xs, |
|
.input-xs, |
|
.input-group-xs, |
|
.uploader-xs, |
|
.pagination-xs, |
|
.pager-xs, |
|
.selectbox-xs + .selectboxit-container, |
|
.btn-xs, |
|
.btn-group-xs > .btn { |
|
margin-top: (@input-height-base - @input-height-mini) / 2; |
|
} |
|
|
|
// Floating buttons |
|
.btn-float { |
|
margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + 2)) / 2) - 1); // Difference between base height and button height |
|
|
|
// If has text |
|
&.has-text { |
|
margin-top: (((@input-height-base - ((@btn-float-padding * 2) + @icon-font-size + @line-height-computed + 5)) / 2) - 1); // Difference between base height and button height with text |
|
} |
|
|
|
// If float link |
|
&.btn-link { |
|
margin-top: (((@input-height-base - (@icon-font-size + @line-height-computed + (@btn-float-padding * 2) - 6)) / 2) - 1); |
|
} |
|
} |
|
|
|
// Sliders |
|
.ui-slider, |
|
.noui-slider { |
|
margin-top: ((@input-height-base - @slider-base-size) / 2); |
|
|
|
&-lg { |
|
margin-top: ((@input-height-base - @slider-large-size) / 2); |
|
} |
|
|
|
&-sm { |
|
margin-top: ((@input-height-base - @slider-small-size) / 2); |
|
} |
|
|
|
&-xs { |
|
margin-top: ((@input-height-base - @slider-mini-size) / 2); |
|
} |
|
} |
|
|
|
// Progress bars |
|
.progress { |
|
margin-top: ((@input-height-base - @progress-base-height) / 2); |
|
|
|
// Large |
|
&-lg { |
|
margin-top: ((@input-height-base - @progress-large-height) / 2); |
|
} |
|
|
|
// Small |
|
&-sm { |
|
margin-top: ((@input-height-base - @progress-small-height) / 2); |
|
} |
|
|
|
// Mini |
|
&-xs { |
|
margin-top: ((@input-height-base - @progress-mini-height) / 2); |
|
} |
|
|
|
// Tiny |
|
&-xxs { |
|
margin-top: ((@input-height-base - @progress-tiny-height) / 2); |
|
} |
|
|
|
// Micro |
|
&-micro { |
|
margin-top: ((@input-height-base - @progress-micro-height) / 2); |
|
} |
|
} |
|
|
|
// Icons list |
|
.icons-list { |
|
margin-top: ((@input-height-base - @icon-font-size) / 2); |
|
} |
|
|
|
// Text |
|
.heading-text { |
|
margin-top: ((@input-height-base - @line-height-computed) / 2); |
|
} |
|
|
|
// Panel navs |
|
&.panel-nav { |
|
|
|
// Navs |
|
> .nav { |
|
margin-bottom: 0; |
|
} |
|
|
|
// Desktop view |
|
@media (min-width: @screen-sm-min) { |
|
|
|
// Navs |
|
> .nav { |
|
margin-top: ((@input-height-base - (((@padding-base-vertical + 2) * 2) + @line-height-computed)) / 2); |
|
} |
|
|
|
// Tabs |
|
> .nav-tabs { |
|
border-bottom-width: 0; |
|
|
|
// Remove active state highlight |
|
&.nav-tabs-bottom > li.active > a:after { |
|
background-color: transparent; |
|
} |
|
} |
|
|
|
// Small pills |
|
> .nav-sm { |
|
margin-top: ((@input-height-base - ((@padding-small-vertical * 2) + @line-height-computed)) / 2); |
|
} |
|
|
|
// Mini pills |
|
> .nav-xs { |
|
margin-top: ((@input-height-base - (((@padding-xs-vertical - 2) * 2) + @line-height-computed)) / 2); |
|
} |
|
} |
|
|
|
// Mobile view |
|
@media (max-width: @screen-xs-max) { |
|
position: static; |
|
height: auto; |
|
|
|
// Navs |
|
> .nav { |
|
float: none; |
|
} |
|
|
|
// Inside panel heading |
|
.panel-heading & { |
|
margin-top: @content-padding-base; |
|
|
|
// Inside flat panel |
|
.panel-flat & { |
|
margin-top: @content-padding-large; |
|
} |
|
|
|
// Navs |
|
> .nav { |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
// Add vertical margin if container is not collapsible |
|
.panel-footer &.not-collapsible { |
|
> .nav { |
|
margin-top: @line-height-computed - @padding-base-vertical; |
|
margin-bottom: @line-height-computed - @padding-base-vertical; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Heading form |
|
// ------------------------- |
|
|
|
.heading-form { |
|
|
|
// Form group |
|
.form-group { |
|
margin-bottom: 0; |
|
} |
|
|
|
// Switchery |
|
.checkbox-switchery { |
|
&, |
|
&[class*="switchery-"] { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
// If container is not collapsible |
|
.heading-elements:not(.visible-elements) & { |
|
|
|
// Radios and checkboxes |
|
.checkbox-inline, |
|
.radio-inline { |
|
margin-top: ((@input-height-base - @line-height-computed) / 2); |
|
} |
|
|
|
// Checkbox switch |
|
.checkbox-switch { |
|
|
|
// Those 2 pixels that are used in Switch styles as negative top margin. In fact, switch height is equal to heading elements container height. |
|
// They will be added below to calculate the difference |
|
margin-top: 2px; |
|
|
|
// Small |
|
&-sm { |
|
margin-top: ((@input-height-base - @input-height-small) / 2) + 2; |
|
} |
|
|
|
// Mini |
|
&-xs { |
|
margin-top: ((@input-height-base - @input-height-mini) / 2) + 2; |
|
} |
|
} |
|
|
|
// Input group |
|
.input-group { |
|
max-width: 220px; |
|
|
|
// Inputs |
|
.form-control { |
|
width: 100%; |
|
margin-top: 0; |
|
} |
|
|
|
// Buttons |
|
&.input-group-sm .btn, |
|
&.input-group-xs .btn { |
|
margin-top: 0; |
|
} |
|
} |
|
} |
|
|
|
|
|
// Setup desktop view |
|
@media (min-width: @screen-sm-min) { |
|
|
|
// Form group |
|
.form-group { |
|
float: left; |
|
|
|
// Multiple groups |
|
& + .form-group { |
|
margin-left: @content-padding-base; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
// Toggle elements visibility |
|
// ------------------------------ |
|
|
|
@media (max-width: @screen-xs-max) { |
|
|
|
// Heading elements |
|
.heading-elements, |
|
.breadcrumb-elements { |
|
|
|
// If collapsible |
|
&:not(.not-collapsible) { |
|
display: none; |
|
} |
|
|
|
// Show on click |
|
&.visible-elements { |
|
display: block; |
|
} |
|
} |
|
|
|
// Visible elements parent container |
|
.has-visible-elements { |
|
|
|
// All panels |
|
.panel & { |
|
padding-bottom: 0; |
|
} |
|
|
|
// Flat panel |
|
.panel-flat .panel-heading& { |
|
padding-bottom: @content-padding-large; |
|
} |
|
} |
|
|
|
// Visible elements container |
|
.visible-elements { |
|
|
|
// Inside panels |
|
.panel & { |
|
border-top: 1px solid @panel-default-border; |
|
padding: @content-padding-large; |
|
padding-top: 0; |
|
} |
|
|
|
// Inside panel heading |
|
.panel-heading & { |
|
margin: @content-padding-base -(@content-padding-large) 0 -(@content-padding-large); |
|
background-color: darken(@panel-bg, 1%); |
|
|
|
// In flat panel |
|
.panel-flat & { |
|
margin-top: @content-padding-large; |
|
border-bottom: 1px solid @panel-default-border; |
|
} |
|
} |
|
|
|
// Inside panel footer |
|
.panel-footer & { |
|
margin-top: @padding-base-vertical; |
|
.border-bottom-radius(@border-radius-base); |
|
} |
|
|
|
// Inside condensed panel footer |
|
.panel-footer-condensed & { |
|
margin-top: 2px; |
|
} |
|
|
|
// Inside transparent panel footer |
|
.panel-footer-transparent & { |
|
margin-top: @content-padding-large - ((@input-height-base - @line-height-computed) / 2); |
|
background-color: @panel-bg; |
|
} |
|
|
|
// Inside colored panels |
|
.panel[class*=bg-] &, |
|
.panel-heading[class*=bg-] &, |
|
.panel-primary &, |
|
.panel-danger &, |
|
.panel-success &, |
|
.panel-warning &, |
|
.panel-info & { |
|
border-color: fade(#fff, 20%); |
|
left: 0; |
|
right: 0; |
|
background-color: fade(#000, 10%); |
|
} |
|
|
|
// Breadcrumb elements |
|
&.breadcrumb-elements { |
|
&.not-collapsible { |
|
display: none; |
|
} |
|
} |
|
|
|
// Inside page header |
|
.page-header-content > & { |
|
background-color: @body-bg; |
|
left: 0; |
|
right: 0; |
|
border-top: 1px solid darken(@body-bg, 10%); |
|
z-index: (@zindex-navbar + 2); |
|
padding-bottom: @line-height-computed; |
|
margin-left: -(@grid-gutter-width); |
|
margin-right: -(@grid-gutter-width); |
|
padding-left: @grid-gutter-width; |
|
padding-right: @grid-gutter-width; |
|
|
|
// Inside default page header |
|
.page-header-default & { |
|
background-color: darken(@page-header-default-bg, 1%); |
|
border-color: @panel-default-border; |
|
} |
|
|
|
// Inside inverse page header |
|
.page-header-inverse & { |
|
background-color: fade(#000, 10%); |
|
border-color: fade(#fff, 10%); |
|
} |
|
} |
|
} |
|
}
|
|
|