Files
sogo/UI/WebServerResources/scss/components/list/list.scss

104 lines
2.2 KiB
SCSS

$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;
}
}
.sg {
&-tile-content {
@extend .md-tile-content;
margin-left: $layout-gutter-width; // dirty fix for vs-repeat damages
.name {
margin: $list-h3-margin;
font-weight: $list-h3-font-weight;
font-size: $list-h3-font-size;
}
.subject {
margin: $list-h4-margin;
font-weight: $list-h4-font-weight;
font-size: $list-h4-font-size;
// dirty fix for vs-repeat damages
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
p {
margin: $list-p-margin;
font-size: $list-p-font-size;
}
}
}
/**
* The right tile for a list item.
*/
.md-tile-right {
padding-right: $item-padding-right;
}