Packages

phoenix_duskmoon

7.1.1
9.9.2 9.9.1 9.9.0 9.8.0 9.7.1 9.7.0 9.6.4 9.6.3 9.6.2 9.6.1 9.6.0 9.5.4 9.5.3 9.5.2 9.5.1 9.5.0 9.4.3 9.4.2 9.4.1 9.4.0 9.3.0 9.2.0 9.1.4 9.1.3 9.1.1 9.1.1-rc.1 retired 9.0.1 9.0.0-rc.3 9.0.0-rc.2 9.0.0-rc.1 8.0.0 7.2.1 7.2.0 7.1.3 7.1.2 7.1.1 6.3.2 6.3.1 6.3.0 6.2.0 6.1.3 6.1.2 6.1.1 6.1.0 6.0.10 6.0.9 6.0.8 6.0.7 6.0.6 6.0.5 6.0.4 6.0.3 6.0.2 6.0.1 6.0.0 5.2.0-beta.5 5.2.0-beta.4 5.2.0-beta.3 5.2.0-beta.2 5.2.0-beta.1 5.1.0 5.0.6 5.0.5 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0 4.6.6 4.6.5 4.6.4 4.6.3 4.6.2 4.6.1 4.6.0 4.5.2 4.5.1 4.5.0 4.4.4 4.4.3 4.4.2 4.4.1 4.4.0 4.3.2 4.3.1 4.3.0 4.2.0 4.1.1 4.1.0 4.0.0

Duskmoon UI component library for Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
90 Versions
7 Dependencies
Dependants
Files
Activity
phoenix_duskmoon assets css neumorphic radio.css
Raw

assets/css/neumorphic/radio.css 

@layer components {

  

  .neumorphic-radio {

    display: inline-grid;

    place-items: center;

    position: relative;

    flex-shrink: 0;

    cursor: pointer;

    appearance: none;

    border-radius: calc(infinity * 1px);

    padding: calc(0.25rem * 1);

    vertical-align: middle;

    --size: calc(var(--size-selector, 0.25rem) * 6);

    width: var(--size);

    height: var(--size);

    color: var(--input-color, currentColor);

    &:before {

      display: block;

      width: 100%;

      aspect-ratio: 1 / 1;

      border-radius: calc(infinity * 1px);

      --tw-content: "";

      content: var(--tw-content);

      background-size: auto, calc(var(--noise) * 100%);

      background-image: none, var(--fx-noise);

    }

    &:focus-visible {

      outline: 2px solid currentColor;

    }

    &:checked, &[aria-checked="true"] {

      animation: radio 0.2s ease-out;

      border-color: currentColor;

      background-color: var(--neumorphic-text-color);

      &:before {

        background-color: currentColor;

        @media print {

          outline: .25rem solid;

        }

        @media print {

          outline-offset: -1rem;

        }

        box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));

        @media (forced-colors: active) {

          outline-style: var(--tw-outline-style);

          outline-width: 1px;

          outline-offset: calc(1px * -1);

        }

      }

    }

    &:disabled {

      cursor: not-allowed;

      opacity: 20%;

    }

  }



}