Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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