Move into wp-content path
Signed-off-by: Adrian Nöthlich <git@promasu.tech>
This commit is contained in:
433
wp-content/themes/Pirate-Rogue/css/sass/elements/_slider.scss
Normal file
433
wp-content/themes/Pirate-Rogue/css/sass/elements/_slider.scss
Normal file
@@ -0,0 +1,433 @@
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* Featured Slider + Custom Header Image
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
.featured-content {
|
||||
.no-js & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
margin-bottom: 35px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-on.slider-boxed .featured-content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.headerimg-on {
|
||||
&.slider-on.slider-boxed .featured-content {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
&.header-boxed .header-image {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-on.slider-boxed .featured-slider {
|
||||
.entry-header,
|
||||
.entry-meta,
|
||||
.credits {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
article header {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.meta-main-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: 17px;
|
||||
}
|
||||
|
||||
.entry-author {
|
||||
display: none;
|
||||
}
|
||||
.entry-edit {
|
||||
margin-left: 20px;
|
||||
}
|
||||
button {
|
||||
&.slick-next {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 35px;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-indent: -99999px;
|
||||
}
|
||||
&.slick-prev {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 35px;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-indent: -99999px;
|
||||
left: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
&.slick-next {
|
||||
right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.entry-header,
|
||||
.entry-meta,
|
||||
.credits {
|
||||
padding-left: 5.3125%;
|
||||
/* 17px at 320px */
|
||||
padding-right: 5.3125%;
|
||||
/* 17px at 320px */
|
||||
}
|
||||
|
||||
.entry-edit,
|
||||
.entry-cats a:before {
|
||||
display: none;
|
||||
}
|
||||
.entry-date {
|
||||
padding-right: 20px;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.entry-thumbnail img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.credits {
|
||||
@include px2rem($font-size-small);
|
||||
color: $color-slider-credits;
|
||||
text-shadow: 1px 2px 2px black;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-initialized {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.slick-slide {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.section-one-column-one {
|
||||
.entry-author,
|
||||
.entry-date:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.slider-on.slider-boxed .featured-slider button {
|
||||
&.slick-prev {
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
&.slick-next {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-slider button {
|
||||
&.slick-prev:after,
|
||||
&.slick-next:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@extend .fa;
|
||||
text-indent: 0;
|
||||
color: $color-text;
|
||||
bottom: 13px;
|
||||
}
|
||||
&.slick-prev:after {
|
||||
left: 47%;
|
||||
content: $fa-var-chevron-left;
|
||||
}
|
||||
&.slick-next:after {
|
||||
right: 47%;
|
||||
content: $fa-var-chevron-right;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Fullscreen Slider and Header Image Option --- */
|
||||
|
||||
.slider-on.slider-fullscreen .featured-content,
|
||||
.headerimg-on.header-fullscreen .featured-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.home.blog {
|
||||
&.slider-on.slider-fullscreen #site-branding,
|
||||
&.headerimg-on.header-fullscreen #site-branding {
|
||||
background: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home.blog {
|
||||
&.slider-on.slider-fullscreen #site-branding {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slider-on.slider-boxed .featured-content {
|
||||
padding-left: 5.3125%;
|
||||
/* 17px at 320px */
|
||||
padding-right: 5.3125%;
|
||||
/* 17px at 320px */
|
||||
}
|
||||
|
||||
.featured-slider .entry-thumbnail a {
|
||||
width: 130%;
|
||||
}
|
||||
|
||||
.slider-on .front-section:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-600) {
|
||||
.featured-slider .entry-edit {
|
||||
display: inline-block;
|
||||
}
|
||||
.featured-slider .format-video .entry-thumbnail a:before {
|
||||
width: 60px;
|
||||
height: 42px;
|
||||
padding: 22px 0 0 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-sm) {
|
||||
.featured-slider {
|
||||
padding-bottom: 0;
|
||||
.entry-header h2.entry-title {
|
||||
@include px2rem($font-size-slider-title-sm);
|
||||
a {
|
||||
text-shadow: 1px 2px 2px black;
|
||||
|
||||
}
|
||||
}
|
||||
.credits {
|
||||
bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.meta-main-wrap {
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
button {
|
||||
&.slick-next,
|
||||
&.slick-prev {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
outline: 0;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
text-indent: -99999px;
|
||||
z-index: 1;
|
||||
background: rgba(26, 26, 26, 0.75);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
&.slick-next:focus,
|
||||
&.slick-next:hover {
|
||||
background: rgba(26, 26, 26, 1);
|
||||
}
|
||||
&.slick-prev {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: rgba(26, 26, 26, 1);
|
||||
}
|
||||
left: auto;
|
||||
right: 50px;
|
||||
border-right: none;
|
||||
}
|
||||
&.slick-next {
|
||||
right: 0;
|
||||
}
|
||||
&.slick-prev:after,
|
||||
&.slick-next:after {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
&.slick-prev:after {
|
||||
left: 13px;
|
||||
bottom: 13px;
|
||||
}
|
||||
&.slick-next:after {
|
||||
right: 13px;
|
||||
bottom: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slider-on.slider-boxed .featured-slider button {
|
||||
&.slick-prev,
|
||||
&.slick-next {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-on.slider-boxed .featured-slider {
|
||||
.entry-header, .entry-meta {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
.slider-on .featured-slider .entry-thumbnail a{
|
||||
max-height: 400px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $breakpoint-1024) {
|
||||
.featured-slider .entry-thumbnail a {
|
||||
width: 100%;
|
||||
}
|
||||
.slider-on .featured-slider .entry-thumbnail a{
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $breakpoint-1060) {
|
||||
.blog {
|
||||
&.slider-on #masthead {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.slider-on.slider-boxed #masthead {
|
||||
border-bottom: 1px solid #ddd !important;
|
||||
}
|
||||
|
||||
.featured-slider {
|
||||
article header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-header,
|
||||
.entry-meta,
|
||||
.credits {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 57.63888888888889%;
|
||||
/* -- 830px at 1440px ---*/
|
||||
margin-left: 6.25%;
|
||||
}
|
||||
|
||||
.entry-header h2.entry-title {
|
||||
@include px2rem($font-size-slider-title-1060);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.format-video .entry-thumbnail a:before {
|
||||
left: 6.25%;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.entry-date:before {
|
||||
content: ' / ';
|
||||
padding: 0 2px;
|
||||
display: inline-block;
|
||||
|
||||
.no-author & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.entry-author {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.slider-on.slider-boxed .featured-content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 6.25%;
|
||||
margin-right: 6.25%;
|
||||
padding-top: 30px;
|
||||
width: 87.5%;
|
||||
}
|
||||
|
||||
.slider-on.slider-boxed .featured-slider {
|
||||
.entry-header, .entry-meta {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@media screen and (min-width: 85em) {
|
||||
.featured-slider .entry-header h2.entry-title {
|
||||
@include px2rem($font-size-slider-title-lg);
|
||||
}
|
||||
.slider-on .featured-slider .entry-thumbnail a{
|
||||
max-height: 900px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 112.5em) {
|
||||
.slider-on.slider-boxed .featured-content {
|
||||
width: 70%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.featured-slider {
|
||||
.entry-header,
|
||||
.entry-meta,
|
||||
.credits {
|
||||
width: 70%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 137.5em) {
|
||||
.slider-on.slider-boxed .featured-content {
|
||||
width: 56%;
|
||||
}
|
||||
.featured-slider {
|
||||
.entry-header,
|
||||
.entry-meta,
|
||||
.credits {
|
||||
width: 56%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user