kai-jacobsen/kontentblocks

.kb-module-controls {
  //text-align: center;
  width: auto;
  height: 30px;
  background-color: transparent;
  position: absolute;
  opacity: 1;
  display: none;
  transition: all .3s linear;
  z-index: 1990;
  line-height: 30px;
  opacity: 0.3;
  .kb-controls-wrap {
    line-height: 30px;
    position: relative;
  }
  /*------------------------------------*\
      single item
  \*------------------------------------*/

  .kb-module-control {
    width: 30px;
    height: 30px;
    background-color: $grey-100;
    border-radius: 100%;
    border: 1px solid #fff;
    display: inline-block;
    position: absolute;
    text-align: center;
    line-height: 28px;
    color: $grey-600;
    @extend .base-box-shadow;
    top: 0;
    opacity: 0;
    transition: left .3s, opacity .6s;
    @extend .base-transition-timing;
  }

  .kb-module-control--edit {
    left: 0;
    z-index: 2004;
    opacity: 1;

    &:before {
      content: "\f464";
      font-family: dashicons;
      cursor: pointer;
    }
  }

  .kb-module-control--update {
    left: 0;
    z-index: 2003;
    color: $grey-600;

    &:before {
      content: "\f463";
      font-family: dashicons;
      cursor: pointer;
    }
  }

  .kb-module-control--delete {
    left: 0;
    z-index: 2002;
    &:before {
      content: "\f182";
      font-family: dashicons;
      cursor: pointer;
    }
  }

  .kb-module-control--move {
    left: 0;
    z-index: 2001;
    &:before {
      content: "\f156";
      font-family: dashicons;
      cursor: move;
    }
  }

  .kb-module-control.kb-module-control--draft {
    width: auto;
    min-width: 150px;
    height: auto;
    padding: 1px 6px;
    background-color: $orange;
    border-radius: 3px;
    border: 1px solid #fff;
    display: inline-block;
    position: absolute;
    text-align: center;
    color: #fff;
    font-size: 12px !important;
    line-height: 16px;
    @extend .base-box-shadow;
    top: 40px;
    opacity: 0.5;
    transition: left .3s, opacity .6s;
    @extend .base-transition-timing;
    cursor: pointer;

    &:hover{
      opacity: 1;
    }
  }

  /*------------------------------------*\
      controls hover
  \*------------------------------------*/

  &:hover {
    .kb-module-control--update {
      left: 32px;
      opacity: 1;
    }
    .kb-module-control--delete {
      left: 64px;
      opacity: 1;

    }
    .kb-module-control--move {
      left: 96px;
      opacity: 1;
    }

    .kb-inline-control{
      opacity: 1;
    }
  }
}

/*------------------------------------*\
    special states
\*------------------------------------*/

.isDirty {
  .kb-module-control--update {
    left: 32px;
    opacity: 1;
    background-color: $red;
    color: #fff;
  }
}

/*------------------------------------*\
    Inline controls
\*------------------------------------*/

.kb-inline-control {
  width: 30px;
  height: 30px;
  background-color: $blue;
  border-radius: 100%;
  border: 1px solid #fff;
  display: inline-block;
  position: absolute;
  text-align: center;
  line-height: 28px;
  color: #fff;
  @extend .base-box-shadow;
  top: 0;
  opacity: 0;
  transition: left .3s, opacity .6s;
  @extend .base-transition-timing;

}

.kb-inline--edit-text {
  left: 32px;
  z-index: 2004;
  opacity: 0.6;

  &:before {
    content: "\f464";
    font-family: dashicons;
    cursor: pointer;
  }

  &:hover{
    opacity: 1;
  }
}

.kb-inline--edit-image {
  left: 32px;
  z-index: 2004;
  opacity: 1;

  &:before {
    content: "\f128";
    font-family: dashicons;
    cursor: pointer;
  }
}

.kb-inline--edit-link {
  left: 32px;
  z-index: 2004;
  opacity: 1;

  &:before {
    content: "\f103";
    font-family: dashicons;
    cursor: pointer;
  }
}

.kb-inline--update {
  left: 0;
  z-index: 2003;
  color: $grey-600;

  &:before {
    content: "\f463";
    font-family: dashicons;
    cursor: pointer;
  }
}

.isDirty {

  .kb-inline--edit-text, .kb-inline--edit-image, .kb-inline--edit-link {
    left: 0;
    z-index: 2004;
    opacity: 1;
  }

  .kb-inline--update {
    left: 32px;
    opacity: 1;
    background-color: $red;
    color: #fff;
  }
}

/*------------------------------------*\
    Inline Toolbar
\*------------------------------------*/
.kb-inline-toolbar {
  width: 60px;
  height: 40px;
  display: none;
}

/*------------------------------------*\
    Admin Bar Control
\*------------------------------------*/

body.kb-editcontrols-show {
  .kb-module-controls, .kb-inline-toolbar {
    display: block;
    z-index: 1111;
  }

  .os-edit-container:hover {
    outline: black 1px dotted;
    outline-offset: 1px;
    //background: rgba(0, 0, 0, 0.1);
  }
}

.kb-inline-text--active {
  .kb-controls-wrap{
    display: none;
  }
}