hy-checkbox/lib/Menu/menu.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-11 10:08:13 
 */ 
@import "../../app/variables.less";

.@{ult-prefix}-menu {
  list-style-type: none;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  &-item {
    position: relative;
    &-tip {
      position: absolute;
      right: @base-space;
      top: 50%;
      margin-top: -@base-space;
      padding: 0 6px;
      line-height: 18px;
      font-size: @font-size-base;
      color: @white;
      font-weight: bold;
      text-align: center;
      border-radius: 18px;
      &-warning {
        background-color: @warning;
      }
      &-danger {
        background-color: @danger;
      }
      &-primary {
        background-color: @primary;
      }
      &-success {
        background-color: @success;
      }
      &-default {
        background-color: #999;
      }
    }
    & > a,
    &-title {
      display: block;
      font-size: 14px;
      line-height: @base-space * 3;
      cursor: pointer;
      text-decoration: none;
      font-weight: 200;
      transition: @transi;
      > .iconfont {
        font-size: 14px;
      }
    }
  }
  &-submenu {
    >.@{ult-prefix}-menu {
      display: none;
    }
    &-open {
      >.@{ult-prefix}-menu {
        display: block;
      }
    }
  }
}
.@{ult-prefix}-menu-horizontal {
  width: 100%;
  > .@{ult-prefix}-menu-item {
    float: left;
    padding: @base-space * 2;
  }
  &.@{ult-prefix}-menu-light {
    > .@{ult-prefix}-menu-item-active {
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: @primary;
        position: absolute;
        left: 0;
        bottom: -1px;
      }
      & > a {
        color: @primary;
      }
    }
  }
}
.@{ult-prefix}-menu-vertical {
  .@{ult-prefix}-menu {
    padding-left: 14px + @base-space * 2;
  }
  .@{ult-prefix}-menu-item {
    & > a,
    &-title {
      padding: @base-space;
      > .iconfont {
        + span {
          margin-left: @base-space * 2;
        }
      }
    }
    &-title {
      .toggle {
        float: right;
      }
    }
  }
  > .@{ult-prefix}-menu-submenu > .@{ult-prefix}-menu-item-title, > .@{ult-prefix}-menu-item {
    font-size: 14px;
  }
  > .@{ult-prefix}-menu-submenu {
    > .@{ult-prefix}-menu {
      padding-bottom: @base-space;
      > .@{ult-prefix}-menu-item > a, > .@{ult-prefix}-menu-submenu > .@{ult-prefix}-menu-item-title {
        font-size: 13px;
        line-height: @base-space * 2;        
      }
      > .@{ult-prefix}-menu-submenu {
        > .@{ult-prefix}-menu {
          padding-left: 16px;
          > .@{ult-prefix}-menu-item {
            position: relative;
            > a {
              font-size: 12px;
              line-height: @base-space * 2;
            }
            &::after {
              content: '';
              position: absolute;
              left: -6px;
              top: 50%;
              width: 4px;
              height: 4px;
              border-radius: 2px;
              margin-top: -2px;
              background-color: fade(@white, 57%);
            }
          }
        }
      }
    }
  }
}
.@{ult-prefix}-menu-dark {
  > .@{ult-prefix}-menu-item, >.@{ult-prefix}-menu-submenu {
    margin: @base-space 0;    
    &:hover,
    &-open,
    &-active {
      background-color: @sider-hover-bg-dark;
      & > a,
      & > .@{ult-prefix}-menu-item-title {
        > span {
          color: #fff;
        }
        > .iconfont:not(.toggle) {
          color: @primary;
        }
      }
    }
  }
  .@{ult-prefix}-menu-item {
    &-title,
    & > a {
      color: fade(@white, 57%);
    }
  }
  .@{ult-prefix}-menu-submenu {
    .@{ult-prefix}-menu-item-active > a, 
    &-open > .@{ult-prefix}-menu-item-title,
    .@{ult-prefix}-menu-item:hover > a {
        > span {
          color: #fff;
        }
    }
  }
}

.@{ult-prefix}-layout-sider {
  &-collapsed {
    > .@{ult-prefix}-menu {
      > .@{ult-prefix}-menu-item {
        > .@{ult-prefix}-menu-item-tip {
          display: none;
          z-index: 10009;
          right: @sider-width-collapsed - @sider-width + @base-space;
        }
        &:hover {
          > .@{ult-prefix}-menu-item-tip {
            display: block;            
          }
        }
      }

      & > .@{ult-prefix}-menu-item > a, & > .@{ult-prefix}-menu-submenu > .@{ult-prefix}-menu-item-title {
        padding-left: @base-space * 2;
      }
      & > .@{ult-prefix}-menu-item > a, & > .@{ult-prefix}-menu-submenu > .@{ult-prefix}-menu-item-title {
        > span, >.toggle {
          display: none;
        }
      }
      & > .@{ult-prefix}-menu-item > a:hover, & > .@{ult-prefix}-menu-submenu:hover > .@{ult-prefix}-menu-item-title{
        position: relative;
        display: block;
        width: @sider-width;
        background-color: @sider-hover-bg-dark;
        border-radius: 0 @border-radius @border-radius 0;
        z-index: 10000;
        > span {
          display: inline-block;
          margin-left: @base-space * 5;
        }
      }
      & > .@{ult-prefix}-menu-submenu {
        > .@{ult-prefix}-menu {
          display: none;
        }
        &:hover {
          position: relative;
          & > .@{ult-prefix}-menu-item-title {
            border-bottom-right-radius: 0;
          }
          > .@{ult-prefix}-menu {
            display: block;
            position: absolute;
            left: @sider-width-collapsed;
            // top: 100%;
            z-index: 9999;
            padding-left: @base-space * 2;
            width: @sider-width - @sider-width-collapsed;
            background-color: @sider-collapsed-hover-ul-bg;
            border-bottom-right-radius: @border-radius;
          }
        }
      }
    }
  }
}