On gists

Social sharing tiny component - SCSS

SCSS

social-sharing.scss Raw #

/**
  * Copyright (C) 2014 Roman Janko
  * _social-sharing.scss
  *
  * changelog
  * 18.12.2017 15:03:08:revised
  *
  * @author janko@andweb.cz
  * @version 0.1.0
  * @since 0.1.0
  */
 

$list: ();
$list: append($list, twitter);
$list: append($list, facebook);
/*$list: append($list, gplus);*/
$list: append($list, linkedin);

$length: length($list);
$size: 48px;

.social-sharing-pane
{
	background: #fff;
	position: fixed;
	right: 0;
	top: 50%;
	margin-top: - (($size * $length) / 2);
	z-index: 50;
	width: $size;
	height: $size * $length;
	
	a
	{
		width: $size;
		height: $size;
		display: block;
		opacity: 1;
		
		
		@each $flag in $list
		{
			&.-#{$flag}
			{
				background: url('/assets/gfx/social-sharing/#{$flag}.png') no-repeat;
				background-size: $size $size;
			}
		}

		&:hover
		{
			opacity: .8;
		}

	}

	@include respond(0, 480px) {
		top: auto;
		right: auto;
		left: 0px;
		bottom: 0px;
		margin-top: 0px;
		width: $size * $length;
		height: $size;

		a {
			display: block;
			float: left;
			margin: 0;
			padding: 0;
		}

	}
}