Adapt markup to typographic styles

- Mail Messages List
This commit is contained in:
iRouge
2015-02-03 13:34:44 -05:00
committed by Francis Lachapelle
parent bd61c354f0
commit 08a76aef97
4 changed files with 33 additions and 80 deletions
@@ -0,0 +1,8 @@
/*! _extends.scss - */
////
/// SOGo
/// Version: #{$Version}
/// Module: list
/// Extends for list from angular-material sources
////
@import '../../../angular-material/src/components/list/list.scss';
@@ -1,76 +1,10 @@
$list-h3-font-size: 1.1em !default;
$list-h3-margin: 0 0 3px 0 !default;
$list-h3-font-weight: 400 !default;
$list-h4-font-size: 0.9em !default;
$list-h4-font-weight: 400 !default;
$list-h4-margin: 0 0 3px 0 !default;
$list-p-font-size: 0.75em !default;
$list-p-margin: 0 0 3px 0 !default;
$list-padding-top: $baseline-grid !default;
$list-padding-right: 0px !default;
$list-padding-left: 0px !default;
$list-padding-bottom: $baseline-grid !default;
$item-padding-top: 0px !default;
$item-padding-right: 0px !default;
$item-padding-left: 0px !default;
$item-padding-bottom: 0px !default;
md-list {
padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
}
md-item {
}
md-item-content {
display: flex;
align-items: center;
flex-direction: row;
box-sizing: border-box;
position: relative;
padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
}
/**
* The left tile for a list item.
*/
.md-tile-left {
min-width: 56px;
margin-right: -16px;
// for dev only
height: 56px;
background-color: grey;
}
/**
* The center content tile for a list item.
*/
.md-tile-content {
flex: 1;
padding: $baseline-grid * 2;
text-overflow: ellipsis;
h3 {
margin: $list-h3-margin;
font-weight: $list-h3-font-weight;
font-size: $list-h3-font-size;
}
h4 {
margin: $list-h4-margin;
font-weight: $list-h4-font-weight;
font-size: $list-h4-font-size;
}
p {
margin: $list-p-margin;
font-size: $list-p-font-size;
}
}
////
/// SOGo
/// Version: #{$Version}
/// Module: List
/// Main definitions for List
////
@import 'extends';
.sg {
&-tile-content {
@extend .md-tile-content;
@@ -95,9 +29,15 @@ md-item-content {
}
}
}
/**
* The right tile for a list item.
*/
// The right tile for a list item.
// ----------------------------------------------------------------------------
.md-tile-right {
padding-right: $item-padding-right;
}
// The right tile for a list item (avatar container)
// ----------------------------------------------------------------------------
.md-tile-left {
border-radius: 100%;
min-height: 56px;
}