Skip to content

Commit aab3f50

Browse files
MGREMYMGREMY
committed
docs(lists): remove css & fix lists in md files
1 parent 1c1797c commit aab3f50

2 files changed

Lines changed: 146 additions & 154 deletions

File tree

‎apps/docs/docs/customize/override-base-style/index.md‎

Lines changed: 130 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,131 +1,130 @@
1-
---
2-
keyword: OverrideBaseStylePage
3-
---
4-
5-
## Init function
6-
7-
By default, Flowbite Angular provides a style for each of it's components. In order to use them, you
8-
have to call the init function inside the provider's list of your application.
9-
10-
```angular-ts
11-
import { initFlowbite } from 'flowbite-angular/core';
12-
13-
import { ApplicationConfig } from '@angular/core';
14-
15-
export const appConfig: ApplicationConfig = {
16-
providers: [initFlowbite()],
17-
};
18-
```
19-
20-
## Override base style
21-
22-
Behind the scene, <span class="text-primary-500">initFlowbite()</span> setup a bunch of
23-
InjectionToken, later used as base style in flowbite-angular component. You can override base style
24-
by setting, after <span class="text-primary-500">initFlowbite()</span>, some new values for
25-
<span class="text-primary-500">InjectionToken</span>. Each
26-
<span class="text-primary-500">InjectionToken</span> are named as follow :
27-
28-
<span class="text-xs md:text-base">
29-
30-
- COMPONENT : FLOWBITE\_<span class="text-primary-500">COMPONENT_NAME</span>\_THEME_TOKEN
31-
- COMPONENT : FLOWBITE\_<span class="text-primary-500">COMPONENT_NAME</span>\_THEME_TOKEN
32-
33-
</span>
34-
35-
Each <span class="text-primary-500">InjectionToken</span> are linked to a
36-
<span class="text-primary-500">default value</span>. <span class="text-primary-500">default
37-
value</span> values are named as follow :
38-
39-
<span class="text-xs md:text-base">
40-
41-
- COMPONENT : <span class="text-primary-500">componentName</span>Theme
42-
- DIRECTIVE : <span class="text-primary-500">directiveName</span>DirectiveTheme
43-
44-
</span>
45-
46-
In order to combine both base style and component (or directive) parameter, flowbite-angular uses
47-
<span class="text-primary-500">ThemeServices</span>, one for each component. As default style, they
48-
can be override. Each <span class="text-primary-500">ThemeServices</span> are named as follow :
49-
50-
<span class="text-xs md:text-base">
51-
52-
- COMPONENT : <span class="text-primary-500">ComponentName</span>ThemeService
53-
- DIRECTIVE : <span class="text-primary-500">DirectiveName</span>DirectiveThemeService
54-
55-
</span>
56-
57-
### Examples
58-
59-
#### Component
60-
61-
```angular-ts
62-
import { AlertBaseTheme, FLOWBITE_ALERT_THEME_TOKEN } from 'flowbite-angular/alert';
63-
import { createTheme } from 'flowbite-angular/utils';
64-
import { initFlowbite } from 'flowbite-angular/core';
65-
66-
const customAlertTheme: AlertBaseTheme = createTheme({
67-
base: 'flex flex-col gap-2 p-4 text-sm rounded-lg',
68-
color: {
69-
info: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800',
70-
failure: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800',
71-
success: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800',
72-
warning:
73-
'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800',
74-
dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600',
75-
},
76-
hasBorder: {
77-
enabled: 'border',
78-
disabled: 'border-0',
79-
},
80-
hasBorderAccent: {
81-
enabled: 'border-t-4',
82-
disabled: '',
83-
},
84-
closeButton: {
85-
base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2',
86-
color: {
87-
info: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300',
88-
failure: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300',
89-
success: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300',
90-
warning: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300',
91-
dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300',
92-
},
93-
},
94-
});
95-
96-
export const appConfig: ApplicationConfig = {
97-
providers: [
98-
...
99-
initFlowbite(),
100-
{
101-
provide: FLOWBITE_ALERT_THEME_TOKEN,
102-
useValue: customAlertTheme,
103-
},
104-
...
105-
],
106-
};
107-
```
108-
109-
#### Directive
110-
111-
```angular-ts
112-
import { IconDirectiveBaseTheme, FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN } from 'flowbite-angular/icon';
113-
import { createTheme } from 'flowbite-angular/utils';
114-
import { initFlowbite } from 'flowbite-angular/core';
115-
116-
const customIconDirectiveTheme: IconDirectiveBaseTheme = createTheme({
117-
base: 'w-5 h-5 text-gray-500 dark:text-gray-400',
118-
});
119-
120-
export const appConfig: ApplicationConfig = {
121-
providers: [
122-
...
123-
initFlowbite(),
124-
{
125-
provide: FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN,
126-
useValue: customIconDirectiveTheme,
127-
},
128-
...
129-
],
130-
};
131-
```
1+
---
2+
keyword: OverrideBaseStylePage
3+
---
4+
5+
## Init function
6+
7+
By default, Flowbite Angular provides a style for each of it's components. In order to use them, you
8+
have to call the init function inside the provider's list of your application.
9+
10+
```angular-ts
11+
import { initFlowbite } from 'flowbite-angular/core';
12+
13+
import { ApplicationConfig } from '@angular/core';
14+
15+
export const appConfig: ApplicationConfig = {
16+
providers: [initFlowbite()],
17+
};
18+
```
19+
20+
## Override base style
21+
22+
Behind the scene, <span class="text-primary-500">initFlowbite()</span> setup a bunch of
23+
InjectionToken, later used as base style in flowbite-angular component. You can override base style
24+
by setting, after <span class="text-primary-500">initFlowbite()</span>, some new values for
25+
<span class="text-primary-500">InjectionToken</span>. Each
26+
<span class="text-primary-500">InjectionToken</span> are named as follow :
27+
28+
<span class="text-xs md:text-base">
29+
<ul class="list-disc list-outside">
30+
<li>COMPONENT : FLOWBITE\_<span class="text-primary-500">COMPONENT_NAME</span>\_THEME_TOKEN</li>
31+
</ul>
32+
</span>
33+
34+
Each <span class="text-primary-500">InjectionToken</span> are linked to a
35+
<span class="text-primary-500">default value</span>. <span class="text-primary-500">default
36+
value</span> values are named as follow :
37+
38+
<span class="text-xs md:text-base">
39+
<ul class="list-disc list-outside">
40+
<li>COMPONENT : <span class="text-primary-500">componentName</span>Theme</li>
41+
<li>DIRECTIVE : <span class="text-primary-500">directiveName</span>DirectiveTheme</li>
42+
</ul>
43+
</span>
44+
45+
In order to combine both base style and component (or directive) parameter, flowbite-angular uses
46+
<span class="text-primary-500">ThemeServices</span>, one for each component. As default style, they
47+
can be override. Each <span class="text-primary-500">ThemeServices</span> are named as follow :
48+
49+
<span class="text-xs md:text-base">
50+
<ul class="list-disc list-outside">
51+
<li>COMPONENT : <span class="text-primary-500">ComponentName</span>ThemeService</li>
52+
<li>DIRECTIVE : <span class="text-primary-500">DirectiveName</span>DirectiveThemeService</li>
53+
</ul>
54+
</span>
55+
56+
### Examples
57+
58+
#### Component
59+
60+
```angular-ts
61+
import { AlertBaseTheme, FLOWBITE_ALERT_THEME_TOKEN } from 'flowbite-angular/alert';
62+
import { createTheme } from 'flowbite-angular/utils';
63+
import { initFlowbite } from 'flowbite-angular/core';
64+
65+
const customAlertTheme: AlertBaseTheme = createTheme({
66+
base: 'flex flex-col gap-2 p-4 text-sm rounded-lg',
67+
color: {
68+
info: 'text-blue-800 dark:text-blue-400 bg-blue-50 dark:bg-gray-800 border-blue-300 dark:border-blue-800',
69+
failure: 'text-red-800 dark:text-red-400 bg-red-100 dark:bg-gray-800 border-red-300 dark:border-red-800',
70+
success: 'text-green-800 dark:text-green-400 bg-green-100 dark:bg-gray-800 border-green-300 dark:border-green-800',
71+
warning:
72+
'text-yellow-800 dark:text-yellow-300 bg-yellow-100 dark:bg-gray-800 border-yellow-300 dark:border-yellow-800',
73+
dark: 'text-gray-800 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-600',
74+
},
75+
hasBorder: {
76+
enabled: 'border',
77+
disabled: 'border-0',
78+
},
79+
hasBorderAccent: {
80+
enabled: 'border-t-4',
81+
disabled: '',
82+
},
83+
closeButton: {
84+
base: '-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2',
85+
color: {
86+
info: 'text-blue-500 dark:text-blue-600 hover:bg-blue-200 dark:hover:bg-blue-300',
87+
failure: 'text-red-500 dark:text-red-600 hover:bg-red-200 dark:hover:bg-red-300',
88+
success: 'text-green-500 dark:text-green-600 hover:bg-green-200 dark:hover:bg-green-300',
89+
warning: 'text-yellow-500 dark:text-yellow-600 hover:bg-yellow-200 dark:hover:bg-yellow-300',
90+
dark: 'text-gray-500 dark:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-300',
91+
},
92+
},
93+
});
94+
95+
export const appConfig: ApplicationConfig = {
96+
providers: [
97+
...
98+
initFlowbite(),
99+
{
100+
provide: FLOWBITE_ALERT_THEME_TOKEN,
101+
useValue: customAlertTheme,
102+
},
103+
...
104+
],
105+
};
106+
```
107+
108+
#### Directive
109+
110+
```angular-ts
111+
import { IconDirectiveBaseTheme, FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN } from 'flowbite-angular/icon';
112+
import { createTheme } from 'flowbite-angular/utils';
113+
import { initFlowbite } from 'flowbite-angular/core';
114+
115+
const customIconDirectiveTheme: IconDirectiveBaseTheme = createTheme({
116+
base: 'w-5 h-5 text-gray-500 dark:text-gray-400',
117+
});
118+
119+
export const appConfig: ApplicationConfig = {
120+
providers: [
121+
...
122+
initFlowbite(),
123+
{
124+
provide: FLOWBITE_DIRECTIVE_ICON_THEME_TOKEN,
125+
useValue: customIconDirectiveTheme,
126+
},
127+
...
128+
],
129+
};
130+
```

‎apps/docs/src/styles.css‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,16 @@
1-
@import 'assets/styles/base.scss';
2-
@import 'assets/styles/dark.scss';
3-
4-
@config '../tailwind.config.js';
5-
6-
@tailwind base;
7-
8-
@layer base {
9-
ul:not(flowbite-dropdown ul),
10-
ol:not(flowbite-dropdown ol) {
11-
list-style: revert;
12-
margin: revert;
13-
padding: revert;
14-
}
15-
16-
@font-face {
17-
font-family: Inter;
18-
src: url('/assets/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
19-
}
20-
}
21-
22-
@tailwind components;
23-
@tailwind utilities;
1+
@import url('assets/styles/base.scss');
2+
@import url('assets/styles/dark.scss');
3+
4+
@config '../tailwind.config.js';
5+
6+
@tailwind base;
7+
8+
@layer base {
9+
@font-face {
10+
font-family: Inter;
11+
src: url('/assets/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
12+
}
13+
}
14+
15+
@tailwind components;
16+
@tailwind utilities;

0 commit comments

Comments
 (0)