mirror of
https://ghproxy.net/https://github.com/AlxMedia/featureon.git
synced 2025-08-28 10:28:33 +08:00
Update to Kirki 4.2.0
This commit is contained in:
AlxMedia
parent
0185d24e05
commit
2880533a51
440 changed files with 6230 additions and 5211 deletions
21
functions/kirki/kirki-packages/control-checkbox/LICENSE
Normal file
21
functions/kirki/kirki-packages/control-checkbox/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2019 kirki-framework
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
2
functions/kirki/kirki-packages/control-checkbox/dist/control.css
vendored
Normal file
2
functions/kirki/kirki-packages/control-checkbox/dist/control.css
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.customize-control-kirki-toggle .kirki-toggle{align-items:flex-start;display:flex;justify-content:space-between}.customize-control-kirki-toggle .kirki-toggle .kirki-control-label{width:80%}.customize-control-kirki-toggle .kirki-toggle .kirki-control-form{text-align:right;width:20%}.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label{width:100%}.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label:before{right:0}.customize-control-kirki-toggle .kirki-toggle .kirki-toggle-switch-label:after{right:18px}.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label{padding:10px 0 12px 44px;text-align:left}.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label:after,.customize-control-kirki-switch .kirki-switch .kirki-toggle-switch-label:before{left:0}.customize-control-kirki-switch .kirki-switch .toggle-off,.customize-control-kirki-switch .kirki-switch .toggle-on{bottom:-2px;padding-left:5px;position:relative}.customize-control-kirki-switch .kirki-switch .toggle-on{color:#0073aa;display:none}.customize-control-kirki-switch .kirki-switch .toggle-off{color:#82878c;display:inline-block}.kirki-toggle-switch-label{cursor:pointer;display:inline-block;position:relative}.kirki-toggle-switch-label:after,.kirki-toggle-switch-label:before{box-sizing:border-box;content:"";margin:0;outline:0;position:absolute;top:50%;transform:translate3d(0,-50%,0);transition:all .35s cubic-bezier(0,.95,.38,.98),background-color .15s ease}.kirki-toggle-switch-label:before{background-color:#b4b9be;border:1px solid #b4b9be;border-radius:8px;height:14px;width:37px}.kirki-toggle-switch-label:after{background-color:#999;border:1px solid rgba(0,0,0,.1);border-radius:50%;height:22px;width:22px}.kirki-toggle-switch-input{opacity:0}.kirki-toggle-switch-input:checked+.kirki-toggle-switch-label:after{background-color:#0073aa;transform:translate3d(100%,-50%,0)}.kirki-toggle-switch-input:checked+.kirki-toggle-switch-label .toggle-on{display:inline-block}.kirki-toggle-switch-input:checked+.kirki-toggle-switch-label .toggle-off{display:none}
|
||||
/*# sourceMappingURL=control.css.map */
|
||||
1
functions/kirki/kirki-packages/control-checkbox/dist/control.css.map
vendored
Normal file
1
functions/kirki/kirki-packages/control-checkbox/dist/control.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
functions/kirki/kirki-packages/control-checkbox/dist/control.js
vendored
Normal file
2
functions/kirki/kirki-packages/control-checkbox/dist/control.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
!function(){var i={initKirkiControl:function(i){(i=i||this).container.on("change","input",(function(){i.setting.set(jQuery(this).is(":checked"))}))}};wp.customize.controlConstructor["kirki-checkbox"]=wp.customize.kirkiDynamicControl.extend(i),wp.customize.controlConstructor["kirki-switch"]=wp.customize.kirkiDynamicControl.extend(i),wp.customize.controlConstructor["kirki-toggle"]=wp.customize.kirkiDynamicControl.extend(i)}();
|
||||
//# sourceMappingURL=control.js.map
|
||||
1
functions/kirki/kirki-packages/control-checkbox/dist/control.js.map
vendored
Normal file
1
functions/kirki/kirki-packages/control-checkbox/dist/control.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"mappings":"YAEA,IAAIA,EAAsB,CAEzBC,iBAAkB,SAAUC,IAC3BA,EAAUA,GAAWC,MACbC,UAAUC,GAAI,SAAU,SAAS,WACxCH,EAAQI,QAAQC,IAAKC,OAAQL,MAAOM,GAAI,kBAK3CC,GAAGC,UAAUC,mBAAmB,kBAAoBF,GAAGC,UAAUE,oBAAoBC,OAAQd,GAC7FU,GAAGC,UAAUC,mBAAmB,gBAAoBF,GAAGC,UAAUE,oBAAoBC,OAAQd,GAC7FU,GAAGC,UAAUC,mBAAmB,gBAAoBF,GAAGC,UAAUE,oBAAoBC,OAAQd","sources":["src/control.js"],"sourcesContent":["import \"./control.scss\";\n\nvar kirkiCheckboxScript = {\n\n\tinitKirkiControl: function( control ) {\n\t\tcontrol = control || this;\n\t\tcontrol.container.on( 'change', 'input', function() {\n\t\t\tcontrol.setting.set( jQuery( this ).is( ':checked' ) );\n\t\t} );\n\t}\n};\n\nwp.customize.controlConstructor['kirki-checkbox'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );\nwp.customize.controlConstructor['kirki-switch'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );\nwp.customize.controlConstructor['kirki-toggle'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );\n"],"names":["$1abc80d3e2df1201$var$kirkiCheckboxScript","initKirkiControl","control","this","container","on","setting","set","jQuery","is","wp","customize","controlConstructor","kirkiDynamicControl","extend"],"version":3,"file":"control.js.map"}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<?php
|
||||
/**
|
||||
* Customizer Control: checkbox.
|
||||
*
|
||||
* Creates a new custom control.
|
||||
* Custom controls contains all background-related options.
|
||||
*
|
||||
* @package kirki-framework/control-checkbox
|
||||
* @copyright Copyright (c) 2023, Themeum
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Control;
|
||||
|
||||
use Kirki\Control\Base;
|
||||
use Kirki\URL;
|
||||
|
||||
/**
|
||||
* Adds a checkbox control.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox extends Base {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-checkbox';
|
||||
|
||||
/**
|
||||
* The control version.
|
||||
*
|
||||
* @static
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public static $control_ver = '1.0.3';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
public function enqueue() {
|
||||
parent::enqueue();
|
||||
|
||||
// Enqueue the script.
|
||||
wp_enqueue_script( 'kirki-control-checkbox', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'kirki-control-base' ], self::$control_ver, false );
|
||||
|
||||
// Enqueue the style.
|
||||
wp_enqueue_style( 'kirki-control-checkbox-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<input
|
||||
id="_customize-input-{{ data.id }}"
|
||||
type="checkbox"
|
||||
value="{{ data.value }}"
|
||||
{{{ data.link }}}
|
||||
<# if ( data.description ) { #>aria-describedby="_customize-description-{{ data.id }}"<# } #>
|
||||
<# if ( data.value ) { #>checked="checked"<# } #>
|
||||
/>
|
||||
<label for="_customize-input-{{ data.id }}">{{{ data.label }}}</label>
|
||||
<# if ( data.description ) { #>
|
||||
<span id="_customize-description-{{ data.id }}" class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<?php
|
||||
/**
|
||||
* Customizer Control: switch.
|
||||
*
|
||||
* @package kirki-framework/checkbox
|
||||
* @copyright Copyright (c) 2023, Themeum
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Control;
|
||||
|
||||
use Kirki\Control\Base;
|
||||
use Kirki\URL;
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch control (modified checkbox).
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox_Switch extends Base {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-switch';
|
||||
|
||||
/**
|
||||
* The control version.
|
||||
*
|
||||
* @static
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public static $control_ver = '1.0.3';
|
||||
|
||||
/**
|
||||
* Enqueue control related scripts/styles.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
public function enqueue() {
|
||||
|
||||
parent::enqueue();
|
||||
|
||||
// Enqueue the script.
|
||||
wp_enqueue_script( 'kirki-control-checkbox', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'kirki-control-base' ], self::$control_ver, false );
|
||||
|
||||
// Enqueue the style.
|
||||
wp_enqueue_style( 'kirki-control-checkbox-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Refresh the parameters passed to the JavaScript via JSON.
|
||||
*
|
||||
* @since 3.4.0
|
||||
*/
|
||||
public function to_json() {
|
||||
|
||||
// Get the basics from the parent class.
|
||||
parent::to_json();
|
||||
|
||||
$this->json['checkboxType'] = str_ireplace( 'kirki-', '', $this->type );
|
||||
|
||||
$this->json['defaultChoices'] = [
|
||||
'on' => __( 'On', 'kirki' ),
|
||||
'off' => __( 'Off', 'kirki' ),
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* An Underscore (JS) template for this control's content (but not its container).
|
||||
*
|
||||
* Class variables for this control class are available in the `data` JS object;
|
||||
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
|
||||
*
|
||||
* @see WP_Customize_Control::print_template()
|
||||
*
|
||||
* @access protected
|
||||
* @since 1.0
|
||||
* @return void
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
|
||||
<div class="kirki-{{ data.checkboxType }}-control kirki-{{ data.checkboxType }}">
|
||||
<# if ( data.label || data.description ) { #>
|
||||
<div class="kirki-control-label">
|
||||
<# if ( data.label ) { #>
|
||||
<label class="customize-control-title" for="kirki_{{ data.checkboxType }}_{{ data.id }}">
|
||||
{{{ data.label }}}
|
||||
</label>
|
||||
<# } #>
|
||||
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
</div>
|
||||
<# } #>
|
||||
|
||||
<div class="kirki-control-form">
|
||||
<input class="screen-reader-text kirki-toggle-switch-input" {{{ data.inputAttrs }}} name="kirki_{{ data.checkboxType }}_{{ data.id }}" id="kirki_{{ data.checkboxType }}_{{ data.id }}" type="checkbox" value="{{ data.value }}" {{{ data.link }}}<# if ( '1' == data.value ) { #> checked<# } #> />
|
||||
<label class="kirki-toggle-switch-label" for="kirki_{{ data.checkboxType }}_{{ data.id }}">
|
||||
<# if ('switch' === data.checkboxType) { #>
|
||||
<span class="toggle-on">
|
||||
<# data.choices.on = data.choices.on || data.defaultChoices.on #>
|
||||
{{ data.choices.on }}
|
||||
</span>
|
||||
<span class="toggle-off">
|
||||
<# data.choices.off = data.choices.off || data.defaultChoices.off #>
|
||||
{{ data.choices.off }}
|
||||
</span>
|
||||
<# } #>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?php
|
||||
/**
|
||||
* Customizer Control: toggle.
|
||||
*
|
||||
* @package kirki-framework/checkbox
|
||||
* @copyright Copyright (c) 2023, Themeum
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Control;
|
||||
|
||||
// Exit if accessed directly.
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch control (modified checkbox).
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox_Toggle extends Checkbox_Switch {
|
||||
|
||||
/**
|
||||
* The control type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-toggle';
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<?php
|
||||
/**
|
||||
* Override field methods
|
||||
*
|
||||
* @package kirki-framework/checkbox
|
||||
* @copyright Copyright (c) 2023, Themeum
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Field;
|
||||
|
||||
use Kirki\Field;
|
||||
|
||||
/**
|
||||
* Field overrides.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox extends Field {
|
||||
|
||||
/**
|
||||
* The field type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-checkbox';
|
||||
|
||||
/**
|
||||
* The control class-name.
|
||||
*
|
||||
* @access protected
|
||||
* @since 0.1
|
||||
* @var string
|
||||
*/
|
||||
protected $control_class = '\Kirki\Control\Checkbox';
|
||||
|
||||
/**
|
||||
* Whether we should register the control class for JS-templating or not.
|
||||
*
|
||||
* @access protected
|
||||
* @since 0.1
|
||||
* @var bool
|
||||
*/
|
||||
protected $control_has_js_template = true;
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the setting.
|
||||
*
|
||||
* @access public
|
||||
* @since 0.1
|
||||
* @param array $args The field arguments.
|
||||
* @param WP_Customize_Manager $wp_customize The customizer instance.
|
||||
* @return array
|
||||
*/
|
||||
public function filter_setting_args( $args, $wp_customize ) {
|
||||
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_setting_args( $args, $wp_customize );
|
||||
|
||||
// Set the sanitize-callback if none is defined.
|
||||
if ( ! isset( $args['sanitize_callback'] ) || ! $args['sanitize_callback'] ) {
|
||||
$args['sanitize_callback'] = function( $value ) {
|
||||
return ( '0' === $value || 'false' === $value ) ? false : (bool) $value;
|
||||
};
|
||||
}
|
||||
|
||||
$args['default'] = isset( $args['default'] ) ? $args['default'] : false;
|
||||
|
||||
// Make sure the default is formatted as boolean.
|
||||
$args['default'] = (bool) ( 1 === $args['default'] || '1' === $args['default'] || true === $args['default'] || 'true' === $args['default'] || 'on' === $args['default'] );
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the control.
|
||||
*
|
||||
* @access public
|
||||
* @since 0.1
|
||||
* @param array $args The field arguments.
|
||||
* @param WP_Customize_Manager $wp_customize The customizer instance.
|
||||
* @return array
|
||||
*/
|
||||
public function filter_control_args( $args, $wp_customize ) {
|
||||
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_control_args( $args, $wp_customize );
|
||||
$args['type'] = 'kirki-checkbox';
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<?php
|
||||
/**
|
||||
* Override field methods
|
||||
*
|
||||
* @package kirki-framework/checkbox
|
||||
* @copyright Copyright (c) 2023, Themeum
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Field;
|
||||
|
||||
/**
|
||||
* Field overrides.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox_Switch extends Checkbox {
|
||||
|
||||
/**
|
||||
* The field type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-switch';
|
||||
|
||||
/**
|
||||
* The control class-name.
|
||||
*
|
||||
* @access protected
|
||||
* @since 0.1
|
||||
* @var string
|
||||
*/
|
||||
protected $control_class = '\Kirki\Control\Checkbox_Switch';
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the control.
|
||||
*
|
||||
* @access public
|
||||
* @since 0.1
|
||||
* @param array $args The field arguments.
|
||||
* @param WP_Customize_Manager $wp_customize The customizer instance.
|
||||
* @return array
|
||||
*/
|
||||
public function filter_control_args( $args, $wp_customize ) {
|
||||
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_control_args( $args, $wp_customize );
|
||||
$args['type'] = 'kirki-switch';
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<?php
|
||||
/**
|
||||
* Override field methods
|
||||
*
|
||||
* @package kirki-framework/checkbox
|
||||
* @since 1.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Field;
|
||||
|
||||
/**
|
||||
* Field overrides.
|
||||
*
|
||||
* @since 1.0
|
||||
*/
|
||||
class Checkbox_Toggle extends Checkbox {
|
||||
|
||||
/**
|
||||
* The field type.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0
|
||||
* @var string
|
||||
*/
|
||||
public $type = 'kirki-toggle';
|
||||
|
||||
/**
|
||||
* The control class-name.
|
||||
*
|
||||
* @access protected
|
||||
* @since 0.1
|
||||
* @var string
|
||||
*/
|
||||
protected $control_class = '\Kirki\Control\Checkbox_Toggle';
|
||||
|
||||
/**
|
||||
* Filter arguments before creating the control.
|
||||
*
|
||||
* @access public
|
||||
* @since 0.1
|
||||
* @param array $args The field arguments.
|
||||
* @param WP_Customize_Manager $wp_customize The customizer instance.
|
||||
* @return array
|
||||
*/
|
||||
public function filter_control_args( $args, $wp_customize ) {
|
||||
|
||||
if ( $args['settings'] === $this->args['settings'] ) {
|
||||
$args = parent::filter_control_args( $args, $wp_customize );
|
||||
$args['type'] = 'kirki-toggle';
|
||||
}
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import "./control.scss";
|
||||
|
||||
var kirkiCheckboxScript = {
|
||||
|
||||
initKirkiControl: function( control ) {
|
||||
control = control || this;
|
||||
control.container.on( 'change', 'input', function() {
|
||||
control.setting.set( jQuery( this ).is( ':checked' ) );
|
||||
} );
|
||||
}
|
||||
};
|
||||
|
||||
wp.customize.controlConstructor['kirki-checkbox'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );
|
||||
wp.customize.controlConstructor['kirki-switch'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );
|
||||
wp.customize.controlConstructor['kirki-toggle'] = wp.customize.kirkiDynamicControl.extend( kirkiCheckboxScript );
|
||||
126
functions/kirki/kirki-packages/control-checkbox/src/control.scss
Normal file
126
functions/kirki/kirki-packages/control-checkbox/src/control.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
@import "scss/vars";
|
||||
|
||||
.customize-control-kirki-toggle {
|
||||
.kirki-toggle {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
.kirki-control-label {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.kirki-control-form {
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.kirki-toggle-switch-label {
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customize-control-kirki-switch {
|
||||
.kirki-switch {
|
||||
.kirki-toggle-switch-label {
|
||||
padding: 10px 0 12px 44px;
|
||||
text-align: left;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-on,
|
||||
.toggle-off {
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
display: none;
|
||||
color: $color-wp-blue;
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
display: inline-block;
|
||||
color: $color-dark-silver-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kirki-toggle-switch-label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98),
|
||||
background-color 150ms ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 37px;
|
||||
height: 14px;
|
||||
// background-color: $color-silver-gray;
|
||||
background-color: $color-light-silver-gray;
|
||||
border: 1px solid $color-light-silver-gray;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: $color-medium-gray;
|
||||
border-radius: 50%;
|
||||
// box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.kirki-toggle-switch-input {
|
||||
opacity: 0;
|
||||
|
||||
&:checked {
|
||||
+ .kirki-toggle-switch-label {
|
||||
&::before {
|
||||
// background-color: desaturate(lighten($color-wp-blue, 40%), 40%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $color-wp-blue;
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
// See https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
|
||||
// Colors copied from https://codepen.io/hugobaeta/pen/RNOzoV
|
||||
|
||||
$color-wp-blue: #0073aa;
|
||||
$color-medium-blue: #00a0d2;
|
||||
$color-light-blue: #00b9eb;
|
||||
|
||||
$color-ultra-dark-gray: #191e23;
|
||||
$color-dark-gray: #23282d;
|
||||
$color-base-gray: #32373c;
|
||||
$color-dark-medium-gray: lighten($color-base-gray,15%);
|
||||
$color-dark-silver-gray: #82878c;
|
||||
$color-silver-gray: #a0a5aa;
|
||||
$color-light-silver-gray: #b4b9be;
|
||||
// $color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%);
|
||||
$color-medium-gray: #999;
|
||||
|
||||
$color-gray-900: $color-ultra-dark-gray;
|
||||
$color-gray-800: $color-dark-gray;
|
||||
$color-gray-700: $color-base-gray;
|
||||
$color-gray-600: lighten($color-base-gray,6%);
|
||||
$color-gray-500: lighten($color-base-gray,15%);
|
||||
$color-gray-400: lighten($color-base-gray,20%);
|
||||
$color-gray-300: lighten($color-base-gray,25%);
|
||||
$color-gray-200: lighten($color-base-gray,32%);
|
||||
$color-gray-100: lighten($color-base-gray,38%);
|
||||
|
||||
$color--gray-light-900: lighten($color-base-gray,45%);
|
||||
$color--gray-light-800: lighten($color-base-gray,52%);
|
||||
$color--gray-light-700: lighten($color-base-gray,60%);
|
||||
$color--gray-light-600: lighten($color-base-gray,64%);
|
||||
$color--gray-light-500: lighten($color-base-gray,68%);
|
||||
$color--gray-light-400: lighten($color-base-gray,70%);
|
||||
$color--gray-light-300: lighten($color-base-gray,72%);
|
||||
$color--gray-light-200: lighten($color-base-gray,74%);
|
||||
$color--gray-light-100: lighten($color-base-gray,77%);
|
||||
|
||||
$color-accent-red: #dc3232;
|
||||
$color-accent-fire-orange: #d54e21;
|
||||
$color-accent-orange: #f56e28;
|
||||
$color-accent-yellow: #ffb900;
|
||||
$color-accent-green: #46b450; //old #64b450;
|
||||
$color-accent-blue: $color-medium-blue;
|
||||
$color-accent-purple: #826eb4;
|
||||
|
||||
|
||||
//Tints and Tones and Shades - Oh My!
|
||||
|
||||
$color-accent-red-shade30: shade($color-accent-red,30%);
|
||||
$color-accent-red-shade20: shade($color-accent-red,20%);
|
||||
$color-accent-red-shade10: shade($color-accent-red,10%);
|
||||
$color-accent-red-tint20: tint($color-accent-red,20%);
|
||||
$color-accent-red-tint40: tint($color-accent-red,40%);
|
||||
$color-accent-red-tint60: tint($color-accent-red,60%);
|
||||
$color-accent-red-tint90: tint($color-accent-red,90%);
|
||||
|
||||
$color-accent-fire-orange-shade10: shade($color-accent-fire-orange,10%);
|
||||
$color-accent-fire-orange-shade5: shade($color-accent-fire-orange,5%);
|
||||
$color-accent-orange-tint20: tint($color-accent-orange,20%);
|
||||
$color-accent-orange-tint40: tint($color-accent-orange,40%);
|
||||
$color-accent-orange-tint60: tint($color-accent-orange,60%);
|
||||
$color-accent-orange-tint90: tint($color-accent-orange,90%);
|
||||
|
||||
$color-accent-yellow-tonefire40: mix($color-accent-fire-orange,$color-accent-yellow,40%);
|
||||
$color-accent-yellow-tonefire20: mix($color-accent-fire-orange,$color-accent-yellow,20%);
|
||||
$color-accent-yellow-tint20: tint($color-accent-yellow,20%);
|
||||
$color-accent-yellow-tint40: tint($color-accent-yellow,40%);
|
||||
$color-accent-yellow-tint60: tint($color-accent-yellow,60%);
|
||||
$color-accent-yellow-tint90: tint($color-accent-yellow,90%);
|
||||
|
||||
$color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green,5%),25%);
|
||||
$color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green,5%),15%);
|
||||
$color-accent-green-tint20: tint($color-accent-green,20%);
|
||||
$color-accent-green-tint40: tint($color-accent-green,40%);
|
||||
$color-accent-green-tint60: tint($color-accent-green,60%);
|
||||
$color-accent-green-tint70: tint($color-accent-green,70%);
|
||||
$color-accent-green-tint90: tint($color-accent-green,90%);
|
||||
|
||||
$color-accent-wp-blue-shade10: shade($color-wp-blue,10%);
|
||||
$color-accent-blue-toneblue80: mix($color-wp-blue,$color-accent-blue,80%);
|
||||
$color-accent-blue-toneblue60: mix($color-wp-blue,$color-accent-blue,60%);
|
||||
$color-accent-blue-toneblue40: mix($color-wp-blue,$color-accent-blue,40%);
|
||||
$color-accent-blue-tint20: tint($color-accent-blue,20%);
|
||||
$color-accent-blue-tint40: tint($color-accent-blue,40%);
|
||||
$color-accent-blue-tint60: tint($color-accent-blue,60%);
|
||||
$color-accent-blue-tint75: tint($color-accent-blue,75%);
|
||||
$color-accent-blue-tint90: tint($color-accent-blue,90%);
|
||||
|
||||
$color-accent-purple-shade40: shade($color-accent-purple,40%);
|
||||
$color-accent-purple-shade20: shade($color-accent-purple,20%);
|
||||
$color-accent-purple-tint20: tint($color-accent-purple,20%);
|
||||
$color-accent-purple-tint40: tint($color-accent-purple,40%);
|
||||
$color-accent-purple-tint60: tint($color-accent-purple,60%);
|
||||
$color-accent-purple-tint90: tint($color-accent-purple,90%);
|
||||
|
||||
//Text Colors
|
||||
$textcolor-dark: rgba($color-base-gray,.8);
|
||||
$textcolor-dark-mid: rgba($color-base-gray,.5);
|
||||
$textcolor-light: rgba(#fff,.8);
|
||||
$textcolor-light-mid: rgba(#fff,.5);
|
||||
Loading…
Add table
Add a link
Reference in a new issue
