Fix tempvar dropdowns, use new style
Alex P
parent
5f8691f4cd
commit
945f287d06
|
|
@ -24,6 +24,7 @@ const TemplateControlBar = ({
|
|||
<Dropdown
|
||||
items={items}
|
||||
buttonSize="btn-xs"
|
||||
menuClass="dropdown-astronaut"
|
||||
useAutoComplete={true}
|
||||
selected={selectedText || '(No values)'}
|
||||
onChoose={item =>
|
||||
|
|
|
|||
|
|
@ -1,343 +0,0 @@
|
|||
/*
|
||||
Dropdowns
|
||||
----------------------------------------------
|
||||
Note: Some of these styles are intended to
|
||||
override styles from bootstrap-theme
|
||||
*/
|
||||
|
||||
$dropdown-menu-default-width: 100%;
|
||||
$dropdown-menu-max-height: 270px;
|
||||
|
||||
/*
|
||||
Generic width modifiers
|
||||
Use instead of creating new classes if possible
|
||||
*/
|
||||
.dropdown .dropdown-toggle,
|
||||
.dropdown .dropdown-autocomplete {
|
||||
width: 120px; /* Default width */
|
||||
}
|
||||
.dropdown {
|
||||
@for $i from 8 through 30 {
|
||||
&-#{$i * 10} .dropdown-toggle,
|
||||
&-#{$i * 10} .dropdown-autocomplete { width: #{$i * 10}px; }
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: calc(50% + 1px);
|
||||
right: 8px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
> .icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.dropdown-selected {
|
||||
display: inline-block;
|
||||
flex: 1 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
.dropdown .dropdown-toggle.btn-xs {
|
||||
height: 22px !important;
|
||||
line-height: 22px !important;
|
||||
padding: 0 9px;
|
||||
}
|
||||
|
||||
/*
|
||||
AutoComplete Field
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-autocomplete {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
|
||||
&.btn-xs {height: 22px;}
|
||||
&.btn-sm {height: 30px;}
|
||||
&.btn-md {height: 36px;}
|
||||
&.btn-lg {height: 50px;}
|
||||
}
|
||||
.dropdown-autocomplete--input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: $g20-white;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
|
||||
.btn-xs & {padding: 0 18px 0 9px; font-size: 12px;}
|
||||
.btn-sm & {padding: 0 18px 0 9px; font-size: 13px;}
|
||||
.btn-md & {padding: 0 34px 0 17px; font-size: 14px;}
|
||||
.btn-lg & {padding: 0 48px 0 24px; font-size: 18px;}
|
||||
|
||||
&::-webkit-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&::-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&:-ms-input-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
&:-moz-placeholder { color: rgba(255,255,255,0.5); font-weight: 500 !important; }
|
||||
|
||||
&:focus {
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
.dropdown-empty {
|
||||
padding: 7px 9px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.4);
|
||||
font-weight: 500;
|
||||
line-height: 15px;
|
||||
@include no-user-select();
|
||||
}
|
||||
|
||||
/*
|
||||
Dropdown Menu
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-menu {
|
||||
width: $dropdown-menu-default-width;
|
||||
min-width: initial;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
max-height: $dropdown-menu-max-height;
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8);
|
||||
|
||||
li.dropdown-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.active {
|
||||
@include gradient-h($c-sapphire, $c-pool);
|
||||
}
|
||||
&:hover {
|
||||
@include gradient-h($c-laser, $c-pool);
|
||||
}
|
||||
}
|
||||
li.dropdown-item > a {
|
||||
position: relative;
|
||||
@include no-user-select();
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
display: inline-block;
|
||||
padding: 7px 9px;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
font-weight: 500 !important;
|
||||
color: $c-yeti !important;
|
||||
background-color: transparent;
|
||||
transition:
|
||||
color 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: $g20-white !important;
|
||||
}
|
||||
&:active,
|
||||
&:active:focus {
|
||||
@include gradient-h($c-sapphire, $c-pool);
|
||||
}
|
||||
&:focus {
|
||||
@include gradient-h($c-ocean, $c-pool);
|
||||
}
|
||||
}
|
||||
li.dropdown-item.highlight {
|
||||
&, &:hover {
|
||||
@include gradient-h($c-laser, $c-pool);
|
||||
}
|
||||
> a {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown.dropdown-kapacitor .dropdown-toggle {
|
||||
color: $c-rainforest !important;
|
||||
&:hover {color: $c-honeydew !important;}
|
||||
}
|
||||
.dropdown.dropdown-kapacitor .dropdown-menu,
|
||||
.rule-builder .dropdown .dropdown-menu {
|
||||
@include custom-scrollbar($c-rainforest, $c-honeydew);
|
||||
@include gradient-h($c-pool, $c-rainforest);
|
||||
|
||||
li.dropdown-item:hover {
|
||||
@include gradient-h($c-laser, $c-rainforest);
|
||||
}
|
||||
li.dropdown-item > a {
|
||||
color: $c-mint !important;
|
||||
&:hover {
|
||||
color: $g20-white !important;
|
||||
}
|
||||
}
|
||||
li.dropdown-item.highlight {
|
||||
&, &:hover {
|
||||
@include gradient-h($c-laser, $c-rainforest);
|
||||
}
|
||||
> a {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown.dropdown-chronograf .dropdown-menu {
|
||||
@include custom-scrollbar($c-comet, $c-potassium);
|
||||
@include gradient-h($c-ocean, $c-comet);
|
||||
|
||||
li.dropdown-item:hover {
|
||||
@include gradient-h($c-laser, $c-comet);
|
||||
}
|
||||
li.dropdown-item > a {
|
||||
color: $c-twilight !important;
|
||||
&:hover {
|
||||
color: $g20-white !important;
|
||||
}
|
||||
}
|
||||
li.dropdown-item.highlight {
|
||||
&, &:hover {
|
||||
@include gradient-h($c-laser, $c-comet);
|
||||
}
|
||||
> a {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
color: $g20-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Dropdown Menu (only js highlighting, works with autocomplete feature)
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-menu.dropdown-menu--no-highlight {
|
||||
li.dropdown-item {
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
li.dropdown-item.highlight {
|
||||
&, &:hover {
|
||||
@include gradient-h($c-laser, $c-pool);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Dropdown Header
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-header {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 9px;
|
||||
white-space: nowrap;
|
||||
font-size: 14px !important;
|
||||
font-weight: 900;
|
||||
color: $c-neutrino !important;
|
||||
text-transform: none !important;
|
||||
border-bottom: 2px solid $c-pool;
|
||||
background-color: $c-ocean;
|
||||
|
||||
&:hover {
|
||||
background-image: none !important;
|
||||
background-color: $c-ocean !important;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Dropdown Actions
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-item__actions {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3px;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.dropdown-item__action {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
border: none !important;
|
||||
font-size: 13px;
|
||||
transition:
|
||||
text-shadow 0.25s ease,
|
||||
color 0.25s ease;
|
||||
color: $c-sapphire;
|
||||
|
||||
&[data-target="#deleteExplorerModal"] .icon {
|
||||
position: relative;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $g20-white;
|
||||
text-shadow:
|
||||
0 0 2px $c-hydrogen,
|
||||
0 0 3px $c-laser,
|
||||
0 0 6px $c-ocean;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Group By Time Dropdown
|
||||
----------------------------------------------
|
||||
*/
|
||||
.group-by-time-dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 120px;
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
font-size: 12px;
|
||||
text-transform: none;
|
||||
border-radius: $radius;
|
||||
display: block;
|
||||
}
|
||||
.dropdown-menu > li.dropdown-item > a {display: block;}
|
||||
}
|
||||
.data-explorer .group-by-time-dropdown .dropdown-toggle {
|
||||
font-weight: 600;
|
||||
background-color: $g2-kevlar;
|
||||
line-height: 24px !important;
|
||||
border: 2px solid $g6-smoke;
|
||||
transition:
|
||||
border-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
color: $g10-wolf;
|
||||
|
||||
&:hover {
|
||||
border-color: $g7-graphite;
|
||||
color: $g18-cloud;
|
||||
}
|
||||
}
|
||||
.data-explorer .group-by-time-dropdown.open .dropdown-toggle {
|
||||
background-color: $g2-kevlar !important;
|
||||
border-color: $c-pool !important;
|
||||
box-shadow: 0 0 6px 0px $c-pool !important
|
||||
}
|
||||
|
|
@ -55,31 +55,6 @@ button.btn.template-control--manage {
|
|||
font-size: 12px;
|
||||
font-family: $code-font;
|
||||
}
|
||||
.dropdown-menu {
|
||||
@include gradient-h($c-star,$c-pool);
|
||||
|
||||
li.dropdown-item {
|
||||
&, &:hover {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active {@include gradient-h($c-amethyst,$c-pool);}
|
||||
}
|
||||
li.dropdown-item > a {
|
||||
&, &:focus {background: none;}
|
||||
&:active, &:active:focus {@include gradient-h($c-amethyst,$c-pool);}
|
||||
font-size: 12px;
|
||||
font-family: $code-font;
|
||||
}
|
||||
li.dropdown-item.highlight {
|
||||
&, &:hover {@include gradient-h($c-comet,$c-pool);}
|
||||
> a {
|
||||
color: $g20-white;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.template-control--label {
|
||||
@include no-user-select();
|
||||
|
|
|
|||
|
|
@ -4319,6 +4319,87 @@ p .label {
|
|||
.dropdown-toggle.btn-lg .dropdown-selected {
|
||||
padding-right: 17px;
|
||||
}
|
||||
/*
|
||||
AutoComplete Field
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown-autocomplete {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.dropdown-autocomplete.btn-xs {
|
||||
height: 22px;
|
||||
}
|
||||
.dropdown-autocomplete.btn-sm {
|
||||
height: 30px;
|
||||
}
|
||||
.dropdown-autocomplete.btn-md {
|
||||
height: 38px;
|
||||
}
|
||||
.dropdown-autocomplete.btn-lg {
|
||||
height: 46px;
|
||||
}
|
||||
.dropdown-autocomplete--input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
.btn-xs .dropdown-autocomplete--input {
|
||||
padding: 0 14px 0 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn-sm .dropdown-autocomplete--input {
|
||||
padding: 0 22px 0 11px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-md .dropdown-autocomplete--input {
|
||||
padding: 0 28px 0 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.btn-lg .dropdown-autocomplete--input {
|
||||
padding: 0 34px 0 17px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.dropdown-autocomplete--input::-webkit-input-placeholder {
|
||||
font-weight: 500 !important;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.dropdown-autocomplete--input::-moz-placeholder {
|
||||
font-weight: 500 !important;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.dropdown-autocomplete--input:-ms-input-placeholder {
|
||||
font-weight: 500 !important;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.dropdown-autocomplete--input:-moz-placeholder {
|
||||
font-weight: 500 !important;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.dropdown-autocomplete--input:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-empty {
|
||||
padding: 7px 9px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 15px;
|
||||
color: rgba(255, 255, 255, .4);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/*
|
||||
Dropdown Menu
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown .dropdown-menu {
|
||||
min-width: 100%;
|
||||
padding: 0;
|
||||
|
|
@ -4331,8 +4412,8 @@ p .label {
|
|||
background: linear-gradient(to right, #4591ed 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
border: 0;
|
||||
-webkit-box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .992);
|
||||
box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .992);
|
||||
-webkit-box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .2);
|
||||
box-shadow: 0 2px 5px .6px rgba(15, 14, 21, .2);
|
||||
}
|
||||
.dropdown-menu li.dropdown-item {
|
||||
position: relative;
|
||||
|
|
@ -4357,7 +4438,9 @@ p .label {
|
|||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dropdown-menu li.dropdown-item:hover {
|
||||
.dropdown-menu li.dropdown-item:hover,
|
||||
.dropdown-menu li.dropdown-item.highlight,
|
||||
.dropdown-menu li.dropdown-item.highlight:hover {
|
||||
background: #00c9ff;
|
||||
background: -webkit-linear-gradient(left, #00c9ff 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#22adf6));
|
||||
|
|
@ -4397,17 +4480,26 @@ p .label {
|
|||
.dropdown-menu li.dropdown-item > a:focus:active,
|
||||
.dropdown-menu li.dropdown-item > a:focus:active:hover {
|
||||
color: #fff;
|
||||
background: #6bdfff;
|
||||
background: -webkit-linear-gradient(left, #6bdfff 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#6bdfff), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #6bdfff 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #6bdfff 0%, #22adf6 100%);
|
||||
background: #326bba;
|
||||
background: -webkit-linear-gradient(left, #326bba 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#326bba), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #326bba 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #326bba 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown-menu li.dropdown-item.active {
|
||||
color: #fff;
|
||||
background: #326bba;
|
||||
background: -webkit-linear-gradient(left, #326bba 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#326bba), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #326bba 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #326bba 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu .dropdown-actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
right: 4px;
|
||||
z-index: 2;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -4432,7 +4524,7 @@ p .label {
|
|||
opacity: 1;
|
||||
}
|
||||
.dropdown .dropdown-menu .dropdown-action {
|
||||
width: 27px;
|
||||
width: 20px;
|
||||
height: 27px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -4469,23 +4561,42 @@ p .label {
|
|||
margin: 0;
|
||||
background-color: #22adf6;
|
||||
}
|
||||
/*
|
||||
Dropdown Menu (only js highlighting, works with autocomplete feature)
|
||||
----------------------------------------------
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-menu--no-highlight li.dropdown-item:hover {
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-menu--no-highlight li.dropdown-item.highlight,
|
||||
.dropdown .dropdown-menu.dropdown-menu--no-highlight li.dropdown-item.highlight:hover {
|
||||
background: #00c9ff;
|
||||
background: -webkit-linear-gradient(left, #00c9ff 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #00c9ff 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #00c9ff 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
/*
|
||||
Kapacitor Theme Dropdowns
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-malachite {
|
||||
background: #22adf6;
|
||||
background: -webkit-linear-gradient(left, #22adf6 0%, #4ed8a0 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#4ed8a0));
|
||||
background: -o-linear-gradient(left, #22adf6 0%, #4ed8a0 100%);
|
||||
background: linear-gradient(to right, #22adf6 0%, #4ed8a0 100%);
|
||||
background: #4ed8a0;
|
||||
background: -webkit-linear-gradient(left, #4ed8a0 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#4ed8a0), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #4ed8a0 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #4ed8a0 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item:hover {
|
||||
background: #00c9ff;
|
||||
background: -webkit-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#4ed8a0));
|
||||
background: -o-linear-gradient(left, #00c9ff 0%, #4ed8a0 100%);
|
||||
background: linear-gradient(to right, #00c9ff 0%, #4ed8a0 100%);
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item:hover,
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item.highlight,
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item.highlight:hover {
|
||||
background: #7ce490;
|
||||
background: -webkit-linear-gradient(left, #7ce490 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#7ce490), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #7ce490 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #7ce490 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a {
|
||||
|
|
@ -4501,43 +4612,72 @@ p .label {
|
|||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:focus:active,
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item > a:focus:active:hover {
|
||||
color: #fff;
|
||||
background: #6bdfff;
|
||||
background: -webkit-linear-gradient(left, #6bdfff 0%, #4ed8a0 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#6bdfff), to(#4ed8a0));
|
||||
background: -o-linear-gradient(left, #6bdfff 0%, #4ed8a0 100%);
|
||||
background: linear-gradient(to right, #6bdfff 0%, #4ed8a0 100%);
|
||||
background: #32b08c;
|
||||
background: -webkit-linear-gradient(left, #32b08c 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#32b08c), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #32b08c 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #32b08c 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item .dropdown-action {
|
||||
color: #108174;
|
||||
color: #326bba;
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item .dropdown-action:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-item.active {
|
||||
background: #32b08c;
|
||||
background: -webkit-linear-gradient(left, #32b08c 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#32b08c), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #32b08c 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #32b08c 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-divider {
|
||||
background-color: #4ed8a0;
|
||||
background: #32b08c;
|
||||
background: -webkit-linear-gradient(left, #32b08c 0%, #4591ed 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#32b08c), to(#4591ed));
|
||||
background: -o-linear-gradient(left, #32b08c 0%, #4591ed 100%);
|
||||
background: linear-gradient(to right, #32b08c 0%, #4591ed 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite li.dropdown-header {
|
||||
color: #108174;
|
||||
background-color: #4ed8a0;
|
||||
color: #c6ffd0;
|
||||
background: #32b08c;
|
||||
background: -webkit-linear-gradient(left, #32b08c 0%, #4591ed 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#32b08c), to(#4591ed));
|
||||
background: -o-linear-gradient(left, #32b08c 0%, #4591ed 100%);
|
||||
background: linear-gradient(to right, #32b08c 0%, #4591ed 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-malachite.dropdown-menu--no-highlight li.dropdown-item.highlight,
|
||||
.dropdown .dropdown-menu.dropdown-malachite.dropdown-menu--no-highlight li.dropdown-item.highlight:hover {
|
||||
background: #7ce490;
|
||||
background: -webkit-linear-gradient(left, #7ce490 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#7ce490), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #7ce490 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #7ce490 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
/*
|
||||
Purple Theme Dropdowns
|
||||
*/
|
||||
.dropdown .dropdown-menu.dropdown-astronaut {
|
||||
background: #4591ed;
|
||||
background: -webkit-linear-gradient(left, #4591ed 0%, #9394ff 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#4591ed), to(#9394ff));
|
||||
background: -o-linear-gradient(left, #4591ed 0%, #9394ff 100%);
|
||||
background: linear-gradient(to right, #4591ed 0%, #9394ff 100%);
|
||||
background: #7a65f2;
|
||||
background: -webkit-linear-gradient(left, #7a65f2 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#7a65f2), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #7a65f2 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #7a65f2 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item:hover {
|
||||
background: #22adf6;
|
||||
background: -webkit-linear-gradient(left, #22adf6 0%, #9394ff 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#22adf6), to(#9394ff));
|
||||
background: -o-linear-gradient(left, #22adf6 0%, #9394ff 100%);
|
||||
background: linear-gradient(to right, #22adf6 0%, #9394ff 100%);
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item:hover,
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item.highlight,
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item.highlight:hover {
|
||||
background: #9394ff;
|
||||
background: -webkit-linear-gradient(left, #9394ff 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#9394ff), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #9394ff 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #9394ff 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a {
|
||||
|
|
@ -4553,11 +4693,19 @@ p .label {
|
|||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:focus:active,
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item > a:focus:active:hover {
|
||||
color: #fff;
|
||||
background: #00c9ff;
|
||||
background: -webkit-linear-gradient(left, #00c9ff 0%, #9394ff 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#00c9ff), to(#9394ff));
|
||||
background: -o-linear-gradient(left, #00c9ff 0%, #9394ff 100%);
|
||||
background: linear-gradient(to right, #00c9ff 0%, #9394ff 100%);
|
||||
background: #513cc6;
|
||||
background: -webkit-linear-gradient(left, #513cc6 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#513cc6), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #513cc6 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #513cc6 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item.active {
|
||||
background: #513cc6;
|
||||
background: -webkit-linear-gradient(left, #513cc6 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#513cc6), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #513cc6 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #513cc6 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-item .dropdown-action {
|
||||
|
|
@ -4567,11 +4715,30 @@ p .label {
|
|||
color: #fff;
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-divider {
|
||||
background-color: #9394ff;
|
||||
background: #513cc6;
|
||||
background: -webkit-linear-gradient(left, #513cc6 0%, #4591ed 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#513cc6), to(#4591ed));
|
||||
background: -o-linear-gradient(left, #513cc6 0%, #4591ed 100%);
|
||||
background: linear-gradient(to right, #513cc6 0%, #4591ed 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut li.dropdown-header {
|
||||
color: #513cc6;
|
||||
background-color: #9394ff;
|
||||
color: #b1b6ff;
|
||||
background: #513cc6;
|
||||
background: -webkit-linear-gradient(left, #513cc6 0%, #4591ed 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#513cc6), to(#4591ed));
|
||||
background: -o-linear-gradient(left, #513cc6 0%, #4591ed 100%);
|
||||
background: linear-gradient(to right, #513cc6 0%, #4591ed 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.dropdown .dropdown-menu.dropdown-astronaut.dropdown-menu--no-highlight li.dropdown-item.highlight,
|
||||
.dropdown .dropdown-menu.dropdown-astronaut.dropdown-menu--no-highlight li.dropdown-item.highlight:hover {
|
||||
background: #9394ff;
|
||||
background: -webkit-linear-gradient(left, #9394ff 0%, #22adf6 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, from(#9394ff), to(#22adf6));
|
||||
background: -o-linear-gradient(left, #9394ff 0%, #22adf6 100%);
|
||||
background: linear-gradient(to right, #9394ff 0%, #22adf6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1);
|
||||
}
|
||||
.alert {
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Reference in New Issue