Skip to content

Commit d62326f

Browse files
SisIvanovaSisIvanova
authored
refactor(action-strip): bundle styles with component (#15618)
1 parent 0099cdd commit d62326f

File tree

10 files changed

+187
-8
lines changed

10 files changed

+187
-8
lines changed

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
ChangeDetectorRef,
1414
AfterViewInit,
1515
ElementRef,
16-
booleanAttribute
16+
booleanAttribute,
17+
ViewEncapsulation
1718
} from '@angular/core';
1819
import { ActionStripResourceStringsEN, IActionStripResourceStrings } from '../core/i18n/action-strip-resources';
1920
import { IgxDropDownComponent } from '../drop-down/drop-down.component';
@@ -73,6 +74,8 @@ export class IgxActionStripMenuItemDirective {
7374
@Component({
7475
selector: 'igx-action-strip',
7576
templateUrl: 'action-strip.component.html',
77+
styleUrl: 'action-strip.component.css',
78+
encapsulation: ViewEncapsulation.None,
7679
imports: [
7780
NgTemplateOutlet,
7881
IgxIconButtonDirective,

‎projects/igniteui-angular/src/lib/action-strip/themes/_base.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/themes' as *;
3+
@use 'igniteui-theming/sass/typography' as *;
4+
@use 'igniteui-theming/sass/color/functions' as *;
5+
@use 'styles/themes/standalone' as *;
6+
@use 'light/tokens' as *;
7+
8+
$_theme: $material;
9+
10+
@include layer(base) {
11+
$icon-size: sizable(rem(14px), rem(14px), rem(18px));
12+
13+
%actions {
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
%menu-item {
20+
[igxLabel] {
21+
cursor: pointer;
22+
}
23+
24+
&.igx-drop-down__item {
25+
igx-icon + [igxLabel] {
26+
margin-inline-start: pad-inline(rem(8px), rem(10px), rem(12px));
27+
}
28+
}
29+
}
30+
31+
@include b(igx-action-strip) {
32+
@include sizable();
33+
--action-strip-size: var(--component-size);
34+
--button-size: #{sizable(rem(28px), rem(28px), rem(36px))};
35+
36+
display: flex;
37+
align-items: center;
38+
justify-content: flex-end;
39+
position: absolute;
40+
width: 100%;
41+
height: 100%;
42+
pointer-events: none;
43+
top: 0;
44+
inset-inline-start: 0;
45+
background: var-get($_theme, 'background');
46+
color: inherit;
47+
padding-inline: pad-inline(rem(12px), rem(16px), rem(24px));
48+
padding-block: 0;
49+
z-index: 9999;
50+
51+
[igxIconButton] {
52+
--component-size: var(--action-strip-size);
53+
54+
width: var(--button-size);
55+
height: var(--button-size);
56+
57+
igx-icon {
58+
--component-size: var(--action-strip-size);
59+
60+
--ig-icon-size: #{$icon-size};
61+
--igx-icon-size: #{$icon-size};
62+
}
63+
}
64+
65+
@include e(actions) {
66+
display: inline-flex;
67+
align-items: center;
68+
justify-content: center;
69+
pointer-events: all;
70+
position: relative;
71+
color: var-get($_theme, 'icon-color');
72+
border-radius: var-get($_theme, 'actions-border-radius');
73+
background: var-get($_theme, 'actions-background');
74+
max-height: rem(36px);
75+
76+
&:last-child {
77+
margin-inline-end: 0;
78+
}
79+
80+
igx-icon {
81+
color: var-get($_theme, 'icon-color');
82+
}
83+
84+
[igxIconButton] {
85+
border-radius: var-get($_theme, 'actions-border-radius');
86+
87+
igx-icon {
88+
color: var-get($_theme, 'icon-color');
89+
}
90+
}
91+
}
92+
93+
@include e(delete) {
94+
igx-icon {
95+
color: var-get($_theme, 'delete-action');
96+
}
97+
}
98+
99+
@include e(editing-actions) {
100+
@extend %actions;
101+
102+
> [igxButton] {
103+
margin-inline-start: rem(4px);
104+
105+
&:first-of-type {
106+
margin-inline-start: 0;
107+
}
108+
}
109+
}
110+
111+
@include e(pinning-actions) {
112+
@extend %actions;
113+
}
114+
115+
@include e(menu-item) {
116+
@extend %menu-item;
117+
}
118+
119+
@include e(menu-item, $m: 'danger') {
120+
@extend %menu-item;
121+
122+
color: color($color: 'error');
123+
124+
&:hover {
125+
color: color($color: 'error');
126+
}
127+
}
128+
129+
@include e(menu-button) {
130+
display: flex;
131+
align-items: center;
132+
}
133+
}
134+
}

‎projects/igniteui-angular/src/lib/action-strip/themes/dark/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-action-strip, $tokens, dark);

‎projects/igniteui-angular/src/lib/action-strip/themes/dark/_tokens.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/dark/action-strip' as *;
3+
4+
$material: digest-schema($dark-material-action-strip);
5+
$bootstrap: digest-schema($dark-bootstrap-action-strip);
6+
$fluent: digest-schema($dark-fluent-action-strip);
7+
$indigo: digest-schema($dark-indigo-action-strip);

‎projects/igniteui-angular/src/lib/action-strip/themes/light/_index.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'sass:meta';
2+
@use 'tokens';
3+
@use 'styles/themes/standalone' as *;
4+
5+
$tokens: meta.module-variables(tokens);
6+
@include themes(igx-action-strip, $tokens, light);

‎projects/igniteui-angular/src/lib/action-strip/themes/light/_tokens.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use 'igniteui-theming/sass/themes' as *;
2+
@use 'igniteui-theming/sass/themes/schemas/components/light/action-strip' as *;
3+
4+
$base: digest-schema($light-action-strip);
5+
$material: digest-schema($material-action-strip);
6+
$bootstrap: digest-schema($bootstrap-action-strip);
7+
$fluent: digest-schema($fluent-action-strip);
8+
$indigo: digest-schema($indigo-action-strip);

‎projects/igniteui-angular/src/lib/action-strip/themes/shared/_fluent.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@use 'igniteui-theming/sass/bem' as *;
2+
@use 'igniteui-theming/sass/typography' as *;
3+
@use 'styles/themes/standalone' as *;
4+
5+
@include themed-block(igx-action-strip, fluent) {
6+
[igxIconButton] {
7+
--button-size: #{sizable(rem(28px), rem(28px), rem(32px))};
8+
}
9+
}
10+

‎projects/igniteui-angular/src/lib/action-strip/themes/shared/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'fluent';

‎projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -144,13 +144,13 @@
144144
// @include avatar($avatar-theme-map);
145145
// }
146146

147-
@if is-used('igx-action-strip', $exclude) {
148-
$action-strip-theme-map: action-strip-theme(
149-
$schema: $schema,
150-
);
151-
$action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map);
152-
@include action-strip($action-strip-theme-map);
153-
}
147+
// @if is-used('igx-action-strip', $exclude) {
148+
// $action-strip-theme-map: action-strip-theme(
149+
// $schema: $schema,
150+
// );
151+
// $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map);
152+
// @include action-strip($action-strip-theme-map);
153+
// }
154154

155155
// @if is-used('igx-badge', $exclude) {
156156
// $badge-theme-map: badge-theme(

0 commit comments

Comments
 (0)