Merge branch...

Merge branch '27734-fix-the-following-style-lint-errors-and-warnings-for-app-assets-stylesheets-framework' into 'master'

Fix stylelint errors in app/assets/stylesheets/framework/broadcast_messages.scss

See merge request gitlab-org/gitlab!34033

app/assets/stylesheets/framework/broadcast_messages.scss

@@ -14,8 +14,6 @@
 }
 
 .broadcast-banner-message {
-  @extend .broadcast-message;
-  @extend .alert-warning;
   text-align: center;
 
   .broadcast-message-dismiss {
@@ -24,8 +22,6 @@
 }
 
 .broadcast-notification-message {
-  @extend .broadcast-message;
-
   position: fixed;
   bottom: $gl-padding;
   right: $gl-padding;

app/views/admin/broadcast_messages/_form.html.haml

-.broadcast-banner-message.js-broadcast-banner-message-preview.mt-2{ style: broadcast_message_style(@broadcast_message), class: ('hidden' unless @broadcast_message.banner? ) }
+.broadcast-message.broadcast-banner-message.alert-warning.js-broadcast-banner-message-preview.mt-2{ style: broadcast_message_style(@broadcast_message), class: ('hidden' unless @broadcast_message.banner? ) }
   = sprite_icon('bullhorn', size: 16, css_class:'vertical-align-text-top')
   .js-broadcast-message-preview
     - if @broadcast_message.message.present?
@@ -6,7 +6,7 @@
     - else
       Your message here
 .d-flex.justify-content-center
-  .broadcast-notification-message.preview.js-broadcast-notification-message-preview.mt-2{ class: ('hidden' unless @broadcast_message.notification? ) }
+  .broadcast-message.broadcast-notification-message.preview.js-broadcast-notification-message-preview.mt-2{ class: ('hidden' unless @broadcast_message.notification? ) }
     = sprite_icon('bullhorn', size: 16, css_class:'vertical-align-text-top')
     .js-broadcast-message-preview
       - if @broadcast_message.message.present?

app/views/shared/_broadcast_message.html.haml

-%div{ class: "broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'} js-broadcast-notification-#{message.id} d-flex",
+- is_banner = message.broadcast_type == 'banner'
+
+%div{ class: "broadcast-message #{'alert-warning' if is_banner} broadcast-#{message.broadcast_type}-message #{opts[:preview] && 'preview'} js-broadcast-notification-#{message.id} gl-display-flex",
   style: broadcast_message_style(message), dir: 'auto' }
   .flex-grow-1.text-right.pr-2
     = sprite_icon('bullhorn', size: 16, css_class: 'vertical-align-text-top')