@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/radio/radio.css

@@ -0,0 +1,346 @@
+/* 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

@@ -0,0 +1,379 @@
+@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";