_modal.scss in active_frontend-11.0.0

- old
+ new

@@ -1,14 +1,15 @@
 /* Table of Contents
 ==================================================
 # Modal
+# Colors
 # Media Queries */
 
 /* # Modal
 ================================================== */
 .modal-backdrop {
-  background: rgba(35,41,55,0.9);
+  background: transparentize($color-black, 0.1);
   bottom: 0;
   height: 100%;
   left: 0;
   min-height: 100%;
   position: fixed;
@@ -26,105 +27,96 @@
 }
 .modal {
   background: $color-white;
   background-clip: padding-box;
   border-radius: 3px;
-  box-shadow: 0 0 3px rgba(0,0,0,0.3);
+  box-shadow: 0 0 3px transparentize($color-dark-black, 0.7);
   display: none;
   left: 50%;
   margin-left: -280px;
   outline: 0;
   position: fixed;
   top: 0;
   width: 560px;
   z-index: 1050;
 }
 .modal.fade {
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
+  @include transition((opacity 0.2s linear, top 0.4s ease-in-out));
   top: -100%;
 }
 .modal.fade.in { top: 15%; }
 .modal-header {
-  background: $color-white;
   border-bottom: 1px solid $color-haze;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-  padding: 22px 15px 20px 15px;
+  padding: 23px 15px 20px 15px;
 }
 .modal-header > h3 {
-  color: $color-black;
   font-size: 14px;
   letter-spacing: 1px;
-  line-height: 14px;
+  line-height: 1;
   margin: 0;
+  padding: 0;
   text-align: center;
   text-transform: uppercase;
 }
 .modal-body {
-  border-bottom: 1px solid $color-haze;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 15px 18px;
-  position: relative;
 }
 .modal-body .container { width: 100%; }
 .modal-body p:last-child { margin-bottom: 0; }
 .modal-footer {
+  border-top: 1px solid $color-haze;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-  margin-bottom: 0;
-  padding: 0;
 }
 .modal-footer:after { clear: both; }
-.modal-footer-btn,
-button.modal-footer-btn,
-input.modal-footer-btn {
-  -webkit-appearance: none;
-      -ms-appearance: none;
-          appearance: none;
-  background: $color-white;
+.modal-footer-btn {
+  @include appearance(none);
+  background: $color-transparent;
   border: 0;
+  border-right: 1px solid $color-haze;
   box-sizing: border-box;
-  color: $color-black !important;
+  color: inherit;
   cursor: pointer;
   float: left;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   font-size: 11px;
   font-weight: bold;
-  line-height: 11px;
+  line-height: 1;
   margin: 0;
-  padding: 22px 0;
+  padding: 22px 0 23px 0;
   text-align: center;
   text-indent: 0;
   text-rendering: geometricPrecision;
   text-transform: uppercase;
   touch-action: manipulation;
   vertical-align: middle;
   width: 100%;
 }
-.modal-footer-btn:first-child,
-button.modal-footer-btn:first-child,
-input.modal-footer-btn:first-child { border-bottom-left-radius: 3px; }
-.modal-footer-btn:last-child,
-button.modal-footer-btn:last-child,
-input.modal-footer-btn:last-child { border-bottom-right-radius: 3px; }
-.modal-footer-btn[disabled],
-button.modal-footer-btn[disabled],
-input.modal-footer-btn[disabled] {
-  color: $color-gray !important;
+.modal-footer-btn:last-child { border-right: 0; }
+.modal-footer-btn[disabled] {
+  color: $color-gray;
   cursor: not-allowed;
 }
-.modal-footer-btn-group > .modal-footer-btn,
-.modal-footer-btn-group > button.modal-footer-btn,
-.modal-footer-btn-group > input.modal-footer-btn {
-  border-right: 1px solid $color-haze;
-  width: 50%;
+.modal-footer-btn-group > .modal-footer-btn { width: 50%; }
+
+/* # Colors
+================================================== */
+.modal-dark {
+  background: $color-black;
+  color: $color-white;
 }
-.modal-footer-btn-group > .modal-footer-btn:last-child,
-.modal-footer-btn-group > button.modal-footer-btn:last-child,
-.modal-footer-btn-group > input.modal-footer-btn:last-child { border-right: none; }
+.modal-light { background: $color-light-haze; }
+.modal-dark .modal-header,
+.modal-dark .modal-footer,
+.modal-dark .modal-footer-btn { border-color: $color-dark-black; }
+.modal-light .modal-header,
+.modal-light .modal-footer,
+.modal-light .modal-footer-btn { border-color: $color-dark-haze; }
 
 /* # Media Queries
 ================================================== */
 @media only screen and (max-width: 767px) {
   .modal {
\ No newline at end of file