apostrophe/lib/modules/apostrophe-areas/public/css/user.less

The Apostrophe Content Management System.

@apos-translucent-opacity: 0.4;

.apos-area, .apos-area-widgets, .apos-area-widget { position: relative; }

.apos-area
{
  // When an area's limit is reached, it shouldn't display controls
  // to add more content. We use direct children selectors to in order
  // to support nested areas.
  &.apos-limit-reached
  {
    >.apos-ui .apos-area-controls,
    >[data-apos-widgets]>[data-apos-widget-wrapper]>.apos-ui .apos-area-controls { display: none !important; }
    >[data-apos-widgets]>[data-apos-widget-wrapper]>[data-apos-widget]>.apos-ui [data-apos-clone-item] { display: none !important; }
  }
  // When we are dragging a widget, we want it to be at the forefront.
  .apos-area-widget.ui-draggable-dragging { z-index: @apos-z-index-9; }
  &.apos-empty
  {
    // When there aren't any widgets in an area, it should have a height
    // and a background color set by default.
    height: 130px;
    background-color: @apos-light;
    // When there aren't any widgets in an area, the add content controls
    // should appear absolutely positioned in the empty state.
    >.apos-ui .apos-area-controls
    {
      position: absolute;
      opacity: @apos-translucent-opacity;
      display: block;
      top: 50%;
      transform: translateY(-50%);
      .apos-button:after {
        content: "";
        display: block;
        position: absolute;
        left: -41px;
        top: -22px;
        height: 60px;
        width: 100px;
      }
      >.apos-ui .apos-area-controls.apos-active .apos-button:after {
        height: 32px;
      }
      .apos-area-divider { display: none; }
    }
    >.apos-ui .apos-area-controls--singleton
    {
      transform: none;
      top: auto;
      bottom: @apos-padding-2;
      left: @apos-padding-2;
      &:hover { opacity: 1; }
    }
  }
}

// disable menu interactions while some windows are open
.apos-area-widget-controls--disabled {
  pointer-events: none;
}

.apos-area-widget-controls
{
  opacity: 0;
}
// Some helpers for general hide/show/peek editing controls

.apos-hide { opacity: 0; }
.apos-show { opacity: 1; }
.apos-area .apos-peek { opacity: @apos-translucent-opacity; }

.apos-area-widget {
  &:hover .apos-peek { pointer-events: auto;}
  >.apos-ui .apos-area-widget-controls:hover { opacity: 1; }

  // When an area has a limit of one, its children widgets shouldn't
  // display the arrow organization controls.
  >.apos-ui.apos-limit-one [data-apos-move-item] { display: none; }
}

// Don't fight with the add content menu. -Tom
.apos-area.apos-context-content-menu-active {
  .apos-area-widget {
    >.apos-ui .apos-area-widget-controls {
      display: none;
    }
  }
}

// Widget controls positioning
.apos-area-widget-controls
{
  position: absolute;
  z-index: @apos-z-index-5;
  .apos-transition;
  &:hover { z-index: @apos-z-index-6; }
}
.apos-area-widget-controls--context, .apos-area-widget-controls--top-left,
{
  top: @apos-padding-1;
  left: @apos-padding-1;
}
.apos-area-widget-controls--data
{
  bottom: @apos-padding-1;
  left: @apos-padding-1;
}

.apos-area-widget-controls--top-right
{
  right: @apos-padding-1;
  left: initial;
}

.apos-area-widget-controls--bottom-left
{
  top: initial;
  bottom: @apos-padding-1;
}

.apos-area-widget-controls--bottom-right
{
  top: initial;
  right: @apos-padding-1;
  bottom: @apos-padding-1;
  left: initial;
}

.apos-area-widget--contextual>.apos-ui .apos-button-group--data { display: none; }

// Styles for the drag-target separator between widgets.
.apos-area-item-separator
{
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0px dashed @apos-base;
  &.apos-hover { background-color: fade(@apos-base, 50%); }
  .apos-transition;
}

// .ui-draggable-dragging { position: absolute !important; }

.apos-dragging .apos-area-item-separator
{
  border-width: 1px;
  opacity: 1;
  padding: @apos-padding-1;
  margin: @apos-margin-1/2 0;
}

.apos-dragging .apos-empty .apos-area-widgets
{
  display: block;
  height: 100%;
}

.apos-dragging.apos-empty .apos-area-item-separator
{
  display: block;
  height: 100px;
  width: 100%;
  margin: 0;
}

.apos-dragging.apos-empty .apos-area-widgets {
  width: 100%;
  height: 100%;
}

.apos-empty .apos-area-item-separator
{
  height: 100%;
  width: 100%;
  padding: 0;
}

// [data-apos-area-controls] .apos-area-controls { opacity: 1 !important;}
.apos-ui .apos-dropdown.apos-dropdown--area-controls
{
  height: 5px;
  display: inherit;
  .apos-drop-shadow(0, 0, 0, 0);
  >.apos-button
  {
    position: relative;
    top: -7px;
    border: 2px solid @apos-white;
    .apos-rounded(@apos-padding-3);
    .apos-drop-shadow();
    &:after {
      content: "";
      display: block;
      position: absolute;
      left: -41px;
      top: -3px;
      height: 20px;
      width: 100px;
    }
  }
  >.apos-dropdown-items
  {
    text-align: left;
    left: 0;
    right: 0;
    top: 6px;
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
    .apos-rounded;
  }
}

.apos-ui .apos-dropdown.apos-dropdown--area-controls
{
  &.apos-active
  {
    >.apos-button>i { transform: translateX(-50%) rotate(45deg); margin-left: -0.2px; }
    // >.apos-dropdown-items { transform: translate(-46%, -10px); }
  }
}

.apos-area-controls
{
  .apos-transition;
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0;
  padding: 20px 0;
  z-index: @apos-z-index-1;

  &.apos-area-controls--singleton
  {
    display: block;
    opacity: 1;
    text-align: left;
  }
}

[data-apos-area-controls-original] .apos-area-controls
{
  top: 0;
  transform: translateY(-50%);
}

.apos-area-widget-wrapper>.apos-ui>.apos-area-controls
{
  bottom: 0;
  // transform: translateY(50%);
  height: 5px;
  .apos-transition;
}

// We only want to show area add content controls for the actively hovered area,
// which is determined in area's editor.js.
.apos-area.apos-hover
{
  >[data-apos-area-controls-original]>.apos-area-controls,
  >.apos-area-widgets>.apos-area-widget-wrapper:hover>.apos-ui>.apos-area-controls
  {
    display: block;
    opacity: @apos-translucent-opacity;
    z-index: @apos-z-index-2;
    &:hover { opacity: 1; }
  }
}
// The horizontal line under the add content button which divides areas
.apos-area-controls .apos-area-divider
{
  width: 100%;
  height: 2px;
  transform: translateY(-2px);
  background-color: @apos-base;
  .apos-glow;
  z-index: 0;
}
// TODO figure out how to select these specifically enough that !important isn't necessary
//
// z-index-8 puts this above the apostrophe-workflow controls so widgets can always be added at the
// bottom of the window, please consider when changing
.apos-area-controls.apos-active { opacity: 1 !important; display: block; z-index: @apos-z-index-8; }
.apos-dragging .apos-area-controls { opacity: 0 !important; }
.apos-rich-text-active .apos-area-controls { display: none !important; }

// Special consideration for 'block-like' areas
.apos-area--block-level-controls
{
  &:not(.apos-empty) > .apos-ui
  {
    display: block;
    position: relative;
  }
  & > .apos-ui .apos-area-controls,
  & > .apos-area-widgets > .apos-area-widget-wrapper > .apos-ui .apos-area-controls
  {
    top: auto;
    padding: 10px 0;
    transform: none;
    position: relative;
    .apos-area-divider
    {
      .apos-glow(@apos-secondary);
      background-color: @apos-secondary;
    }
    .apos-button--circular { background-color: @apos-secondary; }
  }

  // color contextual controls as well
  & > .apos-area-widgets > .apos-area-widget-wrapper > .apos-area-widget > .apos-ui .apos-buttons
  {
    .apos-glow(@apos-secondary);
    border: 2px solid @apos-secondary;
    .apos-button:hover { color: @apos-secondary; }
    .apos-button[data-apos-trash-item]:hover { color: darken(@apos-red, 20%); }
  }
}
.apos-area-inline-undo__label {
  margin-right: 5px;
}
.apos-area-inline-undo {
  display: flex;
  border: 0;
  cursor: pointer;
  background-color: inherit;
  color: inherit;
  align-items: center;
  justify-content: center;
  width: 100%;
  .apos-rounded;
  padding: @apos-padding-1;
  background-color: @apos-blue;
  color: @apos-white;
  font-size: 13px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  &:hover {
    background-color: darken(@apos-blue, 10%)
  }
  .apos-area-inline-undo__undo {
    text-decoration: underline;
    margin-left: 5px;
  }
}

.apos-ui .apos-select {
  height: 34px;
  margin: 0 10px;
}