@helsenorge/designsystem-react 1.0.0-beta104 → 1.0.0-beta108

package/components/Button/styles.module.scss

@@ -1,434 +1,434 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-
-$primaryHoverColor: #08667c0d; //$blueberry700 + '0D';
-$warningHoverColor: #ab7c000d; //$banana700 + '0D';
-$dangerHoverColor: #a31f0e0d; //$cherry700 + '0D';
-$invertedHoverColor: #ffffff0d; //$white + '0D';
-
-.content-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: inherit;
-  height: 100%;
-  &:focus {
-    border-bottom: 1px solid $white;
-  }
-}
-
-.button {
-  // Referanse for grandparent selection i underklassene lenger nede
-  $button: &;
-
-  padding: 0 1.5rem;
-  min-height: 2.5rem;
-  font-size: 1.125rem;
-  font-family: inherit;
-  font-weight: 600;
-  display: inline-block;
-  box-sizing: border-box;
-  text-decoration: none;
-  outline: none;
-  border: 0;
-  letter-spacing: unset;
-  cursor: pointer;
-
-  &:disabled {
-    pointer-events: none;
-  }
-
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    min-height: 3.125rem;
-    font-size: 1.25rem;
-    padding: 0 2.5rem;
-  }
-
-  &--fluid {
-    width: 100%;
-  }
-
-  &--large {
-    min-height: 3.5rem;
-    font-size: 1.125rem;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      min-height: 4.5rem;
-    }
-  }
-
-  &--fill {
-    border-width: 0.125rem;
-    border-style: solid;
-    background-color: $blueberry500;
-    border-color: $blueberry500;
-    color: $white;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $blueberry700;
-      box-shadow: 0 0 0 0.25rem $blueberry700;
-      border-color: transparent;
-    }
-    &:disabled {
-      background-color: $neutral200;
-      border: 0.125rem solid $neutral200;
-      box-shadow: 0 0 0 0.25rem $neutral200;
-      color: $neutral600;
-    }
-  }
-  &--fill#{&}--warning {
-    background-color: $banana500;
-    border-color: $banana500;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $banana700;
-      border-color: $banana700;
-      box-shadow: 0 0 0 0.25rem $banana700;
-    }
-  }
-  &--fill#{&}--danger {
-    background-color: $cherry500;
-    border-color: $cherry500;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $cherry700;
-      border-color: $cherry700;
-      box-shadow: 0 0 0 0.25rem $cherry700;
-    }
-  }
-  &--fill#{&}--inverted {
-    background-color: $white;
-    border-color: $white;
-    color: $blueberry500;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $white;
-      border-color: $white;
-      box-shadow: 0 0 0 0.25rem $white;
-    }
-  }
-  &--fill#{&}--warning#{&}--inverted {
-    color: $banana500;
-  }
-  &--fill#{&}--danger#{&}--inverted {
-    color: $cherry500;
-  }
-
-  &--outline {
-    border-width: 0.125rem;
-    border-style: solid;
-    background-color: transparent;
-    border-color: $blueberry500;
-    color: $blueberry600;
-    position: relative;
-
-    &:before {
-      content: ' ';
-      position: absolute;
-      top: -0.25rem;
-      left: -0.25rem;
-      right: -0.25rem;
-      bottom: -0.25rem;
-      border: 0.125rem solid transparent;
-    }
-    &:after {
-      content: ' ';
-      position: absolute;
-      top: -0.375rem;
-      left: -0.375rem;
-      right: -0.375rem;
-      bottom: -0.375rem;
-      border: 0.125rem solid transparent;
-    }
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $primaryHoverColor;
-      border-color: transparent;
-      &:before {
-        border: 0.125rem solid $primaryHoverColor;
-      }
-      &:after {
-        border: 0.125rem solid $blueberry700;
-      }
-    }
-    &:disabled {
-      background-color: transparent;
-      border: 0.125rem solid $neutral200;
-      color: $neutral600;
-
-      &:before {
-        border: none;
-      }
-
-      &:after {
-        border: none;
-      }
-    }
-  }
-  &--outline#{&}--warning {
-    border-color: $banana500;
-    color: $banana600;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $warningHoverColor;
-      border-color: transparent;
-
-      &:before {
-        border-color: $warningHoverColor;
-      }
-      &:after {
-        border-color: $banana700;
-      }
-    }
-  }
-  &--outline#{&}--danger {
-    border-color: $cherry500;
-    color: $cherry600;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $dangerHoverColor;
-      border-color: transparent;
-
-      &:before {
-        border-color: $dangerHoverColor;
-      }
-      &:after {
-        border-color: $cherry700;
-      }
-    }
-  }
-  &--outline#{&}--inverted {
-    border-color: $white;
-    color: $white;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: $invertedHoverColor;
-      border-color: transparent;
-
-      &:before {
-        border-color: $invertedHoverColor;
-      }
-      &:after {
-        border-color: $white;
-      }
-    }
-  }
-
-  &--borderless {
-    border-width: 0.125rem;
-    border-style: solid;
-    background-color: transparent;
-    border: 0;
-    color: $blueberry600;
-    position: relative;
-    padding: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: 0;
-    }
-    &:disabled {
-      color: $neutral600;
-    }
-  }
-  &--borderless#{&}--warning {
-    color: $banana600;
-  }
-  &--borderless#{&}--danger {
-    color: $cherry600;
-  }
-  &--borderless#{&}--inverted {
-    color: $white;
-  }
-
-  &--with-icon {
-    padding: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: 0;
-    }
-    svg {
-      margin: 0 0.125rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin: 0 0.75rem;
-      }
-    }
-  }
-  &--large#{&}--with-icon {
-    svg {
-      margin: 0 0.5rem;
-    }
-  }
-
-  &--ellipsis#{&}--with-icon {
-    max-width: 100%;
-  }
-
-  &--borderless#{&}--with-icon {
-    svg:first-child {
-      margin-left: 0;
-      margin-right: 0.125rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 0.75rem;
-      }
-    }
-    svg:last-child {
-      margin-left: 0.125rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-left: 0.75rem;
-      }
-    }
-  }
-  &--large#{&}--borderless#{&}--with-icon {
-    svg:first-child {
-      margin-left: 0;
-      margin-right: 0.5rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 0.75rem;
-      }
-    }
-    svg:last-child {
-      margin-left: 0.5rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-left: 0.75rem;
-      }
-    }
-  }
-
-  &__content {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    white-space: normal;
-
-    &--fill {
-      #{$button}:focus & {
-        border-bottom: 1px solid $white;
-      }
-    }
-
-    &--fill#{&}--inverted {
-      #{$button}:focus & {
-        border-bottom-color: $blueberry700;
-      }
-    }
-    &--fill#{&}--warning#{&}--inverted {
-      #{$button}:focus & {
-        border-bottom-color: $banana700;
-      }
-    }
-    &--fill#{&}--danger#{&}--inverted {
-      #{$button}:focus & {
-        border-bottom-color: $cherry700;
-      }
-    }
-
-    &--borderless {
-      border-bottom: 1px solid transparent;
-
-      #{$button}:hover &,
-      #{$button}:active &,
-      #{$button}:focus & {
-        border-bottom-color: $blueberry700;
-      }
-    }
-    &--borderless#{&}--warning {
-      #{$button}:hover &,
-      #{$button}:active &,
-      #{$button}:focus & {
-        border-bottom-color: $banana700;
-      }
-    }
-    &--borderless#{&}--danger {
-      #{$button}:hover &,
-      #{$button}:active &,
-      #{$button}:focus & {
-        border-bottom-color: $cherry700;
-      }
-    }
-    &--borderless#{&}--inverted {
-      #{$button}:hover &,
-      #{$button}:active &,
-      #{$button}:focus & {
-        border-bottom-color: $white;
-      }
-    }
-
-    &--with-icon:first-child {
-      margin-left: 1.5rem;
-    }
-    &--with-icon:last-child {
-      margin-right: 1.5rem;
-    }
-    &--large#{&}--with-icon:first-child {
-      margin-left: 2.5rem;
-    }
-    &--large#{&}--with-icon:last-child {
-      margin-right: 2.5rem;
-    }
-    &--borderless#{&}--with-icon:first-child {
-      margin-left: 0;
-    }
-    &--borderless#{&}--with-icon:last-child {
-      margin-right: 0;
-    }
-
-    &--ellipsis#{&}--with-icon {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &--fluid#{&}--with-icon:last-child {
-      margin-right: 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 1.5rem;
-      }
-    }
-    &--large-fluid#{&}--with-icon:last-child {
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 2.5rem;
-      }
-    }
-
-    #{$button}:disabled & {
-      border-bottom: none;
-    }
-  }
-
-  &__left-fluid-content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-
-    &--with-icon {
-      text-align: left;
-    }
-    &--with-icon:last-child {
-      margin-right: 1.5rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 0;
-      }
-    }
-    &--large#{&}--with-icon:last-child {
-      margin-right: 2.5rem;
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: 0;
-      }
-    }
-  }
-}
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+
+$primaryHoverColor: #08667c0d; //$blueberry700 + '0D';
+$warningHoverColor: #ab7c000d; //$banana700 + '0D';
+$dangerHoverColor: #a31f0e0d; //$cherry700 + '0D';
+$invertedHoverColor: #ffffff0d; //$white + '0D';
+
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: inherit;
+  height: 100%;
+  &:focus {
+    border-bottom: 1px solid $white;
+  }
+}
+
+.button {
+  // Referanse for grandparent selection i underklassene lenger nede
+  $button: &;
+
+  padding: 0 1.5rem;
+  min-height: 2.5rem;
+  font-size: 1.125rem;
+  font-family: inherit;
+  font-weight: 600;
+  display: inline-block;
+  box-sizing: border-box;
+  text-decoration: none;
+  outline: none;
+  border: 0;
+  letter-spacing: unset;
+  cursor: pointer;
+
+  &:disabled {
+    pointer-events: none;
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    min-height: 3.125rem;
+    font-size: 1.25rem;
+    padding: 0 2.5rem;
+  }
+
+  &--fluid {
+    width: 100%;
+  }
+
+  &--large {
+    min-height: 3.5rem;
+    font-size: 1.125rem;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      min-height: 4.5rem;
+    }
+  }
+
+  &--fill {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: $blueberry500;
+    border-color: $blueberry500;
+    color: $white;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $blueberry700;
+      box-shadow: 0 0 0 0.25rem $blueberry700;
+      border-color: transparent;
+    }
+    &:disabled {
+      background-color: $neutral200;
+      border: 0.125rem solid $neutral200;
+      box-shadow: 0 0 0 0.25rem $neutral200;
+      color: $neutral600;
+    }
+  }
+  &--fill#{&}--warning {
+    background-color: $banana500;
+    border-color: $banana500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $banana700;
+      border-color: $banana700;
+      box-shadow: 0 0 0 0.25rem $banana700;
+    }
+  }
+  &--fill#{&}--danger {
+    background-color: $cherry500;
+    border-color: $cherry500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $cherry700;
+      border-color: $cherry700;
+      box-shadow: 0 0 0 0.25rem $cherry700;
+    }
+  }
+  &--fill#{&}--inverted {
+    background-color: $white;
+    border-color: $white;
+    color: $blueberry500;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $white;
+      border-color: $white;
+      box-shadow: 0 0 0 0.25rem $white;
+    }
+  }
+  &--fill#{&}--warning#{&}--inverted {
+    color: $banana500;
+  }
+  &--fill#{&}--danger#{&}--inverted {
+    color: $cherry500;
+  }
+
+  &--outline {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: transparent;
+    border-color: $blueberry500;
+    color: $blueberry600;
+    position: relative;
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      top: -0.25rem;
+      left: -0.25rem;
+      right: -0.25rem;
+      bottom: -0.25rem;
+      border: 0.125rem solid transparent;
+    }
+    &:after {
+      content: ' ';
+      position: absolute;
+      top: -0.375rem;
+      left: -0.375rem;
+      right: -0.375rem;
+      bottom: -0.375rem;
+      border: 0.125rem solid transparent;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $primaryHoverColor;
+      border-color: transparent;
+      &:before {
+        border: 0.125rem solid $primaryHoverColor;
+      }
+      &:after {
+        border: 0.125rem solid $blueberry700;
+      }
+    }
+    &:disabled {
+      background-color: transparent;
+      border: 0.125rem solid $neutral200;
+      color: $neutral600;
+
+      &:before {
+        border: none;
+      }
+
+      &:after {
+        border: none;
+      }
+    }
+  }
+  &--outline#{&}--warning {
+    border-color: $banana500;
+    color: $banana600;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $warningHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $warningHoverColor;
+      }
+      &:after {
+        border-color: $banana700;
+      }
+    }
+  }
+  &--outline#{&}--danger {
+    border-color: $cherry500;
+    color: $cherry600;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $dangerHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $dangerHoverColor;
+      }
+      &:after {
+        border-color: $cherry700;
+      }
+    }
+  }
+  &--outline#{&}--inverted {
+    border-color: $white;
+    color: $white;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $invertedHoverColor;
+      border-color: transparent;
+
+      &:before {
+        border-color: $invertedHoverColor;
+      }
+      &:after {
+        border-color: $white;
+      }
+    }
+  }
+
+  &--borderless {
+    border-width: 0.125rem;
+    border-style: solid;
+    background-color: transparent;
+    border: 0;
+    color: $blueberry600;
+    position: relative;
+    padding: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: 0;
+    }
+    &:disabled {
+      color: $neutral600;
+    }
+  }
+  &--borderless#{&}--warning {
+    color: $banana600;
+  }
+  &--borderless#{&}--danger {
+    color: $cherry600;
+  }
+  &--borderless#{&}--inverted {
+    color: $white;
+  }
+
+  &--with-icon {
+    padding: 0;
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: 0;
+    }
+    svg {
+      margin: 0 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin: 0 0.75rem;
+      }
+    }
+  }
+  &--large#{&}--with-icon {
+    svg {
+      margin: 0 0.5rem;
+    }
+  }
+
+  &--ellipsis#{&}--with-icon {
+    max-width: 100%;
+  }
+
+  &--borderless#{&}--with-icon {
+    svg:first-child {
+      margin-left: 0;
+      margin-right: 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0.75rem;
+      }
+    }
+    svg:last-child {
+      margin-left: 0.125rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+  &--large#{&}--borderless#{&}--with-icon {
+    svg:first-child {
+      margin-left: 0;
+      margin-right: 0.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0.75rem;
+      }
+    }
+    svg:last-child {
+      margin-left: 0.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-left: 0.75rem;
+      }
+    }
+  }
+
+  &__content {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    white-space: normal;
+
+    &--fill {
+      #{$button}:focus & {
+        border-bottom: 1px solid $white;
+      }
+    }
+
+    &--fill#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $blueberry700;
+      }
+    }
+    &--fill#{&}--warning#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $banana700;
+      }
+    }
+    &--fill#{&}--danger#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $cherry700;
+      }
+    }
+
+    &--borderless {
+      border-bottom: 1px solid transparent;
+
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $blueberry700;
+      }
+    }
+    &--borderless#{&}--warning {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $banana700;
+      }
+    }
+    &--borderless#{&}--danger {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $cherry700;
+      }
+    }
+    &--borderless#{&}--inverted {
+      #{$button}:hover &,
+      #{$button}:active &,
+      #{$button}:focus & {
+        border-bottom-color: $white;
+      }
+    }
+
+    &--with-icon:first-child {
+      margin-left: 1.5rem;
+    }
+    &--with-icon:last-child {
+      margin-right: 1.5rem;
+    }
+    &--large#{&}--with-icon:first-child {
+      margin-left: 2.5rem;
+    }
+    &--large#{&}--with-icon:last-child {
+      margin-right: 2.5rem;
+    }
+    &--borderless#{&}--with-icon:first-child {
+      margin-left: 0;
+    }
+    &--borderless#{&}--with-icon:last-child {
+      margin-right: 0;
+    }
+
+    &--ellipsis#{&}--with-icon {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--fluid#{&}--with-icon:last-child {
+      margin-right: 0;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 1.5rem;
+      }
+    }
+    &--large-fluid#{&}--with-icon:last-child {
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 2.5rem;
+      }
+    }
+
+    #{$button}:disabled & {
+      border-bottom: none;
+    }
+  }
+
+  &__left-fluid-content {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    &--with-icon {
+      text-align: left;
+    }
+    &--with-icon:last-child {
+      margin-right: 1.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0;
+      }
+    }
+    &--large#{&}--with-icon:last-child {
+      margin-right: 2.5rem;
+      @media (min-width: map-get($grid-breakpoints, md)) {
+        margin-right: 0;
+      }
+    }
+  }
+}