MIUN - Design Library

DropdownInput 

<div class="form-group">
    <label for="VisitorAddress">Besöksadress</label>
    <select class="form-control" name="VisitorAddress" id="VisitorAddress">
            <option value="Studentplan 2" selected>Studentplan 2</option>
            <option value="Studentplan 3" selected>Studentplan 3</option>
    </select>
</div>
 
<div class="form-group">
    <label for="{{nameId}}">{{heading}}</label>
    <select class="form-control" name="{{nameId}}" id="{{nameId}}">
        {{#if includeSelectOption}}
            <option>Välj...</option>
        {{/if}}
        {{#each items}}
            <option value="{{value}}" {{#if selected}}selected{{/if}}>{{text}}</option>
        {{/each}}
    </select>
 </div>
 
{
  "nameId": "VisitorAddress",
  "heading": "Besöksadress",
  "items": [
    {
      "text": "Studentplan 2",
      "value": "Studentplan 2",
      "selected": true
    },
    {
      "text": "Studentplan 3",
      "value": "Studentplan 3",
      "selected": true
    }
  ],
  "noSelectOption": false
}
  • Content: 
    // $(document).ready(function() {
//     $('select').prettyDropdown({
//         width: '100%',
//     });
//   });
  • URL: /components/raw/dropdowninput/DropdownInput.js
  • Filesystem Path: src\components\01-global_components\DropdownInput\DropdownInput.js
  • Size: 119 Bytes
  • Content: 
    .prettydropdown {
    min-width: 100% !important;
}

select {
    &.form-control{
        display: block;
        font-size: 18px;
        font-family: "Lato";
        color: rgba(64, 64, 64, 0.7);
        padding: 0.375rem 0.3rem 0.375rem 25px;
       
        max-width: 100%;
        margin: 0;
        height: 50px;
        border: 1px solid $light-grey;
        box-shadow: none;
        border-radius: 25em;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-color: $light-grey;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
        background-repeat: no-repeat, repeat;
        background-position: right 0.7em top 50%, 0 0;
        background-size: 1.3em auto, 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

    option {
        color: rgba(64, 64, 64, 1);
        font-family: sans-serif;
      }
    }
}
.prettydropdown ul {
    border: none;
    border-radius: 25px;
    background-color: $light-grey;

    li {
        padding-right: 25px;
        padding-left: 25px;
        color: rgba($color: $dark-grey, $alpha: .7);

        span {
            line-height: 46px;
        }

        &:before {
            right: 25px !important;
        }

        &:after {
            display: none !important;
        }
    }

    &:focus {
        background-color: $grey-hover;

        li {
            color: $dark-grey;
        }
    }

    &.active {
        background-color: #fff;
        box-shadow: $box-shadow;

        li.selected {
            text-decoration: underline;
            font-family: "Lato Bold";
        }

        li.selected, li.hover {
            background-color: $light-blue !important;
            color: $dark-grey !important;
        }
    }
}
  • URL: /components/raw/dropdowninput/DropdownInput.scss
  • Filesystem Path: src\components\01-global_components\DropdownInput\DropdownInput.scss
  • Size: 2.1 KB

There are no notes for this item.