mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-03 05:14:16 +03:00
#886 - more prefix renaming - I'm not sure how I missed these
This commit is contained in:
Kevin Ross
parent
3b17e36377
commit
73c9b5cff2
|
|
@ -121,7 +121,7 @@ class Application {
|
|||
$(() => {
|
||||
let app = new Application()
|
||||
app.displayTypographyProperties()
|
||||
$('.btn-clipboard').mdbRipples()
|
||||
$('.btn-clipboard').bmdRipples()
|
||||
|
||||
// FIXME: file inputs seems to be in flux, delete the offending one for now.
|
||||
$('#exampleInputFile').closest('.form-group').detach()
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
|
||||
&:hover {
|
||||
color: $gray; // #fff;
|
||||
background-color: $mdb-btn-focus-bg; // #027de7;
|
||||
background-color: $bmd-btn-focus-bg; // #027de7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Installing via `npm` (recommended) or `bower`, customizing BMD is a breeze.
|
|||
|
||||
~~~~~~~~
|
||||
$brand-primary: #3f51b5; // bootstrap variable
|
||||
$mdb-label-color-focus: #303f9f; // mdb variable
|
||||
$bmd-label-color-focus: #303f9f; // bmd variable
|
||||
|
||||
@import "bootstrap-material-design/scss/core"; // make sure to use _core.scss!
|
||||
~~~~~~~~
|
||||
|
|
|
|||
|
|
@ -302,8 +302,8 @@ The following positioning marker classes should be placed on the `bmd-layout-con
|
|||
|
||||
Globally, you may alter the size of _x_ vs _y_ drawers with the following variables:
|
||||
|
||||
- `$mdb-drawer-x-size`
|
||||
- `$mdb-drawer-y-size`
|
||||
- `$bmd-drawer-x-size`
|
||||
- `$bmd-drawer-y-size`
|
||||
|
||||
|
||||
### Custom responsive drawer
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const Autofill = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'autofill'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {}
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@ const Base = (($) => {
|
|||
|
||||
addFormGroupFocus() {
|
||||
if (!this.$element.prop('disabled')) {
|
||||
this.$mdbFormGroup.addClass(ClassName.IS_FOCUSED)
|
||||
this.$bmdFormGroup.addClass(ClassName.IS_FOCUSED)
|
||||
}
|
||||
}
|
||||
|
||||
removeFormGroupFocus() {
|
||||
this.$mdbFormGroup.removeClass(ClassName.IS_FOCUSED)
|
||||
this.$bmdFormGroup.removeClass(ClassName.IS_FOCUSED)
|
||||
}
|
||||
|
||||
removeIsFilled() {
|
||||
this.$mdbFormGroup.removeClass(ClassName.IS_FILLED)
|
||||
this.$bmdFormGroup.removeClass(ClassName.IS_FILLED)
|
||||
}
|
||||
|
||||
addIsFilled() {
|
||||
this.$mdbFormGroup.addClass(ClassName.IS_FILLED)
|
||||
this.$bmdFormGroup.addClass(ClassName.IS_FILLED)
|
||||
}
|
||||
|
||||
// Find bmd-form-group
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const BaseInput = (($) => {
|
|||
formGroup: {
|
||||
required: false
|
||||
},
|
||||
mdbFormGroup: {
|
||||
bmdFormGroup: {
|
||||
template: `<span class='${ClassName.BMD_FORM_GROUP}'></span>`,
|
||||
create: true, // create a wrapper if form-group not found
|
||||
required: true // not recommended to turn this off, only used for inline components
|
||||
|
|
@ -36,9 +36,9 @@ const BaseInput = (($) => {
|
|||
|
||||
// Prioritized find order for resolving the label to be used as an bmd-label if not specified in the markup
|
||||
// - a function(thisComponent); or
|
||||
// - a string selector used like $mdbFormGroup.find(selector)
|
||||
// - a string selector used like $bmdFormGroup.find(selector)
|
||||
//
|
||||
// Note this only runs if $mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup)
|
||||
// Note this only runs if $bmdFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup)
|
||||
//
|
||||
selectors: [
|
||||
`.form-control-label`, // in the case of horizontal or inline forms, this will be marked
|
||||
|
|
@ -88,10 +88,10 @@ const BaseInput = (($) => {
|
|||
// Will add bmd-form-group to form-group or create an bmd-form-group
|
||||
// Performance Note: for those forms that are really performance driven, create the markup with the .bmd-form-group to avoid
|
||||
// rendering changes once added.
|
||||
this.$mdbFormGroup = this.resolveMdbFormGroup()
|
||||
this.$bmdFormGroup = this.resolveMdbFormGroup()
|
||||
|
||||
// Resolve and mark the mdbLabel if necessary as defined by the config
|
||||
this.$mdbLabel = this.resolveMdbLabel()
|
||||
// Resolve and mark the bmdLabel if necessary as defined by the config
|
||||
this.$bmdLabel = this.resolveMdbLabel()
|
||||
|
||||
// Signal to the bmd-form-group that a form-control-* variation is being used
|
||||
this.resolveMdbFormGroupSizing()
|
||||
|
|
@ -102,7 +102,7 @@ const BaseInput = (($) => {
|
|||
|
||||
dispose(dataKey) {
|
||||
super.dispose(dataKey)
|
||||
this.$mdbFormGroup = null
|
||||
this.$bmdFormGroup = null
|
||||
this.$formGroup = null
|
||||
}
|
||||
|
||||
|
|
@ -158,11 +158,11 @@ const BaseInput = (($) => {
|
|||
}
|
||||
|
||||
addHasDanger() {
|
||||
this.$mdbFormGroup.addClass(ClassName.HAS_DANGER)
|
||||
this.$bmdFormGroup.addClass(ClassName.HAS_DANGER)
|
||||
}
|
||||
|
||||
removeHasDanger() {
|
||||
this.$mdbFormGroup.removeClass(ClassName.HAS_DANGER)
|
||||
this.$bmdFormGroup.removeClass(ClassName.HAS_DANGER)
|
||||
}
|
||||
|
||||
isEmpty() {
|
||||
|
|
@ -173,20 +173,20 @@ const BaseInput = (($) => {
|
|||
resolveMdbFormGroup() {
|
||||
let mfg = this.findMdbFormGroup(false)
|
||||
if (mfg === undefined || mfg.length === 0) {
|
||||
if (this.config.mdbFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
|
||||
if (this.config.bmdFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
|
||||
// If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
|
||||
// note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
|
||||
this.outerElement().wrap(this.config.mdbFormGroup.template)
|
||||
this.outerElement().wrap(this.config.bmdFormGroup.template)
|
||||
} else {
|
||||
// a form-group does exist, add our marker class to it
|
||||
this.$formGroup.addClass(ClassName.BMD_FORM_GROUP)
|
||||
|
||||
// OLD: may want to implement this after all, see how the styling turns out, but using an existing form-group is less manipulation of the dom and therefore preferable
|
||||
// A form-group does exist, so add an bmd-form-group wrapping it's internal contents
|
||||
//fg.wrapInner(this.config.mdbFormGroup.template)
|
||||
//fg.wrapInner(this.config.bmdFormGroup.template)
|
||||
}
|
||||
|
||||
mfg = this.findMdbFormGroup(this.config.mdbFormGroup.required)
|
||||
mfg = this.findMdbFormGroup(this.config.bmdFormGroup.required)
|
||||
}
|
||||
|
||||
return mfg
|
||||
|
|
@ -201,7 +201,7 @@ const BaseInput = (($) => {
|
|||
// Will add bmd-label to bmd-form-group if not already specified
|
||||
resolveMdbLabel() {
|
||||
|
||||
let label = this.$mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD)
|
||||
let label = this.$bmdFormGroup.find(Selector.BMD_LABEL_WILDCARD)
|
||||
if (label === undefined || label.length === 0) {
|
||||
// we need to find it based on the configured selectors
|
||||
label = this.findMdbLabel(this.config.label.required)
|
||||
|
|
@ -226,7 +226,7 @@ const BaseInput = (($) => {
|
|||
if ($.isFunction(selector)) {
|
||||
label = selector(this)
|
||||
} else {
|
||||
label = this.$mdbFormGroup.find(selector)
|
||||
label = this.$bmdFormGroup.find(selector)
|
||||
}
|
||||
|
||||
if (label !== undefined && label.length > 0) {
|
||||
|
|
@ -260,7 +260,7 @@ const BaseInput = (($) => {
|
|||
for (let inputSize in FormControlSizeMarkers) {
|
||||
if (this.$element.hasClass(inputSize)) {
|
||||
//this.$element.removeClass(inputSize)
|
||||
this.$mdbFormGroup.addClass(FormControlSizeMarkers[inputSize])
|
||||
this.$bmdFormGroup.addClass(FormControlSizeMarkers[inputSize])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ const BaseSelection = (($) => {
|
|||
|
||||
// Prioritized find order for resolving the label to be used as an bmd-label if not specified in the markup
|
||||
// - a function(thisComponent); or
|
||||
// - a string selector used like $mdbFormGroup.find(selector)
|
||||
// - a string selector used like $bmdFormGroup.find(selector)
|
||||
//
|
||||
// Note this only runs if $mdbFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup)
|
||||
// Note this only runs if $bmdFormGroup.find(Selector.BMD_LABEL_WILDCARD) fails to find a label (as authored in the markup)
|
||||
//
|
||||
//selectors: [
|
||||
// `.form-control-label`, // in the case of horizontal or inline forms, this will be marked
|
||||
|
|
|
|||
6
js/src/bootstrapMaterialDesign.js
vendored
6
js/src/bootstrapMaterialDesign.js
vendored
|
|
@ -12,7 +12,7 @@ const BootstrapMaterialDesign = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'bootstrapMaterialDesign'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = NAME // retain this full name since it is long enough not to conflict
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
|
|
@ -129,9 +129,9 @@ const BootstrapMaterialDesign = (($) => {
|
|||
// mix in global options
|
||||
componentConfig = $.extend(true, {}, this.config.global, componentConfig)
|
||||
|
||||
// create the jquery fn name e.g. 'mdbText' for 'text'
|
||||
// create the jquery fn name e.g. 'bmdText' for 'text'
|
||||
let componentName = `${component.charAt(0).toUpperCase() + component.slice(1)}`
|
||||
let jqueryFn = `mdb${componentName}`
|
||||
let jqueryFn = `bmd${componentName}`
|
||||
|
||||
try {
|
||||
// safely instantiate component on selector elements with config, report errors and move on.
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ const Checkbox = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'checkbox'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ const CheckboxInline = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'checkboxInline'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
mdbFormGroup: {
|
||||
bmdFormGroup: {
|
||||
create: false, // no bmd-form-group creation if form-group not present. It messes with the layout.
|
||||
required: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const CollapseInline = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'collapseInline'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Selector = {
|
||||
|
|
@ -37,7 +37,7 @@ const CollapseInline = (($) => {
|
|||
// i.e. <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#search-field" aria-expanded="false" aria-controls="search-field">
|
||||
constructor($element, config) {
|
||||
super($element, $.extend(true, {}, Default, config))
|
||||
this.$mdbFormGroup = this.findMdbFormGroup(true)
|
||||
this.$bmdFormGroup = this.findMdbFormGroup(true)
|
||||
|
||||
let collapseSelector = $element.data('target')
|
||||
this.$collapse = $(collapseSelector)
|
||||
|
|
@ -46,7 +46,7 @@ const CollapseInline = (($) => {
|
|||
Util.assert(this.$collapse, !this.$collapse.hasClass(ClassName.COLLAPSE), `${Util.describe(this.$collapse)} is expected to have the '${ClassName.COLLAPSE}' class. It is being targeted by ${Util.describe($element)}`)
|
||||
|
||||
// find the first input for focusing
|
||||
let $inputs = this.$mdbFormGroup.find(Selector.ANY_INPUT)
|
||||
let $inputs = this.$bmdFormGroup.find(Selector.ANY_INPUT)
|
||||
if ($inputs.length > 0) {
|
||||
this.$input = $inputs.first()
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ const CollapseInline = (($) => {
|
|||
|
||||
dispose() {
|
||||
super.dispose(DATA_KEY)
|
||||
this.$mdbFormGroup = null
|
||||
this.$bmdFormGroup = null
|
||||
this.$collapse = null
|
||||
this.$input = null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const Drawer = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'drawer'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Keycodes = {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ const File = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'file'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {}
|
||||
|
|
@ -42,7 +42,7 @@ const File = (($) => {
|
|||
//{invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]},
|
||||
Default, config))
|
||||
|
||||
this.$mdbFormGroup.addClass(ClassName.IS_FILE)
|
||||
this.$bmdFormGroup.addClass(ClassName.IS_FILE)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
|
|
@ -76,7 +76,7 @@ const File = (($) => {
|
|||
}
|
||||
|
||||
addFocusListener() {
|
||||
this.$mdbFormGroup
|
||||
this.$bmdFormGroup
|
||||
.on('focus', () => {
|
||||
this.addFormGroupFocus()
|
||||
})
|
||||
|
|
@ -98,7 +98,7 @@ const File = (($) => {
|
|||
} else {
|
||||
this.removeIsFilled()
|
||||
}
|
||||
this.$mdbFormGroup.find(Selector.FILENAMES).val(value)
|
||||
this.$bmdFormGroup.find(Selector.FILENAMES).val(value)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ const Radio = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'radio'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ const RadioInline = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'radioInline'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
mdbFormGroup: {
|
||||
bmdFormGroup: {
|
||||
create: false, // no bmd-form-group creation if form-group not present. It messes with the layout.
|
||||
required: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const Ripples = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'ripples'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const ClassName = {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ const Select = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'select'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ const Switch = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'switch'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ const Text = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'text'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ const Textarea = (($) => {
|
|||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
const NAME = 'textarea'
|
||||
const DATA_KEY = `mdb.${NAME}`
|
||||
const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const DATA_KEY = `bmd.${NAME}`
|
||||
const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
|
||||
const Default = {}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
// bmd default buttons are flat by default
|
||||
.btn {
|
||||
position: relative;
|
||||
margin-bottom: $mdb-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
|
||||
font-size: $mdb-btn-font-size;
|
||||
margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
|
||||
font-size: $bmd-btn-font-size;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, background-color 0.2s $mdb-animation-curve-default, color 0.2s $mdb-animation-curve-default;
|
||||
transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default;
|
||||
will-change: box-shadow, transform;
|
||||
|
||||
@include undo-bs-tab-focus();
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
@include hover-focus() {
|
||||
//border: 1px solid $blue;
|
||||
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
|
||||
@include box-shadow($mdb-shadow-4dp);
|
||||
@include box-shadow($bmd-shadow-4dp);
|
||||
}
|
||||
|
||||
// :active - momentary press: big shadow, release and it is gone
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
&.active,
|
||||
&:active {
|
||||
z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
|
||||
@include box-shadow($mdb-shadow-focus);
|
||||
@include box-shadow($bmd-shadow-focus);
|
||||
//border: 1px solid $green;
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
.btn-group-raised & {
|
||||
|
||||
// baseline shadow
|
||||
@include box-shadow($mdb-shadow-2dp);
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
|
||||
// reverse any of the above for links
|
||||
&.btn-link {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
&.bmd-btn-icon {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: $mdb-btn-fab-font-size;
|
||||
font-size: $bmd-btn-fab-font-size;
|
||||
line-height: normal;
|
||||
border-radius: 50%;
|
||||
|
||||
|
|
@ -87,17 +87,17 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $mdb-btn-fab-font-size;
|
||||
line-height: $mdb-btn-fab-font-size;
|
||||
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
|
||||
width: $bmd-btn-fab-font-size;
|
||||
line-height: $bmd-btn-fab-font-size;
|
||||
transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2));
|
||||
}
|
||||
}
|
||||
|
||||
&.bmd-btn-fab {
|
||||
// see above for color variations
|
||||
width: $mdb-btn-fab-size;
|
||||
min-width: $mdb-btn-fab-size;
|
||||
height: $mdb-btn-fab-size;
|
||||
width: $bmd-btn-fab-size;
|
||||
min-width: $bmd-btn-fab-size;
|
||||
height: $bmd-btn-fab-size;
|
||||
//margin: auto;
|
||||
//margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
|
||||
box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
|
||||
|
|
@ -108,9 +108,9 @@
|
|||
|
||||
&.bmd-btn-fab-sm,
|
||||
.btn-group-sm & {
|
||||
width: $mdb-btn-fab-size-sm;
|
||||
min-width: $mdb-btn-fab-size-sm;
|
||||
height: $mdb-btn-fab-size-sm;
|
||||
width: $bmd-btn-fab-size-sm;
|
||||
min-width: $bmd-btn-fab-size-sm;
|
||||
height: $bmd-btn-fab-size-sm;
|
||||
//margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
|
||||
|
||||
//.material-icons {
|
||||
|
|
@ -122,26 +122,26 @@
|
|||
|
||||
// Icon buttons
|
||||
&.bmd-btn-icon {
|
||||
width: $mdb-btn-icon-size;
|
||||
min-width: $mdb-btn-icon-size;
|
||||
height: $mdb-btn-icon-size;
|
||||
width: $bmd-btn-icon-size;
|
||||
min-width: $bmd-btn-icon-size;
|
||||
height: $bmd-btn-icon-size;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
|
||||
&.bmd-btn-icon-sm,
|
||||
.btn-group-sm & {
|
||||
width: $mdb-btn-icon-size-sm;
|
||||
min-width: $mdb-btn-icon-size-sm;
|
||||
height: $mdb-btn-icon-size-sm;
|
||||
width: $bmd-btn-icon-size-sm;
|
||||
min-width: $bmd-btn-icon-size-sm;
|
||||
height: $bmd-btn-icon-size-sm;
|
||||
|
||||
.material-icons {
|
||||
//$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2;
|
||||
//top: $position;
|
||||
//left: $position;
|
||||
width: $mdb-btn-icon-font-size-sm;
|
||||
font-size: $mdb-btn-icon-font-size-sm;
|
||||
width: $bmd-btn-icon-font-size-sm;
|
||||
font-size: $bmd-btn-icon-font-size-sm;
|
||||
line-height: 1;
|
||||
transform: translate(-($mdb-btn-icon-font-size-sm / 2), -($mdb-btn-icon-font-size-sm / 2));
|
||||
transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -154,12 +154,12 @@
|
|||
// Size variations
|
||||
&.btn-lg,
|
||||
.btn-group-lg & {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $mdb-btn-font-size-lg, $btn-border-radius-lg);
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg);
|
||||
}
|
||||
&.btn-sm,
|
||||
.btn-group-sm & {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $mdb-btn-font-size-sm, $btn-border-radius-sm);
|
||||
font-size: $mdb-btn-font-size-sm;
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm);
|
||||
font-size: $bmd-btn-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,9 +170,9 @@
|
|||
.btn-group-vertical {
|
||||
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
|
||||
@include bmd-disabled() {
|
||||
color: $mdb-btn-disabled;
|
||||
color: $bmd-btn-disabled;
|
||||
.bg-inverse & {
|
||||
color: $mdb-inverse-btn-disabled;
|
||||
color: $bmd-inverse-btn-disabled;
|
||||
}
|
||||
|
||||
// flat buttons shouldn't lose transparency on disabled hover/focus
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
}
|
||||
|
||||
&.btn-group-raised {
|
||||
@include box-shadow($mdb-shadow-2dp);
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
}
|
||||
|
||||
.btn + .btn,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
border: 0;
|
||||
|
||||
// Cards have a default elevation of 2dp.
|
||||
@include box-shadow($mdb-shadow-2dp);
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
@extend %std-font;
|
||||
|
||||
// spec: see "Avatar, Title, and Subtitle area"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
&.bmd-card-raised {
|
||||
// Card raised elevation: 8dp
|
||||
@include box-shadow($mdb-shadow-8dp);
|
||||
@include box-shadow($bmd-shadow-8dp);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ label.checkbox-inline {
|
|||
left: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
width: $bmd-checkbox-size;
|
||||
height: $bmd-checkbox-size;
|
||||
margin: 0;
|
||||
content: "";
|
||||
background-color: rgba($black, .84);
|
||||
|
|
@ -27,10 +27,10 @@ label.checkbox-inline {
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
width: $bmd-checkbox-size;
|
||||
height: $bmd-checkbox-size;
|
||||
overflow: hidden;
|
||||
border: $mdb-checkbox-border-size solid $mdb-checkbox-border-color;
|
||||
border: $bmd-checkbox-border-size solid $bmd-checkbox-border-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
// checkbox outline
|
||||
|
|
@ -54,7 +54,7 @@ label.checkbox-inline {
|
|||
|
||||
.is-focused & {
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
animation: checkbox-off $mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-off $bmd-checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -81,32 +81,32 @@ label.checkbox-inline {
|
|||
|
||||
// FIXME: once working - combine further to reduce code
|
||||
+ .checkbox-decorator .check {
|
||||
color: $mdb-checkbox-checked-color;
|
||||
border-color: $mdb-checkbox-checked-color;
|
||||
color: $bmd-checkbox-checked-color;
|
||||
border-color: $bmd-checkbox-checked-color;
|
||||
}
|
||||
|
||||
+ .checkbox-decorator .check::before {
|
||||
color: $mdb-checkbox-checked-color;
|
||||
color: $bmd-checkbox-checked-color;
|
||||
box-shadow: 0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0 0 20px,
|
||||
032px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on $mdb-checkbox-animation-check forwards;
|
||||
animation: checkbox-on $bmd-checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
+ .checkbox-decorator::before {
|
||||
animation: rippleOn;
|
||||
.is-focused & {
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOn $bmd-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
|
||||
+ .checkbox-decorator .check::after {
|
||||
//background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check
|
||||
animation: rippleOn $bmd-checkbox-animation-ripple forwards; // Ripple effect on check
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,12 +115,12 @@ label.checkbox-inline {
|
|||
animation: rippleOff;
|
||||
.is-focused & {
|
||||
// Prevent checkbox animation and ripple effect on page load
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
animation: rippleOff $bmd-checkbox-animation-ripple;
|
||||
}
|
||||
}
|
||||
|
||||
+ .checkbox-decorator .check::after {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
animation: rippleOff $bmd-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ label.checkbox-inline {
|
|||
}
|
||||
+ .checkbox-decorator .check,
|
||||
.check {
|
||||
border-color: $mdb-checkbox-border-color-disabled;
|
||||
border-color: $bmd-checkbox-border-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
overflow: visible;
|
||||
overflow-y: auto;
|
||||
font-size: .875rem;
|
||||
//color: $mdb-layout-drawer-text-color;
|
||||
//background: $mdb-layout-drawer-bg-color;
|
||||
//color: $bmd-layout-drawer-text-color;
|
||||
//background: $bmd-layout-drawer-bg-color;
|
||||
|
||||
// Transform offscreen.
|
||||
transition: transform;
|
||||
will-change: transform;
|
||||
transform-style: preserve-3d;
|
||||
@include box-shadow($mdb-shadow-2dp);
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
@include material-animation-default();
|
||||
|
||||
> * {
|
||||
|
|
@ -58,10 +58,10 @@
|
|||
// Sizing and positioning below here
|
||||
|
||||
// for left or right drawers, setup widths, heights and positions
|
||||
@include bmd-drawer-x-out($mdb-drawer-x-size);
|
||||
@include bmd-drawer-x-out($bmd-drawer-x-size);
|
||||
|
||||
// for top or bottom drawers, setup widths, heights and positions
|
||||
@include bmd-drawer-y-out($mdb-drawer-y-size);
|
||||
@include bmd-drawer-y-out($bmd-drawer-y-size);
|
||||
|
||||
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
|
||||
// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
|
||||
|
|
@ -90,8 +90,8 @@
|
|||
:not(.bmd-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@include bmd-drawer-x-in-up($mdb-drawer-x-size, $breakpoint);
|
||||
@include bmd-drawer-y-in-up($mdb-drawer-y-size, $breakpoint);
|
||||
@include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint);
|
||||
@include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint);
|
||||
|
||||
@include bmd-drawer-x-overlay-down($breakpoint);
|
||||
@include bmd-drawer-y-overlay-down($breakpoint);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
padding: .5rem 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
transition: transform $mdb-menu-expand-duration $mdb-animation-curve-default, opacity $mdb-menu-fade-duration $mdb-animation-curve-default;
|
||||
transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, opacity $bmd-menu-fade-duration $bmd-animation-curve-default;
|
||||
transform: scale(0);
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
|
|
@ -61,29 +61,29 @@
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
min-width: $mdb-menu-item-min-width;
|
||||
max-width: $mdb-menu-item-max-width;
|
||||
min-height: $mdb-menu-item-min-height;
|
||||
min-width: $bmd-menu-item-min-width;
|
||||
max-width: $bmd-menu-item-max-width;
|
||||
min-height: $bmd-menu-item-min-height;
|
||||
|
||||
align-items: center;
|
||||
|
||||
padding-top: $mdb-menu-item-padding-top;
|
||||
padding-right: $mdb-menu-item-padding-right;
|
||||
padding-bottom: $mdb-menu-item-padding-bottom;
|
||||
padding-left: $mdb-menu-item-padding-left;
|
||||
padding-top: $bmd-menu-item-padding-top;
|
||||
padding-right: $bmd-menu-item-padding-right;
|
||||
padding-bottom: $bmd-menu-item-padding-bottom;
|
||||
padding-left: $bmd-menu-item-padding-left;
|
||||
|
||||
|
||||
// FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
|
||||
overflow: hidden;
|
||||
line-height: $mdb-menu-line-height;
|
||||
line-height: $bmd-menu-line-height;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: break-word;
|
||||
|
||||
|
||||
// Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-right: $mdb-menu-item-padding-right-md;
|
||||
padding-left: $mdb-menu-item-padding-left-md;
|
||||
padding-right: $bmd-menu-item-padding-right-md;
|
||||
padding-left: $bmd-menu-item-padding-left-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
~ .dropdown-menu {
|
||||
&.dropdown-menu-top-left,
|
||||
&.dropdown-menu-top-right {
|
||||
bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
|
||||
bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
~ .dropdown-menu {
|
||||
&.dropdown-menu-top-left,
|
||||
&.dropdown-menu-top-right {
|
||||
bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
|
||||
bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
form {
|
||||
// ensure enough room at the bottom of any form to display a one-line bmd-help
|
||||
margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height-base;
|
||||
margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
|
||||
|
||||
// reverse the above for navbars (no help expected in a navbar form)
|
||||
.navbar & {
|
||||
|
|
@ -23,9 +23,9 @@ form {
|
|||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.form-control {
|
||||
background-repeat: $mdb-form-control-bg-repeat-y;
|
||||
background-position: $mdb-form-control-bg-position;
|
||||
background-size: $mdb-form-control-bg-size;
|
||||
background-repeat: $bmd-form-control-bg-repeat-y;
|
||||
background-position: $bmd-form-control-bg-position;
|
||||
background-size: $bmd-form-control-bg-size;
|
||||
border: 0;
|
||||
transition: background 0s ease-out;
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ form {
|
|||
// The border bottom should be static in all states, the decorator will be animated over this.
|
||||
&:focus,
|
||||
.bmd-form-group.is-focused & {
|
||||
background-size: $mdb-form-control-bg-size-active;
|
||||
background-size: $bmd-form-control-bg-size-active;
|
||||
//border-bottom: $input-btn-border-width solid $input-border-color;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
|
@ -77,7 +77,7 @@ form {
|
|||
// State coloring: default, success, info, warning, danger
|
||||
//
|
||||
@include bmd-selection-color();
|
||||
@include bmd-form-color($mdb-label-color, $mdb-label-color-focus, $input-border-color);
|
||||
@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color);
|
||||
|
||||
.has-success {
|
||||
@include bmd-form-color($brand-success, $brand-success, $brand-success);
|
||||
|
|
@ -97,7 +97,7 @@ form {
|
|||
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
//.variations(unquote(" label"), color, $mdb-input-placeholder-color); // default label color variations
|
||||
//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations
|
||||
|
||||
// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose.
|
||||
.bmd-form-group {
|
||||
|
|
@ -155,21 +155,21 @@ form {
|
|||
}
|
||||
|
||||
// default floating size/location with an bmd-form-group
|
||||
@include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "bmd-form-group default");
|
||||
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
|
||||
|
||||
// sm floating size/location
|
||||
&.bmd-form-group-sm {
|
||||
@include bmd-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "bmd-form-group sm");
|
||||
@include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm");
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.bmd-form-group-lg {
|
||||
@include bmd-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "bmd-form-group lg");
|
||||
@include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg");
|
||||
}
|
||||
}
|
||||
|
||||
// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch
|
||||
@include bmd-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height);
|
||||
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
|
||||
|
||||
select {
|
||||
&,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
// https://www.google.com/design/spec/components/tabs.html#tabs-specs
|
||||
|
||||
.nav-link {
|
||||
//line-height: $mdb-nav-link-line-height; // set baseline line-height and font sizes
|
||||
//line-height: $bmd-nav-link-line-height; // set baseline line-height and font sizes
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// navbars
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: $mdb-navbar-link-padding;
|
||||
font-size: $mdb-navbar-link-font-size;
|
||||
font-weight: $mdb-navbar-link-font-weight;
|
||||
padding: $bmd-navbar-link-padding;
|
||||
font-size: $bmd-navbar-link-font-size;
|
||||
font-weight: $bmd-navbar-link-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
border: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: $mdb-nav-tabs-pills-link-padding;
|
||||
font-size: $mdb-nav-tabs-pills-font-size;
|
||||
font-weight: $mdb-nav-tabs-pills-font-weight;
|
||||
padding: $bmd-nav-tabs-pills-link-padding;
|
||||
font-size: $bmd-nav-tabs-pills-font-size;
|
||||
font-weight: $bmd-nav-tabs-pills-font-weight;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -31,18 +31,18 @@
|
|||
// tabs only
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
border-bottom: $mdb-nav-tabs-border-size solid transparent;
|
||||
border-bottom: $bmd-nav-tabs-border-size solid transparent;
|
||||
}
|
||||
|
||||
// colors
|
||||
@include bmd-tabs-color($mdb-nav-tabs-color, $mdb-nav-tabs-active-color, $mdb-nav-tabs-active-border-color, $mdb-nav-tabs-disabled-link-color, $mdb-nav-tabs-disabled-link-color-hover);
|
||||
@include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover);
|
||||
|
||||
&.bg-primary {
|
||||
@include bmd-tabs-color($mdb-nav-tabs-primary-color, $mdb-nav-tabs-primary-active-color, $mdb-nav-tabs-primary-active-border-color, $mdb-nav-tabs-primary-disabled-link-color, $mdb-nav-tabs-primary-disabled-link-color-hover);
|
||||
@include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover);
|
||||
}
|
||||
|
||||
&.bg-inverse {
|
||||
@include bmd-tabs-color($mdb-nav-tabs-inverse-color, $mdb-nav-tabs-inverse-active-color, $mdb-nav-tabs-inverse-active-border-color, $mdb-nav-tabs-inverse-disabled-link-color, $mdb-nav-tabs-inverse-disabled-link-color-hover);
|
||||
@include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
margin-bottom: .25rem; // required to provide space for the shadow to render (need is visible in mobile drawer overlay)
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
@include box-shadow($mdb-shadow-2dp);
|
||||
@include box-shadow($bmd-shadow-2dp);
|
||||
|
||||
// #853 start - https://github.com/twbs/bootstrap/pull/18976/files
|
||||
@if $enable-flex {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
//
|
||||
//.popover, .tooltip-inner {
|
||||
// line-height: 1em;
|
||||
// color: $mdb-popover-color;
|
||||
// background: $mdb-popover-background;
|
||||
// color: $bmd-popover-color;
|
||||
// background: $bmd-popover-background;
|
||||
// border: 0;
|
||||
// border-radius: $border-radius;
|
||||
// @include box-shadow($mdb-shadow-2dp);
|
||||
// @include box-shadow($bmd-shadow-2dp);
|
||||
//}
|
||||
//
|
||||
//.tooltip, .tooltip.in {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
.radio label,
|
||||
label.radio-inline {
|
||||
position: relative;
|
||||
padding-left: $mdb-radio-size + $mdb-radio-label-padding; // absolutely positioned so add the radio size
|
||||
padding-left: $bmd-radio-size + $bmd-radio-label-padding; // absolutely positioned so add the radio size
|
||||
|
||||
.bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
|
||||
.bmd-radio-inner-circle {
|
||||
position: absolute;
|
||||
top: calc-top($line-height-base, $font-size-base, $mdb-radio-size); // vertical center of line-height
|
||||
top: calc-top($line-height-base, $font-size-base, $bmd-radio-size); // vertical center of line-height
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: $mdb-radio-size;
|
||||
height: $mdb-radio-size;
|
||||
width: $bmd-radio-size;
|
||||
height: $bmd-radio-size;
|
||||
transition-duration: 0.2s;
|
||||
|
||||
&.bmd-radio-outer-circle {
|
||||
border: $mdb-radio-border solid $mdb-radio-color-off;
|
||||
border: $bmd-radio-border solid $bmd-radio-color-off;
|
||||
border-radius: 50%;
|
||||
transition: border-color ease .28s;
|
||||
}
|
||||
&.bmd-radio-inner-circle {
|
||||
display: inline-block;
|
||||
background-color: $mdb-radio-color-on;
|
||||
background-color: $bmd-radio-color-on;
|
||||
border-radius: 50%;
|
||||
transition: transform ease .28s;
|
||||
transform: scale3d(0, 0, 0);
|
||||
|
|
@ -28,8 +28,8 @@ label.radio-inline {
|
|||
// focus/press ripple
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -#{$mdb-radio-size};
|
||||
left: -#{$mdb-radio-size};
|
||||
top: -#{$bmd-radio-size};
|
||||
left: -#{$bmd-radio-size};
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50px;
|
||||
|
|
@ -51,7 +51,7 @@ label.radio-inline {
|
|||
opacity: 0;
|
||||
|
||||
&:checked {
|
||||
@include bmd-radio-color($mdb-radio-color-on);
|
||||
@include bmd-radio-color($bmd-radio-color-on);
|
||||
|
||||
~ .bmd-radio-inner-circle {
|
||||
transform: scale3d(0.55, 0.55, 1);
|
||||
|
|
@ -72,10 +72,10 @@ label.radio-inline {
|
|||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
@include bmd-radio-color($mdb-radio-color-disabled);
|
||||
@include bmd-radio-color($bmd-radio-color-disabled);
|
||||
|
||||
.bg-inverse & {
|
||||
@include bmd-radio-color($mdb-radio-color-disabled-inverse);
|
||||
@include bmd-radio-color($bmd-radio-color-disabled-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
body {
|
||||
font-weight: $mdb-font-weight-base;
|
||||
font-weight: $bmd-font-weight-base;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@
|
|||
.switch {
|
||||
label {
|
||||
position: relative;
|
||||
padding-left: $mdb-switch-width + $mdb-switch-label-padding; // absolutely positioned so add the radio size
|
||||
padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size
|
||||
|
||||
.bmd-switch-track {
|
||||
position: absolute;
|
||||
top: calc-top($line-height-base, $font-size-base, $mdb-switch-height);
|
||||
top: calc-top($line-height-base, $font-size-base, $bmd-switch-height);
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: $mdb-switch-width;
|
||||
height: $mdb-switch-height;
|
||||
width: $bmd-switch-width;
|
||||
height: $bmd-switch-height;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$mdb-switch-unchecked-bg 0%,
|
||||
$mdb-switch-unchecked-bg 50%,
|
||||
$mdb-switch-checked-bg 50%,
|
||||
$mdb-switch-checked-bg 100%
|
||||
$bmd-switch-unchecked-bg 0%,
|
||||
$bmd-switch-unchecked-bg 50%,
|
||||
$bmd-switch-checked-bg 50%,
|
||||
$bmd-switch-checked-bg 100%
|
||||
);
|
||||
background-position: 0%;
|
||||
background-size: $mdb-switch-width * 2 $mdb-switch-height;
|
||||
border-radius: $mdb-switch-width;
|
||||
background-size: $bmd-switch-width * 2 $bmd-switch-height;
|
||||
border-radius: $bmd-switch-width;
|
||||
transition: background-position 0.2s ease-in;
|
||||
|
||||
&::after {
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
top: 50%;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $mdb-switch-handle-size;
|
||||
height: $mdb-switch-handle-size;
|
||||
width: $bmd-switch-handle-size;
|
||||
height: $bmd-switch-handle-size;
|
||||
align-self: center;
|
||||
content: "";
|
||||
background: $mdb-switch-handle-unchecked-bg;
|
||||
background: $bmd-switch-handle-unchecked-bg;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease;
|
||||
|
|
@ -58,8 +58,8 @@
|
|||
+ .bmd-switch-track {
|
||||
background-position: -100%;
|
||||
&::after {
|
||||
left: unquote("calc(100% - #{$mdb-switch-handle-size})"); //calc(100% - $mdb-switch-handle-size);
|
||||
background-color: $mdb-switch-handle-checked-bg;
|
||||
left: unquote("calc(100% - #{$bmd-switch-handle-size})"); //calc(100% - $bmd-switch-handle-size);
|
||||
background-color: $bmd-switch-handle-checked-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,9 +72,9 @@
|
|||
|
||||
+ .bmd-switch-track {
|
||||
cursor: default;
|
||||
background: $mdb-switch-disabled-bg;
|
||||
background: $bmd-switch-disabled-bg;
|
||||
&::after {
|
||||
background: $mdb-switch-handle-disabled-bg;
|
||||
background: $bmd-switch-handle-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ $gray-light: rgba($black, 0.26) !default;
|
|||
$gray: rgba($black, .54) !default; // spec color
|
||||
$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter
|
||||
|
||||
$mdb-font-weight-base: 400;
|
||||
$bmd-font-weight-base: 400;
|
||||
|
||||
// wondering if any of these could still be refactored out, but are definitely in use.
|
||||
$mdb-text-color-inverse: rgba($white, 0.84) !default;
|
||||
$mdb-text-color-inverse-light: rgba($white, 0.54) !default;
|
||||
$mdb-label-color: $gray-light !default;
|
||||
$mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
|
||||
$bmd-text-color-inverse: rgba($white, 0.84) !default;
|
||||
$bmd-text-color-inverse-light: rgba($white, 0.54) !default;
|
||||
$bmd-label-color: $gray-light !default;
|
||||
$bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary
|
||||
|
||||
// Customized BS variables
|
||||
@import "variables/bootstrap/components";
|
||||
|
|
@ -43,13 +43,13 @@ $enable-shadows: true; // enable shadows, set to false to turn off shadows
|
|||
@import "variables/menu";
|
||||
@import "variables/drawer";
|
||||
|
||||
$mdb-label-color-focus: $brand-primary !default;
|
||||
$bmd-label-color-focus: $brand-primary !default;
|
||||
//---
|
||||
// verified in use with refactoring to v4
|
||||
|
||||
//---
|
||||
//-- unverified below here
|
||||
$mdb-brand-inverse: $indigo !default;
|
||||
$bmd-brand-inverse: $indigo !default;
|
||||
// Typography elements FIXME: review to see if we actually need these
|
||||
$icon-color: rgba($black, 0.5) !default;
|
||||
|
||||
|
|
@ -61,70 +61,70 @@ $icon-color: rgba($black, 0.5) !default;
|
|||
|
||||
// --------------------
|
||||
// inputs
|
||||
$mdb-bmd-label-static-size-ratio: 75 / 100 !default;
|
||||
$mdb-help-size-ratio: 75 / 100 !default;
|
||||
$bmd-bmd-label-static-size-ratio: 75 / 100 !default;
|
||||
$bmd-help-size-ratio: 75 / 100 !default;
|
||||
|
||||
//$bmd-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon.
|
||||
$mdb-form-control-bg-repeat-y: no-repeat !default;
|
||||
$mdb-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
|
||||
$mdb-form-control-bg-size: 0 100%, 100% 100% !default;
|
||||
$mdb-form-control-bg-size-active: 100% 100%, 100% 100% !default;
|
||||
$bmd-form-control-bg-repeat-y: no-repeat !default;
|
||||
$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;
|
||||
$bmd-form-control-bg-size: 0 100%, 100% 100% !default;
|
||||
$bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default;
|
||||
|
||||
// expandable
|
||||
$input-text-button-size: 32px !default;
|
||||
|
||||
// sizing
|
||||
$mdb-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$mdb-label-top-margin-base: 1rem !default;
|
||||
$bmd-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$bmd-label-top-margin-base: 1rem !default;
|
||||
|
||||
$mdb-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$mdb-label-top-margin-lg: 1rem !default; // 16px
|
||||
$bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$bmd-label-top-margin-lg: 1rem !default; // 16px
|
||||
|
||||
$mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$mdb-label-top-margin-sm: .75rem !default; // 12px
|
||||
$bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec.
|
||||
$bmd-label-top-margin-sm: .75rem !default; // 12px
|
||||
|
||||
$text-disabled: #a8a8a8 !default;
|
||||
$background-disabled: #eaeaea !default;
|
||||
|
||||
// Checkboxes
|
||||
$mdb-checkbox-size: 1.25rem !default;
|
||||
$mdb-checkbox-animation-ripple: 500ms !default;
|
||||
$mdb-checkbox-animation-check: 0.3s !default;
|
||||
$mdb-checkbox-checked-color: $brand-primary !default;
|
||||
$bmd-checkbox-size: 1.25rem !default;
|
||||
$bmd-checkbox-animation-ripple: 500ms !default;
|
||||
$bmd-checkbox-animation-check: 0.3s !default;
|
||||
$bmd-checkbox-checked-color: $brand-primary !default;
|
||||
|
||||
$mdb-checkbox-border-size: .125rem !default;
|
||||
$mdb-checkbox-border-color: $mdb-label-color-inner-focus !default;
|
||||
$mdb-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default;
|
||||
$bmd-checkbox-border-size: .125rem !default;
|
||||
$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default;
|
||||
$bmd-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default;
|
||||
|
||||
// Switches
|
||||
$mdb-switch-label-padding: .3125rem !default; // 5px
|
||||
$mdb-switch-width: 2.125rem !default; // 34px
|
||||
$mdb-switch-height: .875rem !default; // 14px
|
||||
$mdb-switch-handle-size: 1.25rem !default; // 20px (was 18px)
|
||||
$bmd-switch-label-padding: .3125rem !default; // 5px
|
||||
$bmd-switch-width: 2.125rem !default; // 34px
|
||||
$bmd-switch-height: .875rem !default; // 14px
|
||||
$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px)
|
||||
|
||||
$mdb-switch-handle-checked-bg: $brand-primary !default;
|
||||
$mdb-switch-handle-unchecked-bg: #f1f1f1 !default;
|
||||
$mdb-switch-handle-disabled-bg: #bdbdbd !default;
|
||||
$mdb-switch-unchecked-bg: $gray-light !default;
|
||||
$mdb-switch-checked-bg: desaturate(lighten($mdb-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
|
||||
$mdb-switch-disabled-bg: $gray-lighter !default;
|
||||
$bmd-switch-handle-checked-bg: $brand-primary !default;
|
||||
$bmd-switch-handle-unchecked-bg: #f1f1f1 !default;
|
||||
$bmd-switch-handle-disabled-bg: #bdbdbd !default;
|
||||
$bmd-switch-unchecked-bg: $gray-light !default;
|
||||
$bmd-switch-checked-bg: desaturate(lighten($bmd-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe
|
||||
$bmd-switch-disabled-bg: $gray-lighter !default;
|
||||
|
||||
// Popovers and Popups
|
||||
$mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$mdb-popover-color: #ececec !default;
|
||||
$bmd-popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$bmd-popover-color: #ececec !default;
|
||||
|
||||
// Radio:
|
||||
$mdb-radio-border: .125rem !default; // 2px
|
||||
$mdb-radio-size: 1.25rem !default;
|
||||
$mdb-radio-label-padding: .3125rem !default; // 5px
|
||||
$bmd-radio-border: .125rem !default; // 2px
|
||||
$bmd-radio-size: 1.25rem !default;
|
||||
$bmd-radio-label-padding: .3125rem !default; // 5px
|
||||
|
||||
$mdb-radio-color-off: $mdb-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
|
||||
$mdb-radio-color-on: $brand-primary !default;
|
||||
$mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
|
||||
$mdb-radio-color-disabled-inverse: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
|
||||
$bmd-radio-color-off: $bmd-label-color-inner-focus !default; // FIXME seems inconsistent, check spec
|
||||
$bmd-radio-color-on: $brand-primary !default;
|
||||
$bmd-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26%
|
||||
$bmd-radio-color-disabled-inverse: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30%
|
||||
|
||||
// Animations
|
||||
$mdb-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$mdb-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
$mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
|
||||
$bmd-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
$bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default;
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
|
||||
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $mdb-animation-curve-fast-out-slow-in;
|
||||
transition-timing-function: $bmd-animation-curve-fast-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $mdb-animation-curve-linear-out-slow-in;
|
||||
transition-timing-function: $bmd-animation-curve-linear-out-slow-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $mdb-animation-curve-fast-out-linear-in;
|
||||
transition-timing-function: $bmd-animation-curve-fast-out-linear-in;
|
||||
}
|
||||
|
||||
@mixin material-animation-default($duration:0.2s) {
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $mdb-animation-curve-default;
|
||||
transition-timing-function: $bmd-animation-curve-default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,14 +60,14 @@
|
|||
|
||||
@mixin bmd-flat-button-variant($color) {
|
||||
|
||||
$background: $mdb-btn-bg;
|
||||
$border: $mdb-btn-border;
|
||||
$background: $bmd-btn-bg;
|
||||
$border: $bmd-btn-border;
|
||||
|
||||
$focus-background: $mdb-btn-focus-bg;
|
||||
$focus-border: $mdb-btn-focus-bg;
|
||||
$focus-background: $bmd-btn-focus-bg;
|
||||
$focus-border: $bmd-btn-focus-bg;
|
||||
|
||||
$active-background: $mdb-btn-active-bg;
|
||||
$active-border: $mdb-btn-active-bg;
|
||||
$active-background: $bmd-btn-active-bg;
|
||||
$active-border: $bmd-btn-active-bg;
|
||||
|
||||
@include bmd-button-variant($color,
|
||||
$background,
|
||||
|
|
@ -79,11 +79,11 @@
|
|||
|
||||
// inverse color scheme
|
||||
.bg-inverse & {
|
||||
$focus-background: $mdb-inverse-btn-focus-bg;
|
||||
$focus-border: $mdb-inverse-btn-focus-bg;
|
||||
$focus-background: $bmd-inverse-btn-focus-bg;
|
||||
$focus-border: $bmd-inverse-btn-focus-bg;
|
||||
|
||||
$active-background: $mdb-inverse-btn-active-bg;
|
||||
$active-border: $mdb-inverse-btn-active-bg;
|
||||
$active-background: $bmd-inverse-btn-active-bg;
|
||||
$active-border: $bmd-inverse-btn-active-bg;
|
||||
|
||||
@include bmd-button-variant($color,
|
||||
$background,
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
|
||||
@mixin bmd-flat-button-color() {
|
||||
|
||||
@include bmd-flat-button-variant($mdb-btn-color);
|
||||
@include bmd-flat-button-variant($bmd-btn-color);
|
||||
|
||||
// flat bg with text color variations
|
||||
&.btn-primary {
|
||||
|
|
|
|||
|
|
@ -15,18 +15,18 @@
|
|||
.switch label {
|
||||
|
||||
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
||||
//color: $mdb-label-color;
|
||||
//color: $bmd-label-color;
|
||||
|
||||
&,
|
||||
.is-focused & {
|
||||
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
|
||||
color: $mdb-label-color;
|
||||
color: $bmd-label-color;
|
||||
|
||||
// on focus just darken the specific labels, do not turn them to the brand-primary
|
||||
@include hover-focus-active() {
|
||||
//&:hover,
|
||||
//&:focus {
|
||||
color: $mdb-label-color-inner-focus;
|
||||
color: $bmd-label-color-inner-focus;
|
||||
}
|
||||
|
||||
// correct the above focus color for disabled items
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $mdb-label-color;
|
||||
color: $bmd-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
}
|
||||
|
||||
.bmd-help {
|
||||
color: $mdb-label-color-inner-focus;
|
||||
color: $bmd-label-color-inner-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -146,8 +146,8 @@
|
|||
@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
|
||||
|
||||
$variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
|
||||
$static-font-size: ($mdb-bmd-label-static-size-ratio * $font-size);
|
||||
$help-font-size: ($mdb-help-size-ratio * $font-size);
|
||||
$static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
|
||||
$help-font-size: ($bmd-help-size-ratio * $font-size);
|
||||
|
||||
$label-static-top: $label-top-margin;
|
||||
$label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
|
||||
|
|
@ -247,19 +247,19 @@
|
|||
&.form-control-warning,
|
||||
&.form-control-danger {
|
||||
$icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5);
|
||||
background-size: $mdb-form-control-bg-size, $icon-bg-size;
|
||||
background-size: $bmd-form-control-bg-size, $icon-bg-size;
|
||||
|
||||
&,
|
||||
&:focus,
|
||||
.bmd-form-group.is-focused & {
|
||||
padding-right: ($input-padding-x * 3);
|
||||
background-repeat: $mdb-form-control-bg-repeat-y, no-repeat;
|
||||
background-position: $mdb-form-control-bg-position, center right ($variant-input-height * .25);
|
||||
background-repeat: $bmd-form-control-bg-repeat-y, no-repeat;
|
||||
background-position: $bmd-form-control-bg-position, center right ($variant-input-height * .25);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
.bmd-form-group.is-focused & {
|
||||
background-size: $mdb-form-control-bg-size-active, $icon-bg-size;
|
||||
background-size: $bmd-form-control-bg-size-active, $icon-bg-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// variations(unquote(""), background-color, #FFF);
|
||||
@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
|
||||
@include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
|
||||
@mixin variations($component, $selector-suffix, $bmd-param-1, $color-default) {
|
||||
@include generic-variations($component, $selector-suffix, $color-default, "variations-content", $bmd-param-1);
|
||||
}
|
||||
|
||||
@mixin variations-content($args) {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
// .dropdown-menu {
|
||||
// border-radius: $border-radius;
|
||||
// li > a {
|
||||
// font-size: $mdb-dropdown-font-size;
|
||||
// font-size: $bmd-dropdown-font-size;
|
||||
// padding: 13px 16px;
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
|
|
@ -85,14 +85,14 @@
|
|||
// $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
|
||||
//
|
||||
|
||||
@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) {
|
||||
@mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $bmd-param-1) {
|
||||
|
||||
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
|
||||
$args: (
|
||||
//extra: $selector-suffix,
|
||||
//default: $color-default,
|
||||
mixin-name: $mixin-name,
|
||||
material-param-1: $mdb-param-1
|
||||
material-param-1: $bmd-param-1
|
||||
);
|
||||
|
||||
// bootstrap styles
|
||||
|
|
@ -100,49 +100,49 @@
|
|||
|
||||
$args-extra: map-merge($args, (
|
||||
variation-color: $color-default,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-extra);
|
||||
}
|
||||
//&#{$component}-inverse#{$selector-suffix} {
|
||||
// $args-inverse: map-merge($args, (
|
||||
// variation-color: $mdb-brand-inverse,
|
||||
// variation-color-text: contrast-color($mdb-brand-inverse, $gray-dark, $mdb-text-color-inverse)
|
||||
// variation-color: $bmd-brand-inverse,
|
||||
// variation-color-text: contrast-color($bmd-brand-inverse, $gray-dark, $bmd-text-color-inverse)
|
||||
// ));
|
||||
// @include call-variations-content-mixin($args-inverse);
|
||||
//}
|
||||
&#{$component}-primary#{$selector-suffix} {
|
||||
$args-primary: map-merge($args, (
|
||||
variation-color: $brand-primary,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-primary);
|
||||
}
|
||||
&#{$component}-success#{$selector-suffix} {
|
||||
$args-success: map-merge($args, (
|
||||
variation-color: $brand-success,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-success);
|
||||
}
|
||||
&#{$component}-info#{$selector-suffix} {
|
||||
$args-info: map-merge($args, (
|
||||
variation-color: $brand-info,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-info);
|
||||
}
|
||||
&#{$component}-warning#{$selector-suffix} {
|
||||
$args-warning: map-merge($args, (
|
||||
variation-color: $brand-warning,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-warning);
|
||||
}
|
||||
&#{$component}-danger#{$selector-suffix} {
|
||||
$args-danger: map-merge($args, (
|
||||
variation-color: $brand-danger,
|
||||
variation-color-text: $mdb-text-color-inverse
|
||||
variation-color-text: $bmd-text-color-inverse
|
||||
));
|
||||
@include call-variations-content-mixin($args-danger);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
//.snackbar {
|
||||
// height: 0;
|
||||
// font-size: 14px;
|
||||
// color: $mdb-text-color-inverse;
|
||||
// color: $bmd-text-color-inverse;
|
||||
// background-color: #323232;
|
||||
// border-radius: $border-radius;
|
||||
// transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
|
||||
// transform: translateY(200%);
|
||||
//
|
||||
// @include box-shadow($mdb-shadow-2dp);
|
||||
// @include box-shadow($bmd-shadow-2dp);
|
||||
//}
|
||||
//
|
||||
//.snackbar.snackbar-opened {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// these might be useful in a switch to sass...at some point.
|
||||
|
||||
//$mdb-colors: (
|
||||
//$bmd-colors: (
|
||||
// "red": $red,
|
||||
// "pink": $pink,
|
||||
// "purple": $purple,
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
// "blue-grey": $blue-grey
|
||||
//);
|
||||
//
|
||||
//$mdb-colors-map: (
|
||||
//$bmd-colors-map: (
|
||||
// "red-50": (name: "red", color: $red-50, number: "-50"),
|
||||
// "red-100": (name: "red", color: $red-100, number: "-100"),
|
||||
// "red-200": (name: "red", color: $red-200, number: "-200"),
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Drawer
|
||||
|
||||
// Sizing
|
||||
$mdb-drawer-x-size: 240px !default;
|
||||
$mdb-drawer-y-size: 100px !default;
|
||||
$bmd-drawer-x-size: 240px !default;
|
||||
$bmd-drawer-y-size: 100px !default;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
$mdb-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
|
||||
$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
|
||||
|
||||
$mdb-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
|
||||
$mdb-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
|
||||
$mdb-menu-item-min-height: 3rem !default; // 48px
|
||||
$bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
|
||||
$bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
|
||||
$bmd-menu-item-min-height: 3rem !default; // 48px
|
||||
|
||||
$mdb-menu-item-padding-right: 1rem !default;
|
||||
$mdb-menu-item-padding-bottom: 1.25rem !default;
|
||||
$mdb-menu-item-padding-left: 1rem !default;
|
||||
$bmd-menu-item-padding-right: 1rem !default;
|
||||
$bmd-menu-item-padding-bottom: 1.25rem !default;
|
||||
$bmd-menu-item-padding-left: 1rem !default;
|
||||
|
||||
$mdb-menu-item-padding-top: ($mdb-menu-item-min-height - $font-size-base - $mdb-menu-item-padding-bottom) !default;
|
||||
$bmd-menu-item-padding-top: ($bmd-menu-item-min-height - $font-size-base - $bmd-menu-item-padding-bottom) !default;
|
||||
|
||||
// md and up
|
||||
$mdb-menu-item-padding-right-md: 1.5rem !default;
|
||||
$mdb-menu-item-padding-left-md: 1.5rem !default;
|
||||
$bmd-menu-item-padding-right-md: 1.5rem !default;
|
||||
$bmd-menu-item-padding-left-md: 1.5rem !default;
|
||||
|
||||
|
||||
// Menu
|
||||
$mdb-menu-expand-duration: 0.3s !default;
|
||||
$mdb-menu-fade-duration: 0.2s !default;
|
||||
$bmd-menu-expand-duration: 0.3s !default;
|
||||
$bmd-menu-fade-duration: 0.2s !default;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
// Shadows (originally from mdl http://www.getmdl.io/)
|
||||
$mdb-shadow-umbra-opacity: 0.2 !default;
|
||||
$mdb-shadow-penumbra-opacity: 0.14 !default;
|
||||
$mdb-shadow-ambient-opacity: 0.12 !default;
|
||||
$bmd-shadow-umbra-opacity: 0.2 !default;
|
||||
$bmd-shadow-penumbra-opacity: 0.14 !default;
|
||||
$bmd-shadow-ambient-opacity: 0.12 !default;
|
||||
|
||||
// Declare the following for reuse with both mixins and the bootstrap variables
|
||||
$mdb-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
|
||||
$bmd-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36);
|
||||
|
||||
$mdb-shadow-2dp: 0 2px 2px 0 rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($black, $mdb-shadow-umbra-opacity),
|
||||
0 1px 5px 0 rgba($black, $mdb-shadow-ambient-opacity);
|
||||
$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity),
|
||||
0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity);
|
||||
|
||||
$mdb-shadow-3dp: 0 3px 4px 0 rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 3px 3px -2px rgba($black, $mdb-shadow-umbra-opacity),
|
||||
0 1px 8px 0 rgba($black, $mdb-shadow-ambient-opacity);
|
||||
$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity),
|
||||
0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity);
|
||||
|
||||
$mdb-shadow-4dp: 0 4px 5px 0 rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 1px 10px 0 rgba($black, $mdb-shadow-ambient-opacity),
|
||||
0 2px 4px -1px rgba($black, $mdb-shadow-umbra-opacity);
|
||||
$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity),
|
||||
0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity);
|
||||
|
||||
$mdb-shadow-6dp: 0 6px 10px 0 rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 1px 18px 0 rgba($black, $mdb-shadow-ambient-opacity),
|
||||
0 3px 5px -1px rgba($black, $mdb-shadow-umbra-opacity);
|
||||
$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity),
|
||||
0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity);
|
||||
|
||||
$mdb-shadow-8dp: 0 8px 10px 1px rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 3px 14px 2px rgba($black, $mdb-shadow-ambient-opacity),
|
||||
0 5px 5px -3px rgba($black, $mdb-shadow-umbra-opacity);
|
||||
$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity),
|
||||
0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity);
|
||||
|
||||
$mdb-shadow-16dp: 0 16px 24px 2px rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 6px 30px 5px rgba($black, $mdb-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba($black, $mdb-shadow-umbra-opacity);
|
||||
$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity),
|
||||
0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity);
|
||||
|
||||
$mdb-shadow-24dp: 0 9px 46px 8px rgba($black, $mdb-shadow-penumbra-opacity),
|
||||
0 11px 15px -7px rgba($black, $mdb-shadow-ambient-opacity),
|
||||
0 24px 38px 3px rgba($black, $mdb-shadow-umbra-opacity);
|
||||
$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity),
|
||||
0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity),
|
||||
0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity);
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
// Buttons:
|
||||
$mdb-btn-font-size: .875rem !default; // 14px
|
||||
$mdb-btn-font-size-lg: 1.25rem !default;
|
||||
$mdb-btn-font-size-sm: .8125rem !default; // 13px
|
||||
$mdb-btn-margin-bottom: .3125rem !default; // 5px
|
||||
$bmd-btn-font-size: .875rem !default; // 14px
|
||||
$bmd-btn-font-size-lg: 1.25rem !default;
|
||||
$bmd-btn-font-size-sm: .8125rem !default; // 13px
|
||||
$bmd-btn-margin-bottom: .3125rem !default; // 5px
|
||||
|
||||
// default btn with no specific type designation
|
||||
$mdb-btn-color: $gray-dark !default;
|
||||
$mdb-btn-bg: inherit !default; //$body-bg !default; // #fff
|
||||
$mdb-btn-border: #ccc !default;
|
||||
$bmd-btn-color: $gray-dark !default;
|
||||
$bmd-btn-bg: inherit !default; //$body-bg !default; // #fff
|
||||
$bmd-btn-border: #ccc !default;
|
||||
|
||||
$mdb-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
|
||||
$mdb-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
|
||||
$mdb-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
|
||||
$bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999
|
||||
$bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999
|
||||
$bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black
|
||||
|
||||
$mdb-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
|
||||
$mdb-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
|
||||
$mdb-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
|
||||
$bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC
|
||||
$bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC
|
||||
$bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white
|
||||
|
||||
$mdb-btn-fab-size: 3.5rem !default; // 56px
|
||||
$mdb-btn-fab-size-sm: 2.5rem !default; // 40px
|
||||
$mdb-btn-fab-font-size: 1.5rem !default; // 24px
|
||||
$bmd-btn-fab-size: 3.5rem !default; // 56px
|
||||
$bmd-btn-fab-size-sm: 2.5rem !default; // 40px
|
||||
$bmd-btn-fab-font-size: 1.5rem !default; // 24px
|
||||
|
||||
// icons
|
||||
$mdb-btn-icon-size: 2rem !default; // 32px
|
||||
$mdb-btn-icon-size-sm: (.75 * $mdb-btn-icon-size) !default; // ~24px
|
||||
$mdb-btn-icon-font-size-sm: (.75 * $mdb-btn-fab-font-size) !default;
|
||||
$bmd-btn-icon-size: 2rem !default; // 32px
|
||||
$bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px
|
||||
$bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
//$dropdown-border-color: rgba(0,0,0,.15) !default;
|
||||
//$dropdown-border-width: $border-width !default;
|
||||
//$dropdown-divider-bg: #e5e5e5 !default;
|
||||
$dropdown-box-shadow: $mdb-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default;
|
||||
$dropdown-box-shadow: $bmd-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default;
|
||||
//
|
||||
//$dropdown-link-color: $gray-dark !default;
|
||||
//$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $input-border-radius: 0 !default; // $border-radius !default;
|
|||
//$input-border-focus: #66afe9 !default;
|
||||
$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default;
|
||||
//
|
||||
$input-color-placeholder: $mdb-label-color !default; // #999 !default;
|
||||
$input-color-placeholder: $bmd-label-color !default; // #999 !default;
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Modals
|
||||
$modal-content-xs-box-shadow: $mdb-shadow-24dp !default;
|
||||
$modal-content-xs-box-shadow: $bmd-shadow-24dp !default;
|
||||
|
||||
// Padding applied to the modal body
|
||||
//$modal-inner-padding: 15px !default;
|
||||
|
|
|
|||
|
|
@ -3,43 +3,43 @@
|
|||
$nav-disabled-link-color: $gray-light !default;
|
||||
$nav-disabled-link-hover-color: $gray-light !default;
|
||||
|
||||
$mdb-navbar-link-font-weight: $mdb-font-weight-base !default; //
|
||||
$mdb-navbar-link-font-size: .875rem !default; // 14
|
||||
$mdb-navbar-link-padding: .5321rem 0; // 7
|
||||
$bmd-navbar-link-font-weight: $bmd-font-weight-base !default; //
|
||||
$bmd-navbar-link-font-size: .875rem !default; // 14
|
||||
$bmd-navbar-link-padding: .5321rem 0; // 7
|
||||
|
||||
|
||||
// tabs & pills
|
||||
$mdb-nav-tabs-pills-font-weight: 500 !default; //
|
||||
$mdb-nav-tabs-pills-font-size: .875rem !default; // 14
|
||||
$mdb-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14
|
||||
$bmd-nav-tabs-pills-font-weight: 500 !default; //
|
||||
$bmd-nav-tabs-pills-font-size: .875rem !default; // 14
|
||||
$bmd-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14
|
||||
|
||||
// tabs only
|
||||
$mdb-nav-tabs-border-size: .214rem !default; // 3px
|
||||
$bmd-nav-tabs-border-size: .214rem !default; // 3px
|
||||
|
||||
$mdb-nav-tabs-color: $gray !default;
|
||||
$mdb-nav-tabs-active-color: $gray-dark !default;
|
||||
$mdb-nav-tabs-active-border-color: $brand-primary !default;
|
||||
$mdb-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
|
||||
$mdb-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;
|
||||
$bmd-nav-tabs-color: $gray !default;
|
||||
$bmd-nav-tabs-active-color: $gray-dark !default;
|
||||
$bmd-nav-tabs-active-border-color: $brand-primary !default;
|
||||
$bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default;
|
||||
$bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default;
|
||||
|
||||
$mdb-nav-tabs-primary-color: $mdb-text-color-inverse !default;
|
||||
$mdb-nav-tabs-primary-active-color: #fff !default;
|
||||
$mdb-nav-tabs-primary-active-border-color: #fff !default;
|
||||
$mdb-nav-tabs-primary-disabled-link-color: $mdb-text-color-inverse-light !default;
|
||||
$mdb-nav-tabs-primary-disabled-link-color-hover: $mdb-text-color-inverse-light !default;
|
||||
$bmd-nav-tabs-primary-color: $bmd-text-color-inverse !default;
|
||||
$bmd-nav-tabs-primary-active-color: #fff !default;
|
||||
$bmd-nav-tabs-primary-active-border-color: #fff !default;
|
||||
$bmd-nav-tabs-primary-disabled-link-color: $bmd-text-color-inverse-light !default;
|
||||
$bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-text-color-inverse-light !default;
|
||||
|
||||
$mdb-nav-tabs-inverse-color: $mdb-text-color-inverse !default;
|
||||
$mdb-nav-tabs-inverse-active-color: #fff !default;
|
||||
$mdb-nav-tabs-inverse-active-border-color: #fff !default;
|
||||
$mdb-nav-tabs-inverse-disabled-link-color: $mdb-text-color-inverse-light !default;
|
||||
$mdb-nav-tabs-inverse-disabled-link-color-hover: $mdb-text-color-inverse-light !default;
|
||||
$bmd-nav-tabs-inverse-color: $bmd-text-color-inverse !default;
|
||||
$bmd-nav-tabs-inverse-active-color: #fff !default;
|
||||
$bmd-nav-tabs-inverse-active-border-color: #fff !default;
|
||||
$bmd-nav-tabs-inverse-disabled-link-color: $bmd-text-color-inverse-light !default;
|
||||
$bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-text-color-inverse-light !default;
|
||||
|
||||
|
||||
//$nav-item-margin: .2rem !default;
|
||||
|
||||
|
||||
|
||||
//$mdb-nav-link-line-height: 1 !default; // makes it easier to line up with the spec
|
||||
//$bmd-nav-link-line-height: 1 !default; // makes it easier to line up with the spec
|
||||
//$nav-link-padding: .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity
|
||||
//$nav-link-hover-bg: $gray-lighter !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
// Form states and alerts
|
||||
//
|
||||
// Define colors for form feedback states and, by default, alerts.
|
||||
$state-success-text: $mdb-text-color-inverse !default;
|
||||
$state-success-text: $bmd-text-color-inverse !default;
|
||||
$state-success-bg: $brand-success !default;
|
||||
|
||||
$state-info-text: $mdb-text-color-inverse !default;
|
||||
$state-info-text: $bmd-text-color-inverse !default;
|
||||
$state-info-bg: $brand-info !default;
|
||||
|
||||
$state-warning-text: $mdb-text-color-inverse !default;
|
||||
$state-warning-text: $bmd-text-color-inverse !default;
|
||||
$state-warning-bg: $brand-warning !default;
|
||||
|
||||
$state-danger-text: $mdb-text-color-inverse !default;
|
||||
$state-danger-text: $bmd-text-color-inverse !default;
|
||||
$state-danger-bg: $brand-danger !default;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user