amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-28 09:53:23 +00:00
Code Issues Projects Releases Wiki Activity

(css) Merge autoScrollList.scss with list.scss

Browse Source
This commit is contained in:
Francis Lachapelle
2015-08-07 11:17:09 -04:00
parent fb7d5b628f
commit 52559087b3
6 changed files with 134 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
-100
View File
@@ -1,100 +0,0 @@
/// autoScrollList.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
[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 {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
}
}
.sg {
&-tile-content {
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
p {
margin: $list-p-margin;
font-size: sg-size(body);
}
.msg-date {
float: right;
font-size: sg-size(body);
font-weight: $sg-font-light;
line-height: $sg-line-height-2;
margin-left: 1em;
}
.#{$md}-subhead-multi,
.#{$md}-subhead-solo,
.#{$md}-body-multi {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.#{$md}-subhead-multi {
@extend .#{$md}-body-1;
font-size: initial;
}
.#{$md}-body-multi {
@extend .#{$md}-caption;
}
}
}
.sg-avatar {
@extend .md-tile-left-card;
margin-right: 0;
margin-left: 0;
}
.sg-list-avatar {
@extend .md-tile-left-list;
margin-right: 0;
margin-left: 0;
}
.sg-selected-avatar {
@extend .md-tile-left-selected;
margin-right: 0;
margin-left: 0;
}
.sg-accepted {
@extend .md-tile-left-accepted;
margin-right: 0;
margin-left: 0;
}
.sg-declined {
@extend .md-tile-left-declined;
margin-right: 0;
margin-left: 0;
}
.sg-delegated {
@extend .md-tile-left-delegated;
margin-right: 0;
margin-left: 0;
}
.sg-needs-action {
@extend .md-tile-left-needs-action;
margin-right: 0;
margin-left: 0;
}
.sg-tentative {
@extend .md-tile-left-tentative;
margin-right: 0;
margin-left: 0;
}
UI/WebServerResources/scss/components/list/list.scss
+123 -16
View File
@@ -25,11 +25,11 @@ md-list-item {
}
// Add some padding to the first icon in a list item
.md-list-item-inner {
> i:first-child {
margin-left: $mg;
}
}
//.md-list-item-inner {
// > i:first-child {
// margin-left: $mg;
// }
//}
// The right tile for a list item.
// ----------------------------------------------------------------------------
@@ -55,18 +55,85 @@ md-list-item {
div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
.sg-tile-icons {
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader until md-subheader is fixed
}
.sg-section-list {
md-list-item {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
.md-list-item-inner {
.md-secondary {
// Expect the container to include a sg-tile-icons
right: 0px;
}
}
}
}
.sg {
&-tile-content {
align-items: baseline;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
justify-content: space-between;
p {
margin: $list-p-margin;
font-size: sg-size(body);
}
.msg-date {
float: right;
font-size: sg-size(body);
font-weight: $sg-font-light;
line-height: $sg-line-height-2;
margin-left: 1em;
}
.#{$md}-subhead-multi,
.#{$md}-subhead-solo,
.#{$md}-body-multi {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.#{$md}-subhead-multi {
@extend .#{$md}-body-1;
font-size: initial;
}
.#{$md}-body-multi {
@extend .#{$md}-caption;
}
}
// Small tile of vertically-aligned icons
&-tile-icons {
md-icon {
font-size: $sg-font-size-1;
color: $colorGray;
margin: 2px;
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: (2 * $mg);
height:(7 * $line);
}
.sg-avatars {
margin: ($mg / 2) 0 0 ($mg / 2);
@@ -123,3 +190,43 @@ div.md-tile-left {
background-color: rgba(255, 255, 0, 0.3) !important;
content: "\e7fd"; // person
}
.sg-avatar {
@extend .md-tile-left-card;
margin-right: 0;
margin-left: 0;
}
.sg-list-avatar {
@extend .md-tile-left-list;
margin-right: 0;
margin-left: 0;
}
.sg-selected-avatar {
@extend .md-tile-left-selected;
margin-right: 0;
margin-left: 0;
}
.sg-accepted {
@extend .md-tile-left-accepted;
margin-right: 0;
margin-left: 0;
}
.sg-declined {
@extend .md-tile-left-declined;
margin-right: 0;
margin-left: 0;
}
.sg-delegated {
@extend .md-tile-left-delegated;
margin-right: 0;
margin-left: 0;
}
.sg-needs-action {
@extend .md-tile-left-needs-action;
margin-right: 0;
margin-left: 0;
}
.sg-tentative {
@extend .md-tile-left-tentative;
margin-right: 0;
margin-left: 0;
}