ui-components/src/Button/style.css at 92900bfe6b9915e55107535c9a68b688876dd2bc · kfit-dev/ui-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
.ant-btn {
  @apply rounded-lg font-inter h-auto;
  @apply inline-flex items-center justify-center border-none;
  @apply focus:border-transparent focus:outline-none;
  @apply px-4 py-1.5 font-semibold leading-5;

  &.icon-start {
    @apply pl-2;

    svg:first-of-type {
      @apply mr-1;
    }
  }

  &.icon-end {
    @apply pr-2;

    svg:last-of-type {
      @apply ml-1;
    }
  }

  &&-sm {
    @apply px-3 py-1 text-xs font-semibold rounded;

    &.icon-start {
      @apply pl-2;

      svg:first-of-type {
        @apply mr-1;
      }
    }

    &.icon-end {
      @apply pr-1;

      svg:last-of-type {
        @apply ml-1;
      }
    }
  }

  &&-lg {
    @apply px-4 py-2.5 text-sm font-bold;

    &.icon-start {
      @apply pl-2;

      svg:first-of-type {
        @apply mr-1;
      }
    }

    &.icon-end {
      @apply pr-2;

      svg:last-of-type {
        @apply ml-1;
      }
    }
  }

  &-circle {
    &:not(:disabled):not(.ant-btn-disabled) {
      @apply text-primary bg-white border-neutral-300;

      &:focus,
      &:active {
        @apply text-primary border-primary;
      }

      &:hover {
        @apply text-primary border-neutral-300;
      }
    }

    &.ant-btn-lg {
      min-height: 40px;
    }
  }

  &-primary {
    &:not(:disabled):not(.ant-btn-disabled) {
      @apply bg-primary text-white;
      @apply hover:bg-primary hover:bg-opacity-70 hover:text-white;
      @apply focus:bg-primary focus:text-white focus:outline-none;
      @apply active:bg-primary active:text-white active:bg-opacity-70;
    }
  }

  &-text {
    &:not(:disabled):not(.ant-btn-disabled) {
      @apply text-primary;

      &:hover,
      &:focus,
      &:active {
        @apply text-primary;
      }
    }
  }

  &-link {
    &:not(:disabled):not(.ant-btn-disabled) {
      &:hover,
      &:focus,
      &:active {
        @apply text-primary;
      }
    }
  }
}