mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-13 05:07:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Quick Fix for issue #1300 (#1370)

Browse Source 
Quick Fix for issue #1300
This commit is contained in:
Federico Zivolo 2019-07-15 22:36:29 +02:00 committed by GitHub
commit 4c3921fed5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 111 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
scss/mixins/_drawer.scss
View File

@ -1,9 +1,11 @@
// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
@mixin bmd-drawer-x-out($size) { @mixin bmd-drawer-x-out($size) {
@each $side, $abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
> .bmd-layout-drawer { $abbrev in (left: l, right: r) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
>.bmd-layout-drawer {
// position // position
top: 0; top: 0;
#{$side}: 0; #{$side}: 0;
@ -11,19 +13,17 @@
width: $size; width: $size;
height: 100%; height: 100%;
@if $side == left { @if $side==left {
transform: translateX( transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
-$size - 10px }
); // initial position of drawer (closed), way off screen
} @else { @else {
transform: translateX( transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
$size + 10px
); // initial position of drawer (closed), way off screen
} }
} }
> .bmd-layout-header, >.bmd-layout-header,
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
@ -31,9 +31,11 @@
} }
@mixin bmd-drawer-y-out($size) { @mixin bmd-drawer-y-out($size) {
@each $side, $abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
> .bmd-layout-drawer { $abbrev in (top: t, bottom: b) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
>.bmd-layout-drawer {
// position // position
#{$side}: 0; #{$side}: 0;
left: 0; left: 0;
@ -41,18 +43,16 @@
width: 100%; width: 100%;
height: $size; height: $size;
@if $side == top { @if $side==top {
transform: translateY( transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
-$size - 10px }
); // initial position of drawer (closed), way off screen
} @else { @else {
transform: translateY( transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
$size + 10px
); // initial position of drawer (closed), way off screen
} }
} }
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
@ -62,26 +62,31 @@
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") { @function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
// e.g. &, &-sm, &-md, &-lg // e.g. &, &-sm, &-md, &-lg
$name: "&-#{$breakpoint}#{$suffix}"; $name: "&-#{$breakpoint}#{$suffix}";
@if $breakpoint == xs {
@if $breakpoint==xs {
$name: "&"; $name: "&";
} }
@return $name; @return $name;
} }
@mixin bmd-drawer-x-in($size) { @mixin bmd-drawer-x-in($size) {
@each $side, $abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
$abbrev in (left: l, right: r) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
// Push - drawer will push the header and content (default behavior) // Push - drawer will push the header and content (default behavior)
> .bmd-layout-header { >.bmd-layout-header {
width: calc(100% - #{$size}); width: calc(100% - #{$size});
margin-#{$side}: $size; margin-#{$side}: $size;
} }
> .bmd-layout-drawer { >.bmd-layout-drawer {
transform: translateX(0); transform: translateX(0);
} }
> .bmd-layout-content { >.bmd-layout-content {
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
@ -89,22 +94,25 @@
} }
@mixin bmd-drawer-y-in($size) { @mixin bmd-drawer-y-in($size) {
@each $side, $abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { @each $side,
$abbrev in (top: t, bottom: b) {
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
// 1. Push - drawer will push the header or content // 1. Push - drawer will push the header or content
> .bmd-layout-header { >.bmd-layout-header {
@if $side == top { @if $side==top {
// only add margin-top on a header when the drawer is at the top // only add margin-top on a header when the drawer is at the top
margin-#{$side}: $size; margin-#{$side}: $size;
} }
} }
> .bmd-layout-drawer { >.bmd-layout-drawer {
transform: translateY(0); transform: translateY(0);
} }
> .bmd-layout-content { >.bmd-layout-content {
@if $side == bottom { @if $side==bottom {
// only add margin-bottom on content when the drawer is at the bottom // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: $size; margin-#{$side}: $size;
} }
@ -122,10 +130,13 @@
#{unquote($name)} { #{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint==xs {
// bmd-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-x-in($size); @include bmd-drawer-x-in($size);
} @else { }
@else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@ -145,10 +156,13 @@
#{unquote($name)} { #{unquote($name)} {
// bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
@if $breakpoint == xs { @if $breakpoint==xs {
// bmd-drawer-in marker class (non-responsive) // bmd-drawer-in marker class (non-responsive)
@include bmd-drawer-y-in($size); @include bmd-drawer-y-in($size);
} @else { }
@else {
// responsive class // responsive class
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
// bmd-drawer-f-(left and right) styles // bmd-drawer-f-(left and right) styles
@ -162,10 +176,12 @@
@mixin bmd-drawer-x-overlay() { @mixin bmd-drawer-x-overlay() {
@include bmd-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (left: l, right: r) { @each $side,
$abbrev in (left: l, right: r) {
&.bmd-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header,
> .bmd-layout-content { >.bmd-layout-header,
>.bmd-layout-content {
width: 100%; width: 100%;
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -176,17 +192,18 @@
@mixin bmd-drawer-y-overlay() { @mixin bmd-drawer-y-overlay() {
@include bmd-layout-backdrop-in(); @include bmd-layout-backdrop-in();
@each $side, $abbrev in (top: t, bottom: b) { @each $side,
$abbrev in (top: t, bottom: b) {
&.bmd-drawer-f-#{$abbrev} { &.bmd-drawer-f-#{$abbrev} {
> .bmd-layout-header { >.bmd-layout-header {
@if $side == top { @if $side==top {
// only add margin-top on a header when the drawer is at the top // only add margin-top on a header when the drawer is at the top
margin-#{$side}: 0; margin-#{$side}: 0;
} }
} }
> .bmd-layout-content { >.bmd-layout-content {
@if $side == bottom { @if $side==bottom {
// only add margin-bottom on content when the drawer is at the bottom // only add margin-bottom on content when the drawer is at the bottom
margin-#{$side}: 0; margin-#{$side}: 0;
} }
@ -206,7 +223,7 @@
// x - left/right // x - left/right
@if $breakpoint == xs { @if $breakpoint==xs {
// overlay marker class (non-responsive) // overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@ -214,7 +231,9 @@
&.bmd-drawer-overlay { &.bmd-drawer-overlay {
@include bmd-drawer-x-overlay(); @include bmd-drawer-x-overlay();
} }
} @else { }
@else {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
// overlay responsive class // overlay responsive class
@include bmd-drawer-x-overlay(); @include bmd-drawer-x-overlay();
@ -234,7 +253,7 @@
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
//// y - top/bottom //// y - top/bottom
@if $breakpoint == xs { @if $breakpoint==xs {
// overlay marker class (non-responsive) // overlay marker class (non-responsive)
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@ -242,7 +261,9 @@
&.bmd-drawer-overlay { &.bmd-drawer-overlay {
@include bmd-drawer-y-overlay(); @include bmd-drawer-y-overlay();
} }
} @else { }
@else {
@include media-breakpoint-down($breakpoint) { @include media-breakpoint-down($breakpoint) {
// overlay responsive class // overlay responsive class
@include bmd-drawer-y-overlay(); @include bmd-drawer-y-overlay();

77
scss/mixins/_forms.scss
View File

@ -1,4 +1,5 @@
@mixin bmd-disabled() { @mixin bmd-disabled() {
fieldset[disabled][disabled] &, fieldset[disabled][disabled] &,
&.disabled, &.disabled,
&:disabled, &:disabled,
@ -8,6 +9,7 @@
} }
@mixin bmd-selection-color() { @mixin bmd-selection-color() {
.radio label, .radio label,
.radio-inline, .radio-inline,
.checkbox label, .checkbox label,
@ -34,6 +36,7 @@
label:has(input[type=checkbox][disabled]), label:has(input[type=checkbox][disabled]),
// css 4 // css 4
fieldset[disabled] & { fieldset[disabled] & {
&, &,
&:hover, &:hover,
&:focus { &:focus {
@ -57,12 +60,14 @@
&::after { &::after {
border-color: $color; border-color: $color;
} }
&::before { &::before {
background-color: $color; background-color: $color;
} }
} }
@mixin bmd-form-color($label-color, $label-color-focus, $border-color) { @mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
[class^='bmd-label'], [class^='bmd-label'],
[class*=' bmd-label'] { [class*=' bmd-label'] {
color: $label-color; color: $label-color;
@ -71,43 +76,29 @@
// override BS and keep the border-color normal/grey so that overlaid focus animation draws attention // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
.form-control { .form-control {
// underline animation color on focus // underline animation color on focus
$underline-background-image: linear-gradient( $underline-background-image: linear-gradient(to top,
to top,
$label-color-focus 2px, $label-color-focus 2px,
fade-out($label-color-focus, 1) 2px fade-out($label-color-focus, 1) 2px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-invalid: linear-gradient(to top,
$underline-background-image-invalid: linear-gradient(
to top,
$bmd-invalid-underline 2px, $bmd-invalid-underline 2px,
fade-out($bmd-invalid-underline, 1) 2px fade-out($bmd-invalid-underline, 1) 2px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-readonly: linear-gradient(to top,
$underline-background-image-readonly: linear-gradient(
to top,
$bmd-readonly-underline 1px, $bmd-readonly-underline 1px,
fade-out($bmd-readonly-underline, 1) 1px fade-out($bmd-readonly-underline, 1) 1px),
), linear-gradient(to top,
linear-gradient(
to top,
$input-border-color 1px, $input-border-color 1px,
fade-out($input-border-color, 1) 1px fade-out($input-border-color, 1) 1px);
); $underline-background-image-disabled: linear-gradient(to right,
$underline-background-image-disabled: linear-gradient( $input-border-color 0%,
to right, $input-border-color 30%,
$input-border-color 0%, transparent 30%,
$input-border-color 30%, transparent 100%);
transparent 30%,
transparent 100%
);
// bg image is always there, we just need to reveal it // bg image is always there, we just need to reveal it
&, &,
@ -131,18 +122,23 @@
// allow underline focus image and validation images to coexist // allow underline focus image and validation images to coexist
&.form-control-success { &.form-control-success {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-success; background-image: $underline-background-image, $form-icon-success;
} }
} }
&.form-control-warning { &.form-control-warning {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-warning; background-image: $underline-background-image, $form-icon-warning;
} }
} }
&.form-control-danger { &.form-control-danger {
&, &,
.is-focused & { .is-focused & {
background-image: $underline-background-image, $form-icon-danger; background-image: $underline-background-image, $form-icon-danger;
@ -152,7 +148,7 @@
.is-focused, .is-focused,
// may or may not be a form-group or bmd-form-group // may or may not be a form-group or bmd-form-group
&.is-focused { #{if(&, "&", "*")}.is-focused {
// on focus set borders and labels to the validation color // on focus set borders and labels to the validation color
// Use the BS provided mixin for the bulk of the color // Use the BS provided mixin for the bulk of the color
@ -192,15 +188,12 @@
} }
@mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) { @mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
$variant-input-height: ( $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
($font-size * $variant-line-height) + ($variant-padding-y * 2)
);
$static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size); $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
$help-font-size: ($bmd-help-size-ratio * $font-size); $help-font-size: ($bmd-help-size-ratio * $font-size);
$label-static-top: $label-top-margin; $label-static-top: $label-top-margin;
$label-placeholder-top: $label-top-margin + $static-font-size + $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
$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} "; //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
@ -246,8 +239,8 @@
// across browsers // across browsers
input.form-control, input.form-control,
input.form-control::placeholder { input.form-control::placeholder {
padding:0.28125rem 0; padding: 0.28125rem 0;
line-height:1.5; line-height: 1.5;
} }
.radio label, .radio label,
@ -278,9 +271,9 @@
} }
// floating focused/filled will look like static // floating focused/filled will look like static
&.is-focused, #{if(&, "&", "*")}.is-focused,
.is-focused, .is-focused,
&.is-filled, #{if(&, "&", "*")}.is-filled,
.is-filled { .is-filled {
.bmd-label-floating { .bmd-label-floating {
@include bmd-label-static($label-static-top, $static-font-size); @include bmd-label-static($label-static-top, $static-font-size);
@ -291,6 +284,7 @@
.bmd-label-static { .bmd-label-static {
@include bmd-label-static($label-static-top, $static-font-size); @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 // #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 //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); // @include bmd-label-static($label-top, $static-font-size, $static-line-height);
@ -303,6 +297,7 @@
// validation icon placement // validation icon placement
.form-control { .form-control {
&.form-control-success, &.form-control-success,
&.form-control-warning, &.form-control-warning,
&.form-control-danger { &.form-control-danger {