first commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user