mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-30 16:50:00 +02:00
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
This commit is contained in:
76
scss/forms/_form-select.scss
Normal file
76
scss/forms/_form-select.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// https://primer.github.io/.
|
||||
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: $form-select-height;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
font-weight: $form-select-font-weight;
|
||||
line-height: $form-select-line-height;
|
||||
color: $form-select-color;
|
||||
vertical-align: middle;
|
||||
background: $form-select-background;
|
||||
background-color: $form-select-bg;
|
||||
border: $form-select-border-width solid $form-select-border-color;
|
||||
@include border-radius($form-select-border-radius, 0);
|
||||
@include box-shadow($form-select-box-shadow);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $form-select-focus-border-color;
|
||||
outline: 0;
|
||||
@if $enable-shadows {
|
||||
box-shadow: $form-select-box-shadow, $form-select-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// suppress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple],
|
||||
&[size]:not([size="1"]) {
|
||||
height: auto;
|
||||
padding-right: $form-select-padding-x;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $form-select-disabled-color;
|
||||
background-color: $form-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select-sm {
|
||||
height: $form-select-height-sm;
|
||||
padding-top: $form-select-padding-y-sm;
|
||||
padding-bottom: $form-select-padding-y-sm;
|
||||
padding-left: $form-select-padding-x-sm;
|
||||
@include font-size($form-select-font-size-sm);
|
||||
}
|
||||
|
||||
.form-select-lg {
|
||||
height: $form-select-height-lg;
|
||||
padding-top: $form-select-padding-y-lg;
|
||||
padding-bottom: $form-select-padding-y-lg;
|
||||
padding-left: $form-select-padding-x-lg;
|
||||
@include font-size($form-select-font-size-lg);
|
||||
}
|
Reference in New Issue
Block a user