diff --git a/projects/addon-mobile/styles/common/card-large.less b/projects/addon-mobile/styles/common/card-large.less new file mode 100644 index 0000000000000..34a672f59b690 --- /dev/null +++ b/projects/addon-mobile/styles/common/card-large.less @@ -0,0 +1,13 @@ +[tuiCard='l'] { + &[data-size='l'] { + &[data-space='normal'] { + padding: 1.25rem; + gap: 1.25rem; + } + + &[data-space='compact'] { + padding: 1rem; + gap: 1rem; + } + } +} diff --git a/projects/addon-mobile/styles/taiga-ui-mobile.less b/projects/addon-mobile/styles/taiga-ui-mobile.less index 1de654d1f744e..238117c54b26d 100644 --- a/projects/addon-mobile/styles/taiga-ui-mobile.less +++ b/projects/addon-mobile/styles/taiga-ui-mobile.less @@ -21,4 +21,5 @@ @import './common/badge-notification'; @import './common/button'; @import './common/title'; + @import './common/card-large'; } diff --git a/projects/demo-playwright/utils/mock-images.ts b/projects/demo-playwright/utils/mock-images.ts index 44f5242a8bbbc..a76daa68429d3 100644 --- a/projects/demo-playwright/utils/mock-images.ts +++ b/projects/demo-playwright/utils/mock-images.ts @@ -6,6 +6,7 @@ const DEFAULT_MOCKS = [ /.*avatar.jpg/, /.*avatars.githubusercontent.com.*/, /https:\/\/github.com\/.*.png.*/, + /https:\/\/yandex.ru\/map-widget.*/, /https:\/\/m.media-amazon.com\/.*.jpg.*/, /.*bf2e94ae58ee713717faf397958a8e3d.jpg/, // filename - MD5 hash value of file content (waterplea avatar) ], diff --git a/projects/demo/src/assets/images/illustration.jpg b/projects/demo/src/assets/images/illustration.jpg new file mode 100644 index 0000000000000..54b8308c717c0 Binary files /dev/null and b/projects/demo/src/assets/images/illustration.jpg differ diff --git a/projects/demo/src/assets/images/road-illustration.jpg b/projects/demo/src/assets/images/road-illustration.jpg new file mode 100644 index 0000000000000..52762388f02f7 Binary files /dev/null and b/projects/demo/src/assets/images/road-illustration.jpg differ diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts index 7eb9854d2d33e..872c00ec94664 100644 --- a/projects/demo/src/modules/app/pages.ts +++ b/projects/demo/src/modules/app/pages.ts @@ -1032,9 +1032,15 @@ export const pages: TuiDocPages = [ { section: 'Experimental', title: 'Card', - keywords: 'card, block, карточка, блок', + keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок', route: '/experimental/card', }, + { + section: 'Experimental', + title: 'CardLarge', + keywords: 'card, card-medium, card-large, medium, large, block, карточка, блок', + route: '/experimental/card/Large', + }, { section: 'Experimental', title: 'Pin', diff --git a/projects/demo/src/modules/experimental/card/card.component.ts b/projects/demo/src/modules/experimental/card/card.component.ts index 9cdbd48c8d1f7..3fc67ff87a44a 100644 --- a/projects/demo/src/modules/experimental/card/card.component.ts +++ b/projects/demo/src/modules/experimental/card/card.component.ts @@ -57,4 +57,59 @@ export class ExampleTuiCardComponent { HTML: import('./examples/7/index.html?raw'), LESS: import('./examples/7/index.less?raw'), }; + + readonly example8: TuiDocExample = { + HTML: import('./examples/8/index.html?raw'), + LESS: import('./examples/8/index.less?raw'), + }; + + readonly example9: TuiDocExample = { + HTML: import('./examples/9/index.html?raw'), + }; + + readonly example10: TuiDocExample = { + HTML: import('./examples/10/index.html?raw'), + LESS: import('./examples/10/index.less?raw'), + }; + + readonly example11: TuiDocExample = { + HTML: import('./examples/11/index.html?raw'), + LESS: import('./examples/11/index.less?raw'), + }; + + readonly example12: TuiDocExample = { + HTML: import('./examples/12/index.html?raw'), + }; + + readonly example13: TuiDocExample = { + HTML: import('./examples/13/index.html?raw'), + LESS: import('./examples/13/index.less?raw'), + }; + + readonly example14: TuiDocExample = { + HTML: import('./examples/14/index.html?raw'), + LESS: import('./examples/14/index.less?raw'), + }; + + readonly example15: TuiDocExample = { + HTML: import('./examples/15/index.html?raw'), + }; + + readonly example16: TuiDocExample = { + HTML: import('./examples/16/index.html?raw'), + }; + + readonly example17: TuiDocExample = { + HTML: import('./examples/17/index.html?raw'), + LESS: import('./examples/17/index.less?raw'), + }; + + readonly example18: TuiDocExample = { + HTML: import('./examples/18/index.html?raw'), + LESS: import('./examples/18/index.less?raw'), + }; + + readonly example19: TuiDocExample = { + HTML: import('./examples/19/index.html?raw'), + }; } diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts index d652a4a32f22a..a3a5f20b25871 100644 --- a/projects/demo/src/modules/experimental/card/card.module.ts +++ b/projects/demo/src/modules/experimental/card/card.module.ts @@ -3,8 +3,12 @@ import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {tuiGetDocModules} from '@taiga-ui/addon-doc'; import {TuiRippleModule} from '@taiga-ui/addon-mobile'; +import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk'; import { + TuiDataListModule, TuiHintModule, + TuiHostedDropdownModule, + TuiLinkModule, TuiNotificationModule, TuiScrollbarModule, TuiSvgModule, @@ -14,15 +18,20 @@ import { TuiAvatarModule, TuiAvatarStackModule, TuiBadgeModule, + TuiButtonCloseModule, + TuiButtonModule, TuiCardModule, + TuiCellModule, TuiFadeModule, TuiFallbackSrcModule, + TuiHeaderModule, TuiIconModule, TuiInitialsModule, TuiSurfaceModule, TuiThumbnailCardModule, TuiTitleModule, } from '@taiga-ui/experimental'; +import {TuiProgressModule} from '@taiga-ui/kit'; import {ExampleTuiCardComponent} from './card.component'; import {TuiCardExample1} from './examples/1'; @@ -32,6 +41,18 @@ import {TuiCardExample4} from './examples/4'; import {TuiCardExample5} from './examples/5'; import {TuiCardExample6} from './examples/6'; import {TuiCardExample7} from './examples/7'; +import {TuiCardExample8} from './examples/8'; +import {TuiCardExample9} from './examples/9'; +import {TuiCardExample10} from './examples/10'; +import {TuiCardExample11} from './examples/11'; +import {TuiCardExample12} from './examples/12'; +import {TuiCardExample13} from './examples/13'; +import {TuiCardExample14} from './examples/14'; +import {TuiCardExample15} from './examples/15'; +import {TuiCardExample16} from './examples/16'; +import {TuiCardExample17} from './examples/17'; +import {TuiCardExample18} from './examples/18'; +import {TuiCardExample19} from './examples/19'; @NgModule({ imports: [ @@ -53,8 +74,18 @@ import {TuiCardExample7} from './examples/7'; FormsModule, TuiRippleModule, TuiThumbnailCardModule, - tuiGetDocModules(ExampleTuiCardComponent), TuiIconModule, + TuiButtonModule, + TuiHeaderModule, + TuiCellModule, + tuiGetDocModules(ExampleTuiCardComponent), + TuiRepeatTimesModule, + TuiDataListModule, + TuiHostedDropdownModule, + TuiProgressModule, + TuiButtonCloseModule, + TuiPlatformModule, + TuiLinkModule, ], declarations: [ ExampleTuiCardComponent, @@ -65,6 +96,18 @@ import {TuiCardExample7} from './examples/7'; TuiCardExample5, TuiCardExample6, TuiCardExample7, + TuiCardExample8, + TuiCardExample9, + TuiCardExample10, + TuiCardExample11, + TuiCardExample12, + TuiCardExample13, + TuiCardExample14, + TuiCardExample15, + TuiCardExample16, + TuiCardExample17, + TuiCardExample18, + TuiCardExample19, ], exports: [ExampleTuiCardComponent], }) diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html index ac6714c7e620e..0bc306bc42e0e 100644 --- a/projects/demo/src/modules/experimental/card/card.template.html +++ b/projects/demo/src/modules/experimental/card/card.template.html @@ -46,7 +46,6 @@ id="customization" heading="Customization" [content]="example5" - [fullsize]="true" > @@ -68,6 +67,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  1. diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.html b/projects/demo/src/modules/experimental/card/examples/10/index.html new file mode 100644 index 0000000000000..4cffc1243342e --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/10/index.html @@ -0,0 +1,74 @@ + + + + +
    + + + +
    diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.less b/projects/demo/src/modules/experimental/card/examples/10/index.less new file mode 100644 index 0000000000000..728927259d172 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/10/index.less @@ -0,0 +1,19 @@ +:host { + display: flex; + flex-direction: column; + gap: 1.25rem; + + [tuiCard][data-size='l'] { + padding: 1rem 1.5rem; + } +} + +.actions { + display: flex; + gap: 1.25rem; + + button { + flex: 1; + height: 3.75rem; + } +} diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.ts b/projects/demo/src/modules/experimental/card/examples/10/index.ts new file mode 100644 index 0000000000000..31db7edbad03f --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/10/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-10', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample10 {} diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.html b/projects/demo/src/modules/experimental/card/examples/11/index.html new file mode 100644 index 0000000000000..e32f80a517c24 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/11/index.html @@ -0,0 +1,39 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    +
    + + +

    + Title + Subtitle +

    +
    +
    + +
    + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.less b/projects/demo/src/modules/experimental/card/examples/11/index.less new file mode 100644 index 0000000000000..e93f1944fc1c4 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/11/index.less @@ -0,0 +1,13 @@ +section { + display: flex; + gap: 0.75rem; + margin: 0 -1.5rem; + padding: 0 1.5rem; + overflow: scroll; +} + +.plus { + background: var(--tui-primary); + border-radius: 0.25rem; + color: #fff; +} diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.ts b/projects/demo/src/modules/experimental/card/examples/11/index.ts new file mode 100644 index 0000000000000..5785c4bfddc06 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/11/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-11', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample11 {} diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.html b/projects/demo/src/modules/experimental/card/examples/12/index.html new file mode 100644 index 0000000000000..def7cb61d29c7 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/12/index.html @@ -0,0 +1,38 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    +
    + +
    + Title +
    Description
    +
    +
    +
    + +
    + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.ts b/projects/demo/src/modules/experimental/card/examples/12/index.ts new file mode 100644 index 0000000000000..c1146c6aa342f --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/12/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-card-example-12', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCardExample12 {} diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.html b/projects/demo/src/modules/experimental/card/examples/13/index.html new file mode 100644 index 0000000000000..e07c3cc151576 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/13/index.html @@ -0,0 +1,56 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    + + + +
    + +
    + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.less b/projects/demo/src/modules/experimental/card/examples/13/index.less new file mode 100644 index 0000000000000..2c7a3b16833c4 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/13/index.less @@ -0,0 +1,8 @@ +section { + display: flex; + gap: 1.5rem; +} + +aside { + flex: 1; +} diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.ts b/projects/demo/src/modules/experimental/card/examples/13/index.ts new file mode 100644 index 0000000000000..8abefb88e1d9f --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/13/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-13', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample13 {} diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.html b/projects/demo/src/modules/experimental/card/examples/14/index.html new file mode 100644 index 0000000000000..b84a0a642ff56 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/14/index.html @@ -0,0 +1,73 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    + + + +
    + +
    + +
    +
    + + + + + + + + + + + diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.less b/projects/demo/src/modules/experimental/card/examples/14/index.less new file mode 100644 index 0000000000000..44dba3b7f21e2 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/14/index.less @@ -0,0 +1,11 @@ +.actions { + display: flex; + flex-direction: column; +} + +.action { + width: 100%; + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.75rem; +} diff --git a/projects/demo/src/modules/experimental/card/examples/14/index.ts b/projects/demo/src/modules/experimental/card/examples/14/index.ts new file mode 100644 index 0000000000000..9787940ca55c0 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/14/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-14', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample14 {} diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.html b/projects/demo/src/modules/experimental/card/examples/15/index.html new file mode 100644 index 0000000000000..9795a553578bc --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/15/index.html @@ -0,0 +1,32 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    + +
    + +
    + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/15/index.ts b/projects/demo/src/modules/experimental/card/examples/15/index.ts new file mode 100644 index 0000000000000..fb6d05cd62390 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/15/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-card-example-15', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCardExample15 {} diff --git a/projects/demo/src/modules/experimental/card/examples/16/index.html b/projects/demo/src/modules/experimental/card/examples/16/index.html new file mode 100644 index 0000000000000..2968bcc285fa4 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/16/index.html @@ -0,0 +1,33 @@ +
    +
    +

    + Title + Subtitle +

    +
    + +
    + +
    + +
    + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/16/index.ts b/projects/demo/src/modules/experimental/card/examples/16/index.ts new file mode 100644 index 0000000000000..f6687706db3fd --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/16/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-card-example-16', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCardExample16 {} diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.html b/projects/demo/src/modules/experimental/card/examples/17/index.html new file mode 100644 index 0000000000000..acc5fe7916ea1 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/17/index.html @@ -0,0 +1,25 @@ +
    +
    +

    + Title + Subtitle +

    + + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.less b/projects/demo/src/modules/experimental/card/examples/17/index.less new file mode 100644 index 0000000000000..4c2ab50c5a424 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/17/index.less @@ -0,0 +1,4 @@ +.image { + background: url('/assets/images/illustration.jpg') no-repeat; + background-size: cover; +} diff --git a/projects/demo/src/modules/experimental/card/examples/17/index.ts b/projects/demo/src/modules/experimental/card/examples/17/index.ts new file mode 100644 index 0000000000000..97963906a33d5 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/17/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-17', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample17 {} diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.html b/projects/demo/src/modules/experimental/card/examples/18/index.html new file mode 100644 index 0000000000000..5ec4a97c204a0 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/18/index.html @@ -0,0 +1,28 @@ +
    +
    +

    + Title + Subtitle +

    + + +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.less b/projects/demo/src/modules/experimental/card/examples/18/index.less new file mode 100644 index 0000000000000..35f64bafedafb --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/18/index.less @@ -0,0 +1,8 @@ +.image-dark { + background: url('/assets/images/road-illustration.jpg') no-repeat center; + background-size: cover; + + &:before { + background: rgba(0, 0, 0, 0.5); + } +} diff --git a/projects/demo/src/modules/experimental/card/examples/18/index.ts b/projects/demo/src/modules/experimental/card/examples/18/index.ts new file mode 100644 index 0000000000000..2a9848f6e14a3 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/18/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-18', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample18 {} diff --git a/projects/demo/src/modules/experimental/card/examples/19/index.html b/projects/demo/src/modules/experimental/card/examples/19/index.html new file mode 100644 index 0000000000000..a7173cae35738 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/19/index.html @@ -0,0 +1,105 @@ +
    +

    Desktop

    + +
    +
    +

    + Normal + Radius: 24, padding: 24/20 +

    +
    + +
    + +
    +
    + +
    +
    +

    + Compact + Radius: 16, padding: 20/16 +

    +
    + +
    + +
    +
    +
    + +
    +

    iOS/Android

    + +
    +
    +

    + Normal + Radius: 24, padding: 20/16 +

    +
    + +
    + +
    +
    + +
    +
    +

    + Compact + Radius: 16, padding: 16/14 +

    +
    + +
    + +
    +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/19/index.ts b/projects/demo/src/modules/experimental/card/examples/19/index.ts new file mode 100644 index 0000000000000..df458873acfd7 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/19/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-card-example-19', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCardExample19 {} diff --git a/projects/demo/src/modules/experimental/card/examples/5/index.less b/projects/demo/src/modules/experimental/card/examples/5/index.less index 994070ff005da..659262ce86738 100644 --- a/projects/demo/src/modules/experimental/card/examples/5/index.less +++ b/projects/demo/src/modules/experimental/card/examples/5/index.less @@ -9,12 +9,12 @@ color: #333; } -.money { +.money[tuiSurface] { background: #ffdd2d; color: #333; } -.poster { +.poster[tuiSurface] { background: rgb(88, 192, 190); padding: 0.75rem; color: #fff; @@ -34,7 +34,7 @@ } } -.fly { +.fly[tuiSurface] { background: rgb(101, 174, 234); padding: 0.75rem; color: #fff; @@ -50,8 +50,8 @@ } } -.google, -.microsoft { +.google[tuiSurface], +.microsoft[tuiSurface] { padding: 0.75rem; background: var(--tui-base-02); height: 8rem; @@ -62,7 +62,7 @@ } } -.google { +.google[tuiSurface] { [tuiSubtitle] { color: red; } @@ -72,7 +72,7 @@ } } -.microsoft { +.microsoft[tuiSurface] { [tuiSubtitle] { color: #00b92d; } diff --git a/projects/demo/src/modules/experimental/card/examples/7/index.less b/projects/demo/src/modules/experimental/card/examples/7/index.less index 57c9b8a4fe8ab..1b720d2235e64 100644 --- a/projects/demo/src/modules/experimental/card/examples/7/index.less +++ b/projects/demo/src/modules/experimental/card/examples/7/index.less @@ -5,7 +5,7 @@ gap: 1rem; } -.surface { +.surface[tuiSurface] { height: 6.5rem; width: 6.5rem; padding: 0.75rem; diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.html b/projects/demo/src/modules/experimental/card/examples/8/index.html new file mode 100644 index 0000000000000..28db44b053ca1 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/8/index.html @@ -0,0 +1,93 @@ +
    +

    Desktop

    + +
    +
    +

    Header

    +
    + +
    Replace me
    + +
    + +
    +
    + +
    +
    +

    Header

    +
    + +
    Replace me
    +
    +
    + +
    +

    iOS/Android

    + +
    +
    +

    Header

    + + +
    + +
    Replace me
    + +
    + +
    +
    + +
    +
    +

    Header

    + + +
    + +
    Replace me
    +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.less b/projects/demo/src/modules/experimental/card/examples/8/index.less new file mode 100644 index 0000000000000..e2346e5335bb5 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/8/index.less @@ -0,0 +1,13 @@ +section { + display: flex; + height: 3.125rem; + border-radius: 0.75rem; + justify-content: center; + align-items: center; + color: var(--tui-base-06); + border: 1px dashed var(--tui-base-06); +} + +.label { + font: var(--tui-font-text-l); +} diff --git a/projects/demo/src/modules/experimental/card/examples/8/index.ts b/projects/demo/src/modules/experimental/card/examples/8/index.ts new file mode 100644 index 0000000000000..3df1d3690d378 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/8/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-card-example-8', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiCardExample8 {} diff --git a/projects/demo/src/modules/experimental/card/examples/9/index.html b/projects/demo/src/modules/experimental/card/examples/9/index.html new file mode 100644 index 0000000000000..5d684fc6b0634 --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/9/index.html @@ -0,0 +1,67 @@ +
    +

    Desktop

    + +
    +
    +

    + Title + Subtitle +

    + + +
    + +
    + +
    +
    +
    + +
    +

    iOS/Android

    + +
    +
    +

    + Title + Subtitle +

    + + +
    + +
    + +
    +
    +
    diff --git a/projects/demo/src/modules/experimental/card/examples/9/index.ts b/projects/demo/src/modules/experimental/card/examples/9/index.ts new file mode 100644 index 0000000000000..57f6742db5a9e --- /dev/null +++ b/projects/demo/src/modules/experimental/card/examples/9/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-card-example-9', + templateUrl: './index.html', + encapsulation, + changeDetection, +}) +export class TuiCardExample9 {} diff --git a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md index 25593713373aa..2334deb74f1ff 100644 --- a/projects/demo/src/modules/experimental/card/examples/import/insert-template.md +++ b/projects/demo/src/modules/experimental/card/examples/import/insert-template.md @@ -1,4 +1,5 @@ ```html +
    Subtitle
    + + +
    +
    +

    Header

    +
    +
    ``` diff --git a/projects/demo/src/modules/info/testing/jest/jest.module.ts b/projects/demo/src/modules/info/testing/jest/jest.module.ts index 87b78a425f82d..0342a6d31489c 100644 --- a/projects/demo/src/modules/info/testing/jest/jest.module.ts +++ b/projects/demo/src/modules/info/testing/jest/jest.module.ts @@ -14,5 +14,6 @@ import {JestComponent} from './jest.component'; RouterModule.forChild(tuiGenerateRoutes(JestComponent)), ], declarations: [JestComponent], + exports: [JestComponent], }) export class JestModule {} diff --git a/projects/experimental/directives/card/card.directive.ts b/projects/experimental/directives/card/card.directive.ts index 6505dd6a536f6..5ad734b5d6127 100644 --- a/projects/experimental/directives/card/card.directive.ts +++ b/projects/experimental/directives/card/card.directive.ts @@ -9,12 +9,16 @@ import {TuiCardComponent} from './card.component'; host: { tuiCard: '', '[attr.data-size]': 'size || "m"', + '[attr.data-space]': 'space', }, }) export class TuiCardDirective { @Input('tuiCard') size: TuiSizeL | '' = 'm'; + @Input() + space: 'compact' | 'normal' = 'normal'; + constructor( @Inject(TuiDirectiveStylesService) directiveStyles: TuiDirectiveStylesService, ) { diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less index 65570ffe5320d..8c8fbdc2fb0dd 100644 --- a/projects/experimental/directives/card/card.styles.less +++ b/projects/experimental/directives/card/card.styles.less @@ -2,6 +2,7 @@ [tuiCard] { .clearbtn(); + position: relative; display: flex; align-items: flex-start; justify-content: space-between; @@ -10,10 +11,17 @@ box-sizing: border-box; padding: 0.75rem; gap: 0.75rem; + flex-shrink: 0; flex-direction: column; text-decoration: none; width: var(--t-size); height: var(--t-size); + overscroll-behavior: contain; + + &, + & > * { + .scrollbar-hidden(); + } &[data-size='m'] { --t-size: 8.75rem; @@ -23,6 +31,10 @@ font-weight: bold; } + &[tuiCell] { + box-sizing: border-box; + } + [tuiSubtitle] { color: var(--tui-text-01); } @@ -31,4 +43,31 @@ [tuiSubtitle] { max-width: 100%; } + + &[data-size='l'] { + --t-size: 100%; + height: auto; + font-size: 1rem; + + & > * { + width: 100%; + } + + [tuiCell] { + padding: 0.5rem; + margin: 0 -0.5rem; + } + + &[data-space='normal'] { + border-radius: 1.5rem; + padding: 1.5rem; + gap: 1.5rem; + } + + &[data-space='compact'] { + border-radius: 1rem; + padding: 1.25rem; + gap: 1.25rem; + } + } } diff --git a/projects/experimental/directives/surface/surface.style.less b/projects/experimental/directives/surface/surface.style.less index 9a41aa196e7d6..9e87e7fe5dd64 100644 --- a/projects/experimental/directives/surface/surface.style.less +++ b/projects/experimental/directives/surface/surface.style.less @@ -1,7 +1,7 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; // prettier-ignore -[data-surface] { +[tuiSurface][data-surface] { .clearbtn(); .transition(); @@ -9,7 +9,7 @@ position: relative; border-radius: var(--tui-radius-l); box-sizing: border-box; - padding: 1.25rem; + padding: 1rem 1.25rem; background-size: cover; background-repeat: no-repeat; overflow: hidden; @@ -25,14 +25,14 @@ } } -button[data-surface] { +button[tuiSurface][data-surface] { cursor: pointer; } -[data-surface]:before, -[data-surface]:after, -[tuiSurfaceLayer]:before, -[tuiSurfaceLayer]:after { +[tuiSurface][data-surface]:before, +[tuiSurface][data-surface]:after, +[tuiSurface][tuiSurfaceLayer]:before, +[tuiSurface][tuiSurfaceLayer]:after { .fullsize(); .transition(); content: ''; @@ -106,13 +106,13 @@ input[tuiSurfaceLayer] { } @media (hover: hover) and (pointer: fine) { - [data-surface]:hover & { + [tuiSurface][data-surface]:hover & { box-shadow: inset 0 0, inset 0 0 0 calc(var(--tui-gap) / 2) var(--tui-base-03); } - [data-surface]:hover &:checked { + [tuiSurface][data-surface]:hover &:checked { filter: brightness(0.9); box-shadow: inset 0 0 0 calc(var(--tui-gap) / 2), @@ -121,14 +121,14 @@ input[tuiSurfaceLayer] { } } -[data-surface='elevated'] { +[tuiSurface][data-surface='elevated'] { box-shadow: var(--tui-shadow); border-radius: var(--tui-radius-xl); background: var(--tui-elevation-01); } -button[data-surface='elevated'], -a[data-surface='elevated'] { +button[tuiSurface][data-surface='elevated'], +a[tuiSurface][data-surface='elevated'] { &:active { box-shadow: var(--tui-shadow); transform: scale(0.95); @@ -138,17 +138,18 @@ a[data-surface='elevated'] { &:hover { box-shadow: var(--tui-shadow-hover); transform: translate3d(0, -0.25rem, 0); + background: var(--tui-elevation-01); } } } -[data-surface='flat'] { +[tuiSurface][data-surface='flat'] { border-radius: var(--tui-radius-xl); background: var(--tui-clear); } -button[data-surface='flat'], -a[data-surface='flat'] { +button[tuiSurface][data-surface='flat'], +a[tuiSurface][data-surface='flat'] { &:active { transform: scale(0.95); }