essence-appbar/lib/appbar.less

Essence AppBar - AppBar component

@import (reference) '../../essence-core/src/less/mixins.less';
@import (reference) '../../essence-core/src/less/globals.less';

.e-appbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  line-height: @e-unit*5;
  background: #FAFAFA;
  color: #000;
  box-sizing: border-box;
  cursor: pointer;

  .e-shadow-1();
  .clearfix();

  button {
    min-width: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    z-index: 1;
    height: @e-unit*5;
    width: @e-unit*5;
    font-size: @e-unit*3;

    i {
      padding: 0;
    }
  }

  i {
    font-size: @e-unit*3;
    line-height: @e-unit*5;
  }

  > span {
  padding-left: @e-unit*2.5;
  color: inherit;
}

  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
      color:  @e-color-white;
  }

  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:  @e-color-white;
   opacity:  1;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:  @e-color-white;
     opacity:  1;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
     color:  @e-color-white;
  }


  input.e-input {
    border-bottom: 1px solid @e-color-white !important;
  }

  .e-input:focus ~ .e-input-efects:after, .e-input.focus ~ .e-input-efects:after {
    background-color: @e-color-white !important;
  }

  fieldset[disabled] .e-input, .e-input-group .e-input, .e-input {
    border-bottom: 1px solid @e-color-white !important;
  }

  .e-input-group .e-input-efects:before {
    background-color: @e-color-white ;
  }

  > nav {
  padding: 0 @e-unit;

    span {
      span {
        float: left;
      }
    }
  }

  .search-block {
    .close {
      width: 0;
      .transition(all 0.2s);
      height: @e-unit*3.75;
      line-height: @e-unit*3.75;
    }

    .open {
        width: @e-unit*15;
        .transition(all 0.2s);
        height: @e-unit*3.75;
        line-height: @e-unit*3.75;

        input {
          padding-bottom: 0;
          height: @e-unit*3.75;
          line-height: @e-unit*3.75;

          &:focus{
            padding-bottom: 0;
            height: @e-unit*3.75;
            line-height: @e-unit*3.75;
          }
        }
    }
  }

}


@media (min-width: 769px) {

//  Tablet/Desktop

  .e-appbar{
    height: @e-unit*8;
    padding: @e-unit*1.5;
  }
}

@media (min-width: 480px) and (max-width:768px) {

//  Mobile Portrait

  .e-appbar{
    height: @e-unit*7;
    padding: @e-unit @e-unit*0.5;
  }
}

@media (max-width: 479px) {

//  Mobile Landscape

  .e-appbar{
     height: @e-unit*6;
     padding: @e-unit*0.5;
  }
}