Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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