0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Commit Graph

120 Commits

Author SHA1 Message Date
Martijn Cuppens
e2014e8ed7 Custom checkboxes and radios retheming (#27064) 2018-10-21 10:25:07 +03:00
719media
2c1a743cc9 Update _custom-forms.scss (#27276)
user-select has no effect on before/after pseudo elements
2018-10-20 22:35:56 +03:00
Andres Galante
5088f02730 Add font weight options for form controls and custom select (#27343) 2018-10-20 11:50:20 +03:00
Martijn Cuppens
e3c0b3d3af #27112: fix border focus border color 2018-09-02 16:25:55 -07:00
Mark Otto
0b5a8d9c98 Merge branch 'form-validation-icons' into v4-dev 2018-07-29 14:18:09 -07:00
Robert
70ad98d34d Fix custom-select font size/padding (#26585)
fixes #26476
2018-07-29 14:04:35 -07:00
ysds
bbee41431d Fix custom range height (#26898)
Fixes #26897
2018-07-24 17:56:03 -07:00
Martijn Cuppens
d80635c1cd Custom input range disabled styling (#26540) 2018-07-24 17:39:15 -07:00
ysds
48c723b60f Fix custom range thumb style (#26385)
* Fix focus box shadow of custom ranges

* Put `:focus` selector right after `.custom-range`
* Remove unnecessary `outline: none`

* Fix box-shadow issues in IE/Edge

* Better align

* Fix thumb vertical positions in IE/Edge

* Fix incorrect formula of thumb vertical positions in Webkit

* Fix an incorrect comment

* Fix incorrect box-shadow-width
2018-07-14 21:31:20 -07:00
Andrew Luca
0fd40837e8 Fix custom-forms heights and position (#25602)
Now `.custom-control` will have height equal to `$font-size-base`
Fix custom checkbox and radio top position (we can't subtract rem from unit)
`$line-height-base - $custom-control-indicator-size` is not valid
Because `$line-height-base` is a unitless variable and `$custom-control-indicator-size`
is a unit (rem) variable
2018-07-14 21:29:19 -07:00
Mark Otto
8d8d3ef82a Restore feedback icons on validated form fields
- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select`
- Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable
- Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section
2018-07-08 15:31:18 -07:00
Mark Otto
d78aac01d6
Update box-shadows on .custom-select (#26754)
- Fixes #25656 where custom selects had the wrong focus shadow
- Fixes #26668 where custom selects had no inset shadow (also closes #26572 which had the wrong form classes on the first example anyway)
2018-06-24 13:07:49 -07:00
ysds
2ea0a9bba9 Add disabled bg color to disabled custom file 2018-05-23 01:43:53 +03:00
Martijn Cuppens
4dd65f0b38 Custom forms transition 2018-05-23 01:38:12 +03:00
Mark Otto
139e89235f Simplify custom file inner height for generated browse button 2018-04-29 17:02:38 -07:00
ysds
3d0d5f1247 workaround for IE that check indicator does not appear (#25944) 2018-04-23 21:52:59 -07:00
Varunram Ganesh
871e0838a4 [trivial] Correct typos (#26297) 2018-04-14 08:41:18 +01:00
XhmikosR
95cdfa2a65 Use https when possible. 2018-04-02 19:19:09 +03:00
ysds
7b2427cc6b Rename .custom-file-control to .custom-file-label (#25736) 2018-03-12 19:51:27 +02:00
Mark Otto
470b4472c6
Custom range input (#25600)
* added the styling

* added the documentation

* update for one rule per line

* fix hound error: trailing whitespace

* trimmed off vendor prefixes

* Add note about track and thumb

* Psuedo-elements must be split across multiple rulesets to have an affect

* Fix firefox inner focus

* Seems that FF is the only one affected by this

* Add support for gradients

* Add labels, clarify min/max changes

* add step example

* add custom range vars
2018-02-19 14:40:59 -08:00
Gustavo Straube
a531b46453 Using the expected variable to set the custom select height. (#25169) 2018-01-15 22:07:05 -08:00
gijsbotje
d7dbdf91c6 added variable for the background of checked and indeterminate custom inputs and radios that are disabled
added styles for these cases
2018-01-06 01:14:15 +01:00
Mark Otto
b01e81ed36 Rewrite custom file input
- Changes the wrapping label to a div so we can style the label instead of another element while also supporting form validation.
- Fixes form validation styles for custom file input (closes #24831).
- Updates docs with validation styles (also adding example feedback text while I was there) and new how it works section.
2017-12-26 16:14:08 -08:00
Mark Otto
c468f89b1c Make custom select and file inputs 100% wide
Matches browser default inputs and swaps some max-width properties for a regular width
2017-12-23 17:50:52 -08:00
Mark Otto
16f1417240
Form check markup v2 (#25050)
* match layout behaviors

* ditch the indicator as separate element for psuedo-elements on the label

* move disabled to attribute only on input

* redo default inline check to support new markup

* redo inline forms

* clean up vars

* update validation mixin to new structure

* update checks in docs

* linting for for/id attributes
2017-12-22 16:13:01 -08:00
Mark Otto
671bb278bb Restore currently unused variables (#24891) 2017-11-27 19:31:11 +02:00
Mark Otto
2ec1606ab7
Custom select updates (#24699)
* Add support for size attribute on custom selects

* Add large custom select, document it and the small variant

* fix custom select focus state

* fix custom file input focus styles

* remove empty line
2017-11-24 14:29:59 -08:00
Mark Otto
4829350a46
Rewrite custom form check backgrounds (#24697)
* Rewrite custom form check backgrounds

Previously, this was all just a background-color and background-image. When we restored the gradients though, we had two background-images competing on the same element, causing rendering glitches. This refactors that code, creating a mixin to simplify things, so we can we easily use two background-images (SVG icon and gradient) when -gradients is set to true.

Fixes #24598

* restore default vars

* Revamp custom check and radio backgrounds

Instead of applying multiple background-image's to the same element, we're adding a new ::before pseudo-element to layer the background-images. Gradients go on the .custom-control-indicator while their icons go on the ::before element. This allows us to shave some bytes from when we compile and we previously needed to redeclare the background-image for the icon if you changed the gradient.

* remove now unused mixin

* mention change in migration docs
2017-11-24 14:26:56 -08:00
Edward Betts
ffc5965f2c Correct spelling mistakes. (#24778) 2017-11-15 04:12:38 -05:00
ysds
ccc95d0c96 Reduce custom file z-index (#24633) 2017-11-06 15:58:28 -08:00
XhmikosR
34d745540d
Minor Sass consistency changes. (#24677)
* use `background-color` instead of the shorthand
* use `outline: 0` consistently
* fix transform order
* remove quotes from `SFMono-Regular`
2017-11-06 02:23:36 +02: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
Lodder
bd858f0ceb Fix custom-select with "multiple" attribute (#23055) 2017-10-02 21:00:57 -07:00
XhmikosR
7b766e1ad5 Switch to stylelint. (#23572) 2017-10-02 20:34:56 -07:00
Mark Otto
8fb48eaae2 Revert input group border changes (#24197)
Turns out #22612 is a bad idea and it makes all sorts of weird visual
glitches when working with form controls and transparent borders.
2017-10-02 14:18:33 -07:00
Patrick Yeo
ffa789327b Custom File padding-x and padding-y values are reversed (#23067)
Custom File `$custom-file-focus-box-shadow` should show even if box shadows are disabled

Custom File variables should inherit from inputs
2017-08-10 23:01:52 -07:00
Nathan Woltman
f95282c27e Fix border on input group elements and custom form inputs
c3e4cbd changed the border of input elements to be translucent. This commit makes
input group elements and custom form inputs follow the same pattern.
2017-08-10 22:41:21 -07:00
Patrick Yeo
696b2bee11 (#22414) Rename for consistency $custom-checkbox-border-radius, $custom-checkbox-icon-checked, $custom-checkbox-indeterminate-bg, $custom-checkbox-icon-indeterminate, $custom-checkbox-indeterminate-box-shadow, $custom-radio-border-radius, $custom-radio-icon-checked to $custom-checkbox-indicator-border-radius, $custom-checkbox-indicator-icon-checked, $custom-checkbox-indicator-indeterminate-bg, $custom-checkbox-indicator-icon-indeterminate, $custom-checkbox-indicator-indeterminate-box-shadow, $custom-radio-indicator-border-radius, $custom-radio-indicator-icon-checked, respectively 2017-07-16 12:36:26 -07:00
Mark Otto
21b874d19d Merge branch 'v4-dev' into form-tweaks 2017-06-13 20:15:42 -07:00
Patrick Yeo
d7867377d9 (Fixes #22414) Rename for consistency $custom-checkbox-radius, $custom-checkbox-checked-icon, $custom-checkbox-indeterminate-indicator-color, $custom-checkbox-indeterminate-icon, $custom-radio-radius, $custom-radio-checked-icon, $custom-select-sm-font-size, to $custom-checkbox-border-radius, $custom-checkbox-icon-checked, $custom-checkbox-indicator-indeterminate-color, $custom-checkbox-icon-indeterminate, $custom-radio-border-radius, $custom-radio-icon-checked, $custom-select-font-size-sm respectively 2017-06-13 19:22:49 -07:00
Patrick Yeo
2317b7fc96 (#22414) Rename for consistency $custom-control-disabled-indicator-bg, $custom-control-disabled-description-color, $custom-control-checked-indicator-color, $custom-control-checked-indicator-bg, $custom-control-checked-indicator-box-shadow, $custom-control-focus-indicator-box-shadow, $custom-control-active-indicator-color, $custom-control-active-indicator-bg, $custom-control-active-indicator-box-shadow to $custom-control-indicator-disabled-bg, $custom-control-description-disabled-color, $custom-control-indicator-checked-color, $custom-control-indicator-checked-bg, $custom-control-indicator-checked-box-shadow, $custom-control-indicator-focus-box-shadow, $custom-control-indicator-active-color, $custom-control-indicator-active-bg, $custom-control-indicator-active-box-shadow, respectively 2017-06-13 08:45:36 -07:00
Mark Otto
ca44f5b03a Redo the small custom select vars
— Sizing shorthand comes last
— Add height var and put it to use
2017-04-22 11:56:27 -07:00
Mark Otto
dc3af6711d Change how input and select height is computed
— Previously we weren't including the border-width on the computed height, leading to alignment issues.

— New system utilizes three variables (not ideal, but straightforward) for computing these heights. One for the vertical border, one for the line-height/font-size/padding dance, and one to add those together.

— Updates CSS across forms and custom forms to use new sizing. Special note here: form validation icon sizing uses the inner variables because background-image doesn't bleed into borders unless explicit background-clip.
2017-04-22 11:56:01 -07:00
Mark Otto
5463d8436b Merge branch 'v4-dev' into form-tweaks 2017-04-21 23:36:24 -07:00
Patrick H. Lauke
7056f70240 Remove cursor: not-allowed styles 2017-04-10 22:10:20 +01:00
Mark Otto
0cb2576bf2 fixes #21922: set border-radius to 0 when global radius is disabled 2017-04-08 21:58:26 -07:00
Theriault
6f42daf747 Add :empty to .custom-file-control selector (#22176)
<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control"></span></label>
VS
<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control">test.txt</span></label>
2017-03-18 13:23:10 -07:00
naicko
890c6041f3 Update scss mixins to comply with scss-linting rules (#22151)
* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da68.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus
2017-03-18 13:06:05 -07:00
Rutger Laurman
0a997795b4 Fix border width calculation for custom-select (#22068)
In addition to #22011 and #21994
2017-03-03 11:19:02 -08:00
Bardi Harborow
9bacc6715a Remove vendor prefixes from appearance: none. 2017-02-21 17:38:11 +11:00