mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 09:36:55 +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
|
||||
# Example .gitignore files: https://github.com/github/gitignore
|
||||
|
||||
*.log
|
||||
.sass-cache
|
||||
Thumbs.db
|
||||
.DS_Store
|
||||
/node_modules/
|
||||
|
|
|
|||
20
README.md
20
README.md
|
|
@ -10,16 +10,20 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
|
|||
|
||||
## How to install
|
||||
|
||||
BOWER (LESS): bower install bootstrap-material-design --save
|
||||
BOWER (SASS): bower install bootstrap-material-design-sass --save
|
||||
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.
|
||||
BOWER: bower install bootstrap-material-design --save
|
||||
GEMS: gem install bootstrap-material-design
|
||||
|
||||
### 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
|
||||
|
||||
Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
|
||||
Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
|
||||
You need to copy the `material/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
|
||||
|
||||
## Todo
|
||||
|
|
@ -31,7 +35,7 @@ You need to copy the `material/` folder to the root of your project, ensuring th
|
|||
- [Tabs](http://www.polymer-project.org/components/paper-tabs/demo.html)
|
||||
- [Toggle buttons](http://www.polymer-project.org/components/paper-toggle-button/demo.html)
|
||||
|
||||
I'll try to write every component without the need of Javascript but just CSS, and use JS only if strictly needed.
|
||||
I'll try to write every component without the need of Javascript but just CSS, and use JS only if strictly needed.
|
||||
More "todo" things can be found in the ISSUES of this repository.
|
||||
|
||||
# Support me
|
||||
|
|
|
|||
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: {
|
||||
options: {
|
||||
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-sass");
|
||||
grunt.loadNpmTasks("grunt-autoprefixer");
|
||||
grunt.loadNpmTasks("grunt-contrib-cssmin");
|
||||
grunt.loadNpmTasks("grunt-contrib-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-contrib-copy": "^0.6.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