From f3b4308cb59bf4b21ff186f8479c82239446d139 Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 7 Jun 2021 12:56:27 +0200 Subject: upgrade to bootstrap 5.0.1 and first batch of fixes --- .../site/content/docs/4.6/components/buttons.md | 166 --------------------- 1 file changed, 166 deletions(-) delete mode 100644 vendor/twbs/bootstrap/site/content/docs/4.6/components/buttons.md (limited to 'vendor/twbs/bootstrap/site/content/docs/4.6/components/buttons.md') diff --git a/vendor/twbs/bootstrap/site/content/docs/4.6/components/buttons.md b/vendor/twbs/bootstrap/site/content/docs/4.6/components/buttons.md deleted file mode 100644 index a54482319..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/4.6/components/buttons.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -layout: docs -title: Buttons -description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. -group: components -toc: true ---- - -## Examples - -Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. - -{{< example >}} -{{< buttons.inline >}} -{{- range (index $.Site.Data "theme-colors") }} - -{{- end -}} -{{< /buttons.inline >}} - - -{{< /example >}} - -{{< callout warning >}} -{{< partial "callout-warning-color-assistive-technologies.md" >}} -{{< /callout >}} - -## Disable text wrapping - -If you don't want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button. - -## Button tags - -The `.btn` classes are designed to be used with the ` - - - -{{< /example >}} - -## Outline buttons - -In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. - -{{< example >}} -{{< buttons.inline >}} -{{- range (index $.Site.Data "theme-colors") }} - -{{- end -}} -{{< /buttons.inline >}} -{{< /example >}} - -{{< callout info >}} -Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. -{{< /callout >}} - -## Sizes - -Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. - -{{< example >}} - - -{{< /example >}} - -{{< example >}} - - -{{< /example >}} - -Create block level buttons—those that span the full width of a parent—by adding `.btn-block`. - -{{< example >}} - - -{{< /example >}} - -## Active state - -Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to ` - -{{< /example >}} - -Disabled buttons using the `` element behave a bit different: - -- ``s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. -- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all. -- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. - -{{< example >}} -Primary link -Link -{{< /example >}} - -{{< callout warning >}} -##### Link functionality caveat - -The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. -{{< /callout >}} - -## Button plugin - -Do more with buttons. Control button states or create groups of buttons for more components like toolbars. - -### Toggle states - -Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the ` -{{< /example >}} - -### Checkbox and radio buttons - -Bootstrap's `.button` styles can be applied to other elements, such as `