CSS problems inside editor
-
Hi Guys,
I find a problems where CSS from other plugins messup with the kirki CSS and broke editor.
One woocommerce addon is great example “Amazon Woocommerce fullfilment” what broke
.switch
button. I made some CSS updates in the Kirki but is better to you know about it..customize-control-kirki-switch .switch { border: none !important; margin-bottom: 1.5rem !important; outline: 0 !important; padding: 0 !important; width: 100% !important; height: inherit !important; user-select: none !important; border-radius: 3rem !important; } .customize-control-kirki-toggle .switch { border: 1px solid #b4b9be !important; display: inline-block !important; width: 35px !important; height: 12px !important; border-radius: 8px !important; background: #b4b9be !important; vertical-align: middle !important; position: relative !important; top: 4px !important; cursor: pointer !important; user-select: none !important; transition: background 350ms ease !important; } .customize-control-kirki-toggle .switch:after, .customize-control-kirki-toggle .switch:before { content: "" !important; display: block !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; position: absolute !important; top: 50% !important; left: -3px !important; transition: all 350ms cubic-bezier(0, 0.95, 0.38, 0.98), background 150ms ease !important; } .customize-control-kirki-toggle .switch:before { background: rgba(0, 0, 0, 0.2) !important; transform: translate3d(0, -50%, 0) scale(0) !important; } .customize-control-kirki-toggle .switch:after { background: #999 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; transform: translate3d(0, -50%, 0) !important; } .customize-control-kirki-toggle .switch:active:before { transform: translate3d(0, -50%, 0) scale(3) !important; } .customize-control-kirki-toggle input:checked + .switch:before { background: rgba(0, 115, 170, 0.075) !important; transform: translate3d(100%, -50%, 0) scale(1) !important; } .customize-control-kirki-toggle input:checked + .switch:after { background: #0073aa !important; transform: translate3d(100%, -50%, 0) !important; } .customize-control-kirki-toggle input:checked + .switch:active:before { background: rgba(0, 115, 170, 0.075) !important; transform: translate3d(100%, -50%, 0) scale(3) !important; }
Generaly I put
!important
on all CSS rules and fix problem but can be messy in the next updates.Thanks!
- The topic ‘CSS problems inside editor’ is closed to new replies.