1KA_F2F/resources/sass/admin_new/components/popup/basic.scss

/* 
    Popupi - splosno
*/


/* Popup info box (ki se pojavi npr. ob nastavitvi in ne na fade podlagi) */
@mixin popup_info() {
    padding: 16px;
	
    background-color: $white;
    box-shadow: 0px 2px 7px 1px rgba(0, 0, 0, 0.25);
	
    h2{
        width: 100%;
        margin-top: 3px;
        margin-bottom: 16px;
        padding-bottom: 8px;

        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;

        border-bottom: 1px $gray solid;
    }

	span, 
    p{
		display: block;
		padding-bottom: 16px;

        &:last-child{
            padding-bottom: 0;
        }
	}

	a{
		font-weight: 500;
	}

    &.warning_popup{

        h2::before{
            padding-right: 8px;

            font-family: $fontawesome;
            content: "\f071";

            font-size: 14px;
            color: $yellow;
        }   
    }
}


/* Standarden popup, ki se pojavi na fade podlagi */
@mixin popup_general() {
    /*max-height: 90vh;
    overflow-y: scroll;*/
    max-width: 90vw;

    padding: 16px;

    font-size: 16px;
    line-height: 20px;

    background-color: white;

    .popup_close{
        position: absolute !important;
        top: 10px;
        right: 10px;
        z-index: 9999;

        font-size: 12px !important;
        color: $very-dark-gray;

        &:hover{
            color: $black;
        }

        a{
            color: $very-dark-gray;
            text-decoration: none;
            
            &:hover{
                color: $black;
            }
        }
    }

    h2,
    .divPopUp_top{
        width: 100%;
        margin-top: 3px;
        margin-bottom: 16px;
        padding-bottom: 8px;

        font-weight: 600;
        font-size: 16px;
        text-transform: uppercase;

        border-bottom: 1px $gray solid;
    }

    p{
        line-height: 20px;
    }

    .button_holder{
        justify-content: end !important;

        margin: 16px 0 0 0;

        button:last-child{
            margin-right: 0;
        }
    }

    &.warning_popup{

        h2::before{
            padding-right: 8px;

            font-family: $fontawesome;
            content: "\f071";

            font-size: 14px;
            color: $yellow;
        }   
    }
}


.divPopUp {
    @include popup_general();
}

.divPopUp_info{
    @include popup_info();
}


#fade {
	display: none;
	position: fixed;
    z-index: 79;
    
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    .popup_holder{
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        #fullscreen {
            display: none;
            position: relative;
            z-index: 81;
        }
    
        /* basic popup */
        .divPopUp {
            display: none;

            position: relative;
                        
            .buttons_holder{
                position: absolute;
                bottom: 20px;
                right: 20px;
            }

            div.divPopUp_top {
                display: inline-block;
                height: auto;
                top: 0;
                left: 0;
                right: 0;
            }
            div.divPopUp_content {
                height: 100%;
            }
            div.divPopUp_btm {
                display: inline-block;
                bottom: 0;
                left: 0;
                right: 0;
                
                width: 100%;
                height: auto;

                padding: 20px 0px 0px 0px !important;
                margin-right: 0;
                margin-bottom: 0;
            }
        }
    }    
}