// Request a quote section
.request-quote {
- .text {
- padding-right: 30px;
- }
-
- .form {
- position: relative;
- }
-
- .zend_form {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin: 0 -14px; // Offset child padding on edges
-
- > div {
- flex-basis: 50%;
- padding: 0 14px; // To create a 28px gap between cells
- }
- }
-
- label {
- display: block;
- margin-bottom: 8px;
- font-size: 15px;
-
- &.required:after {
- content: '*';
- }
- }
-
- input[type="text"], input[type="email"], textarea, select {
- border: 1px solid @color-text;
- line-height: 53px;
- padding: 0 15px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border-radius: 0;
- color: @color-text;
- font-size: 14px;
- font-family: @body-font;
- }
-
- select {
- background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAICAYAAADuv08kAAAAnElEQVQoz2M4f/Hy8UNHjv8nhC9cunL4379/zAzUAt++f1c7cuzkN3yWAuW/ANUpM1AbPHn6rACfxU+fPc9hoAUABiHTxctXDmCz9NLlq3v+///PyEAr8P37D6Wjx09+RrYUyP/048cPeQZag2fPX2QgW/z8xctkBnoAUJBeunJtF8jSy1evb6NpEKMDYNDKnTpz7v7Pnz+laGkPAKftxKb2aSY8AAAAAElFTkSuQmCC');
- background-position: center right;
- background-repeat: no-repeat;
- padding-right: 40px;
- height: 53px;
- }
-
- textarea {
- line-height: 1.3;
- padding: 15px;
- height: 170px;
- display: block; // Removes space below element caused by inline-block
- }
-
- #wrap-tips {
- align-self: center;
- margin-bottom: 10px;
- }
-
- .tips {
- margin-top: 42px;
- padding: 20px 30px;
- background-color: @color-light-grey;
- min-height: 170px; // Same as textarea height
- position: relative;
-
- // < arrow
- &:after {
- right: 100%;
- top: 50%;
- content: '';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border: 16px solid transparent;
- border-right-color: @color-light-grey;
- margin-top: -16px;
- }
-
- ul {
- list-style-type: none;
- }
- li {
- margin-left: 15px;
- padding-left: 10px;
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAK0lEQVQIW2M0sXH5z8DAwHDmyB5GEA0CYAa6BFwWWQIuiKwDt0oMM7HZDgBNvBm7jVtGtgAAAABJRU5ErkJggg==');
- background-position: 0 9px;
- background-repeat: no-repeat;
- }
- }
-
- #submit-element {
- margin: 14px;
-
- button {
- .button();
- .background-button(@color-green);
- .font-thinning();
- color: #fff;
- font-size: 14px;
- }
- }
-
- // Validation Error Messages
- .errormessage {
- display: none; // Will be displayed elsewhere
- }
-
- .error dd {
- position: relative;
-
- &:after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 1px;
- width: 100%;
- height: 5px;
- background-color: @color-error;
- }
-
- input[type="text"], input[type="email"], select {
- border-color: @color-text;
- border-bottom-color: @color-error;
- }
-
- }
-
- .validation-messages {
- padding: 22px 50px;
- background-color: #242424;
- position: absolute;
- bottom: 10px;
- left: 50%;
- transform: translateX(-50%);
- color:#fff;
- font-size: 16px;
- text-align: center;
- border-radius: 200px;
- z-index: 1000;
- pointer-events: none;
- display: none;
- }
+ .text {
+ padding-right: 30px;
+ }
+
+ .form {
+ position: relative;
+ }
+
+ .zend_form {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin: 0 -14px; // Offset child padding on edges
+
+ > div {
+ flex-basis: 50%;
+ padding: 0 14px; // To create a 28px gap between cells
+ }
+ }
+
+ label {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 15px;
+
+ &.required:after {
+ content: '*';
+ }
+ }
+
+ input[type="text"], input[type="email"], textarea, select {
+ border: 1px solid @color-text;
+ line-height: 53px;
+ padding: 0 15px;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border-radius: 0;
+ color: @color-text;
+ font-size: 14px;
+ font-family: @body-font;
+ }
+
+ select {
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAICAYAAADuv08kAAAAnElEQVQoz2M4f/Hy8UNHjv8nhC9cunL4379/zAzUAt++f1c7cuzkN3yWAuW/ANUpM1AbPHn6rACfxU+fPc9hoAUABiHTxctXDmCz9NLlq3v+///PyEAr8P37D6Wjx09+RrYUyP/048cPeQZag2fPX2QgW/z8xctkBnoAUJBeunJtF8jSy1evb6NpEKMDYNDKnTpz7v7Pnz+laGkPAKftxKb2aSY8AAAAAElFTkSuQmCC');
+ background-position: center right;
+ background-repeat: no-repeat;
+ padding-right: 40px;
+ height: 53px;
+ }
+
+ textarea {
+ line-height: 1.3;
+ padding: 15px;
+ height: 170px;
+ display: block; // Removes space below element caused by inline-block
+ }
+
+ #wrap-tips {
+ align-self: center;
+ margin-bottom: 10px;
+ }
+
+ .tips {
+ margin-top: 42px;
+ padding: 20px 30px;
+ background-color: @color-light-grey;
+ min-height: 170px; // Same as textarea height
+ position: relative;
+
+ // < arrow
+ &:after {
+ right: 100%;
+ top: 50%;
+ content: '';
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border: 16px solid transparent;
+ border-right-color: @color-light-grey;
+ margin-top: -16px;
+ }
+
+ ul {
+ padding-left: 10px;
+ .list();
+ }
+ }
+
+ #submit-element {
+ margin: 14px;
+
+ button {
+ .button();
+ .background-button(@color-green);
+ .font-thinning();
+ color: #fff;
+ font-size: 14px;
+ }
+ }
+
+ // Validation Error Messages
+ .errormessage {
+ display: none; // Will be displayed elsewhere
+ }
+
+ .error dd {
+ position: relative;
+
+ &:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 1px;
+ width: 100%;
+ height: 5px;
+ background-color: @color-error;
+ }
+
+ input[type="text"], input[type="email"], select {
+ border-color: @color-text;
+ border-bottom-color: @color-error;
+ }
+
+ }
+
+ .validation-messages {
+ padding: 22px 50px;
+ background-color: #242424;
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #fff;
+ font-size: 16px;
+ text-align: center;
+ border-radius: 200px;
+ z-index: 1000;
+ pointer-events: none;
+ display: none;
+ }
}
\ No newline at end of file