htmx/static/pico-1.5.11/docs/scss/components/_nav.scss


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

/**
 * Docs: Navs
 */

body > nav {
  --nav-link-spacing-vertical: 1rem;

  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 99;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  backdrop-filter: saturate(180%) blur(20px);
  background-color: var(--nav-background-color);
  box-shadow: 0px 1px 0 var(--nav-border-color);

  &.container-fluid {
    padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
  }

  a {
    border-radius: 0;
  }

  svg {
    vertical-align: text-bottom;
  }

  // Band & Title
  ul:first-of-type {
    margin-left: calc(var(--spacing) * -1);

    li {
      padding: 0;
  
      // Brand
      &:first-of-type {
        a {
          display: block;
          margin: 0;
          padding: 0;
          background: var(--h1-color);
          color: var(--nav-logo-color);
  
          svg {
            display: block;
            width: 3.5rem;
            height: 3.5rem;
          }
        }
      }
  
      // Title
      &:nth-of-type(2) {
        display: none;
        margin-left: calc(var(--spacing) * 1.5);
        color: var(--h1-color);
  
        @media (min-width: map-get($breakpoints, "lg")) {
          display: inline;
        }
      }
    }
  }
}