You are here

media.view.css in D7 Media 8

.view-content, .entities-list{
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}
.grid-item:hover {
    border: 2px solid #37802f !important;
    cursor : pointer;
}

.grid-item.checked {
    border: 2px solid #37802f !important;
    background: url("../images/checkmark.svg") no-repeat center center !important;
}
.grid-item img, .grid-item-library img {
    vertical-align: bottom;
}

.grid-item img::selection , .grid-item-library img::selection{
    background: transparent;
}

.views-field-entity-browser-select{
    display: none;
}

.grid-item-library, .grid-item, .item-container{
    display: inline-block;
    background: #fff;
    padding: 1.5em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    border: 1px solid #ddd;
    text-align:center;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
@media only screen and (min-width: 700px) {
    .view-content, .entities-list{
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 900px) {
    .view-content, .entities-list{
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 1100px) {
    .view-content, .entities-list{
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
#edit-actions{
    text-align:center;
}

File

css/media.view.css
View source
  1. .view-content, .entities-list{
  2. margin: 1.5em 0;
  3. padding: 0;
  4. -moz-column-gap: 1.5em;
  5. -webkit-column-gap: 1.5em;
  6. column-gap: 1.5em;
  7. }
  8. .grid-item:hover {
  9. border: 2px solid #37802f !important;
  10. cursor : pointer;
  11. }
  12. .grid-item.checked {
  13. border: 2px solid #37802f !important;
  14. background: url("../images/checkmark.svg") no-repeat center center !important;
  15. }
  16. .grid-item img, .grid-item-library img {
  17. vertical-align: bottom;
  18. }
  19. .grid-item img::selection , .grid-item-library img::selection{
  20. background: transparent;
  21. }
  22. .views-field-entity-browser-select{
  23. display: none;
  24. }
  25. .grid-item-library, .grid-item, .item-container{
  26. display: inline-block;
  27. background: #fff;
  28. padding: 1.5em;
  29. margin: 0 0 1.5em;
  30. width: 100%;
  31. box-sizing: border-box;
  32. -moz-box-sizing: border-box;
  33. -webkit-box-sizing: border-box;
  34. box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
  35. border-radius: 3px;
  36. border: 1px solid #ddd;
  37. text-align:center;
  38. -moz-border-radius: 3px;
  39. -webkit-border-radius: 3px;
  40. }
  41. @media only screen and (min-width: 700px) {
  42. .view-content, .entities-list{
  43. -moz-column-count: 1;
  44. -webkit-column-count: 1;
  45. column-count: 1;
  46. }
  47. }
  48. @media only screen and (min-width: 900px) {
  49. .view-content, .entities-list{
  50. -moz-column-count: 2;
  51. -webkit-column-count: 2;
  52. column-count: 2;
  53. }
  54. }
  55. @media only screen and (min-width: 1100px) {
  56. .view-content, .entities-list{
  57. -moz-column-count: 4;
  58. -webkit-column-count: 4;
  59. column-count: 4;
  60. }
  61. }
  62. #edit-actions{
  63. text-align:center;
  64. }