src/ui/components/tags/tags.scss


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
61
62
63
64
65
66
67

/******************************* TAGS */
.c-tag {
  border-radius: 10px; //TODO: convert to theme constant
  display: inline-flex;
  padding: 1px 10px; //TODO: convert to theme constant

  > * + * {
    margin-left: $interiorMargin;
  }

  &__remove-btn {
    color: inherit !important;
    display: none;
    opacity: 0;
    overflow: hidden;
    padding: 1px !important;
    transition: $transIn;
    width: 0;

    &:hover {
      opacity: 1;
    }
  }

  /* SEARCH RESULTS */
  &.--is-not-search-match {
    opacity: 0.5;
  }
}

/******************************* TAG EDITOR */
.c-tag-applier {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;

  > * + * {
    margin-left: $interiorMargin;
  }

  &__add-btn {
    &:before { font-size: 0.9em; }
  }

  .c-tag {
    flex-direction: row;
    align-items: center;
    padding-right: 3px !important;

    &__remove-btn {
      display: block;
    }
  }
}

/******************************* HOVERS */
.has-tag-applier {
  // Apply this class to all components that should trigger tag removal btn on hover
   &:hover {
     .c-tag__remove-btn {
       width: 1.1em;
       opacity: 0.7;
       transition: $transOut;
     }
   }
 }