// $font-family-base: "WorkSans-Regular" !default; body{ :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyMediumEN) !important; } } input, textarea, p ,label,div{ font-size: 16px; :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyLightEN) !important; } } h1, h2,h3, button { :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; } :root[dir="ltr"]{ font-family: var(--fontFamilyMediumEN) !important; } } ion-label{ color:var(--labelColor) !important; } .tipsPadding{ padding: 0px 10px; } .profileDiv{ margin: 5px auto !important; } .profileImg{ width: 90px; height: 90px; display: inline-flex; background: transparent; -webkit-border-radius:50% !important; -moz-border-radius:50% !important; border-radius: 50% !important; // margin:0 auto 40px; img{ -webkit-border-radius:50% !important; -moz-border-radius:50% !important; border-radius: 50% !important; width: 90px; height: 90px; } //box-shadow: 0px 0px 0px 10px #8c8c8c; } .loaderGif{ background: transparent !important; width:100px; height: 100px; } .loading-md .loading-wrapper, .loading-ios .loading-wrapper{ background: transparent !important; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; width: 150px; } .loading-md ,.loading-ios { ion-backdrop{ background-color: #8c8c8c !important; } } /***********change header color***************/ .headerBtn{ background-color: transparent; } .headerImg{ width: 36px; } /***************/ .attachImg{ max-width: 30px; width: 30px; } img.attachImg { max-width: 30px; width: 30px; } .attachImgBtn{ background-color: transparent; } .toolbar-title,.toolbar-title-md,.toolbar-title-ios{ color:(--light); font-size: 18px; } ion-header ion-icon.back-button-icon.icon { color: (--light); font-size: 25px; } ion-header ion-icon.icon.icon-ios.ion-ios-back{ font-size: 25px; } ion-header ion-icon.icon.icon-md.ion-md-back, ion-header ion-icon.icon.icon-md.ion-md-search, ion-header ion-icon.icon.icon-ios.ion-ios-search{ color: (--light); font-size: 18px; } button.disable-hover.item-button.button.button-md.button-clear.button-clear-md , button.disable-hover.item-button.button.button-ios.button-clear.button-clear-ios{ background: transparent; font-size: 16px; color:(--darkgray); } button.item-button.button.button-md.button-clear.button-clear-md, button.item-button.button.button-ios.button-clear.button-clear-ios { background: transparent; font-size: 16px; color:(--darkgray); } ion-header ion-icon.icon.icon-md.ion-md-close, ion-header ion-icon.icon.icon-ios.ion-ios-close{ color: (--light); } ion-header ion-icon.icon.icon-md.ion-md-add, ion-header ion-icon.icon.icon-ios.ion-ios-add{ color: (--light); } ion-icon.icon.icon-md.ion-md-search, ion-icon.icon.icon-ios.ion-ios-search{ color: (--darkgray); } .toolbar-background { background: (--primary); background: -moz-linear-gradient(45deg, (--primary) 0%, (--secondary) 36%,(--secondary) 59%, (--customnavy) 100%); background: -webkit-linear-gradient(45deg, (--primary) 0%, (--secondary) 36%,(--secondary) 59%, (--customnavy) 100%); background: linear-gradient(45deg, (--primary) 0%, (--secondary) 36%,(--secondary) 59%, (--customnavy) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary)', endColorstr='--var(customnavy)',GradientType=1 ); } /***************button bckground***************/ a{ color:var(--primary); } .button,.button-md, button-ios{ background:var(--customnavy); white-space: normal; // background: $primary; // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%); // background: -webkit-linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // background: linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 ); color:var(--light); text-transform: capitalize; min-width: 200px; min-height: 45px; } .iconButton{ min-width: auto; min-height: auto; } /*********select style************/ ion-item.item.item-block.item-md.item-select.ng-touched, ion-item.item.item-block.item-ios.item-select.ng-touched, ion-item.item.item-block.item-md.item-datetime.ng-touched, ion-item.item.item-block.item-ios.item-datetime.ng-touched { border-bottom: 2px solid var(--danger); } ion-item.item.item-block.item-md.item-select.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-ios.item-select.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-md.item-datetime.ng-touched.input-has-value.item-input-has-value, ion-item.item.item-block.item-ios.item-datetime.ng-touched.input-has-value.item-input-has-value { border-bottom: 0px; } /********center element****************/ .centerDiv{ margin:auto; text-align: center; display: block; .button,.button-md, button-ios{ min-width: 200px; } .iconButton{ min-width: auto; min-height: auto; } } /***********item icon************/ .item-icon{ width:25px; height:25px; } [dir="ltr"] .item-icon{ margin: 9px 8px 9px 0; } [dir="rtl"] .item-icon{ margin: 6px 0px 9px 9px; } /**********text format**********/ p.text-caps{ text-transform: uppercase; } .boldTxt,p.boldTxt,.boldTxt>label { :root[dir="ltr"]{ font-family: var(--fontFamilyBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } .boldTxtNav,p.boldTxtNav,.boldTxtNav>label { color: var(--customnavy); :root[dir="ltr"]{ font-family: var(--fontFamilyBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } ion-label.boldTxtNav.label.label-md,ion-label.boldTxtNav.label.label-ios{ // font-weight: bold; color:var(--customnavy); :root[dir="ltr"]{ font-family: var(--fontFamilySemiBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } /******* label stacked***********/ .label-md[stacked], .label-ios[stacked] { font-size: 16px; } /**********input **************/ input.text-input.text-input-md, input.text-input.text-input-ios{ font-size: 16px; :root[dir="ltr"]{ text-align: left; } :root[dir="rtl"]{ text-align: right; } } ion-datetime.datetime.datetime-md.ng-valid.ng-dirty.ng-touched, ion-datetime.datetime.datetime-ios.ng-valid.ng-dirty.ng-touched { direction: ltr !important; text-align: left !important; } /**********background************/ .gray-bg{ background-color:var(--gray); margin-top: 10px; } /***************select and alert ************/ .alert-md .alert-head,.alert-ios .alert-head{ background-color:var(--grayBG); color: var(--light); } /********profile grid************/ // .profile-grid{ // .col{ // text-align: center; // } // } /**********card**********/ ion-card ,ion-card-md ,ion-card-ios { box-shadow: black; // background-color: #99999938; -webkit-border-top-left-radius: 10px !important; -webkit-border-top-right-radius: 10px !important; -moz-border-radius-topleft: 10px !important; -moz-border-radius-topright: 10px !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } ion-card-header{ padding: 0px 10px !important; color: var(--light) !important; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: var(--grayBG); .hrTitle{ white-space: normal; padding: 5px; padding-top: 12px; width:85%; min-height: 45px; @media screen and (max-width: var(--break-big)) { width: 80%; } @media screen and (max-width: var(--break-small)) { width: 74%; } :root[dir="ltr"]{ float:left; } :root[dir="rtl"]{ float:right; } line-height: 1.2; } .button,.button-md, button-ios{ background: transparent; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; min-width: auto; padding: 0px !important; margin:0px 5px !important; :root[dir="ltr"]{ float:right; } :root[dir="rtl"]{ float:left; } } } ion-col.colBold,ion-col.colBold>label{ // font-weight: bold; color:var(--customnavy); :root[dir="ltr"]{ font-family: var(--fontFamilyBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } font-size: 15px; } // .boldTxt{ // font-weight: bold; // } // p.boldTxt{ // font-weight: bold; // } /**********button grid***********/ // .gridBtn{ // height: auto; // min-height: 35px !important; // padding: 10px; // font-size: 12px; // white-space: normal; // } // button.gridBtn.button.button-md, // button.gridBtn.button.button-ios, // button.gridBtn.button.button // { // width: 90%; // } // .gridBtnCol{ // text-align: center; // } // .btnGrid{ // padding:0px; // } /*****************dynamic form*******************/ .daynamicForm-Label{ font-size: 16px; // margin-left: 15px; color: var(--customnavy); display: block; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; /* font-size: inherit; */ // text-overflow: ellipsis; // white-space: nowrap; white-space: normal; // padding-top: 10px; padding: 5px 0px; margin: 10px auto; :root[dir="ltr"]{ font-family: var(--fontFamilySemiBoldEN) !important; } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR) !important; font-weight: bold; } } img.flipImg{ :root[dir="rtl"]{ -webkit-transform: scaleX(-1); transform: scaleX(-1); } } .daynamicForm-Input{ width: 100%; border: none; border-bottom: var(--gray) solid 1px; border-radius: 0px; // margin-left: 10px; // text-align: right; color: var(--dark); font-size: 15px; padding: 6px 0px; } .daynamicForm-Button{ background:var(--customnavy); white-space: normal; // background: $primary; // background: -moz-linear-gradient(45deg, $primary 0%, $secondary 36%, $secondary 59%, $customnavy 100%); // background: -webkit-linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // background: linear-gradient(45deg, $primary 0%,$secondary 36%,$secondary 59%,$customnavy 100%); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$primary', endColorstr='$customnavy',GradientType=1 ); color:var(--light); text-transform: capitalize; min-width: 200px; min-height: 45px; font-weight: 500; border: none; border-radius: 2px; -ms-flex: 1; flex: 1; font-size: 14px; padding: 0 1.1em; margin: 0.4rem 0.2rem; justify-content: center; } .custom-button-element{ //margin-top: 10px; margin: 10px auto; text-align: center; } .daynamicForm-DateTime{ color: var(--dark); font-size: 15px; border: none; font-weight: 400; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; padding: 6px 0px; background: var(--light); border-bottom: var(--cusgray) solid 1px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; } .daynamicForm-DateTime:after{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; border-radius: 0px; position: absolute; top: 40%; :root[dir="ltr"]{ right: 5px; } :root[dir="rtl"]{ left: 5px; } content: ""; z-index: 98; } .daynamicForm-Select{ color: var(--dark); font-size: 15px; // background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0; // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0.12)), color-stop(50%, rgba(0, 0, 0, 0.12))); // background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%); // background-size: 96% 0; // background-repeat: no-repeat; border: none; font-weight: 400; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; padding: 6px 0px; background-color: var(--light); border-bottom: var(--cusgray) solid 1px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; // text-overflow: ''; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; :root[dir="ltr"]{ background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-right: 20px; } :root[dir="rtl"]{ background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%; background-size: 6px 6px, 6px 6px, 2.9em 2.9em; background-repeat: no-repeat; padding-left: 20px; } } .daynamicForm-Select:after{ width: 0; height: 0; border-radius: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999; position: absolute; top: 40%; :root[dir="ltr"]{ right: 5px; } :root[dir="rtl"]{ left: 5px; } content: ""; z-index: 98; } .requiredClass::before{ content:"* "; } .requiredClassElm{ border-bottom:2px solid var(--danger); } textarea:disabled, input:disabled ,.daynamicForm-Select:disabled, .daynamicForm-DateTime:disabled{ background: rgba(204, 204, 204, 0.11); } div.daynamicForm-DateTime.disabled{ background: rgba(204, 204, 204, 0.11); } .iconButton{ background: transparent; -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } .imgSize{ width: 22px; height: 22px; -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } /************footer****************/ ion-footer { padding:15px 0px; background-color: var(--light) !important; border: 0px !important; box-shadow: none !important; -webkit-box-shadow:none; -moz-box-shadow: none; } .footer-md::before,.footer-ios::before{ background-color: var(--light) !important; background-image:none; border: 0px !important; box-shadow: none !important; -webkit-box-shadow:none; -moz-box-shadow: none; } /*************progress bar****************/ .progcontainer { margin: auto; text-align: center; width: 100%; min-height: 100px; } .cusprogressbar { counter-reset: step; padding: 0px; } .cusprogressbar li { list-style-type: none; width: 33.333%; :root[dir="ltr"]{ float: left; } :root[dir="rtl"]{ float: right; } font-size: 12px; position: relative; text-align: center; color: var(--darkgray); :root[dir="ltr"]{ font-family:var(--fontFamilySemiBoldEN); } :root[dir="rtl"]{ font-family: var(--fontFamilyIOSAR); font-weight: bold; } } .cusprogressbar li:before { width: 40px; height: 40px; content: counter(step); color: var(--light); counter-increment: step; line-height: 40px; border: 0px; background-color: var(--grayBG); display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; } .cusprogressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: var(--cusgray); top: 20px; :root[dir="ltr"]{ left: -50%; } :root[dir="rtl"]{ right: -50%; } z-index: -1; } .cusprogressbar li:first-child:after { content: none; } .cusprogressbar li.active { color: var(--custgreen); } .cusprogressbar li.active:before { background-color: var(--custgreen); } //.cusprogressbar li.active + li:after { // background-color: #55b776; //color: $custgreen; //} /**************badge **********************/ .badge-md,.badge-ios { color: #fff; background-color: #327eff; background: red; border-radius: 50% !important; min-width: 30px; min-height: 30px; line-height: 2; } /**********no data div***********/ div.no-dataDiv{ .row { border-bottom: 1px solid; border-color:var(--cusgray); } h4 { font-size: 2.2rem; text-align: center; color: var(--dark); } .empty-data { font-size: 10.2em; display: block; margin: .2em auto 0; color: var(--custgreen); } } .toast-md .toast-message,.toast-ios .toast-message { background-color: var(--secondary); } /*************picker style*********************/ .picker-md .picker-opt,.picker-ios .picker-opt{ font-size: 18px; } .picker-md .picker-col,.picker-ios .picker-col { padding: 0px 2px !important; }