Skip to content

Commit 72f9d0d

Browse files
SisIvanovaSisIvanova
authored
refactor(directives): wrap styles in base layer (#15759)
1 parent a071d31 commit 72f9d0d

File tree

4 files changed

+69
-57
lines changed

4 files changed

+69
-57
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '../../base' as *;
33
@use '../../themes/schemas' as *;
4+
@use '../../../styles/themes/standalone' as *;
45

56
////
67
/// @group themes
@@ -61,15 +62,17 @@
6162
/// @see {mixin} css-vars
6263
/// @param {Map} $theme - The theme used to style the component.
6364
@mixin highlight($theme) {
64-
@include css-vars($theme);
65+
@include layer(base) {
66+
@include css-vars($theme);
6567

66-
%igx-highlight {
67-
color: var-get($theme, 'resting-color');
68-
background: var-get($theme, 'resting-background');
69-
}
68+
%igx-highlight {
69+
color: var-get($theme, 'resting-color');
70+
background: var-get($theme, 'resting-background');
71+
}
7072

71-
%igx-highlight--active {
72-
color: var-get($theme, 'active-color');
73-
background: var-get($theme, 'active-background');
73+
%igx-highlight--active {
74+
color: var-get($theme, 'active-color');
75+
background: var-get($theme, 'active-background');
76+
}
7477
}
7578
}

‎projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@use 'sass:meta';
33
@use '../../base' as *;
44
@use '../../themes/schemas' as *;
5+
@use '../../../styles/themes/standalone' as *;
56

67
////
78
/// @group themes
@@ -40,24 +41,26 @@
4041
/// @see {mixin} css-vars
4142
/// @param {Map} $theme - The theme used to style the component.
4243
@mixin label($theme) {
43-
// The --variant CSS produced by css-vars is needed also
44-
// when dynamically switching between the input `type` attribute.
45-
@include css-vars($theme);
46-
$variant: map.get($theme, 'variant');
44+
@include layer(base) {
45+
// The --variant CSS produced by css-vars is needed also
46+
// when dynamically switching between the input `type` attribute.
47+
@include css-vars($theme);
48+
$variant: map.get($theme, 'variant');
4749

48-
%label-base {
49-
@include ellipsis();
50-
position: relative;
51-
color: var-get($theme, 'color');
52-
max-width: 100%;
53-
line-height: normal;
50+
%label-base {
51+
@include ellipsis();
52+
position: relative;
53+
color: var-get($theme, 'color');
54+
max-width: 100%;
55+
line-height: normal;
5456

55-
[dir='rtl'] & {
56-
transform-origin: top right;
57-
}
57+
[dir='rtl'] & {
58+
transform-origin: top right;
59+
}
5860

59-
@if $variant != 'material' {
60-
height: auto;
61+
@if $variant != 'material' {
62+
height: auto;
63+
}
6164
}
6265
}
6366
}

‎projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '../../base' as *;
33
@use '../../themes/schemas' as *;
4+
@use '../../../styles/themes/standalone' as *;
45

56
////
67
/// @group themes
@@ -45,23 +46,25 @@
4546
/// @see {mixin} css-vars
4647
/// @param {Map} $theme - The theme used to style the component.
4748
@mixin ripple($theme) {
48-
@include css-vars($theme);
49+
@include layer(base) {
50+
@include css-vars($theme);
4951

50-
%igx-ripple-display {
51-
display: block;
52-
position: absolute;
53-
border-radius: border-radius(50%);
54-
background: var-get($theme, 'color');
55-
pointer-events: none;
56-
transform-origin: center;
57-
transform: translate3d(0, 0, 0) scale(0);
58-
will-change: opacity, transform;
59-
opacity: .5;
60-
margin: 0 !important;
61-
border: none !important;
62-
}
52+
%igx-ripple-display {
53+
display: block;
54+
position: absolute;
55+
border-radius: border-radius(50%);
56+
background: var-get($theme, 'color');
57+
pointer-events: none;
58+
transform-origin: center;
59+
transform: translate3d(0, 0, 0) scale(0);
60+
will-change: opacity, transform;
61+
opacity: .5;
62+
margin: 0 !important;
63+
border: none !important;
64+
}
6365

64-
%igx-ripple-wrapper {
65-
overflow: hidden;
66+
%igx-ripple-wrapper {
67+
overflow: hidden;
68+
}
6669
}
6770
}

‎projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '../../base' as *;
33
@use '../../themes/schemas' as *;
4+
@use '../../../styles/themes/standalone' as *;
45

56
////
67
/// @group themes
@@ -72,28 +73,30 @@
7273
/// @see {mixin} css-vars
7374
/// @param {Map} $theme - The theme used to style the component.
7475
@mixin tooltip($theme) {
75-
@include css-vars($theme);
76-
$variant: map.get($theme, '_meta', 'variant');
76+
@include layer(base) {
77+
@include css-vars($theme);
78+
$variant: map.get($theme, '_meta', 'variant');
7779

78-
%tooltip-display {
79-
display: inline-flex;
80-
justify-content: center;
81-
flex-flow: column wrap;
82-
background: var-get($theme, 'background');
83-
color: var-get($theme, 'text-color');
84-
border-radius: var-get($theme, 'border-radius');
85-
box-shadow: map.get($theme, 'shadow');
86-
margin: 0 auto;
87-
padding: 0 rem(8px);
88-
min-height: rem(24px);
80+
%tooltip-display {
81+
display: inline-flex;
82+
justify-content: center;
83+
flex-flow: column wrap;
84+
background: var-get($theme, 'background');
85+
color: var-get($theme, 'text-color');
86+
border-radius: var-get($theme, 'border-radius');
87+
box-shadow: map.get($theme, 'shadow');
88+
margin: 0 auto;
89+
padding: 0 rem(8px);
90+
min-height: rem(24px);
8991

90-
@if $variant == 'indigo' {
91-
padding: rem(4px) rem(8px);
92+
@if $variant == 'indigo' {
93+
padding: rem(4px) rem(8px);
94+
}
9295
}
93-
}
9496

95-
%tooltip--hidden {
96-
display: none;
97+
%tooltip--hidden {
98+
display: none;
99+
}
97100
}
98101
}
99102

0 commit comments

Comments
 (0)