Contents

// Collage inputs

.form-group.collage {
  margin-top: $form-group-margin-bottom;
}

.collage-input__canvas-wrapper {
  overflow: hidden;

  .ui-resizable-s {
    height: 20px;
    bottom: -20px;
    left: -$padding-small-horizontal / 2;
    width: calc(100% + #{$padding-small-horizontal});
    border-bottom-left-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    border-top: 1px solid $well-border;
    background-color: $well-bg;

    &:after {
      @include glyphicon-move;
      position: absolute;
      top: 3px;
      right: 6px;
      color: $gray;
    }
  }
}

.collage-input__canvas {
  height: 60vw;
  position: relative;

  &.initialized {
    .collage-input__item {
      opacity: 1;
    }
  }
}

.collage-input__item {
  opacity: 0;
  position: absolute;
  cursor: move;
  transition: opacity 0.2s;

  &:hover {
    .media-item__buttons {
      display: block;
    }
  }

  .form-group {
    display: inline-block;
    position: relative;
    margin: 0;

    br {
      display: none;
    }
  }

  .media-item-chooser__image {
    max-width: 100%;
    max-height: none;
    pointer-events: none;
    margin: 0;
  }

  .btn-group {
    display: block;
  }

  .media-item-chooser__edit-image {
    display: none;
  }
}

.collage-input__item__image {
  max-width: 200px;
}

.collage-input__item {
  .media-item-chooser__remove-image {
    display: none;
  }
}

.collage-input__item--with-image {
  .media-item-chooser__button {
    display: none;
  }
}

.collage-input__empty-canvas-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.collage-input__caption {
  display: none;
  position: absolute;
}

.collage-input__additional-fields {
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: calc(100% - 10px);
  max-width: 250px;
  opacity: 0.9;

  &:hover {
    opacity: 1;
  }

  .form-group {
    display: block;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
forest_cms-0.98.1	app/assets/stylesheets/forest/admin/partials/_collage_inputs.scss