mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
bs sync
This commit is contained in:
Kevin Ross
parent
f44f5f29a1
commit
15275cbe79
|
|
@ -316,7 +316,7 @@
|
|||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin: 1rem -1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2);
|
||||
background-color: #f7f7f9;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
|
|||
|
|
@ -74,12 +74,12 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
|
|||
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-*-outline` ones to remove all background images and colors on any button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary-outline">Primary</button>
|
||||
<button type="button" class="btn btn-secondary-outline">Secondary</button>
|
||||
<button type="button" class="btn btn-success-outline">Success</button>
|
||||
<button type="button" class="btn btn-info-outline">Info</button>
|
||||
<button type="button" class="btn btn-warning-outline">Warning</button>
|
||||
<button type="button" class="btn btn-danger-outline">Danger</button>
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -323,6 +323,61 @@ Cards include their own variant classes for quickly changing the `background-col
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Outline variants
|
||||
|
||||
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-outline-primary text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-secondary text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-success text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-info text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-warning text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline-danger text-xs-center">
|
||||
<div class="card-block">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Groups
|
||||
|
||||
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox) can switch that to use `display: flex;` and provide the same effect.
|
||||
|
|
|
|||
|
|
@ -554,7 +554,7 @@ Block help text—for below inputs or for longer lines of help text—can be eas
|
|||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<p id="passwordHelpBlock" class="text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -618,33 +618,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 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.
|
||||
|
||||
#### Checkboxes
|
||||
|
||||
{% example html %}
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="c-indicator"></span>
|
||||
Check this custom checkbox
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
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">
|
||||
<label class="c-input c-checkbox">
|
||||
<input type="checkbox">
|
||||
<span class="c-indicator"></span>
|
||||
Check this custom checkbox
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
If you're using jQuery, something like this should suffice:
|
||||
If you're using jQuery, something like this should suffice:
|
||||
|
||||
{% highlight js %}
|
||||
$('.your-checkbox').prop('indeterminate', true)
|
||||
|
|
@ -653,43 +653,62 @@ $('.your-checkbox').prop('indeterminate', true)
|
|||
#### Radios
|
||||
|
||||
{% example html %}
|
||||
<label class="c-input c-radio">
|
||||
<input id="radio1" name="radio" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Toggle this custom radio
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radio1" name="radio" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Toggle this custom radio</span>
|
||||
</label>
|
||||
<label class="c-input c-radio">
|
||||
<input id="radio2" name="radio" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Or toggle this other custom radio
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radio2" name="radio" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||||
</label>
|
||||
{% 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 %}
|
||||
<div class="c-inputs-stacked">
|
||||
<label class="c-input c-radio">
|
||||
<input id="radioStacked1" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Toggle this custom radio
|
||||
<label class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Check this custom checkbox</span>
|
||||
</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 class="c-input c-radio">
|
||||
<input id="radioStacked2" name="radio-stacked" type="radio">
|
||||
<span class="c-indicator"></span>
|
||||
Or toggle this other custom radio
|
||||
<label class="custom-control custom-radio">
|
||||
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Or toggle this other custom radio</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### 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 %}
|
||||
<select class="c-select">
|
||||
<select class="custom-select">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
|
@ -701,14 +720,16 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
|
|||
|
||||
### 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 %}
|
||||
<label class="file">
|
||||
<input type="file" id="file">
|
||||
<span class="file-custom"></span>
|
||||
<label class="custom-file">
|
||||
<input type="file" id="file" class="custom-file-input">
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
{% 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 hide the default file `<input>` via `opacity`.
|
||||
|
|
@ -717,5 +738,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.
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-success-outline" type="submit">Search</button>
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
|
@ -142,7 +142,7 @@ Here are some examples to show what we mean.
|
|||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-info-outline" type="submit">Search</button>
|
||||
<button class="btn btn-outline-info" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
|
|
@ -163,7 +163,7 @@ Here are some examples to show what we mean.
|
|||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-secondary-outline" type="submit">Search</button>
|
||||
<button class="btn btn-outline-secondary" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
||||
|
|
@ -184,7 +184,7 @@ Here are some examples to show what we mean.
|
|||
</ul>
|
||||
<form class="form-inline pull-xs-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-primary-outline" type="submit">Search</button>
|
||||
<button class="btn btn-outline-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user