@salaxy/ng1/less/salaxy-component/panels.less

AngularJS libraries for Salaxy platform (Palkkaus.fi)

.salaxy-component{
  .panel{
    &.card-panel{
      border:1px solid #E6E9ED;
      box-shadow:0px 0px 5px -1px rgba(0, 0, 0, 0.13);
      border-radius:10px;
      .panel-heading{
        border-radius:10px 10px 0px 0px;
        font-size: 14px;
        color:#414141;
        background-color:#fff;
        .date {
          font-size: 0.8em;
        }
        .panel-title{
          font-size:0.95em;
          width: calc(100% - 62px - 5px);
          text-overflow: ellipsis;
          margin-left:46px;
          overflow:hidden;
        }
        .actions-container{
          margin-left:10px;
          width: 2.2em;
          height: 2.2em;
          border-radius:50%;
          line-height: 2.55em;
          color:#aaa;
          background-color:#f5f5f5;
          transition: all .5s;
          &:hover{
            background-color:#aaa;
            color:#fff;
            transition: all .5s;
          }
          .fa {
            font-size: 1.3em;
          }
        }
      }
      &.panel-solid{
        &.card-paid {
          color:#fff;
          border:1px solid @brand-primary;
          box-shadow:0px 0px 5px -1px rgba(0, 0, 0, 0.13);
          background: @brand-primary;
          background: -moz-linear-gradient(45deg,  rgba(0,159,216,1) 1%, rgba(0,115,209,1) 51%, rgba(46,49,242,1) 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(45deg,  rgba(0,159,216,1) 1%,rgba(0,115,209,1) 51%,rgba(46,49,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(45deg,  rgba(0,159,216,1) 1%,rgba(0,115,209,1) 51%,rgba(46,49,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fd8', endColorstr='#2e31f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        }
        .panel-heading{
          background-color:transparent;
          color:#fff;
        }
        .panel-footer{
          background-color:transparent;
          border:none;
          .btn-white{
            background-color:#fff;
            color:@brand-primary;
            border-color: #fff;
            border-width: 2px;
            transition: all .5s;
            &:hover{
              background-color: @brand-primary;
              border-color: #fff;
              color:#fff;
              transition: all .5s;
            }
          }
  
        }
        .icon-container {
          border:1px solid #fff;
          .fa{
            color:#fff;
          }
        }
      }
      .icon-container {
        margin-right: 15px;
        width: 2.2em;
        height: 2.2em;
        padding-left: 2px;
        line-height: 2.35em;
        border-radius: 1.5em;
        border: 1px solid #aaa;
        text-align: center;
        color: #aaa;
        &.accepted {
          border: 1px solid @brand-info;
          color: @brand-info;
        }
        &.requested {
          border: 1px solid @brand-warning;
          color:@brand-warning;
        }
        &.rejected {
          border: 1px solid #d10074;
          color:#d10074;
        }
        .fa {
          font-size: 1.3em;
        }
      }
     
      .panel-content{
        .card-main{
          color:#333;
          font-size:4.5em;
          font-weight:bold;
          line-height:1em;
          margin-bottom:0px;
          @media screen and (max-width: 478px){
            font-size:3em;
          }
          &.accepted{
            color:@brand-info;
          }
          &.requested{
            color:@brand-warning;
          }
          &.paid-calc, &.text-white{
            color:#fff;
          }
          &.rejected{
            color:#d10074;
          }
        }
        .card-details{
          width:80%;
          padding-bottom:2em;
          font-size:0.9em;
          margin:auto;
        }
            
        .otherparty-container{
          text-align:center;
          margin-bottom:7px;
          margin-right:7px;
          salaxy-avatar{
            font-size:45px;
            margin-bottom:5px;
          }
          span{
            width:100%;
            display:block;
            font-size:0.9em;
          }
        }
        .card-details-title{
         text-align:center;
         font-size:1.1em;
         font-weight:700;
         text-transform:uppercase;
         margin-bottom:15px;
         margin-top:7px;
        }
      }

      .panel-footer{
        border-radius:0px 0px 10px 10px;
        .btn{
          border-radius: 15px;
          transition: all .5s;
          &.btn-icon{
            font-size:15px;
            margin-right:5px;
            padding: 3px 7px 3px 8px;
          }
          &:hover{
            transition: all .5s;
          }
        }
      }
    }
    &.panel-secondary{
      border:1px solid #E6E9ED;
      box-shadow:0px 0px 5px -1px rgba(0, 0, 0, 0.13);
      .panel-heading{
        color:#414141;
        background-color:#f5f5f5;
      }
    }
    &.panel-primary{
      &.panel-solid{
        background-color:@brand-primary;
        .panel-heading{
          border-color:transparent;
        }
        .panel-body,.panel-content{
          background-color:@brand-primary;
          color:#fff;
          .small, small{
            color:#fff;
          }
        }
        .panel-footer{
          border-color:@brand-primary;
          background-color:@brand-primary;
          color:#fff;
          .btn{
            font-weight:bold;
          }
        }
        .btn-secondary, .btn-primary{
          background-color:#fff;
          color:@brand-primary;
        }
      }
    }
    &.panel-warning{
      &.panel-solid{
        background-color:@brand-warning;
        .panel-heading{
          border-color:transparent;
        }
        .panel-body,.panel-content{
          background-color:@brand-warning;
          color:#fff;
          .small, small{
            color:#fff;
          }
        }
        .panel-footer{
          border-color:@brand-warning;
          background-color:@brand-warning;
          color:#fff;
          .btn{
            font-weight:bold;
          }
        }
        .btn-secondary, .btn-primary, .btn-warning{
          background-color:#fff;
          color:@brand-warning;
          border-color:transparent;
        }
      }
    }
    &.panel-danger{
      &.panel-solid{
        background-color:@brand-danger;
        .panel-heading{
          border-color:transparent;
        }
        .panel-body,.panel-content{
          background-color:@brand-danger;
          color:#fff;
          .small, small{
            color:#fff;
          }
        }
        .btn-secondary, .btn-primary, .btn-warning, .btn-danger{
          background-color:#fff;
          color:@brand-danger;
          border-color:transparent;
        }
        .panel-footer{
          border-color:@brand-danger;
          background-color:@brand-danger;
          color:#fff;
          .btn{
            font-weight:bold;
          }
        }
      }
    }
    &.panel-solid{
      salaxy-avatar{
        font-size:45px;
        i{
          color:#fff !important;
          strong{
            color:@brand-primary !important;
          }
        }
      }
    }     
    &.panel-employers{
      &.single-employer{
        .panel-content{
          salaxy-avatar{
            font-size:80px;
          }
        }
      }
    }
    &.panel-workers{
      &.single-worker{
        .panel-content{
          salaxy-avatar{
            font-size:80px;
          }
        }
      }
    }
    .panel-heading{
      text-overflow: ellipsis;
      display:block;
      overflow:hidden;
      white-space: nowrap;
    }
    .panel-body, .panel-content {
      .calculations-header{
        h2{
          font-size:1.7em;
        }
        h3{
          font-size:1em;
        }
      }
    }
    &.panel-sm{
      .panel-heading{
        margin-bottom:0;
        padding: 10px 8px;
        max-height:43px;
        min-height:43px;
      }
      .panel-footer{
        padding: 10px 8px;
        &.footer-empty{
          min-height:51px;
        }
      }
      .panel-body{
        &.align-middle{
          display:table;
          width:100%;
          > div{
            display:table-cell;
            vertical-align:middle;
            h1, h2, h3, h4{
              margin-top:0;
            }
          }
        }
      }
      .panel-body.filters{
        padding: 0 8px;
        height: 0;
        visibility:hidden;
        -webkit-transition: height 0.5s, padding 0.3s;
        transition: height 0.5s, padding 0.3s;
        &.showfilters{
          height:auto;
          padding:5px 8px;
          visibility:visible;
          -webkit-transition: height 0.5s, padding 0.3s;
          transition: height 0.5s, padding 0.3s;
          .filter-buttons{
            display:inline-block;
          }
        }
        .salaxy-odata-table-search{
          display:inline-block;
        }
        .form-control{
          width:auto;
          display:inline-block;
          height: 22px;
          padding: 3px 7px;
          font-size:12px;
          
          max-width:120px;
          margin-left:5px;
        }
      }
      .table, table{
        margin-bottom:3px;
        td{
          font-size: 0.85em;
          &.td-avatar{
            width:48px;
            salaxy-avatar{
              font-size:34px;
            }
          }
        }
        .row-status{
          font-size:0.9em;
        }
      }
      @media screen and (max-width: 767px){
        .table-responsive {
          padding-top: 0px;
          padding-bottom: 0px;
          margin-bottom:0px;
        }
      }
    }
    
    @media screen and (min-width: 768px){
      .panel-content{
        &.lg-height{
          min-height:261px;
          max-height:261px;
          overflow: auto;
        }
        &.md-height{
          min-height:210px;
          max-height:210px;
          overflow: auto;
        }
        &.sm-height{
          min-height:130px;
          max-height:130px;
        }
      }
    }
  }
}