@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.1

package/components/TemplatePreview/_templatePreview.scss

@@ -1,642 +0,0 @@
-@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;;
-}