logo

searx

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

list-group.less (3113B)

    

  1. //

  2. // List groups

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

  4. 

  5. 

  6. // Base class

  7. //

  8. // Easily usable on <ul>, <ol>, or <div>.

  9. 

  10. .list-group {

  11.   // No need to set list-style: none; since .list-group-item is block level

  12.   margin-bottom: 20px;

  13.   padding-left: 0; // reset padding because ul and ol

  14. }

  15. 

  16. 

  17. // Individual list items

  18. //

  19. // Use on `li`s or `div`s within the `.list-group` parent.

  20. 

  21. .list-group-item {

  22.   position: relative;

  23.   display: block;

  24.   padding: 10px 15px;

  25.   // Place the border on the list items and negative margin up for better styling

  26.   margin-bottom: -1px;

  27.   background-color: @list-group-bg;

  28.   border: 1px solid @list-group-border;

  29. 

  30.   // Round the first and last items

  31.   &:first-child {

  32.     .border-top-radius(@list-group-border-radius);

  33.   }

  34.   &:last-child {

  35.     margin-bottom: 0;

  36.     .border-bottom-radius(@list-group-border-radius);

  37.   }

  38. 

  39.   // Align badges within list items

  40.   > .badge {

  41.     float: right;

  42.   }

  43.   > .badge + .badge {

  44.     margin-right: 5px;

  45.   }

  46. }

  47. 

  48. 

  49. // Linked list items

  50. //

  51. // Use anchor elements instead of `li`s or `div`s to create linked list items.

  52. // Includes an extra `.active` modifier class for showing selected items.

  53. 

  54. a.list-group-item {

  55.   color: @list-group-link-color;

  56. 

  57.   .list-group-item-heading {

  58.     color: @list-group-link-heading-color;

  59.   }

  60. 

  61.   // Hover state

  62.   &:hover,

  63.   &:focus {

  64.     text-decoration: none;

  65.     color: @list-group-link-hover-color;

  66.     background-color: @list-group-hover-bg;

  67.   }

  68. }

  69. 

  70. .list-group-item {

  71.   // Disabled state

  72.   &.disabled,

  73.   &.disabled:hover,

  74.   &.disabled:focus {

  75.     background-color: @list-group-disabled-bg;

  76.     color: @list-group-disabled-color;

  77. 

  78.     // Force color to inherit for custom content

  79.     .list-group-item-heading {

  80.       color: inherit;

  81.     }

  82.     .list-group-item-text {

  83.       color: @list-group-disabled-text-color;

  84.     }

  85.   }

  86. 

  87.   // Active class on item itself, not parent

  88.   &.active,

  89.   &.active:hover,

  90.   &.active:focus {

  91.     z-index: 2; // Place active items above their siblings for proper border styling

  92.     color: @list-group-active-color;

  93.     background-color: @list-group-active-bg;

  94.     border-color: @list-group-active-border;

  95. 

  96.     // Force color to inherit for custom content

  97.     .list-group-item-heading,

  98.     .list-group-item-heading > small,

  99.     .list-group-item-heading > .small {

  100.       color: inherit;

  101.     }

  102.     .list-group-item-text {

  103.       color: @list-group-active-text-color;

  104.     }

  105.   }

  106. }

  107. 

  108. 

  109. // Contextual variants

  110. //

  111. // Add modifier classes to change text and background color on individual items.

  112. // Organizationally, this must come after the `:hover` states.

  113. 

  114. .list-group-item-variant(success; @state-success-bg; @state-success-text);

  115. .list-group-item-variant(info; @state-info-bg; @state-info-text);

  116. .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);

  117. .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);

  118. 

  119. 

  120. // Custom content options

  121. //

  122. // Extra classes for creating well-formatted content within `.list-group-item`s.

  123. 

  124. .list-group-item-heading {

  125.   margin-top: 0;

  126.   margin-bottom: 5px;

  127. }

  128. .list-group-item-text {

  129.   margin-bottom: 0;

  130.   line-height: 1.3;

  131. }