logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

select.vue (1012B)

    

  1. <template>
  2.   <label
  3.     class="Select input"
  4.     :class="{ disabled, unstyled }"
  5.   >
  6.     <select
  7.       :disabled="disabled"
  8.       :value="modelValue"
  9.       v-bind="attrs"
  10.       @change="$emit('update:modelValue', $event.target.value)"
  11.     >
  12.       <slot />
  13.     </select>
  14.     {{ ' ' }}
  15.     <FAIcon
  16.       class="select-down-icon"
  17.       icon="chevron-down"
  18.     />
  19.   </label>
  20. </template>
  22. <script src="./select.js"> </script>
  24. <style lang="scss">
  25. /* TODO fix order of styles */
  26. label.Select {
  27.   padding: 0;
  29.   select {
  30.     appearance: none;
  31.     background: transparent;
  32.     border: none;
  33.     color: var(--text);
  34.     margin: 0;
  35.     padding: 0 2em 0 0.2em;
  36.     font-family: var(--font);
  37.     font-size: 1em;
  38.     width: 100%;
  39.     z-index: 1;
  40.     height: 2em;
  41.     line-height: 16px;
  42.   }
  44.   .select-down-icon {
  45.     position: absolute;
  46.     top: 0;
  47.     bottom: 0;
  48.     right: 5px;
  49.     height: 100%;
  50.     width: 0.875em;
  51.     font-family: var(--font);
  52.     line-height: 2;
  53.     z-index: 0;
  54.     pointer-events: none;
  55.   }
  56. }
  57. </style>