bee-cascader/build/Cascader.css

Cascader ui component for react

/* FormGroup */
/*  Navlayout  */
/* FormGroup */
/*  Navlayout  */
.u-form-control {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  width: 100%;
  height: 32px;
  cursor: text;
  font-size: 14px;
  line-height: 1.5;
  color: #424242;
  background-color: #fff;
  background-image: none;
  border: 1px solid rgb(165, 173, 186);
  border-radius: 3px;
  transition: all .3s; }
  .u-form-control:focus {
    border-color: #66afe9;
    outline: 0; }
  .u-form-control::-ms-clear, .u-form-control ::-ms-reveal {
    display: none; }

.u-form-control[disabled] {
  background: #F7F9FB;
  border-color: #DFE1E6;
  color: #909090;
  cursor: not-allowed; }

.u-form-control.lg {
  height: 40px;
  font-size: 14px; }

.u-form-control.sm {
  font-size: 12px;
  height: 26px; }

.u-form-control-search-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  padding: 4px;
  width: 100%; }
  .u-form-control-search-wrapper .u-form-control-search-action {
    color: #ccc;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    text-decoration: none; }
    .u-form-control-search-wrapper .u-form-control-search-action .uf {
      transition: all .3s;
      font-size: 12px;
      color: #ccc; }
      .u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
        content: "\e603"; }

.u-form-control-affix-wrapper {
  position: relative;
  display: inline-block;
  width: 100%; }
  .u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    line-height: 0;
    right: 7px;
    color: rgba(0, 0, 0, 0.65); }

/* FormGroup */
/*  Navlayout  */
/* FormGroup */
/*  Navlayout  */
.u-input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #505F79;
  text-align: center;
  border-radius: 3px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell; }
  .u-input-group-addon:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .u-input-group-addon:first-child {
    border-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0; }

/* FormGroup */
/*  Navlayout  */
.u-input-group-btn {
  font-size: 0;
  white-space: nowrap;
  position: relative;
  width: 1%;
  vertical-align: middle;
  display: table-cell; }
  .u-input-group-btn .u-button {
    position: relative; }

.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group > button, .u-input-group-btn:first-child > .dropdown-toggle, .u-input-group-btn:last-child > .btn-group:not(:last-child) > button, .u-input-group-btn:last-child > button:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0; }

.u-input-group-btn:first-child > .btn-group:not(:first-child) > button, .u-input-group-btn:first-child > button:not(:first-child), .u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group > button, .u-input-group-btn:last-child > .dropdown-toggle {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group {
  margin-left: -1px; }

.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group {
  margin-right: -1px; }

.u-input-group {
  position: relative;
  display: table;
  border-collapse: separate; }
  .u-input-group .u-input-group-btn .u-button {
    border: 1px solid #ccc;
    height: 32px;
    line-height: 1.3; }
  .u-input-group .u-form-control {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 0;
    display: table-cell; }
    .u-input-group .u-form-control:first-child {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0; }
    .u-input-group .u-form-control:last-child {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0; }
    .u-input-group .u-form-control:not(:first-child):not(:last-child) {
      border-radius: 0; }
  .u-input-group.simple .u-form-control {
    border-radius: 3px; }
  .u-input-group.simple .u-input-group-btn {
    position: absolute;
    top: 4px;
    bottom: 0;
    right: 6px;
    min-width: 20px; }
  .u-input-group.simple .u-form-control:not(:last-child) {
    padding-right: 23px; }

.u-cascader {
  font-size: 12px; }
  .u-cascader-menus {
    font-size: 12px;
    overflow: hidden;
    background: #fff;
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 10;
    vertical-align: top; }
    .u-cascader-menus-hidden {
      display: none; }
    .u-cascader-menus.slide-up-enter, .u-cascader-menus.slide-up-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
      animation-play-state: paused; }
    .u-cascader-menus.slide-up-leave {
      opacity: 1;
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
      animation-play-state: paused; }
    .u-cascader-menus.slide-up-enter.slide-up-enter-active-placement-bottomLeft {
      animation-name: SlideUpIn;
      animation-play-state: running; }
    .u-cascader-menus.slide-up-appear.slide-up-appear-active-placement-bottomLeft {
      animation-name: SlideUpIn;
      animation-play-state: running; }
    .u-cascader-menus.slide-up-enter.slide-up-enter-active-placement-topLeft {
      animation-name: SlideDownIn;
      animation-play-state: running; }
    .u-cascader-menus.slide-up-appear.slide-up-appear-active-placement-topLeft {
      animation-name: SlideDownIn;
      animation-play-state: running; }
    .u-cascader-menus.slide-up-leave.slide-up-leave-active-placement-bottomLeft {
      animation-name: SlideUpOut;
      animation-play-state: running; }
    .u-cascader-menus.slide-up-leave.slide-up-leave-active-placement-topLeft {
      animation-name: SlideDownOut;
      animation-play-state: running; }
  .u-cascader-menu {
    display: inline-block;
    width: 100px;
    height: 192px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-right: 1px solid #e9e9e9;
    overflow: auto;
    vertical-align: top; }
    .u-cascader-menu:last-child {
      border-right: 0; }
  .u-cascader-menu-item {
    height: 32px;
    line-height: 32px;
    padding: 0 8px 0 20px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
    position: relative; }
    .u-cascader-menu-item:hover {
      background-color: rgb(235, 236, 240); }
    .u-cascader-menu-item-disabled {
      cursor: not-allowed;
      color: #909090; }
      .u-cascader-menu-item-disabled:hover {
        background: transparent; }
    .u-cascader-menu-item-loading:after {
      position: absolute;
      right: 12px;
      content: 'loading';
      color: #aaa;
      font-style: italic; }
    .u-cascader-menu-item-active {
      background-color: rgb(255, 247, 231);
      color: rgb(245, 60, 50); }
    .u-cascader-menu-item-expand {
      position: relative; }
      .u-cascader-menu-item-expand-icon {
        position: absolute;
        right: 8px;
        line-height: 32px; }
        .u-cascader-menu-item-expand-icon .uf {
          font-size: 14px;
          color: #999; }
  .u-cascader-input-group .u-form-control {
    font-size: 12px;
    color: #212121; }
    .u-cascader-input-group .u-form-control:not(.u-form-control[disabled]):hover {
      border-color: #66afe9; }
    .u-cascader-input-group .u-form-control::-webkit-input-placeholder {
      font-size: 12px; }
    .u-cascader-input-group .u-form-control:-moz-placeholder {
      font-size: 12px; }
    .u-cascader-input-group .u-form-control::-moz-placeholder {
      font-size: 12px; }
    .u-cascader-input-group .u-form-control:-ms-input-placeholder {
      font-size: 12px; }
  .u-cascader-input-group .u-form-control[disabled] + .u-input-group-btn > .uf {
    color: #c1c7d0; }
  .u-cascader-input-group .u-input-group-btn .uf {
    color: #505F79;
    font-size: 14px; }
    .u-cascader-input-group .u-input-group-btn .uf.uf-close-c {
      cursor: pointer;
      color: #C0C4CC; }

.u-input-group.simple .u-form-control.sm + .u-input-group-btn {
  top: 2px; }

.u-input-group.simple .u-form-control.lg + .u-input-group-btn {
  top: 10px; }

@keyframes SlideUpIn {
  0% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8); }
  100% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1); } }

@keyframes SlideUpOut {
  0% {
    opacity: 1;
    transform-origin: 0% 0%;
    transform: scaleY(1); }
  100% {
    opacity: 0;
    transform-origin: 0% 0%;
    transform: scaleY(0.8); } }

@keyframes SlideDownIn {
  0% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scaleY(0.8); }
  100% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scaleY(1); } }

@keyframes SlideDownOut {
  0% {
    opacity: 1;
    transform-origin: 0% 100%;
    transform: scaleY(1); }
  100% {
    opacity: 0;
    transform-origin: 0% 100%;
    transform: scaleY(0.8); } }