You are here

list.css in Open Social 8.5

.list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  min-width: 0;
}

.list-item__avatar {
  width: 24px;
  height: 24px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 24px;
          flex: 0 0 24px;
  margin-right: 10px;
  border-radius: 50%;
  margin-top: 2px;
}

.list-item__avatar--medium {
  width: 44px;
  height: 44px;
  -ms-flex-preferred-size: 44px;
      flex-basis: 44px;
}

.list-item--withlabel {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.list-item__label {
  margin-right: 20px;
  font-weight: 500;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.list-item__text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
  margin: 0;
  line-height: 1.25;
}

.list-item__text p {
  margin-bottom: 0;
}

.list-item--visibility {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: -1px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.list-item--visibility .form-group label {
  font-weight: 500;
  cursor: pointer;
}

.list-item--visibility:hover {
  background-color: #e6e6e6;
  cursor: pointer;
}

.list-item--visibility .icon-small {
  fill: #4d4d4d;
  margin-right: .25em;
}

.list-item--link .list-item__avatar {
  margin-left: 0.625rem;
}

.list-item--link:hover, .list-item--link:focus {
  background-color: rgba(0, 0, 0, 0.12);
}

.item-list__comma-list,
.item-list__comma-list li {
  display: inline;
}

.item-list__comma-list {
  margin: 0;
  padding: 0;
}

.item-list__comma-list li:after {
  content: ", ";
}

.item-list__comma-list li:last-child:after {
  content: "";
}

@media (min-width: 600px) {
  .list-item__label {
    -ms-flex-preferred-size: 180px;
        flex-basis: 180px;
  }
}

File

themes/socialbase/assets/css/list.css
View source
  1. .list-item {
  2. display: -webkit-box;
  3. display: -ms-flexbox;
  4. display: flex;
  5. -webkit-box-pack: center;
  6. -ms-flex-pack: center;
  7. justify-content: center;
  8. width: 100%;
  9. padding-top: 0.625rem;
  10. padding-bottom: 0.625rem;
  11. min-width: 0;
  12. }
  13. .list-item__avatar {
  14. width: 24px;
  15. height: 24px;
  16. -webkit-box-flex: 0;
  17. -ms-flex: 0 0 24px;
  18. flex: 0 0 24px;
  19. margin-right: 10px;
  20. border-radius: 50%;
  21. margin-top: 2px;
  22. }
  23. .list-item__avatar--medium {
  24. width: 44px;
  25. height: 44px;
  26. -ms-flex-preferred-size: 44px;
  27. flex-basis: 44px;
  28. }
  29. .list-item--withlabel {
  30. -ms-flex-wrap: wrap;
  31. flex-wrap: wrap;
  32. -webkit-box-pack: start;
  33. -ms-flex-pack: start;
  34. justify-content: flex-start;
  35. }
  36. .list-item__label {
  37. margin-right: 20px;
  38. font-weight: 500;
  39. -ms-flex-preferred-size: 100%;
  40. flex-basis: 100%;
  41. -ms-flex-item-align: start;
  42. align-self: flex-start;
  43. }
  44. .list-item__text {
  45. -webkit-box-flex: 1;
  46. -ms-flex-positive: 1;
  47. flex-grow: 1;
  48. max-width: 100%;
  49. margin: 0;
  50. line-height: 1.25;
  51. }
  52. .list-item__text p {
  53. margin-bottom: 0;
  54. }
  55. .list-item--visibility {
  56. padding-left: 1rem;
  57. padding-right: 1rem;
  58. margin-bottom: -1px;
  59. -webkit-box-pack: start;
  60. -ms-flex-pack: start;
  61. justify-content: flex-start;
  62. }
  63. .list-item--visibility .form-group label {
  64. font-weight: 500;
  65. cursor: pointer;
  66. }
  67. .list-item--visibility:hover {
  68. background-color: #e6e6e6;
  69. cursor: pointer;
  70. }
  71. .list-item--visibility .icon-small {
  72. fill: #4d4d4d;
  73. margin-right: .25em;
  74. }
  75. .list-item--link .list-item__avatar {
  76. margin-left: 0.625rem;
  77. }
  78. .list-item--link:hover, .list-item--link:focus {
  79. background-color: rgba(0, 0, 0, 0.12);
  80. }
  81. .item-list__comma-list,
  82. .item-list__comma-list li {
  83. display: inline;
  84. }
  85. .item-list__comma-list {
  86. margin: 0;
  87. padding: 0;
  88. }
  89. .item-list__comma-list li:after {
  90. content: ", ";
  91. }
  92. .item-list__comma-list li:last-child:after {
  93. content: "";
  94. }
  95. @media (min-width: 600px) {
  96. .list-item__label {
  97. -ms-flex-preferred-size: 180px;
  98. flex-basis: 180px;
  99. }
  100. }