454 lines
8.8 KiB
Plaintext
454 lines
8.8 KiB
Plaintext
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # 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;
|
|
}
|
|
}
|