|
@@ -0,0 +1,293 @@
|
|
|
+<style type="text/css">
|
|
|
+/*New popup*/
|
|
|
+.bottom_popup_notification_list{
|
|
|
+ background: #fff;
|
|
|
+ padding: 16px 20px;
|
|
|
+ height: 97.5vh;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .close_button_notification_list{
|
|
|
+ background: #2e1153;
|
|
|
+ padding: 6px 15px;
|
|
|
+ border-top-left-radius: 15px;
|
|
|
+ border-bottom-left-radius: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ top: 25px;
|
|
|
+ left: -40px;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ font-size: .8rem;
|
|
|
+}
|
|
|
+/*New popup*/
|
|
|
+
|
|
|
+.custom_popup_notification_list_header {
|
|
|
+ overflow: hidden;
|
|
|
+ position: fixed;
|
|
|
+ top: 62px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ outline: 0;
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-transition: opacity 0.15s linear, z-index 0.15;
|
|
|
+ -o-transition: opacity 0.15s linear, z-index 0.15;
|
|
|
+ transition: opacity 0.15s linear, z-index 0.15;
|
|
|
+ z-index: -1;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.popup_open_task_details {
|
|
|
+ /*z-index: 99999;*/
|
|
|
+
|
|
|
+ z-index: 999;
|
|
|
+ opacity: 1;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.custom_popup_inner_notification_list {
|
|
|
+ /*-webkit-transform: translate(0, -25%);
|
|
|
+ -ms-transform: translate(0, -25%);
|
|
|
+ transform: translate(0, -25%);*/
|
|
|
+ -webkit-transition: -webkit-transform 0.3s ease-out;
|
|
|
+ -o-transition: -o-transform 0.3s ease-out;
|
|
|
+ transition: -webkit-transform 0.3s ease-out;
|
|
|
+ -o-transition: transform 0.3s ease-out;
|
|
|
+ transition: transform 0.3s ease-out;
|
|
|
+ transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 490px;
|
|
|
+ /*margin: 30px auto;
|
|
|
+ max-width: 97%;*/
|
|
|
+ right: 0;
|
|
|
+ position: absolute !important;
|
|
|
+}
|
|
|
+.popup_open_task_details .custom_popup_inner_notification_list {
|
|
|
+ -webkit-transform: translate(0, 0);
|
|
|
+ -ms-transform: translate(0, 0);
|
|
|
+ transform: translate(0, 0);
|
|
|
+ position: relative;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.popup_open_task_details .popup_open_bg_overlay_notification_list {
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ /*background: rgb(255 250 250 / 60%);*/
|
|
|
+ z-index: 99;
|
|
|
+}
|
|
|
+.popup_open_bg_overlay_notification_list {
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 63px !important;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 0;
|
|
|
+ -webkit-transition: background 0.15s linear;
|
|
|
+ -o-transition: background 0.15s linear;
|
|
|
+ transition: background 0.15s linear;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown{
|
|
|
+ /*top: 10px;
|
|
|
+ right: 0;
|
|
|
+ position: absolute;*/
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-toggle{
|
|
|
+ background: #dedbf1;
|
|
|
+ padding: 4px 8px 2px;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: .8rem;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ color: #2e1153;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-toggle:hover {
|
|
|
+ color: #ff7f00 !important;
|
|
|
+ transition: all 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
|
|
|
+ border: 1px solid #ff7f00;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-toggle:after{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show{
|
|
|
+ margin-left: -55px;
|
|
|
+ min-width: auto;
|
|
|
+ padding: 0;
|
|
|
+ margin-top: 3px;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show .dropdown-item{
|
|
|
+ background: #dedbf1;
|
|
|
+ color: #2e1153;
|
|
|
+ font-size: 12px;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show .dropdown-item:hover{
|
|
|
+ background: #2e1153;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show .activate{
|
|
|
+ background: #2e1153;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show .dropdown-item:first-child{
|
|
|
+ border-top-left-radius: .25rem;
|
|
|
+ border-top-right-radius: .25rem;
|
|
|
+}
|
|
|
+.bottom_popup_notification_list .details_content_view .single_radius_list_item .action_dropdown .dropdown-menu.show .dropdown-item:last-child{
|
|
|
+ border-bottom-left-radius: .25rem;
|
|
|
+ border-bottom-right-radius: .25rem;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*Notification list design*/
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item_header {
|
|
|
+ background: #dedbf1;
|
|
|
+ padding: 7px 16px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-radius: 30px;
|
|
|
+ position: relative;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ padding: 7px 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 30px;
|
|
|
+ border: 1px solid #e9f0f3;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item:hover {
|
|
|
+ background: #f5f4fd;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item .left {
|
|
|
+ width: calc(100% - 50px);
|
|
|
+ align-self: center;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item .right {
|
|
|
+ width: 50px;
|
|
|
+ align-self: center;
|
|
|
+ text-align: -webkit-right;
|
|
|
+}
|
|
|
+/*Notification list design*/
|
|
|
+
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item {
|
|
|
+ display: flex;
|
|
|
+ background: fff;
|
|
|
+ padding: 7px 16px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 30px;
|
|
|
+ border: 1px solid #e9f0f3;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item:hover {
|
|
|
+ background: #f5f4fd;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item strong {
|
|
|
+ color: rgb(57, 59, 62);
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item .fa {
|
|
|
+ background: #f1f0fb;
|
|
|
+ padding: 5px 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #ceccda;
|
|
|
+ margin: 0 5px 0 -5px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item a {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item span small {
|
|
|
+ color: rgb(134, 142, 150);
|
|
|
+ font-size: 12px !important;
|
|
|
+ margin: 0 4px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item:first-child{
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+/*.custom_popup_notification_list .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view{
|
|
|
+ height: calc(100vh - 65px);
|
|
|
+ position: relative;
|
|
|
+}*/
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .submit_button{
|
|
|
+ position: fixed;
|
|
|
+ right: 25px;
|
|
|
+ bottom: 65px;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_list_item_header .list_counter{
|
|
|
+ background: #ffffff;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 11px !important;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 3px 12px !important;
|
|
|
+ border: 1px solid #d4d2df;
|
|
|
+ color: #fa424a;
|
|
|
+ /* top: -1px; */
|
|
|
+ /* position: relative; */
|
|
|
+ float: right;
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .submit_button:hover{
|
|
|
+ color: #2e1153 !important;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item {
|
|
|
+ border-radius: .75rem !important;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item span small {
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
+.custom_popup_notification_list_header .custom_popup_inner_notification_list .bottom_popup_notification_list .details_content_view .single_radius_item .fa {
|
|
|
+ margin: 0 10px 0 -3px !important;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<div class="custom_popup_notification_list_header d-none">
|
|
|
+ <div class="custom_popup_inner_notification_list" style="display:none;">
|
|
|
+ <div class="bottom_popup_notification_list scroll_bar">
|
|
|
+
|
|
|
+ <div class="details_content_view">
|
|
|
+
|
|
|
+
|
|
|
+ <a href="{{url('applyuser/notifications/unread')}}" class="btn submit_button">See More</a>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <i class="fa fa-close close_button_notification_list add_hover"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popup_open_bg_overlay_notification_list"></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ $(function(){
|
|
|
+
|
|
|
+ $(".click_for_notification_list_popup_header").on('click', function() {
|
|
|
+ // $('.custom_popup_notification_list').toggle("slide", {direction: "right" }, 300);
|
|
|
+ console.log('click_for_notification_list_popup_header');
|
|
|
+ $(".custom_popup_notification_list_header").removeClass('d-none');
|
|
|
+ $(".custom_popup_notification_list_header").addClass('popup_open_task_details');
|
|
|
+ $(".custom_popup_notification_list_header").addClass('.popup_open_bg_overlay_notification_list');
|
|
|
+
|
|
|
+ $(".custom_popup_inner_notification_list").hide().show("slide", { direction: "right" }, 600);
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ $(".close_button_notification_list").click(function(){
|
|
|
+ $(".custom_popup_notification_list_header").removeClass('popup_open_task_details');
|
|
|
+ $(".custom_popup_notification_list_header").addClass('d-none');
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+</script>
|