Skip to content

Commit 39e690c

Browse files
javiert-oktajaviert-okta
committed
update styles for ebook component
1 parent 761a901 commit 39e690c

File tree

1 file changed

+165
-102
lines changed

1 file changed

+165
-102
lines changed

‎src/features/common/components/ebook/ebook.module.scss‎

Lines changed: 165 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
@use "@/libs/theme/styles/mixins" as *;
33

44
.container {
5-
@include Container;
6-
position: relative;
7-
overflow: hidden;
8-
background: var(--color_bg_auth0-cta);
5+
width: 100%;
6+
position: relative;
7+
margin: 4rem 0;
8+
overflow: clip;
99

1010
&:before {
1111
position: absolute;
@@ -14,168 +14,231 @@
1414
content: "";
1515
width: 100%;
1616
height: 100%;
17-
18-
background: url("https://cdn.auth0.com/website/passkeys-playground/assets/cta-mobile.png")
19-
no-repeat;
20-
background-size: cover;
21-
}
22-
23-
@media only screen and (min-width: 480px) {
24-
&:before {
25-
background: url("https://cdn.auth0.com/website/passkeys-playground/assets/cta-mobile.png")
26-
no-repeat;
27-
background-size: cover;
28-
}
29-
}
30-
31-
@media #{$breakpoint-dimension-sm} {
32-
&:before {
33-
background: url("/images/auth0-background.svg") no-repeat right
34-
center;
35-
background-size: cover;
36-
}
3717
}
3818

3919
@media #{$breakpoint-dimension-md} {
40-
background: unset;
41-
42-
&:before {
43-
background: none;
44-
}
45-
46-
&:after {
47-
display: none;
48-
background: none;
49-
}
20+
overflow: unset;
5021
}
22+
5123
}
5224

5325
.wrapper {
5426
@include ExtendedGrid;
5527
position: relative;
5628
justify-content: center;
57-
58-
border-radius: 0;
59-
overflow: hidden;
60-
61-
@media #{$breakpoint-dimension-xl} {
62-
border-radius: 1.5rem;
63-
}
29+
border-radius: 1rem;
6430
}
6531

6632
.content {
67-
@include InnerContentGrid;
33+
display: flex;
34+
width: calc(100% - 2rem);
35+
max-width: 1312px;
36+
margin: 0 auto;
6837
position: relative;
6938
padding: 1.5rem 0 14rem;
70-
isolation: isolate;
39+
border-radius: 1rem;
40+
border: 1px dashed var(--color_border_bold);
41+
background-color: var(--color_bg_layer_alternate);
42+
background-image: linear-gradient(90deg,hsla(0,0%,50%,.071) 1px,transparent 0),linear-gradient(180deg,hsla(0,0%,50%,.071) 1px,transparent 0);
43+
background-size: 24px 24px;
44+
7145

7246
&:after {
7347
position: absolute;
7448
content: "";
75-
bottom: -1.5rem;
76-
right: 0;
77-
background: url("/images/ebook-image.png") center no-repeat;
78-
background-size: contain;
79-
width: 100%;
80-
height: 75%;
49+
top: 10rem;
50+
left: 18rem;
51+
background-image: url("/images/ebook.svg");
52+
border-radius: .25rem;
53+
transform: rotate(-7.5deg);
54+
height: 320px;
55+
width: 240px;
56+
z-index: 10;
8157
}
8258

83-
@media #{$breakpoint-dimension-xs} {
84-
padding-bottom: 1.5rem;
85-
column-gap: 6rem;
59+
&:hover:after {
60+
perspective: 100px;
61+
transform: rotate(5deg) translateX(-24px) translateY(0) scale(1.1);
62+
transition: all .2s ease-in-out;
63+
}
8664

87-
&:after {
88-
position: absolute;
89-
content: "";
90-
top: 0;
91-
right: 0;
92-
background: url("/images/ebook-image.png") center no-repeat;
93-
background-size: cover;
94-
height: 100%;
95-
width: 32%;
96-
z-index: 10;
97-
}
65+
@media #{$breakpoint-dimension-xs} {
66+
column-gap: 0;
9867
}
9968

10069
@media #{$breakpoint-dimension-xs} {
10170
column-gap: 0;
10271
}
10372

73+
@media only screen and (min-width: 992px) and (min-width: 768px) {
74+
width: calc(100% - 4rem);
75+
grid-template-columns: repeat(12, minmax(0, 1fr));
76+
}
77+
10478
@media #{$breakpoint-dimension-md} {
105-
background: var(--color_bg_auth0-cta);
106-
padding: 2rem 2.5rem;
79+
padding: 4rem 2.5rem;
10780
border-radius: 1rem;
108-
overflow: hidden;
109-
81+
display: grid;
82+
max-width: 1312px;
83+
margin: 0 auto;
84+
transition: all .2s ease-in-out;
85+
11086
&:before {
11187
position: absolute;
11288
bottom: 0;
11389
right: 0;
11490
content: "";
11591
width: 100%;
11692
height: 100%;
117-
background-size: contain;
93+
border-radius: 1rem;
94+
background-color: var(--color_bg_layer_alternate);
95+
background-image: linear-gradient(90deg,hsla(0,0%,50%,.071) 1px,transparent 0),linear-gradient(180deg,hsla(0,0%,50%,.071) 1px,transparent 0);
96+
background-size: 24px 24px;
97+
}
11898

119-
background: url("/images/auth0-background.svg") no-repeat right
120-
bottom;
121-
background-size: cover;
99+
&:after {
100+
position: absolute;
101+
content: "";
102+
top: -1.75rem;
103+
left: 4rem;
104+
background-image: url("/images/ebook.svg");
105+
border-radius: .25rem;
106+
transform: rotate(-7.5deg);
107+
height: 320px;
108+
width: 240px;
109+
z-index: 10;
110+
transition: all .2s ease-in-out;
122111
}
123112
}
113+
114+
@media #{$breakpoint-dimension-sm} {
115+
width: calc(100% - 4rem);
116+
}
117+
}
118+
119+
.ebookBanner__code {
120+
pointer-events: none;
121+
position: absolute;
122+
display: flex;
123+
flex-direction: column;
124+
align-items: flex-start;
125+
justify-content: center;
126+
grid-column: 3/span 3;
127+
height: fit-content;
128+
transform: translateY(0);
129+
top: auto;
130+
bottom: 0;
131+
left: 0;
132+
width: 100%;
133+
text-wrap: wrap;
134+
padding: 1rem;
135+
background: #191919;
136+
color: var(--color_fg_code);
137+
border-radius: 1.25rem;
138+
border-top-left-radius: .25rem;
139+
border-top-right-radius: .25rem;
140+
border: 1px solid var(--color_border_bold);
141+
font-size: .875rem;
142+
white-space: pre;
143+
word-wrap: break-word;
144+
text-overflow: ellipsis;
145+
text-wrap-mode: wrap;
146+
text-wrap-style: balance;
147+
overflow: clip;
148+
box-shadow: 0 0 0 1px rgba(0,0,0,.12),0 4px 4px -2px rgba(0,0,0,.04),0 2px 2px -1px rgba(0,0,0,.04);
149+
transition: all .4s ease-in-out;
150+
151+
span {
152+
padding: .25rem 0;
153+
transition: color .1s ease;
154+
}
155+
156+
@media #{$breakpoint-dimension-md} {
157+
border-radius: 1.25rem;
158+
left: 0;
159+
top: 50%;
160+
transform: translateY(-50%);
161+
}
162+
}
163+
164+
.ebookBanner__code_dot {
165+
display: inline;
166+
position: relative;
167+
color: var(--color_border_inverse_static);
168+
padding: .125rem 0;
169+
}
170+
171+
.ebookBanner__code_string {
172+
display: inline;
173+
position: relative;
174+
color: var(--color_jwt_signature);
175+
padding: .125rem 0;
124176
}
125177

126178
.ebookBanner__copy {
127-
grid-column: 1 / span 6;
179+
grid-column: 1/span 6;
128180
display: flex;
129181
flex-direction: column;
182+
padding: 0 2.5rem;
130183
z-index: 1;
184+
margin-top: 2rem;
131185

132186
@media #{$breakpoint-dimension-xs} {
133-
grid-column: 1 / span 4;
187+
grid-column: 1/span 4;
134188
}
135189

136190
@media #{$breakpoint-dimension-sm} {
137-
grid-column: 1 / span 8;
191+
grid-column: 6/span 6;
192+
}
193+
194+
@media #{$breakpoint-dimension-md} {
195+
margin-top: 0;
138196
}
139197
}
140198

141199
.ebookBanner__title {
142-
color: var(--color_fg_bold);
143-
200+
width: 100%;
201+
margin: 0;
202+
text-align: left;
144203
font-size: 1.5rem;
145-
line-height: 2rem;
146-
letter-spacing: 0.05px;
204+
line-height: 1.15;
147205
font-weight: 500;
206+
color: var(--color_fg_bold);
207+
font-feature-settings: lining-nums proportional-nums;
208+
font-variant-numeric: lining-nums proportional-nums;
209+
font-style: normal;
210+
211+
@media #{$breakpoint-dimension-lg} {
212+
font-size: 2.5rem;
213+
}
148214
}
149215

150216
.ebookBanner__description {
151217
color: var(--color_fg_default);
152218
font-size: 1rem;
153-
line-height: 1.25rem;
154-
margin-top: 0.5rem;
219+
line-height: 1.5;
220+
margin-top: .5rem;
155221
}
156222

157223
.ebookBanner__link {
158-
margin-top: 1.5rem;
159-
display: flex;
160-
padding: 0.5rem 1rem;
161-
justify-content: center;
162-
align-items: center;
163-
gap: 0.5rem;
164-
align-self: stretch;
165-
166-
border-radius: 0.375rem;
167-
background: linear-gradient(
168-
120deg,
169-
#191919 -29.78%,
170-
#4016a0 11.61%,
171-
#3f59e4 100.07%
172-
);
173-
174-
color: $neutrals-light-100-snow;
175-
font-size: 0.875rem;
176-
line-height: 1.375rem;
177-
font-weight: 500;
178-
letter-spacing: 0.2px;
224+
width: fit-content;
225+
margin-top: 1.5rem;
226+
display: flex;
227+
padding: .25rem .75rem;
228+
justify-content: center;
229+
align-items: center;
230+
gap: .5rem;
231+
align-self: stretch;
232+
border-radius: 9999px;
233+
background: var(--color_fg_on_button);
234+
box-shadow: 0 1px 1px -.5px rgba(0,0,0,.04),0 3px 3px -1.5px rgba(0,0,0,.04),0 6px 6px -3px rgba(0,0,0,.04),0 12px 12px -6px rgba(0,0,0,.04),0 24px 24px -12px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.08);
235+
color: var(--color_bg_layer);
236+
font-size: .875rem;
237+
font-weight: 700;
238+
line-height: 1.375rem;
239+
font-weight: 500;
240+
letter-spacing: -.2px;
241+
transition: all .3s ease-in-out;
179242

180243
:global(html[lang="ja"]) & {
181244
@include LocaleLineHeight("ja", 1rem);
@@ -203,6 +266,6 @@
203266
svg {
204267
height: 0.75rem;
205268
width: 0.75rem;
206-
fill: $neutrals-light-100-snow;
269+
fill: var(--color_bg_layer);
207270
}
208271
}

0 commit comments

Comments
 (0)