diff --git a/scss/_variables.scss b/scss/_variables.scss index 51e95c375e..1a6a355697 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1710,15 +1710,15 @@ $card-box-shadow: null !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; $card-cap-padding-y: $card-spacer-bottom * .5 !default; // Boosted mod $card-cap-padding-x: $card-spacer-x !default; -$card-cap-bg: $black !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)` -$card-cap-color: $white !default; // Boosted mod: instead of `null` +$card-cap-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}body-color-rgb), .03)` +$card-cap-color: var(--#{$prefix}highlight-color) !default; // Boosted mod: instead of `null` $card-cap-font-weight: $font-weight-bold !default; // Boosted mod $card-height: null !default; $card-color: null !default; $card-bg: var(--#{$prefix}body-bg) !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: $grid-gutter-width * .5 !default; -$card-footer-color: $gray-700 !default; // Boosted mod +$card-footer-color: var(--#{$prefix}placeholder-color) !default; // Boosted mod // scss-docs-end card-variables // Accordion diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md index e9dee949ad..04e59e888b 100644 --- a/site/content/docs/5.3/components/card.md +++ b/site/content/docs/5.3/components/card.md @@ -302,7 +302,7 @@ Add some navigation to a card's header (or block) with Boosted's [nav components {{< example >}}
Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+Some quick example text to build on the card title and make up the bulk of the card's content.
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+Last updated 3 mins ago
+Some quick example text to build on the card title and make up the bulk of the card's content.
+A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image. diff --git a/site/content/docs/5.3/utilities/borders.md b/site/content/docs/5.3/utilities/borders.md index 8c7afff098..8d874ce442 100644 --- a/site/content/docs/5.3/utilities/borders.md +++ b/site/content/docs/5.3/utilities/borders.md @@ -151,13 +151,13 @@ These border variants with **a radius CSS class different than `.rounded-circle` {{< /design-callout-alert >}} {{< example >}} -{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}} -{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}} +{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" color="#999" >}} +{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" color="#999" >}} {{< /example >}} ### Sizes @@ -171,20 +171,20 @@ These border variants with **a size CSS class different than `.rounded-0`** shou {{< /design-callout-alert >}} {{< example class="bd-example-rounded-utils" >}} -{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" color="#999" >}} {{< /example >}} {{< example class="bd-example-rounded-utils" >}} -{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}} -{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}} -{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" >}} -{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" >}} +{{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" color="#999" >}} +{{< placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" color="#999" >}} {{< /example >}} ## Dividers diff --git a/site/content/docs/5.3/utilities/object-fit.md b/site/content/docs/5.3/utilities/object-fit.md index 2cece77df0..b306f5e209 100644 --- a/site/content/docs/5.3/utilities/object-fit.md +++ b/site/content/docs/5.3/utilities/object-fit.md @@ -25,11 +25,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="666" background="#ddd" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border" text="Object fit contain" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border" text="Object fit cover" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border" text="Object fit fill" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border" text="Object fit scale down" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="120" class="object-fit-none border" text="Object fit none" markup="img" color="#333" background="#bbb" >}} {{< /example >}} ## Responsive @@ -37,11 +37,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need. {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="666" background="#ddd" >}} -{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="666" background="#ddd" >}} +{{< placeholder width="140" height="80" class="object-fit-sm-contain border" text="Contain on sm" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-md-contain border" text="Contain on md" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-lg-contain border" text="Contain on lg" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-xl-contain border" text="Contain on xl" markup="img" color="#333" background="#bbb" >}} +{{< placeholder width="140" height="80" class="object-fit-xxl-contain border" text="Contain on xxl" markup="img" color="#333" background="#bbb" >}} {{< /example >}} ## Video diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html index c95af1aedd..a2ebcec9d2 100644 --- a/site/layouts/shortcodes/card.html +++ b/site/layouts/shortcodes/card.html @@ -3,7 +3,6 @@ `args` are all optional and can be one of the following: * action: Display action button - default = false - * background: Define the card background - default = "dark" * borders: Add some borders to the card - default = false * buttons: Display share and favorite buttons - default = false * caption: Display caption - default = false @@ -13,7 +12,6 @@ */ -}} {{- $action := .Get "action" | default false -}} -{{- $background := .Get "background" | default "dark" -}} {{- $borders := .Get "borders" | default false -}} {{- $buttons := .Get "buttons" | default false -}} {{- $caption := .Get "caption" | default false -}} @@ -21,20 +19,20 @@ {{- $open := .Get "open" | default false -}} {{- $rtl := .Get "rtl" | default false -}} -
{{ if $rtl }}شرح{{ else }}Caption{{ end }}
{{- end -}} {{- if $metadata -}} -{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}
+{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}
{{- end -}} {{- if $buttons -}}