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

Merge branch '2.0' into pr004

Browse source
This commit is contained in:
Aresn 2018-06-20 11:23:55 +08:00 • committed by GitHub
commit e9dc3c4289
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
177 changed files with 62359 additions and 18930 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/styles/components/anchor.less Normal file
View file

@ -0,0 +1,75 @@
@anchor-prefix: ~"@{css-prefix}anchor";
.@{anchor-prefix}{
&-wrapper{
background-color: @body-background;
overflow: auto;
padding-left: 4px;
margin-left: -4px;
}
&{
position: relative;
padding-left: @anchor-border-width;
&-ink {
position: absolute;
height: 100%;
left: 0;
top: 0;
&:before {
content: ' ';
position: relative;
width: @anchor-border-width;
height: 100%;
display: block;
background-color: @border-color-split;
margin: 0 auto;
}
&-ball {
display: inline-block;
position: absolute;
width: 8px;
height: 8px;
border-radius: 8px;
border: 2px solid @primary-color;
background-color: @body-background;
left: 50%;
transition: top .3s ease-in-out;
transform: translate(-50%, 2px);
}
}
&.fixed &-ink &-ink-ball {
display: none;
}
}
&-link {
padding: 8px 0 8px 16px;
line-height: 1;
&-title {
display: block;
position: relative;
transition: all .3s;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
&:only-child {
margin-bottom: 0;
}
}
&-active > &-title {
color: @primary-color;
}
}
&-link &-link {
padding-top: 6px;
padding-bottom: 6px;
}
}

180
src/styles/components/color-picker.less
View file

@ -1,103 +1,163 @@
@color-picker-prefix-cls: ~"@{css-prefix}color-picker";
@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
.circle-dot(){
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
.@{color-picker-prefix-cls} {
display: inline-block;
&-hide {
display: none;
&-drop {
visibility: hidden;
}
}
&-disabled {
.disabled();
}
& > div:first-child:hover {
.ivu-input {
.hover();
}
}
& > div:first-child.@{color-picker-prefix-cls}-disabled:hover {
.ivu-input {
border-color: tint(@input-border-color, 20%);
}
}
& .@{select-dropdown-prefix-cls} {
padding: 0;
}
&-rel{
&-input.ivu-input:focus{
box-shadow: none;
}
&-focused {
.active();
}
&-rel {
line-height: 0;
}
&-color{
&-color {
width: 18px;
height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
border-radius: 2px;
position: relative;
top: 2px;
div{
div {
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
&-empty{
&-empty {
background: #fff;
overflow: hidden;
text-align: center;
i{
i {
font-size: 18px;
}
}
&-focused {
.active();
}
}
&-large &-color{
&-large &-color {
width: 20px;
height: 20px;
top: 1px;
&-empty{
i{
&-empty {
i {
font-size: 20px;
}
}
}
&-small &-color{
&-small &-color {
width: 14px;
height: 14px;
top: 3px;
&-empty{
i{
&-empty {
i {
font-size: 14px;
}
}
}
&-picker{
&-wrapper{
&-picker {
&-wrapper {
padding: 8px 8px 0;
}
&-panel{
&-panel {
width: 240px;
margin: 0 auto;
box-sizing: initial;
position: relative;
}
&-hue-slider, &-alpha-slider{
&-hue-slider,
&-alpha-slider {
height: 10px;
margin-top: 8px;
position: relative;
}
&-colors{
&-colors {
margin-top: 8px;
overflow: hidden;
span{
display: inline-block;
border-radius: 2px;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-wrapper {
display: inline;
width: 20px;
height: 20px;
float: left;
em{
position: relative;
&-color {
outline: 0;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
cursor: pointer;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
&-circle {
.circle-dot();
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
}
}
.@{picker-prefix-cls}-confirm{
.@{picker-prefix-cls}-confirm {
margin-top: 8px;
}
}
&-saturation{
&-wrapper{
&-saturation {
&-wrapper {
width: 100%;
padding-bottom: 75%;
position: relative;
overflow: hidden;
//overflow: hidden;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
}
&, &--white, &--black{
&,
&--white,
&--black {
cursor: pointer;
position: absolute;
top: 0;
@ -105,26 +165,22 @@
right: 0;
bottom: 0;
}
&--white{
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
&--white {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
&--black{
background: linear-gradient(to top, #000, rgba(0,0,0,0));
&--black {
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
&-pointer{
&-pointer {
cursor: pointer;
position: absolute;
}
&-circle{
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
border-radius: 50%;
transform: translate(-2px, -2px);
&-circle {
.circle-dot();
}
}
&-hue{
&-hue {
position: absolute;
top: 0;
right: 0;
@ -132,35 +188,48 @@
left: 0;
border-radius: 2px;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
&-container{
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-container {
cursor: pointer;
margin: 0 2px;
position: relative;
height: 100%;
}
&-pointer{
&-pointer {
z-index: 2;
position: absolute;
}
&-picker{
&-picker {
cursor: pointer;
margin-top: 1px;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
background: #fff;
transform: translateX(-2px);
}
}
&-alpha{
&-alpha {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&-checkboard-wrap{
border-radius: 2px;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-checkboard-wrap {
position: absolute;
top: 0;
right: 0;
@ -169,7 +238,7 @@
overflow: hidden;
border-radius: 2px;
}
&-checkerboard{
&-checkerboard {
position: absolute;
top: 0;
right: 0;
@ -177,7 +246,7 @@
left: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
&-gradient{
&-gradient {
position: absolute;
top: 0;
right: 0;
@ -185,32 +254,37 @@
left: 0;
border-radius: 2px;
}
&-container{
&-container {
cursor: pointer;
position: relative;
z-index: 2;
height: 100%;
margin: 0 3px;
}
&-pointer{
&-pointer {
z-index: 2;
position: absolute;
}
&-picker{
&-picker {
cursor: pointer;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, .6);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
background: #fff;
margin-top: 1px;
transform: translateX(-2px);
}
}
&-confirm{
&-confirm {
margin-top: 8px;
position: relative;
&-color{
border-top: 1px solid @border-color-split;
text-align: right;
padding: 8px;
clear: both;
&-color {
position: absolute;
top: 11px;
left: 8px;

40
src/styles/components/date-picker.less
View file

@ -44,17 +44,23 @@
margin: 2px;
color: @btn-disable-color;
}
&-cell:hover{
em{
background: @date-picker-cell-hover-bg;
}
}
&-focused{
em{
box-shadow: 0 0 0 1px @primary-color inset;
}
}
&-cell{
span&{
width: 28px;
height: 28px;
cursor: pointer;
}
&:hover{
em{
background: @date-picker-cell-hover-bg;
}
}
&-prev-month,&-next-month{
em{
color: @btn-disable-color;
@ -154,6 +160,11 @@
margin: 0;
}
}
.@{date-picker-prefix-cls}-cells-cell-focused{
background-color: tint(@primary-color, 80%);
}
}
&-header{
@ -169,6 +180,11 @@
}
}
}
&-btn-pulse{
background-color: tint(@primary-color, 80%) !important;
border-radius: @border-radius-small;
transition: background-color @transition-time @ease-in-out;
}
&-prev-btn{
float: left;
&-arrow-double{
@ -205,7 +221,7 @@
&-with-week-numbers{
.@{picker-prefix-cls}-panel{
&-body{
&-body-date {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
}
}
@ -216,6 +232,10 @@
max-height: none;
width: auto;
}
&-focused input{
.active();
}
}
.@{picker-prefix-cls} {
@ -289,9 +309,9 @@
color: @link-active-color;
}
}
& > span&-time-disabled{
color: @btn-disable-color;
cursor: @cursor-disabled;
&-time{
float: left;
}
}
}
}

5
src/styles/components/index.less
View file

@ -24,6 +24,7 @@
@import "modal";
@import "select";
@import "select-dropdown";
@import "split";
@import "tooltip";
@import "poptip";
@import "input";
@ -44,4 +45,6 @@
@import "avatar";
@import "color-picker";
@import "auto-complete";
@import "divider";
@import "divider";
@import "anchor";
@import "time";

4
src/styles/components/poptip.less
View file

@ -69,6 +69,7 @@
bottom: 1px;
margin-left: -@poptip-arrow-width;
border-bottom-width: 0;
border-top-width: @poptip-arrow-width;
border-top-color: #fff;
}
@ -77,6 +78,7 @@
left: 1px;
bottom: -@poptip-arrow-width;
border-left-width: 0;
border-right-width: @poptip-arrow-width;
border-right-color: #fff;
}
@ -85,6 +87,7 @@
top: 1px;
margin-left: -@poptip-arrow-width;
border-top-width: 0;
border-bottom-width: @poptip-arrow-width;
border-bottom-color: #fff;
}
@ -92,6 +95,7 @@
content: " ";
right: 1px;
border-right-width: 0;
border-left-width: @poptip-arrow-width;
border-left-color: #fff;
bottom: -@poptip-arrow-width;
}

34
src/styles/components/select.less
View file

@ -25,23 +25,14 @@
border: 1px solid @border-color-base;
transition: all @transition-time @ease-in-out;
.@{select-prefix-cls}-arrow:nth-of-type(1) {
display: none;
cursor: pointer;
}
&:hover {
&:hover, &-focused {
.hover();
.@{select-prefix-cls}-arrow:nth-of-type(1) {
.@{select-prefix-cls}-arrow {
display: inline-block;
}
}
}
&-show-clear &-selection:hover .@{select-prefix-cls}-arrow:nth-of-type(2){
display: none;
}
&-arrow {
.inner-arrow();
}
@ -51,14 +42,9 @@
.active();
}
.@{select-prefix-cls}-arrow:nth-of-type(2) {
.@{select-prefix-cls}-arrow {
transform: rotate(180deg);
}
}
&:focus{
outline: 0;
.@{select-prefix-cls}-selection{
.active();
display: inline-block;
}
}
@ -66,7 +52,7 @@
.@{select-prefix-cls}-selection {
.disabled();
.@{select-prefix-cls}-arrow:nth-of-type(1) {
.@{select-prefix-cls}-arrow {
display: none;
}
@ -74,7 +60,7 @@
border-color: @border-color-base;
box-shadow: none;
.@{select-prefix-cls}-arrow:nth-of-type(2) {
.@{select-prefix-cls}-arrow {
display: inline-block;
}
}
@ -236,7 +222,7 @@
}
&-dropdown-list {
display: inline-block;
//display: inline-block;
min-width: 100%;
list-style: none;
}
@ -245,6 +231,7 @@
.select-item(@select-prefix-cls, @select-item-prefix-cls);
.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
position: relative;
&-selected{
color: @selected-color;
background: #fff;
@ -260,10 +247,13 @@
&-selected:after{
.ivu-icon();
float: right;
//float: right;
font-size: 24px;
content: '\F3FD';
color: @selected-color;
position: absolute;
top: 2px;
right: 16px;
}
}

114
src/styles/components/split.less Normal file
View file

@ -0,0 +1,114 @@
@split-prefix-cls: ~"@{css-prefix}split";
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: rgba(23, 35, 61, 0.25);
@trigger-background: #F8F8F9;
@trigger-width: 6px;
@trigger-bar-width: 4px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@trigger-bar-interval: 3px;
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
.@{split-prefix-cls}{
&-wrapper{
position: relative;
width: 100%;
height: 100%;
}
&-pane{
position: absolute;
&.left-pane, &.right-pane{
top: 0px;
bottom: 0px;
}
&.left-pane{
left: 0px;
}
&.right-pane{
right: 0px;
}
&.top-pane, &.bottom-pane{
left: 0px;
right: 0px;
}
&.top-pane{
top: 0px;
}
&.bottom-pane{
bottom: 0px;
}
}
&-trigger{
&-con{
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
}
&-bar-con{
position: absolute;
overflow: hidden;
&.vertical{
left: @trigger-bar-offset;
top: 50%;
height: @trigger-bar-con-height;
transform: translate(0, -50%);
}
&.horizontal{
left: 50%;
top: @trigger-bar-offset;
width: @trigger-bar-con-height;
transform: translate(-50%, 0);
}
}
&-vertical{
width: @trigger-width;
height: 100%;
background: @trigger-background;
box-shadow: @box-shadow;
cursor: col-resize;
.@{split-prefix-cls}-trigger-bar{
width: @trigger-bar-width;
height: 1px;
background: @trigger-bar-background;
float: left;
margin-top: @trigger-bar-interval;
}
}
&-horizontal{
height: @trigger-width;
width: 100%;
background: @trigger-background;
box-shadow: @box-shadow;
cursor: row-resize;
.@{split-prefix-cls}-trigger-bar{
height: @trigger-bar-width;
width: 1px;
background: @trigger-bar-background;
float: left;
margin-right: @trigger-bar-interval;
}
}
}
&-horizontal{
.@{split-prefix-cls}-trigger-con{
top: 50%;
height: 100%;
width: 0;
}
}
&-vertical{
.@{split-prefix-cls}-trigger-con{
left: 50%;
height: 0;
width: 100%;
}
}
.no-select{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}

1
src/styles/components/table.less
View file

@ -354,7 +354,6 @@
}
label {
display: block;
margin-bottom: 4px;
& > span{
margin-right: 4px;

10
src/styles/components/tabs.less
View file

@ -39,6 +39,13 @@
.clearfix;
}
&-nav-container:focus {
outline: none;
.@{tabs-prefix-cls}-tab-focused {
border-color: @link-hover-color !important;
}
}
&-nav-container-scrolling {
padding-left: 32px;
padding-right: 32px;
@ -158,6 +165,7 @@
width: 100%;
transition: opacity .3s;
opacity: 1;
outline: none;
}
.@{tabs-prefix-cls}-tabpane-inactive {
@ -228,4 +236,4 @@
display: none;
}
}
}
}

5
src/styles/components/time-picker.less
View file

@ -70,6 +70,9 @@
color: @primary-color;
background: @background-color-select-hover;
}
&-focused{
background-color: tint(@primary-color, 80%);
}
}
}
@ -165,4 +168,4 @@
}
}
}
}
}

10
src/styles/components/time.less Normal file
View file

@ -0,0 +1,10 @@
@time-prefix-cls: ~"@{css-prefix}time";
.@{time-prefix-cls} {
&-with-hash{
cursor: pointer;
&:hover{
text-decoration: underline;
}
}
}