diff --git a/assets/css/hero--sky.css b/assets/css/hero--sky.css index 57b48f1327072f95ee842cd4bcfcc17e8074b68f..c3f83ad0247decf71bf133d9b0bea4b5b3078827 100644 --- a/assets/css/hero--sky.css +++ b/assets/css/hero--sky.css @@ -534,8 +534,8 @@ [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-date-advanced, [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-location-address { -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .article__special-fields-icon { @@ -557,6 +557,60 @@ min-width: 195px; } +.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'][disabled]:not(.is-disabled), .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'][disabled]:not(.is-disabled) { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'][disabled]:not(.is-disabled):after, .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'][disabled]:not(.is-disabled):after { + content: ''; + margin-left: 8px; + display: inline-block; + width: 16px; + height: 16px; + background: url("../../components/04-organisms/hero/icons/icon-autorenew.svg") no-repeat center/16px 16px; + -webkit-animation: glyphicon-spin 1s infinite linear; + animation: glyphicon-spin 1s infinite linear; +} + +@-webkit-keyframes glyphicon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +@keyframes glyphicon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-enroll-for-this-event'] { + min-width: 250px; +} + +.socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .hero-footer__cta .btn:not(#edit-decline-invite)[data-drupal-selector='edit-feedback-user-has-enrolled'] { + width: 100%; +} + .socialblue--sky main:not(.is-navbar-secondary) .hero__banner--static .hero-footer { padding-bottom: 1.25rem; } @@ -842,8 +896,8 @@ [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-date-advanced, [dir='rtl'] .socialblue--sky.path-node:not(.page-node-type-topic) .hero__banner--static .article__special-fields .event-location-address { -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; } .socialblue--sky.path-group .cover-wrap:not(.cover-wrap--course-statistic) .page-title { display: -webkit-box; diff --git a/components/04-organisms/hero/hero--sky.scss b/components/04-organisms/hero/hero--sky.scss index 86af08dd7f748aa3593125588f1d34b27c9e5eb4..51a59af281a8c3b7635982cd1d38f9f20d2ee1c5 100644 --- a/components/04-organisms/hero/hero--sky.scss +++ b/components/04-organisms/hero/hero--sky.scss @@ -732,6 +732,43 @@ &:not(#edit-decline-invite) { min-width: 195px; + + &[data-drupal-selector='edit-enroll-for-this-event'], + &[data-drupal-selector='edit-feedback-user-has-enrolled'] { + &[disabled]:not(.is-disabled) { + position: relative; + display: flex; + align-items: center; + justify-content: center; + + &:after { + content: ''; + margin-left: 8px; + display: inline-block; + width: 16px; + height: 16px; + background: url('../../components/04-organisms/hero/icons/icon-autorenew.svg') no-repeat center/16px 16px; + animation: glyphicon-spin 1s infinite linear; + } + + @keyframes glyphicon-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } + } + } + } + + &[data-drupal-selector='edit-enroll-for-this-event'] { + min-width: 250px; + } + + &[data-drupal-selector='edit-feedback-user-has-enrolled'] { + width: 100%; + } } } } diff --git a/components/04-organisms/hero/icons/icon-autorenew.svg b/components/04-organisms/hero/icons/icon-autorenew.svg new file mode 100644 index 0000000000000000000000000000000000000000..ba96c851abb8baeade4b324770a34f77fdf91426 --- /dev/null +++ b/components/04-organisms/hero/icons/icon-autorenew.svg @@ -0,0 +1 @@ +<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" fill="#343434" ><path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 0 1 6 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg>