mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 09:36:55 +03:00
bs sync - primarily $line-height went back to $line-height-base
This commit is contained in:
Kevin Ross
parent
82f45db96e
commit
c4636027b9
|
|
@ -22,7 +22,6 @@
|
|||
> th,
|
||||
> td {
|
||||
padding: $table-cell-padding;
|
||||
line-height: $line-height;
|
||||
vertical-align: top;
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,6 +60,19 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Additional content
|
||||
|
||||
Alerts can also contain additional HTML elements like headings and paragraphs.
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Dismissing
|
||||
|
||||
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
|
||||
|
|
|
|||
|
|
@ -222,6 +222,56 @@ Add an optional header and/or footer within a card.
|
|||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Header nav
|
||||
|
||||
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment.
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-xs-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-pills card-header-pills pull-xs-left">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Image caps
|
||||
|
||||
Similar to headers and footers, cards include top and bottom image caps.
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ As a heads up, we include this in all of Bootstrap's documentation and examples
|
|||
|
||||
### Overflow and scrolling
|
||||
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll.
|
||||
Support for `overflow: hidden;` on the `<body>` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `<body>` content will begin to scroll. See [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852).
|
||||
|
||||
### Virtual keyboards
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
form {
|
||||
// ensure enough room at the bottom of any form to display a one-line mdb-help
|
||||
margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height;
|
||||
margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height-base;
|
||||
|
||||
// reverse the above for navbars (no help expected in a navbar form)
|
||||
.navbar & {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ label.radio-inline {
|
|||
.mdb-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
|
||||
.mdb-radio-inner-circle {
|
||||
position: absolute;
|
||||
top: calc-top($line-height, $font-size-base, $mdb-radio-size); // vertical center of line-height
|
||||
top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: $mdb-radio-size;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.mdb-switch-track {
|
||||
position: absolute;
|
||||
top: calc-top($line-height, $font-size-base, $mdb-switch-height);
|
||||
top: calc-top($line-height-base, $font-size-base, $mdb-switch-height);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: $mdb-switch-width;
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@
|
|||
.checkbox label,
|
||||
label.checkbox-inline,
|
||||
.switch label {
|
||||
line-height: $line-height; // keep the same line height for radios and checkboxes
|
||||
line-height: $line-height-base; // keep the same line height for radios and checkboxes
|
||||
}
|
||||
|
||||
// Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@function calc-top($line-height, $font-size, $component-height) {
|
||||
@return (($line-height * $font-size) - $component-height) / 2; // vertical center of line-height
|
||||
@function calc-top($line-height-base, $font-size, $component-height) {
|
||||
@return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ $input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default
|
|||
$input-padding-x-lg: 0 !default; // 1.25rem !default;
|
||||
$input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !default;
|
||||
|
||||
//$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
|
||||
//$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;
|
||||
//$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
|
||||
//$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
|
||||
//
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $modal-content-xs-box-shadow: $mdb-shadow-24dp !default;
|
|||
//$modal-inner-padding: 15px !default;
|
||||
//
|
||||
//$modal-title-padding: 15px !default;
|
||||
//$modal-title-line-height: $line-height !default;
|
||||
//$modal-title-line-height: $line-height-base !default;
|
||||
//
|
||||
//$modal-content-bg: #fff !default;
|
||||
//$modal-content-border-color: rgba(0,0,0,.2) !default;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ $display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
|
|||
//$display3-weight: 300 !default;
|
||||
//$display4-weight: 300 !default;
|
||||
//
|
||||
//$line-height: 1.5 !default;
|
||||
//$line-height-base: 1.5 !default;
|
||||
//
|
||||
//$headings-margin-bottom: ($spacer / 2) !default;
|
||||
//$headings-font-family: inherit !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user