mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-02 21:04:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

Changed list-group bg to inherit, that seems to make more sense

Browse Source
This commit is contained in:
Kevin Ross 2016-01-12 10:10:24 -06:00
parent db90cc5dab
commit 6e01cf4ba9
2 changed files with 87 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
docs/material-design/list-groups.md
View File

@ -7,71 +7,12 @@ group: material-design
Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve
the varieties specified. ([Specification](https://www.google.com/design/spec/components/lists.html#lists-specs)) the varieties specified. ([Specification](https://www.google.com/design/spec/components/lists.html#lists-specs))
The material classes introduced are:
<table>
<thead>
<tr>
<th>Classes</th>
<th>BS Equivalent</th>
<th>Differences</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.mdb-list-group-item</code>
</td>
<td class="text-nowrap">
<code>.list-group-item</code>
</td>
<td>
{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.mdb-list-group-col</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.right</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Flex layout marker - additional class needed when only one icon/label is present and it should be right aligned. Only valid as a child of `.mdb-list-group-item`{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.mdb-list-group-sm</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %}
</td>
</tr>
</tbody>
</table>
## Contents ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
## Single line ## Single line
### Text ### Text
@ -266,3 +207,89 @@ The material classes introduced are:
</ul> </ul>
{% endexample %} {% endexample %}
## Classes
<table>
<thead>
<tr>
<th>Classes</th>
<th>BS Equivalent</th>
<th>Differences</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.mdb-list-group-item</code>
</td>
<td class="text-nowrap">
<code>.list-group-item</code>
</td>
<td>
{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.mdb-list-group-col</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.right</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Flex layout marker - additional class needed when only one icon/label is present and it should be right aligned. Only valid as a child of `.mdb-list-group-item`{% endmarkdown %}
</td>
</tr>
<tr>
<td>
<code>.mdb-list-group-sm</code>
</td>
<td class="text-nowrap">
{% markdown %}None{% endmarkdown %}
</td>
<td>
{% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %}
</td>
</tr>
</tbody>
</table>
## Variables
See `variables/_list-group.scss` for a complete list of variables. Key variables are below:
<table>
<thead>
<tr>
<th>Variable</th>
<th>Value</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>$list-group-bg</code>
</td>
<td>
<code>inherit</code>
</td>
<td>
{% markdown %}Original value was `#fff`, but it seemed that too often list-groups needed the background to be inherited from the underlying container.{% endmarkdown %}
</td>
</tr>
</tbody>
</table>

2
scss/variables/bootstrap/_list-group.scss
View File

@ -1,6 +1,6 @@
// List group // List group
//$list-group-bg: #fff !default; $list-group-bg: inherit !default; // #fff
//$list-group-border-color: #ddd !default; //$list-group-border-color: #ddd !default;
$list-group-border-width: 0 !default; // $border-width $list-group-border-width: 0 !default; // $border-width
$list-group-border-radius: 0 !default; // $border-radius $list-group-border-radius: 0 !default; // $border-radius