xref: /external/chromium_org/third_party/polymer/components/core-drawer-panel/core-drawer-panel.css

/*
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/

:host {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#drawer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
  -mox-box-sizing: border-box;
}

.transition #drawer {
  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
}

/*
right-drawer: make drawer on the right side
*/
.right-drawer #drawer {
  left: auto;
  right: 0;
}

.right-drawer.transition #drawer {
  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
}

polyfill-next-selector { content: ':host [drawer]'; }
::content[select="[drawer]"] > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.transition #main {
  transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
}

.right-drawer #main {
  left: 0;
}

.right-drawer.transition #main {
  transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
}

polyfill-next-selector { content: '#main > [main]'; }
::content[select="[main]"] > * {
  height: 100%;
}

#scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
}

/*
narrow layout
*/
.narrow-layout > #drawer.core-selected {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.right-drawer.narrow-layout > #drawer.core-selected {
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
}

polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
.narrow-layout > #drawer > ::content[select="[drawer]"] > * {
  border: 0;
}

.narrow-layout > #drawer:not(.core-selected) {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.right-drawer.narrow-layout > #drawer:not(.core-selected) {
  left: auto;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.narrow-layout > #main {
  left: 0 !important;
  padding: 0;
}

.right-drawer.narrow-layout > #main {
  left: 0;
  right: 0;
  padding: 0;
}

.narrow-layout > #main:not(.core-selected) #scrim,
.dragging #scrim {
  visibility: visible;
  opacity: 1;
}

polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
.narrow-layout > #main > ::content[select="[main]"] > * {
  margin: 0;
  min-height: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}