platform/packages/theme/styles/dialogs.scss

//
// Copyright © 2021 Anticrm Platform Contributors.
// 
// Licensed under the Eclipse Public 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 https://www.eclipse.org/legal/epl-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 CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
//

/* Overlays */
.antiOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--theme-overlay-color);
  pointer-events: all;
}

/* Cards */
.antiCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--theme-popup-color);
  border-radius: .5rem;
  box-shadow: var(--theme-popup-shadow);

  .antiCard-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;

    &.withSub:not(.thinHeader) { padding: 1.5rem 1.5rem 0; }
    &.withSub.thinHeader { padding: 1rem 1.5rem 0; }
    &.thinHeader:not(.withSub) { padding: 1rem 1.5rem; }
    &:not(.withSub, .thinHeader) { padding: 1.5rem; }

    &__title-wrap {
      display: flex;
      align-items: center;
      min-width: 0;

      & > *:not(:last-child) { margin-right: .5rem; }
    }
    &__title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      user-select: none;
      min-width: 0;
      line-height: 150%;
      color: var(--theme-caption-color);

      &.accentHeader { font-size: 1rem; }
    }
    &__divider { color: var(--theme-dark-color); }
    &__error {
      min-width: 0;
      flex-grow: 1;
      position: absolute;
      display: flex;
      top: 2.5rem;
      left: 1rem;
      right: 1rem;
      font-weight: 500;
      font-size: .75rem;
      color: var(--system-error-color);
      &:empty { visibility: hidden; }
    }
  }

  .antiCard-subheader {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: .5rem 1.5rem 1.5rem;
    min-width: 0;
    min-height: 0;
  }

  .antiCard-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    // margin: 1.5rem 1.5rem .5rem;
    height: fit-content;
    min-width: 0;
    min-height: 0;
  }

  .antiCard-pool {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: .5rem 1.5rem 1.5rem;
    min-width: 0;
    font-size: .8125rem;
    color: var(--theme-caption-color);

    &::after {
      content: '';
      width: 100%;
      order: 0;
    }
    &__separator {
      flex-shrink: 0;
      margin-top: 1.5rem;
      height: 1px;
      background-color: var(--theme-popup-divider);
    }
    & > * { margin: .5rem .5rem 0 0; }
    .new-line {
      min-width: 0;
      order: 1;
    }
  }

  .antiCard-attachments,
  .antiCard-block,
  .antiCard-blocks { border-top: 1px solid var(--theme-popup-divider); }

  .antiCard-block,
  .antiCard-blocks {
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-width: 0;
    min-height: 0;
  }

  .antiCard-attachments,
  .antiCard-blocks { background-color: var(--theme-bg-accent-color); }

  .antiCard-attachments {
    &__container {
      display: flex;
      align-items: center;
      margin: 1rem 1.5rem;

      & > * { margin-right: 1rem; }
      & > *:last-child { margin-right: 1.5rem; }
    }
  }
  .antiCard-block { padding: 1.5rem; }
  .antiCard-blocks { padding: .75rem 1.5rem; }

  .antiCard-footer {
    overflow: hidden;
    flex-shrink: 0;
    direction: ltr;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    height: 4.25rem;
    border-radius: 0 0 .5rem .5rem;
    
    &.divide { border-top: 1px solid var(--theme-popup-divider); }
    &.reverse { flex-direction: row-reverse; }
    &__error {
      flex-grow: 1;
      display: flex;
      margin-left: .375rem;
      min-width: 0;
      font-weight: 500;
      font-size: .75rem;
      color: var(--system-error-color);
      &:empty { visibility: hidden; }
    }
  }

  .antiCard-menu__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    margin: 0 .5rem;
    padding: .25rem .5rem;
    min-width: 0;
    min-height: 2.5rem;
    border-radius: .25rem;

    &.hoverable{
      cursor: pointer;

      &:hover { background-color: var(--theme-popup-hover); }
    }
    span {
      margin-right: .5rem;
      color: var(--theme-caption-color);
    }
  }
  .antiCard-menu__spacer {
    flex-shrink: 0;
    height: .5rem;
  }
  .antiCard-menu__divider {
    flex-shrink: 0;
    margin: .5rem 0;
    height: 1px;
    background-color: var(--theme-popup-divider);
  }
  .antiCard-group {
    padding: .5rem 1rem;

    &:not(:last-child) { border-bottom: 1px solid var(--theme-divider-color); }
    &.grid {
      display: grid;
      grid-template-columns: 5rem auto;
      grid-auto-rows: minmax(2rem, auto);
      column-gap: .5rem;
      
      .label {
        display: flex;
        align-items: center;
        text-align: left;
        font-weight: 500;
        font-size: .75rem;
        line-height: .75rem;
        color: var(--theme-content-color);
      }    
      .value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }    
    }
  }

  &.dialog {
    height: auto;
    max-height: inherit;

    &.large {   // 720
      width: 45rem;
      max-width: 60rem;
    }
    &.medium {   // 600
      width: 37.5rem;
      max-width: 37.5rem;
    }
    &.small {   // 480
      width: 30rem;
      max-width: 30rem;
    }
    &.x-small { // 400
      width: 25rem;
      max-width: 25rem;
    }
    &.menu { // 280
      width: 17.5rem;
      max-width: 17.5rem;
    }
    &.full {
      width: max-content;
      // max-width: 100%;
    }
  }
  &.mobile {
    width: 90vw;
    max-width: 90vw;
    max-height: 90vh;

    .antiCard-header {
      padding: .75rem .75rem .375rem;

      &__divider, &__title {
        font-weight: 400;
        font-size: .8125rem;
      }
    }
    .antiCard-content { margin: .5rem 1.125rem 1rem; }
    .antiCard-pool {
      flex-direction: row;
      align-items: center;
      margin: 0 .5rem .25rem;
      font-size: .75rem;
    }
    .antiCard-footer {
      padding: .75rem;
      height: auto;
    }
  }
}

/* Dialog */
.antiDialog {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 25rem;
  min-height: 0;
  background-color: var(--theme-popup-color);
  border-radius: .5rem;
  
  &:not(.fullsize) {
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--theme-popup-divider);
    box-shadow: var(--theme-popup-shadow);
  }
  &.fullsize {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .header {
    flex-shrink: 0;
    padding: .25rem .5rem;
    background-color: var(--theme-popup-header);
    border-bottom: 1px solid var(--theme-popup-divider);
    border-radius: .5rem .5rem 0 0;

    .title {
      flex-grow: 1;
      font-size: 1rem;
      color: var(--theme-caption-color);
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;

    &.rounded { border-radius: 0 0 .5rem .5rem; }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: .25rem .5rem;
    border-top: 1px solid var(--theme-popup-divider);
    border-radius: 0 0 .5rem .5rem;
  }
}