@salesforcedevs/mrkt-components 0.41.0-alpha.2 → 0.41.0-alpha.3

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 +33 -38
  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.2",
3
+ "version": "0.41.0-alpha.3",
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,20 @@
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);
13
15
  }
14
16
 
15
17
  .content {
16
- padding-left: var(--dx-g-page-padding-horizontal);
17
- width: 70%;
18
+ flex-grow: 1;
19
+ margin: var(--padding-top) 0 var(--padding-bottom) 0;
18
20
  }
19
21
 
20
22
  .content-subtitle,
@@ -28,10 +30,6 @@
28
30
  color: white;
29
31
  }
30
32
 
31
- .content-title {
32
- margin-top: 54px;
33
- }
34
-
35
33
  .content-subtitle {
36
34
  font-size: 32px;
37
35
  letter-spacing: -0.4%;
@@ -45,7 +43,6 @@
45
43
  letter-spacing: 0.12%;
46
44
  line-height: 30px;
47
45
  margin-top: var(--dx-g-spacing-smd);
48
- max-width: 565px;
49
46
  }
50
47
 
51
48
  .content-info {
@@ -57,20 +54,23 @@
57
54
  }
58
55
 
59
56
  .image-container {
60
- height: 430px;
57
+ width: 594px;
58
+ flex-shrink: 0;
59
+ position: relative;
61
60
  }
62
61
 
63
62
  img {
64
- position: relative;
65
- top: -80px;
66
- right: 15px;
63
+ position: absolute;
64
+ right: 0;
65
+ bottom: 0;
67
66
  }
68
67
 
69
- .content-button {
70
- margin-bottom: 40px;
71
- }
68
+ @media screen and (max-width: 1024px) {
69
+ :host {
70
+ --padding-top: 38px;
71
+ --padding-bottom: 52px;
72
+ }
72
73
 
73
- @media screen and (max-width: 900px) {
74
74
  .container {
75
75
  align-items: center;
76
76
  }
@@ -82,7 +82,6 @@ img {
82
82
 
83
83
  .content-title {
84
84
  font-size: var(--dx-g-text-3xl);
85
- margin-top: 39px;
86
85
  }
87
86
 
88
87
  .content-subtitle {
@@ -101,29 +100,29 @@ img {
101
100
  }
102
101
 
103
102
  .image-container {
103
+ flex-shrink: unset;
104
104
  height: unset;
105
+ padding: var(--dx-g-spacing-sm) 0;
105
106
  }
106
107
 
107
108
  img {
108
109
  position: relative;
109
- top: 15px;
110
- right: 25px;
111
- }
112
-
113
- .content-button {
114
- margin-bottom: 52px;
110
+ margin: 0 auto;
115
111
  }
116
112
  }
117
113
 
118
- @media screen and (max-width: 600px) {
114
+ @media screen and (max-width: 768px) {
119
115
  .container {
120
116
  flex-direction: column-reverse;
121
117
  text-align: center;
122
- margin-top: 170px;
123
118
  }
124
119
 
125
120
  .content {
126
- margin-left: 0;
121
+ display: flex;
122
+ flex-direction: column;
123
+ justify-content: center;
124
+ align-items: center;
125
+ margin-top: 0;
127
126
  }
128
127
 
129
128
  .content-title {
@@ -141,20 +140,16 @@ img {
141
140
  }
142
141
 
143
142
  .image-container {
144
- height: 140px;
143
+ height: 212px;
144
+ width: 100%;
145
+ max-width: 381px;
146
+ padding: unset;
145
147
  }
146
148
 
147
149
  img {
148
- position: relative;
149
- top: -170px;
150
+ position: absolute;
151
+ bottom: 0;
150
152
  right: 0;
151
- width: 381px;
152
- height: 383px;
153
- }
154
-
155
- .content-button {
156
- display: flex;
157
- justify-content: center;
158
- margin-bottom: 63px;
153
+ width: 100%;
159
154
  }
160
155
  }
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
  }