mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 03:11:19 +02:00
Code Issues Releases Wiki Activity

Merge pull request #18771 from twbs/v4-custom-forms-revamp

Browse Source 
v4: Custom forms (disabled state, revamp, etc)
This commit is contained in:
Mark Otto
2016-01-06 00:02:25 -08:00
parent c081d4802d 4625547aea
commit ff07ba3af4
3 changed files with 145 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
docs/components/forms.md
View File

@@ -607,33 +607,33 @@ Each checkbox and radio is wrapped in a `<label>` for three reasons:
- It provides a helpful and semantic wrapper to help us replace the default `<input>`s. - It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
- It triggers the state of the `<input>` automatically, meaning no JavaScript is required. - It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element. We hide the default `<input>` with `opacity` and use the `.custom-control-indicator` to build a new custom form indicator in its place. Unfortunately we can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control. We use the sibling selector (`~`) for all our `<input>` states—like `:checked`—to properly style our custom form indicator. When combined with the `.custom-control-description` class, we can also style the text for each item based on the `<input>`'s state.
In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices. In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
#### Checkboxes #### Checkboxes
{% example html %} {% example html %}
<label class="c-input c-checkbox"> <label class="custom-control custom-checkbox">
<input type="checkbox"> <input type="checkbox" class="custom-control-input">
<span class="c-indicator"></span> <span class="custom-control-indicator"></span>
Check this custom checkbox <span class="custom-control-description">Check this custom checkbox</span>
</label> </label>
{% endexample %} {% endexample %}
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it). Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="bd-example bd-example-indeterminate"> <div class="bd-example bd-example-indeterminate">
<label class="c-input c-checkbox"> <label class="custom-control custom-checkbox">
<input type="checkbox"> <input type="checkbox" class="custom-control-input">
<span class="c-indicator"></span> <span class="custom-control-indicator"></span>
Check this custom checkbox <span class="custom-control-description">Check this custom checkbox</span>
</label> </label>
</div> </div>
If you're using jQuery, something like this should suffice: If you're using jQuery, something like this should suffice:
{% highlight js %} {% highlight js %}
$('.your-checkbox').prop('indeterminate', true) $('.your-checkbox').prop('indeterminate', true)
@@ -642,43 +642,62 @@ $('.your-checkbox').prop('indeterminate', true)
#### Radios #### Radios
{% example html %} {% example html %}
<label class="c-input c-radio"> <label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio"> <input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="c-indicator"></span> <span class="custom-control-indicator"></span>
Toggle this custom radio <span class="custom-control-description">Toggle this custom radio</span>
</label> </label>
<label class="c-input c-radio"> <label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio"> <input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="c-indicator"></span> <span class="custom-control-indicator"></span>
Or toggle this other custom radio <span class="custom-control-description">Or toggle this other custom radio</span>
</label> </label>
{% endexample %} {% endexample %}
#### Stacked #### Disabled
Custom checkboxes and radios are inline to start. Add a parent with class `.c-inputs-stacked` to ensure each form control is on separate lines. Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
{% example html %} {% example html %}
<div class="c-inputs-stacked"> <label class="custom-control custom-checkbox">
<label class="c-input c-radio"> <input type="checkbox" class="custom-control-input" disabled>
<input id="radioStacked1" name="radio-stacked" type="radio"> <span class="custom-control-indicator"></span>
<span class="c-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span>
Toggle this custom radio </label>
<label class="custom-control custom-radio">
<input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
{% endexample %}
#### Stacked
Custom checkboxes and radios are inline to start. Add a parent with class `.custom-controls-stacked` to ensure each form control is on separate lines.
{% example html %}
<div class="custom-controls-stacked">
<label class="custom-control custom-radio">
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label> </label>
<label class="c-input c-radio"> <label class="custom-control custom-radio">
<input id="radioStacked2" name="radio-stacked" type="radio"> <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
<span class="c-indicator"></span> <span class="custom-control-indicator"></span>
Or toggle this other custom radio <span class="custom-control-description">Or toggle this other custom radio</span>
</label> </label>
</div> </div>
{% endexample %} {% endexample %}
### Select menu ### Select menu
Custom `<select>` menus need only a custom class, `.c-select` to trigger the custom styles. Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.
{% example html %} {% example html %}
<select class="c-select"> <select class="custom-select">
<option selected>Open this select menu</option> <option selected>Open this select menu</option>
<option value="1">One</option> <option value="1">One</option>
<option value="2">Two</option> <option value="2">Two</option>
@@ -690,14 +709,16 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
### File browser ### File browser
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
{% example html %} {% example html %}
<label class="file"> <label class="custom-file">
<input type="file" id="file"> <input type="file" id="file" class="custom-file-input">
<span class="file-custom"></span> <span class="custom-file-control"></span>
</label> </label>
{% endexample %} {% endexample %}
The file input is the most gnarly of the bunch. Here's how it works: Here's how it works:
- We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser. - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser.
- We hide the default file `<input>` via `opacity`. - We hide the default file `<input>` via `opacity`.
@@ -706,5 +727,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
- We declare a `height` on the `<input>` for proper spacing for surrounding content. - We declare a `height` on the `<input>` for proper spacing for surrounding content.
In other words, it's an entirely custom element, all generated via CSS. In other words, it's an entirely custom element, all generated via CSS.
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.

89
scss/_custom-forms.scss
View File

@@ -1,3 +1,5 @@
// scss-lint:disable PropertyCount
// Embedded icons from Open Iconic. // Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury. // Released under MIT and copyright 2014 Waybury.
// http://useiconic.com/open // http://useiconic.com/open
@@ -7,38 +9,49 @@
// //
// Base class takes care of all the key behavioral aspects. // Base class takes care of all the key behavioral aspects.
.c-input { .custom-control {
position: relative; position: relative;
display: inline; display: inline;
padding-left: 1.5rem; padding-left: 1.5rem;
color: #555; color: #555;
cursor: pointer;
> input { + .custom-control {
margin-left: 1rem;
}
}
.custom-control-input {
position: absolute; position: absolute;
z-index: -1; // Put the input behind the label so it doesn't overlay text z-index: -1; // Put the input behind the label so it doesn't overlay text
opacity: 0; opacity: 0;
&:checked ~ .c-indicator { &:checked ~ .custom-control-indicator {
color: #fff; color: #fff;
background-color: #0074d9; background-color: #0074d9;
@include box-shadow(none); @include box-shadow(none);
} }
&:focus ~ .c-indicator { &:focus ~ .custom-control-indicator {
// the mixin is not used here to make sure there is feedback // the mixin is not used here to make sure there is feedback
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
} }
&:active ~ .c-indicator { &:active ~ .custom-control-indicator {
color: #fff; color: #fff;
background-color: #84c6ff; background-color: #84c6ff;
@include box-shadow(none); @include box-shadow(none);
} }
&:disabled {
~ .custom-control-indicator {
cursor: not-allowed;
background-color: $custom-form-bg-color-disabled;
} }
+ .c-input { ~ .custom-control-description {
margin-left: 1rem; color: $custom-form-description-color-disabled;
cursor: not-allowed;
}
} }
} }
@@ -46,9 +59,9 @@
// //
// Generates a shadow element to create our makeshift checkbox/radio background. // Generates a shadow element to create our makeshift checkbox/radio background.
.c-indicator { .custom-control-indicator {
position: absolute; position: absolute;
top: 0; top: .0625rem;
left: 0; left: 0;
display: block; display: block;
width: 1rem; width: 1rem;
@@ -58,27 +71,27 @@
color: #eee; color: #eee;
text-align: center; text-align: center;
user-select: none; user-select: none;
background-color: #eee; background-color: $custom-form-bg-color;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
background-size: 50% 50%; background-size: 50% 50%;
@include box-shadow(inset 0 .125rem .125rem rgba(0,0,0,.1)); @include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1));
} }
// Checkboxes // Checkboxes
// //
// Tweak just a few things for checkboxes. // Tweak just a few things for checkboxes.
.c-checkbox { .custom-checkbox {
.c-indicator { .custom-control-indicator {
border-radius: .25rem; border-radius: .25rem;
} }
input:checked ~ .c-indicator { .custom-control-input:checked ~ .custom-control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
} }
input:indeterminate ~ .c-indicator { .custom-control-input:indeterminate ~ .custom-control-indicator {
background-color: #0074d9; background-color: #0074d9;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K);
@include box-shadow(none); @include box-shadow(none);
@@ -89,12 +102,12 @@
// //
// Tweak just a few things for radios. // Tweak just a few things for radios.
.c-radio { .custom-radio {
.c-indicator { .custom-control-indicator {
border-radius: 50%; border-radius: 50%;
} }
input:checked ~ .c-indicator { .custom-control-input:checked ~ .custom-control-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
} }
} }
@@ -105,8 +118,8 @@
// By default radios and checkboxes are `inline-block` with no additional spacing // By default radios and checkboxes are `inline-block` with no additional spacing
// set. Use these optional classes to tweak the layout. // set. Use these optional classes to tweak the layout.
.c-inputs-stacked { .custom-controls-stacked {
.c-input { .custom-control {
display: inline; display: inline;
&::after { &::after {
@@ -115,7 +128,7 @@
content: ""; content: "";
} }
+ .c-input { + .custom-control {
margin-left: 0; margin-left: 0;
} }
} }
@@ -129,7 +142,7 @@
// //
// Includes IE9-specific hacks (noted by ` \9`). // Includes IE9-specific hacks (noted by ` \9`).
.c-select { .custom-select {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
padding: .375rem 1.75rem .375rem .75rem; padding: .375rem 1.75rem .375rem .75rem;
@@ -140,6 +153,7 @@
background-image: none \9; background-image: none \9;
background-size: 8px 10px; background-size: 8px 10px;
border: $input-btn-border-width solid $input-border-color; border: $input-btn-border-width solid $input-border-color;
@include border-radius($border-radius);
// Use vendor prefixes as `appearance` isn't part of the CSS spec. // Use vendor prefixes as `appearance` isn't part of the CSS spec.
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -156,7 +170,7 @@
} }
} }
.c-select-sm { .custom-select-sm {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
font-size: 12px; font-size: 12px;
@@ -172,21 +186,27 @@
// //
// Custom file input. // Custom file input.
.file { .custom-file {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
height: 2.5rem; height: 2.5rem;
cursor: pointer; cursor: pointer;
} }
.file input {
.custom-file-input {
min-width: 14rem; min-width: 14rem;
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
filter: alpha(opacity = 0); filter: alpha(opacity = 0);
opacity: 0; opacity: 0;
&:focus ~ .custom-file-control {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
}
} }
.file-custom {
.custom-file-control {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@@ -201,11 +221,12 @@
border: $input-btn-border-width solid #ddd; border: $input-btn-border-width solid #ddd;
border-radius: .25rem; border-radius: .25rem;
@include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05)); @include box-shadow(inset 0 .2rem .4rem rgba(0,0,0,.05));
}
.file-custom::after { &::after {
content: "Choose file..."; content: "Choose file...";
} }
.file-custom::before {
&::before {
position: absolute; position: absolute;
top: -.075rem; top: -.075rem;
right: -.075rem; right: -.075rem;
@@ -220,9 +241,5 @@
background-color: #eee; background-color: #eee;
border: $input-btn-border-width solid #ddd; border: $input-btn-border-width solid #ddd;
border-radius: 0 .25rem .25rem 0; border-radius: 0 .25rem .25rem 0;
} }
// Focus state
.file input:focus ~ .file-custom {
@include box-shadow(0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9);
} }

5
scss/_variables.scss
View File

@@ -322,6 +322,11 @@ $input-group-addon-border-color: $input-border-color !default;
$cursor-disabled: not-allowed !default; $cursor-disabled: not-allowed !default;
$custom-form-bg-color: #ddd !default;
$custom-form-bg-color-disabled: #eee !default;
$custom-form-description-color-disabled: #767676 !default;
// Form validation icons // Form validation icons
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default; $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default; $form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;