You are here

Home » API reference » Blazy 8

blazy.admin.css in Blazy 8

Same filename and directory in other branches
  1. 8.2 css/blazy.admin.css

File

css/blazy.admin.css
View source 
  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 .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.   transition: background 0.3s 0.5s ease;

  309. }

  310. 

  311. html.js .form--slick .collapsible .details-legend .details-legend-prefix::before,

  312. html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {

  313.   display: inline-block;

  314.   width: 1.25rem;

  315.   height: 0.17857rem;

  316.   background: #fff;

  317.   border-radius: 0.08929rem;

  318.   transition: 0.3s;

  319.   position: absolute;

  320.   left: 8px;

  321.   content: '';

  322.   text-indent: 0;

  323.   transform-origin: 50% 50% 50%;

  324.   transition: top 0.3s 0.6s ease, transform 0.3s ease;

  325. }

  326. 

  327. html.js .form--slick .collapsible .details-legend .details-legend-prefix::before {

  328.   transform: rotate3d(0, 0, 1, 45deg);

  329.   top: 18px;

  330. }

  331. 

  332. html.js .form--slick .collapsible .details-legend .details-legend-prefix::after {

  333.   transform: rotate3d(0, 0, 1, -45deg);

  334.   top: 18px;

  335. }

  336. 

  337. html.js .form--slick .collapsed {

  338.   height: 40px;

  339.   margin: 20px 0;

  340.   padding: 0;

  341. }

  342. 

  343. html.js .form--slick .collapsed .details-legend .details-legend-prefix {

  344.   background: #bbc6d6;

  345. }

  346. 

  347. html.js .form--slick .collapsed .details-legend .details-legend-prefix::before,

  348. html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {

  349.   transition: top 0.3s ease, transform 0.3s 0.5s ease;

  350.   top: 16px;

  351.   width: 18px;

  352. }

  353. 

  354. html.js .form--slick .collapsed .details-legend .details-legend-prefix::before {

  355.   transform: rotate3d(0, 0, 1, 90deg);

  356. }

  357. 

  358. html.js .form--slick .collapsed .details-legend .details-legend-prefix::after {

  359.   transform: rotate3d(0, 0, 1, 180deg);

  360. }

  361. 

  362. /**

  363.  * Fieldset.

  364.  */

  365. .form--slick > div[id^="field-"] {

  366.   clear: both;

  367.   width: 100%;

  368. }

  369. 

  370. /** Third party settings. */

  371. .form--slick ~ .form-item {

  372.   clear: both;

  373. }

  374. 

  375. .form--slick > div[id^="field-"] fieldset {

  376.   border-left: 0;

  377.   border-right: 0;

  378.   float: none;

  379.   padding: 20px 0 0;

  380.   width: 100%;

  381. }

  382. 

  383. .form--slick > div[id^="field-"] fieldset legend {

  384.   padding-left: 20px;

  385.   z-index: 3;

  386. }

  387. 

  388. .form--slick > div[id^="field-"] fieldset .form-item {

  389.   border: 0;

  390. }

  391. 

  392. /**

  393.  * Tooltip

  394.  * !important declaration is to override Seven.

  395.  */

  396. .has-tooltip .form-item,

  397. .has-tooltip .form-composite > .fieldset-wrapper {

  398.   position: relative;

  399. }

  400. 

  401. .has-tooltip .form-item > .description,

  402. .has-tooltip .form-composite > .fieldset-wrapper > .description {

  403.   background: #000;

  404.   background: rgba(0, 0, 0, 0.8);

  405.   border-radius: 2px;

  406.   bottom: 120%;

  407.   box-shadow: 0 2px 10px -2px #000;

  408.   color: #dadada !important;

  409.   display: block;

  410.   font-size: 12px;

  411.   font-size: 0.75rem;

  412.   line-height: 1.2;

  413.   min-height: 40px;

  414.   max-width: 320px;

  415.   min-width: 210px;

  416.   position: absolute !important;

  417.   padding: 12px !important;

  418.   opacity: 0;

  419.   overflow: hidden;

  420.   right: 0;

  421.   visibility: hidden;

  422.   transition: all 0.4s ease-in 0s;

  423.   text-align: left;

  424.   white-space: normal;

  425.   z-index: 99;

  426. }

  427. 

  428. .has-tooltip .form-item--tooltip-wide > .description {

  429.   min-width: 320px;

  430. }

  431. 

  432. .has-tooltip .form-item > .description ul {

  433.   margin: 1em 0;

  434.   padding-left: 1em;

  435. }

  436. 

  437. .has-tooltip .form-item > .description a,

  438. .has-tooltip .form-composite > .fieldset-wrapper > .description a {

  439.   color: #fff;

  440.   font-weight: 600;

  441. }

  442. 

  443. .has-tooltip .form-item > .description:after,

  444. .has-tooltip .form-composite > .fieldset-wrapper > .description:after {

  445.   border: 10px solid transparent;

  446.   border-right: 10px solid #000;

  447.   border-top: 0;

  448.   bottom: -10px;

  449.   content: "";

  450.   display: block;

  451.   height: 0;

  452.   opacity: .6;

  453.   position: absolute;

  454.   right: 20px;

  455.   width: 0;

  456.   z-index: 99;

  457. }

  458. 

  459. .has-tooltip .form-item.form-composite > .description,

  460. .has-tooltip .form-item.form-type-textarea > .description,

  461. .has-tooltip .form-composite > .fieldset-wrapper.form-composite > .description,

  462. .has-tooltip .form-composite > .fieldset-wrapper.form-type-textarea > .description {

  463.   margin-left: -30% !important;

  464.   max-width: 60% !important;

  465.   min-width: 60% !important;

  466.   width: 60% !important;

  467. }

  468. 

  469. .has-tooltip .form-item.is-selected > .description,

  470. .has-tooltip .form-item.is-hovered > .description,

  471. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,

  472. .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .description,

  473. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,

  474. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .description,

  475. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description,

  476. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .description {

  477.   bottom: 100%;

  478.   display: block;

  479.   opacity: 1 !important;

  480.   visibility: visible;

  481.   overflow: visible !important;

  482. }

  483. 

  484. .has-tooltip .form-item.is-selected > .hint,

  485. .has-tooltip .form-item.is-hovered > .hint,

  486. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .hint,

  487. .has-tooltip .form-item.is-hovered > .fieldset-wrapper > .hint,

  488. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .hint,

  489. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .hint,

  490. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .hint,

  491. .has-tooltip .form-composite > .fieldset-wrapper.is-hovered > .fieldset-wrapper > .hint {

  492.   display: block;

  493. }

  494. 

  495. .has-tooltip .form-item.is-selected > .description,

  496. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description,

  497. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description,

  498. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description {

  499.   padding-left: 20px !important;

  500. }

  501. 

  502. .has-tooltip .form-item.is-selected > .description:before,

  503. .has-tooltip .form-item.is-selected > .fieldset-wrapper > .description:before,

  504. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .description:before,

  505. .has-tooltip .form-composite > .fieldset-wrapper.is-selected > .fieldset-wrapper > .description:before {

  506.   color: #dadada;

  507.   content: "x";

  508.   display: block;

  509.   font-family: sans-serif;

  510.   height: 20px;

  511.   left: 5px;

  512.   line-height: 18px;

  513.   margin-top: -10px;

  514.   position: absolute;

  515.   top: 50%;

  516.   width: 20px;

  517.   z-index: 0;

  518. }

  519. 

  520. .has-tooltip .form-item--tooltip-bottom > .description {

  521.   bottom: auto !important;

  522.   top: 100%;

  523. }

  524. 

  525. .has-tooltip .form-item--tooltip-bottom > .description::after {

  526.   border: 10px solid transparent;

  527.   border-right: 10px solid #000;

  528.   border-top: 10px solid transparent;

  529.   border-bottom: 10px solid #000;

  530.   bottom: auto;

  531.   top: -20px;

  532. }

  533. 

  534. .no-js .has-tooltip .form-item:hover > .fieldset-wrapper > .description,

  535. .no-js .has-tooltip .form-item:hover > .description {

  536.   bottom: 100%;

  537.   display: block;

  538.   opacity: 1 !important;

  539.   visibility: visible;

  540.   overflow: visible !important;

  541. }

  542. 

  543. .form-item .hint {

  544.   background: #828282;

  545.   border-radius: 50%;

  546.   color: #fff;

  547.   content: '?';

  548.   cursor: default;

  549.   display: none;

  550.   font-family: sans-serif;

  551.   font-size: 12px;

  552.   font-weight: 600;

  553.   line-height: 16px;

  554.   margin: 0;

  555.   width: 16px;

  556.   height: 16px;

  557.   position: absolute;

  558.   right: 5px;

  559.   text-align: center;

  560.   top: 5px;

  561.   z-index: 8;

  562. }

  563. 

  564. .form__header .form-item .hint {

  565.   top: 16px;

  566.   right: -5px;

  567. }

  568. 

  569. .form-item:hover > .hint {

  570.   display: block;

  571. }

  572. 

  573. /**

  574.  * Form items

  575.  */

  576. .form--slick .form-item {

  577.   background: none;

  578.   border-bottom: 1px solid #dadada;

  579.   border-top: 1px solid white;

  580.   bottom: -1px;

  581.   float: left;

  582.   font-size: 13px;

  583.   font-size: 0.8125rem;

  584.   line-height: 32px;

  585.   margin: 0;

  586.   min-height: 72px;

  587.   padding: 20px 12px 12px;

  588.   position: relative;

  589.   width: 100%;

  590. }

  591. 

  592. .form--slick .form-checkboxes .form-item,

  593. .form--slick .form-radios .form-item {

  594.   margin: 0;

  595. }

  596. 

  597. .form--slick .form-radios {

  598.   margin-bottom: 10px;

  599. }

  600. 

  601. .form--slick .form-type-vertical-tabs {

  602.   width: 100%;

  603. }

  604. 

  605. .form--slick table .form-item {

  606.   background: none;

  607.   border: 0;

  608.   min-height: 32px;

  609.   padding: 5px;

  610. }

  611. 

  612. .form--slick .form-item input,

  613. .form--slick .form-item select {

  614.   float: left;

  615.   max-width: 150px;

  616.   min-width: 40px;

  617. }

  618. 

  619. .form--slick .form-item .form-text,

  620. .form--slick .form-item .form-select,

  621. .form--slick .form-item .form-textarea {

  622.   background: #fff;

  623.   border: 1px solid #dadada;

  624.   border-radius: 0;

  625.   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;

  626.   line-height: 22px;

  627.   margin: 0; /* Fix for ember */

  628.   min-height: 22px;

  629.   padding: 2px 5px;

  630.   width: auto;

  631. }

  632. 

  633. .details--compact .form--slick .form-item .form-text,

  634. .form--slick .form-item .form-select,

  635. .form--slick .form-item .form-textarea {

  636.   width: 98%;

  637. }

  638. 

  639. .form--slick .form-item .form-text,

  640. .form--slick .form-item .form-select,

  641. .form--slick .form-item .form-textarea {

  642.   font-size: 14px;

  643.   font-size: 0.875rem;

  644. }

  645. 

  646. .form--slick .form-item .form-text:focus,

  647. .form--slick .form-item .form-select:focus,

  648. .form--slick .form-item .form-textarea:focus {

  649.   border-color: #ff6d2c;

  650.   box-shadow: 0 0 7px #ff6d2c;

  651. }

  652. 

  653. .form--slick .form-item .form-select {

  654.   line-height: 18px; /* Fix for Chrome linux */

  655.   min-height: 28px;

  656.   min-width: 120px;

  657.   padding: 4px 4px 2px; /* Fix for Chrome linux */

  658.   vertical-align: middle;

  659.   -moz-appearance: none;

  660.   -webkit-appearance: none;

  661.   appearance: none;

  662.   text-indent: .01px;

  663.   text-overflow: "";

  664.   white-space: nowrap; /* Fix for Bartik */

  665. }

  666. 

  667. .form--slick .form-type-textfield .field-prefix {

  668.   float: left;

  669.   line-height: 22px;

  670.   padding: 5px;

  671. }

  672. 

  673. .form--slick .form-type-textfield .field-suffix {

  674.   padding-left: 5px;

  675. }

  676. 

  677. .form--slick .form-radios {

  678.   margin-left: 180px;

  679. }

  680. 

  681. .form--half fieldset.form-item {

  682.   padding-left: 15px;

  683. }

  684. 

  685. /**

  686.  * Fixes for Adminimal gargantuan label.

  687.  */

  688. .form--slick .form-item label,

  689. .form--slick .form-item label.option {

  690.   font-weight: 400;

  691.   font-size: 14px;

  692.   font-size: 0.875rem;

  693.   line-height: 14px;

  694. }

  695. 

  696. .form--slick .form-item label {

  697.   display: block;

  698.   /* Overrides over-specified Seven */

  699.   padding: 2px 5px 2px 0 !important;

  700.   margin: 0;

  701.   /* text-align: right; */

  702.   white-space: normal;

  703. }

  704. 

  705. .form--slick .form-item.form-type-textfield input {

  706.   width: auto;

  707.   max-width: 150px;

  708. }

  709. 

  710. .form--slick .form-item.form-type-textfield .form-text--int {

  711.   max-width: 50px;

  712. }

  713. 

  714. .form--slick .form-item.form-type-textfield .js-expandable {

  715.   transition: width 0.6s ease-out 0.8s, max-width 0.5s linear 0s;

  716. }

  717. 

  718. .form--slick .form-item.form-type-textfield.is-focused {

  719.   min-height: 48px;

  720.   z-index: 3;

  721. }

  722. 

  723. .form--slick .form-item.form-type-textfield.is-focused .js-expandable {

  724.   max-width: 280px;

  725.   position: absolute;

  726.   width: 280px;

  727.   z-index: 2;

  728. }

  729. 

  730. .form--slick .fieldgroup.form-composite {

  731.   margin-bottom: -1px;

  732.   padding-bottom: 0;

  733.   padding-top: 0;

  734.   width: 100%;

  735. }

  736. 

  737. .form--slick .fieldgroup.form-composite > legend {

  738.   border-bottom: 1px solid #e7e7e7;

  739.   border-top: 1px solid #e7e7e7;

  740.   display: block;

  741.   font-size: 22px;

  742.   font-size: 1.375rem;

  743.   line-height: 42px;

  744.   margin-top: -1px;

  745.   min-height: 42px;

  746.   padding-right: 0 !important;

  747.   padding-top: 20px;

  748.   width: 100%;

  749. }

  750. 

  751. .form--slick .vertical-tabs .form-item,

  752. .form--slick .vertical-tabs .form-item.form-type-textfield.is-focused {

  753.   min-height: 76px;

  754. }

  755. 

  756. .form--slick .vertical-tabs .fieldgroup.form-composite {

  757.   background: none;

  758.   padding: 0;

  759. }

  760. 

  761. .form--slick .vertical-tabs .fieldgroup.form-composite .form-item {

  762.   margin: -1px -1px 0 0;

  763.   padding-top: 20px;

  764. }

  765. 

  766. .form--slick .vertical-tabs .fieldgroup.form-composite .form-item:nth-child(3n+1) {

  767.   border-left: 0;

  768. }

  769. 

  770. .form--slick .vertical-tabs .has-tooltip .details-wrapper {

  771.   padding: 0;

  772. }

  773. 

  774. .form--slick .vertical-tabs .details--responsive > .details-wrapper {

  775.   padding: 40px 0 0;

  776. }

  777. 

  778. .form--slick .vertical-tabs .details--responsive .form-item input,

  779. .form--slick .vertical-tabs .details--responsive .form-item select {

  780.   max-width: 100px;

  781.   margin: 0; /* Fix for Ember */

  782. }

  783. 

  784. .form--slick .vertical-tabs .details--responsive .form-item .form-checkbox {

  785.   max-width: 100%;

  786. }

  787. 

  788. /**

  789.  * Checkboxes.

  790.  */

  791. .form--slick .form-type-radio {

  792.   border: 0;

  793. }

  794. 

  795. .form--slick .form-type-radio,

  796. .form--slick .form-type-checkbox {

  797.   position: relative;

  798. }

  799. 

  800. .form--slick .form-type-radio input,

  801. .form--slick .form-type-checkbox input[type=checkbox] {

  802.   background: none;

  803.   cursor: pointer;

  804.   font-size: 12px;

  805.   font-size: 0.75rem;

  806.   height: 22px;

  807.   display: inline-block;

  808.   float: none;

  809.   margin: 0; /* Fix for Ember */

  810.   opacity: 0;

  811.   width: 22px;

  812.   vertical-align: middle;

  813.   -webkit-appearance: none;

  814.   -moz-appearance: none;

  815.   appearance: none;

  816.   z-index: 2;

  817. }

  818. 

  819. /* Fix for UNIX FF + Chrome */

  820. .form--slick .form-type-checkbox input[type=checkbox] {

  821.   left: auto;

  822.   margin-top: 2px;

  823.   max-width: 100%;

  824.   min-height: 22px;

  825.   min-width: 22px;

  826.   position: absolute;

  827.   top: auto;

  828. }

  829. 

  830. .form--slick .form-type-checkbox .field-suffix {

  831.   color: transparent;

  832. }

  833. 

  834. .form--slick .form-type-radio label,

  835. .form--slick .form-type-checkbox label,

  836. .form--slick .form-type-checkbox .field-suffix {

  837.   line-height: 18px;

  838.   position: relative;

  839. }

  840. 

  841. .form--slick .form-type-radio label.option,

  842. .form--slick .form-type-checkbox .field-suffix {

  843.   padding-left: 0;

  844. }

  845. 

  846. .form--slick .form-type-checkbox label::before {

  847.   background: none;

  848.   border: 0;

  849. }

  850. 

  851. .form--slick .form-type-radio label::before,

  852. .form--slick .form-type-checkbox .field-suffix::before {

  853.   content: '';

  854.   display: block;

  855.   position: absolute;

  856.   text-align: center;

  857.   width: 22px;

  858. }

  859. 

  860. .form--slick .form-type-radio label::before {

  861.   font-size: 12px;

  862.   font-size: 0.75rem;

  863. }

  864. 

  865. .form--slick .form-type-radio label::before,

  866. .form--slick .form-type-checkbox .field-suffix {

  867.   background: #fff;

  868.   outline: 0;

  869.   border: 2px solid #dadada;

  870.   width: 22px;

  871.   height: 22px;

  872.   line-height: 22px;

  873.   margin-right: 5px;

  874.   left: 0;

  875.   top: 4px;

  876.   text-align: center;

  877.   transition: all 0.4s ease-in-out 0s;

  878. }

  879. 

  880. .form--slick .form-type-checkbox .field-suffix {

  881.   display: inline-block;

  882.   left: auto;

  883.   right: auto;

  884.   top: -4px;

  885.   vertical-align: middle;

  886. }

  887. 

  888. .form--slick .form-type-radio .form-radio:checked + label::before {

  889.   font-size: 32px;

  890.   line-height: 18px;

  891. }

  892. 

  893. .form--slick .form-type-radio .form-radio:checked + label::before,

  894. .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix {

  895.   background: #fff;

  896.   outline: 0;

  897.   border-color: #ff6d2c;

  898.   color: #ff6d2c;

  899. }

  900. 

  901. .form--slick .form-type-radio .form-radio:focus,

  902. .form--slick .form-type-radio .form-checkbox:focus,

  903. .form--slick .form-type-checkbox .form-radio:focus,

  904. .form--slick .form-type-checkbox .form-checkbox:focus {

  905.   box-shadow: none;

  906. }

  907. 

  908. .form--slick .form-type-radio .form-radio:checked + label::before {

  909.   content: '\02022';

  910. }

  911. 

  912. .form--slick .form-type-checkbox .form-checkbox:checked + .field-suffix::before {

  913.   content: '\2713';

  914.   font-size: 16px;

  915.   line-height: 18px;

  916.   text-indent: -2px;

  917. }

  918. 

  919. .form--slick .form-type-radio label::before {

  920.   border-radius: 50%;

  921. }

  922. 

  923. /**

  924.  * Overrides

  925.  */

  926. .form--slick .form-type-textarea .grippie {

  927.   display: none;

  928. }

  929. 

  930. .form--slick .form-type-textarea .form-textarea {

  931.   resize: vertical;

  932. }

  933. 

  934. .form--slick .details-wrapper div[class*="-breakpoint"],

  935. .form--slick .vertical-tabs .details-wrapper div[class*="-unslick"] {

  936.   border: 0;

  937.   background: none;

  938. }

  939. 

  940. .form--slick .form-checkboxes {

  941.   border-top: 2px solid #e7e7e7;

  942.   clear: both;

  943.   margin-top: -1px;

  944.   width: 100%;

  945. }

  946. 

  947. /**

  948.  * Header

  949.  */

  950. .form--slick .form-item.fieldgroup.form-composite > legend {

  951.   padding: 10px 0;

  952. }

  953. 

  954. .form--slick .form-type-item,

  955. .ui-dialog-content .form--views > .details-wrapper > .description,

  956. .form--views > .details-wrapper > .description,

  957. .form--slick .form-item.fieldgroup.form-composite > legend,

  958. .form__title {

  959.   background: #fafafa;

  960.   clear: both;

  961.   display: block;

  962.   float: none;

  963.   font-size: 20px;

  964.   font-size: 1.25rem;

  965.   font-weight: 400;

  966.   line-height: 1.2;

  967.   margin: 0;

  968.   min-height: 42px;

  969.   padding: 10px 5px 10px !important;

  970.   text-align: center;

  971.   text-transform: uppercase;

  972.   width: 100%;

  973. }

  974. 

  975. .form--slick .form-item.form-item--sizes {

  976.   background: none;

  977.   border: 0;

  978.   min-height: 42px;

  979.   padding: 10px 0;

  980. }

  981. 

  982. td .form__title {

  983.   margin: -10px auto;

  984. }

  985. 

  986. .field-ui-overview td .form__title {

  987.   margin: 0 auto;

  988.   position: relative;

  989. }

  990. 

  991. .form--vanilla .form__header {

  992.   left: 0;

  993.   padding-left: 240px !important;

  994.   position: absolute;

  995.   text-align: left;

  996.   top: 0;

  997. }

  998. 

  999. .form--vanilla div[class*="-vanilla"] {

  1000.   background: none;

  1001.   border: 0;

  1002.   display: block;

  1003.   height: 62px;

  1004.   left: 0;

  1005.   position: absolute;

  1006.   top: 0;

  1007.   width: 100%;

  1008.   z-index: 3;

  1009. }

  1010. 

  1011. .form--slick .form-item.fieldgroup.form-composite > legend,

  1012. .form--slick .form-type-item,

  1013. .form__title {

  1014.   background: #e7e7e7;

  1015. }

  1016. 

  1017. .form--slick .details--no-checkboxes-label .form-item.fieldgroup.form-composite > legend {

  1018.   position: absolute !important;

  1019.   clip: rect(1px, 1px, 1px, 1px);

  1020.   overflow: hidden;

  1021.   height: 1px;

  1022.   width: 1px;

  1023.   word-wrap: normal;

  1024. }

  1025. 

  1026. .ui-dialog-content .form--views > .details-wrapper > .description small,

  1027. .form--slick .form-type-item small,

  1028. .form__title small {

  1029.   display: block;

  1030.   font-size: 14px;

  1031.   margin-top: -1px;

  1032.   text-transform: none;

  1033. }

  1034. 

  1035. .form__header {

  1036.   margin-bottom: 0;

  1037. }

  1038. 

  1039. .form--slick .form__header .form-item {

  1040.   background: none;

  1041.   border: 0;

  1042.   float: none;

  1043. }

  1044. 

  1045. .form--slick .form__header .form-item input {

  1046.   width: 210px;

  1047.   max-width: 210px;

  1048. }

  1049. 

  1050. .form--slick .form__header .form-item .form-checkbox {

  1051.   max-width: 100%;

  1052. }

  1053. 

  1054. .form--slick .form__header .form-item label {

  1055.   float: none;

  1056.   text-align: left;

  1057. }

  1058. 

  1059. .form--slick .form__header .form-item-skin label,

  1060. .form--slick .form__header .form-item-breakpoints label {

  1061.   width: auto;

  1062. }

  1063. 

  1064. .form--slick .form__header div[class*="-breakpoint"] input {

  1065.   width: 60px;

  1066. }

  1067. 

  1068. .form--slick .form__header .form-item-skin .description {

  1069.   bottom: 90% !important;

  1070.   max-width: 480px;

  1071.   width: 480px;

  1072. }

  1073. 

  1074. /**

  1075.  * Radios

  1076.  */

  1077. .form--slick .form-radios .form-item {

  1078.   background: none;

  1079.   border: 1px solid transparent;

  1080.   cursor: pointer;

  1081.   display: inline-block;

  1082.   padding: 0;

  1083.   width: auto;

  1084. }

  1085. 

  1086. .form--slick .form-radios .form-item input {

  1087.   cursor: pointer;

  1088.   display: block;

  1089.   height: 32px;

  1090.   opacity: 0;

  1091.   position: absolute;

  1092.   min-width: 60px;

  1093.   width: 100%;

  1094.   z-index: 9;

  1095. }

  1096. 

  1097. .form--slick .form-radios label {

  1098.   display: block;

  1099.   font-size: 12px;

  1100.   line-height: 12px;

  1101.   text-align: center;

  1102.   cursor: pointer;

  1103.   width: 100%;

  1104.   min-height: 45px;

  1105.   padding: 15px 5px 0;

  1106.   position: relative;

  1107. }

  1108. 

  1109. /* Fix for Shiny, Adminimal */

  1110. .ui-dialog-content .form--slick .form-item,

  1111. .ui-dialog-content .form--slick .form-item .form-item {

  1112.   clear: none;

  1113. }

  1114. 

  1115. .ui-dialog-content .form--views > .details-wrapper {

  1116.   padding: 0 !important; /* Fix for Rubik */

  1117. }

  1118. 

  1119. .ui-dialog-content .form--slick > summary {

  1120.   background: none;

  1121.   border: 0;

  1122.   margin: 0;

  1123.   padding: 0;

  1124.   position: absolute;

  1125.   top: 0;

  1126. }

  1127. 

  1128. .ui-dialog-content .form--slick > summary .details-legend {

  1129.   margin: 0;

  1130.   padding: 10px 15px;

  1131.   position: absolute;

  1132.   text-transform: uppercase;

  1133.   white-space: nowrap;

  1134. }

  1135. 

  1136. .form--slick .form-item.form-type-radios,

  1137. .form--slick .form-item.fieldgroup.form-composite {

  1138.   border-left: 0;

  1139.   border-right: 0;

  1140.   clear: both;

  1141.   float: none;

  1142.   padding: 0;

  1143.   width: 100%;

  1144. }

  1145. 

  1146. /**

  1147.  * Misc

  1148.  */

  1149. .no-padding {

  1150.   padding: 0 !important;

  1151. }

  1152. 

  1153. #edit-label-machine-name-suffix {

  1154.   padding-left: 5px;

  1155. }

  1156. 

  1157. .path-admin-config-media-slick #main {

  1158.   width: 100%;

  1159. }

  1160. 

  1161. #field-display-overview .field-plugin-settings-edit-form .form--slick .form-item {

  1162.   margin: 0;

  1163. }

  1164. 

  1165. .form--optionset #edit-options {

  1166.   clear: both;

  1167. }

  1168. 

  1169. /* Prevents overlapping Views edit options */

  1170. .ui-front [data-drupal-selector="edit-options"] details {

  1171.   clear: both;

  1172. }

  1173. 

  1174. [data-drupal-selector="edit-options-settings"] details {

  1175.   clear: none;

  1176. }

  1177. 

  1178. .form--slick.form--half {

  1179.   clear: both;

  1180.   margin: 30px auto;

  1181. }

  1182. 

  1183. .form--views.form--half {

  1184.   margin-top: 60px;

  1185. }

  1186. 

  1187. .form--slick .form-item label {

  1188.   line-height: 16px;

  1189. }

  1190. 

  1191. .form--slick .form-actions,

  1192. .form--optionset #edit-options {

  1193.   clear: both;

  1194. }

  1195. 

  1196. .form--slick .form-wrapper--table .form-item {

  1197.   padding-left: 15px;

  1198. }

  1199. 

  1200. .form--slick .form-wrapper--table td .form-item {

  1201.   padding-left: 0;

  1202. }

  1203. 

  1204. .form--slick .form-wrapper--table th:first-child,

  1205. .form--slick .form-wrapper--table td:first-child {

  1206.   text-align: right;

  1207. }

  1208. 

  1209. .form--slick .form-wrapper--table td:first-child {

  1210.   font-size: 18px;

  1211.   font-weight: 600;

  1212.   line-height: 36px;

  1213.   text-transform: uppercase;

  1214. }

  1215. 

  1216. .form--slick .form-item--right {

  1217.   text-align: right;

  1218. }

  1219. 

  1220. .form--slick .form-item--left {

  1221.   text-align: left;

  1222. }

  1223. 

  1224. .form--slick .form-item--center {

  1225.   text-align: center;

  1226. }

  1227. 

  1228. @media screen and (min-width: 760px) {

  1229.   .form--slick .form-item {

  1230.     border-right: 1px solid #e7e7e7;

  1231.     padding-left: 0;

  1232.     padding-right: 0;

  1233.   }

  1234. 

  1235.   .form--slick .form-item label {

  1236.     /* Overrides over-specified Seven */

  1237.     padding: 2px 5px 2px 5px !important;

  1238.   }

  1239. 

  1240.   .form--optionset .form-item,

  1241.   .form--slick .vertical-tabs__menu-item,

  1242.   .form--slick .vertical-tabs__menu-item.is-selected {

  1243.     width: 49.9999%;

  1244.   }

  1245. 

  1246.   .form--slick .vertical-tabs__menu-item,

  1247.   .form--slick .vertical-tabs__menu-item.is-selected {

  1248.     float: left;

  1249.   }

  1250. 

  1251.   .form--slick .form-item label {

  1252.     text-align: right;

  1253.   }

  1254. 

  1255.   .form--half .form-item,

  1256.   .toolbar-tray-open .form--optionset .form-item {

  1257.     width: 100%;

  1258.   }

  1259. 

  1260.   .form--slick .form-type-vertical-tabs {

  1261.     width: 100% !important;

  1262.   }

  1263. 

  1264.   .has-tooltip .form-item > .description,

  1265.   .has-tooltip .form-composite > .fieldset-wrapper > .description {

  1266.     max-width: 100%;

  1267.   }

  1268. 

  1269.   .form--slick .form__header .form-item {

  1270.     display: inline-block;

  1271.     margin-right: -5px;

  1272.     vertical-align: top;

  1273.     padding-left: 4px;

  1274.     padding-right: 4px;

  1275.   }

  1276. 

  1277.   .form--slick .vertical-tabs .has-tooltip .details-wrapper {

  1278.     margin-right: -4px;

  1279.   }

  1280. 

  1281.   .form--slick .form__half--last .form-item,

  1282.   .toolbar-vertical .form--slick .form__half--last .form-item {

  1283.     float: right;

  1284.     width: auto;

  1285.   }

  1286. 

  1287.   .form--slick .form-item label {

  1288.     float: left;

  1289.     width: 160px;

  1290.     text-align: right;

  1291.     white-space: normal;

  1292.   }

  1293. 

  1294.   .form--slick.form--half .form-checkboxes .form-item {

  1295.     width: 33.3333%;

  1296.   }

  1297. 

  1298.   .form--slick.form--image .form-wrapper--caption .form-item {

  1299.     width: 49.9999%;

  1300.   }

  1301. 

  1302.   .field-plugin-settings-editing .form--slick {

  1303.     margin-top: 62px;

  1304.   }

  1305. 

  1306.   .form--slick.form--half {

  1307.     margin-bottom: 42px;

  1308.   }

  1309. 

  1310.   .ui-dialog .form--slick.form--half .form-item--style,

  1311.   .scroll .form--slick.form--half .form-item--style,

  1312.   .field-plugin-settings-editing .form--slick .form-item--style {

  1313.     background: none;

  1314.     border: 0;

  1315.     height: 42px;

  1316.     min-height: 32px;

  1317.     padding: 0;

  1318.     position: absolute;

  1319.     right: 0;

  1320.     top: -42px;

  1321.     z-index: 9;

  1322.   }

  1323. 

  1324.   .form--slick .form__header .form-type-checkbox {

  1325.     max-width: 160px;

  1326.   }

  1327. 

  1328.   .form--slick #edit-delete {

  1329.     float: right;

  1330.   }

  1331. }

  1332. 

  1333. @media screen and (min-width: 1280px) {

  1334.   .form--optionset .form-item,

  1335.   .toolbar-tray-open .form--optionset .form-item {

  1336.     width: 33.2666%;

  1337.   }

  1338. 

  1339.   .form__half,

  1340.   .form--half .form-item,

  1341.   .toolbar-vertical.toolbar-tray-open .form--slick .form-item {

  1342.     width: 49.9999%;

  1343.   }

  1344. 

  1345.   .form__half {

  1346.     float: left;

  1347.   }

  1348. 

  1349.   .form--slick .vertical-tabs__menu-item,

  1350.   .form--slick .vertical-tabs__menu-item.is-selected,

  1351.   .form--optionset td .form-item,

  1352.   .toolbar-tray-open .form--optionset td .form-item {

  1353.     float: none;

  1354.     width: 100%;

  1355.   }

  1356. 

  1357.   .form--slick .form-type-item {

  1358.     float: left;

  1359.     width: 100%;

  1360.   }

  1361. 

  1362.   .toolbar-tray-open .form--slick .form__half--last .form-item {

  1363.     float: right;

  1364.     width: auto;

  1365.   }

  1366. 

  1367.   .form--slick.form--half .form-checkboxes .form-item {

  1368.     width: 24.9999%;

  1369.   }

  1370. 

  1371.   .form--slick.form--image .form-wrapper--caption .form-item,

  1372.   .form--slick.form--caption-2 .form-wrapper--caption .form-item,

  1373.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-2 .form-item {

  1374.     width: 49.9999%;

  1375.   }

  1376. 

  1377.   .form--slick.form--caption-3 .form-wrapper--caption .form-item,

  1378.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-3 .form-item {

  1379.     width: 33.3333%;

  1380.   }

  1381. 

  1382.   .form--slick .form-wrapper--checkboxes.form-wrapper--count-max .form-item label {

  1383.     width: 160px;

  1384.   }

  1385. 

  1386.   .has-tooltip .form-item--tooltip-wide > .description {

  1387.     max-width: 480px;

  1388.     min-width: 480px;

  1389.   }

  1390. 

  1391.   .form--slick .form-item label {

  1392.     width: 180px;

  1393.   }

  1394. 

  1395.   .form--slick.form--half {

  1396.     max-width: 960px;

  1397.   }

  1398. }

  1399. 

  1400. @media screen and (min-width: 1400px) {

  1401.   .form--slick .form-item input,

  1402.   .form--slick .form-item select {

  1403.     max-width: 180px;

  1404.     min-width: 180px;

  1405.   }

  1406. }

  1407. 

  1408. /** Declutter form when Vanilla is enabled coz table form states are broken. */

  1409. .form--vanilla-on .form__title--media-switch,

  1410. .form--vanilla-on .form__title--fields,

  1411. .form--vanilla-on .form__title--breakpoints,

  1412. .form--vanilla-on .tableresponsive-toggle-columns,

  1413. .form--vanilla-on .form-wrapper--table-breakpoints,

  1414. .form--responsive-image-on .form__title--breakpoints,

  1415. .form--responsive-image-on .tableresponsive-toggle-columns,

  1416. .form--responsive-image-on .form-wrapper--table-breakpoints,

  1417. .form--responsive-image-on .form-item--sizes,

  1418. .form--media-switch-rendered .form__title--breakpoints,

  1419. .form--media-switch-rendered .tableresponsive-toggle-columns,

  1420. .form--media-switch-rendered .form-wrapper--table-breakpoints,

  1421. .form--media-switch-rendered .form-item--background,

  1422. .form--media-switch-rendered .form-item--image-style,

  1423. .form--media-switch-rendered .form-item--ratio {

  1424.   display: none !important;

  1425. }