File: /var/www/html/wpkoopkj/wp-content/themes/ohio/assets/sass/components/portfolio/_project.scss
.project {
// Layout Type 1
&.-layout1 {
@include lg-screen {
.share-bar {
margin-left: $grid-spacer;
@include spacer(top);
@include spacer(left);
}
}
}
// Layout Type 2
&.-layout2 {
@include lg-screen {
.share-bar {
margin-right: $grid-spacer;
@include spacer(top);
@include spacer(right);
}
}
}
// Layout Type 3
&.-layout3 {
> .vc_row {
margin-right: 0;
}
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
left: calc(50% - (#{$grid-spacer} + #{$spacer}));
transform: translateX(-100%);
}
}
&.scroll-disabled {
.share-bar {
right: calc(#{$grid-spacer} + #{$spacer});
}
}
}
.project-content {
.holder {
@include md-screen {
padding-left: $grid-spacer;
padding-right: $grid-spacer;
}
@include lg-screen {
margin-right: calc(10vw + 7.4rem);
}
@include note-screen {
margin-right: calc(10vw - 2.8rem);
}
}
}
}
// Layout Type 4
&.-layout4 {
> .vc_row {
margin-left: 0;
}
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
right: calc(50% - (#{$grid-spacer} + #{$spacer}));
transform: translateX(100%);
}
}
&.scroll-disabled {
.share-bar {
left: calc(#{$grid-spacer} + #{$spacer});
}
}
}
.project-content {
.holder {
@include md-screen {
padding-left: $grid-spacer;
padding-right: $grid-spacer;
}
@include lg-screen {
margin-left: calc(10vw + 7.4rem);
}
@include note-screen {
margin-left: calc(10vw - 2.8rem);
}
}
}
}
// Layout Type 5
&.-layout5 {
.project-content {
@include spacer5x(padding-top);
@include spacer5x(padding-bottom);
@include md-screen {
.project-task {
margin-top: 0;
}
}
}
// Video Button
.video-button {
@include centered;
}
// Slider
.project-slider {
height: 75vh;
}
}
// Layout Type 6
&.-layout6 {
.project-content {
height: 100vh;
color: $color-white;
padding-top: $header-height;
.headline,
.title,
.button {
color: $color-white;
}
.options-group {
li {
border-top-color: rgba($color-white, 0.25);
}
}
.video-module {
min-height: 56px;
@include spacer2x(margin-bottom);
}
.page-container,
.vc_row {
height: 100%;
}
.vc_row {
padding-bottom: $header-height;
@include flex;
@include align-items(center);
}
}
}
// Layout Type 7
&.-layout7 {
.share-bar {
@include spacer(top);
@include spacer(left);
}
@include spacer6x(padding-bottom);
}
// Layout Type 8
&.-layout8 {
background-color: $color-black-light;
.project-content {
padding: $header-height 0;
@include sm-screen {
padding-top: 2rem;
}
.vc_row {
display: block;
}
}
.project-gallery {
top: 0;
right: 0;
bottom: 0;
width: 65vw;
position: absolute;
@include sm-screen {
width: 100%;
}
}
// Slider
.project-slider {
height: 100%;
}
.overlay {
background: linear-gradient(-90deg, rgba($color-black, 0), rgba($color-black, 0.5));
@include md-screen {
width: 50%;
}
}
.share-bar {
@include sm-screen {
margin-top: 2rem;
position: static;
@include flex;
}
@include md-screen {
bottom: 0 !important;
}
}
}
// Layout Type 9
&.-layout9 {
.holder {
height: 100vh;
position: relative;
@include flex;
@include align-items(center);
@include flex-just(center);
@include flex-direction(column);
&,
.headline {
color: $color-white;
}
}
.project-content {
@include spacer6x(padding-top);
@include spacer6x(padding-bottom);
@include md-screen {
.project-task {
margin-top: 0;
}
}
}
}
// Layout Type 1, 2, 3, 4
&.-layout1,
&.-layout2,
&.-layout3,
&.-layout4 {
@include md-screen {
.vc_row {
//@include flex;
}
}
@include tablet-screen {
.share-bar {
margin: 0;
position: absolute !important;
transform: none !important;
@include spacer(top);
}
}
}
// Layout Type 1, 3
&.-layout1,
&.-layout3 {
.holder {
@include md-screen {
padding-left: calc(3vw - 1rem);
}
}
@include tablet-screen {
.share-bar {
left: auto !important;
right: $grid-spacer !important;
}
}
}
// Layout Type 2, 4
&.-layout2,
&.-layout4 {
.holder {
@include md-screen {
padding-right: calc(3vw - 1rem);
}
}
@include sm-screen {
.vc_row {
@include flex;
@include flex-direction(column-reverse);
}
}
@include tablet-screen {
.share-bar {
right: auto !important;
left: $grid-spacer !important;
}
}
}
// Layout Type 3, 4
&.-layout3,
&.-layout4 {
.page-container {
max-width: 100%;
@include md-screen {
padding: 0;
}
@include sm-screen {
+ .vc_row {
margin: 0;
opacity: .2;
}
}
}
.project-gallery {
.share-bar {
@include spacer(bottom);
}
&:not(.scroll-disabled) {
@include md-screen {
.share-bar {
position: fixed;
z-index: 10;
}
}
}
}
@include sm-screen {
@include flex;
@include flex-direction(column-reverse);
}
}
// Layout Type 6, 8
&.-layout6,
&.-layout8 {
.options-group {
li {
p {
opacity: .75;
}
}
}
}
// Layout Type 6, 9
&.-layout6,
&.-layout9 {
// Slider
.project-slider {
height: 100vh;
width: 100%;
position: absolute;
}
}
}
// Spacing overrides
.single {
// With header spacer
&.with-spacer {
&.with-header-5 {
.-layout3 {
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
left: calc(50% + (#{$header-height-6}/2) - (#{$grid-spacer} + #{$spacer}));
}
}
@include tablet-screen-only {
&.vc_col-md-6 {
padding-left: $grid-spacer;
}
}
}
}
.-layout4 {
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
right: calc(50% - (#{$header-height-5}/2) - (#{$grid-spacer} + #{$spacer}));
}
}
}
}
}
&.with-header-6,
&.with-header-7 {
.-layout3 {
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
left: calc(50% + ((#{$header-height-6} - #{$grid-spacer})/2) - (#{$grid-spacer} + #{$spacer}));
}
}
&.vc_col-md-6 {
@include tablet-screen-only {
padding-left: $grid-spacer;
}
}
}
}
.-layout4 {
.project-gallery {
&:not(.scroll-disabled) {
.share-bar {
right: calc(50% - ((#{$header-height-6} + #{$grid-spacer} )/2) - (#{$grid-spacer} + #{$spacer}));
}
}
}
}
}
}
// Without header spacer
&:not(.with-spacer) {
&:not(.with-header-5):not(.with-header-6):not(.with-header-7) {
.project {
&.-layout1,
&.-layout3,
&.-layout4 {
@include md-screen {
.project-content {
margin-top: $header-height;
}
}
.share-bar {
margin-top: $header-height;
}
}
}
&:not(.with-headline) {
@include md-screen {
.project {
&.-layout2 {
margin-top: $header-height;
}
}
}
}
// Remove extra spacer with enabled Page Headline
.page-headline {
&,
+ .page-container {
+ .-layout1,
+ .-layout2,
+ .-layout3,
+ .-layout4 {
.project-content,
.share-bar {
margin-top: 0;
}
}
}
}
}
// Remove extra spacer with enabled Page Headline
.page-headline {
+ .-layout7,
+ .-layout3,
+ .-layout4 {
@include sm-screen {
padding-top: 0;
}
}
}
.-layout7,
.-layout8 {
padding-top: $header-height;
}
.-layout8 {
.project-gallery {
top: $header-height;
}
}
}
}
// old version fallback (previously rebuild all the mobile values in all the projects)
@include sm-screen {
.single-ohio_portfolio {
.project-title {
.headline {
font-size: 2.65rem !important;
}
}
}
}