/* ------------------------------------------------------------------------------
*
* # Media list component
*
* Overrides for media list bootstrap component
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Basic styling
// -------------------------
// Media base
.media {
margin-top: @line-height-computed;
position: relative;
}
// Override hidden overflow
.media,
.media-body {
overflow: visible;
}
// Enable absolute positioning
.media-left,
.media-right,
.media-body {
position: relative;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin-bottom: 2px;
display: block;
}
// Media list variation
.media-list {
margin-bottom: 0;
}
// Set left/right horizontal spacing
// -------------------------
// Left
.media-right,
.media > .pull-right {
padding-left: @content-padding-large;
}
// Right
.media-left,
.media > .pull-left {
padding-right: @content-padding-large;
}
// Make media element stacked on mobile
// -------------------------
@media (max-width: @screen-xs-max) {
.stack-media-on-mobile {
text-align: center;
.media-annotation {
display: block;
&.dotted:not(.pull-right):before {
content: none;
margin: 0;
}
}
.media-heading .media-annotation {
margin-left: 0;
margin-right: 0;
padding-bottom: 5px;
}
.media-left,
.media-right,
.media-body {
display: block;
width: auto;
padding-left: 0;
padding-right: 0;
img {
width: 100%;
height: auto;
max-height: none;
}
}
.media-body,
.media-right {
margin-top: @content-padding-base;
}
.media-heading {
margin-bottom: 5px;
}
}
}
// Media elements
// -------------------------
// Image size
.media-left,
.media-right,
.thumbnail .media {
img:not(.media-preview) {
width: 40px;
height: 40px;
max-width: none;
}
}
// Badge
.media-badge {
position: absolute;
left: -10px;
top: -2px;
// Add 2px border for better visual separation
&,
&[class*=bg-] {
border: 2px solid;
}
// Remove that border in navbar on mobile
@media (max-width: @grid-float-breakpoint-max) {
.navbar-inverse & {
border: 0;
top: 0;
}
}
}
// Annotation
.media-annotation {
color: @text-muted;
font-size: @font-size-small;
font-weight: 400;
// Inside media heading
.media-heading & {
margin-left: @element-horizontal-spacing;
}
// Icon
i {
font-size: @font-size-base;
}
// Add bullet to the annotation
&.dotted:not(.pull-right):before {
content: '•';
margin-right: (@element-horizontal-spacing + 3);
}
}
// Media header
.media-header {
white-space: nowrap;
margin-top: @line-height-computed;
&:first-child {
margin-top: 0;
}
}
// Layouts
// -------------------------
// Bordered list
.media-list-bordered {
> li {
border-top: 1px solid @gray-lighter;
padding-top: @content-padding-base;
margin-top: @content-padding-base;
&:first-child {
padding-top: 0;
border-top-width: 0;
}
}
&.media-list-linked .media-header {
margin-bottom: @content-padding-base;
}
}
// Linked list
.media-list-linked {
// Remove spacing
.media {
margin-top: 0;
padding: 0;
}
// Link itself
.media-link {
display: block;
padding: @content-padding-base @content-padding-large;
color: @text-color;
&:hover,
&:focus {
background-color: #fafafa;
color: @text-color;
}
}
// Update header
.media-header {
padding-left: @content-padding-large;
padding-right: @content-padding-large;
margin-top: @content-padding-small;
margin-bottom: @content-padding-small;
&:first-child {
margin-top: 0;
}
}
// First item top border
&.media-list-bordered {
> li:first-child {
border-top-width: 1px;
}
> .media-header {
margin-top: 0;
&:first-child {
border-top-width: 0;
}
}
}
}