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
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
Christian Oliff
d7af46359b
Remove filter: alpha(opacity = 0);
...
Not needed (and all other old IE filter attributes have been removed from the CSS. This was the only one remaining
2017-01-15 17:52:34 -08:00
Phillip Marshall
1b194c0660
Custom Forms: Allow Chrome/Firefox feature that lets the user drag and drop into file inputs ( #20033 )
...
* Restored functionality of dragging files into .custom-file inputs.
* Replaced padding with height on .custom-file-input
2017-01-03 19:44:44 -08:00
Mark Otto
30fd1590d3
use flex and direction to do the stacked controls instead of float hacks
...
This also fixes #21280 . Previously, we were using float and clear on the individual controls, but that meant a computer height of `0` for the parent `.custom-controls-stacked`. No more problem after using flexbox though.
2016-12-25 15:48:44 -08:00
Mark Otto
82061b25c4
move custom checks/radios to inline-flex
2016-12-25 15:48:44 -08:00
Mark Otto
66c87cb7ca
Undo #21171 (which closed #20977 )
...
Turns out we did have the correct height calculation with our custom selects. The problem was we lacked a shared line-height with our buttons and inputs.
This restores the previous `calc` math and adds a line-height that reuses the input line-height.
2016-12-24 14:21:04 -08:00
Bardi Harborow
855a67b1d6
Remove IE9 browser hacks. ( #21393 )
2016-12-22 13:41:31 -08:00
Mark Otto
d8bdb819a7
linting property order
2016-12-10 16:58:52 -08:00
Mark Otto
65aed32d95
put the custom control spacer var to use
2016-12-10 16:58:52 -08:00
Mark Otto
306f75216d
Move margin from adjacent selector to right on the .custom-control for better responsive rendering ( #21295 )
2016-12-04 20:42:12 -08:00
Mark Otto
d50fc038c5
Update comment for use of IE9 hack to fix #18082
2016-11-26 17:31:10 -08:00
Mark Otto
20178076ee
Merge pull request #19915 from zalog/patch-9
...
Zero out the default margin-bottom on label.custom-file
2016-10-27 22:20:26 -07:00
Mark Otto
f655343ac9
Merge pull request #21033 from twbs/label-less-custom-controls
...
Add a min-height: 1.5rem; to custom controls
2016-10-27 21:23:04 -07:00
Mark Otto
2dcc50f017
Calculcate the top offset for custom control indicators
...
Fixes #21023 .
Uses some math functions to determine what the offset should be. This is helpful for those who customize the size of their indicators and still want them vertically centered.
2016-10-27 14:41:12 -07:00
Mark Otto
1421ca5b87
Add a min-height: 1.5rem; to custom controls
...
Fixes #20730 .
This change computes the minimum needed height of what a single line of text would be for the custom checkboxes/radios. This is required because our custom control indicators are positioned absolutely, meaning they cannot be clearfixed or anything like that. Using a computed value means it should scale nicely in case of customization
2016-10-27 14:32:56 -07:00
Mark Otto
300cedfe8c
Set height on custom select
...
Matches the changes from #20874 to the regular select element. This is really only necessary for IE and Edge near as I can tell. Fixes #20810 .
2016-10-09 19:49:52 -07:00
Bardi Harborow
2e69dfa8c1
Fix broken/redirected links, moving to HTTPS where possible. ( #20557 )
2016-10-03 09:55:59 -07:00
Mark Otto
82e7abcdf3
v4: Custom checkbox and radio alignment ( #20671 )
...
* Allow text of custom form labels to wrap like the default ones
* Switch from using after to force line breaks to float/clear combo in stacked custom forms
2016-09-08 21:26:19 -07:00
Catalin Zalog
990e2c5d2b
Update _custom-forms.scss
2016-05-16 17:00:45 +03:00
Mark Otto
399fdb8ebe
Merge pull request #19735 from MatthewRayfield/v4-custom-select-disabled-styling
...
Add disabled styling for .custom-select
2016-05-08 14:20:54 -07:00
Matthew Rayfield
b21750cbb7
Add disabled styling for .custom-select
2016-04-14 13:37:14 -04:00
Patrick H. Lauke
d239fbb5f2
Suppress IE/Edge additional white/blue colors for focused <select>
2016-04-12 08:06:10 +01:00
Mark Otto
63a269d78b
Fixes #19142 (follow-up to #18771 ): Restore cursor: pointer to custom radio/checkbox components
2016-02-16 20:34:31 -08:00
Chris Rebert
a1bf344c4f
Merge pull request #18925 from twbs/fixes-18922
...
Make translation of custom file input text easier
2016-02-09 01:38:14 -08:00
Mark Otto
dee1979683
move the url to the variable value
2016-02-06 18:05:24 -08:00
Mark Otto
198e34a096
Merge branch 'patch-1' of https://github.com/thekondrashov/bootstrap into thekondrashov-patch-1
2016-02-06 17:00:57 -08:00
Patrick H. Lauke
200860334d
Add pointer-events:none to custom indicator
...
Closes #18887
2016-01-19 01:34:47 +00:00
Chris Rebert
8b67d4c762
Make translation of custom file input text easier; fixes #18922
...
[skip sauce]
2016-01-17 20:53:11 -08:00
Mark Otto
c0a8a70d59
Missing ;
2016-01-17 15:32:01 -08:00
Mark Otto
5c12d5e469
add custom file vars, fix up custom select var
2016-01-17 15:21:16 -08:00
Mark Otto
6b318ef176
Hella vars for custom checkboxes and radios and selects
2016-01-16 22:29:51 -08:00
Mark Otto
4625547aea
disable it for the whole file
2016-01-06 00:00:08 -08:00
Mark Otto
069277e86f
really disable the offending one
2016-01-05 23:58:34 -08:00
Mark Otto
00e2b29041
try disabling that
2016-01-05 23:56:08 -08:00
Mark Otto
d8d67eaa6a
rewrite custom file input component to use classes over nested elements
2016-01-05 23:45:44 -08:00
Mark Otto
ac446058ff
ensure custom selects get rounded corners
2016-01-05 23:45:20 -08:00
Mark Otto
8d66b9956c
Change .c-select to .custom-select
2016-01-05 23:34:51 -08:00
Mark Otto
11df78ec74
Revamp custom form styles
...
- Less nesting with more specific classes
- New class names for most elements to avoid unnecessary and potentially confusing shorthand
- Require new class and markup for the description (though it's only necessary for disable states, it's now part of the entire component's markup for all states just in case)
- Change up colors and variables for regular and disabled states
2016-01-05 23:25:42 -08:00
markau
871a003ca2
Fixes #17918 : Add styles for disabled custom checkboxes and radios
2016-01-05 00:47:32 -08:00
Sam A. Horvath-Hunt
f7a43ed6b7
Add max-width to file browser; fixes #18651
2015-12-29 14:41:21 +00:00
Mark Otto
35389f46df
order
2015-12-08 01:06:23 -08:00
Mark Otto
9c55815898
Merge pull request #17930 from zalog/patch-12
...
v4 - .c-select shouldn't inherit white text color
2015-12-08 00:05:52 -08:00
Chris Rebert
9dacdce42c
Use $input-btn-border-width for both .form-control and .btn borders; fixes #18424
...
Both widgets need to use the same border width because of input groups.
Thus:
$btn-border-width => $input-btn-border-width
$input-border-width => $input-btn-border-width
[skip sauce]
2015-12-07 20:41:51 -08:00
Alexandr Kondrashov
568073feb9
SVG: base64 > ASCII85
2015-12-08 02:48:05 +03:00
Alexandr Kondrashov
5f316e6dc3
Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into patch-1
2015-12-08 02:18:32 +03:00
Chris Rebert
12d0f98507
Use $input-border-width for custom file input borders
...
Fixes part of #18150
[skip sauce]
[skip validator]
2015-11-29 21:13:19 -08:00
Chris Rebert
1f29c306a6
Add $input-border-width; refs #18150
2015-11-14 22:40:43 -08:00
Chris Rebert
2d02910e01
$input-border => $input-border-color
2015-11-14 22:40:43 -08:00
Catalin Zalog
fec2a1d10f
v4 - .c-select on background inherits white
...
This:
```
<div class="bg-info">
<select class="c-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
```
render this:
http://s.zalog.ro/2015-10-14-19-45-11.png
2015-10-14 19:50:03 +03:00
Alexandr Kondrashov
c9725926b2
Merge remote-tracking branch 'twbs/v4-dev' into patch-1
...
Conflicts:
scss/_custom-forms.scss
scss/_variables.scss
2015-09-11 16:43:00 +03:00
XhmikosR
9420297dc2
SCSS lint fixes.
...
[ci skip]
2015-08-25 15:38:20 +03:00
Kevin Kirsche
d51f0a4f81
Use double colons for psuedo elements
...
Fix #17052
2015-08-24 13:22:10 -04:00
Mark Otto
7d194a9bd3
wrap box-shadows in mixin in custom forms. fixes #17242
2015-08-23 23:13:14 -07:00
Mark Otto
a5bfbe0fca
fix remaining scss lint errors
2015-08-23 01:12:00 -07:00
Mark Otto
6f8f4cc92c
there is no standard appearance property
2015-08-23 01:03:51 -07:00
Mark Otto
b2dccb15d7
fix majority of scss linter errors
2015-08-23 01:00:22 -07:00
Alexandr Kondrashov
a60f8a6d79
replace PNG to SVG and compress SVGs
...
before: https://pp.vk.me/c624325/v624325775/44408/FabMA25FDDs.jpg
before(image-rendering: pixelated): https://pp.vk.me/c624325/v624325775/44416/Dzb6tO4Mmys.jpg
after: https://pp.vk.me/c624325/v624325775/4440f/imd6KcYBgGI.jpg
2015-08-22 03:47:26 +03:00
Corné Dorrestijn
c49503165a
Added comment explaining why there is no mixin here
2015-08-22 01:04:16 +02:00
Corné Dorrestijn
ac3fbdad36
Removed mixin from focus ouline box-shadow fixes #17066
2015-08-21 22:21:20 +02:00
Mark Otto
58d1297fcb
overhaul custom selects with latest from primer, shoutout
2015-08-18 19:26:18 -07:00
Mark Otto
c3373df95f
clean out comments that aren't all that helpful
2015-08-17 18:33:34 -07:00
Mark Otto
ddf4867a5e
comments and spacing
2015-04-18 11:17:32 -07:00
Chris Rebert
8e374bd010
put all :hover styles within @media (hover: hover)
2015-01-22 11:37:37 -08:00
Mark Otto
a6053b573c
override the box-shadows on active, checked, and indeterminate states
2015-01-01 12:13:24 -08:00
Mark Otto
401ace65f4
add indeterminate checkbox support
2015-01-01 12:01:55 -08:00
Mark Otto
49ac4ea0fa
fix some source code for custom forms
2014-12-31 10:07:34 -08:00
Mark Otto
b92534c632
improve code quality on custom forms
2014-12-25 15:40:24 -08:00
Mark Otto
cd60cf3386
custom forms: checkbox and radio stacked option
2014-12-24 15:45:37 -08:00
Mark Otto
e500a9a354
some cleanup
2014-12-24 04:47:08 -08:00
Mark Otto
18e08e777b
add custom forms, stub out examples for radios and checkboxes
2014-12-24 04:13:23 -08:00