Kirki - Version 3.0.34

Version Description

Sept. 14 2018, dev time: 21h.

  • Fix: Error when typography fields don't have a font-family. #1916, #1797, #1935. props @mintbird
  • Fix: Allow using "Default Browser Font-Family" in default value (typography fields) #1907. props @mintbird
  • Fix: Envato theme-check error #1914, #1926. props @timelsass
  • Fix: HTTPS webfont load error #1925
  • Fix: Undefined index PHP notice for background-color. 95ca010
  • Fix: Minor Fixes for css-variables added in v3.0.28.
  • New: Allow unitless values in dimension controls.
  • New: (Refactor) Migrated image controls to new structure in preparation of v3.1
  • Update: Updated Google-fonts.
Download this release

Release Info

Developer aristath
Plugin Icon 128x128 Kirki
Version 3.0.34
Comparing to
See all releases

Code changes from version 3.0.33 to 3.0.34

Files changed (161) hide show
  1. assets/images/1c.png +0 -0
  2. assets/images/2cl.png +0 -0
  3. assets/images/2cr.png +0 -0
  4. assets/images/3cl.png +0 -0
  5. assets/images/3cm.png +0 -0
  6. assets/images/3cr.png +0 -0
  7. assets/images/jquery.fs.stepper-arrows.png +0 -0
  8. assets/images/kirki-bottom.png +0 -0
  9. assets/images/kirki-bottom.svg +0 -0
  10. assets/vendor/selectWoo/kirki.css +27 -19
  11. assets/vendor/selectWoo/kirki.css.map +1 -7
  12. class-kirki-autoload.php +1 -1
  13. controls/class-kirki-controls.php +2 -1
  14. controls/css/styles.css +750 -582
  15. controls/js/script.js +221 -255
  16. controls/js/script.min.js +1 -1
  17. controls/php/class-kirki-control-background.php +2 -2
  18. controls/php/class-kirki-control-base.php +5 -4
  19. controls/php/class-kirki-control-checkbox.php +4 -5
  20. controls/php/class-kirki-control-code.php +3 -1
  21. controls/php/class-kirki-control-color-palette.php +1 -1
  22. controls/php/class-kirki-control-color.php +1 -1
  23. controls/php/class-kirki-control-cropped-image.php +1 -1
  24. controls/php/class-kirki-control-custom.php +1 -1
  25. controls/php/class-kirki-control-dashicons.php +1 -1
  26. controls/php/class-kirki-control-date.php +1 -1
  27. controls/php/class-kirki-control-dimension.php +6 -4
  28. controls/php/class-kirki-control-dimensions.php +1 -2
  29. controls/php/class-kirki-control-editor.php +1 -1
  30. controls/php/class-kirki-control-fontawesome.php +2 -2
  31. controls/php/class-kirki-control-generic.php +1 -1
  32. controls/php/class-kirki-control-image.php +1 -61
  33. controls/php/class-kirki-control-multicheck.php +1 -1
  34. controls/php/class-kirki-control-multicolor.php +1 -1
  35. controls/php/class-kirki-control-number.php +1 -1
  36. controls/php/class-kirki-control-palette.php +1 -1
  37. controls/php/class-kirki-control-radio-buttonset.php +1 -1
  38. controls/php/class-kirki-control-radio-image.php +1 -1
  39. controls/php/class-kirki-control-radio.php +1 -1
  40. controls/php/class-kirki-control-repeater.php +4 -5
  41. controls/php/class-kirki-control-select.php +1 -1
  42. controls/php/class-kirki-control-slider.php +9 -7
  43. controls/php/class-kirki-control-sortable.php +1 -1
  44. controls/php/class-kirki-control-switch.php +1 -1
  45. controls/php/class-kirki-control-toggle.php +1 -1
  46. controls/php/class-kirki-control-typography.php +1 -1
  47. controls/php/class-kirki-control-upload.php +1 -1
  48. controls/php/class-kirki-settings-repeater-setting.php +1 -1
  49. controls/views/code.php +1 -1
  50. controls/views/color.php +1 -1
  51. controls/views/generic.php +1 -1
  52. controls/views/number.php +1 -1
  53. controls/views/radio.php +1 -1
  54. controls/views/select.php +1 -1
  55. controls/views/textarea.php +1 -1
  56. core/class-kirki-config.php +1 -1
  57. core/class-kirki-control.php +1 -1
  58. core/class-kirki-field.php +13 -4
  59. core/class-kirki-helper.php +9 -11
  60. core/class-kirki-init.php +1 -1
  61. core/class-kirki-l10n.php +2 -3
  62. core/class-kirki-modules.php +1 -1
  63. core/class-kirki-panel.php +1 -1
  64. core/class-kirki-sanitize-values.php +1 -1
  65. core/class-kirki-section.php +1 -1
  66. core/class-kirki-sections.php +1 -1
  67. core/class-kirki-setting-user-meta.php +0 -4
  68. core/class-kirki-settings.php +10 -8
  69. core/class-kirki-toolkit.php +1 -1
  70. core/class-kirki-util.php +36 -18
  71. core/class-kirki-values.php +2 -4
  72. core/class-kirki.php +1 -1
  73. core/dynamic-css.php +2 -4
  74. deprecated/deprecated.php +5 -1
  75. field/class-kirki-field-background.php +1 -1
  76. field/class-kirki-field-checkbox.php +1 -1
  77. field/class-kirki-field-code.php +1 -1
  78. field/class-kirki-field-color-alpha.php +1 -1
  79. field/class-kirki-field-color-palette.php +1 -1
  80. field/class-kirki-field-color.php +1 -1
  81. field/class-kirki-field-custom.php +1 -1
  82. field/class-kirki-field-dashicons.php +1 -1
  83. field/class-kirki-field-date.php +1 -1
  84. field/class-kirki-field-dimension.php +1 -1
  85. field/class-kirki-field-dimensions.php +1 -1
  86. field/class-kirki-field-editor.php +1 -1
  87. field/class-kirki-field-fontawesome.php +1 -1
  88. field/class-kirki-field-generic.php +1 -1
  89. field/class-kirki-field-group-title.php +1 -1
  90. field/class-kirki-field-image.php +10 -2
  91. field/class-kirki-field-kirki-generic.php +1 -1
  92. field/class-kirki-field-link.php +1 -1
  93. field/class-kirki-field-multicheck.php +1 -1
  94. field/class-kirki-field-multicolor.php +1 -1
  95. field/class-kirki-field-number.php +1 -1
  96. field/class-kirki-field-palette.php +1 -1
  97. field/class-kirki-field-preset.php +1 -1
  98. field/class-kirki-field-radio-buttonset.php +1 -1
  99. field/class-kirki-field-radio-image.php +1 -1
  100. field/class-kirki-field-radio.php +1 -1
  101. field/class-kirki-field-repeater.php +5 -5
  102. field/class-kirki-field-select.php +1 -1
  103. field/class-kirki-field-select2-multiple.php +1 -1
  104. field/class-kirki-field-select2.php +1 -1
  105. field/class-kirki-field-slider.php +1 -1
  106. field/class-kirki-field-sortable.php +1 -1
  107. field/class-kirki-field-spacing.php +1 -1
  108. field/class-kirki-field-switch.php +1 -1
  109. field/class-kirki-field-text.php +1 -1
  110. field/class-kirki-field-textarea.php +1 -1
  111. field/class-kirki-field-toggle.php +1 -1
  112. field/class-kirki-field-typography.php +4 -4
  113. field/class-kirki-field-upload.php +1 -1
  114. field/class-kirki-field-url.php +1 -1
  115. kirki.php +2 -2
  116. lib/class-kirki-color.php +1 -1
  117. modules/css-vars/class-kirki-modules-css-vars.php +6 -5
  118. modules/css-vars/script.js +7 -5
  119. modules/css/class-kirki-css-to-file.php +1 -12
  120. modules/css/class-kirki-modules-css-generator.php +32 -28
  121. modules/css/class-kirki-modules-css.php +1 -1
  122. modules/css/class-kirki-output.php +5 -7
  123. modules/css/field/class-kirki-output-field-background.php +2 -2
  124. modules/css/field/class-kirki-output-field-dimensions.php +1 -1
  125. modules/css/field/class-kirki-output-field-image.php +9 -7
  126. modules/css/field/class-kirki-output-field-multicolor.php +1 -1
  127. modules/css/field/class-kirki-output-field-typography.php +7 -5
  128. modules/css/property/class-kirki-output-property-background-image.php +1 -1
  129. modules/css/property/class-kirki-output-property-background-position.php +1 -1
  130. modules/css/property/class-kirki-output-property-font-family.php +1 -1
  131. modules/css/property/class-kirki-output-property.php +1 -1
  132. modules/custom-sections/class-kirki-modules-custom-sections.php +2 -2
  133. modules/custom-sections/panels/class-kirki-panels-nested-panel.php +10 -8
  134. modules/custom-sections/sections.css +13 -7
  135. modules/custom-sections/sections.css.map +0 -7
  136. modules/custom-sections/sections.scss +0 -35
  137. modules/custom-sections/sections/class-kirki-sections-default-section.php +1 -1
  138. modules/custom-sections/sections/class-kirki-sections-expanded-section.php +1 -1
  139. modules/custom-sections/sections/class-kirki-sections-nested-section.php +12 -10
  140. modules/customizer-branding/class-kirki-modules-customizer-branding.php +2 -2
  141. modules/customizer-styling/class-kirki-modules-customizer-styling.php +101 -103
  142. modules/field-dependencies/class-kirki-modules-field-dependencies.php +1 -1
  143. modules/icons/class-kirki-modules-icons.php +1 -1
  144. modules/loading/class-kirki-modules-loading.php +1 -1
  145. modules/postmessage/class-kirki-modules-postmessage.php +1 -1
  146. modules/preset/class-kirki-modules-preset.php +2 -2
  147. modules/selective-refresh/class-kirki-modules-selective-refresh.php +6 -4
  148. modules/tooltips/class-kirki-modules-tooltips.php +3 -3
  149. modules/tooltips/tooltip.css +32 -26
  150. modules/webfont-loader/class-kirki-modules-webfont-loader.php +1 -1
  151. modules/webfonts/class-kirki-fonts-google-local.php +8 -8
  152. modules/webfonts/class-kirki-fonts-google.php +6 -6
  153. modules/webfonts/class-kirki-fonts.php +1 -1
  154. modules/webfonts/class-kirki-modules-webfonts-async.php +1 -1
  155. modules/webfonts/class-kirki-modules-webfonts-local.php +1 -1
  156. modules/webfonts/class-kirki-modules-webfonts.php +1 -1
  157. modules/webfonts/webfont-files.json +1 -1
  158. modules/webfonts/webfont-names.json +1 -1
  159. modules/webfonts/webfonts.json +1 -1
  160. readme.txt +17 -3
  161. upgrade-notifications.php +1 -1
assets/images/1c.png CHANGED
File without changes
assets/images/2cl.png CHANGED
File without changes
assets/images/2cr.png CHANGED
File without changes
assets/images/3cl.png CHANGED
File without changes
assets/images/3cm.png CHANGED
File without changes
assets/images/3cr.png CHANGED
File without changes
assets/images/jquery.fs.stepper-arrows.png CHANGED
File without changes
assets/images/kirki-bottom.png CHANGED
File without changes
assets/images/kirki-bottom.svg CHANGED
File without changes
assets/vendor/selectWoo/kirki.css CHANGED
@@ -1,28 +1,36 @@
1
.select2-dropdown {
2
border-color: rgba(0, 0, 0, 0.1);
3
- border-radius: 0; }
4
5
.select2-container {
6
min-width: 100px;
7
- width: 100% !important; }
8
- .select2-container--open .select2-dropdown--above,
9
- .select2-container--open .select2-dropdown--below {
10
- z-index: 9999999;
11
- min-width: 100px; }
12
- .select2-container--default .select2-search--dropdown .select2-search__field {
13
- border-color: rgba(0, 0, 0, 0.1); }
14
- .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
15
- border-color: rgba(0, 0, 0, 0.1);
16
- border-radius: 0; }
17
- .select2-container--default .select2-selection--multiple .select2-selection__choice {
18
- background-color: rgba(255, 255, 255, 0);
19
- background-color: transparent;
20
- border: none;
21
- border-radius: 0; }
22
23
.wp-customizer .select2-container {
24
- z-index: 8 !important; }
25
- .wp-customizer .select2-container.select2-container--open {
26
- z-index: 999999 !important; }
27
28
/*# sourceMappingURL=kirki.css.map */
1
.select2-dropdown {
2
border-color: rgba(0, 0, 0, 0.1);
3
+ border-radius: 0;
4
+ }
5
6
.select2-container {
7
min-width: 100px;
8
+ width: 100% !important;
9
+ }
10
+ .select2-container--open .select2-dropdown--above,
11
+ .select2-container--open .select2-dropdown--below {
12
+ z-index: 9999999;
13
+ min-width: 100px;
14
+ }
15
+ .select2-container--default .select2-search--dropdown .select2-search__field {
16
+ border-color: rgba(0, 0, 0, 0.1);
17
+ }
18
+ .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
19
+ border-color: rgba(0, 0, 0, 0.1);
20
+ border-radius: 0;
21
+ }
22
+ .select2-container--default .select2-selection--multiple .select2-selection__choice {
23
+ background-color: rgba(255, 255, 255, 0);
24
+ background-color: transparent;
25
+ border: none;
26
+ border-radius: 0;
27
+ }
28
29
.wp-customizer .select2-container {
30
+ z-index: 8 !important;
31
+ }
32
+ .wp-customizer .select2-container.select2-container--open {
33
+ z-index: 999999 !important;
34
+ }
35
36
/*# sourceMappingURL=kirki.css.map */
assets/vendor/selectWoo/kirki.css.map CHANGED
@@ -1,7 +1 @@
1
- {
2
- "version": 3,
3
- "mappings": "AAAA,iBAAkB;EAChB,YAAY,EAAE,kBAAc;EAC5B,aAAa,EAAE,CAAC;;AAGlB,kBAAmB;EACjB,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,eAAe;EAGpB;mDACyB;IACvB,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,KAAK;EAMhB,4EAAuB;IACrB,YAAY,EAAE,kBAAc;EAK9B,gHACU;IACR,YAAY,EAAE,kBAAc;IAC5B,aAAa,EAAE,CAAC;EAIhB,mFAA2B;IACzB,gBAAgB,EAAE,sBAAmB;IACrC,gBAAgB,EAAE,WAAW;IAC7B,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,CAAC;;AAO1B,iCAAkC;EAChC,OAAO,EAAE,YAAY;EAGnB,yDAAQ;IAEN,OAAO,EAAE,iBAAiB",
4
- "sources": ["kirki.scss"],
5
- "names": [],
6
- "file": "kirki.css"
7
- }
1
+ {"version":3,"sourceRoot":"","sources":["kirki.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;;AAGE;AAAA;EAEE;EACA;;AAMA;EACE;;AAKF;EAEE;EACA;;AAIA;EACE;EACA;EACA;EACA;;;AAOV;EACE;;AAGE;EAEE","file":"kirki.css"}
class-kirki-autoload.php CHANGED
@@ -7,7 +7,7 @@
7
* @category Core
8
* @author Aristeides Stathopoulos
9
* @copyright Copyright (c) 2017, Aristeides Stathopoulos
10
- * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
11
* @since 1.0
12
*/
13
7
* @category Core
8
* @author Aristeides Stathopoulos
9
* @copyright Copyright (c) 2017, Aristeides Stathopoulos
10
+ * @license https://opensource.org/licenses/MIT
11
* @since 1.0
12
*/
13
controls/class-kirki-controls.php CHANGED
@@ -5,7 +5,7 @@
5
* @package Kirki
6
* @subpackage Controls
7
* @copyright Copyright (c) 2017, Aristeides Stathopoulos
8
- * @license http://opensource.org/licenses/https://opensource.org/licenses/MIT
9
* @since 3.0.17
10
*/
11
@@ -25,6 +25,7 @@ class Kirki_Controls {
25
'code',
26
'color',
27
'generic',
28
'number',
29
'radio',
30
'select',
5
* @package Kirki
6
* @subpackage Controls
7
* @copyright Copyright (c) 2017, Aristeides Stathopoulos
8
+ * @license https://opensource.org/licenses/MIT
9
* @since 3.0.17
10
*/
11
25
'code',
26
'color',
27
'generic',
28
+ 'image',
29
'number',
30
'radio',
31
'select',
controls/css/styles.css CHANGED
@@ -1,658 +1,826 @@
1
@charset "UTF-8";
2
.customize-control-kirki-background {
3
- position: relative; }
4
- .customize-control-kirki-background .background-attachment h4,
5
- .customize-control-kirki-background .background-color h4,
6
- .customize-control-kirki-background .background-position h4,
7
- .customize-control-kirki-background .background-repeat h4,
8
- .customize-control-kirki-background .background-size h4 {
9
- margin-bottom: 5px; }
10
- .customize-control-kirki-background .background-attachment .buttonset,
11
- .customize-control-kirki-background .background-size .buttonset {
12
- display: flex;
13
- flex-wrap: wrap; }
14
- .customize-control-kirki-background .background-attachment .buttonset .switch-label,
15
- .customize-control-kirki-background .background-size .buttonset .switch-label {
16
- background: rgba(0, 0, 0, 0.05);
17
- border: 1px solid rgba(0, 0, 0, 0.1);
18
- color: #555;
19
- padding: 0.5em 1em;
20
- margin: 0;
21
- text-align: center;
22
- flex-grow: 1; }
23
- .customize-control-kirki-background .background-attachment .buttonset .switch-input:checked + .switch-label,
24
- .customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
25
- background-color: #3498DB;
26
- color: #fff; }
27
28
.customize-control-kirki-code textarea {
29
width: 100%;
30
- min-height: 200px; }
31
32
.customize-control-kirki-color-palette {
33
- position: relative; }
34
- .customize-control-kirki-color-palette label {
35
- position: relative;
36
- display: inline-block;
37
- padding: 0;
38
- margin: 0; }
39
- .customize-control-kirki-color-palette .colors-wrapper {
40
- max-height: 300px;
41
- overflow-y: auto;
42
- padding: 10px;
43
- display: flex;
44
- flex-wrap: wrap; }
45
- .customize-control-kirki-color-palette .colors-wrapper .color-palette-color {
46
- color: transparent;
47
- display: block;
48
- width: 100%;
49
- height: 100%;
50
- overflow: hidden;
51
- border: 1px solid rgba(0, 0, 0, 0.2); }
52
- .customize-control-kirki-color-palette .colors-wrapper.round label {
53
- padding: 3px; }
54
- .customize-control-kirki-color-palette .colors-wrapper.round .color-palette-color {
55
- border-radius: 50%; }
56
- .customize-control-kirki-color-palette .colors-wrapper.box-shadow .color-palette-color {
57
- box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22); }
58
- .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
59
- border: 0;
60
- width: 150%;
61
- height: 150%;
62
- position: relative;
63
- left: -25%;
64
- top: -25%;
65
- z-index: 1; }
66
- .customize-control-kirki-color-palette .colors-wrapper.with-margin label {
67
- margin: 3px; }
68
- .customize-control-kirki-color-palette .colors-wrapper input {
69
- display: none; }
70
- .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
71
- box-shadow: 1px 1px 10px 1px #333333;
72
- border: 1px solid rgba(0, 0, 0, 0.3); }
73
74
- .customize-control-kirki-color input[data-type="hue"] + .iris-strip-horiz .iris-slider {
75
- background-image: -webkit-linear-gradient(left, red, #ff7f00, yellow, #80ff00, lime, #00ff80, cyan, #007fff, blue, #7f00ff, magenta, #ff0080, red) !important; }
76
.customize-control-kirki-color .iris-picker .iris-square-handle {
77
- z-index: 8; }
78
79
.customize-control-kirki-dashicons {
80
- position: relative; }
81
- .customize-control-kirki-dashicons label {
82
- position: relative;
83
- display: inline-block; }
84
- .customize-control-kirki-dashicons .icons-wrapper {
85
- max-height: 300px;
86
- overflow-y: scroll; }
87
- .customize-control-kirki-dashicons .icons-wrapper h4 {
88
- font-weight: 300;
89
- margin: 0.7em 0; }
90
- .customize-control-kirki-dashicons .icons-wrapper .dashicons {
91
- padding: 3px;
92
- font-size: 25px;
93
- width: 25px;
94
- height: 25px;
95
- border: 1px solid transparent; }
96
- .customize-control-kirki-dashicons .icons-wrapper input {
97
- display: none; }
98
- .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons {
99
- border: 1px solid #3498DB;
100
- color: #000; }
101
102
.wp-customizer div.ui-datepicker {
103
z-index: 500001 !important;
104
width: 255px;
105
background: #fff;
106
- border: 1px solid #dedede; }
107
- .wp-customizer div.ui-datepicker .ui-datepicker-header {
108
- padding: 10px;
109
- background: #e5e5e5;
110
- border-bottom: 1px solid #fff; }
111
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
112
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
113
- display: block;
114
- position: absolute;
115
- width: 1em;
116
- overflow: hidden; }
117
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
118
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after,
119
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
120
- font-family: dashicons; }
121
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after:hover, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before:hover,
122
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after:hover,
123
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before:hover {
124
- cursor: pointer; }
125
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
126
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
127
- display: none; }
128
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
129
- left: 10px; }
130
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
131
- content: "\f341"; }
132
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
133
- right: 10px; }
134
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after {
135
- content: "\f345"; }
136
- .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
137
- text-align: center; }
138
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar {
139
- border-collapse: collapse;
140
- width: 100%; }
141
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar thead {
142
- background: #e5e5e5;
143
- padding: 5px; }
144
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td {
145
- text-align: center; }
146
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a {
147
- display: block;
148
- padding: 5px;
149
- color: #333;
150
- text-decoration: none; }
151
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a.ui-state-active, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a:hover {
152
- color: #fff;
153
- background-color: #0073aa; }
154
- .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled a, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled .ui-state-default a {
155
- color: #999; }
156
157
.customize-control-kirki-dimensions {
158
- position: relative; }
159
- .customize-control-kirki-dimensions .wrapper {
160
- border: 1px solid rgba(0, 0, 0, 0.1);
161
- padding: 10px; }
162
- .customize-control-kirki-dimensions .wrapper .control {
163
- display: flex;
164
- flex-wrap: wrap;
165
- justify-content: space-between; }
166
- .customize-control-kirki-dimensions .wrapper .control > div {
167
- width: 48%; }
168
- .customize-control-kirki-dimensions .wrapper .control > div h5 {
169
- margin: 10px 0 7px; }
170
- .customize-control-kirki-dimensions .wrapper .control > div .inner {
171
- display: flex; }
172
173
.customize-control-kirki-editor textarea {
174
- width: 100%; }
175
176
.customize-control-kirki-generic input {
177
- width: 100%; }
178
.customize-control-kirki-generic textarea {
179
width: 100%;
180
border: 1px solid rgba(0, 0, 0, 0.1);
181
-webkit-box-shadow: none;
182
- box-shadow: none; }
183
184
.customize-control-kirki-multicolor .multicolor-single-color-wrapper {
185
display: flex;
186
- justify-content: space-between; }
187
.customize-control-kirki-multicolor .multicolor-single-label {
188
- order: 2; }
189
.customize-control-kirki-multicolor .wp-picker-container {
190
- width: 100%; }
191
- .customize-control-kirki-multicolor .wp-picker-container > .wp-color-result {
192
- width: 100%; }
193
- .customize-control-kirki-multicolor .wp-picker-container.wp-picker-active + .multicolor-single-label {
194
- display: none; }
195
196
.customize-control-kirki-number .customize-control-content {
197
display: flex;
198
- align-items: stretch; }
199
- .customize-control-kirki-number .customize-control-content input {
200
- width: 100%;
201
- -moz-appearance: textfield; }
202
- .customize-control-kirki-number .customize-control-content input::-webkit-inner-spin-button, .customize-control-kirki-number .customize-control-content input::-webkit-outer-spin-button {
203
- -webkit-appearance: none;
204
- margin: 0; }
205
- .customize-control-kirki-number .customize-control-content .quantity {
206
- min-width: 2rem;
207
- max-width: 2rem;
208
- text-align: center;
209
- line-height: 24px; }
210
-
211
.customize-control-kirki-palette {
212
- position: relative; }
213
- .customize-control-kirki-palette input[type="radio"] {
214
- display: none; }
215
- .customize-control-kirki-palette input[type="radio"]:checked + label {
216
- border: 3px solid rgba(0, 0, 0, 0.4); }
217
- .customize-control-kirki-palette label {
218
- background: none;
219
- padding: 0;
220
- border-top: 3px solid transparent;
221
- border-bottom: 3px solid transparent;
222
- margin-bottom: 5px;
223
- display: flex; }
224
- .customize-control-kirki-palette label span {
225
- padding: 10px 0;
226
- flex-grow: 1;
227
- font-size: 0;
228
- line-height: 10px;
229
- color: rgba(0, 0, 0, 0);
230
- -webkit-transition: all 200ms ease-in-out;
231
- -moz-transition: all 200ms ease-in-out;
232
- -ms-transition: all 200ms ease-in-out;
233
- -o-transition: all 200ms ease-in-out;
234
- transition: all 200ms ease-in-out;
235
- border-top: 1px solid rgba(0, 0, 0, 0.1);
236
- border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
237
- .customize-control-kirki-palette label span:first-child {
238
- border-left: 1px solid rgba(0, 0, 0, 0.1); }
239
- .customize-control-kirki-palette label span:last-child {
240
- border-right: 1px solid rgba(0, 0, 0, 0.1); }
241
- .customize-control-kirki-palette label span:hover {
242
- padding: 10px;
243
- flex-grow: 3;
244
- min-width: 60px;
245
- font-size: 10px;
246
- line-height: 10px;
247
- color: #000; }
248
249
.customize-control-kirki-radio-buttonset .buttonset {
250
display: flex;
251
- flex-wrap: wrap; }
252
- .customize-control-kirki-radio-buttonset .buttonset .switch-label {
253
- background: rgba(0, 0, 0, 0.1);
254
- border: 1px rgba(0, 0, 0, 0.1);
255
- color: #555d66;
256
- margin: 0;
257
- text-align: center;
258
- padding: 0.5em 1em;
259
- flex-grow: 1; }
260
- .customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label {
261
- background-color: #00a0d2;
262
- color: rgba(255, 255, 255, 0.8); }
263
264
.customize-control-kirki-radio-image > .image {
265
display: flex;
266
- flex-wrap: wrap; }
267
.customize-control-kirki-radio-image label {
268
position: relative;
269
- display: inline-block; }
270
- .customize-control-kirki-radio-image label .image-label {
271
- display: none;
272
- position: absolute;
273
- top: 0;
274
- left: 0;
275
- width: 100%;
276
- height: 100%;
277
- background: rgba(255, 255, 255, 0.7);
278
- font-weight: bold; }
279
- .customize-control-kirki-radio-image label .image-label .inner {
280
- width: 100%;
281
- height: 100%;
282
- text-align: center;
283
- padding: 0.5em;
284
- vertical-align: middle; }
285
- .customize-control-kirki-radio-image label:hover .image-label {
286
- display: block; }
287
.customize-control-kirki-radio-image input {
288
- display: none; }
289
- .customize-control-kirki-radio-image input img {
290
- border: 1px solid transparent; }
291
- .customize-control-kirki-radio-image input:checked + label img {
292
- -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
293
- box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
294
- border: 1px solid #3498DB; }
295
- .customize-control-kirki-radio-image input + label .image-clickable {
296
- position: absolute;
297
- top: 0;
298
- bottom: 0;
299
- left: 0;
300
- right: 0;
301
- width: 100%;
302
- height: 100%; }
303
304
.customize-control-kirki-radio {
305
- position: relative; }
306
- .customize-control-kirki-radio input[type=radio] {
307
- width: 18px;
308
- height: 18px; }
309
- .customize-control-kirki-radio input[type=radio]:checked:before {
310
- width: 10px;
311
- height: 10px;
312
- margin: 3px; }
313
- .customize-control-kirki-radio label {
314
- display: list-item;
315
- margin-bottom: 7px; }
316
- .customize-control-kirki-radio label .option-description {
317
- display: block;
318
- color: rgba(0, 0, 0, 0.35);
319
- font-size: 0.9em;
320
- padding-left: 25px; }
321
322
.customize-control-repeater {
323
- position: relative; }
324
- .customize-control-repeater .repeater-fields .repeater-row {
325
- border: 1px solid #e5e5e5;
326
- margin-top: 0.5rem;
327
- background: #eee;
328
- position: relative; }
329
- .customize-control-repeater .repeater-fields .repeater-row.minimized {
330
- border: 1px solid #dfdfdf;
331
- padding: 0; }
332
- .customize-control-repeater .repeater-fields .repeater-row.minimized:hover {
333
- border: 1px solid #e5e5e5; }
334
- .customize-control-repeater .repeater-fields .repeater-row.minimized .repeater-row-content {
335
- display: none; }
336
- .customize-control-repeater .repeater-fields .repeater-row label {
337
- margin-bottom: 12px;
338
- clear: both; }
339
- .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field- {
340
- display: none; }
341
- .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input {
342
- display: none; }
343
- .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input img {
344
- border: 1px solid transparent; }
345
- .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input:checked + label img {
346
- -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
347
- box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
348
- border: 1px solid #3498DB; }
349
- .customize-control-repeater .repeater-fields .repeater-row .repeater-field:last-child {
350
- border-bottom: none;
351
- padding-bottom: 0; }
352
- .customize-control-repeater button.repeater-add {
353
- margin-top: 1rem; }
354
- .customize-control-repeater .repeater-row-content {
355
- padding: 10px 15px;
356
- background: #fff; }
357
- .customize-control-repeater .repeater-field {
358
- margin-bottom: 12px;
359
- width: 100%;
360
- clear: both;
361
- padding-bottom: 12px;
362
- border-bottom: 1px dotted #CCC; }
363
- .customize-control-repeater .repeater-field .customize-control-title {
364
- font-size: 13px;
365
- line-height: initial; }
366
- .customize-control-repeater .repeater-field .customize-control-description {
367
- font-size: 13px;
368
- line-height: initial; }
369
- .customize-control-repeater .repeater-field.repeater-field-hidden {
370
- margin: 0;
371
- padding: 0;
372
- border: 0; }
373
- .customize-control-repeater .repeater-field-select select {
374
- margin-left: 0; }
375
- .customize-control-repeater .repeater-field-checkbox label {
376
- line-height: 28px; }
377
- .customize-control-repeater .repeater-field-checkbox input {
378
- line-height: 28px;
379
- margin-right: 5px; }
380
- .customize-control-repeater .repeater-field-textarea textarea {
381
- width: 100%;
382
- resize: vertical; }
383
- .customize-control-repeater .repeater-row-header {
384
- background: white;
385
- border-bottom: 1px solid #dfdfdf;
386
- position: relative;
387
- padding: 10px 15px;
388
- height: auto;
389
- min-height: 20px;
390
- line-height: 30px;
391
- overflow: hidden;
392
- word-wrap: break-word; }
393
- .customize-control-repeater .repeater-row-header:hover {
394
- cursor: move; }
395
- .customize-control-repeater .repeater-row-header .dashicons {
396
- font-size: 18px;
397
- position: absolute;
398
- right: 12px;
399
- top: 2px;
400
- color: #a0a5aa; }
401
- .customize-control-repeater .repeater-row-label {
402
- font-size: 13px;
403
- font-weight: 600;
404
- line-height: 20px;
405
- display: block;
406
- width: 90%;
407
- overflow: hidden;
408
- height: 18px; }
409
- .customize-control-repeater .repeater-row-remove {
410
- color: #a00; }
411
- .customize-control-repeater .repeater-row-remove:hover {
412
- color: #f00; }
413
- .customize-control-repeater .repeater-minimize {
414
- line-height: 36px; }
415
- .customize-control-repeater .remove-button,
416
- .customize-control-repeater .upload-button {
417
- width: 48%; }
418
419
.kirki-image-attachment {
420
margin: 0;
421
text-align: center;
422
- margin-bottom: 10px; }
423
- .kirki-image-attachment img {
424
- display: inline-block; }
425
426
.kirki-file-attachment {
427
margin: 0;
428
text-align: center;
429
- margin-bottom: 10px; }
430
- .kirki-file-attachment .file {
431
- display: block;
432
- padding: 10px 5px;
433
- border: 1px dotted #c3c3c3;
434
- background: #f9f9f9; }
435
436
.limit {
437
padding: 3px;
438
- border-radius: 3px; }
439
- .limit.highlight {
440
- background: #D32F2F;
441
- color: #fff; }
442
443
.customize-control-kirki-slider .wrapper {
444
display: flex;
445
align-items: center;
446
padding: 15px 0 7px;
447
- position: relative; }
448
- .customize-control-kirki-slider .wrapper .slider-reset {
449
- position: absolute;
450
- top: 0;
451
- right: 0;
452
- font-size: 12px;
453
- transition: 0.3s ease-in-out;
454
- color: rgba(0, 0, 0, 0.3); }
455
- .customize-control-kirki-slider .wrapper .slider-reset:hover {
456
- transform: scale(1.3);
457
- color: #DC3232; }
458
- .customize-control-kirki-slider .wrapper input[type="range"] {
459
- display: block;
460
- -webkit-appearance: none;
461
- background-color: #bdc3c7;
462
- width: 100%;
463
- height: 5px;
464
- border-radius: 5px;
465
- margin: 0 auto;
466
- outline: 0; }
467
- .customize-control-kirki-slider .wrapper input[type="range"]::-webkit-slider-thumb {
468
- -webkit-appearance: none;
469
- background-color: #0085ba;
470
- width: 17px;
471
- height: 17px;
472
- border-radius: 50%;
473
- border: 1px solid #006799;
474
- cursor: pointer;
475
- transition: 0.3s ease-in-out; }
476
- ​ .customize-control-kirki-slider .wrapper input[type="range"]::-webkit-slider-thumb:hover {
477
- background-color: #006799;
478
- border: 2px solid #0085ba; }
479
- .customize-control-kirki-slider .wrapper input[type="range"]::-webkit-slider-thumb:active {
480
- transform: scale(1.2); }
481
- .customize-control-kirki-slider .wrapper input[type="text"] {
482
- font-size: 13px;
483
- background: transparent;
484
- border: none;
485
- box-shadow: none;
486
- text-align: right;
487
- padding: 0;
488
- width: 40px; }
489
- .customize-control-kirki-slider .wrapper .value {
490
- display: flex;
491
- align-items: baseline; }
492
493
.customize-control-kirki-sortable ul.ui-sortable li {
494
padding: 5px 10px;
495
border: 1px solid #333;
496
- background: #fff; }
497
- .customize-control-kirki-sortable ul.ui-sortable li .dashicons.dashicons-menu {
498
- float: right; }
499
- .customize-control-kirki-sortable ul.ui-sortable li .dashicons.visibility {
500
- margin-right: 10px; }
501
- .customize-control-kirki-sortable ul.ui-sortable li.invisible {
502
- color: #aaa;
503
- border: 1px dashed #aaa; }
504
- .customize-control-kirki-sortable ul.ui-sortable li.invisible .dashicons.visibility {
505
- color: #aaa; }
506
507
.customize-control-kirki-switch {
508
- position: relative; }
509
- .customize-control-kirki-switch .switch-off,
510
- .customize-control-kirki-switch .switch-on {
511
- opacity: 1;
512
- padding: 8px;
513
- font-size: 14px;
514
- line-height: 18px; }
515
- .customize-control-kirki-switch .switch-on {
516
- color: #fff;
517
- opacity: 0; }
518
- .customize-control-kirki-switch .switch-off {
519
- color: #777; }
520
- .customize-control-kirki-switch .switch {
521
- border: none;
522
- margin-bottom: 1.5rem;
523
- outline: 0;
524
- padding: 0;
525
- user-select: none;
526
- border-radius: 3rem; }
527
- .customize-control-kirki-switch label {
528
- background: #b4b9be;
529
- float: left;
530
- cursor: pointer;
531
- display: flex;
532
- justify-content: space-between;
533
- margin-bottom: 1rem;
534
- position: relative;
535
- transition: left 0.15s ease-out;
536
- border-radius: 3rem; }
537
- .customize-control-kirki-switch label:after {
538
- background: #FFFFFF;
539
- content: "";
540
- display: block;
541
- position: absolute;
542
- left: 5px;
543
- top: 5px;
544
- width: calc(.85rem + 10px);
545
- height: calc(.85rem + 10px);
546
- transition: all 0.25s ease-in-out;
547
- border-radius: 3rem; }
548
- .customize-control-kirki-switch input + label {
549
- margin-left: 0;
550
- margin-right: 0; }
551
- .customize-control-kirki-switch input:checked + label {
552
- background: #0073aa; }
553
- .customize-control-kirki-switch input:checked + label:after {
554
- left: auto;
555
- right: 5px;
556
- background: #ffffff; }
557
- .customize-control-kirki-switch input:checked + label .switch-on {
558
- opacity: 1; }
559
- .customize-control-kirki-switch input:checked + label .switch-off {
560
- opacity: 0; }
561
562
.customize-control-kirki-toggle {
563
- position: relative; }
564
- .customize-control-kirki-toggle label {
565
- display: flex;
566
- flex-wrap: wrap; }
567
- .customize-control-kirki-toggle label .customize-control-title {
568
- width: calc(100% - 55px); }
569
- .customize-control-kirki-toggle label .description {
570
- order: 99; }
571
- .customize-control-kirki-toggle .switch {
572
- border: 1px solid #b4b9be;
573
- display: inline-block;
574
- width: 35px;
575
- height: 12px;
576
- border-radius: 8px;
577
- background: #b4b9be;
578
- vertical-align: middle;
579
- position: relative;
580
- top: 4px;
581
- cursor: pointer;
582
- user-select: none;
583
- transition: background 350ms ease; }
584
- .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before {
585
- content: "";
586
- display: block;
587
- width: 20px;
588
- height: 20px;
589
- border-radius: 50%;
590
- position: absolute;
591
- top: 50%;
592
- left: -3px;
593
- transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease; }
594
- .customize-control-kirki-toggle .switch:before {
595
- background: rgba(0, 0, 0, 0.2);
596
- transform: translate3d(0, -50%, 0) scale(0); }
597
- .customize-control-kirki-toggle .switch:after {
598
- background: #999;
599
- border: 1px solid rgba(0, 0, 0, 0.1);
600
- transform: translate3d(0, -50%, 0); }
601
- .customize-control-kirki-toggle .switch:active:before {
602
- transform: translate3d(0, -50%, 0) scale(3); }
603
- .customize-control-kirki-toggle input:checked + .switch:before {
604
- background: rgba(0, 115, 170, 0.075);
605
- transform: translate3d(100%, -50%, 0) scale(1); }
606
- .customize-control-kirki-toggle input:checked + .switch:after {
607
- background: #0073aa;
608
- transform: translate3d(100%, -50%, 0); }
609
- .customize-control-kirki-toggle input:checked + .switch:active:before {
610
- background: rgba(0, 115, 170, 0.075);
611
- transform: translate3d(100%, -50%, 0) scale(3); }
612
613
.customize-control-kirki-typography {
614
- position: relative; }
615
- .customize-control-kirki-typography .wrapper {
616
- padding: 10px;
617
- display: flex;
618
- flex-wrap: wrap;
619
- justify-content: space-between;
620
- border: 1px solid rgba(0, 0, 0, 0.1); }
621
- .customize-control-kirki-typography .wrapper h5 {
622
- margin: 0.67em 0 0; }
623
- .customize-control-kirki-typography .wrapper .color,
624
- .customize-control-kirki-typography .wrapper .font-backup,
625
- .customize-control-kirki-typography .wrapper .font-family,
626
- .customize-control-kirki-typography .wrapper .font-size,
627
- .customize-control-kirki-typography .wrapper .letter-spacing,
628
- .customize-control-kirki-typography .wrapper .line-height,
629
- .customize-control-kirki-typography .wrapper .margin-bottom,
630
- .customize-control-kirki-typography .wrapper .margin-top,
631
- .customize-control-kirki-typography .wrapper .text-align,
632
- .customize-control-kirki-typography .wrapper .text-transform,
633
- .customize-control-kirki-typography .wrapper .variant {
634
- width: 100%;
635
- float: none;
636
- clear: both; }
637
- .customize-control-kirki-typography .wrapper .font-size,
638
- .customize-control-kirki-typography .wrapper .letter-spacing,
639
- .customize-control-kirki-typography .wrapper .line-height,
640
- .customize-control-kirki-typography .wrapper .margin-bottom,
641
- .customize-control-kirki-typography .wrapper .margin-top,
642
- .customize-control-kirki-typography .wrapper .text-transform {
643
- width: 48%; }
644
- .customize-control-kirki-typography .wrapper .text-align .text-align-choices {
645
- display: flex; }
646
- .customize-control-kirki-typography .wrapper .text-align .text-align-choices label {
647
- width: 100%;
648
- padding: 5px;
649
- text-align: center;
650
- border: 1px solid rgba(255, 255, 255, 0); }
651
- .customize-control-kirki-typography .wrapper .text-align .text-align-choices input {
652
- display: none; }
653
- .customize-control-kirki-typography .wrapper .text-align .text-align-choices input:checked + label {
654
- border-color: #0085ba; }
655
- .customize-control-kirki-typography .wrapper .color {
656
- width: auto; }
657
658
/*# sourceMappingURL=styles.css.map */
1
@charset "UTF-8";
2
.customize-control-kirki-background {
3
+ position: relative;
4
+ }
5
+ .customize-control-kirki-background .background-attachment h4,
6
+ .customize-control-kirki-background .background-color h4,
7
+ .customize-control-kirki-background .background-position h4,
8
+ .customize-control-kirki-background .background-repeat h4,
9
+ .customize-control-kirki-background .background-size h4 {
10
+ margin-bottom: 5px;
11
+ }
12
+ .customize-control-kirki-background .background-attachment .buttonset,
13
+ .customize-control-kirki-background .background-size .buttonset {
14
+ display: flex;
15
+ flex-wrap: wrap;
16
+ }
17
+ .customize-control-kirki-background .background-attachment .buttonset .switch-label,
18
+ .customize-control-kirki-background .background-size .buttonset .switch-label {
19
+ background: rgba(0, 0, 0, 0.05);
20
+ border: 1px solid rgba(0, 0, 0, 0.1);
21
+ color: #555;
22
+ padding: 0.5em 1em;
23
+ margin: 0;
24
+ text-align: center;
25
+ flex-grow: 1;
26
+ }
27
+ .customize-control-kirki-background .background-attachment .buttonset .switch-input:checked + .switch-label,
28
+ .customize-control-kirki-background .background-size .buttonset .switch-input:checked + .switch-label {
29
+ background-color: #3498DB;
30
+ color: #fff;
31
+ }
32
33
.customize-control-kirki-code textarea {
34
width: 100%;
35
+ min-height: 200px;
36
+ }
37
38
.customize-control-kirki-color-palette {
39
+ position: relative;
40
+ }
41
+ .customize-control-kirki-color-palette label {
42
+ position: relative;
43
+ display: inline-block;
44
+ padding: 0;
45
+ margin: 0;
46
+ }
47
+ .customize-control-kirki-color-palette .colors-wrapper {
48
+ max-height: 300px;
49
+ overflow-y: auto;
50
+ padding: 10px;
51
+ display: flex;
52
+ flex-wrap: wrap;
53
+ }
54
+ .customize-control-kirki-color-palette .colors-wrapper .color-palette-color {
55
+ color: transparent;
56
+ display: block;
57
+ width: 100%;
58
+ height: 100%;
59
+ overflow: hidden;
60
+ border: 1px solid rgba(0, 0, 0, 0.2);
61
+ }
62
+ .customize-control-kirki-color-palette .colors-wrapper.round label {
63
+ padding: 3px;
64
+ }
65
+ .customize-control-kirki-color-palette .colors-wrapper.round .color-palette-color {
66
+ border-radius: 50%;
67
+ }
68
+ .customize-control-kirki-color-palette .colors-wrapper.box-shadow .color-palette-color {
69
+ box-shadow: inset 3px 3px 13px 2px rgba(0, 0, 0, 0.22);
70
+ }
71
+ .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
72
+ border: 0;
73
+ width: 150%;
74
+ height: 150%;
75
+ position: relative;
76
+ left: -25%;
77
+ top: -25%;
78
+ z-index: 1;
79
+ }
80
+ .customize-control-kirki-color-palette .colors-wrapper.with-margin label {
81
+ margin: 3px;
82
+ }
83
+ .customize-control-kirki-color-palette .colors-wrapper input {
84
+ display: none;
85
+ }
86
+ .customize-control-kirki-color-palette .colors-wrapper input:checked + label .color-palette-color {
87
+ box-shadow: 1px 1px 10px 1px #333333;
88
+ border: 1px solid rgba(0, 0, 0, 0.3);
89
+ }
90
91
+ .customize-control-kirki-color input[data-type=hue] + .iris-strip-horiz .iris-slider {
92
+ background-image: -webkit-linear-gradient(left, red, #ff7f00, yellow, #80ff00, lime, #00ff80, aqua, #007fff, blue, #7f00ff, fuchsia, #ff0080, red) !important;
93
+ }
94
.customize-control-kirki-color .iris-picker .iris-square-handle {
95
+ z-index: 8;
96
+ }
97
98
.customize-control-kirki-dashicons {
99
+ position: relative;
100
+ }
101
+ .customize-control-kirki-dashicons label {
102
+ position: relative;
103
+ display: inline-block;
104
+ }
105
+ .customize-control-kirki-dashicons .icons-wrapper {
106
+ max-height: 300px;
107
+ overflow-y: scroll;
108
+ }
109
+ .customize-control-kirki-dashicons .icons-wrapper h4 {
110
+ font-weight: 300;
111
+ margin: 0.7em 0;
112
+ }
113
+ .customize-control-kirki-dashicons .icons-wrapper .dashicons {
114
+ padding: 3px;
115
+ font-size: 25px;
116
+ width: 25px;
117
+ height: 25px;
118
+ border: 1px solid transparent;
119
+ }
120
+ .customize-control-kirki-dashicons .icons-wrapper input {
121
+ display: none;
122
+ }
123
+ .customize-control-kirki-dashicons .icons-wrapper input:checked + label .dashicons {
124
+ border: 1px solid #3498DB;
125
+ color: #000;
126
+ }
127
128
.wp-customizer div.ui-datepicker {
129
z-index: 500001 !important;
130
width: 255px;
131
background: #fff;
132
+ border: 1px solid #dedede;
133
+ }
134
+ .wp-customizer div.ui-datepicker .ui-datepicker-header {
135
+ padding: 10px;
136
+ background: #e5e5e5;
137
+ border-bottom: 1px solid #fff;
138
+ }
139
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
140
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
141
+ display: block;
142
+ position: absolute;
143
+ width: 1em;
144
+ overflow: hidden;
145
+ }
146
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
147
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after,
148
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
149
+ font-family: dashicons;
150
+ }
151
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after:hover, .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before:hover,
152
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after:hover,
153
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before:hover {
154
+ cursor: pointer;
155
+ }
156
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon,
157
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon {
158
+ display: none;
159
+ }
160
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
161
+ left: 10px;
162
+ }
163
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
164
+ content: "";
165
+ }
166
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
167
+ right: 10px;
168
+ }
169
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after {
170
+ content: "";
171
+ }
172
+ .wp-customizer div.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
173
+ text-align: center;
174
+ }
175
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar {
176
+ border-collapse: collapse;
177
+ width: 100%;
178
+ }
179
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar thead {
180
+ background: #e5e5e5;
181
+ padding: 5px;
182
+ }
183
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td {
184
+ text-align: center;
185
+ }
186
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a {
187
+ display: block;
188
+ padding: 5px;
189
+ color: #333;
190
+ text-decoration: none;
191
+ }
192
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a.ui-state-active, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td a:hover {
193
+ color: #fff;
194
+ background-color: #0073aa;
195
+ }
196
+ .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled a, .wp-customizer div.ui-datepicker .ui-datepicker-calendar tr td.ui-state-disabled .ui-state-default a {
197
+ color: #999;
198
+ }
199
200
.customize-control-kirki-dimensions {
201
+ position: relative;
202
+ }
203
+ .customize-control-kirki-dimensions .wrapper {
204
+ border: 1px solid rgba(0, 0, 0, 0.1);
205
+ padding: 10px;
206
+ }
207
+ .customize-control-kirki-dimensions .wrapper .control {
208
+ display: flex;
209
+ flex-wrap: wrap;
210
+ justify-content: space-between;
211
+ }
212
+ .customize-control-kirki-dimensions .wrapper .control > div {
213
+ width: 48%;
214
+ }
215
+ .customize-control-kirki-dimensions .wrapper .control > div h5 {
216
+ margin: 10px 0 7px;
217
+ }
218
+ .customize-control-kirki-dimensions .wrapper .control > div .inner {
219
+ display: flex;
220
+ }
221
222
.customize-control-kirki-editor textarea {
223
+ width: 100%;
224
+ }
225
226
.customize-control-kirki-generic input {
227
+ width: 100%;
228
+ }
229
.customize-control-kirki-generic textarea {
230
width: 100%;
231
border: 1px solid rgba(0, 0, 0, 0.1);
232
-webkit-box-shadow: none;
233
+ box-shadow: none;
234
+ }
235
236
.customize-control-kirki-multicolor .multicolor-single-color-wrapper {
237
display: flex;
238
+ justify-content: space-between;
239
+ }
240
.customize-control-kirki-multicolor .multicolor-single-label {
241
+ order: 2;
242
+ }
243
.customize-control-kirki-multicolor .wp-picker-container {
244
+ width: 100%;
245
+ }
246
+ .customize-control-kirki-multicolor .wp-picker-container > .wp-color-result {
247
+ width: 100%;
248
+ }
249
+ .customize-control-kirki-multicolor .wp-picker-container.wp-picker-active + .multicolor-single-label {
250
+ display: none;
251
+ }
252
253
.customize-control-kirki-number .customize-control-content {
254
display: flex;
255
+ align-items: stretch;
256
+ }
257
+ .customize-control-kirki-number .customize-control-content input {
258
+ width: 100%;
259
+ -moz-appearance: textfield;
260
+ }
261
+ .customize-control-kirki-number .customize-control-content input::-webkit-inner-spin-button, .customize-control-kirki-number .customize-control-content input::-webkit-outer-spin-button {
262
+ -webkit-appearance: none;
263
+ margin: 0;
264
+ }
265
+ .customize-control-kirki-number .customize-control-content .quantity {
266
+ min-width: 2rem;
267
+ max-width: 2rem;
268
+ text-align: center;
269
+ line-height: 24px;
270
+ }
271
.customize-control-kirki-palette {
272
+ position: relative;
273
+ }
274
+ .customize-control-kirki-palette input[type=radio] {
275
+ display: none;
276
+ }
277
+ .customize-control-kirki-palette input[type=radio]:checked + label {
278
+ border: 3px solid rgba(0, 0, 0, 0.4);
279
+ }
280
+ .customize-control-kirki-palette label {
281
+ background: none;
282
+ padding: 0;
283
+ border-top: 3px solid transparent;
284
+ border-bottom: 3px solid transparent;
285
+ margin-bottom: 5px;
286
+ display: flex;
287
+ }
288
+ .customize-control-kirki-palette label span {
289
+ padding: 10px 0;
290
+ flex-grow: 1;
291
+ font-size: 0;
292
+ line-height: 10px;
293
+ color: rgba(0, 0, 0, 0);
294
+ -webkit-transition: all 200ms ease-in-out;
295
+ -moz-transition: all 200ms ease-in-out;
296
+ -ms-transition: all 200ms ease-in-out;
297
+ -o-transition: all 200ms ease-in-out;
298
+ transition: all 200ms ease-in-out;
299
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
300
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
301
+ }
302
+ .customize-control-kirki-palette label span:first-child {
303
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
304
+ }
305
+ .customize-control-kirki-palette label span:last-child {
306
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
307
+ }
308
+ .customize-control-kirki-palette label span:hover {
309
+ padding: 10px;
310
+ flex-grow: 3;
311
+ min-width: 60px;
312
+ font-size: 10px;
313
+ line-height: 10px;
314
+ color: #000;
315
+ }
316
317
.customize-control-kirki-radio-buttonset .buttonset {
318
display: flex;
319
+ flex-wrap: wrap;
320
+ }
321
+ .customize-control-kirki-radio-buttonset .buttonset .switch-label {
322
+ background: rgba(0, 0, 0, 0.1);
323
+ border: 1px rgba(0, 0, 0, 0.1);
324
+ color: #555d66;
325
+ margin: 0;
326
+ text-align: center;
327
+ padding: 0.5em 1em;
328
+ flex-grow: 1;
329
+ }
330
+ .customize-control-kirki-radio-buttonset .buttonset .switch-input:checked + .switch-label {
331
+ background-color: #00a0d2;
332
+ color: rgba(255, 255, 255, 0.8);
333
+ }
334
335
.customize-control-kirki-radio-image > .image {
336
display: flex;
337
+ flex-wrap: wrap;
338
+ }
339
.customize-control-kirki-radio-image label {
340
position: relative;
341
+ display: inline-block;
342
+ }
343
+ .customize-control-kirki-radio-image label .image-label {
344
+ display: none;
345
+ position: absolute;
346
+ top: 0;
347
+ left: 0;
348
+ width: 100%;
349
+ height: 100%;
350
+ background: rgba(255, 255, 255, 0.7);
351
+ font-weight: bold;
352
+ }
353
+ .customize-control-kirki-radio-image label .image-label .inner {
354
+ width: 100%;
355
+ height: 100%;
356
+ text-align: center;
357
+ padding: 0.5em;
358
+ vertical-align: middle;
359
+ }
360
+ .customize-control-kirki-radio-image label:hover .image-label {
361
+ display: block;
362
+ }
363
.customize-control-kirki-radio-image input {
364
+ display: none;
365
+ }
366
+ .customize-control-kirki-radio-image input img {
367
+ border: 1px solid transparent;
368
+ }
369
+ .customize-control-kirki-radio-image input:checked + label img {
370
+ -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
371
+ box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
372
+ border: 1px solid #3498DB;
373
+ }
374
+ .customize-control-kirki-radio-image input + label .image-clickable {
375
+ position: absolute;
376
+ top: 0;
377
+ bottom: 0;
378
+ left: 0;
379
+ right: 0;
380
+ width: 100%;
381
+ height: 100%;
382
+ }
383
384
.customize-control-kirki-radio {
385
+ position: relative;
386
+ }
387
+ .customize-control-kirki-radio input[type=radio] {
388
+ width: 18px;
389
+ height: 18px;
390
+ }
391
+ .customize-control-kirki-radio input[type=radio]:checked:before {
392
+ width: 10px;
393
+ height: 10px;
394
+ margin: 3px;
395
+ }
396
+ .customize-control-kirki-radio label {
397
+ display: list-item;
398
+ margin-bottom: 7px;
399
+ }
400
+ .customize-control-kirki-radio label .option-description {
401
+ display: block;
402
+ color: rgba(0, 0, 0, 0.35);
403
+ font-size: 0.9em;
404
+ padding-left: 25px;
405
+ }
406
407
.customize-control-repeater {
408
+ position: relative;
409
+ }
410
+ .customize-control-repeater .repeater-fields .repeater-row {
411
+ border: 1px solid #e5e5e5;
412
+ margin-top: 0.5rem;
413
+ background: #eee;
414
+ position: relative;
415
+ }
416
+ .customize-control-repeater .repeater-fields .repeater-row.minimized {
417
+ border: 1px solid #dfdfdf;
418
+ padding: 0;
419
+ }
420
+ .customize-control-repeater .repeater-fields .repeater-row.minimized:hover {
421
+ border: 1px solid #e5e5e5;
422
+ }
423
+ .customize-control-repeater .repeater-fields .repeater-row.minimized .repeater-row-content {
424
+ display: none;
425
+ }
426
+ .customize-control-repeater .repeater-fields .repeater-row label {
427
+ margin-bottom: 12px;
428
+ clear: both;
429
+ }
430
+ .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field- {
431
+ display: none;
432
+ }
433
+ .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input {
434
+ display: none;
435
+ }
436
+ .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input img {
437
+ border: 1px solid transparent;
438
+ }
439
+ .customize-control-repeater .repeater-fields .repeater-row .repeater-field.repeater-field-radio-image input:checked + label img {
440
+ -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
441
+ box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.25);
442
+ border: 1px solid #3498DB;
443
+ }
444
+ .customize-control-repeater .repeater-fields .repeater-row .repeater-field:last-child {
445
+ border-bottom: none;
446
+ padding-bottom: 0;
447
+ }
448
+ .customize-control-repeater button.repeater-add {
449
+ margin-top: 1rem;
450
+ }
451
+ .customize-control-repeater .repeater-row-content {
452
+ padding: 10px 15px;
453
+ background: #fff;
454
+ }
455
+ .customize-control-repeater .repeater-field {
456
+ margin-bottom: 12px;
457
+ width: 100%;
458
+ clear: both;
459
+ padding-bottom: 12px;
460
+ border-bottom: 1px dotted #CCC;
461
+ }
462
+ .customize-control-repeater .repeater-field .customize-control-title {
463
+ font-size: 13px;
464
+ line-height: initial;
465
+ }
466
+ .customize-control-repeater .repeater-field .customize-control-description {
467
+ font-size: 13px;
468
+ line-height: initial;
469
+ }
470
+ .customize-control-repeater .repeater-field.repeater-field-hidden {
471
+ margin: 0;
472
+ padding: 0;
473
+ border: 0;
474
+ }
475
+ .customize-control-repeater .repeater-field-select select {
476
+ margin-left: 0;
477
+ }
478
+ .customize-control-repeater .repeater-field-checkbox label {
479
+ line-height: 28px;
480
+ }
481
+ .customize-control-repeater .repeater-field-checkbox input {
482
+ line-height: 28px;
483
+ margin-right: 5px;
484
+ }
485
+ .customize-control-repeater .repeater-field-textarea textarea {
486
+ width: 100%;
487
+ resize: vertical;
488
+ }
489
+ .customize-control-repeater .repeater-row-header {
490
+ background: white;
491
+ border-bottom: 1px solid #dfdfdf;
492
+ position: relative;
493
+ padding: 10px 15px;
494
+ height: auto;
495
+ min-height: 20px;
496
+ line-height: 30px;
497
+ overflow: hidden;
498
+ word-wrap: break-word;
499
+ }
500
+ .customize-control-repeater .repeater-row-header:hover {
501
+ cursor: move;
502
+ }
503
+ .customize-control-repeater .repeater-row-header .dashicons {
504
+ font-size: 18px;
505
+ position: absolute;
506
+ right: 12px;
507
+ top: 2px;
508
+ color: #a0a5aa;
509
+ }
510
+ .customize-control-repeater .repeater-row-label {
511
+ font-size: 13px;
512
+ font-weight: 600;
513
+ line-height: 20px;
514
+ display: block;
515
+ width: 90%;
516
+ overflow: hidden;
517
+ height: 18px;
518
+ }
519
+ .customize-control-repeater .repeater-row-remove {
520
+ color: #a00;
521
+ }
522
+ .customize-control-repeater .repeater-row-remove:hover {
523
+ color: #f00;
524
+ }
525
+ .customize-control-repeater .repeater-minimize {
526
+ line-height: 36px;
527
+ }
528
+ .customize-control-repeater .remove-button,
529
+ .customize-control-repeater .upload-button {
530
+ width: 48%;
531
+ }
532
533
.kirki-image-attachment {
534
margin: 0;
535
text-align: center;
536
+ margin-bottom: 10px;
537
+ }
538
+ .kirki-image-attachment img {
539
+ display: inline-block;
540
+ }
541
542
.kirki-file-attachment {
543
margin: 0;
544
text-align: center;
545
+ margin-bottom: 10px;
546
+ }
547
+ .kirki-file-attachment .file {
548
+ display: block;
549
+ padding: 10px 5px;
550
+ border: 1px dotted #c3c3c3;
551
+ background: #f9f9f9;
552
+ }
553
554
.limit {
555
padding: 3px;
556
+ border-radius: 3px;
557
+ }
558
+ .limit.highlight {
559
+ background: #D32F2F;
560
+ color: #fff;
561
+ }
562
563
.customize-control-kirki-slider .wrapper {
564
display: flex;
565
align-items: center;
566
padding: 15px 0 7px;
567
+ position: relative;
568
+ }
569
+ .customize-control-kirki-slider .wrapper .slider-reset {
570
+ position: absolute;
571
+ top: 0;
572
+ right: 0;
573
+ font-size: 12px;
574
+ transition: 0.3s ease-in-out;
575
+ color: rgba(0, 0, 0, 0.3);
576
+ }
577
+ .customize-control-kirki-slider .wrapper .slider-reset:hover {
578
+ transform: scale(1.3);
579
+ color: #DC3232;
580
+ }
581
+ .customize-control-kirki-slider .wrapper input[type=range] {
582
+ display: block;
583
+ -webkit-appearance: none;
584
+ background-color: #bdc3c7;
585
+ width: 100%;
586
+ height: 5px;
587
+ border-radius: 5px;
588
+ margin: 0 auto;
589
+ outline: 0;
590
+ }
591
+ .customize-control-kirki-slider .wrapper input[type=range]::-webkit-slider-thumb {
592
+ -webkit-appearance: none;
593
+ background-color: #0085ba;
594
+ width: 17px;
595
+ height: 17px;
596
+ border-radius: 50%;
597
+ border: 1px solid #006799;
598
+ cursor: pointer;
599
+ transition: 0.3s ease-in-out;
600
+ }
601
+ .customize-control-kirki-slider .wrapper input[type=range]::-webkit-slider-thumb:hover {
602
+ background-color: #006799;
603
+ border: 2px solid #0085ba;
604
+ }
605
+ .customize-control-kirki-slider .wrapper input[type=range]::-webkit-slider-thumb:active {
606
+ transform: scale(1.2);
607
+ }
608
+ .customize-control-kirki-slider .wrapper input[type=text] {
609
+ font-size: 13px;
610
+ background: transparent;
611
+ border: none;
612
+ box-shadow: none;
613
+ text-align: right;
614
+ padding: 0;
615
+ width: 40px;
616
+ }
617
+ .customize-control-kirki-slider .wrapper .value {
618
+ display: flex;
619
+ align-items: baseline;
620
+ }
621
622
.customize-control-kirki-sortable ul.ui-sortable li {
623
padding: 5px 10px;
624
border: 1px solid #333;
625
+ background: #fff;
626
+ }
627
+ .customize-control-kirki-sortable ul.ui-sortable li .dashicons.dashicons-menu {
628
+ float: right;
629
+ }
630
+ .customize-control-kirki-sortable ul.ui-sortable li .dashicons.visibility {
631
+ margin-right: 10px;
632
+ }
633
+ .customize-control-kirki-sortable ul.ui-sortable li.invisible {
634
+ color: #aaa;
635
+ border: 1px dashed #aaa;
636
+ }
637
+ .customize-control-kirki-sortable ul.ui-sortable li.invisible .dashicons.visibility {
638
+ color: #aaa;
639
+ }
640
641
.customize-control-kirki-switch {
642
+ position: relative;
643
+ }
644
+ .customize-control-kirki-switch .switch-off,
645
+ .customize-control-kirki-switch .switch-on {
646
+ opacity: 1;
647
+ padding: 8px;
648
+ font-size: 14px;
649
+ line-height: 18px;
650
+ }
651
+ .customize-control-kirki-switch .switch-on {
652
+ color: #fff;
653
+ opacity: 0;
654
+ }
655
+ .customize-control-kirki-switch .switch-off {
656
+ color: #777;
657
+ }
658
+ .customize-control-kirki-switch .switch {
659
+ border: none;
660
+ margin-bottom: 1.5rem;
661
+ outline: 0;
662
+ padding: 0;
663
+ user-select: none;
664
+ border-radius: 3rem;
665
+ }
666
+ .customize-control-kirki-switch label {
667
+ background: #b4b9be;
668
+ float: left;
669
+ cursor: pointer;
670
+ display: flex;
671
+ justify-content: space-between;
672
+ margin-bottom: 1rem;
673
+ position: relative;
674
+ transition: left 0.15s ease-out;
675
+ border-radius: 3rem;
676
+ }
677
+ .customize-control-kirki-switch label:after {
678
+ background: #FFFFFF;
679
+ content: "";
680
+ display: block;
681
+ position: absolute;
682
+ left: 5px;
683
+ top: 5px;
684
+ width: calc(.85rem + 10px);
685
+ height: calc(.85rem + 10px);
686
+ transition: all 0.25s ease-in-out;
687
+ border-radius: 3rem;
688
+ }
689
+ .customize-control-kirki-switch input + label {
690
+ margin-left: 0;
691
+ margin-right: 0;
692
+ }
693
+ .customize-control-kirki-switch input:checked + label {
694
+ background: #0073aa;
695
+ }
696
+ .customize-control-kirki-switch input:checked + label:after {
697
+ left: auto;
698
+ right: 5px;
699
+ background: #ffffff;
700
+ }
701
+ .customize-control-kirki-switch input:checked + label .switch-on {
702
+ opacity: 1;
703
+ }
704
+ .customize-control-kirki-switch input:checked + label .switch-off {
705
+ opacity: 0;
706
+ }
707
708
.customize-control-kirki-toggle {
709
+ position: relative;
710
+ }
711
+ .customize-control-kirki-toggle label {
712
+ display: flex;
713
+ flex-wrap: wrap;
714
+ }
715
+ .customize-control-kirki-toggle label .customize-control-title {
716
+ width: calc(100% - 55px);
717
+ }
718
+ .customize-control-kirki-toggle label .description {
719
+ order: 99;
720
+ }
721
+ .customize-control-kirki-toggle .switch {
722
+ border: 1px solid #b4b9be;
723
+ display: inline-block;
724
+ width: 35px;
725
+ height: 12px;
726
+ border-radius: 8px;
727
+ background: #b4b9be;
728
+ vertical-align: middle;
729
+ position: relative;
730
+ top: 4px;
731
+ cursor: pointer;
732
+ user-select: none;
733
+ transition: background 350ms ease;
734
+ }
735
+ .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before {
736
+ content: "";
737
+ display: block;
738
+ width: 20px;
739
+ height: 20px;
740
+ border-radius: 50%;
741
+ position: absolute;
742
+ top: 50%;
743
+ left: -3px;
744
+ transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease;
745
+ }
746
+ .customize-control-kirki-toggle .switch:before {
747
+ background: rgba(0, 0, 0, 0.2);
748
+ transform: translate3d(0, -50%, 0) scale(0);
749
+ }
750
+ .customize-control-kirki-toggle .switch:after {
751
+ background: #999;
752
+ border: 1px solid rgba(0, 0, 0, 0.1);
753
+ transform: translate3d(0, -50%, 0);
754
+ }
755
+ .customize-control-kirki-toggle .switch:active:before {
756
+ transform: translate3d(0, -50%, 0) scale(3);
757
+ }
758
+ .customize-control-kirki-toggle input:checked + .switch:before {
759
+ background: rgba(0, 115, 170, 0.075);
760
+ transform: translate3d(100%, -50%, 0) scale(1);
761
+ }
762
+ .customize-control-kirki-toggle input:checked + .switch:after {
763
+ background: #0073aa;
764
+ transform: translate3d(100%, -50%, 0);
765
+ }
766
+ .customize-control-kirki-toggle input:checked + .switch:active:before {
767
+ background: rgba(0, 115, 170, 0.075);
768
+ transform: translate3d(100%, -50%, 0) scale(3);
769
+ }
770
771
.customize-control-kirki-typography {
772
+ position: relative;
773
+ }
774
+ .customize-control-kirki-typography .wrapper {
775
+ padding: 10px;
776
+ display: flex;
777
+ flex-wrap: wrap;
778
+ justify-content: space-between;
779
+ border: 1px solid rgba(0, 0, 0, 0.1);
780
+ }
781
+ .customize-control-kirki-typography .wrapper h5 {
782
+ margin: 0.67em 0 0;
783
+ }
784
+ .customize-control-kirki-typography .wrapper .color,
785
+ .customize-control-kirki-typography .wrapper .font-backup,
786
+ .customize-control-kirki-typography .wrapper .font-family,
787
+ .customize-control-kirki-typography .wrapper .font-size,
788
+ .customize-control-kirki-typography .wrapper .letter-spacing,
789
+ .customize-control-kirki-typography .wrapper .line-height,
790
+ .customize-control-kirki-typography .wrapper .margin-bottom,
791
+ .customize-control-kirki-typography .wrapper .margin-top,
792
+ .customize-control-kirki-typography .wrapper .text-align,
793
+ .customize-control-kirki-typography .wrapper .text-transform,
794
+ .customize-control-kirki-typography .wrapper .variant {
795
+ width: 100%;
796
+ float: none;
797
+ clear: both;
798
+ }
799
+ .customize-control-kirki-typography .wrapper .font-size,
800
+ .customize-control-kirki-typography .wrapper .letter-spacing,
801
+ .customize-control-kirki-typography .wrapper .line-height,
802
+ .customize-control-kirki-typography .wrapper .margin-bottom,
803
+ .customize-control-kirki-typography .wrapper .margin-top,
804
+ .customize-control-kirki-typography .wrapper .text-transform {
805
+ width: 48%;
806
+ }
807
+ .customize-control-kirki-typography .wrapper .text-align .text-align-choices {
808
+ display: flex;
809
+ }
810
+ .customize-control-kirki-typography .wrapper .text-align .text-align-choices label {
811
+ width: 100%;
812
+ padding: 5px;
813
+ text-align: center;
814
+ border: 1px solid rgba(255, 255, 255, 0);
815
+ }
816
+ .customize-control-kirki-typography .wrapper .text-align .text-align-choices input {
817
+ display: none;
818
+ }
819
+ .customize-control-kirki-typography .wrapper .text-align .text-align-choices input:checked + label {
820
+ border-color: #0085ba;
821
+ }
822
+ .customize-control-kirki-typography .wrapper .color {
823
+ width: auto;
824
+ }
825
826
/*# sourceMappingURL=styles.css.map */
controls/js/script.js CHANGED
@@ -482,6 +482,60 @@ kirki = jQuery.extend( kirki, {
482
}
483
},
484
485
'kirki-select': {
486
487
/**
@@ -782,74 +836,151 @@ kirki = jQuery.extend( kirki, {
782
783
},
784
785
image: {
786
787
/**
788
- * Get the HTML for image inputs.
789
*
790
- * @since 3.0.17
791
- * @param {Object} data - The arguments.
792
- * @returns {string}
793
*/
794
- getTemplate: function( data ) {
795
- var html = '',
796
- saveAs = 'url',
797
- url;
798
-
799
- data = _.defaults( data, {
800
- label: '',
801
- description: '',
802
- inputAttrs: '',
803
- 'data-id': '',
804
- choices: {},
805
- value: ''
806
- } );
807
808
- if ( ! _.isUndefined( data.choices ) && ! _.isUndefined( data.choices.save_as ) ) {
809
- saveAs = data.choices.save_as;
810
}
811
- url = data.value;
812
- if ( _.isObject( data.value ) && ! _.isUndefined( data.value.url ) ) {
813
- url = data.value.url;
814
}
815
816
- html += '<label>';
817
- if ( data.label ) {
818
- html += '<span class="customize-control-title">' + data.label + '</span>';
819
}
820
- if ( data.description ) {
821
- html += '<span class="description customize-control-description">' + data.description + '</span>';
822
}
823
- html += '</label>';
824
- html += '<div class="image-wrapper attachment-media-view image-upload">';
825
- if ( data.value.url || '' !== url ) {
826
- html += '<div class="thumbnail thumbnail-image"><img src="' + url + '" alt="" /></div>';
827
- } else {
828
- html += '<div class="placeholder">' + kirkiL10n.noFileSelected + '</div>';
829
}
830
- html += '<div class="actions">';
831
- html += '<button class="button image-upload-remove-button' + ( '' === url ? ' hidden' : '' ) + '">' + kirkiL10n.remove + '</button>';
832
- if ( data.default && '' !== data.default ) {
833
- html += '<button type="button" class="button image-default-button"';
834
- if ( data.default === data.value || ( ! _.isUndefined( data.value.url ) && data.default === data.value.url ) ) {
835
- html += ' style="display:none;"';
836
}
837
- html += '>' + kirkiL10n.default + '</button>';
838
- }
839
- html += '<button type="button" class="button image-upload-button">' + kirkiL10n.selectFile + '</button>';
840
- html += '</div></div>';
841
842
- return '<div class="kirki-input-container" data-id="' + data.id + '">' + html + '</div>';
843
- },
844
845
- /**
846
- * Init the control.
847
- *
848
- * @since 3.0.17
849
- * @param {Object} control - The control object.
850
- * @returns {null}
851
- */
852
- init: function( control ) {
853
}
854
}
855
}
@@ -1269,6 +1400,11 @@ kirki = jQuery.extend( kirki, {
1269
numericValue,
1270
unit;
1271
1272
// Whitelist values.
1273
if ( 0 === value || '0' === value || 'auto' === value || 'inherit' === value || 'initial' === value ) {
1274
return true;
@@ -1293,6 +1429,22 @@ kirki = jQuery.extend( kirki, {
1293
// Check the validity of the numeric value and units.
1294
return ( ! isNaN( numericValue ) && -1 < jQuery.inArray( unit, validUnits ) );
1295
}
1296
}
1297
}
1298
} );
@@ -1692,13 +1844,14 @@ wp.customize.controlConstructor['kirki-dimension'] = wp.customize.kirkiDynamicCo
1692
*/
1693
kirkiNotifications: function() {
1694
1695
- var control = this;
1696
1697
wp.customize( control.id, function( setting ) {
1698
setting.bind( function( value ) {
1699
var code = 'long_title';
1700
1701
- if ( false === kirki.util.validate.cssValue( value ) ) {
1702
setting.notifications.add( code, new wp.customize.Notification(
1703
code,
1704
{
@@ -1876,194 +2029,6 @@ wp.customize.controlConstructor['kirki-fontawesome'] = wp.customize.kirkiDynamic
1876
select.val( control.setting._value ).trigger( 'change' );
1877
}
1878
} );
1879
- /* global kirkiControlLoader */
1880
- wp.customize.controlConstructor['kirki-image'] = wp.customize.Control.extend( {
1881
-
1882
- // When we're finished loading continue processing
1883
- ready: function() {
1884
-
1885
- 'use strict';
1886
-
1887
- var control = this;
1888
-
1889
- // Init the control.
1890
- if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
1891
- kirkiControlLoader( control );
1892
- } else {
1893
- control.initKirkiControl();
1894
- }
1895
- },
1896
-
1897
- initKirkiControl: function() {
1898
-
1899
- var control = this,
1900
- value = control.getValue(),
1901
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
1902
- preview = control.container.find( '.placeholder, .thumbnail' ),
1903
- previewImage = ( 'array' === saveAs ) ? value.url : value,
1904
- removeButton = control.container.find( '.image-upload-remove-button' ),
1905
- defaultButton = control.container.find( '.image-default-button' );
1906
-
1907
- control.container.find( '.kirki-controls-loading-spinner' ).hide();
1908
-
1909
- // Tweaks for save_as = id.
1910
- if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) {
1911
- wp.media.attachment( value ).fetch().then( function() {
1912
- setTimeout( function() {
1913
- var url = wp.media.attachment( value ).get( 'url' );
1914
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
1915
- }, 700 );
1916
- } );
1917
- }
1918
-
1919
- // If value is not empty, hide the "default" button.
1920
- if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
1921
- control.container.find( 'image-default-button' ).hide();
1922
- }
1923
-
1924
- // If value is empty, hide the "remove" button.
1925
- if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) {
1926
- removeButton.hide();
1927
- }
1928
-
1929
- // If value is default, hide the default button.
1930
- if ( value === control.params.default ) {
1931
- control.container.find( 'image-default-button' ).hide();
1932
- }
1933
-
1934
- if ( '' !== previewImage ) {
1935
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
1936
- }
1937
-
1938
- control.container.on( 'click', '.image-upload-button', function( e ) {
1939
- var image = wp.media( { multiple: false } ).open().on( 'select', function() {
1940
-
1941
- // This will return the selected image from the Media Uploader, the result is an object.
1942
- var uploadedImage = image.state().get( 'selection' ).first(),
1943
- jsonImg = uploadedImage.toJSON(),
1944
- previewImage = jsonImg.url;
1945
-
1946
- if ( ! _.isUndefined( jsonImg.sizes ) ) {
1947
- previewImg = jsonImg.sizes.full.url;
1948
- if ( ! _.isUndefined( jsonImg.sizes.medium ) ) {
1949
- previewImage = jsonImg.sizes.medium.url;
1950
- } else if ( ! _.isUndefined( jsonImg.sizes.thumbnail ) ) {
1951
- previewImage = jsonImg.sizes.thumbnail.url;
1952
- }
1953
- }
1954
-
1955
- if ( 'array' === saveAs ) {
1956
- control.saveValue( 'id', jsonImg.id );
1957
- control.saveValue( 'url', jsonImg.sizes.full.url );
1958
- control.saveValue( 'width', jsonImg.width );
1959
- control.saveValue( 'height', jsonImg.height );
1960
- } else if ( 'id' === saveAs ) {
1961
- control.saveValue( 'id', jsonImg.id );
1962
- } else {
1963
- control.saveValue( 'url', ( ( ! _.isUndefined( jsonImg.sizes ) ) ? jsonImg.sizes.full.url : jsonImg.url ) );
1964
- }
1965
-
1966
- if ( preview.length ) {
1967
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
1968
- }
1969
- if ( removeButton.length ) {
1970
- removeButton.show();
1971
- defaultButton.hide();
1972
- }
1973
- } );
1974
-
1975
- e.preventDefault();
1976
- } );
1977
-
1978
- control.container.on( 'click', '.image-upload-remove-button', function( e ) {
1979
-
1980
- var preview,
1981
- removeButton,
1982
- defaultButton;
1983
-
1984
- e.preventDefault();
1985
-
1986
- control.saveValue( 'id', '' );
1987
- control.saveValue( 'url', '' );
1988
- control.saveValue( 'width', '' );
1989
- control.saveValue( 'height', '' );
1990
-
1991
- preview = control.container.find( '.placeholder, .thumbnail' );
1992
- removeButton = control.container.find( '.image-upload-remove-button' );
1993
- defaultButton = control.container.find( '.image-default-button' );
1994
-
1995
- if ( preview.length ) {
1996
- preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
1997
- }
1998
- if ( removeButton.length ) {
1999
- removeButton.hide();
2000
- if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
2001
- defaultButton.show();
2002
- }
2003
- }
2004
- } );
2005
-
2006
- control.container.on( 'click', '.image-default-button', function( e ) {
2007
-
2008
- var preview,
2009
- removeButton,
2010
- defaultButton;
2011
-
2012
- e.preventDefault();
2013
-
2014
- control.saveValue( 'url', control.params.default );
2015
-
2016
- preview = control.container.find( '.placeholder, .thumbnail' );
2017
- removeButton = control.container.find( '.image-upload-remove-button' );
2018
- defaultButton = control.container.find( '.image-default-button' );
2019
-
2020
- if ( preview.length ) {
2021
- preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params.default + '" alt="" />' );
2022
- }
2023
- if ( removeButton.length ) {
2024
- removeButton.show();
2025
- defaultButton.hide();
2026
- }
2027
- } );
2028
- },
2029
-
2030
- /**
2031
- * Gets the value.
2032
- */
2033
- getValue: function() {
2034
- var control = this,
2035
- value = control.setting._value,
2036
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
2037
-
2038
- if ( 'array' === saveAs && _.isString( value ) ) {
2039
- value = {
2040
- url: value
2041
- };
2042
- }
2043
- return value;
2044
- },
2045
-
2046
- /**
2047
- * Saves the value.
2048
- */
2049
- saveValue: function( property, value ) {
2050
- var control = this,
2051
- valueOld = control.setting._value,
2052
- saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
2053
-
2054
- if ( 'array' === saveAs ) {
2055
- if ( _.isString( valueOld ) ) {
2056
- valueOld = {};
2057
- }
2058
- valueOld[ property ] = value;
2059
- control.setting.set( valueOld );
2060
- control.container.find( 'button' ).trigger( 'change' );
2061
- return;
2062
- }
2063
- control.setting.set( value );
2064
- control.container.find( 'button' ).trigger( 'change' );
2065
- }
2066
- } );
2067
wp.customize.controlConstructor['kirki-multicheck'] = wp.customize.kirkiDynamicControl.extend( {
2068
2069
initKirkiControl: function() {
@@ -3235,35 +3200,35 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3235
control.localFontsCheckbox();
3236
3237
// Font-size.
3238
- if ( control.params.default['font-size'] ) {
3239
this.container.on( 'change keyup paste', '.font-size input', function() {
3240
control.saveValue( 'font-size', jQuery( this ).val() );
3241
} );
3242
}
3243
3244
// Line-height.
3245
- if ( control.params.default['line-height'] ) {
3246
this.container.on( 'change keyup paste', '.line-height input', function() {
3247
control.saveValue( 'line-height', jQuery( this ).val() );
3248
} );
3249
}
3250
3251
// Margin-top.
3252
- if ( control.params.default['margin-top'] ) {
3253
this.container.on( 'change keyup paste', '.margin-top input', function() {
3254
control.saveValue( 'margin-top', jQuery( this ).val() );
3255
} );
3256
}
3257
3258
// Margin-bottom.
3259
- if ( control.params.default['margin-bottom'] ) {
3260
this.container.on( 'change keyup paste', '.margin-bottom input', function() {
3261
control.saveValue( 'margin-bottom', jQuery( this ).val() );
3262
} );
3263
}
3264
3265
// Letter-spacing.
3266
- if ( control.params.default['letter-spacing'] ) {
3267
value['letter-spacing'] = ( jQuery.isNumeric( value['letter-spacing'] ) ) ? value['letter-spacing'] + 'px' : value['letter-spacing'];
3268
this.container.on( 'change keyup paste', '.letter-spacing input', function() {
3269
value['letter-spacing'] = ( jQuery.isNumeric( jQuery( this ).val() ) ) ? jQuery( this ).val() + 'px' : jQuery( this ).val();
@@ -3272,35 +3237,35 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3272
}
3273
3274
// Word-spacing.
3275
- if ( control.params.default['word-spacing'] ) {
3276
this.container.on( 'change keyup paste', '.word-spacing input', function() {
3277
control.saveValue( 'word-spacing', jQuery( this ).val() );
3278
} );
3279
}
3280
3281
// Text-align.
3282
- if ( control.params.default['text-align'] ) {
3283
this.container.on( 'change', '.text-align input', function() {
3284
control.saveValue( 'text-align', jQuery( this ).val() );
3285
} );
3286
}
3287
3288
// Text-transform.
3289
- if ( control.params.default['text-transform'] ) {
3290
jQuery( control.selector + ' .text-transform select' ).selectWoo().on( 'change', function() {
3291
control.saveValue( 'text-transform', jQuery( this ).val() );
3292
} );
3293
}
3294
3295
// Text-decoration.
3296
- if ( control.params.default['text-decoration'] ) {
3297
jQuery( control.selector + ' .text-decoration select' ).selectWoo().on( 'change', function() {
3298
control.saveValue( 'text-decoration', jQuery( this ).val() );
3299
} );
3300
}
3301
3302
// Color.
3303
- if ( ! _.isUndefined( control.params.default.color ) ) {
3304
picker = this.container.find( '.kirki-color-control' );
3305
picker.wpColorPicker( {
3306
change: function() {
@@ -3387,8 +3352,9 @@ wp.customize.controlConstructor['kirki-typography'] = wp.customize.kirkiDynamicC
3387
} );
3388
3389
// Set the initial value.
3390
- if ( value['font-family'] ) {
3391
- fontSelect.val( value['font-family'].replace( /'/g, '"' ) ).trigger( 'change' );
3392
}
3393
3394
// When the value changes
482
}
483
},
484
485
+ /**
486
+ * The image control.
487
+ *
488
+ * @since 3.0.34
489
+ */
490
+ 'kirki-image': {
491
+
492
+ /**
493
+ * Init the control.
494
+ *
495
+ * @since 3.0.34
496
+ * @param {Object} control - The customizer control object.
497
+ * @returns {null}
498
+ */
499
+ init: function( control ) {
500
+ var self = this;
501
+
502
+ // Render the template.
503
+ self.template( control );
504
+
505
+ // Init the control.
506
+ kirki.input.image.init( control );
507
+ },
508
+
509
+ /**
510
+ * Render the template.
511
+ *
512
+ * @since 3.0.34
513
+ * @param {Object} control - The customizer control object.
514
+ * @param {Object} control.params - The control parameters.
515
+ * @param {string} control.params.label - The control label.
516
+ * @param {string} control.params.description - The control description.
517
+ * @param {string} control.params.inputAttrs - extra input arguments.
518
+ * @param {string} control.params.default - The default value.
519
+ * @param {Object} control.params.choices - Any extra choices we may need.
520
+ * @param {string} control.id - The setting.
521
+ * @returns {null}
522
+ */
523
+ template: function( control ) {
524
+ var template = wp.template( 'kirki-input-image' );
525
+
526
+ control.container.html(
527
+ template( args = {
528
+ label: control.params.label,
529
+ description: control.params.description,
530
+ 'data-id': control.id,
531
+ inputAttrs: control.params.inputAttrs,
532
+ choices: control.params.choices,
533
+ value: kirki.setting.get( control.id )
534
+ } )
535
+ );
536
+ }
537
+ },
538
+
539
'kirki-select': {
540
541
/**
836
837
},
838
839
+ /**
840
+ * Image fields.
841
+ *
842
+ * @since 3.0.34
843
+ */
844
image: {
845
846
/**
847
+ * Init the control.
848
*
849
+ * @since 3.0.34
850
+ * @param {Object} control - The control object.
851
+ * @returns {null}
852
*/
853
+ init: function( control ) {
854
+ var value = kirki.setting.get( control.id ),
855
+ saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url',
856
+ preview = control.container.find( '.placeholder, .thumbnail' ),
857
+ previewImage = ( 'array' === saveAs ) ? value.url : value,
858
+ removeButton = control.container.find( '.image-upload-remove-button' ),
859
+ defaultButton = control.container.find( '.image-default-button' );
860
+
861
+ // Make sure value is properly formatted.
862
+ value = ( 'array' === saveAs && _.isString( value ) ) ? { url: value } : value;
863
864
+ control.container.find( '.kirki-controls-loading-spinner' ).hide();
865
+
866
+ // Tweaks for save_as = id.
867
+ if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) {
868
+ wp.media.attachment( value ).fetch().then( function() {
869
+ setTimeout( function() {
870
+ var url = wp.media.attachment( value ).get( 'url' );
871
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
872
+ }, 700 );
873
+ } );
874
}
875
+
876
+ // If value is not empty, hide the "default" button.
877
+ if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
878
+ control.container.find( 'image-default-button' ).hide();
879
}
880
881
+ // If value is empty, hide the "remove" button.
882
+ if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) {
883
+ removeButton.hide();
884
}
885
+
886
+ // If value is default, hide the default button.
887
+ if ( value === control.params.default ) {
888
+ control.container.find( 'image-default-button' ).hide();
889
}
890
+
891
+ if ( '' !== previewImage ) {
892
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
893
}
894
+
895
+ control.container.on( 'click', '.image-upload-button', function( e ) {
896
+ var image = wp.media( { multiple: false } ).open().on( 'select', function() {
897
+
898
+ // This will return the selected image from the Media Uploader, the result is an object.
899
+ var uploadedImage = image.state().get( 'selection' ).first(),
900
+ jsonImg = uploadedImage.toJSON(),
901
+ previewImage = jsonImg.url;
902
+
903
+ if ( ! _.isUndefined( jsonImg.sizes ) ) {
904
+ previewImg = jsonImg.sizes.full.url;
905
+ if ( ! _.isUndefined( jsonImg.sizes.medium ) ) {
906
+ previewImage = jsonImg.sizes.medium.url;
907
+ } else if ( ! _.isUndefined( jsonImg.sizes.thumbnail ) ) {
908
+ previewImage = jsonImg.sizes.thumbnail.url;
909
+ }
910
+ }
911
+
912
+ if ( 'array' === saveAs ) {
913
+ kirki.setting.set( control.id, {
914
+ id: jsonImg.id,
915
+ url: jsonImg.sizes.full.url,
916
+ width: jsonImg.width,
917
+ height: jsonImg.height
918
+ } );
919
+ } else if ( 'id' === saveAs ) {
920
+ kirki.setting.set( control.id, jsonImg.id );
921
+ } else {
922
+ kirki.setting.set( control.id, ( ( ! _.isUndefined( jsonImg.sizes ) ) ? jsonImg.sizes.full.url : jsonImg.url ) );
923
+ }
924
+
925
+ if ( preview.length ) {
926
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
927
+ }
928
+ if ( removeButton.length ) {
929
+ removeButton.show();
930
+ defaultButton.hide();
931
+ }
932
+ } );
933
+
934
+ e.preventDefault();
935
+ } );
936
+
937
+ control.container.on( 'click', '.image-upload-remove-button', function( e ) {
938
+
939
+ var preview,
940
+ removeButton,
941
+ defaultButton;
942
+
943
+ e.preventDefault();
944
+
945
+ kirki.setting.set( control.id, '' );
946
+
947
+ preview = control.container.find( '.placeholder, .thumbnail' );
948
+ removeButton = control.container.find( '.image-upload-remove-button' );
949
+ defaultButton = control.container.find( '.image-default-button' );
950
+
951
+ if ( preview.length ) {
952
+ preview.removeClass().addClass( 'placeholder' ).html( kirkiL10n.noFileSelected );
953
}
954
+ if ( removeButton.length ) {
955
+ removeButton.hide();
956
+ if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
957
+ defaultButton.show();
958
+ }
959
+ }
960
+ } );
961
962
+ control.container.on( 'click', '.image-default-button', function( e ) {
963
964
+ var preview,
965
+ removeButton,
966
+ defaultButton;
967
+
968
+ e.preventDefault();
969
+
970
+ kirki.setting.set( control.id, control.params.default );
971
+
972
+ preview = control.container.find( '.placeholder, .thumbnail' );
973
+ removeButton = control.container.find( '.image-upload-remove-button' );
974
+ defaultButton = control.container.find( '.image-default-button' );
975
+
976
+ if ( preview.length ) {
977
+ preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params.default + '" alt="" />' );
978
+ }
979
+ if ( removeButton.length ) {
980
+ removeButton.show();
981
+ defaultButton.hide();
982
+ }
983
+ } );
984
}
985
}
986
}
1400
numericValue,
1401
unit;
1402
1403
+ // Early exit if value is undefined.
1404
+ if ( 'undefined' === typeof value ) {
1405
+ return true;
1406
+ }
1407
+
1408
// Whitelist values.
1409
if ( 0 === value || '0' === value || 'auto' === value || 'inherit' === value || 'initial' === value ) {
1410
return true;
1429
// Check the validity of the numeric value and units.
1430
return ( ! isNaN( numericValue ) && -1 < jQuery.inArray( unit, validUnits ) );
1431
}
1432
+ },
1433
+
1434
+ /**
1435
+ * Parses HTML Entities.
1436
+ *
1437
+ * @since 3.0.34
1438
+ * @param {string} str - The string we want to parse.
1439
+ * @returns {string}
1440
+ */
1441
+ parseHtmlEntities: function( str ) {
1442
+ var parser = new DOMParser,
1443
+ dom = parser.parseFromString(
1444
+ '<!doctype html><body>' + str, 'text/html'
1445
+ );
1446
+
1447
+ return dom.body.textContent;
1448
}
1449
}
1450
} );
1844
*/
1845
kirkiNotifications: function() {
1846
1847
+ var control = this,
1848
+ acceptUnitless = ( 'undefined' !== typeof control.params.choices && 'undefined' !== typeof control.params.choices.accept_unitless && true === control.params.choices.accept_unitless );
1849
1850
wp.customize( control.id, function( setting ) {
1851
setting.bind( function( value ) {
1852
var code = 'long_title';
1853
1854
+ if ( false === kirki.util.validate.cssValue( value ) && ( ! acceptUnitless || isNaN( value ) ) ) {
1855
setting.notifications.add( code, new wp.customize.Notification(
1856
code,
1857
{
2029
select.val( control.setting._value ).trigger( 'change' );
2030
}
2031
} );
2032
wp.customize.controlConstructor['kirki-multicheck'] = wp.customize.kirkiDynamicControl.extend( {
2033
2034
initKirkiControl: function() {
3200
control.localFontsCheckbox();
3201
3202
// Font-size.
3203
+ if ( 'undefined' !== typeof control.params.default['font-size'] ) {
3204
this.container.on( 'change keyup paste', '.font-size input', function() {
3205
control.saveValue( 'font-size', jQuery( this ).val() );
3206
} );
3207
}
3208
3209
// Line-height.
3210
+ if ( 'undefined' !== typeof control.params.default['line-height'] ) {
3211
this.container.on( 'change keyup paste', '.line-height input', function() {
3212
control.saveValue( 'line-height', jQuery( this ).val() );
3213
} );
3214
}
3215
3216
// Margin-top.
3217
+ if ( 'undefined' !== typeof control.params.default['margin-top'] ) {
3218
this.container.on( 'change keyup paste', '.margin-top input', function() {
3219
control.saveValue( 'margin-top', jQuery( this ).val() );
3220
} );
3221
}
3222
3223
// Margin-bottom.
3224
+ if ( 'undefined' !== typeof control.params.default['margin-bottom'] ) {
3225
this.container.on( 'change keyup paste', '.margin-bottom input', function() {
3226
control.saveValue( 'margin-bottom', jQuery( this ).val() );
3227
} );
3228
}
3229
3230
// Letter-spacing.
3231
+ if ( 'undefined' !== typeof control.params.default['letter-spacing'] ) {
3232
value['letter-spacing'] = ( jQuery.isNumeric( value['letter-spacing'] ) ) ? value['letter-spacing'] + 'px' : value['letter-spacing'];
3233
this.container.on( 'change keyup paste', '.letter-spacing input', function() {
3234
value['letter-spacing'] = ( jQuery.isNumeric( jQuery( this ).val() ) ) ? jQuery( this ).val() + 'px' : jQuery( this ).val();
3237
}
3238
3239
// Word-spacing.
3240
+ if ( 'undefined' !== typeof control.params.default['word-spacing'] ) {
3241
this.container.on( 'change keyup paste', '.word-spacing input', function() {
3242
control.saveValue( 'word-spacing', jQuery( this ).val() );
3243
} );
3244
}
3245
3246
// Text-align.
3247
+ if ( 'undefined' !== typeof control.params.default['text-align'] ) {
3248
this.container.on( 'change', '.text-align input', function() {
3249
control.saveValue( 'text-align', jQuery( this ).val() );
3250
} );
3251
}
3252
3253
// Text-transform.
3254
+ if ( 'undefined' !== typeof control.params.default['text-transform'] ) {
3255
jQuery( control.selector + ' .text-transform select' ).selectWoo().on( 'change', function() {
3256
control.saveValue( 'text-transform', jQuery( this ).val() );
3257
} );
3258
}
3259
3260
// Text-decoration.
3261
+ if ( 'undefined' !== typeof control.params.default['text-decoration'] ) {
3262
jQuery( control.selector + ' .text-decoration select' ).selectWoo().on( 'change', function() {
3263
control.saveValue( 'text-decoration', jQuery( this ).val() );
3264
} );
3265
}
3266
3267
// Color.
3268
+ if ( 'undefined' !== typeof control.params.default.color ) {
3269
picker = this.container.find( '.kirki-color-control' );
3270
picker.wpColorPicker( {
3271
change: function() {
3352
} );
3353
3354
// Set the initial value.
3355
+ if ( value['font-family'] || '' === value['font-family'] ) {
3356
+ value['font-family'] = kirki.util.parseHtmlEntities( value['font-family'].replace( /'/g, '"' ) );
3357
+ fontSelect.val( value['font-family'] ).trigger( 'change' );
3358
}
3359
3360
// When the value changes