@baloise/ds-styles 0.0.5-nightly.e56f740

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

@@ -0,0 +1,80 @@
+%input-textarea
+  @extend %input
+  max-width: 100%
+  width: 100%
+  &[readonly]
+    box-shadow: none
+  // Modifiers
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-inline
+    display: inline
+    width: auto
+
+.input
+  @extend %input-textarea
+
+.textarea
+  @extend %input-textarea
+  display: block
+  max-width: 100%
+  min-width: 100%
+  resize: vertical
+  padding: calc(0.75em - 2px)
+  &:not([rows])
+    max-height: 40em
+    min-height: 8em
+  &[rows]
+    height: initial
+  // Modifiers
+  &.has-fixed-size
+    resize: none
+
+input.input,
+textarea.textarea
+  border-width: 2px
+  border-radius: var(--bal-form-field-control-radius)
+  font-size: var(--bal-form-field-control-font-size)
+  font-family: var(--bal-form-field-control-font-family)
+  color: var(--bal-form-field-control-color)
+  outline: none
+  box-shadow: none
+  &.is-danger
+    border-color: var(--bal-form-field-control-danger-border-color)
+    background: var(--bal-form-field-control-danger-background)
+    &.bal-focused,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      border-color: var(--bal-form-field-control-border-color-active)
+  &.is-success
+    border-color: var(--bal-form-field-control-success-border-color)
+    background: var(--bal-form-field-control-success-background)
+    &.bal-focused,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      border-color: var(--bal-form-field-control-border-color-active)
+  // deprecated
+  &.is-warning
+    border-color: var(--bal-color-border-warning)
+    background: var(--bal-color-warning-1)
+    &.bal-focused,
+    &:focus,
+    &.is-focused,
+    &:active,
+    &.is-active
+      border-color: var(--bal-form-field-control-border-color-active)
+  &.is-disabled
+    color: var(--bal-form-field-control-disabled-color)
+    border-color: var(--bal-form-field-control-disabled-border-color)
+    background: var(--bal-form-field-control-disabled-background)
+
+// overrides style for inputs in a group input
+input.is-grouped
+  background: none !important
+  border: none !important
+  box-shadow: none !important

package/src/core/form/select.sass

@@ -0,0 +1,111 @@
+.select
+  display: inline-block
+  max-width: 100%
+  width: 100%
+  position: relative
+  vertical-align: top
+  &:not(.is-multiple)
+    height: 3rem
+  &:not(.is-multiple):not(.is-loading)
+    &::after
+      border: 3px solid var(--bal-form-field-icon-color)
+      border-radius: 2px
+      border-right: 0
+      border-top: 0
+      content: " "
+      display: block
+      height: 0.625em
+      margin-top: -0.4rem
+      pointer-events: none
+      position: absolute
+      top: 50%
+      transform: rotate(-45deg)
+      transform-origin: center
+      width: 0.625em
+
+      +ltr-position(1.125em)
+      z-index: 4
+  select
+    @extend %input
+    cursor: pointer
+    display: block
+    font-size: 1em
+    max-width: 100%
+    width: 100%
+    outline: none
+    border-radius: var(--bal-form-field-control-radius)
+    &::-ms-expand
+      display: none
+    &[disabled]:hover,
+    fieldset[disabled] &:hover
+      border-color: var(--bal-form-field-control-disabled-border-color)
+    &:not([multiple])
+      +ltr-property("padding", 2.5em)
+    &[multiple]
+      height: auto
+      padding: 0
+      option
+        padding: 0.5em 1em
+  // States
+  &:not(.is-multiple):not(.is-loading):hover
+    &::after
+      border-color: var(--bal-form-field-label-color-hover)
+  &:not(.is-multiple):not(.is-loading):active
+    &::after
+      border-color: var(--bal-form-field-label-color-active)
+  // Modifiers
+  &.is-disabled
+    &::after
+      border-color: var(--bal-form-field-control-disabled-border-color) !important
+  &.is-success
+    select
+      border-color: var(--bal-form-field-control-success-border-color)
+      background: var(--bal-form-field-control-success-background)
+      &.bal-focused,
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        border-color: var(--bal-form-field-control-success-border-color-active)
+    &::after
+      border-color: var(--bal-form-field-control-success-border-color) !important
+    &:focus::after,
+    &:active::after,
+    &:focus-within::after
+      border-color: var(--bal-form-field-control-success-border-color-active) !important
+  &.is-danger
+    select
+      border-color: var(--bal-form-field-control-danger-border-color)
+      background: var(--bal-form-field-control-danger-background)
+      &.bal-focused,
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        border-color: var(--bal-form-field-control-danger-border-color-active)
+    &::after
+      border-color: var(--bal-form-field-control-danger-border-color) !important
+    &:focus::after,
+    &:active::after,
+    &:focus-within::after
+      border-color: var(--bal-form-field-control-danger-border-color-active) !important
+  &.is-warning
+    select
+      border-color: var(--bal-color-border-warning)
+      background: var(--bal-color-warning-1)
+      &.bal-focused,
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        border-color: var(--bal-color-border-primary)
+    &::after
+      border-color: var(--bal-color-border-warning) !important
+    &:focus::after,
+    &:active::after,
+    &:focus-within::after
+      border-color: var(--bal-color-border-primary) !important
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%

package/src/core/form/shared.sass

@@ -0,0 +1,69 @@
+=placeholder
+  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+  @each $placeholder in $placeholders
+    &:#{$placeholder}-placeholder
+      @content
+
+=input
+  @extend %control
+  justify-content: flex-start
+  background-color: var(--bal-form-field-control-background)
+  border-color: var(--bal-form-field-control-border-color)
+  border-style: var(--bal-form-field-control-border-style)
+  border-radius: var(--bal-form-field-control-radius)
+  color: var(--bal-form-field-control-color)
+  +placeholder
+    color: var(--bal-form-field-control-placeholder-color)
+  +hover()
+    &:hover,
+    &.is-hovered
+      border-color: var(--bal-form-field-control-border-color-hover)
+      background-color: var(--bal-form-field-control-background-hover)
+  &.bal-focused,
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: var(--bal-form-field-control-border-color-active)
+    background-color: var(--bal-form-field-control-background-active)
+  &[disabled],
+  fieldset[disabled] &
+    background-color: var(--bal-form-field-control-disabled-background)
+    border-color: var(--bal-form-field-control-disabled-border-color)
+    box-shadow: none
+    color: var(--bal-form-field-control-disabled-color)
+    +placeholder
+      color: var(--bal-form-field-control-disabled-color)
+
+=control
+  -moz-appearance: none !important
+  -webkit-appearance: none !important
+  align-items: center
+  border-width: var(--bal-border-width-normal)
+  border-color: var(--bal-color-border)
+  border-radius: var(--bal-radius-normal)
+  box-shadow: none
+  display: inline-flex
+  font-size: var(--bal-text-size-normal)
+  min-height: 3rem
+  height: 3rem
+  line-height: 1.5
+  padding-left: calc(0.75em - var(--bal-border-width-normal))
+  padding-right: calc(0.75em - var(--bal-border-width-normal))
+  position: relative
+  vertical-align: top
+  // States
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    outline: none
+  &[disabled],
+  fieldset[disabled] &
+    cursor: default
+
+%input
+  +input
+
+%control
+  +control

package/src/core/form/tools.sass

@@ -0,0 +1,209 @@
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)
+
+.label
+  display: block
+  font-size: var(--bal-form-field-label-font-size)
+  line-height: var(--bal-form-field-label-line-height)
+  font-weight: var(--bal-form-field-label-font-weight)
+  font-family: var(--bal-form-field-label-font-family)
+  hyphens: auto
+  &:not(:last-child)
+    margin-bottom: var(--bal-form-field-label-margin-bottom)
+  &.is-danger
+    color: var(--bal-form-field-label-danger-color)
+  &.is-success
+    color: var(--bal-form-field-label-success-color)
+  // deprecated
+  &.is-warning
+    color: var(--bal-color-text-warning)
+  &.is-disabled
+    color: var(--bal-form-field-label-disabled-color)
+
+.help
+  display: block
+  margin-top: -2px
+  color: var(--bal-form-field-message-color)
+  font-size: var(--bal-form-field-message-font-size)
+  font-weight: var(--bal-form-field-message-font-weight)
+  hyphens: auto
+  &.is-danger
+    color: var(--bal-form-field-message-danger-color)
+  &.is-success
+    color: var(--bal-form-field-message-success-color)
+  // deprecated
+  &.is-warning
+    color: var(--bal-color-text-warning)
+  &.is-disabled
+    color: var(--bal-form-field-message-disabled-color)
+
+.field
+  &:not(:last-child)
+    margin-bottom: 0.75rem
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .control
+      &:not(:last-child)
+        +ltr-property("margin", -1px)
+      &:not(:first-child):not(:last-child)
+        .button,
+        .input,
+        .select select
+          border-radius: 0
+      &:first-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-right-radius: 0
+          border-top-right-radius: 0
+      &:last-child:not(:only-child)
+        .button,
+        .input,
+        .select select
+          border-bottom-left-radius: 0
+          border-top-left-radius: 0
+      .button,
+      .input,
+      .select select
+        &:not([disabled])
+          &:hover,
+          &.is-hovered
+            z-index: 2
+          &:focus,
+          &.is-focused,
+          &:active,
+          &.is-active
+            z-index: 3
+            &:hover
+              z-index: 4
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.has-addons-centered
+      justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+    &.has-addons-fullwidth
+      .control
+        flex-grow: 1
+        flex-shrink: 0
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .control
+      flex-shrink: 0
+      &:not(:last-child)
+        margin-bottom: 0
+      &.is-expanded
+        flex-grow: 1
+        flex-shrink: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+    &.is-grouped-multiline
+      flex-wrap: wrap
+      & > .control
+        &:last-child,
+        &:not(:last-child)
+          margin-bottom: 0.75rem
+      &:last-child
+        margin-bottom: -0.75rem
+      &:not(:last-child)
+        margin-bottom: 0
+  &.is-horizontal
+    +tablet
+      display: flex
+
+.field-label
+  .label
+    font-size: inherit
+  +mobile
+    margin-bottom: 0.5rem
+  +tablet
+    flex-basis: 0
+    flex-grow: 1
+    flex-shrink: 0
+    +ltr-property("margin", 1.5rem)
+    text-align: right
+    &.is-small
+      font-size: var(--bal-text-size-small)
+      padding-top: 0.375em
+    &.is-normal
+      padding-top: 0.375em
+
+.field-body
+  .field .field
+    margin-bottom: 0
+  +tablet
+    display: flex
+    flex-basis: 0
+    flex-grow: 5
+    flex-shrink: 1
+    .field
+      margin-bottom: 0
+    & > .field
+      flex-shrink: 1
+      &:not(.is-narrow)
+        flex-grow: 1
+      &:not(:last-child)
+        +ltr-property("margin", 0.75rem)
+
+.control
+  box-sizing: border-box
+  clear: both
+  font-size: var(--bal-form-field-control-font-size)
+  position: relative
+  text-align: inherit
+  &.is-loading
+    &::after
+      animation: spinAround 500ms infinite linear
+      border: 2px solid var(--bal-form-field-control-border-color-active)
+      border-radius: var(--bal-radius-rounded)
+      border-right-color: transparent
+      border-top-color: transparent
+      content: ""
+      display: block
+      height: 1.125em
+      width: 1.125em
+      position: absolute !important
+      +ltr-position(0.875rem)
+      top: 0.875rem
+      z-index: 4
+
+.control.has-icons-right::after
+  right: 2.3rem
+
+.field.is-grouped
+  gap: calc(var(--bal-column-gap) / 2)
+
+.field.has-direction-row.is-grouped
+  flex-direction: row
+
+.field.has-direction-column.is-grouped
+  flex-direction: column
+  width: fit-content
+  .button
+    width: 100%
+  .bal-button
+    margin: 0 !important
+
++mobile()
+  .field.has-direction-auto.is-grouped
+    flex-wrap: wrap
+    flex-direction: column
+    width: 100%
+    .control
+      flex-grow: 1
+      flex-shrink: 1
+      min-width: 100%
+      margin-right: 0 !important
+      .button
+        min-width: 100%
+    &.is-reverse
+      flex-direction: column-reverse