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

Merge pull request #714 from rosskevin/scss-conversion

Browse Source 
Automated sass conversion
This commit is contained in:
Fez Vrasta 2015-11-06 15:35:05 +01:00
commit 5f654153bd
69 changed files with 7396 additions and 31565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -11,3 +11,5 @@ Thumbs.db
/bower_components/ /bower_components/
.build* .build*
/_SpecRunner.html /_SpecRunner.html
Gemfile.lock
dist/sassc

1
.ruby-gemset Normal file
View File

@ -0,0 +1 @@
bootstrap-material-design

1
.ruby-version Normal file
View File

@ -0,0 +1 @@
2.2.2

3
Gemfile Normal file
View File

@ -0,0 +1,3 @@
source 'https://rubygems.org'
gem 'sass'

150
Gruntfile.js
View File

@ -1,10 +1,125 @@
module.exports = function(grunt) { module.exports = function (grunt) {
"use strict"; "use strict";
require("load-grunt-tasks")(grunt); require("load-grunt-tasks")(grunt);
grunt.initConfig({ grunt.initConfig({
// Convert from less to sass
lessToSass: {
convert: {
files: [{
expand: true,
cwd: "less",
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less"],
ext: ".scss",
dest: "sass"
}],
options: {
replacements: [
// convert all shadow mixins
{ // https://regex101.com/r/sJ2lH4/1
pattern: /.shadow-z-(\d+)((?:-hover)?) {/gi,
replacement: "@mixin shadow-z-$1$2 {",
order: 2
},
// bad conversions of .shadow-z-*
{ // https://regex101.com/r/pV0yB0/3
pattern: /\.shadow-z-(\d+)((?:-hover)?)(?:\(\))?;/gi,
replacement: "@include shadow-z-$1$2;",
order: 2
},
// bad conversions to @include instead of @extend
{
pattern: /@include (foo1|foo2)\(\);/gi,
replacement: "@extend .$1;",
order: 2
},
// hack - (no conditional replacements)
{ // https://regex101.com/r/pV0yB0/2
pattern: /@extend @extend/gi,
replacement: "@extend",
order: 10
},
// 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
},
// 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-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
},
// fix calc references
{ // https://regex101.com/r/aZ8iI5/1
pattern: /calc\(unquote\("([^"]+)"\)\)/gi,
replacement: "calc($1)",
order: 24
},
// 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",
order: 250 // very broad search, do this last
},
// auto generated notice
{ // Multi-line replacement - https://regex101.com/r/aR2kT5/1
pattern: /([\s\S]+)/mg,
replacement: "\/\/ This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.\n\n$1",
order: 1000 // very broad search, do this last
},
]
}
}
},
// Test compile sass
sass: {
compile: {
files: [{
expand: true,
cwd: "sass",
//src: ['material.scss', 'material-fullpalette.scss', 'ripples.scss', 'roboto.scss'],
src: ["material.scss", "material-fullpalette.scss", "roboto.scss", "ripples.scss"],
dest: "dist/sassc", // added to gitignore, only used for local testing
ext: ".css"
}]
}
},
// Compile less to .css // Compile less to .css
// Compile less to .min.css // Compile less to .min.css
@ -192,7 +307,7 @@ module.exports = function(grunt) {
reporter: require("jshint-stylish") reporter: require("jshint-stylish")
}, },
all: [ all: [
"Gruntfile.js", //"Gruntfile.js", regex lines are too long for desired style guide.
"scripts/**/*.js", "scripts/**/*.js",
"template/**/*.js", "template/**/*.js",
"!template/**/*.min.js" "!template/**/*.min.js"
@ -214,8 +329,12 @@ module.exports = function(grunt) {
tasks: ["newer:jshint:test", "jasmine"] tasks: ["newer:jshint:test", "jasmine"]
}, },
less: { less: {
files:["less/**/*.less"], files: ["less/**/*.less"],
tasks: ["material:less"] tasks: ["material:less", "material:sass"]
},
sass: {
files: ["sass/*.scss"],
tasks: ["material:sass"]
}, },
livereload: { livereload: {
options: { options: {
@ -249,8 +368,8 @@ module.exports = function(grunt) {
"meteor-publish": { "meteor-publish": {
command: [ command: [
"ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js", "ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js",
"do cp $PACKAGE_FILE ./package.js && meteor publish $@", "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
"ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done", "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
"exit $ALL_EXIT_CODE" "exit $ALL_EXIT_CODE"
].join(";") ].join(";")
} }
@ -258,12 +377,21 @@ module.exports = function(grunt) {
}); });
grunt.loadNpmTasks("grunt-less-to-sass");
grunt.registerTask("default", ["material", "ripples"]); grunt.registerTask("default", ["material", "ripples"]);
grunt.registerTask("material", [ grunt.registerTask("material", [
"material:less", "material:less",
"material:js" "material:js",
"material:sass"
]); ]);
grunt.registerTask("material:sass", [
"lessToSass:convert",
"sass:compile"
]);
grunt.registerTask("material:less", [ grunt.registerTask("material:less", [
"less:material", "less:material",
"less:materialfullpalette", "less:materialfullpalette",
@ -294,7 +422,7 @@ module.exports = function(grunt) {
"uglify:ripples" "uglify:ripples"
]); ]);
grunt.registerTask("build", function() { grunt.registerTask("build", function () {
grunt.task.run(["newer:jshint", "default"]); grunt.task.run(["newer:jshint", "default"]);
}); });
@ -303,13 +431,13 @@ module.exports = function(grunt) {
"connect:test:keepalive" "connect:test:keepalive"
]); ]);
grunt.registerTask("serve", function(target){ grunt.registerTask("serve", function (target) {
var buildTarget = "material:less"; var buildTarget = "material:less";
if(target && target === "scss") { if (target && target === "scss") {
buildTarget = "scss"; buildTarget = "scss";
} }
grunt.task.run([ grunt.task.run([
"build:"+ buildTarget, "build:" + buildTarget,
"connect:livereload", "connect:livereload",
"watch" "watch"
]); ]);

2355
bootstrap-elements-sass.html Normal file
View File

File diff suppressed because it is too large Load Diff

29894
dist/css/material-fullpalette.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

181
dist/css/material.css vendored
View File

@ -2552,6 +2552,24 @@ Then, run this script to get the list.
.mdi-toggle-star:before { .mdi-toggle-star:before {
content: "\e8f5"; content: "\e8f5";
} }
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
body { body {
background-color: #eeeeee; background-color: #eeeeee;
} }
@ -3327,89 +3345,89 @@ body .jumbotron-material-blue-grey,
.btn-material-blue-grey.active:not(.btn-link):not(.btn-flat) { .btn-material-blue-grey.active:not(.btn-link):not(.btn-flat) {
background-color: #6e8d9b; background-color: #6e8d9b;
} }
.btn.btn-flat:hover:not(.btn-ink), .btn.btn-flat:hover:not(.btn-link),
.btn-default.btn-flat:hover:not(.btn-ink) { .btn-default.btn-flat:hover:not(.btn-link) {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.btn-black.btn-flat:hover:not(.btn-ink) { .btn-black.btn-flat:hover:not(.btn-link) {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.btn-white.btn-flat:hover:not(.btn-ink) { .btn-white.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
.btn-inverse.btn-flat:hover:not(.btn-ink) { .btn-inverse.btn-flat:hover:not(.btn-link) {
background-color: rgba(63, 81, 181, 0.2); background-color: rgba(63, 81, 181, 0.2);
} }
.btn-primary.btn-flat:hover:not(.btn-ink) { .btn-primary.btn-flat:hover:not(.btn-link) {
background-color: rgba(0, 150, 136, 0.2); background-color: rgba(0, 150, 136, 0.2);
} }
.btn-success.btn-flat:hover:not(.btn-ink) { .btn-success.btn-flat:hover:not(.btn-link) {
background-color: rgba(76, 175, 80, 0.2); background-color: rgba(76, 175, 80, 0.2);
} }
.btn-info.btn-flat:hover:not(.btn-ink) { .btn-info.btn-flat:hover:not(.btn-link) {
background-color: rgba(3, 169, 244, 0.2); background-color: rgba(3, 169, 244, 0.2);
} }
.btn-warning.btn-flat:hover:not(.btn-ink) { .btn-warning.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 87, 34, 0.2); background-color: rgba(255, 87, 34, 0.2);
} }
.btn-danger.btn-flat:hover:not(.btn-ink) { .btn-danger.btn-flat:hover:not(.btn-link) {
background-color: rgba(244, 67, 54, 0.2); background-color: rgba(244, 67, 54, 0.2);
} }
.btn-material-red.btn-flat:hover:not(.btn-ink) { .btn-material-red.btn-flat:hover:not(.btn-link) {
background-color: rgba(244, 67, 54, 0.2); background-color: rgba(244, 67, 54, 0.2);
} }
.btn-material-pink.btn-flat:hover:not(.btn-ink) { .btn-material-pink.btn-flat:hover:not(.btn-link) {
background-color: rgba(233, 30, 99, 0.2); background-color: rgba(233, 30, 99, 0.2);
} }
.btn-material-purple.btn-flat:hover:not(.btn-ink) { .btn-material-purple.btn-flat:hover:not(.btn-link) {
background-color: rgba(156, 39, 176, 0.2); background-color: rgba(156, 39, 176, 0.2);
} }
.btn-material-deep-purple.btn-flat:hover:not(.btn-ink) { .btn-material-deep-purple.btn-flat:hover:not(.btn-link) {
background-color: rgba(103, 58, 183, 0.2); background-color: rgba(103, 58, 183, 0.2);
} }
.btn-material-indigo.btn-flat:hover:not(.btn-ink) { .btn-material-indigo.btn-flat:hover:not(.btn-link) {
background-color: rgba(63, 81, 181, 0.2); background-color: rgba(63, 81, 181, 0.2);
} }
.btn-material-blue.btn-flat:hover:not(.btn-ink) { .btn-material-blue.btn-flat:hover:not(.btn-link) {
background-color: rgba(33, 150, 243, 0.2); background-color: rgba(33, 150, 243, 0.2);
} }
.btn-material-light-blue.btn-flat:hover:not(.btn-ink) { .btn-material-light-blue.btn-flat:hover:not(.btn-link) {
background-color: rgba(3, 169, 244, 0.2); background-color: rgba(3, 169, 244, 0.2);
} }
.btn-material-cyan.btn-flat:hover:not(.btn-ink) { .btn-material-cyan.btn-flat:hover:not(.btn-link) {
background-color: rgba(0, 188, 212, 0.2); background-color: rgba(0, 188, 212, 0.2);
} }
.btn-material-teal.btn-flat:hover:not(.btn-ink) { .btn-material-teal.btn-flat:hover:not(.btn-link) {
background-color: rgba(0, 150, 136, 0.2); background-color: rgba(0, 150, 136, 0.2);
} }
.btn-material-green.btn-flat:hover:not(.btn-ink) { .btn-material-green.btn-flat:hover:not(.btn-link) {
background-color: rgba(76, 175, 80, 0.2); background-color: rgba(76, 175, 80, 0.2);
} }
.btn-material-light-green.btn-flat:hover:not(.btn-ink) { .btn-material-light-green.btn-flat:hover:not(.btn-link) {
background-color: rgba(139, 195, 74, 0.2); background-color: rgba(139, 195, 74, 0.2);
} }
.btn-material-lime.btn-flat:hover:not(.btn-ink) { .btn-material-lime.btn-flat:hover:not(.btn-link) {
background-color: rgba(205, 220, 57, 0.2); background-color: rgba(205, 220, 57, 0.2);
} }
.btn-material-yellow.btn-flat:hover:not(.btn-ink) { .btn-material-yellow.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 235, 59, 0.2); background-color: rgba(255, 235, 59, 0.2);
} }
.btn-material-amber.btn-flat:hover:not(.btn-ink) { .btn-material-amber.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 193, 7, 0.2); background-color: rgba(255, 193, 7, 0.2);
} }
.btn-material-orange.btn-flat:hover:not(.btn-ink) { .btn-material-orange.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 152, 0, 0.2); background-color: rgba(255, 152, 0, 0.2);
} }
.btn-material-deep-orange.btn-flat:hover:not(.btn-ink) { .btn-material-deep-orange.btn-flat:hover:not(.btn-link) {
background-color: rgba(255, 87, 34, 0.2); background-color: rgba(255, 87, 34, 0.2);
} }
.btn-material-brown.btn-flat:hover:not(.btn-ink) { .btn-material-brown.btn-flat:hover:not(.btn-link) {
background-color: rgba(121, 85, 72, 0.2); background-color: rgba(121, 85, 72, 0.2);
} }
.btn-material-grey.btn-flat:hover:not(.btn-ink) { .btn-material-grey.btn-flat:hover:not(.btn-link) {
background-color: rgba(158, 158, 158, 0.2); background-color: rgba(158, 158, 158, 0.2);
} }
.btn-material-blue-grey.btn-flat:hover:not(.btn-ink) { .btn-material-blue-grey.btn-flat:hover:not(.btn-link) {
background-color: rgba(96, 125, 139, 0.2); background-color: rgba(96, 125, 139, 0.2);
} }
.btn.btn-flat { .btn.btn-flat {
@ -5134,91 +5152,6 @@ fieldset[disabled] .form-control.focus:disabled,
.form-group-material-blue-grey .form-control:focus { .form-group-material-blue-grey .form-control:focus {
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2); background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
} }
.form-group .form-control.focus,
.form-group-default .form-control.focus {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-black .form-control.focus {
background-image: linear-gradient(#000000, #000000), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-white .form-control.focus {
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-inverse .form-control.focus {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-primary .form-control.focus {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-success .form-control.focus {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-info .form-control.focus {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-warning .form-control.focus {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-danger .form-control.focus {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-red .form-control.focus {
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-pink .form-control.focus {
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-purple .form-control.focus {
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-deep-purple .form-control.focus {
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-indigo .form-control.focus {
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-blue .form-control.focus {
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-light-blue .form-control.focus {
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-cyan .form-control.focus {
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-teal .form-control.focus {
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-green .form-control.focus {
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-light-green .form-control.focus {
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-lime .form-control.focus {
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-yellow .form-control.focus {
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-amber .form-control.focus {
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-orange .form-control.focus {
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-deep-orange .form-control.focus {
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-brown .form-control.focus {
background-image: linear-gradient(#795548, #795548), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-grey .form-control.focus {
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group-material-blue-grey .form-control.focus {
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
}
.form-group .control-label, .form-group .control-label,
.form-group-default .control-label { .form-group-default .control-label {
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
@ -8394,7 +8327,7 @@ hr.on-light {
top: 3px; top: 3px;
font-size: 25px; font-size: 25px;
position: absolute; position: absolute;
content: "\e894"; content: "\e8ac";
font-family: "Material-Design-Icons"; font-family: "Material-Design-Icons";
speak: none; speak: none;
font-style: normal; font-style: normal;
@ -8407,22 +8340,4 @@ hr.on-light {
pointer-events: none; pointer-events: none;
color: #757575; color: #757575;
} }
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
/*# sourceMappingURL=material.css.map */ /*# sourceMappingURL=material.css.map */

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

45
dist/css/roboto.css vendored
View File

@ -1,25 +1,62 @@
/*
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
Then, run this script to get the list.
(function() {
var colors = {}, main = {};
$(".color-group").each(function() {
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
colors[color] = {};
$(this).find(".color").not(".main-color").each(function() {
var shade = $(this).find(".shade").text().trim(),
hex = $(this).find(".hex").text().trim();
colors[color][shade] = hex;
});
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
});
var LESS = "";
$.each(colors, function(name, shades) {
LESS += "\n\n";
$.each(shades, function(shade, hex) {
LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
});
if (main[name]) {
LESS += "@" + name + ": " + main[name] + ";\n";
}
});
console.log(LESS);
})();
*/
@font-face { @font-face {
font-family: 'RobotoDraft'; font-family: 'RobotoDraft';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(../fonts/RobotoDraftRegular.woff2) format('woff2'), url(../fonts/RobotoDraftRegular.woff) format('woff'); src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url('../fonts/RobotoDraftRegular.woff2') format('woff2'), url('../fonts/RobotoDraftRegular.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'RobotoDraft'; font-family: 'RobotoDraft';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(../fonts/RobotoDraftMedium.woff2) format('woff2'), url(../fonts/RobotoDraftMedium.woff) format('woff'); src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url('../fonts/RobotoDraftMedium.woff2') format('woff2'), url('../fonts/RobotoDraftMedium.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'RobotoDraft'; font-family: 'RobotoDraft';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(../fonts/RobotoDraftBold.woff2) format('woff2'), url(../fonts/RobotoDraftBold.woff) format('woff'); src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url('../fonts/RobotoDraftBold.woff2') format('woff2'), url('../fonts/RobotoDraftBold.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'RobotoDraft'; font-family: 'RobotoDraft';
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(../fonts/RobotoDraftItalic.woff2) format('woff2'), url(../fonts/RobotoDraftItalic.woff) format('woff'); src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url('../fonts/RobotoDraftItalic.woff2') format('woff2'), url('../fonts/RobotoDraftItalic.woff') format('woff');
} }
/*# sourceMappingURL=roboto.css.map */ /*# sourceMappingURL=roboto.css.map */

2
dist/css/roboto.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/roboto.min.css.map vendored
View File

@ -1 +1 @@
{"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAAA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 400;\n //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n src: local('RobotoDraft'),\n local('RobotoDraft-Regular'),\n local('Roboto-Regular'),\n url(../fonts/RobotoDraftRegular.woff2) format('woff2'),\n url(../fonts/RobotoDraftRegular.woff) format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 500;\n //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n src: local('RobotoDraft Medium'),\n local('RobotoDraft-Medium'),\n local('Roboto-Medium'),\n url(../fonts/RobotoDraftMedium.woff2) format('woff2'),\n url(../fonts/RobotoDraftMedium.woff) format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 700;\n //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n src: local('RobotoDraft Bold'),\n local('RobotoDraft-Bold'),\n local('Roboto-Bold'),\n url(../fonts/RobotoDraftBold.woff2) format('woff2'),\n url(../fonts/RobotoDraftBold.woff) format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: italic;\n font-weight: 400;\n //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n src: local('RobotoDraft Italic'),\n local('RobotoDraft-Italic'),\n local('Roboto-Italic'),\n url(../fonts/RobotoDraftItalic.woff2) format('woff2'),\n url(../fonts/RobotoDraftItalic.woff) format('woff');\n}\n"]} {"version":3,"sources":["/less/roboto.less"],"names":[],"mappings":"AAGA,WACE,wBAIA,CAAA,yLAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,4LAAA,CAAA,UAQA,wBAEA,CAAA,eAEA,CAAA,kLAAA,CAAA,UAQA,wBACA,CAAA,iBAGA,CAAA,4LAAA,CAAA","file":"roboto.min.css","sourcesContent":["@import \"_colors.less\";\n@import \"_variables.less\";\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 400;\n //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');\n src: local('RobotoDraft'),\n local('RobotoDraft-Regular'),\n local('Roboto-Regular'),\n url('@{material-font-path}/RobotoDraftRegular.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftRegular.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 500;\n //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');\n src: local('RobotoDraft Medium'),\n local('RobotoDraft-Medium'),\n local('Roboto-Medium'),\n url('@{material-font-path}/RobotoDraftMedium.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftMedium.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: normal;\n font-weight: 700;\n //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');\n src: local('RobotoDraft Bold'),\n local('RobotoDraft-Bold'),\n local('Roboto-Bold'),\n url('@{material-font-path}/RobotoDraftBold.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftBold.woff') format('woff');\n}\n\n@font-face {\n font-family: 'RobotoDraft';\n font-style: italic;\n font-weight: 400;\n //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');\n src: local('RobotoDraft Italic'),\n local('RobotoDraft-Italic'),\n local('Roboto-Italic'),\n url('@{material-font-path}/RobotoDraftItalic.woff2') format('woff2'),\n url('@{material-font-path}/RobotoDraftItalic.woff') format('woff');\n}\n"]}

2
dist/js/material.min.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","attachInputEventHandlers","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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"} {"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","attachInputEventHandlers","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

2
dist/js/ripples.min.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"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"} {"version":3,"sources":["ripples.js"],"names":["$","window","document","undefined","Ripples","element","options","self","this","extend","defaults","_defaults","_name","ripples","init","prototype","$element","on","event","isTouch","type","find","append","$wrapper","children","relY","getRelY","relX","getRelX","rippleColor","getRipplesColor","$ripple","addClass","css","left","top","background-color","getComputedStyle","opacity","rippleOn","setTimeout","rippleEnd","data","rippleOut","getNewSize","Math","max","outerWidth","outerHeight","wrapperOffset","offset","originalEvent","touches","length","pageX","pageY","color","hasTransitionSupport","thisBody","body","documentElement","thisStyle","style","support","transition","WebkitTransition","MozTransition","MsTransition","OTransition","test","navigator","userAgent","off","animate","trigger","remove","size","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","fn","each","jQuery"],"mappings":"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","file":"ripples.min.js"}

1575
index-sass.html Normal file
View File

File diff suppressed because it is too large Load Diff

2
index.html
View File

@ -145,7 +145,7 @@
<ul> <ul>
<li class="active withripple" data-target="#about">Material Design for Bootstrap</li> <li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
<li class="withripple" data-target="#getting-started">Getting Started</li> <li class="withripple" data-target="#getting-started">Getting Started</li>
<li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li> <li><a href="bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
<li class="withripple" data-target="#material-colors">Material Colors</li> <li class="withripple" data-target="#material-colors">Material Colors</li>
<li class="withripple" data-target="#checkbox">Checkbox</li> <li class="withripple" data-target="#checkbox">Checkbox</li>
<li class="withripple" data-target="#radio-button">Radio Button</li> <li class="withripple" data-target="#radio-button">Radio Button</li>

1
less/_alerts.less
View File

@ -2,6 +2,7 @@
border: 0px; border: 0px;
border-radius: 0; border-radius: 0;
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
.generic-variations(~"", @darkbg-text, { .generic-variations(~"", @darkbg-text, {
background-color: @material-color; background-color: @material-color;
color: @material-text-color; color: @material-text-color;

22
less/_buttons.less
View File

@ -1,3 +1,11 @@
.btn-shadow() {
.shadow-z-1();
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
.shadow-z-1-hover();
}
}
.btn { .btn {
position: relative; position: relative;
padding: 8px 30px; padding: 8px 30px;
@ -24,19 +32,23 @@
.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default); .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
// BTN hover effect // BTN hover effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor); background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor);
}); });
// BTN active effect // BTN active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor); background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
}); });
// BTN .active effect // BTN .active effect
// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
.generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, { .generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor); background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
}); });
// BTN flat hover effect // BTN flat hover effect
.generic-variations(~".btn-flat:hover:not(.btn-ink)", @btn-default, { // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
.generic-variations(~".btn-flat:hover:not(.btn-link)", @btn-default, {
background-color: fade(@material-color, 20%); background-color: fade(@material-color, 20%);
}); });
@ -135,11 +147,3 @@
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-shadow() {
.shadow-z-1();
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
.shadow-z-1-hover();
}
}

2
less/_dividers.less
View File

@ -12,7 +12,7 @@ hr {
(-o-device-pixel-ratio: 3/4), (-o-device-pixel-ratio: 3/4),
(min-device-pixel-ratio: 0.75), (min-device-pixel-ratio: 0.75),
(min-resolution: 0.75dppx), (min-resolution: 0.75dppx),
(min-resolution: 120dpi), { (min-resolution: 120dpi) {
height:0.75px; height:0.75px;
} }

4
less/_inputs.less
View File

@ -197,12 +197,10 @@ fieldset[disabled] .form-control.focus:disabled,
color: @input-info; color: @input-info;
} }
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~" .form-control:focus", @primary, { .generic-variations(~" .form-control:focus", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
}); });
.generic-variations(~" .form-control.focus", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
});
.variations(~" .control-label", color, @lightbg-text); .variations(~" .control-label", color, @lightbg-text);
.variations(~" input.form-control:focus ~ .floating-label", color, @input-default); .variations(~" input.form-control:focus ~ .floating-label", color, @input-default);

133
less/_material.less Normal file
View File

@ -0,0 +1,133 @@
body {
background-color: @body-bg;
&.inverse {
background: #333333;
&, .form-control {
color: @darkbg-text;
}
.modal,
.panel-default,
.card {
&,
.form-control {
background-color: initial;
color: initial;
}
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, h6{
font-weight: 400;
}
a, a:hover, a:focus {
color: @primary;
}
// Well and Jumbotrons
@import "_welljumbo.less";
// Buttons
@import "_buttons.less";
// Checkboxes
@import "_checkboxes.less";
// Toggle buttons
@import "_togglebutton.less";
// Radios
@import "_radios.less";
// Text inputs
@import "_inputs.less";
legend {
border-bottom: 0;
}
// Lists
@import "_lists.less";
// Navbar
@import "_navbar.less";
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: @primary;
}
}
.variations(~" li a:hover", color, @primary);
}
// Alerts
@import "_alerts.less";
// Progress bar
@import "_progress.less";
// Typography
.text-warning {
color: @btn-warning;
}
.text-primary {
color: @btn-primary;
}
.text-danger {
color: @btn-danger;
}
.text-success {
color: @btn-success;
}
.text-info {
color: @btn-info;
}
@import "_tabs.less";
@import "_popups.less";
@import "_icons.less";
@import "_cards.less";
@import "_dialogs.less";
@import "_labels.less";
@import "_panels.less";
@import "_dividers.less";
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
// External plugins
@import "_plugin-snackbarjs.less";
@import "_plugin-nouislider.less";
@import "_plugin-selectize.less";
@import "_plugin-dropdownjs.less";

1
less/_navbar.less
View File

@ -166,6 +166,7 @@
} }
} }
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
.generic-variations(~".navbar", @primary, { .generic-variations(~".navbar", @primary, {
background-color: @material-color; background-color: @material-color;
color: @material-text-color; color: @material-text-color;

2
less/_togglebutton.less
View File

@ -55,10 +55,12 @@
} }
// Switch bg on // Switch bg on
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, { .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
background-color: fade(@material-color, 50%); background-color: fade(@material-color, 50%);
}); });
// Handle on // Handle on
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
.variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary); .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
// Ripple on // Ripple on
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, { .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {

6
less/material-fullpalette.less
View File

@ -1,2 +1,6 @@
@import "material.less"; @import "_colors.less";
@import "_variables.less";
@import "_mixins-fullpalette.less"; @import "_mixins-fullpalette.less";
@import "_icons-material-design.less";
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

142
less/material.less
View File

@ -1,142 +1,6 @@
@import "_variables.less";
@import "_colors.less"; @import "_colors.less";
@import "_variables.less";
@import "_mixins.less"; @import "_mixins.less";
@import "_icons-material-design.less"; @import "_icons-material-design.less";
@import "_shadows.less"; // these are mixins only, and must be placed at the top before use (sass requiremnt)
body { @import '_material.less'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
background-color: @body-bg;
&.inverse {
background: #333333;
&, .form-control {
color: @darkbg-text;
}
.modal,
.panel-default,
.card {
&,
.form-control {
background-color: initial;
color: initial;
}
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, h6{
font-weight: 400;
}
a, a:hover, a:focus {
color: @primary;
}
// Well and Jumbotrons
@import "_welljumbo.less";
// Buttons
@import "_buttons.less";
// Checkboxes
@import "_checkboxes.less";
// Toggle buttons
@import "_togglebutton.less";
// Radios
@import "_radios.less";
// Text inputs
@import "_inputs.less";
legend {
border-bottom: 0;
}
// Lists
@import "_lists.less";
// Navbar
@import "_navbar.less";
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: @primary;
}
}
.variations(~" li a:hover", color, @primary);
}
// Alerts
@import "_alerts.less";
// Progress bar
@import "_progress.less";
// Typography
.text-warning {
color: @btn-warning;
}
.text-primary {
color: @btn-primary;
}
.text-danger {
color: @btn-danger;
}
.text-success {
color: @btn-success;
}
.text-info {
color: @btn-info;
}
@import "_tabs.less";
@import "_popups.less";
@import "_icons.less";
@import "_cards.less";
@import "_dialogs.less";
@import "_labels.less";
@import "_panels.less";
@import "_dividers.less";
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
// External plugins
@import "_plugin-snackbarjs.less";
@import "_plugin-nouislider.less";
@import "_plugin-selectize.less";
@import "_plugin-dropdownjs.less";
// Material shadows
// Place them on bottom of stylesheet to increase the importance of it and override other same-specificity selectors
@import "_shadows.less";

2
less/roboto.less
View File

@ -1,5 +1,5 @@
@import "_variables.less";
@import "_colors.less"; @import "_colors.less";
@import "_variables.less";
@font-face { @font-face {
font-family: 'RobotoDraft'; font-family: 'RobotoDraft';

1
package.json
View File

@ -46,6 +46,7 @@
"grunt-csswring": "^1.1.0", "grunt-csswring": "^1.1.0",
"grunt-dependency-installer": "^0.2.0", "grunt-dependency-installer": "^0.2.0",
"grunt-exec": "^0.4.6", "grunt-exec": "^0.4.6",
"grunt-less-to-sass": "latest",
"grunt-newer": "^0.7.0", "grunt-newer": "^0.7.0",
"jquery": ">=1.9.1", "jquery": ">=1.9.1",
"jshint-stylish": "^1.0.0", "jshint-stylish": "^1.0.0",

105
sass/_alerts.scss
View File

@ -1,96 +1,19 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.alert { .alert {
border: 0px; border: 0px;
border-radius: 0; border-radius: 0;
a, .alert-link {
color: #FFFFFF; // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
@include alert-variations(unquote(""), $darkbg-text);
&-info, &-danger, &-warning, &-success {
color: $darkbg-text;
}
&-default {
a, .alert-link {
color: $lightbg-text;
}
} }
} }
// Alert buttons
// --------------------------------------------------
.alert-default {
@include alert-variant(#FFFFFF);
a, .alert-link {
color: #000000;
}
}
.alert-primary {
color: #FFFFFF;
@include alert-variant($primary);
}
// Success appears as green
.alert-success {
color: #FFFFFF;
@include alert-variant($success);
}
// Info appears as blue-green
.alert-info {
color: #FFFFFF;
@include alert-variant($info);
}
// Warning appears as orange
.alert-warning {
color: #FFFFFF;
@include alert-variant($warning);
}
// Danger and error appear as red
.alert-danger {
@include alert-variant($danger);
}
// Material shades
.alert-material-red {
@include alert-variant($red)
}
.alert-material-pink {
@include alert-variant($pink);
}
.alert-material-purple {
@include alert-variant($purple);
}
.alert-material-deeppurple {
@include alert-variant($deeppurple);
}
.alert-material-indigo {
@include alert-variant($indigo);
}
.alert-material-lightblue {
@include alert-variant($lightblue);
}
.alert-material-cyan {
@include alert-variant($cyan);
}
.alert-material-teal {
@include alert-variant($teal);
}
.alert-material-lightgreen {
@include alert-variant($lightgreen);
}
.alert-material-lime {
@include alert-variant($lime);
}
.alert-material-lightyellow {
@include alert-variant($lightyellow);
}
.alert-material-orange {
@include alert-variant($orange);
}
.alert-material-deeporange {
@include alert-variant($deeporange);
}
.alert-material-grey {
@include alert-variant($grey);
}
.alert-material-bluegrey {
@include alert-variant($bluegrey);
}
.alert-material-brown {
@include alert-variant($brown);
}
.alert-material-lightgrey {
@include alert-variant($lightgrey);
}

16
sass/_animations.scss
View File

@ -1,16 +0,0 @@
// main: _material.scss
@keyframes input-highlight {
0% {
left: 20%;
width: 20%;
}
99% {
width: 0;
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}

282
sass/_buttons.scss
View File

@ -1,187 +1,143 @@
@mixin btn-shadow(){ // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@extend .shadow-z-2;
transition: box-shadow transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-3;
}
&:hover { @mixin btn-shadow(){
@extend .shadow-z-5; @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 {
position: relative;
padding: 8px 30px;
border: 0;
margin: 10px 1px;
cursor: pointer;
border-radius: 2px;
text-transform: uppercase;
text-decoration: none;
color: $darkbg-text;
&:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) {
@include shadow-z-1();
}
&:active:not(.btn-link):not(.btn-flat):not(.btn-fab) {
@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;
@include variations(unquote(".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));
} }
.btn { .btn {
position: relative; &.btn-flat {
padding: 8px 30px; background: none;
border: 0; box-shadow: none;
margin: 10px 1px; font-weight: 500;
&:disabled {
color: $text-disabled !important;
}
}
cursor: pointer; // Size variations
border-radius: 4px; &.btn-sm {
text-transform: uppercase; padding: 5px 20px;
text-decoration: none; }
color: $darkbg-text; &.btn-xs {
padding: 4px 15px;
font-size: 10px;
}
&:hover { &.btn-raised {
color: $darkbg-text;
}
&:hover:not(.btn-link) {
@extend .shadow-z-2-hover;
}
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
@extend .shadow-z-3;
}
outline: none !important;
}
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
color: $lightbg-text;
&:hover {
color: $lightbg-text;
}
}
.btn:not([class^="btn btn-"]), .btn-default {
&:hover {
background-color: rgba(255,255,255,0.5);
}
}
.btn-raised {
@include btn-shadow(); @include btn-shadow();
} }
.open > .dropdown-toggle.btn { &.btn-fab {
//.variations(#{""}, background-color, $btn-default);
}
.btn-flat {
box-shadow: none !important;
&.btn-default:hover {
background: none;
}
}
.btn-group, .btn-group-vertical {
position: relative;
border-radius: 4px;
margin: 10px 1px;
@include btn-shadow();
&.open .dropdown-toggle {
box-shadow: none;
}
&.btn-group-raised {
@include btn-shadow();
}
.btn, .btn:active, .btn-group {
box-shadow: none !important;
margin: 0;
}
.btn:active .caret { margin-left: -1px; }
}
.btn-group-flat {
box-shadow: none !important;
}
// Floating Action Button (FAB)
.btn-fab {
margin: 0; margin: 0;
padding: 15px; padding: 15px;
font-size: 26px; font-size: 26px;
width: 56px; width: 56px;
height: 56px; height: 56px;
&, &:hover, &:active {
@include variations(unquote(""), background-color, transparent);
}
&, &:hover { &, &:hover {
//.variations(#{""}, background-color, transparent); @include shadow-z-1();
}
&:active {
@include shadow-z-1-hover();
} }
&, .ripple-wrapper { &, .ripple-wrapper {
border-radius: 100%; border-radius: 100%;
} }
&.btn-mini { &.btn-fab-mini {
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 13px; padding: 13px 0;
font-size: 15px; font-size: 15px;
} }
i {
position: relative;
top: -5px;
margin: 0 auto;
}
}
} }
// Alert buttons // 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 {
position: relative;
border-radius: 2px;
margin: 10px 1px;
.btn-default { @include btn-shadow();
@include button-variant($btn-default); &.open .dropdown-toggle {
box-shadow: none;
}
&.btn-group-raised {
@include btn-shadow();
}
.btn, .btn:active, .btn-group {
box-shadow: none !important;
margin: 0;
}
} }
.btn-primary { .btn-group-flat {
@include button-variant($primary); box-shadow: none !important;
} }
// Success appears as green
.btn-success {
@include button-variant($success);
}
// Info appears as blue-green
.btn-info {
@include button-variant($info);
}
// Warning appears as orange
.btn-warning {
@include button-variant($warning);
}
// Danger and error appear as red
.btn-danger {
@include button-variant($danger);
}
// Material shades
.btn-material-red {
@include button-variant($red)
}
.btn-material-pink {
@include button-variant($pink);
}
.btn-material-purple {
@include button-variant($purple);
}
.btn-material-deeppurple {
@include button-variant($deeppurple);
}
.btn-material-indigo {
@include button-variant($indigo);
}
.btn-material-lightblue {
@include button-variant($lightblue);
}
.btn-material-cyan {
@include button-variant($cyan);
}
.btn-material-teal {
@include button-variant($teal);
}
.btn-material-lightgreen {
@include button-variant($lightgreen);
}
.btn-material-lime {
@include button-variant($lime);
}
.btn-material-lightyellow {
@include button-variant($lightyellow);
}
.btn-material-orange {
@include button-variant($orange);
}
.btn-material-deeporange {
@include button-variant($deeporange);
}
.btn-material-grey {
@include button-variant($grey);
}
.btn-material-bluegrey {
@include button-variant($bluegrey);
}
.btn-material-brown {
@include button-variant($brown);
}
.btn-material-lightgrey {
@include button-variant($lightgrey);
}

174
sass/_cards.scss
View File

@ -1,130 +1,68 @@
// // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// Cards
// http://www.google.com/design/spec/components/cards.html#cards-usage
//
.card { .card {
@extend .shadow-z-1;
border-radius: 2px; /***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
margin-bottom: 20px; // Same as panel margins
h1, h2, h3, h4, h5, h6 { display: inline-block;
font-weight: 100; position: relative;
margin: 10px 0; width: 100%;
} .card-height-indicator {
margin-top: 100%;
.card-body { }
padding: 15px; .card-content {
} position: absolute;
top: 0;
.card-actions { bottom: 0;
padding: 15px; left: 0;
text-transform: uppercase; right: 0;
.main { font-weight: bold; }
a {
font-size: 15px;
margin: 0 15px 0 0;
&:hover {
text-decoration: none;
}
} }
} /**************************************************************************/
img {
max-width:100%;
max-height:100%;
}
.card-footer { border-radius: 2px;
padding: 15px; color: $card-body-text;
border-top: 1px solid; background: $card-body-background;
border-color: $lightgrey;
.icon { @include shadow-z-2();
font-size: 25px;
transition: ease transform 0.5s; .card-image {
&:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)} height: 60%;
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: $card-image-headline;
font-size: 2em;
}
} }
}
} .card-body {
height: 30%;
padding: 18px;
}
// Alert buttons .card-footer {
// -------------------------------------------------- height: 10%;
padding: 18px;
.card-default { button {
@include card-variant($btn-default, #000, darken($btn-default, 10%)); margin: 0 !important;
} position: relative;
.card-primary { bottom: 25px;
@include card-variant($primary, #FFFFFF, $lightgrey); width: auto;
} &:first-child {
// Success appears as green left: -15px;
.card-success { }
@include card-variant($success, #FFFFFF, darken($success, 10%)); }
} }
// Info appears as blue-green
.card-info {
@include card-variant($info, #FFFFFF, darken($info, 10%));
}
// Warning appears as orange
.card-warning {
@include card-variant($warning, #FFFFFF, lighten($warning, 10%));
}
// Danger and error appear as red
.card-danger {
@include card-variant($danger, #FFFFFF, darken($danger, 10%));
}
// Material shades
.card-material-red {
@include card-variant($red, #FFFFFF, lighten($red, 10%))
}
.card-material-pink {
@include card-variant($pink, #FFFFFF, darken($pink, 10%));
}
.card-material-purple {
@include card-variant($purple, #FFFFFF, darken($purple, 10%));
}
.card-material-deeppurple {
@include card-variant($deeppurple, #FFFFFF, lighten($deeppurple, 10%));
}
.card-material-indigo {
@include card-variant($indigo, #FFFFFF, lighten($indigo, 10%));
}
.card-material-lightblue {
@include card-variant($lightblue, #fff, darken($lightblue, 10%));
}
.card-material-cyan {
@include card-variant($cyan, #FFFFFF, darken($cyan, 10%));
}
.card-material-teal {
@include card-variant($teal, #FFFFFF, darken($teal, 10%));
}
.card-material-lightgreen {
@include card-variant($lightgreen, #FFFFFF, darken($lightgreen, 10%));
}
.card-material-lime {
@include card-variant($lime, #FFFFFF, darken($lime, 10%));
}
.card-material-lightyellow {
@include card-variant($lightyellow, darken($lightyellow, 60%), darken($lightyellow, 10%));
}
.card-material-orange {
@include card-variant($orange, #FFFFFF, darken($orange, 10%));
}
.card-material-deeporange {
@include card-variant($deeporange, #FFFFFF, darken($deeporange, 10%));
}
.card-material-grey {
@include card-variant($grey, #FFFFFF, darken($grey, 10%));
}
.card-material-bluegrey {
@include card-variant($bluegrey, #FFFFFF, darken($bluegrey, 10%));
}
.card-material-brown {
@include card-variant($brown, #FFFFFF, lighten($brown, 10%));
}
.card-material-lightgrey {
@include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%));
} }

410
sass/_checkboxes.scss
View File

@ -1,189 +1,239 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 15px; padding-top: 20px;
} }
.checkbox { .checkbox {
transform: translateZ(0); // Force 3d rendering
label {
cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule
}
// Hide native checkbox
input[type=checkbox] {
opacity: 0;
position: absolute;
margin: 0;
z-index: -1;
width: 0;
height: 0;
overflow: hidden;
left: 0;
pointer-events: none;
}
.checkbox-material {
vertical-align: middle;
position: relative;
top: 3px;
&:before {
display: block;
position: absolute;
left: 0;
content: "";
background-color: rgba(0,0,0,.84);
height: $checkbox-size;
width: $checkbox-size;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(2.3, 2.3, 1);
}
.check {
position: relative;
display: inline-block;
width: $checkbox-size;
height: $checkbox-size;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.check:before {
position: absolute;
content: "";
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off $checkbox-animation-check forwards;
}
}
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 $checkbox-animation-check forwards;
}
input[type=checkbox]:not(:checked) + .checkbox-material:before {
animation: rippleOff $checkbox-animation-ripple;
}
input[type=checkbox]:checked + .checkbox-material:before {
animation: rippleOn $checkbox-animation-ripple;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
animation: rippleOff $checkbox-animation-ripple forwards;
}
input[type=checkbox]:checked + .checkbox-material .check:after {
animation: rippleOn $checkbox-animation-ripple forwards;
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
input[type=checkbox][disabled] + .circle {
opacity: 0.5;
}
input[type=checkbox][disabled] + .checkbox-material .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
}
@keyframes checkbox-on {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
}
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
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;
}
}
@keyframes checkbox-off {
0% {
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,
0 0 0 0 inset;
}
25% {
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,
0 0 0 0 inset;
}
50% {
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px,
0 0 0 0 inset;
}
51% {
transform: rotate(0deg); transform: rotate(0deg);
label { margin-top: -2px;
cursor: pointer; margin-left: -2px;
padding-left: 45px; width: 20px;
position: relative; height: 20px;
span { box-shadow:
display: block; 0 0 0 0,
position: absolute; 0 0 0 0,
left: 0px; 0 0 0 0,
transition-duration: 0.2s; 0 0 0 0,
} 0 0 0 0,
.check:after { 0 0 0 0,
display: block; 0px 0px 0 10px inset;
position: absolute; }
content: ""; 100% {
background-color: $lightbg-text; transform: rotate(0deg);
left: -5px; margin-top: -2px;
top: -15px; margin-left: -2px;
height: 50px; width: 20px;
width: 50px; height: 20px;
border-radius: 100%; box-shadow:
z-index: 1; 0 0 0 0,
opacity: 0; 0 0 0 0,
margin: 0; 0 0 0 0,
} 0 0 0 0,
.check:before { 0 0 0 0,
display: block; 0 0 0 0,
content: ""; 0px 0px 0 0px inset;
border: 2px solid $lightbg-text; }
height: 20px;
width: 20px;
transition-delay: 0.2s;
}
}
// Variations
//.variations(#{" .check"}, color, $success);
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards;
}
input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards;
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
animation-duration: 1ms;
}
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .check:before {
opacity: 0.5;
}
input[type=checkbox][disabled] ~ .check:after {
background-color: $lightbg-text;
transform: rotate(-45deg);
}
//.variations(#{" input[type=checkbox]:checked ~ .check:after"}, background-color, $success);
} }
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0.2; opacity: 0.2;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0.2; opacity: 0.2;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }

362
sass/_colors.scss Normal file
View File

@ -0,0 +1,362 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
/*
To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
Then, run this script to get the list@mixin (function(){
var colors = {}, main = {};
$(".color-group")@mixin each(function(){
var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
colors[color] = {};
$(this)@mixin find(".color").not(".main-color").each(function(){
var shade = $(this).find(".shade").text().trim(),
hex = $(this).find(".hex").text().trim();
colors[color][shade] = hex;
});
main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
});
var LESS = "";
$@mixin each(colors, function(name, shades){
LESS += "\n\n";
$@mixin each(shades, function(shade, hex){
LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default;
});
if (main[name]) {
LESS += "$" + name + ": " + main[name] + ";\n" !default;
}
});
console.log(LESS);
})();
*/
$red-50: #ffebee !default;
$red-100: #ffcdd2 !default;
$red-200: #ef9a9a !default;
$red-300: #e57373 !default;
$red-400: #ef5350 !default;
$red-500: #f44336 !default;
$red-600: #e53935 !default;
$red-700: #d32f2f !default;
$red-800: #c62828 !default;
$red-900: #b71c1c !default;
$red-A100: #ff8a80 !default;
$red-A200: #ff5252 !default;
$red-A400: #ff1744 !default;
$red-A700: #d50000 !default;
$red: $red-500 !default;
$pink-50: #fce4ec !default;
$pink-100: #f8bbd0 !default;
$pink-200: #f48fb1 !default;
$pink-300: #f06292 !default;
$pink-400: #ec407a !default;
$pink-500: #e91e63 !default;
$pink-600: #d81b60 !default;
$pink-700: #c2185b !default;
$pink-800: #ad1457 !default;
$pink-900: #880e4f !default;
$pink-A100: #ff80ab !default;
$pink-A200: #ff4081 !default;
$pink-A400: #f50057 !default;
$pink-A700: #c51162 !default;
$pink: $pink-500 !default;
$purple-50: #f3e5f5 !default;
$purple-100: #e1bee7 !default;
$purple-200: #ce93d8 !default;
$purple-300: #ba68c8 !default;
$purple-400: #ab47bc !default;
$purple-500: #9c27b0 !default;
$purple-600: #8e24aa !default;
$purple-700: #7b1fa2 !default;
$purple-800: #6a1b9a !default;
$purple-900: #4a148c !default;
$purple-A100: #ea80fc !default;
$purple-A200: #e040fb !default;
$purple-A400: #d500f9 !default;
$purple-A700: #aa00ff !default;
$purple: $purple-500 !default;
$deep-purple-50: #ede7f6 !default;
$deep-purple-100: #d1c4e9 !default;
$deep-purple-200: #b39ddb !default;
$deep-purple-300: #9575cd !default;
$deep-purple-400: #7e57c2 !default;
$deep-purple-500: #673ab7 !default;
$deep-purple-600: #5e35b1 !default;
$deep-purple-700: #512da8 !default;
$deep-purple-800: #4527a0 !default;
$deep-purple-900: #311b92 !default;
$deep-purple-A100: #b388ff !default;
$deep-purple-A200: #7c4dff !default;
$deep-purple-A400: #651fff !default;
$deep-purple-A700: #6200ea !default;
$deep-purple: $deep-purple-500 !default;
$indigo-50: #e8eaf6 !default;
$indigo-100: #c5cae9 !default;
$indigo-200: #9fa8da !default;
$indigo-300: #7986cb !default;
$indigo-400: #5c6bc0 !default;
$indigo-500: #3f51b5 !default;
$indigo-600: #3949ab !default;
$indigo-700: #303f9f !default;
$indigo-800: #283593 !default;
$indigo-900: #1a237e !default;
$indigo-A100: #8c9eff !default;
$indigo-A200: #536dfe !default;
$indigo-A400: #3d5afe !default;
$indigo-A700: #304ffe !default;
$indigo: $indigo-500 !default;
$blue-50: #e3f2fd !default;
$blue-100: #bbdefb !default;
$blue-200: #90caf9 !default;
$blue-300: #64b5f6 !default;
$blue-400: #42a5f5 !default;
$blue-500: #2196f3 !default;
$blue-600: #1e88e5 !default;
$blue-700: #1976d2 !default;
$blue-800: #1565c0 !default;
$blue-900: #0d47a1 !default;
$blue-A100: #82b1ff !default;
$blue-A200: #448aff !default;
$blue-A400: #2979ff !default;
$blue-A700: #2962ff !default;
$blue: $blue-500 !default;
$light-blue-50: #e1f5fe !default;
$light-blue-100: #b3e5fc !default;
$light-blue-200: #81d4fa !default;
$light-blue-300: #4fc3f7 !default;
$light-blue-400: #29b6f6 !default;
$light-blue-500: #03a9f4 !default;
$light-blue-600: #039be5 !default;
$light-blue-700: #0288d1 !default;
$light-blue-800: #0277bd !default;
$light-blue-900: #01579b !default;
$light-blue-A100: #80d8ff !default;
$light-blue-A200: #40c4ff !default;
$light-blue-A400: #00b0ff !default;
$light-blue-A700: #0091ea !default;
$light-blue: $light-blue-500 !default;
$cyan-50: #e0f7fa !default;
$cyan-100: #b2ebf2 !default;
$cyan-200: #80deea !default;
$cyan-300: #4dd0e1 !default;
$cyan-400: #26c6da !default;
$cyan-500: #00bcd4 !default;
$cyan-600: #00acc1 !default;
$cyan-700: #0097a7 !default;
$cyan-800: #00838f !default;
$cyan-900: #006064 !default;
$cyan-A100: #84ffff !default;
$cyan-A200: #18ffff !default;
$cyan-A400: #00e5ff !default;
$cyan-A700: #00b8d4 !default;
$cyan: $cyan-500 !default;
$teal-50: #e0f2f1 !default;
$teal-100: #b2dfdb !default;
$teal-200: #80cbc4 !default;
$teal-300: #4db6ac !default;
$teal-400: #26a69a !default;
$teal-500: #009688 !default;
$teal-600: #00897b !default;
$teal-700: #00796b !default;
$teal-800: #00695c !default;
$teal-900: #004d40 !default;
$teal-A100: #a7ffeb !default;
$teal-A200: #64ffda !default;
$teal-A400: #1de9b6 !default;
$teal-A700: #00bfa5 !default;
$teal: $teal-500 !default;
$green-50: #e8f5e9 !default;
$green-100: #c8e6c9 !default;
$green-200: #a5d6a7 !default;
$green-300: #81c784 !default;
$green-400: #66bb6a !default;
$green-500: #4caf50 !default;
$green-600: #43a047 !default;
$green-700: #388e3c !default;
$green-800: #2e7d32 !default;
$green-900: #1b5e20 !default;
$green-A100: #b9f6ca !default;
$green-A200: #69f0ae !default;
$green-A400: #00e676 !default;
$green-A700: #00c853 !default;
$green: $green-500 !default;
$light-green-50: #f1f8e9 !default;
$light-green-100: #dcedc8 !default;
$light-green-200: #c5e1a5 !default;
$light-green-300: #aed581 !default;
$light-green-400: #9ccc65 !default;
$light-green-500: #8bc34a !default;
$light-green-600: #7cb342 !default;
$light-green-700: #689f38 !default;
$light-green-800: #558b2f !default;
$light-green-900: #33691e !default;
$light-green-A100: #ccff90 !default;
$light-green-A200: #b2ff59 !default;
$light-green-A400: #76ff03 !default;
$light-green-A700: #64dd17 !default;
$light-green: $light-green-500 !default;
$lime-50: #f9fbe7 !default;
$lime-100: #f0f4c3 !default;
$lime-200: #e6ee9c !default;
$lime-300: #dce775 !default;
$lime-400: #d4e157 !default;
$lime-500: #cddc39 !default;
$lime-600: #c0ca33 !default;
$lime-700: #afb42b !default;
$lime-800: #9e9d24 !default;
$lime-900: #827717 !default;
$lime-A100: #f4ff81 !default;
$lime-A200: #eeff41 !default;
$lime-A400: #c6ff00 !default;
$lime-A700: #aeea00 !default;
$lime: $lime-500 !default;
$yellow-50: #fffde7 !default;
$yellow-100: #fff9c4 !default;
$yellow-200: #fff59d !default;
$yellow-300: #fff176 !default;
$yellow-400: #ffee58 !default;
$yellow-500: #ffeb3b !default;
$yellow-600: #fdd835 !default;
$yellow-700: #fbc02d !default;
$yellow-800: #f9a825 !default;
$yellow-900: #f57f17 !default;
$yellow-A100: #ffff8d !default;
$yellow-A200: #ffff00 !default;
$yellow-A400: #ffea00 !default;
$yellow-A700: #ffd600 !default;
$yellow: $yellow-500 !default;
$amber-50: #fff8e1 !default;
$amber-100: #ffecb3 !default;
$amber-200: #ffe082 !default;
$amber-300: #ffd54f !default;
$amber-400: #ffca28 !default;
$amber-500: #ffc107 !default;
$amber-600: #ffb300 !default;
$amber-700: #ffa000 !default;
$amber-800: #ff8f00 !default;
$amber-900: #ff6f00 !default;
$amber-A100: #ffe57f !default;
$amber-A200: #ffd740 !default;
$amber-A400: #ffc400 !default;
$amber-A700: #ffab00 !default;
$amber: $amber-500 !default;
$orange-50: #fff3e0 !default;
$orange-100: #ffe0b2 !default;
$orange-200: #ffcc80 !default;
$orange-300: #ffb74d !default;
$orange-400: #ffa726 !default;
$orange-500: #ff9800 !default;
$orange-600: #fb8c00 !default;
$orange-700: #f57c00 !default;
$orange-800: #ef6c00 !default;
$orange-900: #e65100 !default;
$orange-A100: #ffd180 !default;
$orange-A200: #ffab40 !default;
$orange-A400: #ff9100 !default;
$orange-A700: #ff6d00 !default;
$orange: $orange-500 !default;
$deep-orange-50: #fbe9e7 !default;
$deep-orange-100: #ffccbc !default;
$deep-orange-200: #ffab91 !default;
$deep-orange-300: #ff8a65 !default;
$deep-orange-400: #ff7043 !default;
$deep-orange-500: #ff5722 !default;
$deep-orange-600: #f4511e !default;
$deep-orange-700: #e64a19 !default;
$deep-orange-800: #d84315 !default;
$deep-orange-900: #bf360c !default;
$deep-orange-A100: #ff9e80 !default;
$deep-orange-A200: #ff6e40 !default;
$deep-orange-A400: #ff3d00 !default;
$deep-orange-A700: #dd2c00 !default;
$deep-orange: $deep-orange-500 !default;
$brown-50: #efebe9 !default;
$brown-100: #d7ccc8 !default;
$brown-200: #bcaaa4 !default;
$brown-300: #a1887f !default;
$brown-400: #8d6e63 !default;
$brown-500: #795548 !default;
$brown-600: #6d4c41 !default;
$brown-700: #5d4037 !default;
$brown-800: #4e342e !default;
$brown-900: #3e2723 !default;
$brown-A100: #d7ccc8 !default;
$brown-A200: #bcaaa4 !default;
$brown-A400: #8d6e63 !default;
$brown-A700: #5d4037 !default;
$brown: $brown-500 !default;
$grey-50: #fafafa !default;
$grey-100: #f5f5f5 !default;
$grey-200: #eeeeee !default;
$grey-300: #e0e0e0 !default;
$grey-400: #bdbdbd !default;
$grey-500: #9e9e9e !default;
$grey-600: #757575 !default;
$grey-700: #616161 !default;
$grey-800: #424242 !default;
$grey-900: #212121 !default;
$grey-A100: #f5f5f5 !default;
$grey-A200: #eeeeee !default;
$grey-A400: #bdbdbd !default;
$grey-A700: #616161 !default;
$grey: $grey-500 !default;
$blue-grey-50: #eceff1 !default;
$blue-grey-100: #cfd8dc !default;
$blue-grey-200: #b0bec5 !default;
$blue-grey-300: #90a4ae !default;
$blue-grey-400: #78909c !default;
$blue-grey-500: #607d8b !default;
$blue-grey-600: #546e7a !default;
$blue-grey-700: #455a64 !default;
$blue-grey-800: #37474f !default;
$blue-grey-900: #263238 !default;
$blue-grey-A100: #cfd8dc !default;
$blue-grey-A200: #b0bec5 !default;
$blue-grey-A400: #78909c !default;
$blue-grey-A700: #455a64 !default;
$blue-grey: $blue-grey-500 !default;
$black: #000000 !default;
$white: #ffffff !default;
$inverse: $indigo !default;

54
sass/_dialogs.scss Normal file
View File

@ -0,0 +1,54 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
//
// Modals
// Material Design element Dialogs
// --------------------------------------------------
.modal-content {
@include shadow-z-5();
border-radius: 2px;
border: none;
// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
border-bottom: none;
padding-top: 24px;
padding-right: 24px;
padding-bottom: 0px;
padding-left: 24px;
}
// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
padding-top: 24px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
}
// Footer (for actions)
.modal-footer {
border-top: none;
padding: 7px;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
button+button {
margin-bottom: 16px;
}
}
.modal-body + .modal-footer {
padding-top: 0;
}
}
.modal-backdrop {
background: rgba(0,0,0,0.3);
}

73
sass/_dividers.scss Normal file
View File

@ -0,0 +1,73 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
hr {
&.on-dark {
color: lighten($black, 10%);
}
&.on-light {
color: lighten($white, 10%);
}
@media (-webkit-min-device-pixel-ratio: 0.75),
(min--moz-device-pixel-ratio: 0.75),
(-o-device-pixel-ratio: 3/4),
(min-device-pixel-ratio: 0.75),
(min-resolution: 0.75dppx),
(min-resolution: 120dpi) {
height:0.75px;
}
@media (-webkit-min-device-pixel-ratio: 1),
(min--moz-device-pixel-ratio: 1),
(-o-device-pixel-ratio: 1),
(min-device-pixel-ratio: 1),
(min-resolution: 1dppx),
(min-resolution: 160dpi) {
height:1px;
}
@media (-webkit-min-device-pixel-ratio: 1.33),
(min--moz-device-pixel-ratio: 1.33),
(-o-device-pixel-ratio: 133/100),
(min-device-pixel-ratio: 1.33),
(min-resolution: 1.33dppx),
(min-resolution: 213dpi) {
height:1.333px;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5),
(-o-device-pixel-ratio: 3/2),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx),
(min-resolution: 240dpi) {
height:1.5px;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(-o-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2),
(min-resolution: 2dppx),
(min-resolution: 380dpi) {
height:2px;
}
@media (-webkit-min-device-pixel-ratio: 3),
(min--moz-device-pixel-ratio: 3),
(-o-device-pixel-ratio: 3/1),
(min-device-pixel-ratio: 3),
(min-resolution: 3dppx),
(min-resolution: 480dpi) {
height:3px;
}
@media (-webkit-min-device-pixel-ratio: 4),
(min--moz-device-pixel-ratio: 4),
(-o-device-pixel-ratio: 4/1),
(min-device-pixel-ratio: 3),
(min-resolution: 4dppx),
(min-resolution: 640dpi) {
height:4px;
}
}

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

@ -1,3 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@font-face { @font-face {
font-family: 'Material-Design-Icons'; font-family: 'Material-Design-Icons';
src:url('#{$material-font-path}/Material-Design-Icons.eot?3ocs8m'); src:url('#{$material-font-path}/Material-Design-Icons.eot?3ocs8m');
@ -209,7 +211,6 @@
/* Start Icons */ /* Start Icons */
.mdi-action-3d-rotation:before { .mdi-action-3d-rotation:before {
content: "\e600"; content: "\e600";
} }

83
sass/_icons.scss
View File

@ -1,80 +1,7 @@
.icon {} // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// Navbar alternate .mdi, icon {
// -------------------------------------------------- @include variations(unquote(""), color, $lightbg-text);
line-height: inherit;
.icon-default { vertical-align: bottom;
@include icon-variant($lightbg-text);
}
.icon-primary {
@include icon-variant($primary);
}
// Success appears as green
.icon-success {
@include icon-variant($success);
}
// Info appears as blue-green
.icon-info {
@include icon-variant($info);
}
// Warning appears as orange
.icon-warning {
@include icon-variant($warning);
}
// Danger and error appear as red
.icon-danger {
@include icon-variant($danger);
}
// Material shades
.icon-material-red {
@include icon-variant($red)
}
.icon-material-pink {
@include icon-variant($pink);
}
.icon-material-purple {
@include icon-variant($purple);
}
.icon-material-deeppurple {
@include icon-variant($deeppurple);
}
.icon-material-indigo {
@include icon-variant($indigo);
}
.icon-material-lightblue {
@include icon-variant($lightblue);
}
.icon-material-cyan {
@include icon-variant($cyan);
}
.icon-material-teal {
@include icon-variant($teal);
}
.icon-material-lightgreen {
@include icon-variant($lightgreen);
}
.icon-material-lime {
@include icon-variant($lime);
}
.icon-material-lightyellow {
@include icon-variant($lightyellow);
}
.icon-material-orange {
@include icon-variant($orange);
}
.icon-material-deeporange {
@include icon-variant($deeporange);
}
.icon-material-grey {
@include icon-variant($grey);
}
.icon-material-bluegrey {
@include icon-variant($bluegrey);
}
.icon-material-brown {
@include icon-variant($brown);
}
.icon-material-lightgrey {
@include icon-variant($lightgrey);
} }

391
sass/_inputs.scss
View File

@ -1,209 +1,248 @@
fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control { // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
&, &:focus, &.focus {
&:not(textarea) { fieldset[disabled] .form-control, .form-control {
height: 28px; &, &:focus, &.focus {
} padding: 0;
padding: 0; float: none;
float: none; border: 0;
border: 0; box-shadow: none;
box-shadow: none; border-radius: 0;
border-radius: 0; &:disabled {
background: transparent; border-style: dashed;
border-bottom: 1px solid #757575; border-bottom: 1px solid #757575;
&:disabled {
border-style: dashed;
}
} }
}
}
fieldset[disabled] .form-control, .form-control {
&:textarea {
height: 40px;
}
} }
select[multiple].form-control { select[multiple].form-control {
&, &:focus, &.focus { &, &:focus, &.focus {
height: 85px; height: 85px;
} }
} }
.form-control {
border: 0;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(100% - 1px);
background-color: transparent;
background-color: rgba(0,0,0,0);
transition: background 0s ease-out;
&::-webkit-input-placeholder {
color: $input-placeholder-color;
}
&::-moz-placeholder {
color: $input-placeholder-color;
}
&:-ms-input-placeholder {
color: $input-placeholder-color;
}
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background-color: transparent;
background-color: rgba(0,0,0,0);
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border: 0; // Ugly override of Bootstrap border
}
.form-control:focus, .form-control.focus {
outline: none;
background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
}
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
.form-control:focus, .form-control.focus { .floating-label {
outline: none; color: $input-placeholder-color;
} position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.3s ease all;
}
.floating-label { // Input sizes
color: #7E7E7E; .floating-label { // base
font-size: 14px; font-size: $font-size-base;
position: absolute; }
pointer-events: none; .form-control:focus ~ .floating-label,
left: 0px; .form-control:not(.empty) ~ .floating-label {
top: 5px; top: $floating-label-size-ratio * -$font-size-base;
transition: 0.2s ease all; font-size: $floating-label-size-ratio * $font-size-base;
opacity: 0; }
}
.form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
opacity: 1;
}
.form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
color: $input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: $input-default;
}
.form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
&:before, &:after {
background-color: $input-danger;
}
}
.form-control.empty ~ .floating-label {
opacity: 1;
}
.material-input:before {
position: absolute;
content: "";
width: 100%;
left: 0;
height: 2px;
background-color: $input-default;
bottom: -1px;
transform: scaleX(0);
transition: transform 0s;
}
.form-control:focus ~ .material-input:before, .form-control.focus ~ .material-input:before {
transform: scaleX(1);
transition: transform 0.2s ease-out;
}
.material-input:after {
content: "";
position: absolute;
height: 18px;
width: 100px;
margin-top: -1px;
top: 7px;
left: 0;
pointer-events: none;
opacity: 0.9;
transform-origin: left;
}
.input-lg ~ .material-input:after {
height: 26px;
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
margin-top: -11px;
}
/* active state */ .input-sm + .floating-label { // small
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after { font-size: $font-size-small;
animation: input-highlight 0.3s ease; top: 7px;
animation-fill-mode: forwards; }
opacity: 0; .form-control.input-sm:focus ~ .floating-label,
} .form-control.input-sm:not(.empty) ~.floating-label {
top: $floating-label-size-ratio * -$font-size-small;
font-size: $floating-label-size-ratio * $font-size-small;
}
select ~ .material-input:after { .input-lg + .floating-label {
display: none; font-size: $font-size-large;
} top: 10px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
top: $floating-label-size-ratio * -$font-size-large;
font-size: $floating-label-size-ratio * $font-size-large;
}
.form-control:focus ~ .floating-label {
color: $primary;
}
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
color: $input-danger;
}
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
background-color: $input-default;
}
.form-control:invalid {
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
}
textarea { resize: none; }
textarea ~ .form-control-highlight {
margin-top: -11px;
}
// Hints
.hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
display: block;
}
select ~ .material-input:after {
display: none;
}
// Fix for OS X
select {
appearance: none;
}
} }
.form-group { .form-group {
&.has-warning { &.has-warning {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after { .form-control {
background: $input-warning; box-shadow: none;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-warning;
}
} }
&.has-error { .material-input:focus, .form-control:focus, .form-control.focus {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after { background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color);
background: $input-danger; box-shadow: none;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-danger;
}
} }
&.has-success { .control-label, input.form-control:focus ~ .floating-label {
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after { color: $input-warning;
background: $input-success;
}
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-success;
}
} }
&.has-info { }
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after { &.has-error {
background: $input-info; .form-control {
} box-shadow: none;
.control-label, input.form-control:not(.empty) ~ .floating-label {
color: $input-info;
}
} }
//.variations(#{" .material-input:before"}, background-color, $indigo); .material-input:focus, .form-control:focus, .form-control.focus {
//.variations(#{" input.form-control:focus ~ .material-input:after"}, background-color, $indigo); background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
//.variations(#{" input.form-control.focus ~ .material-input:after"}, background-color, $indigo); box-shadow: none;
//.variations(#{" .control-label"}, color, $lightbg-text); }
//.variations(#{" input.form-control:not(.empty) ~ .floating-label"}, color, $indigo); .control-label, input.form-control:focus ~ .floating-label {
color: $input-danger;
}
}
&.has-success {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-success;
}
}
&.has-info {
.form-control {
box-shadow: none;
}
.material-input:focus, .form-control:focus, .form-control.focus {
background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color);
box-shadow: none;
}
.control-label, input.form-control:focus ~ .floating-label {
color: $input-info;
}
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
@include bg-img-variations(unquote(" .form-control:focus"), $primary);
@include variations(unquote(" .control-label"), color, $lightbg-text);
@include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
} }
.input-group { .input-group {
.form-control-wrapper { .form-control-wrapper {
.form-control { .form-control {
float: none; float: none;
}
margin-right: 5px;
margin-left: 5px;
bottom: -10px;
}
.input-group-addon {
border: 0;
}
.input-group-btn .btn {
border-radius: 4px;
} }
margin-right: 5px;
margin-left: 5px;
}
.input-group-addon {
border: 0;
background: transparent;
}
.input-group-btn .btn {
border-radius: 4px;
margin: 0;
}
} }
select.form-control { select.form-control {
border: 0; border: 0;
box-shadow: none;
border-radius: 0;
&:focus, &.focus {
box-shadow: none; box-shadow: none;
border-radius: 0; border-color: #757575;
&:focus, &.focus { }
box-shadow: none;
border-color: #757575;
}
} }
@mixin keyframe-input-highlight(){
0% {
left: 20%;
transform: scaleX(20%);
}
99% {
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
@include keyframe-input-highlight()
}
// Input files (kinda hack) // Input files (kinda hack)
.form-control-wrapper input[type=file] { .form-control-wrapper input[type=file] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 100; z-index: 100;
} }

6
sass/_labels.scss Normal file
View File

@ -0,0 +1,6 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.label {
border-radius: 1px;
@include variations(unquote(""), background-color, $grey);
}

175
sass/_lists.scss
View File

@ -1,83 +1,104 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.list-group { .list-group {
border-radius: 0;
.list-group-item {
background-color: transparent;
overflow: hidden;
border: 0;
border-radius: 0; border-radius: 0;
.list-group-item { padding: 0 16px;
background-color: transparent; &.baseline {
overflow: hidden; border-bottom: 1px solid #cecece;
border: 0; &:last-child {
border-radius: 0; border-bottom: none;
padding: 0 16px; }
.row-picture, .row-action-primary {
float: left;
display: inline-block;
padding-right: 16px;
img, i, label {
display: block;
width: 56px;
height: 56px;
}
img {
background: rgba(0,0,0,0.1);
padding: 1px;
&.circle {
border-radius: 100%;
}
}
i {
background: rgba(0,0,0,0.25);
border-radius: 100%;
text-align: center;
line-height: 56px;
font-size: 20px;
color: white;
}
label {
margin-left: 7px;
margin-right: -7px;
margin-top: 5px;
margin-bottom: -5px;
}
}
.row-content {
display: inline-block;
width: #{"calc(100% - 92px)"};
min-height: 66px;
.action-secondary {
position: absolute;
right: 16px;
top: 16px;
i {
font-size: 20px;
color: rgba(0,0,0,0.25);
cursor: pointer;
}
}
.action-secondary ~ * {
max-width: #{"calc(100% - 30px)"};
}
.least-content {
position: absolute;
right: 16px;
top: 0px;
color: rgba(0,0,0,0.54);
font-size: 14px;
}
}
.list-group-item-heading {
color: rgba(0, 0, 0, 0.77);
font-size: 20px;
line-height: 29px;
}
} }
.list-group-separator { .row-picture, .row-action-primary {
clear: both; float: left;
overflow: hidden; display: inline-block;
margin-top: 10px; padding-right: 16px;
margin-bottom: 10px; img, i, label {
&:before { display: block;
content: ""; width: 56px;
width: #{"calc(100% - 90px)"}; height: 56px;
border-bottom: 1px solid rgba(0,0,0,0.1); }
float: right; img {
background: rgba(0,0,0,0.1);
padding: 1px;
&.circle {
border-radius: 100%;
} }
}
i {
background: rgba(0,0,0,0.25);
border-radius: 100%;
text-align: center;
line-height: 56px;
font-size: 20px;
color: white;
}
label {
margin-left: 7px;
margin-right: -7px;
margin-top: 5px;
margin-bottom: -5px;
.checkbox-material {
left: -10px;
}
}
} }
.row-content {
display: inline-block;
width: unquote("calc(100% - 92px)");
min-height: 66px;
.action-secondary {
position: absolute;
right: 16px;
top: 16px;
i {
font-size: 20px;
color: rgba(0,0,0,0.25);
cursor: pointer;
}
}
.action-secondary ~ * {
max-width: unquote("calc(100% - 30px)");
}
.least-content {
position: absolute;
right: 16px;
top: 0px;
color: rgba(0,0,0,0.54);
font-size: 14px;
}
}
.list-group-item-heading {
color: rgba(0, 0, 0, 0.77);
font-size: 20px;
line-height: 29px;
}
}
.list-group-item.active {
&:hover, &:focus {
background: rgba(0,0,0,.15);
outline: 10px solid rgba(0,0,0,.15);
}
.list-group-item-heading, .list-group-item-text {
color: $lightbg-text;
}
}
.list-group-separator {
clear: both;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
&:before {
content: "";
width: unquote("calc(100% - 90px)");
border-bottom: 1px solid rgba(0,0,0,0.1);
float: right;
}
}
} }

135
sass/_material.scss Normal file
View File

@ -0,0 +1,135 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
body {
background-color: $body-bg;
&.inverse {
background: #333333;
&, .form-control {
color: $darkbg-text;
}
.modal,
.panel-default,
.card {
&,
.form-control {
background-color: initial;
color: initial;
}
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, h6{
font-weight: 400;
}
a, a:hover, a:focus {
color: $primary;
}
// Well and Jumbotrons
@import '_welljumbo';
// Buttons
@import '_buttons';
// Checkboxes
@import '_checkboxes';
// Toggle buttons
@import '_togglebutton';
// Radios
@import '_radios';
// Text inputs
@import '_inputs';
legend {
border-bottom: 0;
}
// Lists
@import '_lists';
// Navbar
@import '_navbar';
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background-color: transparent;
color: $primary;
}
}
@include variations(unquote(" li a:hover"), color, $primary);
}
// Alerts
@import '_alerts';
// Progress bar
@import '_progress';
// Typography
.text-warning {
color: $btn-warning;
}
.text-primary {
color: $btn-primary;
}
.text-danger {
color: $btn-danger;
}
.text-success {
color: $btn-success;
}
.text-info {
color: $btn-info;
}
@import '_tabs';
@import '_popups';
@import '_icons';
@import '_cards';
@import '_dialogs';
@import '_labels';
@import '_panels';
@import '_dividers';
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
}
}
// External plugins
@import '_plugin-snackbarjs';
@import '_plugin-nouislider';
@import '_plugin-selectize';
@import '_plugin-dropdownjs';

307
sass/_mixins-fullpalette.scss Normal file
View File

@ -0,0 +1,307 @@
// This file is NOT automatically converted and must be manually merged
@import 'mixins-shared';
@mixin generic-variations-colors($args) {
//@debug "multi-palette generic-variations-colors called with #{inspect($args)}";
$material-colors: (
"red-50": (name: "red", color: $red-50, number: "-50"),
"red-100": (name: "red", color: $red-100, number: "-100"),
"red-200": (name: "red", color: $red-200, number: "-200"),
"red-300": (name: "red", color: $red-300, number: "-300"),
"red-400": (name: "red", color: $red-400, number: "-400"),
"red-500": (name: "red", color: $red-500, number: "-500"),
"red-600": (name: "red", color: $red-600, number: "-600"),
"red-700": (name: "red", color: $red-700, number: "-700"),
"red-800": (name: "red", color: $red-800, number: "-800"),
"red-900": (name: "red", color: $red-900, number: "-900"),
"red-A100": (name: "red", color: $red-A100, number: "-A100"),
"red-A200": (name: "red", color: $red-A200, number: "-A200"),
"red-A400": (name: "red", color: $red-A400, number: "-A400"),
"red-A700": (name: "red", color: $red-A700, number: "-A700"),
"red": (name: "red", color: $red, number: ""),
"pink-50": (name: "pink", color: $pink-50, number: "-50"),
"pink-100": (name: "pink", color: $pink-100, number: "-100"),
"pink-200": (name: "pink", color: $pink-200, number: "-200"),
"pink-300": (name: "pink", color: $pink-300, number: "-300"),
"pink-400": (name: "pink", color: $pink-400, number: "-400"),
"pink-500": (name: "pink", color: $pink-500, number: "-500"),
"pink-600": (name: "pink", color: $pink-600, number: "-600"),
"pink-700": (name: "pink", color: $pink-700, number: "-700"),
"pink-800": (name: "pink", color: $pink-800, number: "-800"),
"pink-900": (name: "pink", color: $pink-900, number: "-900"),
"pink-A100": (name: "pink", color: $pink-A100, number: "-A100"),
"pink-A200": (name: "pink", color: $pink-A200, number: "-A200"),
"pink-A400": (name: "pink", color: $pink-A400, number: "-A400"),
"pink-A700": (name: "pink", color: $pink-A700, number: "-A700"),
"pink": (name: "pink", color: $pink, number: ""),
"purple-50": (name: "purple", color: $purple-50, number: "-50"),
"purple-100": (name: "purple", color: $purple-100, number: "-100"),
"purple-200": (name: "purple", color: $purple-200, number: "-200"),
"purple-300": (name: "purple", color: $purple-300, number: "-300"),
"purple-400": (name: "purple", color: $purple-400, number: "-400"),
"purple-500": (name: "purple", color: $purple-500, number: "-500"),
"purple-600": (name: "purple", color: $purple-600, number: "-600"),
"purple-700": (name: "purple", color: $purple-700, number: "-700"),
"purple-800": (name: "purple", color: $purple-800, number: "-800"),
"purple-900": (name: "purple", color: $purple-900, number: "-900"),
"purple-A100": (name: "purple", color: $purple-A100, number: "-A100"),
"purple-A200": (name: "purple", color: $purple-A200, number: "-A200"),
"purple-A400": (name: "purple", color: $purple-A400, number: "-A400"),
"purple-A700": (name: "purple", color: $purple-A700, number: "-A700"),
"purple": (name: "purple", color: $purple, number: ""),
"deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"),
"deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"),
"deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"),
"deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"),
"deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"),
"deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"),
"deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"),
"deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"),
"deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"),
"deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"),
"deep-purple-A100": (name: "deep-purple", color: $deep-purple-A100, number: "-A100"),
"deep-purple-A200": (name: "deep-purple", color: $deep-purple-A200, number: "-A200"),
"deep-purple-A400": (name: "deep-purple", color: $deep-purple-A400, number: "-A400"),
"deep-purple-A700": (name: "deep-purple", color: $deep-purple-A700, number: "-A700"),
"deep-purple": (name: "deep-purple", color: $deep-purple, number: ""),
"indigo-50": (name: "indigo", color: $indigo-50, number: "-50"),
"indigo-100": (name: "indigo", color: $indigo-100, number: "-100"),
"indigo-200": (name: "indigo", color: $indigo-200, number: "-200"),
"indigo-300": (name: "indigo", color: $indigo-300, number: "-300"),
"indigo-400": (name: "indigo", color: $indigo-400, number: "-400"),
"indigo-500": (name: "indigo", color: $indigo-500, number: "-500"),
"indigo-600": (name: "indigo", color: $indigo-600, number: "-600"),
"indigo-700": (name: "indigo", color: $indigo-700, number: "-700"),
"indigo-800": (name: "indigo", color: $indigo-800, number: "-800"),
"indigo-900": (name: "indigo", color: $indigo-900, number: "-900"),
"indigo-A100": (name: "indigo", color: $indigo-A100, number: "-A100"),
"indigo-A200": (name: "indigo", color: $indigo-A200, number: "-A200"),
"indigo-A400": (name: "indigo", color: $indigo-A400, number: "-A400"),
"indigo-A700": (name: "indigo", color: $indigo-A700, number: "-A700"),
"indigo": (name: "indigo", color: $indigo, number: ""),
"blue-50": (name: "blue", color: $blue-50, number: "-50"),
"blue-100": (name: "blue", color: $blue-100, number: "-100"),
"blue-200": (name: "blue", color: $blue-200, number: "-200"),
"blue-300": (name: "blue", color: $blue-300, number: "-300"),
"blue-400": (name: "blue", color: $blue-400, number: "-400"),
"blue-500": (name: "blue", color: $blue-500, number: "-500"),
"blue-600": (name: "blue", color: $blue-600, number: "-600"),
"blue-700": (name: "blue", color: $blue-700, number: "-700"),
"blue-800": (name: "blue", color: $blue-800, number: "-800"),
"blue-900": (name: "blue", color: $blue-900, number: "-900"),
"blue-A100": (name: "blue", color: $blue-A100, number: "-A100"),
"blue-A200": (name: "blue", color: $blue-A200, number: "-A200"),
"blue-A400": (name: "blue", color: $blue-A400, number: "-A400"),
"blue-A700": (name: "blue", color: $blue-A700, number: "-A700"),
"blue": (name: "blue", color: $blue, number: ""),
"light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"),
"light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"),
"light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"),
"light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"),
"light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"),
"light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"),
"light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"),
"light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"),
"light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"),
"light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"),
"light-blue-A100": (name: "light-blue", color: $light-blue-A100, number: "-A100"),
"light-blue-A200": (name: "light-blue", color: $light-blue-A200, number: "-A200"),
"light-blue-A400": (name: "light-blue", color: $light-blue-A400, number: "-A400"),
"light-blue-A700": (name: "light-blue", color: $light-blue-A700, number: "-A700"),
"light-blue": (name: "light-blue", color: $light-blue, number: ""),
"cyan-50": (name: "cyan", color: $cyan-50, number: "-50"),
"cyan-100": (name: "cyan", color: $cyan-100, number: "-100"),
"cyan-200": (name: "cyan", color: $cyan-200, number: "-200"),
"cyan-300": (name: "cyan", color: $cyan-300, number: "-300"),
"cyan-400": (name: "cyan", color: $cyan-400, number: "-400"),
"cyan-500": (name: "cyan", color: $cyan-500, number: "-500"),
"cyan-600": (name: "cyan", color: $cyan-600, number: "-600"),
"cyan-700": (name: "cyan", color: $cyan-700, number: "-700"),
"cyan-800": (name: "cyan", color: $cyan-800, number: "-800"),
"cyan-900": (name: "cyan", color: $cyan-900, number: "-900"),
"cyan-A100": (name: "cyan", color: $cyan-A100, number: "-A100"),
"cyan-A200": (name: "cyan", color: $cyan-A200, number: "-A200"),
"cyan-A400": (name: "cyan", color: $cyan-A400, number: "-A400"),
"cyan-A700": (name: "cyan", color: $cyan-A700, number: "-A700"),
"cyan": (name: "cyan", color: $cyan, number: ""),
"teal-50": (name: "teal", color: $teal-50, number: "-50"),
"teal-100": (name: "teal", color: $teal-100, number: "-100"),
"teal-200": (name: "teal", color: $teal-200, number: "-200"),
"teal-300": (name: "teal", color: $teal-300, number: "-300"),
"teal-400": (name: "teal", color: $teal-400, number: "-400"),
"teal-500": (name: "teal", color: $teal-500, number: "-500"),
"teal-600": (name: "teal", color: $teal-600, number: "-600"),
"teal-700": (name: "teal", color: $teal-700, number: "-700"),
"teal-800": (name: "teal", color: $teal-800, number: "-800"),
"teal-900": (name: "teal", color: $teal-900, number: "-900"),
"teal-A100": (name: "teal", color: $teal-A100, number: "-A100"),
"teal-A200": (name: "teal", color: $teal-A200, number: "-A200"),
"teal-A400": (name: "teal", color: $teal-A400, number: "-A400"),
"teal-A700": (name: "teal", color: $teal-A700, number: "-A700"),
"teal": (name: "teal", color: $teal, number: ""),
"green-50": (name: "green", color: $green-50, number: "-50"),
"green-100": (name: "green", color: $green-100, number: "-100"),
"green-200": (name: "green", color: $green-200, number: "-200"),
"green-300": (name: "green", color: $green-300, number: "-300"),
"green-400": (name: "green", color: $green-400, number: "-400"),
"green-500": (name: "green", color: $green-500, number: "-500"),
"green-600": (name: "green", color: $green-600, number: "-600"),
"green-700": (name: "green", color: $green-700, number: "-700"),
"green-800": (name: "green", color: $green-800, number: "-800"),
"green-900": (name: "green", color: $green-900, number: "-900"),
"green-A100": (name: "green", color: $green-A100, number: "-A100"),
"green-A200": (name: "green", color: $green-A200, number: "-A200"),
"green-A400": (name: "green", color: $green-A400, number: "-A400"),
"green-A700": (name: "green", color: $green-A700, number: "-A700"),
"green": (name: "green", color: $green, number: ""),
"light-green-50": (name: "light-green", color: $light-green-50, number: "-50"),
"light-green-100": (name: "light-green", color: $light-green-100, number: "-100"),
"light-green-200": (name: "light-green", color: $light-green-200, number: "-200"),
"light-green-300": (name: "light-green", color: $light-green-300, number: "-300"),
"light-green-400": (name: "light-green", color: $light-green-400, number: "-400"),
"light-green-500": (name: "light-green", color: $light-green-500, number: "-500"),
"light-green-600": (name: "light-green", color: $light-green-600, number: "-600"),
"light-green-700": (name: "light-green", color: $light-green-700, number: "-700"),
"light-green-800": (name: "light-green", color: $light-green-800, number: "-800"),
"light-green-900": (name: "light-green", color: $light-green-900, number: "-900"),
"light-green-A100": (name: "light-green", color: $light-green-A100, number: "-A100"),
"light-green-A200": (name: "light-green", color: $light-green-A200, number: "-A200"),
"light-green-A400": (name: "light-green", color: $light-green-A400, number: "-A400"),
"light-green-A700": (name: "light-green", color: $light-green-A700, number: "-A700"),
"light-green": (name: "light-green", color: $light-green, number: ""),
"lime-50": (name: "lime", color: $lime-50, number: "-50"),
"lime-100": (name: "lime", color: $lime-100, number: "-100"),
"lime-200": (name: "lime", color: $lime-200, number: "-200"),
"lime-300": (name: "lime", color: $lime-300, number: "-300"),
"lime-400": (name: "lime", color: $lime-400, number: "-400"),
"lime-500": (name: "lime", color: $lime-500, number: "-500"),
"lime-600": (name: "lime", color: $lime-600, number: "-600"),
"lime-700": (name: "lime", color: $lime-700, number: "-700"),
"lime-800": (name: "lime", color: $lime-800, number: "-800"),
"lime-900": (name: "lime", color: $lime-900, number: "-900"),
"lime-A100": (name: "lime", color: $lime-A100, number: "-A100"),
"lime-A200": (name: "lime", color: $lime-A200, number: "-A200"),
"lime-A400": (name: "lime", color: $lime-A400, number: "-A400"),
"lime-A700": (name: "lime", color: $lime-A700, number: "-A700"),
"lime": (name: "lime", color: $lime, number: ""),
"yellow-50": (name: "yellow", color: $yellow-50, number: "-50"),
"yellow-100": (name: "yellow", color: $yellow-100, number: "-100"),
"yellow-200": (name: "yellow", color: $yellow-200, number: "-200"),
"yellow-300": (name: "yellow", color: $yellow-300, number: "-300"),
"yellow-400": (name: "yellow", color: $yellow-400, number: "-400"),
"yellow-500": (name: "yellow", color: $yellow-500, number: "-500"),
"yellow-600": (name: "yellow", color: $yellow-600, number: "-600"),
"yellow-700": (name: "yellow", color: $yellow-700, number: "-700"),
"yellow-800": (name: "yellow", color: $yellow-800, number: "-800"),
"yellow-900": (name: "yellow", color: $yellow-900, number: "-900"),
"yellow-A100": (name: "yellow", color: $yellow-A100, number: "-A100"),
"yellow-A200": (name: "yellow", color: $yellow-A200, number: "-A200"),
"yellow-A400": (name: "yellow", color: $yellow-A400, number: "-A400"),
"yellow-A700": (name: "yellow", color: $yellow-A700, number: "-A700"),
"yellow": (name: "yellow", color: $yellow, number: ""),
"amber-50": (name: "amber", color: $amber-50, number: "-50"),
"amber-100": (name: "amber", color: $amber-100, number: "-100"),
"amber-200": (name: "amber", color: $amber-200, number: "-200"),
"amber-300": (name: "amber", color: $amber-300, number: "-300"),
"amber-400": (name: "amber", color: $amber-400, number: "-400"),
"amber-500": (name: "amber", color: $amber-500, number: "-500"),
"amber-600": (name: "amber", color: $amber-600, number: "-600"),
"amber-700": (name: "amber", color: $amber-700, number: "-700"),
"amber-800": (name: "amber", color: $amber-800, number: "-800"),
"amber-900": (name: "amber", color: $amber-900, number: "-900"),
"amber-A100": (name: "amber", color: $amber-A100, number: "-A100"),
"amber-A200": (name: "amber", color: $amber-A200, number: "-A200"),
"amber-A400": (name: "amber", color: $amber-A400, number: "-A400"),
"amber-A700": (name: "amber", color: $amber-A700, number: "-A700"),
"amber": (name: "amber", color: $amber, number: ""),
"orange-50": (name: "orange", color: $orange-50, number: "-50"),
"orange-100": (name: "orange", color: $orange-100, number: "-100"),
"orange-200": (name: "orange", color: $orange-200, number: "-200"),
"orange-300": (name: "orange", color: $orange-300, number: "-300"),
"orange-400": (name: "orange", color: $orange-400, number: "-400"),
"orange-500": (name: "orange", color: $orange-500, number: "-500"),
"orange-600": (name: "orange", color: $orange-600, number: "-600"),
"orange-700": (name: "orange", color: $orange-700, number: "-700"),
"orange-800": (name: "orange", color: $orange-800, number: "-800"),
"orange-900": (name: "orange", color: $orange-900, number: "-900"),
"orange-A100": (name: "orange", color: $orange-A100, number: "-A100"),
"orange-A200": (name: "orange", color: $orange-A200, number: "-A200"),
"orange-A400": (name: "orange", color: $orange-A400, number: "-A400"),
"orange-A700": (name: "orange", color: $orange-A700, number: "-A700"),
"orange": (name: "orange", color: $orange, number: ""),
"deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"),
"deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"),
"deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"),
"deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"),
"deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"),
"deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"),
"deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"),
"deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"),
"deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"),
"deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"),
"deep-orange-A100": (name: "deep-orange", color: $deep-orange-A100, number: "-A100"),
"deep-orange-A200": (name: "deep-orange", color: $deep-orange-A200, number: "-A200"),
"deep-orange-A400": (name: "deep-orange", color: $deep-orange-A400, number: "-A400"),
"deep-orange-A700": (name: "deep-orange", color: $deep-orange-A700, number: "-A700"),
"deep-orange": (name: "deep-orange", color: $deep-orange, number: ""),
"brown-50": (name: "brown", color: $brown-50, number: "-50"),
"brown-100": (name: "brown", color: $brown-100, number: "-100"),
"brown-200": (name: "brown", color: $brown-200, number: "-200"),
"brown-300": (name: "brown", color: $brown-300, number: "-300"),
"brown-400": (name: "brown", color: $brown-400, number: "-400"),
"brown-500": (name: "brown", color: $brown-500, number: "-500"),
"brown-600": (name: "brown", color: $brown-600, number: "-600"),
"brown-700": (name: "brown", color: $brown-700, number: "-700"),
"brown-800": (name: "brown", color: $brown-800, number: "-800"),
"brown-900": (name: "brown", color: $brown-900, number: "-900"),
"brown-A100": (name: "brown", color: $brown-A100, number: "-A100"),
"brown-A200": (name: "brown", color: $brown-A200, number: "-A200"),
"brown-A400": (name: "brown", color: $brown-A400, number: "-A400"),
"brown-A700": (name: "brown", color: $brown-A700, number: "-A700"),
"brown": (name: "brown", color: $brown, number: ""),
"grey-50": (name: "grey", color: $grey-50, number: "-50"),
"grey-100": (name: "grey", color: $grey-100, number: "-100"),
"grey-200": (name: "grey", color: $grey-200, number: "-200"),
"grey-300": (name: "grey", color: $grey-300, number: "-300"),
"grey-400": (name: "grey", color: $grey-400, number: "-400"),
"grey-500": (name: "grey", color: $grey-500, number: "-500"),
"grey-600": (name: "grey", color: $grey-600, number: "-600"),
"grey-700": (name: "grey", color: $grey-700, number: "-700"),
"grey-800": (name: "grey", color: $grey-800, number: "-800"),
"grey-900": (name: "grey", color: $grey-900, number: "-900"),
"grey-A100": (name: "grey", color: $grey-A100, number: "-A100"),
"grey-A200": (name: "grey", color: $grey-A200, number: "-A200"),
"grey-A400": (name: "grey", color: $grey-A400, number: "-A400"),
"grey-A700": (name: "grey", color: $grey-A700, number: "-A700"),
"grey": (name: "grey", color: $grey, number: ""),
"blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"),
"blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"),
"blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"),
"blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"),
"blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"),
"blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"),
"blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"),
"blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"),
"blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"),
"blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"),
"blue-grey-A100": (name: "blue-grey", color: $blue-grey-A100, number: "-A100"),
"blue-grey-A200": (name: "blue-grey", color: $blue-grey-A200, number: "-A200"),
"blue-grey-A400": (name: "blue-grey", color: $blue-grey-A400, number: "-A400"),
"blue-grey-A700": (name: "blue-grey", color: $blue-grey-A700, number: "-A700"),
"blue-grey": (name: "blue-grey", color: $blue-grey, number: "")
);
@each $material-color-combination, $color-attributes in $material-colors {
// build a single depth color palette
$args-variation-color: map-merge($args, (
material-color-name: map-get($color-attributes, name),
material-color: map-get($color-attributes, color),
material-color-number: map-get($color-attributes, number)
));
//@debug "generic-variations-color #{map-get($color-attributes, name)} #{map-get($color-attributes, color)} #{map-get($color-attributes, number)}";
@include generic-variations-color($args-variation-color)
}
}

285
sass/_mixins-shared.scss Normal file
View File

@ -0,0 +1,285 @@
// This file is NOT automatically converted and must be manually merged
@import "mixins-utilities";
// variations(unquote(""), background-color, #FFF);
@mixin variations($extra, $material-param-1, $default) {
@include generic-variations($extra, $default, "variations-content", $material-param-1);
}
@mixin variations-content($args) {
//@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, material-color)}; }";
//@debug "#{inspect($args)}";
//@error "break here";
#{map-get($args, material-param-1)}: map-get($args, material-color);
}
@mixin background-variations($extra, $default) {
@include generic-variations($extra, $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;
} @else {
color: map-get($args, material-text-color);
}
}
@mixin text-variations($extra, $default) {
@include generic-variations($extra, $default, "text-variations-content", null);
}
@mixin text-variations-content($args) {
color: map-get($args, material-color);
}
@mixin button-variations($extra, $default, $material-param-1) {
@include generic-variations($extra, $default, "button-variations-content", $material-param-1);
}
@mixin button-variations-content($args) {
//@debug "#{inspect($args)}";
$material-color: map-get($args, material-color);
$material-param-1: map-get($args, material-param-1);
background-color: contrast-color($material-color,
darken($material-color, $material-param-1),
lighten($material-color, $material-param-1));
}
@mixin bg-color-variations($extra, $default, $material-param-1) {
@include generic-variations($extra, $default, "bg-color-variations-content", $material-param-1);
}
@mixin bg-color-variations-content($args) {
background-color: rgba(map-get($args, material-color), map-get($args, material-param-1));
}
// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
@mixin bg-box-shadow-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-box-shadow-variations-content", null);
}
@mixin bg-box-shadow-variations-content($args){
$material-color: map-get($args, material-color);
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100));
}
// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
@mixin bg-img-variations($extra, $default) {
@include generic-variations($extra, $default, "bg-img-variations-content", null);
}
@mixin bg-img-variations-content($args){
$material-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)}";
background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color);
}
// navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $primary
@mixin navbar-variations($extra, $default) {
@include generic-variations($extra, $default, "navbar-variations-content", null);
}
@mixin navbar-variations-content($args){
$material-color: map-get($args, material-color);
$material-text-color: map-get($args, material-text-color);
background-color: $material-color;
color: $material-text-color;
// deeply defined to override welljumbo class without !impotant need
.navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
color: $material-text-color;
}
.dropdown-menu {
border-radius: $dropdown-radius;
li > a {
font-size: $dropdown-font-size;
padding: 13px 16px;
&:hover,
&:focus {
color: $material-color;
background-color: $grey-200;
}
}
.active > a {
&:hover,
&:focus {
color: $material-text-color;
}
background-color: $material-color;
color: $material-text-color;
}
}
}
// alert-variations("", $primary)
@mixin alert-variations($extra, $default) {
@include generic-variations($extra, $default, "alert-variations-content", null);
}
@mixin alert-variations-content($args){
$material-color: map-get($args, material-color);
$material-text-color: map-get($args, material-text-color);
background-color: $material-color;
color: $material-text-color;
a, .alert-link {
color: $material-text-color;
}
}
// interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
@mixin call-variations-content-mixin($args) {
$mixin-name: map-get($args, mixin-name);
@if $mixin-name == variations-content {
@include variations-content($args);
} @else if $mixin-name == background-variations-content {
@include background-variations-content($args);
} @else if $mixin-name == text-variations-content {
@include text-variations-content($args);
} @else if $mixin-name == button-variations-content {
@include button-variations-content($args);
} @else if $mixin-name == bg-color-variations-content {
@include bg-color-variations-content($args);
} @else if $mixin-name == bg-box-shadow-variations-content {
@include bg-box-shadow-variations-content($args);
} @else if $mixin-name == bg-img-variations-content {
@include bg-img-variations-content($args);
} @else if $mixin-name == navbar-variations-content {
@include navbar-variations-content($args);
}@else if $mixin-name == alert-variations-content {
@include alert-variations-content($args);
} @else {
@error "Unknown mixin: #{$mixin-name}"
}
}
//
// To use this mixin you should pass a function as final parameter to define
// the style. In that definition you can use the following variables to define it.
//
// $material-color-name ---> "red", "green", "indigo" ...
// $material-color-full-name ---> "red", "green-50", "indigo-400" ...
// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ...
// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ...
//
@mixin generic-variations($extra, $default, $mixin-name, $material-param-1) {
//setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include)
$args: (
extra: $extra,
default: $default,
mixin-name: $mixin-name,
material-param-1: $material-param-1
);
// bootstrap styles
&#{$extra}, &-default#{$extra} {
$args-extra: map-merge($args, (
material-color-name: "default",
material-color-full-name: "default",
material-color: $default,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-extra);
}
&-black#{$extra} {
$args-black: map-merge($args, (
material-color-name: "black",
material-color-full-name: "black",
material-color: $black,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-black);
}
&-white#{$extra} {
$args-white: map-merge($args, (
material-color-name: "white",
material-color-full-name: "white",
material-color: $white,
material-text-color: $lightbg-text
));
@include call-variations-content-mixin($args-white);
}
&-inverse#{$extra} {
$args-inverse: map-merge($args, (
material-color-name: "inverse",
material-color-full-name: "inverse",
material-color: $inverse,
material-text-color: contrast-color($inverse, $lightbg-text, $darkbg-text)
));
@include call-variations-content-mixin($args-inverse);
}
&-primary#{$extra} {
$args-primary: map-merge($args, (
material-color-name: "primary",
material-color-full-name: "primary",
material-color: $primary,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-primary);
}
&-success#{$extra} {
$args-success: map-merge($args, (
material-color-name: "success",
material-color-full-name: "success",
material-color: $success,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-success);
}
&-info#{$extra} {
$args-info: map-merge($args, (
material-color-name: "info",
material-color-full-name: "info",
material-color: $info,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-info);
}
&-warning#{$extra} {
$args-warning: map-merge($args, (
material-color-name: "warning",
material-color-full-name: "warning",
material-color: $warning,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-warning);
}
&-danger#{$extra} {
$args-danger: map-merge($args, (
material-color-name: "danger",
material-color-full-name: "danger",
material-color: $danger,
material-text-color: $darkbg-text
));
@include call-variations-content-mixin($args-danger);
}
@include generic-variations-colors($args)
}
@mixin generic-variations-color($args) {
$material-color-name: map-get($args, material-color-name);
$material-color-number: map-get($args, material-color-number);
$material-color-full-name: "#{$material-color-name}#{$material-color-number}";
$material-color: map-get($args, material-color); // $material-color-full-name;
$material-text-color: contrast-color($material-color, $lightbg-text, $darkbg-text);
&-material-#{$material-color-name}#{unquote($material-color-number)}#{map-get($args, extra)} {
$args-color: map-merge($args, (
material-color-full-name: $material-color-full-name,
material-color: $material-color,
material-text-color: $material-text-color,
));
@include call-variations-content-mixin($args-color);
}
}
$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger");

29
sass/_mixins-utilities.scss Normal file
View File

@ -0,0 +1,29 @@
// This file is here to emulate the less #contrast function
// contrast-color and brightness borrowed from compass
// Copyright (c) 2009-2014 Christopher M. Eppstein
// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown
@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
@if $threshold {
// Deprecated in Compass 0.13
@warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
}
@if $color == null {
@return null;
}
@else {
$color-brightness: brightness($color);
$dark-text-brightness: brightness($dark);
$light-text-brightness: brightness($light);
@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
}
}
@function brightness($color) {
@if type-of($color) == color {
@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
}
@else {
@return unquote("brightness(#{$color})");
}
}

63
sass/_mixins.scss
View File

@ -1,32 +1,41 @@
@mixin card-variant($background, $color, $border) { // This file is NOT automatically converted and must be manually merged
background-color: $background; @import 'mixins-shared';
color: $color;
.card-footer, .card-header { @mixin generic-variations-colors($args) {
border-color: $border;
}
a { $material-colors: (
color: $color; "red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"grey": $grey,
"blue-grey": $blue-grey
);
@each $material-color-name, $material-color in $material-colors {
// build a single depth color palette
$args-variation-color: map-merge($args, (
material-color-name: $material-color-name,
material-color: $material-color,
material-color-number: ""
));
@include generic-variations-color($args-variation-color)
} }
} }
@mixin button-variant($color) { // http://hugogiraudel.com/2014/01/27/casting-types-in-sass/
background-color: $color; // https://github.com/HugoGiraudel/SassyJSON/blob/master/stylesheets/decode/helpers/color/_color.scss
}
@mixin alert-variant($color) {
background-color: $color;
}
@mixin progress-bar-variant($color) {
background-color: $color;
}
@mixin navbar-variant($color) {
background-color: $color;
}
@mixin icon-variant($color) {
color: $color;
}

443
sass/_navbar.scss
View File

@ -1,286 +1,193 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.navbar { .navbar {
background-color: $navbar-default-bg; background-color: $primary;
border: 0; border: $zero;
border-radius: 0; border-radius: $zero;
.navbar-brand { .navbar-brand {
position: relative; position: relative;
height: 60px; height: 60px;
line-height: 30px; line-height: 30px;
color: $navbar-brand-color; color: inherit;
&:hover, &:hover,
&:focus { &:focus {
color: $navbar-brand-color; color: inherit;
background-color: transparent; background-color: transparent;
}
}
.navbar-text {
color: inherit;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar-nav {
> li > a {
color: inherit;
padding-top: 20px;
padding-bottom: 20px;
&:hover,
&:focus {
color: inherit;
background-color: transparent;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: inherit;
background-color: transparent;
opacity: 0.9;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border: $zero;
&:hover,
&:focus {
background-color: transparent;
}
.icon-bar {
background-color: inherit;
border: 1px solid;
}
}
.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar-collapse,
.navbar-form {
border-color: rgba(0,0,0,0.1);
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: transparent;
color: inherit;
}
}
@media (max-width: 767px) {
.navbar-text {
color: inherit;
margin-top: 15px;
margin-bottom: 15px;
}
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border: $zero;
color: inherit;
}
.divider {
border-bottom: 1px solid;
opacity: 0.08;
} }
}
.navbar-text {
color: $navbar-color;
margin-top: 20px;
margin-bottom: 20px;
}
.navbar-nav {
> li > a { > li > a {
color: $navbar-link-color; color: inherit;
padding-top: 20px; &:hover,
padding-bottom: 20px; &:focus {
color: inherit;
&:hover, background-color: transparent;
&:focus { }
color: $navbar-link-hover-color;
background-color: $navbar-link-hover-bg;
}
} }
> .active > a { > .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: $navbar-link-active-color; color: inherit;
background-color: $navbar-link-active-bg; background-color: transparent;
} }
} }
> .disabled > a { > .disabled > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: $navbar-link-disabled-color; color: inherit;
background-color: $navbar-link-disabled-bg; background-color: transparent;
} }
} }
}
} }
}
// Darken the responsive nav toggle .navbar-link {
.navbar-toggle { color: inherit;
border-color: $navbar-toggle-border-color; &:hover {
&:hover, color: inherit;
&:focus {
background-color: $navbar-toggle-hover-bg;
}
.icon-bar {
background-color: $navbar-toggle-icon-bar-bg;
}
} }
}
.navbar-collapse, .btn-link {
color: inherit;
&:hover,
&:focus {
color: inherit;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: inherit;
}
}
}
.navbar-form {
margin-top: 16px;
.form-control-wrapper .form-control, .form-control {
border-color: inherit;
color: inherit;
}
.form-control-wrapper {
.material-input:before, input:focus ~ .material-input:after {
background-color: inherit;
}
}
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
@include navbar-variations(unquote(".navbar"), $primary);
&-inverse {
background-color: $indigo;
}
@media (max-width: 1199px) {
.navbar-brand {
height: 50px;
padding: 10px 15px;
}
.navbar-form { .navbar-form {
border-color: rgba(0,0,0,0.1); margin-top: 10px;
} }
// Dropdowns .navbar-nav > li > a {
.navbar-nav { padding-top: 15px;
> .open > a { padding-bottom: 15px;
&,
&:hover,
&:focus {
background-color: $navbar-link-active-bg;
color: $navbar-link-active-color;
}
}
@media (max-width: 767px) {
// Dropdowns get custom display
.open .dropdown-menu {
> .dropdown-header {
border: 0;
color: darken($navbar-link-color, 17%)
}
.divider {
background-color: $navbar-border;
}
> li > a {
color: $navbar-link-color;
&:hover,
&:focus {
color: $navbar-link-hover-color;
background-color: $navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $navbar-link-active-color;
background-color: $navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: $navbar-link-disabled-color;
background-color: $navbar-link-disabled-bg;
}
}
}
}
}
.navbar-link {
color: $navbar-link-color;
&:hover {
color: $navbar-link-hover-color;
}
}
.navbar-link {
color: $navbar-link-color;
&:hover,
&:focus {
color: $navbar-link-hover-color;
}
&[disabled],
fieldset[disabled] & {
&:hover,
&:focus {
color: $navbar-link-disabled-color;
}
}
}
.navbar-form {
margin-top: 16px;
.form-control-wrapper .form-control, .form-control {
border-color: $navbar-border;
color: $navbar-border;
}
.form-control-wrapper {
.material-input:before, input:focus ~ .material-input:after {
background-color: $navbar-border;
}
}
::-webkit-input-placeholder { color: $navbar-border; }
:-moz-placeholder { color: $navbar-border; };
::-moz-placeholder { color: $navbar-border; };
:-ms-input-placeholder { color: $navbar-border; };
} }
}
} }
.navbar-inverse {
background-color: $navbar-inverse-bg;
}
.navbar-white {
background-color: #FFF;
.navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
color: $lightbg-text;
}
.navbar-nav {
& > li > a {
color: $lightbg-text;
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-hover-bg;
}
}
& > .active > a {
&,
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-active-bg;
}
}
& > .disabled > a {
&,
&:hover,
&:focus {
color: $lightbg-text;
background-color: $navbar-link-disabled-bg;
}
}
& > .open > a {
&,
&:hover,
&:focus {
background-color: $navbar-link-active-bg;
color: $lightbg-text;
}
}
}
}
// Navbar alternate
// --------------------------------------------------
.navbar-default {
@include navbar-variant($primary);
}
.navbar-primary {
@include navbar-variant($primary);
}
// Success appears as green
.navbar-success {
@include navbar-variant($success);
}
// Info appears as blue-green
.navbar-info {
@include navbar-variant($info);
}
// Warning appears as orange
.navbar-warning {
@include navbar-variant($warning);
}
// Danger and error appear as red
.navbar-danger {
@include navbar-variant($danger);
}
// Material shades
.navbar-material-red {
@include navbar-variant($red)
}
.navbar-material-pink {
@include navbar-variant($pink);
}
.navbar-material-purple {
@include navbar-variant($purple);
}
.navbar-material-deeppurple {
@include navbar-variant($deeppurple);
}
.navbar-material-indigo {
@include navbar-variant($indigo);
}
.navbar-material-lightblue {
@include navbar-variant($lightblue);
}
.navbar-material-cyan {
@include navbar-variant($cyan);
}
.navbar-material-teal {
@include navbar-variant($teal);
}
.navbar-material-lightgreen {
@include navbar-variant($lightgreen);
}
.navbar-material-lime {
@include navbar-variant($lime);
}
.navbar-material-lightyellow {
@include navbar-variant($lightyellow);
}
.navbar-material-orange {
@include navbar-variant($orange);
}
.navbar-material-deeporange {
@include navbar-variant($deeporange);
}
.navbar-material-grey {
@include navbar-variant($grey);
}
.navbar-material-bluegrey {
@include navbar-variant($bluegrey);
}
.navbar-material-brown {
@include navbar-variant($brown);
}
.navbar-material-lightgrey {
@include navbar-variant($lightgrey);
}

23
sass/_panels.scss Normal file
View File

@ -0,0 +1,23 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.panel {
border-radius: 2px;
border: 0;
@include variations(unquote(" > .panel-heading"), background-color, $grey-200);
@include shadow-z-1;
}
[class*="panel-"] > .panel-heading {
color: $darkbg-text;
border: 0;
}
.panel-default, .panel:not([class*="panel-"]) {
> .panel-heading {
color: $lightbg-text;
}
}
.panel-footer {
background-color: $grey-200;
}

21
sass/_plugin-dropdownjs.scss Normal file
View File

@ -0,0 +1,21 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.dropdownjs:after {
right: 5px;
top: 3px;
font-size: 25px;
position: absolute;
content: "\e8ac";
font-family: "Material-Design-Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
pointer-events: none;
color: #757575;
}

36
sass/_plugin-nouislider.scss
View File

@ -1,3 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.noUi-target, .noUi-target,
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -37,12 +39,20 @@
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; top: -5px;
cursor: ew-resize;
border-radius: 100%;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-vertical .noUi-handle {
margin-left: 5px;
cursor: ns-resize;
} }
.noUi-horizontal.noUi-extended { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -70,18 +80,18 @@
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; margin: 15px 0;
} }
.noUi-horizontal .noUi-handle.noUi-active { .noUi-vertical {
transform: scale(2.5); height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
transform: scale3d(2.5, 2.5, 1);
} }
[disabled].noUi-slider{ [disabled].noUi-slider{
opacity: 0.5; opacity: 0.5;
@ -95,8 +105,8 @@
} }
.slider { .slider {
//.variations(#{".noUi-connect"}, background-color, $primary); @include variations(unquote(".noUi-connect"), background-color, $primary);
//.variations(#{" .noUi-connect"}, background-color, $primary); @include variations(unquote(" .noUi-connect"), background-color, $primary);
//.variations(#{" .noUi-handle"}, background-color, $primary); @include variations(unquote(" .noUi-handle"), background-color, $primary);
//.variations(#{" .noUi-handle"}, border-color, $primary); @include variations(unquote(" .noUi-handle"), border-color, $primary);
} }

93
sass/_plugin-selectize.scss Normal file
View File

@ -0,0 +1,93 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// Support for Selectize plugin
// http://brianreavis.github.io/selectize.js/
.selectize-control.single, .selectize-control.multi {
padding: 0;
.selectize-input, .selectize-input.input-active {
cursor: text;
background: transparent;
box-shadow: none;
border: 0;
padding: 0;
height: 100%;
font-size: 14px;
line-height: 30px;
.has-items {
padding: 0;
}
&:after {
right: 5px;
position: absolute;
font-size: 7px;
content: "\e894";
font-family: "Material-Design-Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input {
font-size: 14px;
outline: 0px;
border: 0px;
background: transparent;
}
&.floating-label-fix input {
opacity: 0;
}
> div, > .item {
display: inline-block;
margin: 0 8px 3px 0;
padding: 0;
background: transparent;
border: 0;
&:after {
content: ",";
}
&:last-of-type:after {
content: "";
}
&.active {
font-weight: bold;
background: transparent;
border: 0;
}
}
}
.selectize-dropdown {
position: absolute;
z-index: 1000;
border: 0;
width: 100% !important;
left: 0 !important;
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;
padding: 0;
margin-top: 3px;
.active {
background-color: inherit;
}
.highlight {
background-color: #d5d8ff;
}
.selected, .selected.active {
background-color: #EEEEEE;
}
[data-selectable], .optgroup-header {
padding: 10px 20px;
cursor: pointer;
}
}
.dropdown-active ~ .selectize-dropdown {
display: block;
}
}

4
sass/_plugin-snackbarjs.scss
View File

@ -1,3 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// Support for SnackbarJS plugin // Support for SnackbarJS plugin
// https://github.com/FezVrasta/snackbarjs // https://github.com/FezVrasta/snackbarjs
@ -7,7 +9,7 @@
color: $darkbg-text; color: $darkbg-text;
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
@extend .shadow-z-1; @include shadow-z-1;
// Animation // Animation
height: 0; height: 0;

29
sass/_popups.scss
View File

@ -1,25 +1,20 @@
.popover, .tooltip-inner { // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
background: #323232;
color: #FFF;
border-radius: 2px;
.popover, .tooltip-inner {
color: $popover-color;
line-height: 1em;
background: $popover-background;
border: none;
border-radius: $material-border-radius;
@include shadow-z-1();
} }
.tooltip, .tooltip.in { .tooltip, .tooltip.in {
opacity: 1; opacity: 1;
} }
.popover, .tooltip { .popover, .tooltip {
&.left .arrow:after, &.left .tooltip-arrow { .arrow, .tooltip-arrow {
border-left-color: #323232; display: none;
} }
&.right .arrow:after, &.right .tooltip-arrow {
border-right-color: #323232;
}
&.top .arrow:after, &.top .tooltip-arrow {
border-top-color: #323232;
}
&.bottom .arrow:after, &.bottom .tooltip-arrow {
border-bottom-color: #323232;
}
} }

83
sass/_progress.scss
View File

@ -1,3 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.progress { .progress {
height: 4px; height: 4px;
border-radius: 0; border-radius: 0;
@ -5,85 +7,6 @@
background: #c8c8c8; background: #c8c8c8;
.progress-bar { .progress-bar {
box-shadow: none; box-shadow: none;
@include variations(unquote(""), background-color, $primary);
} }
// Alert buttons
// --------------------------------------------------
.progress-bar-default {
@include progress-bar-variant($primary);
}
.progress-bar-primary {
@include progress-bar-variant($primary);
}
// Success appears as green
.progress-bar-success {
@include progress-bar-variant($success);
}
// Info appears as blue-green
.progress-bar-info {
@include progress-bar-variant($info);
}
// Warning appears as orange
.progress-bar-warning {
@include progress-bar-variant($warning);
}
// Danger and error appear as red
.progress-bar-danger {
@include progress-bar-variant($danger);
}
// Material shades
.progress-bar-material-red {
@include progress-bar-variant($red)
}
.progress-bar-material-pink {
@include progress-bar-variant($pink);
}
.progress-bar-material-purple {
@include progress-bar-variant($purple);
}
.progress-bar-material-deeppurple {
@include progress-bar-variant($deeppurple);
}
.progress-bar-material-indigo {
@include progress-bar-variant($indigo);
}
.progress-bar-material-lightblue {
@include progress-bar-variant($lightblue);
}
.progress-bar-material-cyan {
@include progress-bar-variant($cyan);
}
.progress-bar-material-teal {
@include progress-bar-variant($teal);
}
.progress-bar-material-lightgreen {
@include progress-bar-variant($lightgreen);
}
.progress-bar-material-lime {
@include progress-bar-variant($lime);
}
.progress-bar-material-lightyellow {
@include progress-bar-variant($lightyellow);
}
.progress-bar-material-orange {
@include progress-bar-variant($orange);
}
.progress-bar-material-deeporange {
@include progress-bar-variant($deeporange);
}
.progress-bar-material-grey {
@include progress-bar-variant($grey);
}
.progress-bar-material-bluegrey {
@include progress-bar-variant($bluegrey);
}
.progress-bar-material-brown {
@include progress-bar-variant($brown);
}
.progress-bar-material-lightgrey {
@include progress-bar-variant($lightgrey);
}
} }

169
sass/_radios.scss
View File

@ -1,95 +1,102 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.form-horizontal .radio { .form-horizontal .radio {
margin-bottom: 10px; margin-bottom: 10px;
} }
.radio { .radio {
label { label {
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
span { span {
display: block; display: block;
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 2px; top: 2px;
transition-duration: 0.2s; transition-duration: 0.2s;
}
.circle {
border: 2px solid $lightbg-text;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $radio-default;
transform: scale(0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: $lightbg-text;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale(1.5);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}
} }
//.variations(#{" input[type=radio]:checked ~ .check"}, background-color, $radio-default); .circle {
//.variations(#{" input[type=radio]:checked ~ .circle"}, border-color, $radio-default); border: 2px solid $lightbg-text;
height: 15px;
input[type=radio][disabled] ~ .check, width: 15px;
input[type=radio][disabled] ~ .circle { border-radius: 100%;
opacity: 0.5; }
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: $radio-default;
transform: scale3d(0, 0, 0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: $lightbg-text;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
} }
input[type=radio] { display: none; } }
input[type=radio]:checked ~ .check { @include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $radio-default);
transform: scale(0.55); @include variations(unquote(" input[type=radio]:checked ~ .circle"), border-color, $radio-default);
}
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .check,
border-color: $lightbg-text; input[type=radio][disabled] ~ .circle {
} opacity: 0.5;
input[type=radio][disabled] ~ .check { }
background-color: $lightbg-text;
} input[type=radio] {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
}
input[type=radio]:checked ~ .check {
transform: scale3d(0.55, 0.55, 1);
}
input[type=radio][disabled] ~ .circle {
border-color: $lightbg-text;
}
input[type=radio][disabled] ~ .check {
background-color: $lightbg-text;
}
} }
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0.2; opacity: 0.2;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 0.2; opacity: 0.2;
} }
100% { 100% {
opacity: 0; opacity: 0;
} }
} }

47
sass/_shadows.scss
View File

@ -1,28 +1,37 @@
.shadow-z-1 { // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
box-shadow: 0 1px 3px rgba(0,0,0, .12),
0 1px 2px rgba(0,0,0, .24) ; @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);
} }
.shadow-z-2 { @mixin shadow-z-1-hover {
box-shadow: 0 3px 6px rgba(0,0,0, .16), box-shadow:
0 3px 6px rgba(0,0,0, .23) ; 0 5px 11px 0 rgba(0, 0, 0, 0.18),
} 0 4px 15px 0 rgba(0, 0, 0, 0.15);
.shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0,0,0, .20),
0 3px 6px rgba(0,0,0, .28) ;
} }
.shadow-z-3 { @mixin shadow-z-2 {
box-shadow: 0 10px 20px rgba(0,0,0, .19), box-shadow:
0 6px 6px rgba(0,0,0, .23) ; 0 8px 17px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
.shadow-z-4 { @mixin shadow-z-3 {
box-shadow: 0 14px 28px rgba(0,0,0, .25), box-shadow:
0 10px 10px rgba(0,0,0, .22) ; 0 12px 15px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
} }
.shadow-z-5 { @mixin shadow-z-4 {
box-shadow: 0 19px 38px rgba(0,0,0, .30), box-shadow:
0 15px 12px rgba(0,0,0, .22) ; 0 16px 28px 0 rgba(0, 0, 0, 0.22),
0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
@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);
} }

10
sass/_tabs.scss
View File

@ -1,17 +1,19 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.nav-tabs { .nav-tabs {
background: $navbar-default-bg; background: $primary;
> li { > li {
> a { > a {
color: #FFFFFF; color: #FFFFFF;
border: 0; border: 0;
margin: 0; margin: 0;
&:hover { &:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
} }
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover { & > a, & > a:hover, & > a:focus {
background: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;

67
sass/_togglebutton.scss Normal file
View File

@ -0,0 +1,67 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.togglebutton {
vertical-align: middle;
&, label, input, .toggle {
user-select: none;
}
label {
font-weight: 400;
cursor: pointer;
// Hide original checkbox
input[type=checkbox] {
opacity: 0;
width: 0;
height:0;
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled] + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
left: -5px;
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;
}
// 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;
}
}
// 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"), $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, $primary);
// Ripple on
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
}

162
sass/_variables.scss
View File

@ -1,100 +1,106 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// Material Global vars
$zero: 0 !default;
// material icons path // material icons path
$material-font-path: "../fonts" !default; $material-font-path: "../fonts" !default;
// Material colors palette
$red: #F44336 !default;
$pink: #E91E63 !default;
$purple: #9C27B0 !default;
$deeppurple: #673AB7 !default;
$indigo: #3F51B5 !default;
$lightblue: #03A9F4 !default;
$cyan: #00BCD4 !default;
$teal: #009688 !default;
$lightgreen: #8BC34A !default;
$lime: #CDDC39 !default;
$lightyellow: #FFEB3B !default;
$orange: #FF9800 !default;
$deeporange: #FF5722 !default;
$grey: #9E9E9E !default;
$bluegrey: #607D8B !default;
$brown: #795548 !default;
$lightgrey: #ECECEC !default;
// Bootstrap shades // Bootstrap shades
$primary: #4285F4 !default; $primary: $teal !default;
$success: #0F9D58 !default; $success: $green !default;
$info: $lightblue !default; $info: $light-blue !default;
$warning: $deeporange !default; $warning: $deep-orange !default;
$danger: $red !default; $danger: $red !default;
$brand-primary: $primary !default;
$brand-success: $success !default;
$brand-danger: $danger !default;
$brand-warning: $warning !default;
$brand-info: $info !default;
// Typography elements for Material // Typography elements for Material
$darkbg-text: rgba(255,255,255,0.84); $darkbg-text: rgba(255,255,255,0.84) !default;
$lightbg-text: rgba(0,0,0,0.84); $lightbg-text: rgba(0,0,0,0.84) !default;
$icon-color: rgba(0,0,0,0.5); $icon-color: rgba(0,0,0,0.5) !default;
// Bootstrap variables // Bootstrap variables
$btn-default: #FFF; $body-bg: #EEEEEE !default;
$btn-default-text: $lightbg-text;
$btn-primary: $primary; $btn-default: transparent !default;
$btn-primary-text: $darkbg-text; $btn-default-text: $lightbg-text !default;
$btn-success: $success; $btn-primary: $primary !default;
$btn-success-text: $darkbg-text; $btn-primary-text: $darkbg-text !default;
$btn-info: $info; $btn-success: $success !default;
$btn-info-text: $darkbg-text; $btn-success-text: $darkbg-text !default;
$btn-warning: $warning; $btn-info: $info !default;
$btn-warning-text: $darkbg-text; $btn-info-text: $darkbg-text !default;
$btn-danger: $danger; $btn-warning: $warning !default;
$btn-danger-text: $darkbg-text; $btn-warning-text: $darkbg-text !default;
$input-unchecked: rgba(137, 137, 137, 0.3); $btn-danger: $danger !default;
$input-checked: rgba(15, 157, 88, 0.3); $btn-danger-text: $darkbg-text !default;
$radio-default: $lightbg-text; $input-unchecked: rgba(137, 137, 137, 0.3) !default;
$radio-primary: $primary; $input-checked: rgba(15, 157, 88, 0.3) !default;
$radio-success: $success;
$radio-info: $info;
$radio-warning: $warning;
$radio-danger: $danger;
$input-danger: $danger; $radio-default: $lightbg-text !default;
$input-default: $primary; $radio-primary: $primary !default;
$input-warning: $warning; $radio-success: $success !default;
$input-success: $success; $radio-info: $info !default;
$input-info: $info; $radio-warning: $warning !default;
$radio-danger: $danger !default;
$navbar-danger-bg: $danger; $input-danger: $danger !default;
$navbar-inverse-bg: #5264AE; $input-default: $primary !default;
$navbar-warning-bg: $warning; $input-warning: $warning !default;
$navbar-success-bg: $success; $input-success: $success !default;
$navbar-info-bg: $info; $input-info: $info !default;
$navbar-default-bg: $primary;
$navbar-color: $darkbg-text;
$navbar-link-color: $darkbg-text;
$navbar-link-hover-color: $darkbg-text;
$navbar-link-hover-bg: transparent;
$navbar-link-active-color: $darkbg-text;
$navbar-link-active-bg: rgba(0,0,0,0.05);
$navbar-link-disabled-color: #E5E5E5;
$navbar-link-disabled-bg: transparent;
$navbar-brand-color: $darkbg-text;
$navbar-toggle-border-color: $darkbg-text;
$navbar-toggle-hover-bg: transparent;
$navbar-toggle-icon-bar-bg: $darkbg-text;
$navbar-border: $darkbg-text;
$alert-success: $success; $alert-success: $success !default;
$alert-info: $info; $alert-info: $info !default;
$alert-warning: $warning; $alert-warning: $warning !default;
$alert-danger: $danger; $alert-danger: $danger !default;
$progress-success: $success; $progress-success: $success !default;
$progress-info: $info; $progress-info: $info !default;
$progress-warning: $warning; $progress-warning: $warning !default;
$progress-danger: $danger; $progress-danger: $danger !default;
$font-size-base: 14px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
// Global Material variables
$material-border-radius: 2px !default;
$input-underline-color: #D2D2D2 !default;
// Card
$card-body-text: $lightbg-text !default;
$card-body-background: #fff !default;
$card-image-headline: #fff !default;
$text-disabled: #a8a8a8 !default;
$background-disabled: #eaeaea !default;
// Checkboxes
$checkbox-size: 20px !default;
$checkbox-animation-ripple: 500ms !default;
$checkbox-animation-check: 0.3s !default;
// Popovers and Popups
$popover-background: rgba(101, 101, 101, 0.9) !default;
$popover-color: #ececec !default;
// Inputs
$input-placeholder-color: #BDBDBD !default;
$floating-label-size-ratio: 70 / 100 !default;
// Dropdown Menu
$dropdown-radius: 2px !default;
$dropdown-font-size: 16px !default;

82
sass/_welljumbo.scss
View File

@ -1,66 +1,24 @@
// main: _material.scss // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
body, .container, .container-fluid { body, .container, .container-fluid {
.well, .well:not([class^="well well-material-"]) { .well.well-sm {
&, .form-control { padding: 10px;
color: $lightbg-text; }
} .well.well-lg {
.floating-label { padding: 26px;
color: #7e7e7e; }
} .well, .jumbotron {
.form-control {
border-bottom-color: #7e7e7e; background-color: #fff;
&::-webkit-input-placeholder { padding: 19px;
color: #7e7e7e; margin-bottom: 20px;
} @include shadow-z-2();
&::-moz-placeholder { border-radius: 2px;
color: #7e7e7e; border: 0;
opacity: 1; p {
} font-weight: 300;
&:-ms-input-placeholder {
color: #7e7e7e;
}
}
.option, .create {
color: $lightbg-text;
}
}
[class^="well well-material-"] {
&, .form-control, .floating-label {
color: $darkbg-text;
}
.form-control {
border-bottom-color: $darkbg-text;
&::-webkit-input-placeholder {
color: $darkbg-text;
}
&::-moz-placeholder {
color: $darkbg-text;
opacity: 1;
}
&:-ms-input-placeholder {
color: $darkbg-text;
}
}
// Rule to fix selectize plugin
.option, .create {
color: $lightbg-text;
}
}
.well, .jumbotron {
background-color: #fff;
padding: 19px;
margin-bottom: 20px;
@extend .shadow-z-2;
border-radius: 2px;
border: 0;
p {
font-weight: 300;
}
// .variations(#{""}, background-color, #FFF);
} }
@include variations(unquote(""), background-color, #FFF);
}
} }

8
sass/material-fullpalette.scss Normal file
View File

@ -0,0 +1,8 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_colors';
@import '_variables';
@import '_mixins-fullpalette';
@import '_icons-material-design';
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
@import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)

8
sass/material-wfont.scss
View File

@ -1,8 +0,0 @@
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 100;
src: local('RobotoDraft Thin'), local('RobotoDraft-Thin'), url(https://fonts.gstatic.com/s/robotodraft/v2/hope9NW9iJ5hh8P5PM_EA2zZpt1Zv2lgqhgSPQ2HnUo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@import "material.scss";

119
sass/material.scss
View File

@ -1,113 +1,8 @@
// Material Theme 0.0.1 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
// -----------------------------------------------------
@import "_variables.scss"; @import '_colors';
@import "_mixins.scss"; @import '_variables';
@import "_shadows.scss"; @import '_mixins';
@import "_icons-material-design.scss"; @import '_icons-material-design';
@import '_shadows'; // these are mixins only, and must be placed at the top before use (sass requiremnt)
body { @import '_material'; // include the material content given the mixins above (sass requirement for inclusion order of mixins)
background-color: #EEEEEE;
&.inverse {
background: #333333;
&, .form-control {
color: $darkbg-text;
}
}
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
// Well and Jumbotrons
@import "_welljumbo.scss";
// Buttons
@import "_buttons.scss";
// Checkboxes
@import "_checkboxes.scss";
// Radios
@import "_radios.scss";
// Text inputs
@import "_inputs.scss";
legend {
border-bottom: 0;
}
.modal-content {
@extend .shadow-z-2;
border-radius: 0;
border: 0;
.modal-header {
border-bottom: 0;
}
.modal-footer {
border-top: 0;
.btn+.btn {
margin-bottom: 10px;
}
}
}
// Lists
@import "_lists.scss";
// Navbar
@import "_navbar.scss";
.dropdown-menu {
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
.divider {
background-color: rgba(229, 229, 229, 0.12);
}
li {
overflow: hidden;
position: relative;
a:hover {
background: rgba(0,0,0,0.08);
}
}
}
// Alerts
@import "_alerts.scss";
// Progress bar
@import "_progress.scss";
// Panels
@import "_cards.scss";
// Typography
.text-warning {
color: $btn-warning;
}
.text-primary {
color: $btn-primary;
}
.text-danger {
color: $btn-danger;
}
.text-success {
color: $btn-success;
}
.text-info {
color: $btn-info;
}
@import "_tabs.scss";
@import "_popups.scss";
@import "_icons.scss";
// External plugins
@import "_plugin-snackbarjs.scss";
@import "_plugin-nouislider.scss";

7
sass/ripples.scss
View File

@ -1,3 +1,5 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
.withripple { .withripple {
position: relative; position: relative;
} }
@ -9,7 +11,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 2px; border-radius: inherit;
pointer-events: none;
} }
.ripple { .ripple {
position: absolute; position: absolute;
@ -26,7 +29,7 @@
} }
.ripple.ripple-on { .ripple.ripple-on {
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1; opacity: 0.1;
} }
.ripple.ripple-out { .ripple.ripple-out {
transition: opacity 0.1s linear 0s !important; transition: opacity 0.1s linear 0s !important;

52
sass/roboto.scss Normal file
View File

@ -0,0 +1,52 @@
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
@import '_colors';
@import '_variables';
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 400;
//src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff');
src: local('RobotoDraft'),
local('RobotoDraft-Regular'),
local('Roboto-Regular'),
url('#{$material-font-path}/RobotoDraftRegular.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftRegular.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 500;
//src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff');
src: local('RobotoDraft Medium'),
local('RobotoDraft-Medium'),
local('Roboto-Medium'),
url('#{$material-font-path}/RobotoDraftMedium.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftMedium.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 700;
//src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff');
src: local('RobotoDraft Bold'),
local('RobotoDraft-Bold'),
local('Roboto-Bold'),
url('#{$material-font-path}/RobotoDraftBold.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftBold.woff') format('woff');
}
@font-face {
font-family: 'RobotoDraft';
font-style: italic;
font-weight: 400;
//src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff');
src: local('RobotoDraft Italic'),
local('RobotoDraft-Italic'),
local('Roboto-Italic'),
url('#{$material-font-path}/RobotoDraftItalic.woff2') format('woff2'),
url('#{$material-font-path}/RobotoDraftItalic.woff') format('woff');
}