colorful.scss

/*!
* Based on Bootstrap v4.1.3 (https://getbootstrap.com) 
*/
 
// Options
// 
// Quickly modify global styling by enabling or disabling optional features.
 
@import url('https://fonts.googleapis.com/css?family=Anton'); 
@import url('https://fonts.googleapis.com/css?family=Raleway:200,400,600,800');
@import url('https://fonts.googleapis.com/css?family=Quattrocento');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

$enable-rounded:            true !default;
$enable-shadows:            true;
$enable-transitions:        true;
$enable-hover-media-query:  false;
$enable-grid-classes:       true;
$enable-print-styles:       true;

// Variables
//
// Colors

$theme-colors: (
  primary: #00b0eb,
  secondary: #ee5100,
  light: #f3f3f3,
  dark: #151515,
  info: #0071bc,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545
);

$body-bg: white;
$body-color: #333;

$body-color-inverse: invert($body-color) !default;
$link-color: #aaa;

// Fonts
$font-family-base: Open+Sans&display=swap;
$headings-font-family: Open+Sans&display=swap;
$display-font-family: Anton;
$lead-font-size:   1.30rem;
$headings-line-height: 1.5;
$font-size-base: 1rem;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;

//Cards

$card-border-color: 	none;
$card-bg:							$body-bg;

$spacer: 1.5rem;

$border-radius: 0px;
$border-radius-lg: $border-radius * 1.2;
$border-radius-sm: $border-radius * .8;

//Forms
$input-bg: rgba(map-get($theme-colors, 'light'), 0.1);
$input-border-color: transparent;

$modal-transition:                  transform .3s ease-out !default;


@import 'bootstrap-4.1.3';

html,body {
   height:100%;
}

.navbar {
  opacity: 1;
  transition: opacity .5s ease-out;
}

.navbar-ontop {
  opacity: 0 !important;
}


.big-title {
  font-weight:600;
  line-height:1;
    @include media-breakpoint-up(sm) {
    font-size:10rem;
    }
}

// Color yiq
@each $name, $value in $theme-colors {
  .bg-#{$name} {
    color: color-yiq($value);
   	input::placeholder {
      color: transparentize(color-yiq($value), .2);
    }
    .input-group-text {
      color: color-yiq($value);
    }
  }
}

.cover {
	min-height:100%;
  display:flex;
  align-items:center;
}

.bg-fixed {
background-attachment: fixed;
}

.filter-dark {
  overflow: hidden;
  position: relative;
  color: color-yiq(map-get($theme-colors, 'dark'));
	&:before {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    content: ' ';
    background: rgba(map-get($theme-colors, 'dark'), 0.75);
  }
}