Граф коммитов

69 Коммитов

Автор SHA1 Сообщение Дата
Julien Déramond 9369cd93fb
Generalize disabled nav links CSS rules (#38774)
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2023-06-25 14:43:50 -07:00
Julien Déramond a0e85680ab
Remove comments from `scss/_nav.scss` (#38038) 2023-02-13 20:03:27 +01:00
Mark Otto e30916b599
Change nav focus to focus-visible (#37784)
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2023-01-02 19:50:46 -08:00
Mark Otto 9e17b2b34c
Focus ring helper and utilities (#33125)
* Add global variables for box-shadow focus rings

* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs

* fix variable name

* Add CSS variables for global focus styling, document it

* Move to CSS vars section

* Update scss/_nav.scss

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>

* Helper and utils

* Fix bundlewatch

* Change 'Focus ring' in sidebar so that the page can be visible

* Minor typo fix

* fix merge

* Revamp some more, improve docs

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2022-12-29 14:19:22 -08:00
Mark Otto 7d9aa9d716
Add .nav-underline modifier class (#33126)
* Add .nav-underline modifier class

* Tweak sizing and spacing, add underline on hover

* Rebuild with Sass and CSS variables

* Document CSS vars

* Bump bundlewatch
2022-12-28 21:55:54 -08:00
Geremia Taglialatela b8880e5eec Add workarounds for postcss values parser error
postcss-values-parser returns a syntax error when a negative value is
provided in a `calc` function after a CSS variable.

This is not an issue with Bootstrap itself, but a workaround to allow
projects using postcss-values-parser to keep upgrading and compiling
bootstrap

Ref: shellscape/postcss-values-parser#138, twbs/bootstrap#35033

Fix: #36851
2022-09-04 09:45:40 -07:00
Mark Otto 427c089961 Stylelint: Disable `custom-property-empty-line-before` 2022-05-22 19:58:14 -07:00
Julien Déramond 5d9500bdfd
Handle disabled focused tabs with tab JavaScript plugin (#36169)
* Handle disabled tabs

* Fix after feedback

* Update js/src/tab.js

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Update js/src/tab.js

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Commit suggestions via GitHub broke the thing

* Add some unit tests

* Remove temp doc modification

* Add tests for left arrow

* Add disabled tabs in JavaScript Behavior section

* Compact 4 tests to 2 tests

* Compact 4 tests to 2 tests

* Add 'disabled' attribute for all buttons

* Change the disabled pane position only for the vertical version

* Change ids for the confusing first example in JavaScript behavior

* Use disabled attribute instead of the class for buttons in tabs

Co-authored-by: GeoSot <geo.sotis@gmail.com>
2022-05-05 19:26:15 -07:00
Mark Otto e342142b61
Train PR: CSS variables for accordion, cards, navs, and modals (#36071)
* Convert accordion to CSS vars

* Update accordion.md

* Convert navs to CSS variables

* Split up CSS vars

* bundlewatch

* fix vars

* Convert cards to CSS vars

* Convert modals to CSS variables

* Bundlewatch

Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
2022-03-28 15:05:37 -07:00
Mark Otto 63145c8bc6 Fix some instances of lazy Sass math when multiplying new CSS var based border-width 2022-03-11 09:04:13 -08:00
XhmikosR 8cdb6c40bd
Update stylelint and stylelint-config-twbs-bootstrap (#35438) 2021-12-14 09:51:31 +02:00
Gaël Poupard bed8fc8381 fix(navs): ensure button will grow in fill/justified nav 2021-03-01 11:55:19 -08:00
Patrick H. Lauke 96be06e32b
Dynamic tabs: use buttons rather than links (#32630)
* Dynamic tabs: use buttons rather than links

- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background

* Update js unit and visual test accordingly

- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)

* Add isolation:isolate to prevent focus being overlapped

https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
2021-02-09 07:23:45 +02:00
Mark Otto 2b4db023cd Add null variables for nav-link
Replaces #30498 by adding four new null default variables for .nav-link. Doesn't carry over font-style from the original PR though since that's rarely used, at least by default Bootstrap. Nullifies all values from that PR, too, since we count on some basic inheritance here and don't need color by default.
2020-07-11 11:56:29 -07:00
Rohit Sharma e140ff92ed Remove .nav-item from .nav-link to make it consistent
- Closes #28423
2020-06-09 07:48:58 +03:00
Martijn Cuppens b531bda07c Improve gradients
- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
2020-05-15 15:03:12 +03:00
Martijn Cuppens a85d80c925
Add nav link transition (#29988) 2020-04-06 14:29:39 +03:00
Martijn Cuppens 7fc4037a02 Remove redundant text decoration from hover states 2020-03-20 09:35:55 +01:00
Yogini Bende 74ed9d92e8
Minor `.nav-tabs` optimization (#30288) 2020-03-09 21:12:20 +02:00
Martijn Cuppens d9215ebd5a
$link-decoration: underline affects some components (#30262)
Co-authored-by: Shohei Yoshida <fellows3@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-03-05 15:22:52 +01:00
Mark Otto 1d4d9f8d89 Drop all hover mixins
Previously deprecated in v4.x, this clears out the now unused Sass option and removes some unused mixins. Arguably we could remove more, but I like the hover-focus mixin and we make extensive use of it across the project.
2019-05-08 20:58:07 +03:00
Shohei Yoshida 8896827bd0 Add <ol> to nav's comment (#28426) 2019-03-07 13:38:33 +01:00
Arvind S 042042a48a Made the disabled state for nav more obvious. (#27382) 2018-11-04 22:17:14 +02:00
Patrick Yeo c2a7a2c41d Nav Tabs use single variable to style `$nav-tabs-link-hover-border-color` and `$nav-tabs-link-active-border-color` (#24639) 2017-11-06 13:35:52 -08:00
Patrick Yeo 9ee2fbe580 Nav Pills with open dropdown don't reflect the nav-pills active state. The active state should also be reflected when using collapse plugin inside nav-pills. 2017-10-02 20:48:05 -07:00
Mark Otto 5476e636ce limit active styles for nav-pills to immediate children 2017-06-17 22:40:07 -07:00
Patrick Yeo 3ecb8b661b (#22414) Renamed for consistency `$nav-disabled-link-color`, `$nav-tabs-active-link-color`, `$nav-tabs-active-link-bg`, `$nav-tabs-active-link-border-color`, `$nav-pills-active-link-color`, `$nav-pills-active-link-bg` to `$nav-link-disabled-color`, `$nav-tabs-link-active-color`, `$nav-tabs-link-active-bg`, `$nav-tabs-link-active-border-color`, `$nav-pills-link-active-color`, `$nav-pills-link-active-bg`, respectively 2017-06-13 08:45:21 -07:00
Patrick H. Lauke 7056f70240 Remove `cursor: not-allowed` styles 2017-04-10 22:10:20 +01:00
Mark Otto 9a475730dc Docs and CSS updates for #21807 (#22336)
* tweak some copy
* fix up scrollspy docs
* remove nav styles that were added
* fix nav-based docs by requiring .nav-item on .nav-link
2017-04-08 13:58:20 -07:00
Pierre Vanduynslager 91b62941af Tabs/Scrollspy/.nav/.list-group/.active independent of markup (<nav>, .nav-item, <li> etc...) 2017-04-02 11:21:04 +02:00
Pierre-Denis Vanduynslager a03aaf39df Harmonize navbar-brand, navbar-text and nav-link height 2017-03-23 23:02:28 -07:00
Mark Otto 40ac03384d linting from before 2017-03-19 18:39:48 -07:00
Mark Otto caebfcd246 Fix justified nav styles and update nav docs for fill/justify
- Justified and fill nav variants need .nav-item classes on the anchors in addition to .nav-link
- Fix broken styles for the .nav-justified class which wasn't actually doing what we needed it to
2017-03-19 15:47:34 -07:00
Sean Beyer e02597519a Remove 'hover' from nav-tabs-active-link-hover-color et al (#22087)
* Remove 'hover' from variable names
* Fix indentation in variables
2017-03-03 11:15:41 -08:00
Mark Otto 6aad73ac6d Remove random cursor: default from pill nav (#21835)
Fixes #21560. Pretty sure this wasn't intentional, so should be fine to remove.
2017-01-24 21:06:22 -08:00
Mark Otto f18a4cdadd Allow flex-based navs to wrap like they used to (#21824) 2017-01-23 23:58:22 -08:00
Mark Otto a9d899b115 update navs to use `.show` instead of `.open` for dropdowns 2016-12-28 15:13:43 -08:00
Mark Otto d6fa9f5a6c Remove plain-hover-focus mixins from navs
- No need to set hover and focus on disabled or active elements. Disabled has no interactivity and active will inherit the focus.
- Also removes two now unused vars.
2016-12-28 15:13:43 -08:00
Mark Otto 56c63aa6b8 Fixes #18228: Don't use `transparent` for bottom border, use bg color 2016-12-25 00:57:17 -08:00
Mark Otto d9baeeb0af Change up the "justified" nav options
Given move to flexbox, we can make this available for everyone and clean it up some.

- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.

- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
2016-12-24 14:21:04 -08:00
Mark Otto 699d8a5a80 Make .nav flex-powered
- Set an explicit `display: flex` on the base `.nav` class and remove the floats/clearfixes from our navs.

- Set some global styles for `.nav-link`, a departure from the previous solution that featured no predefined padding.

- Move `.nav-link` from `inline-block` to `block` given this setting was added for our tabs and pills anyway.

- Remove horizontal margin from nav tabs; let folks set that on their own from now on.
2016-12-24 14:21:04 -08:00
Mark Otto eb2e1102be Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)
* remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $enable-flex if/else from sass files

* remove flex dist files

* update scss lint property order to account for flex properties

* linting

* change to numberless classes for autosizing, wrap in highlighting div

* bump gruntfile and postcss to ie10

* redo intro sections

* rearrange

* phew, redo hella grid docs

- rearrange all the things
- consolidate some bits

* remove reference to flexbox mode

* more border action for demo

* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom
2016-12-21 20:26:17 -08:00
Mark Otto d315c9499d v4: Flexbox nav options (#21201)
* Add some flexbox nav components
  - Includes .nav-justified for inline, tab, and pill nav components
  - Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit
2016-11-25 17:46:13 -08:00
vsn4ik fdf92b1528 Use @border-radius and add $nav-tabs-border-radius variable 2016-04-03 01:47:12 +03:00
Mark Otto c847279e14 Consolidate nav-tab dropdown styles with nav-tab styles
- Moves styles up the document a bit to nest them
- Drops the static 1px for $navbar-tabs-border-width so once again it’s
all tied together should folks customize that
2016-01-06 15:51:23 -08:00
Mark Otto fac0c31a27 New $nav-pills-active-link-* variables
- Renames old and unused $nav-pills-active-link-hover-* for
$nav-pills-active-link-* ones
- Puts those vars to use in place of defaults $component-* vars on nav
pills
2016-01-06 15:50:08 -08:00
Mark Otto 93dda63b39 Revamp tabbed nav border variables
- Add new $nav-tabs-border-width for the bottom border on the .nav-tabs
parent class
- Use that new variable for the negative margin on nav-items within it
for consistent customization
- Drop the $nav-tabs-link-border-width for the new variable so it’s all
tied together
2016-01-06 15:45:26 -08:00
Mark Otto 7668a66bbe Add $nav-disabled-link-hover-bg variable 2016-01-06 15:42:32 -08:00
Mark Otto 030ab626a5 Add $nav-item-inline-spacer variable
So folks can customize the distance between nav links in inline navs.
2016-01-06 15:41:35 -08:00
Chris Rebert de9ad37c5d Introduce $nav-item-margin variable
[skip sauce]
2015-12-08 01:12:57 -08:00