/**
 * @Description: 一些全局的、公共的预置样式
 * @Author: Oliver
 * @Modified by: 娄通略
 * @Date: 2020-12-11 09:14:27
 * @Param: 加important是为了防止权重不够，设置不上，如果JS要去除这个样式，直接去除className即可
*/
@import './variables';

// flex布局
.flex {
    display: flex !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.align-items-center {
    align-items: center !important;
}

.text-center {
    text-align: center !important;
}

/**
 * @Description: 搜索栏的样式
 * @Author: Oliver
 * @Modified by: 娄通略
 * @Date: 2020-12-14 10:28:49
 * @Param: 无
*/
// ----------------------------搜索栏的按钮样式-----------------------------------------------------------------
.resetButton,
.addButton,
.allOpenButton,
.allCloseButton {
    color: #fff !important;
}

// 重置按钮的样式
.resetButton {
    background-color: @hs-color-gray  !important;
    border-color: @hs-color-gray  !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: lighten(@hs-color-gray, 10%) !important;
        color: #fff !important;
        border-color: @hs-color-gray  !important;
    }
}

// 添加按钮的样式
.addButton {
    background-color: @hs-color-green  !important;
    border-color: @hs-color-green  !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: lighten(@hs-color-green, 10%) !important;
        color: #fff !important;
        border-color: @hs-color-green  !important;
    }
}

// 全部开启按钮的样式
.allOpenButton {}

// 全部关闭按钮的样式
.allCloseButton {
    background-color: @hs-color-orange  !important;
    border-color: @hs-color-orange  !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: lighten(@hs-color-orange, 10%) !important;
        color: #fff !important;
        border-color: @hs-color-orange  !important;
    }
}

// 单行的搜索框，不允许换行

div.searchBar {
    // 在720P下会有显示问题
    height: 50px;
}

@media screen and (max-width:1920px) {
    div.searchBar {
        // 在720P下会有显示问题
        height: auto;
    }
}


// 搜索栏的布局样式
div.searchBarLayout {
    display: flex;
    justify-content: flex-start;
}

// ------------------------------------------------------table表格里的按钮样式--------------------------------------------
// 操作栏下的关闭按钮
.closeButton {
    color: @hs-color-orange  !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: lighten(@hs-color-orange, 10%) !important;
    }
}

// 操作栏下的删除按钮
.deleteButton {
    color: @hs-color-red  !important;

    &:hover,
    &:focus,
    &:active,
    &.active {
        color: lighten(@hs-color-red, 10%) !important;
    }
}

.ul-title {
    margin-left: -10px;
}

.hide {
    display: none !important;
}