@blinkpage/composer-tools 1.0.0

package/editor-components/contacts/form3/form3.module.scss

@@ -0,0 +1,496 @@
+@use "../../../composer-base-components/base/utitilities/viewports.module.scss" as *;
+
+.container {
+  .max-content {
+
+    .header{
+      .subtitle, .title {
+        content: "";
+      }
+    }
+    .box {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      box-shadow: var(--box-shadow-active);
+      position: relative;
+      height: fit-content;
+      align-items: stretch;
+      min-height: 500px;
+      border-radius: var(--composer-border-radius-md);
+
+      .left-container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        height: auto;
+        flex-grow: 1;
+        padding: var(--composer-gap-md) 0;
+        border-top-left-radius: var(--composer-border-radius-md);
+        border-bottom-left-radius: var(--composer-border-radius-md);
+        background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+
+        .background-wrapper {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-top-left-radius: var(--composer-border-radius-md);
+          border-bottom-left-radius: var(--composer-border-radius-md);
+          overflow: hidden;
+
+          &.background-full {
+            border-radius: var(--composer-border-radius-md);
+          }
+        }
+
+        .background {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          background-position: center center;
+          position: absolute;
+          border-top-left-radius: var(--composer-border-radius-md);
+          border-bottom-left-radius: var(--composer-border-radius-md);
+
+          &.background-full {
+            border-radius: var(--composer-border-radius-md);
+          }
+        }
+
+        .overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: var(--composer-overlay-color);
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .left {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: 100%;
+          align-items: center;
+          position: relative;
+
+          .content {
+            justify-content: space-between;
+            height: 100%;
+            gap: var(--composer-gap-md);
+            display: flex;
+            flex-direction: column;
+            padding: 0 var(--composer-gap-xl);
+
+            &.content-full {
+              width: 100%;
+            }
+
+            .left-top {
+              position: relative;
+              z-index: 1;
+              color: var(--composer-font-color-secondary);
+              word-wrap: break-word;
+              display: flex;
+              flex-direction: column;
+              gap: var(--composer-gap-lg);
+              margin-top: var(--composer-gap-xl);
+
+              .left-top-content {
+                position: relative;
+                z-index: 1;
+                color: var(--composer-font-color-secondary);
+                word-wrap: break-word;
+
+                .leftTitle, .leftSubtitle {
+                  color: var(--composer-font-color-primary);
+                  text-align: left; 
+                }
+              }
+
+              .contacts {
+                width: 100%;
+                gap: var(--composer-gap-md);
+                display: flex;
+                flex-direction: column;
+                position: relative;
+
+                .contact {
+                  display: flex;
+                  gap: var(--composer-gap-md);
+                  position: relative;
+                  align-items: center;
+
+                  .icon {
+                    color: var(--composer-font-color-primary);
+                    font-size: 2rem;
+                    flex-shrink: 0;
+                  }
+
+                  .contactName {
+                    color: var(--composer-font-color-primary);
+                    text-align: left;
+                  }
+                }
+              }
+            }
+
+            .socials {
+              width: 100%;
+              display: flex;
+              flex-direction: row;
+              gap: var(--composer-gap-md);
+              align-self: center;
+              flex-wrap: wrap;
+              justify-content: center;
+
+              &.socials-full {
+                justify-content: baseline;
+              }
+
+              .icon-container {
+                background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+                color: var(--composer-font-color-primary);
+                border-radius: 100%;
+                z-index: 1;
+
+                &.icon-container-no-image {
+                  background-color: var(--composer-html-background);
+                }
+
+                .icon {
+                  font-size: 1.5rem;
+                  height: var(--composer-gap-md);
+                  width: var(--composer-gap-md);
+                  margin: var(--composer-gap-sm);
+                  display: flex;
+                }
+              }
+            }
+          }
+        }
+
+        // Image varsa white, yoksa primary color
+        &.with-background {
+          .left {
+            .content {
+              .left-top {
+                .left-top-content {
+                  .leftTitle, .leftSubtitle {
+                    color: white;
+                  }
+                }
+
+                .contacts {
+                  .contact {
+                    .icon {
+                      color: white;
+                    }
+
+                    .contactName {
+                      color: white;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .right-container {
+        display: flex;
+        width: 150%;
+        flex-direction: column;
+        position: relative;
+        flex-grow: 1;
+        height: auto;
+        padding: var(--composer-gap-lg);
+        padding-right: calc(var(--composer-gap-xl) * 2);
+        gap: var(--composer-gap-md);
+        justify-content: space-between;
+        background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+        border-top-right-radius: var(--composer-border-radius-md);
+        border-bottom-right-radius: var(--composer-border-radius-md);
+
+        &.right-container-no-image {
+          border-radius: var(--composer-border-radius-md);
+        }
+        .rightTitle {
+          color: var(--composer-font-color-primary);
+          margin-top: var(--composer-gap-md);
+          z-index: 1;
+          text-align: left; 
+        }
+
+        .form-container {
+          position: relative;
+          transition: 1s;
+          display: flex;
+          flex-direction: row;
+          margin-top: var(--composer-gap-md);
+          width: 100%;
+          gap: var(--composer-gap-xl);
+          height: auto;
+
+          .form {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            gap: var(--composer-gap-xl);
+
+            .inputSide {
+              display: flex;
+              flex-direction: column;
+              gap: var(--composer-gap-md);
+
+              .input-container {
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: var(--composer-gap-xl);
+              }
+
+              .label {
+                color: var(--composer-font-color-primary);
+                display: flex;
+                align-items: center;
+                gap: var(--composer-gap-xs);
+                width: fit-content;
+              }
+
+              .require-star {
+                color: var(--composer-font-color-primary);
+                margin: 0;
+                width: fit-content;
+              }
+
+              .inputs {
+                display: flex;
+                flex-direction: column;
+                gap: var(--composer-gap-md);
+              }
+
+              .input-box {
+                color: var(--composer-font-color-primary);
+                width: 100%;
+              }
+
+              .input {
+                color: var(--composer-font-color-primary);
+                padding: var(--composer-gap-xs) 0;
+                border-radius: var(--composer-border-radius-sm);
+                border: none;
+                border-bottom: 1px solid var(--composer-tertiary-color);
+                width: 100%;
+                outline: none;
+                resize: none;
+                height: var(--composer-gap-lg);
+                background-color: color-mix(in srgb, var(--composer-html-background), var(--composer-font-color-primary) 5%);
+
+                &::placeholder {
+                  color: var(--composer-tertiary-color);
+                }
+              }
+
+              .line-numbers {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 30px;
+                text-align: right;
+                padding-right: var(--composer-gap-sm);
+                color: var(--composer-font-color-primary);
+                user-select: none;
+                pointer-events: none;
+                line-height: 0.5rem;
+              }
+
+              .input:focus {
+                outline: none;
+              }
+
+              .error-message {
+                color: var(--composer-danger-color);
+                font-size: 1rem;
+                margin-top: var(--composer-gap-xs);
+              }
+            }
+          }
+        }
+
+        .form-button {
+          padding-top: var(--composer-gap-md);
+          display: flex;
+          flex-direction: row;
+          gap: var(--composer-gap-md);
+          align-items: center;
+          justify-content: center;
+
+          .submit-button{
+            .button-text {
+              content: "";
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-tablet-width}) {
+  .container {
+    .max-content {
+      .box {
+
+        .left-container {
+          height: auto;
+          padding: 0 var(--composer-gap-sm);
+
+          .left {
+            height: 95%;
+
+            .content {
+              padding: var(--composer-gap-md);
+
+              .left-top {
+                .contacts {
+                  .contact {
+                    gap: var(--composer-gap-sm);
+
+                    .icon {
+                      font-size: 1.5rem;
+                      flex-shrink: 0;
+                    }
+                  }
+                }
+              }
+
+              .socials {
+                gap: var(--composer-gap-sm);
+              }
+            }
+          }
+        }
+
+        .right-container {
+          padding: var(--composer-gap-lg) var(--composer-gap-md);
+            
+          .rightTitle {
+            margin: 0;
+          }
+
+          .form-container {
+            margin: 0;
+
+            .form {
+              .inputSide {
+                .input-container {
+                  width: 100%;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  gap: var(--composer-gap-sm);
+                }
+              }
+            }
+          }
+
+          .form-button {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container (max-width: #{$composer-phone-width}) {
+  .container {
+    .max-content {
+      .box {
+        flex-direction: column;
+
+        .left-container {
+          padding: var(--composer-gap-md);
+          width: auto;
+
+          .background {
+            border-top-left-radius: var(--composer-border-radius-md);
+            border-top-right-radius: var(--composer-border-radius-md);
+            border-bottom-left-radius: unset;
+            border-bottom-right-radius: unset;
+          }
+
+          .left {
+            height: 75%;
+
+            .content {
+              padding: 0;
+              width: 100%;
+
+              .left-top {
+                gap: var(--composer-gap-md);
+                .contacts {
+                  .contact {
+                    gap: var(--composer-gap-sm);
+
+                    .icon {
+                      width: var(--composer-gap-md);
+                      height: var(--composer-gap-md);
+                    }
+                  }
+                }
+              }
+
+              .socials {
+                gap: var(--composer-gap-sm) !important;
+                padding-top: var(--composer-gap-md);
+                overflow: auto;
+                padding: 0;
+
+                .icon-container {
+                  .icon {
+                    width: var(--composer-gap-md);
+                    height: var(--composer-gap-md);
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .right-container {
+          width: 100%;
+          padding: var(--composer-gap-md);
+          border-radius: var(--composer-border-radius-md);
+
+          .form-container {
+            margin: 0;
+
+            .form {
+              .inputSide {
+                .input-container {
+                  flex-direction: column;
+                  gap: var(--composer-gap-md);
+                }
+              }
+            }
+          }
+
+          .form-button {
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}