From ff50009e246124f251575f872d44851fcf81ed5a Mon Sep 17 00:00:00 2001 From: ganga satish kumar Date: Sun, 13 Mar 2022 11:43:32 +0530 Subject: [PATCH] leave styles update --- .../current-screen.component.scss | 358 ++++++++++-------- 1 file changed, 195 insertions(+), 163 deletions(-) diff --git a/src/app/current-screen/current-screen.component.scss b/src/app/current-screen/current-screen.component.scss index 51f05df5..77b8dbaf 100644 --- a/src/app/current-screen/current-screen.component.scss +++ b/src/app/current-screen/current-screen.component.scss @@ -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%; +} \ No newline at end of file