mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
Federico Zivolo
GitHub
commit
4c3921fed5
|
|
@ -1,9 +1,11 @@
|
|||
// 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 {
|
||||
|
||||
@each $side,
|
||||
$abbrev in (left: l, right: r) {
|
||||
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
|
||||
>.bmd-layout-drawer {
|
||||
// position
|
||||
top: 0;
|
||||
#{$side}: 0;
|
||||
|
|
@ -11,19 +13,17 @@
|
|||
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
|
||||
@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 {
|
||||
>.bmd-layout-header,
|
||||
>.bmd-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -31,9 +31,11 @@
|
|||
}
|
||||
|
||||
@mixin bmd-drawer-y-out($size) {
|
||||
@each $side, $abbrev in (top: t, bottom: b) {
|
||||
&.bmd-drawer-f-#{$abbrev} {
|
||||
> .bmd-layout-drawer {
|
||||
|
||||
@each $side,
|
||||
$abbrev in (top: t, bottom: b) {
|
||||
#{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
|
||||
>.bmd-layout-drawer {
|
||||
// position
|
||||
#{$side}: 0;
|
||||
left: 0;
|
||||
|
|
@ -41,18 +43,16 @@
|
|||
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
|
||||
@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 {
|
||||
>.bmd-layout-content {
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -62,26 +62,31 @@
|
|||
@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
|
||||
// e.g. &, &-sm, &-md, &-lg
|
||||
$name: "&-#{$breakpoint}#{$suffix}";
|
||||
@if $breakpoint == xs {
|
||||
|
||||
@if $breakpoint==xs {
|
||||
$name: "&";
|
||||
}
|
||||
|
||||
@return $name;
|
||||
}
|
||||
|
||||
@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)
|
||||
> .bmd-layout-header {
|
||||
>.bmd-layout-header {
|
||||
width: calc(100% - #{$size});
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
|
||||
> .bmd-layout-drawer {
|
||||
>.bmd-layout-drawer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
>.bmd-layout-content {
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
}
|
||||
|
|
@ -89,22 +94,25 @@
|
|||
}
|
||||
|
||||
@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
|
||||
> .bmd-layout-header {
|
||||
@if $side == top {
|
||||
>.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 {
|
||||
>.bmd-layout-drawer {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
> .bmd-layout-content {
|
||||
@if $side == bottom {
|
||||
>.bmd-layout-content {
|
||||
@if $side==bottom {
|
||||
// only add margin-bottom on content when the drawer is at the bottom
|
||||
margin-#{$side}: $size;
|
||||
}
|
||||
|
|
@ -122,10 +130,13 @@
|
|||
#{unquote($name)} {
|
||||
// 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)
|
||||
@include bmd-drawer-x-in($size);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// bmd-drawer-f-(left and right) styles
|
||||
|
|
@ -145,10 +156,13 @@
|
|||
#{unquote($name)} {
|
||||
// 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)
|
||||
@include bmd-drawer-y-in($size);
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
|
||||
// responsive class
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
// bmd-drawer-f-(left and right) styles
|
||||
|
|
@ -162,10 +176,12 @@
|
|||
@mixin bmd-drawer-x-overlay() {
|
||||
@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-layout-header,
|
||||
> .bmd-layout-content {
|
||||
|
||||
>.bmd-layout-header,
|
||||
>.bmd-layout-content {
|
||||
width: 100%;
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
|
|
@ -176,17 +192,18 @@
|
|||
@mixin bmd-drawer-y-overlay() {
|
||||
@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-layout-header {
|
||||
@if $side == top {
|
||||
>.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 {
|
||||
>.bmd-layout-content {
|
||||
@if $side==bottom {
|
||||
// only add margin-bottom on content when the drawer is at the bottom
|
||||
margin-#{$side}: 0;
|
||||
}
|
||||
|
|
@ -206,7 +223,7 @@
|
|||
|
||||
// x - left/right
|
||||
|
||||
@if $breakpoint == xs {
|
||||
@if $breakpoint==xs {
|
||||
// overlay marker class (non-responsive)
|
||||
|
||||
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
|
||||
|
|
@ -214,7 +231,9 @@
|
|||
&.bmd-drawer-overlay {
|
||||
@include bmd-drawer-x-overlay();
|
||||
}
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
// overlay responsive class
|
||||
@include bmd-drawer-x-overlay();
|
||||
|
|
@ -234,7 +253,7 @@
|
|||
// bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
|
||||
//// y - top/bottom
|
||||
|
||||
@if $breakpoint == xs {
|
||||
@if $breakpoint==xs {
|
||||
// overlay marker class (non-responsive)
|
||||
|
||||
// Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
|
||||
|
|
@ -242,7 +261,9 @@
|
|||
&.bmd-drawer-overlay {
|
||||
@include bmd-drawer-y-overlay();
|
||||
}
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
// overlay responsive class
|
||||
@include bmd-drawer-y-overlay();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@mixin bmd-disabled() {
|
||||
|
||||
fieldset[disabled][disabled] &,
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
}
|
||||
|
||||
@mixin bmd-selection-color() {
|
||||
|
||||
.radio label,
|
||||
.radio-inline,
|
||||
.checkbox label,
|
||||
|
|
@ -34,6 +36,7 @@
|
|||
label:has(input[type=checkbox][disabled]),
|
||||
// css 4
|
||||
fieldset[disabled] & {
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -57,12 +60,14 @@
|
|||
&::after {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
|
||||
|
||||
[class^='bmd-label'],
|
||||
[class*=' bmd-label'] {
|
||||
color: $label-color;
|
||||
|
|
@ -71,43 +76,29 @@
|
|||
// 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,
|
||||
$underline-background-image: linear-gradient(to top,
|
||||
$label-color-focus 2px,
|
||||
fade-out($label-color-focus, 1) 2px
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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,
|
||||
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%
|
||||
);
|
||||
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
|
||||
&,
|
||||
|
|
@ -131,18 +122,23 @@
|
|||
|
||||
// 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;
|
||||
|
|
@ -152,7 +148,7 @@
|
|||
|
||||
.is-focused,
|
||||
// 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
|
||||
|
||||
// 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) {
|
||||
$variant-input-height: (
|
||||
($font-size * $variant-line-height) + ($variant-padding-y * 2)
|
||||
);
|
||||
$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;
|
||||
$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} ";
|
||||
|
||||
|
|
@ -246,8 +239,8 @@
|
|||
// across browsers
|
||||
input.form-control,
|
||||
input.form-control::placeholder {
|
||||
padding:0.28125rem 0;
|
||||
line-height:1.5;
|
||||
padding: 0.28125rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
|
|
@ -278,9 +271,9 @@
|
|||
}
|
||||
|
||||
// floating focused/filled will look like static
|
||||
&.is-focused,
|
||||
#{if(&, "&", "*")}.is-focused,
|
||||
.is-focused,
|
||||
&.is-filled,
|
||||
#{if(&, "&", "*")}.is-filled,
|
||||
.is-filled {
|
||||
.bmd-label-floating {
|
||||
@include bmd-label-static($label-static-top, $static-font-size);
|
||||
|
|
@ -291,6 +284,7 @@
|
|||
.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);
|
||||
|
|
@ -303,6 +297,7 @@
|
|||
|
||||
// validation icon placement
|
||||
.form-control {
|
||||
|
||||
&.form-control-success,
|
||||
&.form-control-warning,
|
||||
&.form-control-danger {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user