Dropdown.module.scss

/*
Copyright 2005 - 2021 Advantage Solutions, s. r. o.

This file is part of ORIGAM (http://www.origam.org).

ORIGAM is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

ORIGAM is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
*/

@import "src/gui/commonStyles";
@import "src/gui/definitions";
@import "src/gui/Components/EditorsCommon.module";

.root {
  display: flex;
  flex-direction: column;
  background-color:var(--background1);
  z-index: 2000;
  @include popoverShadow;

  box-shadow: 0 0.5em 1.5em 0 rgba(var(--background8-rgb), 0.25);
  border: 1px solid var(--background5);
  @include border-radius(4px);
}


.control {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;

  :global(.input) {
    flex: 1 0 0;
    min-width: 0;
    border: 1px solid var(--background5);
    border-right: none;
    background-color: var(--background2);
    border-radius: 2px 0 0 2px;
    padding: 0.25em 6px 0.25em 6px;
    margin: 0;
    &:focus {
      background-color: #fff;
      border: 1px solid var(--foreground1);
      margin-right: -1px;
      z-index: 100;
    }
    &:read-only {
      cursor: not-allowed;
      background: var(--background3);
      border: 1px solid var(--background3);
      color: var(--background7);
    }
  }

  :global(.inputBtn) {
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 0 0 0;
    border: 1px solid var(--background5);
    border-right: none;
    background-color: var(--background2);
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
    margin: 0;
    &:global(.lastOne) {
      border: 1px solid var(--background5);
      border-radius: 0 2px 2px 0;
    }
    &:global(.readOnly) {
      cursor: not-allowed;
      background: var(--background3);
      border: 1px solid var(--background3);
      color: var(--background5);
    }

    &:focus {
      background-color: #fff;
      border: 1px solid var(--foreground1);
      margin-right: -1px;
      z-index: 100;
    }
  }
}

.body {
  z-index: 2000;
  display: inline-block;
  border: 1px solid var(--background5);
  background-color: var(--background1);
  border-radius: 2px;
  box-shadow: 1px 2px 5px 1px rgba(var(--background8-rgb), 0.1);
}

.notification {
  @include notification;
}


.table {
  :global(.cell) {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    &:global(.ord1) {
      background-color: var(--background2);
    }
    &:global(.ord2) {
      background-color: var(--background1);
    }
    &:global(.header) {
      background-color: var(--background2);
      //justify-content: center;
      font-weight: bold;
    }
    &:global(.withCursor) {
      background-color: var(--foreground1);
      color:var(--background1)
    }
    &:global(.selected) {
      font-weight: bold;
      color: var(--foreground1);
    }
    &:global(.selected):global(.withCursor) {
      background-color: var(--foreground1);
      color:var(--background1)
    }
  }

  :global(.isHoveredRow) :global(.cell) {
    background-color: var(--foreground4);
    color:var(--background8);
  }

  :global(.resizeHandle) {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background-color: var(--background5);
  }
}

.input {
  color: var(--foreground1) !important;
  cursor: text;

  &:global(.isLink) {
    cursor: pointer !important;
  }
}