ctf-server

button-groups.less

(5709B)

 //
 // Button groups
 // --------------------------------------------------
 
 
 // Make the div behave like a button
 .btn-group {
   position: relative;
   display: inline-block;
   .ie7-inline-block();
   font-size: 0; // remove as part 1 of font-size inline-block hack
   vertical-align: middle; // match .btn alignment given font-size hack above
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
   .ie7-restore-left-whitespace();
 }
 
 // Space out series of button groups
 .btn-group + .btn-group {
   margin-left: 5px;
 }
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   font-size: 0; // Hack to remove whitespace that results from using inline-block
   margin-top: @baseLineHeight / 2;
   margin-bottom: @baseLineHeight / 2;
   > .btn + .btn,
   > .btn-group + .btn,
   > .btn + .btn-group {
     margin-left: 5px;
   }
 }
 
 // Float them, remove border radius, then re-add to first and last elements
 .btn-group > .btn {
   position: relative;
   .border-radius(0);
 }
 .btn-group > .btn + .btn {
   margin-left: -1px;
 }
 .btn-group > .btn,
 .btn-group > .dropdown-menu,
 .btn-group > .popover {
   font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
 }
 
 // Reset fonts for other sizes
 .btn-group > .btn-mini {
   font-size: @fontSizeMini;
 }
 .btn-group > .btn-small {
   font-size: @fontSizeSmall;
 }
 .btn-group > .btn-large {
   font-size: @fontSizeLarge;
 }
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
   .border-top-left-radius(@baseBorderRadius);
   .border-bottom-left-radius(@baseBorderRadius);
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child,
 .btn-group > .dropdown-toggle {
   .border-top-right-radius(@baseBorderRadius);
   .border-bottom-right-radius(@baseBorderRadius);
 }
 // Reset corners for large buttons
 .btn-group > .btn.large:first-child {
   margin-left: 0;
   .border-top-left-radius(@borderRadiusLarge);
   .border-bottom-left-radius(@borderRadiusLarge);
 }
 .btn-group > .btn.large:last-child,
 .btn-group > .large.dropdown-toggle {
   .border-top-right-radius(@borderRadiusLarge);
   .border-bottom-right-radius(@borderRadiusLarge);
 }
 
 // On hover/focus/active, bring the proper btn to front
 .btn-group > .btn:hover,
 .btn-group > .btn:focus,
 .btn-group > .btn:active,
 .btn-group > .btn.active {
   z-index: 2;
 }
 
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
 }
 
 
 
 // Split button dropdowns
 // ----------------------
 
 // Give the line between buttons some depth
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
   *padding-top: 5px;
   *padding-bottom: 5px;
 }
 .btn-group > .btn-mini + .dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
   *padding-top: 2px;
   *padding-bottom: 2px;
 }
 .btn-group > .btn-small + .dropdown-toggle {
   *padding-top: 5px;
   *padding-bottom: 4px;
 }
 .btn-group > .btn-large + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
   *padding-top: 7px;
   *padding-bottom: 7px;
 }
 
 .btn-group.open {
 
   // The clickable button for toggling the menu
   // Remove the gradient and set the same inset shadow as the :active state
   .dropdown-toggle {
     background-image: none;
     .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
   }
 
   // Keep the hover's background when dropdown is open
   .btn.dropdown-toggle {
     background-color: @btnBackgroundHighlight;
   }
   .btn-primary.dropdown-toggle {
     background-color: @btnPrimaryBackgroundHighlight;
   }
   .btn-warning.dropdown-toggle {
     background-color: @btnWarningBackgroundHighlight;
   }
   .btn-danger.dropdown-toggle {
     background-color: @btnDangerBackgroundHighlight;
   }
   .btn-success.dropdown-toggle {
     background-color: @btnSuccessBackgroundHighlight;
   }
   .btn-info.dropdown-toggle {
     background-color: @btnInfoBackgroundHighlight;
   }
   .btn-inverse.dropdown-toggle {
     background-color: @btnInverseBackgroundHighlight;
   }
 }
 
 
 // Reposition the caret
 .btn .caret {
   margin-top: 8px;
   margin-left: 0;
 }
 // Carets in other button sizes
 .btn-large .caret {
   margin-top: 6px;
 }
 .btn-large .caret {
   border-left-width:  5px;
   border-right-width: 5px;
   border-top-width:   5px;
 }
 .btn-mini .caret,
 .btn-small .caret {
   margin-top: 8px;
 }
 // Upside down carets for .dropup
 .dropup .btn-large .caret {
   border-bottom-width: 5px;
 }
 
 
 
 // Account for other colors
 .btn-primary,
 .btn-warning,
 .btn-danger,
 .btn-info,
 .btn-success,
 .btn-inverse {
   .caret {
     border-top-color: @white;
     border-bottom-color: @white;
   }
 }
 
 
 
 // Vertical button groups
 // ----------------------
 
 .btn-group-vertical {
   display: inline-block; // makes buttons only take up the width they need
   .ie7-inline-block();
 }
 .btn-group-vertical > .btn {
   display: block;
   float: none;
   max-width: 100%;
   .border-radius(0);
 }
 .btn-group-vertical > .btn + .btn {
   margin-left: 0;
   margin-top: -1px;
 }
 .btn-group-vertical > .btn:first-child {
   .border-radius(@baseBorderRadius @baseBorderRadius 0 0);
 }
 .btn-group-vertical > .btn:last-child {
   .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
 }
 .btn-group-vertical > .btn-large:first-child {
   .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
 }
 .btn-group-vertical > .btn-large:last-child {
   .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
 }