@appscode/design-system 1.1.0 → 2.0.0

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: $black-5;
+//     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) {
+// }

package/components/_ac-options.scss

@@ -1,123 +1,122 @@
-.ac-options {
-  position: relative;
-  z-index: 9;
-
-  &.is-horaizental {
-    .option-dots {
-      flex-direction: row;
-
-      span {
-        margin-bottom: 0;
-        margin-right: 2px;
-      }
-    }
-  }
-
-  &.is-centered {
-    .option-dots {
-      align-items: center;
-    }
-
-    .options-items {
-      left: 50%;
-    }
-  }
-
-  &.is-right {
-    .option-dots {
-      align-items: flex-end;
-      padding: 0 10px;
-      margin-right: -10px;
-    }
-
-    .options-items {
-      right: 0px;
-    }
-  }
-
-  .option-dots {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    align-items: flex-start;
-    border: none;
-    background-color: transparent;
-    transition: 0.3 ease-in-out;
-   
-
-    &:hover {
-      color: $ac-primary;
-    }
-
-    span {
-      width: 4px;
-      height: 4px;
-      background-color: $ac-color-value;
-      border-radius: 50%;
-      margin-bottom: 1px;
-    }
-  }
-
-  .options-items {
-    border-radius: 4px;
-    position: absolute;
-    z-index: 99;
-    background-color: $ac-white;
-    min-width: 160px;
-    top: 30px;
-    padding: 5px 0;
-    border: 1px solid $ac-white-light;
-
-    li {
-      .list-button {
-        width: 100%;
-        background-color: transparent;
-        border: none;
-        cursor: pointer;
-        font-weight: 400;
-        text-align: left;
-        color: $ac-color-value;
-        font-size: $font-size-small;
-        padding: 10px 30px;
-        display: block;
-
-        &:hover {
-          background-color: $ac-bg-light-gray;
-          color: $ac-primary;
-        }
-
-        span {
-          background-color: transparent;
-
-          &.icon {
-            margin-right: 5px;
-          }
-        }
-      }
-
-      a {
-        font-size: $font-size-small;
-        padding: 7px 15px;
-        display: block;
-        text-decoration: none !important;
-        color: $ac-color-text !important;
-        border: none;
-
-        &:hover {
-          background-color: $ac-bg-light-gray;
-          color: $ac-primary !important;
-        }
-      }
-    }
-  }
-}
-
-// dark theme start
-.is-dark-theme {
-  .ac-options {
-    .options-items {
-      --ac-white: var(--dark-bg-light);
-    }
-  }
-}
-// dark theme end
+// .ac-options {
+//   position: relative;
+//   z-index: 9;
+
+//   &.is-horaizental {
+//     .option-dots {
+//       flex-direction: row;
+
+//       span {
+//         margin-bottom: 0;
+//         margin-right: 2px;
+//       }
+//     }
+//   }
+
+//   &.is-centered {
+//     .option-dots {
+//       align-items: center;
+//     }
+
+//     .options-items {
+//       left: 50%;
+//     }
+//   }
+
+//   &.is-right {
+//     .option-dots {
+//       align-items: flex-end;
+//       padding: 0 10px;
+//       margin-right: -10px;
+//     }
+
+//     .options-items {
+//       right: 0px;
+//     }
+//   }
+
+//   .option-dots {
+//     display: flex;
+//     flex-direction: column;
+//     cursor: pointer;
+//     align-items: flex-start;
+//     border: none;
+//     background-color: transparent;
+//     transition: 0.3 ease-in-out;
+
+//     &:hover {
+//       color: $primary;
+//     }
+
+//     span {
+//       width: 4px;
+//       height: 4px;
+//       background-color: $primary-20;
+//       border-radius: 50%;
+//       margin-bottom: 1px;
+//     }
+//   }
+
+//   .options-items {
+//     border-radius: 4px;
+//     position: absolute;
+//     z-index: 99;
+//     background-color: $white-100;
+//     min-width: 160px;
+//     top: 30px;
+//     padding: 5px 0;
+//     border: 1px solid $primary-90;
+
+//     li {
+//       .list-button {
+//         width: 100%;
+//         background-color: transparent;
+//         border: none;
+//         cursor: pointer;
+//         font-weight: 400;
+//         text-align: left;
+//         color: $primary-20;
+//         font-size: 13px;
+//         padding: 10px 30px;
+//         display: block;
+
+//         &:hover {
+//           background-color: $black-60;
+//           color: $primary;
+//         }
+
+//         span {
+//           background-color: transparent;
+
+//           &.icon {
+//             margin-right: 5px;
+//           }
+//         }
+//       }
+
+//       a {
+//         font-size: 13px;
+//         padding: 7px 15px;
+//         display: block;
+//         text-decoration: none !important;
+//         color: $primary-10 !important;
+//         border: none;
+
+//         &:hover {
+//           background-color: $black-60;
+//           color: $primary !important;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// // dark theme start
+// .is-dark-theme {
+//   .ac-options {
+//     .options-items {
+//       --ac-white: var(--dark-bg-light);
+//     }
+//   }
+// }
+// // dark theme end