enonic-admin-artifacts/src/mixins/visuals.less

Core rules and definitions for styles of enonic applications

@import '../colors';
@import '../font';

.focusable() {
  &:focus:not(:disabled) {
    box-sizing: border-box;
    box-shadow: 0 0 5px @admin-input-blue;
    border: 1px solid @admin-input-blue;
  }
}

.notSelectable() {
  user-select: none;
}

.selectable() {
  user-select: all;
}

.noAppearance() {
  appearance: none;
}

.ellipsis() {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

.material-layer-shadow() {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3), 0 5px 10px 0 rgba(0, 0, 0, 0.3); // ambient + key shadow
}

.flat-mixin(@bgColor: @admin-white) {
  border-radius: 0;
  background-image: none;
  box-shadow: none;
  background-color: @bgColor;
}

.placeholder(@size, @style) {
  &::-webkit-input-placeholder {
    font-size: @size;
    font-style: @style;
  }

  &::-moz-placeholder {
    font-size: @size;
    font-style: @style;
  }

  &:-moz-placeholder {
    font-size: @size;
    font-style: @style;
  }

  &:-ms-input-placeholder {
    font-size: @size;
    font-style: @style;
  }
}

.placeholderColor(@color) {
  &::-webkit-input-placeholder {
    color: @color;
  }
  &:-moz-placeholder {
    color: @color;
  }
  &::-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
}

.input-error(@bgcolor: @input-light-red, @color: @input-light-red) {
  background-color: @bgcolor;

  &:focus {
    box-shadow: 0 0 5px @color;
  }
}

.input-glow(@color: @admin-input-blue) {
  &:hover {
    &:not([disabled]) {
      border: 1px solid @color;
    }
    &[disabled] {
      border: 1px solid greyscale(@color);
    }
  }
  &:focus {
    box-shadow: 0 0 5px @color;
    border: 1px solid @color;
  }
}

.highlight-background(@color: @input-light-red) {
  background-color: @color;
  -webkit-transition: background-color 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
  transition: background-color 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
}

.button-background(@bg: @form-button-bg, @hoverBg: lighten(@bg, 10%)) {
  background-color: @bg;

  &:hover:not(:disabled) {
    background-color: @hoverBg;
  }
}

.button-foreground(@color: @form-button-font, @hoverColor: darken(@color, 10%), @activeColor: @color) {
  &:before, span {
    color: @color;
  }

  &:hover:not(:disabled) {
    &:before, span {
      color: @hoverColor;
    }
  }

  &.active {
    &:hover:not(:disabled) {
      &:before, span {
        color: darken(@activeColor, 10%);
      }
    }

    &:before, span {
      color: @activeColor;
    }
  }
}

.input-border(@color: @admin-medium-gray-border) {
  border: 1px solid @color;
}

.input-font(@size: 15px) {
  font-family: @admin-font-family;
  font-size: @size;
}

.dropzone-glow(@color: @admin-input-blue) {
  &:not([disabled]) {
    border: 3px dashed @color;
    background-color: lighten(@color, 20%);

    &:hover,
    &:focus {
      border-color: darken(@color, 10%);
      box-shadow: 0 0 5px darken(@color, 10%);
    }
  }

  &[disabled] {
    border: 3px dashed saturation(@color, 0);
    background-color: saturation(lighten(@color, 20%), 0);
    cursor: default;
  }
}

.dropzone-dragover-glow(@color: @admin-input-blue) {

  &:not([disabled]) {
    border: 2px dashed @color;
    box-shadow: 0 0 5px darken(@color, 10%);
  }

  &[disabled] {
    box-shadow: 0 0 5px darken(@color, 80%);
    cursor: default;
  }
}

.highlight-option(@color) {
  background-color: @color !important;

  .names-and-icon-view .@{_COMMON_PREFIX}names-view .@{_COMMON_PREFIX}sub-name {
    color: @admin-shadow-gray;
  }
}