(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"] {
|
.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"] {
|
md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -66,7 +66,7 @@ $button-fab-height: 56px;
|
||||||
// z-index provides a stacking context that prevent ripple-effect from overflowing
|
// z-index provides a stacking context that prevent ripple-effect from overflowing
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: $iconButton-padding 0;
|
//padding: $iconButton-padding 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
min-width: $iconButton-size;
|
min-width: $iconButton-size;
|
||||||
|
@ -76,18 +76,19 @@ $button-fab-height: 56px;
|
||||||
&:active {
|
&:active {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
[class ^= md-icon],
|
[class^=md-icon],
|
||||||
[class *= md-icon-] {
|
[class*=md-icon-] {
|
||||||
transform: scale($iconButton-hover-scale);
|
transform: scale($iconButton-hover-scale);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[class ^= md-icon],
|
[class^=md-icon],
|
||||||
[class *= md-icon-] {
|
[class*=md-icon-] {
|
||||||
padding: $iconButton-icon-padding;
|
padding: $iconButton-icon-padding;
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
font-size: $iconButton-icon-size;
|
font-size: $iconButton-icon-size;
|
||||||
transition: $iconButton-transition;
|
transition: $iconButton-transition;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.md-icon-arrow-back {
|
.md-icon-arrow-back {
|
||||||
font-size: sg-size('headline')
|
font-size: sg-size('headline')
|
||||||
|
|
|
@ -80,15 +80,5 @@ $i: 1;
|
||||||
&.sg-loading {
|
&.sg-loading {
|
||||||
color: sg-color($sogoBlue, 200);
|
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';
|
@import 'extends';
|
||||||
|
|
||||||
|
.md-subheader {
|
||||||
|
.md-subheader-inner {
|
||||||
|
padding: 0 0 0 $layout-gutter-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sg-md-subheader {
|
.sg-md-subheader {
|
||||||
|
&--fixed {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: auto;
|
z-index: auto;
|
||||||
padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
|
padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
}
|
||||||
&--static {
|
&--static {
|
||||||
position: static;
|
position: static;
|
||||||
z-index: auto;
|
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
|
transform: translateY(-100%); // Compensate the container top-margin
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue