_variables.scss

// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

$gray-dark: #dcdcdc !default;
$gray-light: #f9f9f9 !default;
$background-color-gray: $gray-light !default;
$border-color-gray: $gray-dark !default;
$background-color-gray-light: #fcfcfc !default;
$primary-action-color: rgb(64, 123, 160) !default;
$primary-bgcolor-rgba: rgba(201, 66, 129, 0.03) !default;

$text-color-dark: #1a1c29 !default;
$text-color-disabled: #bbbbbc !default;

$secondary-action-color: rgb(98, 172, 98) !default;
$secondary-action-color-dark: #5660e5 !default;

$gray-formtext: #515359 !default;
$gray-regular: #515359 !default;
$gray-deemphasized: #ababac !default;
$red-error: #b2242a !default;
$red-error2: #c94281 !default;
$bootstrap-4-danger-bg: #f2dede !default;
$bootstrap-4-danger-text-color: rgb(102, 102, 102) !default;
$space-unit: 2.1rem;

$green-affrimative: #35bf7d;

$box-shadow-med: 0 1px 3px rgba(0, 0, 0, 0.5);
$box-shadow-soft: 0 3px 10px rgba(93, 105, 171, 0.1);

$themes: (
  drug-upload-tool: (
    action-color: #5960a5,
  ),
  contribution-request: (
    action-color: rgb(12, 141, 22),
  ),
);

$primary-action-color-active: adjust-color(
  $primary-action-color,
  $saturation: 50%,
  $lightness: 0%
) !default;

$primary-action-color-900: adjust-color(
  $primary-action-color,
  $saturation: 24%,
  $lightness: -18%
) !default;

$primary-action-color-700: adjust-color(
  $primary-action-color,
  $saturation: 11%,
  $lightness: -8%
) !default;

$primary-action-color-500: adjust-color(
  $primary-action-color,
  $saturation: 29%,
  $lightness: -4%
) !default;

$primary-action-color-300: adjust-color(
  $primary-action-color,
  $saturation: -3%,
  $lightness: 10%
) !default;

$primary-color-palette: (
  base: $primary-action-color,
  active: $primary-action-color-active,
  300: $primary-action-color-300,
  500: $primary-action-color-500,
  700: $primary-action-color-700,
  900: $primary-action-color-900,
) !default;

/// Breakpoints map
/// @prop {String} keys - Keys are identifiers mapped to a given length
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
$breakpoints: (
  'small': 320px,
  'medium': 768px,
  'large': 1024px,
) !default;

// To reset bootstrap button style
%button-reset {
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 2px;
}

// Form Control
$gray-input-border: 1px solid #f2f2f2;
$input-padding: 12px 13px;