100 lines
2.1 KiB
SCSS
100 lines
2.1 KiB
SCSS
$earmark_size: 6px !default;
|
|
|
|
@mixin navigationToggle() {
|
|
.esri-navigation-toggle {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $background-color--hover;
|
|
.esri-navigation-toggle__button {
|
|
color: $interactive-font-color--hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.esri-navigation-toggle--horizontal {
|
|
flex-flow: row nowrap;
|
|
.esri-navigation-toggle__button--rotate {
|
|
border-top: none;
|
|
border-left: solid 1px $border-color;
|
|
}
|
|
}
|
|
|
|
.esri-navigation-toggle__button {
|
|
box-shadow: none;
|
|
position: relative;
|
|
background-color: transparent;
|
|
&:before {
|
|
@include earmarkStem();
|
|
opacity: 0;
|
|
border-width: 0 $earmark_size $earmark_size 0;
|
|
border-color: transparent $interactive-font-color--hover transparent transparent;
|
|
}
|
|
&:hover,
|
|
&:focus {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.esri-navigation-toggle__button--rotate {
|
|
border-top: solid 1px $border-color;
|
|
}
|
|
|
|
.esri-navigation-toggle__button--pan {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.esri-navigation-toggle__button--active {
|
|
color: $interactive-font-color--hover;
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.esri-navigation-toggle.esri-disabled {
|
|
.esri-navigation-toggle__button {
|
|
background-color: $background-color;
|
|
color: $interactive-font-color--disabled;
|
|
cursor: auto;
|
|
&:before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[dir="rtl"] {
|
|
.esri-navigation-toggle--horizontal {
|
|
.esri-navigation-toggle__button--rotate {
|
|
border-left: none;
|
|
border-right: solid 1px $border-color;
|
|
}
|
|
}
|
|
|
|
.esri-navigation-toggle__button {
|
|
&:before {
|
|
border-width: $earmark_size $earmark_size 0 0;
|
|
border-color: $interactive-font-color--hover transparent transparent transparent;
|
|
right: auto;
|
|
left: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin earmarkStem() {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
z-index: 0;
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
transition: opacity 125ms ease-in-out;
|
|
}
|
|
|
|
@if $include_NavigationToggle == true {
|
|
@include navigationToggle();
|
|
}
|