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 @@ + 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 @@ > + + + +