update the master branch to the latest
This commit is contained in:
梁灏
parent
67d534df27
commit
23a0ba9831
611 changed files with 122648 additions and 0 deletions
429
src/styles/mixins/button.less
Normal file
429
src/styles/mixins/button.less
Normal file
|
|
@ -0,0 +1,429 @@
|
|||
.button-size(@padding; @font-size; @border-radius) {
|
||||
padding: @padding;
|
||||
font-size: @font-size;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.button-color(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
// a inside Button which only work in Chrome
|
||||
// http://stackoverflow.com/a/17253457
|
||||
> a:only-child {
|
||||
color: currentColor;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-variant(@color; @background; @border) {
|
||||
.button-color(@color; @background; @border);
|
||||
|
||||
&:hover
|
||||
//&:focus
|
||||
{
|
||||
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group-base(@btnClassName) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> .@{btnClassName} {
|
||||
position: relative;
|
||||
float: left;
|
||||
&:hover,
|
||||
//&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
& .@{btnClassName}-icon-only .ivu-icon {
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
//top: 1px;
|
||||
}
|
||||
|
||||
&-large .@{btnClassName}-icon-only .ivu-icon{
|
||||
font-size: 15px;
|
||||
//top: 2px;
|
||||
}
|
||||
|
||||
&-small .@{btnClassName}-icon-only .ivu-icon{
|
||||
font-size: 12px;
|
||||
//top: 0;
|
||||
}
|
||||
|
||||
&-circle .@{btnClassName} {
|
||||
border-radius: @btn-circle-size;
|
||||
}
|
||||
|
||||
// size
|
||||
&-large&-circle .@{btnClassName} {
|
||||
border-radius: @btn-circle-size-large;
|
||||
}
|
||||
&-large {
|
||||
& > .@{btnClassName} {
|
||||
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&-small&-circle .@{btnClassName} {
|
||||
border-radius: @btn-circle-size-small;
|
||||
}
|
||||
&-small {
|
||||
& > .@{btnClassName}{
|
||||
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
|
||||
> .@{css-prefix-iconfont} {
|
||||
font-size: @btn-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//&-small .@{btnClassName}-icon-only{
|
||||
// .button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
|
||||
//}
|
||||
//&-large .@{btnClassName}-icon-only{
|
||||
// .button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
|
||||
//}
|
||||
}
|
||||
|
||||
.button-group-vertical-base(@btnClassName) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
> .@{btnClassName} {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn() {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-weight: @btn-font-weight;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
line-height: @line-height-base;
|
||||
user-select: none;
|
||||
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
|
||||
//transform: translate3d(0, 0, 0);
|
||||
//transition: all @transition-time linear;
|
||||
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
|
||||
|
||||
> .@{css-prefix-iconfont} {
|
||||
line-height: @line-height-base;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-icon-only&-circle > .@{css-prefix-iconfont}{
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
> span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not([disabled]):active {
|
||||
outline: 0;
|
||||
// transition: none; // 如果不注释此行，那么active会和focus同时触发，此时focus的开始动画transition会无效
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
cursor: @cursor-disabled;
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-large {
|
||||
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
|
||||
}
|
||||
|
||||
&-small {
|
||||
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
|
||||
}
|
||||
|
||||
&-icon-only{
|
||||
.button-size(@btn-padding-base-icon; @btn-font-size; @btn-border-radius);
|
||||
}
|
||||
&-icon-only&-small{
|
||||
.button-size(@btn-padding-small-icon; @btn-font-size; @btn-border-radius-small);
|
||||
}
|
||||
&-icon-only&-large{
|
||||
.button-size(@btn-padding-large-icon; @btn-font-size-large; @btn-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
// Default
|
||||
.btn-default() {
|
||||
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
|
||||
|
||||
&:hover
|
||||
//&:focus
|
||||
{
|
||||
.button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
|
||||
}
|
||||
.active-btn-color(@primary-color);
|
||||
}
|
||||
|
||||
// Primary
|
||||
.btn-primary() {
|
||||
.button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
|
||||
|
||||
&:hover,
|
||||
//&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: @btn-primary-color;
|
||||
}
|
||||
.active-btn-color(@primary-color);
|
||||
}
|
||||
|
||||
// Ghost
|
||||
.btn-ghost() {
|
||||
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
|
||||
|
||||
&:hover
|
||||
//&:focus
|
||||
{
|
||||
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
|
||||
}
|
||||
.active-btn-color(@primary-color);
|
||||
}
|
||||
|
||||
// Dashed
|
||||
.btn-dashed() {
|
||||
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
|
||||
border-style: dashed;
|
||||
|
||||
&:hover
|
||||
//&:focus
|
||||
{
|
||||
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
|
||||
}
|
||||
.active-btn-color(@primary-color);
|
||||
}
|
||||
|
||||
// Text
|
||||
.btn-text() {
|
||||
.button-variant(@btn-ghost-color, transparent, transparent);
|
||||
|
||||
// for disabled
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(@btn-disable-color; @btn-ghost-bg; transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover
|
||||
//&:focus
|
||||
{
|
||||
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
|
||||
}
|
||||
.active-btn-color(@primary-color);
|
||||
}
|
||||
|
||||
// Color
|
||||
// for tabindex
|
||||
.active-btn-color(@color) {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px fade(@color, 20%);
|
||||
}
|
||||
}
|
||||
.btn-color(@color) {
|
||||
.button-variant(@btn-primary-color; @color; @color);
|
||||
|
||||
&:hover,
|
||||
//&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: @btn-primary-color;
|
||||
}
|
||||
|
||||
.active-btn-color(@color);
|
||||
}
|
||||
|
||||
// Circle for Icon
|
||||
.btn-circle(@btnClassName: ivu-btn) {
|
||||
border-radius: @btn-circle-size;
|
||||
|
||||
&.@{btnClassName}-large{
|
||||
border-radius: @btn-circle-size-large;
|
||||
}
|
||||
|
||||
&.@{btnClassName}-size{
|
||||
border-radius: @btn-circle-size-small;
|
||||
}
|
||||
|
||||
&.@{btnClassName}-icon-only{
|
||||
.square(@btn-circle-size);
|
||||
.button-size(0; @font-size-base + 2; 50%);
|
||||
|
||||
&.@{btnClassName}-large{
|
||||
.square(@btn-circle-size-large);
|
||||
.button-size(0; @btn-font-size-large + 2; 50%);
|
||||
}
|
||||
|
||||
&.@{btnClassName}-small{
|
||||
.square(@btn-circle-size-small);
|
||||
.button-size(0; @font-size-base; 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Group
|
||||
.btn-group(@btnClassName: ivu-btn) {
|
||||
.button-group-base(@btnClassName);
|
||||
|
||||
.@{btnClassName} + .@{btnClassName},
|
||||
.@{btnClassName} + &,
|
||||
& + .@{btnClassName},
|
||||
& + & {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.@{btnClassName}:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:not(&-vertical) > .@{btnClassName}:first-child {
|
||||
margin-left: 0;
|
||||
&:not(:last-child) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
& > & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:not(&-vertical) > &:first-child:not(:last-child) {
|
||||
> .@{btnClassName}:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical(@btnClassName: ivu-btn) {
|
||||
.button-group-vertical-base(@btnClassName);
|
||||
|
||||
.@{btnClassName} + .@{btnClassName},
|
||||
.@{btnClassName} + &,
|
||||
& + .@{btnClassName},
|
||||
& + & {
|
||||
margin-top: -1px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
> .@{btnClassName}:first-child {
|
||||
margin-top: 0;
|
||||
&:not(:last-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{btnClassName}:last-child:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
& > &:first-child:not(:last-child) {
|
||||
> .@{btnClassName}:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
37
src/styles/mixins/caret.less
Normal file
37
src/styles/mixins/caret.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
// sortable
|
||||
.sortable() {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
margin-top: -1px;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
height: 6px;
|
||||
line-height: 6px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
color: @btn-disable-color;
|
||||
transition: color @transition-time @ease-in-out;
|
||||
font-size: @font-size-large;
|
||||
|
||||
&:hover{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&.on{
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
top: 0;
|
||||
}
|
||||
&:last-child{
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
267
src/styles/mixins/checkbox.less
Normal file
267
src/styles/mixins/checkbox.less
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
|
||||
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
|
||||
|
||||
.@{checkbox-prefix-cls}-focus {
|
||||
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 普通状态
|
||||
.@{checkbox-prefix-cls} {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
//outline: none;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
|
||||
&-disabled{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: #bcbcbc;
|
||||
}
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(0);
|
||||
transition: all @transition-time @ease-in-out;
|
||||
}
|
||||
}
|
||||
&-large{
|
||||
& .@{checkbox-inner-prefix-cls} {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
&:after{
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-small{
|
||||
font-size: 12px;
|
||||
& .@{checkbox-inner-prefix-cls} {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
&:after{
|
||||
top: 0;
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
&[disabled]{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态
|
||||
.@{checkbox-prefix-cls}-checked {
|
||||
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @primary-color;
|
||||
background-color: @primary-color;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: rotate(45deg) scale(1);
|
||||
transition: all @transition-time @ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{checkbox-prefix-cls}-large{
|
||||
.@{checkbox-prefix-cls}-checked{
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
&:after{
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{checkbox-prefix-cls}-small{
|
||||
.@{checkbox-prefix-cls}-checked{
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
&:after{
|
||||
top: 0;
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用
|
||||
.@{checkbox-prefix-cls}-disabled {
|
||||
&.@{checkbox-prefix-cls}-checked {
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: #f3f3f3;
|
||||
border-color: @border-color-base;
|
||||
|
||||
&:after {
|
||||
animation-name: none;
|
||||
border-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @border-color-base;
|
||||
background-color: #f3f3f3;
|
||||
&:after {
|
||||
animation-name: none;
|
||||
border-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-inner-prefix-cls}-input {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& + span {
|
||||
color: #ccc;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// 半选状态
|
||||
.@{checkbox-prefix-cls}-indeterminate{
|
||||
.@{checkbox-inner-prefix-cls}:after{
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 1px;
|
||||
transform: scale(1);
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
.@{checkbox-inner-prefix-cls}{
|
||||
background-color: @primary-color;
|
||||
border-color: @primary-color;
|
||||
}
|
||||
&.@{checkbox-prefix-cls}-disabled{
|
||||
.@{checkbox-inner-prefix-cls}{
|
||||
background-color: #f3f3f3;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
.@{checkbox-inner-prefix-cls}:after{
|
||||
border-color: @input-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{checkbox-prefix-cls}-large {
|
||||
.@{checkbox-prefix-cls}-indeterminate{
|
||||
.@{checkbox-inner-prefix-cls}:after{
|
||||
width: 10px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{checkbox-prefix-cls}-small {
|
||||
.@{checkbox-prefix-cls}-indeterminate{
|
||||
.@{checkbox-inner-prefix-cls}:after{
|
||||
width: 6px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper {
|
||||
cursor: pointer;
|
||||
font-size: @font-size-small;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
//outline: none;
|
||||
|
||||
&-disabled{
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
|
||||
&.@{checkbox-prefix-cls}-large{
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-wrapper + span,
|
||||
.@{checkbox-prefix-cls} + span {
|
||||
//margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.@{checkbox-prefix-cls}-group {
|
||||
font-size: @font-size-base;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/styles/mixins/clearfix.less
Executable file
14
src/styles/mixins/clearfix.less
Executable file
|
|
@ -0,0 +1,14 @@
|
|||
.clearfix() {
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
10
src/styles/mixins/close.less
Normal file
10
src/styles/mixins/close.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.close-base(@top: 0, @icon-font-size: 22px) {
|
||||
font-size: @icon-font-size;
|
||||
color: @legend-color;
|
||||
transition: color @transition-time ease;
|
||||
position: relative;
|
||||
top: @top;
|
||||
&:hover {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
38
src/styles/mixins/common.less
Normal file
38
src/styles/mixins/common.less
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: @color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
// Internet Explorer 10+
|
||||
&:-ms-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
// Safari and Chrome
|
||||
&::-webkit-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
// for select and input like component's arrow
|
||||
.inner-arrow() {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
font-size: @font-size-base;
|
||||
color: @subsidiary-color;
|
||||
transition: all @transition-time @ease-in-out;
|
||||
}
|
||||
|
||||
.reset-component() {
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
38
src/styles/mixins/content.less
Normal file
38
src/styles/mixins/content.less
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@icon-prefix-cls: ~"@{css-prefix}icon";
|
||||
|
||||
.content-header() {
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
padding: 14px 16px;
|
||||
line-height: 1;
|
||||
|
||||
p,
|
||||
&-inner
|
||||
{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: @font-size-base;
|
||||
color: @title-color;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
p i, p span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.content-close(@top: 0, @icon-font-size: 22px) {
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
.@{icon-prefix-cls}-ios-close {
|
||||
.close-base(@top, @icon-font-size);
|
||||
}
|
||||
}
|
||||
14
src/styles/mixins/index.less
Normal file
14
src/styles/mixins/index.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@import "common";
|
||||
@import "clearfix";
|
||||
@import "button";
|
||||
@import "layout";
|
||||
@import "size";
|
||||
@import "loading";
|
||||
@import "close";
|
||||
@import "checkbox";
|
||||
@import "input";
|
||||
@import "mask";
|
||||
@import "content"; // card、modal
|
||||
@import "tooltip";
|
||||
@import "select";
|
||||
@import "caret";
|
||||
269
src/styles/mixins/input.less
Normal file
269
src/styles/mixins/input.less
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
.hover(@color: @input-hover-border-color) {
|
||||
border-color: tint(@color, 20%);
|
||||
}
|
||||
.hover-error() {
|
||||
border-color: @error-color;
|
||||
}
|
||||
|
||||
.active(@color: @input-hover-border-color) {
|
||||
border-color: tint(@color, 20%);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px fade(@color, 20%);
|
||||
}
|
||||
.active-error() {
|
||||
border-color: @error-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2px fade(@error-color, 20%);
|
||||
}
|
||||
|
||||
.disabled() {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
cursor: @cursor-disabled;
|
||||
color: #ccc;
|
||||
&:hover {
|
||||
.hover(@input-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.input-large() {
|
||||
font-size: @font-size-base;
|
||||
padding: @input-padding-vertical-large @input-padding-horizontal;
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
||||
.input-small() {
|
||||
padding: @input-padding-vertical-small @input-padding-horizontal;
|
||||
height: @input-height-small;
|
||||
border-radius: @btn-border-radius-small;
|
||||
}
|
||||
|
||||
.input() {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: @font-size-small;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @btn-border-radius;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
.placeholder();
|
||||
transition: border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.active();
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
.disabled();
|
||||
}
|
||||
|
||||
// Reset height for textarea
|
||||
textarea& {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
min-height: @input-height-base;
|
||||
vertical-align: bottom;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Size
|
||||
&-large {
|
||||
.input-large();
|
||||
}
|
||||
|
||||
&-small {
|
||||
.input-small();
|
||||
}
|
||||
}
|
||||
|
||||
.input-error() {
|
||||
border: 1px solid @error-color;
|
||||
&:hover {
|
||||
.hover-error;
|
||||
}
|
||||
&:focus {
|
||||
.active-error;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group(@inputClass) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
position: relative;
|
||||
font-size: @font-size-small;
|
||||
top: 1px; // fixed when using in form inline,
|
||||
|
||||
&-large{
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> [class*="col-"] {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append,
|
||||
> .@{inputClass} {
|
||||
display: table-cell;
|
||||
|
||||
//&:not(:first-child):not(:last-child) {
|
||||
// border-radius: 0;
|
||||
//}
|
||||
}
|
||||
&-with-prepend .@{inputClass},
|
||||
&-with-prepend&-small .@{inputClass}
|
||||
{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&-with-append .@{inputClass},
|
||||
&-with-append&-small .@{inputClass}
|
||||
{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&-prepend .@{css-prefix}btn,
|
||||
&-append .@{css-prefix}btn
|
||||
{
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
margin: -(@input-padding-vertical-base + 2) (-@input-padding-horizontal);
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append
|
||||
{
|
||||
width: 1px; // To make addon/wrap as small as possible
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append
|
||||
{
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
text-align: center;
|
||||
background-color: @input-group-bg;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @btn-border-radius;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}select {
|
||||
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
|
||||
|
||||
&-selection {
|
||||
background-color: inherit;
|
||||
margin: -1px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&-visible .@{css-prefix}select-selection{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> span > .@{inputClass}:first-child,
|
||||
> .@{inputClass}:first-child,
|
||||
&-prepend
|
||||
{
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}-select .@{css-prefix}-select-selection {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
border-right: 0;
|
||||
}
|
||||
&-append {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
> .@{inputClass}:last-child,
|
||||
&-append
|
||||
{
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}-select .@{css-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
&-large .@{inputClass},
|
||||
&-large > &-prepend,
|
||||
&-large > &-append
|
||||
{
|
||||
.input-large();
|
||||
}
|
||||
|
||||
&-small .@{inputClass},
|
||||
&-small > &-prepend,
|
||||
&-small > &-append
|
||||
{
|
||||
.input-small();
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-error{
|
||||
&-prepend,
|
||||
&-append
|
||||
{
|
||||
background-color: #fff;
|
||||
border: 1px solid @error-color;
|
||||
.@{css-prefix}select {
|
||||
&-selection {
|
||||
background-color: inherit;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-prepend {
|
||||
border-right: 0;
|
||||
}
|
||||
&-append {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
71
src/styles/mixins/layout.less
Normal file
71
src/styles/mixins/layout.less
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
@row-prefix-cls: ~"@{css-prefix}row";
|
||||
@col-prefix-cls: ~"@{css-prefix}col";
|
||||
|
||||
.make-row(@gutter: @grid-gutter-width) {
|
||||
position: relative;
|
||||
margin-left: (@gutter / -2);
|
||||
margin-right: (@gutter / -2);
|
||||
height: auto;
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) { // initial
|
||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@{list} {
|
||||
float: left;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
.col(1); // kickstart it
|
||||
}
|
||||
|
||||
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||
display: block;
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-pull-@{index} {
|
||||
right: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-offset-@{index} {
|
||||
margin-left: percentage((@index / @grid-columns));
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-order-@{index} {
|
||||
order: @index;
|
||||
}
|
||||
.loop-grid-columns((@index - 1), @class);
|
||||
}
|
||||
|
||||
.loop-grid-columns(@index, @class) when (@index = 0) {
|
||||
.@{col-prefix-cls}-span@{class}-@{index} {
|
||||
display: none;
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-push-@{index} {
|
||||
left: auto;
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-pull-@{index} {
|
||||
right: auto;
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-offset-@{index} {
|
||||
margin-left: 0;
|
||||
}
|
||||
.@{col-prefix-cls}@{class}-order-@{index} {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.make-grid(@class: ~'') {
|
||||
.float-grid-columns(@class);
|
||||
.loop-grid-columns(@grid-columns, @class);
|
||||
}
|
||||
10
src/styles/mixins/loading.less
Normal file
10
src/styles/mixins/loading.less
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// Loading for loop
|
||||
.ivu-load-loop{
|
||||
animation: ani-load-loop 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ani-load-loop {
|
||||
from { transform: rotate(0deg);}
|
||||
50% { transform: rotate(180deg);}
|
||||
to { transform: rotate(360deg);}
|
||||
}
|
||||
14
src/styles/mixins/mask.less
Normal file
14
src/styles/mixins/mask.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.mask() {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: @zindex-modal;
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
69
src/styles/mixins/select.less
Normal file
69
src/styles/mixins/select.less
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.select-item(@size-class, @item-class) {
|
||||
.@{item-class} {
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
padding: 7px 16px;
|
||||
clear: both;
|
||||
color: @text-color;
|
||||
font-size: @font-size-small !important;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background @transition-time @ease-in-out;
|
||||
|
||||
&:hover{
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-focus {
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
color: @btn-disable-color;
|
||||
cursor: @cursor-disabled;
|
||||
|
||||
&:hover {
|
||||
color: @btn-disable-color;
|
||||
background-color: #fff;
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected ,&-selected:hover{
|
||||
color: @primary-color;
|
||||
//background: @selected-color;
|
||||
}
|
||||
|
||||
&-selected&-focus {
|
||||
//background: shade(@selected-color, 10%);
|
||||
}
|
||||
|
||||
&-divided{
|
||||
margin-top: 5px;
|
||||
border-top: 1px solid @border-color-split;
|
||||
&:before{
|
||||
content: '';
|
||||
height: 5px;
|
||||
display: block;
|
||||
margin: 0 -16px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
top: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{size-class}-large .@{item-class} {
|
||||
padding: 7px 16px 8px;
|
||||
font-size: @font-size-base !important;
|
||||
}
|
||||
// http://browserhacks.com/
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=488725
|
||||
// fixed #1224 #1143 #1127
|
||||
@-moz-document url-prefix() {
|
||||
.@{item-class} {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/styles/mixins/size.less
Normal file
20
src/styles/mixins/size.less
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.size(@width; @height) {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
|
||||
.square(@size) {
|
||||
.size(@size; @size);
|
||||
}
|
||||
|
||||
// fix chrome 12px bug, support ie
|
||||
.iconfont-size-under-12px(@size, @rotate: 0deg) {
|
||||
display: inline-block;
|
||||
@font-scale: unit(@size / @font-size-base);
|
||||
font-size: @font-size-base;
|
||||
font-size: ~"@{size} \9"; // ie8-9
|
||||
transform: scale(@font-scale) rotate(@rotate);
|
||||
:root & {
|
||||
font-size: @font-size-base; // reset ie9 and above
|
||||
}
|
||||
}
|
||||
85
src/styles/mixins/tooltip.less
Normal file
85
src/styles/mixins/tooltip.less
Normal 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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue