diff --git a/docs/assets/scss/mdb/_component-examples.scss b/docs/assets/scss/mdb/_component-examples.scss index b10ad3f8..a0c4addc 100644 --- a/docs/assets/scss/mdb/_component-examples.scss +++ b/docs/assets/scss/mdb/_component-examples.scss @@ -5,3 +5,25 @@ .highlight { background-color: $code-bg; } + +// Helpers +.bd-example > { + //.center-block:not(img) { + // max-width: 200px; + // padding: .5rem; + // background-color: #eee; + //} + + .bg-primary, + .bg-success, + .bg-info, + .bg-warning, + .bg-danger, + .bg-inverse { + &:not(.navbar) { + padding: 0; //.5rem; + //margin-top: 0; //.5rem; + //margin-bottom: 0; //.5rem; + } + } +} diff --git a/docs/material-design/navs.md b/docs/material-design/navs.md index df7c8949..3062422d 100644 --- a/docs/material-design/navs.md +++ b/docs/material-design/navs.md @@ -14,8 +14,6 @@ Navigation available in Bootstrap share general markup and styles, from the base ## Tabs -Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior). - {% example html %} {% endexample %} - -## Pills - -Take that same HTML, but use `.nav-pills` instead: - -{% example html %} - -{% endexample %} - -## Stacked pills - -Just add `.nav-stacked` to the `.nav.nav-pills`. - -{% example html %} - -{% endexample %} - -## Using dropdowns - -Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage). - -### Tabs with dropdowns - -{% example html %} - -{% endexample %} - -### Pills with dropdowns - -{% example html %} - -{% endexample %} - -## JavaScript behavior - -Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus. - -
- -
-
-

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

-
-
-

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

-
- - -
-
- -### Using data attributes - -You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`. - -
-{% highlight html %} - - - - -
-
...
-
...
-
...
-
...
-
-{% endhighlight %} -
- -### Via JavaScript - -Enable tabbable tabs via JavaScript (each tab needs to be activated individually): - -{% highlight js %} -$('#myTab a').click(function (e) { - e.preventDefault() - $(this).tab('show') -}) -{% endhighlight %} - -You can activate individual tabs in several ways: - -{% highlight js %} -$('#myTab a[href="#profile"]').tab('show') // Select tab by name -$('#myTab a:first').tab('show') // Select first tab -$('#myTab a:last').tab('show') // Select last tab -$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed) -{% endhighlight %} - -### Fade effect - -To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to make the initial content visible. - -{% highlight html %} -
-
...
-
...
-
...
-
...
-
-{% endhighlight %} - -### Methods - -#### $().tab - -Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. - -{% highlight html %} - - -
-
...
-
...
-
...
-
...
-
- - -{% endhighlight %} - -### Events - -When showing a new tab, the events fire in the following order: - -1. `hide.bs.tab` (on the current active tab) -2. `show.bs.tab` (on the to-be-shown tab) -3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event) -4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event) - -If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event TypeDescription
show.bs.tabThis event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tabThis event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tabThis event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tabThis event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
- -{% highlight js %} -$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - e.target // newly activated tab - e.relatedTarget // previous active tab -}) -{% endhighlight %} diff --git a/scss/_nav.scss b/scss/_nav.scss index bb0359e9..ae032f46 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -24,10 +24,17 @@ .nav-link { border-bottom: $mdb-nav-tabs-border-size solid transparent; } + + // colors + @include mdb-tabs-color($mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color, $mdb-nav-tabs-disabled-link-color, $mdb-nav-tabs-disabled-link-color-hover); + + &.bg-primary { + @include mdb-tabs-color($mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color, $mdb-nav-tabs-primary-disabled-link-color, $mdb-nav-tabs-primary-disabled-link-color-hover); + } + + &.bg-inverse { + @include mdb-tabs-color($mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color, $mdb-nav-tabs-inverse-disabled-link-color, $mdb-nav-tabs-inverse-disabled-link-color-hover); + } } -// colors -@include mdb-tabs-color('', $mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color); -@include mdb-tabs-color('.bg-primary', $mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color); -@include mdb-tabs-color('.bg-inverse', $mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color); diff --git a/scss/_variables.scss b/scss/_variables.scss index 33cc892e..10031e02 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -10,6 +10,7 @@ $mdb-font-weight-base: 400; // wondering if any of these could still be refactored out, but are definitely in use. $mdb-text-color-inverse: rgba($white, 0.84) !default; +$mdb-text-color-inverse-light: rgba($white, 0.54) !default; $mdb-label-color: $gray-light !default; $mdb-label-color-focus: $brand-primary !default; $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary diff --git a/scss/mixins/_navs.scss b/scss/mixins/_navs.scss index e79b48bd..9b85d40a 100644 --- a/scss/mixins/_navs.scss +++ b/scss/mixins/_navs.scss @@ -1,17 +1,22 @@ -@mixin mdb-tabs-color($parent, $color, $active-color, $active-border) { - #{$parent} { - &.nav-tabs { - .nav-link { +@mixin mdb-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) { + .nav-link { - color: $color; + color: $color; - &.active { - color: $active-color; - border-color: $active-border; - @include hover-focus { - border-color: $active-border; - } - } + &.active { + color: $active-color; + border-color: $active-border; + @include hover-focus { + border-color: $active-border; + } + } + + // Disabled state lightens text and removes hover/tab effects + &.disabled { + color: $disabled-link-color; + + @include plain-hover-focus { + color: $disabled-link-hover-color; } } } diff --git a/scss/variables/bootstrap/_nav.scss b/scss/variables/bootstrap/_nav.scss index 60ed7f23..43bfc459 100644 --- a/scss/variables/bootstrap/_nav.scss +++ b/scss/variables/bootstrap/_nav.scss @@ -3,22 +3,30 @@ $mdb-nav-font-weight: 500 !default; // $mdb-font-weight-base $mdb-nav-font-size: .875rem !default; // 14 +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; // tabs $mdb-nav-tabs-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14 -$mdb-nav-tabs-border-size: .143rem !default; // 2px +$mdb-nav-tabs-border-size: .214rem !default; // 3px $mdb-nav-tabs-color: $gray !default; -$mdb-nav-tabs-active-border-color: $brand-primary !default; $mdb-nav-tabs-active-color: $gray-dark !default; +$mdb-nav-tabs-active-border-color: $brand-primary !default; +$mdb-nav-tabs-disabled-link-color: $nav-disabled-link-color !default; +$mdb-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default; $mdb-nav-tabs-primary-color: $mdb-text-color-inverse !default; -$mdb-nav-tabs-primary-active-border-color: #fff !default; $mdb-nav-tabs-primary-active-color: #fff !default; +$mdb-nav-tabs-primary-active-border-color: #fff !default; +$mdb-nav-tabs-primary-disabled-link-color: $mdb-text-color-inverse-light !default; +$mdb-nav-tabs-primary-disabled-link-color-hover: $mdb-text-color-inverse-light !default; $mdb-nav-tabs-inverse-color: $mdb-text-color-inverse !default; -$mdb-nav-tabs-inverse-active-border-color: #fff !default; $mdb-nav-tabs-inverse-active-color: #fff !default; +$mdb-nav-tabs-inverse-active-border-color: #fff !default; +$mdb-nav-tabs-inverse-disabled-link-color: $mdb-text-color-inverse-light !default; +$mdb-nav-tabs-inverse-disabled-link-color-hover: $mdb-text-color-inverse-light !default; //$nav-item-margin: .2rem !default; @@ -30,8 +38,6 @@ $mdb-nav-tabs-inverse-active-color: #fff !default; //$nav-link-hover-bg: $gray-lighter !default; -//$nav-disabled-link-color: $gray-light !default; -//$nav-disabled-link-hover-color: $gray-light !default; // //$nav-tabs-border-color: #ddd !default; //