Support » Plugin: Kirki Customizer Framework » 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.