_modal.scss in active_frontend-12.0.0

- old
+ new

@@ -1,40 +1,25 @@
 /* Table of Contents
 ==================================================
 # Modal
+# Components
+# Styles
+# Directions
 # Colors
 # Media Queries */
 
 /* # Modal
 ================================================== */
-.modal-backdrop {
-  background: transparentize($color-black, 0.1);
-  bottom: 0;
-  height: 100%;
-  left: 0;
-  min-height: 100%;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 1040;
-}
-.modal-backdrop.fade {
-  filter: alpha(opacity=0);
-  opacity: 0;
-}
-.modal-backdrop.fade.in {
-  filter: alpha(opacity=100);
-  opacity: 1;
-}
 .modal {
   background: $color-white;
   background-clip: padding-box;
+  border-color: $color-haze;
   border-radius: 3px;
   box-shadow: 0 0 3px transparentize($color-dark-black, 0.7);
+  color: $color-black;
   display: none;
-  left: 50%;
-  margin-left: -280px;
+  margin-left: calc(50% - (560px / 2));
   outline: 0;
   position: fixed;
   top: 0;
   width: 560px;
   z-index: 1050;
@@ -42,17 +27,24 @@
 .modal.fade {
   @include transition((opacity 0.2s linear, top 0.4s ease-in-out));
   top: -100%;
 }
 .modal.fade.in { top: 15%; }
+.modal form { border-color: inherit; }
 .modal-header {
-  border-bottom: 1px solid $color-haze;
+  border-bottom: 1px solid;
+  border-color: inherit;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
   padding: 23px 15px 20px 15px;
 }
-.modal-header > h3 {
+.modal-header > h1,
+.modal-header > h2,
+.modal-header > h3,
+.modal-header > h4,
+.modal-header > h5,
+.modal-header > h6 {
   font-size: 14px;
   letter-spacing: 1px;
   line-height: 1;
   margin: 0;
   padding: 0;
@@ -65,20 +57,22 @@
   padding: 15px 18px;
 }
 .modal-body .container { width: 100%; }
 .modal-body p:last-child { margin-bottom: 0; }
 .modal-footer {
-  border-top: 1px solid $color-haze;
+  border-top: 1px solid;
+  border-color: inherit;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 .modal-footer:after { clear: both; }
 .modal-footer-btn {
   @include appearance(none);
   background: $color-transparent;
   border: 0;
-  border-right: 1px solid $color-haze;
+  border-right: 1px solid;
+  border-color: inherit;
   box-sizing: border-box;
   color: inherit;
   cursor: pointer;
   float: left;
   -webkit-font-smoothing: antialiased;
@@ -101,37 +95,93 @@
   color: $color-gray;
   cursor: not-allowed;
 }
 .modal-footer-btn-group > .modal-footer-btn { width: 50%; }
 
+/* # Components
+================================================== */
+.modal-backdrop {
+  background: transparentize($color-black, 0.1);
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  min-height: 100%;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1040;
+}
+.modal-backdrop.fade {
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+.modal-backdrop.fade.in {
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+/* # Styles
+================================================== */
+.modal-aside {
+  border-radius: 0;
+  height: 100%;
+  margin: 0;
+  right: 0;
+}
+.modal-aside form { height: 100%; }
+.modal-aside.fade,
+.modal-aside.fade.in { top: 0; }
+.modal-aside.fade {
+  right: -100%;
+  @include transition((opacity 0.2s linear, right 0.4s ease-in-out));
+}
+.modal-aside.fade.in { right: 0; }
+.modal-aside .modal-header {
+  padding-bottom: 19px;
+  padding-top: 21px;
+}
+.modal-aside .modal-body {
+  height: calc(100% - 142px);
+  max-height: calc(100% - 142px);
+}
+
+/* # Directions
+================================================== */
+.modal-aside-alt {
+  left: 0;
+  right: initial;
+}
+.modal-aside-alt.fade {
+  left: -100%;
+  right: 0;
+  @include transition((opacity 0.2s linear, left 0.4s ease-in-out));
+}
+.modal-aside-alt.fade.in {
+  left: 0;
+  right: initial;
+}
+
 /* # Colors
 ================================================== */
 .modal-dark {
   background: $color-black;
+  border-color: $color-dark-black;
   color: $color-white;
 }
-.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; }
+.modal-light {
+  background: $color-light-haze;
+  border-color: $color-dark-haze;
+}
 
 /* # Media Queries
 ================================================== */
 @media only screen and (max-width: 767px) {
   .modal {
-    margin-left: -150px;
-    width: 300px;
+    margin-left: 15px;
+    width: calc(100% - 30px);
   }
   .modal-body { max-height: 180px; }
-}
-@media only screen and (min-width: 480px) and (max-width: 767px) {
-  .modal {
-    margin-left: -210px;
-    width: 420px;
-  }
+  .modal-aside { margin: 0; }
 }
 @media
 only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (   min--moz-device-pixel-ratio: 2),
 only screen and (     -o-min-device-pixel-ratio: 2/1),
\ No newline at end of file