app/addons/replication/assets/less/replication.less

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

@import "../../../../../assets/less/variables.less";

#replication {
  position: relative;
  max-width: none;
  width: auto;

  .form_set {
    width: 350px;
    display: inline-block;
    border: 1px solid @greyBrownLighter;
    padding: 15px 10px 0;
    margin-bottom: 20px;
    &.middle {
      width: 100px;
      border: none;
      position: relative;
      height: 100px;
      margin: 0;
    }
    input, select {
      margin: 0 0 16px 5px;
      height: 40px;
      width: 318px;
    }
    .btn-group {
      margin: 0 0 16px 5px;
      .btn {
        padding: 10px 57px;
      }
    }
    &.local {
      .local_option {
        display: block;
      }
      .remote_option {
        display: none;
      }
      .local-btn {
        background-color: @brandPrimary;
        color: #fff;
      }
      .remote-btn {
        background-color: #f5f5f5;
        color: @fontGrey;
      }
    }
    .local_option {
      display: none;
    }
    .remote-btn {
      background-color: @brandPrimary;
      color: #fff;
    }
  }


  .options {
    position: relative;
    &:after {
      content: '';
      display: block;
      position: absolute;
      right: -16px;
      top: 9px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid black;
      border-top: none;
    }
    &.off {
      &:after {
      content: '';
      display: block;
      position: absolute;
      right: -16px;
      top: 9px;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: none;
      border-top: 5px solid black;
      }
    }
  }
  .control-group {
    label {
      float: left;
      min-height: 30px;
      vertical-align: top;
      padding-right: 5px;
      min-width: 130px;
      padding-left: 0px;
    }
    input[type=radio],
    input[type=checkbox] {
      margin: 0 0 2px 0;
    }
  }

  .circle {
    z-index: 0;
    position: absolute;
    top: 20px;
    left: 15px;

    &:after {
      width: 70px;
      height: 70px;
      content: '';
      display: block;
      position: relative;
      margin: 0 auto;
      border: 1px solid @greyBrownLighter;
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      border-radius:40px;
    }
  }
  .swap {
    text-decoration: none;
    z-index: 30;
    cursor: pointer;
    position: absolute;
    font-size: 40px;
    width: 27px;
    height: 12px;
    top: 31px;
    left: 30px;
    &:hover {
      color: @greyBrownLighter;
    }
  }
}

#replicationStatus {
  &.showHeader {
    li.header {
      display: block;
      border: none;
    }
    ul {
      border:1px solid @greyBrownLighter;
    }
  }
  li.header {
    display: none;
  }
  ul {
    margin: 0;
    li {
      .progress,
      p {
        margin: 0px;
        vertical-align: bottom;
        &.break {
          -ms-word-break: break-all;
          word-break: break-all;

          /* Non standard for webkit */
          word-break: break-word;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
          hyphens: auto;
        }
      }
      padding: 10px 10px;
      margin: 0;
      list-style: none;
      border-top: 1px solid @greyBrownLighter;
      div.bar {
        font-size: 16px;
        line-height: 30px;
      }
    }
  }
}

.task-cancel-button {
    padding: 4px 12px;
    margin-bottom: 3px;
}