@internetarchive/ia-topnav 2.1.0-alpha-webdev8660.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/index.js.map +1 -1
  2. package/dist/src/models.js.map +1 -1
  3. package/dist/src/styles/base.js +45 -45
  4. package/dist/src/styles/base.js.map +1 -1
  5. package/dist/src/styles/dropdown-menu.js +169 -169
  6. package/dist/src/styles/dropdown-menu.js.map +1 -1
  7. package/dist/src/styles/ia-topnav.js +82 -82
  8. package/dist/src/styles/ia-topnav.js.map +1 -1
  9. package/dist/src/styles/login-button.js +87 -87
  10. package/dist/src/styles/login-button.js.map +1 -1
  11. package/dist/src/styles/media-button.js +153 -153
  12. package/dist/src/styles/media-button.js.map +1 -1
  13. package/dist/src/styles/media-menu.js +63 -63
  14. package/dist/src/styles/media-menu.js.map +1 -1
  15. package/dist/src/styles/media-slider.js +78 -78
  16. package/dist/src/styles/media-slider.js.map +1 -1
  17. package/dist/src/styles/media-subnav.js +152 -152
  18. package/dist/src/styles/media-subnav.js.map +1 -1
  19. package/dist/src/styles/primary-nav.js +353 -353
  20. package/dist/src/styles/primary-nav.js.map +1 -1
  21. package/dist/src/styles/save-page-form.js +51 -51
  22. package/dist/src/styles/save-page-form.js.map +1 -1
  23. package/dist/src/styles/wayback-search.js +45 -45
  24. package/dist/src/styles/wayback-search.js.map +1 -1
  25. package/dist/src/styles/wayback-slider.js +26 -26
  26. package/dist/src/styles/wayback-slider.js.map +1 -1
  27. package/index.ts +3 -3
  28. package/package.json +1 -1
  29. package/src/models.ts +68 -68
  30. package/src/styles/base.ts +49 -49
  31. package/src/styles/dropdown-menu.ts +173 -173
  32. package/src/styles/ia-topnav.ts +86 -86
  33. package/src/styles/login-button.ts +91 -91
  34. package/src/styles/media-button.ts +157 -157
  35. package/src/styles/media-menu.ts +67 -67
  36. package/src/styles/media-slider.ts +82 -82
  37. package/src/styles/media-subnav.ts +160 -160
  38. package/src/styles/primary-nav.ts +357 -357
  39. package/src/styles/save-page-form.ts +55 -55
  40. package/src/styles/wayback-search.ts +49 -49
  41. package/src/styles/wayback-slider.ts +34 -34
@@ -1,91 +1,91 @@
1
1
  import { css } from 'lit';
2
2
  import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
3
- export default css `
4
- .logged-out-menu {
5
- background: inherit;
6
- border: none;
7
- }
8
- .logged-out-menu:focus-visible {
9
- outline: none;
10
- border: none;
11
- }
12
- .dropdown-toggle {
13
- display: block;
14
- text-transform: uppercase;
15
- color: var(--grey80);
16
- cursor: pointer;
17
- }
18
-
19
- .dropdown-toggle svg {
20
- height: 100%;
21
- width: 4rem;
22
- }
23
-
24
- .dropdown-toggle .fill-color {
25
- fill: var(--iconFill);
26
- }
27
-
28
- .dropdown-toggle:active .fill-color,
29
- .dropdown-toggle:focus .fill-color,
30
- .dropdown-toggle:hover .fill-color {
31
- fill: var(--linkHoverColor);
32
- }
33
-
34
- .active {
35
- border-radius: 1rem 1rem 0 0;
36
- background: var(--activeButtonBg);
37
- }
38
-
39
- .active .fill-color {
40
- fill: var(--activeColor);
41
- }
42
-
43
- span {
44
- display: none;
45
- font-size: 1.4rem;
46
- text-transform: uppercase;
47
- color: var(--loginTextColor);
48
- }
49
-
50
- span a {
51
- color: inherit;
52
- text-decoration: none;
53
- outline: 0;
54
- }
55
-
56
- a:hover,
57
- a:active,
58
- a:focus {
59
- color: var(--linkHoverColor) !important;
60
- outline: none !important;
61
- outline-offset: inherit !important;
62
- }
63
-
64
- @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
65
- .logged-out-toolbar {
66
- padding: 1rem 0.5rem;
67
- vertical-align: middle;
68
- }
69
-
70
- .active {
71
- background: transparent;
72
- }
73
-
74
- .dropdown-toggle {
75
- display: inline-block;
76
- vertical-align: middle;
77
- }
78
-
79
- .dropdown-toggle svg {
80
- height: 3rem;
81
- width: 3rem;
82
- display: block;
83
- }
84
-
85
- span {
86
- display: inline;
87
- vertical-align: middle;
88
- }
89
- }
3
+ export default css `
4
+ .logged-out-menu {
5
+ background: inherit;
6
+ border: none;
7
+ }
8
+ .logged-out-menu:focus-visible {
9
+ outline: none;
10
+ border: none;
11
+ }
12
+ .dropdown-toggle {
13
+ display: block;
14
+ text-transform: uppercase;
15
+ color: var(--grey80);
16
+ cursor: pointer;
17
+ }
18
+
19
+ .dropdown-toggle svg {
20
+ height: 100%;
21
+ width: 4rem;
22
+ }
23
+
24
+ .dropdown-toggle .fill-color {
25
+ fill: var(--iconFill);
26
+ }
27
+
28
+ .dropdown-toggle:active .fill-color,
29
+ .dropdown-toggle:focus .fill-color,
30
+ .dropdown-toggle:hover .fill-color {
31
+ fill: var(--linkHoverColor);
32
+ }
33
+
34
+ .active {
35
+ border-radius: 1rem 1rem 0 0;
36
+ background: var(--activeButtonBg);
37
+ }
38
+
39
+ .active .fill-color {
40
+ fill: var(--activeColor);
41
+ }
42
+
43
+ span {
44
+ display: none;
45
+ font-size: 1.4rem;
46
+ text-transform: uppercase;
47
+ color: var(--loginTextColor);
48
+ }
49
+
50
+ span a {
51
+ color: inherit;
52
+ text-decoration: none;
53
+ outline: 0;
54
+ }
55
+
56
+ a:hover,
57
+ a:active,
58
+ a:focus {
59
+ color: var(--linkHoverColor) !important;
60
+ outline: none !important;
61
+ outline-offset: inherit !important;
62
+ }
63
+
64
+ @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
65
+ .logged-out-toolbar {
66
+ padding: 1rem 0.5rem;
67
+ vertical-align: middle;
68
+ }
69
+
70
+ .active {
71
+ background: transparent;
72
+ }
73
+
74
+ .dropdown-toggle {
75
+ display: inline-block;
76
+ vertical-align: middle;
77
+ }
78
+
79
+ .dropdown-toggle svg {
80
+ height: 3rem;
81
+ width: 3rem;
82
+ display: block;
83
+ }
84
+
85
+ span {
86
+ display: inline;
87
+ vertical-align: middle;
88
+ }
89
+ }
90
90
  `;
91
91
  //# sourceMappingURL=login-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../../src/styles/login-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6DK,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n .logged-out-menu {\n background: inherit;\n border: none;\n }\n .logged-out-menu:focus-visible {\n outline: none;\n border: none;\n }\n .dropdown-toggle {\n display: block;\n text-transform: uppercase;\n color: var(--grey80);\n cursor: pointer;\n }\n\n .dropdown-toggle svg {\n height: 100%;\n width: 4rem;\n }\n\n .dropdown-toggle .fill-color {\n fill: var(--iconFill);\n }\n\n .dropdown-toggle:active .fill-color,\n .dropdown-toggle:focus .fill-color,\n .dropdown-toggle:hover .fill-color {\n fill: var(--linkHoverColor);\n }\n\n .active {\n border-radius: 1rem 1rem 0 0;\n background: var(--activeButtonBg);\n }\n\n .active .fill-color {\n fill: var(--activeColor);\n }\n\n span {\n display: none;\n font-size: 1.4rem;\n text-transform: uppercase;\n color: var(--loginTextColor);\n }\n\n span a {\n color: inherit;\n text-decoration: none;\n outline: 0;\n }\n\n a:hover,\n a:active,\n a:focus {\n color: var(--linkHoverColor) !important;\n outline: none !important;\n outline-offset: inherit !important;\n }\n\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n .logged-out-toolbar {\n padding: 1rem 0.5rem;\n vertical-align: middle;\n }\n\n .active {\n background: transparent;\n }\n\n .dropdown-toggle {\n display: inline-block;\n vertical-align: middle;\n }\n\n .dropdown-toggle svg {\n height: 3rem;\n width: 3rem;\n display: block;\n }\n\n span {\n display: inline;\n vertical-align: middle;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"login-button.js","sourceRoot":"","sources":["../../../src/styles/login-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6DK,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n .logged-out-menu {\r\n background: inherit;\r\n border: none;\r\n }\r\n .logged-out-menu:focus-visible {\r\n outline: none;\r\n border: none;\r\n }\r\n .dropdown-toggle {\r\n display: block;\r\n text-transform: uppercase;\r\n color: var(--grey80);\r\n cursor: pointer;\r\n }\r\n\r\n .dropdown-toggle svg {\r\n height: 100%;\r\n width: 4rem;\r\n }\r\n\r\n .dropdown-toggle .fill-color {\r\n fill: var(--iconFill);\r\n }\r\n\r\n .dropdown-toggle:active .fill-color,\r\n .dropdown-toggle:focus .fill-color,\r\n .dropdown-toggle:hover .fill-color {\r\n fill: var(--linkHoverColor);\r\n }\r\n\r\n .active {\r\n border-radius: 1rem 1rem 0 0;\r\n background: var(--activeButtonBg);\r\n }\r\n\r\n .active .fill-color {\r\n fill: var(--activeColor);\r\n }\r\n\r\n span {\r\n display: none;\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n color: var(--loginTextColor);\r\n }\r\n\r\n span a {\r\n color: inherit;\r\n text-decoration: none;\r\n outline: 0;\r\n }\r\n\r\n a:hover,\r\n a:active,\r\n a:focus {\r\n color: var(--linkHoverColor) !important;\r\n outline: none !important;\r\n outline-offset: inherit !important;\r\n }\r\n\r\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n .logged-out-toolbar {\r\n padding: 1rem 0.5rem;\r\n vertical-align: middle;\r\n }\r\n\r\n .active {\r\n background: transparent;\r\n }\r\n\r\n .dropdown-toggle {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n\r\n .dropdown-toggle svg {\r\n height: 3rem;\r\n width: 3rem;\r\n display: block;\r\n }\r\n\r\n span {\r\n display: inline;\r\n vertical-align: middle;\r\n }\r\n }\r\n`;\r\n"]}
@@ -1,157 +1,157 @@
1
1
  import { css } from 'lit';
2
2
  import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
3
- export default css `
4
- a {
5
- display: inline-block;
6
- text-decoration: none;
7
- }
8
-
9
- .menu-item {
10
- display: inline-block;
11
- width: 100%;
12
- padding: 0;
13
- font-size: 1.6rem;
14
- text-align: left;
15
- background: transparent;
16
- -webkit-box-align: center;
17
- -ms-flex-align: center;
18
- align-items: center;
19
- }
20
-
21
- .menu-item:focus {
22
- outline: none;
23
- }
24
-
25
- .label {
26
- display: inline-block;
27
- padding: 0;
28
- font-weight: 400;
29
- color: var(--primaryTextColor);
30
- text-align: left;
31
- vertical-align: middle;
32
- }
33
-
34
- .menu-item > .icon {
35
- display: inline-flex;
36
- vertical-align: middle;
37
- -webkit-box-align: center;
38
- -ms-flex-align: center;
39
- align-items: center;
40
- -webkit-box-pack: center;
41
- -ms-flex-pack: center;
42
- justify-content: center;
43
- }
44
-
45
- .menu-item > .icon > svg {
46
- height: 4rem;
47
- width: 4rem;
48
- }
49
-
50
- .menu-item.selected .icon {
51
- background-color: var(--activeButtonBg);
52
- border-radius: 1rem 0 0 1rem;
53
- }
54
-
55
- .icon .fill-color {
56
- fill: #999;
57
- }
58
-
59
- .icon.active .fill-color {
60
- fill: #fff;
61
- }
62
-
63
- .donate .fill-color {
64
- fill: #f00;
65
- }
66
-
67
- @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
68
- .menu-item {
69
- width: auto;
70
- height: 5rem;
71
- color: var(--mediaLabelDesktopColor);
72
- display: inline-flex;
73
- }
74
- .menu-item:hover,
75
- .menu-item:active,
76
- .menu-item:focus {
77
- color: var(--linkHoverColor);
78
- }
79
-
80
- .menu-item:hover .fill-color,
81
- .menu-item:active .fill-color,
82
- .menu-item:focus .fill-color {
83
- fill: var(--linkHoverColor);
84
- }
85
-
86
- .label {
87
- display: none;
88
- }
89
-
90
- .label,
91
- .web:after {
92
- padding-right: 1rem;
93
- font-size: 1.3rem;
94
- text-transform: uppercase;
95
- color: inherit;
96
- }
97
-
98
- .web:after {
99
- display: none;
100
- content: 'web';
101
- }
102
- .donate,
103
- .more {
104
- display: none;
105
- }
106
-
107
- .menu-item.selected {
108
- background: var(--activeDesktopMenuIcon);
109
- }
110
-
111
- .menu-item.selected .label,
112
- .menu-item.selected.web:after {
113
- color: var(--linkHoverColor);
114
- }
115
-
116
- .menu-item.selected .icon {
117
- background: transparent;
118
- }
119
-
120
- /* selected state icon colors */
121
- .web.selected .fill-color {
122
- fill: #ffcd27;
123
- }
124
-
125
- .texts.selected .fill-color {
126
- fill: #faab3c;
127
- }
128
-
129
- .video.selected .fill-color {
130
- fill: #f1644b;
131
- }
132
-
133
- .audio.selected .fill-color {
134
- fill: #00adef;
135
- }
136
-
137
- .software.selected .fill-color {
138
- fill: #9ecc4f;
139
- }
140
-
141
- .images.selected .fill-color {
142
- fill: #aa99c9;
143
- }
144
- }
145
-
146
- @media (min-width: 1200px) {
147
- .label,
148
- .web:after {
149
- display: inline;
150
- }
151
-
152
- .web .label {
153
- display: none;
154
- }
155
- }
3
+ export default css `
4
+ a {
5
+ display: inline-block;
6
+ text-decoration: none;
7
+ }
8
+
9
+ .menu-item {
10
+ display: inline-block;
11
+ width: 100%;
12
+ padding: 0;
13
+ font-size: 1.6rem;
14
+ text-align: left;
15
+ background: transparent;
16
+ -webkit-box-align: center;
17
+ -ms-flex-align: center;
18
+ align-items: center;
19
+ }
20
+
21
+ .menu-item:focus {
22
+ outline: none;
23
+ }
24
+
25
+ .label {
26
+ display: inline-block;
27
+ padding: 0;
28
+ font-weight: 400;
29
+ color: var(--primaryTextColor);
30
+ text-align: left;
31
+ vertical-align: middle;
32
+ }
33
+
34
+ .menu-item > .icon {
35
+ display: inline-flex;
36
+ vertical-align: middle;
37
+ -webkit-box-align: center;
38
+ -ms-flex-align: center;
39
+ align-items: center;
40
+ -webkit-box-pack: center;
41
+ -ms-flex-pack: center;
42
+ justify-content: center;
43
+ }
44
+
45
+ .menu-item > .icon > svg {
46
+ height: 4rem;
47
+ width: 4rem;
48
+ }
49
+
50
+ .menu-item.selected .icon {
51
+ background-color: var(--activeButtonBg);
52
+ border-radius: 1rem 0 0 1rem;
53
+ }
54
+
55
+ .icon .fill-color {
56
+ fill: #999;
57
+ }
58
+
59
+ .icon.active .fill-color {
60
+ fill: #fff;
61
+ }
62
+
63
+ .donate .fill-color {
64
+ fill: #f00;
65
+ }
66
+
67
+ @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
68
+ .menu-item {
69
+ width: auto;
70
+ height: 5rem;
71
+ color: var(--mediaLabelDesktopColor);
72
+ display: inline-flex;
73
+ }
74
+ .menu-item:hover,
75
+ .menu-item:active,
76
+ .menu-item:focus {
77
+ color: var(--linkHoverColor);
78
+ }
79
+
80
+ .menu-item:hover .fill-color,
81
+ .menu-item:active .fill-color,
82
+ .menu-item:focus .fill-color {
83
+ fill: var(--linkHoverColor);
84
+ }
85
+
86
+ .label {
87
+ display: none;
88
+ }
89
+
90
+ .label,
91
+ .web:after {
92
+ padding-right: 1rem;
93
+ font-size: 1.3rem;
94
+ text-transform: uppercase;
95
+ color: inherit;
96
+ }
97
+
98
+ .web:after {
99
+ display: none;
100
+ content: 'web';
101
+ }
102
+ .donate,
103
+ .more {
104
+ display: none;
105
+ }
106
+
107
+ .menu-item.selected {
108
+ background: var(--activeDesktopMenuIcon);
109
+ }
110
+
111
+ .menu-item.selected .label,
112
+ .menu-item.selected.web:after {
113
+ color: var(--linkHoverColor);
114
+ }
115
+
116
+ .menu-item.selected .icon {
117
+ background: transparent;
118
+ }
119
+
120
+ /* selected state icon colors */
121
+ .web.selected .fill-color {
122
+ fill: #ffcd27;
123
+ }
124
+
125
+ .texts.selected .fill-color {
126
+ fill: #faab3c;
127
+ }
128
+
129
+ .video.selected .fill-color {
130
+ fill: #f1644b;
131
+ }
132
+
133
+ .audio.selected .fill-color {
134
+ fill: #00adef;
135
+ }
136
+
137
+ .software.selected .fill-color {
138
+ fill: #9ecc4f;
139
+ }
140
+
141
+ .images.selected .fill-color {
142
+ fill: #aa99c9;
143
+ }
144
+ }
145
+
146
+ @media (min-width: 1200px) {
147
+ .label,
148
+ .web:after {
149
+ display: inline;
150
+ }
151
+
152
+ .web .label {
153
+ display: none;
154
+ }
155
+ }
156
156
  `;
157
157
  //# sourceMappingURL=media-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"media-button.js","sourceRoot":"","sources":["../../../src/styles/media-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgEK,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n a {\n display: inline-block;\n text-decoration: none;\n }\n\n .menu-item {\n display: inline-block;\n width: 100%;\n padding: 0;\n font-size: 1.6rem;\n text-align: left;\n background: transparent;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n }\n\n .menu-item:focus {\n outline: none;\n }\n\n .label {\n display: inline-block;\n padding: 0;\n font-weight: 400;\n color: var(--primaryTextColor);\n text-align: left;\n vertical-align: middle;\n }\n\n .menu-item > .icon {\n display: inline-flex;\n vertical-align: middle;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n\n .menu-item > .icon > svg {\n height: 4rem;\n width: 4rem;\n }\n\n .menu-item.selected .icon {\n background-color: var(--activeButtonBg);\n border-radius: 1rem 0 0 1rem;\n }\n\n .icon .fill-color {\n fill: #999;\n }\n\n .icon.active .fill-color {\n fill: #fff;\n }\n\n .donate .fill-color {\n fill: #f00;\n }\n\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n .menu-item {\n width: auto;\n height: 5rem;\n color: var(--mediaLabelDesktopColor);\n display: inline-flex;\n }\n .menu-item:hover,\n .menu-item:active,\n .menu-item:focus {\n color: var(--linkHoverColor);\n }\n\n .menu-item:hover .fill-color,\n .menu-item:active .fill-color,\n .menu-item:focus .fill-color {\n fill: var(--linkHoverColor);\n }\n\n .label {\n display: none;\n }\n\n .label,\n .web:after {\n padding-right: 1rem;\n font-size: 1.3rem;\n text-transform: uppercase;\n color: inherit;\n }\n\n .web:after {\n display: none;\n content: 'web';\n }\n .donate,\n .more {\n display: none;\n }\n\n .menu-item.selected {\n background: var(--activeDesktopMenuIcon);\n }\n\n .menu-item.selected .label,\n .menu-item.selected.web:after {\n color: var(--linkHoverColor);\n }\n\n .menu-item.selected .icon {\n background: transparent;\n }\n\n /* selected state icon colors */\n .web.selected .fill-color {\n fill: #ffcd27;\n }\n\n .texts.selected .fill-color {\n fill: #faab3c;\n }\n\n .video.selected .fill-color {\n fill: #f1644b;\n }\n\n .audio.selected .fill-color {\n fill: #00adef;\n }\n\n .software.selected .fill-color {\n fill: #9ecc4f;\n }\n\n .images.selected .fill-color {\n fill: #aa99c9;\n }\n }\n\n @media (min-width: 1200px) {\n .label,\n .web:after {\n display: inline;\n }\n\n .web .label {\n display: none;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"media-button.js","sourceRoot":"","sources":["../../../src/styles/media-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAgEK,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyF9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n a {\r\n display: inline-block;\r\n text-decoration: none;\r\n }\r\n\r\n .menu-item {\r\n display: inline-block;\r\n width: 100%;\r\n padding: 0;\r\n font-size: 1.6rem;\r\n text-align: left;\r\n background: transparent;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n }\r\n\r\n .menu-item:focus {\r\n outline: none;\r\n }\r\n\r\n .label {\r\n display: inline-block;\r\n padding: 0;\r\n font-weight: 400;\r\n color: var(--primaryTextColor);\r\n text-align: left;\r\n vertical-align: middle;\r\n }\r\n\r\n .menu-item > .icon {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-pack: center;\r\n -ms-flex-pack: center;\r\n justify-content: center;\r\n }\r\n\r\n .menu-item > .icon > svg {\r\n height: 4rem;\r\n width: 4rem;\r\n }\r\n\r\n .menu-item.selected .icon {\r\n background-color: var(--activeButtonBg);\r\n border-radius: 1rem 0 0 1rem;\r\n }\r\n\r\n .icon .fill-color {\r\n fill: #999;\r\n }\r\n\r\n .icon.active .fill-color {\r\n fill: #fff;\r\n }\r\n\r\n .donate .fill-color {\r\n fill: #f00;\r\n }\r\n\r\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n .menu-item {\r\n width: auto;\r\n height: 5rem;\r\n color: var(--mediaLabelDesktopColor);\r\n display: inline-flex;\r\n }\r\n .menu-item:hover,\r\n .menu-item:active,\r\n .menu-item:focus {\r\n color: var(--linkHoverColor);\r\n }\r\n\r\n .menu-item:hover .fill-color,\r\n .menu-item:active .fill-color,\r\n .menu-item:focus .fill-color {\r\n fill: var(--linkHoverColor);\r\n }\r\n\r\n .label {\r\n display: none;\r\n }\r\n\r\n .label,\r\n .web:after {\r\n padding-right: 1rem;\r\n font-size: 1.3rem;\r\n text-transform: uppercase;\r\n color: inherit;\r\n }\r\n\r\n .web:after {\r\n display: none;\r\n content: 'web';\r\n }\r\n .donate,\r\n .more {\r\n display: none;\r\n }\r\n\r\n .menu-item.selected {\r\n background: var(--activeDesktopMenuIcon);\r\n }\r\n\r\n .menu-item.selected .label,\r\n .menu-item.selected.web:after {\r\n color: var(--linkHoverColor);\r\n }\r\n\r\n .menu-item.selected .icon {\r\n background: transparent;\r\n }\r\n\r\n /* selected state icon colors */\r\n .web.selected .fill-color {\r\n fill: #ffcd27;\r\n }\r\n\r\n .texts.selected .fill-color {\r\n fill: #faab3c;\r\n }\r\n\r\n .video.selected .fill-color {\r\n fill: #f1644b;\r\n }\r\n\r\n .audio.selected .fill-color {\r\n fill: #00adef;\r\n }\r\n\r\n .software.selected .fill-color {\r\n fill: #9ecc4f;\r\n }\r\n\r\n .images.selected .fill-color {\r\n fill: #aa99c9;\r\n }\r\n }\r\n\r\n @media (min-width: 1200px) {\r\n .label,\r\n .web:after {\r\n display: inline;\r\n }\r\n\r\n .web .label {\r\n display: none;\r\n }\r\n }\r\n`;\r\n"]}
@@ -1,67 +1,67 @@
1
1
  import { css } from 'lit';
2
2
  import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
3
- export default css `
4
- :host {
5
- outline: none;
6
- }
7
-
8
- .media-menu-inner {
9
- z-index: -1;
10
- top: -40rem;
11
- background-color: var(--mediaMenuBg);
12
- margin: 0;
13
- overflow: hidden;
14
- transition-duration: 0.2s;
15
- transition-property: top;
16
- transition-timing-function: ease;
17
- }
18
-
19
- .menu-group {
20
- position: relative;
21
- line-height: normal;
22
- }
23
-
24
- /* Mobile view styles */
25
- @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
26
- .media-menu-inner {
27
- position: absolute;
28
- width: 100%;
29
- }
30
-
31
- .open .media-menu-inner {
32
- top: 0;
33
- }
34
-
35
- .overflow-clip {
36
- position: absolute;
37
- z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
38
- top: 4rem;
39
- left: 0;
40
- height: 0;
41
- width: 100%;
42
- overflow: hidden;
43
- transition-duration: 0.2s;
44
- transition-property: height;
45
- }
46
-
47
- .open .overflow-clip {
48
- height: 40rem;
49
- }
50
- }
51
-
52
- /* Desktop view styles */
53
- @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
54
- .media-menu-inner {
55
- display: block;
56
- position: static;
57
- width: auto;
58
- height: 5rem;
59
- transition-property: none;
60
- }
61
-
62
- .menu-group {
63
- font-size: 0;
64
- }
65
- }
3
+ export default css `
4
+ :host {
5
+ outline: none;
6
+ }
7
+
8
+ .media-menu-inner {
9
+ z-index: -1;
10
+ top: -40rem;
11
+ background-color: var(--mediaMenuBg);
12
+ margin: 0;
13
+ overflow: hidden;
14
+ transition-duration: 0.2s;
15
+ transition-property: top;
16
+ transition-timing-function: ease;
17
+ }
18
+
19
+ .menu-group {
20
+ position: relative;
21
+ line-height: normal;
22
+ }
23
+
24
+ /* Mobile view styles */
25
+ @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
26
+ .media-menu-inner {
27
+ position: absolute;
28
+ width: 100%;
29
+ }
30
+
31
+ .open .media-menu-inner {
32
+ top: 0;
33
+ }
34
+
35
+ .overflow-clip {
36
+ position: absolute;
37
+ z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */
38
+ top: 4rem;
39
+ left: 0;
40
+ height: 0;
41
+ width: 100%;
42
+ overflow: hidden;
43
+ transition-duration: 0.2s;
44
+ transition-property: height;
45
+ }
46
+
47
+ .open .overflow-clip {
48
+ height: 40rem;
49
+ }
50
+ }
51
+
52
+ /* Desktop view styles */
53
+ @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
54
+ .media-menu-inner {
55
+ display: block;
56
+ position: static;
57
+ width: auto;
58
+ height: 5rem;
59
+ transition-property: none;
60
+ }
61
+
62
+ .menu-group {
63
+ font-size: 0;
64
+ }
65
+ }
66
66
  `;
67
67
  //# sourceMappingURL=media-menu.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"media-menu.js","sourceRoot":"","sources":["../../../src/styles/media-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;uBAsBK,wBAAwB,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B5B,wBAAwB;;;;;;;;;;;;;CAa9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n :host {\n outline: none;\n }\n\n .media-menu-inner {\n z-index: -1;\n top: -40rem;\n background-color: var(--mediaMenuBg);\n margin: 0;\n overflow: hidden;\n transition-duration: 0.2s;\n transition-property: top;\n transition-timing-function: ease;\n }\n\n .menu-group {\n position: relative;\n line-height: normal;\n }\n\n /* Mobile view styles */\n @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\n .media-menu-inner {\n position: absolute;\n width: 100%;\n }\n\n .open .media-menu-inner {\n top: 0;\n }\n\n .overflow-clip {\n position: absolute;\n z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */\n top: 4rem;\n left: 0;\n height: 0;\n width: 100%;\n overflow: hidden;\n transition-duration: 0.2s;\n transition-property: height;\n }\n\n .open .overflow-clip {\n height: 40rem;\n }\n }\n\n /* Desktop view styles */\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n .media-menu-inner {\n display: block;\n position: static;\n width: auto;\n height: 5rem;\n transition-property: none;\n }\n\n .menu-group {\n font-size: 0;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"media-menu.js","sourceRoot":"","sources":["../../../src/styles/media-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;uBAsBK,wBAAwB,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4B5B,wBAAwB;;;;;;;;;;;;;CAa9C,CAAC","sourcesContent":["import { css } from 'lit';\r\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\r\n\r\nexport default css`\r\n :host {\r\n outline: none;\r\n }\r\n\r\n .media-menu-inner {\r\n z-index: -1;\r\n top: -40rem;\r\n background-color: var(--mediaMenuBg);\r\n margin: 0;\r\n overflow: hidden;\r\n transition-duration: 0.2s;\r\n transition-property: top;\r\n transition-timing-function: ease;\r\n }\r\n\r\n .menu-group {\r\n position: relative;\r\n line-height: normal;\r\n }\r\n\r\n /* Mobile view styles */\r\n @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {\r\n .media-menu-inner {\r\n position: absolute;\r\n width: 100%;\r\n }\r\n\r\n .open .media-menu-inner {\r\n top: 0;\r\n }\r\n\r\n .overflow-clip {\r\n position: absolute;\r\n z-index: -1; /** needs to be under the navigation, otherwise it intercepts clicks */\r\n top: 4rem;\r\n left: 0;\r\n height: 0;\r\n width: 100%;\r\n overflow: hidden;\r\n transition-duration: 0.2s;\r\n transition-property: height;\r\n }\r\n\r\n .open .overflow-clip {\r\n height: 40rem;\r\n }\r\n }\r\n\r\n /* Desktop view styles */\r\n @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\r\n .media-menu-inner {\r\n display: block;\r\n position: static;\r\n width: auto;\r\n height: 5rem;\r\n transition-property: none;\r\n }\r\n\r\n .menu-group {\r\n font-size: 0;\r\n }\r\n }\r\n`;\r\n"]}