Stream recording UI

app/assets/stylesheets/shared/form.scss

@@ -264,149 +264,6 @@ input[type="file"] {
   }
 }
 
-// These styles work with Slim Select v2, not tested with v1
-.ss-main {
-  &.form-select {
-    padding: 0.75rem;
-    min-height: $input-height;
-    height: auto;
-    border-color: $input-border-color;
-    // border: none;
-  }
-
-  &.ss-disabled {
-    background-color: $input-disabled-bg;
-  }
-
-  .ss-values .ss-single {
-    margin-left: 0;
-  }
-
-  // selection colors
-  .ss-values .ss-value {
-    animation: none;
-    background-color: $primary;
-    margin: 2px 5px 0 0;
-
-    .ss-value-delete,
-    .ss-value-delete svg {
-      width: 16px;
-      height: 16px;
-      border-left: none;
-    }
-  }
-
-  .ss-multi-selected .ss-add {
-    margin-top: 12px;
-    margin-right: 8px;
-  }
-
-  &.form-select.is-invalid:not([multiple]):not([size]) {
-    background-repeat: no-repeat;
-  }
-}
-
-.ss-single-selected,
-.ss-multi-selected {
-  padding: $input-btn-padding-y $input-btn-padding-x;
-  line-height: $line-height-base;
-  border: 0;
-  border-radius: $input-border-radius;
-  color: $input-color;
-
-  &.ss-disabled {
-    background: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    cursor: default;
-  }
-}
-
-.ss-single-selected {
-  height: 3.5rem;
-  background: transparent;
-}
-
-.ss-arrow {
-  visibility: hidden;
-}
-
-.ss-main.form-select.is-invalid:not([multiple]):not([size]) {
-  padding-right: $form-select-feedback-icon-padding-end;
-  background-image: $form-select-indicator, $form-feedback-icon-invalid;
-  background-position: $form-select-bg-position, $form-select-feedback-icon-position;
-  background-size: $form-select-bg-size, $form-select-feedback-icon-size;
-  border-color: $danger;
-}
-
-.form-select.is-invalid:not([multiple]):not([size]) {
-  padding-right: 0;
-  background-image: none;
-}
-
-.ss-search input {
-  border-radius: $input-border-radius;
-  padding: $input-btn-padding-y $input-btn-padding-x;
-  height: 3rem;
-}
-
-// more x-ish deselect
-.ss-single-selected .ss-deselect {
-  color: transparent;
-  position: relative;
-  transform: rotate(45deg);
-
-  &::before {
-    background: #666;
-    content: "";
-    position: absolute;
-    height: 10px;
-    width: 2px;
-    left: 4px;
-    top: 12px;
-  }
-
-  &::after {
-    background: #666;
-    content: "";
-    position: absolute;
-    height: 2px;
-    width: 10px;
-    left: 0px;
-    top: 16px;
-  }
-}
-
-.ss-values {
-  color: #000;
-}
-
-// faster!
-.ss-content {
-  transition-duration: 0.1s;
-
-  &.form-select {
-    padding: 0;
-    border-radius: 0;
-    box-shadow: $box-shadow;
-    background-image: none;
-  }
-
-  .ss-list {
-    .ss-option,
-    .ss-optgroup-label {
-      line-height: 2;
-    }
-
-    .ss-option.ss-selected:not(.ss-disabled),
-    .ss-option.ss-highlighted,
-    .ss-option:hover,
-    .ss-optgroup-label.ss-highlighted,
-    .ss-optgroup-label:hover {
-      background-color: $primary;
-    }
-  }
-}
-
 // undo bootstrap placeholder class
 .placeholder {
   display: flex;
@@ -417,12 +274,6 @@ input[type="file"] {
   opacity: 1;
 }
 
-// maybe a bad idea ... but hide options on multiselects, so things don't
-// flicker as simpleselect is init-ing them
-select[multiple] option {
-  visibility: hidden;
-}
-
 // help text
 small {
   &.invalid-feedback,
@@ -485,13 +336,6 @@ small {
   }
 }
 
-/*.input-group {
-  .form-control,
-  .form-select {
-    border-right: none;
-  }
-}*/
-
 .tags-badge {
   padding: 0.65rem;
   font-size: 0.875rem;
@@ -592,60 +436,6 @@ input[type="number"]::-webkit-outer-spin-button {
     }
   }
 
-  .ss-main {
-    &.form-select {
-      background: $gray-900;
-      border-color: $border-color-dark;
-
-      .ss-deselect svg path,
-      .ss-arrow path {
-        stroke: $gray-400;
-        visibility: visible;
-      }
-    }
-  }
-
-  .ss-content {
-    &.form-select {
-      background: $gray-900;
-      border-color: $border-color-dark;
-    }
-    .ss-list {
-      background: $gray-900;
-      border-color: $border-color-dark;
-
-      .ss-deselect,
-      .ss-option {
-        color: $white;
-      }
-    }
-    .ss-option {
-      background: $gray-900;
-      color: $gray-400;
-      border-color: $border-color-dark;
-    }
-    .ss-search {
-      input {
-        background: $gray-900;
-        color: $gray-400;
-        border-color: $border-color-dark;
-      }
-    }
-  }
-
-  .ss-single-selected .ss-deselect {
-    color: transparent;
-
-    &::before,
-    &::after {
-      background: $gray-900;
-    }
-  }
-
-  .ss-values {
-    color: $gray-400;
-  }
-
   .input-group-text,
   .prx-input-group-text {
     background: $gray-900;

app/assets/stylesheets/shared/shared.scss

@@ -22,6 +22,7 @@
 @import "header";
 @import "icon";
 @import "layout";
+@import "slim-select";
 @import "status-bar";
 @import "table";
 @import "tabs";