Commit Graph

179 Commits

Author SHA1 Message Date
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
Catalin Zalog
e2afbbfa82
Restore .form-text (#30565) 2020-04-14 09:21:13 +03:00
Martijn Cuppens
beefc6f530 Bootstrap 5 grid 2020-03-10 20:30:29 +01: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
Shohei Yoshida
1c510ddaec Make generating form row styles dependent on $enable-grid-classes (#28870) 2019-06-05 18:15:27 +03:00
Shohei Yoshida
06635be7bd Reset input padding for cross browser consistency (#28208) 2019-05-09 20:40:40 +03:00
Shohei Yoshida
2d0f2feb10 Sync plain text font-size with $input-font-size (#28464) 2019-04-25 16:45:59 +03:00
Shohei Yoshida
5e459e9b52 Workaround for MS edge bug (#28275) 2019-03-18 01:27:59 +02:00
Jonathan
c8361e2adf Hyphenate server-side (#28401) 2019-03-04 15:52:13 +02:00
Martijn Cuppens
28a7abf0f7 Deprecate form-control-focus mixin (#28262) 2019-02-15 15:50:58 +02:00
Martijn Cuppens
51375abca5
Responsive font size implementation (#23816) 2019-02-07 23:32:05 +01:00
Martijn Cuppens
8b41cb1368 Optional btn & input font sizes (#28068) 2019-02-07 19:47:24 +02:00
Mark Otto
deea117293 Add form-validation-states Sass map (#27999) 2019-01-11 21:16:50 +02:00
XhmikosR
f21b5f9e98 Remove unneeded stylelint disables. 2019-01-05 20:50:07 +02:00
Martijn Cuppens
39b14c9806 Blacklist border-radius property (use mixin instead) (#27900) 2018-12-23 09:11:11 +02:00
Mark Otto
f6abb4976f
Prevent checks from shrinking in inline forms (#27870)
Fixes #25336
2018-12-21 13:52:02 -08:00
Jacob Müller
8fb6e84fa0 Make form grid gutter width configurable (#27766) 2018-12-05 17:15:24 +02:00
Martijn Cuppens
fab1dea927
Keep input group & form label font size in sync with form control font size (#27663) 2018-11-13 21:11:59 +01:00
Martijn Cuppens
d0b7eb1111 Cleanup stylelint comments 2018-10-23 00:21:33 +03:00
andresgalante
86822d93d6 changes the variables for input font size 2018-10-20 22:29:24 +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
e604958641 Variable .btn and .form-control font sizes (#26908) 2018-09-18 15:35:25 +03:00
Mark Otto
f426a67394
Form control heights (#26820)
* Redo input height on .form-control

- Use the already present -height variables on .form-control
- Consolidate the select size and multiple overrides into the .form-control base class instead of sm/lg modifiers
- Remove the Sass extends from input groups since it picks up too many selectors

* Prevent height on textareas
2018-07-15 14:00:23 -07:00
m5o
f81f419b22 set color to form-control-plaintext (#25565)
* set color to `.form-control-plaintext`
* fixes readability on dark themes like ‘darkly’
  * https://bootswatch.com/darkly/index.html#forms
  * https://bootswatch.com/slate/index.html#forms
  * https://bootswatch.com/superhero/index.html#superhero
  * https://bootswatch.com/solar/index.html#forms

/cc @thomaspark
2018-02-11 14:25:36 -08:00
Mark Otto
c68d26baa2 Override .custom-select width in .form-inline (#25414)
Fixes #25413
2018-02-02 14:25:47 +02:00
Mark Otto
0a420124ea
Restyle code element, remove docs example overflow, improve docs examples (#25054)
* Restyle code element, clean up variables

- Removes the padding and background-color
- Changes the color to a brand color ()
- Add new variables to kbd element styles to account for removing the code ones
- Remove overrides that were needed previously

* only break between words, and override it in the pre

* make file inputs 100% wide

* scope custom file changes in input group for sizing

* shorter button labels for responsive

* narrower cards

* button was too wide

* downsize

* fewer links in pagination

* redo cell text

* improve overflow docs
2017-12-22 16:49:57 -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
Troy Morehouse
9de141f428 Remove .col-form-legend in favor of .col-form-label (#24932)
* chore: sync with twbs (#1)

* Make styling of grouped option buttons class-based

Referencing #23728, styling grouped radio and checkbox buttons should not require the data-toggle attribute.

* Fix installing deps in our webpack docs

* Fix nested cards on card group (#24766)

* Update popper.js to v1.12.9. (#24797)

* Don't run postcss for `dist/css/*.min.css` files. (#24676)

* Change the text color to dark on bg color warning examples (#24805)

* Remove unused file and bundle ie-emulation-modes-warning.js with docs.min.js (#24825)

* Remove the unused assets/js/ie10-viewport-bug-workaround.js.

* Combine ie-emulation-modes-warning.js with docs.min.js.

* Typos in grid.md (#24828)

Fixed typos in offsetting section of grid.md

* Fix dropup example code

* Update devDependencies. (#24829)

* Add support for fractional viewport widths (zoom/high-dpi displays) (#24299)

* Change breakpoint  max- calculation to fractional values
* Update docs to reflect fractional max-width breakpoint values
* Add fractional max-width to offcanvas example
* Add documentation and SCSS comment for fractional viewport support

* Add a simple script to generate SRI hashes for our assets. (#24814)

* Allow us to run our unit test on differents jquery version

* Run karma tests in parallel.

* Update typography docs (#24863)

* closes #24450

* 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

* lets the centered modal have any height (#24803)

* 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

* Update package.json. (#24582)

1. Use the same jQuery version in jspm
2. Update the files to only include the source and dist folders

* Use Jekyll's `smartify` filter when possible. (#24866)

* Darken outline hover color to match default button hover (#24150)

* Fix Issue #24144

Alter button-outline-variant mixin to darken hover and active background in same fashion as filled button.

* Fix Issue #24144

Filled button on hover should utilize the same color-yiq mixin so that theme buttons match

* default values, fix mixin

* rename it

* document it

* add migration note

* fixes #24728

* Remove unused CSS. (#24872)

* tab.js: do not remove fade class if there's no initial active pane

* Restore currently unused variables (#24891)

* Replace lint-vars.sh with a Node.js script. (#24860)

Also, include it in the `css` npm script since it's instant.

* Fix docs horizontal scrollbar (#24878)

* Fix docs horizontal scrollbar in Components > Modal

* Add overflow to docs example class

* Drop the handleUpdate() variant

While I understand the variant covers the "get a particular plugin instance" case from http://getbootstrap.com/docs/4.0/getting-started/javascript/#programmatic-api it seems weird that we do it here but not everywhere else in the docs (randomly checking other pages, we seem to stick to the documented methods as written on those pages). As this isn't properly explained as is, and as it adds nothing (more of a preference for authors), it would be easier to just drop the variant and stick with the documented method as outlined later on in the same page (avoids having to go off on a "why should you use this instead of that" tangent here).

* Combine path and remove variable used in one place. (#24873)

* Update devDependencies and gems. (#24876)

* Override padding on radio input label (#24899)

We could tell folks to nix the class, we could tell them to override it, or we could add another modifier of some kind to address this. None of them seem particularly useful, but the padding override feels the most approachable and clearly documentable. Added this here to close #24844.

* Update README.md (#24912)

* Work around Travis failures.

Note that we should revert this when the issue is fixed.

* Revert the Travis workaround. (#24926)

The issue has been fixed.

* add .col-form-legend-lg and .col-form-legend-sm classes

* document .col-form-legend-{size}

* trash .col-form-legend completely

One class fits all

* Update forms.md

* consolidate copy

* property order
2017-12-02 11:51:38 -08:00
Mark Otto
1f42d79561 Merge branch 'v4-dev' into btn_input_split_variables 2017-10-22 14:26:49 -07:00
Gijs Boddeus
7bb82a5fb1 match width behaviour of form-control to form-control-plaintext (#24486) 2017-10-22 12:19:11 -07:00
Mark Otto
35317a4331 Remove background-image: none; on .form-control (#24454)
As the diff shows, this was for a Firefox Android issue that's since been fixed.

Closes #23817.
2017-10-20 09:56:43 +03:00
i.sychev
58e553d7bc append btn-* and input-* variables and extends their from input-btn-* variables 2017-10-19 10:05:07 +03:00
Andres Galante
008e0b5b68 Improves forms migration guide, docs, and scss (#24348)
* fixes migration forms guides

* removes container from Horizontal form

* adds col-form-label sizes on form docs

* removes .form-control-label from forms.scss

* add note to migration
2017-10-18 10:11:35 -07:00
Patrick Yeo
728f579286 Form Validation .valid-feedback and .valid-tooltip are unstyled (#23527) 2017-10-02 20:37:28 -07:00
XhmikosR
7b766e1ad5 Switch to stylelint. (#23572) 2017-10-02 20:34:56 -07:00
wojtask9
9145cc8279 fix .col-form-label paddings and add line-height (#23121) 2017-10-02 10:15:32 -07:00
Andres Galante
782ee6f60e Removes background from form-control-plaintext 2017-09-06 21:02:57 +01:00
Mark Otto
22f6ee52f0 remove commented out code, fixes #23530 2017-08-20 14:06:05 -07:00
Tomáš Kout
453a5fa033 Move the gap between inline checkboxes to right (#22607) 2017-08-13 14:58:47 -07:00
Mark Otto
006590ed9a Remove broken CSS that tried to reset the absolute positioning when there was no text 2017-08-10 22:36:35 -07:00
Mark Otto
0622a59897 fixes #22908 2017-06-26 07:59:20 -07:00
Patrick H. Lauke
ff5c75510d Rename .form-control-static to .form-control-readonly-plain 2017-06-14 19:51:50 -07:00
Mark Otto
7e5085b407 move from .gutters-sm to .form-row to be super explicit about intended use case 2017-06-13 22:11:29 -07:00
Mark Otto
21b874d19d Merge branch 'v4-dev' into form-tweaks 2017-06-13 20:15:42 -07:00
Patrick Yeo
4cc21bbf74 (#22414) Rename for consistency $input-bg-disabled, $input-bg-focus, $input-border-color-focus, $input-box-shadow-focus, $input-color-focus, $input-color-placeholder to $input-disabled-bg, $input-focus-bg, $input-focus-border-color, $input-focus-box-shadow, $input-focus-color, $input-placeholder-color, respectively 2017-06-13 08:45:50 -07:00
Mark Otto
94ed0d901b move to mixin so we can repeat it easier and allow folks to extend to custom states 2017-06-10 16:30:26 -07:00
Mark Otto
d6b0334a4e remove icons for now 2017-06-06 22:45:37 -07:00
Mark Otto
58b7239c6c add valid state 2017-06-06 21:53:23 -07:00
Mark Otto
6c214ad4c2 drop the old validation styles and docs 2017-06-06 11:27:29 -07:00