From f397283d950744410a46f97bcb4afda8ace4d2c9 Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Mon, 2 Nov 2015 14:39:13 -0600 Subject: [PATCH] first automated sass conversion, using grunt task 'material:sass' --- Gruntfile.js | 9 +- sass/_alerts.scss | 109 ++------ sass/_animations.scss | 16 -- sass/_buttons.scss | 280 ++++++++----------- sass/_cards.scss | 172 ++++-------- sass/_checkboxes.scss | 408 +++++++++++++++------------ sass/_colors.scss | 360 ++++++++++++++++++++++++ sass/_dialogs.scss | 52 ++++ sass/_dividers.scss | 71 +++++ sass/_icons-material-design.scss | 1 - sass/_icons.scss | 83 +----- sass/_inputs.scss | 393 ++++++++++++++------------ sass/_labels.scss | 4 + sass/_lists.scss | 173 ++++++------ sass/_mixins-fullpalette.scss | 160 +++++++++++ sass/_mixins.scss | 165 +++++++++-- sass/_navbar.scss | 455 +++++++++++++------------------ sass/_panels.scss | 21 ++ sass/_plugin-dropdownjs.scss | 19 ++ sass/_plugin-nouislider.scss | 34 ++- sass/_plugin-selectize.scss | 91 +++++++ sass/_plugin-snackbarjs.scss | 2 +- sass/_popups.scss | 27 +- sass/_progress.scss | 81 +----- sass/_radios.scss | 167 ++++++------ sass/_shadows.scss | 35 ++- sass/_tabs.scss | 8 +- sass/_togglebutton.scss | 67 +++++ sass/_variables.scss | 160 +++++------ sass/_welljumbo.scss | 80 ++---- sass/material-fullpalette.scss | 2 + sass/material-wfont.scss | 8 - sass/material.scss | 157 ++++++----- sass/ripples.scss | 5 +- sass/roboto.scss | 50 ++++ 35 files changed, 2311 insertions(+), 1614 deletions(-) delete mode 100644 sass/_animations.scss create mode 100644 sass/_colors.scss create mode 100644 sass/_dialogs.scss create mode 100644 sass/_dividers.scss create mode 100644 sass/_labels.scss create mode 100644 sass/_mixins-fullpalette.scss create mode 100644 sass/_panels.scss create mode 100644 sass/_plugin-dropdownjs.scss create mode 100644 sass/_plugin-selectize.scss create mode 100644 sass/_togglebutton.scss create mode 100644 sass/material-fullpalette.scss delete mode 100644 sass/material-wfont.scss create mode 100644 sass/roboto.scss diff --git a/Gruntfile.js b/Gruntfile.js index 9e51357c..03060216 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -2,19 +2,18 @@ module.exports = function(grunt) { "use strict"; require("load-grunt-tasks")(grunt); - grunt.loadNpmTasks('grunt-less-to-sass'); grunt.initConfig({ // Convert from less to sass - sass: { + lessToSass: { convert: { files: [{ expand: true, cwd: 'less', src: ['*.less'], ext: '.scss', - dest: '../sass' + dest: 'sass' }] } }, @@ -271,6 +270,8 @@ module.exports = function(grunt) { }); + grunt.loadNpmTasks('grunt-less-to-sass'); + grunt.registerTask("default", ["material", "ripples"]); grunt.registerTask("material", [ @@ -279,7 +280,7 @@ module.exports = function(grunt) { ]); grunt.registerTask("material:sass", [ - "sass:convert" + "lessToSass:convert" ]); grunt.registerTask("material:less", [ diff --git a/sass/_alerts.scss b/sass/_alerts.scss index aa0a3f0b..d4735d92 100644 --- a/sass/_alerts.scss +++ b/sass/_alerts.scss @@ -1,96 +1,23 @@ .alert { border: 0px; border-radius: 0; - a, .alert-link { - color: #FFFFFF; + + .generic-variations(unquote(""), $darkbg-text, { + background-color: $material-color; + color: $material-text-color; + + a, .alert-link { + color: $material-text-color; + } + }); + + &-info, &-danger, &-warning, &-success { + color: $darkbg-text; + } + + &-default { + a, .alert-link { + color: $lightbg-text; + } } } - - -// Alert buttons -// -------------------------------------------------- - -.alert-default { - @include alert-variant(#FFFFFF); - a, .alert-link { - color: #000000; - } -} - -.alert-primary { - color: #FFFFFF; - @include alert-variant($primary); -} -// Success appears as green -.alert-success { - color: #FFFFFF; - @include alert-variant($success); -} -// Info appears as blue-green -.alert-info { - color: #FFFFFF; - @include alert-variant($info); -} -// Warning appears as orange -.alert-warning { - color: #FFFFFF; - @include alert-variant($warning); -} -// Danger and error appear as red -.alert-danger { - @include alert-variant($danger); -} - -// Material shades -.alert-material-red { - @include alert-variant($red) -} -.alert-material-pink { - @include alert-variant($pink); -} -.alert-material-purple { - @include alert-variant($purple); -} -.alert-material-deeppurple { - @include alert-variant($deeppurple); -} -.alert-material-indigo { - @include alert-variant($indigo); -} -.alert-material-lightblue { - @include alert-variant($lightblue); -} -.alert-material-cyan { - @include alert-variant($cyan); -} -.alert-material-teal { - @include alert-variant($teal); -} -.alert-material-lightgreen { - @include alert-variant($lightgreen); -} -.alert-material-lime { - @include alert-variant($lime); -} -.alert-material-lightyellow { - @include alert-variant($lightyellow); -} -.alert-material-orange { - @include alert-variant($orange); -} -.alert-material-deeporange { - @include alert-variant($deeporange); -} -.alert-material-grey { - @include alert-variant($grey); -} -.alert-material-bluegrey { - @include alert-variant($bluegrey); -} -.alert-material-brown { - @include alert-variant($brown); -} -.alert-material-lightgrey { - @include alert-variant($lightgrey); -} - diff --git a/sass/_animations.scss b/sass/_animations.scss deleted file mode 100644 index 3372cf87..00000000 --- a/sass/_animations.scss +++ /dev/null @@ -1,16 +0,0 @@ -// main: _material.scss - -@keyframes input-highlight { - 0% { - left: 20%; - width: 20%; - } - 99% { - width: 0; - left: 0; - opacity: 1; - } - 100% { - opacity: 0; - } -} diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 5461bf2e..1ae88f9c 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -1,187 +1,145 @@ -@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; - } +.btn { + position: relative; + padding: 8px 30px; + border: 0; + margin: 10px 1px; + cursor: pointer; + border-radius: 2px; + text-transform: uppercase; + text-decoration: none; + color: $darkbg-text; - &:hover { - @extend .shadow-z-5; - } + &:hover:not(.btn-link):not(.btn-flat):not(.btn-fab) { + @include shadow-z-1(); + } + &:active:not(.btn-link):not(.btn-flat):not(.btn-fab) { + @include shadow-z-1-hover(); + } + transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + outline: none !important; + + + @include variations(unquote(".btn-flat:not(.btn-link)"), color, $lightbg-text); + + @include background-variations(unquote(":not(.btn-link):not(.btn-flat)"), $btn-default); + + // BTN hover effect + .generic-variations(unquote(":hover:not(.btn-link):not(.btn-flat)"), $btn-default, { + background-color: contrast($material-color, darken($material-color, 4%), lighten($material-color, 4%), $contrast-factor); + }); + // BTN active effect + .generic-variations(unquote(":active:not(.btn-link):not(.btn-flat)"), $btn-default, { + background-color: contrast($material-color, darken($material-color, 6%), lighten($material-color, 6%), $contrast-factor); + }); + // BTN .active effect + .generic-variations(unquote(".active:not(.btn-link):not(.btn-flat)"), $btn-default, { + background-color: contrast($material-color, darken($material-color, 6%), lighten($material-color, 6%), $contrast-factor); + }); + // BTN flat hover effect + .generic-variations(unquote(".btn-flat:hover:not(.btn-ink)"), $btn-default, { + background-color: rgba($material-color, (20/100)); + }); } .btn { - position: relative; - padding: 8px 30px; - border: 0; - margin: 10px 1px; + &.btn-flat { + background: none; + box-shadow: none; + font-weight: 500; + &:disabled { + color: $text-disabled !important; + } + } - cursor: pointer; - border-radius: 4px; - text-transform: uppercase; - text-decoration: none; - color: $darkbg-text; + // Size variations + &.btn-sm { + padding: 5px 20px; + } + &.btn-xs { + padding: 4px 15px; + font-size: 10px; + } - &: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 { + &.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 { + &.btn-fab { margin: 0; padding: 15px; font-size: 26px; width: 56px; height: 56px; + &, &:hover, &:active { + @include variations(unquote(""), background-color, transparent); + } &, &:hover { - //.variations(#{""}, background-color, transparent); + @include shadow-z-1(); + } + &:active { + @include shadow-z-1-hover(); } &, .ripple-wrapper { - border-radius: 100%; + border-radius: 100%; } - &.btn-mini { - width: 40px; - height: 40px; - padding: 13px; - font-size: 15px; + &.btn-fab-mini { + width: 40px; + height: 40px; + padding: 13px 0; + font-size: 15px; } + i { + position: relative; + top: -5px; + margin: 0 auto; + } + } } -// Alert buttons -// -------------------------------------------------- +// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default) +.btn-link, .btn:not([class*="btn-"]), .btn-default { + color: $lightbg-text; + &:hover { + color: $lightbg-text; + } +} +.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) { + &:hover, &.active { + background-color: rgba(255,255,255,0.5); + } +} +.open > .dropdown-toggle.btn { + @include variations(unquote(""), background-color, $btn-default); +} +.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { + margin-left: 0; +} +.btn-group, .btn-group-vertical { + position: relative; + border-radius: 2px; + margin: 10px 1px; -.btn-default { - @include button-variant($btn-default); + @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-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); +.btn-group-flat { + box-shadow: none !important; } -// Material shades -.btn-material-red { - @include button-variant($red) +@mixin btn-shadow(){ + @include shadow-z-1(); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + &:active:not(.btn-link) { + @include shadow-z-1-hover(); + } } -.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 index 5122af1a..53556083 100644 --- a/sass/_cards.scss +++ b/sass/_cards.scss @@ -1,130 +1,66 @@ -// -// 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 + /***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/ - 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; - } + display: inline-block; + position: relative; + width: 100%; + .card-height-indicator { + margin-top: 100%; + } + .card-content { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } - } + /**************************************************************************/ - img { - max-width:100%; - max-height:100%; - } - .card-footer { - padding: 15px; - border-top: 1px solid; - border-color: $lightgrey; + border-radius: 2px; + color: $card-body-text; + background: $card-body-background; - .icon { - font-size: 25px; - transition: ease transform 0.5s; - &:hover { text-decoration: none; transform: transform3d(0, 0, 0, -1px)} + @include shadow-z-2(); + + .card-image { + height: 60%; + position: relative; + overflow: hidden; + img { + width: 100%; + height: 100%; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + pointer-events: none; + } + .card-image-headline { + position: absolute; + bottom: 16px; + left: 18px; + color: $card-image-headline; + font-size: 2em; + } } - } -} + .card-body { + height: 30%; + padding: 18px; + } -// Alert buttons -// -------------------------------------------------- - -.card-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%)); + .card-footer { + height: 10%; + padding: 18px; + button { + margin: 0 !important; + position: relative; + bottom: 25px; + width: auto; + &:first-child { + left: -15px; + } + } + } } diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss index 8b8c72ac..eef9b856 100644 --- a/sass/_checkboxes.scss +++ b/sass/_checkboxes.scss @@ -1,189 +1,237 @@ .form-horizontal .checkbox { - padding-top: 15px; + padding-top: 20px; } .checkbox { + transform: translateZ(0); // Force 3d rendering + label { + cursor: pointer; + padding-left: 0; // Reset for Bootstrap rule + } + + // Hide native checkbox + input[type=checkbox] { + opacity: 0; + position: absolute; + margin: 0; + z-index: -1; + width: 0; + height: 0; + overflow: hidden; + left: 0; + pointer-events: none; + } + + .checkbox-material { + vertical-align: middle; + position: relative; + top: 3px; + &:before { + display: block; + position: absolute; + left: 0; + content: ""; + background-color: rgba(0,0,0,.84); + height: $checkbox-size; + width: $checkbox-size; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + transform: scale3d(2.3, 2.3, 1); + } + + .check { + position: relative; + display: inline-block; + width: $checkbox-size; + height: $checkbox-size; + border: 2px solid; + border-radius: 2px; + overflow: hidden; + z-index: 1; + } + .check:before { + position: absolute; + content: ""; + transform: rotate(45deg); + display: block; + margin-top: -4px; + margin-left: 6px; + width: 0; + height: 0; + box-shadow: + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0 inset; + animation: checkbox-off $checkbox-animation-check forwards; + } + } + + input[type=checkbox]:focus + .checkbox-material .check:after { + opacity: 0.2; + } + input[type=checkbox]:checked + .checkbox-material .check:before { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + animation: checkbox-on $checkbox-animation-check forwards; + } + + input[type=checkbox]:not(:checked) + .checkbox-material:before { + animation: rippleOff $checkbox-animation-ripple; + } + input[type=checkbox]:checked + .checkbox-material:before { + animation: rippleOn $checkbox-animation-ripple; + } + + // Ripple effect on click + input[type=checkbox]:not(:checked) + .checkbox-material .check:after { + animation: rippleOff $checkbox-animation-ripple forwards; + } + input[type=checkbox]:checked + .checkbox-material .check:after { + animation: rippleOn $checkbox-animation-ripple forwards; + } + + // Style for disabled inputs + input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, + input[type=checkbox][disabled] + .circle { + opacity: 0.5; + } + input[type=checkbox][disabled] + .checkbox-material .check:after { + background-color: $lightbg-text; + transform: rotate(-45deg); + } + + @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success); + @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50); + @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50); +} + + +@keyframes checkbox-on { + 0% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px; + } + 50% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px 2px 0 11px; + } + 100% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + } +} +@keyframes checkbox-off { + 0% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px, + 0 0 0 0 inset; + } + + 25% { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px, + 0 0 0 0 inset; + } + 50% { + transform: rotate(45deg); + margin-top: -4px; + margin-left: 6px; + width: 0px; + height: 0px; + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px, + 0 0 0 0 inset; + } + 51% { transform: rotate(0deg); - 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); + margin-top: -2px; + margin-left: -2px; + width: 20px; + height: 20px; + box-shadow: + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0px 0px 0 10px inset; + } + 100% { + transform: rotate(0deg); + margin-top: -2px; + margin-left: -2px; + width: 20px; + height: 20px; + box-shadow: + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0px 0px 0 0px inset; + } } - -@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; - } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } - @keyframes rippleOff { - 0% { - opacity: 0; - } - 50% { - opacity: 0.2; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } diff --git a/sass/_colors.scss b/sass/_colors.scss new file mode 100644 index 00000000..3e6cb99a --- /dev/null +++ b/sass/_colors.scss @@ -0,0 +1,360 @@ +/* + +To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette + +Then, run this script to get the list@mixin (function(){ + var colors = {}, main = {}; + $(".color-group")@mixin each(function(){ + var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-"); + colors[color] = {}; + + $(this)@mixin find(".color").not(".main-color").each(function(){ + var shade = $(this).find(".shade").text().trim(), + hex = $(this).find(".hex").text().trim(); + + colors[color][shade] = hex; + }); + main[color] = color + "-" + $(this).find(".main-color .shade").text().trim(); + + }); + var LESS = ""; + $@mixin each(colors, function(name, shades){ + LESS += "\n\n"; + $@mixin each(shades, function(shade, hex){ + LESS += "$" + name + "-" + shade + ": " + hex + ";\n" !default; + }); + if (main[name]) { + LESS += "$" + name + ": " + main[name] + ";\n" !default; + } + }); + console.log(LESS); +})(); + + +*/ +$red-50: #ffebee !default; +$red-100: #ffcdd2 !default; +$red-200: #ef9a9a !default; +$red-300: #e57373 !default; +$red-400: #ef5350 !default; +$red-500: #f44336 !default; +$red-600: #e53935 !default; +$red-700: #d32f2f !default; +$red-800: #c62828 !default; +$red-900: #b71c1c !default; +$red-A100: #ff8a80 !default; +$red-A200: #ff5252 !default; +$red-A400: #ff1744 !default; +$red-A700: #d50000 !default; +$red: $red-500 !default; + + +$pink-50: #fce4ec !default; +$pink-100: #f8bbd0 !default; +$pink-200: #f48fb1 !default; +$pink-300: #f06292 !default; +$pink-400: #ec407a !default; +$pink-500: #e91e63 !default; +$pink-600: #d81b60 !default; +$pink-700: #c2185b !default; +$pink-800: #ad1457 !default; +$pink-900: #880e4f !default; +$pink-A100: #ff80ab !default; +$pink-A200: #ff4081 !default; +$pink-A400: #f50057 !default; +$pink-A700: #c51162 !default; +$pink: $pink-500 !default; + + +$purple-50: #f3e5f5 !default; +$purple-100: #e1bee7 !default; +$purple-200: #ce93d8 !default; +$purple-300: #ba68c8 !default; +$purple-400: #ab47bc !default; +$purple-500: #9c27b0 !default; +$purple-600: #8e24aa !default; +$purple-700: #7b1fa2 !default; +$purple-800: #6a1b9a !default; +$purple-900: #4a148c !default; +$purple-A100: #ea80fc !default; +$purple-A200: #e040fb !default; +$purple-A400: #d500f9 !default; +$purple-A700: #aa00ff !default; +$purple: $purple-500 !default; + + +$deep-purple-50: #ede7f6 !default; +$deep-purple-100: #d1c4e9 !default; +$deep-purple-200: #b39ddb !default; +$deep-purple-300: #9575cd !default; +$deep-purple-400: #7e57c2 !default; +$deep-purple-500: #673ab7 !default; +$deep-purple-600: #5e35b1 !default; +$deep-purple-700: #512da8 !default; +$deep-purple-800: #4527a0 !default; +$deep-purple-900: #311b92 !default; +$deep-purple-A100: #b388ff !default; +$deep-purple-A200: #7c4dff !default; +$deep-purple-A400: #651fff !default; +$deep-purple-A700: #6200ea !default; +$deep-purple: $deep-purple-500 !default; + + +$indigo-50: #e8eaf6 !default; +$indigo-100: #c5cae9 !default; +$indigo-200: #9fa8da !default; +$indigo-300: #7986cb !default; +$indigo-400: #5c6bc0 !default; +$indigo-500: #3f51b5 !default; +$indigo-600: #3949ab !default; +$indigo-700: #303f9f !default; +$indigo-800: #283593 !default; +$indigo-900: #1a237e !default; +$indigo-A100: #8c9eff !default; +$indigo-A200: #536dfe !default; +$indigo-A400: #3d5afe !default; +$indigo-A700: #304ffe !default; +$indigo: $indigo-500 !default; + + +$blue-50: #e3f2fd !default; +$blue-100: #bbdefb !default; +$blue-200: #90caf9 !default; +$blue-300: #64b5f6 !default; +$blue-400: #42a5f5 !default; +$blue-500: #2196f3 !default; +$blue-600: #1e88e5 !default; +$blue-700: #1976d2 !default; +$blue-800: #1565c0 !default; +$blue-900: #0d47a1 !default; +$blue-A100: #82b1ff !default; +$blue-A200: #448aff !default; +$blue-A400: #2979ff !default; +$blue-A700: #2962ff !default; +$blue: $blue-500 !default; + + +$light-blue-50: #e1f5fe !default; +$light-blue-100: #b3e5fc !default; +$light-blue-200: #81d4fa !default; +$light-blue-300: #4fc3f7 !default; +$light-blue-400: #29b6f6 !default; +$light-blue-500: #03a9f4 !default; +$light-blue-600: #039be5 !default; +$light-blue-700: #0288d1 !default; +$light-blue-800: #0277bd !default; +$light-blue-900: #01579b !default; +$light-blue-A100: #80d8ff !default; +$light-blue-A200: #40c4ff !default; +$light-blue-A400: #00b0ff !default; +$light-blue-A700: #0091ea !default; +$light-blue: $light-blue-500 !default; + + +$cyan-50: #e0f7fa !default; +$cyan-100: #b2ebf2 !default; +$cyan-200: #80deea !default; +$cyan-300: #4dd0e1 !default; +$cyan-400: #26c6da !default; +$cyan-500: #00bcd4 !default; +$cyan-600: #00acc1 !default; +$cyan-700: #0097a7 !default; +$cyan-800: #00838f !default; +$cyan-900: #006064 !default; +$cyan-A100: #84ffff !default; +$cyan-A200: #18ffff !default; +$cyan-A400: #00e5ff !default; +$cyan-A700: #00b8d4 !default; +$cyan: $cyan-500 !default; + + +$teal-50: #e0f2f1 !default; +$teal-100: #b2dfdb !default; +$teal-200: #80cbc4 !default; +$teal-300: #4db6ac !default; +$teal-400: #26a69a !default; +$teal-500: #009688 !default; +$teal-600: #00897b !default; +$teal-700: #00796b !default; +$teal-800: #00695c !default; +$teal-900: #004d40 !default; +$teal-A100: #a7ffeb !default; +$teal-A200: #64ffda !default; +$teal-A400: #1de9b6 !default; +$teal-A700: #00bfa5 !default; +$teal: $teal-500 !default; + + +$green-50: #e8f5e9 !default; +$green-100: #c8e6c9 !default; +$green-200: #a5d6a7 !default; +$green-300: #81c784 !default; +$green-400: #66bb6a !default; +$green-500: #4caf50 !default; +$green-600: #43a047 !default; +$green-700: #388e3c !default; +$green-800: #2e7d32 !default; +$green-900: #1b5e20 !default; +$green-A100: #b9f6ca !default; +$green-A200: #69f0ae !default; +$green-A400: #00e676 !default; +$green-A700: #00c853 !default; +$green: $green-500 !default; + + +$light-green-50: #f1f8e9 !default; +$light-green-100: #dcedc8 !default; +$light-green-200: #c5e1a5 !default; +$light-green-300: #aed581 !default; +$light-green-400: #9ccc65 !default; +$light-green-500: #8bc34a !default; +$light-green-600: #7cb342 !default; +$light-green-700: #689f38 !default; +$light-green-800: #558b2f !default; +$light-green-900: #33691e !default; +$light-green-A100: #ccff90 !default; +$light-green-A200: #b2ff59 !default; +$light-green-A400: #76ff03 !default; +$light-green-A700: #64dd17 !default; +$light-green: $light-green-500 !default; + + +$lime-50: #f9fbe7 !default; +$lime-100: #f0f4c3 !default; +$lime-200: #e6ee9c !default; +$lime-300: #dce775 !default; +$lime-400: #d4e157 !default; +$lime-500: #cddc39 !default; +$lime-600: #c0ca33 !default; +$lime-700: #afb42b !default; +$lime-800: #9e9d24 !default; +$lime-900: #827717 !default; +$lime-A100: #f4ff81 !default; +$lime-A200: #eeff41 !default; +$lime-A400: #c6ff00 !default; +$lime-A700: #aeea00 !default; +$lime: $lime-500 !default; + + +$yellow-50: #fffde7 !default; +$yellow-100: #fff9c4 !default; +$yellow-200: #fff59d !default; +$yellow-300: #fff176 !default; +$yellow-400: #ffee58 !default; +$yellow-500: #ffeb3b !default; +$yellow-600: #fdd835 !default; +$yellow-700: #fbc02d !default; +$yellow-800: #f9a825 !default; +$yellow-900: #f57f17 !default; +$yellow-A100: #ffff8d !default; +$yellow-A200: #ffff00 !default; +$yellow-A400: #ffea00 !default; +$yellow-A700: #ffd600 !default; +$yellow: $yellow-500 !default; + + +$amber-50: #fff8e1 !default; +$amber-100: #ffecb3 !default; +$amber-200: #ffe082 !default; +$amber-300: #ffd54f !default; +$amber-400: #ffca28 !default; +$amber-500: #ffc107 !default; +$amber-600: #ffb300 !default; +$amber-700: #ffa000 !default; +$amber-800: #ff8f00 !default; +$amber-900: #ff6f00 !default; +$amber-A100: #ffe57f !default; +$amber-A200: #ffd740 !default; +$amber-A400: #ffc400 !default; +$amber-A700: #ffab00 !default; +$amber: $amber-500 !default; + + +$orange-50: #fff3e0 !default; +$orange-100: #ffe0b2 !default; +$orange-200: #ffcc80 !default; +$orange-300: #ffb74d !default; +$orange-400: #ffa726 !default; +$orange-500: #ff9800 !default; +$orange-600: #fb8c00 !default; +$orange-700: #f57c00 !default; +$orange-800: #ef6c00 !default; +$orange-900: #e65100 !default; +$orange-A100: #ffd180 !default; +$orange-A200: #ffab40 !default; +$orange-A400: #ff9100 !default; +$orange-A700: #ff6d00 !default; +$orange: $orange-500 !default; + + +$deep-orange-50: #fbe9e7 !default; +$deep-orange-100: #ffccbc !default; +$deep-orange-200: #ffab91 !default; +$deep-orange-300: #ff8a65 !default; +$deep-orange-400: #ff7043 !default; +$deep-orange-500: #ff5722 !default; +$deep-orange-600: #f4511e !default; +$deep-orange-700: #e64a19 !default; +$deep-orange-800: #d84315 !default; +$deep-orange-900: #bf360c !default; +$deep-orange-A100: #ff9e80 !default; +$deep-orange-A200: #ff6e40 !default; +$deep-orange-A400: #ff3d00 !default; +$deep-orange-A700: #dd2c00 !default; +$deep-orange: $deep-orange-500 !default; + + +$brown-50: #efebe9 !default; +$brown-100: #d7ccc8 !default; +$brown-200: #bcaaa4 !default; +$brown-300: #a1887f !default; +$brown-400: #8d6e63 !default; +$brown-500: #795548 !default; +$brown-600: #6d4c41 !default; +$brown-700: #5d4037 !default; +$brown-800: #4e342e !default; +$brown-900: #3e2723 !default; +$brown-A100: #d7ccc8 !default; +$brown-A200: #bcaaa4 !default; +$brown-A400: #8d6e63 !default; +$brown-A700: #5d4037 !default; +$brown: $brown-500 !default; + + +$grey-50: #fafafa !default; +$grey-100: #f5f5f5 !default; +$grey-200: #eeeeee !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e !default; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$grey-A100: #f5f5f5 !default; +$grey-A200: #eeeeee !default; +$grey-A400: #bdbdbd !default; +$grey-A700: #616161 !default; +$grey: $grey-500 !default; + + +$blue-grey-50: #eceff1 !default; +$blue-grey-100: #cfd8dc !default; +$blue-grey-200: #b0bec5 !default; +$blue-grey-300: #90a4ae !default; +$blue-grey-400: #78909c !default; +$blue-grey-500: #607d8b !default; +$blue-grey-600: #546e7a !default; +$blue-grey-700: #455a64 !default; +$blue-grey-800: #37474f !default; +$blue-grey-900: #263238 !default; +$blue-grey-A100: #cfd8dc !default; +$blue-grey-A200: #b0bec5 !default; +$blue-grey-A400: #78909c !default; +$blue-grey-A700: #455a64 !default; +$blue-grey: $blue-grey-500 !default; + + +$black: #000000 !default; +$white: #ffffff !default; +$inverse: $indigo !default; diff --git a/sass/_dialogs.scss b/sass/_dialogs.scss new file mode 100644 index 00000000..2cb75f38 --- /dev/null +++ b/sass/_dialogs.scss @@ -0,0 +1,52 @@ +// +// Modals +// Material Design element Dialogs +// -------------------------------------------------- +.modal-content { + @include shadow-z-5(); + border-radius: 2px; + border: none; + // Modal header + // Top section of the modal w/ title and dismiss + .modal-header { + border-bottom: none; + padding-top: 24px; + padding-right: 24px; + padding-bottom: 0px; + padding-left: 24px; + } + // Modal body + // Where all modal content resides (sibling of .modal-header and .modal-footer) + .modal-body { + padding-top: 24px; + padding-right: 24px; + padding-bottom: 16px; + padding-left: 24px; + } + // Footer (for actions) + .modal-footer { + border-top: none; + padding: 7px; + button { + margin: 0; + padding-left: 16px; + padding-right: 16px; + width: auto; + &.pull-left { + padding-left: 5px; + padding-right: 5px; + position: relative; + left: -5px; + } + } + button+button { + margin-bottom: 16px; + } + } + .modal-body + .modal-footer { + padding-top: 0; + } +} +.modal-backdrop { + background: rgba(0,0,0,0.3); +} diff --git a/sass/_dividers.scss b/sass/_dividers.scss new file mode 100644 index 00000000..ee7cd4c1 --- /dev/null +++ b/sass/_dividers.scss @@ -0,0 +1,71 @@ +hr { + &.on-dark { + color: lighten($black, 10%); + } + + &.on-light { + color: lighten($white, 10%); + } + + @media (-webkit-min-device-pixel-ratio: 0.75), + (min--moz-device-pixel-ratio: 0.75), + (-o-device-pixel-ratio: 3/4), + (min-device-pixel-ratio: 0.75), + (min-resolution: 0.75dppx), + (min-resolution: 120dpi), { + height:0.75px; + } + + @media (-webkit-min-device-pixel-ratio: 1), + (min--moz-device-pixel-ratio: 1), + (-o-device-pixel-ratio: 1), + (min-device-pixel-ratio: 1), + (min-resolution: 1dppx), + (min-resolution: 160dpi) { + height:1px; + } + @media (-webkit-min-device-pixel-ratio: 1.33), + (min--moz-device-pixel-ratio: 1.33), + (-o-device-pixel-ratio: 133/100), + (min-device-pixel-ratio: 1.33), + (min-resolution: 1.33dppx), + (min-resolution: 213dpi) { + height:1.333px; + } + @media (-webkit-min-device-pixel-ratio: 1.5), + (min--moz-device-pixel-ratio: 1.5), + (-o-device-pixel-ratio: 3/2), + (min-device-pixel-ratio: 1.5), + (min-resolution: 1.5dppx), + (min-resolution: 240dpi) { + height:1.5px; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min--moz-device-pixel-ratio: 2), + (-o-device-pixel-ratio: 2/1), + (min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 380dpi) { + height:2px; + } + + @media (-webkit-min-device-pixel-ratio: 3), + (min--moz-device-pixel-ratio: 3), + (-o-device-pixel-ratio: 3/1), + (min-device-pixel-ratio: 3), + (min-resolution: 3dppx), + (min-resolution: 480dpi) { + height:3px; + } + + @media (-webkit-min-device-pixel-ratio: 4), + (min--moz-device-pixel-ratio: 4), + (-o-device-pixel-ratio: 4/1), + (min-device-pixel-ratio: 3), + (min-resolution: 4dppx), + (min-resolution: 640dpi) { + height:4px; + } + +} diff --git a/sass/_icons-material-design.scss b/sass/_icons-material-design.scss index f23a8bd9..ac960f1e 100644 --- a/sass/_icons-material-design.scss +++ b/sass/_icons-material-design.scss @@ -209,7 +209,6 @@ /* Start Icons */ - .mdi-action-3d-rotation:before { content: "\e600"; } diff --git a/sass/_icons.scss b/sass/_icons.scss index 1ace7d3e..98121e3b 100644 --- a/sass/_icons.scss +++ b/sass/_icons.scss @@ -1,80 +1,5 @@ -.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); +.mdi, icon { + @include variations(unquote(""), color, $lightbg-text); + line-height: inherit; + vertical-align: bottom; } diff --git a/sass/_inputs.scss b/sass/_inputs.scss index d3e06d04..a4088dc7 100644 --- a/sass/_inputs.scss +++ b/sass/_inputs.scss @@ -1,209 +1,250 @@ -fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control { - &, &:focus, &.focus { - &:not(textarea) { - 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; - } +fieldset[disabled] .form-control, .form-control { + &, &:focus, &.focus { + padding: 0; + float: none; + border: 0; + box-shadow: none; + border-radius: 0; + &:disabled { + border-style: dashed; + border-bottom: 1px solid #757575; } + } +} + +fieldset[disabled] .form-control, .form-control { + &:textarea { + height: 40px; + } } select[multiple].form-control { - &, &:focus, &.focus { - height: 85px; - } + &, &:focus, &.focus { + height: 85px; + } } +.form-control { + border: 0; + background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); + background-size: 0 2px, 100% 1px; + background-repeat: no-repeat; + background-position: center bottom, center calc(unquote("100% - 1px")); + background-color: transparent; + background-color: rgba(0,0,0,0); + transition: background 0s ease-out; + &::-webkit-input-placeholder { + color: $input-placeholder-color; + } + &::-moz-placeholder { + color: $input-placeholder-color; + } + &:-ms-input-placeholder { + color: $input-placeholder-color; + } +} +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: transparent; + background-color: rgba(0,0,0,0); +} +fieldset[disabled] .form-control:disabled, +.form-control-wrapper .form-control:disabled, +.form-control:disabled, +fieldset[disabled] .form-control:focus:disabled, +.form-control-wrapper .form-control:focus:disabled, +.form-control:focus:disabled, +fieldset[disabled] .form-control.focus:disabled, +.form-control-wrapper .form-control.focus:disabled, +.form-control.focus:disabled { + border: 0; // Ugly override of Bootstrap border +} + +.form-control:focus, .form-control.focus { + outline: none; + background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color); + background-size: 100% 2px, 100% 1px; + box-shadow: none; + transition-duration: 0.3s; +} + + .form-control-wrapper { - position: relative; + position: relative; - .form-control:focus, .form-control.focus { - outline: none; - } + .floating-label { + color: $input-placeholder-color; + position: absolute; + pointer-events: none; + left: 0px; + top: 5px; + transition: 0.3s ease all; + } - .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; - } + // Input sizes + .floating-label { // base + font-size: $font-size-base; + } + .form-control:focus ~ .floating-label, + .form-control:not(.empty) ~ .floating-label { + top: $floating-label-size-ratio * -$font-size-base; + font-size: $floating-label-size-ratio * $font-size-base; + } - /* 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; - } + .input-sm + .floating-label { // small + font-size: $font-size-small; + top: 7px; + } + .form-control.input-sm:focus ~ .floating-label, + .form-control.input-sm:not(.empty) ~.floating-label { + top: $floating-label-size-ratio * -$font-size-small; + font-size: $floating-label-size-ratio * $font-size-small; + } - select ~ .material-input:after { - display: none; - } + .input-lg + .floating-label { + font-size: $font-size-large; + top: 10px; + } + .form-control.input-lg:focus ~ .floating-label, + .form-control.input-lg:not(.empty) ~ .floating-label { + top: $floating-label-size-ratio * -$font-size-large; + font-size: $floating-label-size-ratio * $font-size-large; + } + + .form-control:focus ~ .floating-label { + color: $primary; + } + .form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label { + color: $input-danger; + } + .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after { + background-color: $input-default; + } + .form-control:invalid { + background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color); + } + textarea { resize: none; } + textarea ~ .form-control-highlight { + margin-top: -11px; + } + + // Hints + .hint { + position: absolute; + font-size: 80%; + display: none; + } + .form-control:focus ~ .hint, .form-control.focus ~ .hint { + display: block; + } + + select ~ .material-input:after { + display: none; + } + + // Fix for OS X + select { + appearance: none; + } } .form-group { - &.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-warning { + .form-control { + box-shadow: none; } - &.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; - } + .material-input:focus, .form-control:focus, .form-control.focus { + background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color); + box-shadow: none; } - &.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; - } + .control-label, input.form-control:focus ~ .floating-label { + color: $input-warning; } - &.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; - } + } + &.has-error { + .form-control { + box-shadow: none; } - //.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); + .material-input:focus, .form-control:focus, .form-control.focus { + background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color); + box-shadow: none; + } + .control-label, input.form-control:focus ~ .floating-label { + color: $input-danger; + } + } + &.has-success { + .form-control { + box-shadow: none; + } + .material-input:focus, .form-control:focus, .form-control.focus { + background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color); + box-shadow: none; + } + .control-label, input.form-control:focus ~ .floating-label { + color: $input-success; + } + } + &.has-info { + .form-control { + box-shadow: none; + } + .material-input:focus, .form-control:focus, .form-control.focus { + background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color); + box-shadow: none; + } + .control-label, input.form-control:focus ~ .floating-label { + color: $input-info; + } + } + .generic-variations(unquote(" .form-control:focus"), $primary, { + background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color); + }); + .generic-variations(unquote(" .form-control.focus"), $primary, { + background-image: linear-gradient($material-color, $material-color), linear-gradient($input-underline-color, $input-underline-color); + }); + @include variations(unquote(" .control-label"), color, $lightbg-text); + @include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default); } .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; + .form-control-wrapper { + .form-control { + float: none; } + margin-right: 5px; + margin-left: 5px; + } + .input-group-addon { + border: 0; + background: transparent; + } + .input-group-btn .btn { + border-radius: 4px; + margin: 0; + } } select.form-control { - border: 0; + border: 0; + box-shadow: none; + border-radius: 0; + &:focus, &.focus { box-shadow: none; - border-radius: 0; - &:focus, &.focus { - box-shadow: none; - border-color: #757575; - } + 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; + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; } diff --git a/sass/_labels.scss b/sass/_labels.scss new file mode 100644 index 00000000..6f5aa4ca --- /dev/null +++ b/sass/_labels.scss @@ -0,0 +1,4 @@ +.label { + border-radius: 1px; + @include variations(unquote(""), background-color, $grey); +} diff --git a/sass/_lists.scss b/sass/_lists.scss index 65ead8fc..df7522f6 100644 --- a/sass/_lists.scss +++ b/sass/_lists.scss @@ -1,83 +1,102 @@ .list-group { + border-radius: 0; + .list-group-item { + background-color: transparent; + overflow: hidden; + border: 0; 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; - } + padding: 0 16px; + &.baseline { + border-bottom: 1px solid #cecece; + &:last-child { + border-bottom: none; + } } - .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; + .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; + .checkbox-material { + left: -10px; + } + } } + .row-content { + display: inline-block; + width: unquote("calc(100% - 92px)"); + min-height: 66px; + .action-secondary { + position: absolute; + right: 16px; + top: 16px; + i { + font-size: 20px; + color: rgba(0,0,0,0.25); + cursor: pointer; + } + } + .action-secondary ~ * { + max-width: unquote("calc(100% - 30px)"); + } + .least-content { + position: absolute; + right: 16px; + top: 0px; + color: rgba(0,0,0,0.54); + font-size: 14px; + } + } + .list-group-item-heading { + color: rgba(0, 0, 0, 0.77); + font-size: 20px; + line-height: 29px; + } + } + .list-group-item.active { + &:hover, &:focus { + background: rgba(0,0,0,.15); + outline: 10px solid rgba(0,0,0,.15); + } + .list-group-item-heading, .list-group-item-text { + color: $lightbg-text; + } + + } + .list-group-separator { + clear: both; + overflow: hidden; + margin-top: 10px; + margin-bottom: 10px; + &:before { + content: ""; + width: unquote("calc(100% - 90px)"); + border-bottom: 1px solid rgba(0,0,0,0.1); + float: right; + } + } } diff --git a/sass/_mixins-fullpalette.scss b/sass/_mixins-fullpalette.scss new file mode 100644 index 00000000..65d285f3 --- /dev/null +++ b/sass/_mixins-fullpalette.scss @@ -0,0 +1,160 @@ +// usage: @include variations(unquote(" .check"), color, transparent); +@mixin variations($extra, $property, $default){ + .generic-variations($extra, $default, { + #{$property}: $material-color !default; + }); +} + +@mixin background-variations($extra, $default){ + .generic-variations($extra, $default, { + background-color: $material-color; + & when ($material-color = $btn-default) { + color: $lightbg-text; + } + & when not ($material-color = $btn-default) { + color: $material-text-color; + } + }); +} + +@mixin text-variations($extra, $default){ + .generic-variations($extra, $default, { + color: $material-color; + }); +} + +// +// To use this mixin you should pass a function as final parameter to define +// the style. In that definition you can use the following variables to define it. +// +// $material-color-name ---> "red", "green", "indigo" ... +// $material-color-full-name ---> "red", "green-50", "indigo-400" ... +// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ... +// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... +// + +@mixin generic-variations($extra, $default, $func){ + + $contrast-factor: 40% !default; + + // bootstrap styles + &#{$extra}, &-default#{$extra} { + $material-color-name: "default" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $default !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-black#{$extra} { + $material-color-name: "black" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $black !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-white#{$extra} { + $material-color-name: "white" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $white !default; + $material-text-color: $lightbg-text !default; + $func(); + } + &-inverse#{$extra} { + $material-color-name: "inverse" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $inverse !default; + $material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default; + $func(); + } + &-primary#{$extra} { + $material-color-name: "primary" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $primary !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-success#{$extra} { + $material-color-name: "success" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $success !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-info#{$extra} { + $material-color-name: "info" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $info !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-warning#{$extra} { + $material-color-name: "warning" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $warning !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-danger#{$extra} { + $material-color-name: "danger" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $danger !default; + $material-text-color: $darkbg-text !default; + $func(); + } + + // given a color build multiples dephs + @mixin generic-variations-factory($material-color-name){ + + // given a color and its deph build css + @mixin generic-variations-factory-deep($material-color-number){ + + &-material-#{$material-color-name}#{$material-color-number}#{$extra} { + $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default; + $material-color: $$material-color-full-name !default; + $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default; + $func(); + } + + } + + @include generic-variations-factory-deep(unquote("")); + @include generic-variations-factory-deep(unquote("-50")); + @include generic-variations-factory-deep(unquote("-100")); + @include generic-variations-factory-deep(unquote("-200")); + @include generic-variations-factory-deep(unquote("-300")); + @include generic-variations-factory-deep(unquote("-400")); + @include generic-variations-factory-deep(unquote("-500")); + @include generic-variations-factory-deep(unquote("-600")); + @include generic-variations-factory-deep(unquote("-700")); + @include generic-variations-factory-deep(unquote("-800")); + @include generic-variations-factory-deep(unquote("-900")); + @include generic-variations-factory-deep(unquote("-A100")); + @include generic-variations-factory-deep(unquote("-A200")); + @include generic-variations-factory-deep(unquote("-A400")); + @include generic-variations-factory-deep(unquote("-A700")); + } + + @include generic-variations-factory(unquote("red")); + @include generic-variations-factory(unquote("pink")); + @include generic-variations-factory(unquote("purple")); + @include generic-variations-factory(unquote("deep-purple")); + @include generic-variations-factory(unquote("indigo")); + @include generic-variations-factory(unquote("blue")); + @include generic-variations-factory(unquote("light-blue")); + @include generic-variations-factory(unquote("cyan")); + @include generic-variations-factory(unquote("teal")); + @include generic-variations-factory(unquote("green")); + @include generic-variations-factory(unquote("light-green")); + @include generic-variations-factory(unquote("lime")); + @include generic-variations-factory(unquote("yellow")); + @include generic-variations-factory(unquote("amber")); + @include generic-variations-factory(unquote("orange")); + @include generic-variations-factory(unquote("deep-orange")); + @include generic-variations-factory(unquote("brown")); + @include generic-variations-factory(unquote("grey")); + @include generic-variations-factory(unquote("blue-grey")); + +} + + +$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger") !default; diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 31e4e889..d5f7bd05 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -1,32 +1,147 @@ -@mixin card-variant($background, $color, $border) { - background-color: $background; - color: $color; +// usage: @include variations(unquote(" .check"), color, transparent); +@mixin variations($extra, $property, $default){ + .generic-variations($extra, $default, { + #{$property}: $material-color !default; + }); +} - .card-footer, .card-header { - border-color: $border; +@mixin background-variations($extra, $default){ + .generic-variations($extra, $default, { + background-color: $material-color; + & when ($material-color = $btn-default) { + color: $lightbg-text; + } + & when not ($material-color = $btn-default) { + color: $material-text-color; + } + }); +} + +@mixin text-variations($extra, $default){ + .generic-variations($extra, $default, { + color: $material-color; + }); +} + +// +// To use this mixin you should pass a function as final parameter to define +// the style. In that definition you can use the following variables to define it. +// +// $material-color-name ---> "red", "green", "indigo" ... +// $material-color-full-name ---> "red", "green-50", "indigo-400" ... +// $material-color ---> #f44336, #e8f5e9, #5c6bc0 ... +// $material-text-color ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... +// + + +@mixin generic-variations($extra, $default, $func){ + + $contrast-factor: 40% !default; + + // bootstrap styles + &#{$extra}, &-default#{$extra} { + $material-color-name: "default" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $default !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-black#{$extra} { + $material-color-name: "black" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $black !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-white#{$extra} { + $material-color-name: "white" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $white !default; + $material-text-color: $lightbg-text !default; + $func(); + } + &-inverse#{$extra} { + $material-color-name: "inverse" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $inverse !default; + $material-text-color: contrast($inverse, $lightbg-text, $darkbg-text, $contrast-factor) !default; + $func(); + } + &-primary#{$extra} { + $material-color-name: "primary" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $primary !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-success#{$extra} { + $material-color-name: "success" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $success !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-info#{$extra} { + $material-color-name: "info" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $info !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-warning#{$extra} { + $material-color-name: "warning" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $warning !default; + $material-text-color: $darkbg-text !default; + $func(); + } + &-danger#{$extra} { + $material-color-name: "danger" !default; + $material-color-full-name: $material-color-name !default; + $material-color: $danger !default; + $material-text-color: $darkbg-text !default; + $func(); } - a { - color: $color; + // given a color build multiples dephs + @mixin generic-variations-factory($material-color-name){ + + // given a color and its deph build css + @mixin generic-variations-factory-deep($material-color-number){ + + &-material-#{$material-color-name}#{$material-color-number}#{$extra} { + $material-color-full-name: "#{$material-color-name}#{$material-color-number}" !default; + $material-color: $$material-color-full-name !default; + $material-text-color: contrast($material-color, $lightbg-text, $darkbg-text, $contrast-factor) !default; + $func(); + } + + } + + @include generic-variations-factory-deep(unquote("")); } + + @include generic-variations-factory(unquote("red")); + @include generic-variations-factory(unquote("pink")); + @include generic-variations-factory(unquote("purple")); + @include generic-variations-factory(unquote("deep-purple")); + @include generic-variations-factory(unquote("indigo")); + @include generic-variations-factory(unquote("blue")); + @include generic-variations-factory(unquote("light-blue")); + @include generic-variations-factory(unquote("cyan")); + @include generic-variations-factory(unquote("teal")); + @include generic-variations-factory(unquote("green")); + @include generic-variations-factory(unquote("light-green")); + @include generic-variations-factory(unquote("lime")); + @include generic-variations-factory(unquote("yellow")); + @include generic-variations-factory(unquote("amber")); + @include generic-variations-factory(unquote("orange")); + @include generic-variations-factory(unquote("deep-orange")); + @include generic-variations-factory(unquote("brown")); + @include generic-variations-factory(unquote("grey")); + @include generic-variations-factory(unquote("blue-grey")); + } -@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; -} +$all-variations: unquote("-default, -primary, -info, -success, -warning, -danger") !default; diff --git a/sass/_navbar.scss b/sass/_navbar.scss index ac2080c4..d6f7fa20 100644 --- a/sass/_navbar.scss +++ b/sass/_navbar.scss @@ -1,286 +1,217 @@ .navbar { - background-color: $navbar-default-bg; - border: 0; - border-radius: 0; + background-color: $primary; + border: $zero; + border-radius: $zero; - .navbar-brand { - position: relative; - height: 60px; - line-height: 30px; - color: $navbar-brand-color; - &:hover, - &:focus { - color: $navbar-brand-color; - background-color: transparent; + .navbar-brand { + position: relative; + height: 60px; + line-height: 30px; + color: inherit; + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + + .navbar-text { + color: inherit; + margin-top: 20px; + margin-bottom: 20px; + } + + .navbar-nav { + > li > a { + color: inherit; + padding-top: 20px; + padding-bottom: 20px; + + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: rgba(255, 255, 255, 0.1); + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + opacity: 0.9; + } + } + } + + // Darken the responsive nav toggle + .navbar-toggle { + border: $zero; + &:hover, + &:focus { + background-color: transparent; + } + .icon-bar { + background-color: inherit; + border: 1px solid; + } + } + + .navbar-default .navbar-toggle, + .navbar-inverse .navbar-toggle { + border-color: transparent; + } + + .navbar-collapse, + .navbar-form { + border-color: rgba(0,0,0,0.1); + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: transparent; + color: inherit; + } + } + + @media (max-width: 767px) { + .navbar-text { + color: inherit; + margin-top: 15px; + margin-bottom: 15px; + } + + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border: $zero; + color: inherit; + } + .divider { + border-bottom: 1px solid; + opacity: 0.08; } - } - - .navbar-text { - color: $navbar-color; - margin-top: 20px; - margin-bottom: 20px; - } - - .navbar-nav { > li > a { - color: $navbar-link-color; - padding-top: 20px; - padding-bottom: 20px; - - &:hover, - &:focus { - color: $navbar-link-hover-color; - background-color: $navbar-link-hover-bg; - } + color: inherit; + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } } > .active > a { - &, - &:hover, - &:focus { - color: $navbar-link-active-color; - background-color: $navbar-link-active-bg; - } + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } } > .disabled > a { - &, - &:hover, - &:focus { - color: $navbar-link-disabled-color; - background-color: $navbar-link-disabled-bg; - } + &, + &:hover, + &:focus { + color: inherit; + background-color: transparent; + } } + } } + } - // Darken the responsive nav toggle - .navbar-toggle { - border-color: $navbar-toggle-border-color; + .navbar-link { + color: inherit; + &:hover { + color: inherit; + } + } + + .btn-link { + color: inherit; + &:hover, + &:focus { + color: inherit; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: inherit; + } + } + } + + .navbar-form { + margin-top: 16px; + .form-control-wrapper .form-control, .form-control { + border-color: inherit; + color: inherit; + } + .form-control-wrapper { + .material-input:before, input:focus ~ .material-input:after { + background-color: inherit; + } + } + } + + .generic-variations(unquote(".navbar"), $primary, { + background-color: $material-color; + color: $material-text-color; + // deeply defined to override welljumbo class without !impotant need + .navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder { + color: $material-text-color; + } + .dropdown-menu { + border-radius: $dropdown-radius; + li > a { + font-size: $dropdown-font-size; + padding: 13px 16px; &:hover, &:focus { - background-color: $navbar-toggle-hover-bg; + color: $material-color; + background-color: $grey-200; } - .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; + } + .active > a { &:hover, &:focus { - color: $navbar-link-hover-color; - } - &[disabled], - fieldset[disabled] & { - &:hover, - &:focus { - color: $navbar-link-disabled-color; - } + color: $material-text-color; } + background-color: $material-color; + color: $material-text-color; + } } + }); + &-inverse { + background-color: $indigo; + } + + @media (max-width: 1199px) { + + .navbar-brand { + height: 50px; + padding: 10px 15px; + } .navbar-form { - margin-top: 16px; - .form-control-wrapper .form-control, .form-control { - border-color: $navbar-border; - color: $navbar-border; - } - .form-control-wrapper { - .material-input:before, input:focus ~ .material-input:after { - background-color: $navbar-border; - } - } - ::-webkit-input-placeholder { color: $navbar-border; } - :-moz-placeholder { color: $navbar-border; }; - ::-moz-placeholder { color: $navbar-border; }; - :-ms-input-placeholder { color: $navbar-border; }; - } -} - -.navbar-inverse { - background-color: $navbar-inverse-bg; + margin-top: 10px; } -.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-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; } - -// 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/_panels.scss b/sass/_panels.scss new file mode 100644 index 00000000..a5380d63 --- /dev/null +++ b/sass/_panels.scss @@ -0,0 +1,21 @@ +.panel { + border-radius: 2px; + border: 0; + + @include variations(unquote(" > .panel-heading"), background-color, $grey-200); + .shadow-z-1; +} + + +[class*="panel-"] > .panel-heading { + color: $darkbg-text; + border: 0; +} +.panel-default, .panel:not([class*="panel-"]) { + > .panel-heading { + color: $lightbg-text; + } +} +.panel-footer { + background-color: $grey-200; +} diff --git a/sass/_plugin-dropdownjs.scss b/sass/_plugin-dropdownjs.scss new file mode 100644 index 00000000..6ccf7d54 --- /dev/null +++ b/sass/_plugin-dropdownjs.scss @@ -0,0 +1,19 @@ +.dropdownjs:after { + right: 5px; + top: 3px; + font-size: 25px; + position: absolute; + content: "\e8ac"; + font-family: "Material-Design-Icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + pointer-events: none; + color: #757575; + +} diff --git a/sass/_plugin-nouislider.scss b/sass/_plugin-nouislider.scss index c3ed256b..2ab0dd67 100644 --- a/sass/_plugin-nouislider.scss +++ b/sass/_plugin-nouislider.scss @@ -37,12 +37,20 @@ .noUi-horizontal { height: 10px; } -.noUi-horizontal .noUi-handle { +.noUi-handle { box-sizing: border-box; width: 12px; height: 12px; left: -10px; top: -5px; + cursor: ew-resize; + border-radius: 100%; + transition: all 0.2s ease-out; + border: 1px solid; +} +.noUi-vertical .noUi-handle { + margin-left: 5px; + cursor: ns-resize; } .noUi-horizontal.noUi-extended { padding: 0 15px; @@ -70,18 +78,18 @@ .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); +.noUi-vertical { + height: 100%; + width: 2px; + margin: 0 15px; + display: inline-block; +} +.noUi-handle.noUi-active { + transform: scale3d(2.5, 2.5, 1); } [disabled].noUi-slider{ opacity: 0.5; @@ -95,8 +103,8 @@ } .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); + @include variations(unquote(".noUi-connect"), background-color, $primary); + @include variations(unquote(" .noUi-connect"), background-color, $primary); + @include variations(unquote(" .noUi-handle"), background-color, $primary); + @include variations(unquote(" .noUi-handle"), border-color, $primary); } diff --git a/sass/_plugin-selectize.scss b/sass/_plugin-selectize.scss new file mode 100644 index 00000000..acde11e8 --- /dev/null +++ b/sass/_plugin-selectize.scss @@ -0,0 +1,91 @@ +// Support for Selectize plugin +// http://brianreavis.github.io/selectize.js/ + +.selectize-control.single, .selectize-control.multi { + padding: 0; + .selectize-input, .selectize-input.input-active { + + cursor: text; + background: transparent; + box-shadow: none; + border: 0; + padding: 0; + height: 100%; + font-size: 14px; + line-height: 30px; + .has-items { + padding: 0; + } + &:after { + right: 5px; + position: absolute; + font-size: 7px; + content: "\e894"; + font-family: "Material-Design-Icons"; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 4; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + input { + font-size: 14px; + outline: 0px; + border: 0px; + background: transparent; + } + &.floating-label-fix input { + opacity: 0; + } + > div, > .item { + display: inline-block; + margin: 0 8px 3px 0; + padding: 0; + background: transparent; + border: 0; + &:after { + content: ","; + } + &:last-of-type:after { + content: ""; + } + &.active { + font-weight: bold; + background: transparent; + border: 0; + } + } + } + .selectize-dropdown { + position: absolute; + z-index: 1000; + border: 0; + width: 100% !important; + left: 0 !important; + height: auto; + background-color: #FFF; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border-radius: 2px; + padding: 0; + margin-top: 3px; + .active { + background-color: inherit; + } + .highlight { + background-color: #d5d8ff; + } + .selected, .selected.active { + background-color: #EEEEEE; + } + [data-selectable], .optgroup-header { + padding: 10px 20px; + cursor: pointer; + } + } + .dropdown-active ~ .selectize-dropdown { + display: block; + } +} diff --git a/sass/_plugin-snackbarjs.scss b/sass/_plugin-snackbarjs.scss index ed6e39c1..7db19e8c 100644 --- a/sass/_plugin-snackbarjs.scss +++ b/sass/_plugin-snackbarjs.scss @@ -7,7 +7,7 @@ color: $darkbg-text; font-size: 14px; border-radius: 2px; - @extend .shadow-z-1; + .shadow-z-1; // Animation height: 0; diff --git a/sass/_popups.scss b/sass/_popups.scss index 9d4f8ee1..508e493d 100644 --- a/sass/_popups.scss +++ b/sass/_popups.scss @@ -1,25 +1,18 @@ .popover, .tooltip-inner { - background: #323232; - color: #FFF; - border-radius: 2px; - + color: $popover-color; + line-height: 1em; + background: $popover-background; + border: none; + border-radius: $material-border-radius; + @include shadow-z-1(); } .tooltip, .tooltip.in { - opacity: 1; + 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; - } + .arrow, .tooltip-arrow { + display: none; + } } diff --git a/sass/_progress.scss b/sass/_progress.scss index ff089c0b..4984c7dc 100644 --- a/sass/_progress.scss +++ b/sass/_progress.scss @@ -5,85 +5,6 @@ background: #c8c8c8; .progress-bar { box-shadow: none; + @include variations(unquote(""), background-color, $primary); } - - // Alert buttons - // -------------------------------------------------- - - .progress-bar-default { - @include progress-bar-variant($primary); - } - .progress-bar-primary { - @include progress-bar-variant($primary); - } - // Success appears as green - .progress-bar-success { - @include progress-bar-variant($success); - } - // Info appears as blue-green - .progress-bar-info { - @include progress-bar-variant($info); - } - // Warning appears as orange - .progress-bar-warning { - @include progress-bar-variant($warning); - } - // Danger and error appear as red - .progress-bar-danger { - @include progress-bar-variant($danger); - } - - // Material shades - .progress-bar-material-red { - @include progress-bar-variant($red) - } - .progress-bar-material-pink { - @include progress-bar-variant($pink); - } - .progress-bar-material-purple { - @include progress-bar-variant($purple); - } - .progress-bar-material-deeppurple { - @include progress-bar-variant($deeppurple); - } - .progress-bar-material-indigo { - @include progress-bar-variant($indigo); - } - .progress-bar-material-lightblue { - @include progress-bar-variant($lightblue); - } - .progress-bar-material-cyan { - @include progress-bar-variant($cyan); - } - .progress-bar-material-teal { - @include progress-bar-variant($teal); - } - .progress-bar-material-lightgreen { - @include progress-bar-variant($lightgreen); - } - .progress-bar-material-lime { - @include progress-bar-variant($lime); - } - .progress-bar-material-lightyellow { - @include progress-bar-variant($lightyellow); - } - .progress-bar-material-orange { - @include progress-bar-variant($orange); - } - .progress-bar-material-deeporange { - @include progress-bar-variant($deeporange); - } - .progress-bar-material-grey { - @include progress-bar-variant($grey); - } - .progress-bar-material-bluegrey { - @include progress-bar-variant($bluegrey); - } - .progress-bar-material-brown { - @include progress-bar-variant($brown); - } - .progress-bar-material-lightgrey { - @include progress-bar-variant($lightgrey); - } - } diff --git a/sass/_radios.scss b/sass/_radios.scss index c9fb1ac9..694ac5b8 100644 --- a/sass/_radios.scss +++ b/sass/_radios.scss @@ -1,95 +1,100 @@ .form-horizontal .radio { - margin-bottom: 10px; + 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; - } - + label { + cursor: pointer; + padding-left: 45px; + position: relative; + span { + display: block; + position: absolute; + left: 10px; + top: 2px; + transition-duration: 0.2s; } - //.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; + .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: scale3d(0, 0, 0); + } + .check:after { + display: block; + position: absolute; + content: ""; + background-color: $lightbg-text; + left: -18px; + top: -18px; + height: 50px; + width: 50px; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + transform: scale3d(1.5, 1.5, 1); + } + input[type=radio]:not(:checked) ~ .check:after { + animation: rippleOff 500ms; + } + input[type=radio]:checked ~ .check:after { + animation: rippleOn 500ms; } - input[type=radio] { display: none; } - input[type=radio]:checked ~ .check { - transform: scale(0.55); - } - input[type=radio][disabled] ~ .circle { - border-color: $lightbg-text; - } - input[type=radio][disabled] ~ .check { - background-color: $lightbg-text; - } + } + @include variations(unquote(" input[type=radio]:checked ~ .check"), background-color, $radio-default); + @include variations(unquote(" 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] { + opacity: 0; + height: 0; + width: 0; + overflow: hidden; + } + input[type=radio]:checked ~ .check { + transform: scale3d(0.55, 0.55, 1); + } + input[type=radio][disabled] ~ .circle { + border-color: $lightbg-text; + } + input[type=radio][disabled] ~ .check { + background-color: $lightbg-text; + } } @keyframes rippleOn { - 0% { - opacity: 0; - } - 50% { - opacity: 0.2; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @keyframes rippleOff { - 0% { - opacity: 0; - } - 50% { - opacity: 0.2; - } - 100% { - opacity: 0; - } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } diff --git a/sass/_shadows.scss b/sass/_shadows.scss index c3770817..64788473 100644 --- a/sass/_shadows.scss +++ b/sass/_shadows.scss @@ -1,28 +1,35 @@ .shadow-z-1 { - box-shadow: 0 1px 3px rgba(0,0,0, .12), - 0 1px 2px rgba(0,0,0, .24) ; + box-shadow: + 0 1px 6px 0 rgba(0, 0, 0, 0.12), + 0 1px 6px 0 rgba(0, 0, 0, 0.12); +} + +.shadow-z-1-hover { + box-shadow: + 0 5px 11px 0 rgba(0, 0, 0, 0.18), + 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .shadow-z-2 { - box-shadow: 0 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) ; + box-shadow: + 0 8px 17px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .shadow-z-3 { - box-shadow: 0 10px 20px rgba(0,0,0, .19), - 0 6px 6px rgba(0,0,0, .23) ; + box-shadow: + 0 12px 15px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); } .shadow-z-4 { - box-shadow: 0 14px 28px rgba(0,0,0, .25), - 0 10px 10px rgba(0,0,0, .22) ; + box-shadow: + 0 16px 28px 0 rgba(0, 0, 0, 0.22), + 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .shadow-z-5 { - box-shadow: 0 19px 38px rgba(0,0,0, .30), - 0 15px 12px rgba(0,0,0, .22) ; + box-shadow: + 0 27px 24px 0 rgba(0, 0, 0, 0.2), + 0 40px 77px 0 rgba(0, 0, 0, 0.22); } diff --git a/sass/_tabs.scss b/sass/_tabs.scss index 21461680..9fca5f45 100644 --- a/sass/_tabs.scss +++ b/sass/_tabs.scss @@ -1,17 +1,17 @@ .nav-tabs { - background: $navbar-default-bg; + background: $primary; > li { > a { color: #FFFFFF; border: 0; margin: 0; &:hover { - background: transparent; + background-color: transparent; border: 0; } } - &.active > a, &.active > a:hover, &.open > a, &.open > a:hover { - background: transparent !important; + & > a, & > a:hover, & > a:focus { + background-color: transparent !important; border: 0 !important; color: #FFFFFF !important; font-weight: 500; diff --git a/sass/_togglebutton.scss b/sass/_togglebutton.scss new file mode 100644 index 00000000..e9d1ac56 --- /dev/null +++ b/sass/_togglebutton.scss @@ -0,0 +1,67 @@ +.togglebutton { + vertical-align: middle; + &, label, input, .toggle { + user-select: none; + } + label { + font-weight: 400; + cursor: pointer; + // Hide original checkbox + input[type=checkbox] { + opacity: 0; + width: 0; + height:0; + } + // Switch bg off and disabled + .toggle, + input[type=checkbox][disabled] + .toggle { + content: ""; + display: inline-block; + width: 30px; + height: 15px; + background-color: rgba(80, 80, 80, 0.7); + border-radius: 15px; + margin-right: 10px; + transition: background 0.3s ease; + vertical-align: middle; + } + // Handle off + .toggle:after { + content: ""; + display: inline-block; + width: 20px; + height: 20px; + background-color: #F1F1F1; + border-radius: 20px; + position: relative; + box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4); + left: -5px; + top: -2px; + transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; + } + // Handle disabled + input[type=checkbox][disabled] + .toggle:after, + input[type=checkbox][disabled]:checked + .toggle:after{ + background-color: #BDBDBD; + } + // Ripple off and disabled + input[type=checkbox] + .toggle:active:after, + input[type=checkbox][disabled] + .toggle:active:after { + box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); + } + input[type=checkbox]:checked + .toggle:after { + left: 15px; + } + } + + // Switch bg on + .generic-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, { + background-color: rgba($material-color, (50/100)); + }); + // Handle on + @include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary); + // Ripple on + .generic-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary, { + box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($material-color, (10/100)); + }); +} diff --git a/sass/_variables.scss b/sass/_variables.scss index c2f05abe..b893f2a8 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -1,100 +1,104 @@ +// Material Global vars +$zero: 0 !default; + // material icons path $material-font-path: "../fonts" !default; -// Material colors palette -$red: #F44336 !default; -$pink: #E91E63 !default; -$purple: #9C27B0 !default; -$deeppurple: #673AB7 !default; -$indigo: #3F51B5 !default; -$lightblue: #03A9F4 !default; -$cyan: #00BCD4 !default; -$teal: #009688 !default; -$lightgreen: #8BC34A !default; -$lime: #CDDC39 !default; -$lightyellow: #FFEB3B !default; -$orange: #FF9800 !default; -$deeporange: #FF5722 !default; -$grey: #9E9E9E !default; -$bluegrey: #607D8B !default; -$brown: #795548 !default; -$lightgrey: #ECECEC !default; - // Bootstrap shades -$primary: #4285F4 !default; -$success: #0F9D58 !default; -$info: $lightblue !default; -$warning: $deeporange !default; +$primary: $teal !default; +$success: $green !default; +$info: $light-blue !default; +$warning: $deep-orange !default; $danger: $red !default; +$brand-primary: $primary !default; +$brand-success: $success !default; +$brand-danger: $danger !default; +$brand-warning: $warning !default; +$brand-info: $info !default; + // Typography elements for Material -$darkbg-text: rgba(255,255,255,0.84); -$lightbg-text: rgba(0,0,0,0.84); -$icon-color: rgba(0,0,0,0.5); +$darkbg-text: rgba(255,255,255,0.84) !default; +$lightbg-text: rgba(0,0,0,0.84) !default; +$icon-color: rgba(0,0,0,0.5) !default; // Bootstrap variables -$btn-default: #FFF; -$btn-default-text: $lightbg-text; +$body-bg: #EEEEEE !default; -$btn-primary: $primary; -$btn-primary-text: $darkbg-text; +$btn-default: transparent !default; +$btn-default-text: $lightbg-text !default; -$btn-success: $success; -$btn-success-text: $darkbg-text; +$btn-primary: $primary !default; +$btn-primary-text: $darkbg-text !default; -$btn-info: $info; -$btn-info-text: $darkbg-text; +$btn-success: $success !default; +$btn-success-text: $darkbg-text !default; -$btn-warning: $warning; -$btn-warning-text: $darkbg-text; +$btn-info: $info !default; +$btn-info-text: $darkbg-text !default; -$btn-danger: $danger; -$btn-danger-text: $darkbg-text; +$btn-warning: $warning !default; +$btn-warning-text: $darkbg-text !default; -$input-unchecked: rgba(137, 137, 137, 0.3); -$input-checked: rgba(15, 157, 88, 0.3); +$btn-danger: $danger !default; +$btn-danger-text: $darkbg-text !default; -$radio-default: $lightbg-text; -$radio-primary: $primary; -$radio-success: $success; -$radio-info: $info; -$radio-warning: $warning; -$radio-danger: $danger; +$input-unchecked: rgba(137, 137, 137, 0.3) !default; +$input-checked: rgba(15, 157, 88, 0.3) !default; -$input-danger: $danger; -$input-default: $primary; -$input-warning: $warning; -$input-success: $success; -$input-info: $info; +$radio-default: $lightbg-text !default; +$radio-primary: $primary !default; +$radio-success: $success !default; +$radio-info: $info !default; +$radio-warning: $warning !default; +$radio-danger: $danger !default; -$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; +$input-danger: $danger !default; +$input-default: $primary !default; +$input-warning: $warning !default; +$input-success: $success !default; +$input-info: $info !default; -$alert-success: $success; -$alert-info: $info; -$alert-warning: $warning; -$alert-danger: $danger; +$alert-success: $success !default; +$alert-info: $info !default; +$alert-warning: $warning !default; +$alert-danger: $danger !default; -$progress-success: $success; -$progress-info: $info; -$progress-warning: $warning; -$progress-danger: $danger; +$progress-success: $success !default; +$progress-info: $info !default; +$progress-warning: $warning !default; +$progress-danger: $danger !default; +$font-size-base: 14px !default; +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px + +// Global Material variables +$material-border-radius: 2px !default; +$input-underline-color: #D2D2D2 !default; + +// Card +$card-body-text: $lightbg-text !default; +$card-body-background: #fff !default; +$card-image-headline: #fff !default; + +$text-disabled: #a8a8a8 !default; +$background-disabled: #eaeaea !default; + +// Checkboxes +$checkbox-size: 20px !default; +$checkbox-animation-ripple: 500ms !default; +$checkbox-animation-check: 0.3s !default; + +// Popovers and Popups +$popover-background: rgba(101, 101, 101, 0.9) !default; +$popover-color: #ececec !default; + +// Inputs +$input-placeholder-color: #BDBDBD !default; +$floating-label-size-ratio: 70 / 100 !default; + +// Dropdown Menu +$dropdown-radius: 2px !default; +$dropdown-font-size: 16px !default; diff --git a/sass/_welljumbo.scss b/sass/_welljumbo.scss index f7000c1c..dffa7965 100644 --- a/sass/_welljumbo.scss +++ b/sass/_welljumbo.scss @@ -1,66 +1,22 @@ -// 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); + .well.well-sm { + padding: 10px; + } + .well.well-lg { + padding: 26px; + } + .well, .jumbotron { + + background-color: #fff; + padding: 19px; + margin-bottom: 20px; + @include shadow-z-2(); + border-radius: 2px; + border: 0; + p { + font-weight: 300; } + @include variations(unquote(""), background-color, #FFF); + } } diff --git a/sass/material-fullpalette.scss b/sass/material-fullpalette.scss new file mode 100644 index 00000000..6193ff3e --- /dev/null +++ b/sass/material-fullpalette.scss @@ -0,0 +1,2 @@ +@import 'material'; +@import '_mixins-fullpalette'; diff --git a/sass/material-wfont.scss b/sass/material-wfont.scss deleted file mode 100644 index 15c88e76..00000000 --- a/sass/material-wfont.scss +++ /dev/null @@ -1,8 +0,0 @@ -@font-face { - font-family: 'RobotoDraft'; - font-style: normal; - font-weight: 100; - src: local('RobotoDraft Thin'), local('RobotoDraft-Thin'), url(https://fonts.gstatic.com/s/robotodraft/v2/hope9NW9iJ5hh8P5PM_EA2zZpt1Zv2lgqhgSPQ2HnUo.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; -} -@import "material.scss"; diff --git a/sass/material.scss b/sass/material.scss index 2561401c..9e17f5cf 100644 --- a/sass/material.scss +++ b/sass/material.scss @@ -1,113 +1,142 @@ -// Material Theme 0.0.1 -// ----------------------------------------------------- - -@import "_variables.scss"; -@import "_mixins.scss"; -@import "_shadows.scss"; -@import "_icons-material-design.scss"; +@import '_variables'; +@import '_colors'; +@import '_mixins'; +@import '_icons-material-design'; body { - background-color: #EEEEEE; - &.inverse { - background: #333333; - &, .form-control { - color: $darkbg-text; - } + background-color: $body-bg; + &.inverse { + background: #333333; + &, .form-control { + color: $darkbg-text; } + .modal, + .panel-default, + .card { + &, + .form-control { + background-color: initial; + color: initial; + } + } + + } } -body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; + +body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { + font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 300; +} + +h5, h6{ + font-weight: 400; +} + +a, a:hover, a:focus { + color: $primary; } // Well and Jumbotrons -@import "_welljumbo.scss"; +@import '_welljumbo'; // Buttons -@import "_buttons.scss"; +@import '_buttons'; // Checkboxes -@import "_checkboxes.scss"; +@import '_checkboxes'; + +// Toggle buttons +@import '_togglebutton'; // Radios -@import "_radios.scss"; +@import '_radios'; // Text inputs -@import "_inputs.scss"; +@import '_inputs'; 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; - } - } + border-bottom: 0; } // Lists -@import "_lists.scss"; +@import '_lists'; // Navbar -@import "_navbar.scss"; +@import '_navbar'; .dropdown-menu { - border: 0; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); - .divider { - background-color: rgba(229, 229, 229, 0.12); - } - li { - overflow: hidden; - position: relative; - a:hover { - background: rgba(0,0,0,0.08); - } + border: 0; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); + .divider { + background-color: rgba(229, 229, 229, 0.12); + } + li { + overflow: hidden; + position: relative; + a:hover { + background-color: transparent; + color: $primary; } + } + @include variations(unquote(" li a:hover"), color, $primary); } // Alerts -@import "_alerts.scss"; +@import '_alerts'; // Progress bar -@import "_progress.scss"; - -// Panels -@import "_cards.scss"; +@import '_progress'; // Typography .text-warning { - color: $btn-warning; + color: $btn-warning; } .text-primary { - color: $btn-primary; + color: $btn-primary; } .text-danger { - color: $btn-danger; + color: $btn-danger; } .text-success { - color: $btn-success; + color: $btn-success; } .text-info { - color: $btn-info; + color: $btn-info; } -@import "_tabs.scss"; +@import '_tabs'; -@import "_popups.scss"; +@import '_popups'; -@import "_icons.scss"; +@import '_icons'; + +@import '_cards'; + +@import '_dialogs'; + +@import '_labels'; + +@import '_panels'; + +@import '_dividers'; + +// Prevent highlight on mobile +* { + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + -webkit-tap-highlight-color: transparent; + &:focus { + outline: 0; + } +} // External plugins -@import "_plugin-snackbarjs.scss"; -@import "_plugin-nouislider.scss"; +@import '_plugin-snackbarjs'; +@import '_plugin-nouislider'; +@import '_plugin-selectize'; +@import '_plugin-dropdownjs'; + +// Material shadows +// Place them on bottom of stylesheet to increase the importance of it and override other same-specificity selectors +@import '_shadows'; diff --git a/sass/ripples.scss b/sass/ripples.scss index 7c9c7739..874cdc57 100644 --- a/sass/ripples.scss +++ b/sass/ripples.scss @@ -9,7 +9,8 @@ width: 100%; height: 100%; overflow: hidden; - border-radius: 2px; + border-radius: inherit; + pointer-events: none; } .ripple { position: absolute; @@ -26,7 +27,7 @@ } .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; + opacity: 0.1; } .ripple.ripple-out { transition: opacity 0.1s linear 0s !important; diff --git a/sass/roboto.scss b/sass/roboto.scss new file mode 100644 index 00000000..d4f93ef7 --- /dev/null +++ b/sass/roboto.scss @@ -0,0 +1,50 @@ +@import '_variables'; +@import '_colors'; + +@font-face { + font-family: 'RobotoDraft'; + font-style: normal; + font-weight: 400; + //src: local('RobotoDraft'), local('RobotoDraft-Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/0xES5Sl_v6oyT7dAKuoni7rIa-7acMAeDBVuclsi6Gc.woff) format('woff'); + src: local('RobotoDraft'), + local('RobotoDraft-Regular'), + local('Roboto-Regular'), + url('#{$material-font-path}/RobotoDraftRegular.woff2') format('woff2'), + url('#{$material-font-path}/RobotoDraftRegular.woff') format('woff'); +} + +@font-face { + font-family: 'RobotoDraft'; + font-style: normal; + font-weight: 500; + //src: local('RobotoDraft Medium'), local('RobotoDraft-Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwXJuJo8UJJfpGKt7pXjBv4s.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwaTA90I55Xt7owhZwpPnMsc.woff) format('woff'); + src: local('RobotoDraft Medium'), + local('RobotoDraft-Medium'), + local('Roboto-Medium'), + url('#{$material-font-path}/RobotoDraftMedium.woff2') format('woff2'), + url('#{$material-font-path}/RobotoDraftMedium.woff') format('woff'); +} + +@font-face { + font-family: 'RobotoDraft'; + font-style: normal; + font-weight: 700; + //src: local('RobotoDraft Bold'), local('RobotoDraft-Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-Vwf79_ZuUxCigM2DespTnFaw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/u0_CMoUf3y3-4Ss4ci-VwRbnBKKEOwRKgsHDreGcocg.woff) format('woff'); + src: local('RobotoDraft Bold'), + local('RobotoDraft-Bold'), + local('Roboto-Bold'), + url('#{$material-font-path}/RobotoDraftBold.woff2') format('woff2'), + url('#{$material-font-path}/RobotoDraftBold.woff') format('woff'); +} + +@font-face { + font-family: 'RobotoDraft'; + font-style: italic; + font-weight: 400; + //src: local('RobotoDraft Italic'), local('RobotoDraft-Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfoo3ZslTYfJv0R05CazkwN8.woff) format('woff'); + src: local('RobotoDraft Italic'), + local('RobotoDraft-Italic'), + local('Roboto-Italic'), + url('#{$material-font-path}/RobotoDraftItalic.woff2') format('woff2'), + url('#{$material-font-path}/RobotoDraftItalic.woff') format('woff'); +}