notification-admin/app/assets/stylesheets/tailwind/components/navigation.css at 86ca4bd1643da8d355ce692040151e21423c0630 · cds-snc/notification-admin · 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
137
138
139
140
@layer components {
  /*! purgecss start ignore */

  a:focus #live-banner,
  a:hover #live-banner {
    @apply bg-blue text-white;
  }

  .navigation {
    @apply p-0;
  }

  .navigation-service {
    font-size: 0;
    @apply border-0 border-b-1 border-solid border-gray-grey2 relative m-0 mb-4;
  }

  .navigation-service-name {
    padding-top: 14px;
    padding-bottom: 11px;
    max-width: 50%;
    @apply text-smaller leading-tight px-0 inline-block;
  }

  .navigation-service-switch {
    padding-top: 14px;
    padding-bottom: 11px;
    @apply text-smaller leading-tight font-normal text-right absolute top-0 right-0 pr-0 pl-gutterHalf;
  }
  .navigation-service-switch:hover {
    @apply underline text-blue-lightblue;
  }
  .navigation-service-switch:focus {
    @apply outline-none border-b-1 border-solid border-yellow text-black;
    border-left-width: 10px;
    border-right-width: 3px;
    right: -3px;
  }

  .navigation-service-back-to {
    padding-top: 14px;
    padding-bottom: 11px;
    @apply text-smaller leading-tight font-normal pr-gutterHalf pl-0 inline-block no-underline;
  }
  .navigation-service-back-to:hover {
    @apply underline text-blue-lightblue;
  }

  .navigation li {
    @apply text-smaller leading-tight font-normal m-0 list-none;
  }
  .navigation a {
    top: 5px;
    @apply block px-0 py-2 relative;
  }
  .navigation a:link,
  .navigation a:visited {
    @apply no-underline;
  }
  .navigation a:hover {
    @apply underline text-blue-lightblue;
  }
  .navigation a:focus {
    @apply text-black;
  }
  .navigation a.selected {
    /*  These two lines stop the width of the item jumping so much
        between selected and unselected states */
    left: -0.5px;
    letter-spacing: -0.01em;
    @apply text-smaller leading-tight font-bold relative;
  }

  /* https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss */
  @variant md {
    .sub-navigation {
      margin-top: 45px;
    }
  }

  .sub-navigation ol,
  .sub-navigation ul {
    @apply list-none p-0 m-0;
  }

  .sub-navigation__item {
    @apply text-small leading-tight font-normal border-b-1 border-solid border-gray-button block px-0 py-4;
  }
  .sub-navigation__item a:link {
    @apply no-underline;
  }
  .sub-navigation__item a:hover,
  .sub-navigation__item a:active {
    @apply underline;
  }
  ol ol .sub-navigation__item {
    @apply pl-gutter;
  }

  .sub-navigation__item--active {
    @apply text-small leading-tight font-bold;
  }
  .sub-navigation__item--active a:link,
  .sub-navigation__item--active a:visited {
    @apply text-black;
  }

  #proposition-links [aria-current="page"]:not([tabindex]) {
    @apply border-b-4 border-blue;
  }

  .nav-menu-item {
    @apply flex flex-shrink-0 items-center gap-2 text-small text-blue py-5 font-medium no-underline self-center border-b-4 border-transparent visited:text-blue link:text-blue;
  }
  .nav-menu-item:hover {
    @apply border-gray-300;
  }
  .nav-menu-item:focus {
    @apply border-b-4 bg-yellow border-black outline-none;
  }

  .nav-menu-item[data-module="menu"][aria-expanded="true"],
  .nav-menu-item[data-module="more-menu"][aria-expanded="true"] {
    @apply border-gray-300;
  }

  .menu-divider {
    width: 102px;
    height: 1px;
    left: 124px;
    background: #c6c6c6;
  }

  .shadow {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  /*! purgecss end ignore */
}