mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-25 11:04:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

added lists

Browse Source
This commit is contained in:
FezVrasta 2014-09-07 17:10:57 +02:00
parent b31ceefa3e
commit 1cf17fd05d
4 changed files with 379 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
css-compiled/material.css
View File

@ -1659,8 +1659,10 @@ select.form-control:focus {
legend {
border-bottom: 0;
}
body .well,
.container .well,
.container-fluid .well,
body .jumbotron,
.container .jumbotron,
.container-fluid .jumbotron {
background-color: #fff;
@ -1668,292 +1670,390 @@ legend {
border-radius: 2px;
border: 0;
}
body .well p,
.container .well p,
.container-fluid .well p,
body .jumbotron p,
.container .jumbotron p,
.container-fluid .jumbotron p {
font-weight: 300;
}
body .well,
.container .well,
.container-fluid .well,
body .jumbotron,
.container .jumbotron,
.container-fluid .jumbotron,
body .well-default,
.container .well-default,
.container-fluid .well-default,
body .jumbotron-default,
.container .jumbotron-default,
.container-fluid .jumbotron-default {
background-color: #ffffff;
}
body .well-primary,
.container .well-primary,
.container-fluid .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary,
.container-fluid .jumbotron-primary {
background-color: #4285f4;
}
body .well-success,
.container .well-success,
.container-fluid .well-success,
body .jumbotron-success,
.container .jumbotron-success,
.container-fluid .jumbotron-success {
background-color: #0f9d58;
}
body .well-info,
.container .well-info,
.container-fluid .well-info,
body .jumbotron-info,
.container .jumbotron-info,
.container-fluid .jumbotron-info {
background-color: #03a9f4;
}
body .well-warning,
.container .well-warning,
.container-fluid .well-warning,
body .jumbotron-warning,
.container .jumbotron-warning,
.container-fluid .jumbotron-warning {
background-color: #ff5722;
}
body .well-danger,
.container .well-danger,
.container-fluid .well-danger,
body .jumbotron-danger,
.container .jumbotron-danger,
.container-fluid .jumbotron-danger {
background-color: #f44336;
}
body .well-material-red,
.container .well-material-red,
.container-fluid .well-material-red,
body .jumbotron-material-red,
.container .jumbotron-material-red,
.container-fluid .jumbotron-material-red {
background-color: #f44336;
}
body .well-material-pink,
.container .well-material-pink,
.container-fluid .well-material-pink,
body .jumbotron-material-pink,
.container .jumbotron-material-pink,
.container-fluid .jumbotron-material-pink {
background-color: #e91e63;
}
body .well-material-purple,
.container .well-material-purple,
.container-fluid .well-material-purple,
body .jumbotron-material-purple,
.container .jumbotron-material-purple,
.container-fluid .jumbotron-material-purple {
background-color: #9c27b0;
}
body .well-material-deeppurple,
.container .well-material-deeppurple,
.container-fluid .well-material-deeppurple,
body .jumbotron-material-deeppurple,
.container .jumbotron-material-deeppurple,
.container-fluid .jumbotron-material-deeppurple {
background-color: #673ab7;
}
body .well-material-indigo,
.container .well-material-indigo,
.container-fluid .well-material-indigo,
body .jumbotron-material-indigo,
.container .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
background-color: #3f51b5;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
body .jumbotron-material-lightblue,
.container .jumbotron-material-lightblue,
.container-fluid .jumbotron-material-lightblue {
background-color: #03a9f4;
}
body .well-material-cyan,
.container .well-material-cyan,
.container-fluid .well-material-cyan,
body .jumbotron-material-cyan,
.container .jumbotron-material-cyan,
.container-fluid .jumbotron-material-cyan {
background-color: #00bcd4;
}
body .well-material-teal,
.container .well-material-teal,
.container-fluid .well-material-teal,
body .jumbotron-material-teal,
.container .jumbotron-material-teal,
.container-fluid .jumbotron-material-teal {
background-color: #009688;
}
body .well-material-lightgreen,
.container .well-material-lightgreen,
.container-fluid .well-material-lightgreen,
body .jumbotron-material-lightgreen,
.container .jumbotron-material-lightgreen,
.container-fluid .jumbotron-material-lightgreen {
background-color: #8bc34a;
}
body .well-material-lime,
.container .well-material-lime,
.container-fluid .well-material-lime,
body .jumbotron-material-lime,
.container .jumbotron-material-lime,
.container-fluid .jumbotron-material-lime {
background-color: #cddc39;
}
body .well-material-lightyellow,
.container .well-material-lightyellow,
.container-fluid .well-material-lightyellow,
body .jumbotron-material-lightyellow,
.container .jumbotron-material-lightyellow,
.container-fluid .jumbotron-material-lightyellow {
background-color: #ffeb3b;
}
body .well-material-orange,
.container .well-material-orange,
.container-fluid .well-material-orange,
body .jumbotron-material-orange,
.container .jumbotron-material-orange,
.container-fluid .jumbotron-material-orange {
background-color: #ff9800;
}
body .well-material-deeporange,
.container .well-material-deeporange,
.container-fluid .well-material-deeporange,
body .jumbotron-material-deeporange,
.container .jumbotron-material-deeporange,
.container-fluid .jumbotron-material-deeporange {
background-color: #ff5722;
}
body .well-material-grey,
.container .well-material-grey,
.container-fluid .well-material-grey,
body .jumbotron-material-grey,
.container .jumbotron-material-grey,
.container-fluid .jumbotron-material-grey {
background-color: #9e9e9e;
}
body .well-material-bluegrey,
.container .well-material-bluegrey,
.container-fluid .well-material-bluegrey,
body .jumbotron-material-bluegrey,
.container .jumbotron-material-bluegrey,
.container-fluid .jumbotron-material-bluegrey {
background-color: #607d8b;
}
body .well-material-brown,
.container .well-material-brown,
.container-fluid .well-material-brown,
body .jumbotron-material-brown,
.container .jumbotron-material-brown,
.container-fluid .jumbotron-material-brown {
background-color: #795548;
}
body .well-material-lightgrey,
.container .well-material-lightgrey,
.container-fluid .well-material-lightgrey,
body .jumbotron-material-lightgrey,
.container .jumbotron-material-lightgrey,
.container-fluid .jumbotron-material-lightgrey {
background-color: #ececec;
}
body .well,
.container .well,
.container-fluid .well,
body .jumbotron,
.container .jumbotron,
.container-fluid .jumbotron,
body .well-default,
.container .well-default,
.container-fluid .well-default,
body .jumbotron-default,
.container .jumbotron-default,
.container-fluid .jumbotron-default {
color: rgba(0, 0, 0, 0.84);
}
body .well-primary,
.container .well-primary,
.container-fluid .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary,
.container-fluid .jumbotron-primary {
color: #4285f4;
}
body .well-success,
.container .well-success,
.container-fluid .well-success,
body .jumbotron-success,
.container .jumbotron-success,
.container-fluid .jumbotron-success {
color: #0f9d58;
}
body .well-info,
.container .well-info,
.container-fluid .well-info,
body .jumbotron-info,
.container .jumbotron-info,
.container-fluid .jumbotron-info {
color: #03a9f4;
}
body .well-warning,
.container .well-warning,
.container-fluid .well-warning,
body .jumbotron-warning,
.container .jumbotron-warning,
.container-fluid .jumbotron-warning {
color: #ff5722;
}
body .well-danger,
.container .well-danger,
.container-fluid .well-danger,
body .jumbotron-danger,
.container .jumbotron-danger,
.container-fluid .jumbotron-danger {
color: #f44336;
}
body .well-material-red,
.container .well-material-red,
.container-fluid .well-material-red,
body .jumbotron-material-red,
.container .jumbotron-material-red,
.container-fluid .jumbotron-material-red {
color: #f44336;
}
body .well-material-pink,
.container .well-material-pink,
.container-fluid .well-material-pink,
body .jumbotron-material-pink,
.container .jumbotron-material-pink,
.container-fluid .jumbotron-material-pink {
color: #e91e63;
}
body .well-material-purple,
.container .well-material-purple,
.container-fluid .well-material-purple,
body .jumbotron-material-purple,
.container .jumbotron-material-purple,
.container-fluid .jumbotron-material-purple {
color: #9c27b0;
}
body .well-material-deeppurple,
.container .well-material-deeppurple,
.container-fluid .well-material-deeppurple,
body .jumbotron-material-deeppurple,
.container .jumbotron-material-deeppurple,
.container-fluid .jumbotron-material-deeppurple {
color: #673ab7;
}
body .well-material-indigo,
.container .well-material-indigo,
.container-fluid .well-material-indigo,
body .jumbotron-material-indigo,
.container .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
color: #3f51b5;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
body .jumbotron-material-lightblue,
.container .jumbotron-material-lightblue,
.container-fluid .jumbotron-material-lightblue {
color: #03a9f4;
}
body .well-material-cyan,
.container .well-material-cyan,
.container-fluid .well-material-cyan,
body .jumbotron-material-cyan,
.container .jumbotron-material-cyan,
.container-fluid .jumbotron-material-cyan {
color: #00bcd4;
}
body .well-material-teal,
.container .well-material-teal,
.container-fluid .well-material-teal,
body .jumbotron-material-teal,
.container .jumbotron-material-teal,
.container-fluid .jumbotron-material-teal {
color: #009688;
}
body .well-material-lightgreen,
.container .well-material-lightgreen,
.container-fluid .well-material-lightgreen,
body .jumbotron-material-lightgreen,
.container .jumbotron-material-lightgreen,
.container-fluid .jumbotron-material-lightgreen {
color: #8bc34a;
}
body .well-material-lime,
.container .well-material-lime,
.container-fluid .well-material-lime,
body .jumbotron-material-lime,
.container .jumbotron-material-lime,
.container-fluid .jumbotron-material-lime {
color: #cddc39;
}
body .well-material-lightyellow,
.container .well-material-lightyellow,
.container-fluid .well-material-lightyellow,
body .jumbotron-material-lightyellow,
.container .jumbotron-material-lightyellow,
.container-fluid .jumbotron-material-lightyellow {
color: #ffeb3b;
}
body .well-material-orange,
.container .well-material-orange,
.container-fluid .well-material-orange,
body .jumbotron-material-orange,
.container .jumbotron-material-orange,
.container-fluid .jumbotron-material-orange {
color: #ff9800;
}
body .well-material-deeporange,
.container .well-material-deeporange,
.container-fluid .well-material-deeporange,
body .jumbotron-material-deeporange,
.container .jumbotron-material-deeporange,
.container-fluid .jumbotron-material-deeporange {
color: #ff5722;
}
body .well-material-grey,
.container .well-material-grey,
.container-fluid .well-material-grey,
body .jumbotron-material-grey,
.container .jumbotron-material-grey,
.container-fluid .jumbotron-material-grey {
color: #9e9e9e;
}
body .well-material-bluegrey,
.container .well-material-bluegrey,
.container-fluid .well-material-bluegrey,
body .jumbotron-material-bluegrey,
.container .jumbotron-material-bluegrey,
.container-fluid .jumbotron-material-bluegrey {
color: #607d8b;
}
body .well-material-brown,
.container .well-material-brown,
.container-fluid .well-material-brown,
body .jumbotron-material-brown,
.container .jumbotron-material-brown,
.container-fluid .jumbotron-material-brown {
color: #795548;
}
body .well-material-lightgrey,
.container .well-material-lightgrey,
.container-fluid .well-material-lightgrey,
body .jumbotron-material-lightgrey,
.container .jumbotron-material-lightgrey,
.container-fluid .jumbotron-material-lightgrey {
color: #ececec;
@ -1973,16 +2073,97 @@ legend {
margin-bottom: 10px;
}
.list-group {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 2px;
border-radius: 0;
}
.list-group .list-group-item:last-child {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
.list-group .list-group-item {
background-color: transparent;
overflow: hidden;
border: 0;
border-radius: 0;
padding: 0 16px;
}
.list-group .list-group-item:first-child {
border-top-right-radius: 2px;
boborder-top-right-radius: 2px;
.list-group .list-group-item .row-picture,
.list-group .list-group-item .row-action-primary {
float: left;
display: inline-block;
padding-right: 16px;
}
.list-group .list-group-item .row-picture img,
.list-group .list-group-item .row-action-primary img,
.list-group .list-group-item .row-picture i,
.list-group .list-group-item .row-action-primary i,
.list-group .list-group-item .row-picture label,
.list-group .list-group-item .row-action-primary label {
display: block;
width: 56px;
height: 56px;
}
.list-group .list-group-item .row-picture img,
.list-group .list-group-item .row-action-primary img {
background: rgba(0, 0, 0, 0.1);
padding: 1px;
}
.list-group .list-group-item .row-picture img.circle,
.list-group .list-group-item .row-action-primary img.circle {
border-radius: 100%;
}
.list-group .list-group-item .row-picture i,
.list-group .list-group-item .row-action-primary i {
background: rgba(0, 0, 0, 0.25);
border-radius: 100%;
text-align: center;
line-height: 56px;
font-size: 20px;
color: white;
}
.list-group .list-group-item .row-picture label,
.list-group .list-group-item .row-action-primary label {
margin-left: 7px;
margin-right: -7px;
margin-top: 5px;
margin-bottom: -5px;
}
.list-group .list-group-item .row-content {
display: inline-block;
width: calc(100% - 92px);
min-height: 66px;
}
.list-group .list-group-item .row-content .action-secondary {
position: absolute;
right: 16px;
top: 16px;
}
.list-group .list-group-item .row-content .action-secondary i {
font-size: 20px;
color: rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.list-group .list-group-item .row-content .action-secondary ~ * {
max-width: calc(100% - 30px);
}
.list-group .list-group-item .row-content .least-content {
position: absolute;
right: 16px;
top: 0px;
color: rgba(0, 0, 0, 0.54);
font-size: 14px;
}
.list-group .list-group-item .list-group-item-heading {
color: rgba(0, 0, 0, 0.77);
font-size: 20px;
line-height: 29px;
}
.list-group .list-group-separator {
clear: both;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
.list-group .list-group-separator:before {
content: "";
width: calc(100% - 90px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
float: right;
}
.navbar {
background-color: #4285f4;

139
demo/index.html
View File

@ -508,10 +508,10 @@
<h1 id="type">Icons</h1>
<p>Material Design for Bootstrap includes 490 original Material Design icons!<br>
These icons are extracted from the original Google sources and are licensed under BSD license.<br>
Them are provided as an iconic font easy to use.
Them are provided as an iconic font easy to use.
</p>
<p>Variations are available for every icon, included for the original Bootstrap icons.<br>
<br>Example:<br><br>
<br>Example:<br><br>
<i class="icon icon-material-favorite icon-material-pink" style="font-size: 40pt;"></i>
<i class="icon icon-material-favorite icon-material-lime" style="font-size: 40pt;"></i>
<i class="icon icon-material-favorite icon-material-teal" style="font-size: 40pt;"></i>
@ -1755,48 +1755,117 @@
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="bs-component">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="badge">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="badge">1</span>
Morbi leo risus
</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item active">
Cras justo odio
</a>
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in
</a>
<a href="javascript:void(0)" class="list-group-item">Morbi leo risus
</a>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="least-content">15m</div>
<h4 class="list-group-item-heading">Tile with a label</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="least-content">10m</div>
<h4 class="list-group-item-heading">Tile with a label</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="least-content">8m</div>
<h4 class="list-group-item-heading">Tile with a label</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="javascript:void(0)" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="action-secondary"><i class="icon-material-info"></i></div>
<h4 class="list-group-item-heading">Tile with an icon</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="action-secondary"><i class="icon-material-info"></i></div>
<h4 class="list-group-item-heading">Tile with an icon</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-action-primary">
<i class="icon-material-folder"></i>
</div>
<div class="row-content">
<div class="action-secondary"><i class="icon-material-info"></i></div>
<h4 class="list-group-item-heading">Tile with an icon</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bs-component">
<div class="list-group">
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/1" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with avatar</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-picture">
<img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with another avatar</h4>
<p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
<div class="list-group-item">
<div class="row-action-primary checkbox">
<label><input type="checkbox"></label>
</div>
<div class="row-content">
<h4 class="list-group-item-heading">Tile with a checkbox in it</h4>
<p class="list-group-item-text">Donec id elit non mi risus varius blandit.</p>
</div>
</div>
<div class="list-group-separator"></div>
</div>
</div>
</div>

84
less/lists.less Normal file
View File

@ -0,0 +1,84 @@
// main: material.less
.list-group {
border-radius: 0;
.list-group-item {
background-color: transparent;
overflow: hidden;
border: 0;
border-radius: 0;
padding: 0 16px;
.row-picture, .row-action-primary {
float: left;
display: inline-block;
padding-right: 16px;
img, i, label {
display: block;
width: 56px;
height: 56px;
}
img {
background: rgba(0,0,0,0.1);
padding: 1px;
&.circle {
border-radius: 100%;
}
}
i {
background: rgba(0,0,0,0.25);
border-radius: 100%;
text-align: center;
line-height: 56px;
font-size: 20px;
color: white;
}
label {
margin-left: 7px;
margin-right: -7px;
margin-top: 5px;
margin-bottom: -5px;
}
}
.row-content {
display: inline-block;
width: ~"calc(100% - 92px)";
min-height: 66px;
.action-secondary {
position: absolute;
right: 16px;
top: 16px;
i {
font-size: 20px;
color: rgba(0,0,0,0.25);
cursor: pointer;
}
}
.action-secondary ~ * {
max-width: ~"calc(100% - 30px)";
}
.least-content {
position: absolute;
right: 16px;
top: 0px;
color: rgba(0,0,0,0.54);
font-size: 14px;
}
}
.list-group-item-heading {
color: rgba(0, 0, 0, 0.77);
font-size: 20px;
line-height: 29px;
}
}
.list-group-separator {
clear: both;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
&:before {
content: "";
width: ~"calc(100% - 90px)";
border-bottom: 1px solid rgba(0,0,0,0.1);
float: right;
}
}
}

14
less/material.less
View File

@ -69,18 +69,8 @@ body, .container, .container-fluid {
}
}
.list-group {
.shadow-z-2();
border-radius: 2px;
.list-group-item:last-child {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
.list-group-item:first-child {
border-top-right-radius: 2px;
boborder-top-right-radius: 2px;
}
}
// Lists
@import "lists.less";
// Navbar
@import "navbar.less";