You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/helpers/icon-link.md
+24-12Lines changed: 24 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,15 @@
1
1
---
2
2
layout: docs
3
3
title: Icon link
4
-
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
4
+
description: Quickly create stylized hyperlinks with CoreUI Icons or other icons.
5
5
group: helpers
6
6
toc: true
7
-
bootstrap: true
8
-
added: 5.3
7
+
added: "5.3"
9
8
---
10
9
11
10
The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`.
12
11
13
-
Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like.
12
+
Icon links assume [CoreUI Icons](https://coreui.io/icons/) are being used, but you can use any icon or image you like.
14
13
15
14
{{< callout >}}
16
15
When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs.
@@ -22,15 +21,19 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
Copy file name to clipboardExpand all lines: docs/content/helpers/stacks.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ added: "5.1"
11
11
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
12
12
13
13
{{< callout warning >}}
14
-
Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
14
+
**Heads up!** Support for gap utilities with flexbox isn't available in Safari prior to 14.5, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
Copy file name to clipboardExpand all lines: docs/content/layout/breakpoints.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,7 @@ For more information and examples on how to modify our Sass maps and variables,
44
44
45
45
## Media queries
46
46
47
-
Since CoreUI for Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
47
+
Since CoreUI for Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Copy file name to clipboardExpand all lines: docs/content/layout/columns.md
+21Lines changed: 21 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -224,6 +224,27 @@ There are also responsive `.order-first` and `.order-last` classes that change t
224
224
</div>
225
225
{{< /example >}}
226
226
227
+
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
228
+
229
+
```scss
230
+
$utilities: map-merge(
231
+
$utilities,
232
+
(
233
+
"order": map-merge(
234
+
map-get($utilities, "order"),
235
+
(
236
+
values: map-merge(
237
+
map-get(map-get($utilities, "order"), "values"),
238
+
(
239
+
6: 6, // Add a new `.order-{breakpoint}-6` utility
240
+
last: 7// Change the `.order-{breakpoint}-last` utility to use the next number
241
+
)
242
+
),
243
+
),
244
+
),
245
+
)
246
+
);
247
+
227
248
### Offsetting columns
228
249
229
250
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
Copy file name to clipboardExpand all lines: docs/content/utilities/api.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ aliases:
11
11
toc: true
12
12
---
13
13
14
-
CoreUI for Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
14
+
CoreUI for Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
15
15
16
16
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
17
17
@@ -521,7 +521,7 @@ $utilities: map-merge(
521
521
522
522
### Remove utilities
523
523
524
-
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove).
524
+
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility.
539
+
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
540
540
541
541
```scss
542
542
@import"@coreui/coreui/scss/functions";
@@ -557,7 +557,7 @@ $utilities: map-merge(
557
557
558
558
### Add, remove, modify
559
559
560
-
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map.
560
+
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
{{< example class="docs-example-rounded-utils" >}}
@@ -168,7 +166,7 @@ Add classes to an element to easily round its corners.
168
166
169
167
### Sizes
170
168
171
-
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
169
+
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
172
170
173
171
{{< example class="docs-example-rounded-utils" >}}
Copy file name to clipboardExpand all lines: docs/content/utilities/display.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -56,7 +56,7 @@ For faster mobile-friendly development, use responsive display classes for showi
56
56
57
57
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
58
58
59
-
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
59
+
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
0 commit comments