sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-293: add customer-form + adaptive

Browse Source
This commit is contained in:
Artyom Pratsko
2024-12-18 18:41:45 +03:00
parent e56d29c322
commit 6044b302bb
26 changed files with 1243 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
styles/base/btn.scss Normal file
View File

@@ -0,0 +1,20 @@
@import "variables";
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px 18px;
justify-content: center;
align-items: center;
margin: 0 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--brand-primary);
color: var(--brand-white);
}

55
styles/base/cargo.scss Normal file
View File

@@ -0,0 +1,55 @@
.cargo {
&--inline {
display: inline-block;
margin-right: 33px;
}
&--info {
label {
background: url(/static/img/svg/Info3.svg) right bottom 45% no-repeat;
background-size: 20px;
padding-right: 26px;
@media (max-width: $screen-xs-max) {
padding-right: 20px;
}
}
}
input {
width: 0;
height: 0;
display: none;
&:checked {
+ label::before {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
}
}
}
&__label {
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 0;
&:before {
content: '';
display: inline-block;
width: 26px;
height: 26px;
flex-shrink: 0;
flex-grow: 0;
border: var(--base-border);
border-radius: var(--base-border-radius);
margin-right: 10px;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
background-color: white;
}
}
}

278
styles/base/grid.scss Normal file
View File

@@ -0,0 +1,278 @@
@import "variables";
.container {
margin: 0 auto;
max-width: $container-xl; //1280
position: relative;
box-sizing: border-box;
&.black {
background-color: #0088cc;
height: 200px;
margin: 0;
}
}
@media (min-width: $screen-xxl-min) {
.container {
max-width: $container-xxl; //1720
}
}
@media (max-width: $screen-lg-max) {
.container {
max-width: $container-lg; //1720
}
}
@media (max-width: $screen-md-max) {
.container {
width: $container-md;
}
}
@media (max-width: $screen-sm-max) {
.container {
width: $container-sm;
}
}
@media (max-width: $screen-xs-max) {
.container {
max-width: 100vw;
margin: 0;
padding: 0 16px;
}
}
.col-12 {
width: 100%
}
.col-11 {
width: 91.66666667%
}
.col-10 {
width: 83.33333333%
}
.col-9 {
width: 75%
}
.col-8 {
width: 66.66666667%
}
.col-7 {
width: 58.33333333%
}
.col-6 {
width: 50%
}
.col-5 {
width: 41.66666667%
}
.col-4 {
width: 33.33333333%
}
.col-3 {
width: 25%
}
.col-2 {
width: 16.66666667%
}
.col-1 {
width: 8.33333333%
}
@media (min-width: $screen-sm-min) {
.col-sm-12 {
width: 100%
}
.col-sm-11 {
width: 91.66666667%
}
.col-sm-10 {
width: 83.33333333%
}
.col-sm-9 {
width: 75%
}
.col-sm-8 {
width: 66.66666667%
}
.col-sm-7 {
width: 58.33333333%
}
.col-sm-6 {
width: 50%
}
.col-sm-5 {
width: 41.66666667%
}
.col-sm-4 {
width: 33.33333333%
}
.col-sm-3 {
width: 25%
}
.col-sm-2 {
width: 16.66666667%
}
.col-sm-1 {
width: 8.33333333%
}
}
@media (min-width: $screen-md-min) {
.col-md-12 {
width: 100%
}
.col-md-11 {
width: 91.66666667%
}
.col-md-10 {
width: 83.33333333%
}
.col-md-9 {
width: 75%
}
.col-md-8 {
width: 66.66666667%
}
.col-md-7 {
width: 58.33333333%
}
.col-md-6 {
width: 50%
}
.col-md-5 {
width: 41.66666667%
}
.col-md-4 {
width: 33.33333333%
}
.col-md-3 {
width: 25%
}
.col-md-2 {
width: 16.66666667%
}
.col-md-1 {
width: 8.33333333%
}
}
@media (min-width: $screen-lg-min) {
.col-lg-12 {
width: 100%
}
.col-lg-11 {
width: 91.66666667%
}
.col-lg-10 {
width: 83.33333333%
}
.col-lg-9 {
width: 75%
}
.col-lg-8 {
width: 66.66666667%
}
.col-lg-7 {
width: 58.33333333%
}
.col-lg-6 {
width: 50%
}
.col-lg-5 {
width: 41.66666667%
}
.col-lg-4 {
width: 33.33333333%
}
.col-lg-3 {
width: 25%
}
.col-lg-2 {
width: 16.66666667%
}
.col-lg-1 {
width: 8.33333333%
}
}
@media (min-width: $screen-xl-min) {
.col-xl-12 {
width: 100%
}
.col-xl-11 {
width: 91.66666667%
}
.col-xl-10 {
width: 83.33333333%
}
.col-xl-9 {
width: 75%
}
.col-xl-8 {
width: 66.66666667%
}
.col-xl-7 {
width: 58.33333333%
}
.col-xl-6 {
width: 50%
}
.col-xl-5 {
width: 41.66666667%
}
.col-xl-4 {
width: 33.33333333%
}
.col-xl-3 {
width: 25%
}
.col-xl-2 {
width: 16.66666667%
}
.col-xl-1 {
width: 8.33333333%
}
}
@media (min-width: $screen-xxl-min) {
.col-xxl-12 {
width: 100%
}
.col-xxl-11 {
width: 91.66666667%
}
.col-xxl-10 {
width: 83.33333333%
}
.col-xxl-9 {
width: 75%
}
.col-xxl-8 {
width: 66.66666667%
}
.col-xxl-7 {
width: 58.33333333%
}
.col-xxl-6 {
width: 50%
}
.col-xxl-5 {
width: 41.66666667%
}
.col-xxl-4 {
width: 33.33333333%
}
.col-xxl-3 {
width: 25%
}
.col-xxl-2 {
width: 16.66666667%
}
.col-xxl-1 {
width: 8.33333333%
}
}

44
styles/base/redefine.scss Normal file
View File

@@ -0,0 +1,44 @@
@import "variables";
header {
padding-left: 0;
padding-right: 0;
}
footer {
overflow: hidden;
}
.wrapper_header_content {
max-width: initial;
}
@media only screen and (max-width: $screen-xl-max) {
section.profile {
width: 100%;
}
.info_profile {
width: 100%;
}
}
@media (max-width: $screen-sm-max) {
.menu_buttons.right.open {
right: 0;
transition: 200ms;
position: fixed;
display: block;
padding-top: 0;
top: 45px;
background: #ffffff;
}
}
@media (max-width: $screen-sm-max) {
.menu_buttons.right.open {
//display: none;
}
}

67
styles/base/typograph.scss Normal file
View File

@@ -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;
}
}

56
styles/base/variables.scss Normal file
View File

@@ -0,0 +1,56 @@
//================================================================================//
//================================== grid ========================================//
//================================================================================//
$grid-columns: 12;
//$grid-gutter-width: 20px;
// media breakpoints
$screen-xxl-min: 1760px;//*
$container-xxl: 1720px;//*
$screen-xl-min: 1320px;
$container-xl: 1280px;
$screen-xl-max: ($screen-xl-min - .02);
$screen-lg-min: 992px;
$container-lg: 952px;
$screen-lg-max: ($screen-xl-min - .02);
$screen-md-min: 768px;
$container-md: 728px;
$screen-md-max: ($screen-lg-min - .02);
$screen-sm-min: 576px;
$container-sm: 536px;
$screen-sm-max: ($screen-md-min - .02);
$screen-xs-min: 0;
$screen-xs-max: ($screen-sm-min - .02);
//================================================================================//
//================================= colors =======================================//
//================================================================================//
$brand-primary: #FF613A;
$brand-white: #FFFFFF;
$brand-black: #000000;
$brand-black2: #272424;
$brand-grey: #F1F1F1;
$brand-grey2: #E6E6E6;
$brand-grey3: #7A7979;
$brand-orange: #FF613A;
//================================================================================//
//================================ Shadow ========================================//
//================================================================================//
$box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
//================================================================================//
//================================ Inputs ========================================//
//================================================================================//
$base-border-radius: 10px;
$base-border: 2.5px solid $brand-grey2;
$base-input-height: 60px;

4
styles/create_poster.scss Normal file
View File

@@ -0,0 +1,4 @@
@import "./base/variables";
@import "./base/cargo";
@import "./base/redefine";
@import "./create_poster/create_poster";

307
styles/create_poster/create_poster.scss Normal file
View File

@@ -0,0 +1,307 @@
@import "../base/variables";
.poster {
text-align: left;
box-sizing: border-box;
padding-top: 31px;
@media (max-width: $screen-lg-max) {
max-width: 65%;
}
@media (max-width: $screen-md-max) {
max-width: 55%;
}
@media (max-width: $screen-sm-max) {
max-width: 100%;
}
@media (max-width: $screen-xs-max) {
padding-top: 44px;
}
&__title {
max-width: 95%;
margin: 0 auto 5px;
font-size: 44px;
font-weight: 700;
line-height: 52px;
text-align: center;
@media (min-width: $screen-xl-min) {
max-width: 100%;
margin-bottom: 21px;
}
@media (max-width: $screen-lg-max) {
font-size: 32px;
line-height: 38.73px;
margin-bottom: 0;
}
@media (max-width: $screen-xs-max) {
max-width: 100%;
}
}
&__row {
display: flex;
padding: 40px 0;
border-bottom: 1px solid #E6E6E6;
gap: 40px;
@media (min-width: $screen-xl-min) {
padding: 39px 0;
}
@media (max-width: $screen-lg-max) {
display: block;
}
&--from-to {
@media (max-width: $screen-md-max) {
padding-top: 14px
}
@media (max-width: $screen-sm-max) {
padding-top: 30px;
}
@media (max-width: $screen-xs-max) {
padding-top: 40px;
}
label {
padding-left: 9px;
@media (max-width: $screen-lg-max) {
padding-left: 0;
}
@media (max-width: $screen-md-max) {
padding-left: 11px;
}
}
}
&--cargo {
@media (max-width: $screen-xs-max) {
padding-bottom: 29px;
}
}
&--date {
@media (max-width: $screen-lg-max) {
padding-bottom: 20px;
}
label {
padding-left: 9px;
@media (max-width: $screen-lg-max) {
margin-bottom: 20px;
}
@media (max-width: $screen-xs-max) {
padding-left: 0;
}
}
}
&--transport {
@media (max-width: $screen-lg-max) {
padding-bottom: 50px;
}
@media (max-width: $screen-md-max) {
padding-bottom: 39px;
}
@media (max-width: $screen-xs-max) {
padding-top: 42px;
}
label {
margin-bottom: 20px;
@media (max-width: $screen-xs-max) {
margin-bottom: 19px;
}
}
}
&--phone {
@media (max-width: $screen-lg-max) {
padding-top: 29px;
}
@media (max-width: $screen-md-max) {
padding-top: 38px;
}
@media (max-width: $screen-xs-max) {
padding-top: 40px;
padding-bottom: 39px;
}
label {
padding-left: 9px;
margin-bottom: 11px;
@media (max-width: $screen-lg-max) {
padding-left: 0;
margin-bottom: 20px;
}
}
input {
margin-bottom: 21px;
}
}
&--description {
@media (max-width: $screen-md-max) {
padding-top: 30px;
}
@media (max-width: $screen-xs-max) {
padding-top: 39px;
}
label {
padding-left: 9px;
margin-bottom: 10px;
@media (max-width: $screen-lg-max) {
padding-left: 0;
margin-bottom: 20px;
}
}
textarea {
min-height: 128px;
padding-top: 18px;
margin-bottom: 3px;
@media (max-width: $screen-lg-max) {
min-height: 210px;
margin-bottom: 6px;
}
@media (max-width: $screen-md-max) {
min-height: 305px;
}
}
}
&--distribution {
border-bottom: 0;
@media (max-width: $screen-lg-max) {
padding-bottom: 30px;
}
@media (max-width: $screen-md-max) {
padding-top: 38px;
padding-bottom: 40px;
}
label {
letter-spacing: -0.08px;
}
}
}
&__col {
flex: 1;
@media (max-width: $screen-lg-max) {
&:not(:last-child) {
margin-bottom: 20px;
}
}
}
&__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
@media (min-width: $screen-xl-min) {
max-width: 80%;
margin-bottom: 37px;
}
@media (max-width: $screen-lg-max) {
grid-template-columns: repeat(auto-fill, 261px);
}
label {
margin-bottom: 0;
padding-top: 10px;
padding-bottom: 10px;
}
}
&__info {
padding-left: 30px;
background: url(/static/img/svg/Info3.svg) left top no-repeat;
line-height: 22px;
@media (max-width: $screen-lg-max) {
font-size: 12px;
line-height: 20px;
max-width: 90%;
}
}
&__label {
margin-bottom: 10px;
}
&__area-descr {
text-align: right;
font-size: 14px;
line-height: 20px;
padding-right: 11px;
color: var(--brand-grey3);
@media (max-width: $screen-sm-max) {
padding-right: 0;
}
}
&__errors {
@media (max-width: $screen-lg-max) {
margin-bottom: 2px;
}
}
.btn {
margin: 0;
@media (max-width: $screen-xs-max) {
padding-left: 5px;
padding-right: 5px;
}
}
.cargo {
&--inline {
@media (max-width: $screen-sm-max) {
width: 100%;
}
}
}
}

4
styles/critical.scss Normal file
View File

@@ -0,0 +1,4 @@
@import "./base/variables";
@import "./base/grid";
@import "./base/typograph";
@import "./base/btn";

2
styles/moover/animate.scss vendored
View File

@@ -1,7 +1,7 @@
.animate {
padding: 60px 40px 49px;
opacity: 0;
background-color: var(--color-black2);
background-color: var(--brand-black2);
border-radius: 30px;
color: white;
margin-bottom: 160px;

2
styles/moover/cards.scss
View File

@@ -94,7 +94,7 @@
}
a {
color: var(--color-orange);
color: var(--brand-orange);
}
}

2
styles/moover/chatterbox.scss
View File

@@ -157,7 +157,7 @@
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
background: var(--brand-primary);
border: 0;
border-radius: 50%;
transition: opacity 100ms linear;

2
styles/moover/easy.scss
View File

@@ -82,7 +82,7 @@
&__item {
border-radius: 30px;
background-color: var(--color-grey);
background-color: var(--brand-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;

2
styles/moover/header.scss
View File

@@ -18,7 +18,7 @@
padding-top: 7px;
padding-bottom: 7px;
box-shadow: var(--box-shadow-primary);
border-bottom: 1px solid var(--color-grey);
border-bottom: 1px solid var(--brand-grey);
}
&__grid,

16
styles/moover/root.scss
View File

@@ -33,19 +33,19 @@
}
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-black2: #272424;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--color-orange: #FF613A;
--brand-primary: #FF613A;
--brand-white: #FFFFFF;
--brand-black: #000000;
--brand-black2: #272424;
--brand-grey: #F1F1F1;
--brand-grey3: #7A7979;
--brand-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
color: var(--color-black2);
color: var(--brand-black2);
}
html,

2
styles/moover/use.scss
View File

@@ -56,7 +56,7 @@
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--color-grey2);
color: var(--brand-grey3);
}
.title {