dev-test/css/dropdown-enhancement.css

   1 .dropdown-menu > li > label {
   2   display: block;
   3   padding: 3px 20px;
   4   clear: both;
   5   font-weight: normal;
   6   line-height: 1.42857143;
   7   color: #333333;
   8   white-space: nowrap;
   9 }
  10 .dropdown-menu > li > label:hover,
  11 .dropdown-menu > li > label:focus {
  12   text-decoration: none;
  13   color: #262626;
  14   background-color: #f5f5f5;
  15 }
  16 .dropdown-menu > li > input:checked ~ label,
  17 .dropdown-menu > li > input:checked ~ label:hover,
  18 .dropdown-menu > li > input:checked ~ label:focus,
  19 .dropdown-menu > .active > label,
  20 .dropdown-menu > .active > label:hover,
  21 .dropdown-menu > .active > label:focus {
  22   color: #ffffff;
  23   text-decoration: none;
  24   outline: 0;
  25   background-color: #428bca;
  26 }
  27 .dropdown-menu > li > input[disabled] ~ label,
  28 .dropdown-menu > li > input[disabled] ~ label:hover,
  29 .dropdown-menu > li > input[disabled] ~ label:focus,
  30 .dropdown-menu > .disabled > label,
  31 .dropdown-menu > .disabled > label:hover,
  32 .dropdown-menu > .disabled > label:focus {
  33   color: #999999;
  34 }
  35 .dropdown-menu > li > input[disabled] ~ label:hover,
  36 .dropdown-menu > li > input[disabled] ~ label:focus,
  37 .dropdown-menu > .disabled > label:hover,
  38 .dropdown-menu > .disabled > label:focus {
  39   text-decoration: none;
  40   background-color: transparent;
  41   background-image: none;
  42   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  43   cursor: not-allowed;
  44 }
  45 .dropdown-menu > li > label {
  46   margin-bottom: 0;
  47   cursor: pointer;
  48 }
  49 .dropdown-menu > li > input[type="radio"],
  50 .dropdown-menu > li > input[type="checkbox"] {
  51   display: none;
  52   position: absolute;
  53   top: -9999em;
  54   left: -9999em;
  55 }
  56 .dropdown-menu > li > label:focus,
  57 .dropdown-menu > li > input:focus ~ label {
  58   outline: thin dotted;
  59   outline: 5px auto -webkit-focus-ring-color;
  60   outline-offset: -2px;
  61 }
  62 .dropdown-menu.pull-right {
  63   right: 0;
  64   left: auto;
  65 }
  66 .dropdown-menu.pull-top {
  67   bottom: 100%;
  68   top: auto;
  69   margin: 0 0 2px;
  70   -webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
  71   box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
  72 }
  73 .dropdown-menu.pull-center {
  74   right: 50%;
  75   left: auto;
  76 }
  77 .dropdown-menu.pull-middle {
  78   right: 100%;
  79   margin: 0 2px 0 0;
  80   box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
  81   left: auto;
  82 }
  83 .dropdown-menu.pull-middle.pull-right {
  84   right: auto;
  85   left: 100%;
  86   margin: 0 0 0 2px;
  87   box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
  88 }
  89 .dropdown-menu.pull-middle.pull-center {
  90   right: 50%;
  91   margin: 0;
  92   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  93 }
  94 .dropdown-menu.bullet {
  95   margin-top: 8px;
  96 }
  97 .dropdown-menu.bullet:before {
  98   width: 0;
  99   height: 0;
 100   content: '';
 101   display: inline-block;
 102   position: absolute;
 103   border-color: transparent;
 104   border-style: solid;
 105   -webkit-transform: rotate(360deg);
 106   border-width: 0 7px 7px;
 107   border-bottom-color: #cccccc;
 108   border-bottom-color: rgba(0, 0, 0, 0.15);
 109   top: -7px;
 110   left: 9px;
 111 }
 112 .dropdown-menu.bullet:after {
 113   width: 0;
 114   height: 0;
 115   content: '';
 116   display: inline-block;
 117   position: absolute;
 118   border-color: transparent;
 119   border-style: solid;
 120   -webkit-transform: rotate(360deg);
 121   border-width: 0 6px 6px;
 122   border-bottom-color: #ffffff;
 123   top: -6px;
 124   left: 10px;
 125 }
 126 .dropdown-menu.bullet.pull-right:before {
 127   left: auto;
 128   right: 9px;
 129 }
 130 .dropdown-menu.bullet.pull-right:after {
 131   left: auto;
 132   right: 10px;
 133 }
 134 .dropdown-menu.bullet.pull-top {
 135   margin-top: 0;
 136   margin-bottom: 8px;
 137 }
 138 .dropdown-menu.bullet.pull-top:before {
 139   top: auto;
 140   bottom: -7px;
 141   border-bottom-width: 0;
 142   border-top-width: 7px;
 143   border-top-color: #cccccc;
 144   border-top-color: rgba(0, 0, 0, 0.15);
 145 }
 146 .dropdown-menu.bullet.pull-top:after {
 147   top: auto;
 148   bottom: -6px;
 149   border-bottom: none;
 150   border-top-width: 6px;
 151   border-top-color: #ffffff;
 152 }
 153 .dropdown-menu.bullet.pull-center:before {
 154   left: auto;
 155   right: 50%;
 156   margin-right: -7px;
 157 }
 158 .dropdown-menu.bullet.pull-center:after {
 159   left: auto;
 160   right: 50%;
 161   margin-right: -6px;
 162 }
 163 .dropdown-menu.bullet.pull-middle {
 164   margin-right: 8px;
 165 }
 166 .dropdown-menu.bullet.pull-middle:before {
 167   top: 50%;
 168   left: 100%;
 169   right: auto;
 170   margin-top: -7px;
 171   border-right-width: 0;
 172   border-bottom-color: transparent;
 173   border-top-width: 7px;
 174   border-left-color: #cccccc;
 175   border-left-color: rgba(0, 0, 0, 0.15);
 176 }
 177 .dropdown-menu.bullet.pull-middle:after {
 178   top: 50%;
 179   left: 100%;
 180   right: auto;
 181   margin-top: -6px;
 182   border-right-width: 0;
 183   border-bottom-color: transparent;
 184   border-top-width: 6px;
 185   border-left-color: #ffffff;
 186 }
 187 .dropdown-menu.bullet.pull-middle.pull-right {
 188   margin-right: 0;
 189   margin-left: 8px;
 190 }
 191 .dropdown-menu.bullet.pull-middle.pull-right:before {
 192   left: -7px;
 193   border-left-width: 0;
 194   border-right-width: 7px;
 195   border-right-color: #cccccc;
 196   border-right-color: rgba(0, 0, 0, 0.15);
 197 }
 198 .dropdown-menu.bullet.pull-middle.pull-right:after {
 199   left: -6px;
 200   border-left-width: 0;
 201   border-right-width: 6px;
 202   border-right-color: #ffffff;
 203 }
 204 .dropdown-menu.bullet.pull-middle.pull-center {
 205   margin-left: 0;
 206   margin-right: 0;
 207 }
 208 .dropdown-menu.bullet.pull-middle.pull-center:before {
 209   border: none;
 210   display: none;
 211 }
 212 .dropdown-menu.bullet.pull-middle.pull-center:after {
 213   border: none;
 214   display: none;
 215 }
 216 .dropdown-submenu {
 217   position: relative;
 218 }
 219 .dropdown-submenu > .dropdown-menu {
 220   top: 0;
 221   left: 100%;
 222   margin-top: -6px;
 223   margin-left: -1px;
 224   border-top-left-radius: 0;
 225 }
 226 .dropdown-submenu > a:before {
 227   display: block;
 228   float: right;
 229   width: 0;
 230   height: 0;
 231   content: "";
 232   margin-top: 6px;
 233   margin-right: -8px;
 234   border-width: 4px 0 4px 4px;
 235   border-style: solid;
 236   border-left-style: dashed;
 237   border-top-color: transparent;
 238   border-bottom-color: transparent;
 239 }
 240 @media (max-width: 767px) {
 241   .navbar-nav .dropdown-submenu > a:before {
 242     margin-top: 8px;
 243     border-color: inherit;
 244     border-style: solid;
 245     border-width: 4px 4px 0;
 246     border-left-color: transparent;
 247     border-right-color: transparent;
 248   }
 249   .navbar-nav .dropdown-submenu > a {
 250     padding-left: 40px;
 251   }
 252   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a,
 253   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > label {
 254     padding-left: 35px;
 255   }
 256   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a,
 257   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > label {
 258     padding-left: 45px;
 259   }
 260   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
 261   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
 262     padding-left: 55px;
 263   }
 264   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
 265   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
 266     padding-left: 65px;
 267   }
 268   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
 269   .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
 270     padding-left: 75px;
 271   }
 272 }
 273 .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a,
 274 .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover,
 275 .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus {
 276   background-color: #e7e7e7;
 277   color: #555555;
 278 }
 279 @media (max-width: 767px) {
 280   .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before {
 281     border-top-color: #555555;
 282   }
 283 }
 284 .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a,
 285 .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover,
 286 .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus {
 287   background-color: #080808;
 288   color: #ffffff;
 289 }
 290 @media (max-width: 767px) {
 291   .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before {
 292     border-top-color: #ffffff;
 293   }
 294 }