.customize-control-ast-responsive-spacing { /* Unit Screen wrap */ } .customize-control-ast-responsive-spacing .customize-control-title { display: inline-block; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-outer-wrapper { display: flex; position: relative; } .customize-control-ast-responsive-spacing .ast-spacing-input-item { margin: 0 2px; -moz-appearance: textfield; } .customize-control-ast-responsive-spacing .ast-spacing-input-item input::-webkit-inner-spin-button, .customize-control-ast-responsive-spacing .ast-spacing-input-item input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-btns { display: block; text-align: center; line-height: 2; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 0 3px 3px 0; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-btns > li { margin-bottom: 0; display: none; width: 35px; height: 26px; padding: 2px 0; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-btns > li.active { display: inline-block; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-btns button[type="button"] { padding: 0; cursor: pointer; background: none; border: none; opacity: .75; outline: none; width: 100%; height: 100%; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-btns button[type="button"] > i { font-size: 13px; height: 15px; line-height: 15px; vertical-align: middle; } .customize-control-ast-responsive-spacing .input-wrapper.ast-spacing-responsive-wrapper { display: inline-flex; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-units { position: absolute; transform: translateY(-100%); font-size: 11px; text-transform: uppercase; top: 0; right: 0; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-units li.single-unit { display: inline-block; margin-left: 6px; width: 16px; text-align: center; user-select: none; opacity: 0.6; } .customize-control-ast-responsive-spacing .ast-spacing-responsive-units li.single-unit.active { opacity: 1; font-weight: 600; color: #0073aa; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper { display: none; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li { text-align: center; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; cursor: pointer; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li input.ast-spacing-input { text-align: center; display: block; font-size: 12px; padding: 15px 0; width: 100%; height: 28px; border: 1px solid #dddddd; border-radius: 3px; box-shadow: none; transition: all 0.3s; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li input.ast-spacing-input:hover, .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li input.ast-spacing-input:focus, .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li input.ast-spacing-input:active { border-color: #1e8cbe; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper li .ast-spacing-connected { color: #1e8cbe; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper.active { display: flex; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper span.ast-spacing-title { text-transform: uppercase; font-size: 10px; opacity: .75; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link { order: 2; margin-left: 2px; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link .dashicons { padding: 2px 0; font-size: 12px; line-height: 28px; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link .ast-spacing-connected { display: none; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link.disconnected .ast-spacing-disconnected { display: none; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link.disconnected .ast-spacing-connected { display: block; } .customize-control-ast-responsive-spacing .input-wrapper .ast-spacing-wrapper .ast-spacing-input-item-link span { width: 35px; height: 26px; line-height: 28px; font-size: 14px; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 3px 0 0 3px; border-right-width: 0; } .customize-control-ast-responsive-spacing .ast-spacing-wrapper > li:nth-child(2) { margin-left: 0; }