choerodon-ui/lib/radio/style/index.css

An enterprise-class UI design language and React-based implementation

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
.c7n-radio-group {
  display: inline-block;
  line-height: unset;
}
.c7n-radio-group-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
.c7n-radio-group-wrapper.c7n-radio-group-has-label {
  position: relative;
}
.c7n-radio-group-wrapper.c7n-radio-group-has-label .c7n-radio-group {
  padding-top: 0.17rem;
}
.c7n-radio-group-wrapper .c7n-radio-group-label.label-disabled {
  color: rgba(0, 0, 0, 0.54);
}
.c7n-radio-group-wrapper .c7n-radio-group-label {
  position: absolute;
  left: 0;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  -webkit-transform: scale(0.75) translateY(0) translateZ(0.00001rem);
          transform: scale(0.75) translateY(0) translateZ(0.00001rem);
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}
.c7n-radio-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  margin-right: 0.08rem;
  white-space: nowrap;
  cursor: pointer;
}
.c7n-radio-wrapper:hover .c7n-radio-input:not(:disabled):not(:checked) + .c7n-radio-inner {
  border-color: #3f51b5;
}
.c7n-radio {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: text-bottom;
  outline: none;
  cursor: pointer;
}
.c7n-radio-checked::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.01rem solid #3f51b5;
  border-radius: 50%;
  visibility: hidden;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  content: '';
}
.c7n-radio-inner {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  background-color: transparent;
  border: 0.01rem solid rgba(0, 0, 0, 0.24);
  border-radius: 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.c7n-radio-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
}
.c7n-radio-checked .c7n-radio-inner {
  padding: 0.02rem;
  background-color: #3f51b5;
  background-clip: content-box;
  border-color: #3f51b5;
  border-width: 0.01rem;
}
.c7n-radio-disabled.c7n-radio-checked .c7n-radio-inner {
  background-color: rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.24);
}
.c7n-radio-wrapper-disabled {
  cursor: not-allowed;
}
.c7n-radio-wrapper-disabled .c7n-radio-inner {
  background-color: transparent;
}
.c7n-radio-disabled {
  cursor: not-allowed;
}
.c7n-radio-disabled + span {
  color: rgba(0, 0, 0, 0.54);
  cursor: not-allowed;
}
span.c7n-radio + * {
  padding-right: 0.08rem;
  padding-left: 0.08rem;
}
.c7n-radio-button-wrapper {
  position: relative;
  display: inline-block;
  min-width: unset;
  height: 0.3rem;
  margin: 0;
  padding: 0 calc(0.16rem - 0.01rem);
  color: #000000;
  line-height: calc(0.3rem - 0.01rem * 2);
  text-align: center;
  background: transparent;
  border: 0.01rem solid #e0e0e0;
  border-top-width: calc(0.01rem + 0.0002rem);
  border-left: 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.c7n-radio-button-wrapper:not(.c7n-radio-button-wrapper-disabled):not(.c7n-radio-button-wrapper-checked):hover {
  color: #000000;
}
.c7n-radio-button-wrapper a {
  color: #000000;
}
.c7n-radio-button-wrapper > .c7n-radio-button {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0;
}
.c7n-radio-group-large .c7n-radio-button-wrapper {
  height: 0.4rem;
  font-size: 0.16rem;
  line-height: calc(0.4rem - 0.02rem);
}
.c7n-radio-group-small .c7n-radio-button-wrapper {
  height: 0.24rem;
  padding: 0 calc(0.08rem - 0.01rem);
  line-height: calc(0.24rem - 0.02rem);
}
.c7n-radio-button-wrapper:not(:first-child)::before {
  position: absolute;
  top: 0;
  left: -0.01rem;
  display: block;
  width: 0.01rem;
  height: 100%;
  background-color: #e0e0e0;
  content: '';
}
.c7n-radio-button-wrapper:first-child {
  border-left: 0.01rem solid #e0e0e0;
  border-radius: 0.02rem 0 0 0.02rem;
}
.c7n-radio-button-wrapper:last-child {
  border-radius: 0 0.02rem 0.02rem 0;
}
.c7n-radio-button-wrapper:first-child:last-child {
  border-radius: 0.02rem;
}
.c7n-radio-button-wrapper .c7n-radio-inner,
.c7n-radio-button-wrapper input[type='checkbox'],
.c7n-radio-button-wrapper input[type='radio'] {
  width: 0;
  height: 0;
  opacity: 0;
}
.c7n-radio-button-wrapper-checked {
  z-index: 1;
  color: #3f51b5;
  background: transparent;
  border-color: #3f51b5;
  -webkit-box-shadow: -0.01rem 0 0 0 #3f51b5;
          box-shadow: -0.01rem 0 0 0 #3f51b5;
}
.c7n-radio-button-wrapper-checked::before {
  background-color: #3f51b5 !important;
  opacity: 0.1;
}
.c7n-radio-button-wrapper-checked:first-child {
  border-color: #3f51b5;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.c7n-radio-button-wrapper-checked:active {
  color: rgba(63, 81, 181, 0.7);
  border-color: rgba(63, 81, 181, 0.7);
  -webkit-box-shadow: -0.01rem 0 0 0 rgba(63, 81, 181, 0.7);
          box-shadow: -0.01rem 0 0 0 rgba(63, 81, 181, 0.7);
}
.c7n-radio-group-solid .c7n-radio-button-wrapper-checked:not(.c7n-radio-button-wrapper-disabled) {
  color: #fff;
  background-color: #3f51b5;
  border-color: #3f51b5;
}
.c7n-radio-group-solid .c7n-radio-button-wrapper-checked:not(.c7n-radio-button-wrapper-disabled):hover {
  color: #fff;
  background-color: rgba(63, 81, 181, 0.5);
  border-color: rgba(63, 81, 181, 0.5);
}
.c7n-radio-group-solid .c7n-radio-button-wrapper-checked:not(.c7n-radio-button-wrapper-disabled):active {
  color: #fff;
  background-color: rgba(63, 81, 181, 0.7);
  border-color: rgba(63, 81, 181, 0.7);
}
.c7n-radio-button-wrapper-disabled {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  cursor: not-allowed;
}
.c7n-radio-button-wrapper-disabled:first-child {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  border-left-color: #e0e0e0;
}
.c7n-radio-button-wrapper-disabled.c7n-radio-button-wrapper-checked {
  color: #fff;
  background-color: #e6e6e6;
  border-color: rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.c7n-radio-button-wrapper + .c7n-radio-button-wrapper {
  margin-left: 0rem;
}