Roman_applicant-site/public/scssold/layout/_blog.scss

661 lines
15 KiB
SCSS

@use '../utils' as *;
/*----------------------------------------*/
/* 17. BLOG CSS
/*----------------------------------------*/
// postbox css start
.tp-blog {
&__item {
margin-bottom: 20px;
background-color: var(--tp-common-white);
@include transition(.3s);
&:hover{
box-shadow: 0px 30px 50px 0px rgba(3, 27, 40, 0.1);
& .tp-blog__content {
border-color: transparent;
}
}
@media #{$xs} {
border-radius: 10px;
}
}
&__content {
padding: 35.5px 25px;
border: 2px solid;
border-color: #e5e7e8;
border-left: 0;
@include transition(.3s);
@media #{$xs,$sm} {
padding-top: 30px;
padding-bottom: 30px;
border: 0;
box-shadow: 0px 30px 50px 0px rgba(3, 27, 40, 0.1);
border-radius: 10px;
}
}
&__thub{
@media #{$xs,$sm} {
& img {
width: 100%;
border-radius: 10px;
}
}
}
&__title{
margin-bottom: 25px;
& a {
&:hover{
color: var(--tp-theme-primary);
}
}
}
&__meta {
margin-bottom: 10px;
& span {
margin-right: 10px;
& i {
margin-right: 5px;
}
}
}
}
.postbox {
&__wrapper {
@media #{$xs,$sm,$md} {
padding-right: 0;
margin-bottom: 60px;
}
}
&__thumb {
& .play-btn {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
z-index: 1;
}
}
&__audio {
height: 455px;
width: 100%;
& iframe {
width: 100%;
height: 100%;
border: none;
}
}
&__item {
&-single {
&:hover {
@include box-shadow(none);
}
}
}
&__content {
padding: 40px 0;
@media #{$xs} {
padding-left: 20px;
padding-right: 20px;
}
&-single {
padding-left: 0;
padding-right: 0;
border: none;
}
}
&__title {
font-size: 38px;
margin-bottom: 20px;
@media #{$lg} {
font-size: 28px;
}
@media #{$md} {
font-size: 33px;
}
@media #{$sm} {
font-size: 30px;
}
@media #{$xs} {
font-size: 25px;
}
& a {
&:hover {
color: var(--tp-theme-primary);
}
}
}
&__meta {
margin-bottom: 5px;
& span {
font-size: 14px;
font-weight: 600;
// color: var(--tp-common-black);
text-transform: uppercase;
display: inline-block;
margin-right: 30px;
&:last-child {
margin-right: 0;
}
& i {
color: var(--tp-theme-primary);
margin-right: 3px;
}
}
}
&__text {
& img {
max-width: 100%;
}
& p {
margin-bottom: 28px;
}
&-single {
& p {
margin-bottom: 15px;
}
}
}
&__slider {
& button {
position: absolute;
left: 50px;
top: 50%;
@include transform(translateY(-50%));
z-index: 1;
font-size: 30px;
color: var(--tp-common-white);
&.postbox-slider-button-next {
left: auto;
right: 50px;
@media #{$xs} {
right: 10px;
}
}
@media #{$xs} {
left: 10px;
}
}
}
&__comment {
& ul {
& li {
margin-bottom: 10px;
list-style: none;
&.children {
margin-left: 100px;
@media #{$xs} {
margin-left: 15px;
}
}
}
}
&-form {
margin-bottom: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .09);
background: var(--tp-common-white);
&-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 40px;
}
}
&-input {
position: relative;
margin-bottom: 20px;
& span {
font-weight: 600;
color: var(--tp-common-black);
margin-bottom: 12px;
display: block;
}
& input,
& textarea {
height: 55px;
padding: 0 20px;
width: 100%;
font-size: 14px;
color: var(--tp-common-black);
outline: none;
border: 1px solid transparent;
@include border-radius(7px);
background: #f7f7f7;
}
& textarea {
height: 175px;
resize: none;
padding-top: 20px;
padding-bottom: 20px;
@include tp-placeholder{
color: var(--tp-text-3);
}
}
}
&-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 20px;
}
&-box {
padding: 30px;
padding-right: 40px;
padding-top: 25px;
@include border-radius(4px);
}
&-avater {
& img {
width: 50px;
height: 50px;
@include border-radius(50%);
}
}
&-name {
margin-bottom: 5px;
& h5 {
font-size: 16px;
line-height: 1;
margin-bottom: 0;
}
& span {
font-size: 14px;
color: var(--tp-text-1);
}
}
&-text {
@media #{$xs} {
margin-left: 0;
margin-top: 15px;
}
& p {
font-size: 16px;
color: var(--tp-text-11);
margin-bottom: 15px;
}
}
&-reply {
margin-top: 10px;
& a {
display: inline-block;
color: var(--tp-theme-primary);
background: rgba(61, 108, 231, 0.1);
height: 22px;
line-height: 22px;
padding: 0 10px;
font-weight: 500;
font-size: 14px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
&:hover {
color: var(--tp-common-white);
background: var(--tp-theme-primary);
}
}
}
&-agree {
padding-left: 5px;
& input {
margin: 0;
appearance: none;
-moz-appearance: none;
display: block;
width: 14px;
height: 14px;
background: var(--tp-common-white);
border: 1px solid #b9bac1;
outline: none;
@include border-radius(4px);
flex: 0 0 auto;
@include transform(translateY(-1px));
&:checked {
position: relative;
background-color: var(--tp-theme-primary);
border-color: transparent;
&::after {
box-sizing: border-box;
content: '\f00c';
position: absolute;
font-family: var(--tp-ff-fontawesome);
font-size: 10px;
color: var(--tp-common-white);
top: 46%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
&:hover {
cursor: pointer;
}
}
& label {
padding-left: 8px;
color: var(--tp-text-1);
line-height: 1;
& a {
color: var(--tp-common-black);
font-weight: 600;
padding-left: 4px;
&:hover {
color: var(--tp-theme-primary);
}
}
&:hover {
cursor: pointer;
}
}
}
}
&__tag {
& span {
font-size: 16px;
margin-bottom: 17px;
color: var(--tp-common-black);
margin-right: 10px;
}
}
}
// recent post css start
.rc {
&__post {
& ul {
& li {
&:not(:last-child) {
margin-bottom: 15px;
}
}
}
&-thumb {
& img {
width: 80px;
height: 80px;
object-fit: cover;
}
}
&-title {
margin-bottom: 6px;
font-size: 17px;
& a {
&:hover {
color: var(--tp-theme-primary);
}
}
}
}
&__meta {
& span {
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
}
}
}
// sidebar css start
.sidebar {
&__widget {
padding: 30px;
background: var(--tp-grey-2);
&-title {
position: relative;
display: inline-block;
font-size: 20px;
margin-bottom: 30px;
font-weight: 600;
text-transform: capitalize;
}
& ul {
& li {
list-style: none;
padding-left: 19px;
margin-bottom: 25px;
line-height: 1;
&:last-child {
margin-bottom: 0;
}
a {
font-size: 16px;
color: var(--tp-common-black);
position: relative;
&::after {
position: absolute;
content: '\f105';
left: -19px;
top: 50%;
@include transform(translateY(-50%));
color: var(--tp-common-black);
font-family: var(--tp-ff-fontawesome);
font-size: 16px;
@include transition(.3s);
}
&:hover {
color: var(--tp-theme-primary);
&::after {
color: var(--tp-theme-primary);
left: -14px;
}
}
}
& span {
float: right;
}
& ul {
padding-left: 25px;
padding-top: 20px;
}
}
}
}
&__search {
position: relative;
& input {
width: 100%;
height: 60px;
line-height: 60px;
background-color: var(--tp-common-white);
padding: 0 25px;
text-transform: capitalize;
border: 1px solid var(--tp-grey-1);
outline: none;
padding-top: 3px;
padding-right: 80px;
&:focus{
border-color: var(--tp-theme-primary);
}
}
& button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 0 24px;
color: #fff;
line-height: 60px;
background: var(--tp-theme-primary);
}
}
&__banner {
&::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba($color: #000, $alpha: .5);
}
&-content {
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
z-index: 1;
background: var(--tp-common-white);
& h4 {
padding: 15px 20px;
font-size: 24px;
color: var(--tp-common-black);
text-transform: uppercase;
margin-bottom: 0;
}
}
}
}
// tagcloud css start
.tagcloud {
& a {
background: var(--tp-common-white);
color: var(--tp-common-black);
display: inline-block;
font-size: 13px;
line-height: 1;
padding: 8px 21px;
padding-bottom: 8px;
margin-bottom: 8px;
margin-right: 5px;
text-transform: uppercase;
border: 0;
&:hover {
background: var(--tp-common-black);
color: var(--tp-common-white);
}
}
}
// blockquote css start
blockquote {
background: var(--tp-grey-1);
padding: 35px 50px;
margin-bottom: 35px;
@media #{$xs} {
padding-left: 15px;
padding-right: 15px;
}
& p {
line-height: 1.5;
font-size: 20px;
color: #57565e;
font-weight: 400;
}
& cite {
font-size: 18px;
display: block;
margin-top: 10px;
color: #070337;
font-style: inherit;
font-weight: 600;
position: relative;
&::before {
content: "";
font-size: 28px;
color: var(--tp-theme-primary);
padding-bottom: 0px;
display: inline-block;
background: var(--tp-theme-primary);
height: 2px;
width: 40px;
font-weight: 400;
text-align: center;
top: -4px;
margin-right: 10px;
position: relative;
}
}
}
.sidebar__wrapper{
@media #{$xs,$sm,$md} {
padding-left: 0;
}
}