@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/radio/radio.css

@@ -1,346 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-radio {
-  box-sizing: border-box;
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: relative;
-  display: inline-flex;
-  flex-wrap: wrap;
-  min-height: 20px;
-  min-width: 16px;
-  cursor: pointer;
-  vertical-align: bottom;
-  text-align: left;
-}
-.semi-radio.semi-radio-vertical {
-  display: block;
-}
-.semi-radio input[type=checkbox],
-.semi-radio input[type=radio] {
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-.semi-radio:hover .semi-radio-inner-display {
-  background: var(--semi-color-fill-0);
-  border: solid 1px var(--semi-color-focus-border);
-}
-.semi-radio:hover.semi-radio-cardRadioGroup .semi-radio-inner-display {
-  background: var(--semi-color-white);
-}
-.semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
-  background: var(--semi-color-primary-hover);
-}
-.semi-radio:active .semi-radio-inner-display {
-  background: var(--semi-color-fill-1);
-}
-.semi-radio:active.semi-radio-cardRadioGroup .semi-radio-inner-display {
-  background: var(--semi-color-white);
-}
-.semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
-  background: var(--semi-color-primary-active);
-}
-.semi-radio-buttonRadioComponent {
-  padding: 4px;
-  background: var(--semi-color-fill-0);
-  border-radius: var(--semi-border-radius-small);
-}
-.semi-radio-buttonRadioGroup {
-  padding: 4px;
-  border-radius: var(--semi-border-radius-small);
-  line-height: 16px;
-}
-.semi-radio-buttonRadioGroup:not(:last-child) {
-  padding-right: 0;
-}
-.semi-radio-buttonRadioGroup-small {
-  padding: 2px 4px;
-  line-height: 16px;
-}
-.semi-radio-buttonRadioGroup-large {
-  padding: 4px;
-  line-height: 20px;
-}
-.semi-radio-cardRadioGroup {
-  flex-wrap: nowrap;
-  border-radius: var(--semi-border-radius-small);
-  padding: 12px 16px;
-  background: transparent;
-  border: 1px solid transparent;
-}
-.semi-radio-cardRadioGroup .semi-radio-inner {
-  position: relative;
-  margin-right: 8px;
-  flex-shrink: 0;
-}
-.semi-radio-cardRadioGroup .semi-radio-inner-display {
-  background: var(--semi-color-white);
-}
-.semi-radio-cardRadioGroup .semi-radio-addon {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--semi-color-text-0);
-  margin-left: 0;
-  padding-left: 0;
-}
-.semi-radio-cardRadioGroup .semi-radio-extra {
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 20px;
-  color: var(--semi-color-text-2);
-  padding-left: 0;
-}
-.semi-radio-cardRadioGroup:active {
-  background: var(--semi-color-fill-1);
-}
-.semi-radio-cardRadioGroup_checked {
-  background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
-}
-.semi-radio-cardRadioGroup_hover {
-  background: var(--semi-color-fill-0);
-}
-.semi-radio-cardRadioGroup_disabled:active {
-  background: transparent;
-}
-.semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
-  background: var(--semi-color-disabled-fill);
-  border: solid 1px var(--semi-color-border);
-}
-.semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
-  background: var(--semi-color-primary-disabled);
-}
-.semi-radio-inner {
-  position: absolute;
-  display: inline-block;
-  top: 2px;
-  left: 0;
-  width: 16px;
-  height: 16px;
-  vertical-align: sub;
-  user-select: none;
-}
-.semi-radio-inner-display {
-  position: absolute;
-  left: 0;
-  top: 0;
-  box-sizing: border-box;
-  width: 16px;
-  height: 16px;
-  border: solid 1px var(--semi-color-text-3);
-  border-radius: 16px;
-  background: transparent;
-}
-.semi-radio-inner-display .semi-icon {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  font-size: 14px;
-}
-.semi-radio:hover .semi-radio-inner-display {
-  background: var(--semi-color-fill-0);
-}
-.semi-radio:active .semi-radio-inner-display {
-  background: var(--semi-color-fill-1);
-}
-.semi-radio-addon {
-  user-select: none;
-  padding-left: 8px;
-  margin-left: 16px;
-  color: var(--semi-color-text-0);
-  display: inline-flex;
-  align-items: center;
-}
-.semi-radio-addon-buttonRadio {
-  margin-left: 0;
-  text-align: center;
-  border-radius: var(--semi-border-radius-small);
-  font-weight: 600;
-  color: var(--semi-color-text-1);
-  font-size: 12px;
-  padding: 4px 16px;
-}
-.semi-radio-addon-buttonRadio-hover {
-  font-weight: 600;
-  background: var(--semi-color-fill-1);
-}
-.semi-radio-addon-buttonRadio-checked {
-  font-weight: 600;
-  background: var(--semi-color-bg-3);
-  color: var(--semi-color-primary);
-}
-.semi-radio-addon-buttonRadio-disabled {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-}
-.semi-radio-addon-buttonRadio-small {
-  font-size: 12px;
-  padding: 2px 16px;
-}
-.semi-radio-addon-buttonRadio-large {
-  font-size: 14px;
-  padding: 6px 24px;
-}
-.semi-radio .semi-radio-inner-checked:hover .semi-radio-inner-display {
-  background: var(--semi-color-primary-hover);
-}
-.semi-radio .semi-radio-inner-checked:active .semi-radio-inner-display {
-  background: var(--semi-color-primary-active);
-}
-.semi-radio .semi-radio-inner-checked .semi-radio-inner-display {
-  border: solid 1px var(--semi-color-primary);
-  background: var(--semi-color-primary);
-  color: white;
-  border-radius: 16px;
-}
-.semi-radio .semi-radio-inner-checked > .semi-radio-addon {
-  color: var(--semi-color-text-0);
-}
-.semi-radio .semi-radio-inner-buttonRadio,
-.semi-radio .semi-radio-inner-pureCardRadio {
-  display: none;
-}
-.semi-radio-disabled, .semi-radio-disabled:hover {
-  cursor: not-allowed;
-}
-.semi-radio-disabled .semi-radio-inner {
-  cursor: not-allowed;
-}
-.semi-radio-disabled .semi-radio-inner-display {
-  opacity: 0.75;
-  background: var(--semi-color-disabled-fill);
-  border-color: var(--semi-color-border);
-}
-.semi-radio-disabled .semi-radio-inner-display:hover {
-  background: transparent;
-}
-.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
-  background: var(--semi-color-primary-disabled);
-  border-color: var(--semi-color-border);
-}
-.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
-  background: var(--semi-color-primary-disabled);
-}
-.semi-radio-disabled .semi-radio-addon {
-  color: var(--semi-color-disabled-text);
-}
-.semi-radio-disabled .semi-radio-extra {
-  color: var(--semi-color-disabled-text);
-}
-.semi-radio-extra {
-  flex-grow: 1;
-  flex-basis: 100%;
-  flex-shrink: 0;
-  color: var(--semi-color-text-2);
-  padding-left: 24px;
-  box-sizing: border-box;
-}
-
-.semi-radioGroup {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-.semi-radioGroup-vertical .semi-radio:last-of-type {
-  margin-bottom: 0;
-}
-.semi-radioGroup-vertical-default .semi-radio {
-  display: block;
-  margin-bottom: 12px;
-}
-.semi-radioGroup-vertical-card .semi-radio {
-  display: flex;
-  margin-bottom: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio {
-  margin-right: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-right: 0;
-}
-.semi-radioGroup-horizontal-default {
-  display: inline-block;
-}
-.semi-radioGroup-buttonRadio {
-  display: inline-block;
-  background: var(--semi-color-fill-0);
-  border-radius: var(--semi-border-radius-small);
-  vertical-align: middle;
-}
-
-.semi-rtl .semi-radio,
-.semi-portal-rtl .semi-radio {
-  direction: rtl;
-}
-.semi-rtl .semi-radio input[type=checkbox],
-.semi-rtl .semi-radio input[type=radio],
-.semi-portal-rtl .semi-radio input[type=checkbox],
-.semi-portal-rtl .semi-radio input[type=radio] {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-buttonRadioGroup:not(:last-child),
-.semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
-  padding-left: 0;
-}
-.semi-rtl .semi-radio-inner,
-.semi-portal-rtl .semi-radio-inner {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-inner-display,
-.semi-portal-rtl .semi-radio-inner-display {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-addon,
-.semi-portal-rtl .semi-radio-addon {
-  padding-left: 0;
-  margin-left: 0;
-  padding-right: 8px;
-  margin-right: 16px;
-}
-.semi-rtl .semi-radio-addon-buttonRadio,
-.semi-portal-rtl .semi-radio-addon-buttonRadio {
-  margin-right: 0;
-}
-.semi-rtl .semi-radio-extra,
-.semi-portal-rtl .semi-radio-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-inner,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-addon,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-extra,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
-  padding-right: 0;
-}
-.semi-rtl .semi-radioGroup,
-.semi-portal-rtl .semi-radioGroup {
-  direction: rtl;
-}
-.semi-rtl .semi-radioGroup-horizontal .semi-radio,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-left: 0;
-}

package/lib/cjs/radio/radio.scss

@@ -1,379 +0,0 @@
-@import "./variables.scss";
-
-$module: #{$prefix}-radio;
-$inner-width: $width-icon-medium;
-
-.#{$module} {
-    @include box-sizing;
-    @include font-size-regular;
-    position: relative;
-    display: inline-flex;
-    flex-wrap: wrap;
-
-    &.#{$module}-vertical {
-        display: block;
-    }
-
-    min-height: $height-radio_inner_min;
-    min-width: $width-radio_inner;
-    cursor: pointer;
-    vertical-align: bottom;
-    text-align: left;
-
-    input[type="checkbox"],
-    input[type="radio"] {
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        margin: 0;
-    }
-
-    &:hover {
-        .#{$module}-inner-display {
-            background: $color-radio_default-bg-hover;
-            border: solid $width-radio_hover-border $color-radio_default-border-hover;
-        }
-
-        &.#{$module}-cardRadioGroup {
-            .#{$module}-inner-display {
-                background: $color-radio_card-bg-hover;
-            }
-        }
-
-        .#{$module}-inner-checked {
-            .#{$module}-inner-display {
-                background: $color-radio_primary-bg-hover;
-            }
-        }
-    }
-
-    &:active {
-        .#{$module}-inner-display {
-            background: $color-radio_default-bg-active;
-        }
-
-        &.#{$module}-cardRadioGroup {
-            .#{$module}-inner-display {
-                background: $color-radio_card-bg-active;
-            }
-        }
-
-        .#{$module}-inner-checked {
-            .#{$module}-inner-display {
-                background: $color-radio_primary-bg-active;
-            }
-        }
-    }
-
-    &-buttonRadioComponent {
-        padding: $spacing-radio_buttonRadio-padding;
-        background: $color-radio_buttonRadio-bg-default;
-        border-radius: $radius-radio_buttonRadio;
-    }
-
-    &-buttonRadioGroup {
-        padding: $spacing-radio_buttonRadioGroup_middle-padding;
-        border-radius: $radius-radio_buttonRadio;
-        line-height: $font-radio_buttonRadioGroup_middle-lineHeight;
-
-        &:not(:last-child) {
-            padding-right: $spacing-radio_buttonRadioGroup-paddingRight;
-        }
-
-        &-small {
-            padding: $spacing-radio_buttonRadioGroup_small-paddingX $spacing-radio_buttonRadioGroup_small-paddingY;
-            line-height: $font-radio_buttonRadioGroup_small-lineHeight;
-        }
-
-
-        &-large {
-            padding: $spacing-radio_buttonRadioGroup_large-padding;
-            line-height: $font-radio_buttonRadioGroup_large-lineHeight;
-        }
-    }
-
-    &-cardRadioGroup {
-        flex-wrap: nowrap;
-        border-radius: $radius-radio_cardRadioGroup;
-        padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
-        background: transparent;
-        border: $width-radio_cardRadioGroup_checked-border solid transparent;
-
-        .#{$module}-inner {
-            position: relative;
-            &-display {
-                background: $color-radio_card-bg-default;
-            }
-            margin-right: $spacing-radio_cardRadioGroup_inner-marginRight;
-            flex-shrink: 0;
-        }
-
-        .#{$module}-addon {
-            font-weight: $font-radio_cardRadioGroup_addon-fontWeight;
-            font-size: $font-radio_cardRadioGroup_addon-size;
-            line-height: $font-radio_cardRadioGroup_addon-lineHeight;
-            color: $color-radio_cardRadioGroup_addon-text-default;
-            margin-left: 0;
-            padding-left: 0;
-        }
-
-        .#{$module}-extra {
-            font-weight: $font-radio_cardRadioGroup_extra-fontWeight;
-            font-size: $font-radio_cardRadioGroup_extra-size;
-            line-height: $font-radio_cardRadioGroup_extra-lineHeight;
-            color: $color-radio_cardRadioGroup_extra-text-default;
-            padding-left: 0;
-        }
-
-        &:active {
-            background: $color-radio_cardRadioGroup-bg-active;
-        }
-
-        &_checked {
-            background: $color-radio_cardRadioGroup-bg-checked;
-            border: $width-radio_cardRadioGroup_checked-border solid $color-radio_cardRadioGroup_border-active;
-        }
-
-        &_hover {
-            background: $color-radio_cardRadioGroup-bg-hover;
-        }
-
-        &_disabled {
-            &:active {
-                background: transparent;
-            }
-        }
-    }
-
-    &.#{$module}-disabled:hover,
-    &.#{$module}-disabled:active {
-        .#{$module}-inner-display {
-            background: $color-radio_disabled-bg-default;
-            border: solid $width-radio_disabled-border $color-radio_disabled-border-default;
-        }
-
-        .#{$module}-inner-checked {
-            .#{$module}-inner-display {
-                background: $color-radio_checked-bg-disabled;
-            }
-        }
-    }
-
-    &-inner {
-        position: absolute;
-        display: inline-block;
-        top: 2px;
-        left: 0;
-        width: $width-radio_inner;
-        height: $width-radio_inner;
-        vertical-align: sub;
-        user-select: none; // prevent text under it will be selected when double click
-
-        &-display {
-            position: absolute;
-            left: 0;
-            top: 0;
-            @include box-sizing;
-            width: $width-radio_inner;
-            height: $width-radio_inner;
-            border: solid $width-radio_innder-border $color-radio_default-border-default;
-            border-radius: $width-radio_inner;
-            background: $color-radio_default-bg-default;
-
-            .#{$prefix}-icon {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                font-size: 14px;
-            }
-        }
-    }
-
-    &:hover {
-        .#{$module}-inner-display {
-            background: $color-radio_default-bg-hover;
-        }
-    }
-
-    &:active {
-        .#{$module}-inner-display {
-            background: $color-radio_default-bg-active;
-        }
-    }
-
-    &-addon {
-        user-select: none;
-        padding-left: $spacing-radio_addon-paddingLeft;
-        margin-left: $spacing-radio_addon-marginLeft;
-        color: $color-radio_default-text-default;
-        display: inline-flex;
-        align-items: center;
-
-        &-buttonRadio {
-            margin-left: $spacing-radio_addon_buttonRadio_marginLeft;
-            text-align: center;
-            border-radius: $radius-radio_addon_buttonRadio;
-            font-weight: $font-radio_buttonRadio-default-fontWeight;
-            color: $color-radio_buttonRadio-text-default;
-            font-size: $font-radio_buttonRadio_middle-default-size;
-            padding: $spacing-radio_addon_buttonRadio_middle-paddingY $spacing-radio_addon_buttonRadio_middle-paddingX;
-
-            &-hover {
-                font-weight: $font-radio_buttonRadio-hover-fontWeight;
-                background: $color-radio_addon_buttonRadio-bg-hover;
-            }
-
-            &-checked {
-                font-weight: $font-radio_buttonRadio-checked-fontWeight;
-                background: $color-radio_addon_buttonRadio-bg-checked;
-                color: $color-radio_addon_buttonRadio-text-checked;
-            }
-
-            &-disabled {
-                cursor: not-allowed;
-                color: $color-radio_buttonRadio-text-disabled;
-            }
-
-            &-small {
-                font-size: $font-radio_buttonRadio_small-default-size;
-                padding: $spacing-radio_addon_buttonRadio_small-paddingY $spacing-radio_addon_buttonRadio_small-paddingX;
-            }
-
-            &-large {
-                font-size: $font-radio_buttonRadio_large-default-size;
-                padding: $spacing-radio_addon_buttonRadio_large-paddingY $spacing-radio_addon_buttonRadio_large-paddingX;
-            }
-        }
-    }
-
-    .#{$module}-inner-checked {
-
-        &:hover {
-            .#{$module}-inner-display {
-                background: $color-radio_primary-bg-hover;
-            }
-        }
-
-        &:active {
-            .#{$module}-inner-display {
-                background: $color-radio_primary-bg-active;
-            }
-        }
-
-        .#{$module}-inner-display {
-            border: solid $width-radio_innder-border $color-radio_primary-border-default;
-            background: $color-radio_primary-bg-default;
-            color: $color-radio_primary-text-default;
-            border-radius: $width-radio_inner;
-        }
-
-        >.#{$module}-addon {
-            color: $color-radio_default-text-default;
-        }
-    }
-
-    .#{$module}-inner-buttonRadio,
-    .#{$module}-inner-pureCardRadio  {
-        display: none;
-    }
-
-    &-disabled {
-
-        &,
-        &:hover {
-            cursor: not-allowed;
-        }
-
-        .#{$module}-inner {
-            cursor: not-allowed;
-
-            &-display {
-                opacity: 0.75;
-                background: $color-radio_disabled-bg-default;
-                border-color: $color-radio_checked-border-disabled;
-
-                &:hover {
-                    background: $color-radio_disabled-bg-hover;
-                }
-            }
-        }
-
-        .#{$module}-inner-checked {
-            .#{$module}-inner-display {
-                background: $color-radio_checked-bg-disabled;
-                border-color: $color-radio_checked-border-disabled;
-
-                &:hover {
-                    background: $color-radio_checked-bg-disabled;
-                }
-            }
-        }
-
-        .#{$module}-addon {
-            color: $color-radio_disabled-text-default;
-        }
-
-        .#{$module}-extra {
-            color: $color-radio_disabled-text-default;
-        }
-    }
-
-    &-extra {
-        flex-grow: 1;
-        flex-basis: 100%;
-        flex-shrink: 0;
-        color: $color-radio_extra-text-default;
-        padding-left: $spacing-radio_extra-paddingLeft;
-        box-sizing: border-box;
-    }
-}
-
-.#{$module}Group {
-    @include font-size-regular;
-
-    &-vertical {
-        .#{$module} {
-            &:last-of-type {
-                margin-bottom: 0;
-            }
-        }
-        &-default {
-            .#{$module} {
-                display: block;
-                margin-bottom: $spacing-radio_group_vertical-marginBottom;
-
-            }
-        }
-        &-card {
-            .#{$module} {
-                display: flex;
-                margin-bottom: $spacing-radio_card_group_vertical-marginBottom;
-            }
-        }
-    }
-
-    &-horizontal {
-        .#{$module} {
-            margin-right: $spacing-radio_group_horizontal-marginRight;
-
-            &:last-of-type {
-                margin-right: 0;
-            }
-        }
-        &-default {
-            display: inline-block;
-        }
-    }
-
-    &-buttonRadio {
-        display: inline-block;
-        background: $color-radio_buttonRadio-bg-default;
-        border-radius: $radius-radio_buttonRadio;
-        vertical-align: middle;
-    }
-}
-
-@import "./rtl.scss";