dropdown styles fixes
This commit is contained in:
Konstantyn Pahsura
yanas
parent
d384cd77c6
commit
28f719b58a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,19 +1,40 @@
|
|||
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;
|
||||
.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-drop.aui-select2-drop.aui-style-default {
|
||||
z-index: $dropdownZ;
|
||||
background-color: $selectActiveBg;
|
||||
border-color: $selectActiveBg;
|
||||
|
||||
.select2-results{
|
||||
background-color: $selectActiveBg;
|
||||
border-color: $selectActiveBg;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -24,19 +45,23 @@ form.aui {
|
|||
background-color: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #3572b0;
|
||||
background-color: $selectActiveItemBg;
|
||||
}
|
||||
|
||||
.select2-result{
|
||||
&.select2-highlighted{
|
||||
background-color: $selectActiveItemBg;
|
||||
}
|
||||
|
||||
.select2-result-label{
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.aui-select2-drop {
|
||||
z-index: 901;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drop-mask {
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.aui-dropdown2.aui-style-default.dropdown-dark {
|
||||
background-color: $defaultBackground;
|
||||
border-color: transparent;
|
||||
z-index: $dropdownMaskZ;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue