generator-xweb/app/templates/vendors/todo/less/app.plugin.less

Scaffold out a front-end rest web app, user bower and npm at same time

@import "app.variables.less";
@import "app.mixins.less";

.nav-docs{
  > ul > li > a{
    padding-top: 5px!important;
    padding-bottom: 5px!important;
  }
}

.dropfile{border:2px dashed #e0e4e8;text-align: center;min-height: 20px}
.dropfile.hover{border-color: #aac3cc}
.dropfile small{margin: 50px 0;display: block}
.portlet{min-height: 30px;}
/*Charts*/
.jqstooltip{
  .contentBox();
}
.axis{margin:6px 0 0}
.axis li{vertical-align:top;font-size: 9px;margin-right:2px;padding: 0;width: 10px;-webkit-text-size-adjust: none;text-align: center;line-height: 1em;word-wrap:nowrap;}
.axis li:last-child{margin-right:0 !important;}
.axis-full{display: table;}
.axis-full li{display: table-cell;padding: 0;width: 1%;}

.easypiechart {position: relative;text-align: center;}
.easypiechart .h2{
  margin-left:10px;
  margin-top:10px;
  display:inline-block;
}
.easypiechart canvas {position: absolute;top: 0;left: 0;}
.easypiechart .easypie-text{position: absolute;z-index:1;line-height: 1;font-size: 75%;width: 100%;top: 60%}
.easypiechart img{margin-top: -4px}

.combodate select{display: inline-block;}
.doc-buttons .btn{margin-bottom: 5px}
.fontawesome-icon-list{list-style: none;}
.fontawesome-icon-list i{font-size: 14px;width:40px;margin:0;display: inline-block;text-align: center;}
.fontawesome-icon-list a{line-height: 32px;display: block; white-space: nowrap;}
.fontawesome-icon-list a:hover i{font-size:28px;vertical-align:middle}

.th-sortable{cursor: pointer;}
.th-sortable .th-sort{float: right;position: relative;}
.th-sort i{position:relative;z-index: 1}
.th-sort .fa-sort{position: absolute;left: 0;top: 3px;color: #bac3cc;z-index: 0}
.active > .th-sort .text{display: none}
.active > .th-sort .text-active{display: inline !important;}
// sortable
.sortable-placeholder{list-style: none;border: 1px dashed #CCC;min-height: 50px;margin-bottom: 5px}

.input-append.date .add-on i,
.input-prepend.date .add-on i {
  display: block;
  cursor: pointer;
  width: 16px;
  height: 16px;
}


/*parsely*/
.parsley-error-list{margin:0;padding: 0;list-style: none;margin-top: 6px;font-size: 12px}
.parsley-error{border-color: #ff5f5f !important}

// morris
.graph{
  height: 250px;
  tspan{
    font-family: @font-family-sans-serif !important;
  }
}

.morris-hover {
  position: absolute;
  z-index: 1000;

  &.morris-default-style {
    border-radius: 2px;
    padding: 6px;
    color: #666;
    background: rgba(255, 255, 255, 0.9);
    border: solid 1px rgba(230, 230, 230, 0.8);

    font-family: sans-serif;
    font-size: 12px;
    text-align: center;

    .morris-hover-row-label {
      font-weight: bold;
      margin: 0.25em 0;
    }

    .morris-hover-point {
      white-space: nowrap;
      margin: 0.1em 0;
    }
  }

}

// fullcalendar
.panel{
  .fc-header{
    position: relative;
    height: 40px;
    .fc-button{
      background: transparent;
      border: none;
      box-shadow: none;  
      margin: 0;
      height: 40px;
      line-height: 18px;
      padding: 10px;
      &.fc-state-active{
        background: #fff;
      }
    }
    .fc-header-title h2{
      font-size: 15px;
      line-height: 40px;
      margin: 0;    
    }
    td{
      position: absolute;
      white-space: nowrap;
    }
    .fc-header-left{
      width: 100%;
      z-index: 2;
    }
    .fc-button-prev{
      float: left;
    }
    .fc-button-next{
      float: right;
    }
    .fc-header-center{
      z-index: 1;
      width: 100%;
      padding: 0 40px;    
    }
    .fc-header-right{
      position: absolute;
      top: -39px;      
      right: 0;
    }
    .fc-state-default.fc-corner-right{
      border-top-right-radius: 2px;
      border-bottom-right-radius: 0;
    }
    .fc-state-disabled {
      opacity: 0.35;
      filter: alpha(opacity=35);
    }
  }
  .fc-content{
    margin: -1px;
  }
}

.fc-content{  
  .fc-widget-header, 
  .fc-widget-content{
    border-color: #ebeff6;
  }
  .fc-event{
    border: none;
    padding: 4px 6px;    
  }
}

.fc-event{
  background-color: @brand-info;
}

// 
.datepicker td.active, 
.datepicker td.active:hover,
.datepicker td.active:hover.active,
.datepicker td.active.active
{
  background: @brand-primary;
  background: @brand-primary \9;
}

.wizard .badge-info {
  background-color:  @brand-info;
}
.wizard .badge-success {
  background-color: @brand-success;
}
.wizard ul li.active{
  color: @brand-info;
}

.select2-container {
  .select2-choice{    
    height: 30px;
    line-height: 28px;
    border-color: @input-border;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff;
    .select2-arrow{
      background-color: transparent;
      background-image: none;
      border-left: none;
      b{
        background:none;
        position: relative;
        &:after{
          content: "\f0d7"; 
          font-family: FontAwesome;
          color: #aaa;
        }
      }
    }
  }
  &.select2-container-active .select2-choice{border-color: #5897fb;}
  &.select2-dropdown-open .select2-choice .select2-arrow b:after{content: "\f0d8"}
  abbr{
    background: transparent;
    &:after{
      content: "\f00d";
      font-family: FontAwesome;
      position: absolute;
      top: -7px;
      font-size: 11px;
      color: #aaa
    }
  }
}


.select2-search {
  position: relative;
  padding: 0 6px;
  &:after{
    position:absolute;
    content: "\f002"; 
    font-family: FontAwesome;
    color: #aaa;
    right: 10px;
    top:4px;
    width: 18px;    
  }
  .select2-drop.select2-drop-above & {
    &:after{
      top:8px;
    }
  }
  input{
    border-color: @input-border;
    background: #fff;
  }
}

.select2-results .select2-highlighted{background-color: @brand-info}

.select2-container-multi .select2-choices{
  border: 1px solid @input-border;
  border-radius: 3px;
  padding-top: 2px;
  .select2-search-choice{
    border: 1px solid @input-border;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.select2-search-choice-close{
  background: transparent;
  &:after{
    content: "\f00d";
    font-family: FontAwesome;
    font-size: 11px;
    color: #aaa;
    position: absolute;
    left: 2px;
    top: -1px;
  }
}

#flotTip {
  padding: 3px 5px;
  background-color: #000;
  z-index: 100;
  color: #fff;
  opacity: .7;
  filter: alpha(opacity=70);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}