side-menu.scss

// Custom variables
// Note:  These ones were added by us and have nothing to do with Ionic CSS Custom Properties
:host {
  --page-margin: var(--app-fair-margin);
  --page-background: var(--app-background-alt-shade);

  --page-headers-shadow-color: rgba(var(--ion-color-darkest-rgb), 0.4);
}

// Note:  All the CSS variables defined below are overrides of Ionic elements CSS Custom Properties
.app-sidemenu {

  ion-toolbar {
    --padding-start: 0px;
    --padding-end: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --background: var(--page-background);
  }

  ion-content {
    --background: var(--page-background);
  }

  .user-details-wrapper {
    --ion-grid-column-padding: 0px;

    background-color: rgba(var(--ion-color-light-rgb), 0.15);
    color: var(--ion-color-lightest);
    padding: var(--page-margin);
    align-items: center;

    & + .user-details-wrapper {
      padding-top: 0px;
    }
  }

  .user-info-wrapper {
    padding-left: var(--page-margin);

    .user-name {
      margin: 0px 0px 5px;
    }

    .user-handle {
      color: var(--ion-color-light-shade);
      margin: 0px;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .user-stats-wrapper {
    text-align: center;

    .user-stat-value {
      margin-right: 5px;
      font-weight: 500;
    }

    .user-stat-name {
      color: var(--ion-color-light-shade);
      font-size: 14px;
    }
  }

  // Menu list items
  ion-list {
    --ion-text-color: var(--ion-color-light-shade);
    --ion-text-color-rgb: var(--ion-color-light-shade-rgb);
    --ion-item-background: var(--page-background);
    --ion-item-border-color: transparent;

    ion-list-header {
      --color: rgba(var(--ion-color-light-shade-rgb), 0.6);

      text-transform: uppercase;
      box-shadow: inset 0px -4px 8px -2px var(--page-headers-shadow-color);
      padding-inline-start: var(--page-margin);
    }

    ion-item {
      --border-width: 0px !important;
      --padding-start: var(--page-margin);
      --background-activated: var(--ion-color-medium);
    }

    ion-icon {
      color: var(--ion-color-light-shade);
    }
  }
}