버튼의 그라데이션 효과를 제거하는 방법은 무엇인가요?

개발
1

안녕하세요!

오늘 밤 버튼의 클릭 효과를 설정을 통해 선택적으로 만들 수 있는 PR을 만들려고 조사하고 있었습니다. 개인적으로는 꽤 안 좋아 보이지만, 정말 좋아하는 사람들이 있을 수도 있다고 생각합니다.
제가 말하는 건 이렇습니다. 대부분의 버튼에서 클릭 후 마우스 버튼을 길게 누르면 확인할 수 있습니다.
image
일부 버튼에서는 더 안 좋아 보입니다.
image

팀이 이를 완전히 제거하려고 하지는 않을 것 같아서, 사이트 설정을 만들고 버튼 scss를 통해 접근하는 방법을 알아보려고 했습니다.

설정만 만들고 프로퍼티를 부여하기 위한 간단한 파일이 있는지 모르겠습니다. 그런 파일이 있나요? 없다면 어떻게 해야 하며, SCSS 파일에 이를 반영하는 방법은 무엇인가요?

도움 주시면 감사하겠습니다!

2

이건 테마 컴포넌트로 덮어쓸 수 있는 거 아닌가요?

3

아, 이 이슈에 대해 컴포넌트를 빼먹었네 ㅋㅋ

근데 앞으로 설정을 만들 수 있을까요? 제 쪽에서 바로 수정할게요.

수정: 방금 제 쪽에서 수정을 시도해 봤는데 작동하지 않네요.

4

안녕하세요,

제가 이해한 바로는, 변경하고 싶은 것이 버튼의 :active 상태인 것 같습니다.

색상 전환을 위한 linear-grandient 믹신이 있습니다.

버튼이 활성화될 때 linear-gradient가 사용됩니다. buttons.css에서 확인할 수 있습니다.

이 전체가 기본 버튼 믹신입니다.

그리고 .btn-primary 및 그 아래 다른 버튼들의 경우 색상 변수만 변경됩니다:

따라서 active 클래스를 대상으로 하여 linear-gradient 믹신의 출력을 오버라이드할 수 있습니다.

아래와 같은 방식으로 작동할 것입니다. :slightly_smiling_face:

색상 변수가 다르므로 전역적으로 타겟팅할 수 없고, 버튼 유형 클래스를 타겟팅해야 합니다.

// 기본 버튼

.btn {
  &:active,
  &.btn-active {
    background-image: none;
    border-bottom-color: transparent;
    background-color: var(--primary-medium);
  }
  
  // 기본(Primary) 버튼

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // 위험(Danger) 및 ✘ 버튼

  &.btn-danger,
  &.cancel {
    &:active,
    &.btn-active {
      background-color: var(--danger-hover);
    }
  }
  
  // ✔ 버튼

  &.ok {
    &:active,
    &.btn-active {
      background-color: var(--success-hover);
    }
  }
}

변경 전

변경 후