Packages

phoenix_duskmoon

6.2.0
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 components button.css
Raw

assets/css/components/button.css 



@layer components {

  .btn-noise {

    position: relative;

    width: 287px;

    height: 36px;

    background: none;

    font-family: "Josefin Sans", sans-serif;

    font-size: 24px;

    cursor: pointer;

    border: none;

    --sy: 1;

    --aps: running;

    --op: 0;



    &::after {

      content: attr(data-content);

      opacity: var(--op, 1);

      transition: opacity 0.4s;

    }

    & > i {

      position: absolute;

      left: var(--left, 0);

      top: 50%;

      width: 3px;

      height: 72px;

      transform: translateY(-50%) scaleY(var(--sy, 0));

      transition: transform var(--duration) ease-out;



      &::after {

        content: " ";

        position: absolute;

        inset: 0;

        background-image: linear-gradient(#fff, hsl(var(--hue, 0), 75%, 75%));

        border-radius: 50%;

        animation: btn-noise var(--duration) infinite ease-in-out alternate;

        animation-play-state: var(--aps, paused);

      }



      &:nth-child(1) {

        --left: 0px;

        --duration: 387ms;

        --size: 0.053;

        --hue: 0;

      }

      &:nth-child(2) {

        --left: 4px;

        --duration: 320ms;

        --size: 0.857;

        --hue: 5;

      }

      &:nth-child(3) {

        --left: 8px;

        --duration: 231ms;

        --size: 0.183;

        --hue: 10;

      }

      &:nth-child(4) {

        --left: 12px;

        --duration: 231ms;

        --size: 0.699;

        --hue: 15;

      }

      &:nth-child(5) {

        --left: 16px;

        --duration: 397ms;

        --size: 0.634;

        --hue: 20;

      }

      &:nth-child(6) {

        --left: 20px;

        --duration: 315ms;

        --size: 0.152;

        --hue: 25;

      }

      &:nth-child(7) {

        --left: 24px;

        --duration: 360ms;

        --size: 0.552;

        --hue: 30;

      }

      &:nth-child(8) {

        --left: 28px;

        --duration: 379ms;

        --size: 0.02;

        --hue: 35;

      }

      &:nth-child(9) {

        --left: 32px;

        --duration: 337ms;

        --size: 0.039;

        --hue: 40;

      }

      &:nth-child(10) {

        --left: 36px;

        --duration: 267ms;

        --size: 0.531;

        --hue: 45;

      }

      &:nth-child(11) {

        --left: 40px;

        --duration: 385ms;

        --size: 0.199;

        --hue: 50;

      }

      &:nth-child(12) {

        --left: 44px;

        --duration: 268ms;

        --size: 0.863;

        --hue: 55;

      }

      &:nth-child(13) {

        --left: 48px;

        --duration: 370ms;

        --size: 0.334;

        --hue: 60;

      }

      &:nth-child(14) {

        --left: 52px;

        --duration: 266ms;

        --size: 0.951;

        --hue: 65;

      }

      &:nth-child(15) {

        --left: 56px;

        --duration: 340ms;

        --size: 0.841;

        --hue: 70;

      }

      &:nth-child(16) {

        --left: 60px;

        --duration: 255ms;

        --size: 0.388;

        --hue: 75;

      }

      &:nth-child(17) {

        --left: 64px;

        --duration: 222ms;

        --size: 0.184;

        --hue: 80;

      }

      &:nth-child(18) {

        --left: 68px;

        --duration: 390ms;

        --size: 0.383;

        --hue: 85;

      }

      &:nth-child(19) {

        --left: 72px;

        --duration: 370ms;

        --size: 0.974;

        --hue: 90;

      }

      &:nth-child(20) {

        --left: 76px;

        --duration: 285ms;

        --size: 0.478;

        --hue: 95;

      }

      &:nth-child(21) {

        --left: 80px;

        --duration: 252ms;

        --size: 0.402;

        --hue: 100;

      }

      &:nth-child(22) {

        --left: 84px;

        --duration: 298ms;

        --size: 0.567;

        --hue: 105;

      }

      &:nth-child(23) {

        --left: 88px;

        --duration: 389ms;

        --size: 0.926;

        --hue: 110;

      }

      &:nth-child(24) {

        --left: 92px;

        --duration: 368ms;

        --size: 0.137;

        --hue: 115;

      }

      &:nth-child(25) {

        --left: 96px;

        --duration: 219ms;

        --size: 0.111;

        --hue: 120;

      }

      &:nth-child(26) {

        --left: 100px;

        --duration: 344ms;

        --size: 0.12;

        --hue: 125;

      }

      &:nth-child(27) {

        --left: 104px;

        --duration: 329ms;

        --size: 0.368;

        --hue: 130;

      }

      &:nth-child(28) {

        --left: 108px;

        --duration: 241ms;

        --size: 0.316;

        --hue: 135;

      }

      &:nth-child(29) {

        --left: 112px;

        --duration: 393ms;

        --size: 0.463;

        --hue: 140;

      }

      &:nth-child(30) {

        --left: 116px;

        --duration: 304ms;

        --size: 0.372;

        --hue: 145;

      }

      &:nth-child(31) {

        --left: 120px;

        --duration: 300ms;

        --size: 0.39;

        --hue: 150;

      }

      &:nth-child(32) {

        --left: 124px;

        --duration: 366ms;

        --size: 0.785;

        --hue: 155;

      }

      &:nth-child(33) {

        --left: 128px;

        --duration: 337ms;

        --size: 0.499;

        --hue: 160;

      }

      &:nth-child(34) {

        --left: 132px;

        --duration: 262ms;

        --size: 0.724;

        --hue: 165;

      }

      &:nth-child(35) {

        --left: 136px;

        --duration: 230ms;

        --size: 0.406;

        --hue: 170;

      }

      &:nth-child(36) {

        --left: 140px;

        --duration: 333ms;

        --size: 0.057;

        --hue: 175;

      }

      &:nth-child(37) {

        --left: 144px;

        --duration: 348ms;

        --size: 0.347;

        --hue: 180;

      }

      &:nth-child(38) {

        --left: 148px;

        --duration: 229ms;

        --size: 0.683;

        --hue: 185;

      }

      &:nth-child(39) {

        --left: 152px;

        --duration: 240ms;

        --size: 0.072;

        --hue: 190;

      }

      &:nth-child(40) {

        --left: 156px;

        --duration: 325ms;

        --size: 0.557;

        --hue: 195;

      }

      &:nth-child(41) {

        --left: 160px;

        --duration: 304ms;

        --size: 0.42;

        --hue: 200;

      }

      &:nth-child(42) {

        --left: 164px;

        --duration: 202ms;

        --size: 0.406;

        --hue: 205;

      }

      &:nth-child(43) {

        --left: 168px;

        --duration: 383ms;

        --size: 0.818;

        --hue: 210;

      }

      &:nth-child(44) {

        --left: 172px;

        --duration: 362ms;

        --size: 0.09;

        --hue: 215;

      }

      &:nth-child(45) {

        --left: 176px;

        --duration: 393ms;

        --size: 0.61;

        --hue: 220;

      }

      &:nth-child(46) {

        --left: 180px;

        --duration: 287ms;

        --size: 0.166;

        --hue: 225;

      }

      &:nth-child(47) {

        --left: 184px;

        --duration: 333ms;

        --size: 0.472;

        --hue: 230;

      }

      &:nth-child(48) {

        --left: 188px;

        --duration: 223ms;

        --size: 0.035;

        --hue: 235;

      }

      &:nth-child(49) {

        --left: 192px;

        --duration: 310ms;

        --size: 0.117;

        --hue: 240;

      }

      &:nth-child(50) {

        --left: 196px;

        --duration: 220ms;

        --size: 0.943;

        --hue: 245;

      }

      &:nth-child(51) {

        --left: 200px;

        --duration: 219ms;

        --size: 0.221;

        --hue: 250;

      }

      &:nth-child(52) {

        --left: 204px;

        --duration: 274ms;

        --size: 0.555;

        --hue: 255;

      }

      &:nth-child(53) {

        --left: 208px;

        --duration: 339ms;

        --size: 0.712;

        --hue: 260;

      }

      &:nth-child(54) {

        --left: 212px;

        --duration: 214ms;

        --size: 0.857;

        --hue: 265;

      }

      &:nth-child(55) {

        --left: 216px;

        --duration: 215ms;

        --size: 0.565;

        --hue: 270;

      }

      &:nth-child(56) {

        --left: 220px;

        --duration: 247ms;

        --size: 0.684;

        --hue: 275;

      }

      &:nth-child(57) {

        --left: 224px;

        --duration: 283ms;

        --size: 0.134;

        --hue: 280;

      }

      &:nth-child(58) {

        --left: 228px;

        --duration: 362ms;

        --size: 0.734;

        --hue: 285;

      }

      &:nth-child(59) {

        --left: 232px;

        --duration: 363ms;

        --size: 0.622;

        --hue: 290;

      }

      &:nth-child(60) {

        --left: 236px;

        --duration: 396ms;

        --size: 0.095;

        --hue: 295;

      }

      &:nth-child(61) {

        --left: 240px;

        --duration: 245ms;

        --size: 0.847;

        --hue: 300;

      }

      &:nth-child(62) {

        --left: 244px;

        --duration: 278ms;

        --size: 0.169;

        --hue: 305;

      }

      &:nth-child(63) {

        --left: 248px;

        --duration: 375ms;

        --size: 0.185;

        --hue: 310;

      }

      &:nth-child(64) {

        --left: 252px;

        --duration: 392ms;

        --size: 0.357;

        --hue: 315;

      }

      &:nth-child(65) {

        --left: 256px;

        --duration: 315ms;

        --size: 0.284;

        --hue: 320;

      }

      &:nth-child(66) {

        --left: 260px;

        --duration: 215ms;

        --size: 0.508;

        --hue: 325;

      }

      &:nth-child(67) {

        --left: 264px;

        --duration: 372ms;

        --size: 0.019;

        --hue: 330;

      }

      &:nth-child(68) {

        --left: 268px;

        --duration: 232ms;

        --size: 0.906;

        --hue: 335;

      }

      &:nth-child(69) {

        --left: 272px;

        --duration: 262ms;

        --size: 0.974;

        --hue: 340;

      }

      &:nth-child(70) {

        --left: 276px;

        --duration: 349ms;

        --size: 0.302;

        --hue: 345;

      }

      &:nth-child(71) {

        --left: 280px;

        --duration: 293ms;

        --size: 1;

        --hue: 350;

      }

      &:nth-child(72) {

        --left: 284px;

        --duration: 315ms;

        --size: 0.186;

        --hue: 355;

      }



    }



    &:hover {

      border: none;

      --sy: 1;

      --aps: running;

      --op: 0;

    }

  }



  @keyframes btn-noise {

    0% {

      transform: scaleY(calc(1 - (var(--size, 0))));

    }

    100% {

      transform: scaleY(calc(1 + (var(--size, 0))));

    }

  }

}