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;