//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();