|
@@ -1,167 +1,167 @@
|
|
|
-
|
|
|
-
|
|
|
-$-color-white:#fff;
|
|
|
-$-color-black:#000;
|
|
|
-@mixin base-style($color) {
|
|
|
- color: #fff;
|
|
|
- background-color: $color;
|
|
|
- border-color: mix($-color-black, $color, 8%);
|
|
|
- &:not([hover-class]):active {
|
|
|
- background: mix($-color-black, $color, 10%);
|
|
|
- border-color: mix($-color-black, $color, 20%);
|
|
|
- color: $-color-white;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-}
|
|
|
-@mixin is-color($color) {
|
|
|
- @include base-style($color);
|
|
|
- &[loading] {
|
|
|
- @include base-style($color);
|
|
|
- &::before {
|
|
|
- margin-right:5px;
|
|
|
- }
|
|
|
- }
|
|
|
- &[disabled] {
|
|
|
- &,
|
|
|
- &[loading],
|
|
|
- &:not([hover-class]):active {
|
|
|
- color: $-color-white;
|
|
|
- border-color: mix(darken($color,10%), $-color-white);
|
|
|
- background-color: mix($color, $-color-white);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-@mixin base-plain-style($color) {
|
|
|
- color:$color;
|
|
|
- background-color: mix($-color-white, $color, 90%);
|
|
|
- border-color: mix($-color-white, $color, 70%);
|
|
|
- &:not([hover-class]):active {
|
|
|
- background: mix($-color-white, $color, 80%);
|
|
|
- color: $color;
|
|
|
- outline: none;
|
|
|
- border-color: mix($-color-white, $color, 50%);
|
|
|
- }
|
|
|
-}
|
|
|
-@mixin is-plain($color){
|
|
|
- &[plain] {
|
|
|
- @include base-plain-style($color);
|
|
|
- &[loading] {
|
|
|
- @include base-plain-style($color);
|
|
|
- &::before {
|
|
|
- margin-right:5px;
|
|
|
- }
|
|
|
- }
|
|
|
- &[disabled] {
|
|
|
- &,
|
|
|
- &:active {
|
|
|
- color: mix($-color-white, $color, 40%);
|
|
|
- background-color: mix($-color-white, $color, 90%);
|
|
|
- border-color: mix($-color-white, $color, 80%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.uni-btn {
|
|
|
- margin: 5px;
|
|
|
- color: #393939;
|
|
|
- border:1px solid #ccc;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 200;
|
|
|
- background-color: #F9F9F9;
|
|
|
-
|
|
|
- overflow: visible;
|
|
|
- &::after{
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- &:not([type]),&[type=default] {
|
|
|
- color: #999;
|
|
|
- &[loading] {
|
|
|
- background: none;
|
|
|
- &::before {
|
|
|
- margin-right:5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- &[disabled]{
|
|
|
- color: mix($-color-white, #999, 60%);
|
|
|
- &,
|
|
|
- &[loading],
|
|
|
- &:active {
|
|
|
- color: mix($-color-white, #999, 60%);
|
|
|
- background-color: mix($-color-white,$-color-black , 98%);
|
|
|
- border-color: mix($-color-white, #999, 85%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &[plain] {
|
|
|
- color: #999;
|
|
|
- background: none;
|
|
|
- border-color: $uni-border-1;
|
|
|
- &:not([hover-class]):active {
|
|
|
- background: none;
|
|
|
- color: mix($-color-white, $-color-black, 80%);
|
|
|
- border-color: mix($-color-white, $-color-black, 90%);
|
|
|
- outline: none;
|
|
|
- }
|
|
|
- &[disabled]{
|
|
|
- &,
|
|
|
- &[loading],
|
|
|
- &:active {
|
|
|
- background: none;
|
|
|
- color: mix($-color-white, #999, 60%);
|
|
|
- border-color: mix($-color-white, #999, 85%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:not([hover-class]):active {
|
|
|
- color: mix($-color-white, $-color-black, 50%);
|
|
|
- }
|
|
|
-
|
|
|
- &[size=mini] {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 200;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- &.uni-btn-small {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- &.uni-btn-mini {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- &.uni-btn-radius {
|
|
|
- border-radius: 999px;
|
|
|
- }
|
|
|
- &[type=primary] {
|
|
|
- @include is-color($uni-primary);
|
|
|
- @include is-plain($uni-primary)
|
|
|
- }
|
|
|
- &[type=success] {
|
|
|
- @include is-color($uni-success);
|
|
|
- @include is-plain($uni-success)
|
|
|
- }
|
|
|
- &[type=error] {
|
|
|
- @include is-color($uni-error);
|
|
|
- @include is-plain($uni-error)
|
|
|
- }
|
|
|
- &[type=warning] {
|
|
|
- @include is-color($uni-warning);
|
|
|
- @include is-plain($uni-warning)
|
|
|
- }
|
|
|
- &[type=info] {
|
|
|
- @include is-color($uni-info);
|
|
|
- @include is-plain($uni-info)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+$-color-white:#fff;
|
|
|
+$-color-black:#000;
|
|
|
+@mixin base-style($color) {
|
|
|
+ color: #fff;
|
|
|
+ background-color: $color;
|
|
|
+ border-color: mix($-color-black, $color, 8%);
|
|
|
+ &:not([hover-class]):active {
|
|
|
+ background: mix($-color-black, $color, 10%);
|
|
|
+ border-color: mix($-color-black, $color, 20%);
|
|
|
+ color: $-color-white;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+@mixin is-color($color) {
|
|
|
+ @include base-style($color);
|
|
|
+ &[loading] {
|
|
|
+ @include base-style($color);
|
|
|
+ &::before {
|
|
|
+ margin-right:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &[disabled] {
|
|
|
+ &,
|
|
|
+ &[loading],
|
|
|
+ &:not([hover-class]):active {
|
|
|
+ color: $-color-white;
|
|
|
+ border-color: mix(darken($color,10%), $-color-white);
|
|
|
+ background-color: mix($color, $-color-white);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+@mixin base-plain-style($color) {
|
|
|
+ color:$color;
|
|
|
+ background-color: mix($-color-white, $color, 90%);
|
|
|
+ border-color: mix($-color-white, $color, 70%);
|
|
|
+ &:not([hover-class]):active {
|
|
|
+ background: mix($-color-white, $color, 80%);
|
|
|
+ color: $color;
|
|
|
+ outline: none;
|
|
|
+ border-color: mix($-color-white, $color, 50%);
|
|
|
+ }
|
|
|
+}
|
|
|
+@mixin is-plain($color){
|
|
|
+ &[plain] {
|
|
|
+ @include base-plain-style($color);
|
|
|
+ &[loading] {
|
|
|
+ @include base-plain-style($color);
|
|
|
+ &::before {
|
|
|
+ margin-right:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &[disabled] {
|
|
|
+ &,
|
|
|
+ &:active {
|
|
|
+ color: mix($-color-white, $color, 40%);
|
|
|
+ background-color: mix($-color-white, $color, 90%);
|
|
|
+ border-color: mix($-color-white, $color, 80%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.uni-btn {
|
|
|
+ margin: 5px;
|
|
|
+ color: #393939;
|
|
|
+ border:1px solid #ccc;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 200;
|
|
|
+ background-color: #F9F9F9;
|
|
|
+
|
|
|
+ overflow: visible;
|
|
|
+ &::after{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not([type]),&[type=default] {
|
|
|
+ color: #999;
|
|
|
+ &[loading] {
|
|
|
+ background: none;
|
|
|
+ &::before {
|
|
|
+ margin-right:5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ &[disabled]{
|
|
|
+ color: mix($-color-white, #999, 60%);
|
|
|
+ &,
|
|
|
+ &[loading],
|
|
|
+ &:active {
|
|
|
+ color: mix($-color-white, #999, 60%);
|
|
|
+ background-color: mix($-color-white,$-color-black , 98%);
|
|
|
+ border-color: mix($-color-white, #999, 85%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &[plain] {
|
|
|
+ color: #999;
|
|
|
+ background: none;
|
|
|
+ border-color: $uni-border-1;
|
|
|
+ &:not([hover-class]):active {
|
|
|
+ background: none;
|
|
|
+ color: mix($-color-white, $-color-black, 80%);
|
|
|
+ border-color: mix($-color-white, $-color-black, 90%);
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ &[disabled]{
|
|
|
+ &,
|
|
|
+ &[loading],
|
|
|
+ &:active {
|
|
|
+ background: none;
|
|
|
+ color: mix($-color-white, #999, 60%);
|
|
|
+ border-color: mix($-color-white, #999, 85%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not([hover-class]):active {
|
|
|
+ color: mix($-color-white, $-color-black, 50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &[size=mini] {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 200;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ &.uni-btn-small {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ &.uni-btn-mini {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.uni-btn-radius {
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+ &[type=primary] {
|
|
|
+ @include is-color($uni-primary);
|
|
|
+ @include is-plain($uni-primary)
|
|
|
+ }
|
|
|
+ &[type=success] {
|
|
|
+ @include is-color($uni-success);
|
|
|
+ @include is-plain($uni-success)
|
|
|
+ }
|
|
|
+ &[type=error] {
|
|
|
+ @include is-color($uni-error);
|
|
|
+ @include is-plain($uni-error)
|
|
|
+ }
|
|
|
+ &[type=warning] {
|
|
|
+ @include is-color($uni-warning);
|
|
|
+ @include is-plain($uni-warning)
|
|
|
+ }
|
|
|
+ &[type=info] {
|
|
|
+ @include is-color($uni-info);
|
|
|
+ @include is-plain($uni-info)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|