drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Tooltip component

Browse source 
add Tooltip component
This commit is contained in:
梁灏 2016-10-26 10:03:16 +08:00
parent 20559d34be
commit dce3e7536d
11 changed files with 403 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

3
styles/components/index.less
View file

@ -21,4 +21,5 @@
@import "steps";
@import "modal";
@import "select";
@import "select-dropdown";
@import "select-dropdown";
@import "tooltip";

142
styles/components/tooltip.less Normal file
View file

@ -0,0 +1,142 @@
@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
.@{tooltip-prefix-cls} {
display: inline-block;
&-popper{
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
}
&-inner{
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 10px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
}
&-arrow{
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&-placement-top,
&-placement-top-start,
&-placement-top-end {
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
}
&-placement-right,
&-placement-right-start,
&-placement-right-end {
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
}
&-placement-bottom,
&-placement-bottom-start,
&-placement-bottom-end {
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
}
&-placement-left,
&-placement-left-start,
&-placement-left-end {
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
}
&-placement-top &-arrow,
&-placement-top-start &-arrow,
&-placement-top-end &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
}
&-placement-top &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-top-start &-arrow {
left: 16px;
}
&-placement-top-end &-arrow {
right: 16px;
}
&-placement-right &-arrow,
&-placement-right-start &-arrow,
&-placement-right-end &-arrow {
left: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
}
&-placement-right &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-right-start &-arrow {
top: 8px;
}
&-placement-right-end &-arrow {
bottom: 8px;
}
&-placement-left &-arrow,
&-placement-left-start &-arrow,
&-placement-left-end &-arrow {
right: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
}
&-placement-left &-arrow {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&-placement-left-start &-arrow {
top: 8px;
}
&-placement-left-end &-arrow {
bottom: 8px;
}
&-placement-bottom &-arrow,
&-placement-bottom-start &-arrow,
&-placement-bottom-end &-arrow {
top: @tooltip-distance - @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
}
&-placement-bottom &-arrow {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&-placement-bottom-start &-arrow {
left: 16px;
}
&-placement-bottom-end &-arrow {
right: 16px;
}
}

4
styles/themes/default/custom.less
View file

@ -11,6 +11,7 @@
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
// Base
@body-background : #fff;
@ -18,6 +19,7 @@
@code-family : Consolas,Menlo,Courier,monospace;
@text-color : #525558;
@font-size-base : 14px;
@font-size-small : 12px;
@line-height-base : 1.5;
@line-height-computed : floor((@font-size-base * @line-height-base));
@border-radius-base : 6px;
@ -31,6 +33,7 @@
// Background color
@background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg : #373737;
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@ -108,6 +111,7 @@
@zindex-modal : 1000;
@zindex-message : 1010;
@zindex-notification : 1010;
@zindex-tooltip : 1060;
@zindex-loading-bar : 2000;
// Animation