initiatived21/d21

/*------------------------------------*\
    #VARS
    Our own variables to use throughout the project.
\*------------------------------------*/

$text-color:                       rgb(24%, 24%, 24%);
$background-color:                 #fff;
$font-size:                        15px;
$line-height:                      22.5px;

$c-btn--disabled-background: #767676;

/** FONTS
 * Font family values taken from https://www.sitepoint.com/eight-definitive-font-stacks/
 */

$font-family-heading: "Open Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
$main-font-family: "Open Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

$font-weight-light:                300;
$font-weight-regular:              400;
$font-weight-medium:               500;
$font-weight-bold:                 600;

/**
 * COLORS
 * We always specify colors throughout our SCSS from these variables.
 * Never use darken() etc. other places than here.
 * If you need to rename a Variable don't be afraid to do a global
 * find and replace in the CSS so that the variables are correct
 */


$primary-color:                    rgb(12%, 44%, 72%);
$secondary-color:                  rgb(71%, 6%, 5%);
$tertiary-color:                   rgb(95%, 57%, 0%);

$primary-color-highlight:          lighten($primary-color, 5%);
$secondary-color-highlight:        lighten($secondary-color, 5%);
$tertiary-color-highlight:         lighten($tertiary-color, 5%);

$primary-color-lighter:            rgb(38%, 61%, 80%);
$secondary-color-lighter:          rgb(80%, 34%, 33%);
$tertiary-color-lighter:           rgb(96%, 70%, 30%);

$primary-color-almost-white:       rgb(230, 244, 255);

$black:                            rgb(0%, 0%, 0%);
$white:                            rgb(100%, 100%, 100%);
$almost-white:                     rgb(96%, 96%, 96%);

$dark-gray:                        rgb(29%, 29%, 29%);
$mid-dark-gray:                    rgb(45%, 45%, 45%);
$gray:                             rgb(60%, 60%, 60%);
$light-gray:                       rgb(85%, 85%, 85%);
$mid-light-gray:                   rgb(70%, 70%, 70%);

$gray-highlight:                   lighten($gray, 5%);

$flash-notice-color:               rgb(83, 175, 87);
$flash-alert-color:                rgb(174, 175, 83);
$flash-error-color:                rgb(175, 83, 83);

// TODO: Think over these colors:
$success-color:                    rgb(47%, 60%, 69%);
$urgent-color:                     rgb(71%, 6%, 5%);

$warning-color:                    rgb(182,15,12);
$warning-color-highlight:          lighten($warning-color, 5%);
$warning-color-background:         rgba(182,15,12,0.05);



//$gray: #767676; //wcag-color for text on white background

$link: blue;

$tag-background-color: #082;



/**
 * SPACES, SIZES, LENGTHS ETC.
 *
 */

$input-height:                     40px;
$input-padding-horizontal:         6px;

$pledge-tile-height:               400px;
$avatar-size:                      89px;
$comment-avatar-size:              43px;

$off-canvas-menu-width:            250px;
$tooltip-width:                    180px;

$border-radius:                    5px;
$border-radius-large:              8px;

$btn-radius:                       $border-radius/2;

$box-shadow:                       0 0 10px rgba(0, 0, 0, 0.5);
$box-shadow-light:                 5px 5px 5px 0 rgba(0, 0, 0, 0.1);


/**
 * RESPONSIVE BREAKPOINTS
 * This is where we define all our breakpoints. It overwrites https://github.com/aleutcss/settings.responsive
 * These also generate helper-classes with aleut that we can use:
 * f.ex: u-1/2@m (for width), u-pt@s(for padding-top on s-size) etc.
 * See all alternatives in https://github.com/aleutcss/utilities.spacing-responsive and
 * utilities.widths-responsive.
 *
 * We can also use them with a media-query mixin like this:
 * Usage:
 *  @include media-query(s) {
 *
 *  }
 */

$breakpoints: (
    "s"       "screen and (max-width: 42.9375em)",
    "m"       "screen and (min-width: 43em)",
    "l"       "screen and (min-width: 62em)",
    "retina"  "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"
);

/**
 * Other vars here
 **/

$transition-time:                  250ms;