mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 10:04:04 +03:00
normalized placeholders with labels, moved placeholder content generation to mixin, updated sass conversion
This commit is contained in:
Kevin Ross
parent
21b49987d8
commit
9bbd049fea
|
|
@ -35,7 +35,7 @@ module.exports = function (grunt) {
|
|||
files: [{
|
||||
expand: true,
|
||||
cwd: "less",
|
||||
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less"],
|
||||
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less"],
|
||||
ext: ".scss",
|
||||
dest: "sass"
|
||||
}],
|
||||
|
|
@ -104,6 +104,12 @@ module.exports = function (grunt) {
|
|||
order: 24
|
||||
},
|
||||
|
||||
// material-placehorder
|
||||
{ // Multi-line replacement - https://regex101.com/r/eS2vQ3/2
|
||||
pattern: /.material-placeholder\({$\n([\s\S]+?)}\);$\n/mg,
|
||||
replacement: "@include material-placeholder {\n$1\n}\n",
|
||||
order: 24
|
||||
},
|
||||
|
||||
// fix calc references
|
||||
{ // https://regex101.com/r/aZ8iI5/1
|
||||
|
|
|
|||
642
dist/css/material-fullpalette.css
vendored
642
dist/css/material-fullpalette.css
vendored
File diff suppressed because it is too large
Load Diff
2
dist/css/material-fullpalette.css.map
vendored
2
dist/css/material-fullpalette.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css
vendored
2
dist/css/material-fullpalette.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material-fullpalette.min.css.map
vendored
2
dist/css/material-fullpalette.min.css.map
vendored
File diff suppressed because one or more lines are too long
110
dist/css/material.css
vendored
110
dist/css/material.css
vendored
|
|
@ -2571,7 +2571,7 @@ Then, run this script to get the list.
|
|||
box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
body {
|
||||
background-color: #eeeeee;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
body.inverse {
|
||||
background: #333333;
|
||||
|
|
@ -2655,7 +2655,7 @@ body .well-default,
|
|||
body .jumbotron-default,
|
||||
.container .jumbotron-default,
|
||||
.container-fluid .jumbotron-default {
|
||||
background-color: #ffffff;
|
||||
background-color: #FFF;
|
||||
}
|
||||
body .well-black,
|
||||
.container .well-black,
|
||||
|
|
@ -4921,19 +4921,19 @@ output {
|
|||
padding-bottom: 9px;
|
||||
min-height: 38px;
|
||||
}
|
||||
.input-sm {
|
||||
.input-sm '.input-sm' {
|
||||
height: 26px;
|
||||
padding: 4px 0px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
}
|
||||
select.input-sm {
|
||||
.input-sm select'.input-sm' {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
textarea.input-sm,
|
||||
select[multiple].input-sm {
|
||||
.input-sm textarea'.input-sm',
|
||||
.input-sm select[multiple]'.input-sm' {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-sm .form-control {
|
||||
|
|
@ -4957,19 +4957,19 @@ select[multiple].input-sm {
|
|||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.input-lg {
|
||||
.input-lg '.input-lg' {
|
||||
height: 42px;
|
||||
padding: 8px 0px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
border-radius: 6px;
|
||||
}
|
||||
select.input-lg {
|
||||
.input-lg select'.input-lg' {
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
}
|
||||
textarea.input-lg,
|
||||
select[multiple].input-lg {
|
||||
.input-lg textarea'.input-lg',
|
||||
.input-lg select[multiple]'.input-lg' {
|
||||
height: auto;
|
||||
}
|
||||
.form-group-lg .form-control {
|
||||
|
|
@ -5022,7 +5022,7 @@ select[multiple].input-lg {
|
|||
}
|
||||
.form-control {
|
||||
border: 0;
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
background-size: 0 2px, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
|
|
@ -5031,7 +5031,7 @@ select[multiple].input-lg {
|
|||
}
|
||||
.form-group.is-focused .form-control {
|
||||
outline: none;
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
background-size: 100% 2px, 100% 1px;
|
||||
box-shadow: none;
|
||||
transition-duration: 0.3s;
|
||||
|
|
@ -5039,6 +5039,21 @@ select[multiple].input-lg {
|
|||
.form-group.is-focused .form-control .material-input:after {
|
||||
background-color: #009688;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: #BDBDBD;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: #BDBDBD;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: #BDBDBD;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
fieldset[disabled] .form-control:textarea,
|
||||
.form-control:textarea {
|
||||
height: 40px;
|
||||
|
|
@ -5068,13 +5083,14 @@ fieldset[disabled] .form-control {
|
|||
position: relative;
|
||||
}
|
||||
.form-group label.control-label {
|
||||
color: #BDBDBD;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0;
|
||||
}
|
||||
.form-group label.control-label,
|
||||
.form-group-default label.control-label {
|
||||
color: #bdbdbd;
|
||||
color: #BDBDBD;
|
||||
}
|
||||
.form-group-black label.control-label {
|
||||
color: #000000;
|
||||
|
|
@ -5259,94 +5275,94 @@ fieldset[disabled] .form-control {
|
|||
}
|
||||
.form-group.is-focused .form-control,
|
||||
.form-group-default.is-focused .form-control {
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-black.is-focused .form-control {
|
||||
background-image: linear-gradient(#000000, #000000), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#000000, #000000), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-white.is-focused .form-control {
|
||||
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-inverse.is-focused .form-control {
|
||||
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-primary.is-focused .form-control {
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-success.is-focused .form-control {
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-info.is-focused .form-control {
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-warning.is-focused .form-control {
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-danger.is-focused .form-control {
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-red.is-focused .form-control {
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-pink.is-focused .form-control {
|
||||
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-purple.is-focused .form-control {
|
||||
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#9c27b0, #9c27b0), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-deep-purple.is-focused .form-control {
|
||||
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#673ab7, #673ab7), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-indigo.is-focused .form-control {
|
||||
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#3f51b5, #3f51b5), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-blue.is-focused .form-control {
|
||||
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#2196f3, #2196f3), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-light-blue.is-focused .form-control {
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-cyan.is-focused .form-control {
|
||||
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-teal.is-focused .form-control {
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-green.is-focused .form-control {
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-light-green.is-focused .form-control {
|
||||
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#8bc34a, #8bc34a), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-lime.is-focused .form-control {
|
||||
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#cddc39, #cddc39), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-yellow.is-focused .form-control {
|
||||
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ffeb3b, #ffeb3b), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-amber.is-focused .form-control {
|
||||
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ffc107, #ffc107), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-orange.is-focused .form-control {
|
||||
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-deep-orange.is-focused .form-control {
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-brown.is-focused .form-control {
|
||||
background-image: linear-gradient(#795548, #795548), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#795548, #795548), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-grey.is-focused .form-control {
|
||||
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#9e9e9e, #9e9e9e), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group-material-blue-grey.is-focused .form-control {
|
||||
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#607d8b, #607d8b), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group.has-warning .form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.form-group.has-warning.is-focused .form-control {
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#ff5722, #ff5722), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group.has-warning label.control-label,
|
||||
.form-group.has-warning .help-block {
|
||||
|
|
@ -5356,7 +5372,7 @@ fieldset[disabled] .form-control {
|
|||
box-shadow: none;
|
||||
}
|
||||
.form-group.has-error.is-focused .form-control {
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group.has-error label.control-label,
|
||||
.form-group.has-error .help-block {
|
||||
|
|
@ -5366,7 +5382,7 @@ fieldset[disabled] .form-control {
|
|||
box-shadow: none;
|
||||
}
|
||||
.form-group.has-success.is-focused .form-control {
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group.has-success label.control-label,
|
||||
.form-group.has-success .help-block {
|
||||
|
|
@ -5376,7 +5392,7 @@ fieldset[disabled] .form-control {
|
|||
box-shadow: none;
|
||||
}
|
||||
.form-group.has-info.is-focused .form-control {
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#d2d2d2, #d2d2d2);
|
||||
background-image: linear-gradient(#03a9f4, #03a9f4), linear-gradient(#D2D2D2, #D2D2D2);
|
||||
}
|
||||
.form-group.has-info label.control-label,
|
||||
.form-group.has-info .help-block {
|
||||
|
|
@ -7500,7 +7516,7 @@ icon-material-blue-grey {
|
|||
/**************************************************************************/
|
||||
border-radius: 2px;
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
background: #ffffff;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
.card .card-height-indicator {
|
||||
|
|
@ -7529,7 +7545,7 @@ icon-material-blue-grey {
|
|||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 18px;
|
||||
color: #ffffff;
|
||||
color: #fff;
|
||||
font-size: 2em;
|
||||
}
|
||||
.card .card-body {
|
||||
|
|
|
|||
2
dist/css/material.css.map
vendored
2
dist/css/material.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/material.min.css.map
vendored
2
dist/css/material.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -81,20 +81,25 @@ output {
|
|||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
|
||||
height: @input-height;
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
border-radius: @border-radius;
|
||||
|
||||
select& {
|
||||
// mixin pulled from bootstrap and altered for less/sass compatibility
|
||||
.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {
|
||||
|
||||
@{parent} {
|
||||
height: @input-height;
|
||||
padding: @padding-vertical @padding-horizontal;
|
||||
font-size: @font-size;
|
||||
line-height: @line-height;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
select@{parent} {
|
||||
height: @input-height;
|
||||
line-height: @input-height;
|
||||
}
|
||||
|
||||
textarea&,
|
||||
select[multiple]& {
|
||||
textarea@{parent},
|
||||
select[multiple]@{parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +114,7 @@ output {
|
|||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
.input-sm {
|
||||
.input-size(@md-input-height-small; @md-input-padding-small-vertical; @md-input-padding-small-horizontal; @md-input-font-size-small; @md-input-line-height-small; @md-input-border-radius-small);
|
||||
.input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small);
|
||||
}
|
||||
.form-group-sm {
|
||||
.form-control {
|
||||
|
|
@ -136,7 +141,7 @@ output {
|
|||
}
|
||||
|
||||
.input-lg {
|
||||
.input-size(@md-input-height-large; @md-input-padding-large-vertical; @md-input-padding-large-horizontal; @md-input-font-size-large; @md-input-line-height-large; @md-input-border-radius-large);
|
||||
.input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large);
|
||||
}
|
||||
.form-group-lg {
|
||||
.form-control {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// usage: .form-group-validation-state(@input-danger);
|
||||
.form-group-validation-state(@name, @color) {
|
||||
|
||||
&.@{name} { // e.g. has-error
|
||||
&.@{name} { // e.g. has-error
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -38,10 +38,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
.material-placeholder() {
|
||||
.material-placeholder({
|
||||
color: @input-placeholder-color;
|
||||
font-size: @md-input-font-size-base;
|
||||
}
|
||||
font-weight: normal;
|
||||
});
|
||||
|
||||
//&::-moz-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&:-ms-input-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&::-webkit-input-placeholder {
|
||||
// color: @input-placeholder-color;
|
||||
// font-size: @md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
|
||||
fieldset[disabled] &,
|
||||
& {
|
||||
|
|
@ -75,17 +92,21 @@
|
|||
position: relative;
|
||||
|
||||
// Labels
|
||||
label.control-label {
|
||||
font-size: @md-input-label-font-size-base; // 12px same as focused size of floating
|
||||
label.control-label { // static label
|
||||
|
||||
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
|
||||
color: @input-placeholder-color;
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-base; // same as focused size of floating
|
||||
font-weight: normal;
|
||||
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
.variations(~" label.control-label", color, @input-placeholder-color);
|
||||
.variations(~".is-focused label.control-label", color, @input-default);
|
||||
.variations(~" label.control-label", color, @input-placeholder-color); // default label color variations
|
||||
.variations(~".is-focused label.control-label", color, @input-default); // focused label color variations
|
||||
|
||||
// sm
|
||||
&.form-group-sm {
|
||||
label.control-label {
|
||||
label.control-label { // static label
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-small; // same as focused size of floating
|
||||
margin: 12px 0 0 0; // sm only
|
||||
}
|
||||
|
|
@ -93,7 +114,7 @@
|
|||
|
||||
// lg
|
||||
&.form-group-lg {
|
||||
label.control-label {
|
||||
label.control-label { // static label
|
||||
font-size: @floating-label-size-ratio * @md-input-font-size-large; // same as focused size of floating
|
||||
}
|
||||
}
|
||||
|
|
@ -116,7 +137,6 @@
|
|||
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
});
|
||||
|
||||
|
||||
.form-group-validation-state(has-warning, @input-warning);
|
||||
.form-group-validation-state(has-error, @input-danger);
|
||||
.form-group-validation-state(has-success, @input-success);
|
||||
|
|
@ -219,7 +239,6 @@ label.control-label.floating-label {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Input files (kinda hack)
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
|
|
@ -237,11 +256,9 @@ label.control-label.floating-label {
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,4 @@
|
|||
// usage: .variations(~" .check", color, transparent);
|
||||
.variations(@extra, @property, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
@{property}: @material-color;
|
||||
});
|
||||
}
|
||||
|
||||
.background-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
background-color: @material-color;
|
||||
& when (@material-color = @btn-default) {
|
||||
color: @lightbg-text;
|
||||
}
|
||||
& when not (@material-color = @btn-default) {
|
||||
color: @material-text-color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
.text-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
color: @material-color;
|
||||
});
|
||||
}
|
||||
@import '_mixins-shared.less';
|
||||
|
||||
//
|
||||
// To use this mixin you should pass a function as final parameter to define
|
||||
|
|
|
|||
31
less/_mixins-shared.less
Executable file
31
less/_mixins-shared.less
Executable file
|
|
@ -0,0 +1,31 @@
|
|||
// Placeholder text
|
||||
.material-placeholder(@rules) {
|
||||
&::-moz-placeholder { @rules(); } // Firefox
|
||||
&:-ms-input-placeholder { @rules(); } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { @rules(); } // Safari and Chrome
|
||||
}
|
||||
|
||||
// usage: .variations(~" .check", color, transparent);
|
||||
.variations(@extra, @property, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
@{property}: @material-color;
|
||||
});
|
||||
}
|
||||
|
||||
.background-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
background-color: @material-color;
|
||||
& when (@material-color = @btn-default) {
|
||||
color: @lightbg-text;
|
||||
}
|
||||
& when not (@material-color = @btn-default) {
|
||||
color: @material-text-color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
.text-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
color: @material-color;
|
||||
});
|
||||
}
|
||||
|
|
@ -1,34 +1,4 @@
|
|||
// Placeholder text
|
||||
.material-placeholder(@func) {
|
||||
&::-moz-placeholder { @func(); } // Firefox
|
||||
&:-ms-input-placeholder { @func(); } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { @func(); } // Safari and Chrome
|
||||
}
|
||||
|
||||
// usage: .variations(~" .check", color, transparent);
|
||||
.variations(@extra, @property, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
@{property}: @material-color;
|
||||
});
|
||||
}
|
||||
|
||||
.background-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
background-color: @material-color;
|
||||
& when (@material-color = @btn-default) {
|
||||
color: @lightbg-text;
|
||||
}
|
||||
& when not (@material-color = @btn-default) {
|
||||
color: @material-text-color;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
.text-variations(@extra, @default) {
|
||||
.generic-variations(@extra, @default, {
|
||||
color: @material-color;
|
||||
});
|
||||
}
|
||||
@import '_mixins-shared.less';
|
||||
|
||||
//
|
||||
// To use this mixin you should pass a function as final parameter to define
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
"grunt-contrib-copy": "^0.6.0",
|
||||
"grunt-contrib-jasmine": "^0.8.0",
|
||||
"grunt-contrib-jshint": "^0.10.0",
|
||||
"grunt-contrib-less": "^0.11.4",
|
||||
"grunt-contrib-less": "^1.1.0",
|
||||
"grunt-contrib-sass": "^0.8.1",
|
||||
"grunt-contrib-uglify": "^0.6.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
|
|
|
|||
218
sass/_inputs-size.scss
Normal file
218
sass/_inputs-size.scss
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
//
|
||||
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
|
||||
//
|
||||
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
|
||||
// to identify differences in sizing approaches to form inputs.
|
||||
// --------------------------------------------------
|
||||
|
||||
legend {
|
||||
margin-bottom: $md-input-line-height-computed;
|
||||
font-size: ($md-input-font-size-base * 1.5);
|
||||
}
|
||||
|
||||
// Adjust output element
|
||||
output {
|
||||
padding-top: ($md-input-padding-base-vertical + 1);
|
||||
font-size: $md-input-font-size-base;
|
||||
line-height: $md-input-line-height-base;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: $md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
||||
padding: $md-input-padding-base-vertical $md-input-padding-base-horizontal;
|
||||
font-size: $md-input-font-size-base;
|
||||
line-height: $md-input-line-height-base;
|
||||
}
|
||||
|
||||
// Special styles for iOS temporal inputs
|
||||
//
|
||||
// In Mobile Safari, setting `display: block` on temporal inputs causes the
|
||||
// text within the input to become vertically misaligned. As a workaround, we
|
||||
// set a pixel line-height that matches the given height of the input, but only
|
||||
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
//
|
||||
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
&.form-control {
|
||||
line-height: $md-input-height-base;
|
||||
}
|
||||
|
||||
&.input-sm,
|
||||
.input-group-sm & {
|
||||
line-height: $md-input-height-small;
|
||||
}
|
||||
|
||||
&.input-lg,
|
||||
.input-group-lg & {
|
||||
line-height: $md-input-height-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox {
|
||||
|
||||
label {
|
||||
min-height: $md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Static form control text
|
||||
//
|
||||
// Apply class to a `p` element to make any string of text align with labels in
|
||||
// a horizontal form layout.
|
||||
|
||||
.form-control-static {
|
||||
// Size it appropriately next to real form controls
|
||||
padding-top: ($md-input-padding-base-vertical + 1);
|
||||
padding-bottom: ($md-input-padding-base-vertical + 1);
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-base);
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Relative text size, padding, and border-radii changes for form controls. For
|
||||
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
|
||||
// element gets special love because it's special, and that's a fact!
|
||||
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
|
||||
|
||||
#{$parent} {
|
||||
height: $input-height;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
select#{$parent} {
|
||||
height: $input-height;
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
textarea#{$parent},
|
||||
select[multiple]#{$parent} {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
.input-sm {
|
||||
@include input-size('.input-sm', $md-input-height-small, $md-input-padding-small-vertical, $md-input-padding-small-horizontal, $md-input-font-size-small, $md-input-line-height-small, $md-input-border-radius-small);
|
||||
}
|
||||
.form-group-sm {
|
||||
.form-control {
|
||||
height: $md-input-height-small;
|
||||
padding: $md-input-padding-small-vertical $md-input-padding-small-horizontal;
|
||||
font-size: $md-input-font-size-small;
|
||||
line-height: $md-input-line-height-small;
|
||||
}
|
||||
select.form-control {
|
||||
height: $md-input-height-small;
|
||||
line-height: $md-input-height-small;
|
||||
}
|
||||
textarea.form-control,
|
||||
select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-control-static {
|
||||
height: $md-input-height-small;
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-small);
|
||||
padding: ($md-input-padding-small-vertical + 1) $md-input-padding-small-horizontal;
|
||||
font-size: $md-input-font-size-small;
|
||||
line-height: $md-input-line-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
@include input-size('.input-lg', $md-input-height-large, $md-input-padding-large-vertical, $md-input-padding-large-horizontal, $md-input-font-size-large, $md-input-line-height-large, $md-input-border-radius-large);
|
||||
}
|
||||
.form-group-lg {
|
||||
.form-control {
|
||||
height: $md-input-height-large;
|
||||
padding: $md-input-padding-large-vertical $md-input-padding-large-horizontal;
|
||||
font-size: $md-input-font-size-large;
|
||||
line-height: $md-input-line-height-large;
|
||||
}
|
||||
select.form-control {
|
||||
height: $md-input-height-large;
|
||||
line-height: $md-input-height-large;
|
||||
}
|
||||
textarea.form-control,
|
||||
select[multiple].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.form-control-static {
|
||||
height: $md-input-height-large;
|
||||
min-height: ($md-input-line-height-computed + $md-input-font-size-large);
|
||||
padding: ($md-input-padding-large-vertical + 1) $md-input-padding-large-horizontal;
|
||||
font-size: $md-input-font-size-large;
|
||||
line-height: $md-input-line-height-large;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-horizontal {
|
||||
|
||||
// Consistent vertical alignment of radios and checkboxes
|
||||
//
|
||||
// Labels also get some reset styles, but that is scoped to a media query below.
|
||||
.radio,
|
||||
.checkbox,
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
|
||||
}
|
||||
// Account for padding we're adding to ensure the alignment and of help text
|
||||
// and other content below items
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: ($md-input-line-height-computed + ($md-input-padding-base-vertical + 1));
|
||||
}
|
||||
|
||||
// Reset spacing and right align labels, but scope to media queries so that
|
||||
// labels on narrow viewports stack the same as a default form example.
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: ($md-input-padding-base-vertical + 1); // Default padding plus a border
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form group sizes
|
||||
//
|
||||
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
|
||||
// inputs and labels within a `.form-group`.
|
||||
.form-group-lg {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: (($md-input-padding-large-vertical * $md-input-line-height-large) + 1);
|
||||
font-size: $md-input-font-size-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group-sm {
|
||||
@media (min-width: $screen-sm-min) {
|
||||
.control-label {
|
||||
padding-top: ($md-input-padding-small-vertical + 1);
|
||||
font-size: $md-input-font-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
@import '_inputs-size';
|
||||
|
||||
// usage: @include form-group-validation-state($input-danger);
|
||||
@mixin form-group-validation-state($name, $color){
|
||||
|
||||
&.#{$name} { // e.g. has-error
|
||||
&.#{$name} { // e.g. has-error
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus,
|
||||
.form-control:focus,
|
||||
&.focus .form-control {
|
||||
&.is-focused .form-control {
|
||||
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
label.control-label,
|
||||
.help-block {
|
||||
|
|
@ -26,26 +25,53 @@
|
|||
background-size: 0 2px, 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom, center calc(100% - 1px);
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transition: background 0s ease-out;
|
||||
&::-webkit-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
|
||||
.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;
|
||||
|
||||
.material-input:after {
|
||||
background-color: $input-default;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset[disabled] &, & {
|
||||
@include material-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
font-size: $md-input-font-size-base;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
//&::-moz-placeholder {
|
||||
// color: $input-placeholder-color;
|
||||
// font-size: $md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&:-ms-input-placeholder {
|
||||
// color: $input-placeholder-color;
|
||||
// font-size: $md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
//&::-webkit-input-placeholder {
|
||||
// color: $input-placeholder-color;
|
||||
// font-size: $md-input-font-size-base;
|
||||
// font-weight: normal;
|
||||
//}
|
||||
|
||||
fieldset[disabled] &,
|
||||
& {
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&, &:focus, &.focus {
|
||||
padding: 0;
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
//padding: 0;
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
|
@ -60,37 +86,40 @@
|
|||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
//background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
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;
|
||||
}
|
||||
|
||||
&:focus ~ .material-input:after,
|
||||
&.focus ~ .material-input:after {
|
||||
background-color: $input-default;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
label {
|
||||
//color: $input-placeholder-color;
|
||||
font-size: $floating-label-size-ratio * $font-size-base; // same as focused size of floating
|
||||
// Labels
|
||||
label.control-label { // static label
|
||||
|
||||
// same label properties as form-group placeholder. could be shared with a ruleset but makes sass conversion painful
|
||||
color: $input-placeholder-color;
|
||||
font-size: $md-input-font-size-base;
|
||||
font-weight: normal;
|
||||
padding-left: 0px;
|
||||
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
//.variations(unquote(" label.control-label"), color, $input-placeholder-color); // FIXME: not sure if necessary
|
||||
//.variations(unquote(".is-focused label.control-label"), color, $input-default);
|
||||
|
||||
// sm
|
||||
&.form-group-sm {
|
||||
label.control-label { // static label
|
||||
font-size: $floating-label-size-ratio * $md-input-font-size-small; // same as focused size of floating FIXME shouldn't this be full size?
|
||||
margin: 12px 0 0 0; // sm only
|
||||
}
|
||||
}
|
||||
|
||||
// lg
|
||||
&.form-group-lg {
|
||||
label.control-label { // static label
|
||||
font-size: $floating-label-size-ratio * $md-input-font-size-large; // same as focused size of floating FIXME shouldn't this be full size?
|
||||
}
|
||||
}
|
||||
|
||||
// Hints
|
||||
|
|
@ -100,40 +129,20 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
&.focus {
|
||||
&.is-focused {
|
||||
.hint {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include variations(unquote(" label.control-label"), color, $lightbg-text);
|
||||
@include variations(unquote(".focus label.control-label"), color, $input-default);
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
|
||||
@include bg-img-variations(unquote(".is-focused .form-control"), $primary);
|
||||
|
||||
@include form-group-validation-state(has-warning, $input-warning);
|
||||
@include form-group-validation-state(has-error, $input-danger);
|
||||
@include form-group-validation-state(has-success, $input-success);
|
||||
@include form-group-validation-state(has-info, $input-info);
|
||||
|
||||
// sm
|
||||
&.form-group-sm {
|
||||
label {
|
||||
font-size: $floating-label-size-ratio * $font-size-small; // same as focused size of floating
|
||||
}
|
||||
.form-control {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// lg
|
||||
&.form-group-lg {
|
||||
label {
|
||||
font-size: $floating-label-size-ratio * $font-size-large; // same as focused size of floating
|
||||
}
|
||||
.form-control {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
|
@ -149,48 +158,68 @@
|
|||
select {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
|
||||
@include bg-img-variations(unquote(" .form-control:focus"), $primary);
|
||||
}
|
||||
|
||||
@mixin input-floating-label-size($name, $size){
|
||||
select.form-control {
|
||||
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
.form-group.is-focused & {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
|
||||
// this is for input-sm and input-lg directly on input. Recommended way is form-group-sm and form-group-lg instead.
|
||||
@mixin input-size-floating-label($name, $size){
|
||||
.form-control.#{$name} ~ & {
|
||||
font-size: $size;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
.form-control.#{$name}:focus ~ &,
|
||||
.form-control.#{$name}:not(.empty) ~ & {
|
||||
.form-group.is-focused .form-control.#{$name} ~ .form-group.is-focused &,
|
||||
.form-group.is-empty .form-control.#{$name} ~ .form-group.is-empty & {
|
||||
top: $floating-label-size-ratio * -$size;
|
||||
font-size: $floating-label-size-ratio * $size;
|
||||
}
|
||||
}
|
||||
|
||||
// Do not nest .floating-label inside .form-group - it messes with ~
|
||||
label.floating-label {
|
||||
font-size: $font-size-base; // Input sizes
|
||||
// Do not nest label.floating-label inside .form-group - it messes with ~ selector
|
||||
label.control-label.floating-label {
|
||||
font-size: $md-input-font-size-base; // Input sizes
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
top: -1 * $md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding
|
||||
transition: 0.3s ease all;
|
||||
|
||||
.form-group.is-focused & {
|
||||
label.control-label {
|
||||
font-size: $md-input-label-font-size-base; // 12px
|
||||
}
|
||||
}
|
||||
|
||||
// sizing
|
||||
.form-control:focus ~ &,
|
||||
.form-control:not(.empty) ~ & {
|
||||
top: $floating-label-size-ratio * -$font-size-base;
|
||||
font-size: $floating-label-size-ratio * $font-size-base;
|
||||
.form-group.is-focused &,
|
||||
.form-group:not(.is-empty) & {
|
||||
top: -1 * ($md-input-label-font-size-base + $md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
|
||||
font-size: $md-input-label-font-size-base;
|
||||
}
|
||||
|
||||
@include input-floating-label-size(input-sm, $font-size-small);
|
||||
@include input-floating-label-size(input-lg, $font-size-large);
|
||||
|
||||
|
||||
.form-control:not(.empty):invalid ~ &, // FIXME: where does the invalid class come from? it isnt' bs3.
|
||||
.form-control.focus:invalid ~ & {
|
||||
color: $input-danger;
|
||||
}
|
||||
@include input-size-floating-label(input-sm, $md-input-font-size-small);
|
||||
@include input-size-floating-label(input-lg, $md-input-font-size-large);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
|
|
@ -211,22 +240,6 @@ label.floating-label {
|
|||
}
|
||||
}
|
||||
|
||||
select[multiple].form-control {
|
||||
&, &:focus, &.focus {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:focus, &.focus {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
}
|
||||
|
||||
// Input files (kinda hack)
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
|
|
@ -247,8 +260,8 @@ fieldset[disabled] .form-control:disabled,
|
|||
fieldset[disabled] .form-control:focus:disabled,
|
||||
.form-group .form-control:focus:disabled,
|
||||
.form-control:focus: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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,68 @@ $font-size-base: 14px !default;
|
|||
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
||||
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
||||
|
||||
$screen-sm: 768px !default;
|
||||
$screen-sm-min: $screen-sm !default;
|
||||
|
||||
|
||||
// Global Material variables
|
||||
$material-border-radius: 2px !default;
|
||||
|
||||
// --------------------
|
||||
// inputs
|
||||
$input-placeholder-color: #BDBDBD !default;
|
||||
$floating-label-size-ratio: 75 / 100 !default;
|
||||
$input-underline-color: #D2D2D2 !default;
|
||||
|
||||
$md-input-font-size-base: 16px !default;
|
||||
$md-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
|
||||
$md-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
|
||||
|
||||
// size when static or floating with focus i.e. 16px
|
||||
$md-input-label-font-size-base: $floating-label-size-ratio * $md-input-font-size-base !default;
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
$md-input-line-height-base: 1.428571429 !default; // 20/14
|
||||
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
||||
$md-input-line-height-computed: floor(($md-input-font-size-base * $md-input-line-height-base)) !default; // ~20px
|
||||
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
$md-input-padding-base-vertical: 8px !default; // was 6.
|
||||
$md-input-padding-base-horizontal: 0px !default; // was 12.
|
||||
|
||||
$md-input-padding-large-vertical: 8px !default; // 10
|
||||
$md-input-padding-large-horizontal: 0px !default; // 16
|
||||
|
||||
$md-input-padding-small-vertical: 4px !default; // 5
|
||||
$md-input-padding-small-horizontal: 0px !default; // 10
|
||||
|
||||
$md-input-padding-xs-vertical: 2px !default; // 1
|
||||
$md-input-padding-xs-horizontal: 0px !default; // 5
|
||||
|
||||
$md-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
||||
$md-input-line-height-small: 1.5 !default;
|
||||
|
||||
$md-input-border-radius-base: 4px !default;
|
||||
$md-input-border-radius-large: 6px !default;
|
||||
$md-input-border-radius-small: 3px !default;
|
||||
|
||||
|
||||
//** Default `.form-control` height
|
||||
$md-input-height-base: ($md-input-line-height-computed + ($md-input-padding-base-vertical * 2) + 2) !default;
|
||||
//** Large `.form-control` height
|
||||
$md-input-height-large: (ceil($md-input-font-size-large * $md-input-line-height-large) + ($md-input-padding-large-vertical * 2) + 2) !default;
|
||||
//** Small `.form-control` height
|
||||
$md-input-height-small: (floor($md-input-font-size-small * $md-input-line-height-small) + ($md-input-padding-small-vertical * 2) + 2) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Card
|
||||
$card-body-text: $lightbg-text !default;
|
||||
$card-body-background: #fff !default;
|
||||
|
|
@ -97,10 +155,6 @@ $checkbox-animation-check: 0.3s !default;
|
|||
$popover-background: rgba(101, 101, 101, 0.9) !default;
|
||||
$popover-color: #ececec !default;
|
||||
|
||||
// Inputs
|
||||
$input-placeholder-color: #BDBDBD !default;
|
||||
$floating-label-size-ratio: 70 / 100 !default;
|
||||
|
||||
// Dropdown Menu
|
||||
$dropdown-radius: 2px !default;
|
||||
$dropdown-font-size: 16px !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user