dropdown styles fixes

css/_variables.scss

@@ -26,7 +26,9 @@ $defaultDarkColor: #2b3d5c;
 $defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);
 
-// Toolbar
+/**
+ * Toolbar
+ */
 $toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
@@ -34,11 +36,15 @@ $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
 $splitterToolbarButtonLeftMargin: 0px;
 
-// Main controls
+/*
+ * Main controls
+ */
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
 
-// Video layout.
+/*
+ * Video layout
+ */
 $videoThumbnailHovered: rgba(22, 94, 204, .4);
 $videoThumbnailSelected: #165ECC;
 $participantNameColor: #fff;
@@ -65,7 +71,9 @@ $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
 $feedbackCancelFontColor: #333;
 
-// Notifications
+/**
+ * Notifications
+ */
 $notificationFontSize: 13px;
 $notificationColor: #FFFFFF;
 $notificationBackground: $tooltipBg;
@@ -91,26 +99,36 @@ $toolbarZ: 900;
 $overlayZ: 902;
 $notificationZ: 1012;
 $ringingZ: 800;
+$dropdownZ: 901;
+$dropdownMaskZ: 900;
 
 /**
- * Font Colors TODO: Change colors when general dialogs are implemented.
+ * Font Colors
  */
 $defaultFontColor: #777;
 $defaultLightFontColor: #F1F1F1;
 $defaultDarkFontColor: #000;
-$buttonFontColor: #777;
-$buttonHoverFontColor: #287ade;
-$auiPrimaryButtonBg: #3572b0;
-$auiPrimaryButtonHoverBg: #57647b;
-$auiPrimaryButtonColor: #fff;
-$auiIconColor: #707070;
-$inputControlEmColor: #f29424;
-$linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
 
 /**
  * Forms
  */
+<<<<<<< 1291023cbed3044a9f3acc2b8c7d47ff05e5aee4
 $inputBg: $inputSemiBackground;
 $inputBgHover: $inputSemiBackground;
 $inputFontColor: $defaultDarkFontColor;
+=======
+//dropdown
+$selectFontColor: $defaultLightFontColor;
+$selectBg: $defaultBackground;
+$selectActiveBg: $defaultBackground;
+$selectActiveItemBg: $defaultDarkColor;
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+// Main controls TODO: looks like we don't use it
+$inputSemiBackground: rgba(132, 132, 132, .8);
+$inputLightBackground: #EBEBEB;
+>>>>>>> dropdown styles fixes

css/aui-components/dropdown.scss

@@ -1,42 +1,67 @@
-form.aui {
-    .aui-select2-container {
-        background-color: transparent;
 
-        > a {
-            background-color: $inputBg !important;
-            color: $inputFontColor !important;
-            border-color: $inputBg !important;
-            text-shadow: none !important;
-            margin: 0 auto !important;
-            width: 100% !important;
+.select2-container.aui-select2-container {
+    background-color: transparent !important;
+
+    a.select2-choice {
+        height: 28px !important;
+        line-height: 18px !important;
+        width: 100% !important;
+        background-color: $selectBg !important;
+        border-color: $selectBg !important;
+        color: $selectFontColor !important;
+        text-shadow: none !important;
+        font-size: 12px !important;
+        margin: 0 auto !important;
+
+        &:after {
+            border-top-color: $selectFontColor;
+        }
+    }
+
+    &.select2-dropdown-open{
+        a.select2-choice {
+            background-color: $selectActiveBg !important;
+            border-color: $selectActiveBg !important;
         }
     }
 }
 
-.select2-results{
-    &::-webkit-scrollbar {
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #3572b0;
-    }
-}
+.select2-drop.aui-select2-drop.aui-style-default {
+    z-index: $dropdownZ;
+    background-color: $selectActiveBg;
+    border-color: $selectActiveBg;
 
-.aui-select2-drop {
-    z-index: 901;
+    .select2-results{
+        background-color: $selectActiveBg;
+        border-color: $selectActiveBg;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track-piece {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: $selectActiveItemBg;
+        }
+
+        .select2-result{
+            &.select2-highlighted{
+                background-color: $selectActiveItemBg;
+            }
+
+            .select2-result-label{
+                font-size: 12px;
+                line-height: 20px;
+            }
+        }
+
+    }
 }
 
 .select2-drop-mask {
-    z-index: 900;
-}
-
-.aui-dropdown2.aui-style-default.dropdown-dark {
-    background-color: $defaultBackground;
-    border-color: transparent;
+    z-index: $dropdownMaskZ;
 }

index.html

@@ -181,8 +181,8 @@
                 <div id="settings_container" class="sideToolbarContainer__inner">
                     <div class="title" data-i18n="settings.title"></div>
                     <form class="aui">
-                        <div id="languagesSelectWrapper" class="first hide">
-                            <select id="languagesSelect" style="width: 80%; margin-left: 10%"></select>
+                        <div id="languagesSelectWrapper" class="sideToolbarBlock first hide">
+                            <select id="languagesSelect"></select>
                         </div>
                         <div id="deviceOptionsWrapper" class="hide">
                             <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -70,8 +70,6 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
  */
 function initSelect2($el, onSelectedCb) {
     $el.auiSelect2({
-        containerCssClass: 'input-container-dark',
-        dropdownCssClass: 'dropdown-dark',
         minimumResultsForSearch: Infinity
     });
     if (typeof onSelectedCb === 'function') {