summaryrefslogtreecommitdiffstats
path: root/src/utils/helpers/i18n.ts
Commit message (Expand)AuthorAgeFilesLines
* refactor(config): move config from config dir to utilsArmand Philippot2022-01-291-2/+2
* chore: replace lingui functions with react-intlArmand Philippot2022-01-291-1/+22
* chore(i18n): replace i18n provider and helpersArmand Philippot2022-01-291-75/+17
* fix: handle translation with linguiArmand Philippot2022-01-281-22/+72
* refactor(config): move defaultLocale as property of config.localesArmand Philippot2022-01-191-1/+2
* chore: load i18n translations using lingui providerArmand Philippot2021-12-131-0/+35
4 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
@use "../../../../styles/abstracts/functions" as fun;
@use "../../../../styles/abstracts/placeholders";

.link {
  &--block,
  &--main,
  &--regular#{&}--stack {
    display: flex;
    place-items: center;
    place-content: center;
    row-gap: var(--spacing-2xs);
  }

  &--block {
    padding: var(--spacing-2xs) var(--spacing-xs);
    font-weight: 500;
    text-decoration: underline solid transparent 0;

    &:hover,
    &:focus {
      background: var(--color-bg-secondary);
    }

    &:focus {
      color: var(--color-primary);
      text-decoration-color: var(--color-primary-light);
      text-decoration-thickness: 0.25ex;
    }

    &:active {
      background: var(--color-bg-tertiary);
      text-decoration-color: transparent;
      text-decoration-thickness: 0;
    }
  }

  &--main {
    --draw-border-thickness: #{fun.convert-px(4)};
    --draw-border-color1: var(--color-primary-light);
    --draw-border-color2: var(--color-primary-lighter);

    min-width: var(--link-min-width, fun.convert-px(82));
    padding: var(--spacing-xs);
    background: none;
    border-radius: 8%;
    font-size: var(--font-size-sm);
    font-variant: small-caps;
    font-weight: 600;
    line-height: initial;
    text-align: center;
    text-decoration: none;

    &:hover,
    &:focus {
      @extend %draw-borders;
    }

    &:hover {
      color: var(--color-primary-light);
    }

    &:focus {
      color: var(--color-primary-light);
    }

    &:active {
      --draw-border-color1: var(--color-primary-dark);
      --draw-border-color2: var(--color-primary-light);

      color: var(--color-primary-dark);

      @extend %draw-borders;
    }
  }

  &--inline {
    .logo {
      margin-right: var(--spacing-xs);
    }
  }

  &--inline#{&}--regular {
    .logo {
      display: inline-block;
      vertical-align: middle;
    }
  }

  &--stack {
    flex-flow: column wrap;

    .logo {
      flex: 0 0 100%;
      display: flex;
      place-content: center;
    }
  }
}