-
Notifications
You must be signed in to change notification settings - Fork 33
/
tailwind.base.css
200 lines (179 loc) · 6.23 KB
/
tailwind.base.css
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
@tailwind base;
@tailwind components;
@tailwind utilities;
/* PLEASE NOTE: all Tailwind components should be prefixed by `gn-ui` */
@layer components {
.container-sm {
max-width: 640px;
}
.container-md {
max-width: 768px;
}
.container-lg {
max-width: 1024px;
}
/* TODO: add prefix */
.card-shadow {
@apply shadow-xl hover:shadow-xl-hover transition-shadow;
}
/* ICON CLASSES */
.gn-ui-icon-small {
font-size: 16px;
width: 16px;
height: 16px;
}
.gn-ui-icon-medium {
font-size: 20px;
width: 20px;
height: 20px;
}
/* LINK CLASSES */
.gn-ui-link {
@apply text-blue-600 hover:text-blue-700 hover:underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
}
.gn-ui-link-external-icon {
content: 'open_in_new';
font-family: 'Material Symbols Outlined';
font-size: 0.9em;
display: inline-block;
vertical-align: top;
padding-top: 0.1em;
}
.gn-ui-link-external {
@apply gn-ui-link;
}
.gn-ui-link-external::before {
@apply gn-ui-link-external-icon;
padding-right: 0.2em;
}
.gn-ui-link-external-after {
@apply gn-ui-link;
}
.gn-ui-link-external-after::after {
@apply gn-ui-link-external-icon;
padding-left: 0.2em;
}
/* BUTTON CLASSES */
/* these are used behind the scenes by the `gn-ui-button` component */
/* this is a base class, do not use it directly */
.gn-ui-btn {
--rounded: var(--gn-ui-button-rounded, 0.25em);
--padding: var(--gn-ui-button-padding, 1em);
--width: var(--gn-ui-button-width, auto);
--height: var(--gn-ui-button-height, auto);
--background: var(--gn-ui-button-background, --color-background);
--font-size: var(--gn-ui-button-font-size, 1em);
@apply flex flex-row items-center justify-center
text-[length:--font-size] leading-none
p-[--padding] rounded-[--rounded] w-[--width] h-[--height] overflow-hidden
bg-[--background] transition-all duration-100
outline-none
relative
disabled:opacity-50 disabled:pointer-events-none
focus:z-10 active:z-10 hover:z-10;
}
/* makes sure icons will not make the buttons grow vertically */
.gn-ui-btn ng-icon {
margin-top: -0.5em;
margin-bottom: -0.5em;
flex-shrink: 0;
}
.gn-ui-btn-default {
@apply gn-ui-btn text-white
bg-gray-700 hover:bg-gray-800 active:bg-gray-900
border border-gray-700 focus:ring-4 focus:ring-gray-200;
}
.gn-ui-btn-primary {
@apply gn-ui-btn text-white
bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
border border-primary focus:ring-4 focus:ring-primary-lightest;
}
.gn-ui-btn-secondary {
@apply gn-ui-btn text-white
bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
border border-secondary focus:ring-4 focus:ring-secondary-lightest;
}
.gn-ui-btn-gray {
@apply gn-ui-btn text-black
bg-gray-100 hover:bg-gray-200 focus:bg-gray-200 active:bg-gray-300
border border-gray-100 focus:ring-4 focus:ring-gray-50;
}
.gn-ui-btn-black {
@apply gn-ui-btn text-white
bg-black hover:bg-gray-950 focus:bg-gray-950 active:bg-gray-900
border border-black focus:ring-4 focus:ring-gray-300;
}
.gn-ui-btn-outline {
@apply gn-ui-btn text-main
hover:text-primary-darker focus:text-primary-darker active:text-primary-black
border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
}
.gn-ui-btn-light {
@apply gn-ui-btn text-main
hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
border border-white focus:ring-4 focus:ring-gray-300;
}
/* DROPDOWN MULTISELECT CLASS */
.gn-ui-multiselect-counter {
--text-color: var(--gn-ui-multiselect-counter-text-color, white);
--background-color: var(
--gn-ui-multiselect-counter-background-color,
var(--color-primary-lightest)
);
@apply bg-[color:--background-color] text-[color:--text-color];
}
/* BADGE CLASS */
.gn-ui-badge {
--rounded: var(--gn-ui-badge-rounded, 0.25em);
--padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
--text-size: var(--gn-ui-badge-text-size, 0.875em);
--text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
--background-color: var(--gn-ui-badge-background-color, black);
--opacity: var(--gn-ui-badge-opacity, 0.7);
@apply opacity-[--opacity] p-[--padding] rounded-[--rounded]
font-medium text-[length:--text-size] text-[color:--text-color] bg-[color:--background-color] flex justify-center items-center content-center;
}
/* makes sure icons will not make the badges grow vertically; also make size proportional */
.gn-ui-badge ng-icon {
margin-top: -0.325em;
margin-bottom: -0.325em;
flex-shrink: 0;
vertical-align: middle;
font-size: 1.1em;
width: 1em;
height: 1em;
}
/* TODO: replace by gn-ui-badge class above */
.badge-btn {
@apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
}
/* GENERIC TEXT INPUT (textarea, text field, url input...) */
.gn-ui-text-input {
--rounded: var(--gn-ui-text-input-rounded, 0.25em);
--padding: var(--gn-ui-text-input-padding, 0.6em);
--font-size: var(--gn-ui-text-input-font-size, 1em);
--border-size: var(--gn-ui-text-input-border-size, 2px);
@apply appearance-none border-[length:--border-size] p-[--padding] rounded-[--rounded] w-full transition-colors duration-75
text-[length:--font-size] leading-none border-gray-300 text-main placeholder-gray-800
focus:outline-none focus:border-main hover:border-main
disabled:cursor-not-allowed disabled:border-gray-100 disabled:placeholder-gray-300 disabled:text-gray-700 disabled:bg-white;
}
/* GENERIC CARD */
.gn-ui-card {
@apply flex flex-row border border-gray-200 rounded-xl p-4 gap-2 w-full;
}
/* TODO: add prefix */
.card-icon {
@apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
}
/* makes spinners appear in the right color */
mat-spinner circle,
mat-progress-spinner circle {
stroke: currentColor !important;
}
}
html {
--mdc-typography-font-family: var(--font-family-main);
}