@energycap/components 0.38.4 → 0.38.5-ECAP-19826-email-table-styles.20231010-1620

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 (3) hide show
  1. package/energycap-email.min.css +1 -1
  2. package/package.json +1 -1
  3. package/src/styles/email/_email-base.scss +55 -3
package/energycap-email.min.css CHANGED
@@ -1 +1 @@
1
- html{background-color:#fff;font-size:16px}body{font-size:14px;font-weight:400;color:#1a1a23;line-height:1.2;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;text-align:left;margin:0}table{width:100%;border-spacing:0;font-size:14px}tr,td{border-image-width:0}.email-wrapper{width:600px;padding-top:48px}.email-header{padding-right:16px;padding-left:16px}.email-body{padding:32px 24px}[tabindex="-1"]:focus{outline:0 !important}h1,h2,h3,h4,h5,h6,p,ol,ul{margin-top:0;margin-bottom:16px}h1,h2{font-size:20px;line-height:24px}h3,h4{font-size:16px;line-height:24px}h5,h6{font-size:12px;line-height:16px;text-transform:uppercase;color:rgba(26,26,35,.66)}h1,h3,h5{font-weight:bold}h2,h4,h6{font-weight:normal}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}b,strong{font-weight:bolder}a{color:#0084a9;text-decoration:none;background-color:rgba(0,0,0,0)}a:hover{text-decoration:underline}a:focus{outline:#0084a9 solid 2px;outline-offset:2px;border-radius:2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}.email-button,.email-button-primary{display:inline-block;margin-right:8px;margin-bottom:8px;background-color:#d6d6d7;padding:0 16px;line-height:32px;border-radius:4px;color:#1a1a23 !important}.email-button-primary{background-color:#cfd856}.email-cta{display:inline-block;margin-right:8px;margin-bottom:8px;background-color:#17303b;color:#d8e902 !important;line-height:48px;padding:0 24px;min-width:176px;text-align:center;border-radius:6px}img{max-width:100%;height:auto}hr{height:0;border-bottom:0;overflow:visible;margin:16px 0;border-color:rgba(26,26,35,.18)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-underline{text-decoration:underline}.text-caption-1{color:rgba(26,26,35,.66);font-size:12px}.text-caption-2{color:rgba(26,26,35,.66);font-size:10px}.email-logo{width:100%;max-width:292px;font-size:28px;font-weight:normal}.email-logo-wl{margin-left:4px;width:56px;max-width:56px}
1
+ html{background-color:#fff;font-size:16px}body{font-size:14px;font-weight:400;color:#1a1a23;line-height:1.2;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;text-align:left;margin:0}table{width:100%;border-spacing:0;font-size:14px}tr,td{border-image-width:0}.email-wrapper{width:600px;padding-top:48px}.email-header{padding-right:16px;padding-left:16px}.email-body{padding:32px 24px}[tabindex="-1"]:focus{outline:0 !important}h1,h2,h3,h4,h5,h6,p,ol,ul{margin-top:0;margin-bottom:16px}h1,h2{font-size:20px;line-height:24px}h3,h4{font-size:16px;line-height:24px}h5,h6{font-size:12px;line-height:16px;text-transform:uppercase;color:rgba(26,26,35,.66)}h1,h3,h5{font-weight:bold}h2,h4,h6{font-weight:normal}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}b,strong{font-weight:bolder}a{color:#0084a9;text-decoration:none;background-color:rgba(0,0,0,0)}th,td{text-align:left}a:hover{text-decoration:underline}a:focus{outline:#0084a9 solid 2px;outline-offset:2px;border-radius:2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}.email-button,.email-button-primary{display:inline-block;margin-right:8px;margin-bottom:8px;background-color:#d6d6d7;padding:0 16px;line-height:32px;border-radius:4px;color:#1a1a23 !important}.email-button-primary{background-color:#cfd856}.email-cta{display:inline-block;margin-right:8px;margin-bottom:8px;background-color:#17303b;color:#d8e902 !important;line-height:48px;padding:0 24px;min-width:176px;text-align:center;border-radius:6px}.email-table{width:100%;border-spacing:0;border-collapse:separate;font-size:12px;margin-bottom:16px}.email-table th,.email-table td{height:32px;line-height:16px;padding:8px}.email-table th{font-weight:normal;vertical-align:middle;color:rgba(26,26,35,.66);border-bottom:1px solid #383840}.email-table td{border-top:1px solid #d6d6d7;vertical-align:top}.email-table th:first-child,.email-table td:first-child{padding-left:0}.email-table th:last-child,.email-table td:last-child{padding-right:0}.email-table tr:first-child td{border-top:0}img{max-width:100%;height:auto}hr{height:0;border:0;overflow:visible;margin:16px 0;border-top:1px solid #d6d6d7}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-underline{text-decoration:underline}.text-caption-1{color:rgba(26,26,35,.66);font-size:12px}.text-caption-2{color:rgba(26,26,35,.66);font-size:10px}.font-color-danger{color:#c50124}.email-logo{width:100%;max-width:292px;font-size:28px;font-weight:normal}.email-logo-wl{margin-left:4px;width:56px;max-width:56px}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@energycap/components",
3
- "version": "0.38.4",
3
+ "version": "0.38.5-ECAP-19826-email-table-styles.20231010-1620",
4
4
  "dependencies": {
5
5
  "tslib": "^2.0.0"
6
6
  },
package/src/styles/email/_email-base.scss CHANGED
@@ -4,9 +4,11 @@ $ec-color-primary-dark: rgb(26, 26, 35);
4
4
  $ec-color-secondary-dark: rgba(26, 26, 35, .66);
5
5
  $ec-color-interactive: rgb(0, 132, 169);
6
6
  $ec-background-color: rgb(255, 255, 255);
7
- $ec-border-color: rgba(26, 26, 35, .18);
7
+ $ec-border-color: #D6D6D7;
8
+ $ec-border-color-dark: #383840;
8
9
  $ec-font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
9
10
  $green-3: #cfd856;
11
+ $ec-color-danger: rgb(197, 1, 36);
10
12
 
11
13
  @mixin body {
12
14
  font-size: 14px;
@@ -65,6 +67,11 @@ $green-3: #cfd856;
65
67
  text-decoration: none;
66
68
  background-color: transparent;
67
69
  }
70
+
71
+ th,
72
+ td {
73
+ text-align: left;
74
+ }
68
75
 
69
76
  a:hover {
70
77
  text-decoration: underline;
@@ -119,6 +126,47 @@ $green-3: #cfd856;
119
126
  text-align: center;
120
127
  border-radius: 6px;
121
128
  }
129
+
130
+ .email-table {
131
+ width: 100%;
132
+ border-spacing: 0;
133
+ border-collapse: separate;
134
+ font-size: 12px;
135
+ margin-bottom: 16px;
136
+
137
+ th,
138
+ td {
139
+ height: 32px;
140
+ line-height: 16px;
141
+ padding: 8px;
142
+ }
143
+
144
+ th {
145
+ font-weight: normal;
146
+ vertical-align: middle;
147
+ color: $ec-color-secondary-dark;
148
+ border-bottom: 1px solid $ec-border-color-dark;
149
+ }
150
+
151
+ td {
152
+ border-top: 1px solid $ec-border-color;
153
+ vertical-align: top;
154
+ }
155
+
156
+ th:first-child,
157
+ td:first-child {
158
+ padding-left: 0;
159
+ }
160
+
161
+ th:last-child,
162
+ td:last-child {
163
+ padding-right: 0;
164
+ }
165
+
166
+ tr:first-child td {
167
+ border-top: 0;
168
+ }
169
+ }
122
170
 
123
171
  img {
124
172
  max-width: 100%;
@@ -127,10 +175,10 @@ $green-3: #cfd856;
127
175
 
128
176
  hr {
129
177
  height: 0;
130
- border-bottom: 0;
178
+ border: 0;
131
179
  overflow: visible;
132
180
  margin: 16px 0;
133
- border-color: $ec-border-color;
181
+ border-top: 1px solid $ec-border-color;
134
182
  }
135
183
 
136
184
  .text-left {
@@ -158,6 +206,10 @@ $green-3: #cfd856;
158
206
  color: $ec-color-secondary-dark;
159
207
  font-size: 10px;
160
208
  }
209
+
210
+ .font-color-danger {
211
+ color: $ec-color-danger;
212
+ }
161
213
  }
162
214
 
163
215
  @mixin logos {