mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 19:44:07 +03:00
initial mdb-list-group layout using flexbox - more work to be done to be within spec.
This commit is contained in:
Kevin Ross
parent
04250b5ff7
commit
dac3c98b47
|
|
@ -26,6 +26,7 @@
|
||||||
- title: Material Design
|
- title: Material Design
|
||||||
pages:
|
pages:
|
||||||
- title: Test
|
- title: Test
|
||||||
|
- title: List group
|
||||||
- title: Navs
|
- title: Navs
|
||||||
- title: Buttons
|
- title: Buttons
|
||||||
- title: Forms
|
- title: Forms
|
||||||
|
|
|
||||||
120
docs/material-design/list-group.md
Normal file
120
docs/material-design/list-group.md
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
---
|
||||||
|
layout: docs
|
||||||
|
title: List group
|
||||||
|
group: material-design
|
||||||
|
---
|
||||||
|
|
||||||
|
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))
|
||||||
|
|
||||||
|
## Contents
|
||||||
|
|
||||||
|
* Will be replaced with the ToC, excluding the "Contents" header
|
||||||
|
{:toc}
|
||||||
|
|
||||||
|
|
||||||
|
## Single line
|
||||||
|
|
||||||
|
### Text
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<ul class="mdb-list-group">
|
||||||
|
<li class="mdb-list-group-item">Inbox</li>
|
||||||
|
<a href="#" class="mdb-list-group-item">Link item</a>
|
||||||
|
<button type="button" class="list-group-item">Button item</button>
|
||||||
|
<a href="#" class="mdb-list-group-item disabled">Disabled item</a>
|
||||||
|
</ul>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
|
### Icons and labels
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<ul class="mdb-list-group">
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<i class="material-icons">inbox</i>
|
||||||
|
Icon left
|
||||||
|
</li>
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<i class="material-icons">inbox</i>
|
||||||
|
Icons left and right
|
||||||
|
<i class="material-icons">face</i>
|
||||||
|
</li>
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
Icon right
|
||||||
|
<i class="material-icons right">face</i>
|
||||||
|
</li>
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
Label pill to the right
|
||||||
|
<span class="label label-default label-pill right">14</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Double line
|
||||||
|
|
||||||
|
### Text
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<ul class="mdb-list-group">
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Some text</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Some text</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Some text</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
|
### Icons and labels
|
||||||
|
|
||||||
|
{% example html %}
|
||||||
|
<ul class="mdb-list-group">
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<i class="material-icons">inbox</i>
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Icon left</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<i class="material-icons">inbox</i>
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Icons left and right</p>
|
||||||
|
</div>
|
||||||
|
<i class="material-icons">face</i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Icon right</p>
|
||||||
|
</div>
|
||||||
|
<i class="material-icons right">face</i>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="mdb-list-group-item">
|
||||||
|
<div class="mdb-list-group-col">
|
||||||
|
<p class="list-group-item-heading">List group item heading</p>
|
||||||
|
<p class="list-group-item-text">Label pill to the right</p>
|
||||||
|
</div>
|
||||||
|
<span class="label label-default label-pill right">14</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{% endexample %}
|
||||||
|
|
||||||
|
|
@ -119,6 +119,7 @@ linters:
|
||||||
"flex-order",
|
"flex-order",
|
||||||
"flex-pack",
|
"flex-pack",
|
||||||
"flex-align",
|
"flex-align",
|
||||||
|
"flex-shrink",
|
||||||
"padding",
|
"padding",
|
||||||
"padding-top",
|
"padding-top",
|
||||||
"padding-right",
|
"padding-right",
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
@import "radios";
|
@import "radios";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "input-group";
|
@import "input-group";
|
||||||
@import "lists";
|
@import "list-group";
|
||||||
@import "nav";
|
@import "nav";
|
||||||
@import "navbar";
|
@import "navbar";
|
||||||
@import "alerts";
|
@import "alerts";
|
||||||
|
|
|
||||||
145
scss/_list-group.scss
Normal file
145
scss/_list-group.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
||||||
|
// https://www.google.com/design/spec/components/lists.html#lists-specs
|
||||||
|
|
||||||
|
|
||||||
|
// Flex layout on a list group (some of this code could be omitted if BS v4 actually implements flex on list-group)
|
||||||
|
.mdb-list-group {
|
||||||
|
//
|
||||||
|
@extend .list-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdb-list-group-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mdb-list-group-item {
|
||||||
|
@extend .list-group-item;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
|
||||||
|
//------
|
||||||
|
// NOTE: there are many variations of icons in a list, each one of these rules exist for a reason.
|
||||||
|
|
||||||
|
// first icon on the left
|
||||||
|
.material-icons:first-child {
|
||||||
|
margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin)
|
||||||
|
}
|
||||||
|
|
||||||
|
// second icon, or only icon marked as 'right', or any direct child element marked as right
|
||||||
|
> .right,
|
||||||
|
.material-icons.right, // need the specificity
|
||||||
|
.material-icons ~ .material-icons:last-child {
|
||||||
|
margin-right: 0; // some variations actually match the first-child
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
//------
|
||||||
|
|
||||||
|
|
||||||
|
.list-group-item-heading {
|
||||||
|
//font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-item-text {
|
||||||
|
font-size: .875rem;
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
// overflow: hidden;
|
||||||
|
// background-color: transparent;
|
||||||
|
// border: 0;
|
||||||
|
// &.baseline {
|
||||||
|
// border-bottom: 1px solid #cecece;
|
||||||
|
// &:last-child {
|
||||||
|
// border-bottom: 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .row-picture, .row-action-primary {
|
||||||
|
// //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
|
||||||
|
// display: inline-block;
|
||||||
|
// padding-right: 16px;
|
||||||
|
// img, i, label {
|
||||||
|
// display: block;
|
||||||
|
// width: 56px;
|
||||||
|
// height: 56px;
|
||||||
|
// }
|
||||||
|
// img {
|
||||||
|
// padding: 1px;
|
||||||
|
// background: rgba($black, 0.1);
|
||||||
|
// &.mdb-radio-outer-circle {
|
||||||
|
// border-radius: 100%;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// i {
|
||||||
|
// font-size: 20px;
|
||||||
|
// line-height: 56px;
|
||||||
|
// color: $white;
|
||||||
|
// text-align: center;
|
||||||
|
// background: rgba($black, 0.25);
|
||||||
|
// border-radius: 100%;
|
||||||
|
// }
|
||||||
|
// label {
|
||||||
|
// margin: 5px -7px -5px 7px;
|
||||||
|
// .checkbox-decorator {
|
||||||
|
// left: -10px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .row-content {
|
||||||
|
// display: inline-block;
|
||||||
|
// width: unquote("calc(100% - 92px)");
|
||||||
|
// min-height: 66px;
|
||||||
|
// .action-secondary {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 16px;
|
||||||
|
// right: 16px;
|
||||||
|
// i {
|
||||||
|
// font-size: 20px;
|
||||||
|
// color: rgba($black, 0.25);
|
||||||
|
// cursor: pointer;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .action-secondary ~ * {
|
||||||
|
// max-width: unquote("calc(100% - 30px)");
|
||||||
|
// }
|
||||||
|
// .least-content {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// right: 16px;
|
||||||
|
// font-size: 14px;
|
||||||
|
// color: rgba($black, 0.54);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .list-group-item-heading {
|
||||||
|
// font-size: 20px;
|
||||||
|
// line-height: 29px;
|
||||||
|
// color: rgba($black, 0.77);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .list-group-item.active {
|
||||||
|
// &:hover, &:focus {
|
||||||
|
// background: rgba($black, .15);
|
||||||
|
// outline: 10px solid rgba($black, .15);
|
||||||
|
// }
|
||||||
|
// .list-group-item-heading, .list-group-item-text {
|
||||||
|
// color: $gray-dark;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// .list-group-separator {
|
||||||
|
// margin-top: 10px;
|
||||||
|
// margin-bottom: 10px;
|
||||||
|
// overflow: hidden;
|
||||||
|
// clear: both;
|
||||||
|
// &::before {
|
||||||
|
// float: right;
|
||||||
|
// width: unquote("calc(100% - 90px)");
|
||||||
|
// content: "";
|
||||||
|
// border-bottom: 1px solid rgba($black, 0.1);
|
||||||
|
// }
|
||||||
|
}
|
||||||
100
scss/_lists.scss
100
scss/_lists.scss
|
|
@ -1,100 +0,0 @@
|
||||||
//.list-group {
|
|
||||||
// border-radius: 0;
|
|
||||||
// .list-group-item {
|
|
||||||
// padding: 0 16px;
|
|
||||||
// overflow: hidden;
|
|
||||||
// background-color: transparent;
|
|
||||||
// border: 0;
|
|
||||||
// border-radius: 0;
|
|
||||||
// &.baseline {
|
|
||||||
// border-bottom: 1px solid #cecece;
|
|
||||||
// &:last-child {
|
|
||||||
// border-bottom: 0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .row-picture, .row-action-primary {
|
|
||||||
// //float: left; WARNING: float can't be used with display: inline-block. Certain properties shouldn't be used with certain display property values. (display-property-grouping) Browsers: All
|
|
||||||
// display: inline-block;
|
|
||||||
// padding-right: 16px;
|
|
||||||
// img, i, label {
|
|
||||||
// display: block;
|
|
||||||
// width: 56px;
|
|
||||||
// height: 56px;
|
|
||||||
// }
|
|
||||||
// img {
|
|
||||||
// padding: 1px;
|
|
||||||
// background: rgba($black, 0.1);
|
|
||||||
// &.mdb-radio-outer-circle {
|
|
||||||
// border-radius: 100%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// i {
|
|
||||||
// font-size: 20px;
|
|
||||||
// line-height: 56px;
|
|
||||||
// color: $white;
|
|
||||||
// text-align: center;
|
|
||||||
// background: rgba($black, 0.25);
|
|
||||||
// border-radius: 100%;
|
|
||||||
// }
|
|
||||||
// label {
|
|
||||||
// margin: 5px -7px -5px 7px;
|
|
||||||
// .checkbox-decorator {
|
|
||||||
// left: -10px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .row-content {
|
|
||||||
// display: inline-block;
|
|
||||||
// width: unquote("calc(100% - 92px)");
|
|
||||||
// min-height: 66px;
|
|
||||||
// .action-secondary {
|
|
||||||
// position: absolute;
|
|
||||||
// top: 16px;
|
|
||||||
// right: 16px;
|
|
||||||
// i {
|
|
||||||
// font-size: 20px;
|
|
||||||
// color: rgba($black, 0.25);
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .action-secondary ~ * {
|
|
||||||
// max-width: unquote("calc(100% - 30px)");
|
|
||||||
// }
|
|
||||||
// .least-content {
|
|
||||||
// position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// right: 16px;
|
|
||||||
// font-size: 14px;
|
|
||||||
// color: rgba($black, 0.54);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// .list-group-item-heading {
|
|
||||||
// font-size: 20px;
|
|
||||||
// line-height: 29px;
|
|
||||||
// color: rgba($black, 0.77);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .list-group-item.active {
|
|
||||||
// &:hover, &:focus {
|
|
||||||
// background: rgba($black, .15);
|
|
||||||
// outline: 10px solid rgba($black, .15);
|
|
||||||
// }
|
|
||||||
// .list-group-item-heading, .list-group-item-text {
|
|
||||||
// color: $gray-dark;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .list-group-separator {
|
|
||||||
// margin-top: 10px;
|
|
||||||
// margin-bottom: 10px;
|
|
||||||
// overflow: hidden;
|
|
||||||
// clear: both;
|
|
||||||
// &::before {
|
|
||||||
// float: right;
|
|
||||||
// width: unquote("calc(100% - 90px)");
|
|
||||||
// content: "";
|
|
||||||
// border-bottom: 1px solid rgba($black, 0.1);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
// This needs review, including colors: https://www.google.com/design/spec/style/typography.html#typography-styles
|
||||||
|
|
||||||
// adjust up the h6 weight
|
// adjust up the h6 weight
|
||||||
h6 {
|
h6 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
$gray-lighter: rgba($black, 0.12) !default;
|
$gray-lighter: rgba($black, 0.12) !default;
|
||||||
$gray-light: rgba($black, 0.26) !default;
|
$gray-light: rgba($black, 0.26) !default;
|
||||||
$gray: rgba($black, .54) !default; // spec color
|
$gray: rgba($black, .54) !default; // spec color
|
||||||
$gray-dark: rgba($black, 0.87) !default;
|
$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
|
||||||
|
|
||||||
$mdb-font-weight-base: 400;
|
$mdb-font-weight-base: 400;
|
||||||
|
|
||||||
|
|
@ -17,7 +17,6 @@ $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
|
||||||
|
|
||||||
//---
|
//---
|
||||||
// Customized BS variables
|
// Customized BS variables
|
||||||
$enable-flex: true;
|
|
||||||
@import "variables/bootstrap/components";
|
@import "variables/bootstrap/components";
|
||||||
@import "variables/bootstrap/spacing";
|
@import "variables/bootstrap/spacing";
|
||||||
|
|
||||||
|
|
@ -27,6 +26,7 @@ $enable-flex: true;
|
||||||
@import "variables/bootstrap/card";
|
@import "variables/bootstrap/card";
|
||||||
@import "variables/bootstrap/code";
|
@import "variables/bootstrap/code";
|
||||||
@import "variables/bootstrap/forms";
|
@import "variables/bootstrap/forms";
|
||||||
|
@import "variables/bootstrap/list-group";
|
||||||
@import "variables/bootstrap/nav";
|
@import "variables/bootstrap/nav";
|
||||||
@import "variables/bootstrap/state";
|
@import "variables/bootstrap/state";
|
||||||
@import "variables/bootstrap/type";
|
@import "variables/bootstrap/type";
|
||||||
|
|
@ -34,6 +34,7 @@ $enable-flex: true;
|
||||||
|
|
||||||
|
|
||||||
// import their vars after customization for use below
|
// import their vars after customization for use below
|
||||||
|
$enable-flex: true;
|
||||||
@import "../bower_components/bootstrap/scss/variables";
|
@import "../bower_components/bootstrap/scss/variables";
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -323,7 +323,7 @@ $grey-100: #f5f5f5 !default;
|
||||||
$grey-200: #eee !default;
|
$grey-200: #eee !default;
|
||||||
$grey-300: #e0e0e0 !default;
|
$grey-300: #e0e0e0 !default;
|
||||||
$grey-400: #bdbdbd !default;
|
$grey-400: #bdbdbd !default;
|
||||||
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
|
$grey-500: #9e9e9e; //$rgb-grey-500: "158, 158, 158" !default;
|
||||||
$grey-600: #757575 !default;
|
$grey-600: #757575 !default;
|
||||||
$grey-700: #616161 !default;
|
$grey-700: #616161 !default;
|
||||||
$grey-800: #424242 !default;
|
$grey-800: #424242 !default;
|
||||||
|
|
@ -352,5 +352,5 @@ $blue-grey-a700: #455a64 !default;
|
||||||
$blue-grey: $blue-grey-500 !default;
|
$blue-grey: $blue-grey-500 !default;
|
||||||
|
|
||||||
|
|
||||||
$black: #000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
$black: #000; //$rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||||
$white: #fff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
$white: #fff; //$rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
||||||
|
|
|
||||||
21
scss/variables/bootstrap/_list-group.scss
Normal file
21
scss/variables/bootstrap/_list-group.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
// List group
|
||||||
|
|
||||||
|
//$list-group-bg: #fff !default;
|
||||||
|
//$list-group-border-color: #ddd !default;
|
||||||
|
//$list-group-border-width: $border-width !default;
|
||||||
|
$list-group-border-radius: 0 !default; // $border-radius
|
||||||
|
//
|
||||||
|
//$list-group-hover-bg: #f5f5f5 !default;
|
||||||
|
//$list-group-active-color: $component-active-color !default;
|
||||||
|
//$list-group-active-bg: $component-active-bg !default;
|
||||||
|
//$list-group-active-border: $list-group-active-bg !default;
|
||||||
|
//$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
|
||||||
|
//
|
||||||
|
//$list-group-disabled-color: $gray-light !default;
|
||||||
|
//$list-group-disabled-bg: $gray-lighter !default;
|
||||||
|
//$list-group-disabled-text-color: $list-group-disabled-color !default;
|
||||||
|
//
|
||||||
|
//$list-group-link-color: #555 !default;
|
||||||
|
//$list-group-link-hover-color: $list-group-link-color !default;
|
||||||
|
//$list-group-link-heading-color: #333 !default;
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user