diff options
Diffstat (limited to 'debian/missing-sources/wyrm/sass/wyrm_addons/forms/_form_autocomplete.sass')
| -rw-r--r-- | debian/missing-sources/wyrm/sass/wyrm_addons/forms/_form_autocomplete.sass | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/debian/missing-sources/wyrm/sass/wyrm_addons/forms/_form_autocomplete.sass b/debian/missing-sources/wyrm/sass/wyrm_addons/forms/_form_autocomplete.sass new file mode 100644 index 0000000..d7dccc7 --- /dev/null +++ b/debian/missing-sources/wyrm/sass/wyrm_addons/forms/_form_autocomplete.sass @@ -0,0 +1,188 @@ +// Form - autocompleter +// +// Located in `wyrm_core/_autocompleter.sass`. Autocompleters traditionally have three states, empty, +// single item and multi-item addition. Examples for all three are shown below. +// +// Markup: +// <div class="wy-control-group"> +// <label for="right-label" >Empty state</label> +// <div class="wy-control"> +// <div class="wy-tag-input-group"> +// <div class="wy-autocomplete-group"> +// <label class="fa fa-search" for="search-example-1"></label> <input type="text" id="search-example-1" placeholder="Search users"> +// </div> +// </div> +// <span class="wy-form-message">Example help text</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label for="right-label" >One item allowed</label> +// <div class="wy-control"> +// <div class="wy-tag-input-group"> +// <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span> +// </div> +// <span class="wy-form-message">User needs to close the above item before choosing a replacement.</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label for="right-label" >Multiple items allowed</label> +// <div class="wy-control"> +// <div class="wy-tag-input-group"> +// <span class="wy-tag">Network<a href="" class="wy-tag-remove"></a></span> +// <span class="wy-tag">Rollerball<a href="" class="wy-tag-remove"></a></span> +// <span class="wy-tag on">Being There<a href="" class="wy-tag-remove"></a></span> +// <div class="wy-autocomplete-group"> +// <label class="fa fa-search" for="search-example-2"></label> <input type="text" id="search-example-2" placeholder="Search users"> +// <div class="wy-autocomplete-dropdown"> +// <ul> +// <li class="on"> +// Network +// </li> +// <li> +// Rollerball +// </li> +// <li> +// Being There +// </li> +// <li class="add"> +// <span class="fa fa-plus-circle"></span> Add new entry +// </li> +// </ul> +// </div> +// </div> +// </div> +// <span class="wy-form-message">Infinite autocomplete.</span> +// </div> +// </div> +// +// Styleguide 9 + +.wy-autocomplete-group + display: inline-block + position: relative + background: $input-background-color + +.wy-autocomplete-dropdown + position: absolute + top: 100% + left: 0 + float: left + min-width: 100% + background: $dropdown-color + z-index: $z-index-dropdown + border: solid 1px $dropdown-border-color + box-shadow: 0 5px 5px 0 rgba(0,0,0,.1) + ul + list-style: none !important + margin: 0 !important + li + line-height: 1.5 + padding: $base-font-size / 2 + cursor: pointer + list-style: none !important + margin: 0 !important + border-bottom: solid 1px $table-border-color + &:last-child + border-bottom: none + &.on, &:hover + background: $link-color + border-color: transparent + color: $white + &.add + background: lighten($green, 50%) + &:hover.add, &.add.on + background: $green + img + width: 16px + height: 16px + margin-right: $base-font-size / 2 + +.wy-tag-input-group + .wy-autocomplete-dropdown + margin-top: -4px + +// Form - Autocompleter, many items. +// +// For when there are lots of items in a tag group. +// +// Markup: +// <div class="wy-control-group wy-control-group-relation"> +// <label>Lots of items</label> +// <div class="wy-control"> +// <div class="wy-tag-input-group wy-tag-input-group-many"> +// <ol> +// <li><span class="fa fa-ellipsis-v">Network <a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">Rollerball <a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">The Godfather <a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">The Godfather Part II<a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">The Big Lebowski <a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">Fargo <a class="fa fa-times-circle"></a></span></li> +// <li><span class="fa fa-ellipsis-v">Bad Santa <a class="fa fa-times-circle"></a></span></li> +// </ol> +// <div class="wy-autocomplete-group"> +// <label class="fa fa-search"></label> +// <input placeholder="Add item" type="text"> +// </div> +// </div> +// </div> +// +// Styleguide 9.2 + +.wy-tag-input-group.wy-tag-input-group-many + border: none + box-shadow: none + padding: 0 + display: block + background: transparent + .wy-autocomplete-group + display: inline-block + border: solid 1px $table-border-color + width: 50% + margin-bottom: $base-line-height / 4 + padding: 0 $base-line-height / 4 + label + margin-left: 0 + input + margin-bottom: 0 + .wy-spinner + float: right + margin-top: $base-line-height / 4 + margin-bottom: $base-line-height / 4 + +.wy-tag-input-group.wy-tag-input-group-many ol + margin-bottom: 0 + +.wy-tag-input-group.wy-tag-input-group-many ol li + cursor: move + margin-left: 0 + span + padding: $base-line-height / 4 $base-line-height / 2 + margin-bottom: $base-line-height / 4 + background: rgba(0,0,0,.1) + position: relative + +truncate(50%) + +transition(background .5s ease-in-out) + &.active span + background: rgba(0,0,0,.2) + + span:hover + .#{$icon-prefix}-#{$icon-remove} + opacity: 1 + span:before + color: $gray-light + margin-right: $base-line-height / 4 + + .#{$icon-prefix}-#{$icon-remove} + position: absolute + right: $base-line-height / 4 + top: $base-line-height / 4 + color: $red + opacity: 0 + +.wy-tag-input-group.wy-tag-input-group-many li + cursor: auto + ++media($mobile) + .wy-tag-input-group.wy-tag-input-group-many ol li span + width: 100% + |