Browse Source

Tweak SCSS based on @AndersMad suggestions

pull/286/head
Jānis Skarnelis 3 years ago
parent
commit
5f133d9555
  1. 16
      src/Carousel/plugins/Dots/Dots.scss
  2. 2
      src/Carousel/scss/_variables.scss
  3. 4
      src/Carousel/scss/base.scss

16
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%;

2
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

4
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;

Loading…
Cancel
Save