now-ui-kit.scss

/*!
* Based on Bootstrap v4.0.0 (https://getbootstrap.com) 
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700');

// Color system
 
$theme-colors: (
  primary: #f96332,
  secondary: #888,
  light: #FFFFFF,
  dark: #2c2c2c,
  info: #2CA8FF,
  success: #18ce0f,
  warning: #FFB236,
  danger: #FF3636,
	gray : #EEEEEE, 
);

$yiq-text-dark: 						#888 !default;
$yiq-contrasted-threshold: 	200 !default;


// Body

$body-bg: 						white;
$body-color: 					#292b2c;
$body-color-inverse: 	invert($body-color) !default;
$text-muted: 					#9A9A9A !default;


// Links

$link-hover-decoration: none;


// Components

$border-radius:			.25rem !default;
$border-radius-lg:  .3rem !default;
$border-radius-sm:  .2rem !default;


// Fonts

$font-family-base: 				Montserrat;
$display-font-family: 		$font-family-base;
$headings-font-family: 		$font-family-base;

$line-height-base: 				1.6;
$headings-line-height: 		1.4em;

$font-weight-normal: 			400;
$headings-font-weight: 		400;
$headings-margin-bottom: 	30px;

$font-size-base: 					0.875rem;
$lead-font-size: 					1.30rem;
$small-font-size: 				70%;

$h1-font-size: 						3.5em;
$h2-font-size: 						2.5em;
$h3-font-size: 						2em;
$h4-font-size: 						1.714em;
$h5-font-size: 						1.57em;
$h6-font-size: 						1em; 

$display1-size: 					2.8em;
$display2-size: 					5.5 * $font-size-base;
$display3-size: 					4.5 * $font-size-base;
$display4-size: 					3.5 * $font-size-base;


// Buttons

$btn-line-height: 			1.2rem;
$btn-border-width: 			1px;
$btn-box-shadow: 				0 3px 8px 0 rgba(0,0,0,.2);
$btn-focus-box-shadow:  none;
$btn-active-box-shadow: none;


// Forms

$input-btn-padding-x:       1.3rem;
$input-btn-padding-y:       .55rem;
$input-btn-padding-x-sm:    .8rem;
$input-btn-padding-x-lg:    3rem ;
$input-btn-padding-y-lg:    0.95rem;
$input-color:								inherit;
$input-bg:                  transparentize(white, .9);
$input-group-addon-bg:      $input-bg;
$input-group-addon-color:		transparentize($body-color, .2);
$input-placeholder-color:		transparentize($body-color, .75);
$input-box-shadow:          none;
$input-focus-bg:            transparentize(white, .6);
$input-font-size:						$font-size-base * 0.85;
$input-height-inner:       	($input-font-size * $line-height-base) + ($input-btn-padding-y * 2);
$input-focus-box-shadow:		none;
$input-border-radius:      	$border-radius * 10;
$input-border-radius-lg:   	$border-radius-lg * 10;
$input-border-radius-sm:   	$border-radius * 10;

$custom-control-indicator-bg:										transparent;				
$custom-control-indicator-checked-bg:						transparent;
$custom-control-indicator-checked-disabled-bg:  transparent;
$custom-control-indicator-disabled-bg:  				transparent;
$custom-control-indicator-active-bg : 					transparent;
$custom-control-indicator-focus-box-shadow:  		none;
$custom-control-indicator-checked-color: 				#555;

$custom-checkbox-indicator-indeterminate-bg:    transparent;
$custom-checkbox-indicator-icon-checked: none;
$custom-radio-indicator-icon-checked:           url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E") !default;


// Cards

$card-border-width:  0px;
$card-border-radius: $border-radius;


// Dropdowns

$dropdown-item-padding-y:	0.5rem !default;
$dropdown-header-color:		transparentize($body-color, .75);


// Navs

$nav-link-padding-x:          1.4rem !default;
$nav-link-padding-y:          .7rem !default;
$nav-pills-border-radius:   	$font-size-base * $line-height-base * 2 ;
$nav-tabs-border-width : 			0px;


// Navbar

$navbar-brand-font-size:		0.85 * $font-size-base;
$navbar-dark-color:         white;
$navbar-dark-hover-color:   white;
$navbar-padding-y:          9px;
$navbar-nav-link-padding-x: .65rem;


// Pagination

$pagination-border-width: 0px !default;


// Tooltips

$tooltip-bg: 				#FFFFFF !default;
$tooltip-padding-x: 1rem !default;
$tooltip-max-width: 170px !default;


// Popovers

$popover-bg: 						#f96332;
$popover-body-color: 		white;
$popover-max-width: 		240px;
$popover-border-width: 	0px;
$popover-box-shadow: 		0px 10px 50px 0px rgba(0, 0, 0, 0.2) !default;
$popover-header-bg: 		$popover-bg;
$popover-header-color: 	rgba(white, .6);


// Badges

$badge-font-size:				0.7142em;
$badge-font-weight: 		700;
$badge-pill-padding-x: .5rem;


// Modals

$modal-content-border-width: 0px;
$modal-inner-padding:        1.2rem;
$modal-header-padding:       1.5rem;
$modal-backdrop-opacity:      .15;
$modal-sm:                   255px;


// Progress bars

$progress-height:   1px;


// Import Bootstrap 4.0.0

@import 'bootstrap-4.0.0';


// Override Bootstrap components

.nav {
  &.nav-tabs {
    background-color: $body-bg;
    .nav-link {
      color:color-yiq($body-bg);
      &.active {
  	  	border: 1px solid color-yiq($body-bg);
	    	border-radius: 30px;
		  }
    }
    
    @each $name, $value in $theme-colors {
      &.bg-#{$name}{
        > .nav-item {
          > .nav-link {
            background-color: transparent;
            color:color-yiq($value);
            &.active {
              border: 1px solid color-yiq($value);
              border-radius: 30px;
            }
          }
        }
      }
    }
  }
  
  &.nav-pills {  
    .nav-item {
      margin-right: 15px;
      
      &.circle .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;
        width : 60px;
        height : 60px;
        overflow: hidden;
        border-radius: 120px;
      }
      
      .nav-link {
        background-color: rgba(222, 222, 222, 0.3);
        color: #9a9a9a;
        &.active {
           background-color: theme-color("primary");
           color:white;
           box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
        }
      }
    }
    
    &.flex-column {
      .nav-item {
        margin-right: 0px;
        margin-bottom: 15px;
      }
    }

    i {
      font-size:20px;
      line-height: 30px;
    }
  }
}


.navbar  {  
  transition: all 0.5s;
  transition-delay: 0.25s;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
  
  &.navbar-ontop {
    background-color: transparent !important;
    padding-top: 20px;
    box-shadow: none !important;
  }
  
  .nav-item .nav-link  {
    font-size: 10px;
    transition:background-color 0.4s;
    border-radius:3px;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 21px;
    
    &:hover {
      background-color:rgba(white,0.2);
    }
    
    &.active {
      background-color:rgba(white,0.2);
    }
  }
  
  &.transparent {
  	box-shadow: none !important;
  }
  
  .btn {
  	padding-top: 11px;
    padding-bottom: 11px;
    line-height: 21px;
    border: none;
  }
}


.btn {
  font-size: $input-font-size;

	@each $color, $value in $theme-colors {
 		&.btn-#{$color} {
  		@include button-variant($value, transparent, lighten($value, 7.5%), transparent, lighten($value, 7.5%), transparent);
      
	  	&:not(:disabled):not(.disabled):hover {
    		box-shadow: $btn-box-shadow; 
  	  }
    
      &:disabled:focus, &.disabled:focus {
        box-shadow: none !important;
      }
    
      &:not(:disabled):not(.disabled):active:focus, &:not(:hover):focus {
        background-color: lighten($value, 7.5%);
        box-shadow: none !important;
      }
	  }
  
    &.btn-outline-#{$color} {
      @include button-outline-variant($value, $value, transparent, $value);
      box-shadow: none !important;
      &:active {
        color:$value !important;
      }

    }  
	}
}

h6 {
  font-weight:700;
}


img {
  &.rounded {
    border-radius: .25rem !important;
  }
}

.carousel {
	box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
  .carousel-caption > * {
  	margin-bottom: 15px;
  }
}


.card {
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}

.modal {
  .modal-content {
	box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
	}
}


form {
	.form-control {
		font-size: $input-font-size;
	}
  
  .form-group.is-valid {
    &:after {
      font-family: Nucleo Outline;
      content: "\ea22";
      display: inline-block;
      position: absolute;
      right: 30px;
      top: calc((#{$input-height-inner} / 2) - #{$font-size-base * $line-height-base} / 2);  
      color: theme-color("success"); 
    }
  }
  
  .form-group.is-invalid {
    > * {
      border-color: transparentize(theme-color("danger"), .7);
      background: transparentize(theme-color("dark"), .98);
      color: theme-color("danger");
    }
    
    &:after {
      font-family: Nucleo Outline;
      content: "\ea53";
      display: inline-block;
      position: absolute;
      right: 30px;
      top: calc((#{$input-height-inner} / 2) - #{$font-size-base * $line-height-base} / 2);  
      color: theme-color("danger"); 
    }
  }
}


.input-group {
  background-color: $input-bg;
  border-radius: $input-border-radius;
  border: $input-border-width solid $input-border-color;
	transition: all 0.3s;
  
  .input-group-prepend span, .form-control {
		background: transparent;	
	} 
  
  &.focus {
   background-color: $input-focus-bg;
  }
  
  * {
    border:none;
  }
  
  .input-group-append span {
   padding-left: 0;
  }
  
  .input-group-prepend span {
   padding-right: 0;
  }
}


.custom-control {  
	.custom-control-label {
    padding-left: 5px;
    line-height: 26px;
	}
  
  .custom-control-label::before {
    border: 1px solid #E3E3E3;
  }

  .custom-control-label::after {
    transition: opacity .3s;
    opacity:0;
    color: $custom-control-indicator-checked-color;
  }
  
 	.custom-control-input {  
    &:checked ~ .custom-control-label {
    	&::after {
				opacity:1;
  	  }
	  }
    
	 	&:disabled ~ .custom-control-label::before {  
			opacity:.4;
	  }
    &:disabled ~ .custom-control-label::after {
			opacity:.4;
	  }
  }

  &.custom-select {
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  
  &.custom-checkbox {  
    .custom-control-label {
      padding-left: 40px;
    }
    
    .custom-control-label::before {
      top: 0;
      width: 26px;
      height: 26px;
      border: 1px solid #E3E3E3; 
      border-radius: $custom-checkbox-indicator-border-radius;
    }
    
    .custom-control-input {  
      &:checked ~ .custom-control-label {
        &::after {
          border-radius: $custom-checkbox-indicator-border-radius;
          top: 0;
          left: 6px;
          font-family: 'Nucleo Outline';
          content: "\ea22";   
        }
      }
    } 
  }
  
  &.custom-radio {
    margin-bottom:1rem;
  }
}


.dropdown-menu {
  border:none;
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);

  &:before {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    top: -5px;
    left: 10px;
    right: auto;
    color: #FFFFFF;
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
  }

  &:before {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    vertical-align: middle;
    content: "";
    top: -5px;
    left: auto;
    right: 10px;
    color: #FFFFFF;
    border-bottom: .4em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
  }
  
  .dropdown-item {
    font-size: 0.8571em;
  }
}


.pagination{
    .page-item {
     		background-color:transparent !important;
    }
  	
    .page-item .page-link{
        border: 0;
        border-radius: 30px ;
      	color: #2c2c2c;
        padding: 0px 11px;
        margin: 0 3px;
        min-width: 30px;
        text-align: center;
        height: 30px;
        line-height: 30px;
  	}
  	.disabled > a {
         color:theme-color("secondary") !important;
  	}
  
 		@each $name, $value in $theme-colors {
       .page-item.bg-#{$name} > a {
         background-color: $value;
          border-radius: 30px !important;
       }
    }  
  	.active > a {
      color:white !important;
      box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
    }
}


.badge {
  @each $name, $value in $theme-colors {
    &.badge.badge-#{$name} {
      background-color: white;
      color: $value;
      border : 1px solid $value;
      line-height: 12px;
      margin-bottom:5px;
      border-radius: 0.875rem;
      padding-bottom: .25rem;
      padding-top: .25rem;
    }
  }
}


.alert {
  @each $name, $value in $theme-colors {
    &.alert-#{$name} {
      background-color: $value;
      opacity: 0.8;
    }
  }
}


.blockquote {
  border-left: none;
  border: 1px solid #888;
  padding: 20px;
  font-size: 1.1em;
  line-height: 1.8;

  @each $name, $value in $theme-colors {
    &.blockquote-#{$name} {
      border-color: $value !important;
      color: $value !important;
    } 
    
    &.blockquote-#{$name} > .blockquote-footer {
      color: $value !important;
    }
  }
}


.tooltip-inner {
    min-width: 130px;
    color: black;
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
}


// 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);
    }
  }
}

// Progress bar
.progress {
  .progress-bar {
    color: transparent;
  }

  @each $color, $value in $theme-colors {
    &.progress.bg-#{$color} {
      background: rgba($value, 0.3) !important;
    
      .progress-bar {
        background: $value;
      }
    }
  }
}


// Custom styles
//
// Now ui kit additional classes for 

html,body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}


.custom-toggle {
  height: 2.0rem;
  position:relative;  
  .custom-control-label {
    padding-left:70px;
    position:absolute;
    
  }  
  input {
    width:60px;
    height:22px;
    z-index:1;
  }  
  .custom-control-input ~ .custom-control-label {
    &::before {
      @include gradient-bg($custom-control-indicator-checked-bg);
      width:58px;
      height:22px;
      border-radius: 30px;
      background: rgba(44, 44, 44, 0.2);
    }
    &::after {
      height:22px;
      width:22px;
      border-radius: 30px;
      position:absolute;
      left:0px;
      transition:all 0.5s;
      box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
      background-color:rgba(23, 23, 23, 0.4);
      opacity:1;
    }
  }  
  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      background:rgba(44, 44, 44, 0.2);
    }    
    &::after {
      background-color:white !important;
      box-shadow: 0px 0px 4px #333;
      left:40px;
    }    
  }
}


.custom-slider { 
  .custom-control-label::before {
    display:none;
  }
  
  .custom-control-label::after {
    display:none;
  }
  
  .slider {
    -webkit-appearance: none;  
    appearance: none;
    height: 1px; 
    background: #888; 
    outline: none; 
    opacity: 0.7; 
    transition: opacity .3s;
  }  

  .slider::-webkit-slider-thumb:active {
    transform: scale3d(1.5,1.5,1);
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; 
    height: 15px; 
    border-radius: 15px;
    background: white; 
    cursor: pointer; 
    box-shadow:0 1px 13px 0 rgba(0, 0, 0, 0.2);
    transition: all .3s;
  }
  .noslider::-moz-range-thumb {
      width: 25px; 
      height: 25px; 
      background: #4CAF50; 
      cursor: pointer; 
  }
  .noslider:hover {
    opacity: 1;
  }
}


.cover {
	min-height:125%;
  
  .container {
    height: 100vh; 
  }
}


.gradient-overlay {
  overflow: hidden;
  position: relative;  
  
  > *:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px; 
    pointer-events:none;
		background:linear-gradient(0deg, rgba(44, 44, 44, 0.2), rgba(224, 23, 3, 0.6));
  }
}


.section-overlapping {
	margin-top:-100px;
}


.btn-icon {
  height: calc(#{$btn-line-height + $btn-padding-y * 2} + #{$btn-border-width * 2});
  width: calc(#{$btn-line-height + $btn-padding-y * 2} + #{$btn-border-width * 2});
  border-radius : 50%;
  padding:0px;

  &.btn-lg {
    height: calc(#{$btn-line-height-lg + $btn-padding-y-lg * 2} + #{$btn-border-width * 2});
    width: calc(#{$btn-line-height-lg + $btn-padding-y-lg * 2} + #{$btn-border-width * 2});
  }

  &.btn-sm {
    height: calc(#{$btn-line-height-sm + $btn-padding-y-sm * 2} + #{$btn-border-width * 2});
    width: calc(#{$btn-line-height-sm + $btn-padding-y-sm * 2} + #{$btn-border-width * 2});
  }
}

.btn-twitter {
	color:#55acee !important;
}

.btn-facebook {
	color:#344e86 !important;
}


.btn-linkedin {
	color:#0077B5 !important;
}

.btn-google {
	color:#dd4b39 !important;
}



.rounded {
  border-radius:30px !important;
}

.datepicker {
  &.dropdown-menu  {
    background-color: theme-color("primary");
    color:white !important;
    font-size:14px;
  }
  &.dropdown-menu td:hover  {
    color:black !important;
  }
  &::after {
  	border-top: 6px solid theme-color("primary") !important;
  }
  td {
  	padding: 7px !important;
    &.new, &.old {
  		color: rgba(white, .4) !important;
  	}
  }  
}

/** shadow from 4.1 **/

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
.shadow-none {
  box-shadow: none !important;
}