You are here

Home » API reference » FAQ Field 7

faqfield.accordion_dl.css in FAQ Field 7 

/*
 * Taken from the Web Accessibility for Developers course offered by
 * The Chang School at Ryerson University, for details see:
 * https://www.canvas.net/browse/ryersonu/courses/adv-web-accessibility
 */
@charset "utf-8";
.accordion_dl {
  margin: 10px 0;
  padding: 0;
}
.accordion_dl dt {
  position: relative;
  margin: 0;
  padding: 0;
}
.accordion_dl dt .button {
  padding: 10px 10px 10px 30px;
  background-color: #dddddd;
  color: #000000;
  -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.accordion_dl dt .button .indicator .indicator-target:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-top: 2px solid #000000;
  border-right: 2px solid #000000;
  transform: rotateZ(45deg);
  transition: transform .2s ease;
}
.accordion_dl dt .button.expanded {
  background-color: #eeeeee;
}
.accordion_dl dt .button.expanded .indicator .indicator-target:before {
  transform: rotateZ(135deg);
}
.accordion_dl dt .button:hover,
.accordion_dl dt .button:focus {
  background-color: #eeeeee;
}
.accordion_dl dt:first-of-type .button {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion_dl dt:last-of-type .button {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.accordion_dl dt:last-of-type .button.expanded {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion_dl dd {
  margin: -1px 0;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.accordion_dl dd:last-of-type {
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

File

css/faqfield.accordion_dl.css
View source 
  1. /*

  2.  * Taken from the Web Accessibility for Developers course offered by

  3.  * The Chang School at Ryerson University, for details see:

  4.  * https://www.canvas.net/browse/ryersonu/courses/adv-web-accessibility

  5.  */

  6. @charset "utf-8";

  7. .accordion_dl {

  8.   margin: 10px 0;

  9.   padding: 0;

  10. }

  11. .accordion_dl dt {

  12.   position: relative;

  13.   margin: 0;

  14.   padding: 0;

  15. }

  16. .accordion_dl dt .button {

  17.   padding: 10px 10px 10px 30px;

  18.   background-color: #dddddd;

  19.   color: #000000;

  20.   -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);

  21.   -moz-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);

  22.   box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);

  23.   cursor: pointer;

  24.   transition: background-color 0.2s ease;

  25. }

  26. .accordion_dl dt .button .indicator .indicator-target:before {

  27.   content: "";

  28.   position: absolute;

  29.   top: 50%;

  30.   left: 12px;

  31.   width: 5px;

  32.   height: 5px;

  33.   margin-top: -4px;

  34.   border-top: 2px solid #000000;

  35.   border-right: 2px solid #000000;

  36.   transform: rotateZ(45deg);

  37.   transition: transform .2s ease;

  38. }

  39. .accordion_dl dt .button.expanded {

  40.   background-color: #eeeeee;

  41. }

  42. .accordion_dl dt .button.expanded .indicator .indicator-target:before {

  43.   transform: rotateZ(135deg);

  44. }

  45. .accordion_dl dt .button:hover,

  46. .accordion_dl dt .button:focus {

  47.   background-color: #eeeeee;

  48. }

  49. .accordion_dl dt:first-of-type .button {

  50.   -webkit-border-top-left-radius: 6px;

  51.   -webkit-border-top-right-radius: 6px;

  52.   -webkit-border-bottom-left-radius: 0;

  53.   -webkit-border-bottom-right-radius: 0;

  54.   -moz-border-radius-topleft: 6px;

  55.   -moz-border-radius-topright: 6px;

  56.   -moz-border-radius-bottomleft: 0;

  57.   -moz-border-radius-bottomright: 0;

  58.   border-top-left-radius: 6px;

  59.   border-top-right-radius: 6px;

  60.   border-bottom-left-radius: 0;

  61.   border-bottom-right-radius: 0;

  62. }

  63. .accordion_dl dt:last-of-type .button {

  64.   -webkit-border-top-left-radius: 0;

  65.   -webkit-border-top-right-radius: 0;

  66.   -webkit-border-bottom-left-radius: 6px;

  67.   -webkit-border-bottom-right-radius: 6px;

  68.   -moz-border-radius-topleft: 0;

  69.   -moz-border-radius-topright: 0;

  70.   -moz-border-radius-bottomleft: 6px;

  71.   -moz-border-radius-bottomright: 6px;

  72.   border-top-left-radius: 0;

  73.   border-top-right-radius: 0;

  74.   border-bottom-left-radius: 6px;

  75.   border-bottom-right-radius: 6px;

  76. }

  77. .accordion_dl dt:last-of-type .button.expanded {

  78.   -webkit-border-top-left-radius: 0;

  79.   -webkit-border-top-right-radius: 0;

  80.   -webkit-border-bottom-left-radius: 0;

  81.   -webkit-border-bottom-right-radius: 0;

  82.   -moz-border-radius-topleft: 0;

  83.   -moz-border-radius-topright: 0;

  84.   -moz-border-radius-bottomleft: 0;

  85.   -moz-border-radius-bottomright: 0;

  86.   border-top-left-radius: 0;

  87.   border-top-right-radius: 0;

  88.   border-bottom-left-radius: 0;

  89.   border-bottom-right-radius: 0;

  90. }

  91. .accordion_dl dd {

  92.   margin: -1px 0;

  93.   padding: 10px;

  94.   background-color: #ffffff;

  95.   border: 1px solid #cccccc;

  96. }

  97. .accordion_dl dd:last-of-type {

  98.   -webkit-border-top-left-radius: 0;

  99.   -webkit-border-top-right-radius: 0;

  100.   -webkit-border-bottom-left-radius: 6px;

  101.   -webkit-border-bottom-right-radius: 6px;

  102.   -moz-border-radius-topleft: 0;

  103.   -moz-border-radius-topright: 0;

  104.   -moz-border-radius-bottomleft: 6px;

  105.   -moz-border-radius-bottomright: 6px;

  106.   border-top-left-radius: 0;

  107.   border-top-right-radius: 0;

  108.   border-bottom-left-radius: 6px;

  109.   border-bottom-right-radius: 6px;

  110. }