espocrm-base/frontend/less/espo/mixins.less

.tab-focus() {
  outline: none;
  outline-offset: -2px;
}

.form-control-focus-espo(@color-rgba: var(--input-border-focus-rgba)) {
    &:focus {
        border-color: var(--input-border-focus);
        outline: 0;
        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
    }
}

.button-variant-espo(@color; @background; @border; @hover-bg; @active-bg; @hover-border; @active-border) {
    color: @color;
    background-color: @background;
    border-color: @border;

    &:focus,
    &.focus {
        color: @color;
        background-color: @background;
        border-color: @border;
    }

    &:hover {
        color: @color;
        background-color: @hover-bg;
        border-color: @hover-border;
    }

    &:active:hover,
    &.active:hover,
    .open > .dropdown-toggle& {
        color: @color;
        background-color: @active-bg;
        border-color: @active-border;
    }

    &:active,
    &.active,
    .open > .dropdown-toggle& {
        background-image: none;
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &:hover {
            background-color: @background;
            border-color: @border;
        }
    }

    .badge {
        color: @background;
        background-color: @color;
    }
}

.table-row-variant-espo(@state; @background; @background-5) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.@{state},
    > th.@{state},
    &.@{state} > td,
    &.@{state} > th {
      background-color: @background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.@{state}:hover,
    > th.@{state}:hover,
    &.@{state}:hover > td,
    &:hover > .@{state},
    &.@{state}:hover > th {
      background-color: @background-5;
    }
  }
}

.text-emphasis-variant-espo(@color, @color-10) {
  color: @color;
  a&:hover,
  a&:focus {
    color: @color-10;
  }
}

.bg-variant-espo(@color, @color-10) {
  background-color: @color;
  a&:hover,
  a&:focus {
    background-color: @color-10;
  }
}

.label-variant-espo(@color, @color-10) {
  background-color: @color;

  &[href] {
    &:hover,
    &:focus {
      background-color: @color-10;
    }
  }
}

.list-group-item-variant-espo(@state; @background; @color; @background-5) {
  .list-group-item-@{state} {
    color: @color;
    background-color: @background;

    a&,
    button& {
      color: @color;

      .list-group-item-heading {
        color: inherit;
      }

      &:hover,
      &:focus {
        color: @color;
        background-color: @background-5;
      }
      &.active,
      &.active:hover,
      &.active:focus {
        color: #fff;
        background-color: @color;
        border-color: @color;
      }
    }
  }
}

.form-control-validation-espo(@text-color; @border-color; @background-color; @border-color-1; @border-color-2) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline,
  &.radio label,
  &.checkbox label,
  &.radio-inline label,
  &.checkbox-inline label  {
    color: @text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: @border-color;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: @border-color-1;
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px @border-color-2;
      .box-shadow(@shadow);
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    color: @text-color;
    border-color: @border-color;
    background-color: @background-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: @text-color;
  }
}

.alert-variant-espo(@background; @border; @text-color) {
  background-color: @background;
  border-color: @border;
  color: @text-color;
}

.list-with-border-radius() {
    border-left-width: var(--panel-border-width);
    border-right-width: var(--panel-border-width);

    border-radius: var(--panel-border-radius);

    > table {
        border-radius: var(--panel-border-radius);
    }

    &:not(.has-show-more) {
        > table {
            > tbody {
                > tr.active:last-child {
                    > td:first-child {
                        border-bottom-left-radius: var(--panel-border-radius);
                    }
                    > td:last-child {
                        border-bottom-right-radius: var(--panel-border-radius);
                    }
                }
            }
        }
    }

    > .show-more > a {
        border-bottom-left-radius: var(--panel-border-radius);
        border-bottom-right-radius: var(--panel-border-radius);
    }
}