123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- @mixin identityModal() {
- .esri-identity-modal {
- box-sizing: border-box;
- color: $font-color;
- display: none;
- font-size: $font-size;
- font-family: $font-family;
- line-height: $line-height;
- background-color: $background-color;
- }
- .esri-identity-modal--open {
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background: $background-color--overlay;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- z-index: 1001;
- transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
- opacity: 1;
- .esri-identity-modal__dialog {
- position: relative;
- top: auto;
- left: auto;
- right: auto;
- bottom: auto;
- border: none;
- background: $background-color;
- overflow: auto;
- border-radius: 0px;
- outline: none;
- padding: $cap-spacing--plus-half $side-spacing--plus-half;
- max-width: 40vw;
- max-height: 80vh;
- box-sizing: border-box;
- z-index: 102;
- text-align: left;
- display: inline-block;
- vertical-align: middle;
- transition: margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
- margin-top: 0px;
- }
- }
- .esri-identity-modal__title {
- font-size: $font-size__h1;
- margin: 0 0 $cap-spacing 0;
- padding: 0;
- }
- .esri-identity-modal__close-button {
- color: $interactive-font-color;
- position: absolute;
- top: $cap-spacing;
- right: $side-spacing--half;
- z-index: 1;
- background: none;
- border: none;
- display: flex;
- align-items: center;
- justify-content: center;
- width: $button-width;
- height: $button-height;
- cursor: pointer;
- }
- .esri-identity-modal__content {
- margin-top: $cap-spacing--plus-half;
- }
- .esri-identity-form__group {
- margin-bottom: $cap-spacing;
- }
- .esri-identity-form__label {
- display: flex;
- flex-flow: column;
- }
- .esri-identity-form__footer {
- display: flex;
- justify-content: space-between;
- margin-top: $cap-spacing;
- }
- @media only screen and (max-width: 680px) {
- .esri-identity-modal--open .esri-identity-modal__dialog {
- max-width: unset;
- width: 75vw;
- }
- }
- [dir="rtl"] {
- .esri-identity-modal--open .esri-identity-modal__dialog {
- text-align: right;
- }
- .esri-identity-modal__close-button {
- right: unset;
- left: $side-spacing--half;
- }
- }
- }
- @if $include_IdentityModal == true {
- @include identityModal();
- }
|