gk-nsp.less

/* 
* GK News Show Pro
*
* @version: 1.0.0
* @date: 22-03-2014
* @desc: Complex widget for displaying WordPress posts, WooCommerce products, XML/JSON file content and RSS feeds.
* @author: GavickPro 
* @email: info@gavick.com
*
*/

// ***********************************
//
// mixins
//
// ***********************************

// version for the properties which needs vendor prefixes i.e. transform
.transition(@property; @rest) {
  -webkit-transition: ~'-webkit-@{property}' @rest;
     -moz-transition:    ~'-moz-@{property}' @rest;
       -o-transition:      ~'-o-@{property}' @rest;
          transition:              @property @rest;
}
.transition(@value) {
  -webkit-transition: @value;
     -moz-transition: @value;
       -o-transition: @value;
          transition: @value;
}
// border-radius mixin - use ~"value" to use 10px/20px syntax
.border-radius(@value) {
  -webkit-border-radius: @value;
     -moz-border-radius: @value;
                border-radius: @value;
}
// box-sizing mixin
.box-sizing(@value) {
  -webkit-box-sizing: @value;
     -moz-box-sizing: @value;
                box-sizing: @value;
}
// Transforms
.transform(@value) {
  -webkit-transform: @value;
     -moz-transform: @value;
      -ms-transform: @value;
       -o-transform: @value;
          transform: @value;
}

// ***********************************
//
// variables
//
// ***********************************

@link_default_color: #2f3133;
@link_hover_color: #418cd1;
@ui_default_color: #bebebe;
@ui_hover_color: #777;
@text_color: #555;
@info_color: lighten(@text_color, 20%);
@info_hover_color: darken(@text_color, 20%);
@border_color: #e5e5e5;


// ***********************************
//
// the widget CSS code
//
// ***********************************

.gk-nsp {
	position: relative;
}
.gk-nsp,
.gk-nsp-arts,
.gk-nsp-links {
	&:after {
	    clear: both;
	    content: "";
	    display: table;
	}
}
.gk-nsp-arts,
.gk-nsp-links,
.gk-title-overlay {
	overflow: hidden;
}
.gk-nsp-arts-nav,
.gk-nsp-links-nav {
	overflow: hidden;
	clear: both;
}
.gk-nsp-links-nav {
	float: right;
}
.gk-nsp-arts-nav {
	position: absolute;
	right: 0;
	padding: 0 3px;
	top: -18px;
}
.gk-nsp-arts-nav ul,
.gk-nsp-links-nav ul {
	list-style-type: none;
	margin: 6px 0 0;
	padding: 0;
	float: left;

	li {
		.border-radius(50%);
		float: left;
		width: 10px;
		height: 10px;
		margin: -2px 4px 0 0!important;
		background: @ui_default_color;
		border: none;
		padding: 0;
		text-indent: -9999px;
		cursor: pointer;

		&:hover,
		&.active {
			background: @ui_hover_color;
		}
	}
}
.gk-nsp-next,
.gk-nsp-prev {
	float: left;
	width: 9px;
	height: 10px;
	margin: 4px 0 0 4px;
	background: url('images/nsp_interface.png') no-repeat -10px 0;
	text-indent: -9999px;
	cursor: pointer;
}
.gk-nsp-prev {
	background-position: 0 0;
}
.gk-nsp-next:hover {
	background-position: -10px -10px;
}
.gk-nsp-prev:hover {
	background-position: 0 -10px;
}
.gk-nsp-art-page {
	float: left;
}
.gk-nsp-art {
	.box-sizing(border-box);
	float: left;

	&:first-child {
		border-top: none;
	}

	div {
		overflow: hidden;
	}

	.gk-nsp-image {
		border: none;
	}
}
.gk-nsp-header {
	font-size: 18px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.2;
	margin: 0 0 10px 0!important;

	a {
		color: @link_default_color;
		text-decoration: none;

		&:active,
		&:focus,
		&:hover {
			color: @link_hover_color;
		}
	}
}
.gk-nsp-image {
	.transform(scale(1.0));
	.transition(transform; 0.15s linear);
	&:hover {
		.transform(scale(0.96));
	}
}
.gk-nsp-image-wrap {
	overflow: hidden;
}
.gk-nsp-text {
	color: @text_color;
	float: none;
	font-size: 14px;
	line-height: 20px;
	margin: 0!important;

	&  + .readon {
		display: block;
		margin: 16px 0 0 0!important;	
	}

	&  + .gk-nsp-info {
		margin: 6px 0 10px 0!important;
	}
}
.gk-nsp-info {
	color: @info_color;
	font-size: 10px!important;
	font-style: normal;
	font-weight: 300;
	line-height: 1.0;
	margin: 10px 0!important;
	text-transform: uppercase;

	> a,
	> span {
		color: @info_color;
		font-size: 10px;
		padding-left: 8px;

		&:first-child {
			padding-left: 0;
		}

		&:active,
		&:focus,
		&:hover {
			color: @info_hover_color;
		}
	}

	.amount {
		font-size: 10px;
	}
}

.readon.left,
.readon.right,
.readon.center {
	clear: both;
}
.readon.left {
	float: left;
}
.readon.right {
	float: right;
}
.readon.center {
	display: inline;
	float: none;
}
.gk-nsp-links {
	ul {
		float: left;
		list-style-type: none;
		padding: 0;

		li {
			border-top: 1px solid @border_color;
			display: table;
			margin:0;
			padding: 16px 0;

			.gk-nsp-link-header {
				color: @link_default_color;
				display: table-cell;
				font-size: 16px;
				font-weight: bold;
				line-height: 28px;
				margin: 0;
				vertical-align: top;

				a {
					color: @link_default_color;
					text-decoration: none;

					&:active,
					&:focus,
					&:hover {
						color: @link_hover_color;
					}
				}
			}
			
			p {
				display: table-cell;
				vertical-align: top;
			}
		}
	}

	p {
		font-size: 14px;
		line-height: 22px;
		margin: 5px 0;
	}
}

.gk-nsp-image-wrap {
	float: left;
}

.gk-responsive {
	line-height: 1;
}
img.gk-responsive {
	width: 100%;
	height: auto;
}
.gk-responsive {
	display: block;
	position: relative;
}
.gk-nsp-image {
	max-width: 100%;
}
.gk-nsp-arts,
.gk-nsp-links {
	clear: both;
	width: 100%;
}
.gk-nsp-art,
.gk-nsp-arts-page {
	float: left;
}
.gk-nsp-pages-1 { width: 100%; }
.gk-nsp-pages-2 { width: 200%; }
.gk-nsp-pages-3 { width: 300%; }
.gk-nsp-pages-4 { width: 400%; }
.gk-nsp-pages-5 { width: 500%; }
.gk-nsp-pages-6 { width: 600%; }
.gk-nsp-pages-7 { width: 700%; }
.gk-nsp-pages-8 { width: 800%; }
.gk-nsp-pages-9 { width: 900%; }
.gk-nsp-pages-10 { width: 1000%; }
.gk-nsp-cols-1 { width: 100%; }
.gk-nsp-cols-2 { width: 50%; }
.gk-nsp-cols-3 { width: 33.333333%; }
.gk-nsp-cols-4 { width: 25%; }
.gk-nsp-cols-5 { width: 20%; }
.gk-nsp-cols-6 { width: 16.666666%; }
.gk-nsp-cols-7 { width: 14.285714%; }
.gk-nsp-cols-8 { width: 12.5%; }
.gk-nsp-cols-9 { width: 11.111111%; }
.gk-nsp-cols-10 { width: 10%; }

.gk-nsp-cols-1,
.gk-nsp-cols-2:nth-child(2n+1),
.gk-nsp-cols-3:nth-child(3n+1),
.gk-nsp-cols-4:nth-child(4n+1),
.gk-nsp-cols-5:nth-child(5n+1),
.gk-nsp-cols-6:nth-child(6n+1),
.gk-nsp-cols-7:nth-child(7n+1),
.gk-nsp-cols-8:nth-child(8n+1),
.gk-nsp-cols-9:nth-child(9n+1),
.gk-nsp-cols-10:nth-child(10n+1) {
	clear: both;
}

.gk-nsp-arts-scroll,
.gk-nsp-links-scroll {
	overflow: hidden;
}

/* Rating styles */
.gk-nsp-art {
	.gk-nsp-stars {
		display: inline-block;
		padding: 5px 10px 5px 0!important;
	}
	.gk-nsp-star-0:before,
	.gk-nsp-star-1:before {
		content: "★";
		color: #6c6c6c;
		font-family: Arial, sans-serif;
		font-size: 14px;
	}
	.gk-nsp-star-1:before {
		color: #f7a834;
	}
}

/* Mobile styles */
@media (max-width: 600px) {
	.gk-nsp .gk-nsp-art {
		border-top: 1px solid @border_color;
		border-left: none;
		padding-bottom: 20px;
		padding-top: 20px;
		width: 100%;
	}

	.gk-nsp .gk-nsp-art:first-child {
		border-top: none;
	}
}