Update Composer, update everything

This commit is contained in:
Oliver Davies 2018-11-23 12:29:20 +00:00
parent ea3e94409f
commit dda5c284b6
19527 changed files with 1135420 additions and 351004 deletions

View file

@ -0,0 +1,16 @@
/**
* @file
* Addons styles
*/
.webform-addons-summary {
float: left;
margin: 0 0 0.5em 0;
}
/**
* Projects.
*/
.webform-addons-projects details {
background-color: #f8f8f8;
}

View file

@ -0,0 +1,18 @@
/**
* @file
* Admin composite element styles.
*/
.webform-admin-composite-elements table tr .form-item {
margin-bottom: 5px;
}
.webform-admin-composite-elements table .form-text,
.webform-admin-composite-elements table .form-textarea,
.webform-admin-composite-elements table .form-select {
width: 100%;
}
.webform-admin-composite-elements table .form-type-checkbox.form-no-label {
text-align: center;
}

View file

@ -4,33 +4,33 @@
*/
/**
* Hide throbber which causes layout issue in dropbutton
* Local actions.
*/
.dropbutton-multiple .ajax-progress-throbber {
display: none;
.webform-form .action-links {
margin-bottom: 0;
}
/**
* Submission.
*/
.webform-submission-information .button {
font-size: 1em;
}
/**
* Webform setting button displays a gear icon.
* @see /admin/structure/webform/manage/contact/results/table
* @see /admin/structure/webform/manage/contact/results/submissions
*/
.button.button-webform-setting {
.button.button-webform-table-setting {
margin: 0 0 1em 0;
}
.button.button-webform-setting:before {
content: '';
.button.button-webform-table-setting:before {
content: '';
font-size: 1.2em;
}
/**
* Add light gray background to Add-on details widget.
* @see /admin/structure/webform/addons
*/
.webform-addons details {
background-color: #f8f8f8;
}
/**
* Filter webform and submissions.
* @see /admin/structure/webform
@ -45,62 +45,72 @@
margin-right: 5px;
}
.webform-filter-form .form-item input {
max-width: 300px;
}
.webform-filter-form .form-item select {
max-width: 200px;
}
@media screen and (max-width: 600px) {
.webform-filter-form .form-item {
display: block;
margin-right: 0;
}
.webform-filter-form .form-item input,
.webform-filter-form .form-item select {
max-width: initial;
}
}
/**
* Results table.
* @see /admin/structure/webform/results/manage
* @see /admin/structure/webform/submissions/manage
* @see /admin/structure/webform/manage/contact/results/submissions
* @see /admin/structure/webform/manage/contact/results/table
*/
.webform-results__table th,
.webform-results__table td {
.webform-results-table th,
.webform-results-table td {
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Make sure 'Operations' is never cut-off */
.webform-results__table td:last-child {
/* Make sure 'Operations' is never cut-off. */
.webform-results-table td.webform-dropbutton-wrapper {
overflow: visible;
max-width: inherit;
white-space: normal;
}
th.webform-results__icon,
td.webform-results__icon {
th.webform-results-table__icon,
td.webform-results-table__icon {
padding-left: 0;
padding-right: 0;
}
/* Hide throbber, which breaks icon alignment */
.webform-results__icon .ajax-progress-throbber,
a.webform-results__custom + .ajax-progress-throbber {
.webform-results-table__icon .ajax-progress-throbber {
display: none;
}
/* Entire row is clickable. @see Drupal.behaviors.webformTableRowHref */
.webform-results__table tbody tr {
.webform-results-table tbody tr {
cursor: pointer;
cursor: hand;
}
/**
* Results custom(ize) dialog.
*/
.webform-results__custom .tabledrag-changed-warning,
.webform-results__custom .tabledrag-changed /* Hide table drag warnings. */ {
display: none !important; /* Must use !important because .tabledrag-changed 'display' is set via JavaScript */
/* Limit image height to 60px */
.webform-results-table td img {
max-height: 60px;
width: auto;
}
/**
* Results icons (sticky & notes)
* Results icons (notes, sticky, and locked)
*/
.webform-icon {
display: inline-block;
@ -114,6 +124,8 @@ a.webform-results__custom + .ajax-progress-throbber {
vertical-align: -2px;
}
/* Notes */
.webform-icon-notes--on {
background-image: url(../images/icons/notes-on.svg);
}
@ -133,6 +145,8 @@ a:focus .webform-icon-notes--off {
background-image: url(../images/icons/notes-link.svg);
}
/* Sticky */
.webform-icon-sticky {
background: transparent url(../images/icons/sticky.svg) no-repeat left top;
display: inline-block;
@ -155,19 +169,65 @@ a:focus .webform-icon-notes--off {
background: transparent url(../images/icons/sticky-link.svg) no-repeat left top;
}
/* Locked */
.webform-icon-locked--on {
background-image: url(../images/icons/locked-on.svg);
}
.webform-icon-locked--off {
background-image: url(../images/icons/locked-off.svg);
}
.webform-icon-locked--link {
background-image: url(../images/icons/locked-on-link.svg);
}
a:hover .webform-icon-locked--on,
a:focus .webform-icon-locked--on {
background-image: url(../images/icons/locked-off-link.svg);
}
a:hover .webform-icon-locked--off,
a:focus .webform-icon-locked--off {
background-image: url(../images/icons/locked-on-link.svg);
}
/**
* Submission view table.
* @see /admin/structure/webform/manage/{webform_id}/submission/{webform_submission_id}/table
*/
.webform-submission__table th {
.webform-submission-table th {
width: 33%;
min-width: 100px;
}
.webform-submission__table td {
.webform-submission-table td {
width: 66%;
}
.webform-horizontal-rule {
margin: .5em 0;
}
/**
* Handlers table.
* @see /admin/structure/webform/manage/{webform_id}/handlers
*/
.webform-handlers-table .ajax-progress-throbber {
display: none;
}
@media screen and (max-width: 1280px) {
.js-off-canvas-dialog-open .webform-handlers-table th,
.js-off-canvas-dialog-open .webform-handlers-table td {
display: none;
}
.js-off-canvas-dialog-open .webform-handlers-table th:first-child,
.js-off-canvas-dialog-open .webform-handlers-table th:last-child,
.js-off-canvas-dialog-open .webform-handlers-table td:first-child,
.js-off-canvas-dialog-open .webform-handlers-table td:last-child {
display: table-cell;
}
}

View file

@ -0,0 +1,34 @@
/**
* @file
* Dropbutton styles.
*
* @see /admin/structure/webform
* @see /admin/structure/webform/manage/{webform}/results/submissions
* @see /admin/structure/webform/manage/{webform}
* @see /admin/structure/webform/manage/{webform}/handlers
*/
/**
* Fix webform submission views dropdown display.
*/
.js .webform-submission-views-dropbutton .dropbutton-wrapper {
display: block;
position: relative;
min-height: 2em;
}
.js .webform-submission-views-dropbutton .dropbutton-widget {
position: absolute;
}
/**
* Hide dropbutton to prevent FOUC (flash of unstyled content).
*/
.webform-dropbutton .dropbutton-wrapper {
visibility: hidden;
min-width: 100px;
}
.webform-dropbutton .dropbutton-wrapper .dropbutton-widget {
background-color: transparent;
}

View file

@ -0,0 +1,13 @@
/**
* @file
* Admin settings styles
*/
/**
* Dialog test button.
* @see /admin/structure/webform/manage/{webform}/settings
*/
.webform-settings-form .webform-dialog.button {
width: 100%;
white-space: nowrap;
}

View file

@ -0,0 +1,29 @@
/**
* @file
* Tabledrag styles.
*/
.tabledrag-toggle-weight-wrapper {
position: relative;
}
.tabledrag-toggle-weight-wrapper button {
position: absolute;
top: -2.5em;
right: 0;
}
@media screen and (max-width: 960px) {
.tabledrag-toggle-weight-wrapper {
float: right;
}
.tabledrag-toggle-weight-wrapper button {
position: static;
top: inherit;
right: inherit;
}
}
.webform-tabledrag-hide {
display: none; !important;
}

View file

@ -0,0 +1,55 @@
/**
* @file
* Ajax styles
*/
/**
* Make sure full screen progress indicator is in front of .ui-dialog.
*
* @see core/themes/seven/css/components/dialog.css
*/
.ajax-progress.ajax-progress-fullscreen {
z-index: 1261;
}
/**
* Floating Ajax message container.
*
* Display status message in a floating container at the bottom of the page.
* NOTE: It is disiplay to display message floating at top because of the floating
* admin toolbar.
*
* @see Drupal.AjaxCommands.prototype.webformInsert
*/
.webform-ajax-messages {
position: fixed;
bottom: 0;
width: 100%;
}
.webform-ajax-messages .messages {
border-width: 10px 0 0 0;
margin: 0;
font-weight: bold;
}
.webform-ajax-messages .messages + .messages {
margin: 0;
}
/**
* Always position webform modal dialog at the top of the page.
*
* This prevents the dialogs position from jumping as its content is refreshed
* and when the window is resized.
*
* @see core/misc/dialog/dialog.position.js
* @see \Drupal\webform\Utility\WebformDialogHelper::getModalDialogAttributes
*/
.webform-ui-dialog {
top: 50px !important;
}
.toolbar-tray-open.toolbar-horizontal .webform-ui-dialog {
top: 90px !important;
}

View file

@ -0,0 +1,13 @@
/**
* @file
* Submission limit block styles.
*/
/**
* Disable progress bar animation.
*/
.block-webform-submission-limit-block .progress__bar {
-webkit-animation: none;
-moz-animation: none;
-webkit-transition: none;
}

View file

@ -0,0 +1,24 @@
/**
* @file
* Composite element styles.
*/
/**
* Remove extra margin are composite element which already contain form elements with margins
*/
fieldset.webform-composite-hidden-title {
margin-top: 1em;
margin-bottom: 1em;
}
fieldset.webform-composite-hidden-title .fieldset-wrapper > .form-item:first-child,
fieldset.webform-composite-hidden-title .fieldset-wrapper > .form-wrapper > .form-item:first-child,
fieldset.webform-composite-hidden-title .fieldset-wrapper > .webform-flexbox:first-child {
margin-top: 0;
}
fieldset.webform-composite-hidden-title .fieldset-wrapper > .form-item:last-child,
fieldset.webform-composite-hidden-title .fieldset-wrapper > .form-wrapper > .form-item:last-child,
fieldset.webform-composite-hidden-title .fieldset-wrapper > .webform-flexbox:last-child {
margin-bottom: 0;
}

View file

@ -3,20 +3,20 @@
* Composite telephone element styles.
*/
.webform-telephone:after {
.form-type-webform-telephone:after {
content: "";
display: table;
clear: both;
}
.webform-telephone .form-item,
.webform-telephone .form-item label {
.form-type-webform-telephone .form-item,
.form-type-webform-telephone .form-item label {
float: left;
margin: 0 10px 0 0;
vertical-align: middle;
}
.webform-telephone .form-item label {
.form-type-webform-telephone .form-item label {
line-height: 2em;
height: 2em;
}

View file

@ -0,0 +1,148 @@
/**
* @file
* Contribute styles.
*/
/**
* Content.
*/
.webform-contribute-content {
max-width: 1000px;
}
/**
* Image.
*/
img.webform-contribute-image {
width: 100%;
}
/**
* Quote.
*/
blockquote.webform-contribute-quote {
margin: 2em 40px;
font-size: 1.385em;
font-weight: bold;
}
blockquote.webform-contribute-quote:before {
color: rgb(6, 120, 190);
content: "“";
float: left;
font-size: 3em;
margin: 0.2em 0 0 -0.6em;
}
/**
* Community Information.
* @see core/themes/seven/css/components/system-status-report-general-info.css
*/
.webform-contribute-community-info {
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 25px;
}
.webform-contribute-community-info__header {
background-color: #f5f5f2;
padding: 10px;
margin: 0;
overflow: hidden;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-size: 14px;
text-transform: uppercase;
}
.webform-contribute-community-info__item {
background: #fcfcfa;
border-top: 1px solid #ccc;
padding: 10px 10px 20px;
box-sizing: border-box;
overflow-x: auto;
}
.webform-contribute-community-info__item-icon {
display: inline-block;
height: 55px;
width: 55px;
vertical-align: top;
}
.webform-contribute-community-info__item-icon:before {
content: "";
background-size: 45px;
background-position: 50% center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: block;
}
.webform-contribute-community-info__item-icon--account:before {
background-image: url(../images/contribute/icons/cccccc/account.svg);
}
.webform-contribute-community-info__item-icon--membership:before {
background-image: url(../images/contribute/icons/cccccc/membership.svg);
}
.webform-contribute-community-info__item-icon--contribution:before {
background-image: url(../images/contribute/icons/cccccc/contribution.svg);
}
.webform-contribute-community-info__item-details {
box-sizing: border-box;
display: inline-block;
width: calc(100% - 60px);
padding-left: 10px; /* LTR */
position: relative;
}
[dir="rtl"] .webform-contribute-community-info__item-details {
padding-right: 10px;
padding-left: 0;
}
.webform-contribute-community-info__item-details .button {
margin: 1em 0 0 0;
}
@media screen and (min-width: 48em) {
.webform-contribute-community-info__items {
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
}
.webform-contribute-community-info__item {
flex: 1;
flex-basis: 33%;
width: 33%;
}
.webform-contribute-community-info__item:nth-child(2),
.webform-contribute-community-info__item:nth-child(3) {
border-left: 1px solid #ccc; /* LTR */
}
[dir="rtl"] .webform-contribute-community-info__item:nth-child(1),
[dir="rtl"] .webform-contribute-community-info__item:nth-child(2) {
border-left: 1px solid #ccc;
}
}
@media screen and (min-width: 60em) {
.webform-contribute-community-info__item-icon {
width: 55px;
height: 55px;
}
.webform-contribute-community-info__item-icon:before {
background-size: 45px;
}
}
@media screen and (max-width: 48em) {
.webform-contribute-community-info__header {
display: none;
}
.webform-contribute-community-info {
border-top: 0;
margin-top: 25px;
}
}

View file

@ -0,0 +1,10 @@
/**
* @file
* Checkbox value element styles.
*
* @see /webform/test_element_checkbox_value
*/
.form-item.form-type-webform-checkbox-value {
margin: 0;
}

View file

@ -5,6 +5,7 @@
* @see /webform/test_element_codemirror/test
*/
/* Clean up CodeMirror editor */
form .CodeMirror {
border: 1px solid #ccc;
@ -17,11 +18,15 @@ form .CodeMirror-scroll {
overflow-x: auto;
}
form .CodeMirror .CodeMirror-placeholder {
color: #999;
}
/* Clean up CodeMirror viewer */
pre.webform-codemirror-runmode {
border: 1px solid #ccc;
font-size: 13px;
overflow: auto;
padding: 3px;
padding: .5em 1em;
margin: 0;
}

View file

@ -1,11 +1,22 @@
/**
* @file
* Composite element styles
*
* @see /webform/example_elements_composite
* Element composite (builder) styles.
*/
/* Remove extra margin are composite element which already contain form elements with margins */
fieldset.form-composite {
margin: 0;
.form-type-webform-element-composite table tr .form-item {
margin-bottom: 5px;
}
.form-type-webform-element-composite table .form-text,
.form-type-webform-element-composite table .form-textarea,
.form-type-webform-element-composite table .form-select {
width: 100%;
}
.form-type-webform-element-composite table .form-type-checkbox.form-no-label {
text-align: center;
}
.form-type-webform-element-composite .description /* Hide options description */ {
display: none;
}

View file

@ -0,0 +1,8 @@
/**
* @file
* Element computed styles.
*/
.webform-computed-loading {
background-color: #ffffaa;
}

View file

@ -0,0 +1,17 @@
/**
* @file
* Element counter styles.
*/
input.webform-counter-warning,
input.form-text.webform-counter-warning,
textarea.webform-counter-warning,
textarea.form-textarea.webform-counter-warning {
border-color: #e09600;
background: #fdf8ed;
}
.text-count-wrapper.webform-counter-warning {
color: #734c00;
font-weight: bold;
}

View file

@ -19,3 +19,34 @@
.webform-details-toggle-state-wrapper + details {
margin-top: 0;
}
.webform-details-toggle-state {
background: transparent;
border: 0;
cursor: pointer;
margin-top: 0;
padding: 0;
font-size: 1em;
}
/* Tweak details toggle state. */
.webform-details-toggle-state {
color: #337ab7;
text-decoration: none;
}
.webform-details-toggle-state:hover,
.webform-details-toggle-statelink:focus {
text-decoration: underline;
}
/* Float toogle to the right of webform tabs */
.webform-tabs .webform-details-toggle-state-wrapper {
float: right;
}
@media screen and (max-width: 600px) {
.webform-tabs .webform-details-toggle-state-wrapper {
float: none;
}
}

View file

@ -0,0 +1,10 @@
/**
* @file
* File upload button styles.
*
* @see https://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button
*/
.webform-file-button-input {
position: fixed;
top: -1000px;
}

View file

@ -159,8 +159,8 @@
/**
* Radios/checkboxes.
*/
.form-type-checkbox,
.form-type-radio {
.webform-flex--container .form-type-checkbox,
.webform-flex--container .form-type-radio {
white-space: nowrap;
}

View file

@ -0,0 +1,40 @@
/**
* @file
* Element help styles.
*/
.webform-element-help {
display: inline-block;
box-sizing: content-box;
border: 2px solid #bbb;
background: #bbb;
line-height: 14px;
height: 14px;
width: 14px;
font-size: 12px;
color: #fff;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: baseline;
margin: 0 .3em;
}
.webform-element-help:focus,
.webform-element-help:active,
.webform-element-help:hover {
border: 2px solid #0074bd;
background: #0074bd;
color: #fff;
cursor: help;
}
.ui-tooltip.webform-element-help--tooltip {
max-width: 400px;
}
.webform-element-help--title {
font-weight: bold;
font-size: 1.1em;
margin: 0 0 .2em 0;
}

View file

@ -0,0 +1,116 @@
/**
* @file
* Element horizontal rule styles.
*
* @see https://css-tricks.com/examples/hrs/
*/
hr.webform-horizontal-rule {
margin: 1em 0;
}
/* Dashed */
hr.webform-horizontal-rule--dashed {
border: 0;
border-bottom: 1px dashed #666;
background-color: transparent;
}
hr.webform-horizontal-rule--dashed.webform-horizontal-rule--medium {
border-width: 3px;
}
hr.webform-horizontal-rule--dashed.webform-horizontal-rule--thick {
border-width: 6px;
}
/* Dotted */
hr.webform-horizontal-rule--dotted {
border: 0;
border-bottom: 1px dotted #666;
background-color: transparent;
}
hr.webform-horizontal-rule--dotted.webform-horizontal-rule--medium {
border-width: 5px;
}
hr.webform-horizontal-rule--dotted.webform-horizontal-rule--thick {
border-width: 10px;
}
/* Flaired (by Tomas Theunissen) */
hr.webform-horizontal-rule--flaired {
overflow: visible; /* For IE */
height: 30px;
border-style: solid;
border-color: #666;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.webform-horizontal-rule--flaired:before { /* Not really supposed to work, but does */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #666;
border-width: 0 0 1px 0;
border-radius: 20px;
}
/* Glyph (by Harry Roberts) */
hr.webform-horizontal-rule--glyph {
overflow: visible; /* For IE */
padding: 0;
border: none;
border-top: medium double #666;
color: #666;
text-align: center;
}
hr.webform-horizontal-rule--glyph:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
/* Gradient */
hr.webform-horizontal-rule--gradient {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.webform-horizontal-rule--gradient.webform-horizontal-rule--medium {
height: 3px;
}
hr.webform-horizontal-rule--gradient.webform-horizontal-rule--thick {
height: 6px;
}
/* Dashed */
hr.webform-horizontal-rule--solid {
border: 0;
border-bottom: 1px solid #666;
}
hr.webform-horizontal-rule--solid.webform-horizontal-rule--medium {
border-width: 5px;
}
hr.webform-horizontal-rule--solid.webform-horizontal-rule--thick {
border-width: 10px;
}

View file

@ -0,0 +1,12 @@
/**
* @file
* HTML editor styles.
*
* @see /webform/test_element_html_editor
*/
/* Add html tag to make this selector more specific */
html .cke_reset_all .cke_dialog_body {
background-color: #f5f5f2;
border-radius: 5px;
}

View file

@ -0,0 +1,12 @@
/**
* @file
* iCheck element styles.
*/
/**
* Hide checkbox/radio as the page loads
*/
[data-webform-icheck] input[type="checkbox"],
[data-webform-icheck] input[type="radio"] {
opacity: 0;
}

View file

@ -39,29 +39,30 @@
/**
* Basic table formatting.
*/
.webform-likert-table th,
.webform-likert-table td {
.webform-likert-table-wrapper th,
.webform-likert-table-wrapper td {
text-align: center;
}
.form-type-webform-likert td label {
display: none;
}
.webform-likert-table th:first-child,
.webform-likert-table td:first-child {
.webform-likert-table-wrapper th:first-child,
.webform-likert-table-wrapper td:first-child {
text-align: inherit;
width: 40%;
}
.form-type-webform-likert td:first-child label {
.webform-likert-table-wrapper td:first-child label {
display: block;
}
/**
* Mobile support to likert webform element table.
* 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;
@ -92,7 +93,29 @@
width: 100%;
}
.form-type-webform-likert td label {
/**
* 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;
}

View file

@ -1,16 +0,0 @@
/**
* @file
* Location element styles.
*
* @see /webform/test_element_location
*/
/**
* Remove power by Google.
*
* @see http://stackoverflow.com/questions/12327651/how-to-remove-the-powered-by-google-logo-in-the-google-map-autocomplete-dropdo
*/
.pac-container:after {
background-image: none;
height: 0;
}

View file

@ -0,0 +1,42 @@
/**
* @file
* Location geocomplete element styles.
*
* @see /webform/test_element_loc_geocomplete
*/
/**
* Map styles.
*/
.webform-location-geocomplete-map {
margin-top: 5px;
border: 1px solid #ccc;
width: 100%;
max-width: 600px;
display: block;
position: relative;
}
.webform-location-geocomplete-map:after {
padding-top: 56.25%; /* 16:9 ratio */
display: block;
content: '';
}
.webform-location-geocomplete-map--container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
/**
* Remove power by Google.
*
* @see http://stackoverflow.com/questions/12327651/how-to-remove-the-powered-by-google-logo-in-the-google-map-autocomplete-dropdo
*/
.pac-container:after {
background-image: none;
height: 0;
}

View file

@ -0,0 +1,16 @@
/**
* @file
* Location Algolia places element styles.
*
* @see https://community.algolia.com/places/documentation.html#css-classes
* @see /webform/test_element_loc_places
*/
.ap-input {
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 2em;
height: 2em;
border-radius: unset;
}

View file

@ -8,19 +8,13 @@
/**
* Add styles to default (info) message,
*/
.messages {
box-shadow: -8px 0 0 #3b3b3b; /* LTR */
}
[dir="rtl"] .messages {
box-shadow: 8px 0 0 #3b3b3b;
margin-left: 0;
}
.messages.messages--info {
color: #31708f;
background-color: #d9edf7;
background-image: url(../images/icons/info.svg);
border-color: #0074bd #0074bd #0074bd transparent; /* LTR */
background-repeat: no-repeat;
background-position: 10px 17px;
border-color: #0074bd #0074bd #0074bd transparent; /* LTR */
box-shadow: -8px 0 0 #0074bd; /* LTR */
}
[dir="rtl"] .messages.messages--info {
@ -39,6 +33,10 @@
/**
* Webform message close link.
*/
.webform-message--close .messages {
padding-right: 35px;
}
.webform-message--close .webform-message__link {
display: none;
}

View file

@ -0,0 +1,25 @@
/**
* @file
* Element more styles.
*/
.webform-element-more--link {
display: none;
}
.webform-element-more--link:before {
content: '► ';
font-size: .8em;
}
.webform-element-more.is-open .webform-element-more--link:before {
content: '▼ ';
}
html.js .webform-element-more--link {
display: block;
}
html.js .webform-element-more--content {
display: none;
}

View file

@ -17,34 +17,43 @@
.webform-multiple-table td {
white-space: nowrap;
vertical-align: top;
}
.webform-multiple-table td:first-child {
.webform-multiple-table td .description {
white-space: normal;
}
.webform-multiple-table td.webform-multiple-table--handle {
padding: 0 0 0 1em;
width: 26px;
vertical-align: middle;
text-align: center;
}
.webform-multiple-table td:last-child {
.webform-multiple-table td.webform-multiple-table--weight {
width: 20px;
}
.webform-multiple-table td.webform-multiple-table--operations {
padding: 0 2px;
vertical-align: middle;
text-align: center;
width: 30px;
}
.webform-multiple-table td.webform-multiple-table--operations-two {
width: 60px;
}
.webform-multiple-table td:last-child input {
.webform-multiple-table td.webform-multiple-table--operations input {
margin: 0 2px;
}
.webform-multiple-table td:last-child input {
opacity: 0.4;
background: none;
}
.webform-multiple-table td:last-child input:hover,
.webform-multiple-table td:last-child input:focus,
.webform-multiple-table td:last-child input:active {
.webform-multiple-table td.webform-multiple-table--operations input:hover,
.webform-multiple-table td.webform-multiple-table--operations input:focus,
.webform-multiple-table td.webform-multiple-table--operations input:active {
opacity: 1;
background: none;
}
@ -58,7 +67,8 @@
.webform-multiple-table td .form-type-webform-autocomplete input {
width: 100%;
}
.webform-multiple-table td .form-type-datelist select,
.webform-multiple-table td .container-inline select,
.form-type-webform-multiple.webform-has-field-prefix td select,
.form-type-webform-multiple.webform-has-field-suffix td select,
.form-type-webform-multiple.webform-has-field-prefix td input,
@ -81,10 +91,17 @@
}
/**
* Hide AJAX throbber.
* Add margin between stacked form items.
*/
.form-type-webform-multiple .ajax-progress-throbber {
display: none;
.webform-multiple-table .form-item + .form-item {
margin-top: .2em;
}
/**
* Remove margin from no messages.
*/
.webform-multiple-table--no-items-message .messages__wrapper {
padding: 0;
}
/**
@ -98,6 +115,70 @@
/**
* Tweak tabledrag toggle weight.
*/
.webform-multiple-tabledrag-toggle-weight {
.tabledrag-toggle-weight-wrapper.webform-multiple-tabledrag-toggle-weight {
float: right;
display: inherit;
position: inherit;
}
.tabledrag-toggle-weight-wrapper.webform-multiple-tabledrag-toggle-weight button {
position: inherit;
top: inherit;
right: inherit;
}
/**
* IMCE tweaks
*/
.webform-multiple-table .imce-url-button {
display: block;
}
/**
* Mobile support to multiple table.
*/
@media (max-width: 768px) {
.webform-multiple-table-responsive thead {
display: none;
}
.webform-multiple-table-responsive tr {
display: block;
padding: .5em 0;
}
.webform-multiple-table-responsive td {
display: block;
border: 0;
background: transparent;
text-align: inherit;
width: inherit;
padding: .5em 1em;
}
.webform-multiple-table-responsive td:after {
content: "";
display: table;
clear: both;
}
.webform-multiple-table-responsive td.webform-multiple-table--handle,
.webform-multiple-table-responsive td.webform-multiple-table--operations {
display: none;
}
.webform-multiple-table-responsive td.webform-multiple-table--weight {
width: 100%;
}
.webform-multiple-table-responsive td > div > label.visually-hidden {
display: block;
position: inherit !important;
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
margin: .2em 0;
}
}

View file

@ -2,20 +2,54 @@
* @file
* Element range styles.
*
* @see /webform/example_elements#edit-range
* @see http://thenewcode.com/754/input-Antipode-The-HTML5-output-Element
*/
.form-range.form-range-output {
margin-right: 8px;
/**
* Vertical center range input.
*/
.form-type-range input[type="range"] {
display: table-cell;
vertical-align: middle;
}
.form-range-output-container {
/**
* Left or right output (via '#type': number).
*/
.form-type-range .form-type-number {
display: none;
}
html.js .form-type-range .form-type-number {
display: inline;
white-space: nowrap;
}
.form-range-output-container input,
.form-range-output-container .field-prefix,
.form-range-output-container .field-suffix {
margin-left: 2px;
.form-type-range .webform-range-output-delimiter {
display: inline-block;
width: 10px;
}
.form-type-range input[type="number"] {
text-align: right;
}
/**
* Bubble output (via <output>).
*/
.form-type-range output {
display: none;
}
html.js .form-type-range output {
display: block;
}
.form-type-range output {
opacity: 0.3;
position: absolute;
background: #ededed;
border: 1px solid #bbb;
padding: 2px 5px;
text-align: center;
}

View file

@ -1,8 +1,6 @@
/**
* @file
* Rating element styles.
*
* @see /webform/example_elements
*/
html.js .form-webform-rating {

View file

@ -11,4 +11,3 @@
.select2-container--open {
z-index: 1261;
}

View file

@ -2,7 +2,6 @@
* @file
* Signature element styles.
*
* @see /webform/example_elements
* @see https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
*/

View file

@ -9,59 +9,55 @@
white-space: nowrap;
}
.webform-states-table--state {
tr.webform-states-table--state {
border-top: 2px solid #a6a6a6;
}
.webform-states-table--state:first-child {
tr.webform-states-table--state:first-child {
border-top: inherit;
}
.webform-states-table--state td select {
tr.webform-states-table--state td select {
width: inherit;
max-width: inherit;
}
.webform-states-table--state td:first-child select,
.webform-states-table--state td.webform-states-table--state select,
.webform-states-table--condition select,
.webform-states-table--condition input[type="text"] {
width: 100%;
max-width: 100%;
}
.webform-states-table--condition input[type="text"] {
margin-top: 4px;
}
.webform-states-table .image-button {
margin: 0;
}
.webform-states-table th:last-child,
.webform-states-table td:last-child {
.webform-states-table th.webform-states-table--operations,
.webform-states-table td.webform-states-table--operations {
padding: 0 2px;
vertical-align: middle;
text-align: center;
}
.webform-states-table td:last-child input {
.webform-states-table td.webform-states-table--operations input {
margin: 0 2px;
}
.webform-states-table td:last-child input {
.webform-states-table td.webform-states-table--operations input {
opacity: 0.4;
}
.webform-states-table td:last-child input:hover,
.webform-states-table td:last-child input:focus,
.webform-states-table td:last-child input:active {
.webform-states-table td.webform-states-table--operations input:hover,
.webform-states-table td.webform-states-table--operations input:focus,
.webform-states-table td.webform-states-table--operations input:active {
opacity: 1;
background: none;
}
/**
* Hide AJAX throbber.
*/
.form-type-webform-element-states .ajax-progress-throbber {
display: none;
}
/**
* Suppress table drag warnings.
*/

View file

@ -0,0 +1,11 @@
/**
* @file
* Term checkboxes element styles.
*/
.webform-term-checkboxes-scroll .fieldset-wrapper {
max-height: 180px;
border: 1px solid #ccc;
padding: 0 10px;
overflow: auto;
}

View file

@ -0,0 +1,14 @@
/**
* @file
* Terms of service element styles.
*/
.webform-terms-of-service-details {
border: 1px solid #ccc;
padding: .5em 1em;
margin: .5em 0;
}
.webform-terms-of-service-details--title {
font-weight: bold;
}

View file

@ -0,0 +1,12 @@
/**
* @file
* Text form element styles.
*/
/**
* Add more padding to text form tips when they are displayed in a modal.
* @see \Drupal\webform\Plugin\WebformElement\TextFormat::afterBuild
*/
.webform-text-format-help-dialog .ui-dialog-content > div {
padding: 0 1em 1em 1em;
}

View file

@ -1,8 +1,6 @@
/**
* @file
* Toggle element styles.
*
* @see /webform/example_elements
*/
html.js .form-type-webform-toggle .form-checkbox {

View file

@ -19,23 +19,53 @@
}
/**
* Element inline
* Element title inline.
*/
.webform-element--title-inline label {
.webform-element--title-inline > label {
display: inline;
}
.webform-element--title-inline label {
padding-right: 0.5em;
}
.webform-element--title-inline label::after {
content: ':';
/**
* Fieldset title inline.
* Applies to radios, checkboxes, and buttons. (aka .form-composite)
* @see \Drupal\webform\Plugin\WebformElement\OptionsBase::prepare
* @see webform_preprocess_fieldset()
*/
.form-composite.webform-fieldset--title-inline legend {
float: left;
margin: 0.4em 0.5em 0.4em 0;
}
.form-composite.webform-fieldset--title-inline .fieldset-wrapper,
.form-composite.webform-fieldset--title-inline .fieldset-wrapper > div {
display: inline;
}
/**
* Readonly inputs.
* Checkboxes and radios title inline.
*/
.webform-readonly {
background-color: #f0f0f0;
.webform-element--title-inline .form-radios,
.webform-element--title-inline .form-checkboxes {
display: inline;
}
/**
* Readonly inputs. (@see .form-disabled)
* @see https://www.wufoo.com/html5/attributes/21-readonly.html
*/
.webform-readonly input[type="date"],
.webform-readonly input[type="datetime-local"],
.webform-readonly input[type="email"],
.webform-readonly input[type="number"],
.webform-readonly input[type="password"],
.webform-readonly input[type="search"],
.webform-readonly input[type="tel"],
.webform-readonly input[type="text"],
.webform-readonly input[type="time"],
.webform-readonly input[type="url"],
.webform-readonly textarea {
background: #ededed;
border-color: #bbb;
color: #717171;
}

View file

@ -13,6 +13,29 @@
margin: 1em 0;
}
/**
* Help page.
*/
.webform-help h4 {
font-size: 1em;
text-transform: uppercase;
}
.webform-help .button.button--primary {
width: 100%;
max-width: 600px;
margin: 0;
}
.webform-help img {
width: 100%;
height: auto;
}
.webform-help .webform-help-video-youtube {
max-width: 600px;
}
/**
* Help play button.
*/
@ -20,19 +43,11 @@
content: '► ';
font-size: .8em;
}
/**
* Help accordion.
*/
.webform-help-accordion dt {
font-weight: bold;
}
/**
* Help video.
*/
.webform-help-video-youtube {
margin: 1.5em 0;
margin: 1em 0 .2em 0;
max-width: 1024px;
border: 1px solid #000;
}
@ -52,3 +67,10 @@
width: 100%;
height: 100%;
}
/**
* Help links.
*/
.webform-help-links {
margin-left: 0;
}

View file

@ -0,0 +1,109 @@
/**
* @file
* Wizard progress tracker styles.
*
* @see http://nigelotoole.github.io/progress-tracker/
*/
/**
* Reduce top/bottom margins around progress tracker.
*/
.webform-progress-tracker.progress-tracker {
margin-top: 20px;
margin-bottom: 20px;
}
/**
* Update progress text to show completed and active.
*/
.webform-progress-tracker .progress-step .progress-text {
color: #656565;
padding-top: 5px;
padding-bottom: 0;
}
.webform-progress-tracker .progress-step::after {
background-color: #656565;
}
.webform-progress-tracker .progress-step.is-active .progress-text {
color: #333;
}
.webform-progress-tracker .progress-step.is-active .progress-title {
font-weight: bold;
}
.webform-progress-tracker .progress-step.is-complete .progress-text {
color: #333;
}
/**
* Disable hover state because webform wizard progress markers are not clickable.
*/
.webform-progress-tracker .progress-step:not(.is-active) .progress-marker,
.webform-progress-tracker .progress-step:hover .progress-marker {
background-color: #656565;
}
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker {
background-color: #1976f2;
}
.webform-progress-tracker .progress-step.is-active:hover .progress-marker {
background-color: #2196f3;
}
/**
* Make progress text smaller for tablets.
*/
@media screen and (max-width: 800px) {
.webform-progress-tracker .progress-text {
font-size: smaller;
}
}
/**
* Hide progress text smaller for mobile.
*/
@media screen and (max-width: 600px) {
.webform-progress-tracker .progress-text {
display: none;
}
}
/**
* RTL support.
*
* @see https://github.com/NigelOToole/progress-tracker/issues/5
*/
[dir="rtl"] .progress-step:not(:last-child)::after {
display: none;
}
[dir="rtl"] .progress-step:not(:first-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 12px;
bottom: 12px;
right: -14px;
width: 100%;
height: 4px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
[dir="rtl"] .progress-tracker--center .progress-step::after {
right: -50%;
}
[dir="rtl"] .webform-progress-tracker .progress-step {
z-index: inherit;
}
[dir="rtl"] .progress-step:not(:first-child)::after {
z-index: 0;
}

View file

@ -0,0 +1,36 @@
/**
* @file
* Promotions styles.
*/
/**
* Drupal Association.
*/
.webform-message .messages.messages--promotion_drupal_association {
color: #333;
background: #e0e0d8 url(../images/promotions/drupal-association-logo.png) 10px 10px no-repeat;
background-size: auto;
border-color: #a6a6a6 #a6a6a6 #a6a6a6 transparent; /* LTR */
box-shadow: -8px 0 0 #a6a6a6; /* LTR */
padding-left: 120px; /* LTR */
min-height: 20px;
}
[dir="rtl"] .webform-message .messages.messages--promotion_drupal_association {
border-color: #333 transparent #333 #333;
box-shadow: 8px 0 0 #333;
margin-left: 0;
padding-right: 45px;
}
@media screen and (max-width: 600px) {
.webform-message .messages.messages--promotion_drupal_association .button {
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
padding-bottom: 6px;
width: 100%;
}
}

View file

@ -3,7 +3,89 @@
* Bartik theme styles.
*/
/* Add background color to table cells so that very wide off-screen tables look okay. */
/**
* Add background color to table cells so that very wide off-screen tables look okay.
*/
table {
background-color: #fff;
}
/**
* Tweak webform (elements) form.
*/
.webform-form .tableresponsive-toggle-columns,
.webform-form .tabledrag-toggle-weight-wrapper {
display: none;
}
.webform-submission-form .form-type-radio .description,
.webform-submission-form .form-type-checkbox .description {
margin-left: 1.6em;
}
/**
* Tweak webform element form.
*/
.webform-states-table th.webform-states-table--operations,
.webform-states-table td.webform-states-table--operations {
min-width: 65px;
}
.webform-states-table td:last-child input {
margin: 0;
}
.webform-multiple-table td.webform-multiple-table--operations,
.webform-multiple-table td.webform-multiple-table--operations {
min-width: 65px;
}
.webform-multiple-table td.webform-multiple-table--operations input {
margin: 0;
}
/**
* Tweak details toggle state.
*/
.webform-details-toggle-state {
color: #0071b3;
text-decoration: none;
border-bottom: 1px dotted;
}
.webform-details-toggle-state:hover,
.webform-details-toggle-statelink:focus {
color: #018fe2;
text-decoration: none;
border-bottom-style: solid;
}
/**
* Tweak progress tracker.
*
* ISSUE:
* Bartik theme is not displaying line between the markers.
* The #main-wrapper {background: #ffffff) in core/themes/bartik/css/colors.css is causing the problem.
*
* WORKAROUND:
* Define z-index for .progress-step.
*/
.webform-progress-tracker .progress-step {
z-index: 0;
}
/**
* Tweak element help.
* @see css/webform.element.help.css
*/
summary .webform-element-help {
border-color: #999;
background: #999;
}
/**
* Tweak Algolia places.
*/
input.ap-input {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}

View file

@ -0,0 +1,14 @@
/**
* @file
* Classy theme styles.
*/
/**
* Make sure the date picker is in front of the dialog.
*
* @see core/themes/classy/css/components/dialog.css
* @see core/themes/seven/css/components/dialog.css
*/
.ui-datepicker {
z-index: 1261 !important;
}

View file

@ -8,8 +8,26 @@ table td {
vertical-align: top;
}
td > .form-item:first-of-type,
tr.odd .form-item:first-of-type,
tr.even .form-item:first-of-type {
margin-top: 0;
}
td > .form-item:last-of-type,
tr.odd .form-item:last-of-type,
tr.even .form-item:last-of-type {
margin-bottom: 0;
}
/* Add margin around HR tags */
table hr {
margin: .5em 0;
}
/* Add background to nested details */
details details {
details details /* < 8.5.x */,
details.seven-details details.seven-details /* >= 8.6.x */ {
background-color: #f8f8f8;
}
@ -17,13 +35,64 @@ details details details {
background-color: #fff;
}
/* Add white background to tooltips */
/* Reduce the width of number inputs */
input.form-number {
width: 6em;
}
code {
font-weight: bold;
border: 1px solid #333;
background-color: #f8f8f8;
padding: 2px 4px;
color: #333;
}
/* Add yellow background to tooltips and tabs */
.ui-tooltip.ui-widget {
background: #fff;
background: #fe6;;
border: 1px solid #ed5;
}
.webform-tabs .ui-tabs-active.ui-state-active {
background: #fe6;
border: 1px solid #ed5;
}
.webform-tabs .ui-tabs-active.ui-state-active.ui-state-focus a {
text-decoration: underline;
}
/** Compress tabs for mobile */
@media screen and (max-width: 600px) {
.webform-tabs.ui-tabs .ui-tabs-nav {
padding: 5px 0 4px 0;
}
.webform-tabs.ui-tabs .ui-tabs-nav li {
padding: 0;
}
.webform-tabs.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding: .5em .7em;
}
}
/* Accordion icon */
.ui-accordion-icons .ui-icon {
display: inline-block;
}
/* CodeMirror viewer */
pre.webform-codemirror-runmode {
padding: .5em 1.5em;
}
/* Hide tabs and elements from printing. */
@media print {
body {
padding-top: 0 !important; /* Using !import to ensure that <body style="padding-top: *"> set via the toolbar.module is overridden. */
}
.region.region-highlighted,
.shortcut-action,
.dropbutton-wrapper,
.block-system-breadcrumb-block,
@ -36,19 +105,82 @@ details details details {
}
}
/**
* Form action are moved to a dialogs footer and don't need to be visually
* hidden.
* @see Drupal.behaviors.dialog.prepareDialogButtons
*/
.webform-ui-dialog .form-actions input[type=submit],
.webform-ui-dialog .form-actions a.button {
display: none !important;
}
/* System tray divider */
.ui-resizable-w {
.ui-dialog.ui-dialog-off-canvas .ui-resizable-w {
background-color: #bfbfba;
border: 1px solid #6b6b6b;
border-width: 1px 2px;
}
/* System tray title bar */
.ui-dialog.ui-dialog-offcanvas .ui-dialog-titlebar {
.ui-dialog.ui-dialog-off-canvas {
background: #fff;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
border-radius: 0;
}
/* System tray actions */
.ui-dialog.ui-dialog-offcanvas .ui-dialog-content .form-actions {
.ui-dialog.ui-dialog-off-canvas .ui-dialog-content .form-actions {
margin: 1em 0;
}
/* jQuery UI button states */
.webform-buttons .ui-button.ui-state-default {
background: #f5f5f2;
border: solid 1px #bfbfba;
}
.webform-buttons .ui-button.ui-state-active {
color: #840;
background: #fe6;
border: solid 1px #ed5;
}
/* jQuery UI tooltip */
.ui-tooltip hr {
background: #666;
margin: .3em 0;
height: 1px;
}
.ui-tooltip code {
font-weight: bold;
white-space: nowrap;
background-color: #f5f5f2;
font-size: .9em;
padding: .2em;
}
/* jQuery UI tabs */
.ui-tabs .ui-tabs-panel {
padding: 0;
}
/* Tweak details toggle state. */
.webform-details-toggle-state {
color: #0074bd;
}
.webform-details-toggle-state:hover,
.webform-details-toggle-statelink:focus {
text-decoration: underline;
}
/* Token tree */
.token-tree ul {
margin: 0;
}

View file

@ -0,0 +1,36 @@
/**
* @file
* Wizard styles.
*/
.webform-wizard-pages-links {
display: none;
}
/**
* Progress link styles.
*/
.webform-progress [role="link"] {
cursor: pointer;
}
.webform-progress .progress-title[role="link"] {
color: #1976d2;
}
.webform-progress .progress-title[role="link"]:hover,
.webform-progress .progress-title[role="link"]:focus {
text-decoration: underline;
color: #2196f3;
}
/**
* Preview link styles.
*/
.webform-wizard-page-edit {
display: none;
}
.webform-wizard-page-edit input {
margin: 0;
}