├── static ├── .gitkeep ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── fog.jpg │ ├── me.jpg │ ├── wn8.png │ ├── x.jpg │ ├── excel.png │ ├── grid2.jpg │ ├── group.png │ ├── halo.jpg │ ├── home.png │ ├── jolie.jpg │ ├── live1.jpg │ ├── live2.jpg │ ├── obama.jpg │ ├── power.png │ ├── rain.jpg │ ├── round.png │ ├── sleet.jpg │ ├── snow.jpg │ ├── user.png │ ├── vin_d.jpg │ ├── wind.jpg │ ├── word.png │ ├── x-box.png │ ├── access.png │ ├── bd-rom.png │ ├── clouds2.png │ ├── cloudy.jpg │ ├── css-logo.png │ ├── disk-sys.png │ ├── flags │ │ ├── ak.png │ │ ├── al.png │ │ ├── ar.png │ │ ├── az.png │ │ ├── ca.png │ │ ├── co.png │ │ ├── ct.png │ │ ├── de.png │ │ ├── fl.png │ │ ├── ga.png │ │ ├── hi.png │ │ ├── ia.png │ │ ├── id.png │ │ ├── il.png │ │ ├── in.png │ │ ├── ks.png │ │ ├── ky.png │ │ ├── la.png │ │ ├── ma.png │ │ ├── md.png │ │ ├── me.png │ │ ├── mi.png │ │ ├── mn.png │ │ ├── mo.png │ │ ├── ms.png │ │ ├── mt.png │ │ ├── nc.png │ │ ├── nd.png │ │ ├── ne.png │ │ ├── nh.png │ │ ├── nj.png │ │ ├── nm.png │ │ ├── nv.png │ │ ├── ny.png │ │ ├── oh.png │ │ ├── ok.png │ │ ├── or.png │ │ ├── pa.png │ │ ├── ri.png │ │ ├── sc.png │ │ ├── sd.png │ │ ├── tn.png │ │ ├── tx.png │ │ ├── ut.png │ │ ├── va.png │ │ ├── vt.png │ │ ├── wa.png │ │ ├── wi.png │ │ ├── wv.png │ │ └── wy.png │ ├── location.png │ ├── me_150.jpg │ ├── myface.jpg │ ├── onenote.png │ ├── org-01.png │ ├── outlook.png │ ├── spface.jpg │ ├── spface2.jpg │ ├── Checkmark.png │ ├── bizspark_b.png │ ├── clear-day.jpg │ ├── hard-drive.png │ ├── icon-minus.png │ ├── icon-plus.png │ ├── jeki_chan.jpg │ ├── jetbrains.png │ ├── powerpoint.png │ ├── whats-new.jpg │ ├── Blank_Folder.png │ ├── Calendar-Next.png │ ├── Crysis-2-icon.png │ ├── Folder-Rename.png │ ├── MSFT_logo_png.png │ ├── Notebook-Save.png │ ├── WorldofTanks.png │ ├── bizspark_b_2.png │ ├── clear-night.jpg │ ├── folder-images.png │ ├── folder-music.png │ ├── folder-videos.png │ ├── jek_vorobey.jpg │ ├── photo_album.png │ ├── shvarcenegger.jpg │ ├── toggle-minus.png │ ├── zadorozhnyi.jpg │ ├── phpstorm_7_eap.png │ ├── Battlefield_4_Icon.png │ ├── Metro_unior_100x20.png │ ├── folder-documents.png │ ├── folder-downloads.png │ ├── folder_with_file.png │ ├── partly-cloudy-day.jpg │ ├── Metro_author_100x20.png │ ├── Metro_member_100x20.png │ ├── Metro_moster_100x20.png │ └── partly-cloudy-night.jpg ├── img │ ├── avatar.jpg │ ├── icon │ │ ├── doc.png │ │ ├── baidu.png │ │ ├── demo.png │ │ ├── github.png │ │ ├── kyzg.png │ │ ├── win10.png │ │ ├── blogger.png │ │ ├── download.png │ │ └── website.png │ ├── windows.ico │ ├── presentation │ │ ├── 1.png │ │ ├── donation.jpg │ │ ├── bluescreen.jpg │ │ └── wangyiyun.gif │ └── wallpapers │ │ ├── login.jpg │ │ ├── main.jpg │ │ └── mobile.jpg ├── font-awesome-4.7.0 │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 ├── layer-v3.0.3 │ └── layer │ │ ├── skin │ │ └── default │ │ │ ├── icon.png │ │ │ ├── icon-ext.png │ │ │ ├── loading-0.gif │ │ │ ├── loading-1.gif │ │ │ └── loading-2.gif │ │ └── mobile │ │ ├── layer.js │ │ └── need │ │ └── layer.css ├── config.js ├── js │ └── win10.child.js └── json │ ├── menu-item.json │ └── shortcut.json ├── src ├── assets │ ├── logo.png │ ├── less │ │ ├── clock.less │ │ ├── metro-icons-mixins.less │ │ ├── colors.less │ │ ├── layout.less │ │ ├── presenter.less │ │ ├── progressbar.less │ │ ├── metro-icons.less │ │ ├── popovers.less │ │ ├── keypad.less │ │ ├── metro.less │ │ ├── wizard.less │ │ ├── metro-colors.less │ │ ├── fonts.less │ │ ├── charms.less │ │ ├── countdown.less │ │ ├── flex-grid.less │ │ ├── pagination.less │ │ ├── metro-rtl.less │ │ ├── carousel.less │ │ ├── panels.less │ │ ├── toolbars.less │ │ ├── datatable.less │ │ ├── stepper.less │ │ ├── treeview.less │ │ ├── dialog.less │ │ ├── wizard2.less │ │ ├── transform.less │ │ ├── grid.less │ │ ├── accordion.less │ │ ├── hints.less │ │ ├── flex.less │ │ ├── rating.less │ │ ├── windows.less │ │ ├── lists.less │ │ ├── notify.less │ │ ├── reset.less │ │ ├── video-player.less │ │ ├── images.less │ │ ├── audio-player.less │ │ ├── calendar.less │ │ ├── tables.less │ │ ├── tabcontrol.less │ │ ├── breadcrumbs.less │ │ ├── metro-schemes.less │ │ ├── slider.less │ │ ├── sidebar.less │ │ ├── metro-icons-animation.less │ │ └── fluent-menu.less │ └── loaded.css ├── router │ ├── index.js │ └── routes.js ├── components │ ├── win10 │ │ ├── tile-area.vue │ │ ├── tile-label.vue │ │ ├── tile-title.vue │ │ ├── tile-container.vue │ │ ├── tile-content.vue │ │ ├── tile-group.vue │ │ ├── message.vue │ │ ├── index.js │ │ └── tile.vue │ ├── timer.vue │ ├── shortcut.vue │ └── HelloWorld.vue ├── main.js ├── App.vue ├── Vue-extend.js └── template │ └── login.vue ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── README.md ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── index.html └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /static/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/1.jpg -------------------------------------------------------------------------------- /static/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/2.jpg -------------------------------------------------------------------------------- /static/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/3.jpg -------------------------------------------------------------------------------- /static/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/4.jpg -------------------------------------------------------------------------------- /static/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/5.jpg -------------------------------------------------------------------------------- /static/images/fog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/fog.jpg -------------------------------------------------------------------------------- /static/images/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/me.jpg -------------------------------------------------------------------------------- /static/images/wn8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/wn8.png -------------------------------------------------------------------------------- /static/images/x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/x.jpg -------------------------------------------------------------------------------- /static/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/avatar.jpg -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /static/images/excel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/excel.png -------------------------------------------------------------------------------- /static/images/grid2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/grid2.jpg -------------------------------------------------------------------------------- /static/images/group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/group.png -------------------------------------------------------------------------------- /static/images/halo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/halo.jpg -------------------------------------------------------------------------------- /static/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/home.png -------------------------------------------------------------------------------- /static/images/jolie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/jolie.jpg -------------------------------------------------------------------------------- /static/images/live1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/live1.jpg -------------------------------------------------------------------------------- /static/images/live2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/live2.jpg -------------------------------------------------------------------------------- /static/images/obama.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/obama.jpg -------------------------------------------------------------------------------- /static/images/power.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/power.png -------------------------------------------------------------------------------- /static/images/rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/rain.jpg -------------------------------------------------------------------------------- /static/images/round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/round.png -------------------------------------------------------------------------------- /static/images/sleet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/sleet.jpg -------------------------------------------------------------------------------- /static/images/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/snow.jpg -------------------------------------------------------------------------------- /static/images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/user.png -------------------------------------------------------------------------------- /static/images/vin_d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/vin_d.jpg -------------------------------------------------------------------------------- /static/images/wind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/wind.jpg -------------------------------------------------------------------------------- /static/images/word.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/word.png -------------------------------------------------------------------------------- /static/images/x-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/x-box.png -------------------------------------------------------------------------------- /static/img/icon/doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/doc.png -------------------------------------------------------------------------------- /static/img/windows.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/windows.ico -------------------------------------------------------------------------------- /static/images/access.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/access.png -------------------------------------------------------------------------------- /static/images/bd-rom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/bd-rom.png -------------------------------------------------------------------------------- /static/images/clouds2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/clouds2.png -------------------------------------------------------------------------------- /static/images/cloudy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/cloudy.jpg -------------------------------------------------------------------------------- /static/images/css-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/css-logo.png -------------------------------------------------------------------------------- /static/images/disk-sys.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/disk-sys.png -------------------------------------------------------------------------------- /static/images/flags/ak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ak.png -------------------------------------------------------------------------------- /static/images/flags/al.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/al.png -------------------------------------------------------------------------------- /static/images/flags/ar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ar.png -------------------------------------------------------------------------------- /static/images/flags/az.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/az.png -------------------------------------------------------------------------------- /static/images/flags/ca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ca.png -------------------------------------------------------------------------------- /static/images/flags/co.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/co.png -------------------------------------------------------------------------------- /static/images/flags/ct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ct.png -------------------------------------------------------------------------------- /static/images/flags/de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/de.png -------------------------------------------------------------------------------- /static/images/flags/fl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/fl.png -------------------------------------------------------------------------------- /static/images/flags/ga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ga.png -------------------------------------------------------------------------------- /static/images/flags/hi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/hi.png -------------------------------------------------------------------------------- /static/images/flags/ia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ia.png -------------------------------------------------------------------------------- /static/images/flags/id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/id.png -------------------------------------------------------------------------------- /static/images/flags/il.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/il.png -------------------------------------------------------------------------------- /static/images/flags/in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/in.png -------------------------------------------------------------------------------- /static/images/flags/ks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ks.png -------------------------------------------------------------------------------- /static/images/flags/ky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ky.png -------------------------------------------------------------------------------- /static/images/flags/la.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/la.png -------------------------------------------------------------------------------- /static/images/flags/ma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ma.png -------------------------------------------------------------------------------- /static/images/flags/md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/md.png -------------------------------------------------------------------------------- /static/images/flags/me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/me.png -------------------------------------------------------------------------------- /static/images/flags/mi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/mi.png -------------------------------------------------------------------------------- /static/images/flags/mn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/mn.png -------------------------------------------------------------------------------- /static/images/flags/mo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/mo.png -------------------------------------------------------------------------------- /static/images/flags/ms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ms.png -------------------------------------------------------------------------------- /static/images/flags/mt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/mt.png -------------------------------------------------------------------------------- /static/images/flags/nc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nc.png -------------------------------------------------------------------------------- /static/images/flags/nd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nd.png -------------------------------------------------------------------------------- /static/images/flags/ne.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ne.png -------------------------------------------------------------------------------- /static/images/flags/nh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nh.png -------------------------------------------------------------------------------- /static/images/flags/nj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nj.png -------------------------------------------------------------------------------- /static/images/flags/nm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nm.png -------------------------------------------------------------------------------- /static/images/flags/nv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/nv.png -------------------------------------------------------------------------------- /static/images/flags/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ny.png -------------------------------------------------------------------------------- /static/images/flags/oh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/oh.png -------------------------------------------------------------------------------- /static/images/flags/ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ok.png -------------------------------------------------------------------------------- /static/images/flags/or.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/or.png -------------------------------------------------------------------------------- /static/images/flags/pa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/pa.png -------------------------------------------------------------------------------- /static/images/flags/ri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ri.png -------------------------------------------------------------------------------- /static/images/flags/sc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/sc.png -------------------------------------------------------------------------------- /static/images/flags/sd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/sd.png -------------------------------------------------------------------------------- /static/images/flags/tn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/tn.png -------------------------------------------------------------------------------- /static/images/flags/tx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/tx.png -------------------------------------------------------------------------------- /static/images/flags/ut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/ut.png -------------------------------------------------------------------------------- /static/images/flags/va.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/va.png -------------------------------------------------------------------------------- /static/images/flags/vt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/vt.png -------------------------------------------------------------------------------- /static/images/flags/wa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/wa.png -------------------------------------------------------------------------------- /static/images/flags/wi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/wi.png -------------------------------------------------------------------------------- /static/images/flags/wv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/wv.png -------------------------------------------------------------------------------- /static/images/flags/wy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/flags/wy.png -------------------------------------------------------------------------------- /static/images/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/location.png -------------------------------------------------------------------------------- /static/images/me_150.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/me_150.jpg -------------------------------------------------------------------------------- /static/images/myface.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/myface.jpg -------------------------------------------------------------------------------- /static/images/onenote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/onenote.png -------------------------------------------------------------------------------- /static/images/org-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/org-01.png -------------------------------------------------------------------------------- /static/images/outlook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/outlook.png -------------------------------------------------------------------------------- /static/images/spface.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/spface.jpg -------------------------------------------------------------------------------- /static/images/spface2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/spface2.jpg -------------------------------------------------------------------------------- /static/img/icon/baidu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/baidu.png -------------------------------------------------------------------------------- /static/img/icon/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/demo.png -------------------------------------------------------------------------------- /static/img/icon/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/github.png -------------------------------------------------------------------------------- /static/img/icon/kyzg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/kyzg.png -------------------------------------------------------------------------------- /static/img/icon/win10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/win10.png -------------------------------------------------------------------------------- /static/images/Checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Checkmark.png -------------------------------------------------------------------------------- /static/images/bizspark_b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/bizspark_b.png -------------------------------------------------------------------------------- /static/images/clear-day.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/clear-day.jpg -------------------------------------------------------------------------------- /static/images/hard-drive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/hard-drive.png -------------------------------------------------------------------------------- /static/images/icon-minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/icon-minus.png -------------------------------------------------------------------------------- /static/images/icon-plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/icon-plus.png -------------------------------------------------------------------------------- /static/images/jeki_chan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/jeki_chan.jpg -------------------------------------------------------------------------------- /static/images/jetbrains.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/jetbrains.png -------------------------------------------------------------------------------- /static/images/powerpoint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/powerpoint.png -------------------------------------------------------------------------------- /static/images/whats-new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/whats-new.jpg -------------------------------------------------------------------------------- /static/img/icon/blogger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/blogger.png -------------------------------------------------------------------------------- /static/img/icon/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/download.png -------------------------------------------------------------------------------- /static/img/icon/website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/icon/website.png -------------------------------------------------------------------------------- /static/images/Blank_Folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Blank_Folder.png -------------------------------------------------------------------------------- /static/images/Calendar-Next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Calendar-Next.png -------------------------------------------------------------------------------- /static/images/Crysis-2-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Crysis-2-icon.png -------------------------------------------------------------------------------- /static/images/Folder-Rename.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Folder-Rename.png -------------------------------------------------------------------------------- /static/images/MSFT_logo_png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/MSFT_logo_png.png -------------------------------------------------------------------------------- /static/images/Notebook-Save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Notebook-Save.png -------------------------------------------------------------------------------- /static/images/WorldofTanks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/WorldofTanks.png -------------------------------------------------------------------------------- /static/images/bizspark_b_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/bizspark_b_2.png -------------------------------------------------------------------------------- /static/images/clear-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/clear-night.jpg -------------------------------------------------------------------------------- /static/images/folder-images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder-images.png -------------------------------------------------------------------------------- /static/images/folder-music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder-music.png -------------------------------------------------------------------------------- /static/images/folder-videos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder-videos.png -------------------------------------------------------------------------------- /static/images/jek_vorobey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/jek_vorobey.jpg -------------------------------------------------------------------------------- /static/images/photo_album.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/photo_album.png -------------------------------------------------------------------------------- /static/images/shvarcenegger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/shvarcenegger.jpg -------------------------------------------------------------------------------- /static/images/toggle-minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/toggle-minus.png -------------------------------------------------------------------------------- /static/images/zadorozhnyi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/zadorozhnyi.jpg -------------------------------------------------------------------------------- /static/img/presentation/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/presentation/1.png -------------------------------------------------------------------------------- /static/img/wallpapers/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/wallpapers/login.jpg -------------------------------------------------------------------------------- /static/img/wallpapers/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/wallpapers/main.jpg -------------------------------------------------------------------------------- /static/images/phpstorm_7_eap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/phpstorm_7_eap.png -------------------------------------------------------------------------------- /static/img/wallpapers/mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/wallpapers/mobile.jpg -------------------------------------------------------------------------------- /static/images/Battlefield_4_Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Battlefield_4_Icon.png -------------------------------------------------------------------------------- /static/images/Metro_unior_100x20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Metro_unior_100x20.png -------------------------------------------------------------------------------- /static/images/folder-documents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder-documents.png -------------------------------------------------------------------------------- /static/images/folder-downloads.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder-downloads.png -------------------------------------------------------------------------------- /static/images/folder_with_file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/folder_with_file.png -------------------------------------------------------------------------------- /static/images/partly-cloudy-day.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/partly-cloudy-day.jpg -------------------------------------------------------------------------------- /static/img/presentation/donation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/presentation/donation.jpg -------------------------------------------------------------------------------- /static/images/Metro_author_100x20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Metro_author_100x20.png -------------------------------------------------------------------------------- /static/images/Metro_member_100x20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Metro_member_100x20.png -------------------------------------------------------------------------------- /static/images/Metro_moster_100x20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/Metro_moster_100x20.png -------------------------------------------------------------------------------- /static/images/partly-cloudy-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/images/partly-cloudy-night.jpg -------------------------------------------------------------------------------- /static/img/presentation/bluescreen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/presentation/bluescreen.jpg -------------------------------------------------------------------------------- /static/img/presentation/wangyiyun.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/img/presentation/wangyiyun.gif -------------------------------------------------------------------------------- /static/font-awesome-4.7.0/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/font-awesome-4.7.0/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/skin/default/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/layer-v3.0.3/layer/skin/default/icon.png -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/skin/default/icon-ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/layer-v3.0.3/layer/skin/default/icon-ext.png -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/skin/default/loading-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/layer-v3.0.3/layer/skin/default/loading-0.gif -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/skin/default/loading-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/layer-v3.0.3/layer/skin/default/loading-1.gif -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/skin/default/loading-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/layer-v3.0.3/layer/skin/default/loading-2.gif -------------------------------------------------------------------------------- /static/font-awesome-4.7.0/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/font-awesome-4.7.0/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /static/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /static/font-awesome-4.7.0/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/font-awesome-4.7.0/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /static/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jntoo/vue-win10/HEAD/static/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /src/assets/less/clock.less: -------------------------------------------------------------------------------- 1 | .clock { 2 | 3 | text-align: center; 4 | 5 | .hour { 6 | 7 | } 8 | 9 | .minute { 10 | 11 | } 12 | 13 | .second { 14 | 15 | } 16 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-win10 2 | 仿windows10、win10 ，改自尤里2号 http://win10ui.yuri2.cn/ jQuery版改成Vue 3 | 欢迎使用 4 | git clone https://github.com/jntoo/vue-win10.git 5 | npm install 6 | cd vue-win10 7 | npm run dev 8 | 在浏览器打开：http://localhost:8080/ 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | .svn 16 | yarn.lock 17 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by JnToo on 2018/4/16. 3 | */ 4 | import Vue from 'vue' 5 | import VueRouter from 'vue-router' 6 | import routes from './routes' 7 | Vue.use(VueRouter) 8 | 9 | const router = new VueRouter({ 10 | routes // （缩写）相当于 routes: routes 11 | }) 12 | export default router -------------------------------------------------------------------------------- /src/assets/less/metro-icons-mixins.less: -------------------------------------------------------------------------------- 1 | .mif-lg { 2 | font-size: 1.3rem; 3 | line-height: 0.75em; 4 | vertical-align: -35%; 5 | } 6 | 7 | .mif-2x { 8 | font-size: 1.75rem; 9 | vertical-align: -25%; 10 | } 11 | 12 | .mif-3x { 13 | font-size: 2.625rem; 14 | vertical-align: -30%; 15 | } 16 | 17 | .mif-4x { 18 | font-size: 3.5rem; 19 | vertical-align: -35%; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by JnToo on 2018/4/16. 3 | */ 4 | import Home from '../win10.vue' 5 | import Login from '../template/login.vue' 6 | const routes = [ 7 | { 8 | path:'/', 9 | name:'Win10', 10 | component:Home 11 | }, 12 | { 13 | path:'/login', 14 | name:'Login', 15 | component:Login 16 | } 17 | ] 18 | 19 | export default routes -------------------------------------------------------------------------------- /src/assets/less/colors.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | 3 | .op-default { 4 | background-color: rgba(red(@cyan), green(@cyan), blue(@cyan), .7); 5 | } 6 | 7 | .generate-colors(@color-list-length); 8 | .generate-colors(@name, @i: 1) when (@i =< @color-list-length) { 9 | @name: extract(@color-list, @i); 10 | 11 | .fg-@{name} {color: @@name !important;} 12 | .bg-@{name} {background-color: @@name !important;} 13 | 14 | .generate-colors(@name, @i + 1); 15 | } 16 | -------------------------------------------------------------------------------- /src/components/win10/tile-area.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/less/layout.less: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 960px; 3 | margin: 0 auto; 4 | } 5 | 6 | .fixed-top, .fixed-bottom { 7 | position: fixed; 8 | left: 0; 9 | right: 0; 10 | z-index: @zindexFixedNavbar; 11 | } 12 | 13 | .fixed-top { 14 | top: 0; 15 | bottom: auto; 16 | 17 | } 18 | 19 | .fixed-bottom { 20 | top: auto; 21 | bottom: 0; 22 | } 23 | 24 | .pos-abs {position: absolute !important;} 25 | .pos-rel {position: relative !important;} 26 | .pos-fix {position: fixed !important;} 27 | 28 | -------------------------------------------------------------------------------- /src/components/win10/tile-label.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/win10/tile-title.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/less/presenter.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "transform"; 4 | 5 | .presenter { 6 | width: 100%; 7 | height: 200px; 8 | min-height: 200px; 9 | position: relative; 10 | display: block; 11 | } 12 | 13 | .scene { 14 | position: relative; 15 | width: 100%; 16 | height: 100%; 17 | margin: 0; 18 | padding: 0; 19 | overflow: hidden; 20 | display: block; 21 | } 22 | 23 | .act { 24 | width: 100%; 25 | height: 100%; 26 | display: block; 27 | position: relative; 28 | padding: 10px ; 29 | .clear-float; 30 | } 31 | 32 | .actor { 33 | position: absolute; 34 | margin-right: 10px; 35 | } 36 | 37 | -------------------------------------------------------------------------------- /src/components/win10/tile-container.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /static/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by JnToo on 2018/4/16. 3 | */ 4 | // 数据结构为： 5 | /** 6 | * { 7 | * code:0, // code 大于0为错误，等于0为成功，类似于C写法，大于0为错误码 8 | * msg:"" ,// 错误信息 返回的错误信息 9 | * data:JSON , // JSON任意信息 10 | * href:'', // 跳转地址 11 | * } 12 | */ 13 | 14 | (function (global) { 15 | var config = { 16 | baseUrl:'http://127.0.0.205', 17 | loginUrl:'http://127.0.0.205/admin.php?s=/index/login/sign', // 用以上结构返回 18 | shortCutUrl:'http://127.0.0.205/admin.php?s=/adminc/index/shortcut', // 获取线上WIN10图标 19 | menuCutUrl:'http://127.0.0.205/admin.php?s=/adminc/index/startmenu' // 开始菜单Url 20 | } 21 | global.win10Config = config; 22 | })(window) 23 | -------------------------------------------------------------------------------- /src/components/win10/tile-content.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | win10 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static/js/win10.child.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Yuri2 on 2017/7/31. 3 | */ 4 | //此处代码适合在子页面使用 5 | window.Win10_parent=parent.Win10; //获取父级Win10对象的句柄 6 | window.Win10_child={ 7 | close:function () { 8 | var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 9 | Win10_parent._closeWin(index); 10 | }, 11 | newMsg: function (title, content,handle_click){ 12 | Win10_parent.newMsg(title, content,handle_click) 13 | }, 14 | openUrl: function (url, title,max){ 15 | var click_lock_name=Math.random(); 16 | Win10_parent._iframe_click_lock_children[click_lock_name]=true; 17 | var index=Win10_parent.openUrl(url, title,max); 18 | setTimeout(function () { 19 | delete Win10_parent._iframe_click_lock_children[click_lock_name]; 20 | },1000); 21 | return index; 22 | } 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /src/components/win10/tile-group.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/less/progressbar.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "animations"; 4 | 5 | .progress, .progress-bar { 6 | display: block; 7 | position: relative; 8 | width: 100%; 9 | height: auto; 10 | margin: .625rem 0; 11 | background: @grayLighter; 12 | overflow: hidden; 13 | .clear-float; 14 | 15 | .bar { 16 | position: relative; 17 | display: block; 18 | float: left; 19 | width: 0; 20 | background-color: @cyan; 21 | z-index: 1; 22 | text-align: center; 23 | height: .625rem; 24 | line-height: .625rem; 25 | color: @white; 26 | } 27 | 28 | &.small > .bar { 29 | height: .3125rem; 30 | } 31 | &.large > .bar { 32 | height: 1rem; 33 | } 34 | 35 | &.gradient-bar { 36 | .bar { 37 | background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55); 38 | } 39 | } 40 | 41 | &.ani { 42 | .bar { 43 | .animate(ani-bg-stripes 2s linear infinite); 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /src/assets/less/metro-icons.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'metro'; 3 | src:url('../fonts/metro.eot'); 4 | src:url('../fonts/metro.eot') format('embedded-opentype'), 5 | url('../fonts/metro.woff') format('woff'), 6 | url('../fonts/metro.ttf') format('truetype'), 7 | url('../fonts/metro.svg') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="mif-"], [class*=" mif-"] { 13 | display: inline-block; 14 | font: normal normal normal 1.5em/1; 15 | font-family: metro, "Segoe UI", "Open Sans", serif; 16 | line-height: 1 ; 17 | text-rendering: auto; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | transform: translate(0, 0); 21 | vertical-align: middle; 22 | position: static; 23 | //margin-bottom: 20%; 24 | 25 | &:before { 26 | font-family: metro, serif; 27 | } 28 | } 29 | 30 | @import "metro-icons-mixins"; 31 | @import "metro-icons-animation"; 32 | @import "metro-icons-content"; 33 | 34 | -------------------------------------------------------------------------------- /src/components/timer.vue: -------------------------------------------------------------------------------- 1 | 5 | 8 | -------------------------------------------------------------------------------- /static/json/menu-item.json: -------------------------------------------------------------------------------- 1 | { 2 | "code":0, 3 | "msg":"", 4 | "data":[ 5 | { 6 | "name":"API测试", 7 | "iconClass":"red icon fa fa-wrench fa-fw", 8 | "child":[ 9 | { 10 | "name":"父子页沟通" 11 | }, 12 | { 13 | "name":"打开消息中心" 14 | }, 15 | { 16 | "name":"发送带回调的消息" 17 | }, 18 | { 19 | "name":"关闭菜单" 20 | }, 21 | { 22 | "name":"打开消息中心" 23 | } 24 | ] 25 | }, 26 | { 27 | "name":"辅助工具", 28 | "iconClass":"blue icon fa fa-gavel fa-fw", 29 | "child":[ 30 | { 31 | "name":"桌面图标代码生成器" 32 | }, 33 | { 34 | "name":"磁贴代码生成器" 35 | }, 36 | { 37 | "name":"菜单代码生成器" 38 | } 39 | ] 40 | }, 41 | { 42 | "name":"关于", 43 | "iconClass":"purple icon fa fa-info-circle fa-fw" 44 | }, 45 | { 46 | "name":"关闭", 47 | "iconClass":"black icon fa fa-power-off fa-fw" 48 | } 49 | ] 50 | } -------------------------------------------------------------------------------- /src/components/win10/message.vue: -------------------------------------------------------------------------------- 1 | 8 | 11 | -------------------------------------------------------------------------------- /src/assets/less/popovers.less: -------------------------------------------------------------------------------- 1 | @import (once) "utils"; 2 | 3 | .popover { 4 | display: block; 5 | min-width: 12.5rem; 6 | height: auto; 7 | position: relative; 8 | background-color: @grayLighter; 9 | padding: 1.25rem; 10 | 11 | * { 12 | color: inherit; 13 | } 14 | 15 | &.popover-shadow { 16 | box-shadow: 0 0 10px 0 rgba(0,0,0,.4); 17 | } 18 | 19 | &:before { 20 | content: ""; 21 | width: .625rem; 22 | height: .625rem; 23 | display: block; 24 | position: absolute; 25 | background-color: inherit; 26 | left: -.3125rem; 27 | top: 50%; 28 | margin-top: -.3125rem; 29 | .rotate(45deg); 30 | } 31 | 32 | &.marker-on-top { 33 | &:before { 34 | top: 0; 35 | left: 50%; 36 | margin-left: -.3125rem; 37 | } 38 | } 39 | 40 | &.marker-on-right { 41 | &:before { 42 | top: 50%; 43 | margin-top: -.3125rem; 44 | left: 100%; 45 | margin-left: -.3125rem; 46 | } 47 | } 48 | 49 | &.marker-on-bottom { 50 | &:before { 51 | top: 100%; 52 | margin-left: -.3125rem; 53 | left: 50%; 54 | margin-top: -.3125rem; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/assets/less/keypad.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | @keySize: 32px; 5 | @keyMargin: 1px; 6 | @keyBorder: 1px; 7 | 8 | .keypad { 9 | position: relative; 10 | width: @keySize * 3 + @keyMargin * 8 + @keyBorder * 2; 11 | padding: @keyMargin; 12 | border: 1px @grayLighter solid; 13 | vertical-align: middle; 14 | background-color: @white; 15 | .clear-float; 16 | .no-user-select; 17 | 18 | .key { 19 | width: @keySize; 20 | height: @keySize; 21 | display: block; 22 | float: left; 23 | margin: @keyMargin; 24 | border: 1px @grayLighter solid; 25 | vertical-align: middle; 26 | text-align: center; 27 | cursor: pointer; 28 | font-size: .875rem; 29 | line-height: @keySize; 30 | 31 | &:hover { 32 | background-color: @grayLighter; 33 | } 34 | &:active { 35 | background-color: @gray; 36 | color: @white; 37 | } 38 | } 39 | 40 | &.shadow { 41 | .block-shadow; 42 | } 43 | } -------------------------------------------------------------------------------- /src/components/win10/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ylf on 2018/3/26. 3 | */ 4 | import Tile from './tile.vue' 5 | import TileArea from './tile-area.vue' 6 | import TileContainer from './tile-container.vue' 7 | import TileContent from './tile-content.vue' 8 | import TileGroup from './tile-group.vue' 9 | import TileTitle from './tile-title.vue' 10 | import TileLabel from './tile-label.vue' 11 | import Message from './message.vue' 12 | 13 | function install(Vue) { 14 | if(install.installed)return; 15 | install.installed = true; 16 | Vue.component(TileArea.name , TileArea) 17 | Vue.component(Tile.name , Tile) 18 | Vue.component(TileLabel.name , TileLabel) 19 | Vue.component(TileContainer.name , TileContainer) 20 | Vue.component(TileContent.name , TileContent) 21 | Vue.component(TileGroup.name , TileGroup) 22 | Vue.component(TileTitle.name , TileTitle) 23 | Vue.component(Message.name , Message) 24 | } 25 | 26 | export default { 27 | Tile, 28 | TileTitle, 29 | TileGroup, 30 | TileContent, 31 | TileContainer, 32 | TileArea, 33 | install, 34 | Message, 35 | TileLabel 36 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import "./assets/less/tiles.less"; 6 | import VueExtend from './vue-extend' 7 | import router from './router' 8 | import axios from 'axios' 9 | import Qs from 'qs' 10 | import VueAxios from 'vue-axios' 11 | 12 | Vue.use(VueExtend) 13 | Vue.config.productionTip = false 14 | 15 | axios.defaults.baseURL = win10Config.baseUrl; 16 | axios.defaults.headers = {'X-REQUESTED-WITH':'xmlhttprequest'}; 17 | axios.defaults.withCredentials = true; 18 | var axios_instance = axios.create({ 19 | baseURL:win10Config.baseUrl, 20 | transformRequest: [function (data) { 21 | data = Qs.stringify(data); 22 | return data; 23 | }], 24 | headers:{'Content-Type':'application/x-www-form-urlencoded'}, 25 | withCredentials:true 26 | }) 27 | Vue.use(VueAxios, axios_instance) 28 | 29 | /* eslint-disable no-new */ 30 | new Vue({ 31 | el: '#app', 32 | components: { App }, 33 | router, 34 | template: '' 35 | }) 36 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 28 | 29 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/assets/less/metro.less: -------------------------------------------------------------------------------- 1 | @import "reset"; 2 | @import "fonts"; 3 | @import "typography"; 4 | @import "layout"; 5 | @import "grid"; 6 | @import "flex-grid"; 7 | @import "tables"; 8 | @import "appbar"; 9 | @import "menu"; 10 | @import "buttons"; 11 | @import "toolbars"; 12 | @import "pagination"; 13 | @import "breadcrumbs"; 14 | @import "inputs"; 15 | @import "progressbar"; 16 | @import "popovers"; 17 | @import "windows"; 18 | @import "lists"; 19 | @import "images"; 20 | @import "animations"; 21 | @import "calendar"; 22 | @import "stepper"; 23 | @import "wizard"; 24 | @import "wizard2"; 25 | @import "countdown"; 26 | @import "sidebar"; 27 | @import "tabcontrol"; 28 | @import "accordion"; 29 | @import "carousel"; 30 | @import "panels"; 31 | @import "rating"; 32 | @import "slider"; 33 | @import "tiles"; 34 | @import "treeview"; 35 | @import "presenter"; 36 | @import "listview"; 37 | @import "charms"; 38 | @import "notify"; 39 | @import "hints"; 40 | @import "preloaders"; 41 | @import "dialog"; 42 | @import "streamer"; 43 | @import "keypad"; 44 | @import "fluent-menu"; 45 | @import "video-player"; 46 | @import "audio-player"; 47 | 48 | @import "select2"; 49 | @import "datatable"; 50 | 51 | @import "flex"; 52 | @import "scheme-builder"; 53 | 54 | @import "colors"; 55 | @import "transform"; 56 | -------------------------------------------------------------------------------- /src/assets/less/wizard.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "buttons"; 3 | @import (once) "utils"; 4 | 5 | .wizard { 6 | position: relative; 7 | 8 | .steps { 9 | margin: 10px 0; 10 | padding: 20px; 11 | border: 1px @grayLighter solid; 12 | position: relative; 13 | 14 | .step { 15 | position: relative; 16 | width: 100%; 17 | height: 100%; 18 | display: none; 19 | 20 | &:first-child { 21 | display: block; 22 | } 23 | } 24 | } 25 | 26 | .actions { 27 | .group-right { 28 | float: right; 29 | } 30 | .group-left { 31 | float: left; 32 | } 33 | 34 | button { 35 | .button; 36 | margin-right: 2px; 37 | 38 | &:last-child { 39 | margin-right: 0; 40 | } 41 | 42 | &.btn-help { 43 | } 44 | 45 | &.btn-prior, &.btn-next { 46 | } 47 | 48 | &.btn-finish { 49 | background-color: @green; 50 | color: @white; 51 | 52 | } 53 | 54 | &:disabled { 55 | background-color: lighten(@gray, 10%) ; 56 | } 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /src/components/shortcut.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/less/metro-colors.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | 3 | .op-default { 4 | background-color: rgba(red(@cyan), green(@cyan), blue(@cyan), .7); 5 | } 6 | 7 | .generate-colors(@color-list-length); 8 | .generate-colors(@name, @i: 1) when (@i =< @color-list-length) { 9 | @name: extract(@color-list, @i); 10 | 11 | .bd-@{name} {border-color: @@name !important;} 12 | .ol-@{name} {outline-color: @@name !important;} 13 | .op-@{name} {background-color: rgba(red(@@name), green(@@name), blue(@@name), .7);} 14 | .ribbed-@{name} {background: @@name linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important; background-size: 40px 40px !important; } 15 | .before-bg-@{name} {&:before {background: @@name !important;}} 16 | .before-fg-@{name} {&:before {color: @@name !important;}} 17 | .after-bg-@{name} {&:after {background: @@name !important;}} 18 | .after-fg-@{name} {&:after {color: @@name !important;}} 19 | .bg-hover-@{name} {&:hover{background: @@name !important;}} 20 | .bg-active-@{name} {&:active{background: @@name !important;}} 21 | .bg-focus-@{name} {&:focus{background: @@name !important;}} 22 | .fg-hover-@{name} {&:hover{color: @@name !important;}} 23 | .fg-active-@{name} {&:active{color: @@name !important;}} 24 | .fg-focus-@{name} {&:focus{color: @@name !important;}} 25 | 26 | .generate-colors(@name, @i + 1); 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/less/fonts.less: -------------------------------------------------------------------------------- 1 | // Font is used to replace Cambria Font 2 | @font-face { 3 | font-family: "PT Serif Caption"; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local("Cambria"), local("PT Serif Caption"), local("PTSerif-Caption"), url(https://themes.googleusercontent.com/static/fonts/ptserifcaption/v6/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff) format('woff'); 7 | } 8 | 9 | // Font is used to replace Segoe UI Font 10 | 11 | // Replace Segoe UI Light 12 | @font-face { 13 | font-family: "Open Sans Light"; 14 | font-style: normal; 15 | font-weight: 300; 16 | src: local("Segoe UI Light"), local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); 17 | } 18 | 19 | // Replace Segoe UI 20 | @font-face { 21 | font-family: "Open Sans"; 22 | font-style: normal; 23 | font-weight: 400; 24 | src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 25 | } 26 | 27 | // Replace Segoe UI Bold 28 | @font-face { 29 | font-family: "Open Sans Bold"; 30 | font-style: normal; 31 | font-weight: 700; 32 | src: local("Segoe UI Bold"), local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff'); 33 | } 34 | -------------------------------------------------------------------------------- /src/assets/less/charms.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .charm { 5 | display: block; 6 | position: fixed; 7 | z-index: @zindexCharms; 8 | background: @dark; 9 | color: @grayLighter; 10 | padding: .625rem; 11 | 12 | .charm-closer { 13 | position: absolute; 14 | display: block; 15 | padding: .5rem; 16 | //height: 2rem; 17 | //width: 2rem; 18 | text-align: center; 19 | vertical-align: middle; 20 | font-size: 2rem; 21 | font-weight: normal; 22 | //padding: 0 0 .625rem 0; 23 | z-index: 3; 24 | outline: none; 25 | cursor: pointer; 26 | 27 | color: @winFlatSystemButtonRestColor; 28 | top: .25rem; 29 | right: 1rem; 30 | 31 | &:after { 32 | content: '\D7'; 33 | position: absolute; 34 | left: 50%; 35 | top: 50%; 36 | margin-top: -.65rem; 37 | margin-left: -.35rem; 38 | } 39 | 40 | &:hover { 41 | color: @white; 42 | } 43 | 44 | &:active { 45 | color: @white; 46 | } 47 | } 48 | } 49 | 50 | .charm { 51 | &.right-side { 52 | width: auto; 53 | right: 0; 54 | top: 0; 55 | left: auto; 56 | bottom: 0; 57 | } 58 | &.left-side { 59 | width: auto; 60 | left: 0; 61 | top: 0; 62 | bottom: 0; 63 | } 64 | &.top-side { 65 | height: auto; 66 | left: 0; 67 | right: 0; 68 | top: 0; 69 | } 70 | &.bottom-side { 71 | height: auto; 72 | left: 0; 73 | right: 0; 74 | top: auto; 75 | bottom: 0; 76 | } 77 | } -------------------------------------------------------------------------------- /src/assets/less/countdown.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .countdown { 5 | display: inline-block; 6 | font-weight: 700; 7 | font-size: 1rem; 8 | margin: .1em 0 1.2em; 9 | 10 | .part { 11 | display: inline-block; 12 | position: relative; 13 | 14 | &.days, &.hours, &.minutes, &.seconds { 15 | &:after { 16 | position: absolute; 17 | content: attr(data-day-text); 18 | text-align: center; 19 | top: 100%; 20 | left: 0; 21 | width: 100%; 22 | font-size: .6em; 23 | color: inherit; 24 | } 25 | } 26 | 27 | &.disabled { 28 | .digit { 29 | opacity: .3; 30 | box-shadow: none; 31 | } 32 | } 33 | } 34 | 35 | .digit, .divider { 36 | display: inline-block; 37 | padding: .3125em .625em; 38 | background-color: @cyan; 39 | color: @white; 40 | cursor: default; 41 | .block-shadow; 42 | .text-shadow; 43 | .transition(.5s); 44 | } 45 | 46 | .digit, .divider { 47 | margin-left: 4px; 48 | } 49 | 50 | .divider { 51 | padding: .125em .25em; 52 | color: @dark; 53 | background-color: transparent; 54 | box-shadow: none; 55 | } 56 | 57 | &.tick { 58 | .divider { 59 | opacity: 0; 60 | } 61 | } 62 | 63 | &.labels-top { 64 | margin: 1.2em 0 .1em; 65 | 66 | .part { 67 | &.days, &.hours, &.minutes, &.seconds { 68 | &:after { 69 | top: 0; 70 | left: 0; 71 | margin-top: -1.5em; 72 | } 73 | } 74 | } 75 | } 76 | 77 | &.rounded { 78 | .part { 79 | .digit { 80 | border-radius: .5em; 81 | } 82 | } 83 | } 84 | 85 | .digit.scaleIn { 86 | .transition(.5s); 87 | .scale(1.1); 88 | } 89 | } -------------------------------------------------------------------------------- /static/json/shortcut.json: -------------------------------------------------------------------------------- 1 | { 2 | "code":0, 3 | "msg":"", 4 | "data":[ 5 | { 6 | "icon": "/static/img/icon/win10.png", 7 | "title": "Win10-UI官网", 8 | "openType": "openUrl", 9 | "url":"http://win10ui.yuri2.cn" 10 | }, 11 | { 12 | "icon": "/static/img/icon/win10.png", 13 | "title": "原版DEMO", 14 | "openType": "openLink", 15 | "url": "http://win10ui.yuri2.cn/src/demo.php" 16 | }, 17 | { 18 | "icon": "/static/img/icon/blogger.png", 19 | "title": "Yuri2's Blog", 20 | "openType": "openUrl", 21 | "winIcon": "/static/img/icon/blogger.png", 22 | "winTitle": "尤里2号的博客", 23 | "url": "http://win10ui.yuri2.cn/src/demo.php" 24 | }, 25 | { 26 | "icon": "/static/img/icon/doc.png", 27 | "title": "在线文档", 28 | "openType": "openUrl", 29 | "url": "http://win10ui.yuri2.cn/src/doc.php" 30 | }, 31 | { 32 | "icon": "/static/img/icon/kyzg.png", 33 | "title": "开源中国", 34 | "openType": "openUrl", 35 | "url": "https://www.oschina.net/p/win10-ui" 36 | }, 37 | { 38 | "icon": "/static/img/icon/download.png", 39 | "title": "快速获取", 40 | "openType": "openLink", 41 | "url": "https://github.com/yuri2peter/win10-ui/archive/master.zip" 42 | }, 43 | { 44 | "iconClass": "fa fa-user icon black-green", 45 | "title": "示例登录页", 46 | "openType": "openRouter", 47 | "url": "/login" 48 | }, 49 | { 50 | "iconClass": "fa fa-gears icon purple", 51 | "title": "创意工坊", 52 | "openType": "openUrl", 53 | "url": "http://win10ui.yuri2.cn/src/workshop.php" 54 | } 55 | ] 56 | } -------------------------------------------------------------------------------- /src/assets/less/flex-grid.less: -------------------------------------------------------------------------------- 1 | @import (once) "flex"; 2 | 3 | @gridCellBaseSize: 8.33333333%; 4 | 5 | .flex-grid { 6 | display: block; 7 | width: 100%; 8 | } 9 | 10 | .flex-grid { 11 | .row { 12 | .flexbox; 13 | } 14 | } 15 | 16 | .flex-grid { 17 | 18 | .row { 19 | .cell { 20 | .flex(0 0 @gridCellBaseSize); 21 | } 22 | 23 | &.cell-auto-size { 24 | .cell { 25 | .flex(1 1 auto); 26 | } 27 | } 28 | } 29 | 30 | .row { 31 | .cell { 32 | 33 | // colspan 34 | .generate-colspan(12); 35 | .generate-colspan(@j, @k: 2) when (@k =< @j){ 36 | &.colspan@{k} { 37 | .flex(0 0 @gridCellBaseSize * @k); 38 | } 39 | .generate-colspan(@j, (@k + 1)); 40 | } 41 | 42 | // grow size 43 | .generate-flex-size(12); 44 | .generate-flex-size(@j, @k: 1) when (@k =< @j){ 45 | &.size@{k} { 46 | .flex(0 0 @gridCellBaseSize * @k); 47 | } 48 | .generate-flex-size(@j, (@k + 1)); 49 | } 50 | 51 | // percent size 52 | .generate-flex-size-p(100); 53 | .generate-flex-size-p(@j, @k: 10) when (@k =< @j){ 54 | &.size-p@{k} { 55 | .flex(0 0 @k + 0%); 56 | } 57 | .generate-flex-size-p(@j, (@k + 10)); 58 | } 59 | 60 | // pixels size 61 | .generate-flex-size-x(1000); 62 | .generate-flex-size-x(@j, @k: 100) when (@k =< @j){ 63 | &.size-x@{k} { 64 | .flex(0 0 @k + 0px); 65 | } 66 | .generate-flex-size-x(@j, (@k + 100)); 67 | } 68 | 69 | &.auto-size { 70 | .flex(1 auto); 71 | } 72 | } 73 | } 74 | } 75 | 76 | -------------------------------------------------------------------------------- /src/assets/less/pagination.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .pagination { 5 | display: block; 6 | margin: .625rem 0; 7 | .clear-float; 8 | 9 | & > .item { 10 | display: block; 11 | float: left; 12 | margin-left: .0652rem; 13 | padding: 0.25rem .625rem; 14 | background-color: @white; 15 | cursor: pointer; 16 | border: 1px @grayLighter solid; 17 | text-align: center; 18 | font-size: .875rem; 19 | color: @dark; 20 | 21 | &:first-child { 22 | margin-left: 0 ; 23 | } 24 | 25 | &.current, &.active { 26 | background-color: @cyan; 27 | border-color: @lightCyan; 28 | color: @white; 29 | .text-shadow; 30 | } 31 | 32 | &:hover { 33 | background-color: lighten(@cyan, 20%); 34 | border-color: lighten(@cyan, 20%); 35 | color: @white; 36 | } 37 | 38 | &:disabled, &.disabled { 39 | cursor: default; 40 | background-color: @grayLighter; 41 | border-color: @grayLighter; 42 | color: @grayLight; 43 | } 44 | 45 | &.spaces { 46 | border: 0; 47 | cursor: default; 48 | color: @dark ; 49 | &:hover { 50 | background-color: inherit ; 51 | color: @dark; 52 | } 53 | } 54 | } 55 | 56 | &.rounded { 57 | & > .item { 58 | border-radius: .3125rem; 59 | } 60 | } 61 | 62 | &.cycle { 63 | & > .item { 64 | width: 28px; 65 | height: 28px; 66 | border-radius: 50%; 67 | font-size: .7rem; 68 | padding: .4375rem 0; 69 | } 70 | } 71 | 72 | &.no-border { 73 | & > .item { 74 | border: 0; 75 | 76 | &:hover { 77 | color: @lightCyan; 78 | background-color: transparent ; 79 | } 80 | 81 | &:disabled, &.disabled { 82 | cursor: default; 83 | background-color: transparent; 84 | border-color: @transparent; 85 | color: @grayLight; 86 | } 87 | 88 | &.current, &.active { 89 | //border-radius: 50%; 90 | &:hover { 91 | background-color: lighten(@cyan, 20%) ; 92 | border-color: lighten(@cyan, 20%) ; 93 | color: @white ; 94 | } 95 | } 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /src/assets/less/metro-rtl.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | 3 | *[dir=ltr] { 4 | direction: ltr; 5 | unicode-bidi: embed; 6 | } 7 | 8 | *[dir=rtl] { 9 | direction: rtl; 10 | unicode-bidi: embed; 11 | } 12 | 13 | bdo[dir=ltr] { 14 | direction: ltr; 15 | unicode-bidi: bidi-override; 16 | } 17 | 18 | bdo[dir=rtl] { 19 | direction: rtl; 20 | unicode-bidi: bidi-override; 21 | } 22 | 23 | *[dir=rtl] ul, *[dir=rtl] ol, ul[dir=rtl], ol[dir=rtl] { 24 | margin-right: .3125rem; 25 | margin-left: 0; 26 | padding-right: .625rem; 27 | 28 | li { 29 | 30 | & ul, & ol { 31 | padding-right: 1.5625rem; 32 | padding-left: 0; 33 | } 34 | } 35 | } 36 | 37 | *[dir=rtl] dl, dl[dir=rtl] { 38 | 39 | dd { 40 | margin-right: .9375rem; 41 | margin-left: 0; 42 | } 43 | 44 | &.horizontal { 45 | dt { 46 | float: right; 47 | width: 10rem; 48 | overflow: hidden; 49 | clear: left; 50 | text-align: right; 51 | text-overflow: ellipsis; 52 | white-space: nowrap; 53 | } 54 | 55 | dd { 56 | margin-right: 11.25rem; 57 | margin-left: 0; 58 | } 59 | } 60 | } 61 | 62 | *[dir=rtl] blockquote, blockquote[dir=rtl] { 63 | margin: .625rem 0; 64 | padding: 0 .625rem 0 0; 65 | border-left: none; 66 | border-right: .25rem @grayLight solid; 67 | } 68 | 69 | 70 | // Inputs 71 | *[dir=rtl] .input-control, .input-control[dir=rtl] { 72 | &.text, &.select, &.file, &.password, &.number, &.email, &.tel { 73 | .button, .button-group { 74 | right: auto; 75 | left: 0; 76 | } 77 | 78 | .prepend-icon { 79 | left: auto; 80 | right: 4px; 81 | } 82 | 83 | .prepend-icon ~ input { 84 | padding-left: 0; 85 | padding-right: 30px; 86 | } 87 | } 88 | } 89 | 90 | *[dir=rtl] .grid .row > .cell { 91 | float: right; 92 | } -------------------------------------------------------------------------------- /src/assets/less/carousel.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | .carousel { 6 | display: block; 7 | width: 100%; 8 | position: relative; 9 | min-height: 100px; 10 | overflow: hidden; 11 | 12 | .slide { 13 | top: 0; 14 | left: 0; 15 | position: absolute; 16 | display: block; 17 | width: 100%; 18 | height: 100%; 19 | min-height: 100%; 20 | .clear-float; 21 | } 22 | 23 | [class*="carousel-switch"], .carousel-bullets { 24 | position: absolute; 25 | display: block; 26 | z-index: @zindexDropdown - 1; 27 | .no-user-select; 28 | } 29 | 30 | .carousel-bullets { 31 | left: 0; 32 | right: 0; 33 | bottom: .625rem; 34 | 35 | .align-center; 36 | 37 | .carousel-bullet { 38 | display: inline-block; 39 | float: none; 40 | width: .625rem; 41 | height: .625rem; 42 | background-color: #ababab; 43 | box-shadow: none; 44 | border-radius: 50%; 45 | margin-right: .625rem; 46 | cursor: pointer; 47 | border: 1px @white solid; 48 | 49 | &:last-child { 50 | margin-right: 0; 51 | } 52 | 53 | &.bullet-on { 54 | background-color: @lightCyan; 55 | } 56 | 57 | &:hover { 58 | } 59 | } 60 | } 61 | 62 | &.square-bullets { 63 | .carousel-bullet { 64 | border-radius: 0 ; 65 | } 66 | } 67 | 68 | .carousel-switch-next, .carousel-switch-prev { 69 | width: auto; 70 | line-height: 4rem; 71 | height: 4rem; 72 | text-decoration: none; 73 | margin-top: -2rem; 74 | top: 50%; 75 | font-size: 4rem; 76 | font-weight: 300; 77 | color: @grayLighter; 78 | cursor: pointer; 79 | vertical-align: middle; 80 | padding: 0; 81 | 82 | &:hover { 83 | color: @white; 84 | .text-shadow; 85 | } 86 | 87 | img { 88 | max-width: 64px; 89 | max-height: 64px; 90 | } 91 | } 92 | 93 | .carousel-switch-next { 94 | right: 0; 95 | left: auto; 96 | } 97 | 98 | .carousel-switch-prev { 99 | left: 0; 100 | right: auto; 101 | } 102 | } -------------------------------------------------------------------------------- /src/assets/less/panels.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | .panel { 6 | display: block; 7 | position: relative; 8 | background-color: @white; 9 | 10 | & > .heading, & > .content { 11 | display: block; 12 | position: relative; 13 | color: @dark; 14 | } 15 | 16 | & > .heading { 17 | padding: .625rem 0 ; 18 | color: @white; 19 | background-color: @cyan; 20 | cursor: default; 21 | vertical-align: middle; 22 | z-index: 2; 23 | height: 2.625rem; 24 | .bottom-shadow; 25 | 26 | .sub-header; 27 | .no-user-select; 28 | 29 | & > .title { 30 | margin-left: .625rem; 31 | } 32 | 33 | & > .icon + .title { 34 | margin-left: 3.625rem; 35 | } 36 | 37 | & > .icon { 38 | position: absolute; 39 | background-color: @darkCyan; 40 | top: 0; 41 | left: 0; 42 | bottom: 0; 43 | vertical-align: middle; 44 | //line-height: 1; 45 | height: 2.625rem; 46 | width: 2.625rem; 47 | text-align: center; 48 | padding: .625rem; 49 | } 50 | } 51 | 52 | & > .content { 53 | //padding: .625rem; 54 | background-color: #e8f1f4; 55 | z-index: 1; 56 | .text-default; 57 | } 58 | 59 | &.collapsible { 60 | & > .heading { 61 | cursor: pointer; 62 | 63 | &:before { 64 | content: "\2212"; 65 | display: block; 66 | position: absolute; 67 | top: 50%; 68 | margin-top: -1.3rem; 69 | right: .625rem; 70 | color: inherit; 71 | vertical-align: middle; 72 | font-size: 2rem; 73 | } 74 | } 75 | } 76 | 77 | &.collapsed { 78 | & > .heading { 79 | &:before { 80 | content: "\002b"; 81 | } 82 | } 83 | 84 | & > .content { 85 | display: none; 86 | } 87 | } 88 | 89 | &.alert, &.error, &.danger { 90 | & > .heading { 91 | background-color: @red; 92 | } 93 | } 94 | 95 | &.warning { 96 | & > .heading { 97 | background-color: @orange; 98 | } 99 | } 100 | 101 | &.success { 102 | & > .heading { 103 | background-color: @green; 104 | } 105 | } 106 | } -------------------------------------------------------------------------------- /src/assets/less/toolbars.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "buttons"; 3 | @import (once) "utils"; 4 | 5 | .toolbar { 6 | position: relative; 7 | .clear-float; 8 | } 9 | 10 | .toolbar-section { 11 | position: relative; 12 | padding-left: .5725rem; 13 | margin: .125rem; 14 | float: left; 15 | width: auto; 16 | 17 | &.no-divider { 18 | &:before { 19 | display: none; 20 | } 21 | } 22 | 23 | &:before { 24 | position: absolute; 25 | content: ""; 26 | width: .325rem; 27 | height: 100%; 28 | left: 0; 29 | background-color: @grayLighter; 30 | cursor: move; 31 | } 32 | } 33 | 34 | .toolbar { 35 | .toolbar-button { 36 | .square-button; 37 | margin: 0; 38 | } 39 | } 40 | 41 | .toolbar-group, .toolbar-section { 42 | display: inline-block; 43 | 44 | &.condensed { 45 | .clear-float; 46 | 47 | .button, .toolbar-button { 48 | display: block; 49 | float: left; 50 | } 51 | } 52 | } 53 | 54 | .toolbar-group { 55 | &-check { 56 | .toolbar-button { 57 | &.checked { 58 | background-color: @lightCyan; 59 | color: @white; 60 | border-color: @lightCyan; 61 | } 62 | } 63 | } 64 | 65 | &-radio { 66 | .toolbar-button { 67 | &.checked { 68 | background-color: @lightCyan; 69 | color: @white; 70 | border-color: @lightCyan; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .toolbar { 77 | &.rounded { 78 | & > .toolbar-button, & > .toolbar-section .toolbar-button { 79 | border-radius: .3125rem; 80 | } 81 | 82 | .toolbar-section { 83 | &:before { 84 | border-radius: .3125rem; 85 | } 86 | } 87 | } 88 | } 89 | 90 | .v-toolbar { 91 | .toolbar; 92 | float: left; 93 | 94 | .toolbar-section { 95 | padding-left: 0; 96 | padding-top: .5725rem; 97 | 98 | &:before { 99 | width: 100%; 100 | top: 0; 101 | height: .325rem; 102 | } 103 | } 104 | 105 | .toolbar-button { 106 | display: block; 107 | margin-bottom: .25rem; 108 | } 109 | 110 | &.no-divider { 111 | .toolbar-section:before {display: none} 112 | } 113 | } -------------------------------------------------------------------------------- /src/assets/less/datatable.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Third-party plugin DataTables 3 | * Plugin home page: http://datatables.net/ 4 | */ 5 | 6 | @import (once) "vars"; 7 | @import (once) "utils"; 8 | @import (once) "tables"; 9 | @import (once) "pagination"; 10 | 11 | .dataTable { 12 | .table; 13 | clear: both; 14 | } 15 | 16 | .dataTable { 17 | .sorting { 18 | .table > .sortable-column; 19 | } 20 | 21 | .sorting_asc, .sorting_desc { 22 | position: relative; 23 | &:after { 24 | position: absolute; 25 | content: ""; 26 | width: 1rem; 27 | height: 1rem; 28 | left: 100%; 29 | margin-left: -20px; 30 | top: 50%; 31 | margin-top: -.5rem; 32 | color: inherit; 33 | line-height: 1; 34 | font-size: 1.1rem; 35 | } 36 | } 37 | .sorting_asc { 38 | .table > .sortable-column > .sort-asc; 39 | } 40 | .sorting_desc { 41 | .table > .sortable-column > .sort-desc; 42 | } 43 | } 44 | 45 | .dataTables_paginate { 46 | .pagination; 47 | float: left; 48 | width: 50%; 49 | margin: 0; 50 | 51 | .paginate_button { 52 | .pagination > .item; 53 | } 54 | 55 | .ellipsis { 56 | display: block; 57 | float: left; 58 | padding: .25rem .625rem; 59 | } 60 | } 61 | 62 | .dataTables_info { 63 | padding: 5px; 64 | background-color: @grayLighter; 65 | font-size: .875rem; 66 | float: right; 67 | } 68 | 69 | .dataTables_length { 70 | display: block; 71 | float: left; 72 | margin: .625rem 0; 73 | 74 | select { 75 | .no-appearance; 76 | margin: 0 .125rem; 77 | padding: .3125rem; 78 | border: 1px #d9d9d9 solid; 79 | 80 | &:focus { 81 | outline: none; 82 | border-color: @dark; 83 | } 84 | } 85 | } 86 | 87 | .dataTables_filter { 88 | display: block; 89 | float: right; 90 | margin: .625rem 0; 91 | 92 | label > input { 93 | margin: 0 0 0 .25rem; 94 | } 95 | 96 | input { 97 | .no-appearance; 98 | padding: .3125rem; 99 | border: 1px #d9d9d9 solid; 100 | 101 | &:focus { 102 | outline: none; 103 | border-color: @dark; 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /src/assets/less/stepper.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .stepper { 5 | margin: 10px 0; 6 | width: 100%; 7 | .clear-float; 8 | 9 | & > ul { 10 | counter-reset:li; 11 | border-top: 1px @dark dotted; 12 | position: relative; 13 | padding: 0; 14 | margin: 30px 0; 15 | width: 100%; 16 | display: block; 17 | 18 | li { 19 | list-style: none; 20 | float: left; 21 | width: 2em; 22 | height: 2em; 23 | margin-top: -1em; 24 | position: absolute; 25 | left: 0; 26 | background:#666; 27 | cursor: pointer; 28 | font-size: .875rem; 29 | 30 | &:before { 31 | content:counter(li); 32 | counter-increment:li; 33 | position:absolute; 34 | box-sizing:border-box; 35 | padding:.3em 10px; 36 | color:#fff; 37 | font-weight:bold; 38 | font-family:"Helvetica Neue", Arial, sans-serif; 39 | font-size: .9em; 40 | text-align:center; 41 | } 42 | 43 | &:hover { 44 | background-color: @grayLight; 45 | } 46 | 47 | &.current, &.complete { 48 | transition: all 0.2s ease; 49 | } 50 | 51 | &.current { 52 | background-color: @cyan; 53 | //.scale(1.5); 54 | 55 | &:hover { 56 | background-color: @lighterBlue; 57 | } 58 | } 59 | &.complete { 60 | background-color: @green; 61 | 62 | &:before { 63 | } 64 | 65 | &:hover { 66 | background-color: @lightGreen; 67 | } 68 | } 69 | } 70 | } 71 | &.cycle { 72 | li { 73 | border-radius: 50%; 74 | } 75 | } 76 | &.diamond { 77 | li { 78 | .rotate(45deg); 79 | &:before { 80 | .rotate(-45deg); 81 | } 82 | } 83 | 84 | } 85 | } -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: true, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jntoo-win10", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "jntoo <274987096@qq.com>", 6 | "repository": "https://github.com/jntoo/vue-win10.git", 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "analyze": "NODE_ENV=production npm_config_report=true npm run build", 10 | "start": "npm run dev", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.18.0", 15 | "less": "^3.0.1", 16 | "less-loader": "^4.1.0", 17 | "qs": "^6.5.1", 18 | "vue": "^2.5.2", 19 | "vue-axios": "^2.1.1", 20 | "vue-router": "^3.0.1" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 26 | "babel-loader": "^7.1.1", 27 | "babel-plugin-syntax-jsx": "^6.18.0", 28 | "babel-plugin-transform-runtime": "^6.22.0", 29 | "babel-plugin-transform-vue-jsx": "^3.5.0", 30 | "babel-preset-env": "^1.3.2", 31 | "babel-preset-stage-2": "^6.22.0", 32 | "chalk": "^2.0.1", 33 | "copy-webpack-plugin": "^4.0.1", 34 | "css-loader": "^0.28.0", 35 | "extract-text-webpack-plugin": "^3.0.0", 36 | "file-loader": "^1.1.4", 37 | "friendly-errors-webpack-plugin": "^1.6.1", 38 | "html-webpack-plugin": "^2.30.1", 39 | "node-notifier": "^5.1.2", 40 | "optimize-css-assets-webpack-plugin": "^3.2.0", 41 | "ora": "^1.2.0", 42 | "portfinder": "^1.0.13", 43 | "postcss-import": "^11.0.0", 44 | "postcss-loader": "^2.0.8", 45 | "postcss-url": "^7.2.1", 46 | "rimraf": "^2.6.0", 47 | "semver": "^5.3.0", 48 | "shelljs": "^0.7.6", 49 | "uglifyjs-webpack-plugin": "^1.1.1", 50 | "url-loader": "^0.5.8", 51 | "vue-loader": "^13.3.0", 52 | "vue-style-loader": "^3.0.1", 53 | "vue-template-compiler": "^2.5.2", 54 | "webpack": "^3.6.0", 55 | "webpack-bundle-analyzer": "^2.11.1", 56 | "webpack-dev-server": "^2.9.1", 57 | "webpack-merge": "^4.1.0" 58 | }, 59 | "engines": { 60 | "node": ">= 6.0.0", 61 | "npm": ">= 3.0.0" 62 | }, 63 | "browserslist": [ 64 | "> 1%", 65 | "last 2 versions", 66 | "not ie <= 8" 67 | ] 68 | } 69 | -------------------------------------------------------------------------------- /src/assets/less/treeview.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | // leaf 5 | // node 6 | 7 | .treeview { 8 | margin: 0; 9 | padding: 0; 10 | display: block; 11 | font-size: .75rem; 12 | 13 | ul { 14 | margin: 0; 15 | padding: 0; 16 | list-style: none; 17 | width: 100%; 18 | font-size: inherit; 19 | } 20 | 21 | li { 22 | font-size: inherit; 23 | padding: 2px 16px; 24 | cursor: pointer; 25 | position: relative; 26 | color: @gray; 27 | vertical-align: middle; 28 | .no-user-select; 29 | 30 | &.active > .leaf { 31 | font-weight: bold; 32 | } 33 | 34 | &.disabled { 35 | cursor: default; 36 | color: @grayLight; 37 | 38 | &:hover > .leaf { 39 | color: @grayLight; 40 | } 41 | } 42 | } 43 | 44 | li { 45 | .input-control { 46 | margin: 0 .3125rem 0 0; 47 | height: 1rem; 48 | line-height: .625rem; 49 | min-height: 0; 50 | 51 | .check { 52 | line-height: 1rem; 53 | } 54 | } 55 | } 56 | 57 | ul > li > .leaf { 58 | &:hover { 59 | color: @dark; 60 | } 61 | } 62 | 63 | .leaf { 64 | vertical-align: middle; 65 | display: inline-block; 66 | color: inherit; 67 | } 68 | 69 | .leaf { 70 | .icon { 71 | width: 1rem; 72 | height: 1rem; 73 | text-align: center; 74 | } 75 | } 76 | 77 | .node-toggle { 78 | position: absolute; 79 | left: 0; 80 | top: 8px; 81 | width: 8px; 82 | height: 8px; 83 | 84 | &:before { 85 | position: absolute; 86 | display: block; 87 | left: 0; 88 | top: -3px; 89 | height: 0; 90 | content: ''; 91 | width: 0; 92 | border-left: 7px solid transparent; 93 | border-top: 7px solid transparent; 94 | border-bottom: 7px @cyan solid; 95 | } 96 | } 97 | 98 | li:hover > .node-toggle { 99 | &:before { 100 | border-bottom-color: @darkCyan; 101 | } 102 | } 103 | 104 | .node { 105 | &.collapsed { 106 | & > .node-toggle { 107 | &:before { 108 | left: -4px; 109 | .rotate-45; 110 | border-bottom-color: @grayLight; 111 | } 112 | } 113 | 114 | &:hover { 115 | & > .node-toggle { 116 | &:before { 117 | border-bottom-color: @darkCyan; 118 | } 119 | } 120 | } 121 | 122 | & > ul { 123 | display: none; 124 | } 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /src/assets/less/dialog.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .dialog-overlay { 5 | background-color: @transparent; 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | right: 0; 10 | bottom: 0; 11 | min-height: 100%; 12 | min-width: 100%; 13 | z-index: @zindexModal - 1; 14 | } 15 | 16 | .dialog { 17 | position: fixed; 18 | display: block; 19 | width: auto; 20 | height: auto; 21 | float: left; 22 | background-color: @white; 23 | color: @dark; 24 | z-index: @zindexModal; 25 | 26 | .block-shadow; 27 | 28 | .dialog-close-button { 29 | position: absolute; 30 | height: 1.5rem; 31 | width: 1.5rem; 32 | min-height: 1.5rem; 33 | text-align: center; 34 | vertical-align: middle; 35 | font-size: 1rem; 36 | font-weight: normal; 37 | padding: .125rem 0 .625rem 0; 38 | z-index: 3; 39 | outline: none; 40 | cursor: pointer; 41 | 42 | background-color: @winFlatBackgroundColor; 43 | color: @winFlatSystemButtonRestColor; 44 | top: .25rem; 45 | right: .25rem; 46 | 47 | &:hover { 48 | background-color: @winFlatSystemButtonHoverBackground; 49 | color: @winFlatSystemButtonActiveColor; 50 | &:after { 51 | border-color: @winFlatSystemButtonActiveColor; 52 | } 53 | } 54 | &:active { 55 | background-color: @winFlatSystemButtonActiveBackground; 56 | color: @white; 57 | } 58 | &:after { 59 | border-color: @winFlatSystemButtonRestColor; 60 | content: '\D7'; 61 | line-height: 1; 62 | } 63 | } 64 | 65 | &.success { 66 | background-color: @green; 67 | color: @white; 68 | .dialog-close-button { 69 | background-color: @lightGreen; 70 | color: @white; 71 | 72 | &:active { 73 | background-color: @darkGreen; 74 | } 75 | } 76 | } 77 | &.warning { 78 | background-color: @orange; 79 | color: @white; 80 | .dialog-close-button { 81 | background-color: @lightOrange; 82 | color: @white; 83 | 84 | &:active { 85 | background-color: @darkOrange; 86 | } 87 | } 88 | } 89 | &.alert { 90 | background-color: @red; 91 | color: @white; 92 | .dialog-close-button { 93 | background-color: @lightRed; 94 | color: @white; 95 | 96 | &:active { 97 | background-color: @darkRed; 98 | } 99 | } 100 | } 101 | &.info { 102 | background-color: @cyan; 103 | color: @white; 104 | .dialog-close-button { 105 | background-color: @lightCyan; 106 | color: @white; 107 | 108 | &:active { 109 | background-color: @darkCyan; 110 | } 111 | } 112 | } 113 | } -------------------------------------------------------------------------------- /src/assets/less/wizard2.less: -------------------------------------------------------------------------------- 1 | @import (once) "utils"; 2 | 3 | .wizard2 { 4 | counter-reset: div; 5 | position: relative; 6 | width: 100%; 7 | .clear-float; 8 | 9 | .step { 10 | width: auto; 11 | //height: auto; 12 | display: block; 13 | float: left; 14 | position: relative; 15 | z-index: 1; 16 | padding: 0 0 3rem; 17 | } 18 | 19 | .step:before { 20 | content: counter(div); 21 | counter-increment: div; 22 | position: absolute; 23 | font-size: .8rem; 24 | bottom: 20px; 25 | width: 24px; 26 | text-align: center; 27 | } 28 | 29 | .step { 30 | 31 | &.active { 32 | border: 0; 33 | //min-width: 200px; 34 | 35 | &:before { 36 | visibility: hidden; 37 | } 38 | } 39 | 40 | &.prev { 41 | border-left: 24px solid @grayLighter; 42 | border-right: 1px solid darken(@grayLighter, 3%); 43 | width: 0 ; 44 | 45 | &:before { 46 | left: 0 ; 47 | margin-left: -24px; 48 | color: @dark; 49 | } 50 | } 51 | 52 | &.next { 53 | border-left: 1px solid darken(@grayLighter, 3%); 54 | border-right: 24px solid @cyan; 55 | width: 0; 56 | 57 | &:before { 58 | left: 100%; 59 | color: @white; 60 | } 61 | } 62 | 63 | &.next + .next{ 64 | border-color: darken(@cyan, 5%); 65 | } 66 | &.next + .next + .next{ 67 | border-color: darken(@cyan, 10%); 68 | } 69 | &.next + .next + .next + .next{ 70 | border-color: darken(@cyan, 15%); 71 | } 72 | &.next + .next + .next + .next + .next{ 73 | border-color: darken(@cyan, 20%); 74 | } 75 | &.next + .next + .next + .next + .next + .next{ 76 | border-color: darken(@cyan, 30%); 77 | } 78 | &.next + .next + .next + .next + .next + .next + .next{ 79 | border-color: darken(@cyan, 35%); 80 | } 81 | &.next + .next + .next + .next + .next + .next + .next + .next{ 82 | border-color: darken(@cyan, 40%); 83 | } 84 | &.next + .next + .next + .next + .next + .next + .next + .next + .next{ 85 | border-color: darken(@cyan, 45%); 86 | } 87 | } 88 | 89 | .step-content { 90 | //height: 100%; 91 | width: auto; 92 | overflow: hidden; 93 | padding: .625rem; 94 | } 95 | 96 | .step.prev, .step.next { 97 | .step-content { 98 | width: 0 ; 99 | padding: 0 ; 100 | } 101 | } 102 | } 103 | 104 | .wizard2 { 105 | .action-bar { 106 | padding: 0 .625rem; 107 | position: absolute; 108 | bottom: 10px; 109 | text-align: right; 110 | z-index: 2; 111 | .clear-float; 112 | 113 | .button { 114 | margin: 0 .125rem; 115 | opacity: .6; 116 | 117 | &:hover { 118 | opacity: 1; 119 | } 120 | } 121 | } 122 | } -------------------------------------------------------------------------------- /src/assets/less/transform.less: -------------------------------------------------------------------------------- 1 | @import (once) "utils"; 2 | 3 | /* transform functions */ 4 | .perspective(@perspective) { 5 | transform: perspective(@perspective); 6 | } 7 | .rotate(@degrees) { 8 | transform: rotate(@degrees); 9 | } 10 | .rotateX(@degrees) { 11 | transform: rotateX(@degrees); 12 | } 13 | .rotateY(@degrees) { 14 | transform: rotateY(@degrees); 15 | } 16 | .rotateZ(@degrees) { 17 | transform: rotateZ(@degrees); 18 | } 19 | .scale(@ratio) { 20 | transform: scale(@ratio); 21 | } 22 | .scaleX(@ratio) { 23 | transform: scaleX(@ratio); 24 | } 25 | .scaleY(@ratio) { 26 | transform: scaleY(@ratio); 27 | } 28 | .translate(@x: 0, @y: 0) { 29 | transform: translate(@x, @y); 30 | } 31 | .skew(@x: 0, @y: 0) { 32 | transform: skew(@x, @y); 33 | } 34 | .translate3d(@x: 0, @y: 0, @z: 0) { 35 | transform: translate(@x, @y, @z); 36 | } 37 | 38 | .transformOrigin(@origin) { 39 | transform-origin: @origin; 40 | } 41 | 42 | .transition(@time: 1s, @func: ease, @target: all){ 43 | transition: @target @time @func; 44 | } 45 | 46 | .translateX(@x: 0) { 47 | transform: translateX(@x); 48 | } 49 | .translateY(@y: 0) { 50 | transform: translateY(@y); 51 | } 52 | 53 | .rotate45 {.rotate(45deg);} 54 | .rotate90 {.rotate(90deg);} 55 | .rotate135 {.rotate(135deg);} 56 | .rotate180 {.rotate(180deg);} 57 | .rotate225 {.rotate(225deg);} 58 | .rotate270 {.rotate(270deg);} 59 | .rotate360 {.rotate(360deg);} 60 | 61 | .rotate-45 {.rotate(-45deg);} 62 | .rotate-90 {.rotate(-90deg);} 63 | .rotate-135 {.rotate(-135deg);} 64 | .rotate-180 {.rotate(-180deg);} 65 | .rotate-225 {.rotate(-225deg);} 66 | .rotate-270 {.rotate(-270deg);} 67 | .rotate-360 {.rotate(-360deg);} 68 | 69 | .rotateX45 {.rotateX(45deg);} 70 | .rotateX90 {.rotateX(90deg);} 71 | .rotateX135 {.rotateX(135deg);} 72 | .rotateX180 {.rotateX(180deg);} 73 | .rotateX225 {.rotateX(225deg);} 74 | .rotateX270 {.rotateX(270deg);} 75 | .rotateX360 {.rotateX(360deg);} 76 | 77 | .rotateX-45 {.rotateX(-45deg);} 78 | .rotateX-90 {.rotateX(-90deg);} 79 | .rotateX-135 {.rotateX(-135deg);} 80 | .rotateX-180 {.rotateX(-180deg);} 81 | .rotateX-225 {.rotateX(-225deg);} 82 | .rotateX-270 {.rotateX(-270deg);} 83 | .rotateX-360 {.rotateX(-360deg);} 84 | 85 | .rotateY45 {.rotateY(45deg);} 86 | .rotateY90 {.rotateY(90deg);} 87 | .rotateY135 {.rotateY(135deg);} 88 | .rotateY180 {.rotateY(180deg);} 89 | .rotateY225 {.rotateY(225deg);} 90 | .rotateY270 {.rotateY(270deg);} 91 | .rotateY360 {.rotateY(360deg);} 92 | 93 | .rotateY-45 {.rotateY(-45deg);} 94 | .rotateY-90 {.rotateY(-90deg);} 95 | .rotateY-135 {.rotateY(-135deg);} 96 | .rotateY-180 {.rotateY(-180deg);} 97 | .rotateY-225 {.rotateY(-225deg);} 98 | .rotateY-270 {.rotateY(-270deg);} 99 | .rotateY-360 {.rotateY(-360deg);} 100 | 101 | -------------------------------------------------------------------------------- /src/assets/less/grid.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "transform"; 4 | 5 | 6 | .grid { 7 | display: block; 8 | position: relative; 9 | margin: .625rem 0; 10 | .clear-float; 11 | 12 | .row { 13 | width: 100%; 14 | display: block; 15 | .margin(0, 0, @gridMargin, 0); 16 | .clear-float; 17 | 18 | &:last-child { 19 | margin-bottom: 0; 20 | } 21 | 22 | & > .cell { 23 | display: block; 24 | position: relative; 25 | float: left; 26 | width: 100%; 27 | min-height: 10px; 28 | .margin(0, 0, 0, @gridMargin); 29 | &:first-child { 30 | margin-left: 0; 31 | } 32 | } 33 | 34 | .generate-cell(@gridColumns); 35 | 36 | .generate-cell(@n, @i: 2) when (@i =< @n){ 37 | @width: 0% + ( 100 - (@i - 1) * @gridMargin ) / @i; 38 | 39 | &.cells@{i} { 40 | & > .cell { 41 | width: (@width); 42 | 43 | .generate-colspan(@i); 44 | .generate-colspan(@j, @k: 2) when (@k =< @j){ 45 | &.colspan@{k} { 46 | width: @width * @k + ((@k - 1) * @gridMargin); 47 | } 48 | .generate-colspan(@j, (@k + 1)); 49 | } 50 | 51 | .generate-offset(@i); 52 | .generate-offset(@j, @k: 1) when (@k =< @j){ 53 | &.offset@{k} { 54 | margin-left: @width * @k + ((@k - 1) * @gridMargin) + @gridMargin; 55 | } 56 | .generate-offset(@j, (@k + 1)); 57 | } 58 | } 59 | } 60 | 61 | .generate-cell(@n, (@i + 1)); 62 | } 63 | } 64 | 65 | .row:empty { 66 | display: none; 67 | } 68 | } 69 | 70 | .grid.condensed { 71 | .row { 72 | .margin(0, 0, @gridMarginCondensed, 0); 73 | 74 | &:last-child { 75 | margin-bottom: 0; 76 | } 77 | 78 | & > .cell { 79 | .margin(0, 0, 0, @gridMarginCondensed); 80 | } 81 | 82 | .generate-cell(@gridColumns); 83 | 84 | .generate-cell(@n, @i: 2) when (@i =< @n){ 85 | @width: 0% + ( 100 - (@i - 1) * @gridMarginCondensed ) / @i; 86 | 87 | &.cells@{i} { 88 | & > .cell { 89 | width: (@width); 90 | 91 | .generate-colspan(@i); 92 | .generate-colspan(@j, @k: 2) when (@k =< @j){ 93 | &.colspan@{k} { 94 | width: @width * @k + ((@k - 1) * @gridMarginCondensed); 95 | } 96 | .generate-colspan(@j, (@k + 1)); 97 | } 98 | 99 | .generate-offset(@i); 100 | .generate-offset(@j, @k: 1) when (@k =< @j){ 101 | &.offset@{k} { 102 | margin-left: @width * @k + ((@k - 1) * @gridMarginCondensed); 103 | } 104 | .generate-offset(@j, (@k + 1)); 105 | } 106 | 107 | } 108 | } 109 | 110 | .generate-cell(@n, (@i + 1)); 111 | } 112 | } 113 | } 114 | 115 | -------------------------------------------------------------------------------- /src/components/win10/tile.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /src/Vue-extend.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by JnToo on 2018/3/28. 3 | */ 4 | import jdk from './jdk/extend' 5 | 6 | function install(Vue) { 7 | Vue.prototype.$remove = function (target,key) { 8 | if(jdk.isObject(key)){ 9 | jdk.each(target , (index,obj)=>{ 10 | if(obj === key){ 11 | this.$delete(target , index); 12 | } 13 | }); 14 | }else{ 15 | this.$delete(target , key); 16 | } 17 | } 18 | Vue.$eventUntil = { 19 | // 视能力分别使用dom0||dom2||IE方式 来绑定事件 20 | // 下面的顺序：标准dom2，IE dom2， dom 21 | // 参数： 操作的元素,事件名称 ,事件处理程序 22 | addEvent : function(element, type, handler) { 23 | if (element.addEventListener) { 24 | //事件类型、需要执行的函数、是否捕捉 25 | element.addEventListener(type, handler, false); 26 | } else if (element.attachEvent) { 27 | element.attachEvent('on' + type, function() { 28 | handler.call(element); 29 | }); 30 | } else { 31 | element['on' + type] = handler; 32 | } 33 | }, 34 | // 移除事件 35 | removeEvent : function(element, type, handler) { 36 | if (element.removeEnentListener) { 37 | element.removeEnentListener(type, handler, false); 38 | } else if (element.datachEvent) { 39 | element.detachEvent('on' + type, handler); 40 | } else { 41 | element['on' + type] = null; 42 | } 43 | }, 44 | // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获) 45 | stopPropagation : function(ev) { 46 | if (ev.stopPropagation) { 47 | ev.stopPropagation();// 标准w3c 48 | } else { 49 | ev.cancelBubble = true;// IE 50 | } 51 | }, 52 | // 取消事件的默认行为 53 | preventDefault : function(event) { 54 | if (event.preventDefault) { 55 | event.preventDefault();// 标准w3c 56 | } else { 57 | event.returnValue = false;// IE 58 | } 59 | }, 60 | // 获取事件目标 61 | getTarget : function(event) { 62 | // 标准W3C 和 IE 63 | return event.target || event.srcElement; 64 | }, 65 | // 获取event对象的引用，取到事件的所有信息，确保随时能使用event； 66 | getEvent : function(e) { 67 | var ev = e || window.event; 68 | if (!ev) { 69 | var c = this.getEvent.caller; 70 | while (c) { 71 | ev = c.arguments[0]; 72 | if (ev && Event == ev.constructor) { 73 | break; 74 | } 75 | c = c.caller; 76 | } 77 | } 78 | return ev; 79 | } 80 | } 81 | } 82 | 83 | export default install -------------------------------------------------------------------------------- /src/assets/less/accordion.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "transform"; 4 | 5 | .accordion { 6 | & > .frame { 7 | margin-top: 1px; 8 | 9 | &:first-child { 10 | margin-top: 0; 11 | } 12 | 13 | & > .heading { 14 | display: block; 15 | padding: 8px 16px 8px 20px; 16 | background-color: lighten(@grayLighter, 3%); 17 | cursor: pointer; 18 | font-size: .6875rem; 19 | text-transform: uppercase; 20 | font-weight: bold; 21 | position: relative; 22 | border: 1px @grayLighter solid; 23 | overflow: hidden; 24 | z-index: 2; 25 | .no-user-select; 26 | .transition(.3s); 27 | 28 | &:before { 29 | position: absolute; 30 | display: block; 31 | left: 4px; 32 | top: 6px; 33 | content: ''; 34 | width: 0; 35 | height: 0; 36 | border-left: 6px solid transparent; 37 | border-top: 6px solid transparent; 38 | border-bottom: 6px solid black; 39 | .rotate-45; 40 | .transition(.3s); 41 | } 42 | 43 | &:hover { 44 | background-color: @grayLighter; 45 | } 46 | 47 | .icon { 48 | position: absolute; 49 | right: 0; 50 | top: 0; 51 | font-size: 3rem; 52 | width: 3rem; 53 | max-height: 3rem; 54 | opacity: .6; 55 | color: @grayLight; 56 | } 57 | } 58 | 59 | &.active > .heading { 60 | background-color: @cyan; 61 | border-color: @cyan; 62 | color: @white; 63 | .bottom-shadow; 64 | .text-shadow; 65 | .transition(.3s); 66 | 67 | .icon { 68 | color: @white; 69 | } 70 | 71 | &:before { 72 | left: 8px; 73 | border-bottom-color: @white; 74 | .transition(.3s); 75 | .rotate(0deg); 76 | .transformOrigin(50% 50%); 77 | } 78 | } 79 | 80 | &.active > .content { 81 | display: block; 82 | } 83 | 84 | & > .content { 85 | padding: .625rem; 86 | display: none; 87 | background-color: @white; 88 | z-index: 1; 89 | } 90 | 91 | &.disabled { 92 | & > .heading { 93 | cursor: default; 94 | background: @white linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 95 | background-size: 40px 40px; 96 | // .ribbed-white; 97 | } 98 | 99 | & > .content { 100 | } 101 | } 102 | } 103 | 104 | &.large-heading { 105 | & > .frame { 106 | & > .heading { 107 | font-size: 2rem; 108 | line-height: 1.1; 109 | font-weight: 300; 110 | padding-left: 32px; 111 | text-shadow: none; 112 | 113 | &:before { 114 | top: 10px; 115 | border-left: 12px solid transparent; 116 | border-top: 12px solid transparent; 117 | border-bottom: 12px solid black; 118 | } 119 | } 120 | 121 | &.active { 122 | & > .heading { 123 | &:before { 124 | border-bottom-color: @white; 125 | } 126 | } 127 | } 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /src/assets/less/hints.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "transform"; 3 | 4 | p [data-hint]{ 5 | border-bottom: 1px #373737 dotted; 6 | white-space: nowrap; 7 | } 8 | 9 | .hint { 10 | position: fixed; 11 | color: @dark; 12 | padding: 10px; 13 | font-size: 12px; 14 | width: auto; 15 | max-width: 220px; 16 | margin-top: 10px; 17 | z-index: @zindexTooltip; 18 | display: none; 19 | border: 1px #eee solid; 20 | 21 | .hint-title, .hint-text { 22 | color: inherit; 23 | text-align: left; 24 | } 25 | 26 | .hint-title { 27 | font-size: 1.2em; 28 | font-weight: bold; 29 | } 30 | 31 | .hint-text { 32 | } 33 | } 34 | 35 | // hint bottom 36 | 37 | .hint { 38 | &:before { 39 | content: ''; 40 | position: absolute; 41 | background-color: inherit; 42 | width: 10px; 43 | height: 10px; 44 | border: 1px #eee solid; 45 | .rotate(45deg); 46 | } 47 | &:before { 48 | z-index: 2; 49 | } 50 | } 51 | 52 | .hint { 53 | &.bottom { 54 | &:before { 55 | top: 1px; 56 | left: 5px; 57 | margin: -7px 0; 58 | border-bottom: none; 59 | border-right: none; 60 | } 61 | } 62 | 63 | &.top { 64 | &:before { 65 | top: 100%; 66 | margin-top: -5px; 67 | left: 5px; 68 | border-top: none; 69 | border-left: none; 70 | } 71 | } 72 | 73 | &.left { 74 | &:before { 75 | top: 5px; 76 | left: 100%; 77 | margin-left: -5px; 78 | border-bottom: none; 79 | border-left: none; 80 | } 81 | } 82 | 83 | &.right { 84 | &:before { 85 | top: 5px; 86 | left: -9px; 87 | margin: 1px 0 0 3px; 88 | border-top: none; 89 | border-right: none; 90 | } 91 | } 92 | } 93 | 94 | .hint2 { 95 | .hint; 96 | 97 | &.bottom { 98 | &:before { 99 | top: 1px; 100 | left: 50%; 101 | margin: -7px 0 0 -5px; 102 | border-bottom: none; 103 | border-right: none; 104 | } 105 | } 106 | 107 | &.top { 108 | &:before { 109 | top: 100%; 110 | margin-top: -5px; 111 | left: 50%; 112 | margin-left: -5px; 113 | border-top: none; 114 | border-left: none; 115 | } 116 | } 117 | 118 | &.left { 119 | &:before { 120 | top: 50%; 121 | margin-top: -5px; 122 | left: 100%; 123 | margin-left: -5px; 124 | border-bottom: none; 125 | border-left: none; 126 | } 127 | } 128 | 129 | &.right { 130 | &:before { 131 | top: 50%; 132 | margin: -5px 0 0 3px; 133 | left: -9px; 134 | border-top: none; 135 | border-right: none; 136 | } 137 | } 138 | } 139 | 140 | .hint, .hint2 { 141 | &.no-border { 142 | border: none; 143 | &:before { 144 | border: none; 145 | } 146 | &.right { 147 | &:before { 148 | left: -7px; 149 | } 150 | } 151 | } 152 | } 153 | 154 | .hint2.line { 155 | padding: 2px 4px; 156 | border: none; 157 | display: block; 158 | //width: 100%; 159 | max-width: 100%; 160 | margin: -5px 0 4px 0; 161 | 162 | &:before { 163 | display: none; 164 | } 165 | } -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/mobile/layer.js: -------------------------------------------------------------------------------- 1 | /*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */ 2 | ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'

'+(e?n.title[0]:n.title)+"

":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e=''+n.btn[0]+"",2===t&&(e=''+n.btn[1]+""+e),'
'+e+"
"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='

'+(n.content||"")+"

"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"
':"")+'
"+l+'
'+n.content+"
"+c+"
",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o .star, &:hover > .star:after { 103 | color: gold ; 104 | &.half, &.on.half { 105 | color:gold; 106 | &:after { 107 | color:gold; 108 | } 109 | } 110 | } 111 | 112 | .star:hover ~ .star, .star:hover ~ .star:after { 113 | color: gray ; 114 | &.half, &.on.half { 115 | color:gray; 116 | &:after { 117 | color:gray; 118 | } 119 | } 120 | } 121 | 122 | } 123 | 124 | } 125 | 126 | .rating { 127 | &.small { 128 | .star { 129 | width: 14px; 130 | height: 16px; 131 | font-size: 14px; 132 | line-height: 14px; 133 | 134 | &.half { 135 | &:after { 136 | width: 6px; 137 | } 138 | } 139 | } 140 | } 141 | 142 | &.large { 143 | .star { 144 | width: 28px; 145 | height: 30px; 146 | font-size: 32px; 147 | line-height: 24px; 148 | 149 | &.half { 150 | &:after { 151 | width: 13px; 152 | } 153 | } 154 | } 155 | } 156 | } 157 | 158 | .rating { 159 | .score { 160 | display: block; 161 | font-size: .8rem; 162 | } 163 | 164 | &.small { 165 | .score { 166 | font-size: .6rem; 167 | } 168 | } 169 | 170 | &.large { 171 | .score { 172 | font-size: 1rem; 173 | } 174 | } 175 | } -------------------------------------------------------------------------------- /src/assets/less/windows.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | .overlay { 6 | position: fixed; 7 | left: 0; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | background-color: rgba(255,255,255, .5); 12 | z-index: @zindexModal - 1; 13 | 14 | &.transparent { 15 | background-color: rgba(255,255,255, 0); 16 | } 17 | } 18 | 19 | .window { 20 | display: block; 21 | position: relative; 22 | height: auto; 23 | width: 100%; 24 | background-color: @winFlatBackgroundColor; 25 | 26 | .block-shadow; 27 | } 28 | 29 | .window-caption { 30 | position: relative; 31 | background-color: @winFlatBackgroundColor; 32 | padding: .4375rem .3125rem; 33 | border-bottom: 1px @winFlatBorderColor solid; 34 | border-top: 0; 35 | cursor: default; 36 | 37 | .window-caption-title { 38 | font-size: .875rem; 39 | .text-bold; 40 | } 41 | 42 | .window-caption-icon { 43 | margin-left: .3125rem; 44 | * { 45 | height: 1rem; 46 | width: 1rem; 47 | } 48 | } 49 | 50 | .window-caption-icon ~ .window-caption-title { 51 | padding-left: .3125rem; 52 | } 53 | 54 | .btn-close, .btn-min, .btn-max { 55 | position: absolute; 56 | height: 1.5rem; 57 | width: 1.5rem; 58 | min-height: 1.5rem; 59 | text-align: center; 60 | vertical-align: middle; 61 | font-size: 1rem; 62 | font-weight: normal; 63 | padding: 0 0 .625rem 0; 64 | z-index: 3; 65 | outline: none; 66 | cursor: pointer; 67 | display: block; 68 | 69 | background-color: @winFlatBackgroundColor; 70 | color: @winFlatSystemButtonRestColor; 71 | top: .25rem; 72 | right: .25rem; 73 | &:hover { 74 | background-color: @winFlatSystemButtonHoverBackground; 75 | color: @winFlatSystemButtonActiveColor; 76 | &:after { 77 | border-color: @winFlatSystemButtonActiveColor; 78 | } 79 | } 80 | &:active { 81 | background-color: @winFlatSystemButtonActiveBackground; 82 | color: @white; 83 | } 84 | &:after { 85 | border-color: @winFlatSystemButtonRestColor; 86 | content: '\D7'; 87 | position: absolute; 88 | left: 50%; 89 | top: -2px; 90 | margin-left: -.25em; 91 | } 92 | } 93 | 94 | .btn-min, .btn-max { 95 | &:after { 96 | display: block; 97 | position: absolute; 98 | width: .625rem; 99 | height: .625rem; 100 | border: 0 #000 solid; 101 | border-bottom-width: 2px; 102 | content: ' '; 103 | bottom: .375rem; 104 | left: 50%; 105 | margin-left: -.375rem; 106 | top: auto; 107 | } 108 | } 109 | 110 | .btn-max { 111 | &:after { 112 | height: .375rem; 113 | border: 1px #000 solid; 114 | border-top-width: 2px; 115 | } 116 | } 117 | 118 | .btn-max { 119 | right: 1.8125rem; 120 | } 121 | .btn-min { 122 | right: 3.375rem; 123 | } 124 | .btn-close { 125 | &:after { 126 | margin-top: .1875rem; 127 | margin-left: -.3125rem; 128 | } 129 | } 130 | } 131 | 132 | .window-content { 133 | position: relative; 134 | width: 100%; 135 | height: auto; 136 | display: block; 137 | padding: .25rem; 138 | } 139 | 140 | .window { 141 | &.success { 142 | .window-caption { 143 | background-color: @green; 144 | color: @white; 145 | } 146 | .block-shadow-success; 147 | } 148 | } 149 | 150 | .window { 151 | &.error { 152 | .window-caption { 153 | background-color: @red; 154 | color: @white; 155 | } 156 | .block-shadow-error; 157 | } 158 | } 159 | 160 | .window { 161 | &.warning { 162 | .window-caption { 163 | background-color: @orange; 164 | color: @white; 165 | } 166 | .block-shadow-warning; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /src/assets/less/lists.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | .simple-list, .numeric-list { 6 | .unstyled-list; 7 | counter-reset:li; 8 | padding-left:0; 9 | margin-left: .625rem; 10 | color: @textColor; 11 | 12 | li { 13 | position:relative; 14 | padding: 4px 12px; 15 | list-style:none; 16 | color: inherit; 17 | 18 | &:before { 19 | position: absolute; 20 | top: 50%; 21 | margin-top: -.8rem; 22 | left: -.625rem; 23 | color: @lightCyan; 24 | font-size: 2rem; 25 | vertical-align: middle; 26 | .square(1.25rem); 27 | line-height: 1.25rem; 28 | } 29 | } 30 | 31 | ul { 32 | margin: 4px .5em 0; 33 | } 34 | } 35 | 36 | .simple-list { 37 | & > li:before { 38 | content: "\2022"; 39 | } 40 | 41 | ul li:before { 42 | content: "\00B7"; 43 | } 44 | } 45 | 46 | .numeric-list { 47 | & > li { 48 | padding: 4px 12px 4px 18px; 49 | } 50 | 51 | & > li:before { 52 | content:counter(li); 53 | counter-increment:li; 54 | font-size: .8rem ; 55 | color: @white; 56 | background-color: @lightCyan; 57 | border-radius: 50%; 58 | .align-center; 59 | margin-top: -.65rem; 60 | } 61 | 62 | &.square-marker, &.square-bullet { 63 | & > li:before { 64 | border-radius: 0; 65 | } 66 | } 67 | } 68 | 69 | .simple-list, .numeric-list { 70 | &.large-bullet { 71 | 72 | li { 73 | 74 | margin: 6px 0; 75 | padding-left: 2rem; 76 | 77 | &:before { 78 | line-height: 2rem; 79 | .square(2rem); 80 | margin-top: -1rem; 81 | } 82 | } 83 | } 84 | } 85 | 86 | .simple-list { 87 | &.large-bullet { 88 | li { 89 | padding-left: 1rem; 90 | &:before { 91 | margin-top: -1.3rem; 92 | font-size: 3rem; 93 | //color: inherit; 94 | } 95 | } 96 | } 97 | } 98 | 99 | .simple-list { 100 | &.dark-bullet {li:before {color: @dark;}} 101 | &.alert-bullet {li:before {color: @red;}} 102 | &.info-bullet {li:before {color: @cyan;}} 103 | &.success-bullet {li:before {color: @green;}} 104 | &.warning-bullet {li:before {color: @yellow;}} 105 | &.red-bullet {li:before {color: @red;}} 106 | &.blue-bullet {li:before {color: @cyan;}} 107 | &.green-bullet {li:before {color: @green;}} 108 | &.yellow-bullet {li:before {color: @yellow;}} 109 | } 110 | 111 | .numeric-list { 112 | &.dark-bullet {li:before {background-color: @dark;}} 113 | &.alert-bullet {li:before {background-color: @red;}} 114 | &.info-bullet {li:before {background-color: @cyan;}} 115 | &.success-bullet {li:before {background-color: @green;}} 116 | &.warning-bullet {li:before {background-color: @yellow;}} 117 | &.red-bullet {li:before {background-color: @red;}} 118 | &.blue-bullet {li:before {background-color: @cyan;}} 119 | &.green-bullet {li:before {background-color: @green;}} 120 | &.yellow-bullet {li:before {background-color: @yellow;}} 121 | } 122 | 123 | .step-list { 124 | margin: 0 0 0 2rem; 125 | padding: 0; 126 | list-style-type: none; 127 | counter-reset:li; 128 | 129 | & > li { 130 | border-left: 1px #ccc solid; 131 | position: relative; 132 | padding: 0 .625rem; 133 | margin: .625rem; 134 | vertical-align: top; 135 | } 136 | 137 | & > li:before { 138 | position: absolute; 139 | content:counter(li); 140 | counter-increment:li; 141 | font-size: 2rem; 142 | color: @grayLight; 143 | left: 0; 144 | top: .3125rem; 145 | margin-left: -1.5rem; 146 | } 147 | } -------------------------------------------------------------------------------- /src/assets/less/notify.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .notify-container { 5 | position: fixed; 6 | top: 0; 7 | right: 0; 8 | width: auto; 9 | .clear-float; 10 | z-index: @zindexCharms + 1; 11 | 12 | &.position-left { 13 | left: 0; 14 | right: auto; 15 | } 16 | 17 | &.position-top { 18 | left: 0; 19 | right: 0; 20 | top: 0; 21 | height: auto; 22 | 23 | .notify { 24 | float: left; 25 | } 26 | } 27 | 28 | &.position-bottom { 29 | left: 0; 30 | right: 0; 31 | bottom: 0; 32 | top: auto; 33 | height: auto; 34 | 35 | .notify { 36 | float: left; 37 | } 38 | } 39 | } 40 | 41 | .notify { 42 | display: block; 43 | margin: .3125rem; 44 | padding: .625rem; 45 | min-width: 200px; 46 | cursor: default; 47 | max-width: 300px; 48 | position: relative; 49 | 50 | .notify-icon { 51 | width: 32px; 52 | height: 32px; 53 | font-size: 32px; 54 | text-align: center; 55 | position: absolute; 56 | margin: -16px 10px; 57 | top: 50%; 58 | left: 0; 59 | } 60 | 61 | .notify-icon ~ .notify-title, .notify-icon ~ .notify-text { 62 | position: relative; 63 | margin-left: 42px; 64 | } 65 | 66 | .notify-title, .notify-text { 67 | display: block; 68 | margin-right: 20px; 69 | } 70 | 71 | .notify-title { 72 | font-weight: 500; 73 | font-size: 1rem; 74 | } 75 | 76 | .notify-text { 77 | font-size: .875rem; 78 | } 79 | 80 | .notify-closer { 81 | position: absolute; 82 | height: 1rem; 83 | width: 1rem; 84 | text-align: center; 85 | vertical-align: middle; 86 | font-size: 1rem; 87 | font-weight: normal; 88 | padding: 0 0 .625rem 0; 89 | z-index: 3; 90 | outline: none; 91 | cursor: pointer; 92 | 93 | background-color: @winFlatBackgroundColor; 94 | color: @winFlatSystemButtonRestColor; 95 | top: .25rem; 96 | right: .25rem; 97 | 98 | &:after { 99 | border-color: @winFlatSystemButtonRestColor; 100 | content: '\D7'; 101 | position: absolute; 102 | left: 50%; 103 | top: 50%; 104 | margin-top: -.65rem; 105 | margin-left: -.35rem; 106 | } 107 | 108 | &:hover { 109 | background-color: @winFlatSystemButtonHoverBackground; 110 | color: @white; 111 | } 112 | 113 | &:active { 114 | background-color: @winFlatSystemButtonActiveBackground; 115 | color: @white; 116 | } 117 | } 118 | } 119 | 120 | .notify { 121 | background-color: rgba(229, 243, 251, 1); 122 | color: @dark; 123 | 124 | &.success { 125 | background-color: @green; 126 | color: @white; 127 | .notify-closer { 128 | background-color: @green; 129 | color: @white; 130 | &:hover { 131 | background-color: @lightGreen; 132 | } 133 | &:active { 134 | background-color: @darkGreen; 135 | } 136 | } 137 | } 138 | 139 | &.alert { 140 | background-color: @red; 141 | color: @white; 142 | .notify-closer { 143 | background-color: @red; 144 | color: @white; 145 | &:hover { 146 | background-color: @lightRed; 147 | } 148 | &:active { 149 | background-color: @darkRed; 150 | } 151 | } 152 | } 153 | 154 | &.warning { 155 | background-color: @orange; 156 | color: @white; 157 | .notify-closer { 158 | background-color: @orange; 159 | color: @white; 160 | &:hover { 161 | background-color: @lightOrange; 162 | } 163 | &:active { 164 | background-color: @darkOrange; 165 | } 166 | } 167 | } 168 | 169 | &.info { 170 | background-color: @cyan; 171 | color: @white; 172 | .notify-closer { 173 | background-color: @cyan; 174 | color: @white; 175 | &:hover { 176 | background-color: @lightCyan; 177 | } 178 | &:active { 179 | background-color: @darkCyan; 180 | } 181 | } 182 | } 183 | } -------------------------------------------------------------------------------- /src/assets/less/reset.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding: 0; 3 | margin: 0; 4 | height: 100%; 5 | } 6 | 7 | html, body, * { 8 | -webkit-box-sizing: border-box; 9 | -moz-box-sizing: border-box; 10 | box-sizing: border-box; 11 | } 12 | 13 | article, 14 | aside, 15 | details, 16 | figcaption, 17 | figure, 18 | footer, 19 | header, 20 | nav, 21 | section { 22 | display: block; 23 | } 24 | 25 | audio, 26 | canvas, 27 | video { 28 | display: inline-block; 29 | } 30 | 31 | audio:not([controls]) { 32 | display: none; 33 | } 34 | 35 | html { 36 | // -webkit-text-size-adjust: 100%; 37 | // -ms-text-size-adjust: 100%; 38 | } 39 | 40 | a:hover, 41 | a:active, 42 | .tile:active { 43 | outline: 0; 44 | } 45 | 46 | sub, 47 | sup { 48 | position: relative; 49 | font-size: 75%; 50 | line-height: 0; 51 | vertical-align: baseline; 52 | } 53 | sup { 54 | top: -0.5em; 55 | } 56 | sub { 57 | bottom: -0.25em; 58 | } 59 | 60 | img { 61 | max-width: 100%; 62 | height: auto; 63 | 64 | vertical-align: middle; 65 | border: 0; 66 | //-ms-interpolation-mode: bicubic; 67 | } 68 | 69 | #map_canvas img, 70 | .google-maps img { 71 | max-width: none; 72 | } 73 | 74 | button, 75 | input, 76 | select, 77 | textarea { 78 | margin: 0; 79 | font-size: 100%; 80 | vertical-align: middle; 81 | } 82 | 83 | button, 84 | input { 85 | line-height: normal; 86 | } 87 | 88 | button::-moz-focus-inner, 89 | input::-moz-focus-inner { 90 | padding: 0; 91 | border: 0; 92 | } 93 | 94 | button, 95 | html input[type="button"], 96 | input[type="reset"], 97 | input[type="submit"] { 98 | -webkit-appearance: button; 99 | cursor: pointer; 100 | } 101 | label, 102 | select, 103 | button, 104 | input[type="button"], 105 | input[type="reset"], 106 | input[type="submit"], 107 | input[type="radio"], 108 | input[type="checkbox"] { 109 | cursor: pointer; 110 | } 111 | input[type="search"] { 112 | box-sizing: content-box; 113 | appearance: textfield; 114 | } 115 | input[type="search"]::-webkit-search-decoration, 116 | input[type="search"]::-webkit-search-cancel-button { 117 | -webkit-appearance: none; 118 | } 119 | textarea { 120 | overflow: auto; 121 | vertical-align: top; 122 | } 123 | 124 | input[type=text]::-ms-clear, 125 | input[type=email]::-ms-clear, 126 | input[type=url]::-ms-clear, 127 | input[type=tel]::-ms-clear, 128 | input[type=number]::-ms-clear, 129 | input[type=time]::-ms-clear { 130 | display: none; 131 | } 132 | 133 | input[type=password]::-ms-reveal { 134 | display: none; 135 | } 136 | 137 | * { 138 | border-collapse: collapse; 139 | } 140 | 141 | a { 142 | text-decoration: none; 143 | } 144 | 145 | div, p, span { 146 | //position: relative; 147 | } 148 | 149 | 150 | @media print { 151 | a, 152 | a:visited { 153 | text-decoration: underline; 154 | } 155 | 156 | a[href]:after { 157 | content: " (" attr(href) ")"; 158 | } 159 | 160 | abbr[title]:after { 161 | content: " (" attr(title) ")"; 162 | } 163 | 164 | .ir a:after, 165 | a[href^="javascript:"]:after, 166 | a[href^="#"]:after { 167 | content: ""; 168 | } 169 | 170 | pre, 171 | blockquote { 172 | border: 1px solid #999; 173 | page-break-inside: avoid; 174 | } 175 | 176 | thead { 177 | display: table-header-group; 178 | } 179 | 180 | tr, 181 | img { 182 | page-break-inside: avoid; 183 | } 184 | 185 | img { 186 | max-width: 100%; 187 | } 188 | 189 | //@page {margin: 0.5cm;} 190 | 191 | p, 192 | h2, 193 | h3 { 194 | orphans: 3; 195 | widows: 3; 196 | } 197 | 198 | h2, 199 | h3 { 200 | page-break-after: avoid; 201 | } 202 | } -------------------------------------------------------------------------------- /src/assets/loaded.css: -------------------------------------------------------------------------------- 1 | /* 2 |
3 | 23 |
24 | 25 | */ 26 | 27 | .loadingContainer{ 28 | width: 100%; 29 | height: 100%; 30 | background: rgba(0, 0, 0, .1); 31 | position: fixed; 32 | top: 0%; 33 | left: 0%; 34 | } 35 | 36 | 37 | .spinner { 38 | width: 40px; 39 | height: 40px; 40 | position: absolute; 41 | top: 50%; 42 | left: 50%; 43 | transform: translate(-50%, -50%); 44 | -webkit-transform: translate(-50%, -50%); 45 | 46 | } 47 | 48 | .container1 > div, .container2 > div, .container3 > div { 49 | width: 10px; 50 | height: 10px; 51 | background-color: #333; 52 | 53 | border-radius: 100%; 54 | position: absolute; 55 | -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 56 | animation: bouncedelay 1.2s infinite ease-in-out; 57 | -webkit-animation-fill-mode: both; 58 | animation-fill-mode: both; 59 | } 60 | 61 | .spinner .spinner-container { 62 | position: absolute; 63 | width: 100%; 64 | height: 100%; 65 | } 66 | 67 | .container2 { 68 | -webkit-transform: rotateZ(45deg); 69 | transform: rotateZ(45deg); 70 | } 71 | 72 | .container3 { 73 | -webkit-transform: rotateZ(90deg); 74 | transform: rotateZ(90deg); 75 | } 76 | 77 | .circle1 { top: 0; left: 0; } 78 | .circle2 { top: 0; right: 0; } 79 | .circle3 { right: 0; bottom: 0; } 80 | .circle4 { left: 0; bottom: 0; } 81 | 82 | .container2 .circle1 { 83 | -webkit-animation-delay: -1.1s; 84 | animation-delay: -1.1s; 85 | } 86 | 87 | .container3 .circle1 { 88 | -webkit-animation-delay: -1.0s; 89 | animation-delay: -1.0s; 90 | } 91 | 92 | .container1 .circle2 { 93 | -webkit-animation-delay: -0.9s; 94 | animation-delay: -0.9s; 95 | } 96 | 97 | .container2 .circle2 { 98 | -webkit-animation-delay: -0.8s; 99 | animation-delay: -0.8s; 100 | } 101 | 102 | .container3 .circle2 { 103 | -webkit-animation-delay: -0.7s; 104 | animation-delay: -0.7s; 105 | } 106 | 107 | .container1 .circle3 { 108 | -webkit-animation-delay: -0.6s; 109 | animation-delay: -0.6s; 110 | } 111 | 112 | .container2 .circle3 { 113 | -webkit-animation-delay: -0.5s; 114 | animation-delay: -0.5s; 115 | } 116 | 117 | .container3 .circle3 { 118 | -webkit-animation-delay: -0.4s; 119 | animation-delay: -0.4s; 120 | } 121 | 122 | .container1 .circle4 { 123 | -webkit-animation-delay: -0.3s; 124 | animation-delay: -0.3s; 125 | } 126 | 127 | .container2 .circle4 { 128 | -webkit-animation-delay: -0.2s; 129 | animation-delay: -0.2s; 130 | } 131 | 132 | .container3 .circle4 { 133 | -webkit-animation-delay: -0.1s; 134 | animation-delay: -0.1s; 135 | } 136 | 137 | @-webkit-keyframes bouncedelay { 138 | 0%, 80%, 100% { -webkit-transform: scale(0.0) } 139 | 40% { -webkit-transform: scale(1.0) } 140 | } 141 | 142 | @keyframes bouncedelay { 143 | 0%, 80%, 100% { 144 | transform: scale(0.0); 145 | -webkit-transform: scale(0.0); 146 | } 40% { 147 | transform: scale(1.0); 148 | -webkit-transform: scale(1.0); 149 | } 150 | } -------------------------------------------------------------------------------- /src/assets/less/video-player.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "animations"; 3 | 4 | @inactive_button: darken(@white, 30%); 5 | @active_button: @white; 6 | 7 | .video-player:-webkit-full-screen { 8 | position: fixed; 9 | top: 0; 10 | min-width: 100%; 11 | min-height: 100%; 12 | width: 100%; 13 | height: 100%; 14 | 15 | video { 16 | width: 100%; 17 | height: 100%; 18 | } 19 | } 20 | 21 | :-moz-full-screen { 22 | } 23 | 24 | :-ms-fullscreen { 25 | } 26 | 27 | .video-player:fullscreen { 28 | position: fixed; 29 | top: 0; 30 | min-width: 100%; 31 | min-height: 100%; 32 | 33 | video { 34 | width: 100%; 35 | height: 100%; 36 | } 37 | } 38 | 39 | .video-player { 40 | display: block; 41 | background: @dark; 42 | position: relative; 43 | width: 100%; 44 | height: auto; 45 | z-index: 1; 46 | 47 | .video-preloader { 48 | position: absolute; 49 | z-index: @zindexVideoControls; 50 | top: 50%; 51 | left: 50%; 52 | margin-top: -32px; 53 | margin-left: -32px; 54 | } 55 | 56 | .video-logo { 57 | position: absolute; 58 | z-index: @zindexVideoControls; 59 | right: 20px; 60 | top: 20px; 61 | height: 32px; 62 | } 63 | 64 | video { 65 | width: 100%; 66 | height: 100%; 67 | z-index: 1; 68 | } 69 | 70 | .controls { 71 | position: absolute; 72 | height: auto; 73 | padding: .625rem; 74 | z-index: @zindexVideoControls; 75 | background: rgba(34, 34, 34, 0.5); 76 | 77 | .info-box { 78 | float: left; 79 | background: inherit; 80 | margin: 0 2px; 81 | padding: .75rem 1rem; 82 | color: @white; 83 | height: 2.125rem; 84 | text-align: center; 85 | font-size: .8em; 86 | } 87 | 88 | .control-slider { 89 | height: 2.125rem; 90 | float: left; 91 | padding: 0 1rem 0; 92 | margin: 0 2px; 93 | background: inherit; 94 | 95 | .slider .complete { 96 | //.animate(ani-bg-stripes 2s linear infinite); 97 | } 98 | } 99 | 100 | .volume-slider-wrapper { 101 | width: 6rem; 102 | } 103 | 104 | .stream-slider-wrapper { 105 | float: none; 106 | width: 100%; 107 | .slider .complete { 108 | //.animate(ani-bg-stripes 2s linear infinite); 109 | } 110 | } 111 | 112 | .control-button { 113 | float: left; 114 | background: inherit; 115 | border: 0; 116 | //border-color: @inactive_button; 117 | color: @inactive_button; 118 | outline: none; 119 | position: relative; 120 | margin: 0 2px; 121 | 122 | &:hover, &:active { 123 | //border-color: @active_button; 124 | color: @active_button; 125 | } 126 | 127 | &.loop { 128 | &.active { 129 | color: @green; 130 | } 131 | } 132 | 133 | &.play { 134 | } 135 | 136 | &.stop:disabled { 137 | color: @gray; 138 | } 139 | 140 | &.full { 141 | float: right; 142 | } 143 | } 144 | } 145 | 146 | .controls { 147 | &.position-bottom { 148 | bottom: 0; 149 | left: 0; 150 | right: 0; 151 | } 152 | } 153 | 154 | &.full-screen { 155 | position: fixed; 156 | top: 0; 157 | left: 0; 158 | bottom: 0; 159 | right: 0; 160 | width: auto !important; 161 | z-index: @zindexFullScreen; 162 | } 163 | } 164 | 165 | video::-webkit-media-controls { 166 | display:none !important; 167 | } 168 | video::-webkit-media-controls-enclosure { 169 | display:none !important; 170 | } 171 | -------------------------------------------------------------------------------- /src/assets/less/images.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "transform"; 4 | @import (once) "animations"; 5 | 6 | .image-container { 7 | display: inline-block; 8 | position: relative; 9 | vertical-align: middle; 10 | max-width: 100%; 11 | background-color: @transparent; 12 | //.block-shadow; 13 | 14 | .frame { 15 | background-color: @white; 16 | position: relative; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | 21 | img { 22 | display: block; 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | .image-overlay { 28 | position: absolute; 29 | top: 0; 30 | bottom: 0; 31 | left: 0; 32 | right: 0; 33 | opacity: 0; 34 | overflow: hidden; 35 | font-size: .875rem; 36 | line-height: 1rem; 37 | padding: 1em 1.5em; 38 | .op-default; 39 | color: @white; 40 | text-align: center; 41 | border-radius: inherit; 42 | .transition(.65s); 43 | 44 | &:hover { 45 | opacity: 1; 46 | 47 | &:before, &:after { 48 | opacity: 1; 49 | .scale(1); 50 | } 51 | } 52 | 53 | &:before, &:after { 54 | display: block; 55 | position: absolute; 56 | content: ""; 57 | border: 1px solid rgba(255, 255, 255, 0.7); 58 | top: 1em; 59 | bottom: 1em; 60 | left: 1em; 61 | right: 1em; 62 | opacity: 0; 63 | border-radius: inherit; 64 | 65 | .scale(1.5); 66 | .transition(.65s); 67 | } 68 | 69 | &:after { 70 | border-left: none; 71 | border-right: none; 72 | bottom: 1em; 73 | top: 1em; 74 | } 75 | &:before { 76 | border-top: none; 77 | border-bottom: none; 78 | bottom: 1em; 79 | top: 1em; 80 | } 81 | } 82 | 83 | &.diamond { 84 | overflow: hidden; 85 | .frame { 86 | .rotate(45deg); 87 | overflow: hidden; 88 | 89 | img, .image-replacer { 90 | .rotate(-45deg); 91 | } 92 | } 93 | } 94 | 95 | &.rounded { 96 | img { 97 | border-radius: @borderRadius; 98 | } 99 | } 100 | 101 | &.bordered { 102 | .frame { 103 | border: 1px @grayLighter solid; 104 | padding: .5rem; 105 | } 106 | } 107 | &.polaroid { 108 | .frame { 109 | border: 1px @grayLighter solid; 110 | padding: .5rem .5rem 2rem; 111 | } 112 | 113 | } 114 | &.handing { 115 | margin-top: 20px; 116 | 117 | .frame { 118 | border: 1px @grayLighter solid; 119 | position: relative; 120 | padding: .5rem; 121 | 122 | &:after { 123 | content: ""; 124 | position: absolute; 125 | width: .625rem; 126 | height: .625rem; 127 | background-color: @steel; 128 | border-radius: 50%; 129 | top: -20%; 130 | left: 50%; 131 | margin-left: -.3125rem; 132 | z-index: 3; 133 | .shadow; 134 | } 135 | } 136 | 137 | &.image-format-hd { 138 | .frame:after { 139 | top: -25%; 140 | } 141 | } 142 | 143 | &.image-format-square { 144 | .frame:after { 145 | top: -15%; 146 | } 147 | } 148 | 149 | &:after { 150 | position: absolute; 151 | content: ""; 152 | background-color: transparent; 153 | border-top: 1px solid @grayLighter; 154 | .rotate(-16deg); 155 | z-index: 2; 156 | top: 0; 157 | left: 0; 158 | width: 50%; 159 | height: 50%; 160 | .transformOrigin(top left); 161 | } 162 | 163 | &:before { 164 | position: absolute; 165 | content: ""; 166 | background-color: transparent; 167 | border-top: 1px solid @grayLighter; 168 | .rotate(16deg); 169 | z-index: 2; 170 | top: 0; 171 | right: 0; 172 | width: 50%; 173 | height: 50%; 174 | .transformOrigin(top right); 175 | } 176 | 177 | &.ani { 178 | .transformOrigin(50% -25px); 179 | .animate(swinging 10s ease-in-out 0s infinite); 180 | 181 | // -webkit-animation: swinging 10s ease-in-out 0s infinite; 182 | // -o-animation: swinging 10s ease-in-out 0s infinite; 183 | // -moz-animation: swinging 10s ease-in-out 0s infinite; 184 | // -ms-animation: swinging 10s ease-in-out 0s infinite; 185 | // animation: swinging 10s ease-in-out 0s infinite; 186 | } 187 | 188 | &.ani-hover { 189 | &:hover { 190 | .transformOrigin(50% -25px); 191 | .animate(swinging 5s ease-in-out 0s); 192 | } 193 | } 194 | 195 | } 196 | } 197 | 198 | -------------------------------------------------------------------------------- /src/assets/less/audio-player.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | @audio_inactive_button: darken(@white, 30%); 5 | @audio_active_button: @white; 6 | 7 | .audio-player { 8 | display: inline-block; 9 | position: relative; 10 | background: @dark; 11 | height: auto; 12 | 13 | .controls { 14 | position: relative; 15 | width: 100%; 16 | height: auto; 17 | padding: 4px; 18 | background: inherit; 19 | .clear-float; 20 | 21 | .control-element { 22 | height: 2.125rem; 23 | display: inline-block; 24 | border: none; 25 | background: rgba(34, 34, 34, 0.5); 26 | vertical-align: middle; 27 | } 28 | 29 | .stream-wrapper { 30 | padding: 0 .25rem; 31 | } 32 | 33 | .stream-slider { 34 | width: 200px; 35 | } 36 | 37 | .info-box { 38 | margin: 0 2px; 39 | padding: .75rem 1rem; 40 | color: @white; 41 | height: 2.125rem; 42 | line-height: 1; 43 | text-align: center; 44 | font-size: .8em; 45 | } 46 | 47 | .volume-wrapper { 48 | width: 100px; 49 | padding: 0 .25rem 0; 50 | } 51 | 52 | .play, .stop, .loop, .volume, .next, .prev, .shuffle, .random, .plist { 53 | color: @audio_inactive_button; 54 | &:hover, &:active { 55 | color: @audio_active_button; 56 | } 57 | } 58 | 59 | .loop { 60 | &.active { 61 | color: @lightGreen; 62 | } 63 | } 64 | 65 | .control-element:disabled { 66 | color: @gray; 67 | } 68 | } 69 | } 70 | 71 | .audio-player { 72 | 73 | .play-list-wrapper { 74 | display: block; 75 | position: relative; 76 | padding: .625rem; 77 | .clear-float; 78 | border-bottom: 1px solid @gray; 79 | 80 | &.not-visible { 81 | display: none; 82 | } 83 | } 84 | 85 | .album-title { 86 | font-size: 2rem; 87 | color: @white; 88 | font-weight: lighter; 89 | margin: 0 0 .625rem; 90 | padding-bottom: .625rem; 91 | border-bottom: 1px solid @gray; 92 | } 93 | 94 | .poster { 95 | float: left; 96 | width: 10rem; 97 | height: 100%; 98 | } 99 | 100 | .album-desc { 101 | padding: .625rem; 102 | color: @grayLighter; 103 | font-size: .6875rem; 104 | } 105 | 106 | .play-list { 107 | list-style: none; 108 | padding: 10px; 109 | color: @white; 110 | display: block; 111 | font-size: .8em; 112 | width: 100%; 113 | //max-height: 200px; 114 | //overflow-x: hidden; 115 | //overflow-y: auto; 116 | 117 | li { 118 | padding: .125rem 1rem; 119 | cursor: pointer; 120 | position: relative; 121 | 122 | &:hover { 123 | background: @gray; 124 | } 125 | 126 | &.current { 127 | color: @cyan; 128 | .text-shadow; 129 | 130 | &:before { 131 | content: "\25B6"; 132 | position: absolute; 133 | left: .25rem; 134 | } 135 | } 136 | } 137 | } 138 | 139 | .poster ~ .play-list { 140 | margin: 0 0 0 11rem; 141 | width: ~"calc(100% - 11rem)"; 142 | } 143 | } 144 | 145 | .audio-player { 146 | &.micro { 147 | .plist, .loop, .next, .prev, .random, .stop, .stream-wrapper, .info-box, .volume-wrapper, .volume { 148 | display: none; 149 | } 150 | } 151 | 152 | &.small { 153 | .plist, .stop, .stream-wrapper, .next, .prev, .random, .loop { 154 | display: none; 155 | } 156 | } 157 | 158 | &.medium { 159 | .plist, .stop, .next, .prev, .random, .loop { 160 | display: none; 161 | } 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /src/assets/less/calendar.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "colors"; 3 | @import (once) "utils"; 4 | 5 | .calendar { 6 | min-width: 13.75rem; 7 | border: 1px @grayLighter solid; 8 | font-size: .75rem; 9 | padding: .3125rem; 10 | background-color: @white; 11 | 12 | .calendar-grid { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | .calendar-row { 18 | margin: 0 0 .3125rem; 19 | width: 100%; 20 | .clear-float; 21 | 22 | &:last-child { 23 | margin-bottom: 0; 24 | } 25 | } 26 | 27 | .calendar-cell { 28 | width: 12.46201429%; 29 | margin: 0 0 0 2.12765%; 30 | display: block; 31 | float: left; 32 | 33 | &:first-child { 34 | margin-left: 0; 35 | } 36 | 37 | &.sel-month { 38 | width: 41.64134286%; 39 | } 40 | 41 | &.sel-year { 42 | width: 48.936175%; 43 | } 44 | 45 | &.sel-plus, &.sel-minus { 46 | width: 23.4042625%; 47 | } 48 | 49 | &.month-cell, &.year-cell { 50 | width: 23.4042625%; 51 | } 52 | } 53 | 54 | .calendar-actions { 55 | .button { 56 | margin: .15625rem; 57 | } 58 | } 59 | 60 | .day-of-week { 61 | padding: .3125rem; 62 | cursor: default; 63 | } 64 | 65 | a { 66 | display: block; 67 | padding: .3125rem 0; 68 | 69 | &:hover { 70 | background-color: lighten(@cyan, 20%); 71 | color: @white; 72 | border-radius: inherit; 73 | } 74 | } 75 | 76 | .calendar-header { 77 | background-color: @lightCyan; 78 | color: @white; 79 | 80 | a { 81 | color: @white; 82 | padding: .325rem; 83 | &:hover { 84 | background-color: lighten(@cyan, 10%); 85 | color: @white; 86 | } 87 | } 88 | } 89 | 90 | .week-days { 91 | // background-color: @brown; 92 | // color: @white; 93 | } 94 | 95 | .calendar-actions { 96 | .clear-float; 97 | } 98 | 99 | .today { 100 | a { 101 | background-color: @green; 102 | color: @white; 103 | .text-shadow; 104 | } 105 | } 106 | 107 | .day { 108 | 109 | border: 1px @borderColor solid; 110 | text-align: center; 111 | 112 | a { 113 | display: block; 114 | position: relative; 115 | text-align: center; 116 | //border: 2px transparent solid; 117 | } 118 | 119 | a.selected { 120 | 121 | } 122 | } 123 | 124 | .month, .year { 125 | border: 1px @borderColor solid; 126 | 127 | a { 128 | padding-top: 1.3125rem; 129 | padding-bottom: 1.3125rem; 130 | } 131 | } 132 | 133 | .empty { 134 | cursor: default; 135 | } 136 | 137 | .other-day { 138 | display: block; 139 | text-align: center; 140 | color: @grayLight; 141 | padding: .325rem; 142 | background-color: @grayLighter; 143 | border: 1px @borderColor solid; 144 | } 145 | 146 | .exclude { 147 | background-color: @red; 148 | a { 149 | cursor: not-allowed; 150 | background-color: @red; 151 | color: @white; 152 | } 153 | } 154 | .stored { 155 | background-color: @lightPink; 156 | a { 157 | cursor: pointer; 158 | background-color: @lightPink; 159 | color: @white; 160 | } 161 | } 162 | .selected { 163 | background-color: @lightCyan; 164 | a { 165 | background-color: @lightCyan; 166 | color: @white; 167 | } 168 | } 169 | } 170 | 171 | .calendar { 172 | &.rounded { 173 | button { 174 | border-radius: @borderRadius; 175 | } 176 | 177 | .day, .month, .year, .other-day, .today, .calendar-header, .selected { 178 | border-radius: @borderRadius; 179 | } 180 | 181 | .today a, .selected a, .exclude a { 182 | border-radius: @borderRadius; 183 | } 184 | 185 | .calendar-header { 186 | a { 187 | &:hover { 188 | border-radius: @borderRadius; 189 | } 190 | } 191 | } 192 | } 193 | } 194 | 195 | .calendar { 196 | &.no-border { 197 | 198 | .day, .month, .year, .other-day, .today, .calendar-header { 199 | border: 0; 200 | } 201 | 202 | .today a { 203 | border: 0; 204 | } 205 | } 206 | } 207 | 208 | .calendar-dropdown { 209 | border: 0; 210 | .block-shadow; 211 | } 212 | -------------------------------------------------------------------------------- /src/assets/less/tables.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | 6 | .table { 7 | width: 100%; 8 | margin: .625rem 0; 9 | 10 | th, td { 11 | padding: 0.625rem; 12 | } 13 | 14 | thead { 15 | border-bottom: 4px solid @grayLight; 16 | 17 | tr:last-child { 18 | } 19 | 20 | th, td { 21 | cursor: default; 22 | color: @textColor2; 23 | border-color: transparent; 24 | .align-left; 25 | .text-bold; 26 | line-height: 100%; 27 | } 28 | } 29 | 30 | tfoot { 31 | border-top: 4px solid @grayLight; 32 | 33 | tr:last-child { 34 | } 35 | 36 | th, td { 37 | cursor: default; 38 | color: @textColor2; 39 | border-color: transparent; 40 | .align-left; 41 | .text-bold; 42 | line-height: 100%; 43 | } 44 | } 45 | 46 | tbody { 47 | td { 48 | padding: 0.625rem 0.85rem; 49 | } 50 | } 51 | 52 | .sortable-column { 53 | position: relative; 54 | cursor: pointer; 55 | .no-user-select; 56 | &:after { 57 | position: absolute; 58 | content: ""; 59 | width: 1rem; 60 | height: 1rem; 61 | left: 100%; 62 | margin-left: -20px; 63 | top: 50%; 64 | margin-top: -.5rem; 65 | color: inherit; 66 | font-size: 1rem; 67 | line-height: 1; 68 | } 69 | 70 | &.sort-asc, &.sort-desc { 71 | background-color: @grayLighter; 72 | &:after { 73 | color: @dark; 74 | } 75 | } 76 | 77 | &.sort-asc { 78 | &:after { 79 | content: "\2191"; 80 | } 81 | } 82 | 83 | &.sort-desc { 84 | &:after { 85 | content: "\2193"; 86 | } 87 | } 88 | } 89 | 90 | &.sortable-markers-on-left { 91 | .sortable-column { 92 | padding-left: 30px; 93 | &:before, &:after { 94 | left: 0; 95 | margin-left: 10px; 96 | } 97 | } 98 | } 99 | 100 | tr.selected { 101 | td {background-color: rgba(28, 183, 236, 0.10);} 102 | } 103 | 104 | td.selected { 105 | background-color: rgba(28, 183, 236, 0.30); 106 | } 107 | 108 | &.striped { 109 | tbody tr:nth-child(odd) { 110 | background: @grayLighter; 111 | } 112 | } 113 | 114 | &.hovered { 115 | tbody { 116 | tr { 117 | &:hover { 118 | background-color: rgba(28, 183, 236, 0.10); 119 | } 120 | } 121 | } 122 | } 123 | 124 | &.cell-hovered { 125 | tbody { 126 | td { 127 | &:hover { 128 | background-color: rgba(28, 183, 236, 0.30); 129 | } 130 | } 131 | } 132 | } 133 | 134 | &.border { 135 | border: 1px @grayLight solid; 136 | } 137 | 138 | &.bordered { 139 | th, td { 140 | border: 1px @grayLight solid; 141 | } 142 | 143 | thead { 144 | tr:first-child { 145 | th, td { 146 | border-top: none; 147 | 148 | &:first-child { 149 | border-left: none; 150 | } 151 | &:last-child { 152 | border-right: none; 153 | } 154 | } 155 | } 156 | } 157 | 158 | tbody { 159 | tr { 160 | 161 | &:first-child { 162 | td { 163 | border-top: none; 164 | } 165 | } 166 | 167 | td { 168 | &:first-child { 169 | border-left: none; 170 | } 171 | &:last-child { 172 | border-right: none; 173 | } 174 | } 175 | 176 | &:last-child { 177 | td { 178 | border-bottom: none; 179 | } 180 | } 181 | } 182 | } 183 | } 184 | 185 | .condensed { 186 | th, td {padding: .3125rem;} 187 | } 188 | .super-condensed { 189 | th, td {padding: .125rem;} 190 | } 191 | } 192 | 193 | .table { 194 | tbody tr { 195 | &.error { 196 | background-color: @red; 197 | color: @white; 198 | &:hover { 199 | background-color: @lightRed; 200 | } 201 | } 202 | &.warning { 203 | background-color: @orange; 204 | color: @white; 205 | &:hover { 206 | background-color: @lightOrange; 207 | } 208 | } 209 | &.success { 210 | background-color: @green; 211 | color: @white; 212 | &:hover { 213 | background-color: @lightGreen; 214 | } 215 | } 216 | &.info { 217 | background-color: @cyan; 218 | color: @white; 219 | &:hover { 220 | background-color: @lightCyan; 221 | } 222 | } 223 | } 224 | } -------------------------------------------------------------------------------- /src/assets/less/tabcontrol.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .tabcontrol { 5 | //overflow: hidden; 6 | position: relative; 7 | width: 100%; 8 | 9 | .tabs { 10 | width: 100%; 11 | margin: 0; 12 | padding: 0; 13 | list-style: none inside; 14 | border-bottom: 2px @cyan solid; 15 | white-space: nowrap; 16 | overflow: visible; 17 | .clear-float; 18 | 19 | li { 20 | display: block; 21 | //margin: 0 0 -4px -4px; 22 | float: left; 23 | position: relative; 24 | white-space: nowrap; 25 | 26 | a { 27 | display: block; 28 | float: left; 29 | padding: 8px 24px; 30 | color: @dark; 31 | font-size: .6875rem; 32 | font-weight: bold; 33 | text-transform: uppercase; 34 | position: relative; 35 | white-space: nowrap; 36 | } 37 | } 38 | 39 | li { 40 | 41 | &:hover { 42 | a { 43 | background-color: @grayLighter; 44 | } 45 | } 46 | 47 | &.active { 48 | a { 49 | background-color: @cyan; 50 | color: @white; 51 | .text-shadow; 52 | } 53 | } 54 | 55 | &.disabled { 56 | a { 57 | background: @grayLighter linear-gradient(-45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); 58 | background-size: 40px 40px; 59 | color: @grayLight; 60 | 61 | //.ribbed-grayLighter; 62 | //.fg-grayLight; 63 | cursor: default; 64 | } 65 | } 66 | } 67 | 68 | li { 69 | &.non-visible-tabs { 70 | display: block; 71 | float: right; 72 | 73 | &:empty { 74 | display: none; 75 | } 76 | 77 | &.dropdown-toggle { 78 | height: 100% ; 79 | } 80 | } 81 | } 82 | } 83 | 84 | &.tabs-bottom { 85 | .tabs { 86 | border-bottom: none; 87 | border-top: 2px @cyan solid; 88 | 89 | li.disabled { 90 | top: 0; 91 | } 92 | li:hover { 93 | top: 0; 94 | } 95 | } 96 | } 97 | 98 | .frames { 99 | width: 100%; 100 | //overflow: hidden; 101 | position: relative; 102 | 103 | .frame { 104 | display: block; 105 | position: relative; 106 | width: 100%; 107 | padding: 20px; 108 | background-color: @grayLight; 109 | } 110 | } 111 | } 112 | 113 | .tabcontrol2 { 114 | .tabcontrol; 115 | 116 | .tabs { 117 | border-bottom: 0; 118 | vertical-align: bottom; 119 | z-index: 2; 120 | 121 | li { 122 | padding-top: 2px; 123 | overflow: visible; 124 | margin: 0 2px; 125 | 126 | &:after { 127 | content: ""; 128 | position: absolute; 129 | left: 0; 130 | top: 100%; 131 | //margin-top: 1px; 132 | width: 100%; 133 | background-color: @white; 134 | height: 2px; 135 | z-index: 3; 136 | } 137 | 138 | &:not(.active) { 139 | &:after { 140 | background-color: @grayLighter; 141 | height: 1px; 142 | } 143 | } 144 | 145 | &:first-child { 146 | margin-left: 10px; 147 | } 148 | 149 | a { 150 | background-color: @grayLighter; 151 | padding-top: .3125rem; 152 | text-shadow: none ; 153 | } 154 | 155 | &.active { 156 | padding-top: 0; 157 | padding-bottom: 0; 158 | a { 159 | background-color: @white; 160 | border: 1px @grayLighter solid; 161 | border-top: 2px @red solid; 162 | border-bottom: 0; 163 | color: @cyan; 164 | } 165 | 166 | &:hover { 167 | a {background-color: inherit;} 168 | } 169 | } 170 | 171 | &:hover { 172 | a { 173 | background-color: darken(@grayLighter, 5%); 174 | } 175 | } 176 | } 177 | } 178 | 179 | &.tabs-bottom { 180 | .tabs { 181 | border-top: 0; 182 | 183 | li { 184 | padding: 0; 185 | 186 | &:after { 187 | top: -1px ; 188 | background-color: @white; 189 | } 190 | 191 | &.active { 192 | padding-bottom: 0; 193 | a { 194 | border: 1px @grayLighter solid; 195 | border-bottom: 2px @red solid; 196 | border-top: 0; 197 | } 198 | } 199 | 200 | &:not(.active) { 201 | margin-bottom: 0; 202 | &:after { 203 | background-color: @grayLighter; 204 | } 205 | } 206 | } 207 | } 208 | } 209 | 210 | .frames { 211 | z-index: 1; 212 | border: 1px @grayLighter solid; 213 | 214 | .frame { 215 | background-color: @white; 216 | } 217 | } 218 | } -------------------------------------------------------------------------------- /src/assets/less/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "typography"; 3 | @import (once) "utils"; 4 | 5 | .breadcrumbs { 6 | .flush-list; 7 | background-color: @white; 8 | color: #999; 9 | padding: 1rem; 10 | 11 | & > li { 12 | display: inline-block; 13 | color: inherit; 14 | margin: 0 1rem 0 0; 15 | position: relative; 16 | vertical-align: middle; 17 | 18 | &:before, &:after { 19 | display: block; 20 | position: absolute; 21 | vertical-align: middle; 22 | color: transparent; 23 | font-size: 0; 24 | content: ""; 25 | height: 1px; 26 | width: .375rem; 27 | background-color: @dark; 28 | top: 50%; 29 | left: 100%; 30 | margin-left: .5rem; 31 | } 32 | 33 | &:before { 34 | .rotate(45deg); 35 | margin-top: -.125rem; 36 | } 37 | 38 | &:after { 39 | .rotate(-45deg); 40 | margin-top: .125rem; 41 | } 42 | 43 | & > a { 44 | color: inherit; 45 | display: inline-block; 46 | line-height: 1; 47 | } 48 | 49 | &:last-child { 50 | color: @dark; 51 | font-weight: bolder; 52 | a {cursor: default;} 53 | &:before, &:after { 54 | background-color: @transparent; 55 | } 56 | } 57 | 58 | &:hover { 59 | color: @dark; 60 | } 61 | } 62 | 63 | img, .icon { 64 | display: inline-block; 65 | line-height: .8; 66 | height: 1rem; 67 | width: 1rem; 68 | font-size: 1rem; 69 | vertical-align: -15%; 70 | } 71 | 72 | &.dark { 73 | background-color: #393832; 74 | 75 | & > li { 76 | &:hover, &:last-child { 77 | color: @white; 78 | } 79 | 80 | &:before, &:after { 81 | background-color: @white; 82 | } 83 | } 84 | } 85 | } 86 | 87 | 88 | .breadcrumbs2 { 89 | margin: 0.625rem 0; 90 | padding: 0; 91 | list-style: none; 92 | overflow: hidden; 93 | width: 100%; 94 | 95 | li { 96 | float: left; 97 | margin: 0 .2em 0 1em; 98 | } 99 | 100 | a { 101 | background: @inputRestState; 102 | padding: .3em 1em; 103 | float: left; 104 | text-decoration: none; 105 | color: @linkColor; 106 | position: relative; 107 | 108 | &:hover { 109 | background: @cyan; 110 | color: @white; 111 | 112 | &:before { 113 | border-color: @cyan @cyan @cyan transparent; 114 | } 115 | 116 | &:after { 117 | border-left-color: @cyan; 118 | } 119 | } 120 | 121 | &:before { 122 | content: ""; 123 | position: absolute; 124 | top: 50%; 125 | margin-top: -1.5em; 126 | border-width: 1.5em 0 1.5em 1em; 127 | border-style: solid; 128 | border-color: @inputRestState @inputRestState @inputRestState transparent; 129 | left: -1em; 130 | margin-left: 1px; 131 | } 132 | 133 | &:after { 134 | content: ""; 135 | position: absolute; 136 | top: 50%; 137 | margin-top: -1.5em; 138 | border-top: 1.5em solid transparent; 139 | border-bottom: 1.5em solid transparent; 140 | border-left: 1em solid @inputRestState; 141 | right: -1em; 142 | margin-right: 1px; 143 | } 144 | } 145 | 146 | & > li:first-child { 147 | margin-left: 0; 148 | a:before { 149 | content: normal; 150 | } 151 | } 152 | 153 | & > li:last-child { 154 | background: none; 155 | a { 156 | color: @dark; 157 | } 158 | &:after, &:before { 159 | content: normal; 160 | } 161 | &:hover { 162 | a { 163 | color: @white; 164 | } 165 | } 166 | } 167 | 168 | .active, .active:hover { 169 | background: none; 170 | a { 171 | color: @dark; 172 | } 173 | } 174 | 175 | .active:hover { 176 | a { 177 | color: @white; 178 | } 179 | } 180 | 181 | .active { 182 | &:after, &:before { 183 | content: normal; 184 | } 185 | } 186 | 187 | &.small { 188 | a { 189 | padding: .2em 1em; 190 | font-size: 11.9px; 191 | } 192 | } 193 | &.mini { 194 | a { 195 | padding: .1em 1em; 196 | font-size: 10.5px; 197 | } 198 | } 199 | 200 | & > li > a > [class*=mif] { 201 | vertical-align: -10%; 202 | } 203 | } -------------------------------------------------------------------------------- /src/assets/less/metro-schemes.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "scheme-builder"; 3 | 4 | // app-bar 5 | /* 6 | * params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle 7 | */ 8 | #scheme-builder > .app-bar-scheme(pink, @pink, @darkPink, @white, @white, @gray, @lightPink, @white); 9 | #scheme-builder > .app-bar-scheme(darcula, @appBarBackgroundDarcula, @appBarBackgroundActiveDarcula, @white, @white, @gray, @appBarDividerColorDarcula, @white); 10 | #scheme-builder > .app-bar-scheme(navy, @appBarBackground, @appBarBackgroundActive, @white, @white, @gray, @appBarDividerColor, @white); 11 | #scheme-builder > .app-bar-scheme(red, @red, @darkRed, @white, @white, @gray, @lightRed, @white); 12 | #scheme-builder > .app-bar-scheme(green, @green, @darkGreen, @white, @white, @gray, @lightGreen, @white); 13 | #scheme-builder > .app-bar-scheme(orange, @orange, @darkOrange, @white, @white, @gray, @lightOrange, @white); 14 | 15 | // menus 16 | // v-menu, d-menu 17 | /* 18 | * params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle 19 | */ 20 | #scheme-builder > .d-menu-scheme(darcula, @appBarBackgroundDarcula, @appBarBackgroundActiveDarcula, @white, @white, @gray, @appBarDividerColorDarcula, @white); 21 | #scheme-builder > .d-menu-scheme(pink, @pink, @darkPink, @white, @white, @gray, @lightPink, @white); 22 | #scheme-builder > .d-menu-scheme(navy, @appBarBackground, @appBarBackgroundActive, @white, @white, @gray, @appBarDividerColor, @white); 23 | #scheme-builder > .d-menu-scheme(red, @red, @darkRed, @white, @white, @gray, @lightRed, @white); 24 | #scheme-builder > .d-menu-scheme(green, @green, @darkGreen, @white, @white, @gray, @lightGreen, @white); 25 | #scheme-builder > .d-menu-scheme(orange, @orange, @darkOrange, @white, @white, @gray, @lightOrange, @white); 26 | 27 | // t-menu 28 | /* 29 | * params: name, background, backgroundHover, item, itemHover, itemDisabled, divider, dropdown-toggle 30 | */ 31 | #scheme-builder > .t-menu-scheme(darcula, @appBarBackgroundDarcula, @appBarBackgroundActiveDarcula, @white, @white, @gray, @appBarDividerColorDarcula, @white); 32 | #scheme-builder > .t-menu-scheme(pink, @pink, @darkPink, @white, @white, @gray, @lightPink, @white); 33 | #scheme-builder > .t-menu-scheme(navy, @appBarBackground, @appBarBackgroundActive, @white, @white, @gray, @appBarDividerColor, @white); 34 | #scheme-builder > .t-menu-scheme(red, @red, @darkRed, @white, @white, @gray, @lightRed, @white); 35 | #scheme-builder > .t-menu-scheme(green, @green, @darkGreen, @white, @white, @gray, @lightGreen, @white); 36 | #scheme-builder > .t-menu-scheme(orange, @orange, @darkOrange, @white, @white, @gray, @lightOrange, @white); 37 | 38 | // sidebar 39 | /* 40 | * params: name, background, backgroundHover, backgroundActive, item, itemHover, itemActive, itemDisabled 41 | */ 42 | #scheme-builder > .sidebar-scheme(darcula, @appBarBackgroundDarcula, lighten(@appBarBackgroundDarcula, 7%), @appBarBackgroundActiveDarcula, @white, @white, @white, @gray); 43 | #scheme-builder > .sidebar-scheme(pink, @pink, lighten(@darkPink, 7%), @darkPink, @white, @white, @white, @gray); 44 | #scheme-builder > .sidebar-scheme(navy, @appBarBackground, lighten(@appBarBackgroundActive, 7%), @appBarBackgroundActive, @white, @white, @white, @gray); 45 | #scheme-builder > .sidebar-scheme(red, @red, lighten(@darkRed, 7%), @darkRed, @white, @white, @white, @gray); 46 | #scheme-builder > .sidebar-scheme(green, @green, lighten(@darkGreen, 7%), @darkGreen, @white, @white, @white, @gray); 47 | #scheme-builder > .sidebar-scheme(orange, @orange, lighten(@darkOrange, 7%), @darkOrange, @white, @white, @white, @gray); 48 | 49 | // calendar 50 | /* 51 | * params: name, background, backgroundHover, backgroundActive, item, itemHover, itemActive, itemDisabled 52 | */ 53 | #scheme-builder > .calendar-scheme(darcula, @appBarBackgroundDarcula, lighten(@appBarBackgroundDarcula, 7%), @appBarBackgroundActiveDarcula, @white, @white, @white, @gray, @orange, @appBarBackgroundActiveDarcula, @transparent); 54 | #scheme-builder > .calendar-scheme(pink, @pink, lighten(@darkPink, 7%), @darkPink, @white, @white, @white, @lightPink, @orange, @darkPink, @transparent); 55 | #scheme-builder > .calendar-scheme(navy, @appBarBackground, lighten(@appBarBackgroundActive, 7%), @appBarBackgroundActive, @white, @white, @white, @lightCyan, @orange, @darkBlue, @transparent); 56 | #scheme-builder > .calendar-scheme(red, @red, lighten(@darkRed, 7%), @darkRed, @white, @white, @white, @lightRed, @orange, @darkRed, @transparent); 57 | #scheme-builder > .calendar-scheme(green, @green, lighten(@darkGreen, 7%), @darkGreen, @white, @white, @white, @lightGreen, @orange, @darkGreen, @transparent); 58 | #scheme-builder > .calendar-scheme(orange, @orange, lighten(@darkOrange, 7%), @darkOrange, @white, @white, @white, @lightOrange, @orange, @darkOrange, @transparent); 59 | -------------------------------------------------------------------------------- /src/template/login.vue: -------------------------------------------------------------------------------- 1 | 20 | 99 | -------------------------------------------------------------------------------- /src/assets/less/slider.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "animations"; 3 | @import (once) "utils"; 4 | 5 | .slider { 6 | height: 2.125rem; 7 | line-height: 1; 8 | width: auto; 9 | position: relative; 10 | 11 | .marker { 12 | height: 1rem; 13 | width: 1rem; 14 | cursor: pointer; 15 | position: absolute; 16 | top: 50%; 17 | margin-top: -.5rem; 18 | left: 0; 19 | background-color: @dark; 20 | z-index: 2; 21 | 22 | &:focus, &:active, &hover { 23 | border: 2px @red solid; 24 | } 25 | } 26 | 27 | .slider-backside, .complete { 28 | height: .5rem; 29 | background: @grayLight; 30 | width: 100%; 31 | line-height: 2.125rem; 32 | top: 50%; 33 | margin-top: -.25rem; 34 | position: absolute; 35 | } 36 | 37 | .complete { 38 | width: auto; 39 | background-color: @teal; 40 | z-index: 2; 41 | transition: background .3s ease; 42 | left: 0; 43 | } 44 | 45 | .buffer { 46 | height: 4px; 47 | width: auto; 48 | background-color: @white; 49 | z-index: 1; 50 | transition: background .3s ease; 51 | position: absolute; 52 | top: 50%; 53 | margin-top: -2px; 54 | left: 0; 55 | } 56 | 57 | .slider-hint { 58 | min-width: 1.8rem; 59 | width: auto; 60 | height: auto; 61 | position: absolute; 62 | z-index: 3; 63 | border: 1px #ccc solid; 64 | padding: .25rem; 65 | top: -1.2rem; 66 | text-align: center; 67 | font-size: .625rem; 68 | display: none; 69 | background: @hintColor; 70 | 71 | &:before { 72 | border: 1px #ccc solid; 73 | border-left: 0; 74 | border-top: 0; 75 | content: ""; 76 | width: .25rem; 77 | height: .25rem; 78 | display: block; 79 | position: absolute; 80 | background-color: inherit; 81 | margin-top: -0.125rem; 82 | margin-left: -0.15625rem; 83 | top: 100%; 84 | left: 50%; 85 | .rotate(45deg); 86 | } 87 | } 88 | 89 | &.hint-bottom { 90 | .slider-hint { 91 | top: 100%; 92 | margin-top: -.125rem; 93 | &:before { 94 | top: -.0625rem; 95 | .rotate(-135deg); 96 | } 97 | } 98 | } 99 | 100 | &.permanent-hint { 101 | & > .slider-hint { 102 | display: block; 103 | } 104 | } 105 | 106 | &:hover { 107 | .complete { 108 | background-color: @lightTeal; 109 | } 110 | } 111 | 112 | &:active, &:active + .marker:active { 113 | .complete { 114 | background-color: @lightTeal; 115 | } 116 | } 117 | 118 | &.place-left { 119 | margin-right: 20px; 120 | } 121 | &.place-right { 122 | margin-left: 20px; 123 | } 124 | 125 | &.ani { 126 | .complete { 127 | .animate(ani-bg-stripes 2s linear infinite); 128 | } 129 | } 130 | } 131 | 132 | .slider { 133 | &.vertical { 134 | min-height: 100px; 135 | width: 2.125rem; 136 | display: inline-block; 137 | 138 | .slider-backside, .complete { 139 | position: absolute; 140 | height: 100%; 141 | width: .5rem; 142 | bottom: 0; 143 | left: 50%; 144 | margin-left: -.25rem; 145 | top: auto; 146 | } 147 | 148 | .marker { 149 | left: 50%; 150 | top: auto; 151 | margin-left: -.5rem; 152 | } 153 | 154 | .complete { 155 | } 156 | 157 | .buffer { 158 | position: absolute; 159 | height: auto; 160 | width: 6px ; 161 | bottom: 0; 162 | left: 50%; 163 | margin-left: -3px; 164 | top: auto; 165 | } 166 | 167 | .slider-hint { 168 | left: 100%; 169 | margin-top: 0; 170 | 171 | &:before { 172 | height: .25rem; 173 | width: .25rem; 174 | .rotate(135deg); 175 | left: -1px; 176 | top: 50%; 177 | margin-top: -.125rem; 178 | margin-left: -.135rem; 179 | } 180 | } 181 | 182 | &.hint-left { 183 | .slider-hint { 184 | left: -100%; 185 | margin-left: .25rem; 186 | 187 | &:before { 188 | left: 100%; 189 | .rotate(-45deg); 190 | } 191 | } 192 | } 193 | } 194 | } 195 | 196 | .slider.cycle-marker { 197 | .marker { 198 | border-radius: 50%; 199 | } 200 | } -------------------------------------------------------------------------------- /static/layer-v3.0.3/layer/mobile/need/layer.css: -------------------------------------------------------------------------------- 1 | .layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} -------------------------------------------------------------------------------- /src/assets/less/sidebar.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | @import (once) "transform"; 4 | @import (once) "typography"; 5 | @import (once) "menu"; 6 | 7 | .sidebar-container { 8 | background-color: @sidebarBackground; 9 | color: @white; 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | bottom: 0; 14 | overflow-x: hidden; 15 | overflow-y: scroll; 16 | } 17 | 18 | .sidebar { 19 | background-color: @sidebarBackground; 20 | color: @white; 21 | position: relative; 22 | width: 100%; 23 | .flush-list; 24 | 25 | li { 26 | display: block; 27 | background-color: inherit; 28 | color: inherit; 29 | position: relative; 30 | height: 52px; 31 | 32 | a { 33 | display: block; 34 | background-color: inherit; 35 | color: inherit; 36 | padding: .625rem 1rem .625rem 3.75rem; 37 | position: relative; 38 | width: 100%; 39 | height: 100%; 40 | line-height: .875rem; 41 | 42 | .icon { 43 | width: 28px; 44 | height: 28px; 45 | font-size: 28px; 46 | line-height: 28px; 47 | vertical-align: middle; 48 | text-align: center; 49 | position: absolute; 50 | left: .625rem; 51 | top: .625rem; 52 | } 53 | 54 | .title, .counter { 55 | display: block; 56 | margin: 0; 57 | white-space: nowrap; 58 | } 59 | 60 | .title { 61 | font-size: .6875rem; 62 | font-weight: bold; 63 | text-transform: uppercase; 64 | } 65 | 66 | .counter { 67 | font-size: .7rem; 68 | font-weight: normal; 69 | } 70 | } 71 | } 72 | 73 | li { 74 | 75 | &:hover { 76 | background-color: #7cc1de; 77 | } 78 | 79 | &.active { 80 | background-color: @sidebarBackgroundActive; 81 | color: @sidebarColor; 82 | } 83 | } 84 | } 85 | 86 | .sidebar { 87 | .transition(.2s, ease); 88 | 89 | &.compact { 90 | width: 52px; 91 | .transition(.2s, ease); 92 | 93 | a { 94 | padding-right: 0; 95 | padding-left: 0; 96 | width: 52px; 97 | } 98 | 99 | .title { 100 | display: none ; 101 | } 102 | 103 | .counter { 104 | position: absolute; 105 | top: 0; 106 | right: 4px; 107 | } 108 | } 109 | } 110 | 111 | .sidebar2 { 112 | .v-menu; 113 | .v-menu > .subdown; 114 | border: 1px @grayLighter solid; 115 | width: 100%; 116 | 117 | li { 118 | border-top: 1px @grayLighter solid; 119 | cursor: default; 120 | 121 | &.stick { 122 | position: relative; 123 | &:before { 124 | content: ""; 125 | position: absolute; 126 | width: 7px; 127 | height: 44px; 128 | left: -7px; 129 | text-indent: -9999px; 130 | border-top-left-radius: 5px; 131 | border-bottom-left-radius: 5px; 132 | background-color: inherit; 133 | } 134 | } 135 | 136 | &.disabled { 137 | background-color: inherit; 138 | &:hover {border-top: 1px @grayLighter solid;} 139 | } 140 | 141 | a { 142 | background-color: @white; 143 | color: #323232; 144 | white-space: normal; 145 | min-width: 0; 146 | 147 | .icon { 148 | color: inherit ; 149 | } 150 | } 151 | } 152 | 153 | li.title { 154 | padding: 20px 20px 10px 20px; 155 | font-size: 24px; 156 | border: 0; 157 | 158 | &:hover { 159 | background-color: inherit; 160 | } 161 | } 162 | 163 | li:not(.title) + li.title { 164 | border-top: 1px @grayLighter solid; 165 | 166 | } 167 | 168 | li.active { 169 | background-color: #71b1d1; 170 | border: none; 171 | 172 | a { 173 | background-color: #71b1d1; 174 | color: @white; 175 | 176 | .icon { 177 | color: inherit; 178 | } 179 | } 180 | } 181 | 182 | li { 183 | &:hover { 184 | a {background-color: #7cc1de;} 185 | } 186 | &.disabled { 187 | &:hover a { 188 | background-color: inherit; 189 | } 190 | } 191 | } 192 | 193 | li li:not(:hover) { 194 | color: @dark ; 195 | 196 | a { 197 | background-color: @white; 198 | } 199 | } 200 | 201 | .dropdown-toggle { 202 | &:before { 203 | .transition(.3s); 204 | } 205 | 206 | &.active-toggle { 207 | &:before { 208 | .rotate135; 209 | .transition(.3s); 210 | } 211 | } 212 | } 213 | } 214 | 215 | .sidebar2 { 216 | &.dark { 217 | li { 218 | border-top: 1px #5c5c5c solid; 219 | 220 | &.title { 221 | background-color: #3D3D3D; 222 | color: @white; 223 | } 224 | } 225 | 226 | li a { 227 | background-color: #3D3D3D; 228 | color: @white; 229 | 230 | &:hover { 231 | background-color: #262626; 232 | color: @white; 233 | } 234 | } 235 | 236 | li:not(.title) + li.title, li.disabled { 237 | border-top-color: #5c5c5c; 238 | 239 | } 240 | 241 | li.disabled { 242 | &:hover { 243 | border-top-color: #5c5c5c ; 244 | a { 245 | background-color: #3D3D3D; 246 | } 247 | } 248 | 249 | a { 250 | color: @grayLight; 251 | } 252 | } 253 | 254 | li.active { 255 | a { 256 | background-color: @red; 257 | } 258 | } 259 | 260 | .dropdown-toggle { 261 | &:before { 262 | border-color: @white; 263 | } 264 | } 265 | 266 | .d-menu { 267 | li a { 268 | background-color: #3D3D3D; 269 | color: @white; 270 | 271 | &:hover { 272 | background-color: #262626; 273 | color: @white; 274 | } 275 | } 276 | } 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /src/assets/less/metro-icons-animation.less: -------------------------------------------------------------------------------- 1 | @import (once) "transform"; 2 | @import (once) "animations"; 3 | 4 | .mif-ani-spin, 5 | .mif-ani-hover-spin:hover { 6 | .animate( ani-spin 1.5s linear infinite); 7 | } 8 | 9 | .mif-ani-spin.mif-ani-fast, 10 | .mif-ani-hover-spin.mif-ani-fast:hover { 11 | .animate(ani-spin 0.7s linear infinite); 12 | } 13 | 14 | .mif-ani-spin.mif-ani-slow, 15 | .mif-ani-hover-spin.mif-ani-slow:hover { 16 | .animate(ani-spin 2.2s linear infinite); 17 | } 18 | 19 | .mif-ani-pulse, 20 | .mif-ani-hover-pulse:hover { 21 | .animate(ani-pulse 1.7s infinite); 22 | } 23 | 24 | .mif-ani-pulse.mif-ani-fast, 25 | .mif-ani-hover-pulse.mif-ani-fast:hover { 26 | .animate(ani-pulse 1s infinite); 27 | } 28 | 29 | .mif-ani-pulse.mif-ani-slow, 30 | .mif-ani-hover-pulse.mif-ani-slow:hover { 31 | .animate(ani-pulse 3s infinite); 32 | } 33 | 34 | .mif-ani-spanner, 35 | .mif-ani-hover-spanner:hover { 36 | transform-origin-x: 90%; 37 | transform-origin-y: 35%; 38 | transform-origin-z: initial; 39 | .animate( ani-wrench 2.5s ease infinite ); 40 | } 41 | 42 | .mif-ani-spanner.mif-ani-fast, 43 | .mif-ani-hover-spanner.mif-ani-fast:hover { 44 | .animate(ani-wrench 1.2s ease infinite); 45 | } 46 | 47 | .mif-ani-spanner.mif-ani-slow, 48 | .mif-ani-hover-spanner.mif-ani-slow:hover { 49 | .animate(ani-wrench 3.7s ease infinite); 50 | } 51 | 52 | .mif-ani-ring, 53 | .mif-ani-hover-ring:hover { 54 | transform-origin-x: 50%; 55 | transform-origin-y: 0px; 56 | transform-origin-z: initial; 57 | .animate(ani-ring 2s ease infinite); 58 | } 59 | 60 | .mif-ani-ring.mif-ani-fast, 61 | .mif-ani-hover-ring.mif-ani-fast:hover { 62 | .animate(ani-ring 1s ease infinite); 63 | } 64 | 65 | .mif-ani-ring.mif-ani-slow, 66 | .mif-ani-hover-ring.mif-ani-slow:hover { 67 | .animate( ani-ring 3s ease infinite ); 68 | } 69 | 70 | .mif-ani-vertical, 71 | .mif-ani-hover-vertical:hover { 72 | .animate(ani-vertical 2s ease infinite); 73 | } 74 | 75 | .mif-ani-vertical.mif-ani-fast, 76 | .mif-ani-vertical.mif-ani-fast:hover { 77 | .animate( ani-vertical 1s ease infinite); 78 | } 79 | 80 | .mif-ani-vertical.mif-ani-slow, 81 | .mif-ani-hover-vertical.mif-ani-slow:hover { 82 | .animate( ani-vertical 4s ease infinite); 83 | } 84 | 85 | .mif-ani-horizontal, 86 | .mif-ani-hover-horizontal:hover { 87 | .animate(ani-horizontal 2s ease infinite); 88 | } 89 | 90 | .mif-ani-horizontal.mif-ani-fast, 91 | .mif-ani-horizontal.mif-ani-fast:hover { 92 | .animate(ani-horizontal 1s ease infinite); 93 | } 94 | 95 | .mif-ani-horizontal.mif-ani-slow, 96 | .mif-ani-horizontal.mif-ani-slow:hover { 97 | .animate( ani-horizontal 3s ease infinite); 98 | } 99 | 100 | .mif-ani-flash, 101 | .mif-ani-hover-flash:hover { 102 | .animate(ani-flash 2s ease infinite); 103 | } 104 | 105 | .mif-ani-flash.mif-ani-fast, 106 | .mif-ani-hover-flash.mif-ani-fast:hover { 107 | .animate(ani-flash 1s ease infinite); 108 | } 109 | 110 | .mif-ani-flash.mif-ani-slow, 111 | .mif-ani-hover-flash.mif-ani-slow:hover { 112 | .animate(ani-flash 3s ease infinite); 113 | } 114 | 115 | .mif-ani-bounce, 116 | .mif-ani-hover-bounce:hover { 117 | .animate(ani-bounce 2s ease infinite); 118 | } 119 | 120 | .mif-ani-bounce.mif-ani-fast, 121 | .mif-ani-hover-bounce.mif-ani-fast:hover { 122 | .animate(ani-bounce 1s ease infinite); 123 | } 124 | 125 | .mif-ani-bounce.mif-ani-slow, 126 | .mif-ani-hover-bounce.mif-ani-slow:hover { 127 | .animate(ani-bounce 3s ease infinite); 128 | } 129 | 130 | .mif-ani-float, 131 | .mif-ani-hover-float:hover { 132 | .animate(ani-float 2s linear infinite); 133 | } 134 | 135 | .mif-ani-float.mif-ani-fast, 136 | .mif-ani-hover-float.mif-ani-fast:hover { 137 | .animate(ani-float 1s linear infinite); 138 | } 139 | 140 | .mif-ani-float.mif-ani-slow, 141 | .mif-ani-hover-float.mif-ani-slow:hover { 142 | .animate(ani-float 3s linear infinite); 143 | } 144 | 145 | .mif-ani-heartbeat, 146 | .mif-ani-hover-heartbeat:hover { 147 | .animate(ani-heartbeat 2s linear infinite); 148 | } 149 | 150 | .mif-ani-heartbeat.mif-ani-fast, 151 | .mif-ani-hover-heartbeat.mif-ani-fast:hover { 152 | .animate(ani-heartbeat 1s linear infinite); 153 | } 154 | 155 | .mif-ani-heartbeat.mif-ani-slow, 156 | .mif-ani-hover-heartbeat.mif-ani-slow:hover { 157 | .animate(ani-heartbeat 3s linear infinite); 158 | } 159 | 160 | .mif-ani-shake, 161 | .mif-ani-hover-shake:hover { 162 | .animate(ani-wrench 2.5s ease infinite); 163 | } 164 | 165 | .mif-ani-shake.mif-ani-fast, 166 | .mif-ani-hover-shake.mif-ani-fast:hover { 167 | .animate(ani-wrench 1.2s ease infinite); 168 | } 169 | 170 | .mif-ani-shake.mif-ani-slow, 171 | .mif-ani-hover-shake.mif-ani-slow:hover { 172 | .animate(ani-wrench 3.7s ease infinite); 173 | } 174 | 175 | .mif-ani-shuttle, 176 | .mif-ani-hover-shuttle:hover { 177 | .animate(ani-shuttle 2s linear infinite); 178 | } 179 | 180 | .mif-ani-shuttle.mif-ani-fast, 181 | .mif-ani-hover-shuttle.mif-ani-fast:hover { 182 | .animate(ani-shuttle 1s linear infinite); 183 | } 184 | 185 | .mif-ani-shuttle.mif-ani-slow, 186 | .mif-ani-hover-shuttle.mif-ani-slow:hover { 187 | .animate(ani-shuttle 3s linear infinite); 188 | } 189 | 190 | .mif-ani-pass, 191 | .mif-ani-hover-pass:hover { 192 | .animate(ani-pass 2s linear infinite); 193 | } 194 | 195 | .mif-ani-pass.mif-ani-fast, 196 | .mif-ani-hover-pass.mif-ani-fast:hover { 197 | .animate(ani-pass 1s linear infinite); 198 | } 199 | 200 | .mif-ani-pass.mif-ani-slow, 201 | .mif-ani-hover-pass.mif-ani-slow:hover { 202 | .animate(ani-pass 3s linear infinite); 203 | } 204 | 205 | .mif-ani-ripple, 206 | .mif-ani-hover-ripple:hover { 207 | .animate(ani-ripple 2s infinite linear); 208 | } 209 | 210 | .mif-ani-ripple.mif-ani-fast, 211 | .mif-ani-hover-ripple.mif-ani-fast:hover { 212 | .animate(ani-ripple 1s infinite linear); 213 | } 214 | 215 | .mif-ani-ripple.mif-ani-slow, 216 | .mif-ani-hover-ripple.mif-ani-slow:hover { 217 | .animate(ani-ripple 3s infinite linear); 218 | } 219 | 220 | -------------------------------------------------------------------------------- /src/assets/less/fluent-menu.less: -------------------------------------------------------------------------------- 1 | @import (once) "vars"; 2 | @import (once) "utils"; 3 | 4 | .fluent-menu { 5 | 6 | .tabs-holder { 7 | list-style: none; 8 | position: relative; 9 | margin: 0; 10 | padding: 0; 11 | display: block; 12 | z-index: 2; 13 | .clear-float; 14 | 15 | li { 16 | display: block; 17 | float: left; 18 | margin-right: 5px; 19 | background-color: #ffffff; 20 | 21 | a { 22 | display: block; 23 | float: left; 24 | padding: .25rem 1rem; 25 | text-transform: uppercase; 26 | font-size: .8em; 27 | color: @fmTabRestColor; 28 | 29 | &:hover { 30 | color: @fmTabActiveColor; 31 | } 32 | } 33 | 34 | &:first-child { 35 | margin-left: 0; 36 | } 37 | 38 | &.active { 39 | border: 1px @fmBorderColor solid; 40 | border-bottom-color: @white; 41 | a { 42 | color: @fmTabActiveColor; 43 | } 44 | } 45 | &.special { 46 | border: 1px @fmTabActiveColor solid; 47 | background-color: @fmTabActiveColor; 48 | a { 49 | color: @white; 50 | &:hover { 51 | color: @white; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | .tabs-content { 59 | z-index: 1; 60 | position: relative; 61 | margin-top: -1px; 62 | border: 1px @fmBorderColor solid; 63 | background-color: #ffffff; 64 | height: 120px; 65 | 66 | .tab-panel { 67 | display: block; 68 | height: 100%; 69 | padding: 5px 0 2px; 70 | 71 | 72 | .tab-panel-group { 73 | height: 100%; 74 | position: relative; 75 | display: block; 76 | float: left; 77 | padding: 0 5px; 78 | border-right: 1px @fmBorderColor solid; 79 | 80 | &:last-child { 81 | margin-right: 0; 82 | } 83 | } 84 | 85 | .tab-group-caption { 86 | font-size: 10px; 87 | margin: 2px 0 -2px; 88 | text-align: center; 89 | display: block; 90 | position: absolute; 91 | bottom: 0; 92 | right: 0; 93 | left: 0; 94 | white-space: nowrap; 95 | background: @grayLighter; 96 | } 97 | 98 | .tab-group-content { 99 | 100 | } 101 | 102 | .tab-content-segment { 103 | display: block; 104 | float: left; 105 | position: relative; 106 | } 107 | 108 | .tab-content-composit { 109 | 110 | } 111 | } 112 | } 113 | } 114 | 115 | // Buttons 116 | 117 | .fluent-menu { 118 | .fluent-button, .fluent-big-button, .fluent-tool-button { 119 | background-color: @white; 120 | padding: .3125rem; 121 | display: block; 122 | cursor: default; 123 | border: 0; 124 | outline: none; 125 | font-size: .8em; 126 | line-height: 1.2; 127 | vertical-align: middle; 128 | 129 | &:hover { 130 | background-color: @fmElementHoverBackground; 131 | } 132 | img, .icon, [class*=mif-] { 133 | line-height: 1.2; 134 | display: block; 135 | float: left; 136 | margin-right: 5px; 137 | width: 16px; 138 | height: 16px; 139 | color: @fmTabRestColor; 140 | vertical-align: middle; 141 | } 142 | 143 | .label { 144 | display: inline-block; 145 | color: inherit; 146 | font: inherit; 147 | } 148 | 149 | &:active { 150 | top: 0; 151 | left: 0; 152 | background-color: darken(@fmElementHoverBackground, 20%); 153 | } 154 | 155 | &.dropdown-toggle { 156 | &:before { 157 | margin-top: -.3125rem; 158 | } 159 | } 160 | } 161 | 162 | .fluent-big-button { 163 | padding: 7px 5px; 164 | text-align: center; 165 | white-space: normal; 166 | line-height: 12px; 167 | float: left; 168 | position: relative; 169 | 170 | img, .icon, [class*=mif-] { 171 | display: block; 172 | width: 40px; 173 | height: 40px; 174 | font-size: 40px; 175 | float: none; 176 | text-align: center; 177 | margin: 5px auto 5px; 178 | } 179 | 180 | br { 181 | line-height: 4px; 182 | height: 4px; 183 | font-size: 4px; 184 | } 185 | 186 | } 187 | 188 | .fluent-tool-button { 189 | padding: 4px; 190 | img, [class*="icon-"] { 191 | display: block; 192 | width: 16px; 193 | height: 16px; 194 | font-size: 16px; 195 | float: none; 196 | text-align: center; 197 | } 198 | img { 199 | margin-right: 0; 200 | } 201 | } 202 | 203 | .dropdown-toggle { 204 | padding-right: 24px; 205 | } 206 | 207 | .d-menu { 208 | position: absolute; 209 | top: 100%; 210 | z-index: 100; 211 | a { 212 | padding: 4px 24px; 213 | font-size: .8em; 214 | &:hover { 215 | background-color: @fmElementHoverBackground; 216 | color: @fmTabRestColor; 217 | } 218 | } 219 | } 220 | } --------------------------------------------------------------------------------