wagtail/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@use 'sass:map';
@use 'sass:math';
@use 'sass:string';

@tailwind base;
@tailwind components;

@import '../../../../../client/scss/settings';
@import '../../../../../client/scss/tools';

// =============================================================================
// Variables
// =============================================================================

$size-home-button: 3.5em;
$position: 2em;
$width-arrow: 0.6em;
$box-shadow-props: 0 0 1px 0 rgba(107, 214, 230, 1),
  0 1px 10px 0 rgba(107, 214, 230, 0.7);
$max-items: 12;
$userbar-radius: 6px;

// Possible positions for the userbar to exist in. These are set through the
// {% wagtailuserbar 'bottom-left' %} template tag.
$positions: (
  'top-left': (
    'vertical': 'top',
    'horizontal': 'left',
    'arrow': 'bottom',
  ),
  'top-right': (
    'vertical': 'top',
    'horizontal': 'right',
    'arrow': 'bottom',
  ),
  'bottom-left': (
    'vertical': 'bottom',
    'horizontal': 'left',
    'arrow': 'top',
  ),
  'bottom-right': (
    'vertical': 'bottom',
    'horizontal': 'right',
    'arrow': 'top',
  ),
);

// =============================================================================
// Wagtail userbar proper
// =============================================================================
.w-userbar {
  position: fixed;
  z-index: 9999;
  font-size: initial;
  line-height: initial;
  margin: 0;
  padding: 0;
  // Stop hiding the userbar once stylesheets are loaded.
  // stylelint-disable-next-line declaration-no-important
  display: block !important;
  border: 0;
  width: auto;
  height: auto;

  &-icon {
    @include svg-icon(2em);
  }
}

@media print {
  .w-userbar {
    display: none;
  }
}

.w-userbar-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $size-home-button;
  height: $size-home-button;
  margin: 0;
  overflow: hidden;
  background-color: $color-white;
  border: 2px solid transparent;
  border-radius: 50%;
  color: $color-black;
  padding: 0;
  cursor: pointer;
  box-shadow: $box-shadow-props;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  text-decoration: none;
  position: relative;

  .w-userbar-help-text {
    // Visually hide the help text
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .w-icon:before {
    transition: color 0.2s ease;
    font-size: 2rem;
    width: auto;
    margin: 0;
  }

  &:focus {
    outline: $color-focus-outline solid 3px;
  }
}

.w-userbar-items {
  display: block;
  list-style: none;
  position: absolute;
  margin: 0;
  min-width: 210px;
  visibility: hidden;
  font-family: $font-sans;
  font-size: 0.875rem;
  padding-inline-start: 0;
  text-decoration: none;

  .w-userbar.is-active & {
    visibility: visible;
  }
}

// Arrow
.w-userbar-items:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border: solid $width-arrow transparent;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  .w-userbar.is-active & {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
  }
}

.w-userbar-nav {
  background: transparent;
  padding: 0;
  margin: 0;
  display: block;

  .w-action {
    background: transparent;
  }
}

.w-userbar__item {
  margin: 0;
  background-color: $color-grey-1;
  opacity: 0;
  overflow: hidden;
  transition-duration: 0.125s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  font-family: $font-sans;
  font-size: 1rem;
  text-decoration: none;

  @media (prefers-reduced-motion: reduce) {
    transition: none;

    // Force disable transitions for all items
    transition-delay: 0s;
  }

  &:first-child {
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-top-left-radius: $userbar-radius;
    border-start-start-radius: $userbar-radius;
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-top-right-radius: $userbar-radius;
    border-start-end-radius: $userbar-radius;
  }

  &:last-child {
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-bottom-right-radius: $userbar-radius;
    border-end-end-radius: $userbar-radius;
    // Remove once we drop support for Safari 14.
    // stylelint-disable-next-line property-disallowed-list
    border-bottom-left-radius: $userbar-radius;
    border-end-start-radius: $userbar-radius;
  }

  & + & {
    border-top: 1px solid $color-black;
  }

  a,
  .w-action {
    color: $color-white;
    display: block;
    text-decoration: none;
    transform: none;
    transition: none;
    margin: 0;
    font-size: 0.875rem;

    &:hover,
    &:focus {
      color: $color-white;
      background-color: rgba(100, 100, 100, 0.15);
    }

    &:focus {
      outline: $color-focus-outline solid 3px;
    }

    &-icon {
      @include svg-icon(1.1em, middle);
      margin-inline-end: 0.5em;
      fill: currentColor;
    }
  }

  .w-icon {
    position: relative;

    &:before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      inset-inline-start: 14px;
    }
  }

  a,
  button {
    font-size: 0.875rem;
    text-align: start;
    padding: 0.8em;
  }

  button {
    border: 0;
    width: 100%;
    background-color: transparent;
    outline: none;
  }
}

//Media for Windows High Contrast

@media (forced-colors: $media-forced-colours) {
  .w-userbar-icon {
    fill: $system-color-link-text;
  }

  .w-userbar__item {
    border: 1px solid $system-color-button-text;
  }

  .w-userbar-items::after {
    border: $width-arrow solid Canvas;
  }
}

// =============================================================================
// Userbar positional classes (tl, tr, bl, br)
// =============================================================================

@each $pos, $attrs in $positions {
  $vertical: map.get($attrs, vertical);
  $horizontal: map.get($attrs, horizontal);
  $arrow: map.get($attrs, arrow);

  .w-userbar--#{$pos} {
    #{$vertical}: $position;
    #{$horizontal}: $position;

    .w-userbar-items {
      #{$vertical}: 100%;
      #{$horizontal}: 0;
      padding-#{$vertical}: $width-arrow * 2;
    }

    .w-userbar-nav .w-userbar__item {
      @if $vertical == 'bottom' {
        transform: translateY(1em);
      } @else {
        transform: translateY(-1em);
      }
    }

    .w-userbar-items:after {
      #{$vertical}: 2px;
      #{$horizontal}: math.div($size-home-button, 2) -
        math.div($width-arrow, 2);
      border-#{$arrow}-color: $color-grey-1;

      @if $vertical == 'bottom' {
        transform: translateY($width-arrow);
      }
      @if $vertical == 'top' {
        transform: translateY($width-arrow);
      }
    }

    &.is-active .w-userbar__item {
      @for $i from 1 through $max-items {
        @if $vertical == 'bottom' {
          &:nth-last-child(#{$i}) {
            transition-delay: 0.05s * $i;
          }
        }

        @if $vertical == 'top' {
          &:nth-child(#{$i}) {
            transition-delay: 0.05s * $i;
          }
        }
      }
    }
  }
}

// =============================================================================
// States
// =============================================================================

// Active state for the list items comes last.
.w-userbar.is-active .w-userbar__item {
  transform: translateY(0);
  opacity: 1;
}