mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-26 07:59:47 +03:00
fix issue for compiling package
This commit is contained in:
Majid Abdolhosseini
parent
da0896d825
commit
fcabb79b73
|
|
@ -1,120 +1,253 @@
|
||||||
// Implementation specification in https://github.com/FezVrasta/bootstrap-material-design/issues/822
|
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
|
||||||
|
|
||||||
// Drawer.
|
@mixin bmd-drawer-x-out($size) {
|
||||||
.bmd-layout-drawer {
|
@each $side, $abbrev in (left: l, right: r) {
|
||||||
position: absolute;
|
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
|
||||||
z-index: 5; // over a header and content
|
> .bmd-layout-drawer {
|
||||||
box-sizing: border-box;
|
// position
|
||||||
display: flex;
|
top: 0;
|
||||||
|
#{$side}: 0;
|
||||||
|
|
||||||
flex-direction: column;
|
width: $size;
|
||||||
flex-wrap: nowrap;
|
height: 100%;
|
||||||
|
|
||||||
max-height: 100%;
|
@if $side == left {
|
||||||
overflow: visible;
|
transform: translateX(
|
||||||
overflow-y: auto;
|
-$size - 10px
|
||||||
font-size: .875rem;
|
); // initial position of drawer (closed), way off screen
|
||||||
background: $bmd-layout-drawer-bg-color;
|
} @else {
|
||||||
|
transform: translateX(
|
||||||
|
$size + 10px
|
||||||
|
); // initial position of drawer (closed), way off screen
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Transform offscreen.
|
> .bmd-layout-header,
|
||||||
transition: transform;
|
> .bmd-layout-content {
|
||||||
will-change: transform;
|
margin-#{$side}: 0;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//----------------
|
@mixin bmd-drawer-y-out($size) {
|
||||||
// Sizing and positioning below here
|
@each $side, $abbrev in (top: t, bottom: b) {
|
||||||
|
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
|
||||||
|
> .bmd-layout-drawer {
|
||||||
|
// position
|
||||||
|
#{$side}: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
// for left or right drawers, setup widths, heights and positions
|
width: 100%;
|
||||||
@include bmd-drawer-x-out($bmd-drawer-x-size);
|
height: $size;
|
||||||
|
|
||||||
// for top or bottom drawers, setup widths, heights and positions
|
@if $side == top {
|
||||||
@include bmd-drawer-y-out($bmd-drawer-y-size);
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Marker class for both triggering the opening of the drawer (i.e. javascript #addClass('.bmd-drawer-in')), as well
|
> .bmd-layout-content {
|
||||||
// as responsive sizes (i.e. bmd-drawer-in-md will open once the browser is wider than 768px).
|
margin-#{$side}: 0;
|
||||||
//
|
}
|
||||||
//
|
}
|
||||||
// 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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
////----
|
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
|
||||||
//// Example 1: creates a media responsive kitchen-sink-drawer that pairs with bmd-drawer-in-lg and allows for the bmd-drawer-in trigger
|
// e.g. &, &-sm, &-md, &-lg
|
||||||
//.kitchen-sink-drawer {
|
$name: "&-#{$breakpoint}#{$suffix}";
|
||||||
// $custom-size: 500px;
|
@if $breakpoint == xs {
|
||||||
// @include bmd-drawer-x-out($custom-size);
|
$name: "&";
|
||||||
// &:not(.bmd-drawer-out) {
|
}
|
||||||
// @each $breakpoint in map-keys($grid-breakpoints) {
|
@return $name;
|
||||||
// @include bmd-drawer-x-in-up($custom-size, $breakpoint);
|
}
|
||||||
// }
|
|
||||||
// }
|
@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 {
|
||||||
//// Example 2: creates a NON-responsive kitchen-sink-drawer and allows for the bmd-drawer-in trigger
|
width: calc(100% - #{$size});
|
||||||
//.kitchen-sink-drawer-static {
|
margin-#{$side}: $size;
|
||||||
// $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
|
> .bmd-layout-drawer {
|
||||||
// @include bmd-drawer-x-overlay(); // overlay by default, no other classes necessary
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
502
scss/_forms.scss
502
scss/_forms.scss
|
|
@ -1,229 +1,317 @@
|
||||||
form {
|
@mixin bmd-disabled() {
|
||||||
// ensure enough room at the bottom of any form to display a one-line bmd-help
|
fieldset[disabled][disabled] &,
|
||||||
margin-bottom: ($bmd-help-size-ratio * $font-size-base) * $line-height-base;
|
&.disabled,
|
||||||
|
&:disabled,
|
||||||
// reverse the above for navbars (no help expected in a navbar form)
|
&[disabled] {
|
||||||
.navbar & {
|
@content;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// -----
|
@mixin bmd-selection-color() {
|
||||||
// Inputs
|
.radio label,
|
||||||
//
|
.radio-inline,
|
||||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
.checkbox label,
|
||||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
.checkbox-inline,
|
||||||
.form-control {
|
.switch label {
|
||||||
background: $bmd-form-control-bg-repeat-y $bmd-form-control-bg-position;
|
// override bootstrap focus and keep all the standard color (could be multiple radios in the form group)
|
||||||
background-size: $bmd-form-control-bg-size;
|
//color: $bmd-label-color;
|
||||||
border: 0;
|
|
||||||
transition: background 0s ease-out;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
// The border bottom should be static in all states, the decorator will be animated over this.
|
&,
|
||||||
&:focus,
|
.is-focused & {
|
||||||
.bmd-form-group.is-focused & {
|
// form-group focus could change multiple checkboxes/radios, disable that change by using the same color as non-form-group is-focused
|
||||||
background-size: $bmd-form-control-bg-size-active;
|
color: $bmd-label-color;
|
||||||
//border-bottom: $input-btn-border-width solid $input-border-color;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Help blocks (not in v4)
|
// on focus just darken the specific labels, do not turn them to the brand-primary
|
||||||
// position: absolute approach - uses no vertical space and there is no form jumping, but text wrapping - not so good.
|
@include hover-focus-active() {
|
||||||
// FIXME: width/wrapping isn't automatic and overflows occur. What are some solutions?
|
//&:hover,
|
||||||
//
|
//&:focus {
|
||||||
.bmd-help {
|
color: $bmd-label-color-inner-focus;
|
||||||
position: absolute;
|
}
|
||||||
display: none;
|
|
||||||
font-size: .8rem;
|
|
||||||
font-weight: normal;
|
|
||||||
@extend .text-muted;
|
|
||||||
|
|
||||||
.bmd-form-group.is-focused & {
|
// correct the above focus color for disabled items
|
||||||
display: block;
|
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
|
||||||
// Multiple help blocks
|
fieldset[disabled] & {
|
||||||
// - absolute positioning is used above to prevent bouncing
|
&,
|
||||||
// - when there is more than one, this will bounce but will at least show
|
&:hover,
|
||||||
&:nth-of-type(2) {
|
&:focus {
|
||||||
padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
|
color: $bmd-label-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ .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(theme-color(success), theme-color(success), theme-color(success));
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-info {
|
|
||||||
@include bmd-form-color(theme-color(info), theme-color(info), theme-color(info));
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-warning {
|
|
||||||
@include bmd-form-color(theme-color(warning), theme-color(warning), theme-color(warning));
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-danger {
|
|
||||||
@include bmd-form-color(theme-color(danger), theme-color(danger), theme-color(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 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0; // get rid of any padding as this is a width transition
|
|
||||||
min-height: 2.1em;
|
|
||||||
|
|
||||||
// Expandable Holder.
|
|
||||||
.collapse {
|
|
||||||
flex: 1;
|
|
||||||
display: none;
|
|
||||||
&.show {
|
|
||||||
// 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: 1200px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapsing,
|
|
||||||
.width:not(.collapse),
|
|
||||||
// collapsing is removed and momentarily only width is present
|
|
||||||
.collapse.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsing {
|
|
||||||
@include material-animation-default();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// default floating size/location with an bmd-form-group
|
// Style for disabled inputs OLD, use color approach with opacity built in, see radios
|
||||||
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height, "bmd-form-group default");
|
//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;
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
// sm floating size/location
|
@mixin bmd-radio-color($color) {
|
||||||
&.bmd-form-group-sm {
|
&::after {
|
||||||
@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");
|
border-color: $color;
|
||||||
}
|
}
|
||||||
|
&::before {
|
||||||
// lg floating size/location
|
background-color: $color;
|
||||||
&.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
|
@mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
|
||||||
@include bmd-form-size-variant($font-size-base, $bmd-label-top-margin-base, $input-padding-y, $bmd-form-line-height);
|
[class^='bmd-label'],
|
||||||
|
[class*=' bmd-label'] {
|
||||||
select {
|
color: $label-color;
|
||||||
&,
|
|
||||||
&.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.
|
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
|
||||||
//.bmd-form-group input[type=file] {
|
.form-control {
|
||||||
// opacity: 0;
|
// underline animation color on focus
|
||||||
// position: absolute;
|
$underline-background-image: linear-gradient(
|
||||||
// top: 0;
|
to top,
|
||||||
// right: 0;
|
$label-color-focus 2px,
|
||||||
// bottom: 0;
|
fade-out($label-color-focus, 1) 2px
|
||||||
// left: 0;
|
),
|
||||||
// width: 100%;
|
linear-gradient(
|
||||||
// height: 100%;
|
to top,
|
||||||
// z-index: 100;
|
$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
|
||||||
//
|
&,
|
||||||
//.form-horizontal {
|
.is-focused & {
|
||||||
//
|
background-image: $underline-background-image;
|
||||||
// // 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 {
|
&:invalid {
|
||||||
@include media-breakpoint-up(sm) {
|
background-image: $underline-background-image-invalid;
|
||||||
.input-group {
|
}
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
&: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
|
||||||
|
#{if(&, "&", "*")}.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-validation-state("valid", $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
|
||||||
|
#{if(&, "&", "*")}.is-focused,
|
||||||
|
.is-focused,
|
||||||
|
#{if(&, "&", "*")}.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user