/ var / www / html / cai / assets / css / scss / [ HOME SHELL ]

Name	Size	Permission	Action
_benifit.scss	16.87 KB	-rwxr-x--x
_card.scss	2.23 KB	-rwxr-x--x
_contact-us.scss	11.27 KB	-rwxr-x--x
_cta.scss	1.47 KB	-rwxr-x--x
_event.scss	4.04 KB	-rwxr-x--x
_expanded-menu.scss	4.44 KB	-rwxr-x--x
_footer.scss	6.67 KB	-rwxr-x--x
_global.scss	232 B	-rwxr-x--x
_header.scss	6.46 KB	-rwxr-x--x
_home.scss	5.54 KB	-rwxr-x--x
_jobs.scss	3.46 KB	-rwxr-x--x
_latestnews.scss	3.46 KB	-rwxr-x--x
_media-cover.scss	3.46 KB	-rwxr-x--x
_mixins.scss	894 B	-rwxr-x--x
_modern-normalize.scss	5.19 KB	-rwxr-x--x
_modify.scss	8.62 KB	-rwxr-x--x
_parnership.scss	323 B	-rwxr-x--x
_publication.scss	434 B	-rwxr-x--x
_scroll.scss	682 B	-rwxr-x--x
_typography.scss	126 B	-rwxr-x--x
_variables.scss	866 B	-rwxr-x--x

Code Editor : _header.scss

.app-header {
    //background-color: var(--brand-bg-color-light);
    //box-shadow: 0px 2px 6px rgb(0 0 0 / 14%);
    //border-bottom: 1px solid #ccc;
    background-color: var(--topmenu-bg-color);
    border-bottom: 1px solid var(--topmenu-text-color);
    position: fixed;
    z-index: 999;
    inline-size: 100%;
    height: 83px;
    display: flex;

& .glcontainer {
        align-items: center;
        inline-size: 100%;
        justify-content: flex-start;

}

&__logo {
        max-inline-size: 200px;
        margin-right: auto;
        color: #ffffff;
        filter: invert(13%) sepia(89%) saturate(2810%) hue-rotate(212deg) brightness(87%) contrast(105%);

@include mqmin(1199px) {
            margin-right: 0;
        }

& img {
            filter: invert(13%) sepia(89%) saturate(2810%) hue-rotate(212deg) brightness(87%) contrast(105%);

}
    }

&__search {
        background-color: rgba(0, 0, 0, 0);
        border: 0px none;
        padding: 0;
        margin: 0 0 0 40px;
        outline: none;
        cursor: pointer;
        color: var(---topmenu-text-color);
        block-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline-end: 20px;

&:hover,
        &:focus {
            background-color: transparent;
            border: 0px none;
            padding: 0;
            //margin: 0;
            outline: none;
        }

& i {
            font-size: 20px;
            line-height: 1.2;
        }
    }
}

.app-nav {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    display: none;

@include mqmin(1199px) {
        display: block;
    }

& ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--base-nav-link-color);
    padding: 16px 8px;
    display: flex;
    align-items: center;
    cursor: pointer;

@include mqmin(1300px) {
        padding: 16px;
    }

}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    min-width: 200px;
    border-radius: 8px;
    overflow: hidden;

&--mod {
        min-width: 260px;
    }
}

.has-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 20px;
    color: #333;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background-color: #f3f3f3;
}

.dropdown-menu-wrapper {
    //max-inline-size: 710px;
    margin: 0px auto;
    // padding: 60px 24px;
    //display: grid;
    //grid-template-columns: repeat(auto-fit, minmax(33.33%, 1fr));
    // place-items: center;
    // padding: 32px 16px;

& ul {
        display: flex;
        flex-direction: column;
        // row-gap: 8px;
    }

}

.has-dropdown,
.has-expand-dropdown {
    position: relative;

&>.nav-link::after {
        content: '';
        border-color: currentColor;
        border-style: solid;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(45deg);
        margin: -2px 0 0 8px;
        transition: transform 0.2s ease-in-out;
    }

&::after {
        content: "";
        background: currentColor;
        display: block;
        width: 90px;
        height: 6px;
        position: absolute;
        bottom: -3px;
        margin: auto;
        transform: translateX(-50%);
        left: -100%;
        visibility: hidden;
        transition: left 0.2s ease-in;

}

&.open {
        &>.nav-link::after {
            transform: rotate(-133deg);
        }
    }
}

.has-dropdown.open {
    &>.nav-link::after {
        margin-top: 6px;
    }
}

.has-dropdown--active {
    & .nav-link {
        color: var(--link-color);
    }

&::after {
        color: var(--link-color);
        left: 50%;
        visibility: visible;
    }
}

.dropdown-item {
    position: relative;
    border-radius: 0;
    text-decoration: none;
    background-image: linear-gradient(#117c96, #117c96);
    background-size: 0 1px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size .35s;
    display: block;
    color: var(--link-color);
    // margin: 16px 0;
    font-weight: 400;
    font-size: 16px;

&:hover {
        color: #117c96;
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

// search bar
// .app-header__search {
//     margin-left: auto;
//     @include mqmin(1100px) {
//         margin-left: inherit;
//     }
// }
.app-header__search-area {
    background-color: var(--topmenu-bg-color);
    box-shadow: 0px 2px 6px rgb(0 0 0 / 14%);
    position: fixed;
    z-index: 999;
    inline-size: 100%;
    height: 83px;
    right: -100%;
    opacity: 0;
    visibility: hidden;
    transition: right 0.2s ease-in;
    top: 0;
    display: flex;

& input {
        flex: 1;
        padding: 20px;
        font-size: 18px;
        background-color: var(--topmenu-bg-color);
        color: var(--base-nav-link-color);

&:hover,
        &:focus {
            outline: none;
        }
    }

::placeholder {
        color: var(--base-nav-link-color);
        opacity: 1;
        /* Firefox */
    }

:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: var(--base-nav-link-color);
    }

::-ms-input-placeholder {
        /* Microsoft Edge */
        color: var(--base-nav-link-color);
    }

&--active {
        right: 0;
        opacity: 1;
        visibility: visible;
    }

& .close-searchbar {
        background-color: rgba(0, 0, 0, 0);
        border: 0px none;
        flex: 0 0 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--base-nav-link-color);
        font-size: 32px;
        margin: 0;
        padding: 0;

& i {
            font-weight: var(--fa-style, 600);
        }
    }
}

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.