Merge pull request #93 from andrei-zhidkov/fix-divide-x

Fix output for divide-x tw class

Author: green-coder

example/reagent-demo/src/acme/frontend/app.cljc

@@ -27,15 +27,32 @@
     [:div.flex-1.p-4.text-center.text-4xl.text-cat-orange.bg-cat-black "Miaw!!!"]]
 
    [:div.flex.my-10
-    ;; Demonstrates a fix on the `divide-*` classes.
+    ;; Demonstrates a fix on the `divide-x` class.
+    [:div.mx-auto.p-6.bg-gray-100
+     [:div.flex.flex-row.bg-white.divide-x-10.divide-red-400-50
+      [:div.p-3 "item 1"]
+      [:div.p-3 "item 2"]
+      [:div.p-3 {:hidden true} "item 3"]
+      [:div.p-3 "item 4"]]]
+
+    ;; Demonstrates the `divide-x-reverse` class.
+    [:div.mx-auto.p-6.bg-gray-100
+     [:div.flex.flex-row-reverse.bg-white.divide-x-10.divide-x-reverse.divide-red-400-50
+      [:div.p-3 "reverse item 1"]
+      [:div.p-3 "reverse item 2"]
+      [:div.p-3 {:hidden true} "reverse item 3"]
+      [:div.p-3 "reverse item 4"]]]]
+
+   [:div.flex.my-10
+    ;; Demonstrates a fix on the `divide-y` class.
     [:div.mx-auto.p-6.bg-gray-100
      [:div.flex.flex-col.bg-white.divide-y-10.divide-red-400-50
       [:div.p-3 "item 1"]
       [:div.p-3 "item 2"]
       [:div.p-3 {:hidden true} "item 3"]
       [:div.p-3 "item 4"]]]
 
-    ;; Demonstrates the `divide-*-reverse` classes.
+    ;; Demonstrates the `divide-y-reverse` class.
     [:div.mx-auto.p-6.bg-gray-100
      [:div.flex.flex-col-reverse.bg-white.divide-y-10.divide-y-reverse.divide-red-400-50
       [:div.p-3 "reverse item 1"]

lib/girouette/src/girouette/tw/border.cljc

@@ -137,8 +137,8 @@
                    (case axis
                      "x" (if (nil? divide-width-reverse)
                            {:--gi-divide-x-reverse 0
-                            :border-right-width (str "calc(" width " * calc(1 - var(--gi-divide-x-reverse)))")
-                            :border-left-width  (str "calc(" width " * var(--gi-divide-x-reverse))")}
+                            :border-right-width (str "calc(" width " * var(--gi-divide-x-reverse))")
+                            :border-left-width  (str "calc(" width " * calc(1 - var(--gi-divide-x-reverse)))")}
                            {:--gi-divide-x-reverse 1})
                      "y" (if (nil? divide-width-reverse)
                            {:--gi-divide-y-reverse 0

lib/girouette/test/girouette/tw/border_test.cljc

@@ -82,8 +82,8 @@
     "divide-x"
     [".divide-x" [(garden.selectors.CSSSelector. "&>:not([hidden])~:not([hidden])")
                   {:--gi-divide-x-reverse 0
-                   :border-right-width    "calc(1px * calc(1 - var(--gi-divide-x-reverse)))"
-                   :border-left-width     "calc(1px * var(--gi-divide-x-reverse))"}]]
+                   :border-right-width    "calc(1px * var(--gi-divide-x-reverse))"
+                   :border-left-width     "calc(1px * calc(1 - var(--gi-divide-x-reverse)))"}]]
 
     "divide-y-2"
     [".divide-y-2" [(garden.selectors.CSSSelector. "&>:not([hidden])~:not([hidden])")