Skip to content

Commit f042a71

Browse files
simeonoffsimeonoff
authored
Merge pull request #7575 from IgniteUI/simeonoff/fix-typography
fix(typography): igx-typography doesn't produce selectors correctly
2 parents 75651df + bb0f2cf commit f042a71

File tree

1 file changed

+94
-84
lines changed

1 file changed

+94
-84
lines changed

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

Lines changed: 94 additions & 84 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

@@ -10,43 +9,45 @@
109
@import '../components/button/button-theme';
1110
@import '../components/calendar/calendar-theme';
1211
@import '../components/card/card-theme';
12+
@import '../components/charts/data-chart-theme';
13+
@import '../components/charts/financial-chart-theme';
14+
@import '../components/charts/funnel-chart-theme';
15+
@import '../components/charts/gauge-theme';
16+
@import '../components/charts/graph-theme';
17+
@import '../components/charts/shape-chart-theme';
1318
@import '../components/checkbox/checkbox-theme';
1419
@import '../components/chip/chip-theme';
1520
@import '../components/column-hiding/column-hiding-theme';
21+
@import '../components/date-range-picker/date-range-picker-theme';
1622
@import '../components/dialog/dialog-theme';
1723
@import '../components/drop-down/drop-down-theme';
18-
@import '../components/date-range-picker/date-range-picker-theme';
1924
@import '../components/expansion-panel/expansion-panel-theme';
2025
@import '../components/grid/excel-filtering-theme';
2126
@import '../components/input/input-group-theme';
27+
@import '../components/list/list-theme';
2228
@import '../components/navbar/navbar-theme';
2329
@import '../components/navdrawer/navdrawer-theme';
24-
@import '../components/list/list-theme';
2530
@import '../components/radio/radio-theme';
26-
@import '../components/snackbar/snackbar-theme';
2731
@import '../components/slider/slider-theme';
32+
@import '../components/snackbar/snackbar-theme';
2833
@import '../components/switch/switch-theme';
2934
@import '../components/tabs/tabs-theme';
3035
@import '../components/time-picker/time-picker-theme';
3136
@import '../components/toast/toast-theme';
3237
@import '../components/tooltip/tooltip-theme';
33-
@import '../components/charts/data-chart-theme';
34-
@import '../components/charts/financial-chart-theme';
35-
@import '../components/charts/graph-theme';
36-
@import '../components/charts/shape-chart-theme';
37-
@import '../components/charts/funnel-chart-theme';
38-
@import '../components/charts/gauge-theme';
3938

40-
/// Adds typography styles for h1-h6, paragraph and creates
41-
/// custom typography class selectors. The produces styles
42-
/// are based on the passed type scale. If omitted the
43-
/// default-type-scale will be used.
44-
/// @param {String} $font-family ["'Titillium Web', sans-serif"] - The font family to be used across all typographic elements.
45-
/// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.
46-
@mixin igx-typography(
47-
$font-family: "'Titillium Web', sans-serif",
48-
$type-scale: $default-type-scale,
49-
) {
39+
/// @access private
40+
@mixin _igx-typography-styles($font-family, $type-scale) {
41+
font-family: unquote($font-family);
42+
font-size: $browser-context;
43+
line-height: $browser-line-height;
44+
font-size-adjust: 100%;
45+
-webkit-font-smoothing: antialiased;
46+
-moz-osx-font-smoothing: grayscale;
47+
48+
$this: bem--selector-to-string(&);
49+
$selector: bem--extract-first-selector($this);
50+
5051
// Maps type scale typographic categories
5152
// to native elements.
5253
$category-element-map: (
@@ -59,78 +60,87 @@
5960
body-1: 'p'
6061
);
6162

62-
$this: bem--selector-to-string(&);
63-
$scope: if(is-root(), 'igx-typography', #{str-slice($this, 2, -1)});
64-
65-
// Use the BEM notation to create a link
66-
// between the igx-typography class selector
67-
// and all typographic elements.
68-
@include b($scope) {
69-
font-family: unquote($font-family);
70-
font-size: $browser-context;
71-
line-height: $browser-line-height;
72-
font-size-adjust: 100%;
73-
-webkit-font-smoothing: antialiased;
74-
-moz-osx-font-smoothing: grayscale;
75-
76-
@each $category, $type-style in $type-scale {
77-
// Get the native element that uses typographic styles directly
78-
// as mapped in the $category-element-map
79-
$e: map-get($category-element-map, $category);
63+
@each $category, $type-style in $type-scale {
64+
// Get the native element that uses typographic styles directly
65+
// as mapped in the $category-element-map
66+
$e: map-get($category-element-map, $category);
8067

81-
// Create a placeholder selector with styles for each
82-
// typographic style to be able to easily extend it
83-
// elsewhere.
84-
%#{$category} {
85-
@include igx-type-style($type-scale, $category);
86-
}
68+
// Create a placeholder selector with styles for each
69+
// typographic style to be able to easily extend it
70+
// elsewhere.
71+
%#{$category} {
72+
@include igx-type-style($type-scale, $category);
73+
}
8774

88-
// Add native element typographic styles.
89-
@if $e != null {
90-
#{$e} {
91-
@extend %#{$category};
92-
}
75+
// Add native element typographic styles.
76+
@if $e != null {
77+
#{$e} {
78+
@extend %#{$category};
9379
}
80+
}
9481

95-
// Add class selector typographic styles.
82+
// Add class selector typographic styles.
83+
@if ($selector == '.igx-typography') {
9684
@include e(#{$category}) {
97-
$selector: bem--selector-to-string(&);
98-
9985
@extend %#{$category};
10086
}
10187
}
88+
}
89+
90+
// Call the individual component styles with the type scale
91+
@include _excel-filtering-typography($type-scale);
92+
@include igx-banner-typography($type-scale);
93+
@include igx-bottom-nav-typography($type-scale);
94+
@include igx-button-typography($type-scale);
95+
@include igx-calendar-typography($type-scale);
96+
@include igx-card-typography($type-scale);
97+
@include igx-checkbox-typography($type-scale);
98+
@include igx-chip-typography($type-scale);
99+
@include igx-column-hiding-typography($type-scale);
100+
@include igx-data-chart-typography($type-scale);
101+
@include igx-date-range-typography($type-scale);
102+
@include igx-dialog-typography($type-scale);
103+
@include igx-drop-down-typography($type-scale);
104+
@include igx-expansion-panel-typography($type-scale);
105+
@include igx-financial-chart-typography($type-scale);
106+
@include igx-funnel-chart-typography($type-scale);
107+
@include igx-gauge-typography();
108+
@include igx-graph-typography();
109+
@include igx-input-group-typography($type-scale);
110+
@include igx-list-typography($type-scale);
111+
@include igx-navbar-typography($type-scale);
112+
@include igx-navdrawer-typography($type-scale);
113+
@include igx-radio-typography($type-scale);
114+
@include igx-shape-chart-typography($type-scale);
115+
@include igx-slider-typography($type-scale);
116+
@include igx-snackbar-typography($type-scale);
117+
@include igx-switch-typography($type-scale);
118+
@include igx-tabs-typography($type-scale);
119+
@include igx-time-picker-typography($type-scale);
120+
@include igx-toast-typography($type-scale);
121+
@include igx-tooltip-typography($type-scale);
122+
}
102123

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

0 commit comments

Comments
 (0)