Skip to content

Commit 7eaba64

Browse files
simeonoffsimeonoff
committed
fix(typography): igx-typography doesn't produce selectors correctly
1 parent 87dee68 commit 7eaba64

File tree

1 file changed

+79
-69
lines changed

1 file changed

+79
-69
lines changed

‎projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss‎

Lines changed: 79 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
////
22
/// @group typography
3-
/// @access public
43
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
54
////
65

@@ -31,16 +30,18 @@
3130
@import '../components/toast/toast-theme';
3231
@import '../components/tooltip/tooltip-theme';
3332

34-
/// Adds typography styles for h1-h6, paragraph and creates
35-
/// custom typography class selectors. The produces styles
36-
/// are based on the passed type scale. If omitted the
37-
/// default-type-scale will be used.
38-
/// @param {String} $font-family ["'Titillium Web', sans-serif"] - The font family to be used across all typographic elements.
39-
/// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.
40-
@mixin igx-typography(
41-
$font-family: "'Titillium Web', sans-serif",
42-
$type-scale: $default-type-scale,
43-
) {
33+
/// @access private
34+
@mixin _igx-typography-styles($font-family, $type-scale) {
35+
font-family: unquote($font-family);
36+
font-size: $browser-context;
37+
line-height: $browser-line-height;
38+
font-size-adjust: 100%;
39+
-webkit-font-smoothing: antialiased;
40+
-moz-osx-font-smoothing: grayscale;
41+
42+
$this: bem--selector-to-string(&);
43+
$selector: bem--extract-first-selector($this);
44+
4445
// Maps type scale typographic categories
4546
// to native elements.
4647
$category-element-map: (
@@ -53,72 +54,81 @@
5354
body-1: 'p'
5455
);
5556

56-
$this: bem--selector-to-string(&);
57-
$scope: if(is-root(), 'igx-typography', #{str-slice($this, 2, -1)});
57+
@each $category, $type-style in $type-scale {
58+
// Get the native element that uses typographic styles directly
59+
// as mapped in the $category-element-map
60+
$e: map-get($category-element-map, $category);
5861

59-
// Use the BEM notation to create a link
60-
// between the igx-typography class selector
61-
// and all typographic elements.
62-
@include b($scope) {
63-
font-family: unquote($font-family);
64-
font-size: $browser-context;
65-
line-height: $browser-line-height;
66-
font-size-adjust: 100%;
67-
-webkit-font-smoothing: antialiased;
68-
-moz-osx-font-smoothing: grayscale;
69-
70-
@each $category, $type-style in $type-scale {
71-
// Get the native element that uses typographic styles directly
72-
// as mapped in the $category-element-map
73-
$e: map-get($category-element-map, $category);
74-
75-
// Create a placeholder selector with styles for each
76-
// typographic style to be able to easily extend it
77-
// elsewhere.
78-
%#{$category} {
79-
@include igx-type-style($type-scale, $category);
80-
}
62+
// Create a placeholder selector with styles for each
63+
// typographic style to be able to easily extend it
64+
// elsewhere.
65+
%#{$category} {
66+
@include igx-type-style($type-scale, $category);
67+
}
8168

82-
// Add native element typographic styles.
83-
@if $e != null {
84-
#{$e} {
85-
@extend %#{$category};
86-
}
69+
// Add native element typographic styles.
70+
@if $e != null {
71+
#{$e} {
72+
@extend %#{$category};
8773
}
74+
}
8875

89-
// Add class selector typographic styles.
76+
// Add class selector typographic styles.
77+
@if ($selector == '.igx-typography') {
9078
@include e(#{$category}) {
91-
$selector: bem--selector-to-string(&);
92-
9379
@extend %#{$category};
9480
}
9581
}
82+
}
83+
84+
// Call the individual component styles with the type scale
85+
@include igx-button-typography($type-scale);
86+
@include igx-bottom-nav-typography($type-scale);
87+
@include igx-banner-typography($type-scale);
88+
@include igx-calendar-typography($type-scale);
89+
@include igx-card-typography($type-scale);
90+
@include igx-checkbox-typography($type-scale);
91+
@include igx-chip-typography($type-scale);
92+
@include igx-column-hiding-typography($type-scale);
93+
@include igx-dialog-typography($type-scale);
94+
@include igx-drop-down-typography($type-scale);
95+
@include igx-date-range-typography($type-scale);
96+
@include igx-expansion-panel-typography($type-scale);
97+
@include _excel-filtering-typography($type-scale);
98+
@include igx-input-group-typography($type-scale);
99+
@include igx-navbar-typography($type-scale);
100+
@include igx-navdrawer-typography($type-scale);
101+
@include igx-list-typography($type-scale);
102+
@include igx-radio-typography($type-scale);
103+
@include igx-snackbar-typography($type-scale);
104+
@include igx-switch-typography($type-scale);
105+
@include igx-slider-typography($type-scale);
106+
@include igx-tabs-typography($type-scale);
107+
@include igx-time-picker-typography($type-scale);
108+
@include igx-toast-typography($type-scale);
109+
@include igx-tooltip-typography($type-scale);
110+
}
96111

97-
// Call the individual component styles with the type scale
98-
@include igx-button-typography($type-scale);
99-
@include igx-bottom-nav-typography($type-scale);
100-
@include igx-banner-typography($type-scale);
101-
@include igx-calendar-typography($type-scale);
102-
@include igx-card-typography($type-scale);
103-
@include igx-checkbox-typography($type-scale);
104-
@include igx-chip-typography($type-scale);
105-
@include igx-column-hiding-typography($type-scale);
106-
@include igx-dialog-typography($type-scale);
107-
@include igx-drop-down-typography($type-scale);
108-
@include igx-date-range-typography($type-scale);
109-
@include igx-expansion-panel-typography($type-scale);
110-
@include _excel-filtering-typography($type-scale);
111-
@include igx-input-group-typography($type-scale);
112-
@include igx-navbar-typography($type-scale);
113-
@include igx-navdrawer-typography($type-scale);
114-
@include igx-list-typography($type-scale);
115-
@include igx-radio-typography($type-scale);
116-
@include igx-snackbar-typography($type-scale);
117-
@include igx-switch-typography($type-scale);
118-
@include igx-slider-typography($type-scale);
119-
@include igx-tabs-typography($type-scale);
120-
@include igx-time-picker-typography($type-scale);
121-
@include igx-toast-typography($type-scale);
122-
@include igx-tooltip-typography($type-scale);
112+
/// Adds typography styles for h1-h6, paragraph and creates
113+
/// custom typography class selectors. The produces styles
114+
/// are based on the passed type scale. If omitted the
115+
/// default-type-scale will be used.
116+
/// @access public
117+
/// @param {String} $font-family ["'Titillium Web', sans-serif"] - The font family to be used across all typographic elements.
118+
/// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.
119+
@mixin igx-typography(
120+
$font-family: "'Titillium Web', sans-serif",
121+
$type-scale: $default-type-scale,
122+
) {
123+
@if(is-root()) {
124+
// Use the BEM notation to create a link
125+
// between the igx-typography class selector
126+
// and all typographic elements.
127+
@include b(igx-typography) {
128+
@include _igx-typography-styles($font-family, $type-scale);
129+
}
130+
} @else {
131+
@include _igx-typography-styles($font-family, $type-scale);
123132
}
124133
}
134+

0 commit comments

Comments
 (0)