public.component.assets.css.less.widget.less Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of e-core-static Show documentation
e-core-static
There is a newer version: 3.0.1.11
.enable_widgets() when(@enable-widgets = true) {

//widget boxes
.widget-box {
 padding: 0;
 .box-shadow(none);
 margin: 3px 0;
 
 border: 1px solid #CCC;
 //border-bottom-width: 2px;
}

@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-bottom: 1px solid #DDD;

 padding-left: 12px;
 
 &:before, &:after {
    content: "";
    display: table;
    line-height: 0;
 }
 &:after {
	clear: right;
 }
}



.collapsed {
	//.widget-box& {border-bottom-width: 0px;}
	.widget-box& > .widget-header { border-bottom-width: 0; }
	&.fullscreen > .widget-header { border-bottom-width: 1px; }
	> .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-title {
 line-height: 36px;
 padding: 0;
 margin: 0;
 display: inline;

 > .@{icon} {
	margin-right: 5px;
	font-weight: normal;
	display: inline-block;
 } 
}
.widget-header-large > .widget-title {
 line-height: 48px;
}
.widget-header-small > .widget-title {
 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*="widget-color-"] > .widget-header > & {
		border-color:#EEE;
	}
	.widget-color-orange > .widget-header > & {
		border-color:#FEA;
	}
	.widget-color-dark > .widget-header > & {
		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 , > .widget-menu > a {
	font-size: @font-size-widget-toolbar-icon;
	margin: 0 1px;
	display: inline-block;
	padding: 0;
	line-height: 24px;

	&:hover {
		text-decoration: none;
	}
	
	.widget-header-large > & {
		font-size: floor(@font-size-widget-toolbar-icon * 1.1);
		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 > .widget-menu {
	display: inline-block;
	position: relative;
}
.widget-toolbar > a[data-action] , .widget-toolbar > .widget-menu > a[data-action] {
  .transition(~"transform 0.1s");
 
  > .@{icon} {
	margin-right: 0;
  }
  &:focus {
	text-decoration: none;
	outline: none;
  }
  &:hover {
	.transform(~"scale(1.2)");
  }
}




.widget-body {
  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-box , .widget-color-dark {
 > .widget-header > .widget-toolbar ,
 > .widget-header > .widget-toolbar > .widget-menu {
	> [data-action="settings"] {
		color: #99CADB;
	}
	> [data-action="reload"] {
		color: #ACD392;
	}
	> [data-action="collapse"] {
		color: #AAA;
	}
	> [data-action="close"] {
		color: #E09E96;
	}
 }
}


.enable_widget_colors() when(@enable-widget-colors = true) {

// widget header colors
.widget-box[class*="widget-color-"] > .widget-header {
	color: #FFF;
	filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}

//widget color
.widget-color(@color) {
  @widget-class:~`"widget-color-@{color}"`;
  @widget-bg:~`"widget-@{color}"`;
  @widget-cl:@@widget-bg;

  .@{widget-class} {
	 border-color: @widget-cl;
	 > .widget-header {
		background: @widget-cl;
		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");

.widget-color-orange {
  border-color:@widget-orange-border;
  > .widget-header {
	color:@widget-orange-txt !important;
	border-color:@widget-orange-border;
	background:@widget-orange;
  }
}

.widget-color-dark {
  border-color:lighten(@widget-dark, 10%);
  > .widget-header {
	border-color: lighten(@widget-dark, 15%);
	background: @widget-dark;
  }
}

.widget-color-grey {
  border-color: lighten(@widget-grey, 10%);
  > .widget-header {
	border-color:lighten(@widget-grey, 15%);
	background: @widget-grey;
  }
}



//transparent box
.widget-box.transparent {
 border-width: 0;

 > .widget-header {
	background: none;
	filter: ~"progid:DXImageTransform.Microsoft.gradient(enabled=false)";

	border-width: 0;
	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-width: 0;
	background-color: transparent;
 }
}



[class*="widget-color-"] > .widget-header > .widget-toolbar ,
[class*="widget-color-"] > .widget-header > .widget-toolbar > .widget-menu {
	> [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; 
	}
}
.widget-color-orange > .widget-header > .widget-toolbar ,
.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu {
	> [data-action] { 
		text-shadow: none; 
	}
	> [data-action="settings"] {
		color: #559AAB;
	}
	> [data-action="reload"] {
		color: #7CA362; 
	}
	> [data-action="collapse"] { 
		color: #777; 
	}
	> [data-action="close"] {
		color: #A05656;
	}
}


}
.enable_widget_colors();


//different borders
.widget-box.light-border[class*="widget-color-"]:not(.fullscreen) {
   border-width: 0;
 > .widget-header {
	border: 1px solid;
	border-color: inherit;
 }
 > .widget-body {
	border: 1px solid;
	border-color: #D6D6D6;
	border-width: 0 1px 1px;
 }
}
.widget-box.no-border {
  border-width: 0;
}

.widget-box.fullscreen {
  position: fixed;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  border-width: 3px;

  z-index: @zindex-navbar-fixed + 10;
  -moz-backface-visibility: hidden;
  
  &:not([class*="widget-color-"]) {
	border-color: #AAA;
  }
}



//table in widget
.widget-body .table {
  border-top: 1px solid #E5E5E5;

  thead:first-child tr {
	  background: #FFF;
	  [class*="widget-color-"] > & {
		 background : mix(#F8F8F8 , #ECECEC);
		 #gradient > .vertical(#F8F8F8 , #ECECEC);
	  }
  }
  &.table-bordered thead:first-child > tr {
		border-top-width: 0;
  }
}

.widget-main.no-padding {
  .table {
	margin-bottom: 0;
	border-width: 0;
  }
  .table-bordered th:first-child,
  .table-bordered td:first-child {
	border-left-width: 0;
  }
}

.transparent > .widget-body .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-body .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-width: 0;
}
.widget-toolbar > .nav-tabs {
  border-bottom-width: 0;
  margin-bottom: 0;
  top: auto;
  margin-top: 3px !important;//to override .RTL's
  
  > li {
	margin-bottom: auto;
  }
  > li > a {
	box-shadow: none;
	position: relative;
    top: 1px;
	margin-top: 1px;
  }
  > 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;
	margin-top: auto;
  }
  
  
  .widget-header-small > & {
	 > li > a {
		line-height:16px;
		padding-top:6px;
		padding-bottom:6px;
	 }
	 > li.active > a {
		border-top-width:2px;
	 }
  }
  
  .widget-header-large > & {
	 > li > a {
		line-height:22px;
		padding-top:9px;
		padding-bottom:9px;
		margin-top: 4px;
	 }
	 > li.active > a {
		margin-top: 3px;
	 }
  }
  
  
  [class*="widget-color-"] > .widget-header > & {
	> 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;
	}
  }
  .widget-color-orange > .widget-header > li > a {
		color:#855D10;
  }
  
  
  .transparent > .widget-header > & {
	> 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 > .widget-body > & {
			border:none;
			border-top:1px solid #CCC;
		}
	}

	> .btn-toolbar {
		margin: 0 !important;//to override .RTL's
		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: -1px;
 bottom: -1px;
 right: -1px;
 left: -1px;
 z-index: 999;
 
 text-align: center;
 min-height: 100%;

 background-color: rgba(0,0,0,0.3);
 > .loading-icon {
		position: relative;
		top: 20%;
		left: 0;
		right: 0; 
		text-align: center;

		.widget-box.collapsed  & {
			top: 10%;
		}
		
		&.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;
		}
	}
  }
}

}

.enable_widgets();


//for dragging and dropping using jQuery UI
.widget-placeholder {
  border: 2px dashed #D9D9D9;
}