_list-group.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /* ===============================================================================================
  2. File Name: list-group.scss
  3. Description: Contain list item, list group related extended SCSS.
  4. ----------------------------------------------------------------------------------------------
  5. Item Name: Vuexy - Vuejs, React, Angular, HTML & Laravel Admin Dashboard Template
  6. Author: PIXINVENT
  7. Author URL: http://www.themeforest.net/user/pixinvent
  8. ================================================================================================*/
  9. // Inline list style with pipeline separator
  10. ul.list-inline {
  11. li {
  12. display: inline-block;
  13. }
  14. // used in search page
  15. &.list-inline-pipe {
  16. > li + li:before {
  17. content: ' | ';
  18. padding-right: 2px;
  19. }
  20. }
  21. }
  22. // bootstrap list group
  23. .list-group-item {
  24. line-height: 1.5;
  25. i,
  26. svg {
  27. position: relative;
  28. }
  29. // &:not(.active):focus:active {
  30. // color: inherit;
  31. // }
  32. }
  33. .list-group {
  34. .list-group-item-action {
  35. &.active,
  36. &:active {
  37. background-color: $primary;
  38. color: $white;
  39. h1,
  40. h2,
  41. h3,
  42. h4,
  43. h5,
  44. h6 {
  45. color: $white;
  46. }
  47. &:hover,
  48. &:focus {
  49. color: $white;
  50. background-color: $primary;
  51. }
  52. small {
  53. color: $text-muted !important;
  54. }
  55. }
  56. &:hover {
  57. background-color: $body-bg;
  58. }
  59. &:focus {
  60. background-color: $body-bg;
  61. outline: 0;
  62. }
  63. }
  64. // List group with circle for pages like knowledge base
  65. &.list-group-circle {
  66. border: none;
  67. .list-group-item {
  68. border: none;
  69. position: relative;
  70. padding-left: 1.5rem;
  71. &:after {
  72. content: ' ';
  73. background-image: url(str-replace(str-replace($circle, 'currentColor', $body-color), '#', '%23'));
  74. background-repeat: no-repeat;
  75. background-position: center;
  76. color: $body-color;
  77. background-size: 10px;
  78. position: absolute;
  79. height: 10px;
  80. width: 10px;
  81. top: 1.15rem;
  82. left: 0;
  83. }
  84. &:hover {
  85. background-color: transparent;
  86. }
  87. }
  88. }
  89. }
  90. // for drag and drop border radius on selected
  91. .list-group-item.gu-mirror {
  92. border-radius: 0;
  93. }