|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390 |
- .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: 14px;
- position: relative;
- top: 1px;
- }
-
- &-large .@{btnClassName}-icon-only .ivu-icon{
- font-size: 16px;
- 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;
- }
- }
- }
- }
-
- .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;
-
- > .@{css-prefix-iconfont} {
- line-height: 1;
- }
-
- &,
- &:active,
- &:focus {
- outline: 0;
- }
-
- &:not([disabled]):hover {
- text-decoration: none;
- }
-
- &:not([disabled]):active {
- outline: 0;
- transition: none;
- }
-
- &.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);
- }
- }
-
- // 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%));
- }
- }
-
- // Primary
- .btn-primary() {
- .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
-
- &:hover,
- //&:focus,
- &:active,
- &.active {
- color: @btn-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%));
- }
- }
-
- // 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%));
- }
- }
-
- // Text
- .btn-text() {
- .button-variant(@btn-ghost-color, @btn-ghost-bg, 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);
- }
- }
-
- // Color
- .btn-color(@color) {
- .button-variant(@btn-primary-color; @color; @color);
-
- &:hover,
- //&:focus,
- &:active,
- &.active {
- color: @btn-primary-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;
- }
- }
|