Skip to content
This repository was archived by the owner on Jun 24, 2021. It is now read-only.

Commit 7bed6bd

Browse files
matheomatheo
committed
fix(scss): style bundling included in the dist package
1 parent 4d02ecd commit 7bed6bd

File tree

6 files changed

+122
-116
lines changed

6 files changed

+122
-116
lines changed

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,12 @@
2020
"start": "ng serve",
2121
"build": "npm run build:pkg && npm run build:scss",
2222
"build:pkg": "rimraf dist && ng-packagr -p package.json",
23-
"build:scss": "scss-bundle -e ./src/datepicker/theming.scss -d ./_theming.scss",
23+
"build:scss": "scss-bundle -e ./src/datepicker/theming.scss -d ./dist/_theming.scss",
2424
"commitmsg": "commitlint -e",
2525
"lint": "ng lint",
26-
"prerelease": "npm run build",
2726
"release": "standard-version --message 'build: release v%s'",
2827
"postrelease": "git push --follow-tags origin master",
29-
"preupload": "node ./scripts/prepublish.js",
28+
"preupload": "npm run build && node ./scripts/prepublish.js",
3029
"upload": "npm publish --access=public dist/"
3130
},
3231
"devDependencies": {
@@ -88,4 +87,4 @@
8887
"files": [
8988
"dist"
9089
]
91-
}
90+
}

‎src/datepicker/_calendar.scss

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,3 @@
1-
$mat-calendar-padding: 8px !default;
2-
3-
$mat-calendar-arrow-size: 5px !default;
4-
$mat-calendar-arrow-disabled-opacity: 0.5 !default;
5-
6-
/**
7-
* Values chosen to approximate https://material.io/icons/#ic_navigate_before and
8-
* https://material.io/icons/#ic_navigate_next as closely as possible.
9-
*/
10-
$mat-calendar-prev-next-icon-border-width: 2px;
11-
$mat-calendar-prev-next-icon-margin: 10.5px;
12-
$mat-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
13-
$mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
14-
15-
$mat-calendar-controls-opacity: 0.6;
16-
171
@mixin mat-fill {
182
top: 0;
193
left: 0;
@@ -26,6 +10,22 @@ $mat-calendar-controls-opacity: 0.6;
2610
$primary: map-get($theme, primary);
2711
$foreground: map-get($theme, foreground);
2812

13+
$mat-calendar-padding: 8px !default;
14+
15+
$mat-calendar-arrow-size: 5px !default;
16+
$mat-calendar-arrow-disabled-opacity: 0.5 !default;
17+
18+
/**
19+
* Values chosen to approximate https://material.io/icons/#ic_navigate_before and
20+
* https://material.io/icons/#ic_navigate_next as closely as possible.
21+
*/
22+
$mat-calendar-prev-next-icon-border-width: 2px;
23+
$mat-calendar-prev-next-icon-margin: 10.5px;
24+
$mat-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
25+
$mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
26+
27+
$mat-calendar-controls-opacity: 0.6;
28+
2929
.mat-calendar {
3030
font-size: 15px;
3131
user-select: none;

‎src/datepicker/_clock-view.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
$clock-min-size: 224px !default;
2-
$clock-margin: 8px !default;
3-
$clock-font-size: 14px !default;
4-
$clock-cell-size: 14.1666% !default;
5-
61
@mixin mat-clock($theme) {
72
$primary: map-get($theme, primary);
83
$foreground: map-get($theme, foreground);
94

5+
$clock-min-size: 224px !default;
6+
$clock-margin: 8px !default;
7+
$clock-font-size: 14px !default;
8+
$clock-cell-size: 14.1666% !default;
9+
1010
mat-clock-view {
1111
position: relative;
1212
display: block;

‎src/datepicker/_datepicker-content.scss

Lines changed: 86 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,98 @@
1-
@import 'elevation';
2-
3-
$mat-datepicker-calendar-padding: 8px;
4-
$mat-datepicker-non-touch-calendar-cell-size: 40px;
5-
$mat-datepicker-non-touch-calendar-width: $mat-datepicker-non-touch-calendar-cell-size * 7 +
6-
$mat-datepicker-calendar-padding * 2;
7-
8-
/**
9-
* Based on the natural height of the calendar in a month with 6 rows of dates
10-
* (largest the calendar will get).
11-
*/
12-
$mat-datepicker-non-touch-calendar-height: 354px;
13-
14-
/**
15-
* Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
16-
* these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
17-
* the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
18-
* chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
19-
* scrollbars at smaller sizes.
20-
*/
21-
$mat-datepicker-touch-landscape-width: 132vh;
22-
$mat-datepicker-touch-landscape-height: 90vh;
23-
$mat-datepicker-touch-landscape-header: 53vh;
24-
$mat-datepicker-touch-portrait-width: 80vw;
25-
$mat-datepicker-touch-portrait-height: 112vw;
26-
$mat-datepicker-touch-portrait-header: 33vw;
27-
28-
$mat-datepicker-touch-landscape-max-width: 500px;
29-
$mat-datepicker-touch-landscape-max-height: 325px;
30-
$mat-datepicker-touch-landscape-max-header: 150px;
31-
$mat-datepicker-touch-portrait-max-width: 275px;
32-
$mat-datepicker-touch-portrait-max-height: 580px;
33-
$mat-datepicker-touch-portrait-max-header: 115px;
34-
35-
.mat-datepicker-content {
36-
@include mat-elevation(5);
37-
38-
display: block;
39-
}
40-
41-
.mat-calendar {
42-
display: flex;
43-
}
44-
/**
45-
* .mat-datepicker-content:not(.mat-datepicker-content-touch) .mat-calendar {
46-
* width: $mat-datepicker-non-touch-calendar-width;
47-
* height: $mat-datepicker-non-touch-calendar-height;
48-
* }
49-
*/
50-
.mat-datepicker-content-touch {
51-
@include mat-elevation(0);
52-
53-
/* make sure the dialog scrolls rather than being cropped on ludicrously small screens */
54-
max-height: 90vh;
55-
overflow: auto;
56-
57-
/* TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away from using dialog. */
58-
margin: -24px;
59-
}
1+
@mixin mat-datepicker-content($theme) {
2+
$mat-datepicker-calendar-padding: 8px;
3+
$mat-datepicker-non-touch-calendar-cell-size: 40px;
4+
$mat-datepicker-non-touch-calendar-width: $mat-datepicker-non-touch-calendar-cell-size *
5+
7 + $mat-datepicker-calendar-padding * 2;
6+
7+
/**
8+
* Based on the natural height of the calendar in a month with 6 rows of dates
9+
* (largest the calendar will get).
10+
*/
11+
$mat-datepicker-non-touch-calendar-height: 354px;
12+
13+
/**
14+
* Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
15+
* these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
16+
* the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
17+
* chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
18+
* scrollbars at smaller sizes.
19+
*/
20+
$mat-datepicker-touch-landscape-width: 132vh;
21+
$mat-datepicker-touch-landscape-height: 90vh;
22+
$mat-datepicker-touch-landscape-header: 53vh;
23+
$mat-datepicker-touch-portrait-width: 80vw;
24+
$mat-datepicker-touch-portrait-height: 112vw;
25+
$mat-datepicker-touch-portrait-header: 33vw;
26+
27+
$mat-datepicker-touch-landscape-max-width: 500px;
28+
$mat-datepicker-touch-landscape-max-height: 325px;
29+
$mat-datepicker-touch-landscape-max-header: 150px;
30+
$mat-datepicker-touch-portrait-max-width: 275px;
31+
$mat-datepicker-touch-portrait-max-height: 580px;
32+
$mat-datepicker-touch-portrait-max-header: 115px;
33+
34+
.mat-datepicker-content {
35+
@include mat-elevation(5);
36+
37+
display: block;
38+
}
6039

61-
@media all and (orientation: landscape) {
6240
.mat-calendar {
63-
width: $mat-datepicker-touch-landscape-width;
64-
height: $mat-datepicker-touch-landscape-height;
65-
66-
max-width: $mat-datepicker-touch-landscape-max-width;
67-
max-height: $mat-datepicker-touch-landscape-max-height;
41+
display: flex;
42+
}
43+
/**
44+
* .mat-datepicker-content:not(.mat-datepicker-content-touch) .mat-calendar {
45+
* width: $mat-datepicker-non-touch-calendar-width;
46+
* height: $mat-datepicker-non-touch-calendar-height;
47+
* }
48+
*/
49+
.mat-datepicker-content-touch {
50+
@include mat-elevation(0);
51+
52+
/* make sure the dialog scrolls rather than being cropped on ludicrously small screens */
53+
max-height: 90vh;
54+
overflow: auto;
55+
56+
/* TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away from using dialog. */
57+
margin: -24px;
58+
}
6859

69-
.mat-calendar-header {
70-
width: $mat-datepicker-touch-landscape-header;
71-
max-width: $mat-datepicker-touch-landscape-max-header;
72-
}
73-
.mat-calendar-content {
74-
flex: 1 1 100%;
60+
@media all and (orientation: landscape) {
61+
.mat-calendar {
62+
width: $mat-datepicker-touch-landscape-width;
63+
height: $mat-datepicker-touch-landscape-height;
64+
65+
max-width: $mat-datepicker-touch-landscape-max-width;
66+
max-height: $mat-datepicker-touch-landscape-max-height;
67+
68+
.mat-calendar-header {
69+
width: $mat-datepicker-touch-landscape-header;
70+
max-width: $mat-datepicker-touch-landscape-max-header;
71+
}
72+
.mat-calendar-content {
73+
flex: 1 1 100%;
74+
}
7575
}
7676
}
77-
}
7877

79-
@media all and (orientation: portrait) {
80-
.mat-calendar {
81-
width: $mat-datepicker-touch-portrait-width;
82-
height: $mat-datepicker-touch-portrait-height;
78+
@media all and (orientation: portrait) {
79+
.mat-calendar {
80+
width: $mat-datepicker-touch-portrait-width;
81+
height: $mat-datepicker-touch-portrait-height;
8382

84-
max-width: $mat-datepicker-touch-portrait-max-width;
85-
max-height: $mat-datepicker-touch-portrait-max-height;
83+
max-width: $mat-datepicker-touch-portrait-max-width;
84+
max-height: $mat-datepicker-touch-portrait-max-height;
8685

87-
flex-direction: column;
88-
align-items: stretch;
86+
flex-direction: column;
87+
align-items: stretch;
8988

90-
.mat-calendar-header {
91-
height: $mat-datepicker-touch-portrait-header;
92-
max-height: $mat-datepicker-touch-portrait-max-header;
93-
}
94-
.mat-calendar-content {
95-
flex: 1 1 100%;
89+
.mat-calendar-header {
90+
height: $mat-datepicker-touch-portrait-header;
91+
max-height: $mat-datepicker-touch-portrait-max-header;
92+
}
93+
.mat-calendar-content {
94+
flex: 1 1 100%;
95+
}
9696
}
9797
}
9898
}

‎src/datepicker/calendar.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ import { MatYearsView } from './years-view';
5656
@Component({
5757
selector: 'mat-calendar',
5858
templateUrl: 'calendar.html',
59-
styleUrls: ['calendar.scss'],
6059
host: {
6160
class: 'mat-calendar'
6261
},

‎src/datepicker/theming.scss

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
@import './datepicker-content';
2-
@import './calendar';
3-
@import './calendar-body';
4-
@import './clock-view';
1+
@import 'elevation';
2+
@import 'datepicker-content';
3+
@import 'calendar';
4+
@import 'calendar-body';
5+
@import 'clock-view';
6+
7+
@mixin mat-datepicker($theme) {
8+
@include mat-datepicker-content($theme);
9+
@include mat-calendar($theme);
10+
@include mat-calendar-body($theme);
11+
@include mat-clock($theme);
12+
}

0 commit comments

Comments
 (0)