You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/src/app/mowadhafi/hr-request-form/hr-request-form.component.scss

557 lines
11 KiB
SCSS

.header-toolbar-new {
--background: #BE332F;
}
.contentBg {
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #BE332F;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
@media screen and (min-width: 1px) and (max-width:767px) {
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}
}
@media screen and (min-width: 768px) and (max-width:1024px) {
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}
}
.user-info {
text-align: center;
margin-bottom: 3px;
.user-image-container {
position: relative;
width: 100%;
height: 24px;
justify-content: space-between;
display: flex;
margin: 0 auto;
align-items: center;
}
}
.Boldtext {
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.Nametext {
font-size: 15px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.employee-information-indetail {
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col {
padding: 15px;
// border-bottom: 1px solid #ccc;
}
h2 {
font-size: 13px;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p {
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
@media screen and (min-width: 1px) and (max-width:767px) {
.user-image {
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
/* border: 1px solid #ccc; */
margin-top: -125px;
}
}
@media screen and (min-width: 768px) and (max-width:1024px) {
.user-image {
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}
}
.img {
width: 100px;
height: 100px;
display: inline-flex;
overflow: hidden;
background: transparent;
border-radius: 70% !important;
position: relative;
top: 3px;
}
.sendCodeBtn {
--background: #BE332F;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-left: 5px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
/* padding: 6px 24px; */
font-size: 15px;
width: 322px;
}
.verify-code {
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding: 21px 3px 34px 14px;
margin: 25px 22px 2px 22px;
}
// .sms_code{
// margin: 0px;
// text-align: center;
// }
ion-input {
margin: 0 5px;
text-align: center;
line-height: 0;
font-size: 32px;
//border: solid 1px #ccc;
border: 1px solid #ccc !important;
//box-shadow: 0 0 5px #ccc inset;
outline: none;
width: 20%;
transition: all .2s ease-in-out;
border-radius: 3px;
display: inline-block;
&:focus {
border-color: var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
}
&::selection {
background: transparent;
}
}
.sendVerifyBtn {
--background: #BE332F;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
font-size: 15px;
width: 322px;
margin-left: 22px;
}
@media screen and (min-width: 1px) and (max-width:320px) {
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;
margin-bottom: 18px;
}
.text-label {
color: black !important;
font-size: 9px;
margin-left: 2px;
margin-right: 2px;
font-family: 'WorkSans-Bold';
}
}
@media screen and (min-width: 325px) {
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;
margin-bottom: 18px;
}
.text-label {
color: black !important;
font-size: 10px;
margin-left: 15px;
margin-right: 13px;
font-family: 'WorkSans-Bold';
}
}
// .radio-list{
// background: white;
// margin-left: 18px;
// /* margin-right: 10px; */
// margin-top: 12px;
// }
.result-serviceType {
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 25px;
border: 1px solid #ccc;
margin: 15px;
}
.request-heading {
span {
display: block;
margin-bottom: 15px;
// padding-top: 8px;
padding-left: 3px;
/* font-weight: bold; */
font-size: 14px;
font-family: 'WorkSans-Bold';
}
}
.filed1 {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 10px !important;
padding-top: 10px !important;
color: #636161;
padding-bottom: 10px;
width: 130% !important;
}
.filedDesc {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
// margin: 10px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #636161;
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
}
.filedDesc-ar {
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
// margin: 10px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #636161;
--padding-bottom: 90px;
font-size: 13px;
text-align: start;
}
.labelDesc {
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
font-weight: bold;
color: #adabab;
}
.selectLabel {
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
/* font-family: 'WorkSans-Bold'; */
font-weight: bold;
color: black;
}
// .cancelRequest{
// padding: 10px 7px 10px 0px;
// ion-button{
// border-radius: 7px;
// padding: 12px 30px 12px 30px;
// background: #d00a0a;
// --background: transparent;
// --box-shadow: none !important;
// height: auto;
// min-height: inherit;
// font-size: 16px;
// font-weight: bold;
// margin-top: -5px;
// }}
// .submitRequest{
// padding: 10px 7px 10px 0px;
// ion-button{
// border-radius: 7px;
// padding: 12px 30px 12px 30px;
// background: #19a163;
// --background: transparent;
// --box-shadow: none !important;
// height: auto;
// min-height: inherit;
// font-size: 16px;
// font-weight: bold;
// margin-top: -5px;
// }}
.gridDiv {
width: 100%;
height: 40px;
margin-top: 18px;
font-size: 14px;
}
.gridCancelBtn {
min-width: auto;
// margin: 0px;
padding: 10px;
border: 1px solid var(--cusgray);
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
width: 45%;
height: 100%;
border-radius: 8px;
background: #d00a0a;
color: white;
margin-left: 15px;
margin-right: 5px;
font-family: 'WorkSans-bold';
font-size: 16px;
min-height: 1.0cm;
--background: #d00a0a !important;
}
.main-button {
--box-shadow: none;
}
.gridSubmitBtn {
min-width: auto;
// margin: 0px;
padding: 10px;
border: 1px solid var(--cusgray);
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
width: 45%;
height: 100%;
border-radius: 8px;
background: #19a163;
color: white;
// margin-left: 15px;
// margin-right: 5px;
font-family: 'WorkSans-bold';
font-size: 16px;
min-height: 1.0cm;
--background: #19a163 !important;
}
.filed-container {
margin-right: -17px;
margin-left: -25px;
}
.labels {
display: block;
margin-top: 15px;
padding-top: 8px;
padding-left: 3px;
font-size: 14px;
font-family: 'WorkSans-Bold';
}
.CreateBtn {
--background: var(--newgreen) !important;
background: var(--newgreen) !important;
white-space: normal;
color: var(--light);
text-transform: capitalize;
min-height: 1.0cm;
--border-radius: 7px !important;
border-radius: 7px !important;
--min-height: 1.6cm !important;
width: 315px;
}
.footer {
padding: 15px 0px 0px 0px;
background-color: var(--light) !important;
border: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none;
}
.Btn {
margin: auto;
text-align: center;
display: block;
}
.footer2 {
padding: 15px 0px 0px 24px;
background-color: var(--light) !important;
border: 0px !important;
box-shadow: none !important;
-webkit-box-shadow: none;
}
ion-footer .footer-button {
--background: #259CB8;
width: 80%;
}
@media screen and (min-width: 325px) {
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
margin-left: -233px;
}
}
@media screen and (min-width: 1px) and (max-width:320px) {
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
margin-left: -158px;
}
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.iconButton .imgSize {
width: 10px !important;
height: 10px;
}
button.iconButton.button.button-ios.button-default.button-default-ios,
button.iconButton.button.button-md.button-default.button-default-md {
padding: 0px;
}
select option[data-default] {
color: #888;
}
.Field-en {
border-radius: 30px;
border: 1px solid #a2a5a6 !important;
margin-bottom: 20px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}
.Field-ar {
border-radius: 30px;
border: 1px solid #a2a5a6 !important;
margin-bottom: 20px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}
.button-native {
box-shadow: none !important;
}
.gridAH {
text-align: justify;
}