You are here

Home » API reference » Views Accordion 6

views-accordion.css in Views Accordion 6

Same filename and directory in other branches
  1. 7 views-accordion.css
/*
 * @file
 * Style sheet for the views_accordion module
 * 
 * You can disable the loading of this file in your style options, just uncheck 'Use the module's default styling'
 *
 * .views-accordion-item wrappers get per-row classes like item-0, item-1 and so on
 *  style each row independently like this:
 * .views-accordion .item-1
*/

/* the whole accordion (only when js is enabled) */
.accordion-active {
 border: 1px solid #ddd;
 margin-bottom:1em;
}

/* all accordion sections */
.views-accordion-item {
}

/* the content hidden/shown within each section (only when js is enabled) */
.views-accordion-item .accordion-content {
  background-color: #fff;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.views-accordion-item .accordion-content p {
  margin: 0px; /* so that the animation doesn't jump */
}
/* the header the user clicks to open sections (only when js is enabled)*/
.accordion-header {
  cursor: pointer;
  color: #111;
  display: block; /* we dont know what html tag it will be, otherwise spans will display weirdly */
}
h3.accordion-header {
  margin-bottom:0;
  
}
.views-accordion-item .accordion-header,
h3.accordion-header {
  background-color:    #eee;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.accordion-item-even .accordion-header {
  background-color:    #ddd;
  border-color: #ccc;
}

/*
 * Don't use padding/margin top/bottom on .views-accordion-item, or the animation will jump for that ammount
 * so apply it to the header and the first divs inside the accordion-content
 */
.views-accordion-item .accordion-content div,
.views-accordion-item .accordion-header,
h3.accordion-header {
 padding: 0.5em 1em;
}
.views-accordion-item .accordion-content div div {
  padding: 0;
}

/* header mouse-over and section-opened states (only when js is enabled)*/
.views-accordion-item .accordion-header-hover,
h3.accordion-header-hover {
  border-color: #fff;
}
.views-accordion-item .accordion-header-active,
h3.accordion-header-active {
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

/* Buttons */
span.stop-accordion,
span.toggleAccordion {
  display: block;
  text-align: right;
}

File

views-accordion.css
View source 
  1. /*

  2.  * @file

  3.  * Style sheet for the views_accordion module

  4.  * 

  5.  * You can disable the loading of this file in your style options, just uncheck 'Use the module's default styling'

  6.  *

  7.  * .views-accordion-item wrappers get per-row classes like item-0, item-1 and so on

  8.  *  style each row independently like this:

  9.  * .views-accordion .item-1

  10. */

  11. 

  12. /* the whole accordion (only when js is enabled) */

  13. .accordion-active {

  14.  border: 1px solid #ddd;

  15.  margin-bottom:1em;

  16. }

  17. 

  18. /* all accordion sections */

  19. .views-accordion-item {

  20. }

  21. 

  22. /* the content hidden/shown within each section (only when js is enabled) */

  23. .views-accordion-item .accordion-content {

  24.   background-color: #fff;

  25.   color: #333;

  26.   border-bottom: 1px solid #ddd;

  27. }

  28. .views-accordion-item .accordion-content p {

  29.   margin: 0px; /* so that the animation doesn't jump */

  30. }

  31. /* the header the user clicks to open sections (only when js is enabled)*/

  32. .accordion-header {

  33.   cursor: pointer;

  34.   color: #111;

  35.   display: block; /* we dont know what html tag it will be, otherwise spans will display weirdly */

  36. }

  37. h3.accordion-header {

  38.   margin-bottom:0;

  39.   

  40. }

  41. .views-accordion-item .accordion-header,

  42. h3.accordion-header {

  43.   background-color:    #eee;

  44.   border-top: 1px solid #ddd;

  45.   border-bottom: 1px solid #ddd;

  46. }

  47. .accordion-item-even .accordion-header {

  48.   background-color:    #ddd;

  49.   border-color: #ccc;

  50. }

  51. 

  52. /*

  53.  * Don't use padding/margin top/bottom on .views-accordion-item, or the animation will jump for that ammount

  54.  * so apply it to the header and the first divs inside the accordion-content

  55.  */

  56. .views-accordion-item .accordion-content div,

  57. .views-accordion-item .accordion-header,

  58. h3.accordion-header {

  59.  padding: 0.5em 1em;

  60. }

  61. .views-accordion-item .accordion-content div div {

  62.   padding: 0;

  63. }

  64. 

  65. /* header mouse-over and section-opened states (only when js is enabled)*/

  66. .views-accordion-item .accordion-header-hover,

  67. h3.accordion-header-hover {

  68.   border-color: #fff;

  69. }

  70. .views-accordion-item .accordion-header-active,

  71. h3.accordion-header-active {

  72.   font-weight: bold;

  73.   border-bottom: 1px solid #eee;

  74. }

  75. 

  76. /* Buttons */

  77. span.stop-accordion,

  78. span.toggleAccordion {

  79.   display: block;

  80.   text-align: right;

  81. }