diff --git a/services/web/app/views/_mixins/reconfirm_affiliation.pug b/services/web/app/views/_mixins/reconfirm_affiliation.pug index 8d6ce5f9a1..259a794a2f 100644 --- a/services/web/app/views/_mixins/reconfirm_affiliation.pug +++ b/services/web/app/views/_mixins/reconfirm_affiliation.pug @@ -33,6 +33,6 @@ mixin reconfirmAffiliationNotification(location) mixin reconfirmedAffiliationNotification() .alert.alert-info .reconfirm-notification - div + div(style="width:100%;") //- extra div for flex styling | !{translate("your_affiliation_is_confirmed", {institutionName: '{{userEmail.affiliation.institution.name}}'}, ['strong'])} #{translate('thank_you')} diff --git a/services/web/frontend/stylesheets/app/content_page.less b/services/web/frontend/stylesheets/app/content_page.less index 793be4e71a..9d2d49c93d 100644 --- a/services/web/frontend/stylesheets/app/content_page.less +++ b/services/web/frontend/stylesheets/app/content_page.less @@ -15,7 +15,16 @@ } } - .reset-btns; // reapply btn style to correct color property set on above + // correct color property set on above: + .reset-btns; + .alert { + .alert; + } + .alert-info { + .btn-info { + .btn-alert-info; + } + } hr { border-color: @hr-border-alt; diff --git a/services/web/frontend/stylesheets/components/alerts.less b/services/web/frontend/stylesheets/components/alerts.less index ecfc95adad..4499651d05 100755 --- a/services/web/frontend/stylesheets/components/alerts.less +++ b/services/web/frontend/stylesheets/components/alerts.less @@ -68,7 +68,8 @@ } .btn-alert-info { - .btn-alert-variant(@alert-info-bg); + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); + .alert-btn(@btn-info-bg); } .alert-warning { diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less index 68d30e7d23..0b10d24160 100755 --- a/services/web/frontend/stylesheets/core/mixins.less +++ b/services/web/frontend/stylesheets/core/mixins.less @@ -605,13 +605,24 @@ // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons +.alert-btn(@background) { + background-color: darken(@background, 16%); + &:hover, + &:focus, + &:active, + &.active, + &.checked, + .open .dropdown-toggle& { + background-color: darken(@background, 24%); + } +} .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; .alert & { - background-color: darken(@background, 16%); + .alert-btn(@background); } &:hover, @@ -623,9 +634,6 @@ color: @color; background-color: darken(@background, 8%); border-color: darken(@border, 12%); - .alert & { - background-color: darken(@background, 24%); - } } &:active, &.active,