Viewing File: /home/maglabs/2vsa/wp-content/themes/cargohub/css/widgets.less

.single-right {
	.blog-sidebar {
		.cargohub-widget {
			border-left: 1px solid #f4f4f4;
			padding-left: 40px;
		}
	}
}

.single-left {
	.blog-sidebar {
		.cargohub-widget {
			border-right: 1px solid #f4f4f4;
			padding-right: 40px;
		}
	}
}

.widget {
	margin-bottom: 50px;

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

	.widget-title {
		text-transform: uppercase;
		font-size: 20px;
		font-weight: 600;
		margin: 0 0 40px;
		padding-bottom: 15px;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			height: 2px;
			width: 67px;
			left: 0;
			bottom: 0;
			background-color: @primary-color;
		}
	}

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	table,
	select {
		width: 100%;
	}

	select {
		color: #848484;
		border: 1px solid #eeeeee;
		height: 50px;
		padding-left: 15px;
		background-color: transparent;
		font-weight: 400;

		&:focus {
			outline: none;
		}

		option {
			color: @gray;
		}
	}

	table {
		text-align: left;
		width: 100%;

		caption {
			border: 1px solid #eeeeee;
			border-bottom-width: 0;
			text-align: center;
		}

		thead {
			color: @heading-color;
		}

		tr {
			border: 1px solid #eeeeee;
			border-bottom-width: 0;
			padding: 3px 0;

			td,
			th {
				padding: 5px 10px;
				border-bottom: 1px solid #eeeeee;
				border-left: 1px solid #eeeeee;
			}
		}
	}
}

.widget_calendar {
	line-height: 26px;
}

.widget_recent_comments,
.widget_rss {
	li {
		border-bottom: solid 1px #f4f4f4;
		padding: 15px 0;
		position: relative;
		transition: all 0.5s;

		& > a {
			color: #848484;
			padding-left: 0;
			position: relative;
			transition: all 0.5s;
		}

		&:hover {
			& > a {
				color: @primary-color;
			}
		}

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

		ul {
			margin-top: 15px;
			border-top: solid 1px #f4f4f4;
		}
	}

	.children {
		border-top: 1px solid #f4f4f4;
		margin-top: 15px;
		margin-left: 15px;

		li {
			&:first-child {
				padding-top: 15px;
			}

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

.widget_categories,
.widget_pages,
.widget_archive,
.widget_nav_menu,
.widget_recent_entries,
.widget_meta,
ul.service-menu {

	.count {
		float: right;
	}

	.widget-title {
		margin-bottom: 40px;
	}

	li {
		padding: 14px 0;
		position: relative;
		transition: all 0.5s;
		border-bottom: 1px solid #eee;

		&:after {
			color: #848484;
			content: '\f105';
			position: absolute;
			top: 15px;
			right: 0;
			font-size: 16px;
			font-family: FontAweSome;
			transition: all 0.5s;
		}

		& > a {
			color: #848484;
			padding-left: 30px;
			position: relative;
			transition: all 0.5s;

			&:before {
				color: #848484;
				content: '\f114';
				position: absolute;
				top: -4px;
				left: 0;
				font-size: 16px;
				font-family: FontAweSome;
				transition: all 0.5s;
			}
		}


		&:hover {
			color: @primary-color;

			&:after {
				color: @primary-color;
			}

			& > a {
				color: @primary-color;

				&:before {
					color: @primary-color;
				}
			}
		}

		ul {
			margin-top: 15px;
			border-top: solid 1px #f4f4f4;

			li:last-child {
				border-bottom: 0;
				padding-bottom: 0;
			}
		}
	}

	.children {
		border-top: 1px solid #f4f4f4;
		margin-top: 15px;
		margin-left: 15px;

		li {
			&:first-child {
				padding-top: 15px;
			}

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

.widget_tag_cloud {
	a {
		margin-bottom: 10px;
		margin-right: 8px;
		display: inline-block;
		font-size: 16px !important;
		background-color: transparent;
		color: #848484;
		padding: 5px 18px;
		position: relative;
		border: 1px solid #f4f4f4;

		&:hover{
			color: @light;
			text-decoration: none;
			background-color: @primary-color;
		}
	}
}

.popular-posts-widget {
	.popular-post {
		margin-bottom: 40px;
		border: 0;
		padding: 0;
	}

	.widget-thumb {
		float: left;
	}

	.mini-widget-title {
		margin-left: 100px;

		h4 {
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
			text-transform: capitalize;
			margin-top: -5px;
			margin-bottom: 8px;
		}
	}

	i {
		color: @primary-color;
		padding-right: 10px;
	}
}

.widget-about {
	img {
		margin-bottom: 25px;
	}

	a {
		font-size: 14px;
		font-weight: 700;
		text-transform: uppercase;
		display: block;
		margin-top: 20px;

		.fa {
			padding-left: 5px;
		}

		&:hover {
			color: @primary-color;
		}
	}
}

.tabs-widget {
	.tabs-nav {
		li {
			width: 33%;
			border-bottom: none;
			padding-bottom: 0;

			&:last-child {
				width: 34%;
			}

			&:before {
				display: none;
			}

			a {
				background: @gray;
				border: 1px solid @gray-light;
				color: #646464;
				padding: 8px 0;
				text-align: center;
				text-transform: uppercase;
				font-size: 12px;
				font-weight: 700;
				font-family: @font-family-secondary;

				&.active {
					color: @light;
					text-decoration: none;
					border-color: transparent;
					background-color: @primary-color;
				}

				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	.tabs-panel {
		margin-top: -1px;
		padding: 15px 0 20px;
	}

	.tab-comments {
		.comment {
			border-bottom: solid 1px @gray-light;
			padding: 10px 0;
			overflow: hidden;
		}

		.comment-summary {
			font-style: italic;
			margin-bottom: 5px;
		}
	}
}

.recent-post {
	margin-bottom: 20px;

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

	.widget-thumb {
		display: block;
		float: left;
	}

	.icon {
		color: @primary-color;
		display: none;
	}

	.post-text {
		padding-left: 85px;
	}

	.post-title {
		display: block;
		color: #fff;
		font-family: @font-family-secondary;
		font-size: 16px;
		font-weight: 400;
		padding-bottom: 5px;
	}

	.post-date {
		font-size: 16px;
		font-weight: 300;
	}

	&.no-thumbnail {
		.icon {
			display: block;
			float: left;

			i,i:before {
				font-size: 16px;
			}
		}

		.post-text {
			padding-left: 26px;
		}
	}
}

.popular-post {
	border-bottom: 1px solid #f4f4f4;
	padding: 25px 0;
	overflow: hidden;

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

	.widget-thumb {
		float: left;
	}

	.post-text {
		margin-left: 95px;
		color: #848484;
		font-size: 16px;

		.post-title {
			color: @heading-color;
			display: block;
			padding-bottom: 5px;
			font-family: @font-family-secondary;
			font-weight: 500;
		}

		.post-date {
			i {
				font-size: 14px;
				padding-right: 10px;
				color: @primary-color;
			}
		}

		.post-comments {
			display: block;
		}

		.read-more {
			line-height: 2;
		}
	}

	&.no-thumbnail {
		.post-text {
			margin-left: 0;
			margin-top: 0;
		}
	}
}

.widget-recent-comments {
	li {
		padding: 20px 0;
		color: @gray-light;

		a,
		p {
			color: @gray;
		}
	}
}

.widget_search,
.topbar-search {
	.search-field {
		background-color: transparent;
		font-weight: 400;
		border-width: 0;
	}

	.search-form {
		font-size: 16px;
		position: relative;
		color: @heading-color;
		border: 1px solid #eee;

		&:before {
			content: '\f002';
			font-family: FontAwesome;
		}

		&:after {
			content: '';
			position: absolute;
			top: -1px;
			right: -1px;
			width: 50px;
			height: 52px;
			background-color: #f4f4f4;
			border: 1px solid #f4f4f4;
			z-index: 9;
		}

		i,&:before {
			position: absolute;
			top: 50%;
			right: 16px;
			color: @heading-color;
			font-size: 14px;
			z-index: 99;
			transform: translateY(-50%);
		}

		.screen-reader-text {
			display: none;
		}

		::-webkit-input-placeholder {
			color: #9e9e9e;
		}

		:-moz-placeholder {
			color: #9e9e9e;
		}

		::-moz-placeholder {
			color: #9e9e9e;
		}

		:-ms-input-placeholder {
			color: #9e9e9e;
		}

		.search-submit {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			opacity: 0;
			z-index: 9999;
		}

		label {
			width: 100%;
			margin-bottom: 0;
		}

		input[type="search"] {
			height: 50px;
			line-height: 50px;
			width: 100%;
			padding: 0 55px 0 15px;

			&:focus {
				outline: none;
			}
		}
	}
}

.download {
	.item-download {
		background-color: transparent;
		font-size: 16px;
		position: relative;
		border: 1px solid #f4f4f4;
		transition: 0.5s;
		padding: 15px 20px;

		a {
			font-weight: 600;
			display: block;
			color: @heading-color;
		}

		i {
			color: @heading-color;
			transition: 0.5s;
			padding-right: 20px;
		}

		&:hover {
			color: #fff;
			border-color: @primary-color;
			background-color: @primary-color;

			a,i {
				color: #fff;
			}
		}
	}
}

.services-menu-widget {
	ul li {
		border: 1px solid #ececec;
		border-bottom-width: 0;
		background-color: #f7f7f7;
		padding: 15px 20px;
		position: relative;
		transition: 0.5s;

		&:after {
			display: none;
		}

		&:last-child {
			border-bottom-width: 1px;
		}

		a {
			display: block;
			color: #848484;
			font-family: @font-family-secondary;
			font-size: 16px;
			padding-left: 0;
			font-weight: 400;
			position: relative;
			transition: 0.5s;

			&:before {
				display: none;
			}
		}

		&:hover,
		&.current-menu-item {
			background-color: @primary-color;
			border-color: @primary-color;

			a {
				color: #fff;
			}
		}
	}
}

.side-contact {
	padding: 25px 20px;

	h3 {
		margin-top: 0;
		margin-bottom: 35px;
		font-size: 24px;
		color: #fff;
		position: relative;
		padding-bottom: 15px;

		&:after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 70px;
			height: 1px;
			border-bottom: 1px dashed rgba( 255, 255, 255, 0.15 );
		}
	}

	i {
		color: @primary-color;
		padding-right: 10px;
	}
}

.cargohub-social-links-widget {
	margin-left: -15px;
	margin-right: -15px;

	a {
		color: #fff;
		padding: 0 15px;
		font-size: 16px;
		transition: 0.5s;

		&:hover {
			color: @primary-color;
		}
	}

	.style-2 {
		a {
			color: rgba( 255,255,255,0.7 );
			font-size: 14px;
			width: 38px;
			height: 38px;
			line-height: 34px;
			padding: 0;
			text-align: center;
			border: 2px solid rgba( 255, 255, 255, 0.1 );
			border-radius: 50%;
			display: inline-block;
			margin: 0 5px;

			&:hover {
				color: #fff;
				background-color: @primary-color;
				border-color: @primary-color;
			}
		}
	}
}

.latest-project-widget {
	.latest-project-list {
		margin-left: -5px;
		margin-right: -5px;
	}

	.latest-project {
		width: 33.3333%;
		float: left;
		padding: 0 5px;
		margin-bottom: 10px;

	}

	.widget-thumb {
		display: block;
		position: relative;

		&:before {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: @primary-color;
			transition: 0.5s;
			opacity: 0;
			z-index: 90;
		}

		&:hover {
			&:before {
				opacity: 0.8;
			}

			i {
				opacity: 1;
			}

		}
	}

	i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		opacity: 0;
		transition: 0.5s;
		color: #fff;
		font-size: 16px;
		z-index: 99;
	}

	.fp-widget-thumb {
		display: inline-block;
	}
}

.cargo-office-location-widget {
	line-height: initial;
	transform: translateY(10px);

	.current-office {
		color: #dde2fc;
		padding-right: 17px;
		position: relative;

		&:after {
			content: '\f107';
			font-family: FontAweSome;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			font-size: 15px;
			color: @primary-color;
			z-index: 99;
		}
	}

	.office-switcher {
		border: 1px solid rgba(255,255,255,0.1);
		padding: 4px 10px;
		position: relative;
		float: left;

		i {
			font-size: 15px;
			padding-right: 10px;

			&:before {
				font-size: 15px;
			}
		}

		ul {
			transform: scaleX(0);
			transition: top 0.3s ease 0s, opacity 0.3s;
			position: absolute;
			background-color: #fff;
			color: @heading-color;
			width: 100%;
			padding: 5px 10px;
			left: 0;
			top: calc(~'100% + 28px');
			font-weight: 400;
			box-shadow: 0 3px 16.6px 3.4px rgba(0, 0, 0, 0.2);

			li {
				padding: 5px 0;
				cursor: pointer;
			}
		}

		&.show-office {
			ul {
				transform: scaleX(1);
				top: calc(~'100% + 15px');
			}
		}
	}

	.topbar-office {
		float: right;
		display: none;

		&.active {
			display: block;
			padding-left: 10px;
		}

		li {
			display: inline-block;
			padding: 0 20px;

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

			i {
				color: @primary-color;
				padding-right: 6px;
				font-size: 18px;

				&:before {
					font-size: 18px;
				}
			}
		}
	}
}

.cargo-contact-widget {
	.detail {
		margin-bottom: 15px;
		padding-bottom: 13px;
		border-bottom: 1px solid #f4f4f4;

		&:last-child {
			border: 0;
		}
	}

	i {
		color: @primary-color;
		font-size: 23px;
		float: left;

		&:before {
			font-size: 23px;
		}
	}

	h5, p{
		padding-left: 40px;
	}

	h5 {
		margin-top: 0;
		margin-bottom: 7px;
	}

	p {
		margin-bottom: 0;
	}
}