theme.scss

/*-- scss:defaults --*/

$theme: "ncsu" !default;

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #f7f7f9 !default;
$gray-300: #eceeef !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #919aa1 !default;
$gray-700: #55595c !default;
$gray-800: #343a40 !default;
$gray-900: #1a1a1a !default;
$black:    #000 !default;

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #CC0000 !default;
$orange:  #fd7e14 !default;
$yellow:  #f0ad4e !default;
$green:   #4bbf73 !default;
$teal:    #20c997 !default;
$cyan:    #1f9bcf !default;

$primary:       $red !default;
$secondary:     $white !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $white !default;
$dark:          $gray-800 !default;

$min-contrast-ratio:   2.3 !default;

// Options

$enable-rounded:            false !default;

// Body

$body-color:                $gray-700 !default;

// Fonts

// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$h1-font-size:                2rem !default;
$h2-font-size:                1.75rem !default;
$h3-font-size:                1.5rem !default;
$h4-font-size:                1.25rem !default;
$h5-font-size:                1rem !default;
$h6-font-size:                .75rem !default;
$headings-font-weight:        600 !default;
$headings-color:              $gray-900 !default;

// Tables

$table-border-color:          rgba(0, 0, 0, .05) !default;

// Buttons

$btn-line-height:             1.5rem !default;
$input-btn-padding-y:         .75rem !default;
$input-btn-padding-x:         1.5rem !default;
$input-btn-padding-y-sm:      .5rem !default;
$input-btn-padding-x-sm:      1rem !default;
$input-btn-padding-y-lg:      2rem !default;
$input-btn-padding-x-lg:      2rem !default;
$btn-font-weight:             600 !default;

// Forms

$input-line-height:                     1.5 !default;
$input-bg:                              $gray-200 !default;
$input-disabled-bg:                     $gray-300 !default;
$input-group-addon-bg:                  $gray-300 !default;

// Navbar

$navbar-padding-y:                  1.5rem !default;
$navbar-dark-hover-color:           $white !default;
$navbar-light-color:                rgba($black, .3) !default;
$navbar-light-hover-color:          $gray-900 !default;
$navbar-light-active-color:         $gray-900 !default;

// Pagination

$pagination-border-color:           transparent !default;
$pagination-hover-border-color:     $pagination-border-color !default;
$pagination-disabled-border-color:  $pagination-border-color !default;



/*-- scss:rules --*/


// Variables

$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

// Navbar

.navbar {
  font-size: $font-size-sm;
  text-transform: uppercase;
  font-weight: 600;

  &-nav {
    .nav-link {
      padding-top: .715rem;
      padding-bottom: .715rem;
    }
  }

  &-brand {
    margin-right: 2rem;
  }
}

.bg-primary {
  background-color: theme-color("primary") !important;
}

.bg-light {
  border: 1px solid rgba(0, 0, 0, .1);

  &.navbar-fixed-top {
    border-width: 0 0 1px;
  }

  &.navbar-bottom-top {
    border-width: 1px 0 0;
  }
}

.nav-item {
  margin-right: 2rem;
}

// Buttons

.btn {
  font-size: $font-size-sm;
  text-transform: uppercase;

  &-sm {
    font-size: 10px;
  }

  &-warning {
    &,
    &:hover,
    &:not([disabled]):not(.disabled):active,
    &:focus {
      color: $white;
    }
  }
}

.btn-outline-secondary {
  border-color: $gray-600;
  color: $gray-600;

  &:not([disabled]):not(.disabled):hover,
  &:not([disabled]):not(.disabled):focus,
  &:not([disabled]):not(.disabled):active {
    background-color: $gray-400;
    border-color: $gray-400;
    color: $white;
  }

  &:not([disabled]):not(.disabled):focus {
    box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
  }
}

[class*="btn-outline-"] {
  border-width: 2px;
}

.border-secondary {
  border: 1px solid $gray-400 !important;
}

// Typography

body {
  font-weight: 200;
  letter-spacing: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  letter-spacing: 3px;
}

.text-secondary {
  color: $body-color !important;
}

// Tables

th {
  font-size: $font-size-sm;
  text-transform: uppercase;
}

.table {
  th,
  td {
    padding: 1.5rem;
  }

  &-sm {
    th,
    td {
      padding: .75rem;
    }
  }
}

// Navs

.dropdown-menu {
  font-size: $font-size-sm;
  text-transform: none;
}

// Indicators

.badge {
  padding-top: .28rem;

  &-pill {
    border-radius: 10rem;
  }

  &.bg-secondary,
  &.bg-light {
    color: $dark;
  }
}

// Containers

.list-group-item {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    color: inherit;
  }
}

.card {
  &-title,
  &-header {
    color: inherit;
  }
}


// // scss-docs-start gray-color-variables
// $white:    #fff !default;
// $gray-100: #f8f9fa !default;
// $gray-200: #e9ecef !default;
// $gray-300: #dee2e6 !default;
// $gray-400: #ced4da !default;
// $gray-500: #adb5bd !default;
// $gray-600: #6c757d !default;
// $gray-700: #495057 !default;
// $gray-800: #343a40 !default;
// $gray-900: #212529 !default;
// $black:    #000 !default;
// // scss-docs-end gray-color-variables

// // fusv-disable
// // scss-docs-start gray-colors-map
// $grays: (
//   "100": $gray-100,
//   "200": $gray-200,
//   "300": $gray-300,
//   "400": $gray-400,
//   "500": $gray-500,
//   "600": $gray-600,
//   "700": $gray-700,
//   "800": $gray-800,
//   "900": $gray-900
// ) !default;
// // scss-docs-end gray-colors-map
// // fusv-enable

// // scss-docs-start color-variables
// $blue:    #0d6efd !default;
// $indigo:  #6610f2 !default;
// $purple:  #6f42c1 !default;
// $pink:    #d63384 !default;
// $red:     #CC0000 !default;
// $orange:  #fd7e14 !default;
// $yellow:  #ffc107 !default;
// $green:   #198754 !default;
// $teal:    #20c997 !default;
// $cyan:    #0dcaf0 !default;
// // scss-docs-end color-variables

// $primary:       $red !default;