vui-design/src/style/components/breadcrumb.less

A high quality UI Toolkit based on Vue.js

@vui-breadcrumb: ~"@{vui}-breadcrumb";

.@{vui-breadcrumb} {
  display:block;
  box-sizing:border-box;
  font-size:@breadcrumb-font-size;
  line-height:@breadcrumb-line-height;

  .clearfix;

  &-item {
    float:left;
    display:block;
    box-sizing:border-box;

    &-link {
      float:left;
      cursor:text;
      display:flex;
      box-sizing:border-box;
      justify-content:flex-start;
      align-items:center;
      color:@breadcrumb-item-color;
    }

    &-link i {
      margin-right:@breadcrumb-item-icon-margin-right;
      font-size:@breadcrumb-item-icon-size;
    }

    & a {
      cursor:pointer;
      outline:none;
      color:@breadcrumb-item-color;
      text-decoration:none;
      transition:color @transition-duration @transition-timing-function;

      &:hover {
        color:@breadcrumb-item-hover-color;
      }
      &:active {
        color:@breadcrumb-item-active-color;
      }
    }

    &-separator {
      float:left;
      display:block;
      box-sizing:border-box;
      margin:@breadcrumb-item-separator-margin;
      color:@breadcrumb-item-separator-color;
    }

    &:last-child &-link {
      color:@breadcrumb-last-item-color;
    }

    &:last-child a {
      color:@breadcrumb-last-item-color;

      &:hover {
        color:@breadcrumb-item-hover-color;
      }
      &:active {
        color:@breadcrumb-item-active-color;
      }
    }

    &:last-child &-separator {
      display:none;
    }
  }
}