mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 11:29:10 +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
|
||||
pages:
|
||||
- title: Test
|
||||
- title: List group
|
||||
- title: Navs
|
||||
- title: Buttons
|
||||
- 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-pack",
|
||||
"flex-align",
|
||||
"flex-shrink",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@import "radios";
|
||||
@import "forms";
|
||||
@import "input-group";
|
||||
@import "lists";
|
||||
@import "list-group";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@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
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
$gray-lighter: rgba($black, 0.12) !default;
|
||||
$gray-light: rgba($black, 0.26) !default;
|
||||
$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;
|
||||
|
||||
|
|
@ -17,7 +17,6 @@ $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
|
|||
|
||||
//---
|
||||
// Customized BS variables
|
||||
$enable-flex: true;
|
||||
@import "variables/bootstrap/components";
|
||||
@import "variables/bootstrap/spacing";
|
||||
|
||||
|
|
@ -27,6 +26,7 @@ $enable-flex: true;
|
|||
@import "variables/bootstrap/card";
|
||||
@import "variables/bootstrap/code";
|
||||
@import "variables/bootstrap/forms";
|
||||
@import "variables/bootstrap/list-group";
|
||||
@import "variables/bootstrap/nav";
|
||||
@import "variables/bootstrap/state";
|
||||
@import "variables/bootstrap/type";
|
||||
|
|
@ -34,6 +34,7 @@ $enable-flex: true;
|
|||
|
||||
|
||||
// import their vars after customization for use below
|
||||
$enable-flex: true;
|
||||
@import "../bower_components/bootstrap/scss/variables";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -323,7 +323,7 @@ $grey-100: #f5f5f5 !default;
|
|||
$grey-200: #eee !default;
|
||||
$grey-300: #e0e0e0 !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-700: #616161 !default;
|
||||
$grey-800: #424242 !default;
|
||||
|
|
@ -352,5 +352,5 @@ $blue-grey-a700: #455a64 !default;
|
|||
$blue-grey: $blue-grey-500 !default;
|
||||
|
||||
|
||||
$black: #000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||
$white: #fff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
||||
$black: #000; //$rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||
$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