Commit 3d674147 authored by Dipesh Batheja's avatar Dipesh Batheja

bootstrap 4.1.0 updated with popper.js

parent bb1164e2
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -10,44 +10,44 @@
"license": "MIT",
"description": "Frontend Starter Kit",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.12.10",
"autoprefixer": "^6.7.7",
"browser-sync": "^2.23.6",
"chalk": "^1.1.3",
"cssnano": "^3.7.0",
"decache": "^4.1.0",
"cssnano": "^3.10.0",
"decache": "^4.4.0",
"del": "^2.2.0",
"eslint": "^2.11.1",
"fs": "0.0.2",
"gulp": "^3.9.1",
"gulp-changed": "^1.3.0",
"gulp-data": "^1.2.1",
"gulp-data": "^1.3.1",
"gulp-htmlhint": "^0.3.1",
"gulp-htmlhint-html-reporter": "^1.0.1",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.1",
"gulp-inject": "^4.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-imagemin": "^3.4.0",
"gulp-inject": "^4.3.2",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^2.2.0",
"gulp-nunjucks-render": "^2.0.0",
"gulp-postcss": "^6.1.1",
"gulp-nunjucks-render": "^2.2.2",
"gulp-postcss": "^6.4.0",
"gulp-prettify": "^0.5.0",
"gulp-rucksack": "^0.1.3",
"gulp-rucksack": "^0.1.4",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-svgstore": "^6.0.0",
"gulp-sourcemaps": "^1.12.1",
"gulp-svgstore": "^6.1.1",
"gulp-typescript": "^2.13.6",
"gulp-util": "^3.0.7",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.6",
"htmlhint": "^0.9.13",
"htmlhint-stylish": "^1.0.3",
"jsonfile": "^2.3.1",
"lodash": "^4.13.1",
"lodash": "^4.17.5",
"merge-stream": "^1.0.0",
"postcss-object-fit-images": "^1.1.2",
"require-dir": "^0.3.0",
"require-dir": "^0.3.2",
"run-sequence": "^1.2.1",
"stylelint": "^7.2.0",
"stylelint-config-sass-guidelines": "^1.1.0",
"stylelint": "^7.13.0",
"stylelint-config-sass-guidelines": "^1.1.1",
"stylelint-config-standard": "^13.0.0",
"ts-node": "^0.7.3",
"tslint": "^3.10.2",
......@@ -56,10 +56,10 @@
"yargs": "^4.7.1"
},
"dependencies": {
"bootstrap": "4.0.0-alpha.5",
"bootstrap": "4.1.0",
"jquery": "^2.2.4",
"object-fit-images": "^2.5.9",
"lt-ie-9": "^0.1.0",
"tether": "^1.3.2"
"object-fit-images": "^2.5.9",
"popper.js": "^1.14.3"
}
}
......@@ -11,7 +11,7 @@
{ "src": "node_modules/lt-ie-9/lt-ie-9.js", "inject": "lt-ie-9" },
{ "src": "node_modules/jquery/dist/jquery.js", "inject": "footer" },
{ "src": "node_modules/tether/dist/js/tether.js", "inject": "footer" },
{ "src": "node_modules/popper.js/dist/umd/popper.js", "inject": "footer" },
{ "src": "node_modules/bootstrap/dist/js/bootstrap.js", "inject": "footer" },
{ "src": "node_modules/object-fit-images/dist/ofi.browser.js", "inject": "footer" },
{ "src": "src/client/javascript/main.js", "inject": "footer" }
......
@import 'variables/main.scss';
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
......@@ -14,7 +14,7 @@
/// @param {Number} $base [$font-size-root] - The base value to use when calculating the `rem`.
///
/// @returns {List} A list of converted values.
@function rem-calc($values, $base: $font-size-root) {
@function rem-calc($values, $base: 16px) {
$rem-values: ();
$count: length($values);
......
// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
// Colors
// Color system
//
// Grayscale and brand colors for use across Bootstrap.
$gray-dark: #373a3c !default;
$gray: #55595c !default;
$gray-light: #818a91 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$brand-primary: #0275d8 !default;
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
$brand-inverse: $gray-dark !default;
// stylelint-disable
$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;
$grays: () !default;
$grays: map-merge((
"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
), $grays);
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
), $colors);
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
$enable-transitions: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
......@@ -76,46 +114,49 @@ $enable-print-styles: true !default;
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: $spacer-x,
y: $spacer-y
),
2: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
3: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
$border-width: 1px !default;
// stylelint-disable
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
), $spacers);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
25: 25%,
50: 50%,
75: 75%,
100: 100%
), $sizes);
// stylelint-enable
// Body
//
// Settings for the `<body>` element.
$body-bg: #fff !default;
$body-color: $gray-dark !default;
$body-bg: $white !default;
$body-color: $gray-900 !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
......@@ -130,7 +171,9 @@ $grid-breakpoints: (
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
......@@ -143,6 +186,7 @@ $container-max-widths: (
lg: 960px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
......@@ -150,708 +194,701 @@ $container-max-widths: (
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width-base: 30px !default;
$grid-gutter-widths: (
xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
) !default;
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Typography
// Components
//
// Font, line-height, and color for body text, headings, and more.
// Define common padding and border radius sizes and more.
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default;
$border-width: 1px !default;
$border-color: $gray-300 !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$line-height-base: 1.5 !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$font-size-h4: 1.5rem !default;
$font-size-h5: 1.25rem !default;
$font-size-h6: 1rem !default;
$caret-width: .3em !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
// stylelint-disable value-keyword-case
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
$small-font-size: 80% !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$text-muted: $gray-light !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$abbr-border-color: $gray-light !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$blockquote-small-color: $gray-light !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-border-width: .25rem !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$hr-border-color: rgba(0,0,0,.1) !default;
$hr-border-width: $border-width !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
$mark-padding: .2em !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$dt-font-weight: bold !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default;
$nested-kbd-font-weight: bold !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$list-inline-padding: 5px !default;
$small-font-size: 80% !default;
$text-muted: $gray-600 !default;
// Components
//
// Define common padding and border radius sizes and more.
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$mark-padding: .2em !default;
$component-active-color: #fff !default;
$component-active-bg: $brand-primary !default;
$dt-font-weight: $font-weight-bold !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
$hr-margin-y: $spacer !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-sm-cell-padding: .3rem !default;
$table-cell-padding: .75rem !default;
$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
$table-bg-accent: rgba(0,0,0,.05) !default;
$table-bg-hover: rgba(0,0,0,.075) !default;
$table-bg-active: $table-bg-hover !default;
$table-bg: transparent !default;
$table-accent-bg: rgba($black, .05) !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-300 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;
// Buttons
$table-dark-bg: $gray-900 !default;
$table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
$table-dark-color: $body-bg !default;
// Buttons + Forms
//
// For each of Bootstrap's buttons, define text, background and border color.
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$btn-padding-x: 1rem !default;
$btn-padding-y: .5rem !default;
$btn-line-height: 1.25 !default;
$btn-font-weight: normal !default;
$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-line-height: $line-height-base !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: $btn-primary-bg !default;
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$btn-secondary-color: $gray-dark !default;
$btn-secondary-bg: #fff !default;
$btn-secondary-border: #ccc !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-line-height-sm: $line-height-sm !default;
$btn-info-color: #fff !default;
$btn-info-bg: $brand-info !default;
$btn-info-border: $btn-info-bg !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-line-height-lg: $line-height-lg !default;
$btn-success-color: #fff !default;
$btn-success-bg: $brand-success !default;
$btn-success-border: $btn-success-bg !default;
$input-btn-border-width: $border-width !default;
$btn-warning-color: #fff !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border: $btn-warning-bg !default;
$btn-danger-color: #fff !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border: $btn-danger-bg !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-line-height: $input-btn-line-height !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;
$btn-padding-x-sm: .5rem !default;
$btn-padding-y-sm: .25rem !default;
$btn-border-width: $input-btn-border-width !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-block-spacing-y: .5rem !default;
$btn-toolbar-margin: .5rem !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-line-height: 1.25 !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-line-height: $input-btn-line-height !default;
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
$input-color: $gray !default;
$input-border-color: rgba(0,0,0,.15) !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-bg-focus: $input-bg !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: $input-box-shadow, 0 0 8px rgba(102,175,233,.6) !default;
$input-color-focus: $input-color !default;
$input-color-placeholder: #999 !default;
$input-padding-x-sm: .5rem !default;
$input-padding-y-sm: .25rem !default;