@baloise/ds-styles 17.3.0 → 17.4.0-snapshot.1609-d2bcc38d3

package/sass/all.sass

@@ -1,6 +1,6 @@
-@import './mixins'
-@import './normalize'
-@import './structure'
-@import './font'
-@import './core'
-@import './utilities/all'
+@forward './mixins'
+@forward './normalize'
+@forward './structure'
+@forward './font'
+@forward './core'
+@forward './utilities/all'

package/sass/baloise-design-system.sass

@@ -1 +1 @@
-@import './all'
+@forward './all'

package/sass/basic.sass

@@ -1,5 +1,5 @@
-@import './mixins'
-@import './normalize'
-@import './structure'
-@import './font'
-@import './core'
+@forward './mixins'
+@forward './normalize'
+@forward './structure'
+@forward './font'
+@forward './core'

package/sass/core.sass

@@ -1,4 +1,6 @@
-@import '@baloise/ds-tokens/dist/tokens.css.scss'
+@forward '@baloise/ds-tokens/dist/tokens.css.scss'
+@forward './mixins'
+@forward '../src/core/_all'
 
 // Deprecated line heights will be change to factors soon
 :root
@@ -32,6 +34,3 @@
   --bal-line-height-desktop-xxx-large: 3rem
   --bal-line-height-desktop-xxxx-large: 3.5rem
   --bal-line-height-desktop-xxxxx-large: 6rem
-
-@import './mixins'
-@import '../src/core/_all'

package/sass/font.sass

@@ -1 +1 @@
-@import '@baloise/ds-fonts/scss/fonts.sass'
+@forward '@baloise/ds-fonts/scss/fonts.sass'

package/sass/mixins.sass

@@ -1,3 +1 @@
-$block-spacing: 0.25rem !default
-
-@import '../src/mixins/_all'
+@forward '../src/mixins/_all'

package/sass/structure.sass

@@ -1,4 +1,4 @@
-@import './mixins'
+@use '../src/mixins/_all' as *
 
 html
   background-color: var(--bal-body-background)

package/sass/utilities/all.sass

@@ -1,9 +1,9 @@
-@import './background'
-@import './border'
-@import './elevation'
-@import './flex'
-@import './interaction'
-@import './layout'
-@import './sizing'
-@import './spacing'
-@import './typography'
+@forward './background'
+@forward './border'
+@forward './elevation'
+@forward './flex'
+@forward './interaction'
+@forward './layout'
+@forward './sizing'
+@forward './spacing'
+@forward './typography'

package/sass/utilities/background.sass

@@ -1,5 +1,5 @@
-@import '../mixins'
-@import '../../src/generated/background'
+@forward '../mixins'
+@forward '../../src/generated/background'
 
 .bg-transparent
   background: transparent !important

package/sass/utilities/border.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/border'
+@forward '../mixins'
+@forward '../../src/generated/border'

package/sass/utilities/elevation.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/elevation'
+@forward '../mixins'
+@forward '../../src/generated/elevation'

package/sass/utilities/flex.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/flex'
+@forward '../mixins'
+@forward '../../src/generated/flex'

package/sass/utilities/grid.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/core/grid'
+@forward '../mixins'
+@forward '../../src/core/grid'

package/sass/utilities/interaction.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/interaction'
+@forward '../mixins'
+@forward '../../src/generated/interaction'

package/sass/utilities/layout.sass

@@ -1,5 +1,5 @@
-@import '../mixins'
-@import '../../src/generated/layout'
+@forward '../mixins'
+@forward '../../src/generated/layout'
 
 .is-sr-only
   border: none !important

package/sass/utilities/sizing.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/sizing'
+@forward '../mixins'
+@forward '../../src/generated/sizing'

package/sass/utilities/spacing.sass

@@ -1,2 +1,2 @@
-@import '../mixins'
-@import '../../src/generated/spacing'
+@forward '../mixins'
+@forward '../../src/generated/spacing'

package/sass/utilities/typography.sass

@@ -1,5 +1,5 @@
-@import '../mixins'
-@import '../../src/generated/typography'
+@forward '../../src/generated/typography'
+@use '../../src/mixins/_all' as *
 
 .text-xxxxx-large
   line-height: var(--bal-line-height-xxxxx-large)

package/src/core/_all.sass

@@ -1,11 +1,11 @@
-@import 'vars/_all'
-@import 'form/_all'
-@import 'container'
-@import 'grid'
-@import 'link'
-@import 'list'
-@import 'table'
-@import 'typography'
+@forward 'vars/_all'
+@forward 'form/_all'
+@forward 'container'
+@forward 'grid'
+@forward 'link'
+@forward 'list'
+@forward 'table'
+@forward 'typography'
 
 .has-sticky-footer
   min-height: 100vh

package/src/core/container.sass

@@ -1,3 +1,5 @@
+@use '../mixins/_all' as *
+
 .container
   flex-grow: 1
   margin: 0 auto

package/src/core/form/_all.sass

@@ -1,6 +1,6 @@
-@import "shared"
-@import "input-textarea"
-@import "select"
-@import "file"
-@import "tools"
-@import "button"
+@forward "shared"
+@forward "input-textarea"
+@forward "select"
+@forward "file"
+@forward "tools"
+@forward "button"

package/src/core/form/button.sass

@@ -1,3 +1,5 @@
+@use '../../mixins/_all' as *
+
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
   &:not(.is-rounded)

package/src/core/form/file.sass

@@ -1,3 +1,6 @@
+@use '../../mixins/_all' as *
+@use './shared' as *
+
 .file
   @extend %unselectable
   align-items: stretch

package/src/core/form/input-textarea.sass

@@ -1,3 +1,5 @@
+@use './shared' as *
+
 %input-textarea
   @extend %input
   max-width: 100%

package/src/core/form/select.sass

@@ -1,3 +1,6 @@
+@use '../../mixins/_all' as *
+@use './shared' as *
+
 .select
   display: inline-block
   max-width: 100%

package/src/core/form/shared.sass

@@ -1,3 +1,5 @@
+@use '../../mixins/_all' as *
+
 =placeholder
   $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
   @each $placeholder in $placeholders

package/src/core/form/tools.sass

@@ -1,3 +1,5 @@
+@use '../../mixins/_all' as *
+
 @keyframes spinAround
   from
     transform: rotate(0deg)
@@ -42,7 +44,7 @@
 
 .field
   &:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: 0.25rem
   // Modifiers
   &.has-addons
     display: flex

package/src/core/grid.sass

@@ -1,4 +1,5 @@
 @use "sass:math"
+@use '../mixins/_all' as *
 
 .grid
   flex-basis: 0

package/src/core/link.sass

@@ -1,3 +1,5 @@
+@use '../mixins/_all' as *
+
 a.link:not(.button),
 a.is-link:not(.button)
   color: var(--bal-link-color)

package/src/core/list.sass

@@ -1,3 +1,5 @@
+@use '../mixins/_all' as *
+
 ol.list,
 ul.list,
 ol.is-list,
@@ -6,6 +8,11 @@ ul.is-list
   margin-left: 2rem
   +desktop
     margin-bottom: 2rem
+  &.is-inside
+    list-style-position: inside !important
+    margin-left: 0
+    li
+      list-style-position: inside !important
   li
     hyphens: auto
     margin-bottom: 1rem

package/src/core/table.sass

@@ -1,3 +1,5 @@
+@use '../mixins/_all' as *
+
 .table
   @extend %bottomSpacing
   background-color: var(--bal-table-background-color)

package/src/core/typography.sass

@@ -1,3 +1,5 @@
+@use '../mixins/_all' as *
+
 .title,
 .subtitle
   hyphens: auto

package/src/core/vars/_all.sass

@@ -1,7 +1,7 @@
-@import './structure.vars'
-@import './typography.vars'
-@import './link.vars'
-@import './button.vars'
-@import './form.vars'
-@import './list.vars'
-@import './table.vars'
+@forward './structure.vars'
+@forward './typography.vars'
+@forward './link.vars'
+@forward './button.vars'
+@forward './form.vars'
+@forward './list.vars'
+@forward './table.vars'

package/src/generated/background.sass

@@ -1,3 +1,6 @@
+@use '../mixins/_all' as *
+
+
 .bg-primary
   background: var(--bal-color-background-primary) !important
 

package/src/generated/border.sass

@@ -1,3 +1,6 @@
+@use '../mixins/_all' as *
+
+
 .border
   border-color: var(--bal-color-border) !important
   border-width: var(--bal-border-width-normal) !important

package/src/generated/elevation.sass

@@ -1,3 +1,6 @@
+@use '../mixins/_all' as *
+
+
 .opacity-0
   opacity: var(--bal-opacity-0) !important
 
@@ -31,6 +34,9 @@
 .shadow-large
   box-shadow: var(--bal-shadow-large) !important
 
+.shadow-header
+  box-shadow: var(--bal-shadow-header) !important
+
 .focus\:shadow-none:focus
   box-shadow: none !important
 
@@ -67,6 +73,15 @@
 .active\:shadow-large:active
   box-shadow: var(--bal-shadow-large) !important
 
+.focus\:shadow-header:focus
+  box-shadow: var(--bal-shadow-header) !important
+
+.hover\:shadow-header:hover
+  box-shadow: var(--bal-shadow-header) !important
+
+.active\:shadow-header:active
+  box-shadow: var(--bal-shadow-header) !important
+
 +mobile
   .mobile\:shadow-none
     box-shadow: none !important
@@ -80,6 +95,9 @@
   .mobile\:shadow-large
     box-shadow: var(--bal-shadow-large) !important
 
+  .mobile\:shadow-header
+    box-shadow: var(--bal-shadow-header) !important
+
   .mobile\:focus\:shadow-none:focus
     box-shadow: none !important
 
@@ -116,6 +134,15 @@
   .mobile\:active\:shadow-large:active
     box-shadow: var(--bal-shadow-large) !important
 
+  .mobile\:focus\:shadow-header:focus
+    box-shadow: var(--bal-shadow-header) !important
+
+  .mobile\:hover\:shadow-header:hover
+    box-shadow: var(--bal-shadow-header) !important
+
+  .mobile\:active\:shadow-header:active
+    box-shadow: var(--bal-shadow-header) !important
+
 +tablet
   .tablet\:shadow-none
     box-shadow: none !important
@@ -129,6 +156,9 @@
   .tablet\:shadow-large
     box-shadow: var(--bal-shadow-large) !important
 
+  .tablet\:shadow-header
+    box-shadow: var(--bal-shadow-header) !important
+
   .tablet\:focus\:shadow-none:focus
     box-shadow: none !important
 
@@ -165,6 +195,15 @@
   .tablet\:active\:shadow-large:active
     box-shadow: var(--bal-shadow-large) !important
 
+  .tablet\:focus\:shadow-header:focus
+    box-shadow: var(--bal-shadow-header) !important
+
+  .tablet\:hover\:shadow-header:hover
+    box-shadow: var(--bal-shadow-header) !important
+
+  .tablet\:active\:shadow-header:active
+    box-shadow: var(--bal-shadow-header) !important
+
 +desktop
   .desktop\:shadow-none
     box-shadow: none !important
@@ -178,6 +217,9 @@
   .desktop\:shadow-large
     box-shadow: var(--bal-shadow-large) !important
 
+  .desktop\:shadow-header
+    box-shadow: var(--bal-shadow-header) !important
+
   .desktop\:focus\:shadow-none:focus
     box-shadow: none !important
 
@@ -214,6 +256,15 @@
   .desktop\:active\:shadow-large:active
     box-shadow: var(--bal-shadow-large) !important
 
+  .desktop\:focus\:shadow-header:focus
+    box-shadow: var(--bal-shadow-header) !important
+
+  .desktop\:hover\:shadow-header:hover
+    box-shadow: var(--bal-shadow-header) !important
+
+  .desktop\:active\:shadow-header:active
+    box-shadow: var(--bal-shadow-header) !important
+
 +widescreen
   .widescreen\:shadow-none
     box-shadow: none !important
@@ -227,6 +278,9 @@
   .widescreen\:shadow-large
     box-shadow: var(--bal-shadow-large) !important
 
+  .widescreen\:shadow-header
+    box-shadow: var(--bal-shadow-header) !important
+
   .widescreen\:focus\:shadow-none:focus
     box-shadow: none !important
 
@@ -263,6 +317,15 @@
   .widescreen\:active\:shadow-large:active
     box-shadow: var(--bal-shadow-large) !important
 
+  .widescreen\:focus\:shadow-header:focus
+    box-shadow: var(--bal-shadow-header) !important
+
+  .widescreen\:hover\:shadow-header:hover
+    box-shadow: var(--bal-shadow-header) !important
+
+  .widescreen\:active\:shadow-header:active
+    box-shadow: var(--bal-shadow-header) !important
+
 .text-shadow-normal
   text-shadow: var(--bal-text-shadow-normal) !important
 

package/src/generated/flex.sass

@@ -1,3 +1,6 @@
+@use '../mixins/_all' as *
+
+
 .align-content-start
   align-content: flex-start !important
 
@@ -829,3 +832,105 @@
 
   .column-gap-xxxx-large
     column-gap: var(--bal-space-xxxx-large-desktop) !important
+
+.gap-none
+  gap: 0 !important
+
+.gap-auto
+  gap: auto !important
+
++mobile
+  .mobile\:gap-none
+    gap: 0 !important
+
+  .mobile\:gap-auto
+    gap: auto !important
+
++tablet
+  .tablet\:gap-none
+    gap: 0 !important
+
+  .tablet\:gap-auto
+    gap: auto !important
+
++desktop
+  .desktop\:gap-none
+    gap: 0 !important
+
+  .desktop\:gap-auto
+    gap: auto !important
+
++widescreen
+  .widescreen\:gap-none
+    gap: 0 !important
+
+  .widescreen\:gap-auto
+    gap: auto !important
+
+.row-gap-none
+  row-gap: 0 !important
+
+.row-gap-auto
+  row-gap: auto !important
+
++mobile
+  .mobile\:row-gap-none
+    row-gap: 0 !important
+
+  .mobile\:row-gap-auto
+    row-gap: auto !important
+
++tablet
+  .tablet\:row-gap-none
+    row-gap: 0 !important
+
+  .tablet\:row-gap-auto
+    row-gap: auto !important
+
++desktop
+  .desktop\:row-gap-none
+    row-gap: 0 !important
+
+  .desktop\:row-gap-auto
+    row-gap: auto !important
+
++widescreen
+  .widescreen\:row-gap-none
+    row-gap: 0 !important
+
+  .widescreen\:row-gap-auto
+    row-gap: auto !important
+
+.column-gap-none
+  column-gap: 0 !important
+
+.column-gap-auto
+  column-gap: auto !important
+
++mobile
+  .mobile\:column-gap-none
+    column-gap: 0 !important
+
+  .mobile\:column-gap-auto
+    column-gap: auto !important
+
++tablet
+  .tablet\:column-gap-none
+    column-gap: 0 !important
+
+  .tablet\:column-gap-auto
+    column-gap: auto !important
+
++desktop
+  .desktop\:column-gap-none
+    column-gap: 0 !important
+
+  .desktop\:column-gap-auto
+    column-gap: auto !important
+
++widescreen
+  .widescreen\:column-gap-none
+    column-gap: 0 !important
+
+  .widescreen\:column-gap-auto
+    column-gap: auto !important

package/src/generated/interaction.sass

@@ -1,3 +1,6 @@
+@use '../mixins/_all' as *
+
+
 .select-none
   user-select: none !important