mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-27 09:00:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix disabled underline

Browse Source
This commit is contained in:
Kevin Ross 2015-11-18 11:13:17 -06:00
parent 54a4313a25
commit 4b762f5900
2 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bootstrap-elements.html
View File

@ -8,7 +8,7 @@
<title>Bootstrap Material</title> <title>Bootstrap Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/roboto.min.css" rel="stylesheet"> <link href="dist/css/roboto.min.css" rel="stylesheet">
<link href="dist/css/material-fullpalette.min.css" rel="stylesheet"> <link href="dist/css/material-fullpalette.css" rel="stylesheet">
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.min.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet"> <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

101
less/_inputs.less
View File

@ -1,5 +1,19 @@
@import '_inputs-size.less'; @import '_inputs-size.less';
// Ugly reset of Bootstrap border
fieldset[disabled] .form-control:disabled,
.form-group .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-group .form-control:focus:disabled,
.form-control:focus:disabled,
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-group .form-control:disabled,
.form-group.is-focused .form-control:disabled {
border: 0;
}
// usage: .form-group-validation-state(@input-danger); // usage: .form-group-validation-state(@input-danger);
.form-group-validation-state(@name, @color) { .form-group-validation-state(@name, @color) {
@ -17,52 +31,53 @@
} }
} }
.form-control { .form-group {
border: 0; .form-control {
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color); border: 0;
background-size: 0 2px, 100% 1px;
background-repeat: no-repeat;
background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
.form-group.is-focused & {
outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 100% 2px, 100% 1px; background-size: 0 2px, 100% 1px;
box-shadow: none; background-repeat: no-repeat;
transition-duration: 0.3s; background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out;
.material-input:after { .form-group.is-focused & {
background-color: @input-default; outline: none;
} background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
} background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
&, .material-input:after {
fieldset[disabled] & { background-color: @input-default;
}
&:textarea {
height: 40px;
} }
&, &,
.form-group.is-focused & { fieldset[disabled] & {
float: none;
border: 0; &:textarea {
box-shadow: none; height: 40px;
border-radius: 0; }
&:disabled {
border-style: dashed; &,
border-bottom: 1px solid #757575; .form-group.is-focused & {
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
background-image: none;
border-bottom: 1px dotted @input-underline-color;
}
} }
} }
}
&[disabled], &[disabled],
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
//background-color: transparent; background-color: rgba(0, 0, 0, 0);
background-color: rgba(0, 0, 0, 0); }
} }
} }
@ -309,15 +324,3 @@ select.form-control {
z-index: 100; z-index: 100;
} }
// Ugly override of Bootstrap border
fieldset[disabled] .form-control:disabled,
.form-group .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-group .form-control:focus:disabled,
.form-control:focus:disabled,
.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-group .form-control:disabled,
.form-group.is-focused .form-control:disabled {
border: 0;
}