Merge branch 'jnnkl-refactor-security-carousel' into 'master'

refactor Security & Compliance Carousel Styles

See merge request gitlab-org/gitlab!51704

app/assets/stylesheets/framework.scss

@@ -15,7 +15,6 @@
 @import 'framework/badges';
 @import 'framework/calendar';
 @import 'framework/callout';
-@import 'framework/carousel';
 @import 'framework/common';
 @import 'framework/dropdowns';
 @import 'framework/files';

app/assets/stylesheets/framework/carousel.scss

-// Notes on the classes:
-//
-// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
-//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
-//    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
-//    the active slide is heading.
-// 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
-//    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
-//    is the upcoming slide in transition.
-
-.carousel {
-  position: relative;
-
-  &.pointer-event {
-    touch-action: pan-y;
-  }
-}
-
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-
-//
-// Alternate transitions
-//
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    @include transition(0s $carousel-transition-duration opacity);
-  }
-}
-
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  color: $carousel-control-color;
-  text-align: center;
-  opacity: $carousel-control-opacity;
-  @include transition($carousel-control-transition);
-
-  // Hover/focus state
-  @include hover-focus {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: $carousel-control-hover-opacity;
-  }
-}
-
-.carousel-control-prev {
-  left: 0;
-  @if $enable-gradients {
-    background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-.carousel-control-next {
-  right: 0;
-  @if $enable-gradients {
-    background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background: no-repeat 50% / 100% 100%;
-}
-
-.carousel-control-prev-icon {
-  background-image: $carousel-control-prev-icon-bg;
-}
-
-.carousel-control-next-icon {
-  background-image: $carousel-control-next-icon-bg;
-}
-
-
-// Optional indicator pips
-//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0; // override <ol> default
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-left: $carousel-control-width;
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
-    background-clip: padding-box;
-    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    border-top: $carousel-indicator-hit-area-height solid transparent;
-    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-    opacity: 0.5;
-    @include transition($carousel-indicator-transition);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-
-// Optional captions
-//
-//
-
-.carousel-caption {
-  position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
-  bottom: 20px;
-  left: (100% - $carousel-caption-width) / 2;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: $carousel-caption-color;
-  text-align: center;
-}

app/assets/stylesheets/framework/variables.scss

@@ -871,6 +871,27 @@ $add-to-slack-gif-max-width: 850px;
 $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
 
+/*
+Security & Compliance Carousel
+*/
+$security-and-compliance-carousel-image-carousel-width: 1000px;
+$security-and-compliance-carousel-image-discover-button-width: 45%;
+$security-and-compliance-carousel-image-discover-buttons-max-width: 280px;
+$security-and-compliance-carousel-image-discover-footer-max-width: 500px;
+$security-and-compliance-carousel-image-discover-feedback-width: 30%;
+$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px;
+$security-and-compliance-carousel-control-icon-width: 10px;
+$security-and-compliance-carousel-control-position: -5%;
+$security-and-compliance-carousel-inner-width: 90%;
+$security-and-compliance-carousel-indicators-bottom: -20px;
+$security-and-compliance-carousel-indicators-bottom-lg: -15px;
+$security-and-compliance-carousel-indicators-dimension: 6px;
+$security-and-compliance-carousel-indicators-border-radius: 100%;
+$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+
 /*
 Popup
 */

config/application.rb

@@ -184,6 +184,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/build.css"
     config.assets.precompile << "page_bundles/ci_status.css"
     config.assets.precompile << "page_bundles/cycle_analytics.css"
+    config.assets.precompile << "page_bundles/security_discover.css"
     config.assets.precompile << "page_bundles/dev_ops_report.css"
     config.assets.precompile << "page_bundles/environments.css"
     config.assets.precompile << "page_bundles/epics.css"

ee/app/assets/javascripts/vue_shared/discover/card_security_discover_app.vue

@@ -107,13 +107,13 @@ export default {
 
 <template>
   <div class="discover-box">
-    <h2 class="discover-title center gl-text-gray-900 gl-mx-auto">
+    <h2 class="discover-title gl-text-center gl-text-gray-900 gl-mx-auto">
       {{ $options.i18n.discoverTitle }}
     </h2>
     <div class="discover-carousels">
       <gl-carousel
         v-model="slide"
-        class="discover-carousel discover-image-carousel gl-mx-auto gl-text-center gl-border-solid gl-border-1 gl-bg-gray-10"
+        class="discover-carousel discover-image-carousel gl-mx-auto gl-text-center gl-border-solid gl-border-1 gl-bg-gray-10 gl-border-gray-50"
         no-wrap
         controls
         :interval="0"
@@ -139,8 +139,8 @@ export default {
           </template>
         </gl-carousel-slide>
       </gl-carousel>
-      <div class="discover-footer mx-auto my-0">
-        <p class="gl-text-gray-900 text-center mb-5">
+      <div class="discover-footer gl-mx-auto gl-my-0">
+        <p class="gl-text-gray-900 gl-text-center mb-7">
           <gl-sprintf :message="$options.i18n.discoverPlanCaption">
             <template #link="{ content }">
               <gl-link
@@ -154,7 +154,9 @@ export default {
         </p>
       </div>
     </div>
-    <div class="discover-buttons d-flex flex-nowrap flex-row justify-content-between mx-auto my-0">
+    <div
+      class="discover-buttons gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-mx-auto"
+    >
       <gl-button
         class="discover-button-upgrade"
         v-bind="discoverButtonProps"
@@ -176,7 +178,7 @@ export default {
         {{ $options.i18n.discoverTrialLabel }}
       </gl-button>
     </div>
-    <div id="tooltipcontainer" class="discover-feedback w-30p position-fixed">
+    <div id="tooltipcontainer" class="discover-feedback gl-fixed">
       <gl-button
         v-gl-tooltip:tooltipcontainer.left
         :title="$options.i18n.discoverFeedbackLabel"

ee/app/assets/stylesheets/page_bundles/security_discover.scss

+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.discover-box {
+  .discover-image-carousel {
+    padding-top: $gl-padding-24;
+    padding-bottom: $gl-padding-24;
+    max-width: $security-and-compliance-carousel-image-carousel-width;
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: $gl-padding-32;
+      padding-bottom: $gl-padding-32;
+    }
+  }
+
+  .discover-title {
+    margin-top: $gl-spacing-scale-8;
+    margin-bottom: $gl-spacing-scale-8;
+  }
+
+  .discover-carousels {
+    padding-left: $gl-padding-32;
+    padding-right: $gl-padding-32;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .discover-carousel-img {
+    margin-bottom: $gl-padding-12;
+    border-radius: $border-radius-default;
+  }
+
+  .discover-button {
+    width: $security-and-compliance-carousel-image-discover-button-width;
+  }
+
+  .discover-buttons {
+    max-width: $security-and-compliance-carousel-image-discover-buttons-max-width;
+  }
+
+  .discover-footer {
+    margin: $gl-spacing-scale-8 auto $gl-spacing-scale-1;
+    max-width: $security-and-compliance-carousel-image-discover-footer-max-width;
+  }
+
+  .discover-feedback {
+    width: $security-and-compliance-carousel-image-discover-feedback-width;
+    bottom: $gl-spacing-scale-5;
+    right: $gl-spacing-scale-5;
+    text-align: right;
+  }
+
+  .discover-text-carousel {
+    max-width: $security-and-compliance-carousel-image-discover-text-carousel-max-width;
+
+    .carousel-caption {
+      height: $security-and-compliance-carousel-image-discover-text-carousel-caption-height;
+      max-width: $security-and-compliance-carousel-image-discover-text-carousel-caption-max-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  .carousel-control-next-icon,
+  .carousel-control-prev-icon {
+    width: $security-and-compliance-carousel-control-icon-width;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      width: inherit;
+    }
+  }
+
+  .carousel-control-next {
+    right: $security-and-compliance-carousel-control-position;
+  }
+
+  .carousel-control-prev {
+    left: $security-and-compliance-carousel-control-position;
+  }
+
+  .discover-carousel {
+    margin-bottom: $gl-spacing-scale-7;
+
+    .carousel-inner {
+      width: $security-and-compliance-carousel-inner-width;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .carousel-indicators {
+      bottom: $security-and-compliance-carousel-indicators-bottom;
+
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        bottom: $security-and-compliance-carousel-indicators-bottom-lg;
+      }
+
+      li {
+        background-color: $gray-500;
+        width: $security-and-compliance-carousel-indicators-dimension;
+        height: $security-and-compliance-carousel-indicators-dimension;
+        border-radius: $security-and-compliance-carousel-indicators-border-radius;
+        margin-right: $gl-spacing-scale-5;
+
+        @media (min-width: map-get($grid-breakpoints, md)) {
+          width: $gl-spacing-scale-3;
+          height: $gl-spacing-scale-3;
+        }
+      }
+
+      .active {
+        background-color: $gray-500;
+      }
+    }
+
+    .carousel-control-prev-icon {
+      background-image: $security-and-compliance-carousel-prev-icon-background;
+    }
+
+    .carousel-control-next-icon {
+      background-image: $security-and-compliance-carousel-next-icon-background;
+    }
+  }
+}

ee/app/assets/stylesheets/pages/promotions.scss

@@ -176,137 +176,3 @@
     }
   }
 }
-
-.discover-box {
-  .discover-image-carousel {
-    border-color: $gray-50;
-    padding-top: 20px;
-    padding-bottom: 20px;
-    max-width: 1000px;
-
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding-top: 30px;
-      padding-bottom: 30px;
-    }
-  }
-
-  .discover-title {
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .discover-carousels {
-    padding-left: 30px;
-    padding-right: 30px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .discover-carousel-img {
-    margin-bottom: 12px;
-    border-radius: $border-radius-default;
-  }
-
-  .discover-button {
-    width: 45% !important;
-  }
-
-  .discover-buttons {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    margin: 0 auto;
-    max-width: 280px;
-  }
-
-  .discover-footer {
-    margin: 40px auto 2px;
-    max-width: 500px;
-  }
-
-  .discover-feedback {
-    bottom: 16px;
-    right: 16px;
-    text-align: right;
-  }
-
-  .discover-feedback-icon {
-    padding-bottom: 0.5rem 0.7rem 0.7rem;
-
-    &:hover {
-      color: $blue-500;
-    }
-  }
-
-  .discover-text-carousel {
-    max-width: 650px;
-
-    .carousel-caption {
-      height: 100%;
-      max-width: 500px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  .carousel-control-next-icon,
-  .carousel-control-prev-icon {
-    width: 10px;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      width: inherit;
-    }
-  }
-
-  .carousel-control-next {
-    right: -5%;
-  }
-
-  .carousel-control-prev {
-    left: -5%;
-  }
-
-  .discover-carousel {
-    margin-bottom: 30px;
-
-    .carousel-inner {
-      width: 90%;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .carousel-indicators {
-      bottom: -20px;
-
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        bottom: -15px;
-      }
-
-      li {
-        background-color: $gray-500;
-        width: 6px;
-        height: 6px;
-        border-radius: 100%;
-        margin-right: 16px;
-
-        @media (min-width: map-get($grid-breakpoints, md)) {
-          width: $gl-spacing-scale-3;
-          height: $gl-spacing-scale-3;
-        }
-      }
-
-      .active {
-        background-color: $gray-500;
-      }
-    }
-
-    .carousel-control-prev-icon {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
-    }
-
-    .carousel-control-next-icon {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
-    }
-  }
-}

ee/app/views/groups/security/discover/show.html.haml

 - breadcrumb_title _("Security")
 - page_title _("Security")
+- add_page_specific_style 'page_bundles/security_discover'
 - linkFeedback = 'https://gitlab.com/gitlab-org/growth/ui-ux/issues/25'
 - linkUpgrade = group_billings_path(@group.root_ancestor)