Skip to content

Commit c077926

Browse files
andygupandygup
committed
chore: udpate for 4.30
1 parent f9613ae commit c077926

28 files changed

+926
-685
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
This repository is used as a reference for the [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/) widget styles documentation.
44

5-
If you are starting a new project, we recommend using [@arcgis/core](https://developers.arcgis.com/javascript/latest/es-modules/) ES modules.
5+
If you are starting a new project, we recommend using a local build with components or @arcgis/core. See the [Get started with npm](https://developers.arcgis.com/javascript/latest/get-started-npm/) guide topic for more information.
66

7+
**Looking for 3.x?** The ArcGIS for JavaScript 3.x has been retired. See the [retirement announcement](https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/arcgis-api-for-javascript-version-3-x-retirement/) for more information.
78

89
## Requirements
910

‎assets/esri/themes/base/widgets/_BasemapLayerList.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,22 @@
1515
margin-inline-start: 0.25rem;
1616
}
1717

18+
.esri-basemap-layer-list__item-catalog-icon {
19+
margin-inline-end: 0;
20+
}
21+
22+
.esri-basemap-layer-list__item-action-image {
23+
@include layerListActionImage();
24+
}
25+
26+
.esri-basemap-layer-list__action-menu .esri-basemap-layer-list__action-group {
27+
display: none;
28+
}
29+
30+
.esri-basemap-layer-list__action-menu[open] .esri-basemap-layer-list__action-group {
31+
display: flex;
32+
}
33+
1834
.esri-basemap-layer-list__visible-icon {
1935
visibility: hidden;
2036
}
@@ -27,7 +43,7 @@
2743
}
2844
}
2945

30-
.esri-basemap-layer-list__item--invisible-at-scale {
46+
.esri-basemap-layer-list__item--invisible {
3147
color: $interactive-font-color--disabled;
3248
}
3349

‎assets/esri/themes/base/widgets/_BuildingDisciplinesTree.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,12 @@
4141
padding-bottom: $side-spacing--quarter;
4242
font-size: $font-size;
4343
font-weight: $font-weight--light;
44+
45+
span {
46+
min-width: 0;
47+
word-break: break-word;
48+
text-wrap: pretty;
49+
}
4450
}
4551

4652
.#{$collapse-toggle} {

‎assets/esri/themes/base/widgets/_CatalogLayerList.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@mixin catalogLayerList() {
2+
.esri-catalog-layer-list {
3+
display: flex;
4+
}
5+
6+
.esri-catalog-layer-list__filter-no-results {
7+
@include layerListFilterNoResults();
8+
}
9+
10+
.esri-catalog-layer-list__item {
11+
--calcite-list-item-spacing-indent: 2rem;
12+
--calcite-list-item-icon-center: 8.5px;
13+
}
14+
15+
.esri-catalog-layer-list__item-temporary-icon {
16+
margin-inline-start: 0.25rem;
17+
}
18+
19+
.esri-catalog-layer-list__item-table-icon {
20+
margin-inline-end: 0;
21+
}
22+
23+
.esri-catalog-layer-list__item-action-image {
24+
@include layerListActionImage();
25+
}
26+
27+
.esri-catalog-layer-list__action-menu .esri-catalog-layer-list__action-group {
28+
display: none;
29+
}
30+
31+
.esri-catalog-layer-list__action-menu[open] .esri-catalog-layer-list__action-group {
32+
display: flex;
33+
}
34+
35+
.esri-catalog-layer-list__visible-icon {
36+
visibility: hidden;
37+
}
38+
39+
.esri-catalog-layer-list__item--active:hover,
40+
.esri-catalog-layer-list__item--active:focus,
41+
.esri-catalog-layer-list__item--active:focus-within {
42+
> .esri-catalog-layer-list__visible-toggle > .esri-catalog-layer-list__visible-icon {
43+
visibility: visible;
44+
}
45+
}
46+
47+
.esri-catalog-layer-list__item--invisible {
48+
color: $interactive-font-color--disabled;
49+
}
50+
51+
.esri-catalog-layer-list__status-indicator {
52+
@include layerListStatusIndicator();
53+
}
54+
55+
.esri-catalog-layer-list__publishing {
56+
@include layerListPublishingIndicator();
57+
58+
transform-origin: var(--calcite-list-item-icon-center) var(--calcite-list-item-icon-center);
59+
animation: esri-catalog-layer-list__publishing-anim 2s normal infinite;
60+
}
61+
62+
.esri-catalog-layer-list__updating {
63+
@include layerListUpdatingIndicator();
64+
65+
animation: esri-catalog-layer-list__updating-anim 2s normal infinite;
66+
}
67+
68+
.esri-catalog-layer-list__connection-status {
69+
@include layerListConnectionStatus();
70+
}
71+
72+
.esri-catalog-layer-list__connection-status--connected {
73+
color: $connection-connected;
74+
}
75+
76+
.esri-catalog-layer-list__item-content {
77+
@include layerListItemContent();
78+
}
79+
80+
.esri-catalog-layer-list__item-content-bottom {
81+
@include layerListContentBottom();
82+
}
83+
84+
.esri-catalog-layer-list__item-content-bottom .esri-legend__service {
85+
@include layerListLegend();
86+
}
87+
88+
.esri-catalog-layer-list__item-message {
89+
@include layerListContentBottom();
90+
}
91+
92+
@keyframes esri-catalog-layer-list__updating-anim {
93+
@include layerListUpdating();
94+
}
95+
96+
@keyframes esri-catalog-layer-list__publishing-anim {
97+
@include layerListPublishing();
98+
}
99+
}
100+
101+
@if $include_CatalogLayerList == true {
102+
@include catalogLayerList();
103+
}

‎assets/esri/themes/base/widgets/_ColorPicker.scss‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,24 +49,7 @@
4949
}
5050

5151
&__popover {
52-
@include defaultBoxShadow();
53-
54-
background: var(--calcite-color-foreground-1); // match color picker background
55-
width: 272px; // calcite-color-picker may not render immediately, so we make sure we have the right width right away.
56-
max-height: 70vh;
57-
overflow: hidden auto;
58-
}
59-
60-
&__opacity-slider-container {
61-
padding: $cap-spacing $side-spacing;
62-
}
63-
64-
&__opacity-slider {
65-
margin-inline: 8px; // Align slider handles
66-
}
67-
68-
&__calcite-color-picker {
69-
--calcite-color-border-1: transparent;
52+
--calcite-color-border-1: none;
7053
}
7154
}
7255
}

‎assets/esri/themes/base/widgets/_CoordinateConversion.scss‎

Lines changed: 4 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -55,26 +55,6 @@
5555
background-color: $background-color--hover;
5656
}
5757

58-
.esri-coordinate-conversion__button {
59-
border-color: $interactive-font-color;
60-
background-color: $background-color;
61-
width: auto;
62-
min-width: 30%;
63-
max-width: 50%;
64-
color: $interactive-font-color;
65-
}
66-
67-
.esri-coordinate-conversion__convert-button-span {
68-
overflow: hidden;
69-
text-overflow: ellipsis;
70-
}
71-
72-
.esri-coordinate-conversion__button:hover {
73-
border-color: $interactive-font-color;
74-
background-color: $interactive-font-color;
75-
color: $background-color;
76-
}
77-
7858
.esri-coordinate-conversion__input-group {
7959
display: flex;
8060
align-items: center;
@@ -89,18 +69,12 @@
8969
}
9070

9171
.esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] {
72+
flex: 1;
9273
margin: 0;
93-
border: 1px solid $border-color;
94-
padding: 0 0.5em;
95-
width: 100%;
9674
height: 2em;
9775
font-size: $font-size--small;
9876
}
9977

100-
.esri-coordinate-conversion__input-coordinate--rejected {
101-
text-decoration: underline red;
102-
}
103-
10478
.esri-coordinate-conversion__settings {
10579
display: flex;
10680
flex-direction: column;
@@ -161,9 +135,7 @@
161135
}
162136

163137
.esri-coordinate-conversion__pattern-input {
164-
padding: 4px;
165138
width: 100%;
166-
height: $button-height;
167139
}
168140

169141
.esri-coordinate-conversion__tools {
@@ -173,21 +145,12 @@
173145
padding: 0;
174146
}
175147

176-
.esri-coordinate-conversion__select-primary {
177-
margin: 0;
178-
padding: 0 2.5em 0 0.5em;
179-
width: auto;
180-
font-size: inherit;
148+
.esri-coordinate-conversion__select-row {
149+
text-align-last: center;
181150
}
182151

183-
.esri-coordinate-conversion__select-row {
184-
flex: 0 0 75px;
185-
margin: 0;
186-
background: $background-color;
187-
padding: 0 0.5em;
188-
height: 2em;
152+
.esri-coordinate-conversion__input-select {
189153
text-align-last: center;
190-
font-size: inherit;
191154
}
192155

193156
.esri-coordinate-conversion__conversions-view {
@@ -233,16 +196,6 @@
233196
.esri-widget__heading {
234197
margin: 0 auto;
235198
}
236-
237-
.esri-coordinate-conversion__back-button {
238-
position: absolute;
239-
margin-inline-start: 0;
240-
background-color: $background-color--offset;
241-
242-
&:hover {
243-
background-color: $background-color;
244-
}
245-
}
246199
}
247200

248201
.esri-coordinate-conversion__popup {

‎assets/esri/themes/base/widgets/_Daylight.scss‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,11 @@
3636
justify-content: space-between;
3737
}
3838

39-
.esri-date-picker,
39+
&__date-picker,
4040
&__season-picker {
4141
flex-grow: 1;
4242
}
4343

44-
.esri-date-picker__calendar-toggle {
45-
height: 32px;
46-
font-size: $font-size--small;
47-
}
48-
49-
&__container--disabled .esri-date-picker {
50-
opacity: $opacity--disabled;
51-
pointer-events: none;
52-
}
53-
5444
&__play-pause-button {
5545
flex: 0;
5646
}
@@ -75,7 +65,7 @@
7565
}
7666

7767
.esri-slider.esri-slider--horizontal {
78-
z-index: 1;
68+
z-index: 2; // Ensure the timezone popover stays on top of the date picker (which has a z-index=1) - #60677
7969

8070
.esri-slider-with-dropdown__box {
8171
display: flex;
@@ -102,10 +92,6 @@
10292
font-variant-numeric: tabular-nums;
10393
}
10494

105-
.esri-slider__tick-label {
106-
line-height: 1em;
107-
}
108-
10995
.esri-slider__label-input {
11096
display: inline-block;
11197
}

‎assets/esri/themes/base/widgets/_Directions.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
}
1111

1212
.esri-directions__panel-content {
13+
display: flex;
14+
flex-flow: column;
1315
padding: $cap-spacing 0;
1416
}
1517

@@ -33,10 +35,14 @@
3335
.esri-directions__travel-modes,
3436
.esri-directions__departure-time {
3537
display: flex;
36-
flex-direction: column;
3738
align-items: center;
3839
padding-inline: $side-spacing;
39-
width: 100%;
40+
}
41+
42+
.esri-directions__travel-modes .esri-select,
43+
.esri-directions__departure-time .esri-select {
44+
flex: 1 0 auto;
45+
width: auto;
4046
}
4147

4248
.esri-directions__panel-content--sign-in,
@@ -87,7 +93,6 @@
8793

8894
display: flex;
8995
flex-direction: column;
90-
width: 100%;
9196
}
9297

9398
.esri-directions__departure-date-time-pickers {
@@ -435,7 +440,6 @@
435440
align-items: center;
436441
margin-top: 12px;
437442
padding-inline: 15px;
438-
width: 100%;
439443
}
440444

441445
&__save-buttons,

‎assets/esri/themes/base/widgets/_Editor.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@
156156
flex-direction: row;
157157
border-bottom: var(--divider-border);
158158
background-color: var(--calcite-color-foreground-1);
159+
overflow-wrap: anywhere;
159160
}
160161

161162
&__settings {
@@ -173,6 +174,10 @@
173174
margin-bottom: $cap-spacing;
174175
}
175176

177+
.esri-snapping-controls__layer-list {
178+
max-height: 220px;
179+
}
180+
176181
// ---------------------------------------------------------------------------------------------
177182
// Panel Content
178183
// ---------------------------------------------------------------------------------------------

0 commit comments

Comments
 (0)