GroupList.scss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. $grouplist-max-width: dynamic(640px);
  2. $grouplist-padding: dynamic(15px 10px);
  3. $grouplist-background-color: dynamic(#fff);
  4. $grouplist-border-color: dynamic($grouplist-background-color);
  5. $grouplist-border-width: dynamic(1px);
  6. $grouplist-border-style: dynamic(solid);
  7. $grouplist-item-height: dynamic(null);
  8. $grouplist-item-width: dynamic(150px);
  9. $grouplist-item-padding: dynamic(6px 10px);
  10. $grouplist-item-font-family: dynamic($font-family);
  11. $grouplist-item-font-size: dynamic($font-size);
  12. $grouplist-item-font-weight: dynamic(normal);
  13. $grouplist-item-text-color: dynamic($color);
  14. $grouplist-item-border-width: dynamic(1px);
  15. $grouplist-item-border-style: dynamic(solid);
  16. $grouplist-item-border-color: dynamic($grouplist-background-color);
  17. $grouplist-item-over-text-color: dynamic($base-color);
  18. $grouplist-item-over-border-color: dynamic(transparent);
  19. $grouplist-item-over-background-color: dynamic(#e6f7ff);
  20. $grouplist-item-selected-text-color: dynamic(#fff);
  21. $grouplist-item-selected-border-color: dynamic($base-color);
  22. $grouplist-item-selected-background-color: dynamic($base-color);
  23. .#{$prefix}grouplist {
  24. padding: $grouplist-padding;
  25. max-width: $grouplist-max-width;
  26. border-width: $grouplist-border-width;
  27. border-style: $grouplist-border-style;
  28. border-color: $grouplist-border-color;
  29. background: $grouplist-background-color;
  30. .#{$prefix}grouplist-innerCt {
  31. display: inline;
  32. >.#{$prefix}grouplist-header:first-child {
  33. margin-top: 0;
  34. }
  35. }
  36. }
  37. .#{$prefix}grouplist-header {
  38. border-left: 5px solid $base-color;
  39. padding-left: 8px;
  40. margin: 10px 0;
  41. line-height: 15px;
  42. font-weight: bold;
  43. }
  44. .#{$prefix}grouplist-item {
  45. display: inline-block;
  46. padding: $grouplist-item-padding;
  47. font: $grouplist-item-font-weight $grouplist-item-font-size $grouplist-item-font-family;
  48. @if not is-null($grouplist-item-height) {
  49. line-height: $grouplist-item-height - vertical($grouplist-item-border-width) - vertical($grouplist-item-padding);
  50. }
  51. vertical-align: top;
  52. width: $grouplist-item-width;
  53. cursor: pointer;
  54. cursor: hand;
  55. position: relative; /*allow hover in IE on empty items*/
  56. border-width: $grouplist-item-border-width;
  57. border-style: $grouplist-item-border-style;
  58. border-color: $grouplist-item-border-color;
  59. color: $grouplist-item-text-color;
  60. &.#{$prefix}view-item-focused {
  61. outline: none;
  62. @if $grouplist-item-selected-text-color != $grouplist-item-text-color {
  63. color: $grouplist-item-selected-text-color;
  64. }
  65. background: $grouplist-item-selected-background-color;
  66. border-color: $grouplist-item-selected-border-color;
  67. }
  68. }
  69. .#{$prefix}grouplist-selected {
  70. @if $grouplist-item-selected-text-color != $grouplist-item-text-color {
  71. color: $grouplist-item-selected-text-color;
  72. }
  73. background: $grouplist-item-selected-background-color;
  74. border-color: $grouplist-item-selected-border-color;
  75. }
  76. .#{$prefix}grouplist-item-over {
  77. @if $grouplist-item-over-text-color != $grouplist-item-text-color or
  78. $grouplist-item-over-text-color != $grouplist-item-selected-text-color {
  79. color: $grouplist-item-over-text-color;
  80. }
  81. background: $grouplist-item-over-background-color;
  82. border-color: $grouplist-item-over-border-color;
  83. }
  84. .#{$prefix}grouplist-floating {
  85. border-top-width: 0;
  86. }
  87. .#{$prefix}grouplist-above {
  88. border-top-width: 1px;
  89. border-bottom-width: 1px;
  90. }