le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-side-panel/le-side-panel.css

@@ -1,202 +0,0 @@
-:host {
-  display: block;
-  height: 100%;
-
-  /* Default values */
-  --le-side-panel-width: 280px;
-  --le-side-panel-margin: 0px;
-  --le-side-panel-backdrop: var(--le-color-backdrop);
-  --le-side-panel-border-radius: var(--le-radius-lg);
-}
-
-.host {
-  position: relative;
-  height: 100%;
-  min-height: 0;
-}
-
-.layout {
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-}
-
-.layout.start {
-  flex-direction: row;
-}
-
-.layout.end {
-  flex-direction: row-reverse;
-}
-
-.inlinePanel {
-  flex: 0 0 auto;
-  width: var(--le-side-panel-width);
-  min-width: 0;
-  height: 100%;
-  overflow: hidden;
-  transition: width var(--le-side-panel-transition, var(--le-transition-normal));
-}
-
-.inlinePanel.hidden {
-  width: 0;
-}
-
-.inlinePanel.no-transition {
-  transition: none !important;
-}
-
-.inlinePanel .panel {
-  transform: translateX(0);
-  opacity: 1;
-  transition:
-    transform var(--le-side-panel-transition, var(--le-transition-normal)),
-    opacity var(--le-side-panel-transition, var(--le-transition-normal));
-}
-
-.inlinePanel.no-transition .panel {
-  transition: none !important;
-}
-
-.layout.start .inlinePanel.hidden .panel {
-  transform: translateX(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.layout.end .inlinePanel.hidden .panel {
-  transform: translateX(100%);
-  opacity: 0;
-  pointer-events: none;
-}
-
-.content {
-  flex: 1 1 auto;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-}
-
-.panel {
-  position: relative;
-  margin: var(--le-side-panel-margin);
-  height: 100%;
-  max-height: min(calc(100% - (var(--le-side-panel-margin) * 2)), calc(100vh - (var(--le-side-panel-margin) * 2)));
-  width: calc(100% - (var(--le-side-panel-margin) * 2));
-  border-radius: var(--le-side-panel-border-radius);
-
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text, #000);
-
-  border-right: 1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));
-  box-sizing: border-box;
-}
-
-.panel.end {
-  border-right: 0;
-  border-left: 1px solid var(--le-color-border, rgba(0, 0, 0, 0.12));
-}
-
-.panel-scroller {
-  height: 100%;
-  overflow: auto;
-}
-
-.close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  z-index: 1;
-
-  border: 0;
-  border-radius: 6px;
-
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  cursor: col-resize;
-}
-
-.handle.start {
-  right: -5px;
-}
-
-.handle.end {
-  left: -5px;
-}
-
-/* Overlay (contained within component) */
-.overlayRoot {
-  position: absolute;
-  inset: 0;
-  background: var(--le-side-panel-backdrop);
-  z-index: var(--le-z-modal-backdrop, 1040);
-
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--le-side-panel-transition, var(--le-transition-normal));
-
-  height: 100%;
-}
-
-.overlayRoot.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.overlayPanelWrap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: min(100%, var(--le-side-panel-width));
-
-  height: 100%;
-
-  z-index: var(--le-z-modal, 1050);
-
-  display: flex;
-  align-items: stretch;
-}
-
-.overlayPanelWrap.start {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-.overlayPanelWrap.end {
-  right: 0;
-  transform: translateX(100%);
-}
-
-.overlayPanelWrap.visible.start,
-.overlayPanelWrap.visible.end {
-  transform: translateX(0);
-}
-
-.overlayPanelWrap {
-  transition: transform var(--le-side-panel-transition, var(--le-transition-normal));
-}
-
-/* Disable transitions while dragging */
-.host[data-resizing='true'] .panel,
-.host[data-resizing='true'] .overlayPanelWrap,
-.host[data-resizing='true'] .inlinePanel {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .overlayPanelWrap,
-  .overlayRoot,
-  .inlinePanel {
-    transition: none;
-  }
-}