├── docs ├── static │ ├── demo-js │ │ └── demo.js │ └── image │ │ ├── slider │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ └── 25.jpg │ │ └── box │ │ └── 700×300.png ├── index.html └── demo.html ├── src ├── install.js ├── components │ ├── box │ │ ├── index.js │ │ └── README.md │ ├── card │ │ └── index.js │ ├── grid │ │ └── index.js │ ├── row │ │ ├── index.js │ │ ├── row.vue │ │ └── README.md │ ├── alert │ │ ├── index.js │ │ ├── README.md │ │ └── install.js │ ├── cell │ │ ├── index.js │ │ ├── README.md │ │ └── cell.vue │ ├── confirm │ │ ├── index.js │ │ └── README.md │ ├── justify │ │ ├── index.js │ │ ├── justify.vue │ │ └── README.md │ ├── marquee │ │ └── index.js │ ├── number │ │ └── index.js │ ├── picker │ │ └── index.js │ ├── popup │ │ └── index.js │ ├── prompt │ │ └── index.js │ ├── radio │ │ └── index.js │ ├── rater │ │ └── index.js │ ├── slider │ │ └── index.js │ ├── submit │ │ ├── index.js │ │ └── README.md │ ├── toast │ │ ├── index.js │ │ └── install.js │ ├── toggle │ │ ├── index.js │ │ └── toggle.vue │ ├── upload │ │ └── index.js │ ├── button │ │ └── index.js │ ├── checkbox │ │ └── index.js │ ├── dropload │ │ └── index.js │ ├── overlay │ │ ├── index.js │ │ ├── overlay.vue │ │ └── README.md │ ├── spinner │ │ ├── index.js │ │ └── spinner │ │ │ ├── spinner.js │ │ │ ├── blade.vue │ │ │ ├── double-bounce.vue │ │ │ ├── snake.vue │ │ │ ├── fading-circle.vue │ │ │ └── triple-bounce.vue │ ├── tabbar │ │ └── index.js │ ├── textarea │ │ ├── index.js │ │ └── README.md │ ├── actionsheet │ │ └── index.js │ ├── dialogbox │ │ └── index.js │ ├── popup-picker │ │ └── index.js │ ├── progressbar │ │ └── index.js │ ├── tabcontrol │ │ └── index.js │ ├── popup-date-picker │ │ ├── index.js │ │ └── popup-date-picker.vue │ ├── navbar │ │ ├── topbar.vue │ │ └── index.js │ └── input │ │ └── index.js ├── scss │ ├── icono │ │ ├── icons │ │ │ ├── rewind.scss │ │ │ ├── stop.scss │ │ │ ├── cross.scss │ │ │ ├── pause.scss │ │ │ ├── previous.scss │ │ │ ├── ellipsis.scss │ │ │ ├── circle.scss │ │ │ ├── nexus.scss │ │ │ ├── outdent.scss │ │ │ ├── tiles.scss │ │ │ ├── bars.scss │ │ │ ├── play.scss │ │ │ ├── filter.scss │ │ │ ├── frown.scss │ │ │ ├── spinner.scss │ │ │ ├── meh.scss │ │ │ ├── sun.scss │ │ │ ├── list.scss │ │ │ ├── forbidden.scss │ │ │ ├── moon.scss │ │ │ ├── mail.scss │ │ │ ├── next.scss │ │ │ ├── power.scss │ │ │ ├── forward.scss │ │ │ ├── search.scss │ │ │ ├── pin.scss │ │ │ ├── eye.scss │ │ │ ├── user.scss │ │ │ ├── gear.scss │ │ │ ├── trash.scss │ │ │ ├── chain.scss │ │ │ ├── asterisk.scss │ │ │ ├── headphone.scss │ │ │ ├── infinity.scss │ │ │ ├── display.scss │ │ │ ├── file.scss │ │ │ ├── indent.scss │ │ │ ├── cart.scss │ │ │ ├── sitemap.scss │ │ │ ├── creditCard.scss │ │ │ ├── rss.scss │ │ │ ├── signin.scss │ │ │ ├── signout.scss │ │ │ ├── piano.scss │ │ │ ├── plus.scss │ │ │ ├── share.scss │ │ │ ├── rename.scss │ │ │ ├── clock.scss │ │ │ ├── bluetooth.scss │ │ │ ├── camera.scss │ │ │ ├── ruler.scss │ │ │ ├── sliders.scss │ │ │ ├── reset.scss │ │ │ ├── cup.scss │ │ │ ├── keyboard.scss │ │ │ ├── flag.scss │ │ │ ├── terminal.scss │ │ │ ├── document.scss │ │ │ ├── video.scss │ │ │ ├── image.scss │ │ │ ├── market.scss │ │ │ ├── music.scss │ │ │ ├── dropper.scss │ │ │ ├── locationArrow.scss │ │ │ ├── icono.scss │ │ │ ├── mouse.scss │ │ │ ├── microphone.scss │ │ │ ├── textAlign.scss │ │ │ ├── crop.scss │ │ │ ├── support.scss │ │ │ ├── home.scss │ │ │ ├── tag.scss │ │ │ ├── folder.scss │ │ │ ├── sync.scss │ │ │ ├── paperclip.scss │ │ │ ├── bookmark.scss │ │ │ ├── smile.scss │ │ │ ├── calendar.scss │ │ │ ├── arrow.scss │ │ │ ├── iphone.scss │ │ │ ├── book.scss │ │ │ ├── youtube.scss │ │ │ ├── heart.scss │ │ │ ├── check.scss │ │ │ ├── macbook.scss │ │ │ ├── exclamation.scss │ │ │ └── comment.scss │ │ ├── generals.scss │ │ ├── functions.scss │ │ ├── variables.scss │ │ └── icono.scss │ ├── components │ │ ├── grid.scss │ │ ├── overlay.scss │ │ ├── actionsheet.scss │ │ ├── box.scss │ │ ├── number.scss │ │ ├── row.scss │ │ ├── alert.scss │ │ ├── popup-picker.scss │ │ ├── confirm.scss │ │ ├── progressbar.scss │ │ ├── textarea.scss │ │ ├── cell.scss │ │ ├── upload.scss │ │ ├── navbar.scss │ │ ├── rater.scss │ │ ├── prompt.scss │ │ ├── tabbar.scss │ │ ├── dialog.scss │ │ └── marquee.scss │ └── util │ │ ├── justify.scss │ │ ├── reddot.scss │ │ ├── badge.scss │ │ └── nowrap.scss ├── styles │ ├── icono │ │ ├── icons │ │ │ ├── stop.less │ │ │ ├── rewind.less │ │ │ ├── cross.less │ │ │ ├── pause.less │ │ │ ├── ellipsis.less │ │ │ ├── circle.less │ │ │ ├── previous.less │ │ │ ├── nexus.less │ │ │ ├── tiles.less │ │ │ ├── outdent.less │ │ │ ├── play.less │ │ │ ├── bars.less │ │ │ ├── next.less │ │ │ ├── spinner.less │ │ │ ├── filter.less │ │ │ ├── sun.less │ │ │ ├── frown.less │ │ │ ├── meh.less │ │ │ ├── list.less │ │ │ ├── forbidden.less │ │ │ ├── moon.less │ │ │ ├── mail.less │ │ │ ├── power.less │ │ │ ├── search.less │ │ │ ├── forward.less │ │ │ ├── user.less │ │ │ ├── pin.less │ │ │ ├── eye.less │ │ │ ├── gear.less │ │ │ ├── trash.less │ │ │ ├── chain.less │ │ │ ├── headphone.less │ │ │ ├── infinity.less │ │ │ ├── cart.less │ │ │ ├── display.less │ │ │ ├── indent.less │ │ │ ├── asterisk.less │ │ │ ├── file.less │ │ │ ├── sitemap.less │ │ │ ├── rss.less │ │ │ ├── creditCard.less │ │ │ ├── signin.less │ │ │ ├── piano.less │ │ │ ├── share.less │ │ │ ├── plus.less │ │ │ ├── signout.less │ │ │ ├── keyboard.less │ │ │ ├── rename.less │ │ │ ├── bluetooth.less │ │ │ ├── clock.less │ │ │ ├── ruler.less │ │ │ ├── camera.less │ │ │ ├── sliders.less │ │ │ ├── cup.less │ │ │ ├── reset.less │ │ │ ├── flag.less │ │ │ ├── terminal.less │ │ │ ├── dropper.less │ │ │ ├── document.less │ │ │ ├── image.less │ │ │ ├── video.less │ │ │ ├── market.less │ │ │ ├── music.less │ │ │ ├── icono.less │ │ │ ├── microphone.less │ │ │ ├── crop.less │ │ │ ├── locationArrow.less │ │ │ ├── mouse.less │ │ │ ├── textAlign.less │ │ │ ├── home.less │ │ │ ├── support.less │ │ │ ├── tag.less │ │ │ ├── folder.less │ │ │ ├── calendar.less │ │ │ ├── paperclip.less │ │ │ ├── sync.less │ │ │ ├── bookmark.less │ │ │ ├── smile.less │ │ │ ├── arrow.less │ │ │ ├── iphone.less │ │ │ ├── book.less │ │ │ ├── youtube.less │ │ │ ├── check.less │ │ │ ├── heart.less │ │ │ ├── macbook.less │ │ │ ├── exclamation.less │ │ │ └── comment.less │ │ ├── variables.less │ │ ├── generals.less │ │ ├── mixins.less │ │ └── icono.less │ ├── components │ │ ├── grid.less │ │ ├── overlay.less │ │ ├── actionsheet.less │ │ ├── box.less │ │ ├── number.less │ │ ├── row.less │ │ ├── popup-picker.less │ │ ├── alert.less │ │ ├── confirm.less │ │ ├── progressbar.less │ │ ├── cell.less │ │ ├── textarea.less │ │ ├── navbar.less │ │ ├── upload.less │ │ ├── rater.less │ │ ├── prompt.less │ │ ├── tabbar.less │ │ ├── dialog.less │ │ └── marquee.less │ └── util │ │ ├── justify.less │ │ ├── reddot.less │ │ ├── badge.less │ │ └── nowrap.less ├── utils │ ├── filter.js │ ├── env.js │ └── index.js └── vmc.js ├── examples ├── static │ ├── demo-js │ │ └── demo.js │ └── image │ │ ├── slider │ │ ├── 1.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 17.jpg │ │ ├── 18.jpg │ │ ├── 19.jpg │ │ ├── 2.jpg │ │ ├── 20.jpg │ │ ├── 21.jpg │ │ ├── 22.jpg │ │ ├── 23.jpg │ │ ├── 24.jpg │ │ ├── 25.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ └── 7.jpg │ │ └── box │ │ └── 700×300.png ├── pages │ ├── components │ │ ├── reddot.vue │ │ ├── justify.vue │ │ ├── badge.vue │ │ ├── textarea.vue │ │ ├── shake.vue │ │ ├── tabbar.vue │ │ └── box.vue │ └── extends │ │ └── popup-address-picker.vue ├── index.html ├── demo.html ├── main.js └── assets │ └── css │ └── transition.css ├── .gitignore ├── .postcssrc.js └── .babelrc /docs/static/demo-js/demo.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app' 3 | }); -------------------------------------------------------------------------------- /src/install.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./components/install'); -------------------------------------------------------------------------------- /examples/static/demo-js/demo.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: '#app' 3 | }); -------------------------------------------------------------------------------- /src/components/box/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./box.vue'); -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./card.vue'); -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./grid.vue'); -------------------------------------------------------------------------------- /src/components/row/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./row.vue'); -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./alert.vue'); -------------------------------------------------------------------------------- /src/components/cell/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./cell.vue'); 2 | -------------------------------------------------------------------------------- /src/components/confirm/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./confirm.vue'); -------------------------------------------------------------------------------- /src/components/justify/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./justify.vue'); -------------------------------------------------------------------------------- /src/components/marquee/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./marquee.vue'); -------------------------------------------------------------------------------- /src/components/number/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./number.vue'); -------------------------------------------------------------------------------- /src/components/picker/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./picker.vue'); -------------------------------------------------------------------------------- /src/components/popup/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./popup.vue'); -------------------------------------------------------------------------------- /src/components/prompt/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./prompt.vue'); -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./radio.vue'); -------------------------------------------------------------------------------- /src/components/rater/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./rater.vue'); -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./slider.vue'); -------------------------------------------------------------------------------- /src/components/submit/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./submit.vue'); -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./toast.vue'); -------------------------------------------------------------------------------- /src/components/toggle/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./toggle.vue'); -------------------------------------------------------------------------------- /src/components/upload/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./upload.vue'); -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./v-button.vue'); 2 | -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./checkbox.vue'); -------------------------------------------------------------------------------- /src/components/dropload/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dropload.vue'); -------------------------------------------------------------------------------- /src/components/overlay/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./overlay.vue'); 2 | -------------------------------------------------------------------------------- /src/components/spinner/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./spinner.vue'); 2 | -------------------------------------------------------------------------------- /src/components/tabbar/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./tabbar.vue'); 2 | -------------------------------------------------------------------------------- /src/components/textarea/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./v-textarea.vue'); -------------------------------------------------------------------------------- /src/components/actionsheet/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./actionsheet.vue'); -------------------------------------------------------------------------------- /src/components/dialogbox/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./dialogbox.vue'); 2 | -------------------------------------------------------------------------------- /src/components/popup-picker/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./popup-picker.vue'); -------------------------------------------------------------------------------- /src/components/progressbar/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./progressbar.vue'); -------------------------------------------------------------------------------- /src/components/tabcontrol/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./tabcontrol.vue'); -------------------------------------------------------------------------------- /src/components/popup-date-picker/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./popup-date-picker.vue'); -------------------------------------------------------------------------------- /docs/static/image/slider/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/1.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/2.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/3.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/4.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/5.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/6.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/7.jpg -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | uploads/ 6 | .idea 7 | .git/ 8 | -------------------------------------------------------------------------------- /docs/static/image/slider/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/11.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/12.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/13.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/14.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/15.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/16.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/17.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/18.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/19.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/20.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/21.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/22.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/23.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/24.jpg -------------------------------------------------------------------------------- /docs/static/image/slider/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/slider/25.jpg -------------------------------------------------------------------------------- /docs/static/image/box/700×300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/docs/static/image/box/700×300.png -------------------------------------------------------------------------------- /examples/static/image/slider/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/1.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/11.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/12.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/13.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/14.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/15.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/16.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/17.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/18.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/19.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/2.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/20.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/21.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/22.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/23.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/24.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/25.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/3.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/4.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/5.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/6.jpg -------------------------------------------------------------------------------- /examples/static/image/slider/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/slider/7.jpg -------------------------------------------------------------------------------- /examples/static/image/box/700×300.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Spikef/vmc/master/examples/static/image/box/700×300.png -------------------------------------------------------------------------------- /src/components/navbar/topbar.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mInput: require('./m-input.vue'), 3 | vInput: require('./v-input.vue') 4 | }; -------------------------------------------------------------------------------- /src/components/navbar/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Topbar: require('./topbar.vue'), 3 | Navbar: require('./navbar.vue') 4 | }; 5 | -------------------------------------------------------------------------------- /src/scss/icono/icons/rewind.scss: -------------------------------------------------------------------------------- 1 | //*-- Rewind --*\\ 2 | .icono-rewind{ 3 | @extend .icono-forward; 4 | transform: rotate(180deg); 5 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/stop.scss: -------------------------------------------------------------------------------- 1 | //*-- Stop --*\\ 2 | .icono-stop{ 3 | width: 0; 4 | height: 0; 5 | border: solid $U10; 6 | margin: $U7; 7 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/stop.less: -------------------------------------------------------------------------------- 1 | //*-- Stop --*\\ 2 | .icono-stop{ 3 | width: 0; 4 | height: 0; 5 | border: solid @10; 6 | margin: @7; 7 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/rewind.less: -------------------------------------------------------------------------------- 1 | //*-- Rewind --*\\ 2 | .icono-rewind{ 3 | &:extend(.icono-forward all); 4 | transform: rotate(180deg); 5 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/cross.scss: -------------------------------------------------------------------------------- 1 | //*-- Cross --*\\ 2 | //Cross is 45degree rotated plus :) 3 | .icono-cross, .icono-crossCircle{ 4 | transform: rotate(45deg); 5 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/cross.less: -------------------------------------------------------------------------------- 1 | //*-- Cross --*\\ 2 | //Cross is 45degree rotated plus :) 3 | .icono-cross, .icono-crossCircle{ 4 | transform: rotate(45deg); 5 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/pause.less: -------------------------------------------------------------------------------- 1 | .icono-pause{ 2 | width: @6; 3 | height: @20; 4 | margin: @7 @20 @7 @8; 5 | box-shadow: inset 0 0 0 @32, @12 0 0 0; 6 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/pause.scss: -------------------------------------------------------------------------------- 1 | .icono-pause{ 2 | width: $U6; 3 | height: $U20; 4 | margin: $U7 $U20 $U7 $U8; 5 | box-shadow: inset 0 0 0 $U32, $U12 0 0 0; 6 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/previous.scss: -------------------------------------------------------------------------------- 1 | //*-- Previous --*\\ 2 | .icono-previous{ 3 | @extend .icono-next; 4 | transform: rotate(180deg); 5 | margin: $U7 $U10 $U7 $U14; 6 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/ellipsis.less: -------------------------------------------------------------------------------- 1 | //*-- Ellipsis --*\\ 2 | .icono-ellipsis{ 3 | .square(@4); 4 | box-shadow: 0 -1*@8 0, 0 0 0 @32 inset, 0 @8 0; 5 | margin: @15; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/utils/filter.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | return { 3 | spaceText(val) { 4 | return String(val).split('').join(' '); 5 | } 6 | }; 7 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/ellipsis.scss: -------------------------------------------------------------------------------- 1 | //*-- Ellipsis --*\\ 2 | .icono-ellipsis{ 3 | @include square($U4); 4 | box-shadow: 0 -1*$U8 0, 0 0 0 $U32 inset, 0 $U8 0; 5 | margin: $U15; 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/icono/icons/circle.less: -------------------------------------------------------------------------------- 1 | //*-- Circle --*\\ 2 | .icono-circle{ 3 | width: @22; 4 | height: @22; 5 | border: @2 solid; 6 | border-radius: 50%; 7 | margin: @6; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/icono/icons/previous.less: -------------------------------------------------------------------------------- 1 | //*-- Previous --*\\ 2 | .icono-previous{ 3 | &:extend(.icono-next all); 4 | transform: rotate(180deg); 5 | margin: @7 @10 @7 @14; 6 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/circle.scss: -------------------------------------------------------------------------------- 1 | //*-- Circle --*\\ 2 | .icono-circle{ 3 | width: $U22; 4 | height: $U22; 5 | border: $U2 solid; 6 | border-radius: 50%; 7 | margin: $U6; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/icono/icons/nexus.less: -------------------------------------------------------------------------------- 1 | //*-- Nexus --*\\ 2 | .icono-nexus{ 3 | width: @21; 4 | height: @32; 5 | &:extend(.icono-stroke); 6 | border-width: @3 @1; 7 | border-radius: @16 ~'/' @3; 8 | margin: @1 @7 @1 @6; 9 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/tiles.less: -------------------------------------------------------------------------------- 1 | //*-- Tiles --*\\ 2 | .icono-tiles{ 3 | .square(@4); 4 | box-shadow: 0 -1*@8 0, -1*@8 -1*@8 0, @8 -1*@8 0, 5 | 0 0 0 @32 inset, -1*@8 0 0, @8 0 0, 6 | 0 @8 0, -1*@8 @8 0, @8 @8 0; 7 | margin: @15; 8 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/nexus.scss: -------------------------------------------------------------------------------- 1 | //*-- Nexus --*\\ 2 | .icono-nexus{ 3 | width: $U21; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-width: $U3 $U1; 7 | border-radius: $U16 #{'/'} $U3; 8 | margin: $U1 $U7 $U1 $U6; 9 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/outdent.scss: -------------------------------------------------------------------------------- 1 | //*-- Outdent --*\\ 2 | .icono-outdent{ 3 | @extend .icono-indent; 4 | &:before{ 5 | @extend .icono-indent:before; 6 | border-left-width: 0; 7 | border-right-width: $U5; 8 | } 9 | } -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /src/styles/icono/icons/outdent.less: -------------------------------------------------------------------------------- 1 | //*-- Outdent --*\\ 2 | .icono-outdent{ 3 | &:extend(.icono-indent); 4 | &:before{ 5 | &:extend(.icono-indent:before); 6 | border-left-width: 0; 7 | border-right-width: @5; 8 | } 9 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/tiles.scss: -------------------------------------------------------------------------------- 1 | //*-- Tiles --*\\ 2 | .icono-tiles{ 3 | @include square($U4); 4 | box-shadow: 0 -1*$U8 0, -1*$U8 -1*$U8 0, $U8 -1*$U8 0, 5 | 0 0 0 $U32 inset, -1*$U8 0 0, $U8 0 0, 6 | 0 $U8 0, -1*$U8 $U8 0, $U8 $U8 0; 7 | margin: $U15; 8 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/play.less: -------------------------------------------------------------------------------- 1 | .icono-play { 2 | width: 0; 3 | height: 0; 4 | border-width: @10 0 @10 @16; 5 | border-style: solid; 6 | border-top-color: transparent; 7 | border-bottom-color: transparent; 8 | margin: @7 @9; 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/icono/icons/bars.scss: -------------------------------------------------------------------------------- 1 | //*-- bars --*\\ 2 | .icono-bars{ 3 | width: $U20; 4 | height: $U2; 5 | box-shadow: inset 0 0 0 $U32, 0 -1*$U6, 0 $U6; 6 | margin: $U16 $U7; 7 | } 8 | .icono-hamburger{ 9 | @extend .icono-bars;//will be deprecate 10 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/play.scss: -------------------------------------------------------------------------------- 1 | .icono-play { 2 | width: 0; 3 | height: 0; 4 | border-width: $U10 0 $U10 $U16; 5 | border-style: solid; 6 | border-top-color: transparent; 7 | border-bottom-color: transparent; 8 | margin: $U7 $U9; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/icono/icons/bars.less: -------------------------------------------------------------------------------- 1 | //*-- bars --*\\ 2 | .icono-bars{ 3 | width: @20; 4 | height: @2; 5 | box-shadow: inset 0 0 0 @32, 0 -1*@6, 0 @6; 6 | margin: @16 @7; 7 | } 8 | .icono-hamburger{ 9 | &:extend(.icono-bars);//will be deprecate 10 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/next.less: -------------------------------------------------------------------------------- 1 | //*-- Next --*\\ 2 | .icono-next{ 3 | width: 0; 4 | height: 0; 5 | border: @10 solid transparent; 6 | border-left: @10 solid; 7 | border-right: none; 8 | margin: @7 @14 @7 @10; 9 | box-shadow: @4 0; 10 | } -------------------------------------------------------------------------------- /src/scss/components/grid.scss: -------------------------------------------------------------------------------- 1 | .vmc-grid { 2 | ul.justify { 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | li { 8 | display: inline-block; 9 | box-sizing: border-box; 10 | vertical-align: middle; 11 | } 12 | } -------------------------------------------------------------------------------- /src/styles/components/grid.less: -------------------------------------------------------------------------------- 1 | .vmc-grid { 2 | ul.justify { 3 | display: flex; 4 | justify-content: space-between; 5 | } 6 | 7 | li { 8 | display: inline-block; 9 | box-sizing: border-box; 10 | vertical-align: middle; 11 | } 12 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/spinner.less: -------------------------------------------------------------------------------- 1 | //*-- Spinner --*\\ 2 | .icono-spinner{ 3 | width: @20; 4 | height: @20; 5 | border-radius: 50%; 6 | box-shadow: -@16 0 0 -@9,-@11 -@11 0 -@9,0 -@16 0 -@9,@11 -@11 0 -@8,@16 0 0 -@7,@11 @11 0 -@7,0 @16 0 -@7,-@11 @11 0 -@7; 7 | margin: @7; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/justify/justify.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /src/scss/icono/icons/filter.scss: -------------------------------------------------------------------------------- 1 | //*-- Filter --*\\ 2 | .icono-filter{ 3 | width: 0; 4 | height: 0; 5 | border: $U10 solid; 6 | border-bottom: none; 7 | border-left-color: transparent; 8 | border-right-color: transparent; 9 | padding: $U3; 10 | box-shadow: inset 0 $U7; 11 | margin: $U9 $U4; 12 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/filter.less: -------------------------------------------------------------------------------- 1 | //*-- Filter --*\\ 2 | .icono-filter{ 3 | width: 0; 4 | height: 0; 5 | border: @10 solid; 6 | border-bottom: none; 7 | border-left-color: transparent; 8 | border-right-color: transparent; 9 | padding: @3; 10 | box-shadow: inset 0 @7; 11 | margin: @9 @4; 12 | } -------------------------------------------------------------------------------- /src/scss/components/overlay.scss: -------------------------------------------------------------------------------- 1 | .vmc-mask { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | z-index: 200; 8 | 9 | &.transparent { 10 | background-color: transparent; 11 | } 12 | 13 | &.black { 14 | background-color: $MaskBackColor; 15 | } 16 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/frown.scss: -------------------------------------------------------------------------------- 1 | //*-- Frown --*\\ 2 | .icono-frown{ 3 | @extend .icono-smile; 4 | &:before{ 5 | @extend .icono-smile:before; 6 | } 7 | &:after{ 8 | @extend .icono-smile:after; 9 | transform: translateX(-50%) rotate(180deg); 10 | transform-origin: center 85%; 11 | } 12 | } -------------------------------------------------------------------------------- /src/scss/util/justify.scss: -------------------------------------------------------------------------------- 1 | .vmc-justify { 2 | text-align: justify; 3 | font-size: 0; 4 | 5 | &:after { 6 | content: ''; 7 | display: inline-block; 8 | width: 100%; 9 | height: 0; 10 | overflow: hidden; 11 | } 12 | 13 | >* { 14 | font-size: initial; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/components/overlay.less: -------------------------------------------------------------------------------- 1 | .vmc-mask { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | z-index: 200; 8 | 9 | &.transparent { 10 | background-color: transparent; 11 | } 12 | 13 | &.black { 14 | background-color: @MaskBackColor; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/util/justify.less: -------------------------------------------------------------------------------- 1 | .vmc-justify { 2 | text-align: justify; 3 | font-size: 0; 4 | 5 | &:after { 6 | content: ''; 7 | display: inline-block; 8 | width: 100%; 9 | height: 0; 10 | overflow: hidden; 11 | } 12 | 13 | >* { 14 | font-size: initial; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/sun.less: -------------------------------------------------------------------------------- 1 | //*-- Sun --*\\ 2 | .icono-sun{ 3 | width: @22; 4 | height: @22; 5 | border: @2 solid; 6 | border-radius: 50%; 7 | box-shadow: -@15 0 0 -@9, @15 0 0 -@9, 0 -@15 0 -@9, 0 @15 0 -@9, 8 | @11 @11 0 -@9, -@11 -@11 0 -@9, @11 -@11 0 -@9, -@11 @11 0 -@9; 9 | margin: @6; 10 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/frown.less: -------------------------------------------------------------------------------- 1 | //*-- Frown --*\\ 2 | .icono-frown{ 3 | &:extend(.icono-smile); 4 | &:before{ 5 | &:extend(.icono-smile:before); 6 | } 7 | &:after{ 8 | &:extend(.icono-smile:after); 9 | transform: translateX(-50%) rotate(180deg); 10 | transform-origin: center 85%; 11 | } 12 | } -------------------------------------------------------------------------------- /src/scss/components/actionsheet.scss: -------------------------------------------------------------------------------- 1 | .vmc-action-sheet { 2 | .vmc-popup { 3 | background: $ActionSheetBackColor; 4 | } 5 | 6 | .vmc-button { 7 | height: $ActionSheetButtonHeight; 8 | background: $ActionSheetButtonBackColor; 9 | 10 | &.cancel { 11 | margin-top: 5px; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/spinner.scss: -------------------------------------------------------------------------------- 1 | //*-- Spinner --*\\ 2 | .icono-spinner{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 50%; 6 | box-shadow: -1*$U16 0 0 -1*$U9,-1*$U11 -1*$U11 0 -1*$U9,0 -1*$U16 0 -1*$U9,1*$U11 -1*$U11 0 -1*$U8,1*$U16 0 0 -1*$U7,1*$U11 1*$U11 0 -1*$U7,0 1*$U16 0 -1*$U7,-1*$U11 1*$U11 0 -1*$U7; 7 | margin: $U7; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/components/actionsheet.less: -------------------------------------------------------------------------------- 1 | .vmc-action-sheet { 2 | .vmc-popup { 3 | background: @ActionSheetBackColor; 4 | } 5 | 6 | .vmc-button { 7 | height: @ActionSheetButtonHeight; 8 | background: @ActionSheetButtonBackColor; 9 | 10 | &.cancel { 11 | margin-top: 5px; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime", "transform-vue-jsx"], 9 | "comments": false, 10 | "env": { 11 | "test": { 12 | "presets": ["latest", "stage-2"], 13 | "plugins": [ "istanbul" ] 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/icono/icons/meh.scss: -------------------------------------------------------------------------------- 1 | //*-- Meh --*\\ 2 | .icono-meh{ 3 | @extend .icono-smile; 4 | &:before{ 5 | @extend .icono-smile:before; 6 | } 7 | &:after{ 8 | @extend .icono-smile:after; 9 | top: 0; 10 | width: $U12; 11 | border-left-width: 0; 12 | border-right-width: 0; 13 | border-radius: 0; 14 | } 15 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/meh.less: -------------------------------------------------------------------------------- 1 | //*-- Meh --*\\ 2 | .icono-meh{ 3 | &:extend(.icono-smile); 4 | &:before{ 5 | &:extend(.icono-smile:before); 6 | } 7 | &:after{ 8 | &:extend(.icono-smile:after); 9 | top: 0; 10 | width: @12; 11 | border-left-width: 0; 12 | border-right-width: 0; 13 | border-radius: 0; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/sun.scss: -------------------------------------------------------------------------------- 1 | //*-- Sun --*\\ 2 | .icono-sun{ 3 | width: $U22; 4 | height: $U22; 5 | border: $U2 solid; 6 | border-radius: 50%; 7 | box-shadow: -1*$U15 0 0 -1*$U9, $U15 0 0 -1*$U9, 0 -1*$U15 0 -1*$U9, 0 $U15 0 -1*$U9, 8 | $U11 $U11 0 -1*$U9, -1*$U11 -1*$U11 0 -1*$U9, $U11 -1*$U11 0 -1*$U9, -1*$U11 $U11 0 -1*$U9; 9 | margin: $U6; 10 | } -------------------------------------------------------------------------------- /src/scss/util/reddot.scss: -------------------------------------------------------------------------------- 1 | .vmc-red-dot { 2 | position: relative; 3 | 4 | &:before { 5 | content: ''; 6 | display: block; 7 | height: $RedDotSize; 8 | width: $RedDotSize; 9 | border-radius: 50%; 10 | background-color: $RedDotColor; 11 | position: absolute; 12 | top: 0; 13 | right: -$RedDotSize; 14 | } 15 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/list.less: -------------------------------------------------------------------------------- 1 | //*-- List --*\\ 2 | .icono-list{ 3 | .square(@4); 4 | box-shadow: inset 0 0 0 @32, 0 -1*@8 0 0, 0 1*@8 0 0; 5 | margin: @15 @26 @15 @4; 6 | &:before{ 7 | &:extend(.stickCenterV); 8 | width: @18; 9 | height: @4; 10 | left: @8; 11 | box-shadow: inset 0 0 0 @32, 0 -1*@8 0 0, 0 1*@8 0 0; 12 | } 13 | } -------------------------------------------------------------------------------- /src/styles/util/reddot.less: -------------------------------------------------------------------------------- 1 | .vmc-red-dot { 2 | position: relative; 3 | 4 | &:before { 5 | content: ''; 6 | display: block; 7 | height: @RedDotSize; 8 | width: @RedDotSize; 9 | border-radius: 50%; 10 | background-color: @RedDotColor; 11 | position: absolute; 12 | top: 0; 13 | right: -@RedDotSize; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/components/box.scss: -------------------------------------------------------------------------------- 1 | .vmc-box { 2 | height: 0; 3 | position: relative; 4 | 5 | .vmc-box-content { 6 | position: absolute; 7 | width: 100%; 8 | height: 100%; 9 | left: 0; 10 | top: 0; 11 | background-size: 100% 100%; 12 | 13 | img { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles/components/box.less: -------------------------------------------------------------------------------- 1 | .vmc-box { 2 | height: 0; 3 | position: relative; 4 | 5 | .vmc-box-content { 6 | position: absolute; 7 | width: 100%; 8 | height: 100%; 9 | left: 0; 10 | top: 0; 11 | background-size: 100% 100%; 12 | 13 | img { 14 | width: 100%; 15 | height: 100%; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/list.scss: -------------------------------------------------------------------------------- 1 | //*-- List --*\\ 2 | .icono-list{ 3 | @include square($U4); 4 | box-shadow: inset 0 0 0 $U32, 0 -1*$U8 0 0, 0 1*$U8 0 0; 5 | margin: $U15 $U26 $U15 $U4; 6 | &:before{ 7 | @extend .stickCenterV; 8 | width: $U18; 9 | height: $U4; 10 | left: $U8; 11 | box-shadow: inset 0 0 0 $U32, 0 -1*$U8 0 0, 0 1*$U8 0 0; 12 | } 13 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/forbidden.less: -------------------------------------------------------------------------------- 1 | //*-- Forbidden --*\\ 2 | .icono-forbidden{ 3 | .square(@28); 4 | &:extend(.icono-stroke); 5 | border-width: @3; 6 | border-radius: 50%; 7 | margin: @3; 8 | transform: rotate(45deg); 9 | &:before{ 10 | &:extend(.stickCenter); 11 | width: @24; 12 | height: @4; 13 | box-shadow: inset 0 0 0 @32; 14 | } 15 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/moon.less: -------------------------------------------------------------------------------- 1 | //*-- Moon --*\\ 2 | .icono-moon{ 3 | width: @22; 4 | height: @22; 5 | border-radius: 50%; 6 | overflow: hidden; 7 | margin: @6; 8 | &:before{ 9 | position: absolute; 10 | width: @20; 11 | height: @20; 12 | top: -@2; 13 | left: @6; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 @32; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/forbidden.scss: -------------------------------------------------------------------------------- 1 | //*-- Forbidden --*\\ 2 | .icono-forbidden{ 3 | @include square($U28); 4 | @extend .icono-stroke; 5 | border-width: $U3; 6 | border-radius: 50%; 7 | margin: $U3; 8 | transform: rotate(45deg); 9 | &:before{ 10 | @extend .stickCenter; 11 | width: $U24; 12 | height: $U4; 13 | box-shadow: inset 0 0 0 $U32; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/moon.scss: -------------------------------------------------------------------------------- 1 | //*-- Moon --*\\ 2 | .icono-moon{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 50%; 6 | overflow: hidden; 7 | margin: $U6; 8 | &:before{ 9 | position: absolute; 10 | width: $U20; 11 | height: $U20; 12 | top: -$U2; 13 | left: $U6; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 $U32; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/mail.less: -------------------------------------------------------------------------------- 1 | //*-- Mail --*\\ 2 | .icono-mail{ 3 | .goldenRectL(@28); 4 | &:extend(.icono-stroke); 5 | overflow: hidden; 6 | margin: @8 @3; 7 | &:before{ 8 | position: absolute; 9 | .square(@32/1.3); 10 | &:extend(.icono-stroke); 11 | transform: rotate(50deg) skew(-10deg, -20deg); 12 | top: -1*@20; 13 | left: -1*@3; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/util/badge.scss: -------------------------------------------------------------------------------- 1 | .vmc-badge { 2 | display: inline-block; 3 | text-align: center; 4 | background: $BadgeBackColor; 5 | color: $BadgeTextColor; 6 | font-size: $BadgeTextSize; 7 | height: $BadgeHeight; 8 | line-height: $BadgeHeight; 9 | min-width: $BadgeHeight; 10 | border-radius: $BadgeHeight / 2; 11 | padding: 0 ($BadgeHeight - $BadgeTextSize); 12 | box-sizing: border-box; 13 | } -------------------------------------------------------------------------------- /src/styles/util/badge.less: -------------------------------------------------------------------------------- 1 | .vmc-badge { 2 | display: inline-block; 3 | text-align: center; 4 | background: @BadgeBackColor; 5 | color: @BadgeTextColor; 6 | font-size: @BadgeTextSize; 7 | height: @BadgeHeight; 8 | line-height: @BadgeHeight; 9 | min-width: @BadgeHeight; 10 | border-radius: @BadgeHeight / 2; 11 | padding: 0 (@BadgeHeight - @BadgeTextSize); 12 | box-sizing: border-box; 13 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/mail.scss: -------------------------------------------------------------------------------- 1 | //*-- Mail --*\\ 2 | .icono-mail{ 3 | @include goldenRectL($U28); 4 | @extend .icono-stroke; 5 | overflow: hidden; 6 | margin: $U8 $U3; 7 | &:before{ 8 | position: absolute; 9 | @include square($U32/1.3); 10 | @extend .icono-stroke; 11 | transform: rotate(50deg) skew(-10deg, -20deg); 12 | top: -1*$U20; 13 | left: -1*$U3; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/next.scss: -------------------------------------------------------------------------------- 1 | //*-- Next --*\\ 2 | .icono-next{ 3 | width: 0; 4 | height: 0; 5 | border: $U10 solid transparent; 6 | border-left: $U10 solid; 7 | margin: $U7; 8 | &:before{ 9 | position: absolute; 10 | left: 0; 11 | top: -$U10; 12 | width: 0; 13 | height: 0; 14 | border-width: $U10 $U3 $U10 $U3; 15 | border-style: solid; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/power.scss: -------------------------------------------------------------------------------- 1 | //*-- Power --*\\ 2 | .icono-power{ 3 | width: $U22; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-radius: 50%; 7 | border-top-color: transparent; 8 | margin: $U6; 9 | &:before{ 10 | position: absolute; 11 | top: -15%; 12 | left: $U8; 13 | width: $U2; 14 | height:60%; 15 | box-shadow: inset 0 0 0 $U32; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/util/nowrap.scss: -------------------------------------------------------------------------------- 1 | .vmc-nowrap { 2 | max-width: 100%; 3 | overflow: hidden; 4 | white-space: nowrap; 5 | text-overflow: ellipsis; 6 | } 7 | 8 | // mixin 9 | @for $i from 1 through 5 { 10 | .vmc-nowrap-#{$i} { 11 | display: -webkit-box; 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | -webkit-box-orient: vertical; 15 | -webkit-line-clamp: $i; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/power.less: -------------------------------------------------------------------------------- 1 | //*-- Power --*\\ 2 | .icono-power{ 3 | width: @22; 4 | height: @22; 5 | &:extend(.icono-stroke); 6 | border-radius: 50%; 7 | border-top-color: transparent; 8 | margin: @6; 9 | &:before{ 10 | position: absolute; 11 | top: -15%; 12 | left: @8; 13 | width: @2; 14 | height:60%; 15 | box-shadow: inset 0 0 0 @32; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/search.less: -------------------------------------------------------------------------------- 1 | //*-- Search --*\\ 2 | .icono-search{ 3 | .square(@22); 4 | border-radius: 50%; 5 | &:extend(.icono-stroke); 6 | transform: rotate(45deg); 7 | margin: @4 @4 @8 @8; 8 | &:before{ 9 | width: @4; 10 | height: @11; 11 | &:extend(.stickCenterH); 12 | box-shadow: inset 0 0 0 @32; 13 | top: @19; 14 | border-radius: 0 0 @1 @1; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/forward.less: -------------------------------------------------------------------------------- 1 | //*-- Fast Forward --*\\ 2 | .icono-forward{ 3 | width: 0; 4 | height: 0; 5 | border: @10 solid transparent; 6 | border-left: @10 solid; 7 | margin: @7; 8 | &:before{ 9 | position: absolute; 10 | left: 0; 11 | top: -@10; 12 | width: 0; 13 | height: 0; 14 | border: @10 solid transparent; 15 | border-left: @10 solid; 16 | } 17 | } -------------------------------------------------------------------------------- /examples/pages/components/reddot.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | -------------------------------------------------------------------------------- /src/scss/icono/icons/forward.scss: -------------------------------------------------------------------------------- 1 | //*-- Fast Forward --*\\ 2 | .icono-forward{ 3 | width: 0; 4 | height: 0; 5 | border: $U10 solid transparent; 6 | border-left: $U10 solid; 7 | margin: $U7; 8 | &:before{ 9 | position: absolute; 10 | left: 0; 11 | top: -$U10; 12 | width: 0; 13 | height: 0; 14 | border: $U10 solid transparent; 15 | border-left: $U10 solid; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/search.scss: -------------------------------------------------------------------------------- 1 | //*-- Search --*\\ 2 | .icono-search{ 3 | @include square($U22); 4 | border-radius: 50%; 5 | @extend .icono-stroke; 6 | transform: rotate(45deg); 7 | margin: $U4 $U4 $U8 $U8; 8 | &:before{ 9 | width: $U4; 10 | height: $U11; 11 | @extend .stickCenterH; 12 | box-shadow: inset 0 0 0 $U32; 13 | top: $U19; 14 | border-radius: 0 0 $U1 $U1; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/user.less: -------------------------------------------------------------------------------- 1 | //*-- User --*\\ 2 | .icono-user{ 3 | width: @32; 4 | height: @14; 5 | &:extend(.icono-stroke); 6 | border-radius: 2*@32 2*@32 0 0 ~'/' 2*@32; 7 | margin: @18 @1 @2; 8 | &:before{ 9 | .square(@12); 10 | &:extend(.stickCenterH); 11 | top: -1*@20; 12 | &:extend(.icono-stroke); 13 | border-radius: 50%; 14 | } 15 | &:after{ 16 | 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/pin.scss: -------------------------------------------------------------------------------- 1 | //*-- Pin --*\\ 2 | .icono-pin{ 3 | width: $U26; 4 | height: $U26; 5 | @extend .icono-stroke; 6 | border-radius: 50% 50% 50% 0; 7 | transform: rotate(-45deg); 8 | margin: $U1 $U4 $U7; 9 | &:before{ 10 | position: absolute; 11 | width: $U6; 12 | height: $U6; 13 | @extend .icono-stroke; 14 | border-radius: 50%; 15 | @extend .stickCenter; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/pin.less: -------------------------------------------------------------------------------- 1 | //*-- Pin --*\\ 2 | .icono-pin{ 3 | width: @26; 4 | height: @26; 5 | &:extend(.icono-stroke); 6 | border-radius: 50% 50% 50% 0; 7 | transform: rotate(-45deg); 8 | margin: @1 @4 @7; 9 | &:before{ 10 | position: absolute; 11 | width: @6; 12 | height: @6; 13 | &:extend(.icono-stroke); 14 | border-radius: 50%; 15 | &:extend(.stickCenter); 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/eye.scss: -------------------------------------------------------------------------------- 1 | //*-- Eye --*\\ 2 | .icono-eye{ 3 | border-radius: 80% 20%; 4 | transform: rotate(45deg); 5 | @extend .icono-stroke; 6 | border-width: $U2 $U1 $U1 $U2; 7 | height: $U28; 8 | width: $U28; 9 | margin: $U3 $U3; 10 | &:before{ 11 | border-radius: 50%; 12 | box-shadow: 0 -1*$U3 0 $U3 inset; 13 | height: $U11; 14 | width: $U11; 15 | @extend .stickCenter; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/user.scss: -------------------------------------------------------------------------------- 1 | //*-- User --*\\ 2 | .icono-user{ 3 | width: $U32; 4 | height: $U14; 5 | @extend .icono-stroke; 6 | border-radius: 2*$U32 2*$U32 0 0 #{'/'} 2*$U32; 7 | margin: $U18 $U1 $U2; 8 | &:before{ 9 | @include square($U12); 10 | @extend .stickCenterH; 11 | top: -1*$U20; 12 | @extend .icono-stroke; 13 | border-radius: 50%; 14 | } 15 | &:after{ 16 | 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/eye.less: -------------------------------------------------------------------------------- 1 | //*-- Eye --*\\ 2 | .icono-eye{ 3 | border-radius: 80% 20%; 4 | transform: rotate(45deg); 5 | &:extend(.icono-stroke); 6 | border-width: @2 @1 @1 @2; 7 | height: @28; 8 | width: @28; 9 | margin: @3 @3; 10 | &:before{ 11 | border-radius: 50%; 12 | box-shadow: 0px -1*@3 0 @3 inset; 13 | height: @11; 14 | width: @11; 15 | &:extend(.stickCenter); 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/gear.less: -------------------------------------------------------------------------------- 1 | //*-- Gear --*\\ 2 | .icono-gear{ 3 | width: @32; 4 | height: @32; 5 | border: @3 dotted; 6 | border-radius: 50%; 7 | margin: @1; 8 | &:before{ 9 | &:extend(.stickCenter); 10 | width: @22; 11 | height: @22; 12 | box-shadow: 0 0 0 @3, 0 0 0 @2 inset; 13 | border-radius: 50%; 14 | border: @6 solid transparent; 15 | box-sizing: border-box; 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/gear.scss: -------------------------------------------------------------------------------- 1 | //*-- Gear --*\\ 2 | .icono-gear{ 3 | width: $U32; 4 | height: $U32; 5 | border: $U3 dotted; 6 | border-radius: 50%; 7 | margin: $U1; 8 | &:before{ 9 | @extend .stickCenter; 10 | width: $U22; 11 | height: $U22; 12 | box-shadow: 0 0 0 $U3, 0 0 0 $U2 inset; 13 | border-radius: 50%; 14 | border: $U6 solid transparent; 15 | box-sizing: border-box; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/trash.less: -------------------------------------------------------------------------------- 1 | //*-- Trash --*\\ 2 | .icono-trash{ 3 | width: @22; 4 | height: @22; 5 | border-radius: 0 0 @3 @3; 6 | &:extend(.icono-stroke); 7 | border-top: none; 8 | margin: @9 @6 @3; 9 | &:before{ 10 | width: @8; 11 | height: @2; 12 | &:extend(.stickCenterH); 13 | top: -1*@6; 14 | box-shadow: inset 0 0 0 @32, -1*@10 1*@2 0 0, -1*@6 1*@2 0 0, 0 @2 0 0, @6 @2 0 0, @10 @2 0 0; 15 | } 16 | } -------------------------------------------------------------------------------- /examples/pages/components/justify.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /src/components/justify/README.md: -------------------------------------------------------------------------------- 1 | # Justify 2 | 3 | ## Overview 4 | 5 | 文本两端对齐，用于将一串文字两端对齐显示。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## Slots 16 | 17 | | Name | Description | Default | 18 | | ----- | ----- | ----- | 19 | | default | 显示的文本内容 | {{text}} | 20 | 21 | ## Props 22 | 23 | | Property | Type | Description | Default | 24 | | ----- | ----- | ----- | ----- | 25 | | text | String | 显示的文本内容 | "" | -------------------------------------------------------------------------------- /src/scss/icono/generals.scss: -------------------------------------------------------------------------------- 1 | .icono-stroke{ 2 | border: $U2 solid; 3 | } 4 | 5 | .stickCenterV{ 6 | @include stickCenterV; 7 | } 8 | 9 | .stickCenterH{ 10 | @include stickCenterH; 11 | } 12 | 13 | .stickCenter{ 14 | @include stickCenter; 15 | } 16 | 17 | .spin[class*="spin"]{ 18 | animation: loading-spinner 2s infinite linear; 19 | } 20 | @keyframes loading-spinner { 21 | 0% { transform: rotate(0deg); } 22 | 100% { transform: rotate(360deg); } 23 | } 24 | -------------------------------------------------------------------------------- /examples/pages/components/badge.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/scss/icono/icons/trash.scss: -------------------------------------------------------------------------------- 1 | //*-- Trash --*\\ 2 | .icono-trash{ 3 | width: $U22; 4 | height: $U22; 5 | border-radius: 0 0 $U3 $U3; 6 | @extend .icono-stroke; 7 | border-top: none; 8 | margin: $U9 $U6 $U3; 9 | &:before{ 10 | width: $U8; 11 | height: $U2; 12 | @extend .stickCenterH; 13 | top: -1*$U6; 14 | box-shadow: inset 0 0 0 $U32, -1*$U10 1*$U2 0 0, -1*$U6 1*$U2 0 0, 0 $U2 0 0, $U6 $U2 0 0, $U10 $U2 0 0; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/chain.less: -------------------------------------------------------------------------------- 1 | //*-- Chain --*\\ 2 | .icono-chain{ 3 | width: @16; 4 | height: @2; 5 | box-shadow: inset 0 0 0 @32; 6 | transform: rotate(-45deg); 7 | margin: @16 @9; 8 | &:before, &:after{ 9 | .goldenRectL(@12); 10 | &:extend(.stickCenterV); 11 | &:extend(.icono-stroke); 12 | border-radius: @4; 13 | } 14 | &:before{ 15 | right: -1*@10; 16 | } 17 | &:after{ 18 | left: -1*@10; 19 | } 20 | } -------------------------------------------------------------------------------- /src/components/overlay/overlay.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/scss/icono/icons/chain.scss: -------------------------------------------------------------------------------- 1 | //*-- Chain --*\\ 2 | .icono-chain{ 3 | width: $U16; 4 | height: $U2; 5 | box-shadow: inset 0 0 0 $U32; 6 | transform: rotate(-45deg); 7 | margin: $U16 $U9; 8 | &:before, &:after{ 9 | @include goldenRectL($U12); 10 | @extend .stickCenterV; 11 | @extend .icono-stroke; 12 | border-radius: $U4; 13 | } 14 | &:before{ 15 | right: -1*$U10; 16 | } 17 | &:after{ 18 | left: -1*$U10; 19 | } 20 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/headphone.less: -------------------------------------------------------------------------------- 1 | //*-- Headphone --*\\ 2 | .icono-headphone{ 3 | width: @30; 4 | height: @27; 5 | &:extend(.icono-stroke); 6 | border-bottom-color: transparent; 7 | border-radius: @32~'/'@32 @32 @16 @16; 8 | margin: @2 @2 @5; 9 | &:before{ 10 | position: absolute; 11 | width: @4; 12 | height: @12; 13 | left: @1; 14 | bottom: -1*@4; 15 | border-radius: @5; 16 | box-shadow: inset 0 0 0 @32, @20 0 0 0; 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles/util/nowrap.less: -------------------------------------------------------------------------------- 1 | .vmc-nowrap { 2 | max-width: 100%; 3 | overflow: hidden; 4 | white-space: nowrap; 5 | text-overflow: ellipsis; 6 | } 7 | 8 | .vmc-nowrap(5); 9 | 10 | // mixin 11 | .vmc-nowrap(@n, @i: 1) when (@i =< @n) { 12 | .vmc-nowrap-@{i} { 13 | display: -webkit-box; 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | -webkit-box-orient: vertical; 17 | -webkit-line-clamp: @i; 18 | } 19 | 20 | .vmc-nowrap(@n, (@i + 1)); 21 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/asterisk.scss: -------------------------------------------------------------------------------- 1 | //*-- Asterisk --*\\ 2 | .icono-asterisk{ 3 | width: $U4; 4 | height: $U20; 5 | box-shadow: inset 0 0 0 $U32; 6 | border-radius: $U1; 7 | margin: $U7 $U15; 8 | &:before, &:after{ 9 | position: absolute; 10 | @extend .icono-asterisk; 11 | margin: 0; 12 | left: 0; 13 | top: 0; 14 | } 15 | &:before{ 16 | transform: rotate(-58deg); 17 | } 18 | &:after{ 19 | transform: rotate(58deg); 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/headphone.scss: -------------------------------------------------------------------------------- 1 | //*-- Headphone --*\\ 2 | .icono-headphone{ 3 | width: $U30; 4 | height: $U27; 5 | @extend .icono-stroke; 6 | border-bottom-color: transparent; 7 | border-radius: $U32#{'/'}$U32 $U32 $U16 $U16; 8 | margin: $U2 $U2 $U5; 9 | &:before{ 10 | position: absolute; 11 | width: $U4; 12 | height: $U12; 13 | left: $U1; 14 | bottom: -1*$U4; 15 | border-radius: $U5; 16 | box-shadow: inset 0 0 0 $U32, $U20 0 0 0; 17 | } 18 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/infinity.less: -------------------------------------------------------------------------------- 1 | //*-- Infinity --*\\ 2 | .icono-infinity{ 3 | width: @32; 4 | height: @16; 5 | margin: @9 @1; 6 | &:before, &:after{ 7 | width: @10; 8 | height: @10; 9 | position: absolute; 10 | &:extend(.icono-stroke); 11 | transform: rotate(45deg); 12 | } 13 | &:before{ 14 | left: 0; 15 | border-radius: @32 0 @32 @32; 16 | } 17 | &:after{ 18 | right: 1px; 19 | border-radius: @32 @32 @32 0; 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/components/number.scss: -------------------------------------------------------------------------------- 1 | .vmc-number { 2 | display: flex; 3 | height: $NumberHeight; 4 | line-height: $NumberHeight; 5 | 6 | span { 7 | display: block; 8 | text-align: center; 9 | min-width: $NumberWidth; 10 | font-size: 12px; 11 | } 12 | 13 | input { 14 | text-align: center; 15 | } 16 | 17 | label { 18 | width: $NumberWidth; 19 | } 20 | 21 | .vmc-input:before { 22 | border-left: none; 23 | border-right: none; 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/infinity.scss: -------------------------------------------------------------------------------- 1 | //*-- Infinity --*\\ 2 | .icono-infinity{ 3 | width: $U32; 4 | height: $U16; 5 | margin: $U9 $U1; 6 | &:before, &:after{ 7 | width: $U10; 8 | height: $U10; 9 | position: absolute; 10 | @extend .icono-stroke; 11 | transform: rotate(45deg); 12 | } 13 | &:before{ 14 | left: 0; 15 | border-radius: $U32 0 $U32 $U32; 16 | } 17 | &:after{ 18 | right: 1px; 19 | border-radius: $U32 $U32 $U32 0; 20 | } 21 | } -------------------------------------------------------------------------------- /src/styles/components/number.less: -------------------------------------------------------------------------------- 1 | .vmc-number { 2 | display: flex; 3 | height: @NumberHeight; 4 | line-height: @NumberHeight; 5 | 6 | span { 7 | display: block; 8 | text-align: center; 9 | min-width: @NumberWidth; 10 | font-size: 12px; 11 | } 12 | 13 | input { 14 | text-align: center; 15 | } 16 | 17 | label { 18 | width: @NumberWidth; 19 | } 20 | 21 | .vmc-input:before { 22 | border-left: none; 23 | border-right: none; 24 | } 25 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/cart.less: -------------------------------------------------------------------------------- 1 | //*-- Cart --*\\ 2 | .icono-cart{ 3 | width: @22; 4 | height: 0; 5 | border-width: @14 @6 0 @2; 6 | border-style: solid; 7 | border-right-color: transparent; 8 | border-left-color: transparent; 9 | margin: @9 @3 @11 @9; 10 | &:before{ 11 | position: absolute; 12 | width: @4; 13 | height: @4; 14 | border-radius: 50%; 15 | box-shadow: inset 0 0 0 @32,@13 0,-@4 -@20 0 @1; 16 | top: @2; 17 | left: -@3; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/components/spinner/spinner/spinner.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | size: { 4 | type: [Number, String], 5 | coerce: Number 6 | }, 7 | color: { 8 | type: String 9 | } 10 | }, 11 | computed: { 12 | spinnerStyle() { 13 | if (this.size) { 14 | return { 15 | height: this.size + 'px', 16 | width: this.size + 'px' 17 | }; 18 | } 19 | } 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /src/styles/icono/icons/display.less: -------------------------------------------------------------------------------- 1 | //*-- Display --*\\ 2 | .icono-display{ 3 | width: @26; 4 | height: @22; 5 | &:extend(.icono-stroke); 6 | margin: @4 @4 @8; 7 | &:before{ 8 | width: @4; 9 | height: @3; 10 | &:extend(.stickCenterH); 11 | bottom: -1*@5; 12 | box-shadow: inset 0 0 0 @32; 13 | } 14 | &:after{ 15 | width: @14; 16 | height: @2; 17 | &:extend(.stickCenterH); 18 | bottom: -1*@6; 19 | box-shadow: inset 0 0 0 @32; 20 | } 21 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/indent.less: -------------------------------------------------------------------------------- 1 | //*-- Indent --*\\ 2 | .icono-indent{ 3 | width: @20; 4 | height: @16; 5 | border-width: @4 0 @4 @8; 6 | border-style: solid; 7 | border-color: transparent; 8 | box-shadow: 0 -1*@2, 0 @2, inset 0 @2, inset 0 -1*@2; 9 | margin: @9 @7; 10 | &:before{ 11 | &:extend(.stickCenterV); 12 | left: -1*@8; 13 | border: @5 solid; 14 | border-top-color: transparent; 15 | border-bottom-color: transparent; 16 | border-right-width: 0; 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/display.scss: -------------------------------------------------------------------------------- 1 | //*-- Display --*\\ 2 | .icono-display{ 3 | width: $U26; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | margin: $U4 $U4 $U8; 7 | &:before{ 8 | width: $U4; 9 | height: $U3; 10 | @extend .stickCenterH; 11 | bottom: -1*$U5; 12 | box-shadow: inset 0 0 0 $U32; 13 | } 14 | &:after{ 15 | width: $U14; 16 | height: $U2; 17 | @extend .stickCenterH; 18 | bottom: -1*$U6; 19 | box-shadow: inset 0 0 0 $U32; 20 | } 21 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/asterisk.less: -------------------------------------------------------------------------------- 1 | //*-- Asterisk --*\\ 2 | .icono-asterisk{ 3 | &, &:before, &:after{ 4 | width: @4; 5 | height: @20; 6 | box-shadow: inset 0 0 0 @32; 7 | border-radius: @1; 8 | margin: @7 @15; 9 | } 10 | &:before, &:after{ 11 | position: absolute; 12 | margin: 0; 13 | left: 0; 14 | top: 0; 15 | } 16 | &:before{ 17 | transform: rotate(-58deg); 18 | } 19 | &:after{ 20 | transform: rotate(58deg); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/styles/icono/icons/file.less: -------------------------------------------------------------------------------- 1 | //*-- File --*\\ 2 | .icono-file{ 3 | width: @26; 4 | height: @32; 5 | &:extend(.icono-stroke); 6 | border-radius: 0 @12 0 0; 7 | margin: @1 @4; 8 | &:before{ 9 | position:absolute; 10 | top: -1*@2; 11 | right:-1*@2; 12 | border-style: solid; 13 | width: 0; 14 | height: 0; 15 | border-width: @5; 16 | border-top-color: transparent; 17 | border-right-color: transparent; 18 | } 19 | &:after{ 20 | 21 | } 22 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/sitemap.less: -------------------------------------------------------------------------------- 1 | //* Sitemap *\\ 2 | .icono-sitemap { 3 | width: @24; 4 | height: @2; 5 | box-shadow: 0 -@5; 6 | margin: @21 @5 @11; 7 | &:before { 8 | &:extend(.stickCenterH); 9 | width: @6; 10 | height: @6; 11 | border-radius: @2; 12 | box-shadow: inset 0 0 0 @32, @11 0, -@11 0, 0 -@14 0 @1; 13 | } 14 | &:after { 15 | &:extend(.stickCenterH); 16 | width: @2; 17 | height: @10; 18 | box-shadow: 0 -@7, @11 -@5, -@11 -@5; 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/file.scss: -------------------------------------------------------------------------------- 1 | //*-- File --*\\ 2 | .icono-file{ 3 | width: $U26; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-radius: 0 $U12 0 0; 7 | margin: $U1 $U4; 8 | &:before{ 9 | position:absolute; 10 | top: -1*$U2; 11 | right:-1*$U2; 12 | border-style: solid; 13 | width: 0; 14 | height: 0; 15 | border-width: $U5; 16 | border-top-color: transparent; 17 | border-right-color: transparent; 18 | } 19 | &:after{ 20 | 21 | } 22 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/indent.scss: -------------------------------------------------------------------------------- 1 | //*-- Indent --*\\ 2 | .icono-indent{ 3 | width: $U20; 4 | height: $U16; 5 | border-width: $U4 0 $U4 $U8; 6 | border-style: solid; 7 | border-color: transparent; 8 | box-shadow: 0 -1*$U2, 0 $U2, inset 0 $U2, inset 0 -1*$U2; 9 | margin: $U9 $U7; 10 | &:before{ 11 | @extend .stickCenterV; 12 | left: -1*$U8; 13 | border: $U5 solid; 14 | border-top-color: transparent; 15 | border-bottom-color: transparent; 16 | border-right-width: 0; 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/cart.scss: -------------------------------------------------------------------------------- 1 | //*-- Cart --*\\ 2 | .icono-cart{ 3 | width: $U22; 4 | height: 0; 5 | border-width: $U14 $U6 0 $U2; 6 | border-style: solid; 7 | border-right-color: transparent; 8 | border-left-color: transparent; 9 | margin: $U9 $U3 $U11 $U9; 10 | &:before{ 11 | position: absolute; 12 | width: $U4; 13 | height: $U4; 14 | border-radius: 50%; 15 | box-shadow: inset 0 0 0 $U32, $U13 0, -1*$U4 -1*$U20 0 $U1; 16 | top: $U2; 17 | left: -$U3; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/styles/icono/icons/rss.less: -------------------------------------------------------------------------------- 1 | //*-- RSS --*\\ 2 | .icono-rss{ 3 | .square(@22); 4 | overflow: hidden; 5 | margin: @6; 6 | &:before, &:after{ 7 | position: absolute; 8 | border-radius: 50%; 9 | } 10 | &:before{ 11 | .square(@6); 12 | box-shadow: 0 0 @32 inset; 13 | left: 0; 14 | bottom: 0; 15 | } 16 | &:after{ 17 | .square(@27); 18 | right: 15%; 19 | top: 15%; 20 | border: @4 solid transparent; 21 | box-shadow: inset 0 0 0 @2, 0 0 0 @2; 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/sitemap.scss: -------------------------------------------------------------------------------- 1 | //* Sitemap *\\ 2 | .icono-sitemap { 3 | width: $U24; 4 | height: $U2; 5 | box-shadow: 0 -1*$U5; 6 | margin: $U21 $U5 $U11; 7 | &:before { 8 | @extend .stickCenterH; 9 | width: $U6; 10 | height: $U6; 11 | border-radius: $U2; 12 | box-shadow: inset 0 0 0 $U32, $U11 0, -1*$U11 0, 0 -1*$U14 0 $U1; 13 | } 14 | &:after { 15 | @extend .stickCenterH; 16 | width: $U2; 17 | height: $U10; 18 | box-shadow: 0 -1*$U7, $U11 -1*$U5, -1*$U11 -1*$U5; 19 | } 20 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/creditCard.less: -------------------------------------------------------------------------------- 1 | //*-- Credit Card --*\\ 2 | .icono-creditCard{ 3 | width: @32; 4 | height: @24; 5 | &:extend(.icono-stroke); 6 | border-radius: @3; 7 | margin: @5 @1; 8 | &:before{ 9 | position: absolute; 10 | top: @4; 11 | width: 100%; 12 | height: @6; 13 | box-shadow: inset 0 0 0 @32; 14 | } 15 | &:after{ 16 | left: @3; 17 | bottom: @3; 18 | position: absolute; 19 | width: @4; 20 | height: @2; 21 | box-shadow: inset 0 0 0 @32, @6 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/signin.less: -------------------------------------------------------------------------------- 1 | //*-- Sign in --*\\ 2 | .icono-signIn{ 3 | width: @18; 4 | height: @32; 5 | &:extend(.icono-stroke); 6 | border-left: none; 7 | margin-left: @5; 8 | border-radius: 0 @3 @3 0; 9 | margin: @1 @8; 10 | &:before{ 11 | position: absolute; 12 | width: @11; 13 | height: @11; 14 | left:-1*@10; 15 | top:@7; 16 | &:extend(.icono-stroke); 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 @4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /src/scss/components/row.scss: -------------------------------------------------------------------------------- 1 | .vmc-row { 2 | padding: 0 $RowHorizontalPadding; 3 | background: $RowBackColor; 4 | min-height: $RowMinHeight; 5 | font-size: $RowTextSize; 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | 10 | &.left { 11 | justify-content: flex-start; 12 | 13 | > div { 14 | flex: 1; 15 | } 16 | } 17 | 18 | &:first-child:before { 19 | border: none; 20 | } 21 | 22 | label { 23 | display: block; 24 | min-width: $RowTitleWidth; 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/creditCard.scss: -------------------------------------------------------------------------------- 1 | //*-- Credit Card --*\\ 2 | .icono-creditCard{ 3 | width: $U32; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | border-radius: $U3; 7 | margin: $U5 $U1; 8 | &:before{ 9 | position: absolute; 10 | top: $U4; 11 | width: 100%; 12 | height: $U6; 13 | box-shadow: inset 0 0 0 $U32; 14 | } 15 | &:after{ 16 | left: $U3; 17 | bottom: $U3; 18 | position: absolute; 19 | width: $U4; 20 | height: $U2; 21 | box-shadow: inset 0 0 0 $U32, $U6 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/rss.scss: -------------------------------------------------------------------------------- 1 | //*-- RSS --*\\ 2 | .icono-rss{ 3 | @include square($U22); 4 | overflow: hidden; 5 | margin: $U6; 6 | &:before, &:after{ 7 | position: absolute; 8 | border-radius: 50%; 9 | } 10 | &:before{ 11 | @include square($U6); 12 | box-shadow: 0 0 $U32 inset; 13 | left: 0; 14 | bottom: 0; 15 | } 16 | &:after{ 17 | @include square($U27); 18 | right: 15%; 19 | top: 15%; 20 | border: $U4 solid transparent; 21 | box-shadow: inset 0 0 0 $U2, 0 0 0 $U2; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/components/row.less: -------------------------------------------------------------------------------- 1 | .vmc-row { 2 | padding: 0 @RowHorizontalPadding; 3 | background: @RowBackColor; 4 | min-height: @RowMinHeight; 5 | font-size: @RowTextSize; 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | 10 | &.left { 11 | justify-content: flex-start; 12 | 13 | > div { 14 | flex: 1; 15 | } 16 | } 17 | 18 | &:first-child:before { 19 | border: none; 20 | } 21 | 22 | label { 23 | display: block; 24 | min-width: @RowTitleWidth; 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/piano.less: -------------------------------------------------------------------------------- 1 | //*-- piano --*\\ 2 | .icono-piano{ 3 | width: @28; 4 | height: @22; 5 | &:extend(.icono-stroke); 6 | margin: @6 @3; 7 | &:before{ 8 | position: absolute; 9 | left: @4; 10 | top: 0; 11 | width: @1; 12 | height: 100%; 13 | box-shadow: inset 0 0 0 @32, @5 0, @10 0, @15 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: @3; 18 | height: @12; 19 | left: @3; 20 | top: 0; 21 | box-shadow: inset 0 0 0 @32, @5 0, @10 0, @15 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/share.less: -------------------------------------------------------------------------------- 1 | //*-- Share --*\\ 2 | .icono-share{ 3 | height: @9; 4 | width: @9; 5 | border-radius: 50%; 6 | box-shadow: inset 0 0 0 @32, @22 -1*@11 0 0, @22 1*@11 0 0; 7 | margin: @12 @24 @13 @1; 8 | &:before, &:after{ 9 | position: absolute; 10 | width: @24; 11 | height: @2; 12 | box-shadow: inset 0 0 0 @32; 13 | left: 0; 14 | } 15 | &:before{ 16 | top:-1*@2; 17 | transform: rotate(-25deg); 18 | } 19 | &:after{ 20 | top:@9; 21 | transform: rotate(25deg); 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/signin.scss: -------------------------------------------------------------------------------- 1 | //*-- Sign in --*\\ 2 | .icono-signIn{ 3 | width: $U18; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-left: none; 7 | margin-left: $U5; 8 | border-radius: 0 $U3 $U3 0; 9 | margin: $U1 $U8; 10 | &:before{ 11 | position: absolute; 12 | width: $U11; 13 | height: $U11; 14 | left:-1*$U10; 15 | top:$U7; 16 | @extend .icono-stroke; 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 $U4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/plus.less: -------------------------------------------------------------------------------- 1 | //*-- Plus --*\\ 2 | [class*="icono-plus"], [class*="icono-cross"]{ 3 | width: @30; 4 | height: @30; 5 | margin: @2; 6 | &:before, &:after{ 7 | &:extend(.stickCenter); 8 | box-shadow: inset 0 0 0 @32; 9 | } 10 | &:before{ 11 | width: @20; 12 | height: @2; 13 | } 14 | &:after{ 15 | height: @20; 16 | width: @2; 17 | } 18 | &[class*="Circle"]{ 19 | &:before{ 20 | width: @18; 21 | } 22 | &:after{ 23 | height: @18; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/signout.less: -------------------------------------------------------------------------------- 1 | //*-- Sign out --*\\ 2 | .icono-signOut{ 3 | width: @18; 4 | height: @32; 5 | &:extend(.icono-stroke); 6 | border-right: none; 7 | margin-right: @5; 8 | border-radius: @3 0 0 @3; 9 | margin: @1 @8; 10 | &:before{ 11 | position: absolute; 12 | width: @11; 13 | height: @11; 14 | right:-1*@2; 15 | top:@7; 16 | &:extend(.icono-stroke); 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 @4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /src/scss/components/alert.scss: -------------------------------------------------------------------------------- 1 | .vmc-alert { 2 | &.no-content { 3 | .dialog-head { 4 | display: flex; 5 | align-items: center; 6 | min-height: $AlertTitleHeight; 7 | padding-bottom: $AlertTitlePadding; 8 | 9 | div { 10 | flex: 1; 11 | text-align: center; 12 | } 13 | 14 | p { 15 | display: inline-block; 16 | text-align: left; 17 | } 18 | } 19 | 20 | .dialog-body { 21 | display: none; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/components/popup-picker.scss: -------------------------------------------------------------------------------- 1 | .vmc-popup-picker{ 2 | .header{ 3 | background-color: $PopupPickerHeaderBackColor; 4 | height: $PopupPickerHeaderHeight; 5 | line-height: $PopupPickerHeaderHeight; 6 | overflow: hidden; 7 | text-align: center; 8 | font-size: $PopupPickerHeaderTextSize; 9 | display: flex; 10 | 11 | .left, .right{ 12 | padding: 0 $PopupPickerHeaderButtonPadding; 13 | color: $PopupPickerHeaderButtonTextColor; 14 | } 15 | .title{ 16 | flex: 1; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/signout.scss: -------------------------------------------------------------------------------- 1 | //*-- Sign out --*\\ 2 | .icono-signOut{ 3 | width: $U18; 4 | height: $U32; 5 | @extend .icono-stroke; 6 | border-right: none; 7 | margin-right: $U5; 8 | border-radius: $U3 0 0 $U3; 9 | margin: $U1 $U8; 10 | &:before{ 11 | position: absolute; 12 | width: $U11; 13 | height: $U11; 14 | right:-1*$U2; 15 | top:$U7; 16 | @extend .icono-stroke; 17 | border-bottom: none; 18 | border-left: none; 19 | transform: rotate(45deg); 20 | border-radius: 0 $U4 0 0; 21 | } 22 | } -------------------------------------------------------------------------------- /src/styles/components/popup-picker.less: -------------------------------------------------------------------------------- 1 | .vmc-popup-picker{ 2 | .header{ 3 | background-color: @PopupPickerHeaderBackColor; 4 | height: @PopupPickerHeaderHeight; 5 | line-height: @PopupPickerHeaderHeight; 6 | overflow: hidden; 7 | text-align: center; 8 | font-size: @PopupPickerHeaderTextSize; 9 | display: flex; 10 | 11 | .left, .right{ 12 | padding: 0 @PopupPickerHeaderButtonPadding; 13 | color: @PopupPickerHeaderButtonTextColor; 14 | } 15 | .title{ 16 | flex: 1; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/piano.scss: -------------------------------------------------------------------------------- 1 | //*-- piano --*\\ 2 | .icono-piano{ 3 | width: $U28; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | margin: $U6 $U3; 7 | &:before{ 8 | position: absolute; 9 | left: $U4; 10 | top: 0; 11 | width: $U1; 12 | height: 100%; 13 | box-shadow: inset 0 0 0 $U32, $U5 0, $U10 0, $U15 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: $U3; 18 | height: $U12; 19 | left: $U3; 20 | top: 0; 21 | box-shadow: inset 0 0 0 $U32, $U5 0, $U10 0, $U15 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/plus.scss: -------------------------------------------------------------------------------- 1 | //*-- Plus --*\\ 2 | [class*="icono-plus"], [class*="icono-cross"]{ 3 | width: $U30; 4 | height: $U30; 5 | margin: $U2; 6 | &:before, &:after{ 7 | @extend .stickCenter; 8 | box-shadow: inset 0 0 0 $U32; 9 | } 10 | &:before{ 11 | width: $U20; 12 | height: $U2; 13 | } 14 | &:after{ 15 | height: $U20; 16 | width: $U2; 17 | } 18 | &[class*="Circle"]{ 19 | &:before{ 20 | width: $U18; 21 | } 22 | &:after{ 23 | height: $U18; 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/share.scss: -------------------------------------------------------------------------------- 1 | //*-- Share --*\\ 2 | .icono-share{ 3 | height: $U9; 4 | width: $U9; 5 | border-radius: 50%; 6 | box-shadow: inset 0 0 0 $U32, $U22 -1*$U11 0 0, $U22 $U11 0 0; 7 | margin: $U12 $U24 $U13 $U1; 8 | &:before, &:after{ 9 | position: absolute; 10 | width: $U24; 11 | height: $U2; 12 | box-shadow: inset 0 0 0 $U32; 13 | left: 0; 14 | } 15 | &:before{ 16 | top:-1*$U2; 17 | transform: rotate(-25deg); 18 | } 19 | &:after{ 20 | top:$U9; 21 | transform: rotate(25deg); 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/components/alert.less: -------------------------------------------------------------------------------- 1 | .vmc-alert { 2 | &.no-content { 3 | .dialog-head { 4 | display: flex; 5 | align-items: center; 6 | min-height: @AlertTitleHeight; 7 | padding-bottom: @AlertTitlePadding; 8 | 9 | div { 10 | flex: 1; 11 | text-align: center; 12 | } 13 | 14 | p { 15 | display: inline-block; 16 | text-align: left; 17 | } 18 | } 19 | 20 | .dialog-body { 21 | display: none; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/components/confirm.scss: -------------------------------------------------------------------------------- 1 | .vmc-confirm { 2 | &.no-content { 3 | .dialog-head { 4 | display: flex; 5 | align-items: center; 6 | min-height: $ConfirmTitleHeight; 7 | padding-bottom: $ConfirmTitlePadding; 8 | 9 | div { 10 | flex: 1; 11 | text-align: center; 12 | } 13 | 14 | p { 15 | display: inline-block; 16 | text-align: left; 17 | } 18 | } 19 | 20 | .dialog-body { 21 | display: none; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/styles/components/confirm.less: -------------------------------------------------------------------------------- 1 | .vmc-confirm { 2 | &.no-content { 3 | .dialog-head { 4 | display: flex; 5 | align-items: center; 6 | min-height: @ConfirmTitleHeight; 7 | padding-bottom: @ConfirmTitlePadding; 8 | 9 | div { 10 | flex: 1; 11 | text-align: center; 12 | } 13 | 14 | p { 15 | display: inline-block; 16 | text-align: left; 17 | } 18 | } 19 | 20 | .dialog-body { 21 | display: none; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/keyboard.less: -------------------------------------------------------------------------------- 1 | //*-- Keyboard --*\\ 2 | .icono-keyboard{ 3 | width: @32; 4 | height: @22; 5 | border-radius: @3; 6 | &:extend(.icono-stroke); 7 | margin: @6 @1; 8 | &:before{ 9 | .square(@2); 10 | &:extend(.stickCenter); 11 | box-shadow: -1*@2 -1*@4 0, -1*@6 -1*@4 0, -1*@10 -1*@4 0, @2 -1*@4 0, @6 -1*@4 0, @8 -1*@4 0, @10 -1*@4 0, 12 | -1*@4 0 0, -1*@8 0 0, -1*@10 0 0, inset 0 0 0 @32, @4 0 0, @8 0 0, @10 0 0, 13 | @4 @4 0, @2 @4 0, 0 @4 0, -1*@2 @4 0, -1*@6 @4 0, -1*@10 @4 0, @6 @4 0, @10 @4 0; 14 | } 15 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/rename.less: -------------------------------------------------------------------------------- 1 | //*-- Rename --*\\ 2 | .icono-rename{ 3 | width: @26; 4 | height: @10; 5 | &:extend(.icono-stroke); 6 | border-color: transparent; 7 | border-width: @3; 8 | box-shadow: 0 0 0 @1, @11 0 0 0 inset; 9 | margin: @12 @4; 10 | &:before{ 11 | width: @1; 12 | height: @18; 13 | &:extend(.stickCenterV); 14 | left: @9; 15 | border-width: @2 @4; 16 | border-style: solid; 17 | border-right-color: transparent; 18 | border-left-color: transparent; 19 | box-shadow: 0 0 0 @1 inset; 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/rename.scss: -------------------------------------------------------------------------------- 1 | //*-- Rename --*\\ 2 | .icono-rename{ 3 | width: $U26; 4 | height: $U10; 5 | @extend .icono-stroke; 6 | border-color: transparent; 7 | border-width: $U3; 8 | box-shadow: 0 0 0 $U1, $U11 0 0 0 inset; 9 | margin: $U12 $U4; 10 | &:before{ 11 | width: $U1; 12 | height: $U18; 13 | @extend .stickCenterV; 14 | left: $U9; 15 | border-width: $U2 $U4; 16 | border-style: solid; 17 | border-right-color: transparent; 18 | border-left-color: transparent; 19 | box-shadow: 0 0 0 $U1 inset; 20 | } 21 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/bluetooth.less: -------------------------------------------------------------------------------- 1 | //*-- Bluetooth --*\\ 2 | .icono-bluetooth{ 3 | width: @3; 4 | height: @26; 5 | box-shadow: inset 0 0 0 @32; 6 | margin: @4 @15 @4 @16; 7 | &:before, &:after{ 8 | position: absolute; 9 | width: @18; 10 | height: @8; 11 | border-width: @3 @3 @3 0; 12 | border-style: solid; 13 | border-top-color: transparent; 14 | top: @2; 15 | left: -@13; 16 | transform: rotate(-45deg); 17 | } 18 | &:after{ 19 | top: @9; 20 | transform: rotate(45deg) rotateX(180deg); 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/styles/icono/icons/clock.less: -------------------------------------------------------------------------------- 1 | //*-- Clock --*\\ 2 | .icono-clock{ 3 | width: @26; 4 | height: @26; 5 | border-radius: 50%; 6 | &:extend(.icono-stroke); 7 | margin: @4; 8 | &:before, &:after{ 9 | &:extend(.stickCenter); 10 | top: 35%; 11 | box-shadow: inset 0 0 0 @32; 12 | border-radius: @2; 13 | } 14 | &:before{ 15 | width: @2; 16 | height: @9; 17 | } 18 | &:after{ 19 | width: @6; 20 | height: @2; 21 | transform-origin: left center; 22 | transform: rotate(45deg) translate(@1, @2); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/icono/icons/ruler.less: -------------------------------------------------------------------------------- 1 | //*-- Ruler --*\\ 2 | .icono-ruler{ 3 | width: @27; 4 | height: @12; 5 | &:extend(.icono-stroke); 6 | margin: @11 @4 @11 @3; 7 | &:before{ 8 | position: absolute; 9 | width: @1; 10 | height: @4; 11 | box-shadow: inset 0 0 0 @32, @6 0, @12 0; 12 | left: @5; 13 | top: 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: @1; 18 | height: @2; 19 | box-shadow: inset 0 0 0 @32, @2 0, @6 0, @8 0, @12 0, @14 0, @18 0, @20 0; 20 | left: @1; 21 | top: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/clock.scss: -------------------------------------------------------------------------------- 1 | //*-- Clock --*\\ 2 | .icono-clock{ 3 | width: $U26; 4 | height: $U26; 5 | border-radius: 50%; 6 | @extend .icono-stroke; 7 | margin: $U4; 8 | &:before, &:after{ 9 | @extend .stickCenter; 10 | top: 35%; 11 | box-shadow: inset 0 0 0 $U32; 12 | border-radius: $U2; 13 | } 14 | &:before{ 15 | width: $U2; 16 | height: $U9; 17 | } 18 | &:after{ 19 | width: $U6; 20 | height: $U2; 21 | transform-origin: left center; 22 | transform: rotate(45deg) translate($U1, $U2); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/submit/README.md: -------------------------------------------------------------------------------- 1 | # Submit 2 | 3 | ## Overview 4 | 5 | 提交按钮，继承自[按钮](../button)组件。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```html 12 | 保存 13 | 不可点击的提交按钮 14 | ``` 15 | 16 | ```javascript 17 | export default { 18 | methods: { 19 | onSubmit() { 20 | this.$Toast('正在提交数据...'); 21 | setTimeout(() => { 22 | this.$refs.submit.done(); 23 | }, 5000); 24 | } 25 | } 26 | } 27 | ``` 28 | ## Methods 29 | 30 | ### done 31 | 32 | 提交结束时必需手动执行此方法。 -------------------------------------------------------------------------------- /src/scss/components/progressbar.scss: -------------------------------------------------------------------------------- 1 | .vmc-progressbar { 2 | .bar-outer { 3 | position: relative; 4 | width: 100%; 5 | height: $ProgressbarHeight; 6 | border-radius: 100px; 7 | background: $ProgressbarBackColor; 8 | 9 | .bar-inner { 10 | position: absolute; 11 | left: -1px; 12 | right: -1px; 13 | top: 0; 14 | bottom: 0; 15 | 16 | div { 17 | height: 100%; 18 | border-radius: 100px; 19 | background: $ProgressbarColor; 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/camera.less: -------------------------------------------------------------------------------- 1 | //*-- camera --*\\ 2 | .icono-camera{ 3 | width: @32; 4 | height: @24; 5 | border-radius: @4; 6 | &:extend(.icono-stroke); 7 | margin: @5 @1; 8 | &:before{ 9 | &:extend(.stickCenter); 10 | width: @10; 11 | height: @10; 12 | border: @1 solid transparent; 13 | box-shadow: inset 0 0 0 @1, 0 0 0 @2; 14 | border-radius: 50%; 15 | } 16 | &:after{ 17 | position: absolute; 18 | width: @4; 19 | height: @2; 20 | right: @2; 21 | top: @2; 22 | box-shadow: inset 0 0 0 @32; 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/bluetooth.scss: -------------------------------------------------------------------------------- 1 | //*-- Bluetooth --*\\ 2 | .icono-bluetooth{ 3 | width: $U3; 4 | height: $U26; 5 | box-shadow: inset 0 0 0 $U32; 6 | margin: $U4 $U15 $U4 $U16; 7 | &:before, &:after{ 8 | position: absolute; 9 | width: $U18; 10 | height: $U8; 11 | border-width: $U3 $U3 $U3 0; 12 | border-style: solid; 13 | border-top-color: transparent; 14 | top: $U2; 15 | left: -$U13; 16 | transform: rotate(-45deg); 17 | } 18 | &:after{ 19 | top: $U10; 20 | transform: rotate(45deg) rotateX(180deg); 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/styles/components/progressbar.less: -------------------------------------------------------------------------------- 1 | .vmc-progressbar { 2 | .bar-outer { 3 | position: relative; 4 | width: 100%; 5 | height: @ProgressbarHeight; 6 | border-radius: 100px; 7 | background: @ProgressbarBackColor; 8 | 9 | .bar-inner { 10 | position: absolute; 11 | left: -1px; 12 | right: -1px; 13 | top: 0; 14 | bottom: 0; 15 | 16 | div { 17 | height: 100%; 18 | border-radius: 100px; 19 | background: @ProgressbarColor; 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/camera.scss: -------------------------------------------------------------------------------- 1 | //*-- camera --*\\ 2 | .icono-camera{ 3 | width: $U32; 4 | height: $U24; 5 | border-radius: $U4; 6 | @extend .icono-stroke; 7 | margin: $U5 $U1; 8 | &:before{ 9 | @extend .stickCenter; 10 | width: $U10; 11 | height: $U10; 12 | border: $U1 solid transparent; 13 | box-shadow: inset 0 0 0 $U1, 0 0 0 $U2; 14 | border-radius: 50%; 15 | } 16 | &:after{ 17 | position: absolute; 18 | width: $U4; 19 | height: $U2; 20 | right: $U2; 21 | top: $U2; 22 | box-shadow: inset 0 0 0 $U32; 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/ruler.scss: -------------------------------------------------------------------------------- 1 | //*-- Ruler --*\\ 2 | .icono-ruler{ 3 | width: $U27; 4 | height: $U12; 5 | @extend .icono-stroke; 6 | margin: $U11 $U4 $U11 $U3; 7 | &:before{ 8 | position: absolute; 9 | width: $U1; 10 | height: $U4; 11 | box-shadow: inset 0 0 0 $U32, $U6 0, $U12 0; 12 | left: $U5; 13 | top: 0; 14 | } 15 | &:after{ 16 | position: absolute; 17 | width: $U1; 18 | height: $U2; 19 | box-shadow: inset 0 0 0 $U32, $U2 0, $U6 0, $U8 0, $U12 0, $U14 0, $U18 0, $U20 0; 20 | left: $U1; 21 | top: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/sliders.less: -------------------------------------------------------------------------------- 1 | //*-- Sliders --*\\ 2 | .icono-sliders{ 3 | height: @30; 4 | width: @30; 5 | margin: @2; 6 | &:before, &:after{ 7 | transform: translateX(-50%); 8 | left: 50%; 9 | position: absolute; 10 | } 11 | &:before{ 12 | width: @8; 13 | height: @7; 14 | border-radius: @2; 15 | top: 67%; 16 | box-shadow: inset 0 0 0 @32, @10 -1*@10, -1*@10 -1*@14; 17 | } 18 | &:after{ 19 | position: absolute; 20 | width: @2; 21 | height:100%; 22 | box-shadow: inset 0 0 0 @32, @10 0, -1*@10 0; 23 | } 24 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/cup.less: -------------------------------------------------------------------------------- 1 | //*-- Cup --*\\ 2 | .icono-cup{ 3 | width: @22; 4 | height: @16; 5 | box-shadow: inset 0 0 0 @32; 6 | border-radius: 0 0 @5 @5; 7 | margin: @6 @6 @12; 8 | &:before{ 9 | position: absolute; 10 | right: -1*@3; 11 | top: @4; 12 | width: @5; 13 | height: @5; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 @2; 16 | } 17 | &:after{ 18 | &:extend(.stickCenterH); 19 | bottom: -1*@5; 20 | width: @26; 21 | height: @3; 22 | border-radius: 0 0 @3 @3; 23 | box-shadow: inset 0 0 0 @32; 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/sliders.scss: -------------------------------------------------------------------------------- 1 | //*-- Sliders --*\\ 2 | .icono-sliders{ 3 | height: $U30; 4 | width: $U30; 5 | margin: $U2; 6 | &:before, &:after{ 7 | transform: translateX(-50%); 8 | left: 50%; 9 | position: absolute; 10 | } 11 | &:before{ 12 | width: $U8; 13 | height: $U7; 14 | border-radius: $U2; 15 | top: 67%; 16 | box-shadow: inset 0 0 0 $U32, $U10 -1*$U10, -1*$U10 -1*$U14; 17 | } 18 | &:after{ 19 | position: absolute; 20 | width: $U2; 21 | height:100%; 22 | box-shadow: inset 0 0 0 $U32, $U10 0, -1*$U10 0; 23 | } 24 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/reset.less: -------------------------------------------------------------------------------- 1 | //*-- Reset --*\\ 2 | .icono-reset{ 3 | width: @26; 4 | height: @26; 5 | border-radius: 50%; 6 | border-width: @2; 7 | border-style: solid; 8 | border-left-color: transparent; 9 | margin: @4; 10 | &:before{ 11 | position: absolute; 12 | width: 0; 13 | height: 0; 14 | left: -1*@7; 15 | bottom: 0; 16 | border-width: @6; 17 | border-style: solid; 18 | border-right-color: transparent; 19 | border-left-color: transparent; 20 | border-bottom-color: transparent; 21 | transform: rotate(135deg); 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/reset.scss: -------------------------------------------------------------------------------- 1 | //*-- Reset --*\\ 2 | .icono-reset{ 3 | width: $U26; 4 | height: $U26; 5 | border-radius: 50%; 6 | border-width: $U2; 7 | border-style: solid; 8 | border-left-color: transparent; 9 | margin: $U4; 10 | &:before{ 11 | position: absolute; 12 | width: 0; 13 | height: 0; 14 | left: -1*$U7; 15 | bottom: 0; 16 | border-width: $U6; 17 | border-style: solid; 18 | border-right-color: transparent; 19 | border-left-color: transparent; 20 | border-bottom-color: transparent; 21 | transform: rotate(135deg); 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/flag.less: -------------------------------------------------------------------------------- 1 | //*-- Flag --*\\ 2 | .icono-flag{ 3 | width: @22; 4 | height: @25; 5 | border-left: @3 solid; 6 | margin: @5 @6 @4; 7 | &:before, &:after{ 8 | position:absolute; 9 | width: @9; 10 | height: @8; 11 | &:extend(.icono-stroke); 12 | } 13 | &:before{ 14 | left: -1*@2; 15 | top: 1px; 16 | border-radius: 0 2px 0 0; 17 | border-right-width: @2 + 1; 18 | } 19 | &:after{ 20 | width: @5; 21 | left: @9; 22 | top: @4; 23 | border-left-width: @2 + 1; 24 | border-radius: 2px 2px 0 2px; 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/terminal.less: -------------------------------------------------------------------------------- 1 | //*-- Terminal --*\\ 2 | .icono-terminal{ 3 | width: @28; 4 | height: @24; 5 | &:extend(.icono-stroke); 6 | margin: @5 @3; 7 | &:before{ 8 | width: @5; 9 | height: @5; 10 | position: absolute; 11 | top: 50%; 12 | transform: translateY(-50%) rotate(45deg); 13 | left: @3; 14 | border-width: @2 @2 0 0; 15 | border-style: solid; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: @5; 20 | height: 0; 21 | border-bottom: @2 solid; 22 | right: @6; 23 | bottom: @4; 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/cup.scss: -------------------------------------------------------------------------------- 1 | //*-- Cup --*\\ 2 | .icono-cup{ 3 | width: $U22; 4 | height: $U16; 5 | box-shadow: inset 0 0 0 $U32; 6 | border-radius: 0 0 $U5 $U5; 7 | margin: $U6 $U6 $U12; 8 | &:before{ 9 | position: absolute; 10 | right: -1*$U3; 11 | top: $U4; 12 | width: $U5; 13 | height: $U5; 14 | border-radius: 50%; 15 | box-shadow: 0 0 0 $U2; 16 | } 17 | &:after{ 18 | @extend .stickCenterH; 19 | bottom: -1*$U5; 20 | width: $U26; 21 | height: $U3; 22 | border-radius: 0 0 $U3 $U3; 23 | box-shadow: inset 0 0 0 $U32; 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/keyboard.scss: -------------------------------------------------------------------------------- 1 | //*-- Keyboard --*\\ 2 | .icono-keyboard{ 3 | width: $U32; 4 | height: $U22; 5 | border-radius: $U3; 6 | @extend .icono-stroke; 7 | margin: $U6 $U1; 8 | &:before{ 9 | @include square($U2); 10 | @extend .stickCenter; 11 | box-shadow: -1*$U2 -1*$U4 0, -1*$U6 -1*$U4 0, -1*$U10 -1*$U4 0, $U2 -1*$U4 0, $U6 -1*$U4 0, $U8 -1*$U4 0, $U10 -1*$U4 0, 12 | -1*$U4 0 0, -1*$U8 0 0, -1*$U10 0 0, inset 0 0 0 $U32, $U4 0 0, $U8 0 0, $U10 0 0, 13 | $U4 $U4 0, $U2 $U4 0, 0 $U4 0, -1*$U2 $U4 0, -1*$U6 $U4 0, -1*$U10 $U4 0, $U6 $U4 0, $U10 $U4 0; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/flag.scss: -------------------------------------------------------------------------------- 1 | //*-- Flag --*\\ 2 | .icono-flag{ 3 | width: $U22; 4 | height: $U25; 5 | border-left: $U3 solid; 6 | margin: $U5 $U6 $U4; 7 | &:before, &:after{ 8 | position:absolute; 9 | width: $U9; 10 | height: $U8; 11 | @extend .icono-stroke; 12 | } 13 | &:before{ 14 | left: -1*$U2; 15 | top: 1px; 16 | border-radius: 0 2px 0 0; 17 | border-right-width: $U2 + 1; 18 | } 19 | &:after{ 20 | width: $U5; 21 | left: $U9; 22 | top: $U4; 23 | border-left-width: $U2 + 1; 24 | border-radius: 2px 2px 0 2px; 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/terminal.scss: -------------------------------------------------------------------------------- 1 | //*-- Terminal --*\\ 2 | .icono-terminal{ 3 | width: $U28; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | margin: $U5 $U3; 7 | &:before{ 8 | width: $U5; 9 | height: $U5; 10 | position: absolute; 11 | top: 50%; 12 | transform: translateY(-50%) rotate(45deg); 13 | left: $U3; 14 | border-width: $U2 $U2 0 0; 15 | border-style: solid; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: $U5; 20 | height: 0; 21 | border-bottom: $U2 solid; 22 | right: $U6; 23 | bottom: $U4; 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /src/components/spinner/spinner/blade.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/components/spinner/spinner/double-bounce.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /src/styles/icono/icons/dropper.less: -------------------------------------------------------------------------------- 1 | //*-- Dropper --*\\ 2 | .icono-dropper{ 3 | .wDiagonal(@28); 4 | height: @14; 5 | border-width: @3; 6 | border-style: solid; 7 | border-right: none; 8 | border-top-color: transparent; 9 | border-bottom-color: transparent; 10 | border-left-color: transparent; 11 | box-shadow: -1*@9 0 0 @2 inset, 0 0 0 @2 inset; 12 | border-radius: 50% @6 @6 50%; 13 | transform: rotate(-45deg); 14 | margin: @12 -1*@2 @8 -1*@4; 15 | &:before{ 16 | width: @4; 17 | height: @14; 18 | right: @10; 19 | box-shadow: inset 0 0 0 @32; 20 | &:extend(.stickCenterV); 21 | } 22 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/document.less: -------------------------------------------------------------------------------- 1 | //*-- Document --*\\ 2 | .icono-document{ 3 | width: @26; 4 | height: @32; 5 | border-radius: 0 0 0 @10; 6 | &:extend(.icono-stroke); 7 | margin: @1 @4; 8 | &:before{ 9 | position: absolute; 10 | .square(0); 11 | left: -1*@3; 12 | bottom: -1*@3; 13 | border-width: @5; 14 | border-style: solid; 15 | border-bottom-color: transparent; 16 | border-left-color: transparent; 17 | } 18 | &:after{ 19 | width: @13; 20 | height: @2; 21 | &:extend(.stickCenter); 22 | box-shadow: inset 0 0 0 @32, 0 -1*@5 0 0, 0 @5 0 0; 23 | } 24 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/image.less: -------------------------------------------------------------------------------- 1 | //*-- Image --*\\ 2 | .icono-image{ 3 | width: @30; 4 | height: @26; 5 | &:extend(.icono-stroke); 6 | border-radius: @3; 7 | overflow: hidden; 8 | margin: @4 @2; 9 | &:before{ 10 | position: absolute; 11 | width: @20; 12 | height: @20; 13 | left: -1*@2; 14 | top: @14; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 @32, @10 -1*@6 0 0; 17 | } 18 | &:after{ 19 | position: absolute; 20 | .square(@4); 21 | border-radius: 50%; 22 | box-shadow: inset 0 0 0 @32; 23 | top: @5; 24 | right: @5; 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/video.less: -------------------------------------------------------------------------------- 1 | //*-- Video --*\\ 2 | .icono-video{ 3 | width: @20; 4 | height: @20; 5 | &:extend(.icono-stroke); 6 | margin: @7 @7; 7 | &:before{ 8 | &:extend(.stickCenterV); 9 | width: @3; 10 | height: @3; 11 | left: -1*@8; 12 | box-shadow: inset 0 0 0 @32, 0 -1*@8 0 0, 0 @8 0 0, @29 0 0 0,@29 -1*@8 0 0, @29 @8 0 0; 13 | } 14 | &:after{ 15 | &:extend(.stickCenter); 16 | width: 0; 17 | height: 0; 18 | border-width: @4 0 @4 @6; 19 | border-style: solid; 20 | border-top-color: transparent; 21 | border-bottom-color: transparent; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/styles/icono/icons/market.less: -------------------------------------------------------------------------------- 1 | //*-- Market --*\\ 2 | .icono-market{ 3 | width: @32; 4 | height: @12; 5 | &:extend(.icono-stroke); 6 | border-top: none; 7 | margin: @19 @1 @3; 8 | &:before{ 9 | width: @6; 10 | height: @13; 11 | position: absolute; 12 | top: -1*@15; 13 | left: -1*@5; 14 | border-radius: 0 0 @10 @10; 15 | border-left: none; 16 | box-shadow: inset 0 0 0 @32, @8 0 0, @16 0 0, @24 0 0, @32 0 0; 17 | } 18 | &:after{ 19 | width: @6; 20 | height: @6; 21 | bottom: -1*@2; 22 | &:extend(.stickCenterH); 23 | &:extend(.icono-stroke); 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/components/textarea.scss: -------------------------------------------------------------------------------- 1 | .vmc-text-area { 2 | position: relative; 3 | .vmc-1px { 4 | padding: 1px; 5 | } 6 | 7 | textarea { 8 | width: 100%; 9 | height: 100%; 10 | appearance: none; 11 | outline: none; 12 | box-sizing: border-box; 13 | font-size: $TextAreaTextSize; 14 | padding: $TextAreaPadding; 15 | border: none; 16 | resize: none; 17 | display: block; 18 | } 19 | 20 | .vmc-textarea-number { 21 | position: absolute; 22 | bottom: 4px; 23 | right: 6px; 24 | font-size: $TextAreaTipTextSize; 25 | color: $TextAreaTipTextColor; 26 | } 27 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/document.scss: -------------------------------------------------------------------------------- 1 | //*-- Document --*\\ 2 | .icono-document{ 3 | width: $U26; 4 | height: $U32; 5 | border-radius: 0 0 0 $U10; 6 | @extend .icono-stroke; 7 | margin: $U1 $U4; 8 | &:before{ 9 | position: absolute; 10 | @include square(0); 11 | left: -1*$U3; 12 | bottom: -1*$U3; 13 | border-width: $U5; 14 | border-style: solid; 15 | border-bottom-color: transparent; 16 | border-left-color: transparent; 17 | } 18 | &:after{ 19 | width: $U13; 20 | height: $U2; 21 | @extend .stickCenter; 22 | box-shadow: inset 0 0 0 $U32, 0 -1*$U5 0 0, 0 $U5 0 0; 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/video.scss: -------------------------------------------------------------------------------- 1 | //*-- Video --*\\ 2 | .icono-video{ 3 | width: $U20; 4 | height: $U20; 5 | @extend .icono-stroke; 6 | margin: $U7 $U7; 7 | &:before{ 8 | @extend .stickCenterV; 9 | width: $U3; 10 | height: $U3; 11 | left: -1*$U8; 12 | box-shadow: inset 0 0 0 $U32, 0 -1*$U8 0 0, 0 $U8 0 0, $U29 0 0 0,$U29 -1*$U8 0 0, $U29 $U8 0 0; 13 | } 14 | &:after{ 15 | @extend .stickCenter; 16 | width: 0; 17 | height: 0; 18 | border-width: $U4 0 $U4 $U6; 19 | border-style: solid; 20 | border-top-color: transparent; 21 | border-bottom-color: transparent; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/styles/icono/icons/music.less: -------------------------------------------------------------------------------- 1 | //*-- Music --*\\ 2 | .icono-music{ 3 | width: @18; 4 | height: @6; 5 | transform: skewY(-15deg); 6 | box-shadow: inset 0 0 0 @32; 7 | border-radius: @2 @2 0 0; 8 | margin: @4 @5 @24 @11; 9 | &:before{ 10 | position: absolute; 11 | width: @2; 12 | height: @16; 13 | left: 0; 14 | top: @4; 15 | box-shadow: inset 0 0 0 @32, @16 0 0 0; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: @10; 20 | height: @8; 21 | left: -1*@8; 22 | top: @17; 23 | border-radius: 50%; 24 | box-shadow: inset 0 0 0 @32, @16 0 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/components/cell.scss: -------------------------------------------------------------------------------- 1 | .vmc-cell { 2 | padding: 0 $CellHorizontalPadding; 3 | min-height: $CellMinHeight; 4 | display: flex; 5 | align-items: center; 6 | background: $CellBackColor; 7 | 8 | + .vmc-cell:before { 9 | border: none; 10 | } 11 | 12 | .cell-icon { 13 | margin-right: $CellIconTextSpace; 14 | } 15 | 16 | .cell-title { 17 | flex: 1; 18 | font-size: $CellTextSize; 19 | } 20 | 21 | .cell-arrow { 22 | margin-right: -$CellHorizontalPadding; 23 | 24 | .icono-caretRight { 25 | color: $CellArrowColor; 26 | transform: scale($CellArrowScale); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/image.scss: -------------------------------------------------------------------------------- 1 | //*-- Image --*\\ 2 | .icono-image{ 3 | width: $U30; 4 | height: $U26; 5 | @extend .icono-stroke; 6 | border-radius: $U3; 7 | overflow: hidden; 8 | margin: $U4 $U2; 9 | &:before{ 10 | position: absolute; 11 | width: $U20; 12 | height: $U20; 13 | left: -1*$U2; 14 | top: $U14; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 $U32, $U10 -1*$U6 0 0; 17 | } 18 | &:after{ 19 | position: absolute; 20 | @include square($U4); 21 | border-radius: 50%; 22 | box-shadow: inset 0 0 0 $U32; 23 | top: $U5; 24 | right: $U5; 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/market.scss: -------------------------------------------------------------------------------- 1 | //*-- Market --*\\ 2 | .icono-market{ 3 | width: $U32; 4 | height: $U12; 5 | @extend .icono-stroke; 6 | border-top: none; 7 | margin: $U19 $U1 $U3; 8 | &:before{ 9 | width: $U6; 10 | height: $U13; 11 | position: absolute; 12 | top: -1*$U15; 13 | left: -1*$U5; 14 | border-radius: 0 0 $U10 $U10; 15 | border-left: none; 16 | box-shadow: inset 0 0 0 $U32, $U8 0 0, $U16 0 0, $U24 0 0, $U32 0 0; 17 | } 18 | &:after{ 19 | width: $U6; 20 | height: $U6; 21 | bottom: -1*$U2; 22 | @extend .stickCenterH; 23 | @extend .icono-stroke; 24 | } 25 | } -------------------------------------------------------------------------------- /src/styles/components/cell.less: -------------------------------------------------------------------------------- 1 | .vmc-cell { 2 | padding: 0 @CellHorizontalPadding; 3 | min-height: @CellMinHeight; 4 | display: flex; 5 | align-items: center; 6 | background: @CellBackColor; 7 | 8 | + .vmc-cell:before { 9 | border: none; 10 | } 11 | 12 | .cell-icon { 13 | margin-right: @CellIconTextSpace; 14 | } 15 | 16 | .cell-title { 17 | flex: 1; 18 | font-size: @CellTextSize; 19 | } 20 | 21 | .cell-arrow { 22 | margin-right: -@CellHorizontalPadding; 23 | 24 | .icono-caretRight { 25 | color: @CellArrowColor; 26 | transform: scale(@CellArrowScale); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/styles/components/textarea.less: -------------------------------------------------------------------------------- 1 | .vmc-text-area { 2 | position: relative; 3 | .vmc-1px { 4 | padding: 1px; 5 | } 6 | 7 | textarea { 8 | width: 100%; 9 | height: 100%; 10 | appearance: none; 11 | outline: none; 12 | box-sizing: border-box; 13 | font-size: @TextAreaTextSize; 14 | padding: @TextAreaPadding; 15 | border: none; 16 | resize: none; 17 | display: block; 18 | } 19 | 20 | .vmc-textarea-number { 21 | position: absolute; 22 | bottom: 4px; 23 | right: 6px; 24 | font-size: @TextAreaTipTextSize; 25 | color: @TextAreaTipTextColor; 26 | } 27 | } -------------------------------------------------------------------------------- /src/scss/components/upload.scss: -------------------------------------------------------------------------------- 1 | .vmc-upload { 2 | height: $UploadWidth; 3 | width: $UploadWidth; 4 | border: $UploadBorderWidth $UploadBorderStyle $UploadBorderColor; 5 | border-radius: $UploadBorderRadius; 6 | position: relative; 7 | 8 | input[type=file] { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | opacity: 0; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .vmc-upload-button { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | height: 100%; 22 | width: 100%; 23 | 24 | i { 25 | color: #cccccc; 26 | display: block; 27 | transform: scale($UploadWidth / 32); 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/music.scss: -------------------------------------------------------------------------------- 1 | //*-- Music --*\\ 2 | .icono-music{ 3 | width: $U18; 4 | height: $U6; 5 | transform: skewY(-15deg); 6 | box-shadow: inset 0 0 0 $U32; 7 | border-radius: $U2 $U2 0 0; 8 | margin: $U4 $U5 $U24 $U11; 9 | &:before{ 10 | position: absolute; 11 | width: $U2; 12 | height: $U16; 13 | left: 0; 14 | top: $U4; 15 | box-shadow: inset 0 0 0 $U32, $U16 0 0 0; 16 | } 17 | &:after{ 18 | position: absolute; 19 | width: $U10; 20 | height: $U8; 21 | left: -1*$U8; 22 | top: $U17; 23 | border-radius: 50%; 24 | box-shadow: inset 0 0 0 $U32, $U16 0 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/icono.less: -------------------------------------------------------------------------------- 1 | .icono-icono{ 2 | width: @13; 3 | height: @4; 4 | box-shadow: inset 0 0 0 @32, 0 @16, @17 -1*@18; 5 | transform: skew(0, 30deg); 6 | margin: @11 @19 @19 @2; 7 | &:before{ 8 | position: absolute; 9 | width: @13; 10 | height: @4; 11 | box-shadow: inset 0 0 0 @32, 0 @16, -1*@17 -1*@17; 12 | right: -1*@17; 13 | top: -1*@10; 14 | transform: skew(0, -48deg); 15 | } 16 | &:after{ 17 | position: absolute; 18 | width: @22; 19 | height: @15; 20 | left: 0; 21 | top: -1*@5; 22 | border: @4 solid; 23 | border-top-color: transparent; 24 | border-bottom: none; 25 | transform: skew(0, -30deg) scaleY(0.6); 26 | } 27 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/microphone.less: -------------------------------------------------------------------------------- 1 | //*-- Microphone --*\\ 2 | .icono-microphone{ 3 | width: @22; 4 | height: @15; 5 | &:extend(.icono-stroke); 6 | border-width: 0 @2 @2; 7 | border-radius: @20~'/'0 0 @20 @20; 8 | margin: @12 @6 @7; 9 | &:before{ 10 | width: @10; 11 | height: @18; 12 | &:extend(.stickCenterH); 13 | top: -1*@11; 14 | border-radius: @20; 15 | &:extend(.icono-stroke); 16 | } 17 | &:after{ 18 | width: @2; 19 | height: @2; 20 | bottom: -1*@4; 21 | &:extend(.stickCenterH); 22 | box-shadow: inset 0 0 0 @32, 0 @2, 0 @4, -1*@2 @4, -1*@4 @4, -1*@6 @4, @2 @4, @4 @4, @6 @4; 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/dropper.scss: -------------------------------------------------------------------------------- 1 | //*-- Dropper --*\\ 2 | .icono-dropper{ 3 | // @include wDiagonal($U28); 4 | width: 2*$U20; 5 | height: $U14; 6 | border-width: $U3; 7 | border-style: solid; 8 | border-right: none; 9 | border-top-color: transparent; 10 | border-bottom-color: transparent; 11 | border-left-color: transparent; 12 | box-shadow: -1*$U9 0 0 $U2 inset, 0 0 0 $U2 inset; 13 | border-radius: 50% $U6 $U6 50%; 14 | transform: rotate(-45deg); 15 | margin: $U12 -1*$U2 $U8 -1*$U4; 16 | &:before{ 17 | width: $U4; 18 | height: $U14; 19 | right: $U10; 20 | box-shadow: inset 0 0 0 $U32; 21 | @extend .stickCenterV; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/crop.less: -------------------------------------------------------------------------------- 1 | //*-- Crop --*\\ 2 | .icono-crop{ 3 | .square(@21); 4 | &:extend(.icono-stroke); 5 | border-left: none; 6 | border-bottom: none; 7 | margin: @9 @9 @4 @4; 8 | &:before{ 9 | position: absolute; 10 | .square(@21); 11 | &:extend(.icono-stroke); 12 | top: -1*@7; 13 | right: -1*@7; 14 | border-top: none; 15 | border-right: none; 16 | box-sizing: border-box; 17 | } 18 | &:after{ 19 | position: absolute; 20 | width: @27; 21 | height: @1; 22 | left: @2; 23 | top: @3; 24 | box-shadow: inset 0 0 0 @32; 25 | transform: rotate(-45deg); 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/alert/README.md: -------------------------------------------------------------------------------- 1 | # Alert 2 | 3 | ## Overview 4 | 5 | 弹出提示框，显示指定内容。 6 | 7 | 是否全局组件：是。 8 | 9 | ## Usage 10 | 11 | ```javascript 12 | export default { 13 | ready() { 14 | this.$Alert('请点击确定', () => {}); 15 | } 16 | } 17 | ``` 18 | 19 | ## Arguments 20 | 21 | | Name | Type | Description | Default | 22 | | ----- | ----- | ----- | ----- | 23 | | title | String | 弹框提示内容(可省) | "" | 24 | | callback | Function | 点击确定时的回调函数(可省) | null | 25 | | options | Object | 其它配置参数 | {title: "", content: "", callback: null, button: "确定"} | 26 | 27 | ## LESS 28 | 29 | | Name | Description | Default | 30 | | ----- | ----- | ----- | 31 | | @AlertTitleHeight | 标题栏最小高度 | 50px | 32 | | @AlertTitlePadding | 标题底边距 | 15px | -------------------------------------------------------------------------------- /src/styles/icono/icons/locationArrow.less: -------------------------------------------------------------------------------- 1 | //*-- LocationArrow --*\\ 2 | .icono-locationArrow{ 3 | width: @32; 4 | height: @32; 5 | margin: @1; 6 | &:before{ 7 | position: absolute; 8 | left: @7; 9 | top: @16; 10 | border-width: @6 0 @6 @6; 11 | border-style: solid; 12 | border-left-color: transparent; 13 | transform: rotate(-45deg); 14 | } 15 | &:after{ 16 | position: absolute; 17 | top: @10; 18 | left: @2; 19 | border-width: @10; 20 | border-style: solid; 21 | border-bottom-color: transparent; 22 | border-left-color: transparent; 23 | transform: skew(-30deg, -30deg); 24 | } 25 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/mouse.less: -------------------------------------------------------------------------------- 1 | //*-- Mouse --*\\ 2 | .icono-mouse{ 3 | width: @23; 4 | height: @32; 5 | border-radius: @11 @11 @12 @12; 6 | &:extend(.icono-stroke); 7 | margin: @1 @5 @1 @6; 8 | &:before{ 9 | width: @1; 10 | height: @6; 11 | border-radius: @2; 12 | &:extend(.stickCenterH); 13 | &:extend(.icono-stroke); 14 | border-color: transparent; 15 | border-width: @1; 16 | top: @5; 17 | box-shadow: 0 0 0 @1, 0 0 0 @2 inset; 18 | } 19 | &:after{ 20 | width: @1; 21 | height: @4; 22 | &:extend(.stickCenterH); 23 | top: 0; 24 | box-shadow: inset 0 0 0 @32, 0 @13 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /src/vmc.js: -------------------------------------------------------------------------------- 1 | // 样式，对于webpack方式引用，需要手动引用样式，这样可以方便地覆盖vmc的变量名 2 | require('./styles/vmc.less'); 3 | 4 | (function() { 5 | var vmc = require('./index'); 6 | var install = require('./components/install').default; 7 | 8 | if (window.Vue) { 9 | var Vue = window.Vue; 10 | Vue.use(install); 11 | 12 | Object.keys(vmc) 13 | .forEach(key => { 14 | if (key !== 'Utils') { 15 | Vue.component(key, vmc[key]); 16 | } 17 | }) 18 | } 19 | 20 | vmc.version = process.env.VERSION; 21 | 22 | if (module && module.exports) { 23 | module.exports = vmc; 24 | } else { 25 | window.VMC = vmc; 26 | } 27 | }()); -------------------------------------------------------------------------------- /src/scss/icono/icons/locationArrow.scss: -------------------------------------------------------------------------------- 1 | //*-- LocationArrow --*\\ 2 | .icono-locationArrow{ 3 | width: $U32; 4 | height: $U32; 5 | margin: $U1; 6 | &:before{ 7 | position: absolute; 8 | left: $U7; 9 | top: $U16; 10 | border-width: $U6 0 $U6 $U6; 11 | border-style: solid; 12 | border-left-color: transparent; 13 | transform: rotate(-45deg); 14 | } 15 | &:after{ 16 | position: absolute; 17 | top: $U10; 18 | left: $U2; 19 | border-width: $U10; 20 | border-style: solid; 21 | border-bottom-color: transparent; 22 | border-left-color: transparent; 23 | transform: skew(-30deg, -30deg); 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/icono.scss: -------------------------------------------------------------------------------- 1 | .icono-icono{ 2 | width: $U13; 3 | height: $U4; 4 | box-shadow: inset 0 0 0 $U32, 0 $U16, $U17 -1*$U18; 5 | transform: skew(0, 30deg); 6 | margin: $U11 $U19 $U19 $U2; 7 | &:before{ 8 | position: absolute; 9 | width: $U13; 10 | height: $U4; 11 | box-shadow: inset 0 0 0 $U32, 0 $U16, -1*$U17 -1*$U17; 12 | right: -1*$U17; 13 | top: -1*$U10; 14 | transform: skew(0, -48deg); 15 | } 16 | &:after{ 17 | position: absolute; 18 | width: $U22; 19 | height: $U15; 20 | left: 0; 21 | top: -1*$U5; 22 | border: $U4 solid; 23 | border-top-color: transparent; 24 | border-bottom: none; 25 | transform: skew(0, -30deg) scaleY(0.6); 26 | } 27 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/mouse.scss: -------------------------------------------------------------------------------- 1 | //*-- Mouse --*\\ 2 | .icono-mouse{ 3 | width: $U23; 4 | height: $U32; 5 | border-radius: $U11 $U11 $U12 $U12; 6 | @extend .icono-stroke; 7 | margin: $U1 $U5 $U1 $U6; 8 | &:before{ 9 | width: $U1; 10 | height: $U6; 11 | border-radius: $U2; 12 | @extend .stickCenterH; 13 | @extend .icono-stroke; 14 | border-color: transparent; 15 | border-width: $U1; 16 | top: $U5; 17 | box-shadow: 0 0 0 $U1, 0 0 0 $U2 inset; 18 | } 19 | &:after{ 20 | width: $U1; 21 | height: $U4; 22 | @extend .stickCenterH; 23 | top: 0; 24 | box-shadow: inset 0 0 0 $U32, 0 $U13 0 0; 25 | } 26 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/textAlign.less: -------------------------------------------------------------------------------- 1 | //*-- Text align --*\\ 2 | [class*="icono-textAlign"]{ 3 | width: @28; 4 | height: @22; 5 | margin: @6 @3; 6 | &:before, &:after{ 7 | position: absolute; 8 | height: @2; 9 | box-shadow: inset 0 0 0 @32, 0 @8 0 0, 0 @16 0 0; 10 | right: 0; 11 | } 12 | &:before{ 13 | width: @28; 14 | top: 0; 15 | } 16 | &:after{ 17 | width: @18; 18 | top: @4; 19 | } 20 | &.icono-textAlignCenter{ 21 | &:before, &:after{ 22 | &:extend(.stickCenterH); 23 | } 24 | } 25 | &.icono-textAlignLeft{ 26 | &:before, &:after{ 27 | left: 0; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/icono/icons/microphone.scss: -------------------------------------------------------------------------------- 1 | //*-- Microphone --*\\ 2 | .icono-microphone{ 3 | width: $U22; 4 | height: $U15; 5 | @extend .icono-stroke; 6 | border-width: 0 $U2 $U2; 7 | border-radius: $U20#{'/'}0 0 $U20 $U20; 8 | margin: $U12 $U6 $U7; 9 | &:before{ 10 | width: $U10; 11 | height: $U18; 12 | @extend .stickCenterH; 13 | top: -1*$U11; 14 | border-radius: $U20; 15 | @extend .icono-stroke; 16 | } 17 | &:after{ 18 | width: $U2; 19 | height: $U2; 20 | bottom: -1*$U4; 21 | @extend .stickCenterH; 22 | box-shadow: inset 0 0 0 $U32, 0 $U2, 0 $U4, -1*$U2 $U4, -1*$U4 $U4, -1*$U6 $U4, $U2 $U4, $U4 $U4, $U6 $U4; 23 | } 24 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/textAlign.scss: -------------------------------------------------------------------------------- 1 | //*-- Text align --*\\ 2 | [class*="icono-textAlign"]{ 3 | width: $U28; 4 | height: $U22; 5 | margin: $U6 $U3; 6 | &:before, &:after{ 7 | position: absolute; 8 | height: $U2; 9 | box-shadow: inset 0 0 0 $U32, 0 $U8 0 0, 0 $U16 0 0; 10 | right: 0; 11 | } 12 | &:before{ 13 | width: $U28; 14 | top: 0; 15 | } 16 | &:after{ 17 | width: $U18; 18 | top: $U4; 19 | } 20 | &.icono-textAlignCenter{ 21 | &:before, &:after{ 22 | @extend .stickCenterH; 23 | } 24 | } 25 | &.icono-textAlignLeft{ 26 | &:before, &:after{ 27 | left: 0; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/styles/icono/icons/home.less: -------------------------------------------------------------------------------- 1 | //*-- Home --*\\ 2 | .icono-home{ 3 | width: @22; 4 | height: @16; 5 | &:extend(.icono-stroke); 6 | border-top: none; 7 | margin: @15 @6 @3; 8 | &:before{ 9 | .square(@18); 10 | transform: rotate(45deg); 11 | position: absolute; 12 | left: -1*@2; 13 | top: -1*@7; 14 | &:extend(.icono-stroke); 15 | border-right-color: transparent; 16 | border-bottom-color: transparent; 17 | } 18 | &:after{ 19 | position: absolute; 20 | .goldenRectP(@6); 21 | bottom: 0; 22 | .stickCenterH(); 23 | &:extend(.icono-stroke); 24 | border-width: @1; 25 | border-bottom: none; 26 | } 27 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/support.less: -------------------------------------------------------------------------------- 1 | //*-- Support --*\\ 2 | .icono-support{ 3 | width: @26; 4 | height: @26; 5 | border: @5 solid transparent; 6 | box-shadow: 0 0 0 @2 inset, 0 0 0 @2; 7 | border-radius: 50%; 8 | margin: @4; 9 | &:before{ 10 | position:absolute; 11 | width: @7; 12 | height: @7; 13 | top: -1*@3; 14 | left: -1*@3; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 @32, @21 0 0 0; 17 | } 18 | &:after{ 19 | position:absolute; 20 | width: @7; 21 | height: @7; 22 | top: -1*@3; 23 | right: -1*@3; 24 | transform: rotate(135deg); 25 | box-shadow: inset 0 0 0 @32, @21 0 0 0; 26 | } 27 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/crop.scss: -------------------------------------------------------------------------------- 1 | //*-- Crop --*\\ 2 | .icono-crop{ 3 | @include square($U21); 4 | @extend .icono-stroke; 5 | border-left: none; 6 | border-bottom: none; 7 | margin: $U9 $U9 $U4 $U4; 8 | &:before{ 9 | position: absolute; 10 | @include square($U21); 11 | @extend .icono-stroke; 12 | top: -1*$U7; 13 | right: -1*$U7; 14 | border-top: none; 15 | border-right: none; 16 | box-sizing: border-box; 17 | } 18 | &:after{ 19 | //@include wDiagonal($U19); 20 | width: $U27; 21 | height: $U1; 22 | @include stickCenter(0, 0, $U12, $U2); 23 | box-shadow: inset 0 0 0 $U32; 24 | transform: rotate(-45deg); 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/support.scss: -------------------------------------------------------------------------------- 1 | //*-- Support --*\\ 2 | .icono-support{ 3 | width: $U26; 4 | height: $U26; 5 | border: $U5 solid transparent; 6 | box-shadow: 0 0 0 $U2 inset, 0 0 0 $U2; 7 | border-radius: 50%; 8 | margin: $U4; 9 | &:before{ 10 | position:absolute; 11 | width: $U7; 12 | height: $U7; 13 | top: -1*$U3; 14 | left: -1*$U3; 15 | transform: rotate(45deg); 16 | box-shadow: inset 0 0 0 $U32, $U21 0 0 0; 17 | } 18 | &:after{ 19 | position:absolute; 20 | width: $U7; 21 | height: $U7; 22 | top: -1*$U3; 23 | right: -1*$U3; 24 | transform: rotate(135deg); 25 | box-shadow: inset 0 0 0 $U32, $U21 0 0 0; 26 | } 27 | } -------------------------------------------------------------------------------- /src/components/box/README.md: -------------------------------------------------------------------------------- 1 | # Box 2 | 3 | ## Overview 4 | 5 | 占位框是一个用于占据指定高宽比的盒子。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```HTML 12 | 高宽比为0.4的盒子 13 | 14 | 15 | 16 | 17 | 18 | 高宽比为0.4的盒子，带背景色 19 | 20 | 21 | ``` 22 | 23 | ## Slots 24 | 25 | | Name | Description | Default | 26 | | ----- | ----- | ----- | 27 | | default | 在组件中插入的文字、图片或其它内容 | undefined | 28 | 29 | ## Props 30 | 31 | | Property | Type | Description | Default | 32 | | ----- | ----- | ----- | ----- | 33 | | ratio | Number, String | 高宽比 | 1 | 34 | | background | String | 背景图或者背景颜色 | undefined | -------------------------------------------------------------------------------- /src/scss/icono/icons/home.scss: -------------------------------------------------------------------------------- 1 | //*-- Home --*\\ 2 | .icono-home{ 3 | width: $U22; 4 | height: $U16; 5 | @extend .icono-stroke; 6 | border-top: none; 7 | margin: $U15 $U6 $U3; 8 | &:before{ 9 | @include square($U18); 10 | transform: rotate(45deg); 11 | position: absolute; 12 | left: -1*$U2; 13 | top: -1*$U7; 14 | @extend .icono-stroke; 15 | border-right-color: transparent; 16 | border-bottom-color: transparent; 17 | } 18 | &:after{ 19 | position: absolute; 20 | @include goldenRectP($U6); 21 | bottom: 0; 22 | @include stickCenterH(); 23 | @extend .icono-stroke; 24 | border-width: $U1; 25 | border-bottom: none; 26 | } 27 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/tag.less: -------------------------------------------------------------------------------- 1 | //*-- Tag --*\\ 2 | .icono-tag{ 3 | width: @18; 4 | height: @24; 5 | &:extend(.icono-stroke); 6 | border-radius: @6 @6 @4 @4; 7 | border-top: none; 8 | transform: rotate(45deg); 9 | margin: @5 @8; 10 | &:before{ 11 | position: absolute; 12 | top: -1*@4; 13 | left: @1; 14 | width: @10; 15 | height: @10; 16 | border-width: @2 0 0 @2; 17 | border-style: solid; 18 | transform: rotate(45deg); 19 | border-radius: @5 0 0 0; 20 | } 21 | &:after{ 22 | &:extend(.stickCenterH); 23 | top: @1; 24 | width: @3; 25 | height: @3; 26 | &:extend(.icono-stroke); 27 | border-radius: 50%; 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/tag.scss: -------------------------------------------------------------------------------- 1 | //*-- Tag --*\\ 2 | .icono-tag{ 3 | width: $U18; 4 | height: $U24; 5 | @extend .icono-stroke; 6 | border-radius: $U6 $U6 $U4 $U4; 7 | border-top: none; 8 | transform: rotate(45deg); 9 | margin: $U5 $U8; 10 | &:before{ 11 | position: absolute; 12 | top: -1*$U4; 13 | left: $U1; 14 | width: $U10; 15 | height: $U10; 16 | border-width: $U2 0 0 $U2; 17 | border-style: solid; 18 | transform: rotate(45deg); 19 | border-radius: $U5 0 0 0; 20 | } 21 | &:after{ 22 | @extend .stickCenterH; 23 | top: $U1; 24 | width: $U3; 25 | height: $U3; 26 | @extend .icono-stroke; 27 | border-radius: 50%; 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/components/navbar.scss: -------------------------------------------------------------------------------- 1 | .vmc-topbar { 2 | position: absolute; 3 | top: 0; 4 | width: 100%; 5 | height: $NavbarHeight; 6 | z-index: 50; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .vmc-navbar { 13 | color: $NavbarTextColor; 14 | background-color: $NavbarBackColor; 15 | font-size: $NavbarTextSize; 16 | 17 | .left { 18 | width: $NavbarIconWidth; 19 | padding: ($NavbarHeight - 32px) / 2 0; 20 | } 21 | 22 | .center { 23 | flex: 1; 24 | text-align: center; 25 | } 26 | 27 | .right { 28 | width: $NavbarIconWidth; 29 | height: 100%; 30 | } 31 | 32 | +div { 33 | padding-top: $NavbarHeight !important; 34 | } 35 | } -------------------------------------------------------------------------------- /src/styles/components/navbar.less: -------------------------------------------------------------------------------- 1 | .vmc-topbar { 2 | position: absolute; 3 | top: 0; 4 | width: 100%; 5 | height: @NavbarHeight; 6 | z-index: 50; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | .vmc-navbar { 13 | color: @NavbarTextColor; 14 | background-color: @NavbarBackColor; 15 | font-size: @NavbarTextSize; 16 | 17 | .left { 18 | width: @NavbarIconWidth; 19 | padding: (@NavbarHeight - 32px) / 2 0; 20 | } 21 | 22 | .center { 23 | flex: 1; 24 | text-align: center; 25 | } 26 | 27 | .right { 28 | width: @NavbarIconWidth; 29 | height: 100%; 30 | } 31 | 32 | +div { 33 | padding-top: @NavbarHeight !important; 34 | } 35 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/folder.less: -------------------------------------------------------------------------------- 1 | //*-- Folder --*\\ 2 | .icono-folder{ 3 | width: @18; 4 | height: @22; 5 | &:extend(.icono-stroke); 6 | border-left-width: 0; 7 | border-radius: 0 @3 @3 0; 8 | margin: @8 @2 @4 @14; 9 | &:before{ 10 | position: absolute; 11 | width: @12; 12 | height: @20; 13 | left: -1*@12; 14 | bottom: -1*@2; 15 | border-width: 0 0 @2 @2; 16 | border-style: solid; 17 | border-radius: 0 0 0 @3; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: @10; 22 | height: @5; 23 | left: -1*@12; 24 | top: -1*@7; 25 | border-width: @2 @2 0 @2; 26 | border-style: solid; 27 | border-radius: @3 @3 0 0; 28 | } 29 | } -------------------------------------------------------------------------------- /src/styles/components/upload.less: -------------------------------------------------------------------------------- 1 | .vmc-upload { 2 | height: @UploadWidth; 3 | width: @UploadWidth; 4 | border: @UploadBorderWidth @UploadBorderStyle @UploadBorderColor; 5 | border-radius: @UploadBorderRadius; 6 | position: relative; 7 | 8 | input[type=file] { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | opacity: 0; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .vmc-upload-button { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | height: 100%; 22 | width: 100%; 23 | 24 | i { 25 | color: #cccccc; 26 | display: block; 27 | transform: scale(@UploadWidth / 32); 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/scss/components/rater.scss: -------------------------------------------------------------------------------- 1 | .vmc-rater { 2 | font-size: 0; 3 | 4 | .vmc-rater-outer { 5 | display: inline-block; 6 | position: relative; 7 | color: $RaterColor; 8 | font-size: $RaterStarSize; 9 | 10 | &:not(:first-child) { 11 | margin-left: $RaterGutter / 2; 12 | } 13 | 14 | &:not(:last-child) { 15 | margin-right: $RaterGutter / 2; 16 | } 17 | 18 | &.active { 19 | color: $RaterActiveColor; 20 | } 21 | 22 | .vmc-rater-inner { 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | overflow: hidden; 27 | 28 | &.active { 29 | color: $RaterActiveColor; 30 | } 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/folder.scss: -------------------------------------------------------------------------------- 1 | //*-- Folder --*\\ 2 | .icono-folder{ 3 | width: $U18; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-left-width: 0; 7 | border-radius: 0 $U3 $U3 0; 8 | margin: $U8 $U2 $U4 $U14; 9 | &:before{ 10 | position: absolute; 11 | width: $U12; 12 | height: $U20; 13 | left: -1*$U12; 14 | bottom: -1*$U2; 15 | border-width: 0 0 $U2 $U2; 16 | border-style: solid; 17 | border-radius: 0 0 0 $U3; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U10; 22 | height: $U5; 23 | left: -1*$U12; 24 | top: -1*$U7; 25 | border-width: $U2 $U2 0 $U2; 26 | border-style: solid; 27 | border-radius: $U3 $U3 0 0; 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/sync.scss: -------------------------------------------------------------------------------- 1 | //*-- Sync --*\\ 2 | .icono-sync{ 3 | width: $U26; 4 | height: $U26; 5 | border-radius: 50%; 6 | @extend .icono-stroke; 7 | border-right-color: transparent; 8 | border-left-color: transparent; 9 | margin: $U4; 10 | &:before, &:after{ 11 | position: absolute; 12 | width: 0;height: 0; 13 | border-width: $U6; 14 | border-style: solid; 15 | border-right-color: transparent; 16 | border-bottom-color: transparent; 17 | border-left-color: transparent; 18 | } 19 | &:before{ 20 | transform: rotate(-45deg); 21 | right: -1*$U7; 22 | top:0; 23 | } 24 | &:after{ 25 | transform: rotate(135deg); 26 | left: -1*$U7; 27 | bottom: 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/styles/components/rater.less: -------------------------------------------------------------------------------- 1 | .vmc-rater { 2 | font-size: 0; 3 | 4 | .vmc-rater-outer { 5 | display: inline-block; 6 | position: relative; 7 | color: @RaterColor; 8 | font-size: @RaterStarSize; 9 | 10 | &:not(:first-child) { 11 | margin-left: @RaterGutter / 2; 12 | } 13 | 14 | &:not(:last-child) { 15 | margin-right: @RaterGutter / 2; 16 | } 17 | 18 | &.active { 19 | color: @RaterActiveColor; 20 | } 21 | 22 | .vmc-rater-inner { 23 | position: absolute; 24 | left: 0; 25 | top: 0; 26 | overflow: hidden; 27 | 28 | &.active { 29 | color: @RaterActiveColor; 30 | } 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/calendar.less: -------------------------------------------------------------------------------- 1 | //*-- Calendar --*\\ 2 | .icono-calendar{ 3 | width: @32; 4 | height: @28; 5 | border-width: @4 @2 @2; 6 | border-style: solid; 7 | border-radius: @4; 8 | margin: @5 @1 @1; 9 | &:before{ 10 | position: absolute; 11 | width: @4; 12 | height: @4; 13 | top: @3; 14 | left: @3; 15 | box-shadow: inset 0 0 0 @32, @6 0, @12 0, @18 0, 16 | 0 @6, @6 @6, @12 @6, @18 @6, 17 | 0 @12, @6 @12, @12 @12, @18 @12; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: @4; 22 | height: @8; 23 | box-shadow: inset 0 0 0 @32, @16 0; 24 | border-radius: @4; 25 | top: -1*@8; 26 | left: @4; 27 | } 28 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/paperclip.less: -------------------------------------------------------------------------------- 1 | //*-- Paper clip --*\\ 2 | .icono-paperClip{ 3 | width: @24; 4 | height: @18; 5 | &:extend(.icono-stroke); 6 | border-left: none; 7 | border-radius: 0 @16 @16 0; 8 | transform: rotate(-45deg); 9 | margin: @5 0 @11 @10; 10 | &:before{ 11 | width: @18; 12 | height: @6; 13 | right: @2; 14 | &:extend(.stickCenterV); 15 | &:extend(.icono-stroke); 16 | border-radius: 0 @16 @16 0; 17 | border-left: none; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: @12; 22 | height: @10; 23 | left: -1*@12; 24 | top: -1*@2; 25 | &:extend(.icono-stroke); 26 | border-right: none; 27 | border-radius: @16 0 0 @16; 28 | 29 | } 30 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/sync.less: -------------------------------------------------------------------------------- 1 | //*-- Sync --*\\ 2 | .icono-sync{ 3 | width: @26; 4 | height: @26; 5 | border-radius: 50%; 6 | &:extend(.icono-stroke); 7 | border-right-color: transparent; 8 | border-left-color: transparent; 9 | margin: @4; 10 | &:before, &:after{ 11 | position: absolute; 12 | width: 0;height: 0; 13 | border-width: @6; 14 | border-style: solid; 15 | border-right-color: transparent; 16 | border-bottom-color: transparent; 17 | border-left-color: transparent; 18 | } 19 | &:before{ 20 | transform: rotate(-45deg); 21 | right: -1*@7; 22 | top:0; 23 | } 24 | &:after{ 25 | transform: rotate(135deg); 26 | left: -1*@7; 27 | bottom: 0; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 首页 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /src/scss/icono/icons/paperclip.scss: -------------------------------------------------------------------------------- 1 | //*-- Paper clip --*\\ 2 | .icono-paperClip{ 3 | width: $U24; 4 | height: $U18; 5 | @extend .icono-stroke; 6 | border-left: none; 7 | border-radius: 0 $U16 $U16 0; 8 | transform: rotate(-45deg); 9 | margin: $U5 0 $U11 $U10; 10 | &:before{ 11 | width: $U18; 12 | height: $U6; 13 | right: $U2; 14 | @extend .stickCenterV; 15 | @extend .icono-stroke; 16 | border-radius: 0 $U16 $U16 0; 17 | border-left: none; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U12; 22 | height: $U10; 23 | left: -1*$U12; 24 | top: -1*$U2; 25 | @extend .icono-stroke; 26 | border-right: none; 27 | border-radius: $U16 0 0 $U16; 28 | 29 | } 30 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/bookmark.less: -------------------------------------------------------------------------------- 1 | //*-- Bookmark --*\\ 2 | .icono-bookmark{ 3 | width: 0; 4 | height: 0; 5 | border: @9 solid; 6 | border-bottom-color: transparent; 7 | box-shadow: 0 -1*@4; 8 | border-radius: @3 @3 0 0; 9 | margin: @10 @8 @6; 10 | } 11 | .icono-bookmarkEmpty{ 12 | width: @18; 13 | height: @22; 14 | &:extend(.icono-stroke); 15 | border-bottom: none; 16 | border-radius: @3 @3 @2 @2; 17 | overflow: hidden; 18 | margin: @6 @8; 19 | &:before{ 20 | position: absolute; 21 | width: @12; 22 | height: @12; 23 | bottom: 0; 24 | left: 0; 25 | &:extend(.icono-stroke); 26 | border-right: none; 27 | border-bottom: none; 28 | transform: rotate(45deg) translate(35%, 35%); 29 | } 30 | } -------------------------------------------------------------------------------- /examples/pages/extends/popup-address-picker.vue: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/scss/icono/icons/bookmark.scss: -------------------------------------------------------------------------------- 1 | //*-- Bookmark --*\\ 2 | .icono-bookmark{ 3 | width: 0; 4 | height: 0; 5 | border: $U9 solid; 6 | border-bottom-color: transparent; 7 | box-shadow: 0 -1*$U4; 8 | border-radius: $U3 $U3 0 0; 9 | margin: $U10 $U8 $U6; 10 | } 11 | .icono-bookmarkEmpty{ 12 | width: $U18; 13 | height: $U22; 14 | @extend .icono-stroke; 15 | border-bottom: none; 16 | border-radius: $U3 $U3 $U2 $U2; 17 | overflow: hidden; 18 | margin: $U6 $U8; 19 | &:before{ 20 | position: absolute; 21 | width: $U12; 22 | height: $U12; 23 | bottom: 0; 24 | left: 0; 25 | @extend .icono-stroke; 26 | border-right: none; 27 | border-bottom: none; 28 | transform: rotate(45deg) translate(35%, 35%); 29 | } 30 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/smile.less: -------------------------------------------------------------------------------- 1 | //*-- Smile --*\\ 2 | .icono-smile{ 3 | border-radius: 50%; 4 | &:extend(.icono-stroke); 5 | height: @30; 6 | width: @30; 7 | margin: @2; 8 | &:before{ 9 | border-radius: 50%; 10 | box-shadow: @8 0 0 0, 0 0 0 @2 inset; 11 | height: @4; 12 | width: @4; 13 | left: @7; 14 | position: absolute; 15 | top: 27%; 16 | } 17 | &:after{ 18 | border-radius: 50%; 19 | transform: translateX(-50%); 20 | &:extend(.icono-stroke); 21 | border-top-color: transparent; 22 | border-left-color: transparent; 23 | border-right-color: transparent; 24 | height: @16; 25 | left:50%; 26 | position: absolute; 27 | top: 6%; 28 | width: @16; 29 | } 30 | } -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 首页
-------------------------------------------------------------------------------- /src/scss/icono/icons/smile.scss: -------------------------------------------------------------------------------- 1 | //*-- Smile --*\\ 2 | .icono-smile{ 3 | border-radius: 50%; 4 | @extend .icono-stroke; 5 | height: $U30; 6 | width: $U30; 7 | margin: $U2; 8 | &:before{ 9 | border-radius: 50%; 10 | box-shadow: $U8 0 0 0, 0 0 0 $U2 inset; 11 | height: $U4; 12 | width: $U4; 13 | left: $U7; 14 | position: absolute; 15 | top: 27%; 16 | } 17 | &:after{ 18 | border-radius: 50%; 19 | transform: translateX(-50%); 20 | @extend .icono-stroke; 21 | border-top-color: transparent; 22 | border-left-color: transparent; 23 | border-right-color: transparent; 24 | height: $U16; 25 | left:50%; 26 | position: absolute; 27 | top: 6%; 28 | width: $U16; 29 | } 30 | } -------------------------------------------------------------------------------- /src/scss/components/prompt.scss: -------------------------------------------------------------------------------- 1 | .vmc-prompt { 2 | .prompt-input{ 3 | padding-top: $PromptInputPadding; 4 | 5 | .error-message { 6 | color: $PromptMessageTextColor; 7 | font-size: $PromptMessageTextSize; 8 | margin-top: $PromptMessageInputSpace; 9 | } 10 | 11 | label { 12 | display: block; 13 | } 14 | 15 | input { 16 | box-sizing: border-box; 17 | border: none; 18 | padding: $PromptInputPadding; 19 | font-size: $PromptInputTextSize; 20 | height: $PromptInputHeight; 21 | width: 100%; 22 | appearance: none; 23 | outline: none; 24 | } 25 | .invalid { 26 | border-color: $PromptInputInvalidColor; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/styles/components/prompt.less: -------------------------------------------------------------------------------- 1 | .vmc-prompt { 2 | .prompt-input{ 3 | padding-top: @PromptInputPadding; 4 | 5 | .error-message { 6 | color: @PromptMessageTextColor; 7 | font-size: @PromptMessageTextSize; 8 | margin-top: @PromptMessageInputSpace; 9 | } 10 | 11 | label { 12 | display: block; 13 | } 14 | 15 | input { 16 | box-sizing: border-box; 17 | border: none; 18 | padding: @PromptInputPadding; 19 | font-size: @PromptInputTextSize; 20 | height: @PromptInputHeight; 21 | width: 100%; 22 | appearance: none; 23 | outline: none; 24 | } 25 | .invalid { 26 | border-color: @PromptInputInvalidColor; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/calendar.scss: -------------------------------------------------------------------------------- 1 | //*-- Calendar --*\\ 2 | .icono-calendar{ 3 | width: $U32; 4 | height: $U28; 5 | border-width: $U4 $U2 $U2; 6 | border-style: solid; 7 | border-radius: $U4; 8 | margin: $U5 $U1 $U1; 9 | &:before{ 10 | position: absolute; 11 | width: $U4; 12 | height: $U4; 13 | top: $U3; 14 | left: $U3; 15 | box-shadow: inset 0 0 0 $U32, $U6 0, $U12 0, $U18 0, 16 | 0 $U6, $U6 $U6, $U12 $U6, $U18 $U6, 17 | 0 $U12, $U6 $U12, $U12 $U12, $U18 $U12; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U4; 22 | height: $U8; 23 | box-shadow: inset 0 0 0 $U32, $U16 0; 24 | border-radius: $U4; 25 | top: -1*$U8; 26 | left: $U4; 27 | } 28 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/arrow.scss: -------------------------------------------------------------------------------- 1 | //* Arrows *\\ 2 | .icono-rightArrow { 3 | width: $U16; 4 | height: $U4; 5 | margin: $U15 $U9; 6 | box-shadow: inset 0 0 0 $U2; 7 | transform: translateX(-1*$U3); 8 | &:before { 9 | @extend .stickCenterV; 10 | border-style: solid; 11 | border-width: $U8 0 $U8 $U8; 12 | border-color: transparent; 13 | border-left-color: inherit; 14 | left: 100%; 15 | right: auto; 16 | } 17 | } 18 | 19 | .icono-leftArrow { 20 | @extend .icono-rightArrow; 21 | transform: translateX($U3) rotate(180deg); 22 | } 23 | 24 | .icono-upArrow { 25 | @extend .icono-rightArrow; 26 | transform: translateY($U3) rotate(-90deg); 27 | } 28 | 29 | .icono-downArrow { 30 | @extend .icono-rightArrow; 31 | transform: translateY(-1*$U3) rotate(90deg); 32 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/arrow.less: -------------------------------------------------------------------------------- 1 | //* Arrows *\\ 2 | .icono-rightArrow { 3 | width: @16; 4 | height: @4; 5 | margin: @15 @9; 6 | box-shadow: inset 0 0 0 @2; 7 | transform: translateX(-@3); 8 | &:before { 9 | &:extend(.stickCenterV); 10 | border-style: solid; 11 | border-width: @8 0 @8 @8; 12 | border-color: transparent; 13 | border-left-color: inherit; 14 | left: 100%; 15 | right: auto; 16 | } 17 | } 18 | 19 | .icono-leftArrow { 20 | &:extend(.icono-rightArrow all); 21 | transform: translateX(@3) rotate(180deg); 22 | } 23 | 24 | .icono-upArrow { 25 | &:extend(.icono-rightArrow all); 26 | transform: translateY(@3) rotate(-90deg); 27 | } 28 | 29 | .icono-downArrow { 30 | &:extend(.icono-rightArrow all); 31 | transform: translateY(-@3) rotate(90deg); 32 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/iphone.less: -------------------------------------------------------------------------------- 1 | //*-- iPhone --*\\ 2 | .icono-iphone{ 3 | width: @19; 4 | height: @31; 5 | &:extend(.icono-stroke); 6 | border-radius: @3; 7 | border-width: @5 @1; 8 | border-color: transparent; 9 | box-shadow: 0 0 0 @1, 0 0 0 @1 inset; 10 | margin: @2 @8 @1 @7; 11 | &:before, &:after{ 12 | &:extend(.stickCenterH); 13 | box-shadow: inset 0 0 0 @32; 14 | } 15 | &:before{ 16 | width: @3; 17 | height: @1; 18 | top: -1*@3; 19 | } 20 | &:after{ 21 | width: @3; 22 | height: @3; 23 | bottom: -1*@4; 24 | border-radius: 50%; 25 | } 26 | } 27 | .icono-iphoneBold{ 28 | width: @20; 29 | height: @32; 30 | margin: @1 @7; 31 | border-radius: @4; 32 | &:extend(.icono-stroke); 33 | border-width: @5 @2; 34 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/book.less: -------------------------------------------------------------------------------- 1 | //*-- Book --*\\ 2 | .icono-book{ 3 | width: @26; 4 | height: @22; 5 | border-radius: 0 0 0 @6; 6 | &:extend(.icono-stroke); 7 | border-top: none; 8 | margin: @10 @4 @2; 9 | &:before{ 10 | position: absolute; 11 | width: @24; 12 | height: @7; 13 | box-sizing: border-box; 14 | &:extend(.icono-stroke); 15 | border-top: none; 16 | border-right: none; 17 | left: -1*@2; 18 | top: -1*@5; 19 | border-radius: 0 0 0 @6; 20 | } 21 | &:after{ 22 | position: absolute; 23 | width: @24; 24 | height: @8; 25 | box-sizing: border-box; 26 | left: -1*@2; 27 | top: -1*@8; 28 | &:extend(.icono-stroke); 29 | border-bottom: none; 30 | border-radius: @6 0 0 0; 31 | } 32 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/iphone.scss: -------------------------------------------------------------------------------- 1 | //*-- iPhone --*\\ 2 | .icono-iphone{ 3 | width: $U19; 4 | height: $U31; 5 | @extend .icono-stroke; 6 | border-radius: $U3; 7 | border-width: $U5 $U1; 8 | border-color: transparent; 9 | box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset; 10 | margin: $U2 $U8 $U1 $U7; 11 | &:before, &:after{ 12 | @extend .stickCenterH; 13 | box-shadow: inset 0 0 0 $U32; 14 | } 15 | &:before{ 16 | width: $U3; 17 | height: $U1; 18 | top: -1*$U3; 19 | } 20 | &:after{ 21 | width: $U3; 22 | height: $U3; 23 | bottom: -1*$U4; 24 | border-radius: 50%; 25 | } 26 | } 27 | .icono-iphoneBold{ 28 | width: $U20; 29 | height: $U32; 30 | margin: $U1 $U7; 31 | border-radius: $U4; 32 | @extend .icono-stroke; 33 | border-width: $U5 $U2; 34 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/youtube.less: -------------------------------------------------------------------------------- 1 | //*-- Youtube --*\\ 2 | .icono-youtube{ 3 | &, &:before{ 4 | border-right-color: transparent; 5 | border-left-color: transparent; 6 | border-radius: @10; 7 | width: @32; 8 | height: @32 / 1.4357; 9 | margin: @6 @1; 10 | } 11 | &:before{ 12 | position: absolute; 13 | top: 0; 14 | right: 0; 15 | bottom: 0; 16 | left: 0; 17 | border-top-color: transparent; 18 | border-bottom-color: transparent; 19 | border-radius: @6 ~'/' @3; 20 | } 21 | &:after{ 22 | width: 0; 23 | height: 0; 24 | &:extend(.stickCenter); 25 | border-width: @4 0 @4 @8; 26 | border-style: solid; 27 | border-top-color: transparent; 28 | border-bottom-color: transparent; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/row/row.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | -------------------------------------------------------------------------------- /src/scss/icono/icons/book.scss: -------------------------------------------------------------------------------- 1 | //*-- Book --*\\ 2 | .icono-book{ 3 | width: $U26; 4 | height: $U22; 5 | border-radius: 0 0 0 $U6; 6 | @extend .icono-stroke; 7 | border-top: none; 8 | margin: $U10 $U4 $U2; 9 | &:before{ 10 | position: absolute; 11 | width: $U24; 12 | height: $U7; 13 | box-sizing: border-box; 14 | @extend .icono-stroke; 15 | border-top: none; 16 | border-right: none; 17 | left: -1*$U2; 18 | top: -1*$U5; 19 | border-radius: 0 0 0 $U6; 20 | } 21 | &:after{ 22 | position: absolute; 23 | width: $U24; 24 | height: $U8; 25 | box-sizing: border-box; 26 | left: -1*$U2; 27 | top: -1*$U8; 28 | @extend .icono-stroke; 29 | border-bottom: none; 30 | border-radius: $U6 0 0 0; 31 | } 32 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/youtube.scss: -------------------------------------------------------------------------------- 1 | //*-- Youtube --*\\ 2 | .icono-youtube{ 3 | border-right-color: transparent; 4 | border-left-color: transparent; 5 | border-radius: $U10; 6 | width: $U32; 7 | height: $U32 / 1.4357; 8 | margin: $U6 $U1; 9 | &, &:before{ 10 | @extend .icono-stroke; 11 | } 12 | &:before{ 13 | position: absolute; 14 | top: 0; 15 | right: 0; 16 | bottom: 0; 17 | left: 0; 18 | border-top-color: transparent; 19 | border-bottom-color: transparent; 20 | border-radius: $U6 #{'/'} $U3; 21 | } 22 | &:after{ 23 | width: 0; 24 | height: 0; 25 | @extend .stickCenter; 26 | border-width: $U4 0 $U4 $U8; 27 | border-style: solid; 28 | border-top-color: transparent; 29 | border-bottom-color: transparent; 30 | } 31 | } -------------------------------------------------------------------------------- /src/components/row/README.md: -------------------------------------------------------------------------------- 1 | # Row 2 | 3 | ## Overview 4 | 5 | 带标题的内容行。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```html 12 | 13 | 14 | 15 | ``` 16 | 17 | ## Slots 18 | 19 | | Name | Description | Default | 20 | | ----- | ----- | ----- | 21 | | default | 在行内显示的内容 | undefined | 22 | 23 | ## Props 24 | 25 | | Property | Type | Description | Default | 26 | | ----- | ----- | ----- | ----- | 27 | | title | String | 标题文本内容 | "" | 28 | | width | Number, String | 标题栏宽度 | 由LESS变量定义 | 29 | | align | String | 对齐方式，如果为left则为左对齐 | 两端对齐 | 30 | 31 | ## LESS 32 | 33 | | Name | Description | Default | 34 | | ----- | ----- | ----- | 35 | | @RowHorizontalPadding | 水平内边距 | @HorizontalPadding | 36 | | @RowBackColor | 背景色 | \#fff | 37 | | @RowMinHeight | 最小高度 | 45px | 38 | | @RowTextSize | 文字大小 | 15px | 39 | | @RowTitleWidth | 标题栏最小宽度 | 80px | -------------------------------------------------------------------------------- /src/styles/icono/variables.less: -------------------------------------------------------------------------------- 1 | @maincolor: #ddd; 2 | @size: 32px; 3 | @stroke: @2 solid; 4 | 5 | @1: ceil(@size/32); 6 | @2: ceil(@size/16); 7 | @3: ceil(@size/12); 8 | @4: ceil(@size/8); 9 | @5: ceil(@size/7); 10 | @6: ceil(@size/5.4); 11 | @7: ceil(@size/4.9); 12 | @8: ceil(@size/4); 13 | @9: ceil(@size/3.7); 14 | @10: ceil(@size/3.2); 15 | @11: ceil(@size/3.1); 16 | @12: ceil(@size/2.7); 17 | @13: ceil(@size/2.5); 18 | @14: ceil(@size/2.3); 19 | @15: ceil(@size/2.2); 20 | @16: ceil(@size/2); 21 | @17: ceil(@size/1.9); 22 | @18: ceil(@size/1.8); 23 | @19: ceil(@size/1.7); 24 | @20: ceil(@size/1.6); 25 | @21: ceil(@size/1.55); 26 | @22: ceil(@size/1.5); 27 | @23: ceil(@size/1.4); 28 | @24: ceil(@size/1.34); 29 | @25: ceil(@size/1.3); 30 | @26: ceil(@size/1.25); 31 | @27: ceil(@size/1.2); 32 | @28: ceil(@size/1.15); 33 | @29: ceil(@size/1.12); 34 | @30: ceil(@size/1.1); 35 | @31: ceil(@size/1.05); 36 | @32: @size; -------------------------------------------------------------------------------- /src/components/textarea/README.md: -------------------------------------------------------------------------------- 1 | # Textarea 2 | 3 | ## Overview 4 | 5 | 增强型文本框，带限制输入字数功能，并实时显示已输入字数。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | ## Props 16 | 17 | | Property | Type | Description | Default | 18 | | ----- | ----- | ----- | ----- | 19 | | value | String | 文本框的值 | "" | 20 | | placeholder | String | 占位字符串 | "" | 21 | | min | Number, String | 最少输入字符数 | 0 | 22 | | max | Number, String | 最多输入字符数 | 99999 | 23 | | rows | Number, String | 文本框显示的行数 | 5 | 24 | | border | Boolean | 是否显示边框 | true | 25 | 26 | ## LESS 27 | 28 | | Name | Description | Default | 29 | | ----- | ----- | ----- | 30 | | @TextAreaPadding | 文本框内边距 | @InputPadding | 31 | | @TextAreaTextSize | 文本框文字大小 | @InputTextSize | 32 | | @TextAreaTipTextSize | 文本框提示区文字大小 | @InputMessageTextSize | 33 | | @TextAreaTipTextColor | 文本框提示区文字颜色 | \#e0e0e0 | -------------------------------------------------------------------------------- /src/styles/icono/generals.less: -------------------------------------------------------------------------------- 1 | .icono-stroke{ 2 | border: @stroke; 3 | } 4 | 5 | .stickCenterV{ 6 | .stickCenterV(); 7 | } 8 | 9 | .stickCenterH{ 10 | .stickCenterH(); 11 | } 12 | 13 | .stickCenter{ 14 | position: absolute; 15 | left: 50%; 16 | top: 50%; 17 | transform: translate(-50%, -50%); 18 | } 19 | 20 | .spin{ 21 | animation: loading-spinner 2s infinite linear; 22 | &.step{ 23 | -webkit-animation: loading-spinner 0.5s steps(8, end) infinite; /* Safari 4+ */ 24 | -moz-animation: loading-spinner 0.5s steps(8, end) infinite; /* Fx 5+ */ 25 | -o-animation: loading-spinner 0.5s steps(8, end) infinite; /* Opera 12+ */ 26 | animation: loading-spinner 0.5s steps(8, end) infinite; /* IE 10+, Fx 29+ */ 27 | } 28 | } 29 | 30 | @keyframes loading-spinner { 31 | 0% { transform: rotate(0deg); } 32 | 100% { transform: rotate(360deg); } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/icono/icons/check.less: -------------------------------------------------------------------------------- 1 | //*-- Check --*\\ 2 | [class*="icono-check"]{ 3 | width: @28; 4 | height: @28; 5 | margin: @3 0 @3 @6; 6 | transform: rotate(-45deg); 7 | &:before, &:after{ 8 | box-shadow: inset 0 0 0 @32; 9 | } 10 | &:before{ 11 | &:extend([class*="icono-plus"]:before); 12 | } 13 | &:after{ 14 | position: absolute; 15 | height: @12; 16 | width: @2; 17 | left: @4; 18 | bottom: @14; 19 | } 20 | &[class*="Circle"]{ 21 | &:extend(.icono-stroke); 22 | border-radius: 50%; 23 | width: @30; 24 | height: @30; 25 | margin: @2; 26 | &:before{ 27 | width: @14; 28 | top: @15; 29 | left: @14; 30 | } 31 | &:after{ 32 | height: @8; 33 | left: @7; 34 | bottom: @10; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/styles/icono/icons/heart.less: -------------------------------------------------------------------------------- 1 | //*-- Heart --*\\ 2 | .icono-heart{ 3 | width: @20; 4 | height: @20; 5 | &:extend(.icono-stroke); 6 | border-top-color: transparent; 7 | border-left-color: transparent; 8 | transform: rotate(45deg); 9 | border-radius: @4 0; 10 | margin: @9 @7 @5; 11 | &:before, &:after{ 12 | position: absolute; 13 | &:extend(.icono-stroke); 14 | } 15 | &:before{ 16 | width: ceil(@20/2.5); 17 | height: ceil(@20*0.69); 18 | left: -1*ceil(@20/2.5)-@2; 19 | bottom: -1*@2; 20 | border-radius: @20 0 0 @20; 21 | border-right-color: transparent; 22 | } 23 | &:after{ 24 | width: ceil(@20*0.69); 25 | height: ceil(@20/2.5); 26 | right: -1*@2; 27 | top: -1*ceil(@20/2.5)-@2; 28 | border-radius: @20 @20 0 0; 29 | border-bottom-color: transparent; 30 | } 31 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/heart.scss: -------------------------------------------------------------------------------- 1 | //*-- Heart --*\\ 2 | .icono-heart{ 3 | width: $U20; 4 | height: $U20; 5 | @extend .icono-stroke; 6 | border-top-color: transparent; 7 | border-left-color: transparent; 8 | transform: rotate(45deg); 9 | border-radius: $U4 0; 10 | margin: $U9 $U7 $U5; 11 | &:before, &:after{ 12 | position: absolute; 13 | @extend .icono-stroke; 14 | } 15 | &:before{ 16 | width: ceil($U20/2.5); 17 | height: ceil($U20*0.69); 18 | left: -1*ceil($U20/2.5)-$U2; 19 | bottom: -1*$U2; 20 | border-radius: $U20 0 0 $U20; 21 | border-right-color: transparent; 22 | } 23 | &:after{ 24 | width: ceil($U20*0.69); 25 | height: ceil($U20/2.5); 26 | right: -1*$U2; 27 | top: -1*ceil($U20/2.5)-$U2; 28 | border-radius: $U20 $U20 0 0; 29 | border-bottom-color: transparent; 30 | } 31 | } -------------------------------------------------------------------------------- /src/styles/icono/mixins.less: -------------------------------------------------------------------------------- 1 | .stickCenter(){ 2 | position: absolute; 3 | left: 50%; 4 | top: 50%; 5 | transform: translate(-50%, -50%); 6 | } 7 | .stickCenterH(){ 8 | position: absolute; 9 | left: 50%; 10 | transform: translateX(-50%); 11 | } 12 | .stickCenterV(){ 13 | position: absolute; 14 | top: 50%; 15 | transform: translateY(-50%); 16 | } 17 | .stickCenter(@top, @right, @bottom, @left){ 18 | position: absolute; 19 | top: @top; 20 | right: @right; 21 | bottom: @bottom; 22 | left: @left; 23 | margin: auto; 24 | } 25 | .square(@length){ 26 | width: @length; height: @length; 27 | } 28 | .goldenRectL(@width){ 29 | width: @width; 30 | height: ceil(@width/1.61803398875); 31 | } 32 | .goldenRectP(@width){ 33 | width: @width; 34 | height: ceil(@width*1.61803398875); 35 | } 36 | .wDiagonal(@length){ 37 | width: ceil(sqrt(2*@length*@length)); 38 | } 39 | .hDiagonal(@length){ 40 | height: ceil(sqrt(2*@length*@length)); 41 | } -------------------------------------------------------------------------------- /src/scss/icono/functions.scss: -------------------------------------------------------------------------------- 1 | //Math functions given from https://github.com/terkel/mathsass 2 | @function sqrt ($x) { 3 | @if $x < 0 { 4 | @warn "Argument for `sqrt()` must be a positive number."; 5 | @return null; 6 | } 7 | $ret: 1; 8 | @for $i from 1 through 24 { 9 | $ret: $ret - (pow($ret, 2) - $x) / (2 * $ret); 10 | } 11 | @return $ret; 12 | } 13 | @function pow ($base, $exp) { 14 | @if $exp == floor($exp) { 15 | $r: 1; 16 | $s: 0; 17 | @if $exp < 0 { 18 | $exp: $exp * -1; 19 | $s: 1; 20 | } 21 | @while $exp > 0 { 22 | @if $exp % 2 == 1 { 23 | $r: $r * $base; 24 | } 25 | $exp: floor($exp * 0.5); 26 | $base: $base * $base; 27 | } 28 | @return if($s != 0, 1 / $r, $r); 29 | } @else { 30 | @return exp(log($base) * $exp); 31 | } 32 | } -------------------------------------------------------------------------------- /src/scss/icono/icons/check.scss: -------------------------------------------------------------------------------- 1 | //*-- Check --*\\ 2 | [class*="icono-check"]{ 3 | width: $U28; 4 | height: $U28; 5 | margin: $U3 0 $U3 $U6; 6 | transform: rotate(-45deg); 7 | &:before, &:after{ 8 | box-shadow: inset 0 0 0 $U32; 9 | } 10 | &:before{ 11 | @extend [class*="icono-plus"]:before; 12 | } 13 | &:after{ 14 | position: absolute; 15 | height: $U12; 16 | width: $U2; 17 | left: $U4; 18 | bottom: $U14; 19 | } 20 | &[class*="Circle"]{ 21 | @extend .icono-stroke; 22 | border-radius: 50%; 23 | width: $U30; 24 | height: $U30; 25 | margin: $U2; 26 | &:before{ 27 | width: $U14; 28 | top: $U15; 29 | left: $U14; 30 | } 31 | &:after{ 32 | height: $U8; 33 | left: $U7; 34 | bottom: $U10; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/utils/env.js: -------------------------------------------------------------------------------- 1 | const ua = window.navigator.userAgent; 2 | const env = {}; 3 | Object.defineProperties(env, { 4 | isAndroid: { 5 | get() { 6 | return /Android/i.test(ua); 7 | } 8 | }, 9 | isIphone: { 10 | get() { 11 | return /iphone/i.test(ua); 12 | } 13 | }, 14 | isIPad: { 15 | get() { 16 | return /ipad/i.test(ua) 17 | } 18 | }, 19 | isIOS: { 20 | get() { 21 | return /iphone|ipad|ipod/i.test(ua); 22 | } 23 | }, 24 | isWechat: { 25 | get() { 26 | return /MicroMessenger/i.test(ua); 27 | } 28 | }, 29 | isAlipay: { 30 | get() { 31 | return /Alipay/i.test(ua); 32 | } 33 | }, 34 | isUCBrowser: { 35 | get() { 36 | return /UCWEB|UCBrowser/i.test(ua); 37 | } 38 | } 39 | }); 40 | 41 | export default env; -------------------------------------------------------------------------------- /src/components/cell/README.md: -------------------------------------------------------------------------------- 1 | # Cell 2 | 3 | ## Overview 4 | 5 | 带箭头指示的内容行。 6 | 7 | 是否全局组件：否。 8 | 9 | ## Usage 10 | 11 | ```html 12 | dialog 13 | ``` 14 | 15 | ## Slots 16 | 17 | | Name | Description | Default | 18 | | ----- | ----- | ----- | 19 | | default | 显示的文本内容 | {{title}} | 20 | | arrow | 箭头图标 | <i class="icono-caretRight"></i> | 21 | 22 | ## Props 23 | 24 | | Property | Type | Description | Default | 25 | | ----- | ----- | ----- | ----- | 26 | | title | String | 显示的文本内容 | "" | 27 | | arrow | Boolean | 是否显示箭头 | true | 28 | 29 | ## LESS 30 | 31 | | Name | Description | Default | 32 | | ----- | ----- | ----- | 33 | | @CellBackColor | 背景颜色 | \#fff | 34 | | @CellMinHeight | 最小高度 | 45px | 35 | | @CellHorizontalPadding | 水平内边距 | @HorizontalPadding | 36 | | @CellIconTextSpace | 左图标与文字之间的距离 | 15px | 37 | | @CellArrowColor | 右箭头的颜色 | \#cecece | 38 | | @CellArrowScale | 右箭头的缩放比例 | 0.8 | 39 | | @CellTextSize | 文字大小 | 15px | -------------------------------------------------------------------------------- /src/components/popup-date-picker/popup-date-picker.vue: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /src/components/confirm/README.md: -------------------------------------------------------------------------------- 1 | # Confirm 2 | 3 | ## Overview 4 | 5 | 弹出确认框，显示指定内容。 6 | 7 | 是否全局组件：是。 8 | 9 | ## Usage 10 | 11 | ```javascript 12 | export default { 13 | ready() { 14 | this.$Confirm('confirm提示框', () => { 15 | this.$Alert('你点击了确定按钮'); 16 | }, () => { 17 | this.$Alert('你点击了取消按钮'); 18 | }); 19 | } 20 | } 21 | ``` 22 | 23 | ## Arguments 24 | 25 | | Name | Type | Description | Default | 26 | | ----- | ----- | ----- | ----- | 27 | | title | String | 弹框提示内容(可省) | "" | 28 | | confirm | Function | 点击确定时的回调函数(可省) | null | 29 | | cancel | Function | 点击取消时的回调函数(可省) | null | 30 | | options | Object | 其它配置参数 | {title: "", content: "", confirm: null, cancel: null, btn1: "取消", btn2: "确定"} | 31 | 32 | ## LESS 33 | 34 | | Name | Description | Default | 35 | | ----- | ----- | ----- | 36 | | @ConfirmTitleHeight | 标题栏最小高度 | @AlertTitleHeight | 37 | | @ConfirmTitlePadding | 标题底边距 | @AlertTitlePadding | -------------------------------------------------------------------------------- /src/styles/icono/icons/macbook.less: -------------------------------------------------------------------------------- 1 | //*-- Macbook --*\\ 2 | .icono-macbook{ 3 | width: @32; 4 | height: @2; 5 | box-shadow: inset 0 0 0 @32; 6 | border-radius: 0 0 @32 @32 ~'/' @3; 7 | margin: @25 @1 @7 @1; 8 | &:before{ 9 | width: @20; 10 | height: @14; 11 | &:extend(.icono-stroke); 12 | &:extend(.stickCenterH); 13 | bottom: @2; 14 | border-width: @3 @1 @1 @1; 15 | border-color: transparent; 16 | border-radius: @3 @3 0 0; 17 | box-shadow: 0 0 0 @1, 0 0 0 @1 inset; 18 | } 19 | } 20 | .icono-macbookBold{ 21 | width: @32; 22 | height: @2; 23 | box-shadow: inset 0 0 0 @32; 24 | margin: @25 @1 @7 @1; 25 | &:before{ 26 | width: @20; 27 | height: @14; 28 | &:extend(.stickCenterH); 29 | bottom: @2; 30 | &:extend(.icono-stroke); 31 | border-width: @3 @2 @1; 32 | border-radius: @3 @3 0 0; 33 | } 34 | } -------------------------------------------------------------------------------- /examples/pages/components/textarea.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | 38 | -------------------------------------------------------------------------------- /src/scss/icono/variables.scss: -------------------------------------------------------------------------------- 1 | $maincolor: #ddd; 2 | $size: 32px;//pixel for this version 3 | 4 | 5 | $U1: ceil($size/32); 6 | $U2: ceil($size/16); 7 | $U3: ceil($size/12); 8 | $U4: ceil($size/8); 9 | $U5: ceil($size/7); 10 | $U6: ceil($size/5.4); 11 | $U7: ceil($size/4.9); 12 | $U8: ceil($size/4); 13 | $U9: ceil($size/3.7); 14 | $U10: ceil($size/3.2); 15 | $U11: ceil($size/3.1); 16 | $U12: ceil($size/2.7); 17 | $U13: ceil($size/2.5); 18 | $U14: ceil($size/2.3); 19 | $U15: ceil($size/2.2); 20 | $U16: ceil($size/2); 21 | $U17: ceil($size/1.9); 22 | $U18: ceil($size/1.8); 23 | $U19: ceil($size/1.7); 24 | $U20: ceil($size/1.6); 25 | $U21: ceil($size/1.55); 26 | $U22: ceil($size/1.5); 27 | $U23: ceil($size/1.4); 28 | $U24: ceil($size/1.34); 29 | $U25: ceil($size/1.3); 30 | $U26: ceil($size/1.25); 31 | $U27: ceil($size/1.2); 32 | $U28: ceil($size/1.15); 33 | $U29: ceil($size/1.12); 34 | $U30: ceil($size/1.1); 35 | $U31: ceil($size/1.05); 36 | $U32: $size; 37 | 38 | $stroke: $U2 solid; -------------------------------------------------------------------------------- /src/components/spinner/spinner/snake.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/scss/icono/icons/macbook.scss: -------------------------------------------------------------------------------- 1 | //*-- Macbook --*\\ 2 | .icono-macbook{ 3 | width: $U32; 4 | height: $U2; 5 | box-shadow: inset 0 0 0 $U32; 6 | border-radius: 0 0 $U32 $U32 #{'/'} $U3; 7 | margin: $U25 $U1 $U7 $U1; 8 | &:before{ 9 | width: $U20; 10 | height: $U14; 11 | @extend .icono-stroke; 12 | @extend .stickCenterH; 13 | bottom: $U2; 14 | border-width: $U3 $U1 $U1 $U1; 15 | border-color: transparent; 16 | border-radius: $U3 $U3 0 0; 17 | box-shadow: 0 0 0 $U1, 0 0 0 $U1 inset; 18 | } 19 | } 20 | .icono-macbookBold{ 21 | width: $U32; 22 | height: $U2; 23 | box-shadow: inset 0 0 0 $U32; 24 | margin: $U25 $U1 $U7 $U1; 25 | &:before{ 26 | width: $U20; 27 | height: $U14; 28 | @extend .stickCenterH; 29 | bottom: $U2; 30 | @extend .icono-stroke; 31 | border-width: $U3 $U2 $U1; 32 | border-radius: $U3 $U3 0 0; 33 | } 34 | } -------------------------------------------------------------------------------- /src/scss/components/tabbar.scss: -------------------------------------------------------------------------------- 1 | .vmc-tab-bar { 2 | position: absolute; 3 | bottom: 0; 4 | width: 100%; 5 | z-index: 50; 6 | height: $TabbarHeight; 7 | 8 | .tab-bar { 9 | display: flex; 10 | width: 100%; 11 | height: 100%; 12 | color: $TabbarTextColor; 13 | background-color: $TabbarBackColor; 14 | font-size: $TabbarTextSize; 15 | } 16 | 17 | .tab-item { 18 | flex: 1; 19 | width: 0%; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | 25 | &.active { 26 | color: $TabbarTextActiveColor; 27 | } 28 | 29 | * { 30 | display: block; 31 | } 32 | } 33 | 34 | &-up-enter-active, &-up-leave-active { 35 | transition: transform .2s linear; 36 | } 37 | 38 | &-up-enter, &-up-leave-active { 39 | transform: translate3d(0, 100%, 0); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/components/tabbar.less: -------------------------------------------------------------------------------- 1 | .vmc-tab-bar { 2 | position: absolute; 3 | bottom: 0; 4 | width: 100%; 5 | z-index: 50; 6 | height: @TabbarHeight; 7 | 8 | .tab-bar { 9 | display: flex; 10 | width: 100%; 11 | height: 100%; 12 | color: @TabbarTextColor; 13 | background-color: @TabbarBackColor; 14 | font-size: @TabbarTextSize; 15 | } 16 | 17 | .tab-item { 18 | flex: 1; 19 | width: 0%; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | 25 | &.active { 26 | color: @TabbarTextActiveColor; 27 | } 28 | 29 | * { 30 | display: block; 31 | } 32 | } 33 | 34 | &-up-enter-active, &-up-leave-active { 35 | transition: transform .2s linear; 36 | } 37 | 38 | &-up-enter, &-up-leave-active { 39 | transform: translate3d(0, 100%, 0); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/icono/icons/exclamation.less: -------------------------------------------------------------------------------- 1 | //*-- Exclamation --*\\ 2 | [class*="icono-exclamation"]{ 3 | overflow: visible; 4 | width: @30; 5 | border-bottom: @2 solid; 6 | border-radius: 0 0 @4 @4; 7 | margin: @26 @2 @6; 8 | &:before{ 9 | position: absolute; 10 | width: @26; 11 | height: @26; 12 | left: @1; 13 | top: -1*@14; 14 | border-width: @2 0 0 @2; 15 | border-style: solid; 16 | border-radius: @4 0; 17 | transform: rotate(45deg) skew(12deg, 12deg); 18 | } 19 | &:after{ 20 | width: @4; 21 | height: @3; 22 | top: -1*@14; 23 | &:extend(.stickCenterH); 24 | box-shadow: inset 0 0 0 @32, 0 @3, 0 @8; 25 | } 26 | &[class*="Circle"]{ 27 | margin: @2; 28 | &:before{ 29 | display: none; 30 | } 31 | &:after{ 32 | box-shadow: inset 0 0 0 @32, 0 @3, 0 @5, 0 @10; 33 | top: @6; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /examples/pages/components/shake.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/scss/icono/icons/exclamation.scss: -------------------------------------------------------------------------------- 1 | //*-- Exclamation --*\\ 2 | [class*="icono-exclamation"]{ 3 | overflow: visible; 4 | width: $U30; 5 | border-bottom: $U2 solid; 6 | border-radius: 0 0 $U4 $U4; 7 | margin: $U26 $U2 $U6; 8 | &:before{ 9 | position: absolute; 10 | width: $U26; 11 | height: $U26; 12 | left: $U1; 13 | top: -1*$U14; 14 | border-width: $U2 0 0 $U2; 15 | border-style: solid; 16 | border-radius: $U4 0; 17 | transform: rotate(45deg) skew(12deg, 12deg); 18 | } 19 | &:after{ 20 | width: $U4; 21 | height: $U3; 22 | top: -1*$U14; 23 | @extend .stickCenterH; 24 | box-shadow: inset 0 0 0 $U32, 0 $U3, 0 $U8; 25 | } 26 | &[class*="Circle"]{ 27 | height: $U30; 28 | margin: $U2; 29 | &:before{ 30 | display: none; 31 | } 32 | &:after{ 33 | box-shadow: inset 0 0 0 $U32, 0 $U3, 0 $U5, 0 $U10; 34 | top: $U6; 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /src/styles/icono/icono.less: -------------------------------------------------------------------------------- 1 | // Welcome to Iconode 2 | // You can use this file in your project instead of .css file, and build it with other your less files. 3 | 4 | @import "variables"; 5 | @import "mixins"; 6 | @import "generals"; 7 | @import "icons"; 8 | 9 | [class*="icono-"] { 10 | display: inline-block; 11 | vertical-align: middle; 12 | position: relative; 13 | font-style: normal; 14 | //color: @maincolor; // No default color 15 | text-align: left; 16 | text-indent: -9999px; 17 | direction: ltr; 18 | &:before, &:after{ 19 | content:''; 20 | pointer-events: none; 21 | } 22 | &[class*="Circle"]{ 23 | &:extend(.icono-stroke); 24 | border-radius: 50%; 25 | width: @30; 26 | height: @30; 27 | margin: @2; 28 | } 29 | &[class*="Square"]{ 30 | &:extend(.icono-stroke); 31 | border-radius: @4; 32 | width: @30; 33 | height: @30; 34 | margin: @2; 35 | } 36 | &, & *{ 37 | box-sizing: border-box; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/cell/cell.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 38 | -------------------------------------------------------------------------------- /src/components/overlay/README.md: -------------------------------------------------------------------------------- 1 | # Overlay 2 | 3 | ## Overview 4 | 5 | 遮罩层，用于阻挡一切用户操作。 6 | 7 | > 因为vue2.0版本会对mask标签报警告，所以改名为overlay，其它并未变化。 8 | 9 | 是否全局组件：否。 10 | 11 | ## Usage 12 | 13 | ```html 14 | 15 | ``` 16 | 17 | ```javascript 18 | export default { 19 | props: { 20 | show: Boolean, 21 | hideOnMask: { 22 | default: true 23 | } 24 | }, 25 | methods: { 26 | _onMaskClick() { 27 | if (this.hideOnMask) { 28 | this.show = false; 29 | } 30 | } 31 | } 32 | } 33 | ``` 34 | 35 | ## Props 36 | 37 | | Property | Type | Description | Default | 38 | | ----- | ----- | ----- | ----- | 39 | | transparent | Boolean | 是否透明 | false | 40 | 41 | ## Events 42 | 43 | | Name | Description | Arguments | 44 | | ----- | ----- | ----- | 45 | | on-click | 当点击时触发 | undefined | 46 | 47 | ## LESS 48 | 49 | | Name | Description | Default | 50 | | ----- | ----- | ----- | 51 | | @MaskBackColor | 背景色 | rgba(0, 0, 0, .4) | 52 | -------------------------------------------------------------------------------- /src/components/alert/install.js: -------------------------------------------------------------------------------- 1 | import Alert from './'; 2 | 3 | export default configs => { 4 | configs.children.push('alert'); 5 | configs.components.Alert = Alert; 6 | 7 | return (Vue, vm) => { 8 | var opts = { 9 | title: '', 10 | content: '', 11 | callback: null, 12 | button: '确定' 13 | }; 14 | 15 | Vue.prototype.$Alert = (title, callback, options) => { 16 | if (typeof title === 'string') { 17 | options = options || {}; 18 | options.title = title; 19 | } else if (typeof title === 'object') { 20 | options = title; 21 | } 22 | 23 | if (typeof callback === 'function') { 24 | options = options || {}; 25 | options.callback = callback; 26 | } else if (typeof callback === 'object') { 27 | options = Object.assign(options, callback); 28 | } 29 | 30 | vm.$refs.alert._show(Object.assign({}, opts, options)); 31 | }; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/icono/icono.scss: -------------------------------------------------------------------------------- 1 | // Welcome to Iconode 2 | // You can use this file in your project instead of .css file, and build it with other your less files. 3 | 4 | @import "variables"; 5 | @import "mixins"; 6 | @import "functions"; 7 | @import "generals"; 8 | @import "icons"; 9 | 10 | [class*="icono-"] { 11 | display: inline-block; 12 | vertical-align: middle; 13 | position: relative; 14 | font-style: normal; 15 | //color: $maincolor; // No default color 16 | text-align: left; 17 | text-indent: -9999px; 18 | direction: ltr; 19 | &:before, &:after{ 20 | content:''; 21 | pointer-events: none; 22 | } 23 | &[class*="Circle"]{ 24 | @extend .icono-stroke; 25 | border-radius: 50%; 26 | width: $U30; 27 | height: $U30; 28 | margin: $U2; 29 | } 30 | &[class*="Square"]{ 31 | @extend .icono-stroke; 32 | border-radius: $U4; 33 | width: $U30; 34 | height: $U30; 35 | margin: $U2; 36 | } 37 | &, & *{ 38 | box-sizing: border-box; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /docs/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 演示 17 | 18 | 19 |
20 | 按钮 21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /examples/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 演示 17 | 18 | 19 |
20 | 按钮 21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/styles/icono/icons/comment.less: -------------------------------------------------------------------------------- 1 | //*-- Comment --*\\ 2 | .icono-commentEmpty{ 3 | width: @30; 4 | height: @22; 5 | &:extend(.icono-stroke); 6 | border-radius: @4 @4 @7 @7; 7 | border-bottom-color: transparent; 8 | margin: @5 @2 @7; 9 | &:before{ 10 | position: absolute; 11 | width: @6; 12 | height: @6; 13 | border-width: 0 0 @2 @2; 14 | border-style: solid; 15 | transform: rotate(-45deg); 16 | bottom: -1*@4; 17 | left: @6; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: @8; 22 | height: @2; 23 | border-width: 0 @12 0 @6; 24 | border-style: solid; 25 | bottom: 0; 26 | left: 0; 27 | } 28 | } 29 | .icono-comment{ 30 | width: @30; 31 | height: @20; 32 | box-shadow: inset 0 0 0 @32; 33 | border-radius: @4; 34 | margin: @5 @2 @9; 35 | &:before{ 36 | position: absolute; 37 | width: @8; 38 | height: @8; 39 | box-shadow: inset 0 0 0 @32; 40 | transform: rotate(-45deg); 41 | bottom: -1*@4; 42 | left: @6; 43 | } 44 | } -------------------------------------------------------------------------------- /examples/pages/components/tabbar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 40 | -------------------------------------------------------------------------------- /src/scss/icono/icons/comment.scss: -------------------------------------------------------------------------------- 1 | //*-- Comment --*\\ 2 | .icono-commentEmpty{ 3 | width: $U30; 4 | height: $U22; 5 | @extend .icono-stroke; 6 | border-radius: $U4 $U4 $U7 $U7; 7 | border-bottom-color: transparent; 8 | margin: $U5 $U2 $U7; 9 | &:before{ 10 | position: absolute; 11 | width: $U6; 12 | height: $U6; 13 | border-width: 0 0 $U2 $U2; 14 | border-style: solid; 15 | transform: rotate(-45deg); 16 | bottom: -1*$U4; 17 | left: $U6; 18 | } 19 | &:after{ 20 | position: absolute; 21 | width: $U8; 22 | height: $U2; 23 | border-width: 0 $U12 0 $U6; 24 | border-style: solid; 25 | bottom: 0; 26 | left: 0; 27 | } 28 | } 29 | .icono-comment{ 30 | width: $U30; 31 | height: $U20; 32 | box-shadow: inset 0 0 0 $U32; 33 | border-radius: $U4; 34 | margin: $U5 $U2 $U9; 35 | &:before{ 36 | position: absolute; 37 | width: $U8; 38 | height: $U8; 39 | box-shadow: inset 0 0 0 $U32; 40 | transform: rotate(-45deg); 41 | bottom: -1*$U4; 42 | left: $U6; 43 | } 44 | } -------------------------------------------------------------------------------- /src/components/toggle/toggle.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 40 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | require('./polyfill'); 2 | 3 | export const url = require('./url'); 4 | export const env = require('./env').default; 5 | export const device = require('./device'); 6 | export const script = require('./script'); 7 | 8 | export const getType = function(obj) { 9 | if (obj === null || obj === undefined) return String(obj); 10 | 11 | var type = typeof obj; 12 | if (type !== 'object') return type; 13 | 14 | type = Object.prototype.toString.call(obj); 15 | type = type.substring(8, type.length - 1); 16 | return type.toLowerCase(); 17 | }; 18 | 19 | export const isType = function(obj, type) { 20 | return getType(obj) === type; 21 | }; 22 | 23 | export const isNumeric = function(n) { 24 | return !Array.isArray(n) && !isNaN(parseFloat(n)) && isFinite(n); 25 | }; 26 | 27 | export const isCSSSize = function(value) { 28 | return /[0-9.]+\s*(px|in|cm|mm|em|rem|pt|pc|ex|ch|vw|vh|vmin|vmax|%)\s*$/.test(value); 29 | }; 30 | 31 | export const getCSSSize = function(value) { 32 | if (isCSSSize(value)) { 33 | return value; 34 | } else if (isNumeric(value)) { 35 | return value + 'px'; 36 | } else { 37 | return value; 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /src/scss/components/dialog.scss: -------------------------------------------------------------------------------- 1 | .vmc-dialog { 2 | position: absolute; 3 | z-index: 500; 4 | width: $DialogWidth; 5 | top: 50%; 6 | left: 50%; 7 | transform: translate(-50%, -50%); 8 | background-color: $DialogBackColor; 9 | text-align: center; 10 | border-radius: $DialogRadius; 11 | overflow: hidden; 12 | 13 | .dialog-head { 14 | padding: $DialogHeaderPadding; 15 | font-weight: 400; 16 | font-size: $DialogHeaderTextSize; 17 | } 18 | 19 | .dialog-body { 20 | padding: $DialogContentPadding; 21 | font-size: $DialogContentTextSize; 22 | word-wrap: break-word; 23 | word-break: break-all; 24 | text-align: left; 25 | } 26 | 27 | .dialog-foot { 28 | line-height: $DialogFooterHeight; 29 | font-size: $DialogFooterTextSize; 30 | display: flex; 31 | 32 | span { 33 | display: block; 34 | flex: 1; 35 | width: 0%; 36 | 37 | &.primary { 38 | color: $DialogPrimaryColor; 39 | } 40 | 41 | &.default { 42 | color: $DialogDefaultColor; 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /src/components/spinner/spinner/fading-circle.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 38 | -------------------------------------------------------------------------------- /src/styles/components/dialog.less: -------------------------------------------------------------------------------- 1 | .vmc-dialog { 2 | position: absolute; 3 | z-index: 500; 4 | width: @DialogWidth; 5 | top: 50%; 6 | left: 50%; 7 | transform: translate(-50%, -50%); 8 | background-color: @DialogBackColor; 9 | text-align: center; 10 | border-radius: @DialogRadius; 11 | overflow: hidden; 12 | 13 | .dialog-head { 14 | padding: @DialogHeaderPadding; 15 | font-weight: 400; 16 | font-size: @DialogHeaderTextSize; 17 | } 18 | 19 | .dialog-body { 20 | padding: @DialogContentPadding; 21 | font-size: @DialogContentTextSize; 22 | word-wrap: break-word; 23 | word-break: break-all; 24 | text-align: left; 25 | } 26 | 27 | .dialog-foot { 28 | line-height: @DialogFooterHeight; 29 | font-size: @DialogFooterTextSize; 30 | display: flex; 31 | 32 | span { 33 | display: block; 34 | flex: 1; 35 | width: 0%; 36 | 37 | &.primary { 38 | color: @DialogPrimaryColor; 39 | } 40 | 41 | &.default { 42 | color: @DialogDefaultColor; 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import Router from 'vue-router'; 4 | import VMC from 'vmc/install'; 5 | 6 | if (process.env.NODE_ENV === 'development') { 7 | Vue.config.productionTip = false; // 关闭生产提示 8 | 9 | var log = console.log; 10 | console.log = function() { 11 | var args = Array.from(arguments); 12 | args = args.map(arg => { 13 | try{ 14 | return JSON.parse(JSON.stringify(arg)); 15 | } catch (e) { 16 | return arg; 17 | } 18 | }); 19 | 20 | log.apply(console, args); 21 | }; 22 | 23 | console.print = log; 24 | 25 | // 比vConsole功能略牛的调试工具 26 | require('eruda').init(); 27 | } 28 | 29 | Vue.use(Router); 30 | Vue.use(VMC); 31 | 32 | import routes from './pages/routes'; 33 | var router = new Router({ routes }); 34 | 35 | router.beforeEach((t, f, next) => { 36 | if (t.meta.doc_title) { 37 | window.document.title = t.meta.doc_title; 38 | } 39 | 40 | next(); 41 | }); 42 | 43 | new Vue({ 44 | el: '#app', 45 | router, 46 | render: h => h(App) 47 | }); 48 | 49 | 50 | var attachFastClick = require('fastclick'); 51 | attachFastClick.attach(document.body); 52 | -------------------------------------------------------------------------------- /src/scss/components/marquee.scss: -------------------------------------------------------------------------------- 1 | .vmc-marquee { 2 | height: $MarqueeHeight; 3 | background: $MarqueeBackColor; 4 | color: $MarqueeTextColor; 5 | position: relative; 6 | overflow-y: hidden; 7 | 8 | .marquee-line { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | display: flex; 15 | align-items: center; 16 | font-size: $MarqueeTextSize; 17 | 18 | [class*="icono-"] { 19 | transform: scale($MarqueeIconScale); 20 | } 21 | 22 | > p, > i { 23 | display: block; 24 | } 25 | 26 | &.left { 27 | justify-content: flex-start; 28 | } 29 | 30 | &.center { 31 | justify-content: center; 32 | } 33 | 34 | &.right { 35 | justify-content: flex-end; 36 | } 37 | } 38 | 39 | &-up-enter-active, &-up-leave-active, &-down-enter-active, &-down-leave-active { 40 | transition: all $MarqueeTransitionDuration ease; 41 | } 42 | 43 | &-up-enter, &-down-leave-active { 44 | transform: translate3d(0, 100%, 0); 45 | } 46 | 47 | &-up-leave-active, &-down-enter { 48 | transform: translate3d(0, -100%, 0); 49 | } 50 | } -------------------------------------------------------------------------------- /src/styles/components/marquee.less: -------------------------------------------------------------------------------- 1 | .vmc-marquee { 2 | height: @MarqueeHeight; 3 | background: @MarqueeBackColor; 4 | color: @MarqueeTextColor; 5 | position: relative; 6 | overflow-y: hidden; 7 | 8 | .marquee-line { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | display: flex; 15 | align-items: center; 16 | font-size: @MarqueeTextSize; 17 | 18 | [class*="icono-"] { 19 | transform: scale(@MarqueeIconScale); 20 | } 21 | 22 | > p, > i { 23 | display: block; 24 | } 25 | 26 | &.left { 27 | justify-content: flex-start; 28 | } 29 | 30 | &.center { 31 | justify-content: center; 32 | } 33 | 34 | &.right { 35 | justify-content: flex-end; 36 | } 37 | } 38 | 39 | &-up-enter-active, &-up-leave-active, &-down-enter-active, &-down-leave-active { 40 | transition: all @MarqueeTransitionDuration ease; 41 | } 42 | 43 | &-up-enter, &-down-leave-active { 44 | transform: translate3d(0, 100%, 0); 45 | } 46 | 47 | &-up-leave-active, &-down-enter { 48 | transform: translate3d(0, -100%, 0); 49 | } 50 | } -------------------------------------------------------------------------------- /src/components/spinner/spinner/triple-bounce.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 42 | -------------------------------------------------------------------------------- /examples/assets/css/transition.css: -------------------------------------------------------------------------------- 1 | /*翻页*/ 2 | @keyframes slideRightToCenter { 3 | from { 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | to { 7 | transform: translate3d(0%, 0, 0); 8 | } 9 | } 10 | @keyframes slideCenterToLeft { 11 | from { 12 | transform: translate3d(0, 0, 0); 13 | } 14 | to { 15 | transform: translate3d(-60%, 0, 0); 16 | } 17 | } 18 | 19 | @keyframes slideLeftToCenter { 20 | from { 21 | transform: translate3d(-60%, 0, 0); 22 | } 23 | to { 24 | transform: translate3d(0, 0, 0); 25 | } 26 | } 27 | @keyframes slideCenterToRight { 28 | from { 29 | transform: translate3d(0, 0, 0); 30 | } 31 | to { 32 | transform: translate3d(100%, 0, 0); 33 | } 34 | } 35 | 36 | .forward-enter, 37 | .back-enter { 38 | will-change: transform; 39 | } 40 | 41 | .forward-enter-active { 42 | animation: slideRightToCenter .4s forwards; 43 | } 44 | .forward-leave-active { 45 | animation: slideCenterToLeft .4s forwards; 46 | } 47 | 48 | .back-enter-active { 49 | animation: slideLeftToCenter .4s forwards; 50 | } 51 | .back-leave-active { 52 | animation: slideCenterToRight .4s forwards; 53 | } 54 | 55 | .forward-enter-active, 56 | .back-leave-active { 57 | z-index: 1 !important; 58 | } 59 | -------------------------------------------------------------------------------- /examples/pages/components/box.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 29 | 30 | 51 | -------------------------------------------------------------------------------- /src/components/toast/install.js: -------------------------------------------------------------------------------- 1 | import Toast from './'; 2 | 3 | export default configs => { 4 | configs.children.push('toast'); 5 | configs.components.Toast = Toast; 6 | 7 | return (Vue, vm) => { 8 | Vue.prototype.$Loading = (text, second) => { 9 | var options = { 10 | type: 'loading', 11 | content: text || '', 12 | second: second 13 | }; 14 | 15 | vm.$refs.toast._show(options); 16 | }; 17 | 18 | Vue.prototype.$Loading.done = () => { 19 | vm.$refs.toast._hide(); 20 | }; 21 | 22 | ['success', 'error', 'info', 'toast'].forEach(key => { 23 | var name = '$' + key.replace(/^([a-z])/, $1 => $1.toUpperCase()); 24 | 25 | Vue.prototype[name] = (text, second, position) => { 26 | if (typeof second === 'string') { 27 | position = second; 28 | second = 2; 29 | } 30 | 31 | var options = { 32 | type: key, 33 | content: text || '', 34 | second: second || 2, 35 | position: position 36 | }; 37 | 38 | vm.$refs.toast._show(options); 39 | } 40 | }); 41 | } 42 | } --------------------------------------------------------------------------------