TRI-293: add customer-form + adaptive

styles/base/typograph.scss

@@ -0,0 +1,67 @@
+@import "variables";
+
+:root {
+  --brand-primary: #{$brand-primary};
+  --brand-white: #{$brand-white};
+  --brand-black: #{$brand-black};
+  --brand-black2: #{$brand-black2};
+  --brand-grey: #{$brand-grey};
+  --brand-grey2: #{$brand-grey2};
+  --brand-grey3: #{$brand-grey3};
+  --brand-orange: #{$brand-orange};
+
+  --box-shadow-primary: #{$box-shadow-primary};
+
+  --base-border-radius: #{$base-border-radius};
+  --base-border: #{$base-border};
+  --base-input-height: #{$base-input-height};
+
+
+  text-align: center;
+  color: var(--brand-black2);
+}
+
+html,
+body {
+  max-width: 100vw;
+  max-height: initial;
+  overflow-x: hidden;
+}
+
+html {
+  overflow: hidden;
+}
+
+label {
+  display: inline-block;
+
+  &[required] {
+
+    &:before {
+      content: "*";
+      color: var(--brand-primary);
+    }
+  }
+}
+
+input, textarea {
+  outline: none;
+  border: var(--base-border);
+  border-radius: var(--base-border-radius);
+  height: var(--base-input-height);
+  width: 100%;
+  font-size: 16px;
+  line-height: 22px;
+  cursor: pointer;
+  padding: 10px 40px 10px 7px;
+  box-sizing: border-box;
+  max-width: 100%;
+
+  &.date {
+    background: white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat;
+  }
+
+  &.locate {
+    background: white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat;
+  }
+}