mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +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 116dc4f32b
commit 6c2a617d8e
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 { legend {
border-bottom: 0; border-bottom: 0;
} }
body .well,
.container .well, .container .well,
.container-fluid .well, .container-fluid .well,
body .jumbotron,
.container .jumbotron, .container .jumbotron,
.container-fluid .jumbotron { .container-fluid .jumbotron {
background-color: #fff; background-color: #fff;
@ -1668,292 +1670,390 @@ legend {
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
} }
body .well p,
.container .well p, .container .well p,
.container-fluid .well p, .container-fluid .well p,
body .jumbotron p,
.container .jumbotron p, .container .jumbotron p,
.container-fluid .jumbotron p { .container-fluid .jumbotron p {
font-weight: 300; font-weight: 300;
} }
body .well,
.container .well, .container .well,
.container-fluid .well, .container-fluid .well,
body .jumbotron,
.container .jumbotron, .container .jumbotron,
.container-fluid .jumbotron, .container-fluid .jumbotron,
body .well-default,
.container .well-default, .container .well-default,
.container-fluid .well-default, .container-fluid .well-default,
body .jumbotron-default,
.container .jumbotron-default, .container .jumbotron-default,
.container-fluid .jumbotron-default { .container-fluid .jumbotron-default {
background-color: #ffffff; background-color: #ffffff;
} }
body .well-primary,
.container .well-primary, .container .well-primary,
.container-fluid .well-primary, .container-fluid .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary, .container .jumbotron-primary,
.container-fluid .jumbotron-primary { .container-fluid .jumbotron-primary {
background-color: #4285f4; background-color: #4285f4;
} }
body .well-success,
.container .well-success, .container .well-success,
.container-fluid .well-success, .container-fluid .well-success,
body .jumbotron-success,
.container .jumbotron-success, .container .jumbotron-success,
.container-fluid .jumbotron-success { .container-fluid .jumbotron-success {
background-color: #0f9d58; background-color: #0f9d58;
} }
body .well-info,
.container .well-info, .container .well-info,
.container-fluid .well-info, .container-fluid .well-info,
body .jumbotron-info,
.container .jumbotron-info, .container .jumbotron-info,
.container-fluid .jumbotron-info { .container-fluid .jumbotron-info {
background-color: #03a9f4; background-color: #03a9f4;
} }
body .well-warning,
.container .well-warning, .container .well-warning,
.container-fluid .well-warning, .container-fluid .well-warning,
body .jumbotron-warning,
.container .jumbotron-warning, .container .jumbotron-warning,
.container-fluid .jumbotron-warning { .container-fluid .jumbotron-warning {
background-color: #ff5722; background-color: #ff5722;
} }
body .well-danger,
.container .well-danger, .container .well-danger,
.container-fluid .well-danger, .container-fluid .well-danger,
body .jumbotron-danger,
.container .jumbotron-danger, .container .jumbotron-danger,
.container-fluid .jumbotron-danger { .container-fluid .jumbotron-danger {
background-color: #f44336; background-color: #f44336;
} }
body .well-material-red,
.container .well-material-red, .container .well-material-red,
.container-fluid .well-material-red, .container-fluid .well-material-red,
body .jumbotron-material-red,
.container .jumbotron-material-red, .container .jumbotron-material-red,
.container-fluid .jumbotron-material-red { .container-fluid .jumbotron-material-red {
background-color: #f44336; background-color: #f44336;
} }
body .well-material-pink,
.container .well-material-pink, .container .well-material-pink,
.container-fluid .well-material-pink, .container-fluid .well-material-pink,
body .jumbotron-material-pink,
.container .jumbotron-material-pink, .container .jumbotron-material-pink,
.container-fluid .jumbotron-material-pink { .container-fluid .jumbotron-material-pink {
background-color: #e91e63; background-color: #e91e63;
} }
body .well-material-purple,
.container .well-material-purple, .container .well-material-purple,
.container-fluid .well-material-purple, .container-fluid .well-material-purple,
body .jumbotron-material-purple,
.container .jumbotron-material-purple, .container .jumbotron-material-purple,
.container-fluid .jumbotron-material-purple { .container-fluid .jumbotron-material-purple {
background-color: #9c27b0; background-color: #9c27b0;
} }
body .well-material-deeppurple,
.container .well-material-deeppurple, .container .well-material-deeppurple,
.container-fluid .well-material-deeppurple, .container-fluid .well-material-deeppurple,
body .jumbotron-material-deeppurple,
.container .jumbotron-material-deeppurple, .container .jumbotron-material-deeppurple,
.container-fluid .jumbotron-material-deeppurple { .container-fluid .jumbotron-material-deeppurple {
background-color: #673ab7; background-color: #673ab7;
} }
body .well-material-indigo,
.container .well-material-indigo, .container .well-material-indigo,
.container-fluid .well-material-indigo, .container-fluid .well-material-indigo,
body .jumbotron-material-indigo,
.container .jumbotron-material-indigo, .container .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo { .container-fluid .jumbotron-material-indigo {
background-color: #3f51b5; background-color: #3f51b5;
} }
body .well-material-lightblue,
.container .well-material-lightblue, .container .well-material-lightblue,
.container-fluid .well-material-lightblue, .container-fluid .well-material-lightblue,
body .jumbotron-material-lightblue,
.container .jumbotron-material-lightblue, .container .jumbotron-material-lightblue,
.container-fluid .jumbotron-material-lightblue { .container-fluid .jumbotron-material-lightblue {
background-color: #03a9f4; background-color: #03a9f4;
} }
body .well-material-cyan,
.container .well-material-cyan, .container .well-material-cyan,
.container-fluid .well-material-cyan, .container-fluid .well-material-cyan,
body .jumbotron-material-cyan,
.container .jumbotron-material-cyan, .container .jumbotron-material-cyan,
.container-fluid .jumbotron-material-cyan { .container-fluid .jumbotron-material-cyan {
background-color: #00bcd4; background-color: #00bcd4;
} }
body .well-material-teal,
.container .well-material-teal, .container .well-material-teal,
.container-fluid .well-material-teal, .container-fluid .well-material-teal,
body .jumbotron-material-teal,
.container .jumbotron-material-teal, .container .jumbotron-material-teal,
.container-fluid .jumbotron-material-teal { .container-fluid .jumbotron-material-teal {
background-color: #009688; background-color: #009688;
} }
body .well-material-lightgreen,
.container .well-material-lightgreen, .container .well-material-lightgreen,
.container-fluid .well-material-lightgreen, .container-fluid .well-material-lightgreen,
body .jumbotron-material-lightgreen,
.container .jumbotron-material-lightgreen, .container .jumbotron-material-lightgreen,
.container-fluid .jumbotron-material-lightgreen { .container-fluid .jumbotron-material-lightgreen {
background-color: #8bc34a; background-color: #8bc34a;
} }
body .well-material-lime,
.container .well-material-lime, .container .well-material-lime,
.container-fluid .well-material-lime, .container-fluid .well-material-lime,
body .jumbotron-material-lime,
.container .jumbotron-material-lime, .container .jumbotron-material-lime,
.container-fluid .jumbotron-material-lime { .container-fluid .jumbotron-material-lime {
background-color: #cddc39; background-color: #cddc39;
} }
body .well-material-lightyellow,
.container .well-material-lightyellow, .container .well-material-lightyellow,
.container-fluid .well-material-lightyellow, .container-fluid .well-material-lightyellow,
body .jumbotron-material-lightyellow,
.container .jumbotron-material-lightyellow, .container .jumbotron-material-lightyellow,
.container-fluid .jumbotron-material-lightyellow { .container-fluid .jumbotron-material-lightyellow {
background-color: #ffeb3b; background-color: #ffeb3b;
} }
body .well-material-orange,
.container .well-material-orange, .container .well-material-orange,
.container-fluid .well-material-orange, .container-fluid .well-material-orange,
body .jumbotron-material-orange,
.container .jumbotron-material-orange, .container .jumbotron-material-orange,
.container-fluid .jumbotron-material-orange { .container-fluid .jumbotron-material-orange {
background-color: #ff9800; background-color: #ff9800;
} }
body .well-material-deeporange,
.container .well-material-deeporange, .container .well-material-deeporange,
.container-fluid .well-material-deeporange, .container-fluid .well-material-deeporange,
body .jumbotron-material-deeporange,
.container .jumbotron-material-deeporange, .container .jumbotron-material-deeporange,
.container-fluid .jumbotron-material-deeporange { .container-fluid .jumbotron-material-deeporange {
background-color: #ff5722; background-color: #ff5722;
} }
body .well-material-grey,
.container .well-material-grey, .container .well-material-grey,
.container-fluid .well-material-grey, .container-fluid .well-material-grey,
body .jumbotron-material-grey,
.container .jumbotron-material-grey, .container .jumbotron-material-grey,
.container-fluid .jumbotron-material-grey { .container-fluid .jumbotron-material-grey {
background-color: #9e9e9e; background-color: #9e9e9e;
} }
body .well-material-bluegrey,
.container .well-material-bluegrey, .container .well-material-bluegrey,
.container-fluid .well-material-bluegrey, .container-fluid .well-material-bluegrey,
body .jumbotron-material-bluegrey,
.container .jumbotron-material-bluegrey, .container .jumbotron-material-bluegrey,
.container-fluid .jumbotron-material-bluegrey { .container-fluid .jumbotron-material-bluegrey {
background-color: #607d8b; background-color: #607d8b;
} }
body .well-material-brown,
.container .well-material-brown, .container .well-material-brown,
.container-fluid .well-material-brown, .container-fluid .well-material-brown,
body .jumbotron-material-brown,
.container .jumbotron-material-brown, .container .jumbotron-material-brown,
.container-fluid .jumbotron-material-brown { .container-fluid .jumbotron-material-brown {
background-color: #795548; background-color: #795548;
} }
body .well-material-lightgrey,
.container .well-material-lightgrey, .container .well-material-lightgrey,
.container-fluid .well-material-lightgrey, .container-fluid .well-material-lightgrey,
body .jumbotron-material-lightgrey,
.container .jumbotron-material-lightgrey, .container .jumbotron-material-lightgrey,
.container-fluid .jumbotron-material-lightgrey { .container-fluid .jumbotron-material-lightgrey {
background-color: #ececec; background-color: #ececec;
} }
body .well,
.container .well, .container .well,
.container-fluid .well, .container-fluid .well,
body .jumbotron,
.container .jumbotron, .container .jumbotron,
.container-fluid .jumbotron, .container-fluid .jumbotron,
body .well-default,
.container .well-default, .container .well-default,
.container-fluid .well-default, .container-fluid .well-default,
body .jumbotron-default,
.container .jumbotron-default, .container .jumbotron-default,
.container-fluid .jumbotron-default { .container-fluid .jumbotron-default {
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
} }
body .well-primary,
.container .well-primary, .container .well-primary,
.container-fluid .well-primary, .container-fluid .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary, .container .jumbotron-primary,
.container-fluid .jumbotron-primary { .container-fluid .jumbotron-primary {
color: #4285f4; color: #4285f4;
} }
body .well-success,
.container .well-success, .container .well-success,
.container-fluid .well-success, .container-fluid .well-success,
body .jumbotron-success,
.container .jumbotron-success, .container .jumbotron-success,
.container-fluid .jumbotron-success { .container-fluid .jumbotron-success {
color: #0f9d58; color: #0f9d58;
} }
body .well-info,
.container .well-info, .container .well-info,
.container-fluid .well-info, .container-fluid .well-info,
body .jumbotron-info,
.container .jumbotron-info, .container .jumbotron-info,
.container-fluid .jumbotron-info { .container-fluid .jumbotron-info {
color: #03a9f4; color: #03a9f4;
} }
body .well-warning,
.container .well-warning, .container .well-warning,
.container-fluid .well-warning, .container-fluid .well-warning,
body .jumbotron-warning,
.container .jumbotron-warning, .container .jumbotron-warning,
.container-fluid .jumbotron-warning { .container-fluid .jumbotron-warning {
color: #ff5722; color: #ff5722;
} }
body .well-danger,
.container .well-danger, .container .well-danger,
.container-fluid .well-danger, .container-fluid .well-danger,
body .jumbotron-danger,
.container .jumbotron-danger, .container .jumbotron-danger,
.container-fluid .jumbotron-danger { .container-fluid .jumbotron-danger {
color: #f44336; color: #f44336;
} }
body .well-material-red,
.container .well-material-red, .container .well-material-red,
.container-fluid .well-material-red, .container-fluid .well-material-red,
body .jumbotron-material-red,
.container .jumbotron-material-red, .container .jumbotron-material-red,
.container-fluid .jumbotron-material-red { .container-fluid .jumbotron-material-red {
color: #f44336; color: #f44336;
} }
body .well-material-pink,
.container .well-material-pink, .container .well-material-pink,
.container-fluid .well-material-pink, .container-fluid .well-material-pink,
body .jumbotron-material-pink,
.container .jumbotron-material-pink, .container .jumbotron-material-pink,
.container-fluid .jumbotron-material-pink { .container-fluid .jumbotron-material-pink {
color: #e91e63; color: #e91e63;
} }
body .well-material-purple,
.container .well-material-purple, .container .well-material-purple,
.container-fluid .well-material-purple, .container-fluid .well-material-purple,
body .jumbotron-material-purple,
.container .jumbotron-material-purple, .container .jumbotron-material-purple,
.container-fluid .jumbotron-material-purple { .container-fluid .jumbotron-material-purple {
color: #9c27b0; color: #9c27b0;
} }
body .well-material-deeppurple,
.container .well-material-deeppurple, .container .well-material-deeppurple,
.container-fluid .well-material-deeppurple, .container-fluid .well-material-deeppurple,
body .jumbotron-material-deeppurple,
.container .jumbotron-material-deeppurple, .container .jumbotron-material-deeppurple,
.container-fluid .jumbotron-material-deeppurple { .container-fluid .jumbotron-material-deeppurple {
color: #673ab7; color: #673ab7;
} }
body .well-material-indigo,
.container .well-material-indigo, .container .well-material-indigo,
.container-fluid .well-material-indigo, .container-fluid .well-material-indigo,
body .jumbotron-material-indigo,
.container .jumbotron-material-indigo, .container .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo { .container-fluid .jumbotron-material-indigo {
color: #3f51b5; color: #3f51b5;
} }
body .well-material-lightblue,
.container .well-material-lightblue, .container .well-material-lightblue,
.container-fluid .well-material-lightblue, .container-fluid .well-material-lightblue,
body .jumbotron-material-lightblue,
.container .jumbotron-material-lightblue, .container .jumbotron-material-lightblue,
.container-fluid .jumbotron-material-lightblue { .container-fluid .jumbotron-material-lightblue {
color: #03a9f4; color: #03a9f4;
} }
body .well-material-cyan,
.container .well-material-cyan, .container .well-material-cyan,
.container-fluid .well-material-cyan, .container-fluid .well-material-cyan,
body .jumbotron-material-cyan,
.container .jumbotron-material-cyan, .container .jumbotron-material-cyan,
.container-fluid .jumbotron-material-cyan { .container-fluid .jumbotron-material-cyan {
color: #00bcd4; color: #00bcd4;
} }
body .well-material-teal,
.container .well-material-teal, .container .well-material-teal,
.container-fluid .well-material-teal, .container-fluid .well-material-teal,
body .jumbotron-material-teal,
.container .jumbotron-material-teal, .container .jumbotron-material-teal,
.container-fluid .jumbotron-material-teal { .container-fluid .jumbotron-material-teal {
color: #009688; color: #009688;
} }
body .well-material-lightgreen,
.container .well-material-lightgreen, .container .well-material-lightgreen,
.container-fluid .well-material-lightgreen, .container-fluid .well-material-lightgreen,
body .jumbotron-material-lightgreen,
.container .jumbotron-material-lightgreen, .container .jumbotron-material-lightgreen,
.container-fluid .jumbotron-material-lightgreen { .container-fluid .jumbotron-material-lightgreen {
color: #8bc34a; color: #8bc34a;
} }
body .well-material-lime,
.container .well-material-lime, .container .well-material-lime,
.container-fluid .well-material-lime, .container-fluid .well-material-lime,
body .jumbotron-material-lime,
.container .jumbotron-material-lime, .container .jumbotron-material-lime,
.container-fluid .jumbotron-material-lime { .container-fluid .jumbotron-material-lime {
color: #cddc39; color: #cddc39;
} }
body .well-material-lightyellow,
.container .well-material-lightyellow, .container .well-material-lightyellow,
.container-fluid .well-material-lightyellow, .container-fluid .well-material-lightyellow,
body .jumbotron-material-lightyellow,
.container .jumbotron-material-lightyellow, .container .jumbotron-material-lightyellow,
.container-fluid .jumbotron-material-lightyellow { .container-fluid .jumbotron-material-lightyellow {
color: #ffeb3b; color: #ffeb3b;
} }
body .well-material-orange,
.container .well-material-orange, .container .well-material-orange,
.container-fluid .well-material-orange, .container-fluid .well-material-orange,
body .jumbotron-material-orange,
.container .jumbotron-material-orange, .container .jumbotron-material-orange,
.container-fluid .jumbotron-material-orange { .container-fluid .jumbotron-material-orange {
color: #ff9800; color: #ff9800;
} }
body .well-material-deeporange,
.container .well-material-deeporange, .container .well-material-deeporange,
.container-fluid .well-material-deeporange, .container-fluid .well-material-deeporange,
body .jumbotron-material-deeporange,
.container .jumbotron-material-deeporange, .container .jumbotron-material-deeporange,
.container-fluid .jumbotron-material-deeporange { .container-fluid .jumbotron-material-deeporange {
color: #ff5722; color: #ff5722;
} }
body .well-material-grey,
.container .well-material-grey, .container .well-material-grey,
.container-fluid .well-material-grey, .container-fluid .well-material-grey,
body .jumbotron-material-grey,
.container .jumbotron-material-grey, .container .jumbotron-material-grey,
.container-fluid .jumbotron-material-grey { .container-fluid .jumbotron-material-grey {
color: #9e9e9e; color: #9e9e9e;
} }
body .well-material-bluegrey,
.container .well-material-bluegrey, .container .well-material-bluegrey,
.container-fluid .well-material-bluegrey, .container-fluid .well-material-bluegrey,
body .jumbotron-material-bluegrey,
.container .jumbotron-material-bluegrey, .container .jumbotron-material-bluegrey,
.container-fluid .jumbotron-material-bluegrey { .container-fluid .jumbotron-material-bluegrey {
color: #607d8b; color: #607d8b;
} }
body .well-material-brown,
.container .well-material-brown, .container .well-material-brown,
.container-fluid .well-material-brown, .container-fluid .well-material-brown,
body .jumbotron-material-brown,
.container .jumbotron-material-brown, .container .jumbotron-material-brown,
.container-fluid .jumbotron-material-brown { .container-fluid .jumbotron-material-brown {
color: #795548; color: #795548;
} }
body .well-material-lightgrey,
.container .well-material-lightgrey, .container .well-material-lightgrey,
.container-fluid .well-material-lightgrey, .container-fluid .well-material-lightgrey,
body .jumbotron-material-lightgrey,
.container .jumbotron-material-lightgrey, .container .jumbotron-material-lightgrey,
.container-fluid .jumbotron-material-lightgrey { .container-fluid .jumbotron-material-lightgrey {
color: #ececec; color: #ececec;
@ -1973,16 +2073,97 @@ legend {
margin-bottom: 10px; margin-bottom: 10px;
} }
.list-group { .list-group {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); border-radius: 0;
border-radius: 2px;
} }
.list-group .list-group-item:last-child { .list-group .list-group-item {
border-bottom-right-radius: 2px; background-color: transparent;
border-bottom-left-radius: 2px; overflow: hidden;
border: 0;
border-radius: 0;
padding: 0 16px;
} }
.list-group .list-group-item:first-child { .list-group .list-group-item .row-picture,
border-top-right-radius: 2px; .list-group .list-group-item .row-action-primary {
boborder-top-right-radius: 2px; 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 { .navbar {
background-color: #4285f4; background-color: #4285f4;

139
demo/index.html
View File

@ -508,10 +508,10 @@
<h1 id="type">Icons</h1> <h1 id="type">Icons</h1>
<p>Material Design for Bootstrap includes 490 original Material Design icons!<br> <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> 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>
<p>Variations are available for every icon, included for the original Bootstrap icons.<br> <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-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-lime" style="font-size: 40pt;"></i>
<i class="icon icon-material-favorite icon-material-teal" 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> </div>
<div class="row"> <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="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<a href="javascript:void(0)" class="list-group-item active"> <div class="list-group-item">
Cras justo odio <div class="row-action-primary">
</a> <i class="icon-material-folder"></i>
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis in </div>
</a> <div class="row-content">
<a href="javascript:void(0)" class="list-group-item">Morbi leo risus <div class="least-content">15m</div>
</a> <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>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<a href="javascript:void(0)" class="list-group-item"> <div class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4> <div class="row-action-primary">
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <i class="icon-material-folder"></i>
</a> </div>
<a href="javascript:void(0)" class="list-group-item"> <div class="row-content">
<h4 class="list-group-item-heading">List group item heading</h4> <div class="action-secondary"><i class="icon-material-info"></i></div>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <h4 class="list-group-item-heading">Tile with an icon</h4>
</a> <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> </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 { // Lists
.shadow-z-2(); @import "lists.less";
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;
}
}
// Navbar // Navbar
@import "navbar.less"; @import "navbar.less";