(css) Improve lists and subheaders components
This commit is contained in:
parent
96ebc32d8a
commit
5247200bf0
|
@ -21,7 +21,7 @@ md-sidenav md-list .md-button {
|
|||
}
|
||||
|
||||
.md-sidenav-left .md-button [class^="md-icon"] {
|
||||
margin-right: 1em;
|
||||
//margin-right: 1em;
|
||||
}
|
||||
md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
|
||||
margin: 0;
|
||||
|
@ -66,7 +66,7 @@ $button-fab-height: 56px;
|
|||
// z-index provides a stacking context that prevent ripple-effect from overflowing
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
padding: $iconButton-padding 0;
|
||||
//padding: $iconButton-padding 0;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
min-width: $iconButton-size;
|
||||
|
@ -76,18 +76,19 @@ $button-fab-height: 56px;
|
|||
&:active {
|
||||
background-color: transparent;
|
||||
|
||||
[class ^= md-icon],
|
||||
[class *= md-icon-] {
|
||||
[class^=md-icon],
|
||||
[class*=md-icon-] {
|
||||
transform: scale($iconButton-hover-scale);
|
||||
}
|
||||
}
|
||||
|
||||
[class ^= md-icon],
|
||||
[class *= md-icon-] {
|
||||
[class^=md-icon],
|
||||
[class*=md-icon-] {
|
||||
padding: $iconButton-icon-padding;
|
||||
color: currentColor;
|
||||
font-size: $iconButton-icon-size;
|
||||
transition: $iconButton-transition;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.md-icon-arrow-back {
|
||||
font-size: sg-size('headline')
|
||||
|
|
|
@ -23,14 +23,14 @@
|
|||
|
||||
// List item label
|
||||
md-list {
|
||||
.sg-item-name {
|
||||
font-size: sg-size(button);
|
||||
text-transform: initial;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sg-item-name {
|
||||
font-size: sg-size(button);
|
||||
text-transform: initial;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// The right tile for a list item.
|
||||
|
|
|
@ -80,15 +80,5 @@ $i: 1;
|
|||
&.sg-loading {
|
||||
color: sg-color($sogoBlue, 200);
|
||||
}
|
||||
.sg-item-name, .md-label {
|
||||
font-size: sg-size(button);
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.md-label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,11 +1,19 @@
|
|||
/// subheader.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
/// subheader.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
.md-subheader {
|
||||
.md-subheader-inner {
|
||||
padding: 0 0 0 $layout-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-md-subheader {
|
||||
position: fixed;
|
||||
z-index: auto;
|
||||
padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
|
||||
background-color: transparent;
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
z-index: auto;
|
||||
padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
|
||||
background-color: transparent;
|
||||
}
|
||||
&--static {
|
||||
position: static;
|
||||
z-index: auto;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/// ContactsUI.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
/// ContactsUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
[id = "contactsList"] .sg-md-subheader {
|
||||
[id="contactsList"] .sg-md-subheader {
|
||||
transform: translateY(-100%); // Compensate the container top-margin
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue