@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.11

package/components/_ac-modal.scss

@@ -1,212 +1,212 @@
-// modal start
-.ac-modal {
-  // position: relative;
-  min-height: 100vh;
-  position: fixed;
-  width: 100%;
-  left: 0;
-  top: 0;
-  z-index: 9999;
-
-  &:after {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: $ac-black;
-    z-index: -1;
-    opacity: 0.5;
-  }
-
-  &.is-small {
-    .ac-modal-inner {
-      border-radius: 4px;
-      width: 446px;
-    }
-  }
-
-  &.is-normal {
-    .ac-modal-inner {
-      width: 518px;
-    }
-  }
-
-  &.is-medium {
-    .ac-modal-inner {
-      width: 800px;
-    }
-  }
-
-  &.is-large {
-    .ac-modal-inner {
-      width: 1000px !important;
-    }
-  }
-
-  .ac-modal-inner {
-    margin: 0 auto;
-    background-color: $ac-white;
-    border-radius: 4px;
-    overflow: hidden;
-    box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
-
-    .ac-modal-header {
-      background-color: $ac-white;
-      padding: 10px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border: 1px solid $ac-white-light;
-
-      h6 {
-        color: $ac-color-text;
-      }
-
-      .ms-close-button {
-        button {
-          cursor: pointer;
-          padding: 3px 5px;
-          color: $ac-color-text;
-        }
-      }
-    }
-
-    .ac-modal-body {
-      padding: 20px;
-      max-height: calc(100vh - 230px);
-      overflow-y: auto;
-
-      .ac-modal-content {
-        img {
-          // width: 100%;
-          height: auto;
-        }
-
-        .action-message {
-          p {
-            font-size: 16px;
-            margin-bottom: 10px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            &.is-description {
-              font-family: $ac-family-heading;
-              font-weight: 400;
-              color: $ac-color-value;
-
-              strong {
-                font-weight: 500;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .ac-modal-footer {
-      border-top: 1px solid $ac-white-light;
-      padding: 10px 20px;
-    }
-  }
-}
-
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-  .ac-modal {
-    &.is-small {
-      .ac-modal-inner {
-        width: 266px;
-      }
-    }
-
-    &.is-normal {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-
-    &.is-medium {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-
-    &.is-large {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-
-    .action-message.pt-35.pb-35 {
-      padding-top: 20px !important;
-      padding-bottom: 20px !important;
-    }
-  }
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-  .ac-modal {
-    &.is-small {
-      .ac-modal-inner {
-        width: 266px;
-      }
-    }
-
-    &.is-normal {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-
-    &.is-medium {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-
-    &.is-large {
-      .ac-modal-inner {
-        width: calc(100% - 15px);
-      }
-    }
-  }
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-  .ac-modal {
-    &.is-normal {
-      .ac-modal-inner {
-        width: calc(100% - 50px);
-      }
-    }
-
-    &.is-medium {
-      .ac-modal-inner {
-        width: calc(100% - 50px);
-      }
-    }
-
-    &.is-large {
-      .ac-modal-inner {
-        width: calc(100% - 50px);
-      }
-    }
-  }
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+// // modal start
+// .ac-modal {
+//   // position: relative;
+//   min-height: 100vh;
+//   position: fixed;
+//   width: 100%;
+//   left: 0;
+//   top: 0;
+//   z-index: 9999;
+
+//   &:after {
+//     position: absolute;
+//     content: "";
+//     left: 0;
+//     top: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: $ac-black;
+//     z-index: -1;
+//     opacity: 0.5;
+//   }
+
+//   &.is-small {
+//     .ac-modal-inner {
+//       border-radius: 4px;
+//       width: 446px;
+//     }
+//   }
+
+//   &.is-normal {
+//     .ac-modal-inner {
+//       width: 518px;
+//     }
+//   }
+
+//   &.is-medium {
+//     .ac-modal-inner {
+//       width: 800px;
+//     }
+//   }
+
+//   &.is-large {
+//     .ac-modal-inner {
+//       width: 1000px !important;
+//     }
+//   }
+
+//   .ac-modal-inner {
+//     margin: 0 auto;
+//     background-color: $white-100;
+//     border-radius: 4px;
+//     overflow: hidden;
+//     box-shadow: 12px 26px 118px rgba(0, 0, 0, 0.16);
+
+//     .ac-modal-header {
+//       background-color: $white-100;
+//       padding: 10px 20px;
+//       display: flex;
+//       align-items: center;
+//       justify-content: space-between;
+//       border: 1px solid $primary-90;
+
+//       h6 {
+//         color: $primary-10;
+//       }
+
+//       .ms-close-button {
+//         button {
+//           cursor: pointer;
+//           padding: 3px 5px;
+//           color: $primary-10;
+//         }
+//       }
+//     }
+
+//     .ac-modal-body {
+//       padding: 20px;
+//       max-height: calc(100vh - 230px);
+//       overflow-y: auto;
+
+//       .ac-modal-content {
+//         img {
+//           // width: 100%;
+//           height: auto;
+//         }
+
+//         .action-message {
+//           p {
+//             font-size: 16px;
+//             margin-bottom: 10px;
+
+//             &:last-child {
+//               margin-bottom: 0;
+//             }
+
+//             &.is-description {
+//               font-family: $font-heading;
+//               font-weight: 400;
+//               color: $primary-20;
+
+//               strong {
+//                 font-weight: 500;
+//               }
+//             }
+//           }
+//         }
+//       }
+//     }
+
+//     .ac-modal-footer {
+//       border-top: 1px solid $primary-90;
+//       padding: 10px 20px;
+//     }
+//   }
+// }
+
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {
+//   .ac-modal {
+//     &.is-small {
+//       .ac-modal-inner {
+//         width: 266px;
+//       }
+//     }
+
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     .action-message.pt-35.pb-35 {
+//       padding-top: 20px !important;
+//       padding-bottom: 20px !important;
+//     }
+//   }
+// }
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {
+//   .ac-modal {
+//     &.is-small {
+//       .ac-modal-inner {
+//         width: 266px;
+//       }
+//     }
+
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 15px);
+//       }
+//     }
+//   }
+// }
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {
+//   .ac-modal {
+//     &.is-normal {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+
+//     &.is-medium {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+
+//     &.is-large {
+//       .ac-modal-inner {
+//         width: calc(100% - 50px);
+//       }
+//     }
+//   }
+// }
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {
+// }
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {
+// }