manyi/static/angular-mod/css/less/app.utilities.less

.pos-rlt{position: relative;}
.pos-stc{position: static !important;}
.pos-abt{position: absolute;}
.pos-fix{position: fixed;}

.show{visibility: visible;}
.line {width: 100%;height: 2px;margin: 10px 0;font-size:0;overflow: hidden;}
.line-xs{margin: 0}
.line-lg{margin-top:15px;margin-bottom: 15px}
.line-dashed{border-style: dashed !important;background-color: transparent;border-width:0;}
.no-line{border-width: 0}
.no-border, .no-borders{border-color:transparent;border-width:0}
.no-radius{border-radius: 0}
.block{display:block;}
.block.hide{display: none;}
.inline{display:inline-block !important;}
.none{display: none;}
.pull-none{float: none;}
.rounded{border-radius: 500px;}
.clear{display:block;overflow: hidden;}
.no-bg{background-color: transparent; color: inherit;}
.no-select{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.l-h{line-height: @line-height-base;}
.l-h-0x{line-height: 0;}
.l-h-1x{line-height: 1.2;}
.l-h-2x{line-height: 2em;}

.l-s-1x{letter-spacing: 1}
.l-s-2x{letter-spacing: 2}
.l-s-3x{letter-spacing: 3}

.font-normal{font-weight: normal;}
.font-thin{font-weight: 300;}
.font-bold{font-weight: 700;}

.text-3x{font-size: 3em;}
.text-2x{font-size: 2em;}
.text-lg{font-size: @font-size-lg;}
.text-md{font-size: @font-size-md;}
.text-base{font-size: @font-size-base;}
.text-sm{font-size: @font-size-sm;}
.text-xs{font-size: @font-size-xs;}
.text-xxs{text-indent: -9999px}
.text-ellipsis{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.text-u-c{text-transform: uppercase;}
.text-l-t{text-decoration: line-through;}
.text-u-l{text-decoration: underline;}
.text-active, .active > .text, .active > .auto .text{display: none !important;}
.active > .text-active, .active > .auto .text-active{display: inline-block !important;}
.box-shadow{
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
}
.box-shadow-lg{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
}
.text-shadow{
  font-size: 170px;
  text-shadow: 0 1px 0 @border-color,0 2px 0 lighten(@border-color, 10%),0 5px 10px rgba(0,0,0,.125),0 10px 20px rgba(0,0,0,.2);
}
.no-shadow{
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.wrapper-xs{padding: 5px;}
.wrapper-sm{padding: 10px;}
.wrapper{padding: 15px;}
.wrapper-md{padding: 20px;}
.wrapper-lg{padding: 30px;}
.wrapper-xl{padding: 50px;}
.padder-lg{padding-left:30px;padding-right: 30px}
.padder-md{padding-left:20px;padding-right: 20px}
.padder{padding-left:15px;padding-right: 15px}
.padder-v{padding-top:15px;padding-bottom: 15px}
.no-padder{padding: 0 !important;}
.pull-in{margin-left: -15px;margin-right: -15px;}
.pull-out{margin:-10px -15px;}

.b{border: 1px solid rgba(0, 0, 0, 0.05)}
.b-a{border: 1px solid @border-color}
.b-t{border-top: 1px solid @border-color}
.b-r{border-right: 1px solid @border-color}
.b-b{border-bottom: 1px solid @border-color}
.b-l{border-left: 1px solid @border-color}
.b-light{border-color: @brand-light}
.b-dark{border-color: @brand-dark}
.b-black{border-color: @brand-dark}
.b-primary{border-color: @brand-primary}
.b-success{border-color: @brand-success}
.b-info{border-color: @brand-info}
.b-warning{border-color: @brand-warning}
.b-danger{border-color: @brand-danger}
.b-white{border-color: #fff}
.b-dashed{border-style: dashed !important;}

.b-l-light{border-left-color: @brand-light}
.b-l-dark{border-left-color: @brand-dark}
.b-l-black{border-left-color: @brand-dark}
.b-l-primary{border-left-color: @brand-primary}
.b-l-success{border-left-color: @brand-success}
.b-l-info{border-left-color: @brand-info}
.b-l-warning{border-left-color: @brand-warning}
.b-l-danger{border-left-color: @brand-danger}
.b-l-white{border-left-color: #fff}

.b-l-2x{border-left-width: 2px}
.b-l-3x{border-left-width: 3px}
.b-l-4x{border-left-width: 4px}
.b-l-5x{border-left-width: 5px}

.b-2x{border-width: 2px}
.b-3x{border-width: 3px}
.b-4x{border-width: 4px}
.b-5x{border-width: 5px}

.r{
  border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base;
}

.r-2x{
  border-radius:  @border-radius-base * 2;
}

.r-3x{
  border-radius:  @border-radius-base * 3;
}

.r-l{
  border-radius: @border-radius-base 0 0 @border-radius-base;
}

.r-r{
  border-radius: 0 @border-radius-base @border-radius-base 0;
}

.r-t{
  border-radius: @border-radius-base @border-radius-base 0 0;
}

.r-b{
  border-radius: 0 0 @border-radius-base @border-radius-base;
}

.m-xxs{margin: 2px 4px}
.m-xs{margin: 5px;}
.m-sm{margin: 10px;}
.m{margin: 15px;}
.m-md{margin: 20px;}
.m-lg{margin: 30px;}
.m-xl{margin: 50px;}
.m-n{margin: 0 !important}

.m-l-none{margin-left: 0 !important}
.m-l-xs{margin-left: 5px;}
.m-l-sm{margin-left: 10px;}
.m-l{margin-left: 15px}
.m-l-md{margin-left: 20px;}
.m-l-lg{margin-left: 30px;}
.m-l-xl{margin-left: 40px;}
.m-l-xxl{margin-left: 50px;}

.m-l-n-xxs{margin-left: -1px}
.m-l-n-xs{margin-left: -5px}
.m-l-n-sm{margin-left: -10px}
.m-l-n{margin-left: -15px}
.m-l-n-md{margin-left: -20px}
.m-l-n-lg{margin-left: -30px}
.m-l-n-xl{margin-left: -40px}
.m-l-n-xxl{margin-left: -50px}

.m-t-none{margin-top:0 !important}
.m-t-xxs{margin-top: 1px;}
.m-t-xs{margin-top: 5px;}
.m-t-sm{margin-top: 10px;}
.m-t{margin-top: 15px}
.m-t-md{margin-top: 20px;}
.m-t-lg{margin-top: 30px;}
.m-t-xl{margin-top: 40px;}
.m-t-xxl{margin-top: 50px;}

.m-t-n-xxs{margin-top: -1px}
.m-t-n-xs{margin-top: -5px}
.m-t-n-sm{margin-top: -10px}
.m-t-n{margin-top: -15px}
.m-t-n-md{margin-top: -20px}
.m-t-n-lg{margin-top: -30px}
.m-t-n-xl{margin-top: -40px}
.m-t-n-xxl{margin-top: -50px}

.m-r-none{margin-right: 0 !important}
.m-r-xxs{margin-right: 1px}
.m-r-xs{margin-right: 5px}
.m-r-sm{margin-right: 10px}
.m-r{margin-right: 15px}
.m-r-md{margin-right: 20px}
.m-r-lg{margin-right: 30px}
.m-r-xl{margin-right: 40px}
.m-r-xxl{margin-right: 50px}

.m-r-n-xxs{margin-right: -1px}
.m-r-n-xs{margin-right: -5px}
.m-r-n-sm{margin-right: -10px}
.m-r-n{margin-right: -15px}
.m-r-n-md{margin-right: -20px}
.m-r-n-lg{margin-right: -30px}
.m-r-n-xl{margin-right: -40px}
.m-r-n-xxl{margin-right: -50px}

.m-b-none{margin-bottom: 0 !important}
.m-b-xxs{margin-bottom: 1px;}
.m-b-xs{margin-bottom: 5px;}
.m-b-sm{margin-bottom: 10px;}
.m-b{margin-bottom: 15px;}
.m-b-md{margin-bottom: 20px;}
.m-b-lg{margin-bottom: 30px;}
.m-b-xl{margin-bottom: 40px;}
.m-b-xxl{margin-bottom: 50px;}

.m-b-n-xxs{margin-bottom: -1px}
.m-b-n-xs{margin-bottom: -5px}
.m-b-n-sm{margin-bottom: -10px}
.m-b-n{margin-bottom: -15px}
.m-b-n-md{margin-bottom: -20px}
.m-b-n-lg{margin-bottom: -30px}
.m-b-n-xl{margin-bottom: -40px}
.m-b-n-xxl{margin-bottom: -50px}

.avatar{
  position: relative;
  display: block;
  border-radius: 500px;
  white-space: nowrap;
  img{
    border-radius: 500px;
    width: 100%;
  }
  i{    
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    margin: 2px;
    border-width: 2px;
    border-style: solid;
    border-radius: 100%;
    &.right{
      left: auto;
      right: 0;
    }
    &.bottom{
      left: auto;
      top: auto;
      bottom: 0;
      right: 0;
    }
    &.left{
      top: auto;
      bottom: 0;
    }
    &.on{
      background-color: @brand-success;
    }
    &.off{
      background-color: @text-muted;
    }
    &.busy{
      background-color: @brand-danger;
    }
    &.away{
      background-color: @brand-warning;
    }
  }

  &.thumb-md i {
    width: 12px;
    height: 12px;
    margin: 3px;
  }
  &.thumb-sm i {
    margin: 1px;
  }
  &.thumb-xs i {
    margin: 0;
  }
}

.w-xxs{
  width: 60px;
}
.w-xs{
  width: 90px;
}
.w-sm{
  width: 150px;
}
.w{
  width: 200px;
}
.w-md{
  width: 240px;
}
.w-lg{
  width: 280px;
}
.w-xl{
  width: 320px;
}
.w-xxl{
  width: 360px;
}
.w-full{
  width: 100%;
}
.w-auto{
  width: auto;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}

.thumb-xl{width: 128px;display: inline-block}
.thumb-lg{width: 96px;display: inline-block}
.thumb-md{width: 64px;display: inline-block}
.thumb{width: 50px;display: inline-block}
.thumb-sm{width: 40px;display: inline-block}
.thumb-xs{width: 34px;display: inline-block}
.thumb-xxs{width: 30px;display: inline-block}
.thumb-wrapper{padding: 2px; border: 1px solid @border-color}
.thumb, 
.thumb-xs, 
.thumb-sm, 
.thumb-md, 
.thumb-lg,
.thumb-btn{
  img{
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
}
.img-full{
  width: 100%;
  img{
    width: 100%;
  }
}

.scrollable{
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &.hover {
    overflow-y: hidden !important;
    &:hover
    {
      overflow: visible !important;
      overflow-y: auto !important;
    }
  }

  .smart & {
    overflow-y: auto !important;
  }

}

.scroll-x, .scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch;}
.scroll-y{overflow-y:auto;}
.scroll-x{overflow-x:auto;}

.hover-action{
  display: none;    
}
.hover-rotate{
  .transition(all .2s ease-in-out .1s)
}
.hover-anchor:hover,
.hover-anchor:focus,
.hover-anchor:active{
  > .hover-action{
    display: inherit;
  }
  > .hover-rotate{
    .rotate(90deg)
  }
}

.backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  &.fade{
    opacity: 0;
    filter: alpha(opacity=0);
  }
  &.in{
    opacity: 0.8;
    filter: alpha(opacity=80);
  }
}

/*desktop*/
@media screen and (min-width: 992px) {
  .col-lg-2-4{width: 20.000%;float: left;}
}

// sm
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm.show{display: inherit !important;}
}

/*phone*/
@media (max-width: 767px) {
  .w-auto-xs{width: auto;}
  .shift{display: none !important;}
  .shift.in{display: block !important;}
  .row-2 [class*="col"]{width: 50%;float: left}
  .row-2 .col-0{clear: none}
  .row-2 li:nth-child(odd) { clear: left;margin-left: 0}
  .text-center-xs{text-align: center;}
  .text-left-xs{text-align: left;}
  .text-right-xs{text-align: right;}
  .no-border-xs{border-width: 0;}
  .pull-none-xs{float: none !important;}
  .pull-right-xs{float: right !important;}
  .pull-left-xs{float: left !important;}
  .dropdown-menu.pull-none-xs{left: 0;}
  .hidden-xs.show{display: inherit !important;}
  .wrapper-lg, .wrapper-md{padding: 15px;}
  .padder-lg, .padder-md{padding-left: 15px;padding-right: 15px;}
}