-
-
- -
-
- - 14 - Cras justo odio - -
- - 2 - Dapibus ac facilisis in - -
- - 1 - Morbi leo risus - -
-
- Cras justo odio
-
- Dapibus ac facilisis in
-
- Morbi leo risus
-
+
+
+
+
+
+
+
+
+ 15m
+ Tile with a label
+Donec id elit non mi porta gravida at eget metus.
+
+
+
+
+
+
+
+
+ 10m
+ Tile with a label
+Maecenas sed diam eget risus varius blandit.
+
+
+
+
+
+
+
+ 8m
+ Tile with a label
+Maecenas sed diam eget risus varius blandit.
+
-
-
+ List group item heading
-Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
- - -List group item heading
-Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
- +
+
+
+
+
+
+
+
+
+
Tile with an icon
+Donec id elit non mi porta gravida at eget metus.
+
+
+
+
+
+
+
+
+
+
Tile with an icon
+Maecenas sed diam eget risus varius blandit.
+
+
+
+
+
+
+
+
+
+
Tile with an icon
+Maecenas sed diam eget risus varius blandit.
+
+
diff --git a/less/lists.less b/less/lists.less
new file mode 100644
index 00000000..e0554bfd
--- /dev/null
+++ b/less/lists.less
@@ -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;
+ }
+ }
+}
diff --git a/less/material.less b/less/material.less
index 314ba80c..c467ccea 100644
--- a/less/material.less
+++ b/less/material.less
@@ -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";
+
+
+
+
+
+ 
+
+
+
+ Tile with avatar
+Donec id elit non mi porta gravida at eget metus
+
+
+
+
+ 
+
+
+
+ Tile with another avatar
+Maecenas sed diam eget risus varius blandit.
+
+
+
+
+
+
+
+ Tile with a checkbox in it
+Donec id elit non mi risus varius blandit.
+