mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 13:04:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

#745 reviewed fab buttons, updated sass conversion

Browse Source
This commit is contained in:
Kevin Ross 2015-11-24 16:34:17 -06:00
parent 1ba984c2ec
commit 466416497b
33 changed files with 3886 additions and 3660 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
Gruntfile.js
View File

@ -88,7 +88,7 @@ module.exports = function (grunt) {
files: [{ files: [{
expand: true, expand: true,
cwd: "less", cwd: "less",
src: ["*.less", "!_mixins.less", "!_import-bs*"], src: ["**/*.less", "!_mixins.less", "!_import-bs*"],
ext: ".scss", ext: ".scss",
dest: "sass" dest: "sass"
}], }],
@ -116,6 +116,13 @@ module.exports = function (grunt) {
order: 2 order: 2
}, },
// convert conditional when
{ // https://regex101.com/r/dL1lI8/2
pattern: /& when /gi,
replacement: "@if ",
order: 2
},
// convert all shadow mixins // convert all shadow mixins
{ // https://regex101.com/r/sJ2lH4/1 { // https://regex101.com/r/sJ2lH4/1
pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi, pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
@ -144,58 +151,65 @@ module.exports = function (grunt) {
}, },
// button variations mixin replacement(s) // button variations mixin replacement(s)
{ // Multi-line replacement - https://regex101.com/r/qD9qB8/2 //{ // Multi-line replacement - https://regex101.com/r/qD9qB8/2
pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg, // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)contrast[\s\S]+?(?!\r|\n)(\d+)[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: "@include button-variations(unquote($1), $2, $3%);\n", // replacement: "@include button-variations(unquote($1), $2, $3%);\n",
order: 20 // order: 20
}, //},
// background-color generic-variations //// background-color generic-variations
{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2 //{ // Multi-line replacement - https://regex101.com/r/cW6pH8/2
pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg, // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-color[\s\S]+?(?!\r|\n)(\(\d+\/\d+\))[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: "@include bg-color-variations(unquote($1), $2, $3);\n", // replacement: "@include bg-color-variations(unquote($1), $2, $3);\n",
order: 21 // order: 21
}, //},
// bg-box-shadow generic-variations //// bg-box-shadow generic-variations
{ // Multi-line replacement - https://regex101.com/r/jW8kR1/1 //{ // Multi-line replacement - https://regex101.com/r/jW8kR1/1
pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)box-shadow[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n", // replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n",
order: 22 // order: 22
}, //},
// bg-img generic-variations //// bg-img generic-variations
{ // Multi-line replacement - https://regex101.com/r/aP2hH2/1 //{ // Multi-line replacement - https://regex101.com/r/aP2hH2/1
pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg, // pattern: /.generic-variations\(unquote\(("[^"]+")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)background-image[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: "@include bg-img-variations(unquote($1), $2);\n", // replacement: "@include bg-img-variations(unquote($1), $2);\n",
order: 23 // order: 23
}, //},
// navbar generic-variations // material-placeholder
{ // Multi-line replacement - https://regex101.com/r/lX1hH1/1
pattern: /.generic-variations\(unquote\((".navbar")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$\n/mg,
replacement: "@include navbar-variations(unquote($1), $2);\n",
order: 24
},
// material-placehorder
{ // Multi-line replacement - https://regex101.com/r/eS2vQ3/2 { // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg, pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
replacement: "@include material-placeholder {\n$1\n}\n", replacement: "@include material-placeholder {\n$1\n}\n",
order: 24 order: 24
}, },
// navbar generic-variations
{ // Multi-line replacement - https://regex101.com/r/lX1hH1/4
pattern: /.generic-variations\(unquote\((".navbar"), ~("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)[\s\S]+?(?!\r|\n)}\);$/mg,
replacement: "@include navbar-variations(unquote($1), unquote($2), $4);\n",
order: 25
},
// fix calc references // fix calc references
{ // https://regex101.com/r/aZ8iI5/1 { // https://regex101.com/r/aZ8iI5/1
pattern: /calc\(unquote\("([^"]+)"\)\)/gi, pattern: /calc\(unquote\("([^"]+)"\)\)/gi,
replacement: "calc($1)", replacement: "calc($1)",
order: 24 order: 100
},
// fix unquote("", ~"")
{ // https://regex101.com/r/vX4nO9/6
pattern: /\(unquote\(("([^"]+)?"), ~("([^"]+)?")\),/gi,
replacement: "(unquote($1), unquote($3),",
order: 101
}, },
// alert generic-variations (convert this one last - very broad search) // alert generic-variations (convert this one last - very broad search)
{ // Multi-line replacement - https://regex101.com/r/jB1uL1/1 { // Multi-line replacement - https://regex101.com/r/jB1uL1/2
pattern: /.generic-variations\(unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg, pattern: /.generic-variations\(unquote\(("([^"]+)?")\), unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
replacement: "@include alert-variations(unquote($1), $3);\n", replacement: "@include alert-variations(unquote($1), unquote($3), $5);\n",
order: 250 // very broad search, do this last order: 250 // very broad search, do this last
}, },

23
bootstrap-elements.html
View File

@ -539,14 +539,23 @@
<a href="javascript:void(0)" class="btn btn-raised btn-xs">xs button</a> <a href="javascript:void(0)" class="btn btn-raised btn-xs">xs button</a>
</p> </p>
<h3>Floating action buttons</h3> <h3>Floating action buttons <small>a.k.a fab</small></h3>
<p class="bs-component"> <p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-default btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-primary btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-primary btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-success btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-success btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-info btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-warning btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-warning btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-danger btn-fab btn-raised "><i class="material-icons">grade</i></a> <a href="javascript:void(0)" class="btn btn-danger btn-fab"><i class="material-icons">grade</i></a>
</p>
<h4><small><code>.btn-group-sm .btn-fab</code> or <code>.btn-fab-mini</code></small></h4>
<p class="bs-component btn-group-sm">
<a href="javascript:void(0)" class="btn btn-default btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-primary btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-success btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-info btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-warning btn-fab"><i class="material-icons">grade</i></a>
<a href="javascript:void(0)" class="btn btn-danger btn-fab"><i class="material-icons">grade</i></a>
</p> </p>
</div> </div>

76
less/_buttons.less
View File

@ -55,11 +55,17 @@
} }
} }
//--
// color variations
&.btn-raised,
&.btn-fab {
.background-variations(~".btn", ~"", @mdb-btn-background-color);
}
//--- //---
// btn-raised // btn-raised
&.btn-raised { &.btn-raised {
.background-variations(~".btn", ~"", @mdb-btn-background-color);
&:not(.btn-link) { &:not(.btn-link) {
.shadow-2dp(); .shadow-2dp();
@ -88,23 +94,8 @@
} }
} }
// Size variations
&.btn-lg,
.btn-group-lg & {
font-size: @mdb-btn-font-size-lg;
}
&.btn-sm,
.btn-group-sm & {
padding: 5px 20px;
font-size: @mdb-btn-font-size-sm;
}
&.btn-xs,
.btn-group-xs & {
padding: 4px 15px;
font-size: @mdb-btn-font-size-xs;
}
&.btn-fab { &.btn-fab {
// see above for color variations
border-radius: 50%; border-radius: 50%;
font-size: @mdb-btn-fab-font-size; font-size: @mdb-btn-fab-font-size;
height: @mdb-btn-fab-size; height: @mdb-btn-fab-size;
@ -117,29 +108,15 @@
position: relative; position: relative;
line-height: normal; line-height: normal;
//&,
//&:hover,
//&:active {
// //.variations(~"", background-color, transparent);
// //.variations(~".btn", ~"", background-color, @mdb-btn-primary-color);
//}
//&,
//&:hover {
// .shadow-z-1();
//}
//&:active {
// .shadow-z-1-hover();
//}
.ripple-container { .ripple-container {
border-radius: 50%; border-radius: 50%;
} }
&.btn-fab-mini { &.btn-fab-mini,
width: 40px; .btn-group-sm & {
height: 40px; height: @mdb-btn-fab-size-mini;
padding: 13px 0; min-width: @mdb-btn-fab-size-mini;
font-size: 15px; width: @mdb-btn-fab-size-mini;
&.material-icons { &.material-icons {
top: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2; top: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2;
@ -161,12 +138,30 @@
i.material-icons { i.material-icons {
vertical-align: middle; vertical-align: middle;
} }
// Size variations
&.btn-lg,
.btn-group-lg & {
font-size: @mdb-btn-font-size-lg;
}
&.btn-sm,
.btn-group-sm & {
padding: 5px 20px;
font-size: @mdb-btn-font-size-sm;
}
&.btn-xs,
.btn-group-xs & {
padding: 4px 15px;
font-size: @mdb-btn-font-size-xs;
}
} }
// Disabled buttons and button groups // Disabled buttons and button groups
.btn, .btn,
.input-group-btn .btn, .input-group-btn .btn,
.btn-group { .btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
fieldset[disabled][disabled] &, fieldset[disabled][disabled] &,
&.disabled, &.disabled,
@ -179,9 +174,10 @@
color: fade(#FFFFFF, 30%); color: fade(#FFFFFF, 30%);
} }
// flat buttons lose transparency
background: transparent; background: transparent;
// no box-shadow on disabled // no box-shadow on raised - need specificity
&.btn-raised, &.btn-raised,
&.btn-group-raised { &.btn-group-raised {
&, &,
@ -202,6 +198,8 @@
//border-radius: 2px; //border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
&.open { &.open {
.dropdown-toggle { .dropdown-toggle {
//box-shadow: none; //box-shadow: none;

4
less/_import-bs-less.less
View File

@ -1,2 +1,2 @@
@import "@{mdb-dependency-packages}/bootstrap/less/variables.less"; @import "../bower_components/bootstrap/less/variables.less";
//@import "@{mdb-dependency-packages}/bootstrap/less/mixins.less"; //@import "../bower_components/bootstrap/less/mixins.less";

5
less/_variables.less
View File

@ -1,8 +1,5 @@
@import "_colors.less"; @import "_colors.less";
// Paths
@mdb-dependency-packages: "../bower_components";
// Typography elements // Typography elements
@mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; @mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
@mdb-text-color-light: ~"rgba(@{rgb-white}, 0.84)"; @mdb-text-color-light: ~"rgba(@{rgb-white}, 0.84)";
@ -153,7 +150,7 @@
@mdl-btn-border-radus: 2px; @mdl-btn-border-radus: 2px;
@mdb-btn-primary-color: ~"rgba(@{rgb-grey-500}, 0.20)"; //@mdb-btn-primary-color: ~"rgba(@{rgb-grey-500}, 0.20)";
@mdb-btn-fab-size: 56px; @mdb-btn-fab-size: 56px;
@mdb-btn-fab-size-mini: 40px; @mdb-btn-fab-size-mini: 40px;

6
sass/_alerts.scss
View File

@ -5,15 +5,15 @@
border-radius: 0; border-radius: 0;
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
@include alert-variations(unquote(""), $darkbg-text); @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
&-info, &-danger, &-warning, &-success { &-info, &-danger, &-warning, &-success {
color: $darkbg-text; color: $mdb-text-color-light;
} }
&-default { &-default {
a, .alert-link { a, .alert-link {
color: $lightbg-text; color: $mdb-text-color-primary;
} }
} }
} }

20
sass/_bootstrap-material-design.scss
View File

@ -5,7 +5,7 @@ body {
&.inverse { &.inverse {
background: #333333; background: #333333;
&, .form-control { &, .form-control {
color: $darkbg-text; color: $mdb-text-color-light;
} }
.modal, .modal,
.panel-default, .panel-default,
@ -22,8 +22,8 @@ body {
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: $mdb-font-family; //font-family: $font-family-sans-serif;
font-weight: 300; //font-weight: 300;
} }
h5, h6{ h5, h6{
@ -32,6 +32,10 @@ h5, h6{
a, a:hover, a:focus { a, a:hover, a:focus {
color: $brand-primary; color: $brand-primary;
& .material-icons {
vertical-align: middle;
}
} }
// Well and Jumbotrons // Well and Jumbotrons
@ -78,7 +82,6 @@ legend {
color: $brand-primary; color: $brand-primary;
} }
} }
@include variations(unquote(" li a:hover"), color, $brand-primary);
} }
// Alerts // Alerts
@ -100,8 +103,6 @@ legend {
@import '_dialogs'; @import '_dialogs';
@import '_labels';
@import '_panels'; @import '_panels';
@import '_dividers'; @import '_dividers';
@ -116,8 +117,7 @@ legend {
} }
@import '_themes';
// External plugins // External plugins
@import '_plugin-snackbarjs'; @import '_plugins';
@import '_plugin-nouislider';
@import '_plugin-selectize';
@import '_plugin-dropdownjs';

308
sass/_buttons.scss
View File

@ -1,154 +1,226 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@mixin btn-shadow(){ // specification: https://www.google.com/design/spec/components/buttons.html
@include shadow-z-1();
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@include shadow-z-1-hover();
}
}
.btn { @mixin typo-button($colorContrast: false){
position: relative; font-size: $mdb-btn-font-size-base;
padding: 8px 30px; font-weight: 500;
border: 0;
margin: 10px 1px;
cursor: pointer;
border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; //line-height: 1;
color: $darkbg-text; letter-spacing: 0;
&:not(.btn-link):not(.btn-flat) { @if ($colorContrast) {
background-color: $btn-default; opacity: 0.87;
color: $lightbg-text;
&:not(.btn-fab) {
&:hover {
@include shadow-z-1();
}
&:active {
@include shadow-z-1-hover();
}
}
} }
transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important;
.btn-flat:not(.btn-link){
color: $lightbg-text;
}
@include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default);
// BTN hover effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
@include button-variations(unquote(":hover:not(.btn-link):not(.btn-flat)"), $btn-default, 4%);
// BTN active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
@include button-variations(unquote(":active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
// BTN .active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
@include button-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, 6%);
// BTN flat hover effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
@include bg-color-variations(unquote(".btn-flat:hover:not(.btn-link)"), $btn-default, (20/100));
} }
// mdb default buttons are flat by default
// synchronized with mdl 11/23/15
.btn, .btn,
.input-group-btn .btn { .input-group-btn .btn {
&.btn-flat { border: none;
background: none; border-radius: $border-radius-base;
position: relative;
padding: 8px 30px;
margin: 10px 1px;
@include typo-button();
will-change: box-shadow, transform;
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;
outline: none;
cursor: pointer;
text-decoration: none;
&::-moz-focus-inner {
border: 0;
}
//---
// btn-flat
background: transparent;
&:not(.btn-raised) {
@include variations(unquote(".btn"), unquote(""), color, $mdb-text-color-primary);
box-shadow: none; box-shadow: none;
font-weight: 500;
&:disabled { &:not(.btn-link) {
color: $text-disabled !important; &:hover,
&:focus {
// spec: flat/light bg Hover: 20% #999999
background-color: rgba(#999999, (20/100));
.theme-dark & {
// spec: dark bg Hover: 15% #CCCCCC
background-color: rgba(#CCCCCC, (15/100));
}
}
} }
} }
// Size variations //--
&.btn-sm { // color variations
padding: 5px 20px; &.btn-raised,
} &.btn-fab {
&.btn-xs { @include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
padding: 4px 15px;
font-size: 10px;
} }
//---
// btn-raised
&.btn-raised { &.btn-raised {
@include btn-shadow(); &:not(.btn-link) {
@include shadow-2dp();
&:hover {
// Spec:
// - Raised Light/Light theme no hover.
// - Raised Dark/Dark theme Hover color: 600
.theme-dark & {
//// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
//@include alert-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
}
}
&.active,
&:active {
@include shadow-4dp();
}
&:focus:not(:active) {
@include focus-shadow();
}
}
} }
&.btn-fab { &.btn-fab {
margin: 0; // see above for color variations
padding: 15px; border-radius: 50%;
font-size: 26px; font-size: $mdb-btn-fab-font-size;
width: 56px; height: $mdb-btn-fab-size;
height: 56px; margin: auto;
&, &:hover, &:active { min-width: $mdb-btn-fab-size;
@include variations(unquote(""), background-color, transparent); width: $mdb-btn-fab-size;
} padding: 0;
&, &:hover { overflow: hidden;
@include shadow-z-1(); box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
} position: relative;
&:active { line-height: normal;
@include shadow-z-1-hover();
}
&,
.ripple-container { .ripple-container {
border-radius: 100%; border-radius: 50%;
} }
&.btn-fab-mini {
width: 40px; &.btn-fab-mini,
height: 40px; .btn-group-sm & {
padding: 13px 0; height: $mdb-btn-fab-size-mini;
font-size: 15px; min-width: $mdb-btn-fab-size-mini;
width: $mdb-btn-fab-size-mini;
&.material-icons {
top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2;
}
} }
i {
position: relative; i.material-icons {
top: -5px; position: absolute;
margin: 0 auto; top: 50%;
left: 50%;
transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2));
line-height: $mdb-btn-fab-font-size;
width: $mdb-btn-fab-font-size;
}
}
// Align icons inside buttons with text
i.material-icons {
vertical-align: middle;
}
// Size variations
&.btn-lg,
.btn-group-lg & {
font-size: $mdb-btn-font-size-lg;
}
&.btn-sm,
.btn-group-sm & {
padding: 5px 20px;
font-size: $mdb-btn-font-size-sm;
}
&.btn-xs,
.btn-group-xs & {
padding: 4px 15px;
font-size: $mdb-btn-font-size-xs;
}
}
// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group,
.btn-group-vertical {
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
fieldset[disabled][disabled] &,
&.disabled,
&:disabled,
&[disabled][disabled] {
// spec: light theme: Disabled text: 26% #000000
color: rgba(#000000, (26/100));
.theme-dark & {
// spec: dark theme: Disabled text: 30% #FFFFFF
color: rgba(#FFFFFF, (30/100));
}
// flat buttons lose transparency
background: transparent;
// no box-shadow on raised - need specificity
&.btn-raised,
&.btn-group-raised {
&,
&.active,
&:active,
&:focus:not(:active) {
box-shadow: none;
}
} }
} }
} }
// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default) // btn-group variations
.btn-link, .btn:not([class*="btn-"]), .btn-default { .btn-group,
color: $lightbg-text; .btn-group-vertical {
&:hover {
color: $lightbg-text;
}
}
.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) {
&:hover, &.active {
background-color: rgba(255,255,255,0.5);
}
}
.open > .dropdown-toggle.btn {
@include variations(unquote(""), background-color, $btn-default);
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: 0;
}
.btn-group, .btn-group-vertical {
position: relative; position: relative;
border-radius: 2px; //border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
@include btn-shadow();
&.open .dropdown-toggle { // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
box-shadow: none; &.open {
.dropdown-toggle {
//box-shadow: none;
}
& > .dropdown-toggle.btn {
@include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color);
}
} }
.dropdown-menu {
border-radius: 0 0 $border-radius-base $border-radius-base;
}
&.btn-group-raised { &.btn-group-raised {
@include btn-shadow(); @include shadow-2dp();
} }
.btn, .btn:active, .btn-group {
box-shadow: none !important; & .btn + .btn,
.btn,
.btn:active,
.btn-group {
margin: 0; margin: 0;
} }
} }
.btn-group-flat {
box-shadow: none !important;
}

2
sass/_cards.scss
View File

@ -21,7 +21,7 @@
/**************************************************************************/ /**************************************************************************/
border-radius: 2px; border-radius: $border-radius-base;
color: $mdb-card-body-text; color: $mdb-card-body-text;
background: $mdb-card-body-background; background: $mdb-card-body-background;

78
sass/_checkboxes.scss
View File

@ -48,8 +48,7 @@
display: inline-block; display: inline-block;
width: $mdb-checkbox-size; width: $mdb-checkbox-size;
height: $mdb-checkbox-size; height: $mdb-checkbox-size;
border: 2px solid $mdb-checkbox-border-color; border: $border-radius-base solid $mdb-checkbox-border-color;
border-radius: 2px;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
} }
@ -74,33 +73,51 @@
} }
} }
input[type=checkbox]:focus + .checkbox-material .check:after { input[type=checkbox] {
opacity: 0.2;
}
input[type=checkbox]:checked + .checkbox-material .check:before {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
input[type=checkbox]:not(:checked) + .checkbox-material:before { &:focus + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple; opacity: 0.2;
} }
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
}
// Ripple effect on click &:checked {
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // FIXME: once working - combine further to reduce code
} & + .checkbox-material .check {
input[type=checkbox]:checked + .checkbox-material .check:after { color: $mdb-checkbox-checked-color;
animation: rippleOn $mdb-checkbox-animation-ripple forwards; border-color: $mdb-checkbox-checked-color;
}
& + .checkbox-material .check:before {
color: $mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on $mdb-checkbox-animation-check forwards;
}
& + .checkbox-material:before {
animation: rippleOn $mdb-checkbox-animation-ripple;
}
& + .checkbox-material .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
}
}
&:not(:checked) {
& + .checkbox-material:before {
animation: rippleOff $mdb-checkbox-animation-ripple;
}
& + .checkbox-material .check:after {
animation: rippleOff $mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
}
}
} }
// Style for disabled inputs // Style for disabled inputs
@ -112,14 +129,9 @@
opacity: 0.5; opacity: 0.5;
} }
input[type=checkbox][disabled] + .checkbox-material .check:after { input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: $lightbg-text; background-color: $mdb-text-color-primary;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $brand-success);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $mdb-checkbox-checked-color);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $mdb-checkbox-checked-color);
} }
@keyframes checkbox-on { @keyframes checkbox-on {

7
sass/_colors.scss
View File

@ -328,7 +328,7 @@ $grey-100: #f5f5f5 !default;
$grey-200: #eeeeee !default; $grey-200: #eeeeee !default;
$grey-300: #e0e0e0 !default; $grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default; $grey-400: #bdbdbd !default;
$grey-500: #9e9e9e !default; $grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
$grey-600: #757575 !default; $grey-600: #757575 !default;
$grey-700: #616161 !default; $grey-700: #616161 !default;
$grey-800: #424242 !default; $grey-800: #424242 !default;
@ -357,6 +357,5 @@ $blue-grey-A700: #455a64 !default;
$blue-grey: $blue-grey-500 !default; $blue-grey: $blue-grey-500 !default;
$black: #000000 !default; $black: #000000; $rgb-black: "0,0,0" !default;
$white: #ffffff !default; $white: #ffffff; $rgb-white: "255,255,255" !default;
$mdb-brand-inverse: $indigo !default;

2
sass/_dialogs.scss
View File

@ -6,7 +6,7 @@
// -------------------------------------------------- // --------------------------------------------------
.modal-content { .modal-content {
@include shadow-z-5(); @include shadow-z-5();
border-radius: 2px; border-radius: $border-radius-base;
border: none; border: none;
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss

6500
sass/_icons-material-design.scss
View File

File diff suppressed because it is too large Load Diff

23
sass/_icons.scss
View File

@ -2,9 +2,22 @@
// http://google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts // http://google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts
// icons as ligatures http://google.github.io/material-design-icons/#using-the-icons-in-html
// <i class="material-icons">face</i>
.mdi, icon {
@include variations(unquote(""), color, $lightbg-text); // use something like this to generically style disabled and muted, etc based on color variables?
line-height: inherit; //.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
vertical-align: bottom; //.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
} //
//.material-icons.md-light { color: rgba(255, 255, 255, 1); }
//.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
//.mdi, icon {
// @include variations(unquote(""), color, $mdb-text-color-primary);
// line-height: inherit;
// vertical-align: bottom;
//}

4
sass/_import-bs-sass.scss
View File

@ -1,2 +1,2 @@
@import "#{$mdb-dependency-packages}/bootstrap-sass/assets/stylesheets/bootstrap/variables"; @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables";
//@import "#{$mdb-dependency-packages}/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; //@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins";

15
sass/_inputs.scss
View File

@ -2,6 +2,12 @@
@import '_inputs-size'; @import '_inputs-size';
// label variations
.label {
border-radius: $border-radius-small;
@include variations(unquote(".label"), unquote(""), background-color, $grey);
}
// must be broken out for reuse - webkit selector breaks firefox // must be broken out for reuse - webkit selector breaks firefox
@mixin label-static($label-top, $static-font-size, $static-line-height){ @mixin label-static($label-top, $static-font-size, $static-line-height){
label.control-label { label.control-label {
@ -188,6 +194,12 @@
} }
} }
// hint to browser for optimization
// TODO: evaluate effectiveness - looking for community feedback
&.label-floating label.control-label {
will-change: left, top, contents;
}
// hide label-placeholders when the field is not empty // hide label-placeholders when the field is not empty
&.label-placeholder:not(.is-empty){ &.label-placeholder:not(.is-empty){
label.control-label{ label.control-label{
@ -234,9 +246,6 @@
} }
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
@include bg-img-variations(unquote(".is-focused .form-control"), $brand-primary);
@include form-group-validation-state(has-warning, $brand-warning); @include form-group-validation-state(has-warning, $brand-warning);
@include form-group-validation-state(has-error, $brand-danger); @include form-group-validation-state(has-error, $brand-danger);
@include form-group-validation-state(has-success, $brand-success); @include form-group-validation-state(has-success, $brand-success);

2
sass/_lists.scss
View File

@ -85,7 +85,7 @@
outline: 10px solid rgba(0,0,0,.15); outline: 10px solid rgba(0,0,0,.15);
} }
.list-group-item-heading, .list-group-item-text { .list-group-item-heading, .list-group-item-text {
color: $lightbg-text; color: $mdb-text-color-primary;
} }
} }

94
sass/_mixins.scss
View File

@ -11,44 +11,44 @@
// variations(unquote(""), background-color, #FFF); // variations(unquote(""), background-color, #FFF);
@mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) { @mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) {
@include generic-variations($selector-suffix, $color-default, "variations-content", $mdb-param-1); @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1);
} }
@mixin variations-content($args) { @mixin variations-content($args) {
//@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, material-color)}; }"; //@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, variation-color)}; }";
//@debug "#{inspect($args)}"; //@debug "#{inspect($args)}";
//@error "break here"; //@error "break here";
#{map-get($args, material-param-1)}: map-get($args, material-color); #{map-get($args, material-param-1)}: map-get($args, variation-color);
} }
@mixin background-variations($component, $selector-suffix, $color-default) { @mixin background-variations($component, $selector-suffix, $color-default) {
@include generic-variations($selector-suffix, $color-default, "background-variations-content", null); @include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null);
} }
@mixin background-variations-content($args) { @mixin background-variations-content($args) {
background-color: map-get($args, material-color); background-color: map-get($args, variation-color);
@if (map-get($args, material-color) == $btn-default) { @if (map-get($args, variation-color) == $mdb-btn-background-color) {
color: $lightbg-text; color: $mdb-text-color-primary;
} @else { } @else {
color: map-get($args, material-text-color); color: map-get($args, variation-color-text);
} }
} }
//@mixin text-variations($component, $selector-suffix, $color-default) { //@mixin text-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($selector-suffix, $color-default, "text-variations-content", null); // @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null);
//} //}
// //
//@mixin text-variations-content($args) { //@mixin text-variations-content($args) {
// color: map-get($args, material-color); // color: map-get($args, variation-color);
//} //}
// //
//@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) { //@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($selector-suffix, $color-default, "button-variations-content", $mdb-param-1); // @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
//} //}
// //
//@mixin button-variations-content($args) { //@mixin button-variations-content($args) {
// //@debug "#{inspect($args)}"; // //@debug "#{inspect($args)}";
// $variation-color: map-get($args, material-color); // $variation-color: map-get($args, variation-color);
// $mdb-param-1: map-get($args, material-param-1); // $mdb-param-1: map-get($args, material-param-1);
// background-color: contrast-color($variation-color, // background-color: contrast-color($variation-color,
// darken($variation-color, $mdb-param-1), // darken($variation-color, $mdb-param-1),
@ -56,42 +56,42 @@
//} //}
// //
//@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) { //@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
// @include generic-variations($selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1); // @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1);
//} //}
// //
//@mixin bg-color-variations-content($args) { //@mixin bg-color-variations-content($args) {
// background-color: rgba(map-get($args, material-color), map-get($args, material-param-1)); // background-color: rgba(map-get($args, variation-color), map-get($args, material-param-1));
//} //}
// //
//// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary //// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-box-shadow-variations($component, $selector-suffix, $color-default) { //@mixin bg-box-shadow-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($selector-suffix, $color-default, "bg-box-shadow-variations-content", null); // @include generic-variations($component, $selector-suffix, $color-default, "bg-box-shadow-variations-content", null);
//} //}
// //
//@mixin bg-box-shadow-variations-content($args){ //@mixin bg-box-shadow-variations-content($args){
// $variation-color: map-get($args, material-color); // $variation-color: map-get($args, variation-color);
// box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($variation-color, (10/100)); // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($variation-color, (10/100));
//} //}
// //
//// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary //// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
//@mixin bg-img-variations($component, $selector-suffix, $color-default) { //@mixin bg-img-variations($component, $selector-suffix, $color-default) {
// @include generic-variations($selector-suffix, $color-default, "bg-img-variations-content", null); // @include generic-variations($component, $selector-suffix, $color-default, "bg-img-variations-content", null);
//} //}
// //
//@mixin bg-img-variations-content($args){ //@mixin bg-img-variations-content($args){
// $variation-color: map-get($args, material-color); // $variation-color: map-get($args, variation-color);
// //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, material-color-name)} #{map-get($args, material-color)}"; //#{inspect($args)}"; // //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, variation-color-name)} #{map-get($args, variation-color)}"; //#{inspect($args)}";
// background-image: linear-gradient($variation-color, $variation-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color); // background-image: linear-gradient($variation-color, $variation-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
//} //}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
@mixin navbar-variations($component, $selector-suffix, $color-default) { @mixin navbar-variations($component, $selector-suffix, $color-default) {
@include generic-variations($selector-suffix, $color-default, "navbar-variations-content", null); @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
} }
@mixin navbar-variations-content($args){ @mixin navbar-variations-content($args){
$variation-color: map-get($args, material-color); $variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, material-text-color); $variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color; background-color: $variation-color;
color: $variation-color-text; color: $variation-color-text;
@ -103,7 +103,7 @@
} }
} }
.dropdown-menu { .dropdown-menu {
border-radius: $mdb-dropdown-radius; border-radius: $border-radius-base;
li > a { li > a {
font-size: $mdb-dropdown-font-size; font-size: $mdb-dropdown-font-size;
padding: 13px 16px; padding: 13px 16px;
@ -130,8 +130,8 @@
} }
@mixin alert-variations-content($args){ @mixin alert-variations-content($args){
$variation-color: map-get($args, material-color); $variation-color: map-get($args, variation-color);
$variation-color-text: map-get($args, material-text-color); $variation-color-text: map-get($args, variation-color-text);
background-color: $variation-color; background-color: $variation-color;
color: $variation-color-text; color: $variation-color-text;
@ -192,67 +192,51 @@
&#{$component}-default#{$selector-suffix} { &#{$component}-default#{$selector-suffix} {
$args-extra: map-merge($args, ( $args-extra: map-merge($args, (
//material-color-name: "default", variation-color: $color-default,
//material-color-full-name: "default", variation-color-text: $mdb-text-color-light
material-color: $color-default,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-extra); @include call-variations-content-mixin($args-extra);
} }
&#{$component}-inverse#{$selector-suffix} { &#{$component}-inverse#{$selector-suffix} {
$args-inverse: map-merge($args, ( $args-inverse: map-merge($args, (
//material-color-name: "inverse", variation-color: $mdb-brand-inverse,
//material-color-full-name: "inverse", variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
material-color: $mdb-brand-inverse,
material-text-color: contrast-color($mdb-brand-inverse, $lightbg-text, $darkbg-text)
)); ));
@include call-variations-content-mixin($args-inverse); @include call-variations-content-mixin($args-inverse);
} }
&#{$component}-primary#{$selector-suffix} { &#{$component}-primary#{$selector-suffix} {
$args-primary: map-merge($args, ( $args-primary: map-merge($args, (
//material-color-name: "primary", variation-color: $brand-primary,
//material-color-full-name: "primary", variation-color-text: $mdb-text-color-light
material-color: $brand-primary,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-primary); @include call-variations-content-mixin($args-primary);
} }
&#{$component}-success#{$selector-suffix} { &#{$component}-success#{$selector-suffix} {
$args-success: map-merge($args, ( $args-success: map-merge($args, (
//material-color-name: "success", variation-color: $brand-success,
//material-color-full-name: "success", variation-color-text: $mdb-text-color-light
material-color: $brand-success,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-success); @include call-variations-content-mixin($args-success);
} }
&#{$component}-info#{$selector-suffix} { &#{$component}-info#{$selector-suffix} {
$args-info: map-merge($args, ( $args-info: map-merge($args, (
//material-color-name: "info", variation-color: $brand-info,
//material-color-full-name: "info", variation-color-text: $mdb-text-color-light
material-color: $brand-info,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-info); @include call-variations-content-mixin($args-info);
} }
&#{$component}-warning#{$selector-suffix} { &#{$component}-warning#{$selector-suffix} {
$args-warning: map-merge($args, ( $args-warning: map-merge($args, (
//material-color-name: "warning", variation-color: $brand-warning,
//material-color-full-name: "warning", variation-color-text: $mdb-text-color-light
material-color: $brand-warning,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-warning); @include call-variations-content-mixin($args-warning);
} }
&#{$component}-danger#{$selector-suffix} { &#{$component}-danger#{$selector-suffix} {
$args-danger: map-merge($args, ( $args-danger: map-merge($args, (
//material-color-name: "danger", variation-color: $brand-danger,
//material-color-full-name: "danger", variation-color-text: $mdb-text-color-light
material-color: $brand-danger,
material-text-color: $darkbg-text
)); ));
@include call-variations-content-mixin($args-danger); @include call-variations-content-mixin($args-danger);
} }
} }
//$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");

11
sass/_navbar.scss
View File

@ -2,8 +2,8 @@
.navbar { .navbar {
background-color: $brand-primary; background-color: $brand-primary;
border: $zero; border: 0;
border-radius: $zero; border-radius: 0;
.navbar-brand { .navbar-brand {
position: relative; position: relative;
@ -56,7 +56,7 @@
// Darken the responsive nav toggle // Darken the responsive nav toggle
.navbar-toggle { .navbar-toggle {
border: $zero; border: 0;
&:hover, &:hover,
&:focus { &:focus {
background-color: transparent; background-color: transparent;
@ -98,7 +98,7 @@
// Dropdowns get custom display // Dropdowns get custom display
.open .dropdown-menu { .open .dropdown-menu {
> .dropdown-header { > .dropdown-header {
border: $zero; border: 0;
color: inherit; color: inherit;
} }
.divider { .divider {
@ -187,7 +187,8 @@
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
@include navbar-variations(unquote(".navbar"), $brand-primary); @include navbar-variations(unquote(".navbar"), unquote(""), $brand-primary);
&-inverse { &-inverse {
background-color: $indigo; background-color: $indigo;

6
sass/_panels.scss
View File

@ -4,18 +4,18 @@
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
@include variations(unquote(" > .panel-heading"), background-color, $grey-200); @include variations(unquote(".panel"), unquote(" > .panel-heading"), background-color, $grey-200);
@include shadow-z-1; @include shadow-z-1;
} }
[class*="panel-"] > .panel-heading { [class*="panel-"] > .panel-heading {
color: $darkbg-text; color: $mdb-text-color-light;
border: 0; border: 0;
} }
.panel-default, .panel:not([class*="panel-"]) { .panel-default, .panel:not([class*="panel-"]) {
> .panel-heading { > .panel-heading {
color: $lightbg-text; color: $mdb-text-color-primary;
} }
} }
.panel-footer { .panel-footer {

7
sass/_plugins.scss Normal file
View File

@ -0,0 +1,7 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// External plugins
@import 'plugins/_plugin-snackbarjs';
@import 'plugins/_plugin-nouislider';
@import 'plugins/_plugin-selectize';
@import 'plugins/_plugin-dropdownjs';

2
sass/_popups.scss
View File

@ -5,7 +5,7 @@
line-height: 1em; line-height: 1em;
background: $mdb-popover-background; background: $mdb-popover-background;
border: none; border: none;
border-radius: $mdb-border-radius; border-radius: $border-radius-base;
@include shadow-z-1(); @include shadow-z-1();
} }

2
sass/_progress.scss
View File

@ -7,6 +7,6 @@
background: #c8c8c8; background: #c8c8c8;
.progress-bar { .progress-bar {
box-shadow: none; box-shadow: none;
@include variations(unquote(""), background-color, $brand-primary); @include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
} }
} }

16
sass/_radios.scss
View File

@ -31,7 +31,7 @@
display: block; display: block;
position: absolute; position: absolute;
content: ""; content: "";
background-color: $lightbg-text; background-color: $mdb-text-color-primary;
left: -18px; left: -18px;
top: -18px; top: -18px;
height: 50px; height: 50px;
@ -50,8 +50,14 @@
} }
} }
@include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $mdb-radio-default); & input[type=radio]:checked {
@include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $mdb-radio-default); & ~ .check {
background-color: $mdb-radio-default;
}
& ~ .circle {
border-color: $mdb-radio-default;
}
}
input[type=radio][disabled] ~ .check, input[type=radio][disabled] ~ .check,
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .circle {
@ -68,10 +74,10 @@
transform: scale3d(0.55, 0.55, 1); transform: scale3d(0.55, 0.55, 1);
} }
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .circle {
border-color: $lightbg-text; border-color: $mdb-text-color-primary;
} }
input[type=radio][disabled] ~ .check { input[type=radio][disabled] ~ .check {
background-color: $lightbg-text; background-color: $mdb-text-color-primary;
} }
} }

58
sass/_shadows.scss
View File

@ -1,37 +1,83 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@mixin shadow-z-1 { @mixin shadow-z-1(){
box-shadow: box-shadow:
0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12); 0 1px 6px 0 rgba(0, 0, 0, 0.12);
} }
@mixin shadow-z-1-hover { @mixin shadow-z-1-hover(){
box-shadow: box-shadow:
0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 5px 11px 0 rgba(0, 0, 0, 0.18),
0 4px 15px 0 rgba(0, 0, 0, 0.15); 0 4px 15px 0 rgba(0, 0, 0, 0.15);
} }
@mixin shadow-z-2 { @mixin shadow-z-2(){
box-shadow: box-shadow:
0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19); 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
@mixin shadow-z-3 { @mixin shadow-z-3(){
box-shadow: box-shadow:
0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19); 0 17px 50px 0 rgba(0, 0, 0, 0.19);
} }
@mixin shadow-z-4 { @mixin shadow-z-4(){
box-shadow: box-shadow:
0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 16px 28px 0 rgba(0, 0, 0, 0.22),
0 25px 55px 0 rgba(0, 0, 0, 0.21); 0 25px 55px 0 rgba(0, 0, 0, 0.21);
} }
@mixin shadow-z-5 { @mixin shadow-z-5(){
box-shadow: box-shadow:
0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 27px 24px 0 rgba(0, 0, 0, 0.2),
0 40px 77px 0 rgba(0, 0, 0, 0.22); 0 40px 77px 0 rgba(0, 0, 0, 0.22);
} }
/* Shadows (from mdl http://www.getmdl.io/) */
// Focus shadow mixin.
@mixin focus-shadow(){
box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
}
@mixin shadow-2dp(){
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 3px 1px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
}
@mixin shadow-3dp(){
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 3px 3px -2px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity);
}
@mixin shadow-4dp(){
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 1px 10px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 2px 4px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}
@mixin shadow-6dp(){
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 1px 18px 0 rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 3px 5px -1px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}
@mixin shadow-8dp(){
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 3px 14px 2px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 5px 5px -3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}
@mixin shadow-16dp(){
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 6px 30px 5px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 8px 10px -5px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}
@mixin shadow-24dp(){
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, $mdb-shadow-key-penumbra-opacity),
0 11px 15px -7px rgba(0, 0, 0, $mdb-shadow-ambient-shadow-opacity),
0 24px 38px 3px rgba(0, 0, 0, $mdb-shadow-key-umbra-opacity);
}

8
sass/_themes.scss Normal file
View File

@ -0,0 +1,8 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// by default, assume light-theme, no need for a marker class.
// this is mostly a marker class, add it to something like the body or container. Subordinates will look for this marker - see buttons
.theme-dark {
}

51
sass/_togglebutton.scss
View File

@ -42,27 +42,38 @@
top: -2px; top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
} }
// Handle disabled input[type=checkbox] {
input[type=checkbox][disabled] + .toggle:after, // Handle disabled
input[type=checkbox][disabled]:checked + .toggle:after { &[disabled] {
background-color: #BDBDBD; & + .toggle:after,
&:checked + .toggle:after {
background-color: #BDBDBD;
}
}
& + .toggle:active:after,
&[disabled] + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
// Ripple off and disabled
&:checked + .toggle:after {
left: 15px;
}
} }
// Ripple off and disabled
input[type=checkbox] + .toggle:active:after, & label input[type=checkbox]:checked {
input[type=checkbox][disabled] + .toggle:active:after { & + .toggle {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); background-color: rgba($brand-primary, (50/100)); // Switch bg on
} }
input[type=checkbox]:checked + .toggle:after {
left: 15px; & + .toggle:after {
background-color: $brand-primary; // Handle on
}
& + .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
}
} }
} }
// Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $brand-primary, (50/100));
// Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $brand-primary);
// Ripple on
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $brand-primary);
} }

74
sass/_variables.scss
View File

@ -2,19 +2,15 @@
@import '_colors'; @import '_colors';
// Material Global vars // Typography elements
$zero: 0 !default;
$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; $mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$mdb-text-color-light: unquote("rgba(#{$rgb-white}, 0.84)") !default;
// material icons path $mdb-text-color-light-hex: $white !default; // for contrast function in inverse
$mdb-font-path: "../fonts" !default; $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
// Typography elements for Material
$darkbg-text: rgba(255,255,255,0.84) !default;
$lightbg-text: rgba(0,0,0,0.84) !default;
$icon-color: rgba(0,0,0,0.5) !default; $icon-color: rgba(0,0,0,0.5) !default;
// import bs variables for less, last declared wins. // import bs variables for less, last declared wins.
@import '_import-bs-less'; @import '_import-bs-less';
@ -28,23 +24,38 @@ $brand-danger: $red !default;
$brand-warning: $deep-orange !default; $brand-warning: $deep-orange !default;
$brand-info: $light-blue !default; $brand-info: $light-blue !default;
$border-radius-base: 2px !default;
$border-radius-small: 1px !default;
// Typography
$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$headings-font-weight: 300 !default;
$body-bg: #EEEEEE !default; $body-bg: #EEEEEE !default;
//--- //---
// import bs variables for sass, first declared wins. // import bs variables for sass, first declared wins.
@import '_import-bs-sass'; @import '_import-bs-sass';
// Bootstrap Material Design variables start with mdb-
$mdb-brand-inverse: $indigo !default;
/* ANIMATION */
$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;
//--- //---
// FIXME: Similar but not quite the same as Bootstrap variables // FIXME: Similar but not quite the same as Bootstrap variables
// FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables // FIXME: these need to either a) be converted to $mdb- or b) converted to bs variables
$contrast-factor: 40% !default; $contrast-factor: 40% !default;
$btn-default: transparent !default;
$btn-default-text: $lightbg-text !default;
//--- //---
$mdb-radio-default: $lightbg-text !default; $mdb-radio-default: $mdb-text-color-primary !default;
$mdb-border-radius: 2px !default;
// -------------------- // --------------------
// inputs // inputs
@ -84,9 +95,9 @@ $mdb-label-top-margin-small: 12px !default;
$mdb-input-padding-xs-vertical: 2px !default; // 1 $mdb-input-padding-xs-vertical: 2px !default; // 1
$mdb-input-padding-xs-horizontal: 0px !default; // 5 $mdb-input-padding-xs-horizontal: 0px !default; // 5
$mdb-input-border-radius-base: 4px !default; $mdb-input-border-radius-base: 0 !default;
$mdb-input-border-radius-large: 6px !default; $mdb-input-border-radius-large: 0 !default;
$mdb-input-border-radius-small: 3px !default; $mdb-input-border-radius-small: 0 !default;
//** Default `.form-control` height //** Default `.form-control` height
@ -100,7 +111,7 @@ $mdb-input-height-small: (floor($mdb-input-font-size-small * $mdb-in
// Card // Card
$mdb-card-body-text: $lightbg-text !default; $mdb-card-body-text: $mdb-text-color-primary !default;
$mdb-card-body-background: #fff !default; $mdb-card-body-background: #fff !default;
$mdb-card-image-headline: #fff !default; $mdb-card-image-headline: #fff !default;
@ -120,7 +131,6 @@ $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
$mdb-popover-color: #ececec !default; $mdb-popover-color: #ececec !default;
// Dropdown Menu // Dropdown Menu
$mdb-dropdown-radius: 2px !default;
$mdb-dropdown-font-size: 16px !default; $mdb-dropdown-font-size: 16px !default;
// Toggle // Toggle
@ -129,3 +139,29 @@ $mdb-toggle-label-color: $mdb-checkbox-label-color !default;
// Radio: // Radio:
$mdb-radio-label-color: $mdb-checkbox-label-color !default; $mdb-radio-label-color: $mdb-checkbox-label-color !default;
$mdb-radio-border-color: $mdb-checkbox-border-color !default; $mdb-radio-border-color: $mdb-checkbox-border-color !default;
// Buttons:
$mdb-btn-font-size-base: 14px !default;
$mdb-btn-font-size-lg: 16px !default;
$mdb-btn-font-size-sm: 12px !default;
$mdb-btn-font-size-xs: 10px !default;
$mdb-btn-background-color: transparent !default;
$mdb-btn-background-color-text: $mdb-text-color-primary !default;
$mdl-btn-border-radus: 2px !default;
//$mdb-btn-primary-color: unquote("rgba(#{$rgb-grey-500}, 0.20)") !default;
$mdb-btn-fab-size: 56px !default;
$mdb-btn-fab-size-mini: 40px !default;
$mdb-btn-fab-font-size: 24px !default;
$mdb-btn-icon-size: 32px !default;
$mdb-btn-icon-size-mini: 24px !default;
/* SHADOWS */
$mdb-shadow-key-umbra-opacity: 0.2 !default;
$mdb-shadow-key-penumbra-opacity: 0.14 !default;
$mdb-shadow-ambient-shadow-opacity: 0.12 !default;

40
sass/_welljumbo.scss
View File

@ -1,24 +1,28 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
body, .container, .container-fluid { body {
.container,
.container-fluid {
.well.well-sm { .well.well-sm {
padding: 10px; padding: 10px;
} }
.well.well-lg { .well.well-lg {
padding: 26px; padding: 26px;
} }
.well, .jumbotron { .well,
.jumbotron {
background-color: #fff;
padding: 19px; background-color: #fff;
margin-bottom: 20px; padding: 19px;
@include shadow-z-2(); margin-bottom: 20px;
border-radius: 2px; @include shadow-z-2();
border: 0; border-radius: $border-radius-base;
p { border: 0;
font-weight: 300; p {
font-weight: 300;
}
@include variations(unquote(""), unquote(""), background-color, $white);
} }
@include variations(unquote(""), background-color, #FFF);
} }
} }

0
sass/_plugin-dropdownjs.scss → sass/plugins/_plugin-dropdownjs.scss
View File

10
sass/_plugin-nouislider.scss → sass/plugins/_plugin-nouislider.scss
View File

@ -78,7 +78,7 @@
} }
} }
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: $border-radius-base;
} }
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
@ -105,8 +105,8 @@
} }
.slider { .slider {
@include variations(unquote(".noUi-connect"), background-color, $brand-primary); @include variations(unquote(".slider"), unquote(".noUi-connect"), background-color, $brand-primary);
@include variations(unquote(" .noUi-connect"), background-color, $brand-primary); @include variations(unquote(".slider"), unquote(" .noUi-connect"), background-color, $brand-primary);
@include variations(unquote(" .noUi-handle"), background-color, $brand-primary); @include variations(unquote(".slider"), unquote(" .noUi-handle"), background-color, $brand-primary);
@include variations(unquote(" .noUi-handle"), border-color, $brand-primary); @include variations(unquote(".slider"), unquote(" .noUi-handle"), border-color, $brand-primary);
} }

2
sass/_plugin-selectize.scss → sass/plugins/_plugin-selectize.scss
View File

@ -70,7 +70,7 @@
height: auto; height: auto;
background-color: #FFF; background-color: #FFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 2px; border-radius: $border-radius-base;
padding: 0; padding: 0;
margin-top: 3px; margin-top: 3px;
.active { .active {

4
sass/_plugin-snackbarjs.scss → sass/plugins/_plugin-snackbarjs.scss
View File

@ -6,9 +6,9 @@
.snackbar { .snackbar {
// Style // Style
background-color: #323232; background-color: #323232;
color: $darkbg-text; color: $mdb-text-color-light;
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: $border-radius-base;
@include shadow-z-1; @include shadow-z-1;
// Animation // Animation