govuk-frontend/packages/govuk-frontend/src/govuk/components/language-switcher/_mixin.scss at 6935a1944e74ce3e2c4891b53f8b27623198da91 · alphagov/govuk-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
@use "../../base";

/// @access private
@mixin styles {
  .govuk-language-switcher {
    @include base.govuk-font($size: 19);

    margin-top: base.govuk-spacing(3);
    margin-bottom: base.govuk-spacing(3);
    color: base.govuk-functional-colour(text);
  }

  // Modifier to remove the top margin on small viewports. Intended for use when
  // the switcher is in the service navigation. Kept as a modifier so the style is
  // not dependent on another component.
  .govuk-language-switcher--no-top-margin {
    @media #{base.govuk-until-breakpoint(tablet)} {
      margin-top: 0;
    }
  }

  // Menu toggle button, shown on mobile when JavaScript is available. These
  // styles deliberately mirror the service navigation menu toggle.
  .govuk-language-switcher__toggle {
    @include base.govuk-font($size: 19, $weight: bold);
    display: inline-flex;
    align-items: center;
    margin: base.govuk-spacing(2) 0;
    padding: 0;
    border: 0;
    color: base.govuk-functional-colour(link);
    background: none;
    word-break: break-all;
    cursor: pointer;

    &:focus {
      @include base.govuk-focused-text;
    }

    &::after {
      @include base.govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
      content: "";
      margin-left: base.govuk-spacing(1);
    }

    &[aria-expanded="true"]::after {
      @include base.govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
    }

    &[hidden] {
      display: none;
    }
  }

  // Icon shown before the toggle button text
  .govuk-language-switcher__toggle-icon {
    flex-shrink: 0;
    margin-right: base.govuk-spacing(1);
  }

  .govuk-language-switcher__list {
    margin: 0;
    padding: 0;
    list-style-type: none;

    @media #{base.govuk-from-breakpoint(tablet)} {
      display: inline-flex;
      flex-wrap: wrap;
      row-gap: base.govuk-spacing(1);
    }
  }

  .govuk-language-switcher__list-item {
    // On mobile, stack the language items vertically, matching the service
    // navigation menu
    @media #{base.govuk-until-breakpoint(tablet)} {
      margin: base.govuk-spacing(2) 0;
    }

    @media #{base.govuk-from-breakpoint(tablet)} {
      display: flex;
      align-items: center;

      &:not(:last-child) {
        &::after {
          content: "";
          display: block;
          height: 1em;
          margin-right: base.govuk-spacing(2);
          margin-left: base.govuk-spacing(2);
          border-right: 1px solid;
          border-right-color: base.govuk-functional-colour(secondary-text);
        }
      }
    }
  }

  .govuk-language-switcher__link {
    @include base.govuk-link-common;
    @include base.govuk-link-style-default;
  }
}