1 |
|
2 |
|
3 |
|
4 |
|
5 | $navHeight: 3.5rem;
|
6 |
|
7 | body > main {
|
8 | padding-top:map-get($spacing-factor, "xs") + $navHeight;
|
9 |
|
10 | @media (min-width: map-get($breakpoints, "sm")) {
|
11 | padding-top: map-get($spacing-factor, "sm") + $navHeight;
|
12 | }
|
13 |
|
14 | @media (min-width: map-get($breakpoints, "md")) {
|
15 | padding-top: map-get($spacing-factor, "md") + $navHeight;
|
16 | }
|
17 |
|
18 | @media (min-width: map-get($breakpoints, "lg")) {
|
19 | grid-column-gap: $spacing-gutter*4;
|
20 | display: grid;
|
21 | grid-template-columns: 200px auto;
|
22 | padding-top: map-get($spacing-factor, "lg") + $navHeight;
|
23 | }
|
24 |
|
25 | @media (min-width: map-get($breakpoints, "xl")) {
|
26 | padding-top: map-get($spacing-factor, "xl") + $navHeight;
|
27 | }
|
28 |
|
29 | > * {
|
30 | min-width: 0;
|
31 | }
|
32 | }
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | div[role="document"] > section::before {
|
39 | display: block;
|
40 | height: map-get($spacing-factor, "xs") + $navHeight;
|
41 | margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
42 | content: '';
|
43 |
|
44 |
|
45 | @media (min-width: map-get($breakpoints, "sm")) {
|
46 | height: map-get($spacing-factor, "sm") + $navHeight;
|
47 | margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
|
48 | }
|
49 |
|
50 | @media (min-width: map-get($breakpoints, "md")) {
|
51 | height: map-get($spacing-factor, "md") + $navHeight;
|
52 | margin-top: -(map-get($spacing-factor, "md") + $navHeight);
|
53 | }
|
54 |
|
55 | @media (min-width: map-get($breakpoints, "lg")) {
|
56 | height: map-get($spacing-factor, "lg") + $navHeight;
|
57 | margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
|
58 | }
|
59 |
|
60 | @media (min-width: map-get($breakpoints, "xl")) {
|
61 | height: map-get($spacing-factor, "xl") + $navHeight;
|
62 | margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
|
63 | }
|
64 | }
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
71 | display: inline-block;
|
72 | width: 1rem;
|
73 | height: 1rem;
|
74 |
|
75 | $caret-icon-color: "808080";
|
76 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
|
77 | background-position: top center;
|
78 | background-repeat: no-repeat;
|
79 | background-size: .66rem auto;
|
80 | content: '';
|
81 | }
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | form.grid {
|
88 | > input:not([type=checkbox]):not([type=radio]),
|
89 | > button {
|
90 | margin-bottom: 0;
|
91 | }
|
92 | }
|