479 lines
10 KiB
SCSS
479 lines
10 KiB
SCSS
|
@mixin directions() {
|
||
|
|
$border_size: 2px;
|
||
|
|
$directions-height--max: 420px !default;
|
||
|
|
|
||
|
|
.esri-directions {
|
||
|
|
color: $font-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__panel-content {
|
||
|
|
padding: $cap-spacing 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__sign-in-panel {
|
||
|
|
color: $interactive-font-color;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__section {
|
||
|
|
margin-top: $cap-spacing;
|
||
|
|
margin-bottom: $cap-spacing;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__section-splitter {
|
||
|
|
width: 100%;
|
||
|
|
margin: $cap-spacing--plus-half 0;
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__travel-modes,
|
||
|
|
.esri-directions__departure-time {
|
||
|
|
margin: 0 $side-spacing $cap-spacing--half;
|
||
|
|
width: calc(100% - #{$side-spacing--double});
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__panel-content--sign-in,
|
||
|
|
.esri-directions__panel-content--loading,
|
||
|
|
.esri-directions__panel-content--error {
|
||
|
|
min-height: $directions-height--max;
|
||
|
|
margin: 0 $cap-spacing;
|
||
|
|
color: $interactive-font-color;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__loader {
|
||
|
|
height: 40px;
|
||
|
|
width: 32px;
|
||
|
|
background: url(../base/images/loading-throb.gif) no-repeat center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__warning-card {
|
||
|
|
border-top: solid 2px $border-color--error;
|
||
|
|
color: $interactive-font-color;
|
||
|
|
@include defaultBoxShadow();
|
||
|
|
padding: 12px;
|
||
|
|
margin: 20px auto;
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__warning-header {
|
||
|
|
color: $font-color--error;
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__warning-heading {
|
||
|
|
color: inherit;
|
||
|
|
margin: 0 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__warning-message {
|
||
|
|
color: inherit;
|
||
|
|
font-weight: $font-weight;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls .esri-date-picker,
|
||
|
|
.esri-directions__departure-time-controls .esri-time-picker {
|
||
|
|
flex: 1 1 0%;
|
||
|
|
border: 1px solid $border-color--input;
|
||
|
|
border-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls .esri-widget:first-child {
|
||
|
|
border-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls .esri-time-picker {
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls .esri-time-picker__input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 0.5em;
|
||
|
|
margin: 0;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__departure-time-controls .esri-date-picker__calendar-toggle {
|
||
|
|
padding: 0 0.5em;
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__directions-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__sign-in-content {
|
||
|
|
align-self: flex-start;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__sign-in-button {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__content-title {
|
||
|
|
margin-top: 0;
|
||
|
|
padding: 0 $cap-spacing;
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__summary {
|
||
|
|
display: flex;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__summary-controls {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stops {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
flex-direction: column;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 10px 0;
|
||
|
|
border-top: dashed $border_size transparent;
|
||
|
|
background-color: $background-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-row-ghost {
|
||
|
|
opacity: 0.25;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-handle {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
padding-inline-start: $side-spacing--half;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-search__sources-button {
|
||
|
|
@include icomoonIconSelector() {
|
||
|
|
position: relative;
|
||
|
|
left: 1px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-input {
|
||
|
|
margin: 0 4px;
|
||
|
|
flex-grow: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-input .esri-search .esri-search__input {
|
||
|
|
border: 1px solid $border-color--input;
|
||
|
|
height: auto;
|
||
|
|
margin-bottom: $border_size;
|
||
|
|
outline-offset: 4px;
|
||
|
|
min-height: $button-height;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__remove-stop-icon,
|
||
|
|
.esri-directions__stop-row:hover .esri-directions__remove-stop-icon[hidden] {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__remove-stop:focus .esri-directions__remove-stop-icon,
|
||
|
|
.esri-directions__stop-row:hover .esri-directions__remove-stop-icon {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__reverse-stops[hidden] {
|
||
|
|
display: inherit;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-options {
|
||
|
|
display: flex;
|
||
|
|
flex-grow: 0.1;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding-right: $side-spacing--half;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-row:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-row:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-icon[hidden] {
|
||
|
|
display: inline-block;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-icon--interactive {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-icon-container {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-icon-container--last::after {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__costs {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-around;
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: $cap-spacing $side-spacing 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__costs-details {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
white-space: nowrap;
|
||
|
|
width: 80%;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__costs-units {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__costs-value,
|
||
|
|
.esri-directions__other-costs-total,
|
||
|
|
.esri-directions__vertical-splitter {
|
||
|
|
color: $interactive-font-color;
|
||
|
|
font-size: 1.5em;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__vertical-splitter {
|
||
|
|
border: 1px solid transparentize($font-color, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__horizontal-splitter {
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
flex-grow: 0.95;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuvers {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
margin: $cap-spacing--plus-half 0 0 0;
|
||
|
|
padding: 0;
|
||
|
|
border-top: 1px solid $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-list {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver {
|
||
|
|
display: flex;
|
||
|
|
padding: $cap-spacing $side-spacing--half;
|
||
|
|
border: none;
|
||
|
|
border-inline-start: $border-size--active solid transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver:hover,
|
||
|
|
.esri-directions__maneuver:focus {
|
||
|
|
background-color: $background-color--hover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver--active,
|
||
|
|
.esri-directions__maneuver--active:hover,
|
||
|
|
.esri-directions__maneuver--active:focus {
|
||
|
|
border-color: $border-color--active;
|
||
|
|
background-color: $background-color--active;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-section--collapsible {
|
||
|
|
border-bottom: 1px solid $border-color;
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
.esri-directions__maneuver-list {
|
||
|
|
background-color: $background-color--offset;
|
||
|
|
padding-bottom: $cap-spacing;
|
||
|
|
padding-top: $cap-spacing;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-section-header {
|
||
|
|
display: flex;
|
||
|
|
padding: 0 $side-spacing--half;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-section-header-toggle-button {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
padding: $cap-spacing $side-spacing--half;
|
||
|
|
.esri-directions__maneuver-section-title {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-section-title {
|
||
|
|
padding: $cap-spacing $side-spacing--half;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-section-toggle {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-icon {
|
||
|
|
fill: $font-color;
|
||
|
|
margin-right: 4px;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-costs {
|
||
|
|
margin-top: $cap-spacing--half;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__cost--intermediate {
|
||
|
|
font-size: $font-size--small;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__maneuver-costs-container {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__scroller {
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__stop-row--valid {
|
||
|
|
.esri-directions__stop-handle:hover {
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// search overrides
|
||
|
|
.esri-directions .esri-search {
|
||
|
|
box-shadow: none;
|
||
|
|
width: auto;
|
||
|
|
|
||
|
|
.esri-search__submit-button {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions .esri-search .esri-search__container:before {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions .esri-search .esri-search__container:after {
|
||
|
|
top: auto;
|
||
|
|
bottom: -2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-ui-bottom-left,
|
||
|
|
.esri-ui-bottom-right {
|
||
|
|
.esri-directions {
|
||
|
|
.esri-search {
|
||
|
|
.esri-search__sources-button--up {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.esri-search__sources-button--down {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-ui-bottom-right,
|
||
|
|
.esri-ui-bottom-left {
|
||
|
|
.esri-directions .esri-menu {
|
||
|
|
top: 100%;
|
||
|
|
bottom: auto;
|
||
|
|
margin: $cap-spacing--eighth 0 0 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] {
|
||
|
|
.esri-directions__departure-time-controls .esri-time-picker {
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
.esri-directions__departure-time-controls .esri-date-picker__calendar-toggle {
|
||
|
|
border-right: solid 1px $border-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions {
|
||
|
|
&__save-section,
|
||
|
|
&__toolbar-section {
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-top: 12px;
|
||
|
|
padding-inline: 15px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
&__save-buttons,
|
||
|
|
&__toolbar-buttons {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
&__save-button,
|
||
|
|
&__save-as-button,
|
||
|
|
&__add-stop-button {
|
||
|
|
margin-inline-end: 5px;
|
||
|
|
}
|
||
|
|
&__save-as-button-with-popover {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.esri-directions__message_heading {
|
||
|
|
padding: 12px 7px;
|
||
|
|
margin: 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $include_Directions == true {
|
||
|
|
@include directions();
|
||
|
|
}
|