station 0.0.114 → 0.0.121

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/Dockerfile +1 -1
  3. data/lib/nexmo_developer/Gemfile +11 -11
  4. data/lib/nexmo_developer/Gemfile.lock +195 -128
  5. data/lib/nexmo_developer/app/assets/stylesheets/application.css +8 -1
  6. data/lib/nexmo_developer/app/controllers/static_controller.rb +1 -0
  7. data/lib/nexmo_developer/app/models/tutorial/file_loader.rb +11 -7
  8. data/lib/nexmo_developer/app/models/tutorial/task.rb +27 -1
  9. data/lib/nexmo_developer/app/presenters/code_snippets_home_presenter.rb +26 -0
  10. data/lib/nexmo_developer/app/presenters/footer.rb +2 -3
  11. data/lib/nexmo_developer/app/presenters/header.rb +0 -31
  12. data/lib/nexmo_developer/app/services/orbit_feedback_notifier.rb +0 -3
  13. data/lib/nexmo_developer/app/views/contribute/code-snippets/how-to-update-code-snippets.md +1 -1
  14. data/lib/nexmo_developer/app/views/contribute/code-snippets/sample-code-snippet.md +1 -1
  15. data/lib/nexmo_developer/app/views/contribute/guides/markdown-guide.md +3 -3
  16. data/lib/nexmo_developer/app/views/layouts/application.html.erb +0 -1
  17. data/lib/nexmo_developer/app/views/layouts/documentation-index.html.erb +0 -1
  18. data/lib/nexmo_developer/app/views/layouts/documentation.html.erb +6 -0
  19. data/lib/nexmo_developer/app/views/layouts/landing.html.erb +4 -2
  20. data/lib/nexmo_developer/app/views/layouts/page.html.erb +0 -1
  21. data/lib/nexmo_developer/app/views/layouts/partials/_code_snippets_home.html.erb +38 -0
  22. data/lib/nexmo_developer/app/views/layouts/partials/_footer.html.erb +33 -32
  23. data/lib/nexmo_developer/app/views/layouts/partials/_header.html.erb +90 -31
  24. data/lib/nexmo_developer/app/views/layouts/partials/_locale_switcher.html.erb +3 -4
  25. data/lib/nexmo_developer/app/views/layouts/partials/_sidenav_subitem.html.erb +3 -0
  26. data/lib/nexmo_developer/app/webpacker/javascript/components/concatenation/character_counter.js +5 -3
  27. data/lib/nexmo_developer/app/webpacker/javascript/components/jwt_generator/JwtGenerator.vue +1 -1
  28. data/lib/nexmo_developer/app/webpacker/javascript/components/search/Search.vue +80 -19
  29. data/lib/nexmo_developer/app/webpacker/javascript/sidenav/index.js +14 -10
  30. data/lib/nexmo_developer/app/webpacker/javascript/topnav/index.js +33 -0
  31. data/lib/nexmo_developer/app/webpacker/javascript/volta_tabbed_examples/index.js +3 -1
  32. data/lib/nexmo_developer/app/webpacker/packs/application.js +16 -5
  33. data/lib/nexmo_developer/app/webpacker/stylesheets/application.scss +4 -0
  34. data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_core.scss +8 -4
  35. data/lib/nexmo_developer/app/webpacker/stylesheets/custom/_landing.scss +470 -0
  36. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_footer.scss +45 -23
  37. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_header.scss +163 -138
  38. data/lib/nexmo_developer/app/webpacker/stylesheets/layout/_search.scss +2 -5
  39. data/lib/nexmo_developer/app/webpacker/stylesheets/objects/_navigation.scss +19 -2
  40. data/lib/nexmo_developer/lib/tasks/ci.rake +23 -1
  41. data/lib/nexmo_developer/public/vonage_developer_logo.svg +26 -0
  42. data/lib/nexmo_developer/version.rb +1 -1
  43. data/package.json +39 -36
  44. data/station.gemspec +13 -13
  45. data/yarn.lock +1411 -1160
  46. metadata +76 -73
  47. data/lib/nexmo_developer/app/presenters/topnav.rb +0 -23
  48. data/lib/nexmo_developer/app/presenters/topnav_item.rb +0 -19
@@ -1,10 +1,9 @@
1
1
  <% presenter = LocaleSwitcherPresenter.new(request) %>
2
2
  <% if presenter.multiple_locales? %>
3
3
  <div class="Vlt-dropdown" id="locale-switcher">
4
- <div class="Vlt-dropdown__trigger Vlt-dropdown__trigger--btn">
5
- <%= button_tag type: :button, class: "Vlt-btn Vlt-btn--app Vlt-btn--white", disabled: presenter.disabled? do %>
4
+ <div class="Vlt-dropdown__trigger Vlt-dropdown__trigger--block Vlt-dropdown__trigger--btn">
5
+ <%= button_tag type: :button, class: "Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-grey", disabled: presenter.disabled? do %>
6
6
  <span class="Vlt-dropdown__selection">
7
- <svg class="Vlt-dropdown__link__icon Vlt-grey-darker"><use xlink:href="<%= asset_pack_path('media/symbol/volta-icons.svg') %>#Vlt-icon-world"/></svg>
8
7
  <span class="Nxd-locale">
9
8
  <%= presenter.current_locale %>
10
9
  </span>
@@ -15,7 +14,7 @@
15
14
  <div class="Vlt-dropdown__panel">
16
15
  <div class="Vlt-dropdown__panel__content">
17
16
  <% presenter.locales.each do |locale| %>
18
- <div class="Vlt-dropdown__link" data-locale="<%= locale.data %>" role="link">
17
+ <div class="Vlt-dropdown__link <%= locale.value == presenter.current_locale ? 'Vlt-dropdown__link--selected' : '' %>" data-locale="<%= locale.data %>" role="link">
19
18
  <span class="Vlt-dropdown__label">
20
19
  <%= locale.value %>
21
20
  </span>
@@ -14,6 +14,9 @@
14
14
  <% end %>
15
15
  <% elsif sidenav_subitem.collapsible? %>
16
16
  <li class="js--collapsible navigation-item--<%= sidenav_subitem.title.parameterize %> navigation-item">
17
+ <% if sidenav_subitem.label? %>
18
+ <%= link_to(sidenav_subitem.label, sidenav_subitem.link_url, class: "#{sidenav_subitem.css_classes}", role: 'link') %>
19
+ <% end %>
17
20
  <a class="Vlt-sidemenu__trigger" href="/concepts" role="link">
18
21
  <span class="Vlt-sidemenu__label"><%= sidenav_subitem.title %></span>
19
22
  </a>
@@ -66,16 +66,18 @@ class CharacterCounter {
66
66
  let index = 0;
67
67
  let messages = [];
68
68
  let text = this.text;
69
+ let split = this.getTextSize(text) > maxSize;
69
70
  while(index <= this.text.length) {
70
- let sms = this.getSMS(text, maxSize);
71
+ let sms = this.getSMS(text, maxSize, split);
71
72
  messages.push(sms);
72
73
  text = text.slice(sms.length);
73
74
  index += sms.length + 1;
75
+ split = this.getTextSize(text) + GSM_METADATA_SIZE > maxSize;
74
76
  }
75
77
  return messages;
76
78
  }
77
79
 
78
- getSMS(text, maxSize) {
80
+ getSMS(text, maxSize, lastSplit) {
79
81
  let index = 0, currentSize = 0;
80
82
  const maxSizeWithMeta = maxSize - GSM_METADATA_SIZE;
81
83
 
@@ -83,7 +85,7 @@ class CharacterCounter {
83
85
  currentSize += this.getCharSize(text[index]);
84
86
  index += 1;
85
87
  }
86
- if (this.getTextSize(text.slice(index)) + currentSize <= maxSize && text.length - index <= GSM_METADATA_LENGTH) {
88
+ if (!lastSplit) {
87
89
  index = text.length;
88
90
  }
89
91
  return text.slice(0, index);
@@ -146,7 +146,7 @@ export default {
146
146
  } else if (this.applicationId) {
147
147
  message = 'Next, provide a Private Key';
148
148
  } else {
149
- message = '<h4>Use your <code>private key</code> and <code>application_id</code> to create a JWT for your Nexmo Application</h4>The JWT is generated on the client-side so your private key <strong>never leaves your browser</strong>.';
149
+ message = '<h4>Use your <code>private key</code> and <code>application_id</code> to create a JWT for your Vonage Application</h4>The JWT is generated on the client-side so your private key <strong>never leaves your browser</strong>.';
150
150
  }
151
151
  return message;
152
152
  },
@@ -1,27 +1,35 @@
1
1
  <template>
2
- <div>
3
- <div>
4
- <div class="Vlt-composite">
5
- <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
6
- <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
7
- </div>
8
- <div class="Vlt-input Vlt-input--round">
9
- <input
10
- v-model="query"
11
- name="query"
12
- placeholder="Search"
13
- id="searchbox-test"
14
- type="text"
15
- autoComplete="off"
16
- v-on:keydown.esc="onEscDownHandler"
17
- v-on:input="onInputHandler"
18
- ></input>
2
+ <div class="Wrapper">
3
+ <div class="Wrapper-content">
4
+ <svg class="Vlt-icon Vlt-grey Nxd-search-icon">
5
+ <use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search-full" />
6
+ </svg>
7
+
8
+
9
+ <div class="Nxd-search-input">
10
+ <div class="Vlt-composite Vlt-composite--appendedicon">
11
+ <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
12
+ <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
13
+ </div>
14
+ <div class="Vlt-input">
15
+ <input
16
+ v-model="query"
17
+ name="query"
18
+ placeholder="Search"
19
+ id="searchbox-test"
20
+ type="text"
21
+ autoComplete="off"
22
+ v-on:keydown.esc="onEscDownHandler"
23
+ v-on:input="onInputHandler"
24
+ ></input>
25
+ </div>
26
+ <div class="Vlt-composite__append Vlt-composite__append--icon Nxd-search-close">
27
+ <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross-bold"/></svg>
28
+ </div>
19
29
  </div>
20
30
  </div>
21
31
  </div>
22
32
 
23
- <svg v-show="query" class="Nxd-search__clear"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross"/></svg>
24
-
25
33
  <div v-show="showResults" class="Nxd-search">
26
34
  <div class="Nxd-search__wrapper">
27
35
  <div v-show="loading" class="spinner">
@@ -76,11 +84,17 @@ export default {
76
84
  mounted: function() {
77
85
  if (document.querySelector('.Nxd-template')) {
78
86
  document.querySelector('.Nxd-template').addEventListener('click', this.onClickOutside.bind(this));
87
+ } else if (document.querySelector('.Adp-landing')) {
88
+ document.querySelector('.Adp-landing .wrapper').addEventListener('click', this.onClickOutside.bind(this));
79
89
  }
90
+ this.$el.querySelector('.Nxd-search-icon').addEventListener('click', this.handleSearchToggle.bind(this));
91
+ this.$el.querySelector('.Nxd-search-close').addEventListener('click', this.handleSearchToggle.bind(this));
80
92
  },
81
93
  onDestroy: function() {
82
94
  if (document.querySelector('.Nxd-template')) {
83
95
  document.querySelector('.Nxd-template').removeEventListener('click', this.onClickOutside.bind(this));
96
+ } else if (document.querySelector('.Adp-landing')) {
97
+ document.querySelector('.Adp-landing .wrapper').removeEventListener('click', this.onClickOutside.bind(this));
84
98
  }
85
99
  },
86
100
  computed: {
@@ -112,6 +126,23 @@ export default {
112
126
  if (this.expanded) {
113
127
  this.expanded = false;
114
128
  }
129
+ this.toggleSearch(true);
130
+ },
131
+
132
+ handleSearchToggle: function(event) {
133
+ event.preventDefault();
134
+ event.stopPropagation();
135
+
136
+ this.toggleSearch();
137
+ },
138
+
139
+ toggleSearch: function(hide) {
140
+ let search = this.$el.querySelector('.Nxd-search-input');
141
+ if (hide === true || search.style.display == 'flex') {
142
+ search.style.display = 'none';
143
+ } else {
144
+ search.style.display = 'flex';
145
+ }
115
146
  },
116
147
  onEscDownHandler: function(event) {
117
148
  if (!this.analyticsTriggered && this.query !== '') {
@@ -179,4 +210,34 @@ export default {
179
210
  }
180
211
  </script>
181
212
  <style scoped>
213
+ .Wrapper {
214
+ top: 55px;
215
+ right: 13px;
216
+ display: flex;
217
+ position: absolute;
218
+ }
219
+ .Wrapper-content {
220
+ display: flex;
221
+ flex-direction: column;
222
+ align-items: flex-end;
223
+ }
224
+ .Nxd-search-input {
225
+ display: none;
226
+ width: 756px;
227
+ padding: 20px 30px;
228
+ background: white;
229
+ height: 87px;
230
+ border-radius: 8px;
231
+ margin-top: 5px;
232
+ z-index: 10;
233
+ }
234
+ .Vlt-composite {
235
+ width: 100%;
236
+ }
237
+ .Nxd-search-icon {
238
+ margin-right: 10px;
239
+ }
240
+ #searchbox-test {
241
+ border: 1px solid white;
242
+ }
182
243
  </style>
@@ -168,23 +168,20 @@ class SidenavItem {
168
168
  export default class Sidenav {
169
169
  constructor(domNode) {
170
170
  this.domNode = document.getElementById('sidenav');
171
- this.mobileTrigger = document.getElementById('Vlt-sidenav-mobile-trigger');
172
171
  this.container = document.getElementById('Vlt-sidenav');
172
+ this.collapseTrigger = document.getElementById('Vlt-sidenav-collapse-trigger');
173
173
 
174
174
  if (this.domNode) {
175
175
  this.buildMenu();
176
176
  this.setActiveItem();
177
177
  this.expandActiveMenu();
178
178
  this.setupListeners();
179
- } else {
180
- this.mobileTrigger.style.display = 'none';
181
179
  }
182
180
  }
183
181
 
184
182
  setupListeners() {
185
183
  this.domNode.addEventListener('menuClosed', this.closeOpenedMenu.bind(this));
186
- this.mobileTrigger.addEventListener('click', this.mobileHandler.bind(this));
187
- this.mobileTrigger.addEventListener('touchstart', this.mobileHandler.bind(this));
184
+ this.collapseTrigger.addEventListener('click', this.collapseHandler.bind(this));
188
185
 
189
186
  document.querySelector('body').addEventListener('click', this.closeMobileMenu.bind(this));
190
187
  document.querySelector('body').addEventListener('touchstart', this.closeMobileMenu.bind(this));
@@ -234,11 +231,18 @@ export default class Sidenav {
234
231
  });
235
232
  }
236
233
 
237
- mobileHandler(event) {
238
- if (!this.container.classList.contains('Vlt-sidenav_visible')) {
239
- this.container.classList.add('Vlt-sidenav_visible');
240
- document.body.classList.add('Vlt-body--mobile-menu-open');
241
- event.stopPropagation();
234
+ collapseHandler(event) {
235
+ event.preventDefault();
236
+ event.stopPropagation();
237
+
238
+ this.container.classList.add('Vlt-sidenav--animate');
239
+
240
+ if (this.container.classList.contains('Vlt-sidenav_visible')) {
241
+ this.container.classList.remove('Vlt-sidenav_visible');
242
+ } else if (this.container.classList.contains('Vlt-sidenav--collapsed')) {
243
+ this.container.classList.remove('Vlt-sidenav--collapsed');
244
+ } else {
245
+ this.container.classList.add('Vlt-sidenav--collapsed');
242
246
  }
243
247
  }
244
248
 
@@ -0,0 +1,33 @@
1
+ export default class Topnav {
2
+ constructor() {
3
+ this.domNode = document.getElementById('subnav');
4
+ this.backdrop = this.domNode.querySelector('.Vlt-header__backdrop');
5
+
6
+ this.setupListeners();
7
+ }
8
+
9
+ setupListeners() {
10
+ this.domNode.querySelectorAll('.Vlt-tabs__link-menu').forEach((menu) => {
11
+ menu.addEventListener('click', this.toggleMenu.bind(this));
12
+ });
13
+
14
+ this.domNode.querySelector('.Adp-header__hamburger').addEventListener('click', this.toggleMobileMenu.bind(this));
15
+ }
16
+
17
+ toggleMobileMenu() {
18
+ this.backdrop.classList.toggle('Vlt-header__backdrop-active');
19
+ this.domNode.querySelector('.Adp-header__sub__menu').classList.toggle('Vlt-M-plus');
20
+ }
21
+
22
+ toggleMenu(event) {
23
+ let menu = event.target.closest('.Vlt-tabs__link-menu');
24
+ let active = menu.querySelector('.Vlt-topmenu').classList.contains('Vlt-topmenu-active');
25
+
26
+ this.backdrop.classList.toggle('Vlt-header__backdrop-active', !active);
27
+
28
+ this.domNode.querySelectorAll('.Vlt-topmenu').forEach((elem) => {
29
+ elem.classList.remove('Vlt-topmenu-active');
30
+ });
31
+ menu.querySelector('.Vlt-topmenu').classList.toggle('Vlt-topmenu-active', !active);
32
+ }
33
+ }
@@ -68,6 +68,8 @@ export default class VoltaTabbedExamples {
68
68
  }
69
69
 
70
70
  onTabClick(event) {
71
+ if (document.body.classList.contains('Adp-homepage')) { return; }
72
+
71
73
  const target = $(event.currentTarget);
72
74
  // Prevent nested tabs from changing the url
73
75
  if ($(event.target).parents('.Vlt-tabs').length > 1) { return; }
@@ -118,7 +120,7 @@ export default class VoltaTabbedExamples {
118
120
  if (tabId !== "") {
119
121
  let tab = document.querySelector(`.Vlt-tabs__link${tabId}`);
120
122
  if (tab) {
121
- tab.focus();
123
+ tab.focus({ preventScroll: true });
122
124
  tab.click();
123
125
  }
124
126
  }
@@ -19,8 +19,7 @@ require.context('../fonts', true);
19
19
  require.context('@vonagevolta/volta2/images/logos', true)
20
20
  require.context('@vonagevolta/volta2/dist/symbol', true)
21
21
 
22
- require('chartkick');
23
- require('chart.js');
22
+ require('chartkick/chart.js');
24
23
  require('jquery');
25
24
  require('clipboard');
26
25
  require('underscore');
@@ -30,8 +29,8 @@ require('@googlemaps/google-maps-services-js');
30
29
  import Volta from "../javascript/volta/volta.js"
31
30
 
32
31
  import Vue from 'vue'
33
-
34
32
  import mermaid from 'mermaid'
33
+ import Glide, { Autoplay, Breakpoints, Controls } from '@glidejs/glide/dist/glide.modular.esm'
35
34
 
36
35
  import { TweenLite, CSSPlugin } from 'gsap'
37
36
  import GithubCards from '../javascript/github_cards'
@@ -46,6 +45,7 @@ import Concatenation from '../javascript/components/concatenation/Concatenation.
46
45
  import APIStatus from '../javascript/api_status'
47
46
  import CodeSnippetEvents from '../javascript/code_snippet_events'
48
47
  import Sidenav from '../javascript/sidenav/index'
48
+ import Topnav from '../javascript/topnav/index'
49
49
  import Careers from '../javascript/careers'
50
50
  import LocaleSwitcher from '../javascript/locale_switcher'
51
51
 
@@ -57,11 +57,11 @@ $(document).ready(function() {
57
57
  new VoltaTabbedExamples
58
58
  new Format
59
59
  APIStatus()
60
- Scroll()
61
60
  CodeSnippetEvents()
62
61
  new Sidenav()
63
62
  new Careers
64
63
  new LocaleSwitcher
64
+ new Topnav
65
65
 
66
66
  if (document.getElementById('jwt-generator-app')) {
67
67
  new Vue({
@@ -141,5 +141,16 @@ $(document).ready(function() {
141
141
  themeCSS: '.actor { fill: #BDD5EA; stroke: #81B1DB; }',
142
142
  htmlLabels: true
143
143
  });
144
- });
145
144
 
145
+ if (document.querySelector('.glide')) {
146
+ document.querySelectorAll('.glide pre').forEach((elem) => {
147
+ //disable copy-to-clipboard for code-snippets in hero
148
+ elem.classList.add('Vlt-prism--copy-disabled')
149
+ })
150
+
151
+ const slider = new Glide('.glide').mount({ Autoplay, Breakpoints, Controls });
152
+
153
+ // Unfortunately, Autoplay doesn't work so we got to trigger it manually.
154
+ setInterval(() => { slider.go('>'); }, 8000);
155
+ }
156
+ });
@@ -27,9 +27,13 @@
27
27
  // this should be imported last
28
28
  @import '~@vonagevolta/volta2/scss/volta-prism';
29
29
 
30
+ @import "@glidejs/glide/src/assets/sass/glide.core";
31
+ @import "@glidejs/glide/src/assets/sass/glide.theme";
32
+
30
33
  /// NDP styles
31
34
  @import "./custom/variables";
32
35
  @import "./custom/core";
36
+ @import "./custom/landing";
33
37
  @import "./custom/typography";
34
38
  @import "./custom/syntax";
35
39
  @import "./custom/mixins";
@@ -32,18 +32,18 @@ em {
32
32
 
33
33
  .Nxd-main {
34
34
  outline: none;
35
+ height: calc(100vh - 150px);
35
36
  }
36
37
 
37
- @media #{$M-plus} {
38
+ @media #{'only screen and (min-width: #{$small-screen} ) and (max-width: #{$big-screen})'} {
38
39
  .Nxd-main {
39
- height: calc(100vh - 150px);
40
- margin-top: 150px;
40
+ height: calc(100vh - 250px);
41
+ margin-top: 250px;
41
42
  padding: 0px 32px;
42
43
  }
43
44
  }
44
45
 
45
46
  .Nxd-landing-main {
46
- margin-top: 150px;
47
47
  padding: $unit3 $unit4;
48
48
  }
49
49
 
@@ -194,3 +194,7 @@ table {
194
194
  code .token.function{
195
195
  color: #E75B2F !important;
196
196
  }
197
+
198
+ pre.Vlt-prism--dark code {
199
+ white-space: pre-wrap;
200
+ }
@@ -0,0 +1,470 @@
1
+ .Adp-homepage {
2
+ background: $grey-900;
3
+ .row {
4
+ padding: 20px 95px;
5
+
6
+ @media #{$S-only} {
7
+ padding: 20px 5px;
8
+ }
9
+ }
10
+
11
+ .container {
12
+ margin: 0 auto;
13
+ padding: 0 20px;
14
+
15
+ @media #{$S-only} {
16
+ margin: 24px auto;
17
+ }
18
+ }
19
+
20
+ .Adp-hero-section p > a {
21
+ color: #b77ef9 !important;
22
+ }
23
+
24
+ .Adp-hero-section__get-started {
25
+ margin-right: 24px;
26
+ }
27
+
28
+ .Adp-hero-section__title {
29
+ padding: 31px 0 0 0;
30
+ }
31
+
32
+ .Vlt-btn+.Vlt-btn {
33
+ margin-left: 0px;
34
+ }
35
+
36
+ .Adp-use-cases {
37
+ position: relative;
38
+
39
+ &__background {
40
+ position: absolute;
41
+ width: 100%;
42
+ height: 285px;
43
+ left: 0px;
44
+ top: 85px;
45
+ background: linear-gradient(90deg, #7FC6F4 4.86%, #D5279B 96.11%);
46
+ mix-blend-mode: hard-light;
47
+ opacity: 0.4;
48
+ }
49
+
50
+ .Vlt-tabs__header {
51
+ border-bottom: 1px solid $grey-700;
52
+ }
53
+
54
+ .Vlt-tabs__link:focus {
55
+ background-color: inherit;
56
+ }
57
+
58
+ .Vlt-tabs__link_active:after {
59
+ background: $white;
60
+ }
61
+
62
+ &__all {
63
+ margin: 20px auto 0;
64
+
65
+ svg, a {
66
+ color: #B77EF9 !important;
67
+ fill: #B77EF9 !important;
68
+ }
69
+ }
70
+
71
+ &__all-mobile {
72
+ width: 100%;
73
+ }
74
+ }
75
+
76
+ .Adp-use-cases__card {
77
+ background: rgba(255, 255, 255, 0.1);
78
+ backdrop-filter: blur(25px);
79
+ border-radius: 16px;
80
+ padding: 24px 24px 0 24px;
81
+ height: 100%;
82
+
83
+ .Vlt-card__content {
84
+ min-height: 257px;
85
+ display: flex;
86
+ flex-direction: column;
87
+ justify-content: space-between;
88
+ height: 100%;
89
+
90
+ @media #{$M-plus} {
91
+ min-height: 288px;
92
+ }
93
+ }
94
+
95
+ p {
96
+ margin-bottom: 0px;
97
+ }
98
+
99
+ &-title {
100
+ padding: 0 0 14px 0;
101
+ display: flex;
102
+ }
103
+
104
+ &-blurb {
105
+ padding: 0 0 14px 0;
106
+ display: flex;
107
+ }
108
+
109
+ &-tags {
110
+ padding: 0 0 16px 0;
111
+ display: flex;
112
+ flex-wrap: wrap;
113
+
114
+ p {
115
+ color: $grey-300;
116
+
117
+ &:nth-of-type(1) {
118
+ margin-right: 24px;
119
+ }
120
+ }
121
+ }
122
+
123
+ &-image {
124
+ background: rgb(183, 126, 249);
125
+ border-radius: 8px 8px 0 0;
126
+ display: flex;
127
+
128
+ img {
129
+ border-radius: 8px 8px 0 0;
130
+ }
131
+ }
132
+ }
133
+
134
+ .Adp-listing {
135
+ position: relative;
136
+ h3 {
137
+ margin-bottom: 32px;
138
+ }
139
+
140
+ @media #{$S-only} {
141
+ .Vlt-btn--primary {
142
+ width: 100%;
143
+ }
144
+ }
145
+
146
+ .Vlt-col--3of3 {
147
+ display: flex;
148
+ justify-content: center;
149
+ }
150
+
151
+ &__platform {
152
+ .Vlt-grid {
153
+ @media #{$M-plus} {
154
+ padding: 40px 80px;
155
+ }
156
+ }
157
+ .Adp-listing__item {
158
+ margin-bottom: 0px;
159
+ }
160
+ }
161
+
162
+ &__background {
163
+ position: absolute;
164
+ width: 100%;
165
+ top: 0;
166
+ left: 0;
167
+ background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
168
+ mix-blend-mode: hard-light;
169
+ opacity: 0.2;
170
+ }
171
+
172
+ &__background-glass {
173
+ position: absolute;
174
+ width: 100%;
175
+ top: 0;
176
+ left: 0;
177
+ background: rgba(255, 255, 255, 0.1);
178
+ backdrop-filter: blur(25px);
179
+ border-radius: 16px;
180
+
181
+ @media #{$S-only} {
182
+ padding: 0 15px;
183
+ }
184
+ }
185
+ }
186
+
187
+ .Adp-listing__item {
188
+ display: flex;
189
+ flex-direction: column;
190
+ margin-bottom: 24px;
191
+
192
+ &-title {
193
+ display: flex;
194
+
195
+ svg {
196
+ margin-right: 16px;
197
+ }
198
+ }
199
+
200
+ &-links {
201
+ display: flex;
202
+ flex-direction: column;
203
+ height: 100%;
204
+ padding-bottom: 24px;
205
+
206
+ &-border {
207
+ border-bottom: 1px solid $grey-700;
208
+ }
209
+
210
+ a {
211
+ justify-content: space-between;
212
+ display: flex;
213
+ margin: 0 0 8px 40px;
214
+ }
215
+ }
216
+ }
217
+
218
+ .Adp-brand-listing {
219
+ background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
220
+
221
+ .container {
222
+
223
+ @media #{$S-only} {
224
+ margin: 0px auto;
225
+ }
226
+ }
227
+
228
+ @media #{$M-plus} {
229
+ height: 88px;
230
+ }
231
+
232
+ .Vlt-grid {
233
+ justify-content: space-between;
234
+ align-items: center;
235
+
236
+ // overrides volta's style, they don't work
237
+ @media #{$S-only} {
238
+ .Vlt-col--S-1of2 {
239
+ display: flex;
240
+ justify-content: center;
241
+ flex: 0 0 50%;
242
+ }
243
+ }
244
+ }
245
+
246
+ .row {
247
+ padding: 16px 95px;
248
+
249
+ @media #{$S-only} {
250
+ padding: 16px 0;
251
+ }
252
+ }
253
+ }
254
+
255
+ .Adp-documentation {
256
+ .Adp-listing__item-links {
257
+ @media #{$S-only} {
258
+ border-bottom: 1px solid $grey-700;
259
+ }
260
+ }
261
+ }
262
+
263
+ .Adp-platform__background {
264
+ background: linear-gradient(90deg, #7FC6F4 4.86%, #8728FB 96.11%);
265
+ mix-blend-mode: hard-light;
266
+ opacity: 0.2;
267
+ position: absolute;
268
+ width: 100%;
269
+ height: 285px;
270
+ top: 78px;
271
+ left: 0px;
272
+
273
+ &-glass {
274
+ @media #{$M-plus} {
275
+ background: rgba(255, 255, 255, 0.1);
276
+ backdrop-filter: blur(25px);
277
+ border-radius: 16px;
278
+ }
279
+
280
+ @media #{$S-only} {
281
+ padding: 0 15px;
282
+ }
283
+ }
284
+ }
285
+
286
+ .Adp-listing__platform {
287
+ .Adp-listing__item {
288
+ @media #{$S-only} {
289
+ background: rgba(255, 255, 255, 0.1);
290
+ backdrop-filter: blur(25px);
291
+ border-radius: 16px;
292
+ padding: 15px;
293
+
294
+ .Adp-listing__item-links {
295
+ padding: 0;
296
+ }
297
+ }
298
+ }
299
+ }
300
+
301
+ .Adp-video-listing {
302
+ .Vlt-col {
303
+ display: flex;
304
+ justify-content: center;
305
+ }
306
+
307
+ .Vlt-btn {
308
+ @media #{$S-only} {
309
+ width: 100%;
310
+ }
311
+ }
312
+ }
313
+
314
+ .Adp-hero-section__code-background {
315
+ background: #871EFF;
316
+ border-radius: 0 0 0 40px;
317
+ height: 360px;
318
+ z-index: -1;
319
+ width: 50vw;
320
+ left: -5px;
321
+ position: absolute;
322
+ top: -20px;
323
+
324
+ @media #{$S-only} {
325
+ width: 100vw;
326
+ left: 0;
327
+ margin-top: 16px;
328
+ }
329
+ }
330
+
331
+ .Adp-code-snippets-listing {
332
+ .Adp-code-snippet__title {
333
+ padding-left: 12px;
334
+
335
+ b {
336
+ color: white;
337
+ }
338
+ }
339
+
340
+ .Adp-code-snippet {
341
+ background-color: #333333;
342
+ border-radius: 15px;
343
+
344
+ code, pre {
345
+ background-color: #333333;
346
+ }
347
+
348
+ pre {
349
+ margin: 0;
350
+ padding: 16px 24px;
351
+ border-radius: 15px;
352
+ max-height: 250px;
353
+ overflow: scroll;
354
+ }
355
+
356
+ svg {
357
+ width: 16px;
358
+ height: 16px;
359
+ }
360
+
361
+ #prerequisites, #write-the-code, #run-your-code, p {
362
+ display: none;
363
+ }
364
+
365
+ .Nxd-accordion-emphasis {
366
+ display: none;
367
+ }
368
+
369
+ pre:not(.main-code) {
370
+ display: none;
371
+ }
372
+
373
+ #write-the-code ~ .code-toolbar + p {
374
+ display: flex;
375
+ font-weight: 600;
376
+
377
+ a {
378
+ color: white;
379
+ padding: 10px 35px 0px;
380
+ }
381
+ }
382
+
383
+ #run-your-code ~ .code-toolbar, #run-your-code ~ .code-toolbar + p {
384
+ display: none;
385
+ }
386
+
387
+ .Vlt-tabs__content {
388
+ margin-top: 0px;
389
+ padding-bottom: 16px;
390
+ }
391
+
392
+ .Vlt-tabs__header--bordered {
393
+ box-shadow: none;
394
+ display: flex;
395
+ overflow: scroll;
396
+ justify-content: flex-start;
397
+ margin-top: 0px;
398
+ padding: 16px;
399
+
400
+ .Vlt-tabs__link {
401
+ border-radius: 100px;
402
+ padding: 12px;
403
+ margin: 0;
404
+ color: white;
405
+
406
+ &:first-child {
407
+ margin: 0;
408
+ }
409
+ a {
410
+ display: flex;
411
+ font-size: 16px;
412
+ font-weight: 600;
413
+ }
414
+
415
+ &:after {
416
+ background: none;
417
+ }
418
+
419
+ &:active {
420
+ background-color: #333333 !important;
421
+ }
422
+ }
423
+
424
+ .Vlt-tabs__link_active {
425
+ background: #757575;
426
+ border: none;
427
+
428
+ &:before {
429
+ background: none;
430
+ }
431
+ }
432
+ }
433
+ }
434
+ }
435
+
436
+ .glide {
437
+ position: static;
438
+ max-height: 400px;
439
+
440
+ &__track {
441
+ margin-top: 40px;
442
+ }
443
+
444
+ &__bullets {
445
+ top: 20px;
446
+ left: 48px;
447
+ }
448
+
449
+ &__arrow {
450
+ border: none;
451
+ box-shadow: none;
452
+ }
453
+
454
+ &__arrow--left {
455
+ left: -25px;
456
+
457
+ @media #{$S-only} {
458
+ left: -15px;
459
+ }
460
+ }
461
+
462
+ &__arrow--right {
463
+ right: -25px;
464
+
465
+ @media #{$S-only} {
466
+ right: -15px;
467
+ }
468
+ }
469
+ }
470
+ }