//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;
|
color: #4D5C73;
|
}
|
.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();
|
