////////////////////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:110px; width: 110px; } .cbookApointmentBtn{ // --background:transparent !important; --background-focused: transparent; --background-hover:transparent; --background-activated: transparent; --background: transparent; } .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: 3.3cm; height: 3.3cm; position: absolute; top: 0; left: 0px; right: 0; bottom: 20px; border-radius: 50%; margin: auto; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .wrapper .circle { width: 110px; height: 110px; position: absolute; top: 0; left: 0px; 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; }