@dso-toolkit/core 33.2.0 → 34.1.0

package/dist/collection/components/date-picker/date-picker.js

@@ -23,7 +23,7 @@ const keyCode = {
   RIGHT: 39,
   DOWN: 40,
 };
-const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g;
+const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
 const TRANSITION_MS = 300;
 export class DsoDatePicker {
   constructor() {
@@ -229,7 +229,49 @@ export class DsoDatePicker {
     };
     this.handleInputChange = (e) => {
       const target = e.target;
-      this.setValue(target.value.replace(DISALLOWED_CHARACTERS, ""));
+      this.setValue(target.value);
+    };
+    this.handleKeyPress = (e) => {
+      if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
+        e.preventDefault();
+      }
+    };
+    this.prepareEvent = (value) => {
+      var event = {
+        component: "dso-date-picker",
+        value: "",
+        valueAsDate: undefined
+      };
+      if (value instanceof Date) {
+        event.valueAsDate = value;
+      }
+      else {
+        event.value = value;
+        event.valueAsDate = parseDutchDate(value);
+      }
+      if (event.valueAsDate) {
+        event.value = printDutchDate(event.valueAsDate);
+      }
+      if (!event.valueAsDate && this.required) {
+        event.error = "required";
+      }
+      if (event.value && !event.valueAsDate) {
+        event.error = "invalid";
+      }
+      if (event.valueAsDate && (this.min || this.max)) {
+        const min = parseDutchDate(this.min);
+        const max = parseDutchDate(this.max);
+        const clampValue = clamp(event.valueAsDate, min, max);
+        if (clampValue !== event.valueAsDate && clampValue === min) {
+          event.valueAsDate = undefined;
+          event.error = "min-range";
+        }
+        else if (clampValue !== event.valueAsDate && clampValue === max) {
+          event.valueAsDate = undefined;
+          event.error = "max-range";
+        }
+      }
+      return event;
     };
     this.processFocusedDayNode = (element) => {
       this.focusedDayNode = element;
@@ -242,13 +284,12 @@ export class DsoDatePicker {
    * Component event handling.
    */
   handleDocumentClick(e) {
-    var _a;
     if (!this.open) {
       return;
     }
     const path = e.composedPath();
     for (const target of path) {
-      if (target instanceof Node && ((_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+      if (target instanceof Node && this.element.contains(target)) {
         return;
       }
     }
@@ -322,27 +363,7 @@ export class DsoDatePicker {
     this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
   }
   setValue(value) {
-    var event = {
-      component: "dso-date-picker",
-      value: "",
-      valueAsDate: undefined
-    };
-    if (value instanceof Date) {
-      event.valueAsDate = value;
-    }
-    else {
-      event.value = value;
-      event.valueAsDate = parseDutchDate(value);
-    }
-    if (event.valueAsDate) {
-      event.value = printDutchDate(event.valueAsDate);
-    }
-    if (!event.valueAsDate && this.required) {
-      event.error = "required";
-    }
-    if (event.value && !event.valueAsDate) {
-      event.error = "invalid";
-    }
+    const event = this.prepareEvent(value);
     this.value = event.value;
     this.dateChange.emit(event);
   }
@@ -380,7 +401,7 @@ export class DsoDatePicker {
     return (h(Host, null,
       h("div", { class: "dso-date" },
         h("div", { class: "dso-date__input-wrapper" },
-          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
+          h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }),
           h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) },
             h("span", { class: "dso-date__toggle-icon" },
               h("dso-icon", { icon: "calendar" })),
@@ -431,7 +452,7 @@ export class DsoDatePicker {
             h(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
   }
   static get is() { return "dso-date-picker"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["date-picker.scss"]
   }; }
@@ -637,7 +658,7 @@ export class DsoDatePicker {
       },
       "complexType": {
         "original": "DsoDatePickerChangeEvent",
-        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | undefined; }",
+        "resolved": "{ component: \"dso-date-picker\"; valueAsDate: Date | undefined; value: string; error?: \"invalid\" | \"required\" | \"min-range\" | \"max-range\" | undefined; }",
         "references": {
           "DsoDatePickerChangeEvent": {
             "location": "local"

package/dist/collection/components/date-picker/date-picker.template.js

@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }) {
+export function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus, direction }) {
   return html `
     <dso-date-picker
       @dateChange=${(e) => onDateChange(e)}
+      direction=${ifDefined(direction)}
       identifier=${ifDefined(id)}
       value=${ifDefined(value || undefined)}
       min=${ifDefined(min || undefined)}

package/dist/collection/components/definition-list/definition-list.template.js

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { listTemplate } from '../list/list.template';
+function definitionTemplate({ term, descriptions }, useSrOnlyColon) {
+  return html `
+    <dt>
+      ${term}${useSrOnlyColon
+    ? html `<span class="sr-only">:</span>`
+    : ':'}
+    </dt>
+    ${descriptions.map(description => html `
+      <dd>${definitionContentTemplate(description)}</dd>
+    `)}
+  `;
+}
+function definitionContentTemplate(description) {
+  if ('content' in description) {
+    if (typeof description.content === 'string') {
+      return unsafeHTML(description.content);
+    }
+    return description.content;
+  }
+  return listTemplate(description.list);
+}
+export function definitionListTemplate({ modifier, definitions, useSrOnlyColon }) {
+  return html `
+    <dl class=${ifDefined(modifier)}>
+      ${definitions.map(definition => (modifier === null || modifier === void 0 ? void 0 : modifier.split(' ').includes('dso-columns'))
+    ? html `
+            <div>${definitionTemplate(definition, useSrOnlyColon)}</div>
+          `
+    : definitionTemplate(definition, useSrOnlyColon))}
+    </dl>
+  `;
+}

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host(:focus) {
   outline: none;
 }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -93,9 +93,6 @@ export class DropdownMenu {
       this.openPopup();
     }
   }
-  componentDidRender() {
-    this.host.setAttribute("tabindex", "-1");
-  }
   componentWillRender() {
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
@@ -110,6 +107,7 @@ export class DropdownMenu {
     }
   }
   openPopup() {
+    this.host.setAttribute("tabindex", "-1");
     this.host.addEventListener("keydown", this.keyDownListener);
     this.host.addEventListener("focusout", this.focusOutListener);
     this.button.setAttribute("aria-expanded", "true");
@@ -119,11 +117,24 @@ export class DropdownMenu {
     this.host.removeEventListener("keydown", this.keyDownListener);
     this.host.removeEventListener("focusout", this.focusOutListener);
     this.button.setAttribute("aria-expanded", "false");
+    this.host.removeAttribute("tabindex");
     this.tabbables.forEach((tabbable) => tabbable.removeEventListener("click", this.escape));
   }
+  getActiveElement(root = document) {
+    const activeEl = root.activeElement;
+    if (!activeEl) {
+      return null;
+    }
+    if (activeEl.shadowRoot) {
+      return this.getActiveElement(activeEl.shadowRoot);
+    }
+    else {
+      return activeEl;
+    }
+  }
   tabInPopup(direction) {
     const tabs = this.tabbables;
-    const currentIndex = tabs.findIndex((e) => e === document.activeElement);
+    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
     let nextIndex = currentIndex + direction;
     if (nextIndex >= tabs.length) {
       nextIndex = 0;

package/dist/collection/components/header/header.css

@@ -0,0 +1,433 @@
+:host {
+  --di-chevron-down-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e");
+  --di-chevron-up-bosgroen: url("data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e");
+  display: block;
+}
+
+.dso-header {
+  border-bottom: 1px solid #ccc;
+  display: flex;
+  flex-wrap: wrap;
+}
+@media screen and (min-width: 768px) {
+  .dso-header {
+    align-items: center;
+  }
+}
+@media screen and (max-width: 991px) {
+  .dso-header.use-drop-down {
+    flex-wrap: nowrap;
+  }
+}
+
+.logo-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 16px;
+  padding-top: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .sub-logo {
+    margin-left: 24px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .sub-logo {
+    flex-basis: 100%;
+  }
+}
+
+.login,
+.logout {
+  margin-right: 16px;
+}
+
+.profile a,
+.logout a,
+.login a {
+  text-decoration: none;
+  color: #39870c;
+  font-weight: 600;
+}
+.profile a:hover, .profile a:focus,
+.logout a:hover,
+.logout a:focus,
+.login a:hover,
+.login a:focus {
+  text-decoration: none;
+}
+.profile a:active,
+.logout a:active,
+.login a:active {
+  text-decoration: underline;
+}
+
+.dso-header-session {
+  display: flex;
+  margin-left: auto;
+}
+.dso-header-session .profile a {
+  margin-left: 8px;
+}
+.dso-header-session .profile + .logout {
+  border-left: 3px solid #ccc;
+  margin-left: 16px;
+  padding-left: 16px;
+}
+
+.dso-navbar {
+  flex-basis: 100%;
+}
+
+dso-dropdown-menu > .dso-primary::after,
+dso-dropdown-menu > .dso-secondary::after,
+dso-dropdown-menu > .dso-tertiary::after,
+dso-dropdown-menu > .btn::after {
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+}
+dso-dropdown-menu > .dso-primary::after,
+dso-dropdown-menu > .btn-primary::after {
+  background: var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+dso-dropdown-menu > .dso-secondary::after,
+dso-dropdown-menu > .btn-default::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+dso-dropdown-menu > .dso-secondary:hover::after,
+dso-dropdown-menu > .btn-default:hover::after {
+  --dso-icon: var(--di-chevron-down-wit);
+}
+dso-dropdown-menu > .dso-tertiary::after,
+dso-dropdown-menu > .btn-link::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+  position: relative;
+  top: -2px;
+}
+dso-dropdown-menu > .dso-tertiary:hover::after,
+dso-dropdown-menu > .btn-link:hover::after {
+  --dso-icon: var(--di-chevron-down-scampi);
+}
+dso-dropdown-menu .dso-group-label {
+  color: #999;
+  font-size: 0.875em;
+  font-weight: 400;
+  margin: 0;
+  padding: 4px 20px 2px;
+  text-transform: uppercase;
+}
+dso-dropdown-menu ul {
+  margin: 0;
+  padding: 0;
+}
+dso-dropdown-menu ul:not(:last-child) {
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 11px;
+  padding-bottom: 11px;
+}
+dso-dropdown-menu .dso-dropdown-options {
+  background-clip: padding-box;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
+  font-size: 16px;
+  margin: 2px 0 0;
+  min-width: 160px;
+  padding: 5px 0;
+  position: absolute;
+  text-align: left;
+  top: 100%;
+  z-index: 1000;
+}
+dso-dropdown-menu .dso-dropdown-options li {
+  list-style: none;
+}
+dso-dropdown-menu .dso-dropdown-options li a:visited {
+  color: #191919;
+}
+dso-dropdown-menu .dso-dropdown-options li a,
+dso-dropdown-menu .dso-dropdown-options li button {
+  text-decoration: none;
+  clear: both;
+  color: #191919;
+  display: block;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 3px 20px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus, dso-dropdown-menu .dso-dropdown-options li a:active,
+dso-dropdown-menu .dso-dropdown-options li button:hover,
+dso-dropdown-menu .dso-dropdown-options li button:focus,
+dso-dropdown-menu .dso-dropdown-options li button:active {
+  text-decoration: underline;
+}
+dso-dropdown-menu .dso-dropdown-options li a:hover, dso-dropdown-menu .dso-dropdown-options li a:focus,
+dso-dropdown-menu .dso-dropdown-options li button:hover,
+dso-dropdown-menu .dso-dropdown-options li button:focus {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  text-decoration: none;
+}
+dso-dropdown-menu .dso-dropdown-options li button {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  text-align: inherit;
+  width: 100%;
+}
+dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
+  right: 0;
+}
+dso-dropdown-menu[open] > .dso-primary::after,
+dso-dropdown-menu[open] > .btn-primary::after {
+  --dso-icon: var(--di-chevron-up-wit);
+}
+dso-dropdown-menu[open] > .dso-secondary::after,
+dso-dropdown-menu[open] > .btn-default::after {
+  --dso-icon: var(--di-chevron-up);
+}
+dso-dropdown-menu[open] > .dso-secondary:hover::after,
+dso-dropdown-menu[open] > .btn-default:hover::after {
+  --dso-icon: var(--di-chevron-up-wit);
+}
+dso-dropdown-menu[open] > .dso-tertiary::after,
+dso-dropdown-menu[open] > .btn-link::after {
+  --dso-icon: var(--di-chevron-up);
+}
+dso-dropdown-menu[open] > .dso-tertiary:hover::after,
+dso-dropdown-menu[open] > .btn-link:hover::after {
+  --dso-icon: var(--di-chevron-up-scampi);
+}
+dso-dropdown-menu[open] button::after {
+  background: var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.2em;
+  vertical-align: top;
+  width: 1.2em;
+}
+dso-dropdown-menu[checkable] .dso-group-label {
+  padding-left: 40px;
+}
+dso-dropdown-menu[checkable] li a,
+dso-dropdown-menu[checkable] li button {
+  padding-left: 40px;
+}
+dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),
+dso-dropdown-menu[checkable] li.dso-checked button:not(:focus) {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+dso-dropdown-menu[checkable] li.dso-checked a::before,
+dso-dropdown-menu[checkable] li.dso-checked button::before {
+  background: var(--dso-icon, var(--di-check-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  content: "";
+  display: block;
+  float: left;
+  margin-left: -32px;
+  margin-right: 8px;
+}
+dso-dropdown-menu button {
+  align-items: flex-end;
+  background-color: transparent;
+  border: 0;
+  display: flex;
+  font-family: Asap, sans-serif;
+  padding-right: 32px;
+}
+dso-dropdown-menu button::after {
+  background: var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.2em;
+  vertical-align: top;
+  width: 1.2em;
+  content: "";
+  display: inline-block;
+  margin-left: 8px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+@media screen and (max-width: 991px) {
+  dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options {
+    right: -16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  dso-dropdown-menu {
+    top: 12px;
+  }
+}
+dso-dropdown-menu .dso-dropdown-options {
+  border: 0;
+  border-radius: 0;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
+  width: 320px;
+}
+@media screen and (max-width: 991px) {
+  dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul {
+    width: 100vw;
+  }
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a {
+  color: #275937;
+  font-size: 1.25rem;
+  padding: 16px;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a {
+  font-weight: 600;
+}
+dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
+  border-top: 1px solid #ccc;
+}
+
+.dropdown {
+  margin-left: auto;
+}
+@media screen and (max-width: 767px) {
+  .dropdown dso-dropdown-menu {
+    top: 28px;
+  }
+}
+.dropdown dso-dropdown-menu .dso-dropdown-options {
+  top: calc(100% + 29px);
+}
+@media screen and (max-width: 767px) {
+  .dropdown dso-dropdown-menu .dso-dropdown-options {
+    top: 72px;
+  }
+}
+.dropdown dso-dropdown-menu[open] button::after {
+  background: var(--dso-icon, var(--di-chevron-up)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.dropdown dso-dropdown-menu button {
+  color: #39870c;
+  font-size: 16px;
+  font-weight: 600;
+}
+.dropdown dso-dropdown-menu button:hover, .dropdown dso-dropdown-menu button:active {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.dropdown dso-dropdown-menu button::after {
+  background: var(--dso-icon, var(--di-chevron-down)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+
+.dso-nav {
+  align-items: end;
+  column-gap: 32px;
+  display: flex;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding-left: 0;
+}
+.dso-nav > li {
+  margin-bottom: 4px;
+}
+.dso-nav > li > a {
+  display: block;
+}
+.dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited {
+  color: #275937;
+}
+.dso-nav > li.dso-active, .dso-nav > li.is-active {
+  margin-bottom: 0;
+}
+.dso-nav > li.dso-active > a, .dso-nav > li.is-active > a {
+  border-bottom: 4px solid #8b4a6a;
+  font-weight: bold;
+}
+.dso-nav.dso-nav-main > li > a {
+  text-decoration: none;
+  font-size: 1.25em;
+  line-height: 1;
+  margin-top: 8px;
+  padding: 16px 0;
+  white-space: nowrap;
+}
+.dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus, .dso-nav.dso-nav-main > li > a:active {
+  text-decoration: underline;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
+  top: calc(100% + 3px);
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button {
+  font-size: 1.25em;
+  line-height: 1;
+  margin-top: 8px;
+  padding: 16px 0;
+  align-items: center;
+  color: #275937;
+  padding-right: 32px;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.dso-nav.dso-nav-main dso-dropdown-menu button::after {
+  top: auto;
+  transform: none;
+}
+.dso-nav.dso-nav-sub > li {
+  display: inline-block;
+}
+.dso-nav.dso-nav-sub > li > a {
+  text-decoration: none;
+  font-size: 16px;
+  margin-top: 4px;
+  padding: 4px 8px 3px;
+}
+.dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus, .dso-nav.dso-nav-sub > li > a:active {
+  text-decoration: underline;
+}
+.dso-nav .menu-user-home {
+  margin-left: auto;
+}
+.dso-nav .menu-user-home dso-icon {
+  height: 1em;
+  margin-right: 8px;
+  position: relative;
+  top: -2px;
+  width: 1.2em;
+}