@navikt/ds-css 2.8.16 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/.gitignore +1 -0
  2. package/CHANGELOG.md +10 -0
  3. package/baseline/_inline-reset.css +52 -0
  4. package/baseline/{utility.css → _utilities.css} +21 -8
  5. package/baseline/baseline.css +2 -35
  6. package/baseline/index.css +5 -0
  7. package/baseline/reset.css +294 -0
  8. package/baseline/tokens.css +1 -0
  9. package/config/_mappings.d.ts +24 -0
  10. package/config/_mappings.js +149 -0
  11. package/dist/component/accordion.css +74 -0
  12. package/dist/component/accordion.min.css +1 -0
  13. package/dist/component/alert.css +76 -0
  14. package/dist/component/alert.min.css +1 -0
  15. package/dist/component/button.css +352 -0
  16. package/dist/component/button.min.css +1 -0
  17. package/dist/component/chat.css +98 -0
  18. package/dist/component/chat.min.css +1 -0
  19. package/dist/component/chips.css +138 -0
  20. package/dist/component/chips.min.css +1 -0
  21. package/dist/component/contentcontainer.css +17 -0
  22. package/dist/component/contentcontainer.min.css +1 -0
  23. package/dist/component/date.css +221 -0
  24. package/dist/component/date.min.css +1 -0
  25. package/dist/component/expansioncard.css +197 -0
  26. package/dist/component/expansioncard.min.css +3 -0
  27. package/dist/component/form.css +734 -0
  28. package/dist/component/form.min.css +1 -0
  29. package/dist/component/grid.css +217 -0
  30. package/dist/component/grid.min.css +1 -0
  31. package/dist/component/guidepanel.css +62 -0
  32. package/dist/component/guidepanel.min.css +1 -0
  33. package/dist/component/helptext.css +45 -0
  34. package/dist/component/helptext.min.css +1 -0
  35. package/dist/component/index.css +3988 -0
  36. package/dist/component/index.min.css +4 -0
  37. package/dist/component/link.css +37 -0
  38. package/dist/component/link.min.css +1 -0
  39. package/dist/component/linkpanel.css +38 -0
  40. package/dist/component/linkpanel.min.css +1 -0
  41. package/dist/component/list.css +66 -0
  42. package/dist/component/list.min.css +1 -0
  43. package/dist/component/loader.css +113 -0
  44. package/dist/component/loader.min.css +1 -0
  45. package/dist/component/modal.css +61 -0
  46. package/dist/component/modal.min.css +1 -0
  47. package/dist/component/pagination.css +60 -0
  48. package/dist/component/pagination.min.css +1 -0
  49. package/dist/component/panel.css +10 -0
  50. package/dist/component/panel.min.css +1 -0
  51. package/dist/component/popover.css +54 -0
  52. package/dist/component/popover.min.css +1 -0
  53. package/dist/component/readmore.css +63 -0
  54. package/dist/component/readmore.min.css +1 -0
  55. package/dist/component/stepper.css +225 -0
  56. package/dist/component/stepper.min.css +1 -0
  57. package/dist/component/table.css +227 -0
  58. package/dist/component/table.min.css +1 -0
  59. package/dist/component/tabs.css +114 -0
  60. package/dist/component/tabs.min.css +1 -0
  61. package/dist/component/tag.css +116 -0
  62. package/dist/component/tag.min.css +1 -0
  63. package/dist/component/togglegroup.css +100 -0
  64. package/dist/component/togglegroup.min.css +1 -0
  65. package/dist/component/tooltip.css +53 -0
  66. package/dist/component/tooltip.min.css +1 -0
  67. package/dist/component/typography.css +160 -0
  68. package/dist/component/typography.min.css +1 -0
  69. package/dist/components.css +3272 -0
  70. package/dist/components.min.css +3 -0
  71. package/dist/global/baseline.css +138 -0
  72. package/dist/global/baseline.min.css +1 -0
  73. package/dist/global/fonts.css +21 -0
  74. package/dist/global/fonts.min.css +1 -0
  75. package/dist/global/print.css +75 -0
  76. package/dist/global/print.min.css +1 -0
  77. package/dist/global/reset.css +294 -0
  78. package/dist/global/reset.min.css +1 -0
  79. package/dist/global/tokens.css +279 -0
  80. package/dist/global/tokens.min.css +1 -0
  81. package/dist/index.css +73 -85
  82. package/dist/index.min.css +4 -0
  83. package/form/fieldset.css +4 -0
  84. package/index.css +1 -1
  85. package/package.json +20 -5
  86. package/typography.css +5 -4
@@ -0,0 +1 @@
1
+ .navds-fieldset{border:0;margin:0;min-width:0;padding:0}.navds-fieldset>:not(:first-child):not(:empty){margin-top:var(--a-spacing-2)}.navds-fieldset>.navds-fieldset__description:not(:empty){margin-top:var(--a-spacing-1)}.navds-fieldset>.navds-sr-only+:not(:first-child):not(:empty){margin-top:0}.navds-fieldset__legend{padding:0}.navds-fieldset:disabled>.navds-fieldset__description,.navds-fieldset:disabled>.navds-fieldset__legend{opacity:.3}.navds-form-field{display:grid;gap:var(--a-spacing-2);justify-items:start}.navds-form-field__description{margin-top:-4px}.navds-fieldset .navds-error-message,.navds-form-field .navds-error-message{display:flex;gap:var(--a-spacing-2)}.navds-fieldset .navds-error-message:before,.navds-form-field .navds-error-message:before{content:"•"}.navds-form-field--disabled{cursor:not-allowed;opacity:.3}.navds-form-field__error:empty{display:none}.navds-error-summary{background-color:var(--ac-error-summary-bg,var(--a-surface-default));border:4px solid var(--ac-error-summary-border,var(--a-border-danger));padding:var(--a-spacing-5)}.navds-error-summary--small{padding:var(--a-spacing-3)}.navds-error-summary:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-error-summary__list{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:inherit;margin:var(--a-spacing-3) 0;padding-left:var(--a-spacing-6)}.navds-error-summary__list>*{color:var(--ac-error-summary-list-dot,var(--a-text-action))}.navds-error-summary--small>.navds-error-summary__list{gap:var(--a-spacing-2);margin:var(--a-spacing-2) 0;padding-left:var(--a-spacing-5)}.navds-confirmation-panel__inner{background-color:var(--ac-confirmation-panel-bg,var(--a-surface-warning-subtle));border:1px solid var(--ac-confirmation-panel-border,var(--a-border-warning));border-radius:var(--a-border-radius-medium);display:flex;flex-direction:column;gap:var(--a-spacing-3);justify-self:stretch;padding:var(--a-spacing-4);transition:background-color .1s linear}.navds-confirmation-panel__content{max-width:80ch}.navds-confirmation-panel--checked .navds-confirmation-panel__inner{background-color:var(--ac-confirmation-panel-checked-bg,var(--a-surface-success-subtle));border-color:var(--ac-confirmation-panel-checked-border,var(--a-border-success))}.navds-confirmation-panel--error .navds-confirmation-panel__inner{background-color:var(--ac-confirmation-panel-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-confirmation-panel-error-border,var(--a-border-danger))}.navds-checkbox,.navds-radio{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-checkbox__input,.navds-radio__input{cursor:pointer;height:48px;left:-12px;opacity:0;position:absolute;top:0;width:48px;z-index:1}.navds-checkbox__label,.navds-radio__label{cursor:pointer;display:flex;gap:var(--a-spacing-2);padding:var(--a-spacing-3) 0}.navds-checkbox__label:before,.navds-radio__label:before{background-color:var(--ac-radio-checkbox-bg,var(--a-surface-default));border-radius:var(--a-border-radius-medium);box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-border,var(--a-border-default));content:"";flex-shrink:0;height:1.5rem;width:1.5rem}.navds-radio__label:before{border-radius:var(--a-border-radius-full)}.navds-checkbox__content,.navds-radio__content{display:flex;flex-direction:column;gap:var(--a-spacing-1)}.navds-checkbox--small>.navds-checkbox__input,.navds-radio--small>.navds-radio__input{height:32px;left:-6px;top:0;width:32px}.navds-checkbox--small>.navds-checkbox__label,.navds-radio--small>.navds-radio__label{padding:6px 0}.navds-checkbox--small>.navds-checkbox__label:before,.navds-radio--small>.navds-radio__label:before{height:1.25rem;width:1.25rem}.navds-checkbox__input:focus+.navds-checkbox__label:before,.navds-radio__input:focus+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-border,var(--a-border-default)),var(--a-shadow-focus)}.navds-checkbox__input:hover:focus+.navds-checkbox__label:before,.navds-radio__input:hover:focus+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-action,var(--a-surface-action)),var(--a-shadow-focus)}.navds-checkbox__input:indeterminate+.navds-checkbox__label:before{background-color:var(--ac-radio-checkbox-action,var(--a-surface-action));box-shadow:none}.navds-checkbox__input:indeterminate+.navds-checkbox__label:after{background-color:var(--ac-radio-checkbox-bg,var(--a-surface-default));border-radius:1px;content:"";flex-shrink:0;height:.25rem;position:absolute;top:50%;-webkit-transform:translate(.375rem,-50%);transform:translate(.375rem,-50%);width:.75rem}.navds-checkbox--small .navds-checkbox__input:indeterminate+.navds-checkbox__label:after{-webkit-transform:translate(.25rem,-50%);transform:translate(.25rem,-50%)}.navds-checkbox__input:checked+.navds-checkbox__label:before{background-color:var(--ac-radio-checkbox-action,var(--a-surface-action));background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTQgMTBjLS40IDAtLjgtLjEtMS4xLS40TC40IDcuMUMuMSA2LjggMCA2LjQgMCA2cy4yLS44LjUtMS4xYy41LS41IDEuNS0uNSAyIDBMNCA2LjRsNi40LTZjLjQtLjMuNy0uNCAxLjEtLjQuNCAwIC44LjIgMSAuNS42LjYuNSAxLjYtLjEgMi4xTDUgOS42Yy0uMy4zLS42LjQtMSAuNHptNy44LTguMXptLS42LS44eiIvPjwvc3ZnPg==);background-position:6px;background-repeat:no-repeat;background-size:13px;box-shadow:none}.navds-checkbox--small>.navds-checkbox__input:checked+.navds-checkbox__label:before{background-position:4px}.navds-checkbox__input:checked:focus+.navds-checkbox__label:before,.navds-checkbox__input:indeterminate:focus+.navds-checkbox__label:before{box-shadow:inset 0 0 0 1px var(--ac-radio-checkbox-bg,var(--a-surface-default)),var(--a-shadow-focus)}.navds-radio__input:checked+.navds-radio__label:before{background-color:var(--ac-radio-checkbox-action,var(--a-surface-action));box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-action,var(--a-surface-action)),inset 0 0 0 4px var(--ac-radio-checkbox-bg,var(--a-surface-default))}.navds-radio__input:checked:focus+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-action,var(--a-surface-action)),inset 0 0 0 4px var(--ac-radio-checkbox-bg,var(--a-surface-default)),var(--a-shadow-focus)}.navds-checkbox__input:hover:not(:disabled)+.navds-checkbox__label,.navds-radio__input:hover:not(:disabled)+.navds-radio__label{color:var(--ac-radio-checkbox-action,var(--a-surface-action))}.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)+.navds-checkbox__label:before,.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-action,var(--a-surface-action))}.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)+.navds-checkbox__label:before,.navds-radio__input:hover:not(:disabled):not(:checked)+.navds-radio__label:before{background-color:var(--ac-radio-checkbox-action-hover-bg,var(--a-surface-action-subtle))}.navds-checkbox--error>.navds-checkbox__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)+.navds-checkbox__label:before,.navds-radio--error>.navds-radio__input:not(:hover):not(:disabled):not(:checked)+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-error-border,var(--a-border-danger))}.navds-checkbox--error>.navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)+.navds-checkbox__label:before,.navds-radio--error>.navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)+.navds-radio__label:before{box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-error-border,var(--a-border-danger)),var(--a-shadow-focus)}.navds-checkbox--error>.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)+.navds-checkbox__label:before,.navds-radio--error>.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)+.navds-radio__label:before{background-color:var(--ac-radio-checkbox-error-hover-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-error-border,var(--a-border-danger))}.navds-checkbox--error>.navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)+.navds-checkbox__label:before,.navds-radio--error>.navds-radio__input:focus:hover:not(:disabled):not(:checked)+.navds-radio__label:before{background-color:var(--ac-radio-checkbox-error-hover-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 2px var(--ac-radio-checkbox-error-border,var(--a-border-danger)),var(--a-shadow-focus)}.navds-checkbox--disabled,.navds-radio--disabled{opacity:.3}.navds-checkbox--disabled>.navds-checkbox__input,.navds-checkbox--disabled>.navds-checkbox__label,.navds-radio--disabled>.navds-radio__input,.navds-radio--disabled>.navds-radio__label{cursor:not-allowed}.navds-select__input{-webkit-appearance:none;appearance:none;background-color:var(--ac-select-bg,var(--a-surface-default));border:1px solid var(--ac-select-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-sizing:border-box;color:var(--ac-select-text,var(--a-text-default));display:inline-block;min-height:48px;padding:.5rem 2rem .5rem .5rem;position:relative;width:100%}.navds-select__input:hover{border-color:var(--ac-select-hover-bg,var(--a-border-action))}.navds-select__input:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-select__container{color:var(--a-text-default);display:flex;position:relative;width:100%}.navds-select__chevron{align-self:center;font-size:1rem;pointer-events:none;position:absolute;right:.5rem}.navds-form-field--small .navds-select__input{min-height:32px;padding:0 2rem 0 .25rem}.navds-select--error>* select:not(:hover):not(:focus):not(:disabled){border-color:var(--ac-select-error-border,var(--a-surface-danger));box-shadow:0 0 0 1px var(--ac-select-error-border,var(--a-surface-danger))}.navds-select__input:disabled{background-color:var(--ac-select-bg,var(--a-surface-default));border:1px solid var(--ac-select-border,var(--a-border-default));box-shadow:none;color:var(--a-text-default);cursor:not-allowed;opacity:1}.navds-select__input:disabled>option{color:var(--a-text-default)}.navds-switch{min-height:48px;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-switch--right{width:auto}.navds-switch--small{min-height:32px;position:relative}.navds-switch__input{cursor:pointer;height:48px;opacity:0;position:absolute;top:0;width:48px;z-index:1}.navds-switch--small>.navds-switch__input{height:32px;top:0}.navds-switch__label-wrapper{color:var(--a-text-default);cursor:pointer}.navds-switch__content{display:flex;flex-direction:column;gap:var(--a-spacing-1);padding:.75rem 0 .75rem 3.25rem}.navds-switch--right>.navds-switch__label-wrapper>.navds-switch__content{padding:.75rem 3.25rem .75rem 0}.navds-switch--small>.navds-switch__label-wrapper>.navds-switch__content{padding:calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem}.navds-switch--right.navds-switch--small>.navds-switch__label-wrapper>.navds-switch__content{padding:calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0}.navds-switch--small>.navds-switch__label-wrapper>.navds-switch--with-description,.navds-switch--with-description{padding-bottom:0}.navds-switch__input:hover~.navds-switch__label-wrapper,.navds-switch__label-wrapper:hover{color:var(--ac-switch-action,var(--a-surface-action))}.navds-switch__input:disabled:hover~.navds-switch__label-wrapper{color:inherit}.navds-switch__track{background-color:var(--ac-switch-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-medium);height:24px;left:0;position:absolute;top:var(--a-spacing-3);transition:background-color .25s cubic-bezier(.4,0,.2,1);width:44px}.navds-switch--small>.navds-switch__track{top:var(--a-spacing-1)}.navds-switch--right>.navds-switch__input,.navds-switch--right>.navds-switch__track{left:auto;right:0}.navds-switch__input:checked~.navds-switch__track{background-color:var(--ac-switch-checked-bg,var(--a-surface-success))}.navds-switch__input:hover~.navds-switch__track{background-color:var(--ac-switch-hover-bg,var(--a-surface-neutral-hover))}.navds-switch__input:hover:checked~.navds-switch__track{background-color:var(--ac-switch-checked-hover-bg,var(--a-surface-success-hover))}.navds-switch__input:disabled~.navds-switch__track{background-color:var(--ac-switch-bg,var(--a-surface-neutral))}.navds-switch__input:checked:disabled~.navds-switch__track{background-color:var(--ac-switch-checked-bg,var(--a-border-success))}.navds-switch__input:focus~.navds-switch__track{box-shadow:0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-switch__thumb{align-items:center;background-color:var(--ac-switch-thumb-bg,var(--a-surface-default));border-radius:var(--a-border-radius-small);color:var(--ac-switch-thumb-icon,var(--a-icon-subtle));display:flex;height:20px;justify-content:center;left:2px;position:absolute;top:2px;-webkit-transform:translateX(0);transform:translateX(0);transition:-webkit-transform .25s cubic-bezier(.4,0,.2,1);transition:transform .25s cubic-bezier(.4,0,.2,1);transition:transform .25s cubic-bezier(.4,0,.2,1),-webkit-transform .25s cubic-bezier(.4,0,.2,1);width:20px}.navds-switch__input:checked~.navds-switch__track>.navds-switch__thumb{color:var(--ac-switch-thumb-icon-checked,var(--a-icon-success));-webkit-transform:translateX(20px);transform:translateX(20px)}@media (hover:hover) and (pointer:fine){.navds-switch__input:hover~.navds-switch__track>.navds-switch__thumb{-webkit-transform:translateX(2px);transform:translateX(2px)}.navds-switch__input:checked:hover~.navds-switch__track>.navds-switch__thumb{-webkit-transform:translateX(18px);transform:translateX(18px)}}.navds-switch__input:disabled:hover~.navds-switch__track>.navds-switch__thumb{-webkit-transform:translateX(0);transform:translateX(0)}.navds-switch__input:checked:disabled:hover~.navds-switch__track>.navds-switch__thumb{-webkit-transform:translateX(20px);transform:translateX(20px)}.navds-switch__input:checked~.navds-switch__track>.navds-switch__thumb .navds-loader__foreground{stroke:var(--ac-switch-thumb-icon-checked,var(--a-icon-success))}.navds-switch__input:disabled{-webkit-appearance:none;appearance:none}.navds-switch--disabled:not(.navds-switch--loading){opacity:.3}.navds-switch__input:disabled,.navds-switch__input:disabled~.navds-switch__label-wrapper{cursor:not-allowed}[data-theme=dark]{--ac-textfield-text:var(--a-text-on-inverted);--ac-textfield-bg:var(--a-surface-inverted);--ac-textfield-border:var(--a-border-on-inverted);--ac-textfield-hover-border:var(--a-blue-200);--ac-textfield-placeholder:var(--a-gray-500);--ac-textfield-error-border:var(--a-red-300);--ac-textarea-text:var(--a-text-on-inverted);--ac-textarea-bg:var(--a-transparent);--ac-textarea-border:var(--a-border-on-inverted);--ac-textarea-hover-border:var(--a-blue-200);--ac-textarea-placeholder:var(--a-gray-500);--ac-textarea-error-border:var(--a-red-300);--ac-textarea-counter-text:var(--a-gray-300);--ac-textarea-counter-error-text:var(--a-red-300);--ac-search-button-border:var(--a-border-on-inverted);--ac-search-button-border-hover:var(--a-blue-200);--ac-search-clear-icon:var(--a-white);--ac-search-clear-icon-hover:var(--a-blue-200);--ac-search-error-border:var(--a-red-300)}.navds-text-field__input{-webkit-appearance:none;appearance:none;background-color:var(--ac-textfield-bg,var(--a-surface-default));border:1px solid var(--ac-textfield-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);color:var(--ac-textfield-text,var(--a-text-default));min-height:48px;padding:var(--a-spacing-2);width:100%}.navds-text-field__input[size]{width:auto}.navds-text-field__input::-webkit-input-placeholder{color:var(--ac-textfield-placeholder,var(--a-text-subtle))}.navds-text-field__input::placeholder{color:var(--ac-textfield-placeholder,var(--a-text-subtle))}.navds-form-field--small .navds-text-field__input{min-height:32px;padding:0 .5rem}.navds-text-field__input:hover{border-color:var(--ac-textfield-hover-border,var(--a-border-action))}.navds-text-field__input:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-text-field--error>.navds-text-field__input:not(:hover):not(:disabled){border-color:var(--ac-textfield-error-border,var(--a-border-danger));box-shadow:0 0 0 1px var(--ac-textfield-error-border,var(--a-border-danger))}.navds-text-field--error>.navds-text-field__input:focus:not(:hover):not(:disabled){box-shadow:0 0 0 1px var(--a-border-danger),var(--a-shadow-focus)}.navds-text-field__input:disabled,.navds-text-field__input[readonly]{background-color:var(--ac-textfield-bg,var(--a-surface-default));border-color:var(--ac-textfield-border,var(--a-border-default));box-shadow:none;cursor:not-allowed}.navds-text-field__input[type=search]::-webkit-search-cancel-button,.navds-text-field__input[type=search]::-webkit-search-decoration,.navds-text-field__input[type=search]::-webkit-search-results-button,.navds-text-field__input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.navds-textarea__wrapper{position:relative;width:100%}.navds-textarea__input{-webkit-appearance:none;appearance:none;background-color:var(--ac-textarea-bg,var(--a-surface-default));border:1px solid var(--ac-textarea-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);color:var(--ac-textarea-text,var(--a-text-default));display:block;padding:var(--a-spacing-2);resize:none;width:100%}.navds-textarea--counter{padding-bottom:var(--a-spacing-8)}.navds-textarea__input::-webkit-input-placeholder{color:var(--ac-textarea-placeholder,var(--a-text-subtle))}.navds-textarea__input::placeholder{color:var(--ac-textarea-placeholder,var(--a-text-subtle))}.navds-textarea__input:hover{border-color:var(--ac-textarea-hover-border,var(--a-border-action))}.navds-textarea__input:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-form-field--small .navds-textarea__input{padding:6px}.navds-form-field--small .navds-textarea--counter.navds-textarea__input{padding-bottom:var(--a-spacing-7)}.navds-textarea__counter{bottom:1px;color:var(--ac-textarea-counter-text,var(--a-text-subtle));font-style:italic;left:1px;padding:var(--a-spacing-1) var(--a-spacing-2);pointer-events:none;position:absolute;text-align:left}.navds-textarea__counter--error{color:var(--ac-textarea-counter-error-text,var(--a-text-danger))}.navds-textarea--resize .navds-textarea__input{resize:both}.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled){border-color:var(--ac-textarea-error-border,var(--a-border-danger));box-shadow:0 0 0 1px var(--ac-textarea-error-border,var(--a-border-danger))}.navds-textarea__input:disabled,.navds-textarea__input[readonly]{background-color:var(--ac-textarea-bg,var(--a-surface-default));border-color:var(--ac-textarea-border,var(--a-border-default));box-shadow:none;cursor:not-allowed}.navds-search{display:flex;flex-direction:column;width:100%}.navds-search__wrapper-inner{position:relative;width:100%}.navds-search__wrapper{align-items:center;display:inline-flex}.navds-search__input{padding-right:var(--a-spacing-10)}.navds-form-field--small .navds-search__input{padding-right:var(--a-spacing-8)}.navds-search__input--simple{padding-left:var(--a-spacing-11)}.navds-form-field--small .navds-search__input--simple{padding-left:var(--a-spacing-7)}.navds-search__input:not(.navds-search__input--simple){border-bottom-right-radius:0;border-top-right-radius:0}.navds-search__search-icon{font-size:1.5rem;left:var(--a-spacing-3);pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-search__search-icon{font-size:1rem;left:var(--a-spacing-2)}.navds-search__button-clear{align-items:center;background:none;border:none;border-radius:var(--a-border-radius-medium);color:var(--ac-search-clear-icon,var(--a-text-default));cursor:pointer;display:flex;font-size:1rem;height:32px;justify-content:center;padding:0;position:absolute;right:.75rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:32px}.navds-form-field--small .navds-search__button-clear{height:24px;right:.5rem;width:24px}.navds-search__button-clear:hover{color:var(--ac-search-clear-icon-hover,var(--a-text-action))}.navds-search__button-clear:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-search__button-search{border-radius:0;border-bottom-right-radius:var(--a-border-radius-medium);border-top-right-radius:var(--a-border-radius-medium);flex-shrink:0;min-height:32px;min-width:64px}.navds-form-field--small .navds-search__button-search svg{font-size:1rem}.navds-form-field--small .navds-search__button-search{min-width:40px}.navds-search__button-search.navds-button--secondary{box-shadow:-1px 0 0 0 var(--ac-search-button-border,var(--a-border-default)) inset,0 1px 0 0 var(--ac-search-button-border,var(--a-border-default)) inset,0 -1px 0 0 var(--ac-search-button-border,var(--a-border-default)) inset}.navds-search__button-search.navds-button--secondary:hover{box-shadow:-1px 0 0 0 var(--ac-search-button-border-hover,var(--a-border-action)) inset,0 1px 0 0 var(--ac-search-button-border-hover,var(--a-border-action)) inset,0 -1px 0 0 var(--ac-search-button-border-hover,var(--a-border-action)) inset,-1px 0 0 0 var(--ac-search-button-border-hover,var(--a-border-action));z-index:1}.navds-search__wrapper-inner:focus-within+.navds-search__button-search.navds-button--secondary:hover{z-index:auto}.navds-search__button-search.navds-button--secondary:focus{box-shadow:0 0 0 1px var(--ac-search-button-border,var(--a-border-default)) inset,var(--a-shadow-focus)}.navds-search__button-search.navds-button--secondary:focus:hover{box-shadow:0 0 0 1px var(--ac-search-button-border-hover,var(--a-border-action)) inset,var(--a-shadow-focus)}.navds-search__button-search.navds-button--secondary:focus:active{box-shadow:0 0 0 1px var(--ac-search-button-focus-active-border,var(--a-surface-default)) inset,var(--a-shadow-focus)}.navds-search--error .navds-search__input:not(:hover):not(:disabled){border-color:var(--ac-search-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-search-error-border,var(--a-border-danger))}.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-search-error-border,var(--a-border-danger)),var(--a-shadow-focus)}.navds-search__button-clear,.navds-search__button-search:focus,.navds-search__input:focus{z-index:1}
@@ -0,0 +1,217 @@
1
+ /**************************
2
+ * .navds-grid *
3
+ **************************/
4
+
5
+ .navds-grid {
6
+ display: grid;
7
+ grid-template-columns: repeat(12, minmax(0, 1fr));
8
+ grid-gap: var(--a-spacing-4);
9
+ }
10
+
11
+ @media (min-width: 448px) {
12
+ .navds-grid {
13
+ grid-gap: var(--a-spacing-6);
14
+ }
15
+ }
16
+
17
+ /**************************
18
+ * .navds-grid__cell *
19
+ **************************/
20
+
21
+ .navds-grid__cell--xs-1 {
22
+ grid-column: span 1;
23
+ }
24
+
25
+ .navds-grid__cell--xs-2 {
26
+ grid-column: span 2;
27
+ }
28
+
29
+ .navds-grid__cell--xs-3 {
30
+ grid-column: span 3;
31
+ }
32
+
33
+ .navds-grid__cell--xs-4 {
34
+ grid-column: span 4;
35
+ }
36
+
37
+ .navds-grid__cell--xs-5 {
38
+ grid-column: span 5;
39
+ }
40
+
41
+ .navds-grid__cell--xs-6 {
42
+ grid-column: span 6;
43
+ }
44
+
45
+ .navds-grid__cell--xs-7 {
46
+ grid-column: span 7;
47
+ }
48
+
49
+ .navds-grid__cell--xs-8 {
50
+ grid-column: span 8;
51
+ }
52
+
53
+ .navds-grid__cell--xs-9 {
54
+ grid-column: span 9;
55
+ }
56
+
57
+ .navds-grid__cell--xs-10 {
58
+ grid-column: span 10;
59
+ }
60
+
61
+ .navds-grid__cell--xs-11 {
62
+ grid-column: span 11;
63
+ }
64
+
65
+ .navds-grid__cell--xs-12 {
66
+ grid-column: span 12;
67
+ }
68
+
69
+ @media (min-width: 448px) {
70
+ .navds-grid__cell--sm-1 {
71
+ grid-column: span 1;
72
+ }
73
+
74
+ .navds-grid__cell--sm-2 {
75
+ grid-column: span 2;
76
+ }
77
+
78
+ .navds-grid__cell--sm-3 {
79
+ grid-column: span 3;
80
+ }
81
+
82
+ .navds-grid__cell--sm-4 {
83
+ grid-column: span 4;
84
+ }
85
+
86
+ .navds-grid__cell--sm-5 {
87
+ grid-column: span 5;
88
+ }
89
+
90
+ .navds-grid__cell--sm-6 {
91
+ grid-column: span 6;
92
+ }
93
+
94
+ .navds-grid__cell--sm-7 {
95
+ grid-column: span 7;
96
+ }
97
+
98
+ .navds-grid__cell--sm-8 {
99
+ grid-column: span 8;
100
+ }
101
+
102
+ .navds-grid__cell--sm-9 {
103
+ grid-column: span 9;
104
+ }
105
+
106
+ .navds-grid__cell--sm-10 {
107
+ grid-column: span 10;
108
+ }
109
+
110
+ .navds-grid__cell--sm-11 {
111
+ grid-column: span 11;
112
+ }
113
+
114
+ .navds-grid__cell--sm-12 {
115
+ grid-column: span 12;
116
+ }
117
+ }
118
+
119
+ @media (min-width: 648px) {
120
+ .navds-grid__cell--md-1 {
121
+ grid-column: span 1;
122
+ }
123
+
124
+ .navds-grid__cell--md-2 {
125
+ grid-column: span 2;
126
+ }
127
+
128
+ .navds-grid__cell--md-3 {
129
+ grid-column: span 3;
130
+ }
131
+
132
+ .navds-grid__cell--md-4 {
133
+ grid-column: span 4;
134
+ }
135
+
136
+ .navds-grid__cell--md-5 {
137
+ grid-column: span 5;
138
+ }
139
+
140
+ .navds-grid__cell--md-6 {
141
+ grid-column: span 6;
142
+ }
143
+
144
+ .navds-grid__cell--md-7 {
145
+ grid-column: span 7;
146
+ }
147
+
148
+ .navds-grid__cell--md-8 {
149
+ grid-column: span 8;
150
+ }
151
+
152
+ .navds-grid__cell--md-9 {
153
+ grid-column: span 9;
154
+ }
155
+
156
+ .navds-grid__cell--md-10 {
157
+ grid-column: span 10;
158
+ }
159
+
160
+ .navds-grid__cell--md-11 {
161
+ grid-column: span 11;
162
+ }
163
+
164
+ .navds-grid__cell--md-12 {
165
+ grid-column: span 12;
166
+ }
167
+ }
168
+
169
+ @media (min-width: 960px) {
170
+ .navds-grid__cell--lg-1 {
171
+ grid-column: span 1;
172
+ }
173
+
174
+ .navds-grid__cell--lg-2 {
175
+ grid-column: span 2;
176
+ }
177
+
178
+ .navds-grid__cell--lg-3 {
179
+ grid-column: span 3;
180
+ }
181
+
182
+ .navds-grid__cell--lg-4 {
183
+ grid-column: span 4;
184
+ }
185
+
186
+ .navds-grid__cell--lg-5 {
187
+ grid-column: span 5;
188
+ }
189
+
190
+ .navds-grid__cell--lg-6 {
191
+ grid-column: span 6;
192
+ }
193
+
194
+ .navds-grid__cell--lg-7 {
195
+ grid-column: span 7;
196
+ }
197
+
198
+ .navds-grid__cell--lg-8 {
199
+ grid-column: span 8;
200
+ }
201
+
202
+ .navds-grid__cell--lg-9 {
203
+ grid-column: span 9;
204
+ }
205
+
206
+ .navds-grid__cell--lg-10 {
207
+ grid-column: span 10;
208
+ }
209
+
210
+ .navds-grid__cell--lg-11 {
211
+ grid-column: span 11;
212
+ }
213
+
214
+ .navds-grid__cell--lg-12 {
215
+ grid-column: span 12;
216
+ }
217
+ }
@@ -0,0 +1 @@
1
+ .navds-grid{grid-gap:var(--a-spacing-4);display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}@media (min-width:448px){.navds-grid{grid-gap:var(--a-spacing-6)}}.navds-grid__cell--xs-1{grid-column:span 1}.navds-grid__cell--xs-2{grid-column:span 2}.navds-grid__cell--xs-3{grid-column:span 3}.navds-grid__cell--xs-4{grid-column:span 4}.navds-grid__cell--xs-5{grid-column:span 5}.navds-grid__cell--xs-6{grid-column:span 6}.navds-grid__cell--xs-7{grid-column:span 7}.navds-grid__cell--xs-8{grid-column:span 8}.navds-grid__cell--xs-9{grid-column:span 9}.navds-grid__cell--xs-10{grid-column:span 10}.navds-grid__cell--xs-11{grid-column:span 11}.navds-grid__cell--xs-12{grid-column:span 12}@media (min-width:448px){.navds-grid__cell--sm-1{grid-column:span 1}.navds-grid__cell--sm-2{grid-column:span 2}.navds-grid__cell--sm-3{grid-column:span 3}.navds-grid__cell--sm-4{grid-column:span 4}.navds-grid__cell--sm-5{grid-column:span 5}.navds-grid__cell--sm-6{grid-column:span 6}.navds-grid__cell--sm-7{grid-column:span 7}.navds-grid__cell--sm-8{grid-column:span 8}.navds-grid__cell--sm-9{grid-column:span 9}.navds-grid__cell--sm-10{grid-column:span 10}.navds-grid__cell--sm-11{grid-column:span 11}.navds-grid__cell--sm-12{grid-column:span 12}}@media (min-width:648px){.navds-grid__cell--md-1{grid-column:span 1}.navds-grid__cell--md-2{grid-column:span 2}.navds-grid__cell--md-3{grid-column:span 3}.navds-grid__cell--md-4{grid-column:span 4}.navds-grid__cell--md-5{grid-column:span 5}.navds-grid__cell--md-6{grid-column:span 6}.navds-grid__cell--md-7{grid-column:span 7}.navds-grid__cell--md-8{grid-column:span 8}.navds-grid__cell--md-9{grid-column:span 9}.navds-grid__cell--md-10{grid-column:span 10}.navds-grid__cell--md-11{grid-column:span 11}.navds-grid__cell--md-12{grid-column:span 12}}@media (min-width:960px){.navds-grid__cell--lg-1{grid-column:span 1}.navds-grid__cell--lg-2{grid-column:span 2}.navds-grid__cell--lg-3{grid-column:span 3}.navds-grid__cell--lg-4{grid-column:span 4}.navds-grid__cell--lg-5{grid-column:span 5}.navds-grid__cell--lg-6{grid-column:span 6}.navds-grid__cell--lg-7{grid-column:span 7}.navds-grid__cell--lg-8{grid-column:span 8}.navds-grid__cell--lg-9{grid-column:span 9}.navds-grid__cell--lg-10{grid-column:span 10}.navds-grid__cell--lg-11{grid-column:span 11}.navds-grid__cell--lg-12{grid-column:span 12}}
@@ -0,0 +1,62 @@
1
+ /**
2
+ * GuidePanel component
3
+ */
4
+ .navds-guide-panel {
5
+ position: relative;
6
+ padding-left: var(--a-spacing-10);
7
+ }
8
+ .navds-guide-panel__content {
9
+ background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
10
+ border-radius: var(--a-border-radius-medium);
11
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
12
+ min-height: 7.25rem;
13
+ padding: var(--a-spacing-6);
14
+ padding-left: var(--a-spacing-14);
15
+ }
16
+ .navds-guide-panel--poster {
17
+ padding-left: 0;
18
+ padding-top: var(--a-spacing-12);
19
+ }
20
+ .navds-guide-panel--poster .navds-guide-panel__content {
21
+ padding: var(--a-spacing-8);
22
+ padding-top: var(--a-spacing-16);
23
+ }
24
+ .navds-guide-panel .navds-guide {
25
+ position: absolute;
26
+ top: var(--a-spacing-4);
27
+ transform: translateX(-50%);
28
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
29
+ }
30
+ .navds-guide-panel--poster .navds-guide {
31
+ left: 50%;
32
+ top: 0;
33
+ }
34
+ /**
35
+ * Guide component
36
+ */
37
+ .navds-guide {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ border-radius: var(--a-border-radius-full);
42
+ }
43
+ /* Guide illustration frame */
44
+ .navds-guide__illustration {
45
+ background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
46
+ border-radius: var(--a-border-radius-full);
47
+ overflow: hidden;
48
+ }
49
+ .navds-guide__illustration svg,
50
+ .navds-guide__illustration img {
51
+ height: 100%;
52
+ width: 100%;
53
+ }
54
+ /* Illustration sizes */
55
+ .navds-guide__illustration--small {
56
+ height: 5rem;
57
+ width: 5rem;
58
+ }
59
+ .navds-guide__illustration--medium {
60
+ height: 6rem;
61
+ width: 6rem;
62
+ }
@@ -0,0 +1 @@
1
+ .navds-guide-panel{padding-left:var(--a-spacing-10);position:relative}.navds-guide-panel__content{background-color:var(--ac-guide-panel-bg,var(--a-surface-default));border:2px solid var(--ac-guide-panel-border,var(--a-border-action));border-radius:var(--a-border-radius-medium);min-height:7.25rem;padding:var(--a-spacing-6);padding-left:var(--a-spacing-14)}.navds-guide-panel--poster{padding-left:0;padding-top:var(--a-spacing-12)}.navds-guide-panel--poster .navds-guide-panel__content{padding:var(--a-spacing-8);padding-top:var(--a-spacing-16)}.navds-guide-panel .navds-guide{border:2px solid var(--ac-guide-panel-border,var(--a-border-action));position:absolute;top:var(--a-spacing-4);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.navds-guide-panel--poster .navds-guide{left:50%;top:0}.navds-guide{align-items:center;display:flex;justify-content:center}.navds-guide,.navds-guide__illustration{border-radius:var(--a-border-radius-full)}.navds-guide__illustration{background:var(--ac-guide-panel-illustration-bg,var(--a-surface-action-subtle));overflow:hidden}.navds-guide__illustration img,.navds-guide__illustration svg{height:100%;width:100%}.navds-guide__illustration--small{height:5rem;width:5rem}.navds-guide__illustration--medium{height:6rem;width:6rem}
@@ -0,0 +1,45 @@
1
+ .navds-help-text__button {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: 0;
5
+ cursor: pointer;
6
+ background-color: transparent;
7
+ border-radius: var(--a-border-radius-full);
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ color: var(--ac-help-text-button-color, var(--a-surface-action));
12
+ font-size: 1.5rem;
13
+ }
14
+
15
+ .navds-help-text__button:focus {
16
+ outline: none;
17
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
18
+ }
19
+
20
+ .navds-help-text__icon {
21
+ border-radius: var(--a-border-radius-full);
22
+ }
23
+
24
+ .navds-help-text__popover > .navds-popover__arrow {
25
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
26
+ }
27
+
28
+ .navds-help-text__popover.navds-popover {
29
+ background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
30
+ max-width: 65ch;
31
+
32
+ --ac-popover-border: var(--a-border-info);
33
+ }
34
+
35
+ .navds-help-text__icon--filled {
36
+ display: none;
37
+ }
38
+
39
+ .navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
40
+ display: none;
41
+ }
42
+
43
+ .navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
44
+ display: inherit;
45
+ }
@@ -0,0 +1 @@
1
+ .navds-help-text__button{align-items:center;background-color:transparent;border:0;border-radius:var(--a-border-radius-full);color:var(--ac-help-text-button-color,var(--a-surface-action));cursor:pointer;display:flex;font-size:1.5rem;justify-content:center;margin:0;padding:0}.navds-help-text__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}.navds-help-text__icon{border-radius:var(--a-border-radius-full)}.navds-help-text__popover.navds-popover,.navds-help-text__popover>.navds-popover__arrow{background-color:var(--ac-help-text-popover-bg,var(--a-surface-info-subtle))}.navds-help-text__popover.navds-popover{--ac-popover-border:var(--a-border-info);max-width:65ch}.navds-help-text__icon--filled{display:none}.navds-help-text__button:where(:hover,:focus,[aria-expanded=true])>.navds-help-text__icon{display:none}.navds-help-text__button:where(:hover,:focus,[aria-expanded=true])>.navds-help-text__icon--filled{display:inherit}