Skip to content

G
gitlab-ce
Commit 4b3011c2 authored by Jannik Lehmann's avatar Jannik Lehmann
Browse files
Options

Refactor Carousel Styles 

This commit refactors the Carousel
Styles and adds them to a page
specific bundle.
parent e18903f4
Show whitespace changes
Inline Side-by-side
Showing with 153 additions and 343 deletions
app/assets/stylesheets/framework.scss
View file @ 4b3011c2
......@@ -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 deleted 100644 → 0
View file @ e18903f4
// 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
View file @ 4b3011c2
......@@ -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
View file @ 4b3011c2
......@@ -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
View file @ 4b3011c2
......@@ -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 0 → 100644
View file @ 4b3011c2
@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
View file @ 4b3011c2
......@@ -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
View file @ 4b3011c2
- 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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7