Files
Adam Bradley f367f53aca list updates
2015-08-20 13:03:17 -05:00

148 lines
3.0 KiB
SCSS

// Material Design Item
// --------------------------------------------------
$item-md-border-color: lighten($list-border-color, 10%) !default;
$item-md-font-size: 1.6rem !default;
$item-md-padding-top: 13px !default;
$item-md-padding-right: 16px !default;
$item-md-padding-bottom: 13px !default;
$item-md-padding-left: 16px !default;
$item-md-padding-media-top: 8px !default;
$item-md-padding-media-bottom: 8px !default;
$item-md-body-text-font-size: 1.4rem !default;
$item-md-body-text-line-height: 1.5 !default;
$item-md-avatar-size: 4rem !default;
$item-md-thumbnail-size: 8rem !default;
$item-md-note-color: $item-md-border-color !default;
$item-md-forward-icon-color: $item-md-border-color !default;
.list[mode=md] {
.item {
font-size: $item-md-font-size;
margin-top: -1px;
text-transform: none;
&:before {
position: absolute;
content: '';
top: 0;
right: 0;
left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color;
}
&:after {
position: absolute;
content: '';
right: 0;
bottom: 0;
left: 0;
border-top: 1px solid $item-md-border-color;
}
}
.input-label,
.item-content,
.item-note {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
}
.item-text-wrap,
.item-text-wrap .item-content {
font-size: $item-md-body-text-font-size;
line-height: $item-md-body-text-line-height;
}
.item-media {
margin: $item-md-padding-media-top $item-md-padding-right $item-md-padding-media-bottom $item-md-padding-left;
}
.item-note {
color: $item-md-note-color;
}
.item > icon {
margin-left: $item-md-padding-left;
margin-right: $item-md-padding-right;
}
.item-input > icon {
margin-top: $item-md-padding-media-top;
}
icon[forward] {
font-size: 2rem;
color: $item-md-forward-icon-color;
}
.item > button {
margin: 0 $item-md-padding-right 0 $item-md-padding-left;
padding: 2px 6px;
min-height: 26px;
}
.item-input .input + button {
margin-top: $item-md-padding-media-top;
}
.item[actions] .item-content {
margin: 8px;
}
.badge {
margin-right: $item-md-padding-right;
}
.avatar {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;
border-radius: $item-md-avatar-size / 2;
}
.thumbnail {
max-width: $item-md-thumbnail-size;
max-height: $item-md-thumbnail-size;
}
h1 {
margin: 0 0 2px;
font-size: 2.4rem;
font-weight: normal;
}
h2 {
margin: 2px 0 2px;
font-size: 1.6rem;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
line-height: normal;
margin: 2px 0 2px;
font-size: 1.4rem;
font-weight: normal;
}
p {
line-height: normal;
color: #666;
font-size: 1.4rem;
margin: 0 0 2px;
}
button.item.activated {
box-shadow: none;
}
}