rsuite 5.34.0 → 5.35.0

package/dist/rsuite-rtl.css

@@ -261,6 +261,12 @@
   --rs-radio-border: #d9d9d9;
   --rs-radio-checked-bg: #3498ff;
   --rs-radio-disabled-bg: #f7f7fa;
+  --rs-radio-tile-border: #d9d9d9;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #3498ff;
+  --rs-radio-tile-checked-mark-color: #fff;
+  --rs-radio-tile-checked-disabled-color: #cce9ff;
+  --rs-radio-tile-icon-size: 32px;
   --rs-rate-symbol: #8e8e93;
   --rs-rate-symbol-checked: #ffb300;
   --rs-toggle-bg: #d9d9d9;
@@ -585,6 +591,11 @@
   --rs-radio-border: #6a6f76;
   --rs-radio-checked-bg: #34c3ff;
   --rs-radio-disabled-bg: #5c6066;
+  --rs-radio-tile-border: #858b94;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #34c3ff;
+  --rs-radio-tile-checked-mark-color: #1a1d24;
+  --rs-radio-tile-checked-disabled-color: #006199;
   --rs-rate-symbol: #3c3f43;
   --rs-rate-symbol-checked: #ffb300;
   --rs-toggle-bg: #6a6f76;
@@ -916,6 +927,11 @@
   --rs-radio-border: #cbced4;
   --rs-radio-checked-bg: #ffff00;
   --rs-radio-disabled-bg: #5c6066;
+  --rs-radio-tile-border: #858b94;
+  --rs-radio-tile-bg: #fff;
+  --rs-radio-tile-checked-color: #ffff00;
+  --rs-radio-tile-checked-mark-color: #1a1d24;
+  --rs-radio-tile-checked-disabled-color: #8f9900;
   --rs-rate-symbol: #cbced4;
   --rs-rate-symbol-checked: #ffff00;
   --rs-toggle-bg: #1a1d24;
@@ -4022,7 +4038,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-checkbox-inline:first-child {
   margin-right: 0;
@@ -4185,12 +4201,14 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-checkbox-group > .rs-checkbox {
+  margin-right: -10px;
+}
 .rs-checkbox-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-picker-check-menu-items {
   margin-bottom: 6px;
@@ -12624,7 +12642,7 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   vertical-align: middle;
   font-weight: normal;
   margin-top: 0;
-  margin-right: 10px;
+  margin-left: 10px;
 }
 .rs-plaintext .rs-radio-inline:first-child {
   margin-right: 0;
@@ -12774,12 +12792,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.rs-radio-group > .rs-radio {
+  margin-right: -10px;
+}
 .rs-radio-group-inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  margin-right: -10px;
 }
 .rs-radio-group-picker {
   display: -webkit-inline-box;
@@ -13030,6 +13050,74 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   color: #8e8e93;
   color: var(--rs-text-secondary);
 }
+.rs-radio-tile {
+  border-radius: 6px;
+  overflow: hidden;
+  border: 2px solid #d9d9d9;
+  border: 2px solid var(--rs-radio-tile-border);
+  padding: 10px;
+  position: relative;
+  cursor: pointer;
+}
+.rs-radio-tile-label {
+  font-weight: bold;
+}
+.rs-radio-tile-content {
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+}
+.rs-radio-tile-mark {
+  background: #3498ff;
+  background: var(--rs-radio-tile-checked-color);
+  border-bottom-right-radius: 50%;
+  height: 48px;
+  position: absolute;
+  left: -24px;
+  top: -24px;
+  width: 48px;
+  z-index: 3;
+  opacity: 0;
+}
+.rs-radio-tile-mark-icon {
+  position: absolute;
+  font-size: 16px;
+  top: 25px;
+  right: 7px;
+  color: #fff;
+  color: var(--rs-radio-tile-checked-mark-color);
+}
+.rs-radio-tile-checked .rs-radio-tile-mark {
+  opacity: 1;
+}
+.rs-radio-tile-checked.rs-radio-tile-disabled {
+  border-color: #cce9ff;
+  border-color: var(--rs-radio-tile-checked-disabled-color);
+}
+.rs-radio-tile-checked.rs-radio-tile-disabled .rs-radio-tile-mark {
+  background-color: #cce9ff;
+  background-color: var(--rs-radio-tile-checked-disabled-color);
+}
+.rs-radio-tile-checked,
+.rs-radio-tile:hover:not(.rs-radio-tile-disabled) {
+  border: 2px solid #3498ff;
+  border: 2px solid var(--rs-radio-tile-checked-color);
+}
+.rs-radio-tile-disabled,
+.rs-radio-tile-disabled .rs-radio-tile-content {
+  color: #c5c6c7;
+  color: var(--rs-text-disabled);
+  cursor: not-allowed;
+}
+.rs-radio-tile input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.rs-radio-tile-icon {
+  font-size: 32px;
+  font-size: var(--rs-radio-tile-icon-size);
+}
 .rs-ripple {
   position: absolute;
   display: block;