@adobe/coral-spectrum/coral-component-drawer/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

._coral-Drawer {
  display: block;
  position: relative;
  padding: 0;
}
._coral-Drawer-toggle {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 24px;
  height: 8px;
}
._coral-Drawer-toggleButton {
  width: 100%;
  height: 100%;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
._coral-Drawer-toggleButton:before,
._coral-Drawer-toggleButton:after {
  content: '';
  height: 1px;
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
}
._coral-Drawer-toggleButton:after {
  top: 4px;
}
._coral-Drawer-content {
  padding: 16px;
}
._coral-Drawer-slider {
  overflow: hidden;
  transition: height 250ms cubic-bezier(.45, 0, .40, 1);
}
._coral-Drawer--down ._coral-Drawer-toggle {
  bottom: -9px;
}
._coral-Drawer--down ._coral-Drawer-toggleButton {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
._coral-Drawer--up ._coral-Drawer-toggle {
  top: -9px;
}
._coral-Drawer--up ._coral-Drawer-toggleButton {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
._coral-Drawer--up ._coral-Drawer-toggleButton:before {
  top: 3px;
}
._coral-Drawer--up ._coral-Drawer-toggleButton:after {
  top: 5px;
}
.coral--large ._coral-Drawer-toggleButton {
  min-width: auto;
  min-height: auto;
  padding: 0;
}
.coral--light ._coral-Drawer-toggleButton {
  background-color: transparent;
}
.coral--light ._coral-Drawer-toggleButton:before {
  background: rgb(110, 110, 110);
}
.coral--light ._coral-Drawer-toggleButton:after {
  background: rgb(110, 110, 110);
}
.coral--light ._coral-Drawer-toggleButton:hover:before {
  background: rgb(44, 44, 44);
}
.coral--light ._coral-Drawer-toggleButton:hover:after {
  background: rgb(44, 44, 44);
}
.coral--lightest ._coral-Drawer-toggleButton {
  background-color: transparent;
}
.coral--lightest ._coral-Drawer-toggleButton:before {
  background: rgb(116, 116, 116);
}
.coral--lightest ._coral-Drawer-toggleButton:after {
  background: rgb(116, 116, 116);
}
.coral--lightest ._coral-Drawer-toggleButton:hover:before {
  background: rgb(50, 50, 50);
}
.coral--lightest ._coral-Drawer-toggleButton:hover:after {
  background: rgb(50, 50, 50);
}
.coral--dark ._coral-Drawer-toggleButton {
  background-color: transparent;
}
.coral--dark ._coral-Drawer-toggleButton:before {
  background: rgb(185, 185, 185);
}
.coral--dark ._coral-Drawer-toggleButton:after {
  background: rgb(185, 185, 185);
}
.coral--dark ._coral-Drawer-toggleButton:hover:before {
  background: rgb(255, 255, 255);
}
.coral--dark ._coral-Drawer-toggleButton:hover:after {
  background: rgb(255, 255, 255);
}
.coral--darkest ._coral-Drawer-toggleButton {
  background-color: transparent;
}
.coral--darkest ._coral-Drawer-toggleButton:before {
  background: rgb(162, 162, 162);
}
.coral--darkest ._coral-Drawer-toggleButton:after {
  background: rgb(162, 162, 162);
}
.coral--darkest ._coral-Drawer-toggleButton:hover:before {
  background: rgb(239, 239, 239);
}
.coral--darkest ._coral-Drawer-toggleButton:hover:after {
  background: rgb(239, 239, 239);
}