adhara/less/adhara.less

foundation for any kind of website: microframework

.pointer{
  cursor: pointer;
}

[route]{
  .pointer;
}

.centre-vertical{
  display: flex;
  justify-content: center;
}

.centre-horizontal{
  display: flex;
  align-items: center;
}

.centre-all{
  display: flex;
  justify-content: center;
  align-items: center;
}

.centre-all-row{
  .centre-all;
  flex-direction: row;
}

.centre-all-column{
  .centre-all;
  flex-direction: column;
}

.adhara-dialog{
  .modal-title{
    float: left;
  }
}

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.float-none{
  float: none;
}

.table-actions-container{
  display: flex;
  .table-actions {
    margin: 1.2em 5px 1.2em 0;
  }
}

.list-search{
  border: none;
  border-bottom: 3px solid;
  min-width: 200px;
  transition: all 0.2s ease;
  &.active{
    min-width: 300px;
    transition: all 0.2s ease;
  }
}

.flex-1{
  flex: 1;
}

.tab-content{
  margin-top: 1rem;
}

.repeater-container{
  .repeater {
    .repeater-fieldset-container{
      margin-top: 7px;
    }
    &.repeater-horizontal {
      overflow: auto;
      .repeater-fieldset {
        position: relative;
        .modifiers {
          position: absolute;
          z-index: 1;
          right: 5px;
          top: -10px;
        }
      }
    }
  }
  .repeater-fieldset-container{
    &:first-child{
      .modifiers {
        &:nth-child(2) {
          margin-top: 1.5rem;
        }
      }
    }
    .repeater-fieldset{
      padding-right: 16px;
    }
    .modifiers {
      justify-content: flex-end;
      align-items: center;
      .modifier {
        width: 20px;
        height: 20px;
        margin: 1px;
        cursor: pointer;
        &:after{
          background: #e5e5e5;
          width: 16px;
          height: 16px;
          font-size: 13px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 1px;
          cursor: pointer;
        }
        &.add{
          &:after{
            content: "+";
          }
        }
        &.remove{
          &:after{
            content: "-";
          }
        }
      }
    }
  }
}

.pointer{
  cursor: pointer;
}

label.required{
  &:after {
    content: "*";
    color: red;
    margin-left: 2px;
    position: relative;
    top: -2px;
  }
}

//Trying carousel settings!
//form{
//  .carousel-control-next, .carousel-control-prev{
//    width: 7%;
//  }
//  .carousel-item{
//    padding: 0 7%;
//  }
//}