ganga satish kumar
3 years ago
1 changed files with 195 additions and 163 deletions
@ -1,165 +1,197 @@ |
|||
@import '../../styles.scss'; |
|||
.main-container { |
|||
background: $clr-mania; |
|||
padding: 0%; |
|||
margin-bottom: 20%; |
|||
.page-container { |
|||
height: 100%; |
|||
.content { |
|||
background: $clr-mania; |
|||
width: 100%; |
|||
@include flex-box(column, center, center); |
|||
.clear-content{ |
|||
width: 90%; |
|||
align-items: left; |
|||
|
|||
&.margin-top5{ |
|||
margin-top: 5%; |
|||
} |
|||
} |
|||
.card { |
|||
width: 100%; |
|||
background: $clr-mania; |
|||
float: left; |
|||
min-height: 250px; |
|||
.user-input{ |
|||
border-radius: 10px; |
|||
border: 2px solid $clr-grey; |
|||
} |
|||
|
|||
ul{ |
|||
display: flex; |
|||
height: auto; |
|||
flex-wrap: wrap; |
|||
padding-top: 10%; |
|||
|
|||
li { |
|||
@include flex-box(row, center, right); |
|||
margin-bottom:10%; |
|||
flex: 1 1 50%; |
|||
.icon{ |
|||
width: 150px; |
|||
height: 150px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.input-left-align { |
|||
padding: 1%; |
|||
margin-bottom: 1%; |
|||
.input-wrapper { |
|||
margin: 2% 3%; |
|||
width: 94%; |
|||
.clickIcon { |
|||
position: absolute; |
|||
right: 2%; |
|||
} |
|||
} |
|||
} |
|||
&.card-noborder { |
|||
border-radius: 0px; |
|||
box-shadow: 0px 2px 8px rgba(96, 97, 112, 0.16); |
|||
} |
|||
.tab-counter{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 50%; |
|||
height: 40px; |
|||
color: $clr-white; |
|||
margin-left: 10px; |
|||
width: 40px; |
|||
font-size: 14px; |
|||
|
|||
&.hot{ |
|||
background-color: #ff4081; |
|||
} |
|||
} |
|||
.align-middle{ |
|||
@include flex-box(column, top); |
|||
text-align: center; |
|||
flex: 3; |
|||
padding-bottom: 5px; |
|||
.number-txt{ |
|||
font-size: 1.2rem; |
|||
padding-top:1%; |
|||
padding-bottom:1%; |
|||
} |
|||
.footer-icons{ |
|||
width: 40%; |
|||
height: 40%; |
|||
padding-bottom: 5px; |
|||
} |
|||
.icons-position{ |
|||
position: relative; |
|||
top: -2.7rem; |
|||
left: 78%; |
|||
} |
|||
.txtFld-icons{ |
|||
width: 10%; |
|||
height: 10%; |
|||
} |
|||
.txtFld-icons:first-child{ |
|||
margin-right: 1%; |
|||
} |
|||
.txtFld-icons2{ |
|||
width: 10%; |
|||
height: 10%; |
|||
} |
|||
.txt-content{ |
|||
color: #0B5FA4; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
.leave-status{ |
|||
background-color: $clr-mania; |
|||
.width-90{ |
|||
width: 90%; |
|||
min-width: 90%; |
|||
margin: 5% auto; |
|||
} |
|||
} |
|||
|
|||
.onRoadPriceContainer{ |
|||
width: 98%; |
|||
} |
|||
|
|||
.card-accordion { |
|||
@include flex-box(row, left, center); |
|||
font-size: 1rem; |
|||
margin: 3%; |
|||
.icon-align { |
|||
flex: 1; |
|||
justify-content: flex-end; |
|||
font-size: 1.875em; |
|||
} |
|||
} |
|||
.card > div { |
|||
padding: 5%; |
|||
flex: 9; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
button { |
|||
margin: 5% 0%; |
|||
width: 90%; |
|||
box-sizing: border-box; |
|||
} |
|||
.bottom-section { |
|||
@include flex-box(column, center, center); |
|||
padding: 5% 5% 7% 5%; |
|||
.details { |
|||
color: $clr-grey-noresults; |
|||
.contact { |
|||
color: $clr-blue; |
|||
} |
|||
} |
|||
.disclaimer { |
|||
color: $clr-grey-light; |
|||
text-align: center; |
|||
} |
|||
p { |
|||
padding: 3%; |
|||
} |
|||
} |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: #b4e8fd; |
|||
} |
|||
.font-body-xsmall-bold { |
|||
font-size: 0.812rem; |
|||
line-height: 1.125rem; |
|||
letter-spacing: 1px; |
|||
font-family: "Raleway VariableFont"; |
|||
text-transform: uppercase; |
|||
} |
|||
.flex-row { |
|||
flex-direction: row; |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
button { |
|||
border-radius: 10px; |
|||
font-size: 0.938rem; |
|||
width: 98%; |
|||
background: #0b5fa4 0 0 no-repeat padding-box !important; |
|||
margin: 2%; |
|||
} |
|||
.main-container { |
|||
background: #b4e8fd; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
} |
|||
.content { |
|||
background: #b4e8fd; |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.content .clear-content { |
|||
width: 90%; |
|||
align-items: left; |
|||
} |
|||
.content .clear-content.margin-top5 { |
|||
margin-top: 5%; |
|||
} |
|||
.content .card { |
|||
width: 100%; |
|||
background: #b4e8fd; |
|||
float: left; |
|||
min-height: 250px; |
|||
} |
|||
.content .card .user-input { |
|||
border-radius: 10px; |
|||
border: 2px solid #707070; |
|||
} |
|||
.content .card ul { |
|||
display: flex; |
|||
height: auto; |
|||
flex-wrap: wrap; |
|||
padding-top: 10%; |
|||
} |
|||
.content .card ul li { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: right; |
|||
margin-bottom: 10%; |
|||
flex: 1 1 50%; |
|||
} |
|||
.content .card ul li .icon { |
|||
width: 150px; |
|||
height: 150px; |
|||
} |
|||
.content .card .input-left-align { |
|||
padding: 1%; |
|||
margin-bottom: 1%; |
|||
} |
|||
.content .card .input-left-align .input-wrapper { |
|||
margin: 2% 3%; |
|||
width: 94%; |
|||
} |
|||
.content .card .input-left-align .input-wrapper .clickIcon { |
|||
position: absolute; |
|||
right: 2%; |
|||
} |
|||
.content .card.card-noborder { |
|||
border-radius: 0px; |
|||
box-shadow: 0px 2px 8px rgba(96, 97, 112, 0.16); |
|||
} |
|||
.content .card .tab-counter { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-radius: 50%; |
|||
height: 40px; |
|||
color: #fff; |
|||
margin-left: 10px; |
|||
width: 40px; |
|||
font-size: 14px; |
|||
} |
|||
.content .card .tab-counter.hot { |
|||
background-color: #ff4081; |
|||
} |
|||
.content .card .align-middle { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
flex: 3; |
|||
padding-bottom: 5px; |
|||
} |
|||
.content .card .align-middle .number-txt { |
|||
font-size: 1.2rem; |
|||
padding-top: 1%; |
|||
padding-bottom: 1%; |
|||
} |
|||
.content .card .align-middle .footer-icons { |
|||
width: 40%; |
|||
height: 40%; |
|||
padding-bottom: 5px; |
|||
} |
|||
.content .card .align-middle .icons-position { |
|||
position: relative; |
|||
top: -2.7rem; |
|||
left: 78%; |
|||
} |
|||
.content .card .align-middle .txtFld-icons { |
|||
width: 10%; |
|||
height: 10%; |
|||
} |
|||
.content .card .align-middle .txtFld-icons:first-child { |
|||
margin-right: 1%; |
|||
} |
|||
.content .card .align-middle .txtFld-icons2 { |
|||
width: 10%; |
|||
height: 10%; |
|||
} |
|||
.content .card .align-middle .txt-content { |
|||
color: #0b5fa4; |
|||
font-weight: bold; |
|||
} |
|||
.content .leave-status { |
|||
background-color: #b4e8fd; |
|||
} |
|||
.content .leave-status .width-90 { |
|||
width: 90%; |
|||
min-width: 90%; |
|||
margin: 5% auto; |
|||
} |
|||
.content .onRoadPriceContainer { |
|||
width: 98%; |
|||
} |
|||
.content .card-accordion { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: left; |
|||
align-items: center; |
|||
font-size: 1rem; |
|||
margin: 3%; |
|||
} |
|||
.content .card-accordion .icon-align { |
|||
flex: 1; |
|||
justify-content: flex-end; |
|||
font-size: 1.875em; |
|||
} |
|||
.content .card > div { |
|||
padding: 5%; |
|||
flex: 9; |
|||
justify-content: space-between; |
|||
} |
|||
button { |
|||
margin: 5% 0%; |
|||
width: 90%; |
|||
box-sizing: border-box; |
|||
} |
|||
.bottom-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 5% 5% 7% 5%; |
|||
} |
|||
.bottom-section .details { |
|||
color: #5d5d5d; |
|||
} |
|||
.bottom-section .details .contact { |
|||
color: #006ad0; |
|||
} |
|||
.bottom-section .disclaimer { |
|||
color: #5d5d5d; |
|||
text-align: center; |
|||
} |
|||
.bottom-section p { |
|||
padding: 3%; |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue