rsuite 5.34.1 → 5.35.0

package/dist/rsuite.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;
@@ -13050,6 +13066,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-left-radius: 50%;
+  height: 48px;
+  position: absolute;
+  right: -24px;
+  top: -24px;
+  width: 48px;
+  z-index: 3;
+  opacity: 0;
+}
+.rs-radio-tile-mark-icon {
+  position: absolute;
+  font-size: 16px;
+  top: 25px;
+  left: 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;