├── .github └── workflows │ └── release.yml ├── .gitignore ├── .npmignore ├── .prettierrc.json ├── LICENSE ├── README.md ├── babel.config.js ├── build ├── buildVuter.js ├── config.js ├── declare.js ├── entry.js ├── new.js ├── npmUpdate.js ├── page.sh ├── remove.js ├── template │ ├── component.d.js │ ├── docs.entry.js │ ├── packages.entry.js │ ├── scss.index.js │ ├── ui.d.entry.js │ ├── vue.entry.js │ └── vue.index.js ├── templates.js ├── updateVersion.ps1 └── utils │ └── render.js ├── components.json ├── examples ├── assert │ ├── logo │ │ ├── VFluent.png │ │ └── VFluent.svg │ └── sample │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ └── 3.jpg ├── docs │ ├── .vuepress │ │ ├── config.js │ │ ├── enhanceApp.js │ │ ├── public │ │ │ └── VFluent.png │ │ └── theme │ │ │ ├── LICENSE │ │ │ ├── components │ │ │ ├── AlgoliaSearchBox.vue │ │ │ ├── DropdownLink.vue │ │ │ ├── DropdownTransition.vue │ │ │ ├── Home.vue │ │ │ ├── NavLink.vue │ │ │ ├── NavLinks.vue │ │ │ ├── Navbar.vue │ │ │ ├── Page.vue │ │ │ ├── PageEdit.vue │ │ │ ├── PageNav.vue │ │ │ ├── Sidebar.vue │ │ │ ├── SidebarButton.vue │ │ │ ├── SidebarGroup.vue │ │ │ ├── SidebarLink.vue │ │ │ ├── SidebarLinks.vue │ │ │ └── custom │ │ │ │ └── NavPanel.vue │ │ │ ├── global-components │ │ │ └── Badge.vue │ │ │ ├── index.js │ │ │ ├── layouts │ │ │ ├── 404.vue │ │ │ └── Layout.vue │ │ │ ├── noopModule.js │ │ │ ├── styles │ │ │ ├── arrow.styl │ │ │ ├── code.styl │ │ │ ├── config.styl │ │ │ ├── custom-blocks.styl │ │ │ ├── index.styl │ │ │ ├── mobile.styl │ │ │ ├── toc.styl │ │ │ └── wrapper.styl │ │ │ └── util │ │ │ └── index.js │ ├── README.md │ ├── sidebar.json │ └── zh │ │ ├── Affix │ │ └── README.md │ │ ├── AnimatedIcon │ │ └── README.md │ │ ├── Badge │ │ └── README.md │ │ ├── Breadcrumb │ │ └── README.md │ │ ├── Button │ │ └── README.md │ │ ├── CalendarDatePicker │ │ └── README.md │ │ ├── CalendarView │ │ └── README.md │ │ ├── Callout │ │ └── README.md │ │ ├── CheckBox │ │ └── README.md │ │ ├── Collapse │ │ └── README.md │ │ ├── ColorPicker │ │ └── README.md │ │ ├── Combobox │ │ └── README.md │ │ ├── CommandBar │ │ └── README.md │ │ ├── DatePicker │ │ └── README.md │ │ ├── DetailsList │ │ └── README.md │ │ ├── Drawer │ │ └── README.md │ │ ├── DropDown │ │ └── README.md │ │ ├── Expander │ │ └── README.md │ │ ├── FlipView │ │ └── README.md │ │ ├── IconElement │ │ └── README.md │ │ ├── Image │ │ └── README.md │ │ ├── Img │ │ └── README.md │ │ ├── ImgBox │ │ └── README.md │ │ ├── InfiniteScrollView │ │ └── README.md │ │ ├── InfoBox │ │ └── README.md │ │ ├── ListView │ │ └── README.md │ │ ├── MenuFlyout │ │ └── README.md │ │ ├── MessageBar │ │ └── README.md │ │ ├── NavigationPanel │ │ └── README.md │ │ ├── NavigationView │ │ └── README.md │ │ ├── Pagination │ │ └── README.md │ │ ├── Panel │ │ └── README.md │ │ ├── Persona │ │ └── README.md │ │ ├── Pivot │ │ └── README.md │ │ ├── ProgressBar │ │ └── README.md │ │ ├── ProgressRing │ │ └── README.md │ │ ├── README.md │ │ ├── Radio │ │ └── README.md │ │ ├── RadioGroup │ │ └── README.md │ │ ├── RatingControl │ │ └── README.md │ │ ├── ResizeWatcher │ │ └── README.md │ │ ├── RevealContainer │ │ └── README.md │ │ ├── RightMenu │ │ └── README.md │ │ ├── ScrollStory │ │ └── README.md │ │ ├── SearchBox │ │ └── README.md │ │ ├── Shimmer │ │ └── README.md │ │ ├── Slider │ │ └── README.md │ │ ├── SwipeControl │ │ └── README.md │ │ ├── TableView │ │ └── README.md │ │ ├── Tag │ │ └── README.md │ │ ├── TextBox │ │ └── README.md │ │ ├── TextField │ │ └── README.md │ │ ├── TimePicker │ │ └── README.md │ │ ├── ToggleSwitch │ │ └── README.md │ │ ├── TreeView │ │ └── README.md │ │ ├── VerifyBox │ │ └── README.md │ │ └── WebWindow │ │ └── README.md └── style │ └── global-transition.css ├── jsconfig.json ├── package.json ├── packages ├── Affix │ ├── index.js │ └── src │ │ └── index.vue ├── AnimatedIcon │ ├── index.js │ └── src │ │ └── index.vue ├── Badge │ ├── index.js │ └── src │ │ └── index.vue ├── Breadcrumb │ ├── index.js │ └── src │ │ └── index.vue ├── Button │ ├── index.js │ └── src │ │ └── index.vue ├── CalendarDatePicker │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── input │ │ └── input.vue ├── CalendarView │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ ├── dateBox.vue │ │ ├── monthBox.vue │ │ └── yearBox.vue ├── Callout │ ├── index.js │ └── src │ │ ├── index.vue │ │ ├── popper.vue │ │ └── utils │ │ └── Bound.js ├── CheckBox │ ├── index.js │ └── src │ │ └── index.vue ├── Collapse │ ├── index.js │ └── src │ │ └── index.vue ├── ColorPicker │ ├── index.js │ └── src │ │ └── index.vue ├── Combobox │ ├── index.js │ └── src │ │ └── index.vue ├── CommandBar │ ├── index.js │ └── src │ │ └── index.vue ├── DatePicker │ ├── index.js │ └── src │ │ └── index.vue ├── DetailsList │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ ├── selector.vue │ │ └── spliter.vue ├── Drawer │ ├── index.js │ └── src │ │ └── index.vue ├── DropDown │ ├── index.js │ └── src │ │ ├── index.vue │ │ ├── input │ │ └── input.vue │ │ └── list │ │ └── listContainer.vue ├── Expander │ ├── index.js │ └── src │ │ └── index.vue ├── FlipView │ ├── index.js │ └── src │ │ └── index.vue ├── IconElement │ ├── index.js │ └── src │ │ └── index.vue ├── Image │ ├── index.js │ └── src │ │ └── index.vue ├── Img │ ├── index.js │ └── src │ │ └── index.vue ├── ImgBox │ ├── index.js │ └── src │ │ └── index.vue ├── InfiniteScrollView │ ├── index.js │ └── src │ │ └── index.vue ├── InfoBox │ ├── index.js │ └── src │ │ └── index.vue ├── Js │ ├── RevealEffect │ │ ├── direct.js │ │ ├── index.js │ │ └── masked.js │ ├── revealDirect.js │ └── revealMasked.js ├── ListView │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ └── verticalSlider.vue ├── MenuFlyout │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── menuFlyoutChildrenContainer.vue ├── MessageBar │ ├── index.js │ └── src │ │ └── index.vue ├── NavigationPanel │ ├── index.js │ └── src │ │ └── index.vue ├── NavigationView │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ └── verticalSlider.vue ├── Pagination │ ├── index.js │ └── src │ │ └── index.vue ├── Panel │ ├── index.js │ └── src │ │ └── index.vue ├── Persona │ ├── index.js │ └── src │ │ └── index.vue ├── Pivot │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ └── slider.vue ├── ProgressBar │ ├── index.js │ └── src │ │ └── index.vue ├── ProgressRing │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── legacy.vue ├── Radio │ ├── index.js │ └── src │ │ └── index.vue ├── RadioGroup │ ├── index.js │ └── src │ │ └── index.vue ├── RatingControl │ ├── index.js │ └── src │ │ └── index.vue ├── ResizeWatcher │ ├── index.js │ └── src │ │ └── index.vue ├── RevealContainer │ ├── index.js │ └── src │ │ └── index.vue ├── RightMenu │ ├── index.js │ └── src │ │ └── index.vue ├── ScrollStory │ ├── index.js │ └── src │ │ └── index.vue ├── SearchBox │ ├── index.js │ └── src │ │ └── index.vue ├── Shimmer │ ├── index.js │ └── src │ │ └── index.vue ├── Slider │ ├── index.js │ └── src │ │ └── index.vue ├── SwipeControl │ ├── index.js │ └── src │ │ └── index.vue ├── TableView │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ ├── addMenu │ │ ├── currentProperty.vue │ │ └── newProperty.vue │ │ ├── defaultExtensions │ │ ├── date │ │ │ ├── dateCell.vue │ │ │ ├── dateHead.vue │ │ │ └── index.js │ │ ├── email │ │ │ ├── emailCell.vue │ │ │ ├── emailHead.vue │ │ │ └── index.js │ │ └── number │ │ │ ├── index.js │ │ │ ├── numberCell.vue │ │ │ └── numberHead.vue │ │ ├── editWrapper.vue │ │ ├── spliter.vue │ │ ├── tableRow.vue │ │ ├── tableViewCellBase.vue │ │ └── tableViewHeadBase.vue ├── Tag │ ├── index.js │ └── src │ │ └── index.vue ├── TextBox │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ ├── core.vue │ │ └── mask.vue ├── TextField │ ├── index.js │ └── src │ │ └── index.vue ├── TimePicker │ ├── index.js │ └── src │ │ └── index.vue ├── ToggleSwitch │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── toggleRing.vue ├── TreeView │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ └── TreeViewItem.vue ├── VerifyBox │ ├── index.js │ └── src │ │ └── index.vue ├── WebWindow │ ├── index.js │ └── src │ │ ├── index.vue │ │ └── sub │ │ └── spliter.vue ├── common-theme │ ├── Affix.scss │ ├── AnimatedIcon.scss │ ├── Badge.scss │ ├── Breadcrumb.scss │ ├── Button.scss │ ├── CalendarDatePicker.scss │ ├── CalendarView.scss │ ├── Callout.scss │ ├── CheckBox.scss │ ├── Collapse.scss │ ├── ColorPicker.scss │ ├── Combobox.scss │ ├── CommandBar.scss │ ├── DatePicker.scss │ ├── DetailsList.scss │ ├── Drawer.scss │ ├── DropDown.scss │ ├── Expander.scss │ ├── FlipView.scss │ ├── IconElement.scss │ ├── Image.scss │ ├── Img.scss │ ├── ImgBox.scss │ ├── InfiniteScrollView.scss │ ├── InfoBox.scss │ ├── ListView.scss │ ├── MenuFlyout.scss │ ├── MessageBar.scss │ ├── NavigationPanel.scss │ ├── NavigationView.scss │ ├── Pagination.scss │ ├── Panel.scss │ ├── Persona.scss │ ├── Pivot.scss │ ├── ProgressBar.scss │ ├── ProgressRing.scss │ ├── Radio.scss │ ├── RadioGroup.scss │ ├── RatingControl.scss │ ├── ResizeWatcher.scss │ ├── RevealContainer.scss │ ├── RightMenu.scss │ ├── ScrollStory.scss │ ├── SearchBox.scss │ ├── Shimmer.scss │ ├── Slider.scss │ ├── SwipeControl.scss │ ├── TableView.scss │ ├── Tag.scss │ ├── TextBox.scss │ ├── TextField.scss │ ├── TimePicker.scss │ ├── ToggleSwitch.scss │ ├── TreeView.scss │ ├── VerifyBox.scss │ ├── WebWindow.scss │ └── global.scss ├── custom-theme │ ├── Affix.scss │ ├── AnimatedIcon.scss │ ├── Badge.scss │ ├── Breadcrumb.scss │ ├── Button.scss │ ├── CalendarDatePicker.scss │ ├── CalendarView.scss │ ├── Callout.scss │ ├── CheckBox.scss │ ├── Collapse.scss │ ├── ColorPicker.scss │ ├── Combobox.scss │ ├── CommandBar.scss │ ├── DatePicker.scss │ ├── DetailsList.scss │ ├── Drawer.scss │ ├── DropDown.scss │ ├── Expander.scss │ ├── FlipView.scss │ ├── IconElement.scss │ ├── Image.scss │ ├── Img.scss │ ├── ImgBox.scss │ ├── InfiniteScrollView.scss │ ├── InfoBox.scss │ ├── ListView.scss │ ├── MenuFlyout.scss │ ├── MessageBar.scss │ ├── NavigationPanel.scss │ ├── NavigationView.scss │ ├── Pagination.scss │ ├── Panel.scss │ ├── Persona.scss │ ├── Pivot.scss │ ├── ProgressBar.scss │ ├── ProgressRing.scss │ ├── Radio.scss │ ├── RadioGroup.scss │ ├── RatingControl.scss │ ├── ResizeWatcher.scss │ ├── RevealContainer.scss │ ├── RightMenu.scss │ ├── ScrollStory.scss │ ├── SearchBox.scss │ ├── Shimmer.scss │ ├── Slider.scss │ ├── SwipeControl.scss │ ├── TableView.scss │ ├── Tag.scss │ ├── TextBox.scss │ ├── TextField.scss │ ├── TimePicker.scss │ ├── ToggleSwitch.scss │ ├── TreeView.scss │ ├── VerifyBox.scss │ ├── WebWindow.scss │ └── index.scss ├── dark-theme │ ├── Affix.scss │ ├── AnimatedIcon.scss │ ├── Badge.scss │ ├── Breadcrumb.scss │ ├── Button.scss │ ├── CalendarDatePicker.scss │ ├── CalendarView.scss │ ├── Callout.scss │ ├── CheckBox.scss │ ├── Collapse.scss │ ├── ColorPicker.scss │ ├── Combobox.scss │ ├── CommandBar.scss │ ├── DatePicker.scss │ ├── DetailsList.scss │ ├── Drawer.scss │ ├── DropDown.scss │ ├── Expander.scss │ ├── FlipView.scss │ ├── IconElement.scss │ ├── Image.scss │ ├── Img.scss │ ├── ImgBox.scss │ ├── InfiniteScrollView.scss │ ├── InfoBox.scss │ ├── ListView.scss │ ├── MenuFlyout.scss │ ├── MessageBar.scss │ ├── NavigationPanel.scss │ ├── NavigationView.scss │ ├── Pagination.scss │ ├── Panel.scss │ ├── Persona.scss │ ├── Pivot.scss │ ├── ProgressBar.scss │ ├── ProgressRing.scss │ ├── Radio.scss │ ├── RadioGroup.scss │ ├── RatingControl.scss │ ├── ResizeWatcher.scss │ ├── RevealContainer.scss │ ├── RightMenu.scss │ ├── ScrollStory.scss │ ├── SearchBox.scss │ ├── Shimmer.scss │ ├── Slider.scss │ ├── SwipeControl.scss │ ├── TableView.scss │ ├── Tag.scss │ ├── TextBox.scss │ ├── TextField.scss │ ├── TimePicker.scss │ ├── ToggleSwitch.scss │ ├── TreeView.scss │ ├── VerifyBox.scss │ ├── WebWindow.scss │ └── index.scss ├── fonts │ ├── Segoe-Fluent-Icons.woff │ └── fabricmdl2icons-3.54.woff ├── global.js ├── index.js ├── light-theme │ ├── Affix.scss │ ├── AnimatedIcon.scss │ ├── Badge.scss │ ├── Breadcrumb.scss │ ├── Button.scss │ ├── CalendarDatePicker.scss │ ├── CalendarView.scss │ ├── Callout.scss │ ├── CheckBox.scss │ ├── Collapse.scss │ ├── ColorPicker.scss │ ├── Combobox.scss │ ├── CommandBar.scss │ ├── DatePicker.scss │ ├── DetailsList.scss │ ├── Drawer.scss │ ├── DropDown.scss │ ├── Expander.scss │ ├── FlipView.scss │ ├── IconElement.scss │ ├── Image.scss │ ├── Img.scss │ ├── ImgBox.scss │ ├── InfiniteScrollView.scss │ ├── InfoBox.scss │ ├── ListView.scss │ ├── MenuFlyout.scss │ ├── MessageBar.scss │ ├── NavigationPanel.scss │ ├── NavigationView.scss │ ├── Pagination.scss │ ├── Panel.scss │ ├── Persona.scss │ ├── Pivot.scss │ ├── ProgressBar.scss │ ├── ProgressRing.scss │ ├── Radio.scss │ ├── RadioGroup.scss │ ├── RatingControl.scss │ ├── ResizeWatcher.scss │ ├── RevealContainer.scss │ ├── RightMenu.scss │ ├── ScrollStory.scss │ ├── SearchBox.scss │ ├── Shimmer.scss │ ├── Slider.scss │ ├── SwipeControl.scss │ ├── TableView.scss │ ├── Tag.scss │ ├── TextBox.scss │ ├── TextField.scss │ ├── TimePicker.scss │ ├── ToggleSwitch.scss │ ├── TreeView.scss │ ├── VerifyBox.scss │ ├── WebWindow.scss │ └── index.scss ├── office-ui-fabric-core │ └── dist │ │ ├── css │ │ └── fabric.min.css │ │ └── sass │ │ ├── Fabric.Scoped.scss │ │ ├── Fabric.scss │ │ ├── _Animation.MDL2.scss │ │ ├── _Animation.scss │ │ ├── _BrandIcon.scss │ │ ├── _Color.Background.scss │ │ ├── _Color.Border.scss │ │ ├── _Color.Font.scss │ │ ├── _Color.MDL2.scss │ │ ├── _Color.scss │ │ ├── _Depth.scss │ │ ├── _Font.Definitions.scss │ │ ├── _Font.MDL2.scss │ │ ├── _Font.scss │ │ ├── _Grid.scss │ │ ├── _Icon.Definitions.scss │ │ ├── _Icon.scss │ │ ├── _References.scss │ │ ├── _Responsive.scss │ │ ├── _Utility.scss │ │ ├── _Wrapper.scss │ │ ├── mixins │ │ ├── _Animation.Mixins.MDL2.scss │ │ ├── _Animation.Mixins.scss │ │ ├── _BrandIcon.Mixins.scss │ │ ├── _Color.Background.Mixins.scss │ │ ├── _Color.Border.Mixins.scss │ │ ├── _Color.Font.Mixins.scss │ │ ├── _Color.Mixins.MDL2.scss │ │ ├── _Color.Mixins.scss │ │ ├── _Depth.Mixins.scss │ │ ├── _Directionality.Mixins.scss │ │ ├── _Font.Mixins.MDL2.scss │ │ ├── _Font.Mixins.scss │ │ ├── _General.Mixins.scss │ │ ├── _Grid.Mixins.scss │ │ ├── _Icon.Mixins.scss │ │ ├── _Responsive.Mixins.scss │ │ └── _ScopedStyles.Mixins.scss │ │ └── variables │ │ ├── _Animation.Variables.MDL2.scss │ │ ├── _Animation.Variables.scss │ │ ├── _BrandIcon.Variables.scss │ │ ├── _Color.Variables.MDL2.scss │ │ ├── _Color.Variables.scss │ │ ├── _Depth.Variables.scss │ │ ├── _Font.Variables.MDL2.scss │ │ ├── _Font.Variables.scss │ │ ├── _General.Variables.scss │ │ ├── _Icon.Variables.scss │ │ ├── _Responsive.Variables.scss │ │ └── _ZIndex.Variables.scss └── usual.js ├── types ├── affix.d.ts ├── animatedicon.d.ts ├── badge.d.ts ├── breadcrumb.d.ts ├── button.d.ts ├── calendarview.d.ts ├── callout.d.ts ├── checkbox.d.ts ├── collapse.d.ts ├── colorpicker.d.ts ├── combobox.d.ts ├── commandbar.d.ts ├── component.d.ts ├── datepicker.d.ts ├── detailslist.d.ts ├── drawer.d.ts ├── dropdown.d.ts ├── expander.d.ts ├── flipview.d.ts ├── iconelement.d.ts ├── image.d.ts ├── img.d.ts ├── imgbox.d.ts ├── index.d.ts ├── infinitescrollview.d.ts ├── infobox.d.ts ├── listview.d.ts ├── menuflyout.d.ts ├── messagebar.d.ts ├── navigationpanel.d.ts ├── navigationview.d.ts ├── pagination.d.ts ├── panel.d.ts ├── persona.d.ts ├── pivot.d.ts ├── progressbar.d.ts ├── progressring.d.ts ├── radio.d.ts ├── radiogroup.d.ts ├── ratingcontrol.d.ts ├── resizewatcher.d.ts ├── revealcontainer.d.ts ├── rightmenu.d.ts ├── scrollstory.d.ts ├── searchbox.d.ts ├── shimmer.d.ts ├── slider.d.ts ├── swipecontrol.d.ts ├── tableview.d.ts ├── tag.d.ts ├── textbox.d.ts ├── textfield.d.ts ├── timepicker.d.ts ├── toggleswitch.d.ts ├── treeview.d.ts ├── ui.d.ts ├── verifybox.d.ts └── webwindow.d.ts ├── vue.config.js └── yarn.lock /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: 🚲Publish NPM Package 2 | 3 | # Controls when the action will run. 4 | on: 5 | # Triggers the workflow on push or pull request events but only for the master branch 6 | push: 7 | tags: 8 | - 'v*' 9 | 10 | workflow_dispatch: 11 | 12 | jobs: 13 | publish: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v3 17 | 18 | - uses: actions/setup-node@v3 19 | with: 20 | node-version: 16 21 | registry-url: https://registry.npmjs.org/ 22 | cache: "yarn" 23 | 24 | - name: 🚓loading denpendencies 25 | run: yarn 26 | 27 | - name: 🚗build the json file of vetur helper 28 | run: yarn bin:vetur 29 | 30 | - name: 🚕build library 31 | run: yarn lib 32 | 33 | - name: 🚚npm publish package 34 | run: npm publish 35 | env: 36 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 37 | 38 | deploydocs: 39 | runs-on: ubuntu-latest 40 | steps: 41 | - uses: actions/checkout@v3 42 | 43 | - uses: actions/setup-node@v3 44 | with: 45 | node-version: 16 46 | registry-url: https://registry.npmjs.org/ 47 | cache: "yarn" 48 | 49 | - name: 🚓loading denpendencies 50 | run: yarn 51 | 52 | - name: 🚕build docs 53 | run: yarn docs:build 54 | 55 | - name: 🚄deploy docs 56 | uses: peaceiris/actions-gh-pages@v3 57 | with: 58 | github_token: ${{ secrets.GITHUB_TOKEN }} 59 | publish_dir: ./examples/docs/.vuepress/dist 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | # Vue Mini Production File 4 | lib/ 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | .yarn 15 | .pnp* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | /.vs 26 | vetur/**/* 27 | 28 | # docs dist 29 | examples/docs/.vuepress/dist 30 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build/ 2 | examples/ 3 | node_modules/ 4 | packages/ 5 | .gitignore 6 | components.json 7 | babel.config.json 8 | vue.config.js 9 | 10 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "printWidth": 80, 4 | "tabWidth": 4, 5 | "useTabs": false, 6 | "semi": true, 7 | "singleQuote": true, 8 | "trailingComma": "none" 9 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Creator SN® 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | module.exports={ 2 | name:{ 3 | full:'FluentVue', 4 | short:'Fv', 5 | chinese:'模板' 6 | }, 7 | theme:[ 8 | 'light', 9 | 'dark', 10 | 'custom' 11 | ], 12 | lang:[ 13 | 'zh' 14 | ] 15 | } -------------------------------------------------------------------------------- /build/declare.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | const render = require('./utils/render') 4 | 5 | let components = require('../components.json') 6 | const template = require('./templates')() 7 | const config = require('./config') 8 | let files =[] 9 | for (let key in components){ 10 | files.push({ 11 | file:path.join(__dirname,`../types/${key.toLowerCase()}.d.ts`), 12 | content:render(template['component.d.js'],{ 13 | ProjectName:config.name.full, 14 | ComponentName:config.name.short+key 15 | }) 16 | }) 17 | } 18 | 19 | for (let index in files){ 20 | let item = files[index]; 21 | fs.writeFile(item.file,item.content,()=>{ 22 | console.log(item.file) 23 | }) 24 | } -------------------------------------------------------------------------------- /build/npmUpdate.js: -------------------------------------------------------------------------------- 1 | let process = require('child_process') 2 | let pack = require('../package.json') 3 | const path = require('path') 4 | let fileSave = require('file-save') 5 | 6 | let version={ 7 | patch:function(str){ 8 | let num=str.split('.') 9 | let c=1; 10 | for (let i=num.length-1;i>=0;--i){ 11 | num[i]=parseInt(num[i]) 12 | num[i]+=c; 13 | c=Math.floor(num[i]/100) 14 | num[i]%=100; 15 | } 16 | return num.join('.') 17 | } 18 | } 19 | 20 | process.exec("npm view vfluentdesign version",function(error,stdout,stderr){ 21 | pack.version=stdout.replace('\n','') 22 | pack.version=version.patch(pack.version) 23 | console.log(`new version:${pack.version}`) 24 | fileSave(path.join(__dirname,'../package.json')).write(JSON.stringify(pack,null,2),'utf8').end('\n') 25 | }) -------------------------------------------------------------------------------- /build/page.sh: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env sh 2 | set -e 3 | yarn docs:build 4 | cd examples/docs/.vuepress/dist 5 | git init 6 | git add -A 7 | git commit -m '[git page]vfluent design' 8 | git push -f https://github.com/aleversn/VFluent.git master:gh-pages 9 | cd .. 10 | rm -rf ./dist 11 | cd ../../ -------------------------------------------------------------------------------- /build/template/component.d.js: -------------------------------------------------------------------------------- 1 | module.exports=`import {{{ProjectName}}Component,{{ProjectName}}Theme} from './component' 2 | 3 | /** 4 | * {{ComponentName}} Component 5 | */ 6 | export declare class {{ComponentName}} extends {{ProjectName}}Component{ 7 | theme:{{ProjectName}}Theme 8 | disabled:boolean 9 | } 10 | ` -------------------------------------------------------------------------------- /build/template/docs.entry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param ComponentName 3 | * @param chineseName 4 | * @param prefix 5 | */ 6 | 7 | module.exports=`--- 8 | title: {{ComponentName}} 9 | sidebarDepth: 2 10 | --- 11 | 12 | [[toc]] 13 | 14 | ### {{chineseName}}-DEMO 15 | --- 16 | 17 | <{{prefix}}-{{componentname}}> 18 | 19 | 20 | ### Propoties 21 | --- 22 | | 属性(attr) | 类型(type) | 必填(required) | 默认值(default) | 说明(statement) | 23 | |:-----------:|:----------------------------------:|:--------------:|:---------------:|:-----------------------:| 24 | | | | | | | 25 | 26 | ### Events 27 | --- 28 | | 事件名(Name) | 参数类型(args) | 说明(statement) | 29 | |:------------:|:--------------:|:---------------:| 30 | | | | | 31 | ` -------------------------------------------------------------------------------- /build/template/packages.entry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param imports 3 | * @param installs 4 | * @param theme 5 | * @param prefix 6 | */ 7 | module.exports=`// Script Gen, Wanring: Edit template instead of it 8 | import global from './global.js' 9 | import {SDate} from './usual.js' 10 | import {SUtility} from './usual.js' 11 | import {RevealDirect, RevealMasked} from './usual.js' 12 | import '../examples/style/global-transition.css' 13 | import './office-ui-fabric-core/dist/css/fabric.min.css' 14 | {{imports}} 15 | import pkg from "../package.json" 16 | 17 | let components = [ 18 | {{installs}} 19 | ] 20 | 21 | const install = function(Vue, vuex){ 22 | // fix(2022-09-15): fix Vue.use not work 23 | for (let plugin of Vue._installedPlugins){ 24 | if (plugin.name==pkg.name){ 25 | return; 26 | } 27 | } 28 | console.log("[CreatorSN] {{prefix}}Components v"+pkg.version) 29 | Vue.use(vuex) 30 | Vue.prototype.\${{prefix}}Global=global(vuex) 31 | Vue.prototype.$SDate=SDate 32 | Vue.prototype.$SUtility=SUtility 33 | Vue.prototype.$_RevealDirect = undefined; 34 | Object.defineProperty(Vue.prototype, '$RevealDirect', { 35 | get() { 36 | if (Vue.prototype.$_RevealDirect === undefined) { 37 | Vue.prototype.$_RevealDirect = new RevealDirect(); 38 | } 39 | return Vue.prototype.$_RevealDirect; 40 | }, 41 | }); 42 | Vue.prototype.$_RevealMasked = undefined; 43 | Object.defineProperty(Vue.prototype, '$RevealMasked', { 44 | get() { 45 | if (Vue.prototype.$_RevealMasked === undefined) { 46 | Vue.prototype.$_RevealMasked = new RevealMasked(); 47 | } 48 | return Vue.prototype.$_RevealMasked; 49 | }, 50 | }); 51 | components.map(component => Vue.use(component)) 52 | } 53 | 54 | export default { 55 | name: pkg.name, 56 | version: pkg.version, 57 | install, 58 | {{installs}} 59 | } 60 | ` -------------------------------------------------------------------------------- /build/template/scss.index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param prefix 3 | * @param componentname 4 | */ 5 | 6 | module.exports=`.{{prefix}}-{{componentname}}{ 7 | }` -------------------------------------------------------------------------------- /build/template/ui.d.entry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | */ 4 | module.exports=`import Vue, { PluginObject } from 'vue' 5 | import {{{ProjectName}}Component,{{ProjectName}}ComponentSize,{{ProjectName}}HorizontalAlignment,{{ProjectName}}Theme } from './component' 6 | {{importTs}} 7 | 8 | export function install (vue: typeof Vue): void 9 | export type ComponentSize = {{ProjectName}}ComponentSize 10 | export type Component = {{ProjectName}}Component 11 | export type HorizontalAlignment = {{ProjectName}}HorizontalAlignment 12 | export type Theme = {{ProjectName}}Theme 13 | 14 | {{exportTs}} 15 | ` -------------------------------------------------------------------------------- /build/template/vue.entry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param ComponentName 3 | */ 4 | 5 | module.exports=`import {{ComponentName}} from './src/index.vue' 6 | 7 | {{ComponentName}}.install = function(Vue){ 8 | Vue.component({{ComponentName}}.name,{{ComponentName}}) 9 | } 10 | 11 | export default {{ComponentName}};` -------------------------------------------------------------------------------- /build/template/vue.index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @param prefix 3 | * @param preFix 4 | * @param componentname 5 | * @param ComponentName 6 | */ 7 | module.exports = ` 12 | 13 | ` -------------------------------------------------------------------------------- /build/templates.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | 4 | module.exports=function(){ 5 | let templateFiles=fs.readdirSync(path.join(__dirname,'./template')) 6 | let template={} 7 | for (let index in templateFiles){ 8 | template[templateFiles[index]] = require(path.join(__dirname,`./template/${templateFiles[index]}`)) 9 | } 10 | return template 11 | } 12 | -------------------------------------------------------------------------------- /build/updateVersion.ps1: -------------------------------------------------------------------------------- 1 | git add -A 2 | yarn config set version-git-message "[release] publish v%s npm-package" 3 | yarn version --patch 4 | git push 5 | git push --tags -------------------------------------------------------------------------------- /build/utils/render.js: -------------------------------------------------------------------------------- 1 | // TODO: 替换更深层次的对象 2 | 3 | /** 4 | * @param template 模板 5 | * @param obj 替换对象或数组 6 | * @returns string 返回替换后的字符串 7 | */ 8 | module.exports=function(template,obj={},replaceIndex=false){ 9 | if (typeof obj!='object'){ 10 | console.warn('para[2] must be an object') 11 | process.exit(1); 12 | } 13 | let content =''; 14 | if (obj instanceof Array){ 15 | for (let index in obj){ 16 | let s = template; 17 | if (typeof obj[index] == 'object') 18 | for (let key in obj[index]){ 19 | s=s.replace(new RegExp(`{{${key}}}`,'g'),obj[index][key]) 20 | } 21 | else 22 | s=s.replace(new RegExp(`{{}}`,'g'),obj[index]) 23 | if (replaceIndex){ 24 | s=s.replace(new RegExp(`{{index}}`,'g'),index) 25 | } 26 | content+=s 27 | } 28 | }else{ 29 | let s=template 30 | for (let key in obj){ 31 | s=s.replace(new RegExp(`{{${key}}}`,'g'),obj[key]) 32 | } 33 | content+=s; 34 | } 35 | return content; 36 | } -------------------------------------------------------------------------------- /examples/assert/logo/VFluent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/examples/assert/logo/VFluent.png -------------------------------------------------------------------------------- /examples/assert/logo/VFluent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assert/sample/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/examples/assert/sample/1.jpg -------------------------------------------------------------------------------- /examples/assert/sample/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/examples/assert/sample/2.jpg -------------------------------------------------------------------------------- /examples/assert/sample/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/examples/assert/sample/3.jpg -------------------------------------------------------------------------------- /examples/docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const sidebar = require('../sidebar.json'); 3 | const webpack = require('webpack'); 4 | 5 | module.exports = { 6 | head: [['link', { rel: 'icon', href: '/VFluent.png' }]], 7 | base: '/VFluent/', 8 | title: 'FluentVueDesign', 9 | description: 'FluentVueDesign', 10 | configureWebpack: { 11 | resolve: { 12 | alias: { 13 | '@': path.join(__dirname, '../../../packages'), 14 | }, 15 | }, 16 | plugins: [ 17 | new webpack.ProvidePlugin({ 18 | process: 'process/browser', 19 | }), 20 | ], 21 | }, 22 | themeConfig: { 23 | nav: [ 24 | { 25 | text: 'Home', 26 | link: '/', 27 | }, 28 | ], 29 | sidebar: sidebar, 30 | logo: 'https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png', 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import components from '../../../packages' 2 | import Vuex from "vuex" 3 | 4 | 5 | export default ({ 6 | Vue, // the version of Vue being used in the VuePress app 7 | options, // the options for the root Vue instance 8 | router, // the router instance for the app 9 | siteData // site metadata 10 | }) => { 11 | Vue.use(components,Vuex) 12 | } -------------------------------------------------------------------------------- /examples/docs/.vuepress/public/VFluent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/examples/docs/.vuepress/public/VFluent.png -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Yuxi (Evan) You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/components/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 34 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/components/NavLink.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 88 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | 28 | 65 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/components/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 41 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/global-components/Badge.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 45 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | // Theme API. 4 | module.exports = (options, ctx) => { 5 | const { themeConfig, siteConfig } = ctx 6 | 7 | // resolve algolia 8 | const isAlgoliaSearch = ( 9 | themeConfig.algolia 10 | || Object 11 | .keys(siteConfig.locales && themeConfig.locales || {}) 12 | .some(base => themeConfig.locales[base].algolia) 13 | ) 14 | 15 | const enableSmoothScroll = themeConfig.smoothScroll === true 16 | 17 | return { 18 | alias () { 19 | return { 20 | '@AlgoliaSearchBox': isAlgoliaSearch 21 | ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') 22 | : path.resolve(__dirname, 'noopModule.js') 23 | } 24 | }, 25 | 26 | plugins: [ 27 | ['@vuepress/active-header-links', options.activeHeaderLinks], 28 | '@vuepress/search', 29 | '@vuepress/plugin-nprogress', 30 | ['container', { 31 | type: 'tip', 32 | defaultTitle: { 33 | '/': 'TIP', 34 | '/zh/': '提示' 35 | } 36 | }], 37 | ['container', { 38 | type: 'warning', 39 | defaultTitle: { 40 | '/': 'WARNING', 41 | '/zh/': '注意' 42 | } 43 | }], 44 | ['container', { 45 | type: 'danger', 46 | defaultTitle: { 47 | '/': 'WARNING', 48 | '/zh/': '警告' 49 | } 50 | }], 51 | ['container', { 52 | type: 'details', 53 | before: info => `
${info ? `${info}` : ''}\n`, 54 | after: () => '
\n' 55 | }], 56 | ['smooth-scroll', enableSmoothScroll] 57 | ] 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/layouts/404.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 31 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/noopModule.js: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .arrow 4 | display inline-block 5 | width 0 6 | height 0 7 | &.up 8 | border-left 4px solid transparent 9 | border-right 4px solid transparent 10 | border-bottom 6px solid $arrowBgColor 11 | &.down 12 | border-left 4px solid transparent 13 | border-right 4px solid transparent 14 | border-top 6px solid $arrowBgColor 15 | &.right 16 | border-top 4px solid transparent 17 | border-bottom 4px solid transparent 18 | border-left 6px solid $arrowBgColor 19 | &.left 20 | border-top 4px solid transparent 21 | border-bottom 4px solid transparent 22 | border-right 6px solid $arrowBgColor 23 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/config.styl: -------------------------------------------------------------------------------- 1 | $contentClass = '.theme-default-content' 2 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color #42b983 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | a 20 | color $textColor 21 | &.danger 22 | background-color #ffe6e6 23 | border-color darken(red, 20%) 24 | color darken(red, 70%) 25 | .custom-block-title 26 | color darken(red, 40%) 27 | a 28 | color $textColor 29 | &.details 30 | display block 31 | position relative 32 | border-radius 2px 33 | margin 1.6em 0 34 | padding 1.6em 35 | background-color #eee 36 | h4 37 | margin-top 0 38 | figure, p 39 | &:last-child 40 | margin-bottom 0 41 | padding-bottom 0 42 | summary 43 | outline none 44 | cursor pointer 45 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | // width $mobileSidebarWidth 10 | width 100% 11 | .page 12 | padding-left $mobileSidebarWidth 13 | 14 | // wide mobile 15 | @media (max-width: $MQMobile) 16 | .sidebar 17 | top 0 18 | // padding-top $navbarHeight 19 | transform translateX(-100%) 20 | transition transform .2s ease 21 | .page 22 | padding-left 0 23 | .theme-container 24 | &.sidebar-open 25 | .sidebar 26 | transform translateX(0) 27 | &.no-navbar 28 | .sidebar 29 | padding-top: 0 30 | 31 | // narrow mobile 32 | @media (max-width: $MQMobileNarrow) 33 | h1 34 | font-size 1.9rem 35 | {$contentClass} 36 | div[class*="language-"] 37 | margin 0.85rem -1.5rem 38 | border-radius 0 39 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/toc.styl: -------------------------------------------------------------------------------- 1 | .table-of-contents 2 | .badge 3 | vertical-align middle 4 | -------------------------------------------------------------------------------- /examples/docs/.vuepress/theme/styles/wrapper.styl: -------------------------------------------------------------------------------- 1 | $wrapper 2 | max-width $contentWidth 3 | margin 0 auto 4 | padding 2rem 2.5rem 5 | @media (max-width: $MQNarrow) 6 | padding 2rem 7 | @media (max-width: $MQMobileNarrow) 8 | padding 1.5rem 9 | 10 | -------------------------------------------------------------------------------- /examples/docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: UI 3 | home: true 4 | heroImage: https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png 5 | actionLink: /zh/ 6 | features: 7 | - title: 基于Fluent Design理念设计 8 | details: 基于Microsoft Fluent Design System设计理念设计 9 | - title: Vue驱动 10 | details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。 11 | - title: 高性能 12 | details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 13 | footer: MIT Licensed | Copyright © 2023 Creator SN 14 | --- 15 | 16 | 30 | 31 |
32 | 33 | 快速上手 34 | 35 |
-------------------------------------------------------------------------------- /examples/docs/sidebar.json: -------------------------------------------------------------------------------- 1 | [ 2 | "/", 3 | "/zh/Button/", 4 | "/zh/ProgressRing/", 5 | "/zh/CheckBox/", 6 | "/zh/DropDown/", 7 | "/zh/ProgressBar/", 8 | "/zh/FlipView/", 9 | "/zh/ToggleSwitch/", 10 | "/zh/Slider/", 11 | "/zh/CalendarView/", 12 | "/zh/ColorPicker/", 13 | "/zh/TextBox/", 14 | "/zh/RadioGroup/", 15 | "/zh/Radio/", 16 | "/zh/Callout/", 17 | "/zh/ImgBox/", 18 | "/zh/ScrollStory/", 19 | "/zh/DetailsList/", 20 | "/zh/Pivot/", 21 | "/zh/MenuFlyout/", 22 | "/zh/ListView/", 23 | "/zh/NavigationView/", 24 | "/zh/TreeView/", 25 | "/zh/CommandBar/", 26 | "/zh/NavigationPanel/", 27 | "/zh/Image/", 28 | "/zh/Img/", 29 | "/zh/SearchBox/", 30 | "/zh/CalendarDatePicker/", 31 | "/zh/WebWindow/", 32 | "/zh/DatePicker/", 33 | "/zh/Persona/", 34 | "/zh/Combobox/", 35 | "/zh/TimePicker/", 36 | "/zh/Shimmer/", 37 | "/zh/MessageBar/", 38 | "/zh/InfoBox/", 39 | "/zh/Drawer/", 40 | "/zh/Badge/", 41 | "/zh/Panel/", 42 | "/zh/Pagination/", 43 | "/zh/Breadcrumb/", 44 | "/zh/AnimatedIcon/", 45 | "/zh/Tag/", 46 | "/zh/Collapse/", 47 | "/zh/InfiniteScrollView/", 48 | "/zh/TextField/", 49 | "/zh/VerifyBox/", 50 | "/zh/RevealContainer/", 51 | "/zh/SwipeControl/", 52 | "/zh/Expander/", 53 | "/zh/RatingControl/", 54 | "/zh/IconElement/", 55 | "/zh/Affix/", 56 | "/zh/ResizeWatcher/", 57 | "/zh/RightMenu/", 58 | "/zh/TableView/" 59 | ] 60 | -------------------------------------------------------------------------------- /examples/docs/zh/ColorPicker/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ColorPicker 3 | sidebarDepth: 2 4 | --- 5 | 6 | 15 | 16 | [[toc]] 17 | 18 | #### ColorPicker Default 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ```vue 29 | 30 | 31 | ``` 32 | 33 | {{value}} 34 | 35 | #### ColorPicker Simplest 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ```vue 44 | 45 | 46 | ``` 47 | 48 | 49 | 50 | ### Propoties 51 | --- 52 | | 属性(attr) | 类型(type) | 必填(required) | 默认值(default) | 说明(statement) | 53 | |:-------------:|:----------:|:--------------:|:---------------:|:------------------:| 54 | | v-model/value | String | No | #fff | 颜色HEX | 55 | | alpha | Number | No | 1 | 透明度 | 56 | | hideAlpha | Boolean | No | false | 是否隐藏透明度调节 | 57 | | hidePreview | Boolean | No | false | 是否隐藏预览框 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /examples/docs/zh/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 中文文档 3 | sidebarDepth: 2 4 | --- 5 | 6 | [[toc]] 7 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["./packages/*"] 6 | }, 7 | "jsx": "preserve" 8 | }, 9 | "include": ["./packages/**/*"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/Affix/index.js: -------------------------------------------------------------------------------- 1 | import Affix from './src/index.vue' 2 | 3 | Affix.install = function(Vue){ 4 | Vue.component(Affix.name,Affix) 5 | } 6 | 7 | export default Affix; 8 | -------------------------------------------------------------------------------- /packages/AnimatedIcon/index.js: -------------------------------------------------------------------------------- 1 | import AnimatedIcon from './src/index.vue' 2 | 3 | AnimatedIcon.install = function(Vue){ 4 | Vue.component(AnimatedIcon.name,AnimatedIcon) 5 | } 6 | 7 | export default AnimatedIcon; 8 | -------------------------------------------------------------------------------- /packages/Badge/index.js: -------------------------------------------------------------------------------- 1 | import Badge from './src/index.vue' 2 | 3 | Badge.install = function(Vue){ 4 | Vue.component(Badge.name,Badge) 5 | } 6 | 7 | export default Badge; 8 | -------------------------------------------------------------------------------- /packages/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './src/index.vue' 2 | 3 | Breadcrumb.install = function(Vue){ 4 | Vue.component(Breadcrumb.name,Breadcrumb) 5 | } 6 | 7 | export default Breadcrumb; 8 | -------------------------------------------------------------------------------- /packages/Button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/index.vue' 2 | 3 | Button.install = function(Vue){ 4 | Vue.component(Button.name,Button) 5 | } 6 | 7 | export default Button; 8 | -------------------------------------------------------------------------------- /packages/CalendarDatePicker/index.js: -------------------------------------------------------------------------------- 1 | import CalendarDatePicker from './src/index.vue' 2 | 3 | CalendarDatePicker.install = function(Vue){ 4 | Vue.component(CalendarDatePicker.name,CalendarDatePicker) 5 | } 6 | 7 | export default CalendarDatePicker; 8 | -------------------------------------------------------------------------------- /packages/CalendarView/index.js: -------------------------------------------------------------------------------- 1 | import CalendarView from './src/index.vue' 2 | 3 | CalendarView.install = function(Vue){ 4 | Vue.component(CalendarView.name,CalendarView) 5 | } 6 | 7 | export default CalendarView; 8 | -------------------------------------------------------------------------------- /packages/Callout/index.js: -------------------------------------------------------------------------------- 1 | import Callout from './src/index.vue' 2 | 3 | Callout.install = function(Vue){ 4 | Vue.component(Callout.name,Callout) 5 | } 6 | 7 | export default Callout; 8 | -------------------------------------------------------------------------------- /packages/Callout/src/utils/Bound.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 获取element的真实属性 3 | * @param {HTMLElement} el 4 | * @returns {DOMRect} 元素的宽高等 5 | */ 6 | function getBoundingRect(el) { 7 | const computed = getComputedStyle(el); 8 | if (computed.display != 'none') { 9 | return el.getBoundingClientRect() 10 | } 11 | let style = { 12 | display: "block", // 设置为显示 13 | visibility: "hidden", // 设置为用户不可见 14 | transition: "none" // 关闭所有的动画，避免影响结果 15 | } 16 | let oldStyle = {} 17 | // 备份样式 18 | for (let styleName in style) { 19 | oldStyle[styleName] = el.style.getPropertyValue(styleName); 20 | } 21 | // 设置样式 22 | for (let styleName in style) { 23 | el.style.setProperty(styleName, style[styleName], "important"); 24 | } 25 | let result = el.getBoundingClientRect(); 26 | // 还原为原本的样式 27 | for (let styleName in style) { 28 | el.style.setProperty(styleName, oldStyle[styleName]) 29 | } 30 | return result; 31 | } 32 | 33 | 34 | 35 | export { getBoundingRect } 36 | 37 | export default getBoundingRect -------------------------------------------------------------------------------- /packages/CheckBox/index.js: -------------------------------------------------------------------------------- 1 | import CheckBox from './src/index.vue' 2 | 3 | CheckBox.install = function(Vue){ 4 | Vue.component(CheckBox.name,CheckBox) 5 | } 6 | 7 | export default CheckBox; 8 | -------------------------------------------------------------------------------- /packages/Collapse/index.js: -------------------------------------------------------------------------------- 1 | import Collapse from './src/index.vue' 2 | 3 | Collapse.install = function(Vue){ 4 | Vue.component(Collapse.name,Collapse) 5 | } 6 | 7 | export default Collapse; 8 | -------------------------------------------------------------------------------- /packages/ColorPicker/index.js: -------------------------------------------------------------------------------- 1 | import ColorPicker from './src/index.vue' 2 | 3 | ColorPicker.install = function(Vue){ 4 | Vue.component(ColorPicker.name,ColorPicker) 5 | } 6 | 7 | export default ColorPicker; 8 | -------------------------------------------------------------------------------- /packages/Combobox/index.js: -------------------------------------------------------------------------------- 1 | import Combobox from './src/index.vue' 2 | 3 | Combobox.install = function(Vue){ 4 | Vue.component(Combobox.name,Combobox) 5 | } 6 | 7 | export default Combobox; 8 | -------------------------------------------------------------------------------- /packages/CommandBar/index.js: -------------------------------------------------------------------------------- 1 | import CommandBar from './src/index.vue' 2 | 3 | CommandBar.install = function(Vue){ 4 | Vue.component(CommandBar.name,CommandBar) 5 | } 6 | 7 | export default CommandBar; 8 | -------------------------------------------------------------------------------- /packages/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | import DatePicker from './src/index.vue' 2 | 3 | DatePicker.install = function(Vue){ 4 | Vue.component(DatePicker.name,DatePicker) 5 | } 6 | 7 | export default DatePicker; 8 | -------------------------------------------------------------------------------- /packages/DetailsList/index.js: -------------------------------------------------------------------------------- 1 | import DetailsList from './src/index.vue' 2 | 3 | DetailsList.install = function(Vue){ 4 | Vue.component(DetailsList.name,DetailsList) 5 | } 6 | 7 | export default DetailsList; 8 | -------------------------------------------------------------------------------- /packages/DetailsList/src/sub/selector.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | -------------------------------------------------------------------------------- /packages/Drawer/index.js: -------------------------------------------------------------------------------- 1 | import Drawer from './src/index.vue' 2 | 3 | Drawer.install = function(Vue){ 4 | Vue.component(Drawer.name,Drawer) 5 | } 6 | 7 | export default Drawer; 8 | -------------------------------------------------------------------------------- /packages/DropDown/index.js: -------------------------------------------------------------------------------- 1 | import DropDown from './src/index.vue' 2 | 3 | DropDown.install = function(Vue){ 4 | Vue.component(DropDown.name,DropDown) 5 | } 6 | 7 | export default DropDown; 8 | -------------------------------------------------------------------------------- /packages/Expander/index.js: -------------------------------------------------------------------------------- 1 | import Expander from './src/index.vue' 2 | 3 | Expander.install = function(Vue){ 4 | Vue.component(Expander.name,Expander) 5 | } 6 | 7 | export default Expander; 8 | -------------------------------------------------------------------------------- /packages/FlipView/index.js: -------------------------------------------------------------------------------- 1 | import FlipView from './src/index.vue' 2 | 3 | FlipView.install = function(Vue){ 4 | Vue.component(FlipView.name,FlipView) 5 | } 6 | 7 | export default FlipView; 8 | -------------------------------------------------------------------------------- /packages/IconElement/index.js: -------------------------------------------------------------------------------- 1 | import IconElement from './src/index.vue' 2 | 3 | IconElement.install = function(Vue){ 4 | Vue.component(IconElement.name,IconElement) 5 | } 6 | 7 | export default IconElement; 8 | -------------------------------------------------------------------------------- /packages/Image/index.js: -------------------------------------------------------------------------------- 1 | import Image from './src/index.vue' 2 | 3 | Image.install = function(Vue){ 4 | Vue.component(Image.name,Image) 5 | } 6 | 7 | export default Image; 8 | -------------------------------------------------------------------------------- /packages/Img/index.js: -------------------------------------------------------------------------------- 1 | import Img from './src/index.vue' 2 | 3 | Img.install = function(Vue){ 4 | Vue.component(Img.name,Img) 5 | } 6 | 7 | export default Img; 8 | -------------------------------------------------------------------------------- /packages/Img/src/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 43 | -------------------------------------------------------------------------------- /packages/ImgBox/index.js: -------------------------------------------------------------------------------- 1 | import ImgBox from './src/index.vue' 2 | 3 | ImgBox.install = function(Vue){ 4 | Vue.component(ImgBox.name,ImgBox) 5 | } 6 | 7 | export default ImgBox; 8 | -------------------------------------------------------------------------------- /packages/InfiniteScrollView/index.js: -------------------------------------------------------------------------------- 1 | import InfiniteScrollView from './src/index.vue' 2 | 3 | InfiniteScrollView.install = function(Vue){ 4 | Vue.component(InfiniteScrollView.name,InfiniteScrollView) 5 | } 6 | 7 | export default InfiniteScrollView; 8 | -------------------------------------------------------------------------------- /packages/InfoBox/index.js: -------------------------------------------------------------------------------- 1 | import InfoBox from './src/index.vue' 2 | 3 | InfoBox.install = function (Vue) { 4 | Vue.component(InfoBox.name, InfoBox) 5 | 6 | let currentInfoBox; 7 | Vue.prototype.$infoBox = (msg, options) => { 8 | let thisOptions = { 9 | title: 'Tip', 10 | status: 'default', 11 | mode: 'fixed', 12 | toast: true, 13 | confirmTitle: '确定', 14 | cancelTitle: '取消', 15 | acrylic: false, 16 | control_panel: null, 17 | confirm: async () => { }, 18 | cancel: async () => { }, 19 | theme: 'system' 20 | }; 21 | thisOptions = Object.assign(thisOptions, options); 22 | currentInfoBox = createInfoBox({ 23 | Vue, 24 | msg, 25 | control_panel: thisOptions.control_panel, 26 | propsData: thisOptions, 27 | onConfirm: async () => { 28 | await thisOptions.confirm(); 29 | currentInfoBox = null; 30 | }, 31 | onClose: async () => { 32 | await thisOptions.cancel(); 33 | currentInfoBox = null; 34 | } 35 | }); 36 | } 37 | 38 | let createInfoBox = ({ Vue, msg, control_panel, propsData, onConfirm, onClose }) => { 39 | const infoBox = Vue.extend(InfoBox) 40 | let m = new infoBox({ 41 | propsData, 42 | }) 43 | m.$slots.msg = [msg]; 44 | if (control_panel) m.$scopedSlots = { 45 | 'control-panel': props => { 46 | return control_panel(props); 47 | } 48 | } 49 | m.$mount(); 50 | m.$on('confirm', onConfirm); 51 | m.$on('close', onClose); 52 | document.body.appendChild(m.$el); 53 | return m; 54 | }; 55 | } 56 | 57 | export default InfoBox; 58 | -------------------------------------------------------------------------------- /packages/Js/RevealEffect/index.js: -------------------------------------------------------------------------------- 1 | import { RevealDirect } from './direct'; 2 | import { RevealMasked } from './masked'; 3 | 4 | export { RevealDirect, RevealMasked }; -------------------------------------------------------------------------------- /packages/ListView/index.js: -------------------------------------------------------------------------------- 1 | import ListView from './src/index.vue' 2 | 3 | ListView.install = function(Vue){ 4 | Vue.component(ListView.name,ListView) 5 | } 6 | 7 | export default ListView; 8 | -------------------------------------------------------------------------------- /packages/MenuFlyout/index.js: -------------------------------------------------------------------------------- 1 | import MenuFlyout from "./src/index.vue"; 2 | 3 | MenuFlyout.install = function (Vue) { 4 | Vue.component(MenuFlyout.name, MenuFlyout); 5 | 6 | }; 7 | 8 | export default MenuFlyout; 9 | -------------------------------------------------------------------------------- /packages/NavigationPanel/index.js: -------------------------------------------------------------------------------- 1 | import NavigationPanel from './src/index.vue' 2 | 3 | NavigationPanel.install = function(Vue){ 4 | Vue.component(NavigationPanel.name,NavigationPanel) 5 | } 6 | 7 | export default NavigationPanel; 8 | -------------------------------------------------------------------------------- /packages/NavigationView/index.js: -------------------------------------------------------------------------------- 1 | import NavigationView from './src/index.vue' 2 | 3 | NavigationView.install = function(Vue){ 4 | Vue.component(NavigationView.name,NavigationView) 5 | } 6 | 7 | export default NavigationView; 8 | -------------------------------------------------------------------------------- /packages/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './src/index.vue' 2 | 3 | Pagination.install = function(Vue){ 4 | Vue.component(Pagination.name,Pagination) 5 | } 6 | 7 | export default Pagination; 8 | -------------------------------------------------------------------------------- /packages/Panel/index.js: -------------------------------------------------------------------------------- 1 | import Panel from './src/index.vue' 2 | 3 | Panel.install = function(Vue){ 4 | Vue.component(Panel.name,Panel) 5 | } 6 | 7 | export default Panel; 8 | -------------------------------------------------------------------------------- /packages/Persona/index.js: -------------------------------------------------------------------------------- 1 | import Persona from './src/index.vue' 2 | 3 | Persona.install = function(Vue){ 4 | Vue.component(Persona.name,Persona) 5 | } 6 | 7 | export default Persona; 8 | -------------------------------------------------------------------------------- /packages/Pivot/index.js: -------------------------------------------------------------------------------- 1 | import Pivot from './src/index.vue' 2 | 3 | Pivot.install = function(Vue){ 4 | Vue.component(Pivot.name,Pivot) 5 | } 6 | 7 | export default Pivot; 8 | -------------------------------------------------------------------------------- /packages/ProgressBar/index.js: -------------------------------------------------------------------------------- 1 | import ProgressBar from './src/index.vue' 2 | 3 | ProgressBar.install = function(Vue){ 4 | Vue.component(ProgressBar.name,ProgressBar) 5 | } 6 | 7 | export default ProgressBar; 8 | -------------------------------------------------------------------------------- /packages/ProgressBar/src/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 54 | -------------------------------------------------------------------------------- /packages/ProgressRing/index.js: -------------------------------------------------------------------------------- 1 | import ProgressRing from './src/index.vue' 2 | 3 | ProgressRing.install = function(Vue){ 4 | Vue.component(ProgressRing.name,ProgressRing) 5 | } 6 | 7 | export default ProgressRing; 8 | -------------------------------------------------------------------------------- /packages/ProgressRing/src/legacy.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 46 | -------------------------------------------------------------------------------- /packages/Radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './src/index.vue' 2 | 3 | Radio.install = function(Vue){ 4 | Vue.component(Radio.name,Radio) 5 | } 6 | 7 | export default Radio; 8 | -------------------------------------------------------------------------------- /packages/RadioGroup/index.js: -------------------------------------------------------------------------------- 1 | import RadioGroup from './src/index.vue' 2 | RadioGroup.install = function(Vue){ 3 | Vue.component(RadioGroup.name,RadioGroup) 4 | } 5 | 6 | export default RadioGroup; 7 | -------------------------------------------------------------------------------- /packages/RadioGroup/src/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 48 | -------------------------------------------------------------------------------- /packages/RatingControl/index.js: -------------------------------------------------------------------------------- 1 | import RatingControl from './src/index.vue' 2 | 3 | RatingControl.install = function(Vue){ 4 | Vue.component(RatingControl.name,RatingControl) 5 | } 6 | 7 | export default RatingControl; 8 | -------------------------------------------------------------------------------- /packages/ResizeWatcher/index.js: -------------------------------------------------------------------------------- 1 | import ResizeWatcher from './src/index.vue' 2 | 3 | ResizeWatcher.install = function(Vue){ 4 | Vue.component(ResizeWatcher.name,ResizeWatcher) 5 | } 6 | 7 | export default ResizeWatcher; 8 | -------------------------------------------------------------------------------- /packages/RevealContainer/index.js: -------------------------------------------------------------------------------- 1 | import RevealContainer from './src/index.vue' 2 | 3 | RevealContainer.install = function(Vue){ 4 | Vue.component(RevealContainer.name,RevealContainer) 5 | } 6 | 7 | export default RevealContainer; 8 | -------------------------------------------------------------------------------- /packages/RightMenu/index.js: -------------------------------------------------------------------------------- 1 | import RightMenu from './src/index.vue' 2 | 3 | RightMenu.install = function(Vue){ 4 | Vue.component(RightMenu.name,RightMenu) 5 | } 6 | 7 | export default RightMenu; 8 | -------------------------------------------------------------------------------- /packages/ScrollStory/index.js: -------------------------------------------------------------------------------- 1 | import ScrollStory from './src/index.vue' 2 | 3 | ScrollStory.install = function(Vue){ 4 | Vue.component(ScrollStory.name,ScrollStory) 5 | } 6 | 7 | export default ScrollStory; 8 | -------------------------------------------------------------------------------- /packages/SearchBox/index.js: -------------------------------------------------------------------------------- 1 | import SearchBox from './src/index.vue' 2 | 3 | SearchBox.install = function(Vue){ 4 | Vue.component(SearchBox.name,SearchBox) 5 | } 6 | 7 | export default SearchBox; 8 | -------------------------------------------------------------------------------- /packages/Shimmer/index.js: -------------------------------------------------------------------------------- 1 | import Shimmer from './src/index.vue' 2 | 3 | Shimmer.install = function(Vue){ 4 | Vue.component(Shimmer.name,Shimmer) 5 | } 6 | 7 | export default Shimmer; 8 | -------------------------------------------------------------------------------- /packages/Slider/index.js: -------------------------------------------------------------------------------- 1 | import Slider from './src/index.vue' 2 | 3 | Slider.install = function(Vue){ 4 | Vue.component(Slider.name,Slider) 5 | } 6 | 7 | export default Slider; 8 | -------------------------------------------------------------------------------- /packages/SwipeControl/index.js: -------------------------------------------------------------------------------- 1 | import SwipeControl from './src/index.vue' 2 | 3 | SwipeControl.install = function(Vue){ 4 | Vue.component(SwipeControl.name,SwipeControl) 5 | } 6 | 7 | export default SwipeControl; 8 | -------------------------------------------------------------------------------- /packages/TableView/index.js: -------------------------------------------------------------------------------- 1 | import TableView from './src/index.vue' 2 | import tableViewHeadBase from './src/sub/tableViewHeadBase.vue'; 3 | import tableViewCellBase from './src/sub/tableViewCellBase.vue'; 4 | 5 | TableView.install = function (Vue) { 6 | Vue.component(TableView.name, TableView) 7 | Vue.component(tableViewHeadBase.name, tableViewHeadBase) 8 | Vue.component(tableViewCellBase.name, tableViewCellBase) 9 | } 10 | 11 | export default TableView; 12 | 13 | -------------------------------------------------------------------------------- /packages/TableView/src/sub/defaultExtensions/date/index.js: -------------------------------------------------------------------------------- 1 | import dateHead from './dateHead.vue'; 2 | import dateCell from './dateCell.vue'; 3 | 4 | export default { 5 | name: 'Date', 6 | type: 'date', 7 | icon: 'Calendar', 8 | emoji: '📅', 9 | headComponent: dateHead, 10 | cellComponent: dateCell, 11 | filter: ({ input, value }) => { 12 | if (!input) return true; 13 | return ( 14 | input === value 15 | ); 16 | }, 17 | sortAsc: (a, b) => { 18 | return a.localeCompare(b); 19 | }, 20 | sortDesc: (a, b) => { 21 | return b.localeCompare(a); 22 | } 23 | } -------------------------------------------------------------------------------- /packages/TableView/src/sub/defaultExtensions/email/index.js: -------------------------------------------------------------------------------- 1 | import emailHead from './emailHead.vue'; 2 | import emailCell from './emailCell.vue'; 3 | 4 | export default { 5 | name: 'Email', 6 | type: 'email', 7 | icon: 'Accounts', 8 | emoji: '@', 9 | headComponent: emailHead, 10 | cellComponent: emailCell, 11 | filter: ({ input, value }) => { 12 | if (!input) return true; 13 | return ( 14 | input === value 15 | ); 16 | }, 17 | sortAsc: (a, b) => { 18 | return a.localeCompare(b); 19 | }, 20 | sortDesc: (a, b) => { 21 | return b.localeCompare(a); 22 | } 23 | } -------------------------------------------------------------------------------- /packages/TableView/src/sub/defaultExtensions/number/index.js: -------------------------------------------------------------------------------- 1 | import numberHead from './numberHead.vue'; 2 | import numberCell from './numberCell.vue'; 3 | 4 | export default { 5 | name: 'Number', 6 | type: 'number', 7 | icon: 'NumberField', 8 | emoji: '🔢', 9 | headComponent: numberHead, 10 | cellComponent: numberCell, 11 | filter: ({ input, value }) => { 12 | if (!input) return true; 13 | return ( 14 | input === value 15 | ); 16 | }, 17 | sortAsc: (a, b) => { 18 | return a.localeCompare(b); 19 | }, 20 | sortDesc: (a, b) => { 21 | return b.localeCompare(a); 22 | } 23 | } -------------------------------------------------------------------------------- /packages/TableView/src/sub/editWrapper.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 65 | -------------------------------------------------------------------------------- /packages/Tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './src/index.vue' 2 | 3 | Tag.install = function(Vue){ 4 | Vue.component(Tag.name,Tag) 5 | } 6 | 7 | export default Tag; 8 | -------------------------------------------------------------------------------- /packages/TextBox/index.js: -------------------------------------------------------------------------------- 1 | import TextBox from './src/index.vue' 2 | 3 | TextBox.install = function(Vue){ 4 | Vue.component(TextBox.name,TextBox) 5 | } 6 | 7 | export default TextBox; 8 | -------------------------------------------------------------------------------- /packages/TextField/index.js: -------------------------------------------------------------------------------- 1 | import TextField from './src/index.vue' 2 | 3 | TextField.install = function(Vue){ 4 | Vue.component(TextField.name,TextField) 5 | } 6 | 7 | export default TextField; 8 | -------------------------------------------------------------------------------- /packages/TimePicker/index.js: -------------------------------------------------------------------------------- 1 | import TimePicker from './src/index.vue' 2 | 3 | TimePicker.install = function(Vue){ 4 | Vue.component(TimePicker.name,TimePicker) 5 | } 6 | 7 | export default TimePicker; 8 | -------------------------------------------------------------------------------- /packages/ToggleSwitch/index.js: -------------------------------------------------------------------------------- 1 | import ToggleSwitch from './src/index.vue' 2 | 3 | ToggleSwitch.install = function(Vue){ 4 | Vue.component(ToggleSwitch.name,ToggleSwitch) 5 | } 6 | 7 | export default ToggleSwitch; 8 | -------------------------------------------------------------------------------- /packages/TreeView/index.js: -------------------------------------------------------------------------------- 1 | import TreeView from './src/index.vue' 2 | 3 | TreeView.install = function(Vue){ 4 | Vue.component(TreeView.name,TreeView) 5 | } 6 | 7 | export default TreeView; 8 | -------------------------------------------------------------------------------- /packages/VerifyBox/index.js: -------------------------------------------------------------------------------- 1 | import VerifyBox from './src/index.vue' 2 | 3 | VerifyBox.install = function(Vue){ 4 | Vue.component(VerifyBox.name,VerifyBox) 5 | } 6 | 7 | export default VerifyBox; 8 | -------------------------------------------------------------------------------- /packages/WebWindow/index.js: -------------------------------------------------------------------------------- 1 | import WebWindow from './src/index.vue' 2 | 3 | WebWindow.install = function(Vue){ 4 | Vue.component(WebWindow.name,WebWindow) 5 | } 6 | 7 | export default WebWindow; 8 | -------------------------------------------------------------------------------- /packages/common-theme/Affix.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Affix { 2 | position: relative; 3 | width: auto; 4 | height: auto; 5 | flex-shrink: 0; 6 | 7 | .fv-affix-container { 8 | position: fixed; 9 | isolation: isolate; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/common-theme/AnimatedIcon.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-AnimatedIcon { 2 | 3 | position: relative; 4 | width: auto; 5 | height: auto; 6 | margin: 0px; 7 | padding: 0px; 8 | border: transparent solid thin; 9 | border-radius: 6px; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | 14 | .fv-animated-icon-container 15 | { 16 | position: relative; 17 | width: auto; 18 | height: 100%; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | 23 | &.hideContent 24 | { 25 | width: 100%; 26 | } 27 | } 28 | 29 | .fv-animated-content-block 30 | { 31 | position: relative; 32 | width: 100%; 33 | height: 100%; 34 | flex: 1; 35 | box-sizing: border-box; 36 | display: flex; 37 | justify-content: flex-start; 38 | align-items: center; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/common-theme/Badge.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Badge { 2 | 3 | position: relative; 4 | width: auto; 5 | height: auto; 6 | margin: 0px; 7 | padding: 0px; 8 | vertical-align: middle; 9 | display: inline-block; 10 | 11 | .fv-badge-container 12 | { 13 | position: absolute; 14 | top: -5px; 15 | right: -10px; 16 | padding: 0.1px 6px; 17 | background: #f56c6c; 18 | border-radius: 10px; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | transition: all 0.3s ease-out; 23 | 24 | p.badge-content 25 | { 26 | height: 20px; 27 | margin: 0px; 28 | padding: 0px; 29 | font-size: 13.8px; 30 | color: whitesmoke; 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | user-select: none; 35 | } 36 | 37 | &.dot 38 | { 39 | width: 10px; 40 | height: 10px; 41 | margin: 0px; 42 | padding: 0px; 43 | border-radius: 50%; 44 | 45 | p.badge-content 46 | { 47 | display: none; 48 | } 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/common-theme/Button.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-button { 2 | 3 | position: relative; 4 | width: 80px; 5 | height: 30px; 6 | box-sizing: border-box; 7 | display: flex; 8 | user-select: none; 9 | 10 | div.fv-button-main-container 11 | { 12 | position: relative; 13 | width: 100%; 14 | height: 100%; 15 | box-sizing: border-box; 16 | display: flex; 17 | overflow: hidden; 18 | 19 | &:hover 20 | { 21 | background: rgba(121, 119, 117, 0.1); 22 | transition: all 0.6s; 23 | } 24 | 25 | &.shadow 26 | { 27 | box-shadow: rgba(0, 0, 0, 0.133) 0px 1px 1px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; 28 | } 29 | 30 | &.disabled 31 | { 32 | background: transparent; 33 | filter: grayscale(1); 34 | box-shadow: none; 35 | opacity: 0.6; 36 | } 37 | 38 | .fv-button-reveal-container 39 | { 40 | position: absolute; 41 | left: 0px; 42 | top: 0px; 43 | width: 100%; 44 | height: 100%; 45 | } 46 | 47 | .fv-button-container 48 | { 49 | width: 100%; 50 | height: 100%; 51 | background: #edebe9; 52 | border: rgba(0, 0, 0, 0.1) solid thin; 53 | outline: none; 54 | box-sizing: border-box; 55 | transition: all 0.3s; 56 | 57 | span.fv-btn-content-block 58 | { 59 | width: 100%; 60 | height: 100%; 61 | display: flex; 62 | justify-content: center; 63 | align-items: center; 64 | } 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /packages/common-theme/Drawer.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-drawer { 2 | position: fixed; 3 | background-color: rgba(239, 239, 239,0.99); 4 | box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); 5 | backdrop-filter: blur(50px); 6 | overflow: hidden; 7 | transition: transform 0.3s; 8 | // filter:blur(2px); 9 | transition-timing-function: ease-in-out; 10 | } 11 | -------------------------------------------------------------------------------- /packages/common-theme/IconElement.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-IconElement { 2 | position: relative; 3 | width: 25px; 4 | height: 25px; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | 9 | .icon-element-item { 10 | position: absolute; 11 | width: 100%; 12 | height: 100%; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | 17 | .icon-element { 18 | background-clip: text; 19 | -webkit-background-clip: text; 20 | -webkit-text-fill-color: transparent; 21 | } 22 | 23 | &.left { 24 | transform: scale(0.7); 25 | transform-origin: left; 26 | } 27 | 28 | &.right { 29 | transform: scale(0.7); 30 | transform-origin: right; 31 | } 32 | 33 | &.top { 34 | transform: scale(0.7); 35 | transform-origin: top; 36 | } 37 | 38 | &.bottom { 39 | transform: scale(0.7); 40 | transform-origin: bottom; 41 | } 42 | 43 | &.top-left { 44 | transform: scale(0.5); 45 | transform-origin: top left; 46 | } 47 | 48 | &.top-right { 49 | transform: scale(0.5); 50 | transform-origin: top right; 51 | } 52 | 53 | &.bottom-left { 54 | transform: scale(0.5); 55 | transform-origin: bottom left; 56 | } 57 | 58 | &.bottom-right { 59 | transform: scale(0.5); 60 | transform-origin: bottom right; 61 | } 62 | } 63 | 64 | &.icon-element-btn { 65 | border-radius: 3px; 66 | 67 | &:hover { 68 | background: rgba(200, 200, 200, 0.3); 69 | } 70 | 71 | &:active { 72 | background: rgba(200, 200, 200, 0.6); 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /packages/common-theme/Image.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Image { 2 | 3 | position: relative; 4 | width: 300px; 5 | height: auto; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | overflow: hidden; 10 | z-index: 0; 11 | 12 | img 13 | { 14 | width: 100%; 15 | height: 100%; 16 | object-fit: cover; 17 | z-index: -1; 18 | } 19 | 20 | .fade-in-enter,.fade-in-leave-to 21 | { 22 | opacity: 0; 23 | filter: blur(8px); 24 | transition: all 0.8s; 25 | } 26 | .fade-in-enter-to,.fade-in-leave 27 | { 28 | opacity: 1; 29 | filter: blur(0px); 30 | transition: all 0.8s; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/common-theme/Img.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Img { 2 | 3 | position: relative; 4 | width: 300px; 5 | height: auto; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | z-index: 0; 10 | overflow: hidden; 11 | } 12 | -------------------------------------------------------------------------------- /packages/common-theme/ImgBox.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-ImgBox { 2 | 3 | position: relative; 4 | width: 300px; 5 | height: auto; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | overflow: hidden; 10 | z-index: 0; 11 | 12 | .fv-img-box-content 13 | { 14 | position: absolute; 15 | left: 0px; 16 | top: 0px; 17 | width: 100%; 18 | height: 100%; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | z-index: 2; 23 | } 24 | 25 | img 26 | { 27 | width: 100%; 28 | height: 100%; 29 | object-fit: cover; 30 | z-index: -1; 31 | } 32 | 33 | .fade-in-enter,.fade-in-leave-to 34 | { 35 | opacity: 0; 36 | filter: blur(8px); 37 | transition: all 0.8s; 38 | } 39 | .fade-in-enter-to,.fade-in-leave 40 | { 41 | opacity: 1; 42 | filter: blur(0px); 43 | transition: all 0.8s; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/common-theme/InfiniteScrollView.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-InfiniteScrollView { 2 | 3 | position: relative; 4 | height: 300px; 5 | overflow: auto; 6 | } 7 | -------------------------------------------------------------------------------- /packages/common-theme/Pagination.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Pagination { 2 | 3 | position: relative; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | 8 | .fv-pagination-container 9 | { 10 | position: relative; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | 15 | .page-btn 16 | { 17 | width: 35px; 18 | height: 35px; 19 | margin: 0px 1.5px; 20 | 21 | &.small 22 | { 23 | width: 30px; 24 | height: 30px; 25 | } 26 | 27 | &.shadow 28 | { 29 | box-shadow: $ms-depth-shadow-8; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/common-theme/ProgressBar.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-ProgressBar 2 | { 3 | position: relative; 4 | width: 300px; 5 | height: 5px; 6 | box-sizing: border-box; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | overflow: visible; 11 | transition: all 0.2s; 12 | -webkit-transition: all 0.2s; 13 | 14 | &.normal 15 | { 16 | background: rgba(120,120,120,0.35); 17 | justify-content: flex-start; 18 | 19 | i 20 | { 21 | height: 100%; 22 | background: rgba(0, 90, 158, 0.8); 23 | transition: all 0.8s; 24 | transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); 25 | -webkit-transition: all 0.8s; 26 | } 27 | } 28 | 29 | &.disabled 30 | { 31 | opacity: 0.3; 32 | filter: grayscale(1); 33 | } 34 | 35 | p.unit 36 | { 37 | position: absolute; 38 | left: calc(50% - 2.5px); 39 | top: calc(50% - 2.5px); 40 | width: 5px; 41 | height: 5px; 42 | margin: 0px; 43 | background: cornflowerblue; 44 | border-radius: 50%; 45 | opacity: 0; 46 | animation: progressbar 6s infinite; 47 | 48 | &:nth-of-type(1) { 49 | animation-delay: 0.16s; 50 | } 51 | &:nth-of-type(2) { 52 | animation-delay: 0.32s; 53 | } 54 | &:nth-of-type(3) { 55 | animation-delay: 0.48s; 56 | } 57 | &:nth-of-type(4) { 58 | animation-delay: 0.64s; 59 | } 60 | &:nth-of-type(5) { 61 | animation-delay: 0.8s; 62 | } 63 | } 64 | 65 | @keyframes progressbar { 66 | 0%{opacity: 0; margin-left: -100%;} 67 | 50%{opacity: 1; margin-left: 0%;} 68 | 100%{opacity: 0; margin-left: 100%;} 69 | } 70 | } -------------------------------------------------------------------------------- /packages/common-theme/RadioGroup.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-radioGroup { 2 | position: relative; 3 | height: auto; 4 | line-height: 2; 5 | display: flex; 6 | flex-direction: column; 7 | 8 | &.inline { 9 | flex-direction: row; 10 | } 11 | 12 | label { 13 | height: auto; 14 | margin-right: 15px; 15 | display: flex; 16 | align-items: center; 17 | } 18 | 19 | .row-block { 20 | margin: 3px 0px; 21 | display: flex; 22 | flex-direction: row; 23 | align-items: center; 24 | justify-content: flex-start; 25 | } 26 | 27 | .fv-light-radio, 28 | .fv-dark-radio { 29 | margin: 3px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/common-theme/RatingControl.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-RatingControl { 2 | .fv-rating-container { 3 | position: relative; 4 | width: auto; 5 | display: flex; 6 | align-items: center; 7 | 8 | .fv-rating-unit { 9 | position: relative; 10 | margin: 0px 5px; 11 | color: rgba(43, 43, 43, 1); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | 16 | .fv-rating-mask { 17 | position: absolute; 18 | left: 0px; 19 | top: 0px; 20 | width: 100%; 21 | height: 100%; 22 | display: flex; 23 | justify-content: flex-start; 24 | align-items: center; 25 | overflow: hidden; 26 | 27 | i { 28 | color: rgba(0, 98, 158, 1); 29 | } 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/common-theme/ResizeWatcher.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-ResizeWatcher { 2 | } 3 | -------------------------------------------------------------------------------- /packages/common-theme/RevealContainer.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-RevealContainer { 2 | position: relative; 3 | width: 120px; 4 | height: 50px; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | user-select: none; 9 | overflow: hidden; 10 | } 11 | -------------------------------------------------------------------------------- /packages/common-theme/ScrollStory.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-ScrollStory { 2 | } 3 | -------------------------------------------------------------------------------- /packages/common-theme/Shimmer.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-Shimmer { 2 | 3 | position: relative; 4 | width: auto; 5 | height: auto; 6 | 7 | div.shimmer-container 8 | { 9 | position: relative; 10 | visibility: hidden; 11 | overflow: visible; 12 | 13 | * 14 | { 15 | visibility: hidden; 16 | } 17 | 18 | div.sample 19 | { 20 | position: relative; 21 | width: 300px; 22 | height: 25px; 23 | background: whitesmoke; 24 | border-radius: 5px; 25 | visibility: visible; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/common-theme/VerifyBox.scss: -------------------------------------------------------------------------------- 1 | @mixin fv-VerifyBox { 2 | position: relative; 3 | 4 | width: 300px; 5 | padding: 15px; 6 | box-sizing: border-box; 7 | display: flex; 8 | justify-content: space-around; 9 | align-items: center; 10 | 11 | .fv-verify-container 12 | { 13 | position: relative; 14 | width: 100%; 15 | height: 100%; 16 | display: flex; 17 | justify-content: space-around; 18 | align-items: center; 19 | 20 | .fv-verify-unit 21 | { 22 | width: 50px; 23 | height: 60px; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/custom-theme/Affix.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Affix.scss'; 2 | .fv-custom-Affix{ 3 | @include fv-Affix(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/AnimatedIcon.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/AnimatedIcon.scss'; 2 | .fv-custom-AnimatedIcon{ 3 | @include fv-AnimatedIcon(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Badge.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Badge.scss'; 2 | .fv-custom-Badge{ 3 | @include fv-Badge(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Breadcrumb.scss'; 2 | .fv-custom-Breadcrumb{ 3 | @include fv-Breadcrumb(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Button.scss'; 2 | .fv-custom-button{ 3 | @include fv-button(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/CalendarDatePicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CalendarDatePicker.scss'; 2 | .fv-custom-CalendarDatePicker{ 3 | @include fv-CalendarDatePicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/CalendarView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CalendarView.scss'; 2 | .fv-custom-CalendarView{ 3 | @include fv-CalendarView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Callout.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Callout.scss'; 2 | .fv-custom-callout{ 3 | @include fv-callout(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/CheckBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CheckBox.scss'; 2 | .fv-custom-checkBox{ 3 | @include fv-checkBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Collapse.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Collapse.scss'; 2 | .fv-custom-Collapse{ 3 | @include fv-Collapse(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ColorPicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ColorPicker.scss'; 2 | .fv-custom-colorPicker{ 3 | @include fv-colorPicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Combobox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Combobox.scss'; 2 | .fv-custom-Combobox{ 3 | @include fv-Combobox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/CommandBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CommandBar.scss'; 2 | .fv-custom-CommandBar{ 3 | @include fv-CommandBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/DatePicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/DatePicker.scss'; 2 | .fv-custom-DatePicker{ 3 | @include fv-DatePicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/DetailsList.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/DetailsList.scss'; 2 | .fv-custom-DetailsList{ 3 | @include fv-DetailsList(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Drawer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Drawer.scss'; 2 | .fv-custom-drawer{ 3 | @include fv-drawer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/DropDown.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/DropDown.scss'; 2 | .fv-custom-DropDown{ 3 | @include fv-DropDown(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Expander.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Expander.scss'; 2 | .fv-custom-Expander{ 3 | @include fv-Expander(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/FlipView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/FlipView.scss'; 2 | .fv-custom-FlipView{ 3 | @include fv-FlipView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/IconElement.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/IconElement.scss'; 2 | .fv-custom-IconElement{ 3 | @include fv-IconElement(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Image.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Image.scss'; 2 | .fv-custom-Image{ 3 | @include fv-Image(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Img.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Img.scss'; 2 | .fv-custom-Img{ 3 | @include fv-Img(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ImgBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ImgBox.scss'; 2 | .fv-custom-ImgBox{ 3 | @include fv-ImgBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/InfiniteScrollView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/InfiniteScrollView.scss'; 2 | .fv-custom-InfiniteScrollView{ 3 | @include fv-InfiniteScrollView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/InfoBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/InfoBox.scss'; 2 | .fv-custom-InfoBox{ 3 | @include fv-InfoBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ListView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ListView.scss'; 2 | .fv-custom-ListView{ 3 | @include fv-ListView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/MenuFlyout.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/MenuFlyout.scss"; 2 | .fv-custom-menuFlyout { 3 | @include fv-menuFlyout(); 4 | } -------------------------------------------------------------------------------- /packages/custom-theme/MessageBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/MessageBar.scss'; 2 | .fv-custom-MessageBar{ 3 | @include fv-MessageBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/NavigationPanel.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationPanel.scss'; 2 | .fv-custom-NavigationPanel{ 3 | @include fv-NavigationPanel(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/NavigationView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationView.scss'; 2 | .fv-custom-NavigationView{ 3 | @include fv-NavigationView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Pagination.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pagination.scss'; 2 | .fv-custom-Pagination{ 3 | @include fv-Pagination(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Panel.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Panel.scss'; 2 | .fv-custom-Panel{ 3 | @include fv-Panel(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Persona.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Persona.scss'; 2 | .fv-custom-Persona{ 3 | @include fv-Persona(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Pivot.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pivot.scss'; 2 | .fv-custom-Pivot{ 3 | @include fv-Pivot(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ProgressBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressBar.scss'; 2 | .fv-custom-ProgressBar{ 3 | @include fv-ProgressBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ProgressRing.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressRing.scss'; 2 | .fv-custom-progressRing{ 3 | @include fv-progressRing(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Radio.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Radio.scss'; 2 | .fv-custom-radio{ 3 | @include fv-radio(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/RadioGroup.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RadioGroup.scss'; 2 | .fv-custom-radioGroup{ 3 | @include fv-radioGroup(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/RatingControl.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RatingControl.scss'; 2 | .fv-custom-RatingControl{ 3 | @include fv-RatingControl(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ResizeWatcher.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ResizeWatcher.scss'; 2 | .fv-custom-ResizeWatcher{ 3 | @include fv-ResizeWatcher(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/RevealContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RevealContainer.scss'; 2 | .fv-custom-RevealContainer{ 3 | @include fv-RevealContainer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/RightMenu.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RightMenu.scss'; 2 | .fv-custom-RightMenu{ 3 | @include fv-RightMenu(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ScrollStory.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ScrollStory.scss'; 2 | .fv-custom-ScrollStory{ 3 | @include fv-ScrollStory(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/SearchBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/SearchBox.scss'; 2 | .fv-custom-SearchBox{ 3 | @include fv-SearchBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Shimmer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Shimmer.scss'; 2 | .fv-custom-Shimmer{ 3 | @include fv-Shimmer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Slider.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Slider.scss'; 2 | .fv-custom-slider{ 3 | @include fv-slider(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/SwipeControl.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/SwipeControl.scss'; 2 | .fv-custom-SwipeControl{ 3 | @include fv-SwipeControl(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/TableView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TableView.scss'; 2 | .fv-custom-TableView{ 3 | @include fv-TableView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/Tag.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Tag.scss'; 2 | .fv-custom-Tag{ 3 | @include fv-Tag(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/TextBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TextBox.scss'; 2 | .fv-custom-TextBox{ 3 | @include fv-TextBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/TextField.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TextField.scss'; 2 | .fv-custom-TextField{ 3 | @include fv-TextField(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/TimePicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TimePicker.scss'; 2 | .fv-custom-timePicker{ 3 | @include fv-timePicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/ToggleSwitch.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ToggleSwitch.scss'; 2 | .fv-custom-ToggleSwitch{ 3 | @include fv-ToggleSwitch(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/TreeView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TreeView.scss'; 2 | .fv-custom-TreeView{ 3 | @include fv-TreeView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/VerifyBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/VerifyBox.scss'; 2 | .fv-custom-VerifyBox{ 3 | @include fv-VerifyBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/WebWindow.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/WebWindow.scss'; 2 | .fv-custom-WebWindow{ 3 | @include fv-WebWindow(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/custom-theme/index.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/global.scss'; 2 | @import './Button.scss'; 3 | @import './ProgressRing.scss'; 4 | @import './CheckBox.scss'; 5 | @import './DropDown.scss'; 6 | @import './ProgressBar.scss'; 7 | @import './FlipView.scss'; 8 | @import './ToggleSwitch.scss'; 9 | @import './Slider.scss'; 10 | @import './CalendarView.scss'; 11 | @import './ColorPicker.scss'; 12 | @import './TextBox.scss'; 13 | @import './RadioGroup.scss'; 14 | @import './Radio.scss'; 15 | @import './Callout.scss'; 16 | @import './ImgBox.scss'; 17 | @import './ScrollStory.scss'; 18 | @import './DetailsList.scss'; 19 | @import './Pivot.scss'; 20 | @import './MenuFlyout.scss'; 21 | @import './ListView.scss'; 22 | @import './NavigationView.scss'; 23 | @import './TreeView.scss'; 24 | @import './CommandBar.scss'; 25 | @import './NavigationPanel.scss'; 26 | @import './Image.scss'; 27 | @import './Img.scss'; 28 | @import './SearchBox.scss'; 29 | @import './CalendarDatePicker.scss'; 30 | @import './WebWindow.scss'; 31 | @import './DatePicker.scss'; 32 | @import './Persona.scss'; 33 | @import './Combobox.scss'; 34 | @import './TimePicker.scss'; 35 | @import './Shimmer.scss'; 36 | @import './MessageBar.scss'; 37 | @import './InfoBox.scss'; 38 | @import './Drawer.scss'; 39 | @import './Badge.scss'; 40 | @import './Panel.scss'; 41 | @import './Pagination.scss'; 42 | @import './Breadcrumb.scss'; 43 | @import './AnimatedIcon.scss'; 44 | @import './Tag.scss'; 45 | @import './Collapse.scss'; 46 | @import './InfiniteScrollView.scss'; 47 | @import './TextField.scss'; 48 | @import './VerifyBox.scss'; 49 | @import './RevealContainer.scss'; 50 | @import './SwipeControl.scss'; 51 | @import './Expander.scss'; 52 | @import './RatingControl.scss'; 53 | @import './IconElement.scss'; 54 | @import './Affix.scss'; 55 | @import './ResizeWatcher.scss'; 56 | @import './RightMenu.scss'; 57 | @import './TableView.scss'; 58 | 59 | -------------------------------------------------------------------------------- /packages/dark-theme/Affix.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Affix.scss'; 2 | .fv-dark-Affix{ 3 | @include fv-Affix(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/AnimatedIcon.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/AnimatedIcon.scss"; 2 | .fv-dark-AnimatedIcon { 3 | @include fv-AnimatedIcon(); 4 | 5 | color: whitesmoke; 6 | } 7 | -------------------------------------------------------------------------------- /packages/dark-theme/Badge.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Badge.scss'; 2 | .fv-dark-Badge{ 3 | @include fv-Badge(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Breadcrumb.scss"; 2 | .fv-dark-Breadcrumb { 3 | @include fv-Breadcrumb(); 4 | 5 | &:hover 6 | { 7 | border: rgba(54, 53, 52, 1) solid thin; 8 | } 9 | 10 | .fv-bc-route-list 11 | { 12 | 13 | .fv-bc-route-item 14 | { 15 | 16 | .fv-bc-separator-content 17 | { 18 | color: rgba(211, 211, 211, 1); 19 | 20 | &:hover 21 | { 22 | background: rgba(54, 53, 52, 1); 23 | } 24 | 25 | &:active 26 | { 27 | background: rgba(50, 49, 48, 1); 28 | } 29 | } 30 | 31 | .fv-bc-separator-icon 32 | { 33 | color: rgba(211, 211, 211, 1); 34 | } 35 | 36 | } 37 | 38 | .fv-bc-route-text-box 39 | { 40 | color: whitesmoke; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/dark-theme/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Button.scss'; 2 | .fv-dark-button{ 3 | @include fv-button(); 4 | 5 | div.fv-button-main-container 6 | { 7 | &:hover 8 | { 9 | background: rgba(243, 242, 241, 0.1); 10 | } 11 | 12 | .fv-button-container 13 | { 14 | background: #605e5c; 15 | border: rgba(36, 36, 36, 0.2) solid thin; 16 | 17 | span.fv-btn-content-block 18 | { 19 | color: whitesmoke; 20 | } 21 | } 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /packages/dark-theme/CalendarDatePicker.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/CalendarDatePicker.scss"; 2 | .fv-dark-CalendarDatePicker { 3 | 4 | @include fv-CalendarDatePicker(); 5 | 6 | &:hover 7 | { 8 | .calendar-picker-drop-down 9 | { 10 | background: rgba(226, 226, 226, 0.2); 11 | } 12 | } 13 | 14 | .calendar-picker-drop-down 15 | { 16 | .calendar-picker-drop-down-container 17 | { 18 | box-shadow: rgba(165, 165, 165, 0.133) 0px 3.2px 7.2px 0px, rgba(224, 224, 224, 0.11) 0px 0.6px 1.8px 0px; 19 | 20 | .input 21 | { 22 | background: rgba(36,35,34,0.9); 23 | color: whitesmoke; 24 | user-select: none; 25 | 26 | &::placeholder 27 | { 28 | color: rgba(179, 179, 179, 1); 29 | } 30 | } 31 | 32 | i 33 | { 34 | color: whitesmoke; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/dark-theme/Callout.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Callout.scss'; 2 | .fv-dark-callout{ 3 | @include fv-callout(); 4 | background-color: #000; 5 | color:whitesmoke; 6 | // box-shadow: rgba(255, 255, 255, 0.2) 0px 6.4px 14.4px 0px, rgba(255, 255, 255, 0.1) 0px 1.2px 3.6px 0px; 7 | .fv-callout-bg{ 8 | background-color: inherit; 9 | } 10 | .beak{ 11 | background-color: inherit; 12 | box-shadow: inherit; 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /packages/dark-theme/CheckBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CheckBox.scss'; 2 | .fv-dark-checkBox { 3 | @include fv-checkBox(); 4 | .fv-checkbox-rec 5 | { 6 | &:hover 7 | { 8 | background: rgba(200, 200, 200, 0.2); 9 | 10 | .fv-checkbox-border 11 | { 12 | opacity: 0.6; 13 | } 14 | } 15 | 16 | &:active 17 | { 18 | background: rgba(200, 200, 200, 0.1); 19 | 20 | .fv-checkbox-border 21 | { 22 | opacity: 0.3; 23 | } 24 | } 25 | 26 | &.check 27 | { 28 | .fv-checkbox-border 29 | { 30 | border-color: transparent; 31 | 32 | &:hover 33 | { 34 | opacity: 1; 35 | } 36 | } 37 | } 38 | 39 | .fv-checkbox-border 40 | { 41 | border-color: rgba(204, 204, 204, 0.5); 42 | } 43 | 44 | .fv-checkbox-content-block 45 | { 46 | color: rgba(36, 36, 36, 1); 47 | 48 | .fv-checkbox-content 49 | { 50 | color: rgba(36, 36, 36, 1); 51 | } 52 | } 53 | } 54 | 55 | .text-content-block 56 | { 57 | color: whitesmoke; 58 | } 59 | } -------------------------------------------------------------------------------- /packages/dark-theme/Collapse.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Collapse.scss"; 2 | .fv-dark-Collapse { 3 | @include fv-Collapse(); 4 | 5 | background: rgba(45, 45, 45, 1); 6 | border-color: #373738; 7 | color: whitesmoke; 8 | 9 | .collapse-description-container 10 | { 11 | .collapse-description-box 12 | { 13 | 14 | .collapse-description 15 | { 16 | 17 | .collapse-text 18 | { 19 | .collapse-info 20 | { 21 | color: rgba(156, 156, 156, 1); 22 | } 23 | } 24 | } 25 | } 26 | } 27 | 28 | &:hover 29 | { 30 | background: rgba(50, 50, 50, 1); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/dark-theme/ColorPicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ColorPicker.scss'; 2 | .fv-dark-colorPicker{ 3 | @include fv-colorPicker(); 4 | 5 | } 6 | 7 | -------------------------------------------------------------------------------- /packages/dark-theme/Combobox.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Combobox.scss"; 2 | .fv-dark-Combobox { 3 | 4 | @include fv-Combobox(); 5 | 6 | .combobox-container 7 | { 8 | color: whitesmoke; 9 | background: rgba(36, 36, 36, 1); 10 | 11 | .input 12 | { 13 | color: whitesmoke; 14 | } 15 | } 16 | 17 | &:hover { 18 | border-color: rgba(250, 250, 250, 0.6); 19 | } 20 | 21 | &:active { 22 | background: rgba(250, 250, 250, 0.1); 23 | border-color: rgba(250, 250, 250, 0.3); 24 | } 25 | 26 | .combobox-item-container 27 | { 28 | background: rgba(36, 36, 36, 0.9); 29 | 30 | .fv-combobox-item 31 | { 32 | color: whitesmoke; 33 | 34 | &.title 35 | { 36 | color: rgba(118, 185, 237, 1); 37 | } 38 | 39 | .before-choosen 40 | { 41 | background: rgba(118, 185, 237, 1); 42 | } 43 | } 44 | } 45 | 46 | &.disabled 47 | { 48 | .combobox-container 49 | { 50 | background: rgba(36, 36, 36, 0.8); 51 | 52 | 53 | .input 54 | { 55 | background: rgba(36, 36, 36, 0); 56 | } 57 | 58 | &:hover 59 | { 60 | background: rgba(36, 36, 36, 0.8); 61 | 62 | .input 63 | { 64 | background: rgba(36, 36, 36, 0); 65 | } 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/dark-theme/CommandBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CommandBar.scss'; 2 | .fv-dark-CommandBar { 3 | 4 | @include fv-CommandBar(); 5 | 6 | background: rgba(0, 0, 0, 0.6); 7 | 8 | .left-command-bar-container 9 | { 10 | .command-bar-item 11 | { 12 | 13 | i.icon { 14 | color: whitesmoke; 15 | } 16 | 17 | p.name { 18 | color: whitesmoke; 19 | } 20 | 21 | &:hover 22 | { 23 | background: $row-dark-hover-glass; 24 | } 25 | 26 | &.hr 27 | { 28 | border-right: rgba(200, 200, 200, 0.3) solid thin; 29 | } 30 | } 31 | } 32 | 33 | .command-bar-list-view-container 34 | { 35 | background: rgba(0, 0, 0, 0.8); 36 | border: rgba(120, 120, 120, 0.1) solid thin; 37 | 38 | i.icon { 39 | color: whitesmoke; 40 | } 41 | 42 | p.name { 43 | color: whitesmoke; 44 | } 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /packages/dark-theme/Drawer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Drawer.scss'; 2 | .fv-dark-drawer{ 3 | @include fv-drawer(); 4 | background-color:rgba(50, 50, 50,0.99); 5 | } 6 | 7 | -------------------------------------------------------------------------------- /packages/dark-theme/Expander.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Expander.scss"; 2 | .fv-dark-Expander { 3 | @include fv-Expander(); 4 | 5 | border-color: #373738; 6 | color: whitesmoke; 7 | 8 | .expander-description-container { 9 | background: rgba(43, 43, 43, 1); 10 | 11 | .expander-description-box { 12 | .expander-description { 13 | .expander-text { 14 | .expander-info { 15 | color: rgba(156, 156, 156, 1); 16 | } 17 | } 18 | } 19 | } 20 | } 21 | 22 | .expander-detail { 23 | background: rgba(39, 39, 39, 1); 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /packages/dark-theme/FlipView.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/FlipView.scss"; 2 | .fv-dark-FlipView { 3 | @include fv-FlipView(); 4 | 5 | .control-panel { 6 | .slidebtn { 7 | background: rgba(36, 36, 36, 0.3); 8 | color: rgba(245, 245, 245, 0.6); 9 | 10 | &:hover { 11 | color: whitesmoke; 12 | } 13 | } 14 | 15 | .bottom-controller { 16 | .flip-view-ring { 17 | width: 6px; 18 | height: 6px; 19 | margin: 2px; 20 | border-radius: 50%; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | box-sizing: border-box; 25 | cursor: pointer; 26 | 27 | &:hover { 28 | i { 29 | width: 100%; 30 | height: 100%; 31 | background: rgba(200, 200, 200, 1); 32 | } 33 | } 34 | 35 | &:active { 36 | i { 37 | width: 67%; 38 | height: 67%; 39 | } 40 | } 41 | 42 | &.choosen { 43 | i { 44 | width: 100%; 45 | height: 100%; 46 | } 47 | } 48 | 49 | i { 50 | width: 67%; 51 | height: 67%; 52 | background: rgba(200, 200, 200, 0.8); 53 | border-radius: 50%; 54 | } 55 | } 56 | 57 | .sec { 58 | color: whitesmoke; 59 | 60 | &:hover { 61 | background: rgba(242, 242, 242, 0.1); 62 | } 63 | } 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /packages/dark-theme/IconElement.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/IconElement.scss"; 2 | .fv-dark-IconElement { 3 | @include fv-IconElement(); 4 | 5 | &.icon-element-btn { 6 | border-radius: 3px; 7 | 8 | &:hover { 9 | background: rgba(200, 200, 200, 0.3); 10 | } 11 | 12 | &:active { 13 | background: rgba(200, 200, 200, 0.1); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/dark-theme/Image.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Image.scss'; 2 | .fv-dark-Image{ 3 | @include fv-Image(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Img.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Img.scss'; 2 | .fv-dark-Img{ 3 | @include fv-Img(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/ImgBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ImgBox.scss'; 2 | .fv-dark-ImgBox{ 3 | @include fv-ImgBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/InfiniteScrollView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/InfiniteScrollView.scss'; 2 | .fv-dark-InfiniteScrollView{ 3 | @include fv-InfiniteScrollView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/InfoBox.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/InfoBox.scss"; 2 | .fv-dark-InfoBox { 3 | 4 | @include fv-InfoBox(); 5 | 6 | background: rgba(0, 0, 0, 0.6); 7 | color: whitesmoke; 8 | 9 | .sinfo-box-block { 10 | background: rgba(43, 43, 43, 0.9); 11 | border: rgba(0, 0, 0, 0.5) solid 1px; 12 | 13 | .title-bar 14 | { 15 | background: rgba(32, 32, 32, 1); 16 | 17 | .title-content 18 | { 19 | color: rgba(239, 239, 239, 1); 20 | } 21 | } 22 | 23 | .info-box-control-block 24 | { 25 | background: rgba(32, 32, 32, 1); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/dark-theme/ListView.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/ListView.scss"; 2 | .fv-dark-ListView { 3 | @include fv-ListView(); 4 | 5 | .list-view-container { 6 | .list-view-item { 7 | span, 8 | p, 9 | i { 10 | color: whitesmoke; 11 | } 12 | 13 | &:hover { 14 | background: $row-dark-hover-glass; 15 | } 16 | 17 | &.header { 18 | * { 19 | color: rgba(118, 185, 237, 1); 20 | } 21 | } 22 | 23 | &.choose { 24 | background: rgba(0, 120, 212, 0.6); 25 | } 26 | 27 | &.hr { 28 | border-bottom: rgba(216, 216, 216, 0.3) solid thin; 29 | } 30 | 31 | &.selected { 32 | border: rgba(200, 200, 200, 0.2) solid 2px; 33 | } 34 | } 35 | } 36 | 37 | .fv-listview-slider { 38 | .s { 39 | p { 40 | background: rgba(118, 185, 237, 1); 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/dark-theme/MenuFlyout.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/MenuFlyout.scss"; 2 | .fv-dark-menuFlyout { 3 | @include fv-menuFlyout(); 4 | 5 | .menu-flyout-container { 6 | color: whitesmoke; 7 | background: rgba(36, 36, 36, 1); 8 | 9 | .input { 10 | color: whitesmoke; 11 | } 12 | } 13 | 14 | &:hover { 15 | border-color: rgba(250, 250, 250, 0.6); 16 | } 17 | 18 | &:active { 19 | background: rgba(250, 250, 250, 0.1); 20 | border-color: rgba(250, 250, 250, 0.3); 21 | } 22 | 23 | .menu-flyout-list-container { 24 | background: rgba(36, 36, 36, 0.9); 25 | 26 | .menu-flyout-item-container { 27 | 28 | .fv-menu-flyout-item { 29 | color: whitesmoke; 30 | 31 | &.title { 32 | color: rgba(118, 185, 237, 1); 33 | } 34 | 35 | .before-choosen { 36 | background: rgba(118, 185, 237, 1); 37 | } 38 | } 39 | } 40 | } 41 | 42 | &.disabled { 43 | .menu-flyout-container { 44 | background: rgba(36, 36, 36, 0.8); 45 | 46 | .input { 47 | background: rgba(36, 36, 36, 0); 48 | } 49 | 50 | &:hover { 51 | background: rgba(36, 36, 36, 0.8); 52 | 53 | .input { 54 | background: rgba(36, 36, 36, 0); 55 | } 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /packages/dark-theme/MessageBar.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/MessageBar.scss"; 2 | .fv-dark-MessageBar { 3 | @include fv-MessageBar(); 4 | 5 | border: rgba(39, 39, 39, 0.6) solid thin; 6 | 7 | &.normal { 8 | background: rgba(39, 39, 39, 0.8); 9 | } 10 | 11 | &.warning { 12 | background: rgba(67, 53, 25, 0.5); 13 | } 14 | 15 | &.correct { 16 | background: rgba(57, 61, 27, 0.9); 17 | } 18 | 19 | &.error { 20 | background: rgba(68, 39, 38, 0.9); 21 | } 22 | 23 | .msg-bar-block { 24 | .icon-block { 25 | color: black; 26 | 27 | &.normal { 28 | background: rgba(76, 195, 255, 1); 29 | } 30 | 31 | &.warning { 32 | background: rgba(252, 225, 0, 1); 33 | } 34 | 35 | &.correct { 36 | background: rgba(108, 203, 95, 1); 37 | } 38 | 39 | &.error { 40 | background: rgba(255, 153, 164, 1); 41 | } 42 | } 43 | 44 | .msg-content-block { 45 | color: whitesmoke; 46 | } 47 | } 48 | 49 | .close-block { 50 | color: whitesmoke; 51 | 52 | &:hover { 53 | background: rgba(200, 200, 200, 0.1); 54 | } 55 | 56 | &:active { 57 | opacity: 0.8; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /packages/dark-theme/NavigationPanel.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationPanel.scss'; 2 | .fv-dark-NavigationPanel { 3 | 4 | @include fv-NavigationPanel(); 5 | 6 | .panel-container 7 | { 8 | background: rgba(0, 0, 0, 0.8); 9 | 10 | span.search 11 | { 12 | .nav-search 13 | { 14 | background: rgba(76, 76, 76, 0.6); 15 | } 16 | } 17 | 18 | .fv-nav-default-item 19 | { 20 | i.icon { 21 | color: whitesmoke; 22 | } 23 | 24 | p.name { 25 | color: whitesmoke; 26 | } 27 | 28 | &:hover 29 | { 30 | background: rgba(47, 47, 47, 0.8); 31 | } 32 | } 33 | } 34 | 35 | .panel-container-mobile 36 | { 37 | background: rgba(0, 0, 0, 0.8); 38 | 39 | .fv-nav-default-item 40 | { 41 | i.icon { 42 | color: whitesmoke; 43 | } 44 | 45 | p.name { 46 | color: whitesmoke; 47 | } 48 | 49 | &:hover 50 | { 51 | background: rgba(47, 47, 47, 0.8); 52 | } 53 | } 54 | } 55 | 56 | &.mobile 57 | { 58 | &.compact 59 | { 60 | .panel-container-mobile 61 | { 62 | background: rgba(0, 0, 0, 0.6); 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /packages/dark-theme/NavigationView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationView.scss'; 2 | .fv-dark-NavigationView{ 3 | 4 | @include fv-NavigationView(); 5 | 6 | .navigation-list 7 | { 8 | .item 9 | { 10 | &:hover 11 | { 12 | background: $row-dark-hover-glass; 13 | } 14 | } 15 | 16 | i.icon { 17 | color: whitesmoke; 18 | } 19 | 20 | p.name { 21 | color: whitesmoke; 22 | } 23 | } 24 | } 25 | 26 | -------------------------------------------------------------------------------- /packages/dark-theme/Pagination.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pagination.scss'; 2 | .fv-dark-Pagination{ 3 | @include fv-Pagination(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Panel.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Panel.scss"; 2 | .fv-dark-Panel { 3 | @include fv-Panel(); 4 | 5 | .fv-panel-back-board 6 | { 7 | background: rgba(0, 0, 0, 0.45); 8 | } 9 | 10 | .fv-panel-container 11 | { 12 | background: rgba(0, 0, 0, 1); 13 | 14 | * { 15 | color: whitesmoke; 16 | } 17 | 18 | &.acrylic-style 19 | { 20 | background: rgba(0, 0, 0, 0.6); 21 | backdrop-filter: blur(25px); 22 | -webkit-backdrop-filter: blur(25px); 23 | } 24 | 25 | .fv-panel-control-block 26 | { 27 | .panel-title 28 | { 29 | color: rgba(243, 242, 241, 1); 30 | } 31 | 32 | .control-btn 33 | { 34 | color: rgba(167, 167, 167, 1); 35 | 36 | &:hover 37 | { 38 | background: rgba(120, 120, 120, 0.3); 39 | color: whitesmoke; 40 | } 41 | } 42 | } 43 | 44 | .fv-panel-footer 45 | { 46 | background: rgba(56, 56, 56, 0.6); 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/dark-theme/Persona.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Persona.scss"; 2 | .fv-dark-Persona { 3 | 4 | @include fv-Persona(); 5 | 6 | div.persona-avatar 7 | { 8 | .status-icon 9 | { 10 | background: black; 11 | } 12 | } 13 | 14 | .persona-content-block 15 | { 16 | .persona-title 17 | { 18 | color: white; 19 | } 20 | 21 | .persona-secondary 22 | { 23 | color: whitesmoke; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/dark-theme/Pivot.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pivot.scss'; 2 | .fv-dark-Pivot { 3 | 4 | @include fv-Pivot(); 5 | 6 | .pivot-container 7 | { 8 | z-index: 1; 9 | 10 | .pivot-item 11 | { 12 | p 13 | { 14 | color: whitesmoke; 15 | } 16 | } 17 | } 18 | 19 | &.tab 20 | { 21 | .pivot-container 22 | { 23 | .pivot-item 24 | { 25 | &.choose 26 | { 27 | p 28 | { 29 | color: black; 30 | } 31 | } 32 | 33 | p 34 | { 35 | color: whitesmoke; 36 | } 37 | } 38 | } 39 | } 40 | 41 | .slider 42 | { 43 | .fv-pivot-s 44 | { 45 | p 46 | { 47 | background: rgba(118, 185, 237, 1); 48 | } 49 | } 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /packages/dark-theme/ProgressBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressBar.scss'; 2 | .fv-dark-ProgressBar{ 3 | @include fv-ProgressBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/ProgressRing.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressRing.scss'; 2 | .fv-dark-progressRing{ 3 | @include fv-progressRing(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Radio.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Radio.scss"; 2 | .fv-dark-radio { 3 | @include fv-radio(); 4 | color: #faf9f8; 5 | .fv-radio-button { 6 | border-color: #6f6f6f; 7 | &::before { 8 | display: none; 9 | } 10 | &:hover { 11 | border-color: #aaaaaa; 12 | } 13 | &:active { 14 | background-color: rgba(102, 102, 102, 1); 15 | border: 1px solid rgba(236, 236, 236, 1); 16 | } 17 | &.actived { 18 | &::before { 19 | display: block; 20 | } 21 | } 22 | } 23 | &.with-icon { 24 | background-color: #252423; 25 | &:hover { 26 | border: 1px solid #f3f2f1; 27 | .fv-radio-button { 28 | border: 1px solid #f3f2f1; 29 | } 30 | } 31 | &.actived { 32 | border: 1px solid rgba(118, 185, 237, 1); 33 | .fv-radio-button { 34 | border: none; 35 | } 36 | } 37 | } 38 | 39 | &.disabled { 40 | color: #636160; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/dark-theme/RadioGroup.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RadioGroup.scss'; 2 | .fv-dark-radioGroup{ 3 | @include fv-radioGroup(); 4 | color:white; 5 | background-color:#000; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /packages/dark-theme/RatingControl.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/RatingControl.scss"; 2 | .fv-dark-RatingControl { 3 | @include fv-RatingControl(); 4 | 5 | .fv-rating-container { 6 | .fv-rating-unit { 7 | color: rgba(200, 200, 200, 1); 8 | 9 | .fv-rating-mask { 10 | i { 11 | color: rgba(118, 185, 237, 1); 12 | } 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/dark-theme/ResizeWatcher.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ResizeWatcher.scss'; 2 | .fv-dark-ResizeWatcher{ 3 | @include fv-ResizeWatcher(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/RevealContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RevealContainer.scss'; 2 | .fv-dark-RevealContainer{ 3 | @include fv-RevealContainer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/RightMenu.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/RightMenu.scss"; 2 | .fv-dark-RightMenu { 3 | @include fv-RightMenu(); 4 | 5 | background: rgba(36, 36, 36, 0.6); 6 | border: rgba(200, 200, 200, 0.1) solid thin; 7 | box-shadow: 8 | 0px 0px 0px rgba(36, 36, 36, 0.1), 9 | 0px 3px 6px rgba(36, 36, 36, 0.3); 10 | 11 | div.right-menu-list { 12 | color: whitesmoke; 13 | 14 | span { 15 | &:hover { 16 | background: rgba(0, 0, 0, 0.3); 17 | } 18 | 19 | &:active { 20 | background: rgba(0, 0, 0, 0.2); 21 | } 22 | } 23 | 24 | hr { 25 | border-bottom: rgba(50, 49, 48, 1) solid thin; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/dark-theme/ScrollStory.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ScrollStory.scss'; 2 | .fv-dark-ScrollStory{ 3 | @include fv-ScrollStory(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Shimmer.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Shimmer.scss"; 2 | .fv-dark-Shimmer { 3 | 4 | @include fv-Shimmer(); 5 | 6 | div.shimmer-container 7 | { 8 | div.sample 9 | { 10 | background: rgba(37, 36, 35, 1); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/dark-theme/Slider.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Slider.scss"; 2 | .fv-dark-slider { 3 | @include fv-slider(); 4 | 5 | color: whitesmoke; 6 | 7 | .fv-slider-main { 8 | background-color: rgba(154, 154, 154, 1); 9 | 10 | .fv-slider-ring-container { 11 | background: rgba(69, 69, 69, 1); 12 | border: rgba(90, 90, 90, 0.1) solid thin; 13 | 14 | .fv-slider-ring-icon { 15 | color: rgba(113, 173, 220, 1); 16 | } 17 | } 18 | 19 | .fv-slider-loaded { 20 | background-color: rgba(113, 173, 220, 1); 21 | } 22 | 23 | .fv-slider-label { 24 | background-color: rgba(45, 45, 45, 1); 25 | border: rgba(90, 90, 90, 0.1) solid thin; 26 | } 27 | 28 | .fv-slider-unit-container { 29 | .fv-slider-unit-item { 30 | background-color: rgba(154, 154, 154, 1); 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/dark-theme/SwipeControl.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/SwipeControl.scss'; 2 | .fv-dark-SwipeControl{ 3 | @include fv-SwipeControl(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/Tag.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Tag.scss"; 2 | .fv-dark-Tag { 3 | @include fv-Tag(); 4 | 5 | .fv-tag-item 6 | { 7 | background: rgba(118, 185, 237, 1); 8 | border-color: rgba(118, 185, 237, 1) solid thin; 9 | color: whitesmoke; 10 | 11 | &.success 12 | { 13 | background: rgba(0, 204, 153, 1); 14 | border-color: rgba(0, 204, 153, 1) solid thin; 15 | color: whitesmoke; 16 | } 17 | 18 | &.warning 19 | { 20 | background: rgba(255, 200, 10, 1); 21 | border-color: rgba(255, 200, 10, 1) solid thin; 22 | color: whitesmoke; 23 | } 24 | 25 | &.error 26 | { 27 | background: rgba(173, 38, 45, 1); 28 | border-color: rgba(173, 38, 45, 1) solid thin; 29 | color: whitesmoke; 30 | } 31 | 32 | .fv-tag-icon 33 | { 34 | color: whitesmoke; 35 | 36 | &:hover 37 | { 38 | background: rgba(220, 220, 220, 0.3); 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/dark-theme/TextBox.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/TextBox.scss"; 2 | .fv-dark-TextBox { 3 | @include fv-TextBox(); 4 | 5 | background: transparent; 6 | 7 | &.focus { 8 | .fv-text-box-wrapper-container { 9 | border: rgba(36, 36, 36, 1) solid thin; 10 | } 11 | } 12 | 13 | &.underline { 14 | .fv-text-box-wrapper-container { 15 | border-left: none; 16 | border-top: none; 17 | border-right: none; 18 | 19 | div.fix-block { 20 | background: transparent; 21 | 22 | p { 23 | color: rgba(243, 242, 241, 1); 24 | } 25 | } 26 | } 27 | } 28 | 29 | &.disabled { 30 | background: rgb(48, 47, 46); 31 | border-color: transparent; 32 | 33 | .fv-text-box-wrapper-container { 34 | &:hover { 35 | border-color: transparent; 36 | } 37 | } 38 | } 39 | 40 | .fv-text-box-wrapper-container { 41 | border: rgba(200, 200, 200, 0.1) solid thin; 42 | 43 | div.fix-block { 44 | background: transparent; 45 | 46 | p { 47 | color: rgba(243, 242, 241, 1); 48 | } 49 | } 50 | 51 | .icon-block { 52 | color: rgba(243, 242, 241, 1); 53 | } 54 | 55 | div.text-box-container { 56 | .fv-text-box-input { 57 | color: rgba(243, 242, 241, 1); 58 | } 59 | 60 | .fv-text-box-input::placeholder { 61 | color: rgba(220, 220, 220, 1); 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/dark-theme/TextField.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/TextField.scss"; 2 | .fv-dark-TextField { 3 | @include fv-TextField(); 4 | 5 | background: transparent; 6 | 7 | &:hover { 8 | .text-field-wrapper-container { 9 | border: rgba(36, 36, 36, 1) solid thin; 10 | } 11 | } 12 | 13 | &.focus { 14 | .text-field-wrapper-container { 15 | border: rgba(36, 36, 36, 1) solid thin; 16 | } 17 | } 18 | 19 | &.underline { 20 | .text-field-wrapper-container { 21 | border-left: none; 22 | border-top: none; 23 | border-right: none; 24 | } 25 | } 26 | 27 | &.disabled { 28 | background: rgba(48, 47, 46, 1); 29 | 30 | .text-field-wrapper-container { 31 | border-color: transparent; 32 | } 33 | 34 | &:hover { 35 | .text-field-wrapper-container { 36 | border-color: transparent; 37 | } 38 | } 39 | } 40 | 41 | .text-field-wrapper-container { 42 | border: rgba(120, 120, 120, 0.1) solid thin; 43 | } 44 | 45 | .fv-text-field-input { 46 | color: rgba(243, 242, 241, 1); 47 | } 48 | 49 | .fv-text-field-input::placeholder { 50 | color: rgba(220, 220, 220, 1); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/dark-theme/TimePicker.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/TimePicker.scss"; 2 | .fv-dark-timePicker { 3 | @include fv-timePicker(); 4 | 5 | .fv-TimePicker__input { 6 | background-color: rgba(50, 50, 50, 1); 7 | color: #fff; 8 | border-color: rgba(55, 55, 55, 1); 9 | } 10 | 11 | .fv-TimePicker__options { 12 | background-color: rgba(46, 46, 46, 1); 13 | border-color: rgba(200, 200, 200, 0.1); 14 | color: whitesmoke; 15 | 16 | .fv-TimePicker__options-body { 17 | background-color: inherit; 18 | 19 | .fv-TimePicker__options-body-mask { 20 | background-color: rgba(118, 185, 237, 1); 21 | } 22 | 23 | .fv-TimePicker__options-body-col { 24 | &:hover { 25 | .fv-TimePicker__options-body-col-up, 26 | .fv-TimePicker__options-body-col-down { 27 | background-color: rgba(46, 46, 46, 1); 28 | } 29 | 30 | .fv-TimePicker__options-body-item { 31 | &:hover { 32 | background-color: rgba(120, 120, 120, 0.1); 33 | } 34 | } 35 | } 36 | } 37 | } 38 | 39 | .fv-TimePicker__options-bar { 40 | .fv-TimePicker__options-bar-accept, 41 | .fv-TimePicker__options-bar-cancel { 42 | &:hover { 43 | background-color: rgba(120, 120, 120, 0.1); 44 | } 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/dark-theme/ToggleSwitch.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/ToggleSwitch.scss"; 2 | .fv-dark-ToggleSwitch { 3 | @include fv-ToggleSwitch(); 4 | 5 | position: relative; 6 | display: flex; 7 | align-items: center; 8 | 9 | .fv-toggle-border 10 | { 11 | border: rgba(207, 207, 207, 0.8) solid 1.5px; 12 | 13 | &:hover 14 | { 15 | background: rgba(207, 207, 207, 0.05); 16 | opacity: 1; 17 | } 18 | 19 | &:active 20 | { 21 | background: rgba(207, 207, 207, 0.1); 22 | } 23 | 24 | .fv-toggle-ring 25 | { 26 | background: rgba(207, 207, 207, 0.8); 27 | } 28 | 29 | &.toggle-on 30 | { 31 | background: rgba(118, 185, 237, 0.8); 32 | border-color: transparent; 33 | 34 | .fv-toggle-ring 35 | { 36 | background: black; 37 | } 38 | } 39 | } 40 | 41 | .fv-toggle-content 42 | { 43 | color: whitesmoke; 44 | } 45 | } -------------------------------------------------------------------------------- /packages/dark-theme/TreeView.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/TreeView.scss"; 2 | .fv-dark-TreeView { 3 | @include fv-TreeView(); 4 | 5 | .fv-tree-view-item { 6 | .fv-tree-view-item-container { 7 | &:hover { 8 | background: rgba(45, 45, 45, 0.3); 9 | } 10 | 11 | &:active { 12 | background: rgba(45, 45, 45, 0.2); 13 | } 14 | 15 | &.selected { 16 | background: rgba(45, 45, 45, 0.3); 17 | } 18 | 19 | .fv-tree-view-item-container-main { 20 | .fv-tree-view-item-content { 21 | color: whitesmoke; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/dark-theme/VerifyBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/VerifyBox.scss'; 2 | .fv-dark-VerifyBox{ 3 | @include fv-VerifyBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/dark-theme/WebWindow.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/WebWindow.scss"; 2 | .fv-dark-WebWindow { 3 | @include fv-WebWindow(); 4 | 5 | background: rgba(56,56,56,1); 6 | color: whitesmoke; 7 | 8 | .title-bar 9 | { 10 | .control-btn 11 | { 12 | color: whitesmoke; 13 | 14 | &.shut-down 15 | { 16 | &:hover 17 | { 18 | color: whitesmoke; 19 | } 20 | } 21 | 22 | &:hover 23 | { 24 | background: rgba(255,255,255,0.1); 25 | } 26 | 27 | &:active 28 | { 29 | background: rgba(255,255,255,0.2); 30 | } 31 | } 32 | } 33 | 34 | .fv-web-window-spliter 35 | { 36 | &:hover 37 | { 38 | i 39 | { 40 | background: rgba(72, 70, 68, 1); 41 | } 42 | } 43 | 44 | &:active 45 | { 46 | i 47 | { 48 | background: rgba(200, 198, 196, 1); 49 | box-shadow: 0px 0px 3px 0px rgba(255, 255, 255, 0.3); 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/dark-theme/index.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/global.scss'; 2 | @import './Button.scss'; 3 | @import './ProgressRing.scss'; 4 | @import './CheckBox.scss'; 5 | @import './DropDown.scss'; 6 | @import './ProgressBar.scss'; 7 | @import './FlipView.scss'; 8 | @import './ToggleSwitch.scss'; 9 | @import './Slider.scss'; 10 | @import './CalendarView.scss'; 11 | @import './ColorPicker.scss'; 12 | @import './TextBox.scss'; 13 | @import './RadioGroup.scss'; 14 | @import './Radio.scss'; 15 | @import './Callout.scss'; 16 | @import './ImgBox.scss'; 17 | @import './ScrollStory.scss'; 18 | @import './DetailsList.scss'; 19 | @import './Pivot.scss'; 20 | @import './MenuFlyout.scss'; 21 | @import './ListView.scss'; 22 | @import './NavigationView.scss'; 23 | @import './TreeView.scss'; 24 | @import './CommandBar.scss'; 25 | @import './NavigationPanel.scss'; 26 | @import './Image.scss'; 27 | @import './Img.scss'; 28 | @import './SearchBox.scss'; 29 | @import './CalendarDatePicker.scss'; 30 | @import './WebWindow.scss'; 31 | @import './DatePicker.scss'; 32 | @import './Persona.scss'; 33 | @import './Combobox.scss'; 34 | @import './TimePicker.scss'; 35 | @import './Shimmer.scss'; 36 | @import './MessageBar.scss'; 37 | @import './InfoBox.scss'; 38 | @import './Drawer.scss'; 39 | @import './Badge.scss'; 40 | @import './Panel.scss'; 41 | @import './Pagination.scss'; 42 | @import './Breadcrumb.scss'; 43 | @import './AnimatedIcon.scss'; 44 | @import './Tag.scss'; 45 | @import './Collapse.scss'; 46 | @import './InfiniteScrollView.scss'; 47 | @import './TextField.scss'; 48 | @import './VerifyBox.scss'; 49 | @import './RevealContainer.scss'; 50 | @import './SwipeControl.scss'; 51 | @import './Expander.scss'; 52 | @import './RatingControl.scss'; 53 | @import './IconElement.scss'; 54 | @import './Affix.scss'; 55 | @import './ResizeWatcher.scss'; 56 | @import './RightMenu.scss'; 57 | @import './TableView.scss'; 58 | 59 | -------------------------------------------------------------------------------- /packages/fonts/Segoe-Fluent-Icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/packages/fonts/Segoe-Fluent-Icons.woff -------------------------------------------------------------------------------- /packages/fonts/fabricmdl2icons-3.54.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleversn/VFluent/7c321ac436d9dd254052fa8d890d67b22d90bb4d/packages/fonts/fabricmdl2icons-3.54.woff -------------------------------------------------------------------------------- /packages/global.js: -------------------------------------------------------------------------------- 1 | export default (Vuex)=> new Vuex.Store({ 2 | state: { 3 | theme: 'light', 4 | imgUriList: [], //{data:Base64String,key:String,state:('none'|'loading'|'done')} 5 | revealHandlerList: [] //{id: String, moveHandler: Function, leaveHandler: Function} 6 | }, 7 | getters: { 8 | imgUri: (state) => (key) => { 9 | return state.imgUriList.find(item => item.key === key); 10 | } 11 | }, 12 | mutations: { 13 | changeTheme(state, theme) { 14 | state.theme = theme 15 | }, 16 | setImgUri(state, imgUri) { 17 | let status = imgUri.state; 18 | if (imgUri.key == undefined) 19 | return 0; 20 | if (status != 'none' && status != 'loading' && status != 'done') 21 | imgUri.state = 'none'; 22 | let item = state.imgUriList.find(item => item.key === imgUri.key); 23 | if (item == undefined) 24 | state.imgUriList.push({ data: imgUri.data, key: imgUri.key, state: imgUri.state }); 25 | else 26 | state.imgUriList.splice(state.imgUriList.indexOf(item),1, { data: imgUri.data, key: imgUri.key, state: imgUri.state }); 27 | }, 28 | clearImgUri(state, key) { 29 | let item = state.imgUriList.find(item => key === item.key); 30 | if (item == undefined) 31 | return 0; 32 | else 33 | state.imgUriList.splice(state.imgUriList.indexOf(item), 1); 34 | }, 35 | setRevealHandler(state, revealHandler) { 36 | state.revealHandlerList.push(revealHandler); 37 | }, 38 | removeRevealHandler(state, id) { 39 | let index = state.revealHandlerList.findIndex(item => id === item.id); 40 | if (index == -1) 41 | return; 42 | state.revealHandlerList.splice(index, 1); 43 | } 44 | } 45 | }) -------------------------------------------------------------------------------- /packages/light-theme/Affix.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Affix.scss'; 2 | .fv-light-Affix{ 3 | @include fv-Affix(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/AnimatedIcon.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/AnimatedIcon.scss'; 2 | .fv-light-AnimatedIcon{ 3 | @include fv-AnimatedIcon(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Badge.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Badge.scss'; 2 | .fv-light-Badge{ 3 | @include fv-Badge(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Breadcrumb.scss'; 2 | .fv-light-Breadcrumb{ 3 | @include fv-Breadcrumb(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Button.scss'; 2 | .fv-light-button{ 3 | @include fv-button(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/CalendarDatePicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CalendarDatePicker.scss'; 2 | .fv-light-CalendarDatePicker{ 3 | @include fv-CalendarDatePicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/CalendarView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CalendarView.scss'; 2 | .fv-light-CalendarView{ 3 | @include fv-CalendarView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Callout.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Callout.scss'; 2 | .fv-light-callout{ 3 | @include fv-callout(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/CheckBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CheckBox.scss'; 2 | .fv-light-checkBox{ 3 | @include fv-checkBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Collapse.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Collapse.scss'; 2 | .fv-light-Collapse{ 3 | @include fv-Collapse(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ColorPicker.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ColorPicker.scss'; 2 | .fv-light-colorPicker{ 3 | @include fv-colorPicker(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Combobox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Combobox.scss'; 2 | .fv-light-Combobox{ 3 | @include fv-Combobox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/CommandBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/CommandBar.scss'; 2 | .fv-light-CommandBar{ 3 | @include fv-CommandBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/DatePicker.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/DatePicker.scss"; 2 | .fv-light-DatePicker { 3 | @include fv-DatePicker(); 4 | } 5 | -------------------------------------------------------------------------------- /packages/light-theme/DetailsList.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/DetailsList.scss'; 2 | .fv-light-DetailsList{ 3 | @include fv-DetailsList(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Drawer.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/Drawer.scss"; 2 | .fv-light-drawer { 3 | @include fv-drawer(); 4 | } 5 | -------------------------------------------------------------------------------- /packages/light-theme/DropDown.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/DropDown.scss'; 2 | .fv-light-DropDown{ 3 | @include fv-DropDown(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Expander.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Expander.scss'; 2 | .fv-light-Expander{ 3 | @include fv-Expander(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/FlipView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/FlipView.scss'; 2 | .fv-light-FlipView{ 3 | @include fv-FlipView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/IconElement.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/IconElement.scss'; 2 | .fv-light-IconElement{ 3 | @include fv-IconElement(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Image.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Image.scss'; 2 | .fv-light-Image{ 3 | @include fv-Image(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Img.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Img.scss'; 2 | .fv-light-Img{ 3 | @include fv-Img(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ImgBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ImgBox.scss'; 2 | .fv-light-ImgBox{ 3 | @include fv-ImgBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/InfiniteScrollView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/InfiniteScrollView.scss'; 2 | .fv-light-InfiniteScrollView{ 3 | @include fv-InfiniteScrollView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/InfoBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/InfoBox.scss'; 2 | .fv-light-InfoBox{ 3 | @include fv-InfoBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ListView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ListView.scss'; 2 | .fv-light-ListView{ 3 | @include fv-ListView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/MenuFlyout.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/MenuFlyout.scss"; 2 | .fv-light-menuFlyout { 3 | @include fv-menuFlyout(); 4 | } 5 | -------------------------------------------------------------------------------- /packages/light-theme/MessageBar.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/MessageBar.scss"; 2 | .fv-light-MessageBar { 3 | @include fv-MessageBar(); 4 | } 5 | 6 | .fv-swift-warning { 7 | 8 | animation: fv______warning 0.5s both; 9 | -webkit-animation: fv______warning 0.5s both; 10 | 11 | 12 | @keyframes fv______warning 13 | { 14 | 0%{margin-left: -50px;} 15 | 17%{margin-left: 40px;} 16 | 34%{margin-left: -25px;} 17 | 51%{margin-left: 15px;} 18 | 68%{margin-left: -5px;} 19 | 85%{margin-left: 2px;} 20 | 100%{margin-left: 0;} 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/light-theme/NavigationPanel.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationPanel.scss'; 2 | .fv-light-NavigationPanel{ 3 | @include fv-NavigationPanel(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/NavigationView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/NavigationView.scss'; 2 | .fv-light-NavigationView{ 3 | @include fv-NavigationView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Pagination.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pagination.scss'; 2 | .fv-light-Pagination{ 3 | @include fv-Pagination(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Panel.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Panel.scss'; 2 | .fv-light-Panel{ 3 | @include fv-Panel(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Persona.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Persona.scss'; 2 | .fv-light-Persona{ 3 | @include fv-Persona(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Pivot.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Pivot.scss'; 2 | .fv-light-Pivot{ 3 | @include fv-Pivot(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ProgressBar.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressBar.scss'; 2 | .fv-light-ProgressBar{ 3 | @include fv-ProgressBar(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ProgressRing.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ProgressRing.scss'; 2 | .fv-light-progressRing{ 3 | @include fv-progressRing(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Radio.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Radio.scss'; 2 | .fv-light-radio{ 3 | @include fv-radio(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/RadioGroup.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RadioGroup.scss'; 2 | .fv-light-radioGroup{ 3 | @include fv-radioGroup(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/RatingControl.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RatingControl.scss'; 2 | .fv-light-RatingControl{ 3 | @include fv-RatingControl(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ResizeWatcher.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ResizeWatcher.scss'; 2 | .fv-light-ResizeWatcher{ 3 | @include fv-ResizeWatcher(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/RevealContainer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RevealContainer.scss'; 2 | .fv-light-RevealContainer{ 3 | @include fv-RevealContainer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/RightMenu.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/RightMenu.scss'; 2 | .fv-light-RightMenu{ 3 | @include fv-RightMenu(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/ScrollStory.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ScrollStory.scss'; 2 | .fv-light-ScrollStory{ 3 | @include fv-ScrollStory(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/SearchBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/SearchBox.scss'; 2 | .fv-light-SearchBox{ 3 | @include fv-SearchBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Shimmer.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Shimmer.scss'; 2 | .fv-light-Shimmer{ 3 | @include fv-Shimmer(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Slider.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Slider.scss'; 2 | .fv-light-slider{ 3 | @include fv-slider(); 4 | //region:color begin 5 | .fv-slider__bar { 6 | .fv-slider__bar-bg { 7 | background-color: #d6d5d4; 8 | } 9 | .fv-slider__button { 10 | color: #0075d1; 11 | } 12 | .fv-slider__scale-up, 13 | .fv-slider__scale-down { 14 | background-color: rgba(153, 153, 153, 0.8); 15 | } 16 | .fv-slider__progress{ 17 | background-color: #0075d1; 18 | } 19 | } 20 | &:hover { 21 | .fv-slider__bar { 22 | .fv-slider__bar-bg { 23 | background-color: #deecf9; 24 | } 25 | 26 | .fv-slider__button { 27 | color: #0075d1; 28 | } 29 | } 30 | } 31 | &.active { 32 | .fv-slider__bar { 33 | .fv-slider__button { 34 | color: #0075d1; 35 | } 36 | } 37 | } 38 | //region:end of color 39 | } 40 | 41 | -------------------------------------------------------------------------------- /packages/light-theme/SwipeControl.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/SwipeControl.scss'; 2 | .fv-light-SwipeControl{ 3 | @include fv-SwipeControl(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/TableView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TableView.scss'; 2 | .fv-light-TableView{ 3 | @include fv-TableView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/Tag.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/Tag.scss'; 2 | .fv-light-Tag{ 3 | @include fv-Tag(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/TextBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TextBox.scss'; 2 | .fv-light-TextBox{ 3 | @include fv-TextBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/TextField.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TextField.scss'; 2 | .fv-light-TextField{ 3 | @include fv-TextField(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/TimePicker.scss: -------------------------------------------------------------------------------- 1 | @import "../common-theme/TimePicker.scss"; 2 | .fv-light-timePicker { 3 | @include fv-timePicker(); 4 | } 5 | -------------------------------------------------------------------------------- /packages/light-theme/ToggleSwitch.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/ToggleSwitch.scss'; 2 | .fv-light-ToggleSwitch{ 3 | @include fv-ToggleSwitch(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/TreeView.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/TreeView.scss'; 2 | .fv-light-TreeView{ 3 | @include fv-TreeView(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/VerifyBox.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/VerifyBox.scss'; 2 | .fv-light-VerifyBox{ 3 | @include fv-VerifyBox(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/WebWindow.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/WebWindow.scss'; 2 | .fv-light-WebWindow{ 3 | @include fv-WebWindow(); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/light-theme/index.scss: -------------------------------------------------------------------------------- 1 | @import '../common-theme/global.scss'; 2 | @import './Button.scss'; 3 | @import './ProgressRing.scss'; 4 | @import './CheckBox.scss'; 5 | @import './DropDown.scss'; 6 | @import './ProgressBar.scss'; 7 | @import './FlipView.scss'; 8 | @import './ToggleSwitch.scss'; 9 | @import './Slider.scss'; 10 | @import './CalendarView.scss'; 11 | @import './ColorPicker.scss'; 12 | @import './TextBox.scss'; 13 | @import './RadioGroup.scss'; 14 | @import './Radio.scss'; 15 | @import './Callout.scss'; 16 | @import './ImgBox.scss'; 17 | @import './ScrollStory.scss'; 18 | @import './DetailsList.scss'; 19 | @import './Pivot.scss'; 20 | @import './MenuFlyout.scss'; 21 | @import './ListView.scss'; 22 | @import './NavigationView.scss'; 23 | @import './TreeView.scss'; 24 | @import './CommandBar.scss'; 25 | @import './NavigationPanel.scss'; 26 | @import './Image.scss'; 27 | @import './Img.scss'; 28 | @import './SearchBox.scss'; 29 | @import './CalendarDatePicker.scss'; 30 | @import './WebWindow.scss'; 31 | @import './DatePicker.scss'; 32 | @import './Persona.scss'; 33 | @import './Combobox.scss'; 34 | @import './TimePicker.scss'; 35 | @import './Shimmer.scss'; 36 | @import './MessageBar.scss'; 37 | @import './InfoBox.scss'; 38 | @import './Drawer.scss'; 39 | @import './Badge.scss'; 40 | @import './Panel.scss'; 41 | @import './Pagination.scss'; 42 | @import './Breadcrumb.scss'; 43 | @import './AnimatedIcon.scss'; 44 | @import './Tag.scss'; 45 | @import './Collapse.scss'; 46 | @import './InfiniteScrollView.scss'; 47 | @import './TextField.scss'; 48 | @import './VerifyBox.scss'; 49 | @import './RevealContainer.scss'; 50 | @import './SwipeControl.scss'; 51 | @import './Expander.scss'; 52 | @import './RatingControl.scss'; 53 | @import './IconElement.scss'; 54 | @import './Affix.scss'; 55 | @import './ResizeWatcher.scss'; 56 | @import './RightMenu.scss'; 57 | @import './TableView.scss'; 58 | 59 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/Fabric.Scoped.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // Core styles scoped to the current major version of Fabric 6 | 7 | // Variable is set during gulp task as comma seperated list. i.e. 5,1,0 8 | $ms-fabric-version: 11,0,0; 9 | 10 | @import './References'; 11 | @import './mixins/ScopedStyles.Mixins'; 12 | 13 | // Sets a global flag to enable scoped styles within certain files 14 | $do-scope-styles: true; 15 | 16 | // Scope all core styles under a helper class for the current major version. 17 | // This produces styles of the form .ms-Fabric-{version #} .ms-font-m. 18 | 19 | @include scope-fabric { 20 | @import './Animation'; 21 | @import './BrandIcon'; 22 | @import './Color'; 23 | @import './Font'; 24 | @import './Grid'; 25 | @import './Icon'; 26 | @import './Responsive'; 27 | @import './Utility'; 28 | @import './Wrapper'; 29 | } 30 | 31 | // @font-face definitions do not need to be scoped 32 | @import './Font.Definitions'; 33 | @import './Icon.Definitions'; 34 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/Fabric.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // OSS Framework Design Language 5 | // -------------------------------------------------- 6 | // Fabric Core Module Loader (LTR) 7 | 8 | // Variables and mixins 9 | @import './References'; 10 | 11 | // Partials that output CSS 12 | @import './Animation'; 13 | @import './BrandIcon'; 14 | @import './Color'; 15 | @import './Color.Background'; 16 | @import './Color.Border'; 17 | @import './Color.Font'; 18 | @import './Depth'; 19 | @import './Font'; 20 | @import './Font.Definitions'; 21 | @import './Grid'; 22 | @import './Icon'; 23 | @import './Icon.Definitions'; 24 | @import './Responsive'; 25 | @import './Utility'; 26 | @import './Wrapper'; 27 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Animation.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Output all keyframes used by the motion classes. 4 | @include ms-motion-keyframes; 5 | 6 | // Fades. 7 | .ms-motion-fadeIn { 8 | @include ms-motion-fadeIn; 9 | } 10 | 11 | .ms-motion-fadeOut { 12 | @include ms-motion-fadeOut; 13 | } 14 | 15 | // Scales. 16 | .ms-motion-scaleDownIn { 17 | @include ms-motion-scaleDownIn; 18 | } 19 | 20 | .ms-motion-scaleDownOut { 21 | @include ms-motion-scaleDownOut; 22 | } 23 | 24 | // Slides. 25 | .ms-motion-slideLeftOut { 26 | @include ms-motion-slideLeftOut; 27 | } 28 | 29 | .ms-motion-slideRightOut { 30 | @include ms-motion-slideRightOut; 31 | } 32 | 33 | .ms-motion-slideLeftIn { 34 | @include ms-motion-slideLeftIn; 35 | } 36 | 37 | .ms-motion-slideRightIn { 38 | @include ms-motion-slideRightIn; 39 | } 40 | 41 | .ms-motion-slideUpOut { 42 | @include ms-motion-slideUpOut; 43 | } 44 | 45 | .ms-motion-slideDownOut { 46 | @include ms-motion-slideDownOut; 47 | } 48 | 49 | .ms-motion-slideUpIn { 50 | @include ms-motion-slideUpIn; 51 | } 52 | 53 | .ms-motion-slideDownIn { 54 | @include ms-motion-slideDownIn; 55 | } 56 | 57 | // Deprecated MDL2 animation classes. 58 | @import "./Animation.MDL2"; -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Color.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Classes for specific properties. 4 | @import './Color.Background'; 5 | @import './Color.Border'; 6 | @import './Color.Font'; 7 | 8 | // Deprecated MDL2 color classes. 9 | @import "./Color.MDL2"; 10 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Depth.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | .ms-depth-0 { 4 | @include ms-depth-0; 5 | } 6 | .ms-depth-4 { 7 | @include ms-depth-4; 8 | } 9 | .ms-depth-8 { 10 | @include ms-depth-8; 11 | } 12 | .ms-depth-16 { 13 | @include ms-depth-16; 14 | } 15 | .ms-depth-64 { 16 | @include ms-depth-64; 17 | } -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Font.Definitions.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Produce @font-face definitions for each of the web fonts. 4 | @include ms-font-face('Leelawadee UI Web', 'leelawadeeui-thai', 'leelawadeeui'); 5 | @include ms-font-face('Segoe UI Web (Arabic)', 'segoeui-arabic'); 6 | @include ms-font-face('Segoe UI Web (Cyrillic)', 'segoeui-cyrillic'); 7 | @include ms-font-face('Segoe UI Web (East European)', 'segoeui-easteuropean'); 8 | @include ms-font-face('Segoe UI Web (Greek)', 'segoeui-greek'); 9 | @include ms-font-face('Segoe UI Web (Hebrew)', 'segoeui-hebrew'); 10 | @include ms-font-face('Segoe UI Web (Vietnamese)', 'segoeui-vietnamese'); 11 | @include ms-font-face('Segoe UI Web (West European)', 'segoeui-westeuropean'); 12 | @include ms-font-face('Selawik Web', 'selawik', 'selawik'); 13 | 14 | 15 | // Leelawadee UI (Thai and Lao) does not have a 'light' weight, so we override 16 | // the font-face generated above to use the 'semilight' weight instead. 17 | @font-face { 18 | font-family: 'Leelawadee UI Web'; 19 | src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff2') format('woff2'), 20 | url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-semilight.woff') format('woff'); 21 | font-weight: 100; 22 | font-style: normal; 23 | } 24 | 25 | // Leelawadee UI (Thai and Lao) does not have a 'semibold' weight, so we override 26 | // the font-face generated above to use the 'bold' weight instead. 27 | @font-face { 28 | font-family: 'Leelawadee UI Web'; 29 | src: url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff2') format('woff2'), 30 | url('#{$ms-font-cdn-path}/leelawadeeui-thai/leelawadeeui-bold.woff') format('woff'); 31 | font-weight: 600; 32 | font-style: normal; 33 | } 34 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Font.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Font color classes. 4 | // 5 | 6 | //== Sizes. 7 | // 8 | 9 | .ms-fontSize-68 { 10 | @include ms-fontSize-68; 11 | } 12 | .ms-fontSize-42 { 13 | @include ms-fontSize-42; 14 | } 15 | .ms-fontSize-32 { 16 | @include ms-fontSize-32; 17 | } 18 | .ms-fontSize-28 { 19 | @include ms-fontSize-28; 20 | } 21 | .ms-fontSize-24 { 22 | @include ms-fontSize-24; 23 | } 24 | .ms-fontSize-20 { 25 | @include ms-fontSize-20; 26 | } 27 | .ms-fontSize-18 { 28 | @include ms-fontSize-18; 29 | } 30 | .ms-fontSize-16 { 31 | @include ms-fontSize-16; 32 | } 33 | .ms-fontSize-14 { 34 | @include ms-fontSize-14; 35 | } 36 | .ms-fontSize-12 { 37 | @include ms-fontSize-12; 38 | } 39 | .ms-fontSize-10 { 40 | @include ms-fontSize-10; 41 | } 42 | 43 | //== Weights. 44 | // 45 | 46 | .ms-fontWeight-regular { 47 | @include ms-fontWeight-regular; 48 | } 49 | .ms-fontWeight-semibold { 50 | @include ms-fontWeight-semibold; 51 | } 52 | .ms-fontWeight-bold { 53 | @include ms-fontWeight-bold; 54 | } 55 | 56 | // Deprecated MDL2 font classes. 57 | @import "./Font.MDL2"; 58 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Grid.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Fluid 12-column grids for small, medium, and large devices 7 | 8 | //== Grid container (same for all sizes) 9 | // 10 | .ms-Grid { 11 | @include ms-Grid; 12 | } 13 | 14 | //== Grid rows (pull first and last column out) 15 | // 16 | .ms-Grid-row { 17 | @include ms-Grid-row; 18 | } 19 | 20 | //== Grid cells 21 | // 22 | .ms-Grid-col { 23 | @include ms-Grid-col; 24 | } 25 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Icon.Definitions.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Icon font-family definition 7 | 8 | /* 9 | Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license 10 | */ 11 | 12 | // Font-face definition for the 'FabricMDL2Icons' icon font 13 | @font-face { 14 | $icon-font-family: 'FabricMDL2Icons'; 15 | $icon-font-name: 'fabricmdl2icons'; 16 | $icon-font-version: '3.54'; 17 | 18 | @if variable_exists(do-scope-styles) { 19 | $icon-font-family: 'FabricMDL2Icons-' + $ms-fabric-version-major; 20 | $icon-font-name: 'scoped/fabricmdl2icons-' + $ms-fabric-version-major; 21 | } 22 | 23 | font-family: $icon-font-family; 24 | src: url('../../../fonts/Segoe-Fluent-Icons.woff') format('woff'); 25 | font-weight: normal; 26 | font-style: normal; 27 | } 28 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Icon.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Icon class definitions 7 | 8 | 9 | // Base icon definition 10 | .ms-Icon { 11 | @include ms-Icon; 12 | } 13 | 14 | // Modifier: Place the icon in a circle 15 | .ms-Icon--circle { 16 | @include ms-Icon--circle; 17 | } 18 | 19 | // Modifiers: Size classes 20 | .ms-Icon--xs { 21 | @include ms-Icon--xs; 22 | } 23 | 24 | .ms-Icon--s { 25 | @include ms-Icon--s; 26 | } 27 | 28 | .ms-Icon--m { 29 | @include ms-Icon--m; 30 | } 31 | 32 | .ms-Icon--l { 33 | @include ms-Icon--l; 34 | } 35 | 36 | // Modifiers: Each of the icons. 37 | @include ms-icon-classes($ms-icon-map); 38 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_References.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Variables and mixins that can be referenced without outputting any CSS. 7 | 8 | // Variables 9 | @import "./variables/Animation.Variables"; 10 | @import "./variables/BrandIcon.Variables"; 11 | @import "./variables/Color.Variables"; 12 | @import "./variables/Color.Variables.MDL2"; 13 | @import "./variables/Depth.Variables"; 14 | @import "./variables/Font.Variables"; 15 | @import "./variables/Font.Variables.MDL2"; 16 | @import "./variables/General.Variables"; 17 | @import "./variables/Icon.Variables"; 18 | @import "./variables/Responsive.Variables"; 19 | @import "./variables/ZIndex.Variables"; 20 | 21 | // Mixins 22 | @import "./mixins/Animation.Mixins"; 23 | @import "./mixins/BrandIcon.Mixins"; 24 | @import "./mixins/Color.Background.Mixins"; 25 | @import "./mixins/Color.Border.Mixins"; 26 | @import "./mixins/Color.Font.Mixins"; 27 | @import "./mixins/Color.Mixins"; 28 | @import "./mixins/Color.Mixins.MDL2"; 29 | @import "./mixins/Depth.Mixins"; 30 | @import "./mixins/Directionality.Mixins"; 31 | @import "./mixins/Font.Mixins"; 32 | @import "./mixins/Font.Mixins.MDL2"; 33 | @import "./mixins/General.Mixins"; 34 | @import "./mixins/Grid.Mixins"; 35 | @import "./mixins/Icon.Mixins"; 36 | @import "./mixins/Responsive.Mixins"; 37 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/_Utility.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Some mixins are output to CSS classes as utilities. 7 | 8 | // The best box is a border box. 9 | .ms-borderBox, .ms-borderBox::before, .ms-borderBox::after { 10 | @include ms-borderBox; 11 | } 12 | 13 | // To apply border base settings 14 | .ms-borderBase { 15 | @include ms-borderBase; 16 | } 17 | 18 | // Ensures the block expands to the full height to enclose its floated childen. 19 | .ms-clearfix { 20 | @include ms-clearfix; 21 | } 22 | 23 | // Basic border-box, margin, and padding reset. 24 | .ms-normalize { 25 | @include ms-normalize; 26 | } 27 | 28 | // Text alignments. 29 | .ms-textAlignLeft { 30 | @include ms-text-align(left); 31 | } 32 | 33 | .ms-textAlignRight { 34 | @include ms-text-align(right); 35 | } 36 | 37 | .ms-textAlignCenter { 38 | text-align: center; 39 | } 40 | 41 | // Use to hide content while still making it readable by screen reader (Accessibility) 42 | .ms-screenReaderOnly { 43 | @include ms-screenReaderOnly; 44 | } 45 | 46 | // Use to add truncation with ellipsis 47 | .ms-textTruncate { 48 | @include ms-textTruncate; 49 | } 50 | 51 | // Use to disable text wrapping 52 | .ms-noWrap{ 53 | @include ms-noWrap; 54 | } 55 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/mixins/_BrandIcon.Mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Generate classes for product and document icons 4 | @mixin ms-brand-icon-classes($retina) { 5 | @each $icon in $ms-brand-icon-product-icons { 6 | .ms-BrandIcon--#{$icon} { 7 | @include ms-brand-icon-product-sizes($icon, $retina, $ms-brand-icon-product-images-path); 8 | } 9 | } 10 | 11 | @each $icon in $ms-brand-icon-document-icons { 12 | .ms-BrandIcon--#{$icon} { 13 | @include ms-brand-icon-document-sizes($icon, $retina, $ms-brand-icon-document-images-path); 14 | } 15 | } 16 | } 17 | 18 | // Generate size classes for each product icon 19 | @mixin ms-brand-icon-product-sizes($icon, $retina, $images-path) { 20 | @each $size in $ms-brand-icon-sizes { 21 | &.ms-BrandIcon--icon#{$size} { 22 | background-image: url(#{$images-path}/#{$icon}_#{$size}x#{$retina}.png); 23 | } 24 | } 25 | } 26 | 27 | // Generate size classes for each document icon 28 | @mixin ms-brand-icon-document-sizes($icon, $retina, $images-path) { 29 | $scaleSuffix: ''; 30 | @if $retina == '1' { 31 | $scaleSuffix: ''; 32 | } @else if $retina == '1_5' { 33 | $scaleSuffix: '_1.5x'; 34 | } @else { 35 | $scaleSuffix: '_#{$retina}x'; 36 | } 37 | 38 | @each $size in $ms-brand-icon-sizes { 39 | &.ms-BrandIcon--icon#{$size} { 40 | background-image: url(#{$images-path}/#{$size}#{$scaleSuffix}/#{$icon}.png); 41 | } 42 | } 43 | } 44 | 45 | // Generate generic icon size classes 46 | @mixin ms-brand-icon-size-classes() { 47 | @each $size in $ms-brand-icon-sizes { 48 | .ms-BrandIcon--icon#{$size} { 49 | background-size: 100% 100%; 50 | width: #{$size}px; 51 | height: #{$size}px; 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/mixins/_Color.Mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Mixins for specific properties. 4 | @import './Color.Background.Mixins'; 5 | @import './Color.Border.Mixins'; 6 | @import './Color.Font.Mixins'; 7 | 8 | // Deprecated MDL2 color mixins. 9 | @import "./Color.Mixins.MDL2"; 10 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/mixins/_Depth.Mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | @mixin ms-depth-0 { 4 | box-shadow: $ms-depth-shadow-0; 5 | } 6 | @mixin ms-depth-4 { 7 | box-shadow: $ms-depth-shadow-4; 8 | } 9 | @mixin ms-depth-8 { 10 | box-shadow: $ms-depth-shadow-8; 11 | } 12 | @mixin ms-depth-16 { 13 | box-shadow: $ms-depth-shadow-16; 14 | } 15 | @mixin ms-depth-64 { 16 | box-shadow: $ms-depth-shadow-64; 17 | } 18 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/mixins/_Grid.Mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | // -------------------------------------------------- 6 | // Fluid 12-column grids for small, medium, and large devices 7 | 8 | //== Grid container (same for all sizes) 9 | // 10 | @mixin ms-Grid { 11 | @include ms-borderBox; 12 | @include ms-clearfix; 13 | padding: 0 8px; 14 | } 15 | 16 | //== Grid rows (pull first and last column out) 17 | // 18 | @mixin ms-Grid-row { 19 | margin: 0 -8px; 20 | @include ms-borderBox; 21 | @include ms-clearfix; 22 | } 23 | 24 | //== Grid cells 25 | // 26 | @mixin ms-Grid-col { 27 | @include ms-float(left); 28 | position: relative; 29 | min-height: 1px; 30 | padding-left: 8px; 31 | padding-right: 8px; 32 | @include ms-borderBox; 33 | 34 | // For nested grids (a grid inside a column), removing the padding 35 | // so that the nested grid's columns go to the edge of the parent's. 36 | .ms-Grid { 37 | padding: 0; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/mixins/_ScopedStyles.Mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // 4 | // Office UI Fabric 5 | 6 | $ms-fabric-version-major: nth($ms-fabric-version, 1); 7 | $ms-fabric-version-minor: nth($ms-fabric-version, 2); 8 | $ms-fabric-version-patch: nth($ms-fabric-version, 3); 9 | 10 | // The CSS class for scoping styles to the current version of Fabric. 11 | $ms-fabric-version-suffix: '--v' + $ms-fabric-version-major + '-' + $ms-fabric-version-minor + '-' + $ms-fabric-version-patch; 12 | $ms-fabric-scope-class: '.ms-Fabric' + $ms-fabric-version-suffix; 13 | 14 | // A mixin to scope styles to the current version of Fabric. 15 | // Produces styles of the form .ms-Fabric-{version #} @content. 16 | @mixin scope-fabric { 17 | #{$ms-fabric-scope-class} { 18 | @content; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_Animation.Variables.MDL2.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // These variables are deprecated and will be removed in a future release. 4 | 5 | // Easings 6 | $ms-animation-ease-1: cubic-bezier(0.1,0.9,0.2,1) !default; 7 | $ms-animation-ease-2: cubic-bezier(0.1,0.25,0.75,0.9) !default; 8 | 9 | // Durations 10 | $ms-animation-duration-1: 0.167s !default; 11 | $ms-animation-duration-2: 0.267s !default; 12 | $ms-animation-duration-3: 0.367s !default; 13 | $ms-animation-duration-4: 0.467s !default; 14 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_Animation.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Timing curves. 4 | $ms-motion-timing-accelerate: cubic-bezier(0.9, 0.1, 1, 0.2); 5 | $ms-motion-timing-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1); 6 | $ms-motion-timing-linear: cubic-bezier(0, 0, 1, 1); 7 | $ms-motion-timing-standard: cubic-bezier(0.8, 0, 0.2, 1); 8 | 9 | // Durations. 10 | $ms-motion-duration-1: 100ms; 11 | $ms-motion-duration-2: 200ms; 12 | $ms-motion-duration-3: 300ms; 13 | $ms-motion-duration-4: 400ms; 14 | 15 | // Deprecated MDL2 animation variables. 16 | @import "./Animation.Variables.MDL2"; 17 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_BrandIcon.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Image paths 4 | $ms-brand-icon-product-images-path: 'https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png'; 5 | $ms-brand-icon-document-images-path: 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent'; 6 | 7 | // Names 8 | $ms-brand-icon-product-icons: access excel infopath office onedrive onenote outlook powerpoint project sharepoint teams visio word; 9 | $ms-brand-icon-document-icons: accdb archive audio code csv docset docx dotx email exe folder font genericfile html link listitem model mpp mpt odp ods odt one onetoc pdf photo potx ppsx pptx pub rtf sharedfolder spo sysfile txt vector video vsdx vssx vstx xlsx xltx xml xsn zip; 10 | 11 | // Sizes 12 | $ms-brand-icon-sizes: 16 48 96; 13 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_Depth.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | $ms-depth-shadow-0: 0 0 0 0 transparent !default; 4 | $ms-depth-shadow-4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108) !default; 5 | $ms-depth-shadow-8: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108) !default; 6 | $ms-depth-shadow-16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108) !default; 7 | $ms-depth-shadow-64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18) !default; 8 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_Font.Variables.MDL2.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // These variables are deprecated and will be removed in a future release. 4 | 5 | // Weights 6 | $ms-font-weight-light: 100 !default; 7 | $ms-font-weight-semilight: 300 !default; 8 | 9 | // Sizes 10 | $ms-font-size-su: 42px !default; 11 | $ms-font-size-xxl: 28px !default; 12 | $ms-font-size-xl-plus: 24px !default; 13 | $ms-font-size-xl: 21px !default; 14 | $ms-font-size-l: 17px !default; 15 | $ms-font-size-m-plus: 15px !default; 16 | $ms-font-size-m: 14px !default; 17 | $ms-font-size-s-plus: 13px !default; 18 | $ms-font-size-s: 12px !default; 19 | $ms-font-size-xs: 11px !default; 20 | $ms-font-size-mi: 10px !default; 21 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_General.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Default focus border style. 4 | $ms-focus-border-width: 1px; 5 | $ms-focus-border-color: $ms-color-neutralSecondary; 6 | $ms-focus-border-style: solid; 7 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_Responsive.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Minimum widths for each breakpoint. 4 | $ms-screen-min-sm: 320px !default; 5 | $ms-screen-min-md: 480px !default; 6 | $ms-screen-min-lg: 640px !default; 7 | $ms-screen-min-xl: 1024px !default; 8 | $ms-screen-min-xxl: 1366px !default; 9 | $ms-screen-min-xxxl: 1920px !default; 10 | 11 | // Maximum widths for each breakpoint. These are set to values like 479.99999px to prevent an issue where a browser's 12 | // width may not be a whole pixel value, creating the potential for multiple media queries to apply simultaneously. 13 | // See: http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem 14 | $ms-screen-max-sm: ($ms-screen-min-md - 0.00001); 15 | $ms-screen-max-md: ($ms-screen-min-lg - 0.00001); 16 | $ms-screen-max-lg: ($ms-screen-min-xl - 0.00001); 17 | $ms-screen-max-xl: ($ms-screen-min-xxl - 0.00001); 18 | $ms-screen-max-xxl: ($ms-screen-min-xxxl - 0.00001); 19 | -------------------------------------------------------------------------------- /packages/office-ui-fabric-core/dist/sass/variables/_ZIndex.Variables.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 2 | 3 | // Large ranges 4 | $ms-zIndex-0: 0 !default; 5 | $ms-zIndex-1: 100 !default; 6 | $ms-zIndex-2: 200 !default; 7 | $ms-zIndex-3: 300 !default; 8 | $ms-zIndex-4: 400 !default; 9 | $ms-zIndex-5: 500 !default; 10 | 11 | // Small ranges 12 | $ms-zIndex-back: 0 !default; 13 | $ms-zIndex-middle: 5 !default; 14 | $ms-zIndex-front: 10 !default; 15 | -------------------------------------------------------------------------------- /types/affix.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvAffix Component 5 | */ 6 | export declare class FvAffix extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/animatedicon.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvAnimatedIcon Component 5 | */ 6 | export declare class FvAnimatedIcon extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/badge.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvBadge Component 5 | */ 6 | export declare class FvBadge extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvBreadcrumb Component 5 | */ 6 | export declare class FvBreadcrumb extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/button.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvButton Component 5 | */ 6 | export declare class FvButton extends FluentVueComponent{ 7 | icon : string 8 | 9 | foreground:string 10 | 11 | background:string 12 | 13 | fontWeight:string 14 | 15 | disabled:boolean 16 | 17 | borderWidth:number 18 | 19 | theme:FluentVueTheme 20 | } -------------------------------------------------------------------------------- /types/calendarview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCalendarView Component 5 | */ 6 | export declare class FvCalendarView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | -------------------------------------------------------------------------------- /types/callout.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCallout Component 5 | */ 6 | export declare class FvCallout extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/checkbox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCheckBox Component 5 | */ 6 | export declare class FvCheckBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | value:boolean 10 | foreground:string 11 | background:string 12 | borderColor:string 13 | boxSide: 'start' | 'end' 14 | borderWidth:number 15 | } 16 | -------------------------------------------------------------------------------- /types/collapse.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCollapse Component 5 | */ 6 | export declare class FvCollapse extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/colorpicker.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvColorPicker Component 5 | */ 6 | export declare class FvColorPicker extends FluentVueComponent{ 7 | value: string 8 | alpha: number 9 | hideAlpha:boolean 10 | hidePreview:boolean 11 | } 12 | 13 | -------------------------------------------------------------------------------- /types/combobox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCombobox Component 5 | */ 6 | export declare class FvCombobox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/commandbar.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvCommandBar Component 5 | */ 6 | export declare class FvCommandBar extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/component.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** declare FluentVue Component */ 4 | export declare class FluentVueComponent extends Vue { 5 | /** Install component into Vue */ 6 | static install (vue: typeof Vue): void 7 | } 8 | 9 | /** Component size definition for button, input, etc */ 10 | export type FluentVueComponentSize = 'l' | 'm' | 's' | 'xs' 11 | 12 | /** Horizontal alignment */ 13 | export type FluentVueHorizontalAlignment = 'left' | 'center' | 'right' 14 | 15 | export type FluentVueTheme = 'light' | 'dark' | 'system' | 'custom' -------------------------------------------------------------------------------- /types/datepicker.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvDatePicker Component 5 | */ 6 | export declare class FvDatePicker extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/detailslist.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvDetailsList Component 5 | */ 6 | export declare class FvDetailsList extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/drawer.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvDrawer Component 5 | */ 6 | export declare class FvDrawer extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/dropdown.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvDropDown Component 5 | */ 6 | export declare class FvDropDown extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | value:Array | Array | Array 10 | options:Array | Array | Array 11 | multiple:boolean 12 | borderWidth:number 13 | borderRadius:number 14 | placeholder:number 15 | maxHeight:number 16 | inputForeground:string 17 | dropDownListForeground :string 18 | inputBackground:string 19 | dropDownListBackground :string 20 | dropDownIcon:string 21 | dropDownIconForeground:string 22 | showError:boolean 23 | errorMessage:string 24 | setFocus:boolean 25 | } 26 | -------------------------------------------------------------------------------- /types/expander.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvExpander Component 5 | */ 6 | export declare class FvExpander extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/flipview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvFlipView Component 5 | */ 6 | export declare class FvFlipView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | value:Array 9 | direction:'horizontal' |'vertical' 10 | animation:string 11 | duration:number 12 | autoPlay:boolean 13 | autoPlayDuration:number 14 | showControlPanel:''|'hidden'|'hover' 15 | mask:string 16 | } 17 | -------------------------------------------------------------------------------- /types/iconelement.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvIconElement Component 5 | */ 6 | export declare class FvIconElement extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/image.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvImage Component 5 | */ 6 | export declare class FvImage extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/img.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvImg Component 5 | */ 6 | export declare class FvImg extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/imgbox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvImgBox Component 5 | */ 6 | export declare class FvImgBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './ui' 2 | import * as VueFluent from './ui' 3 | export default VueFluent -------------------------------------------------------------------------------- /types/infinitescrollview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvInfiniteScrollView Component 5 | */ 6 | export declare class FvInfiniteScrollView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/infobox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvInfoBox Component 5 | */ 6 | export declare class FvInfoBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/listview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvListView Component 5 | */ 6 | export declare class FvListView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/menuflyout.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvMenuFlyout Component 5 | */ 6 | export declare class FvMenuFlyout extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/messagebar.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvMessageBar Component 5 | */ 6 | export declare class FvMessageBar extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/navigationpanel.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvNavigationPanel Component 5 | */ 6 | export declare class FvNavigationPanel extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/navigationview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvNavigationView Component 5 | */ 6 | export declare class FvNavigationView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/pagination.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvPagination Component 5 | */ 6 | export declare class FvPagination extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/panel.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvPanel Component 5 | */ 6 | export declare class FvPanel extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/persona.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvPersona Component 5 | */ 6 | export declare class FvPersona extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/pivot.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvPivot Component 5 | */ 6 | export declare class FvPivot extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/progressbar.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvProgressBar Component 5 | */ 6 | export declare class FvProgressBar extends FluentVueComponent{ 7 | disabled:boolean 8 | value:number 9 | loading:boolean 10 | foreground:string 11 | background:string 12 | } 13 | -------------------------------------------------------------------------------- /types/progressring.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme,FluentVueComponentSize} from './component' 2 | 3 | /** 4 | * FvProgressRing Component 5 | */ 6 | export declare class FvProgressRing extends FluentVueComponent{ 7 | size:FluentVueComponentSize 8 | color:string 9 | } 10 | -------------------------------------------------------------------------------- /types/radio.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvRadio Component 5 | */ 6 | export declare class FvRadio extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/radiogroup.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvRadioGroup Component 5 | */ 6 | export declare class FvRadioGroup extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/ratingcontrol.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvRatingControl Component 5 | */ 6 | export declare class FvRatingControl extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/resizewatcher.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvResizeWatcher Component 5 | */ 6 | export declare class FvResizeWatcher extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/revealcontainer.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvRevealContainer Component 5 | */ 6 | export declare class FvRevealContainer extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/rightmenu.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvRightMenu Component 5 | */ 6 | export declare class FvRightMenu extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/scrollstory.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvScrollStory Component 5 | */ 6 | export declare class FvScrollStory extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/searchbox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvSearchBox Component 5 | */ 6 | export declare class FvSearchBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/shimmer.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvShimmer Component 5 | */ 6 | export declare class FvShimmer extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/slider.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvSlider Component 5 | */ 6 | export declare class FvSlider extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | value:number 10 | unit:number 11 | mininum:number 12 | maxinum:number 13 | icon:number 14 | vertical:number 15 | showLabel:boolean 16 | scale:boolean | number 17 | color:string 18 | } 19 | -------------------------------------------------------------------------------- /types/swipecontrol.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvSwipeControl Component 5 | */ 6 | export declare class FvSwipeControl extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/tableview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTableView Component 5 | */ 6 | export declare class FvTableView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/tag.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTag Component 5 | */ 6 | export declare class FvTag extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/textbox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTextBox Component 5 | */ 6 | export declare class FvTextBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/textfield.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTextField Component 5 | */ 6 | export declare class FvTextField extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/timepicker.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTimePicker Component 5 | */ 6 | export declare class FvTimePicker extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/toggleswitch.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvToggleSwitch Component 5 | */ 6 | export declare class FvToggleSwitch extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | value:number 10 | on:string 11 | off:string 12 | onForeground:string 13 | offForeground:string 14 | borderColor:string 15 | ringBackground:string 16 | switchOnBackground:string 17 | } 18 | -------------------------------------------------------------------------------- /types/treeview.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvTreeView Component 5 | */ 6 | export declare class FvTreeView extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/verifybox.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvVerifyBox Component 5 | */ 6 | export declare class FvVerifyBox extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /types/webwindow.d.ts: -------------------------------------------------------------------------------- 1 | import {FluentVueComponent,FluentVueTheme} from './component' 2 | 3 | /** 4 | * FvWebWindow Component 5 | */ 6 | export declare class FvWebWindow extends FluentVueComponent{ 7 | theme:FluentVueTheme 8 | disabled:boolean 9 | } 10 | 11 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | function resolve(dir) { 3 | return path.join(__dirname, dir); 4 | } 5 | const debug = process.env.NODE_ENV === 'production' ? false : true; 6 | 7 | module.exports = { 8 | pages: { 9 | index: { 10 | entry: "packages/index.js" 11 | } 12 | }, 13 | css: { 14 | // Separate StyleSheet 15 | extract: true, 16 | requireModuleExtension: true, 17 | sourceMap: false 18 | }, 19 | productionSourceMap: false, 20 | chainWebpack: config => { 21 | config.resolve.alias.set("@", resolve("packages/")); 22 | if (debug) 23 | config.devtool('source-map') 24 | }, 25 | configureWebpack:{ 26 | externals:{ 27 | // vuex: 'Vuex', 28 | }, 29 | output: { 30 | libraryExport: 'default', 31 | }, 32 | }, 33 | lintOnSave: false 34 | }; 35 | --------------------------------------------------------------------------------