* Add Sass section to Getting Started > Build Tools, mention Sass implementation used, mention current precision of 10 due to Dart Sass, and mention recommended minimum precision (value of 6 used in BS v4). Remove outdated Sass precision from Customize > Sass docs page.
* Remove more mentions of deprecated Sass implementations. Add links to Sass compiler mentions so we can keep all pertinent Sass compiler information in just one location instead of spread through the docs, which makes it hard to find the details and/or keep them up-to-date.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs(migrations): add a note regarding migration from v4 used for RTL layouts
* docs(RTL): LTR & RTL at the same time
* docs(utilities): how-to use the API to rename utilities
* docs(RTL): mention issue when nesting styles with .ltr / .rtl
* Changes made in migration.md file of documentation
Added information about the removal of `.rounded-sm` and `.rounded-lg`.
And addition of `.rounded-0` to `.rounded-3`
* Moved the edited line
Added `rounded-0` to `rounded-3` under v5.0.0-alpha3
* Moved correctly
* Added link
Added link to issue #31687
* docs(migration): last typo thinggies
* Update migration.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The "active" CSS class must be on "nav-link" element, see `_navbar.scss`:
```css
.nav-link.active {
color: $navbar-dark-active-color;
}
```
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
While technically it still works, we're already saying authors shouldn't do it later on, and we removed any examples of this. This was a straggler.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add an actual `data-touch="false"` example in the carousel docs
this can also make it easier to actually check/debug any issues we may have with this data attribute
* Correct attribute table explanation and remove slide class from example
Adds the ability to use objects implementing the virtual element interface as the value for the reference option of a dropdown config.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Adds currently missing utilities classes which are located in scss/helpers to
boostrap-utilities dist files.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The default Popper `fallbackPlacements` value is `[oppositePlacement]`.
- The default value was previously (in v4) `'flip'` that can be achieved by passing the single value in the array, like — `[oppositePlacement]`. Keeping `null` also sets the `fallbackPlacements` to `[oppositePlacement]` (Default value in Popper)
- It's better to have **clockwise** (`['top', 'right', 'bottom', 'left']`) fallback options so that tooltip/popover can be placed to another side even if the opposite placement doesn't fit.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* site: Fix .font-italic to .fst-italic in blog example
The font utility class was renamed from .font-italic to .fst-italic
but a few references didn't get updated.
* site: Fix .font-weight-* to .fw-* in RTL examples
These font utility classes were renamed from .font-weight-* to .fw-*
but a few references didn't get updated.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.com/
* Add a callout for the sanitizer in popovers and tooltips
* Add second reference to sanitizer in the options
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Add CSS custom property with fallback to Sass variable
- Update docs to mention the new CSS custom property
- Rewrite some of the docs to use divider instead of separator, and add some context here and there
Drop the support of show property from the modal plugin.
When creating the new modal instance in v5, the `show` property does not work anymore, so instead of fixing the behavior just removing it permanently to keep the consistency between all the plugins. (All other plugins require the `show()` method to be called on the instances to be shown)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Expand "external content" section for navbar
- rephrase the intro to make a bit more sense
- add note about dangers of focus/reading order problems
* Remove pointless intro sentence
* Small wording changes/additions/fixes
* Add gap utilities
* Update .bundlewatch.config.json
* Revamp headings on this page for better organization
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Small copy addition
* Add example modifier class for spacing
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Promote floating labels example to component
- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example
* Update floating labels to support .form-select, make inputs and selects more consistent
- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
* Streamline and bulletproof some things
- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
* Move some values to variables, switch from scaling font-size to scale, update transforms
* Bring over changes from #30966 and add to them to tighten things up
* Delete the now unused example images
* Fix typo
* Allowlist the calc function
* Add transform-origin, update transform values
* Test out autofill fix
* Fix linter issue
* Mention it in the migration guide
* Bump bundlesize
* Add one more variable per review
* Shave .25rem off the height
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Add .fs-* utilities for font-size
- Adds new font-sizes Sass map
- Generates six new classes for setting only font-size
- Updates docs to mention this, including a scss-docs reference
* Update font utilities
- Make .fs-* utils for font-size use RFS
- Rename .font-weight-* utils to .fw-*
- Rename .font-style-* utils to .f-*
- Update order of utilities a bit
- Update docs to match
* Update migration docs to make note of these changes
* Be more specific in font-size docs about scale
* Update font-style abbreviation to .fst
* Fix font-weight property
* Formatting & font style utility fix
* Move to Alpha 3 migration section
* Update migration guide for more details, splitting alpha 2 stuff back to the appropriate section in Migration guide
* Tweak language on example
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
* Rename Navs to Navs and Tabs
Fixes#31378
* Add title to renamed file
* Update navs-tabs.md
* Add alias/redirect
* Fix references to renamed file, tweak title
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* feature(spinners): slow down spinners when prefers-reduced-motion
* docs(spinners): add reduced motion callout and mention slowing down in accessibility page
* Update spinners.md
* docs(accessibility): rewording
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.
This allows for stuff like:
{{% callout info %}}
##### I'm an info callout!
```css
.foo {
color: #fff;
}
```
{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}
{{% /callout %}}
* docs(badge): ensure info badge's contrast
* docs(colors): fix contrasts in example using .bg-info
* Update card.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add disabled state example to the .form-control page
* Document disabled attribute on select too
* Add disabled example for file input
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add .dropdown-menu-dark
* Match background color to navbar dark
* Update docs to include a navbar example
* Update dropdowns.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Remove group selector for ratio items
- Drop the .ratio-item entirely
- Update docs to explain updated approach
- Update Migration guide to reflect the latest
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
* Extra position utilities
Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.
* Update extra position utilities
* add default position values map
* tweak examples
* add real life examples
* fix double colon
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Docs: (subjectively) nicer looking accordion example
the use of `.btn-link` currently just looks a bit odd, subjectively (as in v5 we now force the underline to always be there, while in v4 at least it was only on hover/focus).
`.btn-light` seems more fitting
* Add extra classes for nicer overall look
as suggested by @ysds
* Tweak accessibility note for accordions and optional keyboard interactions
* Add default parameters to each border radius mixin
* Add border radius changes to migration guide
Co-authored-by: Jeremy Jackson <jeremy@librarymarket.com>
