zobweyt Comments - Answer Overflow

zobweyt

Explore posts from servers

CC#KPCKevin Powell - Community SSolidJS

Posts Comments

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

Thank you for the help!

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

Oh, sorry, didn't see the message. I think I'll stick with this one for now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

This one is actually made with some javascript, but I'm looking if it's possible with CSS only

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

This one also has a delay on hover, and the one with :focus works weird

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

I'm trying to achieve similar behavior. As you can see, the active effect doesn't disappear immediately after click, there is a delay before changing from active color to idle color

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

Yeah, sorry, maybe I was unclear button - some background color - transition duration 300ms, transition delay 0ms button:hover - change background color to a darker one - transition duration 300ms, transition delay 0ms button:active - change the background color to an even darker one - transition duration 0ms - before coming back to the idle state it should have a delay of 300ms (i.e. when you release the mouse button it should wait 300ms before changing from #1122bd to #3446eb), so the active effect doesn't disappear immediately after click Take this code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

This one is missing here:

- before coming back to the idle state it should have a delay of 300ms (i.e. when you release the mouse button it should wait 300ms before changing from #1122bd to #3446eb), so the active effect doesn't disappear immediately after click

How do I add this effect?

16 replies

KPCKevin Powell - Community

•Created by zobweyt on 11/30/2024 in #front-end

How to increase the duration of pseudo classes in CSS?

I want the active state to last longer. My code works well with just two states. If I'd add hover state, it will delay there too

16 replies

SSolidJS

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

I came up with this, but now it seems like you need to re-invent the whole <Tooltip> component

export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}

export default function tooltip(trigger: HTMLElement, title: Accessor<string>) {
  const [ref, setRef] = createSignal<HTMLElement | undefined>(undefined);

  onMount(() => {
    trigger.addEventListener("mouseover", () => {
      Portal({
        ref: setRef,
        children: title(),
      });
    });
  });

  createEffect(() => {
    trigger.addEventListener("mouseleave", () => {
      ref()?.remove();
    });
  });
}

7 replies

SSolidJS

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

I came up with this. However, it renders the whole element as a <Portal>. Can you render it in the same exact spot?

import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

import { type Accessor, createSignal } from "solid-js";
import { render, Portal } from "solid-js/web";

import { Tooltip } from "@kobalte/core/tooltip";

export default function tooltip(el: HTMLElement, title: Accessor<string>) {
  Portal({
    get children() {
      return (
        <Tooltip>
          <Tooltip.Trigger as={"span"}>{el}</Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content>{title()}</Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip>
      );
    },
  });
}

declare module "solid-js" {
  namespace JSX {
    interface DirectiveFunctions {
      tooltip: typeof tooltip;
    }
  }
}

function App() {
  const [count, setCount] = createSignal<number>(0);

  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      use:tooltip="Push to increment count"
    >
      {count()}
    </button>
  );
}

render(() => <App />, document.getElementById("app")!);

7 replies

SSolidJS

•Created by zobweyt on 10/13/2024 in #support

Using JSX in custom directives

How would you create a portal? What do you mean? Using document.appendChild()?

7 replies

KPCKevin Powell - Community

•Created by zobweyt on 10/11/2024 in #front-end