Staffordshire University Components

Course Search: Default

There are no notes for this item.

<div class="course-search">
    <label class="visually-hidden" for="course-search__keywords">Search for a course</label>
    <input class="course-search__keywords" id="course-search__keywords" name="cQueryH" type="search" placeholder="Search courses by keyword">

    <label class="visually-hidden" for="course-search__level">Filter</label>
    <select id="course-search__level" name="cFilter">
        <option value="">All levels of study</option>
        <option value="undergraduate">Undergraduate</option>
        <option value="postgraduate">Postgraduate</option>
    </select>

    <button class="button  course-search__submit" id="course-search__submit" name="cSubmit" type="button">Search</button>
</div>
 
<div class="course-search">
    <label class="visually-hidden" for="course-search__keywords">Search for a course</label>
    <input class="course-search__keywords" id="course-search__keywords" name="cQueryH" type="search" placeholder="Search courses by keyword">
    
    <label class="visually-hidden" for="course-search__level">Filter</label>
    <select id="course-search__level" name="cFilter">
        <option value="">All levels of study</option>
        <option value="undergraduate">Undergraduate</option>
        <option value="postgraduate">Postgraduate</option>
    </select>

    <button class="button  course-search__submit" id="course-search__submit" name="cSubmit" type="button">Search</button>
</div>
  • Content: 
    .course-search {
    &__keywords {
        &[type="search"] {
            max-width: 100%;
            -webkit-appearance: none;
            border-radius: 0.25rem;
            -webkit-border-radius: 0.25rem;
        }
    } 
    select {
        max-width: 100%;
    }
    &__submit:hover {
        cursor: pointer;
    }
    &__category {
        font-weight: bold; padding: 0 0.5rem; margin-bottom: 0;
    }
    &__level {
        font-weight: bold;
        padding: 0 $spacing-xs;
    }
}
@media (min-width: $third-breakpoint) {
    .course-search {
        &__keywords {
            &[type="search"] {
                max-width: 60%;
            }
        } 
        &__submit {
            max-width: 10%;
        }
        select {
            max-width: 30%;
        }
    }
}
@media (max-width: $third-breakpoint) {
    .course-search {
        &__keywords {
            margin-bottom: $spacing-sm;
        }
        &__submit {
            margin-top: $spacing-sm;
        }
    }
}
.ui-autocomplete {
    z-index: 1000;
}
.ui-menu-item__course {
    padding: 0 $spacing-xs 0 $spacing-sm;

    &:hover {
        background-color: #EEE;
    }
}
  • URL: /components/raw/course-search/_course-search.scss
  • Filesystem Path: src/components/course-search/_course-search.scss
  • Size: 1.2 KB