mirror of https://github.com/abpframework/abp.git
Yunus Emre Kalkan
8 years ago
38 changed files with 27149 additions and 82 deletions
File diff suppressed because it is too large
@ -0,0 +1,9 @@ |
|||
namespace Volo.Blogging.Tagging.Dtos |
|||
{ |
|||
public class GetPopularTagsInput |
|||
{ |
|||
public int ResultCount { get; set; } = 10; |
|||
|
|||
public int? MinimumPostCount { get; set; } |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
namespace Volo.Blogging.Tagging.Dtos |
|||
{ |
|||
public class PopularTagDto |
|||
{ |
|||
public TagDto Tag { get; set; } |
|||
|
|||
public int Count { get; set; } |
|||
} |
|||
} |
|||
@ -1,17 +1,254 @@ |
|||
@page |
|||
@inherits Volo.Blogging.Pages.Blog.BloggingPage |
|||
@using Volo.Blogging.Pages.Blog.Posts |
|||
@using Volo.Blogging.Posts |
|||
@model Volo.Blogging.Pages.Blog.Posts.IndexModel |
|||
@{ |
|||
|
|||
} |
|||
<h2> |
|||
Posts |
|||
</h2> |
|||
|
|||
<a asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">Create New Post</a> |
|||
|
|||
<ul> |
|||
@foreach (var post in Model.Posts) |
|||
{ |
|||
<li><a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a></li> |
|||
} |
|||
</ul> |
|||
|
|||
@section scripts { |
|||
<abp-script-bundle name="@typeof(IndexModel).FullName"> |
|||
<abp-script src="/Pages/Blog/Posts/detail.js" /> |
|||
<abp-script src="/Pages/Blog/Posts/blogcss/blog.js" /> |
|||
<abp-script src="/Pages/Blog/Posts/blogcss/owlcarousel/dist/owl.carousel.min.js" /> |
|||
</abp-script-bundle> |
|||
} |
|||
@section styles { |
|||
<abp-style-bundle @*name="@typeof(IndexModel).FullName" *@> |
|||
<abp-style src="/Pages/Blog/Posts/blogcss/blog.css" /> |
|||
<abp-style src="/Pages/Blog/Posts/blogcss/owlcarousel/dist/assets/owl.carousel.min.css" /> |
|||
<abp-style src="/Pages/Blog/Posts/blogcss/owlcarousel/dist/assets/owl.theme.default.min.css" /> |
|||
<abp-style src="/Pages/Blog/Posts/blogcss/owlcarousel/dist/assets/owl.theme.green.min.css" /> |
|||
</abp-style-bundle> |
|||
} |
|||
|
|||
<div class="container hero-container pb-5 bg-white"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-8"> |
|||
<section class="hero-section"> |
|||
<div class="owl-carousel owl-theme"> |
|||
|
|||
@for (var index = 0; index < Model.Posts.Count && index < 3; index++) |
|||
{ |
|||
var post = Model.Posts[index]; |
|||
<div class="item"> |
|||
<div class="hero-articles"> |
|||
<div class="img-container"> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName"> |
|||
<img src="https://placeimg.com/680/680/tech" class="hero-article-img"> |
|||
</a> |
|||
</div> |
|||
<div class="hero-content"> |
|||
<p class="tags"> |
|||
@foreach (var tag in post.Tags) |
|||
{ |
|||
<a href="#" class="tag">@tag.Name</a> |
|||
} |
|||
</p> |
|||
<h2> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a> |
|||
</h2> |
|||
<p class="article-sum"> |
|||
@(post.Content == null ? "" : (post.Content.Length > 150 ? post.Content.Substring(150) : post.Content)) |
|||
</p> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-primary btn-rounded">@L["ContinueReading"]</a> |
|||
|
|||
</div> |
|||
<div class="article-owner"> |
|||
<div class="article-infos"> |
|||
<div class="user-card"> |
|||
<a href="#"> |
|||
<img src="https://placeimg.com/120/120/people" class="article-avatar"> |
|||
</a> |
|||
<a href="#"> |
|||
<strong>Armağan Ünlü</strong>, @((DateTime.Today - post.CreationTime).Days) @L["DaysAgo"] |
|||
</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#"> |
|||
<i class="fa fa-eye"></i> 156K @L["Read"] |
|||
</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#"> |
|||
<i class="fa fa-comment"></i> @post.CommentCount @L["Comment"] |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="user-link-icons"> |
|||
<a class="add-bookmark" href="#"> |
|||
<i class="fa fa-bookmark"></i> |
|||
</a> |
|||
<a class="share-article" href="#"> |
|||
<i class="fa fa-share-alt"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
</div> |
|||
</section> |
|||
</div> |
|||
|
|||
<div class="col-md-4"> |
|||
<h2>What is new?</h2> |
|||
<div class="list-group"> |
|||
|
|||
@for (var index = 0; index < Model.Posts.Count && index < 3; index++) |
|||
{ |
|||
var post = Model.Posts[index]; |
|||
<div class="list-group-item list-group-item-action flex-column align-items-start"> |
|||
<section class="box-articles p-0"> |
|||
<div class="row align-middle"> |
|||
<div class="col-4"> |
|||
<div class="img-container" style="height: 80px;"> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName"> |
|||
<img src="https://placeimg.com/480/270/tech" class="box-article-img"> |
|||
</a> |
|||
<div class="user-link-icons"> |
|||
<a class="add-bookmark" href="#"> |
|||
<i class="fa fa-bookmark"></i> |
|||
</a> |
|||
<a class="share-article" href="#"> |
|||
<i class="fa fa-share-alt"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-8 pl-0"> |
|||
<h3> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a> |
|||
</h3> |
|||
<div class="article-owner"> |
|||
<div class="article-infos"> |
|||
<div class="user-card"> |
|||
<a href="#"> |
|||
<strong>Armağan Ünlü</strong>, @((DateTime.Today - post.CreationTime).Days) @L["DaysAgo"] |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
</div> |
|||
} |
|||
</div> |
|||
<div class="mt-3"> |
|||
<a href="#" class="btn-link f-85">@L["SeeAll"]<i class="fa fa-long-arrow-right"></i></a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="container last-post-section pb-5"> |
|||
<div class="row"> |
|||
<div class="col-md-8"> |
|||
<div class="row"> |
|||
<div class="col"> |
|||
<div class="titline"> |
|||
<h2>@L["LastPosts"]</h2> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
@for (var index = 3; index < Model.Posts.Count; index++) |
|||
{ |
|||
var post = Model.Posts[index]; |
|||
var oddPost = index % 2 == 1; |
|||
|
|||
<section class="box-articles"> |
|||
<div class="row @(oddPost?"align-middle":"")"> |
|||
<div class="col-md-4 order-md-@(oddPost?"last":"first")"> |
|||
<div class="img-container"> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName"> |
|||
<img src="https://placeimg.com/480/270/tech" class="box-article-img"> |
|||
</a> |
|||
<div class="user-link-icons"> |
|||
<a class="add-bookmark" href="#"> |
|||
<i class="fa fa-bookmark"></i> |
|||
</a> |
|||
<a class="share-article" href="#"> |
|||
<i class="fa fa-share-alt"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-8 order-md-@(oddPost?"first":"last")"> |
|||
<p class="tags"> |
|||
@foreach (var tag in post.Tags) |
|||
{ |
|||
<a href="#" class="tag">@tag.Name</a> |
|||
} |
|||
</p> |
|||
<h3> |
|||
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a> |
|||
</h3> |
|||
<p> |
|||
@(post.Content == null ? "" : (post.Content.Length > 250 ? post.Content.Substring(150) : post.Content))... |
|||
</p> |
|||
<div class="article-owner"> |
|||
<div class="article-infos"> |
|||
<div class="user-card"> |
|||
<a href="#"> |
|||
<img src="https://placeimg.com/120/120/pople" class="article-avatar"> |
|||
</a> |
|||
<a href="#"> |
|||
<strong>Armağan Ünlü</strong>, @((DateTime.Today - post.CreationTime).Days) @L["DaysAgo"] |
|||
</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#"> |
|||
<i class="fa fa-eye"></i> 156K |
|||
</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#"> |
|||
<i class="fa fa-comment"></i> @post.CommentCount |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
} |
|||
|
|||
</div> |
|||
|
|||
<div class="col-md-4"> |
|||
<div class="pb-5 sidebox" id="sidebar"> |
|||
|
|||
<div class="titline"> |
|||
<h2>@L["PopularTags"]</h2> |
|||
</div> |
|||
<div class="sideboxes"> |
|||
<div class="popular-tags"> |
|||
@foreach (var popularTag in Model.PopularTags) |
|||
{ |
|||
<a href="#">@popularTag.Tag.Name <span>(@popularTag.Count @L["Posts"])</span></a> |
|||
} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<hr> |
|||
<footer> |
|||
<a href="#">About</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#">Privacy Policy</a> |
|||
<span class="seperator">|</span> |
|||
<a href="#">Terms</a> |
|||
|
|||
<p> |
|||
Copyright Volosoft - Blog |
|||
</p> |
|||
</footer> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,202 @@ |
|||
|
|||
a, a:hover { |
|||
text-decoration: none; |
|||
color: #000000; |
|||
} |
|||
p { |
|||
color: #444; |
|||
font-family: 'PT Sans', 'Times New Roman', Times, serif; |
|||
} |
|||
h1,h2,h3,h4,h5,h6,.tab-title { |
|||
font-family: Helvetica, Roboto, sans-serif; |
|||
font-weight: 700; |
|||
} |
|||
h1 { |
|||
font-size: 2.0em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
h2, .tab-title { |
|||
font-size: 1.5em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
h3 { |
|||
font-size: 1.25em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
h4 { |
|||
font-size: 1.25em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
h5 { |
|||
font-size: 1em; |
|||
} |
|||
h6 { |
|||
font-size: 1em; |
|||
} |
|||
.lead { |
|||
font-size: 1.1rem; |
|||
font-weight: 300; |
|||
} |
|||
img { |
|||
max-width: 100%; |
|||
} |
|||
input, select, textarea, .form-control , .btn { |
|||
border-radius: 0; |
|||
} |
|||
.navbar-toggler { |
|||
background: aqua; |
|||
} |
|||
.no-border { |
|||
border: 0; |
|||
} |
|||
/* Owl overwrite */ |
|||
|
|||
.owl-theme .owl-nav { |
|||
margin-top: 0 !important; |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; |
|||
position: absolute; |
|||
bottom: 120px; |
|||
left: 0; |
|||
right: 0; |
|||
font-size: 3em; |
|||
color: white; |
|||
> button { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 0 !important; |
|||
display: inline-block !important; |
|||
line-height: 27px !important; |
|||
text-align: center; |
|||
background: none !important; |
|||
transition: .3s; |
|||
&.owl-next { |
|||
position: absolute; |
|||
right: 10%; |
|||
} |
|||
&.owl-prev { |
|||
position: absolute; |
|||
left: 10%; |
|||
} |
|||
> span { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 0; |
|||
border: 2px solid white; |
|||
border-radius: 40px; |
|||
display: inline-block; |
|||
line-height: 29px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.btn-rounded { |
|||
border-radius: 30px; |
|||
} |
|||
.list-group { |
|||
.list-group-item { |
|||
position: relative; |
|||
display: block; |
|||
padding: 21px 0 21px 0; |
|||
margin-bottom: -1px; |
|||
background-color: #fff; |
|||
font-size: .8em; |
|||
border: 0; |
|||
border: 1px solid #f5f5f5; |
|||
border-width: 1px 0; |
|||
&:hover { |
|||
background: none; |
|||
} |
|||
&+.list-group-item { |
|||
margin-top: -1px; |
|||
} |
|||
h3 { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
} |
|||
.tab-content { |
|||
padding: 30px 0px 0; |
|||
} |
|||
|
|||
.container { |
|||
padding-right: 20px; |
|||
padding-left: 20px; |
|||
} |
|||
.row { |
|||
margin-right: -20px; |
|||
margin-left: -20px; |
|||
} |
|||
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { |
|||
padding-right: 20px; |
|||
padding-left: 20px; |
|||
} |
|||
@media (min-width: 1200px) { |
|||
.container { |
|||
max-width: 1080px; |
|||
} |
|||
} |
|||
/* |
|||
.hero-container { |
|||
width: 96%; |
|||
max-width: 1440px; |
|||
} |
|||
*/ |
|||
.f-85 { |
|||
font-size: .85em; |
|||
} |
|||
|
|||
.nav-tabs { |
|||
margin-bottom: 20px; |
|||
border-bottom: 3px solid #000; |
|||
.nav-item { |
|||
margin-bottom: -16px; |
|||
background: white; |
|||
border-left: 5px solid #fff; |
|||
.tab-title { |
|||
font-weight: 700; |
|||
line-height: 1.1; |
|||
padding: 7px; |
|||
margin-left: -14px; |
|||
} |
|||
} |
|||
|
|||
.nav-link { |
|||
font-size: .8em; |
|||
border-radius: 50px; |
|||
padding: .25rem .5rem; |
|||
font-weight: 700; |
|||
color: grey; |
|||
&:hover, &:focus { |
|||
background:#eee; |
|||
} |
|||
} |
|||
|
|||
.nav-link.active, |
|||
.nav-item.show .nav-link { |
|||
background: black; |
|||
border-color: white; |
|||
color: white; |
|||
border-radius: 50px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.pb-5, .py-5 { |
|||
padding-bottom: 4rem!important; |
|||
} |
|||
|
|||
.pt-5, .py-5 { |
|||
padding-top: 4rem!important; |
|||
} |
|||
footer { |
|||
font-size: .8em; |
|||
line-height: 2; |
|||
.seperator { |
|||
padding: 0 5px; |
|||
opacity: .5; |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
@media (min-width: 767px) { |
|||
.box-articles { |
|||
.img-container { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.img-container img { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
height: 100%; |
|||
width: auto; |
|||
-webkit-transform: translate(-50%,-50%); |
|||
-ms-transform: translate(-50%,-50%); |
|||
transform: translate(-50%,-50%); |
|||
max-width: initial; |
|||
} |
|||
.img-container img.portrait { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
header { |
|||
position: fixed; |
|||
width: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 100; |
|||
background:#f8f9fa; |
|||
.navbar-blog { |
|||
padding: 20px 0; |
|||
|
|||
ul { |
|||
li { |
|||
a { |
|||
color: black; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,222 @@ |
|||
section.hero-section { |
|||
padding: 0; |
|||
.hero-articles { |
|||
position: relative; |
|||
overflow: hidden; |
|||
.hero-content { |
|||
position: absolute; |
|||
left: 12%; |
|||
right: 12%; |
|||
bottom: 80px; |
|||
z-index: 4; |
|||
text-align: center; |
|||
h2 { |
|||
margin-top: 0; |
|||
font-size: 2.5em; |
|||
font-weight: bold; |
|||
} |
|||
a { |
|||
color: white; |
|||
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); |
|||
} |
|||
p { |
|||
color: white; |
|||
} |
|||
} |
|||
.tags { |
|||
.tag { |
|||
background: rgba(208, 208, 208, 0.3); |
|||
color: #fff !important; |
|||
&:hover { |
|||
background: white; |
|||
color: black !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.article-owner { |
|||
text-align: center; |
|||
position: relative; |
|||
z-index: 12; |
|||
.article-infos { |
|||
color: black; |
|||
a { |
|||
color: black; |
|||
} |
|||
.seperator { |
|||
margin: 0 4px; |
|||
color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
img.article-avatar { |
|||
width: 64px; |
|||
margin: -25px 10px 0px 0; |
|||
border: 3px solid #fff; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
.img-container { |
|||
background: black; |
|||
border-top-left-radius: 0; |
|||
border-top-right-radius: 0; |
|||
img { |
|||
filter: grayscale(10%); |
|||
} |
|||
&::after { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
z-index: 1; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
top: 1% !important; |
|||
background: linear-gradient(to bottom,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0.91) 89%,rgba(0, 0, 0, 0.93) 93%) !important; |
|||
transition: .2s all ease-in-out; |
|||
opacity: .9; |
|||
} |
|||
} |
|||
&:hover { |
|||
.img-container { |
|||
&::after { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.box-articles { |
|||
padding: 0 0 40px 0; |
|||
&+.box-articles { |
|||
padding: 40px 0; |
|||
border-top: 1px solid #f5f5f5; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
margin-top: -1px; |
|||
} |
|||
h3 { |
|||
margin: 10px 0; |
|||
a { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
.article-owner { |
|||
.article-infos { |
|||
color: #000; |
|||
a { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
img.article-avatar { |
|||
width: 30px; |
|||
margin: -1px 4px 0 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.card-articles { |
|||
.card-content |
|||
{ |
|||
padding: 10px 0px 10px; |
|||
h3 { |
|||
margin: 10px 0; |
|||
a { |
|||
font-weight: 700; |
|||
} |
|||
} |
|||
} |
|||
.article-owner { |
|||
text-align: left; |
|||
.article-infos { |
|||
color: #000; |
|||
a { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
img.article-avatar { |
|||
width: 30px; |
|||
margin: -1px 4px 0 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.article-owner { |
|||
font-size: .85em; |
|||
} |
|||
|
|||
.user-link-icons { |
|||
position: absolute; |
|||
right: 18px; |
|||
top: 15px; |
|||
z-index: 3; |
|||
a { |
|||
display: inline-block; |
|||
color: #eee; |
|||
margin-left: 12px; |
|||
font-size: 1.25em; |
|||
&:hover { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tags { |
|||
margin:5px 0; |
|||
.tag { |
|||
display: inline-block; |
|||
padding: 0px 6px; |
|||
background: rgba(208, 208, 208, 0.3); |
|||
border-radius: 30px; |
|||
margin: 4px 1px; |
|||
color: #b1b1b1 !important; |
|||
font-size: .64em; |
|||
line-height: 1.6em; |
|||
text-transform: uppercase; |
|||
&:hover { |
|||
background: black; |
|||
color: white !important; |
|||
} |
|||
} |
|||
} |
|||
.popular-tags { |
|||
a { |
|||
display: block; |
|||
padding: 10px 15px; |
|||
background: white; |
|||
margin-bottom: 2px; |
|||
font-size: .85em; |
|||
&:hover { |
|||
background: #f5f5f5; |
|||
} |
|||
span { |
|||
float: right; |
|||
opacity: .3; |
|||
font-size: .85em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.img-container { |
|||
position: relative; |
|||
overflow: hidden; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.sidebox { |
|||
.sideboxes { |
|||
padding: 30px; |
|||
background: #fafafa; |
|||
} |
|||
} |
|||
@ -0,0 +1,102 @@ |
|||
.post-detail { |
|||
h1 { |
|||
padding: 0px 0; |
|||
line-height: 1.25em; |
|||
font-size: 3.5em; |
|||
} |
|||
.article-owner { |
|||
text-align: center; |
|||
position: relative; |
|||
z-index: 12; |
|||
.article-infos { |
|||
color: #000; |
|||
a { |
|||
color: black; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
img.article-avatar { |
|||
width: 64px; |
|||
margin: -20px 10px 0px 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
border: 3px solid #fff; |
|||
} |
|||
} |
|||
} |
|||
.post-content { |
|||
font-size: 1.125em; |
|||
.post-img-container { |
|||
margin: 50px -80px 20px; |
|||
overflow: hidden; |
|||
border-radius: 4px; |
|||
} |
|||
.lead { |
|||
font-size: 1.125em; |
|||
color: #111; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.comment-avatar { |
|||
max-width: 64px; |
|||
} |
|||
.answer-avatar { |
|||
max-width: 48px; |
|||
} |
|||
.media { |
|||
font-size: .95em; |
|||
.media { |
|||
font-size: .95em; |
|||
} |
|||
} |
|||
|
|||
.comment-area { |
|||
.comment-owner { |
|||
span { |
|||
font-weight: 300; |
|||
color: #999; |
|||
font-size: .8em; |
|||
} |
|||
} |
|||
>.media { |
|||
padding: 30px 0; |
|||
border-bottom: 1px solid #f1f1f1; |
|||
.media { |
|||
padding: 20px 0; |
|||
} |
|||
} |
|||
.comment-buttons { |
|||
background: #f8f9fa ; |
|||
border-bottom: 1px solid #f1f1f1; |
|||
padding: 6px 10px; |
|||
font-size: .85em; |
|||
.seperator { |
|||
color: #ddd; |
|||
margin: 0 8px; |
|||
} |
|||
.count { |
|||
color: #fff; |
|||
background: #ddd; |
|||
margin-left: 5px; |
|||
padding: 1px 3px; |
|||
font-size: 10px; |
|||
border-radius: 3px; |
|||
&.count-up { |
|||
background: #999; |
|||
} |
|||
} |
|||
} |
|||
p { |
|||
margin-bottom: 6px; |
|||
} |
|||
.comment-avatar { |
|||
width: 64px; |
|||
} |
|||
.answer-avatar { |
|||
width: 48px; |
|||
} |
|||
} |
|||
@ -0,0 +1,638 @@ |
|||
body.vs-blog { |
|||
position: relative; |
|||
background: #fff; |
|||
font-family: Helvetica, sans-serif; |
|||
font-size: 15px; |
|||
/* Owl overwrite */ |
|||
/* |
|||
.hero-container { |
|||
width: 96%; |
|||
max-width: 1440px; |
|||
} |
|||
*/ |
|||
} |
|||
|
|||
body.vs-blog a, body.vs-blog a:hover { |
|||
text-decoration: none; |
|||
color: #000000; |
|||
} |
|||
|
|||
body.vs-blog p { |
|||
color: #444; |
|||
font-family: 'PT Sans', 'Times New Roman', Times, serif; |
|||
} |
|||
|
|||
body.vs-blog h1, body.vs-blog h2, body.vs-blog h3, body.vs-blog h4, body.vs-blog h5, body.vs-blog h6, body.vs-blog .tab-title { |
|||
font-family: Helvetica, Roboto, sans-serif; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
body.vs-blog h1 { |
|||
font-size: 2.0em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
|
|||
body.vs-blog h2, body.vs-blog .tab-title { |
|||
font-size: 1.5em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
|
|||
body.vs-blog h3 { |
|||
font-size: 1.25em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
|
|||
body.vs-blog h4 { |
|||
font-size: 1.25em; |
|||
margin: 1.5rem 0 .75rem; |
|||
} |
|||
|
|||
body.vs-blog h5 { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
body.vs-blog h6 { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
body.vs-blog .lead { |
|||
font-size: 1.1rem; |
|||
font-weight: 300; |
|||
} |
|||
|
|||
body.vs-blog img { |
|||
max-width: 100%; |
|||
} |
|||
|
|||
body.vs-blog input, body.vs-blog select, body.vs-blog textarea, body.vs-blog .form-control, body.vs-blog .btn { |
|||
border-radius: 0; |
|||
} |
|||
|
|||
body.vs-blog .navbar-toggler { |
|||
background: aqua; |
|||
} |
|||
|
|||
body.vs-blog .no-border { |
|||
border: 0; |
|||
} |
|||
|
|||
body.vs-blog .owl-theme .owl-nav { |
|||
margin-top: 0 !important; |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; |
|||
position: absolute; |
|||
bottom: 120px; |
|||
left: 0; |
|||
right: 0; |
|||
font-size: 3em; |
|||
color: white; |
|||
} |
|||
|
|||
body.vs-blog .owl-theme .owl-nav > button { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 0 !important; |
|||
display: inline-block !important; |
|||
line-height: 27px !important; |
|||
text-align: center; |
|||
background: none !important; |
|||
-webkit-transition: .3s; |
|||
transition: .3s; |
|||
} |
|||
|
|||
body.vs-blog .owl-theme .owl-nav > button.owl-next { |
|||
position: absolute; |
|||
right: 10%; |
|||
} |
|||
|
|||
body.vs-blog .owl-theme .owl-nav > button.owl-prev { |
|||
position: absolute; |
|||
left: 10%; |
|||
} |
|||
|
|||
body.vs-blog .owl-theme .owl-nav > button > span { |
|||
width: 40px; |
|||
height: 40px; |
|||
padding: 0; |
|||
border: 2px solid white; |
|||
border-radius: 40px; |
|||
display: inline-block; |
|||
line-height: 29px; |
|||
text-align: center; |
|||
} |
|||
|
|||
body.vs-blog .btn-rounded { |
|||
border-radius: 30px; |
|||
} |
|||
|
|||
body.vs-blog .list-group .list-group-item { |
|||
position: relative; |
|||
display: block; |
|||
padding: 21px 0 21px 0; |
|||
margin-bottom: -1px; |
|||
background-color: #fff; |
|||
font-size: .8em; |
|||
border: 0; |
|||
border: 1px solid #f5f5f5; |
|||
border-width: 1px 0; |
|||
} |
|||
|
|||
body.vs-blog .list-group .list-group-item:hover { |
|||
background: none; |
|||
} |
|||
|
|||
body.vs-blog .list-group .list-group-item + .list-group-item { |
|||
margin-top: -1px; |
|||
} |
|||
|
|||
body.vs-blog .list-group .list-group-item h3 { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
body.vs-blog .tab-content { |
|||
padding: 30px 0px 0; |
|||
} |
|||
|
|||
body.vs-blog .container { |
|||
padding-right: 20px; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
body.vs-blog .row { |
|||
margin-right: -20px; |
|||
margin-left: -20px; |
|||
} |
|||
|
|||
body.vs-blog .col, body.vs-blog .col-1, body.vs-blog .col-10, body.vs-blog .col-11, body.vs-blog .col-12, body.vs-blog .col-2, body.vs-blog .col-3, body.vs-blog .col-4, body.vs-blog .col-5, body.vs-blog .col-6, body.vs-blog .col-7, body.vs-blog .col-8, body.vs-blog .col-9, body.vs-blog .col-auto, body.vs-blog .col-lg, body.vs-blog .col-lg-1, body.vs-blog .col-lg-10, body.vs-blog .col-lg-11, body.vs-blog .col-lg-12, body.vs-blog .col-lg-2, body.vs-blog .col-lg-3, body.vs-blog .col-lg-4, body.vs-blog .col-lg-5, body.vs-blog .col-lg-6, body.vs-blog .col-lg-7, body.vs-blog .col-lg-8, body.vs-blog .col-lg-9, body.vs-blog .col-lg-auto, body.vs-blog .col-md, body.vs-blog .col-md-1, body.vs-blog .col-md-10, body.vs-blog .col-md-11, body.vs-blog .col-md-12, body.vs-blog .col-md-2, body.vs-blog .col-md-3, body.vs-blog .col-md-4, body.vs-blog .col-md-5, body.vs-blog .col-md-6, body.vs-blog .col-md-7, body.vs-blog .col-md-8, body.vs-blog .col-md-9, body.vs-blog .col-md-auto, body.vs-blog .col-sm, body.vs-blog .col-sm-1, body.vs-blog .col-sm-10, body.vs-blog .col-sm-11, body.vs-blog .col-sm-12, body.vs-blog .col-sm-2, body.vs-blog .col-sm-3, body.vs-blog .col-sm-4, body.vs-blog .col-sm-5, body.vs-blog .col-sm-6, body.vs-blog .col-sm-7, body.vs-blog .col-sm-8, body.vs-blog .col-sm-9, body.vs-blog .col-sm-auto, body.vs-blog .col-xl, body.vs-blog .col-xl-1, body.vs-blog .col-xl-10, body.vs-blog .col-xl-11, body.vs-blog .col-xl-12, body.vs-blog .col-xl-2, body.vs-blog .col-xl-3, body.vs-blog .col-xl-4, body.vs-blog .col-xl-5, body.vs-blog .col-xl-6, body.vs-blog .col-xl-7, body.vs-blog .col-xl-8, body.vs-blog .col-xl-9, body.vs-blog .col-xl-auto { |
|||
padding-right: 20px; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
@media (min-width: 1200px) { |
|||
body.vs-blog .container { |
|||
max-width: 1080px; |
|||
} |
|||
} |
|||
|
|||
body.vs-blog .f-85 { |
|||
font-size: .85em; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs { |
|||
margin-bottom: 20px; |
|||
border-bottom: 3px solid #000; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs .nav-item { |
|||
margin-bottom: -16px; |
|||
background: white; |
|||
border-left: 5px solid #fff; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs .nav-item .tab-title { |
|||
font-weight: 700; |
|||
line-height: 1.1; |
|||
padding: 7px; |
|||
margin-left: -14px; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs .nav-link { |
|||
font-size: .8em; |
|||
border-radius: 50px; |
|||
padding: .25rem .5rem; |
|||
font-weight: 700; |
|||
color: grey; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs .nav-link:hover, body.vs-blog .nav-tabs .nav-link:focus { |
|||
background: #eee; |
|||
} |
|||
|
|||
body.vs-blog .nav-tabs .nav-link.active, |
|||
body.vs-blog .nav-tabs .nav-item.show .nav-link { |
|||
background: black; |
|||
border-color: white; |
|||
color: white; |
|||
border-radius: 50px; |
|||
} |
|||
|
|||
body.vs-blog .pb-5, body.vs-blog .py-5 { |
|||
padding-bottom: 4rem !important; |
|||
} |
|||
|
|||
body.vs-blog .pt-5, body.vs-blog .py-5 { |
|||
padding-top: 4rem !important; |
|||
} |
|||
|
|||
body.vs-blog footer { |
|||
font-size: .8em; |
|||
line-height: 2; |
|||
} |
|||
|
|||
body.vs-blog footer .seperator { |
|||
padding: 0 5px; |
|||
opacity: .5; |
|||
} |
|||
|
|||
body.vs-blog header { |
|||
position: fixed; |
|||
width: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 100; |
|||
background: #f8f9fa; |
|||
} |
|||
|
|||
body.vs-blog header .navbar-blog { |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
body.vs-blog header .navbar-blog ul li a { |
|||
color: black; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section { |
|||
padding: 0; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .hero-content { |
|||
position: absolute; |
|||
left: 12%; |
|||
right: 12%; |
|||
bottom: 80px; |
|||
z-index: 4; |
|||
text-align: center; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .hero-content h2 { |
|||
margin-top: 0; |
|||
font-size: 2.5em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .hero-content a { |
|||
color: white; |
|||
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .hero-content p { |
|||
color: white; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .tags .tag { |
|||
background: rgba(208, 208, 208, 0.3); |
|||
color: #fff !important; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .tags .tag:hover { |
|||
background: white; |
|||
color: black !important; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .article-owner { |
|||
text-align: center; |
|||
position: relative; |
|||
z-index: 12; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .article-owner .article-infos { |
|||
color: black; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .article-owner .article-infos a { |
|||
color: black; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .article-owner .article-infos .seperator { |
|||
margin: 0 4px; |
|||
color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .article-owner .article-infos img.article-avatar { |
|||
width: 64px; |
|||
margin: -25px 10px 0px 0; |
|||
border: 3px solid #fff; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .img-container { |
|||
background: black; |
|||
border-top-left-radius: 0; |
|||
border-top-right-radius: 0; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .img-container img { |
|||
-webkit-filter: grayscale(10%); |
|||
filter: grayscale(10%); |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles .img-container::after { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
z-index: 1; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
top: 1% !important; |
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(89%, rgba(0, 0, 0, 0.91)), color-stop(93%, rgba(0, 0, 0, 0.93))) !important; |
|||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.91) 89%, rgba(0, 0, 0, 0.93) 93%) !important; |
|||
-webkit-transition: .2s all ease-in-out; |
|||
transition: .2s all ease-in-out; |
|||
opacity: .9; |
|||
} |
|||
|
|||
body.vs-blog section.hero-section .hero-articles:hover .img-container::after { |
|||
opacity: 1; |
|||
} |
|||
|
|||
body.vs-blog .box-articles { |
|||
padding: 0 0 40px 0; |
|||
} |
|||
|
|||
body.vs-blog .box-articles + .box-articles { |
|||
padding: 40px 0; |
|||
border-top: 1px solid #f5f5f5; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
margin-top: -1px; |
|||
} |
|||
|
|||
body.vs-blog .box-articles h3 { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
body.vs-blog .box-articles h3 a { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
body.vs-blog .box-articles .article-owner .article-infos { |
|||
color: #000; |
|||
} |
|||
|
|||
body.vs-blog .box-articles .article-owner .article-infos a { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
body.vs-blog .box-articles .article-owner .article-infos .seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
body.vs-blog .box-articles .article-owner .article-infos img.article-avatar { |
|||
width: 30px; |
|||
margin: -1px 4px 0 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .card-content { |
|||
padding: 10px 0px 10px; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .card-content h3 { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .card-content h3 a { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .article-owner { |
|||
text-align: left; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .article-owner .article-infos { |
|||
color: #000; |
|||
} |
|||
|
|||
body.vs-blog .card-articles .article-owner .article-infos a { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
body.vs-blog .card-articles .article-owner .article-infos .seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
body.vs-blog .card-articles .article-owner .article-infos img.article-avatar { |
|||
width: 30px; |
|||
margin: -1px 4px 0 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
body.vs-blog .article-owner { |
|||
font-size: .85em; |
|||
} |
|||
|
|||
body.vs-blog .user-link-icons { |
|||
position: absolute; |
|||
right: 18px; |
|||
top: 15px; |
|||
z-index: 3; |
|||
} |
|||
|
|||
body.vs-blog .user-link-icons a { |
|||
display: inline-block; |
|||
color: #eee; |
|||
margin-left: 12px; |
|||
font-size: 1.25em; |
|||
} |
|||
|
|||
body.vs-blog .user-link-icons a:hover { |
|||
color: #fff; |
|||
} |
|||
|
|||
body.vs-blog .tags { |
|||
margin: 5px 0; |
|||
} |
|||
|
|||
body.vs-blog .tags .tag { |
|||
display: inline-block; |
|||
padding: 0px 6px; |
|||
background: rgba(208, 208, 208, 0.3); |
|||
border-radius: 30px; |
|||
margin: 4px 1px; |
|||
color: #b1b1b1 !important; |
|||
font-size: .64em; |
|||
line-height: 1.6em; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
body.vs-blog .tags .tag:hover { |
|||
background: black; |
|||
color: white !important; |
|||
} |
|||
|
|||
body.vs-blog .popular-tags a { |
|||
display: block; |
|||
padding: 10px 15px; |
|||
background: white; |
|||
margin-bottom: 2px; |
|||
font-size: .85em; |
|||
} |
|||
|
|||
body.vs-blog .popular-tags a:hover { |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
body.vs-blog .popular-tags a span { |
|||
float: right; |
|||
opacity: .3; |
|||
font-size: .85em; |
|||
} |
|||
|
|||
body.vs-blog .img-container { |
|||
position: relative; |
|||
overflow: hidden; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
body.vs-blog .sidebox .sideboxes { |
|||
padding: 30px; |
|||
background: #fafafa; |
|||
} |
|||
|
|||
body.vs-blog .post-detail h1 { |
|||
padding: 0px 0; |
|||
line-height: 1.25em; |
|||
font-size: 3.5em; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .article-owner { |
|||
text-align: center; |
|||
position: relative; |
|||
z-index: 12; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .article-owner .article-infos { |
|||
color: #000; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .article-owner .article-infos a { |
|||
color: black; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
body.vs-blog .post-detail .article-owner .article-infos .seperator { |
|||
margin: 0 4px; |
|||
color: rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
body.vs-blog .post-detail .article-owner .article-infos img.article-avatar { |
|||
width: 64px; |
|||
margin: -20px 10px 0px 0; |
|||
display: inline-block; |
|||
border-radius: 50%; |
|||
border: 3px solid #fff; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .post-content { |
|||
font-size: 1.125em; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .post-content .post-img-container { |
|||
margin: 50px -80px 20px; |
|||
overflow: hidden; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
body.vs-blog .post-detail .post-content .lead { |
|||
font-size: 1.125em; |
|||
color: #111; |
|||
} |
|||
|
|||
body.vs-blog .comment-avatar { |
|||
max-width: 64px; |
|||
} |
|||
|
|||
body.vs-blog .answer-avatar { |
|||
max-width: 48px; |
|||
} |
|||
|
|||
body.vs-blog .media { |
|||
font-size: .95em; |
|||
} |
|||
|
|||
body.vs-blog .media .media { |
|||
font-size: .95em; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-owner span { |
|||
font-weight: 300; |
|||
color: #999; |
|||
font-size: .8em; |
|||
} |
|||
|
|||
body.vs-blog .comment-area > .media { |
|||
padding: 30px 0; |
|||
border-bottom: 1px solid #f1f1f1; |
|||
} |
|||
|
|||
body.vs-blog .comment-area > .media .media { |
|||
padding: 20px 0; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-buttons { |
|||
background: #f8f9fa; |
|||
border-bottom: 1px solid #f1f1f1; |
|||
padding: 6px 10px; |
|||
font-size: .85em; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-buttons .seperator { |
|||
color: #ddd; |
|||
margin: 0 8px; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-buttons .count { |
|||
color: #fff; |
|||
background: #ddd; |
|||
margin-left: 5px; |
|||
padding: 1px 3px; |
|||
font-size: 10px; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-buttons .count.count-up { |
|||
background: #999; |
|||
} |
|||
|
|||
body.vs-blog .comment-area p { |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .comment-avatar { |
|||
width: 64px; |
|||
} |
|||
|
|||
body.vs-blog .comment-area .answer-avatar { |
|||
width: 48px; |
|||
} |
|||
|
|||
@media (min-width: 767px) { |
|||
body.vs-blog .box-articles .img-container { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
body.vs-blog .box-articles .img-container img { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
height: 100%; |
|||
width: auto; |
|||
-webkit-transform: translate(-50%, -50%); |
|||
transform: translate(-50%, -50%); |
|||
max-width: initial; |
|||
} |
|||
body.vs-blog .box-articles .img-container img.portrait { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
} |
|||
/*# sourceMappingURL=blog.css.map */ |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,79 @@ |
|||
$('body').addClass("vs-blog"); |
|||
|
|||
function handleArrows() { |
|||
var herosWidth = $(".hero-articles").width(); |
|||
var arrowsPosition = (herosWidth / 2 - 90); |
|||
$(".owl-next").css("right", arrowsPosition); |
|||
$(".owl-prev").css("left", arrowsPosition); |
|||
} |
|||
function handleImages() { |
|||
if ($(window).width() > 767) { |
|||
$(".box-articles .img-container").each(function(){ |
|||
var squareWidth = $(this).width(); |
|||
$(this).css("height", squareWidth); |
|||
}); |
|||
} |
|||
else { |
|||
$(".box-articles .img-container").css("height", "auto"); |
|||
} |
|||
} |
|||
function handleBodyPadding() { |
|||
var headerHeight = $("header").height(); |
|||
$("body").css("padding-top", headerHeight); |
|||
} |
|||
function handleOwlCarousel() { |
|||
$('.hero-section .owl-carousel').owlCarousel({ |
|||
loop:true, |
|||
margin: 0, |
|||
nav: false, |
|||
dots: false, |
|||
//center: true,
|
|||
autoplay: true, |
|||
autoHeight: true, |
|||
autoplaySpeed: 1000, |
|||
items:1, |
|||
}); |
|||
$('.card-article-container .owl-carousel').owlCarousel({ |
|||
loop:true, |
|||
margin:0, |
|||
nav: false, |
|||
dots: false, |
|||
autoplay: true, |
|||
autoplaySpeed: 1000, |
|||
responsive:{ |
|||
0: { |
|||
items:1 |
|||
}, |
|||
} |
|||
}); |
|||
} |
|||
|
|||
$(document).ready(function(){ |
|||
setTimeout(function(){ |
|||
handleArrows(); |
|||
}, 500); |
|||
handleImages(); |
|||
handleBodyPadding(); |
|||
handleOwlCarousel(); |
|||
var stickySidebar = new StickySidebar('#sidebar', { |
|||
topSpacing: 80, |
|||
bottomSpacing: 0, |
|||
containerSelector: false, |
|||
innerWrapperSelector: '.sidebar__inner', |
|||
resizeSensor: true, |
|||
stickyClass: 'is-affixed', |
|||
minWidth: 0 |
|||
}); |
|||
}); |
|||
|
|||
$(window).resize(function(){ |
|||
setTimeout(function(){ |
|||
handleArrows(); |
|||
handleImages(); |
|||
handleBodyPadding(); |
|||
}, 500); |
|||
}); |
|||
|
|||
$(".nav-link").on("click", function(){ |
|||
$(this).parent().parent(); |
|||
}); |
|||
@ -0,0 +1,11 @@ |
|||
div.vs-blog { |
|||
position: relative; |
|||
background: #fff; |
|||
font-family: Helvetica, sans-serif; |
|||
font-size: 15px; |
|||
@import "bootstrap-overwrite.scss"; |
|||
@import "header.scss"; |
|||
@import "home.scss"; |
|||
@import "post.scss"; |
|||
@import "custom.scss"; |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
Copyright (c) 2014 Owl |
|||
Modified work Copyright 2016-2018 David Deutsch |
|||
|
|||
Permission is hereby granted, free of charge, to any person |
|||
obtaining a copy of this software and associated documentation |
|||
files (the "Software"), to deal in the Software without |
|||
restriction, including without limitation the rights to use, |
|||
copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the |
|||
Software is furnished to do so, subject to the following |
|||
conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be |
|||
included in all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
|||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
|||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
|||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
|||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
|||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
|||
OTHER DEALINGS IN THE SOFTWARE. |
|||
@ -0,0 +1,122 @@ |
|||
# Owl Carousel 2 |
|||
|
|||
Touch enabled [jQuery](https://jquery.com/) plugin that lets you create a beautiful, responsive carousel slider. **To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.** |
|||
|
|||
**Notice:** The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes. |
|||
|
|||
## Quick start |
|||
|
|||
### Install |
|||
|
|||
This package can be installed with: |
|||
|
|||
- [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` or `yarn add owl.carousel jquery` |
|||
- [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel` |
|||
|
|||
Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases). |
|||
|
|||
### Load |
|||
|
|||
#### Webpack |
|||
|
|||
Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration: |
|||
|
|||
const webpack = require('webpack'); |
|||
|
|||
//... |
|||
plugins: [ |
|||
new webpack.ProvidePlugin({ |
|||
$: 'jquery', |
|||
jQuery: 'jquery', |
|||
'window.jQuery': 'jquery' |
|||
}), |
|||
], |
|||
//... |
|||
|
|||
Load the required stylesheet and JS: |
|||
|
|||
```js |
|||
import 'owl.carousel/dist/assets/owl.carousel.css'; |
|||
import 'owl.carousel'; |
|||
``` |
|||
|
|||
#### Static HTML |
|||
|
|||
Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup: |
|||
|
|||
```html |
|||
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" /> |
|||
``` |
|||
|
|||
```html |
|||
<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" /> |
|||
``` |
|||
|
|||
**NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`. |
|||
|
|||
|
|||
Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery: |
|||
|
|||
```html |
|||
<script src="/node_modules/jquery/dist/jquery.js"></script> |
|||
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script> |
|||
``` |
|||
|
|||
```html |
|||
<script src="/bower_components/jquery/dist/jquery.js"></script> |
|||
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script> |
|||
``` |
|||
|
|||
### Usage |
|||
|
|||
Wrap your items (`div`, `a`, `img`, `span`, `li` etc.) with a container element (`div`, `ul` etc.). Only the class `owl-carousel` is mandatory to apply proper styles: |
|||
|
|||
```html |
|||
<div class="owl-carousel owl-theme"> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
<div> Your Content </div> |
|||
</div> |
|||
``` |
|||
**NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own. |
|||
|
|||
|
|||
Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready. |
|||
|
|||
```javascript |
|||
$(document).ready(function(){ |
|||
$('.owl-carousel').owlCarousel(); |
|||
}); |
|||
``` |
|||
|
|||
## Documentation |
|||
|
|||
The documentation, included in this repo in the root directory, is built with [Assemble](http://assemble.io/) and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally. |
|||
|
|||
## Building |
|||
|
|||
This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available: |
|||
|
|||
* `default` compiles the CSS and JS into `/dist` and builds the doc. |
|||
* `dist` compiles the CSS and JS into `/dist` only. |
|||
* `watch` watches source files and builds them automatically whenever you save. |
|||
* `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/). |
|||
|
|||
To define which plugins are build into the distribution just edit `/_config.json` to fit your needs. |
|||
|
|||
## Contributing |
|||
|
|||
Please read [CONTRIBUTING.md](CONTRIBUTING.md). |
|||
|
|||
## Roadmap |
|||
|
|||
Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756). |
|||
|
|||
|
|||
## License |
|||
|
|||
The code and the documentation are released under the [MIT License](LICENSE). |
|||
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,186 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
/* |
|||
* Owl Carousel - Core |
|||
*/ |
|||
.owl-carousel { |
|||
display: none; |
|||
width: 100%; |
|||
-webkit-tap-highlight-color: transparent; |
|||
/* position relative and z-index fix webkit rendering fonts issue */ |
|||
position: relative; |
|||
z-index: 1; } |
|||
.owl-carousel .owl-stage { |
|||
position: relative; |
|||
-ms-touch-action: pan-Y; |
|||
touch-action: manipulation; |
|||
-moz-backface-visibility: hidden; |
|||
/* fix firefox animation glitch */ } |
|||
.owl-carousel .owl-stage:after { |
|||
content: "."; |
|||
display: block; |
|||
clear: both; |
|||
visibility: hidden; |
|||
line-height: 0; |
|||
height: 0; } |
|||
.owl-carousel .owl-stage-outer { |
|||
position: relative; |
|||
overflow: hidden; |
|||
/* fix for flashing background */ |
|||
-webkit-transform: translate3d(0px, 0px, 0px); } |
|||
.owl-carousel .owl-wrapper, |
|||
.owl-carousel .owl-item { |
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
-webkit-transform: translate3d(0, 0, 0); |
|||
-moz-transform: translate3d(0, 0, 0); |
|||
-ms-transform: translate3d(0, 0, 0); } |
|||
.owl-carousel .owl-item { |
|||
position: relative; |
|||
min-height: 1px; |
|||
float: left; |
|||
-webkit-backface-visibility: hidden; |
|||
-webkit-tap-highlight-color: transparent; |
|||
-webkit-touch-callout: none; } |
|||
.owl-carousel .owl-item img { |
|||
display: block; |
|||
width: 100%; } |
|||
.owl-carousel .owl-nav.disabled, |
|||
.owl-carousel .owl-dots.disabled { |
|||
display: none; } |
|||
.owl-carousel .owl-nav .owl-prev, |
|||
.owl-carousel .owl-nav .owl-next, |
|||
.owl-carousel .owl-dot { |
|||
cursor: pointer; |
|||
-webkit-user-select: none; |
|||
-khtml-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; } |
|||
.owl-carousel .owl-nav button.owl-prev, |
|||
.owl-carousel .owl-nav button.owl-next, |
|||
.owl-carousel button.owl-dot { |
|||
background: none; |
|||
color: inherit; |
|||
border: none; |
|||
padding: 0 !important; |
|||
font: inherit; } |
|||
.owl-carousel.owl-loaded { |
|||
display: block; } |
|||
.owl-carousel.owl-loading { |
|||
opacity: 0; |
|||
display: block; } |
|||
.owl-carousel.owl-hidden { |
|||
opacity: 0; } |
|||
.owl-carousel.owl-refresh .owl-item { |
|||
visibility: hidden; } |
|||
.owl-carousel.owl-drag .owl-item { |
|||
-ms-touch-action: pan-y; |
|||
touch-action: pan-y; |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; } |
|||
.owl-carousel.owl-grab { |
|||
cursor: move; |
|||
cursor: grab; } |
|||
.owl-carousel.owl-rtl { |
|||
direction: rtl; } |
|||
.owl-carousel.owl-rtl .owl-item { |
|||
float: right; } |
|||
|
|||
/* No Js */ |
|||
.no-js .owl-carousel { |
|||
display: block; } |
|||
|
|||
/* |
|||
* Owl Carousel - Animate Plugin |
|||
*/ |
|||
.owl-carousel .animated { |
|||
animation-duration: 1000ms; |
|||
animation-fill-mode: both; } |
|||
|
|||
.owl-carousel .owl-animated-in { |
|||
z-index: 0; } |
|||
|
|||
.owl-carousel .owl-animated-out { |
|||
z-index: 1; } |
|||
|
|||
.owl-carousel .fadeOut { |
|||
animation-name: fadeOut; } |
|||
|
|||
@keyframes fadeOut { |
|||
0% { |
|||
opacity: 1; } |
|||
100% { |
|||
opacity: 0; } } |
|||
|
|||
/* |
|||
* Owl Carousel - Auto Height Plugin |
|||
*/ |
|||
.owl-height { |
|||
transition: height 500ms ease-in-out; } |
|||
|
|||
/* |
|||
* Owl Carousel - Lazy Load Plugin |
|||
*/ |
|||
.owl-carousel .owl-item { |
|||
/** |
|||
This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong |
|||
calculation of the height of the owl-item that breaks page layouts |
|||
*/ } |
|||
.owl-carousel .owl-item .owl-lazy { |
|||
opacity: 0; |
|||
transition: opacity 400ms ease; } |
|||
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { |
|||
max-height: 0; } |
|||
.owl-carousel .owl-item img.owl-lazy { |
|||
transform-style: preserve-3d; } |
|||
|
|||
/* |
|||
* Owl Carousel - Video Plugin |
|||
*/ |
|||
.owl-carousel .owl-video-wrapper { |
|||
position: relative; |
|||
height: 100%; |
|||
background: #000; } |
|||
|
|||
.owl-carousel .owl-video-play-icon { |
|||
position: absolute; |
|||
height: 80px; |
|||
width: 80px; |
|||
left: 50%; |
|||
top: 50%; |
|||
margin-left: -40px; |
|||
margin-top: -40px; |
|||
background: url("owl.video.play.png") no-repeat; |
|||
cursor: pointer; |
|||
z-index: 1; |
|||
-webkit-backface-visibility: hidden; |
|||
transition: transform 100ms ease; } |
|||
|
|||
.owl-carousel .owl-video-play-icon:hover { |
|||
-ms-transform: scale(1.3, 1.3); |
|||
transform: scale(1.3, 1.3); } |
|||
|
|||
.owl-carousel .owl-video-playing .owl-video-tn, |
|||
.owl-carousel .owl-video-playing .owl-video-play-icon { |
|||
display: none; } |
|||
|
|||
.owl-carousel .owl-video-tn { |
|||
opacity: 0; |
|||
height: 100%; |
|||
background-position: center center; |
|||
background-repeat: no-repeat; |
|||
background-size: contain; |
|||
transition: opacity 400ms ease; } |
|||
|
|||
.owl-carousel .owl-video-frame { |
|||
position: relative; |
|||
z-index: 1; |
|||
height: 100%; |
|||
width: 100%; } |
|||
@ -0,0 +1,6 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} |
|||
@ -0,0 +1,50 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
/* |
|||
* Default theme - Owl Carousel CSS File |
|||
*/ |
|||
.owl-theme .owl-nav { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; } |
|||
.owl-theme .owl-nav [class*='owl-'] { |
|||
color: #FFF; |
|||
font-size: 14px; |
|||
margin: 5px; |
|||
padding: 4px 7px; |
|||
background: #D6D6D6; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
border-radius: 3px; } |
|||
.owl-theme .owl-nav [class*='owl-']:hover { |
|||
background: #869791; |
|||
color: #FFF; |
|||
text-decoration: none; } |
|||
.owl-theme .owl-nav .disabled { |
|||
opacity: 0.5; |
|||
cursor: default; } |
|||
|
|||
.owl-theme .owl-nav.disabled + .owl-dots { |
|||
margin-top: 10px; } |
|||
|
|||
.owl-theme .owl-dots { |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; } |
|||
.owl-theme .owl-dots .owl-dot { |
|||
display: inline-block; |
|||
zoom: 1; |
|||
*display: inline; } |
|||
.owl-theme .owl-dots .owl-dot span { |
|||
width: 10px; |
|||
height: 10px; |
|||
margin: 5px 7px; |
|||
background: #D6D6D6; |
|||
display: block; |
|||
-webkit-backface-visibility: visible; |
|||
transition: opacity 200ms ease; |
|||
border-radius: 30px; } |
|||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { |
|||
background: #869791; } |
|||
@ -0,0 +1,6 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} |
|||
@ -0,0 +1,50 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
/* |
|||
* Green theme - Owl Carousel CSS File |
|||
*/ |
|||
.owl-theme .owl-nav { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; } |
|||
.owl-theme .owl-nav [class*='owl-'] { |
|||
color: #FFF; |
|||
font-size: 14px; |
|||
margin: 5px; |
|||
padding: 4px 7px; |
|||
background: #D6D6D6; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
border-radius: 3px; } |
|||
.owl-theme .owl-nav [class*='owl-']:hover { |
|||
background: #4DC7A0; |
|||
color: #FFF; |
|||
text-decoration: none; } |
|||
.owl-theme .owl-nav .disabled { |
|||
opacity: 0.5; |
|||
cursor: default; } |
|||
|
|||
.owl-theme .owl-nav.disabled + .owl-dots { |
|||
margin-top: 10px; } |
|||
|
|||
.owl-theme .owl-dots { |
|||
text-align: center; |
|||
-webkit-tap-highlight-color: transparent; } |
|||
.owl-theme .owl-dots .owl-dot { |
|||
display: inline-block; |
|||
zoom: 1; |
|||
*display: inline; } |
|||
.owl-theme .owl-dots .owl-dot span { |
|||
width: 10px; |
|||
height: 10px; |
|||
margin: 5px 7px; |
|||
background: #D6D6D6; |
|||
display: block; |
|||
-webkit-backface-visibility: visible; |
|||
transition: opacity 200ms ease; |
|||
border-radius: 30px; } |
|||
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { |
|||
background: #4DC7A0; } |
|||
@ -0,0 +1,6 @@ |
|||
/** |
|||
* Owl Carousel v2.3.4 |
|||
* Copyright 2013-2018 David Deutsch |
|||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE |
|||
*/ |
|||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#4DC7A0;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#4DC7A0} |
|||
|
After Width: | Height: | Size: 4.9 KiB |
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,13 +1,25 @@ |
|||
(function ($) { |
|||
$('button[type="button"]').click(function () { |
|||
var data = $(this).attr('data-button'); |
|||
|
|||
if (data == '') { |
|||
$('div .replyForm').hide(); |
|||
|
|||
$('a').click(function (event) { |
|||
var data = $(this).attr('data-relpyid'); |
|||
|
|||
if (data == '' || data === undefined) { |
|||
return; |
|||
} |
|||
|
|||
$('#repliedCommentId').val(data); |
|||
$('#textBoxId').focus(); |
|||
event.preventDefault(); |
|||
|
|||
var div = $(this).parent().next(); |
|||
|
|||
if (div.is(":hidden")) { |
|||
$('div .replyForm').hide(); |
|||
div.show(); |
|||
} else { |
|||
div.hide(); |
|||
} |
|||
|
|||
}); |
|||
|
|||
})(jQuery); |
|||
|
|||
Loading…
Reference in new issue