@inera/ids-design 5.3.0 → 5.4.0

package/src/themes/inera-admin/inera-admin-tokens.css

@@ -0,0 +1 @@
+@import '../inera/inera-tokens';

package/src/themes/inera-admin/inera-admin.scss

@@ -0,0 +1,96 @@
+@use "../inera/inera";
+
+:root,
+:host {
+  /* Input */
+  --IDS-INPUT__HEIGHT: 2.25rem;
+  --IDS-INPUT__PADDING: 0 1rem;
+  --IDS-INPUT__ICON-RIGHT: 1rem;
+
+  /* Button */
+  --IDS-BUTTON--SEARCH-M__HEIGHT: 2.25rem;
+  --IDS-BUTTON--SEARCH-M__FONT-SIZE: 1rem;
+  --IDS-BUTTON--SEARCH-M__PADDING: 0.5rem 1.5rem;
+  --IDS-BUTTON--FAB__ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+
+  /* Select */
+  --IDS-SELECT__LINE-HEIGHT: 2.125rem;
+
+  /* Textarea */
+  --IDS-TEXTAREA__PADDING: .5rem .625rem;
+
+  /* Description list*/
+  --IDS-DESCRIPTION-LIST__DISPLAY: flex;
+  --IDS-DESCRIPTION-LIST__BORDER: 0;
+  --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
+  --IDS-DESCRIPTION-LIST__PADDING: 0;
+  --IDS-DESCRIPTION-LIST__TERM-BACKGROUND-COLOR: transparent;
+  --IDS-DESCRIPTION-LIST__DESCRIPTION-MARGIN-BOTTOM: 0.75rem;
+
+  --IDS-DESCRIPTION-LIST--COLUMN__DISPLAY: grid;
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER: 0.063rem solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DESCRIPTION-LIST--COLUMN__BORDER-RADIUS: 0.313rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__PADDING: 0.5rem 1rem;
+  --IDS-DESCRIPTION-LIST--COLUMN__TERM-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DESCRIPTION-LIST--COLUMN__DESCRIPTION-MARGIN-BOTTOM: 0;
+
+  /* Footer old */
+  --footer-headline_color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-headline-sub_color: var(--IDS-COLOR-PRIMARY-40);
+  --footer_background-color: var(--IDS-COLOR-SECONDARY-90);
+  --footer-content_color: var(--IDS-COLOR-ON-SECONDARY-90);
+  --footer-sub_background-color: var(--IDS-COLOR-PRIMARY-40);
+  --footer-link_color: var(--IDS-COLOR-PRIMARY-40);
+
+  /* Header */
+  --IDS-HEADER-INERA__USER-ICON-COLOR: var(--IDS-COLOR-PRIMARY-40);
+  /* old */
+  --header-item-icon-color2: var(--IDS-COLOR-PRIMARY-40);
+  --header-inner_border-bottom: 0.063rem solid var(--IDS-COLOR-NEUTRAL-90);
+  --header-inner_background: var(--IDS-COLOR-BACKGROUND);
+  --header-nav-item-after_background: var(--IDS-COLOR-PRIMARY-40);
+  --header-nav-item_font-weight: 600;
+  --header-avatar-chevron-icon: var(--IDS-COLOR-ACCENT-40);
+
+  /* Mobile menu */
+  /* VARIATION 2 - Level 1 */
+  --IDS-MOBILE-MENU-2-ITEM__ICON-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-MOBILE-MENU-2-ITEM__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-2-ITEM__ICON__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-2-ITEM--FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* VARIATION 2 - Level 2 */
+  --IDS-MOBILE-MENU-2-ITEM--L2__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L2__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-2-ITEM--L2__ICON-COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L2__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L2-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-2-ITEM--L2-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+
+  /* VARIATION 2 - Level 3 */
+  --IDS-MOBILE-MENU-2-ITEM--L3__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L3__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BORDER-BOTTOM-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-2-ITEM--L3__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__COLOR: var(--IDS-COLOR-ON-SECONDARY-90);
+  --IDS-MOBILE-MENU-2-ITEM--L3-HOVER__BEFORE-BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-30);
+  --IDS-MOBILE-MENU-2-ITEM--L3-FOCUS__OUTLINE-COLOR: var(--IDS-FOCUS__OUTLINE-COLOR);
+}
+
+/* Thematic classes */
+.ids-show-inera-admin {
+  display: block;
+}
+.ids-show-inera-admin-force {
+  display: block !important;
+}
+.ids-show-inera {
+  display: none;
+}

package/src/themes/reset.scss

@@ -0,0 +1,61 @@
+.ids *,
+.ids *::before,
+.ids *::after {
+  box-sizing: border-box;
+}
+
+body.ids,
+.ids h1,
+.ids h2,
+.ids h3,
+.ids h4,
+.ids h5,
+.ids h6,
+.ids p,
+.ids dl,
+.ids dd,
+.ids figure,
+.ids picture {
+  margin: 0;
+}
+
+body.ids {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  font-size: 1rem;
+  min-height: 100%;
+}
+
+/* make images easier to work with */
+.ids img,
+.ids picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* make form elements easier to work with */
+.ids input,
+.ids button,
+.ids textarea,
+.ids select {
+  font: inherit;
+}
+
+.ids ul[class],
+.ids ol[class] {
+  list-style: none;
+  padding: 0;
+}
+
+/* remove animations for people who've turned them off */
+@media (prefers-reduced-motion: reduce) {
+  .ids *,
+  .ids *::before,
+  .ids *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}