Subversion Repositories web.creative

$activeColor: #3eb998;
$deleteColor: #e83561;
$errorColor: #FC3A3F;
$gridMargin: 0 0.6em 0.6em 0;
$itemPadding: 0.4em;
$focusPointCircleSize: 40px;


.InputfieldImage {
  .InputfieldHeader {
    .InputfieldImageListToggle {
      // toggles between grid, left and list mode
      float: right;
      padding-right: 0.75em;
      position: relative;

      &--active {
        opacity: 0.5;
      }

      &:first-child {
        // offset from far right side
        padding-right: 1em;
      }
    }
    .InputfieldImageSizeSlider {
      float: right;
      width: 100px;
      position: relative;
      top: 8px;
      right: 1em;

      .ui-slider-handle {
        outline: none;
      }
    }
  }

  &.InputfieldFileEmpty,
  &.InputfieldStateCollapsed {
    .InputfieldImageListToggle,
    .InputfieldImageSizeSlider {
      // prevents display of toggles and slider when there are no images visible
      display: none;
    }
  }
}

// error listing
.InputfieldImageErrors {
  padding-left: 0;
  margin-left: 0;
  li {
    margin-bottom: .5em;
    margin-top: 0;
    color: white;
    background-color: $errorColor;
    padding: .3em .5em;
  }
}

// The <ul> element containing li.gridImage items and .InputfieldImageEdit
.gridImages {
  list-style: none;
  padding-left: 0;
  position: relative;
  margin: 0;
  margin-right: -.6em;
  display: block;
  list-style: none;
}

.gridImage .gridImage__overflow, // grid view(s)
.InputfieldImageEditAll .gridImage .gridImage__overflow img, // list view
.InputfieldImageEdit__image { // clicked image in editor in grid view
  // the following creates a checkerboard pattern (for seeing transparency)
  background-color: #fefefe;
  background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

// An individual image grid item
.gridImage {
  list-style: none;
  position: relative;
  display: inline-block;

  @at-root li#{&} {
    // overwrite .content li
    display: inline-block;
    margin: $gridMargin;
  }

  box-shadow: 0 1px 3px rgba(black, 0.2);
  border-radius: 2px;
  background: #fff;
  padding: $itemPadding;
  vertical-align: top;
  border: 1px dashed transparent; // to have the placeholder item the same size
  

  &__overflow {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    & > img {
      position: absolute;
      top: 50%;
      left: 50%;
      //transition: transform ease .3s;
      -ms-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
    }
    
  }

  &.gridImagePlaceholder {
    .gridImage__overflow {
      background: #fff;
    }
  }

  &.ui-sortable-placeholder {
    display: inline-block;
    border-radius: 2px;
    border: 1px dashed #ccc;
    padding: $itemPadding;
    visibility: visible !important;
    vertical-align: top;
    background-color: transparent;
    box-shadow: none;

    &::after {
      //replacement for image
      content: " ";
      display: block;
    }
  }

  &__hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $itemPadding;
  }

  &__inner {
    position: relative;
    width: 100%;
    height: 100%;

    .gridImage:hover & {
      background: rgba(#3eb998, .7);
    }
  }

  &__resize {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 130px;
    text-align: center;
    color: white;
    font-size: 1.3em;
    cursor: move;
    text-shadow: 0px 0px 7px rgba(#3eb998, .7);
    &.pw-resizing {
      text-shadow: none;
      background: rgba(0,0,0,0.7);
    }
  }

  &__progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Get rid of default border in Firefox. */
    border: none;

    color: $activeColor;
    width: 100%;
    height: 10px;
    background: transparent;

    position: absolute;
    bottom: 0;
    left: 0;

    &::-webkit-progress-bar {
      background-color: inherit;
    }

    &[value]::-webkit-progress-value {
      background-color: $activeColor;
    }

    &[value]::-moz-progress-bar {
      background-color: $activeColor;
    }

    &[value='-1'] {
      background-color: $deleteColor;
    }
  }

  &__trash {
    position: absolute;
    background: white;
    padding: .2em .6em;
    color: #aaa;
    z-index: 2;
    cursor: pointer;

    @at-root label#{&} {
      display: none;
    }

    &--single {
      display: block !important;
      position: static;
    }

    & > input {
      display: none;
    }

    .gridImage:hover & {
      display: block;
    }

    @at-root  .gridImage:hover label#{&}:hover {
      // overwrite a:hover
      display: block;
      color: $deleteColor;
      background-color: white;
    }
  }

  &__edit {
    // The "Edit" link
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 130px;
    text-align: center;
    color: white !important;
    font-size: 1.3em;
    cursor: move;
    text-shadow: 0px 0px 7px rgba(#3eb998, .7);

    span {
      cursor: pointer;
    }

    display: none;

    .gridImage:hover & {
      display: block;
    }

    &:hover {
      color: white;
    }
  }

  &__tooltip {
    // tooltip that appears above a hovered .gridImage
    pointer-events: none;
    position: absolute;
    bottom: 100%;
    padding: 20px;
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    left: 50%;
    //transform: translate(-50%, 0) perspective(1px) scale(1.01);
    transform: translate(-50%, 0);
    margin-bottom: 12px;
    background: #fff;
    z-index: 110;
    box-shadow: 0 0 1px rgba(black, 0.25);
    opacity: 0;
    transition: opacity .2s 02;

    .gridImage:hover & {
      display: block;
      opacity: 1;
      transition: opacity .2s 1s;
    }

    .InputfieldImageSorting & {
      display: none !important;
    }

    input {
      pointer-events: none;
    }

    table {
      margin: 0;
      border-spacing: 10px 0;
      border-collapse: separate;

      th {
        color: black;
        font-weight: bold;
        text-align: right;
      }
      th, td {
        border: none !important;
        background: white !important;
      }
    }

    &:after {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(#fff, 0);
      border-top-color: #fff;
      border-width: 10px;
      margin-left: -10px;
    }
  }

  &.gridImageEditing {
    // highlights the current image being edited
    .gridImage__inner {
      background: rgba($activeColor, .5);
    }
  }

  &--active {
    background-color: $activeColor;

    & .gridImage__inner {
      background: rgba($activeColor, .5);
    }

    & .gridImage__trash {
      background-color: $activeColor;
      color: white;

      &:hover {
        background-color: $activeColor;
      }
    }

    &:hover .gridImage__trash:hover {
      background-color: $activeColor;
    }
  }

  &--delete {
    // gridImage item marked for deletion
    background-color: $deleteColor;

    @at-root .InputfieldImageEditSingle.gridImage--delete {
      background-color: transparent;
      .InputfieldImageEdit__inner {
        outline: 3px solid $deleteColor;
      }
    }

    & .gridImage__trash {
      background-color: $deleteColor;
      color: white;
      display: block;

      &:hover {
        background-color: $deleteColor;
      }
    }

    &:hover .gridImage__edit {
      display: none;
    }

    &:hover .gridImage__trash:hover {
      background-color: $deleteColor;
    }

    &:hover .gridImage__inner {
      background: rgba($deleteColor, 0.3);
    }
  }
}

// A type of item that appears in a ul.gridImages but is not itself a .gridImage.
// It contains the image enlargement, file, edit buttons, and description/tags fields. 
.InputfieldImageEdit {
  position: relative;
  display: none;

  &--active,
  &Single {
    display: block;
  }

  &__inner {
    position: relative;
    display: flex;
    flex-flow: row;
    margin: 1em .6em 1em 0;
    -webkit-filter: drop-shadow(0 1px 3px rgba(black, 0.2));
    filter: drop-shadow(0 1px 3px rgba(black, 0.2));
    background-color: white;
  }

  &__close {
    cursor: pointer;
    position: absolute;
    font-size: 1.4em;
    right: .5em;
    top: 0;
    color: #ccc !important;
    text-decoration: none !important;

    .InputfieldFileSingle & {
      display: none;
    }
  }

  &__trash-single {
    cursor: pointer;
    position: absolute;
    font-size: 1.4em;
    right: 0;
    top: 0;
    color: #aaa !important;
    text-decoration: none !important;

    &:hover {
      color: $deleteColor;
    }
  }

  &__arrow {
    // arrow that points up to the item being edited
    bottom: 100%;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border: .5em solid rgba(white, 0);
    border-bottom-color: white;
    transform: translate(-50%, 0);
  }

  &__imagewrapper {
    display: inline-block;
    display: flex;
    vertical-align: top;
    // align-items: center;
    justify-content: space-around;
    width: 300px;
    border-right: 1px solid #eee;
    min-height: 1em;
    padding: 20px;

    & > div {
      // Fix for Firefox not respecting aspect ratio on images
      width: 100%;
      position: relative;
    }
    .detail {
      text-align: center;
      margin-top: 2px;
    }
    .detail-upload {
      display: block;
      opacity: 0;
    }
    .detail-focus {
      display: none;
    }
    &:hover .detail-upload {
      opacity: 0.7;
    }
    & > div.focusWrap .detail-upload {
      display: none;
    }
    & > div.focusWrap .detail-focus {
      display: block;
      opacity: 0.7;
    }
    
  }
  
  &__replace img {
    // dragging new img on top of old one
    opacity: 0.5;
  }

  &__edit {
    display: inline-block;
    vertical-align: top;
    min-height: 100%;
    padding: 20px;
    flex-grow: 1;

    .InputfieldFileDescription,
    .InputfieldFileTags {
      input {
        width: 100%;
      }
    }
  }

  &__image {
    position: relative;
    margin: 0 auto;
    height: auto;
    cursor: zoom-in;
    max-width: 100%;
  }

  &__name {
    font-weight: bold;
    display: inline-block;
    margin-right: .5em !important;

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    cursor: pointer;
  }

  &__info {
    font-size: .9em;
    color: #ccc;
    white-space: nowrap;
  }

  &__buttons {
    margin: 1em 0 0.5em 0;
    button {
      margin-bottom: 0.5em;
    }
  }
  
  .InputfieldFileDescription + .InputfieldFileTags {
    margin-top: 0.5em;
  }

}

.gridImage__overflow .focusArea,
.InputfieldImageEdit .focusArea {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  cursor: default;

  &.focusActive {
    display: block;
    overflow: hidden;
  }

  .focusCircle {
    cursor: move;
    width: $focusPointCircleSize;
    height: $focusPointCircleSize;
    margin: ($focusPointCircleSize * -1 / 2 + 0px) !important;
    // border: 3px solid #fff;
    // background-color: rgba(255,255,255,0.3);
    border: 3px solid #EB1D61;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    background-image: url(data:image/gif;base64,R0lGODlhBAAEAIAAAOsdYQAAACH5BAAAAAAALAAAAAAEAAQAAAIEhI8JBQA7); // 4x4 px magenta
    background-position: 15px 15px;
    background-repeat: no-repeat;
  }
}


.InputfieldImage .ImageData {
  // element in a .gridImage item that contains the details and editable content
  display: none;
}

.InputfieldImageValidExtensions {
  margin-left: 1em;
}

.InputfieldImageUpload {
  position: relative;
  margin: 1em 0 0;

  & .AjaxUploadDropHere {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.75;
    cursor: pointer;

    .ie-no-drop & {
      display: none;
      visibility: hidden;
    }
  }

  .InputfieldImageRefresh {
    margin-bottom: 0;
  }
}


// Narrow mode applies when width of Inputfield is under 500px
.InputfieldImageNarrow {

  .InputfieldHeader .InputfieldImageSizeSlider {
    width: 50px;
  }

  .InputfieldImageEdit {
    // the image editor becomes stacked when narrow mode is active

    &__inner {
      display: block;
      padding-top: 0.5em;
    }
    &__imagewrapper {
      display: block;
      width: 100%;
      padding-bottom: 0;
    }
    &__edit {
      width: 100%;
      padding-top: 0;
      .InputfieldImageEdit__buttons,
      .InputfieldImageEdit__info {
        display: block;
        text-align: center;
      }
    }
    &__name {
      margin: 0;
      display: block;
      text-align: center;
    }
  }

  .InputfieldImageUpload {
    .AjaxUploadDropHere {
      display: none !important;
    }
  }

}

.InputfieldFileSingle .gridImages .gridImage img,
.InputfieldRenderValueMode .gridImages .gridImage img {
  cursor: zoom-in;
}


/*****************************************************************************************
 * The "Edit All" mode is the "list" mode where edit inputs are showing for all images
 * This is the opposite of the grid mode, but we use all the same elements from .gridImage
 *
 */

.InputfieldImageEditAll {

  .gridImage {
    display: block;
    width: 100%;

    // clearfix
    &:before,
    &:after {
      content: "";
      display: table;
      border-collapse: collapse;
    }
    &:after {
      clear: both;
    }

    &__overflow {
      position: relative;
      z-index: 2;
      top: 0;
      left: 0;
      float: left;
      background: none; // initial
      display: block;
      height: auto !important;
      width: 23%; 
      overflow: visible;
      cursor: move;
    
      padding: 10px;
      padding-right: 0;

      & > img {
        display: block;
        position: static !important;
        top: 0;
        left: 0;
        transition: none;
        -ms-transform: none;
        transform: none;
        width: 100%;
        max-width: 100% !important;
        height: initial !important;
        cursor: move;
      }
      
      & > .focusArea {
        position: absolute;
        top: 10px; // to match padding of __overflow
        left: 10px;
      }
    }

    .ImageData {
      position: relative;
      float: left;
      display: block;
      width: 77%;
      padding-left: 20px;
      padding-right: 10px;
      z-index: 3;

      .InputfieldFileDescription {
        margin-bottom: 0.5em;
      }

      .InputfieldImageEdit__name {
        margin-bottom: 0;
        margin-top: 1em;
        position: relative;
        z-index: 100;
        cursor: pointer;
      }

      .InputfieldFileSort {
        display: none;
      }

      input {
        position: relative;
        z-index: 4;
      }
    }

    &.gridImagePlaceholder {
      .gridImage__overflow {
        background: #fff;
      }
    }

    &__inner {
      .gridImage__edit {
        display: none;
      }
    }
    &:hover .gridImage__inner {
      background: none; // initial;
    }

    .InputfieldImageEdit {
      &__core {
        input {
          width: 100%;
        }
      }
    }

    &__resize {
      margin-top: 10px;
      color: $deleteColor;
      text-shadow: none;
    }

    &__progress {
      bottom: 10px;
      margin-left: 10px; 
    }
    
    &.gridImageUploading {
      .gridImage__overflow {
        margin-bottom: 10px; 
      }
      .gridImage__inner {
        overflow: hidden;
      }
    }

    &__trash {
      z-index: 5;
      display: block !important;
      top: 0;
      right: 0;
    }
    
    &__edit {
      display: none;
    }

    &__tooltip {
      display: none !important;
    }

    &--delete {
      background-color: $deleteColor;
      border-bottom: 8px solid transparent;
      height: 45px;
      overflow: hidden;
      
      .gridImage__overflow {
        display: none;
      }
      
      .ImageData {
        padding-left: 10px;
        width: 100%;
      }

      .ImageData .InputfieldImageEdit__name {
        color: rgba(255, 255, 255, 0.6);
        margin-top: 3px;
        text-decoration: line-through;
      }

      .InputfieldImageEdit__info {
        color: rgba(255, 255, 255, 0.4);
      }

      .InputfieldImageEdit__buttons,
      .InputfieldImageEdit__core,
      .InputfieldImageEdit__additional {
        display: none;
      }

      &:hover .gridImage__trash:hover {
        color: white;
        background-color: $deleteColor;
      }

      &:hover .gridImage__hover,
      .gridImage__hover {
        background: rgba(255, 255, 255, 0);
      }
      
    } // &--delete
  } // .gridImage

  // Edit All narrow mode, we stack the image and editor features on top of each other
  &.InputfieldImageNarrow {
    .gridImage {
      &__overflow {
        display: block;
        width: 100% !important;
        height: auto !important;
        padding: 0;

        img {
          width: 100% !important;
          height: auto !important;
        }
        
        > .focusArea { // #728
          top: 0;
          left: 0;
        }
        
      }
      .ImageData {
        padding: 0;
        width: 100% !important;
        display: block;
        .InputfieldImageEdit__name {
          margin-top: 0.5em;
        }
        .InputfieldImageEdit__name,
        .InputfieldImageEdit__buttons,
        .InputfieldImageEdit__info {
          text-align: center;
          display: block;
        }
      }
    } // .gridImage
  } // .InputfieldImageNarrow
} // .InputfieldImageEditAll

.InputfieldFileActionNote {
  display: none;
  white-space: nowrap;
}