|
5 | 5 | <table class="form-table fancy-table" style="clear:none;"> |
6 | 6 | <tbody> |
7 | 7 | <tr valign="top"> |
8 | | - <th scope="row"><?php _e( 'Close Button', 'mfbfw' ); ?></th> |
| 8 | + <th scope="row"><?php _e( 'Close Button', 'mfbfw' ); ?> |
| 9 | + <span class="tooltip-right" |
| 10 | + data-tooltip="<?php _e( 'Show Close button (default: off)', 'mfbfw' ); ?>"> |
| 11 | + <i class="dashicons dashicons-editor-help"></i> |
| 12 | + </span> |
| 13 | + </th> |
9 | 14 | <td> |
10 | 15 | <fieldset> |
11 | | - <input type="checkbox" class="onoffswitch-checkbox" name="mfbfw[showCloseButton]" |
12 | | - id="showCloseButton"<?php if ( isset( $settings['showCloseButton'] ) && $settings['showCloseButton'] ) { |
13 | | - echo ' checked="yes"'; |
14 | | - } ?> /> |
15 | | - <label for="showCloseButton" class="onoffswitch-label"> |
16 | | - </label> |
17 | | - <span class="switch-text"><?php _e( 'Show Close button (default: off)', 'mfbfw' ); ?></span> |
| 16 | + <div class="epsilon-toggle"> |
| 17 | + <input class="epsilon-toggle__input" type="checkbox" id="showCloseButton" name="mfbfw[showCloseButton]" <?php checked( 1, isset( $settings['showCloseButton'] ) && $settings['showCloseButton'] ); ?> > |
| 18 | + <div class="epsilon-toggle__items"> |
| 19 | + <span class="epsilon-toggle__track"></span> |
| 20 | + <span class="epsilon-toggle__thumb"></span> |
| 21 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 22 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 23 | + </svg> |
| 24 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 25 | + <path d="M0 0h2v6H0z"></path> |
| 26 | + </svg> |
| 27 | + </div> |
| 28 | + </div> |
| 29 | + |
18 | 30 | <div class="cf"></div> |
19 | 31 | </fieldset> |
20 | 32 | </td> |
21 | 33 | </tr> |
22 | 34 | <tr valign="top"> |
23 | | - <th scope="row"><?php _e( 'Toolbar', 'mfbfw' ); ?></th> |
| 35 | + <th scope="row"><?php _e( 'Toolbar', 'mfbfw' ); ?> |
| 36 | + <span class="tooltip-right" |
| 37 | + data-tooltip="<?php _e( 'Show Toolbar (default: on)', 'mfbfw' ); ?>"> |
| 38 | + <i class="dashicons dashicons-editor-help"></i> |
| 39 | + </span> |
| 40 | + </th> |
24 | 41 | <td> |
25 | 42 | <fieldset> |
26 | | - <input type="checkbox" class="onoffswitch-checkbox" name="mfbfw[showToolbar]" |
27 | | - id="showToolbar"<?php if ( isset( $settings['showToolbar'] ) && $settings['showToolbar'] ) { |
28 | | - echo ' checked="yes"'; |
29 | | - } ?> /> |
30 | | - <label for="showToolbar" class="onoffswitch-label"> |
31 | | - </label> |
32 | | - <span class="switch-text"><?php _e( 'Show Toolbar (default: on)', 'mfbfw' ); ?></span> |
| 43 | + <div class="epsilon-toggle"> |
| 44 | + <input class="epsilon-toggle__input" type="checkbox" id="showToolbar" name="mfbfw[showToolbar]" <?php checked( 1, isset( $settings['showToolbar'] ) && $settings['showToolbar'] ); ?> > |
| 45 | + <div class="epsilon-toggle__items"> |
| 46 | + <span class="epsilon-toggle__track"></span> |
| 47 | + <span class="epsilon-toggle__thumb"></span> |
| 48 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 49 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 50 | + </svg> |
| 51 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 52 | + <path d="M0 0h2v6H0z"></path> |
| 53 | + </svg> |
| 54 | + </div> |
| 55 | + </div> |
33 | 56 | <div class="cf"></div> |
34 | 57 | </fieldset> |
35 | 58 | </td> |
36 | 59 | </tr> |
37 | 60 | <tr valign="top"> |
38 | | - <th scope="row"><?php _e( 'Border', 'mfbfw' ); ?></th> |
| 61 | + <th scope="row"><?php _e( 'Border', 'mfbfw' ); ?> |
| 62 | + <span class="tooltip-right" |
| 63 | + data-tooltip="<?php _e( 'Show Border (default: off)', 'mfbfw' ); ?>"> |
| 64 | + <i class="dashicons dashicons-editor-help"></i> |
| 65 | + </span> |
| 66 | + </th> |
39 | 67 | <td> |
40 | 68 | <fieldset> |
41 | | - <input class="onoffswitch-checkbox" type="checkbox" name="mfbfw[border]" |
42 | | - id="border"<?php if ( isset( $settings['border'] ) && $settings['border'] ) { |
43 | | - echo ' checked="yes"'; |
44 | | - } ?> /> |
45 | | - <label for="border" class="onoffswitch-label"></label> |
46 | | - <span class="switch-text"><?php _e( 'Show Border (default: off)', 'mfbfw' ); ?></span> |
| 69 | + <div class="epsilon-toggle"> |
| 70 | + <input class="epsilon-toggle__input" type="checkbox" id="border" name="mfbfw[border]" <?php checked( 1, isset( $settings['border'] ) && $settings['border'] ); ?> > |
| 71 | + <div class="epsilon-toggle__items"> |
| 72 | + <span class="epsilon-toggle__track"></span> |
| 73 | + <span class="epsilon-toggle__thumb"></span> |
| 74 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 75 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 76 | + </svg> |
| 77 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 78 | + <path d="M0 0h2v6H0z"></path> |
| 79 | + </svg> |
| 80 | + </div> |
| 81 | + </div> |
47 | 82 | <div class="cf"></div> |
48 | 83 | <div id="borderColorBlock" class="hidden-block"> |
49 | 84 | <label for="borderColor"> |
|
56 | 91 | </td> |
57 | 92 | </tr> |
58 | 93 | <tr valign="top"> |
59 | | - <th scope="row"><?php _e( 'Padding', 'mfbfw' ); ?></th> |
| 94 | + <th scope="row"><?php _e( 'Padding', 'mfbfw' ); ?> |
| 95 | + <span class="tooltip-right" |
| 96 | + data-tooltip="<?php _e( 'HTML color of the padding (default: #FFFFFF)', 'mfbfw' ); ?>"> |
| 97 | + <i class="dashicons dashicons-editor-help"></i> |
| 98 | + </span> |
| 99 | + </th> |
60 | 100 | <td> |
61 | 101 | <fieldset> |
62 | 102 | <label for="paddingColor"> |
63 | 103 | <input type="text" class="color-btn" name="mfbfw[paddingColor]" id="paddingColor" |
64 | 104 | value="<?php echo $settings['paddingColor'] ?>" size="7" maxlength="7"/> |
65 | 105 | </label> |
66 | | - <p class="description"><?php _e( 'HTML color of the padding (default: #FFFFFF)', 'mfbfw' ); ?></p> |
67 | 106 | <p class="description"><?php _e( '(This should be left on #FFFFFF (white) if you want to display anything other than images, like inline or framed content)', 'mfbfw' ); ?></p> |
68 | 107 | <div class="line-spacer"></div> |
69 | 108 | <label for="padding" class="inlined"> |
|
78 | 117 | </td> |
79 | 118 | </tr> |
80 | 119 | <tr valign="top"> |
81 | | - <th scope="row"><?php _e( 'Overlay Options', 'mfbfw' ); ?></th> |
| 120 | + <th scope="row"><?php _e( 'Overlay Options', 'mfbfw' ); ?> |
| 121 | + <span class="tooltip-right" |
| 122 | + data-tooltip="<?php _e( 'Add overlay (default: on)', 'mfbfw' ); ?>"> |
| 123 | + <i class="dashicons dashicons-editor-help"></i> |
| 124 | + </span> |
| 125 | + </th> |
82 | 126 | <td> |
83 | 127 | <fieldset> |
84 | | - <input type="checkbox" class="onoffswitch-checkbox" name="mfbfw[overlayShow]" |
85 | | - id="overlayShow"<?php if ( isset( $settings['overlayShow'] ) && $settings['overlayShow'] ) { |
86 | | - echo ' checked="yes"'; |
87 | | - } ?> /> |
88 | | - <label for="overlayShow" class="onoffswitch-label"></label> |
89 | | - <span class="switch-text"><?php _e( 'Add overlay (default: on)', 'mfbfw' ); ?></span> |
| 128 | + <div class="epsilon-toggle"> |
| 129 | + <input class="epsilon-toggle__input" type="checkbox" id="overlayShow" name="mfbfw[overlayShow]" <?php checked( 1, isset( $settings['overlayShow'] ) && $settings['overlayShow'] ); ?> > |
| 130 | + <div class="epsilon-toggle__items"> |
| 131 | + <span class="epsilon-toggle__track"></span> |
| 132 | + <span class="epsilon-toggle__thumb"></span> |
| 133 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 134 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 135 | + </svg> |
| 136 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 137 | + <path d="M0 0h2v6H0z"></path> |
| 138 | + </svg> |
| 139 | + </div> |
| 140 | + </div> |
| 141 | + |
90 | 142 | <div class="cf"></div> |
91 | 143 | <div id="overlayBlock" class="hidden-block"> |
92 | 144 | <label for="overlayColor"> |
|
108 | 160 | </td> |
109 | 161 | </tr> |
110 | 162 | <tr valign="top"> |
111 | | - <th scope="row"><?php _e( 'Title', 'mfbfw' ); ?></th> |
| 163 | + <th scope="row"><?php _e( 'Title', 'mfbfw' ); ?> |
| 164 | + <span class="tooltip-right" |
| 165 | + data-tooltip="<?php _e( 'Show the title (default: on)', 'mfbfw' ); ?>"> |
| 166 | + <i class="dashicons dashicons-editor-help"></i> |
| 167 | + </span> |
| 168 | + </th> |
112 | 169 | <td> |
113 | 170 | <fieldset> |
114 | | - <input type="checkbox" class="onoffswitch-checkbox" name="mfbfw[titleShow]" |
115 | | - id="titleShow"<?php if ( isset( $settings['titleShow'] ) && $settings['titleShow'] ) { |
116 | | - echo ' checked="yes"'; |
117 | | - } ?> /> |
118 | | - <label for="titleShow" class="onoffswitch-label"></label> |
119 | | - <span class="switch-text"><?php _e( 'Show the title (default: on)', 'mfbfw' ); ?></span> |
| 171 | + <div class="epsilon-toggle"> |
| 172 | + <input class="epsilon-toggle__input" type="checkbox" id="titleShow" name="mfbfw[titleShow]" <?php checked( 1, isset( $settings['titleShow'] ) && $settings['titleShow'] );?> > |
| 173 | + <div class="epsilon-toggle__items"> |
| 174 | + <span class="epsilon-toggle__track"></span> |
| 175 | + <span class="epsilon-toggle__thumb"></span> |
| 176 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 177 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 178 | + </svg> |
| 179 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 180 | + <path d="M0 0h2v6H0z"></path> |
| 181 | + </svg> |
| 182 | + </div> |
| 183 | + </div> |
| 184 | + |
120 | 185 | <div class="cf"></div> |
121 | 186 | <div id="titleBlock" class="hidden-block"> |
122 | 187 | <label for="titleSize"> |
@@ -162,15 +227,28 @@ class="colorpick" value="<?php echo $settings['titleColor']; ?>" size="7" |
162 | 227 | </td> |
163 | 228 | </tr> |
164 | 229 | <tr valign="top"> |
165 | | - <th scope="row"><?php _e( 'Navigation Arrows', 'mfbfw' ); ?></th> |
| 230 | + <th scope="row"><?php _e( 'Navigation Arrows', 'mfbfw' ); ?> |
| 231 | + <span class="tooltip-right" |
| 232 | + data-tooltip="<?php _e( 'Show the navigation arrows (default: on)', 'mfbfw' ); ?>"> |
| 233 | + <i class="dashicons dashicons-editor-help"></i> |
| 234 | + </span> |
| 235 | + </th> |
166 | 236 | <td> |
167 | 237 | <fieldset> |
168 | | - <input type="checkbox" class="onoffswitch-checkbox" name="mfbfw[showNavArrows]" |
169 | | - id="showNavArrows"<?php if ( isset( $settings['showNavArrows'] ) && $settings['showNavArrows'] ) { |
170 | | - echo ' checked="yes"'; |
171 | | - } ?> /> |
172 | | - <label for="showNavArrows" class="onoffswitch-label"></label> |
173 | | - <span class="switch-text"><?php _e( 'Show the navigation arrows (default: on)', 'mfbfw' ); ?></span> |
| 238 | + <div class="epsilon-toggle"> |
| 239 | + <input class="epsilon-toggle__input" type="checkbox" id="showNavArrows" name="mfbfw[showNavArrows]" <?php checked( 1, isset( $settings['showNavArrows'] ) && $settings['showNavArrows'] ); ?> > |
| 240 | + <div class="epsilon-toggle__items"> |
| 241 | + <span class="epsilon-toggle__track"></span> |
| 242 | + <span class="epsilon-toggle__thumb"></span> |
| 243 | + <svg class="epsilon-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 6 6"> |
| 244 | + <path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z"></path> |
| 245 | + </svg> |
| 246 | + <svg class="epsilon-toggle__on" width="2" height="6" aria-hidden="true" role="img" focusable="false" viewBox="0 0 2 6"> |
| 247 | + <path d="M0 0h2v6H0z"></path> |
| 248 | + </svg> |
| 249 | + </div> |
| 250 | + </div> |
| 251 | + |
174 | 252 | <div class="cf"></div> |
175 | 253 | </fieldset> |
176 | 254 | </td> |
|
0 commit comments