Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5351 stevensc 1 
#react-chat {
2 
  bottom: 0;
3 
  margin: 0;
4 
  padding: 0;
5 
  right: 5%;
6 
  position: fixed;
7 
  z-index: 1000;
8 
  display: flex;
9 
  flex-direction: row-reverse;
10 
  align-items: flex-end;
11 
  gap: 1rem;
12 
  font-family: Arial, sans-serif;
13 
 
14 
  button {
15 
    background: transparent;
16 
    border: none;
17 
    margin: 0;
18 
    padding: 0;
19 
    outline: none;
20 
  }
21 
}
22 
 
23 
.chat-helper {
24 
  background-color: $bg-color;
25 
  border-top-left-radius: $border-radius;
26 
  border-top-right-radius: $border-radius;
27 
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
28 
  display: grid;
29 
  gap: 0.5rem;
30 
  max-height: 25rem;
31 
  height: fit-content;
32 
  width: 235px;
33 
 
34 
  .chat_options {
35 
    border-bottom: 1px solid $border-primary;
36 
    overflow: hidden;
37 
    position: relative;
38 
 
39 
    a {
40 
      border-left: 1px solid $border-primary;
41 
      color: $font-color;
42 
      padding: 3px 8px 3px 3px;
43 
      border: 0;
44 
      font-size: 0.9rem;
45 
      cursor: pointer;
46 
      font-weight: bold;
47 
      white-space: nowrap;
48 
      overflow: hidden;
49 
      text-overflow: ellipsis;
50 
    }
51 
  }
52 
}
53 
 
54 
.actions-container {
55 
  display: flex;
56 
  align-items: center;
57 
  justify-content: space-around;
58 
  flex-wrap: wrap;
59 
  padding: 0 1rem;
60 
}
61 
 
62 
.action-btn {
63 
  position: relative;
64 
  font-weight: 700;
65 
  color: $font-color;
66 
  display: inline-flex;
67 
  align-items: center;
68 
 
69 
  &.active {
70 
    padding-bottom: 5px !important;
71 
 
72 
    &::before {
73 
      content: "";
74 
      position: absolute;
75 
      top: 100%;
76 
      width: 100%;
77 
      height: 3px;
78 
      background: $border-primary;
79 
    }
80 
  }
81 
}
82 
 
83 
.search-input {
84 
  display: flex;
85 
  align-items: center;
86 
  border-radius: 5px;
87 
  height: 34px;
88 
  color: gray;
89 
  cursor: pointer;
90 
  width: -webkit-fill-available;
91 
  padding: 0.5rem;
92 
  background-color: #eef3f0;
93 
 
94 
  &>input {
95 
    border: none;
96 
    outline: none;
97 
    background: none;
98 
    width: 100%;
99 
  }
100 
}
101 
 
102 
.contacts-list {
103 
  width: 100%;
104 
  overflow-y: auto;
105 
  max-height: 250px;
106 
 
107 
  .contacts-list__item {
108 
    align-items: center;
109 
    display: flex;
110 
    height: auto;
111 
    padding: 0.2rem 1rem;
112 
    gap: 0.5rem;
113 
 
114 
    img {
115 
      height: 36px;
116 
      width: 36px;
117 
      border-radius: 50%;
118 
    }
119 
 
120 
    .contacts-list__item-content {
121 
      display: flex;
122 
      flex-direction: column;
123 
      gap: 0.5rem;
124 
    }
125 
 
126 
    span {
127 
      font-size: 0.9rem;
128 
      cursor: pointer;
129 
      font-weight: bold;
130 
      white-space: nowrap;
131 
      overflow: hidden;
132 
      text-overflow: ellipsis;
133 
      max-width: 20ch;
134 
    }
135 
  }
136 
}