athlon-cookie-settings

Installation

ES imports

npm i @perplex-digital/athlon-cookie-settings

Import the registration of <athlon-cookie-settings> via:

import '@perplex-digital/athlon-cookie-settings';

Usage

Arguments

The component takes two arguments: umbraconodeid and culture Option | Type | Default | Description ------ | ---- | ------- | ---- umbraconodeid | string | null | Umbraco node id (GUID) culture | string | null | Umbraco culture

<athlon-cookie-settings umbraconodeid="xxxxxxxxxx" culture="en"></athlon-cookie-settings>

Interaction with cookies

There are several objects/methods exported from package @perplex-digital/athlon-cookie-bar which you can import anytime and use to interact with the cookies or the choices that the user made. See documentation.

Styling

Styling can be overriden by using CSS custom properties. For example you can do this in you CSS:

athlon-cookie-settings {
  --plx-cookie-bar-bg: #ececec;
  --plx-cookie-bar-max-width: 2200px;
  --plx-cookie-bar-layout-padding: 4rem;
}

@media screen and (min-width: 48em) {
  athlon-cookie-settings {
    --plx-cookie-bar-layout-padding: 8rem;
  }
}

REM values

The main Athlon sites have their root(html) font-size scaled down to make 1rem equal to 10px. This cookie component uses mainly REM-values. If you would like to change that to pixels, we would advise you to override the following CSS custom properties.

athlon-cookie-settings {
  /* Button */
  --plx-button-font-size: 1.6rem;
  --plx-button-icon-size: 1.8rem;
  --plx-button-padding: 1.7rem 3rem;
  --plx-button-min-width: 20rem;

  /* Cookie bar */
  --plx-cookie-bar-layout-padding: 4rem;

  /* Cookie settings */
  --plx-overlay-margin: 8rem auto 6rem;
  --plx-overlay-close-spacing: 2rem;
  --plx-overlay-close-size: 3rem;
  --plx-overlay-close-icon-size: 2rem;
  --plx-cookie-settings-panel-width: 64rem;
  --plx-cookie-settings-panel-padding: 8rem 4rem 4rem;
  --plx-cookie-settings-tab-font-size: 1.8rem;
  --plx-cookie-settings-tab-font-weight: 600;
  --plx-cookie-settings-tab-padding: 1.4rem 0;
  --plx-cookie-settings-category-font-size: 2.4rem;
  --plx-cookie-settings-font-size: 18px;
  --plx-cookie-settings-supplier-gap: 0.5rem 0;
  --plx-cookie-settings-button-icon-size: 1.8rem;
  --plx-cookie-form-toggle-height: 3rem;
  --plx-cookie-form-toggle-border-width: 1px;
}
@media screen and (min-width: 80em) {
  :host {
    --plx-cookie-bar-layout-padding: 4rem 8rem;
    --plx-cookie-settings-panel-padding: 8rem;
  }
}
@media screen and (min-width: 120em) {
  :host {
    --plx-cookie-bar-layout-padding: 4rem 16rem;
  }
}