1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- @import (reference) './variable.less';
- @checkboxItemPrefix: ant-checkbox-item;
- .@{checkboxItemPrefix} {
- color: @COLOR_TEXT_PRIMARY;
- margin-right: 16 * @rpx;
- &-container {
- display: flex;
- align-items: center;
- }
- &-content {
- padding-left: 10 * @rpx;
- text-align: left;
- }
- &-wrap {
- position: relative;
- width: @checkbox-size;
- height: @checkbox-size;
- flex: 0 0 @checkbox-size;
- }
- &-base {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
- &-fake {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- pointer-events: none;
- display: flex;
- justify-content: center;
- align-items: center;
- &-icon {
- background-color: @COLOR_CARD;
- border: @checkbox-border-width solid @checkbox-border-color;
- border-radius: @checkbox-corner-radius;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- }
- &-checkedIcon {
- border-radius: @checkbox-corner-radius;
- background-color: @checkbox-background-color;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- &-icon {
- color: @COLOR_WHITE;
- font-size: 28 * @rpx;
- }
- }
- &-disbaledIcon {
- box-sizing: border-box;
- border: @checkbox-border-width solid @checkbox-border-color;
- border-radius: @checkbox-corner-radius;
- width: 100%;
- height: 100%;
- background-color: @checkbox-disabled-background;
- }
- &-disabledCheckedIcon {
- box-sizing: border-box;
- border: @checkbox-border-width solid @checkbox-border-color;
- background-color: @checkbox-disabled-background;
- border-radius: @checkbox-corner-radius;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- &-icon {
- color: @checkbox-border-color;
- font-size: 28 * @rpx;
- }
- }
- }
- &-disabled {
- opacity: @opacity-disabled;
- }
- }
|