@appscode/design-system 2.0.18 → 2.0.19-alpha.10

package/vue-components/styles/components/_modal.scss

@@ -0,0 +1,216 @@
+// modal start
+.ac-modal {
+  // position: relative;
+  min-height: 100vh;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  .ac-button {
+    &.is-white {
+      margin-right: -10px;
+    }
+  }
+
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $primary-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-weight: 400;
+              color: $primary-10;
+
+              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/vue-components/styles/components/_options.scss

@@ -0,0 +1,134 @@
+.ac-options {
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  &:hover {
+    background-color: $primary-90;
+  }
+
+  &:focus-within {
+    .options-items {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  &.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;
+    }
+
+    .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;
+    list-style: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s ease-in-out;
+    text-align: left;
+
+    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: $primary-90;
+          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: $primary-90;
+          color: $primary !important;
+        }
+      }
+    }
+  }
+}