146 lines
3.7 KiB
SCSS
146 lines
3.7 KiB
SCSS
/// list.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
@import 'extends';
|
|
// List variables
|
|
// ----------------------------------------------------------------------------
|
|
//$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;
|
|
|
|
// List item label
|
|
md-list-item {
|
|
.md-list-item-inner {
|
|
flex-grow: 1; // use all column space
|
|
}
|
|
md-icon,
|
|
.md-button md-icon {
|
|
margin-left: 0;
|
|
}
|
|
.sg-item-name {
|
|
font-size: sg-size(button);
|
|
max-width: 75%; // leave some place for a secondary button
|
|
text-transform: initial;
|
|
overflow: hidden;
|
|
align-items: flex-start;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.sg-inline-list-icon-label {
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
// Add some padding to the first icon in a list item
|
|
.md-list-item-inner {
|
|
> i:first-child {
|
|
margin-left: $mg;
|
|
}
|
|
}
|
|
|
|
// 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,
|
|
.md-tile-right {
|
|
border-radius: 100%;
|
|
padding: $layout-gutter-width;
|
|
width: $sg-md-grid-pitch + $baseline-grid;
|
|
height: $sg-md-grid-pitch + $baseline-grid;
|
|
line-height: $sg-md-grid-pitch + $baseline-grid;
|
|
background-clip: content-box;
|
|
}
|
|
.md-tile-right {
|
|
margin-right: -$layout-gutter-width;
|
|
}
|
|
// Overqualifying to override a rule in source
|
|
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;
|
|
}
|
|
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);
|
|
img {
|
|
border-radius: 100%;
|
|
margin-right: ($mg / 2);
|
|
}
|
|
}
|
|
|
|
// Avatar placeholder
|
|
// ------------------------------------
|
|
.md-tile-left:before {
|
|
font-family: 'Material Icons';
|
|
font-size: 40px;
|
|
color: rgba(0, 0, 0, 0.26);
|
|
}
|
|
.md-tile-left-card:before {
|
|
@extend .md-tile-left;
|
|
content: "\e7fd"; // person
|
|
}
|
|
.md-tile-left-list:before {
|
|
@extend .md-tile-left;
|
|
content: "\e7ef"; // group
|
|
}
|
|
.md-tile-left-selected:before {
|
|
@extend .md-tile-left;
|
|
content: "\e5ca"; // check
|
|
}
|
|
.md-tile-left-accepted:before {
|
|
@extend .md-tile-left;
|
|
background-color: rgba(0, 255, 0, 0.3) !important;
|
|
content: "\e5ca"; // check
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.md-tile-left-declined:before {
|
|
@extend .md-tile-left;
|
|
background-color: rgba(255, 0, 0, 0.3) !important;
|
|
content: "\e15b"; // remove
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.md-tile-left-delegated:before {
|
|
@extend .md-tile-left;
|
|
background-color: rgba(192, 192, 192, 0.3) !important;
|
|
content: "\e5c8"; // arrow-forward
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.md-tile-left-needs-action:before {
|
|
@extend .md-tile-left;
|
|
background-color: rgba(255, 255, 0, 0.3) !important;
|
|
content: "?";
|
|
}
|
|
.md-tile-left-tentative:before {
|
|
@extend .md-tile-left;
|
|
background-color: rgba(255, 255, 0, 0.3) !important;
|
|
content: "\e7fd"; // person
|
|
}
|