This commit is contained in:
2024-05-20 15:37:46 +03:00
commit 00b7dbd0b7
10404 changed files with 3285853 additions and 0 deletions

View File

@ -0,0 +1,14 @@
/**
* Errors CSS Variables
*/
.vp-error {
--vp-error_margin-b: 1em;
--vp-error__padding-v: 1em;
--vp-error__padding-h: 1.3em;
--vp-error__color: var(--vp-color-red);
--vp-error__background-color: var(--vp-color-gray-lighten);
--vp-error__border-width: 1px;
--vp-error__border-left-width: 3px;
--vp-error__border-color: var(--vp-color-red);
--vp-error__border-radius: var(--vp-border-radius);
}

View File

@ -0,0 +1,17 @@
<?php
/**
* Errors template.
*
* @var $args
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="vp-error">
<?php echo esc_html( $args['error'] ); ?>
</div>

View File

@ -0,0 +1 @@
.vp-error{--vp-error_margin-b:1em;--vp-error__padding-v:1em;--vp-error__padding-h:1.3em;--vp-error__color:var(--vp-color-red);--vp-error__background-color:var(--vp-color-gray-lighten);--vp-error__border-width:1px;--vp-error__border-left-width:3px;--vp-error__border-color:var(--vp-color-red);--vp-error__border-radius:var(--vp-border-radius);background-color:var(--vp-error__background-color);border:var(--vp-error__border-width) solid var(--vp-error__border-color);border-right-width:var(--vp-error__border-left-width);border-radius:var(--vp-error__border-radius);color:var(--vp-error__color);margin-bottom:var(--vp-error_margin-b);padding:var(--vp-error__padding-v) var(--vp-error__padding-h)}

View File

@ -0,0 +1 @@
.vp-error{--vp-error_margin-b:1em;--vp-error__padding-v:1em;--vp-error__padding-h:1.3em;--vp-error__color:var(--vp-color-red);--vp-error__background-color:var(--vp-color-gray-lighten);--vp-error__border-width:1px;--vp-error__border-left-width:3px;--vp-error__border-color:var(--vp-color-red);--vp-error__border-radius:var(--vp-border-radius);background-color:var(--vp-error__background-color);border:var(--vp-error__border-width) solid var(--vp-error__border-color);border-left-width:var(--vp-error__border-left-width);border-radius:var(--vp-error__border-radius);color:var(--vp-error__color);margin-bottom:var(--vp-error_margin-b);padding:var(--vp-error__padding-v) var(--vp-error__padding-h)}

View File

@ -0,0 +1,14 @@
@import "./variables";
/**
* Errors style
*/
.vp-error {
padding: var(--vp-error__padding-v) var(--vp-error__padding-h);
margin-bottom: var(--vp-error_margin-b);
color: var(--vp-error__color);
background-color: var(--vp-error__background-color);
border: var(--vp-error__border-width) solid var(--vp-error__border-color);
border-left-width: var(--vp-error__border-left-width);
border-radius: var(--vp-error__border-radius);
}

View File

@ -0,0 +1,21 @@
<?php
/**
* Link end template.
*
* @var $href
* @var $target
* @var $class
* @var $fallback
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( isset( $href ) && $href ) {
echo '</a>';
} elseif ( isset( $fallback ) && $fallback ) {
echo '</' . esc_html( $fallback ) . '>';
}

View File

@ -0,0 +1,51 @@
<?php
/**
* Link start template.
*
* @var $href
* @var $target
* @var $rel
* @var $tabindex
* @var $class
* @var $fallback
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( isset( $href ) && $href ) {
?>
<a
href="<?php echo esc_url( $href ); ?>"
<?php
if ( isset( $target ) && $target ) {
echo 'target="' . esc_attr( $target ) . '" ';
}
if ( isset( $rel ) && $rel ) {
echo 'rel="' . esc_attr( $rel ) . '" ';
}
if ( isset( $tabindex ) && $tabindex ) {
echo 'tabindex="' . esc_attr( $tabindex ) . '" ';
}
if ( isset( $class ) && $class ) {
echo 'class="' . esc_attr( $class ) . '" ';
}
?>
>
<?php
} elseif ( isset( $fallback ) && $fallback ) {
?>
<<?php echo esc_html( $fallback ); ?>
<?php
if ( isset( $class ) && $class ) {
echo ' class="' . esc_attr( $class ) . '" ';
}
?>
>
<?php
}

View File

@ -0,0 +1,16 @@
<?php
/**
* Angle left icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,16 @@
<?php
/**
* Angle right icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 4L14 10L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Arrow left icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 10H3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M9 4L3 10L9 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Arrow right icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M11 4L17 10L11 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Book icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.60001 16.8823C2.60001 16.3207 2.84403 15.7821 3.2784 15.3849C3.71277 14.9878 4.30189 14.7647 4.91618 14.7647H17.4235" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M4.91618 1H17.4235V19H4.91618C4.30189 19 3.71277 18.7629 3.2784 18.341C2.84403 17.919 2.60001 17.3467 2.60001 16.75V3.25C2.60001 2.65326 2.84403 2.08097 3.2784 1.65901C3.71277 1.23705 4.30189 1 4.91618 1V1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,18 @@
<?php
/**
* Calendar icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="3.5" width="18" height="15.5" rx="3" stroke="currentColor" stroke-width="1.5" fill="transparent" />
<path d="M6 5V1M14 5V1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M18.5 9H1.5" stroke="currentColor" stroke-width="1.5" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Eye icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="2.5" fill="currentColor" />
<path d="M1 10C1 10 4.27273 3 10 3C15.7273 3 19 10 19 10C19 10 15.7273 17 10 17C4.27273 17 1 10 1 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Gallery icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0428 14.3315V1.71123C16.0428 0.748663 15.2941 0 14.3315 0H1.71123C0.748663 0 0 0.748663 0 1.71123V14.3315C0 15.2941 0.748663 16.0428 1.71123 16.0428H14.3315C15.2941 16.0428 16.0428 15.2941 16.0428 14.3315ZM1.60428 1.71123C1.60428 1.60428 1.71123 1.60428 1.71123 1.60428H14.3315C14.4385 1.60428 14.4385 1.71123 14.4385 1.71123V9.62567L11.9786 7.80749C11.6578 7.59358 11.3369 7.59358 11.016 7.80749L7.91444 10.0535L5.34759 8.87701C5.13369 8.77005 4.81283 8.77005 4.59893 8.87701L1.49733 10.4813V1.71123H1.60428ZM1.60428 14.3315V12.4064L5.02674 10.5882L7.59358 11.8717C7.80749 11.9786 8.12834 11.9786 8.4492 11.7647L11.4438 9.62567L14.4385 11.7647V14.4385C14.4385 14.5455 14.3315 14.5455 14.3315 14.5455H1.71123C1.71123 14.4385 1.60428 14.3315 1.60428 14.3315Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 5.75C19.6642 5.75 20 6.08579 20 6.5C20 6.91421 20 17.25 20 17.25C20 18.7688 18.7688 20 17.25 20H4.27C3.85579 20 3.52 19.6642 3.52 19.25C3.52 18.8358 3.85579 18.5 4.27 18.5H17.25C17.9404 18.5 18.5 17.9404 18.5 17.25C18.5 17.25 18.5 6.91421 18.5 6.5C18.5 6.08579 18.8358 5.75 19.25 5.75Z" fill="currentColor" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Image icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" y="0.75" width="18.5" height="18.5" rx="1.25" stroke="currentColor" stroke-width="1.5" fill="transparent"/>
<path d="M1 15.5L6 12L10 14L14.5 10L19 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/>
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Message icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 15V15C2.34315 15 1 13.6569 1 12V4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V12C19 13.6569 17.6569 15 16 15H11.5" stroke="currentColor" stroke-width="1.5" fill="transparent" />
<path d="M3.5 15H5.20001V19L9.5 15H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,18 @@
<?php
/**
* Music icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 16V3L19 1V14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M4 19C5.65685 19 7 17.6569 7 16C7 14.3431 5.65685 13 4 13C2.34315 13 1 14.3431 1 16C1 17.6569 2.34315 19 4 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M16 17C17.6569 17 19 15.6569 19 14C19 12.3431 17.6569 11 16 11C14.3431 11 13 12.3431 13 14C13 15.6569 14.3431 17 16 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,16 @@
<?php
/**
* Play icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.0148 9.60849L18.0156 9.60899C18.0933 9.65614 18.1527 9.71825 18.192 9.78626C18.231 9.85396 18.25 9.9269 18.25 9.99878C18.25 10.0707 18.231 10.1436 18.192 10.2113C18.1527 10.2793 18.0933 10.3414 18.0156 10.3886L18.0147 10.3891L3.60097 19.1652C3.60095 19.1652 3.60092 19.1652 3.6009 19.1653C3.5176 19.2159 3.41818 19.2461 3.31321 19.2497C3.2082 19.2532 3.10598 19.2297 3.01788 19.1842C2.93 19.1388 2.86196 19.0746 2.81681 19.0027C2.77201 18.9313 2.75023 18.8534 2.75 18.7768V18.7752V1.22319C2.75023 1.14655 2.77201 1.06867 2.81681 0.99731C2.86196 0.925405 2.93 0.86122 3.01788 0.815814C3.10597 0.770298 3.20819 0.746811 3.31321 0.750348C3.41815 0.753884 3.51754 0.78411 3.60081 0.834682C3.60086 0.834714 3.60092 0.834746 3.60097 0.834778L18.0148 9.60849Z" stroke="currentColor" stroke-width="1.5" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* Search icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
<path d="M19 19L14.65 14.65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,17 @@
<?php
/**
* User icon.
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<svg class="vp-svg-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="transparent" />
<path d="M2 18.5C2.55106 14.3854 5.84867 11.5 10 11.5C14.1513 11.5 17.4489 14.3854 18 18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" />
</svg>

View File

@ -0,0 +1,31 @@
/**
* Filter Default CSS Variables
*/
.vp-filter__style-default {
// Items.
--vp-filter-default--items__gap: 10px;
--vp-filter-default--items__min-width: 40px;
--vp-filter-default--items__padding-v: 0.7em;
--vp-filter-default--items__padding-h: 1.3em;
--vp-filter-default--items__font-size: 0.9em;
--vp-filter-default--items__font-weight: 600;
--vp-filter-default--items__line-height: 1.4;
--vp-filter-default--items__text-decoration: none;
--vp-filter-default--items__text-transform: uppercase;
--vp-filter-default--items__letter-spacing: 0.015em;
--vp-filter-default--items__color: var(--vp-color-gray);
--vp-filter-default--items__background-color: var(--vp-color-gray-lighten);
--vp-filter-default--items__border-radius: var(--vp-border-radius);
--vp-filter-default--items-hover__color: var(--vp-color-gray-darken);
--vp-filter-default--items-hover__background-color: var(--vp-color-gray-light);
--vp-filter-default--items-active__color: #fff;
--vp-filter-default--items-active__background-color: var(--vp-color-brand);
// Items Count.
--vp-filter-default--items-count__offset: 8px;
--vp-filter-default--items-count__font-size: 0.6em;
// Transitions.
--vp-filter-default-transition-duration: var(--vp-interactive__transition-duration);
--vp-filter-default-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,29 @@
/**
* Filter Dropdown CSS Variables
*/
.vp-filter__style-dropdown {
// Items.
--vp-filter-dropdown--items__gap: 6px;
--vp-filter-dropdown--items__min-width: 40px;
--vp-filter-dropdown--items__padding-v: 0.7em;
--vp-filter-dropdown--items__padding-h: 1.3em;
--vp-filter-dropdown--items__padding-right: 0.75em;
--vp-filter-dropdown--items__font-size: 0.9em;
--vp-filter-dropdown--items__font-weight: 600;
--vp-filter-dropdown--items__line-height: 1.4;
--vp-filter-dropdown--items__text-decoration: none;
--vp-filter-dropdown--items__text-transform: uppercase;
--vp-filter-dropdown--items__letter-spacing: 0.015em;
--vp-filter-dropdown--items__height: auto;
--vp-filter-dropdown--items__color: var(--vp-color-gray);
--vp-filter-dropdown--items__background-color: var(--vp-color-gray-lighten);
--vp-filter-dropdown--items__border-radius: var(--vp-border-radius);
--vp-filter-dropdown--items__arrow: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
--vp-filter-dropdown--items__arrow-size: 0.6em;
--vp-filter-dropdown--items-hover__color: var(--vp-color-gray-darken);
--vp-filter-dropdown--items-hover__background-color: var(--vp-color-gray-light);
// Transitions.
--vp-filter-dropdown-transition-duration: var(--vp-interactive__transition-duration);
--vp-filter-dropdown-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,38 @@
<?php
/**
* Dropdown filter template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-filter__style-dropdown">
<select>
<?php
foreach ( $args['items'] as $item ) {
?>
<option class="<?php echo esc_attr( $item['class'] ); ?>" data-vp-url="<?php echo esc_url( $item['url'] ); ?>" data-vp-filter="<?php echo esc_attr( $item['filter'] ); ?>" value="<?php echo esc_attr( $item['filter'] ); ?>" <?php selected( $item['active'] ); ?>>
<?php echo esc_html( $item['label'] ); ?>
<?php
if ( $args['show_count'] && $item['count'] ) {
?>
(<?php echo esc_html( $item['count'] ); ?>)
<?php
}
?>
</option>
<?php
}
?>
</select>
</div>

View File

@ -0,0 +1 @@
.vp-filter__style-dropdown{--vp-filter-dropdown--items__gap:6px;--vp-filter-dropdown--items__min-width:40px;--vp-filter-dropdown--items__padding-v:0.7em;--vp-filter-dropdown--items__padding-h:1.3em;--vp-filter-dropdown--items__padding-right:0.75em;--vp-filter-dropdown--items__font-size:0.9em;--vp-filter-dropdown--items__font-weight:600;--vp-filter-dropdown--items__line-height:1.4;--vp-filter-dropdown--items__text-decoration:none;--vp-filter-dropdown--items__text-transform:uppercase;--vp-filter-dropdown--items__letter-spacing:0.015em;--vp-filter-dropdown--items__height:auto;--vp-filter-dropdown--items__color:var(--vp-color-gray);--vp-filter-dropdown--items__background-color:var(--vp-color-gray-lighten);--vp-filter-dropdown--items__border-radius:var(--vp-border-radius);--vp-filter-dropdown--items__arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");--vp-filter-dropdown--items__arrow-size:0.6em;--vp-filter-dropdown--items-hover__color:var(--vp-color-gray-darken);--vp-filter-dropdown--items-hover__background-color:var(--vp-color-gray-light);--vp-filter-dropdown-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-dropdown-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-filter-dropdown--items__gap)}.vp-filter__style-dropdown select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--vp-filter-dropdown--items__background-color);background-image:var(--vp-filter-dropdown--items__arrow);background-position:left var(--vp-filter-dropdown--items__padding-right) center;background-repeat:no-repeat;background-size:var(--vp-filter-dropdown--items__arrow-size);border:none;border-radius:var(--vp-filter-dropdown--items__border-radius);color:var(--vp-filter-dropdown--items__color);display:block;flex:0 0 auto;font-size:var(--vp-filter-dropdown--items__font-size);font-weight:var(--vp-filter-dropdown--items__font-weight);height:var(--vp-filter-dropdown--items__height);letter-spacing:var(--vp-filter-dropdown--items__letter-spacing);line-height:var(--vp-filter-dropdown--items__line-height);max-width:100%;min-width:var(--vp-filter-dropdown--items__min-width);padding:var(--vp-filter-dropdown--items__padding-v) var(--vp-filter-dropdown--items__padding-h);padding-left:calc(var(--vp-filter-dropdown--items__padding-right) + var(--vp-filter-dropdown--items__arrow-size));-webkit-text-decoration:var(--vp-filter-dropdown--items__text-decoration);text-decoration:var(--vp-filter-dropdown--items__text-decoration);text-transform:var(--vp-filter-dropdown--items__text-transform);transition:var(--vp-filter-dropdown-transition-duration) background-color var(--vp-filter-dropdown-transition-easing),var(--vp-filter-dropdown-transition-duration) color var(--vp-filter-dropdown-transition-easing)}.vp-filter__style-dropdown select:focus,.vp-filter__style-dropdown select:hover{background-color:var(--vp-filter-dropdown--items-hover__background-color);color:var(--vp-filter-dropdown--items-hover__color)}

View File

@ -0,0 +1 @@
.vp-filter__style-dropdown{--vp-filter-dropdown--items__gap:6px;--vp-filter-dropdown--items__min-width:40px;--vp-filter-dropdown--items__padding-v:0.7em;--vp-filter-dropdown--items__padding-h:1.3em;--vp-filter-dropdown--items__padding-right:0.75em;--vp-filter-dropdown--items__font-size:0.9em;--vp-filter-dropdown--items__font-weight:600;--vp-filter-dropdown--items__line-height:1.4;--vp-filter-dropdown--items__text-decoration:none;--vp-filter-dropdown--items__text-transform:uppercase;--vp-filter-dropdown--items__letter-spacing:0.015em;--vp-filter-dropdown--items__height:auto;--vp-filter-dropdown--items__color:var(--vp-color-gray);--vp-filter-dropdown--items__background-color:var(--vp-color-gray-lighten);--vp-filter-dropdown--items__border-radius:var(--vp-border-radius);--vp-filter-dropdown--items__arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");--vp-filter-dropdown--items__arrow-size:0.6em;--vp-filter-dropdown--items-hover__color:var(--vp-color-gray-darken);--vp-filter-dropdown--items-hover__background-color:var(--vp-color-gray-light);--vp-filter-dropdown-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-dropdown-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-filter-dropdown--items__gap)}.vp-filter__style-dropdown select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--vp-filter-dropdown--items__background-color);background-image:var(--vp-filter-dropdown--items__arrow);background-position:right var(--vp-filter-dropdown--items__padding-right) center;background-repeat:no-repeat;background-size:var(--vp-filter-dropdown--items__arrow-size);border:none;border-radius:var(--vp-filter-dropdown--items__border-radius);color:var(--vp-filter-dropdown--items__color);display:block;flex:0 0 auto;font-size:var(--vp-filter-dropdown--items__font-size);font-weight:var(--vp-filter-dropdown--items__font-weight);height:var(--vp-filter-dropdown--items__height);letter-spacing:var(--vp-filter-dropdown--items__letter-spacing);line-height:var(--vp-filter-dropdown--items__line-height);max-width:100%;min-width:var(--vp-filter-dropdown--items__min-width);padding:var(--vp-filter-dropdown--items__padding-v) var(--vp-filter-dropdown--items__padding-h);padding-right:calc(var(--vp-filter-dropdown--items__padding-right) + var(--vp-filter-dropdown--items__arrow-size));-webkit-text-decoration:var(--vp-filter-dropdown--items__text-decoration);text-decoration:var(--vp-filter-dropdown--items__text-decoration);text-transform:var(--vp-filter-dropdown--items__text-transform);transition:var(--vp-filter-dropdown-transition-duration) background-color var(--vp-filter-dropdown-transition-easing),var(--vp-filter-dropdown-transition-duration) color var(--vp-filter-dropdown-transition-easing)}.vp-filter__style-dropdown select:focus,.vp-filter__style-dropdown select:hover{background-color:var(--vp-filter-dropdown--items-hover__background-color);color:var(--vp-filter-dropdown--items-hover__color)}

View File

@ -0,0 +1,42 @@
@import "./variables";
/**
* Dropdown filter style
*/
.vp-filter__style-dropdown {
display: flex;
flex-wrap: wrap;
gap: var(--vp-filter-dropdown--items__gap);
select {
display: block;
flex: 0 0 auto;
min-width: var(--vp-filter-dropdown--items__min-width);
max-width: 100%;
height: var(--vp-filter-dropdown--items__height);
padding: var(--vp-filter-dropdown--items__padding-v) var(--vp-filter-dropdown--items__padding-h);
padding-right: calc(var(--vp-filter-dropdown--items__padding-right) + var(--vp-filter-dropdown--items__arrow-size));
font-size: var(--vp-filter-dropdown--items__font-size);
font-weight: var(--vp-filter-dropdown--items__font-weight);
line-height: var(--vp-filter-dropdown--items__line-height);
color: var(--vp-filter-dropdown--items__color);
text-decoration: var(--vp-filter-dropdown--items__text-decoration);
text-transform: var(--vp-filter-dropdown--items__text-transform);
letter-spacing: var(--vp-filter-dropdown--items__letter-spacing);
background-color: var(--vp-filter-dropdown--items__background-color);
background-image: var(--vp-filter-dropdown--items__arrow);
background-repeat: no-repeat;
background-position: right var(--vp-filter-dropdown--items__padding-right) center;
background-size: var(--vp-filter-dropdown--items__arrow-size);
border: none;
border-radius: var(--vp-filter-dropdown--items__border-radius);
transition: var(--vp-filter-dropdown-transition-duration) background-color var(--vp-filter-dropdown-transition-easing), var(--vp-filter-dropdown-transition-duration) color var(--vp-filter-dropdown-transition-easing);
appearance: none;
&:hover,
&:focus {
color: var(--vp-filter-dropdown--items-hover__color);
background-color: var(--vp-filter-dropdown--items-hover__background-color);
}
}
}

View File

@ -0,0 +1,40 @@
<?php
/**
* Default filter template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-filter__style-default">
<?php
foreach ( $args['items'] as $item ) {
?>
<div class="<?php echo esc_attr( $item['class'] ); ?>">
<a href="<?php echo esc_url( $item['url'] ); ?>" data-vp-filter="<?php echo esc_attr( $item['filter'] ); ?>">
<?php echo esc_html( $item['label'] ); ?>
<?php
if ( $args['show_count'] && $item['count'] ) {
?>
<span class="vp-filter__item-count">
<?php echo esc_html( $item['count'] ); ?>
</span>
<?php
}
?>
</a>
</div>
<?php
}
?>
</div>

View File

@ -0,0 +1,25 @@
/**
* Filter Minimal CSS Variables
*/
.vp-filter__style-minimal {
// Items.
--vp-filter-minimal--items__padding-v: 0.7em;
--vp-filter-minimal--items__padding-h: 1em;
--vp-filter-minimal--items__font-size: 0.9em;
--vp-filter-minimal--items__font-weight: 600;
--vp-filter-minimal--items__line-height: 1.4;
--vp-filter-minimal--items__text-decoration: none;
--vp-filter-minimal--items__text-transform: uppercase;
--vp-filter-minimal--items__letter-spacing: 0.015em;
--vp-filter-minimal--items__color: inherit;
--vp-filter-minimal--items-hover__color: var(--vp-color-brand);
--vp-filter-minimal--items-active__color: var(--vp-color-brand);
// Items Count.
--vp-filter-minimal--items-count__offset: 8px;
--vp-filter-minimal--items-count__font-size: 0.6em;
// Transitions.
--vp-filter-minimal-transition-duration: var(--vp-interactive__transition-duration);
--vp-filter-minimal-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,40 @@
<?php
/**
* Minimal filter template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-filter__style-minimal">
<?php
foreach ( $args['items'] as $item ) {
?>
<div class="<?php echo esc_attr( $item['class'] ); ?>">
<a href="<?php echo esc_url( $item['url'] ); ?>" data-vp-filter="<?php echo esc_attr( $item['filter'] ); ?>">
<?php echo esc_html( $item['label'] ); ?>
<?php
if ( $args['show_count'] && $item['count'] ) {
?>
<span class="vp-filter__item-count">
<?php echo esc_html( $item['count'] ); ?>
</span>
<?php
}
?>
</a>
</div>
<?php
}
?>
</div>

View File

@ -0,0 +1 @@
.vp-filter__style-minimal{--vp-filter-minimal--items__padding-v:0.7em;--vp-filter-minimal--items__padding-h:1em;--vp-filter-minimal--items__font-size:0.9em;--vp-filter-minimal--items__font-weight:600;--vp-filter-minimal--items__line-height:1.4;--vp-filter-minimal--items__text-decoration:none;--vp-filter-minimal--items__text-transform:uppercase;--vp-filter-minimal--items__letter-spacing:0.015em;--vp-filter-minimal--items__color:inherit;--vp-filter-minimal--items-hover__color:var(--vp-color-brand);--vp-filter-minimal--items-active__color:var(--vp-color-brand);--vp-filter-minimal--items-count__offset:8px;--vp-filter-minimal--items-count__font-size:0.6em;--vp-filter-minimal-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-minimal-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap}.vp-filter__style-minimal .vp-filter__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-filter__style-minimal{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-filter__style-minimal{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-filter__style-minimal{justify-content:flex-end}.vp-filter__style-minimal .vp-filter__item{flex:0 0 auto;text-align:center}.vp-filter__style-minimal .vp-filter__item>*{color:var(--vp-filter-minimal--items__color);display:block;font-size:var(--vp-filter-minimal--items__font-size);font-weight:var(--vp-filter-minimal--items__font-weight);letter-spacing:var(--vp-filter-minimal--items__letter-spacing);line-height:var(--vp-filter-minimal--items__line-height);padding:var(--vp-filter-minimal--items__padding-v) var(--vp-filter-minimal--items__padding-h);-webkit-text-decoration:var(--vp-filter-minimal--items__text-decoration);text-decoration:var(--vp-filter-minimal--items__text-decoration);text-transform:var(--vp-filter-minimal--items__text-transform);transition:var(--vp-filter-minimal-transition-duration) color var(--vp-filter-minimal-transition-easing)}.vp-filter__style-minimal .vp-filter__item>a:focus,.vp-filter__style-minimal .vp-filter__item>a:hover{color:var(--vp-filter-minimal--items-hover__color)}.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active{--vp-filter-minimal--items__color:var(--vp-filter-minimal--items-active__color);--vp-filter-minimal--items-hover__color:var(--vp-filter-minimal--items-active__color)}.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active>*{cursor:default}.vp-filter__style-minimal .vp-filter__item .vp-filter__item-count{float:left;font-size:var(--vp-filter-minimal--items-count__font-size);margin-right:var(--vp-filter-minimal--items-count__offset)}

View File

@ -0,0 +1 @@
.vp-filter__style-minimal{--vp-filter-minimal--items__padding-v:0.7em;--vp-filter-minimal--items__padding-h:1em;--vp-filter-minimal--items__font-size:0.9em;--vp-filter-minimal--items__font-weight:600;--vp-filter-minimal--items__line-height:1.4;--vp-filter-minimal--items__text-decoration:none;--vp-filter-minimal--items__text-transform:uppercase;--vp-filter-minimal--items__letter-spacing:0.015em;--vp-filter-minimal--items__color:inherit;--vp-filter-minimal--items-hover__color:var(--vp-color-brand);--vp-filter-minimal--items-active__color:var(--vp-color-brand);--vp-filter-minimal--items-count__offset:8px;--vp-filter-minimal--items-count__font-size:0.6em;--vp-filter-minimal-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-minimal-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap}.vp-filter__style-minimal .vp-filter__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-filter__style-minimal{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-filter__style-minimal{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-filter__style-minimal{justify-content:flex-end}.vp-filter__style-minimal .vp-filter__item{flex:0 0 auto;text-align:center}.vp-filter__style-minimal .vp-filter__item>*{color:var(--vp-filter-minimal--items__color);display:block;font-size:var(--vp-filter-minimal--items__font-size);font-weight:var(--vp-filter-minimal--items__font-weight);letter-spacing:var(--vp-filter-minimal--items__letter-spacing);line-height:var(--vp-filter-minimal--items__line-height);padding:var(--vp-filter-minimal--items__padding-v) var(--vp-filter-minimal--items__padding-h);-webkit-text-decoration:var(--vp-filter-minimal--items__text-decoration);text-decoration:var(--vp-filter-minimal--items__text-decoration);text-transform:var(--vp-filter-minimal--items__text-transform);transition:var(--vp-filter-minimal-transition-duration) color var(--vp-filter-minimal-transition-easing)}.vp-filter__style-minimal .vp-filter__item>a:focus,.vp-filter__style-minimal .vp-filter__item>a:hover{color:var(--vp-filter-minimal--items-hover__color)}.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active{--vp-filter-minimal--items__color:var(--vp-filter-minimal--items-active__color);--vp-filter-minimal--items-hover__color:var(--vp-filter-minimal--items-active__color)}.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active>*{cursor:default}.vp-filter__style-minimal .vp-filter__item .vp-filter__item-count{float:right;font-size:var(--vp-filter-minimal--items-count__font-size);margin-left:var(--vp-filter-minimal--items-count__offset)}

View File

@ -0,0 +1,64 @@
@import "./variables";
/**
* Minimal filter style
*/
.vp-filter__style-minimal {
display: flex;
flex-wrap: wrap;
.vp-filter__item a {
outline: none;
box-shadow: none;
}
// align
.vp-portfolio__layout-elements-align-left & {
justify-content: flex-start;
}
.vp-portfolio__layout-elements-align-center & {
justify-content: center;
}
.vp-portfolio__layout-elements-align-right & {
justify-content: flex-end;
}
.vp-filter__item {
flex: 0 0 auto;
text-align: center;
> * {
display: block;
padding: var(--vp-filter-minimal--items__padding-v) var(--vp-filter-minimal--items__padding-h);
font-size: var(--vp-filter-minimal--items__font-size);
font-weight: var(--vp-filter-minimal--items__font-weight);
line-height: var(--vp-filter-minimal--items__line-height);
color: var(--vp-filter-minimal--items__color);
text-decoration: var(--vp-filter-minimal--items__text-decoration);
text-transform: var(--vp-filter-minimal--items__text-transform);
letter-spacing: var(--vp-filter-minimal--items__letter-spacing);
transition: var(--vp-filter-minimal-transition-duration) color var(--vp-filter-minimal-transition-easing);
}
> a:hover,
> a:focus {
color: var(--vp-filter-minimal--items-hover__color);
}
&.vp-filter__item-active {
--vp-filter-minimal--items__color: var(--vp-filter-minimal--items-active__color);
--vp-filter-minimal--items-hover__color: var(--vp-filter-minimal--items-active__color);
> * {
cursor: default;
}
}
.vp-filter__item-count {
float: right;
margin-left: var(--vp-filter-minimal--items-count__offset);
font-size: var(--vp-filter-minimal--items-count__font-size);
}
}
}

View File

@ -0,0 +1 @@
.vp-filter__style-default{--vp-filter-default--items__gap:10px;--vp-filter-default--items__min-width:40px;--vp-filter-default--items__padding-v:0.7em;--vp-filter-default--items__padding-h:1.3em;--vp-filter-default--items__font-size:0.9em;--vp-filter-default--items__font-weight:600;--vp-filter-default--items__line-height:1.4;--vp-filter-default--items__text-decoration:none;--vp-filter-default--items__text-transform:uppercase;--vp-filter-default--items__letter-spacing:0.015em;--vp-filter-default--items__color:var(--vp-color-gray);--vp-filter-default--items__background-color:var(--vp-color-gray-lighten);--vp-filter-default--items__border-radius:var(--vp-border-radius);--vp-filter-default--items-hover__color:var(--vp-color-gray-darken);--vp-filter-default--items-hover__background-color:var(--vp-color-gray-light);--vp-filter-default--items-active__color:#fff;--vp-filter-default--items-active__background-color:var(--vp-color-brand);--vp-filter-default--items-count__offset:8px;--vp-filter-default--items-count__font-size:0.6em;--vp-filter-default-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-default-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-filter-default--items__gap)}.vp-filter__style-default .vp-filter__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-filter__style-default{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-filter__style-default{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-filter__style-default{justify-content:flex-end}.vp-filter__style-default .vp-filter__item{flex:0 0 auto;max-width:100%;text-align:center}.vp-filter__style-default .vp-filter__item>*{background-color:var(--vp-filter-default--items__background-color);border-radius:var(--vp-filter-default--items__border-radius);color:var(--vp-filter-default--items__color);display:block;font-size:var(--vp-filter-default--items__font-size);font-weight:var(--vp-filter-default--items__font-weight);letter-spacing:var(--vp-filter-default--items__letter-spacing);line-height:var(--vp-filter-default--items__line-height);min-width:var(--vp-filter-default--items__min-width);padding:var(--vp-filter-default--items__padding-v) var(--vp-filter-default--items__padding-h);-webkit-text-decoration:var(--vp-filter-default--items__text-decoration);text-decoration:var(--vp-filter-default--items__text-decoration);text-transform:var(--vp-filter-default--items__text-transform);transition:var(--vp-filter-default-transition-duration) background-color var(--vp-filter-default-transition-easing),var(--vp-filter-default-transition-duration) color var(--vp-filter-default-transition-easing)}.vp-filter__style-default .vp-filter__item>a:focus,.vp-filter__style-default .vp-filter__item>a:hover{background-color:var(--vp-filter-default--items-hover__background-color);color:var(--vp-filter-default--items-hover__color)}.vp-filter__style-default .vp-filter__item.vp-filter__item-active{--vp-filter-default--items__color:var(--vp-filter-default--items-active__color);--vp-filter-default--items__background-color:var(--vp-filter-default--items-active__background-color);--vp-filter-default--items-hover__color:var(--vp-filter-default--items-active__color);--vp-filter-default--items-hover__background-color:var(--vp-filter-default--items-active__background-color)}.vp-filter__style-default .vp-filter__item.vp-filter__item-active>*{cursor:default}.vp-filter__style-default .vp-filter__item .vp-filter__item-count{float:left;font-size:var(--vp-filter-default--items-count__font-size);margin-right:var(--vp-filter-default--items-count__offset)}

View File

@ -0,0 +1 @@
.vp-filter__style-default{--vp-filter-default--items__gap:10px;--vp-filter-default--items__min-width:40px;--vp-filter-default--items__padding-v:0.7em;--vp-filter-default--items__padding-h:1.3em;--vp-filter-default--items__font-size:0.9em;--vp-filter-default--items__font-weight:600;--vp-filter-default--items__line-height:1.4;--vp-filter-default--items__text-decoration:none;--vp-filter-default--items__text-transform:uppercase;--vp-filter-default--items__letter-spacing:0.015em;--vp-filter-default--items__color:var(--vp-color-gray);--vp-filter-default--items__background-color:var(--vp-color-gray-lighten);--vp-filter-default--items__border-radius:var(--vp-border-radius);--vp-filter-default--items-hover__color:var(--vp-color-gray-darken);--vp-filter-default--items-hover__background-color:var(--vp-color-gray-light);--vp-filter-default--items-active__color:#fff;--vp-filter-default--items-active__background-color:var(--vp-color-brand);--vp-filter-default--items-count__offset:8px;--vp-filter-default--items-count__font-size:0.6em;--vp-filter-default-transition-duration:var(--vp-interactive__transition-duration);--vp-filter-default-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-filter-default--items__gap)}.vp-filter__style-default .vp-filter__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-filter__style-default{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-filter__style-default{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-filter__style-default{justify-content:flex-end}.vp-filter__style-default .vp-filter__item{flex:0 0 auto;max-width:100%;text-align:center}.vp-filter__style-default .vp-filter__item>*{background-color:var(--vp-filter-default--items__background-color);border-radius:var(--vp-filter-default--items__border-radius);color:var(--vp-filter-default--items__color);display:block;font-size:var(--vp-filter-default--items__font-size);font-weight:var(--vp-filter-default--items__font-weight);letter-spacing:var(--vp-filter-default--items__letter-spacing);line-height:var(--vp-filter-default--items__line-height);min-width:var(--vp-filter-default--items__min-width);padding:var(--vp-filter-default--items__padding-v) var(--vp-filter-default--items__padding-h);-webkit-text-decoration:var(--vp-filter-default--items__text-decoration);text-decoration:var(--vp-filter-default--items__text-decoration);text-transform:var(--vp-filter-default--items__text-transform);transition:var(--vp-filter-default-transition-duration) background-color var(--vp-filter-default-transition-easing),var(--vp-filter-default-transition-duration) color var(--vp-filter-default-transition-easing)}.vp-filter__style-default .vp-filter__item>a:focus,.vp-filter__style-default .vp-filter__item>a:hover{background-color:var(--vp-filter-default--items-hover__background-color);color:var(--vp-filter-default--items-hover__color)}.vp-filter__style-default .vp-filter__item.vp-filter__item-active{--vp-filter-default--items__color:var(--vp-filter-default--items-active__color);--vp-filter-default--items__background-color:var(--vp-filter-default--items-active__background-color);--vp-filter-default--items-hover__color:var(--vp-filter-default--items-active__color);--vp-filter-default--items-hover__background-color:var(--vp-filter-default--items-active__background-color)}.vp-filter__style-default .vp-filter__item.vp-filter__item-active>*{cursor:default}.vp-filter__style-default .vp-filter__item .vp-filter__item-count{float:right;font-size:var(--vp-filter-default--items-count__font-size);margin-left:var(--vp-filter-default--items-count__offset)}

View File

@ -0,0 +1,73 @@
@import "./variables";
/**
* Default filter style
*/
.vp-filter__style-default {
display: flex;
flex-wrap: wrap;
gap: var(--vp-filter-default--items__gap);
.vp-filter__item a {
outline: none;
box-shadow: none;
}
// align
.vp-portfolio__layout-elements-align-left & {
justify-content: flex-start;
}
.vp-portfolio__layout-elements-align-center & {
justify-content: center;
}
.vp-portfolio__layout-elements-align-right & {
justify-content: flex-end;
}
.vp-filter__item {
flex: 0 0 auto;
max-width: 100%;
text-align: center;
> * {
display: block;
min-width: var(--vp-filter-default--items__min-width);
padding: var(--vp-filter-default--items__padding-v) var(--vp-filter-default--items__padding-h);
font-size: var(--vp-filter-default--items__font-size);
font-weight: var(--vp-filter-default--items__font-weight);
line-height: var(--vp-filter-default--items__line-height);
color: var(--vp-filter-default--items__color);
text-decoration: var(--vp-filter-default--items__text-decoration);
text-transform: var(--vp-filter-default--items__text-transform);
letter-spacing: var(--vp-filter-default--items__letter-spacing);
background-color: var(--vp-filter-default--items__background-color);
border-radius: var(--vp-filter-default--items__border-radius);
transition: var(--vp-filter-default-transition-duration) background-color var(--vp-filter-default-transition-easing), var(--vp-filter-default-transition-duration) color var(--vp-filter-default-transition-easing);
}
> a:hover,
> a:focus {
color: var(--vp-filter-default--items-hover__color);
background-color: var(--vp-filter-default--items-hover__background-color);
}
&.vp-filter__item-active {
--vp-filter-default--items__color: var(--vp-filter-default--items-active__color);
--vp-filter-default--items__background-color: var(--vp-filter-default--items-active__background-color);
--vp-filter-default--items-hover__color: var(--vp-filter-default--items-active__color);
--vp-filter-default--items-hover__background-color: var(--vp-filter-default--items-active__background-color);
> * {
cursor: default;
}
}
.vp-filter__item-count {
float: right;
margin-left: var(--vp-filter-default--items-count__offset);
font-size: var(--vp-filter-default--items-count__font-size);
}
}
}

View File

@ -0,0 +1,25 @@
<?php
/**
* Item excerpt template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_excerpt'] || ! $args['excerpt'] ) {
return;
}
?>
<div class="vp-portfolio__item-meta-excerpt">
<div>
<?php echo wp_kses_post( $args['excerpt'] ); ?>
</div>
</div>

View File

@ -0,0 +1,42 @@
<?php
/**
* Item meta icon template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_icon'] ) {
return;
}
?>
<div class="vp-portfolio__item-meta-icon">
<?php
switch ( $args['format'] ) {
case 'video':
visual_portfolio()->include_template( 'icons/play' );
break;
case 'audio':
visual_portfolio()->include_template( 'icons/music' );
break;
case 'gallery':
visual_portfolio()->include_template( 'icons/gallery' );
break;
default:
if ( isset( $args['vp_opts']['items_click_action'] ) && 'popup_gallery' === $args['vp_opts']['items_click_action'] ) {
visual_portfolio()->include_template( 'icons/search' );
} else {
visual_portfolio()->include_template( 'icons/image' );
}
break;
}
?>
</div>

View File

@ -0,0 +1,17 @@
<?php
/**
* Item image template.
*
* @var $args
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! isset( $args['image'] ) || ! $args['image'] ) {
return;
}
echo wp_kses( $args['image'], 'vp_image' );

View File

@ -0,0 +1,53 @@
<?php
/**
* Item inline meta template.
*
* @var $args
* @var $opts
* @var $allow_links
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$inline_meta = $opts['show_author'] && $args['author'] ||
$opts['show_date'] ||
$opts['show_comments_count'] && '' !== $args['comments_count'] ||
$opts['show_views_count'] && $args['views_count'] ||
$opts['show_reading_time'] && $args['reading_time'];
$templates_data = array(
'args' => $args,
'opts' => $opts,
'allow_links' => isset( $allow_links ) ? $allow_links : false,
);
if ( ! $inline_meta ) {
return;
}
?>
<div class="vp-portfolio__item-meta-inline">
<?php
// Author.
visual_portfolio()->include_template( 'items-list/item-parts/meta-author', $templates_data );
// Date.
visual_portfolio()->include_template( 'items-list/item-parts/meta-date', $templates_data );
// Comments.
visual_portfolio()->include_template( 'items-list/item-parts/meta-comments', $templates_data );
// Views.
visual_portfolio()->include_template( 'items-list/item-parts/meta-views', $templates_data );
// Reading Time.
visual_portfolio()->include_template( 'items-list/item-parts/meta-reading-time', $templates_data );
?>
</div>

View File

@ -0,0 +1,55 @@
<?php
/**
* Item meta author template.
*
* @var $args
* @var $opts
* @var $allow_links
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_author'] || ! $args['author'] ) {
return;
}
$allow_links = isset( $allow_links ) ? $allow_links : false;
$link_data = array(
'href' => $allow_links ? $args['author_url'] : false,
);
?>
<div class="vp-portfolio__item-meta-part vp-portfolio__item-meta-author">
<span class="vp-portfolio__item-meta-part-icon">
<span class="vp-screen-reader-text">
<?php echo esc_html__( 'Author', 'visual-portfolio' ); ?>
</span>
<?php
if ( $args['author_avatar'] ) {
visual_portfolio()->include_template( 'global/link-start', $link_data );
?>
<img src="<?php echo esc_url( $args['author_avatar'] ); ?>" alt="<?php echo esc_attr( $args['author'] ); ?>" width="50" height="50">
<?php
visual_portfolio()->include_template( 'global/link-end', $link_data );
} else {
visual_portfolio()->include_template( 'icons/user' );
}
?>
</span>
<span class="vp-portfolio__item-meta-part-text">
<?php
printf(
// translators: %s - author name.
esc_html__( 'By %s', 'visual-portfolio' ),
$link_data['href'] ? '<a href="' . esc_url( $link_data['href'] ) . '">' . esc_html( $args['author'] ) . '</a>' : esc_html( $args['author'] )
);
?>
</span>
</div>

View File

@ -0,0 +1,51 @@
<?php
/**
* Item meta categories template.
*
* @var $args
* @var $opts
* @var $allow_links
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_categories'] || ! $args['categories'] || empty( $args['categories'] ) ) {
return;
}
$allow_links = isset( $allow_links ) ? $allow_links : false;
$count = $opts['categories_count'];
?>
<div class="vp-portfolio__item-meta-categories">
<?php
foreach ( $args['categories'] as $category ) {
if ( ! $count ) {
break;
}
$link_data = array(
'href' => $allow_links ? $category['url'] : false,
'fallback' => 'span',
);
?>
<div class="vp-portfolio__item-meta-category">
<?php
visual_portfolio()->include_template( 'global/link-start', $link_data );
echo esc_html( $category['label'] );
visual_portfolio()->include_template( 'global/link-end', $link_data );
?>
</div>
<?php
$count--;
}
?>
</div>

View File

@ -0,0 +1,50 @@
<?php
/**
* Item meta comments template.
*
* @var $args
* @var $opts
* @var $allow_links
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_comments_count'] || '' === $args['comments_count'] ) {
return;
}
$allow_links = isset( $allow_links ) ? $allow_links : false;
$link_data = array(
'href' => $allow_links ? $args['comments_url'] : false,
);
?>
<div class="vp-portfolio__item-meta-part vp-portfolio__item-meta-comments">
<span class="vp-portfolio__item-meta-part-icon">
<span class="vp-screen-reader-text">
<?php echo esc_html__( 'Comments', 'visual-portfolio' ); ?>
</span>
<?php visual_portfolio()->include_template( 'icons/message' ); ?>
</span>
<span class="vp-portfolio__item-meta-part-text">
<?php
visual_portfolio()->include_template( 'global/link-start', $link_data );
if ( ! $args['comments_count'] ) {
echo esc_html__( 'No Comments', 'visual-portfolio' );
} else {
// translators: %s Number of comments.
echo esc_html( sprintf( _n( '%s Comment', '%s Comments', $args['comments_count'], 'visual-portfolio' ), number_format_i18n( (int) $args['comments_count'] ) ) );
}
visual_portfolio()->include_template( 'global/link-end', $link_data );
?>
</span>
</div>

View File

@ -0,0 +1,33 @@
<?php
/**
* Item meta date template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_date'] ) {
return;
}
?>
<div class="vp-portfolio__item-meta-part vp-portfolio__item-meta-date">
<span class="vp-portfolio__item-meta-part-icon">
<span class="vp-screen-reader-text">
<?php echo esc_html__( 'Date', 'visual-portfolio' ); ?>
</span>
<?php visual_portfolio()->include_template( 'icons/calendar' ); ?>
</span>
<span class="vp-portfolio__item-meta-part-text">
<?php echo esc_html( $args['published'] ); ?>
</span>
</div>

View File

@ -0,0 +1,46 @@
<?php
/**
* Item meta reading time template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_reading_time'] || ! $args['reading_time'] ) {
return;
}
?>
<div class="vp-portfolio__item-meta-part vp-portfolio__item-meta-reading-rime">
<span class="vp-portfolio__item-meta-part-icon">
<span class="vp-screen-reader-text">
<?php echo esc_html__( 'Reading Time', 'visual-portfolio' ); ?>
</span>
<?php visual_portfolio()->include_template( 'icons/book' ); ?>
</span>
<span class="vp-portfolio__item-meta-part-text">
<?php
echo esc_html(
sprintf(
// translators: %s Reading time minutes.
_n(
'%s Min Read',
'%s Mins Read',
is_string( $args['reading_time'] ) ? 1 : $args['reading_time'],
'visual-portfolio'
),
is_string( $args['reading_time'] ) ? $args['reading_time'] : number_format_i18n( (int) $args['reading_time'] )
)
);
?>
</span>
</div>

View File

@ -0,0 +1,36 @@
<?php
/**
* Item meta views template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_views_count'] || ! $args['views_count'] ) {
return;
}
?>
<div class="vp-portfolio__item-meta-part vp-portfolio__item-meta-views">
<span class="vp-portfolio__item-meta-part-icon">
<span class="vp-screen-reader-text">
<?php echo esc_html__( 'Views', 'visual-portfolio' ); ?>
</span>
<?php visual_portfolio()->include_template( 'icons/eye' ); ?>
</span>
<span class="vp-portfolio__item-meta-part-text">
<?php
// translators: %s Number of views.
echo esc_html( sprintf( _n( '%s View', '%s Views', $args['views_count'], 'visual-portfolio' ), number_format_i18n( (int) $args['views_count'] ) ) );
?>
</span>
</div>

View File

@ -0,0 +1,23 @@
<?php
/**
* Item read more template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_read_more'] || ! $opts['read_more_label'] ) {
return;
}
?>
<a class="vp-portfolio__item-meta-read-more" href="<?php echo esc_url( $opts['read_more_url'] ); ?>">
<?php echo esc_html( $opts['read_more_label'] ); ?>
</a>

View File

@ -0,0 +1,38 @@
<?php
/**
* Item title template.
*
* @var $args
* @var $opts
* @var $allow_links
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! $opts['show_title'] || ! $args['title'] ) {
return;
}
$title_tag = $opts['title_tag'] ?? 'h2';
$allow_links = isset( $allow_links ) ? $allow_links : false;
$link_data = array(
'href' => $allow_links ? $args['url'] : false,
'target' => $args['url_target'],
'rel' => $args['url_rel'],
);
?>
<<?php echo esc_attr( $title_tag ); ?> class="vp-portfolio__item-meta-title">
<?php
visual_portfolio()->include_template( 'global/link-start', $link_data );
echo wp_kses_post( $args['title'] );
visual_portfolio()->include_template( 'global/link-end', $link_data );
?>
</<?php echo esc_attr( $title_tag ); ?>>

View File

@ -0,0 +1,61 @@
/**
* Items Style Default CSS Variables
*/
.vp-portfolio__items-style-default {
// Image.
--vp-items-style-default--image__border-radius: 0;
--vp-items-style-default--image-transform: none;
--vp-items-style-default--image-hover__transform: scale(1.05);
// Caption.
--vp-items-style-default--caption__color: inherit;
--vp-items-style-default--caption__padding: 1.5em 2em;
--vp-items-style-default--caption-items__gap: 1.5em;
// Caption links.
--vp-items-style-default--caption-links__color: inherit;
--vp-items-style-default--caption-links__text-decoration: none;
--vp-items-style-default--caption-links-hover__color: var(--vp-color-brand);
// Overlay.
--vp-items-style-default--overlay__color: #fff;
--vp-items-style-default--overlay__background: rgba(0, 0, 0, 20%);
--vp-items-style-default--overlay__border-radius: 0;
--vp-items-style-default--overlay__margin: 0;
// Meta Icon.
--vp-items-style-default--meta-icon__font-size: 2em;
// Meta Categories.
--vp-items-style-default--meta-categories__font-size: 0.9em;
--vp-items-style-default--meta-categories__font-weight: 500;
--vp-items-style-default--meta-categories__text-transform: uppercase;
--vp-items-style-default--meta-categories__text-decoration: none;
--vp-items-style-default--meta-categories__opacity: 0.8;
--vp-items-style-default--meta-categories__gap: 0 0.4em;
--vp-items-style-default--meta-categories__separator: ", ";
// Meta Inline.
--vp-items-style-default--meta-inline__font-weight: 400;
--vp-items-style-default--meta-inline__line-height: 2;
--vp-items-style-default--meta-inline__font-opacity: 0.8;
--vp-items-style-default--meta-inline__gap: 0 1em;
// Meta Parts.
--vp-items-style-default--meta-part-icon__offset: 0.5em;
// Meta Title.
--vp-items-style-default--meta-title__font-size: 1.3em;
// Meta Excerpt.
--vp-items-style-default--meta-excerpt__line-height: 1.5;
--vp-items-style-default--meta-excerpt__opacity: 0.8;
// Transitions.
--vp-items-style-default-transition-duration: var(--vp-interactive__transition-duration);
--vp-items-style-default-transition-easing: var(--vp-interactive__transition-easing);
--vp-items-style-default--image__transition-duration: var(--vp-items-style-default-transition-duration);
--vp-items-style-default--image__transition-easing: var(--vp-items-style-default-transition-easing);
--vp-items-style-default--overlay__transition-duration: var(--vp-items-style-default-transition-duration);
--vp-items-style-default--overlay__transition-easing: var(--vp-items-style-default-transition-easing);
}

View File

@ -0,0 +1,70 @@
/**
* Items Style Emerge CSS Variables
*/
.vp-portfolio__items-style-emerge {
// Image.
--vp-items-style-emerge--image__border-radius: 0;
--vp-items-style-emerge--image__transform: none;
--vp-items-style-emerge--image-hover__transform: translateY(-10px);
// Image Overlay.
--vp-items-style-emerge--overlay__background: rgba(0, 0, 0, 20%);
--vp-items-style-emerge--overlay__margin: 0;
--vp-items-style-emerge--overlay__border-radius: 0;
// Caption.
--vp-items-style-emerge--caption__min-height: 40px;
--vp-items-style-emerge--caption__padding: 1.5em 2em;
--vp-items-style-emerge--caption__color: #fff;
--vp-items-style-emerge--caption__background: #000;
--vp-items-style-emerge--caption-items__gap: 1.5em;
--vp-items-style-emerge--caption-skew__height: 20px;
--vp-items-style-emerge--caption-skew__clip-left: var(--vp-items-style-emerge--caption-skew__height);
--vp-items-style-emerge--caption-skew__clip-right: var(--vp-items-style-emerge--caption-skew__height);
--vp-items-style-emerge--caption-skew-hover__clip-left: 0;
--vp-items-style-emerge--caption-skew-hover__clip-right: var(--vp-items-style-emerge--caption-skew__height);
// Caption Links.
--vp-items-style-emerge--caption-links__color: inherit;
--vp-items-style-emerge--caption-links__text-decoration: none;
--vp-items-style-emerge--caption-links-hover__color: var(--vp-color-brand);
// Meta Categories.
--vp-items-style-emerge--meta-categories__font-size: 0.9em;
--vp-items-style-emerge--meta-categories__font-weight: 500;
--vp-items-style-emerge--meta-categories__text-transform: uppercase;
--vp-items-style-emerge--meta-categories__text-decoration: none;
--vp-items-style-emerge--meta-categories__opacity: 0.8;
--vp-items-style-emerge--meta-categories__gap: 0 0.4em;
--vp-items-style-emerge--meta-categories__separator: ", ";
// Meta Inline.
--vp-items-style-emerge--meta-inline__font-weight: 400;
--vp-items-style-emerge--meta-inline__line-height: 2;
--vp-items-style-emerge--meta-inline__font-opacity: 0.8;
--vp-items-style-emerge--meta-inline__gap: 0 1em;
// Meta Parts.
--vp-items-style-emerge--meta-part-icon__offset: 0.5em;
// Meta Title.
--vp-items-style-emerge--meta-title__font-size: 1.3em;
// Meta Excerpt.
--vp-items-style-emerge--meta-excerpt__line-height: 1.5;
--vp-items-style-emerge--meta-excerpt__opacity: 0.8;
// Meta Staggering Animation.
--vp-items-style-emerge--meta-staggering__index: 1;
--vp-items-style-emerge--meta-staggering__transition-duration: 0.25s;
--vp-items-style-emerge--meta-staggering__transition-delay: 0.07s;
--vp-items-style-emerge--meta-staggering__transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
// Transitions.
--vp-items-style-emerge-transition-duration: var(--vp-interactive__transition-duration);
--vp-items-style-emerge-transition-easing: var(--vp-interactive__transition-easing);
--vp-items-style-emerge--image__transition-duration: var(--vp-items-style-emerge-transition-duration);
--vp-items-style-emerge--image__transition-easing: var(--vp-items-style-emerge-transition-easing);
--vp-items-style-emerge--caption__transition-duration: var(--vp-items-style-emerge-transition-duration);
--vp-items-style-emerge--caption__transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

View File

@ -0,0 +1,41 @@
<?php
/**
* Item image template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$link_data = array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
);
?>
<div class="vp-portfolio__item-img-wrap">
<div class="vp-portfolio__item-img">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php
// Show Image.
visual_portfolio()->include_template(
'items-list/item-parts/image',
array( 'image' => $args['image'] )
);
?>
<div class="vp-portfolio__item-overlay"></div>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
</div>

View File

@ -0,0 +1,58 @@
<?php
/**
* Item meta template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$inline_meta = $opts['show_author'] && $args['author'] ||
$opts['show_date'] ||
$opts['show_comments_count'] && '' !== $args['comments_count'] ||
$opts['show_views_count'] && $args['views_count'] ||
$opts['show_reading_time'] && $args['reading_time'];
$show_meta = $inline_meta ||
$opts['show_title'] && $args['title'] ||
$opts['show_excerpt'] && $args['excerpt'] ||
$opts['show_categories'] && $args['categories'] && ! empty( $args['categories'] );
$align = $opts['caption_text_align'] ?? $opts['align'] ?? 'center';
$templates_data = array(
'args' => $args,
'opts' => $opts,
'allow_links' => true,
);
?>
<?php if ( $show_meta ) : ?>
<figcaption class="vp-portfolio__item-caption vp-portfolio__item-caption-text-align-<?php echo esc_attr( $align ); ?>">
<div class="vp-portfolio__item-meta-wrap vp-portfolio__custom-scrollbar">
<div class="vp-portfolio__item-meta">
<?php
// Categories.
visual_portfolio()->include_template( 'items-list/item-parts/meta-categories', $templates_data );
// Title.
visual_portfolio()->include_template( 'items-list/item-parts/title', $templates_data );
// Inline Meta.
visual_portfolio()->include_template( 'items-list/item-parts/inline-meta', $templates_data );
// Excerpt.
visual_portfolio()->include_template( 'items-list/item-parts/excerpt', $templates_data );
?>
</div>
</div>
</figcaption>
<?php endif; ?>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,344 @@
@import "./variables";
/**
* Emerge items style
*/
.vp-portfolio__items-style-emerge {
.vp-portfolio__item {
// fix for safari border-radius.
// https://github.com/nk-crew/visual-portfolio/issues/150
z-index: 0;
clip-path: inset(0 round var(--vp-items-style-emerge--image__border-radius));
transition-timing-function: var(--vp-items-style-emerge--image__transition-easing);
transition-duration: var(--vp-items-style-emerge--image__transition-duration);
transition-property: clip-path;
}
// Overlay
.vp-portfolio__item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Fix FireFox image blinking
// https://github.com/nk-crew/visual-portfolio/issues/92
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin: var(--vp-items-style-emerge--overlay__margin);
clip-path: inset(0 round var(--vp-items-style-emerge--overlay__border-radius));
background: var(--vp-items-style-emerge--overlay__background);
opacity: 0;
transition: var(--vp-items-style-emerge-transition-duration) opacity var(--vp-items-style-emerge-transition-easing);
}
// Caption
.vp-portfolio__item-caption {
position: absolute;
bottom: 0;
left: 0;
// Fix FireFox image blinking
// @link https://github.com/nk-crew/visual-portfolio/issues/92
// -
// Also fix conflict with Hover Image in the Pro plugin.
z-index: 2;
display: flex;
width: 100%;
min-height: 50px;
max-height: 100%;
color: var(--vp-items-style-emerge--caption__color);
background: var(--vp-items-style-emerge--caption__background);
transition: var(--vp-items-style-emerge--caption__transition-duration) transform var(--vp-items-style-emerge--caption__transition-easing), var(--vp-items-style-emerge--caption__transition-duration) clip-path var(--vp-items-style-emerge--caption__transition-easing);
transform: translateY(100%);
@supports (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {
padding-top: var(--vp-items-style-emerge--caption-skew__height);
clip-path: polygon(0 var(--vp-items-style-emerge--caption-skew__clip-left), 100% var(--vp-items-style-emerge--caption-skew__clip-right), 100% 100%, 0% 100%);
}
a {
color: var(--vp-items-style-emerge--caption-links__color);
text-decoration: var(--vp-items-style-emerge--caption-links__text-decoration);
outline: none;
box-shadow: none;
&:hover,
&:focus {
color: var(--vp-items-style-emerge--caption-links-hover__color);
}
}
}
// fix some themes figcaption styles.
figcaption.vp-portfolio__item-caption {
font-style: inherit;
}
// meta
.vp-portfolio__item-meta-wrap {
flex: 1;
width: 100%;
height: 100%;
overflow: auto;
}
.vp-portfolio__item-meta {
width: 100%;
max-height: 100%;
padding: var(--vp-items-style-emerge--caption__padding);
color: inherit;
// Indexes for staggering.
@for $i from 1 through 6 {
> :nth-child(#{$i}) {
--vp-items-style-emerge--meta-staggering__index: #{$i};
}
}
> * {
margin-top: 0;
margin-bottom: var(--vp-items-style-emerge--caption-items__gap);
opacity: 0;
transition-delay: calc(var(--vp-items-style-emerge--meta-staggering__transition-delay) * var(--vp-items-style-emerge--meta-staggering__index));
transition-timing-function: var(--vp-items-style-emerge--meta-staggering__transition-easing);
transition-duration: var(--vp-items-style-emerge--meta-staggering__transition-duration);
transition-property: opacity, transform;
transform: translateY(10px);
}
> :last-child {
margin-bottom: 0;
}
}
.vp-portfolio__item-meta-categories {
display: inline-flex;
flex-wrap: wrap;
gap: var(--vp-items-style-emerge--meta-categories__gap);
max-width: 100%;
font-size: var(--vp-items-style-emerge--meta-categories__font-size);
font-weight: var(--vp-items-style-emerge--meta-categories__font-weight);
text-transform: var(--vp-items-style-emerge--meta-categories__text-transform);
.vp-portfolio__item-meta-category {
display: flex;
flex: 0 0 auto;
max-width: 100%;
opacity: var(--vp-items-style-emerge--meta-categories__opacity);
@if variable-exists(rtl) and $rtl {
&::before {
content: var(--vp-items-style-emerge--meta-categories__separator);
}
&:first-of-type::before {
content: none;
}
} @else {
&::after {
content: var(--vp-items-style-emerge--meta-categories__separator);
}
&:last-of-type::after {
content: none;
}
}
a {
max-width: 100%;
text-decoration: var(--vp-items-style-emerge--meta-categories__text-decoration);
}
}
}
.vp-portfolio__item-meta-title {
margin-right: 0;
margin-left: 0;
font-size: var(--vp-items-style-emerge--meta-title__font-size);
color: inherit;
}
.vp-portfolio__item-meta-inline {
display: flex;
flex-wrap: wrap;
gap: var(--vp-items-style-emerge--meta-inline__gap);
align-items: center;
justify-content: center;
font-weight: var(--vp-items-style-emerge--meta-inline__font-weight);
line-height: var(--vp-items-style-emerge--meta-inline__line-height);
> * {
opacity: var(--vp-items-style-emerge--meta-inline__font-opacity);
}
}
.vp-portfolio__item-meta-part-icon {
margin-right: var(--vp-items-style-emerge--meta-part-icon__offset);
}
.vp-portfolio__item-meta-author {
display: flex;
align-items: center;
img {
width: 1em;
height: auto;
border-radius: 1em;
}
}
.vp-portfolio__item-meta-excerpt {
line-height: var(--vp-items-style-emerge--meta-excerpt__line-height);
> div {
opacity: var(--vp-items-style-emerge--meta-excerpt__opacity);
}
}
// Transitions
.vp-portfolio__item-img img {
transition-timing-function: var(--vp-items-style-emerge--image__transition-easing);
transition-duration: var(--vp-items-style-emerge--image__transition-duration);
transition-property: opacity, transform;
transform: var(--vp-items-style-emerge--image__transform);
}
// Show Overlay and Caption.
&.vp-portfolio__items-show-caption-hover .vp-portfolio__item:hover,
&.vp-portfolio__items-show-caption-hover .vp-portfolio__item-focus-visible {
.vp-portfolio__item-caption {
--vp-items-style-emerge--caption-skew__clip-left: var(--vp-items-style-emerge--caption-skew-hover__clip-left);
--vp-items-style-emerge--caption-skew__clip-right: var(--vp-items-style-emerge--caption-skew-hover__clip-right);
transform: translateY(0);
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
}
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item:hover,
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-img img {
transform: var(--vp-items-style-emerge--image-hover__transform);
}
}
&.vp-portfolio__items-show-caption-default {
.vp-portfolio__item-caption {
--vp-items-style-emerge--caption-skew__clip-left: var(--vp-items-style-emerge--caption-skew-hover__clip-left);
--vp-items-style-emerge--caption-skew__clip-right: var(--vp-items-style-emerge--caption-skew-hover__clip-right);
transform: translateY(0);
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-caption {
--vp-items-style-emerge--caption-skew__clip-left: var(--vp-items-style-emerge--caption-skew__height);
--vp-items-style-emerge--caption-skew__clip-right: var(--vp-items-style-emerge--caption-skew__height);
transform: translateY(100%);
}
.vp-portfolio__item-meta > * {
opacity: 0;
transform: translateY(10px);
}
}
}
&.vp-portfolio__items-show-overlay-default {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-img img {
transform: var(--vp-items-style-emerge--image-hover__transform);
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 0;
}
.vp-portfolio__item-img img {
transform: var(--vp-items-style-emerge--image__transform);
}
}
}
&.vp-portfolio__items-show-caption-always {
.vp-portfolio__item-caption {
--vp-items-style-emerge--caption-skew__clip-left: var(--vp-items-style-emerge--caption-skew-hover__clip-left);
--vp-items-style-emerge--caption-skew__clip-right: var(--vp-items-style-emerge--caption-skew-hover__clip-right);
transform: translateY(0);
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
}
&.vp-portfolio__items-show-overlay-always {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-img img {
transform: var(--vp-items-style-emerge--image-hover__transform);
}
}
// fix align for gutenberg block.
figcaption.vp-portfolio__item-meta {
text-align: inherit;
}
// align
.vp-portfolio__item-caption-text-align-left {
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-caption-text-align-center {
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-caption-text-align-right {
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
}

View File

@ -0,0 +1,63 @@
/**
* Items Style Fade CSS Variables
*/
.vp-portfolio__items-style-fade {
// Links.
--vp-items-style-fade--links__text-decoration: none;
// Image.
--vp-items-style-fade--image__border-radius: 0;
--vp-items-style-fade--image__transform: none;
--vp-items-style-fade--image-hover__transform: scale(1.05);
// Overlay.
--vp-items-style-fade--overlay__text-decoration: none;
--vp-items-style-fade--overlay__color: #fff;
--vp-items-style-fade--overlay__background: #000;
--vp-items-style-fade--overlay__border-radius: 0;
--vp-items-style-fade--overlay__padding: 2em;
--vp-items-style-fade--overlay__margin: 0;
--vp-items-style-fade--overlay-items__gap: 1.5em;
// Meta Icon.
--vp-items-style-fade--meta-icon__font-size: 2em;
// Meta Categories.
--vp-items-style-fade--meta-categories__font-size: 0.9em;
--vp-items-style-fade--meta-categories__font-weight: 500;
--vp-items-style-fade--meta-categories__text-transform: uppercase;
--vp-items-style-fade--meta-categories__text-decoration: none;
--vp-items-style-fade--meta-categories__opacity: 0.8;
--vp-items-style-fade--meta-categories__gap: 0 0.4em;
--vp-items-style-fade--meta-categories__separator: ", ";
// Meta Inline.
--vp-items-style-fade--meta-inline__font-weight: 400;
--vp-items-style-fade--meta-inline__line-height: 2;
--vp-items-style-fade--meta-inline__font-opacity: 0.8;
--vp-items-style-fade--meta-inline__gap: 0 1em;
// Meta Parts.
--vp-items-style-fade--meta-part-icon__offset: 0.5em;
// Meta Title.
--vp-items-style-fade--meta-title__font-size: 1.3em;
// Meta Excerpt.
--vp-items-style-fade--meta-excerpt__line-height: 1.5;
--vp-items-style-fade--meta-excerpt__opacity: 0.8;
// Meta Staggering Animation.
--vp-items-style-fade--meta-staggering__index: 1;
--vp-items-style-fade--meta-staggering__transition-duration: 0.25s;
--vp-items-style-fade--meta-staggering__transition-delay: 0.07s;
--vp-items-style-fade--meta-staggering__transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
// Transitions.
--vp-items-style-fade-transition-duration: var(--vp-interactive__transition-duration);
--vp-items-style-fade-transition-easing: var(--vp-interactive__transition-easing);
--vp-items-style-fade--image__transition-duration: var(--vp-items-style-fade-transition-duration);
--vp-items-style-fade--image__transition-easing: var(--vp-items-style-fade-transition-easing);
--vp-items-style-fade--overlay__transition-duration: var(--vp-items-style-fade-transition-duration);
--vp-items-style-fade--overlay__transition-easing: var(--vp-items-style-fade-transition-easing);
}

View File

@ -0,0 +1,39 @@
<?php
/**
* Item image template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$link_data = array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
);
?>
<div class="vp-portfolio__item-img-wrap">
<div class="vp-portfolio__item-img">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php
// Show Image.
visual_portfolio()->include_template(
'items-list/item-parts/image',
array( 'image' => $args['image'] )
);
?>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
</div>

View File

@ -0,0 +1,80 @@
<?php
/**
* Item meta template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$inline_meta = $opts['show_author'] && $args['author'] ||
$opts['show_date'] ||
$opts['show_comments_count'] && '' !== $args['comments_count'] ||
$opts['show_views_count'] && $args['views_count'] ||
$opts['show_reading_time'] && $args['reading_time'];
$show_meta = $inline_meta ||
$opts['show_icon'] ||
$opts['show_title'] && $args['title'] ||
$opts['show_excerpt'] && $args['excerpt'] ||
$opts['show_categories'] && $args['categories'] && ! empty( $args['categories'] );
$align = $opts['overlay_text_align'] ?? $opts['align'] ?? 'center';
$templates_data = array(
'args' => $args,
'opts' => $opts,
'allow_links' => ! $args['url'],
);
$link_data = array_merge(
array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
'fallback' => 'span',
'class' => 'vp-portfolio__item-meta',
'tabindex' => '-1',
),
$templates_data
);
if ( $show_meta ) : ?>
<figcaption class="vp-portfolio__item-overlay vp-portfolio__item-overlay-text-align-<?php echo esc_attr( $align ); ?>">
<div class="vp-portfolio__item-meta-wrap vp-portfolio__custom-scrollbar">
<?php
visual_portfolio()->include_template( 'global/link-start', $link_data );
// Icon.
visual_portfolio()->include_template( 'items-list/item-parts/icon', $templates_data );
// Categories.
visual_portfolio()->include_template( 'items-list/item-parts/meta-categories', $templates_data );
// Title.
visual_portfolio()->include_template( 'items-list/item-parts/title', $templates_data );
// Inline Meta.
visual_portfolio()->include_template( 'items-list/item-parts/inline-meta', $templates_data );
// Excerpt.
visual_portfolio()->include_template( 'items-list/item-parts/excerpt', $templates_data );
visual_portfolio()->include_template( 'global/link-end', $link_data );
?>
</div>
</figcaption>
<?php else : ?>
<div class="vp-portfolio__item-overlay">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
<?php
endif;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,354 @@
@import "./variables";
/**
* Fade items style
*/
.vp-portfolio__items-style-fade {
.vp-portfolio__item {
// fix for safari border-radius.
// https://github.com/nk-crew/visual-portfolio/issues/150
z-index: 0;
clip-path: inset(0 round var(--vp-items-style-fade--image__border-radius));
transition-timing-function: var(--vp-items-style-fade--image__transition-easing);
transition-duration: var(--vp-items-style-fade--image__transition-duration);
transition-property: clip-path;
}
.vp-portfolio__item a {
text-decoration: var(--vp-items-style-fade--links__text-decoration);
outline: none;
box-shadow: none;
}
.vp-portfolio__item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Fix FireFox image blinking
// @link https://github.com/nk-crew/visual-portfolio/issues/92
// -
// Also fix conflict with Hover Image in the Pro plugin.
z-index: 2;
margin: var(--vp-items-style-fade--overlay__margin);
clip-path: inset(0 round var(--vp-items-style-fade--overlay__border-radius));
color: var(--vp-items-style-fade--overlay__color);
text-decoration: var(--vp-items-style-fade--overlay__text-decoration);
background: var(--vp-items-style-fade--overlay__background);
opacity: 0;
transition-timing-function: var(--vp-items-style-fade--overlay__transition-easing);
transition-duration: var(--vp-items-style-fade--overlay__transition-duration);
transition-property: opacity, transform;
transform: var(--vp-items-style-fade--overlay__transform);
}
// fix some themes figcaption styles.
figcaption.vp-portfolio__item-overlay {
margin: var(--vp-items-style-fade--overlay__margin);
font-style: inherit;
color: var(--vp-items-style-fade--overlay__color);
}
// meta
.vp-portfolio__item-meta-wrap {
width: 100%;
height: 100%;
overflow: auto;
.simplebar-content {
display: flex;
min-height: 100%;
}
}
.vp-portfolio__item-meta {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
padding: var(--vp-items-style-fade--overlay__padding);
color: inherit;
text-align: center;
// Indexes for staggering.
@for $i from 1 through 6 {
> :nth-child(#{$i}) {
--vp-items-style-fade--meta-staggering__index: #{$i};
}
}
> * {
max-width: 100%;
margin-top: 0;
margin-bottom: var(--vp-items-style-fade--overlay-items__gap);
opacity: 0;
transition-delay: calc(var(--vp-items-style-fade--meta-staggering__transition-delay) * var(--vp-items-style-fade--meta-staggering__index));
transition-timing-function: var(--vp-items-style-fade--meta-staggering__transition-easing);
transition-duration: var(--vp-items-style-fade--meta-staggering__transition-duration);
transition-property: opacity, transform;
transform: translateY(10px);
}
> :last-child {
margin-bottom: 0;
}
}
.vp-portfolio__item-meta-icon {
font-size: var(--vp-items-style-fade--meta-icon__font-size);
}
.vp-portfolio__item-meta-categories {
display: inline-flex;
flex-wrap: wrap;
gap: var(--vp-items-style-fade--meta-categories__gap);
max-width: 100%;
font-size: var(--vp-items-style-fade--meta-categories__font-size);
font-weight: var(--vp-items-style-fade--meta-categories__font-weight);
text-transform: var(--vp-items-style-fade--meta-categories__text-transform);
.vp-portfolio__item-meta-category {
display: flex;
flex: 0 0 auto;
max-width: 100%;
opacity: var(--vp-items-style-fade--meta-categories__opacity);
@if variable-exists(rtl) and $rtl {
&::before {
content: var(--vp-items-style-fade--meta-categories__separator);
}
&:first-of-type::before {
content: none;
}
} @else {
&::after {
content: var(--vp-items-style-fade--meta-categories__separator);
}
&:last-of-type::after {
content: none;
}
}
a {
max-width: 100%;
text-decoration: var(--vp-items-style-fade--meta-categories__text-decoration);
}
}
}
.vp-portfolio__item-meta-title {
margin-right: 0;
margin-left: 0;
font-size: var(--vp-items-style-fade--meta-title__font-size);
color: inherit;
}
.vp-portfolio__item-meta-inline {
display: flex;
flex-wrap: wrap;
gap: var(--vp-items-style-fade--meta-inline__gap);
align-items: center;
justify-content: center;
font-weight: var(--vp-items-style-fade--meta-inline__font-weight);
line-height: var(--vp-items-style-fade--meta-inline__line-height);
> * {
opacity: var(--vp-items-style-fade--meta-inline__font-opacity);
}
}
.vp-portfolio__item-meta-part-icon {
margin-right: var(--vp-items-style-fade--meta-part-icon__offset);
}
.vp-portfolio__item-meta-author {
display: flex;
align-items: center;
img {
width: 1em;
height: auto;
border-radius: 1em;
}
}
.vp-portfolio__item-meta-excerpt {
line-height: var(--vp-items-style-fade--meta-excerpt__line-height);
> div {
opacity: var(--vp-items-style-fade--meta-excerpt__opacity);
}
}
// Transitions
.vp-portfolio__item-img img {
// Fix FireFox image blinking
// https://github.com/nk-crew/visual-portfolio/issues/92
z-index: 1;
transition-timing-function: var(--vp-items-style-fade--image__transition-easing);
transition-duration: var(--vp-items-style-fade--image__transition-duration);
transition-property: opacity, transform;
transform: var(--vp-items-style-fade--image__transform);
}
// Overlay
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-img img {
transform: var(--vp-items-style-fade--image-hover__transform);
}
}
// Overlay
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item:hover,
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
}
&.vp-portfolio__items-show-overlay-default {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 0;
}
.vp-portfolio__item-meta > * {
opacity: 0;
transform: translateY(10px);
}
}
}
&.vp-portfolio__items-show-overlay-always {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item-meta > * {
opacity: 1;
transform: translateY(0);
}
}
// align
.vp-portfolio__item-overlay-text-align-center .vp-portfolio__item-meta {
align-items: center;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-left .vp-portfolio__item-meta {
align-items: flex-start;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-right .vp-portfolio__item-meta {
align-items: flex-end;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
.vp-portfolio__item-overlay-text-align-top-center .vp-portfolio__item-meta {
align-items: center;
justify-content: flex-start;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-top-left .vp-portfolio__item-meta {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-top-right .vp-portfolio__item-meta {
align-items: flex-end;
justify-content: flex-start;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
.vp-portfolio__item-overlay-text-align-bottom-center .vp-portfolio__item-meta {
align-items: center;
justify-content: flex-end;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-bottom-left .vp-portfolio__item-meta {
align-items: flex-start;
justify-content: flex-end;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-bottom-right .vp-portfolio__item-meta {
align-items: flex-end;
justify-content: flex-end;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
}

View File

@ -0,0 +1,59 @@
/**
* Items Style Fly CSS Variables
*/
.vp-portfolio__items-style-fly {
// Links.
--vp-items-style-fly--links__text-decoration: none;
// Image.
--vp-items-style-fly--image__border-radius: 0;
--vp-items-style-fly--image__transform: none;
--vp-items-style-fly--image-hover__transform: none;
// Overlay.
--vp-items-style-fly--overlay__text-decoration: none;
--vp-items-style-fly--overlay__color: #fff;
--vp-items-style-fly--overlay__background: #000;
--vp-items-style-fly--overlay__border-radius: 0;
--vp-items-style-fly--overlay__padding: 2em;
--vp-items-style-fly--overlay__margin: 0;
--vp-items-style-fly--overlay-items__gap: 1.5em;
// Meta Icon.
--vp-items-style-fly--meta-icon__font-size: 2em;
// Meta Categories.
--vp-items-style-fly--meta-categories__font-size: 0.9em;
--vp-items-style-fly--meta-categories__font-weight: 500;
--vp-items-style-fly--meta-categories__text-transform: uppercase;
--vp-items-style-fly--meta-categories__text-decoration: none;
--vp-items-style-fly--meta-categories__opacity: 0.8;
--vp-items-style-fly--meta-categories__gap: 0 0.4em;
--vp-items-style-fly--meta-categories__separator: ", ";
// Meta Inline.
--vp-items-style-fly--meta-inline__font-weight: 400;
--vp-items-style-fly--meta-inline__line-height: 2;
--vp-items-style-fly--meta-inline__font-opacity: 0.8;
--vp-items-style-fly--meta-inline__gap: 0 1em;
// Meta Parts.
--vp-items-style-fly--meta-part-icon__offset: 0.5em;
// Meta Title.
--vp-items-style-fly--meta-title__font-size: 1.3em;
// Meta Excerpt.
--vp-items-style-fly--meta-excerpt__line-height: 1.5;
--vp-items-style-fly--meta-excerpt__opacity: 0.8;
// Transitions.
--vp-items-style-fly-transition-duration: var(--vp-interactive__transition-duration);
--vp-items-style-fly-transition-easing: var(--vp-interactive__transition-easing);
--vp-items-style-fly--image__transition-duration: var(--vp-items-style-fly-transition-duration);
--vp-items-style-fly--image__transition-easing: var(--vp-items-style-fly-transition-easing);
--vp-items-style-fly--overlay__transition-duration: var(--vp-items-style-fly-transition-duration);
--vp-items-style-fly--overlay__transition-easing: var(--vp-items-style-fly-transition-easing);
--vp-items-style-fly--caption__transition-duration: var(--vp-items-style-fly-transition-duration);
--vp-items-style-fly--caption__transition-easing: var(--vp-items-style-fly-transition-easing);
}

View File

@ -0,0 +1,39 @@
<?php
/**
* Item image template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$link_data = array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
);
?>
<div class="vp-portfolio__item-img-wrap">
<div class="vp-portfolio__item-img">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php
// Show Image.
visual_portfolio()->include_template(
'items-list/item-parts/image',
array( 'image' => $args['image'] )
);
?>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
</div>

View File

@ -0,0 +1,80 @@
<?php
/**
* Item meta template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$inline_meta = $opts['show_author'] && $args['author'] ||
$opts['show_date'] ||
$opts['show_comments_count'] && '' !== $args['comments_count'] ||
$opts['show_views_count'] && $args['views_count'] ||
$opts['show_reading_time'] && $args['reading_time'];
$show_meta = $inline_meta ||
$opts['show_icon'] ||
$opts['show_title'] && $args['title'] ||
$opts['show_excerpt'] && $args['excerpt'] ||
$opts['show_categories'] && $args['categories'] && ! empty( $args['categories'] );
$align = $opts['overlay_text_align'] ?? $opts['align'] ?? 'center';
$templates_data = array(
'args' => $args,
'opts' => $opts,
'allow_links' => ! $args['url'],
);
$link_data = array_merge(
array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
'fallback' => 'span',
'class' => 'vp-portfolio__item-meta',
'tabindex' => '-1',
),
$templates_data
);
if ( $show_meta ) : ?>
<figcaption class="vp-portfolio__item-overlay vp-portfolio__item-overlay-text-align-<?php echo esc_attr( $align ); ?>">
<div class="vp-portfolio__item-meta-wrap vp-portfolio__custom-scrollbar">
<?php
visual_portfolio()->include_template( 'global/link-start', $link_data );
// Icon.
visual_portfolio()->include_template( 'items-list/item-parts/icon', $templates_data );
// Categories.
visual_portfolio()->include_template( 'items-list/item-parts/meta-categories', $templates_data );
// Title.
visual_portfolio()->include_template( 'items-list/item-parts/title', $templates_data );
// Inline Meta.
visual_portfolio()->include_template( 'items-list/item-parts/inline-meta', $templates_data );
// Excerpt.
visual_portfolio()->include_template( 'items-list/item-parts/excerpt', $templates_data );
visual_portfolio()->include_template( 'global/link-end', $link_data );
?>
</div>
</figcaption>
<?php else : ?>
<div class="vp-portfolio__item-overlay">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
<?php
endif;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,296 @@
@import "./variables";
/**
* Fly items style
*/
.vp-portfolio__items-style-fly {
.vp-portfolio__item a {
text-decoration: var(--vp-items-style-fly--links__text-decoration);
outline: none;
box-shadow: none;
}
// display overlay on item focus.
.vp-portfolio__item-focus-visible .vp-portfolio__item-overlay {
transition: transform 0.2s ease-in-out 0 !important;
transform: translateX(0%) translateY(0%) translateZ(0) !important;
}
.vp-portfolio__item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Fix FireFox image blinking
// @link https://github.com/nk-crew/visual-portfolio/issues/92
// -
// Also fix conflict with Hover Image in the Pro plugin.
z-index: 2;
margin: var(--vp-items-style-fly--overlay__margin);
overflow: hidden;
clip-path: inset(0 round var(--vp-items-style-fly--overlay__border-radius));
color: var(--vp-items-style-fly--overlay__color);
text-align: center;
text-decoration: var(--vp-items-style-fly--overlay__text-decoration);
background: var(--vp-items-style-fly--overlay__background);
transform: translateY(-100%) translateX(-100%);
}
// fix some themes figcaption styles.
figcaption.vp-portfolio__item-overlay {
margin: var(--vp-items-style-fly--overlay__margin);
font-style: inherit;
color: var(--vp-items-style-fly--overlay__color);
}
// meta
.vp-portfolio__item-meta-wrap {
width: 100%;
height: 100%;
overflow: auto;
.simplebar-content {
display: flex;
min-height: 100%;
}
}
.vp-portfolio__item-meta {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
padding: var(--vp-items-style-fly--overlay__padding);
color: inherit;
> * {
max-width: 100%;
margin-top: 0;
margin-bottom: var(--vp-items-style-fly--overlay-items__gap);
}
> :last-child {
margin-bottom: 0;
}
}
.vp-portfolio__item-meta-icon {
font-size: var(--vp-items-style-fly--meta-icon__font-size);
}
.vp-portfolio__item-meta-categories {
display: inline-flex;
flex-wrap: wrap;
gap: var(--vp-items-style-fly--meta-categories__gap);
max-width: 100%;
font-size: var(--vp-items-style-fly--meta-categories__font-size);
font-weight: var(--vp-items-style-fly--meta-categories__font-weight);
text-transform: var(--vp-items-style-fly--meta-categories__text-transform);
.vp-portfolio__item-meta-category {
display: flex;
flex: 0 0 auto;
max-width: 100%;
opacity: var(--vp-items-style-fly--meta-categories__opacity);
@if variable-exists(rtl) and $rtl {
&::before {
content: var(--vp-items-style-fly--meta-categories__separator);
}
&:first-of-type::before {
content: none;
}
} @else {
&::after {
content: var(--vp-items-style-fly--meta-categories__separator);
}
&:last-of-type::after {
content: none;
}
}
a {
max-width: 100%;
text-decoration: var(--vp-items-style-fly--meta-categories__text-decoration);
}
}
}
.vp-portfolio__item-meta-title {
margin-right: 0;
margin-left: 0;
font-size: var(--vp-items-style-fly--meta-title__font-size);
color: inherit;
}
.vp-portfolio__item-meta-inline {
display: flex;
flex-wrap: wrap;
gap: var(--vp-items-style-fly--meta-inline__gap);
align-items: center;
justify-content: center;
font-weight: var(--vp-items-style-fly--meta-inline__font-weight);
line-height: var(--vp-items-style-fly--meta-inline__line-height);
> * {
opacity: var(--vp-items-style-fly--meta-inline__font-opacity);
}
}
.vp-portfolio__item-meta-part-icon {
margin-right: var(--vp-items-style-fly--meta-part-icon__offset);
}
.vp-portfolio__item-meta-author {
display: flex;
align-items: center;
img {
width: 1em;
height: auto;
border-radius: 1em;
}
}
.vp-portfolio__item-meta-excerpt {
line-height: var(--vp-items-style-fly--meta-excerpt__line-height);
> * {
opacity: var(--vp-items-style-fly--meta-excerpt__opacity);
}
}
// Image
.vp-portfolio__item {
// fix for safari border-radius.
// https://github.com/nk-crew/visual-portfolio/issues/150
z-index: 0;
clip-path: inset(0 round var(--vp-items-style-fly--image__border-radius));
transition-timing-function: var(--vp-items-style-fly--image__transition-easing);
transition-duration: var(--vp-items-style-fly--image__transition-duration);
transition-property: clip-path;
}
.vp-portfolio__item-img img {
// Fix FireFox image blinking
// https://github.com/nk-crew/visual-portfolio/issues/92
z-index: 1;
transition-timing-function: var(--vp-items-style-fly--image__transition-easing);
transition-duration: var(--vp-items-style-fly--image__transition-duration);
transition-property: opacity, transform;
transform: var(--vp-items-style-fly--image__transform);
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-img img {
transform: var(--vp-items-style-fly--image-hover__transform);
}
}
// align
.vp-portfolio__item-overlay-text-align-center .vp-portfolio__item-meta {
align-items: center;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-left .vp-portfolio__item-meta {
align-items: flex-start;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-right .vp-portfolio__item-meta {
align-items: flex-end;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
.vp-portfolio__item-overlay-text-align-top-center .vp-portfolio__item-meta {
align-items: center;
justify-content: flex-start;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-top-left .vp-portfolio__item-meta {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-top-right .vp-portfolio__item-meta {
align-items: flex-end;
justify-content: flex-start;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
.vp-portfolio__item-overlay-text-align-bottom-center .vp-portfolio__item-meta {
align-items: center;
justify-content: flex-end;
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-overlay-text-align-bottom-left .vp-portfolio__item-meta {
align-items: flex-start;
justify-content: flex-end;
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-overlay-text-align-bottom-right .vp-portfolio__item-meta {
align-items: flex-end;
justify-content: flex-end;
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
}

View File

@ -0,0 +1,52 @@
<?php
/**
* Item image template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$link_data = array(
'href' => $args['url'],
'target' => $args['url_target'],
'rel' => $args['url_rel'],
);
?>
<div class="vp-portfolio__item-img-wrap">
<div class="vp-portfolio__item-img">
<?php visual_portfolio()->include_template( 'global/link-start', $link_data ); ?>
<?php
// Show Image.
visual_portfolio()->include_template(
'items-list/item-parts/image',
array( 'image' => $args['image'] )
);
?>
<div class="vp-portfolio__item-overlay">
<?php
// Show Icon.
visual_portfolio()->include_template(
'items-list/item-parts/icon',
array(
'args' => $args,
'opts' => $opts,
)
);
?>
</div>
<?php visual_portfolio()->include_template( 'global/link-end', $link_data ); ?>
</div>
</div>

View File

@ -0,0 +1,60 @@
<?php
/**
* Item meta template.
*
* @var $args
* @var $opts
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
$inline_meta = $opts['show_author'] && $args['author'] ||
$opts['show_date'] ||
$opts['show_comments_count'] && '' !== $args['comments_count'] ||
$opts['show_views_count'] && $args['views_count'] ||
$opts['show_reading_time'] && $args['reading_time'];
$show_meta = $inline_meta ||
$opts['show_title'] && $args['title'] ||
$opts['show_excerpt'] && $args['excerpt'] ||
$opts['show_categories'] && $args['categories'] && ! empty( $args['categories'] ) ||
$opts['show_read_more'] && $opts['read_more_label'];
$align = $opts['caption_text_align'] ?? $opts['align'] ?? 'center';
$templates_data = array(
'args' => $args,
'opts' => $opts,
'allow_links' => true,
);
?>
<?php if ( $show_meta ) : ?>
<figcaption class="vp-portfolio__item-caption vp-portfolio__item-caption-text-align-<?php echo esc_attr( $align ); ?>">
<div class="vp-portfolio__item-meta">
<?php
// Categories.
visual_portfolio()->include_template( 'items-list/item-parts/meta-categories', $templates_data );
// Title.
visual_portfolio()->include_template( 'items-list/item-parts/title', $templates_data );
// Inline Meta.
visual_portfolio()->include_template( 'items-list/item-parts/inline-meta', $templates_data );
// Excerpt.
visual_portfolio()->include_template( 'items-list/item-parts/excerpt', $templates_data );
// Read More.
visual_portfolio()->include_template( 'items-list/item-parts/read-more', $templates_data );
?>
</div>
</figcaption>
<?php endif; ?>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,254 @@
@import "./variables";
/**
* Default items style
*/
.vp-portfolio__items-style-default {
.vp-portfolio__item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Fix FireFox image blinking
// https://github.com/nk-crew/visual-portfolio/issues/92
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin: var(--vp-items-style-default--overlay__margin);
clip-path: inset(0 round var(--vp-items-style-default--overlay__border-radius));
color: var(--vp-items-style-default--overlay__color);
text-decoration: var(--vp-items-style-default--overlay__text-decoration);
background: var(--vp-items-style-default--overlay__background);
opacity: 0;
transition-timing-function: var(--vp-items-style-default--overlay__transition-easing);
transition-duration: var(--vp-items-style-default--overlay__transition-duration);
transition-property: opacity, transform;
}
// Caption.
.vp-portfolio__item-caption a {
color: var(--vp-items-style-default--caption-links__color);
text-decoration: var(--vp-items-style-default--caption-links__text-decoration);
outline: none;
box-shadow: none;
transition-timing-function: var(--vp-items-style-default-transition-easing);
transition-duration: var(--vp-items-style-default-transition-duration);
transition-property: color, opacity, transform;
&:hover,
&:focus {
color: var(--vp-items-style-default--caption-links-hover__color);
}
}
// Transitions
.vp-portfolio__item-img {
// fix for safari border-radius.
// https://github.com/nk-crew/visual-portfolio/issues/150
z-index: 0;
overflow: hidden;
clip-path: inset(0 round var(--vp-items-style-default--image__border-radius));
transition-timing-function: var(--vp-items-style-default--image__transition-easing);
transition-duration: var(--vp-items-style-default--image__transition-duration);
transition-property: clip-path;
}
.vp-portfolio__item-img img {
transition-timing-function: var(--vp-items-style-default--image__transition-easing);
transition-duration: var(--vp-items-style-default--image__transition-duration);
transition-property: opacity, transform;
transform: var(--vp-items-style-default--image__transform);
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-img img {
transform: var(--vp-items-style-default--image-hover__transform);
}
}
// Overlay
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item:hover,
&.vp-portfolio__items-show-overlay-hover .vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 1;
}
}
&.vp-portfolio__items-show-overlay-default {
.vp-portfolio__item-overlay {
opacity: 1;
}
.vp-portfolio__item:hover,
.vp-portfolio__item-focus-visible {
.vp-portfolio__item-overlay {
opacity: 0;
}
}
}
&.vp-portfolio__items-show-overlay-always {
.vp-portfolio__item-overlay {
opacity: 1;
}
}
// fix some themes figcaption styles.
figcaption.vp-portfolio__item-caption {
font-style: inherit;
color: var(--vp-items-style-default--caption__color);
}
// meta
.vp-portfolio__item-meta {
position: relative;
padding: var(--vp-items-style-default--caption__padding);
> * {
margin-top: 0;
margin-bottom: var(--vp-items-style-default--caption-items__gap);
}
> :last-child {
margin-bottom: 0;
}
}
.vp-portfolio__item-meta-icon {
font-size: var(--vp-items-style-default--meta-icon__font-size);
}
.vp-portfolio__item-meta-categories {
display: inline-flex;
flex-wrap: wrap;
gap: var(--vp-items-style-default--meta-categories__gap);
max-width: 100%;
font-size: var(--vp-items-style-default--meta-categories__font-size);
font-weight: var(--vp-items-style-default--meta-categories__font-weight);
text-transform: var(--vp-items-style-default--meta-categories__text-transform);
.vp-portfolio__item-meta-category {
display: flex;
flex: 0 0 auto;
max-width: 100%;
opacity: var(--vp-items-style-default--meta-categories__opacity);
@if variable-exists(rtl) and $rtl {
&::before {
content: var(--vp-items-style-default--meta-categories__separator);
}
&:first-of-type::before {
content: none;
}
} @else {
&::after {
content: var(--vp-items-style-default--meta-categories__separator);
}
&:last-of-type::after {
content: none;
}
}
a {
max-width: 100%;
text-decoration: var(--vp-items-style-default--meta-categories__text-decoration);
}
}
}
.vp-portfolio__item-meta-title {
margin-right: 0;
margin-left: 0;
font-size: var(--vp-items-style-default--meta-title__font-size);
}
.vp-portfolio__item-meta-inline {
display: flex;
flex-wrap: wrap;
gap: var(--vp-items-style-default--meta-inline__gap);
align-items: center;
justify-content: center;
font-weight: var(--vp-items-style-default--meta-inline__font-weight);
line-height: var(--vp-items-style-default--meta-inline__line-height);
> * {
opacity: var(--vp-items-style-default--meta-inline__font-opacity);
}
}
.vp-portfolio__item-meta-part-icon {
margin-right: var(--vp-items-style-default--meta-part-icon__offset);
}
.vp-portfolio__item-meta-author {
display: flex;
align-items: center;
img {
width: 1em;
height: auto;
border-radius: 1em;
}
}
.vp-portfolio__item-meta-excerpt {
line-height: var(--vp-items-style-default--meta-excerpt__line-height);
opacity: var(--vp-items-style-default--meta-excerpt__opacity);
}
.vp-portfolio__item-meta-read-more {
display: inline-block;
}
// align
.vp-portfolio__item-caption-text-align-left {
text-align: left;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-start;
}
}
.vp-portfolio__item-caption-text-align-center {
text-align: center;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: center;
}
}
.vp-portfolio__item-caption-text-align-right {
text-align: right;
.vp-portfolio__item-meta-categories,
.vp-portfolio__item-meta-inline {
justify-content: flex-end;
}
}
// Fix for slider image displaying bug.
// Image is not displaying properly in the slider when:
// - selected Classic items style
// - used Dynamic items height in Slider settings
// - we should use value at least 0.01px, since on Apple devices it is not working properly
[data-vp-layout="slider"] & .vp-portfolio__item-img-wrap {
position: relative;
padding-top: 0.02px;
padding-bottom: 0.02px;
}
// Fix caption width in slider when used automatic slide width.
[data-vp-slider-slides-per-view="auto"] & .vp-portfolio__item-caption {
width: 0;
min-width: 100%;
}
}

View File

@ -0,0 +1,17 @@
<?php
/**
* Items wrapper end.
*
* @var $options
* @var $style_options
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
</div>

View File

@ -0,0 +1,18 @@
<?php
/**
* Items wrapper start.
*
* @var $options
* @var $style_options
* @var $class
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $class ); ?>">

View File

@ -0,0 +1,22 @@
<?php
/**
* Slider layout arrows.
*
* @var $options
* @var $style_options
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="vp-portfolio__items-arrow vp-portfolio__items-arrow-prev" tabindex="0" role="button" aria-label="<?php echo esc_attr__( 'Previous Slide', 'visual-portfolio' ); ?>">
<?php visual_portfolio()->include_template( 'icons/angle-left' ); ?>
</div>
<div class="vp-portfolio__items-arrow vp-portfolio__items-arrow-next" tabindex="0" role="button" aria-label="<?php echo esc_attr__( 'Next Slide', 'visual-portfolio' ); ?>">
<?php visual_portfolio()->include_template( 'icons/angle-right' ); ?>
</div>

View File

@ -0,0 +1,17 @@
<?php
/**
* Slider layout bullets.
*
* @var $options
* @var $style_options
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="vp-portfolio__items-bullets"></div>

View File

@ -0,0 +1,45 @@
<?php
/**
* Slider layout thumbnails.
*
* @var $options
* @var $style_options
* @var $thumbnails
* @var $img_size
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="vp-portfolio__thumbnails-wrap">
<div class="vp-portfolio__thumbnails">
<?php
foreach ( $thumbnails as $image_id ) {
?>
<div class="vp-portfolio__thumbnail-wrap">
<div class="vp-portfolio__thumbnail">
<div class="vp-portfolio__thumbnail-img-wrap">
<div class="vp-portfolio__thumbnail-img">
<?php
// Show Image.
visual_portfolio()->include_template(
'items-list/item-parts/image',
array( 'image' => Visual_Portfolio_Images::get_attachment_image( $image_id, $img_size ) )
);
?>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>

View File

@ -0,0 +1,27 @@
/**
* Pagination Default CSS Variables
*/
.vp-pagination__style-default {
// Items.
--vp-pagination-default--items__gap: 10px;
--vp-pagination-default--items__min-width: 40px;
--vp-pagination-default--items__padding-v: 0.7em;
--vp-pagination-default--items__padding-h: 1.3em;
--vp-pagination-default--items__font-size: 0.9em;
--vp-pagination-default--items__font-weight: 600;
--vp-pagination-default--items__line-height: 1.4;
--vp-pagination-default--items__text-decoration: none;
--vp-pagination-default--items__text-transform: uppercase;
--vp-pagination-default--items__letter-spacing: 0.015em;
--vp-pagination-default--items__color: var(--vp-color-gray);
--vp-pagination-default--items__background-color: var(--vp-color-gray-lighten);
--vp-pagination-default--items__border-radius: var(--vp-border-radius);
--vp-pagination-default--items-hover__color: var(--vp-color-gray-darken);
--vp-pagination-default--items-hover__background-color: var(--vp-color-gray-light);
--vp-pagination-default--items-active__color: #fff;
--vp-pagination-default--items-active__background-color: var(--vp-color-brand);
// Transitions.
--vp-pagination-default-transition-duration: var(--vp-interactive__transition-duration);
--vp-pagination-default-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,24 @@
<?php
/**
* Default infinite pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-default" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>">
<div class="vp-pagination__item">
<a class="vp-pagination__load-more" href="<?php echo esc_url( $args['next_page_url'] ); ?>">
<span><?php echo esc_html( $args['text_load'] ); ?></span>
<span class="vp-pagination__load-more-loading"><span class="vp-spinner"></span><span class="vp-screen-reader-text"> <?php echo esc_html( $args['text_loading'] ); ?></span></span>
<span class="vp-pagination__load-more-no-more"><?php echo esc_html( $args['text_end_list'] ); ?></span>
</a>
</div>
</div>

View File

@ -0,0 +1,24 @@
<?php
/**
* Default load more pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-default" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>">
<div class="vp-pagination__item">
<a class="vp-pagination__load-more" href="<?php echo esc_url( $args['next_page_url'] ); ?>">
<span><?php echo esc_html( $args['text_load'] ); ?></span>
<span class="vp-pagination__load-more-loading"><span class="vp-spinner"></span><span class="vp-screen-reader-text"> <?php echo esc_html( $args['text_loading'] ); ?></span></span>
<span class="vp-pagination__load-more-no-more"><?php echo esc_html( $args['text_end_list'] ); ?></span>
</a>
</div>
</div>

View File

@ -0,0 +1,29 @@
/**
* Pagination Minimal CSS Variables
*/
.vp-pagination__style-minimal {
// Items.
--vp-pagination-minimal--items__padding-v: 0.7em;
--vp-pagination-minimal--items__padding-h: 1em;
--vp-pagination-minimal--items__font-size: 0.9em;
--vp-pagination-minimal--items__font-weight: 600;
--vp-pagination-minimal--items__line-height: 1.4;
--vp-pagination-minimal--items__text-decoration: none;
--vp-pagination-minimal--items__text-transform: uppercase;
--vp-pagination-minimal--items__letter-spacing: 0.015em;
--vp-pagination-minimal--items__color: inherit;
--vp-pagination-minimal--items-hover__color: var(--vp-color-brand);
--vp-pagination-minimal--items-active__color: var(--vp-color-brand);
// Items Paged.
--vp-pagination-minimal-paged--items-active__padding-v: var(--vp-pagination-minimal--items__padding-v);
--vp-pagination-minimal-paged--items-active__padding-h: var(--vp-pagination-minimal--items__padding-v);
--vp-pagination-minimal-paged--items-active__margin-h: calc(var(--vp-pagination-minimal--items__padding-h) / 3);
--vp-pagination-minimal-paged--items-active__color: #fff;
--vp-pagination-minimal-paged--items-active__background-color: var(--vp-color-brand);
--vp-pagination-minimal-paged--items-active__border-radius: 50%;
// Transitions.
--vp-pagination-minimal-transition-duration: var(--vp-interactive__transition-duration);
--vp-pagination-minimal-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,24 @@
<?php
/**
* Minimal infinite pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-minimal" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>">
<div class="vp-pagination__item">
<a class="vp-pagination__load-more" href="<?php echo esc_url( $args['next_page_url'] ); ?>">
<span><?php echo esc_html( $args['text_load'] ); ?></span>
<span class="vp-pagination__load-more-loading"><span class="vp-spinner"></span><span class="vp-screen-reader-text"> <?php echo esc_html( $args['text_loading'] ); ?></span></span>
<span class="vp-pagination__load-more-no-more"><?php echo esc_html( $args['text_end_list'] ); ?></span>
</a>
</div>
</div>

View File

@ -0,0 +1,24 @@
<?php
/**
* Minimal load more pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-minimal" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>">
<div class="vp-pagination__item">
<a class="vp-pagination__load-more" href="<?php echo esc_url( $args['next_page_url'] ); ?>">
<span><?php echo esc_html( $args['text_load'] ); ?></span>
<span class="vp-pagination__load-more-loading"><span class="vp-spinner"></span><span class="vp-screen-reader-text"> <?php echo esc_html( $args['text_loading'] ); ?></span></span>
<span class="vp-pagination__load-more-no-more"><?php echo esc_html( $args['text_end_list'] ); ?></span>
</a>
</div>
</div>

View File

@ -0,0 +1,42 @@
<?php
/**
* Minimal paged pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-minimal" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>">
<?php
foreach ( $args['items'] as $item ) {
?>
<div class="<?php echo esc_attr( $item['class'] ); ?>">
<?php if ( $item['url'] ) : ?>
<a href="<?php echo esc_url( $item['url'] ); ?>">
<?php
if ( $item['is_prev_arrow'] ) {
visual_portfolio()->include_template( 'icons/arrow-left' );
} elseif ( $item['is_next_arrow'] ) {
visual_portfolio()->include_template( 'icons/arrow-right' );
} else {
echo esc_html( $item['label'] );
}
?>
</a>
<?php else : ?>
<span><?php echo esc_html( $item['label'] ); ?></span>
<?php endif; ?>
</div>
<?php
}
?>
</div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,131 @@
@import "./variables";
/**
* Minimal pagination style
*/
.vp-pagination__style-minimal {
display: flex;
flex-wrap: wrap;
.vp-pagination__item a {
outline: none;
box-shadow: none;
}
// align
.vp-portfolio__layout-elements-align-left & {
justify-content: flex-start;
}
.vp-portfolio__layout-elements-align-center & {
justify-content: center;
}
.vp-portfolio__layout-elements-align-right & {
justify-content: flex-end;
}
.vp-pagination__item {
flex: 0 0 auto;
text-align: center;
> * {
display: block;
padding: var(--vp-pagination-minimal--items__padding-v) var(--vp-pagination-minimal--items__padding-h);
font-size: var(--vp-pagination-minimal--items__font-size);
font-weight: var(--vp-pagination-minimal--items__font-weight);
line-height: var(--vp-pagination-minimal--items__line-height);
color: var(--vp-pagination-minimal--items__color);
text-decoration: var(--vp-pagination-minimal--items__text-decoration);
text-transform: var(--vp-pagination-minimal--items__text-transform);
letter-spacing: var(--vp-pagination-minimal--items__letter-spacing);
transition: var(--vp-pagination-minimal-transition-duration) color var(--vp-pagination-minimal-transition-easing);
}
> a:hover,
> a:focus {
color: var(--vp-pagination-minimal--items-hover__color);
}
&.vp-pagination__item-active {
--vp-pagination-minimal--items__color: var(--vp-pagination-minimal--items-active__color);
--vp-pagination-minimal--items-hover__color: var(--vp-pagination-minimal--items-active__color);
> * {
cursor: default;
}
}
}
// show/hide labels
.vp-pagination__load-more > .vp-pagination__load-more-no-more,
.vp-pagination__load-more > .vp-pagination__load-more-loading,
.vp-portfolio__loading & .vp-pagination__load-more > span,
&.vp-pagination__no-more .vp-pagination__load-more > span,
.vp-portfolio__loading &.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
display: none;
}
.vp-pagination__load-more > span,
.vp-portfolio__loading & .vp-pagination__load-more > .vp-pagination__load-more-loading,
&.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
display: block;
}
// disable no more and loading buttons
&.vp-pagination__no-more .vp-pagination__load-more,
.vp-portfolio__loading & .vp-pagination__load-more {
pointer-events: none;
cursor: default;
background-color: transparent;
border: none;
transition: none;
}
&.vp-pagination__no-more .vp-pagination__load-more {
opacity: 0.5;
}
// Paged.
&[data-vp-pagination-type="paged"] .vp-pagination__item-active {
position: relative;
margin-right: var(--vp-pagination-minimal-paged--items-active__margin-h);
margin-left: var(--vp-pagination-minimal-paged--items-active__margin-h);
// We use this image for the hack to make active item circle instead of square.
// <img> added in script /assets/js/pagination-minimal-paged.js
> img {
width: auto;
max-width: none;
height: 100%;
padding: 0;
text-align: left;
opacity: 0;
+ span {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
height: 100%;
padding: var(--vp-pagination-minimal-paged--items-active__padding-v) var(--vp-pagination-minimal-paged--items-active__padding-h);
color: var(--vp-pagination-minimal-paged--items-active__color);
background-color: var(--vp-pagination-minimal-paged--items-active__background-color);
border-radius: var(--vp-pagination-minimal-paged--items-active__border-radius);
}
}
}
// Paged for RTL.
@if variable-exists(rtl) and $rtl {
&[data-vp-pagination-type="paged"] {
.vp-pagination__item-next svg,
.vp-pagination__item-prev svg {
transform: scaleX(-1);
}
}
}
}

View File

@ -0,0 +1,46 @@
<?php
/**
* Default paged pagination template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-pagination__style-default" data-vp-pagination-type="<?php echo esc_attr( $args['type'] ); ?>"
<?php if ( isset( $args['scroll_top_offset'] ) ) : ?>
data-vp-pagination-scroll-top="<?php echo esc_attr( $args['scroll_top_offset'] ); ?>"
<?php endif; ?>
>
<?php
foreach ( $args['items'] as $item ) {
?>
<div class="<?php echo esc_attr( $item['class'] ); ?>">
<?php if ( $item['url'] ) : ?>
<a href="<?php echo esc_url( $item['url'] ); ?>">
<?php
if ( $item['is_prev_arrow'] ) {
visual_portfolio()->include_template( 'icons/arrow-left' );
} elseif ( $item['is_next_arrow'] ) {
visual_portfolio()->include_template( 'icons/arrow-right' );
} else {
echo esc_html( $item['label'] );
}
?>
</a>
<?php else : ?>
<span><?php echo esc_html( $item['label'] ); ?></span>
<?php endif; ?>
</div>
<?php
}
?>
</div>

View File

@ -0,0 +1 @@
.vp-pagination__style-default{--vp-pagination-default--items__gap:10px;--vp-pagination-default--items__min-width:40px;--vp-pagination-default--items__padding-v:0.7em;--vp-pagination-default--items__padding-h:1.3em;--vp-pagination-default--items__font-size:0.9em;--vp-pagination-default--items__font-weight:600;--vp-pagination-default--items__line-height:1.4;--vp-pagination-default--items__text-decoration:none;--vp-pagination-default--items__text-transform:uppercase;--vp-pagination-default--items__letter-spacing:0.015em;--vp-pagination-default--items__color:var(--vp-color-gray);--vp-pagination-default--items__background-color:var(--vp-color-gray-lighten);--vp-pagination-default--items__border-radius:var(--vp-border-radius);--vp-pagination-default--items-hover__color:var(--vp-color-gray-darken);--vp-pagination-default--items-hover__background-color:var(--vp-color-gray-light);--vp-pagination-default--items-active__color:#fff;--vp-pagination-default--items-active__background-color:var(--vp-color-brand);--vp-pagination-default-transition-duration:var(--vp-interactive__transition-duration);--vp-pagination-default-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-pagination-default--items__gap)}.vp-pagination__style-default .vp-pagination__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-pagination__style-default{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-pagination__style-default{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-pagination__style-default{justify-content:flex-end}.vp-pagination__style-default .vp-pagination__item{flex:0 0 auto;max-width:100%;text-align:center}.vp-pagination__style-default .vp-pagination__item>*{background-color:var(--vp-pagination-default--items__background-color);border-radius:var(--vp-pagination-default--items__border-radius);color:var(--vp-pagination-default--items__color);display:block;font-size:var(--vp-pagination-default--items__font-size);font-weight:var(--vp-pagination-default--items__font-weight);letter-spacing:var(--vp-pagination-default--items__letter-spacing);line-height:var(--vp-pagination-default--items__line-height);min-width:var(--vp-pagination-default--items__min-width);padding:var(--vp-pagination-default--items__padding-v) var(--vp-pagination-default--items__padding-h);-webkit-text-decoration:var(--vp-pagination-default--items__text-decoration);text-decoration:var(--vp-pagination-default--items__text-decoration);text-transform:var(--vp-pagination-default--items__text-transform);transition:var(--vp-pagination-default-transition-duration) background-color var(--vp-pagination-default-transition-easing),var(--vp-pagination-default-transition-duration) color var(--vp-pagination-default-transition-easing)}.vp-pagination__style-default .vp-pagination__item>a:focus,.vp-pagination__style-default .vp-pagination__item>a:hover{background-color:var(--vp-pagination-default--items-hover__background-color);color:var(--vp-pagination-default--items-hover__color)}.vp-pagination__style-default .vp-pagination__item.vp-pagination__item-active{--vp-pagination-default--items__color:var(--vp-pagination-default--items-active__color);--vp-pagination-default--items__background-color:var(--vp-pagination-default--items-active__background-color);--vp-pagination-default--items-hover__color:var(--vp-pagination-default--items-active__color);--vp-pagination-default--items-hover__background-color:var(--vp-pagination-default--items-active__background-color)}.vp-pagination__style-default .vp-pagination__item.vp-pagination__item-active>*{cursor:default}.vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-loading,.vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-no-more,.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>span,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more>span,.vp-portfolio__loading .vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>.vp-pagination__load-more-no-more{display:none}.vp-pagination__style-default .vp-pagination__load-more>span,.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>.vp-pagination__load-more-no-more,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-loading{display:block}.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more{background-color:transparent!important;border:none;cursor:default;outline:none!important;pointer-events:none;transition:none}.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more{opacity:.5}

View File

@ -0,0 +1 @@
.vp-pagination__style-default{--vp-pagination-default--items__gap:10px;--vp-pagination-default--items__min-width:40px;--vp-pagination-default--items__padding-v:0.7em;--vp-pagination-default--items__padding-h:1.3em;--vp-pagination-default--items__font-size:0.9em;--vp-pagination-default--items__font-weight:600;--vp-pagination-default--items__line-height:1.4;--vp-pagination-default--items__text-decoration:none;--vp-pagination-default--items__text-transform:uppercase;--vp-pagination-default--items__letter-spacing:0.015em;--vp-pagination-default--items__color:var(--vp-color-gray);--vp-pagination-default--items__background-color:var(--vp-color-gray-lighten);--vp-pagination-default--items__border-radius:var(--vp-border-radius);--vp-pagination-default--items-hover__color:var(--vp-color-gray-darken);--vp-pagination-default--items-hover__background-color:var(--vp-color-gray-light);--vp-pagination-default--items-active__color:#fff;--vp-pagination-default--items-active__background-color:var(--vp-color-brand);--vp-pagination-default-transition-duration:var(--vp-interactive__transition-duration);--vp-pagination-default-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-pagination-default--items__gap)}.vp-pagination__style-default .vp-pagination__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-pagination__style-default{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-pagination__style-default{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-pagination__style-default{justify-content:flex-end}.vp-pagination__style-default .vp-pagination__item{flex:0 0 auto;max-width:100%;text-align:center}.vp-pagination__style-default .vp-pagination__item>*{background-color:var(--vp-pagination-default--items__background-color);border-radius:var(--vp-pagination-default--items__border-radius);color:var(--vp-pagination-default--items__color);display:block;font-size:var(--vp-pagination-default--items__font-size);font-weight:var(--vp-pagination-default--items__font-weight);letter-spacing:var(--vp-pagination-default--items__letter-spacing);line-height:var(--vp-pagination-default--items__line-height);min-width:var(--vp-pagination-default--items__min-width);padding:var(--vp-pagination-default--items__padding-v) var(--vp-pagination-default--items__padding-h);-webkit-text-decoration:var(--vp-pagination-default--items__text-decoration);text-decoration:var(--vp-pagination-default--items__text-decoration);text-transform:var(--vp-pagination-default--items__text-transform);transition:var(--vp-pagination-default-transition-duration) background-color var(--vp-pagination-default-transition-easing),var(--vp-pagination-default-transition-duration) color var(--vp-pagination-default-transition-easing)}.vp-pagination__style-default .vp-pagination__item>a:focus,.vp-pagination__style-default .vp-pagination__item>a:hover{background-color:var(--vp-pagination-default--items-hover__background-color);color:var(--vp-pagination-default--items-hover__color)}.vp-pagination__style-default .vp-pagination__item.vp-pagination__item-active{--vp-pagination-default--items__color:var(--vp-pagination-default--items-active__color);--vp-pagination-default--items__background-color:var(--vp-pagination-default--items-active__background-color);--vp-pagination-default--items-hover__color:var(--vp-pagination-default--items-active__color);--vp-pagination-default--items-hover__background-color:var(--vp-pagination-default--items-active__background-color)}.vp-pagination__style-default .vp-pagination__item.vp-pagination__item-active>*{cursor:default}.vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-loading,.vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-no-more,.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>span,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more>span,.vp-portfolio__loading .vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>.vp-pagination__load-more-no-more{display:none}.vp-pagination__style-default .vp-pagination__load-more>span,.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more>.vp-pagination__load-more-no-more,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more>.vp-pagination__load-more-loading{display:block}.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more,.vp-portfolio__loading .vp-pagination__style-default .vp-pagination__load-more{background-color:transparent!important;border:none;cursor:default;outline:none!important;pointer-events:none;transition:none}.vp-pagination__style-default.vp-pagination__no-more .vp-pagination__load-more{opacity:.5}

View File

@ -0,0 +1,108 @@
@import "./variables";
/**
* Default pagination style
*/
.vp-pagination__style-default {
display: flex;
flex-wrap: wrap;
gap: var(--vp-pagination-default--items__gap);
.vp-pagination__item a {
outline: none;
box-shadow: none;
}
// align
.vp-portfolio__layout-elements-align-left & {
justify-content: flex-start;
}
.vp-portfolio__layout-elements-align-center & {
justify-content: center;
}
.vp-portfolio__layout-elements-align-right & {
justify-content: flex-end;
}
.vp-pagination__item {
flex: 0 0 auto;
max-width: 100%;
text-align: center;
> * {
display: block;
min-width: var(--vp-pagination-default--items__min-width);
padding: var(--vp-pagination-default--items__padding-v) var(--vp-pagination-default--items__padding-h);
font-size: var(--vp-pagination-default--items__font-size);
font-weight: var(--vp-pagination-default--items__font-weight);
line-height: var(--vp-pagination-default--items__line-height);
color: var(--vp-pagination-default--items__color);
text-decoration: var(--vp-pagination-default--items__text-decoration);
text-transform: var(--vp-pagination-default--items__text-transform);
letter-spacing: var(--vp-pagination-default--items__letter-spacing);
background-color: var(--vp-pagination-default--items__background-color);
border-radius: var(--vp-pagination-default--items__border-radius);
transition: var(--vp-pagination-default-transition-duration) background-color var(--vp-pagination-default-transition-easing), var(--vp-pagination-default-transition-duration) color var(--vp-pagination-default-transition-easing);
}
> a:hover,
> a:focus {
color: var(--vp-pagination-default--items-hover__color);
background-color: var(--vp-pagination-default--items-hover__background-color);
}
&.vp-pagination__item-active {
--vp-pagination-default--items__color: var(--vp-pagination-default--items-active__color);
--vp-pagination-default--items__background-color: var(--vp-pagination-default--items-active__background-color);
--vp-pagination-default--items-hover__color: var(--vp-pagination-default--items-active__color);
--vp-pagination-default--items-hover__background-color: var(--vp-pagination-default--items-active__background-color);
> * {
cursor: default;
}
}
}
// show/hide labels
.vp-pagination__load-more > .vp-pagination__load-more-no-more,
.vp-pagination__load-more > .vp-pagination__load-more-loading,
.vp-portfolio__loading & .vp-pagination__load-more > span,
&.vp-pagination__no-more .vp-pagination__load-more > span,
.vp-portfolio__loading &.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
display: none;
}
.vp-pagination__load-more > span,
.vp-portfolio__loading & .vp-pagination__load-more > .vp-pagination__load-more-loading,
&.vp-pagination__no-more .vp-pagination__load-more > .vp-pagination__load-more-no-more {
display: block;
}
// disable no more and loading buttons
&.vp-pagination__no-more .vp-pagination__load-more,
.vp-portfolio__loading & .vp-pagination__load-more {
pointer-events: none;
cursor: default;
// Important used to fix focused button background.
background-color: transparent !important;
border: none;
outline: none !important;
transition: none;
}
&.vp-pagination__no-more .vp-pagination__load-more {
opacity: 0.5;
}
// Paged for RTL.
@if variable-exists(rtl) and $rtl {
&[data-vp-pagination-type="paged"] {
.vp-pagination__item-next svg,
.vp-pagination__item-prev svg {
transform: scaleX(-1);
}
}
}
}

View File

@ -0,0 +1,31 @@
/**
* Sort Default CSS Variables
*/
.vp-sort__style-default {
// Items.
--vp-sort-default--items__gap: 10px;
--vp-sort-default--items__min-width: 40px;
--vp-sort-default--items__padding-v: 0.7em;
--vp-sort-default--items__padding-h: 1.3em;
--vp-sort-default--items__font-size: 0.9em;
--vp-sort-default--items__font-weight: 600;
--vp-sort-default--items__line-height: 1.4;
--vp-sort-default--items__text-decoration: none;
--vp-sort-default--items__text-transform: uppercase;
--vp-sort-default--items__letter-spacing: 0.015em;
--vp-sort-default--items__color: var(--vp-color-gray);
--vp-sort-default--items__background-color: var(--vp-color-gray-lighten);
--vp-sort-default--items__border-radius: var(--vp-border-radius);
--vp-sort-default--items-hover__color: var(--vp-color-gray-darken);
--vp-sort-default--items-hover__background-color: var(--vp-color-gray-light);
--vp-sort-default--items-active__color: #fff;
--vp-sort-default--items-active__background-color: var(--vp-color-brand);
// Items Count.
--vp-sort-default--items-count__offset: 8px;
--vp-sort-default--items-count__font-size: 0.6em;
// Transitions.
--vp-sort-default-transition-duration: var(--vp-interactive__transition-duration);
--vp-sort-default-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,30 @@
/**
* Sort Dropdown CSS Variables
*/
.vp-sort__style-dropdown {
// Items.
--vp-sort-dropdown--items__gap: 6px;
--vp-sort-dropdown--items__min-width: 40px;
--vp-sort-dropdown--items__min-height: 2.7929em;
--vp-sort-dropdown--items__padding-v: 0.7em;
--vp-sort-dropdown--items__padding-h: 1.3em;
--vp-sort-dropdown--items__padding-right: 0.75em;
--vp-sort-dropdown--items__font-size: 0.9em;
--vp-sort-dropdown--items__font-weight: 600;
--vp-sort-dropdown--items__line-height: 1.4;
--vp-sort-dropdown--items__text-decoration: none;
--vp-sort-dropdown--items__text-transform: uppercase;
--vp-sort-dropdown--items__letter-spacing: 0.015em;
--vp-sort-dropdown--items__height: auto;
--vp-sort-dropdown--items__color: var(--vp-color-gray);
--vp-sort-dropdown--items__background-color: var(--vp-color-gray-lighten);
--vp-sort-dropdown--items__border-radius: var(--vp-border-radius);
--vp-sort-dropdown--items__arrow: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e);
--vp-sort-dropdown--items__arrow-size: 0.6em;
--vp-sort-dropdown--items-hover__color: var(--vp-color-gray-darken);
--vp-sort-dropdown--items-hover__background-color: var(--vp-color-gray-light);
// Transitions.
--vp-sort-dropdown-transition-duration: var(--vp-interactive__transition-duration);
--vp-sort-dropdown-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,30 @@
<?php
/**
* Dropdown sort template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-sort__style-dropdown">
<select>
<?php
foreach ( $args['items'] as $item ) {
?>
<option class="<?php echo esc_attr( $item['class'] ); ?>" data-vp-url="<?php echo esc_url( $item['url'] ); ?>" data-vp-sort="<?php echo esc_attr( $item['sort'] ); ?>" value="<?php echo esc_attr( $item['sort'] ); ?>" <?php selected( $item['active'] ); ?>>
<?php echo esc_html( $item['label'] ); ?>
</option>
<?php
}
?>
</select>
</div>

View File

@ -0,0 +1 @@
.vp-sort__style-dropdown{--vp-sort-dropdown--items__gap:6px;--vp-sort-dropdown--items__min-width:40px;--vp-sort-dropdown--items__min-height:2.7929em;--vp-sort-dropdown--items__padding-v:0.7em;--vp-sort-dropdown--items__padding-h:1.3em;--vp-sort-dropdown--items__padding-right:0.75em;--vp-sort-dropdown--items__font-size:0.9em;--vp-sort-dropdown--items__font-weight:600;--vp-sort-dropdown--items__line-height:1.4;--vp-sort-dropdown--items__text-decoration:none;--vp-sort-dropdown--items__text-transform:uppercase;--vp-sort-dropdown--items__letter-spacing:0.015em;--vp-sort-dropdown--items__height:auto;--vp-sort-dropdown--items__color:var(--vp-color-gray);--vp-sort-dropdown--items__background-color:var(--vp-color-gray-lighten);--vp-sort-dropdown--items__border-radius:var(--vp-border-radius);--vp-sort-dropdown--items__arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");--vp-sort-dropdown--items__arrow-size:0.6em;--vp-sort-dropdown--items-hover__color:var(--vp-color-gray-darken);--vp-sort-dropdown--items-hover__background-color:var(--vp-color-gray-light);--vp-sort-dropdown-transition-duration:var(--vp-interactive__transition-duration);--vp-sort-dropdown-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-sort-dropdown--items__gap)}.vp-sort__style-dropdown select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--vp-sort-dropdown--items__background-color);background-image:var(--vp-sort-dropdown--items__arrow);background-position:left var(--vp-sort-dropdown--items__padding-right) center;background-repeat:no-repeat;background-size:var(--vp-sort-dropdown--items__arrow-size);border:none;border-radius:var(--vp-sort-dropdown--items__border-radius);color:var(--vp-sort-dropdown--items__color);display:block;flex:0 0 auto;font-size:var(--vp-sort-dropdown--items__font-size);font-weight:var(--vp-sort-dropdown--items__font-weight);height:var(--vp-sort-dropdown--items__height);letter-spacing:var(--vp-sort-dropdown--items__letter-spacing);line-height:var(--vp-sort-dropdown--items__line-height);max-width:100%;min-height:var(--vp-sort-dropdown--items__min-height);min-width:var(--vp-sort-dropdown--items__min-width);padding:var(--vp-sort-dropdown--items__padding-v) var(--vp-sort-dropdown--items__padding-h);padding-left:calc(var(--vp-sort-dropdown--items__padding-right) + var(--vp-sort-dropdown--items__arrow-size));-webkit-text-decoration:var(--vp-sort-dropdown--items__text-decoration);text-decoration:var(--vp-sort-dropdown--items__text-decoration);text-transform:var(--vp-sort-dropdown--items__text-transform);transition:var(--vp-sort-dropdown-transition-duration) background-color var(--vp-sort-dropdown-transition-easing),var(--vp-sort-dropdown-transition-duration) color var(--vp-sort-dropdown-transition-easing)}.vp-sort__style-dropdown select:focus,.vp-sort__style-dropdown select:hover{background-color:var(--vp-sort-dropdown--items-hover__background-color);color:var(--vp-sort-dropdown--items-hover__color)}

View File

@ -0,0 +1 @@
.vp-sort__style-dropdown{--vp-sort-dropdown--items__gap:6px;--vp-sort-dropdown--items__min-width:40px;--vp-sort-dropdown--items__min-height:2.7929em;--vp-sort-dropdown--items__padding-v:0.7em;--vp-sort-dropdown--items__padding-h:1.3em;--vp-sort-dropdown--items__padding-right:0.75em;--vp-sort-dropdown--items__font-size:0.9em;--vp-sort-dropdown--items__font-weight:600;--vp-sort-dropdown--items__line-height:1.4;--vp-sort-dropdown--items__text-decoration:none;--vp-sort-dropdown--items__text-transform:uppercase;--vp-sort-dropdown--items__letter-spacing:0.015em;--vp-sort-dropdown--items__height:auto;--vp-sort-dropdown--items__color:var(--vp-color-gray);--vp-sort-dropdown--items__background-color:var(--vp-color-gray-lighten);--vp-sort-dropdown--items__border-radius:var(--vp-border-radius);--vp-sort-dropdown--items__arrow:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");--vp-sort-dropdown--items__arrow-size:0.6em;--vp-sort-dropdown--items-hover__color:var(--vp-color-gray-darken);--vp-sort-dropdown--items-hover__background-color:var(--vp-color-gray-light);--vp-sort-dropdown-transition-duration:var(--vp-interactive__transition-duration);--vp-sort-dropdown-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap;gap:var(--vp-sort-dropdown--items__gap)}.vp-sort__style-dropdown select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--vp-sort-dropdown--items__background-color);background-image:var(--vp-sort-dropdown--items__arrow);background-position:right var(--vp-sort-dropdown--items__padding-right) center;background-repeat:no-repeat;background-size:var(--vp-sort-dropdown--items__arrow-size);border:none;border-radius:var(--vp-sort-dropdown--items__border-radius);color:var(--vp-sort-dropdown--items__color);display:block;flex:0 0 auto;font-size:var(--vp-sort-dropdown--items__font-size);font-weight:var(--vp-sort-dropdown--items__font-weight);height:var(--vp-sort-dropdown--items__height);letter-spacing:var(--vp-sort-dropdown--items__letter-spacing);line-height:var(--vp-sort-dropdown--items__line-height);max-width:100%;min-height:var(--vp-sort-dropdown--items__min-height);min-width:var(--vp-sort-dropdown--items__min-width);padding:var(--vp-sort-dropdown--items__padding-v) var(--vp-sort-dropdown--items__padding-h);padding-right:calc(var(--vp-sort-dropdown--items__padding-right) + var(--vp-sort-dropdown--items__arrow-size));-webkit-text-decoration:var(--vp-sort-dropdown--items__text-decoration);text-decoration:var(--vp-sort-dropdown--items__text-decoration);text-transform:var(--vp-sort-dropdown--items__text-transform);transition:var(--vp-sort-dropdown-transition-duration) background-color var(--vp-sort-dropdown-transition-easing),var(--vp-sort-dropdown-transition-duration) color var(--vp-sort-dropdown-transition-easing)}.vp-sort__style-dropdown select:focus,.vp-sort__style-dropdown select:hover{background-color:var(--vp-sort-dropdown--items-hover__background-color);color:var(--vp-sort-dropdown--items-hover__color)}

View File

@ -0,0 +1,43 @@
@import "./variables";
/**
* Dropdown sort style
*/
.vp-sort__style-dropdown {
display: flex;
flex-wrap: wrap;
gap: var(--vp-sort-dropdown--items__gap);
select {
display: block;
flex: 0 0 auto;
min-width: var(--vp-sort-dropdown--items__min-width);
max-width: 100%;
height: var(--vp-sort-dropdown--items__height);
min-height: var(--vp-sort-dropdown--items__min-height);
padding: var(--vp-sort-dropdown--items__padding-v) var(--vp-sort-dropdown--items__padding-h);
padding-right: calc(var(--vp-sort-dropdown--items__padding-right) + var(--vp-sort-dropdown--items__arrow-size));
font-size: var(--vp-sort-dropdown--items__font-size);
font-weight: var(--vp-sort-dropdown--items__font-weight);
line-height: var(--vp-sort-dropdown--items__line-height);
color: var(--vp-sort-dropdown--items__color);
text-decoration: var(--vp-sort-dropdown--items__text-decoration);
text-transform: var(--vp-sort-dropdown--items__text-transform);
letter-spacing: var(--vp-sort-dropdown--items__letter-spacing);
background-color: var(--vp-sort-dropdown--items__background-color);
background-image: var(--vp-sort-dropdown--items__arrow);
background-repeat: no-repeat;
background-position: right var(--vp-sort-dropdown--items__padding-right) center;
background-size: var(--vp-sort-dropdown--items__arrow-size);
border: none;
border-radius: var(--vp-sort-dropdown--items__border-radius);
transition: var(--vp-sort-dropdown-transition-duration) background-color var(--vp-sort-dropdown-transition-easing), var(--vp-sort-dropdown-transition-duration) color var(--vp-sort-dropdown-transition-easing);
appearance: none;
&:hover,
&:focus {
color: var(--vp-sort-dropdown--items-hover__color);
background-color: var(--vp-sort-dropdown--items-hover__background-color);
}
}
}

View File

@ -0,0 +1,25 @@
/**
* Sort Minimal CSS Variables
*/
.vp-sort__style-minimal {
// Items.
--vp-sort-minimal--items__padding-v: 0.7em;
--vp-sort-minimal--items__padding-h: 1em;
--vp-sort-minimal--items__font-size: 0.9em;
--vp-sort-minimal--items__font-weight: 600;
--vp-sort-minimal--items__line-height: 1.4;
--vp-sort-minimal--items__text-decoration: none;
--vp-sort-minimal--items__text-transform: uppercase;
--vp-sort-minimal--items__letter-spacing: 0.015em;
--vp-sort-minimal--items__color: inherit;
--vp-sort-minimal--items-hover__color: var(--vp-color-brand);
--vp-sort-minimal--items-active__color: var(--vp-color-brand);
// Items Count.
--vp-sort-minimal--items-count__offset: 8px;
--vp-sort-minimal--items-count__font-size: 0.6em;
// Transitions.
--vp-sort-minimal-transition-duration: var(--vp-interactive__transition-duration);
--vp-sort-minimal-transition-easing: var(--vp-interactive__transition-easing);
}

View File

@ -0,0 +1,30 @@
<?php
/**
* Minimal sort template.
*
* @var $args
*
* @package visual-portfolio
*/
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div class="<?php echo esc_attr( $args['class'] ); ?> vp-sort__style-minimal">
<?php
foreach ( $args['items'] as $item ) {
?>
<div class="<?php echo esc_attr( $item['class'] ); ?>">
<a href="<?php echo esc_url( $item['url'] ); ?>" data-vp-sort="<?php echo esc_attr( $item['sort'] ); ?>">
<?php echo esc_html( $item['label'] ); ?>
</a>
</div>
<?php
}
?>
</div>

View File

@ -0,0 +1 @@
.vp-sort__style-minimal{--vp-sort-minimal--items__padding-v:0.7em;--vp-sort-minimal--items__padding-h:1em;--vp-sort-minimal--items__font-size:0.9em;--vp-sort-minimal--items__font-weight:600;--vp-sort-minimal--items__line-height:1.4;--vp-sort-minimal--items__text-decoration:none;--vp-sort-minimal--items__text-transform:uppercase;--vp-sort-minimal--items__letter-spacing:0.015em;--vp-sort-minimal--items__color:inherit;--vp-sort-minimal--items-hover__color:var(--vp-color-brand);--vp-sort-minimal--items-active__color:var(--vp-color-brand);--vp-sort-minimal--items-count__offset:8px;--vp-sort-minimal--items-count__font-size:0.6em;--vp-sort-minimal-transition-duration:var(--vp-interactive__transition-duration);--vp-sort-minimal-transition-easing:var(--vp-interactive__transition-easing);display:flex;flex-wrap:wrap}.vp-sort__style-minimal .vp-sort__item a{box-shadow:none;outline:none}.vp-portfolio__layout-elements-align-left .vp-sort__style-minimal{justify-content:flex-start}.vp-portfolio__layout-elements-align-center .vp-sort__style-minimal{justify-content:center}.vp-portfolio__layout-elements-align-right .vp-sort__style-minimal{justify-content:flex-end}.vp-sort__style-minimal .vp-sort__item{flex:0 0 auto;max-width:100%;text-align:center}.vp-sort__style-minimal .vp-sort__item>*{color:var(--vp-sort-minimal--items__color);display:block;font-size:var(--vp-sort-minimal--items__font-size);font-weight:var(--vp-sort-minimal--items__font-weight);letter-spacing:var(--vp-sort-minimal--items__letter-spacing);line-height:var(--vp-sort-minimal--items__line-height);padding:var(--vp-sort-minimal--items__padding-v) var(--vp-sort-minimal--items__padding-h);-webkit-text-decoration:var(--vp-sort-minimal--items__text-decoration);text-decoration:var(--vp-sort-minimal--items__text-decoration);text-transform:var(--vp-sort-minimal--items__text-transform);transition:var(--vp-sort-minimal-transition-duration) color var(--vp-sort-minimal-transition-easing)}.vp-sort__style-minimal .vp-sort__item>a:focus,.vp-sort__style-minimal .vp-sort__item>a:hover{color:var(--vp-sort-minimal--items-hover__color)}.vp-sort__style-minimal .vp-sort__item.vp-sort__item-active{--vp-sort-minimal--items__color:var(--vp-sort-minimal--items-active__color);--vp-sort-minimal--items-hover__color:var(--vp-sort-minimal--items-active__color)}.vp-sort__style-minimal .vp-sort__item.vp-sort__item-active>*{cursor:default}.vp-sort__style-minimal .vp-sort__item .vp-sort__item-count{float:left;font-size:var(--vp-sort-minimal--items-count__font-size);margin-right:var(--vp-sort-minimal--items-count__offset)}

Some files were not shown because too many files have changed in this diff Show More