_Sketch.scss 2.84 KB
Newer Older
1 2 3 4 5 6
@mixin sketch() {
  $border: 1px solid $border-color;

  .esri-sketch {
    display: flex;
    flex-flow: column wrap;
杨思琦's avatar
杨思琦 committed
7
  }
8

杨思琦's avatar
杨思琦 committed
9 10 11
  .esri-expand__content {
    .esri-sketch {
      width: max-content;
12
    }
13 14 15 16 17
  }

  .esri-sketch__menu-header {
    display: flex;
    align-items: center;
杨思琦's avatar
杨思琦 committed
18
    margin-block-end: $cap-spacing--half;
19 20 21 22 23 24 25 26 27
  }

  .esri-sketch__menu-title {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .esri-sketch__panel {
    display: flex;
杨思琦's avatar
杨思琦 committed
28 29 30
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-end;
31 32 33 34
    padding: 0;
  }

  .esri-sketch__info-panel {
杨思琦's avatar
杨思琦 committed
35
    justify-content: flex-start;
36
    transition: opacity 250ms ease-in-out;
杨思琦's avatar
杨思琦 committed
37 38 39
    opacity: 1;
    background-color: $background-color--offset;

40
    &:empty {
杨思琦's avatar
杨思琦 committed
41
      visibility: hidden;
42 43 44 45 46 47 48 49
      opacity: 0;
      padding: 0;
    }
  }

  .esri-sketch__menu-container {
    display: flex;
    flex: 1 1 auto;
杨思琦's avatar
杨思琦 committed
50
    flex-flow: column;
51
    margin: $cap-spacing--half;
52 53 54 55
  }

  .esri-sketch__section {
    display: flex;
杨思琦's avatar
杨思琦 committed
56 57
    flex-flow: row wrap;
    align-items: center;
58
    margin: $cap-spacing--half 0;
杨思琦's avatar
杨思琦 committed
59
    padding: 0 $side-spacing--half;
60 61 62 63
  }

  .esri-sketch__tool-section {
    border-right: $border;
杨思琦's avatar
杨思琦 committed
64

65 66 67 68 69 70 71
    &:last-child {
      border-right: none;
    }
  }

  .esri-sketch__action-toggle--on .esri-sketch__item-action-icon {
    box-shadow: 0 0 0 1px $button-color;
杨思琦's avatar
杨思琦 committed
72
    background-color: $button-color;
73

杨思琦's avatar
杨思琦 committed
74
    &::before {
75
      left: $toggle-handle-size;
杨思琦's avatar
杨思琦 committed
76
      background-color: $interactive-font-color--inverse;
77 78 79 80 81
    }
  }

  .esri-sketch__feature-count-badge {
    display: flex;
杨思琦's avatar
杨思琦 committed
82
    align-items: center;
83 84
    justify-content: center;
    margin: 0;
杨思琦's avatar
杨思琦 committed
85 86 87
    border-bottom: $border;
    border-radius: $border-radius;
    background: $background-color;
88
    padding: 0.25em 0.75em;
杨思琦's avatar
杨思琦 committed
89
    font-size: $font-size--small;
90 91
  }

92
  [dir="rtl"] {
93 94
    .esri-sketch__tool-section {
      border-right: none;
杨思琦's avatar
杨思琦 committed
95
      border-left: $border;
96 97 98 99 100

      &:last-child {
        border: none;
      }
    }
杨思琦's avatar
杨思琦 committed
101

102 103 104 105
    .esri-expand__content {
      .esri-sketch--vertical {
        .esri-sketch__tool-section {
          border-right: none;
杨思琦's avatar
杨思琦 committed
106
          border-left: none;
107 108 109 110 111 112
        }
      }
    }
  }

  .esri-sketch--vertical {
杨思琦's avatar
杨思琦 committed
113
    flex-flow: row-reverse;
114 115 116

    .esri-sketch__panel {
      flex-flow: column;
杨思琦's avatar
杨思琦 committed
117
      justify-content: flex-start;
118
    }
杨思琦's avatar
杨思琦 committed
119

120 121
    .esri-sketch__section {
      flex-flow: column;
杨思琦's avatar
杨思琦 committed
122 123
      margin: 0 $cap-spacing--half;
      padding: $side-spacing--half 0;
124
    }
杨思琦's avatar
杨思琦 committed
125

126 127 128
    .esri-sketch__tool-section {
      border-right: none;
      border-bottom: $border;
杨思琦's avatar
杨思琦 committed
129 130
      border-left: none;

131
      &:last-child {
杨思琦's avatar
杨思琦 committed
132
        border: none;
133 134
      }
    }
杨思琦's avatar
杨思琦 committed
135

136 137 138 139 140
    .esri-sketch__info-panel {
      &:empty {
        padding: 0;
      }
    }
杨思琦's avatar
杨思琦 committed
141

142 143 144 145
    .esri-sketch__info-section {
      margin-top: $cap-spacing--quarter;
      width: $button-width;
    }
146 147 148 149

    .esri-selection-toolbar__container {
      flex-direction: column;
    }
150 151 152 153 154 155
  }
}

@if $include_Sketch == true {
  @include sketch();
}