git.roojs.org Git - roojs1/blob - css/button-groups.css

   1 .btn-group,
   2 .btn-group-vertical {
   3   position: relative;
   4   display: inline-block;
   5   vertical-align: middle;
   6 }
   7 .btn-group > .btn,
   8 .btn-group-vertical > .btn {
   9   position: relative;
  10   float: left;
  11 }
  12 .btn-group > .btn:hover,
  13 .btn-group-vertical > .btn:hover,
  14 .btn-group > .btn:focus,
  15 .btn-group-vertical > .btn:focus,
  16 .btn-group > .btn:active,
  17 .btn-group-vertical > .btn:active,
  18 .btn-group > .btn.active,
  19 .btn-group-vertical > .btn.active {
  20   z-index: 2;
  21 }
  22 .btn-group .btn + .btn,
  23 .btn-group .btn + .btn-group,
  24 .btn-group .btn-group + .btn,
  25 .btn-group .btn-group + .btn-group {
  26   margin-left: -1px;
  27 }
  28 .btn-toolbar {
  29   margin-left: -5px;
  30 }
  31 .btn-toolbar .btn,
  32 .btn-toolbar .btn-group,
  33 .btn-toolbar .input-group {
  34   float: left;
  35 }
  36 .btn-toolbar > .btn,
  37 .btn-toolbar > .btn-group,
  38 .btn-toolbar > .input-group {
  39   margin-left: 5px;
  40 }
  41 .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  42   border-radius: 0;
  43 }
  44 .btn-group > .btn:first-child {
  45   margin-left: 0;
  46 }
  47 .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  48   border-bottom-right-radius: 0;
  49   border-top-right-radius: 0;
  50 }
  51 .btn-group > .btn:last-child:not(:first-child),
  52 .btn-group > .dropdown-toggle:not(:first-child) {
  53   border-bottom-left-radius: 0;
  54   border-top-left-radius: 0;
  55 }
  56 .btn-group > .btn-group {
  57   float: left;
  58 }
  59 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  60   border-radius: 0;
  61 }
  62 .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
  63 .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  64   border-bottom-right-radius: 0;
  65   border-top-right-radius: 0;
  66 }
  67 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
  68   border-bottom-left-radius: 0;
  69   border-top-left-radius: 0;
  70 }
  71 .btn-group .dropdown-toggle:active,
  72 .btn-group.open .dropdown-toggle {
  73   outline: 0;
  74 }
  75 .btn-group > .btn + .dropdown-toggle {
  76   padding-left: 8px;
  77   padding-right: 8px;
  78 }
  79 .btn-group > .btn-lg + .dropdown-toggle {
  80   padding-left: 12px;
  81   padding-right: 12px;
  82 }
  83 .btn-group.open .dropdown-toggle {
  84   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  85   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  86 }
  87 .btn-group.open .dropdown-toggle.btn-link {
  88   -webkit-box-shadow: none;
  89   box-shadow: none;
  90 }
  91 .btn .caret {
  92   margin-left: 0;
  93 }
  94 .btn-lg .caret {
  95   border-width: 5px 5px 0;
  96   border-bottom-width: 0;
  97 }
  98 .dropup .btn-lg .caret {
  99   border-width: 0 5px 5px;
 100 }
 101 .btn-group-vertical > .btn,
 102 .btn-group-vertical > .btn-group,
 103 .btn-group-vertical > .btn-group > .btn {
 104   display: block;
 105   float: none;
 106   width: 100%;
 107   max-width: 100%;
 108 }
 109 .btn-group-vertical > .btn-group > .btn {
 110   float: none;
 111 }
 112 .btn-group-vertical > .btn + .btn,
 113 .btn-group-vertical > .btn + .btn-group,
 114 .btn-group-vertical > .btn-group + .btn,
 115 .btn-group-vertical > .btn-group + .btn-group {
 116   margin-top: -1px;
 117   margin-left: 0;
 118 }
 119 .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
 120   border-radius: 0;
 121 }
 122 .btn-group-vertical > .btn:first-child:not(:last-child) {
 123   border-top-right-radius: 4px;
 124   border-top-left-radius: 4px;
 125   border-bottom-right-radius: 0;
 126   border-bottom-left-radius: 0;
 127 }
 128 .btn-group-vertical > .btn:last-child:not(:first-child) {
 129   border-top-right-radius: 0;
 130   border-top-left-radius: 0;
 131   border-bottom-right-radius: 4px;
 132   border-bottom-left-radius: 4px;
 133 }
 134 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
 135   border-radius: 0;
 136 }
 137 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
 138 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
 139   border-bottom-right-radius: 0;
 140   border-bottom-left-radius: 0;
 141 }
 142 .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
 143   border-top-right-radius: 0;
 144   border-top-left-radius: 0;
 145 }
 146 .btn-group-justified {
 147   display: table;
 148   width: 100%;
 149   table-layout: fixed;
 150   border-collapse: separate;
 151 }
 152 .btn-group-justified > .btn,
 153 .btn-group-justified > .btn-group {
 154   float: none;
 155   display: table-cell;
 156   width: 1%;
 157 }
 158 .btn-group-justified > .btn-group .btn {
 159   width: 100%;
 160 }
 161 .btn-group-justified > .btn-group .dropdown-menu {
 162   left: auto;
 163 }
 164 [data-toggle="buttons"] > .btn input[type="radio"],
 165 [data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
 166 [data-toggle="buttons"] > .btn input[type="checkbox"],
 167 [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
 168   position: absolute;
 169   clip: rect(0, 0, 0, 0);
 170   pointer-events: none;
 171 }