vanilla-framework/scss/_patterns_navigation-reduced.scss at main · Ninfa-Jeon/vanilla-framework · 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
@mixin vf-p-navigation-reduced {
  .p-navigation--reduced {
    // height of reduced navigation calculated from line height and padding
    $reduced-nav-height: calc(map-get($settings-text-x-small, line-height) + 2 * $spv--small);

    background-color: $colors--theme--background-alt;
    position: relative;
    z-index: 99; // display above sticky top navigation, but below modals/overlays

    // LOGO OVERRIDES FOR REDUCED NAVIGATION

    // orange logo tag is hidden in reduced navigation
    .p-navigation__tagged-logo {
      .p-navigation__logo-tag {
        display: none;
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        // on large screens align the logo with the grid start
        .p-navigation__link {
          padding-left: 0;
        }
      }
    }

    // reduced nav logo text uses default font size (on small screens)
    .p-navigation__logo-title {
      color: $colors--theme--text-muted;
      font-size: #{map-get($settings-text-default, font-size)}rem;
      font-weight: $font-weight-regular-text;
    }

    // reduced padding on small screens
    .p-navigation__link {
      padding-bottom: $spv--medium;
      padding-top: $spv--medium;
    }

    // links in the banner (Menu toggle, search toggle) use muted text colour
    .p-navigation__banner .p-navigation__link {
      color: $colors--theme--text-muted;
    }

    // REDUCED SIZE OF NAVIGATION ON LARGE SCREENS
    @media (min-width: $breakpoint-navigation-threshold) {
      // adjust font size for reduced nav on large screens
      .p-navigation__link,
      .p-navigation__logo-title {
        color: $colors--theme--text-muted;
        font-size: #{map-get($settings-text-small, font-size)}rem;
        line-height: map-get($settings-text-x-small, line-height);
      }

      .p-navigation__link {
        padding-bottom: $spv--small;
        padding-top: $spv--small;
      }

      .p-navigation__item--dropdown-toggle .p-navigation__link {
        &::after {
          @include vf-icon-chevron-muted;
          top: $spv--small;
        }
      }

      .p-navigation__item--dropdown-toggle.is-active {
        background-color: $colors--theme--background-default;

        .p-navigation__link {
          color: $colors--theme--text-default;
        }

        .p-navigation__link::after {
          @include vf-icon-chevron-themed;
        }
      }

      .p-navigation__link--search-toggle {
        &::after {
          @include vf-icon-search-muted;
        }
      }
    }

    // SEARCH IN REDUCED NAVIGATION

    .p-navigation__link--search-toggle {
      // use muted icon to align with text colour
      &::after {
        @include vf-icon-search-muted;
        top: calc($spv--medium + map-get($settings-text-x-small, nudge));
      }

      // search label is always hidden in reduced navigation
      .p-navigation__search-label {
        display: none;
      }

      @media (min-width: $breakpoint-navigation-threshold) {
        &::after {
          top: $spv--small;
        }
      }
    }

    @media (min-width: $breakpoint-navigation-threshold) {
      &.has-search-open {
        // make sure reduced navigation items remain visible when search is open
        // both classes needed for specificity
        .p-navigation__nav .p-navigation__items {
          display: inline-flex;
        }

        // position the search under the reduced navigation
        .p-navigation__search {
          top: $reduced-nav-height;
        }
      }
    }
  }
}