/* ------------------------------------------------------------------------------ * * # 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%); } } } }