seed-modal

    0.0.2 • Public • Published

    seed-modal Build Status npm version dependencies Status

    Modal component pack for Seed!

    JS is powered by Bootstrap.js

    Install

    npm install seed-modal --save
    

    Documentation

    Check out our documentation of this pack.

    Basic Usage

    SCSS

    This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var pack = require('seed-modal');
     
    gulp.task('sass', function () {
      return gulp.src('./sass/**/*.scss')
        .pipe(sass({
          includePaths: pack
        }))
        .pipe(gulp.dest('./css'));
    });

    Once that is setup, simply @import seed-modal as needed in your .scss file:

    // Packs 
    @import "pack/seed-modal/_index";

    Options

    The following variables can be found in _config.scss

    // Namespaces 
    $seed-modal-namespace: modal !default;
    $seed-modal-backdrop-namespace: modal-backdrop !default;
    $seed-modal-content-namespace: modal-content !default;
    $seed-modal-dialog-namespace: modal-dialog !default;
    $seed-modal-scrollbar-measure-namespace: modal-scrollbar-measure !default;
    // Config: Modal 
    $seed-modal-z-index: 1050 !default;
    // Config: Modal backdrop 
    $seed-modal-backdrop-background-color: #000 !default;
    $seed-modal-backdrop-opacity-in: 0.5;
    $seed-modal-backdrop-z-index: 1040;
    // Config: Modal content 
    $seed-modal-content-box-shadow: 0 3px 9px rgba(black, 0.4) !default;
    // Config: Modal dialog 
    $seed-modal-dialog-margin: 10px !default;
    $seed-modal-dialog-margin-md: 30px auto !default;
    $seed-modal-dialog-sizes: (
      sm: 300px,
      md: 600px,
      lg: 900px,
    !default;

    Install

    npm i seed-modal

    DownloadsWeekly Downloads

    8

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • itsjonq