@energycap/components 0.38.3 → 0.38.4-ECAP-19826-email-table-styles.20231006-1616

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 +54 -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:start}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{font-size:12px}.email-table th,.email-table td{height:32px;line-height:16px;padding:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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.3",
3
+ "version": "0.38.4-ECAP-19826-email-table-styles.20231006-1616",
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: start;
74
+ }
68
75
 
69
76
  a:hover {
70
77
  text-decoration: underline;
@@ -119,6 +126,46 @@ $green-3: #cfd856;
119
126
  text-align: center;
120
127
  border-radius: 6px;
121
128
  }
129
+
130
+ .email-table {
131
+ font-size: 12px;
132
+
133
+ th,
134
+ td {
135
+ height: 32px;
136
+ line-height: 16px;
137
+ padding: 8px;
138
+ overflow: hidden;
139
+ text-overflow: ellipsis;
140
+ white-space: nowrap;
141
+ }
142
+
143
+ th {
144
+ font-weight: normal;
145
+ vertical-align: middle;
146
+ color: $ec-color-secondary-dark;
147
+ border-bottom: 1px solid $ec-border-color-dark;
148
+ }
149
+
150
+ td {
151
+ border-top: 1px solid $ec-border-color;
152
+ vertical-align: top;
153
+ }
154
+
155
+ th:first-child,
156
+ td:first-child {
157
+ padding-left: 0;
158
+ }
159
+
160
+ th:last-child,
161
+ td:last-child {
162
+ padding-right: 0;
163
+ }
164
+
165
+ tr:first-child td {
166
+ border-top: 0;
167
+ }
168
+ }
122
169
 
123
170
  img {
124
171
  max-width: 100%;
@@ -127,10 +174,10 @@ $green-3: #cfd856;
127
174
 
128
175
  hr {
129
176
  height: 0;
130
- border-bottom: 0;
177
+ border: 0;
131
178
  overflow: visible;
132
179
  margin: 16px 0;
133
- border-color: $ec-border-color;
180
+ border-top: 1px solid $ec-border-color;
134
181
  }
135
182
 
136
183
  .text-left {
@@ -158,6 +205,10 @@ $green-3: #cfd856;
158
205
  color: $ec-color-secondary-dark;
159
206
  font-size: 10px;
160
207
  }
208
+
209
+ .font-color-danger {
210
+ color: $ec-color-danger;
211
+ }
161
212
  }
162
213
 
163
214
  @mixin logos {