OwlCyberSecurity - MANAGER

Edit File: style.scss

// Transition
@mixin transition( $args ) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

// Display inline flex
@mixin display-inline-flex() {
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: inline-flex;
}

// Display flex
@mixin display-flex() {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

// Flex wrap
@mixin flex-wrap( $args ) {
    -webkit-flex-wrap: $args;
    -ms-flex-wrap: $args;
    flex-wrap: $args;
}

// Align items
@mixin align-items( $args ) {
    -webkit-align-items: $args;
	-ms-flex-align: $args;
	align-items: $args;
}

// Justify content
@mixin justify-content( $args ) {
	-webkit-justify-content: $args;
	-ms-flex-pack: $args;
	justify-content: $args;
}

// Opacity
@mixin opacity( $args ) {
    -moz-opacity: $args;
    -webkit-opacity: $args;
    opacity: $args;
}

/**
 * Social Share
 */
.entry-share {
	ul {
		margin: 0;
	    padding: 0;
	    list-style: none;

li {
		    margin-right: 8px;

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

a {
			    @include display-inline-flex();
				@include align-items( center );
				@include justify-content( center );
				position: relative;
				width: 40px;
				height: 40px;
				line-height: 1;
			    border-radius: 30px;
		    	overflow: hidden;

.oss-icon {
					fill: #fff;
				    width: 16px;
				    height: 16px;
				    @include transition( all 0.3s ease );
				}
			}
		}
	}

&.side ul {
		float: right;

li {
			float: left;
		}
	}

&.top ul {
		text-align: center;

li {
			display: inline-block;
		}
	}
}

// Minimal style
.entry-share.minimal {
	ul li {
		a {
			border: 1px solid #e9e9e9;

.oss-icon {
				fill: #bbb;
			}
		}

&.twitter a:hover {
			color: #00aced;
			border-color: #00aced;

.oss-icon {
				fill: #00aced;
			}
		}

&.facebook a:hover {
			color: #3b5998;
			border-color: #3b5998;

.oss-icon {
				fill: #3b5998;
			}
		}

&.googleplus a:hover {
			color: #dd4b39;
			border-color: #dd4b39;

.oss-icon {
				fill: #dd4b39;
			}
		}

&.linkedin a:hover {
			color: #3399CC;
			border-color: #3399CC;

.oss-icon {
				fill: #3399CC;
			}
		}

&.pinterest a:hover {
			color: #cb2027;
			border-color: #cb2027;

.oss-icon {
				fill: #cb2027;
			}
		}

&.viber a:hover {
			color: #9d62cc;
			border-color: #9d62cc;

.oss-icon {
				fill: #9d62cc;
			}
		}

&.vk a:hover {
			color: #3673be;
			border-color: #3673be;

.oss-icon {
				fill: #3673be;
			}
		}

&.reddit a:hover {
			color: #ff5c1f;
			border-color: #ff5c1f;

.oss-icon {
				fill: #ff5c1f;
			}
		}

&.tumblr a:hover {
			color: #35465c;
			border-color: #35465c;

.oss-icon {
				fill: #35465c;
			}
		}

&.viadeo a:hover {
			color: #ff7452;
			border-color: #ff7452;

.oss-icon {
				fill: #ff7452;
			}
		}

&.whatsapp a:hover {
			color: #00e676;
			border-color: #00e676;

.oss-icon {
				fill: #00e676;
			}
		}
	}
}

// Colored style
.entry-share.colored {
	ul li {
		a {
			color: #fff;

&:hover {
				@include opacity( .8 );
			}

.oss-icon {
				fill: #fff;
			}
		}

&.twitter a {
			background-color: #00aced;
		}

&.facebook a {
			background-color: #3b5998;
		}

&.googleplus a {
			background-color: #dd4b39;
		}

&.linkedin a {
			background-color: #3399CC;
		}

&.pinterest a {
			background-color: #cb2027;
		}

&.viber a {
			background-color: #9d62cc;
		}

&.vk a {
			background-color: #3673be;
		}

&.reddit a {
			background-color: #ff5c1f;
		}

&.tumblr a {
			background-color: #35465c;
		}

&.viadeo a {
			background-color: #ff7452;
		}

&.whatsapp a {
			background-color: #00e676;
		}
	}
}

// Dark style
.entry-share.dark {
	ul li {
		a {
			background-color: #222;
			color: #fff;

&:hover {
				@include opacity( .8 );
			}

.oss-icon {
				fill: #fff;
			}
		}
	}

&.has-name .oss-icon-wrap {
		background-color: rgba(255,255,255,.08);
	}
}

// Heading position
.entry-share {
	.theme-heading {
	    margin: 0;
	    padding: 0;

.text:before,
	    .text:after {
	    	display: none !important;
	    }
    }

&.side .theme-heading {
		float: left;
	    line-height: 40px;
    }

&.top .theme-heading {
		display: block;
		margin-bottom: 10px;
	    line-height: 1.6;
	    text-align: center;
    }
}

// Social name
.entry-share.has-name {
	&.side .theme-heading {
	    margin: 6px 0;
	}

ul {
	    @include display-flex();
	    @include flex-wrap( wrap );
	    @include justify-content( space-between );

li {
			margin: 6px;
			-webkit-box-flex: 1;
		    -moz-box-flex: 1;
		    -webkit-flex: 1;
		    -ms-flex: 1;
		    flex: 1;

a {
				min-width: 144px;
				width: 100%;
			}
		}
	}

.oss-icon-wrap {
		display: block;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
		@include display-inline-flex();
		@include align-items( center );
		@include justify-content( center );
		background-color: rgba(0,0,0,.08);
	    padding: 0 12px;
	    @include transition( all 0.3s ease );
	}

.oss-name {
		display: block;
		width: 100%;
	    padding: 0 10px 0 50px;
	    font-size: 15px;
	    font-weight: 500;
	    text-align: center;
	}

&.minimal li {
		a:hover .oss-icon {
			fill: #fff !important;
		}

&.twitter a:hover .oss-icon-wrap {
			background-color: #00aced;
		}

&.facebook a:hover .oss-icon-wrap {
			background-color: #3b5998;
		}

&.googleplus a:hover .oss-icon-wrap {
			background-color: #dd4b39;
		}

&.linkedin a:hover .oss-icon-wrap {
			background-color: #3399CC;
		}

&.pinterest a:hover .oss-icon-wrap {
			background-color: #cb2027;
		}

&.viber a:hover .oss-icon-wrap {
			background-color: #9d62cc;
		}

&.vk a:hover .oss-icon-wrap {
			background-color: #3673be;
		}

&.reddit a:hover .oss-icon-wrap {
			background-color: #ff5c1f;
		}

&.tumblr a:hover .oss-icon-wrap {
			background-color: #35465c;
		}

&.viadeo a:hover .oss-icon-wrap {
			background-color: #ff7452;
		}

&.whatsapp a:hover .oss-icon-wrap {
			background-color: #00e676;
		}
	}
}

// If no heading
.entry-share.no-heading ul {
	float: none;
}

// Customizer tweak for the social name
.entry-share {
	.oss-name {
		display: none;
	}
}

// If single post
.single .entry-share {
	margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #f1f1f1;
}

.single .entry-share-wrap .entry-share {
	margin-top: 0;
	margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f1f1;
}

/*------------------------------------*
	Phone Landscape
*------------------------------------*/
@media only screen and (max-width: 480px) {
	.entry-share.side .theme-heading { float: none; margin: 0 0 20px; line-height: 1; text-align: center; }
	.entry-share.side ul { float: none; text-align: center; }
	.entry-share.side ul li { float: none; display: inline-block; }
}