logo

searx

My custom branche(s) on searx, a meta-search engine git clone https://hacktivis.me/git/searx.git

input-groups.less (4215B)

    

  1. //

  2. // Input groups

  3. // --------------------------------------------------

  4. 

  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

  11. 

  12.   // Undo padding and float of grid classes

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

  14.     float: none;

  15.     padding-left: 0;

  16.     padding-right: 0;

  17.   }

  18. 

  19.   .form-control {

  20.     // Ensure that the input is always above the *appended* addon button for

  21.     // proper border colors.

  22.     position: relative;

  23.     z-index: 2;

  24. 

  25.     // IE9 fubars the placeholder attribute in text inputs and the arrows on

  26.     // select elements in input groups. To fix it, we float the input. Details:

  27.     // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855

  28.     float: left;

  29. 

  30.     width: 100%;

  31.     margin-bottom: 0;

  32.   }

  33. }

  34. 

  35. // Sizing options

  36. //

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

  38. // manipulation.

  39. 

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

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

  42. .input-group-lg > .input-group-btn > .btn {

  43.   .input-lg();

  44. }

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

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

  47. .input-group-sm > .input-group-btn > .btn {

  48.   .input-sm();

  49. }

  50. 

  51. 

  52. // Display as table-cell

  53. // -------------------------

  54. .input-group-addon,

  55. .input-group-btn,

  56. .input-group .form-control {

  57.   display: table-cell;

  58. 

  59.   &:not(:first-child):not(:last-child) {

  60.     border-radius: 0;

  61.   }

  62. }

  63. // Addon and addon wrapper for buttons

  64. .input-group-addon,

  65. .input-group-btn {

  66.   width: 1%;

  67.   white-space: nowrap;

  68.   vertical-align: middle; // Match the inputs

  69. }

  70. 

  71. // Text input groups

  72. // -------------------------

  73. .input-group-addon {

  74.   padding: @padding-base-vertical @padding-base-horizontal;

  75.   font-size: @font-size-base;

  76.   font-weight: normal;

  77.   line-height: 1;

  78.   color: @input-color;

  79.   text-align: center;

  80.   background-color: @input-group-addon-bg;

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

  82.   border-radius: @border-radius-base;

  83. 

  84.   // Sizing

  85.   &.input-sm {

  86.     padding: @padding-small-vertical @padding-small-horizontal;

  87.     font-size: @font-size-small;

  88.     border-radius: @border-radius-small;

  89.   }

  90.   &.input-lg {

  91.     padding: @padding-large-vertical @padding-large-horizontal;

  92.     font-size: @font-size-large;

  93.     border-radius: @border-radius-large;

  94.   }

  95. 

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

  97.   input[type="radio"],

  98.   input[type="checkbox"] {

  99.     margin-top: 0;

  100.   }

  101. }

  102. 

  103. // Reset rounded corners

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

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

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

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

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

  109. .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),

  110. .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {

  111.   .border-right-radius(0);

  112. }

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

  114.   border-right: 0;

  115. }

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

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

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

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

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

  121. .input-group-btn:first-child > .btn:not(:first-child),

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

  123.   .border-left-radius(0);

  124. }

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

  126.   border-left: 0;

  127. }

  128. 

  129. // Button input groups

  130. // -------------------------

  131. .input-group-btn {

  132.   position: relative;

  133.   // Jankily prevent input button groups from wrapping with `white-space` and

  134.   // `font-size` in combination with `inline-block` on buttons.

  135.   font-size: 0;

  136.   white-space: nowrap;

  137. 

  138.   // Negative margin for spacing, position for bringing hovered/focused/actived

  139.   // element above the siblings.

  140.   > .btn {

  141.     position: relative;

  142.     + .btn {

  143.       margin-left: -1px;

  144.     }

  145.     // Bring the "active" button to the front

  146.     &:hover,

  147.     &:focus,

  148.     &:active {

  149.       z-index: 2;

  150.     }

  151.   }

  152. 

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

  154.   &:first-child {

  155.     > .btn,

  156.     > .btn-group {

  157.       margin-right: -1px;

  158.     }

  159.   }

  160.   &:last-child {

  161.     > .btn,

  162.     > .btn-group {

  163.       margin-left: -1px;

  164.     }

  165.   }

  166. }