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;
|
