665 lines
11 KiB
Text
665 lines
11 KiB
Text
|
|
/* widget boxes */
|
|
.widget-box {
|
|
padding:0;
|
|
.box-shadow(none);
|
|
margin:3px 0;
|
|
|
|
border-bottom:1px solid #CCC;
|
|
}
|
|
|
|
@media only screen and (max-width: @screen-xs-max) {
|
|
.widget-box {
|
|
margin-top:7px;
|
|
margin-bottom:7px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.widget-header {
|
|
.box-sizing(content-box);
|
|
|
|
position:relative;
|
|
min-height:38px;
|
|
|
|
background:mix(#FFFFFF , #EEEEEE);
|
|
#gradient > .vertical(#FFFFFF , #EEEEEE);
|
|
|
|
color:@widget-header-color;
|
|
|
|
border:1px solid #CCC;
|
|
border-bottom:1px solid #DDD;
|
|
|
|
padding-left:12px;
|
|
|
|
&:before, &:after {
|
|
content: "";
|
|
display: table;
|
|
line-height: 0;
|
|
}
|
|
&:after {
|
|
clear:right;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.collapsed {
|
|
.widget-header { border-bottom-width:0; }
|
|
.widget-body { display:none; }
|
|
}
|
|
|
|
|
|
.widget-header-flat {
|
|
background:#F7F7F7;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
}
|
|
.widget-header-large {
|
|
min-height:49px;
|
|
padding-left:18px;
|
|
}
|
|
.widget-header-small {
|
|
min-height:31px;
|
|
padding-left:10px;
|
|
}
|
|
|
|
|
|
.widget-header > .widget-caption , .widget-header > :first-child {
|
|
line-height:36px;
|
|
padding:0;
|
|
margin:0;
|
|
display:inline;
|
|
|
|
> [class*="icon-"] {
|
|
margin-right:5px;
|
|
font-weight:normal;
|
|
//font-size:110%;
|
|
display:inline-block;
|
|
}
|
|
}
|
|
.widget-header-large > .widget-caption , .widget-header-large > :first-child {
|
|
line-height:48px;
|
|
}
|
|
.widget-header-small > .widget-caption , .widget-header-small > :first-child {
|
|
line-height:30px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.widget-toolbar {
|
|
display:inline-block;
|
|
padding:0 10px;
|
|
line-height:37px;
|
|
float:right;
|
|
position:relative;
|
|
|
|
.widget-header-large > & {
|
|
line-height:48px;
|
|
}
|
|
.widget-header-small > & {
|
|
line-height:29px;
|
|
}
|
|
|
|
&.no-padding {
|
|
padding:0;
|
|
}
|
|
&.padding-5 {
|
|
padding:0 5px;
|
|
}
|
|
|
|
&:before {/* border on left ot it! */
|
|
display:inline-block;
|
|
content:"";
|
|
position:absolute; top:3px; bottom:3px; left:-1px;
|
|
border:1px solid #D9D9D9;
|
|
border-width:0 1px 0 0;
|
|
|
|
.widget-header-large > & {
|
|
top:6px; bottom:6px;
|
|
}
|
|
[class*="header-color-"] > & {
|
|
border-color:#EEE;
|
|
}
|
|
.header-color-orange > & {
|
|
border-color:#FEA;
|
|
}
|
|
.header-color-dark > & {
|
|
border-color:#222;
|
|
box-shadow:-1px 0 0 rgba(255, 255, 255, 0.2) , inset 1px 0 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
&.no-border:before {
|
|
display:none;
|
|
}
|
|
|
|
label {
|
|
display:inline-block;
|
|
vertical-align:middle;
|
|
margin-bottom:0;
|
|
}
|
|
|
|
/* widget toolbar basic buttons */
|
|
> a {
|
|
font-size:14px;
|
|
margin:0 1px;
|
|
display:inline-block;
|
|
padding:0;
|
|
line-height:24px;
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
|
|
.widget-header-large > & {
|
|
font-size:15px;
|
|
margin:0 1px;
|
|
}
|
|
}
|
|
|
|
|
|
/* toolbar buttons */
|
|
> .btn {
|
|
line-height:27px;
|
|
margin-top:-2px;
|
|
&.smaller { line-height:26px; }
|
|
&.bigger { line-height:28px; }
|
|
}
|
|
> .btn-sm {
|
|
line-height:24px;
|
|
&.smaller { line-height:23px; }
|
|
&.bigger { line-height:25px; }
|
|
}
|
|
> .btn-xs {
|
|
line-height:22px;
|
|
&.smaller { line-height:21px; }
|
|
&.bigger { line-height:23px; }
|
|
}
|
|
> .btn-minier {
|
|
line-height:18px;
|
|
&.smaller { line-height:17px; }
|
|
&.bigger { line-height:19px; }
|
|
}
|
|
> .btn-lg {
|
|
line-height:36px;
|
|
&.smaller { line-height:34px; }
|
|
&.bigger { line-height:38px; }
|
|
}
|
|
|
|
}
|
|
|
|
.widget-toolbar-dark {
|
|
background:#444;
|
|
}
|
|
.widget-toolbar-light {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* widget-toolbar buttons*/
|
|
.widget-toolbar > [data-action] {
|
|
> [class*="icon-"] {
|
|
margin-right:0;
|
|
}
|
|
&:focus {
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
[class*="header-color-"] > .widget-toolbar {
|
|
> [data-action] { text-shadow:0px 1px 1px rgba(0,0,0,0.2); }
|
|
> [data-action="settings"] { color:#D3E4ED; }
|
|
> [data-action="reload"] { color:#DEEAD3; }
|
|
> [data-action="collapse"] { color:#E2E2E2; }
|
|
> [data-action="close"] { color:#FFD9D5; }
|
|
}
|
|
.header-color-orange > .widget-toolbar {
|
|
> [data-action] { text-shadow:none; }
|
|
> [data-action="settings"] { color:#559AAB; }
|
|
> [data-action="reload"] { color:#7CA362; }
|
|
> [data-action="collapse"] { color:#777777; }
|
|
> [data-action="close"] { color:#A05656; }
|
|
}
|
|
.widget-toolbar {
|
|
& , .header-color-dark > & {
|
|
> [data-action="settings"] { color:#99CADB; }
|
|
> [data-action="reload"] { color:#ACD392; }
|
|
> [data-action="collapse"] { color:#AAAAAA; }
|
|
> [data-action="close"] { color:#E09E96; }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.widget-body {
|
|
border:1px solid #CCC;
|
|
border-top:none;
|
|
background-color:#FFF;
|
|
}
|
|
.widget-main {
|
|
padding:12px;
|
|
}
|
|
.widget-main {
|
|
.widget-paddingX (@index) when (@index >= 0) {
|
|
&.padding-@{index} { padding:unit(@index,px); }
|
|
.widget-paddingX(@index - 2);
|
|
}
|
|
.widget-paddingX(32);
|
|
&.no-padding { padding:0; }
|
|
}
|
|
|
|
|
|
.widget-toolbar .progress {
|
|
vertical-align:middle;
|
|
display:inline-block;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
|
|
/* toolbar dropdowns */
|
|
.widget-toolbar > .dropdown , .widget-toolbar > .dropup{
|
|
display:inline-block;
|
|
}
|
|
.widget-toolbar > .dropdown > .dropdown-menu:before , .dropdown-menu.dropdown-caret:before {
|
|
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
content: "";
|
|
display: inline-block;
|
|
left: 9px;
|
|
position: absolute;
|
|
top: -7px;
|
|
}
|
|
.widget-toolbar > .dropdown > .dropdown-menu:after, .dropdown-menu.dropdown-caret:after {
|
|
border-bottom: 6px solid #FFFFFF;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
content: "";
|
|
display: inline-block;
|
|
left: 10px;
|
|
position: absolute;
|
|
top: -6px;
|
|
}
|
|
|
|
.widget-toolbar > .dropdown > .dropdown-menu.pull-right:before, .dropdown-menu.pull-right.dropdown-caret:before {
|
|
left: auto;
|
|
right:9px;
|
|
}
|
|
.widget-toolbar > .dropdown > .dropdown-menu.pull-right:after, .dropdown-menu.pull-right.dropdown-caret:after {
|
|
left: auto;
|
|
right:10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* widget header colors */
|
|
.widget-header[class*="header-color-"] {
|
|
color:#FFF;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
}
|
|
|
|
|
|
//widget color
|
|
.widget-color(@color) {
|
|
@widget-class:~`"header-color-@{color}"`;
|
|
@widget-bg:~`"widget-@{color}"`;
|
|
@widget-cl:@@widget-bg;
|
|
|
|
.@{widget-class} {
|
|
background:@widget-cl;
|
|
border-color:@widget-cl;
|
|
+ .widget-body {
|
|
border-color:@widget-cl;
|
|
}
|
|
}
|
|
}
|
|
.widget-color(~"blue");
|
|
.widget-color(~"blue2");
|
|
.widget-color(~"blue3");
|
|
.widget-color(~"green");
|
|
.widget-color(~"green2");
|
|
.widget-color(~"green3");
|
|
.widget-color(~"red");
|
|
.widget-color(~"red2");
|
|
.widget-color(~"red3");
|
|
.widget-color(~"purple");
|
|
.widget-color(~"pink");
|
|
|
|
.header-color-orange {
|
|
background:@widget-orange;
|
|
border-color:@widget-orange-border;
|
|
color:@widget-orange-txt !important;
|
|
+ .widget-body {
|
|
border-color:@widget-orange-border;
|
|
}
|
|
}
|
|
|
|
.header-color-dark {
|
|
background:@widget-dark;
|
|
border-color:lighten(@widget-dark, 2%);
|
|
+ .widget-body {
|
|
border-color:lighten(@widget-dark, 15%);
|
|
}
|
|
}
|
|
|
|
.header-color-grey {
|
|
background:@widget-grey;
|
|
border-color:lighten(@widget-grey, 8%);
|
|
+ .widget-body {
|
|
border-color:lighten(@widget-grey, 15%);
|
|
}
|
|
}
|
|
|
|
|
|
/* different borders */
|
|
.widget-box.light-border > [class*="header-color-"] + .widget-body {
|
|
border-color:#D6D6D6 !important;
|
|
}
|
|
.widget-box.no-border {
|
|
border-bottom:none;
|
|
> .widget-body{
|
|
border:none;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/* transparent box */
|
|
.widget-box.transparent {
|
|
border:none;
|
|
box-shadow:none;
|
|
|
|
> .widget-header {
|
|
background:none;
|
|
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
|
|
border:none;
|
|
border-bottom:1px solid #DCE8F1;
|
|
color:#4383B4;
|
|
|
|
padding-left:3px;
|
|
}
|
|
> .widget-header-large {
|
|
padding-left:5px;
|
|
}
|
|
> .widget-header-small {
|
|
padding-left:1px;
|
|
}
|
|
|
|
.widget-body {
|
|
border:none;
|
|
background-color:transparent;
|
|
}
|
|
.widget-main {
|
|
&.no-padding-left { padding-left:0; }
|
|
&.no-padding-right { padding-right:0; }
|
|
&.no-padding-top { padding-top:0; }
|
|
&.no-padding-bottom { padding-bottom:0; }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* table in widget */
|
|
.widget-body .table {
|
|
border-top:1px solid #E5E5E5;
|
|
|
|
thead:first-child tr {
|
|
background:#FFF;
|
|
[class*="header-color-"] + & {
|
|
background : mix(#F8F8F8 , #ECECEC);
|
|
#gradient > .vertical(#F8F8F8 , #ECECEC);
|
|
}
|
|
}
|
|
&.table-bordered thead:first-child > tr {
|
|
border-top:none;
|
|
}
|
|
|
|
}
|
|
|
|
.widget-main.no-padding , .widget-main.padding-0 {
|
|
.table {
|
|
margin-bottom:0;
|
|
border:none;
|
|
}
|
|
.table-bordered th:first-child,
|
|
.table-bordered td:first-child {
|
|
border-left-width:0;
|
|
}
|
|
|
|
}
|
|
|
|
.transparent .widget-main , .widget-main.no-padding {
|
|
.table-bordered > thead > tr > th:last-child, .table-bordered > tbody > tr > td:last-child, .table-bordered > tfoot > tr > td:last-child {
|
|
border-right-width: 0 !important;
|
|
}
|
|
}
|
|
.transparent .widget-main , .widget-main.no-padding {
|
|
.table-bordered > tbody > tr:last-child > td {
|
|
border-bottom-width: 0 !important;
|
|
}
|
|
}
|
|
.table-bordered > thead.thin-border-bottom > tr > th, .table-bordered > thead.thin-border-bottom > tr > td {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
|
|
|
|
/* elements in widget */
|
|
.widget-body .alert:last-child {
|
|
margin-bottom:0;
|
|
}
|
|
|
|
|
|
/* tabs in widget */
|
|
.widget-main .tab-content {
|
|
border:none;
|
|
}
|
|
.widget-toolbar > .nav-tabs {
|
|
border-bottom:none;
|
|
margin-bottom:0;
|
|
position:relative; top:5px;
|
|
|
|
> li > a {
|
|
box-shadow:none;
|
|
}
|
|
> li:not(.active) > a{
|
|
border-color:transparent;
|
|
background-color:transparent;
|
|
&:hover {
|
|
background-color:transparent;
|
|
}
|
|
}
|
|
> li.active > a {
|
|
background-color:#FFF;
|
|
border-bottom-color:transparent;
|
|
box-shadow:none;
|
|
}
|
|
|
|
|
|
.widget-header-small > & {
|
|
top:5px;
|
|
> li > a {
|
|
line-height:16px;
|
|
padding-top:6px; padding-bottom:6px;
|
|
}
|
|
> li.active > a {
|
|
border-top-width:2px;
|
|
margin-top:-1px;
|
|
}
|
|
}
|
|
|
|
.widget-header-large > & {
|
|
top:8px;
|
|
> li > a {
|
|
line-height:22px;
|
|
padding-top:9px; padding-bottom:9px;
|
|
}
|
|
}
|
|
|
|
|
|
[class*="header-color-"] > & {
|
|
> li > a {
|
|
border-color:transparent;
|
|
background-color:transparent;
|
|
color:#FFF;
|
|
margin-right:1px;
|
|
&:hover {
|
|
background-color:#FFF;
|
|
color:#555;
|
|
border-top-color:#FFF;
|
|
}
|
|
}
|
|
> li.active > a {
|
|
background-color:#FFF;
|
|
color:#555;
|
|
border-top-width:1px;
|
|
margin-top:0;
|
|
}
|
|
}
|
|
.header-color-orange > & > li > a{
|
|
color:#855D10;
|
|
}
|
|
|
|
|
|
.transparent & {
|
|
> li > a {
|
|
color:#555;
|
|
background-color:transparent;
|
|
border-right:1px solid transparent;
|
|
border-left:1px solid transparent;
|
|
}
|
|
> li.active > a {
|
|
border-top-color:#4C8FBD;
|
|
border-right:1px solid #C5D0DC;
|
|
border-left:1px solid #C5D0DC;
|
|
background-color:#FFF;
|
|
box-shadow:none;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* toolbox */
|
|
.widget-toolbox {
|
|
background-color:#EEE;
|
|
|
|
&:first-child {/* the toolbox coming before content */
|
|
padding:2px;
|
|
border-bottom:1px solid #CCC;
|
|
}
|
|
&:last-child {/* the toolbox coming after content */
|
|
padding:2px;
|
|
border-top:1px solid #CCC;
|
|
|
|
.transparent & {
|
|
border:none;
|
|
border-top:1px solid #CCC;
|
|
}
|
|
}
|
|
|
|
> .btn-toolbar {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
&.center {
|
|
text-align:center;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.widget-toolbox {
|
|
.widget-paddingX (@index) when (@index >= 0) {
|
|
&.padding-@{index} { padding:unit(@index,px); }
|
|
.widget-paddingX(@index - 2);
|
|
}
|
|
.widget-paddingX(16);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*when clicking refresh*/
|
|
.widget-box-overlay {
|
|
position:absolute;
|
|
top:0;bottom:0;right:0;left:0;
|
|
background-color:rgba(0,0,0,0.3);
|
|
|
|
z-index: 21;
|
|
|
|
|
|
> [class*="icon-"] {
|
|
position:absolute;
|
|
top:15%;
|
|
left:0; right:0;
|
|
text-align:center;
|
|
|
|
.widget-box.collapsed & {
|
|
top: 5%;
|
|
}
|
|
}
|
|
|
|
> .icon-spin {
|
|
.animation-duration(1.2s);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* simple forms in widgetboxes */
|
|
.widget-main {
|
|
> form {
|
|
margin-bottom:0;
|
|
.input-append , .input-prepend {
|
|
margin-bottom:0;
|
|
}
|
|
}
|
|
|
|
&.no-padding, &.padding-0 {
|
|
> form {
|
|
> fieldset {
|
|
padding:16px;
|
|
+ .form-actions {
|
|
padding:10px 0 12px;
|
|
}
|
|
}
|
|
> .form-actions {
|
|
margin:0;
|
|
padding:10px 12px 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* for dragging and dropping */
|
|
.widget-placeholder {
|
|
border:2px dashed #D9D9D9;
|
|
}
|
|
|