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.
mohemm_moe/Mohem/src/app/time-card/time-card-details/time-card-details.component...

941 lines
19 KiB
SCSS

// ion-header{
// overflow: hidden;
// background: #f2f2f3;
// }
// ion-content{
// --ion-background-color: #f2f2f3;
// }
// ion-card-content {
// padding: 0px;
// }
// ion-card {
// box-shadow: none !important;
// background-color: white;
// margin: 10px -15px;
// margin-bottom: 20px;
// }
// ion-title{
// text-align: center;
// font-family: WorkSans-Bold;
// font-size: 18px;
// margin-right: 35px;
// }
// ///////////////////////////////here
// .slidPrev{
// // margin-top: 8px;
// margin-left: 10px;
// background: transparent;
// }
// .slidNext{
// background: transparent;
// margin-top: -1px;
// margin-left: 43px;
// }
// .activeArrow{
// height: 20px;
// width: 20px;
// color: white;
// }
// .disabledArrow{
// height: 20px;
// width: 20px;
// color: gray;
// // margin-right: 5px;
// }
// .header-toolbar-new{
// --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
// border-bottom-right-radius: 30px;
// border-bottom-left-radius: 30px;
// }
// .active-Segment {
// border-radius: 5px !important;
// font-size: 0.3cm !important;
// background: white !important;
// color: #fff !important;
// font-weight: bold !important;
// border: 1px solid white !important;
// text-transform: none;
// --color-checked: none;
// }
// .active-Segment ion-label{
// // color: #A3D077 !important;
// color: #11975F !important;
// font-size: 11px;
// }
// .normal-Segment ion-label{
// // color: #A3D077 !important;
// color: white !important;
// font-size: 11px;
// }
// .normal-Segment {
// border-radius: 5px !important;
// font-size: 0.3cm !important;
// background: #A3D077 !important;
// color: #fff !important;
// font-weight: bold !important;
// border: 1px solid white !important;
// text-transform: none;
// --color-checked: none;
// }
// .time-card-details-container{
// margin-right: 20px;
// margin-left: 20px;
// }
// .card-summary-heading{
// margin-left: 10px;
// margin-top: 12px;
// color: #606161;
// font-family: WorkSans-Bold;
// }
// .card-summary-heading-hours{
// color: #606161;
// font-family: WorkSans-Bold;
// }
// .card-summary-heading-hours-extended-heading{
// color: #D3D3D3;
// font-family: WorkSans-Bold;
// }
// /////////////////////////////////
// .time-card-details {
// background: white;
// margin: 20px;
// border-radius: 5px;
// }
// .time-card-details-heading-two {
// color: #606161;
// font-family: WorkSans-Bold;
// }
// .time-card-details-heading-two h2 {
// margin-top: 15px;
// font-size: 15px;
// }
// .time-card-span img{
// height: 30px;
// margin-top: -5px;
// margin-left: 10px;
// }
// .dayhours-button-container{
// width: 100%;
// padding-right: 5px;
// padding-left: 5px;
// }
// .dayhours-button{
// width: 50%;
// height: 35px;
// font-size: 15px;
// color: white;
// background: #606161;
// }
// /////////////////////////////////////
// .footer-modal-button{
// position: absolute;
// bottom: 0;
// color: white;
// width: 100%;
// text-align: center;
// }
// .footer-modal-button button{
// font-size: 20px;
// background: white;
// line-height: 2;
// margin: -42px auto 0;
// display: block;
// }
// ////////////////////////////
// .right-slider-icon{
// float: right;
// height: 100%;
// width: 15%;
// position: fixed;
// right: -5%;
// top: 31%;
// }
// .left-slider-icon{
// width: 15%;
// position: fixed;
// top: 32%;
// left: -4%;
// height: 100%;
// }
// //////////////////////////////////////////ENAD CODE////////////////////////////////////////////
// .colorBG{
// --background: #f0efef;
// }
// .header-div {
// background-color: #269DB8;
// text-transform: capitalize;
// height: 180px;
// position: relative;
// display: block;
// margin-bottom: -28px;
// }
// .Title{
// text-align: center !important;
// color: white !important;
// margin-top: -86px !important;
// font-size: 17px !important;
// font-family: workSans-Regular;
// }
// .header{
// margin-top: -221px;
// }
// .chart-modal .modal-Wrapper {
// --background: rgb(116, 108, 108) !important;
// --border-color:white!important ;
// width: 85%!important ;
// height: 40px !important ;
// }
// .navbar{
// font-size: 10px !important;
// --background: #269DB8 !important;
// color: aliceblue !important;
// // margin-top: 10px !important;
// }
// .menu{
// // margin-left:330px !important;
// margin-top: 0px !important;
// font-size: 35px !important;
// background: #269DB8;
// color: aliceblue;
// margin-left: 0px !important;
// }
// .person{
// margin-left:100px !important;
// margin-top: 0px !important;
// font-size: 23px !important;
// background: #269DB8 !important;
// color: aliceblue !important;
// }
// .grid{
// margin-bottom: 550px !important;
// margin-top: 20px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color:white !important;
// border-radius: 20px !important;
// height: 250px !important;
// }
// .headerGrid{
// margin-top: 5px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color: white !important;
// border-radius: 20px !important;
// height: 250px !important;
// border: 1px solid #d6d4d4;
// }
// .green-label{
// font-size: 12px;
// margin-top: -13px;
// }
// .green-amount{
// font-size: 17px;
// font-family: WorkSans-Bold;
// margin-top: -3px;
// }
// .blue-label{
// font-size: 12px;
// margin-top: -13px;
// }
// .blue-amount{
// font-size: 17px;
// font-family: WorkSans-Bold;
// margin-top: -4px;
// }
// .today-graph{
// display:block !important;
// height: 150px !important;
// width: 300 !important;
// margin-left: -70px !important;
// }
// .bodyGrid{
// // margin-bottom: 550px !important;
// // margin-top: 7px !important;
// // margin-left: 15px !important;
// // margin-right: 15px !important;
// // background-color:white !important;
// // border-radius: 20px !important;
// // height: 270px !important;
// // border: 1px solid #d6d4d4 !important;
// margin-top: 7px !important;
// margin-left: 15px !important;
// margin-right: 15px !important;
// background-color: white !important;
// border-radius: 20px !important;
// height: 321px !important;
// border: 1px solid #d6d4d4 !important;
// }
// .labelGrid{
// // margin-top: -30px !important;
// // background-color:white !important;
// // border-radius: 20px !important;
// // height: 100px !important;
// // border: 1px solid #d6d4d4;
// margin-top: -30px !important;
// background-color: white !important;
// border-radius: 23px !important;
// height: 100px !important;
// border: 1px solid #d6d4d4;
// padding-right: 0px;
// }
// .ionSliders{
// margin: 0px !important;
// padding: 0px !important;
// }
// .ionSlide{
// margin-top: 5px !important;
// margin-left: 190px !important;
// color: black !important;
// }
// .dateLable{
// margin-left: 90px !important;
// color: black !important;
// font-size: small !important;
// margin-top: 15px !important;
// }
// // h1{
// // font-size: 15px !important;
// // text-align: center !important;
// // }
// .arrowDropright{
// margin-left:100px !important;
// font-size: 20px !important;
// color: rgb(168, 165, 165) !important;
// margin-top: 15px !important;
// }
// .arrowDropleft{
// font-size: 20px !important;
// margin-left: 10px !important;
// margin-top: 15px !important;
// color: rgb(116, 108, 108) !important;
// }
// .ionLable{
// font-size: 10px !important;
// }
// .number{
// font-size: 18px !important;
// font-weight: bolder !important;
// color: black !important;
// }
// .header-div{
// background:var(--primary);
// background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
// background: #269DB8;
// // background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
// color:var(--light);
// text-transform: capitalize;
// display: block;
// position: relative;
// height: 210px;
// margin-bottom:60px;
// // border-radius: 0px 0px 70px 70px;
// }
// .request-heading {
// span {
// // text-align: center;
// // display: block;
// // padding-top: 8px;
// // font-family: workSans-Regular;
// // text-align: center;
// display: block;
// padding-top: 8px;
// /* font-family: workSans-Regular; */
// margin-left: -157px;
// margin-top: -19px;
// padding-bottom: 16px;
// }
// }
// .result-graph {
// position: relative;
// background: white;
// margin-right: 20px;
// margin-left: 20px;
// margin-top: 20px;
// padding-bottom: 20px;
// border-radius: 20px;
// }
// .result-text-container {
// padding: 0;
// margin: 0;
// position: absolute;
// left: 38%;
// top: 60%;
// display: block;
// text-align: center;
// transform: translate(-50%, -50%);
// h2 {
// font-size: 25px;
// font-family: WorkSans-Bold;
// color: black !important;
// margin: 0 auto;
// line-height: 36px;
// }
// p {
// font-size: 20px;
// color: black !important;
// // font-family: WorkSans-Bold;
// margin: 0 auto;
// line-height: 36px;
// }
// span {
// width: 125px;
// display: block;
// margin: 0 auto;
// font-size: 12px;
// color: black !important;
// font-family: workSans-Regular;
// }
// }
ion-content {
--ion-background-color: whitesmoke;
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
// left: 15%;
// right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
.contentBg{
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #269DB8;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
.user-info{
text-align: center;
margin-bottom: 15px;
.user-image-container{
position: relative;
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
// width: 20px;
// height: 20px;
// border-radius: 20px;
// border: 1px solid white;
// top: 0;
// right: 0;
// background-color: red;
// z-index: 9;
// }
// &.present:before{
// background-color: green !important;
// }
}
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
}
h1{
margin: 0;
padding: 0;
font-family: WorkSans-Bold;
font-size: 18px;
margin-bottom: 4px;
}
span{
font-size: 14px;
display: block;
color: #888
}
}
$actionBtnSize : 36px;
.user-actions{
text-align: center;
.action-button{
font-size: 11px;
white-space: nowrap;
color: #888;
.action-button-icon{
width: $actionBtnSize;
height: $actionBtnSize;
border-radius: $actionBtnSize;
margin: 0 auto;
display: block;
background-color: #269DB8;
line-height: $actionBtnSize;
margin-bottom: 3px;
img{
margin: 0 auto;
vertical-align: middle;
}
}
}
}
.employee-information-indetail{
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
ion-col{
padding: 15px;
border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
font-family: WorkSans-Bold;
margin: 0;
}
p{
font-size: 13px;
margin: 0;
}
}
.segments-container {
border-radius: 100px;
overflow: hidden;
margin-top: 15px;
background: white;
color: black;
}
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.colum-container{
padding: 15px;
border-bottom: 1px solid #ccc;
}
///////////////////////// Team Members css //////////////////////@extend
.filters-row {
margin-top: 10px;
}
.search-dropdown{
background: #269DB8;
ion-select {
.select-text{
margin-left: -10px;
}
.select-icon{
.select-icon-inner{
opacity: 1;
color: white;
margin-top: -1px;
}
}
}
}
.input-container{
background: white;
ion-input{
border-bottom-color: transparent;
}
}
.search-container{
margin-top: 15px;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
vertical-align: middle;
}
}
}
/////////////////////////////////////////////////////// Attendance ///////////////////////
.header{
position: relative;
z-index: 999;
}
.slidPrev{
margin-left: 10px;
background: transparent;
}
.slidNext{
background: transparent;
margin-top: -1px;
margin-left: 43px;
}
.activeArrow{
height: 20px;
width: 20px;
color: white;
}
.disabledArrow{
height: 20px;
width: 20px;
color: gray;
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
}
.request-heading {
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
.request-heading-ar{
text-align: right;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-right: 12px;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
.green-label{
font-size: 12px;
margin-top: -13px;
}
.green-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -3px;
}
.blue-label{
font-size: 12px;
margin-top: -13px;
}
.blue-amount{
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -4px;
}
.labelGrid{
background-color: white !important;
border-radius: 20px !important;
height: 88px !important;
border: 1px solid #d6d4d4;
position: relative;
padding: 10px;
label {
font-size: 9px;
line-height: 11px !important;
display: block;
}
h2 {
font-size: 25px;
font-weight: bold;
display: block;
text-align: right;
margin:0;
position: absolute;
bottom: 0;
left:0;
width: 100%;
padding: 10px;
}
}
.bodyGrid{
margin-top: 7px !important;
margin-left: 15px !important;
margin-right: 15px !important;
background-color: white !important;
border-radius: 20px !important;
height: 321px !important;
border: 1px solid #d6d4d4 !important;
}
.attendance-information{
background: white;
border-radius: 20px;
padding: 10px;
@media screen and (min-width: 300px) and (max-width:359px) {
h2{
padding: 0;
margin: 0;
font-size: 14px;
}
span{
font-size: 9px;
}
}
@media screen and (min-width: 360px) {
h2{
padding: 0;
margin: 0;
font-size: 18px;
}
span{
font-size: 9px;
}
}
}
.month-year-span {
font-size: 20px;
font-family: WorkSans-Bold;
color: #0a5d53;
}
.green-label-container{
border-top: 5px solid #269DB8;
padding: 1px 0px;
margin: 15px 0px
}
.blue-label-container{
border-top: 5px solid #292F42;
padding: 1px 0px;
margin: 15px 0px
}
.span-one{
display: block;
font-size: 12px;
color: black;
}
.span-two{
display: block;
font-size: 22px;
font-family: WorkSans-Bold;
}
.graph-container{
margin-left: -50px;
position: relative;
margin-right: 50px;
}
.label-container{
position: absolute;
width: 20%;
right: 30px;
top: 50%;
margin-top: -60px;
}
.attendance-summary .attendance-information {
span{
height: 32px;
display: block;
line-height: 14px;
}
h2{
text-align: right;
font-family: WorkSans-Bold;
}
}
.calendar-container{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
}
.calendar-container-ar{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: right;
display: block;
padding-top: 8px;
margin-bottom: 6px;
margin-right: 12px;
}
}