first commit

libraries/framework/skin/base/list-group.less

@@ -0,0 +1,175 @@
+/*==================================================
+  List Groups
+==================================================== */
+
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  // No need to set list-style: none; since .list-group-item is block level
+  margin-bottom: 20px;
+  padding-left: 0; // reset padding because ul and ol
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  background-color: @list-group-bg;
+  border: 1px solid @list-group-border;
+
+  // Round the first and last items
+  &:first-child {
+    .border-top-radius(@list-group-border-radius);
+  }
+  &:last-child {
+    margin-bottom: 0;
+    .border-bottom-radius(@list-group-border-radius);
+  }
+
+  // Align badges within list items
+  > .badge {
+    float: right;
+  }
+  > .badge + .badge {
+    margin-right: 5px;
+  }
+}
+
+
+// Linked list items
+//
+// Use anchor elements instead of `li`s or `div`s to create linked list items.
+// Includes an extra `.active` modifier class for showing selected items.
+
+a.list-group-item {
+  color: @list-group-link-color;
+
+  .list-group-item-heading {
+    color: @list-group-link-heading-color;
+  }
+
+  // Hover state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @list-group-link-hover-color;
+    background-color: @list-group-hover-bg;
+  }
+}
+
+.list-group-item {
+  // Disabled state
+  &.disabled,
+  &.disabled:hover,
+  &.disabled:focus {
+    background-color: @list-group-disabled-bg;
+    color: @list-group-disabled-color;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-disabled-text-color;
+    }
+  }
+
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: @list-group-active-color;
+    background-color: @list-group-active-bg;
+    border-color: @list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-active-text-color;
+    }
+  }
+}
+
+
+// Linked list items - Custom format
+// Used on messages and calendar pages
+.list-group {
+
+  // list group item header
+  &.list-group-links .list-group-header {
+    list-style: none;
+    font-size: 15px;
+    font-weight: 600;
+    padding-left: 7px;
+    margin-bottom: 5px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  // list group item
+  &.list-group-links .list-group-item {
+    color: #AAA;
+    font-weight: 600;
+    background: transparent;
+    border: 0;
+    padding: 8px 9px;
+  }
+
+  // list group item - special label formatting
+  &.list-group-links .list-group-item .label {
+    float: right;
+    line-height: inherit;
+    padding: .1em .6em .2em;
+  }
+
+  // list group item icons
+  &.list-group-links .list-group-item i.fa {
+    padding-right: 5px;
+  }
+
+  // list group "circle" icon (via font awesome)
+  &.list-group-links .list-group-item .fa-circle {
+    float: right;
+    font-size: 14px;
+  }
+
+  // List group styles - spacing
+  &.list-group-links.list-group-spacing-sm > a { padding: 6px 9px; }
+  &.list-group-links.list-group-spacing-xs > a { padding: 4px 9px; }
+
+  // List group styles - divider
+  &.list-group-links .list-group-divider {
+    border-bottom: 1px dashed #DDD;
+    padding-bottom: 6px;
+    margin-bottom: 6px;
+  }
+
+}
+
+// Custom content options
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}