diff --git a/Gruntfile.js b/Gruntfile.js index 13fc9c8b..2f36ddb8 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -329,6 +329,14 @@ module.exports = function (grunt) { '**/*' ], dest: 'docs/dist/' + }, + 'bs-docs': { + expand: true, + cwd: '../bootstrap/docs/components', + src: [ + '**/*' + ], + dest: 'docs/components/' } }, diff --git a/docs/_plugins/variables.rb b/docs/_plugins/variables.rb index 28235d11..be0d66f4 100644 --- a/docs/_plugins/variables.rb +++ b/docs/_plugins/variables.rb @@ -43,11 +43,11 @@ module Variables } # - puts "\n---------------------" + # puts "\n---------------------" # puts site.data[:package]['version'] # puts site.data.to_yaml - puts repo - puts version + # puts repo + # puts version end end end diff --git a/scss/includes/_bootstrap.scss b/scss/includes/_bootstrap.scss index 4f7460ec..b4440045 100644 --- a/scss/includes/_bootstrap.scss +++ b/scss/includes/_bootstrap.scss @@ -1,5 +1,3 @@ -// V4 SCSS inclusion via an underscored file -// https://github.com/twbs/bootstrap/issues/18350 /*! * Bootstrap v4.0.0-alpha (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. diff --git a/scss/includes/_colors.scss b/scss/includes/_colors.scss index a428b3d4..85b1ce5f 100644 --- a/scss/includes/_colors.scss +++ b/scss/includes/_colors.scss @@ -357,5 +357,5 @@ $blue-grey-A700: #455a64 !default; $blue-grey: $blue-grey-500 !default; -$black: #000000; $rgb-black: "0,0,0" !default; -$white: #ffffff; $rgb-white: "255,255,255" !default; +$black: #000000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%"; +$white: #ffffff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%"; diff --git a/scss/includes/_form.scss b/scss/includes/_form.scss index f7a44cde..4c51f756 100644 --- a/scss/includes/_form.scss +++ b/scss/includes/_form.scss @@ -1,28 +1,28 @@ - -legend { - border-bottom: 0; -} - - -.form-horizontal { - - // Consistent vertical alignment of radios and checkboxes - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - padding-top: 0; - } - - .radio { - margin-bottom: 10px; - } - - label { - text-align: right; - } - - label.control-label { - margin: 0; - } -} +// +//legend { +// border-bottom: 0; +//} +// +// +//.form-horizontal { +// +// // Consistent vertical alignment of radios and checkboxes +// .radio, +// .checkbox, +// .radio-inline, +// .checkbox-inline { +// padding-top: 0; +// } +// +// .radio { +// margin-bottom: 10px; +// } +// +// label { +// text-align: right; +// } +// +// label.control-label { +// margin: 0; +// } +//} diff --git a/scss/includes/_navbar.scss b/scss/includes/_navbar.scss index f2158f77..4c2f0f78 100644 --- a/scss/includes/_navbar.scss +++ b/scss/includes/_navbar.scss @@ -1,214 +1,201 @@ - - .navbar { - background-color: $brand-primary; border: 0; border-radius: 0; - .navbar-brand { - position: relative; - height: 60px; - line-height: 30px; - color: inherit; - &:hover, - &:focus { - color: inherit; - background-color: transparent; - } - } - - .navbar-text { - color: inherit; - margin-top: 20px; - margin-bottom: 20px; - } - - .navbar-nav { - > li > a { - color: inherit; - padding-top: 20px; - padding-bottom: 20px; - - &:hover, - &:focus { - color: inherit; - background-color: transparent; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: inherit; - background-color: rgba(255, 255, 255, 0.1); - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: inherit; - background-color: transparent; - opacity: 0.9; - } - } - } - - // Darken the responsive nav toggle - .navbar-toggle { - border: 0; - &:hover, - &:focus { - background-color: transparent; - } - .icon-bar { - background-color: inherit; - border: 1px solid; - } - } - - .navbar-default .navbar-toggle, - .navbar-inverse .navbar-toggle { - border-color: transparent; - } - - .navbar-collapse, - .navbar-form { - border-color: rgba(0,0,0,0.1); - } - - // Dropdowns - .navbar-nav { - > .open > a { - &, - &:hover, - &:focus { - background-color: transparent; - color: inherit; - } - } - - @include media-breakpoint-down(md) { - //@media (max-width: $grid-float-breakpoint-max) { //768px - .navbar-text { - color: inherit; - margin-top: 15px; - margin-bottom: 15px; - } - - // Dropdowns get custom display - .open .dropdown-menu { - > .dropdown-header { - border: 0; - color: inherit; - } - .divider { - border-bottom: 1px solid; - opacity: 0.08; - } - > li > a { - color: inherit; - &:hover, - &:focus { - color: inherit; - background-color: transparent; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: inherit; - background-color: transparent; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: inherit; - background-color: transparent; - } - } - } - } - } - - .navbar-link { - color: inherit; - &:hover { - color: inherit; - } - } - - .btn-link { - color: inherit; - &:hover, - &:focus { - color: inherit; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: inherit; - } - } - } - - .navbar-form { - margin-top: 16px; - .form-group { - margin: 0; - padding: 0; - - .material-input:before, - &.is-focused .material-input:after { - background-color: inherit; - } - } - - .form-group .form-control, - .form-control { - border-color: inherit; - color: inherit; - padding: 0; - margin: 0; - - // re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap - //--- - //height: $mdb-input-height-base; - //$bs-line-height-base: 1.428571429 !default; - //$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px - //height: ($bs-line-height-computed + 8px); - //font-size: $font-size-base; - //line-height: $bs-line-height-base; - //--- - } - } - - // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content - @include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary); - - - &-inverse { - background-color: $indigo; - } - - @include media-breakpoint-down(lg) { - //@media (max-width: $screen-md-max) { // 1200-1 - - .navbar-brand { - height: 50px; - padding: 10px 15px; - } - .navbar-form { - margin-top: 10px; - } - - .navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; - } - } + //.navbar-brand { + // position: relative; + // height: 60px; + // line-height: 30px; + // color: inherit; + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // } + //} + // + //.navbar-text { + // color: inherit; + // margin-top: 20px; + // margin-bottom: 20px; + //} + // + //.navbar-nav { + // > li > a { + // color: inherit; + // padding-top: 20px; + // padding-bottom: 20px; + // + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // } + // } + // > .active > a { + // &, + // &:hover, + // &:focus { + // color: inherit; + // background-color: rgba(255, 255, 255, 0.1); + // } + // } + // > .disabled > a { + // &, + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // opacity: 0.9; + // } + // } + //} + // + //// Darken the responsive nav toggle + //.navbar-toggle { + // border: 0; + // &:hover, + // &:focus { + // background-color: transparent; + // } + // .icon-bar { + // background-color: inherit; + // border: 1px solid; + // } + //} + // + //.navbar-default .navbar-toggle, + //.navbar-inverse .navbar-toggle { + // border-color: transparent; + //} + // + //.navbar-collapse, + //.navbar-form { + // border-color: rgba(0,0,0,0.1); + //} + // + //// Dropdowns + //.navbar-nav { + // > .open > a { + // &, + // &:hover, + // &:focus { + // background-color: transparent; + // color: inherit; + // } + // } + // + // @include media-breakpoint-down(md) { + // //@media (max-width: $grid-float-breakpoint-max) { //768px + // .navbar-text { + // color: inherit; + // margin-top: 15px; + // margin-bottom: 15px; + // } + // + // // Dropdowns get custom display + // .open .dropdown-menu { + // > .dropdown-header { + // border: 0; + // color: inherit; + // } + // .divider { + // border-bottom: 1px solid; + // opacity: 0.08; + // } + // > li > a { + // color: inherit; + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // } + // } + // > .active > a { + // &, + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // } + // } + // > .disabled > a { + // &, + // &:hover, + // &:focus { + // color: inherit; + // background-color: transparent; + // } + // } + // } + // } + //} + // + //.navbar-link { + // color: inherit; + // &:hover { + // color: inherit; + // } + //} + // + //.btn-link { + // color: inherit; + // &:hover, + // &:focus { + // color: inherit; + // } + // &[disabled], + // fieldset[disabled] & { + // &:hover, + // &:focus { + // color: inherit; + // } + // } + //} + // + //.navbar-form { + // margin-top: 16px; + // .form-group { + // margin: 0; + // padding: 0; + // + // .material-input:before, + // &.is-focused .material-input:after { + // background-color: inherit; + // } + // } + // + // .form-group .form-control, + // .form-control { + // border-color: inherit; + // color: inherit; + // padding: 0; + // margin: 0; + // } + //} + // + //// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content + //@include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary); + // + // + //&-inverse { + // background-color: $indigo; + //} + // + //@include media-breakpoint-down(lg) { + // //@media (max-width: $screen-md-max) { // 1200-1 + // + // .navbar-brand { + // height: 50px; + // padding: 10px 15px; + // } + // .navbar-form { + // margin-top: 10px; + // } + // + // .navbar-nav > li > a { + // padding-top: 15px; + // padding-bottom: 15px; + // } + //} } diff --git a/scss/includes/_scaffolding.scss b/scss/includes/_scaffolding.scss index 00e8635c..0f1037f4 100644 --- a/scss/includes/_scaffolding.scss +++ b/scss/includes/_scaffolding.scss @@ -30,11 +30,11 @@ body { // } } -// Prevent highlight on mobile -* { - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - -webkit-tap-highlight-color: transparent; - &:focus { - outline: 0; - } -} +//// Prevent highlight on mobile +//* { +// -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +// -webkit-tap-highlight-color: transparent; +// &:focus { +// outline: 0; +// } +//} diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss index 1b15d3f7..a5e36bbd 100644 --- a/scss/includes/_variables.scss +++ b/scss/includes/_variables.scss @@ -1,14 +1,13 @@ @import 'colors'; - // Typography elements FIXME: review to see if we actually need these -$mdb-text-color-light: hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default; -$mdb-text-color-primary: hsla(0, 0%, 0%, 0.87) !default; // black 0.87 //unquote("rgba(#{$rgb-black}, 0.87)") !default; +$mdb-text-color-light: rgba(255, 255, 255, 0.84) !default; //hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default; +$mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default; $icon-color: rgba(0, 0, 0, 0.5) !default; //--- // Customized BS variables -$enable-flex: true; +//$enable-flex: true; // Bootstrap brand color customization $brand-primary: $teal !default; @@ -26,26 +25,24 @@ $headings-font-weight: 300 !default; $body-bg: #EEEEEE !default; - // Form states and alerts // // Define colors for form feedback states and, by default, alerts. -$state-success-text: $mdb-text-color-light !default; -$state-success-bg: $brand-success !default; +$state-success-text: $mdb-text-color-light !default; +$state-success-bg: $brand-success !default; //$state-success-border: darken($state-success-bg, 5%) !default; -$state-info-text: $mdb-text-color-light !default; -$state-info-bg: $brand-info !default; +$state-info-text: $mdb-text-color-light !default; +$state-info-bg: $brand-info !default; //$state-info-border: darken($state-info-bg, 7%) !default; - -$state-warning-text: $mdb-text-color-light !default; -$state-warning-bg: $brand-warning !default; +$state-warning-text: $mdb-text-color-light !default; +$state-warning-bg: $brand-warning !default; //$state-warning-border: darken($state-warning-bg, 5%) !default; -$state-danger-text: $mdb-text-color-light !default; -$state-danger-bg: $brand-danger !default; +$state-danger-text: $mdb-text-color-light !default; +$state-danger-bg: $brand-danger !default; //$state-danger-border: darken($state-danger-bg, 5%) !default; //--- diff --git a/scss/includes/mixins/_variations.scss b/scss/includes/mixins/_variations.scss index 6872f7ca..fb1dc9e1 100644 --- a/scss/includes/mixins/_variations.scss +++ b/scss/includes/mixins/_variations.scss @@ -24,44 +24,44 @@ } // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary -@mixin navbar-variations($component, $selector-suffix, $color-default) { - @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null); -} - -@mixin navbar-variations-content($args){ - $variation-color: map-get($args, variation-color); - $variation-color-text: map-get($args, variation-color-text); - - background-color: $variation-color; - color: $variation-color-text; - // deeply defined to override welljumbo class without !impotant need - .navbar-form .form-group input.form-control, - .navbar-form input.form-control { - @include material-placeholder { - color: $variation-color-text; - } - } - .dropdown-menu { - border-radius: $border-radius-base; - li > a { - font-size: $mdb-dropdown-font-size; - padding: 13px 16px; - &:hover, - &:focus { - color: $variation-color; - background-color: $grey-200; - } - } - .active > a { - &:hover, - &:focus { - color: $variation-color-text; - } - background-color: $variation-color; - color: $variation-color-text; - } - } -} +//@mixin navbar-variations($component, $selector-suffix, $color-default) { +// @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null); +//} +// +//@mixin navbar-variations-content($args){ +// $variation-color: map-get($args, variation-color); +// $variation-color-text: map-get($args, variation-color-text); +// +// background-color: $variation-color; +// color: $variation-color-text; +// // deeply defined to override welljumbo class without !impotant need +// .navbar-form .form-group input.form-control, +// .navbar-form input.form-control { +// @include material-placeholder { +// color: $variation-color-text; +// } +// } +// .dropdown-menu { +// border-radius: $border-radius-base; +// li > a { +// font-size: $mdb-dropdown-font-size; +// padding: 13px 16px; +// &:hover, +// &:focus { +// color: $variation-color; +// background-color: $grey-200; +// } +// } +// .active > a { +// &:hover, +// &:focus { +// color: $variation-color-text; +// } +// background-color: $variation-color; +// color: $variation-color-text; +// } +// } +//} // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given @mixin call-variations-content-mixin($args) {