project-bocian/theme/assets/less/styles.less

// Variables, Mixins
@import "variables.less";

// html5
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/* MIX */
body {
  margin: 0 0;
  font-family: @font-primary;
  font-size: 17px;
  line-height: 27px;
  color: @brand-text;
}

p, ul, li {
  font-size: 17px;
  text-align: justify;
}
strong {
  color: @brand-primary;
}

.font-weight-700 {
  font-weight: 700;
}

.padding-0 {
  padding: 0;
}
.padding-lr-0 {
  padding-left: 0;
  padding-right: 0;
}
.padding-bottom-25 {
  padding-bottom: 25px;
}
.pl-20 {
  padding-left: 20px;
}

.smad-divider {
  margin: 20px 0;
  height: 1px;
  width: 100%;
  background-color: @brand-grey;
}

.smad-line-grey {
  color: @brand-grey;
}
.smad-line-red {
  color: @brand-primary;
}
.text-grey {
  color: @brand-text-light;
}

.btn {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.border-top-grey {
  border-top: 2px solid @brand-grey;
}
.border-bottom-grey {
  border-bottom: 2px solid @brand-grey;
}

/** Bootstrap */
.btn:focus,.btn:active {
  outline: none !important;
}
.btn-primary {
  color: @brand-text;
  background-color: @brand-grey;
  border-color: @brand-grey;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
  color: @brand-white;
  background-color: @brand-primary;
  border-color: @brand-primary;
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
  color: @brand-white;
  background-color: @brand-primary;
  border-color: @brand-primary;
}


.btn-default {
  color: @brand-primary;
  background-color: @brand-white;
  border-color: @brand-primary;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
  color: @brand-white;
  background-color: @brand-primary;
  border-color: @brand-primary;
}
.btn-default.active, .btn-default:active, .btn-default:hover, .open>.dropdown-toggle.btn-default {
  color: @brand-white;
  background-color: @brand-primary;
  border-color: @brand-primary;
}


.btn-default-red {
  color: @brand-white!important;
  background-color: @brand-primary;
  border-color: @brand-primary;
}

.btn-default-red.active.focus, .btn-default-red.active:focus, .btn-default-red.active:hover, .btn-default-red:active.focus, .btn-default-red:active:focus, .btn-default-red:active:hover, .open>.dropdown-toggle.btn-default-red.focus, .open>.dropdown-toggle.btn-default-red:focus, .open>.dropdown-toggle.btn-default-red:hover {
  color: @brand-primary!important;
  background-color: @brand-white;
  border-color: @brand-primary;
}
.btn-default-red.active, .btn-default-red:active, .btn-default-red:hover, .open>.dropdown-toggle.btn-default-red {
  color: @brand-primary!important;
  background-color: @brand-white;
  border-color: @brand-primary;
}

.btn-grey-border {
  color: @brand-secondary!important;
  background-color: @brand-white;
  border-color: @brand-secondary;
}

.btn-grey-border.active.focus, .btn-grey-border.active:focus, .btn-grey-border.active:hover, .btn-grey-border:active.focus, .btn-grey-border:active:focus, .btn-grey-border:active:hover, .open>.dropdown-toggle.btn-grey-border.focus, .open>.dropdown-toggle.btn-grey-border:focus, .open>.dropdown-toggle.btn-grey-border:hover {
  color: @brand-white!important;
  background-color: @brand-secondary;
  border-color: @brand-secondary;
}
.btn-grey-border.active, .btn-grey-border:active, .btn-grey-border:hover, .open>.dropdown-toggle.btn-grey-border {
  color: @brand-white!important;
  background-color: @brand-secondary;
  border-color: @brand-secondary;
}

.col-centered {
  margin: 0 auto;
  float: none;
}
/**Table */
.table {
  thead {
    td {
      color: @brand-text;
    }
  }

  tbody {
    td {
      color: @brand-text-light;
    }
  }
}

/** TOP */
#smad-header-section {
  padding: 10px 10px;
  background-color: @brand-grey-light;

  .smad-top-first {
    padding-top: 20px;
    border-bottom: 1px solid @brand-primary;
  }

  .smad-top-second {
    text-align: right;
  }

  ul {
    text-align: right;
    list-style-type: none;

    li {
      padding: 0px;
      display: inline-block;

      .smad-header-title {
        color: @brand-text-light;
        font-size: 13px;
      }
      .smad-desc {
        padding-right: 10px;
        color: @brand-text;
        font-size: 13px;
      }

    }
  }

  a.smad-logout {
    color: @brand-text;
    font-size: 14px;
    text-decoration: none;

    &:focus, &:hover {
      color: @brand-text;
      text-decoration: none;
    }
  }
}

/** Menu */
#smad-menu-section {


  .smad-heder-title {
    color: @brand-text;
    font-weight: 700;
  }

  .menu-items {
    padding-top: 35px;
    padding-bottom: 20px;

    .menu-item {
      display: inline-block;
    }
    ul {
      list-style-type: none;
      display: inline-block;

      li {
        padding: 0 10px;
        display: inline-block;
      }
    }
  }

}


/* Menu form */
#smad-menu-form-section {

  .smad-border-col {
    border-right: 2px solid @brand-grey;

    @media screen and (max-width : @screen-md ) {
      border-right: 0;
      border-bottom: 2px solid @brand-grey;
    }
  }

  .menu-items {
    padding-top: 45px;
    padding-bottom: 20px;

    .menu-item {
      padding-top: 25px;
      padding-bottom: 65px;
      display: inline-block;

      a {
        color: @brand-text;
        text-decoration: none;
        font-weight: 700;

        &:focus, &:hover {
          color: @brand-text;
          text-decoration: none;
          font-weight: 700;
        }
      }

      input {
        width: 80px;
      }
    }
  }

  .menu-form-input {
    padding-top: 25px;
    padding-bottom: 25px;

    .menu-item {

      display: inline-block;

      a {
        color: @brand-text;
        text-decoration: none;
        font-weight: 700;

        &:focus, &:hover {
          color: @brand-text;
          text-decoration: none;
          font-weight: 700;
        }
      }

      input {
        width: 80px;
      }
    }
  }

}

#smad-generate-link {
  padding: 60px 60px;
}

/** Footer */
footer {
  position: fixed;
  height: 75px;
  bottom: 0;
  width: 100%;
}

#smad-footer-section {
  padding: 28px 0 10px 0;
  background-color: @brand-secondary;
  text-align: center;

  ul {
    text-align: center;
    list-style-type: none;

    li {
      padding: 0 30px;
      display: inline-block;

      @media screen and (max-width : @screen-md ) {
        padding: 0 10px;
      }
      @media screen and (max-width : @screen-xs ) {
        text-align: center;
        padding: 0 10px;
        display: block;
      }

      a {
        text-decoration: none;
        color: @brand-text;
        text-decoration: none;

        &:focus, &:hover {
          color: @brand-text;
          text-decoration: underline;
        }
      }
    }
  }
}


/**
 * Employees
 */
#smad-employees-section {
  /*Form Wizard*/
  .smad-wizard {
    margin-top: 0px;
  }
  .smad-wizard {
    border-bottom: solid 1px #e0e0e0;
    padding: 0 0 10px 0;
  }
  .smad-wizard > .smad-wizard-step {
    padding: 0;
    position: relative;
  }
  .smad-wizard > .smad-wizard-step + .smad-wizard-step {
  }
  .smad-wizard > .smad-wizard-step .smad-wizard-stepnum {
    color: #595959;
    font-size: 16px;
    margin-bottom: 5px;
  }
  .smad-wizard-info {
    color: #999;
    font-size: 14px;

    .step-item {

      .step-title {
        color: @brand-text-light;
      }
    }
  }

  .smad-wizard-step.complete {
    .step-item {
      color: @brand-primary;
    }

    .step-title {
      color: @brand-text;
    }
  }

  .smad-wizard > .smad-wizard-step > .smad-wizard-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: none;
    top: 48px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
  }
  .smad-wizard > .smad-wizard-step > .smad-wizard-dot:after {
    content: ' ';
    width: 14px;
    height: 14px;
    background: @brand-white;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid @brand-primary;
  }
  .smad-wizard > .smad-wizard-step > .progress {
    position: relative;
    border-radius: 0px;
    height: 3px;
    box-shadow: none;
    margin: 20px 0;
    background: @brand-grey-light;
  }
  .smad-wizard > .smad-wizard-step > .progress > .progress-bar {
    width: 0px;
    box-shadow: none;
    background: @brand-grey;
  }
  .smad-wizard > .smad-wizard-step.complete > .progress > .progress-bar {
    width: 100%;
  }
  .smad-wizard > .smad-wizard-step.active > .progress > .progress-bar {
    width: 50%;
  }
  .smad-wizard > .smad-wizard-step:first-child.active > .progress > .progress-bar {
    width: 0%;
  }
  .smad-wizard > .smad-wizard-step:last-child.active > .progress > .progress-bar {
    width: 100%;
  }
  .smad-wizard > .smad-wizard-step.disabled > .smad-wizard-dot {
    background-color: @brand-grey;
  }
  .smad-wizard > .smad-wizard-step.disabled > .smad-wizard-dot:after {
    opacity: 0;
  }
  .smad-wizard > .smad-wizard-step:first-child > .progress {
    left: 50%;
    width: 50%;
  }
  .smad-wizard > .smad-wizard-step:last-child > .progress {
    width: 50%;
  }
  .smad-wizard > .smad-wizard-step.disabled a.smad-wizard-dot {
    pointer-events: none;
  }
  /*END Form Wizard*/
  /** Form employes */
  .smad-employees-form-section {

    .menu-items {
      padding-top: 20px;
      padding-bottom: 20px;

      .menu-item {
        display: inline-block;
      }
      ul {
        list-style-type: none;
        display: inline-block;

        li {
          padding: 10px 10px;
          display: inline-block;
        }
      }
    }

    .form-input {
      padding-top: 35px;
      padding-bottom: 25px;

      @media screen and (max-width : @screen-md ) {
        border-top: 1px solid @brand-grey;
      }

      .form-item {
        display: inline-block;
      }
      .smad-heder-title {
        padding-top: 3px;
        font-size: 14px;
      }
    }
  }

  /** form list employes */
  .smad-employees-list-head {
    padding: 15px 0px;
    background-color: @brand-grey-light;
    .title {

    }
    .desc {
      font-size: 15px;
      line-height: 20px;
    }

    .menu-items {
      padding-top: 30px;
      padding-bottom: 20px;
      float: right;

      .menu-item {
        display: inline-block;
      }
      ul {
        list-style-type: none;
        display: inline-block;

        li {
          padding: 0 10px;
          display: inline-block;
        }
      }
    }
  }

  .smad-employees-bottom-navigation {
    padding: 30px 0;
  }
}


/**
 * Login
 */
#smad-login-section {
  .main {
    padding-top: 50px;

    .title-system {
      padding: 20px 0;
      color: @brand-text-light;
      line-height: 20px;
    }

    .header-title {
      h4 {
        padding: 40px 0  30px 0;
      }
    }

    .login-button {
      margin: 20px 0 ;
      padding: 10px 90px;
    }

    .first-input {
      float: right;

      @media (max-width: @screen-md) {
        float: none;
      }
    }
  }
}