mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 01:57:06 +03:00
Merge pull request #725 from rosskevin/standardized-form-markup
Standardized form markup and spec compliance v.0.4.0
This commit is contained in:
Kevin Ross
commit
e928b5fd1f
17
.travis.yml
17
.travis.yml
|
|
@ -2,13 +2,20 @@ language: node_js
|
|||
|
||||
node_js: 0.10.33
|
||||
|
||||
sudo: false # use new container infrastructure
|
||||
|
||||
# sass setup
|
||||
cache: bundler # speeds up bundler
|
||||
rvm:
|
||||
- 2.2.2
|
||||
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
- export DISPLAY=:99.0
|
||||
- sh -e /etc/init.d/xvfb start
|
||||
#- export DISPLAY=:99.0
|
||||
#- sh -e /etc/init.d/xvfb start
|
||||
# Install meteor
|
||||
- curl https://install.meteor.com | /bin/sh
|
||||
#- curl https://install.meteor.com | /bin/sh
|
||||
# Install spacejam, Meteor's CI helper
|
||||
- npm install -g spacejam
|
||||
#- npm install -g spacejam
|
||||
|
||||
script: grunt cibuild
|
||||
script: bundle install && grunt cibuild
|
||||
|
|
|
|||
60
Gruntfile.js
60
Gruntfile.js
|
|
@ -5,13 +5,37 @@ module.exports = function (grunt) {
|
|||
|
||||
grunt.initConfig({
|
||||
|
||||
htmllint: {
|
||||
//options: {
|
||||
// stoponerror: false,
|
||||
// relaxerror: []
|
||||
//},
|
||||
//files: ['index.html', 'bootstrap-elements.html']
|
||||
all: {
|
||||
options: {
|
||||
ignore: '“&” did not start a character reference. (“&” probably should have been escaped as “&”.)'
|
||||
},
|
||||
src: ["*.html"]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// Make sure we are structurally correct for bootstrap
|
||||
bootlint: {
|
||||
options: {
|
||||
stoponerror: false,
|
||||
relaxerror: []
|
||||
},
|
||||
files: ['index.html', 'bootstrap-elements.html']
|
||||
},
|
||||
|
||||
// Convert from less to sass
|
||||
lessToSass: {
|
||||
convert: {
|
||||
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"
|
||||
}],
|
||||
|
|
@ -80,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
|
||||
|
|
@ -320,9 +350,13 @@ module.exports = function (grunt) {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
html: {
|
||||
files: ["index.html", "bootstrap-elements.html", "test.html"],
|
||||
tasks: ["htmllint", "bootlint"]
|
||||
},
|
||||
js: {
|
||||
files: ["Gruntfile.js", "scripts/**/*.js", "template/**/*.js"],
|
||||
tasks: ["newer:jshint:all"]
|
||||
tasks: ["newer:jshint:all", "material:js"]
|
||||
},
|
||||
jsTest: {
|
||||
files: ["test/**/*.js"],
|
||||
|
|
@ -330,18 +364,20 @@ module.exports = function (grunt) {
|
|||
},
|
||||
less: {
|
||||
files: ["less/**/*.less"],
|
||||
tasks: ["material:less", "material:sass"]
|
||||
},
|
||||
sass: {
|
||||
files: ["sass/*.scss"],
|
||||
tasks: ["material:sass"]
|
||||
tasks: ["material:less"]//, "material:sass"]
|
||||
},
|
||||
//sass: {
|
||||
// files: ["sass/*.scss"],
|
||||
// tasks: ["material:sass"]
|
||||
//},
|
||||
livereload: {
|
||||
options: {
|
||||
livereload: "<%= connect.options.livereload %>"
|
||||
},
|
||||
files: [
|
||||
"index.html",
|
||||
"bootstrap-elements.html",
|
||||
"dist/js/**/*.js",
|
||||
"dist/css/**/*.css",
|
||||
"demo/**/*.{png,jpg,jpeg,gif,webp,svg}"
|
||||
]
|
||||
|
|
@ -384,6 +420,7 @@ module.exports = function (grunt) {
|
|||
grunt.registerTask("material", [
|
||||
"material:less",
|
||||
"material:js",
|
||||
"material:fonts",
|
||||
"material:sass"
|
||||
]);
|
||||
|
||||
|
|
@ -393,6 +430,8 @@ module.exports = function (grunt) {
|
|||
]);
|
||||
|
||||
grunt.registerTask("material:less", [
|
||||
"htmllint",
|
||||
"bootlint",
|
||||
"less:material",
|
||||
"less:materialfullpalette",
|
||||
"less:roboto",
|
||||
|
|
@ -407,6 +446,9 @@ module.exports = function (grunt) {
|
|||
"copy:material",
|
||||
"uglify:material"
|
||||
]);
|
||||
grunt.registerTask("material:fonts", [
|
||||
"copy:fonts"
|
||||
]);
|
||||
|
||||
grunt.registerTask("ripples", [
|
||||
"ripples:less",
|
||||
|
|
@ -448,6 +490,6 @@ module.exports = function (grunt) {
|
|||
grunt.registerTask("meteor-publish", ["exec:meteor-init", "exec:meteor-publish", "exec:meteor-cleanup"]);
|
||||
grunt.registerTask("meteor", ["exec:meteor-init", "exec:meteor-test", "exec:meteor-publish", "exec:meteor-cleanup"]);
|
||||
|
||||
grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
|
||||
|
||||
//grunt.registerTask("cibuild", ["newer:jshint", "meteor-test"]);
|
||||
grunt.registerTask("cibuild", ["build"]);
|
||||
};
|
||||
|
|
|
|||
195
README.md
195
README.md
|
|
@ -1,3 +1,5 @@
|
|||
# bootstrap-material-design
|
||||
|
||||
[](https://travis-ci.org/FezVrasta/bootstrap-material-design)
|
||||
[](https://gratipay.com/FezVrasta)
|
||||
[](https://github.com/FezVrasta/bootstrap-material-design)
|
||||
|
|
@ -29,20 +31,22 @@ If you prefer, you can include this framework in your project using our official
|
|||
Navigate to the `dist/` folder in this repository, and you will see the `test.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes.
|
||||
You need to copy the `dist/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
|
||||
|
||||
#### material-fullpalette.css or material.css?
|
||||
### material-fullpalette.css or material.css?
|
||||
|
||||
The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors.
|
||||
|
||||
#### Use custom color as primary
|
||||
### Use custom color as primary
|
||||
|
||||
Is often asked how to change the primary color of this theme without edit the bower package directly.
|
||||
|
||||
You can do it by creating a less file in your project:
|
||||
|
||||
@import "../bower_components/bootstrap-material-design/less/material.less";
|
||||
```css
|
||||
@import "../bower_components/bootstrap-material-design/less/material.less";
|
||||
|
||||
// Override @primary color with one took from _colors.less
|
||||
@primary: @deep-purple;
|
||||
// Override @primary color with one took from _colors.less
|
||||
@primary: @deep-purple;
|
||||
```
|
||||
|
||||
Then, compiling this file, the entire theme will be compiled using the color chosen by you.
|
||||
|
||||
|
|
@ -57,10 +61,11 @@ Run the `grunt test` command for browser-based Jasmine unit tests.
|
|||
|
||||
Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes.
|
||||
|
||||
### LESS & SASS
|
||||
## LESS & SASS
|
||||
|
||||
Currently only LESS is maintained. The SASS version no longer has a maintainer (#256).
|
||||
The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.
|
||||
The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS.
|
||||
|
||||
The upcoming 4.x version (no branch yet) will be developed using SASS.
|
||||
|
||||
## Support me
|
||||
|
||||
|
|
@ -74,44 +79,112 @@ If you like this project you may support me by donating something on Gittip, sta
|
|||
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
|
||||
|
||||
|
||||
# Documentation
|
||||
## Documentation
|
||||
|
||||
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
|
||||
Material Design ([spec](http://www.google.com/design/spec/material-design/introduction.html)) for Bootstrap provides
|
||||
styles for bootstrap based markup to comply with Material Design concepts.
|
||||
|
||||
### Variations
|
||||
### Color Variations
|
||||
|
||||
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
|
||||
They can be used by adding the class suffix `-material-color` to the desired element and replacing `color` with the desired one.
|
||||
|
||||
Example:
|
||||
|
||||
<button class="btn btn-material-deep-purple">Deep purple button</button>
|
||||
```html
|
||||
<button class="btn btn-material-deep-purple">Deep purple button</button>
|
||||
```
|
||||
|
||||
These colors are taken from the Material Design color palette and are reported below:
|
||||
|
||||
|
||||
|
||||
To take advantage of all the shades please use `material-fullpalette.css`, be aware of its huge size.
|
||||
To take advantage of all the shades please use `material-fullpalette.css`, but please be aware of its huge size.
|
||||
|
||||
### Buttons
|
||||
### Forms
|
||||
|
||||
All inputs should be surrounded by a standard `.form-group`, and as such `material.js` will enforce this. The `.form-group` is
|
||||
used to signal different input styles and variations. See the examples for variations.
|
||||
|
||||
#### Sizing
|
||||
|
||||
In general, it is preferred that sizing be altered with either `.form-group-sm` or `.form-group-lg`. Due to the interconnected
|
||||
nature of inputs, labels, margins and padding, `material.js` will convert any use of `.input-sm` or `.input-lg` to
|
||||
`.form-group-sm` or `.form-group-lg` in order to reduce the necessary markup/variations and get a standard sizing with
|
||||
fewer side effects.
|
||||
|
||||
#### Buttons
|
||||
|
||||
Add `.btn-flat` to a button to make it flat, without shadows.
|
||||
Add `.btn-raised` to a button to add a permanent shadow to it.
|
||||
|
||||
### Inputs
|
||||
#### Inputs
|
||||
|
||||
Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
|
||||
##### Labels
|
||||
|
||||
Add `data-hint="some hint"` to show an hint under the input when the user focus it.
|
||||
The following classes should be placed on the `.form-group` to indicate the label style:
|
||||
|
||||
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
|
||||
- `.label-floating` - renders label as a placeholder, that animates above the field upon focus
|
||||
- `.label-static` - renders label above the field. `input placeholder` attribute can also be used in conjunction
|
||||
- `.label-placeholder` - renders a label as a placeholder only
|
||||
- no label, but use of `input placeholder` attribute - same rendering as `.label-placeholder`
|
||||
|
||||
<div class="radio/checkbox radio-primary">
|
||||
<label>
|
||||
<input type="radio/checkbox" checked>
|
||||
Option one is this
|
||||
</label>
|
||||
##### Hints
|
||||
|
||||
Upon focus, a hint can be displayed. Use any `p | span` with `.help-block`.
|
||||
|
||||
|
||||
##### Examples
|
||||
|
||||
```html
|
||||
<div class="form-group label-static">
|
||||
<label for="i2" class="control-label">label-static</label>
|
||||
<input type="email" class="form-control" id="i2" placeholder="placeholder attribute">
|
||||
<p class="help-block">This is a hint as a <code>p.help-block.hint</code></p>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-floating">
|
||||
<label for="i5" class="control-label">label-floating</label>
|
||||
<input type="email" class="form-control" id="i5">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
|
||||
<div class="form-group label-placeholder">
|
||||
<label for="i5p" class="control-label">label-placeholder</label>
|
||||
<input type="email" class="form-control" id="i5p">
|
||||
<span class="help-block">This is a hint as a <code>span.help-block.hint</code></span>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
#### Radio, Checkbox, Toggle
|
||||
|
||||
Be sure to inspect the source of the demos to find proper markup examples. Remember to use the proper HTML markup.
|
||||
|
||||
Radio example:
|
||||
|
||||
```html
|
||||
<div class="form-group">
|
||||
<label class="col-lg-2 control-label">Radios</label>
|
||||
|
||||
<div class="col-lg-10">
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios" checked="">
|
||||
Option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio" name="optionsRadios">
|
||||
Option two
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Icons
|
||||
|
||||
|
|
@ -123,7 +196,9 @@ Variations are available for every icon, including the original Bootstrap icons.
|
|||
|
||||
The syntax to add a Material icon is:
|
||||
|
||||
<i class="icon icon-material-favorite"></i>
|
||||
```html
|
||||
<i class="icon icon-material-favorite"></i>
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
|
|
@ -131,43 +206,47 @@ A card will expand to fill all of the available width (e.g. column's width). Car
|
|||
|
||||
Here is an example on how to use it:
|
||||
|
||||
<div class="card">
|
||||
```html
|
||||
<div class="card">
|
||||
|
||||
<div class="card-height-indicator"></div>
|
||||
<div class="card-height-indicator"></div>
|
||||
|
||||
<div class="card-content">
|
||||
|
||||
<div class="card-image">
|
||||
<img src="./image.jpg" alt="Loading image...">
|
||||
<h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer">
|
||||
<button class="btn btn-flat">Share</button>
|
||||
<button class="btn btn-flat btn-warning">Learn More</button>
|
||||
</footer>
|
||||
<div class="card-content">
|
||||
|
||||
<div class="card-image">
|
||||
<img src="./image.jpg" alt="Loading image...">
|
||||
<h3 class="card-image-headline">Lorem Ipsum Dolor</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
|
||||
<footer class="card-footer">
|
||||
<button class="btn btn-flat">Share</button>
|
||||
<button class="btn btn-flat btn-warning">Learn More</button>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
Cards will adapt to column's width. The card below will have width equal to col-lg-6:
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3"></div>
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col-lg-3"></div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
...
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Material.js
|
||||
|
||||
|
|
@ -189,12 +268,14 @@ The functions that allows an optional selector are `$.material.ripples`, `$.mate
|
|||
|
||||
You can even override the default values using the `$.material.options` function. The default values are:
|
||||
|
||||
$.material.options = {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
}
|
||||
```javascript
|
||||
$.material.options = {
|
||||
"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple",
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
}
|
||||
```
|
||||
|
||||
### Arrive.js support
|
||||
|
||||
|
|
@ -215,7 +296,9 @@ At the moment RipplesJS does not have its own repository but it will probably ha
|
|||
|
||||
You may want to set a custom color to the ripples of a specific element, to do so write:
|
||||
|
||||
<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
|
||||
```html
|
||||
<button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
|
||||
```
|
||||
|
||||
### noUiSlider
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"name": "bootstrap-material-design",
|
||||
"version": "0.3.1-dev",
|
||||
"homepage": "http://fezvrasta.github.io/bootstrap-material-design",
|
||||
"authors": [
|
||||
"Federico Zivolo <info@mywebexpression.com>"
|
||||
|
|
|
|||
15148
dist/css/material-fullpalette.css
vendored
15148
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
2114
dist/css/material.css
vendored
2114
dist/css/material.css
vendored
File diff suppressed because it is too large
Load Diff
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
0
dist/fonts/Material-Design-Icons.eot
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.eot
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.svg
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.svg
vendored
Executable file → Normal file
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 322 KiB |
0
dist/fonts/Material-Design-Icons.ttf
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.ttf
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.woff
vendored
Executable file → Normal file
0
dist/fonts/Material-Design-Icons.woff
vendored
Executable file → Normal file
130
dist/js/material.js
vendored
130
dist/js/material.js
vendored
|
|
@ -70,36 +70,57 @@
|
|||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
var $input = $(this);
|
||||
|
||||
if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
|
||||
return;
|
||||
}
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$this.after("<div class=floating-label>" + placeholder + "</div>");
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if($formGroup.length === 0){
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
||||
// Add hint label if required
|
||||
if ($this.attr("data-hint")) {
|
||||
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
|
||||
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
|
||||
if ($input.attr("data-hint")) {
|
||||
$input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
|
||||
$input.removeAttr("data-hint");
|
||||
}
|
||||
|
||||
// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
|
||||
var legacySizes = {
|
||||
"input-lg": "form-group-lg",
|
||||
"input-sm": "form-group-sm"
|
||||
};
|
||||
$.each( legacySizes, function( legacySize, standardSize ) {
|
||||
if ($input.hasClass(legacySize)) {
|
||||
$input.removeClass(legacySize);
|
||||
$formGroup.addClass(standardSize);
|
||||
}
|
||||
});
|
||||
|
||||
// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
if ($input.hasClass("floating-label")) {
|
||||
var placeholder = $input.attr("placeholder");
|
||||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$formGroup.addClass("label-floating");
|
||||
$input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
|
||||
// Add at the end of the form-group
|
||||
$formGroup.append("<span class='material-input'></span>");
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
if ($formGroup.find("input[type=file]").length > 0) {
|
||||
$formGroup.addClass("is-fileinput");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -108,36 +129,71 @@
|
|||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
|
||||
$this.addClass("empty");
|
||||
} else {
|
||||
$this.removeClass("empty");
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
||||
if ($input.val() === "" && isValid) {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
else {
|
||||
$formGroup.removeClass("is-empty");
|
||||
}
|
||||
|
||||
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
|
||||
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
|
||||
// the form-group on change.
|
||||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if(isValid){
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
else{
|
||||
$formGroup.addClass("has-error");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function() {
|
||||
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function() {
|
||||
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var $this = $(this);
|
||||
// make sure empty is added back when there is a programmatic value change.
|
||||
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
|
||||
.on("change", ".form-group input", function() {
|
||||
var $input = $(this);
|
||||
if($input.attr("type") == "file") {
|
||||
return;
|
||||
}
|
||||
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = $input.val();
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
})
|
||||
// set the fileinput readonly field with the name of the file
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function() {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = "";
|
||||
$.each(this.files, function(i, file) {
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$this.prev().removeClass("empty");
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$this.prev().addClass("empty");
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
$this.prev().val(value);
|
||||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
|
|
@ -174,7 +230,7 @@
|
|||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", "input", function() {
|
||||
.on("blur", ".form-group input", function() {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
|||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.attr("data-hint")||b.hasClass("floating-label")){if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""!==b.val()||"undefined"!=typeof b[0].checkValidity&&!b[0].checkValidity()?b.removeClass("empty"):b.addClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b=a(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur","input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
|
||||
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.closest(".form-group");0===c.length&&(b.wrap("<div class='form-group'></div>"),c=b.closest(".form-group")),b.attr("data-hint")&&(b.after("<p class='help-block'>"+b.attr("data-hint")+"</p>"),b.removeAttr("data-hint"));var d={"input-lg":"form-group-lg","input-sm":"form-group-sm"};if(a.each(d,function(a,d){b.hasClass(a)&&(b.removeClass(a),c.addClass(d))}),b.hasClass("floating-label")){var e=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var f=b.attr("id"),g="";f&&(g="for='"+f+"'"),c.addClass("label-floating"),b.after("<label "+g+"class='control-label'>"+e+"</label>")}(null===b.val()||"undefined"==b.val()||""===b.val())&&c.addClass("is-empty"),c.append("<span class='material-input'></span>"),c.find("input[type=file]").length>0&&c.addClass("is-fileinput")})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).closest(".form-group").removeClass("is-empty")}).on("keyup change",".form-control",function(){var b=a(this),c=b.closest(".form-group"),d="undefined"==typeof b[0].checkValidity||b[0].checkValidity();""===b.val()&&d?c.addClass("is-empty"):c.removeClass("is-empty"),d?c.removeClass("has-error"):c.addClass("has-error")}).on("focus",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").addClass("is-focused")}).on("blur",".form-control, .form-group.is-fileinput",function(){a(this).closest(".form-group").removeClass("is-focused")}).on("change",".form-group input",function(){var b=a(this);if("file"!=b.attr("type")){var c=b.closest(".form-group"),d=b.val();d?c.removeClass("is-empty"):c.addClass("is-empty")}}).on("change",".form-group.is-fileinput input[type='file']",function(){var b=a(this),c=b.closest(".form-group"),d="";a.each(this.files,function(a,b){d+=b.name+", "}),d=d.substring(0,d.length-2),d?c.removeClass("is-empty"):c.addClass("is-empty"),c.find("input.form-control[readonly]").val(d)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur",".form-group input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
|
||||
//# sourceMappingURL=material.min.js.map
|
||||
2
dist/js/material.min.js.map
vendored
2
dist/js/material.min.js.map
vendored
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$this","attr","hasClass","wrap","placeholder","removeClass","val","addClass","parent","next","is","$input","detach","attachInputEventHandlers","document","on","blur","e","checkValidity","find","value","files","i","file","name","substring","length","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
|
||||
{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","$formGroup","closest","length","wrap","attr","removeAttr","legacySizes","input-lg","input-sm","legacySize","standardSize","hasClass","removeClass","addClass","placeholder","id","forAttribute","val","append","find","attachInputEventHandlers","document","on","blur","e","isValid","checkValidity","value","files","i","file","name","substring","loading","setInterval","$this","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
|
||||
50
dist/test.html
vendored
50
dist/test.html
vendored
|
|
@ -1,50 +0,0 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
|
||||
<link href="css/roboto.min.css" rel="stylesheet">
|
||||
<link href="css/material.min.css" rel="stylesheet">
|
||||
<link href="css/ripples.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Your site -->
|
||||
|
||||
<h1>You can add your site here.</h1>
|
||||
|
||||
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
|
||||
|
||||
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
|
||||
|
||||
|
||||
<p class="bs-component">
|
||||
<a href="javascript:void(0)" class="btn btn-default">Default</a>
|
||||
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
|
||||
<a href="javascript:void(0)" class="btn btn-success">Success</a>
|
||||
<a href="javascript:void(0)" class="btn btn-info">Info</a>
|
||||
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
|
||||
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
|
||||
<a href="javascript:void(0)" class="btn btn-link">Link</a>
|
||||
</p>
|
||||
|
||||
<!-- Your site ends -->
|
||||
|
||||
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="js/ripples.min.js"></script>
|
||||
<script src="js/material.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// This command is used to initialize some elements and make them work properly
|
||||
$.material.init();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1575
index-sass.html
1575
index-sass.html
File diff suppressed because it is too large
Load Diff
360
index.css
Normal file
360
index.css
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-panel {
|
||||
background-color: #009587;
|
||||
height: 144px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.header-panel div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-panel h1 {
|
||||
color: #FFF;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu, .menu * {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
padding: 0;
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px 50px;
|
||||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu ul li.active {
|
||||
background-color: #dedede;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu ul li a {
|
||||
color: rgb(51, 51, 51);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 4;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pages > div {
|
||||
padding: 0 5px;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.pages .header {
|
||||
color: rgb(82, 101, 162);
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 60px;
|
||||
letter-spacing: 1.20000004768372px;
|
||||
}
|
||||
|
||||
.page {
|
||||
transform: translateY(1080px);
|
||||
transition: transform 0 linear;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.page.active {
|
||||
transform: translateY(0px);
|
||||
transition: all 0.3s ease-out;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.opensource {
|
||||
color: rgba(0, 0, 0, 0.62);
|
||||
position: fixed;
|
||||
margin-top: 50px;
|
||||
margin-left: 50px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#source-modal h4 {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#paypal .btn {
|
||||
padding: 5px 30px 6px 30px;
|
||||
}
|
||||
|
||||
#paypal input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cbwrapper div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cbwrapper div:nth-child(2) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#carbonads, #fakecb {
|
||||
border: 1px solid #d5d5d5;
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
overflow: hidden;
|
||||
width: 340px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
height: 142px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-img {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#carbonads .carbon-text, #carbonads .carbon-poweredby {
|
||||
float: left;
|
||||
width: 150px;
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
#carbonads .carbon-text:hover, #carbonads .carbon-poweredby:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#carbonads .carbon-poweredby {
|
||||
color: #9D9D9D;
|
||||
}
|
||||
|
||||
#checkbox .sample1 label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#checkbox .hint {
|
||||
padding-left: 45px;
|
||||
padding-top: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#checkbox .sample1 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#checkbox h2 {
|
||||
font-size: 18.7199993133545px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#checkbox .sample2 {
|
||||
width: 300px;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#checkbox .sample2 {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#checkbox .sample2 .text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#checkbox .sample2 .checkbox {
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*#progress-bar h2 {*/
|
||||
/*font-size: 18.7199993133545px;*/
|
||||
/*font-weight: bold;*/
|
||||
/*margin-bottom: 30px;*/
|
||||
/*}*/
|
||||
|
||||
/*#dialog h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
/*#shadow h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#shadow .sample {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#shadow-sample2 {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
#shadow-sample3 {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*#radio-button h2 {*/
|
||||
/*font-size: 18.7199993133545px;*/
|
||||
/*font-weight: bold;*/
|
||||
/*margin-bottom: 30px;*/
|
||||
/*margin-top: 50px;*/
|
||||
/*}*/
|
||||
|
||||
#radio-button .radio {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
/*#input h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#input .inputs {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/*#input .form-group {*/
|
||||
/*margin: 30px 0;*/
|
||||
/*}*/
|
||||
|
||||
#slider .sample1, #slider .sample2 {
|
||||
padding: 20px 0;
|
||||
background-color: #f0f0f0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#slider .sample2 {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#slider .sample2 .slider {
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
/*#slider h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#slider .slider {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/*#button h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#floating-action-button .btn {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/*#floating-action-button h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
/*#dropdown h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#dropdown .dropdown {
|
||||
font-size: 30px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*#dropdown-menu h2 {*/
|
||||
/*padding: 14px;*/
|
||||
/*margin: 0;*/
|
||||
/*font-size: 16px;*/
|
||||
/*font-weight: 400;*/
|
||||
/*}*/
|
||||
|
||||
#dropdown-menu .sample {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#dropdown-menu .form-group {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/*#toggle-button h2 {*/
|
||||
/*font-size: 18.7199993133545px;*/
|
||||
/*font-weight: bold;*/
|
||||
/*margin-bottom: 30px;*/
|
||||
/*margin-top: 50px;*/
|
||||
/*}*/
|
||||
|
||||
#toggle-button .togglebutton label {
|
||||
margin: 20px 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#toggle-button .togglebutton .toggle {
|
||||
float: right;
|
||||
}
|
||||
2589
index.html
2589
index.html
File diff suppressed because it is too large
Load Diff
|
|
@ -54,7 +54,8 @@
|
|||
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
&.btn-flat {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -92,7 +93,8 @@
|
|||
&:active {
|
||||
.shadow-z-1-hover();
|
||||
}
|
||||
&, .ripple-wrapper {
|
||||
&,
|
||||
.ripple-wrapper {
|
||||
border-radius: 100%;
|
||||
}
|
||||
&.btn-fab-mini {
|
||||
|
|
|
|||
|
|
@ -1,119 +1,151 @@
|
|||
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
|
||||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
.form-group-checkbox-variant(@placeholder-font-size, @line-height){
|
||||
.checkbox {
|
||||
label {
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, #4caf50);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, #4caf50);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
.form-group-checkbox-variant(@md-input-font-size-base, @md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
.form-group-checkbox-variant(@md-input-font-size-small, @md-input-line-height-small);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
.form-group-checkbox-variant(@md-input-font-size-large, @md-input-line-height-large);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
color: @checkbox-label-color;
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: @checkbox-size;
|
||||
width: @checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: @checkbox-size;
|
||||
height: @checkbox-size;
|
||||
border: 2px solid @checkbox-border-color;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off @checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on @checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff @checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn @checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff @checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn @checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
fieldset[disabled] &,
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: @lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @success);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @checkbox-checked-color);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @checkbox-checked-color);
|
||||
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
|
|
|
|||
218
less/_inputs-size.less
Normal file
218
less/_inputs-size.less
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
//
|
||||
// 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 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@{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 {
|
||||
.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 {
|
||||
.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,241 +1,285 @@
|
|||
fieldset[disabled] .form-control, .form-control {
|
||||
&, &:focus, &.focus {
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:disabled {
|
||||
border-style: dashed;
|
||||
border-bottom: 1px solid #757575;
|
||||
@import '_inputs-size.less';
|
||||
|
||||
// usage: .form-group-validation-state(@input-danger);
|
||||
.form-group-validation-state(@name, @color) {
|
||||
|
||||
&.@{name} { // e.g. has-error
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.is-focused .form-control {
|
||||
background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
}
|
||||
label.control-label,
|
||||
.help-block {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset[disabled] .form-control, .form-control {
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.form-group-size-variant(@placeholder-font-size, @label-top-margin, @vertical-padding, @line-height, @label-as-placeholder-shim){
|
||||
@static-font-size: ceil((@label-floating-size-ratio * @placeholder-font-size));
|
||||
@static-line-height: (@label-floating-size-ratio * @line-height);
|
||||
|
||||
select[multiple].form-control {
|
||||
&, &:focus, &.focus {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
@label-as-placeholder-top: -1 * (@vertical-padding + @label-as-placeholder-shim);
|
||||
@label-top: @label-as-placeholder-top - (@placeholder-font-size + @vertical-padding);
|
||||
|
||||
.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: 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-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
fieldset[disabled] .form-control:disabled,
|
||||
.form-control-wrapper .form-control:disabled,
|
||||
.form-control:disabled,
|
||||
fieldset[disabled] .form-control:focus:disabled,
|
||||
.form-control-wrapper .form-control:focus:disabled,
|
||||
.form-control:focus:disabled,
|
||||
fieldset[disabled] .form-control.focus:disabled,
|
||||
.form-control-wrapper .form-control.focus:disabled,
|
||||
.form-control.focus:disabled {
|
||||
border: 0; // Ugly override of Bootstrap border
|
||||
}
|
||||
@help-block-font-size: ceil((@help-block-size-ratio * @placeholder-font-size));
|
||||
@help-block-line-height: (@help-block-size-ratio * @line-height);
|
||||
|
||||
.form-control:focus, .form-control.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;
|
||||
}
|
||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
||||
margin: (@label-top-margin + @static-font-size) 0 0 0;
|
||||
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
|
||||
.floating-label {
|
||||
color: @input-placeholder-color;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
transition: 0.3s ease all;
|
||||
.form-control {
|
||||
.material-placeholder({
|
||||
font-size: @placeholder-font-size;
|
||||
});
|
||||
margin-bottom: @vertical-padding; // must be specified to give help-block vertical space
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
.floating-label { // base
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.form-control:focus ~ .floating-label,
|
||||
.form-control:not(.empty) ~ .floating-label {
|
||||
top: @floating-label-size-ratio * -@font-size-base;
|
||||
font-size: @floating-label-size-ratio * @font-size-base;
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
|
||||
// must also be expressed as form-group padding
|
||||
padding-bottom: @vertical-padding;
|
||||
|
||||
.help-block {
|
||||
margin-top: 0px; // allow the input margin to set-off the top of the help-block
|
||||
font-size: @help-block-font-size;
|
||||
}
|
||||
|
||||
.input-sm + .floating-label { // small
|
||||
font-size: @font-size-small;
|
||||
top: 7px;
|
||||
}
|
||||
.form-control.input-sm:focus ~ .floating-label,
|
||||
.form-control.input-sm:not(.empty) ~.floating-label {
|
||||
top: @floating-label-size-ratio * -@font-size-small;
|
||||
font-size: @floating-label-size-ratio * @font-size-small;
|
||||
// smaller focused or static size
|
||||
label.control-label {
|
||||
font-size: @static-font-size;
|
||||
line-height: @static-line-height;
|
||||
}
|
||||
|
||||
.input-lg + .floating-label {
|
||||
font-size: @font-size-large;
|
||||
top: 10px;
|
||||
}
|
||||
.form-control.input-lg:focus ~ .floating-label,
|
||||
.form-control.input-lg:not(.empty) ~ .floating-label {
|
||||
top: @floating-label-size-ratio * -@font-size-large;
|
||||
font-size: @floating-label-size-ratio * @font-size-large;
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
&.label-placeholder {
|
||||
label.control-label {
|
||||
top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:focus ~ .floating-label {
|
||||
color: @primary;
|
||||
// static or focused floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: @label-top;
|
||||
left: 0;
|
||||
// must repeat because the selector above is more specific than the general label sizing
|
||||
font-size: @static-font-size;
|
||||
line-height: @static-line-height;
|
||||
}
|
||||
}
|
||||
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
|
||||
color: @input-danger;
|
||||
}
|
||||
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
|
||||
background-color: @input-default;
|
||||
}
|
||||
.form-control:invalid {
|
||||
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
}
|
||||
textarea { resize: none; }
|
||||
textarea ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
// Hints
|
||||
.hint {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
display: none;
|
||||
}
|
||||
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
|
||||
display: block;
|
||||
}
|
||||
|
||||
select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Fix for OS X
|
||||
select {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.has-warning {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
//border: solid 1px red;
|
||||
position: relative;
|
||||
|
||||
// -----
|
||||
// Inputs
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.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;
|
||||
float: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
// Placeholders and and labels-as-placeholders should look the same
|
||||
.material-placeholder({
|
||||
color: @input-placeholder-color;
|
||||
font-weight: normal;
|
||||
});
|
||||
|
||||
|
||||
//&:textarea { // appears to be an invalid selector
|
||||
// height: 40px;
|
||||
//}
|
||||
|
||||
&[readonly],
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient(@input-warning, @input-warning), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-warning;
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-image: none;
|
||||
border-bottom: 1px dotted @input-underline-color;
|
||||
}
|
||||
}
|
||||
&.has-error {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient(@input-danger, @input-danger), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-danger;
|
||||
|
||||
&.is-focused .form-control {
|
||||
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;
|
||||
}
|
||||
}
|
||||
&.has-success {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient(@input-success, @input-success), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-success;
|
||||
|
||||
// -----
|
||||
// Labels
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
&.label-static,
|
||||
&.label-placeholder,
|
||||
&.label-floating {
|
||||
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
&.has-info {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient(@input-info, @input-info), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: @input-info;
|
||||
|
||||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: @input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
|
||||
// hide label-placeholders when the field is not empty
|
||||
&.label-placeholder:not(.is-empty){
|
||||
label.control-label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
.variations(~".is-focused.label-placeholder label.control-label", color, @input-placeholder-color); // default label color variations
|
||||
|
||||
// default floating size/location
|
||||
.form-group-size-variant(@md-input-font-size-base, @md-label-top-margin-base, @md-input-padding-base-vertical, @md-input-line-height-base, @md-label-as-placeholder-shim-base);
|
||||
|
||||
// sm floating size/location
|
||||
&.form-group-sm {
|
||||
.form-group-size-variant(@md-input-font-size-small, @md-label-top-margin-small, @md-input-padding-small-vertical, @md-input-line-height-small, @md-label-as-placeholder-shim-small);
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.form-group-lg {
|
||||
.form-group-size-variant(@md-input-font-size-large, @md-label-top-margin-large, @md-input-padding-large-vertical, @md-input-line-height-large, @md-label-as-placeholder-shim-large);
|
||||
}
|
||||
|
||||
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
||||
.help-block {
|
||||
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
.help-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
|
||||
.generic-variations(~" .form-control:focus", @primary, {
|
||||
.generic-variations(~".is-focused .form-control", @primary, {
|
||||
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
|
||||
});
|
||||
.variations(~" .control-label", color, @lightbg-text);
|
||||
.variations(~" input.form-control:focus ~ .floating-label", color, @input-default);
|
||||
|
||||
}
|
||||
.form-group-validation-state(has-warning, @input-warning);
|
||||
.form-group-validation-state(has-error, @input-danger);
|
||||
.form-group-validation-state(has-success, @input-success);
|
||||
.form-group-validation-state(has-info, @input-info);
|
||||
|
||||
.input-group {
|
||||
.form-control-wrapper {
|
||||
.form-control {
|
||||
float: none;
|
||||
textarea {
|
||||
resize: none;
|
||||
& ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
|
||||
select {
|
||||
appearance: none; // Fix for OS X
|
||||
|
||||
& ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:focus, &.focus {
|
||||
|
||||
.form-group.is-focused & {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
border-color: @input-underline-color;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input files (kinda hack)
|
||||
.form-control-wrapper input[type=file] {
|
||||
.input-group-button-variation(@vertical-padding) {
|
||||
.input-group-btn {
|
||||
.btn {
|
||||
margin: 0 0 @vertical-padding 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------
|
||||
// input group/addon related styles
|
||||
|
||||
// default margin
|
||||
.input-group-button-variation(@md-input-padding-base-vertical);
|
||||
|
||||
.form-group {
|
||||
//.form-control {
|
||||
// float: none;
|
||||
//}
|
||||
|
||||
// sm margin
|
||||
&.form-group-sm {
|
||||
.input-group-button-variation(@md-input-padding-small-vertical);
|
||||
}
|
||||
|
||||
// lg margin
|
||||
&.form-group-lg {
|
||||
.input-group-button-variation(@md-input-padding-large-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group { // may be in or outside of form-group
|
||||
.input-group-btn {
|
||||
padding: 0 12px; // match addon spacing
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -246,3 +290,4 @@ select.form-control {
|
|||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,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
|
||||
|
|
|
|||
|
|
@ -155,15 +155,33 @@
|
|||
|
||||
.navbar-form {
|
||||
margin-top: 16px;
|
||||
.form-control-wrapper .form-control, .form-control {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.form-control-wrapper {
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
.form-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.material-input:before,
|
||||
&.is-focused .material-input:after {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group .form-control,
|
||||
.form-control {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
|
||||
//---
|
||||
//height: @input-height-base;
|
||||
@bs-line-height-base: 1.428571429;
|
||||
@bs-line-height-computed: floor((@font-size-base * @bs-line-height-base)); // ~20px
|
||||
height: (@bs-line-height-computed + 8px);
|
||||
font-size: @font-size-base;
|
||||
line-height: @bs-line-height-base;
|
||||
//---
|
||||
}
|
||||
}
|
||||
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
|
||||
|
|
@ -171,7 +189,7 @@
|
|||
background-color: @material-color;
|
||||
color: @material-text-color;
|
||||
// deeply defined to override welljumbo class without !impotant need
|
||||
.navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
|
||||
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
|
||||
color: @material-text-color;
|
||||
}
|
||||
.dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
border: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
&.floating-label-fix input {
|
||||
&.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
> div, > .item {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,40 @@
|
|||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group-radio-variant(@placeholder-font-size, @line-height){
|
||||
.radio {
|
||||
label {
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
.form-group-radio-variant(@md-input-font-size-base, @md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
.form-group-radio-variant(@md-input-font-size-small, @md-input-line-height-small);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
.form-group-radio-variant(@md-input-font-size-large, @md-input-line-height-large);
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
color: @radio-label-color;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -14,7 +43,7 @@
|
|||
transition-duration: 0.2s;
|
||||
}
|
||||
.circle {
|
||||
border: 2px solid @lightbg-text;
|
||||
border: 2px solid @radio-border-color;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -72,7 +101,6 @@
|
|||
input[type=radio][disabled] ~ .check {
|
||||
background-color: @lightbg-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
|
|
|
|||
|
|
@ -1,69 +1,96 @@
|
|||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, label, input, .toggle {
|
||||
user-select: none;
|
||||
.form-group-toggle-variant(@placeholder-font-size, @line-height){
|
||||
.togglebutton {
|
||||
label {
|
||||
font-size: @placeholder-font-size;
|
||||
line-height: @line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height:0;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled] + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled] + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked + .toggle:after{
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
// Ripple off and disabled
|
||||
input[type=checkbox] + .toggle:active:after,
|
||||
input[type=checkbox][disabled] + .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type=checkbox]:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
.form-group-toggle-variant(@md-input-font-size-base, @md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
.form-group-toggle-variant(@md-input-font-size-small, @md-input-line-height-small);
|
||||
}
|
||||
|
||||
// Switch bg on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
|
||||
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
|
||||
background-color: fade(@material-color, 50%);
|
||||
});
|
||||
// Handle on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
|
||||
.variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
|
||||
// Ripple on
|
||||
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px fade(@material-color, 10%);
|
||||
});
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
.form-group-toggle-variant(@md-input-font-size-large, @md-input-line-height-large);
|
||||
}
|
||||
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, label, input, .toggle {
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: @togglebutton-label-color;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled] + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled] + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
// Ripple off and disabled
|
||||
input[type=checkbox] + .toggle:active:after,
|
||||
input[type=checkbox][disabled] + .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type=checkbox]:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Switch bg on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
|
||||
.generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
|
||||
background-color: fade(@material-color, 50%);
|
||||
});
|
||||
// Handle on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
|
||||
.variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
|
||||
// Ripple on
|
||||
.generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,10 +74,70 @@
|
|||
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||
|
||||
@screen-sm: 768px;
|
||||
@screen-sm-min: @screen-sm;
|
||||
|
||||
|
||||
// Global Material variables
|
||||
@material-border-radius: 2px;
|
||||
|
||||
// --------------------
|
||||
// inputs
|
||||
@input-placeholder-color: #BDBDBD;
|
||||
@label-floating-size-ratio: 75 / 100;
|
||||
@help-block-size-ratio: 75 / 100;
|
||||
@input-underline-color: #D2D2D2;
|
||||
|
||||
@md-input-font-size-base: 16px;
|
||||
@md-input-font-size-large: ceil((@font-size-base * 1.25)); // ~20px
|
||||
@md-input-font-size-small: ceil((@font-size-base * 0.75)); // ~12px
|
||||
|
||||
// size when static or floating with focus i.e. 16px
|
||||
//@md-input-label-font-size-base: ceil((@label-floating-size-ratio * @md-input-font-size-base));
|
||||
//@md-input-label-font-size-small:ceil(( @label-floating-size-ratio * @md-input-font-size-small));
|
||||
//@md-input-label-font-size-large: ceil((@label-floating-size-ratio * @md-input-font-size-large));
|
||||
|
||||
//** Unit-less `line-height` for use in components like buttons.
|
||||
@md-input-line-height-base: 1.428571429; // 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)); // ~20px
|
||||
@md-input-line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
|
||||
@md-input-line-height-small: 1.5;
|
||||
|
||||
//## 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 - 1px; // was 6.
|
||||
@md-input-padding-base-horizontal: 0px; // was 12.
|
||||
@md-label-as-placeholder-shim-base: 0px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-base: 16px;
|
||||
|
||||
@md-input-padding-large-vertical: 10px - 1px; // 10
|
||||
@md-input-padding-large-horizontal: 0px; // 16
|
||||
@md-label-as-placeholder-shim-large: -4px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-large: 16px;
|
||||
|
||||
@md-input-padding-small-vertical: 4px - 1px; // 5
|
||||
@md-input-padding-small-horizontal: 0px; // 10
|
||||
@md-label-as-placeholder-shim-small: 8px; // manual adjustment of label top when positioned as placeholder
|
||||
@md-label-top-margin-small: 12px;
|
||||
|
||||
@md-input-padding-xs-vertical: 2px; // 1
|
||||
@md-input-padding-xs-horizontal: 0px; // 5
|
||||
|
||||
@md-input-border-radius-base: 4px;
|
||||
@md-input-border-radius-large: 6px;
|
||||
@md-input-border-radius-small: 3px;
|
||||
|
||||
|
||||
//** Default `.form-control` height
|
||||
@md-input-height-base: (@md-input-line-height-computed + (@md-input-padding-base-vertical * 2) + 2);
|
||||
//** 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);
|
||||
//** 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);
|
||||
|
||||
|
||||
|
||||
|
||||
// Card
|
||||
@card-body-text: @lightbg-text;
|
||||
@card-body-background: #fff;
|
||||
|
|
@ -90,15 +150,21 @@
|
|||
@checkbox-size: 20px;
|
||||
@checkbox-animation-ripple: 500ms;
|
||||
@checkbox-animation-check: 0.3s;
|
||||
@checkbox-checked-color: #4caf50;
|
||||
@checkbox-label-color: rgba(0, 0, 0, .54);
|
||||
@checkbox-border-color: @checkbox-label-color;
|
||||
|
||||
// Popovers and Popups
|
||||
@popover-background: rgba(101, 101, 101, 0.9);
|
||||
@popover-color: #ececec;
|
||||
|
||||
// Inputs
|
||||
@input-placeholder-color: #BDBDBD;
|
||||
@floating-label-size-ratio: 70 / 100;
|
||||
|
||||
// Dropdown Menu
|
||||
@dropdown-radius: 2px;
|
||||
@dropdown-font-size: 16px;
|
||||
|
||||
// Toggle
|
||||
@togglebutton-label-color: @checkbox-label-color;
|
||||
|
||||
// Radio:
|
||||
@radio-label-color: @checkbox-label-color;
|
||||
@radio-border-color: @checkbox-border-color;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bootstrap-material-design",
|
||||
"version": "0.3.1-dev",
|
||||
"version": "0.4.0",
|
||||
"description": "Material Design for Bootstrap 3",
|
||||
"main": "scripts/index.js",
|
||||
"scripts": {
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
"jquery": ">=1.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bootstrap": ">=3.0",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-autoprefixer": "^1.0.1",
|
||||
"grunt-contrib-clean": "^0.6.0",
|
||||
|
|
@ -39,16 +38,17 @@
|
|||
"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",
|
||||
"grunt-bootlint": "latest",
|
||||
"grunt-html": "latest",
|
||||
"grunt-csswring": "^1.1.0",
|
||||
"grunt-dependency-installer": "^0.2.0",
|
||||
"grunt-exec": "^0.4.6",
|
||||
"grunt-less-to-sass": "latest",
|
||||
"grunt-newer": "^0.7.0",
|
||||
"jquery": ">=1.9.1",
|
||||
"jshint-stylish": "^1.0.0",
|
||||
"load-grunt-tasks": "^0.6.0",
|
||||
"spacejam": "^1.1.1"
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn,
|
||||
.input-group-btn .btn {
|
||||
&.btn-flat {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -86,7 +87,8 @@
|
|||
&:active {
|
||||
@include shadow-z-1-hover();
|
||||
}
|
||||
&, .ripple-wrapper {
|
||||
&,
|
||||
.ripple-wrapper {
|
||||
border-radius: 100%;
|
||||
}
|
||||
&.btn-fab-mini {
|
||||
|
|
|
|||
|
|
@ -1,122 +1,153 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
|
||||
.form-horizontal .checkbox {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.checkbox {
|
||||
transform: translateZ(0); // Force 3d rendering
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: $checkbox-size;
|
||||
width: $checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off $checkbox-animation-check forwards;
|
||||
@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
|
||||
.checkbox {
|
||||
label {
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on $checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff $checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn $checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff $checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn $checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: $lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
@include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
@include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
@include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
color: $checkbox-label-color;
|
||||
}
|
||||
|
||||
// Hide native checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
z-index: -1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.checkbox-material {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
background-color: rgba(0,0,0,.84);
|
||||
height: $checkbox-size;
|
||||
width: $checkbox-size;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale3d(2.3, 2.3, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
border: 2px solid $checkbox-border-color;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
box-shadow:
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0 0 0 0 inset;
|
||||
animation: checkbox-off $checkbox-animation-check forwards;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:focus + .checkbox-material .check:after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:before {
|
||||
box-shadow:
|
||||
0 0 0 10px,
|
||||
10px -10px 0 10px,
|
||||
32px 0px 0 20px,
|
||||
0px 32px 0 20px,
|
||||
-5px 5px 0 10px,
|
||||
20px -12px 0 11px;
|
||||
animation: checkbox-on $checkbox-animation-check forwards;
|
||||
}
|
||||
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material:before {
|
||||
animation: rippleOff $checkbox-animation-ripple;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material:before {
|
||||
animation: rippleOn $checkbox-animation-ripple;
|
||||
}
|
||||
|
||||
// Ripple effect on click
|
||||
input[type=checkbox]:not(:checked) + .checkbox-material .check:after {
|
||||
animation: rippleOff $checkbox-animation-ripple forwards;
|
||||
}
|
||||
input[type=checkbox]:checked + .checkbox-material .check:after {
|
||||
animation: rippleOn $checkbox-animation-ripple forwards;
|
||||
}
|
||||
|
||||
// Style for disabled inputs
|
||||
fieldset[disabled] &,
|
||||
fieldset[disabled] & input[type=checkbox],
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
||||
input[type=checkbox][disabled] + .circle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||
background-color: $lightbg-text;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color);
|
||||
@include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkbox-on {
|
||||
0% {
|
||||
|
|
|
|||
220
sass/_inputs-size.scss
Normal file
220
sass/_inputs-size.scss
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
// 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 pulled from bootstrap and altered for less/sass compatibility
|
||||
@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,241 +1,287 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
fieldset[disabled] .form-control, .form-control {
|
||||
&, &:focus, &.focus {
|
||||
padding: 0;
|
||||
float: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:disabled {
|
||||
border-style: dashed;
|
||||
border-bottom: 1px solid #757575;
|
||||
@import '_inputs-size';
|
||||
|
||||
// usage: @include form-group-validation-state($input-danger);
|
||||
@mixin form-group-validation-state($name, $color){
|
||||
|
||||
&.#{$name} { // e.g. has-error
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
&.is-focused .form-control {
|
||||
background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
|
||||
}
|
||||
label.control-label,
|
||||
.help-block {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset[disabled] .form-control, .form-control {
|
||||
&:textarea {
|
||||
height: 40px;
|
||||
}
|
||||
@mixin form-group-size-variant($placeholder-font-size, $label-top-margin, $vertical-padding, $line-height, $label-as-placeholder-shim){
|
||||
$static-font-size: ceil(($label-floating-size-ratio * $placeholder-font-size)) !default;
|
||||
$static-line-height: ($label-floating-size-ratio * $line-height) !default;
|
||||
|
||||
$label-as-placeholder-top: -1 * ($vertical-padding + $label-as-placeholder-shim) !default;
|
||||
$label-top: $label-as-placeholder-top - ($placeholder-font-size + $vertical-padding) !default;
|
||||
|
||||
$help-block-font-size: ceil(($help-block-size-ratio * $placeholder-font-size)) !default;
|
||||
$help-block-line-height: ($help-block-size-ratio * $line-height) !default;
|
||||
|
||||
// form-group margin-top must be large enough for the label and the label's top padding since label is absolutely positioned
|
||||
margin: ($label-top-margin + $static-font-size) 0 0 0;
|
||||
|
||||
.form-control {
|
||||
@include material-placeholder {
|
||||
font-size: $placeholder-font-size;
|
||||
|
||||
}
|
||||
|
||||
select[multiple].form-control {
|
||||
&, &:focus, &.focus {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.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: 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-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: transparent;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
fieldset[disabled] .form-control:disabled,
|
||||
.form-control-wrapper .form-control:disabled,
|
||||
.form-control:disabled,
|
||||
fieldset[disabled] .form-control:focus:disabled,
|
||||
.form-control-wrapper .form-control:focus:disabled,
|
||||
.form-control:focus:disabled,
|
||||
fieldset[disabled] .form-control.focus:disabled,
|
||||
.form-control-wrapper .form-control.focus:disabled,
|
||||
.form-control.focus:disabled {
|
||||
border: 0; // Ugly override of Bootstrap border
|
||||
}
|
||||
|
||||
.form-control:focus, .form-control.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;
|
||||
}
|
||||
|
||||
|
||||
.form-control-wrapper {
|
||||
position: relative;
|
||||
|
||||
.floating-label {
|
||||
color: $input-placeholder-color;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
transition: 0.3s ease all;
|
||||
margin-bottom: $vertical-padding; // must be specified to give help-block vertical space
|
||||
}
|
||||
|
||||
// Input sizes
|
||||
.floating-label { // base
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
.form-control:focus ~ .floating-label,
|
||||
.form-control:not(.empty) ~ .floating-label {
|
||||
top: $floating-label-size-ratio * -$font-size-base;
|
||||
font-size: $floating-label-size-ratio * $font-size-base;
|
||||
// upon collapsing margins, the largest margin is honored which collapses the form-control margin, so the form-control margin
|
||||
// must also be expressed as form-group padding
|
||||
padding-bottom: $vertical-padding;
|
||||
|
||||
.help-block {
|
||||
margin-top: 0px; // allow the input margin to set-off the top of the help-block
|
||||
font-size: $help-block-font-size;
|
||||
}
|
||||
|
||||
.input-sm + .floating-label { // small
|
||||
font-size: $font-size-small;
|
||||
top: 7px;
|
||||
}
|
||||
.form-control.input-sm:focus ~ .floating-label,
|
||||
.form-control.input-sm:not(.empty) ~.floating-label {
|
||||
top: $floating-label-size-ratio * -$font-size-small;
|
||||
font-size: $floating-label-size-ratio * $font-size-small;
|
||||
// smaller focused or static size
|
||||
label.control-label {
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
}
|
||||
|
||||
.input-lg + .floating-label {
|
||||
font-size: $font-size-large;
|
||||
top: 10px;
|
||||
}
|
||||
.form-control.input-lg:focus ~ .floating-label,
|
||||
.form-control.input-lg:not(.empty) ~ .floating-label {
|
||||
top: $floating-label-size-ratio * -$font-size-large;
|
||||
font-size: $floating-label-size-ratio * $font-size-large;
|
||||
// larger labels as placeholders
|
||||
&.label-floating,
|
||||
&.label-placeholder {
|
||||
label.control-label {
|
||||
top: $label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:focus ~ .floating-label {
|
||||
color: $primary;
|
||||
// static or focused floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty) {
|
||||
label.control-label {
|
||||
top: $label-top;
|
||||
left: 0;
|
||||
// must repeat because the selector above is more specific than the general label sizing
|
||||
font-size: $static-font-size;
|
||||
line-height: $static-line-height;
|
||||
}
|
||||
}
|
||||
.form-control:not(.empty):invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
|
||||
color: $input-danger;
|
||||
}
|
||||
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
|
||||
background-color: $input-default;
|
||||
}
|
||||
.form-control:invalid {
|
||||
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
|
||||
}
|
||||
textarea { resize: none; }
|
||||
textarea ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
// Hints
|
||||
.hint {
|
||||
position: absolute;
|
||||
font-size: 80%;
|
||||
display: none;
|
||||
}
|
||||
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
|
||||
display: block;
|
||||
}
|
||||
|
||||
select ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Fix for OS X
|
||||
select {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.has-warning {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient($input-warning, $input-warning), linear-gradient($input-underline-color, $input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: $input-warning;
|
||||
}
|
||||
}
|
||||
&.has-error {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: $input-danger;
|
||||
}
|
||||
}
|
||||
&.has-success {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient($input-success, $input-success), linear-gradient($input-underline-color, $input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: $input-success;
|
||||
}
|
||||
}
|
||||
&.has-info {
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
}
|
||||
.material-input:focus, .form-control:focus, .form-control.focus {
|
||||
background-image: linear-gradient($input-info, $input-info), linear-gradient($input-underline-color, $input-underline-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
.control-label, input.form-control:focus ~ .floating-label {
|
||||
color: $input-info;
|
||||
}
|
||||
}
|
||||
// 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);
|
||||
@include variations(unquote(" .control-label"), color, $lightbg-text);
|
||||
@include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
|
||||
//border: solid 1px red;
|
||||
position: relative;
|
||||
|
||||
// -----
|
||||
// Inputs
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
.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;
|
||||
float: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
// Placeholders and and labels-as-placeholders should look the same
|
||||
@include material-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.form-control-wrapper {
|
||||
.form-control {
|
||||
float: none;
|
||||
|
||||
//&:textarea { // appears to be an invalid selector
|
||||
// height: 40px;
|
||||
//}
|
||||
|
||||
&[readonly],
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-image: none;
|
||||
border-bottom: 1px dotted $input-underline-color;
|
||||
}
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
&.is-focused .form-control {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.input-group-btn .btn {
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
|
||||
// -----
|
||||
// Labels
|
||||
//
|
||||
// Reference http://www.google.com/design/spec/components/text-fields.html
|
||||
// MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
|
||||
&.label-static,
|
||||
&.label-placeholder,
|
||||
&.label-floating {
|
||||
|
||||
label.control-label {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
}
|
||||
}
|
||||
|
||||
label.control-label {
|
||||
// same label properties as form-group placeholder
|
||||
color: $input-placeholder-color;
|
||||
font-weight: normal;
|
||||
margin: 16px 0 0 0; // std and lg
|
||||
}
|
||||
|
||||
// hide label-placeholders when the field is not empty
|
||||
&.label-placeholder:not(.is-empty){
|
||||
label.control-label{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include variations(unquote(" label.control-label"), color, $input-placeholder-color); // default label color variations
|
||||
@include variations(unquote(".is-focused label.control-label"), color, $input-default); // focused label color variations
|
||||
@include variations(unquote(".is-focused.label-placeholder label.control-label"), color, $input-placeholder-color); // default label color variations
|
||||
|
||||
// default floating size/location
|
||||
@include form-group-size-variant($md-input-font-size-base, $md-label-top-margin-base, $md-input-padding-base-vertical, $md-input-line-height-base, $md-label-as-placeholder-shim-base);
|
||||
|
||||
// sm floating size/location
|
||||
&.form-group-sm {
|
||||
@include form-group-size-variant($md-input-font-size-small, $md-label-top-margin-small, $md-input-padding-small-vertical, $md-input-line-height-small, $md-label-as-placeholder-shim-small);
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.form-group-lg {
|
||||
@include form-group-size-variant($md-input-font-size-large, $md-label-top-margin-large, $md-input-padding-large-vertical, $md-input-line-height-large, $md-label-as-placeholder-shim-large);
|
||||
}
|
||||
|
||||
// Hints - position: absolute approach - uses no vertical space, text wrapping - not so good.
|
||||
.help-block {
|
||||
position: absolute; // do not use position: absolute because width/wrapping isn't automatic and overflows occur
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
.help-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
& ~ .form-control-highlight {
|
||||
margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none; // Fix for OS X
|
||||
|
||||
& ~ .material-input:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
&:focus, &.focus {
|
||||
|
||||
.form-group.is-focused & {
|
||||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
border-color: $input-underline-color;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
&,
|
||||
.form-group.is-focused & {
|
||||
height: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input files (kinda hack)
|
||||
.form-control-wrapper input[type=file] {
|
||||
@mixin input-group-button-variation($vertical-padding){
|
||||
.input-group-btn {
|
||||
.btn {
|
||||
margin: 0 0 $vertical-padding 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------
|
||||
// input group/addon related styles
|
||||
|
||||
// default margin
|
||||
@include input-group-button-variation($md-input-padding-base-vertical);
|
||||
|
||||
.form-group {
|
||||
//.form-control {
|
||||
// float: none;
|
||||
//}
|
||||
|
||||
// sm margin
|
||||
&.form-group-sm {
|
||||
@include input-group-button-variation($md-input-padding-small-vertical);
|
||||
}
|
||||
|
||||
// lg margin
|
||||
&.form-group-lg {
|
||||
@include input-group-button-variation($md-input-padding-large-vertical);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group { // may be in or outside of form-group
|
||||
.input-group-btn {
|
||||
padding: 0 12px; // match addon spacing
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -246,3 +292,4 @@ select.form-control {
|
|||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,14 @@
|
|||
// This file is NOT automatically converted and must be manually merged
|
||||
|
||||
@import "mixins-utilities";
|
||||
|
||||
// Placeholder text
|
||||
@mixin material-placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
||||
|
||||
// variations(unquote(""), background-color, #FFF);
|
||||
@mixin variations($extra, $material-param-1, $default) {
|
||||
@include generic-variations($extra, $default, "variations-content", $material-param-1);
|
||||
|
|
@ -89,7 +96,7 @@
|
|||
background-color: $material-color;
|
||||
color: $material-text-color;
|
||||
// deeply defined to override welljumbo class without !impotant need
|
||||
.navbar-form .form-control-wrapper input.form-control::placeholder, .navbar-form input.form-control::placeholder {
|
||||
.navbar-form .form-group input.form-control::placeholder, .navbar-form input.form-control::placeholder {
|
||||
color: $material-text-color;
|
||||
}
|
||||
.dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -157,15 +157,33 @@
|
|||
|
||||
.navbar-form {
|
||||
margin-top: 16px;
|
||||
.form-control-wrapper .form-control, .form-control {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
.form-control-wrapper {
|
||||
.material-input:before, input:focus ~ .material-input:after {
|
||||
.form-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.material-input:before,
|
||||
&.is-focused .material-input:after {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group .form-control,
|
||||
.form-control {
|
||||
border-color: inherit;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// re-normalize inputs in a navbar the size of standard bootstrap since our normal inputs are larger by spec than bootstrap
|
||||
//---
|
||||
//height: $input-height-base;
|
||||
$bs-line-height-base: 1.428571429 !default;
|
||||
$bs-line-height-computed: floor(($font-size-base * $bs-line-height-base)) !default; // ~20px
|
||||
height: ($bs-line-height-computed + 8px);
|
||||
font-size: $font-size-base;
|
||||
line-height: $bs-line-height-base;
|
||||
//---
|
||||
}
|
||||
}
|
||||
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss navbar-variations-content
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
border: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
&.floating-label-fix input {
|
||||
&.label-floating-fix input {
|
||||
opacity: 0;
|
||||
}
|
||||
> div, > .item {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,40 @@
|
|||
.form-horizontal .radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@mixin form-group-radio-variant($placeholder-font-size, $line-height){
|
||||
.radio {
|
||||
label {
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
@include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
@include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
@include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 45px;
|
||||
position: relative;
|
||||
color: $radio-label-color;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -16,7 +45,7 @@
|
|||
transition-duration: 0.2s;
|
||||
}
|
||||
.circle {
|
||||
border: 2px solid $lightbg-text;
|
||||
border: 2px solid $radio-border-color;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -74,7 +103,6 @@
|
|||
input[type=radio][disabled] ~ .check {
|
||||
background-color: $lightbg-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes rippleOn {
|
||||
|
|
|
|||
|
|
@ -1,67 +1,94 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, label, input, .toggle {
|
||||
user-select: none;
|
||||
@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
|
||||
.togglebutton {
|
||||
label {
|
||||
font-size: $placeholder-font-size;
|
||||
line-height: $line-height;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height:0;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled] + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled] + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked + .toggle:after{
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
// Ripple off and disabled
|
||||
input[type=checkbox] + .toggle:active:after,
|
||||
input[type=checkbox][disabled] + .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type=checkbox]:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
// default label size/location
|
||||
@include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
|
||||
|
||||
// sm label size/location
|
||||
&.form-group-sm {
|
||||
@include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small);
|
||||
}
|
||||
|
||||
// Switch bg on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
|
||||
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
|
||||
// Handle on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
|
||||
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
|
||||
// Ripple on
|
||||
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
@include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large);
|
||||
}
|
||||
|
||||
.togglebutton {
|
||||
vertical-align: middle;
|
||||
&, label, input, .toggle {
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: $togglebutton-label-color;
|
||||
|
||||
// Hide original checkbox
|
||||
input[type=checkbox] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
// Switch bg off and disabled
|
||||
.toggle,
|
||||
input[type=checkbox][disabled] + .toggle {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: rgba(80, 80, 80, 0.7);
|
||||
border-radius: 15px;
|
||||
margin-right: 10px;
|
||||
transition: background 0.3s ease;
|
||||
vertical-align: middle;
|
||||
}
|
||||
// Handle off
|
||||
.toggle:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
|
||||
left: -5px;
|
||||
top: -2px;
|
||||
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
// Handle disabled
|
||||
input[type=checkbox][disabled] + .toggle:after,
|
||||
input[type=checkbox][disabled]:checked + .toggle:after {
|
||||
background-color: #BDBDBD;
|
||||
}
|
||||
// Ripple off and disabled
|
||||
input[type=checkbox] + .toggle:active:after,
|
||||
input[type=checkbox][disabled] + .toggle:active:after {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type=checkbox]:checked + .toggle:after {
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// Switch bg on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
|
||||
@include bg-color-variations(unquote(" label input[type=checkbox]:checked + .toggle"), $primary, (50/100));
|
||||
// Handle on
|
||||
// SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
|
||||
@include variations(unquote(" label input[type=checkbox]:checked + .toggle:after"), background-color, $primary);
|
||||
// Ripple on
|
||||
@include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,10 +76,70 @@ $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;
|
||||
$label-floating-size-ratio: 75 / 100 !default;
|
||||
$help-block-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: ceil(($label-floating-size-ratio * $md-input-font-size-base)) !default;
|
||||
//$md-input-label-font-size-small:ceil(( $label-floating-size-ratio * $md-input-font-size-small)) !default;
|
||||
//$md-input-label-font-size-large: ceil(($label-floating-size-ratio * $md-input-font-size-large)) !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
|
||||
$md-input-line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
|
||||
$md-input-line-height-small: 1.5 !default;
|
||||
|
||||
//## 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 - 1px !default; // was 6.
|
||||
$md-input-padding-base-horizontal: 0px !default; // was 12.
|
||||
$md-label-as-placeholder-shim-base: 0px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-base: 16px !default;
|
||||
|
||||
$md-input-padding-large-vertical: 10px - 1px !default; // 10
|
||||
$md-input-padding-large-horizontal: 0px !default; // 16
|
||||
$md-label-as-placeholder-shim-large: -4px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-large: 16px !default;
|
||||
|
||||
$md-input-padding-small-vertical: 4px - 1px !default; // 5
|
||||
$md-input-padding-small-horizontal: 0px !default; // 10
|
||||
$md-label-as-placeholder-shim-small: 8px !default; // manual adjustment of label top when positioned as placeholder
|
||||
$md-label-top-margin-small: 12px !default;
|
||||
|
||||
$md-input-padding-xs-vertical: 2px !default; // 1
|
||||
$md-input-padding-xs-horizontal: 0px !default; // 5
|
||||
|
||||
$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;
|
||||
|
|
@ -92,15 +152,21 @@ $background-disabled: #eaeaea !default;
|
|||
$checkbox-size: 20px !default;
|
||||
$checkbox-animation-ripple: 500ms !default;
|
||||
$checkbox-animation-check: 0.3s !default;
|
||||
$checkbox-checked-color: #4caf50 !default;
|
||||
$checkbox-label-color: rgba(0, 0, 0, .54) !default;
|
||||
$checkbox-border-color: $checkbox-label-color !default;
|
||||
|
||||
// Popovers and Popups
|
||||
$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;
|
||||
|
||||
// Toggle
|
||||
$togglebutton-label-color: $checkbox-label-color !default;
|
||||
|
||||
// Radio:
|
||||
$radio-label-color: $checkbox-label-color !default;
|
||||
$radio-border-color: $checkbox-border-color !default;
|
||||
|
|
|
|||
|
|
@ -70,36 +70,57 @@
|
|||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
var $input = $(this);
|
||||
|
||||
if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
|
||||
return;
|
||||
}
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
if ($this.hasClass("floating-label")) {
|
||||
var placeholder = $this.attr("placeholder");
|
||||
$this.attr("placeholder", null).removeClass("floating-label");
|
||||
$this.after("<div class=floating-label>" + placeholder + "</div>");
|
||||
// Requires form-group standard markup (will add it if necessary)
|
||||
var $formGroup = $input.closest(".form-group"); // note that form-group may be grandparent in the case of an input-group
|
||||
if($formGroup.length === 0){
|
||||
$input.wrap("<div class='form-group'></div>");
|
||||
$formGroup = $input.closest(".form-group"); // find node after attached (otherwise additional attachments don't work)
|
||||
}
|
||||
|
||||
// Add hint label if required
|
||||
if ($this.attr("data-hint")) {
|
||||
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
|
||||
// Legacy - Add hint label if using the old shorthand data-hint attribute on the input
|
||||
if ($input.attr("data-hint")) {
|
||||
$input.after("<p class='help-block'>" + $input.attr("data-hint") + "</p>");
|
||||
$input.removeAttr("data-hint");
|
||||
}
|
||||
|
||||
// Legacy - Change input-sm/lg to form-group-sm/lg instead (preferred standard and simpler css/less variants)
|
||||
var legacySizes = {
|
||||
"input-lg": "form-group-lg",
|
||||
"input-sm": "form-group-sm"
|
||||
};
|
||||
$.each( legacySizes, function( legacySize, standardSize ) {
|
||||
if ($input.hasClass(legacySize)) {
|
||||
$input.removeClass(legacySize);
|
||||
$formGroup.addClass(standardSize);
|
||||
}
|
||||
});
|
||||
|
||||
// Legacy - Add label-floating if using old shorthand <input class="floating-label" placeholder="foo">
|
||||
if ($input.hasClass("floating-label")) {
|
||||
var placeholder = $input.attr("placeholder");
|
||||
$input.attr("placeholder", null).removeClass("floating-label");
|
||||
var id = $input.attr("id");
|
||||
var forAttribute = "";
|
||||
if(id) {
|
||||
forAttribute = "for='" + id + "'";
|
||||
}
|
||||
$formGroup.addClass("label-floating");
|
||||
$input.after("<label " + forAttribute + "class='control-label'>" + placeholder + "</label>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
|
||||
// Add at the end of the form-group
|
||||
$formGroup.append("<span class='material-input'></span>");
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
if ($formGroup.find("input[type=file]").length > 0) {
|
||||
$formGroup.addClass("is-fileinput");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -108,36 +129,71 @@
|
|||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
$(this).closest(".form-group").removeClass("is-empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if ($this.val() === "" && (typeof $this[0].checkValidity === "undefined" || $this[0].checkValidity())) {
|
||||
$this.addClass("empty");
|
||||
} else {
|
||||
$this.removeClass("empty");
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());
|
||||
|
||||
if ($input.val() === "" && isValid) {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
else {
|
||||
$formGroup.removeClass("is-empty");
|
||||
}
|
||||
|
||||
// Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
|
||||
// Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
|
||||
// the form-group on change.
|
||||
//
|
||||
// NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
|
||||
// BUT, I've left it here for backwards compatibility.
|
||||
if(isValid){
|
||||
$formGroup.removeClass("has-error");
|
||||
}
|
||||
else{
|
||||
$formGroup.addClass("has-error");
|
||||
}
|
||||
})
|
||||
.on("focus", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").addClass("focus");
|
||||
.on("focus", ".form-control, .form-group.is-fileinput", function() {
|
||||
$(this).closest(".form-group").addClass("is-focused"); // add class to form-group
|
||||
})
|
||||
.on("blur", ".form-control-wrapper.fileinput", function() {
|
||||
$(this).find("input").removeClass("focus");
|
||||
.on("blur", ".form-control, .form-group.is-fileinput", function() {
|
||||
$(this).closest(".form-group").removeClass("is-focused"); // remove class from form-group
|
||||
})
|
||||
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
||||
var $this = $(this);
|
||||
// make sure empty is added back when there is a programmatic value change.
|
||||
// NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
|
||||
.on("change", ".form-group input", function() {
|
||||
var $input = $(this);
|
||||
if($input.attr("type") == "file") {
|
||||
return;
|
||||
}
|
||||
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = $input.val();
|
||||
if (value) {
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
})
|
||||
// set the fileinput readonly field with the name of the file
|
||||
.on("change", ".form-group.is-fileinput input[type='file']", function() {
|
||||
var $input = $(this);
|
||||
var $formGroup = $input.closest(".form-group");
|
||||
var value = "";
|
||||
$.each(this.files, function(i, file) {
|
||||
value += file.name + ", ";
|
||||
});
|
||||
value = value.substring(0, value.length - 2);
|
||||
if (value) {
|
||||
$this.prev().removeClass("empty");
|
||||
$formGroup.removeClass("is-empty");
|
||||
} else {
|
||||
$this.prev().addClass("empty");
|
||||
$formGroup.addClass("is-empty");
|
||||
}
|
||||
$this.prev().val(value);
|
||||
$formGroup.find("input.form-control[readonly]").val(value);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
|
|
@ -174,7 +230,7 @@
|
|||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", "input", function() {
|
||||
.on("blur", ".form-group input", function() {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user