mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 08:10:39 +03:00
checkpoint on reducing code, need to implement bs docs component copy to stay in sync with bs4 examples
This commit is contained in:
Kevin Ross
parent
dbb000c2a9
commit
0553b962c7
|
|
@ -329,6 +329,14 @@ module.exports = function (grunt) {
|
||||||
'**/*'
|
'**/*'
|
||||||
],
|
],
|
||||||
dest: 'docs/dist/'
|
dest: 'docs/dist/'
|
||||||
|
},
|
||||||
|
'bs-docs': {
|
||||||
|
expand: true,
|
||||||
|
cwd: '../bootstrap/docs/components',
|
||||||
|
src: [
|
||||||
|
'**/*'
|
||||||
|
],
|
||||||
|
dest: 'docs/components/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -43,11 +43,11 @@ module Variables
|
||||||
}
|
}
|
||||||
|
|
||||||
#
|
#
|
||||||
puts "\n---------------------"
|
# puts "\n---------------------"
|
||||||
# puts site.data[:package]['version']
|
# puts site.data[:package]['version']
|
||||||
# puts site.data.to_yaml
|
# puts site.data.to_yaml
|
||||||
puts repo
|
# puts repo
|
||||||
puts version
|
# puts version
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -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)
|
* Bootstrap v4.0.0-alpha (http://getbootstrap.com)
|
||||||
* Copyright 2011-2015 Twitter, Inc.
|
* Copyright 2011-2015 Twitter, Inc.
|
||||||
|
|
|
||||||
|
|
@ -357,5 +357,5 @@ $blue-grey-A700: #455a64 !default;
|
||||||
$blue-grey: $blue-grey-500 !default;
|
$blue-grey: $blue-grey-500 !default;
|
||||||
|
|
||||||
|
|
||||||
$black: #000000; $rgb-black: "0,0,0" !default;
|
$black: #000000; $rgb-black: "0,0,0"; $hsl-black: "0, 0%, 0%";
|
||||||
$white: #ffffff; $rgb-white: "255,255,255" !default;
|
$white: #ffffff; $rgb-white: "255,255,255"; $hsl-white: "0, 0%, 100%";
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
|
//
|
||||||
legend {
|
//legend {
|
||||||
border-bottom: 0;
|
// border-bottom: 0;
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
|
//
|
||||||
.form-horizontal {
|
//.form-horizontal {
|
||||||
|
//
|
||||||
// Consistent vertical alignment of radios and checkboxes
|
// // Consistent vertical alignment of radios and checkboxes
|
||||||
.radio,
|
// .radio,
|
||||||
.checkbox,
|
// .checkbox,
|
||||||
.radio-inline,
|
// .radio-inline,
|
||||||
.checkbox-inline {
|
// .checkbox-inline {
|
||||||
padding-top: 0;
|
// padding-top: 0;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
.radio {
|
// .radio {
|
||||||
margin-bottom: 10px;
|
// margin-bottom: 10px;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
label {
|
// label {
|
||||||
text-align: right;
|
// text-align: right;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
label.control-label {
|
// label.control-label {
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|
|
||||||
|
|
@ -1,214 +1,201 @@
|
||||||
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background-color: $brand-primary;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
.navbar-brand {
|
//.navbar-brand {
|
||||||
position: relative;
|
// position: relative;
|
||||||
height: 60px;
|
// height: 60px;
|
||||||
line-height: 30px;
|
// line-height: 30px;
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-text {
|
//.navbar-text {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
margin-top: 20px;
|
// margin-top: 20px;
|
||||||
margin-bottom: 20px;
|
// margin-bottom: 20px;
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-nav {
|
//.navbar-nav {
|
||||||
> li > a {
|
// > li > a {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
padding-top: 20px;
|
// padding-top: 20px;
|
||||||
padding-bottom: 20px;
|
// padding-bottom: 20px;
|
||||||
|
//
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
> .active > a {
|
// > .active > a {
|
||||||
&,
|
// &,
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
// background-color: rgba(255, 255, 255, 0.1);
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
> .disabled > a {
|
// > .disabled > a {
|
||||||
&,
|
// &,
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
opacity: 0.9;
|
// opacity: 0.9;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
// Darken the responsive nav toggle
|
//// Darken the responsive nav toggle
|
||||||
.navbar-toggle {
|
//.navbar-toggle {
|
||||||
border: 0;
|
// border: 0;
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
.icon-bar {
|
// .icon-bar {
|
||||||
background-color: inherit;
|
// background-color: inherit;
|
||||||
border: 1px solid;
|
// border: 1px solid;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-default .navbar-toggle,
|
//.navbar-default .navbar-toggle,
|
||||||
.navbar-inverse .navbar-toggle {
|
//.navbar-inverse .navbar-toggle {
|
||||||
border-color: transparent;
|
// border-color: transparent;
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-collapse,
|
//.navbar-collapse,
|
||||||
.navbar-form {
|
//.navbar-form {
|
||||||
border-color: rgba(0,0,0,0.1);
|
// border-color: rgba(0,0,0,0.1);
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
// Dropdowns
|
//// Dropdowns
|
||||||
.navbar-nav {
|
//.navbar-nav {
|
||||||
> .open > a {
|
// > .open > a {
|
||||||
&,
|
// &,
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
@include media-breakpoint-down(md) {
|
// @include media-breakpoint-down(md) {
|
||||||
//@media (max-width: $grid-float-breakpoint-max) { //768px
|
// //@media (max-width: $grid-float-breakpoint-max) { //768px
|
||||||
.navbar-text {
|
// .navbar-text {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
margin-top: 15px;
|
// margin-top: 15px;
|
||||||
margin-bottom: 15px;
|
// margin-bottom: 15px;
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
// Dropdowns get custom display
|
// // Dropdowns get custom display
|
||||||
.open .dropdown-menu {
|
// .open .dropdown-menu {
|
||||||
> .dropdown-header {
|
// > .dropdown-header {
|
||||||
border: 0;
|
// border: 0;
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
}
|
// }
|
||||||
.divider {
|
// .divider {
|
||||||
border-bottom: 1px solid;
|
// border-bottom: 1px solid;
|
||||||
opacity: 0.08;
|
// opacity: 0.08;
|
||||||
}
|
// }
|
||||||
> li > a {
|
// > li > a {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
> .active > a {
|
// > .active > a {
|
||||||
&,
|
// &,
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
> .disabled > a {
|
// > .disabled > a {
|
||||||
&,
|
// &,
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
background-color: transparent;
|
// background-color: transparent;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-link {
|
//.navbar-link {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
&:hover {
|
// &:hover {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.btn-link {
|
//.btn-link {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
}
|
// }
|
||||||
&[disabled],
|
// &[disabled],
|
||||||
fieldset[disabled] & {
|
// fieldset[disabled] & {
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
.navbar-form {
|
//.navbar-form {
|
||||||
margin-top: 16px;
|
// margin-top: 16px;
|
||||||
.form-group {
|
// .form-group {
|
||||||
margin: 0;
|
// margin: 0;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
|
//
|
||||||
.material-input:before,
|
// .material-input:before,
|
||||||
&.is-focused .material-input:after {
|
// &.is-focused .material-input:after {
|
||||||
background-color: inherit;
|
// background-color: inherit;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
//
|
||||||
.form-group .form-control,
|
// .form-group .form-control,
|
||||||
.form-control {
|
// .form-control {
|
||||||
border-color: inherit;
|
// border-color: inherit;
|
||||||
color: inherit;
|
// color: inherit;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
margin: 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;
|
//// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
|
||||||
//$bs-line-height-base: 1.428571429 !default;
|
//@include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary);
|
||||||
//$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;
|
//&-inverse {
|
||||||
//line-height: $bs-line-height-base;
|
// background-color: $indigo;
|
||||||
//---
|
//}
|
||||||
}
|
//
|
||||||
}
|
//@include media-breakpoint-down(lg) {
|
||||||
|
// //@media (max-width: $screen-md-max) { // 1200-1
|
||||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
|
//
|
||||||
@include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary);
|
// .navbar-brand {
|
||||||
|
// height: 50px;
|
||||||
|
// padding: 10px 15px;
|
||||||
&-inverse {
|
// }
|
||||||
background-color: $indigo;
|
// .navbar-form {
|
||||||
}
|
// margin-top: 10px;
|
||||||
|
// }
|
||||||
@include media-breakpoint-down(lg) {
|
//
|
||||||
//@media (max-width: $screen-md-max) { // 1200-1
|
// .navbar-nav > li > a {
|
||||||
|
// padding-top: 15px;
|
||||||
.navbar-brand {
|
// padding-bottom: 15px;
|
||||||
height: 50px;
|
// }
|
||||||
padding: 10px 15px;
|
//}
|
||||||
}
|
|
||||||
.navbar-form {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav > li > a {
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -30,11 +30,11 @@ body {
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent highlight on mobile
|
//// Prevent highlight on mobile
|
||||||
* {
|
//* {
|
||||||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
// -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
||||||
-webkit-tap-highlight-color: transparent;
|
// -webkit-tap-highlight-color: transparent;
|
||||||
&:focus {
|
// &:focus {
|
||||||
outline: 0;
|
// outline: 0;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,13 @@
|
||||||
@import 'colors';
|
@import 'colors';
|
||||||
|
|
||||||
|
|
||||||
// Typography elements FIXME: review to see if we actually need these
|
// 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-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: hsla(0, 0%, 0%, 0.87) !default; // black 0.87 //unquote("rgba(#{$rgb-black}, 0.87)") !default;
|
$mdb-text-color-primary: rgba(0, 0, 0, 0.87) !default;
|
||||||
$icon-color: rgba(0, 0, 0, 0.5) !default;
|
$icon-color: rgba(0, 0, 0, 0.5) !default;
|
||||||
|
|
||||||
//---
|
//---
|
||||||
// Customized BS variables
|
// Customized BS variables
|
||||||
$enable-flex: true;
|
//$enable-flex: true;
|
||||||
|
|
||||||
// Bootstrap brand color customization
|
// Bootstrap brand color customization
|
||||||
$brand-primary: $teal !default;
|
$brand-primary: $teal !default;
|
||||||
|
|
@ -26,26 +25,24 @@ $headings-font-weight: 300 !default;
|
||||||
|
|
||||||
$body-bg: #EEEEEE !default;
|
$body-bg: #EEEEEE !default;
|
||||||
|
|
||||||
|
|
||||||
// Form states and alerts
|
// Form states and alerts
|
||||||
//
|
//
|
||||||
// Define colors for form feedback states and, by default, alerts.
|
// Define colors for form feedback states and, by default, alerts.
|
||||||
|
|
||||||
$state-success-text: $mdb-text-color-light !default;
|
$state-success-text: $mdb-text-color-light !default;
|
||||||
$state-success-bg: $brand-success !default;
|
$state-success-bg: $brand-success !default;
|
||||||
//$state-success-border: darken($state-success-bg, 5%) !default;
|
//$state-success-border: darken($state-success-bg, 5%) !default;
|
||||||
|
|
||||||
$state-info-text: $mdb-text-color-light !default;
|
$state-info-text: $mdb-text-color-light !default;
|
||||||
$state-info-bg: $brand-info !default;
|
$state-info-bg: $brand-info !default;
|
||||||
//$state-info-border: darken($state-info-bg, 7%) !default;
|
//$state-info-border: darken($state-info-bg, 7%) !default;
|
||||||
|
|
||||||
|
$state-warning-text: $mdb-text-color-light !default;
|
||||||
$state-warning-text: $mdb-text-color-light !default;
|
$state-warning-bg: $brand-warning !default;
|
||||||
$state-warning-bg: $brand-warning !default;
|
|
||||||
//$state-warning-border: darken($state-warning-bg, 5%) !default;
|
//$state-warning-border: darken($state-warning-bg, 5%) !default;
|
||||||
|
|
||||||
$state-danger-text: $mdb-text-color-light !default;
|
$state-danger-text: $mdb-text-color-light !default;
|
||||||
$state-danger-bg: $brand-danger !default;
|
$state-danger-bg: $brand-danger !default;
|
||||||
//$state-danger-border: darken($state-danger-bg, 5%) !default;
|
//$state-danger-border: darken($state-danger-bg, 5%) !default;
|
||||||
|
|
||||||
//---
|
//---
|
||||||
|
|
|
||||||
|
|
@ -24,44 +24,44 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
|
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
|
||||||
@mixin navbar-variations($component, $selector-suffix, $color-default) {
|
//@mixin navbar-variations($component, $selector-suffix, $color-default) {
|
||||||
@include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
|
// @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
|
||||||
}
|
//}
|
||||||
|
//
|
||||||
@mixin navbar-variations-content($args){
|
//@mixin navbar-variations-content($args){
|
||||||
$variation-color: map-get($args, variation-color);
|
// $variation-color: map-get($args, variation-color);
|
||||||
$variation-color-text: map-get($args, variation-color-text);
|
// $variation-color-text: map-get($args, variation-color-text);
|
||||||
|
//
|
||||||
background-color: $variation-color;
|
// background-color: $variation-color;
|
||||||
color: $variation-color-text;
|
// color: $variation-color-text;
|
||||||
// deeply defined to override welljumbo class without !impotant need
|
// // deeply defined to override welljumbo class without !impotant need
|
||||||
.navbar-form .form-group input.form-control,
|
// .navbar-form .form-group input.form-control,
|
||||||
.navbar-form input.form-control {
|
// .navbar-form input.form-control {
|
||||||
@include material-placeholder {
|
// @include material-placeholder {
|
||||||
color: $variation-color-text;
|
// color: $variation-color-text;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.dropdown-menu {
|
// .dropdown-menu {
|
||||||
border-radius: $border-radius-base;
|
// border-radius: $border-radius-base;
|
||||||
li > a {
|
// li > a {
|
||||||
font-size: $mdb-dropdown-font-size;
|
// font-size: $mdb-dropdown-font-size;
|
||||||
padding: 13px 16px;
|
// padding: 13px 16px;
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: $variation-color;
|
// color: $variation-color;
|
||||||
background-color: $grey-200;
|
// background-color: $grey-200;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
.active > a {
|
// .active > a {
|
||||||
&:hover,
|
// &:hover,
|
||||||
&:focus {
|
// &:focus {
|
||||||
color: $variation-color-text;
|
// color: $variation-color-text;
|
||||||
}
|
// }
|
||||||
background-color: $variation-color;
|
// background-color: $variation-color;
|
||||||
color: $variation-color-text;
|
// color: $variation-color-text;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|
||||||
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
|
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
|
||||||
@mixin call-variations-content-mixin($args) {
|
@mixin call-variations-content-mixin($args) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user