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: 62px;
  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   z-index: 3;
 736 }
 737
 738 .form--slick .form-item.form-type-textfield.is-focused .js-expandable {
 739   max-width: 280px;
 740   position: absolute;
 741   width: 280px;
 742   z-index: 2;
 743 }
 744
 745 .form--slick .fieldgroup.form-composite {
 746   margin-bottom: -1px;
 747   padding-bottom: 0;
 748   padding-top: 0;
 749   width: 100%;
 750 }
 751
 752 .form--slick .fieldgroup.form-composite > legend {
 753   border-bottom: 1px solid #e7e7e7;
 754   border-top: 1px solid #e7e7e7;
 755   display: block;
 756   font-size: 22px;
 757   font-size: 1.375rem;
 758   line-height: 42px;
 759   margin-top: -1px;
 760   min-height: 42px;
 761   padding-right: 0 !important;
 762   padding-top: 20px;
 763   width: 100%;
 764 }
 765
 766 .form--slick .vertical-tabs .form-item {
 767   min-height: 72px;
 768 }
 769
 770 .form--slick .vertical-tabs .fieldgroup.form-composite {
 771   background: none;
 772   padding: 0;
 773 }
 774
 775 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item {
 776   margin: -1px -1px 0 0;
 777   padding-top: 20px;
 778 }
 779
 780 .form--slick .vertical-tabs .fieldgroup.form-composite .form-item:nth-child(3n+1) {
 781   border-left: 0;
 782 }
 783
 784 .form--slick .vertical-tabs .has-tooltip .details-wrapper {
 785   padding: 0;
 786 }
 787
 788 .form--slick .vertical-tabs .details--responsive > .details-wrapper {
 789   padding: 40px 0 0;
 790 }
 791
 792 .form--slick .vertical-tabs .details--responsive .form-item input,
 793 .form--slick .vertical-tabs .details--responsive .form-item select {
 794   max-width: 100px;
 795   margin: 0; /* Fix for Ember */
 796 }
 797
 798 .form--slick .vertical-tabs .details--responsive .form-item .form-checkbox {
 799   max-width: 100%;
 800 }
 801
 802 /**
 803  * Checkboxes.
 804  */
 805 .form--slick .form-type-radio {
 806   border: 0;
 807 }
 808
 809 .form--slick .form-type-radio,
 810 .form--slick .form-type-checkbox {
 811   position: relative;
 812 }
 813
 814 .form--slick .form-type-radio input,
 815 .form--slick .form-type-checkbox input[type=checkbox] {
 816   background: none;
 817   cursor: pointer;
 818   font-size: 12px;
 819   font-size: 0.75rem;
 820   height: 22px;
 821   display: inline-block;
 822   float: none;
 823   margin: 0; /* Fix for Ember */
 824   opacity: 0;
 825   width: 22px;
 826   vertical-align: middle;
 827   -webkit-appearance: none;
 828   -moz-appearance: none;
 829   appearance: none;
 830   z-index: 2;
 831 }
 832
 833 /* Fix for UNIX FF + Chrome */
 834 .form--slick .form-type-checkbox input[type=checkbox] {
 835   left: auto;
 836   margin-top: 2px;
 837   max-width: 100%;
 838   min-height: 22px;
 839   min-width: 22px;
 840   position: absolute;
 841   top: auto;
 842 }
 843
 844 .form--slick .form-type-checkbox .field-suffix {
 845   color: transparent;
 846 }
 847
 848 .form--slick .form-type-radio label,
 849 .form--slick .form-type-checkbox label,
 850 .form--slick .form-type-checkbox .field-suffix {
 851   line-height: 18px;
 852   position: relative;
 853 }
 854
 855 .form--slick .form-type-radio label.option,
 856 .form--slick .form-type-checkbox .field-suffix {
 857   padding-left: 0;
 858 }
 859
 860 .form--slick .form-type-checkbox label::before {
 861   background: none;
 862   border: 0;
 863 }
 864
 865 .form--slick .form-type-radio label::before,
 866 .form--slick .form-type-checkbox .field-suffix::before {
 867   content: '';
 868   display: block;
 869   position: absolute;
 870   text-align: center;
 871   width: 22px;
 872 }
 873
 874 .form--slick .form-type-radio label::before {
 875   font-size: 12px;
 876   font-size: 0.75rem;
 877 }
 878
 879 .form--slick .form-type-radio label::before,
 880 .form--slick .form-type-checkbox .field-suffix {
 881   background: #fff;
 882   outline: 0;
 883   border: 2px solid #dadada;
 884   width: 22px;
 885   height: 22px;
 886   line-height: 22px;
 887   margin-right: 5px;
 888   left: 0;
 889   top: 4px;
 890   text-align: center;
 891   -webkit-transition: all 0.4s ease-in-out 0s;
 892   transition: all 0.4s ease-in-out 0s;
 893 }
 894
 895 .form--slick .form-type-checkbox .field-suffix {
 896   display: inline-block;
 897   left: auto;
 898   right: auto;
 899   top: -4px;
 900   vertical-align: middle;
 901 }
 902
 903 .form--slick .form-type-radio .form-radio:checked + label::before {
 904   font-size: 32px;
 905   line-height: 18px;
 906 }
 907
 908 .form--slick .form-type-radio .form-radio:checked + label::before,
 909 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix {
 910   background: #fff;
 911   outline: 0;
 912   border-color: #ff6d2c;
 913   color: #ff6d2c;
 914 }
 915
 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 {
 920   box-shadow: none;
 921 }
 922
 923 .form--slick .form-type-radio .form-radio:checked + label::before {
 924   content: '\02022';
 925 }
 926
 927 .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix::before {
 928   content: '\2713';
 929   font-size: 16px;
 930   line-height: 18px;
 931   text-indent: -2px;
 932 }
 933
 934 .form--slick .form-type-radio label::before {
 935   border-radius: 50%;
 936 }
 937
 938 /**
 939  * Overrides
 940  */
 941 .form--slick .form-type-textarea .grippie {
 942   display: none;
 943 }
 944
 945 .form--slick .form-type-textarea .form-textarea {
 946   resize: vertical;
 947 }
 948
 949 .form--slick .details-wrapper div[class*="-breakpoint"],
 950 .form--slick .vertical-tabs .details-wrapper div[class*="-unslick"] {
 951   border: 0;
 952   background: none;
 953 }
 954
 955 .form--slick .form-checkboxes {
 956   border-top: 2px solid #e7e7e7;
 957   clear: both;
 958   margin-top: -1px;
 959   width: 100%;
 960 }
 961
 962 /**
 963  * Header
 964  */
 965 .form--slick .form-item.fieldgroup.form-composite > legend {
 966   padding: 10px 0;
 967 }
 968
 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,
 973 .form__title {
 974   background: #fafafa;
 975   clear: both;
 976   display: block;
 977   float: none;
 978   font-size: 20px;
 979   font-size: 1.25rem;
 980   font-weight: 400;
 981   line-height: 1.2;
 982   margin: 0;
 983   min-height: 42px;
 984   padding: 10px 5px 10px !important;
 985   text-align: center;
 986   text-transform: uppercase;
 987   width: 100%;
 988 }
 989
 990 .form--slick .form-item.form-item--sizes {
 991   background: none;
 992   border: 0;
 993   min-height: 42px;
 994   padding: 10px 0;
 995 }
 996
 997 td .form__title {
 998   margin: -10px auto;
 999 }
1000
1001 .field-ui-overview td .form__title {
1002   margin: 0 auto;
1003   position: relative;
1004 }
1005
1006 .form--vanilla .form__header {
1007   left: 0;
1008   padding-left: 240px !important;
1009   position: absolute;
1010   text-align: left;
1011   top: 0;
1012 }
1013
1014 .form--vanilla div[class*="-vanilla"] {
1015   background: none;
1016   border: 0;
1017   display: block;
1018   height: 62px;
1019   left: 0;
1020   position: absolute;
1021   top: 0;
1022   width: 100%;
1023   z-index: 3;
1024 }
1025
1026 .form--slick .form-item.fieldgroup.form-composite > legend,
1027 .form--slick .form-type-item,
1028 .form__title {
1029   background: #e7e7e7;
1030 }
1031
1032 .form--slick .details--no-checkboxes-label .form-item.fieldgroup.form-composite > legend {
1033   position: absolute !important;
1034   clip: rect(1px, 1px, 1px, 1px);
1035   overflow: hidden;
1036   height: 1px;
1037   width: 1px;
1038   word-wrap: normal;
1039 }
1040
1041 .ui-dialog-content .form--views > .details-wrapper > .description small,
1042 .form--slick .form-type-item small,
1043 .form__title small {
1044   display: block;
1045   font-size: 14px;
1046   margin-top: -1px;
1047   text-transform: none;
1048 }
1049
1050 .form__header {
1051   margin-bottom: 0;
1052 }
1053
1054 .form--slick .form__header .form-item {
1055   background: none;
1056   border: 0;
1057   float: none;
1058 }
1059
1060 .form--slick .form__header .form-item input {
1061   width: 210px;
1062   max-width: 210px;
1063 }
1064
1065 .form--slick .form__header .form-item .form-checkbox {
1066   max-width: 100%;
1067 }
1068
1069 .form--slick .form__header .form-item label {
1070   float: none;
1071   text-align: left;
1072 }
1073
1074 .form--slick .form__header .form-item-skin label,
1075 .form--slick .form__header .form-item-breakpoints label {
1076   width: auto;
1077 }
1078
1079 .form--slick .form__header div[class*="-breakpoint"] input {
1080   width: 60px;
1081 }
1082
1083 .form--slick .form__header .form-item-skin .description {
1084   bottom: 90% !important;
1085   max-width: 480px;
1086   width: 480px;
1087 }
1088
1089 /**
1090  * Radios
1091  */
1092 .form--slick .form-radios .form-item {
1093   background: none;
1094   border: 1px solid transparent;
1095   cursor: pointer;
1096   display: inline-block;
1097   padding: 0;
1098   width: auto;
1099 }
1100
1101 .form--slick .form-radios .form-item input {
1102   cursor: pointer;
1103   display: block;
1104   height: 32px;
1105   opacity: 0;
1106   position: absolute;
1107   min-width: 60px;
1108   width: 100%;
1109   z-index: 9;
1110 }
1111
1112 .form--slick .form-radios label {
1113   display: block;
1114   font-size: 12px;
1115   line-height: 12px;
1116   text-align: center;
1117   cursor: pointer;
1118   width: 100%;
1119   min-height: 45px;
1120   padding: 15px 5px 0;
1121   position: relative;
1122 }
1123
1124 /* Fix for Shiny, Adminimal */
1125 .ui-dialog-content .form--slick .form-item,
1126 .ui-dialog-content .form--slick .form-item .form-item {
1127   clear: none;
1128 }
1129
1130 .ui-dialog-content .form--views > .details-wrapper {
1131   padding: 0 !important; /* Fix for Rubik */
1132 }
1133
1134 .ui-dialog-content .form--slick > summary {
1135   background: none;
1136   border: 0;
1137   margin: 0;
1138   padding: 0;
1139   position: absolute;
1140   top: 0;
1141 }
1142
1143 .ui-dialog-content .form--slick > summary .details-legend {
1144   margin: 0;
1145   padding: 10px 15px;
1146   position: absolute;
1147   text-transform: uppercase;
1148   white-space: nowrap;
1149 }
1150
1151 .form--slick .form-item.form-type-radios,
1152 .form--slick .form-item.fieldgroup.form-composite {
1153   border-left: 0;
1154   border-right: 0;
1155   clear: both;
1156   float: none;
1157   padding: 0;
1158   width: 100%;
1159 }
1160
1161 /**
1162  * Misc
1163  */
1164 .no-padding {
1165   padding: 0 !important;
1166 }
1167
1168 #edit-label-machine-name-suffix {
1169   padding-left: 5px;
1170 }
1171
1172 .path-admin-config-media-slick #main {
1173   width: 100%;
1174 }
1175
1176 #field-display-overview .field-plugin-settings-edit-form .form--slick .form-item {
1177   margin: 0;
1178 }
1179
1180 .form--optionset #edit-options {
1181   clear: both;
1182 }
1183
1184 /* Prevents overlapping Views edit options */
1185 .ui-front [data-drupal-selector="edit-options"] details {
1186   clear: both;
1187 }
1188
1189 [data-drupal-selector="edit-options-settings"] details {
1190   clear: none;
1191 }
1192
1193 .form--slick.form--half {
1194   clear: both;
1195   margin: 30px auto;
1196 }
1197
1198 .form--views.form--half {
1199   margin-top: 60px;
1200 }
1201
1202 .form--slick .form-item label {
1203   line-height: 16px;
1204 }
1205
1206 .form--slick .form-actions,
1207 .form--optionset #edit-options {
1208   clear: both;
1209 }
1210
1211 .form--slick .form-wrapper--table .form-item {
1212   padding-left: 15px;
1213 }
1214
1215 .form--slick .form-wrapper--table td .form-item {
1216   padding-left: 0;
1217 }
1218
1219 .form--slick .form-wrapper--table th:first-child,
1220 .form--slick .form-wrapper--table td:first-child {
1221   text-align: right;
1222 }
1223
1224 .form--slick .form-wrapper--table td:first-child {
1225   font-size: 18px;
1226   font-weight: 600;
1227   line-height: 36px;
1228   text-transform: uppercase;
1229 }
1230
1231 .form--slick .form-item--right {
1232   text-align: right;
1233 }
1234
1235 .form--slick .form-item--left {
1236   text-align: left;
1237 }
1238
1239 .form--slick .form-item--center {
1240   text-align: center;
1241 }
1242
1243 @media screen and (min-width: 760px) {
1244   .form--slick .form-item {
1245     border-right: 1px solid #e7e7e7;
1246     padding-left: 0;
1247     padding-right: 0;
1248   }
1249
1250   .form--slick .form-item label {
1251     /* Overrides over-specified Seven */
1252     padding: 2px 5px 2px 5px !important;
1253   }
1254
1255   .form--optionset .form-item,
1256   .form--slick .vertical-tabs__menu-item,
1257   .form--slick .vertical-tabs__menu-item.is-selected {
1258     width: 49.9999%;
1259   }
1260
1261   .form--slick .vertical-tabs__menu-item,
1262   .form--slick .vertical-tabs__menu-item.is-selected {
1263     float: left;
1264   }
1265
1266   .form--slick .form-item label {
1267     text-align: right;
1268   }
1269
1270   .form--half .form-item,
1271   .toolbar-tray-open .form--optionset .form-item {
1272     width: 100%;
1273   }
1274
1275   .form--slick .form-type-vertical-tabs {
1276     width: 100% !important;
1277   }
1278
1279   .has-tooltip .form-item > .description,
1280   .has-tooltip .form-composite > .fieldset-wrapper > .description {
1281     max-width: 100%;
1282   }
1283
1284   .form--slick .form__header .form-item {
1285     display: inline-block;
1286     margin-right: -5px;
1287     vertical-align: top;
1288     padding-left: 4px;
1289     padding-right: 4px;
1290   }
1291
1292   .form--slick .vertical-tabs .has-tooltip .details-wrapper {
1293     margin-right: -4px;
1294   }
1295
1296   .form--slick .form__half--last .form-item,
1297   .toolbar-vertical .form--slick .form__half--last .form-item {
1298     float: right;
1299     width: auto;
1300   }
1301
1302   .form--slick .form-item label {
1303     float: left;
1304     width: 160px;
1305     text-align: right;
1306     white-space: normal;
1307   }
1308
1309   .form--slick.form--half .form-checkboxes .form-item {
1310     width: 33.3333%;
1311   }
1312
1313   .form--slick.form--image .form-wrapper--caption .form-item {
1314     width: 49.9999%;
1315   }
1316
1317   .field-plugin-settings-editing .form--slick {
1318     margin-top: 62px;
1319   }
1320
1321   .form--slick.form--half {
1322     margin-bottom: 42px;
1323   }
1324
1325   .scroll .form--slick.form--half .form-item--style,
1326   .field-plugin-settings-editing .form--slick .form-item--style {
1327     background: none;
1328     border: 0;
1329     height: 62px;
1330     min-height: 32px;
1331     padding: 0;
1332     position: absolute;
1333     right: 0;
1334     top: -42px;
1335     z-index: 9;
1336   }
1337
1338   .form--slick .form__header .form-type-checkbox {
1339     max-width: 160px;
1340   }
1341
1342   .form--slick #edit-delete {
1343     float: right;
1344   }
1345 }
1346
1347 @media screen and (min-width: 1280px) {
1348   .form--optionset .form-item,
1349   .toolbar-tray-open .form--optionset .form-item {
1350     width: 33.2666%;
1351   }
1352
1353   .form__half,
1354   .form--half .form-item,
1355   .toolbar-vertical.toolbar-tray-open .form--slick .form-item {
1356     width: 49.9999%;
1357   }
1358
1359   .form__half {
1360     float: left;
1361   }
1362
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 {
1367     float: none;
1368     width: 100%;
1369   }
1370
1371   .form--slick .form-type-item {
1372     float: left;
1373     width: 100%;
1374   }
1375
1376   .toolbar-tray-open .form--slick .form__half--last .form-item {
1377     float: right;
1378     width: auto;
1379   }
1380
1381   .form--slick.form--half .form-checkboxes .form-item {
1382     width: 24.9999%;
1383   }
1384
1385   .form--slick.form--image .form-wrapper--caption .form-item,
1386   .form--slick.form--caption-2 .form-wrapper--caption .form-item {
1387     width: 49.9999%;
1388   }
1389
1390   .form--slick.form--caption-3 .form-wrapper--caption .form-item {
1391     width: 33.3333%;
1392   }
1393
1394   .has-tooltip .form-item--tooltip-wide > .description {
1395     max-width: 480px;
1396     min-width: 480px;
1397   }
1398
1399   .form--slick .form-item label {
1400     width: 180px;
1401   }
1402
1403   .form--slick.form--half {
1404     max-width: 960px;
1405   }
1406 }
1407
1408 @media screen and (min-width: 1400px) {
1409   .form--slick .form-item input,
1410   .form--slick .form-item select {
1411     max-width: 180px;
1412     min-width: 180px;
1413   }
1414 }
1415
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;
1433 }