views.css

Same filename in this branch
  1. 9 core/themes/olivero/css/layout/views.css
Same filename in other branches
  1. 8.9.x core/themes/bartik/css/components/views.css
  2. 10 core/themes/olivero/css/layout/views.css
  3. 11.x core/themes/olivero/css/layout/views.css

Styling for Views in Bartik.

File

core/themes/bartik/css/components/views.css

View source
  1. /**
  2. * @file
  3. * Styling for Views in Bartik.
  4. */
  5. /* Tab styles */
  6. .views-displays .tabs .open > a {
  7. border-radius: 7px 7px 0 0;
  8. }
  9. .views-displays .tabs .open > a:hover,
  10. .views-displays .tabs .open > a:focus {
  11. color: #0071b3;
  12. }
  13. .views-displays .secondary .form-submit {
  14. font-size: 0.846em;
  15. }
  16. /* Tabs action list styles */
  17. .views-displays .tabs .action-list {
  18. padding: 0;
  19. }
  20. /* Contextual filter options styles */
  21. .views-filterable-options .filterable-option:nth-of-type(even) .form-type-checkbox {
  22. background-color: #f9f9f9;
  23. }
  24. /* Views action dropbutton styles */
  25. .views-ui-display-tab-actions .dropbutton .form-submit {
  26. color: #0071b3;
  27. }
  28. .views-ui-display-tab-actions .dropbutton .form-submit:hover,
  29. .views-ui-display-tab-actions .dropbutton .form-submit:focus {
  30. color: #018fe2;
  31. }
  32. /**
  33. * Responsive grids.
  34. */
  35. .views-view-grid .views-col {
  36. min-width: 100%;
  37. }
  38. @media all and (min-width: 640px) {
  39. .views-view-grid.vertical {
  40. margin: 0 -15px;
  41. }
  42. .views-view-grid .views-col {
  43. float: left;
  44. box-sizing: border-box;
  45. min-width: 0;
  46. padding: 0 15px;
  47. }
  48. .views-view-grid h2 {
  49. margin-top: 0;
  50. }
  51. .views-view-grid .node--view-mode-teaser {
  52. margin: 0;
  53. border-bottom: 0;
  54. }
  55. .views-view-grid .node--view-mode-teaser .node__title {
  56. padding-top: 0;
  57. }
  58. /* Horizontal grids. */
  59. .views-view-grid.horizontal .views-row {
  60. margin: 0 0 15px;
  61. padding: 15px 0;
  62. border-bottom: 1px solid #d3d7d9;
  63. }
  64. .views-view-grid.horizontal .views-col:first-child {
  65. padding-left: 0;
  66. }
  67. .views-view-grid.horizontal .views-col:last-child {
  68. padding-left: 0;
  69. }
  70. /* Vertical grids */
  71. .views-view-grid.vertical .views-col {
  72. border-right: 1px solid #d3d7d9;
  73. }
  74. .views-view-grid.vertical .views-col:last-child {
  75. border-right: 0;
  76. }
  77. .views-view-grid.vertical .views-row {
  78. border-bottom: 0 none;
  79. }
  80. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.