Module: Studio::UiPrimitives

Defined in:
lib/studio/ui_primitives.rb

Constant Summary collapse

EMOJI_SWAP_CSS = 
<<~CSS
  .studio-emoji-swap,
  .nav-emoji-swap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.25rem;
    overflow: hidden;
  }

  .studio-emoji-swap > span,
  .nav-emoji-swap > span {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 240ms cubic-bezier(0.34, 1.2, 0.5, 1), opacity 180ms ease;
  }

  .studio-emoji-swap-base,
  .nav-emoji-base {
    transform: translateX(0);
    opacity: 1;
  }

  .studio-emoji-swap-hover,
  .nav-emoji-hover {
    transform: translateX(-110%);
    opacity: 0;
  }

  .group:hover .studio-emoji-swap-base,
  .group:focus-visible .studio-emoji-swap-base,
  .group:focus-within .studio-emoji-swap-base,
  .group:hover .nav-emoji-base,
  .group:focus-visible .nav-emoji-base,
  .group:focus-within .nav-emoji-base {
    transform: translateX(110%);
    opacity: 0;
  }

  .group:hover .studio-emoji-swap-hover,
  .group:focus-visible .studio-emoji-swap-hover,
  .group:focus-within .studio-emoji-swap-hover,
  .group:hover .nav-emoji-hover,
  .group:focus-visible .nav-emoji-hover,
  .group:focus-within .nav-emoji-hover {
    transform: translateX(0);
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .studio-emoji-swap > span,
    .nav-emoji-swap > span {
      transition: opacity 120ms ease;
    }

    .studio-emoji-swap-base,
    .studio-emoji-swap-hover,
    .nav-emoji-base,
    .nav-emoji-hover,
    .group:hover .studio-emoji-swap-base,
    .group:focus-visible .studio-emoji-swap-base,
    .group:focus-within .studio-emoji-swap-base,
    .group:hover .studio-emoji-swap-hover,
    .group:focus-visible .studio-emoji-swap-hover,
    .group:focus-within .studio-emoji-swap-hover,
    .group:hover .nav-emoji-base,
    .group:focus-visible .nav-emoji-base,
    .group:focus-within .nav-emoji-base,
    .group:hover .nav-emoji-hover,
    .group:focus-visible .nav-emoji-hover,
    .group:focus-within .nav-emoji-hover {
      transform: none;
    }
  }
CSS

Class Method Summary collapse

Class Method Details

.css ⇒ Object 



87
88
89
 
# File 'lib/studio/ui_primitives.rb', line 87

def self.css
  EMOJI_SWAP_CSS
end