diff --git a/example/reagent-demo/src/acme/frontend/app.cljc b/example/reagent-demo/src/acme/frontend/app.cljc index 27100ea..a76ae84 100644 --- a/example/reagent-demo/src/acme/frontend/app.cljc +++ b/example/reagent-demo/src/acme/frontend/app.cljc @@ -27,7 +27,24 @@ [: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"] @@ -35,7 +52,7 @@ [: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"] diff --git a/lib/girouette/src/girouette/tw/border.cljc b/lib/girouette/src/girouette/tw/border.cljc index a2a574a..6d450c5 100644 --- a/lib/girouette/src/girouette/tw/border.cljc +++ b/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 diff --git a/lib/girouette/test/girouette/tw/border_test.cljc b/lib/girouette/test/girouette/tw/border_test.cljc index 12f2fce..7196982 100644 --- a/lib/girouette/test/girouette/tw/border_test.cljc +++ b/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])")