Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.

Commit 0f12f51

Browse files
har79nshahan
har79
authored and
nshahan
committed
Part of a sequence of CLs refactoring css/material into separate, smaller libraries
PiperOrigin-RevId: 225358186
1 parent 5fe4ddc commit 0f12f51

File tree

5 files changed

+114
-105
lines changed

5 files changed

+114
-105
lines changed

‎angular_components/lib/css/_color_material.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,6 @@ $mat-icon-dark-opacity: 1;
8787
$mat-icon-dark-opacity-disabled: .30;
8888
$mat-icon-dark-opacity-hover: 1;
8989

90-
/// Common colors for scrollbars.
91-
/// Note: Prefer using @mixin material-scrollbars(...).
92-
$mat-scrollbar-thumb: $mat-lightest-transparent-black;
93-
$mat-scrollbar-background: rgba($mat-black, 0);
94-
$mat-scrollbar-background-hover: rgba($mat-black, .12);
95-
9690
/// Google Red
9791
$mat-red-50: #fbe9e7;
9892
$mat-red-100: #f4c7c3;

‎angular_components/lib/css/_scrollbar_material.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
@import 'core';
6+
@import 'color_material';
7+
8+
/// Common colors for scrollbars.
9+
/// Note: Prefer the mixins below.
10+
$mat-scrollbar-thumb: $mat-lightest-transparent-black;
11+
$mat-scrollbar-background: rgba($mat-black, 0);
12+
$mat-scrollbar-background-hover: rgba($mat-black, .12);
13+
14+
/// Style all scrollbars within the scope to material spec.
15+
///
16+
/// $thumb-hover-color should be a Material color matching your app's theme.
17+
/// $scrollbar-size defines the height of horizontal scrollbars and the width of
18+
/// vertical scrollbars.
19+
/// $thumb-min-size defines the min height of vertical scrollbar thumbs and the
20+
/// min width of horizontal scrollbar thumbs.
21+
@mixin material-scrollbar-theme(
22+
$thumb-hover-color,
23+
$scrollbar-size: $mat-grid-type,
24+
$thumb-min-size: 6 * $mat-grid) {
25+
::ng-deep {
26+
@include material-scrollbar(
27+
$thumb-hover-color, $scrollbar-size, $thumb-min-size);
28+
}
29+
}
30+
31+
/// Style all scrollbars within the scope to material spec.
32+
///
33+
/// Note: This is the same as material-scrollbar-theme except it can be used
34+
/// globally outside the context angular components.
35+
@mixin material-scrollbar(
36+
$thumb-hover-color,
37+
$scrollbar-size: $mat-grid-type,
38+
$thumb-min-size: 6 * $mat-grid) {
39+
::-webkit-scrollbar {
40+
background-color: $mat-scrollbar-background;
41+
42+
// Height only applies to horizontal scrollbars.
43+
height: $scrollbar-size;
44+
45+
// Width only applies to vertical scrollbars.
46+
width: $scrollbar-size;
47+
48+
&:hover {
49+
background-color: $mat-scrollbar-background-hover;
50+
}
51+
}
52+
53+
::-webkit-scrollbar-thumb {
54+
background-color: $mat-scrollbar-thumb;
55+
56+
// min-height only applies to vertical scrollbar thumbs.
57+
min-height: $thumb-min-size;
58+
59+
// min-width only applies to horizontal scrollbar thumbs.
60+
min-width: $thumb-min-size;
61+
62+
&:hover {
63+
background-color: $thumb-hover-color;
64+
}
65+
}
66+
67+
::-webkit-scrollbar-button {
68+
width: 0;
69+
height: 0;
70+
}
71+
}
72+
73+
// Style all scrollbars within the specified selector to Material spec.
74+
// This is an unscoped rule, so it will affect all elements nested inside the
75+
// given selector, anywhere on the page.
76+
// $thumb-hover-color should be a Material color matching your app's theme.
77+
@mixin material-scrollbars($selector, $thumb-hover-color) {
78+
::ng-deep #{$selector} ::-webkit-scrollbar {
79+
background-color: $mat-scrollbar-background;
80+
81+
// Height only applies to horizontal scrollbars
82+
height: $mat-grid;
83+
84+
// Width only applies to vertical scrollbars
85+
width: $mat-grid;
86+
}
87+
88+
::ng-deep #{$selector} ::-webkit-scrollbar:hover {
89+
background-color: $mat-scrollbar-background-hover;
90+
}
91+
92+
::ng-deep #{$selector} ::-webkit-scrollbar-thumb {
93+
background-color: $mat-scrollbar-thumb;
94+
95+
// min-height only applies to vertical scrollbar thumbs
96+
min-height: 6 * $mat-grid;
97+
98+
// min-width only applies to horizontal scrollbar thumbs
99+
min-width: 6 * $mat-grid;
100+
}
101+
102+
::ng-deep #{$selector} ::-webkit-scrollbar-thumb:hover {
103+
background-color: $thumb-hover-color;
104+
}
105+
106+
::ng-deep #{$selector} ::-webkit-scrollbar-button {
107+
width: 0;
108+
height: 0;
109+
}
110+
}

‎angular_components/lib/css/material/_mixins.scss‎

Lines changed: 1 addition & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,4 @@
22
// for details. All rights reserved. Use of this source code is governed by a
33
// BSD-style license that can be found in the LICENSE file.
44

5-
@import 'package:angular_components/css/material/material';
6-
7-
/// Style all scrollbars within the scope to material spec.
8-
///
9-
/// $thumb-hover-color should be a Material color matching your app's theme.
10-
/// $scrollbar-size defines the height of horizontal scrollbars and the width of
11-
/// vertical scrollbars.
12-
/// $thumb-min-size defines the min height of vertical scrollbar thumbs and the
13-
/// min width of horizontal scrollbar thumbs.
14-
@mixin material-scrollbar-theme(
15-
$thumb-hover-color,
16-
$scrollbar-size: $mat-grid-type,
17-
$thumb-min-size: 6 * $mat-grid) {
18-
::ng-deep {
19-
@include material-scrollbar(
20-
$thumb-hover-color, $scrollbar-size, $thumb-min-size);
21-
}
22-
}
23-
24-
/// Style all scrollbars within the scope to material spec.
25-
///
26-
/// Note: This is the same as material-scrollbar-theme except it can be used
27-
/// globally outside the context angular components.
28-
@mixin material-scrollbar(
29-
$thumb-hover-color,
30-
$scrollbar-size: $mat-grid-type,
31-
$thumb-min-size: 6 * $mat-grid) {
32-
::-webkit-scrollbar {
33-
background-color: $mat-scrollbar-background;
34-
35-
// Height only applies to horizontal scrollbars.
36-
height: $scrollbar-size;
37-
38-
// Width only applies to vertical scrollbars.
39-
width: $scrollbar-size;
40-
41-
&:hover {
42-
background-color: $mat-scrollbar-background-hover;
43-
}
44-
}
45-
46-
::-webkit-scrollbar-thumb {
47-
background-color: $mat-scrollbar-thumb;
48-
49-
// min-height only applies to vertical scrollbar thumbs.
50-
min-height: $thumb-min-size;
51-
52-
// min-width only applies to horizontal scrollbar thumbs.
53-
min-width: $thumb-min-size;
54-
55-
&:hover {
56-
background-color: $thumb-hover-color;
57-
}
58-
}
59-
60-
::-webkit-scrollbar-button {
61-
width: 0;
62-
height: 0;
63-
}
64-
}
5+
@import 'package:angular_components/css/scrollbar_material';

‎angular_components/lib/css/material/const/_color.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
// BSD-style license that can be found in the LICENSE file.
44

55
@import 'package:angular_components/css/color_material';
6+
@import 'package:angular_components/css/scrollbar_material';

‎angular_components/lib/css/material/const/_mixins.scss‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
//
1010
// #############################################################################
1111

12+
@import 'package:angular_components/css/scrollbar_material';
13+
1214
// Useful and reusable pieces of common css.
1315

1416
// Forces an element to take up the same space as its closest, positioned
@@ -169,45 +171,6 @@
169171
width: $background-size;
170172
}
171173

172-
// Style all scrollbars within the specified selector to Material spec.
173-
// This is an unscoped rule, so it will affect all elements nested inside the
174-
// given selector, anywhere on the page.
175-
// $thumb-hover-color should be a Material color matching your app's theme.
176-
@mixin material-scrollbars($selector, $thumb-hover-color) {
177-
::ng-deep #{$selector} ::-webkit-scrollbar {
178-
background-color: $mat-scrollbar-background;
179-
180-
// Height only applies to horizontal scrollbars
181-
height: $mat-grid;
182-
183-
// Width only applies to vertical scrollbars
184-
width: $mat-grid;
185-
}
186-
187-
::ng-deep #{$selector} ::-webkit-scrollbar:hover {
188-
background-color: $mat-scrollbar-background-hover;
189-
}
190-
191-
::ng-deep #{$selector} ::-webkit-scrollbar-thumb {
192-
background-color: $mat-scrollbar-thumb;
193-
194-
// min-height only applies to vertical scrollbar thumbs
195-
min-height: 6 * $mat-grid;
196-
197-
// min-width only applies to horizontal scrollbar thumbs
198-
min-width: 6 * $mat-grid;
199-
}
200-
201-
::ng-deep #{$selector} ::-webkit-scrollbar-thumb:hover {
202-
background-color: $thumb-hover-color;
203-
}
204-
205-
::ng-deep #{$selector} ::-webkit-scrollbar-button {
206-
width: 0;
207-
height: 0;
208-
}
209-
}
210-
211174
// *** Deprecated
212175
// The following functions are deprecated.
213176
// The equivalent native CSS is available in all supported browsers.

0 commit comments

Comments
 (0)