Commit Graph

79 Commits

Author SHA1 Message Date
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
Martijn Cuppens d09bd2e629 Fix background size y 2019-01-13 16:24:01 -08:00
Martijn Cuppens e2ac792bc7 Minify background property 2019-01-13 16:24:01 -08:00
Martijn Cuppens 502b6c8ed6
Remove redundant brackets (#27768) 2018-12-14 17:54:44 +01:00
Martijn Cuppens b33d0d3790 Prevent white line in Firefox (regression) (#27594) 2018-11-05 18:56:41 +02:00
patrickhlauke c46a0c7e88 Replace touch-action: none with pan-y, remove preventDefault from touch event handling 2018-11-04 14:40:19 +02:00
Martijn Cuppens 96b49d7833 Fix Edge bounce and restore original transition easing (#27279) 2018-10-31 09:45:39 +02:00
Martijn Cuppens 5aed968750 Prevent the background to be shown when transitioning 2018-10-30 08:57:02 +02:00
Martijn Cuppens c9a43b027a Re-add carousel control transition (#27277) 2018-10-21 10:13:35 +03:00
Martijn Cuppens 2a28c7d9fd Carousel fade cleanup (#27278) 2018-10-21 09:55:43 +03:00
patrickhlauke 8883ccb205 Set touch-action to "none"
Firefox currently seems extremely fickle - with `pan-y` if fires pointercancel as soon as a touch strays even a pixel or so vertically.
While `touch-action: pan-y` would be ideal (allowing users to scroll the page even when their finger started the scroll on the carousel), this prevents a swipe that isn't perfectly/only horizontal to be recognised by Firefox.
2018-10-20 15:32:09 +03:00
patrickhlauke 7b8f01d839 Use correct touch-action values
- my fault, my original advice of using `touch-action: pan-x` is exactly the value we *don't* want to have the browser handle...
2018-10-20 15:32:09 +03:00
Johann-S 735c374e9c use pointer events if available 2018-10-20 15:32:09 +03:00
Martijn Cuppens 0e8831505a Simpler carousel indicators css (#26996) 2018-08-26 14:53:36 +03:00
Martijn Cuppens 4f926671e9 Carousel indicators transition (#26902) 2018-07-24 21:15:05 -07:00
domq 616ce9b75a Fix double-transition bug (#26452)
By applying the transition: CSS property only to classes that are
active during sliding, we avoid an unnecessary, non-zero-time
animation that although mostly invisible, does interfere with e.g.
z-index based parallax
2018-05-18 18:59:52 +03:00
Varunram 4bc5cc149a Closes #26300: Add cursor pointer to carousel indicators 2018-04-23 21:55:45 -07:00
Tom Swirly a0c7473a34 Tiny grammar and punctuation tweaks to a comment.
1. It's == "it is"

2. The subject of the sentence is "Only one" (not "these") so the verb must agree with it.

Feel free to do nothing with this change, use it, etc - I just saw this while reading through the code.
2018-04-01 23:08:58 +03:00
Jacob Müller 27f553c965 Replace "loose" HEX values with their respective variables (#25672) 2018-03-12 19:19:37 +02:00
Mark Otto 663057d441
Feature: Add carousel fade option (#22958)
* Move helpful code comments

* Add .carousel-fade option to Sass

* Document example of the fade carousel

* more logical warning of the .active class on carousel items
2018-01-21 22:51:08 -08:00
XhmikosR 29d58fb758 Enable stylelint's `function-comma-space-after`. (#24501)
The option is set to `always-single-line` in stylelint-config-standard which we extend.
2017-10-23 00:00:00 +03:00
Mark Otto 06641ca0b3 Gradients and shadows (#24429)
* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency

* - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables.

- Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow`
variables with unified `$input-btn-focus-box-shadow` to match our
combined variables approach elsewhere.

* Put new focus width var to use in buttons mixins

* use new button input-box shadow var

* Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true

* use correct var

* fix focus shadows in button mixins

* Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items

* Generate .bg-gradient- utilities

* add headings to colors page and document bg-gradient utils

* update the button color for active status, check with yiq as it's done for basic state and hover state
2017-10-19 09:03:33 -07:00
Mark Otto 2bf4de0698 Update carousel display settings
Use `display: block` since we're not really using any flex styles on the `.carousel-items` (only their controls and indicators). For the indicators, since moving to `width`, our indicators grow to fill available space, so we need to change `flex: 1 0 auto` to `flex: 0 1 auto` to prevent that.
2017-07-01 16:59:16 -07:00
Mark Otto 75156f419a using max-width in flex: 1 0 auto; in ie11 offsets the center-aligned contents 2017-07-01 11:21:20 -07:00
Mark Otto 2d4534e112 use @supports to apply transform3d to those who can do it, then provide a non-3d fallback to ie11 2017-07-01 11:21:20 -07:00
Mark Otto 0c59741812 property order 2017-04-08 16:29:21 -07:00
Pierre-Denis Vanduynslager 73cfefd594 Do not stretch images in carousel-item 2017-04-08 16:29:21 -07:00
Mark Otto ab67ffe167 Ensure carousel works in IE10/11
- Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it

- Updates carousel to not rely on that mixin
2017-04-08 16:29:21 -07:00
Mark Otto 02e0fdbd52 Remove `cursor: pointer;` (#21812)
* Remove most of custom cursor: pointer; implementations

* turns out that's not so much of a thing
2017-01-23 22:15:28 -08:00
Quy 28072f153c Update carousel comments (#21501) 2017-01-01 12:00:17 -08:00
Mark Otto 736be8fca6 linting 2016-12-22 14:58:40 -08:00
Mark Otto 135b65ded4 text-align doesn't apply here, so we can nuke it 2016-12-22 14:58:40 -08:00
Mark Otto be7a8c68f7 Redo controls in flexbox
- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.

- No more position, left, right, or margins involved; just some justify-content and align-items.

- Add some comments for explaining which flex property-value pair does what.

- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.
2016-12-22 14:58:40 -08:00
Mark Otto 1706f494f0 flexbox powered indicators
This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.
2016-12-22 14:58:40 -08:00
Mark Otto d426c3c50e start small--set flex instead of block for active items 2016-12-22 14:58:40 -08:00
Tom Lutzenberger e1653edb95 Add variables for transitions (#21345)
* Add variables for transitions

* Add variables for transitions
2016-12-19 20:33:17 -08:00
Mark Otto 4ef547f4bb drop the .carousel-control base class 2016-12-04 23:19:54 -08:00
Mark Otto e331db31fd linting 2016-12-04 22:19:20 -08:00
Mark Otto 89f5e65cfb drop the fixed width of the indicators. instead use the carousel-control width as margins to ensure content doesn't overlap 2016-12-04 22:05:05 -08:00
Mark Otto 1980854c14 rename var 2016-12-04 22:01:31 -08:00
Mark Otto 410bf38a4f there's no font, so rip that var 2016-12-04 21:55:46 -08:00
Mark Otto 990db2496f rip responsive styles; they're unnecessary and likely require overriding anyway 2016-12-04 21:55:02 -08:00
Mark Otto 1abe4c83a8 redo control icons to use open iconic svgs inlined 2016-12-04 21:54:45 -08:00
Mark Otto d157fcebba rename control left and right to prev and next; simplify styling by removing gradient 2016-12-04 21:54:04 -08:00
Mark Otto 5c93cb7c81 code comment 2016-12-04 21:39:54 -08:00
Mark Otto 8f06eebe44 rename and un-nest icons 2016-12-04 21:39:46 -08:00
Mark Otto c2c4b5ba76 remove comment 2016-12-04 21:39:27 -08:00
Mark Otto 1e3ec89355 Merge branch 'v4-dev' into carousel 2016-12-04 21:05:19 -08:00
Mark Otto 6782dd6e92 nuke the text-shadow 2016-12-04 20:37:30 -08:00
Mark Otto fd87c19e79 linting 2016-12-04 20:27:33 -08:00