dropdown.css in Open Social 8.6
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9 ;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 275px;
max-width: 500px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 0.875rem;
text-align: left;
background-color: #fff;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
background-clip: padding-box;
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 11px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu li .badge {
margin: 0;
}
.dropdown-menu li > a,
.dropdown-menu li > span {
padding: 8px 10px;
display: block;
clear: both;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #555555;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > span:hover {
background-color: #f3f3f3;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
text-decoration: none;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
text-decoration: none;
outline: 0;
}
.dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus,
.dropdown-menu > .disabled > span:hover,
.dropdown-menu > .disabled > span:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
cursor: not-allowed;
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
left: auto;
right: 0;
}
.dropdown-menu-left {
left: 0;
right: auto;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 14px;
line-height: 1.5;
color: #555555;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 990;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid \9 ;
content: "";
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
.dropdown-menu .divider {
margin: 6px 0;
}
.dropdown-menu .media {
min-width: 250px;
}
.dropdown-menu .media-left {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.dropdown-menu .media-left img {
vertical-align: top;
}
.dropdown-menu .media-body {
white-space: normal;
}
.dropdown-menu .media-body a {
white-space: nowrap;
}
.dropdown-menu--visibility {
min-width: 240px;
left: auto;
right: -70px;
padding: 0;
}
.dropdown.profile .header-nav-current-user {
padding: 4px 10px 0;
}
.dropdown-header {
padding: 7px 20px;
background: white;
}
.scrollable-menu {
height: calc(100vh - 156px);
overflow-x: hidden;
list-style-type: none;
padding: 0;
margin: 0;
}
.scrollable-menu li {
margin: 2px 0;
}
.scrollable-menu p {
margin-bottom: 0;
}
html:not(.js) .dropdown:focus .dropdown-menu,
html:not(.js) .dropdown:hover .dropdown-menu,
html:not(.js) .comment__actions:hover .dropdown-menu,
html:not(.js) .comment__actions:hover .dropdown-menu,
html:not(.js) .dropdown-menu:hover {
display: block;
}
html:not(.js) .dropdown {
cursor: pointer;
}
html:not(.js) .dropdown:focus {
outline: none;
}
html:not(.js) .dropdown .dropdown-toggle {
pointer-events: none;
z-index: -1;
}
/* IE11 */
@media (min-width: 600px) {
.dropdown-menu .divider.mobile {
display: none;
}
.dropdown-menu li.mobile {
display: none;
}
.dropdown-menu li > a,
.dropdown-menu li > span {
padding: 4px 10px 4px 15px;
}
.dropdown-menu .media-left {
padding-right: 8px;
}
.dropdown-menu--visibility {
right: 0;
}
.scrollable-menu {
height: auto;
max-height: 450px;
}
}
@media (min-width: 600px) and (-ms-high-contrast: none) {
*::-ms-backdrop, .dropdown-menu .media-body {
padding-right: 17px;
}
}
@media (min-width: 900px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
.navbar-right .dropdown-menu-left {
left: 0;
right: auto;
}
}
@media (max-width: 599px) {
.dropup.has-alert > a:before,
.dropdown.has-alert > a:before {
content: '';
position: absolute;
top: 11px;
right: 7px;
width: 12px;
height: 12px;
background-color: #777777;
border-radius: 50%;
}
}
File
themes/socialbase/assets/css/dropdown.css
View source
- .caret {
- display: inline-block;
- width: 0;
- height: 0;
- margin-left: 2px;
- vertical-align: middle;
- border-top: 4px dashed;
- border-top: 4px solid \9 ;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- }
-
- .dropup,
- .dropdown {
- position: relative;
- }
-
- .dropdown-toggle:focus {
- outline: 0;
- }
-
- .dropdown-menu {
- position: absolute;
- top: 100%;
- left: 0;
- z-index: 1000;
- display: none;
- float: left;
- min-width: 275px;
- max-width: 500px;
- padding: 5px 0;
- margin: 2px 0 0;
- list-style: none;
- font-size: 0.875rem;
- text-align: left;
- background-color: #fff;
- -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
- background-clip: padding-box;
- }
-
- .dropdown-menu.pull-right {
- right: 0;
- left: auto;
- }
-
- .dropdown-menu .divider {
- height: 1px;
- margin: 11px 0;
- overflow: hidden;
- background-color: #e5e5e5;
- }
-
- .dropdown-menu li .badge {
- margin: 0;
- }
-
- .dropdown-menu li > a,
- .dropdown-menu li > span {
- padding: 8px 10px;
- display: block;
- clear: both;
- line-height: 1.5;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #555555;
- }
-
- .dropdown-menu li > a:hover,
- .dropdown-menu li > span:hover {
- background-color: #f3f3f3;
- }
-
- .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
- text-decoration: none;
- }
-
- .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
- text-decoration: none;
- outline: 0;
- }
-
- .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus,
- .dropdown-menu > .disabled > span:hover,
- .dropdown-menu > .disabled > span:focus {
- text-decoration: none;
- background-color: transparent;
- background-image: none;
- cursor: not-allowed;
- }
-
- .open > .dropdown-menu {
- display: block;
- }
-
- .open > a {
- outline: 0;
- }
-
- .dropdown-menu-right {
- left: auto;
- right: 0;
- }
-
- .dropdown-menu-left {
- left: 0;
- right: auto;
- }
-
- .dropdown-header {
- display: block;
- padding: 3px 20px;
- font-size: 14px;
- line-height: 1.5;
- color: #555555;
- white-space: nowrap;
- }
-
- .dropdown-backdrop {
- position: fixed;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- z-index: 990;
- }
-
- .pull-right > .dropdown-menu {
- right: 0;
- left: auto;
- }
-
- .dropup .caret,
- .navbar-fixed-bottom .dropdown .caret {
- border-top: 0;
- border-bottom: 4px dashed;
- border-bottom: 4px solid \9 ;
- content: "";
- }
-
- .dropup .dropdown-menu,
- .navbar-fixed-bottom .dropdown .dropdown-menu {
- top: auto;
- bottom: 100%;
- margin-bottom: 2px;
- }
-
- .dropdown-menu .divider {
- margin: 6px 0;
- }
-
- .dropdown-menu .media {
- min-width: 250px;
- }
-
- .dropdown-menu .media-left {
- -ms-flex-negative: 0;
- flex-shrink: 0;
- }
-
- .dropdown-menu .media-left img {
- vertical-align: top;
- }
-
- .dropdown-menu .media-body {
- white-space: normal;
- }
-
- .dropdown-menu .media-body a {
- white-space: nowrap;
- }
-
- .dropdown-menu--visibility {
- min-width: 240px;
- left: auto;
- right: -70px;
- padding: 0;
- }
-
- .dropdown.profile .header-nav-current-user {
- padding: 4px 10px 0;
- }
-
- .dropdown-header {
- padding: 7px 20px;
- background: white;
- }
-
- .scrollable-menu {
- height: calc(100vh - 156px);
- overflow-x: hidden;
- list-style-type: none;
- padding: 0;
- margin: 0;
- }
-
- .scrollable-menu li {
- margin: 2px 0;
- }
-
- .scrollable-menu p {
- margin-bottom: 0;
- }
-
- html:not(.js) .dropdown:focus .dropdown-menu,
- html:not(.js) .dropdown:hover .dropdown-menu,
- html:not(.js) .comment__actions:hover .dropdown-menu,
- html:not(.js) .comment__actions:hover .dropdown-menu,
- html:not(.js) .dropdown-menu:hover {
- display: block;
- }
-
- html:not(.js) .dropdown {
- cursor: pointer;
- }
-
- html:not(.js) .dropdown:focus {
- outline: none;
- }
-
- html:not(.js) .dropdown .dropdown-toggle {
- pointer-events: none;
- z-index: -1;
- }
-
- /* IE11 */
-
- @media (min-width: 600px) {
- .dropdown-menu .divider.mobile {
- display: none;
- }
- .dropdown-menu li.mobile {
- display: none;
- }
- .dropdown-menu li > a,
- .dropdown-menu li > span {
- padding: 4px 10px 4px 15px;
- }
- .dropdown-menu .media-left {
- padding-right: 8px;
- }
- .dropdown-menu--visibility {
- right: 0;
- }
- .scrollable-menu {
- height: auto;
- max-height: 450px;
- }
- }
-
- @media (min-width: 600px) and (-ms-high-contrast: none) {
- *::-ms-backdrop, .dropdown-menu .media-body {
- padding-right: 17px;
- }
- }
-
- @media (min-width: 900px) {
- .navbar-right .dropdown-menu {
- right: 0;
- left: auto;
- }
- .navbar-right .dropdown-menu-left {
- left: 0;
- right: auto;
- }
- }
-
- @media (max-width: 599px) {
- .dropup.has-alert > a:before,
- .dropdown.has-alert > a:before {
- content: '';
- position: absolute;
- top: 11px;
- right: 7px;
- width: 12px;
- height: 12px;
- background-color: #777777;
- border-radius: 50%;
- }
- }