@navikt/ds-css 1.3.34 → 1.3.37-alpha.1

package/form/text-field.css

@@ -1,92 +0,0 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-text-field-color-text: var(--navds-semantic-color-text);
-  --navds-text-field-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-text-field-color-border: var(--navds-semantic-color-border);
-  --navds-text-field-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-text-field-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-text-field-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-text-field-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-text-field-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-  --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
-  --navds-text-field-color-placeholder-text: var(--navds-semantic-color-text-muted);
-}
-
-[data-theme="dark"] {
-  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
-  --navds-text-field-color-background: var(--navds-semantic-color-component-background-inverted);
-  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
-  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
-  --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
-}
-
-.navds-text-field__input {
-  appearance: none;
-  padding: var(--navds-spacing-2);
-  background-color: var(--navds-text-field-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-text-field-color-border);
-  min-height: 48px;
-  width: 100%;
-  color: var(--navds-text-field-color-text);
-}
-
-.navds-text-field__input[size] {
-  width: auto;
-}
-
-.navds-text-field__input::placeholder {
-  color: var(--navds-text-field-color-placeholder-text);
-}
-
-.navds-form-field--small .navds-text-field__input {
-  padding: 0 0.25rem;
-  min-height: 32px;
-}
-
-.navds-text-field__input:hover {
-  border-color: var(--navds-text-field-color-border-hover);
-}
-
-.navds-text-field__input:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-/**
-  Error handling
-*/
-.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
-  border-color: var(--navds-text-field-color-border-error);
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error);
-}
-
-.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-text-field-color-border-error), var(--navds-shadow-focus);
-}
-
-/* Disabled handling */
-.navds-text-field__input:disabled {
-  background-color: var(--navds-text-field-color-background);
-  border-color: var(--navds-text-field-color-border);
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-text-field__input[readonly] {
-  background-color: var(--navds-text-field-color-background);
-  border-color: var(--navds-text-field-color-border);
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-/**
-  * Removes default search icon
-  */
-.navds-text-field__input[type="search"]::-webkit-search-decoration,
-.navds-text-field__input[type="search"]::-webkit-search-cancel-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-button,
-.navds-text-field__input[type="search"]::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}

package/form/textarea.css

@@ -1,92 +0,0 @@
-:root,
-:host {
-  --navds-textarea-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-textarea-color-border: var(--navds-semantic-color-border);
-  --navds-textarea-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-textarea-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-counter-text: var(--navds-semantic-color-text-muted);
-  --navds-textarea-color-counter-text-error: var(--navds-semantic-color-interaction-danger);
-  --navds-textarea-color-text-disabled: var(--navds-semantic-color-text);
-  --navds-textarea-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-textarea-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-}
-
-.navds-textarea__wrapper {
-  position: relative;
-  width: 100%;
-}
-
-.navds-textarea__input {
-  appearance: none;
-  padding: var(--navds-spacing-2);
-  background-color: var(--navds-textarea-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-textarea-color-border);
-  resize: none;
-  width: 100%;
-  display: block;
-  color: var(--navds-text-field-color-text);
-}
-
-.navds-textarea--counter {
-  padding-bottom: var(--navds-spacing-8);
-}
-
-.navds-textarea__input:hover {
-  border-color: var(--navds-textarea-color-border-hover);
-}
-
-.navds-textarea__input:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
-}
-
-.navds-form-field--small .navds-textarea__input {
-  padding: 6px;
-}
-
-.navds-form-field--small .navds-textarea--counter.navds-textarea__input {
-  padding-bottom: var(--navds-spacing-7);
-}
-
-.navds-textarea__counter {
-  pointer-events: none;
-  color: var(--navds-textarea-color-counter-text);
-  font-style: italic;
-  position: absolute;
-  text-align: left;
-  left: 1px;
-  bottom: 1px;
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-}
-
-.navds-textarea__counter--error {
-  color: var(--navds-textarea-color-counter-text-error);
-}
-
-.navds-textarea--resize .navds-textarea__input {
-  resize: both;
-}
-
-/**
-  Error handling
-*/
-.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-textarea-color-shadow-error);
-  border-color: var(--navds-textarea-color-border-error);
-}
-
-.navds-textarea__input:disabled {
-  background-color: var(--navds-textarea-color-background);
-  border-color: var(--navds-textarea-color-border);
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.navds-textarea__input[readonly] {
-  background-color: var(--navds-textarea-color-background);
-  border-color: var(--navds-textarea-color-border);
-  box-shadow: none;
-  cursor: not-allowed;
-}

package/grid.css

@@ -1,217 +0,0 @@
-/**************************
- * .navds-grid *
- **************************/
-
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-spacing-4);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--navds-spacing-6);
-  }
-}
-
-/**************************
- * .navds-grid__cell *
- **************************/
-
-.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;
-  }
-}

package/guide-panel.css

@@ -1,77 +0,0 @@
-:root,
-:host {
-  --navds-guide-panel-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-guide-panel-color-border: var(--navds-global-color-blue-400);
-  --navds-guide-panel-color-illustration-background: var(--navds-global-color-blue-200);
-}
-
-/**
- * GuidePanel component
- */
-.navds-guide-panel {
-  position: relative;
-  padding-left: var(--navds-spacing-10);
-}
-
-.navds-guide-panel__content {
-  background-color: var(--navds-guide-panel-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 2px solid var(--navds-guide-panel-color-border);
-  min-height: 7.25rem;
-  padding: var(--navds-spacing-6);
-  padding-left: var(--navds-spacing-14);
-}
-
-.navds-guide-panel--poster {
-  padding-left: 0;
-  padding-top: var(--navds-spacing-12);
-}
-
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--navds-spacing-8);
-  padding-top: var(--navds-spacing-16);
-}
-
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--navds-spacing-4);
-  transform: translateX(-50%);
-}
-
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
-}
-
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--navds-guide-panel-color-illustration-background);
-  border-radius: var(--navds-border-radius-full);
-  overflow: hidden;
-}
-
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
-}
-
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
-}
-
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
-}

package/help-text.css

@@ -1,56 +0,0 @@
-:root,
-:host {
-  --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-hover: var(--navds-semantic-color-component-background-light);
-  --navds-help-text-color-focus: var(--navds-semantic-color-component-background-light);
-  --navds-help-text-color-background-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-background-focus: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-help-text-color-popover-background: var(--navds-semantic-color-feedback-info-background);
-}
-
-.navds-help-text__button {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: transparent;
-  border-radius: var(--navds-border-radius-full);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--navds-help-text-color);
-  font-size: 1.5rem;
-}
-
-.navds-help-text__button:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--navds-global-color-white), 0 0 0 4px var(--navds-semantic-color-focus);
-}
-
-.navds-help-text__icon {
-  border-radius: var(--navds-border-radius-full);
-}
-
-.navds-help-text__popover > .navds-popover__arrow {
-  background-color: var(--navds-help-text-color-popover-background);
-}
-
-.navds-help-text__popover.navds-popover {
-  background-color: var(--navds-help-text-color-popover-background);
-  max-width: 65ch;
-
-  --navds-popover-color-border: rgba(38 38 38 / 0.22);
-}
-
-.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;
-}

package/index.css

@@ -1,27 +0,0 @@
-@charset "UTF-8";
-@import "baseline/baseline.css";
-@import "typography.css";
-@import "grid.css";
-@import "accordion.css";
-@import "alert.css";
-@import "button.css";
-@import "content-container.css";
-@import "chat.css";
-@import "guide-panel.css";
-@import "form/index.css";
-@import "help-text.css";
-@import "link.css";
-@import "loader.css";
-@import "modal.css";
-@import "pagination.css";
-@import "popover.css";
-@import "date.css";
-@import "tag.css";
-@import "tooltip.css";
-@import "toggle-group.css";
-@import "panel.css";
-@import "link-panel.css";
-@import "read-more.css";
-@import "stepper.css";
-@import "table.css";
-@import "tabs.css";

package/link-panel.css

@@ -1,45 +0,0 @@
-:root,
-:host {
-  --navds-link-panel-color-text: var(--navds-semantic-color-text);
-  --navds-link-panel-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-link-panel-color-title-hover: var(--navds-semantic-color-link);
-}
-
-.navds-link-panel {
-  text-decoration: none;
-  color: var(--navds-link-panel-color-text);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--navds-spacing-4);
-}
-
-.navds-link-panel:hover .navds-link-panel__title {
-  text-decoration: underline;
-  color: var(--navds-link-panel-color-title-hover);
-}
-
-.navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-medium);
-  border-color: var(--navds-link-panel-color-border-hover);
-}
-
-.navds-link-panel:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-link-panel__chevron {
-  flex-shrink: 0;
-  font-size: 1.5rem;
-  transition: transform 200ms;
-}
-
-.navds-link-panel:hover > .navds-link-panel__chevron,
-.navds-link-panel:focus-within > .navds-link-panel__chevron {
-  transform: translateX(4px);
-}
-
-.navds-link-panel__description {
-  margin-top: var(--navds-spacing-1);
-}

package/link.css

@@ -1,54 +0,0 @@
-:root,
-:host {
-  --navds-link-color-text: var(--navds-semantic-color-link);
-  --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-background-focus: var(--navds-semantic-color-focus);
-  --navds-link-color-background-active: var(--navds-semantic-color-focus);
-  --navds-link-color-icon: var(--navds-semantic-color-link);
-  --navds-link-color-icon-focus: var(--navds-semantic-color-text-inverted);
-  --navds-link-color-on-info-background: var(--navds-semantic-color-text);
-  --navds-link-color-on-error-background: var(--navds-semantic-color-text);
-}
-
-.navds-link {
-  color: var(--navds-link-color-text);
-  text-decoration: underline;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--navds-spacing-1);
-}
-
-.navds-alert--info .navds-link {
-  color: var(--navds-link-color-on-info-background);
-}
-
-.navds-alert--error .navds-link,
-.navds-confirmation-panel--error .navds-link {
-  color: var(--navds-link-color-on-error-background);
-}
-
-.navds-link:hover {
-  text-decoration: none;
-}
-
-.navds-link:focus {
-  outline: none;
-  color: var(--navds-link-color-text-focus);
-  text-decoration: none;
-  background-color: var(--navds-link-color-background-focus);
-  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
-}
-
-.navds-link:active {
-  outline: none;
-  color: var(--navds-link-color-text-active);
-  text-decoration: none;
-  background-color: var(--navds-link-color-background-active);
-  box-shadow: 0 0 0 2px var(--navds-semantic-color-focus);
-}
-
-.navds-link svg {
-  color: inherit;
-  flex-shrink: 0;
-}