MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 12 Wiki Activity

[Connect | Trunk] 

Customization: updates according to admin UI


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@57275 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2019-10-07 07:00:19 +00:00
parent 4558e11745
commit c25dceee79
2 changed files with 134 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/app/utils/customization/customization.component.ts
View File

@ -58,7 +58,8 @@ export class CustomizationComponent {
} }
private buildCss() { private buildCss() {
// console.log(this.layout); console.log(this.layout);
document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor); document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor);
document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor); document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor);
let css = ` let css = `
@ -66,10 +67,11 @@ export class CustomizationComponent {
.communityPanelBackground:not(bottom) { .communityPanelBackground:not(bottom) {
border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `; border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `;
border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `; border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `;
border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth : '1px') + `;`+` border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+`
} }
.communityPanelBackground, .communityPanelBackground .uk-section-primary { .communityPanelBackground, .communityPanelBackground .uk-section-primary {
background-color: ` + this.layout.mainColor + `; background-color: ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `;
} }
/*Panel fonts*/ /*Panel fonts*/
@ -77,7 +79,8 @@ export class CustomizationComponent {
.communityPanelBackground { .communityPanelBackground {
color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` + color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` +
(this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') + (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') +
(this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + ' !important;') : '') + (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') +
(this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') +
` `
} }
@ -87,46 +90,47 @@ export class CustomizationComponent {
.communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) { .communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) {
color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` + color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` +
(this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') +
` `
} }
.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){ .communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){
`+ `+
(this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') + (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') +
(this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + ' !important;') : '') + (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') +
` `
} }
/* Panel links */ /* Panel links */
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a { .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a {
color: ` color: `
+ (this.layout.panel.links.color != null ? this.layout.panel.links.color : 'white') + ` !important;` + + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;`
(this.layout.panel.links.family != null ? ('font-family: ' + this.layout.panel.links.family + ' !important;') : '') + + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' )
(this.layout.panel.links.size != null ? ('font-size: ' + this.layout.panel.links.size + ' !important;') : '') + + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' )
` +`
} }
/* Panel links - hover */ /* Panel links - hover */
.communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover { .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover {
color: ` color: `
+ (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + ` !important;` + ` + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;`
+ `
} }
.uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink, .uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink,
.uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover { .uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover {
color:` + (this.layout.links.color != null ? this.layout.links.color : `var(--portal-main-color)`) + ` color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + `
} }
.uk-link:hover, a:not(.uk-button):hover, .uk-link:hover, a:not(.uk-button):hover,
.uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a, .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a,
.uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a { .uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a {
color:` + (this.layout.links.onHover.color != null ? this.layout.links.onHover.color : `var(--portal-dark-color)`) + ` color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + `
} }
.communityBorder { .communityBorder {
border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `; border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `;
border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `; border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `;
border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2px`) + `; border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px;
border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6px`) + `; border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px;
} }
/*Panel Elements & cards*/ /*Panel Elements & cards*/
@ -135,11 +139,15 @@ export class CustomizationComponent {
border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `; border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `;
} }
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{ .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{
border-color: ` + (this.layout.panel.links.color != null ? this.layout.panel.links.color : `rgba(255, 255, 255, 0.8)`) + `; border-color: ` +
+ (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) +
+ `;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
.communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{ .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{
border-color: ` + (this.layout.panel.links.onHover.color != null ? this.layout.panel.links.onHover.color : `rgba(255, 255, 255, 0.5)`) + `; border-color: ` +
(this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+
+ `;
} }
.communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) { .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) {
color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `; color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `;
@ -147,40 +155,60 @@ export class CustomizationComponent {
.uk-button:not(.uk-button-text){ .uk-button:not(.uk-button-text){
border-radius:` + (this.layout.buttons.borderRadius != null ? this.layout.buttons.borderRadius : `4px`) + `; border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px;
} }
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button { .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {
background-color:` + (this.layout.buttons.backgroundColor != null ? this.layout.buttons.backgroundColor : `#003052`) + `; background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `;
color: ` + (this.layout.buttons.color != null ? this.layout.buttons.color : `white`) + `; color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `;
border-color: ` + (this.layout.buttons.borderColor != null ? this.layout.buttons.borderColor : `transparent`) + `; border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `;
border-style: ` + (this.layout.buttons.borderStyle != null ? this.layout.buttons.borderStyle : `solid`) + `; border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `;
border-width: ` + (this.layout.buttons.borderWidth != null ? this.layout.buttons.borderWidth : `1px`) + `; border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px;
} }
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover { .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {
background-color: ` + (this.layout.buttons.onHover.backgroundColor != null ? this.layout.buttons.onHover.backgroundColor : `#154B71`) + `; background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `;
color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `white`) + `; color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `;
border-color: ` + (this.layout.buttons.onHover.color != null ? this.layout.buttons.onHover.color : `transparent`) + `; border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `;
} }
/*Buttons*/ /*Buttons*/
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) { .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
background-color: ` + (this.layout.panel.buttons.backgroundColor != null ? this.layout.panel.buttons.backgroundColor : `white`) + ` !important; background-color: `
color: ` + (this.layout.panel.buttons.color != null ? this.layout.panel.buttons.color : `var(--portal-main-color)`) + ` !important; + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') )
border-color: ` + (this.layout.panel.buttons.borderColor != null ? this.layout.panel.buttons.borderColor : `transparent`) + ` !important; +` !important;
border-style: ` + (this.layout.panel.buttons.borderStyle != null ? this.layout.panel.buttons.borderStyle : `solid`) + ` !important; color: `
border-width: ` + (this.layout.panel.buttons.borderWidth != null ? this.layout.panel.buttons.borderWidth : `1px`) + ` !important; + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') )
border-radius:` + (this.layout.panel.buttons.borderRadius != null ? this.layout.panel.buttons.borderRadius : `4px`) + ` !important; + ` !important;
font-weight:` + (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `; border-color: `
+ (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') )
+ ` !important;
border-style: ` +
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') )
+ ` !important;
border-width: ` +
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') )
+ ` !important;
border-radius:` +
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
+ ` !important;
font-weight:`
// (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+
// (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `;
+`
} }
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover { .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {
background-color: ` + (this.layout.panel.buttons.onHover.backgroundColor != null ? this.layout.panel.buttons.onHover.backgroundColor : ` #eeeeee `) + ` !important; background-color: ` +
color: ` + (this.layout.panel.buttons.onHover.color != null ? this.layout.panel.buttons.onHover.color : ` var(--portal-main-color) `) + ` !important; (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') )
border-color:` + (this.layout.panel.buttons.onHover.borderColor != null ? this.layout.panel.buttons.onHover.borderColor : `transparent`) + ` !important; + ` !important;
color: ` +
(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') )
+ ` !important;
border-color:`
+(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') )
+ ` !important;
} }

137
src/assets/customizationOptions.json
View File

@ -1,80 +1,81 @@
{ {
"mainColor": "#4C9CD5", "mainColor":"#4C9CD5",
"secondaryColor": "#24857F", "secondaryColor":"#24857F",
"panel": { "panel":{
"background": { "onDarkBackground":true,
"borderStyle": null, "background":{
"borderColor": null, "color":"#4C9CD5",
"borderWidth": null "borderStyle":null,
}, "fonts": { "borderColor":null,
"color": "white", "borderWidth":"0"
"family": null,
"size": null
}, },
"title": { "fonts":{
"color": "white", "color":"white",
"family": null, "family":null,
"size": null "size":null,
"weight":null
}, },
"links": { "title":{
"color": "rgba(255, 255, 255, 0.98)", "color":"white",
"family": null, "family":null,
"size": null, "size":null,
"onHover": { "weight":null
"color": null
}
}, },
"buttons": { "panelElements":{
"backgroundColor": "white", "backgroundColor":"rgba(255, 255, 255, 0.5)",
"fontWeight": null, "borderColor":"rgba(255, 255, 255, 0.5)",
"color": null, "color":"white"
"borderStyle": null,
"borderColor": null,
"borderWidth": "1px",
"borderRadius": "4px",
"onHover": {
"backgroundColor": "#eeeeee",
"color": null,
"borderColor": null
}
},
"panelElements": {
"backgroundColor": "rgba(255, 255, 255, 0.5)",
"borderColor": "rgba(255, 255, 255, 0.5)",
"color": "white"
} }
}, },
"box":{
"box": { "borderColor":null,
"borderColor": null, "borderStyle":"solid",
"borderStyle": "solid", "borderWidth":"2",
"borderWidth": "2px", "borderRadius":"6"
"borderRadius": "6px"
}, },
"links":{
"links": { "darkBackground":{
"color": null, "family":null,
"family": null, "size":null,
"decoration": null, "weight":null,
"onHover": { "color":"rgba(255, 255, 255, 0.98)",
"color": null "onHover":{
"color":"rgba(255, 255, 255, 0.5)"
}
},
"lightBackground":{
"color":"#4C9CD5",
"onHover":{
"color":"#24857F"
}
} }
}, },
"buttons":{
"buttons": { "darkBackground":{
"backgroundColor": null, "backgroundColor":"white",
"color": null, "color":"#4C9CD5",
"borderStyle": null, "borderStyle":"solid",
"borderColor": null, "borderColor":"white",
"borderWidth": null, "borderWidth":"1",
"borderRadius": null, "borderRadius":"4",
"onHover": { "onHover":{
"backgroundColor": null, "backgroundColor":"#eeeeee",
"color": null, "color":"#4C9CD5",
"borderColor": null "borderColor":"#eeeeee"
}
},
"lightBackground":{
"backgroundColor":"#003052",
"color":"white",
"borderStyle":"solid",
"borderColor":"#003052",
"borderWidth":"1",
"borderRadius":"4",
"onHover":{
"backgroundColor":"#154B71",
"color":"white",
"borderColor":"#154B71"
}
} }
} }
} }