From 30f8110ea613be41fb41564508cf2f9efe707e07 Mon Sep 17 00:00:00 2001 From: Eric Thompson Date: Fri, 14 Aug 2015 13:24:13 -0700 Subject: [PATCH] Moving Fabric to our external Github repository. --- .csscomb.json | 26 + .gitignore | 56 ++ Third Party Notices.txt | 22 + bower.json | 15 + gulp/fabric.js | 323 +++++++ gulp/log.js | 338 +++++++ gulpfile.js | 11 + package.json | 49 + src/components/Breadcrumb/Breadcrumb.html | 5 + src/components/Breadcrumb/Breadcrumb.json | 6 + src/components/Breadcrumb/Breadcrumb.less | 49 + src/components/Button/Button.html | 5 + src/components/Button/Button.json | 84 ++ src/components/Button/Button.less | 324 +++++++ .../Callout/Callout.ActionIcon.html | 20 + .../Callout/Callout.ActionText.html | 22 + src/components/Callout/Callout.Birthday.html | 18 + src/components/Callout/Callout.Close.html | 18 + src/components/Callout/Callout.Default.html | 15 + src/components/Callout/Callout.Oobe.html | 22 + src/components/Callout/Callout.json | 131 +++ src/components/Callout/Callout.less | 444 +++++++++ .../ChoiceField.Checkbox.Selected.html | 4 + .../ChoiceField.Checkbox.Unselected.html | 4 + .../ChoiceField.ChoiceFieldGroup.html | 21 + .../ChoiceField.Radio.Selected.html | 4 + .../ChoiceField.Radio.Unselected.html | 4 + src/components/ChoiceField/ChoiceField.json | 83 ++ src/components/ChoiceField/ChoiceField.less | 192 ++++ .../ContextualMenu.Dividers.html | 21 + .../ContextualMenu.Multiselect.html | 13 + .../ContextualMenu.SubMenu.html | 18 + .../ContextualMenu/ContextualMenu.html | 7 + .../ContextualMenu/ContextualMenu.json | 25 + .../ContextualMenu/ContextualMenu.less | 158 ++++ .../ContextualMenu/Jquery.ContextualMenu.js | 57 ++ src/components/DatePicker/DatePicker.html | 44 + src/components/DatePicker/DatePicker.json | 17 + src/components/DatePicker/DatePicker.less | 524 +++++++++++ .../DatePicker/Jquery.DatePicker.js | 1 + src/components/Dialog/Dialog.Default.html | 34 + src/components/Dialog/Dialog.LgHeader.html | 26 + src/components/Dialog/Dialog.Multiline.html | 30 + src/components/Dialog/Dialog.json | 52 ++ src/components/Dialog/Dialog.less | 205 ++++ src/components/Dropdown/Dropdown.html | 10 + src/components/Dropdown/Dropdown.json | 16 + src/components/Dropdown/Dropdown.less | 171 ++++ src/components/Dropdown/Jquery.Dropdown.js | 151 +++ src/components/Label/Label.html | 3 + src/components/Label/Label.json | 20 + src/components/Label/Label.less | 24 + src/components/Link/Link.html | 1 + src/components/Link/Link.json | 13 + src/components/Link/Link.less | 28 + src/components/List/List.html | 114 +++ src/components/List/List.json | 19 + src/components/List/List.less | 46 + src/components/ListItem/Jquery.ListItem.js | 25 + .../ListItem/ListItem.Document.html | 5 + src/components/ListItem/ListItem.Image.html | 13 + src/components/ListItem/ListItem.html | 12 + src/components/ListItem/ListItem.json | 33 + src/components/ListItem/ListItem.less | 278 ++++++ src/components/NavBar/Jquery.NavBar.js | 88 ++ src/components/NavBar/NavBar.html | 26 + src/components/NavBar/NavBar.json | 11 + src/components/NavBar/NavBar.less | 268 ++++++ src/components/OrgChart/OrgChart.html | 135 +++ src/components/OrgChart/OrgChart.json | 20 + src/components/OrgChart/OrgChart.less | 69 ++ src/components/Overlay/Overlay.html | 1 + src/components/Overlay/Overlay.json | 21 + src/components/Overlay/Overlay.less | 23 + src/components/Panel/Jquery.Panel.js | 35 + src/components/Panel/Panel.html | 23 + src/components/Panel/Panel.json | 40 + src/components/Panel/Panel.less | 242 +++++ .../PeoplePicker/Jquery.PeoplePicker.js | 209 +++++ .../PeoplePicker/PeoplePicker.Compact.html | 163 ++++ .../PeoplePicker.Disconnected.html | 159 ++++ .../PeoplePicker/PeoplePicker.FacePile.html | 106 +++ .../PeoplePicker/PeoplePicker.Searching.png | Bin 0 -> 1601 bytes src/components/PeoplePicker/PeoplePicker.html | 167 ++++ src/components/PeoplePicker/PeoplePicker.json | 33 + src/components/PeoplePicker/PeoplePicker.less | 445 +++++++++ .../Persona/Persona.No-Presence.html | 12 + src/components/Persona/Persona.Person.jpg | Bin 0 -> 5650 bytes src/components/Persona/Persona.Person2.png | Bin 0 -> 15280 bytes .../Persona/Persona.Placeholder.html | 9 + src/components/Persona/Persona.html | 13 + src/components/Persona/Persona.json | 162 ++++ src/components/Persona/Persona.less | 335 +++++++ .../PersonaCard/Jquery.PersonaCard.js | 56 ++ src/components/PersonaCard/PersonaCard.html | 185 ++++ src/components/PersonaCard/PersonaCard.json | 20 + src/components/PersonaCard/PersonaCard.less | 328 +++++++ src/components/Pivot/Pivot.html | 8 + src/components/Pivot/Pivot.json | 37 + src/components/Pivot/Pivot.less | 156 ++++ src/components/Pivot/jquery.Pivot.js | 27 + src/components/SearchBox/Jquery.SearchBox.js | 56 ++ src/components/SearchBox/SearchBox.html | 5 + src/components/SearchBox/SearchBox.json | 19 + src/components/SearchBox/SearchBox.less | 112 +++ src/components/Spinner/Spinner.html | 1 + src/components/Spinner/Spinner.js | 140 +++ src/components/Spinner/Spinner.json | 6 + src/components/Spinner/Spinner.less | 16 + src/components/Table/Table.html | 44 + src/components/Table/Table.json | 12 + src/components/Table/Table.less | 113 +++ src/components/TextField/Jquery.TextField.js | 49 + .../TextField/TextField.Multiline.html | 4 + .../TextField/TextField.Placeholder.html | 8 + .../TextField/TextField.Underlined.html | 4 + src/components/TextField/TextField.html | 4 + src/components/TextField/TextField.json | 98 ++ src/components/TextField/TextField.less | 177 ++++ src/components/Toggle/Toggle.html | 17 + src/components/Toggle/Toggle.json | 37 + src/components/Toggle/Toggle.less | 173 ++++ src/less/Fabric.Components.less | 33 + src/less/Fabric.RTL.less | 37 + src/less/Fabric.less | 38 + src/less/_Fabric.Animations.RTL.less | 62 ++ src/less/_Fabric.Animations.less | 449 +++++++++ src/less/_Fabric.Color.Mixins.less | 500 ++++++++++ src/less/_Fabric.Color.Variables.less | 147 +++ src/less/_Fabric.Grid.less | 38 + src/less/_Fabric.Icons.Font.less | 16 + src/less/_Fabric.Icons.RTL.less | 107 +++ src/less/_Fabric.Icons.less | 879 ++++++++++++++++++ src/less/_Fabric.Responsive.Utilities.less | 791 ++++++++++++++++ src/less/_Fabric.Responsive.Variables.less | 60 ++ src/less/_Fabric.Typography.Fonts.less | 219 +++++ .../_Fabric.Typography.Languageoverrides.less | 226 +++++ src/less/_Fabric.Typography.Variables.less | 53 ++ src/less/_Fabric.Typography.less | 414 +++++++++ src/less/_Fabric.Utilities.less | 33 + src/less/_Fabric.ZIndex.Variables.less | 66 ++ src/less/_Office.Color.Mixins.less | 166 ++++ src/less/_Office.Color.Variables.less | 60 ++ .../component-manifest-template.less | 11 + .../individual-component-example.html | 96 ++ 145 files changed, 13757 insertions(+) create mode 100644 .csscomb.json create mode 100644 .gitignore create mode 100644 Third Party Notices.txt create mode 100644 bower.json create mode 100644 gulp/fabric.js create mode 100644 gulp/log.js create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 src/components/Breadcrumb/Breadcrumb.html create mode 100644 src/components/Breadcrumb/Breadcrumb.json create mode 100644 src/components/Breadcrumb/Breadcrumb.less create mode 100644 src/components/Button/Button.html create mode 100644 src/components/Button/Button.json create mode 100644 src/components/Button/Button.less create mode 100644 src/components/Callout/Callout.ActionIcon.html create mode 100644 src/components/Callout/Callout.ActionText.html create mode 100644 src/components/Callout/Callout.Birthday.html create mode 100644 src/components/Callout/Callout.Close.html create mode 100644 src/components/Callout/Callout.Default.html create mode 100644 src/components/Callout/Callout.Oobe.html create mode 100644 src/components/Callout/Callout.json create mode 100644 src/components/Callout/Callout.less create mode 100644 src/components/ChoiceField/ChoiceField.Checkbox.Selected.html create mode 100644 src/components/ChoiceField/ChoiceField.Checkbox.Unselected.html create mode 100644 src/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html create mode 100644 src/components/ChoiceField/ChoiceField.Radio.Selected.html create mode 100644 src/components/ChoiceField/ChoiceField.Radio.Unselected.html create mode 100644 src/components/ChoiceField/ChoiceField.json create mode 100644 src/components/ChoiceField/ChoiceField.less create mode 100644 src/components/ContextualMenu/ContextualMenu.Dividers.html create mode 100644 src/components/ContextualMenu/ContextualMenu.Multiselect.html create mode 100644 src/components/ContextualMenu/ContextualMenu.SubMenu.html create mode 100644 src/components/ContextualMenu/ContextualMenu.html create mode 100644 src/components/ContextualMenu/ContextualMenu.json create mode 100644 src/components/ContextualMenu/ContextualMenu.less create mode 100644 src/components/ContextualMenu/Jquery.ContextualMenu.js create mode 100644 src/components/DatePicker/DatePicker.html create mode 100644 src/components/DatePicker/DatePicker.json create mode 100644 src/components/DatePicker/DatePicker.less create mode 100644 src/components/DatePicker/Jquery.DatePicker.js create mode 100644 src/components/Dialog/Dialog.Default.html create mode 100644 src/components/Dialog/Dialog.LgHeader.html create mode 100644 src/components/Dialog/Dialog.Multiline.html create mode 100644 src/components/Dialog/Dialog.json create mode 100644 src/components/Dialog/Dialog.less create mode 100644 src/components/Dropdown/Dropdown.html create mode 100644 src/components/Dropdown/Dropdown.json create mode 100644 src/components/Dropdown/Dropdown.less create mode 100644 src/components/Dropdown/Jquery.Dropdown.js create mode 100644 src/components/Label/Label.html create mode 100644 src/components/Label/Label.json create mode 100644 src/components/Label/Label.less create mode 100644 src/components/Link/Link.html create mode 100644 src/components/Link/Link.json create mode 100644 src/components/Link/Link.less create mode 100644 src/components/List/List.html create mode 100644 src/components/List/List.json create mode 100644 src/components/List/List.less create mode 100644 src/components/ListItem/Jquery.ListItem.js create mode 100644 src/components/ListItem/ListItem.Document.html create mode 100644 src/components/ListItem/ListItem.Image.html create mode 100644 src/components/ListItem/ListItem.html create mode 100644 src/components/ListItem/ListItem.json create mode 100644 src/components/ListItem/ListItem.less create mode 100644 src/components/NavBar/Jquery.NavBar.js create mode 100644 src/components/NavBar/NavBar.html create mode 100644 src/components/NavBar/NavBar.json create mode 100644 src/components/NavBar/NavBar.less create mode 100644 src/components/OrgChart/OrgChart.html create mode 100644 src/components/OrgChart/OrgChart.json create mode 100644 src/components/OrgChart/OrgChart.less create mode 100644 src/components/Overlay/Overlay.html create mode 100644 src/components/Overlay/Overlay.json create mode 100644 src/components/Overlay/Overlay.less create mode 100644 src/components/Panel/Jquery.Panel.js create mode 100644 src/components/Panel/Panel.html create mode 100644 src/components/Panel/Panel.json create mode 100644 src/components/Panel/Panel.less create mode 100644 src/components/PeoplePicker/Jquery.PeoplePicker.js create mode 100644 src/components/PeoplePicker/PeoplePicker.Compact.html create mode 100644 src/components/PeoplePicker/PeoplePicker.Disconnected.html create mode 100644 src/components/PeoplePicker/PeoplePicker.FacePile.html create mode 100644 src/components/PeoplePicker/PeoplePicker.Searching.png create mode 100644 src/components/PeoplePicker/PeoplePicker.html create mode 100644 src/components/PeoplePicker/PeoplePicker.json create mode 100644 src/components/PeoplePicker/PeoplePicker.less create mode 100644 src/components/Persona/Persona.No-Presence.html create mode 100644 src/components/Persona/Persona.Person.jpg create mode 100644 src/components/Persona/Persona.Person2.png create mode 100644 src/components/Persona/Persona.Placeholder.html create mode 100644 src/components/Persona/Persona.html create mode 100644 src/components/Persona/Persona.json create mode 100644 src/components/Persona/Persona.less create mode 100644 src/components/PersonaCard/Jquery.PersonaCard.js create mode 100644 src/components/PersonaCard/PersonaCard.html create mode 100644 src/components/PersonaCard/PersonaCard.json create mode 100644 src/components/PersonaCard/PersonaCard.less create mode 100644 src/components/Pivot/Pivot.html create mode 100644 src/components/Pivot/Pivot.json create mode 100644 src/components/Pivot/Pivot.less create mode 100644 src/components/Pivot/jquery.Pivot.js create mode 100644 src/components/SearchBox/Jquery.SearchBox.js create mode 100644 src/components/SearchBox/SearchBox.html create mode 100644 src/components/SearchBox/SearchBox.json create mode 100644 src/components/SearchBox/SearchBox.less create mode 100644 src/components/Spinner/Spinner.html create mode 100644 src/components/Spinner/Spinner.js create mode 100644 src/components/Spinner/Spinner.json create mode 100644 src/components/Spinner/Spinner.less create mode 100644 src/components/Table/Table.html create mode 100644 src/components/Table/Table.json create mode 100644 src/components/Table/Table.less create mode 100644 src/components/TextField/Jquery.TextField.js create mode 100644 src/components/TextField/TextField.Multiline.html create mode 100644 src/components/TextField/TextField.Placeholder.html create mode 100644 src/components/TextField/TextField.Underlined.html create mode 100644 src/components/TextField/TextField.html create mode 100644 src/components/TextField/TextField.json create mode 100644 src/components/TextField/TextField.less create mode 100644 src/components/Toggle/Toggle.html create mode 100644 src/components/Toggle/Toggle.json create mode 100644 src/components/Toggle/Toggle.less create mode 100644 src/less/Fabric.Components.less create mode 100644 src/less/Fabric.RTL.less create mode 100644 src/less/Fabric.less create mode 100644 src/less/_Fabric.Animations.RTL.less create mode 100644 src/less/_Fabric.Animations.less create mode 100644 src/less/_Fabric.Color.Mixins.less create mode 100644 src/less/_Fabric.Color.Variables.less create mode 100644 src/less/_Fabric.Grid.less create mode 100644 src/less/_Fabric.Icons.Font.less create mode 100644 src/less/_Fabric.Icons.RTL.less create mode 100644 src/less/_Fabric.Icons.less create mode 100644 src/less/_Fabric.Responsive.Utilities.less create mode 100644 src/less/_Fabric.Responsive.Variables.less create mode 100644 src/less/_Fabric.Typography.Fonts.less create mode 100644 src/less/_Fabric.Typography.Languageoverrides.less create mode 100644 src/less/_Fabric.Typography.Variables.less create mode 100644 src/less/_Fabric.Typography.less create mode 100644 src/less/_Fabric.Utilities.less create mode 100644 src/less/_Fabric.ZIndex.Variables.less create mode 100644 src/less/_Office.Color.Mixins.less create mode 100644 src/less/_Office.Color.Variables.less create mode 100644 src/templates/component-manifest-template.less create mode 100644 src/templates/individual-component-example.html diff --git a/.csscomb.json b/.csscomb.json new file mode 100644 index 00000000..dbafe663 --- /dev/null +++ b/.csscomb.json @@ -0,0 +1,26 @@ +{ + "remove-empty-rulesets": true, + "always-semicolon": true, + "color-case": "lower", + "block-indent": " ", + "color-shorthand": false, + "element-case": "lower", + "eof-newline": true, + "leading-zero": true, + "quotes": "single", + "space-before-colon": "", + "space-after-colon": " ", + "space-before-combinator": " ", + "space-after-combinator": " ", + "space-between-declarations": "\n", + "space-before-opening-brace": " ", + "space-after-opening-brace": "\n", + "space-after-selector-delimiter": "\n", + "space-before-selector-delimiter": "", + "space-before-closing-brace": "\n", + "strip-spaces": true, + "tab-size": true, + "unitless-zero": false, + "vendor-prefix-align": true +} + diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..aa136ba4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,56 @@ +# ========================= +# Project Files +# ========================= + +# Dependencies +bower_components +node_modules +npm-debug.log + +# Fabric files +*.sublime-workspace +docs.css +dist + +# Docs files +docs/app +docs/app-min +docs/temp +docs/components/js/jquery.all-components.min.js +docs/components/js/fabric.components-picker.min.js + +# Auto Generated Files +docs/data +docs/app/data + +# ========================= +# Operating System Files +# ========================= + +# OSX +# ========================= + +.DS_Store +.AppleDouble +.LSOverride + +# Icon must ends with two \r. +Icon + +# Files that might appear on external disk +.Spotlight-V100 +.Trashes + + +# Windows +# ========================= + +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp diff --git a/Third Party Notices.txt b/Third Party Notices.txt new file mode 100644 index 00000000..7e4e0897 --- /dev/null +++ b/Third Party Notices.txt @@ -0,0 +1,22 @@ +This project incorporates material from the projects listed below (Third Party IP). The original copyright notice and the license under which Microsoft received such Third Party IP, are set forth below. Such licenses and notices are provided for informational purposes only. Microsoft licenses the Third Party IP to you under the licensing terms for the Microsoft product. Microsoft reserves all other rights not expressly granted under this agreement, whether by implication, estoppel or otherwise. + +PICKADATE - Amsul + +Copyright 2014 Amsul, http://amsul.ca + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Provided for Informational Purposes Only +MIT License +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..c0e56b34 --- /dev/null +++ b/bower.json @@ -0,0 +1,15 @@ +{ + "name": "Fabric", + "author": "Office Fabric Team", + "version": "0.10.3", + "description": "A front-end framework for building experiences for Office 365.", + "license": "n/a", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components" + ], + "dependencies": { + } +} diff --git a/gulp/fabric.js b/gulp/fabric.js new file mode 100644 index 00000000..da50c9dd --- /dev/null +++ b/gulp/fabric.js @@ -0,0 +1,323 @@ +var gulp = require('gulp'); +var del = require('del'); +var fs = require('fs'); +var less = require('gulp-less'); +var batch = require('gulp-batch'); +var cssMinify = require('gulp-minify-css'); +var csscomb = require('gulp-csscomb'); +var cssbeautify = require('gulp-cssbeautify'); +var file = require('gulp-file'); +var flipper = require('gulp-css-flipper'); +var autoprefixer = require('gulp-autoprefixer'); +var mergeStream = require('merge-stream'); +var rename = require('gulp-rename'); +var es = require('event-stream'); +var _ = require('lodash'); +var pkg = require('../package.json'); +var header = require('gulp-header'); +var zip = require('gulp-zip'); +var gutil = require('gulp-util'); +var runSequence = require('run-sequence'); +var template = require('gulp-template'); +var concat = require('gulp-concat'); +var tap = require('gulp-tap'); +var data = require('gulp-data'); +var folders = require('gulp-folders'); +var browserSync = require('browser-sync').create(); +var colors = require('colors/safe'); +var path = require('path'); + +// Define paths. +var paths = { + distPath: 'dist', + componentsPath : 'src/components', + distCompsPath : 'dist/components', + templatePath : 'src/templates' +}; + +var storedFiles = {}; + +var spacing = "\r\n"; +var spaceDashes = colors.rainbow("---------------------------------------------------"); +var linkTitle = colors.green("Fabric") + colors.cyan(' Distrobution complete') + colors.green(''); +// var completURL = spaceDashes + spacing + spacing + linkTitle + spacing + colors.magenta(url +':' + portNum) + spacing + spacing + spaceDashes; + +// +// Build fabric banner +// ---------------------------------------------------------------------------- + +var date = new Date(); +var monthNames = ["January", "February", "March", + "April", "May", "June", "July", + "August", "September", "October", + "November", "December"]; +var bannerTemplate = ['/**', + ' * <%= pkg.name %> <%= pkg.version %>', + ' * <%= pkg.description %>', + ' **/', + ''].join('\n'); + +// Emit the end of the event so further pipes don't continue working +// on pipes that have bad data/files in it. Essentially, errors shouldn't cause +// tasks to exit now. +var onGulpError = function (error) { + console.log(error); + this.emit('end'); +}; + +// Helper for retrieving folders +var getFolders = function(dir) { + return fs.readdirSync(dir) + .filter(function(file) { + return fs.statSync(path.join(dir, file)).isDirectory(); + }); +} + +var componentsFolders = getFolders(paths.componentsPath); +var catalogContents = ""; // Starts off the file contents building +var catalogFile = ""; + +// Fabric Build Tools + +// Clean out the distribution folder. +gulp.task('clean:fabric', function() { + return del.sync([paths.distPath]); +}); + +// +// Tasks for building Fabric for distribution. +// ---------------------------------------------------------------------------- + +// Copy all uncompiled LESS files to distribution folder. +gulp.task('copy', ['clean:fabric'], function () { + // Copy LESS files. + var less = gulp.src('src/less/*') + .pipe(gulp.dest(paths.distPath + '/less')); + + // Copy all Components files. + var components = gulp.src('src/components/**') + .pipe(gulp.dest(paths.distPath + '/components')); + + return mergeStream(less, components); +}); + +// Build LESS files for core Fabric and Components into LTR and RTL CSS files. +gulp.task('build-less', ['clean:fabric'], function() { + + // Confgure data objects to pass into banner plugin. + var bannerData = { + pkg : pkg, + date: date, + monthNames: monthNames + } + + // Baseline set of tasks for building Fabric CSS. + var _fabricBase = function() { + return gulp.src(['src/less/fabric.less']) + .pipe(less()) + .on('error', onGulpError) + .pipe(rename('fabric.css')) + .on('error', onGulpError) + .pipe(header(bannerTemplate, bannerData)) + .on('error', onGulpError) + .pipe(autoprefixer({ + browsers: ['last 2 versions', 'ie >= 9'], + cascade: false + })) + .on('error', onGulpError); + } + + // Build full and minified Fabric CSS. + var fabric = _fabricBase() + .pipe(cssbeautify()) + .on('error', onGulpError) + .pipe(csscomb()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError) + .pipe(rename('fabric.min.css')) + .on('error', onGulpError) + .pipe(cssMinify()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError); + + // Build full and minified Fabric RTL CSS. + var fabricRtl = gulp.src('src/less/fabric.rtl.less') + .pipe(less()) + .on('error', onGulpError) + .pipe(flipper()) + .on('error', onGulpError) + .pipe(rename('fabric.rtl.css')) + .on('error', onGulpError) + .pipe(header(bannerTemplate, bannerData)) + .on('error', onGulpError) + .pipe(autoprefixer({ + browsers: ['last 2 versions', 'ie >= 9'], + cascade: false + })) + .on('error', onGulpError) + .pipe(cssbeautify()) + .on('error', onGulpError) + .pipe(csscomb()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError) + .pipe(rename('fabric.rtl.min.css')) + .on('error', onGulpError) + .pipe(cssMinify()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError); + + var _componentsBase = function() { + return gulp.src('src/less/fabric.components.less') + .pipe(less()) + .on('error', onGulpError) + .pipe(header(bannerTemplate, bannerData)) + .on('error', onGulpError) + .pipe(autoprefixer({ + browsers: ['last 2 versions', 'ie >= 9'], + cascade: false + })) + .on('error', onGulpError); + } + + // Build full and minified Fabric Components CSS. + var components = _componentsBase() + .pipe(rename('fabric.components.css')) + .on('error', onGulpError) + .pipe(cssbeautify()) + .on('error', onGulpError) + .pipe(csscomb()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError) + .pipe(rename('fabric.components.min.css')) + .on('error', onGulpError) + .pipe(cssMinify()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError); + + // Build full and minified Fabric Components RTL CSS. + var componentsRtl = _componentsBase() + .pipe(flipper()) + .on('error', onGulpError) + .pipe(cssbeautify()) + .on('error', onGulpError) + .pipe(csscomb()) + .on('error', onGulpError) + .pipe(rename('fabric.components.rtl.css')) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError) + .pipe(cssMinify()) + .on('error', onGulpError) + .pipe(rename('fabric.components.rtl.min.css')) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath + '/css/')) + .on('error', onGulpError); + + // Build full and minified Fabric Components CSS for each Component. + var indComponents = componentsFolders.map(function(folder) { + var manifest = JSON.parse(fs.readFileSync(paths.componentsPath + '/' + folder + '/' + folder + '.json')); + var deps = manifest.dependencies || []; + + return gulp.src(paths.templatePath + '/'+ 'component-manifest-template.less') + .pipe(data(function () { + return { "componentName": folder, "dependencies": deps }; + })) + .on('error', onGulpError) + .pipe(template()) + .on('error', onGulpError) + .pipe(less()) + .on('error', onGulpError) + .pipe(header(bannerTemplate, bannerData)) + .on('error', onGulpError) + .pipe(autoprefixer({ + browsers: ['last 2 versions', 'ie >= 9'], + cascade: false + })) + .pipe(rename(folder + '.css')) + .on('error', onGulpError) + .pipe(cssbeautify()) + .on('error', onGulpError) + .pipe(csscomb()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distCompsPath + '/' + folder)) + .on('error', onGulpError) + .pipe(rename(folder + '.min.css')) + .on('error', onGulpError) + .pipe(cssMinify()) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distCompsPath + '/' + folder)) + .on('error', onGulpError); + }); + + // Merge all current streams into one. + return mergeStream(fabric, fabricRtl, components, componentsRtl, indComponents); +}); + +gulp.task('copy-components-html', folders(paths.componentsPath, function(folder) { + return gulp.src(paths.componentsPath + '/' + folder + '/*.html') + .on('error', onGulpError) + .pipe(concat(folder + '.html')) + .on('error', onGulpError) + .pipe(tap(function(file) { + storedFiles[folder] = file.contents.toString(); + var curString = storedFiles[folder]; + curString = JSON.stringify(curString); + //Check if module was already included in string + if(catalogContents.indexOf(folder + ':') < 0) { + catalogContents += ', "' + folder + '" : ' + curString + ' '; + } + })) + .on('error', onGulpError); +})); + +gulp.task('build-component-examples', ['copy-components-html'], folders(paths.componentsPath, function(folder){ + return gulp.src(paths.templatePath + '/'+ 'individual-component-example.html') + .on('error', onGulpError) + .pipe(data(function () { + return { "componentName": folder, "stored": storedFiles[folder] }; + })) + .on('error', onGulpError) + .pipe(template()) + .on('error', onGulpError) + .pipe(rename(folder + '-demos.html')) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distCompsPath + '/' + folder)) + .on('error', onGulpError); +})); + +// // Build up catalog to be used +// gulp.task('create-catalog-string', ['copy-components-html'], function() { +// return catalogFile = '{ "catalog" : [' + '{ "start" : ""' + catalogContents + '}] }'; +// }); + +// gulp.task('create-component-catalog', ['create-catalog-string'], folders(paths.componentsPath, function(folder) { +// return file('htmlcatalog.json', catalogFile, { src: true }) +// .on('error', onGulpError) +// .pipe(gulp.dest(paths.dataPath)); +// })); + +// Roll up static resource building +gulp.task('build-resources', ['clean:fabric', 'copy', 'build-less', 'copy-components-html', 'build-component-examples']); + +// Archive the entire distribution folder for easy distribution +gulp.task('build-fabric', ['build-resources'], function() { + return gulp.src(paths.distPath + '/**/*') + .pipe(zip('fabric-' + pkg.version + '.zip')) + .on('error', onGulpError) + .pipe(gulp.dest(paths.distPath)) + .on('error', onGulpError); +}); + +// Watch and build Fabric when sources change. +gulp.task('watch:fabric', ['build-fabric'], function() { + gulp.watch('src/**/*', batch(function(events, done) { + runSequence('build-fabric', done); + })); +}); + diff --git a/gulp/log.js b/gulp/log.js new file mode 100644 index 00000000..45321f77 --- /dev/null +++ b/gulp/log.js @@ -0,0 +1,338 @@ +'use strict'; +// This is the base logging library for the build +var gutil = require('gulp-util'); +var prettyTime = require('pretty-hrtime'); +var plumber = require('gulp-plumber'); +var _ = require('lodash'); + +if (!global.start) { + global.start = process.hrtime(); +} + +var c_logFlushInterval = 1000; // 1 sec + +global.warnings = []; +global.errors = []; +global.testsRun = 0; +global.testsPassed = 0; +global.taskRun = 0; +global.taskErrors = 0; +global.coverageResults = 0; +global.coveragePass = 0; +global.coverageTotal = 0; +global.wroteSummary = false; + +function formatError(e) { + if (!e.err) { + return e.message + '\r\n' + e.stack; + } + + // PluginError + if (typeof e.err.showStack === 'boolean') { + return e.err.toString() + (e.err.stack ? '\r\n' + e.err.stack : ''); + } + + // normal error + if (e.err.stack) { + return e.err.stack; + } + + // unknown (string, number, etc.) + if (typeof(Error) === 'undefined') { + return e.message + '\r\n' + e.stack; + } else { + return new Error(String(e.err)).stack; + } +} + +function plumberOnError(err) { + log.writeError(err); + + this.emit('end'); +}; + +function log() { + + var output = ''; + + gutil.log.apply(this, arguments); +} + +function writeSummary(config) { + if (!global.wroteSummary) { + global.wroteSummary = true; + + if (global.devEnvironmentConfig && + (global.devEnvironmentConfig.shouldSkipOptimizer || (global.devEnvironmentConfig.excludeFromMergePackages && global.devEnvironmentConfig.excludeFromMergePackages.length))) { + log('Dev environment config: ' + gutil.colors.yellow(JSON.stringify(global.devEnvironmentConfig, null, 4))); + } + + if (global.devProjectList && global.devProjectList.length) { + log('Watching projects', gutil.colors.green(_.flatten(global.devProjectList, 'name'))); + } + + if (config.useLocalNodeServer) { + log('Local Node server is', gutil.colors.green('enabled')); + log('Dev build copy', gutil.colors.yellow('disabled'), 'because Local Node server is enabled'); + } + else { + log('Local Node server is disabled set the', gutil.colors.yellow('UseLocalNodeServer'), 'environment variable to a truthy value to enable it'); + + if (config.devBuild) { + log('Dev build copied to:', gutil.colors.green(process.env.DEVSCRIPTS_FOLDERSMACHINENAME)); + } + else { + log('Dev build disabled set the', gutil.colors.yellow('DEVSCRIPTS_FOLDERSMACHINENAME'), 'environment variable to your build machine to enable it'); + } + } + + log('Create tasks duration:', gutil.colors.yellow(prettyTime(global.taskCreationTime))); + log('Total duration:', gutil.colors.yellow(prettyTime(process.hrtime(log.getStart())))); + log('Tasks run:', gutil.colors.yellow(global.taskRun)); + + if (log.getTestsRun() > 0) { + log('Tests results -', 'Passed:', gutil.colors.green(log.getTestsPassed()), 'Failed:', gutil.colors.red(log.getTestsRun() - log.getTestsPassed())); + } + + if (global.coverageResults > 0) { + log('Coverage results -', 'Passed:', gutil.colors.green(global.coveragePass), 'Failed:', gutil.colors.red(global.coverageResults - global.coveragePass), 'Avg. Cov.:', gutil.colors.yellow(Math.floor(global.coverageTotal / global.coverageResults) + '%')); + } + + if (log.getWarnings().length) { + log('Tasks warnings:', gutil.colors.red(log.getWarnings().length + '\r\n' + log.getWarnings().join('\r\n'))); + } + + if (global.taskErrors > 0 || log.getErrors().length) { + log('Tasks errors:', gutil.colors.red(global.taskErrors + log.getErrors().length + '\r\n' + log.getErrors().join('\r\n'))); + } + } + + // flush the log + log.flush(); +} + +function writeError(e) { + log.writeError(e); + global.taskErrors++; +} + +function exitProcess(errorCode) { + // Force everthing to be written to stdout + // this gets around some bugs in nodejs on windows + log.flush(); + + if (!global.watchMode) { + process.stdout.write('', function () { + process.exit(errorCode); + }); + } +} + +log.reset = function () { + global.start = process.hrtime(); + global.warnings = []; + global.errors = []; + global.testsRun = 0; + global.coverageResults = 0; + global.coveragePass = 0; + global.coverageTotal = 0; + global.testsPassed = 0; + global.taskRun = 0; + global.taskErrors = 0; + global.wroteSummary = false; +}; + +log.testRun = function (passed) { + global.testsRun++; + + if (passed) { + global.testsPassed++; + } +}; + +log.coverageData = function (coverage, threshold, filePath) { + global.coverageResults++; + + if (coverage < threshold) { + log.error('Coverage:', Math.floor(coverage) + '% (<' + threshold + '%) -', filePath); + } else { + global.coveragePass++; + } + + global.coverageTotal += coverage; +}; + +log.plumber = function () { + return plumber(plumberOnError); +}; + +log.warn = function () { + + var newArgs = ['WARNING -']; + + for (var x = 0; x < arguments.length; x++) { + newArgs.push(arguments[x]); + } + + global.warnings.push(newArgs.join(' ')); + log(gutil.colors.yellow.apply(null, newArgs)); +}; + +log.writeError = function (e) { + if (e.err) { + var msg = formatError(e); + var time = prettyTime(e.hrDuration); + log.error( + '\'' + gutil.colors.cyan(e.task) + '\'', + gutil.colors.red('errored after'), + gutil.colors.magenta(time) + ); + log.error(msg); + } + else if (e.fileName) // This is probably a plugin error + { + log.error( + e.message, + '\r\n', + e.plugin + ': \'' + gutil.colors.yellow(e.fileName) + '\':' + e.lineNumber, + '\r\n', + e.stack + ); + } + else { + log.error( + 'Unknown', + '\r\n', + gutil.colors.red(e.message), + '\r\n', + e.stack); + } +}; + +log.error = function () { + + var newArgs = ['Error -']; + + for (var x = 0; x < arguments.length; x++) { + newArgs.push(arguments[x]); + } + + global.errors.push(newArgs.join(' ')); + log(gutil.colors.red.apply(null, newArgs)); + + // flush after each error + log.flush(); +}; + +log.getWarnings = function () { + return global.warnings; +}; + +log.getErrors = function () { + return global.errors; +}; + +log.getStart = function () { + return global.start; +}; + +log.getTestsRun = function () { + return global.testsRun; +}; + +log.getTestsPassed = function () { + return global.testsPassed; +}; + +log.flush = function () { +}; + +log.setWatchMode = function () { + global.watchMode = true; +}; + +log.getWatchMode = function () { + return global.watchMode; +}; + +log.addGulpLogging = function (gulp, gulpErrorCallback, gulpStopCallback) { + // This will add logging to the gulp execution + + gulpErrorCallback = gulpErrorCallback || function () { }; + gulpStopCallback = gulpStopCallback || function () { }; + var config = require('./config').config; + + process.on('uncaughtException', + function (err) { + writeError(err); + writeSummary(config); + exitProcess(1); + gulp.stop(); + gulpErrorCallback(err); + }); + + gulp.on('start', function (err) { + log('Starting Gulp'); + }); + + gulp.on('stop', function (err) { + writeSummary(config); + + // error if we have any errors or warnings + if (global.taskErrors > 0 || log.getErrors().length || log.getWarnings().length) { + exitProcess(1); + } + + gulpStopCallback(err); + }); + + gulp.on('err', function (err) { + writeError(err); + writeSummary(config); + exitProcess(1); + gulpErrorCallback(err); + }); + + gulp.on('task_start', function (e) { + if (global.fromRunGulp) { + log('Starting', '\'' + gutil.colors.cyan(e.task) + '\'...'); + } + + global.taskRun++; + }); + + gulp.on('task_stop', function (e) { + var time = prettyTime(e.hrDuration); + + if (global.fromRunGulp) { + log( + 'Finished', '\'' + gutil.colors.cyan(e.task) + '\'', + 'after', gutil.colors.magenta(time) + ); + } + }); + + gulp.on('task_err', function (err) { + writeError(err); + writeSummary(config); + exitProcess(1); + }); + + gulp.on('task_not_found', function (err) { + log( + gutil.colors.red('Task \'' + err.task + '\' is not in your gulpfile') + ); + log('Please check the documentation for proper gulpfile formatting'); + exitProcess(1); + }); +}; + +log.markTaskCreationTime = function () { + global.taskCreationTime = process.hrtime(log.getStart()); +}; + +log.writeSummary = function () { + writeSummary(config); +} + +module.exports = log; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..b09177e5 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,11 @@ +var gulp = require('gulp'); +var requireDir = require('require-dir'); + +////////////////////////// +// INCLUDE FABRIC TASKS +////////////////////////// + +requireDir('./gulp'); + +gulp.task('default', ['watch:fabric']); + diff --git a/package.json b/package.json new file mode 100644 index 00000000..b42659cd --- /dev/null +++ b/package.json @@ -0,0 +1,49 @@ +{ + "name": "Fabric", + "author": "Office Fabric Team", + "version": "0.10.3", + "description": "The front-end framework for building experiences for Office 365.", + "repository": { + "type": "git", + "url": "https://msblox.visualstudio.com/DefaultCollection/_git/Fabric" + }, + "scripts": { + "postinstall": "node node_modules/bower/bin/bower install" + }, + "devDependencies": { + "bower": "^1.3.12", + "browser-sync": "^2.8.2", + "colors": "^1.1.0", + "del": "^1.1.1", + "event-stream": "^3.3.1", + "express": "^4.10.4", + "glob": "^3.2.9", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^2.1.0", + "gulp-batch": "^1.0.5", + "gulp-concat": "^2.5.2", + "gulp-css-flipper": "^1.0.2", + "gulp-cssbeautify": "^0.1.3", + "gulp-csscomb": "^3.0.3", + "gulp-data": "^1.2.0", + "gulp-file": "^0.2.0", + "gulp-folders": "^1.1.0", + "gulp-header": "^1.2.2", + "gulp-less": "3.0.1", + "gulp-minify-css": "^0.3.11", + "gulp-plumber": "0.6.6", + "gulp-rename": "^1.2.0", + "gulp-replace": "^0.5.2", + "gulp-size": "^1.0.0", + "gulp-tap": "^0.1.3", + "gulp-template": "^3.0.0", + "gulp-uglifyjs": "^0.4.4", + "gulp-util": "^3.0.1", + "gulp-zip": "^2.0.3", + "lodash": "^2.4.1", + "merge-stream": "^0.1.6", + "pretty-hrtime": "0.2.2", + "require-dir": "^0.3.0", + "run-sequence": "^1.1.0" + } +} diff --git a/src/components/Breadcrumb/Breadcrumb.html b/src/components/Breadcrumb/Breadcrumb.html new file mode 100644 index 00000000..9438eecd --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.html @@ -0,0 +1,5 @@ +
+ Working files + OneDrive @ Contoso + Working files +
diff --git a/src/components/Breadcrumb/Breadcrumb.json b/src/components/Breadcrumb/Breadcrumb.json new file mode 100644 index 00000000..fefb2648 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.json @@ -0,0 +1,6 @@ +{ + "name": "Breadcrumb", + "notes": "Shows the user's current location in a hierarchy and provides a means of navigating upward.", + "template": "Breadcrumb.html", + "class": "ms-Breadcrumb" +} diff --git a/src/components/Breadcrumb/Breadcrumb.less b/src/components/Breadcrumb/Breadcrumb.less new file mode 100644 index 00000000..ac322e12 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.less @@ -0,0 +1,49 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Breadcrumb styles + + +.ms-Breadcrumb { + height: 40px; + + .ms-Breadcrumb-currentLarge { + display: none; + } + .ms-Breadcrumb-parent, .ms-Breadcrumb-current { + font-size: @ms-font-size-m; + font-family: @ms-font-family-semilight; + line-height: 50px; + color: @ms-color-neutralSecondary; + } + .ms-Breadcrumb-parent { + color: @ms-color-neutralPrimary; + text-decoration: none; + + &:hover { + color: @ms-color-black; + } + + &:active { + color: @ms-color-themePrimary; + } + } + + // Right-pointing chevron + // TODO: Localization, point arrow to left. + .ms-Breadcrumb-chevron { + padding: 0 7px 0 5px; + } + + // Only show the big title on large and extra large displays. + @media (min-width: @ms-screen-lg-min) { + .ms-Breadcrumb-currentLarge { + display: inline; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-xl; + color: @ms-color-themePrimary; + line-height: 42px; + margin-right: 20px; + } + } +} diff --git a/src/components/Button/Button.html b/src/components/Button/Button.html new file mode 100644 index 00000000..87469129 --- /dev/null +++ b/src/components/Button/Button.html @@ -0,0 +1,5 @@ + diff --git a/src/components/Button/Button.json b/src/components/Button/Button.json new file mode 100644 index 00000000..f9d0f2e7 --- /dev/null +++ b/src/components/Button/Button.json @@ -0,0 +1,84 @@ +{ + "name": "Button", + "notes": "", + "template": "Button.html", + "class": "ms-Button", + "branches": [ + { + "name": "Action", + "default": true, + "branches": [ + { + "name": "Standard", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Primary", + "class": "ms-Button--primary", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Hero", + "class": "ms-Button--hero", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Compound", + "class": "ms-Button--compound", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Command", + "class": "ms-Button--command", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] +} diff --git a/src/components/Button/Button.less b/src/components/Button/Button.less new file mode 100644 index 00000000..cacb4dd1 --- /dev/null +++ b/src/components/Button/Button.less @@ -0,0 +1,324 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Button styles + + +.ms-Button { + .ms-font-m; + .ms-u-normalize; + background-color: @ms-color-neutralLighter; + border: 1px solid @ms-color-neutralLighter; + cursor: pointer; + display: inline-block; + height: 32px; + min-width: 80px; + padding: 4px 20px 6px; + + &:hover { + background-color: @ms-color-neutralLight; + border-color: @ms-color-neutralLight; + outline: 1px solid transparent; + + .ms-Button-label { + color: @ms-color-black; + } + } + + &:focus { + background-color: @ms-color-neutralLight; + border-color: @ms-color-themePrimary; + outline: 1px solid transparent; + + .ms-Button-label { + color: @ms-color-black; + } + } + + &:active { + background-color: @ms-color-themePrimary; + border-color: @ms-color-themePrimary; + + .ms-Button-label { + color: @ms-color-white; + } + } + + &:disabled, + &.is-disabled { + background-color: @ms-color-neutralLighter; + border-color: @ms-color-neutralLighter; + cursor: default; + + .ms-Button-label { + color: @ms-color-neutralTertiary; + } + + &:hover, + &:focus { + outline: 0; + } + } +} + +// Add space between adjacent buttons. +.ms-Button + .ms-Button { + margin-left: 6px; +} + +.ms-Button-label { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-semibold; + font-size: @ms-font-size-m; +} + +.ms-Button-icon, +.ms-Button-description { + display: none; +} + + +//== Modifier: Primary action button +// +.ms-Button.ms-Button--primary { + background-color: @ms-color-themePrimary; + border-color: @ms-color-themePrimary; + + .ms-Button-label { + color: @ms-color-white; + } + + &:hover { + background-color: @ms-color-themeDark; + border-color: @ms-color-themeDark; + } + + &:focus { + background-color: @ms-color-themeDark; + border-color: @ms-color-themeDarker; + } + + &:active { + background-color: @ms-color-themePrimary; + border-color: @ms-color-themePrimary; + } + + &:disabled, + &.is-disabled { + background-color: @ms-color-neutralLighter; + border-color: @ms-color-neutralLighter; + + .ms-Button-label { + color: @ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Hero button +// +.ms-Button.ms-Button--hero { + background-color: transparent; + border: none; + vertical-align: top; + + .ms-Button-icon { + color: @ms-color-themePrimary; + display: inline-block; + font-size: @ms-font-size-s; + position: relative; + top: 1px; + + .ms-Icon { + .ms-Icon--circle; + border-width: 2px; + height: 18px; + line-height: 18px; + width: 18px; + font-size: @ms-font-size-s; + margin: 0; + } + } + + .ms-Button-label { + color: @ms-color-themePrimary; + font-family: @ms-font-family-light; + font-size: @ms-font-size-xl; + position: relative; + top: -5px; + } + + &:hover, + &:focus { + .ms-Button-icon { + .ms-Icon { + color: @ms-color-themeDark; + } + } + + .ms-Button-label { + color: @ms-color-themeDarker; + } + } + + &:active { + .ms-Button-icon { + .ms-Icon { + color: @ms-color-themePrimary; + } + } + + .ms-Button-label { + color: @ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + .ms-Icon { + color: @ms-color-neutralTertiaryAlt; + } + } + + .ms-Button-label { + color: @ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Compound button +// +.ms-Button.ms-Button--compound { + height: auto; + min-height: 72px; + max-width: 280px; + padding: 20px; + + .ms-Button-label { + display: block; + font-family: @ms-font-family-semibold; + position: relative; + text-align: left; + margin-top: -5px; + } + + .ms-Button-description { + color: @ms-color-neutralSecondary; + display: block; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-s; + position: relative; + text-align: left; + top: 3px; + } + + &:hover { + .ms-Button-description { + color: @ms-color-neutralDark; + } + } + + &:focus { + border-color: @ms-color-themePrimary; + background-color: @ms-color-neutralLighter; + + .ms-Button-label { + color: @ms-color-neutralPrimary; + } + + .ms-Button-description { + color: @ms-color-neutralSecondary; + } + } + + &:active { + background-color: @ms-color-themePrimary; + + .ms-Button-description, + .ms-Button-label { + color: @ms-color-white; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-label, + .ms-Button-description { + color: @ms-color-neutralTertiary; + } + + &:focus, + &:active { + border-color: @ms-color-neutralLighter; + background-color: @ms-color-neutralLighter; + + .ms-Button-label, + .ms-Button-description { + color: @ms-color-neutralTertiary; + } + } + } +} + + +//== Modifier: Command button +// +.ms-Button.ms-Button--command { + background-color: transparent; + border: none; + height: 30px; + line-height: 30px; + min-width: 0; + padding: 0 10px; + text-align: left; + + .ms-Button-icon { + color: @ms-color-neutralSecondary; + display: inline-block; + font-size: @ms-font-size-s; + margin-right: 5px; + position: relative; + top: -1px; + } + + .ms-Button-label { + font-family: @ms-font-family-regular; + font-size: @ms-font-size-s; + } + + &:hover, + &:focus { + .ms-Button-icon { + color: @ms-color-neutralDark; + } + + .ms-Button-label { + color: @ms-color-black; + } + } + + &:active { + .ms-Button-icon, + .ms-Button-label { + color: @ms-color-themePrimary; + } + } + + &:disabled, + &.is-disabled { + .ms-Button-icon { + color: @ms-color-neutralTertiaryAlt; + } + + .ms-Button-label { + color: @ms-color-neutralTertiary; + } + } +} + +// Add space between adjacent command buttons. +.ms-Button.ms-Button--command + .ms-Button.ms-Button--command { + margin-left: 14px; +} diff --git a/src/components/Callout/Callout.ActionIcon.html b/src/components/Callout/Callout.ActionIcon.html new file mode 100644 index 00000000..43c94050 --- /dev/null +++ b/src/components/Callout/Callout.ActionIcon.html @@ -0,0 +1,20 @@ +
+
+
+

All of your favorite people

+
+
+
+

People automatically puts together all of the people you care most about in one place.

+
+
+ + +
+
+
+
diff --git a/src/components/Callout/Callout.ActionText.html b/src/components/Callout/Callout.ActionText.html new file mode 100644 index 00000000..7f0adc44 --- /dev/null +++ b/src/components/Callout/Callout.ActionText.html @@ -0,0 +1,22 @@ +
+
+
+

All of your favorite people

+
+
+
+

People automatically puts together all of the people you care most about in one place.

+
+
+ + +
+
+
+
diff --git a/src/components/Callout/Callout.Birthday.html b/src/components/Callout/Callout.Birthday.html new file mode 100644 index 00000000..35f6ef2b --- /dev/null +++ b/src/components/Callout/Callout.Birthday.html @@ -0,0 +1,18 @@ +
+
+
+

Birthday

+
+
+
+
+ +
+
+

Alton Lafferty

+

September 4, 1985

+
+
+
+
+
diff --git a/src/components/Callout/Callout.Close.html b/src/components/Callout/Callout.Close.html new file mode 100644 index 00000000..a7c0cd45 --- /dev/null +++ b/src/components/Callout/Callout.Close.html @@ -0,0 +1,18 @@ +
+
+
+

All of your favorite people

+
+ +
+
+

Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

+
+
+ Learn more +
+
+
+
diff --git a/src/components/Callout/Callout.Default.html b/src/components/Callout/Callout.Default.html new file mode 100644 index 00000000..5e8bf0f6 --- /dev/null +++ b/src/components/Callout/Callout.Default.html @@ -0,0 +1,15 @@ +
+
+
+

All of your favorite people

+
+
+
+

Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.

+
+
+ Learn more +
+
+
+
diff --git a/src/components/Callout/Callout.Oobe.html b/src/components/Callout/Callout.Oobe.html new file mode 100644 index 00000000..904bf400 --- /dev/null +++ b/src/components/Callout/Callout.Oobe.html @@ -0,0 +1,22 @@ +
+
+
+

All of your favorite people

+
+
+
+

People automatically puts together all of the people you care most about in one place.

+
+
+ + +
+
+
+
diff --git a/src/components/Callout/Callout.json b/src/components/Callout/Callout.json new file mode 100644 index 00000000..ac9b44dc --- /dev/null +++ b/src/components/Callout/Callout.json @@ -0,0 +1,131 @@ +{ + "name": "Callout", + "notes": "Callouts & Peeks. A fixed width is set, however the width can be adjusted to a min/max ~130px/490px in most cases.", + "class": "ms-Callout", + "dependencies": [ + "Button", + "Label", + "Link" + ], + "branches": [ + { + "name": "Default", + "default": true, + "template": "Callout.Default.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "Close Button", + "template": "Callout.Close.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "ActionText", + "class": "ms-Callout--actionText", + "template": "Callout.ActionText.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "Birthday", + "class": "ms-Callout--birthday", + "template": "Callout.Birthday.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + }, + { + "name": "OOBE", + "class": "ms-Callout--OOBE", + "template": "Callout.Oobe.html", + "branches": [ + { + "name": "Left Arrow", + "default": true, + "class": "ms-Callout--arrowLeft" + }, + { + "name": "Right Arrow", + "class": "ms-Callout--arrowRight" + }, + { + "name": "Top Arrow", + "class": "ms-Callout--arrowTop" + }, + { + "name": "Bottom Arrow", + "class": "ms-Callout--arrowBottom" + } + ] + } + ] +} diff --git a/src/components/Callout/Callout.less b/src/components/Callout/Callout.less new file mode 100644 index 00000000..64d05132 --- /dev/null +++ b/src/components/Callout/Callout.less @@ -0,0 +1,444 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Callout styles + + +/** Callout */ +.ms-Callout { + z-index: @ms-zIndex-Callout; + margin: 10px auto; + + /** Arrows */ + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowBottom, + &.ms-Callout--arrowTop { + &:before { + content: ''; + background-color: @ms-color-white; + position: absolute; + transform: rotate(45deg); + z-index: @ms-zIndex-back; + outline: 1px solid transparent; + .drop-shadow; + } + &:after { + content: ''; + background-color: @ms-color-white; + position: absolute; + transform: rotate(45deg); + z-index: @ms-zIndex-front; + } + } + + // Arrow height and width + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowBottom, + &.ms-Callout--arrowTop { + &:before, + &:after { + height: 16px; + width: 16px; + } + } + + /** Arrow positions */ + // Arrows left and right + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowRight { + &:before, + &:after { + top: calc(~'50% - 10px'); + } + } + // Arrow left position + &.ms-Callout--arrowLeft { + &:before, + &:after { + left: -4px; + } + } + // Arrow right position + &.ms-Callout--arrowRight { + &:before, + &:after { + right: -4px; + } + } + // Arrows bottom and top + &.ms-Callout--arrowTop, + &.ms-Callout--arrowBottom { + &:before, + &:after { + right: 0; + left: 0; + margin: 0 auto; + } + } + // Arrow bottom position + &.ms-Callout--arrowBottom { + &:before, + &:after { + bottom: -4px; + } + } + // Arrow top position + &.ms-Callout--arrowTop { + &:before, + &:after { + top: -4px; + } + } + + /** + * OOBE arrows and positions + */ + &.ms-Callout--OOBE { + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowTop { + &:after { + background-color: @ms-color-themePrimary; + } + } + // Arrow left position + &.ms-Callout--arrowLeft { + &:before, + &:after { + top: 55px; + left: -4px; + } + } + // Arrow right position + &.ms-Callout--arrowRight { + &:before, + &:after { + top: 55px; + right: -4px; + } + } + } + + /** + * Birthday arrow color + */ + &.ms-Callout--birthday { + &.ms-Callout--arrowTop { + &:after { + background-color: @ms-color-officeAccent6; + } + } + } + + /** + * ActionText arrow color + */ + &.ms-Callout--actionText { + &.ms-Callout--arrowTop { + &:after { + background-color: @ms-color-officeAccent5; + } + } + } + + /** Hide arrow right and left on mobile */ + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft { + &:before, + &:after { + height: 0; + width: 0; + } + } +} + +// Main callout view +.ms-Callout-main { + position: relative; + background-color: @ms-color-white; + width: 100%; + box-sizing: border-box; + outline: 1px solid transparent; + z-index: @ms-zIndex-middle; + .drop-shadow; +} + +/** Close button */ +.ms-Callout-close { + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + position: absolute; + top: 5px; + right: 5px; + padding: 5px; + font-size: @ms-font-size-m; + color: @ms-color-neutralSecondary; + z-index: (@ms-zIndex-Callout + @ms-zIndex-front); +} + +/** Callout inner */ +// padding for content inside of callout +.ms-Callout-inner { + height: 100%; + padding: 20px; +} + +/** Header */ +.ms-Callout-header { + position: relative; + width: 100%; + box-sizing: border-box; + z-index: (@ms-zIndex-Callout + @ms-zIndex-middle); + padding: 10px 20px 0; + + // Title - set size and color + .ms-Callout-title { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + color: @ms-color-neutralPrimary; + } + + // Large header w/ color -- OOBE + &.ms-Callout-header--l { + padding: 30px 20px; + + // Title - set size and color + .ms-Callout-title { + font-family: @ms-font-family-light; + font-size: @ms-font-size-xxl; + color: @ms-color-white; + } + } + + // Small header w/ color + &.ms-Callout-header--s { + padding: 10px 20px; + + // Title - set size and color + .ms-Callout-title { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + color: @ms-color-white; + } + } +} + +// Title +.ms-Callout-title { + margin: 0; +} +// Add 10px of margin left for birthday callout +.ms-Callout--birthday { + .ms-Callout-title { + margin-left: 10px; + } +} + +/** Content box */ +// all callout content goes in this box +.ms-Callout-content { + position: relative; + width: 100%; +} + +// Group of text - used on birthday callout +.ms-callout-textGroup { + display: inline-block; +} + +// Subtext - text inside of content box +.ms-Callout-subText { + margin: 0; + font-family: @ms-font-family-semilight; + color: @ms-color-neutralPrimary; + + &.ms-Callout-subText--s { + font-size: @ms-font-size-s; + } + + &.ms-Callout-subText--m { + font-size: @ms-font-size-m; + } +} + + + +// SubTitle - a title within the content box - used in birthday text group +.ms-Callout-subTitle { + margin: 0; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + color: @ms-color-neutralPrimary; +} + +// Subtext tag - used for bottom text for spacing in a text group +.ms-Callout-subText--tag { + position: relative; + top: 3px; +} + +/** Bottom actions */ +// Callout actions - wrapper for buttons +.ms-Callout-actions { + position: relative; + margin-top: 20px; + width: 100%; + white-space: nowrap; +} + +// Actions border top +.ms-Callout-actions--border { + border-top: 1px solid @ms-color-neutralLight; +} + +// Action buttons +.ms-Callout-action { + position: relative; + bottom: -10px; + left: -10px; + padding: 10px; + margin-left: 0 !important; + + // States for icons + &:hover .ms-Callout-actionIcon, + &:focus .ms-Callout-actionIcon { + color: @ms-color-themePrimary; + } +} + +// Action text +.ms-Callout-actionText { + font-size: 14px !important; + .ms-font-weight-regular !important; +} + +// Callout buttons - spacing between buttons +.ms-Callout-button { + margin-right: 15px; +} + +/** Birthday callout */ +// img +.ms-Callout-birthdayImg { + position: relative; + display: inline-block; + height: 50px; + width: 50px; + background-color: @ms-color-neutralLight; + margin: 0 10px; + text-align: center; + line-height: 50px; + + &:before { + content: '\e16d'; + font-family: 'Office365Icons'; + font-size: 32px; + color: @ms-color-white; + } +} + + +/** + * Tablet and Desktop displays. + * + * On medium and large screens, callouts are relative positioned + * with a fixed width. Left and right arrows are visible. + */ +@media (min-width: @ms-screen-md-min) { + /** Move to relative positioning if not on phone - set width. */ + .ms-Callout { + position: relative; + width: 290px; + margin: 10px; + + /** Width for OOBE */ + &.ms-Callout--OOBE { + width: 220px; + } + + /** Show arrows right and left */ + &.ms-Callout--arrowRight, + &.ms-Callout--arrowLeft { + &:before, + &:after { + height: 16px !important; + width: 16px !important; + } + } + } +} + + + // All high contrast styling rules + @media screen and (-ms-high-contrast: active) { + .ms-Callout { + // Arrows bottom and top + &.ms-Callout--arrowTop, + &.ms-Callout--arrowBottom { + &:after { + width: 20px !important; + height: 20px !important; + } + } + // Arrow bottom position + &.ms-Callout--arrowBottom { + &:before { bottom: -9px; } + &:after { bottom: -8px; } + } + // Arrow top position + &.ms-Callout--arrowTop { + &:before { top: -9px; } + &:after { top: -8px; } + } + // Arrows left and right - hide on mobile + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowRight { + &:before, &:after { + display: none; + } + } + } + // OOBE variant + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft::before, + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft::after, + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight::before, + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight::after { + top: calc(~'50% - 12px'); + } + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft::before { left: -9px; } + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight::before { right: -9px; } + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowLeft::after { left: -6px; } + .ms-Callout.ms-Callout--OOBE.ms-Callout--arrowRight::after { right: -6px; } + } + + @media screen and (min-width: @screen-md-min) and (-ms-high-contrast: active) { + .ms-Callout { + // Arrows left and right + &.ms-Callout--arrowLeft, + &.ms-Callout--arrowRight { + &:before, &:after { + display: block; + } + &:after { + width: 20px !important; + height: 20px !important; + top: calc(~'50% - 12px'); + } + } + // Arrow left position + &.ms-Callout--arrowLeft { + &:before { left: -9px; } + &:after { left: -8px; } + } + // Arrow right position + &.ms-Callout--arrowRight { + &:before { right: -9px; } + &:after { right: -8px; } + } + } + } diff --git a/src/components/ChoiceField/ChoiceField.Checkbox.Selected.html b/src/components/ChoiceField/ChoiceField.Checkbox.Selected.html new file mode 100644 index 00000000..2a144ae0 --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.Checkbox.Selected.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/components/ChoiceField/ChoiceField.Checkbox.Unselected.html b/src/components/ChoiceField/ChoiceField.Checkbox.Unselected.html new file mode 100644 index 00000000..d0dcbbc1 --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.Checkbox.Unselected.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html b/src/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html new file mode 100644 index 00000000..2598ca01 --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.ChoiceFieldGroup.html @@ -0,0 +1,21 @@ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/src/components/ChoiceField/ChoiceField.Radio.Selected.html b/src/components/ChoiceField/ChoiceField.Radio.Selected.html new file mode 100644 index 00000000..d108f83c --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.Radio.Selected.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/components/ChoiceField/ChoiceField.Radio.Unselected.html b/src/components/ChoiceField/ChoiceField.Radio.Unselected.html new file mode 100644 index 00000000..d7f4ba9d --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.Radio.Unselected.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/components/ChoiceField/ChoiceField.json b/src/components/ChoiceField/ChoiceField.json new file mode 100644 index 00000000..54d7de75 --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.json @@ -0,0 +1,83 @@ +{ + "name": "ChoiceField", + "notes": "Radio buttons and checkboxes.", + "class": "ms-ChoiceField", + "branches": [ + { + "name": "Radio button", + "default": true, + "branches": [ + { + "name": "Unselected", + "default": true, + "template": "ChoiceField.Radio.Unselected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Selected", + "class": "ms-TextField--underlined", + "template": "ChoiceField.Radio.Selected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Checkbox", + "branches": [ + { + "name": "Unselected", + "default": true, + "template": "ChoiceField.Checkbox.Unselected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Selected", + "template": "ChoiceField.Checkbox.Selected.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] + }, + { + "name": "Group", + "notes": "Wrap individual ChoiceField components in a ChoiceFieldGroup to create a list.", + "template": "Choicefield.ChoiceFieldGroup.html", + "class": "ms-ChoiceFieldGroup" + } + ] +} diff --git a/src/components/ChoiceField/ChoiceField.less b/src/components/ChoiceField/ChoiceField.less new file mode 100644 index 00000000..cb68a7f0 --- /dev/null +++ b/src/components/ChoiceField/ChoiceField.less @@ -0,0 +1,192 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Choice fields (radio buttons and checkboxes) styles + + +// Unselected, radio button (default) +.ms-ChoiceField { + .ms-font-m; + .ms-u-normalize; + height: 36px; + position: relative; + + .ms-ChoiceField-input { + position: absolute; + opacity: 0; + top: 8px; + + &:focus:not(:disabled) { + + .ms-ChoiceField-field { + border-color: @ms-color-neutralSecondaryAlt; + } + } + } + + .ms-ChoiceField-field { + border: 1px @ms-color-neutralTertiaryAlt solid; + display: inline-block; + width: 19px; + height: 19px; + cursor: pointer; + margin-top: 8px; + position: relative; + border-radius: 50%; + } + + .ms-Label { + padding-left: 26px; + position: absolute; + top: -8px; + font-size: @ms-font-size-m; + } + + &:hover { + .ms-ChoiceField-field { + border-color: @ms-color-neutralSecondaryAlt; + } + + .ms-Label { + color: @ms-color-black; + } + } + + + // Selected, radio button (default) + .ms-ChoiceField-input:checked { + + + .ms-ChoiceField-field { + + // Checkmark + &:before { + background-color: @ms-color-neutralSecondary; + border-color: @ms-color-neutralSecondary; + color: @ms-color-neutralSecondary; + border-radius: 50%; + content: '\00a0'; + display: inline-block; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + margin: auto; + width: 11px; + height: 11px; + box-sizing: border-box; + } + + .ms-Label { + color: @ms-color-neutralPrimary; + } + + // Checkmark hover + &:hover { + .ms-Label { + color: @ms-color-black; + } + &:before { + background-color: @ms-color-neutralDark; + color: @ms-color-neutralDark; + } + } + } + + &[type='radio'] { + + .ms-ChoiceField-field { + &:before { + border: 1px solid transparent; + } + } + } + } + + + // Disabled, radio button (default) + &.is-disabled { + + .ms-ChoiceField-input { + pointer-events: none; + + &:focus { + + .ms-ChoiceField-field { + border-color: @ms-color-neutralLight; + } + } + } + + .ms-ChoiceField-field { + pointer-events: none; + cursor: default; + border-color: @ms-color-neutralLight; + + &:hover { + border-color: @ms-color-neutralLight; + } + } + + .ms-Label { + color: @ms-color-neutralTertiary; + } + + // Disabled and selected, radio button (default) + .ms-ChoiceField-input:checked { + + + .ms-ChoiceField-field { + &:before { + background-color: @ms-color-neutralTertiaryAlt; + color: @ms-color-neutralTertiaryAlt; + } + + .ms-Label { + color: @ms-color-neutralTertiary; + } + } + } + } + + + // Override default radio button styles for checkboxes + .ms-ChoiceField-input[type="checkbox"] { + + // Unchecked + + .ms-ChoiceField-field { + border-radius: 0; + } + + // Checked + &:checked + .ms-ChoiceField-field:before { + .ms-Icon; + content: '\e041'; + background-color: transparent; + border-radius: 0; + font-size: 13px; + top: -1px; + left: -1px; + } + + // Disabled + &:disabled + .ms-ChoiceField-field { + border-color: @ms-color-neutralTertiary; + cursor: default; + + &:before { + color: @ms-color-neutralTertiary; + } + } + + } + +} + +//== Components - Choice field groups +// +// Choice field groups contain multiple radio buttons or checkboxes + +.ms-ChoiceFieldGroup { + margin-bottom: 4px; + + .ms-ChoiceFieldGroup-title .ms-Label { + position: static; + } +} diff --git a/src/components/ContextualMenu/ContextualMenu.Dividers.html b/src/components/ContextualMenu/ContextualMenu.Dividers.html new file mode 100644 index 00000000..1838296c --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.Dividers.html @@ -0,0 +1,21 @@ + diff --git a/src/components/ContextualMenu/ContextualMenu.Multiselect.html b/src/components/ContextualMenu/ContextualMenu.Multiselect.html new file mode 100644 index 00000000..dd4b0bcf --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.Multiselect.html @@ -0,0 +1,13 @@ + diff --git a/src/components/ContextualMenu/ContextualMenu.SubMenu.html b/src/components/ContextualMenu/ContextualMenu.SubMenu.html new file mode 100644 index 00000000..1b7bec3d --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.SubMenu.html @@ -0,0 +1,18 @@ + diff --git a/src/components/ContextualMenu/ContextualMenu.html b/src/components/ContextualMenu/ContextualMenu.html new file mode 100644 index 00000000..6c6bf172 --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.html @@ -0,0 +1,7 @@ + diff --git a/src/components/ContextualMenu/ContextualMenu.json b/src/components/ContextualMenu/ContextualMenu.json new file mode 100644 index 00000000..ca251477 --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.json @@ -0,0 +1,25 @@ +{ + "name": "ContextualMenu", + "notes": "", + "template": "ContextualMenu.html", + "class": "ms-ContextualMenu", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Sub menu", + "template": "contextualmenu.submenu.html" + }, + { + "name": "Group", + "template": "contextualmenu.dividers.html" + }, + { + "name": "Multi-select", + "template": "contextualmenu.multiselect.html", + "class": "ms-ContextualMenu--multiselect" + } + ] +} diff --git a/src/components/ContextualMenu/ContextualMenu.less b/src/components/ContextualMenu/ContextualMenu.less new file mode 100644 index 00000000..905994ca --- /dev/null +++ b/src/components/ContextualMenu/ContextualMenu.less @@ -0,0 +1,158 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Contextual Menu styles + + +// Menu wrapper. +.ms-ContextualMenu { + .ms-font-m; + .ms-u-normalize; + display: none; + + // Hidden by default, then trigger this state to show it. + &.is-open { + .drop-shadow; + background-color: @ms-color-white; + border: 1px solid @ms-color-neutralTertiaryAlt; + display: block; + list-style-type: none; + position: absolute; + width: 180px; + z-index: (@ms-zIndex-ContextualMenu + @ms-zIndex-middle); + } + + // Multi-select with headers + &.ms-ContextualMenu--multiselect { + padding-top: 10px; + } +} + + + +// Menu item. +.ms-ContextualMenu-item { + .ms-u-borderBox; + position: relative; + + // Dividers + &.ms-ContextualMenu-item--divider { + cursor: default; + display: block; + height: 1px; + margin: 4px 0; + background-color: @ms-color-neutralLight; + position: relative; + } + + // Headers + &.ms-ContextualMenu-item--header { + color: @ms-color-themePrimary; + font-size: @ms-font-size-s; + text-transform: uppercase; + height: 20px; + padding-left: 30px; + display: block; + position: relative; + padding-top: 6px; + } + + // List item links + .ms-ContextualMenu-link { + text-decoration: none; + color: @ms-color-neutralPrimary; + border: 1px solid transparent; + cursor: pointer; + display: block; + height: 40px; + line-height: 40px; + padding: 0 20px 0 20px; + position: relative; + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, &:last-child { + height: 39px; + } + + &:hover { + background-color: @ms-color-neutralLight; + color: @ms-color-black; + line-height: 40px; + } + + &:active { + background-color: @ms-color-neutralLight; + border: 1px solid @ms-color-themePrimary; + color: @ms-color-black; + } + + &.is-selected { + background-color: @ms-color-themeLight; + color: @ms-color-black; + line-height: 40px; + + .ms-font-weight-semibold; + + &:hover { + background-color: @ms-color-themeLight; + } + } + + &.is-disabled { + background: @ms-color-white; + color: @ms-color-neutralTertiary; + cursor: default; + line-height: 40px; + pointer-events: none; + + &:active { border-color: @ms-color-white; } + } + } +} + +// Right caret. +.ms-ContextualMenu-caretRight { + color: @ms-color-neutralSecondary; + font-size: 18px; + height: 39px; + line-height: 40px; + position: absolute; + top: 0; + right: 5px; + z-index: 1; + pointer-events: none; +} + +// Multiselect links +.ms-ContextualMenu--multiselect > +.ms-ContextualMenu-item > +.ms-ContextualMenu-link { + padding-left: 30px; + + // Multi-select checkmark + &.is-selected { + background-color: @ms-color-white; + + // Checkmark + &:after { + .ms-Icon; + color: @ms-color-neutralPrimary; + content: '\e041'; + font-size: @ms-font-size-s; + height: 39px; + line-height: 40px; + position: absolute; + left: 10px; + } + } +} + + + +// One contextual menu may appear as a submenu of another. In that case, +// the submenu should appear to the left of the menu item that triggered it. +.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu { + position: absolute; + top: -1px; + left: 178px; +} diff --git a/src/components/ContextualMenu/Jquery.ContextualMenu.js b/src/components/ContextualMenu/Jquery.ContextualMenu.js new file mode 100644 index 00000000..bd585b90 --- /dev/null +++ b/src/components/ContextualMenu/Jquery.ContextualMenu.js @@ -0,0 +1,57 @@ +/** + * Contextual Menu Plugin + */ +(function ($) { + $.fn.ContextualMenu = function () { + + /** Go through each nav bar we've been given. */ + return this.each(function () { + + var $contextualMenu = $(this); + + + // Set selected states. + $contextualMenu.on('click', '.ms-ContextualMenu-link:not(.is-disabled)', function(event) { + event.preventDefault(); + + // Check if multiselect - set selected states + if ( $contextualMenu.hasClass('ms-ContextualMenu--multiselect') ) { + + // If already selected, remove selection; if not, add selection + if ( $(this).hasClass('is-selected') ) { + $(this).removeClass('is-selected'); + } + else { + $(this).addClass('is-selected'); + } + + } + // All other contextual menu variants + else { + + // Deselect all of the items and close any menus. + $('.ms-ContextualMenu-link') + .removeClass('is-selected') + .siblings('.ms-ContextualMenu') + .removeClass('is-open'); + + // Select this item. + $(this).addClass('is-selected'); + + // If this item has a menu, open it. + if ($(this).hasClass('ms-ContextualMenu-link--hasMenu')) { + $(this).siblings('.ms-ContextualMenu:first').addClass('is-open'); + + // Open the menu without bubbling up the click event, + // which can cause the menu to close. + event.stopPropagation(); + } + + } + + + }); + + }); + }; +})(jQuery); diff --git a/src/components/DatePicker/DatePicker.html b/src/components/DatePicker/DatePicker.html new file mode 100644 index 00000000..5a407a66 --- /dev/null +++ b/src/components/DatePicker/DatePicker.html @@ -0,0 +1,44 @@ + + +
+
+ + + +
+
+ + +
+
+ Go to today +
+
+
+ + +
+
+
+
+ Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
+
+
+
+ + +
+
+
diff --git a/src/components/DatePicker/DatePicker.json b/src/components/DatePicker/DatePicker.json new file mode 100644 index 00000000..690fdf6f --- /dev/null +++ b/src/components/DatePicker/DatePicker.json @@ -0,0 +1,17 @@ +{ + "name": "DatePicker", + "notes": "This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration.", + "template": "DatePicker.html", + "class": "ms-DatePicker", + "dependencies": [ + "TextField", + "Label", + "Link" + ], + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/src/components/DatePicker/DatePicker.less b/src/components/DatePicker/DatePicker.less new file mode 100644 index 00000000..1042f0d2 --- /dev/null +++ b/src/components/DatePicker/DatePicker.less @@ -0,0 +1,524 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Date Picker styles + + +.ms-DatePicker { + .ms-u-normalize; + margin-bottom: 17px; + z-index: @ms-zIndex-DatePicker; + + .ms-TextField{ position: relative; } +} + +// Base wrapper for the date picker. +.ms-DatePicker-picker { + color: @ms-color-black; + font-size: @ms-font-size-m; + position: relative; + text-align: left; + z-index: @ms-zIndex-back; +} + +// Insert a calendar icon over the date field. +.ms-DatePicker-event { + color: @ms-color-neutralSecondary; + font-size: 21px; + line-height: 20px; + pointer-events: none; + position: absolute; + right: 5px; + bottom: 5px; + z-index: @ms-zIndex-front; +} + +// The holder is the only "scrollable" top-level container element. +.ms-DatePicker-holder { + -webkit-overflow-scrolling: touch; + .ms-u-borderBox; + background: @ms-color-white; + position: absolute; + min-width: 300px; + display: none; +} + + +// When the picker opens, reveal the content. +.ms-DatePicker-picker.ms-DatePicker-picker--opened .ms-DatePicker-holder { + .ms-u-slideDownIn10; + .ms-u-borderBox; + .drop-shadow; + border: 1px solid @ms-color-neutralLight; + display: block; +} + + +// The frame and wrap work together to ensure that +// clicks within the picker don’t reach the holder. +.ms-DatePicker-frame { + padding: 1px; +} +.ms-DatePicker-wrap { + margin: -1px; + padding: 9px; +} + + +// Wrapper containing the calendar view to pick a specific date. +.ms-DatePicker-dayPicker { + display: block; + margin-bottom: 30px; +} + + +// The header containing the month and year. +.ms-DatePicker-header { + height: 40px; + line-height: 44px; +} + + +// The month and year labels. +.ms-DatePicker-month, +.ms-DatePicker-year { + display: inline-block; + font-family: @ms-font-family-light; + font-size: 21px; + color: @ms-color-themePrimary; + margin-top: -1px; + + &:hover { + color: @ms-color-themeDark; + cursor: pointer; + } +} +.ms-DatePicker-month { + margin-left: 15px; +} +.ms-DatePicker-year { + margin-left: 5px; +} + + +// The calendar table of dates. +.ms-DatePicker-table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: inherit; + + td { + margin: 0; + padding: 0; + + &:hover { outline: 1px solid transparent; } + } +} + + +// The days on the calendar. +.ms-DatePicker-day, .ms-DatePicker-weekday { + width: 40px; + height: 40px; + padding: 0; + line-height: 40px; + font-family: @ms-font-family-regular; + font-size: 15px; + font-weight: normal; + color: @ms-color-neutralPrimary; +} + + +// Today. +.ms-DatePicker-day--today { + position: relative; + background-color: @ms-color-themeLight; +} + + +// Disabled day. +.ms-DatePicker-day--disabled:before { + border-top-color: @ms-color-neutralTertiary; +} + + +// Out of focus days. +.ms-DatePicker-day--outfocus { + color: @ms-color-neutralTertiary; + font-family: @ms-font-family-regular; +} + + +// Hovered date picker items. +.ms-DatePicker-day--infocus:hover, +.ms-DatePicker-day--outfocus:hover { + cursor: pointer; + color: @ms-color-black; + background: @ms-color-neutralLight; +} + + +// Highlighted and hovered/focused dates. +.ms-DatePicker-day--highlighted:hover, +.ms-DatePicker-picker--focused .ms-DatePicker-day--highlighted { + cursor: pointer; + color: @ms-color-white; + background: @ms-color-themePrimary; +} + + +// Disabled and highlighted dates. +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled, +.ms-DatePicker-day--highlighted.ms-DatePicker-day--disabled:hover { + background: @ms-color-neutralTertiary; +} + + +// Month and year pickers, hidden on small screens by default. +.ms-DatePicker-monthPicker, +.ms-DatePicker-yearPicker { + display: none; +} + + +// Month and year previous/next components. +.ms-DatePicker-monthComponents { + position: absolute; + top: 9px; + right: 9px; + left: 9px; +} +.ms-DatePicker-yearComponents, +.ms-DatePicker-decadeComponents { + position: absolute; + right: 10px; +} +.ms-DatePicker-prevMonth, +.ms-DatePicker-nextMonth, +.ms-DatePicker-prevYear, +.ms-DatePicker-nextYear, +.ms-DatePicker-prevDecade, +.ms-DatePicker-nextDecade { + width: 40px; + height: 40px; + display: block; + float: right; + margin-left: 10px; + text-align: center; + line-height: 40px; + text-align: center; + font-size: 21px; + color: @ms-color-neutralSecondary; + position: relative; + top: 3px; + + &:hover { + color: @ms-color-neutralDark; + cursor: pointer; + outline: 1px solid transparent; + } +} + +// Without modifying the Pickadate JS, this transparent +// button is necessary to toggle the month view. +.ms-DatePicker-headerToggleView { + height: 40px; + left: 0px; + position: absolute; + top: 0px; + width: 180px; + z-index: @ms-zIndex-middle; + cursor: pointer; +} + + +// Text showing the currently-selected year. +.ms-DatePicker-currentYear, +.ms-DatePicker-currentDecade { + display: block; + font-weight: normal; + font-family: @ms-font-family-semilight; + font-size: 21px; + height: 40px; + line-height: 42px; + margin-left: 15px; +} + +// The current year is blue and actionable. +.ms-DatePicker-currentYear { + color: @ms-color-themePrimary; + + &:hover { + color: @ms-color-themeDark; + cursor: pointer; + } +} + + +// A grid of month or year options, which pushes them over +// five pixels for horizontal centering and moves them down. +.ms-DatePicker-optionGrid { + position: relative; + height: 210px; + width: 280px; + margin: 10px 0 30px 5px; +} + +// Button to select a different month. +.ms-DatePicker-monthOption, +.ms-DatePicker-yearOption { + background-color: @ms-color-neutralLighter; + width: 60px; + height: 60px; + line-height: 60px; + cursor: pointer; + float: left; + margin: 0 10px 10px 0; + font-weight: normal; + font-family: @ms-font-family-regular; + font-size: 13px; + color: @ms-color-neutralPrimary; + text-align: center; + + &:hover { + background-color: @ms-color-neutralTertiaryAlt; + outline: 1px solid transparent; + } + + &.is-highlighted { + background-color: @ms-color-neutralPrimary; + color: @ms-color-white; + } +} + + +// Button to navigate to the current date. +.ms-DatePicker-goToday { + bottom: 9px; + color: @ms-color-themePrimary; + cursor: pointer; + font-family: @ms-font-family-semilight; + font-size: 13px; + height: 30px; + line-height: 30px; + padding: 0 10px; + position: absolute; + right: 9px; + + &:hover { + outline: 1px solid transparent; + } +} + +// State: The picker is showing the month components. +.ms-DatePicker.is-pickingMonths { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Show the month picking components. + .ms-DatePicker-monthPicker { + display: block; + } + +} + +// State: The picker is showing the year components. +.ms-DatePicker.is-pickingYears { + + // Hide the day picking components. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: none; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + +} + + + + +// 460px and up. +// +// On screens that can fit it, we show the month picker next to the day picker at all times. +@media (min-width: 460px) { + + .ms-DatePicker-holder { + width: 440px; + } + + + // Update header text styles. + .ms-DatePicker-month, + .ms-DatePicker-year { + font-family: @ms-font-family-semilight; + } + + .ms-DatePicker-header { + height: 30px; + line-height: 28px; + } + + // Contains the calendar view for picking a day. + .ms-DatePicker-dayPicker { + .ms-u-borderBox; + border-right: 1px solid @ms-color-neutralLight; + width: 220px; + } + + // Show the month picker. + .ms-DatePicker-monthPicker { + display: block; + } + + + // Swap margin for padding so that the border extends the full height. + .ms-DatePicker-dayPicker { + margin: -10px 0; + padding: 10px 0; + } + + // Style the the month and year pickers. + .ms-DatePicker-monthPicker, + .ms-DatePicker-yearPicker { + top: 9px; + left: 238px; + position: absolute; + } + + + .ms-DatePicker-optionGrid { + width: 200px; + height: auto; + margin: 10px 0 0 0; + } + + // Size the month components to the day picker's new width + .ms-DatePicker-monthComponents { + width: 210px; + } + + // Size and position of the month and year labels. + .ms-DatePicker-month { + margin-left: 12px; + } + .ms-DatePicker-month, + .ms-DatePicker-year { + font-size: 17px; + color: @ms-color-neutralPrimary; + + &:hover { + color: @ms-color-neutralPrimary; + cursor: default; + } + } + + + // Calendar day cells are smaller. + .ms-DatePicker-day, + .ms-DatePicker-weekday { + width: 30px; + height: 30px; + line-height: 30px; + font-family: @ms-font-family-semibold; + font-size: 12px; + } + + + // Reduce the size of arrows to change month/year. + .ms-DatePicker-prevMonth, + .ms-DatePicker-nextMonth, + .ms-DatePicker-prevYear, + .ms-DatePicker-nextYear, + .ms-DatePicker-prevDecade, + .ms-DatePicker-nextDecade { + font-size: 17px; + width: 30px; + height: 30px; + line-height: 29px; + } + + + // This component is only used on small displays. + .ms-DatePicker-toggleMonthView { + display: none; + } + + + // Position the current year and decade labels. + .ms-DatePicker-currentYear, + .ms-DatePicker-currentDecade { + font-size: 17px; + margin: 0; + height: 30px; + line-height: 26px; + padding: 0 10px; + display: inline-block; + } + + + // Reduce the size of the month buttons. + .ms-DatePicker-monthOption, + .ms-DatePicker-yearOption { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 12px; + margin: 0 10px 10px 0; + + &:hover { + outline: 1px solid transparent; + } + } + + + // Position the "Go to today" button below the month picker. + .ms-DatePicker-goToday { + .ms-u-borderBox; + font-size: 12px; + height: 30px; + line-height: 30px; + padding: 0 10px; + right: 10px; + text-align: right; + top: 199px; + width: 210px; + } + + // State: The picker is showing the year components. + // On larger screens the calendar will remain and the years + // will replace the months. + .ms-DatePicker.is-pickingYears { + + // On large screens, we need to keep the day picker + // and month components in view. + .ms-DatePicker-dayPicker, + .ms-DatePicker-monthComponents { + display: block; + } + + // Hide the month picking components. + .ms-DatePicker-monthPicker { + display: none; + } + + // Show the year picking components. + .ms-DatePicker-yearPicker { + display: block; + } + } +} diff --git a/src/components/DatePicker/Jquery.DatePicker.js b/src/components/DatePicker/Jquery.DatePicker.js new file mode 100644 index 00000000..0e90bb60 --- /dev/null +++ b/src/components/DatePicker/Jquery.DatePicker.js @@ -0,0 +1 @@ +!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,h,k){function l(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",w.component.nodes(r.open),t.box),t.wrap),t.frame),t.holder)}function m(){u.data(g,w).addClass(t.input).val(u.data("value")?w.get("select",s.format):f.value).on("focus."+r.id+" click."+r.id,p),s.editable||u.on("keydown."+r.id,function(a){var b=a.keyCode,c=/^(8|46)$/.test(b);return 27==b?(w.close(),!1):void((32==b||c||!r.open&&w.component.key[b])&&(a.preventDefault(),a.stopPropagation(),c?w.clear().close():w.open()))}),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"+(w._hidden?" "+w._hidden.id:"")})}function n(){w.$root.on({focusin:function(a){w.$root.removeClass(t.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=w.$root.children()[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is(":input")||"OPTION"==c.nodeName||(b.preventDefault(),f.focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(t.navDisabled)||b.hasClass(t.disabled),e=document.activeElement;e=e&&(e.type||e.href)&&e,(d||e&&!a.contains(w.$root[0],e))&&f.focus(),!d&&c.nav?w.set("highlight",w.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?w.set("select",c.pick).close(!0):c.clear?w.clear().close(!0):c.close&&w.close(!0)}),e(w.$root[0],"hidden",!0)}function o(){var b;s.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof s.hiddenPrefix?s.hiddenPrefix:"","string"==typeof s.hiddenSuffix?s.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),w._hidden=a('")[0],u.on("change."+r.id,function(){w._hidden.value=f.value?w.get("select",s.formatSubmit):""}).after(w._hidden)}function p(a){a.stopPropagation(),"focus"==a.type&&w.$root.addClass(t.focused),w.open()}if(!f)return b;var q=!1,r={id:f.id||"P"+Math.abs(~~(Math.random()*new Date))},s=h?a.extend(!0,{},h.defaults,k):k||{},t=a.extend({},b.klasses(),s.klass),u=a(f),v=function(){return this.start()},w=v.prototype={constructor:v,$node:u,start:function(){return r&&r.start?w:(r.methods={},r.start=!0,r.open=!1,r.type=f.type,f.autofocus=f==document.activeElement,f.readOnly=!s.editable,f.id=f.id||r.id,"text"!=f.type&&(f.type="text"),w.component=new h(w,s),w.$root=a(b._.node("div",l(),t.picker,'id="'+f.id+'_root"')),n(),s.formatSubmit&&o(),m(),s.container?a(s.container).append(w.$root):u.after(w.$root),w.on({start:w.component.onStart,render:w.component.onRender,stop:w.component.onStop,open:w.component.onOpen,close:w.component.onClose,set:w.component.onSet}).on({start:s.onStart,render:s.onRender,stop:s.onStop,open:s.onOpen,close:s.onClose,set:s.onSet}),q=c(w.$root.children()[0]),f.autofocus&&w.open(),w.trigger("start").trigger("render"))},render:function(a){return a?w.$root.html(l()):w.$root.find("."+t.box).html(w.component.nodes(r.open)),w.trigger("render")},stop:function(){return r.start?(w.close(),w._hidden&&w._hidden.parentNode.removeChild(w._hidden),w.$root.remove(),u.removeClass(t.input).removeData(g),setTimeout(function(){u.off("."+r.id)},0),f.type=r.type,f.readOnly=!1,w.trigger("stop"),r.methods={},r.start=!1,w):w},open:function(c){return r.open?w:(u.addClass(t.active),e(f,"expanded",!0),setTimeout(function(){w.$root.addClass(t.opened),e(w.$root[0],"hidden",!1)},0),c!==!1&&(r.open=!0,q&&j.css("overflow","hidden").css("padding-right","+="+d()),u.trigger("focus"),i.on("click."+r.id+" focusin."+r.id,function(a){var b=a.target;b!=f&&b!=document&&3!=a.which&&w.close(b===w.$root.children()[0])}).on("keydown."+r.id,function(c){var d=c.keyCode,e=w.component.key[d],g=c.target;27==d?w.close(!0):g!=f||!e&&13!=d?a.contains(w.$root[0],g)&&13==d&&(c.preventDefault(),g.click()):(c.preventDefault(),e?b._.trigger(w.component.key.go,w,[b._.trigger(e)]):w.$root.find("."+t.highlighted).hasClass(t.disabled)||w.set("select",w.component.item.highlight).close())})),w.trigger("open"))},close:function(a){return a&&(u.off("focus."+r.id).trigger("focus"),setTimeout(function(){u.on("focus."+r.id,p)},0)),u.removeClass(t.active),e(f,"expanded",!1),setTimeout(function(){w.$root.removeClass(t.opened+" "+t.focused),e(w.$root[0],"hidden",!0)},0),r.open?(r.open=!1,q&&j.css("overflow","").css("padding-right","-="+d()),i.off("."+r.id),w.trigger("close")):w},clear:function(a){return w.set("clear",null,a)},set:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(d=g&&a.isPlainObject(c)?c:d||{},b){g||(h[b]=c);for(e in h)f=h[e],e in w.component.item&&(void 0===f&&(f=null),w.component.set(e,f,d)),("select"==e||"clear"==e)&&u.val("clear"==e?"":w.get(e,s.format)).trigger("change");w.render()}return d.muted?w:w.trigger("set",h)},get:function(a,c){if(a=a||"value",null!=r[a])return r[a];if("value"==a)return f.value;if(a in w.component.item){if("string"==typeof c){var d=w.component.get(a);return d?b._.trigger(w.component.formats.toString,w.component,[c,d]):""}return w.component.get(a)}},on:function(b,c,d){var e,f,g=a.isPlainObject(b),h=g?b:{};if(b){g||(h[b]=c);for(e in h)f=h[e],d&&(e="_"+e),r.methods[e]=r.methods[e]||[],r.methods[e].push(f)}return w},off:function(){var a,b,c=arguments;for(a=0,namesCount=c.length;namesCount>a;a+=1)b=c[a],b in r.methods&&delete r.methods[b];return w},trigger:function(a,c){var d=function(a){var d=r.methods[a];d&&d.map(function(a){b._.trigger(a,w,[c])})};return d("_"+a),d(a),w}};return new v}function c(a){var b,c="position";return a.currentStyle?b=a.currentStyle[c]:window.getComputedStyle&&(b=getComputedStyle(a)[c]),"fixed"==b}function d(){if(j.height()<=h.height())return 0;var b=a('
').appendTo("body"),c=b[0].offsetWidth;b.css("overflow","scroll");var d=a('
').appendTo(b),e=d[0].offsetWidth;return b.remove(),c-e}function e(b,c,d){if(a.isPlainObject(c))for(var e in c)f(b,e,c[e]);else f(b,c,d)}function f(a,b,c){a.setAttribute(("role"==b?"":"aria-")+b,c)}function g(b,c){a.isPlainObject(b)||(b={attribute:c}),c="";for(var d in b){var e=("role"==d?"":"aria-")+d,f=b[d];c+=null==f?"":e+'="'+b[d]+'"'}return c}var h=a(window),i=a(document),j=a(document.documentElement);return b.klasses=function(a){return a=a||"picker",{picker:a,opened:a+"--opened",focused:a+"--focused",input:a+"__input",active:a+"__input--active",holder:a+"__holder",frame:a+"__frame",wrap:a+"__wrap",box:a+"__box"}},b._={group:function(a){for(var c,d="",e=b._.trigger(a.min,a);e<=b._.trigger(a.max,a,[e]);e+=a.i)c=b._.trigger(a.item,a,[e]),d+=b._.node(a.node,c[0],c[1],c[2]);return d},node:function(b,c,d,e){return c?(c=a.isArray(c)?c.join(""):c,d=d?' class="'+d+'"':"",e=e?" "+e:"","<"+b+d+e+">"+c+""):""},lead:function(a){return(10>a?"0":"")+a},trigger:function(a,b,c){return"function"==typeof a?a.apply(b,c||[]):a},digits:function(a){return/\d/.test(a[1])?2:1},isDate:function(a){return{}.toString.call(a).indexOf("Date")>-1&&this.isInteger(a.getUTCDate())},isInteger:function(a){return{}.toString.call(a).indexOf("Number")>-1&&a%1===0},ariaAttr:g},b.extend=function(c,d){a.fn[c]=function(e,f){var g=this.data(c);return"picker"==e?g:g&&"string"==typeof e?b._.trigger(g[e],g,[f]):this.each(function(){var f=a(this);f.data(c)||new b(this,c,d,e)})},a.fn[c].defaults=d.defaults},b}),function(a){"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):a(Picker,jQuery)}(function(a,b){function c(a,b){var c=this,d=a.$node[0],e=d.value,f=a.$node.data("value"),g=f||e,h=f?b.formatSubmit:b.format,i=function(){return d.currentStyle?"rtl"==d.currentStyle.direction:"rtl"==getComputedStyle(a.$root[0]).direction};c.settings=b,c.$node=a.$node,c.queue={min:"measure create",max:"measure create",now:"now create",select:"parse create validate",highlight:"parse navigate create validate",view:"parse create validate viewset",disable:"deactivate",enable:"activate"},c.item={},c.item.clear=null,c.item.disable=(b.disable||[]).slice(0),c.item.enable=-function(a){return a[0]===!0?a.shift():-1}(c.item.disable),c.set("min",b.min).set("max",b.max).set("now"),g?c.set("select",g,{format:h}):c.set("select",null).set("highlight",c.item.now),c.key={40:7,38:-7,39:function(){return i()?-1:1},37:function(){return i()?1:-1},go:function(a){var b=c.item.highlight,d=new Date(Date.UTC(b.year,b.month,b.date+a));c.set("highlight",d,{interval:a}),this.render()}},a.on("render",function(){a.$root.find("."+b.klass.selectMonth).on("change",function(){var c=this.value;c&&(a.set("highlight",[a.get("view").year,c,a.get("highlight").date]),a.$root.find("."+b.klass.selectMonth).trigger("focus"))}),a.$root.find("."+b.klass.selectYear).on("change",function(){var c=this.value;c&&(a.set("highlight",[c,a.get("view").month,a.get("highlight").date]),a.$root.find("."+b.klass.selectYear).trigger("focus"))})},1).on("open",function(){var d="";c.disabled(c.get("now"))&&(d=":not(."+b.klass.buttonToday+")"),a.$root.find("button"+d+", select").attr("disabled",!1)},1).on("close",function(){a.$root.find("button, select").attr("disabled",!0)},1)}var d=7,e=6,f=a._;c.prototype.set=function(a,b,c){var d=this,e=d.item;return null===b?("clear"==a&&(a="select"),e[a]=b,d):(e["enable"==a?"disable":"flip"==a?"enable":a]=d.queue[a].split(" ").map(function(e){return b=d[e](a,b,c)}).pop(),"select"==a?d.set("highlight",e.select,c):"highlight"==a?d.set("view",e.highlight,c):a.match(/^(flip|min|max|disable|enable)$/)&&(e.select&&d.disabled(e.select)&&d.set("select",e.select,c),e.highlight&&d.disabled(e.highlight)&&d.set("highlight",e.highlight,c)),d)},c.prototype.get=function(a){return this.item[a]},c.prototype.create=function(a,c,d){var e,g=this;return c=void 0===c?a:c,c==-1/0||1/0==c?e=c:b.isPlainObject(c)&&f.isInteger(c.pick)?c=c.obj:b.isArray(c)?(c=new Date(Date.UTC(c[0],c[1],c[2])),c=f.isDate(c)?c:g.create().obj):c=f.isInteger(c)?g.normalize(new Date(c),d):f.isDate(c)?g.normalize(c,d):g.now(a,c,d),{year:e||c.getUTCFullYear(),month:e||c.getUTCMonth(),date:e||c.getUTCDate(),day:e||c.getUTCDay(),obj:e||c,pick:e||c.getTime()}},c.prototype.createRange=function(a,c){var d=this,e=function(a){return a===!0||b.isArray(a)||f.isDate(a)?d.create(a):a};return f.isInteger(a)||(a=e(a)),f.isInteger(c)||(c=e(c)),f.isInteger(a)&&b.isPlainObject(c)?a=[c.year,c.month,c.date+a]:f.isInteger(c)&&b.isPlainObject(a)&&(c=[a.year,a.month,a.date+c]),{from:e(a),to:e(c)}},c.prototype.withinRange=function(a,b){return a=this.createRange(a.from,a.to),b.pick>=a.from.pick&&b.pick<=a.to.pick},c.prototype.overlapRanges=function(a,b){var c=this;return a=c.createRange(a.from,a.to),b=c.createRange(b.from,b.to),c.withinRange(a,b.from)||c.withinRange(a,b.to)||c.withinRange(b,a.from)||c.withinRange(b,a.to)},c.prototype.now=function(a,b,c){return b=new Date,c&&c.rel&&b.setUTCDate(b.getUTCDate()+c.rel),this.normalize(b,c)},c.prototype.navigate=function(a,c,d){var e,f,g,h,i=b.isArray(c),j=b.isPlainObject(c),k=this.item.view;if(i||j){for(j?(f=c.year,g=c.month,h=c.date):(f=+c[0],g=+c[1],h=+c[2]),d&&d.nav&&k&&k.month!==g&&(f=k.year,g=k.month),e=new Date(Date.UTC(f,g+(d&&d.nav?d.nav:0),1)),f=e.getUTCFullYear(),g=e.getUTCMonth();new Date(Date.UTC(f,g,h)).getUTCMonth()!==g;)h-=1;c=[f,g,h]}return c},c.prototype.normalize=function(a){return a.setUTCHours(0,0,0,0),a},c.prototype.measure=function(a,b){var c=this;return b?"string"==typeof b?b=c.parse(a,b):f.isInteger(b)&&(b=c.now(a,b,{rel:b})):b="min"==a?-1/0:1/0,b},c.prototype.viewset=function(a,b){return this.create([b.year,b.month,1])},c.prototype.validate=function(a,c,d){var e,g,h,i,j=this,k=c,l=d&&d.interval?d.interval:1,m=-1===j.item.enable,n=j.item.min,o=j.item.max,p=m&&j.item.disable.filter(function(a){if(b.isArray(a)){var d=j.create(a).pick;dc.pick&&(g=!0)}return f.isInteger(a)}).length;if((!d||!d.nav)&&(!m&&j.disabled(c)||m&&j.disabled(c)&&(p||e||g)||!m&&(c.pick<=n.pick||c.pick>=o.pick)))for(m&&!p&&(!g&&l>0||!e&&0>l)&&(l*=-1);j.disabled(c)&&(Math.abs(l)>1&&(c.monthk.month)&&(c=k,l=l>0?1:-1),c.pick<=n.pick?(h=!0,l=1,c=j.create([n.year,n.month,n.date+(c.pick===n.pick?0:-1)])):c.pick>=o.pick&&(i=!0,l=-1,c=j.create([o.year,o.month,o.date+(c.pick===o.pick?0:1)])),!h||!i);)c=j.create([c.year,c.month,c.date+l]);return c},c.prototype.disabled=function(a){var c=this,d=c.item.disable.filter(function(d){return f.isInteger(d)?a.day===(c.settings.firstDay?d:d-1)%7:b.isArray(d)||f.isDate(d)?a.pick===c.create(d).pick:b.isPlainObject(d)?c.withinRange(d,a):void 0});return d=d.length&&!d.filter(function(a){return b.isArray(a)&&"inverted"==a[3]||b.isPlainObject(a)&&a.inverted}).length,-1===c.item.enable?!d:d||a.pickc.item.max.pick},c.prototype.parse=function(a,b,c){var d=this,e={};return b&&"string"==typeof b?(c&&c.format||(c=c||{},c.format=d.settings.format),d.formats.toArray(c.format).map(function(a){var c=d.formats[a],g=c?f.trigger(c,d,[b,e]):a.replace(/^!/,"").length;c&&(e[a]=b.substr(0,g)),b=b.substr(g)}),[e.yyyy||e.yy,+(e.mm||e.m)-1,e.dd||e.d]):b},c.prototype.formats=function(){function a(a,b,c){var d=a.match(/\w+/)[0];return c.mm||c.m||(c.m=b.indexOf(d)+1),d.length}function b(a){return a.match(/\w+/)[0].length}return{d:function(a,b){return a?f.digits(a):b.date},dd:function(a,b){return a?2:f.lead(b.date)},ddd:function(a,c){return a?b(a):this.settings.weekdaysShort[c.day]},dddd:function(a,c){return a?b(a):this.settings.weekdaysFull[c.day]},m:function(a,b){return a?f.digits(a):b.month+1},mm:function(a,b){return a?2:f.lead(b.month+1)},mmm:function(b,c){var d=this.settings.monthsShort;return b?a(b,d,c):d[c.month]},mmmm:function(b,c){var d=this.settings.monthsFull;return b?a(b,d,c):d[c.month]},yy:function(a,b){return a?2:(""+b.year).slice(2)},yyyy:function(a,b){return a?4:b.year},toArray:function(a){return a.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g)},toString:function(a,b){var c=this;return c.formats.toArray(a).map(function(a){return f.trigger(c.formats[a],c,[0,b])||a.replace(/^!/,"")}).join("")}}}(),c.prototype.isDateExact=function(a,c){var d=this;return f.isInteger(a)&&f.isInteger(c)||"boolean"==typeof a&&"boolean"==typeof c?a===c:(f.isDate(a)||b.isArray(a))&&(f.isDate(c)||b.isArray(c))?d.create(a).pick===d.create(c).pick:b.isPlainObject(a)&&b.isPlainObject(c)?d.isDateExact(a.from,c.from)&&d.isDateExact(a.to,c.to):!1},c.prototype.isDateOverlap=function(a,c){var d=this,e=d.settings.firstDay?1:0;return f.isInteger(a)&&(f.isDate(c)||b.isArray(c))?(a=a%7+e,a===d.create(c).day+1):f.isInteger(c)&&(f.isDate(a)||b.isArray(a))?(c=c%7+e,c===d.create(a).day+1):b.isPlainObject(a)&&b.isPlainObject(c)?d.overlapRanges(a,c):!1},c.prototype.flipEnable=function(a){var b=this.item;b.enable=a||(-1==b.enable?1:-1)},c.prototype.deactivate=function(a,c){var d=this,e=d.item.disable.slice(0);return"flip"==c?d.flipEnable():c===!1?(d.flipEnable(1),e=[]):c===!0?(d.flipEnable(-1),e=[]):c.map(function(a){for(var c,g=0;gi;i+=1){if(h=e[i],d.isDateExact(h,a)){c=e[i]=null,j=!0;break}if(d.isDateOverlap(h,a)){b.isPlainObject(a)?(a.inverted=!0,c=a):b.isArray(a)?(c=a,c[3]||c.push("inverted")):f.isDate(a)&&(c=[a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),"inverted"]);break}}if(c)for(i=0;g>i;i+=1)if(d.isDateExact(e[i],a)){e[i]=null;break}if(j)for(i=0;g>i;i+=1)if(d.isDateOverlap(e[i],a)){e[i]=null;break}c&&e.push(c)}),e.filter(function(a){return null!=a})},c.prototype.nodes=function(a){var b=this,c=b.settings,g=b.item,h=g.now,i=g.select,j=g.highlight,k=g.view,l=g.disable,m=g.min,n=g.max,o=function(a,b){return c.firstDay&&(a.push(a.shift()),b.push(b.shift())),f.node("thead",f.node("tr",f.group({min:0,max:d-1,i:1,node:"th",item:function(d){return[a[d],c.klass.weekdays,'scope=col title="'+b[d]+'"']}})))}((c.showWeekdaysFull?c.weekdaysFull:c.weekdaysShort).slice(0),c.weekdaysFull.slice(0)),p=function(a){return f.node("div"," ",c.klass["nav"+(a?"Next":"Prev")]+(a&&k.year>=n.year&&k.month>=n.month||!a&&k.year<=m.year&&k.month<=m.month?" "+c.klass.navDisabled:""),"data-nav="+(a||-1)+" "+f.ariaAttr({role:"button",components:b.$node[0].id+"_table"})+' title="'+(a?c.labelMonthNext:c.labelMonthPrev)+'"')},q=function(){var d=c.showMonthsShort?c.monthsShort:c.monthsFull;return c.selectMonths?f.node("select",f.group({min:0,max:11,i:1,node:"option",item:function(a){return[d[a],0,"value="+a+(k.month==a?" selected":"")+(k.year==m.year&&an.month?" disabled":"")]}}),c.klass.selectMonth,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelMonthSelect+'"'):f.node("div",d[k.month],c.klass.month)},r=function(){var d=k.year,e=c.selectYears===!0?5:~~(c.selectYears/2);if(e){var g=m.year,h=n.year,i=d-e,j=d+e;if(g>i&&(j+=g-i,i=g),j>h){var l=i-g,o=j-h;i-=l>o?o:l,j=h}return f.node("select",f.group({min:i,max:j,i:1,node:"option",item:function(a){return[a,0,"value="+a+(d==a?" selected":"")]}}),c.klass.selectYear,(a?"":"disabled")+" "+f.ariaAttr({components:b.$node[0].id+"_table"})+' title="'+c.labelYearSelect+'"')}return f.node("div",d,c.klass.year)};return f.node("div",(c.selectYears?r()+q():q()+r())+p()+p(1),c.klass.header)+f.node("table",o+f.node("tbody",f.group({min:0,max:e-1,i:1,node:"tr",item:function(a){var e=c.firstDay&&0===b.create([k.year,k.month,1]).day?-7:0;return[f.group({min:d*a-k.day+e+1,max:function(){return this.min+d-1},i:1,node:"td",item:function(a){a=b.create([k.year,k.month,a+(c.firstDay?1:0)]);var d=i&&i.pick==a.pick,e=j&&j.pick==a.pick,g=l&&b.disabled(a)||a.pickn.pick;return[f.node("div",a.date,function(b){return b.push(k.month==a.month?c.klass.infocus:c.klass.outfocus),h.pick==a.pick&&b.push(c.klass.now),d&&b.push(c.klass.selected),e&&b.push(c.klass.highlighted),g&&b.push(c.klass.disabled),b.join(" ")}([c.klass.day]),"data-pick="+a.pick+" "+f.ariaAttr({role:"gridcell",selected:d&&b.$node.val()===f.trigger(b.formats.toString,b,[c.format,a])?!0:null,activedescendant:e?!0:null,disabled:g?!0:null})),"",f.ariaAttr({role:"presentation"})]}})]}})),c.klass.table,'id="'+b.$node[0].id+'_table" '+f.ariaAttr({role:"grid",components:b.$node[0].id,readonly:!0}))+f.node("div",f.node("button",c.today,c.klass.buttonToday,"type=button data-pick="+h.pick+(a&&!b.disabled(h)?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.clear,c.klass.buttonClear,"type=button data-clear=1"+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id}))+f.node("button",c.close,c.klass.buttonClose,"type=button data-close=true "+(a?"":" disabled")+" "+f.ariaAttr({components:b.$node[0].id})),c.klass.footer)},c.defaults=function(a){return{labelMonthNext:"Next month",labelMonthPrev:"Previous month",labelMonthSelect:"Select a month",labelYearSelect:"Select a year",monthsFull:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdaysFull:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],today:"Today",clear:"Clear",close:"Close",format:"d mmmm, yyyy",klass:{table:a+"table",header:a+"header",navPrev:a+"nav--prev",navNext:a+"nav--next",navDisabled:a+"nav--disabled",month:a+"month",year:a+"year",selectMonth:a+"select--month",selectYear:a+"select--year",weekdays:a+"weekday",day:a+"day",disabled:a+"day--disabled",selected:a+"day--selected",highlighted:a+"day--highlighted",now:a+"day--today",infocus:a+"day--infocus",outfocus:a+"day--outfocus",footer:a+"footer",buttonClear:a+"button--clear",buttonToday:a+"button--today",buttonClose:a+"button--close"}}}(a.klasses().picker+"__"),a.extend("pickadate",c)}),function(a){function b(b){var e=b.find(".ms-DatePicker-monthComponents"),f=b.find(".ms-DatePicker-goToday"),g=(b.find(".ms-DatePicker-dayPicker"),b.find(".ms-DatePicker-monthPicker")),h=b.find(".ms-DatePicker-yearPicker"),i=b.find(".ms-DatePicker-wrap"),j=b.find(".ms-TextField-field").pickadate("picker");e.appendTo(i),f.appendTo(i),g.appendTo(i),h.appendTo(i),d(b),e.on("click",".js-prevMonth",function(a){a.preventDefault();var b=j.get("highlight").month-1;c(j,null,b,null)}),e.on("click",".js-nextMonth",function(a){a.preventDefault();var b=j.get("highlight").month+1;c(j,null,b,null)}),g.on("click",".js-prevYear",function(a){a.preventDefault();var b=j.get("highlight").year-1;c(j,b,null,null)}),g.on("click",".js-nextYear",function(a){a.preventDefault();var b=j.get("highlight").year+1;c(j,b,null,null)}),h.on("click",".js-prevDecade",function(a){a.preventDefault();var b=j.get("highlight").year-10;c(j,b,null,null)}),h.on("click",".js-nextDecade",function(a){a.preventDefault();var b=j.get("highlight").year+10;c(j,b,null,null)}),f.click(function(a){a.preventDefault();var c=new Date;j.set("select",[c.getFullYear(),c.getMonth(),c.getDate()]),b.removeClass("is-pickingMonths").removeClass("is-pickingYears")}),g.on("click",".js-changeDate",function(d){d.preventDefault();var e=a(this).attr("data-year"),f=a(this).attr("data-month"),g=a(this).attr("data-day");c(j,e,f,g),b.hasClass("is-pickingMonths")&&b.removeClass("is-pickingMonths")}),h.on("click",".js-changeDate",function(d){d.preventDefault(),console.log("about to change the year!");var e=a(this).attr("data-year"),f=a(this).attr("data-month"),g=a(this).attr("data-day");c(j,e,f,g),b.hasClass("is-pickingYears")&&b.removeClass("is-pickingYears")}),g.on("click",".js-showDayPicker",function(){b.removeClass("is-pickingMonths"),b.removeClass("is-pickingYears")}),e.on("click",".js-showMonthPicker",function(){b.toggleClass("is-pickingMonths")}),g.on("click",".js-showYearPicker",function(){b.toggleClass("is-pickingYears")})}function c(a,b,c,d){null==b&&(b=a.get("highlight").year),null==c&&(c=a.get("highlight").month),null==d&&(d=a.get("highlight").date),a.set("highlight",[b,c,d])}function d(a){var b=a.find(".ms-DatePicker-monthPicker"),c=a.find(".ms-DatePicker-yearPicker"),d=(a.find(".ms-DatePicker-wrap"),a.find(".ms-TextField-field").pickadate("picker"));b.find(".ms-DatePicker-currentYear").text(d.get("view").year),b.find(".ms-DatePicker-monthOption").removeClass("is-highlighted"),b.find('.ms-DatePicker-monthOption[data-month="'+d.get("highlight").month+'"]').addClass("is-highlighted"),c.find(".ms-DatePicker-currentDecade").remove(),c.find(".ms-DatePicker-optionGrid").remove();var e=d.get("highlight").year-11,f=e+" - "+(e+11),g='
'+f+"
";for(g+='
',year=e;e+12>year;year++)g+=''+year+"";g+="
",c.append(g),c.find(".ms-DatePicker-yearOption").removeClass("is-highlighted"),c.find('.ms-DatePicker-yearOption[data-year="'+d.get("highlight").year+'"]').addClass("is-highlighted")}function e(b){a("html, body").animate({scrollTop:b.offset().top},367)}a.fn.DatePicker=function(){return this.each(function(){var c=a(this),f=c.find(".ms-TextField-field").pickadate({weekdaysShort:["S","M","T","W","T","F","S"],today:"",clear:"",close:"",onStart:function(){b(c)},klass:{input:"ms-DatePicker-input",active:"ms-DatePicker-input--active",picker:"ms-DatePicker-picker",opened:"ms-DatePicker-picker--opened",focused:"ms-DatePicker-picker--focused",holder:"ms-DatePicker-holder",frame:"ms-DatePicker-frame",wrap:"ms-DatePicker-wrap",box:"ms-DatePicker-dayPicker",header:"ms-DatePicker-header",month:"ms-DatePicker-month",year:"ms-DatePicker-year",table:"ms-DatePicker-table",weekdays:"ms-DatePicker-weekday",day:"ms-DatePicker-day",disabled:"ms-DatePicker-day--disabled",selected:"ms-DatePicker-day--selected",highlighted:"ms-DatePicker-day--highlighted",now:"ms-DatePicker-day--today",infocus:"ms-DatePicker-day--infocus",outfocus:"ms-DatePicker-day--outfocus"}}),g=f.pickadate("picker");g.on({render:function(){d(c)},open:function(){e(c)}})})}}(jQuery); diff --git a/src/components/Dialog/Dialog.Default.html b/src/components/Dialog/Dialog.Default.html new file mode 100644 index 00000000..565c4dd4 --- /dev/null +++ b/src/components/Dialog/Dialog.Default.html @@ -0,0 +1,34 @@ +
+
+
+ +
+

All emails together

+
+
+
+

Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+
diff --git a/src/components/Dialog/Dialog.LgHeader.html b/src/components/Dialog/Dialog.LgHeader.html new file mode 100644 index 00000000..c8c09c7d --- /dev/null +++ b/src/components/Dialog/Dialog.LgHeader.html @@ -0,0 +1,26 @@ +
+
+
+ +
+

All emails together now

+
+
+
+

Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

+
+
+
+ + +
+
+
+
+
diff --git a/src/components/Dialog/Dialog.Multiline.html b/src/components/Dialog/Dialog.Multiline.html new file mode 100644 index 00000000..c89db325 --- /dev/null +++ b/src/components/Dialog/Dialog.Multiline.html @@ -0,0 +1,30 @@ +
+
+
+ +
+

Create account

+
+
+
+ + + +
+
+
+
diff --git a/src/components/Dialog/Dialog.json b/src/components/Dialog/Dialog.json new file mode 100644 index 00000000..f36594cc --- /dev/null +++ b/src/components/Dialog/Dialog.json @@ -0,0 +1,52 @@ +{ + "name": "Dialog", + "notes": "", + "accessibilityNotes": + { + "role": "Dialog", + "narration": "Read all the elements in the dialog on open.", + "keyboard": "Use the TAB key to navigate between elements in the dialog. To exit, use ESC. Trap focus in the dialog until the user dismisses it. The user needs to return to the previous element on close." + }, + "class": "ms-Dialog", + "dependencies": [ + "Button", + "ChoiceField" + ], + "branches": [ + { + "name": "Default", + "default": true, + "template": "Dialog.Default.html", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Close button", + "class": "ms-Dialog--close" + } + ] + }, + { + "name": "Multiline Button", + "class": "ms-Dialog--multiline", + "template": "Dialog.Multiline.html", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Close button", + "class": "ms-Dialog--close" + } + ] + }, + { + "name": "Large Header", + "class": "ms-Dialog--lgHeader", + "template": "Dialog.LgHeader.html" + } + ] +} diff --git a/src/components/Dialog/Dialog.less b/src/components/Dialog/Dialog.less new file mode 100644 index 00000000..3fd8f0d2 --- /dev/null +++ b/src/components/Dialog/Dialog.less @@ -0,0 +1,205 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Dialog styles + + +// Mixin for IE9 specific styles +.dialogPositioningIE9Fallback() { + vertical-align: middle; + display: inline-block; +} + +.ms-Dialog { + background-color: transparent; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: @ms-zIndex-Dialog; + + // Fallback for IE9 + display: block; + font-size: 0; + line-height: 100vh; + text-align: center; + + // Flexbox for Modern Browsers + .flex-block(); + .align-items(center); + + &::before { + .dialogPositioningIE9Fallback(); + content: ""; + height: 100%; + width: 0; + } + + .ms-Button.ms-Button--compound { + display: block; + margin-left: 0; + } + + .ms-Overlay { + z-index: @ms-zIndex-back; + } +} + +// The actual dialog element +.ms-Dialog-main { + .dialogPositioningIE9Fallback(); + .drop-shadow(); + background-color: @ms-color-white; + box-sizing: border-box; + line-height: 1.35; + margin: auto; + width: 288px; + position: relative; + text-align: left; + outline: 1px solid transparent; +} + +// Close button, hidden by default +.ms-Dialog-button.ms-Dialog-button--close { + display: none; + position: absolute; + margin: 0; + padding: 0; + border: 0; + background: none; + cursor: pointer; + top: 12px; + right: 12px; + padding: 8px; + z-index: @ms-zIndex-front; + + .ms-Icon.ms-Icon--x { + color: @ms-color-neutralSecondary; + font-size: @ms-font-size-m + 2; + } +} + +.ms-Dialog-inner { + height: 100%; + padding: 0 20px 20px; +} + +.ms-Dialog-header { + position: relative; + width: 100%; + box-sizing: border-box; + padding: 12px 20px 15px; +} + +.ms-Dialog-title { + margin: 0; + font-family: @ms-font-family-light; + font-size: @ms-font-size-xl; +} + +.ms-Dialog-content { + position: relative; + width: 100%; + + // Add margin bottom between compound buttons + .ms-Button.ms-Button--compound:not(:last-child) { + margin-bottom: 20px; + } +} + +.ms-Dialog-subText { + margin: 0 0 20px 0; + padding-top: 8px; + font-family: @ms-font-family-semilight; + color: @ms-color-neutralPrimary; + font-size: @ms-font-size-s; +} + +.ms-Dialog-actions { + position: relative; + width: 100%; + min-height: 24px; + line-height: 24px; + margin: 20px 0 0; + font-size: 0; + + .ms-Button { + line-height: normal; + } +} + +.ms-Dialog-actionsRight { + text-align: right; + font-size: 0; + + // Reset spacing for first button + .ms-Dialog-action:first-child { + margin: 0; + } + + // Spacing between bottom buttons + .ms-Dialog-action + .ms-Dialog-action { + margin: 0 0 0 16px; + } +} + + +//= Modifier: Dialog with close button +// +.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) { + // Push the right side over so the icon doesn't overlap the text + .ms-Dialog-title { + margin-right: 20px; + } + + // Show the close button + .ms-Dialog-button.ms-Dialog-button--close { + display: block; + } +} + + +//= Modifier: Multiline button dialog +// +.ms-Dialog.ms-Dialog--multiline { + .ms-Dialog-title { + font-size: @ms-font-size-xxl; + } + + .ms-Dialog-inner { + padding: 0 20px 20px; + } +} + + +//= Modifier: Large header dialog +// +.ms-Dialog.ms-Dialog--lgHeader { + .ms-Dialog-header { + background-color: @ms-color-themePrimary; + padding: 26px 20px 28px; + margin-bottom: 8px; + } + + .ms-Dialog-title { + font-size: @ms-font-size-xxl; + font-family: @font-family-light; + color: @ms-color-white; + } + + .ms-Dialog-subText { + font-size: @ms-font-size-m; + } +} + + + +@media (min-width: @ms-screen-md-min) { + // Allow wider dialog on larger screens + .ms-Dialog-main { + width: auto; + min-width: 288px; + max-width: 340px; + } +} diff --git a/src/components/Dropdown/Dropdown.html b/src/components/Dropdown/Dropdown.html new file mode 100644 index 00000000..817175c0 --- /dev/null +++ b/src/components/Dropdown/Dropdown.html @@ -0,0 +1,10 @@ +
+ + +
diff --git a/src/components/Dropdown/Dropdown.json b/src/components/Dropdown/Dropdown.json new file mode 100644 index 00000000..41a48f23 --- /dev/null +++ b/src/components/Dropdown/Dropdown.json @@ -0,0 +1,16 @@ +{ + "name": "Dropdown", + "notes": "", + "template": "Dropdown.html", + "class": "ms-Dropdown", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] +} diff --git a/src/components/Dropdown/Dropdown.less b/src/components/Dropdown/Dropdown.less new file mode 100644 index 00000000..f6f7d490 --- /dev/null +++ b/src/components/Dropdown/Dropdown.less @@ -0,0 +1,171 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Dropdown styles + + +.ms-Dropdown { + .ms-font-m; + .ms-u-normalize; + margin-bottom: 10px; + position: relative; + outline: 0; + + &:hover, + &:focus, + &:active { + .ms-Dropdown-title, + .ms-Dropdown-caretDown { + color: @ms-color-black; + } + } + + &:hover, + &:active { + .ms-Dropdown-title { + border-color: @ms-color-neutralSecondaryAlt; + } + } + + &:focus { + .ms-Dropdown-title { + border-color: @ms-color-themePrimary; + } + } + + &.is-disabled { + .ms-Dropdown-title { + background-color: @ms-color-neutralLighter; + border-color: @ms-color-neutralLighter; + color: @ms-color-neutralTertiary; + cursor: default; + } + + .ms-Dropdown-caretDown { + color: @ms-color-neutralTertiary; + } + } +} + +// When the dropdown is opened +// Note: .ms-Dropdown--open is deprecated and will be removed in a future version. +// Use .is-open for an open dropdown. +.ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, +.ms-Dropdown.is-open .ms-Dropdown-items { + display: block; + position: fixed; +} + +// Hide the original dropdown +.ms-Dropdown-select { + display: none; +} + +.ms-Dropdown-caretDown { + color: @ms-color-neutralSecondary; + font-size: @ms-font-size-l; + position: absolute; + right: 9px; + top: 9px; + z-index: 1; + pointer-events: none; +} + +// Style the new, replacement component +.ms-Dropdown-title { + .ms-u-normalize; + background: @ms-color-white; + border: 1px solid @ms-color-neutralTertiaryAlt; + cursor: pointer; + display: block; + height: 32px; + line-height: 30px; + padding: 0 32px 0 10px; + position: relative; +} + +// Container for the dropdown items, displayed as a panel on small screens. +.ms-Dropdown-items { + .ms-u-normalize; + .drop-shadow; + background-color: @ms-color-white; + border: 1px solid @ms-color-neutralLight; + display: none; + list-style-type: none; + position: absolute; + width: 100%; + max-width: 268px; + z-index: (@ms-zIndex-Dropdown + @ms-zIndex-back); + top: 0; + right: 0; + bottom: 0; +} + +.ms-Dropdown-item { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 40px; + line-height: 38px; + padding: 0 10px; + position: relative; + border: 1px solid transparent; + white-space: nowrap; + + // Shorten the first and last items to maintain baseline alignment. + &:first-child, + &:last-child { + height: 39px; + } + + &:hover { + background-color: @ms-color-neutralLight; + color: @ms-color-black; + outline: 1px solid @ms-color-neutralLight; + } + + &:active { + background-color: @ms-color-neutralLight; + border-color: @ms-color-themePrimary; + color: @ms-color-black; + } + + &.is-disabled { + background: @ms-color-white; + color: @ms-color-neutralTertiary; + cursor: default; + line-height: 40px; + } +} + +// A selected dropdown item +// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version. +// Use .is-selected instead. +.ms-Dropdown-item.ms-Dropdown-item--selected, +.ms-Dropdown-item.is-selected { + background-color: @ms-color-themeLight; + color: @ms-color-black; + line-height: 40px; + + &:hover { + background-color: @ms-color-themeLight; + } +} + + +@media (min-width: @ms-screen-md-min) { + // On larger screens, display as a traditional dropdown. + .ms-Dropdown-items { + top: auto; + right: auto; + bottom: auto; + left: auto; + overflow-y: scroll; + max-width: 100%; + } + + .ms-Dropdown.ms-Dropdown--open .ms-Dropdown-items, + .ms-Dropdown.is-open .ms-Dropdown-items { + position: absolute; + } +} diff --git a/src/components/Dropdown/Jquery.Dropdown.js b/src/components/Dropdown/Jquery.Dropdown.js new file mode 100644 index 00000000..9a26ae2b --- /dev/null +++ b/src/components/Dropdown/Jquery.Dropdown.js @@ -0,0 +1,151 @@ +/** + * Dropdown Plugin + * + * Given .ms-Dropdown containers with generic +
+ +
  • Home
    • +
  • + Channels + + +
    • +
  • My Videos
    • +
  • More
    • +
  • Upload
    • + +
    diff --git a/src/components/NavBar/NavBar.json b/src/components/NavBar/NavBar.json new file mode 100644 index 00000000..84ffff29 --- /dev/null +++ b/src/components/NavBar/NavBar.json @@ -0,0 +1,11 @@ +{ + "name": "NavBar", + "notes": "", + "template": "NavBar.html", + "class": "ms-NavBar", + "dependencies": [ + "List", + "ListItem", + "ContextualMenu" + ] +} diff --git a/src/components/NavBar/NavBar.less b/src/components/NavBar/NavBar.less new file mode 100644 index 00000000..bd1a2d60 --- /dev/null +++ b/src/components/NavBar/NavBar.less @@ -0,0 +1,268 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Nav Bar styles + + +// On small screens, the nav bar contains only the hamburger icon. +.ms-NavBar { + .ms-font-m; + .ms-u-normalize; + background-color: @ms-color-neutralLighter; + height: 40px; + padding: 0 10px; + width: 100%; + outline: 1px solid transparent; +} + +// The button to open the menu on small screens. +.ms-NavBar-openMenu { + font-size: 20px; + height: 40px; + line-height: 40px; + position: absolute; + right: 10px; + text-align: center; + width: 40px; + cursor: pointer; +} + +// Hide the items by default. +.ms-NavBar-items { + display: none; +} + +// Individual item/button, with optional subitems. +.ms-NavBar-item { + .ms-u-borderBox; + display: block; + height: 40px; + line-height: 40px; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + padding-left: 20px; + position: relative; + + &:hover { + cursor: pointer; + background-color: @ms-color-themeLighter; + color: @ms-color-black; + + .ms-Icon { + color: @ms-color-neutralPrimary; + } + } + + &:active { + color: @ms-color-themePrimary; + } + + // The currently-selected item. + &.is-selected { + font-family: @ms-font-family-semibold; + } + + // Items can be disabled. + &.is-disabled { + color: @ms-color-neutralTertiary; + + &:hover { + cursor: default; + border: none; + } + } +} + +.ms-NavBar-link { + color: @ms-color-neutralPrimary; + text-decoration: none; + + &:active { + color: @ms-color-themePrimary; + } +} + + +// Items can contain subitems. +.ms-NavBar-item.ms-NavBar-item--hasMenu { + + // Hide submenus by default. + .ms-NavBar-items { + display: none; + } + + &:hover { + &:after { + color: @ms-color-neutralDark; + } + } +} + +// Add chevron icon. +.ms-NavBar-chevronDown { + color: @ms-color-neutralSecondary; + font-size: 22px; + position: absolute; + top: 10px; + right: 20px; +} + +// Search. +.ms-NavBar-item.ms-NavBar-item--search { + position: relative; + width: 30px; + + // Search icon. + &:after { + .ms-Icon; + color: @ms-color-neutralSecondary; + content: '\e039'; + font-size: 21px; + line-height: 40px; + position: absolute; + right: 5px; + top: 0; + } + + // The search box is hidden by default. + .ms-TextField { + display: none; + } + + // Opened state. + &.is-open { + width: 200px; + padding-right: 40px; + border: none; + + .ms-TextField { + display: block; + } + + .ms-TextField-field { + border: none; + background-color: transparent; + } + } +} + +// Show the nav items menu only on small screens +@media (max-width: @ms-screen-sm-max) { + // State: The navigation panel is open. + .ms-NavBar.is-open { + // Show the items. + .ms-NavBar-items { + .drop-shadow; + background-color: @ms-color-white; + bottom: 0; + display: block; + left: 50px; + margin: 0; + padding: 0; + position: absolute; + right: 0; + top: 0; + outline: 1px solid transparent; + z-index: @ms-zIndex-middle; + } + } +} + +// On small screens, override the contextual menu styles. +@media (min-width: @ms-screen-sm-min) and (max-width: @ms-screen-sm-max) { + .ms-NavBar-item.ms-NavBar-item--hasMenu.is-selected { + height: inherit; + background-color: transparent; + font-family: @ms-font-family-semilight; + + // Flip the chevron around. + .ms-NavBar-chevronDown { + transform: scaleY(-1); + } + } + + .ms-NavBar-item .ms-ContextualMenu { + position: static; + border: none; + box-shadow: none; + width: auto; + + .ms-ContextualMenu-link { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + } + } + + // White overlay for small screens. + // TODO: Use the Overlay component in the future. + .ms-NavBar.is-open:before { + content: ''; + display: block; + position: absolute; + background-color: rgba(255,255,255,0.2); + top: 0; + bottom: 0; + left: 0; + right: 0; + } +} + +// On medium screens and larger we display the menu items in the nav bar. +@media (min-width: @ms-screen-md-min) { + + // We don't need the button to open the menu. + .ms-NavBar-openMenu { + display: none; + } + + // Show the items list. + .ms-NavBar-items { + display: block; + list-style: none; + margin: 0 7px 0 0; + padding: 0; + } + + .ms-NavBar-chevronDown { + top: 3px; + right: 0; + float: none; + position: relative; + } + + // Position the items in a horizontal list. + .ms-NavBar-item { + float: left; + margin-right: 20px; + font-size: @ms-font-size-m; + padding: 0; + + &:hover { + border-bottom: 2px solid @ms-color-themePrimary; + background-color: transparent; + } + + // The currently-selected item. + &.is-selected { + font-family: @ms-font-family-semibold; + border-bottom: 2px solid @ms-color-themePrimary; + } + } + + // Modifier: Items can contain subitems. + .ms-NavBar-item.ms-NavBar-item--hasMenu { + // Add chevron icon. + &:after { + position: relative; + top: 3px; + padding-top: 0; + right: auto; + } + } + + // Modifier: Items can be positioned to the right on larger screens. + .ms-NavBar-item.ms-NavBar-item--right { + float: right; + margin: 0 0 0 20px; + } +} diff --git a/src/components/OrgChart/OrgChart.html b/src/components/OrgChart/OrgChart.html new file mode 100644 index 00000000..62d2ee6f --- /dev/null +++ b/src/components/OrgChart/OrgChart.html @@ -0,0 +1,135 @@ +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    Manager
    +
      +
    • + +
      • +
    +
    +
    +
    Staff
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    \ No newline at end of file diff --git a/src/components/OrgChart/OrgChart.json b/src/components/OrgChart/OrgChart.json new file mode 100644 index 00000000..15c7b73c --- /dev/null +++ b/src/components/OrgChart/OrgChart.json @@ -0,0 +1,20 @@ +{ + "name": "OrgChart", + "notes": "", + "template": "OrgChart.html", + "class": "ms-OrgChart", + "dependencies": [ + "Persona" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Circles", + "notes": "Circle personas.", + "class": "ms-OrgChart--circles" + } + ] +} diff --git a/src/components/OrgChart/OrgChart.less b/src/components/OrgChart/OrgChart.less new file mode 100644 index 00000000..912e25b3 --- /dev/null +++ b/src/components/OrgChart/OrgChart.less @@ -0,0 +1,69 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Org chart styles + + +.ms-OrgChart-list { + padding: 0; + margin: 10px 0 20px 0; +} + +.ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 3px; + + // ms-Persona overrides + .ms-Persona .ms-Persona-imageArea { + width: 50px; + height: 50px; + background-color: transparent; + } + + .ms-Persona-imageCircle { + width: 50px; + height: 50px; + margin: 0; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + background-color: @color-neutralTertiary; + } +} + +.ms-OrgChart.ms-OrgChart--circles .ms-Persona-imageCircle { border-radius: 50%; } + +.ms-OrgChart.ms-OrgChart--circles .ms-Persona-presence { + position: absolute; + height: 10px; + width: 10px; + border-radius: 50%; + top: auto; + left: auto; + right: 2px; + bottom: -1px; + border: 2px solid @color-white; +} + +.ms-OrgChart-listItemBtn { + .button-reset(); + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0; + padding: 0; + outline: transparent; +} + +.ms-OrgChart-groupTitle { + font-family: @font-family-semilight; + color: @color-neutralSecondary; + font-size: @font-size-m; +} diff --git a/src/components/Overlay/Overlay.html b/src/components/Overlay/Overlay.html new file mode 100644 index 00000000..d4a20cd1 --- /dev/null +++ b/src/components/Overlay/Overlay.html @@ -0,0 +1 @@ +
    diff --git a/src/components/Overlay/Overlay.json b/src/components/Overlay/Overlay.json new file mode 100644 index 00000000..ee399fb3 --- /dev/null +++ b/src/components/Overlay/Overlay.json @@ -0,0 +1,21 @@ +{ + "name": "Overlay", + "notes": "", + "template": "Overlay.html", + "class": "ms-Overlay", + "branches": [ + { + "name": "Light (default)", + "default": true + }, + { + "name": "Dark", + "class": "ms-Overlay--dark" + }, + { + "name": "None", + "notes": "A hidden overlay, used primarly as part of other components like the dialog.", + "class": "ms-Overlay--none" + } + ] +} diff --git a/src/components/Overlay/Overlay.less b/src/components/Overlay/Overlay.less new file mode 100644 index 00000000..e96fb635 --- /dev/null +++ b/src/components/Overlay/Overlay.less @@ -0,0 +1,23 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Modal overlay styles + + +.ms-Overlay { + background-color: @ms-color-whiteTranslucent40; + position: absolute; + bottom: 0; + left: 0; + right: 0; + top: 0; + z-index: @ms-zIndex-Overlay; + + &.ms-Overlay--dark { + background-color: @ms-color-blackTranslucent40; + } + + &.ms-Overlay--none { + visibility: hidden; + } +} diff --git a/src/components/Panel/Jquery.Panel.js b/src/components/Panel/Jquery.Panel.js new file mode 100644 index 00000000..fbf352ce --- /dev/null +++ b/src/components/Panel/Jquery.Panel.js @@ -0,0 +1,35 @@ +/** + * Panel Plugin + * + * Adds basic demonstration functionality to .ms-Panel components. + * + * @param {jQuery Object} One or more .ms-Panel components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Panel = function () { + + /** Go through each panel we've been given. */ + return this.each(function () { + + var $panel = $(this); + var $panelMain = $panel.find(".ms-Panel-main"); + + /** Hook to open the panel. */ + $(".js-togglePanel").on("click", function() { + // Panel must be set to display "block" in order for animations to render + $panelMain.css({display: "block"}); + $panel.toggleClass("is-open"); + }); + + $panelMain.on("animationend webkitAnimationEnd MSAnimationEnd", function(event) { + if (event.originalEvent.animationName === "fadeOut") { + // Hide and Prevent ms-Panel-main from being interactive + $(this).css({display: "none"}); + } + }); + + }); + + }; +})(jQuery); diff --git a/src/components/Panel/Panel.html b/src/components/Panel/Panel.html new file mode 100644 index 00000000..72679457 --- /dev/null +++ b/src/components/Panel/Panel.html @@ -0,0 +1,23 @@ + + +
    +
    +
    +
    + + +
    +
    + Panel +

    Content goes here.

    +
    +
    +
    diff --git a/src/components/Panel/Panel.json b/src/components/Panel/Panel.json new file mode 100644 index 00000000..6ac562bd --- /dev/null +++ b/src/components/Panel/Panel.json @@ -0,0 +1,40 @@ +{ + "name": "Panel", + "notes": "", + "template": "Panel.html", + "class": "ms-Panel", + "dependencies": [ + "Button", + "Label", + "Overlay" + ], + "branches": [ + { + "name": "Small", + "default": true, + "class": "ms-Panel--small", + "branches": [ + { + "name": "Right", + "default": true + }, + { + "name": "Left", + "class": "ms-Panel--left" + } + ] + }, + { + "name": "Medium", + "class": "ms-Panel--medium" + }, + { + "name": "Large", + "class": "ms-Panel--large" + }, + { + "name": "Extra Large", + "class": "ms-Panel--extraLarge" + } + ] +} diff --git a/src/components/Panel/Panel.less b/src/components/Panel/Panel.less new file mode 100644 index 00000000..c329fa3e --- /dev/null +++ b/src/components/Panel/Panel.less @@ -0,0 +1,242 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Panel styles + + +// The panel covers the entire screen. +.ms-Panel { + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: @ms-zIndex-Panel; + + // Overlay used within panel + .ms-Overlay { + z-index: @ms-zIndex-back; + } +} + +// The panel itself, where the content goes. +.ms-Panel-main { + background-color: @ms-color-white; + bottom: 0; + position: fixed; + right: 0; + top: 0; + display: none; //prevent the panel from briefly showing up when the page loads + z-index: @ms-zIndex-front; +} + +// Command buttons. +.ms-Panel-commands { + background-color: @ms-color-neutralLighterAlt; + height: 40px; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +// An individual command button. +.ms-Panel-command { + background-color: transparent; + border: none; + float: left; + font-size: 0; // Remove gap between icon and label. + height: 40px; + margin-left: 8px; + padding: 0 8px; + + &:hover { + background-color: @ms-color-neutralLight; + cursor: pointer; + outline: 1px solid transparent; + } + + &:active { + background-color: @ms-color-white; + } +} + +// Icon within a command button. +.ms-Panel-commandIcon { + color: @ms-color-themePrimary; + font-size: @ms-font-size-m-plus; + line-height: 40px; + margin-right: 8px; +} + +// Label for a command button. +.ms-Panel-commandLabel { + font-size: @ms-font-size-m; + font-family: @ms-font-family-regular; + color: @ms-color-neutralPrimary; +} + +// Scrollable content area, below the command buttons. +.ms-Panel-contentInner { + position: absolute; + top: 40px; // Push it below the commands. + bottom: 0; + left: 0; + right: 0; + padding: 0 32px 20px 32px; + overflow-y: auto; +} + +// Header text at the top of the panel. +.ms-Panel-headerText { + font-family: @ms-font-family-light; + font-size: @ms-font-size-xl; + color: @ms-color-neutralPrimary; + line-height: 82px; // Magic number that places text baseline at 50px. + height: 70px; +} + + +// Small screens. +@media (min-width: @ms-screen-sm-min) { + + // Hide the panel from display. + .ms-Panel { + display: none; + } + + // Show the panel when it's open. + .ms-Panel.is-open { + display: block; + } + + // The overlay should always be hidden on small screens. + .ms-Panel .ms-Overlay { + display: none; + } + + .ms-Panel.is-open .ms-Panel-main { + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 1; + } + +} + +// Medium screens. +@media (min-width: @ms-screen-md-min) { + + // Always display the panel, just place off screen so it can slide. + .ms-Panel { + display: block; + pointer-events: none; + } + + // When opened, the full-width panel is replaced with one that is 340px wide + // and attached to the right of the screen. + .ms-Panel-main { + border-left: 1px solid @ms-color-neutralLight; + border-right: 1px solid @ms-color-neutralLight; + right: -40px; + pointer-events: auto; + width: 341px; // Add a pixel due to border-box. + .ms-u-slideRightOut40; + } + + .ms-Panel.is-open .ms-Panel-main { + .drop-shadow(-30px, 0px, 30px, -30px, .2); + left: auto; + .ms-u-slideLeftIn40; + } + + // On medium screens and up, the small panel attached to the left is a variant. + .ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main { + .drop-shadow(30px, 0px, 30px, -30px, .2); + .ms-u-slideRightIn40; + } + + .ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main { + left: 0; + right: auto; + .ms-u-slideLeftOut40; + } + + // Display the overlay, but with 0 opacity so that we can animate it. + .ms-Panel .ms-Overlay { + display: block; + opacity: 0; + pointer-events: none; + transition: opacity @ms-duration3 @ms-ease1; + } + + // When the panel is opened, animate to full opacity + // and activate pointer events so can be clicked. + .ms-Panel.is-open .ms-Overlay { + cursor: pointer; + opacity: 1; + pointer-events: auto; + } +} + +// Large screens. +@media (min-width: @ms-screen-lg-min) { + + // All but the small panel (medium to extra large) become + // fluid with a fixed left margin of 48px when opened. + .ms-Panel.ms-Panel--medium, + .ms-Panel.ms-Panel--large, + .ms-Panel.ms-Panel--extraLarge { + .ms-Panel-main { + left: 47px; // Remove a pixel due to border-box. + width: auto; + } + } + + .ms-Panel.ms-Panel--medium.is-open, + .ms-Panel.ms-Panel--large.is-open, + .ms-Panel.ms-Panel--extraLarge.is-open { + .ms-Panel-main { + width: auto; + } + } + +} + +// Extra large screens. +@media (min-width: @ms-screen-xl-min) { + + // Medium panel changes to 643px fixed width, while all other + // sizes remain the same as they were on large screens. + .ms-Panel.ms-Panel--medium .ms-Panel-main { + left: auto; + width: 644px; // Add a pixel due to border-box. + } + + .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main { + left: auto; + right: 0; + width: 644px; // Add a pixel due to border-box. + } + +} + +// Extra extra large screens. +@media (min-width: @ms-screen-xxl-min) { + + // Large panels have an increased left margin of 428px. + .ms-Panel.ms-Panel--large .ms-Panel-main { + left: 427px; // Remove a pixel due to border-box. + } + + // Extra large panels have an increased left margin of 176px. + .ms-Panel.ms-Panel--extraLarge .ms-Panel-main { + left: 175px; // Remove a pixel due to border-box. + } + + // For now, the small left panel is hidden on XXL screens and up. + .ms-Panel.ms-Panel--small.ms-Panel--left { + display: none; + } +} diff --git a/src/components/PeoplePicker/Jquery.PeoplePicker.js b/src/components/PeoplePicker/Jquery.PeoplePicker.js new file mode 100644 index 00000000..41e0303c --- /dev/null +++ b/src/components/PeoplePicker/Jquery.PeoplePicker.js @@ -0,0 +1,209 @@ +/** + * People Picker Plugin + * + * Adds basic demonstration functionality to .ms-PeoplePicker components. + * + * @param {jQuery Object} One or more .ms-PeoplePicker components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.PeoplePicker = function () { + + /** Iterate through each people picker provided. */ + return this.each(function () { + + var $peoplePicker = $(this); + var $searchField = $peoplePicker.find(".ms-PeoplePicker-searchField"); + var $results = $peoplePicker.find(".ms-PeoplePicker-results"); + var $searchMore = $peoplePicker.find(".ms-PeoplePicker-searchMore"); + var $selected = $peoplePicker.find('.ms-PeoplePicker-selected'); + var $selectedPeople = $peoplePicker.find(".ms-PeoplePicker-selectedPeople") + var $selectedCount = $peoplePicker.find(".ms-PeoplePicker-selectedCount") + var isActive = false; + var spinner; + + // Run when focused or clicked + function peoplePickerActive(event) { + /** Scroll the view so that the people picker is at the top. */ + $('html, body').animate({ + scrollTop: $peoplePicker.offset().top + }, 367); + + /** Start by closing any open people pickers. */ + if ( $('.ms-PeoplePicker').hasClass('is-active') ) { + $(".ms-PeoplePicker").removeClass("is-active"); + } + + isActive = true; + + /** Stop the click event from propagating, which would just close the dropdown immediately. */ + event.stopPropagation(); + + /** Before opening, size the results panel to match the people picker. */ + $results.width($peoplePicker.width() - 2); + + /** Show the $results by setting the people picker to active. */ + $peoplePicker.addClass("is-active"); + + /** Temporarily bind an event to the document that will close the people picker when clicking anywhere. */ + $(document).bind("click.peoplepicker", function(event) { + $peoplePicker.removeClass('is-active'); + $(document).unbind('click.peoplepicker'); + isActive = false; + }); + }; + + /** Set to active when focusing on the input. */ + $peoplePicker.on('focus', '.ms-PeoplePicker-searchField', function(event) { + peoplePickerActive(event); + }); + + /** Set to active when clicking on the input. */ + $peoplePicker.on('click', '.ms-PeoplePicker-searchField', function(event) { + peoplePickerActive(event); + }); + + /** Keep the people picker active when clicking within it. */ + $(this).click(function (event) { + event.stopPropagation(); + }); + + /** Add the selected person to the text field or selected list and close the people picker. */ + $results.on('click', '.ms-PeoplePicker-result', function (event) { + var selectedName = $(this).find(".ms-Persona-primaryText").html(); + var selectedTitle = $(this).find(".ms-Persona-secondaryText").html(); + var personaHTML = '
    ' + + '
    ' + + '
    ' + + '' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + selectedName + '
    ' + + '
    ' + + '
    ' + + '' + + '
    '; + var personaListItem = '
  • ' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + selectedName + '
    ' + + '
    ' + selectedTitle + '
    ' + + '
    ' + + '
    ' + + '' + + '
    • '; + if (!$peoplePicker.hasClass('ms-PeoplePicker--facePile')) { + $searchField.before(personaHTML); + $peoplePicker.removeClass("is-active"); + resizeSearchField($peoplePicker); + } + else { + if (!$selected.hasClass('is-active')) { + $selected.addClass('is-active'); + } + $selectedPeople.prepend(personaListItem); + $peoplePicker.removeClass("is-active"); + + var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length; + $selectedCount.html(count); + } + }); + + /** Remove the persona when clicking the personaRemove button. */ + $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function(event) { + $(this).parents('.ms-PeoplePicker-persona').remove(); + + /** Make the search field 100% width if all personas have been removed */ + if ( $('.ms-PeoplePicker-persona').length == 0 ) { + $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth('100%'); + } else { + resizeSearchField($peoplePicker); + } + }); + + /** Trigger additional searching when clicking the search more area. */ + $results.on('click', '.js-searchMore', function(event) { + var $searchMore = $(this); + var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary"); + var originalPrimaryLabelText = primaryLabel.html(); + + /** Change to searching state. */ + $searchMore.addClass("is-searching"); + primaryLabel.html("Searching for “Sen”"); + + /** Attach Spinner */ + if (!spinner) { + spinner = new fabric.Spinner($searchMore.get(0)); + } else { + spinner.start(); + } + + /** Return the original state. */ + setTimeout(function() { + $searchMore.removeClass("is-searching"); + primaryLabel.html(originalPrimaryLabelText); + spinner.stop(); + }, 3000); + }); + + /** Remove a result using the action icon. */ + $results.on('click', '.js-resultRemove', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-result").remove(); + }); + + /** Expand a result if more details are available. */ + $results.on('click', '.js-resultExpand', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-result").toggleClass("is-expanded"); + }); + + /** Remove a selected person using the action icon. */ + $selectedPeople.on('click', '.js-selectedRemove', function(event) { + event.stopPropagation(); + $(this).parent(".ms-PeoplePicker-selectedPerson").remove(); + var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length; + $selectedCount.html(count); + if ($peoplePicker.find('.ms-PeoplePicker-selectedPerson').length === 0) { + $selected.removeClass('is-active'); + } + }); + + }); + }; + + function resizeSearchField($peoplePicker) { + + var $searchBox = $peoplePicker.find('.ms-PeoplePicker-searchBox'); + + // Where is the right edge of the search box? + var searchBoxLeftEdge = $searchBox.position().left; + var searchBoxWidth = $searchBox.outerWidth(); + var searchBoxRightEdge = searchBoxLeftEdge + searchBoxWidth; + + // Where is the right edge of the last persona component? + var $lastPersona = $searchBox.find('.ms-PeoplePicker-persona:last'); + var lastPersonaLeftEdge = $lastPersona.offset().left; + var lastPersonaWidth = $lastPersona.outerWidth(); + var lastPersonaRightEdge = lastPersonaLeftEdge + lastPersonaWidth; + + // Adjust the width of the field to fit the remaining space. + var newFieldWidth = searchBoxRightEdge - lastPersonaRightEdge - 7; + + // Don't let the field get too tiny. + if (newFieldWidth < 100) { + newFieldWidth = "100%"; + } + + $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth); + } + +})(jQuery); \ No newline at end of file diff --git a/src/components/PeoplePicker/PeoplePicker.Compact.html b/src/components/PeoplePicker/PeoplePicker.Compact.html new file mode 100644 index 00000000..3f067ae8 --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.Compact.html @@ -0,0 +1,163 @@ +
    +
    + +
    +
    +
    +
    +
    Top results
    +
      +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    Other results
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      +
        +
      • + + +
        • +
      • + + +
        • +
      +
      +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    + +
    +
    +
    diff --git a/src/components/PeoplePicker/PeoplePicker.Disconnected.html b/src/components/PeoplePicker/PeoplePicker.Disconnected.html new file mode 100644 index 00000000..8229e4fa --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.Disconnected.html @@ -0,0 +1,159 @@ +
    +
    + +
    +
    +
    +
    +
    Top results
    +
      +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    Other results
    +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      +
        +
      • + + +
        • +
      • + + +
        • +
      +
      +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    + +
    +
    +
    diff --git a/src/components/PeoplePicker/PeoplePicker.FacePile.html b/src/components/PeoplePicker/PeoplePicker.FacePile.html new file mode 100644 index 00000000..921a2fe8 --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.FacePile.html @@ -0,0 +1,106 @@ +
    + +
    + +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    + newly added members +
    +
      +
      +
      \ No newline at end of file diff --git a/src/components/PeoplePicker/PeoplePicker.Searching.png b/src/components/PeoplePicker/PeoplePicker.Searching.png new file mode 100644 index 0000000000000000000000000000000000000000..147416f7713c45d5434a9d5b8c5570958e3e9b18 GIT binary patch literal 1601 zcmaJ?c~BE)91VyNV{MfNFFe+zQ$bBO8weqRh#}!fB@se|w5T;C3ki_jb+aKM9)JZw zv|4RPr)5+u+A0clC=go_VbCg`7@d~d60pM|)rvY)L#@~i0``y6o!R}4dGGzMH?!Ll z6tUA7a~U)mZJI1js-#xH{nEXuugPW`q?S2kw3RR#)u3E76=3ohYNAJEDFIg<)Wm<%0f*6V+vBlq$LbE zX~0mxt*A-E%%ljUGJREo5g(UDO`~n18U|T4I0Umf?vloUa{2#5jmB}biBux5^Zid@ zlPVWSASGhL%!HO2TzY^z6fTqyh=#-n6^3PxbumGYk(f!3;ebQ}1g02J9cD2Fjlkt{ zp$s*V8dQtOq#}?KU>giNVF)iIR3Z%ti&dG$J^KY8`3iW zcJ>;%KR3v8$atT|*r!O2v+UWqEfqH(g_`_IT#bh?yF*)ENK^YU)=MJtHU6pturC8cQ7fUKmV|%ro1ZOG3ZEHbn5!u{Mh87ql5HR`!36gvyL{h z*#oW=VT@Br|J6!*!;>zi zKK+7Ea^V)}Vo~+#lIq6tx%m9B3q58JsN-d)?ejle-ne(5XLx>AiKAaUdvRh{?W4{; z1#+o6vdB|qemA-wyi(a*XKwYhBz^Nq6f}QIB*V6EZA5Y33xcouD=cNH@9?}Y_RXVz z?c^@4?OlA^8D5siWEZdnIUC@BhuikfIo#IgT{|?LzsIlZKo4`xmD!5WCvP5A`KRyf z`>9F3!?SkR%1zzLhvMV0t1C%`w4;;utWXQRQ+2!j%*UwGx39VqpyojZMgsd literal 0 HcmV?d00001 diff --git a/src/components/PeoplePicker/PeoplePicker.html b/src/components/PeoplePicker/PeoplePicker.html new file mode 100644 index 00000000..82b8b1e9 --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.html @@ -0,0 +1,167 @@ +
      +
      + +
      +
      +
      +
      +
      Top results
      +
        +
      • + + +
        • +
      • + + +
        • +
      +
      +
      +
      Other results
      +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        +
          +
        • + + +
          • +
        • + + +
          • +
        +
        +
        • +
      • + + +
        • +
      • + + +
        • +
      +
      +
      +
      + +
      +
      +
      diff --git a/src/components/PeoplePicker/PeoplePicker.json b/src/components/PeoplePicker/PeoplePicker.json new file mode 100644 index 00000000..a4214a69 --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.json @@ -0,0 +1,33 @@ +{ + "name": "PeoplePicker", + "notes": "", + "template": "PeoplePicker.html", + "class": "ms-PeoplePicker", + "dependencies": [ + "Button", + "Label", + "Overlay", + "Persona" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Compact", + "template": "PeoplePicker.Compact.html", + "class": "ms-PeoplePicker--compact" + }, + { + "name": "Disconnected", + "notes": "When the search can not be completed, an error message is shown.", + "template": "PeoplePicker.Disconnected.html" + }, + { + "name": "Facepile", + "template": "PeoplePicker.FacePile.html", + "class": "ms-PeoplePicker--facePile" + } + ] +} diff --git a/src/components/PeoplePicker/PeoplePicker.less b/src/components/PeoplePicker/PeoplePicker.less new file mode 100644 index 00000000..e69c4d95 --- /dev/null +++ b/src/components/PeoplePicker/PeoplePicker.less @@ -0,0 +1,445 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// People Picker styles + + +.ms-PeoplePicker { + .ms-font-m; + .ms-u-normalize; + background-color: @ms-color-white; + margin-bottom: 10px; +} + +// Box that contains the search field and selected people. +.ms-PeoplePicker-searchBox { + .ms-u-clearfix; + border: 1px solid @ms-color-neutralTertiaryAlt; + box-sizing: border-box; + min-height: 40px; + width: 100%; + + &:hover { border-color: @ms-color-neutralSecondaryAlt; } +} + +// Highlight the search box when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox { + border-color: @ms-color-themePrimary; +} + +// The search field. +.ms-PeoplePicker-searchField { + border: none; + box-sizing: border-box; + display: inline-block; + float: left; + height: 38px; + outline: none; + padding-left: 8px; + width: 100%; +} + +// A selected persona, which appears within the search field. +.ms-PeoplePicker-persona { + display: inline-block; + float: left; + margin: 4px; + + //TODO: Avoid styling child components like this. + .ms-Persona { + background-color: @ms-color-neutralLighter; + float: left; + min-height: 30px; + } +} + +// The selected persona may be in an error state. +.ms-PeoplePicker-persona.has-error { + .ms-Persona-primaryText { + color: @ms-color-error; + } +} + +// Button to remove a selected person. +.ms-PeoplePicker-personaRemove { + .button-reset(); + background-color: @ms-color-neutralLighter; + color: @ms-color-neutralSecondary; + display: inline-block; + float: left; + height: 30px; + text-align: center; + width: 30px; + + &:hover { + background-color: @ms-color-neutralLight; + color: @ms-color-neutralPrimary; + cursor: pointer; + } + + &:focus { + background-color: @ms-color-neutralLight; + color: @ms-color-neutralPrimary; + border: 1px solid @ms-color-themePrimary; + outline: none; + } +} + +// Results area, hidden by default +.ms-PeoplePicker-results { + .drop-shadow(); + background-color: @ms-color-white; + border: 1px solid @ms-color-neutralTertiaryAlt; + display: none; + margin-bottom: -1px; + max-width: 340px; + padding-top: 9px; + position: absolute; + z-index: (@ms-zIndex-PeoplePicker + @ms-zIndex-middle); +} + +// Show the results area when the people picker is active +.ms-PeoplePicker.is-active .ms-PeoplePicker-results { + display: block; +} + + +// One or more groups of results (ms-PeoplePicker-resultGroup) are contained in this scrollable area. +// This is limited to five results for both regular and compact sizes. +.ms-PeoplePicker-resultGroups { + max-height: 309px; + overflow-y: scroll; +} + +// A group of results +.ms-PeoplePicker-resultGroup { + border-top: 1px solid @ms-color-neutralLight; + + // The first result group needs to be bumped up 1px to account for border on ms-PeoplePicker-results + &:first-child { + border-top: none; + } +} + +// Title for a group of results (optional) +.ms-PeoplePicker-resultGroupTitle { + color: @ms-color-themePrimary; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-s; + padding: 17px 0 0 12px; + text-transform: uppercase; + height: 40px; +} + +// List of results +.ms-PeoplePicker-resultList { + .ms-u-normalize; + margin-bottom: -1px; + list-style-type: none; // Browser default override. +} + +// A single result in the result list +.ms-PeoplePicker-result { + position: relative; + + .ms-Persona { + + &:hover { + .ms-Persona.ms-Persona--darkText; + cursor: pointer; + } + + // TODO: Active style is being blocked by the inner content on IE + // http://stackoverflow.com/questions/5594102/active-css-selector-not-working-for-ie8-and-ie9?rq=1 + &:active { + background-color: @ms-color-themeLight; + } + } + + // Ensure the width is 100%. + .ms-Persona-details { + width: 100%; + } +} + +// Result buttons +.ms-PeoplePicker-resultBtn { + .button-reset(); + position: relative; + height: 50px; + width: 100%; + background: none; + border: 0; + text-align: left; + margin: 0 0 10px 0; + padding: 0 0 0 9px; + + &:hover { background-color: @ms-color-neutralLight; outline: 1px solid transparent; } + &:focus { outline: 1; } + + &.ms-PeoplePicker-resultBtn--compact { + height: 30px; + } +} + +// Actionable icon on a result +.ms-PeoplePicker-resultAction { + .button-reset(); + display: block; + transition: background-color .367s @ms-ease1; + height: 50px; + position: absolute; + right: 0; + top: 0; + width: 30px; + z-index: (@ms-zIndex-PeoplePicker + @ms-zIndex-back); + + .ms-Icon { + color: @ms-color-neutralSecondary; + font-size: @ms-font-size-m-plus; + margin-top: -8px; + position: absolute; + text-align: center; + left: 8px; + } + + &:hover { background-color: @ms-color-neutralTertiaryAlt; outline: 1px solid transparent; } + &:active { background-color: @ms-color-themeTertiary; } +} + +// A result can contain additional content (usually a ms-PeoplePicker-resultList of Persona components) that is hidden initially +.ms-PeoplePicker-resultAdditionalContent { + display: none; +} + +// Use the .is-expanded state to reveal the additional content +.ms-PeoplePicker-result.is-expanded { + background-color: @ms-color-neutralLighter; + margin-bottom: 11px; + + // Switch the toggle icon + .ms-PeoplePicker-resultAction .ms-Icon { + transform: rotate(180deg); + } + + // Show the content + .ms-PeoplePicker-resultAdditionalContent { + display: block; + } +} + +// After the result groups we have an area to trigger additional searches +.ms-PeoplePicker-searchMore { + border-top: 1px solid @ms-color-neutralLight; + height: 69px; + position: relative; + + .ms-Spinner { + position: absolute; + width: 32px; + height: 32px; + top: 20px; + left: 20px; + display: none; + + .ms-Spinner-circle { + background-color: @ms-color-themePrimary; + } + } +} + +// Searching state +.ms-PeoplePicker-searchMore.is-searching { + + .ms-Spinner { + display: block; + } + + .ms-PeoplePicker-searchMoreIcon { + + .ms-Icon { + display: none; + } + } + + .ms-PeoplePicker-searchMorePrimary { + color: @ms-color-themePrimary; + } + + &:hover { + background-color: transparent; + cursor: default; + } +} + +.ms-PeoplePicker-searchMoreBtn { + .button-reset(); + position: relative; + height: 69px; + width: 100%; + padding: 0; + margin: 0; + padding-left: 70px; + text-align: left; + + &:hover { + background-color: @ms-color-neutralLight; + cursor: pointer; + } + + // TODO: Works in Chrome, but not working in IE + &:active { + background-color: @ms-color-themeLight; + } +} + +.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact { + height: 49px; + padding-left: 50px; +} + +// Default search icon +.ms-PeoplePicker-searchMoreIcon { + height: 70px; + position: absolute; + top: 0; + left: 0; + width: 70px; + + .ms-Icon { + color: @ms-color-neutralPrimary; + font-size: @ms-font-size-xl + 3; + position: absolute; + text-align: center; + top: 27px; + width: 100%; + } +} + +// Primary text +.ms-PeoplePicker-searchMorePrimary { + padding-top: 2px; + font-family: @ms-font-family-regular; +} + +// Secondary text +.ms-PeoplePicker-searchMoreSecondary { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-xs; + color: @ms-color-neutralSecondary; +} + +// The search more area may be in a disconnected state. +.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected { + + // Do nothing on hover + &:hover { + background-color: inherit; + cursor: default; + } + + // Alert icon + .ms-PeoplePicker-searchMoreIcon .ms-Icon { + color: @ms-color-neutralSecondary; + } + + // Primary text + .ms-PeoplePicker-searchMorePrimary { + color: @ms-color-neutralSecondary; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-xs; + line-height: 20px; + } +} + +// Compact size +.ms-PeoplePicker.ms-PeoplePicker--compact { + + // Limit to 5 results before scrolling. + .ms-PeoplePicker-resultGroups { + max-height: 209px; + } + + .ms-PeoplePicker-resultAction { + height: 30px; + + .ms-Icon { + margin-top: -8px; + } + } + + .ms-PeoplePicker-searchMore { + height: 49px; + + .ms-Spinner { + width: 28px; + height: 28px; + top: 12px; + left: 12px; + } + + } + + .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon { + background-size: 16px; + } + + .ms-PeoplePicker-searchMoreIcon { + height: 50px; + width: 50px; + + .ms-Icon { + font-size: @ms-font-size-l; + margin-top: -12px; + } + } + + .ms-PeoplePicker-searchMorePrimary { + font-size: @ms-font-size-s; + } + + .ms-PeoplePicker-searchMoreSecondary { + display: none; + } +} + +// Facepile +.ms-PeoplePicker.ms-PeoplePicker--facePile { + + .ms-PeoplePicker-searchBox { + height: 30px; + min-height: 30px; + } + + .ms-PeoplePicker-searchField { + height: 28px; + } +} + +.ms-PeoplePicker-selected { + margin-bottom: 20px; + display: none; + + &.is-active { + display: block; + } +} + +.ms-PeoplePicker-selectedHeader { + color: @color-themePrimary; + text-transform: uppercase; + font-size: @font-size-s; + font-family: @font-family-light; + height: 50px; + line-height: 50px; +} + +.ms-PeoplePicker-selectedPeople { + .ms-u-normalize; + list-style: none; +} + +.ms-PeoplePicker-selectedPerson { + margin-bottom: 10px; + position: relative; +} diff --git a/src/components/Persona/Persona.No-Presence.html b/src/components/Persona/Persona.No-Presence.html new file mode 100644 index 00000000..1a20f919 --- /dev/null +++ b/src/components/Persona/Persona.No-Presence.html @@ -0,0 +1,12 @@ +
      +
      + + +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      diff --git a/src/components/Persona/Persona.Person.jpg b/src/components/Persona/Persona.Person.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4d06e964d9edc210ad7646847e976009ebe99cc2 GIT binary patch literal 5650 zcmaJ=cRZY1*M0PsUi4sJj zB)UY8NDw7Ha@+gy+2z37}b0n?EpYilOG@l{=wNM08;g| zb@l}a0OIp$JpedcAmVqx;oRgzM9?0>)<}#EO4t_TD&k}9CIS@}6#;H4`M6ozI-_t9 z8p@g7SQJE3SW?JVR16A{mKBCd zO2|T?f)FuLsJIAJR76Zx2nv;xkd}i=LH-2$c{ME3P7a}Z`_EeEkplaloAUPd7WNhw z#$fG5pt7>EBBEjf=5ZZ&|F9lVUhb`984d;kKLoO7pZ7`lV1@?2N ze{8|k?Qhxtc~<|CsIC3~r@Fdc9KbJG4;%vZkKg|(>|yBZh7v)bJTRVEThw_v#|7C< zP6dmy#$m9A7>vtbr>N(E!C^ccFm4bP6$r11BN~bE_Tc-KuB|PniT1!*qis=|stWAq z0>X}tNI7X~8A&KiQdvbxS`-RZ6PJ}%fvVnyLS=7@!NkPGV1IE{F}9wrC^YUbF7h8P z>|ePTo#5(rURf1|b@W0ZZ(}j8kY78NbNqKNGXJXgCl~qeUS$83D{^i|SvQb;GdQA zb%G1iq-5l@z=a<|ViE#ka8#zw=*a`)U>poN&tAU4imO~f z*aR7Hs#2WSCcNMh5t5MnDo8*G5P{gh#871tYj!$)cd;D$z&9`s(zs_Y#mUa5flKG! z2th<3Kna*to^bRJQG{g4wx5Ex?F1S>oB`epkCXQf+vd8@08EJROIBQ%3A@%B5NojA zRQT%9NoeFnen$75)EB!3y9ZQ*95=L|x{O3n-V!W;vk4&dz+mMwAd$eZCDVemTrdrU){FrABPr>b?b1qCWU&6UMPVo#Dhr`9a5z=$+%T~U!!HCQb?e2s;W z;My2Gf#t1DiQWuC*_6!fIzC$JEkQ{P)m`yBp#$+jbPaiHJQfxMaluC_KW>N*1ienC z!kVE~?A>_X*wXk?=25lXL|G~HvHgyGid>E-2&>Q z%bY03>gdhQJ+?jXU)TK3)Z0iZo$S8JBhb}k6uzuyJMt=LkR&v}KIKhQH$JCB(WYoW z4zJ8Ae6xo+_NKI7IYl+4utnDALDrIoX@nn_$oUi|w$nl0as{sCGEcTQmss56SPtYR_ zC0gOD#%7VmEEybhZ&jUBbM|>XO_{zEG$*_cMgA>y=m%@>jqW|m7|rm4swRU-)KbAq zM0qU#@vEu)PahE(Rf@6Agu&{Y82hCHD&&i<>Yn}N%cngm4r#2Q3JcQLL+#7fKD2)N z-6QfzV;`T=-a1$on|Nm}|9Vjw5!Y2y3Rg#{kQGR~cP8A(Ms;L~9)_WK1g>xkwHrp< z<8!L!x_TpSuhf|yj~m@hIS%BW@p5KK>e+3$jHD$R7JZwh{4JlJMx(8s!OW`RNgV@A zlUG>%yRGPfXM99H#Fh_EO5RmDLZS>O%Hrc+KSd4M>4=Cll-`{D?bf~TD%oqc;}&nT@DIm1Rt@Qz z(9)=D30G@dOYzXoR9d5Hn)%EqB?H`*$*>~z`mIi6rk3IpoXCNMY`tybmke=VTSbV%6WE!;B*y|w4k zPVq`>j_IvD3s?2eJ>&^)w{YFg-8{Sy&8E>qjJs=Z`<*jMzjErYP-8@gC^lto|YUKE>BJ1!~Vo*b>KrnHE5 z4Xhyh{xiliKxpo^bKsXGHI$>jKpdQQ`qlwaRwoz5snL@01L|7Yl{0`&N<2*6gSFcy zMq%PU7J4X%bJS3zmS(CeW({Y5TfoB2*3QAD-2lip&2>gn%(%@ocLvjX4~x&b&CBYt z^uKnbS$4W74^9Rb@R_W6#!Hqu$E>~{+m+eUzy9rM)ClxJr8Ahr{mCVp^f*?Vy|%fA zO(dwQE-Ij)te|haLahbLL8O^ivQ9+2!LQ4u10x3bGVX9gH1w!LLE>Wg*RJ@LkN&-c^N zZz*y0XopGTHT&<)27#Hv`0j4Hfn&2=vZJQ%;aWrJEUd2;?M9wHcT%XLx;Yo!HKM(V zOy5vT*I`XTkMzPQ;}OZRw>TCH*9RkC__U7-)<9yglGWSWw8 zQr!~90{Y;t;gXocH!YQYomH-3VJ{^v7Mefoizl#;Hhi|X!|4PaXB}pk;f&V)UNRQR z*SNp6fKJqd6ZDIYa_q%y+1szA;QL!8M8nVv`{piNjusSrkbFYHr`=x}D`JN7zg-2t zJl2uRU8ZL`UX=7|Z4>YN(a!rRRjoJuwJFH0fxS%RZC3}oxhvuY-EDkz~H1^ zONMFfC8!{snEAfWzHoEeWf3ilfzPD2R)i)+Ws_Xn%6KYD5~yraHYZJm7UO@h@9CdL#LXk^5># zYjEV=8e{Kaa7)6=-kc>=Z(<4~P$JCM!@cCrg3-0WhjAOb#o;9`IajT5`bS%;6}OD1 zdxX1<4NG%@C0riVVqa874@k>>mz3`q?K2A>4a85Xo&lpbgDewA$v=ifu-*y8@299G z5!9d3S)0oaafCHQS$SpR^xze9nH(|bJLT^+V>02RQP6o8e1pq}0t*K4O;-TiDFYQcJto!#n1{DoSzYl61S?ZAPd-G1qW8$ZM{E=i#LaB3!bhP(6E=hdO=Q^WDh;uBR#teRs9Ek{?C-3nnvgO1Hwm zY9H97m2{)G^bc-6Eed4nH3TSg}qL|{< z8T=NhAqV&j+4M&QvjR1{Pp+z93OX0Fl=TTePB{=4&Rugzaj;ADUl5#xypFhf25|Rj z&7{-;8O=lcX>?;rL8Q-ki1P6(tBMnNcx0?%!k6N$Ndg7zn;4J4k=_PaT9Q!w*Wql5 z5QbulrKWN-?};nMhxHUgQc7wg8$u(FyDkfd+@$gjycW?FPAtOF%hLWwwQNm7#go^om<5Wg47? zZkoiQFE@v&NZc6Bk$xQ9f3VE1;vAcwe>pa-n~ z7wy2~qZ{*CEZnjybNTN- zd*(KVs+T)71NNHr;M(7OpI6^ZXKgK!o$}+SV(jyQO zFjv&W>Gt{Eo~Q)z8|tqOdZ?+rS&QY{Glx zFIEOmHK89!IQ^odKQFo8&Yb)0=4V*u;E~bS++m1tNf|D>*7UfchLL^!_va8+7ByBj z!$}>^HVz@nBzJx^^7pK!BHS(Z#)c%(Wg@CJ(O5w0G(@3!l1ms%oFgIf<}x)!(KO2-2S_#RFm?#Kc@?aoiwIPjo(@+8#w zdvJ0hJhZUT3tSA4l4-0wS2Tn~3M!QOSQL;OFf=en8Nv0y4sM5&&9};C#+hQr@dBaDbY|1-|)W%|H9~v=P0XJ z)fjQiod<{I{O06hDpNp0hY47_W7hM`Pc2QVw{d8NDRzJbp7a6>lUrNR%&&GU6t`p1 zOt^cM92=t*(_Jt+6(`9XyAwo99dHI1S-J6!KqN+dqw3vR9_BizYE*QqI=o5P>U|ts zKlr;KSjhax>%3fY;*Y@~6=z+ob!}$4sx=sSc^ct^;_x7>K}3BCrw=}aaU<0=o6ux< zwffpH`%8#ccv3kl0~(?EGje!uW6G}edj?%kbu+$5Kfhw?Q_=ig5%DHV`h;!CGXOn* zy=ecf%3zL#OGgCq081)Iqy=sb8)~IC<0qz}b!fBG=O}^sgE=Yv{ULH8GT%0?Z*g(5 zvN+WbVuW(Qt7)H&I%LG?Qg_Nl;EWkLa*r_UCG@RX6RIKo%T=zn;x`X?1`3X4s+TUw zC35v^X*W>`pcB_n#85A`Qo&|@x|LzMF%^h zZ?6xDDYNo#odJwPqU$xL``bE^#6d!%`9YV(c6FLpOqW?=gK|R_?fR_My1Wcmm(72w zaegZ{mf~<;d^=p|`)DdgKH9*bMsf4qxN8Zusnx4nB>c^6nU_7gl$g6zg3Lio(;w$x znyn!+pV)<)0%U0e2BU(Pw2)Jp?v%ubwAD`D(K63;%boj-zK$)84qffhkTosW3_TW) zt>e;Z>k6FUf@>fG4ZNReeS-KwG5P*a&~#X?7TC+fqGhqW<3#FVh`qan%@>y!MGjGi+9J1 literal 0 HcmV?d00001 diff --git a/src/components/Persona/Persona.Person2.png b/src/components/Persona/Persona.Person2.png new file mode 100644 index 0000000000000000000000000000000000000000..4ba5f7b0d6327863b6fdaa202eacb5af8ee240c9 GIT binary patch literal 15280 zcmaKTV{~TCwr-M+ZQEAIwr$&ZW7{3uwrzK8+fF*Rb^F`r>~rpqyYCuft-_ekQ?q8x z8l_d?3UcCb(AdyGKtOPk5+X`}LxX=_NRYo@+qYf2zX6uBsD`t$otd+np`$5~poyK4 zDWRmTp}DD&siBF7!?@V!+&Jx-EHmvqJe;T_}%Rdjjc_c z35`t6Edjj5*PXq@gq9|}#OkcFjI#E^rWTeGo{pxUkN%V4}i0wI~~A@`fVzOr7jp9F6}roEgbKMcH!+JDM6g+c~P(+1dQtiV7BX&UQ`~cJ_qA z%B+OymH-nwH>ZC|%gS;|0-T%;0mi11BD}_3IrL%#mWu?&BeVfd$6|F35Lch+Cu`6v26PWw0UKW=Xd`0MMA zf1O%z=mi@Hh=W{GL{PL<)$W=u!X^P*Dns@lJTP7HB8pe< zOD4;&9vI@+CBLS>3_8hcyx=aWfYFbDfDcF>fhbb3ICqu?(rJkXk#H@EiuPX@W{FeV zE1f%yD|buk$tRy@S!WB+39?fAeP}LM?JgB(Ugti!&mOI{YfnL)S@#8$xbH?$OV^dD zhy`!BVSBQgDen5~>W?0e2})`NYT|0w4%8nJ12<69#!=;85$Y}pXTgt_4hd^afqQV- zxs8*kF94UvH}{sC{@Nwp1&s9m;3;ws-t1hZJ*_{X(Mbr-)S zpWP7d%4N;&a=+?Bjq3YZA9cTK0Mf_|-`*x_$s4GCe|_;M!L)%CS1gmMi-`-=Thwhs zo)<;}sMao|*AJ!9GnGjB`i=tLs#&huV$IqX6C-jwHRhb3$iIBHW6DI7B`Xt@yU~#m zub_Hqif_CgXDiUuuoZbf&SdFEtZt{{)mB`tzwQwJ&RFSJd6=_}zcBz#smLUAp$QCBYIDHhM zF~V>kAXavI=XbW|$la1RqCi&eaW0F^I#F1Bh<=o^6uXXtu!knb891zi#c;Nr_t#Ej#vQ zNQQNq7bfb)@ z&G5eWoAZ62Q{;N8bui9sQjsS^T6Kn23*uSpR9>y~DY~Lc!LJ<47mRCI4VBMKpVVsEClgZ7sX*RA@^c2n>2O{E|*ouEKA9=CINaEIS#zOd|47) zTZJ>PjrJMgZC$ZCTDkW-?E6dq^|KdTVccc7l48V+-0n6fM+acgSFxOjEgaiX+WvL` zI~>tWTKfB>l4QUr7OJd622P+kQLCxEaAq$Kqf&(J{yb2aOL6w%`ubz$dx8J!c;&mQ zT%{JRZ#1I^hZ^f`9EFr{lT}9q5fs@il7J9$Gs{rt^*}_vglQ&nYtF)pXNfEWn?WmgnOZ@vWnkIEw`%(X4(Zhd6Us#_>q<#kl_mGsc#!*rnO%WYgB;`uiQl&f9u)rrTHK_fstUbk>Ap*ov9b z^eVdK29bc4cSK}e+aFuA2)kY-j}_>P>Lh%+Fb3obY#pn{ii;XojYxywndaqYpQTlm zas^B=yU&a2-fx1>Y@F-f#yP91P+#G4i5mru3R=)jKn@4_zz`}5?)LI7Tq+sHjR+Y` zvO?9MVf3hZ{5ku_QgZUbNJ_~w{Xa%!82R*B*`Alt&W6s%!qtI86~}0HKZ$%%2rqft zCrXgf*IxwF$x{mRJbDx^6V=P@HXBHGROONw{{zVYd%fBFn)@~KO^6ev##-jBbZ zst?NrxcI=Sg3$zdOIp>h2Ay=fZgiR_MrdfBA>+(J`*IGDc||MNlGrnLz86Xl7XJ zCJ+M!+b6@0o-aZ&)cGfpEc={S&-c|CyruyCWYRCT;lQ~6ovMPx&I?B&GoQr5n ziwsr&O38@{V!Z>i{gGZbszm3@)XycNdJbu1;L`*nmg!qODu4=7E%8XW`g03F)Kx|wi>GT*bBopRD?fTu9?RPixHKxS<00PDa z{D+KlRYLLiib4^kbS3RBAK{FYC#iLSv;rxZE(2W| z4J}J{_pfgLcPl-hfFigCE7t*d%Qx}fG*%iO$W@H**@IVNBfMx`tA)y;5e&W9q!ePw zE068omqh-xPM>F$(ycq5RH#{~9T(vlI05jG1CPUo;6Pb4^p;}BeD2BTVgd=V`m)~? zb=$d2ftvaMTZDfYxq< zVU9~F0VBv#02t4$qtkPp9;a+GT~Deg7Gvv?|TS( z+Z&sDR;=DTbagVKzkV3Fh6oqL#Tf;RqQC%HKz7vqao&HZga!&Ifjx{qf;vZhojcB8 z(8suq?fv1Ix>o_3mOV!0%#z-1$Elq9>c&~w>7Kku%n7Ty5awM$0a5?rXw~uN9WKIX zM33B4O@`vcK3&oxAFq;mjNEZYD%*VGA@?qJvd6^Vt&e zRvaHuMj%X}77nC@WsxMRaBKqCOxT5P2WJe|0jhxc&8N|xDJbHrhR(k2cm06js~cc~ zR$gzQO7&tCcdMA7H5usphp9mHL2#ao=OA~#nim;DX6io*KXJ+HxvpoFn1S)yZa|TV^U!7U}2wI)J?$sDHHXDKKKNn(Hz zKwyyl(s2S@u{YTzwfvjB&WD*sLfqasiJtY)VxS~F8-)jW{)c`$KI}Lg_B;a73ya~H zJ!bVIWkC=`Gq9&EI>A&BUy9_k$E*?htKy~URT2ErywxGS%{(GHKUNH$ZAP>Lr-v3P zSs>X8kLZ|MgYtc+3E+nIpuK3&zZ3wwc$N9s>NCD)kS-ul!xMnfFSak zE|#A$phGsE@mdHbEv@HOEu&IYFCUyyf5xyWPFxb8eIh#UoPP1qWh@!zBF-g(?;%@8 z2P(5C1r=O?^(zWg6QiO#V^^H}^A4Qu2KXbktD?8%DJ14_h{Vs(00<`yCLh?NE#jz+ z>bTtb5P{@=o$M1&xnfwA%kDXh7oc*DH7+^?<-!cT$cBj zgn%9uN=@&3+?vI~f=;M{{+WY~8fuG+KR@!_Jrs@7-wkojlAr)3b51*^|3!ca&&Y8w zYoz^m)+g8⁣cGfU9~;J~5A*B%w$ib%n^BT(EVv3rE~gwkBh6pc9~jqkqSPCz}}R z*7ir4{~(sNHFjT+lM|wXV|u@#;#fVTFxhko-Hnn;bw@CPG@=1X!ET5phmYYdP)0gl zZGX?43#@{;j%6%qw*)pVQabfFG7#2uE;*1fXbtHni|m27PC8E2q_W}=r(+!P4p^J| z8QzHUQJ7#M*gQ}Wt)qsknEE>?=vyL5d{LE4yn4EoAX&fw?3pm$x6!&yP5>#mjE50G znP470hN=a*eK`j@Ph;T}u>rEsA9UP1i&;`B3oozGHiuT0Ig4?ES+^*uk1~QWqGFz; z@(vPt`K2AY@vA%WHsZ&7e0 z@Fx%5IH6?HeBPbWxs$;f( z2FEzGKK!X%^9#1;S>TG1t8IYBw9}VHDMVYkKM@Fk;sCd6J>LZLRrhF&G0FyjbI}JC z2xJblxvDT--I(eg%Ma!|S`2~Jmz^3Dx{NhGvQOpDR_aciXs9Tc5q*>_Ham#XSA8%@ zNkAIduCfqV*~FQnpP`{XQ>SICiLn>MEEYyrBw};dQp3unatKvvl%F71xHn!k$-D|B z&sqR}uov+DtE~-|L(y~)gKe;mXQE^#99MxHsaHTC2jUzmd_1@NYKQF%q)<4f( zcj<{EscNYzG#ObOvg$H70x#XqwK|@sel8DNy&u<~11P{4O%2-YSq?fvSKa2yHh zryQl;w0jm4)Jag_%8kX=%y!C5HkA(3n{6M2AllQ)KUGD4T5(aEmeV(EI%#I5+&-c9 zrUO=EGI(ptf2))&{LleUE2i8J`^LB_E+mA7b3*Djf5n96z&xMY`l|NQw(IhHUtfk4 zy1D7yxI+}qbmW)PQUC9x^;Ja+@3yHzt;1r>uu(jbiN4HYh7`_ zx)^Q;#Evy!1;Y*AgGGid6eWVv6UW{TmmeiNQP}BqHhl)!eLwxwH>>!hg0x`b)kx<5 z+gHJaNx`VOlkfTH_B$GzPy>a;k{?x0qRmif9YFP$VSfl%jlF9+n0oPthqabY+jAux zx%N5A6VId4WIvTJ6-U>6Z>}9+aK1MD+L+>By3;JLCPTh&pH%x@+n(>|uV-pgRpZ4eA zZjolCm8FThC}HLDM)OO8k<;7d*so;|=PJ(2>8x#Ns>MiUppnX(;m`Qn-?!}YMQ#LL zJ|k_0m2>l`Mr=+8!KQDM5q@Vcx6R3DWc_{H_PxFD)63I+m~*8@2R*mg(o^K@iN1b~ zTL9_pMa>FnU3(~*)ac_@2Hnpq9QLm>^`4@gUSIPh`dkitdGg-p{LW=4p>#QNca6mEp)b-@AN&rM}I2S4-Y^`LH{P~3R6dH$`G8D5|K4ZY50uj~EJRK7O$o}XEy z#R0Xc!<=4clX84r4eVN0<(HSb(9eYThR1J!!cHFitDQH4dkB6{JC?=UWjP4??KG6Y zAT?g^lj0qY?#<6?b5%afiz_G1Gt@pUc-xo`3IxEGo+X{=M0Vfu04-;lIhC(vfy8DH zbG@dDphL2(+uF9oO(7T`=ee3AF5;I?+q2!~`g&~dU1u)0$MIsdFW0n(p^-XgcH)Gf z`1aPi_pO)R)_U&8W$!aVkHh^kxB9mA4I|dG-#0>!_v8HIwePq1Ijy6|_}Xt5isJCj z?wS*bTazlM*P);0@@5X+b%2HNmaPt

      baB6ag z;I?~QyN#!h7REYQa^=btTdU~P3T)qLZ1MW`LKBWlV)&`a3KpsQMUSd#s@lE=#yFNe z7p*$R{5LZuU5XZ+3+#5bwpPfaxV~0-&|Cq~@wZtH_kEey@K*r7=1uT?zO-Yj#vN+` zisGk8BplL02g`?$zkMjTbRlT3KKdv+u~a=py7pLZatfdOJKao?dG7b4K8JY=q-4X@-&L2c6@j%yHBclx4KxSCm3U#d zN#)KAyqIArOk%zQk7Q}kW|0{QY|q{642bja%8u3B(ay_-(oa}TU++zVnp*Mft98Nv z2x%u0!6eMo1(7hkzhg;e(TW>Hrs!3uFXaSCsaIRJLh>9HYq2uoa*!WmHWAQR7PC)=U3`?P_u{rC&NUM`Mi?U64J6znJVsOW_7Rz<5>4BOlI`c{N3<) zoxR;vY)T9s4h0IK1~NA%rG-irge=wKaQ%T|<)uH#@Y>T>*h&csif3XL_Zo+l!PX>X zdP+!OO+&-nc@?)c9AdvB{Ol8AH3p~f#h7jubk}5Lh9#R|T;y-imp{_ELMT#tC)H(C z$$zprrazKnWlMc+S}qiIFBCqj08eGmjY9`|al5!XAnHlb{T^*zDDj5_)p&7c^C^s-~?I}eKViLikVqwzvgE zj3jfE{H2sRqbQA|c{=el>T*$#5s?9mC^41N60RPBi(?4H zPHjP8x77uPE<{fqHXOOdJjOI1YMFH@n|j;)x5?v~GWnh&Px5Bz<#KUH?>LPbEsE)y zT<*`l=vKD(PX?aerqn1gtyXM9DEk0pcSER8V5U(+M?yNzrLG8KXVH`lQaRe~17i_b zL=pxiUc4Bv<`SwGagJG^#N}wTWIub`TSx-;9`W#-wNY5I-r|JpZRY0ijQMBc%y3G6 zC|F*opk45anw|<~Rub;U9ODYQ1f}-&F^(R&?XZXewqD}BQC`vHWl}+ZManZH5;-kQMrMA7wdxIa z9K%IGYXRYCliWg8Q+75fVIbAtrDBKO2%e2LHr>PCWoADNTY-zB!opaozaR^+35r>u z)~-bK?Pl9$2&yYcIEX6=?linxi%{txqC6Lm1Hkg~5<`oEp~vmpiGc^@%Df&}iLz=y zF2G^NHlchy1G#@57KG-vW=7ke<1HVF{7(2XvuH7GPl4pRR&P&_?&saB>`wNY2^5OX zt(r;~M1g}6xp-(O)kFhJ)g3H#KA}I87GR+nCILo$^9@?OrW{9ggW~L8AGlbejxtUU z=`PjkLw&Dl@s}@-XX|^k(wC@S&-HFP*d8t3Bd_v24OAiBN43ungRZ4weMbI$_fN7u%R6wf; zBeY*_+YnjIjAO;)4YBm*)7{y4cwXml>dc=6rW574yb2AgWDo^K;RFNktJBvmw$If( z5CDwZ`1qziU%T%fd%|U|p8M6QFSCSZm?-<@t(Op+m@+joEIot+)RtX4cdb7P<_j-tm;N zeCib0r6;4FDTE&%5jgK&nkJP8o2+@KLmD1)Wh7RyDeub*9r70(lo#u9kL_wjtxT#vKWb|;*%riVkR(#}l_R_*HP zr{gF7x5Do|Zoe<#nMaC+FMAHm*pY=(Qb}d+;6Nl>`my~DZ$rD`(xwrIy z;FILBSTE14`t#3DY9+`g$t8yu+?g?>l3Y!3y-)PN|BP>__qCKArXI!Qd{pTpe4> zX^r<)! z6ax50MD1a&P~;m|^m{LFv`-jpNRPg}u6zBA4xFLkkgkT)Q8qRRPX^|17lQw8S7M3A zqZh}mgTbW9_639;D=C&50e<9p^EtdgMV}vlsoWk9iR}#W<%RUvluCK06;yd{LavzW zJ5YKIX3&)SEg3G%Uw@v}&**)vEg5#9hzP2p7J<}fFN3G2$&m-`kxDuSXOO9{M?H&6 z?uAcPf0}5$`2Li2w%X^IAUx;DQ3=`*nQEsVEk}_^)!}fGC9MYW9^^wnKDlwW3(V`+08g7#HV}gz{v5sTG!U6E2z7R zzu^r$x)HzWa>zgkGX}L*ASU{Wc1OEXcpF@>vIr^&(i(R-fD6zbF<2Lsi%NghQ{r$) zcoTFeSekf9nw6!pm*-ex&g`g>ug-C$&e?>KMMk?gu`zj(K&doQnaNhOGuxFKSXg8* zh?F6F{Jx1GNRDdsScog7qEq@ce}bh7V9W7%I?LRd6;)LdTcwxDky(gmv*KWOu#)1GrD2FvH!TqHfh-VVwhfEoqS{gMi_z$l z$IYMF`*JXy@j_4&^G2vm=2a5idY~jchIOKfSSl7c_QF4959*JrY=tVSb#-3j zW>7@`PBT$%UVdQcb=VpUdd|4}@%}`}4~pGgT+#Ft4x4mEvWQJ?QBid1SaNDUZ>^6p zI`>FAvB*qG6}j#D`u8ZTH8B;VZGVI@m}6RiwV{i`!m2;prky*0dn{DO9UK>)Kzb(L zQp+M19MV!Is;vmNEGp%^L|V36fE*mriY>ObTBN$fQ0@vyA7~(&Bk@|dqh%4%+FZU- zz=FaJ&&!f}GPy0s;^B|plrSA%dvm92gVKfg-1la4oJ2huSeEG3&X~(4dRctx;A>kU5MdW* zMOjAf3#fae+#0?--ezmZ^L%RJ;52w1 zI9l#!(&k)_J&v!1krl~#bq$Lal0tjqB3+vA*`c!G07Nyh`8ZnhA7xN|wR~9J0+z=1 z6HTACrad6<5=soNEWf_2hq<+!4jESq35zcpCWMW~5zC9fLDx_DO0_KC&cBFlj|4oz0}JTL(K|=1rYfZImUh$e zbZN*cv3G`|OgHQ-E25aK%v`(jJgP>U!xL8pA=OyA$X(LShl=<`WnA}F+_y5ZDE z6N+FfQYqDmDS5S zG6(YGt46{oeSysxBB{d#XQEAV7#^5$O*IdBC&mF(CWV&dVJB=1{Z--vx>Phn1z5KD~#%myhxR}A<@l)om5gO3NMRj;iyajgK=CrswG4dcrj zW==Srs#po0CP~mJSh5;LVy$Xwyi07NF|&p|;|t8W$5i)8`RnMb269f2`OY9I4wpdV z<@kX|Fn{!smEpIi9GUPdaifF=L!o&?%QxdW6UD$SCF8RtLtnJ?iikI8cvEHU48L3* zxXXk)EpX3PKhrD;0KmQLMSF-rZ*dN4%v|<~5%f^Jy{?uhMpEF;7V)?ZBIGT~s7mumO!}nzMq(E^E z_VWv#xU*)%X!=+7$DCQD;8Y>rU1>1fusv=Ut=%#v%`M|&#S(wtBN`memwp`MZK z<3S>-({&#wuP}7KRX=~Nec#1u_K-z^x->mcptDPJuV42c;~o`?aa?X2{H)G`I+}fg zCg4M~RVF}<;c1D-CPEDqXNc-~Yp(qsdhUs(oY-T5yr!xt4`FJQL8%9DNj7wMH|^wJ zUEy9_;@Q|<%8EIFC!kOig}NF?(9ZN#k4Un~{v`4Nht^v4G|WHfqvtUwIk5Uwu{b8h z{kE+C@tS=8Oi1f!v>Vm_dKi2I#T(JoFmxM)9fVGCAW6A-MKfF}YZOtqVT!0YbmyJ1=#kTHSaG5N}EZDm^2Kl@QqZRk4;}HgYe1< zsdlyKFzcaH#f#B`()wAD5}37m(bcaQM~y9)C^_xU{ISm7W9J-NMj}0II(IZV)6jnl zy~k~-6g7fUMhj9-h#C?YbeEC80a>Q1(YKS@6e2(&^pHywl@HaGWXgzzMr!Yy7_V$0 z=MWCn?awA#?~!6S9F*td*qna$Fy5S9a-Pi_3K@5?!Z&YeT zmOX?uIKL@M}iUOn)bmg2KpVHqQuoS%a*C zazc&(Ex+Dzg zLgLb#DEC-Nd#eJ>V3mZv^EtMW(NQ5;8Fg$~5kej0PtM}q2Xc3DqpF!OXus(XaoP#k z4L}DM97qOEj=~cK##lpDNS7Thbly~7BcwDQe^D~>_tZ6ORq5Z}3XJ6D)_zalxTuya zd3sKqV8<6~_$}j|Z?aZ3ZT^!e(nIRG`j1<80Harf3)<<6Mw~vJDT-p1#LPx6>B=MWrJ< zh2P^Olw#}tB!yQWB;V#TDyC?}!({eK@-=V0@ZPGFmd50F?Y>bw&9WDr+V$;sAc*cr z5!UQ-T`09N?aMj8FZUEoY==jtTubheG1&1RHs_Ride|5mR69t{^gmg1QJr(A&Md3r z^Jb0Vj0G9~%?|RCBhpxJ0e8HPaQ1QV50l%;D*mW)Eyh?-G>zR~=ltC+cblmhH3BR@ z@Uo<%XK;bGax4%{R6`JM3bi2p)uR!OU zajQ{L(?)iw{0iV1Ts`yRcRzSr>U1rf65Dlayw&5M64zX(6DBVopqExgK;nwS5VX!9 zu5z|8hem2s1D-&w(NV*pZ(CA>g^m~I8>=(Z&PjHeN|>P5Xql5&>v}t0+W7HlZB8#B zOKxdY7M1$!be+w9)$=<2+55WUd-9-ly{grUg!V}Kyia*AekpxRX((o0(&udMP?f&9}uI&o~QxZ zod3Xily3Tg;aNe|UW^nQ!h$y<+*|%Tm4^U969(eiB9=Y~XvklnozFwzMQpvVp9^3w zmH9!%c5UZ-;DvGYRvQv+Tw-q|3$;B-b%3O=spWAAvBTNyd4_YlF_WYH_YA=}m$$K} zY4bN13*0r@aw(FDnoB`!RivuZh+MV%Vb2dpjx}gAgsxFB7TgS&S zg73qnI(@7~ZtyH1EW==orjp`%Cnax!JLo}!8>$?I52xbX%XTV^yGWY?pz^~2sg6|1|YN2z2%1gzYQ z-}h3U|9kUw=RKPthjU4}rfy*;ut8GXoYhKTWjBJA?Y<%?0tv3jQfT_`X25YDf`0es zaPs*^<}-QFYN4)wStjyumL)Vo`E3Bs8W4$x)pOrewnCG|Ro!g)Ep?bUKU66KXG3%;qtI==+LHkMBB&rSBJ z$0sF3$>Y=vw3c*A68&6rdKyI91=o7`=Xn*5*W&@(V)x1gOV)ncUtd$jnHc=;*CFO? zzR%LVZx8LtIqGm2JnLkl%U)oZR;WeY4HqvB%?!q>*>4BI=V{eGpNSLK-4ElLi7Lel zeP#S0{*k|Pt=!o~0TIw5FW`Zs?!UWQJL;V;9*%?Dt{%chGN@rS_^wifm~ycROj(oD z=lF{0UrB2$4#)&T@nghV{Gv{<$WD=XSJyl_1gCh?Nwx`O-`^9%v_CJa_qw}%uQxGP zR^-6wt0V;(MYU#AG#oN0%8eTcFSud~j`>Dz%Loudcgfq^8kg)Co~2SRZ4r9Ew%8f; z*S?ZZa^CLjczupFDz~iGvP&%`l3{)udj>8qCb5he$$q%W4YQ) z)~HmjT|B>QV6G*dzXLym98u;nW=Ja7Vv^+lxGWAT1G53i*U6Bj@X{Xm{G98){KV1T zxCuPT_4IA_NpNNI=Su-(nYfbFMz!#u%{QrqA8vR&49-sf5TnTNWs|(C-q42A?>DH= zvi{|8aQAj>PiDdAlpzRBN*QX(gCRh`Nr^0=clpqw~6G0H>Os_<=SX-uTl%r6r@CJvzwMq_cGN zr+`e7bRGyiPq(&hdyxT&y)D?|CY3tyNF&t{H25@C%sa%uWstj@pZBwYyD_8g>tt>7 zdMS}XC@8@P!jfr{Au~*Cw=KQh#PG9SXpcTDN?@KY6OXwV|7z)DB zCdx9(G+SVP>cmASi+jHHc!k-R>6q{UqZ;$fOkGfoYD=DMD|2(JlsA+eh61+79ZTY@ zCHQkky*iefJUn@ut+pyN(R&^B9@b_i09!ij+rU=P7{Kq&o{?G6%i|!uZY`XPnaLsN zEdg1OcIa~LvZn$Q*(^SA0wohdBaX}8Z9FfaaySvnwsIy-n?ose%(;PoGi2uUS^WEX zrRVvqxUzx8IIY(df!@@SOh?f9pzlzezuWaONIQ|kNn|j=l4tv%IJ;-MRD<<56&oiZ z={Y|w4qgdYLsNoFMfFITkaEc{>MhsnLHiRv_dCWJ!a@Un>o5NZA?f2udynVQ5vc%N+!$YGlHvY*r#F#X9jN6{((I2hMun7^SV?=9ex{U zHU(QPM2U$rcqkYLsFq3bRw&%=ltnFe9R7i%cu2!&1P=~J)1&GkIy9)CpLtvnR9fzd z=(SEqSeU#d#u;IrT)ku3O{#wH)A*3}JH&gywHe|gX>-0ppG~sfY6=-8%w;0WR06Fk zKJ0WWPGs6^Z;fDfBcLhh3Rz$=|0!Cbk-Kt?X zs0GE6kZ1VgX(c_6wCU@zN2oGUvLiL;#Vt9)(dUX7YK(lV*6vftqlKhK##e{T=2*6G zBrnSr?w@?Wj+>tWyo)A18VWkBuKVpE)wb6@W;oK)9QrxdwzvCOAq@JnYAxg%ggL$bA|QGW>40f@$p z%z!KpE?J~i0rsgu%NIDZ4;?f>B}xAUstEu78>*D>c(Fa#+(>p18X)PgufZNznYeM5*Bi^hod9eW#VZmeI+HatIAd4U$S}Cs$iWGNgQTt&uQA55 z#8jRhfqfesizwaU!i(Js$r>a!C^o>rW>Ko8`PRLC$7$}og<<-O5H)}tgG9n4uE|pp z(*g*Q*WSWF>PDkS1a}C%#c}2&%HaoT8fN#C5jrJtQF6WR$ zUTWx;C8W(!N?`35@;d!qgT;u3RuRP~<>b$7_$T*J#?FH_S@%3*{2``Ibt-lQ*O6gB zbFR_l`jw#h_ZFNUD-gGH<^k1Z+ZFYXUxHnUt19qeI5&M#Kdq#u(dy6-2Mmcs2~-?_ z|Bl|xsH|I0N;6bX43{a3kwzIk{cB=kk@4!vXtx@3ft;s0Lsv1=)e;rM*Oh^7yo!|y7}(*vir8;D#j z@M>m{Gze^0+TdO1V1ipkc>(^FwQ}JM_js%%otpPS;a1@{0$DbDmc{#;Zq()Tyscer zteZtlaNX`|C%S3_qRZ5UHb0z&%G>9JcFPhYZp=u_hm9{&dTYTV7?nNb=@-}Ib#CAV zg1pM@b>%ek^+cfO{ho=@dppB^y`=(d2WlvhNlTbP)}fV*MwwCny+3cG)0cMZzVF4N zBgV}s)X762P(Vyj1oHwy$tag5D^|RnbLgr!3TSI!J^I)7!)sfan4E!f(M%Qev2`(5kzHlM5C z{n0RziIMX;UyZPR2?Pv=Dys~Xb)S+jW#+HHXU2RGRl0`Q0Rpi7O|UC29qewIrMn#k zVN~Aj+2XT5`G(Q^u#C|A`StuQ6SVEQ#eLo5_gNiDk1{0(V}q%2yo&UvOX3E%KBoT- z`%EPinZ@U7Y&P-_f!BW1oYrB;EIkj#S%*aaG`DHIX!L>MDzjxj%l9`JCJ@$U>abXK SH~l|%XeCAEL~4W#0{;( +

      +
      +
      Space Needle
      +
      Seattle Center
      +
      400 Broad Street
      +
      Seattle, WA 98109
      +
      + diff --git a/src/components/Persona/Persona.html b/src/components/Persona/Persona.html new file mode 100644 index 00000000..1d0d4c66 --- /dev/null +++ b/src/components/Persona/Persona.html @@ -0,0 +1,13 @@ +
      +
      + + +
      +
      +
      +
      Alton Lafferty
      +
      Accountant
      +
      In a meeting
      +
      Available at 4:00pm
      +
      +
      diff --git a/src/components/Persona/Persona.json b/src/components/Persona/Persona.json new file mode 100644 index 00000000..9adfd79f --- /dev/null +++ b/src/components/Persona/Persona.json @@ -0,0 +1,162 @@ +{ + "name": "Persona", + "notes": "The persona component is used to represent a person. A placeholder icon is included in every persona as a fallback for when there is no img src or the img hasn't been received yet from the server.", + "template": "Persona.html", + "class": "ms-Persona", + "branches": [ + { + "name": "Sizes", + "default": true, + "branches": [ + { + "name": "Tiny/recipient", + "notes": "This one is usually used within a People Picker to represent a person in a minimal way.", + "class": "ms-Persona--tiny", + "branches": [ + { + "name": "Editable", + "default": true + }, + { + "name": "Read-only", + "class": "ms-Persona--readonly" + } + ] + }, + { + "name": "Extra small", + "class": "ms-Persona--xs", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Small", + "class": "ms-Persona--sm", + "notes": "This should be no smaller than...", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Medium", + "default": true, + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Large", + "class": "ms-Persona--lg", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + }, + { + "name": "Extra large", + "class": "ms-Persona--xl", + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Dark text", + "class": "ms-Persona--darkText", + "notes": "Use this dark text variant when placing the component on a darker background color, such as on hover." + }, + { + "name": "Selectable", + "class": "ms-Persona--selectable" + } + ] + } + ] + }, + { + "name": "Presence", + "notes": "An extra large Persona is shown here to better see the presence indicator. The same options and appearance apply to all sizes.", + "class": "ms-Persona--xl", + "branches": [ + { + "name": "Available", + "class": "ms-Persona--available", + "default": true + }, + { + "name": "Away", + "class": "ms-Persona--away" + }, + { + "name": "Blocked", + "class": "ms-Persona--blocked" + }, + { + "name": "Busy", + "class": "ms-Persona--busy" + }, + { + "name": "Do not disturb", + "class": "ms-Persona--dnd" + }, + { + "name": "Offline", + "class": "ms-Persona--offline" + }, + { + "name": "No presence", + "notes": "The presence indicator is not required.", + "template": "Persona.No-Presence.html" + } + ] + } + ] +} diff --git a/src/components/Persona/Persona.less b/src/components/Persona/Persona.less new file mode 100644 index 00000000..c7d06ae8 --- /dev/null +++ b/src/components/Persona/Persona.less @@ -0,0 +1,335 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Persona styles + + +// Medium size is the default. +.ms-Persona { + .ms-font-m; + .ms-u-normalize; + display: table; + line-height: 1; + overflow: hidden; + position: relative; + + .ms-Persona-imageArea { + position: relative; + display: block; + background-color: @ms-color-neutralTertiary; + overflow: hidden; + width: 50px; + height: 50px; + } + .ms-Persona-placeholder { + color: @ms-color-white; + position: absolute; + right: 0; + left: 0; + font-size: 47px; + top: 7px; + } + .ms-Persona-image { + display: table-cell; + margin-right: 10px; + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 50px; + + &[src=""] { + display: none; + } + } + .ms-Persona-presence { + background-color: @ms-color-presence-available; + position: absolute; + top: 0; + left: 0; + height: 50px; + width: 5px; + } + .ms-Persona-details { + display: table-cell; + padding: 0 10px; + vertical-align: middle; + } + .ms-Persona-primaryText { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-l; + margin-top: -3px; + white-space: nowrap; + } + .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText { + color: @ms-color-neutralSecondary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-s; + padding-top: 7px; + white-space: nowrap; + } + .ms-Persona-tertiaryText, .ms-Persona-optionalText { + display: none; + } + + + // Tiny. + &.ms-Persona--tiny { + height: 30px; + padding: 0 10px; + background-color: @ms-color-neutralLighter; + display: inline-block; + + .ms-Persona-imageArea { + overflow: visible; + background: transparent; + height: 0; + width: 0; + } + .ms-Persona-placeholder { + display: none; + } + .ms-Persona-image { + display: none; + } + .ms-Persona-presence { + height: 10px; + width: 10px; + top: 10px; + } + .ms-Persona-details { + padding-left: 15px; + } + .ms-Persona-primaryText { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-m; + padding-top: 11px; + } + .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText { + display: none; + } + // This variant includes a semicolon, and is most often presented within a People Picker. + &.ms-Persona--readonly { + padding: 0; + background-color: transparent; + + .ms-Persona-primaryText:after { + content: ';'; + } + } + } + + + // Extra small. + &.ms-Persona--xs { + .ms-Persona-imageArea, .ms-Persona-image { + width: 30px; + height: 30px; + } + .ms-Persona-placeholder { + font-size: 28px; + top: 4px; + } + .ms-Persona-presence { + height: 30px; + width: 4px; + } + .ms-Persona-primaryText { + font-size: @ms-font-size-m; + padding-top: 3px; + } + .ms-Persona-secondaryText { + display: none; + } + } + + + // Small. + &.ms-Persona--sm { + .ms-Persona-imageArea, .ms-Persona-image { + width: 40px; + height: 40px; + } + .ms-Persona-placeholder { + font-size: 38px; + top: 5px; + } + .ms-Persona-presence { + height: 40px; + width: 4px; + } + .ms-Persona-primaryText { + font-size: @ms-font-size-m; + padding-top: 1px; + } + .ms-Persona-secondaryText { + padding-top: 5px; + } + } + + + // Large. + &.ms-Persona--lg { + .ms-Persona-imageArea, .ms-Persona-image { + width: 70px; + height: 70px; + } + .ms-Persona-placeholder { + font-size: 67px; + top: 9px; + } + .ms-Persona-presence { + height: 70px; + width: 7px; + } + .ms-Persona-primaryText { + font-family: @ms-font-family-regular; + } + .ms-Persona-tertiaryText { + display: block; + } + } + + + // Extra large. + &.ms-Persona--xl { + .ms-Persona-imageArea, .ms-Persona-image { + width: 100px; + height: 100px; + } + .ms-Persona-placeholder { + font-size: 95px; + top: 12px; + } + .ms-Persona-presence { + height: 100px; + width: 9px; + } + .ms-Persona-details { + padding-left: 20px; + } + .ms-Persona-primaryText { + font-size: @ms-font-size-xl; + font-family: @ms-font-family-semilight; + margin-top: 2px; + } + .ms-Persona-secondaryText { + padding-top: 7px; + } + .ms-Persona-tertiaryText, .ms-Persona-optionalText { + display: block; + padding-top: 8px; + } + } + + + // Darker text, typically applied when the component has a colored background. + &.ms-Persona--darkText { + .ms-Persona-primaryText { + color: @ms-color-neutralDark; + } + .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText { + color: @ms-color-neutralPrimary; + } + } + + // Hover and focus selectable state + &.ms-Persona--selectable { + cursor: pointer; + padding: 0 10px; + + &:not(.ms-Persona--xl) { + &:hover, + &:focus { + background-color: @ms-color-themeLighter; + outline: 1px solid transparent; + } + } + } + + + + // Presence indicator variants. + + + // Available. + &.ms-Persona--available .ms-Persona-presence { + background-color: @ms-color-presence-available; + } + + // Away. + &.ms-Persona--away .ms-Persona-presence { + background-color: @ms-color-presence-away; + } + + // Blocked. + &.ms-Persona--blocked .ms-Persona-presence { + background-color: @ms-color-presence-blocked-background; + + // Use a gradient to include the stripe on modern browsers. + background-image: -webkit-linear-gradient( + bottom, + @ms-color-presence-blocked-background 0%, + @ms-color-presence-blocked-background 48%, + @ms-color-presence-blocked-line 48%, + @ms-color-presence-blocked-line 52%, + @ms-color-presence-blocked-background 52%, + @ms-color-presence-blocked-background 100% + ); + background-image: linear-gradient( + to bottom, + @ms-color-presence-blocked-background 0%, + @ms-color-presence-blocked-background 48%, + @ms-color-presence-blocked-line 48%, + @ms-color-presence-blocked-line 52%, + @ms-color-presence-blocked-background 52%, + @ms-color-presence-blocked-background 100% + ); + } + + // Busy. + &.ms-Persona--busy .ms-Persona-presence { + background-color: @ms-color-presence-busy-average; + + // Replace solid background with stripes on modern browsers. + background: repeating-linear-gradient( + -45deg, + @ms-color-presence-busy-stripe-light, + @ms-color-presence-busy-stripe-light 3px, + @ms-color-presence-busy-stripe-dark 3px, + @ms-color-presence-busy-stripe-dark 6px + ); + } + + // Do not disturb. + &.ms-Persona--dnd .ms-Persona-presence { + background-color: @ms-color-presence-dnd-background; + + // Use a gradient to include the stripe on modern browsers. + background-image: -webkit-linear-gradient( + bottom, + @ms-color-presence-dnd-background 0%, + @ms-color-presence-dnd-background 48%, + @ms-color-presence-dnd-line 48%, + @ms-color-presence-dnd-line 52%, + @ms-color-presence-dnd-background 52%, + @ms-color-presence-dnd-background 100% + ); + background-image: linear-gradient( + to bottom, + @ms-color-presence-dnd-background 0%, + @ms-color-presence-dnd-background 48%, + @ms-color-presence-dnd-line 48%, + @ms-color-presence-dnd-line 52%, + @ms-color-presence-dnd-background 52%, + @ms-color-presence-dnd-background 100 + ); + } + + // Offline + &.ms-Persona--offline .ms-Persona-presence { + background-color: @ms-color-presence-offline; + } +} diff --git a/src/components/PersonaCard/Jquery.PersonaCard.js b/src/components/PersonaCard/Jquery.PersonaCard.js new file mode 100644 index 00000000..6ea93b9e --- /dev/null +++ b/src/components/PersonaCard/Jquery.PersonaCard.js @@ -0,0 +1,56 @@ +/** + * Persona Card Plugin + * + * Adds basic demonstration functionality to .ms-PersonaCard components. + * + * @param {jQuery Object} One or more .ms-PersonaCard components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.PersonaCard = function () { + + /** Go through each file picker we've been given. */ + return this.each(function () { + + var $personaCard = $(this); + + /** When selecting an action, show its details. */ + $personaCard.on('click', '.ms-PersonaCard-action', function() { + + /** Select the correct tab. */ + $personaCard.find('.ms-PersonaCard-action').removeClass('is-active'); + $(this).addClass('is-active'); + + /** Function for switching selected item into view by adding a class to ul. */ + var updateForItem = function(item){ + var wrapper = document.getElementById("detailList"); + var previousItem = wrapper.className + ""; + var detail = item.charAt(0).toUpperCase() + item.slice(1); + var nextItem = "ms-PersonaCard-detail"+detail; + if (previousItem != nextItem){ + wrapper.classList.remove(previousItem); + wrapper.classList.add(nextItem); + } + } + + /** Get id of selected item */ + var el = $(this).attr('id'); + /** Add detail class to ul to switch it into view. */ + updateForItem(el); + + /** Display the corresponding details. */ + var requestedAction = $(this).attr('id'); + $personaCard.find('.ms-PersonaCard-actionDetails').removeClass('is-active'); + $personaCard.find('#' + requestedAction + '.ms-PersonaCard-actionDetails').addClass('is-active'); + + }); + + /** Toggle more details. */ + $personaCard.on('click', '.ms-PersonaCard-detailExpander', function() { + $(this).parent('.ms-PersonaCard-actionDetails').toggleClass('is-collapsed'); + }); + + }); + + }; +})(jQuery); diff --git a/src/components/PersonaCard/PersonaCard.html b/src/components/PersonaCard/PersonaCard.html new file mode 100644 index 00000000..44fcb478 --- /dev/null +++ b/src/components/PersonaCard/PersonaCard.html @@ -0,0 +1,185 @@ +
      +
      +
      +
      +
      + + +
      +
      +
      +
      +
      Alton Lafferty
      +
      Interior Designer, Contoso
      +
      Office: 7/1234
      +
      Available - Video capable
      +
      +
      +
      +
        +
        • +
        • +
        • +
        • +
      • View profile
        • +
        • +
      +
      +
        +
      • +
        Lync: Start Lync call
        +
        • +
      • +
        Personal: 555.206.2443
        +
        Work: 555.929.8240
        +
        • +
      • +
        Skype: Start Skype call
        +
        • +
      • +
        Personal: alton.lafferty@outlook.com
        +
        Work: altonlafferty@contoso.com +
        • + +
      • +
        +
        +
          +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        Manager
        +
          +
        • + +
          • +
        +
        +
        +
        Staff
        +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        +
        +
        +
        • + +
      +
      +
      + \ No newline at end of file diff --git a/src/components/PersonaCard/PersonaCard.json b/src/components/PersonaCard/PersonaCard.json new file mode 100644 index 00000000..d24a1117 --- /dev/null +++ b/src/components/PersonaCard/PersonaCard.json @@ -0,0 +1,20 @@ +{ + "name": "PersonaCard", + "notes": "", + "template": "PersonaCard.html", + "class": "ms-PersonaCard", + "dependencies": [ + "Persona" + ], + "branches": [ + { + "name": "Regular", + "default": true + }, + { + "name": "Circles", + "notes": "This persona card uses circle personas and has the org chart built in.", + "class": "ms-PersonaCard--circles" + } + ] +} diff --git a/src/components/PersonaCard/PersonaCard.less b/src/components/PersonaCard/PersonaCard.less new file mode 100644 index 00000000..fbf8ef6f --- /dev/null +++ b/src/components/PersonaCard/PersonaCard.less @@ -0,0 +1,328 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Persona Card styles + + +// Small +// +// The persona card docks to the bottom of the viewport. +.ms-PersonaCard { + bottom: 0; + left: 0; + position: fixed; + right: 0; + .ms-u-slideUpIn10; + outline: 1px solid transparent; + + // Circle persona variant + &.ms-PersonaCard--circles { + .ms-Persona.ms-Persona--xl .ms-Persona-placeholder { + font-size: 75px; + } + .ms-Persona-placeholder { + left: 1px; + } + .ms-Persona-imageArea { + width: 100px; + height: 100px; + background-color: @color-neutralLighter; + } + .ms-Persona-imageCircle { + width: 80px; + height: 80px; + margin: 10px auto; + border-radius: 50%; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + background-color: @color-neutralTertiary; + } + .ms-Persona.ms-Persona--xl .ms-Persona-image { + width: 80px; + height: 80px; + } + .ms-Persona.ms-Persona--xl .ms-Persona-presence { + height: 12px; + width: 12px; + border-radius: 50%; + border: 2px solid @color-neutralLighter; + left: auto; + top: auto; + right: 15px; + bottom: 12px; + } + } +} + +.ms-PersonaCard-persona { + background-color: @ms-color-neutralLighter; + + // Move the text down to the next baseline + .ms-Persona .ms-Persona-primaryText { + margin-top: 3px; + } +} + +.ms-PersonaCard-actions { + list-style: none; + margin: 0; + padding: 0 10px; + border-bottom: 1px solid @color-neutralTertiaryAlt; + background-color: @color-white; + .ms-u-borderBox; + height: 50px; +} + +.ms-PersonaCard-action { + display: inline-block; + cursor: pointer; + font-size: 17px; + height: 50px; + line-height: 32px; + padding: 10px; + color: @ms-color-neutralSecondary; + position: relative; + .ms-u-borderBox; + + &:hover { + color: @ms-color-neutralDark; + } + + &:active { + color: @ms-color-themePrimary; + } + + // Currently-selected action + &.is-active { + color: @ms-color-themePrimary; + + // Arrow + &:after { + content: ""; + width: 10px; + height: 10px; + border: 1px solid @ms-color-neutralTertiaryAlt; + background-color: @ms-color-white; + .ms-u-borderBox; + position: absolute; + .rotate(45deg); + border-right: none; + border-bottom: none; + bottom: -5px; + left: 15px; + } + } +} + +.ms-PersonaCard-overflow { + .ms-PersonaCard-action; + font-size: @ms-font-size-m; + font-family: @ms-font-family-semilight; + color: @ms-color-neutralPrimary; + float: right; + margin-top: -1px; + + &:hover { + color: @ms-color-themePrimary; + } +} + +.ms-PersonaCard-orgChart { + color: @ms-color-neutralSecondary; + font-size: 17px; + line-height: 30px; + position: absolute; + right: 12px; + text-align: center; + top: 0; + + &:hover { + color: @ms-color-neutralDark; + cursor: pointer; + } +} + +// Action details +.ms-PersonaCard-actionDetailBox { + min-height: 48px; + overflow-y: auto; + overflow-x: hidden; + background-color: @color-white; +} + +.ms-PersonaCard-actionDetails { + list-style: none; + width: 20%; + float: left; + min-height: 48px; + font-family: @font-family-semilight; + font-size: @font-size-m; + color: @color-neutralSecondary; + padding: 9px 20px; + transition: max-height @ms-duration2 @ms-ease1 .2s; + box-sizing: border-box; + + // State: Contents are collapsed to a single line. + &.is-collapsed { + height: 30px; + overflow: hidden; + + // Show the expander icon. + .ms-PersonaCard-detailExpander:after { + content: '\e088'; + } + } +} + +// Active Items +.ms-PersonaCard-detailChat, +.ms-PersonaCard-detailPhone, +.ms-PersonaCard-detailVideo, +.ms-PersonaCard-detailMail, +.ms-PersonaCard-detailOrg { + overflow: hidden; + width: 500%; + padding: 0; + margin: 0; +} +.ms-PersonaCard-detailOrg { + overflow-y: auto; +} + +.ms-PersonaCard-detailChat { margin-left: 0 !important; } +.ms-PersonaCard-detailPhone { margin-left: -100% !important; } +.ms-PersonaCard-detailVideo { margin-left: -200% !important; } +.ms-PersonaCard-detailMail { margin-left: -300% !important; } +.ms-PersonaCard-detailOrg { margin-left: -400% !important; } + +.ms-PersonaCard-detailChat .detail-1, +.ms-PersonaCard-detailPhone .detail-2, +.ms-PersonaCard-detailVideo .detail-3, +.ms-PersonaCard-detailMail .detail-4{ + max-height: 78px; + transition: max-height .25s ease; +} +.ms-PersonaCard-detailOrg .detail-5 { + max-height: 300px; + transition: max-height .25s ease; +} + +// Inactive Items +.ms-PersonaCard-detailChat .detail-2, +.ms-PersonaCard-detailChat .detail-3, +.ms-PersonaCard-detailChat .detail-4, +.ms-PersonaCard-detailChat .detail-5, +.ms-PersonaCard-detailPhone .detail-1, +.ms-PersonaCard-detailPhone .detail-3, +.ms-PersonaCard-detailPhone .detail-4, +.ms-PersonaCard-detailPhone .detail-5, +.ms-PersonaCard-detailVideo .detail-1, +.ms-PersonaCard-detailVideo .detail-2, +.ms-PersonaCard-detailVideo .detail-4, +.ms-PersonaCard-detailVideo .detail-5, +.ms-PersonaCard-detailMail .detail-1, +.ms-PersonaCard-detailMail .detail-2, +.ms-PersonaCard-detailMail .detail-3, +.ms-PersonaCard-detailMail .detail-5, +.ms-PersonaCard-detailOrg .detail-1, +.ms-PersonaCard-detailOrg .detail-2, +.ms-PersonaCard-detailOrg .detail-3, +.ms-PersonaCard-detailOrg .detail-4 { + max-height: 48px; +} + +// Icon to expand a collapsed actionDetails section. +.ms-PersonaCard-detailExpander { + color: @ms-color-neutralPrimary; + cursor: pointer; + font-size: @ms-font-size-m-plus; + height: 30px; + line-height: 30px; + margin-top: 1px; + position: absolute; + right: 10px; + text-align: center; + width: 30px; + + &:after { + .ms-Icon; + content: '\e087'; + } +} + +.ms-PersonaCard-detailLine { + color: @ms-color-neutralPrimary; + line-height: 30px; + + a { + // TODO: There should be a component for links, or common mixin to apply. + color: @ms-color-themePrimary; + text-decoration: none; + } +} + +// A label for a detail line. +.ms-PersonaCard-detailLabel { + color: @ms-color-neutralSecondary; +} + + +// Org chart +.ms-PersonaCard-action.ms-PersonaCard-orgChart { + &:after { + display: none; + } +} + +// Org list items +.ms-PersonaCard.ms-PersonaCard--circles .ms-OrgChart-listItem { + height: 50px; + width: 100%; + position: relative; + list-style: none; + margin-bottom: 3px; + + .ms-Persona-imageArea { + width: 50px; + height: 50px; + background-color: @color-white; + } + + .ms-Persona-imageCircle { + width: 50px; + height: 50px; + margin: 0; + overflow: hidden; + } +} + +// Circle presence in orgchart list +.ms-PersonaCard.ms-PersonaCard--circles +.ms-OrgChart-list .ms-Persona-presence { + position: absolute; + height: 10px; + width: 10px; + border-radius: 50%; + top: auto; + left: auto; + right: 2px; + bottom: -1px; + border: 2px solid @color-white; +} + + +// Medium and up +// +// The persona card floats over other content, with a maximum width. +@media (min-width: @ms-screen-md-min) { + + // Undock the persona card and give it a shadow. + .ms-PersonaCard { + .drop-shadow(); + max-width: 360px; + position: relative; + } + +} diff --git a/src/components/Pivot/Pivot.html b/src/components/Pivot/Pivot.html new file mode 100644 index 00000000..9edef327 --- /dev/null +++ b/src/components/Pivot/Pivot.html @@ -0,0 +1,8 @@ +
        +
      • My files
        • +
      • Recent
        • +
      • Shared with me
        • +
      • + +
        • +
      diff --git a/src/components/Pivot/Pivot.json b/src/components/Pivot/Pivot.json new file mode 100644 index 00000000..7b99cbdd --- /dev/null +++ b/src/components/Pivot/Pivot.json @@ -0,0 +1,37 @@ +{ + "name": "Pivot", + "notes": "", + "template": "Pivot.html", + "class": "ms-Pivot", + "branches": [ + { + "name": "Pivots", + "default": true, + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Large", + "class": "ms-Pivot--large" + } + ] + }, + + { + "name": "Tabs", + "class": "ms-Pivot--tabs", + "branches": [ + { + "name": "Standard", + "default": true + }, + { + "name": "Large", + "class": "ms-Pivot--large" + } + ] + } + ] +} diff --git a/src/components/Pivot/Pivot.less b/src/components/Pivot/Pivot.less new file mode 100644 index 00000000..183cc8e9 --- /dev/null +++ b/src/components/Pivot/Pivot.less @@ -0,0 +1,156 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Pivot and tab styles + + +// Pivot +.ms-Pivot { + .ms-font-m; + .ms-u-normalize; + height: 30px; + list-style-type: none; + overflow-x: hidden; + white-space: nowrap; +} + +// Pivot/tab +.ms-Pivot-link { + color: @ms-color-neutralPrimary; + display: inline-block; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-m-plus; + line-height: 27px; + margin-right: 15px; + + // Hover/focus + &:hover, &:focus { + color: @ms-color-black; + cursor: pointer; + } + + // Active (pressed) + &:active { + color: @ms-color-themePrimary; + } + + // Selected state + &.is-selected { + color: @ms-color-themePrimary; + font-family: @ms-font-family-semibold; + } +} + +// Large variant - link font size l +.ms-Pivot--large { + // Links + .ms-Pivot-link { + font-size: @ms-font-size-l; + + &.is-selected { + font-family: @ms-font-family-semilight; + } + } +} + +// Overflow (ellipsis) +.ms-Pivot-link.ms-Pivot-link--overflow { + color: @ms-color-neutralSecondary; + + &.is-selected { + color: @ms-color-themePrimary; + } + + // States + &:hover:not(.is-selected), &:focus:not(.is-selected) { color: @ms-color-neutralDark; } + &:active { + color: @ms-color-themePrimary !important; // Hover overriding active state without important + } +} + +// Ellipsis icon +.ms-Pivot-ellipsis { + font-size: @ms-font-size-m-plus; + position: relative; + top: 0; +} + +// Large variant - ellipsis font size l +.ms-Pivot--large { + // Overflow ellipsis + .ms-Pivot-link.ms-Pivot-link--overflow { + &:after { + font-size: @ms-font-size-l; + } + } +} + + +// Tabs +.ms-Pivot.ms-Pivot--tabs { + height: 40px; + + .ms-Pivot-link { + height: 40px; + background-color: @ms-color-neutralLighter; + line-height: 40px; + margin-right: -2px; // Remove space next to inline-block element + padding: 0 10px; + + // States + &:hover:not(.is-selected):not(.ms-Pivot-link--overflow), + &:focus:not(.is-selected):not(.ms-Pivot-link--overflow) { color: @ms-color-black; } + + // Active (pressed) + &:active { + color: @ms-color-white !important; // Hover overriding active state without important + background-color: @ms-color-themePrimary; + } + + // Selected state + &.is-selected { + background-color: @ms-color-themePrimary; + color: @ms-color-white; + font-family: @ms-font-family-semilight; + } + } + + .ms-Pivot-link.ms-Pivot-link--overflow { + &:hover:not(.is-selected), &:focus:not(.is-selected) { + background-color: @ms-color-white; + } + + &:active { + background-color: @ms-color-themePrimary !important; // Hover overriding active state without important + } + } +} + + +// Change font size to regular m size at 640px +@media (min-width: 640px) { + // Links + .ms-Pivot-link { + font-size: @ms-font-size-m; + } + + // Overflow ellipsis + .ms-Pivot-link.ms-Pivot-link--overflow { + &:after { + font-size: @ms-font-size-m; + } + } + +} + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Pivot.ms-Pivot--tabs { + .ms-Pivot-link { + // Selected state + &.is-selected { + font-family: @font-family-semibold; + } + } + } +} diff --git a/src/components/Pivot/jquery.Pivot.js b/src/components/Pivot/jquery.Pivot.js new file mode 100644 index 00000000..b0427277 --- /dev/null +++ b/src/components/Pivot/jquery.Pivot.js @@ -0,0 +1,27 @@ +/** + * Pivot Plugin + * + * Adds basic demonstration functionality to .ms-Pivot components. + * + * @param {jQuery Object} One or more .ms-Pivot components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.Pivot = function () { + + /** Go through each pivot we've been given. */ + return this.each(function () { + + var $pivotContainer = $(this); + + /** When clicking/tapping a link, select it. */ + $pivotContainer.on('click', '.ms-Pivot-link', function(event) { + event.preventDefault(); + $(this).siblings('.ms-Pivot-link').removeClass('is-selected'); + $(this).addClass('is-selected'); + }); + + }); + + }; +})(jQuery); diff --git a/src/components/SearchBox/Jquery.SearchBox.js b/src/components/SearchBox/Jquery.SearchBox.js new file mode 100644 index 00000000..aa96b446 --- /dev/null +++ b/src/components/SearchBox/Jquery.SearchBox.js @@ -0,0 +1,56 @@ +/** + * SearchBox Plugin + * + * Adds basic demonstration functionality to .ms-SearchBox components. + * + * @param {jQuery Object} One or more .ms-SearchBox components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.SearchBox = function () { + + /** Iterate through each text field provided. */ + return this.each(function () { + // Set cancel to false + var cancel = false; + + /** SearchBox focus - hide label and show cancel button */ + $(this).find('.ms-SearchBox-field').on('focus', function() { + /** Hide the label on focus. */ + $(this).siblings('.ms-SearchBox-label').hide(); + // Show cancel button by adding is-active class + $(this).parent('.ms-SearchBox').addClass('is-active'); + }); + + + // If cancel button is selected, change cancel value to true + $(this).find('.ms-SearchBox-closeButton').on('mousedown', function() { + cancel = true; + }); + + /** Show the label again when leaving the field. */ + $(this).find('.ms-SearchBox-field').on('blur', function() { + + // If cancel button is selected remove the text and show the label + if ( cancel == true ) { + $(this).val(''); + $(this).siblings('.ms-SearchBox-label').show(); + } + + // Remove is-active class - hides cancel button + $(this).parent('.ms-SearchBox').removeClass('is-active'); + + /** Only do this if no text was entered. */ + if ($(this).val().length === 0 ) { + $(this).siblings('.ms-SearchBox-label').show(); + } + + // Reset cancel to false + cancel = false; + }); + + + }); + + }; +})(jQuery); diff --git a/src/components/SearchBox/SearchBox.html b/src/components/SearchBox/SearchBox.html new file mode 100644 index 00000000..cd2922d4 --- /dev/null +++ b/src/components/SearchBox/SearchBox.html @@ -0,0 +1,5 @@ +
      + + + +
      diff --git a/src/components/SearchBox/SearchBox.json b/src/components/SearchBox/SearchBox.json new file mode 100644 index 00000000..18d939d6 --- /dev/null +++ b/src/components/SearchBox/SearchBox.json @@ -0,0 +1,19 @@ +{ + "name": "SearchBox", + "notes": "", + "template": "SearchBox.html", + "class": "ms-SearchBox", + "dependencies": [ + "Label" + ], + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] +} diff --git a/src/components/SearchBox/SearchBox.less b/src/components/SearchBox/SearchBox.less new file mode 100644 index 00000000..be43ddef --- /dev/null +++ b/src/components/SearchBox/SearchBox.less @@ -0,0 +1,112 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Search box styles + + +// Single line (default), standard (default) +.ms-SearchBox { + .ms-font-m; + .ms-u-normalize; + position: relative; + margin-bottom: 10px; + display: inline-block; + + // Hover - label + &:hover .ms-Searchbox-label { + color: @ms-color-black; + cursor: text; + } + + // Hover - icon + &:hover .ms-Searchbox-icon { + color: @ms-color-neutralPrimary; + } + + // States - input field + &:hover .ms-Searchbox-field, &:focus .ms-Searchbox-field { + border-color: @ms-color-themePrimary; + background-color: @ms-color-themeTertiary; + } + + // Input field + .ms-SearchBox-field { + .ms-u-normalize; + border: 1px solid @ms-color-themeTertiary; + border-radius: 0; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-m; + color: @ms-color-black; + height: 30px; + padding: 6px 3px 7px 8px; + width: 180px; + + // Focus + &:focus { + border-color: @ms-color-themePrimary; + background-color: @ms-color-themeTertiary; + } + } + + // Disabled state + &.is-disabled { + .ms-SearchBox-label { + .ms-Label.is-disabled; + } + .ms-SearchBox-icon { + color: @ms-color-neutralTertiaryAlt; + } + .ms-SearchBox-field { + background-color: @ms-color-neutralLighter; + border-color: @ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + } + + &.is-active { + .ms-SearchBox-closeButton { + display: block; + outline: 1px solid transparent; + } + } +} + +// Close button - shows on input field focus +.ms-SearchBox-closeButton { + border: none; + cursor: pointer; + position: absolute; + right: 0; + top: 0; + height: 30px; + width: 30px; + background-color: @ms-color-themePrimary; + text-align: center; + display: none; + + // Close icon + .ms-Icon { + line-height: 31px; + font-size: @ms-font-size-l; + color: @ms-color-white; + } +} + + +// Label - text and icon +.ms-SearchBox-label { + position: absolute; + top: 5px; + padding-left: 10px; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-m; + color: @ms-color-neutralSecondary; +} + +// Icon +.ms-SearchBox-icon { + margin-right: 5px; + font-size: @ms-font-size-l; + color: @ms-color-neutralSecondaryAlt; +} diff --git a/src/components/Spinner/Spinner.html b/src/components/Spinner/Spinner.html new file mode 100644 index 00000000..16dc2e9a --- /dev/null +++ b/src/components/Spinner/Spinner.html @@ -0,0 +1 @@ +
      diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js new file mode 100644 index 00000000..adcbb7a8 --- /dev/null +++ b/src/components/Spinner/Spinner.js @@ -0,0 +1,140 @@ +/** + * Spinner Component + * + * An animating activity indicator. + * + */ + +/** + * @namespace fabric + */ +var fabric = fabric || {}; + +/** + * @param {DOMElement} holderElement - The element the Spinner will attach itself to. + * @param {string} type - The type of spinner. Set this property to "sixteen" for sixteen dot version. The default is eight. + */ + +fabric.Spinner = function(holderElement, spinnerType) { + + var _holderElement = holderElement; + var _spinnerType = spinnerType || "eight"; + var eightSize = 0.18; + var sixteenSize = 0.1; + var circleObjects = []; + var animationSpeed = 80; + var interval; + var spinner; + var numCircles; + var offsetSize; + + /** + * @function start - starts or restarts the animation sequence + * @memberOf fabric.Spinner + */ + function start() { + interval = setInterval(function() { + var i = circleObjects.length; + while(i--) { + _fade(circleObjects[i]); + } + }, animationSpeed); + } + + /** + * @function stop - stops the animation sequence + * @memberOf fabric.Spinner + */ + function stop() { + clearInterval(interval); + } + + //private methods + + function _init() { + if(_spinnerType === "sixteen") { + offsetSize = sixteenSize; + numCircles = 16; + } else { + offsetSize = eightSize; + numCircles = 8; + } + _createCirclesAndArrange(); + _initializeOpacities(); + start(); + } + + function _initializeOpacities() { + var i = numCircles, j; + while(i--) { + j = circleObjects.length; + while(j--) { + _fade(circleObjects[j]); + } + } + } + + function _fade(circleObject) { + var opacity; + if(circleObject.j < numCircles) { + if(Math.floor(circleObject.j / (numCircles / 2))) { + opacity = _getOpacity(circleObject.element) - 2 / numCircles; + } else{ + opacity = _getOpacity(circleObject.element) + 2 / numCircles; + } + } else { + circleObject.j = 0; + opacity = 2/ numCircles; + } + _setOpacity(circleObject.element, opacity); + circleObject.j++; + } + + function _getOpacity(element) { + return parseFloat(window.getComputedStyle(element).getPropertyValue("opacity")); + } + + function _setOpacity(element, opacity) { + element.style.opacity = opacity; + } + + function _createCircle() { + var circle = document.createElement('div'); + var parentWidth = parseInt(window.getComputedStyle(spinner).getPropertyValue("width"), 10); + circle.className = "ms-Spinner-circle"; + circle.style.width = circle.style.height = parentWidth * offsetSize + "px"; + return circle; + } + + function _createCirclesAndArrange() { + spinner = document.createElement("div"); + spinner.className = "ms-Spinner"; + _holderElement.appendChild(spinner); + var width = spinner.clientWidth; + var height = spinner.clientHeight; + var angle = 0; + var offset = width * offsetSize; + var step = (2 * Math.PI) / numCircles; + var i = numCircles; + var circleObject; + var radius = (width- offset) * 0.5; + while(i--) { + var circle = _createCircle(); + var x = Math.round(width * 0.5 + radius * Math.cos(angle) - circle.clientWidth * 0.5) - offset * 0.5; + var y = Math.round(height * 0.5 + radius * Math.sin(angle) - circle.clientHeight * 0.5) - offset * 0.5; + spinner.appendChild(circle); + circle.style.left = x + 'px'; + circle.style.top = y + 'px'; + angle += step; + circleObject = {element:circle, j:i}; + circleObjects.push(circleObject); + } + } + + _init(); + + return { + start:start, + stop:stop + }; +}; \ No newline at end of file diff --git a/src/components/Spinner/Spinner.json b/src/components/Spinner/Spinner.json new file mode 100644 index 00000000..eba75631 --- /dev/null +++ b/src/components/Spinner/Spinner.json @@ -0,0 +1,6 @@ +{ + "name": "Spinner", + "notes": "An animating activity indicator.", + "template": "Spinner.html", + "class": "ms-Spinner" +} diff --git a/src/components/Spinner/Spinner.less b/src/components/Spinner/Spinner.less new file mode 100644 index 00000000..44e9c47e --- /dev/null +++ b/src/components/Spinner/Spinner.less @@ -0,0 +1,16 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Spinner styles + +.ms-Spinner { + position: relative; + width: 64px; + height: 64px; +} +.ms-Spinner-circle { + position: absolute; + border-radius: 999px; + background-color: black; + opacity: 0; +} diff --git a/src/components/Table/Table.html b/src/components/Table/Table.html new file mode 100644 index 00000000..ee9ab948 --- /dev/null +++ b/src/components/Table/Table.html @@ -0,0 +1,44 @@ +
      +
      + + File name + Location + Modified + Type +
      +
      + + File name + Location + Modified + Type +
      +
      + + File name + Location + Modified + Type +
      +
      + + File name + Location + Modified + Type +
      +
      + + File name + Location + Modified + Type +
      +
      + + File name + Location + Modified + Type +
      +
      diff --git a/src/components/Table/Table.json b/src/components/Table/Table.json new file mode 100644 index 00000000..e1759518 --- /dev/null +++ b/src/components/Table/Table.json @@ -0,0 +1,12 @@ +{ + "name": "Table", + "notes": "", + "template": "Table.html", + "class": "ms-Table", + "branches": [ + { + "name": "Default", + "default": true + } + ] +} diff --git a/src/components/Table/Table.less b/src/components/Table/Table.less new file mode 100644 index 00000000..6646bf21 --- /dev/null +++ b/src/components/Table/Table.less @@ -0,0 +1,113 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Data table styles + + +.ms-Table { + display: table; + width: 100%; +} + +.ms-Table-row { + display: table-row; + height: 30px; + line-height: 30px; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-s; + color: @ms-color-neutralPrimary; + + &:hover { + background-color: @ms-color-neutralLighter; + cursor: pointer; + outline: 1px solid transparent; + } + + // Rows can be selected. + &.is-selected { + background-color: @ms-color-themeLight; + + // A checkmark in a selected row. + .ms-Table-rowCheck { + background-color: @ms-color-themePrimary; + + // Hide the checkbox. + &:before { + display: none; + } + + // But show the mark. + &:after { + .ms-Icon; + content: '\e041'; + color: @ms-color-white; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } + } + } +} + +.ms-Table-cell { + display: table-cell; + padding: 0 10px; +} + +// Style the first row as a header. +.ms-Table-row:first-child { + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-xs; + color: @ms-color-neutralSecondary; + + .ms-Table-cell, .ms-Table-rowCheck { + border-bottom: 1px solid @ms-color-neutralLight; + } + + .ms-Table-rowCheck:after { + .ms-Icon; + content: '\e041'; + color: @ms-color-neutralTertiary; + font-size: 12px; + position: absolute; + left: 4px; + top: 9px; + } +} + +// On selectable tables, each row has a checkbox. +.ms-Table-rowCheck { + display: table-cell; + width: 20px; + position: relative; + + // Empty checkbox. + &:before { + border: 1px solid @ms-color-neutralTertiary; + content: ''; + display: block; + height: 14px; + left: 2px; + position: absolute; + top: 6px; + width: 14px; + } +} + +// All high contrast styling rules +@media screen and (-ms-high-contrast: active) { + .ms-Table-row { + // Rows can be selected. + &.is-selected { + // A checkmark in a selected row. + .ms-Table-rowCheck { + background: none; + // Show the checkbox. + &:before { + display: block; + } + } + } + } +} diff --git a/src/components/TextField/Jquery.TextField.js b/src/components/TextField/Jquery.TextField.js new file mode 100644 index 00000000..269d463d --- /dev/null +++ b/src/components/TextField/Jquery.TextField.js @@ -0,0 +1,49 @@ +/** + * Text Field Plugin + * + * Adds basic demonstration functionality to .ms-TextField components. + * + * @param {jQuery Object} One or more .ms-TextField components + * @return {jQuery Object} The same components (allows for chaining) + */ +(function ($) { + $.fn.TextField = function () { + + /** Iterate through each text field provided. */ + return this.each(function () { + + /** Does it have a placeholder? */ + if ($(this).hasClass("ms-TextField--placeholder")) { + + /** Hide the label on click. */ + $(this).on('click', function () { + $(this).find('.ms-Label').hide(); + }); + + /** Show the label again when leaving the field. */ + $(this).find('.ms-TextField-field').on('blur', function () { + + /** Only do this if no text was entered. */ + if ($(this).val().length === 0) { + $(this).siblings('.ms-Label').show(); + } + }); + }; + + /** Underlined - adding/removing a focus class */ + if ($(this).hasClass('ms-TextField--underlined')) { + + /** Add is-active class - changes border color to theme primary */ + $(this).find('.ms-TextField-field').on('focus', function() { + $(this).parent('.ms-TextField--underlined').addClass('is-active'); + }); + + /** Remove is-active on blur of textfield */ + $(this).find('.ms-TextField-field').on('blur', function() { + $(this).parent('.ms-TextField--underlined').removeClass('is-active'); + }); + }; + + }); + }; +})(jQuery); diff --git a/src/components/TextField/TextField.Multiline.html b/src/components/TextField/TextField.Multiline.html new file mode 100644 index 00000000..772a7ff6 --- /dev/null +++ b/src/components/TextField/TextField.Multiline.html @@ -0,0 +1,4 @@ +
      + + +
      diff --git a/src/components/TextField/TextField.Placeholder.html b/src/components/TextField/TextField.Placeholder.html new file mode 100644 index 00000000..6cf4e3df --- /dev/null +++ b/src/components/TextField/TextField.Placeholder.html @@ -0,0 +1,8 @@ +
      + + +
      +
      + + +
      diff --git a/src/components/TextField/TextField.Underlined.html b/src/components/TextField/TextField.Underlined.html new file mode 100644 index 00000000..1dd1ee5a --- /dev/null +++ b/src/components/TextField/TextField.Underlined.html @@ -0,0 +1,4 @@ +
      + + +
      diff --git a/src/components/TextField/TextField.html b/src/components/TextField/TextField.html new file mode 100644 index 00000000..2d5ba2ce --- /dev/null +++ b/src/components/TextField/TextField.html @@ -0,0 +1,4 @@ +
      + + +
      diff --git a/src/components/TextField/TextField.json b/src/components/TextField/TextField.json new file mode 100644 index 00000000..f0c0085a --- /dev/null +++ b/src/components/TextField/TextField.json @@ -0,0 +1,98 @@ +{ + "name": "TextField", + "notes": "", + "template": "TextField.html", + "class": "ms-TextField", + "branches": [ + { + "name": "Standard", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Placeholder", + "class": "ms-TextField--placeholder", + "template": "TextField.Placeholder.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Underlined", + "class": "ms-TextField--underlined", + "template": "Textfield.Underlined.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Multiline", + "class": "ms-TextField--multiline", + "template": "Textfield.Multiline.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + }, + { + "name": "Ml Placeholder", + "class": "ms-TextField--multiline ms-TextField--placeholder", + "template": "Textfield.Multiline.html", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + }, + { + "name": "Required", + "class": "is-required" + } + ] + } + ] +} diff --git a/src/components/TextField/TextField.less b/src/components/TextField/TextField.less new file mode 100644 index 00000000..a75e7044 --- /dev/null +++ b/src/components/TextField/TextField.less @@ -0,0 +1,177 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Single line (input) and multiline (textarea) form field styles + + +@import (reference) '../Label/Label.less'; + + +// Single line (default), standard (default) +.ms-TextField { + .ms-font-m; + .ms-u-normalize; + margin-bottom: 8px; + + &.is-disabled { + .ms-TextField-field { + background-color: @ms-color-neutralLighter; + border-color: @ms-color-neutralLighter; + pointer-events: none; + cursor: default; + } + + .input-placeholder({ + color: @ms-color-neutralTertiary; + }) + } + + &.is-required { + .ms-Label { + .ms-Label.is-required; + } + + .input-placeholder({ + .ms-Label.is-required; + }) + } + + &.is-active { + border-color: @ms-color-themePrimary !important; + } +} + +.ms-TextField-field { + .ms-u-normalize; + border: 1px solid @ms-color-neutralTertiaryAlt; + border-radius: 0; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-s; + color: @ms-color-neutralPrimary; + height: 32px; + padding: 6px 10px 8px; + width: 100%; + min-width: 180px; + + &:hover { + border-color: @ms-color-neutralSecondaryAlt; + } + + &:focus { + border-color: @ms-color-themePrimary; + } + + &:hover, + &:focus { + outline: 1px solid transparent; + } + + .input-placeholder({ + color: @ms-color-neutralSecondary; + }) +} + + +//== Modifier: Single line (default), placeholder label +// +.ms-TextField.ms-TextField--placeholder { + position: relative; + + .ms-Label { + position: absolute; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-s; + color: @ms-color-neutralSecondary; + padding: 7px 0 7px 10px; + } + + &.is-disabled { + color: @ms-color-neutralTertiary; + + .ms-Label { + .ms-Label.is-disabled; + } + } +} + + +//== Modifier: Single line (default), underlined +// +.ms-TextField.ms-TextField--underlined { + border-bottom: 1px solid @ms-color-neutralTertiaryAlt; + display: table; + width: 100%; + min-width: 180px; + + &:hover { + border-color: @ms-color-neutralSecondaryAlt; + } + + &:active, + &:focus { + border-color: @ms-color-themePrimary; + } + + .ms-Label { + font-size: @ms-font-size-s; + margin-right: 8px; + display: table-cell; + vertical-align: bottom; + padding-left: 12px; + padding-bottom: 5px; + height: 32px; + width: 1%; + } + + .ms-TextField-field { + border: none; + float: left; + display: table-cell; + text-align: left; + padding-top: 8px; + padding-bottom: 2px; + + &:active, + &:focus { + outline: 0; + } + } + + &.is-disabled { + border-bottom-color: @ms-color-neutralLight; + + .ms-Label { + .ms-Label.is-disabled; + } + + .ms-TextField-field { + background-color: transparent; + color: @ms-color-neutralTertiary; + } + } +} + + +//== Modifier: Multiline textfield +// +.ms-TextField.ms-TextField--multiline { + .ms-TextField-field { + .ms-font-s; + line-height: 17px; + min-height: 60px; + min-width: 260px; + padding-top: 6px; + overflow: auto; + } +} + + +//== All high contrast styling rules +// +@media screen and (-ms-high-contrast: active) { + .ms-TextField { + .ms-TextField-field { + outline: 1px solid transparent; + } + } +} diff --git a/src/components/Toggle/Toggle.html b/src/components/Toggle/Toggle.html new file mode 100644 index 00000000..6619a5f4 --- /dev/null +++ b/src/components/Toggle/Toggle.html @@ -0,0 +1,17 @@ +
      + Let apps use my location + + +
      + +
      + Let apps access my name, picture, and other domain + + +
      diff --git a/src/components/Toggle/Toggle.json b/src/components/Toggle/Toggle.json new file mode 100644 index 00000000..85080609 --- /dev/null +++ b/src/components/Toggle/Toggle.json @@ -0,0 +1,37 @@ +{ + "name": "Toggle", + "notes": "", + "template": "Toggle.html", + "class": "ms-Toggle", + "branches": [ +{ + "name": "Text above", + "class": "ms-Toggle--textAbove", + "default": true, + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + }, + { + "name": "Text left", + "class": "ms-Toggle--textLeft", + "branches": [ + { + "name": "Enabled", + "default": true + }, + { + "name": "Disabled", + "class": "is-disabled" + } + ] + } + ] +} diff --git a/src/components/Toggle/Toggle.less b/src/components/Toggle/Toggle.less new file mode 100644 index 00000000..06e86b90 --- /dev/null +++ b/src/components/Toggle/Toggle.less @@ -0,0 +1,173 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Toggle styles + + +@import (reference) '../Label/Label.less'; + + +// Toggle +.ms-Toggle { + .ms-font-m; + .ms-u-normalize; + position: relative; + margin-bottom: 10px; + display: block; + + // Action label (on/off) on the right of the toggle + .ms-Label { + position: relative; + padding-left: 56px; + top: -8px; + font-size: @ms-font-size-s; + } + + // States + &:hover { + .ms-Label { color: @ms-color-black; } + } + &:active { + .ms-Label { color: @ms-color-neutralPrimary; } + } + + // Disabled state + &.is-disabled { + .ms-Label { + .ms-Label.is-disabled !important; + } + .ms-Toggle-field { + background-color: @ms-color-white !important; + border-color: @ms-color-neutralTertiaryAlt !important; + pointer-events: none !important; + cursor: default !important; + + &:before { + background-color: @ms-color-neutralTertiaryAlt !important; + } + } + } + + // Description text above + &.ms-Toggle--textAbove { + .ms-Toggle-description { + display: block; + margin-bottom: 10px; + } + } + + // Description text left + &.ms-Toggle--textLeft { + width: 225px; + margin-bottom: 30px; + + .ms-Toggle-description { + display: inline-block; + max-width: 150px; + top: -3px; + } + + .ms-Toggle-field { + float: right; + } + } + + &.is-active {} +} + +.ms-Toggle-input { + display: none; // Hide the original, unstyled element +} + +// Description text +.ms-Toggle-description { + position: relative; + font-size: @ms-font-size-s; + vertical-align: top; +} + + + +// Toggle input field +.ms-Toggle-field { + position: relative; + display: inline-block; + width: 50px; + height: 20px; + box-sizing: border-box; + border: 3px @ms-color-neutralTertiaryAlt solid; + cursor: pointer; +} + +// On/Off slide states +.ms-Toggle-input { + + // Unchecked + &:not(:checked) + .ms-Toggle-field { + background-color: @ms-color-neutralLighter; + position: relative; + + // Slider + &:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -3px; + left: -3px; + width: 10px; + height: 20px; + border-right: 3px solid @ms-color-white; + background-color: @ms-color-neutralSecondaryAlt; + outline: 2px solid transparent; + } + + // States + &:hover { background-color: @ms-color-neutralLight; } + &:active { background-color: @ms-color-themePrimary; } + + // Show the off label / hide the on label + .ms-Label--off { + display: block; + } + .ms-Label--on { + display: none; + } + } + + // Checked + &:checked { + & + .ms-Toggle-field { + background-color: @ms-color-themePrimary; + position: relative; + + // Slider + &:before { + position: absolute; + display: block; + box-sizing: content-box; + content: ''; + top: -3px; + right: -3px; + width: 10px; + height: 20px; + border-left: 3px solid @ms-color-white; + background-color: @ms-color-neutralSecondaryAlt; + outline: 2px solid transparent; + } + + // States + &:hover { background-color: @ms-color-themeDark; } + &:active { background-color: @ms-color-themePrimary; } + + // Show the on label / hide the off label + .ms-Label--off { + display: none; + } + .ms-Label--on { + display: block; + } + } + } + +} diff --git a/src/less/Fabric.Components.less b/src/less/Fabric.Components.less new file mode 100644 index 00000000..48e14462 --- /dev/null +++ b/src/less/Fabric.Components.less @@ -0,0 +1,33 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Components module loader + + +@import (reference) 'Fabric.less'; + +@import '../components/Breadcrumb/Breadcrumb.less'; +@import '../components/Button/Button.less'; +@import '../components/Callout/Callout.less'; +@import '../components/ChoiceField/ChoiceField.less'; +@import '../components/ContextualMenu/ContextualMenu.less'; +@import '../components/Datepicker/DatePicker.less'; +@import '../components/Dialog/Dialog.less'; +@import '../components/Dropdown/Dropdown.less'; +@import '../components/Label/Label.less'; +@import '../components/Link/Link.less'; +@import '../components/List/List.less'; +@import '../components/ListItem/ListItem.less'; +@import '../components/NavBar/NavBar.less'; +@import '../components/OrgChart/OrgChart.less'; +@import '../components/Overlay/Overlay.less'; +@import '../components/Panel/Panel.less'; +@import '../components/PeoplePicker/PeoplePicker.less'; +@import '../components/Persona/Persona.less'; +@import '../components/PersonaCard/PersonaCard.less'; +@import '../components/Pivot/Pivot.less'; +@import '../components/SearchBox/Searchbox.less'; +@import '../components/Spinner/Spinner.less'; +@import '../components/Table/Table.less'; +@import '../components/TextField/TextField.less'; +@import '../components/Toggle/Toggle.less'; diff --git a/src/less/Fabric.RTL.less b/src/less/Fabric.RTL.less new file mode 100644 index 00000000..30ed7532 --- /dev/null +++ b/src/less/Fabric.RTL.less @@ -0,0 +1,37 @@ +// +// OSS Framework Design Language +// -------------------------------------------------- +// Fabric Core Module Loader (RTL) + +// Common utilities +@import '_Fabric.Utilities.less'; +@import '_Fabric.ZIndex.Variables.less'; +@import (reference) '_Fabric.Mixins.less'; + +// Colors +@import '_Fabric.Color.Variables.less'; +@import '_Fabric.Color.Mixins.less'; + +// Typography +@import '_Fabric.Typography.Variables.less'; +@import '_Fabric.Typography.Fonts.less'; +@import '_Fabric.Typography.less'; +@import '_Fabric.Typography.Languageoverrides.less'; + +// Icons +@import '_Fabric.Icons.Font.less'; +@import '_Fabric.Icons.RTL.less'; + +// Animations +@import '_Fabric.Animations.RTL.less'; + +// Responsive +@import '_Fabric.Responsive.Variables.less'; +@import '_Fabric.Responsive.Utilities.less'; + +// Grid +@import '_Fabric.Grid.less'; + +// Office colors +@import '_Office.Color.Variables.less'; +@import '_Office.Color.Mixins.less'; diff --git a/src/less/Fabric.less b/src/less/Fabric.less new file mode 100644 index 00000000..7a9ca6e9 --- /dev/null +++ b/src/less/Fabric.less @@ -0,0 +1,38 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Core Module Loader + + +// Common utilities +@import '_Fabric.Utilities.less'; +@import '_Fabric.ZIndex.Variables.less'; +@import (reference) '_Fabric.Mixins.less'; + +// Colors +@import '_Fabric.Color.Variables.less'; +@import '_Fabric.Color.Mixins.less'; + +// Typography +@import '_Fabric.Typography.Variables.less'; +@import '_Fabric.Typography.less'; +@import '_Fabric.Typography.Fonts.less'; +@import '_Fabric.Typography.Languageoverrides.less'; + +// Icons +@import '_Fabric.Icons.Font.less'; +@import '_Fabric.Icons.less'; + +// Animations +@import '_Fabric.Animations.less'; + +// Responsive +@import '_Fabric.Responsive.Variables.less'; +@import '_Fabric.Responsive.Utilities.less'; + +// Grid +@import '_Fabric.Grid.less'; + +// Office colors +@import '_Office.Color.Variables.less'; +@import '_Office.Color.Mixins.less'; diff --git a/src/less/_Fabric.Animations.RTL.less b/src/less/_Fabric.Animations.RTL.less new file mode 100644 index 00000000..634850b2 --- /dev/null +++ b/src/less/_Fabric.Animations.RTL.less @@ -0,0 +1,62 @@ +// RTL overrides for animations +@import '_Fabric.Animations.less'; + +// slideRightIn40 +.ms-u-slideRightIn40, +.slideRightIn40 { + .animationMix(fadeIn, slideLeft40; @ms-duration3; @ms-ease1); +} + +// slideLeftIn40 +.ms-u-slideLeftIn40, +.slideLeftIn40 { + .animationMix(fadeIn, slideRight40; @ms-duration3; @ms-ease1); +} + +// slideRightIn400 +.ms-u-slideRightIn400, +.slideRightIn400 { + .animationMix(fadeIn, slideLeft400; @ms-duration3; @ms-ease1); +} + +// slideLeftIn400 +.ms-u-slideLeftIn400, +.slideLeftIn400 { + .animationMix(fadeIn, slideRight400; @ms-duration3; @ms-ease1); +} + +// slideRightOut40 +.ms-u-slideRightOut40, +.slideRightOut40 { + .animationMix(fadeOut, slideLeftOut40; @ms-duration1; @ms-ease2); +} + +// slideLeftOut40 +.ms-u-slideLeftOut40, +.slideLeftOut40 { + .animationMix(fadeOut, slideRightOut40; @ms-duration1; @ms-ease2); +} + +// slideRightOut400 +.ms-u-slideRightOut400, +.slideRightOut400 { + .animationMix(fadeOut, slideLeftOut400; @ms-duration1; @ms-ease2); +} + +// slideLeftOut400 +.ms-u-slideLeftOut400, +.slideLeftOut400 { + .animationMix(fadeOut, slideRightOut400; @ms-duration1; @ms-ease2); +} + +// rotate90deg +.ms-u-rotate90deg, +.rotate90deg { + .animationMix(rotateN90; 0.1s; @ms-ease2); +} + +// rotateN90deg +.ms-u-rotateN90deg, +.rotateN90deg { + .animationMix(rotate90; 0.1s; @ms-ease2); +} diff --git a/src/less/_Fabric.Animations.less b/src/less/_Fabric.Animations.less new file mode 100644 index 00000000..ca897f7e --- /dev/null +++ b/src/less/_Fabric.Animations.less @@ -0,0 +1,449 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Animations + + +// Note that all animation classes should begin with the "ms-u" utility prefix. +// The original class names are deprecated and will be removed in a future release. + +// Variables +@ms-ease1: cubic-bezier(0.1,0.9,0.2,1); +@ms-ease2: cubic-bezier(0.1,0.25,0.75,0.9); +@ms-duration1: 0.167s; +@ms-duration2: 0.267s; +@ms-duration3: 0.367s; +@ms-duration4: 0.467s; + + +// Animation mixin +.animationMix(@ms-name; @ms-duration; @ms-ease: @ms-ease1; @ms-fillMode: both) { + .animation-name(@ms-name); + .animation-duration(@ms-duration); + .animation-timing-function(@ms-ease); + .animation-fill-mode(@ms-fillMode); +} + +// slideRightIn40 +.ms-u-slideRightIn40, +.slideRightIn40 { + .animationMix(fadeIn, slideRight40; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideRight40 { + from { -webkit-transform:translate3d(-40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRight40 { + from { transform:translate3d(-40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn40 +.ms-u-slideLeftIn40, +.slideLeftIn40 { + .animationMix(fadeIn, slideLeft40; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideLeft40 { + from { -webkit-transform:translate3d(40px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeft40 { + from { transform:translate3d(40px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightIn400 +.ms-u-slideRightIn400, +.slideRightIn400 { + .animationMix(fadeIn, slideRight400; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideRight400 { + from { -webkit-transform:translate3d(-400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideRight400 { + from { transform:translate3d(-400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideLeftIn400 +.ms-u-slideLeftIn400, +.slideLeftIn400 { + .animationMix(fadeIn, slideLeft400; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideLeft400 { + from { -webkit-transform:translate3d(400px, 0px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideLeft400 { + from { transform:translate3d(400px, 0px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn20 +.ms-u-slideUpIn20, +.slideUpIn20 { + .animationMix(fadeIn, slideUp20; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideUp20 { + from { -webkit-transform:translate3d(0px, 20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUp20 { + from { transform:translate3d(0px, 20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideUpIn10 +.ms-u-slideUpIn10, +.slideUpIn10 { + .animationMix(fadeIn, slideUp10; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideUp10 { + from { -webkit-transform:translate3d(0px, 10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideUp10 { + from { transform:translate3d(0px, 10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn20 +.ms-u-slideDownIn20, +.slideDownIn20 { + .animationMix(fadeIn, slideDown20; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes slideDown20 { + from { -webkit-transform:translate3d(0px, -20px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDown20 { + from { transform:translate3d(0px, -20px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideDownIn10 +.ms-u-slideDownIn10, +.slideDownIn10 { + .animationMix(fadeIn, slideDown10; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideDown10 { + from { -webkit-transform:translate3d(0px, -10px, 0px); } + to { -webkit-transform:translate3d(0px, 0px, 0px); } +} +@keyframes slideDown10 { + from { transform:translate3d(0px, -10px, 0px); } + to { transform:translate3d(0px, 0px, 0px); } +} + +// slideRightOut40 +.ms-u-slideRightOut40, +.slideRightOut40 { + .animationMix(fadeOut, slideRightOut40; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideRightOut40 { + from { -webkit-transform:translate3d(0px, 0px, 0px); } + to { -webkit-transform:translate3d(40px, 0px, 0px); } +} +@keyframes slideRightOut40 { + from { transform:translate3d(0px, 0px, 0px); } + to { transform:translate3d(40px, 0px, 0px); } +} + +// slideLeftOut40 +.ms-u-slideLeftOut40, +.slideLeftOut40 { + .animationMix(fadeOut, slideLeftOut40; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideLeftOut40 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-40px, 0px, 0px); } +} +@keyframes slideLeftOut40 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-40px, 0px, 0px); } +} + +// slideRightOut400 +.ms-u-slideRightOut400, +.slideRightOut400 { + .animationMix(fadeOut, slideRightOut400; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideRightOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(400px, 0px, 0px); } +} +@keyframes slideRightOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(400px, 0px, 0px); } +} + +// slideLeftOut400 +.ms-u-slideLeftOut400, +.slideLeftOut400 { + .animationMix(fadeOut, slideLeftOut400; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideLeftOut400 { + from { -webkit-transform:translate3d(0, 0px, 0px); } + to { -webkit-transform:translate3d(-400px, 0px, 0px); } +} +@keyframes slideLeftOut400 { + from { transform:translate3d(0, 0px, 0px); } + to { transform:translate3d(-400px, 0px, 0px); } +} + +// slideUpOut20 +.ms-u-slideUpOut20, +.slideUpOut20 { + .animationMix(fadeOut, slideUpOut20; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideUpOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -20px, 0px); } +} +@keyframes slideUpOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -20px, 0px); } +} + +// slideUpOut10 +.ms-u-slideUpOut10, +.slideUpOut10 { + .animationMix(fadeOut, slideUpOut10; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideUpOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, -10px, 0px); } +} +@keyframes slideUpOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, -10px, 0px); } +} + +// slideDownOut20 +.ms-u-slideDownOut20, +.slideDownOut20 { + .animationMix(fadeOut, slideDownOut20; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideDownOut20 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 20px, 0px); } +} +@keyframes slideDownOut20 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 20px, 0px); } +} + +// slideDownOut10 +.ms-u-slideDownOut10, +.slideDownOut10 { + .animationMix(fadeOut, slideDownOut10; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes slideDownOut10 { + from { -webkit-transform:translate3d(0px, 0, 0px); } + to { -webkit-transform:translate3d(0px, 10px, 0px); } +} +@keyframes slideDownOut10 { + from { transform:translate3d(0px, 0, 0px); } + to { transform:translate3d(0px, 10px, 0px); } +} + +// scaleUpIn100 +.ms-u-scaleUpIn100, +.scaleUpIn100 { + .animationMix(fadeIn, scaleUp100; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes scaleUp100 { + from { -webkit-transform:scale3d(.98, .98, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleUp100 { + from { transform:scale3d(.98, .98, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleDownIn100 +.ms-u-scaleDownIn100, +.scaleDownIn100 { + .animationMix(fadeIn, scaleDown100; @ms-duration3; @ms-ease1); +} +@-webkit-keyframes scaleDown100 { + from { -webkit-transform:scale3d(1.03, 1.03, 1); } + to { -webkit-transform:scale3d(1, 1, 1); } +} +@keyframes scaleDown100 { + from { transform:scale3d(1.03, 1.03, 1); } + to { transform:scale3d(1, 1, 1); } +} + +// scaleUpOut103 +.ms-u-scaleUpOut103, +.scaleUpOut103 { + .animationMix(fadeOut, scaleUp103; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes scaleUp103 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(1.03, 1.03, 1); } +} +@keyframes scaleUp103 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(1.03, 1.03, 1); } +} + +// scaleDownOut98 +.ms-u-scaleDownOut98, +.scaleDownOut98 { + .animationMix(fadeOut, scaleDown98; @ms-duration1; @ms-ease2); +} +@-webkit-keyframes scaleDown98 { + from { -webkit-transform:scale3d(1, 1, 1); } + to { -webkit-transform:scale3d(0.98, 0.98, 1); } +} +@keyframes scaleDown98 { + from { transform:scale3d(1, 1, 1); } + to { transform:scale3d(0.98, 0.98, 1); } +} + +// fadeIn +.ms-u-fadeIn100, .ms-u-fadeIn200, .ms-u-fadeIn400, .ms-u-fadeIn500, +.fadeIn100, .fadeIn200, .fadeIn400, .fadeIn500 { + -webkit-animation-duration: @ms-duration3; + -webkit-animation-name: fadeIn; + -webkit-animation-fill-mode: both; + animation-duration: @ms-duration3; + animation-name: fadeIn; + animation-fill-mode: both; +} +.ms-u-fadeIn100, +.fadeIn100 { + -webkit-animation-duration: @ms-duration1; + animation-duration: @ms-duration1; +} +.ms-u-fadeIn200, +.fadeIn200 { + -webkit-animation-duration: @ms-duration2; + animation-duration: @ms-duration2; +} +.ms-u-fadeIn500, +.fadeIn500 { + -webkit-animation-duration: @ms-duration4; + animation-duration: @ms-duration4; +} +@-webkit-keyframes fadeIn { + from { opacity: 0; -webkit-animation-timing-function: @ms-ease2; } + to { opacity: 1; } +} +@keyframes fadeIn { + from { opacity: 0; animation-timing-function: @ms-ease2; } + to { opacity: 1; } +} + +// fadeOut +.ms-u-fadeOut100, .ms-u-fadeOut200, .ms-u-fadeOut400, .ms-u-fadeOut500, +.fadeOut100, .fadeOut200, .fadeOut400, .fadeOut500 { + -webkit-animation-duration: @ms-duration3; + -webkit-animation-name: fadeOut; + -webkit-animation-fill-mode: both; + animation-duration: @ms-duration3; + animation-name: fadeOut; + animation-fill-mode: both; +} +.ms-u-fadeOut100, +.fadeOut100 { + -webkit-animation-duration: 0.1s; + animation-duration: 0.1s; +} +.ms-u-fadeOut200, +.fadeOut200 { + -webkit-animation-duration: @ms-duration1; + animation-duration: @ms-duration1; +} +.ms-u-fadeOut500, +.fadeOut500 { + -webkit-animation-duration: @ms-duration4; + animation-duration: @ms-duration4; +} +@-webkit-keyframes fadeOut { + from { opacity: 1; -webkit-animation-timing-function: @ms-ease2; } + to { opacity: 0; } +} +@keyframes fadeOut { + from { opacity: 1; animation-timing-function: @ms-ease2; } + to { opacity: 0; } +} + +// rotate90deg +.ms-u-rotate90deg, +.rotate90deg { + .animationMix(rotate90; 0.1s; @ms-ease2); +} +@-webkit-keyframes rotate90 { + from { -webkit-transform:rotateZ(0deg); } + to { -webkit-transform:rotateZ(90deg); } +} +@keyframes rotate90 { + from { transform:rotateZ(0deg); } + to { transform:rotateZ(90deg); } +} + +// rotateN90deg +.ms-u-rotateN90deg, +.rotateN90deg { + .animationMix(rotateN90; 0.1s; @ms-ease2); +} +@-webkit-keyframes rotateN90 { + from { -webkit-transform:rotateZ(90deg); } + to { -webkit-transform:rotateZ(0deg); } +} +@keyframes rotateN90 { + from { transform:rotateZ(90deg); } + to { transform:rotateZ(0deg); } +} + +// expandCollapse400 +.ms-u-expandCollapse400, +.expandCollapse400 { + -webkit-transition: height @ms-duration3 @ms-ease2; + transition: height @ms-duration3 @ms-ease2; +} + +// expandCollapse200 +.ms-u-expandCollapse200, +.expandCollapse200 { + -webkit-transition: height @ms-duration1 @ms-ease2; + transition: height @ms-duration1 @ms-ease2; +} + +// expandCollapse100 +.ms-u-expandCollapse100, +.expandCollapse100 { + -webkit-transition: height 0.1s @ms-ease2; + transition: height 0.1s @ms-ease2; +} + +// delay100 +.ms-u-delay100, +.delay100 { + -webkit-animation-delay: @ms-duration1; + animation-delay: @ms-duration1; +} + +// delay200 +.ms-u-delay200, +.delay200 { + -webkit-animation-delay: .267s; + animation-delay: .267s; +} + + +// PLEASE NOTE: +// THE VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY ANIMATION VARIABLES: + +@ease1: @ms-ease1; +@ease2: @ms-ease2; +@duration1: @ms-duration1; +@duration2: @ms-duration2; +@duration3: @ms-duration3; +@duration4: @ms-duration4; diff --git a/src/less/_Fabric.Color.Mixins.less b/src/less/_Fabric.Color.Mixins.less new file mode 100644 index 00000000..3a115e95 --- /dev/null +++ b/src/less/_Fabric.Color.Mixins.less @@ -0,0 +1,500 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Mixins + + +//== Background colors +// +// Theme colors +.ms-bg-color-themeDark, .ms-bg-color-themeDark-hover:hover, +.ms-bgColor-themeDark, .ms-bgColor-themeDark--hover:hover { + background-color: @ms-color-themeDark; +} + +.ms-bg-color-themeDarkAlt, .ms-bg-color-themeDarkAlt-hover:hover, +.ms-bgColor-themeDarkAlt, .ms-bgColor-themeDarkAlt--hover:hover { + background-color: @ms-color-themeDarkAlt; +} + +.ms-bg-color-themeDarker, .ms-bg-color-themeDarker-hover:hover, +.ms-bgColor-themeDarker, .ms-bgColor-themeDarker--hover:hover { + background-color: @ms-color-themeDarker; +} + +.ms-bg-color-themePrimary, .ms-bg-color-themePrimary-hover:hover, +.ms-bgColor-themePrimary, .ms-bgColor-themePrimary--hover:hover { + background-color: @ms-color-themePrimary; +} + +.ms-bg-color-themeSecondary, .ms-bg-color-themeSecondary-hover:hover, +.ms-bgColor-themeSecondary, .ms-bgColor-themeSecondary--hover:hover { + background-color: @ms-color-themeSecondary; +} + +.ms-bg-color-themeTertiary, .ms-bg-color-themeTertiary-hover:hover, +.ms-bgColor-themeTertiary, .ms-bgColor-themeTertiary--hover:hover { + background-color: @ms-color-themeTertiary; +} + +.ms-bg-color-themeLight, .ms-bg-color-themeLight-hover:hover, +.ms-bgColor-themeLight, .ms-bgColor-themeLight--hover:hover { + background-color: @ms-color-themeLight; +} + +.ms-bg-color-themeLighter, .ms-bg-color-themeLighter-hover:hover, +.ms-bgColor-themeLighter, .ms-bgColor-themeLighter--hover:hover { + background-color: @ms-color-themeLighter; +} + +.ms-bg-color-themeLighterAlt, .ms-bg-color-themeLighterAlt-hover:hover, +.ms-bgColor-themeLighterAlt, .ms-bgColor-themeLighterAlt--hover:hover { + background-color: @ms-color-themeLighterAlt; +} + + +// Neutral colors +.ms-bg-color-black, .ms-bg-color-black-hover:hover, +.ms-bgColor-black, .ms-bgColor-black--hover:hover { + background-color: @ms-color-black; +} + +.ms-bg-color-neutralDark, .ms-bg-color-neutralDark-hover:hover, +.ms-bgColor-neutralDark, .ms-bgColor-neutralDark--hover:hover { + background-color: @ms-color-neutralDark; +} + +.ms-bg-color-neutralPrimary, .ms-bg-color-neutralPrimary-hover:hover, +.ms-bgColor-neutralPrimary, .ms-bgColor-neutralPrimary--hover:hover { + background-color: @ms-color-neutralPrimary; +} + +.ms-bg-color-neutralSecondary, .ms-bg-color-neutralSecondary-hover:hover, +.ms-bgColor-neutralSecondary, .ms-bgColor-neutralSecondary--hover:hover { + background-color: @ms-color-neutralSecondary; +} + +.ms-bg-color-neutralSecondaryAlt, .ms-bg-color-neutralSecondaryAlt-hover:hover, +.ms-bgColor-neutralSecondaryAlt, .ms-bgColor-neutralSecondaryAlt--hover:hover { + background-color: @ms-color-neutralSecondaryAlt; +} + +.ms-bg-color-neutralTertiary, .ms-bg-color-neutralTertiary-hover:hover, +.ms-bgColor-neutralTertiary, .ms-bgColor-neutralTertiary--hover:hover { + background-color: @ms-color-neutralTertiary; +} + +.ms-bg-color-neutralTertiaryAlt, .ms-bg-color-neutralTertiaryAlt-hover:hover, +.ms-bgColor-neutralTertiaryAlt, .ms-bgColor-neutralTertiaryAlt--hover:hover { + background-color: @ms-color-neutralTertiaryAlt; +} + +.ms-bg-color-neutralLight, .ms-bg-color-neutralLight-hover:hover, +.ms-bgColor-neutralLight, .ms-bgColor-neutralLight--hover:hover { + background-color: @ms-color-neutralLight; +} + +.ms-bg-color-neutralLighter, .ms-bg-color-neutralLighter-hover:hover, +.ms-bgColor-neutralLighter, .ms-bgColor-neutralLighter--hover:hover { + background-color: @ms-color-neutralLighter; +} + +.ms-bg-color-neutralLighterAlt, .ms-bg-color-neutralLighterAlt-hover:hover, +.ms-bgColor-neutralLighterAlt, .ms-bgColor-neutralLighterAlt--hover:hover { + background-color: @ms-color-neutralLighterAlt; +} + +.ms-bg-color-white, .ms-bg-color-white-hover:hover, +.ms-bgColor-white, .ms-bgColor-white--hover:hover { + background-color: @ms-color-white; +} + + +// Brand and accent colors +.ms-bg-color-yellow, +.ms-bgColor-yellow { + background-color: @ms-color-yellow; +} + +.ms-bg-color-yellowLight, +.ms-bgColor-yellowLight { + background-color: @ms-color-yellowLight; +} + +.ms-bg-color-orange, +.ms-bgColor-orange { + background-color: @ms-color-orange; +} + +.ms-bg-color-orangeLight, +.ms-bgColor-orangeLight { + background-color: @ms-color-orangeLight; +} + +.ms-bg-color-redDark, +.ms-bgColor-redDark { + background-color: @ms-color-redDark; +} + +.ms-bg-color-red, +.ms-bgColor-red { + background-color: @ms-color-red; +} + +.ms-bg-color-magentaDark, +.ms-bgColor-magentaDark { + background-color: @ms-color-magentaDark; +} + +.ms-bg-color-magenta, +.ms-bgColor-magenta { + background-color: @ms-color-magenta; +} + +.ms-bg-color-magentaLight, +.ms-bgColor-magentaLight { + background-color: @ms-color-magentaLight; +} + +.ms-bg-color-purpleDark, +.ms-bgColor-purpleDark { + background-color: @ms-color-purpleDark; +} + +.ms-bg-color-purple, +.ms-bgColor-purple { + background-color: @ms-color-purple; +} + +.ms-bg-color-purpleLight, +.ms-bgColor-purpleLight { + background-color: @ms-color-purpleLight; +} + +.ms-bg-color-blueDark, +.ms-bgColor-blueDark { + background-color: @ms-color-blueDark; +} + +.ms-bg-color-blueMid, +.ms-bgColor-blueMid { + background-color: @ms-color-blueMid; +} + +.ms-bg-color-blue, +.ms-bgColor-blue { + background-color: @ms-color-blue; +} + +.ms-bg-color-blueLight, +.ms-bgColor-blueLight { + background-color: @ms-color-blueLight; +} + +.ms-bg-color-tealDark, +.ms-bgColor-tealDark { + background-color: @ms-color-tealDark; +} + +.ms-bg-color-teal, +.ms-bgColor-teal { + background-color: @ms-color-teal; +} + +.ms-bg-color-tealLight, +.ms-bgColor-tealLight { + background-color: @ms-color-tealLight; +} + +.ms-bg-color-greenDark, +.ms-bgColor-greenDark { + background-color: @ms-color-greenDark; +} + +.ms-bg-color-green, +.ms-bgColor-green { + background-color: @ms-color-green; +} + +.ms-bg-color-greenLight, +.ms-bgColor-greenLight { + background-color: @ms-color-greenLight; +} + + +// Others +.ms-bg-color-error, +.ms-bgColor-error { + background-color: @ms-color-errorBackground; +} + +.ms-bg-color-alert, +.ms-bgColor-alert { + background-color: @ms-color-alertBackground; +} + +.ms-bg-color-info, +.ms-bgColor-info { + background-color: @ms-color-infoBackground; +} + +.ms-bg-color-success, +.ms-bgColor-success { + background-color: @ms-color-successBackground; +} + +.ms-bg-color-orangeLighter, .ms-bg-color-orangeLighter-hover:hover, +.ms-bgColor-orangeLighter, .ms-bgColor-orangeLighter--hover:hover { + background-color: @ms-color-orangeLighter; +} + + +//== Border colors +// + +// Theme colors +.ms-border-color-themeDark, .ms-border-color-themeDark-hover:hover, +.ms-borderColor-themeDark, .ms-borderColor-themeDark--hover:hover { + border-color: @ms-color-themeDark; +} + +.ms-border-color-themeDarkAlt, .ms-border-color-themeDarkAlt-hover:hover, +.ms-borderColor-themeDarkAlt, .ms-borderColor-themeDarkAlt--hover:hover { + border-color: @ms-color-themeDarkAlt; +} + +.ms-border-color-themeDarker, .ms-border-color-themeDarker-hover:hover, +.ms-borderColor-themeDarker, .ms-borderColor-themeDarker--hover:hover { + border-color: @ms-color-themeDarker; +} + +.ms-border-color-themePrimary, .ms-border-color-themePrimary-hover:hover, +.ms-borderColor-themePrimary, .ms-borderColor-themePrimary--hover:hover { + border-color: @ms-color-themePrimary; +} + +.ms-border-color-themeSecondary, .ms-border-color-themeSecondary-hover:hover, +.ms-borderColor-themeSecondary, .ms-borderColor-themeSecondary--hover:hover { + border-color: @ms-color-themeSecondary; +} + +.ms-border-color-themeTertiary, .ms-border-color-themeTertiary-hover:hover, +.ms-borderColor-themeTertiary, .ms-borderColor-themeTertiary--hover:hover { + border-color: @ms-color-themeTertiary; +} + +.ms-border-color-themeLight, .ms-border-color-themeLight-hover:hover, +.ms-borderColor-themeLight, .ms-borderColor-themeLight--hover:hover { + border-color: @ms-color-themeLight; +} + +.ms-border-color-themeLighter, .ms-border-color-themeLighter-hover:hover, +.ms-borderColor-themeLighter, .ms-borderColor-themeLighter--hover:hover { + border-color: @ms-color-themeLighter; +} + +.ms-border-color-themeLighterAlt, .ms-border-color-themeLighterAlt-hover:hover, +.ms-borderColor-themeLighterAlt, .ms-borderColor-themeLighterAlt--hover:hover { + border-color: @ms-color-themeLighterAlt; +} + + +// Neutral colors +.ms-border-color-black, .ms-border-color-black-hover:hover, +.ms-borderColor-black, .ms-borderColor-black--hover:hover { + border-color: @ms-color-black; +} + +.ms-border-color-neutralDark, .ms-border-color-neutralDark-hover:hover, +.ms-borderColor-neutralDark, .ms-borderColor-neutralDark--hover:hover { + border-color: @ms-color-neutralDark; +} + +.ms-border-color-neutralPrimary, .ms-border-color-neutralPrimary-hover:hover, +.ms-borderColor-neutralPrimary, .ms-borderColor-neutralPrimary--hover:hover { + border-color: @ms-color-neutralPrimary; +} + +.ms-border-color-neutralSecondary, .ms-border-color-neutralSecondary-hover:hover, +.ms-borderColor-neutralSecondary, .ms-borderColor-neutralSecondary--hover:hover { + border-color: @ms-color-neutralSecondary; +} + +.ms-border-color-neutralSecondaryAlt, .ms-border-color-neutralSecondaryAlt-hover:hover, +.ms-borderColor-neutralSecondaryAlt, .ms-borderColor-neutralSecondaryAlt--hover:hover { + border-color: @ms-color-neutralSecondaryAlt; +} + +.ms-border-color-neutralTertiary, .ms-border-color-neutralTertiary-hover:hover, +.ms-borderColor-neutralTertiary, .ms-borderColor-neutralTertiary--hover:hover { + border-color: @ms-color-neutralTertiary; +} + +.ms-border-color-neutralTertiaryAlt, .ms-border-color-neutralTertiaryAlt-hover:hover, +.ms-borderColor-neutralTertiaryAlt, .ms-borderColor-neutralTertiaryAlt--hover:hover { + border-color: @ms-color-neutralTertiaryAlt; +} + +.ms-border-color-neutralLight, .ms-border-color-neutralLight-hover:hover, +.ms-borderColor-neutralLight, .ms-borderColor-neutralLight--hover:hover { + border-color: @ms-color-neutralLight; +} + +.ms-border-color-neutralLighter, .ms-border-color-neutralLighter-hover:hover, +.ms-borderColor-neutralLighter, .ms-borderColor-neutralLighter--hover:hover { + border-color: @ms-color-neutralLighter; +} + +.ms-border-color-neutralLighterAlt, .ms-border-color-neutralLighterAlt-hover:hover, +.ms-borderColor-neutralLighterAlt, .ms-borderColor-neutralLighterAlt--hover:hover { + border-color: @ms-color-neutralLighterAlt; +} + +.ms-border-color-white, .ms-border-color-white-hover:hover, +.ms-borderColor-white, .ms-borderColor-white--hover:hover{ border-color: @ms-color-white; } + + +// Brand and accent colors +.ms-border-color-yellow, +.ms-borderColor-yellow { + border-color: @ms-color-yellow; +} + +.ms-border-color-yellowLight, +.ms-borderColor-yellowLight { + border-color: @ms-color-yellowLight; +} + +.ms-border-color-orange, +.ms-borderColor-orange { + border-color: @ms-color-orange; +} + +.ms-border-color-orangeLight, +.ms-borderColor-orangeLight { + border-color: @ms-color-orangeLight; +} + +.ms-border-color-redDark, +.ms-borderColor-redDark { + border-color: @ms-color-redDark; +} + +.ms-border-color-red, +.ms-borderColor-red { + border-color: @ms-color-red; +} + +.ms-border-color-magentaDark, +.ms-borderColor-magentaDark { + border-color: @ms-color-magentaDark; +} + +.ms-border-color-magenta, +.ms-borderColor-magenta { + border-color: @ms-color-magenta; +} + +.ms-border-color-magentaLight, +.ms-borderColor-magentaLight { + border-color: @ms-color-magentaLight; +} + +.ms-border-color-purpleDark, +.ms-borderColor-purpleDark { + border-color: @ms-color-purpleDark; +} + +.ms-border-color-purple, +.ms-borderColor-purple { + border-color: @ms-color-purple; +} + +.ms-border-color-purpleLight, +.ms-borderColor-purpleLight { + border-color: @ms-color-purpleLight; +} + +.ms-border-color-blueDark, +.ms-borderColor-blueDark { + border-color: @ms-color-blueDark; +} + +.ms-border-color-blueMid, +.ms-borderColor-blueMid { + border-color: @ms-color-blueMid; +} + +.ms-border-color-blue, +.ms-borderColor-blue { + border-color: @ms-color-blue; +} + +.ms-border-color-blueLight, +.ms-borderColor-blueLight { + border-color: @ms-color-blueLight; +} + +.ms-border-color-tealDark, +.ms-borderColor-tealDark { + border-color: @ms-color-tealDark; +} + +.ms-border-color-teal, +.ms-borderColor-teal { + border-color: @ms-color-teal; +} + +.ms-border-color-tealLight, +.ms-borderColor-tealLight { + border-color: @ms-color-tealLight; +} + +.ms-border-color-greenDark, +.ms-borderColor-greenDark { + border-color: @ms-color-greenDark; +} + +.ms-border-color-green, +.ms-borderColor-green { + border-color: @ms-color-green; +} + +.ms-border-color-greenLight, +.ms-borderColor-greenLight { + border-color: @ms-color-greenLight; +} + +// Status colors +.ms-border-color-error, +.ms-borderColor-error { + border-color: @ms-color-error; +} + +.ms-border-color-success, +.ms-borderColor-success { + border-color: @ms-color-success; +} + +.ms-border-color-info, +.ms-borderColor-info { + border-color: @ms-color-info; +} + +.ms-border-color-alert, +.ms-borderColor-alert { + border-color: @ms-color-alert; +} + + +// Others +.ms-border-color-orangeLighter, .ms-border-color-orangeLighter-hover:hover, +.ms-borderColor-orangeLighter, .ms-borderColor-orangeLighter--hover:hover { + border-color: @ms-color-orangeLighter; +} + +// Individual borders, by request +.ms-border-color-top-themePrimary, .ms-border-color-top-themePrimary-hover:hover, +.ms-borderColorTop-themePrimary, .ms-borderColorTop-themePrimary--hover:hover { + border-top-color: @ms-color-themePrimary; +} diff --git a/src/less/_Fabric.Color.Variables.less b/src/less/_Fabric.Color.Variables.less new file mode 100644 index 00000000..febe319d --- /dev/null +++ b/src/less/_Fabric.Color.Variables.less @@ -0,0 +1,147 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Color Variables + + +//== Theme Colors +// +@ms-color-themeDarker: #004578; +@ms-color-themeDark: #005a9e; +@ms-color-themeDarkAlt: #106ebe; +@ms-color-themePrimary: #0078d7; +@ms-color-themeSecondary: #2b88d8; +@ms-color-themeTertiary: #71afe5; +@ms-color-themeLight: #c7e0f4; +@ms-color-themeLighter: #deecf9; +@ms-color-themeLighterAlt: #eff6fc; + + +//== Grayscale Colors +// +@ms-color-black: #000000; +@ms-color-neutralDark: #212121; +@ms-color-neutralPrimary: #333333; +@ms-color-neutralSecondary: #666666; +@ms-color-neutralSecondaryAlt: #767676; +@ms-color-neutralTertiary: #a6a6a6; +@ms-color-neutralTertiaryAlt: #c8c8c8; +@ms-color-neutralLight: #eaeaea; +@ms-color-neutralLighter: #f4f4f4; +@ms-color-neutralLighterAlt: #f8f8f8; +@ms-color-white: #ffffff; + + +//== Translucent Colors +// +@ms-color-blackTranslucent40: rgba(0,0,0,.4); +@ms-color-whiteTranslucent40: rgba(255,255,255,.4); + + +//== Core brand and accent colors +// +@ms-color-yellow: #ffb900; +@ms-color-yellowLight: #fff100; +@ms-color-orange: #d83b01; +@ms-color-orangeLight: #ff8c00; +@ms-color-redDark: #a80000; +@ms-color-red: #e81123; +@ms-color-magentaDark: #5c005c; +@ms-color-magenta: #b4009e; +@ms-color-magentaLight: #e3008c; +@ms-color-purpleDark: #32145a; +@ms-color-purple: #5c2d91; +@ms-color-purpleLight: #b4a0ff; +@ms-color-blueDark: #002050; +@ms-color-blueMid: #00188f; +@ms-color-blue: #0078d7; +@ms-color-blueLight: #00bcf2; +@ms-color-tealDark: #004b50; +@ms-color-teal: #008272; +@ms-color-tealLight: #00b294; +@ms-color-greenDark: #004b1c; +@ms-color-green: #107c10; +@ms-color-greenLight: #bad80a; + + +//== Other Colors +// +@ms-color-error: @ms-color-redDark; +@ms-color-errorBackground: #fde7e9; +@ms-color-success: @ms-color-green; +@ms-color-successBackground: #dff6dd; +@ms-color-alert: @ms-color-orange; +@ms-color-alertBackground: @ms-color-neutralLighter; +@ms-color-infoBackground: @ms-color-neutralLighter; +@ms-color-info: @ms-color-green; +@ms-color-orangeLighter: #ea4300; + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY COLOR VARIABLES: + +//== Theme Colors +// +@color-themeDarker: @ms-color-themeDarker; +@color-themeDark: @ms-color-themeDark; +@color-themeDarkAlt: @ms-color-themeDarkAlt; +@color-themePrimary: @ms-color-themePrimary; +@color-themeSecondary: @ms-color-themeSecondary; +@color-themeTertiary: @ms-color-themeTertiary; +@color-themeLight: @ms-color-themeLight; +@color-themeLighter: @ms-color-themeLighter; +@color-themeLighterAlt: @ms-color-themeLighterAlt; + +//== Grayscale Colors +// +@color-black: @ms-color-black; +@color-neutralDark: @ms-color-neutralDark; +@color-neutralPrimary: @ms-color-neutralPrimary; +@color-neutralSecondary: @ms-color-neutralSecondary; +@color-neutralSecondaryAlt: @ms-color-neutralSecondaryAlt; +@color-neutralTertiary: @ms-color-neutralTertiary; +@color-neutralTertiaryAlt: @ms-color-neutralTertiaryAlt; +@color-neutralLight: @ms-color-neutralLight; +@color-neutralLighter: @ms-color-neutralLighter; +@color-neutralLighterAlt: @ms-color-neutralLighterAlt; +@color-white: @ms-color-white; + +//== Translucent Colors +// +@color-blackTranslucent40: @ms-color-blackTranslucent40; +@color-whiteTranslucent40: @ms-color-whiteTranslucent40; + +//== Core brand and accent colors +// +@color-yellow: @ms-color-yellow; +@color-yellowLight: @ms-color-yellowLight; +@color-orange: @ms-color-orange; +@color-orangeLight: @ms-color-orangeLight; +@color-redDark: @ms-color-redDark; +@color-red: @ms-color-red; +@color-magentaDark: @ms-color-magentaDark; +@color-magenta: @ms-color-magenta; +@color-magentaLight: @ms-color-magentaLight; +@color-purpleDark: @ms-color-purpleDark; +@color-purple: @ms-color-purple; +@color-purpleLight: @ms-color-purpleLight; +@color-blueDark: @ms-color-blueDark; +@color-blueMid: @ms-color-blueMid; +@color-blue: @ms-color-blue; +@color-blueLight: @ms-color-blueLight; +@color-tealDark: @ms-color-tealDark; +@color-teal: @ms-color-teal; +@color-tealLight: @ms-color-tealLight; +@color-greenDark: @ms-color-greenDark; +@color-green: @ms-color-green; +@color-greenLight: @ms-color-greenLight; + +//== Other Colors +// +@color-error: @ms-color-error; +@color-errorBackground: @ms-color-errorBackground; +@color-alertBackground: @ms-color-alertBackground; +@color-infoBackground: @ms-color-infoBackground; +@color-orangeLighter: @ms-color-orangeLighter; diff --git a/src/less/_Fabric.Grid.less b/src/less/_Fabric.Grid.less new file mode 100644 index 00000000..7db5835d --- /dev/null +++ b/src/less/_Fabric.Grid.less @@ -0,0 +1,38 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fluid 12-column grids for small, medium, and large devices + + +//== Grid container (same for all sizes) +// +.ms-Grid { + .ms-u-borderBox; + .clearfix; + padding: 0 8px; +} + +//== Grid rows (pull first and last column out) +// +.ms-Grid-row { + margin: 0 -8px; + .ms-u-borderBox; + .clearfix; +} + +//== Grid cells +// +.ms-Grid-col { + position: relative; + min-height: 1px; + padding-left: 8px; + padding-right: 8px; + .ms-u-borderBox; + float: left; +} + +// For nested grids (a grid inside a column), removing the padding +// so that the nested grid's columns go to the edge of the parent's. +.ms-Grid-col .ms-Grid { + padding: 0; +} diff --git a/src/less/_Fabric.Icons.Font.less b/src/less/_Fabric.Icons.Font.less new file mode 100644 index 00000000..321afd3b --- /dev/null +++ b/src/less/_Fabric.Icons.Font.less @@ -0,0 +1,16 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Icon font-family definition + + +@font-face { + font-family: 'Office365Icons'; + src: url('../fonts/office365icons.eot?'); + src: url('../fonts/office365icons.eot?#iefix') format('embedded-opentype'), + url('../fonts/office365icons.woff?') format('woff'), + url('../fonts/office365icons.ttf?') format('truetype'), + url('../fonts/office365icons.svg?#office365icons') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/src/less/_Fabric.Icons.RTL.less b/src/less/_Fabric.Icons.RTL.less new file mode 100644 index 00000000..b872d46e --- /dev/null +++ b/src/less/_Fabric.Icons.RTL.less @@ -0,0 +1,107 @@ +// RTL overrides for icons +@import '_fabric.icons.less'; + +// Flip icons with 'directionality' +.ms-Icon--question, +.ms-Icon--calendar, +.ms-Icon--folder, +.ms-Icon--chat, +.ms-Icon--listBullets, +.ms-Icon--folderMove, +.ms-Icon--mailSend, +.ms-Icon--reply, +.ms-Icon--play, +.ms-Icon--replyAll, +.ms-Icon--refresh, +.ms-Icon--questionReverse, +.ms-Icon--notRecurring, +.ms-Icon--tasks, +.ms-Icon--check, +.ms-Icon--arrowLeft, +.ms-Icon--arrowRight, +.ms-Icon--directions, +.ms-Icon--caretLeft, +.ms-Icon--caretRight, +.ms-Icon--caretUpLeft, +.ms-Icon--caretUpRight, +.ms-Icon--caretDownRight, +.ms-Icon--caretDownLeft, +.ms-Icon--note, +.ms-Icon--noteReply, +.ms-Icon--noteForward, +.ms-Icon--taskRecurring, +.ms-Icon--documentReply, +.ms-Icon--documentForward, +.ms-Icon--reactivate, +.ms-Icon--chevronLeft, +.ms-Icon--chevronRight, +.ms-Icon--notebook, +.ms-Icon--chevronsLeft, +.ms-Icon--chevronsRight, +.ms-Icon--receiptForward, +.ms-Icon--receiptReply, +.ms-Icon--receiptCheck, +.ms-Icon--eventShare, +.ms-Icon--oofReply, +.ms-Icon--voicemailReply, +.ms-Icon--voicemailForward, +.ms-Icon--post, +.ms-Icon--toggle, +.ms-Icon--late, +.ms-Icon--eventRecurring, +.ms-Icon--cart, +.ms-Icon--socialListening, +.ms-Icon--replyAlt, +.ms-Icon--replyAllAlt, +.ms-Icon--graph, +.ms-Icon--pinLeft, +.ms-Icon--chart, +.ms-Icon--page, +.ms-Icon--document, +.ms-Icon--metadata, +.ms-Icon--pointItem, +.ms-Icon--dropdown, +.ms-Icon--checkbox, +.ms-Icon--reload, +.ms-Icon--multiChoice, +.ms-Icon--contactForm, +.ms-Icon--inboxCheck, +.ms-Icon--checkboxCheck, +.ms-Icon--folderSearch, +.ms-Icon--listCheck, +.ms-Icon--listGroup, +.ms-Icon--timeline +.ms-Icon--mailCheck, +.ms-Icon--listCheckbox, +.ms-Icon--sunQuestion, +.ms-Icon--chevronThinLeft, +.ms-Icon--chevronThinRight, +.ms-Icon--chevronThickLeft, +.ms-Icon--chevronThickRight, +.ms-Icon--documentLandscape, +.ms-Icon--peopleCheck, +.ms-Icon--caretLeftOutline, +.ms-Icon--caretRightOutline, +.ms-Icon--mailSync, +.ms-Icon--peopleSync, +.ms-Icon--checkPeople, +.ms-Icon--sortLines, +.ms-Icon--triangleRight:before, +.ms-Icon--triangleLeft:before, +.ms-Icon--contactPublic:before, +.ms-Icon--triangleEmptyRight:before, +.ms-Icon--triangleEmptyLeft:before, +.ms-Icon--fileDocument:before, +.ms-Icon--listGroup2:before, +.ms-Icon--copy:before, +.ms-Icon--sections:before, +.ms-Icon--arrowUpRight:before, +.ms-Icon--arrowDownRight:before, +.ms-Icon--arrowDownLeft:before, +.ms-Icon--arrowUpLeft:before, +.ms-Icon--bundle:before { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -o-transform: scaleX(-1); + transform: scaleX(-1); +} \ No newline at end of file diff --git a/src/less/_Fabric.Icons.less b/src/less/_Fabric.Icons.less new file mode 100644 index 00000000..c65e8dfc --- /dev/null +++ b/src/less/_Fabric.Icons.less @@ -0,0 +1,879 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Icon definitions + + +// Base icon definition +.ms-Icon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-family: 'Office365Icons'; + font-style: normal; + font-weight: normal; + line-height: 1; + speak: none; +} + +// Modifiers: Each of the icons. +.ms-Icon--circleEmpty:before { content: '\e000'; } /* '' */ +.ms-Icon--circleFill:before { content: '\e001'; } /* '' */ +.ms-Icon--placeholder:before { content: '\e002'; } /* '' */ +.ms-Icon--star:before { content: '\e003'; } /* '' */ +.ms-Icon--plus:before { content: '\e004'; } /* '' */ +.ms-Icon--minus:before { content: '\e005'; } /* '' */ +.ms-Icon--question:before { content: '\e006'; } /* '' */ +.ms-Icon--exclamation:before { content: '\e007'; } /* '' */ +.ms-Icon--person:before { content: '\e008'; } /* '' */ +.ms-Icon--mail:before { content: '\e009'; } /* '' */ +.ms-Icon--infoCircle:before { content: '\e00a'; } /* '' */ +.ms-Icon--alert:before { content: '\e00b'; } /* '' */ +.ms-Icon--xCircle:before { content: '\e00c'; } /* '' */ +.ms-Icon--mailOpen:before { content: '\e00d'; } /* '' */ +.ms-Icon--people:before { content: '\e00e'; } /* '' */ +.ms-Icon--bell:before { content: '\e010'; } /* '' */ +.ms-Icon--calendar:before { content: '\e011'; } /* '' */ +.ms-Icon--scheduling:before { content: '\e012'; } /* '' */ +.ms-Icon--event:before { content: '\e013'; } /* '' */ +.ms-Icon--folder:before { content: '\e014'; } /* '' */ +.ms-Icon--documents:before { content: '\e015'; } /* '' */ +.ms-Icon--onedrive:before { content: '\e016'; } /* '' */ +.ms-Icon--chat:before { content: '\e017'; } /* '' */ +.ms-Icon--sites:before { content: '\e018'; } /* '' */ +.ms-Icon--listBullets:before { content: '\e019'; } /* '' */ +.ms-Icon--calendarWeek:before { content: '\e01a'; } /* '' */ +.ms-Icon--calendarWorkWeek:before { content: '\e01b'; } /* '' */ +.ms-Icon--calendarDay:before { content: '\e01c'; } /* '' */ +.ms-Icon--folderMove:before { content: '\e01d'; } /* '' */ +.ms-Icon--panel:before { content: '\e01e'; } /* '' */ +.ms-Icon--popout:before { content: '\e01f'; } /* '' */ +.ms-Icon--menu:before { content: '\e020'; } /* '' */ +.ms-Icon--home:before { content: '\e021'; } /* '' */ +.ms-Icon--favorites:before { content: '\e022'; } /* '' */ +.ms-Icon--phone:before { content: '\e023'; } /* '' */ +.ms-Icon--mailSend:before { content: '\e024'; } /* '' */ +.ms-Icon--save:before { content: '\e025'; } /* '' */ +.ms-Icon--trash:before { content: '\e026'; } /* '' */ +.ms-Icon--pencil:before { content: '\e027'; } /* '' */ +.ms-Icon--flag:before { content: '\e028'; } /* '' */ +.ms-Icon--reply:before { content: '\e029'; } /* '' */ +.ms-Icon--miniatures:before { content: '\e02a'; } /* '' */ +.ms-Icon--voicemail:before { content: '\e02b'; } /* '' */ +.ms-Icon--play:before { content: '\e02c'; } /* '' */ +.ms-Icon--pause:before { content: '\e02d'; } /* '' */ +.ms-Icon--onlineAdd:before { content: '\e02e'; } /* '' */ +.ms-Icon--onlineJoin:before { content: '\e02f'; } /* '' */ +.ms-Icon--replyAll:before { content: '\e030'; } /* '' */ +.ms-Icon--attachment:before { content: '\e031'; } /* '' */ +.ms-Icon--drm:before { content: '\e032'; } /* '' */ +.ms-Icon--pinDown:before { content: '\e033'; } /* '' */ +.ms-Icon--refresh:before { content: '\e034'; } /* '' */ +.ms-Icon--gear:before { content: '\e035'; } /* '' */ +.ms-Icon--smiley:before { content: '\e036'; } /* '' */ +.ms-Icon--info:before { content: '\e037'; } /* '' */ +.ms-Icon--lock:before { content: '\e038'; } /* '' */ +.ms-Icon--search:before { content: '\e039'; } /* '' */ +.ms-Icon--questionReverse:before { content: '\e03a'; } /* '' */ +.ms-Icon--notRecurring:before { content: '\e03b'; } /* '' */ +.ms-Icon--tasks:before { content: '\e040'; } /* '' */ +.ms-Icon--check:before { content: '\e041'; } /* '' */ +.ms-Icon--x:before { content: '\e042'; } /* '' */ +.ms-Icon--thumbDown:before { content: '\e043'; } /* '' */ +.ms-Icon--thumbUp:before { content: '\e044'; } /* '' */ +.ms-Icon--ellipsis:before { content: '\e045'; } /* '' */ +.ms-Icon--dot:before { content: '\e046'; } /* '' */ +.ms-Icon--arrowUp:before { content: '\e047'; } /* '' */ +.ms-Icon--arrowDown:before { content: '\e048'; } /* '' */ +.ms-Icon--arrowLeft:before { content: '\e049'; } /* '' */ +.ms-Icon--arrowRight:before { content: '\e04a'; } /* '' */ +.ms-Icon--download:before { content: '\e04b'; } /* '' */ +.ms-Icon--directions:before { content: '\e04c'; } /* '' */ +.ms-Icon--microphone:before { content: '\e04f'; } /* '' */ +.ms-Icon--caretUp:before { content: '\e051'; } /* '' */ +.ms-Icon--caretDown:before { content: '\e052'; } /* '' */ +.ms-Icon--caretLeft:before { content: '\e053'; } /* '' */ +.ms-Icon--caretRight:before { content: '\e054'; } /* '' */ +.ms-Icon--office:before { content: '\e055'; } /* '' */ +.ms-Icon--office365:before { content: '\e056'; } /* '' */ +.ms-Icon--office365Preview:before { content: '\e057'; } /* '' */ +.ms-Icon--caretUpLeft:before { content: '\e05a'; } /* '' */ +.ms-Icon--caretUpRight:before { content: '\e05b'; } /* '' */ +.ms-Icon--caretDownRight:before { content: '\e05c'; } /* '' */ +.ms-Icon--caretDownLeft:before { content: '\e05d'; } /* '' */ +.ms-Icon--apps:before { content: '\e060'; } /* '' */ +.ms-Icon--officeStore:before { content: '\e061'; } /* '' */ +.ms-Icon--outlook:before { content: '\e062'; } /* '' */ +.ms-Icon--project:before { content: '\e063'; } /* '' */ +.ms-Icon--yammer:before { content: '\e064'; } /* '' */ +.ms-Icon--dynamicsCrm:before { content: '\e065'; } /* '' */ +.ms-Icon--lync:before { content: '\e066'; } /* '' */ +.ms-Icon--note:before { content: '\e06a'; } /* '' */ +.ms-Icon--noteReply:before { content: '\e06b'; } /* '' */ +.ms-Icon--noteForward:before { content: '\e06c'; } /* '' */ +.ms-Icon--key:before { content: '\e06f'; } /* '' */ +.ms-Icon--tile:before { content: '\e070'; } /* '' */ +.ms-Icon--taskRecurring:before { content: '\e071'; } /* '' */ +.ms-Icon--sharepoint:before { content: '\e072'; } /* '' */ +.ms-Icon--starEmpty:before { content: '\e073'; } /* '' */ +.ms-Icon--upload:before { content: '\e076'; } /* '' */ +.ms-Icon--wrench:before { content: '\e077'; } /* '' */ +.ms-Icon--share:before { content: '\e078'; } /* '' */ +.ms-Icon--documentReply:before { content: '\e079'; } /* '' */ +.ms-Icon--documentForward:before { content: '\e07a'; } /* '' */ +.ms-Icon--partner:before { content: '\e080'; } /* '' */ +.ms-Icon--admin:before { content: '\e081'; } /* '' */ +.ms-Icon--microsoft:before { content: '\e083'; } /* '' */ +.ms-Icon--reactivate:before { content: '\e084'; } /* '' */ +.ms-Icon--sort:before { content: '\e085'; } /* '' */ +.ms-Icon--personAdd:before { content: '\e086'; } /* '' */ +.ms-Icon--chevronUp:before { content: '\e087'; } /* '' */ +.ms-Icon--chevronDown:before { content: '\e088'; } /* '' */ +.ms-Icon--chevronLeft:before { content: '\e089'; } /* '' */ +.ms-Icon--chevronRight:before { content: '\e08a'; } /* '' */ +.ms-Icon--powerBi:before { content: '\e08b'; } /* '' */ +.ms-Icon--peopleAdd:before { content: '\e08c'; } /* '' */ +.ms-Icon--newsfeed:before { content: '\e08d'; } /* '' */ +.ms-Icon--notebook:before { content: '\e08e'; } /* '' */ +.ms-Icon--link:before { content: '\e08f'; } /* '' */ +.ms-Icon--chevronsUp:before { content: '\e090'; } /* '' */ +.ms-Icon--chevronsDown:before { content: '\e091'; } /* '' */ +.ms-Icon--chevronsLeft:before { content: '\e092'; } /* '' */ +.ms-Icon--chevronsRight:before { content: '\e093'; } /* '' */ +.ms-Icon--clutter:before { content: '\e09a'; } /* '' */ +.ms-Icon--subscribe:before { content: '\e09c'; } /* '' */ +.ms-Icon--unsubscribe:before { content: '\e09d'; } /* '' */ +.ms-Icon--personRemove:before { content: '\e09e'; } /* '' */ +.ms-Icon--receiptForward:before { content: '\e0a0'; } /* '' */ +.ms-Icon--receiptReply:before { content: '\e0a1'; } /* '' */ +.ms-Icon--receiptCheck:before { content: '\e0a2'; } /* '' */ +.ms-Icon--peopleRemove:before { content: '\e0a3'; } /* '' */ +.ms-Icon--merge:before { content: '\e0a4'; } /* '' */ +.ms-Icon--split:before { content: '\e0a5'; } /* '' */ +.ms-Icon--eventCancel:before { content: '\e0a6'; } /* '' */ +.ms-Icon--eventShare:before { content: '\e0a7'; } /* '' */ +.ms-Icon--today:before { content: '\e0a9'; } /* '' */ +.ms-Icon--oofReply:before { content: '\e0aa'; } /* '' */ +.ms-Icon--voicemailReply:before { content: '\e0ac'; } /* '' */ +.ms-Icon--voicemailForward:before { content: '\e0ad'; } /* '' */ +.ms-Icon--ribbon:before { content: '\e0af'; } /* '' */ +.ms-Icon--contact:before { content: '\e0b0'; } /* '' */ +.ms-Icon--eye:before { content: '\e0b1'; } /* '' */ +.ms-Icon--glasses:before { content: '\e0b2'; } /* '' */ +.ms-Icon--gallatin:before { content: '\e0b3'; } /* '' */ +.ms-Icon--access:before { content: '\e0b4'; } /* '' */ +.ms-Icon--excel:before { content: '\e0b5'; } /* '' */ +.ms-Icon--onenote:before { content: '\e0b7'; } /* '' */ +.ms-Icon--powerpoint:before { content: '\e0b8'; } /* '' */ +.ms-Icon--word:before { content: '\e0b9'; } /* '' */ +.ms-Icon--print:before { content: '\e100'; } /* '' */ +.ms-Icon--room:before { content: '\e101'; } /* '' */ +.ms-Icon--post:before { content: '\e102'; } /* '' */ +.ms-Icon--toggle:before { content: '\e103'; } /* '' */ +.ms-Icon--touch:before { content: '\e104'; } /* '' */ +.ms-Icon--clock:before { content: '\e105'; } /* '' */ +.ms-Icon--fax:before { content: '\e106'; } /* '' */ +.ms-Icon--lightning:before { content: '\e110'; } /* '' */ +.ms-Icon--dialpad:before { content: '\e111'; } /* '' */ +.ms-Icon--phoneTransfer:before { content: '\e112'; } /* '' */ +.ms-Icon--phoneAdd:before { content: '\e113'; } /* '' */ +.ms-Icon--late:before { content: '\e114'; } /* '' */ +.ms-Icon--chatAdd:before { content: '\e115'; } /* '' */ +.ms-Icon--conflict:before { content: '\e116'; } /* '' */ +.ms-Icon--navigate:before { content: '\e117'; } /* '' */ +.ms-Icon--delve:before { content: '\e118'; } /* '' */ +.ms-Icon--camera:before { content: '\e119'; } /* '' */ +.ms-Icon--filter:before { content: '\e11a'; } /* '' */ +.ms-Icon--fullscreen:before { content: '\e11b'; } /* '' */ +.ms-Icon--new:before { content: '\e11c'; } /* '' */ +.ms-Icon--mailEmpty:before { content: '\e11d'; } /* '' */ +.ms-Icon--editBox:before { content: '\e11e'; } /* '' */ +.ms-Icon--waffle:before { content: '\e11f'; } /* '' */ +.ms-Icon--work:before { content: '\e120'; } /* '' */ +.ms-Icon--eventRecurring:before { content: '\e121'; } /* '' */ +.ms-Icon--cart:before { content: '\e122'; } /* '' */ +.ms-Icon--socialListening:before { content: '\e123'; } /* '' */ +.ms-Icon--mapMarker:before { content: '\e124'; } /* '' */ +.ms-Icon--org:before { content: '\e125'; } /* '' */ +.ms-Icon--adminA:before { content: '\e130'; } /* '' */ +.ms-Icon--adminC:before { content: '\e131'; } /* '' */ +.ms-Icon--adminD:before { content: '\e132'; } /* '' */ +.ms-Icon--adminE:before { content: '\e133'; } /* '' */ +.ms-Icon--adminL:before { content: '\e134'; } /* '' */ +.ms-Icon--adminM:before { content: '\e135'; } /* '' */ +.ms-Icon--adminO:before { content: '\e136'; } /* '' */ +.ms-Icon--adminP:before { content: '\e137'; } /* '' */ +.ms-Icon--adminS:before { content: '\e138'; } /* '' */ +.ms-Icon--adminY:before { content: '\e139'; } /* '' */ +.ms-Icon--replyAlt:before { content: '\e150'; } /* '' */ +.ms-Icon--replyAllAlt:before { content: '\e152'; } /* '' */ +.ms-Icon--eventInfo:before { content: '\e154'; } /* '' */ +.ms-Icon--group:before { content: '\e155'; } /* '' */ +.ms-Icon--officeThreshold:before { content: '\e160'; } /* '' */ +.ms-Icon--money:before { content: '\e161'; } /* '' */ +.ms-Icon--graph:before { content: '\e162'; } /* '' */ +.ms-Icon--noteEdit:before { content: '\e163'; } /* '' */ +.ms-Icon--dashboard:before { content: '\e164'; } /* '' */ +.ms-Icon--mailEdit:before { content: '\e165'; } /* '' */ +.ms-Icon--pinLeft:before { content: '\e167'; } /* '' */ +.ms-Icon--onedriveAdd:before { content: '\e168'; } /* '' */ +.ms-Icon--heart:before { content: '\e16a'; } /* '' */ +.ms-Icon--heartEmpty:before { content: '\e16b'; } /* '' */ +.ms-Icon--picture:before { content: '\e16c'; } /* '' */ +.ms-Icon--cake:before { content: '\e16d'; } /* '' */ +.ms-Icon--books:before { content: '\e16e'; } /* '' */ +.ms-Icon--chart:before { content: '\e16f'; } /* '' */ +.ms-Icon--video:before { content: '\e170'; } /* '' */ +.ms-Icon--soccer:before { content: '\e171'; } /* '' */ +.ms-Icon--meal:before { content: '\e172'; } /* '' */ +.ms-Icon--balloon:before { content: '\e173'; } /* '' */ +.ms-Icon--cat:before { content: '\e174'; } /* '' */ +.ms-Icon--dog:before { content: '\e175'; } /* '' */ +.ms-Icon--bag:before { content: '\e176'; } /* '' */ +.ms-Icon--music:before { content: '\e177'; } /* '' */ +.ms-Icon--stopwatch:before { content: '\e178'; } /* '' */ +.ms-Icon--coffee:before { content: '\e179'; } /* '' */ +.ms-Icon--briefcase:before { content: '\e17a'; } /* '' */ +.ms-Icon--pill:before { content: '\e17b'; } /* '' */ +.ms-Icon--trophy:before { content: '\e17c'; } /* '' */ +.ms-Icon--firstAid:before { content: '\e17d'; } /* '' */ +.ms-Icon--plane:before { content: '\e17e'; } /* '' */ +.ms-Icon--page:before { content: '\e17f'; } /* '' */ +.ms-Icon--car:before { content: '\e180'; } /* '' */ +.ms-Icon--dogAlt:before { content: '\e181'; } /* '' */ +.ms-Icon--document:before { content: '\e182'; } /* '' */ +.ms-Icon--metadata:before { content: '\e183'; } /* '' */ +.ms-Icon--pointItem:before { content: '\e184'; } /* '' */ +.ms-Icon--text:before { content: '\e185'; } /* '' */ +.ms-Icon--fieldText:before { content: '\e186'; } /* '' */ +.ms-Icon--fieldNumber:before { content: '\e187'; } /* '' */ +.ms-Icon--dropdown:before { content: '\e188'; } /* '' */ +.ms-Icon--radioButton:before { content: '\e189'; } /* '' */ +.ms-Icon--checkbox:before { content: '\e18a'; } /* '' */ +.ms-Icon--story:before { content: '\e18b'; } /* '' */ +.ms-Icon--bold:before { content: '\e18c'; } /* '' */ +.ms-Icon--italic:before { content: '\e18d'; } /* '' */ +.ms-Icon--underline:before { content: '\e18e'; } /* '' */ +.ms-Icon--quote:before { content: '\e18f'; } /* '' */ +.ms-Icon--styleRemove:before { content: '\e190'; } /* '' */ +.ms-Icon--pictureAdd:before { content: '\e191'; } /* '' */ +.ms-Icon--pictureRemove:before { content: '\e192'; } /* '' */ +.ms-Icon--desktop:before { content: '\e193'; } /* '' */ +.ms-Icon--tablet:before { content: '\e194'; } /* '' */ +.ms-Icon--mobile:before { content: '\e195'; } /* '' */ +.ms-Icon--table:before { content: '\e196'; } /* '' */ +.ms-Icon--hide:before { content: '\e197'; } /* '' */ +.ms-Icon--shield:before { content: '\e198'; } /* '' */ +.ms-Icon--skype:before { content: '\e199'; } /* '' */ +.ms-Icon--header:before { content: '\e19a'; } /* '' */ +.ms-Icon--paint:before { content: '\e19b'; } /* '' */ +.ms-Icon--support:before { content: '\e19c'; } /* '' */ +.ms-Icon--settings:before { content: '\e19d'; } /* '' */ +.ms-Icon--creditCard:before { content: '\e19e'; } /* '' */ +.ms-Icon--reload:before { content: '\e19f'; } /* '' */ +.ms-Icon--peopleSecurity:before { content: '\e200'; } /* '' */ +.ms-Icon--visio:before { content: '\e201'; } /* '' */ +.ms-Icon--officeVideo:before { content: '\e202'; } /* '' */ +.ms-Icon--fieldTextBox:before { content: '\e203'; } /* '' */ +.ms-Icon--multiChoice:before { content: '\e204'; } /* '' */ +.ms-Icon--fieldMail:before { content: '\e205'; } /* '' */ +.ms-Icon--contactForm:before { content: '\e206'; } /* '' */ +.ms-Icon--circleHalfFilled:before { content: '\e207'; } /* '' */ +.ms-Icon--documentPDF:before { content: '\e208'; } /* '' */ +.ms-Icon--bookmark:before { content: '\e209'; } /* '' */ +.ms-Icon--parature:before { content: '\e20a'; } /* '' */ +.ms-Icon--circleUnfilled:before { content: '\e20b'; } /* '' */ +.ms-Icon--circleFilled:before { content: '\e20c'; } /* '' */ +.ms-Icon--aad:before { content: '\e20d'; } /* '' */ +.ms-Icon--textBox:before { content: '\e20e'; } /* '' */ +.ms-Icon--drop:before { content: '\e20f'; } /* '' */ +.ms-Icon--sun:before { content: '\e210'; } /* '' */ +.ms-Icon--lifesaver:before { content: '\e211'; } /* '' */ +.ms-Icon--lifesaverLock:before { content: '\e212'; } /* '' */ +.ms-Icon--mailUnread:before { content: '\e213'; } /* '' */ +.ms-Icon--mailRead:before { content: '\e214'; } /* '' */ +.ms-Icon--inboxCheck:before { content: '\e215'; } /* '' */ +.ms-Icon--folderSearch:before { content: '\e216'; } /* '' */ +.ms-Icon--collapse:before { content: '\e217'; } /* '' */ +.ms-Icon--expand:before { content: '\e218'; } /* '' */ +.ms-Icon--ascending:before { content: '\e219'; } /* '' */ +.ms-Icon--descending:before { content: '\e21a'; } /* '' */ +.ms-Icon--filterClear:before { content: '\e21b'; } /* '' */ +.ms-Icon--checkboxEmpty:before { content: '\e21c'; } /* '' */ +.ms-Icon--checkboxMixed:before { content: '\e21d'; } /* '' */ +.ms-Icon--boards:before { content: '\e21e'; } /* '' */ +.ms-Icon--checkboxCheck:before { content: '\e21f'; } /* '' */ +.ms-Icon--frowny:before { content: '\e220'; } /* '' */ +.ms-Icon--lightBulb:before { content: '\e221'; } /* '' */ +.ms-Icon--globe:before { content: '\e222'; } /* '' */ +.ms-Icon--deviceWipe:before { content: '\e223'; } /* '' */ +.ms-Icon--exchange:before { content: '\e224'; } /* '' */ +.ms-Icon--bing:before { content: '\e225'; } /* '' */ +.ms-Icon--listCheck:before { content: '\e226'; } /* '' */ +.ms-Icon--listGroup:before { content: '\e227'; } /* '' */ +.ms-Icon--timeline:before { content: '\e228'; } /* '' */ +.ms-Icon--fontIncrease:before { content: '\e229'; } /* '' */ +.ms-Icon--fontDecrease:before { content: '\e22a'; } /* '' */ +.ms-Icon--fontColor:before { content: '\e22b'; } /* '' */ +.ms-Icon--mailCheck:before { content: '\e22c'; } /* '' */ +.ms-Icon--mailDown:before { content: '\e22d'; } /* '' */ +.ms-Icon--listCheckbox:before { content: '\e22e'; } /* '' */ +.ms-Icon--sunAdd:before { content: '\e22f'; } /* '' */ +.ms-Icon--sunQuestion:before { content: '\e230'; } /* '' */ +.ms-Icon--chevronThinUp:before { content: '\e231'; } /* '' */ +.ms-Icon--chevronThinDown:before { content: '\e232'; } /* '' */ +.ms-Icon--chevronThinLeft:before { content: '\e233'; } /* '' */ +.ms-Icon--chevronThinRight:before { content: '\e234'; } /* '' */ +.ms-Icon--chevronThickUp:before { content: '\e235'; } /* '' */ +.ms-Icon--chevronThickDown:before { content: '\e236'; } /* '' */ +.ms-Icon--chevronThickLeft:before { content: '\e237'; } /* '' */ +.ms-Icon--chevronThickRight:before { content: '\e238'; } /* '' */ +.ms-Icon--linkRemove:before { content: '\e239'; } /* '' */ +.ms-Icon--alchemy:before { content: '\e23a'; } /* '' */ +.ms-Icon--alertOutline:before { content: '\e23b'; } /* '' */ +.ms-Icon--documentLandscape:before { content: '\e23c'; } /* '' */ +.ms-Icon--documentAdd:before { content: '\e23d'; } /* '' */ +.ms-Icon--toggleMiddle:before { content: '\e23e'; } /* '' */ +.ms-Icon--embed:before { content: '\e23f'; } /* '' */ +.ms-Icon--listNumbered:before { content: '\e240'; } /* '' */ +.ms-Icon--msn:before { content: '\e241'; } /* '' */ +.ms-Icon--peopleCheck:before { content: '\e242'; } /* '' */ +.ms-Icon--caretUpOutline:before { content: '\e243'; } /* '' */ +.ms-Icon--caretDownOutline:before { content: '\e244'; } /* '' */ +.ms-Icon--caretLeftOutline:before { content: '\e245'; } /* '' */ +.ms-Icon--caretRightOutline:before { content: '\e246'; } /* '' */ +.ms-Icon--sway:before { content: '\e247'; } /* '' */ +.ms-Icon--mailSync:before { content: '\e248'; } /* '' */ +.ms-Icon--mailError:before { content: '\e249'; } /* '' */ +.ms-Icon--mailPause:before { content: '\e24a'; } /* '' */ +.ms-Icon--peopleSync:before { content: '\e24b'; } /* '' */ +.ms-Icon--peopleError:before { content: '\e24c'; } /* '' */ +.ms-Icon--peoplePause:before { content: '\e24d'; } /* '' */ +.ms-Icon--circleBall:before { content: '\e24e'; } /* '' */ +.ms-Icon--circleBalloons:before { content: '\e24f'; } /* '' */ +.ms-Icon--circleCar:before { content: '\e250'; } /* '' */ +.ms-Icon--circleCat:before { content: '\e251'; } /* '' */ +.ms-Icon--circleCoffee:before { content: '\e252'; } /* '' */ +.ms-Icon--circleDog:before { content: '\e253'; } /* '' */ +.ms-Icon--circleLightning:before { content: '\e254'; } /* '' */ +.ms-Icon--circlePill:before { content: '\e255'; } /* '' */ +.ms-Icon--circlePlane:before { content: '\e256'; } /* '' */ +.ms-Icon--circlePoodle:before { content: '\e257'; } /* '' */ +.ms-Icon--skypeForBusiness:before { content: '\e258'; } /* '' */ +.ms-Icon--checkPeople:before { content: '\e259'; } /* '' */ +.ms-Icon--documentSearch:before { content: '\e25a'; } /* '' */ +.ms-Icon--dynamicsMarketing:before { content: '\e25b'; } /* '' */ +.ms-Icon--sortLines:before { content: '\e25c'; } /* '' */ +.ms-Icon--calendarPublic:before { content: '\e25d'; } /* '' */ +.ms-Icon--contactPublic:before { content: '\e25e'; } /* '' */ +.ms-Icon--classNotebook:before { content: '\e25f'; } /* '' */ +.ms-Icon--triangleUp:before { content: '\e260'; } /* '' */ +.ms-Icon--triangleRight:before { content: '\e261'; } /* '' */ +.ms-Icon--triangleDown:before { content: '\e262'; } /* '' */ +.ms-Icon--triangleLeft:before { content: '\e263'; } /* '' */ +.ms-Icon--triangleEmptyUp:before { content: '\e264'; } /* '' */ +.ms-Icon--triangleEmptyRight:before { content: '\e265'; } /* '' */ +.ms-Icon--triangleEmptyDown:before { content: '\e266'; } /* '' */ +.ms-Icon--triangleEmptyLeft:before { content: '\e267'; } /* '' */ +.ms-Icon--filePDF:before { content: '\e268'; } /* '' */ +.ms-Icon--fileWord:before { content: '\e269'; } /* '' */ +.ms-Icon--filePowerPoint:before { content: '\e26a'; } /* '' */ +.ms-Icon--fileExcel:before { content: '\e26b'; } /* '' */ +.ms-Icon--fileImage:before { content: '\e26c'; } /* '' */ +.ms-Icon--fileDocument:before { content: '\e26d'; } /* '' */ +.ms-Icon--listGroup2:before { content: '\e26e'; } /* '' */ +.ms-Icon--copy:before { content: '\e26f'; } /* '' */ +.ms-Icon--creditCardOutline:before { content: '\e270'; } /* '' */ +.ms-Icon--officeAssistant:before { content: '\e271'; } /* '' */ +.ms-Icon--mailPublic:before { content: '\e272'; } /* '' */ +.ms-Icon--folderPublic:before { content: '\e273'; } /* '' */ +.ms-Icon--teamwork:before { content: '\e274'; } /* '' */ +.ms-Icon--move:before { content: '\e275'; } /* '' */ +.ms-Icon--classroom:before { content: '\e276'; } /* '' */ +.ms-Icon--menu2:before { content: '\e277'; } /* '' */ +.ms-Icon--plus2:before { content: '\e278'; } /* '' */ +.ms-Icon--tag:before { content: '\e279'; } /* '' */ +.ms-Icon--arrowUp2:before { content: '\e27a'; } /* '' */ +.ms-Icon--arrowDown2:before { content: '\e27b'; } /* '' */ +.ms-Icon--circlePlus:before { content: '\e27c'; } /* '' */ +.ms-Icon--circleInfo:before { content: '\e27d'; } /* '' */ +.ms-Icon--section:before { content: '\e27e'; } /* '' */ +.ms-Icon--sections:before { content: '\e27f'; } /* '' */ +.ms-Icon--oneNoteEdu:before { content: '\e280'; } /* '' */ +.ms-Icon--powerBi2:before { content: '\e281'; } /* '' */ +.ms-Icon--at:before { content: '\e282'; } /* '' */ +.ms-Icon--arrowUpRight:before { content: '\e283'; } /* '' */ +.ms-Icon--arrowDownRight:before { content: '\e284'; } /* '' */ +.ms-Icon--arrowDownLeft:before { content: '\e285'; } /* '' */ +.ms-Icon--arrowUpLeft:before { content: '\e286'; } /* '' */ +.ms-Icon--bundle:before { content: '\e287'; } /* '' */ +.ms-Icon--pictureEdit:before { content: '\e288'; } /* '' */ +.ms-Icon--protectionCenter:before { content: '\e289'; } /* '' */ +.ms-Icon--alert2:before { content: '\e28a'; } /* '' */ + +// Modifier: Place the icon in a circle. +.ms-Icon--circle { + position: relative; + display: inline-block; + font-size: 1rem; + width: 1em; + height: 1em; + margin: 0 0.5em 0 0; + padding: 0; + text-align: left; + -webkit-font-smoothing: antialiased; + + &:before, &:after { + line-height: 1; + font-size: inherit; + } + + &:before { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + vertical-align: top; + position: absolute; + } + + &:after { + content: '\e000'; + position: absolute; + top: 0; + left: 0; + transform: scale(2); + transform-origin: 50% 50%; + z-index: @ms-zIndex-back; + } +} + +// Modifiers: Some icons require custom alignment when placed in circles. +.ms-Icon--circle { + &.ms-Icon--star:before { + top: -2%; + left: 1%; + } + &.ms-Icon--person:before { + top: -2%; + left: -3%; + } + &.ms-Icon--alert:before { + top: -4%; + } + &.ms-Icon--mailOpen:before { + top: -5%; + } + &.ms-Icon--people:before { + top: -4%; + left: -7%; + } + &.ms-Icon--bell:before { + top: -3%; + } + &.ms-Icon--scheduling:before { + top: -3%; + left: 6%; + } + &.ms-Icon--documents:before { + top: -1%; + left: -2%; + } + &.ms-Icon--listBullets:before { + top: -1%; + left: 5%; + } + &.ms-Icon--panel:before { + left: -2%; + } + &.ms-Icon--popout:before { + top: -2%; + left: -2%; + } + &.ms-Icon--home:before { + top: -4%; + } + &.ms-Icon--favorites:before { + top: -2%; + left: 2%; + } + &.ms-Icon--phone:before { + top: -2%; + left: -2%; + } + &.ms-Icon--mailSend:before { + left: -10%; + } + &.ms-Icon--pencil:before { + top: -2%; + left: 3%; + } + &.ms-Icon--flag:before { + left: 3%; + } + &.ms-Icon--miniatures:before { + left: -3%; + } + &.ms-Icon--voicemail:before { + top: 2%; + left: -7%; + } + &.ms-Icon--onlineAdd:before { + top: -1%; + left: 2%; + } + &.ms-Icon--pinDown:before { + top: 5%; + } + &.ms-Icon--gear:before { + left: 2%; + } + &.ms-Icon--check:before { + top: 3%; + } + &.ms-Icon--thumbsDown:before { + top: 2%; + left: -1%; + } + &.ms-Icon--thumbsUp:before { + top: 4%; + left: 2%; + } + &.ms-Icon--ellipsis:before { + top: 2%; + left: -12%; + } + &.ms-Icon--directions:before { + left: 10%; + } + &.ms-Icon--microphone:before { + top: -3%; + } + &.ms-Icon--caretDown:before { + top: 5%; + left: 2%; + } + &.ms-Icon--caretLeft:before { + left: -6%; + } + &.ms-Icon--caretRight:before { + left: 6%; + } + &.ms-Icon--office:before { + left: -4%; + } + &.ms-Icon--caretUpLeft:before { + top: 5%; + left: 5%; + } + &.ms-Icon--caretUpRight:before { + top: 5%; + left: -3%; + } + &.ms-Icon--caretDownRight:before { + left: -3%; + } + &.ms-Icon--caretDownLeft:before { + left: 4%; + } + &.ms-Icon--apps:before { + left: -3%; + } + &.ms-Icon--officeStore:before { + left: 3%; + } + &.ms-Icon--dynamicsCrm:before { + top: -7%; + left: -5%; + } + &.ms-Icon--note:before { + top: 2%; + left: -3%; + } + &.ms-Icon--noteReply:before { + top: 6%; + left: 3%; + } + &.ms-Icon--noteForward:before { + top: 6%; + } + &.ms-Icon--key:before { + top: 5%; + left: 1%; + } + &.ms-Icon--tile:before { + top: -1%; + left: -18%; + } + &.ms-Icon--taskRecurring:before { + top: 2%; + left: -1%; + } + &.ms-Icon--starEmpty:before { + top: -4%; + left: 1%; + } + &.ms-Icon--documentReply:before { + top: -2%; + left: 7%; + } + &.ms-Icon--documentForward:before { + left: 5%; + } + &.ms-Icon--partner:before { + top: -2%; + } + &.ms-Icon--reactivate:before { + top: -2%; + left: 6%; + } + &.ms-Icon--sort:before { + left: -19%; + } + &.ms-Icon--personAdd:before { + top: -2%; + left: 6%; + } + &.ms-Icon--chevronDown:before { + top: 4%; + } + &.ms-Icon--chevronLeft:before { + left: -5%; + } + &.ms-Icon--chevronRight:before { + left: 4%; + } + &.ms-Icon--peopleAdd:before { + top: -5%; + left: -12%; + } + &.ms-Icon--newsfeed:before { + left: -4%; + } + &.ms-Icon--notebook:before { + left: -4%; + } + &.ms-Icon--link:before { + top: 2%; + left: -18%; + } + &.ms-Icon--chevronsDown:before { + top: 5%; + } + &.ms-Icon--chevronsLeft:before { + left: -5%; + } + &.ms-Icon--chevronsRight:before { + left: 4%; + } + &.ms-Icon--personRemove:before { + left: 5%; + } + &.ms-Icon--receiptForward:before { + left: -20%; + } + &.ms-Icon--receiptReply:before { + left: -20%; + } + &.ms-Icon--receiptCheck:before { + left: -20%; + } + &.ms-Icon--peopleRemove:before { + top: -3%; + left: -12%; + } + &.ms-Icon--merge:before { + top: 2%; + } + &.ms-Icon--split:before { + top: 2%; + } + &.ms-Icon--eventCancel:before { + left: -2%; + } + &.ms-Icon--today:before { + top: -2%; + } + &.ms-Icon--oofReply:before { + left: 5%; + } + &.ms-Icon--voicemailReply:before { + top: 4%; + left: -25%; + } + &.ms-Icon--voicemailForward:before { + top: 4%; + left: -20%; + } + &.ms-Icon--eye:before { + top: -4%; + } + &.ms-Icon--post:before { + top: -4%; + left: 4%; + } + &.ms-Icon--fax:before { + top: -3%; + left: -2%; + } + &.ms-Icon--lightning:before { + top: 2%; + left: 1%; + } + &.ms-Icon--filter:before { + top: 7%; + } + &.ms-Icon--cart:before { + left: 3%; + } + &.ms-Icon--socialListening:before { + top: 2%; + } + &.ms-Icon--mapMarker:before { + top: 2%; + } + &.ms-Icon--replyAllAlt:before { + left: -16%; + } + &.ms-Icon--group:before { + left: -33%; + } + &.ms-Icon--money:before { + left: -8%; + } + &.ms-Icon--noteEdit:before { + left: 4%; + } + &.ms-Icon--mailEdit:before { + top: 3%; + left: 7%; + } + &.ms-Icon--pinLeft:before { + left: -6%; + } + &.ms-Icon--heart:before { + top: 5%; + } + &.ms-Icon--heartEmpty:before { + top: 5%; + } + &.ms-Icon--cake:before { + top: -5%; + } + &.ms-Icon--books:before { + left: -8%; + } + &.ms-Icon--video:before { + top: -3%; + left: 3%; + } + &.ms-Icon--balloon:before { + top: 4%; + left: -1%; + } + &.ms-Icon--music:before { + top: -2%; + left: -5%; + } + &.ms-Icon--stopwatch:before { + top: -3%; + left: 3%; + } + &.ms-Icon--coffee:before { + top: -3%; + left: 3%; + } + &.ms-Icon--plane:before { + left: 4%; + } + &.ms-Icon--dogAlt:before { + left: -15%; + } + &.ms-Icon--metadata:before { + top: -4%; + left: 4%; + } + &.ms-Icon--text:before { + top: -4%; + left: 10%; + } + &.ms-Icon--fieldText:before { + left: -14%; + } + &.ms-Icon--fieldNumber:before { + left: -14%; + } + &.ms-Icon--dropdown:before { + left: -14%; + } + &.ms-Icon--story:before { + left: -5%; + } + &.ms-Icon--bold:before { + left: 4%; + } + &.ms-Icon--underline:before { + top: 4%; + } + &.ms-Icon--quote:before { + left: -4%; + } + &.ms-Icon--styleRemove:before { + top: 4%; + left: 5%; + } + &.ms-Icon--pictureAdd:before { + left: -6%; + } + &.ms-Icon--pictureRemove:before { + left: -6%; + } + &.ms-Icon--mobile:before { + left: -3%; + } + &.ms-Icon--hide:before { + top: -4%; + } + &.ms-Icon--header:before { + left: -9%; + } + &.ms-Icon--msn:before { + left: 3%; + } + &.ms-Icon--peopleCheck:before { + left: -7%; + top: -3%; + } + &.ms-Icon--caretDownOutline:before { + top: 6%; + } + &.ms-Icon--caretLeftOutline:before { + left: -5%; + } + &.ms-Icon--caretRightOutline:before { + left: 5%; + } + &.ms-Icon--sway:before { + left: -3%; + } + &.ms-Icon--mailSync:before { + left: 8%; + top: 3%; + } + &.ms-Icon--peopleSync:before { + left: -8%; + } + &.ms-Icon--peopleError:before { + left: -8%; + } + &.ms-Icon--peoplePause:before { + left: -8%; + } + &.ms-Icon--documentSearch:before { + left: 8%; + } + &.ms-Icon--dynamicsMarketing:before { + left: -8%; + } +} diff --git a/src/less/_Fabric.Responsive.Utilities.less b/src/less/_Fabric.Responsive.Utilities.less new file mode 100644 index 00000000..70440735 --- /dev/null +++ b/src/less/_Fabric.Responsive.Utilities.less @@ -0,0 +1,791 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Responsive utilities based on defined variables, component visibility, +// and size for different displays. + + +//== Responsive visiblity classes +// + +// Hidden on small +@media (max-width: @ms-screen-sm-max) { + .ms-u-hiddenSm, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on medium +@media (min-width: @ms-screen-md-min) and (max-width: @ms-screen-md-max) { + .ms-u-hiddenMd, + .ms-u-hiddenMdUp, + .ms-u-hiddenMdDown, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on large +@media (min-width: @ms-screen-lg-min) and (max-width: @ms-screen-lg-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLg, + .ms-u-hiddenLgUp, + .ms-u-hiddenLgDown, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra large +@media (min-width: @ms-screen-xl-min) and (max-width: @ms-screen-xl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXl, + .ms-u-hiddenXlUp, + .ms-u-hiddenXlDown, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra large +@media (min-width: @ms-screen-xxl-min) and (max-width: @ms-screen-xxl-max) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxl, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxlDown { + display: none !important; + } +} + +// Hidden on extra extra extra large +@media (min-width: @ms-screen-xxxl-min) { + .ms-u-hiddenMdUp, + .ms-u-hiddenLgUp, + .ms-u-hiddenXlUp, + .ms-u-hiddenXxlUp, + .ms-u-hiddenXxxl { + display: none !important; + } +} + + +//== Responsive sizes +// +// These are all based on a 12 column grid. For example, +// ms-u-sm6 sets the width to 50% (6/12) on small screens. + +// Small screens (default) +.ms-u-sm12 { + width: 100%; +} +.ms-u-sm11 { + width: 91.66666666666666%; +} +.ms-u-sm10 { + width: 83.33333333333334%; +} +.ms-u-sm9 { + width: 75%; +} +.ms-u-sm8 { + width: 66.66666666666666%; +} +.ms-u-sm7 { + width: 58.333333333333336%; +} +.ms-u-sm6 { + width: 50%; +} +.ms-u-sm5 { + width: 41.66666666666667%; +} +.ms-u-sm4 { + width: 33.33333333333333%; +} +.ms-u-sm3 { + width: 25%; +} +.ms-u-sm2 { + width: 16.666666666666664%; +} +.ms-u-sm1 { + width: 8.333333333333332%; +} +.ms-u-smPull12 { + right: 100%; +} +.ms-u-smPull11 { + right: 91.66666666666666%; +} +.ms-u-smPull10 { + right: 83.33333333333334%; +} +.ms-u-smPull9 { + right: 75%; +} +.ms-u-smPull8 { + right: 66.66666666666666%; +} +.ms-u-smPull7 { + right: 58.333333333333336%; +} +.ms-u-smPull6 { + right: 50%; +} +.ms-u-smPull5 { + right: 41.66666666666667%; +} +.ms-u-smPull4 { + right: 33.33333333333333%; +} +.ms-u-smPull3 { + right: 25%; +} +.ms-u-smPull2 { + right: 16.666666666666664%; +} +.ms-u-smPull1 { + right: 8.333333333333332%; +} +.ms-u-smPull0 { + right: 0%; +} +.ms-u-smPush12 { + left: 100%; +} +.ms-u-smPush11 { + left: 91.66666666666666%; +} +.ms-u-smPush10 { + left: 83.33333333333334%; +} +.ms-u-smPush9 { + left: 75%; +} +.ms-u-smPush8 { + left: 66.66666666666666%; +} +.ms-u-smPush7 { + left: 58.333333333333336%; +} +.ms-u-smPush6 { + left: 50%; +} +.ms-u-smPush5 { + left: 41.66666666666667%; +} +.ms-u-smPush4 { + left: 33.33333333333333%; +} +.ms-u-smPush3 { + left: 25%; +} +.ms-u-smPush2 { + left: 16.666666666666664%; +} +.ms-u-smPush1 { + left: 8.333333333333332%; +} +.ms-u-smPush0 { + left: 0%; +} + +// Medium screens +@media (min-width: @ms-screen-md-min) { + .ms-u-md12 { + width: 100%; + } + .ms-u-md11 { + width: 91.66666666666666%; + } + .ms-u-md10 { + width: 83.33333333333334%; + } + .ms-u-md9 { + width: 75%; + } + .ms-u-md8 { + width: 66.66666666666666%; + } + .ms-u-md7 { + width: 58.333333333333336%; + } + .ms-u-md6 { + width: 50%; + } + .ms-u-md5 { + width: 41.66666666666667%; + } + .ms-u-md4 { + width: 33.33333333333333%; + } + .ms-u-md3 { + width: 25%; + } + .ms-u-md2 { + width: 16.666666666666664%; + } + .ms-u-md1 { + width: 8.333333333333332%; + } + .ms-u-mdPull12 { + right: 100%; + } + .ms-u-mdPull11 { + right: 91.66666666666666%; + } + .ms-u-mdPull10 { + right: 83.33333333333334%; + } + .ms-u-mdPull9 { + right: 75%; + } + .ms-u-mdPull8 { + right: 66.66666666666666%; + } + .ms-u-mdPull7 { + right: 58.333333333333336%; + } + .ms-u-mdPull6 { + right: 50%; + } + .ms-u-mdPull5 { + right: 41.66666666666667%; + } + .ms-u-mdPull4 { + right: 33.33333333333333%; + } + .ms-u-mdPull3 { + right: 25%; + } + .ms-u-mdPull2 { + right: 16.666666666666664%; + } + .ms-u-mdPull1 { + right: 8.333333333333332%; + } + .ms-u-mdPull0 { + right: 0%; + } + .ms-u-mdPush12 { + left: 100%; + } + .ms-u-mdPush11 { + left: 91.66666666666666%; + } + .ms-u-mdPush10 { + left: 83.33333333333334%; + } + .ms-u-mdPush9 { + left: 75%; + } + .ms-u-mdPush8 { + left: 66.66666666666666%; + } + .ms-u-mdPush7 { + left: 58.333333333333336%; + } + .ms-u-mdPush6 { + left: 50%; + } + .ms-u-mdPush5 { + left: 41.66666666666667%; + } + .ms-u-mdPush4 { + left: 33.33333333333333%; + } + .ms-u-mdPush3 { + left: 25%; + } + .ms-u-mdPush2 { + left: 16.666666666666664%; + } + .ms-u-mdPush1 { + left: 8.333333333333332%; + } + .ms-u-mdPush0 { + left: 0%; + } +} + +// Large screens +@media (min-width: @ms-screen-lg-min) { + .ms-u-lg12 { + width: 100%; + } + .ms-u-lg11 { + width: 91.66666666666666%; + } + .ms-u-lg10 { + width: 83.33333333333334%; + } + .ms-u-lg9 { + width: 75%; + } + .ms-u-lg8 { + width: 66.66666666666666%; + } + .ms-u-lg7 { + width: 58.333333333333336%; + } + .ms-u-lg6 { + width: 50%; + } + .ms-u-lg5 { + width: 41.66666666666667%; + } + .ms-u-lg4 { + width: 33.33333333333333%; + } + .ms-u-lg3 { + width: 25%; + } + .ms-u-lg2 { + width: 16.666666666666664%; + } + .ms-u-lg1 { + width: 8.333333333333332%; + } + .ms-u-lgPull12 { + right: 100%; + } + .ms-u-lgPull11 { + right: 91.66666666666666%; + } + .ms-u-lgPull10 { + right: 83.33333333333334%; + } + .ms-u-lgPull9 { + right: 75%; + } + .ms-u-lgPull8 { + right: 66.66666666666666%; + } + .ms-u-lgPull7 { + right: 58.333333333333336%; + } + .ms-u-lgPull6 { + right: 50%; + } + .ms-u-lgPull5 { + right: 41.66666666666667%; + } + .ms-u-lgPull4 { + right: 33.33333333333333%; + } + .ms-u-lgPull3 { + right: 25%; + } + .ms-u-lgPull2 { + right: 16.666666666666664%; + } + .ms-u-lgPull1 { + right: 8.333333333333332%; + } + .ms-u-lgPull0 { + right: 0%; + } + .ms-u-lgPush12 { + left: 100%; + } + .ms-u-lgPush11 { + left: 91.66666666666666%; + } + .ms-u-lgPush10 { + left: 83.33333333333334%; + } + .ms-u-lgPush9 { + left: 75%; + } + .ms-u-lgPush8 { + left: 66.66666666666666%; + } + .ms-u-lgPush7 { + left: 58.333333333333336%; + } + .ms-u-lgPush6 { + left: 50%; + } + .ms-u-lgPush5 { + left: 41.66666666666667%; + } + .ms-u-lgPush4 { + left: 33.33333333333333%; + } + .ms-u-lgPush3 { + left: 25%; + } + .ms-u-lgPush2 { + left: 16.666666666666664%; + } + .ms-u-lgPush1 { + left: 8.333333333333332%; + } + .ms-u-lgPush0 { + left: 0%; + } +} + +// Extra large screens +@media (min-width: @ms-screen-xl-min) { + .ms-u-xl12 { + width: 100%; + } + .ms-u-xl11 { + width: 91.66666666666666%; + } + .ms-u-xl10 { + width: 83.33333333333334%; + } + .ms-u-xl9 { + width: 75%; + } + .ms-u-xl8 { + width: 66.66666666666666%; + } + .ms-u-xl7 { + width: 58.333333333333336%; + } + .ms-u-xl6 { + width: 50%; + } + .ms-u-xl5 { + width: 41.66666666666667%; + } + .ms-u-xl4 { + width: 33.33333333333333%; + } + .ms-u-xl3 { + width: 25%; + } + .ms-u-xl2 { + width: 16.666666666666664%; + } + .ms-u-xl1 { + width: 8.333333333333332%; + } + .ms-u-xlPull12 { + right: 100%; + } + .ms-u-xlPull11 { + right: 91.66666666666666%; + } + .ms-u-xlPull10 { + right: 83.33333333333334%; + } + .ms-u-xlPull9 { + right: 75%; + } + .ms-u-xlPull8 { + right: 66.66666666666666%; + } + .ms-u-xlPull7 { + right: 58.333333333333336%; + } + .ms-u-xlPull6 { + right: 50%; + } + .ms-u-xlPull5 { + right: 41.66666666666667%; + } + .ms-u-xlPull4 { + right: 33.33333333333333%; + } + .ms-u-xlPull3 { + right: 25%; + } + .ms-u-xlPull2 { + right: 16.666666666666664%; + } + .ms-u-xlPull1 { + right: 8.333333333333332%; + } + .ms-u-xlPull0 { + right: 0%; + } + .ms-u-xlPush12 { + left: 100%; + } + .ms-u-xlPush11 { + left: 91.66666666666666%; + } + .ms-u-xlPush10 { + left: 83.33333333333334%; + } + .ms-u-xlPush9 { + left: 75%; + } + .ms-u-xlPush8 { + left: 66.66666666666666%; + } + .ms-u-xlPush7 { + left: 58.333333333333336%; + } + .ms-u-xlPush6 { + left: 50%; + } + .ms-u-xlPush5 { + left: 41.66666666666667%; + } + .ms-u-xlPush4 { + left: 33.33333333333333%; + } + .ms-u-xlPush3 { + left: 25%; + } + .ms-u-xlPush2 { + left: 16.666666666666664%; + } + .ms-u-xlPush1 { + left: 8.333333333333332%; + } + .ms-u-xlPush0 { + left: 0%; + } +} + +// Extra extra large screens +@media (min-width: @ms-screen-xxl-min) { + .ms-u-xxl12 { + width: 100%; + } + .ms-u-xxl11 { + width: 91.66666666666666%; + } + .ms-u-xxl10 { + width: 83.33333333333334%; + } + .ms-u-xxl9 { + width: 75%; + } + .ms-u-xxl8 { + width: 66.66666666666666%; + } + .ms-u-xxl7 { + width: 58.333333333333336%; + } + .ms-u-xxl6 { + width: 50%; + } + .ms-u-xxl5 { + width: 41.66666666666667%; + } + .ms-u-xxl4 { + width: 33.33333333333333%; + } + .ms-u-xxl3 { + width: 25%; + } + .ms-u-xxl2 { + width: 16.666666666666664%; + } + .ms-u-xxl1 { + width: 8.333333333333332%; + } + .ms-u-xxlPull12 { + right: 100%; + } + .ms-u-xxlPull11 { + right: 91.66666666666666%; + } + .ms-u-xxlPull10 { + right: 83.33333333333334%; + } + .ms-u-xxlPull9 { + right: 75%; + } + .ms-u-xxlPull8 { + right: 66.66666666666666%; + } + .ms-u-xxlPull7 { + right: 58.333333333333336%; + } + .ms-u-xxlPull6 { + right: 50%; + } + .ms-u-xxlPull5 { + right: 41.66666666666667%; + } + .ms-u-xxlPull4 { + right: 33.33333333333333%; + } + .ms-u-xxlPull3 { + right: 25%; + } + .ms-u-xxlPull2 { + right: 16.666666666666664%; + } + .ms-u-xxlPull1 { + right: 8.333333333333332%; + } + .ms-u-xxlPull0 { + right: 0%; + } + .ms-u-xxlPush12 { + left: 100%; + } + .ms-u-xxlPush11 { + left: 91.66666666666666%; + } + .ms-u-xxlPush10 { + left: 83.33333333333334%; + } + .ms-u-xxlPush9 { + left: 75%; + } + .ms-u-xxlPush8 { + left: 66.66666666666666%; + } + .ms-u-xxlPush7 { + left: 58.333333333333336%; + } + .ms-u-xxlPush6 { + left: 50%; + } + .ms-u-xxlPush5 { + left: 41.66666666666667%; + } + .ms-u-xxlPush4 { + left: 33.33333333333333%; + } + .ms-u-xxlPush3 { + left: 25%; + } + .ms-u-xxlPush2 { + left: 16.666666666666664%; + } + .ms-u-xxlPush1 { + left: 8.333333333333332%; + } + .ms-u-xxlPush0 { + left: 0%; + } +} + +// Extra extra extra large screens +@media (min-width: @ms-screen-xxxl-min) { + .ms-u-xxxl12 { + width: 100%; + } + .ms-u-xxxl11 { + width: 91.66666666666666%; + } + .ms-u-xxxl10 { + width: 83.33333333333334%; + } + .ms-u-xxxl9 { + width: 75%; + } + .ms-u-xxxl8 { + width: 66.66666666666666%; + } + .ms-u-xxxl7 { + width: 58.333333333333336%; + } + .ms-u-xxxl6 { + width: 50%; + } + .ms-u-xxxl5 { + width: 41.66666666666667%; + } + .ms-u-xxxl4 { + width: 33.33333333333333%; + } + .ms-u-xxxl3 { + width: 25%; + } + .ms-u-xxxl2 { + width: 16.666666666666664%; + } + .ms-u-xxxl1 { + width: 8.333333333333332%; + } + .ms-u-xxxlPull12 { + right: 100%; + } + .ms-u-xxxlPull11 { + right: 91.66666666666666%; + } + .ms-u-xxxlPull10 { + right: 83.33333333333334%; + } + .ms-u-xxxlPull9 { + right: 75%; + } + .ms-u-xxxlPull8 { + right: 66.66666666666666%; + } + .ms-u-xxxlPull7 { + right: 58.333333333333336%; + } + .ms-u-xxxlPull6 { + right: 50%; + } + .ms-u-xxxlPull5 { + right: 41.66666666666667%; + } + .ms-u-xxxlPull4 { + right: 33.33333333333333%; + } + .ms-u-xxxlPull3 { + right: 25%; + } + .ms-u-xxxlPull2 { + right: 16.666666666666664%; + } + .ms-u-xxxlPull1 { + right: 8.333333333333332%; + } + .ms-u-xxxlPull0 { + right: 0%; + } + .ms-u-xxxlPush12 { + left: 100%; + } + .ms-u-xxxlPush11 { + left: 91.66666666666666%; + } + .ms-u-xxxlPush10 { + left: 83.33333333333334%; + } + .ms-u-xxxlPush9 { + left: 75%; + } + .ms-u-xxxlPush8 { + left: 66.66666666666666%; + } + .ms-u-xxxlPush7 { + left: 58.333333333333336%; + } + .ms-u-xxxlPush6 { + left: 50%; + } + .ms-u-xxxlPush5 { + left: 41.66666666666667%; + } + .ms-u-xxxlPush4 { + left: 33.33333333333333%; + } + .ms-u-xxxlPush3 { + left: 25%; + } + .ms-u-xxxlPush2 { + left: 16.666666666666664%; + } + .ms-u-xxxlPush1 { + left: 8.333333333333332%; + } + .ms-u-xxxlPush0 { + left: 0%; + } +} diff --git a/src/less/_Fabric.Responsive.Variables.less b/src/less/_Fabric.Responsive.Variables.less new file mode 100644 index 00000000..c47ec8b0 --- /dev/null +++ b/src/less/_Fabric.Responsive.Variables.less @@ -0,0 +1,60 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric responsive variables + + +//== Variables for responsive breakpoints +// + +// Small screen / phone (320px - 479px) +@ms-screen-sm-min: 320px; +@ms-screen-sm-max: (@ms-screen-md-min - 1); + +// Medium screen / tablet (480px - 639px) +@ms-screen-md-min: 480px; +@ms-screen-md-max: (@ms-screen-lg-min - 1); + +// Large screen / tablet (640px - 1023px) +@ms-screen-lg-min: 640px; +@ms-screen-lg-max: (@ms-screen-xl-min - 1); + +// Extra large screen / tablet (1024px - 1365px) +@ms-screen-xl-min: 1024px; +@ms-screen-xl-max: (@ms-screen-xxl-min - 1); + +// Extra extra large screen / desktop (1366px - 1919px) +@ms-screen-xxl-min: 1366px; +@ms-screen-xxl-max: (@ms-screen-xxxl-min - 1); + +// Extra extra extra large screen / desktop (1366px and up) +@ms-screen-xxxl-min: 1920px; + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY SCREEN SIZE VARIABLES: + +// Small screen / phone (320px - 479px) +@screen-sm-min: @ms-screen-sm-min; +@screen-sm-max: @ms-screen-sm-max; + +// Medium screen / tablet (480px - 639px) +@screen-md-min: @ms-screen-md-min; +@screen-md-max: @ms-screen-md-max; + +// Large screen / tablet (640px - 1023px) +@screen-lg-min: @ms-screen-lg-min; +@screen-lg-max: @ms-screen-lg-max; + +// Extra large screen / tablet (1024px - 1365px) +@screen-xl-min: @ms-screen-xl-min; +@screen-xl-max: @ms-screen-xl-max; + +// Extra extra large screen / desktop (1366px - 1919px) +@screen-xxl-min: @ms-screen-xxl-min; +@screen-xxl-max: @ms-screen-xxl-max; + +// Extra extra extra large screen / desktop (1366px and up) +@screen-xxxl-min: @ms-screen-xxxl-min; diff --git a/src/less/_Fabric.Typography.Fonts.less b/src/less/_Fabric.Typography.Fonts.less new file mode 100644 index 00000000..b960d8f5 --- /dev/null +++ b/src/less/_Fabric.Typography.Fonts.less @@ -0,0 +1,219 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Font definitions + + +// Font weights. +@ms-light: "Segoe UI Light"; +@ms-regular: "Segoe UI Regular"; +@ms-semibold: "Segoe UI Semibold"; +@ms-semilight: "Segoe UI Semilight"; + + +// Font paths. +@ms-font-path-arabic: "SegoeUI-Arabic"; +@ms-font-path-cyrillic: "SegoeUI-Cyrillic"; +@ms-font-path-easteuropean: "SegoeUI-EastEuropean"; +@ms-font-path-greek: "SegoeUI-Greek"; +@ms-font-path-hebrew: "SegoeUI-Hebrew"; +@ms-font-path-vietnamese: "SegoeUI-Vietnamese"; +@ms-font-path-westeuropean: "SegoeUI-WestEuropean"; + + +// Mixins to generate @font-face rules for unique languages. +.SegoeUILight(@ms-font-language, @ms-font-path) { + @font-face { + font-family: "@{ms-light} @{ms-font-language}"; + src: url('../fonts/@{ms-font-path}/SegoeUI-Light.eot?#iefix') format('embedded-opentype'), + url('../fonts/@{ms-font-path}/SegoeUI-Light.woff') format('woff'), + url('../fonts/@{ms-font-path}/SegoeUI-Light.ttf') format('truetype'), + url('../fonts/@{ms-font-path}/SegoeUI-Light.svg#SegoeUI-Light') format('svg'); + font-weight: normal; + font-style: normal; + } +} + +.SegoeUIRegular(@ms-font-language, @ms-font-path) { + @font-face { + font-family: "@{ms-regular} @{ms-font-language}"; + src: url('../fonts/@{ms-font-path}/SegoeUI-Regular.eot?#iefix') format('embedded-opentype'), + url('../fonts/@{ms-font-path}/SegoeUI-Regular.woff') format('woff'), + url('../fonts/@{ms-font-path}/SegoeUI-Regular.ttf') format('truetype'), + url('../fonts/@{ms-font-path}/SegoeUI-Regular.svg#SegoeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; + } +} + +.SegoeUISemilight(@ms-font-language, @ms-font-path) { + @font-face { + font-family: "@{ms-semilight} @{ms-font-language}"; + src: url('../fonts/@{ms-font-path}/SegoeUI-Semilight.eot?#iefix') format('embedded-opentype'), + url('../fonts/@{ms-font-path}/SegoeUI-Semilight.woff') format('woff'), + url('../fonts/@{ms-font-path}/SegoeUI-Semilight.ttf') format('truetype'), + url('../fonts/@{ms-font-path}/SegoeUI-Semilight.svg#SegoeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; + } +} + +.SegoeUISemibold(@ms-font-language, @ms-font-path) { + @font-face { + font-family: "@{ms-semibold} @{ms-font-language}"; + src: url('../fonts/@{ms-font-path}/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), + url('../fonts/@{ms-font-path}/SegoeUI-Semibold.woff') format('woff'), + url('../fonts/@{ms-font-path}/SegoeUI-Semibold.ttf') format('truetype'), + url('../fonts/@{ms-font-path}/SegoeUI-Semibold.svg#SegoeUI-Semibold') format('svg'); + font-weight: normal; + font-style: normal; + } +} + + +// Additional @font-face rules for the Leelawadee font. +@font-face { + font-family: "Leelawadee UI Bold"; + src: url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI"; + src: url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Leelawadee UI Semilight"; + src: url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'), + url('../fonts/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg'); + font-weight: normal; + font-style: normal; +} + + +// Mixins to generate language-specific font faces. +.SegoeUIArabicLight { + .SegoeUILight("Arabic", @ms-font-path-arabic); +} +.SegoeUIArabicRegular { + .SegoeUIRegular("Arabic", @ms-font-path-arabic); +} +.SegoeUIArabicSemibold { + .SegoeUISemibold("Arabic", @ms-font-path-arabic); +} +.SegoeUIArabicSemilight { + .SegoeUISemilight("Arabic", @ms-font-path-arabic); +} + +.SegoeUICyrillicLight { + .SegoeUILight("Cyrillic", @ms-font-path-cyrillic); +} +.SegoeUICyrillicRegular { + .SegoeUIRegular("Cyrillic", @ms-font-path-cyrillic); +} +.SegoeUICyrillicSemibold { + .SegoeUISemibold("Cyrillic", @ms-font-path-cyrillic); +} +.SegoeUICyrillicSemilight { + .SegoeUISemilight("Cyrillic", @ms-font-path-cyrillic); +} + +.SegoeUIEastEuropeanLight { + .SegoeUILight("EastEuropean", @ms-font-path-easteuropean); +} +.SegoeUIEastEuropeanRegular { + .SegoeUIRegular("EastEuropean", @ms-font-path-easteuropean); +} +.SegoeUIEastEuropeanSemibold { + .SegoeUISemibold("EastEuropean", @ms-font-path-easteuropean); +} +.SegoeUIEastEuropeanSemilight { + .SegoeUISemilight("EastEuropean", @ms-font-path-easteuropean); +} + +.SegoeUIGreekLight { + .SegoeUILight("Greek", @ms-font-path-greek); +} +.SegoeUIGreekRegular { + .SegoeUIRegular("Greek", @ms-font-path-greek); +} +.SegoeUIGreekSemibold { + .SegoeUISemibold("Greek", @ms-font-path-greek); +} +.SegoeUIGreekSemilight { + .SegoeUISemilight("Greek", @ms-font-path-greek); +} + +.SegoeUIHebrewLight { + .SegoeUILight("Hebrew", @ms-font-path-hebrew); +} +.SegoeUIHebrewRegular { + .SegoeUIRegular("Hebrew", @ms-font-path-hebrew); +} +.SegoeUIHebrewSemibold { + .SegoeUISemibold("Hebrew", @ms-font-path-hebrew); +} +.SegoeUIHebrewSemilight { + .SegoeUISemilight("Hebrew", @ms-font-path-hebrew); +} + +.SegoeUIVietnameseLight { + .SegoeUILight("Vietnamese", @ms-font-path-vietnamese); +} +.SegoeUIVietnameseRegular { + .SegoeUIRegular("Vietnamese", @ms-font-path-vietnamese); +} +.SegoeUIVietnameseSemibold { + .SegoeUISemibold("Vietnamese", @ms-font-path-vietnamese); +} +.SegoeUIVietnameseSemilight { + .SegoeUISemilight("Vietnamese", @ms-font-path-vietnamese); +} + +.SegoeUIWestEuropeanLight { + .SegoeUILight("WestEuropean", @ms-font-path-westeuropean); +} +.SegoeUIWestEuropeanRegular { + .SegoeUIRegular("WestEuropean", @ms-font-path-westeuropean); +} +.SegoeUIWestEuropeanSemibold { + .SegoeUISemibold("WestEuropean", @ms-font-path-westeuropean); +} +.SegoeUIWestEuropeanSemilight { + .SegoeUISemilight("WestEuropean", @ms-font-path-westeuropean); +} + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY FONT VARIABLES: + + +// Font weights. +@light: @ms-light; +@regular: @ms-regular; +@semibold: @ms-semibold; +@semilight: @ms-semilight; + + +// Font paths. +@font-path-arabic: @ms-font-path-arabic; +@font-path-cyrillic: @ms-font-path-cyrillic; +@font-path-easteuropean: @ms-font-path-easteuropean; +@font-path-greek: @ms-font-path-greek; +@font-path-hebrew: @ms-font-path-hebrew; +@font-path-vietnamese: @ms-font-path-vietnamese; +@font-path-westeuropean: @ms-font-path-westeuropean; diff --git a/src/less/_Fabric.Typography.Languageoverrides.less b/src/less/_Fabric.Typography.Languageoverrides.less new file mode 100644 index 00000000..442b9fea --- /dev/null +++ b/src/less/_Fabric.Typography.Languageoverrides.less @@ -0,0 +1,226 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Language override definitions + + +// A mixin that overrides all of the font classes for languages that +// use system fonts. A single font-family is used for all weights. +.language-override-system-fonts(@ms-lang-code, @ms-font-family) { + *[lang="@{ms-lang-code}"] { + .ms-font-mi, + .ms-font-xs, + .ms-font-s, + .ms-font-s-plus, + .ms-font-m, + .ms-font-m-plus, + .ms-font-l, + .ms-font-xl, + .ms-font-xxl, + .ms-font-su, + .ms-font-weight-light, + .ms-font-weight-light-hover:hover, + .ms-font-weight-semilight, + .ms-font-weight-semilight-hover:hover, + .ms-font-weight-regular, + .ms-font-weight-regular-hover:hover, + .ms-font-weight-semibold, + .ms-font-weight-semibold-hover:hover { + font-family: @ms-font-family; + } + } +} + +// Base font stack. +@ms-font-system-base: 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + +// Variables for each of the non-distributed (native) font stacks. +@ms-font-stack-japanese: YuGothic, "Meiryo UI", Meiryo, "MS Pgothic", Osaka, @ms-font-system-base; +@ms-font-stack-korean: "Malgun Gothic", Gulim, @ms-font-system-base; +@ms-font-stack-chinese-simplified: "Microsoft Yahei", Verdana, Simsun, @ms-font-system-base; +@ms-font-stack-chinese-traditional: "Microsoft Jhenghei", Pmingliu, @ms-font-system-base; +@ms-font-stack-hindi: "Nirmala UI", @ms-font-system-base; + +// Generate the override classes for non-distributed fonts. +.language-override-system-fonts(ja-JP, @ms-font-stack-japanese); +.language-override-system-fonts(ko-KR, @ms-font-stack-korean); +.language-override-system-fonts(ch-ZHS, @ms-font-stack-chinese-simplified); +.language-override-system-fonts(ch-ZHT, @ms-font-stack-chinese-traditional); +.language-override-system-fonts(hi-IN, @ms-font-stack-hindi); + + +//== Web fonts +// +// A mixin that overrides all of the font classes for languages that use +// distributed web fonts. These reference different fonts for each weight. +.language-override-web-fonts(@ms-lang-code, @ms-font-family-light, @ms-font-family-semilight, @ms-font-family-regular, @ms-font-family-semibold) { + *[lang="@{ms-lang-code}"] { + .ms-font-xl, + .ms-font-xxl, + .ms-font-weight-light, + .ms-font-weight-light-hover:hover { + font-family: @ms-font-family-light; + } + .ms-font-l, + .ms-font-su, + .ms-font-weight-semilight, + .ms-font-weight-semilight-hover:hover { + font-family: @ms-font-family-semilight; + } + .ms-font-weight-regular, + .ms-font-weight-regular-hover:hover { + font-family: @ms-font-family-regular; + } + .ms-font-mi, + .ms-font-weight-semibold, + .ms-font-weight-semibold-hover:hover { + font-family: @ms-font-family-semibold; + } + } +} + + + +// Variables for each of the web font stacks. + +// East European +@ms-font-family-light-eastEuropean: 'Segoe UI Light EastEuropean', @ms-font-family-light; +@ms-font-family-semilight-eastEuropean: 'Segoe UI Semilight EastEuropean', @ms-font-family-semilight; +@ms-font-family-regular-eastEuropean: 'Segoe UI Regular EastEuropean', @ms-font-family-regular; +@ms-font-family-semibold-eastEuropean: 'Segoe UI Semibold EastEuropean', @ms-font-family-semibold; + +// Cyrillic +@ms-font-family-light-cyrillic: 'Segoe UI Light Cyrillic', @ms-font-family-light; +@ms-font-family-semilight-cyrillic: 'Segoe UI Semilight Cyrillic', @ms-font-family-semilight; +@ms-font-family-regular-cyrillic: 'Segoe UI Regular Cyrillic', @ms-font-family-regular; +@ms-font-family-semibold-cyrillic: 'Segoe UI Semibold Cyrillic', @ms-font-family-semibold; + +// Leelawadee +@ms-font-family-semilight-leelawadee: 'Leelawadee UI Semilight', 'Kmer UI', @ms-font-family-semilight; +@ms-font-family-regular-leelawadee: 'Leelawadee UI Regular', 'Kmer UI', @ms-font-family-regular; +@ms-font-family-semibold-leelawadee: 'Leelawadee UI Bold', 'Kmer UI', @ms-font-family-semibold; + +// Arabic +@ms-font-family-light-arabic: 'Segoe UI Light Arabic', @ms-font-family-light; +@ms-font-family-semilight-arabic: 'Segoe UI Semilight Arabic', @ms-font-family-semilight; +@ms-font-family-regular-arabic: 'Segoe UI Regular Arabic', @ms-font-family-regular; +@ms-font-family-semibold-arabic: 'Segoe UI Semibold Arabic', @ms-font-family-semibold; + +// Greek +@ms-font-family-light-greek: 'Segoe UI Light Greek', @ms-font-family-light; +@ms-font-family-semilight-greek: 'Segoe UI Semilight Greek', @ms-font-family-semilight; +@ms-font-family-regular-greek: 'Segoe UI Regular Greek', @ms-font-family-regular; +@ms-font-family-semibold-greek: 'Segoe UI Semibold Greek', @ms-font-family-semibold; + +// Hebrew +@ms-font-family-light-hebrew: 'Segoe UI Light Hebrew', @ms-font-family-light; +@ms-font-family-semilight-hebrew: 'Segoe UI Semilight Hebrew', @ms-font-family-semilight; +@ms-font-family-regular-hebrew: 'Segoe UI Regular Hebrew', @ms-font-family-regular; +@ms-font-family-semibold-hebrew: 'Segoe UI Semibold Hebrew', @ms-font-family-semibold; + +// Vietnamese +@ms-font-family-light-vietnamese: 'Segoe UI Light Vietnamese', @ms-font-family-light; +@ms-font-family-semilight-vietnamese: 'Segoe UI Semilight Vietnamese', @ms-font-family-semilight; +@ms-font-family-regular-vietnamese: 'Segoe UI Regular Vietnamese', @ms-font-family-regular; +@ms-font-family-semibold-vietnamese: 'Segoe UI Semibold Vietnamese', @ms-font-family-semibold; + + +// Generate the override classes for web fonts. +// Leelawadee +// th-TH +.language-override-web-fonts(th-TH, @ms-font-family-semilight-leelawadee, @ms-font-family-semilight-leelawadee, @ms-font-family-regular-leelawadee, @ms-font-family-semibold-leelawadee); + +// Arabic +// ar +.language-override-web-fonts(ar, @ms-font-family-light-arabic, @ms-font-family-semilight-arabic, @ms-font-family-regular-arabic, @ms-font-family-semibold-arabic); + +// Cyrillic +// bg-BG, ru-RU, uk-UA +.language-override-web-fonts(bg-BG, @ms-font-family-light-cyrillic, @ms-font-family-semilight-cyrillic, @ms-font-family-regular-cyrillic, @ms-font-family-semibold-cyrillic); +.language-override-web-fonts(ru-RU, @ms-font-family-light-cyrillic, @ms-font-family-semilight-cyrillic, @ms-font-family-regular-cyrillic, @ms-font-family-semibold-cyrillic); +.language-override-web-fonts(uk-UA, @ms-font-family-light-cyrillic, @ms-font-family-semilight-cyrillic, @ms-font-family-regular-cyrillic, @ms-font-family-semibold-cyrillic); + +// East European +// cs-CZ, et-EE, hr-HR, hu-HU, lt-LT, pl-PL, lt-sr-SP, tr-TR, sk-SK, kk-KZ +.language-override-web-fonts(cs-CZ, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(et-EE, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(hr-HR, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(hu-HU, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(lt-LT, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(lv-LV, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(pl-PL, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(lt-sr-SP, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(tr-TR, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(sk-SK, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); +.language-override-web-fonts(kk-KZ, @ms-font-family-light-eastEuropean, @ms-font-family-semilight-eastEuropean, @ms-font-family-regular-eastEuropean, @ms-font-family-semibold-eastEuropean); + +// Greek +// el-GR +.language-override-web-fonts(el-GR, @ms-font-family-light-greek, @ms-font-family-semilight-greek, @ms-font-family-regular-greek, @ms-font-family-semibold-greek); + +// Hebrew +// he-IL +.language-override-web-fonts(he-IL, @ms-font-family-light-hebrew, @ms-font-family-semilight-hebrew, @ms-font-family-regular-hebrew, @ms-font-family-semibold-hebrew); + +// Vietnamese +// vi-VN +.language-override-web-fonts(vi-VN, @ms-font-family-light-vietnamese, @ms-font-family-semilight-vietnamese, @ms-font-family-regular-vietnamese, @ms-font-family-semibold-vietnamese); + + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY FONT VARIABLES: + +// Base font stack. +@font-system-base: @ms-font-system-base; + +// Variables for each of the non-distributed (native) font stacks. +@font-stack-japanese: @ms-font-stack-japanese; +@font-stack-korean: @ms-font-stack-korean; +@font-stack-chinese-simplified: @ms-font-stack-chinese-simplified; +@font-stack-chinese-traditional: @ms-font-stack-chinese-traditional; +@font-stack-hindi: @ms-font-stack-hindi; + +// Variables for each of the web font stacks. +// East European +@font-family-light-eastEuropean: @ms-font-family-light-eastEuropean; +@font-family-semilight-eastEuropean: @ms-font-family-semilight-eastEuropean; +@font-family-regular-eastEuropean: @ms-font-family-regular-eastEuropean; +@font-family-semibold-eastEuropean: @ms-font-family-semibold-eastEuropean; + +// Cyrillic +@font-family-light-cyrillic: @ms-font-family-light-cyrillic; +@font-family-semilight-cyrillic: @ms-font-family-semilight-cyrillic; +@font-family-regular-cyrillic: @ms-font-family-regular-cyrillic; +@font-family-semibold-cyrillic: @ms-font-family-semibold-cyrillic; + +// Leelawadee +@font-family-semilight-leelawadee: @ms-font-family-semilight-leelawadee; +@font-family-regular-leelawadee: @ms-font-family-regular-leelawadee; +@font-family-semibold-leelawadee: @ms-font-family-semibold-leelawadee; + +// Arabic +@font-family-light-arabic: @ms-font-family-light-arabic; +@font-family-semilight-arabic: @ms-font-family-semilight-arabic; +@font-family-regular-arabic: @ms-font-family-regular-arabic; +@font-family-semibold-arabic: @ms-font-family-semibold-arabic; + +// Greek +@font-family-light-greek: @ms-font-family-light-greek; +@font-family-semilight-greek: @ms-font-family-semilight-greek; +@font-family-regular-greek: @ms-font-family-regular-greek; +@font-family-semibold-greek: @ms-font-family-semibold-greek; + +// Hebrew +@font-family-light-hebrew: @ms-font-family-light-hebrew; +@font-family-semilight-hebrew: @ms-font-family-semilight-hebrew; +@font-family-regular-hebrew: @ms-font-family-regular-hebrew; +@font-family-semibold-hebrew: @ms-font-family-semibold-hebrew; + +// Vietnamese +@font-family-light-vietnamese: @ms-font-family-light-vietnamese; +@font-family-semilight-vietnamese: @ms-font-family-semilight-vietnamese; +@font-family-regular-vietnamese: @ms-font-family-regular-vietnamese; +@font-family-semibold-vietnamese: @ms-font-family-semibold-vietnamese; diff --git a/src/less/_Fabric.Typography.Variables.less b/src/less/_Fabric.Typography.Variables.less new file mode 100644 index 00000000..c4851ece --- /dev/null +++ b/src/less/_Fabric.Typography.Variables.less @@ -0,0 +1,53 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Fabric Core Typography variables + + +@ms-font-family-light: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe WP Light', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +@ms-font-family-regular: 'Segoe UI Regular WestEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +@ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; +@ms-font-family-semibold: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe WP Semibold', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; + + +//== Type sizes +// + +@ms-font-size-su: 42px; +@ms-font-size-xxl: 28px; +@ms-font-size-xl: 21px; +@ms-font-size-l: 17px; +@ms-font-size-m-plus: 15px; +@ms-font-size-m: 14px; +@ms-font-size-s-plus: 13px; +@ms-font-size-s: 12px; +@ms-font-size-xs: 11px; +@ms-font-size-mi: 10px; + + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY FONT VARIABLES: + +//== Font weights/families +// +@font-family-light: @ms-font-family-light; +@font-family-regular: @ms-font-family-regular; +@font-family-semilight: @ms-font-family-semilight; +@font-family-semibold: @ms-font-family-semibold; + +//== Type sizes +// +@font-size-su: @ms-font-size-su; +@font-size-xxl: @ms-font-size-xxl; +@font-size-xl: @ms-font-size-xl; +@font-size-l: @ms-font-size-l; +@font-size-m-plus: @ms-font-size-m-plus; +@font-size-m: @ms-font-size-m; +@font-size-s-plus: @ms-font-size-s-plus; +@font-size-s: @ms-font-size-s; +@font-size-xs: @ms-font-size-xs; +@font-size-mi: @ms-font-size-mi; + diff --git a/src/less/_Fabric.Typography.less b/src/less/_Fabric.Typography.less new file mode 100644 index 00000000..d43fadee --- /dev/null +++ b/src/less/_Fabric.Typography.less @@ -0,0 +1,414 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Typographic mixins arranged with appropriate size and family combinations. + + +// Super Styles (LIMITED USE) +// Weights: Light +.ms-font-su { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-light; + font-size: @ms-font-size-su; + font-weight: normal; +} +// No touch class for Super + +// Extra-Extra-Large +// Allowed weights: Light, SemiLight +.ms-font-xxl { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-light; + font-size: @ms-font-size-xxl; + font-weight: normal; +} + +// Extra-Large Styles +// Allowed weights: Light, SemiLight +.ms-font-xl { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-light; + font-size: @ms-font-size-xl; + font-weight: normal; +} + +// Large Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-l { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-semilight; + font-size: @ms-font-size-l; + font-weight: normal; +} + +// Medium Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m-plus { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-m-plus; + font-weight: normal; +} + +// Medium Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-m { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-m; + font-weight: normal; +} + +// Small Plus Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s-plus { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-s-plus; + font-weight: normal; +} + +// Small Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-s { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-s; + font-weight: normal; +} + +// XS Styles +// Allowed weights: SemiLight, Regular, Semibold +.ms-font-xs { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-regular; + font-size: @ms-font-size-xs; + font-weight: normal; +} + +// Micro Styles (LIMITED USE) +// Weights: Semibold +.ms-font-mi { + color: @ms-color-neutralPrimary; + font-family: @ms-font-family-semibold; + font-size: @ms-font-size-mi; + font-weight: normal; +} + +//== Helper classes & mixins +// +// Helper mixins to override default type values + +// Font weights +.ms-font-weight-light, .ms-font-weight-light-hover:hover, +.ms-fontWeight-light, .ms-fontWeight-light--hover:hover { + font-family: @ms-font-family-light; +} + +.ms-font-weight-semilight, .ms-font-weight-semilight-hover:hover, +.ms-fontWeight-semilight, .ms-fontWeight-semilight--hover:hover { + font-family: @ms-font-family-semilight; +} + +.ms-font-weight-regular, .ms-font-weight-regular-hover:hover, +.ms-fontWeight-regular, .ms-fontWeight-regular--hover:hover { + font-family: @ms-font-family-regular; +} + +.ms-font-weight-semibold, .ms-font-weight-semibold-hover:hover, +.ms-fontWeight-semibold, .ms-fontWeight-semibold--hover:hover { + font-family: @ms-font-family-semibold; +} + + +// Font sizes +.ms-font-size-su, +.ms-fontSize-su { + font-size: @ms-font-size-su; +} + +.ms-font-size-xxl, +.ms-fontSize-xxl { + font-size: @ms-font-size-xxl; +} + +.ms-font-size-xl, +.ms-fontSize-xl { + font-size: @ms-font-size-xl; +} + +.ms-font-size-l, +.ms-fontSize-l { + font-size: @ms-font-size-l; +} + +.ms-font-size-m-plus, +.ms-fontSize-mPlus { + font-size: @ms-font-size-m-plus; +} + +.ms-font-size-m, +.ms-fontSize-m { + font-size: @ms-font-size-m; +} + +.ms-font-size-s-plus +.ms-fontSize-sPlus { + font-size: @ms-font-size-s-plus; +} + +.ms-font-size-s, +.ms-fontSize-s { + font-size: @ms-font-size-s; +} + +.ms-font-size-xs, +.ms-fontSize-xs { + font-size: @ms-font-size-xs; +} + +.ms-font-size-mi, +.ms-fontSize-mi { + font-size: @ms-font-size-mi; +} + +// Theme colors +.ms-font-color-themeDarker, .ms-font-color-themeDarker-hover:hover, +.ms-fontColor-themeDarker, .ms-fontColor-themeDarker--hover:hover { + color: @ms-color-themeDarker; +} + +.ms-font-color-themeDark, .ms-font-color-themeDark-hover:hover, +.ms-fontColor-themeDark, .ms-fontColor-themeDark--hover:hover { + color: @ms-color-themeDark; +} + +.ms-font-color-themeDarkAlt, .ms-font-color-themeDarkAlt-hover:hover, +.ms-fontColor-themeDarkAlt, .ms-fontColor-themeDarkAlt--hover:hover { + color: @ms-color-themeDarkAlt; +} + +.ms-font-color-themePrimary, .ms-font-color-themePrimary-hover:hover, +.ms-fontColor-themePrimary, .ms-fontColor-themePrimary--hover:hover { + color: @ms-color-themePrimary; +} + +.ms-font-color-themeSecondary, .ms-font-color-themeSecondary-hover:hover, +.ms-fontColor-themeSecondary, .ms-fontColor-themeSecondary--hover:hover { + color: @ms-color-themeSecondary; +} + +.ms-font-color-themeTertiary, .ms-font-color-themeTertiary-hover:hover, +.ms-fontColor-themeTertiary, .ms-fontColor-themeTertiary--hover:hover { + color: @ms-color-themeTertiary; +} + +.ms-font-color-themeLight, .ms-font-color-themeLight-hover:hover, +.ms-fontColor-themeLight, .ms-fontColor-themeLight--hover:hover { + color: @ms-color-themeLight; +} + +.ms-font-color-themeLighter, .ms-font-color-themeLighter-hover:hover, +.ms-fontColor-themeLighter, .ms-fontColor-themeLighter--hover:hover { + color: @ms-color-themeLighter; +} + +.ms-font-color-themeLighterAlt, .ms-font-color-themeLighterAlt-hover:hover, +.ms-fontColor-themeLighterAlt, .ms-fontColor-themeLighterAlt--hover:hover { + color: @ms-color-themeLighterAlt; +} + + +// Neutral colors +.ms-font-color-black, .ms-font-color-black-hover:hover, +.ms-fontColor-black, .ms-fontColor-black--hover:hover { + color: @ms-color-black; +} + +.ms-font-color-neutralDark, .ms-font-color-neutralDark-hover:hover, +.ms-fontColor-neutralDark, .ms-fontColor-neutralDark--hover:hover { + color: @ms-color-neutralDark; +} + +.ms-font-color-neutralPrimary, .ms-font-color-neutralPrimary-hover:hover, +.ms-fontColor-neutralPrimary, .ms-fontColor-neutralPrimary--hover:hover { + color: @ms-color-neutralPrimary; +} + +.ms-font-color-neutralSecondary, .ms-font-color-neutralSecondary-hover:hover, +.ms-fontColor-neutralSecondary, .ms-fontColor-neutralSecondary--hover:hover { + color: @ms-color-neutralSecondary; +} + +.ms-font-color-neutralSecondaryAlt, .ms-font-color-neutralSecondaryAlt-hover:hover, +.ms-fontColor-neutralSecondaryAlt, .ms-fontColor-neutralSecondaryAlt--hover:hover +{ color: @ms-color-neutralSecondaryAlt; +} + +.ms-font-color-neutralTertiary, .ms-font-color-neutralTertiary-hover:hover, +.ms-fontColor-neutralTertiary, .ms-fontColor-neutralTertiary--hover:hover { + color: @ms-color-neutralTertiary; +} + +.ms-font-color-neutralTertiaryAlt, .ms-font-color-neutralTertiaryAlt-hover:hover, +.ms-fontColor-neutralTertiaryAlt, .ms-fontColor-neutralTertiaryAlt--hover:hover +{ color: @ms-color-neutralTertiaryAlt; +} + +.ms-font-color-neutralLight, .ms-font-color-neutralLight-hover:hover, +.ms-fontColor-neutralLight, .ms-fontColor-neutralLight--hover:hover { + color: @ms-color-neutralLight; +} + +.ms-font-color-neutralLighter, .ms-font-color-neutralLighter-hover:hover, +.ms-fontColor-neutralLighter, .ms-fontColor-neutralLighter--hover:hover { + color: @ms-color-neutralLighter; +} + +.ms-font-color-neutralLighterAlt, .ms-font-color-neutralLighterAlt-hover:hover, +.ms-fontColor-neutralLighterAlt, .ms-fontColor-neutralLighterAlt--hover:hover +{ color: @ms-color-neutralLighterAlt; +} + +.ms-font-color-white, .ms-font-color-white-hover:hover, +.ms-fontColor-white, .ms-fontColor-white--hover:hover { + color: @ms-color-white; +} + + +// Brand and accent colors +.ms-font-color-yellow, .ms-font-color-yellow-hover:hover, +.ms-fontColor-yellow, .ms-fontColor-yellow--hover:hover { + color: @ms-color-yellow; +} + +.ms-font-color-yellowLight, .ms-font-color-yellowLight-hover:hover, +.ms-fontColor-yellowLight, .ms-fontColor-yellowLight--hover:hover { + color: @ms-color-yellowLight; +} + +.ms-font-color-orange, .ms-font-color-orange-hover:hover, +.ms-fontColor-orange, .ms-fontColor-orange--hover:hover { + color: @ms-color-orange; +} + +.ms-font-color-orangeLight, .ms-font-color-orangeLight-hover:hover, +.ms-fontColor-orangeLight, .ms-fontColor-orangeLight--hover:hover { + color: @ms-color-orangeLight; +} + +.ms-font-color-redDark, .ms-font-color-redDark-hover:hover, +.ms-fontColor-redDark, .ms-fontColor-redDark--hover:hover { + color: @ms-color-redDark; +} + +.ms-font-color-red, .ms-font-color-red-hover:hover, +.ms-fontColor-red, .ms-fontColor-red--hover:hover { + color: @ms-color-red; +} + +.ms-font-color-magentaDark, .ms-font-color-magentaDark-hover:hover, +.ms-fontColor-magentaDark, .ms-fontColor-magentaDark--hover:hover { + color: @ms-color-magentaDark; +} + +.ms-font-color-magenta, .ms-font-color-magenta-hover:hover, +.ms-fontColor-magenta, .ms-fontColor-magenta--hover:hover { + color: @ms-color-magenta; +} + +.ms-font-color-magentaLight, .ms-font-color-magentaLight-hover:hover, +.ms-fontColor-magentaLight, .ms-fontColor-magentaLight--hover:hover { + color: @ms-color-magentaLight; +} + +.ms-font-color-purpleDark, .ms-font-color-purpleDark-hover:hover, +.ms-fontColor-purpleDark, .ms-fontColor-purpleDark--hover:hover { + color: @ms-color-purpleDark; +} + +.ms-font-color-purple, .ms-font-color-purple-hover:hover, +.ms-fontColor-purple, .ms-fontColor-purple--hover:hover { + color: @ms-color-purple; +} + +.ms-font-color-purpleLight, .ms-font-color-purpleLight-hover:hover, +.ms-fontColor-purpleLight, .ms-fontColor-purpleLight--hover:hover { + color: @ms-color-purpleLight; +} + +.ms-font-color-blueDark, .ms-font-color-blueDark-hover:hover, +.ms-fontColor-blueDark, .ms-fontColor-blueDark--hover:hover { + color: @ms-color-blueDark; +} + +.ms-font-color-blueMid, .ms-font-color-blueMid-hover:hover, +.ms-fontColor-blueMid, .ms-fontColor-blueMid--hover:hover { + color: @ms-color-blueMid; +} + +.ms-font-color-blue, .ms-font-color-blue-hover:hover, +.ms-fontColor-blue, .ms-fontColor-blue--hover:hover { + color: @ms-color-blue; +} + +.ms-font-color-blueLight, .ms-font-color-blueLight-hover:hover, +.ms-fontColor-blueLight, .ms-fontColor-blueLight--hover:hover { + color: @ms-color-blueLight; +} + +.ms-font-color-tealDark, .ms-font-color-tealDark-hover:hover, +.ms-fontColor-tealDark, .ms-fontColor-tealDark--hover:hover { + color: @ms-color-tealDark; +} + +.ms-font-color-teal, .ms-font-color-teal-hover:hover, +.ms-fontColor-teal, .ms-fontColor-teal--hover:hover { + color: @ms-color-teal; +} + +.ms-font-color-tealLight, .ms-font-color-tealLight-hover:hover, +.ms-fontColor-tealLight, .ms-fontColor-tealLight--hover:hover { + color: @ms-color-tealLight; +} + +.ms-font-color-greenDark, .ms-font-color-greenDark-hover:hover, +.ms-fontColor-greenDark, .ms-fontColor-greenDark--hover:hover { + color: @ms-color-greenDark; +} + +.ms-font-color-green, .ms-font-color-green-hover:hover, +.ms-fontColor-green, .ms-fontColor-green--hover:hover { + color: @ms-color-green; +} + +.ms-font-color-greenLight, .ms-font-color-greenLight-hover:hover, +.ms-fontColor-greenLight, .ms-fontColor-greenLight--hover:hover { + color: @ms-color-greenLight; +} + +// Other colors +.ms-font-color-error, .ms-font-color-error-hover:hover, +.ms-fontColor-error, .ms-fontColor-error--hover:hover { + color: @ms-color-error; +} + +.ms-font-color-alert, .ms-font-color-alert-hover:hover, +.ms-fontColor-alert, .ms-fontColor-alert--hover:hover { + color: @ms-color-alert; +} + +.ms-font-color-info, .ms-font-color-info-hover:hover, +.ms-fontColor-info, .ms-fontColor-info--hover:hover { + color: @ms-color-info; +} + +.ms-font-color-success, .ms-font-color-success-hover:hover, +.ms-fontColor-success, .ms-fontColor-success--hover:hover { + color: @ms-color-success; +} + +.ms-font-color-orangeLighter, .ms-font-color-orangeLighter-hover:hover, +.ms-fontColor-orangeLighter, .ms-fontColor-orangeLighter--hover:hover { + color: @ms-color-orangeLighter; +} diff --git a/src/less/_Fabric.Utilities.less b/src/less/_Fabric.Utilities.less new file mode 100644 index 00000000..4f07cd83 --- /dev/null +++ b/src/less/_Fabric.Utilities.less @@ -0,0 +1,33 @@ +//== Utilities +// +// Utility classes and mixins used throughout Fabric. + +// The best box is a border box. +.ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after { + box-sizing: border-box; +} + +// Ensures the block expands to the full height to enclose its floated childen. +// +// The .clearfix class is deprecated and will be removed in a future release. +.ms-u-clearfix, +.clearfix { + *zoom: 1; + &:before, + &:after { + display: table; + content: ""; + line-height: 0; + } + &:after { + clear: both; + } +} + +// Basic border-box, margin, and padding reset. +.ms-u-normalize { + .ms-u-borderBox; + .resetMargins; + .resetPadding; + .resetBoxShadow; +} diff --git a/src/less/_Fabric.ZIndex.Variables.less b/src/less/_Fabric.ZIndex.Variables.less new file mode 100644 index 00000000..72d22835 --- /dev/null +++ b/src/less/_Fabric.ZIndex.Variables.less @@ -0,0 +1,66 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Z-Index Layeringz + + +// Base Layer Variables +@ms-zIndex-0: 0; +@ms-zIndex-1: 100; +@ms-zIndex-2: 200; +@ms-zIndex-3: 300; +@ms-zIndex-4: 400; +@ms-zIndex-5: 500; + +// Base Layer Modifier Variables +@ms-zIndex-back: 0; +@ms-zIndex-middle: 5; +@ms-zIndex-front: 10; + + +// Fabric Component Base Layer Assignments + +@ms-zIndex-Callout: @ms-zIndex-1; +@ms-zIndex-ContextualMenu: @ms-zIndex-1; +@ms-zIndex-Overlay: @ms-zIndex-2; +@ms-zIndex-Panel: @ms-zIndex-3; +@ms-zIndex-DatePicker: @ms-zIndex-3; +@ms-zIndex-Dialog: @ms-zIndex-3; +@ms-zIndex-PeoplePicker: @ms-zIndex-3; +@ms-zIndex-Dropdown: @ms-zIndex-4; + + + +// Original z-indexes +// +// The values aren't important, but we'll want to +// keep the relative positioning the same most likely. +// +// Each component that uses z-index should have a variable +// for its 'base' layer. Other z-indexes within that component +// can then add or subtract to position themselves relatively. +// +// .ms-Callout--arrowRight:before -1 +// .ms-Callout--arrowRight:after 1 +// .ms-Callout-close 500 +// .ms-Callout-header 100 +// +// .ms-ContextualMenu.is-open 99 +// +// .ms-DatePicker-datePicker 10 +// .ms-DatePicker-headerToggleView 99 +// +// .ms-Dialog 300 +// .ms-Dialog-main 999 +// .ms-Dialog--close 500 +// .ms-Dialog-header 100 +// +// .ms-Dropdown-items 99 +// +// .ms-Overlay 998 +// +// .ms-Panel 10 +// .ms-Panel-main 999 +// +// .ms-PeoplePicker-results 99 +// .ms-PeoplePicker-resultAction 1 diff --git a/src/less/_Office.Color.Mixins.less b/src/less/_Office.Color.Mixins.less new file mode 100644 index 00000000..9c83be79 --- /dev/null +++ b/src/less/_Office.Color.Mixins.less @@ -0,0 +1,166 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Office Core Color Mixins + + +// Note that these are deprecated and will be removed in a future release. + +//== Font colors +// +.ms-font-color-officeAccent1, .ms-font-color-officeAccent1-hover:hover, +.ms-fontColor-officeAccent1, .ms-fontColor-officeAccent1--hover:hover { + color: @ms-color-officeAccent1; +} + +.ms-font-color-officeAccent2, .ms-font-color-officeAccent2-hover:hover, +.ms-fontColor-officeAccent2, .ms-fontColor-officeAccent2--hover:hover { + color: @ms-color-officeAccent2; +} + +.ms-font-color-officeAccent3, .ms-font-color-officeAccent3-hover:hover, +.ms-fontColor-officeAccent3, .ms-fontColor-officeAccent3--hover:hover { + color: @ms-color-officeAccent3; +} + +.ms-font-color-officeAccent4, .ms-font-color-officeAccent4-hover:hover, +.ms-fontColor-officeAccent4, .ms-fontColor-officeAccent4--hover:hover { + color: @ms-color-officeAccent4; +} + +.ms-font-color-officeAccent5, .ms-font-color-officeAccent5-hover:hover, +.ms-fontColor-officeAccent5, .ms-fontColor-officeAccent5--hover:hover { + color: @ms-color-officeAccent5; +} + +.ms-font-color-officeAccent6, .ms-font-color-officeAccent6-hover:hover, +.ms-fontColor-officeAccent6, .ms-fontColor-officeAccent6--hover:hover { + color: @ms-color-officeAccent6; +} + +.ms-font-color-officeAccent7, .ms-font-color-officeAccent7-hover:hover, +.ms-fontColor-officeAccent7, .ms-fontColor-officeAccent7--hover:hover { + color: @ms-color-officeAccent7; +} + +.ms-font-color-officeAccent8, .ms-font-color-officeAccent8-hover:hover, +.ms-fontColor-officeAccent8, .ms-fontColor-officeAccent8--hover:hover { + color: @ms-color-officeAccent8; +} + +.ms-font-color-officeAccent9, .ms-font-color-officeAccent9-hover:hover, +.ms-fontColor-officeAccent9, .ms-fontColor-officeAccent9--hover:hover { + color: @ms-color-officeAccent9; +} + +.ms-font-color-officeAccent10, .ms-font-color-officeAccent10-hover:hover, +.ms-fontColor-officeAccent10, .ms-fontColor-officeAccent10--hover:hover { + color: @ms-color-officeAccent10; +} + + +//== Background colors +// +.ms-bg-color-officeAccent1, .ms-bg-color-officeAccent1-hover:hover, +.ms-bgColor-officeAccent1, .ms-bgColor-officeAccent1--hover:hover { + background-color: @ms-color-officeAccent1; +} + +.ms-bg-color-officeAccent2, .ms-bg-color-officeAccent2-hover:hover, +.ms-bgColor-officeAccent2, .ms-bgColor-officeAccent2--hover:hover { + background-color: @ms-color-officeAccent2; +} + +.ms-bg-color-officeAccent3, .ms-bg-color-officeAccent3-hover:hover, +.ms-bgColor-officeAccent3, .ms-bgColor-officeAccent3--hover:hover { + background-color: @ms-color-officeAccent3; +} + +.ms-bg-color-officeAccent4, .ms-bg-color-officeAccent4-hover:hover, +.ms-bgColor-officeAccent4, .ms-bgColor-officeAccent4--hover:hover { + background-color: @ms-color-officeAccent4; +} + +.ms-bg-color-officeAccent5, .ms-bg-color-officeAccent5-hover:hover, +.ms-bgColor-officeAccent5, .ms-bgColor-officeAccent5--hover:hover { + background-color: @ms-color-officeAccent5; +} + +.ms-bg-color-officeAccent6, .ms-bg-color-officeAccent6-hover:hover, +.ms-bgColor-officeAccent6, .ms-bgColor-officeAccent6--hover:hover { + background-color: @ms-color-officeAccent6; +} + +.ms-bg-color-officeAccent7, .ms-bg-color-officeAccent7-hover:hover, +.ms-bgColor-officeAccent7, .ms-bgColor-officeAccent7--hover:hover { + background-color: @ms-color-officeAccent7; +} + +.ms-bg-color-officeAccent8, .ms-bg-color-officeAccent8-hover:hover, +.ms-bgColor-officeAccent8, .ms-bgColor-officeAccent8--hover:hover { + background-color: @ms-color-officeAccent8; +} + +.ms-bg-color-officeAccent9, .ms-bg-color-officeAccent9-hover:hover, +.ms-bgColor-officeAccent9, .ms-bgColor-officeAccent9--hover:hover { + background-color: @ms-color-officeAccent9; +} + +.ms-bg-color-officeAccent10, .ms-bg-color-officeAccent10-hover:hover, +.ms-bgColor-officeAccent10, .ms-bgColor-officeAccent10--hover:hover { + background-color: @ms-color-officeAccent10; +} + + +//== Border colors +// +.ms-border-color-officeAccent1, .ms-border-color-officeAccent1-hover:hover, +.ms-borderColor-officeAccent1, .ms-borderColor-officeAccent1--hover:hover { + border-color: @ms-color-officeAccent1; +} + +.ms-border-color-officeAccent2, .ms-border-color-officeAccent2-hover:hover, +.ms-borderColor-officeAccent2, .ms-borderColor-officeAccent2--hover:hover { + border-color: @ms-color-officeAccent2; +} + +.ms-border-color-officeAccent3, .ms-border-color-officeAccent3-hover:hover, +.ms-borderColor-officeAccent3, .ms-borderColor-officeAccent3--hover:hover { + border-color: @ms-color-officeAccent3; +} + +.ms-border-color-officeAccent4, .ms-border-color-officeAccent4-hover:hover, +.ms-borderColor-officeAccent4, .ms-borderColor-officeAccent4--hover:hover { + border-color: @ms-color-officeAccent4; +} + +.ms-border-color-officeAccent5, .ms-border-color-officeAccent5-hover:hover, +.ms-borderColor-officeAccent5, .ms-borderColor-officeAccent5--hover:hover { + border-color: @ms-color-officeAccent5; +} + +.ms-border-color-officeAccent6, .ms-border-color-officeAccent6-hover:hover, +.ms-borderColor-officeAccent6, .ms-borderColor-officeAccent6--hover:hover { + border-color: @ms-color-officeAccent6; +} + +.ms-border-color-officeAccent7, .ms-border-color-officeAccent7-hover:hover, +.ms-borderColor-officeAccent7, .ms-borderColor-officeAccent7--hover:hover { + border-color: @ms-color-officeAccent7; +} + +.ms-border-color-officeAccent8, .ms-border-color-officeAccent8-hover:hover, +.ms-borderColor-officeAccent8, .ms-borderColor-officeAccent8--hover:hover { + border-color: @ms-color-officeAccent8; +} + +.ms-border-color-officeAccent9, .ms-border-color-officeAccent9-hover:hover, +.ms-borderColor-officeAccent9, .ms-borderColor-officeAccent9--hover:hover { + border-color: @ms-color-officeAccent9; +} + +.ms-border-color-officeAccent10, .ms-border-color-officeAccent10-hover:hover, +.ms-borderColor-officeAccent10, .ms-borderColor-officeAccent10--hover:hover { + border-color: @ms-color-officeAccent10; +} + diff --git a/src/less/_Office.Color.Variables.less b/src/less/_Office.Color.Variables.less new file mode 100644 index 00000000..da0852e9 --- /dev/null +++ b/src/less/_Office.Color.Variables.less @@ -0,0 +1,60 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Office Core Color Variables + + +//== Theme/Accent colors +// +// Colors used in Office 15 color pickers +// These are deprecated as of Fabric 0.6 + +@ms-color-officeAccent1: #FFFFFF; +@ms-color-officeAccent2: #000000; +@ms-color-officeAccent3: #E7E6E5; +@ms-color-officeAccent4: #44546A; +@ms-color-officeAccent5: #5B9BD5; +@ms-color-officeAccent6: #ED7D31; +@ms-color-officeAccent7: #A5A5A5; +@ms-color-officeAccent8: #FFC001; +@ms-color-officeAccent9: #4472C4; +@ms-color-officeAccent10: #70AD47; + +@ms-color-presence-available: #5dd255; +@ms-color-presence-away: #ffd200; +@ms-color-presence-blocked-background: #dedede; +@ms-color-presence-blocked-line: #c72d25; +@ms-color-presence-busy-stripe-light: #e57a79; +@ms-color-presence-busy-stripe-dark: #d00e0d; +@ms-color-presence-busy-average: #d93b3b; +@ms-color-presence-dnd-background: #c72d25; +@ms-color-presence-dnd-line: #ffffff; +@ms-color-presence-offline: #b6cfd8; + + +// PLEASE NOTE: +// ALL VARIABLES BELOW WILL BE DEPRECATED IN A FUTURE FABRIC RELEASE + +// LEGACY FABRIC OFFICE VARIABLES: + +@color-officeAccent1: @ms-color-officeAccent1; +@color-officeAccent2: @ms-color-officeAccent2; +@color-officeAccent3: @ms-color-officeAccent3; +@color-officeAccent4: @ms-color-officeAccent4; +@color-officeAccent5: @ms-color-officeAccent5; +@color-officeAccent6: @ms-color-officeAccent6; +@color-officeAccent7: @ms-color-officeAccent7; +@color-officeAccent8: @ms-color-officeAccent8; +@color-officeAccent9: @ms-color-officeAccent9; +@color-officeAccent10: @ms-color-officeAccent10; + +@color-presence-available: @ms-color-presence-available; +@color-presence-away: @ms-color-presence-away; +@color-presence-blocked-background: @ms-color-presence-blocked-background; +@color-presence-blocked-line: @ms-color-presence-blocked-line; +@color-presence-busy-stripe-light: @ms-color-presence-busy-stripe-light; +@color-presence-busy-stripe-dark: @ms-color-presence-busy-stripe-dark; +@color-presence-busy-average: @ms-color-presence-busy-average; +@color-presence-dnd-background: @ms-color-presence-dnd-background; +@color-presence-dnd-line: @ms-color-presence-dnd-line; +@color-presence-offline: @ms-color-presence-offline; diff --git a/src/templates/component-manifest-template.less b/src/templates/component-manifest-template.less new file mode 100644 index 00000000..3222d178 --- /dev/null +++ b/src/templates/component-manifest-template.less @@ -0,0 +1,11 @@ +// +// Office UI Fabric +// -------------------------------------------------- +// Template for building a standalone component with dependencies included. + + +@import (reference) '../less/Fabric.less'; +<% dependencies.forEach(function(dep) { %> +@import '../components/<%= dep %>/<%= dep %>.less'; +<% }); %> +@import '../components/<%= componentName %>/<%= componentName %>.less'; \ No newline at end of file diff --git a/src/templates/individual-component-example.html b/src/templates/individual-component-example.html new file mode 100644 index 00000000..3b9cf66e --- /dev/null +++ b/src/templates/individual-component-example.html @@ -0,0 +1,96 @@ + + + + + + + Component <%= componentName %> + + + + + + + + + + + + + + + + + +

      <%= componentName %>

      +
      + <%= stored %> +
      + + \ No newline at end of file