mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-29 04:54:12 +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>
<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/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="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">

101
less/_inputs.less
View File

@ -1,5 +1,19 @@
@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);
.form-group-validation-state(@name, @color) {
@ -17,52 +31,53 @@
}
}
.form-control {
border: 0;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
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;
.form-group {
.form-control {
border: 0;
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;
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;
.material-input:after {
background-color: @input-default;
}
}
.form-group.is-focused & {
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;
&,
fieldset[disabled] & {
&:textarea {
height: 40px;
.material-input:after {
background-color: @input-default;
}
}
&,
.form-group.is-focused & {
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
fieldset[disabled] & {
&:textarea {
height: 40px;
}
&,
.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],
&[readonly],
fieldset[disabled] & {
//background-color: transparent;
background-color: rgba(0, 0, 0, 0);
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: rgba(0, 0, 0, 0);
}
}
}
@ -309,15 +324,3 @@ select.form-control {
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;
}