diff --git a/app/app.js b/app/app.js index d62175f0..b2d81277 100644 --- a/app/app.js +++ b/app/app.js @@ -4,6 +4,7 @@ import loadInitializers from 'ember-load-initializers'; import config from 'ember-api-docs/config/environment'; import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros'; import 'ember-power-select/styles'; +import './assets/styles.css'; if (macroCondition(isDevelopingApp())) { importSync('./deprecation-workflow'); diff --git a/app/assets/styles.css b/app/assets/styles.css new file mode 100644 index 00000000..78312d99 --- /dev/null +++ b/app/assets/styles.css @@ -0,0 +1,355 @@ +/* stylelint-disable no-descending-specificity, selector-class-pattern */ + +html { + scroll-padding-top: var(--spacing-3); +} + +.article-title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.module-name { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: var(--spacing-1); + margin-bottom: 0; +} + +.access { + color: #fff; + background-color: var(--color-gray-600); + padding: 0.25rem var(--spacing-1); + font-size: var(--font-size-md); + border-radius: var(--radius); + vertical-align: middle; +} + +main a.edit-icon { + height: 1rem; + width: 16px; + display: inline-block; + background: none; +} + +.sidebar-container { + --sidebar-width: min-content; +} + +.es-sidebar-content .table-of-contents:first-child { + margin-block-start: 0; +} + +.table-of-contents { + list-style-type: none; + padding-left: 0; + font-size: var(--font-size-base); + font-weight: var(--font-weight-3); +} + +.sub-table-of-contents { + padding-left: var(--spacing-1); + font-size: var(--font-size-base); + font-weight: var(--font-weight-2); +} + +.sub-table-of-contents .sub-table-of-contents { + padding-left: var(--spacing-3); + margin-bottom: 0; +} + +.table-of-contents a:link { + background: none; +} + +.sub-table-of-contents .toc-item a { + display: block; + padding: var(--spacing-1); + border-radius: var(--radius); + line-height: var(--line-height-xs); + color: var(--color-gray-700); + border-left: 0 solid transparent; + transition: border-width 0.3s; +} + +.sub-table-of-contents .toc-item a:hover { + border-left: 4px solid var(--color-gray-400); + border-radius: 0; +} + +.sub-table-of-contents .toc-item.selected > a, +.sub-table-of-contents .toc-item > a.active { + border-left: 4px solid var(--color-brand-hc-dark); + border-radius: 0; +} + +.table-of-contents li { + margin: 3px 0; + list-style-type: none; + color: var(--color-gray-600); +} + +li.toc-heading { + margin-top: var(--spacing-4); + color: var(--color-gray-600); +} + +li.toc-heading:first-child { + margin-top: 0; +} + +.toc-private-toggle { + display: block; + margin-top: var(--spacing-2); +} + +.class-field-description--header { + display: flex; + align-items: center; + flex-wrap: wrap; + column-gap: var(--spacing-1); +} + +a.class-field-description--link { + margin-left: 0; + vertical-align: middle; + background: none; + cursor: pointer; +} + +a.class-field-description--link svg { + height: 18px; + fill: var(--color-gray-600); + transform: rotate(45deg); + vertical-align: middle; +} + +a.class-field-description--link:hover svg { + fill: var(--color-brand); +} + +.parameter, +.return { + display: flex; + gap: var(--spacing-1); +} + +.parameter dt, +.return dt { + font-weight: bold; +} + +dd { + margin: 0; +} + +.class-field-description .args { + font-weight: var(--font-weight-2); +} + +.parameter-type, +.class-field-description .return-type, +.return .return-type { + font-style: italic; + color: var(--color-gray-600); +} + +.on-this-page-wrapper .access-checkbox-list { + display: flex; + flex-direction: column; +} + +.on-this-page-wrapper .api-index-filter { + margin-top: var(--spacing-2); +} + +.on-this-page-wrapper ul { + margin-top: 0; +} + +section.method, +section.property, +section.event { + margin-bottom: var(--spacing-3); +} + +.whoops { + display: flex; + justify-content: center; + align-items: center; + padding: var(--spacing-6); +} + +.whoops img { + width: 240px; + margin: var(--spacing-2); +} + +.search-wrapper { + position: relative; +} + +.search-results { + position: absolute; + right: 0; + top: 100%; + width: 25vw; + min-width: 500px; + background-color: white; + color: black; + border-radius: 8px; + margin-top: 10px; + border: 2px solid var(--color-card-border); + overflow-x: auto; + max-height: 70dvh; + z-index: 1; +} + +@media (width <= 500px) { + .search-results { + width: 95dvw; + min-width: auto; + max-height: initial; + } +} + +.search-results--instructions, +.search-results--no-results, +.search-results--searching, +.search-results--group-header, +.search-results--result { + padding: 8px 16px; +} + +.search-results--result { + display: flex; + border-bottom: 1px solid var(--color-card-border); + gap: 10px; + font-size: 14px; +} + +.search-results--subcategory-column { + font-weight: bold; + max-width: 33%; + flex-basis: 33%; + overflow-wrap: break-word; +} + +.search-results--content { + flex: 1 0 0; +} + +.search-results--no-results { + color: var(--color-gray-600); +} + +.search-results--group-header { + background-color: var(--color-info); +} + +.visually-hidden, +.screen-reader-text { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Ember data uses styled elements in markdown blocks that conflict with the + default styles for blockquotes (because of ::before block that has an + absolutely positioned quote mark). + */ +blockquote[style]::before { + all: initial; +} + +/* Styles for tables (from markdown) + Should probably be upstreamed to ember-styleguide + */ +table { + text-align: left; + border-collapse: collapse; +} + +table tr { + border-bottom: 1px solid var(--color-gray-300); +} + +table th, +table td { + padding: var(--spacing-1); +} + +/* Taken from guidemaker for search + Should probably move to ember-styleguide + */ + +.es-navbar { + max-width: 100%; +} + +.search-input { + border-radius: 18px; + border: 2px solid var(--color-card-border); + line-height: 30px; + padding-left: 8px; + width: 100%; +} + +.powered-by-algolia { + display: flex; + justify-content: end; + margin: 8px; +} + +.powered-by-algolia a { + display: flex; +} + +@media (width >= 1008px) { + .navbar-list { + flex-grow: 1; + } +} + +/* End taken from guidemaker for search */ + +@media (width >= 845px) { + .es-header { + padding: 0 var(--spacing-4); + justify-content: start; + } + + .es-sidebar { + padding: var(--spacing-4); + background-color: var(--color-gray-200); + } + + .content { + margin-top: var(--spacing-4); + } +} + +@media (width <= 450px) { + .whoops { + flex-direction: column; + padding: var(--spacing-3); + } + + .whoops img { + width: 80%; + margin: var(--spacing-4); + } + + .whoops__message { + margin: var(--spacing-2); + text-align: center; + } +} diff --git a/app/components/table-of-contents.hbs b/app/components/table-of-contents.hbs index d8a8c5f0..22a2f92b 100644 --- a/app/components/table-of-contents.hbs +++ b/app/components/table-of-contents.hbs @@ -1,5 +1,5 @@