govuk-frontend/packages/govuk-frontend/src/govuk/components/breadcrumbs/_index.scss at 377390f80cc4d0c3c4686acb3f8ba717c6a2dc9d · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@use "sass:string";

@import "../../base";

@include govuk-exports("govuk/component/breadcrumbs") {
  // Component font-size on the Frontend (used for calculations)
  $font-size: 16;

  // Size of chevron (excluding border)
  $chevron-size: govuk-em(7px, $font-size);

  // Size of chevron border
  $chevron-border-min-width: 1px;
  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);

  // Colour of chevron
  $chevron-border-colour: govuk-functional-colour(secondary-text);

  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
  // of length 8 (7px + 1px border):
  //
  // √(8² + 8²) * 0.5 ≅ 5.655
  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);

  .govuk-breadcrumbs {
    @include govuk-font($size: $font-size);

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

  .govuk-breadcrumbs__list {
    @include govuk-clearfix;

    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .govuk-breadcrumbs__list-item {
    display: inline-block;
    position: relative;

    margin-bottom: govuk-spacing(1);

    // Add both margin and padding such that the chevron appears centrally
    // between each breadcrumb item
    margin-left: govuk-em(govuk-spacing(2), $font-size);
    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;

    float: left;

    // Create a chevron using a box with borders on two sides, rotated 45deg.
    &::before {
      content: "";
      display: block;

      position: absolute;
      top: 0;
      bottom: 0;

      // Offset by the difference between the width of the non-rotated square
      // and its width when rotated
      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);

      width: $chevron-size;
      height: $chevron-size;

      margin: auto 0;

      transform: rotate(45deg);

      border: solid;
      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
      border-color: $chevron-border-colour;

      @supports (border-width: string.unquote("max(0px)")) {
        $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";

        // Ensure that the chevron never gets smaller than 16px
        border-width: string.unquote($border-width-eval) string.unquote($border-width-eval) 0 0;
        font-size: string.unquote("max(#{$font-size * 1px}, 1em)");
      }
    }

    &:first-child {
      margin-left: 0;
      padding-left: 0;

      &::before {
        content: none;
        display: none;
      }
    }
  }

  .govuk-breadcrumbs__link {
    @include govuk-link-common;
    @include govuk-link-style-text;
  }

  .govuk-breadcrumbs--collapse-on-mobile {
    @media #{govuk-until-breakpoint(tablet)} {
      .govuk-breadcrumbs__list-item {
        display: none;

        &:first-child,
        &:last-child {
          display: inline-block;
        }

        &::before {
          top: govuk-em(6px, $font-size);
          margin: 0;
        }
      }

      .govuk-breadcrumbs__list {
        display: flex;
      }
    }
  }

  .govuk-breadcrumbs--inverse {
    color: govuk-colour("white");

    .govuk-breadcrumbs__link {
      @include govuk-link-style-inverse;
    }

    .govuk-breadcrumbs__list-item::before {
      border-color: currentcolor;
    }
  }
}