src/app/shared/layout/collapsible/collapsible.component.scss

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

@import "openk.styles";

:host {
  @include rounded-border-mixin();

  background: get-color($openk-default-palette);
  border: 1px solid $openk-form-border;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  transition: height 200ms ease-out;
  min-height: 2.5em;
}

.collapsible-header {
  @include rounded-border-mixin($bottom-left: 0, $bottom-right: 0);
  box-sizing: border-box;
  flex: 0 0 2.5em;
  height: 2.5em;
  background: $openk-background-highlight;
  display: flex;
  flex-flow: row;
  align-items: center;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom: 1px solid $openk-form-border;
}

.collapsible-header---no-color {
  background: 0;
  border: 0;
}

.collapsible-header---with-content {
  padding-right: 0.25em;
}

.collapsible-header--toggle {
  flex: 1 1 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  text-align: start;
  font-size: 1em;
  background: transparent;
  border: 0;
  outline: none;
  height: 100%;
  overflow: hidden;
  padding: 0 0.25em;
}

.collapsible-header--toggle---small {
  flex: unset;
}

.collapsible-header--icon {
  width: initial;
  height: initial;
  font-size: 1.33em;
  transition: transform 75ms ease-in-out;
  transform: rotate(90deg);
}

.collapsible-header--spacing {
  display: inline-block;
  padding-left: 0.15em;
}

.collapsible-header--icon---collapsed {
  transform: rotate(0deg);
}

.collapsible-header--title {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: large;
}

.collapsible-body {
  height: calc(100% - 2.5em);
  box-sizing: border-box;
}