From ad179a2777a0620746772d5e0a896f016e04493e Mon Sep 17 00:00:00 2001 From: shockwork Date: Fri, 3 Oct 2014 13:58:24 +0200 Subject: [PATCH] add sass fork --- .gitignore | 2 + README.md | 20 ++- gruntfile.js | 12 ++ package.json | 3 +- sass/_alerts.scss | 98 ++++++++++++ sass/_animations.scss | 16 ++ sass/_buttons.scss | 189 +++++++++++++++++++++++ sass/_cards.scss | 130 ++++++++++++++++ sass/_checkboxes.scss | 191 +++++++++++++++++++++++ sass/_icons.scss | 82 ++++++++++ sass/_inputs.scss | 214 ++++++++++++++++++++++++++ sass/_lists.scss | 84 ++++++++++ sass/_mixins.scss | 26 ++++ sass/_navbar.scss | 288 +++++++++++++++++++++++++++++++++++ sass/_plugin-nouislider.scss | 103 +++++++++++++ sass/_plugin-snackbarjs.scss | 34 +++++ sass/_popups.scss | 27 ++++ sass/_progress.scss | 91 +++++++++++ sass/_radios.scss | 97 ++++++++++++ sass/_shadows.scss | 31 ++++ sass/_tabs.scss | 26 ++++ sass/_variables.scss | 101 ++++++++++++ sass/_welljumbo.scss | 66 ++++++++ sass/material-wfont.scss | 2 + sass/material.scss | 113 ++++++++++++++ sass/ripples.scss | 34 +++++ 26 files changed, 2071 insertions(+), 9 deletions(-) create mode 100644 sass/_alerts.scss create mode 100644 sass/_animations.scss create mode 100644 sass/_buttons.scss create mode 100644 sass/_cards.scss create mode 100644 sass/_checkboxes.scss create mode 100644 sass/_icons.scss create mode 100644 sass/_inputs.scss create mode 100644 sass/_lists.scss create mode 100644 sass/_mixins.scss create mode 100644 sass/_navbar.scss create mode 100644 sass/_plugin-nouislider.scss create mode 100644 sass/_plugin-snackbarjs.scss create mode 100644 sass/_popups.scss create mode 100644 sass/_progress.scss create mode 100644 sass/_radios.scss create mode 100644 sass/_shadows.scss create mode 100644 sass/_tabs.scss create mode 100644 sass/_variables.scss create mode 100644 sass/_welljumbo.scss create mode 100644 sass/material-wfont.scss create mode 100644 sass/material.scss create mode 100644 sass/ripples.scss diff --git a/.gitignore b/.gitignore index 4f6e59e5..4117a537 100644 --- a/.gitignore +++ b/.gitignore @@ -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/ diff --git a/README.md b/README.md index 9beed739..2253e7bc 100644 --- a/README.md +++ b/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 diff --git a/gruntfile.js b/gruntfile.js index 723bfeb9..d7955f75 100644 --- a/gruntfile.js +++ b/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"]); }; diff --git a/package.json b/package.json index b3625c97..39ef81d8 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/sass/_alerts.scss b/sass/_alerts.scss new file mode 100644 index 00000000..3d42e0db --- /dev/null +++ b/sass/_alerts.scss @@ -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); +} + diff --git a/sass/_animations.scss b/sass/_animations.scss new file mode 100644 index 00000000..3372cf87 --- /dev/null +++ b/sass/_animations.scss @@ -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; + } +} diff --git a/sass/_buttons.scss b/sass/_buttons.scss new file mode 100644 index 00000000..719ab562 --- /dev/null +++ b/sass/_buttons.scss @@ -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); +} + diff --git a/sass/_cards.scss b/sass/_cards.scss new file mode 100644 index 00000000..69f4e7b0 --- /dev/null +++ b/sass/_cards.scss @@ -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%)); +} \ No newline at end of file diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss new file mode 100644 index 00000000..dbea75c4 --- /dev/null +++ b/sass/_checkboxes.scss @@ -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; + } +} diff --git a/sass/_icons.scss b/sass/_icons.scss new file mode 100644 index 00000000..1ada364c --- /dev/null +++ b/sass/_icons.scss @@ -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); +} diff --git a/sass/_inputs.scss b/sass/_inputs.scss new file mode 100644 index 00000000..7ff943ff --- /dev/null +++ b/sass/_inputs.scss @@ -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; +} diff --git a/sass/_lists.scss b/sass/_lists.scss new file mode 100644 index 00000000..476e4c8e --- /dev/null +++ b/sass/_lists.scss @@ -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; + } + } +} diff --git a/sass/_mixins.scss b/sass/_mixins.scss new file mode 100644 index 00000000..4db5c585 --- /dev/null +++ b/sass/_mixins.scss @@ -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; +} \ No newline at end of file diff --git a/sass/_navbar.scss b/sass/_navbar.scss new file mode 100644 index 00000000..04f9ad76 --- /dev/null +++ b/sass/_navbar.scss @@ -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); +} + diff --git a/sass/_plugin-nouislider.scss b/sass/_plugin-nouislider.scss new file mode 100644 index 00000000..f0651509 --- /dev/null +++ b/sass/_plugin-nouislider.scss @@ -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); +} diff --git a/sass/_plugin-snackbarjs.scss b/sass/_plugin-snackbarjs.scss new file mode 100644 index 00000000..f99b15f1 --- /dev/null +++ b/sass/_plugin-snackbarjs.scss @@ -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; +} diff --git a/sass/_popups.scss b/sass/_popups.scss new file mode 100644 index 00000000..46a0089c --- /dev/null +++ b/sass/_popups.scss @@ -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; + } +} diff --git a/sass/_progress.scss b/sass/_progress.scss new file mode 100644 index 00000000..5ea95f26 --- /dev/null +++ b/sass/_progress.scss @@ -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); + } + +} diff --git a/sass/_radios.scss b/sass/_radios.scss new file mode 100644 index 00000000..1d594c19 --- /dev/null +++ b/sass/_radios.scss @@ -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; + } +} diff --git a/sass/_shadows.scss b/sass/_shadows.scss new file mode 100644 index 00000000..cc173c60 --- /dev/null +++ b/sass/_shadows.scss @@ -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) ; +} diff --git a/sass/_tabs.scss b/sass/_tabs.scss new file mode 100644 index 00000000..47db0806 --- /dev/null +++ b/sass/_tabs.scss @@ -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); + } + } + +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 00000000..0cef9df8 --- /dev/null +++ b/sass/_variables.scss @@ -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; + diff --git a/sass/_welljumbo.scss b/sass/_welljumbo.scss new file mode 100644 index 00000000..f7000c1c --- /dev/null +++ b/sass/_welljumbo.scss @@ -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); + } +} diff --git a/sass/material-wfont.scss b/sass/material-wfont.scss new file mode 100644 index 00000000..ebb79fcd --- /dev/null +++ b/sass/material-wfont.scss @@ -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"; diff --git a/sass/material.scss b/sass/material.scss new file mode 100644 index 00000000..371bb31a --- /dev/null +++ b/sass/material.scss @@ -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"; diff --git a/sass/ripples.scss b/sass/ripples.scss new file mode 100644 index 00000000..7c9c7739 --- /dev/null +++ b/sass/ripples.scss @@ -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; +}