eskp-app/1.0: static/less/input-groups.less@c75d501c5601

     1 //

     2 // Input groups

     3 // --------------------------------------------------

     5 // Base styles

     6 // -------------------------

     7 .input-group {

     8   position: relative; // For dropdowns

     9   display: table;

    10   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

    12   // Undo padding and float of grid classes

    13   &[class*="col-"] {

    14     float: none;

    15     padding-left: 0;

    16     padding-right: 0;

    17   }

    19   .form-control {

    20     width: 100%;

    21     margin-bottom: 0;

    22   }

    23 }

    25 // Sizing options

    26 //

    27 // Remix the default form control sizing classes into new ones for easier

    28 // manipulation.

    30 .input-group-lg > .form-control,

    31 .input-group-lg > .input-group-addon,

    32 .input-group-lg > .input-group-btn > .btn { .input-lg(); }

    33 .input-group-sm > .form-control,

    34 .input-group-sm > .input-group-addon,

    35 .input-group-sm > .input-group-btn > .btn { .input-sm(); }

    38 // Display as table-cell

    39 // -------------------------

    40 .input-group-addon,

    41 .input-group-btn,

    42 .input-group .form-control {

    43   display: table-cell;

    45   &:not(:first-child):not(:last-child) {

    46     border-radius: 0;

    47   }

    48 }

    49 // Addon and addon wrapper for buttons

    50 .input-group-addon,

    51 .input-group-btn {

    52   width: 1%;

    53   white-space: nowrap;

    54   vertical-align: middle; // Match the inputs

    55 }

    57 // Text input groups

    58 // -------------------------

    59 .input-group-addon {

    60   padding: @padding-base-vertical @padding-base-horizontal;

    61   font-size: @font-size-base;

    62   font-weight: normal;

    63   line-height: 1;

    64   color: @input-color;

    65   text-align: center;

    66   background-color: @input-group-addon-bg;

    67   border: 1px solid @input-group-addon-border-color;

    68   border-radius: @border-radius-base;

    70   // Sizing

    71   &.input-sm {

    72     padding: @padding-small-vertical @padding-small-horizontal;

    73     font-size: @font-size-small;

    74     border-radius: @border-radius-small;

    75   }

    76   &.input-lg {

    77     padding: @padding-large-vertical @padding-large-horizontal;

    78     font-size: @font-size-large;

    79     border-radius: @border-radius-large;

    80   }

    82   // Nuke default margins from checkboxes and radios to vertically center within.

    83   input[type="radio"],

    84   input[type="checkbox"] {

    85     margin-top: 0;

    86   }

    87 }

    89 // Reset rounded corners

    90 .input-group .form-control:first-child,

    91 .input-group-addon:first-child,

    92 .input-group-btn:first-child > .btn,

    93 .input-group-btn:first-child > .dropdown-toggle,

    94 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {

    95   .border-right-radius(0);

    96 }

    97 .input-group-addon:first-child {

    98   border-right: 0;

    99 }

   100 .input-group .form-control:last-child,

   101 .input-group-addon:last-child,

   102 .input-group-btn:last-child > .btn,

   103 .input-group-btn:last-child > .dropdown-toggle,

   104 .input-group-btn:first-child > .btn:not(:first-child) {

   105   .border-left-radius(0);

   106 }

   107 .input-group-addon:last-child {

   108   border-left: 0;

   109 }

   111 // Button input groups

   112 // -------------------------

   113 .input-group-btn {

   114   position: relative;

   115   white-space: nowrap;

   117   // Negative margin to only have a 1px border between the two

   118   &:first-child > .btn {

   119     margin-right: -1px;

   120   }

   121   &:last-child > .btn {

   122     margin-left: -1px;

   123   }

   124 }

   125 .input-group-btn > .btn {

   126   position: relative;

   127   // Jankily prevent input button groups from wrapping

   128   + .btn {

   129     margin-left: -4px;

   130   }

   131   // Bring the "active" button to the front

   132   &:hover,

   133   &:active {

   134     z-index: 2;

   135   }

   136 }

author	stetrabby <info@trabucchi.de>
	Sat, 18 Jan 2014 11:29:01 +0100
changeset 108	c75d501c5601
parent 53	3416f82943ea
permissions	-rwxr-xr-x