Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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