Skip to content
GitLab
Commit b8b266ca authored by Mark Otto's avatar Mark Otto
Browse files

popovers and tooltips vars

parent e34b3730
Hide whitespace changes
Inline Side-by-side
Showing
with 107 additions and 107 deletions
+107 -107
docs/assets/css/bootstrap.css
+ 29
- 29
View file @ b8b266ca
...@@ -4663,57 +4663,57 @@ input[type="button"].btn-block { ...@@ -4663,57 +4663,57 @@ input[type="button"].btn-block {
.popover { .popover {
/* /*
&.top .arrow { &.top .arrow {
bottom: -@popoverArrowWidth; bottom: -@popover-arrow-width;
left: 50%; left: 50%;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-width: @popoverArrowWidth @popoverArrowWidth 0; border-width: @popover-arrow-width @popover-arrow-width 0;
//border-top-color: @popoverArrowColor; //border-top-color: @popover-arrow-color;
border-top-color: blue; border-top-color: blue;
&:after { &:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; border-width: @popover-arrow-outer-width @popover-arrow-outer-width 0;
//border-top-color: @popoverArrowOuterColor; //border-top-color: @popover-arrow-outer-color;
border-top-color: red; border-top-color: red;
top: -@popoverArrowWidth; top: -@popover-arrow-width;
//bottom: -1px; //bottom: -1px;
left: -@popoverArrowOuterWidth; left: -@popover-arrow-outer-width;
} }
} }
&.right .arrow { &.right .arrow {
top: 50%; top: 50%;
left: -@popoverArrowWidth; left: -@popover-arrow-width;
margin-top: -@popoverArrowWidth; margin-top: -@popover-arrow-width;
border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; border-width: @popover-arrow-width @popover-arrow-width @popover-arrow-width 0;
border-right-color: @popoverArrowColor; border-right-color: @popover-arrow-color;
&:after { &:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; border-width: @popover-arrow-outer-width @popover-arrow-outer-width @popover-arrow-outer-width 0;
border-right-color: @popoverArrowOuterColor; border-right-color: @popover-arrow-outer-color;
bottom: -@popoverArrowOuterWidth; bottom: -@popover-arrow-outer-width;
left: -1px; left: -1px;
} }
} }
&.bottom .arrow { &.bottom .arrow {
top: -@popoverArrowWidth; top: -@popover-arrow-width;
left: 50%; left: 50%;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-width: 0 @popoverArrowWidth @popoverArrowWidth; border-width: 0 @popover-arrow-width @popover-arrow-width;
border-bottom-color: @popoverArrowColor; border-bottom-color: @popover-arrow-color;
&:after { &:after {
border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-width: 0 @popover-arrow-outer-width @popover-arrow-outer-width;
border-bottom-color: @popoverArrowOuterColor; border-bottom-color: @popover-arrow-outer-color;
top: -1px; top: -1px;
left: -@popoverArrowOuterWidth; left: -@popover-arrow-outer-width;
} }
} }
&.left .arrow { &.left .arrow {
top: 50%; top: 50%;
right: -@popoverArrowWidth; right: -@popover-arrow-width;
margin-top: -@popoverArrowWidth; margin-top: -@popover-arrow-width;
border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; border-width: @popover-arrow-width 0 @popover-arrow-width @popover-arrow-width;
border-left-color: @popoverArrowColor; border-left-color: @popover-arrow-color;
&:after { &:after {
border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-width: @popover-arrow-outer-width 0 @popover-arrow-outer-width @popover-arrow-outer-width;
border-left-color: @popoverArrowOuterColor; border-left-color: @popover-arrow-outer-color;
bottom: -@popoverArrowOuterWidth; bottom: -@popover-arrow-outer-width;
right: -1px; right: -1px;
} }
}*/ }*/
......
less/popovers.less
+ 54
- 54
View file @ b8b266ca
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
display: none; display: none;
width: 236px; width: 236px;
padding: 1px; padding: 1px;
background-color: @popoverBackground; background-color: @popover-background;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-moz-background-clip: padding; -moz-background-clip: padding;
background-clip: padding-box; background-clip: padding-box;
...@@ -36,8 +36,8 @@ ...@@ -36,8 +36,8 @@
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
background-color: @popoverTitleBackground; background-color: @popover-title-background;
border-bottom: 1px solid darken(@popoverTitleBackground, 5%); border-bottom: 1px solid darken(@popover-title-background, 5%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
} }
...@@ -62,69 +62,69 @@ ...@@ -62,69 +62,69 @@
border-style: solid; border-style: solid;
} }
.popover .arrow { .popover .arrow {
border-width: @popoverArrowOuterWidth; border-width: @popover-arrow-outer-width;
} }
.popover .arrow:after { .popover .arrow:after {
border-width: @popoverArrowWidth; border-width: @popover-arrow-width;
content: ""; content: "";
} }
.popover { .popover {
&.top .arrow { &.top .arrow {
left: 50%; left: 50%;
margin-left: -@popoverArrowOuterWidth; margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: #999; // IE8 fallback border-top-color: #999; // IE8 fallback
border-top-color: @popoverArrowOuterColor; border-top-color: @popover-arrow-outer-color;
bottom: -@popoverArrowOuterWidth; bottom: -@popover-arrow-outer-width;
&:after { &:after {
bottom: 1px; bottom: 1px;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-bottom-width: 0; border-bottom-width: 0;
border-top-color: @popoverArrowColor; border-top-color: @popover-arrow-color;
} }
} }
&.right .arrow { &.right .arrow {
top: 50%; top: 50%;
left: -@popoverArrowOuterWidth; left: -@popover-arrow-outer-width;
margin-top: -@popoverArrowOuterWidth; margin-top: -@popover-arrow-outer-width;
border-left-width: 0; border-left-width: 0;
border-right-color: #999; // IE8 fallback border-right-color: #999; // IE8 fallback
border-right-color: @popoverArrowOuterColor; border-right-color: @popover-arrow-outer-color;
&:after { &:after {
left: 1px; left: 1px;
bottom: -@popoverArrowWidth; bottom: -@popover-arrow-width;
border-left-width: 0; border-left-width: 0;
border-right-color: @popoverArrowColor; border-right-color: @popover-arrow-color;
} }
} }
&.bottom .arrow { &.bottom .arrow {
left: 50%; left: 50%;
margin-left: -@popoverArrowOuterWidth; margin-left: -@popover-arrow-outer-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: #999; // IE8 fallback border-bottom-color: #999; // IE8 fallback
border-bottom-color: @popoverArrowOuterColor; border-bottom-color: @popover-arrow-outer-color;
top: -@popoverArrowOuterWidth; top: -@popover-arrow-outer-width;
&:after { &:after {
top: 1px; top: 1px;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-top-width: 0; border-top-width: 0;
border-bottom-color: @popoverArrowColor; border-bottom-color: @popover-arrow-color;
} }
} }
&.left .arrow { &.left .arrow {
top: 50%; top: 50%;
right: -@popoverArrowOuterWidth; right: -@popover-arrow-outer-width;
margin-top: -@popoverArrowOuterWidth; margin-top: -@popover-arrow-outer-width;
border-right-width: 0; border-right-width: 0;
border-left-color: #999; // IE8 fallback border-left-color: #999; // IE8 fallback
border-left-color: @popoverArrowOuterColor; border-left-color: @popover-arrow-outer-color;
&:after { &:after {
right: 1px; right: 1px;
border-right-width: 0; border-right-width: 0;
border-left-color: @popoverArrowColor; border-left-color: @popover-arrow-color;
bottom: -@popoverArrowWidth; bottom: -@popover-arrow-width;
} }
} }
...@@ -132,57 +132,57 @@ ...@@ -132,57 +132,57 @@
/* /*
&.top .arrow { &.top .arrow {
bottom: -@popoverArrowWidth; bottom: -@popover-arrow-width;
left: 50%; left: 50%;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-width: @popoverArrowWidth @popoverArrowWidth 0; border-width: @popover-arrow-width @popover-arrow-width 0;
//border-top-color: @popoverArrowColor; //border-top-color: @popover-arrow-color;
border-top-color: blue; border-top-color: blue;
&:after { &:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; border-width: @popover-arrow-outer-width @popover-arrow-outer-width 0;
//border-top-color: @popoverArrowOuterColor; //border-top-color: @popover-arrow-outer-color;
border-top-color: red; border-top-color: red;
top: -@popoverArrowWidth; top: -@popover-arrow-width;
//bottom: -1px; //bottom: -1px;
left: -@popoverArrowOuterWidth; left: -@popover-arrow-outer-width;
} }
} }
&.right .arrow { &.right .arrow {
top: 50%; top: 50%;
left: -@popoverArrowWidth; left: -@popover-arrow-width;
margin-top: -@popoverArrowWidth; margin-top: -@popover-arrow-width;
border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; border-width: @popover-arrow-width @popover-arrow-width @popover-arrow-width 0;
border-right-color: @popoverArrowColor; border-right-color: @popover-arrow-color;
&:after { &:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; border-width: @popover-arrow-outer-width @popover-arrow-outer-width @popover-arrow-outer-width 0;
border-right-color: @popoverArrowOuterColor; border-right-color: @popover-arrow-outer-color;
bottom: -@popoverArrowOuterWidth; bottom: -@popover-arrow-outer-width;
left: -1px; left: -1px;
} }
} }
&.bottom .arrow { &.bottom .arrow {
top: -@popoverArrowWidth; top: -@popover-arrow-width;
left: 50%; left: 50%;
margin-left: -@popoverArrowWidth; margin-left: -@popover-arrow-width;
border-width: 0 @popoverArrowWidth @popoverArrowWidth; border-width: 0 @popover-arrow-width @popover-arrow-width;
border-bottom-color: @popoverArrowColor; border-bottom-color: @popover-arrow-color;
&:after { &:after {
border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-width: 0 @popover-arrow-outer-width @popover-arrow-outer-width;
border-bottom-color: @popoverArrowOuterColor; border-bottom-color: @popover-arrow-outer-color;
top: -1px; top: -1px;
left: -@popoverArrowOuterWidth; left: -@popover-arrow-outer-width;
} }
} }
&.left .arrow { &.left .arrow {
top: 50%; top: 50%;
right: -@popoverArrowWidth; right: -@popover-arrow-width;
margin-top: -@popoverArrowWidth; margin-top: -@popover-arrow-width;
border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; border-width: @popover-arrow-width 0 @popover-arrow-width @popover-arrow-width;
border-left-color: @popoverArrowColor; border-left-color: @popover-arrow-color;
&:after { &:after {
border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-width: @popover-arrow-outer-width 0 @popover-arrow-outer-width @popover-arrow-outer-width;
border-left-color: @popoverArrowOuterColor; border-left-color: @popover-arrow-outer-color;
bottom: -@popoverArrowOuterWidth; bottom: -@popover-arrow-outer-width;
right: -1px; right: -1px;
} }
}*/ }*/
......
less/tooltip.less
+ 14
- 14
View file @ b8b266ca
...@@ -23,10 +23,10 @@ ...@@ -23,10 +23,10 @@
.tooltip-inner { .tooltip-inner {
max-width: 200px; max-width: 200px;
padding: 3px 8px; padding: 3px 8px;
color: @tooltipColor; color: @tooltip-color;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: @tooltipBackground; background-color: @tooltip-background;
border-radius: @border-radius-base; border-radius: @border-radius-base;
} }
...@@ -42,29 +42,29 @@ ...@@ -42,29 +42,29 @@
&.top .tooltip-arrow { &.top .tooltip-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -@tooltipArrowWidth; margin-left: -@tooltip-arrow-width;
border-width: @tooltipArrowWidth @tooltipArrowWidth 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltipArrowColor; border-top-color: @tooltip-arrow-color;
} }
&.right .tooltip-arrow { &.right .tooltip-arrow {
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -@tooltipArrowWidth; margin-top: -@tooltip-arrow-width;
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltipArrowColor; border-right-color: @tooltip-arrow-color;
} }
&.left .tooltip-arrow { &.left .tooltip-arrow {
top: 50%; top: 50%;
right: 0; right: 0;
margin-top: -@tooltipArrowWidth; margin-top: -@tooltip-arrow-width;
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltipArrowColor; border-left-color: @tooltip-arrow-color;
} }
&.bottom .tooltip-arrow { &.bottom .tooltip-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -@tooltipArrowWidth; margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltipArrowColor; border-bottom-color: @tooltip-arrow-color;
} }
} }
less/variables.less
+ 10
- 10
View file @ b8b266ca
...@@ -229,19 +229,19 @@ ...@@ -229,19 +229,19 @@
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
@tooltipColor: #fff; @tooltip-color: #fff;
@tooltipBackground: rgba(0,0,0,.9); @tooltip-background: rgba(0,0,0,.9);
@tooltipArrowWidth: 5px; @tooltip-arrow-width: 5px;
@tooltipArrowColor: @tooltipBackground; @tooltip-arrow-color: @tooltip-background;
@popoverBackground: #fff; @popover-background: #fff;
@popoverArrowWidth: 10px; @popover-arrow-width: 10px;
@popoverArrowColor: #fff; @popover-arrow-color: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%); @popover-title-background: darken(@popover-background, 3%);
// Special enhancement for popovers // Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1; @popover-arrow-outer-width: @popover-arrow-width + 1;
@popoverArrowOuterColor: rgba(0,0,0,.25); @popover-arrow-outer-color: rgba(0,0,0,.25);
// Miscellaneous // Miscellaneous
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment