diff --git a/src/Carousel/plugins/Dots/Dots.scss b/src/Carousel/plugins/Dots/Dots.scss index 18ff83d..f006f2b 100644 --- a/src/Carousel/plugins/Dots/Dots.scss +++ b/src/Carousel/plugins/Dots/Dots.scss @@ -1,15 +1,19 @@ .has-dots { - margin-bottom: calc(#{$carousel-dots-margin} + #{$carousel-dots-height}); + @if ($carousel-dots-margin > 0) { + margin-bottom: calc(#{$carousel-dots-margin} + #{$carousel-dots-height}); + } } .carousel__dots { margin: 0 auto; padding: 0; - position: absolute; - top: calc(100% + #{$carousel-dots-margin}); - left: 0; - right: 0; + @if ($carousel-dots-absolute) { + position: absolute; + top: calc(100% + #{$carousel-dots-margin}); + left: 0; + right: 0; + } display: flex; justify-content: center; @@ -33,7 +37,7 @@ content: ""; width: $carousel-dots-dot-width; height: $carousel-dots-dot-height; - border-radius: 50%; + border-radius: $carousel-dots-dot-radius; position: absolute; top: 50%; diff --git a/src/Carousel/scss/_variables.scss b/src/Carousel/scss/_variables.scss index bf0fca4..647ae5c 100644 --- a/src/Carousel/scss/_variables.scss +++ b/src/Carousel/scss/_variables.scss @@ -4,6 +4,7 @@ $carousel-slide-width: var(--carousel-slide-width, 60%) !default; /* Dots plugin */ +$carousel-dots-absolute: true !default; $carousel-dots-margin: 0.5rem !default; $carousel-dots-width: 22px !default; $carousel-dots-height: 22px !default; @@ -12,6 +13,7 @@ $carousel-dots-dot-width: 8px !default; $carousel-dots-dot-height: 8px !default; $carousel-dots-dot-color: currentColor !default; $carousel-dots-dot-opacity: 0.25 !default; +$carousel-dots-dot-radius: 50% !default; /* Navigation plugin diff --git a/src/Carousel/scss/base.scss b/src/Carousel/scss/base.scss index f4b7cf3..14202ca 100644 --- a/src/Carousel/scss/base.scss +++ b/src/Carousel/scss/base.scss @@ -33,7 +33,9 @@ .#{$carousel-prefix}carousel__slide { flex: 0 0 auto; - width: $carousel-slide-width; + @if ($carousel-slide-width) { + width: $carousel-slide-width; + } max-width: 100%; padding: 1rem; position: relative;