Commit Graph

37 Commits

Author SHA1 Message Date
cccabinet
af60065266
Fix alerts colors by using *-text-emphasis CSS vars in Sass loop (#38003) 2023-02-06 12:39:50 +01:00
Mark Otto
fc3f4b67d6
Add dark mode support (#35857)
* Add dark mode to docs

* Minor fix: missing space indentation

* Minor fix: revert utilities/z-index added-in modification

* Remove prev: and next: from doc because extracted to another PR

* Use .bg-body-tertiary in all Utilities > Overflow examples

* fix example

* Fix up spacing examples

* Update box-shadow Sass variables and utilities to auto-adjust to color modes

* Remove unused docs class

* Refactor form styles to use CSS variable for background images on .form-check and .form-switch

* Fix docs selector

* Rename shortcut for clarity

* Heading consistency

* Reintroduce missing 4th grid item in Utilities > Spacing example

* Fix bundlewatch

* .bd-callout* rendering is OK so removing comments in the code

* Update scss/_utilities.scss

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Fix gutters example styling

* Fix text colors on background utils docs

* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken

* fix some color utils examples

* Deprecate mixin notice

* Deprecate notice for list-group-item-variant() mixin

* Revamp new link CSS vars

* Use map-keys in some each Sass files

* Remove list-group-item-variant mixin ref in sass loop desc

* Display CSS vars scoped to our built-in dark mode

* Revert previous commit

* Fix list group variant link

* Fix typo

* Remove imports of alert/list-group mixins in scss/_mixins.scss

* Small formatting + comments removal in scss/_content.scss

* Fix alert links colors

* fix dropdown border-radius mixin

* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline

* fix colors on docs navbar for dark mode

* remove two changes

* missing ref

* another link underline fix, just use sass vars for link decoration for now

* missing color bg docs, plus move dropdown override to scss

* more changes from review

* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin

* Few fixes around type

- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them

* Restyle custom details > summary element in docs

* Rewrite some migration docs

* fix form checks

* Fix up some navbar styling, tweak docs callout

* Fix select images, mostly for validation styling

* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs

* Update site/content/docs/5.2/components/scrollspy.md

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Apply suggestions from code review

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* mention form control css vars in migration guide

* Tweak grid and flex docs background examples

* clarify some docs

* fix some more things

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-11-28 22:30:26 -08:00
mcoms
78c0ad8044 fix alert border radius 2022-05-30 09:26:41 -07:00
Mark Otto
acf6ea74a7
Add additional root variables, rename $variable-prefix to $prefix (#35981)
* Add additional root variables, rename $variable-prefix to $prefix

- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout

* Bundlewatch
2022-03-13 10:13:09 -07:00
Mark Otto
9030f57db7
Split CSS vars for padding values (#35921)
* Split CSS vars for padding values

Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready.

* Update scss/_dropdown.scss

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Deprecate dropdown-header-padding var

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-03-01 12:52:00 -08:00
Gaël Poupard
a2c056e1f6
fix(alerts): ensure color is set and used (#35571) 2021-12-20 14:22:29 +02:00
Mark Otto
f729e4c7d1
Convert alerts to CSS variables (#35401)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-12-17 07:16:24 +02:00
Rafi
b424650ab5
Fix: variables collide with globals (#32492)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-12-17 07:02:20 +02:00
Mark Otto
55f2192a39
Rename scale-color() function to shift-color() to avoid collision with Sass's own color function (#32149) 2020-11-13 20:50:59 +02:00
Martijn Cuppens
67847b0aab
Add checks to fix color contrast issues (#32085) 2020-11-08 19:49:26 +01:00
Martijn Cuppens
cdc12165a9
Colors rewrite (#30622) 2020-10-13 09:58:06 +02:00
Ankit Mishra
c8523d71e7
Alert : Added z-index for close button (#31826)
Co-authored-by: Ankit Mishra <ankitmishra@Ankit-MacBook-Pro.local>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-10-07 16:03:53 +02:00
Mark Otto
c0fe38364a Add more variables, add a comment for the 3 2020-09-22 16:49:02 -07:00
Mark Otto
99777662c6 Rename .close to .btn-close, replace times sign with background SVG, update focus state 2020-09-22 16:49:02 -07:00
Martijn Cuppens
83b49aa688
Create scss-docs shortcode to get some snippets from the Scs… (#30502)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-04-06 20:13:35 +02:00
Martijn Cuppens
1c05c1dbf1 Drop color(), theme-color() & gray() functions (#29083)
Drop `color()`, `theme-color()` & `gray()` functions  in favor of variables. The functions just called a `map-get()` of a map where just the variables were defined. 

Also the `theme-color-level()` now accepts any color you want instead of only `$theme-colors` colors. The first value now is a variable instead of the `$theme-colors` key.
2019-07-25 10:41:13 +03:00
Martijn Cuppens
502b6c8ed6
Remove redundant brackets (#27768) 2018-12-14 17:54:44 +01:00
Mark Otto
a6ae1cc50d Move alert theme-color() levels to variables
Closes #24341
2017-12-28 10:20:34 -08:00
Eugene Kopyov
0a82cd9f3c Fix for right padding in dismissible alerts (#24481)
* Fix for right padding in dismissible alerts

* Removed extra whitespace

* Update _alert.scss

* Update _alert.scss
2017-10-22 12:54:32 -07:00
Andres Galante
f02f545e0e changes the order of the close btn on alerts to improve accecibility 2017-09-30 23:32:39 -07:00
Mark Otto
2392047a0c update alert component to use theme sass map and add a ton of options in the process 2017-06-25 18:22:51 -07:00
Patrick Yeo
dd0ce3e4b2 Rename variable $input-border-focus to $input-border-color-focus (#22413)
* Rename variable $input-border-focus to $input-border-color-focus
* Rename variables $pagination-hover-border, $pagination-active-border, $pagination-disabled-border to $pagination-hover-border-color, $pagination-active-border-color, $pagination-disabled-border-color, respectively
* Rename variables $state-*-border to $state-*-border-color, respectively
* Rename variables $alert-*-border to $alert-*-border-color
* Rename $list-group-active-border to $list-group-active-border-color
* Rename $table-inverse-border to $table-inverse-border-color
* Rename $btn-*-border to $btn-*-border-color
* Rename $navbar-*-toggler-border to $navbar-*-toggler-border-color
2017-04-16 15:45:10 -07:00
Mark Otto
23866efbb1 Fix #20013, nullify #21112 (#21230)
Add padding to dismiss button for alerts and use position to place it. Removes extra padding on .alert-dismissible's right side, too. We could probably further simplify these things in the future as well.
2016-11-27 23:59:21 -08:00
Cyril Kyburz
f995a8be1e Add alert-margin-bottom variable (#21064) 2016-11-27 23:21:09 -08:00
Mark Otto
6321f9342e Switch to separate vars for alert vertical/horizontal padding 2016-10-18 19:18:06 -07:00
Mark Otto
910f3ec498 fixes #20485: use rem units in alert dismiss (#20625) 2016-09-04 17:41:38 -07:00
Mark Otto
b4a2b99395 Dump the type margin overrides in alerts for utils, document that particular example, sidesteps part of #18884 2016-02-03 20:43:12 -08:00
Chris Rebert
a4745dd7a1 Use proper units when adding/subtracting lengths
[skip sauce]
[skip validator]
2016-01-13 16:16:43 -08:00
Chris Bell
be1bb9ec3e #17895 Added $alert-border-width that defaults to $border-width 2015-10-15 15:57:15 +01:00
Catalin Zalog
c72a76e1fd Just some spaces... 2015-09-21 01:07:48 +03:00
Mark Otto
683472d6e2 remove a margin-top: 0 reset since we nuke headings' top margins now in reboot 2015-08-23 00:24:59 -07:00
Mark Otto
c3373df95f clean out comments that aren't all that helpful 2015-08-17 18:33:34 -07:00
Mark Otto
ed89be1f44 Remove $line-height-computed
We have it set to `1` right now just to avoid compilation errors, but
it’s been replaced everywhere with our new spacer classes anywho. We’ll
likely want to remap that var to custom component vars though (e.g.,
`$pagination-margin` instead of `$spacer-y`).
2015-04-29 12:00:11 -07:00
Mark Otto
b88c05d564 clean up comments and spacing 2015-04-18 11:15:40 -07:00
Chris Rebert
10f703f3b0 un-nest .alert-heading & .alert-link 2014-12-29 16:03:22 -08:00
Chris Rebert
d0c2a82ea8 Use .alert-heading instead of hardcoding <h4> 2014-12-15 17:49:35 -08:00
Mark Otto
27df020852 convert to scss 2014-12-02 14:02:35 -08:00