Less variables and simpler example

leifos-gmbh · Sep 21, 2018 · 3ef17da · 3ef17da
1 parent c45870c
commit 3ef17da
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 43 deletions.
diff --git a/src/UI/examples/Button/Toggle/base.php b/src/UI/examples/Button/Toggle/base.php
@@ -4,34 +4,14 @@ function base() {
 	$factory = $DIC->ui()->factory();
 	$renderer = $DIC->ui()->renderer();
 
-	$message = 'Are you sure you want to delete the following items?';
+	$message1 = 'Toggle Button has been turned on';
+	$message2 = 'Toggle Button has been turned off';
 	$form_action = $DIC->ctrl()->getFormActionByClass('ilsystemstyledocumentationgui');
-	$icon = $factory->image()->standard('./templates/default/images/icon_crs.svg', '');
-	$modal = $factory->modal()->interruptive('My Title', $message, $form_action)
-		->withAffectedItems(array(
-			$factory->modal()->interruptiveItem(10, 'Course 1', $icon, 'Some description text'),
-			$factory->modal()->interruptiveItem(20, 'Course 2', $icon, 'Another description text'),
-			$factory->modal()->interruptiveItem(30, 'Course 3', $icon, 'Last but not least, a description'),
-		));
 
-	$modal2 = $factory->modal()->interruptive('Your Title', $message, $form_action)
-		->withAffectedItems(array(
-			$factory->modal()->interruptiveItem(40, 'Course 4', $icon, 'Some description text'),
-			$factory->modal()->interruptiveItem(50, 'Course 5', $icon, 'Another description text'),
-			$factory->modal()->interruptiveItem(60, 'Course 6', $icon, 'Last but not least, a description'),
-		));
+	$modal = $factory->modal()->interruptive('ON', $message1, $form_action);
+	$modal2 = $factory->modal()->interruptive('OFF', $message2, $form_action);
 
 	$button = $factory->button()->toggle("", $modal->getShowSignal(), $modal2->getShowSignal());
 
-	// Display POST data of affected items in a panel
-	$panel = '';
-	if (isset($_POST['interruptive_items'])) {
-		$panel = $factory->panel()->standard(
-			'Affected Items',
-			$factory->legacy(print_r($_POST['interruptive_items'], true))
-		);
-		$panel = $renderer->render($panel);
-	}
-
-	return $renderer->render([$button, $modal, $modal2]) . $panel;
+	return $renderer->render([$button, $modal, $modal2]);
 }
diff --git a/src/UI/templates/default/Button/toggle.less b/src/UI/templates/default/Button/toggle.less
@@ -1,33 +1,34 @@
 .il-toggle-button {
   position: relative;
-  //display: inline-block;
-  height: 19px;
-  padding: 0px 25px;
-  border: 1px solid rgba(0,0,0,0.1);
-  border-radius: 40px;
-  background: lightgrey;
+  display: inline-block;
+  height: @il-btn-toggle-height;
+  padding-left: @il-btn-toggle-padding;
+  padding-right: @il-btn-toggle-padding;
+  border: @il-btn-toggle-border @il-btn-toggle-border-color;
+  border-radius: @il-btn-toggle-border-radius;
+  background: @il-disabled-btn-toggle-bg;
   cursor: pointer;
 }
 
 .il-toggle-button .il-toggle-switch {
   position: absolute;
-  top: -4px;
-  left: -6%;
-  width: 25px;
-  height: 25px;
-  border: 1px solid rgba(0,0,0,0.2);
-  border-radius: 40px;
-  background: grey;
+  top: @il-btn-toggle-switch-position-top;
+  left: @il-disabled-btn-toggle-switch-position-left;
+  width: @il-btn-toggle-switch-size;
+  height: @il-btn-toggle-switch-size;
+  border: @il-btn-toggle-border @il-btn-toggle-switch-border-color;
+  border-radius: @il-btn-toggle-border-radius;
+  background: @il-disabled-btn-toggle-switch-color;
 
-  -webkit-transition: all 0.25s ease-in-out; /* Safari */
-  transition: all 0.25s ease-in-out;
+  -webkit-transition: @il-btn-toggle-switch-transition; /* Safari */
+  transition: @il-btn-toggle-switch-transition;
 }
 
 .il-toggle-button.on {
-  background: #b3b3cc;
+  background: @il-enabled-btn-toggle-bg;
 }
 
 .il-toggle-button.on .il-toggle-switch {
-  left: 53%;
-  background: #666699;
+  left: @il-enabled-btn-toggle-switch-position-left;
+  background: @il-enabled-btn-toggle-switch-color;
 }
diff --git a/templates/default/less/variables.less b/templates/default/less/variables.less
@@ -298,6 +298,31 @@
 //** Border color of inactive buttons
 @il-disabled-btn-border:         #e0e0e0;
 
+
+//== Toggle Buttons
+//
+//##
+
+//** The Toggle Button without the Switch
+@il-btn-toggle-height: 19px;
+@il-btn-toggle-padding: 25px;
+@il-btn-toggle-border: 1px solid;
+@il-btn-toggle-border-color: rgba(0,0,0,0.1);
+@il-btn-toggle-border-radius: 40px;
+@il-enabled-btn-toggle-bg: lighten(@il-enabled-btn-toggle-switch-color, 30%);
+@il-disabled-btn-toggle-bg: lighten(@il-disabled-btn-toggle-switch-color, 30%);
+
+//** The Switch of the Toggle Button
+@il-btn-toggle-switch-position-top: -4px;
+@il-btn-toggle-switch-size: 25px;
+@il-btn-toggle-switch-border-color: rgba(0,0,0,0.2);
+@il-btn-toggle-switch-transition: all 0.25s ease-in-out;
+@il-enabled-btn-toggle-switch-color: @brand-primary;
+@il-enabled-btn-toggle-switch-position-left: 53%;
+@il-disabled-btn-toggle-switch-color: #808080;
+@il-disabled-btn-toggle-switch-position-left: -6%;
+
+
 //== Breadcrumbs
 //
 //##