@erst-vg/vg-design-wrapper 2.0.2 → 2.1.0

package/src/styles/vg/buttons/_vg-buttons.scss

@@ -1,365 +1,365 @@
-@use './../vg-colors' as *;
-@use './../mixins/vg-mediaquery-helpers' as *;
-
-.button {
-  font-size: 16px;
-  font-weight: 400 !important;
-  line-height: 1.5 !important;
-  max-height: unset;
-  cursor: pointer;
-  border-radius: 20px;
-  display: inline-block;
-  min-height: 40px;
-  width: auto;
-
-  span + .icon-svg {
-    margin: 0 0 2px 5px;
-  }
-
-  .icon-svg {
-    margin-top: 0;
-    margin-right: 8px;
-  }
-
-  &:disabled,
-  &.disabled {
-    opacity: 0.6 !important;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline-width: 2px;
-  }
-
-  span {
-    @include media-breakpoint-down-em(sm) {
-      word-break: break-word;
-    }
-  }
-
-  // Skal overskrive regel fra Designsystemet
-  + button {
-    margin-top: 0;
-    margin-left: 8px;
-  }
-}
-
-.button-primary {
-  color: var(--button-color) !important;
-  background-color: var(--button-bg-color) !important;
-  border: none;
-  padding: 7px 20px 8px !important;
-
-  &:hover {
-    background-color: var(--button-hover-bg-color) !important;
-    border-color: var(--button-hover-bg-color) !important;
-  }
-
-  &:active {
-    background-color: var(--button-active-bg-color) !important;
-    border-color: var(--button-active-bg-color) !important;
-  }
-
-  &.warning {
-    color: white !important;
-    background-color: $color-button-warning !important;
-
-    &:hover {
-      background-color: $color-button-warning-hover !important;
-    }
-
-    &:active {
-      background-color: $color-button-warning-active !important;
-    }
-  }
-
-  svg {
-    fill: var(--button-color) !important;
-  }
-}
-
-// button-filled er kun for at være bagudkompatibel med knapper lavet i tiny-mce og må ikke bruges i koden /TNB
-.button-filled {
-  @extend .button-primary;
-}
-
-.button-secondary {
-  color: $font-color !important;
-  background-color: $color-white !important;
-  border: 2px solid $font-color !important;
-  text-decoration: none;
-  padding: 5px 20px 6px !important;
-
-  &.button-large {
-    padding: 10px 28px !important;
-  }
-
-  &:hover,
-  &:active {
-    color: $color-tag-text !important;
-    border-color: $font-color !important;
-  }
-
-  &:disabled,
-  &.button:disabled {
-    color: $color-tag-text !important;
-    border-color: $color-tag-text !important;
-  }
-
-  &-filled {
-    background-color: $color-very-dark-gray !important;
-    color: $color-white !important;
-
-    &:hover {
-      color: $color-white !important;
-    }
-  }
-}
-
-.button-secondary-dark {
-  color: $color-white !important;
-  background-color: rgba($color-white, 0.1) !important;
-  border: 2px solid $color-white !important;
-  text-decoration: none;
-  padding: 5px 20px 6px !important;
-
-  &:hover,
-  &:active {
-    border-color: $color-white !important;
-  }
-
-  &:focus {
-    border-color: $color-white !important;
-    outline: 2px solid $color-white;
-  }
-
-  &:disabled,
-  &.disabled {
-    border-color: $color-white !important;
-    opacity: 0.6;
-  }
-}
-
-// button-tertiary og button-quaternary er kun for at være bagudkompatibel med tredjeparts apps og må ikke bruges i koden /TNB
-.button-tertiary,
-.button-quaternary {
-  @extend .button-secondary;
-}
-
-.carousel-button {
-  background-color: $color-white;
-  border: 2px solid transparent;
-  padding: 0;
-  color: $color-black;
-  height: 56px;
-  width: 56px;
-  line-height: 1;
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .icon-svg {
-    color: var(--site-primary);
-    height: auto;
-    max-height: 24px;
-    width: auto;
-    max-width: 24px;
-  }
-
-  &:hover {
-    border-color: $color-grayish-blue;
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:active {
-    border-color: $color-black;
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:focus {
-    border-color: $color-grayish-blue;
-    outline: 2px solid;
-  }
-
-  &.disabled,
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  &:visited {
-    color: $color-black;
-  }
-
-  @include media-breakpoint-down(sm) {
-    width: 40px;
-    height: 40px;
-  }
-}
-
-.text-button {
-  padding: 0px;
-  border: none;
-  background-color: transparent;
-  color: $font-color;
-  min-height: 20px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.3;
-  width: auto;
-  cursor: pointer;
-
-  &:disabled {
-    text-decoration: none;
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    color: $font-color;
-  }
-}
-
-.button-link {
-  background-color: transparent;
-  color: $font-color;
-  box-shadow: none;
-  border: 0;
-  text-decoration: underline;
-  padding: 0;
-  text-align: left;
-  cursor: pointer;
-
-  &:disabled {
-    text-decoration: none;
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}
-
-.no-decoration {
-  text-decoration: none !important;
-}
-
-.redaktion {
-  button.lightbg {
-    color: $color-black;
-
-    &:hover {
-      color: $color-redaktion-lightbg-hover;
-    }
-
-    &:active {
-      color: $color-redaktion-lightbg-active;
-    }
-
-    &:disabled {
-      color: $color-redaktion-lightbg-disabled;
-    }
-  }
-
-  button.darkbg {
-    color: white;
-
-    &:hover {
-      color: $color-redaktion-light-blue;
-    }
-
-    &:active {
-      color: $color-white;
-    }
-
-    &:disabled {
-      color: $color-darkbg-disabled;
-    }
-  }
-
-  .text-button-blue {
-    border: none;
-    background-color: inherit;
-    padding: 0;
-    font-weight: 400;
-    text-decoration: underline;
-    color: $color-blue;
-
-    &:hover,
-    &.button-hover {
-      color: $color-blue-dark;
-    }
-
-    &:active,
-    &.button-active {
-      color: $primary-medium;
-    }
-
-    &.focus,
-    &:focus {
-      color: $primary-medium;
-    }
-
-    &:disabled,
-    &.disabled {
-      color: $color-blue !important;
-
-      &:hover {
-        color: $color-blue-dark !important;
-      }
-    }
-  }
-}
-
-.slim-button {
-  background-color: $color-white;
-  border-color: $color-redaktion-border;
-  border-width: 1px;
-  color: $font-color;
-  height: 32px;
-  min-height: 32px;
-  font-weight: 400;
-  font-size: 1em;
-  white-space: nowrap;
-  line-height: 1em;
-  padding-top: 0px;
-  padding-bottom: 0px;
-
-  &:hover,
-  &:focus {
-    color: $font-color;
-    border-color: $font-color;
-    outline: none !important;
-    box-shadow: none;
-  }
-
-  &:visited {
-    color: $font-color;
-  }
-}
-
-.mitid-button {
-  color: $color-white;
-  background-color: $color-button-mitid;
-  border: none;
-  padding: 0 24px;
-  font-size: 14px;
-  font-weight: 600 !important;
-
-  &:hover {
-    background-color: $color-button-mitid-hover;
-  }
-
-  .icon-svg {
-    width: 61px;
-  }
-}
-
-.white-text,
-.hero-boks .editor-tekst {
-  .button-secondary {
-    @extend .button-secondary-dark;
-  }
-}
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
+.button {
+  font-size: 16px;
+  font-weight: 400 !important;
+  line-height: 1.5 !important;
+  max-height: unset;
+  cursor: pointer;
+  border-radius: 20px;
+  display: inline-block;
+  min-height: 40px;
+  width: auto;
+
+  span + .icon-svg {
+    margin: 0 0 2px 5px;
+  }
+
+  .icon-svg {
+    margin-top: 0;
+    margin-right: 8px;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline-width: 2px;
+  }
+
+  span {
+    @include media-breakpoint-down-em(sm) {
+      word-break: break-word;
+    }
+  }
+
+  // Skal overskrive regel fra Designsystemet
+  + button {
+    margin-top: 0;
+    margin-left: 8px;
+  }
+}
+
+.button-primary {
+  color: var(--button-color) !important;
+  background-color: var(--button-bg-color) !important;
+  border: none;
+  padding: 7px 20px 8px !important;
+
+  &:hover {
+    background-color: var(--button-hover-bg-color) !important;
+    border-color: var(--button-hover-bg-color) !important;
+  }
+
+  &:active {
+    background-color: var(--button-active-bg-color) !important;
+    border-color: var(--button-active-bg-color) !important;
+  }
+
+  &.warning {
+    color: white !important;
+    background-color: $color-button-warning !important;
+
+    &:hover {
+      background-color: $color-button-warning-hover !important;
+    }
+
+    &:active {
+      background-color: $color-button-warning-active !important;
+    }
+  }
+
+  svg {
+    fill: var(--button-color) !important;
+  }
+}
+
+// button-filled er kun for at være bagudkompatibel med knapper lavet i tiny-mce og må ikke bruges i koden /TNB
+.button-filled {
+  @extend .button-primary;
+}
+
+.button-secondary {
+  color: $font-color !important;
+  background-color: $color-white !important;
+  border: 2px solid $font-color !important;
+  text-decoration: none;
+  padding: 5px 20px 6px !important;
+
+  &.button-large {
+    padding: 10px 28px !important;
+  }
+
+  &:hover,
+  &:active {
+    color: $color-tag-text !important;
+    border-color: $font-color !important;
+  }
+
+  &:disabled,
+  &.button:disabled {
+    color: $color-tag-text !important;
+    border-color: $color-tag-text !important;
+  }
+
+  &-filled {
+    background-color: $color-very-dark-gray !important;
+    color: $color-white !important;
+
+    &:hover {
+      color: $color-white !important;
+    }
+  }
+}
+
+.button-secondary-dark {
+  color: $color-white !important;
+  background-color: rgba($color-white, 0.1) !important;
+  border: 2px solid $color-white !important;
+  text-decoration: none;
+  padding: 5px 20px 6px !important;
+
+  &:hover,
+  &:active {
+    border-color: $color-white !important;
+  }
+
+  &:focus {
+    border-color: $color-white !important;
+    outline: 2px solid $color-white;
+  }
+
+  &:disabled,
+  &.disabled {
+    border-color: $color-white !important;
+    opacity: 0.6;
+  }
+}
+
+// button-tertiary og button-quaternary er kun for at være bagudkompatibel med tredjeparts apps og må ikke bruges i koden /TNB
+.button-tertiary,
+.button-quaternary {
+  @extend .button-secondary;
+}
+
+.carousel-button {
+  background-color: $color-white;
+  border: 2px solid transparent;
+  padding: 0;
+  color: $color-black;
+  height: 56px;
+  width: 56px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon-svg {
+    color: var(--site-primary);
+    height: auto;
+    max-height: 24px;
+    width: auto;
+    max-width: 24px;
+  }
+
+  &:hover {
+    border-color: $color-grayish-blue;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:active {
+    border-color: $color-black;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: $color-grayish-blue;
+    outline: 2px solid;
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &:visited {
+    color: $color-black;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+.text-button {
+  padding: 0px;
+  border: none;
+  background-color: transparent;
+  color: $font-color;
+  min-height: 20px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.3;
+  width: auto;
+  cursor: pointer;
+
+  &:disabled {
+    text-decoration: none;
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    color: $font-color;
+  }
+}
+
+.button-link {
+  background-color: transparent;
+  color: $font-color;
+  box-shadow: none;
+  border: 0;
+  text-decoration: underline;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+
+  &:disabled {
+    text-decoration: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.no-decoration {
+  text-decoration: none !important;
+}
+
+.redaktion {
+  button.lightbg {
+    color: $color-black;
+
+    &:hover {
+      color: $color-redaktion-lightbg-hover;
+    }
+
+    &:active {
+      color: $color-redaktion-lightbg-active;
+    }
+
+    &:disabled {
+      color: $color-redaktion-lightbg-disabled;
+    }
+  }
+
+  button.darkbg {
+    color: white;
+
+    &:hover {
+      color: $color-redaktion-light-blue;
+    }
+
+    &:active {
+      color: $color-white;
+    }
+
+    &:disabled {
+      color: $color-darkbg-disabled;
+    }
+  }
+
+  .text-button-blue {
+    border: none;
+    background-color: inherit;
+    padding: 0;
+    font-weight: 400;
+    text-decoration: underline;
+    color: $color-blue;
+
+    &:hover,
+    &.button-hover {
+      color: $color-blue-dark;
+    }
+
+    &:active,
+    &.button-active {
+      color: $primary-medium;
+    }
+
+    &.focus,
+    &:focus {
+      color: $primary-medium;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: $color-blue !important;
+
+      &:hover {
+        color: $color-blue-dark !important;
+      }
+    }
+  }
+}
+
+.slim-button {
+  background-color: $color-white;
+  border-color: $color-redaktion-border;
+  border-width: 1px;
+  color: $font-color;
+  height: 32px;
+  min-height: 32px;
+  font-weight: 400;
+  font-size: 1em;
+  white-space: nowrap;
+  line-height: 1em;
+  padding-top: 0px;
+  padding-bottom: 0px;
+
+  &:hover,
+  &:focus {
+    color: $font-color;
+    border-color: $font-color;
+    outline: none !important;
+    box-shadow: none;
+  }
+
+  &:visited {
+    color: $font-color;
+  }
+}
+
+.mitid-button {
+  color: $color-white;
+  background-color: $color-button-mitid;
+  border: none;
+  padding: 0 24px;
+  font-size: 14px;
+  font-weight: 600 !important;
+
+  &:hover {
+    background-color: $color-button-mitid-hover;
+  }
+
+  .icon-svg {
+    width: 61px;
+  }
+}
+
+.white-text,
+.hero-boks .editor-tekst {
+  .button-secondary {
+    @extend .button-secondary-dark;
+  }
+}