Skip to content

Commit

Permalink
New Lists doc
Browse files Browse the repository at this point in the history
  • Loading branch information
djibe committed May 9, 2020
1 parent b8bb444 commit f8cdc00
Show file tree
Hide file tree
Showing 12 changed files with 569 additions and 20 deletions.
1 change: 1 addition & 0 deletions _data/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
- title: Elevation and shadows
- title: Expansion panels
- title: Icons
- title: Lists
- title: Menu
- title: Navigation drawer
- title: Pickers
Expand Down
30 changes: 20 additions & 10 deletions assets/scss/material/_expansion-panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
border-radius: $expansion-panel-border-radius;
display: flex;
flex-direction: column;
list-style-type: none; // Reset Firefox ::marker
margin-bottom: 0;
padding: $spacer-sm 0;
}
Expand All @@ -15,7 +16,6 @@
align-items: center;
background-color: $expansion-panel-bg;
border: 0;
// border-radius: 0 2rem 2rem 0;
color: $expansion-panel-color;
display: block;
font-size: $expansion-panel-font-size;
Expand All @@ -28,13 +28,12 @@
transition: background-color 15ms linear;

@include hover-focus-active {
//color: $expansion-panel-color;
text-decoration: none;
}

&.active {
background-color: $expansion-panel-bg-selected;
color: $expansion-panel-color;
color: $expansion-panel-color-selected;
z-index: 2;

&:hover {
Expand Down Expand Up @@ -78,11 +77,10 @@
line-height: $list-group-item-graphic-width;
margin: $spacer-sm $spacer $spacer-sm 0;
width: $list-group-item-graphic-width;
}

// TODO: extensive testing with svgs
path:first-of-type {
fill: $list-group-item-graphic-color;
}
.list-group-shaped & {
border-radius: 0 2rem 2rem 0;
}
}

Expand All @@ -102,13 +100,14 @@
margin-right: 2 * $spacer;
width: 1.5rem;

path:first-of-type {
fill: $black-secondary;
.active & {
color: $expansion-panel-color-selected;
}
}

// Text block for long content or two-line lists
.list-group-item-text {
@include text-truncate;
@include text-truncate-flex;

:first-child {
display: block;
Expand Down Expand Up @@ -151,6 +150,7 @@
}
}

// Trailing text
.list-group-item-meta {
color: $black-hint;
margin-right: 0;
Expand All @@ -161,6 +161,16 @@
}
}

// List divider
.list-group-divider {
border: none;
border-bottom-color: $border-color;
border-bottom-style: solid;
border-bottom-width: $border-width;
height: 0;
margin: 0;
}

.list-group-item-action {
//color: $expansion-panel-color;
text-align: inherit;
Expand Down
1 change: 1 addition & 0 deletions assets/scss/variables/_variable-material.scss
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ $expansion-panel-border-color: $border-color !default;
$expansion-panel-border-radius: $border-radius !default;
$expansion-panel-border-width: $border-width !default;
$expansion-panel-color: $black-primary !default;
$expansion-panel-color-selected: theme-color(primary) !default;
$expansion-panel-color-disabled: $black-hint !default;
//$expansion-panel-elevation-shadow: map-get($elevation-shadows, 1) !default;
$expansion-panel-font-size: $font-size-base !default;
Expand Down
22 changes: 17 additions & 5 deletions css/material.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/material.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/material.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/material.min.css.map

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions docs/4.4/material/app-bars-top.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
layout: docs
title: App bars top
description: The top app bar displays information and actions relating to the current screen.
group: material
---

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

It can transform into a contextual action bar.

<div class="list-group my-2 my-lg-5">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/" target="_blank" class="list-group-item list-group-item-action d-flex list-group-item-two-line font-weight-bold">
<span class="list-group-item-icon lgi-icon-bs"></span>
<span class="list-group-item-text">
<span>Bootstrap documentation: Navbar</span>
<span>Most of the details have been covered here</span>
</span>
</a>
<a href="https://material.io/components/app-bars-top" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
<span class="list-group-item-icon lgi-icon-md"></span>
Material Design guidelines: App bars: top</a>
<a href="https://material-components.github.io/material-components-web-catalog/#/component/tabs" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
<span class="list-group-item-icon lgi-icon-mdc"></span>
Material Components for the web: Top Bar</a>
</div>
131 changes: 131 additions & 0 deletions docs/4.4/material/buttons-floating-action.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
---
layout: docs
title: Buttons - Floating action button
meta_description: Material design Floating action Buttons for Bootstrap 4 using some extra CSS classes for a perfect imitation.
description: A floating action button (FAB) represents the primary action of a screen.
group: material
redirect_from: "/docs/4.4/material/"
toc: true
---

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

Only use a FAB if it is the most suitable way to present a screen's primary action.

<div class="list-group mt-2 mt-lg-5">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/" target="_blank" class="list-group-item list-group-item-action d-flex list-group-item-two-line font-weight-bold">
<span class="list-group-item-icon lgi-icon-bs"></span>
<span class="list-group-item-text">
<span>Bootstrap documentation: Buttons</span>
<span>Most of the details have been covered here</span>
</span>
</a>
<a href="https://material.io/components/buttons-floating-action-button" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
<span class="list-group-item-icon lgi-icon-md"></span>
Material Design guidelines: Buttons: floating action button</a>
<a href="https://material.io/design/layout/applying-density.html" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
<span class="list-group-item-icon lgi-icon-md"></span>
Material Design guidelines: Applying density</a>
<a href="https://material-components.github.io/material-components-web-catalog/#/component/fab" target="_blank" class="list-group-item list-group-item-action d-flex font-weight-bold">
<span class="list-group-item-icon lgi-icon-mdc"></span>
Material Components for the web: Floating Action Button</a>
</div>

## Floating action buttons

A floating action button represents the primary action in an application, it is used for a promoted action.

{% capture example %}

<button class="btn btn-secondary btn-float" type="button"><i class="material-icons">favorite_border</i></button>
{% endcapture %}
{% include example.html content=example %}

### Positioning

For a bottom right placement, wrap your floating button in a `<div class="fab-container">...</div>`.

{% capture example %}
<p class="font-weight-bold text-center">The demo is at the bottom right of the screen.</p>

<div class="fab-actions">
<button class="d-none d-lg-flex btn btn-primary btn-float btn-float-extended" type="button" data-toggle="modal" data-target="#">
<span class="material-icons">message</span>Comment</button>
<button class="d-lg-none btn btn-primary btn-float" type="button" data-toggle="modal" data-target="#">
<span class="material-icons">message</span></button>
</div>
{% endcapture %}
{% include example.html content=example %}

### Colors

{% capture example %}

<button class="btn btn-float my-1" type="button"><i class="material-icons">favorite_border</i></button>
{% for color in site.data.theme-colors %}
<button class="btn btn-float btn-{{ color.name }} my-1" type="button"><i class="material-icons">favorite_border</i></button>
{% endfor %}
{% endcapture %}
{% include example.html content=example %}

### Dropdown

Floating action buttons can also work with dropdown menus to fling out related actions:

{% capture example %}

<div class="btn-float-dropdown dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
<div class="dropdown-menu">
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}

Or flinging them upwards:

{% capture example %}

<div class="btn-float-dropdown dropup">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
<div class="dropdown-menu">
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
</div>
</div>
{% endcapture %}
{% include example.html content=example %}

### Sizes

A smaller sized, i.e. mini floating action button, is also available.

{% capture example %}

<button class="btn btn-secondary btn-float btn-sm" type="button"><i class="material-icons">favorite_border</i></button>
{% endcapture %}
{% include example.html content=example %}

### Extended FAB

A larger FAB button has been introduced in recent Material guidelines. Add `btn-float-extended` class to your actual FAB.

To place icon after the label, use Bootstrap's flex utily `order-2`.

{% capture example %}

<button class="btn btn-secondary btn-float btn-float-extended" type="button"><i class="material-icons">add</i>Create</button>
<button class="btn btn-secondary btn-float btn-float-extended" type="button"><i class="material-icons order-2">add</i>Create</button>
{% endcapture %}
{% include example.html content=example %}

Extended FAB (without Icon)
{% capture example %}

<button class="btn btn-secondary btn-float btn-float-extended" type="button">Create</button>
{% endcapture %}
{% include example.html content=example %}
Loading

0 comments on commit f8cdc00

Please sign in to comment.