zigomir/rubber_ring

/**
 * rubber ring specific styles. Here you shall not use any general elements or selectors at all.
 */

@mixin rr-button {
  // https://bugzilla.mozilla.org/show_bug.cgi?id=739396
  // doesn't work in firefox for "ctrl + a" at the moment. So in firefox user can delete buttons with ctrl + a
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  width: 12px;
  height: 13px;
  display: inline-block;
  outline: none;
  border: 0;
  cursor: pointer;
}

@mixin rr-button-abs {
  @include rr-button;
  right: 1px;
  top: 1px;
  position: absolute;
}

*[contenteditable], img[data-cms] {
  outline: dashed green 1px;
  position: relative;

  // disable selection of those action links
  .reset-content {
    @include rr-button-abs;
    background: image-url("glyphicons-halflings.png") no-repeat -217px -25px;
  }
}

.reset-image {
  @include rr-button-abs;
  position: relative;
  background: image-url("glyphicons-halflings.png") no-repeat -217px -25px;
}

.ui-sortable-disabled *[contenteditable] {
  cursor: text;
}

#rubber-ring-application {

  a {
    outline: none;
    // FF
  }

  // this is better than to set page_title as div (because of possible <br> with enter
  [data-cms="page_title"] {
    display: block;
  }

  .attachment-manager {
    display: none;
    // hide by default

    .uploaded-images {
      img {
        width: 65px;
        cursor: -webkit-grab;
        cursor: -moz-grab;
      }
    }

    .uploaded-attachments {
      a {
        text-decoration: none;
        cursor: -webkit-grab;
        cursor: -moz-grab;
      }
    }

    .remove_not_used_attachments {
      margin-top: 7px;
    }

    .image_upload_box {
      display: -webkit-flex;
      display: flex;
      height: 75px;
      border: dashed green 1px;

      &.drag-hover {
        background-color: #abee9b;
      }
      .image_upload_text {
        margin: auto;
      }
      .preview {
        display: none;
      }
    }

    .rubber_cache_preview {
      font-family: calibri, tahoma, arial, sans-serif;
      position: fixed;
      right: 0;
      top: 0;

      a {
        color: green;

        &:visited {
          color: green;
        }
      }
    }
  }

  .page-title-manager {
    display: none;
    // hide by default
  }

  #edit-link {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }
}

.rr-control {
  input {
    width: 27px;
    margin-bottom: 0;
  }

  [data-action=add] {
    @include rr-button;
    background: image-url("glyphicons-halflings.png") no-repeat -1px -97px;
  }

  [data-action=remove] {
    @include rr-button;
    background: image-url("glyphicons-halflings.png") no-repeat -25px -97px;
  }
}

// bootstrap overrides
.tbs * {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tbs select {
  height: 25px;
  margin-bottom: 0px;
}

.tbs .navbar {
  margin-bottom: 0;
  font-size: 15px;
}

// for smooth slide animation
.tbs .well {
  min-height: 0;
}

.tbs .well-small {
  padding: 2px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.tbs .navbar-inner {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.tbs .navbar .brand {
  padding: 8px 20px 8px;
}

.tbs .alert-saved .alert {
  padding: 0;
  margin: 9px 0;
  font-weight: bold;
  opacity: 0;

  &.animate {
    opacity: 1;
    transition: opacity 1s ease-in-out;
  }
}

.tbs [class^="icon-"], .tbs [class*=" icon-"] {
  margin: 3px 0 0 5px;
}

.tbs .brand a {
  color: #777777;

  &:hover {
    color: #333333;
    text-decoration: none;
    background-color: transparent;
  }
}

.tbs.hide {
  display: none;
}