Ring Groups: Enhance Destination Enabled Switch

themes/default/app_config.php

@@ -1655,6 +1655,46 @@
 		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
 		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color (and opacity) of input placeholder text.";
 		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "f409564a-5f06-4d93-b8ae-7fa38838252a";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "input_toggle_switch_background_color_false";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#c0c0c0";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the toggle switch container when it is in the off/false position.";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "7d922f86-a085-4a9a-9656-677c596101c6";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "input_toggle_switch_background_color_true";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#2e82d0";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the toggle switch container when it is in the on/true position.";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "26ba3dec-55c2-4884-8d6e-3b05022865a7";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "input_toggle_switch_handle_color";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "#ffffff";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the toggle switch handle.";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "e375d855-fc96-46ff-abd0-199c812bdb25";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "input_toggle_switch_handle_symbol";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether the off/false 'O' and on/true '|' symbol appears on the toggle switch handle.";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "e3fc36f3-c11e-4030-8338-1bff25e55748";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "input_toggle_style";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "switch_round";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the toggle control style. Options: 'select' (default), 'switch_square', 'switch_round'";
+		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "c2630eb3-a04e-4a32-9990-45f37af70005";
 		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
 		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "login_input_background_color";

themes/default/css.php

@@ -1672,6 +1672,125 @@ header('Expires: '.gmdate('D, d M Y H:i:s',time()+3600).' GMT');
 		border-color: <?php echo ($_SESSION['theme']['login_input_border_color']['text'] != '') ? $_SESSION['theme']['login_input_border_color']['text'] : (($_SESSION['theme']['input_border_color']['text'] != '') ? $_SESSION['theme']['input_border_color']['text'] : '#c0c0c0'); ?>;
 		}
 
+/* TOGGLE SWITCH *******************************************************/
+
+	.switch { /* container */
+		position: relative;
+		display: inline-block;
+		width: 50px;
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+			height: 28px;
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+			height: 26px;
+		<?php } ?>
+		margin: 1px;
+		<?php $br = format_border_radius($_SESSION['theme']['input_border_radius']['text'], '3px'); ?>
+		-moz-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+		-webkit-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+		-khtml-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+		border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+		<?php unset($br); ?>
+		}
+
+	.switch > input {
+		display: none;
+		}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: <?php echo $_SESSION['theme']['input_toggle_switch_background_color_false']['text'] ?: ($_SESSION['theme']['input_border_color']['text'] ?: '#c0c0c0'); ?>;
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+			<?php $br = format_border_radius($_SESSION['theme']['input_border_radius']['text'], '3px'); ?>
+			-moz-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			-webkit-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			-khtml-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			<?php unset($br); ?>
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+			border-radius: 22px;
+		<?php } ?>
+		-webkit-transition: .2s;
+		transition: .2s;
+		}
+
+	.slider:before { /* when disabled */
+		position: absolute;
+		<?php if ($_SESSION['theme']['input_toggle_switch_handle_symbol']['boolean'] === 'true') { ?>
+			text-align: center;
+			<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+				padding-top: 3px;
+			<?php } else if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+				padding-top: 2px;
+			<?php } ?>
+			content: 'O';
+			color: <?php echo $_SESSION['theme']['input_toggle_switch_background_color_false']['text'] ?: ($_SESSION['theme']['input_border_color']['text'] ?: '#c0c0c0'); ?>;
+		<?php } else { ?>
+			content: '';
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+			height: 24px;
+			width: 24px;
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+			height: 22px;
+			width: 22px;
+		<?php } ?>
+		top: 2px;
+		left: 2px;
+		bottom: 2px;
+		background: <?php echo $_SESSION['theme']['input_toggle_switch_handle_color']['text'] ?: ($_SESSION['theme']['input_background_color']['text'] ?: '#ffffff'); ?>;
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+			<?php $br = format_border_radius($_SESSION['theme']['input_border_radius']['text'], '3px'); ?>
+			-moz-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			-webkit-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			-khtml-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
+			<?php unset($br); ?>
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+			border-radius: 50%;
+		<?php } ?>
+		-webkit-transition: .2s;
+		transition: .2s;
+		}
+
+	input:checked + .slider { /* when enabled */
+		background: <?php echo $_SESSION['theme']['input_toggle_switch_background_color_true']['text'] ?: '#2e82d0'; ?>;
+		}
+
+	input:focus + .slider { /* when focused, required for switch movement */
+		}
+
+	input:checked + .slider:before { /* distance switch moves horizontally */
+		<?php if ($_SESSION['theme']['input_toggle_switch_handle_symbol']['boolean'] === 'true') { ?>
+			text-align: center;
+			<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+				padding-top: 2px;
+			<?php } else if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+				padding-top: 1px;
+			<?php } ?>
+			content: '|';
+			color: <?php echo $_SESSION['theme']['input_toggle_switch_background_color_true']['text'] ?: '#2e82d0'; ?>;
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_square') { ?>
+			-webkit-transform: translateX(22px);
+			-ms-transform: translateX(22px);
+			transform: translateX(22px);
+		<?php } ?>
+		<?php if ($_SESSION['theme']['input_toggle_style']['text'] == 'switch_round') { ?>
+			-webkit-transform: translateX(24px);
+			-ms-transform: translateX(24px);
+			transform: translateX(24px);
+		<?php } ?>
+		}
+
 /* TABLES *****************************************************************/
 
 	table {