1 files changed, 60 insertions, 36 deletions

diff --git a/web/src/css.rs b/web/src/css.rs
index 6a307770..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,29 +12,25 @@ 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 {
-    /// Returns the class name of the [`Style`].
-    ///
-    /// [`Style`]: enum.Style.html
+    /// Returns the class name of the [`Rule`].
     pub fn class<'a>(&self) -> String {
         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),
         }
     }
 
-    /// Returns the declaration of the [`Style`].
-    ///
-    /// [`Style`]: enum.Style.html
+    /// Returns the declaration of the [`Rule`].
     pub fn declaration<'a>(&self, bump: &'a bumpalo::Bump) -> &'a str {
         let class = self.class();
 
@@ -49,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 }} \
@@ -70,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(),
         }
     }
 }
@@ -81,22 +110,17 @@ pub struct Css<'a> {
 }
 
 impl<'a> Css<'a> {
-    /// Creates an empty style [`Sheet`].
-    ///
-    /// [`Sheet`]: struct.Sheet.html
+    /// Creates an empty [`Css`].
     pub fn new() -> Self {
         Css {
             rules: BTreeMap::new(),
         }
     }
 
-    /// Inserts the [`rule`] in the [`Sheet`], if it was not previously
+    /// Inserts the [`Rule`] in the [`Css`], if it was not previously
     /// inserted.
     ///
     /// It returns the class name of the provided [`Rule`].
-    ///
-    /// [`Sheet`]: struct.Sheet.html
-    /// [`Rule`]: enum.Rule.html
     pub fn insert(&mut self, bump: &'a bumpalo::Bump, rule: Rule) -> String {
         let class = rule.class();
 
@@ -107,9 +131,7 @@ impl<'a> Css<'a> {
         class
     }
 
-    /// Produces the VDOM node of the style [`Sheet`].
-    ///
-    /// [`Sheet`]: struct.Sheet.html
+    /// Produces the VDOM node of the [`Css`].
     pub fn node(self, bump: &'a bumpalo::Bump) -> dodrio::Node<'a> {
         use dodrio::builder::*;
 
@@ -133,8 +155,6 @@ impl<'a> Css<'a> {
 }
 
 /// Returns the style value for the given [`Length`].
-///
-/// [`Length`]: ../enum.Length.html
 pub fn length(length: Length) -> String {
     match length {
         Length::Shrink => String::from("auto"),
@@ -164,15 +184,11 @@ pub fn min_length(units: u32) -> String {
 }
 
 /// Returns the style value for the given [`Color`].
-///
-/// [`Color`]: ../struct.Color.html
 pub fn color(Color { r, g, b, a }: Color) -> String {
     format!("rgba({}, {}, {}, {})", 255.0 * r, 255.0 * g, 255.0 * b, a)
 }
 
 /// Returns the style value for the given [`Background`].
-///
-/// [`Background`]: ../struct.Background.html
 pub fn background(background: Background) -> String {
     match background {
         Background::Color(c) => color(c),
@@ -180,8 +196,6 @@ pub fn background(background: Background) -> String {
 }
 
 /// Returns the style value for the given [`Align`].
-///
-/// [`Align`]: ../enum.Align.html
 pub fn align(align: Align) -> &'static str {
     match align {
         Align::Start => "flex-start",
@@ -189,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
+    )
+}