cats-ui-lib 2.2.7 → 2.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/cats-ui-lib.mjs +42 -42
  2. package/fesm2022/cats-ui-lib.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/_utilities.scss +124 -47
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cats-ui-lib",
3
- "version": "2.2.7",
3
+ "version": "2.2.8",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18 <22",
6
6
  "@angular/common": ">=18 <22"
package/styles/_utilities.scss CHANGED
@@ -19,72 +19,149 @@
19
19
  // ------------------Button Styles--------------------
20
20
  button.cats-btn {
21
21
  border: rem(1px) solid transparent;
22
- padding: 0 rem(28px);
23
- height: rem(56px);
24
- min-width: rem(142px);
25
- @include flex(center, center, rem(12px));
22
+ padding: rem(13px) rem(15px);
23
+ height: rem(48px);
24
+ min-width: rem(108px);
25
+ @include flex(center, center, rem(8px));
26
26
  border-radius: rem(8px);
27
- @include fontStyle(var(--fs-18), "", 600);
27
+ @include fontStyle(var(--fs-14), rem(20px));
28
28
  cursor: pointer;
29
-
30
- &:focus-visible {
31
- outline: none;
32
- border: 0;
29
+ transition: all 0.5s ease;
30
+ &.only-icon {
31
+ min-width: rem(48px);
32
+ padding: rem(11px);
33
33
  }
34
-
35
- i-feather.icon {
36
- display: flex;
34
+ img.btn-icon {
35
+ @include box(rem(24px), rem(24px));
37
36
  }
38
-
39
- &.primary_btn {
40
- background-color: var(--text-link-default);
41
- color: var(--surface-background-canvas);
37
+ &.small {
38
+ height: rem(32px);
39
+ padding: rem(5px) rem(15px);
40
+ img.btn-icon {
41
+ @include box(rem(16px), rem(16px));
42
+ }
42
43
  }
43
-
44
- &.secondary_btn {
45
- background-color: var(--surface-background-subtle);
46
- color: var(--text-body-primary);
44
+ //for primary button
45
+ &.primary-btn {
46
+ background-color: var(--surface-action-default);
47
+ color: var(--surface-background-canvas);
48
+ border-color: var(--border-interaction-focus);
49
+ &:hover {
50
+ background-color: var(--surface-action-hover);
51
+ border-color: var(--surface-action-hover);
52
+ }
53
+ &:focus-visible,
54
+ &:focus,
55
+ &:focus-within {
56
+ outline: rem(2px) solid var(--text-link-muted);
57
+ border: 0;
58
+ }
47
59
  }
48
60
 
49
- &.outline_btn {
61
+ //for Secondary button
62
+ &.secondary-btn {
50
63
  background-color: var(--surface-background-canvas);
51
64
  color: var(--text-body-primary);
52
- border: rem(1px) solid var(--border-core-strong);
53
- }
54
-
55
- &.disable {
56
- pointer-events: none;
57
- opacity: 0.6;
65
+ border-color: var(--border-core-strong);
66
+ &:hover {
67
+ background-color: var(--surface-background-blue);
68
+ border-color: var(--border-interaction-focus);
69
+ color: var(--text-link-default);
70
+ }
71
+ &:focus-visible,
72
+ &:focus,
73
+ &:focus-within {
74
+ box-shadow: 0 0 0 rem(2px) var(--border-core-muted);
75
+ outline: 0;
76
+ border-color: var(--border-core-strong);
77
+ }
58
78
  }
59
79
 
60
- &.fill_lightBlue_btn {
80
+ //for Tertiary button
81
+ &.tertiary-btn {
61
82
  background-color: var(--surface-background-blue);
83
+ border-color: var(--border-interaction-focus);
62
84
  color: var(--text-link-default);
85
+ &:hover {
86
+ background-color: var(--blue-100);
87
+ }
88
+ &:focus-visible,
89
+ &:focus,
90
+ &:focus-within {
91
+ box-shadow: 0 0 0 rem(2px) var(--text-link-muted);
92
+ outline: 0;
93
+ border-color: var(--border-interaction-focus);
94
+ }
63
95
  }
64
-
65
- &.disable_fill_lightBlue_btn {
66
- background-color: var(--surface-background-blue);
67
- color: var(--text-link-muted);
68
- pointer-events: none;
69
- }
70
-
71
- &.bg_logic_btn {
96
+ //for Link button
97
+ &.link-btn {
72
98
  background-color: var(--surface-background-canvas);
73
- color: var(--text-body-primary);
74
- border: rem(1px) solid var(--border-core-default);
75
- }
76
-
77
- &.no_outline_btn {
78
- background-color: var(--surface-background-blue);
79
99
  color: var(--text-link-default);
80
- outline: none;
100
+ &:hover {
101
+ color: var(--text-link-hover);
102
+ }
103
+ &:focus-visible,
104
+ &:focus,
105
+ &:focus-within {
106
+ outline: 0;
107
+ border-color: 0;
108
+ background-color: var(--surface-background-blue);
109
+ }
110
+ &.disable,
111
+ &:disabled {
112
+ pointer-events: none;
113
+ background: var(--surface-background-canvas);
114
+ color: var(--text-body-muted);
115
+ border: rem(1px) solid transparent;
116
+ }
81
117
  }
82
118
 
83
- .close_outline_btn {
84
- background-color: var(--surface-background-blue);
85
- border: rem(1px) solid var(--surface-background-blue);
86
- color: var(--text-link-default);
119
+ &.disable,
120
+ &:disabled {
121
+ pointer-events: none;
122
+ // opacity: 0.6;
123
+ background: var(--surface-background-default);
124
+ color: var(--text-body-muted);
125
+ border: rem(1px) solid var(--border-core-strong);
126
+ img.btn-icon {
127
+ opacity: 0.2;
128
+ }
87
129
  }
130
+
131
+ // &.outline_btn {
132
+ // background-color: var(--surface-background-canvas);
133
+ // color: var(--text-body-primary);
134
+ // border: rem(1px) solid var(--border-core-strong);
135
+ // }
136
+
137
+ // &.fill_lightBlue_btn {
138
+ // background-color: var(--surface-background-blue);
139
+ // color: var(--text-link-default);
140
+ // }
141
+
142
+ // &.disable_fill_lightBlue_btn {
143
+ // background-color: var(--surface-background-blue);
144
+ // color: var(--text-link-muted);
145
+ // pointer-events: none;
146
+ // }
147
+
148
+ // &.bg_logic_btn {
149
+ // background-color: var(--surface-background-canvas);
150
+ // color: var(--text-body-primary);
151
+ // border: rem(1px) solid var(--border-core-default);
152
+ // }
153
+
154
+ // &.no_outline_btn {
155
+ // background-color: var(--surface-background-blue);
156
+ // color: var(--text-link-default);
157
+ // outline: none;
158
+ // }
159
+
160
+ // .close_outline_btn {
161
+ // background-color: var(--surface-background-blue);
162
+ // border: rem(1px) solid var(--surface-background-blue);
163
+ // color: var(--text-link-default);
164
+ // }
88
165
  }
89
166
 
90
167
  // ------------------Custom Tooltip Styles--------------------