mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-25 19:14:09 +03:00
add sass fork
This commit is contained in:
shockwork
parent
666ec3b040
commit
84e18436d0
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -2,6 +2,8 @@
|
||||||
# https://help.github.com/articles/ignoring-files
|
# https://help.github.com/articles/ignoring-files
|
||||||
# Example .gitignore files: https://github.com/github/gitignore
|
# Example .gitignore files: https://github.com/github/gitignore
|
||||||
|
|
||||||
|
*.log
|
||||||
|
.sass-cache
|
||||||
Thumbs.db
|
Thumbs.db
|
||||||
.DS_Store
|
.DS_Store
|
||||||
/node_modules/
|
/node_modules/
|
||||||
|
|
|
||||||
14
README.md
14
README.md
|
|
@ -10,12 +10,16 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
|
||||||
|
|
||||||
## How to install
|
## How to install
|
||||||
|
|
||||||
BOWER (LESS): bower install bootstrap-material-design --save
|
BOWER: bower install bootstrap-material-design --save
|
||||||
BOWER (SASS): bower install bootstrap-material-design-sass --save
|
GEMS: gem install bootstrap-material-design
|
||||||
NPM (SASS): npm install bootstrap-material-sass --save
|
|
||||||
GEMS (LESS): gem install bootstrap-material-design
|
|
||||||
|
|
||||||
**NB**: the only official repository is the BOWER (LESS) one, the others could (but should not) be outdated.
|
### LESS & SASS
|
||||||
|
|
||||||
|
We decided to merge the SASS fork in to the main repository instead of having two seperate ones, [#40](https://github.com/FezVrasta/bootstrap-material-design/issues/40). The default grunt
|
||||||
|
task will compile the LESS source. To use the SASS base use the SCSS task ```grunt scss```.
|
||||||
|
|
||||||
|
**NB** The LESS and SASS bases should reflect each other, right now this project is unstable and under heavy development
|
||||||
|
so this might not be true before the first stable release.
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
|
|
|
||||||
12
gruntfile.js
12
gruntfile.js
|
|
@ -17,6 +17,16 @@ module.exports = function(grunt) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
sass: {
|
||||||
|
production: {
|
||||||
|
files: {
|
||||||
|
"css-compiled/material.css": "sass/material.scss",
|
||||||
|
"css-compiled/material-wfont.css": "sass/material-wfont.scss",
|
||||||
|
"css-compiled/ripples.css": "sass/ripples.scss"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
autoprefixer: {
|
autoprefixer: {
|
||||||
options: {
|
options: {
|
||||||
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
|
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
|
||||||
|
|
@ -54,8 +64,10 @@ module.exports = function(grunt) {
|
||||||
|
|
||||||
});
|
});
|
||||||
grunt.loadNpmTasks("grunt-contrib-less");
|
grunt.loadNpmTasks("grunt-contrib-less");
|
||||||
|
grunt.loadNpmTasks("grunt-contrib-sass");
|
||||||
grunt.loadNpmTasks("grunt-autoprefixer");
|
grunt.loadNpmTasks("grunt-autoprefixer");
|
||||||
grunt.loadNpmTasks("grunt-contrib-cssmin");
|
grunt.loadNpmTasks("grunt-contrib-cssmin");
|
||||||
grunt.loadNpmTasks("grunt-contrib-copy");
|
grunt.loadNpmTasks("grunt-contrib-copy");
|
||||||
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
|
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
|
||||||
|
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy"]);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@
|
||||||
"grunt-autoprefixer": "^1.0.1",
|
"grunt-autoprefixer": "^1.0.1",
|
||||||
"grunt-contrib-copy": "^0.6.0",
|
"grunt-contrib-copy": "^0.6.0",
|
||||||
"grunt-contrib-cssmin": "^0.10.0",
|
"grunt-contrib-cssmin": "^0.10.0",
|
||||||
"grunt-contrib-less": "^0.11.4"
|
"grunt-contrib-less": "^0.11.4",
|
||||||
|
"grunt-contrib-sass": "^0.8.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
98
sass/_alerts.scss
Normal file
98
sass/_alerts.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 0;
|
||||||
|
a, .alert-link {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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
Normal file
16
sass/_animations.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
@keyframes input-highlight {
|
||||||
|
0% {
|
||||||
|
left: 20%;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
99% {
|
||||||
|
width: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
189
sass/_buttons.scss
Normal file
189
sass/_buttons.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
@mixin btn-shadow(){
|
||||||
|
@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 {
|
||||||
|
@extend .shadow-z-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 30px;
|
||||||
|
border: 0;
|
||||||
|
margin: 10px 1px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $darkbg-text;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
.open > .dropdown-toggle.btn {
|
||||||
|
//.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;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 26px;
|
||||||
|
width: 56px;
|
||||||
|
height: 56px;
|
||||||
|
&, &:hover {
|
||||||
|
//.variations(#{""}, background-color, transparent);
|
||||||
|
}
|
||||||
|
&, .ripple-wrapper {
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
&.btn-mini {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 13px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alert buttons
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
@include button-variant($btn-default);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
@include button-variant($primary);
|
||||||
|
}
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
130
sass/_cards.scss
Normal file
130
sass/_cards.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
//
|
||||||
|
// Cards
|
||||||
|
// http://www.google.com/design/spec/components/cards.html#cards-usage
|
||||||
|
//
|
||||||
|
.card {
|
||||||
|
@extend .shadow-z-1;
|
||||||
|
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: 20px; // Same as panel margins
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 100;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
padding: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
.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 {
|
||||||
|
padding: 15px;
|
||||||
|
border-top: 1px solid;
|
||||||
|
border-color: $lightgrey;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 25px;
|
||||||
|
transition: ease transform 0.5s;
|
||||||
|
&:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alert buttons
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.card-default {
|
||||||
|
@include card-variant($btn-default, #000, darken($btn-default, 10%));
|
||||||
|
}
|
||||||
|
.card-primary {
|
||||||
|
@include card-variant($primary, #FFFFFF, $lightgrey);
|
||||||
|
}
|
||||||
|
// Success appears as green
|
||||||
|
.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%));
|
||||||
|
}
|
||||||
191
sass/_checkboxes.scss
Normal file
191
sass/_checkboxes.scss
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.form-horizontal .checkbox {
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
|
.checkbox {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 45px;
|
||||||
|
position: relative;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
.check:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background-color: $lightbg-text;
|
||||||
|
left: -5px;
|
||||||
|
top: -15px;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.check:before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
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 {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
82
sass/_icons.scss
Normal file
82
sass/_icons.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.icon {}
|
||||||
|
|
||||||
|
// Navbar alternate
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.icon-default {
|
||||||
|
@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);
|
||||||
|
}
|
||||||
214
sass/_inputs.scss
Normal file
214
sass/_inputs.scss
Normal file
|
|
@ -0,0 +1,214 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
|
||||||
|
&, &:focus, &.focus {
|
||||||
|
&:not(textarea):not(select) {
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
float: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background: transparent;
|
||||||
|
border-bottom: 1px solid #757575;
|
||||||
|
&:disabled {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
select.form-control {
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
select[multiple].form-control {
|
||||||
|
&, &:focus, &.focus {
|
||||||
|
height: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control-wrapper {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.form-control:focus, .form-control.focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-label {
|
||||||
|
color: #7E7E7E;
|
||||||
|
font-size: 14px;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
left: 0px;
|
||||||
|
top: 5px;
|
||||||
|
transition: 0.2s ease all;
|
||||||
|
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 */
|
||||||
|
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
|
||||||
|
animation: input-highlight 0.3s ease;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select ~ .material-input:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
&.has-warning {
|
||||||
|
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||||
|
background: $input-warning;
|
||||||
|
}
|
||||||
|
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||||
|
color: $input-warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.has-error {
|
||||||
|
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||||
|
background: $input-danger;
|
||||||
|
}
|
||||||
|
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||||
|
color: $input-danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.has-success {
|
||||||
|
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
|
||||||
|
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 {
|
||||||
|
background: $input-info;
|
||||||
|
}
|
||||||
|
.control-label, input.form-control:not(.empty) ~ .floating-label {
|
||||||
|
color: $input-info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//.variations(#{" .material-input:before"}, background-color, $indigo);
|
||||||
|
//.variations(#{" input.form-control:focus ~ .material-input:after"}, background-color, $indigo);
|
||||||
|
//.variations(#{" input.form-control.focus ~ .material-input:after"}, background-color, $indigo);
|
||||||
|
//.variations(#{" .control-label"}, color, $lightbg-text);
|
||||||
|
//.variations(#{" input.form-control:not(.empty) ~ .floating-label"}, color, $indigo);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
.form-control-wrapper {
|
||||||
|
.form-control {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
bottom: -10px;
|
||||||
|
}
|
||||||
|
.input-group-addon {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.input-group-btn .btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select.form-control {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border-bottom: 1px solid #757575;
|
||||||
|
border-radius: 0;
|
||||||
|
&: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)
|
||||||
|
.form-control-wrapper input[type=file] {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
84
sass/_lists.scss
Normal file
84
sass/_lists.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
// main: _material.scss
|
||||||
|
.list-group {
|
||||||
|
border-radius: 0;
|
||||||
|
.list-group-item {
|
||||||
|
background-color: transparent;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
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 {
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
width: #{"calc(100% - 90px)"};
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
26
sass/_mixins.scss
Normal file
26
sass/_mixins.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
@mixin card-variant($background, $color, $border) {
|
||||||
|
background-color: $background;
|
||||||
|
.card-footer, .card-header { border-color: $border; }
|
||||||
|
color: $color;
|
||||||
|
a { color: $color }
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-variant($color) {
|
||||||
|
background-color: $color;
|
||||||
|
};
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
288
sass/_navbar.scss
Normal file
288
sass/_navbar.scss
Normal file
|
|
@ -0,0 +1,288 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: $navbar-default-bg;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
position: relative;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: $navbar-brand-color;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $navbar-brand-color;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-text {
|
||||||
|
color: $navbar-color;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
> li > a {
|
||||||
|
color: $navbar-link-color;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Darken the responsive nav toggle
|
||||||
|
.navbar-toggle {
|
||||||
|
border-color: $navbar-toggle-border-color;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $navbar-toggle-hover-bg;
|
||||||
|
}
|
||||||
|
.icon-bar {
|
||||||
|
background-color: $navbar-toggle-icon-bar-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse,
|
||||||
|
.navbar-form {
|
||||||
|
border-color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropdowns
|
||||||
|
.navbar-nav {
|
||||||
|
> .open > a {
|
||||||
|
&,
|
||||||
|
&: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: $indigo;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
103
sass/_plugin-nouislider.scss
Normal file
103
sass/_plugin-nouislider.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
// main: _material.scss
|
||||||
|
.noUi-target,
|
||||||
|
.noUi-target * {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
user-select: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.noUi-base {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.noUi-origin {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.noUi-handle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.noUi-stacking .noUi-handle {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.noUi-stacking + .noUi-origin {
|
||||||
|
*z-index: -1;
|
||||||
|
}
|
||||||
|
.noUi-state-tap .noUi-origin {
|
||||||
|
transition: left 0.3s, top 0.3s;
|
||||||
|
}
|
||||||
|
.noUi-state-drag * {
|
||||||
|
cursor: inherit !important;
|
||||||
|
}
|
||||||
|
.noUi-horizontal {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
.noUi-horizontal .noUi-handle {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
left: -10px;
|
||||||
|
top: -5px;
|
||||||
|
}
|
||||||
|
.noUi-horizontal.noUi-extended {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.noUi-horizontal.noUi-extended .noUi-origin {
|
||||||
|
right: -15px;
|
||||||
|
}
|
||||||
|
.noUi-background {
|
||||||
|
height: 2px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
.noUi-origin {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: #c8c8c8;
|
||||||
|
&[style^="left: 0"] .noUi-handle {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 2px solid #c8c8c8;
|
||||||
|
&.noUi-active {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.noUi-target {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.noUi-handle {
|
||||||
|
border-radius: 100%;
|
||||||
|
cursor: default;
|
||||||
|
transition: all 0.2s ease-out;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.noUi-horizontal {
|
||||||
|
height: 2px;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
.noUi-horizontal .noUi-handle.noUi-active {
|
||||||
|
transform: scale(2.5);
|
||||||
|
}
|
||||||
|
[disabled].noUi-slider{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
[disabled] .noUi-handle {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
background: #c8c8c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
//.variations(#{".noUi-connect"}, background-color, $primary);
|
||||||
|
//.variations(#{" .noUi-connect"}, background-color, $primary);
|
||||||
|
//.variations(#{" .noUi-handle"}, background-color, $primary);
|
||||||
|
//.variations(#{" .noUi-handle"}, border-color, $primary);
|
||||||
|
}
|
||||||
34
sass/_plugin-snackbarjs.scss
Normal file
34
sass/_plugin-snackbarjs.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
// Support for SnackbarJS plugin
|
||||||
|
// https://github.com/FezVrasta/snackbarjs
|
||||||
|
|
||||||
|
.snackbar {
|
||||||
|
// Style
|
||||||
|
background-color: #323232;
|
||||||
|
color: $darkbg-text;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
@extend .shadow-z-1;
|
||||||
|
|
||||||
|
// Animation
|
||||||
|
height: 0;
|
||||||
|
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||||
|
transform: translateY(200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.snackbar.snackbar-opened {
|
||||||
|
// Style
|
||||||
|
padding: 14px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
// Animation
|
||||||
|
height: auto;
|
||||||
|
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Variations
|
||||||
|
.snackbar.toast {
|
||||||
|
border-radius: 200px;
|
||||||
|
}
|
||||||
27
sass/_popups.scss
Normal file
27
sass/_popups.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.popover, .tooltip-inner {
|
||||||
|
background: #323232;
|
||||||
|
color: #FFF;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip, .tooltip.in {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover, .tooltip {
|
||||||
|
&.left .arrow:after, &.left .tooltip-arrow {
|
||||||
|
border-left-color: #323232;
|
||||||
|
}
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
91
sass/_progress.scss
Normal file
91
sass/_progress.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
background: #c8c8c8;
|
||||||
|
.progress-bar {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
97
sass/_radios.scss
Normal file
97
sass/_radios.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.form-horizontal .radio {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.radio {
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 45px;
|
||||||
|
position: relative;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 2px;
|
||||||
|
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);
|
||||||
|
//.variations(#{" input[type=radio]:checked ~ .circle"}, border-color, $radio-default);
|
||||||
|
|
||||||
|
input[type=radio][disabled] ~ .check,
|
||||||
|
input[type=radio][disabled] ~ .circle {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio] { display: none; }
|
||||||
|
input[type=radio]:checked ~ .check {
|
||||||
|
transform: scale(0.55);
|
||||||
|
}
|
||||||
|
input[type=radio][disabled] ~ .circle {
|
||||||
|
border-color: $lightbg-text;
|
||||||
|
}
|
||||||
|
input[type=radio][disabled] ~ .check {
|
||||||
|
background-color: $lightbg-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rippleOn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rippleOff {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
31
sass/_shadows.scss
Normal file
31
sass/_shadows.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
|
||||||
|
.shadow-z-1 {
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0, .12),
|
||||||
|
0 1px 2px rgba(0,0,0, .24) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-z-2 {
|
||||||
|
box-shadow: 0 3px 6px rgba(0,0,0, .16),
|
||||||
|
0 3px 6px rgba(0,0,0, .23) ;
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0, .19),
|
||||||
|
0 6px 6px rgba(0,0,0, .23) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-z-4 {
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0, .25),
|
||||||
|
0 10px 10px rgba(0,0,0, .22) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-z-5 {
|
||||||
|
box-shadow: 0 19px 38px rgba(0,0,0, .30),
|
||||||
|
0 15px 12px rgba(0,0,0, .22) ;
|
||||||
|
}
|
||||||
26
sass/_tabs.scss
Normal file
26
sass/_tabs.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
.nav-tabs {
|
||||||
|
background: $navbar-default-bg;
|
||||||
|
> li {
|
||||||
|
> a {
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
&:hover {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover {
|
||||||
|
background: transparent !important;
|
||||||
|
border: 0 !important;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
&.disabled > a, &.disabled > a:hover {
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
101
sass/_variables.scss
Normal file
101
sass/_variables.scss
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
// main: _material.scss
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Material colors palette
|
||||||
|
$red: #F44336;
|
||||||
|
$pink: #E91E63;
|
||||||
|
$purple: #9C27B0;
|
||||||
|
$deeppurple: #673AB7;
|
||||||
|
$indigo: #3F51B5;
|
||||||
|
$lightblue: #03A9F4;
|
||||||
|
$cyan: #00BCD4;
|
||||||
|
$teal: #009688;
|
||||||
|
$lightgreen: #8BC34A;
|
||||||
|
$lime: #CDDC39;
|
||||||
|
$lightyellow: #FFEB3B;
|
||||||
|
$orange: #FF9800;
|
||||||
|
$deeporange: #FF5722;
|
||||||
|
$grey: #9E9E9E;
|
||||||
|
$bluegrey: #607D8B;
|
||||||
|
$brown: #795548;
|
||||||
|
$lightgrey: #ECECEC;
|
||||||
|
|
||||||
|
// Bootstrap shades
|
||||||
|
$primary: #4285F4;
|
||||||
|
$success: #0F9D58;
|
||||||
|
$info: $lightblue;
|
||||||
|
$warning: $deeporange;
|
||||||
|
$danger: $red;
|
||||||
|
|
||||||
|
// Typography elements for Material
|
||||||
|
$darkbg-text: rgba(255,255,255,0.84);
|
||||||
|
$lightbg-text: rgba(0,0,0,0.84);
|
||||||
|
$icon-color: rgba(0,0,0,0.5);
|
||||||
|
|
||||||
|
|
||||||
|
// Bootstrap variables
|
||||||
|
$btn-default: #FFF;
|
||||||
|
$btn-default-text: $lightbg-text;
|
||||||
|
|
||||||
|
$btn-primary: $primary;
|
||||||
|
$btn-primary-text: $darkbg-text;
|
||||||
|
|
||||||
|
$btn-success: $success;
|
||||||
|
$btn-success-text: $darkbg-text;
|
||||||
|
|
||||||
|
$btn-info: $info;
|
||||||
|
$btn-info-text: $darkbg-text;
|
||||||
|
|
||||||
|
$btn-warning: $warning;
|
||||||
|
$btn-warning-text: $darkbg-text;
|
||||||
|
|
||||||
|
$btn-danger: $danger;
|
||||||
|
$btn-danger-text: $darkbg-text;
|
||||||
|
|
||||||
|
$input-unchecked: rgba(137, 137, 137, 0.3);
|
||||||
|
$input-checked: rgba(15, 157, 88, 0.3);
|
||||||
|
|
||||||
|
$radio-default: $lightbg-text;
|
||||||
|
$radio-primary: $primary;
|
||||||
|
$radio-success: $success;
|
||||||
|
$radio-info: $info;
|
||||||
|
$radio-warning: $warning;
|
||||||
|
$radio-danger: $danger;
|
||||||
|
|
||||||
|
$input-danger: $danger;
|
||||||
|
$input-default: #5264AE;
|
||||||
|
$input-warning: $warning;
|
||||||
|
$input-success: $success;
|
||||||
|
$input-info: $info;
|
||||||
|
|
||||||
|
$navbar-danger-bg: $danger;
|
||||||
|
$navbar-inverse-bg: #5264AE;
|
||||||
|
$navbar-warning-bg: $warning;
|
||||||
|
$navbar-success-bg: $success;
|
||||||
|
$navbar-info-bg: $info;
|
||||||
|
$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-info: $info;
|
||||||
|
$alert-warning: $warning;
|
||||||
|
$alert-danger: $danger;
|
||||||
|
|
||||||
|
$progress-success: $success;
|
||||||
|
$progress-info: $info;
|
||||||
|
$progress-warning: $warning;
|
||||||
|
$progress-danger: $danger;
|
||||||
|
|
||||||
66
sass/_welljumbo.scss
Normal file
66
sass/_welljumbo.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
// main: _material.scss
|
||||||
|
body, .container, .container-fluid {
|
||||||
|
|
||||||
|
.well, .well:not([class^="well well-material-"]) {
|
||||||
|
&, .form-control {
|
||||||
|
color: $lightbg-text;
|
||||||
|
}
|
||||||
|
.floating-label {
|
||||||
|
color: #7e7e7e;
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
border-bottom-color: #7e7e7e;
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
|
color: #7e7e7e;
|
||||||
|
}
|
||||||
|
&::-moz-placeholder {
|
||||||
|
color: #7e7e7e;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:-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);
|
||||||
|
}
|
||||||
|
}
|
||||||
2
sass/material-wfont.scss
Normal file
2
sass/material-wfont.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
|
||||||
|
@import "material.scss";
|
||||||
113
sass/material.scss
Normal file
113
sass/material.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
// Material Theme 0.0.1
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
|
@import "_variables.scss";
|
||||||
|
@import "_mixins.scss";
|
||||||
|
@import "_animations.scss";
|
||||||
|
@import "_shadows.scss";
|
||||||
|
|
||||||
|
body {
|
||||||
|
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", "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";
|
||||||
34
sass/ripples.scss
Normal file
34
sass/ripples.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
.withripple {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.ripple-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.ripple {
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: -10px;
|
||||||
|
margin-top: -10px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: rgba(0,0,0,0.05);
|
||||||
|
transform: scale(1);
|
||||||
|
transform-origin: 50%;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ripple.ripple-on {
|
||||||
|
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.ripple.ripple-out {
|
||||||
|
transition: opacity 0.1s linear 0s !important;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user