hy-checkbox/lib/Transfer/transfer.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:08:06 
 */ 
@import "../../app/variables.less";
.@{ult-prefix}-transfer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: @transfer-max-width;
    &-button {
        padding: @base-space;
        align-self: center;
        .@{ult-prefix}-btn {
            display: block;
            padding-left: @base-space;
            padding-right: @base-space;
            &:first-child {
                margin-bottom: @base-space;
            }
        }
    }
    &-panel {
        flex: 1 0 @transfer-panel-width;
        display: flex;
        flex-direction: column;
        border: 1px solid @transfer-panel-border;
        border-radius: @border-radius;
        background-color: @transfer-panel-bg;
        .@{ult-prefix}-checkbox-group {
            max-height: @base-space * 3 * 7 + @base-space;
            overflow: auto;
            padding: @base-space / 2 0;
            .@{ult-prefix}-checkbox {
                &:hover,
                &.checked {
                    background-color: @transfer-hover-bg;
                }
            }
        }
        .@{ult-prefix}-checkbox {
            margin: 0;
            padding-top: @base-space / 2;
            padding-bottom: @base-space / 2;
            padding-left: @base-space * 4;
            .@{ult-prefix}-checkbox-inner {
                left: @base-space;
            }
        }
    }
    &-body {
        flex-grow: 1;
    }
    &-header {
        border-bottom: 1px solid @transfer-panel-border;
        padding-top: @base-space / 2;
        padding-bottom: @base-space / 2;
    }
    &-footer {
        border-top: 1px solid @transfer-panel-border;
        padding: @base-space / 2 @base-space;
    }
    &-noData {
      padding: @base-space;
      font-size: @font-size-base;
      color: @transfer-noData-color;
      display: block;
    }
}