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

Commit 4a0c9d0

Browse files
har79nshahan
har79
authored and
nshahan
committed
Part of a sequence of CLs refactoring css/material into separate, smaller libraries
PiperOrigin-RevId: 225359419
1 parent 3775867 commit 4a0c9d0

File tree

2 files changed

+118
-113
lines changed

2 files changed

+118
-113
lines changed

‎angular_components/lib/css/_elevation_material.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
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+
// A common set of SASS styles to apply MD shadows.
6+
// Evolved from
7+
// https://github.com/PolymerElements/paper-styles/blob/master/shadow.html
8+
9+
// Applies a standard transition style for box-shadow to box-shadow.
10+
@mixin shadow-transition() {
11+
transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
12+
}
13+
14+
// Disables box-shadow.
15+
@mixin shadow-none {
16+
box-shadow: none;
17+
}
18+
19+
// Some opacity values that are common here. Maybe pull this out too?
20+
$keyUmbraOpacity: .2;
21+
$keyPenumbraOpacity: .14;
22+
$ambientShadowOpacity: .12;
23+
24+
/// Applies a standard shadow to the selected element(s).
25+
///
26+
/// This rule is great for things that need a static shadow. If the elevation
27+
/// of the shadow needs to be changed dynamically, use the `material-shadow`
28+
/// rule below.
29+
///
30+
/// Valid values: 2, 3, 4, 6, 8, 12, 16, 24
31+
@mixin shadow-elevation($dp: 2) {
32+
@if $dp == 2 {
33+
/*! @noflip */
34+
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
35+
0 3px 1px -2px rgba(0, 0, 0, $ambientShadowOpacity),
36+
0 1px 5px 0 rgba(0, 0, 0, $keyUmbraOpacity);
37+
} @else if $dp == 3 {
38+
/*! @noflip */
39+
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
40+
0 3px 3px -2px rgba(0, 0, 0, $ambientShadowOpacity),
41+
0 1px 8px 0 rgba(0, 0, 0, $keyUmbraOpacity);
42+
} @else if $dp == 4 {
43+
/*! @noflip */
44+
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
45+
0 1px 10px 0 rgba(0, 0, 0, $ambientShadowOpacity),
46+
0 2px 4px -1px rgba(0, 0, 0, $keyUmbraOpacity);
47+
} @else if $dp == 6 {
48+
/*! @noflip */
49+
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
50+
0 1px 18px 0 rgba(0, 0, 0, $ambientShadowOpacity),
51+
0 3px 5px -1px rgba(0, 0, 0, $keyUmbraOpacity);
52+
} @else if $dp == 8 {
53+
/*! @noflip */
54+
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $keyPenumbraOpacity),
55+
0 3px 14px 2px rgba(0, 0, 0, $ambientShadowOpacity),
56+
0 5px 5px -3px rgba(0, 0, 0, $keyUmbraOpacity);
57+
} @else if $dp == 12 {
58+
/*! @noflip */
59+
box-shadow: 0 12px 17px 2px rgba(0, 0, 0, $keyPenumbraOpacity),
60+
0 5px 22px 4px rgba(0, 0, 0, $ambientShadowOpacity),
61+
0 7px 8px -4px rgba(0, 0, 0, $keyUmbraOpacity);
62+
} @else if $dp == 16 {
63+
/*! @noflip */
64+
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $keyPenumbraOpacity),
65+
0 6px 30px 5px rgba(0, 0, 0, $ambientShadowOpacity),
66+
0 8px 10px -5px rgba(0, 0, 0, $keyUmbraOpacity);
67+
} @else if $dp == 24 {
68+
/*! @noflip */
69+
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, $keyPenumbraOpacity),
70+
0 9px 46px 8px rgba(0, 0, 0, $ambientShadowOpacity),
71+
0 11px 15px -7px rgba(0, 0, 0, $keyUmbraOpacity);
72+
}
73+
}
74+
75+
/// Applies the Material Shadow styles to the selected element.
76+
///
77+
/// Use the attributes below to control the shadow.
78+
///
79+
/// - `animated` -- Whether to animate the shadow transition.
80+
/// - `elevation` -- Z-elevation of shadow. Valid Values: 1,2,3,4,5
81+
///
82+
/// Example:
83+
///
84+
/// .shadow-box {
85+
/// @include material-shadow();
86+
/// }
87+
///
88+
/// <div class="shadow-box" animated elevation="3">...</div>
89+
@mixin material-shadow() {
90+
&[animated] {
91+
@include shadow-transition();
92+
}
93+
94+
&[elevation="1"] {
95+
@include shadow-elevation(2);
96+
}
97+
98+
&[elevation="2"] {
99+
@include shadow-elevation(4);
100+
}
101+
102+
&[elevation="3"] {
103+
@include shadow-elevation(6);
104+
}
105+
106+
&[elevation="4"] {
107+
@include shadow-elevation(8);
108+
}
109+
110+
&[elevation="5"] {
111+
@include shadow-elevation(16);
112+
}
113+
114+
&[elevation="6"] {
115+
@include shadow-elevation(24);
116+
}
117+
}

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

Lines changed: 1 addition & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -2,116 +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-
// A common set of SASS styles to apply MD shadows.
6-
// Evolved from
7-
// https://github.com/PolymerElements/paper-styles/blob/master/shadow.html
8-
9-
// Applies a standard transition style for box-shadow to box-shadow.
10-
@mixin shadow-transition() {
11-
transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
12-
}
13-
14-
// Disables box-shadow.
15-
@mixin shadow-none {
16-
box-shadow: none;
17-
}
18-
19-
// Some opacity values that are common here. Maybe pull this out too?
20-
$keyUmbraOpacity: .2;
21-
$keyPenumbraOpacity: .14;
22-
$ambientShadowOpacity: .12;
23-
24-
/// Applies a standard shadow to the selected element(s).
25-
///
26-
/// This rule is great for things that need a static shadow. If the elevation
27-
/// of the shadow needs to be changed dynamically, use the `material-shadow`
28-
/// rule below.
29-
///
30-
/// Valid values: 2, 3, 4, 6, 8, 12, 16, 24
31-
@mixin shadow-elevation($dp: 2) {
32-
@if $dp == 2 {
33-
/*! @noflip */
34-
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
35-
0 3px 1px -2px rgba(0, 0, 0, $ambientShadowOpacity),
36-
0 1px 5px 0 rgba(0, 0, 0, $keyUmbraOpacity);
37-
} @else if $dp == 3 {
38-
/*! @noflip */
39-
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
40-
0 3px 3px -2px rgba(0, 0, 0, $ambientShadowOpacity),
41-
0 1px 8px 0 rgba(0, 0, 0, $keyUmbraOpacity);
42-
} @else if $dp == 4 {
43-
/*! @noflip */
44-
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
45-
0 1px 10px 0 rgba(0, 0, 0, $ambientShadowOpacity),
46-
0 2px 4px -1px rgba(0, 0, 0, $keyUmbraOpacity);
47-
} @else if $dp == 6 {
48-
/*! @noflip */
49-
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $keyPenumbraOpacity),
50-
0 1px 18px 0 rgba(0, 0, 0, $ambientShadowOpacity),
51-
0 3px 5px -1px rgba(0, 0, 0, $keyUmbraOpacity);
52-
} @else if $dp == 8 {
53-
/*! @noflip */
54-
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $keyPenumbraOpacity),
55-
0 3px 14px 2px rgba(0, 0, 0, $ambientShadowOpacity),
56-
0 5px 5px -3px rgba(0, 0, 0, $keyUmbraOpacity);
57-
} @else if $dp == 12 {
58-
/*! @noflip */
59-
box-shadow: 0 12px 17px 2px rgba(0, 0, 0, $keyPenumbraOpacity),
60-
0 5px 22px 4px rgba(0, 0, 0, $ambientShadowOpacity),
61-
0 7px 8px -4px rgba(0, 0, 0, $keyUmbraOpacity);
62-
} @else if $dp == 16 {
63-
/*! @noflip */
64-
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $keyPenumbraOpacity),
65-
0 6px 30px 5px rgba(0, 0, 0, $ambientShadowOpacity),
66-
0 8px 10px -5px rgba(0, 0, 0, $keyUmbraOpacity);
67-
} @else if $dp == 24 {
68-
/*! @noflip */
69-
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, $keyPenumbraOpacity),
70-
0 9px 46px 8px rgba(0, 0, 0, $ambientShadowOpacity),
71-
0 11px 15px -7px rgba(0, 0, 0, $keyUmbraOpacity);
72-
}
73-
}
74-
75-
/// Applies the Material Shadow styles to the selected element.
76-
///
77-
/// Use the attributes below to control the shadow.
78-
///
79-
/// - `animated` -- Whether to animate the shadow transition.
80-
/// - `elevation` -- Z-elevation of shadow. Valid Values: 1,2,3,4,5
81-
///
82-
/// Example:
83-
///
84-
/// .shadow-box {
85-
/// @include material-shadow();
86-
/// }
87-
///
88-
/// <div class="shadow-box" animated elevation="3">...</div>
89-
@mixin material-shadow() {
90-
&[animated] {
91-
@include shadow-transition();
92-
}
93-
94-
&[elevation="1"] {
95-
@include shadow-elevation(2);
96-
}
97-
98-
&[elevation="2"] {
99-
@include shadow-elevation(4);
100-
}
101-
102-
&[elevation="3"] {
103-
@include shadow-elevation(6);
104-
}
105-
106-
&[elevation="4"] {
107-
@include shadow-elevation(8);
108-
}
109-
110-
&[elevation="5"] {
111-
@include shadow-elevation(16);
112-
}
113-
114-
&[elevation="6"] {
115-
@include shadow-elevation(24);
116-
}
117-
}
5+
@import 'package:angular_components/css/elevation_material';

0 commit comments

Comments
 (0)