diff options
Diffstat (limited to 'templates/assets/bootstrap-material-design/scss')
64 files changed, 4153 insertions, 0 deletions
diff --git a/templates/assets/bootstrap-material-design/scss/_alerts.scss b/templates/assets/bootstrap-material-design/scss/_alerts.scss new file mode 100644 index 0000000..0073242 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_alerts.scss @@ -0,0 +1,4 @@ +.alert { + border: 0; + border-radius: 0; +} diff --git a/templates/assets/bootstrap-material-design/scss/_buttons.scss b/templates/assets/bootstrap-material-design/scss/_buttons.scss new file mode 100644 index 0000000..ee3defc --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_buttons.scss @@ -0,0 +1,233 @@ +// specification: https://www.google.com/design/spec/components/buttons.html + +// bmd default buttons are flat by default +.btn { + position: relative; + margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up + font-size: $bmd-btn-font-size; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0; + cursor: pointer; + background-color: transparent; + border: 0; + outline: 0; + transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default; + will-change: box-shadow, transform; + + @include undo-bs-tab-focus(); + + //-- + // Colors + + // flat removes bg, add color variations to text + @include bmd-flat-button-color(); + + // fab and raised + // - colored, add their text and bg + // - hover color contrasted + // - shared shadow state on hover/active/focus + &.bmd-btn-fab, + &.btn-raised, + .btn-group-raised & { + @include bmd-raised-button-color(); + + // enlarged shadow on hover, focus + @include hover-focus() { + //border: 1px solid $blue; + z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button + @include box-shadow($bmd-shadow-4dp); + } + + // :active - momentary press: big shadow, release and it is gone + // .active - persistent big shadow + &.active, + &:active { + z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button + @include box-shadow($bmd-shadow-focus); + //border: 1px solid $green; + } + } + + //--- + // btn-raised + &.btn-raised, + .btn-group-raised & { + + // baseline shadow + @include box-shadow($bmd-shadow-2dp); + + // reverse any of the above for links + &.btn-link { + box-shadow: none; + @include bmd-hover-focus-active() { + box-shadow: none; + } + } + + @include bmd-disabled() { + box-shadow: none; + } + } + + //--- + // btn-outline + @include bmd-outline-button-color(); + + // https://www.google.com/design/spec/components/buttons-floating-action-button.html + &.bmd-btn-fab, + &.bmd-btn-icon { + overflow: hidden; + font-size: $bmd-btn-fab-font-size; + line-height: normal; + + .btn-group-lg &, + .btn-group-sm &, + & { + padding: 0; // need specificity + border-radius: 50%; + } + + .material-icons { + position: absolute; + top: 50%; + left: 50%; + width: $bmd-btn-fab-font-size; + line-height: $bmd-btn-fab-font-size; + transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2)); + } + } + + &.bmd-btn-fab { + // see above for color variations + width: $bmd-btn-fab-size; + min-width: $bmd-btn-fab-size; + height: $bmd-btn-fab-size; + //margin: auto; + //margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. + box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light; + + .ripple-container { + border-radius: 50%; + } + + &.bmd-btn-fab-sm, + .btn-group-sm & { + width: $bmd-btn-fab-size-sm; + min-width: $bmd-btn-fab-size-sm; + height: $bmd-btn-fab-size-sm; + //margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have. + + //.material-icons { + // top: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2; + // left: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2; + //} + } + } + + // Icon buttons + &.bmd-btn-icon { + width: $bmd-btn-icon-size; + min-width: $bmd-btn-icon-size; + height: $bmd-btn-icon-size; + margin: 0; + color: inherit; + + &.bmd-btn-icon-sm, + .btn-group-sm & { + width: $bmd-btn-icon-size-sm; + min-width: $bmd-btn-icon-size-sm; + height: $bmd-btn-icon-size-sm; + font-size: $bmd-btn-icon-font-size-sm; + + .material-icons { + //$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2; + //top: $position; + //left: $position; + width: $bmd-btn-icon-font-size-sm; + font-size: $bmd-btn-icon-font-size-sm; + line-height: 1; + transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2)); + } + } + } + + // Align icons inside buttons with text + .material-icons { + position: relative; + top: .25em; + margin-top: -1em; + margin-bottom: -1em; + font-size: 1.5em; + } + + // Size variations + &.btn-lg, + .btn-group-lg & { + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg); + } + &.btn-sm, + .btn-group-sm & { + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm); + font-size: $bmd-btn-font-size-sm; + } +} + +// Disabled buttons and button groups +.btn, +.input-group-btn .btn, +.btn-group, +.btn-group-vertical { + // have to ratchet up the specificity to kill drop shadows on disabled raised buttons + @include bmd-disabled() { + color: $bmd-btn-disabled; + .bg-inverse & { + color: $bmd-inverse-btn-disabled; + } + + // flat buttons shouldn't lose transparency on disabled hover/focus + &, + &:hover, + &:focus { + background: transparent; + } + } +} + +// btn-group variations +.btn-group, +.btn-group-vertical { + + position: relative; + margin: 10px 1px; + + // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons + //&.open { + // .dropdown-toggle { + // } + // + // > .dropdown-toggle.btn { + // @include bmd-raised-button-color-bg(); + // } + //} + + .dropdown-menu { + border-radius: 0 0 $border-radius $border-radius; + } + + &.btn-group-raised { + @include box-shadow($bmd-shadow-2dp); + } + + .btn + .btn, + .btn, + .btn:active, + .btn-group { + margin: 0; + } + + // remove margin from nested btn-group(s) to properly align them with the outer buttons + > .btn-group { + margin: 0; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_cards.scss b/templates/assets/bootstrap-material-design/scss/_cards.scss new file mode 100644 index 0000000..b68e2cb --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_cards.scss @@ -0,0 +1,58 @@ +//https://www.google.com/design/spec/components/cards.html#cards-content-blocks +// Card resting elevation: 2dp +.card { + border: 0; + + // Cards have a default elevation of 2dp. + @include box-shadow($bmd-shadow-2dp); + @extend %std-font; + + // spec: see "Avatar, Title, and Subtitle area" + // Height: 72dp + // Padding: 16dp + // Top and bottom padding: 16dp + .card-header { + padding: 1rem; + } + + .card-block { + padding: 1.5rem 1rem 1rem; + //@extend %std-font; + } + + // Primary title/text + // - Title: 24sp or 14sp + // - Subtitle: 14sp + + // non-h* card-titles will be 14sp + //&.card-title { + // @extend %std-font; + //} + + // any h* will signal the larger size should render as 24sp + @include headings() { + &.card-title { + font-size: 1.5rem; + font-weight: 300; + } + } + + .bmd-card-actions, // needed? if you have actions in the middle of the card (see spec), it may be necessary + .card-footer { // assume footer is the set of actions? + padding: .5rem; + } + + &.bmd-card-raised { + // Card raised elevation: 8dp + @include box-shadow($bmd-shadow-8dp); + } + + @include media-breakpoint-up(lg) { + // On desktop, cards can have a resting elevation of 0dp and gain an elevation of 8dp on hover. + &.bmd-card-flat { + box-shadow: none; + } + } +} + + diff --git a/templates/assets/bootstrap-material-design/scss/_checkboxes.scss b/templates/assets/bootstrap-material-design/scss/_checkboxes.scss new file mode 100644 index 0000000..cb0099a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_checkboxes.scss @@ -0,0 +1,256 @@ +// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox +.checkbox label, +label.checkbox-inline { + padding-left: $bmd-checkbox-size + $bmd-checkbox-label-padding; // absolutely positioned so add the radio size + cursor: pointer; + + .checkbox-decorator { + position: absolute; + top: 0.125rem; + left: 0; + vertical-align: middle; + + &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome) + position: absolute; + left: 0; + z-index: 1; + display: block; + width: $bmd-checkbox-size; + height: $bmd-checkbox-size; + margin: 0; + content: ""; + background-color: rgba($black, .84); + border-radius: 100%; + opacity: 0; + transform: scale3d(2.3, 2.3, 1); + } + + .check { + position: relative; + z-index: 1; + display: inline-block; + width: $bmd-checkbox-size; + height: $bmd-checkbox-size; + overflow: hidden; + border: $bmd-checkbox-border-size solid $bmd-checkbox-border-color; + border-radius: $border-radius; + + // checkbox outline + &::before { + position: absolute; + display: block; + width: 0; + height: 0; + margin-top: -4px; + margin-left: 6px; + content: ""; + 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; + transform: rotate(45deg); + animation: checkbox-off; + + .is-focused & { + // Prevent checkbox animation and ripple effect on page load + animation: checkbox-off $bmd-checkbox-animation-check forwards; + } + } + } + } + + input[type=checkbox] { + + // Hide native checkbox + position: absolute; + left: 0; + z-index: -1; + width: 0; + height: 0; + margin: 0; + overflow: hidden; + pointer-events: none; + opacity: 0; + + &:focus + .checkbox-decorator .check::after { + opacity: 0.2; + } + + &:checked { + + // FIXME: once working - combine further to reduce code + + .checkbox-decorator .check { + color: $bmd-checkbox-checked-color; + border-color: $bmd-checkbox-checked-color; + } + + + .checkbox-decorator .check::before { + color: $bmd-checkbox-checked-color; + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 032px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + animation: checkbox-on $bmd-checkbox-animation-check forwards; + } + + + .checkbox-decorator::before { + animation: rippleOn; + .is-focused & { + // Prevent checkbox animation and ripple effect on page load + animation: rippleOn $bmd-checkbox-animation-ripple; + } + } + + + .checkbox-decorator .check::after { + //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed + animation: rippleOn $bmd-checkbox-animation-ripple forwards; // Ripple effect on check + } + } + + &:not(:checked) { + + .checkbox-decorator::before { + animation: rippleOff; + .is-focused & { + // Prevent checkbox animation and ripple effect on page load + animation: rippleOff $bmd-checkbox-animation-ripple; + } + } + + + .checkbox-decorator .check::after { + animation: rippleOff $bmd-checkbox-animation-ripple forwards; // Ripple effect on uncheck + } + } + + &[disabled], + fieldset[disabled] & { + + .checkbox-decorator .check::after, + .check::after { + background-color: $gray-dark; + transform: rotate(-45deg); + } + + .checkbox-decorator .check, + .check { + border-color: $bmd-checkbox-border-color-disabled; + } + } + } +} + +@keyframes checkbox-on { + 0% { + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px; + } + 50% { + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0 32px 0 20px, + -5px 5px 0 10px, + 20px 2px 0 11px; + } + 100% { + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0 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 0 0 20px, + 0 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 0 0 20px, + 0 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px, + 0 0 0 0 inset; + } + 50% { + width: 0; + height: 0; + margin-top: -4px; + margin-left: 6px; + box-shadow: 0 0 0 10px, + 10px -10px 0 10px, + 32px 0 0 20px, + 0 32px 0 20px, + -5px 5px 0 10px, + 15px 2px 0 11px, + 0 0 0 0 inset; + transform: rotate(45deg); + } + 51% { + width: 20px; + height: 20px; + margin-top: -2px; + margin-left: -2px; + 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 10px inset; + transform: rotate(0deg); + } + 100% { + width: 20px; + height: 20px; + margin-top: -2px; + margin-left: -2px; + 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; + transform: rotate(0deg); + } +} + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} + +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_core-bootstrap.scss b/templates/assets/bootstrap-material-design/scss/_core-bootstrap.scss new file mode 100644 index 0000000..95f6238 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_core-bootstrap.scss @@ -0,0 +1,68 @@ +// FIXME: only necessary because there isn't an underscored file - see https://github.com/twbs/bootstrap/issues/18350 +//@import "../bower_components/bootstrap/scss/ +//@import "../../bootstrap/scss/ + +// Core variables and mixins +@import "bootstrap/scss/custom"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/mixins"; + +// #853 start - https://github.com/twbs/bootstrap/pull/18976/files +// hack +@mixin pull-left { + float: left !important; + @if $enable-flex { + margin-right: auto; + } +} +@mixin pull-right { + float: right !important; + @if $enable-flex { + margin-left: auto; + } +} +// #853 end - https://github.com/twbs/bootstrap/pull/18976/files + + +// Reset and dependencies +@import "bootstrap/scss/normalize"; +@import "bootstrap/scss/print"; + +// Core CSS +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/code"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/buttons"; + +// Components +@import "bootstrap/scss/animation"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/input-group"; +@import "bootstrap/scss/custom-forms"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/tags"; +@import "bootstrap/scss/jumbotron"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/media"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/responsive-embed"; +@import "bootstrap/scss/close"; + +// Components w/ JavaScript +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/tooltip"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/carousel"; + +// Utility classes +@import "bootstrap/scss/utilities"; diff --git a/templates/assets/bootstrap-material-design/scss/_core.scss b/templates/assets/bootstrap-material-design/scss/_core.scss new file mode 100644 index 0000000..57ca53f --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_core.scss @@ -0,0 +1,33 @@ +// This is the main scss file, provided as an underscored file so that variable contexts remain in-tact when importing from the source. +@import "variables"; +@import "mixins"; +@import "core-bootstrap"; // FIXME: V4 SCSS inclusion via an underscored file https://github.com/twbs/bootstrap/issues/18350 + +@import "reboot"; + +@import "layout"; +@import "buttons"; +@import "checkboxes"; +@import "custom-forms"; +@import "switches"; +@import "radios"; +@import "forms"; +@import "input-group"; +@import "list-group"; +@import "tables"; +@import "nav"; +@import "navbar"; +@import "alerts"; +@import "progress"; +@import "pagination"; +@import "type"; +@import "popover"; +@import "cards"; +@import "modal"; +@import "dropdown"; +@import "drawer"; +@import "themes"; + +@import "ripples"; + +@import "extensions"; diff --git a/templates/assets/bootstrap-material-design/scss/_custom-forms.scss b/templates/assets/bootstrap-material-design/scss/_custom-forms.scss new file mode 100644 index 0000000..3cf5ddd --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_custom-forms.scss @@ -0,0 +1,10 @@ +.custom-file-control { + @extend .form-control; + @include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color); + + &::before { + @extend .btn; + position: absolute; + height: calc(100% - 1px); + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_drawer.scss b/templates/assets/bootstrap-material-design/scss/_drawer.scss new file mode 100644 index 0000000..34d115e --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_drawer.scss @@ -0,0 +1,122 @@ +// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822 + +// Drawer. +.bmd-layout-drawer { + position: absolute; + z-index: 5; // over a header and content + box-sizing: border-box; + display: flex; + + flex-direction: column; + flex-wrap: nowrap; + + max-height: 100%; + overflow: visible; + overflow-y: auto; + font-size: .875rem; + //color: $bmd-layout-drawer-text-color; + //background: $bmd-layout-drawer-bg-color; + + // Transform offscreen. + transition: transform; + will-change: transform; + transform-style: preserve-3d; + @include box-shadow($bmd-shadow-2dp); + @include material-animation-default(); + + > * { + flex-shrink: 0; + } + + // Placement of common components within the drawer + // You might say this is opinionated - feedback welcome. + > header { + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 1rem; + + .navbar-brand { + padding-left: 1.5rem; + font-size: 1.25rem; + } + } + + > .list-group { + padding-top: 1rem; + + .list-group-item { + padding-right: 2.5rem; + padding-left: 2.5rem; + font-size: .8125rem; + font-weight: 500; + } + } +} + +//---------------- +// Sizing and positioning below here + +// for left or right drawers, setup widths, heights and positions +@include bmd-drawer-x-out($bmd-drawer-x-size); + +// for top or bottom drawers, setup widths, heights and positions +@include bmd-drawer-y-out($bmd-drawer-y-size); + +// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well +// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px). +// +// +// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg +// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-in` +// without a size (for triggered openings). Since the xs size is 0, instead of using `bmd-drawer-in-xs` +// (which is mostly meaningless), we create `bmd-drawer-in` meaning always open. +// +// NOTE: bmd-drawer-in-* uses media-breakpoint-up() +// +// bmd-drawer-out +// A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some +// strange reason) both bmd-drawer-out and bmd-drawer-in are present, it appears that the closed option wins. +// +// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg +// We iterate over the standard grid breakpoints, but we also need styles for the simpler `bmd-drawer-overlay`. +// Since the xs size is 0, instead of using `bmd-drawer-overlay-xs`, we create `bmd-drawer-overlay` meaning always overlay. +// +// NOTE: bmd-drawer-overlay-* uses media-breakpoint-down() - this is because we usually want a responsive overlay to be used in small screen scenarios. +// + +// +// Drawer open positioning, and style options (push is default, overlay is optional) +:not(.bmd-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed + @each $breakpoint in map-keys($grid-breakpoints) { + + @include bmd-drawer-x-in-up($bmd-drawer-x-size, $breakpoint); + @include bmd-drawer-y-in-up($bmd-drawer-y-size, $breakpoint); + + @include bmd-drawer-x-overlay-down($breakpoint); + @include bmd-drawer-y-overlay-down($breakpoint); + } +} + +////---- +//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger +//.kitchen-sink-drawer { +// $custom-size: 500px; +// @include bmd-drawer-x-out($custom-size); +// &:not(.bmd-drawer-out) { +// @each $breakpoint in map-keys($grid-breakpoints) { +// @include bmd-drawer-x-in-up($custom-size, $breakpoint); +// } +// } +//} +// +//// +////---- +//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger +//.kitchen-sink-drawer-static { +// $custom-size: 500px; +// @include bmd-drawer-x-out($custom-size); // closed by default +// @include bmd-drawer-x-in($custom-size); // triggered with bmd-drawer-in +// @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary +//} + diff --git a/templates/assets/bootstrap-material-design/scss/_dropdown.scss b/templates/assets/bootstrap-material-design/scss/_dropdown.scss new file mode 100644 index 0000000..e5dd23e --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_dropdown.scss @@ -0,0 +1,126 @@ +// Menus https://www.google.com/design/spec/components/menus.html#menus-specs +// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons + +@mixin menu-bottom-left { + top: 100%; + left: 0; + transform-origin: 0 0; +} + +@mixin menu-bottom-right { + right: 0; + left: auto; + transform-origin: 100% 0; +} + +.dropdown-menu { + display: block; // utilize transition transform instead of flipping display + padding: .25rem 0; + border: 0; + opacity: 0; + transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, opacity $bmd-menu-fade-duration $bmd-animation-curve-default; + transform: scale(0); + transform-origin: 0 0; + will-change: transform; + + @include media-breakpoint-up(md) { + padding: .5rem 0; + } + + .open > & { + //z-index: 999; + opacity: 1; + transform: scale(1); + } + + // Default the alignment of the dropdown to originate on the bottom right of the button + @include menu-bottom-right(); + // FIXME: bootstrap alignment issue - https://github.com/twbs/bootstrap/issues/18852 + + &.dropdown-menu-left { + @include menu-bottom-left(); + } + + &.dropdown-menu-right { + @include menu-bottom-right(); + } + + //&.dropdown-menu-top-left { + // top: auto; + // bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above + // transform-origin: 0 100%; + //} + // + //&.dropdown-menu-top-right { + // top: auto; + // right: 0; + // bottom: 0; // needs to be overridden with the toggle-button height, see bmd-btn-icon above + // left: auto; + // transform-origin: 100% 100%; + //} + + // https://www.google.com/design/spec/components/menus.html#menus-specs + .dropdown-item { + // used to properly size the ripple container + position: relative; + + display: flex; + flex-flow: row wrap; + align-items: center; + + min-width: $bmd-menu-item-min-width; + max-width: $bmd-menu-item-max-width; + min-height: $bmd-menu-item-min-height; + + padding: $bmd-menu-item-padding-top $bmd-menu-item-padding-right $bmd-menu-item-padding-bottom $bmd-menu-item-padding-left; + + // FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md + overflow: hidden; + line-height: $bmd-menu-line-height; + text-overflow: ellipsis; + word-wrap: break-word; + + + // Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen. + @include media-breakpoint-up(md) { + padding-right: $bmd-menu-item-padding-right-md; + padding-left: $bmd-menu-item-padding-left-md; + } + } +} + + +// this could be in a .btn-group or .dropdown +.dropdown-toggle { + + &.bmd-btn-icon, + &.bmd-btn-fab { + // remove the dropdown icon + &::after { + display: none; + } + + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button + } + } + } + + &.bmd-btn-fab-sm { + ~ .dropdown-menu { + &.dropdown-menu-top-left, + &.dropdown-menu-top-right { + bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button + } + } + } + + &.bmd-btn-icon { + ~ .dropdown-menu { + // collapse some spacing + margin: 0; + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_extensions.scss b/templates/assets/bootstrap-material-design/scss/_extensions.scss new file mode 100644 index 0000000..ea69117 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_extensions.scss @@ -0,0 +1,3 @@ +// External plugins +@import "extensions/snackbarjs"; +@import "extensions/selectize"; diff --git a/templates/assets/bootstrap-material-design/scss/_forms.scss b/templates/assets/bootstrap-material-design/scss/_forms.scss new file mode 100644 index 0000000..2961f0b --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_forms.scss @@ -0,0 +1,221 @@ +form { + // ensure enough room at the bottom of any form to display a one-line bmd-help + margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base; + + // reverse the above for navbars (no help expected in a navbar form) + .navbar & { + margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works + + .bmd-form-group { + display: inline-block; + padding-top: 0; + } + + .btn { + margin-bottom: 0; + } + } +} + +// ----- +// Inputs +// +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +.form-control { + background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position; + background-size: $bmd-form-control-bg-size; + border: 0; + transition: background 0s ease-out; + + // The border bottom should be static in all states, the decorator will be animated over this. + &:focus, + .bmd-form-group.is-focused & { + background-size: $bmd-form-control-bg-size-active; + //border-bottom: $input-btn-border-width solid $input-border-color; + transition-duration: 0.3s; + } +} + +// Help blocks (not in v4) +// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good. +// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions? +// +.bmd-help { + position: absolute; + display: none; + font-size: .8rem; + font-weight: normal; + @extend .text-muted; + + .bmd-form-group.is-focused & { + display: block; + } + + //-------------------------------------- + // Multiple help blocks + // - absolute positioning is used above to prevent bouncing + // - when there is more than one, this will bounce but will at least show + &:nth-of-type(2) { + padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned + } + + + .bmd-help { + position: relative; + margin-bottom: 0; + } +} + +// ----- +// State coloring: default, success, info, warning, danger +// +@include bmd-selection-color(); +@include bmd-form-color($bmd-label-color, $bmd-label-color-focus, $input-border-color); + +.has-success { + @include bmd-form-color($brand-success, $brand-success, $brand-success); +} + +.has-info { + @include bmd-form-color($brand-info, $brand-info, $brand-info); +} + +.has-warning { + @include bmd-form-color($brand-warning, $brand-warning, $brand-warning); +} + +.has-danger { + @include bmd-form-color($brand-danger, $brand-danger, $brand-danger); +} + +// Reference http://www.google.com/design/spec/components/text-fields.html +// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section +//.variations(unquote(" label"), color, $bmd-input-placeholder-color); // default label color variations + +// Whereas .form-group adds structure, bmd-form-group just needs to make sure we have enough padding for our labels to work. That's the only purpose. +.bmd-form-group { + position: relative; + + // ----- + // Labels + // + // Reference http://www.google.com/design/spec/components/text-fields.html + // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section + [class^='bmd-label'], + [class*=' bmd-label'] { + position: absolute; + pointer-events: none; + transition: 0.3s ease all; + + // hint to browser for optimization + &.bmd-label-floating { + will-change: left, top, contents; // TODO: evaluate effectiveness - looking for community feedback + } + } + + // hide label-placeholders when the field is filled + &.is-filled .bmd-label-placeholder { + display: none; + } + + // Optional class to make the text field inline collapsible/expandable (collapsed by default) + // This uses the BS collapse js to make the width expand. + // `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline + // FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events + &.bmd-collapse-inline { + padding: 0; // get rid of any padding as this is a width transition + + // Expandable Holder. + .collapse { + &.in { + // This is an unfortunate hack. Animating between widths in percent (%) + // in many browsers (Chrome, Firefox) only animates the inner visual style + // of the input - the outer bounding box still 'jumps'. + // Thus assume a sensible maximum, and animate to/from that value. + max-width: 600px; + } + } + + .collapsing, + .width:not(.collapse), // collapsing is removed and momentarily only width is present + .collapse.in { + display: inline-block; + } + + .collapsing { + @include material-animation-default(); + } + } + + // default floating size/location with an bmd-form-group + @include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default"); + + // sm floating size/location + &.bmd-form-group-sm { + @include bmd-form-size-variant($font-size-sm, $bmd-label-top-margin-sm, $input-padding-y-sm, $bmd-form-line-height-sm, "bmd-form-group sm"); + } + + // lg floating size/location + &.bmd-form-group-lg { + @include bmd-form-size-variant($font-size-lg, $bmd-label-top-margin-lg, $input-padding-y-lg, $bmd-form-line-height-sm, "bmd-form-group lg"); + } +} + +// default floating size/location without a form-group (will skip form-group styles, and just render default sizing variation) - IMPORTANT for non-form-group spacing such as radio/checkbox/switch +@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height); + +select { + &, + &.form-control { + // Use vendor prefixes as `appearance` isn't part of the CSS spec. OSX doesn't obey the border-radius: 0 without this. + -moz-appearance: none; + -webkit-appearance: none; + } +} + +// Input files - hide actual input - requires specific markup in the sample. +//.bmd-form-group input[type=file] { +// opacity: 0; +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// width: 100%; +// height: 100%; +// z-index: 100; +//} + +// +// +//.form-horizontal { +// +// // Consistent vertical alignment of radios and checkboxes +// .radio, +// .checkbox, +// .radio-inline, +// .checkbox-inline { +// padding-top: 0; +// } +// +// .radio { +// margin-bottom: 10px; +// } +// +// label { +// text-align: right; +// } +// +// label { +// margin: 0; +// } +//} + +.form-inline { + @include media-breakpoint-up(sm) { + .input-group { + display: inline-flex; + align-items: center; + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_input-group.scss b/templates/assets/bootstrap-material-design/scss/_input-group.scss new file mode 100644 index 0000000..7c72cf9 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_input-group.scss @@ -0,0 +1,39 @@ +// ----------------------------------------- +// input-group and input-group-addon styles +// note: form-groups are not required +// +@mixin input-group-button-variation($vertical-padding) { + .input-group-btn { + .btn { + //margin: 0 0 $vertical-padding 0; + } + } +} + +// default margin - no form-group required +@include input-group-button-variation(input-padding-y); + +&.bmd-form-group-sm { + @include input-group-button-variation($input-padding-y-sm); +} + +&.bmd-form-group-lg { + @include input-group-button-variation($input-padding-y-lg); +} + +.input-group { // may be in or outside of form-group + + .input-group-addon { + display: flex; + justify-content: center; + align-items: center; + + background-color: transparent; + border-color: transparent; + } + + .input-group-addon + input, + input + .input-group-addon { + margin-left: .75rem; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_layout.scss b/templates/assets/bootstrap-material-design/scss/_layout.scss new file mode 100644 index 0000000..82faef0 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_layout.scss @@ -0,0 +1,80 @@ +// This is a set of flex-based layout containers necessary for components such as the drawer. +// It allows for flex based positioning such as sticky header and footer inside an bmd-layout, with a +// bmd-layout-content that scrolls. + +// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935 + +// First element +.bmd-layout-canvas { // added by js? + position: absolute; + width: 100%; + height: 100%; +} + +// Primary layout container, belongs inside a bmd-layout-canvas. +.bmd-layout-container { + position: relative; + display: flex; + flex-direction: column; // allows for sticky header and footer + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling +} + +// Header layout (fixed top), belongs in a bmd-layout-container +.bmd-layout-header { + z-index: 3; + display: flex; + flex-direction: column; // since this is a column, it is necessary that something like an actual navbar is a child + flex-wrap: nowrap; + flex-shrink: 0; + justify-content: flex-start; + width: 100%; + max-height: 1000px; + transform: translateZ(0); // mobile webkit smooth scrolling + @include material-animation-default(); +} + +// Content layout, belongs in a bmd-layout-container +.bmd-layout-content { + position: relative; + z-index: 1; // under a header + display: inline-block; + //-ms-flex: 0 1 auto; // Fix IE10 bug. + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; // mobile webkit smooth scrolling may need scroll, but auto seems to be working and omits the scroll border + -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling + @include material-animation-default(); +} + +// Pushes flex-based content to the other end (x or y) +.bmd-layout-spacer { + flex-grow: 1; +} + +// Backdrop - generic backdrop to be used by other components i.e. drawer in overlay mode +.bmd-layout-backdrop { + position: absolute; + top: 0; + left: 0; + z-index: 4; + width: 100%; + height: 100%; + visibility: hidden; + background-color: transparent; + transition-property: background-color; + @include material-animation-default(); + + @supports (pointer-events: auto) { + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + transition-property: opacity; + visibility: visible; + pointer-events: none; + } + + // NOTE: the &.in style is responsive, generated by @mixin bmd-layout-backdrop-in() where needed. +} diff --git a/templates/assets/bootstrap-material-design/scss/_list-group.scss b/templates/assets/bootstrap-material-design/scss/_list-group.scss new file mode 100644 index 0000000..1f36c64 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_list-group.scss @@ -0,0 +1,100 @@ +// https://www.google.com/design/spec/components/lists.html#lists-specs + +// - single line 48dp +// - single line avatar 56dp +// - double line (with and w/o avatar) 72dp +// - triple line 88dp + +.list-group { + // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files + @if $enable-flex { + display: flex; + flex-direction: column; + } + // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files + + flex-grow: 1; + + // Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding. + padding: .5rem 0; + + // dense size variation + &.bmd-list-group-sm { + padding: .25rem 0; + + .list-group-item { + padding: .5rem 1rem; + } + } +} + +.bmd-list-group-col { + display: flex; + flex-direction: column; + min-width: 0; + //flex-shrink: 0; +} + +.list-group-item { + // #853 start -- https://github.com/twbs/bootstrap/pull/18981/files + @if $enable-flex { + display: flex; + flex-flow: row wrap; + align-items: center; + } @else { + display: block; + } + // #853 end -- https://github.com/twbs/bootstrap/pull/18981/files + padding: 1rem; + line-height: 1; + + .list-group-item-text { // word wrap? http://stackoverflow.com/a/26535469/2363935 + //flex-flow: row wrap; + min-width: 0; + max-height: 2.188rem; // 88dp tile total height + // FIXME: text overflow with ellipsis is not working + //flex: 0 1 auto; // http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text + overflow: hidden; + text-overflow: ellipsis; + } + + //------ + // NOTE: there are many variations of icons/labels in a list, each one of these rules exist for a reason. + + // first icon/label on the left + :first-child { + margin-right: 2rem; // single line icon is 72dp to text (16 pad + 24 icon + 32 margin) + } + + // second icon/label, or only icon/label marked as 'pull-*-right', or any direct child element marked as right + > .pull-xs-right, + > .pull-sm-right, + > .pull-md-right, + > .pull-lg-right, + > .pull-xl-right, + > * ~ .label:last-child, + > * ~ .material-icons:last-child { + margin-right: 0; // some variations actually match the first-child + margin-left: auto; + } + + // add the padding to icons (margin-left is used for alignment) + .material-icons.pull-xs-right, // need the specificity + .material-icons.pull-sm-right, + .material-icons.pull-md-right, + .material-icons.pull-lg-right, + .material-icons.pull-xl-right, + .material-icons ~ .material-icons:last-child { + padding-left: 1rem; // guarantee space per spec + } + //------ + + .list-group-item-heading { + //font-size: 1rem; + } + + .list-group-item-text { + font-size: .875rem; + color: $gray; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_mixins.scss b/templates/assets/bootstrap-material-design/scss/_mixins.scss new file mode 100644 index 0000000..a322dcb --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_mixins.scss @@ -0,0 +1,10 @@ +@import "mixins/utilities"; +@import "mixins/breakpoints"; +@import "mixins/animations"; +@import "mixins/type"; +@import "mixins/layout"; +@import "mixins/drawer"; +@import "mixins/forms"; +@import "mixins/buttons"; +@import "mixins/hover"; +@import "mixins/navs"; diff --git a/templates/assets/bootstrap-material-design/scss/_modal.scss b/templates/assets/bootstrap-material-design/scss/_modal.scss new file mode 100644 index 0000000..152591e --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_modal.scss @@ -0,0 +1,26 @@ +// Modals +// https://www.google.com/design/spec/components/dialogs.html#dialogs-specs + +.modal-content { + border: 0; + border-radius: $border-radius; + + .modal-header { + padding: 24px 24px 0; + border-bottom: 0; + } + .modal-body { + padding: 20px 24px 24px; + } + .modal-footer { + padding: 8px 8px 8px 24px; + border-top: 0; + .btn { + margin: 0; + } + + .btn + .btn { + margin-left: 8px; + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_nav.scss b/templates/assets/bootstrap-material-design/scss/_nav.scss new file mode 100644 index 0000000..5df047e --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_nav.scss @@ -0,0 +1,54 @@ +// https://www.google.com/design/spec/components/tabs.html#tabs-specs + +.nav-link { + //line-height: $bmd-nav-link-line-height; // set baseline line-height and font sizes + text-transform: uppercase; +} + +// navbars +.navbar-nav { + .nav-link { + padding: $bmd-navbar-link-padding; + font-size: $bmd-navbar-link-font-size; + font-weight: $bmd-navbar-link-font-weight; + } +} + + +// pills and tabs +.nav-tabs, +.nav-pills { + border: 0; + + .nav-link { + padding: $bmd-nav-tabs-pills-link-padding; + font-size: $bmd-nav-tabs-pills-font-size; + font-weight: $bmd-nav-tabs-pills-font-weight; + border: 0; + } +} + +// tabs only +.nav-tabs { + .nav-link { + border-bottom: $bmd-nav-tabs-border-size solid transparent; + } + + // colors + @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover); + + &.bg-primary { + @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover); + } + + &.bg-inverse { + @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover); + } +} + +// used to correctly size ripple container +.nav { + .nav-item { + position: relative; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_navbar.scss b/templates/assets/bootstrap-material-design/scss/_navbar.scss new file mode 100644 index 0000000..dfb01bc --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_navbar.scss @@ -0,0 +1,31 @@ +.navbar { + z-index: 1; // required to make the shadow overlap the below content (need is visible in mobile drawer overlay) + border: 0; + border-radius: 0; + @include box-shadow($bmd-shadow-2dp); + + // give correct size to ripple container + .navbar-brand { + position: relative; + } + + // #853 start - https://github.com/twbs/bootstrap/pull/18976/files + @if $enable-flex { + display: flex; + flex-flow: row nowrap; + flex-shrink: 0; + align-items: center; + align-self: stretch; + + > * { + flex-shrink: 0; + } + } @else { + @include clearfix; + } + // #853 end - https://github.com/twbs/bootstrap/pull/18976/files + + > .container { + flex: 1; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_pagination.scss b/templates/assets/bootstrap-material-design/scss/_pagination.scss new file mode 100644 index 0000000..ee4a7a2 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_pagination.scss @@ -0,0 +1,52 @@ +.page-item { + &:first-child .page-link { + @include border-left-radius(4em); + } + &:last-child .page-link { + @include border-right-radius(4em); + margin-right: 0; + } + + &:first-child, + &:last-child { + .page-link { + display: flex; + justify-content: center; + padding-right: 0; + padding-left: 0; + > .material-icons { + font-size: 1.5em; + } + } + } +} + +.page-link { + min-width: 2.6em; + margin-right: 0.5em; + text-align: center; + border-radius: 4em; + + @include hover-focus { + text-decoration: none; + } +} + + +// +// Sizing +// + +.pagination-lg { + .page-link { + min-width: 2.8em; + } + @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, 4em); +} + +.pagination-sm { + .page-link { + min-width: 2.2em; + } + @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, 4em); +} diff --git a/templates/assets/bootstrap-material-design/scss/_popover.scss b/templates/assets/bootstrap-material-design/scss/_popover.scss new file mode 100644 index 0000000..2f347ae --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_popover.scss @@ -0,0 +1,19 @@ +// +//.popover, .tooltip-inner { +// line-height: 1em; +// color: $bmd-popover-color; +// background: $bmd-popover-background; +// border: 0; +// border-radius: $border-radius; +// @include box-shadow($bmd-shadow-2dp); +//} +// +//.tooltip, .tooltip.in { +// opacity: 1; +//} +// +//.popover, .tooltip { +// .arrow, .tooltip-arrow { +// display: none; +// } +//} diff --git a/templates/assets/bootstrap-material-design/scss/_progress.scss b/templates/assets/bootstrap-material-design/scss/_progress.scss new file mode 100644 index 0000000..3a3b48c --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_progress.scss @@ -0,0 +1,11 @@ + +.progress { + height: 4px; + background: #c8c8c8; + border-radius: 0; + box-shadow: none; + .progress-bar { + box-shadow: none; + //@include variations(unquote(".progress-bar"), unquote(""), background-color, $brand-primary); + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_radios.scss b/templates/assets/bootstrap-material-design/scss/_radios.scss new file mode 100644 index 0000000..6c70f45 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_radios.scss @@ -0,0 +1,119 @@ +.radio label, +label.radio-inline { + position: relative; + padding-left: $bmd-radio-size + $bmd-radio-label-padding; // absolutely positioned so add the radio size + + .bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693 + .bmd-radio-inner-circle { + position: absolute; + top: calc-top($line-height-base, $font-size-base, $bmd-radio-size); // vertical center of line-height + left: 0; + display: inline-block; + width: $bmd-radio-size; + height: $bmd-radio-size; + cursor: pointer; + transition-duration: 0.2s; + + &.bmd-radio-outer-circle { + border: $bmd-radio-border solid $bmd-radio-color-off; + border-radius: 50%; + transition: border-color ease .28s; + } + &.bmd-radio-inner-circle { + display: inline-block; + background-color: $bmd-radio-color-on; + border-radius: 50%; + transition: transform ease .28s; + transform: scale3d(0, 0, 0); + + // focus/press ripple + &::after { + position: absolute; + top: -#{$bmd-radio-ripple-offset}; + left: -#{$bmd-radio-ripple-offset}; + z-index: 1; + display: block; + width: 50px; + height: 50px; + margin: 0; + content: ""; + background-color: $gray-dark; + border-radius: 100%; + opacity: 0; + transform: scale3d(1.5, 1.5, 1); + } + } + } + + input[type=radio] { + // Hide native radio + position: absolute; + left: 0; + z-index: -1; + width: 0; + height: 0; + margin: 0; + overflow: hidden; + pointer-events: none; + opacity: 0; + + &:checked { + @include bmd-radio-color($bmd-radio-color-on); + + ~ .bmd-radio-inner-circle { + transform: scale3d(0.55, 0.55, 1); + &::after { + animation: rippleOn; + + .is-focused & { + // Prevent ripple effect on page load + animation: rippleOn 500ms; + } + } + } + } + + &:not(:checked) ~ .bmd-radio-inner-circle::after { + animation: rippleOff 500ms; + } + + &[disabled], + &:disabled, + fieldset[disabled] & { + + + .bmd-radio-outer-circle { + cursor: default; + } + + @include bmd-radio-color($bmd-radio-color-disabled); + + .bg-inverse & { + @include bmd-radio-color($bmd-radio-color-disabled-inverse); + } + } + } +} + +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} + +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_reboot.scss b/templates/assets/bootstrap-material-design/scss/_reboot.scss new file mode 100644 index 0000000..8e503fa --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_reboot.scss @@ -0,0 +1,25 @@ +body { + font-weight: $bmd-font-weight-base; +} + +a { + &:focus { + outline: none; // remove the terrible @include tab-focus(); + } +} + +button:focus { + outline: none; + //outline: 1px dotted; + //outline: 5px auto -webkit-focus-ring-color; +} + + +//// Prevent highlight on mobile +//* { +// -webkit-tap-highlight-color: rgba($white, 0); +// -webkit-tap-highlight-color: transparent; +// &:focus { +// outline: 0; +// } +//} diff --git a/templates/assets/bootstrap-material-design/scss/_ripples.scss b/templates/assets/bootstrap-material-design/scss/_ripples.scss new file mode 100644 index 0000000..7d7a45a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_ripples.scss @@ -0,0 +1,40 @@ +// marker class (used as a selector for one-off elements to decorate) +.ripple { + position: relative; +} + +.ripple-container { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + pointer-events: none; + border-radius: inherit; + + .ripple-decorator { + position: absolute; + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + pointer-events: none; + background-color: rgba($black, 0.05); + border-radius: 100%; + opacity: 0; + transform: scale(1); + transform-origin: 50%; + + &.ripple-on { + opacity: 0.1; + transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + } + + &.ripple-out { + opacity: 0; + transition: opacity 0.1s linear 0s !important; + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_switches.scss b/templates/assets/bootstrap-material-design/scss/_switches.scss new file mode 100644 index 0000000..b06444d --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_switches.scss @@ -0,0 +1,83 @@ +// http://codepen.io/rosskevin/pen/EPPwRR?editors=110 +.switch { + label { + position: relative; + padding-left: $bmd-switch-width + $bmd-switch-label-padding; // absolutely positioned so add the radio size + + .bmd-switch-track { + position: absolute; + top: calc-top($line-height-base, $font-size-base, $bmd-switch-height); + left: 0; + display: inline-block; + width: $bmd-switch-width; + height: $bmd-switch-height; + cursor: pointer; + background-image: linear-gradient( + to right, + $bmd-switch-unchecked-bg 0%, + $bmd-switch-unchecked-bg 50%, + $bmd-switch-checked-bg 50%, + $bmd-switch-checked-bg 100% + ); + background-position: 0%; + background-size: $bmd-switch-width * 2 $bmd-switch-height; + border-radius: $bmd-switch-width; + transition: background-position 0.2s ease-in; + + &::after { + position: absolute; + top: 50%; + left: 0; + display: block; + align-self: center; + width: $bmd-switch-handle-size; + height: $bmd-switch-handle-size; + content: ""; + background: $bmd-switch-handle-unchecked-bg; + border-radius: 100%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + transition: left 0.2s ease-in, background-color 0.2s ease-in, transform 0.3s ease; + transform: translateY(-50%); + } + + // Jelly effect on click + &:active::after { + transform: translateY(-50%) scale3d(1.15, 0.85, 1); + } + } + + input { + // Hide original checkbox, but don't use `display: none` to allow focus on it using keyboard + position: absolute; + display: block; + width: 0; + height: 0; + opacity: 0; + + &:checked { + + .bmd-switch-track { + background-position: -100%; + &::after { + left: unquote("calc(100% - #{$bmd-switch-handle-size})"); //calc(100% - $bmd-switch-handle-size); + background-color: $bmd-switch-handle-checked-bg; + } + } + } + + &:disabled { + // No jelly effect on disabled switchs + + .bmd-switch-track:active::after { + transform: translateY(-50%); + } + + + .bmd-switch-track { + cursor: default; + background: $bmd-switch-disabled-bg; + &::after { + background: $bmd-switch-handle-disabled-bg; + } + } + } + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/_tables.scss b/templates/assets/bootstrap-material-design/scss/_tables.scss new file mode 100644 index 0000000..258aa90 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_tables.scss @@ -0,0 +1,26 @@ +// BS4 has not yet converted the following to variables - keep an eye on it and move to variables when possible. +.thead-inverse { + th { + //color: $bmd-inverse; // #fff; + //background-color: $gray-dark; + } +} +.thead-default { + th { + //color: $gray; + //background-color: $bmd-inverse-lighter; //$gray-lighter; + } +} + +.table-inverse { + color: $bmd-inverse-light; //$gray-lighter; + //background-color: $gray-dark; + + //th, + //td, + //thead th { + // border-color: $gray; + //} +} + + diff --git a/templates/assets/bootstrap-material-design/scss/_themes.scss b/templates/assets/bootstrap-material-design/scss/_themes.scss new file mode 100644 index 0000000..8bb532c --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_themes.scss @@ -0,0 +1,6 @@ +// by default, assume light-theme, no need for a marker class. + +// this is mostly a marker class, add it to something like the body or container. Subordinates will look for this marker - see buttons +.bg-inverse { + // foo +} diff --git a/templates/assets/bootstrap-material-design/scss/_type.scss b/templates/assets/bootstrap-material-design/scss/_type.scss new file mode 100644 index 0000000..aaee361 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_type.scss @@ -0,0 +1,6 @@ +// This needs review, including colors: https://www.google.com/design/spec/style/typography.html#typography-styles + +// adjust up the h6 weight +h6 { + font-weight: 500; +} diff --git a/templates/assets/bootstrap-material-design/scss/_variables.scss b/templates/assets/bootstrap-material-design/scss/_variables.scss new file mode 100644 index 0000000..bb2ae79 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/_variables.scss @@ -0,0 +1,139 @@ +// FIXME: re-examine organization of variables, files, ordering etc. While the ordering works, we need to be sure this is more comprehensible. +@import "variables/colors"; +@import "variables/shadow"; + +// redefine ? TODO: do we need this bmd variant? This is used as $body-color +$gray-lighter: rgba($black, 0.12) !default; +$gray-light: rgba($black, 0.26) !default; +$gray: rgba($black, .54) !default; // spec color +$gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter + +$bmd-font-weight-base: 400; + +// wondering if any of these could still be refactored out, but are definitely in use. +$bmd-inverse: rgba($white, 1) !default; +$bmd-inverse-light: rgba($white, 0.84) !default; +$bmd-inverse-lighter: rgba($white, 0.54) !default; + +$bmd-label-color: $gray-light !default; +$bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary + +// Customized BS variables +@import "variables/bootstrap/components"; +@import "variables/bootstrap/custom-forms"; +@import "variables/bootstrap/spacing"; +@import "variables/bootstrap/body"; +@import "variables/bootstrap/brand"; +@import "variables/bootstrap/buttons"; +@import "variables/bootstrap/card"; +@import "variables/bootstrap/code"; +@import "variables/bootstrap/dropdown"; +@import "variables/bootstrap/forms"; +@import "variables/bootstrap/list-group"; +@import "variables/bootstrap/nav"; +@import "variables/bootstrap/pagination"; +@import "variables/bootstrap/state"; +@import "variables/bootstrap/type"; +@import "variables/bootstrap/modals"; + +// import their vars after customization for use below +$enable-flex: true; // fully adopt flexbox layouts +$enable-shadows: true; // enable shadows, set to false to turn off shadows +@import "bootstrap/scss/variables"; // from bootstrap node_module + + +// +@import "variables/layout"; +@import "variables/menu"; +@import "variables/drawer"; + +$bmd-label-color-focus: $brand-primary !default; +$bmd-invalid-underline: $red-a700 !default; +$bmd-readonly-underline: $input-border-color !default; + +//--- +// verified in use with refactoring to v4 + +//--- +//-- unverified below here +$bmd-brand-inverse: $indigo !default; +// Typography elements FIXME: review to see if we actually need these +$icon-color: rgba($black, 0.5) !default; + + +//--- +// FIXME: Similar but not quite the same as Bootstrap variables +// FIXME: these need to either a) be converted to $bmd- or b) converted to bs variables +//--- + +// -------------------- +// inputs +$bmd-bmd-label-static-size-ratio: 75 / 100 !default; +$bmd-help-size-ratio: 75 / 100 !default; + +//$bmd-form-control-bg-repeat-y: repeat-y !default; // it could work with no-repeat, but on Safari it's bugged and repeat-y is needed, but repeat-y is bugged on the warning icon. +$bmd-form-control-bg-repeat-y: no-repeat !default; +$bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default; +$bmd-form-control-bg-size: 0 100%, 100% 100% !default; +$bmd-form-control-bg-size-active: 100% 100%, 100% 100% !default; + +// expandable +$input-text-button-size: 32px !default; + +// sizing +$bmd-form-line-height: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-base: 1rem !default; + +$bmd-form-line-height-lg: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-lg: 1rem !default; // 16px + +$bmd-form-line-height-sm: 1 !default; // set as 1x font-size so that padding is easier calculated to match the spec. +$bmd-label-top-margin-sm: .75rem !default; // 12px + +$text-disabled: #a8a8a8 !default; +$background-disabled: #eaeaea !default; + +// Checkboxes +$bmd-checkbox-size: 1.25rem !default; +$bmd-checkbox-animation-ripple: 500ms !default; +$bmd-checkbox-animation-check: 0.3s !default; +$bmd-checkbox-checked-color: $brand-primary !default; +$bmd-checkbox-label-padding: .3125rem !default; // 5px + +$bmd-checkbox-border-size: .125rem !default; +$bmd-checkbox-border-color: $bmd-label-color-inner-focus !default; +$bmd-checkbox-border-color-disabled: $gray-light !default; //#bdbdbd !default; + +// Switches +$bmd-switch-label-padding: .3125rem !default; // 5px +$bmd-switch-width: 2.125rem !default; // 34px +$bmd-switch-height: .875rem !default; // 14px +$bmd-switch-handle-size: 1.25rem !default; // 20px (was 18px) + +$bmd-switch-handle-checked-bg: $brand-primary !default; +$bmd-switch-handle-unchecked-bg: #f1f1f1 !default; +$bmd-switch-handle-disabled-bg: #bdbdbd !default; +$bmd-switch-unchecked-bg: $gray-light !default; +$bmd-switch-checked-bg: desaturate(lighten($bmd-switch-handle-checked-bg, 28%), 32%); // kind of magic recipe +$bmd-switch-disabled-bg: $gray-lighter !default; + +// Popovers and Popups +$bmd-popover-background: rgba(101, 101, 101, 0.9) !default; +$bmd-popover-color: #ececec !default; + +// Radio: +$bmd-radio-border: .125rem !default; // 2px +$bmd-radio-size: 1.25rem !default; +$bmd-radio-ripple-offset: 1em !default; +$bmd-radio-label-padding: .3125rem !default; // 5px + +$bmd-radio-color-off: $bmd-label-color-inner-focus !default; // FIXME seems inconsistent, check spec +$bmd-radio-color-on: $brand-primary !default; +$bmd-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity 26% +$bmd-radio-color-disabled-inverse: rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity 30% + +// Animations +$bmd-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default; +$bmd-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default; +$bmd-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default; +$bmd-animation-curve-default: $bmd-animation-curve-fast-out-slow-in !default; diff --git a/templates/assets/bootstrap-material-design/scss/bootstrap-material-design.scss b/templates/assets/bootstrap-material-design/scss/bootstrap-material-design.scss new file mode 100644 index 0000000..f5f94c7 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/bootstrap-material-design.scss @@ -0,0 +1,3 @@ +// IMPORTANT: For use of source and variable overrides, import the following file directly, *NOT* this one. +// This file primarily exists to create the static css distribution. +@import "core"; diff --git a/templates/assets/bootstrap-material-design/scss/extensions/_selectize.scss b/templates/assets/bootstrap-material-design/scss/extensions/_selectize.scss new file mode 100644 index 0000000..5117c32 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/extensions/_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: 0; +// border: 0; +// background: transparent; +// } +// &.bmd-label-floating-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($black, 0.12), 0 1px 2px rgba($black, 0.24); +// border-radius: $border-radius; +// 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/templates/assets/bootstrap-material-design/scss/extensions/_snackbarjs.scss b/templates/assets/bootstrap-material-design/scss/extensions/_snackbarjs.scss new file mode 100644 index 0000000..8d51741 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/extensions/_snackbarjs.scss @@ -0,0 +1,27 @@ +//// Support for SnackbarJS plugin +//// https://github.com/FezVrasta/snackbarjs +// +//.snackbar { +// height: 0; +// font-size: 14px; +// color: $bmd-inverse; +// background-color: #323232; +// border-radius: $border-radius; +// transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s; +// transform: translateY(200%); +// +// @include box-shadow($bmd-shadow-2dp); +//} +// +//.snackbar.snackbar-opened { +// height: auto; +// padding: 14px 15px; +// margin-bottom: 20px; +// transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s; +// transform: none; +//} +// +//// Variations +//.snackbar.toast { +// border-radius: 200px; +//} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_animations.scss b/templates/assets/bootstrap-material-design/scss/mixins/_animations.scss new file mode 100644 index 0000000..d382165 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_animations.scss @@ -0,0 +1,21 @@ +// Animations (from mdl http://www.getmdl.io/) + +@mixin material-animation-fast-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-fast-out-slow-in; +} + +@mixin material-animation-linear-out-slow-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-linear-out-slow-in; +} + +@mixin material-animation-fast-out-linear-in($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-fast-out-linear-in; +} + +@mixin material-animation-default($duration:0.2s) { + transition-duration: $duration; + transition-timing-function: $bmd-animation-curve-default; +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_breakpoints.scss b/templates/assets/bootstrap-material-design/scss/mixins/_breakpoints.scss new file mode 100644 index 0000000..441435a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_breakpoints.scss @@ -0,0 +1,34 @@ +//// case where behavior is responsive, or with a marker class +//@mixin media-breakpoint-down-or($breakpoint, $name) { +// #{unquote($name)} { +// @content +// } +// +// @include media-breakpoint-down($breakpoint) { +// @content +// } +//} +// +//// case where behavior is responsive, or with a marker class +//@mixin media-breakpoint-up-or($breakpoint, $name) { +// #{unquote($name)} { +// @content +// } +// +// @include media-breakpoint-up($breakpoint) { +// @content +// } +//} +// +//// Name of the previous breakpoint, or null +//// +//// >> breakpoint-next(sm) +//// xs +//// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +//// xs +//// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +//// xs +//@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { +// $n: index($breakpoint-names, $name); +// @return if($n > 1, nth($breakpoint-names, $n - 1), null); +//} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss b/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss new file mode 100644 index 0000000..9d849f1 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_buttons.scss @@ -0,0 +1,218 @@ +// from bs mixins/buttons button-variant +@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) { + color: $color; + background-color: $background; + border-color: $border; + + @include hover { + color: $color; + background-color: $focus-background; + border-color: $focus-border; + } + + &:focus, + &.focus { + color: $color; + background-color: $focus-background; + border-color: $focus-border; + } + + &:active, + &.active, + .open > &.dropdown-toggle { + color: $color; + background-color: $focus-background; + border-color: $focus-border; + + &:hover, + &:focus, + &.focus { + color: $color; + background-color: $active-background; + border-color: $active-border; + } + } + + // when it is an icon, kill the active bg on open dropdown, but stabilize on hover + .open > &.dropdown-toggle.bmd-btn-icon { + color: inherit; + background-color: $background; + + // leave hover on with the lighter focus color + &:hover { + background-color: $focus-background; + } + } + + &.disabled, + &:disabled { + &:focus, + &.focus { + background-color: $background; + border-color: $border; + } + @include hover { + background-color: $background; + border-color: $border; + } + } +} + +@mixin bmd-flat-button-variant( + $color, + $border: $bmd-btn-border, + $focus-border: $bmd-btn-focus-bg, + $active-border: $bmd-btn-active-bg +) { + + $background: $bmd-btn-bg; + $focus-background: $bmd-btn-focus-bg; + $active-background: $bmd-btn-active-bg; + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); + + // inverse color scheme + .bg-inverse & { + $focus-background: $bmd-inverse-btn-focus-bg; + $focus-border: $bmd-inverse-btn-focus-bg; + + $active-background: $bmd-inverse-btn-active-bg; + $active-border: $bmd-inverse-btn-active-bg; + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); + } + + // reverse the above for links + &.btn-link { + background-color: transparent; + } +} + +@mixin bmd-flat-button-color() { + + @include bmd-flat-button-variant($bmd-btn-color); + + // flat bg with text color variations + &.btn-primary { + @include bmd-flat-button-variant($btn-primary-bg); + } + &.btn-secondary { + @include bmd-flat-button-variant($btn-secondary-color); + } + &.btn-info { + @include bmd-flat-button-variant($btn-info-bg); + } + &.btn-success { + @include bmd-flat-button-variant($btn-success-bg); + } + &.btn-warning { + @include bmd-flat-button-variant($btn-warning-bg); + } + &.btn-danger { + @include bmd-flat-button-variant($btn-danger-bg); + } +} + +@mixin bmd-outline-button-color() { + &.btn-outline, + &.btn-outline-primary, + &.btn-outline-secondary, + &.btn-outline-info, + &.btn-outline-success, + &.btn-outline-warning, + &.btn-outline-danger { + border-color: currentColor; + border-style: solid; + border-width: 1px; + } + + // flat bg with text and border color variations + &.btn-outline { + @include bmd-flat-button-variant($bmd-btn-color, $bmd-btn-color, $bmd-btn-color, $bmd-btn-color); + } + &.btn-outline-primary { + @include bmd-flat-button-variant($btn-primary-bg, $btn-primary-bg, $btn-primary-bg, $btn-primary-bg); + } + &.btn-outline-secondary { + @include bmd-flat-button-variant($btn-secondary-color, $btn-secondary-color, $btn-secondary-color, $btn-secondary-color); + } + &.btn-outline-info { + @include bmd-flat-button-variant($btn-info-bg, $btn-info-bg, $btn-info-bg, $btn-info-bg); + } + &.btn-outline-success { + @include bmd-flat-button-variant($btn-success-bg, $btn-success-bg, $btn-success-bg, $btn-success-bg); + } + &.btn-outline-warning { + @include bmd-flat-button-variant($btn-warning-bg, $btn-warning-bg, $btn-warning-bg, $btn-warning-bg); + } + &.btn-outline-danger { + @include bmd-flat-button-variant($btn-danger-bg, $btn-danger-bg, $btn-danger-bg, $btn-danger-bg); + } +} + +@mixin bmd-raised-button-variant($color, $background, $border) { + + // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only? + $focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%)); + //$focus-background: darken($background, 10%); // default bootstrap + $focus-border: darken($border, 12%); + + $active-background: $focus-background; + //$active-background: darken($background, 17%); + $active-border: darken($border, 25%); + + @include bmd-button-variant($color, + $background, + $focus-background, + $active-background, + $border, + $focus-border, + $active-border); +} + +@mixin bmd-raised-button-color() { + + &.btn-primary { + @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); + } + &.btn-secondary { + @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); + } + &.btn-info { + @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border); + } + &.btn-success { + @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border); + } + &.btn-warning { + @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); + } + &.btn-danger { + @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); + } +} + +@mixin undo-bs-tab-focus() { + // clear out the tab-focus() from BS + &, + &:active, + &.active { + &:focus, + &.focus { + //@include tab-focus(); + outline: 0; + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss b/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss new file mode 100644 index 0000000..21c49da --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss @@ -0,0 +1,237 @@ +// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time + +@mixin bmd-drawer-x-out($size) { + @each $side, $abbrev in (left: l, right: r) { + &.bmd-drawer-f-#{$abbrev} { + > .bmd-layout-drawer { + // position + top: 0; + #{$side}: 0; + + width: $size; + height: 100%; + + @if $side == left { + transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen + } @else { + transform: translateX($size + 10px); // initial position of drawer (closed), way off screen + } + } + + > .bmd-layout-header, + > .bmd-layout-content { + margin-#{$side}: 0; + } + } + } +} + +@mixin bmd-drawer-y-out($size) { + @each $side, $abbrev in (top: t, bottom: b) { + &.bmd-drawer-f-#{$abbrev} { + > .bmd-layout-drawer { + // position + #{$side}: 0; + left: 0; + + width: 100%; + height: $size; + + @if $side == top { + transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen + } @else { + transform: translateY($size + 10px); // initial position of drawer (closed), way off screen + } + } + + > .bmd-layout-content { + margin-#{$side}: 0; + } + } + } +} + +@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") { + // e.g. &, &-sm, &-md, &-lg + $name: "&-#{$breakpoint}#{$suffix}"; + @if $breakpoint == xs { + $name: "&"; + } + @return $name; +} + +@mixin bmd-drawer-x-in($size) { + @each $side, $abbrev in (left: l, right: r) { + &.bmd-drawer-f-#{$abbrev} { + // Push - drawer will push the header and content (default behavior) + > .bmd-layout-header { + width: calc(100% - #{$size}); + margin-#{$side}: $size; + } + + > .bmd-layout-drawer { + transform: translateX(0); + } + + > .bmd-layout-content { + margin-#{$side}: $size; + } + } + } +} + +@mixin bmd-drawer-y-in($size) { + @each $side, $abbrev in (top: t, bottom: b) { + &.bmd-drawer-f-#{$abbrev} { + + // 1. Push - drawer will push the header or content + > .bmd-layout-header { + @if $side == top { // only add margin-top on a header when the drawer is at the top + margin-#{$side}: $size; + } + } + + > .bmd-layout-drawer { + transform: translateY(0); + } + + > .bmd-layout-content { + @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom + margin-#{$side}: $size; + } + } + } + } +} + +// breakpoint based open to a particular size +@mixin bmd-drawer-x-in-up($size, $breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); + + &.bmd-drawer-in { + #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg + + @if $breakpoint == xs { + // bmd-drawer-in marker class (non-responsive) + @include bmd-drawer-x-in($size); + } @else { + + // responsive class + @include media-breakpoint-up($breakpoint) { + // bmd-drawer-f-(left and right) styles + @include bmd-drawer-x-in($size); + } + } + } + } +} + +// breakpoint based open to a particular size +@mixin bmd-drawer-y-in-up($size, $breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); + + &.bmd-drawer-in { + #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg + + @if $breakpoint == xs { + // bmd-drawer-in marker class (non-responsive) + @include bmd-drawer-y-in($size); + } @else { + + // responsive class + @include media-breakpoint-up($breakpoint) { + // bmd-drawer-f-(left and right) styles + @include bmd-drawer-y-in($size); + } + } + } + } +} + +@mixin bmd-drawer-x-overlay() { + @include bmd-layout-backdrop-in(); + + @each $side, $abbrev in (left: l, right: r) { + &.bmd-drawer-f-#{$abbrev} { + > .bmd-layout-header, + > .bmd-layout-content { + width: 100%; + margin-#{$side}: 0; + } + } + } +} + +@mixin bmd-drawer-y-overlay() { + @include bmd-layout-backdrop-in(); + + @each $side, $abbrev in (top: t, bottom: b) { + &.bmd-drawer-f-#{$abbrev} { + > .bmd-layout-header { + @if $side == top { // only add margin-top on a header when the drawer is at the top + margin-#{$side}: 0; + } + } + + > .bmd-layout-content { + @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom + margin-#{$side}: 0; + } + } + } + } +} + +// Overlay - left/right responsive overlay classes and marker class +@mixin bmd-drawer-x-overlay-down($breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); + + &.bmd-drawer-overlay { + #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg + + // x - left/right + + @if $breakpoint == xs { // overlay marker class (non-responsive) + + // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the + // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) + &.bmd-drawer-overlay { + @include bmd-drawer-x-overlay(); + } + } @else { + @include media-breakpoint-down($breakpoint) { // overlay responsive class + @include bmd-drawer-x-overlay(); + } + } + } + } +} + +// Overlay - top/bottom responsive overlay classes and marker class +@mixin bmd-drawer-y-overlay-down($breakpoint) { + // e.g. &, &-sm, &-md, &-lg + $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); + + &.bmd-drawer-overlay { + #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg + //// y - top/bottom + + @if $breakpoint == xs { // overlay marker class (non-responsive) + + // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the + // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) + &.bmd-drawer-overlay { + @include bmd-drawer-y-overlay(); + } + } @else { + @include media-breakpoint-down($breakpoint) { // overlay responsive class + @include bmd-drawer-y-overlay(); + } + } + } + } +} + diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss b/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss new file mode 100644 index 0000000..bdb79bc --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_forms.scss @@ -0,0 +1,283 @@ +@mixin bmd-disabled() { + fieldset[disabled][disabled] &, + &.disabled, + &:disabled, + &[disabled] { + @content + } +} + +@mixin bmd-selection-color() { + .radio label, + .radio-inline, + .checkbox label, + .checkbox-inline, + .switch label { + + // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) + //color: $bmd-label-color; + + &, + .is-focused & { + // form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused + color: $bmd-label-color; + + // on focus just darken the specific labels, do not turn them to the brand-primary + @include hover-focus-active() { + //&:hover, + //&:focus { + color: $bmd-label-color-inner-focus; + } + + // correct the above focus color for disabled items + label:has(input[type=radio][disabled]), // css 4 which is unlikely to work for a while, but no other pure css way. + label:has(input[type=checkbox][disabled]), // css 4 + fieldset[disabled] & { + &, + &:hover, + &:focus { + color: $bmd-label-color; + } + } + } + } + + // Style for disabled inputs OLD, use color approach with opacity built in, see radios + //fieldset[disabled] &, + //fieldset[disabled] & input[type=checkbox], + //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before, + //input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check, + //input[type=checkbox][disabled] + .bmd-radio-outer-circle { + // opacity: 0.5; + //} +} + +@mixin bmd-radio-color($color) { + + ~ .bmd-radio-inner-circle { + background-color: $color; + } + + ~ .bmd-radio-outer-circle { + border-color: $color; + } +} + +@mixin bmd-form-color($label-color, $label-color-focus, $border-color) { + + [class^='bmd-label'], + [class*=' bmd-label'] { + color: $label-color; + } + + // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention + .form-control { + + // underline animation color on focus + $underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px); + $underline-background-image-invalid: linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px); + $underline-background-image-readonly: linear-gradient(to top, $bmd-readonly-underline 1px, fade-out($bmd-readonly-underline, 1) 1px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px); + $underline-background-image-disabled: linear-gradient(to right, $input-border-color 0%, $input-border-color 30%, transparent 30%, transparent 100%); + + // bg image is always there, we just need to reveal it + &, + .is-focused & { + background-image: $underline-background-image; + } + + &:invalid { + background-image: $underline-background-image-invalid; + } + + &:read-only { + background-image: $underline-background-image-readonly; + } + + @include bmd-disabled() { + background-image: $underline-background-image-disabled; + background-repeat: repeat-x; + background-size: 3px 1px; + } + + // allow underline focus image and validation images to coexist + &.form-control-success { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-success; + } + } + &.form-control-warning { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-warning; + } + } + &.form-control-danger { + &, + .is-focused & { + background-image: $underline-background-image, $form-icon-danger; + } + } + } + + .is-focused, // may or may not be a form-group or bmd-form-group + &.is-focused { + // on focus set borders and labels to the validation color + + // Use the BS provided mixin for the bulk of the color + @include form-control-validation($label-color); + + [class^='bmd-label'], + [class*=' bmd-label'] { + color: $label-color-focus; + } + + .bmd-label-placeholder { + color: $label-color; // keep the placeholder color + } + + // Set the border and box shadow on specific inputs to match + .form-control { + border-color: $border-color; + } + + // Set validation states also for addons + //.input-group-addon { + // border-color: $border-color; + //} + + .bmd-help { + color: $bmd-label-color-inner-focus; + } + } +} + +// must be broken out for reuse - webkit selector breaks firefox +@mixin bmd-label-static($label-top, $static-font-size) { + top: $label-top; + left: 0; + // must repeat because the previous (more generic) selectors + font-size: $static-font-size; +} + +@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { + + $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2)); + $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size); + $help-font-size: ($bmd-help-size-ratio * $font-size); + + $label-static-top: $label-top-margin; + $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y; + + //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} "; + + //Label height: 72dp + //Padding above label text: 16dp + //Padding between label and input text: 8dp + //Padding below input text (including divider): 16dp + //Padding below text divider: 8dp + + @if $form-group-context { + // Create a space at the top of the bmd-form-group for the label. + // The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding). + padding-top: ($label-top-margin + $static-font-size); + // note: bottom-margin of this is determined by $spacer. @see _spacer.scss + //margin-bottom: (1.5 * $help-font-size); + } + + // TODO: remove this when known stable. https://github.com/FezVrasta/bootstrap-material-design/issues/849 + //@else { + // + // // for radios and checkboxes without a form-group, add some extra vertical spacing to pad down so that + // // any help text above is not encroached upon, or so that it appears more evenly spaced vs form-groups + // .radio, + // label.radio-inline, + // .checkbox, + // label.checkbox-inline, + // .switch { + // padding-top: $spacer-y; + // } + //} + + // Set all line-heights preferably to 1 so that we can space out everything manually without additional added space + // from the default line-height of 1.5 + .form-control, + label, + input::placeholder { + line-height: $variant-line-height; + } + + .radio label, + label.radio-inline, + .checkbox label, + label.checkbox-inline, + .switch label { + line-height: $line-height-base; // keep the same line height for radios and checkboxes + } + + // Note: this may be inside or outside a form-group, may be .bmd-form-group.bmd-form-group-sm or .bmd-form-group.bmd-form-group-lg + input::placeholder { + font-size: $font-size; + } + + // generic labels used anywhere in the form + .checkbox label, + .radio label, + label { + font-size: $font-size; + } + + // floating/placeholder default (no focus) + .bmd-label-floating, + .bmd-label-placeholder { + //@debug "top: #{$label-as-placeholder-top}"; + top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding + } + + // floating focused/filled will look like static + &.is-focused, + .is-focused, + &.is-filled, + .is-filled { + .bmd-label-floating { + @include bmd-label-static($label-static-top, $static-font-size); + } + } + + // static + .bmd-label-static { + @include bmd-label-static($label-static-top, $static-font-size); + } + // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731 + //input:-webkit-autofill ~ .bmd-label-floating { FIXME: confirm that the autofill js generation of change event makes this unnecessary + // @include bmd-label-static($label-top, $static-font-size, $static-line-height); + //} + + .bmd-help { + margin-top: 0; // allow the input margin to set-off the top of the help-block + font-size: $help-font-size; + } + + // validation icon placement + .form-control { + &.form-control-success, + &.form-control-warning, + &.form-control-danger { + $icon-bg-size: ($variant-input-height * .5) ($variant-input-height * .5); + background-size: $bmd-form-control-bg-size, $icon-bg-size; + + &, + &:focus, + .bmd-form-group.is-focused & { + padding-right: ($input-padding-x * 3); + background-repeat: $bmd-form-control-bg-repeat-y, no-repeat; + background-position: $bmd-form-control-bg-position, center right ($variant-input-height * .25); + } + + &:focus, + .bmd-form-group.is-focused & { + background-size: $bmd-form-control-bg-size-active, $icon-bg-size; + } + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_hover.scss b/templates/assets/bootstrap-material-design/scss/mixins/_hover.scss new file mode 100644 index 0000000..ae92b2a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_hover.scss @@ -0,0 +1,9 @@ +@mixin bmd-hover-focus-active { + // add the .active to the whole mix of hover-focus-active + &.active { + @content + } + @include hover-focus-active() { + @content; + } +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_layout.scss b/templates/assets/bootstrap-material-design/scss/mixins/_layout.scss new file mode 100644 index 0000000..1a2394c --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_layout.scss @@ -0,0 +1,17 @@ +// Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode +@mixin bmd-layout-backdrop-in() { + + > .bmd-layout-backdrop { + .in { + visibility: visible; + background-color: rgba(0, 0, 0, 0.5); + } + + @supports (pointer-events: auto) { + &.in { + pointer-events: auto; + opacity: 1; + } + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_navs.scss b/templates/assets/bootstrap-material-design/scss/mixins/_navs.scss new file mode 100644 index 0000000..d1edace --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_navs.scss @@ -0,0 +1,23 @@ +@mixin bmd-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) { + .nav-link { + + color: $color; + + &.active { + color: $active-color; + border-color: $active-border; + @include hover-focus { + border-color: $active-border; + } + } + + // Disabled state lightens text and removes hover/tab effects + &.disabled { + color: $disabled-link-color; + + @include plain-hover-focus { + color: $disabled-link-hover-color; + } + } + } +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_type.scss b/templates/assets/bootstrap-material-design/scss/mixins/_type.scss new file mode 100644 index 0000000..8d8873b --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_type.scss @@ -0,0 +1,11 @@ +@mixin headings() { + h1, h2, h3, h4, h5, h6 { + @content; + } +} + +// 14sp font +%std-font { + font-size: .875rem; + font-weight: normal; +} diff --git a/templates/assets/bootstrap-material-design/scss/mixins/_utilities.scss b/templates/assets/bootstrap-material-design/scss/mixins/_utilities.scss new file mode 100644 index 0000000..1a22d77 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/mixins/_utilities.scss @@ -0,0 +1,35 @@ +@function calc-top($line-height-base, $font-size, $component-height) { + @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height +} + + + + +// Emulate the less #contrast function +// TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette) +// contrast-color and brightness borrowed from compass +// Copyright (c) 2009-2014 Christopher M. Eppstein +// Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown +@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) { + @if $threshold { + // Deprecated in Compass 0.13 + @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."; + } + + @if $color == null { + @return null; + } @else { + $color-brightness: brightness($color); + $dark-text-brightness: brightness($dark); + $light-text-brightness: brightness($light); + @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark); + } +} + +@function brightness($color) { + @if type-of($color) == color { + @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%; + } @else { + @return unquote("brightness(#{$color})"); + } +} diff --git a/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss b/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss new file mode 100644 index 0000000..b20e34a --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_colors-map.scss @@ -0,0 +1,311 @@ +// these might be useful in a switch to sass...at some point. + +//$bmd-colors: ( +// "red": $red, +// "pink": $pink, +// "purple": $purple, +// "deep-purple": $deep-purple, +// "indigo": $indigo, +// "blue": $blue, +// "light-blue": $light-blue, +// "cyan": $cyan, +// "teal": $teal, +// "green": $green, +// "light-green": $light-green, +// "lime": $lime, +// "yellow": $yellow, +// "amber": $amber, +// "orange": $orange, +// "deep-orange": $deep-orange, +// "brown": $brown, +// "grey": $grey, +// "blue-grey": $blue-grey +//); +// +//$bmd-colors-map: ( +// "red-50": (name: "red", color: $red-50, number: "-50"), +// "red-100": (name: "red", color: $red-100, number: "-100"), +// "red-200": (name: "red", color: $red-200, number: "-200"), +// "red-300": (name: "red", color: $red-300, number: "-300"), +// "red-400": (name: "red", color: $red-400, number: "-400"), +// "red-500": (name: "red", color: $red-500, number: "-500"), +// "red-600": (name: "red", color: $red-600, number: "-600"), +// "red-700": (name: "red", color: $red-700, number: "-700"), +// "red-800": (name: "red", color: $red-800, number: "-800"), +// "red-900": (name: "red", color: $red-900, number: "-900"), +// "red-a100": (name: "red", color: $red-a100, number: "-a100"), +// "red-a200": (name: "red", color: $red-a200, number: "-a200"), +// "red-a400": (name: "red", color: $red-a400, number: "-a400"), +// "red-a700": (name: "red", color: $red-a700, number: "-a700"), +// "red": (name: "red", color: $red, number: ""), +// "pink-50": (name: "pink", color: $pink-50, number: "-50"), +// "pink-100": (name: "pink", color: $pink-100, number: "-100"), +// "pink-200": (name: "pink", color: $pink-200, number: "-200"), +// "pink-300": (name: "pink", color: $pink-300, number: "-300"), +// "pink-400": (name: "pink", color: $pink-400, number: "-400"), +// "pink-500": (name: "pink", color: $pink-500, number: "-500"), +// "pink-600": (name: "pink", color: $pink-600, number: "-600"), +// "pink-700": (name: "pink", color: $pink-700, number: "-700"), +// "pink-800": (name: "pink", color: $pink-800, number: "-800"), +// "pink-900": (name: "pink", color: $pink-900, number: "-900"), +// "pink-a100": (name: "pink", color: $pink-a100, number: "-a100"), +// "pink-a200": (name: "pink", color: $pink-a200, number: "-a200"), +// "pink-a400": (name: "pink", color: $pink-a400, number: "-a400"), +// "pink-a700": (name: "pink", color: $pink-a700, number: "-a700"), +// "pink": (name: "pink", color: $pink, number: ""), +// "purple-50": (name: "purple", color: $purple-50, number: "-50"), +// "purple-100": (name: "purple", color: $purple-100, number: "-100"), +// "purple-200": (name: "purple", color: $purple-200, number: "-200"), +// "purple-300": (name: "purple", color: $purple-300, number: "-300"), +// "purple-400": (name: "purple", color: $purple-400, number: "-400"), +// "purple-500": (name: "purple", color: $purple-500, number: "-500"), +// "purple-600": (name: "purple", color: $purple-600, number: "-600"), +// "purple-700": (name: "purple", color: $purple-700, number: "-700"), +// "purple-800": (name: "purple", color: $purple-800, number: "-800"), +// "purple-900": (name: "purple", color: $purple-900, number: "-900"), +// "purple-a100": (name: "purple", color: $purple-a100, number: "-a100"), +// "purple-a200": (name: "purple", color: $purple-a200, number: "-a200"), +// "purple-a400": (name: "purple", color: $purple-a400, number: "-a400"), +// "purple-a700": (name: "purple", color: $purple-a700, number: "-a700"), +// "purple": (name: "purple", color: $purple, number: ""), +// "deep-purple-50": (name: "deep-purple", color: $deep-purple-50, number: "-50"), +// "deep-purple-100": (name: "deep-purple", color: $deep-purple-100, number: "-100"), +// "deep-purple-200": (name: "deep-purple", color: $deep-purple-200, number: "-200"), +// "deep-purple-300": (name: "deep-purple", color: $deep-purple-300, number: "-300"), +// "deep-purple-400": (name: "deep-purple", color: $deep-purple-400, number: "-400"), +// "deep-purple-500": (name: "deep-purple", color: $deep-purple-500, number: "-500"), +// "deep-purple-600": (name: "deep-purple", color: $deep-purple-600, number: "-600"), +// "deep-purple-700": (name: "deep-purple", color: $deep-purple-700, number: "-700"), +// "deep-purple-800": (name: "deep-purple", color: $deep-purple-800, number: "-800"), +// "deep-purple-900": (name: "deep-purple", color: $deep-purple-900, number: "-900"), +// "deep-purple-a100": (name: "deep-purple", color: $deep-purple-a100, number: "-a100"), +// "deep-purple-a200": (name: "deep-purple", color: $deep-purple-a200, number: "-a200"), +// "deep-purple-a400": (name: "deep-purple", color: $deep-purple-a400, number: "-a400"), +// "deep-purple-a700": (name: "deep-purple", color: $deep-purple-a700, number: "-a700"), +// "deep-purple": (name: "deep-purple", color: $deep-purple, number: ""), +// "indigo-50": (name: "indigo", color: $indigo-50, number: "-50"), +// "indigo-100": (name: "indigo", color: $indigo-100, number: "-100"), +// "indigo-200": (name: "indigo", color: $indigo-200, number: "-200"), +// "indigo-300": (name: "indigo", color: $indigo-300, number: "-300"), +// "indigo-400": (name: "indigo", color: $indigo-400, number: "-400"), +// "indigo-500": (name: "indigo", color: $indigo-500, number: "-500"), +// "indigo-600": (name: "indigo", color: $indigo-600, number: "-600"), +// "indigo-700": (name: "indigo", color: $indigo-700, number: "-700"), +// "indigo-800": (name: "indigo", color: $indigo-800, number: "-800"), +// "indigo-900": (name: "indigo", color: $indigo-900, number: "-900"), +// "indigo-a100": (name: "indigo", color: $indigo-a100, number: "-a100"), +// "indigo-a200": (name: "indigo", color: $indigo-a200, number: "-a200"), +// "indigo-a400": (name: "indigo", color: $indigo-a400, number: "-a400"), +// "indigo-a700": (name: "indigo", color: $indigo-a700, number: "-a700"), +// "indigo": (name: "indigo", color: $indigo, number: ""), +// "blue-50": (name: "blue", color: $blue-50, number: "-50"), +// "blue-100": (name: "blue", color: $blue-100, number: "-100"), +// "blue-200": (name: "blue", color: $blue-200, number: "-200"), +// "blue-300": (name: "blue", color: $blue-300, number: "-300"), +// "blue-400": (name: "blue", color: $blue-400, number: "-400"), +// "blue-500": (name: "blue", color: $blue-500, number: "-500"), +// "blue-600": (name: "blue", color: $blue-600, number: "-600"), +// "blue-700": (name: "blue", color: $blue-700, number: "-700"), +// "blue-800": (name: "blue", color: $blue-800, number: "-800"), +// "blue-900": (name: "blue", color: $blue-900, number: "-900"), +// "blue-a100": (name: "blue", color: $blue-a100, number: "-a100"), +// "blue-a200": (name: "blue", color: $blue-a200, number: "-a200"), +// "blue-a400": (name: "blue", color: $blue-a400, number: "-a400"), +// "blue-a700": (name: "blue", color: $blue-a700, number: "-a700"), +// "blue": (name: "blue", color: $blue, number: ""), +// "light-blue-50": (name: "light-blue", color: $light-blue-50, number: "-50"), +// "light-blue-100": (name: "light-blue", color: $light-blue-100, number: "-100"), +// "light-blue-200": (name: "light-blue", color: $light-blue-200, number: "-200"), +// "light-blue-300": (name: "light-blue", color: $light-blue-300, number: "-300"), +// "light-blue-400": (name: "light-blue", color: $light-blue-400, number: "-400"), +// "light-blue-500": (name: "light-blue", color: $light-blue-500, number: "-500"), +// "light-blue-600": (name: "light-blue", color: $light-blue-600, number: "-600"), +// "light-blue-700": (name: "light-blue", color: $light-blue-700, number: "-700"), +// "light-blue-800": (name: "light-blue", color: $light-blue-800, number: "-800"), +// "light-blue-900": (name: "light-blue", color: $light-blue-900, number: "-900"), +// "light-blue-a100": (name: "light-blue", color: $light-blue-a100, number: "-a100"), +// "light-blue-a200": (name: "light-blue", color: $light-blue-a200, number: "-a200"), +// "light-blue-a400": (name: "light-blue", color: $light-blue-a400, number: "-a400"), +// "light-blue-a700": (name: "light-blue", color: $light-blue-a700, number: "-a700"), +// "light-blue": (name: "light-blue", color: $light-blue, number: ""), +// "cyan-50": (name: "cyan", color: $cyan-50, number: "-50"), +// "cyan-100": (name: "cyan", color: $cyan-100, number: "-100"), +// "cyan-200": (name: "cyan", color: $cyan-200, number: "-200"), +// "cyan-300": (name: "cyan", color: $cyan-300, number: "-300"), +// "cyan-400": (name: "cyan", color: $cyan-400, number: "-400"), +// "cyan-500": (name: "cyan", color: $cyan-500, number: "-500"), +// "cyan-600": (name: "cyan", color: $cyan-600, number: "-600"), +// "cyan-700": (name: "cyan", color: $cyan-700, number: "-700"), +// "cyan-800": (name: "cyan", color: $cyan-800, number: "-800"), +// "cyan-900": (name: "cyan", color: $cyan-900, number: "-900"), +// "cyan-a100": (name: "cyan", color: $cyan-a100, number: "-a100"), +// "cyan-a200": (name: "cyan", color: $cyan-a200, number: "-a200"), +// "cyan-a400": (name: "cyan", color: $cyan-a400, number: "-a400"), +// "cyan-a700": (name: "cyan", color: $cyan-a700, number: "-a700"), +// "cyan": (name: "cyan", color: $cyan, number: ""), +// "teal-50": (name: "teal", color: $teal-50, number: "-50"), +// "teal-100": (name: "teal", color: $teal-100, number: "-100"), +// "teal-200": (name: "teal", color: $teal-200, number: "-200"), +// "teal-300": (name: "teal", color: $teal-300, number: "-300"), +// "teal-400": (name: "teal", color: $teal-400, number: "-400"), +// "teal-500": (name: "teal", color: $teal-500, number: "-500"), +// "teal-600": (name: "teal", color: $teal-600, number: "-600"), +// "teal-700": (name: "teal", color: $teal-700, number: "-700"), +// "teal-800": (name: "teal", color: $teal-800, number: "-800"), +// "teal-900": (name: "teal", color: $teal-900, number: "-900"), +// "teal-a100": (name: "teal", color: $teal-a100, number: "-a100"), +// "teal-a200": (name: "teal", color: $teal-a200, number: "-a200"), +// "teal-a400": (name: "teal", color: $teal-a400, number: "-a400"), +// "teal-a700": (name: "teal", color: $teal-a700, number: "-a700"), +// "teal": (name: "teal", color: $teal, number: ""), +// "green-50": (name: "green", color: $green-50, number: "-50"), +// "green-100": (name: "green", color: $green-100, number: "-100"), +// "green-200": (name: "green", color: $green-200, number: "-200"), +// "green-300": (name: "green", color: $green-300, number: "-300"), +// "green-400": (name: "green", color: $green-400, number: "-400"), +// "green-500": (name: "green", color: $green-500, number: "-500"), +// "green-600": (name: "green", color: $green-600, number: "-600"), +// "green-700": (name: "green", color: $green-700, number: "-700"), +// "green-800": (name: "green", color: $green-800, number: "-800"), +// "green-900": (name: "green", color: $green-900, number: "-900"), +// "green-a100": (name: "green", color: $green-a100, number: "-a100"), +// "green-a200": (name: "green", color: $green-a200, number: "-a200"), +// "green-a400": (name: "green", color: $green-a400, number: "-a400"), +// "green-a700": (name: "green", color: $green-a700, number: "-a700"), +// "green": (name: "green", color: $green, number: ""), +// "light-green-50": (name: "light-green", color: $light-green-50, number: "-50"), +// "light-green-100": (name: "light-green", color: $light-green-100, number: "-100"), +// "light-green-200": (name: "light-green", color: $light-green-200, number: "-200"), +// "light-green-300": (name: "light-green", color: $light-green-300, number: "-300"), +// "light-green-400": (name: "light-green", color: $light-green-400, number: "-400"), +// "light-green-500": (name: "light-green", color: $light-green-500, number: "-500"), +// "light-green-600": (name: "light-green", color: $light-green-600, number: "-600"), +// "light-green-700": (name: "light-green", color: $light-green-700, number: "-700"), +// "light-green-800": (name: "light-green", color: $light-green-800, number: "-800"), +// "light-green-900": (name: "light-green", color: $light-green-900, number: "-900"), +// "light-green-a100": (name: "light-green", color: $light-green-a100, number: "-a100"), +// "light-green-a200": (name: "light-green", color: $light-green-a200, number: "-a200"), +// "light-green-a400": (name: "light-green", color: $light-green-a400, number: "-a400"), +// "light-green-a700": (name: "light-green", color: $light-green-a700, number: "-a700"), +// "light-green": (name: "light-green", color: $light-green, number: ""), +// "lime-50": (name: "lime", color: $lime-50, number: "-50"), +// "lime-100": (name: "lime", color: $lime-100, number: "-100"), +// "lime-200": (name: "lime", color: $lime-200, number: "-200"), +// "lime-300": (name: "lime", color: $lime-300, number: "-300"), +// "lime-400": (name: "lime", color: $lime-400, number: "-400"), +// "lime-500": (name: "lime", color: $lime-500, number: "-500"), +// "lime-600": (name: "lime", color: $lime-600, number: "-600"), +// "lime-700": (name: "lime", color: $lime-700, number: "-700"), +// "lime-800": (name: "lime", color: $lime-800, number: "-800"), +// "lime-900": (name: "lime", color: $lime-900, number: "-900"), +// "lime-a100": (name: "lime", color: $lime-a100, number: "-a100"), +// "lime-a200": (name: "lime", color: $lime-a200, number: "-a200"), +// "lime-a400": (name: "lime", color: $lime-a400, number: "-a400"), +// "lime-a700": (name: "lime", color: $lime-a700, number: "-a700"), +// "lime": (name: "lime", color: $lime, number: ""), +// "yellow-50": (name: "yellow", color: $yellow-50, number: "-50"), +// "yellow-100": (name: "yellow", color: $yellow-100, number: "-100"), +// "yellow-200": (name: "yellow", color: $yellow-200, number: "-200"), +// "yellow-300": (name: "yellow", color: $yellow-300, number: "-300"), +// "yellow-400": (name: "yellow", color: $yellow-400, number: "-400"), +// "yellow-500": (name: "yellow", color: $yellow-500, number: "-500"), +// "yellow-600": (name: "yellow", color: $yellow-600, number: "-600"), +// "yellow-700": (name: "yellow", color: $yellow-700, number: "-700"), +// "yellow-800": (name: "yellow", color: $yellow-800, number: "-800"), +// "yellow-900": (name: "yellow", color: $yellow-900, number: "-900"), +// "yellow-a100": (name: "yellow", color: $yellow-a100, number: "-a100"), +// "yellow-a200": (name: "yellow", color: $yellow-a200, number: "-a200"), +// "yellow-a400": (name: "yellow", color: $yellow-a400, number: "-a400"), +// "yellow-a700": (name: "yellow", color: $yellow-a700, number: "-a700"), +// "yellow": (name: "yellow", color: $yellow, number: ""), +// "amber-50": (name: "amber", color: $amber-50, number: "-50"), +// "amber-100": (name: "amber", color: $amber-100, number: "-100"), +// "amber-200": (name: "amber", color: $amber-200, number: "-200"), +// "amber-300": (name: "amber", color: $amber-300, number: "-300"), +// "amber-400": (name: "amber", color: $amber-400, number: "-400"), +// "amber-500": (name: "amber", color: $amber-500, number: "-500"), +// "amber-600": (name: "amber", color: $amber-600, number: "-600"), +// "amber-700": (name: "amber", color: $amber-700, number: "-700"), +// "amber-800": (name: "amber", color: $amber-800, number: "-800"), +// "amber-900": (name: "amber", color: $amber-900, number: "-900"), +// "amber-a100": (name: "amber", color: $amber-a100, number: "-a100"), +// "amber-a200": (name: "amber", color: $amber-a200, number: "-a200"), +// "amber-a400": (name: "amber", color: $amber-a400, number: "-a400"), +// "amber-a700": (name: "amber", color: $amber-a700, number: "-a700"), +// "amber": (name: "amber", color: $amber, number: ""), +// "orange-50": (name: "orange", color: $orange-50, number: "-50"), +// "orange-100": (name: "orange", color: $orange-100, number: "-100"), +// "orange-200": (name: "orange", color: $orange-200, number: "-200"), +// "orange-300": (name: "orange", color: $orange-300, number: "-300"), +// "orange-400": (name: "orange", color: $orange-400, number: "-400"), +// "orange-500": (name: "orange", color: $orange-500, number: "-500"), +// "orange-600": (name: "orange", color: $orange-600, number: "-600"), +// "orange-700": (name: "orange", color: $orange-700, number: "-700"), +// "orange-800": (name: "orange", color: $orange-800, number: "-800"), +// "orange-900": (name: "orange", color: $orange-900, number: "-900"), +// "orange-a100": (name: "orange", color: $orange-a100, number: "-a100"), +// "orange-a200": (name: "orange", color: $orange-a200, number: "-a200"), +// "orange-a400": (name: "orange", color: $orange-a400, number: "-a400"), +// "orange-a700": (name: "orange", color: $orange-a700, number: "-a700"), +// "orange": (name: "orange", color: $orange, number: ""), +// "deep-orange-50": (name: "deep-orange", color: $deep-orange-50, number: "-50"), +// "deep-orange-100": (name: "deep-orange", color: $deep-orange-100, number: "-100"), +// "deep-orange-200": (name: "deep-orange", color: $deep-orange-200, number: "-200"), +// "deep-orange-300": (name: "deep-orange", color: $deep-orange-300, number: "-300"), +// "deep-orange-400": (name: "deep-orange", color: $deep-orange-400, number: "-400"), +// "deep-orange-500": (name: "deep-orange", color: $deep-orange-500, number: "-500"), +// "deep-orange-600": (name: "deep-orange", color: $deep-orange-600, number: "-600"), +// "deep-orange-700": (name: "deep-orange", color: $deep-orange-700, number: "-700"), +// "deep-orange-800": (name: "deep-orange", color: $deep-orange-800, number: "-800"), +// "deep-orange-900": (name: "deep-orange", color: $deep-orange-900, number: "-900"), +// "deep-orange-a100": (name: "deep-orange", color: $deep-orange-a100, number: "-a100"), +// "deep-orange-a200": (name: "deep-orange", color: $deep-orange-a200, number: "-a200"), +// "deep-orange-a400": (name: "deep-orange", color: $deep-orange-a400, number: "-a400"), +// "deep-orange-a700": (name: "deep-orange", color: $deep-orange-a700, number: "-a700"), +// "deep-orange": (name: "deep-orange", color: $deep-orange, number: ""), +// "brown-50": (name: "brown", color: $brown-50, number: "-50"), +// "brown-100": (name: "brown", color: $brown-100, number: "-100"), +// "brown-200": (name: "brown", color: $brown-200, number: "-200"), +// "brown-300": (name: "brown", color: $brown-300, number: "-300"), +// "brown-400": (name: "brown", color: $brown-400, number: "-400"), +// "brown-500": (name: "brown", color: $brown-500, number: "-500"), +// "brown-600": (name: "brown", color: $brown-600, number: "-600"), +// "brown-700": (name: "brown", color: $brown-700, number: "-700"), +// "brown-800": (name: "brown", color: $brown-800, number: "-800"), +// "brown-900": (name: "brown", color: $brown-900, number: "-900"), +// "brown-a100": (name: "brown", color: $brown-a100, number: "-a100"), +// "brown-a200": (name: "brown", color: $brown-a200, number: "-a200"), +// "brown-a400": (name: "brown", color: $brown-a400, number: "-a400"), +// "brown-a700": (name: "brown", color: $brown-a700, number: "-a700"), +// "brown": (name: "brown", color: $brown, number: ""), +// "grey-50": (name: "grey", color: $grey-50, number: "-50"), +// "grey-100": (name: "grey", color: $grey-100, number: "-100"), +// "grey-200": (name: "grey", color: $grey-200, number: "-200"), +// "grey-300": (name: "grey", color: $grey-300, number: "-300"), +// "grey-400": (name: "grey", color: $grey-400, number: "-400"), +// "grey-500": (name: "grey", color: $grey-500, number: "-500"), +// "grey-600": (name: "grey", color: $grey-600, number: "-600"), +// "grey-700": (name: "grey", color: $grey-700, number: "-700"), +// "grey-800": (name: "grey", color: $grey-800, number: "-800"), +// "grey-900": (name: "grey", color: $grey-900, number: "-900"), +// "grey-a100": (name: "grey", color: $grey-a100, number: "-a100"), +// "grey-a200": (name: "grey", color: $grey-a200, number: "-a200"), +// "grey-a400": (name: "grey", color: $grey-a400, number: "-a400"), +// "grey-a700": (name: "grey", color: $grey-a700, number: "-a700"), +// "grey": (name: "grey", color: $grey, number: ""), +// "blue-grey-50": (name: "blue-grey", color: $blue-grey-50, number: "-50"), +// "blue-grey-100": (name: "blue-grey", color: $blue-grey-100, number: "-100"), +// "blue-grey-200": (name: "blue-grey", color: $blue-grey-200, number: "-200"), +// "blue-grey-300": (name: "blue-grey", color: $blue-grey-300, number: "-300"), +// "blue-grey-400": (name: "blue-grey", color: $blue-grey-400, number: "-400"), +// "blue-grey-500": (name: "blue-grey", color: $blue-grey-500, number: "-500"), +// "blue-grey-600": (name: "blue-grey", color: $blue-grey-600, number: "-600"), +// "blue-grey-700": (name: "blue-grey", color: $blue-grey-700, number: "-700"), +// "blue-grey-800": (name: "blue-grey", color: $blue-grey-800, number: "-800"), +// "blue-grey-900": (name: "blue-grey", color: $blue-grey-900, number: "-900"), +// "blue-grey-a100": (name: "blue-grey", color: $blue-grey-a100, number: "-a100"), +// "blue-grey-a200": (name: "blue-grey", color: $blue-grey-a200, number: "-a200"), +// "blue-grey-a400": (name: "blue-grey", color: $blue-grey-a400, number: "-a400"), +// "blue-grey-a700": (name: "blue-grey", color: $blue-grey-a700, number: "-a700"), +// "blue-grey": (name: "blue-grey", color: $blue-grey, number: "") +//); diff --git a/templates/assets/bootstrap-material-design/scss/variables/_colors.scss b/templates/assets/bootstrap-material-design/scss/variables/_colors.scss new file mode 100644 index 0000000..c805cc5 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_colors.scss @@ -0,0 +1,356 @@ +// +//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: #a0f !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: #ff0 !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: #eee !default; +$grey-300: #e0e0e0 !default; +$grey-400: #bdbdbd !default; +$grey-500: #9e9e9e; +$grey-600: #757575 !default; +$grey-700: #616161 !default; +$grey-800: #424242 !default; +$grey-900: #212121 !default; +$grey-a100: #f5f5f5 !default; +$grey-a200: #eee !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: #000; +$white: #fff; diff --git a/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss b/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss new file mode 100644 index 0000000..d30b021 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_drawer.scss @@ -0,0 +1,5 @@ +// Drawer + +// Sizing +$bmd-drawer-x-size: 240px !default; +$bmd-drawer-y-size: 100px !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/_layout.scss b/templates/assets/bootstrap-material-design/scss/variables/_layout.scss new file mode 100644 index 0000000..7cbf784 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_layout.scss @@ -0,0 +1 @@ +// Layout variables - evidently nothing to see here...remove now? diff --git a/templates/assets/bootstrap-material-design/scss/variables/_menu.scss b/templates/assets/bootstrap-material-design/scss/variables/_menu.scss new file mode 100644 index 0000000..54da3c4 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_menu.scss @@ -0,0 +1,18 @@ +$bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec + +$bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp +$bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp +$bmd-menu-item-min-height: 3rem !default; // 48px + +$bmd-menu-item-padding-right: 1rem !default; +$bmd-menu-item-padding-bottom: .8rem !default; +$bmd-menu-item-padding-left: 1rem !default; +$bmd-menu-item-padding-top: .8rem !default; + +// md and up +$bmd-menu-item-padding-right-md: 1.5rem !default; +$bmd-menu-item-padding-left-md: 1.5rem !default; + +// Menu +$bmd-menu-expand-duration: 0.3s !default; +$bmd-menu-fade-duration: 0.2s !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss b/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss new file mode 100644 index 0000000..ef1f786 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/_shadow.scss @@ -0,0 +1,35 @@ +// Shadows (originally from mdl http://www.getmdl.io/) +$bmd-shadow-umbra-opacity: 0.2 !default; +$bmd-shadow-penumbra-opacity: 0.14 !default; +$bmd-shadow-ambient-opacity: 0.12 !default; + +// Declare the following for reuse with both mixins and the bootstrap variables +$bmd-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36); + +$bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity), + 0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity); + +$bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity), + 0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity), + 0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity), + 0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity), + 0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity), + 0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity), + 0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity); + +$bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity), + 0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity), + 0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity); diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss new file mode 100644 index 0000000..0d9fbea --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_body.scss @@ -0,0 +1,6 @@ +// Body +// +// Settings for the `<body>` element. + +$body-bg: #fafafa !default; +//$body-color: $gray-dark !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss new file mode 100644 index 0000000..3ba4a5b --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_brand.scss @@ -0,0 +1,6 @@ +// Bootstrap brand color customization +$brand-primary: $teal !default; +$brand-success: $green !default; +$brand-danger: $red !default; +$brand-warning: $deep-orange !default; +$brand-info: $light-blue !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss new file mode 100644 index 0000000..5823491 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_buttons.scss @@ -0,0 +1,77 @@ +// Buttons: +$bmd-btn-font-size: .875rem !default; // 14px +$bmd-btn-font-size-lg: 1.25rem !default; +$bmd-btn-font-size-sm: .8125rem !default; // 13px +$bmd-btn-margin-bottom: .3125rem !default; // 5px + +// default btn with no specific type designation +$bmd-btn-color: $gray-dark !default; +$bmd-btn-bg: inherit !default; //$body-bg !default; // #fff +$bmd-btn-border: #ccc !default; + +$bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999 +$bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999 +$bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black + +$bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC +$bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC +$bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white + +$bmd-btn-fab-size: 3.5rem !default; // 56px +$bmd-btn-fab-size-sm: 2.5rem !default; // 40px +$bmd-btn-fab-font-size: 1.5rem !default; // 24px + +// icons +$bmd-btn-icon-size: 2rem !default; // 32px +$bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px +$bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background and border color. +$btn-padding-x: 1rem !default; // 1rem +$btn-padding-y: .46875rem !default; // .5rem achieve a 36dp height +//$btn-line-height: 1 !default; //1.25 +$btn-font-weight: 500 !default; // normal +$btn-box-shadow: none !default; +$btn-active-box-shadow: none !default; // inset 0 3px 5px rgba(0,0,0,.125) + +// +//$btn-primary-color: #fff !default; +//$btn-primary-bg: $brand-primary !default; +//$btn-primary-border: $btn-primary-bg !default; +// +$btn-secondary-color: $gray-dark !default; +$btn-secondary-bg: $body-bg !default; // #fff +//$btn-secondary-border: #ccc !default; +// +//$btn-info-color: #fff !default; +//$btn-info-bg: $brand-info !default; +//$btn-info-border: $btn-info-bg !default; +// +//$btn-success-color: #fff !default; +//$btn-success-bg: $brand-success !default; +//$btn-success-border: $btn-success-bg !default; +// +//$btn-warning-color: #fff !default; +//$btn-warning-bg: $brand-warning !default; +//$btn-warning-border: $btn-warning-bg !default; +// +//$btn-danger-color: #fff !default; +//$btn-danger-bg: $brand-danger !default; +//$btn-danger-border: $btn-danger-bg !default; +// +//$btn-link-disabled-color: $gray-light !default; +// +//$btn-padding-x-sm: .5rem !default; +$btn-padding-y-sm: .40625rem !default; // achieve a 32dp height was .25rem +// +//$btn-padding-x-lg: 1.5rem !default; +//$btn-padding-y-lg: .75rem !default; +// +//// Allows for customizing button radius independently from global border radius +//$btn-border-radius: $border-radius !default; +//$btn-border-radius-lg: $border-radius-lg !default; +//$btn-border-radius-sm: $border-radius-sm !default; + diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss new file mode 100644 index 0000000..6c18fba --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_card.scss @@ -0,0 +1,13 @@ +// Cards +//$card-spacer-x: 1.25rem !default; +//$card-spacer-y: .75rem !default; +//$card-border-width: 1px !default; +//$card-border-radius: $border-radius !default; +$card-border-color: $gray-lighter !default; // #e5e5e5 +//$card-border-radius-inner: $card-border-radius !default; +$card-bg: #fff !default; +$card-cap-bg: $card-bg !default; // #f5f5f5 +// +//$card-link-hover-color: #fff !default; +// +//$card-deck-margin: .625rem !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss new file mode 100644 index 0000000..9e10188 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_code.scss @@ -0,0 +1,12 @@ +// Code + +//$code-color: #bd4147 !default; +$code-bg: $grey-200 !default; // #f7f7f9 !default; + +//$kbd-color: #fff !default; +//$kbd-bg: #333 !default; +// +//$pre-bg: #f7f7f9 !default; +//$pre-color: $gray-dark !default; +//$pre-border-color: #ccc !default; +//$pre-scrollable-max-height: 340px !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss new file mode 100644 index 0000000..ff03bdb --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_components.scss @@ -0,0 +1,16 @@ +// Components +// +// Define common padding and border radius sizes and more. + +//$line-height-lg: (4 / 3) !default; +//$line-height-sm: 1.5 !default; +// +$border-radius: .125rem !default; // .25rem !default; +//$border-radius-lg: .3rem !default; +$border-radius-sm: .0625rem !default; // .2rem !default; +// +//$component-active-color: #fff !default; +//$component-active-bg: $brand-primary !default; +// +//$caret-width: .3em !default; +//$caret-width-lg: $caret-width !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss new file mode 100644 index 0000000..d6f3644 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_custom-forms.scss @@ -0,0 +1,5 @@ +$custom-file-bg: transparent !default; +$custom-file-border-width: 0 !default; +$custom-file-box-shadow: none !default; +$custom-file-border-radius: 0 !default; +$custom-file-line-height: 1.3 !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss new file mode 100644 index 0000000..67ac5ec --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_dropdown.scss @@ -0,0 +1,20 @@ +// Dropdowns +// +// Dropdown menu container and contents. + +//$dropdown-bg: #fff !default; +//$dropdown-border-color: rgba(0,0,0,.15) !default; +//$dropdown-border-width: $border-width !default; +//$dropdown-divider-bg: #e5e5e5 !default; +$dropdown-box-shadow: $bmd-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default; +// +//$dropdown-link-color: $gray-dark !default; +//$dropdown-link-hover-color: darken($gray-dark, 5%) !default; +//$dropdown-link-hover-bg: #f5f5f5 !default; +// +//$dropdown-link-active-color: $component-active-color !default; +//$dropdown-link-active-bg: $component-active-bg !default; +// +//$dropdown-link-disabled-color: $gray-light !default; +// +//$dropdown-header-color: $gray-light !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss new file mode 100644 index 0000000..425008e --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_forms.scss @@ -0,0 +1,47 @@ +// Forms + +// +$input-bg: rgba($black, 0) !default; // #fff !default; +$input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default; +// +//$input-color: $gray !default; +$input-border-color: $gray-light !default; // #ccc !default; +//$input-btn-border-width: $border-width !default; // For form controls and buttons +$input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default; +// +$input-border-radius: 0 !default; // $border-radius !default; +//$input-border-radius-lg: $border-radius-lg !default; +//$input-border-radius-sm: $border-radius-sm !default; +// +//$input-border-focus: #66afe9 !default; +$input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default; +// +$input-color-placeholder: $bmd-label-color !default; // #999 !default; + + + +$input-padding-x: 0 !default; // .75rem !default; +$input-padding-y: .4375rem !default; // spec 8px // .375rem !default; + +$input-padding-x-sm: 0 !default; // .75rem !default; +$input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default; + +$input-padding-x-lg: 0 !default; // 1.25rem !default; +$input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !default; + +//$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; +//$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; +//$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; +// +//$form-group-margin-bottom: $spacer-y !default; +// +$input-group-addon-bg: transparent !default; //$gray-lighter !default; +$input-group-addon-border-color: transparent !default; //$input-border-color !default; +// +//$cursor-disabled: not-allowed !default; +// +//// Form validation icons +//$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg=="; +//$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+"; +//$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4="; + diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss new file mode 100644 index 0000000..b8e1ed8 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_list-group.scss @@ -0,0 +1,21 @@ +// List group + +$list-group-bg: inherit !default; // #fff +//$list-group-border-color: #ddd !default; +$list-group-border-width: 0 !default; // $border-width +$list-group-border-radius: 0 !default; // $border-radius +// +//$list-group-hover-bg: #f5f5f5 !default; +//$list-group-active-color: $component-active-color !default; +//$list-group-active-bg: $component-active-bg !default; +//$list-group-active-border: $list-group-active-bg !default; +//$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; +// +//$list-group-disabled-color: $gray-light !default; +//$list-group-disabled-bg: $gray-lighter !default; +//$list-group-disabled-text-color: $list-group-disabled-color !default; +// +//$list-group-link-color: #555 !default; +//$list-group-link-hover-color: $list-group-link-color !default; +//$list-group-link-heading-color: #333 !default; + diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss new file mode 100644 index 0000000..6585799 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_modals.scss @@ -0,0 +1,20 @@ +// Modals +$modal-content-xs-box-shadow: $bmd-shadow-24dp !default; + +// Padding applied to the modal body +//$modal-inner-padding: 15px !default; +// +//$modal-title-padding: 15px !default; +//$modal-title-line-height: $line-height-base !default; +// +//$modal-content-bg: #fff !default; +//$modal-content-border-color: rgba(0,0,0,.2) !default; +// +//$modal-backdrop-bg: #000 !default; +$modal-backdrop-opacity: .26 !default; // .5 +//$modal-header-border-color: #e5e5e5 !default; +//$modal-footer-border-color: $modal-header-border-color !default; +// +//$modal-lg: 900px !default; +//$modal-md: 600px !default; +//$modal-sm: 300px !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss new file mode 100644 index 0000000..3334006 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_nav.scss @@ -0,0 +1,62 @@ +// Navs https://www.google.com/design/spec/components/tabs.html#tabs-specs + +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; + +$bmd-navbar-link-font-weight: $bmd-font-weight-base !default; // +$bmd-navbar-link-font-size: .875rem !default; // 14 +$bmd-navbar-link-padding: .5321rem; // 7 + + +// tabs & pills +$bmd-nav-tabs-pills-font-weight: 500 !default; // +$bmd-nav-tabs-pills-font-size: .875rem !default; // 14 +$bmd-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14 + +// tabs only +$bmd-nav-tabs-border-size: .214rem !default; // 3px + +$bmd-nav-tabs-color: $gray !default; +$bmd-nav-tabs-active-color: $gray-dark !default; +$bmd-nav-tabs-active-border-color: $brand-primary !default; +$bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default; +$bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default; + +$bmd-nav-tabs-primary-color: $bmd-inverse !default; +$bmd-nav-tabs-primary-active-color: #fff !default; +$bmd-nav-tabs-primary-active-border-color: #fff !default; +$bmd-nav-tabs-primary-disabled-link-color: $bmd-inverse-light !default; +$bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-inverse-light !default; + +$bmd-nav-tabs-inverse-color: $bmd-inverse !default; +$bmd-nav-tabs-inverse-active-color: #fff !default; +$bmd-nav-tabs-inverse-active-border-color: #fff !default; +$bmd-nav-tabs-inverse-disabled-link-color: $bmd-inverse-light !default; +$bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-inverse-light !default; + + +//$nav-item-margin: .2rem !default; + + + +//$bmd-nav-link-line-height: 1 !default; // makes it easier to line up with the spec +//$nav-link-padding: .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity +//$nav-link-hover-bg: $gray-lighter !default; + + +// +//$nav-tabs-border-color: #ddd !default; +// +//$nav-tabs-link-border-width: $border-width !default; +//$nav-tabs-link-hover-border-color: $gray-lighter !default; +// +$nav-tabs-active-link-hover-bg: transparent !default; // $body-bg +//$nav-tabs-active-link-hover-color: $gray !default; +//$nav-tabs-active-link-hover-border-color: #ddd !default; +// +//$nav-tabs-justified-link-border-color: #ddd !default; +//$nav-tabs-justified-active-link-border-color: $body-bg !default; +// +//$nav-pills-border-radius: $border-radius !default; +//$nav-pills-active-link-hover-bg: $component-active-bg !default; +//$nav-pills-active-link-hover-color: $component-active-color !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss new file mode 100644 index 0000000..e55ec27 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_pagination.scss @@ -0,0 +1,6 @@ +$pagination-border-width: 0; +$pagination-bg: transparent; +$pagination-disabled-bg: transparent; + +$pagination-padding-x-lg: 0; +$pagination-padding-x-sm: 0; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss new file mode 100644 index 0000000..4032860 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_spacing.scss @@ -0,0 +1,26 @@ +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: .5rem !default; // 1rem !default; // $form-group-margin-bottom uses $spacer-y. Decided to try this globally and see how it works out. +//$spacer-x: $spacer !default; +//$spacer-y: $spacer !default; +//$spacers: ( +// 0: ( +// x: 0, +// y: 0 +// ), +// 1: ( +// x: $spacer-x, +// y: $spacer-y +// ), +// 2: ( +// x: ($spacer-x * 1.5), +// y: ($spacer-y * 1.5) +// ), +// 3: ( +// x: ($spacer-x * 3), +// y: ($spacer-y * 3) +// ) +//) !default; diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss new file mode 100644 index 0000000..0037a2b --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_state.scss @@ -0,0 +1,15 @@ +// Form states and alerts +// +// Define colors for form feedback states and, by default, alerts. +$state-success-text: $bmd-inverse !default; +$state-success-bg: $brand-success !default; + +$state-info-text: $bmd-inverse !default; +$state-info-bg: $brand-info !default; + +$state-warning-text: $bmd-inverse !default; +$state-warning-bg: $brand-warning !default; + +$state-danger-text: $bmd-inverse !default; +$state-danger-bg: $brand-danger !default; + diff --git a/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss new file mode 100644 index 0000000..22b2289 --- /dev/null +++ b/templates/assets/bootstrap-material-design/scss/variables/bootstrap/_type.scss @@ -0,0 +1,66 @@ +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// https://www.google.com/design/spec/style/typography.html#typography-styles +// http://www.getmdl.io/styles/index.html + +$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; +//$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +//$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +//$font-family-base: $font-family-sans-serif !default; + +// Pixel value used to responsively scale all typography. Applied to the `<html>` element. +//$font-size-root: 16px !default; +// +//$font-size-base: 1rem !default; +//$font-size-lg: 1.25rem !default; +//$font-size-sm: .875rem !default; +//$font-size-xs: .75rem !default; +// +//$font-size-h1: 2.5rem !default; +//$font-size-h2: 2rem !default; +//$font-size-h3: 1.75rem !default; +//$font-size-h4: 1.5rem !default; +//$font-size-h5: 1.25rem !default; +//$font-size-h6: 1rem !default; +// +$display1-size: 7rem !default; // md display-4 112px was 6rem; +$display2-size: 3.5rem !default; // md display-3 56px was 5.5rem +$display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem +$display4-size: 2.125rem !default; // md display-1 34px was 3.5rem +// +//$display1-weight: 300 !default; +//$display2-weight: 300 !default; +//$display3-weight: 300 !default; +//$display4-weight: 300 !default; +// +//$line-height-base: 1.5 !default; +// +//$headings-margin-bottom: ($spacer / 2) !default; +//$headings-font-family: inherit !default; +$headings-font-weight: 400 !default; // was 500 +//$headings-line-height: 1.1 !default; +//$headings-color: inherit !default; +// +//$lead-font-size: 1.25rem !default; +//$lead-font-weight: 300 !default; +// +//$text-muted: $gray-light !default; +// +//$abbr-border-color: $gray-light !default; +// +//$blockquote-small-color: $gray-light !default; +//$blockquote-font-size: ($font-size-base * 1.25) !default; +//$blockquote-border-color: $gray-lighter !default; +// +//$hr-border-color: rgba(0,0,0,.1) !default; +//$hr-border-width: $border-width !default; +// +//$list-inline-padding: 5px !default; +// +//$dt-font-weight: bold !default; +// +//$nested-kbd-font-weight: bold !default; + + |