Merge pull request #74 from brianhall/desktop-layout-modifications
Desktop layout modifications to autohide the drawermaster
Sérgio Gomes
commit
5ba1e1693f
112
css/material.css
112
css/material.css
|
|
@ -8326,45 +8326,42 @@ dt {
|
|||
|
||||
.wsk-layout__drawer-button {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
line-height: 50px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 8px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 3; }
|
||||
margin: 8px 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgb(255,255,255);
|
||||
z-index: 4; }
|
||||
.wsk-layout__drawer-button::after {
|
||||
font-family: 'Material-Design-Iconic-Font';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f2a1"; }
|
||||
.wsk-layout--overlay-drawer-button > .wsk-layout__drawer-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.wsk-layout__header .wsk-layout__drawer-button {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
color: rgb(255,255,255);
|
||||
background-color: inherit;
|
||||
z-index: 5; }
|
||||
background-color: inherit; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header .wsk-layout__drawer-button {
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
@media screen and (min-width: 851px) {
|
||||
margin: 4px; } }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__drawer-button {
|
||||
margin: 4px;
|
||||
color: rgba(0, 0, 0, 0.5); } }
|
||||
@media screen and (min-width: 851px) {
|
||||
.wsk-layout--fixed-drawer > .wsk-layout__drawer-button {
|
||||
display: none; } }
|
||||
|
||||
.wsk-layout__header {
|
||||
|
|
@ -8398,27 +8395,35 @@ dt {
|
|||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
||||
-webkit-transition-property: min-height, box-shadow;
|
||||
transition-property: min-height, box-shadow;
|
||||
padding-left: 80px;
|
||||
padding-left: 24px;
|
||||
overflow: hidden; }
|
||||
.wsk-layout.has-drawer .wsk-layout__header {
|
||||
padding-left: 72px; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header {
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
padding-left: 72px; } }
|
||||
padding-left: 16px; }
|
||||
.wsk-layout.has-drawer .wsk-layout__header {
|
||||
padding-left: 56px; } }
|
||||
.wsk-layout--fixed-drawer:not(.is-small-screen) > .wsk-layout__header {
|
||||
padding-left: 24px; }
|
||||
.wsk-layout__header > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
margin-right: 24px;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
z-index: 3; }
|
||||
z-index: 3;
|
||||
display: block; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header > .wsk-layout-icon {
|
||||
margin-right: 16px;
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
.wsk-layout.has-drawer .wsk-layout__header > .wsk-layout-icon {
|
||||
display: none; }
|
||||
.wsk-layout__header.is-compact {
|
||||
min-height: 64px; }
|
||||
@media screen and (max-width: 850px) {
|
||||
|
|
@ -8536,17 +8541,17 @@ dt {
|
|||
.wsk-layout__header-row.wsk-layout__header-row {
|
||||
min-height: 56px; } }
|
||||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
margin-right: 24px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
z-index: 3; }
|
||||
display: block; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
.wsk-layout.has-drawer .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
display: none; }
|
||||
.wsk-layout__header-row.wsk-layout__header-row > * {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
|
|
@ -8559,25 +8564,24 @@ dt {
|
|||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-navigation:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
-webkit-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible; } }
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
-webkit-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible; }
|
||||
|
||||
.wsk-layout__content {
|
||||
-ms-flex: 0 1 auto;
|
||||
|
|
@ -8605,8 +8609,8 @@ dt {
|
|||
top: 0;
|
||||
height: 96px;
|
||||
width: calc(100% -
|
||||
112px);
|
||||
padding: 0 0 0 56px;
|
||||
96px);
|
||||
padding: 0 0 0 72px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -8619,8 +8623,8 @@ dt {
|
|||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__tab-bar {
|
||||
width: calc(100% -
|
||||
60px);
|
||||
padding: 0 0 0 60px; } }
|
||||
44px);
|
||||
padding: 0 0 0 56px; } }
|
||||
.wsk-layout--fixed-tabs .wsk-layout__tab-bar {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -8654,7 +8658,7 @@ dt {
|
|||
position: absolute;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: 56px;
|
||||
width: 72px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
background-color: rgb(63,81,181);
|
||||
|
|
@ -8667,7 +8671,7 @@ dt {
|
|||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__tab-bar-button {
|
||||
display: none;
|
||||
width: 60px; } }
|
||||
width: 44px; } }
|
||||
.wsk-layout--fixed-tabs .wsk-layout__tab-bar-button {
|
||||
display: none; }
|
||||
.wsk-layout__tab-bar-button.is-active {
|
||||
|
|
|
|||
|
|
@ -8327,45 +8327,42 @@ dt {
|
|||
|
||||
.wsk-layout__drawer-button {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
border: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
line-height: 50px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 8px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 3; }
|
||||
margin: 8px 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgb($color-primary-contrast);
|
||||
z-index: 4; }
|
||||
.wsk-layout__drawer-button::after {
|
||||
font-family: 'Material-Design-Iconic-Font';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f2a1"; }
|
||||
.wsk-layout--overlay-drawer-button > .wsk-layout__drawer-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.wsk-layout__header .wsk-layout__drawer-button {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
color: rgb($color-primary-contrast);
|
||||
background-color: inherit;
|
||||
z-index: 5; }
|
||||
background-color: inherit; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header .wsk-layout__drawer-button {
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
@media screen and (min-width: 851px) {
|
||||
margin: 4px; } }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__drawer-button {
|
||||
margin: 4px;
|
||||
color: rgba(0, 0, 0, 0.5); } }
|
||||
@media screen and (min-width: 851px) {
|
||||
.wsk-layout--fixed-drawer > .wsk-layout__drawer-button {
|
||||
display: none; } }
|
||||
|
||||
.wsk-layout__header {
|
||||
|
|
@ -8399,27 +8396,35 @@ dt {
|
|||
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
|
||||
-webkit-transition-property: min-height, box-shadow;
|
||||
transition-property: min-height, box-shadow;
|
||||
padding-left: 80px;
|
||||
padding-left: 24px;
|
||||
overflow: hidden; }
|
||||
.wsk-layout.has-drawer .wsk-layout__header {
|
||||
padding-left: 72px; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header {
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
padding-left: 72px; } }
|
||||
padding-left: 16px; }
|
||||
.wsk-layout.has-drawer .wsk-layout__header {
|
||||
padding-left: 56px; } }
|
||||
.wsk-layout--fixed-drawer:not(.is-small-screen) > .wsk-layout__header {
|
||||
padding-left: 24px; }
|
||||
.wsk-layout__header > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
margin-right: 24px;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
z-index: 3; }
|
||||
z-index: 3;
|
||||
display: block; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header > .wsk-layout-icon {
|
||||
margin-right: 16px;
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
.wsk-layout.has-drawer .wsk-layout__header > .wsk-layout-icon {
|
||||
display: none; }
|
||||
.wsk-layout__header.is-compact {
|
||||
min-height: 64px; }
|
||||
@media screen and (max-width: 850px) {
|
||||
|
|
@ -8537,17 +8542,17 @@ dt {
|
|||
.wsk-layout__header-row.wsk-layout__header-row {
|
||||
min-height: 56px; } }
|
||||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 16px;
|
||||
margin-right: 24px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
overflow: hidden;
|
||||
z-index: 3; }
|
||||
display: block; }
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
left: 16px;
|
||||
top: 12px; } }
|
||||
.wsk-layout.has-drawer .wsk-layout__header-row.wsk-layout__header-row > .wsk-layout-icon {
|
||||
display: none; }
|
||||
.wsk-layout__header-row.wsk-layout__header-row > * {
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
|
|
@ -8560,25 +8565,24 @@ dt {
|
|||
.wsk-layout__header-row.wsk-layout__header-row > .wsk-navigation:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
-webkit-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible; } }
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
-webkit-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.wsk-layout__drawer.is-visible ~ .wsk-layout__obfuscator {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible; }
|
||||
|
||||
.wsk-layout__content {
|
||||
-ms-flex: 0 1 auto;
|
||||
|
|
@ -8606,8 +8610,8 @@ dt {
|
|||
top: 0;
|
||||
height: 96px;
|
||||
width: calc(100% -
|
||||
112px);
|
||||
padding: 0 0 0 56px;
|
||||
96px);
|
||||
padding: 0 0 0 72px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -8620,8 +8624,8 @@ dt {
|
|||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__tab-bar {
|
||||
width: calc(100% -
|
||||
60px);
|
||||
padding: 0 0 0 60px; } }
|
||||
44px);
|
||||
padding: 0 0 0 56px; } }
|
||||
.wsk-layout--fixed-tabs .wsk-layout__tab-bar {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -8655,7 +8659,7 @@ dt {
|
|||
position: absolute;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
width: 56px;
|
||||
width: 72px;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
background-color: rgb($color-primary);
|
||||
|
|
@ -8668,7 +8672,7 @@ dt {
|
|||
@media screen and (max-width: 850px) {
|
||||
.wsk-layout__tab-bar-button {
|
||||
display: none;
|
||||
width: 60px; } }
|
||||
width: 44px; } }
|
||||
.wsk-layout--fixed-tabs .wsk-layout__tab-bar-button {
|
||||
display: none; }
|
||||
.wsk-layout__tab-bar-button.is-active {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2379,6 +2379,7 @@ MaterialLayout.prototype.CssClasses_ = {
|
|||
TAB_BAR_RIGHT_BUTTON: 'wsk-layout__tab-bar-right-button',
|
||||
PANEL: 'wsk-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER_CLASS: 'has-drawer',
|
||||
SHADOW_CLASS: 'is-casting-shadow',
|
||||
COMPACT_CLASS: 'is-compact',
|
||||
SMALL_SCREEN_CLASS: 'is-small-screen',
|
||||
|
|
@ -2412,8 +2413,7 @@ MaterialLayout.prototype.screenSizeHandler_ = function() {
|
|||
|
||||
if (this.screenSizeMediaQuery_.matches) {
|
||||
this.element_.classList.add(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
// Collapse drawer (if any) when moving to a large screen size.
|
||||
if (this.drawer_) {
|
||||
|
|
@ -2521,6 +2521,11 @@ MaterialLayout.prototype.init = function() {
|
|||
drawerButton.addEventListener('click',
|
||||
this.drawerToggleHandler_.bind(this));
|
||||
|
||||
// Add a class if the layout has a drawer, for altering the left padding.
|
||||
// Adds the HAS_DRAWER_CLASS to the elements since this.header_ may or may
|
||||
// not be present.
|
||||
this.element_.classList.add(this.CssClasses_.HAS_DRAWER_CLASS);
|
||||
|
||||
// If we have a fixed header, add the button to the header rather than
|
||||
// the layout.
|
||||
if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,13 +11,16 @@ $layout-drawer-width: $layout-drawer-narrow;
|
|||
|
||||
$layout-header-icon-size: 32px;
|
||||
$layout-screen-size-threshold: 850px;
|
||||
$layout-header-icon-margin: 24px;
|
||||
$layout-drawer-button-mobile-size: 32px;
|
||||
$layout-drawer-button-desktop-size: 48px;
|
||||
|
||||
$layout-header-mobile-row-height: 56px;
|
||||
$layout-mobile-header-height: $layout-header-mobile-row-height;
|
||||
$layout-header-desktop-row-height: 64px;
|
||||
$layout-desktop-header-height: $layout-header-desktop-row-height;
|
||||
$layout-header-mobile-indent: 72px;
|
||||
$layout-header-desktop-indent: 80px;
|
||||
$layout-header-mobile-indent: 56px;
|
||||
$layout-header-desktop-indent: 72px;
|
||||
$layout-header-basic-mobile-indent: 16px;
|
||||
$layout-header-basic-desktop-indent: 24px;
|
||||
|
||||
|
|
@ -161,53 +164,50 @@ $layout-tab-highlight-thickness: 2px;
|
|||
.wsk-layout__drawer-button {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
position: absolute;
|
||||
height: $layout-drawer-button-desktop-size;
|
||||
width: $layout-drawer-button-desktop-size;
|
||||
border: 0;
|
||||
|
||||
flex-shrink: 0;
|
||||
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
line-height: $layout-drawer-button-desktop-size + 2;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 8px;
|
||||
margin: 8px 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: $layout-header-text-color;
|
||||
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
|
||||
&::after {
|
||||
@include wsk-icon();
|
||||
content: $icon-menu;
|
||||
}
|
||||
|
||||
.wsk-layout--overlay-drawer-button > & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.wsk-layout__header & {
|
||||
position: absolute;
|
||||
left: $layout-header-basic-desktop-indent;
|
||||
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
||||
height: $layout-header-icon-size;
|
||||
margin: 0;
|
||||
width: $layout-header-icon-size;
|
||||
color: $layout-header-text-color;
|
||||
background-color: inherit;
|
||||
z-index: 5;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin: 4px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@media screen and (min-width: $layout-screen-size-threshold + 1px) {
|
||||
display: none;
|
||||
.wsk-layout--fixed-drawer > & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -228,13 +228,21 @@ $layout-tab-highlight-thickness: 2px;
|
|||
@include material-animation-default();
|
||||
@include shadow-z1();
|
||||
transition-property: min-height, box-shadow;
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
padding-left: $layout-header-basic-desktop-indent;
|
||||
overflow: hidden;
|
||||
|
||||
.wsk-layout.has-drawer & {
|
||||
padding-left: $layout-header-desktop-indent;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
height: $layout-mobile-header-height;
|
||||
min-height: $layout-mobile-header-height;
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
padding-left: $layout-header-basic-mobile-indent;
|
||||
|
||||
.wsk-layout.has-drawer & {
|
||||
padding-left: $layout-header-mobile-indent;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-drawer:not(.is-small-screen) > & {
|
||||
|
|
@ -242,20 +250,26 @@ $layout-tab-highlight-thickness: 2px;
|
|||
}
|
||||
|
||||
& > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
margin-right: $layout-header-icon-margin;
|
||||
left: $layout-header-basic-desktop-indent;
|
||||
top: ($layout-desktop-header-height - $layout-header-icon-size) / 2;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
margin-right: $layout-header-basic-mobile-indent;
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
top: ($layout-mobile-header-height - $layout-header-icon-size) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.wsk-layout.has-drawer & > .wsk-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-compact {
|
||||
min-height: $layout-header-desktop-row-height;
|
||||
|
||||
|
|
@ -387,13 +401,11 @@ $layout-tab-highlight-thickness: 2px;
|
|||
}
|
||||
|
||||
& > .wsk-layout-icon {
|
||||
position: absolute;
|
||||
left: $layout-header-basic-desktop-indent;
|
||||
top: ($layout-header-desktop-row-height - $layout-header-icon-size) / 2;
|
||||
margin-right: $layout-header-icon-margin;
|
||||
height: $layout-header-icon-size;
|
||||
width: $layout-header-icon-size;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
left: $layout-header-basic-mobile-indent;
|
||||
|
|
@ -401,6 +413,10 @@ $layout-tab-highlight-thickness: 2px;
|
|||
}
|
||||
}
|
||||
|
||||
.wsk-layout.has-drawer & > .wsk-layout-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -421,23 +437,21 @@ $layout-tab-highlight-thickness: 2px;
|
|||
}
|
||||
|
||||
// Obfuscator.
|
||||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
transition-property: background-color;
|
||||
@include material-animation-default();
|
||||
.wsk-layout__obfuscator {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
visibility: hidden;
|
||||
transition-property: background-color;
|
||||
@include material-animation-default();
|
||||
|
||||
.wsk-layout__drawer.is-visible ~ & {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
.wsk-layout__drawer.is-visible ~ & {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -480,7 +494,7 @@ $layout-tab-highlight-thickness: 2px;
|
|||
height: $layout-tab-bar-height * 2;
|
||||
width: calc(100% -
|
||||
#{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
|
||||
padding: 0 0 0 $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
||||
padding: 0 0 0 $layout-header-desktop-indent;
|
||||
display: flex;
|
||||
background-color: $layout-header-bg-color;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -493,7 +507,7 @@ $layout-tab-highlight-thickness: 2px;
|
|||
@media screen and (max-width: $layout-screen-size-threshold) {
|
||||
width: calc(100% -
|
||||
#{($layout-header-mobile-indent - $layout-tab-mobile-padding)});
|
||||
padding: 0 0 0 $layout-header-mobile-indent - $layout-tab-mobile-padding;
|
||||
padding: 0 0 0 $layout-header-mobile-indent;
|
||||
}
|
||||
|
||||
.wsk-layout--fixed-tabs & {
|
||||
|
|
@ -531,7 +545,7 @@ $layout-tab-highlight-thickness: 2px;
|
|||
position: absolute;
|
||||
height: $layout-tab-bar-height;
|
||||
line-height: $layout-tab-bar-height;
|
||||
width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
|
||||
width: $layout-header-desktop-indent;
|
||||
z-index: 4;
|
||||
text-align: center;
|
||||
background-color: $layout-header-bg-color;
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ MaterialLayout.prototype.CssClasses_ = {
|
|||
TAB_BAR_RIGHT_BUTTON: 'wsk-layout__tab-bar-right-button',
|
||||
PANEL: 'wsk-layout__tab-panel',
|
||||
|
||||
HAS_DRAWER_CLASS: 'has-drawer',
|
||||
SHADOW_CLASS: 'is-casting-shadow',
|
||||
COMPACT_CLASS: 'is-compact',
|
||||
SMALL_SCREEN_CLASS: 'is-small-screen',
|
||||
|
|
@ -100,8 +101,7 @@ MaterialLayout.prototype.screenSizeHandler_ = function() {
|
|||
|
||||
if (this.screenSizeMediaQuery_.matches) {
|
||||
this.element_.classList.add(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.SMALL_SCREEN_CLASS);
|
||||
// Collapse drawer (if any) when moving to a large screen size.
|
||||
if (this.drawer_) {
|
||||
|
|
@ -209,6 +209,11 @@ MaterialLayout.prototype.init = function() {
|
|||
drawerButton.addEventListener('click',
|
||||
this.drawerToggleHandler_.bind(this));
|
||||
|
||||
// Add a class if the layout has a drawer, for altering the left padding.
|
||||
// Adds the HAS_DRAWER_CLASS to the elements since this.header_ may or may
|
||||
// not be present.
|
||||
this.element_.classList.add(this.CssClasses_.HAS_DRAWER_CLASS);
|
||||
|
||||
// If we have a fixed header, add the button to the header rather than
|
||||
// the layout.
|
||||
if (this.element_.classList.contains(this.CssClasses_.FIXED_HEADER)) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue