penpot/frontend/src/app/main/ui/viewer/share_link.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@import "refactor/common-refactor.scss";

.share-modal {
  display: block;
  position: absolute;
  top: $s-52;
  right: $s-12;
  left: calc(100vw - $s-512);
  z-index: $z-index-modal;
}

.share-link-dialog {
  @extend .modal-container-base;
  min-height: unset;
}

.share-link-header {
  margin-bottom: $s-24;
}

.share-link-title {
  @include uppercaseTitleTipography;
  color: var(--modal-title-foreground-color);
}

.modal-close-button {
  @extend .modal-close-btn-base;
}

.modal-content {
  @include bodySmallTypography;
  @include flexColumn;
  gap: $s-24;
}

.share-link-section {
  @include flexColumn;
  gap: $s-8;
}

.hint-wrapper {
  @include flexRow;
}

.hint {
  flex-grow: 1;
  color: var(--modal-text-foreground-color);
}

.custon-input-wrapper {
  @include flexRow;
  border-radius: $br-8;
  height: $s-32;
  width: 100%;
  background-color: var(--input-background-color);
}

.input-text {
  @extend .input-element;
  color: var(--input-foreground-color-active);
  padding-left: $s-8;
  margin: 0;
  flex-grow: 1;
  &:focus {
    outline: none;
    border: $s-1 solid var(--input-border-color-active);
  }
}

.copy-button {
  @extend .button-secondary;
  @include flexRow;
  gap: $s-8;
  height: $s-32;
  width: $s-28;
  svg {
    @extend .button-icon;
    stroke: var(--icon-foreground-hover);
  }
}

.description {
  @include bodySmallTypography;
  color: var(--modal-text-foreground-color);
  margin-bottom: $s-24;
}

.actions {
  @include flexRow;
  justify-content: flex-end;
}

.button-active {
  @extend .modal-accept-btn;
}

.button-cancel {
  @extend .modal-cancel-btn;
}

.button-danger {
  @extend .modal-danger-btn;
}

.permissions-section {
  @include flexColumn;
  gap: $s-8;
}

.manage-permissions {
  @include buttonStyle;
  @include uppercaseTitleTipography;
  color: var(--menu-foreground-color-rest);
  height: $s-32;
  display: flex;
  align-items: center;
  padding: 0;
}

.icon {
  @include flexCenter;
  margin-right: $s-6;
  svg {
    @extend .button-icon;
    stroke: var(--icon-foreground);
  }
  &.rotated {
    transform: rotate(90deg);
  }
}

.view-mode,
.access-mode,
.inspect-mode {
  display: flex;
  width: 100%;
}

.view-mode {
  max-height: $s-216;
  overflow: hidden auto;
  scrollbar-gutter: stable;
}

.subtitle {
  color: var(--modal-text-foreground-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: $s-136;
  height: $s-32;
}

.items {
  flex-grow: 1;
  color: var(--input-foreground-color-active);
}
.select-all-row {
  @include flexRow;
  justify-content: space-between;
  height: $s-32;
  border-bottom: $s-1 solid var(--input-border-color-disabled);
}
.select-all-label {
  color: var(--input-foreground-color-active);
}
.pages-selection {
  margin: 0;
  li {
    border-bottom: $s-1 solid var(--input-border-color-disabled);
  }
  li:last-child {
    border-bottom: none;
  }
}
.count-pages,
.current-tag {
  @include bodySmallTypography;
  color: var(--input-foreground-color);
}

.checkbox-wrapper {
  @extend .input-checkbox;
  height: $s-32;
  padding: 0;
  span.checked {
    background-color: var(--input-checkbox-background-color-active);
    border: $s-1 solid var(--input-checkbox-background-color-active);
    svg {
      @extend .button-icon-small;
      stroke: var(--input-checkbox-foreground-color-active);
    }
  }
}