5 /* Fix for adminimal theme */
6 body.path-admin .form--slick,
7 body.path-admin .form--slick *,
8 .form--slick *::before,
9 .form--slick *::after {
10 -webkit-box-sizing: border-box;
11 box-sizing: border-box;
12 font-family: Arial, sans-serif;
27 .form--slick .fieldset-wrapper::after,
28 .form--slick .form-checkboxes {
34 .form--slick .form-actions {
38 .form--slick ~ .form-actions {
44 .form--slick .vertical-tabs {
45 border: 1px solid #dbe1e9;
53 .form--slick .vertical-tabs,
54 .form--slick .details--responsive .details--settings {
55 box-shadow: 0 0 0 4px #f9f9f9;
62 .form--slick .vertical-tabs {
66 .form--slick #edit-delete {
78 .form--slick .button:link,
79 .form--slick .button:visited,
80 .form--slick .form-submit {
82 border: 1px solid #dadada;
84 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.08);
89 display: inline-block;
95 text-decoration: none;
100 .form--slick .form-submit:focus {
101 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
104 .form--slick .button:hover,
105 .form--slick .button:active,
106 .form--slick .form-submit:hover,
107 .form--slick .form-submit:active {
109 border-color: #ff6d2c;
110 box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.5) inset;
115 .form--slick .form-disabled {
125 .fieldgroup.form-composite::before,
126 .fieldgroup.form-composite::after,
127 .details-wrapper::before,
128 .details-wrapper::after,
136 .details-wrapper::after,
138 .fieldgroup.form-composite::after {
145 .form--slick details,
146 .form--slick .vertical-tabs details.vertical-tabs__pane {
149 border-color: #808080;
152 .form--slick details {
156 .form--slick details details {
161 .form--slick .vertical-tabs details {
166 .form--slick .details-description > small {
170 .form--slick .details--responsive--ajax,
171 .form--slick .details--responsive--ajax > .details-wrapper {
175 .form--slick details .details-description {
179 .form--slick details.form-wrapper {
185 .form--slick details.filter-wrapper {
190 .form--slick > .details-wrapper {
195 .form--slick details summary {
201 .form--slick details .details-title {
209 text-transform: uppercase;
212 .form--slick details .details-title:hover {
214 text-decoration: none;
217 .form--slick details .details-title:focus {
221 .form--slick .details--responsive--ajax > summary,
222 .form--slick .details--responsive--ajax .details--settings > summary {
223 position: absolute !important;
224 clip: rect(1px, 1px, 1px, 1px);
231 .form--slick .details--responsive--ajax .details--responsive {
237 .form--slick .details--responsive--ajax .details--responsive > .details-wrapper {
242 .form--slick .details--responsive--ajax .details--responsive .details--settings {
243 border: 1px solid #dadada;
247 .form--slick .details--responsive--ajax .details--responsive .details--settings .details-wrapper {
252 html.js .form--slick .collapsible,
253 html.js .form--slick .collapsed {
258 html.js .form--slick .collapsible summary,
259 html.js .form--slick .collapsed summary {
268 html.js .form--slick .collapsible .details-legend,
269 html.js .form--slick .collapsed .details-legend {
277 html.js .form--slick .collapsible summary .icon {
281 html.js .form--slick .collapsible .details-legend::after {
285 html.js .form--slick .collapsible .details-legend span.summary {
286 position: absolute !important;
287 clip: rect(1px, 1px, 1px, 1px);
295 html.js .form--slick .collapsible .details-legend .details-legend-prefix {
297 display: inline-block;
304 text-indent: -9999px;
306 vertical-align: middle;
308 -webkit-transition: background 0.3s 0.5s ease;
309 transition: background 0.3s 0.5s ease;
312 html.js .form--slick .collapsible .details-legend .details-legend-prefix::before,
313 html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {
314 display: inline-block;
318 border-radius: 0.08929rem;
319 -webkit-transition: 0.3s;
325 -ms-transform-origin: 50% 50% 50%;
326 -webkit-transform-origin: 50% 50% 50%;
327 transform-origin: 50% 50% 50%;
328 -webkit-transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
329 transition: top 0.3s 0.6s ease, transform 0.3s ease;
332 html.js .form--slick .collapsible .details-legend .details-legend-prefix::before {
333 -ms-transform: rotate3d(0, 0, 1, 45deg);
334 -webkit-transform: rotate3d(0, 0, 1, 45deg);
335 transform: rotate3d(0, 0, 1, 45deg);
339 html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {
340 -ms-transform: rotate3d(0, 0, 1, -45deg);
341 -webkit-transform: rotate3d(0, 0, 1, -45deg);
342 transform: rotate3d(0, 0, 1, -45deg);
346 html.js .form--slick .collapsed {
352 html.js .form--slick .collapsed .details-legend .details-legend-prefix {
356 html.js .form--slick .collapsed .details-legend .details-legend-prefix::before,
357 html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {
358 -webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
359 transition: top 0.3s ease, transform 0.3s 0.5s ease;
364 html.js .form--slick .collapsed .details-legend .details-legend-prefix::before {
365 -ms-transform: rotate3d(0, 0, 1, 90deg);
366 -webkit-transform: rotate3d(0, 0, 1, 90deg);
367 transform: rotate3d(0, 0, 1, 90deg);
370 html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {
371 -ms-transform: rotate3d(0, 0, 1, 180deg);
372 -webkit-transform: rotate3d(0, 0, 1, 180deg);
373 transform: rotate3d(0, 0, 1, 180deg);
379 .form--slick > div[id^="field-"] {
384 /** Third party settings. */
385 .form--slick ~ .form-item {
389 .form--slick > div[id^="field-"] fieldset {
397 .form--slick > div[id^="field-"] fieldset legend {
402 .form--slick > div[id^="field-"] fieldset .form-item {
408 * !important declaration is to override Seven.
410 .has-tooltip .form-item,
411 .has-tooltip .form-composite > .fieldset-wrapper {
415 .has-tooltip .form-item > .description,
416 .has-tooltip .form-composite > .fieldset-wrapper > .description {
418 background: rgba(0, 0, 0, 0.8);
421 box-shadow: 0 2px 10px -2px #000;
422 color: #dadada !important;
430 position: absolute !important;
431 padding: 12px !important;
436 -webkit-transition: all 0.4s ease-in 0s;
437 transition: all 0.4s ease-in 0s;
443 .has-tooltip .form-item--tooltip-wide > .description {
447 .has-tooltip .form-item > .description ul {
452 .has-tooltip .form-item > .description a,
453 .has-tooltip .form-composite > .fieldset-wrapper > .description a {
458 .has-tooltip .form-item > .description:after,
459 .has-tooltip .form-composite > .fieldset-wrapper > .description:after {
460 border: 10px solid transparent;
461 border-right: 10px solid #000;
474 .has-tooltip .form-item.form-composite > .description,
475 .has-tooltip .form-item.form-type-textarea > .description,
476 .has-tooltip .form-composite > .fieldset-wrapper.form-composite > .description,
477 .has-tooltip .form-composite > .fieldset-wrapper.form-type-textarea > .description {
478 margin-left: -30% !important;
479 max-width: 60% !important;
480 min-width: 60% !important;
481 width: 60% !important;
484 .has-tooltip .form-item.is-selected > .description,
485 .has-tooltip .form-item.is-hovered > .description,
486 .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,
487 .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .description,
488 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,
489 .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .description,
490 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description,
491 .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .description {
494 opacity: 1 !important;
496 overflow: visible !important;
499 .has-tooltip .form-item.is-selected > .hint,
500 .has-tooltip .form-item.is-hovered > .hint,
501 .has-tooltip .form-item.is-selected > .fieldset-wrapper > .hint,
502 .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .hint,
503 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .hint,
504 .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .hint,
505 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .hint,
506 .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .hint {
510 .has-tooltip .form-item.is-selected > .description,
511 .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,
512 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,
513 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description {
514 padding-left: 20px !important;
517 .has-tooltip .form-item.is-selected > .description:before,
518 .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description:before,
519 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description:before,
520 .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description:before {
524 font-family: sans-serif;
535 .has-tooltip .form-item--tooltip-bottom > .description {
536 bottom: auto !important;
540 .has-tooltip .form-item--tooltip-bottom > .description::after {
541 border: 10px solid transparent;
542 border-right: 10px solid #000;
543 border-top: 10px solid transparent;
544 border-bottom: 10px solid #000;
549 .no-js .has-tooltip .form-item:hover > .fieldset-wrapper > .description,
550 .no-js .has-tooltip .form-item:hover > .description {
553 opacity: 1 !important;
555 overflow: visible !important;
565 font-family: sans-serif;
579 .form__header .form-item .hint {
584 .form-item:hover > .hint {
591 .form--slick .form-item {
593 border-bottom: 1px solid #dadada;
594 border-top: 1px solid white;
598 font-size: 0.8125rem;
602 padding: 20px 12px 12px;
607 .form--slick .form-checkboxes .form-item,
608 .form--slick .form-radios .form-item {
612 .form--slick .form-radios {
616 .form--slick .form-type-vertical-tabs {
620 .form--slick table .form-item {
627 .form--slick .form-item input,
628 .form--slick .form-item select {
634 .form--slick .form-item .form-text,
635 .form--slick .form-item .form-select,
636 .form--slick .form-item .form-textarea {
638 border: 1px solid #dadada;
640 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
642 margin: 0; /* Fix for ember */
648 .details--compact .form--slick .form-item .form-text,
649 .form--slick .form-item .form-select,
650 .form--slick .form-item .form-textarea {
654 .form--slick .form-item .form-text,
655 .form--slick .form-item .form-select,
656 .form--slick .form-item .form-textarea {
661 .form--slick .form-item .form-text:focus,
662 .form--slick .form-item .form-select:focus,
663 .form--slick .form-item .form-textarea:focus {
664 border-color: #ff6d2c;
665 box-shadow: 0 0 7px #ff6d2c;
668 .form--slick .form-item .form-select {
669 line-height: 18px; /* Fix for Chrome linux */
672 padding: 4px 4px 2px; /* Fix for Chrome linux */
673 vertical-align: middle;
674 -moz-appearance: none;
675 -webkit-appearance: none;
679 white-space: nowrap; /* Fix for Bartik */
682 .form--slick .form-type-textfield .field-prefix {
688 .form--slick .form-type-textfield .field-suffix {
692 .form--slick .form-radios {
696 .form--half fieldset.form-item {
701 * Fixes for Adminimal gargantuan label.
703 .form--slick .form-item label,
704 .form--slick .form-item label.option {
711 .form--slick .form-item label {
713 /* Overrides over-specified Seven */
714 padding: 2px 5px 2px 0 !important;
716 /* text-align: right; */
720 .form--slick .form-item.form-type-textfield input {
725 .form--slick .form-item.form-type-textfield .form-text--int {
729 .form--slick .form-item.form-type-textfield .js-expandable {
730 -webkit-transition: width 0.6s ease-out 0.8s, max-width 0.5s linear 0s;
731 transition: width 0.6s ease-out 0.8s, max-width 0.5s linear 0s;
734 .form--slick .form-item.form-type-textfield.is-focused {
738 .form--slick .form-item.form-type-textfield.is-focused .js-expandable {
745 .form--slick .fieldgroup.form-composite {
752 .form--slick .fieldgroup.form-composite > legend {
753 border-bottom: 1px solid #e7e7e7;
754 border-top: 1px solid #e7e7e7;
761 padding-right: 0 !important;
766 .form--slick .vertical-tabs .form-item {
770 .form--slick .vertical-tabs .fieldgroup.form-composite {
775 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item {
776 margin: -1px -1px 0 0;
780 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item:nth-child(3n+1) {
784 .form--slick .vertical-tabs .has-tooltip .details-wrapper {
788 .form--slick .vertical-tabs .details--responsive > .details-wrapper {
792 .form--slick .vertical-tabs .details--responsive .form-item input,
793 .form--slick .vertical-tabs .details--responsive .form-item select {
795 margin: 0; /* Fix for Ember */
798 .form--slick .vertical-tabs .details--responsive .form-item .form-checkbox {
805 .form--slick .form-type-radio {
809 .form--slick .form-type-radio,
810 .form--slick .form-type-checkbox {
814 .form--slick .form-type-radio input,
815 .form--slick .form-type-checkbox input[type=checkbox] {
821 display: inline-block;
823 margin: 0; /* Fix for Ember */
826 vertical-align: middle;
827 -webkit-appearance: none;
828 -moz-appearance: none;
833 /* Fix for UNIX FF + Chrome */
834 .form--slick .form-type-checkbox input[type=checkbox] {
844 .form--slick .form-type-checkbox .field-suffix {
848 .form--slick .form-type-radio label,
849 .form--slick .form-type-checkbox label,
850 .form--slick .form-type-checkbox .field-suffix {
855 .form--slick .form-type-radio label.option,
856 .form--slick .form-type-checkbox .field-suffix {
860 .form--slick .form-type-checkbox label::before {
865 .form--slick .form-type-radio label::before,
866 .form--slick .form-type-checkbox .field-suffix::before {
874 .form--slick .form-type-radio label::before {
879 .form--slick .form-type-radio label::before,
880 .form--slick .form-type-checkbox .field-suffix {
883 border: 2px solid #dadada;
891 -webkit-transition: all 0.4s ease-in-out 0s;
892 transition: all 0.4s ease-in-out 0s;
895 .form--slick .form-type-checkbox .field-suffix {
896 display: inline-block;
900 vertical-align: middle;
903 .form--slick .form-type-radio .form-radio:checked + label::before {
908 .form--slick .form-type-radio .form-radio:checked + label::before,
909 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix {
912 border-color: #ff6d2c;
916 .form--slick .form-type-radio .form-radio:focus,
917 .form--slick .form-type-radio .form-checkbox:focus,
918 .form--slick .form-type-checkbox .form-radio:focus,
919 .form--slick .form-type-checkbox .form-checkbox:focus {
923 .form--slick .form-type-radio .form-radio:checked + label::before {
927 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix::before {
934 .form--slick .form-type-radio label::before {
941 .form--slick .form-type-textarea .grippie {
945 .form--slick .form-type-textarea .form-textarea {
949 .form--slick .details-wrapper div[class*="-breakpoint"],
950 .form--slick .vertical-tabs .details-wrapper div[class*="-unslick"] {
955 .form--slick .form-checkboxes {
956 border-top: 2px solid #e7e7e7;
965 .form--slick .form-item.fieldgroup.form-composite > legend {
969 .form--slick .form-type-item,
970 .ui-dialog-content .form--views > .details-wrapper > .description,
971 .form--views > .details-wrapper > .description,
972 .form--slick .form-item.fieldgroup.form-composite > legend,
984 padding: 10px 5px 10px !important;
986 text-transform: uppercase;
990 .form--slick .form-item.form-item--sizes {
1001 .field-ui-overview td .form__title {
1006 .form--vanilla .form__header {
1008 padding-left: 240px !important;
1014 .form--vanilla div[class*="-vanilla"] {
1026 .form--slick .form-item.fieldgroup.form-composite > legend,
1027 .form--slick .form-type-item,
1029 background: #e7e7e7;
1032 .form--slick .details--no-checkboxes-label .form-item.fieldgroup.form-composite > legend {
1033 position: absolute !important;
1034 clip: rect(1px, 1px, 1px, 1px);
1041 .ui-dialog-content .form--views > .details-wrapper > .description small,
1042 .form--slick .form-type-item small,
1043 .form__title small {
1047 text-transform: none;
1054 .form--slick .form__header .form-item {
1060 .form--slick .form__header .form-item input {
1065 .form--slick .form__header .form-item .form-checkbox {
1069 .form--slick .form__header .form-item label {
1074 .form--slick .form__header .form-item-skin label,
1075 .form--slick .form__header .form-item-breakpoints label {
1079 .form--slick .form__header div[class*="-breakpoint"] input {
1083 .form--slick .form__header .form-item-skin .description {
1084 bottom: 90% !important;
1092 .form--slick .form-radios .form-item {
1094 border: 1px solid transparent;
1096 display: inline-block;
1101 .form--slick .form-radios .form-item input {
1112 .form--slick .form-radios label {
1120 padding: 15px 5px 0;
1124 /* Fix for Shiny, Adminimal */
1125 .ui-dialog-content .form--slick .form-item,
1126 .ui-dialog-content .form--slick .form-item .form-item {
1130 .ui-dialog-content .form--views > .details-wrapper {
1131 padding: 0 !important; /* Fix for Rubik */
1134 .ui-dialog-content .form--slick > summary {
1143 .ui-dialog-content .form--slick > summary .details-legend {
1147 text-transform: uppercase;
1148 white-space: nowrap;
1151 .form--slick .form-item.form-type-radios,
1152 .form--slick .form-item.fieldgroup.form-composite {
1165 padding: 0 !important;
1168 #edit-label-machine-name-suffix {
1172 .path-admin-config-media-slick #main {
1176 #field-display-overview .field-plugin-settings-edit-form .form--slick .form-item {
1180 .form--optionset #edit-options {
1184 /* Prevents overlapping Views edit options */
1185 .ui-front [data-drupal-selector="edit-options"] details {
1189 [data-drupal-selector="edit-options-settings"] details {
1193 .form--slick.form--half {
1198 .form--views.form--half {
1202 .form--slick .form-item label {
1206 .form--slick .form-actions,
1207 .form--optionset #edit-options {
1211 .form--slick .form-wrapper--table .form-item {
1215 .form--slick .form-wrapper--table td .form-item {
1219 .form--slick .form-wrapper--table th:first-child,
1220 .form--slick .form-wrapper--table td:first-child {
1224 .form--slick .form-wrapper--table td:first-child {
1228 text-transform: uppercase;
1231 .form--slick .form-item--right {
1235 .form--slick .form-item--left {
1239 .form--slick .form-item--center {
1243 @media screen and (min-width: 760px) {
1244 .form--slick .form-item {
1245 border-right: 1px solid #e7e7e7;
1250 .form--slick .form-item label {
1251 /* Overrides over-specified Seven */
1252 padding: 2px 5px 2px 5px !important;
1255 .form--optionset .form-item,
1256 .form--slick .vertical-tabs__menu-item,
1257 .form--slick .vertical-tabs__menu-item.is-selected {
1261 .form--slick .vertical-tabs__menu-item,
1262 .form--slick .vertical-tabs__menu-item.is-selected {
1266 .form--slick .form-item label {
1270 .form--half .form-item,
1271 .toolbar-tray-open .form--optionset .form-item {
1275 .form--slick .form-type-vertical-tabs {
1276 width: 100% !important;
1279 .has-tooltip .form-item > .description,
1280 .has-tooltip .form-composite > .fieldset-wrapper > .description {
1284 .form--slick .form__header .form-item {
1285 display: inline-block;
1287 vertical-align: top;
1292 .form--slick .vertical-tabs .has-tooltip .details-wrapper {
1296 .form--slick .form__half--last .form-item,
1297 .toolbar-vertical .form--slick .form__half--last .form-item {
1302 .form--slick .form-item label {
1306 white-space: normal;
1309 .form--slick.form--half .form-checkboxes .form-item {
1313 .form--slick.form--image .form-wrapper--caption .form-item {
1317 .field-plugin-settings-editing .form--slick {
1321 .form--slick.form--half {
1322 margin-bottom: 42px;
1325 .scroll .form--slick.form--half .form-item--style,
1326 .field-plugin-settings-editing .form--slick .form-item--style {
1338 .form--slick .form__header .form-type-checkbox {
1342 .form--slick #edit-delete {
1347 @media screen and (min-width: 1280px) {
1348 .form--optionset .form-item,
1349 .toolbar-tray-open .form--optionset .form-item {
1354 .form--half .form-item,
1355 .toolbar-vertical.toolbar-tray-open .form--slick .form-item {
1363 .form--slick .vertical-tabs__menu-item,
1364 .form--slick .vertical-tabs__menu-item.is-selected,
1365 .form--optionset td .form-item,
1366 .toolbar-tray-open .form--optionset td .form-item {
1371 .form--slick .form-type-item {
1376 .toolbar-tray-open .form--slick .form__half--last .form-item {
1381 .form--slick.form--half .form-checkboxes .form-item {
1385 .form--slick.form--image .form-wrapper--caption .form-item,
1386 .form--slick.form--caption-2 .form-wrapper--caption .form-item {
1390 .form--slick.form--caption-3 .form-wrapper--caption .form-item {
1394 .has-tooltip .form-item--tooltip-wide > .description {
1399 .form--slick .form-item label {
1403 .form--slick.form--half {
1408 @media screen and (min-width: 1400px) {
1409 .form--slick .form-item input,
1410 .form--slick .form-item select {
1416 /** Declutter form when Vanilla is enabled coz table form states are broken. */
1417 .form--vanilla-on .form__title--media-switch,
1418 .form--vanilla-on .form__title--fields,
1419 .form--vanilla-on .form__title--breakpoints,
1420 .form--vanilla-on .tableresponsive-toggle-columns,
1421 .form--vanilla-on .form-wrapper--table-breakpoints,
1422 .form--responsive-image-on .form__title--breakpoints,
1423 .form--responsive-image-on .tableresponsive-toggle-columns,
1424 .form--responsive-image-on .form-wrapper--table-breakpoints,
1425 .form--responsive-image-on .form-item--sizes,
1426 .form--media-switch-rendered .form__title--breakpoints,
1427 .form--media-switch-rendered .tableresponsive-toggle-columns,
1428 .form--media-switch-rendered .form-wrapper--table-breakpoints,
1429 .form--media-switch-rendered .form-item--background,
1430 .form--media-switch-rendered .form-item--image-style,
1431 .form--media-switch-rendered .form-item--ratio {
1432 display: none !important;