alfresco-content-app/projects/aca-content/src/lib/ui/overrides/ay11.scss

/* stylelint-disable selector-class-pattern */
@mixin ay11-theme() {
  .mat-mdc-icon-button,
  .mat-mdc-button,
  .mat-mdc-checkbox,
  .mat-mdc-raised-button {
    &:focus-visible {
      @include rounded-outline;
    }

    .mat-ripple,
    .mdc-icon-button__ripple {
      display: none;
    }

    // TODO check if still applies
    &.cdk-keyboard-focused {
      .mat-button-focus-overlay {
        display: none;
      }

      .mat-mdc-checkbox-ripple {
        @include rounded-outline;

        height: 22px;
        width: 22px;
        left: calc(50% - 11px);
        top: calc(50% - 11px);
      }
    }
  }

  .mdc-checkbox__ripple {
    display: none;
  }

  .mat-mdc-form-field-focus-overlay {
    background-color: transparent;
  }

  .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
    fill: var(--theme-blue-button-color);
  }

  .mat-mdc-list-base .mat-mdc-list-option {
    .mdc-list-item__content {
      @include rounded-border(transparent);
    }

    &:focus-visible {
      background-color: white;

      .mdc-list-item__content {
        @include rounded-border;
      }
    }
  }

  .adf-search-user-button.mat-mdc-button,
  .app-search-button {
    line-height: 36px;

    @include rounded-border(transparent);

    &:focus-visible {
      outline: none;

      @include rounded-border;
    }
  }

  .mat-mdc-menu-content {
    .mat-mdc-menu-item {
      .mat-ripple {
        display: none;
      }

      @include rounded-border(transparent);

      &:focus-visible {
        @include rounded-border;

        background-color: white;
      }

      &.cdk-keyboard-focused:not([disabled]) {
        background-color: white;
      }
    }
  }

  .adf-toolbar-title {
    padding: 2px;
  }

  .mat-mdc-option {
    &.cdk-keyboard-focused {
      .mat-mdc-option-ripple {
        @include rounded-outline;
      }
    }
  }

  // TODO investigate after app is run
  .mat-mdc-slide-toggle {
    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
    .mat-slide-toggle-thumb {
      width: 15px;
      height: 15px;
      transform: translate(20%, 50%);
      background-color: #484a4d;
    }

    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
    .mat-slide-toggle-bar {
      border-radius: 15px;
      height: 20px;
    }

    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
    .mat-slide-toggle-thumb-container {
      top: -5px;
    }

    /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
    .mat-slide-toggle-ripple {
      display: none;
    }

    &.cdk-keyboard-focused {
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
      .mat-slide-toggle-bar {
        outline: 2px solid var(--theme-blue-button-color);
      }
    }

    &.mat-primary.mat-checked:not(.mat-disabled) {
      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
      .mat-slide-toggle-bar {
        background-color: var(--theme-blue-button-color);
      }

      /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
      .mat-slide-toggle-thumb {
        background-color: white;
      }
    }
  }

  .mat-mdc-outlined-button,
  .mat-mdc-unelevated-button {
    &.cdk-keyboard-focused {
      .mat-mdc-button-ripple.mat-ripple {
        outline: 2px solid var(--theme-blue-button-color);
        inset: -4px;
      }
    }
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
    outline: 2px solid var(--theme-datetimepicker-cell-focus-border);
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
    background-color: var(--theme-datetimepicker-cell-background);
  }

  .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
    background-color: var(--theme-datetimepicker-selected-date-background);
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
    background-color: var(--theme-about-panel-border-color);
    color: var(--theme-datetimepicker-font-color);
  }

  .mat-expansion-panel .mat-expansion-panel-header {
    box-sizing: border-box;
    border: 2px solid transparent;

    .mat-mdc-button-base.mat-mdc-button {
      outline: none;

      @include rounded-border(transparent);

      &:focus-visible {
        @include rounded-border;

        background-color: white;
      }
    }

    &.cdk-keyboard-focused:not([aria-disabled='true']) {
      background-color: white;

      @include rounded-border;
    }
  }

  .adf-error-snackbar {
    background-color: #ba1b1b;

    .mat-mdc-simple-snack-bar,
    .mat-mdc-snack-bar-action {
      color: white;
    }
  }

  .adf-info-snackbar {
    background-color: var(--theme-blue-button-color);

    .mat-mdc-simple-snack-bar,
    .mat-mdc-snack-bar-action {
      color: white;
    }
  }

  .mat-mdc-button-base {
    &.adf-filter-button {
      margin-left: -2px;
    }
  }

  .adf-pagination {
    &__perpage-block,
    &__actualinfo-block {
      /* stylelint-disable-next-line no-descending-specificity */
      .mat-mdc-icon-button {
        left: 3px;

        &:focus-visible {
          outline: none;
        }

        &.cdk-keyboard-focused {
          .mat-icon {
            @include rounded-outline;
          }
        }
      }
    }
  }
}