responsivewebframework/src/less/label.less

Jalasoft Foundation Front End Framework ========================================

// Label

@label-border-shadow: inset 0px 0px 300px 200px rgba(255,255,255,0.14);

.labelBorderShadow {
  -webkit-box-shadow: @label-border-shadow;
  -moz-box-shadow: @label-border-shadow;
  box-shadow: @label-border-shadow;
}

div[class^="tag-label"]
{
  &>label {
    padding-bottom: 5px;
    margin-bottom: 5px;
    position: relative;
    width: 100%;
    display: block;
    border-bottom: 1px solid #000000;
    .font-format(@font-family-base-component, @label-font, @label-font, @letter-space-normal, @body-color);
  }

  a:hover {
    text-decoration: none;
  }

  &>span, a {
    display: inline-table;
    margin-right: 2px;
    margin-bottom: 4px;
    background-color: #ebebeb;
    max-height: 20px;
    padding: 4px 8px 2px 8px;
    .font-format(@font-family-Regular, @font-size-base-component, @font-size-base-component, @letter-space-normal, @color-label-font);
    background-color: @secondary-color;
    border-radius: 2px;
  }

  &>a:hover, span:hover {
    opacity: @label-opacity-hover;
    .labelBorderShadow;
  }

  &>a:hover > span{
    background-color: @primary-color;
  }
}

div[class^="tag-label"][class$="hidden"] {
  &>span,a {
    &>span {
      cursor : pointer;
      position: relative;
      vertical-align: middle;
      text-align: center;
      width: 12px;
      height: 12px;
      font-size: @font-size-base ;
      margin: 3px 0px 0px 8px;
      padding: 0px 2px 4px 2px;
      top: -3px;
      border-radius: 3px;

      &:hover {
        top: -3px;
        font-size: @font-size-base;
        font-weight: bold;
        background-color: #000;
        border-bottom: 1px solid rgba(244, 244, 244, 1.00);
        border-right:  1px solid rgba(244, 244, 244, 1.80);
        margin: 2px 0px 0px 7px;
      }

      &active {
        border-bottom: 1px solid rgba(244, 244, 244, 0.80);
        border-right:  1px solid rgba(244, 244, 244, 0.80);
      }
    }
    vertical-align: middle;
    position: relative;
  }
}