@dso-toolkit/core 33.2.0 → 33.3.0

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

@@ -0,0 +1,439 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+: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;
+  /* stylelint-disable-line declaration-property-value-disallowed-list */
+}
+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;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  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;
+}