Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4922 | Rev 5102 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4922 Rev 5101
Línea 3... Línea 3...
3 
.navLinksContainer {
 3 
.navLinksContainer {
4 
  flex: 1;
 4 
  flex: 1;
5 
  order: 3;
 5 
  order: 3;
6 
  min-width: 50%;
 6 
  min-width: 50%;
7 
  display: flex;
 7 
  display: flex;
- 
 
 8 
 
8 
  & > ul {
 9 
  &>ul {
9 
    display: flex;
 10 
    display: flex;
10 
    align-items: center;
 11 
    align-items: center;
11 
    justify-content: space-between;
 12 
    justify-content: space-between;
12 
    gap: 1rem;
 13 
    gap: 1rem;
13 
    width: 100%;
 14 
    width: 100%;
- 
 
 15 
 
14 
    & > li {
 16 
    &>li {
15 
      position: relative;
 17 
      position: relative;
16 
      display: flex;
 18 
      display: flex;
17 
      flex-direction: column;
 19 
      flex-direction: column;
18 
      color: $font-color;
 20 
      color: $font-color;
19 
      padding-top: 0;
 21 
      padding-top: 0;
20 
      padding-bottom: 12px;
 22 
      padding-bottom: 12px;
21 
      gap: 0.5rem;
 23 
      gap: 0.5rem;
- 
 
 24 
 
22 
      svg,
 25 
      svg,
23 
      i {
 26 
      i {
24 
        font-size: 1.5rem;
 27 
        font-size: 1.5rem;
25 
      }
 28 
      }
- 
 
 29 
 
26 
      a,
 30 
      a,
27 
      p {
 31 
      p {
28 
        font-size: 1.1rem;
 32 
        font-size: 1.1rem;
29 
        display: flex;
 33 
        display: flex;
30 
        color: $font-color;
 34 
        color: $font-color;
31 
        flex-direction: column;
 35 
        flex-direction: column;
32 
        align-items: center;
 36 
        align-items: center;
33 
        gap: 0.5rem;
 37 
        gap: 0.5rem;
34 
        position: relative;
 38 
        position: relative;
35 
      }
 39 
      }
- 
 
 40 
 
36 
      p {
 41 
      p {
37 
        display: none;
 42 
        display: none;
38 
      }
 43 
      }
- 
 
 44 
 
39 
      &:not(:last-child):hover {
 45 
      &:not(:last-child):hover {
40 
        border-bottom: 2px solid $font-color;
 46 
        border-bottom: 2px solid $font-color;
- 
 
 47 
 
41 
        & > a,
 48 
        &>a,
42 
        & > p {
 49 
        &>p {
43 
          font-weight: bold;
 50 
          font-weight: bold;
44 
        }
 51 
        }
- 
 
 52 
 
45 
        .navLinkDropdown {
 53 
        .navLinkDropdown {
46 
          display: block;
 54 
          display: block;
47 
        }
 55 
        }
48 
      }
 56 
      }
- 
 
 57 
 
49 
      &:last-child:hover .aditional_links {
 58 
      &:last-child:hover .aditional_links {
50 
        display: block;
 59 
        display: block;
51 
      }
 60 
      }
52 
    }
 61 
    }
53 
  }
 62 
  }
Línea 62... Línea 71...
62 
  z-index: 1000;
 71 
  z-index: 1000;
63 
  overflow: hidden;
 72 
  overflow: hidden;
64 
  background-color: $bg-color;
 73 
  background-color: $bg-color;
65 
  border-radius: $border-radius;
 74 
  border-radius: $border-radius;
66 
  box-shadow: $shadow;
 75 
  box-shadow: $shadow;
- 
 
 76 
 
67 
  ul {
 77 
  ul {
68 
    max-height: 20rem;
 78 
    max-height: 20rem;
69 
    overflow: scroll;
 79 
    overflow: scroll;
- 
 
 80 
 
70 
    li a {
 81 
    li a {
71 
      min-width: 15ch;
 82 
      min-width: 15ch;
72 
    }
 83 
    }
- 
 
 84 
 
73 
    li:hover a {
 85 
    li:hover a {
74 
      font-weight: bold;
 86 
      font-weight: bold;
75 
    }
 87 
    }
76 
  }
 88 
  }
77 
}
 89 
}
Línea 84... Línea 96...
84 
  transform: translateX(-50%);
 96 
  transform: translateX(-50%);
85 
  z-index: 1000;
 97 
  z-index: 1000;
86 
  background-color: $bg-color;
 98 
  background-color: $bg-color;
87 
  border-radius: $border-radius;
 99 
  border-radius: $border-radius;
88 
  box-shadow: $shadow;
 100 
  box-shadow: $shadow;
- 
 
 101 
 
89 
  ul {
 102 
  ul {
90 
    display: flex;
 103 
    display: flex;
91 
    flex-direction: column;
 104 
    flex-direction: column;
92 
    padding: 1rem;
 105 
    padding: 1rem;
93 
    gap: 0.5rem;
 106 
    gap: 0.5rem;
- 
 
 107 
 
94 
    li {
 108 
    li {
95 
      position: relative;
 109 
      position: relative;
- 
 
 110 
 
96 
      a {
 111 
      a {
97 
        font-size: 1.1rem;
 112 
        font-size: 1.1rem;
98 
        display: flex;
 113 
        display: flex;
99 
      }
 114 
      }
- 
 
 115 
 
100 
      &:hover > a {
 116 
      &:hover>a {
101 
        font-weight: bold;
 117 
        font-weight: bold;
102 
      }
 118 
      }
- 
 
 119 
 
103 
      &:hover .navLinkLevelThree {
 120 
      &:hover .navLinkLevelThree {
104 
        display: block;
 121 
        display: block;
105 
      }
 122 
      }
106 
    }
 123 
    }
107 
  }
 124 
  }
108 
}
 125 
}
Línea 109... Línea 126...
109 
 
 126 
 
- 
 
 127 
.navLinkDropdown {
- 
 
 128 
  background-color: $bg-color;
110 
.navLinkDropdown {
 129 
  border-radius: 10px;
111 
  display: none;
 130 
  display: none;
112 
  position: absolute;
 - 
 
113 
  top: 100%;
 131 
  position: absolute;
- 
 
 132 
  left: 50%;
114 
  left: 50%;
 133 
  top: 100%;
115 
  transform: translateX(-35%);
 134 
  transform: translateX(-35%);
116 
  z-index: 1000;
 - 
 
117 
  background-color: $bg-color;
 - 
 
- 
 
 135 
  z-index: 900;
118 
  border-radius: 10px;
 136 
 
119 
  ul {
 137 
  ul {
120 
    display: flex;
 138 
    display: flex;
121 
    flex-direction: column;
 - 
 
122 
    padding: 1rem;
 139 
    flex-direction: column;
123 
    gap: 1rem;
 - 
 
124 
    text-align: left;
 - 
 
125 
    background-color: $bg-color;
 - 
 
126 
    border-radius: 10px;
 - 
 
- 
 
 140 
    gap: 1rem;
127 
    box-shadow: 0px 4px 14px -2px rgb(0 0 0 / 12%), 0px -5px 14px -2px rgb(0 0 0 / 12%);
 141 
 
128 
    li {
 142 
    li {
129 
      align-items: center;
 143 
      align-items: center;
130 
      display: flex;
 - 
 
131 
      gap: 1rem;
 144 
      display: flex;
- 
 
 145 
      position: relative;
- 
 
 146 
      gap: 1rem;
132 
      position: relative;
 147 
 
133 
      a {
 148 
      a {
- 
 
 149 
        font-size: 1.1rem;
- 
 
 150 
        text-align: left;
134 
        font-size: 1.1rem;
 151 
        white-space: nowrap;
- 
 
 152 
      }
135 
      }
 153 
 
136 
      &:hover {
 154 
      &:hover {
137 
        .navLinkLevelThree {
 155 
        .navLinkLevelThree {
138 
          display: block;
 156 
          display: block;
- 
 
 157 
        }
139 
        }
 158 
 
140 
        & > a,
 159 
        &>a,
141 
        .navLinkLevelThree ul li:hover a {
 160 
        .navLinkLevelThree ul li:hover a {
142 
          font-weight: bold;
 161 
          font-weight: bold;
143 
        }
 162 
        }
144 
      }
 163 
      }
145 
    }
 164 
    }
146 
  }
 165 
  }
Línea 147... Línea 166...
147 
}
 166 
}
148 
 
 167 
 
149 
@include breakpoints.maxwidth("medium") {
 168 
@include breakpoints.maxwidth("medium") {
150 
  .navLinksContainer > ul > li {
 169 
  .navLinksContainer>ul>li {
151 
    p {
 170 
    p {
- 
 
 171 
      display: inline-flex;
152 
      display: inline-flex;
 172 
    }
153 
    }
 173 
 
154 
    &:hover .navLinkDropdown {
 174 
    &:hover .navLinkDropdown {
155 
      transform: translateX(-50%);
 175 
      transform: translateX(-50%);
156 
    }
 176 
    }
Línea 160... Línea 180...
160 
@include breakpoints.maxwidth("desktop") {
 180 
@include breakpoints.maxwidth("desktop") {
161 
  .navLinksContainer {
 181 
  .navLinksContainer {
162 
    margin-left: 2rem;
 182 
    margin-left: 2rem;
163 
    min-width: auto;
 183 
    min-width: auto;
164 
    order: 2;
 184 
    order: 2;
- 
 
 185 
 
165 
    & > ul {
 186 
    &>ul {
166 
      justify-content: space-around;
 187 
      justify-content: space-around;
- 
 
 188 
 
167 
      & > li {
 189 
      &>li {
168 
        padding-top: 32px;
 190 
        padding-top: 32px;
169 
        padding-bottom: 12px;
 191 
        padding-bottom: 12px;
170 
      }
 192 
      }
171 
    }
 193 
    }
172 
  }
 194 
  }
- 
 
 195 
 
173 
  .aditional_links ul li:hover {
 196 
  .aditional_links ul li:hover {
174 
    .notifications-list {
 197 
    .notifications-list {
175 
      display: block;
 198 
      display: block;
176 
    }
 199 
    }
177 
  }
 200 
  }
178 
}
 201 
}
179 

            202