/* ------------------------------------------------------------------------------ * * # Panels component * * Overrides for panels bootstrap component * * Version: 1.0 * Latest update: May 25, 2015 * * ---------------------------------------------------------------------------- */ // Base class // ------------------------- .panel { margin-bottom: @line-height-computed; border-color: @panel-default-border; color: @text-color; } // 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; } // Panel body inherits bg color > .panel-body { background-color: inherit; } // 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; .panel-flat > .panel-heading + & { padding-top: 0; } } // Panel heading // ------------------------- // Base class .panel-heading { position: relative; // 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; } // 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; // 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; // Clearing floats &:after { content: ''; display: table; clear: both; } // List > ul { margin: 0; padding: 0; font-size: 0; list-style: none; float: left; margin-left: @content-padding-base; &:first-child { margin-left: 0; } > li { display: inline-block; font-size: @font-size-base; padding-top: (@padding-base-vertical + 1); padding-bottom: (@padding-base-vertical + 1); & + li { margin-left: @content-padding-base; } > a { color: @text-color; } .dropdown-menu { margin-top: 0; margin-bottom: 0; } } } // Setup mobile view @media (max-width: @screen-xs) { text-align: center; ul, .pull-right { margin-left: 0; float: none!important; } > ul > li, .dropdown, .dropup, .btn-group { position: static; } .dropdown-menu { left: 0; right: 0; } } } // Detached panel footer .panel-footer-transparent { background-color: transparent; border-top: 0; // List items > ul > li { padding-top: 0; padding-bottom: 0; margin-bottom: @panel-body-padding; } } // 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; } }