126 lines
2.4 KiB
CSS
126 lines
2.4 KiB
CSS
/**
|
|
* @file
|
|
* Likert element styles.
|
|
*
|
|
* @see /webform/test_element_likert
|
|
*/
|
|
|
|
/**
|
|
* Answer column widths.
|
|
*/
|
|
[data-likert-answers-count="2"] th {
|
|
width: 30%;
|
|
}
|
|
[data-likert-answers-count="3"] th {
|
|
width: 20%;
|
|
}
|
|
[data-likert-answers-count="4"] th {
|
|
width: 15%;
|
|
}
|
|
[data-likert-answers-count="5"] th {
|
|
width: 12%;
|
|
}
|
|
[data-likert-answers-count="6"] th {
|
|
width: 10%;
|
|
}
|
|
[data-likert-answers-count="7"] th {
|
|
width: 8.57%;
|
|
}
|
|
[data-likert-answers-count="8"] th {
|
|
width: 7.5%;
|
|
}
|
|
[data-likert-answers-count="9"] th {
|
|
width: 6.66%;
|
|
}
|
|
[data-likert-answers-count="10"] th {
|
|
width: 6%;
|
|
}
|
|
|
|
/**
|
|
* Basic table formatting.
|
|
*/
|
|
.webform-likert-table-wrapper th,
|
|
.webform-likert-table-wrapper td {
|
|
text-align: center;
|
|
}
|
|
|
|
.webform-likert-table-wrapper th:first-child,
|
|
.webform-likert-table-wrapper td:first-child {
|
|
text-align: inherit;
|
|
width: 40%;
|
|
}
|
|
|
|
.webform-likert-table-wrapper td:first-child label {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* Mobile support to likert webform element that converts radios in table
|
|
* grid to inline vertical radios.
|
|
*/
|
|
@media (max-width: 768px) {
|
|
.form-type-webform-likert table.sticky-header {
|
|
display: none;
|
|
}
|
|
|
|
.form-type-webform-likert table {
|
|
border-collapse: collapse;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.form-type-webform-likert thead {
|
|
display: none;
|
|
}
|
|
|
|
.form-type-webform-likert tr,
|
|
.form-type-webform-likert tr.odd {
|
|
border: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.form-type-webform-likert td {
|
|
display: block;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
text-align: inherit;
|
|
}
|
|
|
|
.webform-likert-table[data-likert-answers-count] th,
|
|
.webform-likert-table[data-likert-answers-count] th:first-child,
|
|
.webform-likert-table td,
|
|
.webform-likert-table td:first-child {
|
|
width: 100%;
|
|
}
|
|
|
|
/**
|
|
* Show visually hidden radio title and description
|
|
* when Likert is displayed inline on mobile.
|
|
* @see \Drupal\webform\Element\WebformLikert::processWebformLikert
|
|
* @see core/modules/system/css/components/hidden.module.css
|
|
*/
|
|
.webform-likert-table .visually-hidden {
|
|
position: inherit !important;
|
|
clip: inherit;
|
|
overflow: inherit;
|
|
height: inherit;
|
|
width: inherit;
|
|
}
|
|
|
|
.webform-likert-label.visually-hidden {
|
|
display: inline;
|
|
}
|
|
|
|
.webform-likert-description.hidden {
|
|
display: block;
|
|
}
|
|
|
|
.webform-likert-help.hidden {
|
|
display: inline;
|
|
}
|
|
|
|
.form-type-webform-likert td:last-child {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|