tooltip-popover.less 4.08 KB
//tooltips and popovers

.enable_tooltips() when(@enable-tooltips = true) {

.tooltip.in {
	.opacity(1);
}

.tooltip-inner  {
	background-color: @tooltip-color;
	color: #FFF;
	font-size: @font-size-tooltip;
	//white-space: nowrap;

	text-shadow: 1px 1px 0 rgba(42,45,50,0.5);
	.border-radius(0);
	
	padding: 5px 9px;
}

.tooltip.top .tooltip-arrow {
  border-bottom-width: 0;
  border-top-color: @tooltip-color;
  -moz-border-top-colors: @tooltip-color;
}
.tooltip.right .tooltip-arrow {
  border-left-width: 0;
  border-right-color: @tooltip-color;
  -moz-border-right-colors: @tooltip-color;
}
.tooltip.left .tooltip-arrow {
  border-right-width: 0;
  border-left-color: @tooltip-color;
  -moz-border-left-colors: @tooltip-color;
}
.tooltip.bottom .tooltip-arrow {
  border-top-width: 0;
  border-bottom-color: @tooltip-color;
  -moz-border-bottom-colors: @tooltip-color;
}



.tooltip(@color , @shadow) {
  @tooltip_name : ~`".tooltip-@{color}"`;
  @tooltip_color : ~`"tooltip-@{color}-color"`;

  @{tooltip_name} + .tooltip , .tooltip@{tooltip_name} {
	> .tooltip-inner  {
		background-color: @@tooltip_color;
		text-shadow: @shadow;
	}
	&.top .tooltip-arrow {
		border-top-color: @@tooltip_color;
		-moz-border-top-colors: @@tooltip_color;
	}
	&.right .tooltip-arrow {
		border-right-color: @@tooltip_color;
		-moz-border-right-colors: @@tooltip_color;
	}
	&.left .tooltip-arrow {
		border-left-color: @@tooltip_color;
		-moz-border-left-colors: @@tooltip_color;
	}
	&.bottom .tooltip-arrow {
		border-bottom-color: @@tooltip_color;
		-moz-border-bottom-colors: @@tooltip_color;
	}
  }
}

.tooltip(error , ~"1px 1px 0 rgba(100,60,20,0.3)");
.tooltip(success , ~"1px 1px 0 rgba(60,100,20,0.3)");
.tooltip(warning , ~"1px 1px 0 rgba(100,90,10,0.3)");
.tooltip(info , ~"1px 1px 0 rgba(40,50,100,0.3)");

}
.enable_tooltips();


.enable_popovers() when(@enable-popovers = true) {
@popover-color: #EFF3F8;
@popover-error-color: #F7F0EF;
@popover-warning-color: #F4EEE3;
@popover-success-color: #E8F2E3;
@popover-info-color: #E5EDF8;


/* popover */
.popover {
	.border-radius(0);
	padding:0;
	border-color: #ccc;
	border-width: 1px;
	 
	.box-shadow(~"0 0 4px 2px rgba(0,0,0,0.2)");
	color: #4D6883;
}
.popover-title {
	border-radius: 0;
	background-color: @popover-color;
	color: #555;
	border-bottom: 1px solid darken(@popover-color, 5%);

	text-shadow: 1px 1px 1px rgba(220,220,220,0.2);
}
.popover.bottom > .arrow:after {
	top: 1px;
	margin-left: -10px;

	border-bottom-color: @popover-color;
	-moz-border-bottom-colors: @popover-color;

	border-top-width: 0;
}
.popover.left > .arrow:after {
	-moz-border-left-colors: #FFF;
}
.popover.right > .arrow:after {
	-moz-border-right-colors: #FFF;
}
.popover.top > .arrow:after {
	-moz-border-top-colors: #FFF;
}


.popover(@color , @text-color) {
  @popover_name : ~`".popover-@{color}"`;
  @popover_color : ~`"popover-@{color}-color"`;

  @{popover_name} + .popover , .popover@{popover_name} {
	border-color: @@popover_color;
	.popover-title {
		background-color: @@popover_color;
		border-bottom-color: darken(@@popover_color, 5%);
		color: @text-color;
		text-shadow: none;
	}

	&.top .arrow:after {
		border-top-color: @@popover_color;
		-moz-border-top-colors: @@popover_color;
	}
	&.bottom .arrow:after {
		border-bottom-color: @@popover_color;
		-moz-border-bottom-colors: @@popover_color;
	}
	&.right .arrow:after {
		border-right-color: @@popover_color;
		-moz-border-right-colors: @@popover_color;
	}
	&.left .arrow:after {
		border-left-color: @@popover_color;
		-moz-border-left-colors: @@popover_color;
	}

  }
}


.popover(error , #B75445);
.popover(warning , #D67E31);
.popover(success , @tooltip-success-color);
.popover(info , #3F79B6);

.popover-notitle + .popover , .popover.popover-notitle {
	.popover-title  {
		display:none;
	}
	&.top .arrow:after {
		border-top-color: #FFF;
		-moz-border-top-colors: #FFF;
	}
	&.bottom .arrow:after {
		border-bottom-color: #FFF;
		-moz-border-bottom-colors: #FFF;
	}
	&.left .arrow:after {
		border-left-color: #FFF;
		-moz-border-left-colors: #FFF;
	}
	&.right .arrow:after {
		border-right-color: #FFF;
		-moz-border-right-colors: #FFF;
	}
}

}
.enable_popovers();