Skip to main content

Dynamic CSS Variables​

Gatey injects custom properties on :root. Use them to toggle visibility (flex / none) or print Cognito data via content.

Initialization Flags​

  • --gatey-initialized
  • --gatey-not-initialized

Editor Mode​

When a page is open in Elementor or Gutenberg, Gatey sets --gatey-in-editor to flex so elements remain visible in the editor even if they would be hidden on the live site.

body.elementor-editor-active,
body.wp-admin,
body.block-editor-iframe__body {
  --gatey-in-editor: flex;
}

Authentication & MFA​

  • --gatey-account-authenticated / --gatey-account-not-authenticated
  • --gatey-account-mfa-enabled / --gatey-account-mfa-not-enabled

Group Membership​

For every Cognito group <g>, Gatey outputs:

  • --gatey-account-group-<g>
  • --gatey-account-group-not-<g>

Cognito Attributes​

  • --gatey-account-attribute-email
  • --gatey-account-attribute-family_name
  • Custom attributes: --gatey-account-attribute-custom-<attr>

Usage Examples​

/* Visible only to admins */
.admin-panel {
  display: var(--gatey-account-group-admin);
}

/* Show element while editing, or when authenticated */
.show-in-editor-or-if-authenticated {
  display: var(--gatey-in-editor, var(--gatey-account-authenticated, none));
}