Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4737 | Rev 4739 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4311 stevensc 1 
#app {
4736 stevensc 2 
    padding-top: 3.5rem;
3 
    @media (min-width: 768px) {
4 
        padding-top: 5.5rem;
5 
    }
4311 stevensc 6 
}
4313 stevensc 7 
.wrapper {
8 
    background-color: #f3f2ef !important;
9 
}
4736 stevensc 10 
.header,
11 
.mobile-menu {
4251 stevensc 12 
    background-color: #fff;
4255 stevensc 13 
    border-bottom: 0.1px solid rgba(0, 0, 0, 0.06);
4247 stevensc 14 
    width: 100%;
15 
    z-index: 999;
16 
}
4736 stevensc 17 
.header {
18 
    top: 0;
19 
    position: absolute;
20 
}
21 
.mobile-menu {
22 
    bottom: 0;
23 
    position: fixed;
24 
    display: flex;
4738 stevensc 25 
    .icon-list {
26 
        width: 100%;
27 
        &::before {
28 
            content: none;
29 
        }
30 
        ul {
31 
            display: flex;
32 
            align-items: center;
33 
            justify-content: space-around;
34 
            svg {
35 
                font-size: 2rem !important;
36 
            }
37 
        }
4736 stevensc 38 
    }
39 
    @media (min-width: 768px) {
40 
        display: none;
41 
    }
42 
}
4247 stevensc 43 
.header__nav {
44 
    display: flex;
45 
    justify-content: space-between;
4432 stevensc 46 
    gap: 0.5rem;
4247 stevensc 47 
}
48 
.header__left {
4265 stevensc 49 
    align-items: center;
4247 stevensc 50 
    display: flex;
51 
    gap: 10px;
4250 stevensc 52 
    & > img {
4603 stevensc 53 
        object-fit: cover;
4690 stevensc 54 
        height: 60px;
55 
        width: 60px;
4250 stevensc 56 
    }
4247 stevensc 57 
}
58 
.header__search {
59 
    display: flex;
60 
    align-items: center;
61 
    border-radius: 5px;
62 
    height: 34px;
63 
    color: gray;
64 
    cursor: pointer;
65 
    transition: all 0.2s;
4250 stevensc 66 
    &:hover {
67 
        color: #000;
68 
    }
69 
    & > input {
70 
        display: none;
71 
        border: none;
72 
        outline: none;
73 
        background: none;
74 
    }
75 
    &.show {
76 
        padding: 0.5rem;
4734 stevensc 77 
        margin: 10px 0;
4250 stevensc 78 
        background-color: #eef3f0;
79 
        flex: 1;
80 
        & > input {
81 
            display: initial;
82 
        }
83 
    }
4247 stevensc 84 
}
85 
.header__right {
4249 stevensc 86 
    align-items: center;
4247 stevensc 87 
    flex-grow: 1;
4249 stevensc 88 
    display: flex;
4247 stevensc 89 
    & > ul {
90 
        display: flex;
4249 stevensc 91 
        flex-grow: 1;
4247 stevensc 92 
        justify-content: space-evenly;
4432 stevensc 93 
        gap: 0.5rem;
4253 stevensc 94 
        li {
4254 stevensc 95 
            position: relative;
4253 stevensc 96 
        }
4247 stevensc 97 
    }
98 
    &.hide {
99 
        display: none;
100 
    }
101 
}
102 
@media (min-width: 768px) {
4432 stevensc 103 
    .header__nav {
104 
        gap: initial;
105 
    }
4436 stevensc 106 
    .header__left {
4435 stevensc 107 
        flex: 1;
108 
    }
4247 stevensc 109 
    .header__right {
110 
        flex-grow: initial;
111 
        & > ul {
112 
            display: flex !important;
113 
            justify-content: initial;
4432 stevensc 114 
            gap: 1.5rem;
4247 stevensc 115 
        }
116 
    }
4436 stevensc 117 
}
118 
@media (min-width: 992px) {
4247 stevensc 119 
    .header__search {
120 
        padding: 0.5rem;
121 
        background-color: #eef3f0;
4250 stevensc 122 
        & > input {
123 
            display: initial;
124 
        }
4247 stevensc 125 
    }
126 
}