style.cljs

(ns navimize.style
  (:require [garden.core :as garden]
            [garden.arithmetic :refer [+ - * /]]
            [garden.units :as u :refer [px pt]]
            [garden.selectors :as s]
            [garden.color :as color]
            [garden.stylesheet :refer [at-media]])
  (:refer-clojure :exclude [+ - * /]))

(def leftest-width (px 50))

(def color-out "#F3FAF0")
(def color-in "#E7F3FC")
(def color-notify "#FFF6E6")
(def color-cancel "#FFEEE6")
(def color-reschedule "#FFEEE6")
(def color-pending "#EDEEF0")

(def button-hover-darken 5)
(def button-text-darken 50)

(defn switch []
  [:.switch
   [:.lever {:bottom "0px"
             :content "''"
             :cursor "pointer"
             :display "inline-block"
             :height "15px"
             :left "0px"
             :position "relative"
             :right "0px"
             :top "0px"
             :vertical-align "middle"
             :width "40px"
             :perspective-origin "20px 7.5px"
             :transform-origin "20px 7.5px"
             :background-color "#818181"
             :border-radius "15px"
             :margin "0px 16px"
             :transition "background 0.3s ease"}
    [:&:after {:bottom "-3px"
               :box-shadow "rgba(0, 0, 0, 0.4) 0px 1px 3px 1px"
               :content "''"
               :cursor "pointer"
               :display "block"
               :height "21px"
               :left "-5px"
               :position "absolute"
               :right "-5px"
               :top "-3px"
               :width "21px"
               :perspective-origin "10.5px 10.5px"
               :transform-origin "10.5px 10.5px"
               :background-color "#F1F1F1"
               :border-radius "21px"
               :transition "left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease"}]]
   [:label
    [(s/input (s/attr= "type" "checkbox")) {:opacity 0
                                            :width 0
                                            :height 0}]
    [(s/+ (s/input (s/attr= "type" "checkbox") (s/checked)) :.lever) {:background-color "#84c7c1"}
     [:&:after {:left "24px"
                :background-color "#26a69a"}]]]])

(def css
  [(switch)
   [:* {:box-sizing "border-box"}]
   [:body {:margin 0
           :overflow "hidden"
           :position "absolute"
           :width "100%"
           :height "100%"}]
   [:div {:display :flex}]
   [:#app {:height "100%"}]
   [:.container {:width "100%"
                 :height "100%"}]
   [:.wrapper {:flex-direction :column
               :width "100%"
               :height "100%"
               :font-family "'Roboto', sans-serif"}
    [:input {:font-family "'Roboto', sans-serif"
             :border-width "2px"
             :padding "1px"
             :margin 0}]
    [:.top-message {:height "60px"
                    :font-size "18px"
                    :transition "height 0.5s"}
     [:&.main-enter {:height "0px"}]
     [:&.main-enter.main-enter-active
      {:height "60px"}]
     [:&.main-leave.main-leave-active
      {:height "0px"}]
     [:.dummy {:width leftest-width}]
     [:.text {:margin "auto 0"}]
     [:&.error {:background-color "#CA3333"
                :color "#FFFFFF"}]]
    [:.header {:justify-content "space-between"
               :align-items "center"
               :height "70px"
               :background-color "#1E2E3F"
               :color "white"}
     (at-media {:max-width "500px"}
               [:& {:flex-direction :column
                    :align-items "flex-start"
                    :height "auto"}])
     [:.left {:padding "10px 0"}
      [:.navigation {:width leftest-width
                     :cursor "pointer"
                     :justify-content "space-around"}]
      [:.current-page {:font-size "18px"}]
      (at-media {:max-width "500px"} [:& {:order 100}])]
     [:.logo {:font-family "canterbold"
              :font-size "24px"
              :padding "10px"}]
     [:.login {:margin-right "30px"
               :align-items "center"}
      [:.practitioner {:font-size "small"
                       :margin-right "20px"
                       :align-items "center"}
       [:.avatar {:margin "10px"}]]
      [:.signout {:font-size "small"
                  :font-weight "bold"
                  :color "#8B8B8B"}]]]
    [:.main {:height "100%"}
     [:.navigation-menu {:width "300px"
                         :color "#ffffff"
                         :height "100%"
                         :background-color "#1E2E3F"
                         :z-index 1
                         :box-shadow "0 3px 4px 0 rgba(0,0,0,0.50)"
                         :transition "width 0.5s"}
      [:&.main-enter {:width "0px"}]
      [:&.main-enter.main-enter-active
       {:width "300px"}]
      [:&.main-leave.main-leave-active
       {:width "0px"}]]
     [:.schedule {:justify-content "space-between"
                  :width "100%"
                  :height "100%"}
      [:.dummy {:min-width leftest-width
                :max-width leftest-width}]
      [:.left {:flex-direction :column
               :flex "1 1"}
       [:.top {:height "70px"
               :align-items "center"}
        [:.schedule-header {:justify-content "space-between"
                            :flex "1"}
         [:.delay {:color "#FF7676"
                   :align-items "baseline"}
          [:.number {:font-size "large"}]]
         [:.timescale-switcher {:margin-left "30px"}]]]
       [:.time-selector {:margin "5px 0"
                         :align-items "center"}
        [:.selector {:flex "1"
                     :padding "0 20px"}
         [:input {:width "100%"}]]]
       [:.content-wrapper {:display "block"
                           :background-color "#F7F7F7"
                           :flex "1"
                           :overflow-y "scroll"
                           :overflow-x "scroll"}
        [:.dummy-row {:height "15px"
                      :flex "1"}]
        [:.time-scaled {:display "block"}
         [:.dummy {:background-color "#EDEEF0"}]
         [:.columns {:position "relative"}
          [:.timeline {:position "absolute"
                       :width "100%"
                       :height "2px"
                       :background-color "#36E6BF"
                       :z-index 2}]
          [:.time-scale {:min-width leftest-width
                         :max-width leftest-width
                         :position "relative"
                         :background-color "#EDEEF0"}
           [:.hour {:position "absolute"
                    :width "100%"
                    :justify-content "center"
                    :padding-top "3px"
                    :font-size "14px"
                    :color "#A9A9A9"}]]
          [:.column {:position "relative"
                     :min-width "150px"
                     :margin "0 10px"
                     :flex "1"}
           [:.box {:width "100%"
                   :position "absolute"
                   :overflow "hidden"}]]]]
        [:.grid
         [:.rows {:display "block"}
          [:.row {:flex-wrap "wrap"}
           [:.box {:width "220px"
                   :height "55px"
                   :margin "5px"}]]]]
        [:.box {:font-size "small"
                :justify-content "space-between"
                :cursor "pointer"
                :border "2px solid rgba(0,0,0,0.0)"       ; space for selected
                }
         [:.action {:width "70px"
                    :margin "3px"
                    :cursor "pointer"}
          [:img {:margin "auto"}]
          [:&.a-out {:background-color color-out}
           [:&:hover {:background-color (color/darken color-out button-hover-darken)}]]
          [:&.a-in {:background-color color-in}
           [:&:hover {:background-color (color/darken color-in button-hover-darken)}]]
          [:&.a-notify {:background-color color-notify}
           [:&:hover {:background-color (color/darken color-notify button-hover-darken)}]]]
         [:.info {:display "block"
                  :padding "10px"
                  :justify-content "space-around"}
          [:.name {:font-weight 500}]]
         [:&.out {:background-color "#EDEEF0"}
          [:.info
           [:.name {:color "rgba(0,0,0,0.20)"}]
           [:.numbers {:color "rgba(0,0,0,0.30)"}]]]
         [:&.in :&.pending {:background-color "#FFFFFF"}
          [:.info
           [:.name {:color "rgba(0,0,0,0.50)"}]
           [:.numbers {:color "rgba(0,0,0,0.50)"}]]]
         [:&.cancelled {:background-color "#FFEEE6"}
          [:.info
           [:.name {:color "#FE9476"}]
           [:.numbers {:color "rgba(0,0,0,0.30)"}]]]
         [:&.selected {:border "2px solid #2598EA"}]]]]
      [:.details {:color "#4B4B4B"
                  :flex "none"
                  :width "500px"
                  :z-index 1
                  :box-shadow "0 3px 4px 0 rgba(0,0,0,0.50)"
                  :padding "50px"}
       (at-media {:max-width "1000px"}
                 [:& {:display "none"}])
       [:.for-input {:padding "3px"}]
       [:.rows {:display "block"
                :width "100%"}
        [:.top-row {:justify-content "space-between"}
         [:.name :input {:font-size "21px"}]
         [:.edit {:cursor "pointer"}]]
        [:.phone {:font-size "18px"
                  :margin-top "10px"}
         [:input {:font-size "18px"}]]
        [:.events {:display "block"
                   :margin-top "30px"}
         [:.row {:margin-bottom "15px"}
          [:.time {:font-size "16px"}]
          [:.icon {:margin-left "20px"
                   :margin-right "15px"}
           [:.icon-content {:width "24px"}]]
          [:.event {:width "100%"
                    :justify-content "space-between"}
           [:.title {:font-weight 500}]
           [:&.e-notify {:display "block"}]]]]
        [:.buttons {:display "block"
                    :align "center"}
         [:hr {:background-color "#D9D9D9"
               :height "1px"
               :margin "20px 0"
               :border "0"}]
         [:.button {:width "220px"
                    :height "55px"
                    :align-items "center"
                    :color "#4B4B4B"
                    :margin "10px auto 0 auto"
                    :cursor "pointer"
                    :font-size "16px"}
          [:&.a-notify {:background-color color-notify
                        :color (color/darken color-notify button-text-darken)}
           [:&:hover {:background-color (color/darken color-notify button-hover-darken)}]]
          [:&.a-in {:background-color color-in
                    :color (color/darken color-in button-text-darken)}
           [:&:hover {:background-color (color/darken color-in button-hover-darken)}]]
          [:&.a-out {:background-color color-out
                     :color (color/darken color-out button-text-darken)}
           [:&:hover {:background-color (color/darken color-out button-hover-darken)}]]
          [:&.a-cancel {:background-color color-cancel
                        :color (color/darken color-cancel button-text-darken)}
           [:&:hover {:background-color (color/darken color-cancel button-hover-darken)}]]
          [:&.a-reschedule {:background-color color-reschedule
                            :color (color/darken color-reschedule button-text-darken)}
           [:&:hover {:background-color (color/darken color-reschedule button-hover-darken)}]]
          [:.icon {:width "70px"}
           [:* {:margin "auto"}]]]]
        [:.state-select
         [:.selector {:margin "0 auto"}]
         [:.list-container {:margin "0 auto"}
          [:.list {:flex-direction "column"
                   :cursor "pointer"
                   :box-shadow "rgba(0, 0, 0, 0.2) -2px 3px 3px 1px"}]]
         [:.state {:width "220px"
                   :height "55px"
                   :font-size "16px"
                   :cursor "pointer"}
          [:.text {:margin "auto"}]
          [:&.s-pending {:background-color color-pending
                         :color (color/darken color-pending button-text-darken)}
           [:&:hover :&.selected {:background-color (color/darken color-pending button-hover-darken)}]]
          [:&.s-in {:background-color color-in
                    :color (color/darken color-in button-text-darken)}
           [:&:hover :&.selected {:background-color (color/darken color-in button-hover-darken)}]]
          [:&.s-out {:background-color color-out
                     :color (color/darken color-out button-text-darken)}
           [:&:hover :&.selected {:background-color (color/darken color-out button-hover-darken)}]]
          [:&.s-cancelled {:background-color color-cancel
                           :color (color/darken color-cancel button-text-darken)}
           [:&:hover :&.selected {:background-color (color/darken color-cancel button-hover-darken)}]]]
         [:.arrow {:width "55px"
                   :height "55px"
                   :font-size "40px"
                   :background-color "#FFFFFF"
                   :cursor "pointer"}
          [:i {:margin "auto"}]]]]]]
     [:.main-message {:margin "auto"
                      :font-size "25px"}]
     [:.main-error {:margin "auto"
                    :color "#CA3333"
                    :font-size "25px"}]]]])

(def style (apply garden/css css))