Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6157 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5449 stevensc 1 
@use "../../settings/mixins.scss";
2 
 
3 
.feed {
4 
  @include mixins.widget;
3503 stevensc 5 
  display: flex;
6 
  flex-direction: column;
3953 stevensc 7 
  gap: 1rem;
5449 stevensc 8 
  padding: 1rem;
3503 stevensc 9 
}
10 
 
5817 stevensc 11 
.reactions {
12 
  position: absolute;
13 
  bottom: calc(100% + .5rem);
14 
  background-color: $bg-color;
15 
  box-shadow: 0px 0px 3px #000;
16 
  gap: .5rem;
17 
  left: 50%;
18 
  display: none;
19 
  padding: .2rem;
20 
  width: fit-content;
21 
  border-radius: 20px;
22 
  transform: translateX(-50%);
5667 stevensc 23 
 
5817 stevensc 24 
  button {
25 
    transition: all .2s;
5734 stevensc 26 
 
5817 stevensc 27 
    svg {
28 
      font-size: 32px;
5737 stevensc 29 
    }
30 
 
5817 stevensc 31 
    &:hover {
32 
      transform: scale(1.2) translateY(-5px);
5734 stevensc 33 
    }
5667 stevensc 34 
  }
5817 stevensc 35 
 
36 
  &.active {
37 
    display: flex;
38 
    transform-origin: bottom;
39 
    animation: animationIn .2s;
40 
  }
5734 stevensc 41 
}
5667 stevensc 42 
 
5783 stevensc 43 
.reactions-counter {
44 
  display: inline-flex;
45 
  align-items: center;
46 
 
47 
  svg {
48 
    background-color: #dfdfdf;
49 
    border-radius: 50%;
50 
    font-size: 1.2rem;
5784 stevensc 51 
 
52 
    &:not(:first-child) {
5785 stevensc 53 
      margin-left: -0.5rem;
5784 stevensc 54 
    }
5783 stevensc 55 
  }
56 
 
57 
  span {
58 
    color: $subtitle-color;
5785 stevensc 59 
    margin-left: .2rem;
60 
    font-size: .9rem;
5783 stevensc 61 
  }
62 
}
63 
 
5734 stevensc 64 
@keyframes animationIn {
5738 stevensc 65 
  0% {
66 
    transform: translateX(-50%);
67 
  }
68 
 
5734 stevensc 69 
  to {
5738 stevensc 70 
    transform: translateX(-50%) scaleY(1);
5667 stevensc 71 
  }
72 
}
73 
 
3503 stevensc 74 
.feedCommentContainer {
75 
  display: flex;
76 
  justify-content: flex-start;
77 
  align-items: center;
78 
  gap: 10px;
5449 stevensc 79 
 
80 
  &>img {
3503 stevensc 81 
    border-radius: 100px;
82 
    width: 43px;
83 
    height: 43px;
84 
    object-fit: cover;
3517 stevensc 85 
    background: #fff;
3503 stevensc 86 
  }
5449 stevensc 87 
 
3503 stevensc 88 
  .commentInput {
89 
    margin: 0;
90 
    flex: 1;
6158 stevensc 91 
    padding: 0.5rem;
3503 stevensc 92 
    border: none;
93 
    font-size: 1rem;
6157 stevensc 94 
    background-color: $bg-color-secondary;
95 
    border: 1px solid $border-primary;
96 
    border-radius: $border-radius;
97 
 
3503 stevensc 98 
  }
5449 stevensc 99 
 
3503 stevensc 100 
  .submitButton {
101 
    height: 2.5rem;
102 
    margin: 0;
103 
    width: auto;
104 
    margin-top: 0.5rem;
105 
    background-color: $button-bg;
106 
    border: none;
107 
    padding: 0.5rem 1rem;
108 
    color: $bg-color;
109 
    border-radius: var(--global-border-radius);
110 
    border: 1px solid $button-bg;
111 
    font-size: 1rem;
112 
    transition: 0.2s;
5449 stevensc 113 
 
3503 stevensc 114 
    &:hover {
115 
      background-color: $button-bg-hover;
116 
    }
117 
  }
5449 stevensc 118 
}