_CoordinateConversion.scss 6.19 KB
Newer Older
1 2 3
@mixin coordinateConversion() {
  .esri-coordinate-conversion {
    position: relative;
杨思琦's avatar
杨思琦 committed
4
    cursor: default;
5
    width: 400px;
杨思琦's avatar
杨思琦 committed
6 7
    font-size: $font-size--small;

8 9 10 11
    .esri-select option[disabled] {
      color: $interactive-font-color--disabled;
    }
  }
杨思琦's avatar
杨思琦 committed
12

13
  .esri-coordinate-conversion.esri-disabled {
杨思琦's avatar
杨思琦 committed
14 15 16 17
    @include icomoonIconSelector() {
      &::before {
        color: $interactive-font-color--disabled;
      }
18
    }
杨思琦's avatar
杨思琦 committed
19 20 21

    color: $interactive-font-color--disabled;
    pointer-events: none;
22
  }
杨思琦's avatar
杨思琦 committed
23

24 25 26 27
  .esri-coordinate-conversion--no-basemap {
    padding: 1em;
    width: auto;
  }
杨思琦's avatar
杨思琦 committed
28

29 30 31
  .esri-coordinate-conversion--capture-mode {
    .esri-coordinate-conversion__mode-toggle {
      background: $background-color--offset;
杨思琦's avatar
杨思琦 committed
32
      color: $interactive-font-color;
33 34
    }
  }
杨思琦's avatar
杨思琦 committed
35

36 37 38
  .esri-coordinate-conversion__conversion-list {
    display: flex;
    flex-direction: column;
杨思琦's avatar
杨思琦 committed
39 40 41
    margin: 0;
    padding: 0;
    list-style: none;
42
  }
杨思琦's avatar
杨思琦 committed
43

44
  .esri-coordinate-conversion__display {
杨思琦's avatar
杨思琦 committed
45 46
    @include wordbreak();

47 48
    flex: 1 1 auto;
    padding: 0.5em;
杨思琦's avatar
杨思琦 committed
49 50
    min-height: 2em;
    direction: ltr;
51
  }
杨思琦's avatar
杨思琦 committed
52

53 54 55 56
  .esri-coordinate-conversion__display:hover,
  .esri-coordinate-conversion__select-row:hover {
    background-color: $background-color--hover;
  }
杨思琦's avatar
杨思琦 committed
57

58 59 60
  .esri-coordinate-conversion__button {
    border-color: $interactive-font-color;
    background-color: $background-color;
杨思琦's avatar
杨思琦 committed
61 62 63 64 65 66 67 68 69
    width: auto;
    min-width: 30%;
    max-width: 50%;
    color: $interactive-font-color;
  }

  .esri-coordinate-conversion__convert-button-span {
    overflow: hidden;
    text-overflow: ellipsis;
70
  }
杨思琦's avatar
杨思琦 committed
71

72 73
  .esri-coordinate-conversion__button:hover {
    border-color: $interactive-font-color;
杨思琦's avatar
杨思琦 committed
74 75
    background-color: $interactive-font-color;
    color: $background-color;
76
  }
杨思琦's avatar
杨思琦 committed
77

78 79
  .esri-coordinate-conversion__input-group {
    display: flex;
杨思琦's avatar
杨思琦 committed
80
    align-items: center;
81 82
    justify-content: space-between;
    margin: $cap-spacing auto $cap-spacing auto;
杨思琦's avatar
杨思琦 committed
83 84
    width: 80%;

85 86 87 88 89
    label {
      display: flex;
      align-items: center;
    }
  }
杨思琦's avatar
杨思琦 committed
90

91 92 93
  .esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] {
    margin: 0;
    border: 1px solid $border-color;
杨思琦's avatar
杨思琦 committed
94 95
    padding: 0 0.5em;
    width: 100%;
96
    height: 2em;
杨思琦's avatar
杨思琦 committed
97
    font-size: $font-size--small;
98
  }
杨思琦's avatar
杨思琦 committed
99

100 101 102
  .esri-coordinate-conversion__input-coordinate--rejected {
    text-decoration: underline red;
  }
杨思琦's avatar
杨思琦 committed
103 104

  .esri-coordinate-conversion__settings {
105 106 107
    display: flex;
    flex-direction: column;
    align-items: center;
杨思琦's avatar
杨思琦 committed
108

109 110 111 112
    .esri-select {
      font-size: inherit;
    }
  }
杨思琦's avatar
杨思琦 committed
113

114 115 116 117 118
  .esri-coordinate-conversion__settings-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: $cap-spacing;
杨思琦's avatar
杨思琦 committed
119
    width: 60%;
120
  }
杨思琦's avatar
杨思琦 committed
121

122 123 124
  .esri-coordinate-conversion__settings-group > * {
    margin-bottom: 0.5em;
  }
杨思琦's avatar
杨思琦 committed
125

126 127
  .esri-coordinate-conversion__settings-group-horizontal {
    display: flex;
杨思琦's avatar
杨思琦 committed
128
    position: relative;
129 130 131
    flex-direction: row;
    width: 100%;
  }
杨思琦's avatar
杨思琦 committed
132

133 134 135
  .esri-coordinate-conversion__settings-group:last-child {
    margin-bottom: $cap-spacing--half;
    width: 100%;
杨思琦's avatar
杨思琦 committed
136
    text-align: center;
137
  }
杨思琦's avatar
杨思琦 committed
138

139 140 141
  .esri-coordinate-conversion__preview-coordinate {
    min-height: 1.25em;
  }
杨思琦's avatar
杨思琦 committed
142

143 144 145
  .esri-coordinate-conversion__row {
    display: flex;
    align-items: center;
杨思琦's avatar
杨思琦 committed
146 147
    justify-content: space-between;
    padding: 0 $side-spacing 0 $side-spacing;
148 149 150 151 152 153
    height: 3em;

    .esri-coordinate-conversion__row-button {
      display: none;
    }
  }
杨思琦's avatar
杨思琦 committed
154

155 156 157
  .esri-coordinate-conversion__row:hover .esri-coordinate-conversion__row-button {
    display: flex;
  }
杨思琦's avatar
杨思琦 committed
158

159 160 161
  .esri-coordinate-conversion__row:focus-within .esri-coordinate-conversion__row-button {
    display: flex;
  }
杨思琦's avatar
杨思琦 committed
162

163 164 165 166 167
  .esri-coordinate-conversion__pattern-input {
    padding: 4px;
    width: 100%;
    height: $button-height;
  }
杨思琦's avatar
杨思琦 committed
168

169 170 171
  .esri-coordinate-conversion__tools {
    display: flex;
    position: relative;
杨思琦's avatar
杨思琦 committed
172
    flex: 0 0 auto;
173 174
    padding: 0;
  }
杨思琦's avatar
杨思琦 committed
175

176 177 178 179
  .esri-coordinate-conversion__select-primary {
    margin: 0;
    padding: 0 2.5em 0 0.5em;
    width: auto;
杨思琦's avatar
杨思琦 committed
180
    font-size: inherit;
181
  }
杨思琦's avatar
杨思琦 committed
182

183
  .esri-coordinate-conversion__select-row {
杨思琦's avatar
杨思琦 committed
184 185
    flex: 0 0 75px;
    margin: 0;
186
    background: $background-color;
杨思琦's avatar
杨思琦 committed
187
    padding: 0 0.5em;
188 189
    height: 2em;
    text-align-last: center;
杨思琦's avatar
杨思琦 committed
190
    font-size: inherit;
191
  }
杨思琦's avatar
杨思琦 committed
192

193 194 195
  .esri-coordinate-conversion__conversions-view {
    margin: $cap-spacing--half 0 $cap-spacing--half 0;
  }
杨思琦's avatar
杨思琦 committed
196

197 198 199 200 201
  .esri-ui-top-right .esri-coordinate-conversion__conversions-view,
  .esri-ui-top-left .esri-coordinate-conversion__conversions-view,
  .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-down {
    display: flex;
    flex-direction: column;
杨思琦's avatar
杨思琦 committed
202

203 204 205 206
    .esri-coordinate-conversion__conversion-list {
      flex-direction: column;
    }
  }
杨思琦's avatar
杨思琦 committed
207

208 209 210 211 212
  .esri-ui-bottom-right .esri-coordinate-conversion__conversions-view,
  .esri-ui-bottom-left .esri-coordinate-conversion__conversions-view,
  .esri-coordinate-conversion div.esri-coordinate-conversion__conversions-view--expand-up {
    display: flex;
    flex-direction: column-reverse;
杨思琦's avatar
杨思琦 committed
213

214 215 216
    .esri-coordinate-conversion__conversion-list {
      flex-direction: column-reverse;
    }
杨思琦's avatar
杨思琦 committed
217

218 219 220 221 222 223 224
    .esri-widget--button {
      .esri-icon-up,
      .esri-icon-down {
        transform: rotate(180deg);
      }
    }
  }
杨思琦's avatar
杨思琦 committed
225

226 227 228
  .esri-coordinate-conversion__heading {
    display: flex;
    align-items: center;
杨思琦's avatar
杨思琦 committed
229 230 231 232
    background-color: $background-color--offset;
    width: 100%;
    height: $button-height;

233
    .esri-widget__heading {
杨思琦's avatar
杨思琦 committed
234
      margin: 0 auto;
235
    }
杨思琦's avatar
杨思琦 committed
236

237 238
    .esri-coordinate-conversion__back-button {
      position: absolute;
杨思琦's avatar
杨思琦 committed
239
      margin-inline-start: 0;
240
      background-color: $background-color--offset;
杨思琦's avatar
杨思琦 committed
241 242 243 244

      &:hover {
        background-color: $background-color;
      }
245 246
    }
  }
杨思琦's avatar
杨思琦 committed
247

248 249 250 251 252 253
  .esri-coordinate-conversion__popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
杨思琦's avatar
杨思琦 committed
254 255
    z-index: 1;
    background-color: $background-color--inverse;
256
    padding: 1em;
杨思琦's avatar
杨思琦 committed
257 258 259 260 261
    width: 50%;
    animation: esri-fade-in 250ms linear;
    text-align: center;
    white-space: inherit;
    color: $interactive-font-color--inverse;
262
  }
杨思琦's avatar
杨思琦 committed
263

264 265 266 267
  .esri-coordinate-conversion__clipboard-popup {
    top: auto;
    left: auto;
    transform: none;
杨思琦's avatar
杨思琦 committed
268 269 270 271
    width: auto;
    font-size: $font-size--tiny;
    pointer-events: none;
    user-select: none;
272
  }
273 274 275 276 277
}

@if $include_CoordinateConversion == true {
  @include coordinateConversion();
}