.wux-selector-group { --selector-group-columns: 3; --selector-group-column-gap: 16rpx; overflow: hidden; font-size: 28rpx; line-height: 1.5 } .wux-selector-group__grid { display: grid; grid-gap: 20rpx; grid-column-gap: var(--selector-group-column-gap,16rpx); -moz-column-gap: var(--selector-group-column-gap,16rpx); column-gap: var(--selector-group-column-gap,16rpx); grid-row-gap: var(--selector-group-column-gap,16rpx); row-gap: var(--selector-group-column-gap,16rpx); grid-template-columns: repeat(var(--selector-group-columns,3),minmax(0,1fr)); align-items: stretch } .wux-selector-group__grid-item { padding: 16rpx 32rpx; position: relative; background-color: #f5f5f5; border: none; border-radius: 4rpx; color: rgba(0,0,0,.85); opacity: 1; cursor: pointer; display: inline-block; text-align: center; overflow: hidden; vertical-align: top } .wux-selector-group__grid-item--rounded { border-radius: 200rpx } .wux-selector-group__grid-item--rectangular { border-radius: 0 } .wux-selector-group__grid-item--current { color: #33cd5f; background-color: rgba(174,235,191,.4); border: none } .wux-selector-group__grid-item--disabled { opacity: .3 } .wux-selector-group__desc { font-size: 24rpx; color: rgba(0,0,0,.45) } .wux-selector-group__check-mark { display: none; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-top: 16rpx solid transparent; border-bottom: 16rpx solid #33cd5f; border-left: 20rpx solid transparent; border-right: 20rpx solid #33cd5f } .wux-selector-group__check-mark-icon { position: absolute; left: 0; top: 0; height: 12rpx; width: 16rpx } .wux-selector-group__grid-item--current:not(.wux-selector-group__grid-item--rounded) .wux-selector-group__check-mark { display: block } .wux-selector-group__selectable { position: absolute!important; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; z-index: 2; border: 0 none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .wux-selector-group--light .wux-selector-group__grid-item--current { color: #ddd; background-color: rgba(255,255,255,.4) } .wux-selector-group--light .wux-selector-group__check-mark { border-bottom-color: #ddd; border-right-color: #ddd } .wux-selector-group--stable .wux-selector-group__grid-item--current { color: #b2b2b2; background-color: rgba(255,255,255,.4) } .wux-selector-group--stable .wux-selector-group__check-mark { border-bottom-color: #b2b2b2; border-right-color: #b2b2b2 } .wux-selector-group--positive .wux-selector-group__grid-item--current { color: #387ef5; background-color: rgba(202,220,252,.4) } .wux-selector-group--positive .wux-selector-group__check-mark { border-bottom-color: #387ef5; border-right-color: #387ef5 } .wux-selector-group--calm .wux-selector-group__grid-item--current { color: #11c1f3; background-color: rgba(163,231,250,.4) } .wux-selector-group--calm .wux-selector-group__check-mark { border-bottom-color: #11c1f3; border-right-color: #11c1f3 } .wux-selector-group--assertive .wux-selector-group__grid-item--current { color: #ef473a; background-color: rgba(250,203,200,.4) } .wux-selector-group--assertive .wux-selector-group__check-mark { border-bottom-color: #ef473a; border-right-color: #ef473a } .wux-selector-group--balanced .wux-selector-group__grid-item--current { color: #33cd5f; background-color: rgba(174,235,191,.4) } .wux-selector-group--balanced .wux-selector-group__check-mark { border-bottom-color: #33cd5f; border-right-color: #33cd5f } .wux-selector-group--energized .wux-selector-group__grid-item--current { color: #ffc900; background-color: rgba(255,233,153,.4) } .wux-selector-group--energized .wux-selector-group__check-mark { border-bottom-color: #ffc900; border-right-color: #ffc900 } .wux-selector-group--royal .wux-selector-group__grid-item--current { color: #886aea; background-color: rgba(243,240,253,.4) } .wux-selector-group--royal .wux-selector-group__check-mark { border-bottom-color: #886aea; border-right-color: #886aea } .wux-selector-group--dark .wux-selector-group__grid-item--current { color: #444; background-color: rgba(145,145,145,.4) } .wux-selector-group--dark .wux-selector-group__check-mark { border-bottom-color: #444; border-right-color: #444 }