@baloise/ds-styles 0.0.5-nightly.e56f740

package/src/generated/typography.sass

@@ -0,0 +1,453 @@
+.text-primary
+  color: var(--bal-color-text-primary) !important
+
+.text-primary-light
+  color: var(--bal-color-text-primary-light) !important
+
+.text-white
+  color: var(--bal-color-text-white) !important
+
+.text-grey-light
+  color: var(--bal-color-text-grey-light) !important
+
+.text-grey
+  color: var(--bal-color-text-grey) !important
+
+.text-grey-dark
+  color: var(--bal-color-text-grey-dark) !important
+
+.text-info
+  color: var(--bal-color-text-info) !important
+
+.text-warning
+  color: var(--bal-color-text-warning) !important
+
+.text-success
+  color: var(--bal-color-text-success) !important
+
+.text-danger
+  color: var(--bal-color-text-danger) !important
+
+.text-black
+  color: var(--bal-color-text-black) !important
+
+.text-primary-hovered
+  color: var(--bal-color-text-primary-hovered) !important
+
+.text-primary-pressed
+  color: var(--bal-color-text-primary-pressed) !important
+
+.text-danger-hovered
+  color: var(--bal-color-text-danger-hovered) !important
+
+.text-danger-pressed
+  color: var(--bal-color-text-danger-pressed) !important
+
+.text-inverted
+  color: var(--bal-color-text-inverted) !important
+
+.text-inverted-disabled
+  color: var(--bal-color-text-inverted-disabled) !important
+
+.text-inverted-hovered
+  color: var(--bal-color-text-inverted-hovered) !important
+
+.text-inverted-pressed
+  color: var(--bal-color-text-inverted-pressed) !important
+
+.focus\:text-primary:focus
+  color: var(--bal-color-text-primary) !important
+
+.hover\:text-primary:hover
+  color: var(--bal-color-text-primary) !important
+
+.active\:text-primary:active
+  color: var(--bal-color-text-primary) !important
+
+.focus\:text-primary-light:focus
+  color: var(--bal-color-text-primary-light) !important
+
+.hover\:text-primary-light:hover
+  color: var(--bal-color-text-primary-light) !important
+
+.active\:text-primary-light:active
+  color: var(--bal-color-text-primary-light) !important
+
+.focus\:text-white:focus
+  color: var(--bal-color-text-white) !important
+
+.hover\:text-white:hover
+  color: var(--bal-color-text-white) !important
+
+.active\:text-white:active
+  color: var(--bal-color-text-white) !important
+
+.focus\:text-grey-light:focus
+  color: var(--bal-color-text-grey-light) !important
+
+.hover\:text-grey-light:hover
+  color: var(--bal-color-text-grey-light) !important
+
+.active\:text-grey-light:active
+  color: var(--bal-color-text-grey-light) !important
+
+.focus\:text-grey:focus
+  color: var(--bal-color-text-grey) !important
+
+.hover\:text-grey:hover
+  color: var(--bal-color-text-grey) !important
+
+.active\:text-grey:active
+  color: var(--bal-color-text-grey) !important
+
+.focus\:text-grey-dark:focus
+  color: var(--bal-color-text-grey-dark) !important
+
+.hover\:text-grey-dark:hover
+  color: var(--bal-color-text-grey-dark) !important
+
+.active\:text-grey-dark:active
+  color: var(--bal-color-text-grey-dark) !important
+
+.focus\:text-info:focus
+  color: var(--bal-color-text-info) !important
+
+.hover\:text-info:hover
+  color: var(--bal-color-text-info) !important
+
+.active\:text-info:active
+  color: var(--bal-color-text-info) !important
+
+.focus\:text-warning:focus
+  color: var(--bal-color-text-warning) !important
+
+.hover\:text-warning:hover
+  color: var(--bal-color-text-warning) !important
+
+.active\:text-warning:active
+  color: var(--bal-color-text-warning) !important
+
+.focus\:text-success:focus
+  color: var(--bal-color-text-success) !important
+
+.hover\:text-success:hover
+  color: var(--bal-color-text-success) !important
+
+.active\:text-success:active
+  color: var(--bal-color-text-success) !important
+
+.focus\:text-danger:focus
+  color: var(--bal-color-text-danger) !important
+
+.hover\:text-danger:hover
+  color: var(--bal-color-text-danger) !important
+
+.active\:text-danger:active
+  color: var(--bal-color-text-danger) !important
+
+.focus\:text-black:focus
+  color: var(--bal-color-text-black) !important
+
+.hover\:text-black:hover
+  color: var(--bal-color-text-black) !important
+
+.active\:text-black:active
+  color: var(--bal-color-text-black) !important
+
+.focus\:text-primary-hovered:focus
+  color: var(--bal-color-text-primary-hovered) !important
+
+.hover\:text-primary-hovered:hover
+  color: var(--bal-color-text-primary-hovered) !important
+
+.active\:text-primary-hovered:active
+  color: var(--bal-color-text-primary-hovered) !important
+
+.focus\:text-primary-pressed:focus
+  color: var(--bal-color-text-primary-pressed) !important
+
+.hover\:text-primary-pressed:hover
+  color: var(--bal-color-text-primary-pressed) !important
+
+.active\:text-primary-pressed:active
+  color: var(--bal-color-text-primary-pressed) !important
+
+.focus\:text-danger-hovered:focus
+  color: var(--bal-color-text-danger-hovered) !important
+
+.hover\:text-danger-hovered:hover
+  color: var(--bal-color-text-danger-hovered) !important
+
+.active\:text-danger-hovered:active
+  color: var(--bal-color-text-danger-hovered) !important
+
+.focus\:text-danger-pressed:focus
+  color: var(--bal-color-text-danger-pressed) !important
+
+.hover\:text-danger-pressed:hover
+  color: var(--bal-color-text-danger-pressed) !important
+
+.active\:text-danger-pressed:active
+  color: var(--bal-color-text-danger-pressed) !important
+
+.focus\:text-inverted:focus
+  color: var(--bal-color-text-inverted) !important
+
+.hover\:text-inverted:hover
+  color: var(--bal-color-text-inverted) !important
+
+.active\:text-inverted:active
+  color: var(--bal-color-text-inverted) !important
+
+.focus\:text-inverted-disabled:focus
+  color: var(--bal-color-text-inverted-disabled) !important
+
+.hover\:text-inverted-disabled:hover
+  color: var(--bal-color-text-inverted-disabled) !important
+
+.active\:text-inverted-disabled:active
+  color: var(--bal-color-text-inverted-disabled) !important
+
+.focus\:text-inverted-hovered:focus
+  color: var(--bal-color-text-inverted-hovered) !important
+
+.hover\:text-inverted-hovered:hover
+  color: var(--bal-color-text-inverted-hovered) !important
+
+.active\:text-inverted-hovered:active
+  color: var(--bal-color-text-inverted-hovered) !important
+
+.focus\:text-inverted-pressed:focus
+  color: var(--bal-color-text-inverted-pressed) !important
+
+.hover\:text-inverted-pressed:hover
+  color: var(--bal-color-text-inverted-pressed) !important
+
+.active\:text-inverted-pressed:active
+  color: var(--bal-color-text-inverted-pressed) !important
+
+.font-family-title
+  font-family: var(--bal-font-family-title) !important
+
+.font-family-text
+  font-family: var(--bal-font-family-text) !important
+
+.text-x-small
+  font-size: var(--bal-text-size-x-small) !important
+
+.text-small
+  font-size: var(--bal-text-size-small) !important
+
+.text-normal
+  font-size: var(--bal-text-size-normal) !important
+
+.text-medium
+  font-size: var(--bal-text-size-medium) !important
+
+.text-large
+  font-size: var(--bal-text-size-large) !important
+
+.text-x-large
+  font-size: var(--bal-text-size-x-large) !important
+
+.text-xx-large
+  font-size: var(--bal-text-size-xx-large) !important
+
+.text-xxx-large
+  font-size: var(--bal-text-size-xxx-large) !important
+
+.text-xxxx-large
+  font-size: var(--bal-text-size-xxxx-large) !important
+
+.text-xxxxx-large
+  font-size: var(--bal-text-size-xxxxx-large) !important
+
++tablet
+  .text-x-small
+    font-size: var(--bal-text-size-x-small-tablet) !important
+
+  .text-small
+    font-size: var(--bal-text-size-small-tablet) !important
+
+  .text-normal
+    font-size: var(--bal-text-size-normal-tablet) !important
+
+  .text-medium
+    font-size: var(--bal-text-size-medium-tablet) !important
+
+  .text-large
+    font-size: var(--bal-text-size-large-tablet) !important
+
+  .text-x-large
+    font-size: var(--bal-text-size-x-large-tablet) !important
+
+  .text-xx-large
+    font-size: var(--bal-text-size-xx-large-tablet) !important
+
+  .text-xxx-large
+    font-size: var(--bal-text-size-xxx-large-tablet) !important
+
+  .text-xxxx-large
+    font-size: var(--bal-text-size-xxxx-large-tablet) !important
+
+  .text-xxxxx-large
+    font-size: var(--bal-text-size-xxxxx-large-tablet) !important
+
++desktop
+  .text-x-small
+    font-size: var(--bal-text-size-x-small-desktop) !important
+
+  .text-small
+    font-size: var(--bal-text-size-small-desktop) !important
+
+  .text-normal
+    font-size: var(--bal-text-size-normal-desktop) !important
+
+  .text-medium
+    font-size: var(--bal-text-size-medium-desktop) !important
+
+  .text-large
+    font-size: var(--bal-text-size-large-desktop) !important
+
+  .text-x-large
+    font-size: var(--bal-text-size-x-large-desktop) !important
+
+  .text-xx-large
+    font-size: var(--bal-text-size-xx-large-desktop) !important
+
+  .text-xxx-large
+    font-size: var(--bal-text-size-xxx-large-desktop) !important
+
+  .text-xxxx-large
+    font-size: var(--bal-text-size-xxxx-large-desktop) !important
+
+  .text-xxxxx-large
+    font-size: var(--bal-text-size-xxxxx-large-desktop) !important
+
+.text-align-center
+  text-align: center !important
+
+.text-align-left
+  text-align: left !important
+
+.text-align-right
+  text-align: right !important
+
+.text-align-justify
+  text-align: justify !important
+
++mobile
+  .mobile\:text-align-center
+    text-align: center !important
+
+  .mobile\:text-align-left
+    text-align: left !important
+
+  .mobile\:text-align-right
+    text-align: right !important
+
+  .mobile\:text-align-justify
+    text-align: justify !important
+
++tablet
+  .tablet\:text-align-center
+    text-align: center !important
+
+  .tablet\:text-align-left
+    text-align: left !important
+
+  .tablet\:text-align-right
+    text-align: right !important
+
+  .tablet\:text-align-justify
+    text-align: justify !important
+
++desktop
+  .desktop\:text-align-center
+    text-align: center !important
+
+  .desktop\:text-align-left
+    text-align: left !important
+
+  .desktop\:text-align-right
+    text-align: right !important
+
+  .desktop\:text-align-justify
+    text-align: justify !important
+
++widescreen
+  .widescreen\:text-align-center
+    text-align: center !important
+
+  .widescreen\:text-align-left
+    text-align: left !important
+
+  .widescreen\:text-align-right
+    text-align: right !important
+
+  .widescreen\:text-align-justify
+    text-align: justify !important
+
+.lowercase
+  text-transform: lowercase !important
+
+.uppercase
+  text-transform: uppercase !important
+
+.capitalize
+  text-transform: capitalize !important
+
+.font-weight-bold
+  font-weight: var(--bal-font-weight-bold) !important
+
+.font-weight-regular
+  font-weight: var(--bal-font-weight-regular) !important
+
+.font-weight-light
+  font-weight: var(--bal-font-weight-light) !important
+
+.white-space-normal
+  white-space: normal !important
+
+.white-space-nowrap
+  white-space: nowrap !important
+
+.line-height-title
+  line-height: var(--bal-text-line-height-title) !important
+
+.line-height-text
+  line-height: var(--bal-text-line-height-text) !important
+
+.text-overflow-clip
+  text-overflow: clip !important
+
+.text-overflow-ellipsis
+  text-overflow: ellipsis !important
+
++mobile
+  .mobile\:text-overflow-clip
+    text-overflow: clip !important
+
+  .mobile\:text-overflow-ellipsis
+    text-overflow: ellipsis !important
+
++tablet
+  .tablet\:text-overflow-clip
+    text-overflow: clip !important
+
+  .tablet\:text-overflow-ellipsis
+    text-overflow: ellipsis !important
+
++desktop
+  .desktop\:text-overflow-clip
+    text-overflow: clip !important
+
+  .desktop\:text-overflow-ellipsis
+    text-overflow: ellipsis !important
+
++widescreen
+  .widescreen\:text-overflow-clip
+    text-overflow: clip !important
+
+  .widescreen\:text-overflow-ellipsis
+    text-overflow: ellipsis !important

package/src/mixins/_all.sass

@@ -0,0 +1,7 @@
+@import '@baloise/ds-tokens/dist/tokens.scss'
+
+@import './bem.mixin'
+@import './svg.mixin'
+@import './general.mixin'
+@import './breakpoint.mixin'
+@import './extends'

package/src/mixins/bem.mixin.sass

@@ -0,0 +1,39 @@
+$componentPrefix: 'bal-'
+
+=component($name)
+  #{$componentPrefix}#{$name}
+    @content
+
+=block($name)
+  .#{$componentPrefix}#{$name}
+    @content
+
+=blocks($names...)
+  $selector: ()
+  @each $name in $names
+    $selector: append($selector, unquote('.#{$componentPrefix}#{$name}'), comma)
+  #{$selector}
+    @content
+
+=element($name)
+  &__#{$name}
+    @content
+
+=elements($names...)
+  $selector: ()
+  @each $name in $names
+    $selector: append($selector, unquote('&__#{$name}'), comma)
+  #{$selector}
+    @content
+
+=modifier($name)
+  &--#{$name}
+    @content
+
+=modifiers($names...)
+  $selector: ()
+  @each $name in $names
+    $selector: append($selector, unquote('&--#{$name}'), comma)
+  #{$selector}
+    @content
+

package/src/mixins/breakpoint.mixin.sass

@@ -0,0 +1,67 @@
+=from($device)
+  @media screen and (min-width: $device)
+    @content
+
+=until($device)
+  @media screen and (max-width: $device - 1px)
+    @content
+
+=between($min-device, $max-device)
+  @media screen and (min-width: $min-device) and (max-width: $max-device - 1px)
+    @content
+
+=mobile
+  @media screen and (max-width: $bal-breakpoint-tablet - 1px)
+    @content
+
+=tablet
+  @media screen and (min-width: $bal-breakpoint-tablet), print
+    @content
+
+=tablet-only
+  @media screen and (min-width: $bal-breakpoint-tablet) and (max-width: $bal-breakpoint-desktop - 1px)
+    @content
+
+=touch
+  @media screen and (max-width: $bal-breakpoint-desktop - 1px)
+    @content
+
+=desktop
+  @media screen and (min-width: $bal-breakpoint-desktop)
+    @content
+
+=desktop-only
+  @media screen and (min-width: $bal-breakpoint-desktop) and (max-width: $bal-breakpoint-high-definition - 1px)
+    @content
+
+=high-definition
+  @media screen and (min-width: $bal-breakpoint-high-definition)
+    @content
+
+=high-definition-only
+  @media screen and (min-width: $bal-breakpoint-high-definition) and (max-width: $bal-breakpoint-widescreen - 1px)
+    @content
+
+=until-high-definition
+  @media screen and (max-width: $bal-breakpoint-high-definition - 1px)
+    @content
+
+=until-widescreen
+  @media screen and (max-width: $bal-breakpoint-widescreen - 1px)
+    @content
+
+=widescreen
+  @media screen and (min-width: $bal-breakpoint-widescreen)
+    @content
+
+=widescreen-only
+  @media screen and (min-width: $bal-breakpoint-widescreen) and (max-width: $bal-breakpoint-fullhd - 1px)
+    @content
+
+=until-fullhd
+  @media screen and (max-width: $bal-breakpoint-fullhd - 1px)
+    @content
+
+=fullhd
+  @media screen and (min-width: $bal-breakpoint-fullhd)
+    @content

package/src/mixins/extends.sass

@@ -0,0 +1,32 @@
+%bottomSpacing
+  +bottomSpacing
+
+%hidden-input
+  +hidden-input
+
+%focus-shadow
+  +focus-shadow
+
+%focus-inverted-shadow
+  +focus-inverted-shadow
+
+%focus-inset-shadow
+  +focus-inset-shadow
+
+%focus-inverted-inset-shadow
+  +focus-inverted-inset-shadow
+
+%disabled
+  +disabled
+
+%unselectable
+  +unselectable
+
+%font-smoothing
+  +font-smoothing
+
+%reset
+  +reset
+
+%overlay
+  +overlay

package/src/mixins/general.mixin.sass

@@ -0,0 +1,95 @@
+@use "sass:map"
+@use "sass:string"
+@use "sass:math"
+
+@function bulmaRgba($color, $alpha)
+  @if type-of($color) != 'color'
+    @return $color
+  @return rgba($color, $alpha)
+
+=hover
+  @media(hover: hover) and (pointer: fine)
+    @content
+
+=overflow-touch
+  -webkit-overflow-scrolling: touch
+
+=focus-shadow
+  +hover
+    box-shadow: var(--bal-focus-shadow) !important
+
+=focus-inset-shadow
+  +hover
+    box-shadow: var(--bal-focus-shadow-inset) !important
+
+=focus-inverted-shadow
+  +hover
+    box-shadow: var(--bal-focus-shadow-inverted) !important
+
+=focus-inverted-inset-shadow
+  +hover
+    box-shadow: var(--bal-focus-shadow-inverted-inset) !important
+
+=font-smoothing
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+
+=bottomSpacing($spacing: $block-spacing)
+  &:not(:last-child)
+    margin-bottom: $spacing
+
+=ltr-position($spacing, $right: true)
+  $normal: if($right, "right", "left")
+  #{$normal}: $spacing
+
+=ltr-property($property, $spacing, $right: true)
+  $normal: if($right, "right", "left")
+  #{$property}-#{$normal}: $spacing
+
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+=disabled
+  cursor: default !important
+  pointer-events: none !important
+
+=reset
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  background: none
+  border: none
+  color: currentColor
+  font-family: inherit
+  font-size: 1em
+  margin: 0
+  padding: 0
+
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
+  position: absolute
+  right: $offset
+  top: $offset
+
+=hide-element
+  display: none !important
+  visibility: hidden !important
+
+=hidden-input
+  position: absolute !important
+  left: 0
+  top: 0
+  margin: 0
+  padding: 0
+  opacity: 0
+  outline: 0
+  border: none
+  width: 1px
+  height: 1px
+  clip: rect(1px, 1px, 1px, 1px)
+  overflow: hidden

package/src/mixins/svg.mixin.sass

@@ -0,0 +1,6 @@
+=fillSvg($color)
+  svg,
+  g,
+  path,
+  circle
+    fill: $color