University of Derby

Site Search: Default 

<div class="main-navigation-panel">
    <div class="main-navigation-panel-content">
        <div class="main-navigation-close">
            <a href="#" class="js-header-navigation-search">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
        <div class="site-search-title">
            <div class="h3">Search</div>
        </div>
        <div class="site-search-inner-panel">
            <div class="site-search-input">
                <div class="search-input-group">
                    <label for="" class="search-input-label">Search</label>
                    <input type="text" class="search-input" name="query" placeholder="">
                    <button class="search-button" type="button">
        <i class="uod-icons uod-icons-search"></i>
        <span class="search-button-overlay"><i class="uod-icons uod-icons-search"></i>search</span>
    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="main-navigation-panel">
    <div class="main-navigation-panel-content">
        <div class="main-navigation-close">
            <a href="#" class="js-header-navigation-search">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
        <div class="site-search-title">
            <div class="h3">Search</div>
        </div>
        <div class="site-search-inner-panel">
            <div class="site-search-input">
                {% embed '@search-input' with { highContrast: false, label: 'Search', placeholder: 'Search website' } %}{% endembed %}
            </div>
        </div>
    </div>
</div>
 
{
  "searchresults": [
    {
      "category": {
        "title": "Courses"
      },
      "results": [
        {
          "title": "Art and Design Mphil or PhD",
          "href": "#"
        },
        {
          "title": "Art Therapy MA",
          "href": "#"
        },
        {
          "title": "An introduction to Art Therapy Supervision",
          "href": "#"
        },
        {
          "title": "Creative Art and Design Practice (FdA)",
          "href": "#"
        },
        {
          "title": "Arts Therapies Theory and Research in Relation to Practice One",
          "href": "#"
        }
      ]
    }
  ]
}
  • Content: 
    .site-search {

    &-inner-panel {
        display: flex;
        right: fluid-margin();
        left: fluid-margin();
        flex-direction: column;

        .tt-menu {
            display: block !important;

            @include for-tablet-landscape-up {
                lost-column: 6/13;
                top: px-to-em(-16) !important;
                left: calc( 100% + 10px) !important;
                display: block !important;
            }
        }
    }

    &-title {
        lost-column: 16/16;
        lost-offset: 0/16;
        margin-bottom: px-to-em(48);
    }

    &-input {
        lost-column: 16/16;
        lost-offset: 0/16;
        flex: 0 0 auto;
        position: relative;
    }

    &-results {
        @include underline-only-on-hover;

        lost-column: 15/16;
        lost-offset: 0/16;
        display: none;
        margin-top: 65px;
        font-family: $header-font;
        display: block;

        h5, .h5 {
            margin-bottom: px-to-em(30, 24);
        }

        .tt-suggestion {
            @include underline;
            @include link-colour($white);
            background-image: none;
            display: block;
            padding-right: 1em;
            padding-bottom: px-to-em(14);
            padding-top: px-to-em(14);
            line-height: 22 / 20 + 0;
            font-size: px-to-em(14);
            font-weight: bold;
            cursor: pointer;

            &:nth-child(2) {
                padding-top: 0; //take padding off the first suggestion, it's the 2nd element in the returned html
            }

            &:hover,
            &:focus {
                background-image: linear-gradient(transparent calc(100% - .1em), $white .1em);
            }

            &:after {
                content: '';
                border-bottom: 1px dashed $dark-grey;
                content: "";
                border-bottom: 1px dashed $white;
                position: absolute;
                left: 0;
                width: 100%;
                top: calc( 100% - 0.1em);
            }
        }
    }

    @include for-largerthan-ipad-portrait {
        &-title {
            lost-column: 14/16;
            lost-offset: 1/16;
        }

        &-input {
            lost-column: 14/16;
            lost-offset: 1/16;
            flex: 0 0 auto;
        }

        &-results {
            lost-column: 16/16;
        }
    }

    @include for-tablet-landscape-up {

        &-inner-panel {
            flex-direction: row;
        }

        &-title {
            lost-column: 12/13;
            lost-offset: 1/13;
        }

        &-input {
            lost-column: 8/13;
            lost-offset: 1/13;
            margin-top: px-to-em(16);
            padding-right: 40px;
            flex: 0 0 auto;
        }

        &-results {
            lost-offset: 0/13;
            lost-column: 13/13;
            margin-top: 0;
        }
    }

    @include for-desktop-up {

        &-results {
            lost-offset: 1/13;
            lost-column: 13/13;
        }
    }
}
  • URL: /components/raw/site-search/site-search.scss
  • Filesystem Path: components/atoms/site-search/site-search.scss
  • Size: 3.1 KB

There are no notes for this item.