diff options
| -rw-r--r-- | app/common/styles/elements/modals.scss | 47 | ||||
| -rw-r--r-- | app/configuration/controllers/network-controller.html | 1 |
2 files changed, 25 insertions, 23 deletions
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss index 396b46e..1a8b71f 100644 --- a/app/common/styles/elements/modals.scss +++ b/app/common/styles/elements/modals.scss @@ -1,34 +1,36 @@ .modal-overlay { - width:100%; - height:100%; - z-index:-1; - background-color:#000; - position:fixed; - top:0; - left:0; - margin:0; - padding:0; + width: 100%; + height: 100%; + z-index: -1; + background-color: #000; + position: fixed; + top: 0; + left: 0; + margin: 0; + padding: 0; opacity: 0; } .modal-overlay.active{ - z-index:100; + z-index: 100; opacity: .5; display: block; @include fastTransition-all; } .modal { - width:50%; + width: auto; + height: auto; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); max-width: 850px; - margin: .5em auto; + min-width: 450px; padding: .8em 1.5em; border: thin #000 solid; - background-color:#fff; - z-index:101; - position:fixed; - top:-100%; - left:25%; + background-color :#fff; + z-index: 101; + position: fixed; overflow: hidden; @include fastTransition-all; @include mediaQuery(medium) { @@ -37,7 +39,6 @@ } .modal.active{ - top: 25%; @include fastTransition-all; display: block; } @@ -47,11 +48,11 @@ } .screen-reader-offscreen { - position:absolute; - left:-999px; - width:1px; - height:1px; - top:auto; + position: absolute; + left: -999px; + width: 1px; + height: 1px; + top: auto; } .modal__content { border-bottom: 1px solid $lightbg__grey; diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html index 6500c0b..0a8b7c7 100644 --- a/app/configuration/controllers/network-controller.html +++ b/app/configuration/controllers/network-controller.html @@ -102,6 +102,7 @@ </section> </form> </div> +<div class="modal-overlay" tabindex="-1" ng-class="{'active': confirmSettings}"></div> <section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog" ng-class="{'active': confirmSettings}"> <div class="modal__tftp-unreachable" role="document"> <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers --> |
