From 6680ef9235ddadcf81103382709c79066c23ade1 Mon Sep 17 00:00:00 2001 From: Chris Harris <1834925+df2@users.noreply.github.com> Date: Mon, 28 Mar 2022 03:37:35 -0700 Subject: [PATCH 1/2] Replace `!important` modifier with more specific selectors ... (#1100) --- src/scss/ui/_lists.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss index b62d3624e..7d2404f03 100644 --- a/src/scss/ui/_lists.scss +++ b/src/scss/ui/_lists.scss @@ -26,7 +26,8 @@ .list-group-item.active { background-color: inherit; - border-left: 2px solid $yellow !important; + border-left-color: $yellow; + border-left-width: $border-width-wide; } .list-group-item { From 278fe7bba180687459396b9f52bccda6ad2ad8cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 28 Mar 2022 12:38:01 +0200 Subject: [PATCH 2/2] New carousel indicators: dots, vertical, thumbs (#1101) --- gulpfile.js | 2 +- src/pages/_docs/carousel.md | 47 ++++++++++++++++++- src/pages/_includes/example.html | 1 + src/pages/_includes/ui/carousel.html | 23 +++++----- src/pages/carousel.html | 30 ++++++++---- src/scss/_core.scss | 1 + src/scss/_variables.scss | 5 ++ src/scss/ui/_carousel.scss | 68 ++++++++++++++++++++++++++++ 8 files changed, 154 insertions(+), 23 deletions(-) create mode 100644 src/scss/ui/_carousel.scss diff --git a/gulpfile.js b/gulpfile.js index 5f1ab91eb..31836f443 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -348,7 +348,7 @@ gulp.task('mjs', () => { */ gulp.task('watch-jekyll', (cb) => { browserSync.notify('Building Jekyll') - return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' }) + return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--incremental', '--destination', demoDir, '--trace'], { stdio: 'inherit' }) .on('close', cb) }) diff --git a/src/pages/_docs/carousel.md b/src/pages/_docs/carousel.md index 1acb8cbb0..99c30e3bf 100644 --- a/src/pages/_docs/carousel.md +++ b/src/pages/_docs/carousel.md @@ -11,6 +11,49 @@ bootstrap-link: components/carousel/ Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow. {% capture code %} -{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %} +{% include ui/carousel.html indicators=true controls=true id="carousel-sample" %} {% endcapture %} -{% include example.html code=code max-width="20rem" centered=true %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Dots indicators + +You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel: + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Thumb indicators + +The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils. + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Vertical indicators + +To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails. + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +Likewise, you can add thumbnails on the right side: + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-thumb-vertical" title="Carousel with thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Carousel with captions + +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image. + +{% capture code %} +{% include ui/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} \ No newline at end of file diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index a03fda053..f2bd644df 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -42,6 +42,7 @@ {% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %} {% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} {% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} +{% assign html = html | replace_regex: 'class=" ', 'class="' %} {% assign html = html | htmlbeautifier %} diff --git a/src/pages/_includes/ui/carousel.html b/src/pages/_includes/ui/carousel.html index 7c5c3edf2..0f85d2a62 100644 --- a/src/pages/_includes/ui/carousel.html +++ b/src/pages/_includes/ui/carousel.html @@ -1,13 +1,14 @@ {% assign limit = include.limit | default: 5 %} {% assign offset = include.offset | default: 0 %} {% assign photos = site.data.photos | where: "horizontal", true %} - {% endif %}
@@ -15,8 +16,8 @@
- {% if include.show-captions %} -
+ {% if include.captions %} +

Slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

@@ -26,12 +27,12 @@ {% endfor %}
- {% if include.show-controls %} - + {% if include.controls %} + - + diff --git a/src/pages/carousel.html b/src/pages/carousel.html index 727b79a08..70054268d 100644 --- a/src/pages/carousel.html +++ b/src/pages/carousel.html @@ -5,17 +5,29 @@ layout: default menu: base.carousel --- -
-
+
+
{% include cards/carousel.html id="carousel-default" %}
-
- {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" show-indicators=true offset=5 %} +
+ {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" indicators=true offset=5 %}
-
- {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" show-controls=true offset=10 %} -
-
- {% include cards/carousel.html id="carousel-captions" title="Carousel with captions" show-captions=true show-controls=true offset=15 %} +
+ {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" controls=true offset=10 %}
+
+ {% include cards/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %} +
+
+ {% include cards/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-thumb-vertical" title="Carousel with thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %} +
diff --git a/src/scss/_core.scss b/src/scss/_core.scss index f990e41b4..ff2b38ffe 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -16,6 +16,7 @@ @import "ui/breadcrumbs"; @import "ui/buttons"; @import "ui/calendars"; +@import "ui/carousel"; @import "ui/cards"; @import "ui/close"; @import "ui/dropdowns"; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 8cae2af38..a1463fbef 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -390,6 +390,11 @@ $carousel-control-icon-width: 1.5rem !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-indicator-thumb-opacity: .75 !default; +$carousel-indicator-thumb-width: 4rem !default; + +$carousel-indicator-dot-width: .5rem !default; + //close $btn-close-width: .75rem !default; diff --git a/src/scss/ui/_carousel.scss b/src/scss/ui/_carousel.scss new file mode 100644 index 000000000..42d5ca2ba --- /dev/null +++ b/src/scss/ui/_carousel.scss @@ -0,0 +1,68 @@ +.carousel { + +} + +.carousel-indicators-vertical { + left: auto; + top: 0; + margin: 0 1rem 0 0; + flex-direction: column; + + [data-bs-target] { + margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer; + width: $carousel-indicator-height; + height: $carousel-indicator-width; + border: 0; + border-left: $carousel-indicator-hit-area-height solid transparent; + border-right: $carousel-indicator-hit-area-height solid transparent; + } +} + +.carousel-indicators-dot { + [data-bs-target] { + width: $carousel-indicator-dot-width; + height: $carousel-indicator-dot-width; + border-radius: $border-radius-pill; + border: $carousel-indicator-hit-area-height solid transparent; + margin: 0; + } +} + +.carousel-indicators-thumb { + [data-bs-target] { + width: $carousel-indicator-thumb-width * .5; + height: auto; + background: no-repeat center/cover; + border: 0; + border-radius: $border-radius; + box-shadow: $shadow; + margin: 0 $carousel-indicator-spacer; + opacity: $carousel-indicator-thumb-opacity; + + @include media-breakpoint-up(lg) { + width: $carousel-indicator-thumb-width; + } + + &:before { + content: ''; + padding-top: var(--#{$variable-prefix}aspect-ratio, 100%); + display: block; + } + } + + &.carousel-indicators-vertical { + [data-bs-target] { + margin: $carousel-indicator-spacer 0; + } + } +} + +.carousel-caption-background { + background: red; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 90%; + background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0)); +} \ No newline at end of file