@microsoft/atlas-css 3.40.0 → 3.41.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/class-names.json +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/components/hero.scss +57 -7
package/package.json
CHANGED
package/src/components/hero.scss
CHANGED
|
@@ -7,9 +7,12 @@ $hero-min-height-xs: 200px !default;
|
|
|
7
7
|
$hero-min-height-sm: 300px !default;
|
|
8
8
|
$hero-min-height-default: 400px !default;
|
|
9
9
|
$hero-min-height-lg: 500px !default;
|
|
10
|
-
|
|
11
|
-
$hero-content-width:
|
|
10
|
+
$hero-detail-max-width: 500px !default;
|
|
11
|
+
$hero-content-half-width: 50% !default;
|
|
12
12
|
$hero-content-fluid-width: 45% !default;
|
|
13
|
+
$hero-details-content-fluid-width: 35% !default;
|
|
14
|
+
$hero-content-width: $reading-max-width !default;
|
|
15
|
+
|
|
13
16
|
$hero-image-width: calc((100% - 2 * $layout-gap) * 0.55) !default;
|
|
14
17
|
$hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !default;
|
|
15
18
|
|
|
@@ -22,10 +25,18 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
|
|
|
22
25
|
align-items: stretch;
|
|
23
26
|
justify-content: space-between;
|
|
24
27
|
|
|
28
|
+
@include tablet {
|
|
29
|
+
flex-direction: row;
|
|
30
|
+
}
|
|
31
|
+
|
|
25
32
|
.hero-content {
|
|
26
33
|
z-index: $zindex-active;
|
|
27
34
|
padding-block: $hero-padding-sm;
|
|
28
35
|
|
|
36
|
+
@include tablet {
|
|
37
|
+
max-width: $hero-content-half-width;
|
|
38
|
+
}
|
|
39
|
+
|
|
29
40
|
@include desktop {
|
|
30
41
|
width: $hero-content-fluid-width;
|
|
31
42
|
min-height: $hero-min-height-default;
|
|
@@ -34,6 +45,44 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
|
|
|
34
45
|
}
|
|
35
46
|
}
|
|
36
47
|
|
|
48
|
+
.theme-high-contrast & .hero-details-card {
|
|
49
|
+
background: unset !important;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.hero-details {
|
|
53
|
+
display: flex;
|
|
54
|
+
padding-block: $hero-padding-xs;
|
|
55
|
+
|
|
56
|
+
@include tablet {
|
|
57
|
+
justify-content: flex-end;
|
|
58
|
+
padding-block: $hero-padding-sm;
|
|
59
|
+
padding-inline-start: $hero-padding-xs;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@include desktop {
|
|
63
|
+
min-height: $hero-min-height-default;
|
|
64
|
+
padding-block: $hero-padding-default;
|
|
65
|
+
padding-inline-start: $hero-padding-sm;
|
|
66
|
+
padding-inline-end: $hero-padding-sm;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.hero-details-card {
|
|
70
|
+
align-self: flex-start;
|
|
71
|
+
backdrop-filter: blur(20px);
|
|
72
|
+
background-color: #{$body-background};
|
|
73
|
+
|
|
74
|
+
@include desktop {
|
|
75
|
+
max-width: $hero-detail-max-width;
|
|
76
|
+
background: linear-gradient(
|
|
77
|
+
116deg,
|
|
78
|
+
#{$body-background} 23.94%,
|
|
79
|
+
#{$border-white-high-contrast} 200%
|
|
80
|
+
);
|
|
81
|
+
margin-inline-start: $hero-padding-xs;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
37
86
|
&:not(.hero-image) {
|
|
38
87
|
.hero-content {
|
|
39
88
|
@include desktop {
|
|
@@ -140,16 +189,17 @@ $hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !
|
|
|
140
189
|
|
|
141
190
|
// Set direction to prevent image flip for rtl
|
|
142
191
|
|
|
192
|
+
[dir='rtl'] &.hero-image,
|
|
143
193
|
&.hero-image:dir(rtl) {
|
|
144
194
|
direction: ltr;
|
|
145
195
|
|
|
146
|
-
.hero-content
|
|
196
|
+
.hero-content,
|
|
197
|
+
.hero-details-card {
|
|
147
198
|
direction: rtl;
|
|
199
|
+
}
|
|
148
200
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
padding-inline-start: $hero-padding-sm;
|
|
152
|
-
}
|
|
201
|
+
&[class^='gradient-border-'] {
|
|
202
|
+
direction: ltr;
|
|
153
203
|
}
|
|
154
204
|
}
|
|
155
205
|
}
|