Class: Oversee::Dashboard::Tailwind

Inherits:
Phlex::HTML
  • Object
show all
Defined in:
app/components/oversee/dashboard/tailwind.rb

Instance Method Summary collapse

Instance Method Details

#pagy_css ⇒ Object 



38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/oversee/dashboard/tailwind.rb', line 38

def pagy_css
  <<~CSS
    .pagy {
      @apply flex gap-2 items-center text-sm text-gray-500;
      a:not(.gap) {
        @apply inline-flex items-center justify-center h-8 min-w-8 font-normal;
        &:hover { @apply bg-gray-100; }
        &:not([href]) { /* disabled links */
          @apply text-gray-300 cursor-not-allowed;
        }
        &.current {
          @apply font-semibold bg-gray-100 text-gray-900;
        }
      }

      label {
        @apply inline-block whitespace-nowrap bg-gray-200 px-3 py-0.5;
        input {
          @apply bg-gray-100 border-none rounded-md;
        }
      }
    }
  CSS
end

#trix_css ⇒ Object 



10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
# File 'app/components/oversee/dashboard/tailwind.rb', line 10

def trix_css
  <<~CSS
    trix-editor {
      @apply rounded-b rounded-t-none border border-t-0 border-gray-200 !ring-0;
    }

    .trix-active {
      @apply !bg-gray-100 !text-blue-500;
    }

    .trix-button-row {
      @apply overflow-hidden rounded-t border;
    }

    .trix-button {
      @apply !relative !inline-flex !h-7 !items-center !justify-center border-0 !border-b-0 !border-l-0 !px-7 !py-4;
    }

    .trix-button::before {
      @apply !top-1.5 !h-5;
    }

    .trix-button-group {
      @apply !mb-0 rounded-b-none !border-0 border-gray-200;
    }
  CSS
end

#view_template ⇒ Object 



2
3
4
5
6
7
8
 
# File 'app/components/oversee/dashboard/tailwind.rb', line 2

def view_template
  script(src: "https://cdn.tailwindcss.com/[email protected]")
  style(type:"text/tailwindcss") do
    raw pagy_css.html_safe
    raw trix_css.html_safe
  end
end