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

add Poptip component

Browse source 
add Poptip component
This commit is contained in:
梁灏 2016-10-27 10:30:32 +08:00
parent 4dfacfca66
commit 9699c270dc
14 changed files with 420 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

3
styles/components/index.less
View file

@ -22,4 +22,5 @@
@import "modal";
@import "select";
@import "select-dropdown";
@import "tooltip";
@import "tooltip";
@import "poptip";

124
styles/components/poptip.less Normal file
View file

@ -0,0 +1,124 @@
@poptip-prefix-cls: ~"@{css-prefix}poptip";
@poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
@poptip-max-width: 250px;
@poptip-arrow-width: 5px;
@poptip-arrow-outer-width: (@poptip-arrow-width + 1);
@poptip-distance: @poptip-arrow-width - 1 + 4;
//@poptip-arrow-color: fadein(@border-color-base, 5%);
@poptip-arrow-color: hsla(0,0%,85%,.5);
.@{poptip-prefix-cls} {
display: inline-block;
&-rel{
display: inline-block;
position: relative;
}
&-title {
margin: 0;
padding: 0 16px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid @border-color-split;
color: #666;
}
&-body{
padding: 8px 16px;
}
&-popper{
min-width: 150px;
font-size: @font-size-small;
.popper(@poptip-arrow, @poptip-arrow-width, @poptip-distance, @poptip-arrow-color);
&[x-placement^="top"] .@{poptip-arrow}:after {
content: " ";
bottom: 1px;
margin-left: -@poptip-arrow-width;
border-bottom-width: 0;
border-top-color: #fff;
}
&[x-placement^="right"] .@{poptip-arrow}:after {
content: " ";
left: 1px;
bottom: -@poptip-arrow-width;
border-left-width: 0;
border-right-color: #fff;
}
&[x-placement^="bottom"] .@{poptip-arrow}:after {
content: " ";
top: 1px;
margin-left: -@poptip-arrow-width;
border-top-width: 0;
border-bottom-color: #fff;
}
&[x-placement^="left"] .@{poptip-arrow}:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #fff;
bottom: -@poptip-arrow-width;
}
}
&-inner{
width: 100%;
background-color: #fff;
background-clip: padding-box;
border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
}
&-arrow{
&, &:after{
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
}
}
&-arrow {
border-width: @poptip-arrow-outer-width;
}
&-arrow:after{
content: "";
border-width: @poptip-arrow-width;
}
&-confirm &-popper{
max-width: 300px;
}
&-confirm &-inner{
white-space: normal;
}
&-confirm &-body{
padding: 16px 16px 8px;
.ivu-icon{
color: @warning-color;
line-height: 17px;
position: absolute;
}
&-message{
padding-left: 20px;
}
}
&-confirm &-footer{
text-align: right;
padding: 8px 16px 16px;
button {
margin-left: 4px;
}
}
}

84
styles/components/tooltip.less
View file

@ -13,89 +13,7 @@
}
&-popper{
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
&[x-placement^="top"] {
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
}
&[x-placement^="right"] {
padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
}
&[x-placement^="bottom"] {
padding: @tooltip-distance 0 @tooltip-arrow-width 0;
}
&[x-placement^="left"] {
padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
}
&[x-placement^="top"] .@{tooltip-arrow} {
bottom: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
}
&[x-placement="top"] .@{tooltip-arrow} {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&[x-placement="top-start"] .@{tooltip-arrow} {
left: 16px;
}
&[x-placement="top-end"] .@{tooltip-arrow} {
right: 16px;
}
&[x-placement^="right"] .@{tooltip-arrow} {
left: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
}
&[x-placement="right"] .@{tooltip-arrow} {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&[x-placement="right-start"] .@{tooltip-arrow} {
top: 8px;
}
&[x-placement="right-end"] .@{tooltip-arrow} {
bottom: 8px;
}
&[x-placement^="left"] .@{tooltip-arrow} {
right: @tooltip-distance - @tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
}
&[x-placement="left"] .@{tooltip-arrow} {
top: 50%;
margin-top: -@tooltip-arrow-width;
}
&[x-placement="left-start"] .@{tooltip-arrow} {
top: 8px;
}
&[x-placement="left-end"] .@{tooltip-arrow} {
bottom: 8px;
}
&[x-placement^="bottom"] .@{tooltip-arrow} {
top: @tooltip-distance - @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
}
&[x-placement="bottom"] .@{tooltip-arrow} {
left: 50%;
margin-left: -@tooltip-arrow-width;
}
&[x-placement="bottom-start"] .@{tooltip-arrow} {
left: 16px;
}
&[x-placement="bottom-end"] .@{tooltip-arrow} {
right: 16px;
}
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
}
&-inner{

3
styles/mixins/index.less
View file

@ -13,4 +13,5 @@
@import "input";
@import "breadcrumb";
@import "mask";
@import "content"; // card、modal
@import "content"; // card、modal
@import "tooltip";

85
styles/mixins/tooltip.less Normal file
View file

@ -0,0 +1,85 @@
.popper(@arrow, @arrow-width, @arrow-distance, @bg){
display: block;
visibility: visible;
font-size: @font-size-small;
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
&[x-placement^="top"] {
padding: @arrow-width 0 @arrow-distance 0;
}
&[x-placement^="right"] {
padding: 0 @arrow-width 0 @arrow-distance;
}
&[x-placement^="bottom"] {
padding: @arrow-distance 0 @arrow-width 0;
}
&[x-placement^="left"] {
padding: 0 @arrow-distance 0 @arrow-width;
}
&[x-placement^="top"] .@{arrow} {
bottom: @arrow-distance - @arrow-width;
border-width: @arrow-width @arrow-width 0;
border-top-color: @bg;
}
&[x-placement="top"] .@{arrow} {
left: 50%;
margin-left: -@arrow-width;
}
&[x-placement="top-start"] .@{arrow} {
left: 16px;
}
&[x-placement="top-end"] .@{arrow} {
right: 16px;
}
&[x-placement^="right"] .@{arrow} {
left: @arrow-distance - @arrow-width;
border-width: @arrow-width @arrow-width @arrow-width 0;
border-right-color: @bg;
}
&[x-placement="right"] .@{arrow} {
top: 50%;
margin-top: -@arrow-width;
}
&[x-placement="right-start"] .@{arrow} {
top: 8px;
}
&[x-placement="right-end"] .@{arrow} {
bottom: 8px;
}
&[x-placement^="left"] .@{arrow} {
right: @arrow-distance - @arrow-width;
border-width: @arrow-width 0 @arrow-width @arrow-width;
border-left-color: @bg;
}
&[x-placement="left"] .@{arrow} {
top: 50%;
margin-top: -@arrow-width;
}
&[x-placement="left-start"] .@{arrow} {
top: 8px;
}
&[x-placement="left-end"] .@{arrow} {
bottom: 8px;
}
&[x-placement^="bottom"] .@{arrow} {
top: @arrow-distance - @arrow-width;
border-width: 0 @arrow-width @arrow-width;
border-bottom-color: @bg;
}
&[x-placement="bottom"] .@{arrow} {
left: 50%;
margin-left: -@arrow-width;
}
&[x-placement="bottom-start"] .@{arrow} {
left: 16px;
}
&[x-placement="bottom-end"] .@{arrow} {
right: 16px;
}
}