wmdeit_kaform/scss/vars.scss

@use "sass:math";

// =FUNCTIONS
// ---------------------------------------------------------------------------
@function strip-unit($number) {
    @if type-of($number) == 'number' and not unitless($number)
    {
        @return math.div($number , ($number * 0 + 1));
    }

    @return $number;
}

// =BREAKPOINTS
// ---------------------------------------------------------------------------
$sm: 768px !default;
$md: 1024px !default;
$lg: 1440px !default;

// =WIDTH
// ---------------------------------------------------------------------------
$width-small: 420px !default;
$width-medium: 820px !default;
$width-large: 1000px !default;

// =SPACE
// ---------------------------------------------------------------------------
$space-2: 2px !default;
$space-4: 4px !default;
$space-8: 8px !default;
$space-12: 12px !default;
$space-16: 16px !default;
$space-20: 20px !default;
$space-24: 24px !default;
$space-28: 28px !default;
$space-32: 32px !default;
$space-36: 36px !default;
$space-40: 40px !default;
$space-44: 44px !default;
$space-48: 48px !default;
$space-52: 52px !default;
$space-56: 56px !default;
$space-60: 60px !default;
$space-64: 64px !default;
$space-80: 80px !default;
$space-100: 100px !default;
$space-120: 120px !default;

// map
$map-space: (
  2: $space-2,
  4: $space-4,
  8: $space-8,
  12: $space-12,
  16: $space-16,
  20: $space-20,
  24: $space-24,
  28: $space-28,
  32: $space-32,
  36: $space-36,
  40: $space-40,
  44: $space-44,
  48: $space-48,
  52: $space-52,
  56: $space-56,
  60: $space-60,
  64: $space-64,
  80: $space-80,
  100: $space-100,
  120: $space-120
);

// =ZINDEX
// ---------------------------------------------------------------------------
$z-over-content: 100 !default; // overlays
$z-over-page: 200 !default; // modals/offcanvas
$z-over-control: 300 !default; // dropdowns
$z-over-all: 400 !default; // messages


// =GRID
// ---------------------------------------------------------------------------
$grid-gap: $space-24 !default;


// =FONTFAMILY
// ---------------------------------------------------------------------------
$font-family-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !default;
$font-family-monospace: monospace, monospace !default;


// =COLORS
// ---------------------------------------------------------------------------

// Base
$color-black: #111113 !default;
$color-red: #ee2455 !default;
$color-orange: #ff6951 !default;
$color-yellow: #feb701 !default;
$color-blue: #158df7 !default;
$color-violet: #7b2ed7 !default;
$color-green: #20bc71 !default;
$color-inverted: #fff !default;

// Text
$color-text: #111113 !default;
$color-text-secondary: rgba($color-text, .6) !default;
$color-text-tertiary: rgba($color-text, .5) !default;
$color-text-disabled: rgba($color-text, .4) !default;

// Links
$color-link: #158df7 !default;
$color-link-hover: $color-red !default;

// States
$color-error: $color-red !default;
$color-success: $color-green !default;
$color-focus: $color-blue !default;
$color-warning: $color-orange !default;

// Accent
$color-accent: $color-red !default;
$color-highlight: rgba($color-focus, .1) !default;

// Button
$color-button: #0c3dd7 !default;



// =GLOBALS
// ---------------------------------------------------------------------------

// Font Metrics
$letter-height: math.div(12,16);
$crop-top:  0.49em;
$crop-bottom: 0.49em;

// Font Size
$font-size-smaller: 0.75em !default; // 12px
$font-size-small: 0.875em !default; // 14px
$font-size-default: 1em !default; // 16px
$font-size-big: 1.125em !default; // 18px
$font-size-large: 1.3125em !default; // 22px
$font-size-ui: 0.9375em !default; // 15px

// Baseline
$base-line: 1.5 !default;
$base-line-big: 1.45 !default;
$base-line-large: 1.45 !default;
$base-line-ems: $base-line * 1em !default;

// Box Shadow
$shadow-1: 0 1px 3px rgba($color-black, .15) !default;
$shadow-2: 0 6px 24px rgba($color-black, .12) !default;
$shadow-3: 0 15px 40px rgba($color-black, .2) !default;

// Border
$border-radius: 4px !default;
$border: 1px solid rgba($color-black, .07) !default;

// Input/Buttons Height
$controls-height: ((math.div(40,(strip-unit($font-size-ui)*16))) * 1em) !default; // 40px in ems
$controls-height-small: ((math.div(32,(strip-unit($font-size-small)*16))) * 1em) !default; // 32px in ems
$controls-height-big: ((math.div(44,(strip-unit($font-size-big)*16))) * 1em) !default; // 44px in ems

// Overlay
$overlay-background-color: rgba($color-black, .18) !default;


// =HEADINGS
// ---------------------------------------------------------------------------

// Font Size
$headings-font-size-1: 2.5em !default; // 40
$headings-font-size-2: 1.75em !default; // 28
$headings-font-size-3: 1.5em !default; // 24
$headings-font-size-4: 1.25em !default; // 20
$headings-font-size-5: 1em !default; // 16
$headings-font-size-6: .75em !default; // 12

// Baseline
$headings-base-line: 1.2 !default;

// Weight
$headings-font-weight: bold !default;


// =ELEMENTS
// ---------------------------------------------------------------------------

// code
$code-color-text: rgba($color-black, .75) !default;
$code-background: rgba($color-black, .05) !default;
$code-border-width: 0 !default;
$code-border-style: solid !default;
$code-border-color: transparent !default;
$code-border-radius: $border-radius !default;

// kbd
$kbd-color-text: rgba($color-black, .75) !default;
$kbd-background: none !default;
$kbd-border-width: 1px !default;
$kbd-border-style: solid !default;
$kbd-border-color: rgba($color-black, .2) !default;
$kbd-border-radius: $border-radius !default;

// blockquote
$blockquote-font-size: $font-size-big !default;
$blockquote-font-weight: normal !default;
$blockquote-font-style: italic !default;
$blockquote-line-height: $base-line-big;
$blockquote-color-text: $color-text-secondary !default;
$blockquote-padding: .4em 0 .4em 1rem !default;
$blockquote-border: none !default;
$blockquote-border-left: 3px solid rgba($color-focus, .6) !default;

// pre
$pre-font-size: $font-size-small !default;
$pre-line-height: $base-line !default;
$pre-color-text: $color-black !default;
$pre-background: transparent !default;
$pre-padding: 1rem !default;
$pre-border-width: 1px !default;
$pre-border-style: solid !default;
$pre-border-color: rgba($color-black, .08) !default;
$pre-border-radius: $border-radius !default;

// list
$list-bar-space: 1em !default;


// =ALERT
// ---------------------------------------------------------------------------

$alert-font-family: $font-family-text !default;
$alert-font-size: $font-size-ui !default;
$alert-font-weight: 500 !default;
$alert-text-transform: none !default;
$alert-background: #fff !default;
$alert-color-text: $color-text !default;
$alert-padding: $space-16 $space-32 $space-16 $space-16 !default;
$alert-box-shadow: none !default;
$alert-border-width: 1px !default;
$alert-border-style: solid !default;
$alert-border-color: rgba($color-black, .1) !default;
$alert-border-radius: $border-radius !default;

// link
$alert-link-color-hover: $color-link-hover !default;

// error
$alert-error-background: rgba($color-error, .07) !default;
$alert-error-border-color: rgba($color-error, .3) !default;
$alert-error-color-text: $color-error !default;
$alert-error-link-color-hover: $color-black !default;

// success
$alert-success-background: rgba($color-success, .07) !default;
$alert-success-border-color: rgba($color-success, .3) !default;
$alert-success-color-text: $color-success !default;
$alert-success-link-color-hover: $color-black !default;

// focus
$alert-focus-background: rgba($color-focus, .07) !default;
$alert-focus-border-color: rgba($color-focus, .3) !default;
$alert-focus-color-text: $color-focus !default;
$alert-focus-link-color-hover: $color-black !default;

// inverted
$alert-inverted-background: rgba($color-inverted, .15) !default;
$alert-inverted-border-color: rgba($color-inverted, .4) !default;
$alert-inverted-color-text: $color-inverted !default;
$alert-inverted-link-color-hover: rgba($color-inverted, .6) !default;


// =FORM
// ---------------------------------------------------------------------------

// item
$form-item-margin: $space-16 !default;
$form-item-inline-offset: 150px !default;

// legend
$form-legend-font-size: $font-size-smaller !default;
$form-legend-font-weight: bold !default;
$form-legend-text-transform: uppercase !default;
$form-legend-color-text: rgba($color-black, .5) !default;

// fieldset
$form-fieldset-padding: $space-32 !default;
$form-fieldset-border-width: 1px !default;
$form-fieldset-border-style: solid !default;
$form-fieldset-border-color: rgba($color-black, .1) !default;
$form-fieldset-border-radius: $border-radius !default;

// label
$form-label-font-size: $font-size-ui !default;
$form-label-font-weight: normal !default;
$form-label-text-transform: none !default;
$form-label-color-text: $color-text !default;

// desc
$form-desc-font-size: .75rem !default;
$form-desc-font-weight: normal !default;
$form-desc-text-transform: none !default;
$form-desc-color-text: $color-text-tertiary !default;

// required
$form-req-font-size: 1rem !default;
$form-req-font-weight: bold !default;
$form-req-color-text: $color-error !default;


// =INPUT
// ---------------------------------------------------------------------------

// placeholder
$input-placeholder-text-color: rgba($color-black, .4) !default;

// textarea
$input-textarea-base-line: $base-line !default;
$input-textarea-padding: $space-8 !default;

// default
$input-default-font-size: $font-size-ui !default;
$input-default-font-weight: normal !default;
$input-default-height: $controls-height !default;
$input-default-padding: 0 $space-8 !default;
$input-default-background: #fff !default;
$input-default-color-text: rgba($color-black, .8) !default;
$input-default-border-width: 1px !default;
$input-default-border-style: solid !default;
$input-default-border-color: rgba($color-black, .1) !default;
$input-default-border-radius: $border-radius !default;
$input-default-box-shadow: none !default;

// hover
$input-hover-background: #fff !default;
$input-hover-color-text: inherit !default;
$input-hover-border-width: 1px !default;
$input-hover-border-style: solid !default;
$input-hover-border-color: rgba($color-black, .2) !default;
$input-hover-box-shadow: none !default;

// focus
$input-focus-background: #fff !default;
$input-focus-color-text: inherit !default;
$input-focus-border-width: 1px !default;
$input-focus-border-style: solid !default;
$input-focus-border-color: rgba($color-focus, .5) !default;
$input-focus-box-shadow: 0 0 3px rgba($color-focus, .5) inset !default;

// error
$input-error-background: rgba($color-error, .05) !default;
$input-error-color-text: inherit !default;
$input-error-border-width: 1px !default;
$input-error-border-style: solid !default;
$input-error-border-color: rgba($color-error, .5) !default;
$input-error-box-shadow: none inset !default;

// error focus
$input-error-focus-border-color: rgba($color-error, .75) !default;
$input-error-focus-box-shadow: 0 0 3px rgba($color-error, .5) inset !default;

// success
$input-success-background: rgba($color-success, .05) !default;
$input-success-color-text: inherit !default;
$input-success-border-width: 1px !default;
$input-success-border-style: solid !default;
$input-success-border-color: rgba($color-success, .5) !default;
$input-success-box-shadow: none inset !default;

// success focus
$input-success-focus-border-color: rgba($color-success, .75) !default;
$input-success-focus-box-shadow: 0 0 3px rgba($color-success, .5) inset !default;

// warning
$input-warning-background: rgba($color-warning, .05) !default;
$input-warning-color-text: inherit !default;
$input-warning-border-width: 1px !default;
$input-warning-border-style: solid !default;
$input-warning-border-color: rgba($color-warning, .5) !default;
$input-warning-box-shadow: none inset !default;

// warning focus
$input-warning-focus-border-color: rgba($color-warning, .75) !default;
$input-warning-focus-box-shadow: 0 0 3px rgba($color-warning, .5) inset !default;


// disabled
$input-disabled-opacity: .7 !default;
$input-disabled-color-text: rgba($color-black, .6) !default;

// apppend / prepend
$input-append-font-size: $font-size-small !default;
$input-append-font-weight: normal !default;
$input-append-text-transform: none !default;
$input-append-padding: 0 $space-16 !default;
$input-append-background: #fff !default;
$input-append-color-text: rgba($color-black, .5) !default;
$input-append-border-width: 1px !default;
$input-append-border-style: solid !default;
$input-append-border-color: rgba($color-black, .1) !default;


// =BUTTON
// ---------------------------------------------------------------------------

// default
$button-default-font-size: $font-size-ui !default;
$button-default-font-weight: 500 !default;
$button-default-text-transform: none !default;
$button-default-text-decoration: none !default;
$button-default-height: $controls-height !default;
$button-default-padding: .5em 1.6em !default;
$button-default-background: $color-button !default;
$button-default-color-text: rgba(#fff, .95) !default;
$button-default-border-width: 0 !default;
$button-default-border-style: solid !default;
$button-default-border-color: transparent !default;
$button-default-border-radius: $border-radius !default;
$button-default-box-shadow: none !default;

// secondary
$button-secondary-font-size: $font-size-ui !default;
$button-secondary-font-weight: 500 !default;
$button-secondary-text-transform: none !default;
$button-secondary-text-decoration: none !default;
$button-secondary-height: $controls-height !default;
$button-secondary-padding: .5em 1.6em !default;
$button-secondary-background: none !default;
$button-secondary-color-text: $color-button !default;
$button-secondary-border-width: 2px !default;
$button-secondary-border-style: solid !default;
$button-secondary-border-color: $color-button !default;
$button-secondary-border-radius: $border-radius !default;
$button-secondary-box-shadow: none !default;

// tertiary
$button-tertiary-font-size: $font-size-ui !default;
$button-tertiary-font-weight: 500 !default;
$button-tertiary-text-transform: none !default;
$button-tertiary-text-decoration: none !default;
$button-tertiary-height: $controls-height !default;
$button-tertiary-padding: .5em 0 !default;
$button-tertiary-background: none !default;
$button-tertiary-color-text: $color-button !default;
$button-tertiary-border-width: 0 !default;
$button-tertiary-border-style: solid !default;
$button-tertiary-border-color: transparent !default;
$button-tertiary-border-radius: $border-radius !default;
$button-tertiary-box-shadow: none !default;

// small
$button-small-font-size: $font-size-small !default;
$button-small-height: $controls-height-small !default;
$button-small-padding: .45em 1.15em !default;

// big
$button-big-font-size: $font-size-big !default;
$button-big-height: $controls-height-big !default;
$button-big-padding: .45em 1.45em !default;

// =BREADCRUMB
// ---------------------------------------------------------------------------

$breadcrumb-font-size: $font-size-small !default;
$breadcrumb-font-weight: normal !default;
$breadcrumb-text-transform: none !default;
$breadcrumb-color-text: $color-text !default;
$breadcrumb-active-color-text: rgba($color-black, .55) !default;

// separator
$breadcrumb-separator-content: '/' !default;
$breadcrumb-separator-color-text: rgba($color-black, .4) !default;


// =DROPDOWN
// ---------------------------------------------------------------------------

$dropdown-width: 280px !default;
$dropdown-font-size: $font-size-ui !default;
$dropdown-font-weight: normal !default;
$dropdown-padding: 0 0 $space-2 0 !default;
$dropdown-background: #fff !default;
$dropdown-box-shadow: $shadow-2 !default;
$dropdown-border-width: 0 !default;
$dropdown-border-style: solid !default;
$dropdown-border-color: transparent !default;
$dropdown-border-radius: $border-radius !default;

// item
$dropdown-item-background: none !default;
$dropdown-item-color-text: $color-text !default;

// item hover
$dropdown-item-hover-background: rgba($color-black, .04) !default;
$dropdown-item-hover-color-text: $color-black !default;

// item active
$dropdown-item-active-background: none !default;
$dropdown-item-active-color-text: rgba($color-text, .4) !default;

// separator
$dropdown-separator-border-bottom: 1px solid rgba($color-black, .05) !default;


// =LABEL
// ---------------------------------------------------------------------------

$label-font-size: 13px !default;
$label-font-weight: 500 !default;
$label-text-transform: none !default;
$label-letter-spacing: 0 !default;
$label-line-height: 20px !default;
$label-background: #f3f3f3 !default;
$label-color-text: rgba($color-black, .85) !default;
$label-padding: 0 $space-8 !default;
$label-border-width: 1px !default;
$label-border-style: solid !default;
$label-border-color: transparent !default;
$label-border-radius: $border-radius !default;

// secondary
$label-secondary-font-size: 13px !default;
$label-secondary-font-weight: 500 !default;
$label-secondary-letter-spacing: 0 !default;
$label-secondary-text-transform: none !default;
$label-secondary-background: none !default;
$label-secondary-color-text: rgba($color-black, .85) !default;
$label-secondary-padding: 0 .5em !default;
$label-secondary-border-width: 1px !default;
$label-secondary-border-style: solid !default;
$label-secondary-border-color: rgba($color-black, .2) !default;
$label-secondary-border-radius: $border-radius !default;

// tertiary
$label-tertiary-font-size: 12px !default;
$label-tertiary-font-weight: bold !default;
$label-tertiary-letter-spacing: .035em !default;
$label-tertiary-text-transform: uppercase !default;
$label-tertiary-background: none !default;
$label-tertiary-color-text: $color-text !default;
$label-tertiary-padding: 0 .2em !default;
$label-tertiary-border-width: 1px !default;
$label-tertiary-border-style: solid !default;
$label-tertiary-border-color: transparent !default;
$label-tertiary-border-radius: 0 !default;

// badge
$badge-font-size: 10px !default;
$badge-line-height: 16px !default;


// =MESSAGE
// ---------------------------------------------------------------------------

$message-font-family: $font-family-text !default;
$message-font-size: $font-size-ui !default;
$message-font-weight: normal !default;
$message-text-transform: none !default;
$message-padding: $space-16 !default;
$message-width: 360px !default;
$message-background: #fff !default;
$message-box-shadow: $shadow-2 !default;
$message-color-text: $color-text !default;
$message-border-width: 1px !default;
$message-border-style: solid !default;
$message-border-color: transparent !default;
$message-border-radius: $border-radius !default;
$message-link-color-hover: rgba($color-text, .6) !default;

// error
$message-error-background: $color-error !default;
$message-error-color-text: #fff !default;
$message-error-link-color-hover: rgba(#fff, .7) !default;
$message-error-border-color: transparent !default;

// success
$message-success-background: $color-success !default;
$message-success-color-text: #fff !default;
$message-success-link-color-hover: rgba(#fff, .7) !default;
$message-success-border-color: transparent !default;

// focus
$message-focus-background: $color-focus !default;
$message-focus-color-text: rgba(#fff, .95) !default;
$message-focus-link-color-hover: rgba(#fff, .7) !default;
$message-focus-border-color: transparent !default;

// black
$message-black-background: $color-black !default;
$message-black-color-text: #fff !default;
$message-black-link-color-hover: rgba(#fff, .7) !default;
$message-black-border-color: transparent !default;


// =MODAL
// ---------------------------------------------------------------------------

$modal-font-family: inherit !default;
$modal-background: #fff !default;
$modal-box-shadow: $shadow-3 !default;
$modal-border-radius: $border-radius !default;
$modal-color-text: $color-text !default;

// header
$modal-header-background: none !default;
$modal-header-padding: $space-20 $space-24 !default;
$modal-header-font-size: 1.05rem !default;
$modal-header-font-weight: bold !default;
$modal-header-border-bottom: 1px solid rgba($color-black, .05) !default;

// body
$modal-body-font-size: inherit !default;
$modal-body-background: none !default;
$modal-body-padding: $space-24 !default;

// footer
$modal-footer-font-size: inherit !default;
$modal-footer-font-weight: normal !default;
$modal-footer-background: none !default;
$modal-footer-padding: $space-16 $space-24 !default;
$modal-footer-border-top: 1px solid rgba($color-black, .05) !default;


// =NAVIGATION
// ---------------------------------------------------------------------------

// navbar
$navbar-item-space: $space-28;


// =OFFCANVAS
// ---------------------------------------------------------------------------

$offcanvas-width: 300px;


// =PAGER
// ---------------------------------------------------------------------------

$pager-font-size: $font-size-small !default;
$pager-font-weight:  normal !default;
$pager-text-transform: none !default;
$pager-color-text: $color-text !default;
$pager-padding: $space-8 $space-16 !default;
$pager-border-width: 1px !default;
$pager-border-style: solid !default;
$pager-border-color: rgba($color-black, .1) !default;
$pager-border-radius: $border-radius !default;

// hover
$pager-hover-color-text: $color-black !default;
$pager-hover-border-color: $color-black !default;

// current
$pager-current-color-text: rgba($color-black, .9) !default;
$pager-current-border-color: rgba($color-black, .5) !default;

// active
$pager-active-color-text: rgba($color-black, .7) !default;
$pager-active-border-color: rgba($color-black, .2) !default;


// =PROGRESS
// ---------------------------------------------------------------------------

$progress-background-box-color: rgba($color-black, .2) !default;
$progress-background-color: $color-focus !default;


// =TABLE
// ---------------------------------------------------------------------------

$table-font-size: $font-size-ui !default;
$table-color-text: inherit !default;
$table-padding-tb: $space-16 !default;
$table-padding-rl: $space-16 !default;
$table-border: 1px solid #eee !default;
$table-background-striped: #fafafa !default;
$table-th-border-width: 1px !default;
$table-th-border-color: #eee !default;

// head
$table-head-font-weight: 700 !default;
$table-head-color-text: inherit !default;

// caption
$table-caption-font-size: 11px !default;
$table-caption-font-weight: bold !default;
$table-caption-color-text: rgba($color-text, .4) !default;
$table-caption-text-transform: uppercase !default;
$table-caption-letter-spacing: 1px !default;


// =TABS
// ---------------------------------------------------------------------------

$tabs-font-size: $font-size-ui !default;
$tabs-font-weight: normal !default;
$tabs-text-transform: none !default;
$tabs-text-decoration: none !default;
$tabs-padding: 8px 20px !default;
$tabs-background-color: transparent !default;
$tabs-color-text: rgba($color-black, .65) !default;
$tabs-border-width: 2px !default;
$tabs-border-style: solid !default;
$tabs-border-color: transparent !default;

// hover
$tabs-hover-background: none !default;
$tabs-hover-color-text: $color-link !default;
$tabs-hover-text-decoration: none !default;
$tabs-hover-border-width: 2px !default;
$tabs-hover-border-style: solid !default;
$tabs-hover-border-color: $color-link !default;

// active
$tabs-active-background: none !default;
$tabs-active-color-text: $color-black !default;
$tabs-active-text-decoration: none !default;
$tabs-active-border-width: 2px !default;
$tabs-active-border-style: solid !default;
$tabs-active-border-color: $color-black !default;