1
0
Fork 0
wmdeit_kaform/scss/vars.scss

726 lines
23 KiB
SCSS
Raw Normal View History

2021-09-13 07:03:07 +00:00
@use "sass:math";
2020-02-20 13:45:47 +00:00
// =FUNCTIONS
// ---------------------------------------------------------------------------
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number)
{
2021-09-13 07:03:07 +00:00
@return math.div($number , ($number * 0 + 1));
2020-02-20 13:45:47 +00:00
}
@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
2021-09-13 07:03:07 +00:00
$letter-height: math.div(12,16);
2020-02-20 13:45:47 +00:00
$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
2021-09-13 07:03:07 +00:00
$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
2020-02-20 13:45:47 +00:00
// 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;