first commit
This commit is contained in:
Olu Amey
@@ -0,0 +1,449 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # Panels component
|
||||
*
|
||||
* Overrides for panels bootstrap component
|
||||
*
|
||||
* Version: 1.1
|
||||
* Latest update: Mar 10, 2016
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Base class
|
||||
// -------------------------
|
||||
|
||||
.panel {
|
||||
margin-bottom: @line-height-computed;
|
||||
border-width: 0;
|
||||
color: @text-color;
|
||||
.box-shadow(@shadow-depth1);
|
||||
}
|
||||
|
||||
|
||||
// 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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bordered panels
|
||||
// -------------------------
|
||||
|
||||
.panel-bordered {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
// Custom border colors
|
||||
// -------------------------
|
||||
|
||||
.panel {
|
||||
&[class*=border-top-] {
|
||||
.border-top-radius(0);
|
||||
|
||||
&:not(.border-top-lg):not(.border-top-xlg) {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*=border-bottom-] {
|
||||
.border-bottom-radius(0);
|
||||
|
||||
&:not(.border-bottom-lg):not(.border-bottom-xlg) {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*=border-left-] {
|
||||
.border-left-radius(0);
|
||||
|
||||
&:not(.border-left-lg):not(.border-left-xlg) {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*=border-right-] {
|
||||
.border-right-radius(0);
|
||||
|
||||
&:not(.border-right-lg):not(.border-right-xlg) {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panel contents
|
||||
// -------------------------
|
||||
|
||||
.panel-body {
|
||||
position: relative;
|
||||
|
||||
.panel-flat > .panel-heading + & {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Panel heading
|
||||
// -------------------------
|
||||
|
||||
// Base class
|
||||
.panel-heading {
|
||||
position: relative;
|
||||
padding-top: @content-padding-large;
|
||||
padding-bottom: @content-padding-large;
|
||||
.border-top-radius(@border-radius-base);
|
||||
|
||||
// Bordered panel
|
||||
.panel-bordered > & {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// In flat panel it is higher
|
||||
.panel-flat > & {
|
||||
background-color: @panel-bg;
|
||||
|
||||
// Add extra vertical spacing for title
|
||||
> .panel-title {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
// Remove top padding in panel tabs content
|
||||
+ .tab-content > .has-padding {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 & {
|
||||
.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;
|
||||
|
||||
// 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;
|
||||
.border-bottom-radius(@border-radius-base);
|
||||
|
||||
// Clearing floats
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Components
|
||||
.form-control,
|
||||
.selectboxit-btn,
|
||||
.multiselect.btn-default,
|
||||
.bootstrap-select .btn-default,
|
||||
.select2-selection--single:not([class*=bg-]):not([class*=border-]) {
|
||||
border-bottom-color: transparent!important;
|
||||
.box-shadow(none)!important;
|
||||
}
|
||||
|
||||
// Mobile view
|
||||
@media (max-width: @screen-xs-max) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
margin-left: @content-padding-large;
|
||||
margin-right: @content-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
|
||||
.panel {
|
||||
> .panel-body + .table,
|
||||
> .panel-body + .table-responsive {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
// -------------------------
|
||||
|
||||
// Default
|
||||
.panel-default {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
// Primary
|
||||
.panel-primary {
|
||||
border-color: transparent;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-primary-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
.panel-success {
|
||||
border-color: transparent;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-success-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
.panel-info {
|
||||
border-color: transparent;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-info-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning
|
||||
.panel-warning {
|
||||
border-color: transparent;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-warning-border;
|
||||
}
|
||||
}
|
||||
|
||||
// Danger
|
||||
.panel-danger {
|
||||
border-color: transparent;
|
||||
|
||||
&.panel-bordered {
|
||||
border-color: @panel-danger-border;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user