1 files changed, 55 insertions, 12 deletions
diff --git a/web/src/css.rs b/web/src/css.rs
index bdde23f3..21f51f85 100644
--- a/web/src/css.rs
+++ b/web/src/css.rs
@@ -1,5 +1,5 @@
 //! Style your widgets.
-use crate::{bumpalo, Align, Background, Color, Length};
+use crate::{bumpalo, Align, Background, Color, Length, Padding};
 
 use std::collections::BTreeMap;
 
@@ -12,11 +12,11 @@ pub enum Rule {
     /// Container with horizonal distribution
     Row,
 
-    /// Padding of the container
-    Padding(u16),
-
     /// Spacing between elements
     Spacing(u16),
+
+    /// Toggler input for a specific size
+    Toggler(u16),
 }
 
 impl Rule {
@@ -25,8 +25,8 @@ impl Rule {
         match self {
             Rule::Column => String::from("c"),
             Rule::Row => String::from("r"),
-            Rule::Padding(padding) => format!("p-{}", padding),
             Rule::Spacing(spacing) => format!("s-{}", spacing),
+            Rule::Toggler(size) => format!("toggler-{}", size),
         }
     }
 
@@ -45,13 +45,6 @@ impl Rule {
 
                 bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str()
             }
-            Rule::Padding(padding) => bumpalo::format!(
-                in bump,
-                ".{} {{ box-sizing: border-box; padding: {}px }}",
-                class,
-                padding
-            )
-            .into_bump_str(),
             Rule::Spacing(spacing) => bumpalo::format!(
                 in bump,
                 ".c.{} > * {{ margin-bottom: {}px }} \
@@ -66,6 +59,46 @@ impl Rule {
                 class
             )
             .into_bump_str(),
+            Rule::Toggler(size) => bumpalo::format!(
+                in bump,
+                ".toggler-{} {{ display: flex; cursor: pointer; justify-content: space-between; }} \
+                 .toggler-{} input {{ display:none; }} \
+                 .toggler-{} span {{ background-color: #b1b1b1; position: relative; display: inline-flex; width:{}px; height: {}px; border-radius: {}px;}} \
+                 .toggler-{} span > span {{ background-color: #FFFFFF; width: {}px; height: {}px; border-radius: 50%; top: 1px; left: 1px;}} \
+                 .toggler-{}:hover span > span {{ background-color: #f1f1f1 !important; }} \
+                 .toggler-{} input:checked + span {{ background-color: #00FF00; }} \
+                 .toggler-{} input:checked + span > span {{ -webkit-transform: translateX({}px); -ms-transform:translateX({}px); transform: translateX({}px); }}
+                ",
+                // toggler
+                size,
+
+                // toggler input
+                size,
+
+                // toggler span
+                size,
+                size*2,
+                size,
+                size,
+
+                // toggler span > span
+                size,
+                size-2,
+                size-2,
+
+                // toggler: hover + span > span
+                size,
+
+                // toggler input:checked + span
+                size,
+
+                // toggler input:checked + span > span
+                size,
+                size,
+                size,
+                size
+            )
+            .into_bump_str(),
         }
     }
 }
@@ -170,3 +203,13 @@ pub fn align(align: Align) -> &'static str {
         Align::End => "flex-end",
     }
 }
+
+/// Returns the style value for the given [`Padding`].
+///
+/// [`Padding`]: struct.Padding.html
+pub fn padding(padding: Padding) -> String {
+    format!(
+        "{}px {}px {}px {}px",
+        padding.top, padding.right, padding.bottom, padding.left
+    )
+}