@bikdotai/bik-widgets 1.0.0

package/src/widgets/DirectReward/style.module.css

@@ -0,0 +1,836 @@
+b {
+  font-weight: 600;
+}
+
+.bikWidgetCTAHide {
+  display: none !important;
+}
+
+.bikWidgetCTAShow {
+  display: flex !important;
+}
+
+#couponScreenTitleWrapper p {
+  margin-bottom: 0;
+  font-family: inherit;
+}
+
+.userDetailsTitleWrapper {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  font-family: inherit;
+}
+
+.userDetailsTitleWrapper * {
+  font-family: inherit;
+}
+
+.overlay {
+  display: block !important;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+
+.bikDRParentContainer {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 810px;
+  z-index: 2147483647;
+  border-radius: 8px;
+}
+
+.bikDRCloseBtnWrapperMobile {
+  display: none;
+}
+
+.bikDRMainContainer {
+  width: 100%;
+  min-height: 252px;
+  background-color: #fff;
+  border-radius: 8px;
+  display: flex;
+  overflow: hidden;
+}
+
+.scaleUpEffect {
+  animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+
+.scaleDownEffect {
+  animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+
+.bikDRImageDiv {
+  position: relative;
+  padding-bottom: 56%;
+  overflow: hidden;
+}
+
+.bikDRImageContainer {
+  height: 100%;
+  position: absolute;
+  left: 0%;
+  width: 100%;
+  object-fit: fill;
+}
+
+.bikDRContentContainer {
+  background-color: #f2f9ff;
+  font-feature-settings:
+    'tnum' on,
+    'lnum' on,
+    'case' on,
+    'ss04' on;
+}
+
+.bikDRContentContainer * {
+  font-family: inherit;
+  font-feature-settings: inherit;
+}
+
+#directRewardCloseBtnWrapper2,
+#directRewardCloseBtnWrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 16px 16px 0 0;
+  cursor: pointer;
+}
+
+#directRewardCloseBtnWrapper2 svg,
+#directRewardCloseBtnWrapper svg {
+  height: unset !important;
+  width: unset !important;
+}
+
+.bikDRContentWrapper {
+  /* Commented width and height (not required) will to remove if everything works for other stores */
+  /* width: 100%;
+    height: calc(100% - 46px); */
+  margin: 0 auto;
+  padding: 0px 40px 20px;
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.bikDRDataInputWrapper {
+  margin-top: 34px;
+}
+
+.bikDRDataInputWrapper h4 {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 20px;
+  text-align: center;
+  margin: 0;
+  color: #616161;
+}
+
+.bikDRInputContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 16px;
+  gap: 16px;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  height: 32px;
+}
+
+.bikDRInputContainer input {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  width: 100%;
+}
+
+.bikDRInputContainer span {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #212121;
+}
+
+.bikDRDataInputWrapper button,
+.bikDRDiscountCodeDetailsMain button {
+  width: 100%;
+  height: 48px;
+  background: #731dcf;
+  border-radius: 4px;
+  margin-top: 16px;
+  color: #fff;
+  border: none;
+  outline: none;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+}
+
+.bikDRDataInputWrapper button p,
+.bikDRDiscountCodeDetailsMain button p {
+  margin: 0;
+  text-align: center;
+  font-family: inherit;
+}
+
+.cliamBtn--loading::after {
+  content: '';
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 4px solid transparent;
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: button-loading-spinner 1s ease infinite;
+}
+
+@keyframes button-loading-spinner {
+  from {
+    transform: rotate(0turn);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.bikDRDiscountCodeDetailsMain button {
+  display: flex;
+  justify-content: center;
+}
+
+.bikDRDiscountCodeDetailsMain button p {
+  margin: 0;
+  font-family: inherit;
+}
+
+.bikDRDiscountCodeDetailsMain button svg {
+  margin-left: 8px;
+}
+
+.poweredBy {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: #9e9e9e;
+  text-align: center;
+  margin: 8px 0 0 0;
+  letter-spacing: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.poweredBy svg {
+  stroke: none !important;
+  fill: none !important;
+  height: unset !important;
+  width: unset !important;
+}
+
+.poweredBy a {
+  margin-right: 5px;
+}
+
+.bikDRContentWrapper a {
+  text-decoration: none;
+  color: #9e9e9e;
+  font-family: inherit;
+}
+
+/* success screen */
+.bikDirectReward {
+  width: 60%;
+  height: 100%;
+  background-color: #f2f9ff;
+}
+
+.bikDRTitle {
+  line-height: 34px;
+  text-align: center;
+  color: #212121;
+  margin: 0;
+  font-family: inherit;
+}
+
+.bikDRTitle > p {
+  font-size: 24px !important;
+  margin: 8px 0;
+  color: inherit !important;
+}
+
+.bikDRSubTitle {
+  line-height: 24px;
+  text-align: center;
+  color: #212121;
+  margin: 8px 0 0 0;
+  font-family: inherit;
+}
+
+.bikDRSubTitle > p {
+  font-size: 16px !important;
+  margin: 4px 0;
+  color: inherit !important;
+}
+
+.bikDRTitleWrapper {
+  font-family: inherit;
+  margin-top: 0px;
+}
+
+.bikDRSubTitle p {
+  font-family: inherit;
+  color: inherit !important;
+}
+
+.bikDRDiscountCodeDetailsMain {
+  margin-top: 24px;
+}
+
+.bikDRDiscountCodeDetailsContainer {
+  padding: 16px;
+  gap: 8px;
+  background: #e6f4e7;
+  border: 1px dashed #1a872c;
+  border-radius: 4px;
+}
+
+.bikDRDiscountCodeDetailsContainer h4 {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  color: #212121;
+  margin: 0;
+}
+
+.bikDRDiscountCodeDetailsContainer p {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  color: #616161;
+  margin: 0px 0 0 0;
+}
+
+.hideElem {
+  display: none !important;
+}
+
+.hideElemBackground {
+  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards !important;
+  visibility: hidden;
+}
+
+#directRewardErrorMsg {
+  margin: 0;
+
+  font-weight: 600;
+  font-size: 12px;
+  color: #c22828;
+}
+
+.noScrollBackground {
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  0% {
+    background: rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    background: rgba(0, 0, 0, 0.6);
+  }
+
+  100% {
+    background: rgba(0, 0, 0, 0);
+  }
+}
+
+@keyframes scaleUp {
+  0% {
+    transform: scale(0.8) translateY(1000px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1) translateY(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleDown {
+  0% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(1000px);
+    opacity: 0;
+  }
+}
+
+/* //userInput */
+
+#bikFooter2 {
+  display: block;
+  flex-direction: column;
+  font-family: inherit;
+}
+
+.bikStwWaCheckboxContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  margin: 8px 0;
+  align-items: center;
+}
+
+.bikStwWaCheckboxContainer h2 {
+  margin-bottom: 0;
+  margin-top: 0;
+  color: #616161;
+}
+
+.bikStwCountryCodeContainer {
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+#bikFooter2 > h1 {
+  font-weight: 600;
+  font-size: 28px;
+  line-height: 40px;
+  text-align: center;
+  color: #212121;
+  font-family: inherit;
+}
+
+#bikFooter2 > h2 {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+  color: #212121;
+  margin-top: 8px;
+  margin-bottom: 24px;
+  font-family: inherit;
+}
+
+.bikStwH2 {
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+  margin-bottom: 6px;
+  padding-bottom: 0 !important;
+  font-family: inherit;
+}
+
+.bikStwPhoneInputRow {
+  display: flex;
+  gap: 16px;
+  flex-direction: row;
+  margin-top: 24px;
+  width: 100%;
+}
+
+.bikStwCountryCodePicker {
+  height: 48px;
+  border-radius: 8px;
+  /*margin-top: 8px;*/
+  border-width: 1px;
+  border-style: solid;
+  align-items: center;
+  border-color: #e0e0e0;
+  padding: 12px 8px;
+  gap: 8px;
+  display: flex;
+  flex-direction: row;
+}
+
+.bikStwCountryCodePicker h2 {
+  margin-bottom: 0;
+}
+
+.bikStwPhoneInput {
+  flex: 2;
+}
+
+#bikStwOptPhone {
+  display: flex;
+  margin: 12px 0;
+}
+
+#bikStwOptWa {
+  display: flex;
+  margin: 12px 0;
+}
+
+#bikStwOptEmail {
+  display: block;
+  margin: 12px 0;
+}
+
+#bikStwMandWa {
+  display: flex;
+  margin: 12px 0;
+}
+
+#bikStwMandEmail {
+  display: flex;
+  margin: 12px 0;
+}
+
+#bikStwMandPhone {
+  display: flex;
+  margin: 12px 0;
+}
+
+#bikStwWaCheckboxLayout {
+  display: flex;
+}
+
+#bikStwPhoneCheckboxLayout {
+  display: flex;
+}
+
+.bikEmailInputMain {
+  display: block;
+  margin: 12px 0;
+}
+
+.bikInputMain {
+  display: flex;
+  margin: 12px 0;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.bikDRDiscountCodeDetailsMain {
+  font-family: inherit;
+}
+
+.bikDRDiscountCodeDetailsMain > div {
+  font-family: inherit;
+}
+
+.bikDRDiscountCodeDetailsMain p {
+  font-family: inherit;
+}
+
+.leadGenPostPlayIconWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.leadGenPostPlayIcon {
+  height: 65px;
+  width: auto;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.bikInputWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.bikInputWrapper input {
+  outline: none;
+  padding: 12px 24px;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px !important;
+  width: 100%;
+  height: 48px;
+  box-shadow: none;
+}
+
+input.bikStwSpinInputText::-webkit-outer-spin-button,
+input.bikStwSpinInputText::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.bikInputWrapper input::placeholder {
+  color: rgba(0, 0, 0, 0.45) !important;
+  opacity: 1 !important;
+}
+
+.bikStwError {
+  font-weight: 400;
+  font-size: 12px !important;
+  line-height: 16px;
+  color: #b92321;
+  margin-top: 8px;
+  display: block;
+}
+
+#bikayiBtn {
+  position: relative;
+  border: none;
+  padding: 14px 0;
+  background: #731dcf;
+  border-radius: 8px;
+  outline: none;
+  width: 100%;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  margin-top: 12px;
+  cursor: pointer;
+  height: 48px;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid #fff;
+  border-left: 2px solid #fff;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: block !important;
+  animation: spin 1.3s linear infinite;
+}
+
+.cliam-btn--loading::after {
+  content: '';
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 4px solid transparent;
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: button-loading-spinner 1s ease infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes button-loading-spinner {
+  from {
+    transform: rotate(0turn);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .bikDRParentContainer {
+    width: 100%;
+    top: unset;
+    left: unset;
+    transform: unset;
+    bottom: 0;
+    overflow: scroll;
+    max-height: 80%;
+  }
+  #bikayiBtn {
+    margin-top: 12px;
+  }
+
+  .bikDRCloseBtnWrapperMobile {
+    width: 32px;
+    height: 32px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(225, 225, 225, 0.8);
+    border-radius: 4px;
+    right: 10px;
+    top: 10px;
+    z-index: 1;
+  }
+
+  .bikDRCloseBtnWrapperMobile svg {
+    height: unset !important;
+    width: unset !important;
+  }
+
+  .bikDRMainContainer {
+    flex-direction: column;
+    width: 100%;
+    min-height: 252px;
+    border-radius: 8px;
+    height: unset;
+  }
+
+  .bikDRImageDiv {
+    width: 100%;
+    padding: 0;
+    display: contents;
+  }
+
+  .bikDRImageContainer {
+    width: 100%;
+    object-fit: cover;
+    position: relative;
+  }
+
+  .bikDRContentContainer {
+    width: 100%;
+  }
+
+  #directRewardCloseBtnWrapper2,
+  #directRewardCloseBtnWrapper {
+    display: none;
+  }
+
+  .bikDRContentWrapper,
+  .bikDRContentWrapper {
+    margin: 0 auto;
+    padding: 24px 30px;
+    width: auto;
+  }
+
+  .leadGenPostPlayIcon {
+    height: 45px;
+    width: auto;
+  }
+
+  .bikDRSubTitle {
+    line-height: 23px;
+  }
+
+  .bikDRSubTitle > p {
+    font-size: 16px !important;
+    color: inherit !important;
+  }
+
+  .bikDRInputContainer {
+    height: 36px;
+  }
+
+  .bikDRInputContainer button {
+    margin-top: 16px;
+  }
+
+  .bikDRTitle {
+    line-height: 24px;
+  }
+
+  .bikDRTitle > p {
+    font-size: 20px !important;
+    margin: 4px 0;
+    color: inherit !important;
+  }
+
+  .bikDRDiscountcodeDitailsMain {
+    margin-top: 16px;
+  }
+
+  .bikDRDiscountcodeDitailsContainer {
+    width: auto;
+  }
+
+  .bikDRDiscountcodeDitailsMain button {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  #directRewardErrorMsg {
+    font-size: 11px;
+  }
+
+  @keyframes scaleUp {
+    0% {
+      transform: translateY(1000px);
+      opacity: 0;
+    }
+
+    100% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes scaleDown {
+    0% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateY(1000px);
+      opacity: 0;
+    }
+  }
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}