mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +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/'
|
||||
},
|
||||
'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.to_yaml
|
||||
puts repo
|
||||
puts version
|
||||
# puts repo
|
||||
# puts version
|
||||
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)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
|
|
|
|||
|
|
@ -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%";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// }
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
//---
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user