Jetpack by WordPress.com - Version 4.8

Version Description

  • Release date: April 4th, 2017
  • Release post: http://wp.me/p1moTy-4gA

Major Enhancements

  • Easier to navigate Jetpack's feature settings in your dashboard and WordPress.com.
  • New WordPress.com Toolbar provides quick access to site management, stats, and other services.
  • New MailChimp Subscribe Popup widget.
  • Sitemaps are faster and now support sites with a very large amount of posts.
  • Contact Form now has a plain-text alternative and better avoids spam filters.
  • Debug form includes extra information to better prioritize your support requests.
  • Photon can now be used within the dashboard, and supports bbPress topics and replies.

Slightly Less Exciting Enhancements

  • Improved previously confusing wording in Stats dashboard, and Featured Content options.
  • You can now embed Apple Keynotes straight from icloud.com in your posts and pages.
  • Changed Infinite Scroll button text on taxonomy page and added a new filter to short-circuit the is_last_batch() method.
  • Open Graph now uses transients to save image IDs.
  • You can now use full URLs in the Social Media Icons widget.
  • Milestone widget now allows custom links to open in a new window.
  • VideoPress videos can be used as headers in themes that support it, like Twenty Seventeen.
  • Extracted the timezone offset method from the Upcoming Events widget so it can be used by other features.

Performance Improvements

  • Database load is reduced during updates on large sites with multiple servers by retaining hashes for current and current-1 versions.
  • Disk storage is reduced on large multisite networks by storing the jetpack_file_data option in the wp_sitemeta table.
  • Jetpack plan data now uses the WordPress.com REST API.
  • Slovakian language files now rely on WordPress.org's language packs.

Accessibility Improvements

  • Improved post details clipping for better screen reader support.
  • Updated custom language packs for multiple languages.

Security Improvements

  • We now avoid path disclosure via cookies in PHP error messages.

Compatibility Improvements

  • Removed deprecated functions get_theme and get_current_theme.
  • Publicize now works with third-party plugins like WP Recipe Maker.
  • Open Graph Meta Tags are now enabled when you use the "Head, Footer and Post Injections" plugin.
  • Better support for WooCommerce data sync and backup.
  • We now also sync the sync_via_cron setting, the user's chosen language, and WP Super Cache's globals and constants.
  • We no longer sync post types from the WordPress Automatic Plugin and RSS AutoPilot to avoid synchronization issues.
  • Sync settings can now be edited from the WordPress.com REST API to better troubleshoot sync issues.

Bug Fixes

  • Gravatar is always displayed in Settings.
  • Submenu items always use relative links.
  • Contact Form avoids PHP notices when using the form in a Text widget.
  • Content Options now correctly displays single characters word count on sites with multibyte languages.
  • Administrator area translations fixed for several languages.
  • Added proper support for Formal/Informal translation versions for languages that support them.
  • Site Icons are always used as fallback Open Graph Image tags.
  • Protect removes port number when server returns a port alongside a stored IP address.
  • Filters ensure that more than 1,024 posts can be excluded from Related Posts.
  • When the email is already subscribed we now show the correct notification in the subscription form.
  • When using the Email sharing button, we now avoid syntax errors due to unexpected characters in the from name.
  • Remove deprecated jetpack_publicize_post action.
  • VideoPress now avoids PHP Notices when fetching video information.
  • Instagram base URL now uses www in the Social Media Icons widget.
  • All values entered in Facebook Page Plugin widget settings are now escaped.
  • Widget Visibility now avoids memory issues on sites with a lot of registered users.
Download this release

Release Info

Developer dsmart
Plugin Icon 128x128 Jetpack by WordPress.com
Version 4.8
Comparing to
See all releases

Code changes from version 4.7.1 to 4.8

Files changed (212) hide show
  1. 3rd-party/bbpress.php +11 -1
  2. CODE-OF-CONDUCT.md +28 -0
  3. _inc/accessible-focus.js +19 -0
  4. _inc/build/admin.dops-style.css +1706 -1404
  5. _inc/build/admin.dops-style.rtl.css +1705 -1404
  6. _inc/build/admin.js +41 -36
  7. _inc/build/static.html +1 -1
  8. _inc/build/style.min.css +1 -1
  9. _inc/build/style.min.rtl.css +1 -1
  10. _inc/jetpack-connection-banner.js +25 -2
  11. _inc/jetpack-strings.php +489 -415
  12. _inc/lib/admin-pages/class.jetpack-react-page.php +58 -71
  13. _inc/lib/admin-pages/class.jetpack-settings-page.php +4 -1
  14. _inc/lib/class.core-rest-api-endpoints.php +89 -53
  15. _inc/lib/core-api/class.jetpack-core-api-module-endpoints.php +190 -24
  16. _inc/lib/core-api/class.jetpack-core-api-xmlrpc-consumer-endpoint.php +1 -1
  17. _inc/lib/icalendar-reader.php +46 -0
  18. changelog.txt +18 -0
  19. class.jetpack-admin.php +1 -0
  20. class.jetpack-connection-banner.php +76 -2
  21. class.jetpack-debugger.php +119 -36
  22. class.jetpack-options.php +48 -8
  23. class.jetpack-tracks.php +4 -4
  24. class.jetpack.php +44 -12
  25. class.photon.php +30 -8
  26. css/jetpack-banners-rtl.css +158 -0
  27. css/jetpack-banners-rtl.css.map +1 -1
  28. css/jetpack-banners-rtl.min.css +1 -1
  29. css/jetpack-banners.css +158 -0
  30. css/jetpack-banners.css.map +1 -1
  31. css/jetpack-banners.min.css +1 -1
  32. functions.opengraph.php +22 -19
  33. jetpack.php +3 -3
  34. json-endpoints/jetpack/class.wpcom-json-api-get-option-endpoint.php +3 -1
  35. json-endpoints/jetpack/json-api-jetpack-endpoints.php +18 -15
  36. language-packs.js +1 -0
  37. languages/jetpack-ary.mo +0 -0
  38. languages/jetpack-az.mo +0 -0
  39. languages/jetpack-bg_BG.mo +0 -0
  40. languages/jetpack-bs_BA.mo +0 -0
  41. languages/jetpack-ca.mo +0 -0
  42. languages/jetpack-ckb.mo +0 -0
  43. languages/jetpack-cs_CZ.mo +0 -0
  44. languages/jetpack-cy.mo +0 -0
  45. languages/jetpack-da_DK.mo +0 -0
  46. languages/jetpack-gd.mo +0 -0
  47. languages/jetpack-gl_ES.mo +0 -0
  48. languages/jetpack-hu_HU.mo +0 -0
  49. languages/jetpack-is_IS.mo +0 -0
  50. languages/jetpack-lt_LT.mo +0 -0
  51. languages/jetpack-mk_MK.mo +0 -0
  52. languages/jetpack-ms_MY.mo +0 -0
  53. languages/jetpack-nb_NO.mo +0 -0
  54. languages/jetpack-nn_NO.mo +0 -0
  55. languages/jetpack-pl_PL.mo +0 -0
  56. languages/jetpack-pt_PT.mo +0 -0
  57. languages/jetpack-si_LK.mo +0 -0
  58. languages/jetpack-sk_SK.mo +0 -0
  59. languages/jetpack-sr_RS.mo +0 -0
  60. languages/jetpack-te.mo +0 -0
  61. languages/jetpack-th.mo +0 -0
  62. languages/jetpack-uk.mo +0 -0
  63. languages/jetpack-vi.mo +0 -0
  64. languages/jetpack-zh_HK.mo +0 -0
  65. languages/json/jetpack-af.json +1 -1
  66. languages/json/jetpack-ar.json +1 -1
  67. languages/json/jetpack-ary.json +1 -1
  68. languages/json/jetpack-az.json +1 -1
  69. languages/json/jetpack-bg_BG.json +1 -1
  70. languages/json/jetpack-bs_BA.json +1 -1
  71. languages/json/jetpack-ca.json +1 -1
  72. languages/json/jetpack-ckb.json +1 -1
  73. languages/json/jetpack-cs_CZ.json +1 -1
  74. languages/json/jetpack-cy.json +1 -1
  75. languages/json/jetpack-da_DK.json +1 -1
  76. languages/json/jetpack-de_DE.json +1 -1
  77. languages/json/jetpack-de_DE_formal.json +1 -0
  78. languages/json/jetpack-el.json +1 -1
  79. languages/json/jetpack-en_AU.json +1 -1
  80. languages/json/jetpack-en_CA.json +1 -1
  81. languages/json/jetpack-en_GB.json +1 -0
  82. languages/json/jetpack-en_NZ.json +1 -1
  83. languages/json/jetpack-eo.json +1 -1
  84. languages/json/jetpack-es_AR.json +1 -1
  85. languages/json/jetpack-es_CL.json +1 -1
  86. languages/json/jetpack-es_ES.json +1 -1
  87. languages/json/jetpack-es_VE.json +1 -1
  88. languages/json/jetpack-fa_IR.json +1 -1
  89. languages/json/jetpack-fi.json +1 -1
  90. languages/json/jetpack-fr_BE.json +1 -1
  91. languages/json/jetpack-fr_FR.json +1 -1
  92. languages/json/jetpack-gd.json +1 -1
  93. languages/json/jetpack-gl_ES.json +1 -1
  94. languages/json/jetpack-he_IL.json +1 -1
  95. languages/json/jetpack-hr.json +1 -1
  96. languages/json/jetpack-hu_HU.json +1 -1
  97. languages/json/jetpack-id_ID.json +1 -1
  98. languages/json/jetpack-is_IS.json +1 -1
  99. languages/json/jetpack-it_IT.json +1 -1
  100. languages/json/jetpack-ja.json +1 -1
  101. languages/json/jetpack-ka_GE.json +1 -1
  102. languages/json/jetpack-ko_KR.json +1 -1
  103. languages/json/jetpack-lt_LT.json +1 -1
  104. languages/json/jetpack-lv.json +1 -1
  105. languages/json/jetpack-mk_MK.json +1 -1
  106. languages/json/jetpack-ms_MY.json +1 -1
  107. languages/json/jetpack-my_MM.json +1 -1
  108. languages/json/jetpack-nb_NO.json +1 -1
  109. languages/json/jetpack-nl_NL.json +1 -1
  110. languages/json/jetpack-nl_NL_formal.json +1 -0
  111. languages/json/jetpack-nn_NO.json +1 -1
  112. languages/json/jetpack-pl_PL.json +1 -1
  113. languages/json/jetpack-pt_BR.json +1 -1
  114. languages/json/jetpack-pt_PT.json +1 -1
  115. languages/json/jetpack-ro_RO.json +1 -1
  116. languages/json/jetpack-ru_RU.json +1 -1
  117. languages/json/jetpack-sa_IN.json +1 -1
  118. languages/json/jetpack-si_LK.json +1 -1
  119. languages/json/jetpack-sk_SK.json +1 -1
  120. languages/json/jetpack-sl_SI.json +1 -1
  121. languages/json/jetpack-sq.json +1 -1
  122. languages/json/jetpack-sr_RS.json +1 -1
  123. languages/json/jetpack-sv_SE.json +1 -1
  124. languages/json/jetpack-te.json +1 -1
  125. languages/json/jetpack-th.json +1 -1
  126. languages/json/jetpack-tr_TR.json +1 -1
  127. languages/json/jetpack-uk.json +1 -1
  128. languages/json/jetpack-ur.json +1 -1
  129. languages/json/jetpack-vi.json +1 -1
  130. languages/json/jetpack-zh_CN.json +1 -1
  131. languages/json/jetpack-zh_HK.json +1 -0
  132. languages/json/jetpack-zh_TW.json +1 -1
  133. modules/after-the-deadline.php +1 -1
  134. modules/carousel.php +1 -1
  135. modules/comments.php +1 -1
  136. modules/contact-form/grunion-contact-form.php +84 -8
  137. modules/custom-content-types.php +2 -2
  138. modules/custom-css/custom-css.php +9 -19
  139. modules/infinite-scroll.php +3 -3
  140. modules/infinite-scroll/infinity.php +34 -2
  141. modules/markdown.php +1 -1
  142. modules/masterbar.php +25 -0
  143. modules/masterbar/masterbar.php +951 -0
  144. modules/masterbar/overrides.css +77 -0
  145. modules/masterbar/rtl-admin-bar.php +52 -0
  146. modules/minileven.php +1 -1
  147. modules/module-headings.php +28 -18
  148. modules/module-info.php +19 -8
  149. modules/notes.php +16 -1
  150. modules/photon.php +1 -1
  151. modules/post-by-email.php +2 -2
  152. modules/protect.php +4 -4
  153. modules/protect/shared-functions.php +8 -4
  154. modules/publicize/publicize-jetpack.php +1 -1
  155. modules/related-posts.php +1 -1
  156. modules/related-posts/jetpack-related-posts.php +17 -18
  157. modules/seo-tools.php +1 -1
  158. modules/sharedaddy/sharedaddy.php +23 -0
  159. modules/sitemaps.php +31 -0
  160. modules/sitemaps/sitemap-buffer.php +286 -0
  161. modules/sitemaps/sitemap-builder.php +1456 -0
  162. modules/sitemaps/sitemap-constants.php +216 -0
  163. modules/sitemaps/sitemap-finder.php +121 -0
  164. modules/sitemaps/sitemap-librarian.php +417 -0
  165. modules/sitemaps/sitemap-logger.php +83 -0
  166. modules/sitemaps/sitemap-state.php +143 -0
  167. modules/sitemaps/sitemap-stylist.php +770 -0
  168. modules/sitemaps/sitemap-xsl.php +0 -172
  169. modules/sitemaps/sitemaps.php +387 -695
  170. modules/sso.php +2 -2
  171. modules/subscriptions.php +6 -22
  172. modules/theme-tools/content-options/blog-display.php +18 -3
  173. modules/theme-tools/content-options/customizer.js +32 -8
  174. modules/theme-tools/content-options/post-details.php +1 -1
  175. modules/theme-tools/featured-content.php +3 -3
  176. modules/theme-tools/infinite-scroll.php +10 -10
  177. modules/tiled-gallery.php +2 -1
  178. modules/verification-tools.php +1 -1
  179. modules/verification-tools/blog-verification-tools.php +6 -1
  180. modules/videopress.php +1 -1
  181. modules/videopress/class.jetpack-videopress.php +5 -13
  182. modules/videopress/class.videopress-player.php +9 -4
  183. modules/videopress/class.videopress-xmlrpc.php +0 -6
  184. modules/videopress/utility-functions.php +29 -40
  185. modules/widget-visibility/widget-conditions.php +7 -1
  186. modules/widgets/facebook-likebox.php +14 -16
  187. modules/widgets/gallery.php +1 -1
  188. modules/widgets/mailchimp.php +101 -0
  189. modules/widgets/milestone/milestone.php +1 -1
  190. modules/widgets/social-media-icons.php +36 -10
  191. modules/widgets/upcoming-events.php +5 -35
  192. readme.txt +75 -41
  193. scss/jetpack-admin-jitm.css +0 -145
  194. scss/jetpack-admin.scss +1 -0
  195. scss/organisms/_banners.scss +147 -0
  196. sync/class.jetpack-sync-actions.php +23 -4
  197. sync/class.jetpack-sync-defaults.php +71 -1
  198. sync/class.jetpack-sync-functions.php +3 -0
  199. sync/class.jetpack-sync-listener.php +49 -7
  200. sync/class.jetpack-sync-module-callables.php +4 -4
  201. sync/class.jetpack-sync-module-constants.php +4 -9
  202. sync/class.jetpack-sync-module-options.php +1 -2
  203. sync/class.jetpack-sync-module-posts.php +61 -51
  204. sync/class.jetpack-sync-module-users.php +43 -9
  205. sync/class.jetpack-sync-module-woocommerce.php +112 -0
  206. sync/class.jetpack-sync-module-wp-super-cache.php +79 -0
  207. sync/class.jetpack-sync-modules.php +8 -4
  208. sync/class.jetpack-sync-settings.php +1 -1
  209. sync/class.jetpack-sync-wp-replicastore.php +12 -0
  210. sync/interface.jetpack-sync-replicastore.php +6 -0
  211. uninstall.php +1 -1
  212. webpack.config.js +4 -0
3rd-party/bbpress.php CHANGED
@@ -13,6 +13,16 @@ function jetpack_bbpress_compat() {
13
add_action( 'bbp_template_after_single_forum', 'jetpack_sharing_bbpress' );
14
add_action( 'bbp_template_after_single_topic', 'jetpack_sharing_bbpress' );
15
}
16
}
17
18
/**
@@ -25,4 +35,4 @@ function jetpack_bbpress_compat() {
25
*/
26
function jetpack_sharing_bbpress() {
27
sharing_display( null, true );
28
- }
13
add_action( 'bbp_template_after_single_forum', 'jetpack_sharing_bbpress' );
14
add_action( 'bbp_template_after_single_topic', 'jetpack_sharing_bbpress' );
15
}
16
+
17
+ /**
18
+ * Use Photon for all images in Topics and replies.
19
+ *
20
+ * @since 4.9.0
21
+ */
22
+ if ( class_exists( 'Jetpack_Photon' ) && Jetpack::is_module_active( 'photon' ) ) {
23
+ add_filter( 'bbp_get_topic_content', array( 'Jetpack_Photon', 'filter_the_content' ), 999999 );
24
+ add_filter( 'bbp_get_reply_content', array( 'Jetpack_Photon', 'filter_the_content' ), 999999 );
25
+ }
26
}
27
28
/**
35
*/
36
function jetpack_sharing_bbpress() {
37
sharing_display( null, true );
38
+ }
CODE-OF-CONDUCT.md ADDED
@@ -0,0 +1,28 @@
1
+ # Contributor Code of Conduct
2
+
3
+ As contributors and maintainers of this project, and in the interest of fostering an open and welcoming community, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
4
+
5
+ We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, ethnicity, age, religion, or nationality.
6
+
7
+ Examples of unacceptable behavior by participants include:
8
+
9
+ * The use of sexualized language or imagery
10
+ * Personal attacks
11
+ * Trolling or insulting/derogatory comments
12
+ * Public or private harassment
13
+ * Publishing other's private information, such as physical or electronic addresses, without explicit permission
14
+ * Other unethical or unprofessional conduct
15
+
16
+ Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
17
+
18
+ By adopting this Code of Conduct, project maintainers commit themselves to fairly and consistently applying these principles to every aspect of managing this project. Project maintainers who do not follow or enforce the Code of Conduct may be permanently removed from the project team.
19
+
20
+ This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community.
21
+
22
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by emailing a project maintainer via [this contact form](https://developer.wordpress.com/contact/?g21-subject=Code%20of%20Conduct), with a subject that includes `Code of Conduct`. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. Maintainers are obligated to maintain confidentiality with regard to the reporter of an incident.
23
+
24
+
25
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.3.0, available at [http://contributor-covenant.org/version/1/3/0/][version]
26
+
27
+ [homepage]: http://contributor-covenant.org
28
+ [version]: http://contributor-covenant.org/version/1/3/0/
_inc/accessible-focus.js ADDED
@@ -0,0 +1,19 @@
1
+ var keyboardNavigation = false,
2
+ keyboardNavigationKeycodes = [ 9, 32, 37, 38, 39, 40 ]; // keyCodes for tab, space, left, up, right, down respectively
3
+
4
+ document.addEventListener( 'keydown', function( event ) {
5
+ if ( keyboardNavigation ) {
6
+ return;
7
+ }
8
+ if ( keyboardNavigationKeycodes.indexOf( event.keyCode ) !== -1 ) {
9
+ keyboardNavigation = true;
10
+ document.documentElement.classList.add( 'accessible-focus' );
11
+ }
12
+ } );
13
+ document.addEventListener( 'mouseup', function() {
14
+ if ( ! keyboardNavigation ) {
15
+ return;
16
+ }
17
+ keyboardNavigation = false;
18
+ document.documentElement.classList.remove( 'accessible-focus' );
19
+ } );
_inc/build/admin.dops-style.css CHANGED
@@ -1,3 +1,168 @@
1
.dops-count {
2
display: inline-block;
3
padding: 0.0625rem 0.375rem;
@@ -297,93 +462,86 @@
297
* @component Search
298
*/
299
.dops-search {
300
margin-bottom: 24px;
301
width: 60px;
302
height: 51px;
303
position: relative;
304
- z-index: 22; }
305
- @media (max-width: 660px) {
306
- .dops-search {
307
- width: 50px; } }
308
- .dops-search .dops-search-open__icon {
309
- position: absolute;
310
- top: 50%;
311
- margin-top: -12px;
312
- width: 60px;
313
z-index: 20;
314
color: #0087be;
315
cursor: pointer; }
316
- .dops-accessible-focus .dops-search .dops-search-open__icon:focus {
317
outline: dotted 1px #0087be; }
318
- @media (max-width: 660px) {
319
- .dops-search .dops-search-open__icon {
320
- width: 50px; } }
321
- .dops-search .dops-search-open__icon:hover {
322
color: #3d596d; }
323
- .dops-search .dops-search-close__icon {
324
- position: absolute;
325
- bottom: 0;
326
- top: 50%;
327
- right: 0;
328
- margin-top: -12px;
329
- width: 60px;
330
- cursor: pointer;
331
- z-index: 20;
332
color: #3d596d;
333
- display: none;
334
opacity: 0;
335
transition: opacity .2s ease-in; }
336
- .dops-accessible-focus .dops-search .dops-search-close__icon:focus {
337
- outline: dotted 1px #0087be; }
338
- .dops-search .dops-search-close__icon::before {
339
- position: absolute;
340
- left: 0;
341
- right: 0;
342
- top: 50%;
343
- margin-top: -8px;
344
- font-size: 16px;
345
- text-align: center; }
346
- @media (max-width: 660px) {
347
- .dops-search .dops-search-close__icon::before {
348
- font-size: 14px;
349
- margin-top: -7px; } }
350
- @media (max-width: 660px) {
351
- .dops-search .dops-search-close__icon {
352
- width: 50px; } }
353
-
354
- .dops-search.is-pinned {
355
margin-bottom: 0;
356
- height: auto;
357
position: absolute;
358
- bottom: 0;
359
top: 0;
360
- right: 0;
361
- z-index: 170; }
362
- .dops-search.is-pinned .dops-search-open__icon {
363
- right: 0; }
364
- .dops-search.is-pinned .dops-search__input[type="search"] {
365
- height: 100%; }
366
367
.dops-search__input[type="search"] {
368
display: none;
369
- position: absolute;
370
z-index: 10;
371
top: 0;
372
- margin: 0;
373
- padding: 0 50px 0 60px;
374
border: none;
375
background: white;
376
- height: 51px;
377
-moz-appearance: none;
378
appearance: none;
379
box-sizing: border-box;
380
- -webkit-appearance: none;
381
- box-shadow: none; }
382
- @media (max-width: 660px) {
383
- .dops-search__input[type="search"] {
384
- opacity: 0;
385
- left: 0;
386
- padding-left: 50px; } }
387
.dops-search__input[type="search"]::-webkit-search-cancel-button {
388
-webkit-appearance: none; }
389
.dops-search__input[type="search"]:focus {
@@ -391,39 +549,103 @@
391
border: none; }
392
393
.dops-search.is-open {
394
- margin-right: 0 !important;
395
width: 100%; }
396
- .dops-search.is-open .dops-search-open__icon {
397
- color: #3d596d;
398
- left: 0; }
399
- .dops-search.is-open .dops-search-close__icon {
400
display: inline-block; }
401
.dops-search.is-open .dops-search__input,
402
- .dops-search.is-open .dops-search-close__icon {
403
opacity: 1; }
404
.dops-search.is-open .dops-search__input {
405
display: block; }
406
407
.dops-search .dops-spinner {
408
- display: none;
409
- position: absolute;
410
- top: 50%;
411
- left: 30px;
412
- transform: translate(-50%, -50%); }
413
- @media (max-width: 660px) {
414
- .dops-search .dops-spinner {
415
- left: 25px; } }
416
417
- .dops-search.is-searching .dops-search-open__icon {
418
display: none; }
419
420
.dops-search.is-searching .dops-spinner {
421
- display: block;
422
z-index: 20; }
423
424
- @media (max-width: 660px) {
425
- .animating.dops-search-opening .dops-search input {
426
- opacity: 1; } }
427
/**
428
* Section Nav
429
*/
@@ -698,100 +920,175 @@
698
@media (max-width: 480px) {
699
.dops-section-nav .dops-search.is-pinned {
700
height: 46px; } }
701
- /* Card */
702
- .dops-card {
703
- position: relative;
704
- margin: 0 auto 0.625rem auto;
705
- padding: 1rem;
706
box-sizing: border-box;
707
- background: white;
708
- box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
709
- .dops-card:after {
710
- content: ".";
711
- display: block;
712
- height: 0;
713
- clear: both;
714
- visibility: hidden; }
715
- @media (min-width: 481px) {
716
- .dops-card {
717
- margin-bottom: 1rem;
718
- padding: 1.5rem; } }
719
- .dops-card.is-compact {
720
- margin-bottom: 1px; }
721
- @media (min-width: 481px) {
722
- .dops-card.is-compact {
723
- margin-bottom: 1px;
724
- padding: 1rem 1.5rem; } }
725
-
726
- .dops-card-title {
727
- background-color: #f9f9f9;
728
- color: black;
729
- font-family: Helvetica, Arial, sans-serif;
730
- font-size: 12px;
731
- font-weight: normal;
732
- text-transform: uppercase;
733
- border-bottom: 1px solid #DDDDDD;
734
- padding: 10px 16px;
735
- margin: 0; }
736
- @media (min-width: 481px) {
737
- .dops-card-title {
738
- padding: 16px 24px; } }
739
- .dops-card-title .dops-card-meta {
740
- color: #AAAAAA;
741
- float: right; }
742
-
743
- .dops-card-section {
744
- font-size: 14px;
745
- padding: 16px;
746
- border-bottom: 1px solid #DDDDDD; }
747
- .dops-card-section:after {
748
- content: ".";
749
- display: block;
750
- height: 0;
751
- clear: both;
752
visibility: hidden; }
753
@media (min-width: 481px) {
754
- .dops-card-section {
755
padding: 24px; } }
756
- .dops-card-section:last-child {
757
- border-bottom: none; }
758
- .dops-card-section .dops-card-section-label {
759
- color: black;
760
- font-size: 12px;
761
- font-weight: normal;
762
- text-transform: uppercase; }
763
- .dops-card-section .dops-card-section-orient-vertical .dops-card-section-label {
764
- margin-bottom: 10px; }
765
- .dops-card-section .dops-card-section-orient-horizontal .dops-card-section-label {
766
- float: left;
767
- width: 30%; }
768
- @media all and (max-width: 590px) {
769
- .dops-card-section .dops-card-section-orient-horizontal .dops-card-section-label {
770
- margin-bottom: 10px;
771
- float: none;
772
- width: 100%; } }
773
- .dops-card-section .dops-card-section-orient-horizontal .dops-card-section-content {
774
- float: right;
775
- width: 70%; }
776
- @media all and (max-width: 590px) {
777
- .dops-card-section .dops-card-section-orient-horizontal .dops-card-section-content {
778
- float: none;
779
- width: 100%; } }
780
-
781
- .dops-card-footer {
782
- background: #f9f9f9;
783
- padding: 15px 20px; }
784
-
785
- .dops-card-icon {
786
- float: right;
787
- text-transform: capitalize; }
788
- .dops-card-icon .genericon {
789
- border-radius: 50%;
790
- width: 16px;
791
- height: 16px;
792
- margin-right: 10px;
793
- color: #fff;
794
- background: #81bf16; }
795
796
.dops-card__link-indicator {
797
color: #c8d7e1;
@@ -808,322 +1105,580 @@ a.dops-card:focus {
808
outline: 0; }
809
a.dops-card:focus .dops-card__link-indicator {
810
color: tint(#00aadc, 20%); }
811
- .dops-button {
812
- background: white;
813
- border-color: #c8d7e1;
814
- border-style: solid;
815
- border-width: 1px 1px 2px;
816
color: #2e4453;
817
- cursor: pointer;
818
- display: inline-block;
819
- margin: 0;
820
- outline: 0;
821
overflow: hidden;
822
- font-size: 14px;
823
- font-weight: 500;
824
- text-overflow: ellipsis;
825
- text-decoration: none;
826
- vertical-align: top;
827
box-sizing: border-box;
828
- font-size: 14px;
829
- line-height: 21px;
830
- border-radius: 4px;
831
- padding: 7px 14px 9px;
832
- -webkit-appearance: none;
833
- -moz-appearance: none;
834
- appearance: none; }
835
- .dops-button:hover {
836
- border-color: #a8bece;
837
- color: #2e4453; }
838
- .dops-button:active {
839
- border-width: 2px 1px 1px; }
840
- .dops-button:visited {
841
- color: #2e4453; }
842
- .dops-button[disabled], .dops-button:disabled {
843
- color: #e9eff3;
844
- background: white;
845
- border-color: #e9eff3;
846
- cursor: default; }
847
- .dops-button[disabled]:active, .dops-button:disabled:active {
848
- border-width: 1px 1px 2px; }
849
- .dops-button:focus {
850
- outline: 0;
851
- border-color: #00aadc;
852
- box-shadow: 0 0 0 2px #78dcfa; }
853
- .dops-button.is-compact {
854
- padding: 7px;
855
- color: #668eaa;
856
- font-size: 11px;
857
- line-height: 1;
858
- text-transform: uppercase; }
859
- .dops-button.is-compact:disabled {
860
- color: #e9eff3; }
861
- .dops-button.is-compact .gridicon {
862
- top: 4px;
863
- margin-top: -8px; }
864
- .dops-button.is-compact .gridicons-plus-small {
865
- margin-left: -4px; }
866
- .dops-button.is-compact .gridicons-plus-small:last-of-type {
867
- margin-left: 0; }
868
- .dops-button.is-compact .gridicons-plus-small + .gridicon {
869
- margin-left: -4px; }
870
- .dops-button.hidden {
871
- display: none; }
872
- .dops-button .gridicon {
873
- position: relative;
874
- top: 4px;
875
- margin-top: -2px;
876
- width: 18px;
877
- height: 18px; }
878
-
879
- .dops-button.is-primary {
880
- background: #00aadc;
881
- border-color: #0087be;
882
- color: white; }
883
- .dops-button.is-primary:hover, .dops-button.is-primary:focus {
884
- border-color: #005082;
885
- color: white; }
886
- .dops-button.is-primary[disabled], .dops-button.is-primary:disabled {
887
- background: #bceefd;
888
- border-color: #8cc9e2;
889
- color: white; }
890
- .dops-button.is-primary.is-compact {
891
color: white; }
892
-
893
- .dops-button.is-scary {
894
- color: #d94f4f; }
895
- .dops-button.is-scary:hover, .dops-button.is-scary:focus {
896
- border-color: #d94f4f; }
897
- .dops-button.is-scary:focus {
898
- box-shadow: 0 0 0 2px #eba3a3; }
899
- .dops-button.is-scary[disabled], .dops-button.is-scary:disabled {
900
- color: #f4cdcd;
901
- border-color: #e9eff3; }
902
-
903
- .dops-button.is-primary.is-scary {
904
- background: #d94f4f;
905
- border-color: #a02222;
906
- color: white; }
907
- .dops-button.is-primary.is-scary:hover, .dops-button.is-primary.is-scary:focus {
908
- border-color: #4c1010; }
909
- .dops-button.is-primary.is-scary[disabled], .dops-button.is-primary.is-scary:disabled {
910
- background: #eba3a3;
911
- border-color: #e48484; }
912
-
913
- .dops-button.is-borderless {
914
- border: none;
915
- color: #668eaa;
916
- padding-left: 0;
917
- padding-right: 0; }
918
- .dops-button.is-borderless:hover {
919
- color: #2e4453; }
920
- .dops-button.is-borderless:focus {
921
- box-shadow: none; }
922
- .dops-accessible-focus .dops-button.is-borderless:focus {
923
- outline: thin dotted; }
924
- .dops-button.is-borderless .gridicon {
925
- width: 24px;
926
- height: 24px;
927
- top: 6px; }
928
- .dops-button.is-borderless[disabled], .dops-button.is-borderless:disabled {
929
- color: #e9eff3;
930
background: white;
931
- cursor: default; }
932
- .dops-button.is-borderless[disabled]:active, .dops-button.is-borderless:disabled:active {
933
- border-width: 0; }
934
- .dops-button.is-borderless.is-scary {
935
- color: #d94f4f; }
936
- .dops-button.is-borderless.is-scary:hover, .dops-button.is-borderless.is-scary:focus {
937
- color: #a02222; }
938
- .dops-button.is-borderless.is-scary[disabled] {
939
- color: #f4cdcd; }
940
- .dops-button.is-borderless.is-compact {
941
- background: transparent;
942
- border-radius: 0; }
943
- .dops-button.is-borderless.is-compact .gridicon {
944
- width: 18px;
945
- height: 18px;
946
- top: 5px; }
947
- @keyframes appear {
948
- 0% {
949
- opacity: 0; }
950
- 100% {
951
- opacity: 1; } }
952
953
- .dops-foldable-card.dops-card {
954
- position: relative;
955
- transition: margin .15s linear;
956
- padding: 0; }
957
- .dops-foldable-card.dops-card:after {
958
- content: ".";
959
- display: block;
960
- height: 0;
961
- clear: both;
962
- visibility: hidden; }
963
- .dops-foldable-card.dops-card.is-expanded {
964
- margin-bottom: 8px; }
965
- .dops-foldable-card.dops-card .is-clickable {
966
- cursor: pointer; }
967
968
- .dops-foldable-card__header {
969
- min-height: 64px;
970
- width: 100%;
971
- padding: 16px;
972
- box-sizing: border-box;
973
display: -ms-flexbox;
974
display: flex;
975
- -ms-flex-align: center;
976
- align-items: center;
977
- -ms-flex-pack: justify;
978
- justify-content: space-between;
979
- position: relative; }
980
- .dops-foldable-card__header.has-border .dops-foldable-card__summary,
981
- .dops-foldable-card__header.has-border .dops-foldable-card__summary_expanded {
982
- margin-right: 48px; }
983
- .dops-foldable-card__header.has-border .dops-foldable-card__expand {
984
- border-left: 1px #f3f6f8 solid; }
985
- .dops-foldable-card.is-compact .dops-foldable-card__header {
986
- padding: 8px 16px;
987
- min-height: 40px; }
988
- .dops-foldable-card.is-expanded .dops-foldable-card__header {
989
- margin-bottom: 0px;
990
- height: inherit;
991
- min-height: 64px; }
992
- .dops-foldable-card.is-expanded.is-compact .dops-foldable-card__header {
993
- min-height: 40px; }
994
- .dops-foldable-card.is-disabled .dops-foldable-card__header {
995
- opacity: 0.2; }
996
997
- .dops-foldable-card__action {
998
- position: absolute;
999
- top: 0;
1000
- right: 0;
1001
- height: 100%;
1002
- background: none;
1003
- border: 0; }
1004
- .dops-foldable-card.is-expanded .dops-foldable-card__action {
1005
- height: 100%; }
1006
- .dops-foldable-card.is-disabled .dops-foldable-card__action {
1007
- cursor: default; }
1008
- .dops-accessible-focus .dops-foldable-card__action:focus {
1009
- outline: thin dotted; }
1010
1011
- button.dops-foldable-card__action {
1012
cursor: pointer;
1013
- outline: 0; }
1014
-
1015
- .dops-foldable-card__main {
1016
- max-width: calc( 100% - 36px);
1017
- display: block;
1018
- -ms-flex-align: center;
1019
- align-items: center;
1020
- width: 100%;
1021
- margin-right: 5px; }
1022
- @media (max-width: 480px) {
1023
- .dops-foldable-card__main {
1024
- -ms-flex: 1 1;
1025
- flex: 1 1; } }
1026
1027
- .dops-foldable-card__secondary {
1028
display: -ms-flexbox;
1029
display: flex;
1030
- -ms-flex-align: center;
1031
- align-items: center;
1032
- -ms-flex: 1 1;
1033
- flex: 1 1;
1034
- -ms-flex-pack: end;
1035
- justify-content: flex-end; }
1036
1037
- .dops-foldable-card__expand {
1038
- width: 48px; }
1039
- .dops-foldable-card__expand .gridicon {
1040
- fill: #87a6bc;
1041
- display: -ms-flexbox;
1042
- display: flex;
1043
- -ms-flex-align: center;
1044
- align-items: center;
1045
- width: 100%;
1046
- vertical-align: middle;
1047
- transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in; }
1048
- .dops-foldable-card.is-expanded .dops-foldable-card__expand .gridicon {
1049
- transform: rotate(180deg); }
1050
- .dops-foldable-card__expand .gridicon:hover {
1051
- fill: #87a6bc; }
1052
- .dops-foldable-card__expand:focus .gridicon, .dops-foldable-card__expand:hover .gridicon {
1053
- fill: #00aadc; }
1054
1055
- .dops-foldable-card__header-text {
1056
- font-size: 1.125rem;
1057
- width: 100%; }
1058
1059
- .dops-foldable-card__subheader {
1060
- margin-top: 0.125rem;
1061
- margin-bottom: 0.125rem;
1062
- font-size: 0.875rem;
1063
- color: #4f748e; }
1064
1065
- .dops-foldable-card__content {
1066
- display: none; }
1067
- .dops-foldable-card.is-expanded .dops-foldable-card__content {
1068
- display: block;
1069
- padding: 16px;
1070
- border-top: 1px solid #f3f6f8; }
1071
- .dops-foldable-card.is-compact .dops-foldable-card.is-expanded .dops-foldable-card__content {
1072
- padding: 8px; }
1073
- .dops-foldable-card.is-expanded .dops-foldable-card__content p:first-child {
1074
- margin-top: 0; }
1075
- .dops-foldable-card.is-expanded .dops-foldable-card__content p:last-child {
1076
- margin-bottom: 0; }
1077
1078
- .dops-foldable-card__summary,
1079
- .dops-foldable-card__summary_expanded {
1080
- margin-right: 40px;
1081
- color: #87a6bc;
1082
- font-size: 12px;
1083
- transition: opacity 0.2s linear;
1084
- display: inline-block; }
1085
- .dops-foldable-card.has-expanded-summary .dops-foldable-card__summary, .dops-foldable-card.has-expanded-summary
1086
- .dops-foldable-card__summary_expanded {
1087
- transition: none;
1088
- -ms-flex: 2;
1089
- flex: 2;
1090
- text-align: right; }
1091
- @media (max-width: 480px) {
1092
- .dops-foldable-card__summary,
1093
- .dops-foldable-card__summary_expanded {
1094
- display: none; } }
1095
1096
- .dops-foldable-card__summary {
1097
- opacity: 1;
1098
- display: inline-block; }
1099
- .dops-foldable-card.is-expanded .dops-foldable-card__summary {
1100
- display: none; }
1101
- .has-expanded-summary .dops-foldable-card.is-expanded .dops-foldable-card__summary {
1102
- display: none; }
1103
1104
- .dops-foldable-card__summary_expanded {
1105
- display: none; }
1106
- .dops-foldable-card.is-expanded .dops-foldable-card__summary_expanded {
1107
- display: inline-block; }
1108
- /**
1109
- * "popover" theme for `component/tip`.
1110
- */
1111
- .dops-popover {
1112
- font-size: 11px;
1113
- z-index: 1000;
1114
- position: absolute;
1115
- top: 0;
1116
- left: 0 /*rtl:ignore*/;
1117
- right: auto /*rtl:ignore*/; }
1118
- .dops-popover .dops-popover__inner {
1119
- background-color: white;
1120
- border: 1px solid #c8d7e1;
1121
- border-radius: 4px;
1122
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 56px rgba(0, 0, 0, 0.075);
1123
text-align: center;
1124
- position: relative; }
1125
- .dops-popover .dops-popover__arrow {
1126
- border: 10px dashed #c8d7e1;
1127
height: 0;
1128
line-height: 0;
1129
position: absolute;
@@ -1300,1015 +1855,762 @@ button.dops-foldable-card__action {
1300
.dops-popover__hr {
1301
margin: 8px 0;
1302
background: #e9eff3; }
1303
- .dops-tooltip.dops-popover .dops-popover__arrow {
1304
- border-width: 6px; }
1305
-
1306
- .dops-tooltip.dops-popover.is-bottom-right .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow {
1307
- border-bottom-color: #3d596d;
1308
- top: 4px;
1309
- right: 10px; }
1310
- .dops-tooltip.dops-popover.is-bottom-right .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-bottom-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow::before {
1311
- display: none; }
1312
-
1313
- .dops-tooltip.dops-popover.is-bottom-right.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-error .dops-popover__arrow {
1314
- border-bottom-color: #d94f4f; }
1315
-
1316
- .dops-tooltip.dops-popover.is-bottom-right.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-warning .dops-popover__arrow {
1317
- border-bottom-color: #f0b849; }
1318
-
1319
- .dops-tooltip.dops-popover.is-bottom-right.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom.is-success .dops-popover__arrow {
1320
- border-bottom-color: #4ab866; }
1321
-
1322
- .dops-tooltip.dops-popover.is-top .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right .dops-popover__arrow {
1323
- border-top-color: #3d596d;
1324
- bottom: 4px;
1325
- right: 10px; }
1326
- .dops-tooltip.dops-popover.is-top .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-top-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-top-right .dops-popover__arrow::before {
1327
- display: none; }
1328
-
1329
- .dops-tooltip.dops-popover.is-top.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-error .dops-popover__arrow {
1330
- border-top-color: #d94f4f; }
1331
-
1332
- .dops-tooltip.dops-popover.is-top.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-warning .dops-popover__arrow {
1333
- border-top-color: #f0b849; }
1334
-
1335
- .dops-tooltip.dops-popover.is-top.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-top-right.is-success .dops-popover__arrow {
1336
- border-top-color: #4ab866; }
1337
-
1338
- .dops-tooltip.dops-popover.is-top .dops-popover__arrow, .dops-tooltip.dops-popover.is-bottom .dops-popover__arrow {
1339
- margin-left: -6px; }
1340
-
1341
- .dops-tooltip.dops-popover.is-left, .dops-tooltip.dops-popover.is-right {
1342
- padding-top: 0; }
1343
- .dops-tooltip.dops-popover.is-left .dops-popover__arrow, .dops-tooltip.dops-popover.is-right .dops-popover__arrow {
1344
- margin-top: -6px; }
1345
- .dops-tooltip.dops-popover.is-left .dops-popover__arrow::before, .dops-tooltip.dops-popover.is-right .dops-popover__arrow::before {
1346
- display: none; }
1347
- .dops-tooltip.dops-popover.is-left.is-error .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-error .dops-popover__arrow {
1348
- border-right-color: #d94f4f; }
1349
- .dops-tooltip.dops-popover.is-left.is-warning .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-warning .dops-popover__arrow {
1350
- border-right-color: #f0b849; }
1351
- .dops-tooltip.dops-popover.is-left.is-success .dops-popover__arrow, .dops-tooltip.dops-popover.is-right.is-success .dops-popover__arrow {
1352
- border-right-color: #4ab866; }
1353
1354
- .dops-tooltip.dops-popover.is-left .dops-popover__arrow {
1355
- margin-right: 4px;
1356
- border-left-color: #3d596d; }
1357
1358
- .dops-tooltip.dops-popover.is-right .dops-popover__arrow {
1359
- margin-left: 4px;
1360
- border-right-color: #3d596d; }
1361
1362
- .dops-tooltip.dops-popover .dops-popover__inner {
1363
- border: 0px;
1364
- box-shadow: none;
1365
- border-radius: 2px;
1366
- color: white;
1367
- background: #3d596d;
1368
- font-size: 12px;
1369
- padding: 6px 10px;
1370
text-align: left; }
1371
1372
- .dops-tooltip.dops-popover.is-error .dops-popover__inner {
1373
- background: #d94f4f; }
1374
-
1375
- .dops-tooltip.dops-popover.is-warning .dops-popover__inner {
1376
- background: #f0b849; }
1377
-
1378
- .dops-tooltip.dops-popover.is-success .dops-popover__inner {
1379
- background: #4ab866; }
1380
-
1381
- .dops-tooltip.dops-popover ul {
1382
- list-style: none;
1383
- margin: 0;
1384
padding: 0; }
1385
- .dops-tooltip.dops-popover ul li {
1386
- font-size: 11px;
1387
- font-weight: 100;
1388
- border: 0; }
1389
1390
- .dops-tooltip__hr {
1391
- margin: 8px 0;
1392
- background: #87a6bc; }
1393
- .dops-chart {
1394
- position: relative;
1395
box-sizing: border-box;
1396
- background-color: white;
1397
- padding: 8px 0 8px 20px; }
1398
1399
- .dops-chart .dops-chart__y-axis-markers {
1400
position: absolute;
1401
- top: 8px;
1402
- left: 0;
1403
right: 0;
1404
- height: 200px; }
1405
1406
- .dops-chart .dops-chart__y-axis-marker {
1407
- position: absolute;
1408
- top: 0;
1409
- width: 100%;
1410
- height: 1px;
1411
- border-top: 1px solid #e9eff3; }
1412
1413
- .dops-chart__bar-marker {
1414
- z-index: 1;
1415
- position: absolute;
1416
- top: 0;
1417
width: 100%;
1418
- height: 1px;
1419
- border-top: 1px solid rgba(233, 239, 243, 0.1); }
1420
-
1421
- .dops-chart__bar-marker.is-fifty,
1422
- .dops-chart__y-axis-label.is-fifty,
1423
- .dops-chart .dops-chart__y-axis-marker.is-fifty {
1424
- top: 50%; }
1425
1426
- .dops-chart__bar-marker.is-zero,
1427
- .dops-chart__y-axis-label.is-zero,
1428
- .dops-chart .dops-chart__y-axis-marker.is-zero {
1429
- top: 100%; }
1430
-
1431
- .dops-chart__y-axis {
1432
- position: relative;
1433
- float: right;
1434
- height: 200px;
1435
- padding: 0 20px 0 10px;
1436
- font-size: 11px;
1437
- color: #668eaa;
1438
- margin-bottom: 30px; }
1439
-
1440
- .dops-chart__y-axis-label {
1441
- position: absolute;
1442
- top: 0;
1443
- right: 20px;
1444
- text-align: right; }
1445
-
1446
- .dops-chart__y-axis-width-fix {
1447
- color: rgba(255, 255, 255, 0); }
1448
-
1449
- .dops-chart__x-axis {
1450
- position: relative;
1451
- font-size: 0;
1452
- padding: 5px 0;
1453
- min-height: 18px;
1454
- color: #3d596d; }
1455
-
1456
- .dops-chart__x-axis-label {
1457
- position: absolute;
1458
- display: inline-block;
1459
- vertical-align: top;
1460
- font-size: 11px;
1461
- text-align: center; }
1462
-
1463
- .dops-chart__x-axis-label::before {
1464
- content: '';
1465
- display: block;
1466
- position: absolute;
1467
- top: -4px;
1468
- left: 50%;
1469
- margin-left: -.5px;
1470
- width: 1px;
1471
- height: 5px;
1472
- background: #f3f6f8;
1473
- background-image: linear-gradient(to bottom, #f3f6f8 0%, #c8d7e1 100%); }
1474
-
1475
- .dops-chart__bars {
1476
- position: relative;
1477
- font-size: 0;
1478
- height: 200px;
1479
- text-align: center;
1480
- overflow: hidden;
1481
- display: -ms-flex;
1482
display: -ms-flexbox;
1483
- display: flex; }
1484
-
1485
- .dops-chart__bar {
1486
- text-align: center;
1487
- display: inline-block;
1488
- position: relative;
1489
- height: 200px;
1490
- -ms-flex-grow: 1;
1491
- -ms-flex-positive: 1;
1492
- flex-grow: 1;
1493
- -ms-flex-shrink: 1;
1494
- -ms-flex-negative: 1;
1495
- flex-shrink: 1; }
1496
- .dops-chart__bar.is-weekend {
1497
- background-color: rgba(233, 239, 243, 0.5); }
1498
- .dops-chart__bar:hover {
1499
- cursor: pointer;
1500
- background-color: rgba(233, 239, 243, 0.3); }
1501
- .dops-chart__bar.is-selected {
1502
- cursor: default;
1503
- background-color: rgba(240, 130, 30, 0.1); }
1504
1505
- .dops-chart__bar-section {
1506
- display: inline-block;
1507
- background-color: #0087be;
1508
- position: absolute;
1509
- top: 0;
1510
- right: 16%;
1511
- bottom: 0;
1512
- left: 16%;
1513
- z-index: 2; }
1514
- .dops-chart__bar:hover .dops-chart__bar-section.is-bar {
1515
- background-color: #00aadc; }
1516
- .dops-chart__bar.is-selected .dops-chart__bar-section.is-bar {
1517
- background-color: #f0821e; }
1518
- .dops-chart__bar-section.is-spacer {
1519
- z-index: 0;
1520
- background-color: rgba(255, 255, 255, 0); }
1521
- .dops-chart__bar-section.is-ghost::after {
1522
- content: "";
1523
- display: block;
1524
- position: absolute;
1525
- top: 160px;
1526
- bottom: 0;
1527
- left: 0;
1528
- z-index: 1;
1529
width: 100%;
1530
- height: 40px;
1531
- background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(233, 239, 243, 0.5)); }
1532
- .dops-chart__bar:hover .dops-chart__bar-section.is-ghost::after {
1533
- display: none; }
1534
-
1535
- .dops-chart__bar-section-inner {
1536
- background: #004069;
1537
- position: absolute;
1538
- right: 23.33%;
1539
- bottom: 0;
1540
- left: 23.33%; }
1541
- .dops-chart__bar.is-selected .dops-chart__bar-section-inner {
1542
- background-color: #d54e21; }
1543
1544
- .dops-chart__legend {
1545
- margin-bottom: -8px; }
1546
- .dops-chart__legend:after {
1547
- content: ".";
1548
- display: block;
1549
- height: 0;
1550
- clear: both;
1551
- visibility: hidden; }
1552
1553
- .dops-chart__legend .dops-chart__legend-options {
1554
- float: right;
1555
- color: #537994;
1556
- list-style-type: none;
1557
- margin: 0;
1558
- font-size: 11px;
1559
- text-transform: uppercase;
1560
- letter-spacing: 0.1em; }
1561
- @media (max-width: 480px) {
1562
- .dops-chart__legend .dops-chart__legend-options {
1563
- width: 100%; } }
1564
1565
- .dops-chart__legend-option {
1566
- display: inline;
1567
- text-align: left; }
1568
- @media (max-width: 480px) {
1569
- .dops-chart__legend-option {
1570
- width: 50%;
1571
- display: inline-block; } }
1572
1573
- .dops-chart__legend-label {
1574
- display: inline-block;
1575
- padding: 12px 19px 10px 20px; }
1576
- .dops-chart__legend-label.is-selectable {
1577
- cursor: pointer; }
1578
- .dops-chart__legend-label.is-selectable:focus, .dops-chart__legend-label.is-selectable:hover {
1579
- color: tint(#00aadc, 20%); }
1580
@media (max-width: 480px) {
1581
- .dops-chart__legend-label {
1582
- display: block; } }
1583
-
1584
- .dops-chart__legend-option .dops-chart__legend-color {
1585
- width: 10px;
1586
- height: 10px;
1587
- background: #0087be;
1588
- display: inline-block;
1589
- border-radius: 1px;
1590
- vertical-align: top;
1591
- margin: 3px 5px 3px 8px; }
1592
-
1593
- @media (max-width: 480px) {
1594
- .dops-chart__legend-option:first-child .dops-chart__legend-color {
1595
- margin-left: 2px; } }
1596
-
1597
- .dops-chart__legend-color.is-dark-blue {
1598
- background: #004069; }
1599
-
1600
- .dops-chart__legend-option .dops-chart__legend-checkbox {
1601
- margin: 0;
1602
- float: none;
1603
- vertical-align: top; }
1604
1605
- .dops-chart__empty {
1606
- position: absolute;
1607
- top: 0;
1608
- right: 0;
1609
- bottom: 0;
1610
- left: 0;
1611
- text-align: center;
1612
- font-size: 14px;
1613
- line-height: 24px;
1614
- clear: both;
1615
- z-index: 1; }
1616
1617
- .dops-chart__empty_notice {
1618
position: relative;
1619
- top: 97px;
1620
- padding: 11px 24px;
1621
- margin-bottom: 24px;
1622
border-radius: 1px;
1623
- background: #fff;
1624
box-sizing: border-box;
1625
font-size: 14px;
1626
- line-height: 1.4285;
1627
- animation: appear .3s ease-in-out;
1628
- box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
1629
- @media (min-width: 661px) {
1630
- .dops-chart__empty_notice {
1631
- padding: 13px 48px;
1632
- font-size: inherit; }
1633
- .dops-chart__empty_notice::before {
1634
- -webkit-font-smoothing: antialiased;
1635
- -moz-osx-font-smoothing: grayscale;
1636
- display: inline-block;
1637
- vertical-align: middle;
1638
- font: normal 16px/1 'Noticons';
1639
- content: '\F456';
1640
- position: absolute;
1641
- top: 23px;
1642
- left: 20px;
1643
- margin: -12px 0px 0 -8px;
1644
- font-size: 24px;
1645
- line-height: 1; } }
1646
-
1647
- .dops-chart__tooltip .dops-popover__inner {
1648
- width: 230px;
1649
- text-align: left; }
1650
- .dops-chart__tooltip .dops-popover__inner ul {
1651
- list-style: none;
1652
- margin: 0;
1653
- padding: 0; }
1654
- .dops-chart__tooltip .dops-popover__inner ul:after {
1655
- content: ".";
1656
display: block;
1657
- height: 0;
1658
- clear: both;
1659
- visibility: hidden; }
1660
- .dops-chart__tooltip .dops-popover__inner ul li {
1661
- font-size: 11px;
1662
- text-transform: uppercase;
1663
- font-weight: 100;
1664
- height: 24px;
1665
- letter-spacing: 0.1em;
1666
- border: 0;
1667
- margin-bottom: 0; }
1668
- .dops-chart__tooltip .dops-popover__inner ul li .dops-wrapper {
1669
- display: block;
1670
- line-height: inherit;
1671
- line-height: 24px;
1672
- clear: both; }
1673
- .dops-chart__tooltip .dops-popover__inner ul li .value {
1674
- text-align: right;
1675
- float: right;
1676
- min-width: 22px;
1677
- color: #c8d7e1; }
1678
- .dops-chart__tooltip .dops-popover__inner ul li .label {
1679
- display: block;
1680
- overflow: hidden;
1681
- word-break: break-all;
1682
- vertical-align: baseline; }
1683
- .dops-chart__tooltip .dops-popover__inner ul li .gridicon {
1684
- vertical-align: middle;
1685
- margin-right: 6px;
1686
- margin-top: -3px; }
1687
1688
- .dops-chart__tooltip.is-streak {
1689
- margin-top: -5px;
1690
- height: 35px; }
1691
- .dops-chart__tooltip.is-streak .dops-popover__arrow::before {
1692
- left: 85px;
1693
- top: 30px; }
1694
- .dops-chart__tooltip.is-streak .dops-popover__inner {
1695
- width: 160px;
1696
position: relative;
1697
- top: -10px; }
1698
- .dops-chart__tooltip.is-streak .dops-popover__inner li {
1699
- height: 14px; }
1700
- .dops-chart__tooltip.is-streak .dops-popover__inner li .label {
1701
- width: 100%;
1702
- float: left;
1703
- text-align: center; }
1704
- .rtl .dops-chart__tooltip.is-streak .dops-popover__inner li .label {
1705
- font-size: 11px; }
1706
- .dops-chart__tooltip.is-streak .dops-popover__inner li .label .post-count {
1707
- font-weight: bold; }
1708
- .dops-chart__tooltip.is-streak .dops-popover__inner li .value {
1709
- float: none; }
1710
1711
- .dops-chart__tooltip .dops-module-content-list-item.is-date-label {
1712
- font-size: 11px;
1713
- margin-bottom: 2px;
1714
- text-transform: uppercase;
1715
- font-weight: bold;
1716
- border-bottom: 1px solid #426177;
1717
- padding-bottom: 2px; }
1718
1719
- .dops-chart__tooltip .dops-module-content-list-item.is-published-item {
1720
- height: 19px; }
1721
- .dops-chart__tooltip .dops-module-content-list-item.is-published-item .label {
1722
- text-transform: none;
1723
- color: #c8d7e1;
1724
- overflow: hidden;
1725
- letter-spacing: 0;
1726
- height: 19px; }
1727
- .dops-chart__tooltip .dops-module-content-list-item.is-published-item .value {
1728
- width: 0;
1729
- min-width: 0; }
1730
- .dops-chart__tooltip .dops-module-content-list-item.is-published-item .value::before {
1731
- content: '';
1732
- position: relative;
1733
- background-image: linear-gradient(to right, rgba(61, 89, 109, 0) 0%, rgba(61, 89, 109, 0.5), #3d596d);
1734
- left: -30px;
1735
- width: 30px;
1736
- height: 24px;
1737
- display: block; }
1738
- @keyframes appear {
1739
- 0% {
1740
- opacity: 0; }
1741
- 100% {
1742
- opacity: 1; } }
1743
1744
- .dops-notice {
1745
- display: -ms-flexbox;
1746
- display: flex;
1747
- -ms-flex-direction: column;
1748
- flex-direction: column;
1749
- position: relative;
1750
- width: 100%;
1751
- margin-bottom: 24px;
1752
- background: #e9eff3;
1753
- box-sizing: border-box;
1754
- animation: appear .3s ease-in-out; }
1755
- @media (min-width: 481px) {
1756
- .dops-notice {
1757
- -ms-flex-direction: row;
1758
- flex-direction: row; } }
1759
- .dops-notice.is-success {
1760
- background: #4ab866; }
1761
- .dops-notice.is-warning {
1762
- background: #f0b849; }
1763
- .dops-notice.is-error {
1764
- background: #d94f4f; }
1765
- .dops-notice.is-info {
1766
- background: #0087be; }
1767
- .dops-notice.is-success, .dops-notice.is-error, .dops-notice.is-warning, .dops-notice.is-info {
1768
- color: white; }
1769
- .dops-notice.is-success .dops-notice__text a, .dops-notice.is-error .dops-notice__text a, .dops-notice.is-warning .dops-notice__text a, .dops-notice.is-info .dops-notice__text a {
1770
- color: white; }
1771
- .dops-notice.is-success .dops-notice__dismiss, .dops-notice.is-error .dops-notice__dismiss, .dops-notice.is-warning .dops-notice__dismiss, .dops-notice.is-info .dops-notice__dismiss {
1772
- color: white; }
1773
- .dops-notice.is-basic {
1774
- background: white;
1775
- color: #87a6bc;
1776
- box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
1777
- .dops-notice.is-basic .dops-notice__dismiss:focus {
1778
- box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px #e9eff3; }
1779
- @media (min-width: 661px) {
1780
- .dops-notice.is-basic:before {
1781
- display: none; } }
1782
1783
- .dops-notice__icon {
1784
- position: absolute;
1785
- top: 0;
1786
- left: 0;
1787
- display: -ms-flexbox;
1788
- display: flex;
1789
- -ms-flex-negative: 0;
1790
- flex-shrink: 0;
1791
- width: 18px;
1792
- height: 18px;
1793
- padding: 14px 16px; }
1794
- @media (min-width: 481px) {
1795
- .dops-notice__icon {
1796
- position: relative;
1797
- padding: 13px 0 13px 16px;
1798
- width: 24px;
1799
- height: 24px; } }
1800
1801
- .dops-notice__content {
1802
- display: -ms-flexbox;
1803
- display: flex;
1804
- -ms-flex-positive: 1;
1805
- flex-grow: 1;
1806
- padding: 14px 48px;
1807
- font-size: 12px; }
1808
- @media (min-width: 481px) {
1809
- .dops-notice__content {
1810
- font-size: 14px;
1811
- padding: 13px; } }
1812
1813
- .dops-notice__text {
1814
- max-width: 680px; }
1815
- .dops-notice__text a {
1816
- text-decoration: underline; }
1817
- .dops-notice__text ul {
1818
- margin-bottom: 0;
1819
- margin-left: 0; }
1820
- .dops-notice__text li {
1821
- margin-left: 2em;
1822
- margin-top: 0.5em; }
1823
- .dops-notice__text p {
1824
- margin-bottom: 0;
1825
- margin-top: 0.5em; }
1826
- .dops-notice__text p:first-child {
1827
- margin-top: 0; }
1828
1829
- .dops-notice__button {
1830
- cursor: pointer;
1831
- margin-left: 0.428em; }
1832
1833
- .dops-notice__dismiss {
1834
position: absolute;
1835
- top: 0;
1836
right: 0;
1837
- display: -ms-flexbox;
1838
- display: flex;
1839
- -ms-flex-negative: 0;
1840
- flex-shrink: 0;
1841
- padding: 14px 16px;
1842
- cursor: pointer;
1843
- color: #87a6bc; }
1844
- .dops-notice__dismiss .gridicon {
1845
- width: 18px;
1846
- height: 18px; }
1847
- @media (min-width: 481px) {
1848
- .dops-notice__dismiss {
1849
- position: relative;
1850
- padding: 13px 16px; }
1851
- .dops-notice__dismiss .gridicon {
1852
- width: 24px;
1853
- height: 24px; } }
1854
- .dops-notice__dismiss:hover, .dops-notice__dismiss:focus {
1855
- color: #2e4453; }
1856
- .dops-notice .dops-notice__dismiss {
1857
- color: #87a6bc;
1858
- opacity: 0.85; }
1859
- .dops-notice .dops-notice__dismiss:hover, .dops-notice .dops-notice__dismiss:focus {
1860
- opacity: 1; }
1861
1862
- a.dops-notice__action {
1863
display: -ms-flexbox;
1864
- display: flex;
1865
- -ms-flex-pack: center;
1866
- justify-content: center;
1867
- -ms-flex-negative: 0;
1868
- flex-shrink: 0;
1869
-ms-flex-positive: 1;
1870
flex-grow: 1;
1871
- box-sizing: border-box;
1872
- margin: 0 8px 8px 8px;
1873
- padding: 8px;
1874
- border-radius: 3px;
1875
- cursor: pointer;
1876
- font-size: 12px;
1877
- font-weight: 400;
1878
- text-decoration: none;
1879
- white-space: nowrap;
1880
- background: #e3eaef; }
1881
- @media (min-width: 481px) {
1882
- a.dops-notice__action {
1883
- -ms-flex-negative: 1;
1884
- flex-shrink: 1;
1885
- -ms-flex-positive: 0;
1886
- flex-grow: 0;
1887
- -ms-flex-align: center;
1888
- align-items: center;
1889
- border-radius: 0;
1890
- font-size: 14px;
1891
- margin: 0 0 0 auto;
1892
- padding: 13px 16px; }
1893
- a.dops-notice__action .gridicon {
1894
- width: 24px;
1895
- height: 24px; } }
1896
- .is-success a.dops-notice__action,
1897
- .is-error a.dops-notice__action,
1898
- .is-warning a.dops-notice__action,
1899
- .is-info a.dops-notice__action {
1900
- color: white; }
1901
- .is-success a.dops-notice__action {
1902
- background: #338247; }
1903
- .is-error a.dops-notice__action {
1904
- background: #b52727; }
1905
- .is-warning a.dops-notice__action {
1906
- background: #da9712; }
1907
- .is-info a.dops-notice__action {
1908
- background: #005172; }
1909
- a.dops-notice__action .gridicon {
1910
- margin-left: 8px;
1911
- opacity: 0.7;
1912
- width: 18px;
1913
- height: 18px; }
1914
- a.dops-notice__action:hover, a.dops-notice__action:focus {
1915
- background: rgba(255, 255, 255, 0.2); }
1916
-
1917
- .dops-notice.is-compact {
1918
- display: -ms-inline-flexbox;
1919
- display: inline-flex;
1920
- -ms-flex-wrap: nowrap;
1921
- flex-wrap: nowrap;
1922
- -ms-flex-direction: row;
1923
- flex-direction: row;
1924
- width: auto;
1925
- border-radius: 2px;
1926
- min-height: 20px;
1927
- margin: 0;
1928
- padding: 0;
1929
- text-decoration: none;
1930
- text-transform: none;
1931
- vertical-align: middle; }
1932
- .dops-notice.is-compact.is-success, .dops-notice.is-compact.is-error, .dops-notice.is-compact.is-warning, .dops-notice.is-compact.is-info {
1933
- color: white; }
1934
- .dops-notice.is-compact .dops-notice__content {
1935
- font-size: 12px;
1936
- padding: 6px 8px; }
1937
- .dops-notice.is-compact .dops-notice__text {
1938
- line-height: 1; }
1939
- .dops-notice.is-compact .dops-notice__icon {
1940
- position: relative;
1941
- -ms-flex-item-align: center;
1942
- -ms-grid-row-align: center;
1943
- align-self: center;
1944
- -ms-flex-negative: 0;
1945
- flex-shrink: 0;
1946
- margin: 0 0 0 8px;
1947
- padding: 0;
1948
- width: 18px;
1949
- height: 18px;
1950
- vertical-align: middle; }
1951
- .dops-notice.is-compact .dops-notice__dismiss {
1952
- display: none; }
1953
- .dops-notice.is-compact a.dops-notice__action {
1954
- background: transparent;
1955
- display: inline-block;
1956
- margin: 0;
1957
- font-size: 12px;
1958
- font-weight: 600;
1959
- -ms-flex-item-align: center;
1960
- -ms-grid-row-align: center;
1961
- align-self: center;
1962
- margin-left: 16px;
1963
- padding: 0 8px;
1964
- text-decoration: underline;
1965
- text-transform: uppercase; }
1966
- .dops-notice.is-compact a.dops-notice__action:hover, .dops-notice.is-compact a.dops-notice__action:active, .dops-notice.is-compact a.dops-notice__action:focus {
1967
- background: transparent;
1968
- text-decoration: none; }
1969
- .dops-notice.is-compact a.dops-notice__action .gridicon {
1970
- margin-left: 8px;
1971
- width: 14px;
1972
- height: 14px;
1973
- vertical-align: sub;
1974
- opacity: 1; }
1975
- .dops-section-header.dops-card {
1976
- display: -ms-flexbox;
1977
- display: flex;
1978
- -ms-flex-wrap: wrap;
1979
- flex-wrap: wrap;
1980
- max-width: 100%;
1981
- padding-top: 0.6875rem;
1982
- padding-bottom: 0.6875rem;
1983
- position: relative; }
1984
- .dops-section-header.dops-card:after {
1985
- content: ''; }
1986
-
1987
- .dops-section-header__label {
1988
- display: -ms-flexbox;
1989
- display: flex;
1990
- -ms-flex-align: center;
1991
- align-items: center;
1992
- -ms-flex-positive: 1;
1993
- flex-grow: 1;
1994
- min-width: 0;
1995
- line-height: 1.75rem;
1996
- position: relative;
1997
- color: #87a6bc;
1998
- font-size: 0.875rem; }
1999
- .dops-section-header__label .dops-count {
2000
- margin-left: 0.5rem; }
2001
2002
- .dops-section-header__label-text {
2003
- position: relative;
2004
- margin-right: 0.5rem;
2005
- white-space: nowrap;
2006
- overflow: hidden;
2007
- width: 100%;
2008
- padding-right: 0.5rem;
2009
- min-width: 0; }
2010
- .dops-section-header__label-text:before {
2011
- content: '';
2012
display: block;
2013
position: absolute;
2014
- -webkit-touch-callout: none;
2015
- -webkit-user-select: none;
2016
- -moz-user-select: none;
2017
- -ms-user-select: none;
2018
- user-select: none;
2019
- pointer-events: none;
2020
- background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%);
2021
- top: 0px;
2022
- bottom: 0px;
2023
- right: 0px;
2024
- left: auto;
2025
- width: 8px;
2026
- height: auto; }
2027
- .has-card-badge .dops-section-header__label-text {
2028
- width: auto; }
2029
2030
- .dops-section-header__actions {
2031
- -ms-flex-positive: 0;
2032
- flex-grow: 0;
2033
- position: relative; }
2034
- .dops-section-header__actions:after {
2035
content: ".";
2036
display: block;
2037
height: 0;
2038
clear: both;
2039
visibility: hidden; }
2040
2041
- .section-header__actions .button {
2042
- float: left;
2043
- margin-right: 0.5rem; }
2044
- .section-header__actions .button:last-child {
2045
- margin-right: 0; }
2046
- .form-toggle[type="checkbox"] {
2047
- display: none; }
2048
2049
- .form-toggle__switch {
2050
- position: relative;
2051
- display: inline-block;
2052
- border-radius: 12px;
2053
- box-sizing: border-box;
2054
- padding: 2px;
2055
- width: 40px;
2056
- height: 24px;
2057
- background: #a8bece;
2058
- vertical-align: middle;
2059
- outline: 0;
2060
- cursor: pointer;
2061
- transition: all .4s ease, box-shadow 0; }
2062
- .form-toggle__switch:before, .form-toggle__switch:after {
2063
- position: relative;
2064
- display: block;
2065
- content: "";
2066
- width: 20px;
2067
- height: 20px; }
2068
- .form-toggle__switch:after {
2069
- left: 0;
2070
- border-radius: 50%;
2071
- background: white;
2072
- transition: all .2s ease; }
2073
- .form-toggle__switch:before {
2074
- display: none; }
2075
- .form-toggle__switch:hover {
2076
- background: #c8d7e1; }
2077
- .dops-accessible-focus .form-toggle__switch:focus, .form-toggle__switch:focus {
2078
- box-shadow: 0 0 0 2px #00aadc; }
2079
2080
- .form-toggle__label {
2081
- cursor: pointer;
2082
- width: auto;
2083
- float: none; }
2084
2085
- .dops-accessible-focus .form-toggle:focus + .form-toggle__label .form-toggle__switch {
2086
- box-shadow: 0 0 0 2px #00aadc; }
2087
2088
- .dops-accessible-focus .form-toggle:focus:checked + .form-toggle__label .form-toggle__switch {
2089
- box-shadow: 0 0 0 2px #78dcfa; }
2090
2091
- .form-toggle:checked + .form-toggle__label .form-toggle__switch {
2092
- background: #00aadc; }
2093
- .form-toggle:checked + .form-toggle__label .form-toggle__switch:after {
2094
- left: 16px; }
2095
2096
- .form-toggle:checked:hover + .form-toggle__label .form-toggle__switch {
2097
- background: #78dcfa; }
2098
2099
- .form-toggle:disabled + .form-toggle__label .form-toggle__switch, .form-toggle:disabled:hover + .form-toggle__label .form-toggle__switch {
2100
- background: #e9eff3; }
2101
2102
- .form-toggle.is-toggling + .form-toggle__label .form-toggle__switch {
2103
- background: #00aadc; }
2104
2105
- .form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch {
2106
- background: #c8d7e1; }
2107
2108
- .form-toggle.is-compact + .form-toggle__label .form-toggle__switch {
2109
- border-radius: 8px;
2110
- width: 24px;
2111
- height: 16px; }
2112
- .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:before, .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:after {
2113
- width: 12px;
2114
- height: 12px; }
2115
2116
- .form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch:after {
2117
- left: 8px; }
2118
- .dops-text-input.dops-text-input {
2119
- box-sizing: border-box;
2120
- margin: 0;
2121
- padding: 7px 14px;
2122
- width: 100%;
2123
- color: #2e4453;
2124
- font-size: 16px;
2125
- line-height: 1.5;
2126
- border: 1px solid #c8d7e1;
2127
- background-color: white;
2128
- transition: all .15s ease-in-out;
2129
- box-shadow: none; }
2130
- .dops-text-input.dops-text-input::-webkit-input-placeholder {
2131
- color: #87a6bc; }
2132
- .dops-text-input.dops-text-input::-moz-placeholder {
2133
- color: #87a6bc; }
2134
- .dops-text-input.dops-text-input:-ms-input-placeholder {
2135
- color: #87a6bc; }
2136
- .dops-text-input.dops-text-input::placeholder {
2137
- color: #87a6bc; }
2138
- .dops-text-input.dops-text-input:hover {
2139
- border-color: #a8bece; }
2140
- .dops-text-input.dops-text-input:focus {
2141
- border-color: #0087be;
2142
- outline: none;
2143
- box-shadow: 0 0 0 2px #78dcfa; }
2144
- .dops-text-input.dops-text-input:focus::-ms-clear {
2145
- display: none; }
2146
- .dops-text-input.dops-text-input:disabled {
2147
- background: #f3f6f8;
2148
- border-color: #e9eff3;
2149
- color: #a8bece;
2150
- -webkit-text-fill-color: #a8bece; }
2151
- .dops-text-input.dops-text-input:disabled:hover {
2152
- cursor: default; }
2153
- .dops-text-input.dops-text-input:disabled::-webkit-input-placeholder {
2154
- color: #a8bece; }
2155
- .dops-text-input.dops-text-input:disabled::-moz-placeholder {
2156
- color: #a8bece; }
2157
- .dops-text-input.dops-text-input:disabled:-ms-input-placeholder {
2158
- color: #a8bece; }
2159
- .dops-text-input.dops-text-input:disabled::placeholder {
2160
- color: #a8bece; }
2161
2162
- .dops-text-input.dops-text-input {
2163
- -webkit-appearance: none; }
2164
- .dops-text-input.dops-text-input.is-valid {
2165
- border-color: #4ab866; }
2166
- .dops-text-input.dops-text-input.is-valid:hover {
2167
- border-color: #3a9551; }
2168
- .dops-text-input.dops-text-input.is-error {
2169
- border-color: #d94f4f; }
2170
- .dops-text-input.dops-text-input.is-error:hover {
2171
- border-color: #c92c2c; }
2172
- .dops-text-input.dops-text-input:focus.is-valid {
2173
- box-shadow: 0 0 0 2px #caead2; }
2174
- .dops-text-input.dops-text-input:focus.is-valid:hover {
2175
- box-shadow: 0 0 0 2px #a6dcb3; }
2176
- .dops-text-input.dops-text-input:focus.is-error {
2177
- box-shadow: 0 0 0 2px #f9e2e2; }
2178
- .dops-text-input.dops-text-input:focus.is-error:hover {
2179
- box-shadow: 0 0 0 2px #f0b8b8; }
2180
- .dops-textarea {
2181
- box-sizing: border-box;
2182
- margin: 0;
2183
- padding: 0.4375rem 0.875rem;
2184
- min-height: 5.75rem;
2185
- width: 100%;
2186
- color: #2e4453;
2187
- font-size: 1rem;
2188
- line-height: 1.5;
2189
- border: 1px solid #c8d7e1;
2190
- background-color: white;
2191
- transition: all .15s ease-in-out;
2192
- box-shadow: none; }
2193
- .dops-textarea::-webkit-input-placeholder {
2194
- color: #87a6bc; }
2195
- .dops-textarea::-moz-placeholder {
2196
- color: #87a6bc; }
2197
- .dops-textarea:-ms-input-placeholder {
2198
- color: #87a6bc; }
2199
- .dops-textarea::placeholder {
2200
- color: #87a6bc; }
2201
- .dops-textarea:hover {
2202
- border-color: #a8bece; }
2203
- .dops-textarea:focus {
2204
- border-color: #0087be;
2205
- outline: none;
2206
- box-shadow: 0 0 0 2px #78dcfa; }
2207
- .dops-textarea:focus::-ms-clear {
2208
- display: none; }
2209
- .dops-textarea:disabled {
2210
- background: #f3f6f8;
2211
- border-color: #e9eff3;
2212
- color: #a8bece;
2213
- -webkit-text-fill-color: #a8bece; }
2214
- .dops-textarea:disabled:hover {
2215
- cursor: default; }
2216
- .dops-textarea:disabled::-webkit-input-placeholder {
2217
- color: #a8bece; }
2218
- .dops-textarea:disabled::-moz-placeholder {
2219
- color: #a8bece; }
2220
- .dops-textarea:disabled:-ms-input-placeholder {
2221
- color: #a8bece; }
2222
- .dops-textarea:disabled::placeholder {
2223
- color: #a8bece; }
2224
- .dops-clipboard-button-input {
2225
- position: relative;
2226
- display: block; }
2227
- .dops-clipboard-button-input .dops-clipboard-button {
2228
- position: absolute;
2229
- top: 50%;
2230
- right: 4px;
2231
- transform: translateY(-50%);
2232
- overflow: visible; }
2233
- .dops-clipboard-button-input .dops-clipboard-button:not(:disabled)::before {
2234
content: '';
2235
- display: block;
2236
- position: absolute;
2237
- -webkit-touch-callout: none;
2238
- -webkit-user-select: none;
2239
- -moz-user-select: none;
2240
- -ms-user-select: none;
2241
- user-select: none;
2242
- pointer-events: none;
2243
- background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 90%);
2244
- top: 0px;
2245
- bottom: 0px;
2246
- right: 0px;
2247
- left: auto;
2248
- width: 16px;
2249
- height: auto;
2250
- right: calc( 100% + 1px); }
2251
- .dops-clipboard-button-input .dops-clipboard-button:focus::before {
2252
- right: calc( 100% + 3px); }
2253
- .dops-checkbox.dops-checkbox {
2254
- display: inline-block;
2255
- box-sizing: border-box;
2256
- margin: 2px 0 0;
2257
- padding: 7px 14px;
2258
- width: 16px;
2259
- height: 16px;
2260
- float: left;
2261
- outline: 0;
2262
- padding: 0;
2263
- box-shadow: none;
2264
- background-color: white;
2265
- border: 1px solid #c8d7e1;
2266
- color: #2e4453;
2267
- font-size: 16px;
2268
- line-height: 0;
2269
- text-align: center;
2270
- vertical-align: middle;
2271
- -webkit-appearance: none;
2272
- -moz-appearance: none;
2273
- appearance: none;
2274
- transition: all .15s ease-in-out;
2275
- clear: none;
2276
- cursor: pointer; }
2277
- .dops-checkbox.dops-checkbox:checked:before {
2278
- content: '\F147';
2279
- margin: -3px 0 0 -4px;
2280
- float: left;
2281
- display: inline-block;
2282
- vertical-align: middle;
2283
- width: 16px;
2284
- font-size: 20px;
2285
- -webkit-font-smoothing: antialiased;
2286
- -moz-osx-font-smoothing: grayscale;
2287
- speak: none;
2288
- color: #00aadc; }
2289
- .dops-checkbox.dops-checkbox:disabled:checked:before {
2290
- color: #a8bece; }
2291
- .dops-checkbox.dops-checkbox:hover {
2292
- border-color: #a8bece; }
2293
- .dops-checkbox.dops-checkbox:focus {
2294
- border-color: #0087be;
2295
- outline: none;
2296
- box-shadow: 0 0 0 2px #78dcfa; }
2297
- .dops-checkbox.dops-checkbox:disabled {
2298
- background: #f3f6f8;
2299
- border-color: #e9eff3;
2300
- color: #a8bece;
2301
- opacity: 1; }
2302
- .dops-checkbox.dops-checkbox:disabled:hover {
2303
- cursor: default; }
2304
- .dops-checkbox.dops-checkbox + span {
2305
- display: block;
2306
- margin-left: 24px; }
2307
- .dops-external-link .gridicons-external {
2308
- color: currentColor;
2309
- margin-left: 0.5rem;
2310
- top: 0.125rem;
2311
- position: relative; }
2312
.notices-list {
2313
overflow: hidden; }
2314
.notices-list.is-pinned {
1
+ .dops-button {
2
+ background: white;
3
+ border-color: #c8d7e1;
4
+ border-style: solid;
5
+ border-width: 1px 1px 2px;
6
+ color: #2e4453;
7
+ cursor: pointer;
8
+ display: inline-block;
9
+ margin: 0;
10
+ outline: 0;
11
+ overflow: hidden;
12
+ font-size: 14px;
13
+ font-weight: 500;
14
+ text-overflow: ellipsis;
15
+ text-decoration: none;
16
+ vertical-align: top;
17
+ box-sizing: border-box;
18
+ font-size: 14px;
19
+ line-height: 21px;
20
+ border-radius: 4px;
21
+ padding: 7px 14px 9px;
22
+ -webkit-appearance: none;
23
+ -moz-appearance: none;
24
+ appearance: none; }
25
+ .dops-button:hover {
26
+ border-color: #a8bece;
27
+ color: #2e4453; }
28
+ .dops-button:active {
29
+ border-width: 2px 1px 1px; }
30
+ .dops-button:visited {
31
+ color: #2e4453; }
32
+ .dops-button[disabled], .dops-button:disabled {
33
+ color: #e9eff3;
34
+ background: white;
35
+ border-color: #e9eff3;
36
+ cursor: default; }
37
+ .dops-button[disabled]:active, .dops-button:disabled:active {
38
+ border-width: 1px 1px 2px; }
39
+ .dops-button:focus {
40
+ outline: 0;
41
+ border-color: #00aadc;
42
+ box-shadow: 0 0 0 2px #78dcfa; }
43
+ .dops-button.is-compact {
44
+ padding: 7px;
45
+ color: #668eaa;
46
+ font-size: 11px;
47
+ line-height: 1;
48
+ text-transform: uppercase; }
49
+ .dops-button.is-compact:disabled {
50
+ color: #e9eff3; }
51
+ .dops-button.is-compact .gridicon {
52
+ top: 4px;
53
+ margin-top: -8px; }
54
+ .dops-button.is-compact .gridicons-plus-small {
55
+ margin-left: -4px; }
56
+ .dops-button.is-compact .gridicons-plus-small:last-of-type {
57
+ margin-left: 0; }
58
+ .dops-button.is-compact .gridicons-plus-small + .gridicon {
59
+ margin-left: -4px; }
60
+ .dops-button.hidden {
61
+ display: none; }
62
+ .dops-button .gridicon {
63
+ position: relative;
64
+ top: 4px;
65
+ margin-top: -2px;
66
+ width: 18px;
67
+ height: 18px; }
68
+
69
+ .dops-button.is-primary {
70
+ background: #00aadc;
71
+ border-color: #0087be;
72
+ color: white; }
73
+ .dops-button.is-primary:hover, .dops-button.is-primary:focus {
74
+ border-color: #005082;
75
+ color: white; }
76
+ .dops-button.is-primary[disabled], .dops-button.is-primary:disabled {
77
+ background: #bceefd;
78
+ border-color: #8cc9e2;
79
+ color: white; }
80
+ .dops-button.is-primary.is-compact {
81
+ color: white; }
82
+
83
+ .dops-button.is-scary {
84
+ color: #d94f4f; }
85
+ .dops-button.is-scary:hover, .dops-button.is-scary:focus {
86
+ border-color: #d94f4f; }
87
+ .dops-button.is-scary:focus {
88
+ box-shadow: 0 0 0 2px #eba3a3; }
89
+ .dops-button.is-scary[disabled], .dops-button.is-scary:disabled {
90
+ color: #f4cdcd;
91
+ border-color: #e9eff3; }
92
+
93
+ .dops-button.is-primary.is-scary {
94
+ background: #d94f4f;
95
+ border-color: #a02222;
96
+ color: white; }
97
+ .dops-button.is-primary.is-scary:hover, .dops-button.is-primary.is-scary:focus {
98
+ border-color: #4c1010; }
99
+ .dops-button.is-primary.is-scary[disabled], .dops-button.is-primary.is-scary:disabled {
100
+ background: #eba3a3;
101
+ border-color: #e48484; }
102
+
103
+ .dops-button.is-borderless {
104
+ border: none;
105
+ color: #668eaa;
106
+ padding-left: 0;
107
+ padding-right: 0; }
108
+ .dops-button.is-borderless:hover {
109
+ color: #2e4453; }
110
+ .dops-button.is-borderless:focus {
111
+ box-shadow: none; }
112
+ .dops-accessible-focus .dops-button.is-borderless:focus {
113
+ outline: thin dotted; }
114
+ .dops-button.is-borderless .gridicon {
115
+ width: 24px;
116
+ height: 24px;
117
+ top: 6px; }
118
+ .dops-button.is-borderless[disabled], .dops-button.is-borderless:disabled {
119
+ color: #e9eff3;
120
+ background: white;
121
+ cursor: default; }
122
+ .dops-button.is-borderless[disabled]:active, .dops-button.is-borderless:disabled:active {
123
+ border-width: 0; }
124
+ .dops-button.is-borderless.is-scary {
125
+ color: #d94f4f; }
126
+ .dops-button.is-borderless.is-scary:hover, .dops-button.is-borderless.is-scary:focus {
127
+ color: #a02222; }
128
+ .dops-button.is-borderless.is-scary[disabled] {
129
+ color: #f4cdcd; }
130
+ .dops-button.is-borderless.is-compact {
131
+ background: transparent;
132
+ border-radius: 0; }
133
+ .dops-button.is-borderless.is-compact .gridicon {
134
+ width: 18px;
135
+ height: 18px;
136
+ top: 5px; }
137
+ .dops-button-group .dops-button {
138
+ border-left-width: 0;
139
+ border-radius: 0; }
140
+ .dops-button-group .dops-button:focus {
141
+ position: relative;
142
+ z-index: z-index("button-group-parent", ".button-group .button:focus");
143
+ box-shadow: inset 1px 0 0 #00aadc, 0 0 0 2px #78dcfa; }
144
+ .dops-button-group .dops-button.is-primary:focus {
145
+ box-shadow: inset 1px 0 0 #005082, 0 0 0 2px #78dcfa; }
146
+ .dops-button-group .dops-button.is-scary:focus {
147
+ box-shadow: inset 1px 0 0 #d94f4f, 0 0 0 2px #eba3a3; }
148
+ .dops-button-group .dops-button.is-primary.is-scary:focus {
149
+ box-shadow: inset 1px 0 0 #761919, 0 0 0 2px #eba3a3; }
150
+ .dops-button-group .dops-button:first-child:focus {
151
+ box-shadow: 0 0 0 2px #78dcfa; }
152
+ .dops-button-group .dops-button.is-scary:first-child:focus {
153
+ box-shadow: 0 0 0 2px #eba3a3; }
154
+
155
+ .dops-button-group .dops-button:first-child {
156
+ border-left-width: 1px;
157
+ border-top-left-radius: 4px;
158
+ border-bottom-left-radius: 4px; }
159
+
160
+ .dops-button-group .dops-button:last-child {
161
+ border-top-right-radius: 4px;
162
+ border-bottom-right-radius: 4px; }
163
+
164
+ .dops-section-header .dops-button-group .dops-button {
165
+ margin-right: 0; }
166
.dops-count {
167
display: inline-block;
168
padding: 0.0625rem 0.375rem;
462
* @component Search
463
*/
464
.dops-search {
465
+ display: -ms-flexbox;
466
+ display: flex;
467
+ -ms-flex: 1 1 auto;
468
+ flex: 1 1 auto;
469
margin-bottom: 24px;
470
width: 60px;
471
height: 51px;
472
position: relative;
473
+ -ms-flex-align: center;
474
+ align-items: center;
475
+ z-index: 22;
476
+ transition: all 0.15s ease-in-out; }
477
+ .dops-search .dops-search__icon-navigation {
478
+ -ms-flex: 0 0 auto;
479
+ flex: 0 0 auto;
480
+ display: -ms-flexbox;
481
+ display: flex;
482
+ -ms-flex-align: center;
483
+ align-items: center;
484
+ background-color: white;
485
+ border-radius: inherit;
486
+ height: 100%; }
487
+ .dops-search .dops-search__open-icon,
488
+ .dops-search .dops-search__close-icon {
489
+ -ms-flex: 0 0 auto;
490
+ flex: 0 0 auto;
491
+ width: 50px;
492
z-index: 20;
493
color: #0087be;
494
cursor: pointer; }
495
+ .accessible-focus .dops-search .dops-search__open-icon:focus, .accessible-focus
496
+ .dops-search .dops-search__close-icon:focus {
497
outline: dotted 1px #0087be; }
498
+ .dops-search .dops-search__open-icon:hover {
499
color: #3d596d; }
500
+ .dops-search .dops-search__close-icon {
501
color: #3d596d;
502
opacity: 0;
503
transition: opacity .2s ease-in; }
504
+ .accessible-focus .dops-search.has-focus {
505
+ box-shadow: 0 0 0 1px #0087be, 0 0 0 4px #78dcfa; }
506
+
507
+ .dops-search.is-expanded-to-container {
508
margin-bottom: 0;
509
position: absolute;
510
+ display: -ms-flexbox;
511
+ display: flex;
512
+ height: 100%;
513
+ width: 50px;
514
top: 0;
515
+ right: 0; }
516
+ .dops-search.is-expanded-to-container .dops-search__input-fade {
517
+ position: relative;
518
+ -ms-flex: 1 1 auto;
519
+ flex: 1 1 auto;
520
+ display: -ms-flexbox;
521
+ display: flex; }
522
+ .dops-search.is-expanded-to-container .dops-search__input[type="search"] {
523
+ -ms-flex: 1 1 auto;
524
+ flex: 1 1 auto;
525
+ display: -ms-flexbox;
526
+ display: flex;
527
+ margin: 0;
528
+ box-shadow: none; }
529
530
.dops-search__input[type="search"] {
531
+ -ms-flex: 1 1 auto;
532
+ flex: 1 1 auto;
533
display: none;
534
z-index: 10;
535
top: 0;
536
border: none;
537
+ border-radius: inherit;
538
+ height: 100%;
539
background: white;
540
-moz-appearance: none;
541
appearance: none;
542
box-sizing: border-box;
543
+ padding: 0px;
544
+ -webkit-appearance: none; }
545
.dops-search__input[type="search"]::-webkit-search-cancel-button {
546
-webkit-appearance: none; }
547
.dops-search__input[type="search"]:focus {
549
border: none; }
550
551
.dops-search.is-open {
552
width: 100%; }
553
+ .dops-search.is-open .dops-search__open-icon {
554
+ color: #3d596d; }
555
+ .dops-search.is-open .dops-search__close-icon {
556
display: inline-block; }
557
.dops-search.is-open .dops-search__input,
558
+ .dops-search.is-open .dops-search__close-icon {
559
opacity: 1; }
560