mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 19:14:09 +03:00
#745 reviewed fab buttons, updated sass conversion
This commit is contained in:
Kevin Ross
parent
1ba984c2ec
commit
466416497b
86
Gruntfile.js
86
Gruntfile.js
|
|
@ -88,7 +88,7 @@ module.exports = function (grunt) {
|
|||
files: [{
|
||||
expand: true,
|
||||
cwd: "less",
|
||||
src: ["*.less", "!_mixins.less", "!_import-bs*"],
|
||||
src: ["**/*.less", "!_mixins.less", "!_import-bs*"],
|
||||
ext: ".scss",
|
||||
dest: "sass"
|
||||
}],
|
||||
|
|
@ -116,6 +116,13 @@ module.exports = function (grunt) {
|
|||
order: 2
|
||||
},
|
||||
|
||||
// convert conditional when
|
||||
{ // https://regex101.com/r/dL1lI8/2
|
||||
pattern: /& when /gi,
|
||||
replacement: "@if ",
|
||||
order: 2
|
||||
},
|
||||
|
||||
// convert all shadow mixins
|
||||
{ // https://regex101.com/r/sJ2lH4/1
|
||||
pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
|
||||
|
|
@ -144,58 +151,65 @@ module.exports = function (grunt) {
|
|||
},
|
||||
|
||||
// button variations mixin replacement(s)
|
||||
{ // 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,
|
||||
replacement: "@include button-variations(unquote($1), $2, $3%);\n",
|
||||
order: 20
|
||||
},
|
||||
//{ // 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,
|
||||
// replacement: "@include button-variations(unquote($1), $2, $3%);\n",
|
||||
// order: 20
|
||||
//},
|
||||
|
||||
// background-color generic-variations
|
||||
{ // 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,
|
||||
replacement: "@include bg-color-variations(unquote($1), $2, $3);\n",
|
||||
order: 21
|
||||
},
|
||||
//// background-color generic-variations
|
||||
//{ // 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,
|
||||
// replacement: "@include bg-color-variations(unquote($1), $2, $3);\n",
|
||||
// order: 21
|
||||
//},
|
||||
|
||||
// bg-box-shadow generic-variations
|
||||
{ // 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,
|
||||
replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n",
|
||||
order: 22
|
||||
},
|
||||
//// bg-box-shadow generic-variations
|
||||
//{ // 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,
|
||||
// replacement: "@include bg-box-shadow-variations(unquote($1), $2);\n",
|
||||
// order: 22
|
||||
//},
|
||||
|
||||
// bg-img generic-variations
|
||||
{ // 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,
|
||||
replacement: "@include bg-img-variations(unquote($1), $2);\n",
|
||||
order: 23
|
||||
},
|
||||
//// bg-img generic-variations
|
||||
//{ // 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,
|
||||
// replacement: "@include bg-img-variations(unquote($1), $2);\n",
|
||||
// order: 23
|
||||
//},
|
||||
|
||||
// navbar generic-variations
|
||||
{ // 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
|
||||
// material-placeholder
|
||||
{ // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
|
||||
pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
|
||||
replacement: "@include material-placeholder {\n$1\n}\n",
|
||||
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
|
||||
{ // https://regex101.com/r/aZ8iI5/1
|
||||
pattern: /calc\(unquote\("([^"]+)"\)\)/gi,
|
||||
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)
|
||||
{ // Multi-line replacement - https://regex101.com/r/jB1uL1/1
|
||||
pattern: /.generic-variations\(unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
|
||||
replacement: "@include alert-variations(unquote($1), $3);\n",
|
||||
{ // Multi-line replacement - https://regex101.com/r/jB1uL1/2
|
||||
pattern: /.generic-variations\(unquote\(("([^"]+)?")\), unquote\(("([^"]+)?")\), (\$[\s\S]+?(?!\r|\n)), {$\n[\s\S]+}\);$\n/mg,
|
||||
replacement: "@include alert-variations(unquote($1), unquote($3), $5);\n",
|
||||
order: 250 // very broad search, do this last
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -539,14 +539,23 @@
|
|||
<a href="javascript:void(0)" class="btn btn-raised btn-xs">xs button</a>
|
||||
</p>
|
||||
|
||||
<h3>Floating action buttons</h3>
|
||||
<h3>Floating action buttons <small>a.k.a fab</small></h3>
|
||||
<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-primary btn-fab btn-raised "><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-info btn-fab btn-raised "><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-danger 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"><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>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,11 +55,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
//--
|
||||
// color variations
|
||||
&.btn-raised,
|
||||
&.btn-fab {
|
||||
.background-variations(~".btn", ~"", @mdb-btn-background-color);
|
||||
}
|
||||
|
||||
|
||||
//---
|
||||
// btn-raised
|
||||
&.btn-raised {
|
||||
.background-variations(~".btn", ~"", @mdb-btn-background-color);
|
||||
|
||||
&:not(.btn-link) {
|
||||
.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 {
|
||||
// see above for color variations
|
||||
border-radius: 50%;
|
||||
font-size: @mdb-btn-fab-font-size;
|
||||
height: @mdb-btn-fab-size;
|
||||
|
|
@ -117,29 +108,15 @@
|
|||
position: relative;
|
||||
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 {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.btn-fab-mini {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 13px 0;
|
||||
font-size: 15px;
|
||||
&.btn-fab-mini,
|
||||
.btn-group-sm & {
|
||||
height: @mdb-btn-fab-size-mini;
|
||||
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;
|
||||
|
|
@ -161,12 +138,30 @@
|
|||
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,
|
||||
.btn-group-vertical {
|
||||
// have to ratchet up the specificity to kill drop shadows on disabled raised buttons
|
||||
fieldset[disabled][disabled] &,
|
||||
&.disabled,
|
||||
|
|
@ -179,9 +174,10 @@
|
|||
color: fade(#FFFFFF, 30%);
|
||||
}
|
||||
|
||||
// flat buttons lose transparency
|
||||
background: transparent;
|
||||
|
||||
// no box-shadow on disabled
|
||||
// no box-shadow on raised - need specificity
|
||||
&.btn-raised,
|
||||
&.btn-group-raised {
|
||||
&,
|
||||
|
|
@ -202,6 +198,8 @@
|
|||
//border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
|
||||
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||
&.open {
|
||||
.dropdown-toggle {
|
||||
//box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import "@{mdb-dependency-packages}/bootstrap/less/variables.less";
|
||||
//@import "@{mdb-dependency-packages}/bootstrap/less/mixins.less";
|
||||
@import "../bower_components/bootstrap/less/variables.less";
|
||||
//@import "../bower_components/bootstrap/less/mixins.less";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
@import "_colors.less";
|
||||
|
||||
// Paths
|
||||
@mdb-dependency-packages: "../bower_components";
|
||||
|
||||
// Typography elements
|
||||
@mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
@mdb-text-color-light: ~"rgba(@{rgb-white}, 0.84)";
|
||||
|
|
@ -153,7 +150,7 @@
|
|||
|
||||
|
||||
@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-mini: 40px;
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
border-radius: 0;
|
||||
|
||||
// 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 {
|
||||
color: $darkbg-text;
|
||||
color: $mdb-text-color-light;
|
||||
}
|
||||
|
||||
&-default {
|
||||
a, .alert-link {
|
||||
color: $lightbg-text;
|
||||
color: $mdb-text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ body {
|
|||
&.inverse {
|
||||
background: #333333;
|
||||
&, .form-control {
|
||||
color: $darkbg-text;
|
||||
color: $mdb-text-color-light;
|
||||
}
|
||||
.modal,
|
||||
.panel-default,
|
||||
|
|
@ -22,8 +22,8 @@ body {
|
|||
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
|
||||
font-family: $mdb-font-family;
|
||||
font-weight: 300;
|
||||
//font-family: $font-family-sans-serif;
|
||||
//font-weight: 300;
|
||||
}
|
||||
|
||||
h5, h6{
|
||||
|
|
@ -32,6 +32,10 @@ h5, h6{
|
|||
|
||||
a, a:hover, a:focus {
|
||||
color: $brand-primary;
|
||||
|
||||
& .material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
|
|
@ -78,7 +82,6 @@ legend {
|
|||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
@include variations(unquote(" li a:hover"), color, $brand-primary);
|
||||
}
|
||||
|
||||
// Alerts
|
||||
|
|
@ -100,8 +103,6 @@ legend {
|
|||
|
||||
@import '_dialogs';
|
||||
|
||||
@import '_labels';
|
||||
|
||||
@import '_panels';
|
||||
|
||||
@import '_dividers';
|
||||
|
|
@ -116,8 +117,7 @@ legend {
|
|||
}
|
||||
|
||||
|
||||
@import '_themes';
|
||||
|
||||
// External plugins
|
||||
@import '_plugin-snackbarjs';
|
||||
@import '_plugin-nouislider';
|
||||
@import '_plugin-selectize';
|
||||
@import '_plugin-dropdownjs';
|
||||
@import '_plugins';
|
||||
|
|
|
|||
|
|
@ -1,154 +1,226 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@mixin btn-shadow(){
|
||||
@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();
|
||||
}
|
||||
}
|
||||
// specification: https://www.google.com/design/spec/components/buttons.html
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: 0;
|
||||
margin: 10px 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
@mixin typo-button($colorContrast: false){
|
||||
font-size: $mdb-btn-font-size-base;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: $darkbg-text;
|
||||
//line-height: 1;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:not(.btn-link):not(.btn-flat) {
|
||||
background-color: $btn-default;
|
||||
color: $lightbg-text;
|
||||
|
||||
&:not(.btn-fab) {
|
||||
&:hover {
|
||||
@include shadow-z-1();
|
||||
}
|
||||
&:active {
|
||||
@include shadow-z-1-hover();
|
||||
}
|
||||
}
|
||||
@if ($colorContrast) {
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
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,
|
||||
.input-group-btn .btn {
|
||||
&.btn-flat {
|
||||
background: none;
|
||||
border: 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;
|
||||
font-weight: 500;
|
||||
&:disabled {
|
||||
color: $text-disabled !important;
|
||||
|
||||
&:not(.btn-link) {
|
||||
&: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 {
|
||||
padding: 5px 20px;
|
||||
}
|
||||
&.btn-xs {
|
||||
padding: 4px 15px;
|
||||
font-size: 10px;
|
||||
//--
|
||||
// color variations
|
||||
&.btn-raised,
|
||||
&.btn-fab {
|
||||
@include background-variations(unquote(".btn"), unquote(""), $mdb-btn-background-color);
|
||||
}
|
||||
|
||||
|
||||
//---
|
||||
// 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 {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
font-size: 26px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
&, &:hover, &:active {
|
||||
@include variations(unquote(""), background-color, transparent);
|
||||
}
|
||||
&, &:hover {
|
||||
@include shadow-z-1();
|
||||
}
|
||||
&:active {
|
||||
@include shadow-z-1-hover();
|
||||
}
|
||||
&,
|
||||
// see above for color variations
|
||||
border-radius: 50%;
|
||||
font-size: $mdb-btn-fab-font-size;
|
||||
height: $mdb-btn-fab-size;
|
||||
margin: auto;
|
||||
min-width: $mdb-btn-fab-size;
|
||||
width: $mdb-btn-fab-size;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
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;
|
||||
line-height: normal;
|
||||
|
||||
.ripple-container {
|
||||
border-radius: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.btn-fab-mini {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 13px 0;
|
||||
font-size: 15px;
|
||||
|
||||
&.btn-fab-mini,
|
||||
.btn-group-sm & {
|
||||
height: $mdb-btn-fab-size-mini;
|
||||
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;
|
||||
top: -5px;
|
||||
margin: 0 auto;
|
||||
|
||||
i.material-icons {
|
||||
position: absolute;
|
||||
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-link, .btn:not([class*="btn-"]), .btn-default {
|
||||
color: $lightbg-text;
|
||||
&: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 {
|
||||
// btn-group variations
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
//border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
@include btn-shadow();
|
||||
&.open .dropdown-toggle {
|
||||
box-shadow: none;
|
||||
|
||||
// spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
|
||||
&.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 {
|
||||
@include btn-shadow();
|
||||
@include shadow-2dp();
|
||||
}
|
||||
.btn, .btn:active, .btn-group {
|
||||
box-shadow: none !important;
|
||||
|
||||
& .btn + .btn,
|
||||
.btn,
|
||||
.btn:active,
|
||||
.btn-group {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.btn-group-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
/**************************************************************************/
|
||||
|
||||
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-base;
|
||||
color: $mdb-card-body-text;
|
||||
background: $mdb-card-body-background;
|
||||
|
||||
|
|
|
|||
|
|
@ -48,8 +48,7 @@
|
|||
display: inline-block;
|
||||
width: $mdb-checkbox-size;
|
||||
height: $mdb-checkbox-size;
|
||||
border: 2px solid $mdb-checkbox-border-color;
|
||||
border-radius: 2px;
|
||||
border: $border-radius-base solid $mdb-checkbox-border-color;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -74,33 +73,51 @@
|
|||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
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] {
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple;
|
||||
}
|
||||
&:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff $mdb-checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn $mdb-checkbox-animation-ripple forwards;
|
||||
&:checked {
|
||||
|
||||
// FIXME: once working - combine further to reduce code
|
||||
& + .checkbox-material .check {
|
||||
color: $mdb-checkbox-checked-color;
|
||||
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
|
||||
|
|
@ -112,14 +129,9 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: $lightbg-text;
|
||||
background-color: $mdb-text-color-primary;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -328,7 +328,7 @@ $grey-100: #f5f5f5 !default;
|
|||
$grey-200: #eeeeee !default;
|
||||
$grey-300: #e0e0e0 !default;
|
||||
$grey-400: #bdbdbd !default;
|
||||
$grey-500: #9e9e9e !default;
|
||||
$grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default;
|
||||
$grey-600: #757575 !default;
|
||||
$grey-700: #616161 !default;
|
||||
$grey-800: #424242 !default;
|
||||
|
|
@ -357,6 +357,5 @@ $blue-grey-A700: #455a64 !default;
|
|||
$blue-grey: $blue-grey-500 !default;
|
||||
|
||||
|
||||
$black: #000000 !default;
|
||||
$white: #ffffff !default;
|
||||
$mdb-brand-inverse: $indigo !default;
|
||||
$black: #000000; $rgb-black: "0,0,0" !default;
|
||||
$white: #ffffff; $rgb-white: "255,255,255" !default;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
// --------------------------------------------------
|
||||
.modal-content {
|
||||
@include shadow-z-5();
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-base;
|
||||
border: none;
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,9 +2,22 @@
|
|||
|
||||
// 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);
|
||||
line-height: inherit;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// use something like this to generically style disabled and muted, etc based on color variables?
|
||||
//.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||
//.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;
|
||||
//}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
@import "#{$mdb-dependency-packages}/bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
||||
//@import "#{$mdb-dependency-packages}/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
|
||||
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables";
|
||||
//@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@
|
|||
|
||||
@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
|
||||
@mixin label-static($label-top, $static-font-size, $static-line-height){
|
||||
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
|
||||
&.label-placeholder:not(.is-empty){
|
||||
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-error, $brand-danger);
|
||||
@include form-group-validation-state(has-success, $brand-success);
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
outline: 10px solid rgba(0,0,0,.15);
|
||||
}
|
||||
.list-group-item-heading, .list-group-item-text {
|
||||
color: $lightbg-text;
|
||||
color: $mdb-text-color-primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,44 +11,44 @@
|
|||
|
||||
// variations(unquote(""), background-color, #FFF);
|
||||
@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) {
|
||||
//@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)}";
|
||||
//@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) {
|
||||
@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) {
|
||||
background-color: map-get($args, material-color);
|
||||
@if (map-get($args, material-color) == $btn-default) {
|
||||
color: $lightbg-text;
|
||||
background-color: map-get($args, variation-color);
|
||||
@if (map-get($args, variation-color) == $mdb-btn-background-color) {
|
||||
color: $mdb-text-color-primary;
|
||||
} @else {
|
||||
color: map-get($args, material-text-color);
|
||||
color: map-get($args, variation-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
//@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) {
|
||||
// color: map-get($args, material-color);
|
||||
// color: map-get($args, variation-color);
|
||||
//}
|
||||
//
|
||||
//@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) {
|
||||
// //@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);
|
||||
// background-color: contrast-color($variation-color,
|
||||
// darken($variation-color, $mdb-param-1),
|
||||
|
|
@ -56,42 +56,42 @@
|
|||
//}
|
||||
//
|
||||
//@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) {
|
||||
// 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
|
||||
//@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){
|
||||
// $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));
|
||||
//}
|
||||
//
|
||||
//// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
|
||||
//@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){
|
||||
// $variation-color: map-get($args, material-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)}";
|
||||
// $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, 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);
|
||||
//}
|
||||
|
||||
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
|
||||
@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){
|
||||
$variation-color: map-get($args, material-color);
|
||||
$variation-color-text: map-get($args, material-text-color);
|
||||
$variation-color: map-get($args, variation-color);
|
||||
$variation-color-text: map-get($args, variation-color-text);
|
||||
|
||||
background-color: $variation-color;
|
||||
color: $variation-color-text;
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-radius: $mdb-dropdown-radius;
|
||||
border-radius: $border-radius-base;
|
||||
li > a {
|
||||
font-size: $mdb-dropdown-font-size;
|
||||
padding: 13px 16px;
|
||||
|
|
@ -130,8 +130,8 @@
|
|||
}
|
||||
|
||||
@mixin alert-variations-content($args){
|
||||
$variation-color: map-get($args, material-color);
|
||||
$variation-color-text: map-get($args, material-text-color);
|
||||
$variation-color: map-get($args, variation-color);
|
||||
$variation-color-text: map-get($args, variation-color-text);
|
||||
|
||||
background-color: $variation-color;
|
||||
color: $variation-color-text;
|
||||
|
|
@ -192,67 +192,51 @@
|
|||
&#{$component}-default#{$selector-suffix} {
|
||||
|
||||
$args-extra: map-merge($args, (
|
||||
//material-color-name: "default",
|
||||
//material-color-full-name: "default",
|
||||
material-color: $color-default,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $color-default,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-extra);
|
||||
}
|
||||
&#{$component}-inverse#{$selector-suffix} {
|
||||
$args-inverse: map-merge($args, (
|
||||
//material-color-name: "inverse",
|
||||
//material-color-full-name: "inverse",
|
||||
material-color: $mdb-brand-inverse,
|
||||
material-text-color: contrast-color($mdb-brand-inverse, $lightbg-text, $darkbg-text)
|
||||
variation-color: $mdb-brand-inverse,
|
||||
variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
|
||||
));
|
||||
@include call-variations-content-mixin($args-inverse);
|
||||
}
|
||||
&#{$component}-primary#{$selector-suffix} {
|
||||
$args-primary: map-merge($args, (
|
||||
//material-color-name: "primary",
|
||||
//material-color-full-name: "primary",
|
||||
material-color: $brand-primary,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $brand-primary,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-primary);
|
||||
}
|
||||
&#{$component}-success#{$selector-suffix} {
|
||||
$args-success: map-merge($args, (
|
||||
//material-color-name: "success",
|
||||
//material-color-full-name: "success",
|
||||
material-color: $brand-success,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $brand-success,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-success);
|
||||
}
|
||||
&#{$component}-info#{$selector-suffix} {
|
||||
$args-info: map-merge($args, (
|
||||
//material-color-name: "info",
|
||||
//material-color-full-name: "info",
|
||||
material-color: $brand-info,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $brand-info,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-info);
|
||||
}
|
||||
&#{$component}-warning#{$selector-suffix} {
|
||||
$args-warning: map-merge($args, (
|
||||
//material-color-name: "warning",
|
||||
//material-color-full-name: "warning",
|
||||
material-color: $brand-warning,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $brand-warning,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-warning);
|
||||
}
|
||||
&#{$component}-danger#{$selector-suffix} {
|
||||
$args-danger: map-merge($args, (
|
||||
//material-color-name: "danger",
|
||||
//material-color-full-name: "danger",
|
||||
material-color: $brand-danger,
|
||||
material-text-color: $darkbg-text
|
||||
variation-color: $brand-danger,
|
||||
variation-color-text: $mdb-text-color-light
|
||||
));
|
||||
@include call-variations-content-mixin($args-danger);
|
||||
}
|
||||
}
|
||||
|
||||
//$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
.navbar {
|
||||
background-color: $brand-primary;
|
||||
border: $zero;
|
||||
border-radius: $zero;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
.navbar-brand {
|
||||
position: relative;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
// Darken the responsive nav toggle
|
||||
.navbar-toggle {
|
||||
border: $zero;
|
||||
border: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
// Dropdowns get custom display
|
||||
.open .dropdown-menu {
|
||||
> .dropdown-header {
|
||||
border: $zero;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.divider {
|
||||
|
|
@ -187,7 +187,8 @@
|
|||
}
|
||||
|
||||
// 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 {
|
||||
background-color: $indigo;
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@
|
|||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
[class*="panel-"] > .panel-heading {
|
||||
color: $darkbg-text;
|
||||
color: $mdb-text-color-light;
|
||||
border: 0;
|
||||
}
|
||||
.panel-default, .panel:not([class*="panel-"]) {
|
||||
> .panel-heading {
|
||||
color: $lightbg-text;
|
||||
color: $mdb-text-color-primary;
|
||||
}
|
||||
}
|
||||
.panel-footer {
|
||||
|
|
|
|||
7
sass/_plugins.scss
Normal file
7
sass/_plugins.scss
Normal 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';
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
line-height: 1em;
|
||||
background: $mdb-popover-background;
|
||||
border: none;
|
||||
border-radius: $mdb-border-radius;
|
||||
border-radius: $border-radius-base;
|
||||
@include shadow-z-1();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
background: #c8c8c8;
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
@include variations(unquote(""), background-color, $brand-primary);
|
||||
@include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
display: block;
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: $lightbg-text;
|
||||
background-color: $mdb-text-color-primary;
|
||||
left: -18px;
|
||||
top: -18px;
|
||||
height: 50px;
|
||||
|
|
@ -50,8 +50,14 @@
|
|||
}
|
||||
|
||||
}
|
||||
@include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $mdb-radio-default);
|
||||
@include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $mdb-radio-default);
|
||||
& input[type=radio]:checked {
|
||||
& ~ .check {
|
||||
background-color: $mdb-radio-default;
|
||||
}
|
||||
& ~ .circle {
|
||||
border-color: $mdb-radio-default;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio][disabled] ~ .check,
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
|
|
@ -68,10 +74,10 @@
|
|||
transform: scale3d(0.55, 0.55, 1);
|
||||
}
|
||||
input[type=radio][disabled] ~ .circle {
|
||||
border-color: $lightbg-text;
|
||||
border-color: $mdb-text-color-primary;
|
||||
}
|
||||
input[type=radio][disabled] ~ .check {
|
||||
background-color: $lightbg-text;
|
||||
background-color: $mdb-text-color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,83 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@mixin shadow-z-1 {
|
||||
@mixin shadow-z-1(){
|
||||
box-shadow:
|
||||
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:
|
||||
0 5px 11px 0 rgba(0, 0, 0, 0.18),
|
||||
0 4px 15px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@mixin shadow-z-2 {
|
||||
@mixin shadow-z-2(){
|
||||
box-shadow:
|
||||
0 8px 17px 0 rgba(0, 0, 0, 0.2),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-3 {
|
||||
@mixin shadow-z-3(){
|
||||
box-shadow:
|
||||
0 12px 15px 0 rgba(0, 0, 0, 0.24),
|
||||
0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
|
||||
@mixin shadow-z-4 {
|
||||
@mixin shadow-z-4(){
|
||||
box-shadow:
|
||||
0 16px 28px 0 rgba(0, 0, 0, 0.22),
|
||||
0 25px 55px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
|
||||
@mixin shadow-z-5 {
|
||||
@mixin shadow-z-5(){
|
||||
box-shadow:
|
||||
0 27px 24px 0 rgba(0, 0, 0, 0.2),
|
||||
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
8
sass/_themes.scss
Normal 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 {
|
||||
|
||||
}
|
||||
|
|
@ -42,27 +42,38 @@
|
|||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled] + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
input[type=checkbox] {
|
||||
// Handle disabled
|
||||
&[disabled] {
|
||||
& + .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,
|
||||
input[type=checkbox][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);
|
||||
}
|
||||
input[type=checkbox]:checked + .toggle:after {
|
||||
left: 15px;
|
||||
|
||||
& label input[type=checkbox]:checked {
|
||||
& + .toggle {
|
||||
background-color: rgba($brand-primary, (50/100)); // Switch bg on
|
||||
}
|
||||
|
||||
& + .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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,15 @@
|
|||
|
||||
@import '_colors';
|
||||
|
||||
// Material Global vars
|
||||
$zero: 0 !default;
|
||||
|
||||
// Typography elements
|
||||
$mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
// material icons path
|
||||
$mdb-font-path: "../fonts" !default;
|
||||
|
||||
// Typography elements for Material
|
||||
$darkbg-text: rgba(255,255,255,0.84) !default;
|
||||
$lightbg-text: rgba(0,0,0,0.84) !default;
|
||||
$mdb-text-color-light: unquote("rgba(#{$rgb-white}, 0.84)") !default;
|
||||
$mdb-text-color-light-hex: $white !default; // for contrast function in inverse
|
||||
$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
|
||||
$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
|
||||
$icon-color: rgba(0,0,0,0.5) !default;
|
||||
|
||||
|
||||
// import bs variables for less, last declared wins.
|
||||
@import '_import-bs-less';
|
||||
|
||||
|
|
@ -28,23 +24,38 @@ $brand-danger: $red !default;
|
|||
$brand-warning: $deep-orange !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;
|
||||
//---
|
||||
|
||||
// import bs variables for sass, first declared wins.
|
||||
@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: these need to either a) be converted to $mdb- or b) converted to bs variables
|
||||
$contrast-factor: 40% !default;
|
||||
$btn-default: transparent !default;
|
||||
$btn-default-text: $lightbg-text !default;
|
||||
//---
|
||||
|
||||
|
||||
$mdb-radio-default: $lightbg-text !default;
|
||||
$mdb-border-radius: 2px !default;
|
||||
$mdb-radio-default: $mdb-text-color-primary !default;
|
||||
|
||||
// --------------------
|
||||
// inputs
|
||||
|
|
@ -84,9 +95,9 @@ $mdb-label-top-margin-small: 12px !default;
|
|||
$mdb-input-padding-xs-vertical: 2px !default; // 1
|
||||
$mdb-input-padding-xs-horizontal: 0px !default; // 5
|
||||
|
||||
$mdb-input-border-radius-base: 4px !default;
|
||||
$mdb-input-border-radius-large: 6px !default;
|
||||
$mdb-input-border-radius-small: 3px !default;
|
||||
$mdb-input-border-radius-base: 0 !default;
|
||||
$mdb-input-border-radius-large: 0 !default;
|
||||
$mdb-input-border-radius-small: 0 !default;
|
||||
|
||||
|
||||
//** Default `.form-control` height
|
||||
|
|
@ -100,7 +111,7 @@ $mdb-input-height-small: (floor($mdb-input-font-size-small * $mdb-in
|
|||
|
||||
|
||||
// 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-image-headline: #fff !default;
|
||||
|
||||
|
|
@ -120,7 +131,6 @@ $mdb-popover-background: rgba(101, 101, 101, 0.9) !default;
|
|||
$mdb-popover-color: #ececec !default;
|
||||
|
||||
// Dropdown Menu
|
||||
$mdb-dropdown-radius: 2px !default;
|
||||
$mdb-dropdown-font-size: 16px !default;
|
||||
|
||||
// Toggle
|
||||
|
|
@ -129,3 +139,29 @@ $mdb-toggle-label-color: $mdb-checkbox-label-color !default;
|
|||
// Radio:
|
||||
$mdb-radio-label-color: $mdb-checkbox-label-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;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
// 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 {
|
||||
padding: 10px;
|
||||
}
|
||||
.well.well-lg {
|
||||
padding: 26px;
|
||||
}
|
||||
.well, .jumbotron {
|
||||
|
||||
background-color: #fff;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
@include shadow-z-2();
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
p {
|
||||
font-weight: 300;
|
||||
.well.well-sm {
|
||||
padding: 10px;
|
||||
}
|
||||
.well.well-lg {
|
||||
padding: 26px;
|
||||
}
|
||||
.well,
|
||||
.jumbotron {
|
||||
|
||||
background-color: #fff;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
@include shadow-z-2();
|
||||
border-radius: $border-radius-base;
|
||||
border: 0;
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
@include variations(unquote(""), unquote(""), background-color, $white);
|
||||
}
|
||||
@include variations(unquote(""), background-color, #FFF);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
}
|
||||
}
|
||||
.noUi-target {
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-base;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
height: 2px;
|
||||
|
|
@ -105,8 +105,8 @@
|
|||
}
|
||||
|
||||
.slider {
|
||||
@include variations(unquote(".noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-handle"), background-color, $brand-primary);
|
||||
@include variations(unquote(" .noUi-handle"), border-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(".noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-connect"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-handle"), background-color, $brand-primary);
|
||||
@include variations(unquote(".slider"), unquote(" .noUi-handle"), border-color, $brand-primary);
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
height: auto;
|
||||
background-color: #FFF;
|
||||
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;
|
||||
margin-top: 3px;
|
||||
.active {
|
||||
|
|
@ -6,9 +6,9 @@
|
|||
.snackbar {
|
||||
// Style
|
||||
background-color: #323232;
|
||||
color: $darkbg-text;
|
||||
color: $mdb-text-color-light;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
border-radius: $border-radius-base;
|
||||
@include shadow-z-1;
|
||||
|
||||
// Animation
|
||||
Loading…
Reference in New Issue
Block a user