www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/blazy/css/blazy.admin.css

   1 /**
   2  * @file
   3  */
   4
   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;
  13 }
  14
  15 /**
  16  * Form
  17  */
  18 .form--slick {
  19   font-size: 16px;
  20   font-size: 1rem;
  21   max-width: 100%;
  22   padding: 0;
  23   position: relative;
  24 }
  25
  26 .form--slick::after,
  27 .form--slick .fieldset-wrapper::after,
  28 .form--slick .form-checkboxes {
  29   content: "";
  30   display: table;
  31   clear: both;
  32 }
  33
  34 .form--slick .form-actions {
  35   clear: both;
  36 }
  37
  38 .form--slick ~ .form-actions {
  39   float: left;
  40   width: 100%;
  41 }
  42
  43 .form--half,
  44 .form--slick .vertical-tabs {
  45   border: 1px solid #dbe1e9;
  46   background: #f9f9f9;
  47   clear: both;
  48   overflow: visible;
  49   position: relative;
  50 }
  51
  52 .form--half,
  53 .form--slick .vertical-tabs,
  54 .form--slick .details--responsive .details--settings {
  55   box-shadow: 0 0 0 4px #f9f9f9;
  56   clear: both;
  57   float: left;
  58   margin: 30px auto;
  59   width: 100%;
  60 }
  61
  62 .form--slick .vertical-tabs {
  63   padding: 8px;
  64 }
  65
  66 .form--slick #edit-delete {
  67   display: block;
  68 }
  69
  70 .form--vanilla {
  71   padding-top: 82px;
  72 }
  73
  74 /**
  75  * Buttons
  76  */
  77 .form--slick .button,
  78 .form--slick .button:link,
  79 .form--slick .button:visited,
  80 .form--slick .form-submit {
  81   background: #dadada;
  82   border: 1px solid #dadada;
  83   border-radius: 0;
  84   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.08);
  85   color: #111;
  86   border-style: solid;
  87   border-width: 1px;
  88   cursor: pointer;
  89   display: inline-block;
  90   font-size: 13px;
  91   min-height: 28px;
  92   line-height: 26px;
  93   margin: 0;
  94   padding: 0 10px 1px;
  95   text-decoration: none;
  96   vertical-align: top;
  97   white-space: nowrap;
  98 }
  99
 100 .form--slick .form-submit:focus {
 101   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 102 }
 103
 104 .form--slick .button:hover,
 105 .form--slick .button:active,
 106 .form--slick .form-submit:hover,
 107 .form--slick .form-submit:active {
 108   background: #ff6d2c;
 109   border-color: #ff6d2c;
 110   box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.5) inset;
 111   color: #fff;
 112   outline: 0;
 113 }
 114
 115 .form--slick .form-disabled {
 116   cursor: not-allowed;
 117   opacity: 0.6;
 118 }
 119
 120 /**
 121  * Clearfix
 122  */
 123 .form-item::before,
 124 .form-item::after,
 125 .fieldgroup.form-composite::before,
 126 .fieldgroup.form-composite::after,
 127 .details-wrapper::before,
 128 .details-wrapper::after,
 129 .clearfix::before,
 130 .clearfix::after {
 131   content: " ";
 132   display: table;
 133 }
 134
 135 .clearfix::after,
 136 .details-wrapper::after,
 137 .form-item::after,
 138 .fieldgroup.form-composite::after {
 139   clear: both;
 140 }
 141
 142 /**
 143  * Details.
 144  */
 145 .form--slick details,
 146 .form--slick .vertical-tabs details.vertical-tabs__pane {
 147   margin: 0;
 148   padding: 30px 0;
 149   border-color: #808080;
 150 }
 151
 152 .form--slick details {
 153   padding: 30px 15px;
 154 }
 155
 156 .form--slick details details {
 157   background: none;
 158   padding: 60px 0 1em;
 159 }
 160
 161 .form--slick .vertical-tabs details {
 162   padding-left: 0;
 163   padding-right: 0;
 164 }
 165
 166 .form--slick .details-description > small {
 167   line-height: 1.2;
 168 }
 169
 170 .form--slick .details--responsive--ajax,
 171 .form--slick .details--responsive--ajax > .details-wrapper {
 172   padding: 0;
 173 }
 174
 175 .form--slick details .details-description {
 176   padding: 5px 15px;
 177 }
 178
 179 .form--slick details.form-wrapper {
 180   margin: 0 0 20px;
 181   padding: 30px 0;
 182   border: 0;
 183 }
 184
 185 .form--slick details.filter-wrapper {
 186   margin: 2px 0 0;
 187   padding: 0;
 188 }
 189
 190 .form--slick > .details-wrapper {
 191   max-width: 100%;
 192   padding: 40px 0 0;
 193 }
 194
 195 .form--slick details summary {
 196   font-size: 18px;
 197   font-size: 1.125rem;
 198   padding: 0 0.8em;
 199 }
 200
 201 .form--slick details .details-title {
 202   background: none;
 203   color: #111;
 204   display: block;
 205   font-size: 18px;
 206   font-size: 1.125rem;
 207   height: auto;
 208   padding: 0;
 209   text-transform: uppercase;
 210 }
 211
 212 .form--slick details .details-title:hover {
 213   color: #ff6d2c;
 214   text-decoration: none;
 215 }
 216
 217 .form--slick details .details-title:focus {
 218   outline: 0;
 219 }
 220
 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);
 225   overflow: hidden;
 226   height: 1px;
 227   width: 1px;
 228   word-wrap: normal;
 229 }
 230
 231 .form--slick .details--responsive--ajax .details--responsive {
 232   padding-left: 0;
 233   padding-right: 0;
 234   padding-top: 60px;
 235 }
 236
 237 .form--slick .details--responsive--ajax .details--responsive > .details-wrapper {
 238   padding-left: 15px;
 239   padding-right: 15px;
 240 }
 241
 242 .form--slick .details--responsive--ajax .details--responsive .details--settings {
 243   border: 1px solid #dadada;
 244   padding: 0;
 245 }
 246
 247 .form--slick .details--responsive--ajax .details--responsive .details--settings .details-wrapper {
 248   margin-top: 0;
 249   padding: 0;
 250 }
 251
 252 html.js .form--slick .collapsible,
 253 html.js .form--slick .collapsed {
 254   clear: both;
 255   border: 0;
 256 }
 257
 258 html.js .form--slick .collapsible summary,
 259 html.js .form--slick .collapsed summary {
 260   background: none;
 261   border: 0;
 262   display: block;
 263   padding: 0;
 264   position: relative;
 265   width: 100%;
 266 }
 267
 268 html.js .form--slick .collapsible .details-legend,
 269 html.js .form--slick .collapsed .details-legend {
 270   background: none;
 271   margin: 0;
 272   padding: 0;
 273   position: absolute;
 274   width: 100%;
 275 }
 276
 277 html.js .form--slick .collapsible summary .icon {
 278   display: none;
 279 }
 280
 281 html.js .form--slick .collapsible .details-legend::after {
 282   content: "";
 283 }
 284
 285 html.js .form--slick .collapsible .details-legend span.summary {
 286   position: absolute !important;
 287   clip: rect(1px, 1px, 1px, 1px);
 288   overflow: hidden;
 289   height: 1px;
 290   width: 1px;
 291   word-wrap: normal;
 292   margin: 0;
 293 }
 294
 295 html.js .form--slick .collapsible .details-legend .details-legend-prefix {
 296   background: #37465b;
 297   display: inline-block;
 298   float: none;
 299   height: 36px;
 300   left: 0;
 301   line-height: 42px;
 302   margin-right: 10px;
 303   position: relative;
 304   text-indent: -9999px;
 305   top: 0;
 306   vertical-align: middle;
 307   width: 36px;
 308   -webkit-transition: background 0.3s 0.5s ease;
 309   transition: background 0.3s 0.5s ease;
 310 }
 311
 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;
 315   width: 1.25rem;
 316   height: 0.17857rem;
 317   background: #fff;
 318   border-radius: 0.08929rem;
 319   -webkit-transition: 0.3s;
 320   transition: 0.3s;
 321   position: absolute;
 322   left: 8px;
 323   content: '';
 324   text-indent: 0;
 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;
 330 }
 331
 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);
 336   top: 18px;
 337 }
 338
 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);
 343   top: 18px;
 344 }
 345
 346 html.js .form--slick .collapsed {
 347   height: 40px;
 348   margin: 20px 0;
 349   padding: 0;
 350 }
 351
 352 html.js .form--slick .collapsed .details-legend .details-legend-prefix {
 353   background: #bbc6d6;
 354 }
 355
 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;
 360   top: 16px;
 361   width: 18px;
 362 }
 363
 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);
 368 }
 369
 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);
 374 }
 375
 376 /**
 377  * Fieldset.
 378  */
 379 .form--slick > div[id^="field-"] {
 380   clear: both;
 381   width: 100%;
 382 }
 383
 384 /** Third party settings. */
 385 .form--slick ~ .form-item {
 386   clear: both;
 387 }
 388
 389 .form--slick > div[id^="field-"] fieldset {
 390   border-left: 0;
 391   border-right: 0;
 392   float: none;
 393   padding: 20px 0 0;
 394   width: 100%;
 395 }
 396
 397 .form--slick > div[id^="field-"] fieldset legend {
 398   padding-left: 20px;
 399   z-index: 3;
 400 }
 401
 402 .form--slick > div[id^="field-"] fieldset .form-item {
 403   border: 0;
 404 }
 405
 406 /**
 407  * Tooltip
 408  * !important declaration is to override Seven.
 409  */
 410 .has-tooltip .form-item,
 411 .has-tooltip .form-composite > .fieldset-wrapper {
 412   position: relative;
 413 }
 414
 415 .has-tooltip .form-item > .description,
 416 .has-tooltip .form-composite > .fieldset-wrapper > .description {
 417   background: #000;
 418   background: rgba(0, 0, 0, 0.8);
 419   border-radius: 2px;
 420   bottom: 120%;
 421   box-shadow: 0 2px 10px -2px #000;
 422   color: #dadada !important;
 423   display: block;
 424   font-size: 12px;
 425   font-size: 0.75rem;
 426   line-height: 1.2;
 427   min-height: 40px;
 428   max-width: 320px;
 429   min-width: 210px;
 430   position: absolute !important;
 431   padding: 12px !important;
 432   opacity: 0;
 433   overflow: hidden;
 434   right: 0;
 435   visibility: hidden;
 436   -webkit-transition: all 0.4s ease-in 0s;
 437   transition: all 0.4s ease-in 0s;
 438   text-align: left;
 439   white-space: normal;
 440   z-index: 99;
 441 }
 442
 443 .has-tooltip .form-item--tooltip-wide > .description {
 444   min-width: 320px;
 445 }
 446
 447 .has-tooltip .form-item > .description ul {
 448   margin: 1em 0;
 449   padding-left: 1em;
 450 }
 451
 452 .has-tooltip .form-item > .description a,
 453 .has-tooltip .form-composite > .fieldset-wrapper > .description a {
 454   color: #fff;
 455   font-weight: 600;
 456 }
 457
 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;
 462   border-top: 0;
 463   bottom: -10px;
 464   content: "";
 465   display: block;
 466   height: 0;
 467   opacity: .6;
 468   position: absolute;
 469   right: 20px;
 470   width: 0;
 471   z-index: 99;
 472 }
 473
 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;
 482 }
 483
 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 {
 492   bottom: 100%;
 493   display: block;
 494   opacity: 1 !important;
 495   visibility: visible;
 496   overflow: visible !important;
 497 }
 498
 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 {
 507   display: block;
 508 }
 509
 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;
 515 }
 516
 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 {
 521   color: #dadada;
 522   content: "x";
 523   display: block;
 524   font-family: sans-serif;
 525   height: 20px;
 526   left: 5px;
 527   line-height: 18px;
 528   margin-top: -10px;
 529   position: absolute;
 530   top: 50%;
 531   width: 20px;
 532   z-index: 0;
 533 }
 534
 535 .has-tooltip .form-item--tooltip-bottom > .description {
 536   bottom: auto !important;
 537   top: 100%;
 538 }
 539
 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;
 545   bottom: auto;
 546   top: -20px;
 547 }
 548
 549 .no-js .has-tooltip .form-item:hover > .fieldset-wrapper > .description,
 550 .no-js .has-tooltip .form-item:hover > .description {
 551   bottom: 100%;
 552   display: block;
 553   opacity: 1 !important;
 554   visibility: visible;
 555   overflow: visible !important;
 556 }
 557
 558 .form-item .hint {
 559   background: #828282;
 560   border-radius: 50%;
 561   color: #fff;
 562   content: '?';
 563   cursor: default;
 564   display: none;
 565   font-family: sans-serif;
 566   font-size: 12px;
 567   font-weight: 600;
 568   line-height: 16px;
 569   margin: 0;
 570   width: 16px;
 571   height: 16px;
 572   position: absolute;
 573   right: 5px;
 574   text-align: center;
 575   top: 5px;
 576   z-index: 8;
 577 }
 578
 579 .form__header .form-item .hint {
 580   top: 16px;
 581   right: -5px;
 582 }
 583
 584 .form-item:hover > .hint {
 585   display: block;
 586 }
 587
 588 /**
 589  * Form items
 590  */
 591 .form--slick .form-item {
 592   background: none;
 593   border-bottom: 1px solid #dadada;
 594   border-top: 1px solid white;
 595   bottom: -1px;
 596   float: left;
 597   font-size: 13px;
 598   font-size: 0.8125rem;
 599   line-height: 32px;
 600   margin: 0;
 601   min-height: 72px;
 602   padding: 20px 12px 12px;
 603   position: relative;
 604   width: 100%;
 605 }
 606
 607 .form--slick .form-checkboxes .form-item,
 608 .form--slick .form-radios .form-item {
 609   margin: 0;
 610 }
 611
 612 .form--slick .form-radios {
 613   margin-bottom: 10px;
 614 }
 615
 616 .form--slick .form-type-vertical-tabs {
 617   width: 100%;
 618 }
 619
 620 .form--slick table .form-item {
 621   background: none;
 622   border: 0;
 623   min-height: 32px;
 624   padding: 5px;
 625 }
 626
 627 .form--slick .form-item input,
 628 .form--slick .form-item select {
 629   float: left;
 630   max-width: 150px;
 631   min-width: 40px;
 632 }
 633
 634 .form--slick .form-item .form-text,
 635 .form--slick .form-item .form-select,
 636 .form--slick .form-item .form-textarea {
 637   background: #fff;
 638   border: 1px solid #dadada;
 639   border-radius: 0;
 640   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
 641   line-height: 22px;
 642   margin: 0; /* Fix for ember */
 643   min-height: 22px;
 644   padding: 2px 5px;
 645   width: auto;
 646 }
 647
 648 .details--compact .form--slick .form-item .form-text,
 649 .form--slick .form-item .form-select,
 650 .form--slick .form-item .form-textarea {
 651   width: 98%;
 652 }
 653
 654 .form--slick .form-item .form-text,
 655 .form--slick .form-item .form-select,
 656 .form--slick .form-item .form-textarea {
 657   font-size: 14px;
 658   font-size: 0.875rem;
 659 }
 660
 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;
 666 }
 667
 668 .form--slick .form-item .form-select {
 669   line-height: 18px; /* Fix for Chrome linux */
 670   min-height: 28px;
 671   min-width: 120px;
 672   padding: 4px 4px 2px; /* Fix for Chrome linux */
 673   vertical-align: middle;
 674   -moz-appearance: none;
 675   -webkit-appearance: none;
 676   appearance: none;
 677   text-indent: .01px;
 678   text-overflow: "";
 679   white-space: nowrap; /* Fix for Bartik */
 680 }
 681
 682 .form--slick .form-type-textfield .field-prefix {
 683   float: left;
 684   line-height: 22px;
 685   padding: 5px;
 686 }
 687
 688 .form--slick .form-type-textfield .field-suffix {
 689   padding-left: 5px;
 690 }
 691
 692 .form--slick .form-radios {
 693   margin-left: 180px;
 694 }
 695
 696 .form--half fieldset.form-item {
 697   padding-left: 15px;
 698 }
 699
 700 /**
 701  * Fixes for Adminimal gargantuan label.
 702  */
 703 .form--slick .form-item label,
 704 .form--slick .form-item label.option {
 705   font-weight: 400;
 706   font-size: 14px;
 707   font-size: 0.875rem;
 708   line-height: 14px;
 709 }
 710
 711 .form--slick .form-item label {
 712   display: block;
 713   /* Overrides over-specified Seven */
 714   padding: 2px 5px 2px 0 !important;
 715   margin: 0;
 716   /* text-align: right; */
 717   white-space: normal;
 718 }
 719
 720 .form--slick .form-item.form-type-textfield input {
 721   width: auto;
 722   max-width: 150px;
 723 }
 724
 725 .form--slick .form-item.form-type-textfield .form-text--int {
 726   max-width: 50px;
 727 }
 728
 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;
 732 }
 733
 734 .form--slick .form-item.form-type-textfield.is-focused {
 735   min-height: 48px;
 736   z-index: 3;
 737 }
 738
 739 .form--slick .form-item.form-type-textfield.is-focused .js-expandable {
 740   max-width: 280px;
 741   position: absolute;
 742   width: 280px;
 743   z-index: 2;
 744 }
 745
 746 .form--slick .fieldgroup.form-composite {
 747   margin-bottom: -1px;
 748   padding-bottom: 0;
 749   padding-top: 0;
 750   width: 100%;
 751 }
 752
 753 .form--slick .fieldgroup.form-composite > legend {
 754   border-bottom: 1px solid #e7e7e7;
 755   border-top: 1px solid #e7e7e7;
 756   display: block;
 757   font-size: 22px;
 758   font-size: 1.375rem;
 759   line-height: 42px;
 760   margin-top: -1px;
 761   min-height: 42px;
 762   padding-right: 0 !important;
 763   padding-top: 20px;
 764   width: 100%;
 765 }
 766
 767 .form--slick .vertical-tabs .form-item {
 768   min-height: 72px;
 769 }
 770
 771 .form--slick .vertical-tabs .fieldgroup.form-composite {
 772   background: none;
 773   padding: 0;
 774 }
 775
 776 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item {
 777   margin: -1px -1px 0 0;
 778   padding-top: 20px;
 779 }
 780
 781 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item:nth-child(3n+1) {
 782   border-left: 0;
 783 }
 784
 785 .form--slick .vertical-tabs .has-tooltip .details-wrapper {
 786   padding: 0;
 787 }
 788
 789 .form--slick .vertical-tabs .details--responsive > .details-wrapper {
 790   padding: 40px 0 0;
 791 }
 792
 793 .form--slick .vertical-tabs .details--responsive .form-item input,
 794 .form--slick .vertical-tabs .details--responsive .form-item select {
 795   max-width: 100px;
 796   margin: 0; /* Fix for Ember */
 797 }
 798
 799 .form--slick .vertical-tabs .details--responsive .form-item .form-checkbox {
 800   max-width: 100%;
 801 }
 802
 803 /**
 804  * Checkboxes.
 805  */
 806 .form--slick .form-type-radio {
 807   border: 0;
 808 }
 809
 810 .form--slick .form-type-radio,
 811 .form--slick .form-type-checkbox {
 812   position: relative;
 813 }
 814
 815 .form--slick .form-type-radio input,
 816 .form--slick .form-type-checkbox input[type=checkbox] {
 817   background: none;
 818   cursor: pointer;
 819   font-size: 12px;
 820   font-size: 0.75rem;
 821   height: 22px;
 822   display: inline-block;
 823   float: none;
 824   margin: 0; /* Fix for Ember */
 825   opacity: 0;
 826   width: 22px;
 827   vertical-align: middle;
 828   -webkit-appearance: none;
 829   -moz-appearance: none;
 830   appearance: none;
 831   z-index: 2;
 832 }
 833
 834 /* Fix for UNIX FF + Chrome */
 835 .form--slick .form-type-checkbox input[type=checkbox] {
 836   left: auto;
 837   margin-top: 2px;
 838   max-width: 100%;
 839   min-height: 22px;
 840   min-width: 22px;
 841   position: absolute;
 842   top: auto;
 843 }
 844
 845 .form--slick .form-type-checkbox .field-suffix {
 846   color: transparent;
 847 }
 848
 849 .form--slick .form-type-radio label,
 850 .form--slick .form-type-checkbox label,
 851 .form--slick .form-type-checkbox .field-suffix {
 852   line-height: 18px;
 853   position: relative;
 854 }
 855
 856 .form--slick .form-type-radio label.option,
 857 .form--slick .form-type-checkbox .field-suffix {
 858   padding-left: 0;
 859 }
 860
 861 .form--slick .form-type-checkbox label::before {
 862   background: none;
 863   border: 0;
 864 }
 865
 866 .form--slick .form-type-radio label::before,
 867 .form--slick .form-type-checkbox .field-suffix::before {
 868   content: '';
 869   display: block;
 870   position: absolute;
 871   text-align: center;
 872   width: 22px;
 873 }
 874
 875 .form--slick .form-type-radio label::before {
 876   font-size: 12px;
 877   font-size: 0.75rem;
 878 }
 879
 880 .form--slick .form-type-radio label::before,
 881 .form--slick .form-type-checkbox .field-suffix {
 882   background: #fff;
 883   outline: 0;
 884   border: 2px solid #dadada;
 885   width: 22px;
 886   height: 22px;
 887   line-height: 22px;
 888   margin-right: 5px;
 889   left: 0;
 890   top: 4px;
 891   text-align: center;
 892   -webkit-transition: all 0.4s ease-in-out 0s;
 893   transition: all 0.4s ease-in-out 0s;
 894 }
 895
 896 .form--slick .form-type-checkbox .field-suffix {
 897   display: inline-block;
 898   left: auto;
 899   right: auto;
 900   top: -4px;
 901   vertical-align: middle;
 902 }
 903
 904 .form--slick .form-type-radio .form-radio:checked + label::before {
 905   font-size: 32px;
 906   line-height: 18px;
 907 }
 908
 909 .form--slick .form-type-radio .form-radio:checked + label::before,
 910 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix {
 911   background: #fff;
 912   outline: 0;
 913   border-color: #ff6d2c;
 914   color: #ff6d2c;
 915 }
 916
 917 .form--slick .form-type-radio .form-radio:focus,
 918 .form--slick .form-type-radio .form-checkbox:focus,
 919 .form--slick .form-type-checkbox .form-radio:focus,
 920 .form--slick .form-type-checkbox .form-checkbox:focus {
 921   box-shadow: none;
 922 }
 923
 924 .form--slick .form-type-radio .form-radio:checked + label::before {
 925   content: '\02022';
 926 }
 927
 928 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix::before {
 929   content: '\2713';
 930   font-size: 16px;
 931   line-height: 18px;
 932   text-indent: -2px;
 933 }
 934
 935 .form--slick .form-type-radio label::before {
 936   border-radius: 50%;
 937 }
 938
 939 /**
 940  * Overrides
 941  */
 942 .form--slick .form-type-textarea .grippie {
 943   display: none;
 944 }
 945
 946 .form--slick .form-type-textarea .form-textarea {
 947   resize: vertical;
 948 }
 949
 950 .form--slick .details-wrapper div[class*="-breakpoint"],
 951 .form--slick .vertical-tabs .details-wrapper div[class*="-unslick"] {
 952   border: 0;
 953   background: none;
 954 }
 955
 956 .form--slick .form-checkboxes {
 957   border-top: 2px solid #e7e7e7;
 958   clear: both;
 959   margin-top: -1px;
 960   width: 100%;
 961 }
 962
 963 /**
 964  * Header
 965  */
 966 .form--slick .form-item.fieldgroup.form-composite > legend {
 967   padding: 10px 0;
 968 }
 969
 970 .form--slick .form-type-item,
 971 .ui-dialog-content .form--views > .details-wrapper > .description,
 972 .form--views > .details-wrapper > .description,
 973 .form--slick .form-item.fieldgroup.form-composite > legend,
 974 .form__title {
 975   background: #fafafa;
 976   clear: both;
 977   display: block;
 978   float: none;
 979   font-size: 20px;
 980   font-size: 1.25rem;
 981   font-weight: 400;
 982   line-height: 1.2;
 983   margin: 0;
 984   min-height: 42px;
 985   padding: 10px 5px 10px !important;
 986   text-align: center;
 987   text-transform: uppercase;
 988   width: 100%;
 989 }
 990
 991 .form--slick .form-item.form-item--sizes {
 992   background: none;
 993   border: 0;
 994   min-height: 42px;
 995   padding: 10px 0;
 996 }
 997
 998 td .form__title {
 999   margin: -10px auto;
1000 }
1001
1002 .field-ui-overview td .form__title {
1003   margin: 0 auto;
1004   position: relative;
1005 }
1006
1007 .form--vanilla .form__header {
1008   left: 0;
1009   padding-left: 240px !important;
1010   position: absolute;
1011   text-align: left;
1012   top: 0;
1013 }
1014
1015 .form--vanilla div[class*="-vanilla"] {
1016   background: none;
1017   border: 0;
1018   display: block;
1019   height: 62px;
1020   left: 0;
1021   position: absolute;
1022   top: 0;
1023   width: 100%;
1024   z-index: 3;
1025 }
1026
1027 .form--slick .form-item.fieldgroup.form-composite > legend,
1028 .form--slick .form-type-item,
1029 .form__title {
1030   background: #e7e7e7;
1031 }
1032
1033 .form--slick .details--no-checkboxes-label .form-item.fieldgroup.form-composite > legend {
1034   position: absolute !important;
1035   clip: rect(1px, 1px, 1px, 1px);
1036   overflow: hidden;
1037   height: 1px;
1038   width: 1px;
1039   word-wrap: normal;
1040 }
1041
1042 .ui-dialog-content .form--views > .details-wrapper > .description small,
1043 .form--slick .form-type-item small,
1044 .form__title small {
1045   display: block;
1046   font-size: 14px;
1047   margin-top: -1px;
1048   text-transform: none;
1049 }
1050
1051 .form__header {
1052   margin-bottom: 0;
1053 }
1054
1055 .form--slick .form__header .form-item {
1056   background: none;
1057   border: 0;
1058   float: none;
1059 }
1060
1061 .form--slick .form__header .form-item input {
1062   width: 210px;
1063   max-width: 210px;
1064 }
1065
1066 .form--slick .form__header .form-item .form-checkbox {
1067   max-width: 100%;
1068 }
1069
1070 .form--slick .form__header .form-item label {
1071   float: none;
1072   text-align: left;
1073 }
1074
1075 .form--slick .form__header .form-item-skin label,
1076 .form--slick .form__header .form-item-breakpoints label {
1077   width: auto;
1078 }
1079
1080 .form--slick .form__header div[class*="-breakpoint"] input {
1081   width: 60px;
1082 }
1083
1084 .form--slick .form__header .form-item-skin .description {
1085   bottom: 90% !important;
1086   max-width: 480px;
1087   width: 480px;
1088 }
1089
1090 /**
1091  * Radios
1092  */
1093 .form--slick .form-radios .form-item {
1094   background: none;
1095   border: 1px solid transparent;
1096   cursor: pointer;
1097   display: inline-block;
1098   padding: 0;
1099   width: auto;
1100 }
1101
1102 .form--slick .form-radios .form-item input {
1103   cursor: pointer;
1104   display: block;
1105   height: 32px;
1106   opacity: 0;
1107   position: absolute;
1108   min-width: 60px;
1109   width: 100%;
1110   z-index: 9;
1111 }
1112
1113 .form--slick .form-radios label {
1114   display: block;
1115   font-size: 12px;
1116   line-height: 12px;
1117   text-align: center;
1118   cursor: pointer;
1119   width: 100%;
1120   min-height: 45px;
1121   padding: 15px 5px 0;
1122   position: relative;
1123 }
1124
1125 /* Fix for Shiny, Adminimal */
1126 .ui-dialog-content .form--slick .form-item,
1127 .ui-dialog-content .form--slick .form-item .form-item {
1128   clear: none;
1129 }
1130
1131 .ui-dialog-content .form--views > .details-wrapper {
1132   padding: 0 !important; /* Fix for Rubik */
1133 }
1134
1135 .ui-dialog-content .form--slick > summary {
1136   background: none;
1137   border: 0;
1138   margin: 0;
1139   padding: 0;
1140   position: absolute;
1141   top: 0;
1142 }
1143
1144 .ui-dialog-content .form--slick > summary .details-legend {
1145   margin: 0;
1146   padding: 10px 15px;
1147   position: absolute;
1148   text-transform: uppercase;
1149   white-space: nowrap;
1150 }
1151
1152 .form--slick .form-item.form-type-radios,
1153 .form--slick .form-item.fieldgroup.form-composite {
1154   border-left: 0;
1155   border-right: 0;
1156   clear: both;
1157   float: none;
1158   padding: 0;
1159   width: 100%;
1160 }
1161
1162 /**
1163  * Misc
1164  */
1165 .no-padding {
1166   padding: 0 !important;
1167 }
1168
1169 #edit-label-machine-name-suffix {
1170   padding-left: 5px;
1171 }
1172
1173 .path-admin-config-media-slick #main {
1174   width: 100%;
1175 }
1176
1177 #field-display-overview .field-plugin-settings-edit-form .form--slick .form-item {
1178   margin: 0;
1179 }
1180
1181 .form--optionset #edit-options {
1182   clear: both;
1183 }
1184
1185 /* Prevents overlapping Views edit options */
1186 .ui-front [data-drupal-selector="edit-options"] details {
1187   clear: both;
1188 }
1189
1190 [data-drupal-selector="edit-options-settings"] details {
1191   clear: none;
1192 }
1193
1194 .form--slick.form--half {
1195   clear: both;
1196   margin: 30px auto;
1197 }
1198
1199 .form--views.form--half {
1200   margin-top: 60px;
1201 }
1202
1203 .form--slick .form-item label {
1204   line-height: 16px;
1205 }
1206
1207 .form--slick .form-actions,
1208 .form--optionset #edit-options {
1209   clear: both;
1210 }
1211
1212 .form--slick .form-wrapper--table .form-item {
1213   padding-left: 15px;
1214 }
1215
1216 .form--slick .form-wrapper--table td .form-item {
1217   padding-left: 0;
1218 }
1219
1220 .form--slick .form-wrapper--table th:first-child,
1221 .form--slick .form-wrapper--table td:first-child {
1222   text-align: right;
1223 }
1224
1225 .form--slick .form-wrapper--table td:first-child {
1226   font-size: 18px;
1227   font-weight: 600;
1228   line-height: 36px;
1229   text-transform: uppercase;
1230 }
1231
1232 .form--slick .form-item--right {
1233   text-align: right;
1234 }
1235
1236 .form--slick .form-item--left {
1237   text-align: left;
1238 }
1239
1240 .form--slick .form-item--center {
1241   text-align: center;
1242 }
1243
1244 @media screen and (min-width: 760px) {
1245   .form--slick .form-item {
1246     border-right: 1px solid #e7e7e7;
1247     padding-left: 0;
1248     padding-right: 0;
1249   }
1250
1251   .form--slick .form-item label {
1252     /* Overrides over-specified Seven */
1253     padding: 2px 5px 2px 5px !important;
1254   }
1255
1256   .form--optionset .form-item,
1257   .form--slick .vertical-tabs__menu-item,
1258   .form--slick .vertical-tabs__menu-item.is-selected {
1259     width: 49.9999%;
1260   }
1261
1262   .form--slick .vertical-tabs__menu-item,
1263   .form--slick .vertical-tabs__menu-item.is-selected {
1264     float: left;
1265   }
1266
1267   .form--slick .form-item label {
1268     text-align: right;
1269   }
1270
1271   .form--half .form-item,
1272   .toolbar-tray-open .form--optionset .form-item {
1273     width: 100%;
1274   }
1275
1276   .form--slick .form-type-vertical-tabs {
1277     width: 100% !important;
1278   }
1279
1280   .has-tooltip .form-item > .description,
1281   .has-tooltip .form-composite > .fieldset-wrapper > .description {
1282     max-width: 100%;
1283   }
1284
1285   .form--slick .form__header .form-item {
1286     display: inline-block;
1287     margin-right: -5px;
1288     vertical-align: top;
1289     padding-left: 4px;
1290     padding-right: 4px;
1291   }
1292
1293   .form--slick .vertical-tabs .has-tooltip .details-wrapper {
1294     margin-right: -4px;
1295   }
1296
1297   .form--slick .form__half--last .form-item,
1298   .toolbar-vertical .form--slick .form__half--last .form-item {
1299     float: right;
1300     width: auto;
1301   }
1302
1303   .form--slick .form-item label {
1304     float: left;
1305     width: 160px;
1306     text-align: right;
1307     white-space: normal;
1308   }
1309
1310   .form--slick.form--half .form-checkboxes .form-item {
1311     width: 33.3333%;
1312   }
1313
1314   .form--slick.form--image .form-wrapper--caption .form-item {
1315     width: 49.9999%;
1316   }
1317
1318   .field-plugin-settings-editing .form--slick {
1319     margin-top: 62px;
1320   }
1321
1322   .form--slick.form--half {
1323     margin-bottom: 42px;
1324   }
1325
1326   .ui-dialog .form--slick.form--half .form-item--style,
1327   .scroll .form--slick.form--half .form-item--style,
1328   .field-plugin-settings-editing .form--slick .form-item--style {
1329     background: none;
1330     border: 0;
1331     height: 42px;
1332     min-height: 32px;
1333     padding: 0;
1334     position: absolute;
1335     right: 0;
1336     top: -42px;
1337     z-index: 9;
1338   }
1339
1340   .form--slick .form__header .form-type-checkbox {
1341     max-width: 160px;
1342   }
1343
1344   .form--slick #edit-delete {
1345     float: right;
1346   }
1347 }
1348
1349 @media screen and (min-width: 1280px) {
1350   .form--optionset .form-item,
1351   .toolbar-tray-open .form--optionset .form-item {
1352     width: 33.2666%;
1353   }
1354
1355   .form__half,
1356   .form--half .form-item,
1357   .toolbar-vertical.toolbar-tray-open .form--slick .form-item {
1358     width: 49.9999%;
1359   }
1360
1361   .form__half {
1362     float: left;
1363   }
1364
1365   .form--slick .vertical-tabs__menu-item,
1366   .form--slick .vertical-tabs__menu-item.is-selected,
1367   .form--optionset td .form-item,
1368   .toolbar-tray-open .form--optionset td .form-item {
1369     float: none;
1370     width: 100%;
1371   }
1372
1373   .form--slick .form-type-item {
1374     float: left;
1375     width: 100%;
1376   }
1377
1378   .toolbar-tray-open .form--slick .form__half--last .form-item {
1379     float: right;
1380     width: auto;
1381   }
1382
1383   .form--slick.form--half .form-checkboxes .form-item {
1384     width: 24.9999%;
1385   }
1386
1387   .form--slick.form--image .form-wrapper--caption .form-item,
1388   .form--slick.form--caption-2 .form-wrapper--caption .form-item,
1389   .form--slick .form-wrapper--checkboxes.form-wrapper--count-2 .form-item {
1390     width: 49.9999%;
1391   }
1392
1393   .form--slick.form--caption-3 .form-wrapper--caption .form-item,
1394   .form--slick .form-wrapper--checkboxes.form-wrapper--count-3 .form-item {
1395     width: 33.3333%;
1396   }
1397
1398   .form--slick .form-wrapper--checkboxes.form-wrapper--count-max .form-item label {
1399     width: 160px;
1400   }
1401
1402   .has-tooltip .form-item--tooltip-wide > .description {
1403     max-width: 480px;
1404     min-width: 480px;
1405   }
1406
1407   .form--slick .form-item label {
1408     width: 180px;
1409   }
1410
1411   .form--slick.form--half {
1412     max-width: 960px;
1413   }
1414 }
1415
1416 @media screen and (min-width: 1400px) {
1417   .form--slick .form-item input,
1418   .form--slick .form-item select {
1419     max-width: 180px;
1420     min-width: 180px;
1421   }
1422 }
1423
1424 /** Declutter form when Vanilla is enabled coz table form states are broken. */
1425 .form--vanilla-on .form__title--media-switch,
1426 .form--vanilla-on .form__title--fields,
1427 .form--vanilla-on .form__title--breakpoints,
1428 .form--vanilla-on .tableresponsive-toggle-columns,
1429 .form--vanilla-on .form-wrapper--table-breakpoints,
1430 .form--responsive-image-on .form__title--breakpoints,
1431 .form--responsive-image-on .tableresponsive-toggle-columns,
1432 .form--responsive-image-on .form-wrapper--table-breakpoints,
1433 .form--responsive-image-on .form-item--sizes,
1434 .form--media-switch-rendered .form__title--breakpoints,
1435 .form--media-switch-rendered .tableresponsive-toggle-columns,
1436 .form--media-switch-rendered .form-wrapper--table-breakpoints,
1437 .form--media-switch-rendered .form-item--background,
1438 .form--media-switch-rendered .form-item--image-style,
1439 .form--media-switch-rendered .form-item--ratio {
1440   display: none !important;
1441 }