ably-ui 8.7.0.dev.779bcfa → 8.7.0.dev.873a47c
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/lib/ably_ui/core/code/component.css +0 -2
- data/lib/ably_ui/core/featured_link/component.css +1 -1
- data/lib/ably_ui/core/footer/component.css +2 -2
- data/lib/ably_ui/core/footer/footer.html.erb +11 -11
- data/lib/ably_ui/core/meganav/component.css +7 -7
- data/lib/ably_ui/core/meganav_content_developers/meganav_content_developers.html.erb +3 -10
- data/lib/ably_ui/core/notice/component.css +1 -1
- data/lib/ably_ui/core/notice/notice.html.erb +2 -2
- data/lib/ably_ui/core/styles.css +88 -122
- data/lib/ably_ui/version.rb +1 -1
- metadata +2 -4
- data/lib/ably_ui/core/fonts/jetBrains-mono.css +0 -3
- data/lib/ably_ui/core/fonts/manrope.css +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 141df1249d2bca26adc2e96e013e19ecd834eece13d844d580c2ec7918ab42e1
|
|
4
|
+
data.tar.gz: ca62228c98d0a8d570a7cb651cac5bc7e480406a318e356c6d0aef84b2881314
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8288690df2780d459c6ba33d763d17589b0158dbc32fbdd66f6051f414332c7d4183538dea56332981d1a3ba7f2adcb4bf3894aa6da9432c80a642106a9fb262
|
|
7
|
+
data.tar.gz: 65617a8b1603e825bf7ca98359ed8ccf06cd6e62d6e2d824e9d4f12922d0c028ec760bc6f97af0aebef1acd76d3f82b6abab3927663651b5e0edc0510141aac0
|
data/Gemfile.lock
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@layer base {
|
|
2
2
|
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
|
|
3
|
-
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
|
|
4
|
-
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
|
|
5
3
|
}
|
|
6
4
|
|
|
7
5
|
@layer components {
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.ui-footer-menu-row-link {
|
|
7
|
-
@apply text-menu3 text-cool-black font-
|
|
7
|
+
@apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.ui-footer-link {
|
|
11
|
-
@apply text-gui-default hover:text-gui-hover text-menu3 font-
|
|
11
|
+
@apply text-gui-default hover:text-gui-hover text-menu3 font-light;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.ui-footer-compliance-text {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<footer class="bg-light-grey font-
|
|
1
|
+
<footer class="bg-light-grey font-sans antialiased" data-id="footer">
|
|
2
2
|
<div class="max-w-screen-xl mx-auto py-32 sm:py-40 md:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
|
|
3
3
|
<div class="col-span-full md:col-span-2">
|
|
4
4
|
<div class="flex flex-row p-menu-row-snug">
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
>
|
|
181
181
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
|
182
182
|
</a>
|
|
183
|
-
<div class="pl-16 text-menu3 font-
|
|
183
|
+
<div class="pl-16 text-menu3 font-light">
|
|
184
184
|
<strong class="block font-medium">We're hiring!</strong>
|
|
185
185
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
|
186
186
|
Learn more at Glassdoor
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
>
|
|
201
201
|
<%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
|
|
202
202
|
</a>
|
|
203
|
-
<div class="text-menu3 font-
|
|
203
|
+
<div class="text-menu3 font-light">
|
|
204
204
|
<strong class="block font-medium">We're hiring!</strong>
|
|
205
205
|
<a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">
|
|
206
206
|
Learn more at Glassdoor
|
|
@@ -231,29 +231,29 @@
|
|
|
231
231
|
<div class="flex mr-24">
|
|
232
232
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
233
233
|
<div>
|
|
234
|
-
<p class="ui-footer-compliance-text font-
|
|
235
|
-
<p class="ui-footer-compliance-text font-
|
|
234
|
+
<p class="ui-footer-compliance-text font-medium whitespace-nowrap">SOC 2 Type 2</p>
|
|
235
|
+
<p class="ui-footer-compliance-text font-light mb-24">Certified</p>
|
|
236
236
|
</div>
|
|
237
237
|
</div>
|
|
238
238
|
<div class="flex mr-24 md:col-start-2">
|
|
239
239
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
240
240
|
<div>
|
|
241
|
-
<p class="ui-footer-compliance-text font-
|
|
242
|
-
<p class="ui-footer-compliance-text font-
|
|
241
|
+
<p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
|
|
242
|
+
<p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
|
|
243
243
|
</div>
|
|
244
244
|
</div>
|
|
245
245
|
<div class="flex mr-24 md:col-start-3">
|
|
246
246
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
247
247
|
<div>
|
|
248
|
-
<p class="ui-footer-compliance-text font-
|
|
249
|
-
<p class="ui-footer-compliance-text font-
|
|
248
|
+
<p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
|
|
249
|
+
<p class="ui-footer-compliance-text font-light mb-24">Certified</p>
|
|
250
250
|
</div>
|
|
251
251
|
</div>
|
|
252
252
|
<div class="flex mr-24 md:col-start-4">
|
|
253
253
|
<%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
|
|
254
254
|
<div>
|
|
255
|
-
<p class="ui-footer-compliance-text font-
|
|
256
|
-
<p class="ui-footer-compliance-text font-
|
|
255
|
+
<p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
|
|
256
|
+
<p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
|
|
257
257
|
</div>
|
|
258
258
|
</div>
|
|
259
259
|
</div>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
z-index: var(--stacking-context-page-meganav);
|
|
8
8
|
|
|
9
9
|
@apply fixed top-0 w-full;
|
|
10
|
-
@apply antialiased font-
|
|
10
|
+
@apply antialiased font-sans transition-colors;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.ui-meganav {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.ui-meganav-link {
|
|
54
|
-
@apply text-menu2 font-
|
|
54
|
+
@apply text-menu2 font-medium block;
|
|
55
55
|
@apply mr-12 lg:mr-24 px-0 py-20;
|
|
56
56
|
@apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
|
|
57
57
|
@apply transition-colors;
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
|
|
64
64
|
.ui-meganav-mobile-link {
|
|
65
65
|
@apply p-menu-row relative -left-8 w-extend-8;
|
|
66
|
-
@apply text-menu2
|
|
66
|
+
@apply text-menu2 font-medium block text-cool-black text-left;
|
|
67
67
|
@apply flex items-center;
|
|
68
68
|
@apply focus:text-gui-focus focus:outline-none;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.ui-meganav-account-link {
|
|
72
|
-
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-
|
|
72
|
+
@apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.ui-meganav-content {
|
|
@@ -97,15 +97,15 @@
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.ui-meganav-media-heading {
|
|
100
|
-
@apply text-menu3 text-cool-black font-
|
|
100
|
+
@apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.ui-meganav-media-copy {
|
|
104
|
-
@apply text-p3
|
|
104
|
+
@apply text-p3 text-dark-grey font-light;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
.ui-meganav-overline {
|
|
108
|
-
@apply text-overline2 text-cool-black uppercase font-
|
|
108
|
+
@apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
.ui-meganav-hr {
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
</li>
|
|
36
36
|
</ul>
|
|
37
37
|
</div>
|
|
38
|
+
|
|
38
39
|
<div class="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
|
|
39
40
|
<ul class="md:mt-40" aria-labelledby="meganav-developers-panel-explore">
|
|
40
41
|
<li>
|
|
@@ -64,19 +65,11 @@
|
|
|
64
65
|
</div>
|
|
65
66
|
<% end %>
|
|
66
67
|
</li>
|
|
67
|
-
<li>
|
|
68
|
-
<%= link_to abs_url("/reference-guide-multiplayer"), class: "ui-meganav-media-with-image group" do %>
|
|
69
|
-
<%= render(AblyUi::Core::Icon.new(name: "icon-multi-user-spaces-col", size: "2.5rem")) %>
|
|
70
|
-
<div class="flex flex-col justify-center">
|
|
71
|
-
<p class="ui-meganav-media-heading">Multiplayer reference guide</p>
|
|
72
|
-
<p class="ui-meganav-media-copy">Learn how to build collaborative features with Ably.</p>
|
|
73
|
-
</div>
|
|
74
|
-
<% end %>
|
|
75
|
-
</li>
|
|
76
68
|
</ul>
|
|
77
69
|
</div>
|
|
70
|
+
|
|
78
71
|
<div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
|
|
79
|
-
<h3 class="ui-meganav-overline uppercase" id=meganav-developers-panel-quick-links">
|
|
72
|
+
<h3 class="ui-meganav-overline uppercase" id="meganav-developers-panel-quick-links">
|
|
80
73
|
Quick links
|
|
81
74
|
</h3>
|
|
82
75
|
<ul aria-labelledby="meganav-developers-panel-quick-links">
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%# Note the style attribute is used for entry animation %>
|
|
2
2
|
<%= tag.div class: "ui-announcement #{bg_color} #{text_color}", data: { id: "ui-notice" }, style: "max-height: 0; overflow: hidden" do %>
|
|
3
3
|
<div class="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
|
|
4
|
-
<%= content_wrapper class: "font-
|
|
5
|
-
<strong class="font-
|
|
4
|
+
<%= content_wrapper class: "font-light w-full pr-8 text-p3 self-center" do %>
|
|
5
|
+
<strong class="font-medium whitespace-nowrap pr-4"><%= @contents[:title] %></strong>
|
|
6
6
|
<span class="pr-4"><%= @contents[:body_text] %></span>
|
|
7
7
|
<span class="underline cursor-pointer whitespace-nowrap"><%= @contents[:button_label] %></span>
|
|
8
8
|
<% end %>
|
data/lib/ably_ui/core/styles.css
CHANGED
|
@@ -4,24 +4,20 @@
|
|
|
4
4
|
--color-active-orange: #ff5416;
|
|
5
5
|
--color-red-orange: #e40000;
|
|
6
6
|
--color-white: #ffffff;
|
|
7
|
-
--color-electric-cyan: #
|
|
7
|
+
--color-electric-cyan: #4af7ff;
|
|
8
8
|
--color-zingy-green: #08ff13;
|
|
9
|
-
--color-bright-red: #
|
|
10
|
-
--color-orange-700: #ff2739;
|
|
9
|
+
--color-bright-red: #ff2739;
|
|
11
10
|
--color-jazzy-pink: #ff17d2;
|
|
12
|
-
--color-extra-light-grey: #
|
|
13
|
-
--color-light-grey: #
|
|
14
|
-
--color-mid-grey: #
|
|
15
|
-
--color-dark-grey: #
|
|
16
|
-
--color-charcoal-grey: #
|
|
17
|
-
--color-gui-default: #
|
|
18
|
-
--color-gui-hover: #
|
|
19
|
-
--color-gui-
|
|
20
|
-
--color-gui-default-dark: #4da6ff;
|
|
21
|
-
--color-gui-hover-dark: #2894ff;
|
|
22
|
-
--color-gui-active-dark: #0080ff;
|
|
23
|
-
--color-gui-focus: #80b9f2;
|
|
11
|
+
--color-extra-light-grey: #fafafb;
|
|
12
|
+
--color-light-grey: #f5f5f6;
|
|
13
|
+
--color-mid-grey: #d9d9da;
|
|
14
|
+
--color-dark-grey: #76767c;
|
|
15
|
+
--color-charcoal-grey: #292831;
|
|
16
|
+
--color-gui-default: #0073e6;
|
|
17
|
+
--color-gui-hover: #0867c4;
|
|
18
|
+
--color-gui-focus: #0073e6;
|
|
24
19
|
--color-gui-focus-outline: #80b9f2;
|
|
20
|
+
--color-gui-active: #074095;
|
|
25
21
|
--color-gui-visited: #4887c2;
|
|
26
22
|
--color-gui-unavailable: #a8a8a8;
|
|
27
23
|
--color-gui-error: #fb0c0c;
|
|
@@ -40,10 +36,6 @@
|
|
|
40
36
|
--syntax-red: #d54e53;
|
|
41
37
|
--syntax-lilac: #bb87d3;
|
|
42
38
|
|
|
43
|
-
/* New Neutral colors */
|
|
44
|
-
--color-neutral-900: #39414e;
|
|
45
|
-
--color-neutral-500: #c6ced9;
|
|
46
|
-
|
|
47
39
|
/* uptime status colors */
|
|
48
40
|
--uptime-color-up: #39b54a;
|
|
49
41
|
--uptime-color-trouble: #e87623;
|
|
@@ -78,43 +70,38 @@
|
|
|
78
70
|
|
|
79
71
|
--gradient-hot-pink: linear-gradient(
|
|
80
72
|
80.2deg,
|
|
81
|
-
var(--color-
|
|
73
|
+
var(--color-bright-red) 0%,
|
|
82
74
|
var(--color-jazzy-pink) 100%
|
|
83
75
|
);
|
|
84
76
|
|
|
85
|
-
--fs-title-xl:
|
|
86
|
-
--fs-title:
|
|
87
|
-
--fs-title-xs:
|
|
88
|
-
--fs-h1-xl:
|
|
89
|
-
--fs-h1:
|
|
90
|
-
--fs-h1-xs:
|
|
91
|
-
|
|
92
|
-
--fs-h2-xl: 2.125rem;
|
|
77
|
+
--fs-title-xl: 4rem;
|
|
78
|
+
--fs-title: 3.5rem;
|
|
79
|
+
--fs-title-xs: 3rem;
|
|
80
|
+
--fs-h1-xl: 3.5rem;
|
|
81
|
+
--fs-h1: 3rem;
|
|
82
|
+
--fs-h1-xs: 2.625rem;
|
|
83
|
+
--fs-h2-xl: 2.5rem;
|
|
93
84
|
--fs-h2: 2rem;
|
|
94
|
-
--fs-h2-xs: 1.
|
|
95
|
-
|
|
85
|
+
--fs-h2-xs: 1.875rem;
|
|
96
86
|
--fs-h3: 1.5rem;
|
|
97
|
-
--fs-h4: 1.
|
|
98
|
-
--fs-
|
|
99
|
-
|
|
100
|
-
--fs-p1: 1rem;
|
|
101
|
-
--fs-p2: 0.938rem;
|
|
87
|
+
--fs-h4: 1.125rem;
|
|
88
|
+
--fs-p1: 1.125rem;
|
|
89
|
+
--fs-p2: 1rem;
|
|
102
90
|
--fs-p3: 0.875rem;
|
|
103
91
|
--fs-standfirst-xl: 2.25rem;
|
|
104
92
|
--fs-standfirst: 1.5rem;
|
|
105
|
-
--fs-sub-header: 1.
|
|
106
|
-
--fs-sub-header-xs: 1.
|
|
93
|
+
--fs-sub-header: 1.5rem;
|
|
94
|
+
--fs-sub-header-xs: 1.125rem;
|
|
107
95
|
--fs-overline1: 1rem;
|
|
108
96
|
--fs-overline2: 0.875rem;
|
|
109
|
-
--fs-btn1:
|
|
110
|
-
--fs-btn2:
|
|
97
|
+
--fs-btn1: 1.125rem;
|
|
98
|
+
--fs-btn2: 1rem;
|
|
111
99
|
--fs-btn3: 0.875rem;
|
|
112
|
-
--fs-menu1:
|
|
113
|
-
--fs-menu2:
|
|
100
|
+
--fs-menu1: 1.125rem;
|
|
101
|
+
--fs-menu2: 1rem;
|
|
114
102
|
--fs-menu3: 0.875rem;
|
|
115
|
-
--fs-quote: 1.
|
|
116
|
-
--fs-code: 0.
|
|
117
|
-
--fs-code2: 0.813rem;
|
|
103
|
+
--fs-quote: 1.5rem;
|
|
104
|
+
--fs-code: 0.875rem;
|
|
118
105
|
|
|
119
106
|
--lh-dense: 1;
|
|
120
107
|
--lh-tight: 1.125;
|
|
@@ -128,9 +115,7 @@
|
|
|
128
115
|
--ls-tighten-0_01: -0.01em;
|
|
129
116
|
--ls-tighten-0_005: -0.005em;
|
|
130
117
|
--ls-tighten-0_0025: -0.0025em;
|
|
131
|
-
--ls-tighten-0_0015: -0.0015em;
|
|
132
118
|
--ls-widen-0_1: 0.1em;
|
|
133
|
-
--ls-widen-0_16: 0.16em;
|
|
134
119
|
--ls-widen-0_15: 0.15em;
|
|
135
120
|
|
|
136
121
|
--spacing-0: 0px;
|
|
@@ -145,7 +130,6 @@
|
|
|
145
130
|
--spacing-20: 1.25rem;
|
|
146
131
|
--spacing-24: 1.5rem;
|
|
147
132
|
--spacing-32: 2rem;
|
|
148
|
-
--spacing-36: 2.25rem;
|
|
149
133
|
--spacing-40: 2.5rem;
|
|
150
134
|
--spacing-48: 3rem;
|
|
151
135
|
--spacing-64: 4rem;
|
|
@@ -193,7 +177,7 @@
|
|
|
193
177
|
}
|
|
194
178
|
@layer components {
|
|
195
179
|
.ui-btn {
|
|
196
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
180
|
+
@apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
197
181
|
@apply hover:text-white hover:bg-active-orange;
|
|
198
182
|
@apply active:text-white active:bg-red-orange;
|
|
199
183
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -217,7 +201,7 @@
|
|
|
217
201
|
background-size: 200% 100%;
|
|
218
202
|
background-position: 0% 0%;
|
|
219
203
|
|
|
220
|
-
@apply text-white text-btn2 font-
|
|
204
|
+
@apply text-white text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
221
205
|
@apply focus:outline-gui-focus;
|
|
222
206
|
@apply inline-flex items-center justify-center;
|
|
223
207
|
}
|
|
@@ -233,7 +217,7 @@
|
|
|
233
217
|
}
|
|
234
218
|
|
|
235
219
|
.ui-btn-invert {
|
|
236
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
220
|
+
@apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
|
|
237
221
|
@apply hover:text-white hover:bg-active-orange;
|
|
238
222
|
@apply active:text-white active:bg-red-orange;
|
|
239
223
|
@apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
|
|
@@ -243,7 +227,7 @@
|
|
|
243
227
|
}
|
|
244
228
|
|
|
245
229
|
.ui-btn-secondary {
|
|
246
|
-
@apply text-cool-black bg-white text-btn2 font-
|
|
230
|
+
@apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
|
|
247
231
|
@apply hover:text-cool-black hover:border-active-orange hover:bg-white;
|
|
248
232
|
@apply active:border-red-orange active:bg-white;
|
|
249
233
|
@apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
|
|
@@ -253,7 +237,7 @@
|
|
|
253
237
|
}
|
|
254
238
|
|
|
255
239
|
.ui-btn-secondary-invert {
|
|
256
|
-
@apply text-white bg-cool-black text-btn2 font-
|
|
240
|
+
@apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
|
|
257
241
|
@apply hover:text-white hover:border-active-orange;
|
|
258
242
|
@apply active:border-red-orange;
|
|
259
243
|
@apply focus:outline-gui-focus;
|
|
@@ -338,54 +322,48 @@
|
|
|
338
322
|
}
|
|
339
323
|
@layer components {
|
|
340
324
|
.ui-text-title {
|
|
341
|
-
@apply font-
|
|
342
|
-
@apply text-title-xs xs:text-title xl:text-title-xl
|
|
343
|
-
@apply tracking-tighten-0.
|
|
325
|
+
@apply font-sans font-medium text-cool-black;
|
|
326
|
+
@apply text-title-xs xs:text-title xl:text-title-xl;
|
|
327
|
+
@apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
|
|
344
328
|
}
|
|
345
329
|
|
|
346
330
|
.ui-text-h1 {
|
|
347
|
-
@apply font-
|
|
348
|
-
@apply text-h1-xs xs:text-h1 xl:text-h1-xl
|
|
349
|
-
@apply tracking-tighten-0.
|
|
331
|
+
@apply font-sans font-medium text-cool-black;
|
|
332
|
+
@apply text-h1-xs xs:text-h1 xl:text-h1-xl;
|
|
333
|
+
@apply tracking-tighten-0.01;
|
|
350
334
|
}
|
|
351
335
|
|
|
352
336
|
.ui-text-h2 {
|
|
353
|
-
@apply font-
|
|
354
|
-
@apply text-h2-xs xs:text-h2 xl:text-h2-xl
|
|
355
|
-
@apply tracking-tighten-0.
|
|
337
|
+
@apply font-sans font-medium text-cool-black;
|
|
338
|
+
@apply text-h2-xs xs:text-h2 xl:text-h2-xl;
|
|
339
|
+
@apply tracking-tighten-0.005;
|
|
356
340
|
}
|
|
357
341
|
|
|
358
342
|
.ui-text-h3 {
|
|
359
|
-
@apply font-
|
|
360
|
-
@apply text-h3
|
|
361
|
-
@apply tracking-tighten-0.
|
|
343
|
+
@apply font-sans font-medium text-cool-black;
|
|
344
|
+
@apply text-h3;
|
|
345
|
+
@apply tracking-tighten-0.0025;
|
|
362
346
|
}
|
|
363
347
|
|
|
364
348
|
.ui-text-h4 {
|
|
365
|
-
@apply font-
|
|
366
|
-
@apply text-h4
|
|
367
|
-
@apply tracking-
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
.ui-text-h5 {
|
|
371
|
-
@apply font-manrope font-extrabold text-cool-black;
|
|
372
|
-
@apply text-h5 leading-tight;
|
|
373
|
-
@apply tracking-tighten-0.0025;
|
|
349
|
+
@apply font-sans font-medium text-cool-black;
|
|
350
|
+
@apply text-h4 uppercase;
|
|
351
|
+
@apply tracking-widen-0.1;
|
|
374
352
|
}
|
|
375
353
|
|
|
376
354
|
.ui-text-p1 {
|
|
377
|
-
@apply font-
|
|
378
|
-
@apply text-p1
|
|
355
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
356
|
+
@apply text-p1;
|
|
379
357
|
}
|
|
380
358
|
|
|
381
359
|
.ui-text-p2 {
|
|
382
|
-
@apply font-
|
|
383
|
-
@apply text-p2
|
|
360
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
361
|
+
@apply text-p2;
|
|
384
362
|
}
|
|
385
363
|
|
|
386
364
|
.ui-text-p3 {
|
|
387
|
-
@apply font-
|
|
388
|
-
@apply text-p3
|
|
365
|
+
@apply font-sans font-light text-charcoal-grey;
|
|
366
|
+
@apply text-p3;
|
|
389
367
|
}
|
|
390
368
|
|
|
391
369
|
.ui-text-standfirst {
|
|
@@ -395,63 +373,60 @@
|
|
|
395
373
|
}
|
|
396
374
|
|
|
397
375
|
.ui-text-quote {
|
|
398
|
-
@apply font-
|
|
399
|
-
@apply text-quote
|
|
400
|
-
@apply tracking-tighten-0.
|
|
376
|
+
@apply font-sans font-light text-cool-black;
|
|
377
|
+
@apply text-quote;
|
|
378
|
+
@apply tracking-tighten-0.025;
|
|
401
379
|
}
|
|
402
380
|
|
|
403
381
|
.ui-text-sub-header {
|
|
404
|
-
@apply font-
|
|
405
|
-
@apply text-sub-header-xs xs:text-sub-header
|
|
382
|
+
@apply font-sans font-light text-dark-grey;
|
|
383
|
+
@apply text-sub-header-xs xs:text-sub-header;
|
|
384
|
+
@apply tracking-tighten-0.025;
|
|
406
385
|
}
|
|
407
386
|
|
|
408
387
|
.ui-text-overline1 {
|
|
409
|
-
@apply font-
|
|
410
|
-
@apply text-overline1
|
|
411
|
-
@apply tracking-widen-0.
|
|
388
|
+
@apply font-sans font-medium text-dark-grey uppercase;
|
|
389
|
+
@apply text-overline1;
|
|
390
|
+
@apply tracking-widen-0.15;
|
|
412
391
|
}
|
|
413
392
|
|
|
414
393
|
.ui-text-overline2 {
|
|
415
|
-
@apply font-
|
|
416
|
-
@apply text-overline2
|
|
417
|
-
@apply tracking-widen-0.
|
|
394
|
+
@apply font-sans font-medium text-dark-grey uppercase;
|
|
395
|
+
@apply text-overline2;
|
|
396
|
+
@apply tracking-widen-0.1;
|
|
418
397
|
}
|
|
419
398
|
|
|
420
399
|
.ui-text-menu1 {
|
|
421
|
-
@apply font-
|
|
422
|
-
@apply text-menu1
|
|
400
|
+
@apply font-sans font-light text-cool-black;
|
|
401
|
+
@apply text-menu1;
|
|
423
402
|
}
|
|
424
403
|
|
|
425
404
|
.ui-text-menu2 {
|
|
426
|
-
@apply font-
|
|
427
|
-
@apply text-menu2
|
|
405
|
+
@apply font-sans font-light text-cool-black;
|
|
406
|
+
@apply text-menu2;
|
|
428
407
|
}
|
|
429
408
|
|
|
430
409
|
.ui-text-menu3 {
|
|
431
|
-
@apply font-
|
|
432
|
-
@apply text-menu3
|
|
410
|
+
@apply font-sans font-light text-cool-black;
|
|
411
|
+
@apply text-menu3;
|
|
433
412
|
}
|
|
434
413
|
|
|
435
414
|
.ui-text-code {
|
|
436
|
-
@apply font-
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.ui-text-code2 {
|
|
440
|
-
@apply font-jetbrains_mono font-medium text-code2;
|
|
415
|
+
@apply font-mono font-semibold text-code;
|
|
441
416
|
}
|
|
442
417
|
|
|
443
418
|
.ui-text-code-inline {
|
|
444
|
-
@apply font-
|
|
419
|
+
@apply font-mono font-semibold text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
|
|
445
420
|
}
|
|
446
421
|
|
|
447
422
|
.ui-unordered-list {
|
|
448
|
-
@apply text-p1 font-
|
|
449
|
-
@apply list-disc ml-32
|
|
423
|
+
@apply text-p1 font-light text-cool-black;
|
|
424
|
+
@apply list-disc ml-32 mb-24;
|
|
450
425
|
}
|
|
451
426
|
|
|
452
427
|
.ui-ordered-list {
|
|
453
|
-
@apply text-p1 font-
|
|
454
|
-
@apply ml-32
|
|
428
|
+
@apply text-p1 font-light text-cool-black;
|
|
429
|
+
@apply ml-32 mb-24 list-decimal;
|
|
455
430
|
}
|
|
456
431
|
|
|
457
432
|
.ui-unordered-list li > *:last-of-type:not(ul):not(ol),
|
|
@@ -468,20 +443,11 @@
|
|
|
468
443
|
}
|
|
469
444
|
|
|
470
445
|
.ui-unordered-list ul ul {
|
|
471
|
-
@apply list-square
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
.ui-unordered-list ul ul {
|
|
475
|
-
@apply my-8;
|
|
476
|
-
}
|
|
477
|
-
|
|
478
|
-
.ui-ordered-list li,
|
|
479
|
-
.ui-unordered-list li {
|
|
480
|
-
@apply font-medium font-manrope tracking-widen-0 leading-relaxed;
|
|
446
|
+
@apply list-square;
|
|
481
447
|
}
|
|
482
448
|
|
|
483
449
|
.ui-unordered-list-with-emphasis {
|
|
484
|
-
@apply text-p1 font-
|
|
450
|
+
@apply text-p1 font-light text-cool-black;
|
|
485
451
|
@apply list-disc ml-32 mt-32 -mb-12;
|
|
486
452
|
}
|
|
487
453
|
|
|
@@ -517,11 +483,11 @@
|
|
|
517
483
|
}
|
|
518
484
|
@layer components {
|
|
519
485
|
.ui-checkbox-p1 {
|
|
520
|
-
@apply flex items-start mb-16 font-
|
|
486
|
+
@apply flex items-start mb-16 font-sans;
|
|
521
487
|
}
|
|
522
488
|
|
|
523
489
|
.ui-checkbox-p2 {
|
|
524
|
-
@apply flex items-start mb-12 font-
|
|
490
|
+
@apply flex items-start mb-12 font-sans;
|
|
525
491
|
}
|
|
526
492
|
|
|
527
493
|
.ui-checkbox-input {
|
|
@@ -540,12 +506,12 @@
|
|
|
540
506
|
|
|
541
507
|
.ui-checkbox-label-p1 {
|
|
542
508
|
@apply select-none;
|
|
543
|
-
@apply text-p1 font-
|
|
509
|
+
@apply text-p1 font-light text-cool-black;
|
|
544
510
|
}
|
|
545
511
|
|
|
546
512
|
.ui-checkbox-label-p2 {
|
|
547
513
|
@apply select-none;
|
|
548
|
-
@apply text-p2 font-
|
|
514
|
+
@apply text-p2 font-light text-cool-black;
|
|
549
515
|
}
|
|
550
516
|
|
|
551
517
|
.ui-checkbox-input:disabled + .ui-checkbox-styled {
|
|
@@ -566,7 +532,7 @@
|
|
|
566
532
|
}
|
|
567
533
|
|
|
568
534
|
.ui-textarea {
|
|
569
|
-
@apply font-
|
|
535
|
+
@apply font-sans font-light text-cool-black text-p1;
|
|
570
536
|
@apply p-input mb-16;
|
|
571
537
|
@apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
|
|
572
538
|
@apply hover:bg-white hover:shadow-input hover:border-transparent;
|
data/lib/ably_ui/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: ably-ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 8.7.0.dev.
|
|
4
|
+
version: 8.7.0.dev.873a47c
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Dominik Piatek
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2023-
|
|
13
|
+
date: 2023-04-27 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: view_component
|
|
@@ -91,8 +91,6 @@ files:
|
|
|
91
91
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.otf
|
|
92
92
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff
|
|
93
93
|
- lib/ably_ui/core/fonts/NEXT-Book-Medium.woff2
|
|
94
|
-
- lib/ably_ui/core/fonts/jetBrains-mono.css
|
|
95
|
-
- lib/ably_ui/core/fonts/manrope.css
|
|
96
94
|
- lib/ably_ui/core/fonts/next.css
|
|
97
95
|
- lib/ably_ui/core/fonts/source-code-pro.css
|
|
98
96
|
- lib/ably_ui/core/footer/component.css
|