@ucd-lib/theme-elements 3.0.4 → 3.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.
|
@@ -17,6 +17,8 @@ import { MutationObserverController, WaitController } from '../../utils/controll
|
|
|
17
17
|
* @property {Boolean} opened - Menu is open
|
|
18
18
|
* @property {Number} animationDuration - Length of animation when opening/closing menu
|
|
19
19
|
* @property {Boolean} useIcon - Show a custom icon next to the title
|
|
20
|
+
* @property {String} href - URL to navigate to when the button is clicked. Disables dropdown.
|
|
21
|
+
* @property {Boolean} disableDropdown - Disables dropdown functionality. Fires btn-click event instead.
|
|
20
22
|
*/
|
|
21
23
|
export default class UcdThemeQuickLinks extends LitElement {
|
|
22
24
|
|
|
@@ -27,6 +29,8 @@ export default class UcdThemeQuickLinks extends LitElement {
|
|
|
27
29
|
opened: {type: Boolean},
|
|
28
30
|
animationDuration: {type: Number, attribute: "animation-duration"},
|
|
29
31
|
useIcon: {type: Boolean, attribute: "use-icon"},
|
|
32
|
+
href: {type: String},
|
|
33
|
+
disableDropdown: {type: Boolean, attribute: "disable-dropdown"},
|
|
30
34
|
_links: {type: Array, state: true},
|
|
31
35
|
_hasCustomIcons: {type: Boolean, state: true},
|
|
32
36
|
_transitioning: {type: Boolean, state: true},
|
|
@@ -143,6 +147,13 @@ export default class UcdThemeQuickLinks extends LitElement {
|
|
|
143
147
|
* @description Attached to menu open/close button
|
|
144
148
|
*/
|
|
145
149
|
async _onBtnClick(){
|
|
150
|
+
if ( this.href ){
|
|
151
|
+
window.location.href = this.href;
|
|
152
|
+
return;
|
|
153
|
+
} else if ( this.disableDropdown ) {
|
|
154
|
+
this.dispatchEvent(new CustomEvent('btn-click'));
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
146
157
|
let didToggle;
|
|
147
158
|
if ( this.opened ) {
|
|
148
159
|
didToggle = await this.close();
|
|
@@ -62,22 +62,23 @@ export function styles() {
|
|
|
62
62
|
padding: 0px;
|
|
63
63
|
border: 0px;
|
|
64
64
|
border-radius: 50%;
|
|
65
|
-
background-color: #ffbf00;
|
|
65
|
+
background-color: var(--ucd-theme-quick-links-icon-bg-color, #ffbf00);
|
|
66
66
|
background-size: 50%;
|
|
67
|
-
color: rgb(255, 255, 255);
|
|
68
67
|
text-indent: inherit;
|
|
69
68
|
margin-left: .75rem;
|
|
70
69
|
}
|
|
71
70
|
|
|
72
71
|
.quick-links__title.show-icon .custom-icon ::slotted(svg) {
|
|
73
|
-
fill:
|
|
72
|
+
fill: var(--ucd-theme-quick-links-icon-color, #fff);
|
|
74
73
|
height: 65%;
|
|
75
74
|
width: 65%;
|
|
76
75
|
margin: 0 auto;
|
|
77
76
|
}
|
|
78
|
-
|
|
79
77
|
.quick-links__title.show-icon:hover .custom-icon, .quick-links__title.show-icon:focus .custom-icon {
|
|
80
|
-
background-color: #13639e;
|
|
78
|
+
background-color: var(--ucd-theme-quick-links-icon-bg-color-hover, #13639e);
|
|
79
|
+
}
|
|
80
|
+
.quick-links__title.show-icon:hover .custom-icon ::slotted(svg), .quick-links__title.show-icon:focus .custom-icon ::slotted(svg) {
|
|
81
|
+
fill: var(--ucd-theme-quick-links-icon-color-hover, #fff);
|
|
81
82
|
}
|
|
82
83
|
|
|
83
84
|
.quick-links__title.show-icon {
|