major changes
This commit is contained in:
Rohit
15
bower_components/pretty-checkbox/.bower.json
vendored
Normal file
15
bower_components/pretty-checkbox/.bower.json
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "pretty-checkbox",
|
||||
"homepage": "https://github.com/lokesh-coder/pretty-checkbox",
|
||||
"version": "3.0.3",
|
||||
"_release": "3.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v3.0.3",
|
||||
"commit": "c225070a9bbc1ff416d624fd94858ae9c67656a1"
|
||||
},
|
||||
"_source": "https://github.com/lokesh-coder/pretty-checkbox.git",
|
||||
"_target": "^3.0.3",
|
||||
"_originalSource": "pretty-checkbox",
|
||||
"_direct": true
|
||||
}
|
||||
32
bower_components/pretty-checkbox/.gitignore
vendored
Normal file
32
bower_components/pretty-checkbox/.gitignore
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
# Node
|
||||
node_modules
|
||||
npm-debug.log
|
||||
package-lock.json
|
||||
.npmrc
|
||||
|
||||
# Yarn
|
||||
yarn-error.log
|
||||
yarn.lock
|
||||
|
||||
# JetBrains
|
||||
.idea/
|
||||
|
||||
# VS Code
|
||||
.vscode/
|
||||
.history
|
||||
|
||||
# Windows
|
||||
Thumbs.db
|
||||
Desktop.ini
|
||||
|
||||
# Mac
|
||||
.DS_Store
|
||||
|
||||
# Temporary files
|
||||
coverage/
|
||||
docs
|
||||
tmp
|
||||
test
|
||||
|
||||
# Logs
|
||||
.log
|
||||
4
bower_components/pretty-checkbox/.stylelintrc
vendored
Normal file
4
bower_components/pretty-checkbox/.stylelintrc
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "stylelint-config-recommended-scss",
|
||||
"rules":{}
|
||||
}
|
||||
22
bower_components/pretty-checkbox/.travis.yml
vendored
Normal file
22
bower_components/pretty-checkbox/.travis.yml
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
sudo: required
|
||||
dist: trusty
|
||||
language: node_js
|
||||
node_js:
|
||||
- node
|
||||
cache:
|
||||
yarn: true
|
||||
notifications:
|
||||
email: false
|
||||
before_install:
|
||||
- echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
|
||||
after_success:
|
||||
- 'if [ ${TRAVIS_PULL_REQUEST} = "false" ]; then
|
||||
npm run ci;
|
||||
npm run release;
|
||||
npm publish --access=public;
|
||||
npm run log;
|
||||
fi'
|
||||
branches:
|
||||
only:
|
||||
- staging
|
||||
- /^greenkeeper/.*$/
|
||||
111
bower_components/pretty-checkbox/Gulpfile.js
vendored
Normal file
111
bower_components/pretty-checkbox/Gulpfile.js
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
var gulp = require('gulp');
|
||||
var browserSync = require('browser-sync');
|
||||
var sass = require('gulp-sass');
|
||||
var rename = require('gulp-rename');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var headerComment = require('gulp-header-comment');
|
||||
var gulpStylelint = require('gulp-stylelint');
|
||||
var stylefmt = require('gulp-stylefmt');
|
||||
let cleanCSS = require('gulp-clean-css');
|
||||
var gulpSequence = require('gulp-sequence')
|
||||
var del = require('del');
|
||||
var reload = browserSync.reload;
|
||||
|
||||
module.exports = gulp;
|
||||
|
||||
/* BROWSER SYNC */
|
||||
gulp.task('browser-sync', function () {
|
||||
browserSync({
|
||||
port: 3040,
|
||||
server: {
|
||||
baseDir: "./",
|
||||
directory: true
|
||||
},
|
||||
https: true
|
||||
});
|
||||
});
|
||||
|
||||
/* BROWSER SYNC RELOAD */
|
||||
gulp.task('browser-sync-reload', function () {
|
||||
browserSync.reload();
|
||||
});
|
||||
|
||||
/* LIST SCSS */
|
||||
gulp.task('lint:scss', function () {
|
||||
return gulp
|
||||
.src('src/**/*.scss')
|
||||
.pipe(gulpStylelint({
|
||||
reporters: [{
|
||||
formatter: 'string',
|
||||
console: true
|
||||
}]
|
||||
}));
|
||||
});
|
||||
|
||||
/* COMPILE SCSS */
|
||||
gulp.task('compile:scss', function () {
|
||||
return gulp.src('src/**/*.scss')
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded'
|
||||
})
|
||||
.on('error', sass.logError))
|
||||
.pipe(autoprefixer({
|
||||
browsers: ['> 5%', 'last 4 versions'],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(sourcemaps.write('./maps'))
|
||||
.pipe(gulp.dest('dist'))
|
||||
.pipe(browserSync.reload({
|
||||
stream: true
|
||||
}));
|
||||
});
|
||||
|
||||
/* FORMAT CSS */
|
||||
gulp.task('format:css', function () {
|
||||
return gulp.src('dist/*.css')
|
||||
.pipe(stylefmt())
|
||||
.pipe(gulp.dest('dist'));
|
||||
})
|
||||
|
||||
/* CLEAN DIST */
|
||||
gulp.task('clean:dist', function () {
|
||||
return del(['dist']);
|
||||
});
|
||||
|
||||
/* MINIFY CSS */
|
||||
gulp.task('minify:css', () => {
|
||||
return gulp.src('dist/*.css')
|
||||
.pipe(cleanCSS({
|
||||
compatibility: 'ie9'
|
||||
}))
|
||||
.pipe(rename({
|
||||
suffix: '.min'
|
||||
}))
|
||||
.pipe(gulp.dest('dist'));
|
||||
});
|
||||
|
||||
/* SET HEADER */
|
||||
gulp.task('set:header', function () {
|
||||
return gulp.src('dist/*.css')
|
||||
.pipe(headerComment(`
|
||||
pretty-checkbox.css
|
||||
|
||||
A pure CSS library to beautify checkbox and radio buttons
|
||||
|
||||
Source: <%= pkg.repository.link %>
|
||||
Demo: <%= pkg.homepage %>
|
||||
|
||||
Copyright (c) <%= moment().format('YYYY') %> <%= _.capitalize(pkg.author) %>
|
||||
`))
|
||||
.pipe(gulp.dest('dist'))
|
||||
});
|
||||
|
||||
gulp.task('build', function (cb) {
|
||||
gulpSequence('lint:scss', 'clean:dist', 'compile:scss', 'format:css', 'minify:css', 'set:header', cb)
|
||||
});
|
||||
|
||||
gulp.task('default', ['compile:scss', 'browser-sync'], function () {
|
||||
gulp.watch("src/**/*.scss", ['compile:scss', 'browser-sync-reload']);
|
||||
});
|
||||
9
bower_components/pretty-checkbox/LICENSE
vendored
Normal file
9
bower_components/pretty-checkbox/LICENSE
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Lokesh Rajendran ( lokesh.aero@gmail.com )
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
299
bower_components/pretty-checkbox/README.md
vendored
Normal file
299
bower_components/pretty-checkbox/README.md
vendored
Normal file
@@ -0,0 +1,299 @@
|
||||
<h1 align="center">
|
||||
<br>
|
||||
<a href="https://lokesh-coder.github.io/pretty-checkbox/"><img src="logo.png" alt="Pretty checkbox" width="100"></a>
|
||||
<br> <br> pretty-checkbox.css <br>
|
||||
</h1>
|
||||
|
||||
<h4 align="center">A pure CSS library to beautify checkbox and radio buttons.</h4>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/lokesh-coder/pretty-checkbox/releases">
|
||||
<img src="https://img.shields.io/github/release/lokesh-coder/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Github Release">
|
||||
</a>
|
||||
<a href="LICENSE">
|
||||
<img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Licence">
|
||||
</a>
|
||||
<a href="#">
|
||||
<img src="https://img.shields.io/npm/dm/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Downloads">
|
||||
</a>
|
||||
</p>
|
||||
<br>
|
||||
|
||||
<div class="highlight highlight-source-shell">
|
||||
<pre>
|
||||
<div align="center"><strong >Demo and documentation</strong></div>
|
||||
<div align="center"><a align="center" href="https://lokesh-coder.github.io/pretty-checkbox/">https://lokesh-coder.github.io/pretty-checkbox/</a></div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<img src="preview.gif" alt="Pretty checkbox preview"/>
|
||||
</div>
|
||||
|
||||
### Features
|
||||
* Basic
|
||||
- **Shapes** - *Square*, *Curve*, *Round*
|
||||
- **Variants** - *Default*, *Fill*, *Thick*
|
||||
- **Colors** - *Primary*, *Success*, *Info*, *Warning*, *Danger*
|
||||
- **Color types** - *Solid*, *Outline*
|
||||
- **Animations** - *Smooth*, *Tada*, *Jelly*, *Pulse*, *Rotate*
|
||||
* Switch - iOS style - *Outline*, *Fill*, *Slim*
|
||||
* Responsive
|
||||
* No JavaScript
|
||||
* Custom Font Icons
|
||||
* SVG Icons
|
||||
* Image support
|
||||
* Toggle between icons / SVG's / images
|
||||
* Lock
|
||||
* State - *Focus*, *Hover*, *Indeterminate*
|
||||
* Supports frameworks - *Bootstrap*, *Foundation*, *Sematic UI*, *Bulma*, ...
|
||||
* SCSS customization
|
||||
* Supports all modern browsers, including mobile devices
|
||||
* Print friendly
|
||||
* and more... ( *I am kidding, that's all!* )
|
||||
|
||||
### Installation
|
||||
- **From CLI**
|
||||
|
||||
Install the library from [`npm`](https://www.npmjs.com/package/pretty-checkbox) or [`yarn`](https://yarnpkg.com/en/package/pretty-checkbox) package manager
|
||||
|
||||
```sh
|
||||
> npm install pretty-checkbox // or
|
||||
> yarn add pretty-checkbox
|
||||
```
|
||||
Add `pretty-checkbox.min.css` in your html
|
||||
|
||||
<br>
|
||||
|
||||
- **From CDN** ( [`jsDelivr`](https://www.jsdelivr.com/package/npm/pretty-checkbox) )
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
- **Manual download** ( [`Github`](https://github.com/lokesh-coder/pretty-checkbox/archive/master.zip) )
|
||||
|
||||
Download the source from Github.
|
||||
```html
|
||||
<link rel="stylesheet" href="../<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css"/>
|
||||
```
|
||||
`<PATH>` is where the library is downloaded.
|
||||
|
||||
<br>
|
||||
|
||||
**SCSS**
|
||||
|
||||
You can also import `pretty-checkbox.scss` in your main scss file.
|
||||
```scss
|
||||
@import '~pretty-checkbox/src/pretty.scss';
|
||||
```
|
||||
|
||||
Please refer the document for SCSS settings.
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
|
||||
Pretty checkbox comes with many styles,
|
||||
|
||||
| Class name | Description |
|
||||
| :---------- | :----------------------- |
|
||||
| `p-default` | Basic style |
|
||||
| `p-switch` | iOS like toggle style |
|
||||
| `p-icon` | Custom font icons |
|
||||
| `p-svg` | Custom SVG files, markup |
|
||||
| `p-image` | Tiny images |
|
||||
|
||||
And three shapes `p-round` `p-curve` `p-square` (default)
|
||||
|
||||
|
||||
#### Basic checkbox
|
||||
|
||||
```html
|
||||
<div class="pretty p-default">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Basic checkbox has three variants `p-fill` `p-thick` `p-outline` (default)
|
||||
|
||||
You can combine them.
|
||||
|
||||
```html
|
||||
<div class="pretty p-default p-curve p-fill">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>Fill</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Switch checkbox
|
||||
|
||||
Switch has three variants `p-outline` `p-fill` `p-slim`
|
||||
|
||||
```html
|
||||
<div class="pretty p-switch p-fill">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<label>On</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Custom Font icons
|
||||
|
||||
```html
|
||||
<div class="pretty p-icon">
|
||||
<input type="checkbox">
|
||||
<div class="state">
|
||||
<i class="icon fa fa-check"></i>
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `icon` should be added along with icon class names
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#fonticons">
|
||||
more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### SVG
|
||||
|
||||
Supports SVG file in <img/> tag, markup (`<svg> ... </svg>`) and sprites
|
||||
|
||||
```html
|
||||
<div class="pretty p-svg">
|
||||
<input type="checkbox">
|
||||
<div class="state">
|
||||
<img class="svg" src="file.svg" />
|
||||
<label>Check me</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `svg` to be added in img tag or svg tag.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#svg">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Image
|
||||
|
||||
Supports any type of valid image format.
|
||||
|
||||
```html
|
||||
<div class="pretty p-image">
|
||||
<input type="checkbox" />
|
||||
<div class="state">
|
||||
<img class="image" src="/check.png" />
|
||||
<label>Block</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: class `image` to be added in img tag.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#image">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
<div align="center"><strong >---</strong></div>
|
||||
|
||||
#### Colors
|
||||
|
||||
There are five solid colors `p-primary` `p-success` `p-warning` `p-info` `p-danger`
|
||||
|
||||
And five outline colors `p-primary-o` `p-success-o` `p-warning-o` `p-info-o` `p-danger-o`
|
||||
|
||||
```html
|
||||
<div class="pretty p-default p-curve p-thick">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-warning">
|
||||
<label>Warning</label>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
<blockquote>
|
||||
<sub>
|
||||
<strong>Note</strong>: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.
|
||||
</sub>
|
||||
</blockquote>
|
||||
|
||||
<div align="right">
|
||||
<i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#colors">more details</a></sub></i>
|
||||
</div>
|
||||
|
||||
### More
|
||||
|
||||
There are more features like ***Radio buttons*** , ***Toggle*** , ***States*** , ***Animations*** , ***Border less*** , ***Lock*** , ***Scale***, ***SCSS Settings***.
|
||||
|
||||
Please refer the [documentation](https://lokesh-coder.github.io/pretty-checkbox/) to know about them.
|
||||
|
||||
|
||||
### Browser support
|
||||
|
||||
Works in all modern browsers.
|
||||
|
||||
`Chrome >= 26` `Firefox >= 16` `Safari >= 6.1` `Opera >= 15` `IE >= 9`
|
||||
|
||||
### Font Icon libraries
|
||||
* [Font awesome](http://fontawesome.io/icons/)
|
||||
* [Bootstrap Glyphicons](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|
||||
* [Material icon ( MDI )](https://materialdesignicons.com/)
|
||||
* [Material icon ( ZMDI )](http://zavoloklom.github.io/material-design-iconic-font/icons.html)
|
||||
* [Ion icons](http://ionicons.com/)
|
||||
* [Typicons](http://www.typicons.com/)
|
||||
* [Material icon ( Google )](https://material.io/icons)
|
||||
* Others not tested, but will work ( 99% ).
|
||||
|
||||
|
||||
### SVG
|
||||
* [UIKit](https://getuikit.com/docs/icon)
|
||||
* [Feathers](https://feathericons.com/)
|
||||
* Others
|
||||
|
||||
### Inspiration
|
||||
- [Awesome Bootstrap Checkbox](https://github.com/flatlogic/awesome-bootstrap-checkbox) - Idea
|
||||
- [Animista](http://animista.net) - Animations
|
||||
|
||||
### Contributions
|
||||
Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!
|
||||
|
||||
### License
|
||||
This project is licensed under the MIT License
|
||||
|
||||
|
||||
<div align="center"><sub>❤</sub></div>
|
||||
1
bower_components/pretty-checkbox/dist/maps/pretty-checkbox.css.map
vendored
Normal file
1
bower_components/pretty-checkbox/dist/maps/pretty-checkbox.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
959
bower_components/pretty-checkbox/dist/pretty-checkbox.css
vendored
Normal file
959
bower_components/pretty-checkbox/dist/pretty-checkbox.css
vendored
Normal file
@@ -0,0 +1,959 @@
|
||||
/**
|
||||
* pretty-checkbox.css
|
||||
*
|
||||
* A pure CSS library to beautify checkbox and radio buttons
|
||||
*
|
||||
* Source: https://github.com/lokesh-coder/pretty-checkbox
|
||||
* Demo: https://lokesh-coder.github.io/pretty-checkbox
|
||||
*
|
||||
* Copyright (c) 2017 Lokesh rajendran
|
||||
*/
|
||||
|
||||
.pretty * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pretty input:not([type='checkbox']):not([type='radio']) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pretty input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 1em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pretty .state label {
|
||||
position: initial;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
text-indent: 1.5em;
|
||||
min-width: calc(1em + 2px);
|
||||
}
|
||||
|
||||
.pretty .state label:before,
|
||||
.pretty .state label:after {
|
||||
content: '';
|
||||
width: calc(1em + 2px);
|
||||
height: calc(1em + 2px);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
border: 1px solid transparent;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc((0% - (100% - 1em)) - 8%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty .state label:before {
|
||||
border-color: #bdc3c7;
|
||||
}
|
||||
|
||||
.pretty .state.p-is-hover,
|
||||
.pretty .state.p-is-indeterminate {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(7);
|
||||
transform: scale(7);
|
||||
}
|
||||
38% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
55% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
72% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
81% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.24);
|
||||
transform: scale(1.24);
|
||||
}
|
||||
89% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
95% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.04);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
100% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(7);
|
||||
transform: scale(7);
|
||||
}
|
||||
38% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
55% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
72% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
81% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.24);
|
||||
transform: scale(1.24);
|
||||
}
|
||||
89% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
95% {
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
-webkit-transform: scale(1.04);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
100% {
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes jelly {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
30% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale3d(1.25, 0.75, 1);
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale3d(0.85, 1.15, 1);
|
||||
transform: scale3d(0.85, 1.15, 1);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: scale3d(1.05, 0.95, 1);
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale3d(0.95, 1.05, 1);
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jelly {
|
||||
0% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
30% {
|
||||
-webkit-transform: scale3d(0.75, 1.25, 1);
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale3d(1.25, 0.75, 1);
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale3d(0.85, 1.15, 1);
|
||||
transform: scale3d(0.85, 1.15, 1);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: scale3d(1.05, 0.95, 1);
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale3d(0.95, 1.05, 1);
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-200px) rotate(-45deg);
|
||||
transform: translateZ(-200px) rotate(-45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0) rotate(0);
|
||||
transform: translateZ(0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateZ(-200px) rotate(-45deg);
|
||||
transform: translateZ(-200px) rotate(-45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateZ(0) rotate(0);
|
||||
transform: translateZ(0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 0px #bdc3c7;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 0px #bdc3c7;
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.pretty.p-default.p-fill .state label:after {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.pretty.p-default .state label:after {
|
||||
-webkit-transform: scale(0.6);
|
||||
-ms-transform: scale(0.6);
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.pretty.p-default input:checked ~ .state label:after {
|
||||
background-color: #bdc3c7 !important;
|
||||
}
|
||||
|
||||
.pretty.p-default.p-thick .state label:before,
|
||||
.pretty.p-default.p-thick .state label:after {
|
||||
border-width: calc(1em / 7);
|
||||
}
|
||||
|
||||
.pretty.p-default.p-thick .state label:after {
|
||||
-webkit-transform: scale(0.4) !important;
|
||||
-ms-transform: scale(0.4) !important;
|
||||
transform: scale(0.4) !important;
|
||||
}
|
||||
|
||||
.pretty.p-icon .state .icon {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
width: calc(1em + 2px);
|
||||
height: calc(1em + 2px);
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
top: calc((0% - (100% - 1em)) - 8%);
|
||||
border: 1px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pretty.p-icon .state .icon:before {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pretty.p-icon input:checked ~ .state .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-icon input:checked ~ .state label:before {
|
||||
border-color: #5a656b;
|
||||
}
|
||||
|
||||
.pretty.p-svg .state .svg {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
width: calc(1em + 2px);
|
||||
height: calc(1em + 2px);
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
top: calc((0% - (100% - 1em)) - 8%);
|
||||
border: 1px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pretty.p-svg .state svg {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pretty.p-svg input:checked ~ .state .svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-image .state img {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: calc(1em + 2px);
|
||||
height: calc(1em + 2px);
|
||||
top: 0;
|
||||
top: calc((0% - (100% - 1em)) - 8%);
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
-webkit-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.pretty.p-image input:checked ~ .state img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-switch input {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.pretty.p-switch .state {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pretty.p-switch .state:before {
|
||||
content: '';
|
||||
border: 1px solid #bdc3c7;
|
||||
border-radius: 60px;
|
||||
width: 2em;
|
||||
box-sizing: unset;
|
||||
height: calc(1em + 2px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: calc((0% - (100% - 1em)) - 16%);
|
||||
z-index: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.pretty.p-switch .state label {
|
||||
text-indent: 2.5em;
|
||||
}
|
||||
|
||||
.pretty.p-switch .state label:before,
|
||||
.pretty.p-switch .state label:after {
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 100%;
|
||||
left: 0;
|
||||
border-color: transparent;
|
||||
-webkit-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.pretty.p-switch .state label:after {
|
||||
background-color: #bdc3c7 !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state:before {
|
||||
border-color: #5a656b;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state label:after {
|
||||
background-color: #5a656b !important;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state:before {
|
||||
border-color: #5a656b;
|
||||
background-color: #5a656b !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state label:after {
|
||||
background-color: #fff !important;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim .state:before {
|
||||
height: 0.1em;
|
||||
background: #bdc3c7 !important;
|
||||
top: calc(50% - 0.1em);
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state:before {
|
||||
border-color: #5a656b;
|
||||
background-color: #5a656b !important;
|
||||
}
|
||||
|
||||
.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty.p-has-hover input:hover ~ .state.p-is-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pretty.p-has-focus input:focus ~ .state label:before {
|
||||
box-shadow: 0px 0px 3px 0px #bdc3c7;
|
||||
}
|
||||
|
||||
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-toggle .state.p-on {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty.p-toggle .state.p-off,
|
||||
.pretty.p-toggle .state .icon,
|
||||
.pretty.p-toggle .state .svg,
|
||||
.pretty.p-toggle .state img {
|
||||
opacity: 1;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.pretty.p-toggle .state.p-off .icon {
|
||||
color: #bdc3c7;
|
||||
}
|
||||
|
||||
.pretty.p-toggle input:checked ~ .state.p-on {
|
||||
opacity: 1;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.pretty.p-toggle input:checked ~ .state.p-off {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty.p-plain input:checked ~ .state label:before,
|
||||
.pretty.p-plain.p-toggle .state label:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.pretty.p-plain.p-plain .icon {
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.pretty.p-round .state label:before,
|
||||
.pretty.p-round .state label:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.pretty.p-round.p-icon .state .icon {
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pretty.p-round.p-icon .state .icon:before {
|
||||
-webkit-transform: scale(0.8);
|
||||
-ms-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.pretty.p-curve .state label:before,
|
||||
.pretty.p-curve .state label:after {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
.pretty.p-smooth label:before,
|
||||
.pretty.p-smooth label:after,
|
||||
.pretty.p-smooth .icon,
|
||||
.pretty.p-smooth .svg {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.pretty.p-smooth input:checked + .state label:after {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pretty.p-smooth input:checked + .state .icon,
|
||||
.pretty.p-smooth input:checked + .state .svg,
|
||||
.pretty.p-smooth input:checked + .state img {
|
||||
-webkit-animation: zoom 0.2s ease;
|
||||
animation: zoom 0.2s ease;
|
||||
}
|
||||
|
||||
.pretty.p-smooth.p-default input:checked + .state label:after {
|
||||
-webkit-animation: zoom 0.2s ease;
|
||||
animation: zoom 0.2s ease;
|
||||
}
|
||||
|
||||
.pretty.p-smooth.p-plain input:checked + .state label:before {
|
||||
content: '';
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.pretty.p-tada:not(.p-default) input:checked + .state .icon,
|
||||
.pretty.p-tada:not(.p-default) input:checked + .state .svg,
|
||||
.pretty.p-tada:not(.p-default) input:checked + .state img,
|
||||
.pretty.p-tada:not(.p-default) input:checked + .state label:before,
|
||||
.pretty.p-tada:not(.p-default) input:checked + .state label:after {
|
||||
-webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
|
||||
animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state .icon,
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state .svg,
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state img,
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state label:before,
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state label:after {
|
||||
-webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-jelly:not(.p-default) input:checked + .state label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state img,
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {
|
||||
-webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {
|
||||
-webkit-animation: pulse 1s;
|
||||
animation: pulse 1s;
|
||||
}
|
||||
|
||||
.pretty input[disabled] {
|
||||
cursor: not-allowed;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pretty input[disabled] ~ * {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.pretty.p-locked input {
|
||||
display: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-primary label:after,
|
||||
.pretty.p-toggle .state.p-primary label:after {
|
||||
background-color: #428bca !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-primary .icon,
|
||||
.pretty input:checked ~ .state.p-primary .svg,
|
||||
.pretty.p-toggle .state.p-primary .icon,
|
||||
.pretty.p-toggle .state.p-primary .svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-primary-o label:before,
|
||||
.pretty.p-toggle .state.p-primary-o label:before {
|
||||
border-color: #428bca;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-primary-o label:after,
|
||||
.pretty.p-toggle .state.p-primary-o label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-primary-o .icon,
|
||||
.pretty input:checked ~ .state.p-primary-o .svg,
|
||||
.pretty input:checked ~ .state.p-primary-o svg,
|
||||
.pretty.p-toggle .state.p-primary-o .icon,
|
||||
.pretty.p-toggle .state.p-primary-o .svg,
|
||||
.pretty.p-toggle .state.p-primary-o svg {
|
||||
color: #428bca;
|
||||
stroke: #428bca;
|
||||
}
|
||||
|
||||
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
|
||||
background-color: #428bca !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state.p-primary:before {
|
||||
border-color: #428bca;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
|
||||
background-color: #428bca !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {
|
||||
border-color: #245682;
|
||||
background-color: #245682 !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-info label:after,
|
||||
.pretty.p-toggle .state.p-info label:after {
|
||||
background-color: #5bc0de !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-info .icon,
|
||||
.pretty input:checked ~ .state.p-info .svg,
|
||||
.pretty.p-toggle .state.p-info .icon,
|
||||
.pretty.p-toggle .state.p-info .svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-info-o label:before,
|
||||
.pretty.p-toggle .state.p-info-o label:before {
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-info-o label:after,
|
||||
.pretty.p-toggle .state.p-info-o label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-info-o .icon,
|
||||
.pretty input:checked ~ .state.p-info-o .svg,
|
||||
.pretty input:checked ~ .state.p-info-o svg,
|
||||
.pretty.p-toggle .state.p-info-o .icon,
|
||||
.pretty.p-toggle .state.p-info-o .svg,
|
||||
.pretty.p-toggle .state.p-info-o svg {
|
||||
color: #5bc0de;
|
||||
stroke: #5bc0de;
|
||||
}
|
||||
|
||||
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {
|
||||
background-color: #5bc0de !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state.p-info:before {
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {
|
||||
background-color: #5bc0de !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {
|
||||
border-color: #2390b0;
|
||||
background-color: #2390b0 !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-success label:after,
|
||||
.pretty.p-toggle .state.p-success label:after {
|
||||
background-color: #5cb85c !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-success .icon,
|
||||
.pretty input:checked ~ .state.p-success .svg,
|
||||
.pretty.p-toggle .state.p-success .icon,
|
||||
.pretty.p-toggle .state.p-success .svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-success-o label:before,
|
||||
.pretty.p-toggle .state.p-success-o label:before {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-success-o label:after,
|
||||
.pretty.p-toggle .state.p-success-o label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-success-o .icon,
|
||||
.pretty input:checked ~ .state.p-success-o .svg,
|
||||
.pretty input:checked ~ .state.p-success-o svg,
|
||||
.pretty.p-toggle .state.p-success-o .icon,
|
||||
.pretty.p-toggle .state.p-success-o .svg,
|
||||
.pretty.p-toggle .state.p-success-o svg {
|
||||
color: #5cb85c;
|
||||
stroke: #5cb85c;
|
||||
}
|
||||
|
||||
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {
|
||||
background-color: #5cb85c !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state.p-success:before {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {
|
||||
background-color: #5cb85c !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {
|
||||
border-color: #357935;
|
||||
background-color: #357935 !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-warning label:after,
|
||||
.pretty.p-toggle .state.p-warning label:after {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-warning .icon,
|
||||
.pretty input:checked ~ .state.p-warning .svg,
|
||||
.pretty.p-toggle .state.p-warning .icon,
|
||||
.pretty.p-toggle .state.p-warning .svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-warning-o label:before,
|
||||
.pretty.p-toggle .state.p-warning-o label:before {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-warning-o label:after,
|
||||
.pretty.p-toggle .state.p-warning-o label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-warning-o .icon,
|
||||
.pretty input:checked ~ .state.p-warning-o .svg,
|
||||
.pretty input:checked ~ .state.p-warning-o svg,
|
||||
.pretty.p-toggle .state.p-warning-o .icon,
|
||||
.pretty.p-toggle .state.p-warning-o .svg,
|
||||
.pretty.p-toggle .state.p-warning-o svg {
|
||||
color: #f0ad4e;
|
||||
stroke: #f0ad4e;
|
||||
}
|
||||
|
||||
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state.p-warning:before {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {
|
||||
background-color: #f0ad4e !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {
|
||||
border-color: #c77c11;
|
||||
background-color: #c77c11 !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-danger label:after,
|
||||
.pretty.p-toggle .state.p-danger label:after {
|
||||
background-color: #d9534f !important;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-danger .icon,
|
||||
.pretty input:checked ~ .state.p-danger .svg,
|
||||
.pretty.p-toggle .state.p-danger .icon,
|
||||
.pretty.p-toggle .state.p-danger .svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-danger-o label:before,
|
||||
.pretty.p-toggle .state.p-danger-o label:before {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-danger-o label:after,
|
||||
.pretty.p-toggle .state.p-danger-o label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pretty input:checked ~ .state.p-danger-o .icon,
|
||||
.pretty input:checked ~ .state.p-danger-o .svg,
|
||||
.pretty input:checked ~ .state.p-danger-o svg,
|
||||
.pretty.p-toggle .state.p-danger-o .icon,
|
||||
.pretty.p-toggle .state.p-danger-o .svg,
|
||||
.pretty.p-toggle .state.p-danger-o svg {
|
||||
color: #d9534f;
|
||||
stroke: #d9534f;
|
||||
}
|
||||
|
||||
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {
|
||||
background-color: #d9534f !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch input:checked ~ .state.p-danger:before {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {
|
||||
background-color: #d9534f !important;
|
||||
}
|
||||
|
||||
.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {
|
||||
border-color: #a02622;
|
||||
background-color: #a02622 !important;
|
||||
}
|
||||
|
||||
.pretty.p-bigger label:before,
|
||||
.pretty.p-bigger label:after,
|
||||
.pretty.p-bigger .icon,
|
||||
.pretty.p-bigger .svg,
|
||||
.pretty.p-bigger .img {
|
||||
font-size: 1.2em !important;
|
||||
top: calc((0% - (100% - 1em)) - 35%) !important;
|
||||
}
|
||||
|
||||
.pretty.p-bigger label {
|
||||
text-indent: 1.7em;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.pretty .state:before,
|
||||
.pretty .state label:before,
|
||||
.pretty .state label:after,
|
||||
.pretty .state .icon {
|
||||
color-adjust: exact;
|
||||
/* stylelint-disable */
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
12
bower_components/pretty-checkbox/dist/pretty-checkbox.min.css
vendored
Normal file
12
bower_components/pretty-checkbox/dist/pretty-checkbox.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
bower_components/pretty-checkbox/logo.png
vendored
Normal file
BIN
bower_components/pretty-checkbox/logo.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
65
bower_components/pretty-checkbox/package.json
vendored
Normal file
65
bower_components/pretty-checkbox/package.json
vendored
Normal file
@@ -0,0 +1,65 @@
|
||||
{
|
||||
"name": "pretty-checkbox",
|
||||
"version": "3.0.3",
|
||||
"description": "A pure css library to beautify checkbox and radio buttons.",
|
||||
"main": "dist/pretty-checkbox.min.css",
|
||||
"scripts": {
|
||||
"lint":"gulp lint:scss",
|
||||
"fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix",
|
||||
"format": "gulp css:format",
|
||||
"build": "gulp build",
|
||||
"ci": "npm run build && git add dist -f && git commit -m \"build(release): auto build [ci skip]\"",
|
||||
"release": "corp-semantic-release",
|
||||
"log": "conventional-github-releaser -p angular -r 0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.8.2",
|
||||
"conventional-github-releaser": "^1.1.12",
|
||||
"corp-semantic-release": "^6.1.0",
|
||||
"del": "^3.0.0",
|
||||
"gulp": "^3.9.0",
|
||||
"gulp-autoprefixer": "^3.1.1",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-header-comment": "^0.2.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-sass": "^2.3.1",
|
||||
"gulp-sequence": "^0.4.6",
|
||||
"gulp-sourcemaps": "^2.6.1",
|
||||
"gulp-stylefmt": "^1.1.0",
|
||||
"gulp-stylelint": "^5.0.0",
|
||||
"rimraf": "2.6.1",
|
||||
"stylefmt": "^6.0.0",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-recommended": "^1.0.0",
|
||||
"stylelint-config-recommended-scss": "^2.0.0",
|
||||
"stylelint-scss": "^2.1.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/lokesh-coder/pretty-checkbox.git",
|
||||
"link": "https://github.com/lokesh-coder/pretty-checkbox"
|
||||
},
|
||||
"keywords": [
|
||||
"checkbox",
|
||||
"radio",
|
||||
"bootstrap",
|
||||
"fonticon",
|
||||
"icon",
|
||||
"svg",
|
||||
"switch",
|
||||
"toggle",
|
||||
"sass",
|
||||
"css3",
|
||||
"animation",
|
||||
"pretty",
|
||||
"check",
|
||||
"colors"
|
||||
],
|
||||
"author": "Lokesh Rajendran",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/lokesh-coder/pretty-checkbox/issues"
|
||||
},
|
||||
"homepage": "https://lokesh-coder.github.io/pretty-checkbox"
|
||||
}
|
||||
BIN
bower_components/pretty-checkbox/preview.gif
vendored
Normal file
BIN
bower_components/pretty-checkbox/preview.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
27
bower_components/pretty-checkbox/src/pretty-checkbox.scss
vendored
Normal file
27
bower_components/pretty-checkbox/src/pretty-checkbox.scss
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
@import './scss/variables';
|
||||
@import './scss/core';
|
||||
@import './scss/essentials/keyframes';
|
||||
@import './scss/essentials/functions';
|
||||
@import './scss/essentials/mixins';
|
||||
@import './scss/elements/default/fill';
|
||||
@import './scss/elements/default/outline';
|
||||
@import './scss/elements/default/thick';
|
||||
@import './scss/elements/font-icon/general';
|
||||
@import './scss/elements/svg/general';
|
||||
@import './scss/elements/image/general';
|
||||
@import './scss/elements/switch/general';
|
||||
@import './scss/elements/switch/fill';
|
||||
@import './scss/elements/switch/slim';
|
||||
@import './scss/states/hover';
|
||||
@import './scss/states/focus';
|
||||
@import './scss/states/indeterminate';
|
||||
@import './scss/extras/toggle';
|
||||
@import './scss/extras/plain';
|
||||
@import './scss/extras/round';
|
||||
@import './scss/extras/curve';
|
||||
@import './scss/extras/animation';
|
||||
@import './scss/extras/disabled';
|
||||
@import './scss/extras/locked';
|
||||
@import './scss/extras/colors';
|
||||
@import './scss/extras/bigger';
|
||||
@import './scss/extras/print';
|
||||
85
bower_components/pretty-checkbox/src/scss/_core.scss
vendored
Normal file
85
bower_components/pretty-checkbox/src/scss/_core.scss
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
@charset 'utf-8';
|
||||
|
||||
.#{$pretty--class-name} * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
//Throw error on invalid input types.
|
||||
.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {
|
||||
display: none;
|
||||
|
||||
@if $pretty--debug {
|
||||
+ *:after {
|
||||
content: $pretty--err-message;
|
||||
border: 1px solid #dedede;
|
||||
border-left: 3px solid #d9534f;
|
||||
padding: 9px;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
color: #d9534f;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
background: #fbfbfb;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$pretty--class-name} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 1em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $pretty--z-index-front;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.state {
|
||||
label {
|
||||
position: initial;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
text-indent: $pretty--label-text-offset;
|
||||
min-width: $pretty--box-size;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
width: $pretty--box-size;
|
||||
height: $pretty--box-size;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
border: 1px solid transparent;
|
||||
z-index: $pretty--z-index-back;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $pretty-top-offset;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: $pretty--color-default;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-is-hover,
|
||||
&.p-is-indeterminate {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
bower_components/pretty-checkbox/src/scss/_variables.scss
vendored
Normal file
39
bower_components/pretty-checkbox/src/scss/_variables.scss
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
$pretty--class-name: pretty !default;
|
||||
|
||||
// colors
|
||||
$pretty--color-default: #bdc3c7 !default;
|
||||
$pretty--color-primary: #428bca !default;
|
||||
$pretty--color-info: #5bc0de !default;
|
||||
$pretty--color-success: #5cb85c !default;
|
||||
$pretty--color-warning: #f0ad4e !default;
|
||||
$pretty--color-danger: #d9534f !default;
|
||||
$pretty--color-dark: #5a656b !default;
|
||||
|
||||
// z-index
|
||||
$pretty--z-index-back: 0 !default;
|
||||
$pretty--z-index-between: 1 !default;
|
||||
$pretty--z-index-front: 2 !default;
|
||||
|
||||
// box
|
||||
$pretty--curve-radius: 20% !default;
|
||||
$pretty--box-size: calc(1em + 2px) !default;
|
||||
|
||||
// text
|
||||
$pretty--label-text-offset: 1.5em !default;
|
||||
$pretty--label-text-offset-switch: 2.5em !default;
|
||||
|
||||
// scale
|
||||
$pretty--2x: 1.2em !default;
|
||||
|
||||
// color set
|
||||
$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;
|
||||
|
||||
// position
|
||||
$pretty-top: 8;
|
||||
$pretty-top-switch: ($pretty-top * 2) * 1%;
|
||||
$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});
|
||||
$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});
|
||||
|
||||
// dev
|
||||
$pretty--debug: false !default;
|
||||
$pretty--err-message: 'Error: Invalid input type!' !default;
|
||||
7
bower_components/pretty-checkbox/src/scss/elements/default/_fill.scss
vendored
Normal file
7
bower_components/pretty-checkbox/src/scss/elements/default/_fill.scss
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
.#{$pretty--class-name}.p-default.p-fill {
|
||||
.state label {
|
||||
&:after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
bower_components/pretty-checkbox/src/scss/elements/default/_outline.scss
vendored
Normal file
13
bower_components/pretty-checkbox/src/scss/elements/default/_outline.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
.#{$pretty--class-name}.p-default {
|
||||
.state label {
|
||||
&:after {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state label {
|
||||
&:after {
|
||||
background-color: $pretty--color-default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
bower_components/pretty-checkbox/src/scss/elements/default/_thick.scss
vendored
Normal file
12
bower_components/pretty-checkbox/src/scss/elements/default/_thick.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
.#{$pretty--class-name}.p-default.p-thick {
|
||||
.state label {
|
||||
&:before,
|
||||
&:after {
|
||||
border-width: calc(1em / 7);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: scale(0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
bower_components/pretty-checkbox/src/scss/elements/font-icon/_general.scss
vendored
Normal file
39
bower_components/pretty-checkbox/src/scss/elements/font-icon/_general.scss
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
.#{$pretty--class-name}.p-icon {
|
||||
.state {
|
||||
.icon {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
width: $pretty--box-size;
|
||||
height: $pretty--box-size;
|
||||
left: 0;
|
||||
z-index: $pretty--z-index-between;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
top: $pretty-top-offset;
|
||||
border: 1px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon:before {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state {
|
||||
.icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
label:before {
|
||||
border-color: #5a656b;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
bower_components/pretty-checkbox/src/scss/elements/image/_general.scss
vendored
Normal file
21
bower_components/pretty-checkbox/src/scss/elements/image/_general.scss
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
.#{$pretty--class-name}.p-image {
|
||||
.state {
|
||||
img {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: $pretty--box-size;
|
||||
height: $pretty--box-size;
|
||||
top: 0;
|
||||
top: $pretty-top-offset;
|
||||
left: 0;
|
||||
z-index: $pretty--z-index-back;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
33
bower_components/pretty-checkbox/src/scss/elements/svg/_general.scss
vendored
Normal file
33
bower_components/pretty-checkbox/src/scss/elements/svg/_general.scss
vendored
Normal file
@@ -0,0 +1,33 @@
|
||||
.#{$pretty--class-name}.p-svg {
|
||||
.state {
|
||||
.svg {
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
width: $pretty--box-size;
|
||||
height: $pretty--box-size;
|
||||
left: 0;
|
||||
z-index: $pretty--z-index-between;
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
top: $pretty-top-offset;
|
||||
border: 1px solid transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state .svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
15
bower_components/pretty-checkbox/src/scss/elements/switch/_fill.scss
vendored
Normal file
15
bower_components/pretty-checkbox/src/scss/elements/switch/_fill.scss
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
.#{$pretty--class-name}.p-switch.p-fill {
|
||||
input:checked~.state {
|
||||
&:before {
|
||||
border-color: $pretty--color-dark;
|
||||
background-color: $pretty--color-dark !important;
|
||||
}
|
||||
label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
label:after {
|
||||
background-color: #fff !important;
|
||||
left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
54
bower_components/pretty-checkbox/src/scss/elements/switch/_general.scss
vendored
Normal file
54
bower_components/pretty-checkbox/src/scss/elements/switch/_general.scss
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
.#{$pretty--class-name}.p-switch {
|
||||
input{
|
||||
min-width:2em;
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
border: 1px solid $pretty--color-default;
|
||||
border-radius: 60px;
|
||||
width: 2em;
|
||||
box-sizing: unset;
|
||||
height: $pretty--box-size;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: $pretty-top-offset-switch;
|
||||
z-index: $pretty--z-index-back;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
label {
|
||||
text-indent: $pretty--label-text-offset-switch;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
transition: all 0.5s ease;
|
||||
border-radius: 100%;
|
||||
left: 0;
|
||||
border-color: transparent;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: $pretty--color-default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state {
|
||||
&:before {
|
||||
border-color: $pretty--color-dark;
|
||||
}
|
||||
|
||||
label:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
label:after {
|
||||
background-color: $pretty--color-dark !important;
|
||||
left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
bower_components/pretty-checkbox/src/scss/elements/switch/_slim.scss
vendored
Normal file
16
bower_components/pretty-checkbox/src/scss/elements/switch/_slim.scss
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
.#{$pretty--class-name}.p-switch.p-slim {
|
||||
.state {
|
||||
&:before {
|
||||
height: 0.1em;
|
||||
background: $pretty--color-default !important;
|
||||
top: calc(50% - 0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state {
|
||||
&:before {
|
||||
border-color: $pretty--color-dark;
|
||||
background-color: $pretty--color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
bower_components/pretty-checkbox/src/scss/essentials/_functions.scss
vendored
Normal file
1
bower_components/pretty-checkbox/src/scss/essentials/_functions.scss
vendored
Normal file
@@ -0,0 +1 @@
|
||||
// empty
|
||||
102
bower_components/pretty-checkbox/src/scss/essentials/_keyframes.scss
vendored
Normal file
102
bower_components/pretty-checkbox/src/scss/essentials/_keyframes.scss
vendored
Normal file
@@ -0,0 +1,102 @@
|
||||
@keyframes zoom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
animation-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
transform: scale(7);
|
||||
}
|
||||
|
||||
38% {
|
||||
animation-timing-function: ease-out;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
55% {
|
||||
animation-timing-function: ease-in;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
72% {
|
||||
animation-timing-function: ease-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
81% {
|
||||
animation-timing-function: ease-in;
|
||||
transform: scale(1.24);
|
||||
}
|
||||
|
||||
89% {
|
||||
animation-timing-function: ease-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
95% {
|
||||
animation-timing-function: ease-in;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
100% {
|
||||
animation-timing-function: ease-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jelly {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: scale3d(.75, 1.25, 1);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(1.25, .75, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(.85, 1.15, 1);
|
||||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(1.05, .95, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(.95, 1.05, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateZ(-200px) rotate(-45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateZ(0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);
|
||||
}
|
||||
}
|
||||
1
bower_components/pretty-checkbox/src/scss/essentials/_mixins.scss
vendored
Normal file
1
bower_components/pretty-checkbox/src/scss/essentials/_mixins.scss
vendored
Normal file
@@ -0,0 +1 @@
|
||||
// empty
|
||||
89
bower_components/pretty-checkbox/src/scss/extras/_animation.scss
vendored
Normal file
89
bower_components/pretty-checkbox/src/scss/extras/_animation.scss
vendored
Normal file
@@ -0,0 +1,89 @@
|
||||
.#{$pretty--class-name}.p-smooth {
|
||||
label:before,
|
||||
label:after,
|
||||
.icon,
|
||||
.svg {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
input:checked + .state {
|
||||
label:after {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.svg,
|
||||
img {
|
||||
animation: zoom 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-default input:checked + .state {
|
||||
label:after {
|
||||
animation: zoom 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-plain input:checked + .state {
|
||||
label:before {
|
||||
content: '';
|
||||
transform: scale(0);
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$pretty--class-name}.p-tada:not(.p-default) {
|
||||
input:checked + .state {
|
||||
.icon,
|
||||
.svg,
|
||||
img,
|
||||
label:before,
|
||||
label:after {
|
||||
animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$pretty--class-name}.p-jelly:not(.p-default) {
|
||||
input:checked + .state {
|
||||
.icon,
|
||||
.svg,
|
||||
img,
|
||||
label:before,
|
||||
label:after {
|
||||
animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$pretty--class-name}.p-rotate:not(.p-default) {
|
||||
input:checked ~ .state {
|
||||
.icon,
|
||||
.svg,
|
||||
img,
|
||||
label:before,
|
||||
label:after {
|
||||
animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
label:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$pretty--class-name}.p-pulse:not(.p-switch) {
|
||||
input:checked ~ .state {
|
||||
label:before {
|
||||
animation: pulse 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
bower_components/pretty-checkbox/src/scss/extras/_bigger.scss
vendored
Normal file
14
bower_components/pretty-checkbox/src/scss/extras/_bigger.scss
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
.#{$pretty--class-name}.p-bigger {
|
||||
label:before,
|
||||
label:after,
|
||||
.icon,
|
||||
.svg,
|
||||
.img {
|
||||
font-size: $pretty--2x !important;
|
||||
top: calc((0% - (100% - 1em)) - 35%) !important;
|
||||
}
|
||||
|
||||
label {
|
||||
text-indent: 1.7em;
|
||||
}
|
||||
}
|
||||
53
bower_components/pretty-checkbox/src/scss/extras/_colors.scss
vendored
Normal file
53
bower_components/pretty-checkbox/src/scss/extras/_colors.scss
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
.#{$pretty--class-name} {
|
||||
@each $name, $color in $pretty--colors {
|
||||
input:checked ~ .state.p-#{$name},
|
||||
&.p-toggle .state.p-#{$name} {
|
||||
label:after {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.svg {
|
||||
color: #fff;
|
||||
stroke: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state.p-#{$name}-o,
|
||||
&.p-toggle .state.p-#{$name}-o {
|
||||
label:before {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
label:after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.svg,
|
||||
svg {
|
||||
color: $color;
|
||||
stroke: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {
|
||||
&:after {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-switch input:checked ~ .state.p-#{$name}:before {
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {
|
||||
background-color: $color !important;
|
||||
}
|
||||
|
||||
&.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {
|
||||
border-color: darken($color, 20%);
|
||||
background-color: darken($color, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
bower_components/pretty-checkbox/src/scss/extras/_curve.scss
vendored
Normal file
8
bower_components/pretty-checkbox/src/scss/extras/_curve.scss
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
.#{$pretty--class-name}.p-curve {
|
||||
.state label {
|
||||
&:before,
|
||||
&:after {
|
||||
border-radius: $pretty--curve-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
bower_components/pretty-checkbox/src/scss/extras/_disabled.scss
vendored
Normal file
12
bower_components/pretty-checkbox/src/scss/extras/_disabled.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
.#{$pretty--class-name} {
|
||||
input {
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
display: none;
|
||||
|
||||
& ~ * {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
bower_components/pretty-checkbox/src/scss/extras/_locked.scss
vendored
Normal file
6
bower_components/pretty-checkbox/src/scss/extras/_locked.scss
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
.#{$pretty--class-name}.p-locked {
|
||||
input {
|
||||
display: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
12
bower_components/pretty-checkbox/src/scss/extras/_plain.scss
vendored
Normal file
12
bower_components/pretty-checkbox/src/scss/extras/_plain.scss
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
.#{$pretty--class-name}.p-plain {
|
||||
input:checked ~ .state label,
|
||||
&.p-toggle .state label {
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-plain .icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
13
bower_components/pretty-checkbox/src/scss/extras/_print.scss
vendored
Normal file
13
bower_components/pretty-checkbox/src/scss/extras/_print.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
@media print {
|
||||
.#{$pretty--class-name} {
|
||||
.state:before,
|
||||
.state label:before,
|
||||
.state label:after,
|
||||
.state .icon {
|
||||
color-adjust: exact;
|
||||
/* stylelint-disable */
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
bower_components/pretty-checkbox/src/scss/extras/_round.scss
vendored
Normal file
17
bower_components/pretty-checkbox/src/scss/extras/_round.scss
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
.#{$pretty--class-name}.p-round {
|
||||
.state label {
|
||||
&:before,
|
||||
&:after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-icon .state .icon {
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
32
bower_components/pretty-checkbox/src/scss/extras/_toggle.scss
vendored
Normal file
32
bower_components/pretty-checkbox/src/scss/extras/_toggle.scss
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
.#{$pretty--class-name}.p-toggle {
|
||||
.state {
|
||||
&.p-on {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.p-off,
|
||||
.icon,
|
||||
.svg,
|
||||
img {
|
||||
opacity: 1;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&.p-off .icon {
|
||||
color: $pretty--color-default;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .state {
|
||||
&.p-on {
|
||||
opacity: 1;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&.p-off {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
bower_components/pretty-checkbox/src/scss/states/_focus.scss
vendored
Normal file
7
bower_components/pretty-checkbox/src/scss/states/_focus.scss
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
.#{$pretty--class-name}.p-has-focus {
|
||||
input:focus {
|
||||
~ .state label:before {
|
||||
box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
bower_components/pretty-checkbox/src/scss/states/_hover.scss
vendored
Normal file
13
bower_components/pretty-checkbox/src/scss/states/_hover.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
.#{$pretty--class-name}.p-has-hover {
|
||||
input:hover ~ .state:not(.p-is-hover) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:hover ~ .state.p-is-hover {
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
bower_components/pretty-checkbox/src/scss/states/_indeterminate.scss
vendored
Normal file
14
bower_components/pretty-checkbox/src/scss/states/_indeterminate.scss
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
.#{$pretty--class-name}.p-has-indeterminate {
|
||||
input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
1459
bower_components/pretty-checkbox/src/test.css
vendored
Normal file
1459
bower_components/pretty-checkbox/src/test.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@@ -17,22 +17,27 @@
|
||||
<div class="status-list">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li id="left_safetyRunning" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Running</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Running</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_safetyStopped" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Stopped</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Stopped</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button type="button" onclick="triggerService('/left/aescape/mode/activateSafetyController')" class="btn btn-sm">
|
||||
<button type="button" onclick="triggerService('/left/aescape/mode/activateSafetyController')" class="btn">
|
||||
Activate
|
||||
</button>
|
||||
</div>
|
||||
@@ -46,34 +51,60 @@
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li id="left_frankaModeOther" class="list-group-item">
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Other</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeIdle" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Idle</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Idle</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeMove" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Move</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Move</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeGuiding" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Guiding</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Guiding</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeReflex" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Reflex</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Reflex</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeUserStopped" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>User Stopped</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>User Stopped</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="left_frankaModeErrorRecovery" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Automatic Error Recovery</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Automatic Error Recovery</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -81,24 +112,56 @@
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button id="left_fixFrankaButton" type="button" onclick="triggerService('/left/aescape/hardware/resetFrankaError')" class="btn btn-sm">
|
||||
<button id="left_fixFrankaButton" type="button" onclick="triggerService('/left/aescape/hardware/resetFrankaError')" class="btn">
|
||||
Fix Errors
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<div class="robotiq panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Robotiq
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<div class="progress" id="robotiqForce">
|
||||
<div class="progress-bar bg-success" role="progressbar" id="robotiqForceBar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="200">N/A</div>
|
||||
</div>
|
||||
<ul class="list-group list-group-horizontal text-center">
|
||||
<li class="list-group-item">
|
||||
<h4>X: <span id="robotiqX" class="label label-default">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<h4>Y: <span id="robotiqY" class="label label-default">0.0</span></h4>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<h4>Z: <span id="robotiqZ" class="label label-default">0.0</span></h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button id="calibrateButton" type="button" onclick="triggerService('/left/aescape/hardware/calibrateRobotiq')" class="btn">
|
||||
Calibrate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-container col-md-6">
|
||||
<div class="control-card panel panel-default">
|
||||
<div class="panel-heading">
|
||||
EEF Configuration
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<i class="fas fa-info-circle" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"></i>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="panel-body text-center">
|
||||
<div class="button-area">
|
||||
<button type="button" onclick="triggerService('/left/aescape/hardware/setTrainingEEF')" class="btn btn-primary col-md-6">
|
||||
<button type="button" onclick="triggerService('/left/aescape/hardware/setTrainingEEF')" active class="btn btn-primary col-md-6">
|
||||
Recording EEF
|
||||
</button>
|
||||
<button type="button" onclick="triggerService('/left/aescape/hardware/setExecutionEEF')" class="btn btn-primary col-md-6">
|
||||
@@ -161,6 +224,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="control-container col-md-6">
|
||||
<div class="control-card panel panel-default">
|
||||
<div class="panel-heading">
|
||||
@@ -187,6 +251,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="control-container col-md-6">
|
||||
<div class="control-card panel panel-default">
|
||||
<div class="panel-heading">
|
||||
@@ -234,40 +299,44 @@
|
||||
Stop Playing Recording
|
||||
</button>
|
||||
</div>
|
||||
<div class="row-md-4">
|
||||
Bagfile name must not start with "/"
|
||||
<div class="input-group">
|
||||
<input type="text" id="bagNameText" class="form-control" placeholder="bag_filename">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="button" onclick="triggerMessageService('/aescape/bags/startPlayingRecording', 'bagNameText')">
|
||||
<span>
|
||||
Start Playing Bag
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row-md-4">
|
||||
<<div class="col-md-3"> -->
|
||||
<!-- Bagfile name must not start with "/"
|
||||
<button class="btn btn-primary" type="button" onclick="updateRecordingsList()">
|
||||
Refresh List
|
||||
</button>
|
||||
</div> -->
|
||||
<div class="row-md-3 pt-4">
|
||||
<div>
|
||||
<div>
|
||||
<div class="list-group" id="bagList">
|
||||
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<!--Bagfile name must not start with "/" -->
|
||||
<div class="row">
|
||||
<div class="row-md-8">
|
||||
<input type="text" id="bagNameText" class="form-control" placeholder="bag_filename">
|
||||
</div>
|
||||
<div class="row-md-4">
|
||||
<button class="btn btn-primary" type="button" onclick="triggerMessageService('/aescape/bags/startPlayingRecording', 'bagNameText')">
|
||||
<span>
|
||||
Play Bag
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row-md-4">
|
||||
<<div class="col-md-3"> -->
|
||||
<!-- Bagfile name must not start with "/"
|
||||
<button class="btn btn-primary" type="button" onclick="updateRecordingsList()">
|
||||
Refresh List
|
||||
</button>
|
||||
</div> -->
|
||||
<div>
|
||||
<div>
|
||||
<div class="list-group" id="bagList">
|
||||
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,72 +360,103 @@
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="status-bar">
|
||||
<div class="status-container">
|
||||
<div class="safety-monitor panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Safety Monitor
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li id="right_safetyRunning" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Running</label>
|
||||
<div class="status-container">
|
||||
<div class="safety-monitor panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Safety Monitor
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li id="right_safetyRunning" class="list-group-item">
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Running</label>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_safetyStopped" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Stopped</label>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_safetyStopped" class="list-group-item">
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Stopped</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button type="button" onclick="triggerService('/left/aescape/mode/activateSafetyController')" class="btn btn-sm">
|
||||
Activate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button type="button" onclick="triggerService('/left/aescape/mode/activateSafetyController')" class="btn">
|
||||
Activate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<div class="franka panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Franka Arm
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
</div>
|
||||
<div class="status-container">
|
||||
<div class="franka panel panel-default panel-horizontal">
|
||||
<div class="panel-heading">
|
||||
Franka Arm
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="status-list">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li id="right_frankaModeOther" class="list-group-item">
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Other</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeIdle" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Idle</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Idle</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeMove" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Move</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Move</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeGuiding" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Guiding</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Guiding</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeReflex" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Reflex</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Reflex</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeUserStopped" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>User Stopped</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>User Stopped</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="right_frankaModeErrorRecovery" class="list-group-item">
|
||||
<div class="radio disabled">
|
||||
<label><input type="radio" disabled>Automatic Error Recovery</label>
|
||||
<div class="pretty p-default p-round">
|
||||
<input type="checkbox" />
|
||||
<div class="state p-success-o">
|
||||
<label>Automatic Error Recovery</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -364,7 +464,7 @@
|
||||
</div>
|
||||
|
||||
<div class="action-button panel-footer">
|
||||
<button id="left_fixFrankaButton" type="button" onclick="triggerService('/left/aescape/hardware/resetFrankaError')" class="btn btn-sm">
|
||||
<button id="left_fixFrankaButton" type="button" onclick="triggerService('/left/aescape/hardware/resetFrankaError')" class="btn">
|
||||
Fix Errors
|
||||
</button>
|
||||
</div>
|
||||
@@ -403,19 +503,19 @@
|
||||
</div>
|
||||
<div class="panel-body text-center">
|
||||
<div class="button-area">
|
||||
<button id="left_teachingModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateTeachingController')" class="btn btn-primary col-md-4">
|
||||
<button id="right_teachingModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateTeachingController')" class="btn btn-primary col-md-4">
|
||||
Teaching Mode
|
||||
</button>
|
||||
<button id="left_executionModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateExecutionController')" class="btn btn-primary col-md-4">
|
||||
<button id="right_executionModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateExecutionController')" class="btn btn-primary col-md-4">
|
||||
Massage Mode
|
||||
</button>
|
||||
<button id="left_readyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateReadyController')" class="btn btn-primary col-md-4">
|
||||
<button id="right_readyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateReadyController')" class="btn btn-primary col-md-4">
|
||||
Ready Mode
|
||||
</button>
|
||||
<button id="left_standbyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateStandbyController')" class="btn btn-primary col-md-4">
|
||||
<button id="right_standbyModeButton" type="button" onclick="triggerService('/right/aescape/mode/activateStandbyController')" class="btn btn-primary col-md-4">
|
||||
Standby Mode
|
||||
</button>
|
||||
<button id="left_stoppedModeButton" type="button" onclick="triggerService('/right/aescape/mode/stopControllers')" class="btn btn-primary col-md-4">
|
||||
<button id="right_stoppedModeButton" type="button" onclick="triggerService('/right/aescape/mode/stopControllers')" class="btn btn-primary col-md-4">
|
||||
Stopped Mode
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -60,112 +60,104 @@ class ArmControls
|
||||
});
|
||||
this.safetyStatusTopic.subscribe(this.safetyStatus.bind(this));
|
||||
|
||||
this.lastActiveButton = {
|
||||
operationMode : null
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// FrankaState
|
||||
frankaStatus(message) {
|
||||
document.getElementById(this.namespace+"_frankaModeOther").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeIdle").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeMove").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeGuiding").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeReflex").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeUserStopped").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_frankaModeErrorRecovery").className = "label label-default"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-primary"
|
||||
|
||||
if (message.robot_mode == 0)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeOther").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
|
||||
}
|
||||
else if (message.robot_mode == 1)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeIdle").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
|
||||
}
|
||||
else if (message.robot_mode == 2)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeMove").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-success"
|
||||
}
|
||||
else if (message.robot_mode == 3)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeGuiding").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
|
||||
var frankaModeToButtonMap = {
|
||||
0 : "frankaModeOther",
|
||||
1 : "frankaModeIdle",
|
||||
2 : "frankaModeMove",
|
||||
3 : "frankaModeGuiding",
|
||||
4 : "frankaModeReflex",
|
||||
5 : "frankaModeUserStopped",
|
||||
6 : "frankaModeErrorRecovery"
|
||||
}
|
||||
else if (message.robot_mode == 4)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeReflex").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-danger"
|
||||
|
||||
if(frankaModeLastActive && frankaModeLastActive != message.robot_mode) {
|
||||
var frankaButton = frankaModeToButtonMap[frankaModeLastActive];
|
||||
if (frankaButton) {
|
||||
document.getElementById(this.namespace+"_"+frankaButton).getElementsByTagName("input")[0].checked = false;
|
||||
document.getElementById(this.namespace+"_"+frankaButton).getElementsByTagName("input")[0].disabled = true;
|
||||
}
|
||||
}
|
||||
else if (message.robot_mode == 5)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeUserStopped").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
|
||||
}
|
||||
else if (message.robot_mode == 6)
|
||||
{
|
||||
document.getElementById(this.namespace+"_frankaModeErrorRecovery").className = "label label-warning"
|
||||
document.getElementById(this.namespace+"_fixFrankaButton").className = "btn btn-default"
|
||||
var frankaButton = frankaModeToButtonMap[message.robot_mode];
|
||||
if (frankaButton) {
|
||||
document.getElementById(this.namespace+"_"+frankaButton).getElementsByTagName("input")[0].disabled = false;
|
||||
document.getElementById(this.namespace+"_"+frankaButton).getElementsByTagName("input")[0].checked = true;
|
||||
}
|
||||
var frankaModeLastActive = message.robot_mode;
|
||||
}
|
||||
|
||||
// Operation Mode
|
||||
modeStatus(message) {
|
||||
document.getElementById(this.namespace+"_stoppedModeButton").className = "btn btn-secondary"
|
||||
document.getElementById(this.namespace+"_standbyModeButton").className = "btn btn-primary"
|
||||
document.getElementById(this.namespace+"_readyModeButton").className = "btn btn-primary"
|
||||
document.getElementById(this.namespace+"_teachingModeButton").className = "btn btn-primary"
|
||||
document.getElementById(this.namespace+"_executionModeButton").className = "btn btn-primary"
|
||||
|
||||
var operationModeToButtonMap = {
|
||||
"stopped" : "stoppedModeButton",
|
||||
"standby" : "standbyModeButton",
|
||||
"teach" : "teachingModeButton",
|
||||
"execution" : "executionModeButton",
|
||||
"ready" : "readyModeButton"
|
||||
}
|
||||
|
||||
if (this.namespace == "left")
|
||||
{
|
||||
document.getElementById("recordingStartButton").disabled = true
|
||||
document.getElementById("executionStartButton").disabled = true
|
||||
}
|
||||
|
||||
if (message.data == "stopped")
|
||||
|
||||
if (message.data == "ready")
|
||||
{
|
||||
document.getElementById(this.namespace+"_stoppedModeButton").className = "btn btn-warning"
|
||||
}
|
||||
else if (message.data == "standby")
|
||||
{
|
||||
document.getElementById(this.namespace+"_standbyModeButton").className = "btn btn-primary btn-success"
|
||||
}
|
||||
else if (message.data == "teach")
|
||||
{
|
||||
document.getElementById(this.namespace+"_teachingModeButton").className = "btn btn-primary btn-success"
|
||||
}
|
||||
else if (message.data == "execution")
|
||||
{
|
||||
document.getElementById(this.namespace+"_executionModeButton").className = "btn btn-primary btn-success"
|
||||
}
|
||||
else if (message.data == "ready")
|
||||
{
|
||||
document.getElementById(this.namespace+"_readyModeButton").className = "btn btn-primary btn-success"
|
||||
|
||||
if (this.namespace == "left")
|
||||
{
|
||||
document.getElementById("recordingStartButton").disabled = false
|
||||
document.getElementById("executionStartButton").disabled = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var operationModeLastActive = this.operationModeLastActive;
|
||||
|
||||
if(operationModeLastActive && operationModeLastActive != message.data) {
|
||||
var operationModeButton = operationModeToButtonMap[operationModeLastActive];
|
||||
if (operationModeButton) {
|
||||
document.getElementById(this.namespace+"_"+operationModeButton).classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
var operationModeButton = operationModeToButtonMap[message.data];
|
||||
if (operationModeButton) {
|
||||
document.getElementById(this.namespace+"_"+operationModeButton).classList.add('active');
|
||||
}
|
||||
|
||||
this.operationModeLastActive = message.data;
|
||||
|
||||
}
|
||||
|
||||
safetyStatus(message) {
|
||||
document.getElementById(this.namespace+"_safetyRunning").className = 'label label-default';
|
||||
document.getElementById(this.namespace+"_safetyStopped").className = 'label label-default';
|
||||
|
||||
if (message.data == "stopped")
|
||||
{
|
||||
document.getElementById(this.namespace+"_safetyStopped").className = 'label label-danger';
|
||||
}
|
||||
else if (message.data == "running")
|
||||
{
|
||||
document.getElementById(this.namespace+"_safetyRunning").className = 'label label-success';
|
||||
var safetyStatusToButtonMap = {
|
||||
"stopped" : "safetyStopped",
|
||||
"running" : "safetyRunning"
|
||||
}
|
||||
};
|
||||
|
||||
if(safetyButtonLastActive && safetyButtonLastActive != message.data) {
|
||||
var safetyButton = safetyStatusToButtonMap[safetyButtonLastActive];
|
||||
if(safetyButton) {
|
||||
document.getElementById(this.namespace+"_"+safetyButton).getElementsByTagName("input")[0].checked = false;
|
||||
document.getElementById(this.namespace+"_"+safetyButton).getElementsByTagName("input")[0].disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
var safetyButton = safetyStatusToButtonMap[message.data];
|
||||
if(safetyButton) {
|
||||
document.getElementById(this.namespace+"_"+safetyButton).getElementsByTagName("input")[0].disabled = false;
|
||||
document.getElementById(this.namespace+"_"+safetyButton).getElementsByTagName("input")[0].checked = true;
|
||||
}
|
||||
|
||||
var safetyButtonLastActive = message.data;
|
||||
}
|
||||
}
|
||||
|
||||
var leftArmControls = new ArmControls('left');
|
||||
@@ -197,9 +189,9 @@ robotiqDataTopic.subscribe(function(message) {
|
||||
|
||||
if ((Math.abs(force.x) > 0.5) || (Math.abs(force.y) > 0.5) || (Math.abs(force.z) > 0.5))
|
||||
{
|
||||
document.getElementById("calibrateButton").className = "btn btn-danger"
|
||||
//consider adding warning buttons
|
||||
} else {
|
||||
document.getElementById("calibrateButton").className = "btn btn-default"
|
||||
document.getElementById("calibrateButton").disabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -214,14 +206,31 @@ var recordingBagTopic = new ROSLIB.Topic({
|
||||
recordingBagTopic.subscribe(function(message) {
|
||||
if (message.data == "stopped")
|
||||
{
|
||||
document.getElementById("RecordingStatusLabel").innerHTML = 'Not Running';
|
||||
document.getElementById("RecordingStatusLabel").className = 'label label-warning';
|
||||
//document.getElementById("RecordingStatusLabel").innerHTML = 'Not Running';
|
||||
}
|
||||
else if (message.data == "running")
|
||||
{
|
||||
document.getElementById("RecordingStatusLabel").innerHTML = 'RUNNING!';
|
||||
document.getElementById("RecordingStatusLabel").className = 'label label-success';
|
||||
//document.getElementById("RecordingStatusLabel").innerHTML = 'Running!';
|
||||
}
|
||||
|
||||
var teachingModeToButtonMap = {
|
||||
"stopped" : "recordingStopButton",
|
||||
"running" : "recordingStartButton"
|
||||
}
|
||||
|
||||
if(teachingModeLastActive && teachingModeLastActive != message.data) {
|
||||
var teachingModeButton = teachingModeToButtonMap[teachingModeLastActive];
|
||||
if (teachingModeButton) {
|
||||
document.getElementById(teachingModeButton).classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
var teachingModeButton = teachingModeToButtonMap[message.data];
|
||||
if (teachingModeButton) {
|
||||
document.getElementById(teachingModeButton).classList.add("active");
|
||||
}
|
||||
|
||||
var teachingModeLastActive = message.data;
|
||||
});
|
||||
|
||||
// Executing Bag
|
||||
@@ -234,14 +243,30 @@ var executingBagTopic = new ROSLIB.Topic({
|
||||
executingBagTopic.subscribe(function(message) {
|
||||
if (message.data == "stopped")
|
||||
{
|
||||
document.getElementById("ExecutionStatusLabel").innerHTML = 'Not Running';
|
||||
document.getElementById("ExecutionStatusLabel").className = 'label label-warning';
|
||||
//document.getElementById("ExecutionStatusLabel").innerHTML = 'Not Running';
|
||||
}
|
||||
else if (message.data == "running")
|
||||
{
|
||||
document.getElementById("ExecutionStatusLabel").innerHTML = 'RUNNING!';
|
||||
document.getElementById("ExecutionStatusLabel").className = 'label label-success';
|
||||
//document.getElementById("ExecutionStatusLabel").innerHTML = 'RUNNING!';
|
||||
}
|
||||
var executionModeToButtonMap = {
|
||||
"stopped" : "executionStopButton",
|
||||
"running" : "executionStartButton"
|
||||
}
|
||||
|
||||
if(executionModeLastActive && executionModeLastActive != message.data) {
|
||||
var executionModeButton = teachingModeToButtonMap[executionModeLastActive];
|
||||
if (executionModeButton) {
|
||||
document.getElementById(executionModeButton).classList.remove("active");
|
||||
}
|
||||
}
|
||||
|
||||
var executionModeButton = executionModeToButtonMap[message.data];
|
||||
if (executionModeButton) {
|
||||
document.getElementById(executionModeButton).classList.add("active");
|
||||
}
|
||||
|
||||
var executionModeLastActive = message.data;
|
||||
});
|
||||
|
||||
|
||||
@@ -276,20 +301,6 @@ function triggerService(serviceName)
|
||||
serviceType : 'std_srvs/Trigger'
|
||||
});
|
||||
|
||||
console.log("hello biatch");
|
||||
$(document).ready(function(){
|
||||
$.notify({
|
||||
message: "ROS request didn't go through!"
|
||||
}, {
|
||||
"placement" : {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
type: 'danger',
|
||||
delay: 1000
|
||||
});
|
||||
});
|
||||
|
||||
var request = new ROSLIB.ServiceRequest({});
|
||||
|
||||
service.callService(request, function(result) {
|
||||
@@ -297,8 +308,32 @@ function triggerService(serviceName)
|
||||
+ serviceName
|
||||
+ ': '
|
||||
+ result.sum);
|
||||
$(document).ready(function(){
|
||||
$.notify({
|
||||
message: "Request error: " + serviceName + ". " + result.sum
|
||||
}, {
|
||||
"placement" : {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
type: 'success',
|
||||
delay: 1000
|
||||
});
|
||||
});
|
||||
}, function(error){
|
||||
console.log("errorored");
|
||||
console.log("errored");
|
||||
$(document).ready(function(){
|
||||
$.notify({
|
||||
message: "Request error: " + serviceName + ". " + result.sum
|
||||
}, {
|
||||
"placement" : {
|
||||
from: "bottom",
|
||||
align: "right"
|
||||
},
|
||||
type: 'danger',
|
||||
delay: 1000
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
<link rel="stylesheet" href="../include/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../include/css/fontawesome-free-5.8.2-web/css/all.css">
|
||||
<link rel="stylesheet" href="../../bower_components/pretty-checkbox/dist/pretty-checkbox.css">
|
||||
|
||||
|
||||
<script type="text/javascript" src="../include/js/eventemitter2.min.js"></script>
|
||||
@@ -23,6 +24,7 @@
|
||||
|
||||
<script type="text/javascript" src="../../bower_components/remarkable-bootstrap-notify/dist/bootstrap-notify.js"></script>
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
|
||||
@@ -9,7 +9,8 @@ html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #020625;
|
||||
color: #EDF0F4;
|
||||
//color: #EDF0F4;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fill-container {
|
||||
@@ -136,7 +137,8 @@ html, body {
|
||||
|
||||
.panel-heading, .panel-footer {
|
||||
background-color: #020625 !important;
|
||||
color: #EDF0F4 !important;
|
||||
//color: #EDF0F4 !important;
|
||||
color: white !important;
|
||||
text-align: center;
|
||||
font-size: 14pt;
|
||||
}
|
||||
@@ -170,7 +172,8 @@ html, body {
|
||||
.control-card .button-area > button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
color: #EDF0F4;
|
||||
//color: #EDF0F4;
|
||||
color: white;
|
||||
font-size : 14pt;
|
||||
background: #182048;
|
||||
}
|
||||
@@ -182,7 +185,8 @@ html, body {
|
||||
.status-container .action-button > button {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
color: #EDF0F4;
|
||||
//color: #EDF0F4;
|
||||
color: white;
|
||||
font-size : 14pt;
|
||||
background: #182048;
|
||||
width: 100%;
|
||||
@@ -202,7 +206,8 @@ html, body {
|
||||
|
||||
.nav-pills li a {
|
||||
border-radius: 0;
|
||||
color: #EDF0F4;
|
||||
//color: #EDF0F4;
|
||||
color: white;
|
||||
font-size : 16pt;
|
||||
font-weight: 600;
|
||||
background: #020625;
|
||||
@@ -213,7 +218,8 @@ html, body {
|
||||
}
|
||||
|
||||
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover, .nav>li>a:focus, .nav>li>a:hover{
|
||||
color: #EDF0F4;
|
||||
//color: #EDF0F4;
|
||||
color: white;
|
||||
background: #182048;
|
||||
}
|
||||
|
||||
@@ -279,7 +285,7 @@ html, body {
|
||||
.panel.panel-horizontal > .panel-body {
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
font-size: 12pt;
|
||||
font-size: 14pt;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
@@ -288,8 +294,44 @@ html, body {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
button[class*="active"] {
|
||||
//background-color: #085394 !important;
|
||||
background-image: linear-gradient(#085394, #073763) !important;
|
||||
}
|
||||
|
||||
button[class*="disabled"] {
|
||||
background-color: #262b40 !important;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button[class*="danger"] {
|
||||
background-image: linear-gradient(#b45f06, #783f04) !important;
|
||||
background-image: linear-gradient(#990000, #660000) !important;
|
||||
}
|
||||
|
||||
.status-container .robotiq .progress {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.status-container .robotiq .list-group-horizontal {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#recordingStartButton[active] {
|
||||
animation: blinker 3s linear infinite;
|
||||
}
|
||||
|
||||
#executionStartButton[active] {
|
||||
animation: blinker 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes blinker {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -36,12 +36,14 @@ console.log('ros.connectionName = ' + ros.connectionName);
|
||||
|
||||
// If there is an error on the backend, an 'error' emit will be emitted.
|
||||
ros.on('error', function(error) {
|
||||
/*
|
||||
document.getElementById("ConnectionIPForm").className = "form-group has-warning has-feedback";
|
||||
document.getElementById("ConnectionIPInput").value = ros.connectionName;
|
||||
document.getElementById("ConnectionIPLabel").innerHTML = 'No connection';
|
||||
document.getElementById("ConnectionButton").className = "btn btn-warning"
|
||||
document.getElementById("rosbridgeconnection_badge").innerHTML = 'No connection';
|
||||
document.getElementById("ROSNodes").innerHTML = "No Nodes Detected";
|
||||
*/
|
||||
|
||||
rosbridgeconnection_badge
|
||||
console.log(error);
|
||||
@@ -50,11 +52,13 @@ ros.on('error', function(error) {
|
||||
ros.on('connection', function() {
|
||||
ros.connected = true;
|
||||
console.log('Connection made!');
|
||||
/*
|
||||
document.getElementById("ConnectionIPForm").className = "form-group has-success has-feedback";
|
||||
document.getElementById("ConnectionIPInput").value = ros.connectionName;
|
||||
document.getElementById("ConnectionIPLabel").innerHTML = 'Connection made at:';
|
||||
document.getElementById("rosbridgeconnection_badge").innerHTML = 'Connected';
|
||||
document.getElementById("ConnectionButton").className = "btn btn-success";
|
||||
*/
|
||||
|
||||
ros.nodes = Array();
|
||||
ros.topics = Array();
|
||||
@@ -64,10 +68,14 @@ ros.on('connection', function() {
|
||||
ros.on('close', function() {
|
||||
console.log('Connection closed.');
|
||||
ros.connected = false;
|
||||
|
||||
/*
|
||||
document.getElementById("ConnectionIPForm").className = "form-group has-warning has-feedback";
|
||||
document.getElementById("ConnectionIPLabel").innerHTML = 'Connection closed';
|
||||
document.getElementById("ConnectionButton").className = "btn btn-warning"
|
||||
document.getElementById("rosbridgeconnection_badge").innerHTML = 'Connection closed';
|
||||
*/
|
||||
|
||||
ros.nodes = Array();
|
||||
ros.topics = Array();
|
||||
});
|
||||
|
||||
BIN
client/include/fonts/Roboto-Black.ttf
Executable file
BIN
client/include/fonts/Roboto-Black.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-BlackItalic.ttf
Executable file
BIN
client/include/fonts/Roboto-BlackItalic.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Bold.ttf
Executable file
BIN
client/include/fonts/Roboto-Bold.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-BoldItalic.ttf
Executable file
BIN
client/include/fonts/Roboto-BoldItalic.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Italic.ttf
Executable file
BIN
client/include/fonts/Roboto-Italic.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Light.ttf
Executable file
BIN
client/include/fonts/Roboto-Light.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-LightItalic.ttf
Executable file
BIN
client/include/fonts/Roboto-LightItalic.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Medium.ttf
Executable file
BIN
client/include/fonts/Roboto-Medium.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-MediumItalic.ttf
Executable file
BIN
client/include/fonts/Roboto-MediumItalic.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Regular.ttf
Executable file
BIN
client/include/fonts/Roboto-Regular.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-Thin.ttf
Executable file
BIN
client/include/fonts/Roboto-Thin.ttf
Executable file
Binary file not shown.
BIN
client/include/fonts/Roboto-ThinItalic.ttf
Executable file
BIN
client/include/fonts/Roboto-ThinItalic.ttf
Executable file
Binary file not shown.
Reference in New Issue
Block a user