Files
sogo/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
2015-06-12 11:46:04 -04:00

99 lines
2.2 KiB
SCSS

/// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
// The only selector for vs-repeat lists is this id, we use attributes selector to
// avoid overspecifying
// todo: create new classes and refactor templates markup
// ----------------------------------------------------------------------------
.vs-repeat-repeated-element {
width: 100%;
}
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader,
border-bottom: 2px solid transparent; //close to a hack
md-list-item {
// dirty fix for vs-repeat damages
position: absolute;
}
// In use in MAILER messages list but re-usable
// --------------------------------------------
md-item-content {
padding: 0 0 0 $mg;
margin: $mg 0;
transition: all 0.20s $swift-ease-in-timing-function 0.12s;
&:hover {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&._selected {
background-color: sg-color($sogoBlue, 100);
}
}
.sg-md-subhead-solo {
margin: 0;
}
}
.sg {
&-tile-content {
//@extend .md-tile-content; content of :
flex: 1;
padding: $baseline-grid * 2;
text-overflow: ellipsis;
.name,
.contact-email {
font-weight: $sg-font-light;
margin-top: 0;
margin-bottom: 0;
}
.subject,
.contact-name {
font-weight: $sg-font-medium;
// dirty fix for vs-repeat damages
max-width: 75%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
p {
margin: $list-p-margin;
font-size: sg-size(body);
}
.msg-date {
font-size: sg-size(body);
}
}
}
.sg-tile-content {
padding: 0 0 0 $layout-gutter-width;
.sg-md-subhead-multi,
.sg-md-subhead-solo {
margin: 0;
}
.sg-md-body-multi {
margin: 0;
}
a {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
}
}
.sg-avatar {
@extend .md-tile-left;
margin-right: 0;
margin-left: 0;
}