@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

package/lib/radio/style/index-pure.less

@@ -0,0 +1,371 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@radio-prefix-cls: ~'@{ant-prefix}-radio';
+@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
+@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
+@radio-duration: 0.3s;
+@radio-focus-shadow: 0 0 0 3px @slider-handle-color-focus-shadow;
+@radio-button-focus-shadow: @radio-focus-shadow;
+
+.@{radio-group-prefix-cls} {
+  .reset-component();
+
+  display: inline-block;
+  font-size: 0;
+
+  .@{ant-prefix}-badge-count {
+    z-index: 1;
+  }
+
+  > .@{ant-prefix}-badge:not(:first-child) > .@{radio-prefix-cls}-button-wrapper {
+    border-left: none;
+  }
+}
+
+// 一般状态
+.@{radio-prefix-cls}-wrapper {
+  .reset-component();
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  margin-right: @radio-wrapper-margin-right;
+  cursor: pointer;
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &::after {
+    display: inline-block;
+    width: 0;
+    overflow: hidden;
+    content: '\a0';
+  }
+
+  &&-in-form-item {
+    input[type='radio'] {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.@{radio-prefix-cls} {
+  .reset-component();
+
+  position: relative;
+  top: @radio-top;
+  display: inline-block;
+  outline: none;
+  cursor: pointer;
+
+  .@{radio-prefix-cls}-wrapper:hover &,
+  &:hover .@{radio-inner-prefix-cls},
+  &-input:focus + .@{radio-inner-prefix-cls} {
+    border-color: @radio-dot-color;
+  }
+
+  &-input:focus + .@{radio-inner-prefix-cls} {
+    box-shadow: @radio-focus-shadow;
+  }
+
+  &-checked::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid @radio-dot-color;
+    border-radius: 50%;
+    visibility: hidden;
+    animation: antRadioEffect 0.36s ease-in-out;
+    animation-fill-mode: both;
+    content: '';
+  }
+
+  &:hover::after,
+  .@{radio-prefix-cls}-wrapper:hover &::after {
+    visibility: visible;
+  }
+
+  &-inner {
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: @radio-size;
+      height: @radio-size;
+      margin-top: -(@radio-size / 2);
+      margin-left: -(@radio-size / 2);
+      background-color: @radio-dot-color;
+      border-top: 0;
+      border-left: 0;
+      border-radius: @radio-size;
+      transform: scale(0);
+      opacity: 0;
+      transition: all @radio-duration @ease-in-out-circ;
+      content: ' ';
+    }
+
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    width: @radio-size;
+    height: @radio-size;
+    background-color: @radio-button-bg;
+    border-color: @border-color-base;
+    border-style: solid;
+    border-width: @radio-border-width;
+    border-radius: 50%;
+    transition: all @radio-duration;
+  }
+
+  &-input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+  }
+
+  &&-disabled {
+    .@{radio-inner-prefix-cls} {
+      border-color: @border-color-base;
+    }
+  }
+}
+
+// 选中状态
+.@{radio-prefix-cls}-checked {
+  .@{radio-inner-prefix-cls} {
+    border-color: @radio-dot-color;
+
+    &::after {
+      transform: scale((unit(@radio-dot-size) / unit(@radio-size)));
+      opacity: 1;
+      transition: all @radio-duration @ease-in-out-circ;
+    }
+  }
+}
+
+.@{radio-prefix-cls}-disabled {
+  cursor: not-allowed;
+
+  .@{radio-inner-prefix-cls} {
+    background-color: @input-disabled-bg;
+    cursor: not-allowed;
+
+    &::after {
+      background-color: @radio-dot-disabled-color;
+    }
+  }
+
+  .@{radio-prefix-cls}-input {
+    cursor: not-allowed;
+  }
+
+  & + span {
+    color: @disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+span.@{radio-prefix-cls} + * {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.@{radio-prefix-cls}-button-wrapper {
+  position: relative;
+  display: inline-block;
+  height: @btn-height-base;
+  margin: 0;
+  padding: 0 @radio-button-padding-horizontal;
+  color: @radio-button-color;
+  font-size: @font-size-base;
+  line-height: @btn-height-base - 2px;
+  background: @radio-button-bg;
+  border: @border-width-base @border-style-base @border-color-base;
+  // strange align fix for chrome but works
+  // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+  border-top-width: @border-width-base + 0.02px;
+  border-left-width: 0;
+  cursor: pointer;
+  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
+
+  a {
+    color: @radio-button-color;
+  }
+
+  > .@{radio-prefix-cls}-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .@{radio-group-prefix-cls}-large & {
+    height: @input-height-lg;
+    font-size: @font-size-lg;
+    line-height: @input-height-lg - 2px;
+  }
+
+  .@{radio-group-prefix-cls}-small & {
+    height: @input-height-sm;
+    padding: 0 @control-padding-horizontal-sm - 1px;
+    line-height: @input-height-sm - 2px;
+  }
+
+  &:not(:first-child) {
+    &::before {
+      position: absolute;
+      top: @border-width-base * -1;
+      left: -1px;
+      display: block;
+      box-sizing: content-box;
+      width: 1px;
+      height: 100%;
+      padding: @border-width-base 0;
+      background-color: @border-color-base;
+      transition: background-color 0.3s;
+      content: '';
+    }
+  }
+
+  &:first-child {
+    border-left: @border-width-base @border-style-base @border-color-base;
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+  }
+
+  &:last-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+
+  &:first-child:last-child {
+    border-radius: @border-radius-base;
+  }
+
+  &:hover {
+    position: relative;
+    color: @radio-dot-color;
+  }
+
+  &:focus-within {
+    box-shadow: @radio-button-focus-shadow;
+  }
+
+  .@{radio-prefix-cls}-inner,
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &-checked:not(&-disabled) {
+    z-index: 1;
+    color: @radio-dot-color;
+    background: @radio-button-checked-bg;
+    border-color: @radio-dot-color;
+
+    &::before {
+      background-color: @radio-dot-color;
+    }
+
+    &:first-child {
+      border-color: @radio-dot-color;
+    }
+
+    &:hover {
+      color: @radio-button-hover-color;
+      border-color: @radio-button-hover-color;
+
+      &::before {
+        background-color: @radio-button-hover-color;
+      }
+    }
+
+    &:active {
+      color: @radio-button-active-color;
+      border-color: @radio-button-active-color;
+
+      &::before {
+        background-color: @radio-button-active-color;
+      }
+    }
+
+    &:focus-within {
+      box-shadow: @radio-button-focus-shadow;
+    }
+  }
+
+  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
+    color: @radio-solid-checked-color;
+    background: @radio-dot-color;
+    border-color: @radio-dot-color;
+
+    &:hover {
+      color: @radio-solid-checked-color;
+      background: @radio-button-hover-color;
+      border-color: @radio-button-hover-color;
+    }
+
+    &:active {
+      color: @radio-solid-checked-color;
+      background: @radio-button-active-color;
+      border-color: @radio-button-active-color;
+    }
+
+    &:focus-within {
+      box-shadow: @radio-button-focus-shadow;
+    }
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    background-color: @input-disabled-bg;
+    border-color: @border-color-base;
+    cursor: not-allowed;
+
+    &:first-child,
+    &:hover {
+      color: @disabled-color;
+      background-color: @input-disabled-bg;
+      border-color: @border-color-base;
+    }
+
+    &:first-child {
+      border-left-color: @border-color-base;
+    }
+  }
+
+  &-disabled&-checked {
+    color: @radio-disabled-button-checked-color;
+    background-color: @radio-disabled-button-checked-bg;
+    border-color: @border-color-base;
+    box-shadow: none;
+  }
+}
+
+@keyframes antRadioEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+
+@import './rtl';

package/lib/radio/style/index.css

@@ -0,0 +1,349 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-radio-group {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: inline-block;
+  font-size: 0;
+}
+.ant-radio-group .ant-badge-count {
+  z-index: 1;
+}
+.ant-radio-group > .ant-badge:not(:first-child) > .ant-radio-button-wrapper {
+  border-left: none;
+}
+.ant-radio-wrapper {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+  margin-right: 8px;
+  cursor: pointer;
+}
+.ant-radio-wrapper-disabled {
+  cursor: not-allowed;
+}
+.ant-radio-wrapper::after {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  content: '\a0';
+}
+.ant-radio-wrapper.ant-radio-wrapper-in-form-item input[type='radio'] {
+  width: 14px;
+  height: 14px;
+}
+.ant-radio {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  top: 0.2em;
+  display: inline-block;
+  outline: none;
+  cursor: pointer;
+}
+.ant-radio-wrapper:hover .ant-radio,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-input:focus + .ant-radio-inner {
+  border-color: #1890ff;
+}
+.ant-radio-input:focus + .ant-radio-inner {
+  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
+}
+.ant-radio-checked::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #1890ff;
+  border-radius: 50%;
+  visibility: hidden;
+  animation: antRadioEffect 0.36s ease-in-out;
+  animation-fill-mode: both;
+  content: '';
+}
+.ant-radio:hover::after,
+.ant-radio-wrapper:hover .ant-radio::after {
+  visibility: visible;
+}
+.ant-radio-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  border-color: #d9d9d9;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+.ant-radio-inner::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+  background-color: #1890ff;
+  border-top: 0;
+  border-left: 0;
+  border-radius: 16px;
+  transform: scale(0);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+  content: ' ';
+}
+.ant-radio-input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+}
+.ant-radio.ant-radio-disabled .ant-radio-inner {
+  border-color: #d9d9d9;
+}
+.ant-radio-checked .ant-radio-inner {
+  border-color: #1890ff;
+}
+.ant-radio-checked .ant-radio-inner::after {
+  transform: scale(0.5);
+  opacity: 1;
+  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.ant-radio-disabled {
+  cursor: not-allowed;
+}
+.ant-radio-disabled .ant-radio-inner {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+.ant-radio-disabled .ant-radio-inner::after {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.ant-radio-disabled .ant-radio-input {
+  cursor: not-allowed;
+}
+.ant-radio-disabled + span {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+span.ant-radio + * {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+.ant-radio-button-wrapper {
+  position: relative;
+  display: inline-block;
+  height: 32px;
+  margin: 0;
+  padding: 0 15px;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  line-height: 30px;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-top-width: 1.02px;
+  border-left-width: 0;
+  cursor: pointer;
+  transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
+}
+.ant-radio-button-wrapper a {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ant-radio-button-wrapper > .ant-radio-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+}
+.ant-radio-group-large .ant-radio-button-wrapper {
+  height: 40px;
+  font-size: 16px;
+  line-height: 38px;
+}
+.ant-radio-group-small .ant-radio-button-wrapper {
+  height: 24px;
+  padding: 0 7px;
+  line-height: 22px;
+}
+.ant-radio-button-wrapper:not(:first-child)::before {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  display: block;
+  box-sizing: content-box;
+  width: 1px;
+  height: 100%;
+  padding: 1px 0;
+  background-color: #d9d9d9;
+  transition: background-color 0.3s;
+  content: '';
+}
+.ant-radio-button-wrapper:first-child {
+  border-left: 1px solid #d9d9d9;
+  border-radius: 2px 0 0 2px;
+}
+.ant-radio-button-wrapper:last-child {
+  border-radius: 0 2px 2px 0;
+}
+.ant-radio-button-wrapper:first-child:last-child {
+  border-radius: 2px;
+}
+.ant-radio-button-wrapper:hover {
+  position: relative;
+  color: #1890ff;
+}
+.ant-radio-button-wrapper:focus-within {
+  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
+}
+.ant-radio-button-wrapper .ant-radio-inner,
+.ant-radio-button-wrapper input[type='checkbox'],
+.ant-radio-button-wrapper input[type='radio'] {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  z-index: 1;
+  color: #1890ff;
+  background: #fff;
+  border-color: #1890ff;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+  background-color: #1890ff;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
+  border-color: #1890ff;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+  color: #40a9ff;
+  border-color: #40a9ff;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
+  background-color: #40a9ff;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
+  color: #096dd9;
+  border-color: #096dd9;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before {
+  background-color: #096dd9;
+}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
+}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  color: #fff;
+  background: #1890ff;
+  border-color: #1890ff;
+}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+  color: #fff;
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
+  color: #fff;
+  background: #096dd9;
+  border-color: #096dd9;
+}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
+  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12);
+}
+.ant-radio-button-wrapper-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.ant-radio-button-wrapper-disabled:first-child,
+.ant-radio-button-wrapper-disabled:hover {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  border-color: #d9d9d9;
+}
+.ant-radio-button-wrapper-disabled:first-child {
+  border-left-color: #d9d9d9;
+}
+.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #e6e6e6;
+  border-color: #d9d9d9;
+  box-shadow: none;
+}
+@keyframes antRadioEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+.ant-radio-group.ant-radio-group-rtl {
+  direction: rtl;
+}
+.ant-radio-wrapper.ant-radio-wrapper-rtl {
+  margin-right: 0;
+  margin-left: 8px;
+  direction: rtl;
+}
+.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl {
+  border-right-width: 0;
+  border-left-width: 1px;
+}
+.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:not(:first-child)::before {
+  right: -1px;
+  left: 0;
+}
+.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:first-child {
+  border-right: 1px solid #d9d9d9;
+  border-radius: 0 2px 2px 0;
+}
+.ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
+  border-right-color: #40a9ff;
+}
+.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:last-child {
+  border-radius: 2px 0 0 2px;
+}
+.ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
+  border-right-color: #d9d9d9;
+}

package/lib/radio/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/default.less';
+import './index.less';

package/lib/radio/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/default.less");
+
+require("./index.less");

package/lib/radio/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+
+@import './index-pure.less';