✏️ Editing: _toggle-content.scss Writable

.toggle-content{

.content{
		overflow: hidden;
		overflow-y: auto;
		position: fixed;
		top: 0;
		bottom: 0;
		background-color: #222;
		color: #fff;
		width: 380px;
		padding: 50px;
		z-index: 999;
		opacity: 1;
		@include transaction( all, 0.3s, ease);

.close-menu{
			@include transaction( all, 0.3s, ease);
			z-index: 999;
			cursor: pointer;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background-color: var(--primary);
			display: inline-flex;
			justify-content:center;
			align-items:center;
			position: absolute;
			top: 30px;
			right: 30px;

&:hover{
				@include transaction( all, 0.3s, ease);
				background-color: var(--heading);
				i{
					@include transaction( all, 0.3s, ease);
					color: var(--primary);
				}
			}

i{
				@include transaction( all, 0.3s, ease);
				font-size: 1em;
				color: #fff;
			}
		}
		
		&.pos_left{
			@include transaction( all, 0.3s, ease);
			left: 0;
			transform: translate3d(-380px, 0, 0);
		}
		&.pos_right{
			@include transaction( all, 0.3s, ease);
			right: 0;
			transform: translate3d(380px, 0, 0);
		}

.wrap-content{
			img{
				width: 100%;
				height: 175px;
				object-fit: cover;
			}

.content-title{
				margin: 20px 0 15px 0;
			}

.description{
				margin: 0 0 20px 0;
			}

.button-contact{
				@include transaction( all, 0.3s, ease);
				background-color: var(--primary);
				color: var(--heading);
				padding: 15px 20px;
				display: flex;
    			align-items: center;
    			justify-content: center;
				font-weight: 700;
				gap:10px;
				text-transform: uppercase;

&:hover{
					@include transaction( all, 0.3s, ease);
					color: var(--primary);
					background-color: var(--heading);
				}
			}

.contact-info-title{
				margin: 40px 0 20px 0;
			}

.contact-item{
				display: flex;
				align-items:center;
				margin: 0 0 10px 0;
				gap:10px;
			}

.list-social{
				display: flex;
				flex-wrap:wrap;
				gap:15px;
				margin: 20px 0 0 0;

.social {
					@include transaction( all, 0.3s, ease);
					display: inline-flex;
					align-items:center;
					justify-content:center;
					background-color: var(--primary);
					width: 40px;
					height: 40px;
					border-radius: 50%;

&:hover{
						@include transaction( all, 0.3s, ease);
						background-color: var(--heading);

i{
							@include transaction( all, 0.3s, ease);
							color: var(--primary);
						}
					}

i{
						@include transaction( all, 0.3s, ease);
					 	font-size: 18px;
					 	color: var(--heading);
					}
				}
			}

}
	}
	
	.site-overlay{
		width: 100%;		
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		z-index: 998;
	}

&.toggled{
		.content{
			&.pos_left{
				@include transaction( all, 0.3s, ease);
				transform:none;
			}
			&.pos_right{
				@include transaction( all, 0.3s, ease);
				transform:none;
			}
		}

.site-overlay{
			opacity: 0.8;
			visibility: visible;
			@include transaction( opacity, 0.2s, ease);
		}
	}

.button-toggle{
		@include transaction( all, 0.3s, ease);
		background-color: var(--primary);
		border-radius: 50%;
		width: 65px;
		min-width: 65px;
		height: 65px;
		display: inline-flex;
		justify-content:center;
		align-items:center;

@media(max-width: 1024px){
			width: 50px;
			min-width: 50px;
			height: 50px;
		}

&:before , &:after{
			width: 0;
		}

span{
			&:before{
				width: 0;
			}
		}

&:hover{
			@include transaction( all, 0.3s, ease);
			background-color: var(--heading);

.title{
				@include transaction( all, 0.3s, ease);
				color: var(--primary);
			}
		}

.title{
			@include transaction( all, 0.3s, ease);
			font-size: 16px;
			font-weight: 500;
			line-height: 1.2;
			color: var(--heading);

@media(max-width: 1024px){
				font-size: 14px;
			}
		}
	}

&.template2{
		.button-toggle{
			@include transaction( all, 0.3s, ease);
			border-radius: 50%;
			width: 60px;
			min-width: 60px;
			height: 60px;
			display: inline-flex;
			justify-content:center;
			align-items:center;
			border: 1px solid #ffffff4f;
			background: transparent;

&:before , &:after{
				width: 0;
			}

span{
				&:before{
					width: 0;
				}
			}

&:hover{
				@include transaction( all, 0.3s, ease);
				border-color: var(--primary);

i{
					@include transaction( all, 0.3s, ease);
					color: var(--primary);
				}
			}

i{
				@include transaction( all, 0.3s, ease);
				font-size: 20px;
				color: var(--heading);
			}
		}
	}
	i{
		display: inline-flex;
	}
	.dropdown-toggle {
        background: transparent;
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        padding: 0.5em 0 0.5em 10px;
        color: inherit;
        border-radius: 0;
        border: none;
        cursor: pointer;

&::after {
            content: "\f104";
            font-family: "ovaicon";
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            line-height: 1;
            vertical-align: middle;
            font-size: 0.6em;
        }
        &:focus {
            outline: none;
        }
        &:hover {
            background: transparent;
        }
        &.toggled-on {
            &:after {
                content: "\f10c";
                font-family: "ovaicon";
            }
        }
    }
}

🔐 Sid Gifari File Manager Pro