mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-13 05:07:01 +03:00
Merge branch 'rosskevin-master' into documentation-prototype
Conflicts: Gruntfile.js
This commit is contained in:
Kevin Ross
commit
06ce20c464
18
.npmignore
Normal file
18
.npmignore
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
demo\
|
||||
fonts\
|
||||
meteor\
|
||||
scripts\
|
||||
test\
|
||||
|
||||
.editorconfig
|
||||
.gitignore
|
||||
.jshintrc
|
||||
.npmignore
|
||||
.travis.yml
|
||||
.versions
|
||||
bootstrap-elements.html
|
||||
bower.json
|
||||
CONTRIBUTING.md
|
||||
Gruntfile.js
|
||||
index.html
|
||||
package.js
|
||||
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
|
||||
|
|
|
|||
220
CONTRIBUTING.md
220
CONTRIBUTING.md
|
|
@ -1,11 +1,219 @@
|
|||
## Playground
|
||||
# Contributing to bootsrap-material-design
|
||||
|
||||
Use this pen to test and develop new features of Material Design for Bootstrap:
|
||||
Looking to contribute something to bootsrap-material-design? **Here's how you can help.**
|
||||
|
||||
http://codepen.io/FezVrasta/pen/ihmea
|
||||
Please take a moment to review this document in order to make the contribution
|
||||
process easy and effective for everyone involved.
|
||||
|
||||
It already includes every needed dependency and is based on the latest version of the theme.
|
||||
Following these guidelines helps to communicate that you respect the time of
|
||||
the developers managing and developing this open source project. In return,
|
||||
they should reciprocate that respect in addressing your issue or assessing
|
||||
patches and features.
|
||||
|
||||
## Grunt
|
||||
|
||||
**Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks!
|
||||
## Using the issue tracker
|
||||
|
||||
The [issue tracker](https://github.com/FezVrasta/bootstrap-material-design/issues) is
|
||||
the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests)
|
||||
and [submitting pull requests](#pull-requests), but please respect the following
|
||||
restrictions:
|
||||
|
||||
* Please **do not** use the issue tracker for personal support requests. Stack
|
||||
Overflow ([`bootstrap-material-design`](https://stackoverflow.com/questions/tagged/bootstrap-material-design) tag) is the best place to get help.
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
* Please **do not** open issues or pull requests regarding the code in dependencies such as:
|
||||
[`Bootstrap`](https://github.com/twbs/bootstrap) (open them in their respective repositories).
|
||||
|
||||
* Please **close your own issue** once it is resolved.
|
||||
|
||||
|
||||
## Issues and labels
|
||||
|
||||
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
|
||||
|
||||
- `bug confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap.
|
||||
- `docs & examples` - Issues for improving or updating our documentation or examples.
|
||||
- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`).
|
||||
- `enhancement` - Issues for improving existing features
|
||||
- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more.
|
||||
- `help wanted` - Issues we need or would love help from the community to resolve.
|
||||
- `js` - Issues stemming from our compiled or source JavaScript files.
|
||||
|
||||
For a complete look at our labels, see the [project labels page](https://github.com/FezVrasta/bootstrap-material-design/labels).
|
||||
|
||||
|
||||
## Bug reports
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||
Good bug reports are extremely helpful, so thanks!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu)
|
||||
and [lint your HTML](https://github.com/twbs/bootlint) to ensure your
|
||||
problem isn't caused by a simple error in your own code.
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported.
|
||||
|
||||
2. **Check if the issue has been fixed** — try to reproduce it using the
|
||||
latest `master` or development branch in the repository.
|
||||
|
||||
3. **Isolate the problem** — ideally create a [reduced test
|
||||
case](https://css-tricks.com/reduced-test-cases/) and a live example.
|
||||
[This CodePen](http://codepen.io/rosskevin/pen/VvRgrN) is a starter template.
|
||||
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
information. Please try to be as detailed as possible in your report. What is
|
||||
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? Do other browsers show the bug differently? What
|
||||
would you expect to be the outcome? All these details will help people to fix
|
||||
any potential bugs.
|
||||
|
||||
Example:
|
||||
|
||||
> Short and descriptive example bug report title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` - a link to the reduced test case (via the [CodePen template](http://codepen.io/rosskevin/pen/VvRgrN))
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
|
||||
## Feature requests
|
||||
|
||||
Feature requests are welcome. But take a moment to find out whether your idea
|
||||
fits with the scope and aims of the project and the [Google Material Design specification itself](http://www.google.com/design/spec/material-design/introduction.html). It's up to *you* to make a strong
|
||||
case to convince the project's developers of the merits of this feature. Please
|
||||
provide as much detail and context as possible.
|
||||
|
||||
|
||||
## Pull requests
|
||||
|
||||
Good pull requests—patches, improvements, new features—are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
**Please ask first** before embarking on any significant pull request (e.g.
|
||||
implementing features, refactoring code, porting to a different language),
|
||||
otherwise you risk spending a lot of time working on something that the
|
||||
project's developers might not want to merge into the project.
|
||||
|
||||
Please adhere to the [coding guidelines](#code-guidelines) used throughout the
|
||||
project (indentation, accurate comments, etc.) and any other requirements
|
||||
(such as test coverage).
|
||||
|
||||
**In general, do not edit `dist` or `sass` files
|
||||
directly!** Those files are automatically generated. You should edit the
|
||||
source files in [`/less/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/less)
|
||||
and/or [`/scripts/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/scripts) instead.
|
||||
|
||||
Similarly, when contributing to Bootstrap's documentation, you should edit the
|
||||
documentation source files in
|
||||
[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/FezVrasta/bootstrap-material-design/tree/master/docs).
|
||||
**Do not edit the `gh-pages` branch.** That branch is generated from the
|
||||
documentation source files and is managed separately by the bootstrap-material-design Team.
|
||||
|
||||
Adhering to the following process is the best way to get your work
|
||||
included in the project:
|
||||
|
||||
1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
|
||||
and configure the remotes:
|
||||
|
||||
```bash
|
||||
# Clone your fork of the repo into the current directory
|
||||
git clone https://github.com/<your-username>/bootstrap-material-design.git
|
||||
# Navigate to the newly cloned directory
|
||||
cd bootstrap
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/FezVrasta/bootstrap-material-design.git
|
||||
```
|
||||
|
||||
2. If you cloned a while ago, get the latest changes from upstream:
|
||||
|
||||
```bash
|
||||
git checkout master
|
||||
git pull upstream master
|
||||
```
|
||||
|
||||
3. Create a new topic branch (off the main project development branch) to
|
||||
contain your feature, change, or fix:
|
||||
|
||||
```bash
|
||||
git checkout -b <topic-branch-name>
|
||||
```
|
||||
|
||||
4. Commit your changes in logical chunks with messages written in english. Please adhere to these [git commit
|
||||
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your code is unlikely be merged into the main project. Use Git's
|
||||
[interactive rebase](https://help.github.com/articles/interactive-rebase)
|
||||
feature to tidy up your commits before making them public.
|
||||
|
||||
5. Locally merge (or rebase) the upstream development branch into your topic branch:
|
||||
|
||||
```bash
|
||||
git pull [--rebase] upstream master
|
||||
```
|
||||
|
||||
6. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||
with a clear title and description against the `master` branch.
|
||||
|
||||
**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
|
||||
license your work under the terms of the [MIT License](LICENSE) (if it
|
||||
includes code changes) and under the terms of the
|
||||
[Creative Commons Attribution 3.0 Unported License](docs/LICENSE)
|
||||
(if it includes documentation changes).
|
||||
|
||||
|
||||
## Code guidelines
|
||||
|
||||
### HTML
|
||||
|
||||
[Adhere to the Code Guide.](http://codeguide.co/#html)
|
||||
|
||||
- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).
|
||||
- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`.
|
||||
- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility.
|
||||
|
||||
### CSS
|
||||
|
||||
[Adhere to the Code Guide.](http://codeguide.co/#css)
|
||||
|
||||
- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast).
|
||||
- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details.
|
||||
|
||||
### JS
|
||||
|
||||
- No semicolons (in client-side JS)
|
||||
- 2 spaces (no tabs)
|
||||
- strict mode
|
||||
- "Attractive"
|
||||
|
||||
### Checking coding style
|
||||
|
||||
Run `grunt build` before committing to ensure your changes follow our coding standards.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).
|
||||
By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE).
|
||||
|
|
|
|||
59
Gruntfile.js
59
Gruntfile.js
|
|
@ -17,6 +17,29 @@ module.exports = function (grunt) {
|
|||
}
|
||||
},
|
||||
|
||||
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: {
|
||||
|
|
@ -24,7 +47,7 @@ module.exports = function (grunt) {
|
|||
files: [{
|
||||
expand: true,
|
||||
cwd: "less",
|
||||
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less"],
|
||||
src: ["*.less", "!_mixins.less", "!_mixins-fullpalette.less", "!_mixins-shared.less"],
|
||||
ext: ".scss",
|
||||
dest: "sass"
|
||||
}],
|
||||
|
|
@ -93,6 +116,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
|
||||
|
|
@ -333,9 +362,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"],
|
||||
|
|
@ -343,18 +376,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}"
|
||||
]
|
||||
|
|
@ -404,6 +439,7 @@ module.exports = function (grunt) {
|
|||
grunt.registerTask("material", [
|
||||
"material:less",
|
||||
"material:js",
|
||||
"material:fonts",
|
||||
"material:sass"
|
||||
]);
|
||||
|
||||
|
|
@ -413,6 +449,8 @@ module.exports = function (grunt) {
|
|||
]);
|
||||
|
||||
grunt.registerTask("material:less", [
|
||||
"htmllint",
|
||||
"bootlint",
|
||||
"less:material",
|
||||
"less:materialfullpalette",
|
||||
"less:roboto",
|
||||
|
|
@ -427,6 +465,9 @@ module.exports = function (grunt) {
|
|||
"copy:material",
|
||||
"uglify:material"
|
||||
]);
|
||||
grunt.registerTask("material:fonts", [
|
||||
"copy:fonts"
|
||||
]);
|
||||
|
||||
grunt.registerTask("ripples", [
|
||||
"ripples:less",
|
||||
|
|
@ -468,6 +509,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"]);
|
||||
};
|
||||
|
|
|
|||
241
README.md
241
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,89 +31,160 @@ 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.
|
||||
The only difference is that `material-fullpalette.css` has the full colors palette available (large file), the other one has just the primary colors (small file).
|
||||
|
||||
#### 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.
|
||||
|
||||
## Development
|
||||
## Support
|
||||
|
||||
We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
|
||||
After cloning the repo, run `npm install` to ensure you have all dev dependencies.
|
||||
|
||||
Run the `grunt build` command to run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
## Support me
|
||||
|
||||
If you like this project you may support me by donating something on Gittip, starring this repository or reporting bugs and ideas in the issue section.
|
||||
If you like this project you may support it by donating via Gittip, starring this repository or reporting issues. All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/VvRgrN) test case where possible.
|
||||
|
||||
[](https://www.gratipay.com/FezVrasta/)
|
||||
[](https://github.com/FezVrasta/bootstrap-material-design/issues)
|
||||
|
||||
## Contribute
|
||||
|
||||
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
|
||||
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
|
||||
|
||||
## Development
|
||||
|
||||
We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
|
||||
After cloning the repo, run `npm install` to ensure you have all dev dependencies.
|
||||
|
||||
### Grunt
|
||||
|
||||
- `grunt build` - run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
|
||||
- `grunt test` - browser-based Jasmine unit tests.
|
||||
- `grunt serve` - build and fire up an http server with live-reload and a watch for development purposes.
|
||||
|
||||
### LESS & SASS
|
||||
|
||||
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.
|
||||
|
||||
|
||||
# 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,47 +206,51 @@ 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
|
||||
## material.js
|
||||
|
||||
`Material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
|
||||
`material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
|
||||
|
||||
### Functions
|
||||
|
||||
|
|
@ -181,7 +260,7 @@ Cards will adapt to column's width. The card below will have width equal to col-
|
|||
* `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
|
||||
* `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.
|
||||
|
||||
### Apply Material.js only to specific elements
|
||||
### Apply only to specific elements
|
||||
|
||||
Every function expects an optional value that will be used as a selector for the function; for example,
|
||||
`$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`.
|
||||
|
|
@ -189,16 +268,18 @@ 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
|
||||
|
||||
If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `Material.js` to every new element added via JavaScript.
|
||||
If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript.
|
||||
|
||||
## Plugins
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -240,3 +323,7 @@ Read more about [Bootstrap Material Datepicker](https://github.com/T00rk/bootstr
|
|||
## Compatibility
|
||||
|
||||
Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work.
|
||||
|
||||
|
||||
## License
|
||||
[MIT License](LICENSE)
|
||||
|
|
|
|||
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>"
|
||||
|
|
|
|||
15163
dist/css/material-fullpalette.css
vendored
15163
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
2129
dist/css/material.css
vendored
2129
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":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAA2B,GAAbD,EAAIC,OAEvE,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SAEEC,OAAS,EACTC,SAAW,EACXC,UAAY,EACZC,cAAgB,EAChBC,OAAS,EACTC,QAAU,EACVC,UAAY,EAEZC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,cACA,oEACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBV,SAAY,SAASW,GAEnB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQW,kBACtCK,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,mEAETb,aAAgB,SAASU,GAEvB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQY,sBACtCI,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,+BAETZ,MAAS,SAASS,GAEhB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQa,eACtCG,OAAO,cACPlB,KAAK,UAAU,GACfmB,MAAM,wDAEThB,MAAS,SAASa,GAChB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQU,eACtCM,OAAO,cACPlB,KAAK,UAAU,GACfoB,KAAM,WACL,GAAIC,GAAQ/B,EAAE2B,KAEd,IAAKI,EAAMC,KAAK,cAAiBD,EAAME,SAAS,kBAAhD,CAOA,GAJAF,EAAMG,KAAK,0CACXH,EAAMF,MAAM,sCAGRE,EAAME,SAAS,kBAAmB,CACpC,GAAIE,GAAcJ,EAAMC,KAAK,cAC7BD,GAAMC,KAAK,cAAe,MAAMI,YAAY,kBAC5CL,EAAMF,MAAM,6BAA+BM,EAAc,UAc3D,GAVIJ,EAAMC,KAAK,cACbD,EAAMF,MAAM,mBAAqBE,EAAMC,KAAK,aAAe,WAIzC,OAAhBD,EAAMM,OAAiC,aAAfN,EAAMM,OAAwC,KAAhBN,EAAMM,QAC9DN,EAAMO,SAAS,SAIbP,EAAMQ,SAASC,OAAOC,GAAG,eAAgB,CAC3CV,EAAMQ,SAASD,SAAS,YACxB,IAAII,GAASX,EAAMQ,SAASC,OAAOG,QACnCZ,GAAMF,MAAMa,QAIlBE,yBAA4B,WAC1B5C,EAAE6C,UACDC,GAAG,SAAU,iCAAkC,WAAa9C,EAAE2B,MAAMoB,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1C/C,EAAQ+C,IACThD,EAAE2B,MAAMS,YAAY,WAGvBU,GAAG,eAAgB,gBAAiB,WACnC,GAAIf,GAAQ/B,EAAE2B,KACM,MAAhBI,EAAMM,OAAmD,mBAA3BN,GAAM,GAAGkB,gBAAiClB,EAAM,GAAGkB,gBAGnFlB,EAAMK,YAAY,SAFlBL,EAAMO,SAAS,WAKlBQ,GAAG,QAAS,kCAAmC,WAC9C9C,EAAE2B,MAAMuB,KAAK,SAASZ,SAAS,WAEhCQ,GAAG,OAAQ,kCAAmC,WAC7C9C,EAAE2B,MAAMuB,KAAK,SAASd,YAAY,WAEnCU,GAAG,SAAU,8CAA+C,WAC3D,GAAIf,GAAQ/B,EAAE2B,MACVwB,EAAQ,EACZnD,GAAE8B,KAAKH,KAAKyB,MAAO,SAASC,EAAGC,GAC7BH,GAASG,EAAKC,KAAO,OAEvBJ,EAAQA,EAAMK,UAAU,EAAGL,EAAMM,OAAS,GACtCN,EACFpB,EAAM2B,OAAOtB,YAAY,SAEzBL,EAAM2B,OAAOpB,SAAS,SAExBP,EAAM2B,OAAOrB,IAAIc,MAGrBrC,QAAW,SAASY,GAClB1B,EAAE,EAAa0B,EAAWC,KAAKf,QAAQQ,aAAaN,WAEtDK,SAAY,WAEV,GAAIwC,GAAUC,YAAY,WACxB5D,EAAE,yBAAyB8B,KAAK,WAC9B,GAAIC,GAAQ/B,EAAE2B,KACVI,GAAMM,OAASN,EAAMM,QAAUN,EAAMC,KAAK,UAC5CD,EAAM8B,QAAQ,aAGjB,IAGHC,YAAW,WACTC,cAAcJ,IACb,MAELK,4BAA+B,WAE7B,GAAIC,EACJjE,GAAE6C,UACDC,GAAG,QAAS,QAAS,WACpB,GAAIoB,GAAUlE,EAAE2B,MAAMwC,QAAQ,QAAQjB,KAAK,SAASkB,IAAI,cACxDH,GAAUL,YAAY,WACpBM,EAAQpC,KAAK,WACX,GAAIC,GAAQ/B,EAAE2B,KACVI,GAAMM,QAAUN,EAAMC,KAAK,UAC7BD,EAAM8B,QAAQ,aAGjB,OAEJf,GAAG,OAAQ,QAAS,WACnBiB,cAAcE,MAGlBI,KAAQ,WACN,GAAIC,GAAYtE,EAAE6C,SAEd7C,GAAEuE,GAAGzD,SAAWa,KAAKf,QAAQE,SAC/Ba,KAAKb,UAEHa,KAAKf,QAAQC,QACfc,KAAKd,QACLc,KAAKiB,4BAEHjB,KAAKf,QAAQG,UACfY,KAAKZ,WAEHY,KAAKf,QAAQI,cACfW,KAAKX,eAEHW,KAAKf,QAAQK,OACfU,KAAKV,QAEHU,KAAKf,QAAQO,WACfQ,KAAKR,WACLQ,KAAKqC,+BAGHnB,SAAS3B,QAAUS,KAAKf,QAAQM,SAC9BlB,EAAEuE,GAAGzD,SAAWa,KAAKf,QAAQE,SAC/BwD,EAAUpD,OAAOS,KAAKf,QAAQQ,YAAa,WACzCpB,EAAEW,SAASG,QAAQd,EAAE2B,SAGrBA,KAAKf,QAAQC,OACfyD,EAAUpD,OAAOS,KAAKf,QAAQU,cAAe,WAC3CtB,EAAEW,SAASE,MAAMb,EAAE2B,SAGnBA,KAAKf,QAAQG,UACfuD,EAAUpD,OAAOS,KAAKf,QAAQW,iBAAkB,WAC9CvB,EAAEW,SAASI,SAASf,EAAE2B,SAGtBA,KAAKf,QAAQK,OACfqD,EAAUpD,OAAOS,KAAKf,QAAQa,cAAe,WAC3CzB,EAAEW,SAASM,MAAMjB,EAAE2B,SAGnBA,KAAKf,QAAQI,cACfsD,EAAUpD,OAAOS,KAAKf,QAAQY,qBAAsB,WAClDxB,EAAEW,SAASK,aAAahB,EAAE2B,aAQnC6C","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,287 @@
|
|||
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, focused, or autofill floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty),
|
||||
&.label-floating input.form-control:-webkit-autofill {
|
||||
& ~ label.control-label, // #559 webkit chrome autofill `.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label`
|
||||
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 +292,4 @@ select.form-control {
|
|||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,21 +84,7 @@ legend {
|
|||
@import "_progress.less";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
color: @btn-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: @btn-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: @btn-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: @btn-success;
|
||||
}
|
||||
.text-info {
|
||||
color: @btn-info;
|
||||
}
|
||||
@import "_typography.less";
|
||||
|
||||
@import "_tabs.less";
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
15
less/_typography.less
Normal file
15
less/_typography.less
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.text-warning {
|
||||
color: @btn-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: @btn-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: @btn-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: @btn-success;
|
||||
}
|
||||
.text-info {
|
||||
color: @btn-info;
|
||||
}
|
||||
|
|
@ -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.1",
|
||||
"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",
|
||||
|
|
@ -40,16 +39,17 @@
|
|||
"grunt-contrib-jasmine": "^0.8.0",
|
||||
"grunt-jekyll": "~0.4.2",
|
||||
"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,121 +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 {
|
||||
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,289 @@
|
|||
// 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, focused, or autofill floating labels
|
||||
&.label-static,
|
||||
&.label-floating.is-focused,
|
||||
&.label-floating:not(.is-empty),
|
||||
&.label-floating input.form-control:-webkit-autofill {
|
||||
& ~ label.control-label, // #559 webkit chrome autofill - input.form-control:-webkit-autofill ~ label.control-label
|
||||
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 +294,4 @@ select.form-control {
|
|||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,21 +86,7 @@ legend {
|
|||
@import '_progress';
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
color: $btn-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: $btn-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: $btn-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: $btn-success;
|
||||
}
|
||||
.text-info {
|
||||
color: $btn-info;
|
||||
}
|
||||
@import '_typography';
|
||||
|
||||
@import '_tabs';
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
17
sass/_typography.scss
Normal file
17
sass/_typography.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
|
||||
.text-warning {
|
||||
color: $btn-warning;
|
||||
}
|
||||
.text-primary {
|
||||
color: $btn-primary;
|
||||
}
|
||||
.text-danger {
|
||||
color: $btn-danger;
|
||||
}
|
||||
.text-success {
|
||||
color: $btn-success;
|
||||
}
|
||||
.text-info {
|
||||
color: $btn-info;
|
||||
}
|
||||
|
|
@ -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