@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/components/TemplatePreview/_templatePreview.scss

@@ -0,0 +1,642 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.shell-lock-screen-ios{
+  display: flex;
+  flex-wrap: nowrap;
+  .lock-screen-preview{
+    margin: 0 20px 0 auto;
+    .action-text-reply{
+      position: absolute;
+      left: 34%;
+      top: 43% !important;
+      color: #3861ca;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+    .action-text-cancel{
+      position: absolute;
+      left: 33.5%;
+      top: 48% !important;
+      color: #3861ca;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+  }
+  .main-screen-preview{
+    margin: 0 auto 0 20px;
+  }
+  .lock-screen-preview .lock-msgContainer{
+    position: absolute;
+    top: 30% !important;
+    left: 25.9%;
+    width: 21.5%;
+    height: 60px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;
+    &.wechat{
+      width: 20.5%;
+      left: 25.5%;
+    }
+    .sender-id-text{
+      position: absolute;
+      top: 16%;
+      font-size: $FONT_SIZE_VS;
+      left: 11%;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+    .message-text-container{
+      width: 176px;
+      left: 11%;
+      top: 50%;
+      position: absolute;
+      text-align: left;
+      text-overflow: ellipsis;
+    }
+  }
+  .main-screen-preview .msgContainer{
+    position: absolute;
+    top: 30% !important;
+    left: 53%;
+    width: 42%;
+    height: 336px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    .sms-icon{
+      top: 0;
+      left: 2px;
+      width: 25px;
+      position: absolute;
+    }
+    &.sms{
+      height: 290px;
+      width: 21%;
+      .sms-icon{
+        width: 20px;
+        left: 14px;
+      }
+    }
+
+    .message-pop{
+      .unicode-disabled{
+        font-size: $FONT_SIZE_L;
+      }
+      &.sms {
+        max-height: 100%;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
+        padding: 0 8px 8px 8px;
+        font-size: $FONT_SIZE_VS;
+        width: 100%;
+        font-family: 'open-sans';
+        .message-pop-item{
+          padding: 4px;
+          background: #3F51B5;
+          color: $CAP_WHITE;
+          margin-top: 8px;
+          border-radius: 4px;
+          min-height: 26px;
+          &:first-child{
+            margin-top: 0;
+          }
+        }
+      }
+      &.wechat{
+        padding: 4px;
+        background: #3F51B5;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 2%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        border-radius: 4px;
+        max-height: 100%;
+        color: #FFFFFF;
+        width: 45%;
+        min-height: 26px;
+        line-height: 14px;
+        padding: 8px;
+        font-size: $FONT_SIZE_VS;
+        font-family: 'open-sans';
+      }
+    }
+  }
+}
+
+.shell-lock-screen-android{
+  display: flex;
+  flex-wrap: nowrap;
+  .lock-screen-preview{
+    margin: 0 20px 0 auto;
+    .action-text{
+      position: absolute;
+      left: 28.5%;
+      top: 39% !important;
+      font-size: $FONT_SIZE_VS;
+      color: #3861ca;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+  }
+  .main-screen-preview{
+    margin: 0 auto 0 20px;
+  }
+  .lock-screen-preview .lock-msgContainer{
+    position: absolute;
+    top: 32% !important;
+    left: 26.9%;
+    width: 21.5%;
+    height: 52px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    overflow: hidden;
+    &.wechat{
+      width: 20.5%;
+      left: 25.5%;
+    }
+    .sender-id-text{
+      position: absolute;
+      top: 14%;
+      font-size: 10px;
+      left: 9%;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+    .message-text-container{
+      width: 176px;
+      left: 9%;
+      top: 43%;
+      position: absolute;
+      text-align: left;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .main-screen-preview .msgContainer{
+    position: absolute;
+    top: 30% !important;
+    left: 53%;
+    width: 42%;
+    height: 336px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    .sms-icon{
+      top: 0;
+      left: 2px;
+      width: 25px;
+      position: absolute;
+    }
+    &.sms{
+      height: 290px;
+      width: 21%;
+      .sms-icon{
+        width: 20px;
+        left: 14px;
+      }
+    }
+
+    .message-pop{
+      .unicode-disabled{
+        font-size: $FONT_SIZE_L;
+      }
+      &.sms {
+        max-height: 100%;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
+        padding: 0 8px 8px 8px;
+        font-size: $FONT_SIZE_VS;
+        width: 100%;
+        font-family: 'open-sans';
+        .message-pop-item{
+          padding: 4px;
+          background: #3F51B5;
+          color: $CAP_WHITE;
+          margin-top: 8px;
+          border-radius: 4px;
+          min-height: 26px;
+          &:first-child{
+            margin-top: 0;
+          }
+        }
+      }
+      &:not(.sms){
+        padding: 4px;
+        background: #3F51B5;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 14px;
+        left: 2%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        border-radius: 4px;
+        max-height: 100%;
+        color: $CAP_WHITE;
+        width: 45%;
+        min-height: 26px;
+        line-height: 14px;
+        padding: 8px;
+        font-size: $FONT_SIZE_VS;
+        font-family: 'open-sans';
+      }
+    }
+  }
+}
+
+.shell {
+  position: relative;
+  -webkit-transform: translate(-50%);
+  transform: translate(-50%);
+  left: 50%;
+  padding: 0 10px;
+  width: 450px;
+
+  .preview-image {
+      width: 51%;
+      &.sms {
+        width: 45%;
+      }
+  }
+
+  .cap-carousel-v2 {
+    .line-preview {
+      .message-pop {
+        margin-top: -6px;
+      }
+    }
+  }
+
+  .msgContainer {
+    position: absolute;
+    top: 18%;
+    left: 28.8%;
+    width: 42%;
+    height: 336px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    .sms-icon{
+      top: 0;
+      left: 2px;
+      width: 25px;
+      position: absolute;
+    }
+    &.sms{
+      height: 290px;
+      width: 40%;
+      .sms-icon{
+        width: 20px;
+        left: 14px;
+      }
+    }
+
+    .message-pop{
+      .unicode-disabled{
+        font-size: $FONT_SIZE_L;
+      }
+      &.sms {
+        max-height: 100%;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 4px;
+        left: 3%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
+        padding: 0 8px 8px 8px;
+        font-size: $FONT_SIZE_VS;
+        width: 100%;
+        font-family: 'open-sans';
+        .message-pop-item{
+          padding: 4px;
+          background: #3F51B5;
+          color: $CAP_WHITE;
+          margin-top: 8px;
+          border-radius: 4px;
+          min-height: 26px;
+          &:first-child{
+            margin-top: 0;
+          }
+        }
+      }
+      &:not(.sms){
+        padding: 4px;
+        background: #3F51B5;
+        position: absolute;
+        // width: initial;
+        overflow: auto;
+        top: 4px;
+        left: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+        border-radius: 4px;
+        max-height: 100%;
+        color: #FFFFFF;
+        width: 100%;
+        min-height: 26px;
+        line-height: 14px;
+        padding: 8px;
+        font-size: 10px;
+        font-family: 'open-sans';
+      }
+    }
+  }
+  .android-push-message-Container, .iphone-push-message-Container{
+    position: absolute;
+    top: 11%;
+    left: 28.8%;
+    width: 42%;
+    height: 336px;
+    overflow: auto;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    .message-pop{
+      position: absolute;
+      // width: initial;
+      overflow: auto;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      max-height: 100%;
+      width: 100%;
+      min-height: 26px;
+      line-height: 15px;
+      font-size: $FONT_SIZE_VS;
+      .body-image{
+        img{
+          max-width: 100%;
+          max-height: 90px;
+          margin: auto;
+          display: block;
+        }
+      }
+    }
+  }
+  .android-push-message-Container{
+    .title, .body-text, .body-image, .app-name{
+      background-color: $CAP_WHITE;
+      color: #333333;
+    }
+    .app-name{
+      color: #5D5D5D;
+      font-weight: 600;
+      padding: 8px 8px 4px 8px;
+    }
+    .title, .body-image{
+      padding: 0 8px 0 8px;
+
+    }
+    .body-text{
+      padding: 0 8px 4px 8px;
+      color: #5a5959;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .actions{
+      background-color: #EEEEEE;
+      height: 32px;
+      padding: 4px;
+      .action{
+        line-height: 24px;
+        font-size: $FONT_SIZE_VS;
+        font-weight: 600;
+        color: #1970DA;
+        height: 12px;
+        margin-left: 8px;
+      }
+    }
+  }
+  .iphone-push-message-Container{
+    top: 8%;
+    .message-pop{
+      border-radius: 4px;
+      word-wrap: break-word;
+    }
+    .title, .body-text, .body-image, .app-name{
+      background-color: $CAP_WHITE;
+      color: #333333;
+    }
+    .body-image{
+      padding-top: 8px;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .app-name{
+      padding: 8px;
+      color: #5D5D5D;
+      border-bottom: solid 1px #D6D6D6;
+      .material-icons{
+        font-size: $FONT_SIZE_S;
+        float: right;
+      }
+    }
+    .title, .body-text{
+      padding: 4px;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .body-text{
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    .actions{
+      background-color: #FFFFFF;
+      opacity: 0.8;
+      height: 32px;
+      line-height: 26px;
+      margin-top: 4px;
+      border-radius: 6px;
+      text-align: center;
+      padding: 4px;
+      .action{
+        font-size: 12px;
+        font-weight: 600;
+        color: #000000;
+        text-align: center;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.preview-container{
+  .preview-info {
+    font-family: 'proxima-nova';
+    font-weight: 600;
+    font-size: 16px;
+    text-align: center;
+  }
+}
+
+.preview-container.embedded-preview{
+  .preview-image {
+    width: 38% !important;
+  }
+  .message-pop{
+    left: 21% !important;
+    width: 67% !important;
+  }
+  .sms-icon{
+    left: 12% !important;
+  }
+}
+
+
+
+#slidebox-container {
+  left: 60vw;
+  width: 40vw;
+
+  .shell {
+    position: relative;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    left: 50%;
+    padding: 0 10px;
+    width: initial;
+
+    .preview-image {
+      &.sms{
+        width: 45%;
+      }
+    }
+
+
+    .msgContainer {
+      position: absolute;
+      top: 20%;
+      left: 23%;
+      width: 42%;
+      height: 275px;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+
+      .sms-icon{
+        top: 6%;
+        left: 2%;
+        width: 12%;
+        position: absolute;
+      }
+
+      &.sms{
+        height: 290px;
+        width: 40%;
+        top: 16%;
+        .sms-icon{
+          left: 7%;
+        }
+      }
+      .message-pop{
+        &.sms {
+          max-height: 100%;
+          position: absolute;
+          // width: initial;
+          overflow: auto;
+          top: 6%;
+          left: 17%;
+          width: 100%;
+          white-space: pre-wrap;
+          word-break: break-word;
+          line-height: 14px;
+          padding: 0 8px 8px 8px;
+          font-size: $FONT_SIZE_VS;
+          font-family: 'open-sans';
+          .message-pop-item{
+            padding: 8px;
+            background: #3F51B5;
+            color: $CAP_WHITE;
+            margin-top: 8px;
+            border-radius: 4px;
+            min-height: 26px;
+            &:first-child{
+              margin-top: 0;
+            }
+          }
+        }
+        &:not(.sms){
+          padding: 8px 8px;
+          background: #3F51B5;
+          position: absolute;
+          width: 65%;
+          top: 15%;
+          left: 19%;
+          word-break: break-all;
+          border-radius: 6px;
+          max-height: 100%;
+          overflow: auto;
+          color: #FFFFFF;
+          line-height: 14px;
+          font-family: "open-sans";
+          font-size: $FONT_SIZE_VS;
+        }
+      }
+    }
+  }
+}
+.app-icon{
+  width: 10px;
+  height: 10px;
+  opacity: 1;
+  display: inline-block;
+  background-color: #333333;
+  margin-right: 4px;
+}
+
+.template-carousel.single-img {
+  .slick-track {
+    margin-left: 0;
+  }
+}
+
+.ant-btn.cap-button-v2.flat-btn.preview-video-btn {
+  padding: 0;
+  background-color: transparent;
+  height: auto;
+
+  i {
+    vertical-align: middle;
+  }
+
+  span {
+    font-size: $FONT_SIZE_VS;
+  }
+}
+.line-image-preview{
+  max-width: 8.57rem;;
+}