You are here

dropdown.css in Open Social 8.5

.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: 160px;
  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 {
  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;
}

@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: 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
  1. .caret {
  2. display: inline-block;
  3. width: 0;
  4. height: 0;
  5. margin-left: 2px;
  6. vertical-align: middle;
  7. border-top: 4px dashed;
  8. border-top: 4px solid \9 ;
  9. border-right: 4px solid transparent;
  10. border-left: 4px solid transparent;
  11. }
  12. .dropup,
  13. .dropdown {
  14. position: relative;
  15. }
  16. .dropdown-toggle:focus {
  17. outline: 0;
  18. }
  19. .dropdown-menu {
  20. position: absolute;
  21. top: 100%;
  22. left: 0;
  23. z-index: 1000;
  24. display: none;
  25. float: left;
  26. min-width: 160px;
  27. max-width: 500px;
  28. padding: 5px 0;
  29. margin: 2px 0 0;
  30. list-style: none;
  31. font-size: 0.875rem;
  32. text-align: left;
  33. background-color: #fff;
  34. -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
  35. box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
  36. background-clip: padding-box;
  37. }
  38. .dropdown-menu.pull-right {
  39. right: 0;
  40. left: auto;
  41. }
  42. .dropdown-menu .divider {
  43. height: 1px;
  44. margin: 11px 0;
  45. overflow: hidden;
  46. background-color: #e5e5e5;
  47. }
  48. .dropdown-menu li .badge {
  49. margin: 0;
  50. }
  51. .dropdown-menu li > a, .dropdown-menu li > span {
  52. padding: 8px 10px;
  53. display: block;
  54. clear: both;
  55. line-height: 1.5;
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. white-space: nowrap;
  59. color: #555555;
  60. }
  61. .dropdown-menu li > a:hover {
  62. background-color: #f3f3f3;
  63. }
  64. .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  65. text-decoration: none;
  66. }
  67. .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  68. text-decoration: none;
  69. outline: 0;
  70. }
  71. .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus, .dropdown-menu > .disabled > span:hover, .dropdown-menu > .disabled > span:focus {
  72. text-decoration: none;
  73. background-color: transparent;
  74. background-image: none;
  75. cursor: not-allowed;
  76. }
  77. .open > .dropdown-menu {
  78. display: block;
  79. }
  80. .open > a {
  81. outline: 0;
  82. }
  83. .dropdown-menu-right {
  84. left: auto;
  85. right: 0;
  86. }
  87. .dropdown-menu-left {
  88. left: 0;
  89. right: auto;
  90. }
  91. .dropdown-header {
  92. display: block;
  93. padding: 3px 20px;
  94. font-size: 14px;
  95. line-height: 1.5;
  96. color: #555555;
  97. white-space: nowrap;
  98. }
  99. .dropdown-backdrop {
  100. position: fixed;
  101. left: 0;
  102. right: 0;
  103. bottom: 0;
  104. top: 0;
  105. z-index: 990;
  106. }
  107. .pull-right > .dropdown-menu {
  108. right: 0;
  109. left: auto;
  110. }
  111. .dropup .caret,
  112. .navbar-fixed-bottom .dropdown .caret {
  113. border-top: 0;
  114. border-bottom: 4px dashed;
  115. border-bottom: 4px solid \9 ;
  116. content: "";
  117. }
  118. .dropup .dropdown-menu,
  119. .navbar-fixed-bottom .dropdown .dropdown-menu {
  120. top: auto;
  121. bottom: 100%;
  122. margin-bottom: 2px;
  123. }
  124. .dropdown-menu .divider {
  125. margin: 6px 0;
  126. }
  127. .dropdown-menu .media {
  128. min-width: 250px;
  129. }
  130. .dropdown-menu .media-left {
  131. -ms-flex-negative: 0;
  132. flex-shrink: 0;
  133. }
  134. .dropdown-menu .media-left img {
  135. vertical-align: top;
  136. }
  137. .dropdown-menu .media-body {
  138. white-space: normal;
  139. }
  140. .dropdown-menu .media-body a {
  141. white-space: nowrap;
  142. }
  143. .dropdown-menu--visibility {
  144. min-width: 240px;
  145. left: auto;
  146. right: -70px;
  147. padding: 0;
  148. }
  149. .dropdown.profile .header-nav-current-user {
  150. padding: 4px 10px 0;
  151. }
  152. .dropdown-header {
  153. padding: 7px 20px;
  154. background: white;
  155. }
  156. .scrollable-menu {
  157. height: calc(100vh - 156px);
  158. overflow-x: hidden;
  159. list-style-type: none;
  160. padding: 0;
  161. margin: 0;
  162. }
  163. .scrollable-menu li {
  164. margin: 2px 0;
  165. }
  166. .scrollable-menu p {
  167. margin-bottom: 0;
  168. }
  169. @media (min-width: 600px) {
  170. .dropdown-menu .divider.mobile {
  171. display: none;
  172. }
  173. .dropdown-menu li.mobile {
  174. display: none;
  175. }
  176. .dropdown-menu li > a, .dropdown-menu li > span {
  177. padding: 4px 10px 4px 15px;
  178. }
  179. .dropdown-menu .media-left {
  180. padding-right: 8px;
  181. }
  182. .dropdown-menu--visibility {
  183. right: 0;
  184. }
  185. .scrollable-menu {
  186. height: auto;
  187. max-height: 450px;
  188. }
  189. }
  190. @media (min-width: 900px) {
  191. .navbar-right .dropdown-menu {
  192. right: 0;
  193. left: auto;
  194. }
  195. .navbar-right .dropdown-menu-left {
  196. left: 0;
  197. right: auto;
  198. }
  199. }
  200. @media (max-width: 599px) {
  201. .dropup.has-alert > a:before,
  202. .dropdown.has-alert > a:before {
  203. content: '';
  204. position: absolute;
  205. top: 11px;
  206. right: 7px;
  207. width: 12px;
  208. height: 12px;
  209. background-color: #777777;
  210. border-radius: 50%;
  211. }
  212. }