_Features.scss 1.88 KB
Newer Older
杨思琦's avatar
杨思琦 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
@mixin features() {
  // actions
  $action-size: $button-width--half !default;
  $action-size--image: $button-width--half !default;

  .esri-features {
    --calcite-ui-background: $background-color;

    display: flex;
    flex-direction: column;

    calcite-flow {
      position: relative;
      z-index: 1;
    }

    img {
      image-orientation: from-image;
    }
  }

  .esri-features__flow-item--collapsed {
    --calcite-flow-item-header-border-block-end: none;
  }

  .esri-features__container {
    background-color: var(--calcite-ui-background);
    padding: $cap-spacing;
  }

  .esri-features .esri-feature,
  .esri-features .esri-feature-relationship {
    background-color: transparent;
  }

  .esri-features__header,
  .esri-features__footer {
    display: flex;
    justify-content: flex-end;
    background-color: var(--calcite-ui-foreground-1);
  }

  .esri-features__loader {
    align-self: center;
    padding-inline: 1rem;
  }

  .esri-features__pagination-action-bar {
    flex: 1;
    border-inline-end: 1px solid var(--calcite-ui-border-3);
  }

  .esri-features__icon {
    display: inline-block;
    flex: 0 0 $action-size--image;
    width: $action-size;
    height: $action-size;
  }

  .esri-features__action-image {
    flex: 0 0 $action-size--image;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    width: $action-size--image;
    height: $action-size--image;
  }

  .esri-features__footer {
    flex: 1;
  }

  .esri-features__header {
    border-block-end: 1px solid var(--calcite-ui-border-3);
  }

  .esri-features__content-feature {
    --calcite-flow-item-footer-padding: 0;
  }

  .esri-features__feature-menu-observer {
    position: relative;
    bottom: 20px;
    z-index: 2;
    text-align: center;
  }

  .esri-features__action--exit {
    transform: scaleX(-1);
  }
}

@if $include_Features == true {
  @include features();
}