diff --git a/projects/core/styles/markup/tui-list.less b/projects/core/styles/markup/tui-list.less
index 88661b4308b8..9eaf2a4d0877 100644
--- a/projects/core/styles/markup/tui-list.less
+++ b/projects/core/styles/markup/tui-list.less
@@ -90,6 +90,20 @@
background-color: transparent;
}
}
+
+ .tui-list_triangle > & {
+ padding-left: @space * 7;
+
+ &:before {
+ content: '\25E4'; // represent symbol '◤'
+ left: 0;
+ top: auto;
+ width: auto;
+ height: auto;
+ background-color: transparent;
+ color: var(--tui-base-06);
+ }
+ }
}
&__item-title {
diff --git a/projects/demo/src/modules/markup/lists/examples/7/index.html b/projects/demo/src/modules/markup/lists/examples/7/index.html
new file mode 100644
index 000000000000..df6d7899b2a7
--- /dev/null
+++ b/projects/demo/src/modules/markup/lists/examples/7/index.html
@@ -0,0 +1,32 @@
+
+ - Code Review ($ 10)
+ -
+ The whole project refactoring ($ 1000)
+
+ -
+ Add auto prettier and linters on precommit ($ 50)
+
+ -
+ Rewrite to react and back ($ Infinity)
+
+
+
+ -
+ Live workshop from
+
+ angular.institute
+
+ ($ 3000)
+
+ - Interactive samples
+ - Case analysis
+ -
+ Angular knowledge that keeps on growing
+
+
+
+
diff --git a/projects/demo/src/modules/markup/lists/examples/7/index.ts b/projects/demo/src/modules/markup/lists/examples/7/index.ts
new file mode 100644
index 000000000000..55f29f9fbac4
--- /dev/null
+++ b/projects/demo/src/modules/markup/lists/examples/7/index.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+ selector: 'tui-lists-example-7',
+ templateUrl: './index.html',
+ changeDetection,
+ encapsulation,
+})
+export class TuiList7 {}
diff --git a/projects/demo/src/modules/markup/lists/lists.component.ts b/projects/demo/src/modules/markup/lists/lists.component.ts
index 593cbe8fbd67..30dbae289714 100644
--- a/projects/demo/src/modules/markup/lists/lists.component.ts
+++ b/projects/demo/src/modules/markup/lists/lists.component.ts
@@ -7,6 +7,7 @@ import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
+import {default as example7Html} from '!!raw-loader!./examples/7/index.html';
import {FrontEndExample} from '../../interfaces/front-end-example';
@@ -39,4 +40,8 @@ export class ListsComponent {
readonly example6: FrontEndExample = {
HTML: example6Html,
};
+
+ readonly example7: FrontEndExample = {
+ HTML: example7Html,
+ };
}
diff --git a/projects/demo/src/modules/markup/lists/lists.module.ts b/projects/demo/src/modules/markup/lists/lists.module.ts
index 6d2a7a49638d..66332582660a 100644
--- a/projects/demo/src/modules/markup/lists/lists.module.ts
+++ b/projects/demo/src/modules/markup/lists/lists.module.ts
@@ -10,6 +10,7 @@ import {TuiList3} from './examples/3';
import {TuiList4} from './examples/4';
import {TuiList5} from './examples/5';
import {TuiList6} from './examples/6';
+import {TuiList7} from './examples/7';
import {ListsComponent} from './lists.component';
@NgModule({
@@ -27,6 +28,7 @@ import {ListsComponent} from './lists.component';
TuiList4,
TuiList5,
TuiList6,
+ TuiList7,
],
exports: [ListsComponent],
})
diff --git a/projects/demo/src/modules/markup/lists/lists.template.html b/projects/demo/src/modules/markup/lists/lists.template.html
index 4c6b245f916f..2adab16e4483 100644
--- a/projects/demo/src/modules/markup/lists/lists.template.html
+++ b/projects/demo/src/modules/markup/lists/lists.template.html
@@ -50,4 +50,12 @@
>
+
+
+
+