/* The "server is restarting" banner (services/outage). Bottom-pinned, and that is the whole point of its placement: `.update-notification` from ember-cli-new-version is fixed to the TOP with z-index 9999, and the restart that raises this banner is usually the same deploy that raises that one. Sharing the top edge would have this message covering the Reload button somebody needs to press. z-index stays below 9999 as a second line of defence. */ .outage-banner { position: fixed; z-index: 9000; right: 0; bottom: 0; left: 0; padding: 12px 16px; color: #8a6d3b; text-align: center; background-color: #fcf8e3; border-top: 1px solid #faebcc; } /*! Reset indents */ h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0 } ul, ol { padding-left: 0; margin-top: 0; margin-bottom: 0; } figure { margin: 0; } input, textarea { background-clip: padding-box; } button { cursor: pointer; } button[disabled] { cursor: not-allowed; opacity: 0.5; } /* Hide Arrows From Input Number */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance:textfield; } [disabled] { pointer-events: none !important; opacity: 0.5 !important; cursor: default !important; } input[disabled] { background-color: #eeeeee; } video:focus { outline: none; } /*https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone*/ /*Disable Auto Zoom in Input “Text” tag - Safari on iPhone*/ @supports (-webkit-overflow-scrolling: touch) { input { font-size: 16px !important; } } /* Font */ @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-Bold.eot'); src: local('Euclid Circular A Bold'), local('EuclidCircularA-Bold'), url('fonts/circular/EuclidCircularA-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-Bold.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-Bold.woff') format('woff'), url('fonts/circular/EuclidCircularA-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-Light.eot'); src: local('Euclid Circular A Light'), local('EuclidCircularA-Light'), url('fonts/circular/EuclidCircularA-Light.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-Light.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-Light.woff') format('woff'), url('fonts/circular/EuclidCircularA-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-BoldItalic.eot'); src: local('Euclid Circular A Bold Italic'), local('EuclidCircularA-BoldItalic'), url('fonts/circular/EuclidCircularA-BoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-BoldItalic.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-BoldItalic.woff') format('woff'), url('fonts/circular/EuclidCircularA-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-LightItalic.eot'); src: local('Euclid Circular A Light Italic'), local('EuclidCircularA-LightItalic'), url('fonts/circular/EuclidCircularA-LightItalic.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-LightItalic.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-LightItalic.woff') format('woff'), url('fonts/circular/EuclidCircularA-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-Regular.eot'); src: local('Euclid Circular A Regular'), local('EuclidCircularA-Regular'), url('fonts/circular/EuclidCircularA-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-Regular.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-Regular.woff') format('woff'), url('fonts/circular/EuclidCircularA-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-SemiBold.eot'); src: local('Euclid Circular A SemiBold'), local('EuclidCircularA-SemiBold'), url('fonts/circular/EuclidCircularA-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-SemiBold.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-SemiBold.woff') format('woff'), url('fonts/circular/EuclidCircularA-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-Medium.eot'); src: local('Euclid Circular A Medium'), local('EuclidCircularA-Medium'), url('fonts/circular/EuclidCircularA-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-Medium.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-Medium.woff') format('woff'), url('fonts/circular/EuclidCircularA-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-Italic.eot'); src: local('Euclid Circular A Italic'), local('EuclidCircularA-Italic'), url('fonts/circular/EuclidCircularA-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-RegularItalic.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-RegularItalic.woff') format('woff'), url('fonts/circular/EuclidCircularA-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-SemiBoldItalic.eot'); src: local('Euclid Circular A SemiBold Italic'), local('EuclidCircularA-SemiBoldItalic'), url('fonts/circular/EuclidCircularA-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-SemiBoldItalic.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-SemiBoldItalic.woff') format('woff'), url('fonts/circular/EuclidCircularA-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Euclid Circular A'; src: url('fonts/circular/EuclidCircularA-MediumItalic.eot'); src: local('Euclid Circular A Medium Italic'), local('EuclidCircularA-MediumItalic'), url('fonts/circular/EuclidCircularA-MediumItalic.eot?#iefix') format('embedded-opentype'), url('fonts/circular/EuclidCircularA-MediumItalic.woff2') format('woff2'), url('fonts/circular/EuclidCircularA-MediumItalic.woff') format('woff'), url('fonts/circular/EuclidCircularA-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } /* Signature */ @font-face { font-family: 'Ms Madi'; src: local('Ms Madi Regular'), local('MsMadi-Regular'), url('fonts/msmadi/MsMadi-Regular.woff2') format('woff2'), url('fonts/msmadi/MsMadi-Regular.woff') format('woff'), url('fonts/msmadi/MsMadi-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Document Text */ @font-face { font-family: 'Ubuntu'; src: url('fonts/ubuntu/ubuntu-italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Ubuntu'; src: url('fonts/ubuntu/ubuntu-bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Ubuntu'; src: url('fonts/ubuntu/ubuntu-bolditalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Ubuntu'; src: url('fonts/ubuntu/ubuntu-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Media */ /* Media queries are belong to the size of the device not the screen See max-devide vs max-device-width */ /*@custom-media --phone-viewport (max-width: 640px);*/ /* A window wide enough to carry a column the table can do without. Deliberately min-WIDTH, not min-device-width like the two above: a 1920 monitor running a half-width window has the device size and not the room, and the column it would add pushes the status cell off the edge. */ /*! Styles */ :root { font-weight: 400; font-size: 16px; line-height: 1.2; font-family: 'Euclid Circular A', sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: "icomoon"; src: url("fonts/icomoon/icomoon.eot?5314vf"); src: url("fonts/icomoon/icomoon.eot?5314vf#iefix") format("embedded-opentype"), url("fonts/icomoon/icomoon.ttf?5314vf") format("truetype"), url("fonts/icomoon/icomoon.woff?5314vf") format("woff"), url("fonts/icomoon/icomoon-f8be8c7a877487626e48ba46b5425c1e.svg?5314vf#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-image-cloud-line:before { content: "\e932"; } .icon-account-circle:before { content: "\e926"; color: #2da032; } .icon-alpha-x-circle:before { content: "\e927"; color: #2da032; } .icon-briefcase-account:before { content: "\e928"; color: #2da032; } .icon-calendar-month:before { content: "\e929"; color: #2da032; } .icon-domain:before { content: "\e92a"; color: #2da032; } .icon-file-check:before { content: "\e92b"; color: #4e4e4e; } .icon-format-text:before { content: "\e92c"; color: #2da032; } .icon-image-outline:before { content: "\e92d"; color: #1a7fad; } .icon-signature-freehand:before { content: "\e92e"; color: #4e4e4e; } .icon-stamper:before { content: "\e92f"; color: #4e4e4e; } .icon-text-subject:before { content: "\e930"; color: #e57a42; } .icon-water-outline:before { content: "\e931"; color: #1a7fad; } .icon-calendar:before { content: "\e921"; } .icon-delete_sweep:before { content: "\e918"; } .icon-edit:before { content: "\e919"; } .icon-empty-image:before { content: "\e91a"; color: #dbd5d5; } .icon-eraser:before { content: "\e91b"; } .icon-visibility:before { content: "\e91d"; } .icon-dropdown:before { content: "\e915"; } .icon-msg-done:before { content: "\e916"; color: #061f45; } .icon-search:before { content: "\e917"; } .icon-printer:before { content: "\e90f"; } .icon-email-unread:before { content: "\e910"; } .icon-email-read:before { content: "\e911"; } .icon-menu-chat:before { content: "\e900"; color: #4e4e4e; } .icon-menu-mail:before { content: "\e901"; color: #4e4e4e; } .icon-menu-sign:before { content: "\e902"; color: #4e4e4e; } .icon-menu-valut:before { content: "\e903"; color: #4e4e4e; } .icon-file_download:before { content: "\e923"; } .icon-arrow_forward:before { content: "\e922"; } .icon-icon-help:before { content: "\e920"; color: #4e4e4e; } .icon-account-badge:before { content: "\e91f"; } .icon-business:before { content: "\e91e"; } .icon-star:before { content: "\e912"; } .icon-cloud:before { content: "\e913"; } .icon-attach_file:before { content: "\e914"; } .icon-minus:before { content: "\e90a"; } .icon-arrow-right:before { content: "\e90d"; } .icon-arrow-left:before { content: "\e90e"; } .icon-arrow-up:before { content: "\e90b"; } .icon-arrow-down:before { content: "\e90c"; } .icon-plus:before { content: "\e909"; } .icon-folder-open:before { content: "\e907"; } .icon-folder:before { content: "\e908"; } .icon-clock-fill:before { content: "\e925"; } .icon-check-circle:before { content: "\e91c"; } .icon-dots:before { content: "\e905"; } .icon-close:before { content: "\e906"; } .icon-check:before { content: "\e904"; } .icon-clock:before { content: "\e94e"; } .icon-circle:before { content: "\e924"; } .badge { position: relative; display: inline-block; cursor: pointer; width: 12px; height: 12px; font-size: 12px; z-index: 2; } .badge__tooltip { position: absolute; width: 150px; background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: solid 0.5px #c7c7c7; color: #000; padding: 10px; font-size: 10px; transition: all 0.25s ease-in-out; opacity: 0; visibility: hidden; } .badge__tooltip--bottom-right { top: 100%; right: auto; left: 6px; } .badge__tooltip--bottom-left { top: 100%; left: auto; right: 6px; } .badge__tooltip--top-right { bottom: 100%; right: auto; left: 6px; } .badge__tooltip--top-left { bottom: 100%; left: auto; right: 6px; } .badge:hover .badge__tooltip { opacity: 1; visibility: visible; } .public-promo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .public__container { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 14px; padding: 20px; } /* The panel's width is not only the panel's concern: `.container` reserves exactly this much room on its left, and the two must never be able to disagree. One number, read by both — and re-pointed as a whole on `.page` when the panel collapses, so the offset moves with the panel instead of being a second hard-coded 175 somebody has to remember. */ :root { --nav-width: 175px; --nav-width-collapsed: 64px; } .nav { box-sizing: border-box; position: fixed; top: calc(60px + var(--banner-height)); bottom: 0; width: var(--nav-width); max-height: 100vh; background-color: var(--nav-panel-bg); display: flex; flex-direction: column; align-items: center; z-index: 10; transition: width 0.18s ease; } @media only screen and (max-device-width: 640px) { .nav { display: none } } .nav__content { box-sizing: border-box; height: 100%; padding: 22px 22px 0; display: flex; flex-direction: column; align-items: center; flex: 1 1; } /* Collapse/expand. Parked on the trailing edge with a negative margin so it sits in the panel's own padding rather than taking a row of its own. */ .nav__collapse { box-sizing: border-box; flex: none; align-self: flex-end; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -8px -8px 6px; padding: 0; border: 0; border-radius: 6px; background-color: transparent; cursor: pointer; transition: background-color 0.15s ease; } .nav__collapse svg { width: 16px; height: 16px; fill: var(--colour-brand); transition: transform 0.18s ease; } .nav__collapse:hover { background-color: var(--nav-item-hover-bg); } .nav__collapse:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } /* A menu row and the sub-menu that belongs to it, kept together. Expanded this is a plain full-width block and changes nothing; collapsed it is the positioning context the sub-menu flies out from. */ .nav__group { position: relative; width: 100%; } /* The row's text, in an element of its own so the collapsed panel has something to hide. It used to be a bare text node, which CSS cannot address without blanking the icon and the count along with it. */ .nav__label { min-width: 0; } .nav__search { box-sizing: border-box; display: block; width: 100%; font-size: 12px; /* Themed: this is the files filter and the two nav search boxes, all of which carry `search-input`-style exemptions from the app-wide control rule and so paint themselves. Hardcoded, they stayed white on dark. */ color: var(--field-fg); background-color: var(--field-bg); outline: none; padding: 5px 28px 6px 9px; border-radius: 5px; border: solid 0.5px var(--field-border); margin-bottom: 10px; } .nav__search::placeholder { font-style: italic; } .nav__search-wrap { position: relative; cursor: pointer; } .nav__search-icon { position: absolute; right: 8px; top: 6px; } /* The two call-to-action buttons share one shape. They used to differ in padding (7px 30px 7px 13px vs 7px 28px 7px 24px) and in text-align, with `space-between` pushing the icon and the label to opposite edges — so the two buttons sitting one above the other lined up on neither their icons nor their labels. Centred content with a gap makes them a pair. */ .nav__invite, .nav__meetings { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--white); border: 0; border-radius: 8px; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .nav__invite svg, .nav__meetings svg { flex: none; } .nav__invite:hover, .nav__meetings:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgb(0 0 0 / 18%); } .nav__invite:active, .nav__meetings:active { transform: translateY(0); box-shadow: 0 1px 3px rgb(0 0 0 / 18%); } .nav__invite:focus-visible, .nav__meetings:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .nav__invite:disabled, .nav__meetings:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; } .nav__invite { background-color: var(--blue-font); } .nav__invite--lynx { width: 140px; } .nav__meetings { background-color: var(--colour-brand-dark); margin-bottom: 14px; } .nav__menu { flex: 1 1; display: flex; align-items: flex-start; flex-direction: column; width: 100%; margin-top: 12px; /* margin-bottom: 5px; */ font-size: 12px; /* color: var(--nav-panel-links-color); */ } /* overflow: auto; */ .nav__menu--contacts-open { flex: 0 1; } /* Each row is a pill: padded, rounded, and filled on hover and when active. The item is the full width of the panel content and the negative margin lets the fill bleed to the panel's own padding, so the pill looks inset rather than floating in a gutter. */ .nav__menu-item { box-sizing: border-box; position: relative; width: calc(100% + 16px); margin: 0 -8px 2px; padding: 9px 8px 9px 10px; display: flex; align-items: center; justify-content: flex-start; border-radius: 8px; font-weight: 600; line-height: 1.15; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 0.15s ease, color 0.15s ease; } /* Fixed icon column: the icons are not all the same width, so without this the labels started at a different x on every row. */ .nav__menu-item svg { flex: none; width: 18px; margin-right: 10px; fill: var(--colour-brand); } .nav__menu-item:hover { background-color: var(--nav-item-hover-bg); } .nav__menu-item:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: -2px; } /* Was declared on every link in the template and styled nowhere, so the route you were on looked exactly like the ones you were not. */ .nav__menu-item--active { background-color: var(--nav-item-active-bg); color: var(--nav-item-active-color); } /* Accent on the leading edge — the one cue that survives at a glance when several rows share the same tint. */ .nav__menu-item--active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 2px 2px 0; background-color: var(--colour-brand); } /* Unread/pending count. `margin-left: auto` parks it on the trailing edge, so the counts line up in a column of their own however long the labels are — rather than trailing the label at a different x on every row. Tabular figures stop a 1 and a 7 changing the pill's width. */ .nav__badge { box-sizing: border-box; flex: none; margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background-color: var(--nav-badge-bg); color: var(--nav-badge-color); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; } /* Sub-items hang off a hairline rail aligned with the parent's icon, so the group reads as one branch instead of an indented list. */ .nav__sub-menu { box-sizing: border-box; width: 100%; margin: 2px 0 6px 10px; padding-left: 16px; border-left: 1px solid var(--nav-rule-color); } .nav__sub-menu-item { box-sizing: border-box; padding: 5px 8px; margin-bottom: 1px; border-radius: 6px; cursor: pointer; font-weight: 400; transition: background-color 0.15s ease, color 0.15s ease; } .nav__sub-menu-item--active { color: var(--colour-brand); font-weight: 600; } .nav__sub-menu-item:hover { background-color: var(--nav-item-hover-bg); } .nav__sub-menu-item:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: -2px; } .nav--is-hidden { display: none; } .nav__close { position: absolute; top: -9px; right: -8px; font-size: 8px; padding: 4px; border-radius: 50%; background-color: #707070; color: #fff; cursor: pointer; } .nav__subscription { box-sizing: border-box; width: 100%; padding: 0 10px 22px 10px; } .nav__plan { border-bottom: 0.5px solid #333; padding-bottom: 2px; margin-bottom: 2px; font-size: 12px; font-weight: 500; } .nav__logo { width: 100%; text-align: center; padding-bottom: 10px; } .nav__contacts { flex: 1 1; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; border: 0.5px solid #606060; background-color: var(--nav-panel-contacts-bg); border-radius: 5px; padding: 9px; width: 151px; margin-left: -10px; margin-right: -10px; margin-bottom: 10px; } .nav__contact { position: relative; padding-left: 9px; border-left: 2px solid #737373; box-sizing: border-box; margin-bottom: 10px; cursor: default; } .nav__contact--online { border-left-color: #2EA953; } .nav__contact:hover .contact__actions { right: 0; } .contact__divider { background-color: #B5B5B5; height: 0.5px; width: 100%; margin-bottom: 10px; } .contact__name { font-size: 10px; font-style: normal; font-weight: 700; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact__email { color: var(--secondary-font); font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact__actions { box-sizing: border-box; display: flex; position: absolute; right: 0; align-items: center; justify-content: space-between; height: 100%; background: linear-gradient(90deg, rgba(237, 244, 255, 0.00) 0%, var(--nav-panel-contacts-bg) 24.48%); top: 0; padding-left: 20px; right: -85px; transition: right 0.25s ease-in-out; } .contact__actions svg { fill: var(--colour-brand); } .contact__action { background: none; border: none; padding: 0; margin: 0; line-height: 0; margin-left: 10px; } /* --------------------------------------------------------------------------- COLLAPSED Driven from `.page`, not from the panel, because the same flag has to narrow the content offset — see `--nav-width` at the top of this file and the `.container` rules that read it. `.page--nav-collapsed` is only set on screens that actually render this panel, so the areas carrying their own nav card (settings, tenancy manager, system management) keep the full 175px gutter. Nothing is dropped, only deferred: each row keeps its name in a `title`, the unread counts move onto the icons, and a section's sub-menu flies out beside it on hover. One click on the chevron brings the labels back for good. --------------------------------------------------------------------------- */ .page--nav-collapsed { --nav-width: var(--nav-width-collapsed); } /* `.nav` centres its children and never sized this column, so expanded it is as wide as the longest label happens to be. At icon width that would make the rail's own width depend on whichever child is widest — the chevron, as it turns out — so pin it: 12px each side leaves a 40px content box, the rows bleed 8px into it either way, and a row spans 4px..60px in the 64px rail. */ .page--nav-collapsed .nav .nav__content { width: 100%; padding: 22px 12px 0; } .page--nav-collapsed .nav .nav__collapse { align-self: center; margin: -8px 0 6px; } .page--nav-collapsed .nav .nav__collapse svg { transform: rotate(180deg); } /* The label is the one thing the collapse actually trades away. */ .page--nav-collapsed .nav .nav__label { display: none; } .page--nav-collapsed .nav .nav__invite, .page--nav-collapsed .nav .nav__meetings { padding: 9px 0; gap: 0; } .page--nav-collapsed .nav .nav__menu-item { justify-content: center; padding: 9px 0; } .page--nav-collapsed .nav .nav__menu-item svg { margin-right: 0; } /* `margin-left: auto` had the count park on the trailing edge of a row that no longer has one. On the icon's shoulder it stays readable and stays a count — hiding it would be the one piece of information a tooltip cannot give back. */ .page--nav-collapsed .nav .nav__badge { position: absolute; top: 2px; right: 4px; margin-left: 0; min-width: 14px; padding: 0 3px; font-size: 9px; line-height: 14px; } /* The contacts disclosure arrow points at a label that isn't there. */ .page--nav-collapsed .nav .selectbox__arrow { display: none; } /* Sub-items have no icons of their own, so they cannot simply shrink. They become a flyout anchored to their section's icon — available on hover rather than only after expanding. `::before` bridges the 12px between the row and the card so the pointer can cross without the card closing. */ .page--nav-collapsed .nav .nav__sub-menu { display: none; position: absolute; top: 0; left: calc(100% + 12px); z-index: 20; width: max-content; min-width: 150px; margin: 0; padding: 6px; border-left: 0; border-radius: 8px; background-color: var(--nav-panel-bg); box-shadow: 0 6px 18px rgb(0 0 0 / 28%); } .page--nav-collapsed .nav .nav__sub-menu::before { content: ''; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; } .page--nav-collapsed .nav .nav__group:hover .nav__sub-menu, .page--nav-collapsed .nav .nav__group:focus-within .nav__sub-menu { display: block; } /* Search goes with its field. A lone magnifier at the bottom of the rail was a control that could not do the thing it depicts — there is nowhere to type at this width — and it read as a ninth navigation icon. */ .page--nav-collapsed .nav .nav__search-wrap { display: none; } /* The contacts card is a 151px panel; in a 64px rail it hung out over the page. It stays open — expanding the panel brings it straight back. */ .page--nav-collapsed .nav .nav__contacts { display: none; } /* A 100px wordmark in a 40px column. It is a link to the marketing site, not navigation, and it comes straight back on expand. */ .page--nav-collapsed .nav .nav__logo { display: none; } /* --------------------------------------------------------------------------- Panel typography and states, on the refresh palette. --------------------------------------------------------------------------- */ .nav__menu-item { border-radius: var(--r-r-inner); font-size: 13px; color: var(--r-navy); } .nav__menu-item:hover { background: var(--r-hover); } .nav__menu-item--active, .nav__menu-item.active { background: var(--r-tint); color: var(--r-brand); } .nav__sub-menu-item { border-radius: 6px; font-size: 12px; color: var(--r-grey); } .nav__sub-menu-item:hover { background: var(--r-hover); } .nav__sub-menu-item--active { color: var(--r-brand); font-weight: 600; } .nav__badge { padding: 1px 7px; border-radius: var(--r-r-pill); background: var(--r-tint); font-size: 10.5px; font-weight: 700; color: var(--r-brand); } .selectbox { outline: none; cursor: pointer; position: relative; min-width: 180px; } /* color: var(--colour-black); */ @media (max-width: 900px) { .selectbox { min-width: 170px } } .selectbox--menu { font-weight: 500; font-size: 13px; text-transform: uppercase; } @media (max-width: 1024px) { .selectbox--menu { font-size: 12px } } @media (max-width: 900px) { .selectbox--menu { font-size: 11px } } /* &:hover { & .selectbox__list { visibility: visible; opacity: 1; } & .selectbox__arrow { &--up { display: inline-block; } &--down { display: none; } } }*/ .selectbox__head { outline: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; font-size: 13px; border: 2px solid #000; border-radius: 4px; background-color: var(--body-bg); } /* Two width-stepped overrides used to live here — `padding: 13px` and `font-size: 11px !important` under 1336px, and another padding under 900px. They sized the control before it had one size, and they were quietly overriding the refresh on every screen under 1336px; the `!important` meant nothing downstream could take it back, which is why a select on a phone came out 37px tall next to a 32px one. The default size is now one rule — `.selectbox__head` in design-system/, which is imported after this file and so wins at EQUAL specificity: `5px 10px` with a 32px floor, at every width. A stepped font-size here would be dead code rather than a smaller font, so there isn't one. It only wins at equal specificity, though. Six place-scoped rules at (0,2,0) still set their own padding or font-size and outrank it: `.chat__actions`, `.menu--setting`/`.menu--search`, `.user__select` (twice, one of them `font-size: 10px`), `.hub-setting__form--branding` and `.setting__form--branding`. A select in one of those places is not the 32px control the refresh draws everywhere else. Folding them in needs each of those screens looked at, so they are still outstanding — do not read this block as "every select is the same size now". */ .selectbox__head--style-2 { padding: 15px 25px; border-width: 1px; border-color: #0d2136; } .selectbox__head--style-3 { max-width: 100% !important; -webkit-user-select: none; user-select: none; } /* The caret is an L of border in the bottom-right of an 8x8 box, so rotating it swings the visible chevron off the box's own centre — about 1.8px down when it points down, the same amount up when it points up. The old fix nudged only the up state, by 3px, which is why the caret hopped as a menu opened. Half the correction each way leaves the ink in the same place in both states, so it flips without moving. */ .selectbox__arrow { position: relative; margin-left: 20px; border: solid var(--selectbox-arrow-bg); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .selectbox__arrow--up { transform: rotate(-135deg); top: 2px; } .selectbox__arrow--down { transform: rotate(45deg); top: -2px; } .selectbox__list { z-index: 3; position: absolute; top: 100%; width: 100%; top: 100%; background-color: var(--body-bg); max-height: 33vh; overflow: auto; border: 1px solid var(--colour-brand); border-radius: 8px; } @media (min-width: 901px) and (max-width: 1336px) { .selectbox__list { max-height: calc(50vh - 97px) } } @media (max-width: 900px) { .selectbox__list { max-height: calc(50vh - 124px) } } /* Shape, padding and hover come from the menu rules at the foot of this file, which every menu in the app shares. What was here was a 16px/24px row ruled off from the next with a 1px brand-blue line — a divider under every option, drawn in a colour the rest of the menu does not use. The three "Select HUB" dialogs were a stack of blue-underlined rows because of it. */ .selectbox__item { word-break: break-word; transition: ease 0.15s all; } .selectbox--style-1 { min-width: 110px; font-size: 13px; } .selectbox--style-1 .selectbox__head { font-size: 13px; padding: 10px 12px; border-width: 1px; } .selectbox--style-1 .selectbox__arrow { margin-left: 8px; padding: 2px; } .ember-basic-dropdown-content { transform: translate3d(0,0,0); background-color: var(--body-bg); } .ember-power-select-trigger[aria-disabled=true] { pointer-events: none !important; opacity: 0.5 !important; cursor: default !important; } .ember-power-select-trigger { cursor: pointer; background-color: var(--body-bg); box-sizing: border-box; } .ember-power-select-dropdown.ember-power-select-typeahead-dropdown { border: 0; } .ember-power-select-option { font-weight: 500; font-size: 14px; padding: 5px 8px; } .ember-power-select-option[aria-current="true"] { background-color: var(--colour-brand); } .ember-power-select-option.ember-power-select-option--loading-message { padding: 0 8px; color: var(--dark-font); } .ember-power-select-dropdown.selectbox-orange { border: 1px solid var(--colour-brand); } /* Region protection country typeahead (tenancy policies) */ .ember-power-select-dropdown.region-protection-dropdown { border: solid 1px rgba(0, 0, 0, 0.15); border-radius: 0 0 6px 6px; background-color: var(--body-bg); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); } .ember-power-select-dropdown.region-protection-dropdown .ember-power-select-options { max-height: 16em; overflow-y: auto; } /* --------------------------------------------------------------------------- One select control. The app shipped four sizes of it and a 2px black border on `.selectbox__head`. `box-sizing` is the load-bearing line: the app sets an explicit height on a content-box element, so its padding and border were ADDED to that height and a control asking for 30px measured 46px. The same mistake — content-box plus an explicit size — is what made the Data Clearout warning overshoot its dialog by exactly its own padding. --------------------------------------------------------------------------- */ .selectbox__head, .ember-power-select-trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; height: auto; padding: 5px 10px; border: 1px solid var(--r-ctl); border-radius: var(--r-r-ctl); background: #fff; font-size: 12.5px; color: var(--r-navy); } .selectbox__head:hover, .ember-power-select-trigger:hover { border-color: var(--r-ctl-hi); background: var(--r-hover); } /* Push the caret to the trailing edge of a full-width select head. Scoped to the head it belongs to: unscoped, this also hit the header's Hub picker, whose trigger is a centred flex row with a min-width — so `auto` ate the leftover space there and the gap before the caret shrank to nothing as the Hub name got longer. */ .selectbox__head > .selectbox__arrow, .ember-power-select-trigger > .selectbox__arrow { margin-left: auto; flex: none; } .selectbox__list, .ember-power-select-dropdown { padding: 4px; border: 1px solid var(--r-edge); border-radius: var(--r-r-inner); background: #fff; box-shadow: var(--r-shadow-md); } .selectbox__item, .ember-power-select-option { padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--r-navy); } .selectbox__item:hover, .ember-power-select-option:hover { background: var(--r-tint); color: var(--r-brand); } /* An open trigger. Replaces the `border-color: #000 !important` earlier in this file, which was the only way the old rule could win and made every open select a black box. */ .ember-power-select-trigger[aria-expanded="true"], .ember-basic-dropdown-trigger[aria-expanded="true"] { border-color: var(--r-brand); box-shadow: var(--r-focus); } /* The share dialog's recipient typeahead is both things at once: the input is marked `--flat` because the field shell was once expected to draw the box, and it is also a power-select trigger, which draws its own. `--flat` is declared later at the same weight, so it won and the field had no box at all. The trigger wins here — it is the control a person clicks and types into, and a text field with no edge does not read as one. */ .ember-power-select-trigger.field__input--flat { padding: 5px 10px; border: 1px solid var(--r-ctl); background: #fff; } /* The option that is already chosen, so an open menu says where you are as well as where you could go — the same cue the tenancy manager's filter menus use. */ .selectbox__item--selected { font-weight: 600; color: var(--r-brand); } /* --------------------------------------------------------------------------- `@triggerClass="… text-ellipsis"` — make it do what nine call sites ask for. --------------------------------------------------------------------------- Nine places pass `text-ellipsis` in a power-select `@triggerClass` (the fusion attribute value and filter inputs, manage-attribute, the catalog sort, hub branding) and not one of them got an ellipsis. `text-overflow` applies to the box that actually overflows, and that box is the inner `.ember-power-select-selected-item`, not the trigger the class lands on: the span ships `overflow: visible; text-overflow: clip`, so it grew to its content width and the class above it did nothing. The trigger is already `display: flex`, so the span only needed `min-width: 0` — a flex item refuses to shrink below its content without it. The `padding-right` is for the two controls: power-select positions the clear button and the caret ABSOLUTELY (right: 25px and 5px), so they take no part in the flex layout and text will happily run underneath them. Reproduced on the fusion Attributes modal with a "Name (email)" author label in a 362px field: the value was cut mid-address with no ellipsis and its closing bracket sat on top of the clear button, which is what made the field look like it had no way to clear it. Measured after: the text ellipsises, and the × and the caret are clear of it. --------------------------------------------------------------------------- */ .ember-power-select-trigger.text-ellipsis > .ember-power-select-selected-item, .ember-power-select-trigger.text-ellipsis > .ember-power-select-placeholder { box-sizing: border-box; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Room for the clear button and the caret, which power-select positions ABSOLUTELY (right: 25px and 5px) and which therefore take no part in this flex row — without it the text runs underneath both. */ padding-right: 34px; } /* The other half of the problem: a long value STRETCHING the field. * * With a content flex-basis the span asks for its full text width, and that * demand travels up — the wrappers are flex COLUMNS, where shrink does not * apply on the cross axis, so nothing absorbs it. Measured with a * 111-character "Name (email)": the span wanted 745px and dragged its row and * the trigger out to 783px inside a 550px sheet, hanging the field off the * side of the dialog. `min-width: 0` up the chain does NOT help, because it is * not a minimum that is driving the width. * * A zero basis fixes it — the span stops asking for anything and fills the * width the trigger already has — but only where the trigger HAS a width to * fill. So it is scoped to `full-width` (the two fusion attribute inputs) and * kept away from the content-sized triggers: the catalog control is * `max-w-150px` with no width of its own, and a zero basis there collapsed it * from 148px to 72px and truncated "All attributes" to "All att…". */ .ember-power-select-trigger.text-ellipsis.full-width > .ember-power-select-selected-item, .ember-power-select-trigger.text-ellipsis.full-width > .ember-power-select-placeholder { flex-basis: 0; width: 0; } /* A tenancy's name over its hubs in the upload dialog's hub menu (modal/select-domain) — the same grouping and the same small-caps label as the header's hub menus. */ .selectbox__group-label { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); text-align: left; } .selectbox__group-label ~ .selectbox__group-label { margin-top: 4px; border-top: 1px solid var(--r-edge); padding-top: 10px; } /* The dark panel: the header's hub menus use the same light-on-dark label (header.css). */ [data-theme="dark"] .selectbox__group-label { color: rgba(255, 255, 255, 0.6); } .user-menu { position: relative; } .user-menu__img { outline: none; overflow: hidden; position: relative; z-index: 1; width: 65px; height: 65px; border: 1px solid #061f45; border-radius: 50%; } @media (min-width: 901px) and (max-width: 1280px) { .user-menu__img { width: 55px; height: 55px } } @media (max-width: 900px) { .user-menu__img { width: 50px; height: 50px } } .user-menu__img img { display: block; width: 100%; max-width: 100%; } .user-menu__trigger { display: flex; align-items: center; cursor: pointer; padding: 15px 10px; border-bottom: solid 1px var(--colour-brand); font-weight: 300; line-height: 1.25; } /* color: var(--black); */ .user-menu__trigger:hover { background-color: var(--button-bg-hover); } .user-menu__trigger .icon-plus { font-size: 20px; color: #0658f9; margin-right: 5px; } .user-menu__item { padding: 0 10px; cursor: pointer; } .user-menu__item:hover { background-color: var(--button-bg-hover); } .user-menu__item--active { color: var(--colour-brand); text-decoration: underline; } .user-menu__inner { padding: 10px 0; border-bottom: solid 1px var(--colour-brand); } .user-menu__inner--no-border { border: 0 !important;; } .vltheader { z-index: 3; position: fixed; display: flex; height: 60px; padding: 15px; box-sizing: border-box; width: 100%; top: var(--banner-height); justify-content: space-between; align-items: center; background-color: var(--header-menu-bg); border-bottom: 1px solid var(--header-menu-line); } .vltheader__logo { text-align: center; width: 150px; margin-right: 20px; } .vltheader__logo img { max-height: 30px; } @media (max-width: 900px) { .vltheader__logo { position: initial; transform: none; left: 0; top: 0 } } @media only screen and (max-device-width: 640px) { .vltheader__logo { display: none } } .vltheader__dropdown-trigger { box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--colour-brand); cursor: pointer; -webkit-user-select: none; user-select: none; font-size: 12px; font-weight: 500; padding: 0 15px; } .vltheader__dropdown-trigger .selectbox__arrow { margin-left: 10px; } .vltheader__dropdown-trigger .selectbox__arrow--down { border-color: var(--selectbox-arrow-bg); } .vltheader__dropdown-trigger .selectbox__arrow--up { border-color: var(--hero-white); } /* Every other trigger in this row is an `` or a `
`. The invite one is a real `