@fremtind/jokul 0.8.0 → 0.9.0

package/src/components/tooltip/styles/tooltip.css

@@ -0,0 +1,136 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-tooltip-size: 1.5rem;
+  --jkl-tooltip-content-padding: 1rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-tooltip-size: 1.25rem;
+    --jkl-tooltip-content-padding: 0.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-tooltip-size: 1.25rem;
+  --jkl-tooltip-content-padding: 0.5rem;
+}
+
+.jkl-tooltip-trigger {
+  background-color: unset;
+  padding: unset;
+  color: unset;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-trigger {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-tooltip-trigger:active, .jkl-tooltip-trigger:hover, .jkl-tooltip-trigger:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus {
+  --jkl-icon-weight: 500;
+  font-weight: 700;
+  letter-spacing: -0.014em;
+}
+
+.jkl-tooltip-content {
+  --background-color: var(--jkl-color-background-container-inverted);
+  --text-color: var(--jkl-color-text-inverted);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  display: inline-block;
+  min-width: min-content;
+  max-width: min(19.375rem, 100%);
+  padding: var(--jkl-tooltip-content-padding);
+  position: absolute;
+  z-index: 10000;
+}
+.jkl-tooltip-content[data-placement^=top] > .jkl-tooltip-content__arrow {
+  bottom: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=bottom] > .jkl-tooltip-content__arrow {
+  top: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=left] > .jkl-tooltip-content__arrow {
+  right: -0.5rem;
+}
+.jkl-tooltip-content[data-placement^=right] > .jkl-tooltip-content__arrow {
+  left: -0.5rem;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-content {
+    border: 1px solid CanvasText;
+  }
+}
+.jkl-tooltip-content__arrow {
+  overflow: hidden;
+  position: absolute;
+  background-color: var(--background-color);
+  transform: rotate(45deg);
+  height: 1rem;
+  width: 1rem;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-content__arrow {
+    background-color: CanvasText;
+  }
+}
+
+.jkl-tooltip-question-button {
+  --button-color: var(--jkl-color-text-interactive);
+  transition-timing-function: ease-in;
+  transition-duration: 100ms;
+  transition-property: color;
+  cursor: pointer;
+  background-color: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--button-color);
+  transform: translateY(max(0.16em, 0.25rem));
+  font-size: 1.2em;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-tooltip-question-button {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-tooltip-question-button:active, .jkl-tooltip-question-button:hover, .jkl-tooltip-question-button:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-tooltip-question-button:hover {
+  --button-color: var(--jkl-color-text-interactive-hover);
+}

package/src/components/tooltip/styles/tooltip.min.css

@@ -0,0 +1 @@
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.5rem;--jkl-tooltip-content-padding:1rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-tooltip-size:1.25rem;--jkl-tooltip-content-padding:0.5rem}.jkl-tooltip-trigger{background-color:unset;border-style:none;color:unset;padding:unset}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-trigger{border-style:revert}.jkl-tooltip-trigger,.jkl-tooltip-trigger:active,.jkl-tooltip-trigger:focus,.jkl-tooltip-trigger:hover{outline:revert;outline-style:revert}}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigger:focus{--jkl-icon-weight:500;font-weight:700;letter-spacing:-.014em}.jkl-tooltip-content{--background-color:var(--jkl-color-background-container-inverted);--text-color:var(--jkl-color-text-inverted);--jkl-icon-weight:300;background-color:var(--background-color);color:var(--text-color);display:inline-block;font-size:1rem;font-weight:400;line-height:1.5rem;max-width:min(19.375rem,100%);min-width:-webkit-min-content;min-width:min-content;padding:var(--jkl-tooltip-content-padding);position:absolute;z-index:10000}.jkl-tooltip-content[data-placement^=top]>.jkl-tooltip-content__arrow{bottom:-.5rem}.jkl-tooltip-content[data-placement^=bottom]>.jkl-tooltip-content__arrow{top:-.5rem}.jkl-tooltip-content[data-placement^=left]>.jkl-tooltip-content__arrow{right:-.5rem}.jkl-tooltip-content[data-placement^=right]>.jkl-tooltip-content__arrow{left:-.5rem}@media screen and (forced-colors:active){.jkl-tooltip-content{border:1px solid CanvasText}}.jkl-tooltip-content__arrow{background-color:var(--background-color);height:1rem;overflow:hidden;position:absolute;transform:rotate(45deg);width:1rem}@media screen and (forced-colors:active){.jkl-tooltip-content__arrow{background-color:CanvasText}}.jkl-tooltip-question-button{--button-color:var(--jkl-color-text-interactive);align-items:center;background-color:initial;border-style:none;color:var(--button-color);cursor:pointer;display:inline-flex;font-size:1.2em;outline:0;outline-style:none;padding:0;transform:translateY(max(.16em,.25rem));transition-duration:.1s;transition-property:color;transition-timing-function:ease-in}.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-tooltip-question-button{border-style:revert}.jkl-tooltip-question-button,.jkl-tooltip-question-button:active,.jkl-tooltip-question-button:focus,.jkl-tooltip-question-button:hover{outline:revert;outline-style:revert}}.jkl-tooltip-question-button:hover{--button-color:var(--jkl-color-text-interactive-hover)}

package/src/components/tooltip/styles/tooltip.scss

@@ -0,0 +1,105 @@
+@charset "UTF-8";
+@use "../../../core/jkl";
+
+$_tooltip-border-width: jkl.rem(1px);
+$_tooltip-arrow-height: jkl.rem(8px);
+$_focus-ring-distance: jkl.rem(-1px); // Negativ margin for å unngå subpixel mellomrom mellom border og box-shadow
+$_focus-ring-width: jkl.rem(2px);
+
+@include jkl.comfortable-density-variables {
+    --jkl-tooltip-size: #{jkl.rem(24px)};
+    --jkl-tooltip-content-padding: #{jkl.$spacing-m};
+
+    @include jkl.small-device {
+        --jkl-tooltip-size: #{jkl.rem(20px)};
+        --jkl-tooltip-content-padding: #{jkl.$spacing-s};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-tooltip-size: #{jkl.rem(20px)};
+    --jkl-tooltip-content-padding: #{jkl.$spacing-xs};
+}
+
+.jkl-tooltip-trigger {
+    background-color: unset;
+    padding: unset;
+    color: unset;
+
+    @include jkl.reset-outline;
+
+    &:focus {
+        @include jkl.keyboard-navigation {
+            @include jkl.no-grow-bold;
+        }
+    }
+}
+
+.jkl-tooltip-content {
+    --background-color: var(--jkl-color-background-container-inverted);
+    --text-color: var(--jkl-color-text-inverted);
+
+    @include jkl.text-style("small");
+    background-color: var(--background-color);
+    color: var(--text-color);
+    display: inline-block;
+    min-width: min-content;
+    max-width: min(jkl.rem(310px), 100%); // 10px mindre enn smaleste støttede skjerm
+    padding: var(--jkl-tooltip-content-padding);
+    position: absolute;
+    z-index: jkl.$z-index--floating;
+
+    &[data-placement^="top"] > .jkl-tooltip-content__arrow {
+        bottom: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="bottom"] > .jkl-tooltip-content__arrow {
+        top: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="left"] > .jkl-tooltip-content__arrow {
+        right: -#{$_tooltip-arrow-height};
+    }
+
+    &[data-placement^="right"] > .jkl-tooltip-content__arrow {
+        left: -#{$_tooltip-arrow-height};
+    }
+
+    @include jkl.forced-colors-mode {
+        border: 1px solid CanvasText;
+    }
+
+    &__arrow {
+        overflow: hidden;
+        position: absolute;
+        background-color: var(--background-color);
+        transform: rotate(45deg);
+        height: $_tooltip-arrow-height * 2;
+        width: $_tooltip-arrow-height * 2;
+
+        @include jkl.forced-colors-mode {
+            background-color: CanvasText;
+        }
+    }
+}
+
+.jkl-tooltip-question-button {
+    --button-color: var(--jkl-color-text-interactive);
+
+    @include jkl.motion("exit", "snappy");
+    transition-property: color;
+    cursor: pointer;
+    background-color: transparent;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--button-color);
+    transform: translateY(max(0.16em, jkl.rem(4px))); // Cap på 4px
+    font-size: 1.2em;
+
+    @include jkl.reset-outline;
+
+    &:hover {
+        --button-color: var(--jkl-color-text-interactive-hover);
+    }
+}