rustlanges-components 0.1.0

RustLangES components library
Documentation 
1
2
3
4
5
6
7
8
9
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

@layer components {
  .rustlanges-input-search-container {
    @apply relative flex h-fit w-full;

    svg {
      @apply text-gray-600 dark:text-gray-400;
    }
  }

  .rustlanges-input-search {
    @apply shadow-rb-black flex h-11 w-full items-center gap-2.5 rounded-xl border border-black pl-2.5 transition;
    @apply bg-light dark:bg-neutral-950;

    @variant has-focus {
      @apply border-primary-500 shadow-rb-primary-500;
    }
    & > input[type="text"] {
      @apply z-50 h-full flex-1 appearance-none pr-2.5 outline-none transition-all;
      @apply text-dark placeholder:text-neutral-200;
      @variant dark {
        @apply text-light placeholder:text-neutral-400;
      }
    }
  }
  .rustlanges-input-search--filter {
    @apply rounded-r-none;
  }

  .rustlanges-input-search__filter {
    & > button {
      @apply shadow-rb-black grid size-11 cursor-pointer place-items-center items-center rounded-r-xl border border-black transition;
      @apply bg-light dark:bg-neutral-950;
    }
  }

  .rustlanges-input-search-button {
    @apply grid size-11 cursor-pointer place-content-center;
  }
  .rustlanges-input-search-backdrop__content {
    @apply absolute left-0 top-full z-[99] mt-2 w-full transition duration-200;
  }

  .rustlanges-input-search-backdrop__content--open {
    @apply visible opacity-100;
  }

  .rustlanges-input-search-backdrop__content--closed {
    @apply invisible opacity-0;
  }

  .rustlanges-input-search-backdrop__list {
    @apply shadow-rb-black flex flex-wrap gap-2 p-4 transition;
    @apply rounded-sm border border-black;
    @apply bg-light dark:bg-neutral-950;

    & > li {
      @apply cursor-pointer;
    }
  }
}