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_srca/Mohem/src/app/hmg-common/ui/fab-button/fab-button.component.scss

235 lines
4.0 KiB
SCSS

////////////////////book btn/////////////////////
ion-fab-button{
--background: var(--darkblue)!important;
// background: url(/assets/icon/sliderBG.jpg);
background-size: cover;
background-position: top right;
border-radius: 50%;
height:112px;
width: 112px;
}
.cbookApointmentBtn{
// --background:transparent !important;
--background-focused: transparent;
--background-hover:transparent;
--background-activated: transparent;
--background: transparent;
}
.addnon{
--background: var(--darkblue)!important;
background-size: cover;
background-position: top right;
border-radius: 50%;
height: 80px;
width: 80px;
width: 80px;
height: 80px;
right: 8%;
position: fixed;
color: white;
bottom: 20%;
border-radius: 50%;
z-index: 999;
}
.fab-p{
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
// line-height: 0;
// margin: 12px;
// margin-bottom: 28%;
// margin-top: 27px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* line-height: 0; */
margin: 12px;
margin-bottom: 14%;
white-space: pre-line;
font-size: 13px;
}
.fab-i{
top:0px;
left:0px;
}
button-inner{
--top: -11px !important;
}
.iconFab{
margin-top: -37px;
width: 100px;
height: 60px;
}
////////////////animation/////////////////////////
// .wrapper {
// position: fixed;
// width: 60px;
// height: 60px;
// margin: 0 auto;
// left: 65px;
// bottom: 84px;
// z-index: 100;
// }
// .wrapper1{
// left:inherit;
// right: 65px;
// }
// .wrapper .circle {
// width: 110px;
// height: 110px;
// position: absolute;
// top: 0;
// left: -40px;
// right: 0;
// bottom: 20px;
// border-radius: 50%;
// margin: auto;
// -webkit-transform: scale(1, 1);
// transform: scale(1, 1);
// }
.wrapper {
position: fixed;
width: 3cm;
height: 3cm;
/* margin: 0 auto; */
bottom: 2.1cm;
padding: 0;
z-index: 100;
}
.wrapper1{
left:inherit;
right: 65px;
}
.wrapper_left {
left: 4%;
}
.wrapper_right {
right: 4%;
}
.wrapper .circle {
width: 112px;
height: 112px;
position: absolute;
top: 118%;
left: -10%;
right: 0;
bottom: 20px;
border-radius: 50%;
margin: auto;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.wrapper .circle.pulse {
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
background-color: var(--ion-color-secondary-tint);
opacity: 0.7;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
25% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
50% {
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@media only screen and (max-width: 350px) {
ion-fab-button{
--background: var(--ion-color-secondary);
height:90px;
width: 90px;
left: 0px;
}
.wrapper .circle {
width: 90px;
height: 90px;
position: absolute;
top: 0;
left: 0px;
right: 0;
bottom: 20px;
border-radius: 50%;
margin: auto;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.dashboard-container {
margin-bottom: 0.9cm;
}
.clicked {
}
.clicked:hover {
background-color: green;
}
.clicked:focus {
background-color: orange;
}