@capillarytech/creatives-library 6.8.7 → 6.8.8

package/v2Containers/Templates/_templates.scss

@@ -1,405 +1,414 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.ant-tabs-content{
-    margin-top: 16px;
-    .ant-tabs-tabpane-active{
-      padding: unset;
-    }
-  }
-.creatives-templates-list.full-mode{
-  .pagination-container {
-    .cap-custom-card-list-row {
-      .cap-custom-card-list-col{
-        &:nth-child(4n+4) { //every 4th child
-          margin-right: unset;
-        }
-      }
-    }
-  }
-}
-
-.creatives-templates-list {
-  .pagination-container {
-    .LINE {
-      .ant-card-body {
-        background-color: $CAP_G09;
-        height: 320px;
-      }
-    
-      &.no-image .ant-card-meta {
-        height: 276px;
-        background: $CAP_WHITE;
-        padding: $CAP_SPACE_16 $CAP_SPACE_12;
-    
-        .ant-card-meta-description {
-          height: 250px;
-          word-wrap: break-word;
-        }
-      }
-    }
-  }
-}
-
-.card-title {
-  line-height: 24px;
-  font-size: 14px;
-  text-align: left;
-  color: #333333;
-  font-family: Open-Sans;
-  font-style: normal;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.card-detail{
-  text-align: left;
-  color: #333333;
-  font-family: Open-Sans;
-  line-height: 16px;
-  font-size: 12px;
-  opacity: 1;
-}
-
-.sms-template-content{
-    text-align: left;
-    color: #333333;
-    font-family: Open-Sans;
-    line-height: 24px;
-    font-size: 14px;
-    padding: 16px;
-    opacity: 0.88;
-    height: inherit;
-    width: 100%;
-}
-
-.footer-container{
-  padding: 8px 0 8px 16px;
-}
-
-.options-icon{
-  font-size: 16px;
-}
-
-.template-header{
-  font-size: 24px;
-  line-height: 32px;
-  font-family: proxima-nova, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-  flex: 1;
-  color: #323B4E;
-}
-
-.template-header-container{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.select-font{
-  text-align: left;
-  color: #000000;
-  font-family: Open-Sans;
-  line-height: 24px;
-  font-size: 14px;
-}
-
-.action-container{
-  margin-top: 8px;
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.popover-action-container:hover{
-  background-color: #ecf6fd;
-}
-
-.popover-content{
-  font-size: 14px;
-}
-
-.popover-action-container {
-  line-height: 24px;
-}
-
-.sms-text, .mobilepush-message{
-  height: 100%;
-  overflow: hidden;
-  word-wrap: break-word;
-  /* white-space: nowrap; */
-  text-overflow: ellipsis;
-}
-.sms-text-blurred{
-  opacity: 0.2;
-}
-
-.edit-button{
-  position: absolute;
-  top: 29.33%;
-  left: 33.625%;
-  width: 33%;
-}
-
-.select-button{
-  position: absolute;
-  top: 40.33%;
-  left: 33.625%;
-  width: 33%;
-}
-
-.preview-button{
-  position: absolute;
-  top: 43%;
-  left: 33.5%;
-  width: 33%;
-}
-
-.template-name{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 85%;
-}
-
-.select-account {
-  min-width: 158px;
-  width: 200px;
-  border: none;
-  font-size: 24px;
-  line-height: 32px;
-  &.ant-radio-group.cap-radioCard-v2.smallRadioCard .ant-radio-button-wrapper {
-    border: 1px solid $CAP_G07;
-    &.ant-radio-button-wrapper-checked {
-      border-color: map-get($CAP_PRIMARY, base);
-    }
-  }
-  .ant-card-body {
-    position: relative;
-    top: -8px;
-    .radio-card-header div {
-      font-weight: normal;
-    }
-  }
-  .radio-card-content-container {
-    position: relative;
-    top: 4px;
-  }
-}
-
-
-#blankTemplate {
-  .content-wrapper {
-    height: 310px;
-
-    .sms-template-content{
-      cursor: pointer;
-
-      .sms-text, .mobilepush-message {
-        text-align: center;
-        line-height: 260px;
-        font-family: proxima-nova;
-        font-weight: 600;
-        font-size: 16px;
-      }
-    }
-  }
-  .seperator-line {
-    display: none;
-  }
-  .footer-wrapper {
-    display: none;
-  }
-}
-.mobilepush-message{
-  .message-pop{
-    // width: initial;
-    top: 0;
-    white-space: pre-wrap;
-    word-break: break-word;
-    border-radius: 4px;
-    color: #FFFFFF;
-    width: 70%;
-    min-height: 26px;
-    line-height: 14px;
-    font-size: 10px;
-    font-family: 'open-sans';
-    max-height: 246px;
-    overflow: hidden;
-  }
-  .android-push-message-Container, .iphone-push-message-Container{
-    height: 336px;
-    overflow: auto;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    .message-pop{
-      // 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: 16px;
-      font-size: 10px;
-      .body-image{
-        img{
-          max-width: 100%;
-          max-height: 128px;
-          display: block;
-          margin: auto;
-        }
-      }
-    }
-  }
-  .android-push-message-Container{
-    .title, .body-text, .body-image, .app-name{
-      background-color: #FFFFFF;
-      color: #333333;
-    }
-    .app-name{
-      color: #707070;
-      font-weight: 600;
-      padding: 8px 8px 4px 8px;
-    }
-    .body-image{
-      padding: 0 8px 0 8px;
-
-    }
-    .body-text{
-      padding: 0 8px 4px 8px;
-      color: #5a5959;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-    }
-    .title{
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      padding: 0 8px 0 8px;
-      font-weight: 600;
-    }
-    .actions{
-      background-color: #EEEEEE;
-      height: 32px;
-      padding: 4px;
-      .action{
-        line-height: 24px;
-        font-size: 10px;
-        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: #FFFFFF;
-      color: #333333;
-    }
-    .body-image{
-      padding-top: 8px;
-    }
-    .title{
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-weight: 600;
-    }
-    .app-name{
-      padding: 8px;
-      color: #707070;
-      font-weight: 600;
-      border-bottom: solid 1px #D6D6D6;
-      .material-icons{
-        font-size: 12px;
-        float: right;
-      }
-    }
-    .title, .body-text{
-      padding: 4px 8px 4px 8px;
-    }
-    .body-text{
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-    }
-    .actions{
-      background-color: #FFFFFF;
-      opacity: 0.8;
-      height: 32px;
-      line-height: 26px;
-      margin-top: 4px;
-      border-radius: 6px;
-      text-align: center;
-      border: solid 1px #979797;
-      .action{
-        font-size: 12px;
-        color: #000000;
-        font-weight: 600;
-        text-align: center;
-        margin-left: 8px;
-      }
-    }
-  }
-}
-.mobilepush-templates{
-  .content-wrapper {
-    overflow: hidden;
-    background-image: url("https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg");
-  }
-}
-.pagination-container{
-  height: calc(100vh - 182px);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.message-container{
-  border-bottom: solid 0.5px #D6D6D6;
-}
-.main-content{
-  overflow: hidden;
-}
-
-.wechat-filters,
-.line-filters {
-  width: 100%;
-  padding-left: 12px;
-  .ant-radio-button-wrapper {
-    line-height: 32px;
-    border-radius: 16px;
-    margin-right: 8px;
-    text-align: center;
-    border: solid 1px #9e9d87;
-    padding: 8px 16px;
-  }
-  .ant-radio-button-wrapper:not(:first-child)::before {
-    display: none;
-  }
-  .ant-radio-button-wrapper-checked {
-    background-color: #ecece7;
-    box-shadow: none;
-  }
-}
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.ant-tabs-content{
+    margin-top: 16px;
+    .ant-tabs-tabpane-active{
+      padding: unset;
+    }
+  }
+.creatives-templates-list.full-mode{
+  .pagination-container {
+    .cap-custom-card-list-row {
+      .cap-custom-card-list-col{
+        &:nth-child(4n+4) { //every 4th child
+          margin-right: unset;
+        }
+      }
+    }
+  }
+}
+
+.creatives-templates-list {
+  .pagination-container {
+    .LINE {
+      .ant-card-body {
+        background-color: $CAP_G09;
+        height: 320px;
+      }
+    
+      &.no-image .ant-card-meta {
+        height: 276px;
+        background: $CAP_WHITE;
+        padding: $CAP_SPACE_16 $CAP_SPACE_12;
+    
+        .ant-card-meta-description {
+          height: 250px;
+          word-wrap: break-word;
+        }
+      }
+
+      &.carousel-img-section {
+        .ant-card-body {
+          padding: $CAP_SPACE_24 0;
+        }
+        .ant-card-meta {
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+.card-title {
+  line-height: 24px;
+  font-size: 14px;
+  text-align: left;
+  color: #333333;
+  font-family: Open-Sans;
+  font-style: normal;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-detail{
+  text-align: left;
+  color: #333333;
+  font-family: Open-Sans;
+  line-height: 16px;
+  font-size: 12px;
+  opacity: 1;
+}
+
+.sms-template-content{
+    text-align: left;
+    color: #333333;
+    font-family: Open-Sans;
+    line-height: 24px;
+    font-size: 14px;
+    padding: 16px;
+    opacity: 0.88;
+    height: inherit;
+    width: 100%;
+}
+
+.footer-container{
+  padding: 8px 0 8px 16px;
+}
+
+.options-icon{
+  font-size: 16px;
+}
+
+.template-header{
+  font-size: 24px;
+  line-height: 32px;
+  font-family: proxima-nova, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  flex: 1;
+  color: #323B4E;
+}
+
+.template-header-container{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.select-font{
+  text-align: left;
+  color: #000000;
+  font-family: Open-Sans;
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.action-container{
+  margin-top: 8px;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.popover-action-container:hover{
+  background-color: #ecf6fd;
+}
+
+.popover-content{
+  font-size: 14px;
+}
+
+.popover-action-container {
+  line-height: 24px;
+}
+
+.sms-text, .mobilepush-message{
+  height: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  /* white-space: nowrap; */
+  text-overflow: ellipsis;
+}
+.sms-text-blurred{
+  opacity: 0.2;
+}
+
+.edit-button{
+  position: absolute;
+  top: 29.33%;
+  left: 33.625%;
+  width: 33%;
+}
+
+.select-button{
+  position: absolute;
+  top: 40.33%;
+  left: 33.625%;
+  width: 33%;
+}
+
+.preview-button{
+  position: absolute;
+  top: 43%;
+  left: 33.5%;
+  width: 33%;
+}
+
+.template-name{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 85%;
+}
+
+.select-account {
+  min-width: 158px;
+  width: 200px;
+  border: none;
+  font-size: 24px;
+  line-height: 32px;
+  &.ant-radio-group.cap-radioCard-v2.smallRadioCard .ant-radio-button-wrapper {
+    border: 1px solid $CAP_G07;
+    &.ant-radio-button-wrapper-checked {
+      border-color: map-get($CAP_PRIMARY, base);
+    }
+  }
+  .ant-card-body {
+    position: relative;
+    top: -8px;
+    .radio-card-header div {
+      font-weight: normal;
+    }
+  }
+  .radio-card-content-container {
+    position: relative;
+    top: 4px;
+  }
+}
+
+
+#blankTemplate {
+  .content-wrapper {
+    height: 310px;
+
+    .sms-template-content{
+      cursor: pointer;
+
+      .sms-text, .mobilepush-message {
+        text-align: center;
+        line-height: 260px;
+        font-family: proxima-nova;
+        font-weight: 600;
+        font-size: 16px;
+      }
+    }
+  }
+  .seperator-line {
+    display: none;
+  }
+  .footer-wrapper {
+    display: none;
+  }
+}
+.mobilepush-message{
+  .message-pop{
+    // width: initial;
+    top: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border-radius: 4px;
+    color: #FFFFFF;
+    width: 70%;
+    min-height: 26px;
+    line-height: 14px;
+    font-size: 10px;
+    font-family: 'open-sans';
+    max-height: 246px;
+    overflow: hidden;
+  }
+  .android-push-message-Container, .iphone-push-message-Container{
+    height: 336px;
+    overflow: auto;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    .message-pop{
+      // 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: 16px;
+      font-size: 10px;
+      .body-image{
+        img{
+          max-width: 100%;
+          max-height: 128px;
+          display: block;
+          margin: auto;
+        }
+      }
+    }
+  }
+  .android-push-message-Container{
+    .title, .body-text, .body-image, .app-name{
+      background-color: #FFFFFF;
+      color: #333333;
+    }
+    .app-name{
+      color: #707070;
+      font-weight: 600;
+      padding: 8px 8px 4px 8px;
+    }
+    .body-image{
+      padding: 0 8px 0 8px;
+
+    }
+    .body-text{
+      padding: 0 8px 4px 8px;
+      color: #5a5959;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding: 0 8px 0 8px;
+      font-weight: 600;
+    }
+    .actions{
+      background-color: #EEEEEE;
+      height: 32px;
+      padding: 4px;
+      .action{
+        line-height: 24px;
+        font-size: 10px;
+        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: #FFFFFF;
+      color: #333333;
+    }
+    .body-image{
+      padding-top: 8px;
+    }
+    .title{
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: 600;
+    }
+    .app-name{
+      padding: 8px;
+      color: #707070;
+      font-weight: 600;
+      border-bottom: solid 1px #D6D6D6;
+      .material-icons{
+        font-size: 12px;
+        float: right;
+      }
+    }
+    .title, .body-text{
+      padding: 4px 8px 4px 8px;
+    }
+    .body-text{
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .actions{
+      background-color: #FFFFFF;
+      opacity: 0.8;
+      height: 32px;
+      line-height: 26px;
+      margin-top: 4px;
+      border-radius: 6px;
+      text-align: center;
+      border: solid 1px #979797;
+      .action{
+        font-size: 12px;
+        color: #000000;
+        font-weight: 600;
+        text-align: center;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+.mobilepush-templates{
+  .content-wrapper {
+    overflow: hidden;
+    background-image: url("https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg");
+  }
+}
+.pagination-container{
+  height: calc(100vh - 182px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.message-container{
+  border-bottom: solid 0.5px #D6D6D6;
+}
+.main-content{
+  overflow: hidden;
+}
+
+.wechat-filters,
+.line-filters {
+  width: 100%;
+  padding-left: 12px;
+  .ant-radio-button-wrapper {
+    line-height: 32px;
+    border-radius: 16px;
+    margin-right: 8px;
+    text-align: center;
+    border: solid 1px #9e9d87;
+    padding: 8px 16px;
+  }
+  .ant-radio-button-wrapper:not(:first-child)::before {
+    display: none;
+  }
+  .ant-radio-button-wrapper-checked {
+    background-color: #ecece7;
+    box-shadow: none;
+  }
+}