Commit Graph

119 Commits

Author SHA1 Message Date
Mark Otto 33b275c04b
Remove vertical-align from .form-select (#32318)
Aligns the component with the .form-control. Closes #32271.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-12-07 19:08:31 +02:00
Gaël Poupard 9488978fb5 feat(RTL): implement RTL
Using RTLCSS directives, renaming things to use logical names and following best practices.
2020-12-04 07:52:03 +02:00
XhmikosR 82f2416132
stylelint: pass the ` --rd` flag (#32063)
* stylelint: pass the ` --rd` flag

Should report any needless disables

* Update _button-group.scss

* Update _floating-labels.scss
2020-11-06 12:00:03 +02:00
Emilio Cobos Álvarez c1bb1acf54
Remove firefox workaround for ::file-selector-button margin. (#32064)
As per https://bugzilla.mozilla.org/show_bug.cgi?id=1673895,
this workaround shouldn't be necessary in FF83+.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-11-06 10:46:49 +02:00
XhmikosR e8f1709adf Drop Legacy Edge support.
This allows us to move forward without being held back. Microsoft already replaces the Legacy Edge with the new one on supported Windows versions.
2020-11-05 15:37:34 +02:00
Martijn Cuppens a108e2bbf8
Fix color heights (#32023) 2020-10-30 22:36:44 +02:00
Patrick H. Lauke 6fc35e3231
Add `cursor:pointer` to color inputs (#32020)
* Add `cursor:pointer` for color inputs

* Add to migration guide
2020-10-30 18:03:07 +00:00
Martijn Cuppens ed1d867dd8
Remove explicit heights on form elements (#31993)
* Remove explicit heights

* Link to upstream bug

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-10-29 15:18:39 +02:00
Martijn Cuppens b1c7d1d3a3 Use the same font on the button as on the field itself 2020-10-28 18:29:28 +01:00
Martijn Cuppens b2be299f63 Fix Firefox padding issue
Caused by https://searchfox.org/mozilla-central/rev/0b7007a23bc16c857f894140e12f307bfeef2fdd/layout/style/res/forms.css#494
2020-10-28 18:29:28 +01:00
Martijn Cuppens f236667483 Drop custom file upload plugin in favor of CSS 2020-10-28 18:29:28 +01:00
Mark Otto 3e2f9ab237
v5: Floating labels (#30449)
* v5: Promote floating labels example to component

- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example

* Update floating labels to support .form-select, make inputs and selects more consistent

- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity

* Streamline and bulletproof some things

- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC

* Move some values to variables, switch from scaling font-size to scale, update transforms

* Bring over changes from #30966 and add to them to tighten things up

* Delete the now unused example images

* Fix typo

* Allowlist the calc function

* Add transform-origin, update transform values

* Test out autofill fix

* Fix linter issue

* Mention it in the migration guide

* Bump bundlesize

* Add one more variable per review

* Shave .25rem off the height

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-10-27 20:45:48 -07:00
Martijn Cuppens 568c1d19d3 Fix border radius for inputs groups with validation 2020-10-26 15:23:25 -07:00
Martijn Cuppens 313f762d03 Fix border radii on validation messages 2020-10-26 15:23:25 -07:00
Martijn Cuppens 3e2c3298da Require `.has-validation` class to fix border radii on form elements 2020-10-26 15:23:25 -07:00
Mark Otto 3cf51c6ac9
Add Sass variable for CSS variable prefix (#31684)
* Add Sass variable for CSS variable prefix

* Update other --bs-* var instances
2020-09-30 08:32:58 +03:00
Nikita Mikhaylov 0cb880c7fb
Fix disabled checkbox toggle buttons (#31651)
* fix disabled checkbox toggle buttons

* add disabled checks-radios examples in documentation

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-09-29 21:49:50 +03:00
XhmikosR c30b6df54b
Update stylelint to v13.7.2 (#31726) 2020-09-28 14:57:48 +03:00
Martijn Cuppens 5280771883
Input group addon sass customization options (#31729) 2020-09-23 15:48:37 +02:00
Martijn Cuppens 8b7b234fd1 Switch to btn-check 2020-06-15 19:04:19 -07:00
Martijn Cuppens 1a0a0858ef Remove checkbox/radio toggle from button plugin in favor of a CSS only solution 2020-06-15 19:04:19 -07:00
Martijn Cuppens 2df63f4925
Fix gradient on switch checkbox (#30868) 2020-05-19 22:06:50 +02: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
Gaël Poupard fb0ad7a93c
Fix form file height (#30699) 2020-05-05 19:43:16 +02:00
Gaël Poupard 8bee113008
[type=radio] should always be rounded (#30686) 2020-04-29 21:13:57 +03:00
Catalin Zalog ed32ee2e78
Add `$form-text-font-weight` (#30617) 2020-04-20 08:19:06 +02:00
Catalin Zalog 3ff3680d4e
feat: removes `.form-text` display (#30598)
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-04-16 16:38:21 +02:00
Martijn Cuppens ed8fd689e6
Simplify checkbox & radio input (#30557)
- Define background properties in `.form-check-input`
- Use `background-size: contain` to simplify background sizes (especially for those with linear gradients)
- Remove double `color-adjust`
- Adjust svgs to 20x20 box. This way the strokes aren't rescaled.
2020-04-14 15:05:34 +02:00
Catalin Zalog e2afbbfa82
Restore `.form-text` (#30565) 2020-04-14 09:21:13 +03:00
Catalin Zalog 939beea620
Use `box-shadow` mixin for `.form-select` (#30555) 2020-04-11 13:27:01 +02:00
Martijn Cuppens 5e65b12f1c
Add checkbox transition (#30528) 2020-04-09 08:07:11 +02: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
Catalin Zalog 1cc1a47646
Use `box-shadow` mixin for form controls (#30480) 2020-04-01 19:44:22 +02:00
Martijn Cuppens 6663faa3e7 Fix date inputs heights in safari 2020-04-01 08:30:40 +02:00
Martijn Cuppens df707cd727
Require `.form-label` classes on form labels (#30476) 2020-03-31 20:02:57 +02:00
Zedicius 64a5987cc0
File chooser size (#30040)
Co-authored-by: David Van Doninck <david.vandoninck@intracto.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-03-23 18:36:54 +01:00
Catalin Zalog 8f84d4051b
Make form-check label customizable (#30426)
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-03-23 18:29:56 +01:00
Martijn Cuppens 85b12549ec Simplify input groups by dropping `.input-group-prepend` and `.input-group-append` 2020-03-23 15:35:07 +01:00
Martijn Cuppens d9e83671ae Drop IE support from Sass 2020-03-18 20:59:27 +02:00
XhmikosR 018a94c9c1 Remove Internet Explorer leftovers 2020-03-18 20:59:27 +02:00
Martijn Cuppens 481f7c6a3d Use `display: block;` for form elements 2020-03-13 08:29:47 +01:00
Martijn Cuppens beefc6f530 Bootstrap 5 grid 2020-03-10 20:30:29 +01:00
Martijn Cuppens dc64ff3314 Convert background shorthands to separate properties 2020-02-12 19:45:54 +02:00
jorimvanhove 58f2e8309c IE auto-size input-group to column (#30043) 2020-01-23 17:30:31 +02:00
Martijn Cuppens 4387038421 Simplify disabled styles (#29296)
* Simplify disabled styles

* Mention pointer-events usage
2019-12-27 18:40:06 +02:00
Martijn Cuppens 4b021dc666
Remove redundant top margin (#29883) 2019-12-25 20:54:43 +01:00
wojtask9 043b054480 Remove `.form-group` leftovers (#29449) 2019-12-09 19:22:12 +01:00
jeromelebleu 2a6ba75388 Use pseudo-class too for disabled check/radio (#29740) 2019-12-06 02:28:34 +02:00
Jonathan Hefner 0caed940a5 Set vertical-align on .form-check-input (#29521)
This is a follow-up to #29322, specifically "allowing easy placement of
the `.form-check-input` in more places."  In my testing in Firefox and
Chrome, setting `vertical-align: top` removes the need to add
`float-left` to vertically align the checkbox and label text.  And doing
so does not visually affect examples which do apply `float: left` via
nesting in a `.form-check`.
2019-11-24 20:15:35 +01:00
Martijn Cuppens 460ba061cb
Keep themed appearance for print (#29714) 2019-11-24 20:01:02 +01:00
Martijn Cuppens eb849d73cd Make check label cursor customizable (#29654) 2019-11-07 21:03:52 +02:00
ysds d6ebc60d3d Add add and subtract function 2019-10-31 08:30:53 +02:00
Mark Otto b81a23a60d Update .form-check to properly support gradients when enabled (#29338) 2019-10-28 08:12:07 +01:00
Mark Otto 707973ebdd v5: .form-check layout changes (#29322)
* Scope .form-check-input layout to the .form-check parent

* Remove margin-bottom from list-group-items in case they are label elements

* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
2019-10-02 22:19:45 +03:00
Paweł Kuna 0a3aa08b89 Remove outline from select box in FF (#29445)
* Remove outline from select box in FF

* Use $form-select-color
2019-09-27 18:58:53 +03:00
XhmikosR de3a3731bd
Sass: remove redundant stylelint inline suppressions. (#29427) 2019-09-26 21:50:14 +03:00
Martijn Cuppens 007ea0d8d0 Clean up line heights & add line height utilities (#29271) 2019-08-30 10:42:41 +03:00
Martijn Cuppens 68d67c8f16 Add rounded corners to color swatches 2019-08-24 02:26:28 +03:00
Mark Otto 57e17706a9 Add support and docs for color input 2019-08-24 02:26:28 +03:00
Martijn Cuppens 94521206e5 Split up `.form-control` & `.form-select` selectors 2019-08-18 16:33:10 +02:00
m5o 7b3ec256d5 set min-height for form-control textarea
* set `min-height` for `.form-control` textarea
  * prevent user from shrink textarea to minimum height
2019-08-18 16:33:10 +02:00
tu4mo b3cf60018c Add possibility to define custom border color for disabled form controls (#29257) 2019-08-18 17:08:59 +03:00
Shohei Yoshida 2e0a16f461 Fix min-width of input-group flex items (#29209) 2019-08-06 10:54:53 +03:00
ysds b4bf0ab371 Remove leftover CSS for custom control 2019-07-25 10:58:06 -07:00
ysds 18d75e3243 Fix variable name 2019-07-25 10:58:06 -07:00
Martijn Cuppens f6694b7440 Use escape-svg() function (#29077)
* Use escape-svg() function

* Update theming.md
2019-07-19 18:57:12 -07:00
Mark Otto 99676c7809 Use :focus-within for .form-file focus state (#29036)
Fixes #26563, closes #26576, closes #29021.
2019-07-17 16:56:54 +03:00
Mark Otto cef69b9a65 v5: Fix disabled styling on .form-file (#29022)
While #28450 overhauled a ton of forms work, the  support for this custom file input was ineffective. This updates the selector to target the custom field and gray out the entire field.

Fixes #28176.
2019-07-14 12:00:57 +03:00
Mark Otto aaf03bdc9e
v5: Forms update (#28450)
* Initial spike of consolidated form checks

* Stub out forms rearrangement

- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS

* Move input group Sass file to forms subdir

* Start to split and move the docs around

* Simpler imports

* Copyediting

* delete overview file

* Remove commented out code

* remove the custom-forms import

* rewrite flex-check as form-check, replace all custom properties

* Remove old forms doc

* stub out new subpage link section

* update migration guide

* Update nav, forms overview in page nav, and descriptions

* fix check bg position

* fix margin-top calculation

* rename .custom-select to .form-select

* Update validation styles for new checks

* add some vertical margin, fix inline checks

* fix docs examples

* better way to do this contents stuff, redo the toc while i'm at it

* page restyle for docs while here

* un-callout that, edit text

* redo padding on toc

* fix toc

* start to cleanup checks docs

* Rewrite Markdown tables into HTML

* Redesign tables, redo their docs

* Replace Open Iconic icons with custom Bootstrap icons

* Redesign the docs navbar, add a subheader, redo the sidebar

* Redesign docs homepage a bit

* Simplify table style overrides for docs tables

* Simplify docs typography for page titles and reading line length

* Stub out icons page

* Part of sidebar update, remove migration from nav.yml

* Move toc CSS to separate partial

* Change appearance of overview page

* fix sidebar arrow direction

* Add footer to docs layout

* Update descriptions

* Drop the .form-group class for margin utilities

* Remove lingering form-group-margin-bottom var

* improve footer spacing

* add headings to range page

* uncomment form range css

* Rename .custom-range to .form-range

* Drop unused docs var

* Uncomment the comment

* Remove unused variable

* Fix radio image sizing

* Reboot update: reset horizontal ul and ol padding

* de-dupe IDs

* tweak toc styles

* nvm, fix dropdown versions stuff

* remove sidebar nav toggle for now

* broken html

* fix more broken html, move css

* scss linting

* comment out broken helper docs

* scope styles

* scope styles

* Fixes #25540 and fixes #26407 for v5 only

* Update sidebar once more

* Match new sidenav order

* fix syntax error

* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696

* rename back

* fix size and alignment

* rename that back too
2019-07-12 16:52:33 -05:00