jiti-meet/css/_popup_menu.scss

116 lines
2.4 KiB
SCSS
Raw Normal View History

2016-10-27 13:09:27 +00:00
/**
* Initialize
**/
.popupmenu {
min-width: 75px;
text-align: left;
padding: 0px;
2019-10-07 12:35:04 +00:00
width: 180px;
white-space: nowrap;
2016-10-27 13:09:27 +00:00
&__item {
list-style-type: none;
height: 35px;
}
2016-10-27 13:09:27 +00:00
// Link Appearance
&__link,
&__contents {
2016-10-27 13:09:27 +00:00
display: block;
box-sizing: border-box;
text-decoration: none;
height: 100%;
font-size: 9pt;
width: 100%;
cursor: pointer;
padding: 0 5px;
color: $popupMenuColor;
&:hover {
background-color: $popupMenuHoverBackground;
color: $popupMenuHoverColor;
}
2016-10-27 13:09:27 +00:00
&.disabled {
pointer-events: none;
}
}
&__text {
2016-10-27 13:09:27 +00:00
display: inline-block;
vertical-align: middle;
}
&__link {
i {
cursor: pointer;
}
}
&__contents {
display: flex;
/**
* Positioning styles on the slider and its container are used to make
* the container fit the popup width, by removing the slider from the
* page flow, and then making the slider fit the container.
*/
.popupmenu__slider_container {
position: relative;
width: 100%;
.popupmenu__slider {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 100%;
&::-webkit-slider-runnable-track {
background-color: $popupSliderColor;
}
&::-moz-range-track {
background-color: $popupSliderColor;
}
&::-ms-fill-lower {
background-color: $popupSliderColor;
}
}
}
}
2016-10-27 13:09:27 +00:00
&__icon {
vertical-align: middle;
position: relative;
display: inline-block;
min-width: 20px;
2016-10-27 13:09:27 +00:00
height: 100%;
2019-10-07 12:35:04 +00:00
padding-right: 10px;
2016-10-27 13:09:27 +00:00
> * {
@include absoluteAligning();
}
}
.icon-kick,
.icon-play,
.icon-stop {
2016-10-27 13:09:27 +00:00
font-size: 8pt;
}
}
/**
* Override reset css styling modifying all lists and set negative margin to
* reduce the visibility of padding on AtlasKit
* InlineDialogs.
*/
ul.popupmenu {
margin: -16px -24px;
}
span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
display:block !important;
}