diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html index a84d9a05d..c19cdab82 100644 --- a/src/app/pages/events/events.page.html +++ b/src/app/pages/events/events.page.html @@ -10,19 +10,11 @@ -
- +
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss index b9c7e3202..19eb3a6fb 100644 --- a/src/app/pages/events/events.page.scss +++ b/src/app/pages/events/events.page.scss @@ -162,115 +162,14 @@ ion-toolbar{ color: #666666; font-size: 20px; } -/* TOGGLE BUTTON */ - .switch { - position: relative; - display: inline-block; - width: 90px; - height: 34px; - float: right; + /* NEW CSS FOR TOGGLE BUTTON */ + .toggleBox{ margin:20px 20px 0 0; } - - .switch input {display:none;} - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ffffff; - border: 1px solid #e16817; - color: #e16817; - -webkit-transition: .4s; - transition: .4s; - } - - .slider:before { - position: absolute; - content: ""; - height: 23.5px; /* 26px; */ - width: 24px; - left: 4px; - bottom: 4px; - background-color: #ffffff; - -webkit-transition: .4s; - transition: .4s; - } - - input:checked + .slider { - background-color: #e16817; - } - - input:focus + .slider { - box-shadow: 0 0 1px #2196F3; - } - - input:checked + .slider:before { - -webkit-transform: translateX(55px); - -ms-transform: translateX(55px); - transform: translateX(55px); - } - - /*------ ADDED CSS ---------*/ - .pr - { - display: none; - text-align: left !important; - left: 25px !important; - color: white; - } - .mdgpr - { - - left: 58px !important; - color: #e16817; - } - - .pr, .mdgpr - { - position: absolute; - transform: translate(-50%,-50%); - top: 50%; - left: 50%; - font-size: 12px; - font-family: Verdana, sans-serif; - } - - input:checked+ .slider .pr - {display: block; - background:#e16817; - } - - input:checked + .slider .mdgpr - {display: none; - } - - /*--------- END --------*/ - - /* Rounded sliders */ - .slider.round { - border-radius: 34px; - - } - - .slider.round:before { - border-radius: 50%; - border: 1px solid #e16817; - } - - .logout-button{ - padding: 15px; - color:red; - } - - /* NEW CSS FOR TOGGLE BUTTON */ input[type="checkbox"]{ position: relative; - width: 100px; - height: 40px; + width: 96px; + height: 34px; background: #ffffff; -webkit-appearance: none; border-radius: 20px; @@ -278,7 +177,7 @@ ion-toolbar{ transition: .4s; /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */ cursor: pointer; - border:1px solid red; + border:1px solid #e16817; } input:checked[type="checkbox"]{ background: #e16817; @@ -288,16 +187,16 @@ ion-toolbar{ position: absolute; content: ""; left: 0; - width: 38px; - height: 38px; + width: 30px; + height: 30px; background: #fff; border-radius: 50%; /* transform: scale(1.1); */ box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); - border:1px solid red; + border:1px solid #e16817; } input:checked[type="checkbox"]::before{ - left: 60px; + left: 65px; } .toggle{ @@ -311,7 +210,7 @@ ion-toolbar{ position: absolute; color: #fff; font-weight: 600; - font-size: 16px; + font-size: 12px; pointer-events: none; } .onbtn{