@salesforcedevs/mrkt-components 0.41.0-alpha.1 → 0.41.0-alpha.4

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/modules/mrkt/tdxSection/tdxSection.css +35 -37
  3. package/src/modules/mrkt/tdxSection/tdxSection.html +3 -5
  4. package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css +3 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/mrkt-components",
3
- "version": "0.41.0-alpha.1",
3
+ "version": "0.41.0-alpha.4",
4
4
  "description": "Marketing Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "engines": {
package/src/modules/mrkt/tdxSection/tdxSection.css CHANGED
@@ -3,18 +3,21 @@
3
3
 
4
4
  :host {
5
5
  --dx-g-text-heading-color: white;
6
+ --padding-top: 54px;
7
+ --padding-bottom: 74px;
6
8
  }
7
9
 
8
10
  .container {
9
11
  background-color: var(--dx-g-indigo-vibrant-20);
10
12
  display: flex;
11
- justify-content: center;
12
- margin: 108px auto 0 auto;
13
+ justify-content: space-between;
14
+ padding: 0 var(--dx-g-page-padding-horizontal);
15
+ margin-top: 120px;
13
16
  }
14
17
 
15
18
  .content {
16
- padding-left: var(--dx-g-page-padding-horizontal);
17
- width: 70%;
19
+ flex-grow: 1;
20
+ margin: var(--padding-top) 0 var(--padding-bottom) 0;
18
21
  }
19
22
 
20
23
  .content-subtitle,
@@ -28,10 +31,6 @@
28
31
  color: white;
29
32
  }
30
33
 
31
- .content-title {
32
- margin-top: 54px;
33
- }
34
-
35
34
  .content-subtitle {
36
35
  font-size: 32px;
37
36
  letter-spacing: -0.4%;
@@ -45,7 +44,6 @@
45
44
  letter-spacing: 0.12%;
46
45
  line-height: 30px;
47
46
  margin-top: var(--dx-g-spacing-smd);
48
- max-width: 565px;
49
47
  }
50
48
 
51
49
  .content-info {
@@ -57,22 +55,26 @@
57
55
  }
58
56
 
59
57
  .image-container {
60
- height: 430px;
58
+ width: 594px;
59
+ flex-shrink: 0;
60
+ position: relative;
61
61
  }
62
62
 
63
63
  img {
64
- position: relative;
65
- top: -80px;
66
- right: 15px;
64
+ position: absolute;
65
+ right: 0;
66
+ bottom: 0;
67
67
  }
68
68
 
69
- .content-button {
70
- margin-bottom: 40px;
71
- }
69
+ @media screen and (max-width: 1024px) {
70
+ :host {
71
+ --padding-top: 38px;
72
+ --padding-bottom: 52px;
73
+ }
72
74
 
73
- @media screen and (max-width: 900px) {
74
75
  .container {
75
76
  align-items: center;
77
+ margin-top: 0;
76
78
  }
77
79
 
78
80
  .content {
@@ -82,7 +84,6 @@ img {
82
84
 
83
85
  .content-title {
84
86
  font-size: var(--dx-g-text-3xl);
85
- margin-top: 39px;
86
87
  }
87
88
 
88
89
  .content-subtitle {
@@ -101,21 +102,18 @@ img {
101
102
  }
102
103
 
103
104
  .image-container {
105
+ flex-shrink: unset;
104
106
  height: unset;
107
+ padding: var(--dx-g-spacing-sm) 0;
105
108
  }
106
109
 
107
110
  img {
108
111
  position: relative;
109
- top: 15px;
110
- right: 25px;
111
- }
112
-
113
- .content-button {
114
- margin-bottom: 52px;
112
+ margin: 0 auto;
115
113
  }
116
114
  }
117
115
 
118
- @media screen and (max-width: 600px) {
116
+ @media screen and (max-width: 768px) {
119
117
  .container {
120
118
  flex-direction: column-reverse;
121
119
  text-align: center;
@@ -123,7 +121,11 @@ img {
123
121
  }
124
122
 
125
123
  .content {
126
- margin-left: 0;
124
+ display: flex;
125
+ flex-direction: column;
126
+ justify-content: center;
127
+ align-items: center;
128
+ margin-top: 0;
127
129
  }
128
130
 
129
131
  .content-title {
@@ -141,20 +143,16 @@ img {
141
143
  }
142
144
 
143
145
  .image-container {
144
- height: 140px;
146
+ height: 212px;
147
+ width: 100%;
148
+ max-width: 381px;
149
+ padding: unset;
145
150
  }
146
151
 
147
152
  img {
148
- position: relative;
149
- top: -170px;
153
+ position: absolute;
154
+ bottom: 0;
150
155
  right: 0;
151
- width: 381px;
152
- height: 383px;
153
- }
154
-
155
- .content-button {
156
- display: flex;
157
- justify-content: center;
158
- margin-bottom: 63px;
156
+ width: 100%;
159
157
  }
160
158
  }
package/src/modules/mrkt/tdxSection/tdxSection.html CHANGED
@@ -5,12 +5,10 @@
5
5
  <h4 class="content-subtitle">{subtitle}</h4>
6
6
  <p class="content-body">{body}</p>
7
7
  <p class="content-info">{info}</p>
8
- <div class="content-button">
9
- <dx-button>{buttonLabel}</dx-button>
10
- </div>
8
+ <dx-button>{buttonLabel}</dx-button>
11
9
  </div>
12
- <dix class="image-container">
10
+ <div class="image-container">
13
11
  <img src={imgSrc} alt={imgAlt} />
14
- </dix>
12
+ </div>
15
13
  </div>
16
14
  </template>
package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css CHANGED
@@ -6,7 +6,8 @@
6
6
  align-items: center;
7
7
  position: relative;
8
8
  overflow: hidden;
9
- padding-bottom: 20px;
9
+ padding: 0 var(--dx-g-page-padding-horizontal) 20px
10
+ var(--dx-g-page-padding-horizontal);
10
11
  }
11
12
 
12
13
  .swoop-container {
@@ -38,7 +39,7 @@
38
39
 
39
40
  .video {
40
41
  box-shadow: var(--dx-g-box-shadow-md);
41
- width: 70%;
42
+ width: 74%;
42
43
  border-radius: 16px;
43
44
  overflow: hidden;
44
45
  }