+
Dialog
+
Displays content that temporarily blocks interactions with the application. It is primarily used for confirmation tasks, light-weight creation or edit tasks, and simple management tasks.
+
Variants
+
Default
+
Includes a content area and two buttons.
+
+
+ Open Dialog
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+ Option1
+
+ Option2
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
Multiline
+
Includes multiple large buttons, each with a title and description.
+
+
+ Open Dialog - Multiline
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
+ Create account
+ Description of the action this button takes
+
+
+ Create account
+ Description of the action this button takes
+
+
+ Create account
+ Description of the action this button takes
+
+
+
+
+
+
+
+
+
Provides a large, styled header followed by a content area and two buttons.
+
+
+ Open Dialog - Large Header
+ Opens the Sample Dialog
+
+
+
+
+
+
Blocking
+
The overlay for this variant does not dismiss the Dialog.
+
+
+ Open Dialog - Blocking
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
Are you sure you want to discard these changes?
+
+
+
+
+
+
+
+
Close
+
Includes a close button at the top right, as an additional way to dismiss the dialog.
+
+
+ Open Dialog - Close
+ Opens the Sample Dialog
+
+
+
+
+
+
+
+
+
+
+
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
+
+ Option1
+
+ Option2
+
+
+
+
+ Save
+
+
+ Cancel
+
+
+
+
+
+
+
+
+
States
+
This component has only the default state.
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page. For example:
+ <button class="ms-Button js-DialogAction--open" data-target=".ms-Dialog--sample">
+ <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
+ <span class="ms-Button-label">Open Dialog</span>
+ <span class="ms-Button-description">Opens the Sample Dialog</span>
+ </button>
+
+ <div class="ms-Dialog ms-Dialog--sample">
+ <div class="ms-Overlay ms-Overlay--dark js-DialogAction--close"></div>
+ <div class="ms-Dialog-main">
+ <button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close">
+ <i class="ms-Icon ms-Icon--x"></i>
+ </button>
+ <div class="ms-Dialog-header">
+ <p class="ms-Dialog-title">All emails together</p>
+ </div>
+ <div class="ms-Dialog-inner">
+ <div class="ms-Dialog-content">
+ <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
+ <div class="ms-ChoiceField">
+ <input id="demo-checkbox-unselected1" class="ms-ChoiceField-input" type="checkbox">
+ <label for="demo-checkbox-unselected1" class="ms-ChoiceField-field"><span class="ms-Label">Option1</span></label>
+ </div>
+ <div class="ms-ChoiceField">
+ <input id="demo-checkbox-unselected2" class="ms-ChoiceField-input" type="checkbox">
+ <label for="demo-checkbox-unselected2" class="ms-ChoiceField-field"><span class="ms-Label">Option2</span></label>
+ </div>
+ </div>
+ <div class="ms-Dialog-actions">
+ <div class="ms-Dialog-actionsRight">
+ <button class="ms-Dialog-action ms-Button ms-Button--primary">
+ <span class="ms-Button-label">Save</span>
+ </button>
+ <button class="ms-Dialog-action ms-Button">
+ <span class="ms-Button-label">Cancel</span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.Dialog) {
+ $('.ms-Dialog').Dialog();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content (such as the content of .ms-Dialog-content) with your content.
+
+
Dependencies
+
This component has no dependencies on other components.
+
Accessibility
+
More details will be added here.
+
+
elements inside, this plugin hides the original
+ * dropdown and creates a new "fake" dropdown that can more easily be styled across browsers.
+ *
+ * @param {jQuery Object} One or more .ms-Dropdown containers, each with a dropdown (.ms-Dropdown-select)
+ * @return {jQuery Object} The same containers (allows for chaining)
+ */
+(function ($) {
+ $.fn.Dropdown = function () {
+
+ /** Go through each dropdown we've been given. */
+ return this.each(function () {
+
+ var $dropdownWrapper = $(this),
+ $originalDropdown = $dropdownWrapper.children('.ms-Dropdown-select'),
+ $originalDropdownOptions = $originalDropdown.children('option'),
+ newDropdownTitle = '',
+ newDropdownItems = '',
+ newDropdownSource = '';
+
+ /** Go through the options to fill up newDropdownTitle and newDropdownItems. */
+ $originalDropdownOptions.each(function (index, option) {
+
+ /** If the option is selected, it should be the new dropdown's title. */
+ if (option.selected) {
+ newDropdownTitle = option.text;
+ }
+
+ /** Add this option to the list of items. */
+ newDropdownItems += '' + option.text + ' ';
+
+ });
+
+ /** Insert the replacement dropdown. */
+ newDropdownSource = '' + newDropdownTitle + ' ';
+ $dropdownWrapper.append(newDropdownSource);
+
+ function _openDropdown(evt) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ /** First, let's close any open dropdowns on this page. */
+ $dropdownWrapper.find('.is-open').removeClass('is-open');
+
+ /** Stop the click event from propagating, which would just close the dropdown immediately. */
+ evt.stopPropagation();
+
+ /** Before opening, size the items list to match the dropdown. */
+ var dropdownWidth = $(this).parents(".ms-Dropdown").width();
+ $(this).next(".ms-Dropdown-items").css('width', dropdownWidth + 'px');
+
+ /** Go ahead and open that dropdown. */
+ $dropdownWrapper.toggleClass('is-open');
+ $('.ms-Dropdown').each(function(){
+ if ($(this)[0] !== $dropdownWrapper[0]) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Temporarily bind an event to the document that will close this dropdown when clicking anywhere. */
+ $(document).bind("click.dropdown", function() {
+ $dropdownWrapper.removeClass('is-open');
+ $(document).unbind('click.dropdown');
+ });
+ }
+ }
+
+ /** Toggle open/closed state of the dropdown when clicking its title. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-title', function(event) {
+ _openDropdown(event);
+ });
+
+ /** Keyboard accessibility */
+ $dropdownWrapper.on('keyup', function(event) {
+ var keyCode = event.keyCode || event.which;
+ // Open dropdown on enter or arrow up or arrow down and focus on first option
+ if (!$(this).hasClass('is-open')) {
+ if (keyCode === 13 || keyCode === 38 || keyCode === 40) {
+ _openDropdown(event);
+ if (!$(this).find('.ms-Dropdown-item').hasClass('is-selected')) {
+ $(this).find('.ms-Dropdown-item:first').addClass('is-selected');
+ }
+ }
+ }
+ else if ($(this).hasClass('is-open')) {
+ // Up arrow focuses previous option
+ if (keyCode === 38) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').prev().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').prev().addClass('is-selected');
+ }
+ }
+ // Down arrow focuses next option
+ if (keyCode === 40) {
+ if ($(this).find('.ms-Dropdown-item.is-selected').next().siblings().size() > 0) {
+ $(this).find('.ms-Dropdown-item.is-selected').removeClass('is-selected').next().addClass('is-selected');
+ }
+ }
+ // Enter to select item
+ if (keyCode === 13) {
+ if (!$dropdownWrapper.hasClass('is-disabled')) {
+
+ // Item text
+ var selectedItemText = $(this).find('.ms-Dropdown-item.is-selected').text();
+
+ $(this).find('.ms-Dropdown-title').html(selectedItemText);
+
+ /** Update the original dropdown. */
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+
+ $(this).removeClass('is-open');
+ }
+ }
+ }
+
+ // Close dropdown on esc
+ if (keyCode === 27) {
+ $(this).removeClass('is-open');
+ }
+ });
+
+ /** Select an option from the dropdown. */
+ $dropdownWrapper.on('click', '.ms-Dropdown-item', function () {
+ if (!$dropdownWrapper.hasClass('is-disabled') && !$(this).hasClass('is-disabled')) {
+
+ /** Deselect all items and select this one. */
+ $(this).siblings('.ms-Dropdown-item').removeClass('is-selected');
+ $(this).addClass('is-selected');
+
+ /** Update the replacement dropdown's title. */
+ $(this).parents().siblings('.ms-Dropdown-title').html($(this).text());
+
+ /** Update the original dropdown. */
+ var selectedItemText = $(this).text();
+ $originalDropdown.find("option").each(function(key, value) {
+ if (value.text === selectedItemText) {
+ $(this).prop('selected', true);
+ } else {
+ $(this).prop('selected', false);
+ }
+ });
+ $originalDropdown.change();
+ }
+ });
+
+ });
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/dist/samples/Components/Dropdown/index.html b/dist/samples/Components/Dropdown/index.html
new file mode 100644
index 000000000..f48a19c0a
--- /dev/null
+++ b/dist/samples/Components/Dropdown/index.html
@@ -0,0 +1,250 @@
+
+
+
+
+
+ Component Dropdown
+
+ Dropdown
+
+
Dropdown
+
Allows for the selection of one option from a list.
+
Variants
+
Default
+
+
+ Dropdown label
+
+ Choose a sound…
+ Dog barking
+ Wind blowing
+ Duck quacking
+ Cow mooing
+
+
+
+
States
+
+
+
+State
+Applied to
+Result
+
+
+
+
+.is-disabled.ms-DropdownDisables the dropdown.
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page. For example: <div class="ms-Dropdown" tabindex="0">
+ <label class="ms-Label">Dropdown label</label>
+ <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
+ <select class="ms-Dropdown-select">
+ <option>Choose a sound…</option>
+ <option>Dog barking</option>
+ <option>Wind blowing</option>
+ <option>Duck quacking</option>
+ <option>Cow mooing</option>
+ </select>
+ </div>
+
+Add the following <script> tag to your page to instantiate all Dropdown components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.Dropdown) {
+ $('.ms-Dropdown').Dropdown();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content (such as the options within .ms-Dropdown-select) with your content.
+
+
Dependencies
+
This component has no dependencies.
+
Accessibility
+
More details will be added here.
+
+
' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + name + '
' +
+ '
' + title + '
' +
+ '
' +
+ '
';
+
+ /** Add new item to members list in Facepile */
+ $membersList.prepend(FacepileItem);
+
+ /** Increment member count */
+ incrementMembers();
+ });
+
+ /** Remove members in panel people picker */
+ $pickerMembers.on('click', '.js-selectedRemove', function() {
+ var memberText = $(this).parent().find('.ms-Persona-primaryText').text();
+
+ var $FacepileMember = $membersList.find(".ms-Persona-primaryText:contains(" + memberText + ")").first();
+
+ if ($FacepileMember) {
+ $FacepileMember.parent().closest('.ms-Facepile-itemBtn').remove();
+
+ $membersCount -= 1;
+
+ /** Display a maxiumum of 5 people */
+ $(".ms-Facepile-members").children(":lt(5)").show();
+
+ /** Display counter after 5 people are present */
+ if ($membersCount <= 5) {
+ $(".ms-Facepile-itemBtn--overflow").removeClass("is-active");
+ } else {
+ var remainingMembers = $membersCount - 5;
+ $(".ms-Facepile-overflowText").text("+" + remainingMembers);
+ }
+ }
+ });
+
+ /** Show persona card when selecting a Facepile item */
+ $membersList.on('click', '.ms-Facepile-itemBtn', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() { $personaCard.addClass('is-active'); }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPosition = $(this).offset().left;
+ var correctedPosition = itemPosition - 26;
+
+ $personaCard.css({'left': correctedPosition});
+ } else {
+ $personaCard.css({'left': 0, 'top': 'auto', 'position': 'fixed'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-Facepile-itemBtn--member');
+
+ if (!$memberBtn.is(e.target) && $memberBtn.has(e.target).length === 0 && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ $personaCard.removeAttr('style');
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+
+ });
+ };
+})(jQuery);
\ No newline at end of file
diff --git a/dist/samples/Components/Facepile/index.html b/dist/samples/Components/Facepile/index.html
new file mode 100644
index 000000000..ebc5b7cb1
--- /dev/null
+++ b/dist/samples/Components/Facepile/index.html
@@ -0,0 +1,643 @@
+
+
+
+
+
+ Component Facepile
+
+ Facepile
+
+
Facepile
+
Displays several people with the option to add additional people or view the details of a person.
+
Variants
+
Default
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+ +3
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
States
+
+
+
+State
+Applied to
+Result
+
+
+
+
+.is-active.ms-PersonaCardMakes the PersonaCard for a person visible.
+
+
+.is-active.ms-Facepile-itemBtn--overflowMakes the overflow item for additional people visible.
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.Facepile) {
+ $('.ms-Facepile').Facepile();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
Dependencies
+
This component has dependencies on Overlay, Link, Panel, PeoplePicker, Persona, PersonaCard, and Spinner.
+
Accessibility
+
More details will be added here.
+
+
Component Label
+
+ Label
+
+
Label
+
Used to label form elements such as TextField and Dropdown.
+
Variants
+
Default
+
+
+ Name
+
+
+
+
States
+
+
+
+State
+Applied to
+Result
+
+
+
+
+.is-required.ms-LabelMarks the form element as required.
+
+
+.is-disabled.ms-LabelMarks the form element as disabled.
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page. For example: <label class="ms-Label">
+ Name
+ </label>
+
+Replace the sample HTML content (such as the content of .ms-Label) with your content.
+
+
Dependencies
+
This component has no dependencies on other components.
+
Accessibility
+
When used with a form element, add a for attribute that matches the id attribute of the field.
+
+
Component Link
+
+ Link
+
+
Link
+
Used to create a hyperlink to another location.
+
Variants
+
Default
+
+
You can add links to any text
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit . In condimentum nisl sed dolor consectetur, vitae hendrerit nulla ullamcorper. Sed quis massa mi. Etiam sed ullamcorper est. Phasellus sodales tempus sapien et tristique. Praesent non mauris sem. Aliquam leo elit, molestie sed eros ac, sodales mattis metus. Cras imperdiet est vel quam faucibus posuere. Praesent quis felis mattis, dapibus nibh ut, porttitor dui. Curabitur in eleifend tortor, vel fermentum enim. Etiam blandit quam neque, quis pretium lorem finibus pharetra. Aliquam a placerat arcu. Sed at nibh et nulla ullamcorper pharetra ac ac tortor. Nullam arcu justo, vulputate et efficitur ut, finibus sit amet leo. Phasellus non sem id sapien gravida sodales et at leo.
+
+
+
+
States
+
This component has only the default state.
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page. For example: <div class="ms-font-m">
+ <a href="#" class="ms-Link">Link to a webpage</a>
+ </div>
+
+Replace the sample text with the text of your link.
+
+
Dependencies
+
This component has no dependencies on other components.
+
Accessibility
+
Use the title attribute to provide additional text describing the link, if the link text itself is not descriptive enough.
+
Notes
+
The Link inherits the font family, size, and weight of its parent element. This is why we have placed it within .ms-font-m wrapper in the sample above.
+
+
Component List
+
+ List
+
+
List
+
Presents a number of related items, either as a vertical list or in a grid.
+
Variants
+
Default
+
A standard vertical list of items.
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Grid
+
Places the list items in a grid, with the number of columns adjusting based on the screen size.
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
States
+
This component has only the default state.
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Replace the content with whatever you'd like to display as a list. The samples use .ms-ListItem components, but you can place any content within .ms-List.
+
+
Dependencies
+
This component has no dependencies on other components, although it does often contain ListItem components.
+
Accessibility
+
You can use a ul element if your content is unordered, or ol if the order of the content is important.
+
+
Component ListItem
+
+ ListItem
+
+
List Item
+
Suitable for presenting a summary of an item with associated actions. Most often used within a List component. It was designed to represent an email message on desktop computers and is not currently touch friendly.
+
Variants
+
Default
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Image
+
The same as the default variant, with a thumbnail image added.
+
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Document
+
Showcases a document by providing a thumbnail, title, and some metadata.
+
+
+
+
+ Perdivn Pitch.mp3
+ 08/11/14 12:32p
+
+
+
+
+
States
+
Selectable
+
Apply the is-selectable class to make it possible to select the item.
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Selected
+
When applied alongside the is-selectable class, is-selected will mark it as selected.
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Unseen
+
Use is-unseen to indicate that the item has not been seen.
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Unread
+
Use is-unread to indicate that the item has not been read.
+
+
+
+ Alton Lafferty
+ Meeting notes
+ Today we discussed the importance of a, b, and c in regards to d.
+ 2:42p
+
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.ListItem) {
+ $('.ms-ListItem').ListItem();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content (such as the content of .ms-ListItem-primaryText) with your content.
+
+
Dependencies
+
This component has no dependencies on other components, although it is most often used within a List component.
+
Accessibility
+
More details will be added here.
+
+
Component MessageBanner
+
+ MessageBanner
+
+
Message Banner
+
Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.
+
Variants
+
Default
+
+
+
+
+
+ You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
+
+
+
+
+
+ Get More Storage
+
+
+
+
+
+
+
+
States
+
This component has only the default state.
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Breadcrumbs on the page: <script>
+ $(document).ready(function() {
+ if (typeof fabric !== "undefined") {
+ if ('MessageBanner' in fabric) {
+ var elements = document.querySelectorAll('.ms-MessageBanner');
+ var i = elements.length;
+ var component;
+ while(i--) {
+ component = new fabric['MessageBanner'](elements[i]);
+ }
+ }
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content (such as the text in .ms-MessageBanner-action) with your content.
+
+
Dependencies
+
This component has a dependency on Button.
+
+
Component NavBar
+
+ NavBar
+
+
Nav Bar
+
Provides a means of navigating to different areas within an application. On small screens, the navigation items are placed inside a hamburger menu.
+
Variants
+
Default
+
+
+
+
+
States
+
+
+
+State
+Applied to
+Result
+
+
+
+
+.is-selected.ms-NavBar-itemMarks that item in the Nav Bar as selected.
+
+
+.is-disabled.ms-NavBar-itemDisables that item.
+
+
+.is-open.ms-NavBarOn small screens, a panel is used to display the Nav Bar. This class opens the panel.
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.NavBar) {
+ $('.ms-NavBar').NavBar();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
Dependencies
+
This component has dependencies on ContextualMenu and Overlay.
+
+
Component OrgChart
+
+ OrgChart
+
+
Org Chart
+
Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team.
+
Variants
+
Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from the samples above into your page.
+Replace the Persona components with your own.
+
+
Dependencies
+
This component has a dependenciy on the Persona component.
+
+
Component Overlay
+
+ Overlay
+
+
Overlay
+
Partially obscures the page to create a modal experience and focus the user's attention. Typically used with a Dialog or Panel.
+
Variants
+
Default
+
+
+
+
+
Dark
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Replace the sample HTML content (such as the content of .ms-Button-label) with your content.
+
+
Dependencies
+
This component has no dependencies.
+
+
Component Panel
+
+ Panel
+
+
Panel
+
Presents content by sliding over the rest of the application, which is covered by a partially-transparent overlay. Best used for experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.
+
Variants
+
Default
+
+
+
+ Small, right-aligned, fixed
+
+
+ Small, left-aligned, fixed
+
+
+ Small, light dismiss, fixed
+
+
+ Medium, fixed
+
+
+ Large, fixed
+
+
+ Large, fluid
+
+
+ Extra Large, fluid
+
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
+
+
+
Medium
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
+
+
+
Large
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
+
+
+
+
+
+ Open panel
+
+
+
+
+
+
+
+
+
+ Content goes here.
+
+
+
+
+
+
+
States
+
+
+
+State
+Applied to
+Result
+
+
+
+
+.is-open.ms-PanelThe panel is closed by default. Apply this class to open it.
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.Panel) {
+ $('.ms-Panel').Panel();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
+
' +
+ '
' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' +
+ '
' +
+ '
' +
+ ' ' +
+ '
' +
+ '' +
+ '
' +
+ '
' + selectedInitials + '
' +
+ selectedImage +
+ '
' +
+ '
' +
+ '
' +
+ '
' + selectedName + '
' +
+ '
' + selectedTitle + '
' +
+ '
' +
+ '
';
+ /** Tokenize selected persona if not Facepile or memberslist variants */
+ if (!$peoplePicker.hasClass('ms-PeoplePicker--Facepile') && !$peoplePicker.hasClass('ms-PeoplePicker--membersList') ) {
+ $searchField.before(personaHTML);
+ $peoplePicker.removeClass("is-active");
+ resizeSearchField($peoplePicker);
+ }
+ /** Add selected persona to a list if Facepile or memberslist variants */
+ else {
+ if (!$selected.hasClass('is-active')) {
+ $selected.addClass('is-active');
+ }
+ /** Prepend persona list item html to selected people list */
+ $selectedPeople.prepend(personaListItem);
+ /** Close the picker */
+ $peoplePicker.removeClass("is-active");
+ /** Get the total amount of selected personas and display that number */
+ var count = $peoplePicker.find('.ms-PeoplePicker-selectedPerson').length;
+ $selectedCount.html(count);
+ /** Return picker back to default state:
+ - Show only the first five results in the people list for when the picker is reopened
+ - Make searchMore inactive
+ - Clear any search field text
+ */
+ $peopleList.children().show();
+ $peopleList.children(":gt(4)").hide();
+
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $searchField.val("");
+ }
+ });
+
+ /** Remove the persona when clicking the personaRemove button. */
+ $peoplePicker.on('click', '.ms-PeoplePicker-personaRemove', function() {
+ $(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() {
+ var $searchMore = $(this);
+ var primaryLabel = $searchMore.find(".ms-PeoplePicker-searchMorePrimary");
+ var originalPrimaryLabelText = primaryLabel.html();
+ var searchFieldText = $searchField.val();
+
+ /** Change to searching state. */
+ $searchMore.addClass("is-searching");
+ primaryLabel.html("Searching for " + searchFieldText);
+
+ /** Attach Spinner */
+ if (!spinner) {
+ spinner = new fabric.Spinner($searchMore.get(0));
+ } else {
+ spinner.start();
+ }
+
+ /** Show all results in Facepile variant */
+ if($peoplePicker.hasClass('ms-PeoplePicker--Facepile')) {
+ setTimeout(function() {$peopleList.children().show();}, 1500);
+ }
+
+ /** Return the original state. */
+ setTimeout(function() {
+ $searchMore.removeClass("is-searching");
+ primaryLabel.html(originalPrimaryLabelText);
+ spinner.stop();
+ }, 1500);
+ });
+
+ /** 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');
+ }
+ });
+
+ var filterResults = function(results, currentSuggestion, currentValueExists) {
+ return results.find('.ms-Persona-primaryText').filter(function() {
+ if (currentValueExists) {
+ return $(this).text().toLowerCase() === currentSuggestion;
+ } else {
+ return $(this).text().toLowerCase() !== currentSuggestion;
+ }
+ }).parents('.ms-PeoplePicker-peopleListItem');
+ };
+
+ /** Search people picker items */
+ $peoplePicker.on('keyup', '.ms-PeoplePicker-searchField', function(evt) {
+ var suggested = [];
+ var newSuggestions = [];
+ var $pickerResult = $results.find('.ms-Persona-primaryText');
+
+ $peoplePicker.addClass('is-searching');
+
+ /** Hide members */
+ $selected.hide();
+
+ /** Show 5 results */
+ $peopleList.children(":lt(5)").show();
+
+ /** Show searchMore button */
+ $('.ms-PeoplePicker-searchMore').addClass('is-active');
+
+ /** Get array of suggested people */
+ $pickerResult.each(function() { suggested.push($(this).text()); });
+
+ /** Iterate over array to find matches and show matching items */
+ for (var i = 0; i < suggested.length; i++) {
+ var currentPersona = suggested[i].toLowerCase();
+ var currentValue = evt.target.value.toLowerCase();
+ var currentSuggestion;
+
+ if (currentPersona.indexOf(currentValue) > -1) {
+ currentSuggestion = suggested[i].toLowerCase();
+
+ newSuggestions.push(suggested[i]);
+
+ filterResults($results, currentSuggestion, true).show();
+ } else {
+ filterResults($results, currentSuggestion, false).hide();
+ }
+ }
+
+ /** Show members and hide searchmore when field is empty */
+ if ($(this).val() === "") {
+ $peoplePicker.removeClass('is-searching');
+ $selected.show();
+ $('.ms-PeoplePicker-searchMore').removeClass('is-active');
+ $selectedPeople.addClass('ms-u-slideDownIn20');
+ setTimeout(function() { $selectedPeople.removeClass('ms-u-slideDownIn20');}, 1000);
+ $peopleList.children(":gt(4)").hide();
+ }
+ });
+
+ /** Show persona card when clicking a persona in the members list */
+ $selectedPeople.on('click', '.ms-Persona', function() {
+ var selectedName = $(this).find(".ms-Persona-primaryText").html();
+ var selectedTitle = $(this).find(".ms-Persona-secondaryText").html();
+ var selectedInitials = (function() {
+ var name = selectedName.split(' ');
+ var nameInitials = '';
+
+ for (var i = 0; i < name.length; i++) {
+ nameInitials += name[i].charAt(0);
+ }
+
+ return nameInitials.substring(0,2);
+ })();
+ var selectedClasses = $(this).find('.ms-Persona-initials').attr('class');
+ var selectedImage = $(this).find('.ms-Persona-image').attr('src');
+ var $card = $('.ms-PersonaCard');
+ var $cardName = $card.find('.ms-Persona-primaryText');
+ var $cardTitle = $card.find('.ms-Persona-secondaryText');
+ var $cardInitials = $card.find('.ms-Persona-initials');
+ var $cardImage = $card.find('.ms-Persona-image');
+
+ /** Close any open persona cards */
+ $personaCard.removeClass('is-active');
+
+ /** Add data to persona card */
+ $cardName.text(selectedName);
+ $cardTitle.text(selectedTitle);
+ $cardInitials.text(selectedInitials);
+ $cardInitials.removeClass();
+ $cardInitials.addClass(selectedClasses);
+ $cardImage.attr('src', selectedImage);
+
+ /** Show persona card */
+ setTimeout(function() {
+ $personaCard.addClass('is-active');
+ setTimeout(function(){$personaCard.css({'animation-name': 'none'});}, 300);
+ }, 100);
+
+ /** Align persona card on md and above screens */
+ if ($(window).width() > 480) {
+ var itemPositionTop = $(this).offset().top;
+ var correctedPositionTop = itemPositionTop + 10;
+
+ $personaCard.css({'top': correctedPositionTop, 'left': 0});
+ } else {
+ $personaCard.css({'top': 'auto'});
+ }
+ });
+
+ /** Dismiss persona card when clicking on the document */
+ $(document).on('click', function(e) {
+ var $memberBtn = $('.ms-PeoplePicker-selectedPerson').find('.ms-Persona');
+
+ if (!$memberBtn.is(e.target) && !$personaCard.is(e.target) && $personaCard.has(e.target).length === 0) {
+ $personaCard.removeClass('is-active');
+ setTimeout(function(){$personaCard.removeAttr('style');}, 300);
+ } else {
+ $personaCard.addClass('is-active');
+ }
+ });
+ });
+ };
+
+ /** Resize the search field to match the search box */
+ 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%";
+ }
+
+ // Set the width of the search field
+ $peoplePicker.find('.ms-PeoplePicker-searchField').outerWidth(newFieldWidth);
+ }
+})(jQuery);
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png b/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png
new file mode 100644
index 000000000..147416f77
Binary files /dev/null and b/dist/samples/Components/PeoplePicker/PeoplePicker.Searching.png differ
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.css b/dist/samples/Components/PeoplePicker/PeoplePicker.css
new file mode 100644
index 000000000..a2b052d94
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/PeoplePicker.css
@@ -0,0 +1,1494 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+/**
+ * Office UI Fabric 2.5.0
+ * The front-end framework for building experiences for Office 365.
+ **/
+/*Sasssssssss*/
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+.ms-Label {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ box-sizing: border-box;
+ display: block;
+ padding: 5px 0;
+}
+
+.ms-Label.is-required:after {
+ content: ' *';
+ color: #a80000;
+}
+
+.ms-Label.is-disabled {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Label.is-disabled {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Label.is-disabled {
+ color: #600000;
+ }
+}
+
+.is-disabled .ms-Label {
+ color: #a6a6a6;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .is-disabled .ms-Label {
+ color: #00ff00;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .is-disabled .ms-Label {
+ color: #600000;
+ }
+}
+
+.ms-Persona {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ display: table;
+ line-height: 1;
+ position: relative;
+}
+
+.ms-Persona-imageArea {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-align: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ z-index: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona-imageArea {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona-imageArea {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona-placeholder {
+ color: #ffffff;
+ position: absolute;
+ right: 0;
+ left: 0;
+ font-size: 47px;
+ top: 9px;
+}
+
+.ms-Persona-initials {
+ color: #ffffff;
+ font-size: 17px;
+ font-family: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+ line-height: 48px;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightBlue {
+ background-color: #6ba5e7;
+}
+
+.ms-Persona-initials.ms-Persona-initials--blue {
+ background-color: #2d89ef;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkBlue {
+ background-color: #2b5797;
+}
+
+.ms-Persona-initials.ms-Persona-initials--teal {
+ background-color: #00aba9;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightGreen {
+ background-color: #99b433;
+}
+
+.ms-Persona-initials.ms-Persona-initials--green {
+ background-color: #00a300;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkGreen {
+ background-color: #1e7145;
+}
+
+.ms-Persona-initials.ms-Persona-initials--lightPink {
+ background-color: #e773bd;
+}
+
+.ms-Persona-initials.ms-Persona-initials--pink {
+ background-color: #ff0097;
+}
+
+.ms-Persona-initials.ms-Persona-initials--magenta {
+ background-color: #7e3878;
+}
+
+.ms-Persona-initials.ms-Persona-initials--purple {
+ background-color: #603cba;
+}
+
+.ms-Persona-initials.ms-Persona-initials--black {
+ background-color: #1d1d1d;
+}
+
+.ms-Persona-initials.ms-Persona-initials--orange {
+ background-color: #da532c;
+}
+
+.ms-Persona-initials.ms-Persona-initials--red {
+ background-color: #ee1111;
+}
+
+.ms-Persona-initials.ms-Persona-initials--darkRed {
+ background-color: #b91d47;
+}
+
+.ms-Persona-image {
+ display: table-cell;
+ margin-right: 10px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 48px;
+ height: 48px;
+}
+
+.ms-Persona-image[src=''] {
+ display: none;
+}
+
+.ms-Persona-presence {
+ background-color: #5dd255;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ border-radius: 50%;
+ top: auto;
+ left: 34px;
+ bottom: -1px;
+ border: 2px solid #ffffff;
+}
+
+.ms-Persona-details {
+ display: table-cell;
+ padding: 0 12px;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.ms-Persona-primaryText,
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ms-Persona-primaryText {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 17px;
+ margin-top: -3px;
+ line-height: 1.4;
+}
+
+.ms-Persona-secondaryText,
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ color: #666666;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ white-space: nowrap;
+ line-height: 1.3;
+}
+
+.ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona-tertiaryText,
+.ms-Persona-optionalText {
+ padding-top: 5px;
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-imageArea {
+ background-color: #a6a6a6;
+ border-radius: 0;
+}
+
+.ms-Persona.ms-Persona--square .ms-Persona-presence {
+ top: 0;
+ left: 0;
+ bottom: auto;
+ right: auto;
+ height: 48px;
+ width: 5px;
+ border-radius: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--square .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny {
+ height: 30px;
+ display: inline-block;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea {
+ overflow: visible;
+ background: transparent;
+ height: 0;
+ width: 0;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ right: auto;
+ top: 10px;
+ left: 0;
+ border: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ top: 9px;
+ border: 1px solid #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Persona.ms-Persona--tiny .ms-Persona-presence {
+ border: 1px solid #000000;
+ }
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 9px;
+}
+
+.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly {
+ padding: 0;
+ background-color: transparent;
+}
+
+.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after {
+ content: ';';
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence {
+ height: 12px;
+ width: 12px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xs .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-presence {
+ left: 19px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText {
+ display: none;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence {
+ height: 32px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--sm .ms-Persona-image {
+ width: 40px;
+ height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-placeholder {
+ font-size: 38px;
+ top: 5px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-initials {
+ font-size: 14px;
+ line-height: 40px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-presence {
+ left: 27px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-details {
+ padding-left: 8px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText {
+ font-size: 14px;
+}
+
+.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,
+.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText {
+ padding-top: 1px;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence {
+ height: 40px;
+ width: 4px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--lg .ms-Persona-image {
+ width: 72px;
+ height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-placeholder {
+ font-size: 67px;
+ top: 10px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 72px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-presence {
+ left: 49px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText {
+ padding-top: 3px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ padding-top: 5px;
+}
+
+.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText {
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence {
+ height: 72px;
+ width: 7px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-imageArea,
+.ms-Persona.ms-Persona--xl .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-placeholder {
+ font-size: 95px;
+ top: 12px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-initials {
+ font-size: 42px;
+ line-height: 100px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-presence {
+ height: 20px;
+ width: 20px;
+ left: 71px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-details {
+ padding-left: 20px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-primaryText {
+ font-size: 21px;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ margin-top: 0;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText {
+ padding-top: 2px;
+}
+
+.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--xl .ms-Persona-optionalText {
+ padding-top: 5px;
+ display: block;
+}
+
+.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence {
+ height: 100px;
+ width: 9px;
+ left: 0;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText {
+ color: #212121;
+}
+
+.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,
+.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,
+.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText {
+ color: #333333;
+}
+
+.ms-Persona.ms-Persona--selectable {
+ cursor: pointer;
+ padding: 0 10px;
+}
+
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover,
+.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus {
+ background-color: #deecf9;
+ outline: 1px solid transparent;
+}
+
+.ms-Persona.ms-Persona--available .ms-Persona-presence {
+ background-color: #5dd255;
+}
+
+.ms-Persona.ms-Persona--away .ms-Persona-presence {
+ background-color: #ffd200;
+}
+
+.ms-Persona.ms-Persona--blocked .ms-Persona-presence {
+ background-color: #dedede;
+ background-image: linear-gradient(to bottom, #dedede 0%, #dedede 48%, #c72d25 40%, #c72d25 58%, #dedede 52%, #dedede 100%);
+}
+
+.ms-Persona.ms-Persona--busy .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 1px, #d00e0d 0px, #d00e0d 2px);
+}
+
+.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence {
+ background-color: #d93b3b;
+ background: repeating-linear-gradient(-45deg, #e57a79, #e57a79 3px, #d00e0d 3px, #d00e0d 6px);
+}
+
+.ms-Persona.ms-Persona--dnd .ms-Persona-presence {
+ background-color: #c72d25;
+ background-image: linear-gradient(to bottom, #c72d25 0%, #c72d25 48%, #ffffff 48%, #ffffff 52%, #c72d25 52%, #c72d25 100%);
+}
+
+.ms-Persona.ms-Persona--offline .ms-Persona-presence {
+ background-color: #b6cfd8;
+}
+
+.ms-PersonaCard {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ -webkit-animation-name: fadeIn, slideUpIn10;
+ animation-name: fadeIn, slideUpIn10;
+ -webkit-animation-duration: 0.167s;
+ -moz-animation-duration: 0.167s;
+ -ms-animation-duration: 0.167s;
+ -o-animation-duration: 0.167s;
+ -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ bottom: 0;
+ left: 0;
+ position: fixed;
+ right: 0;
+ outline: 1px solid transparent;
+}
+
+.ms-PersonaCard-persona {
+ background-color: #f4f4f4;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea {
+ width: 80px;
+ height: 80px;
+ margin: 12px 0 12px 20px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-image {
+ width: 80px;
+ height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder {
+ font-size: 75px;
+ left: 1px;
+ top: 11px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials {
+ font-size: 28px;
+ line-height: 80px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence {
+ border-color: #f4f4f4;
+ left: 77px;
+ bottom: 12px;
+}
+
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText,
+.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText {
+ display: block;
+}
+
+.ms-PersonaCard-actions {
+ box-sizing: border-box;
+ list-style: none;
+ margin: 0;
+ padding: 0 10px;
+ border-bottom: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ height: 48px;
+}
+
+.ms-PersonaCard-action,
+.ms-PersonaCard-overflow {
+ display: inline-block;
+ cursor: pointer;
+ font-size: 17px;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 10px;
+ color: #666666;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-action:hover,
+.ms-PersonaCard-overflow:hover {
+ color: #212121;
+}
+
+.ms-PersonaCard-action:active,
+.ms-PersonaCard-overflow:active {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active,
+.is-active.ms-PersonaCard-overflow {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-action.is-active:after,
+.is-active.ms-PersonaCard-overflow:after {
+ box-sizing: border-box;
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ content: '';
+ width: 10px;
+ height: 10px;
+ border: 1px solid #c8c8c8;
+ background-color: #ffffff;
+ position: absolute;
+ border-right: 0;
+ border-bottom: 0;
+ bottom: -4px;
+ left: 15px;
+}
+
+.ms-PersonaCard-overflow {
+ font-size: 14px;
+ color: #333333;
+ float: right;
+ margin-top: -1px;
+}
+
+.ms-PersonaCard-overflow:hover {
+ color: #0078d7;
+}
+
+.ms-PersonaCard-orgChart {
+ position: absolute;
+ right: 12px;
+ top: 0;
+}
+
+.ms-PersonaCard-actionDetailBox {
+ min-height: 48px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background-color: #ffffff;
+}
+
+.ms-PersonaCard-actionDetails {
+ list-style: none;
+ width: 20%;
+ float: left;
+ min-height: 48px;
+ color: #666666;
+ padding: 9px 20px;
+ transition: max-height 0.267s cubic-bezier(0.1, 0.9, 0.2, 1) 0.2s;
+ box-sizing: border-box;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed {
+ height: 30px;
+ overflow: hidden;
+}
+
+.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after {
+ content: '\e088';
+}
+
+.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;
+}
+
+.ms-PersonaCard-detailPhone {
+ margin-left: -100%;
+}
+
+.ms-PersonaCard-detailVideo {
+ margin-left: -200%;
+}
+
+.ms-PersonaCard-detailMail {
+ margin-left: -300%;
+}
+
+.ms-PersonaCard-detailOrg {
+ margin-left: -400%;
+}
+
+.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 0.25s ease;
+}
+
+.ms-PersonaCard-detailOrg .detail-5 {
+ max-height: 300px;
+ transition: max-height 0.25s ease;
+}
+
+.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;
+}
+
+.ms-PersonaCard-detailExpander {
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+ height: 30px;
+ line-height: 30px;
+ margin-top: 1px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ width: 30px;
+}
+
+.ms-PersonaCard-detailExpander:after {
+ -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;
+ content: '\e087';
+}
+
+.ms-PersonaCard-detailLine {
+ color: #333333;
+ line-height: 30px;
+}
+
+.ms-PersonaCard-detailLabel {
+ color: #666666;
+}
+
+.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,
+.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after {
+ display: none;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea,
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image {
+ width: 100px;
+ height: 100px;
+ margin: 0;
+}
+
+.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence {
+ left: 0;
+}
+
+@media (min-width: 480px) {
+ .ms-PersonaCard {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ max-width: 360px;
+ position: relative;
+ }
+}
+
+.ms-Spinner {
+ position: relative;
+ height: 20px;
+}
+
+.ms-Spinner.ms-Spinner--large {
+ height: 28px;
+}
+
+.ms-Spinner.ms-Spinner--large .ms-Spinner-label {
+ left: 34px;
+ top: 6px;
+}
+
+.ms-Spinner-circle {
+ position: absolute;
+ border-radius: 100px;
+ background-color: #0078d7;
+ opacity: 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+ .ms-Spinner-circle {
+ background-color: #ffffff;
+ }
+}
+
+@media screen and (-ms-high-contrast: black-on-white) {
+ .ms-Spinner-circle {
+ background-color: #000000;
+ }
+}
+
+.ms-Spinner-label {
+ position: relative;
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ font-weight: normal;
+ color: #0078d7;
+ left: 28px;
+ top: 2px;
+}
+
+.ms-PeoplePicker {
+ color: #333333;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 14px;
+ font-weight: normal;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ background-color: #ffffff;
+ margin-bottom: 10px;
+}
+
+.ms-PeoplePicker-searchBox {
+ *zoom: 1;
+ border: 1px solid #c8c8c8;
+ box-sizing: border-box;
+ min-height: 40px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchBox:before,
+.ms-PeoplePicker-searchBox:after {
+ display: table;
+ content: '';
+ line-height: 0;
+}
+
+.ms-PeoplePicker-searchBox:after {
+ clear: both;
+}
+
+.ms-PeoplePicker-searchBox:hover {
+ border-color: #767676;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox {
+ border-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchField {
+ border: 0;
+ box-sizing: border-box;
+ display: inline-block;
+ float: left;
+ height: 38px;
+ outline: none;
+ padding-left: 8px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-persona {
+ display: inline-block;
+ float: left;
+ margin: 4px;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-persona .ms-Persona {
+ background-color: #f4f4f4;
+ float: left;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText {
+ color: #a80000;
+}
+
+.ms-PeoplePicker-personaRemove {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ background-color: #f4f4f4;
+ color: #666666;
+ display: inline-block;
+ float: left;
+ text-align: center;
+ height: 32px;
+ width: 32px;
+}
+
+.ms-PeoplePicker-personaRemove:hover {
+ background-color: #eaeaea;
+ color: #333333;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-personaRemove:focus {
+ background-color: #eaeaea;
+ color: #333333;
+ border: 1px solid #0078d7;
+ outline: none;
+}
+
+.ms-PeoplePicker-results {
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+ background-color: #ffffff;
+ border: 1px solid #c8c8c8;
+ display: none;
+ margin-bottom: -1px;
+ max-width: 340px;
+ padding-top: 9px;
+ position: absolute;
+ z-index: 305;
+}
+
+.ms-PeoplePicker.is-active .ms-PeoplePicker-results {
+ display: block;
+ opacity: 1;
+}
+
+.ms-PeoplePicker-resultGroups {
+ max-height: 309px;
+ overflow-y: scroll;
+}
+
+.ms-PeoplePicker-resultGroup {
+ border-top: 1px solid #eaeaea;
+}
+
+.ms-PeoplePicker-resultGroup:first-child {
+ border-top: 0;
+}
+
+.ms-PeoplePicker-resultGroupTitle {
+ color: #0078d7;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 12px;
+ padding: 17px 0 0 12px;
+ text-transform: uppercase;
+ height: 40px;
+}
+
+.ms-PeoplePicker-resultList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ margin-bottom: -1px;
+ list-style-type: none;
+}
+
+.ms-PeoplePicker-result {
+ position: relative;
+}
+
+.ms-PeoplePicker-result .ms-Persona:hover {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-result .ms-Persona:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-result .ms-Persona-details {
+ width: 100%;
+}
+
+.ms-PeoplePicker-resultBtn,
+.ms-PeoplePicker-peopleListBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ box-sizing: border-box;
+ height: 34px;
+ width: 100%;
+ background: none;
+ border: 0;
+ text-align: left;
+ margin: 0 0 10px 0;
+ padding: 0 0 0 9px;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker-peopleListBtn {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-resultBtn:hover,
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: #eaeaea;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultBtn:focus,
+.ms-PeoplePicker-peopleListBtn:focus {
+ outline: 1;
+}
+
+.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact,
+.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact {
+ height: 32px;
+}
+
+.ms-PeoplePicker-peopleListBtn {
+ margin-bottom: 0;
+ padding: 0;
+}
+
+.ms-PeoplePicker-peopleListBtn:hover {
+ background-color: transparent;
+}
+
+.ms-PeoplePicker-resultAction {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 34px;
+ transition: background-color 0.367s cubic-bezier(0.1, 0.9, 0.2, 1);
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 30px;
+ text-align: center;
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker-resultAction {
+ height: 48px;
+ }
+}
+
+.ms-PeoplePicker-resultAction .ms-Icon {
+ color: #666666;
+ font-size: 15px;
+}
+
+.ms-PeoplePicker-resultAction:hover {
+ background-color: #c8c8c8;
+ outline: 1px solid transparent;
+}
+
+.ms-PeoplePicker-resultAction:active {
+ background-color: #71afe5;
+}
+
+.ms-PeoplePicker-resultAdditionalContent {
+ display: none;
+}
+
+.ms-PeoplePicker-result.is-expanded {
+ background-color: #f4f4f4;
+ margin-bottom: 11px;
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+
+.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore {
+ border-top: 1px solid #eaeaea;
+ height: 69px;
+ position: relative;
+ overflow: hidden;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner {
+ position: absolute;
+ width: 32px;
+ height: 32px;
+ top: 20px;
+ left: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle {
+ background-color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-Spinner {
+ display: block;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ display: none;
+}
+
+.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary {
+ color: #0078d7;
+}
+
+.ms-PeoplePicker-searchMore.is-searching:hover {
+ background-color: transparent;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMoreBtn {
+ background: none;
+ border: 0;
+ cursor: pointer;
+ position: relative;
+ height: 69px;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ padding-left: 70px;
+ text-align: left;
+}
+
+.ms-PeoplePicker-searchMoreBtn:hover {
+ background-color: #eaeaea;
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-searchMoreBtn:focus,
+.ms-PeoplePicker-searchMoreBtn:active {
+ background-color: #c7e0f4;
+}
+
+.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact {
+ height: 49px;
+ padding-left: 50px;
+}
+
+.ms-PeoplePicker-searchMoreIcon {
+ height: 70px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+}
+
+.ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #333333;
+ font-size: 16px;
+ position: absolute;
+ text-align: center;
+ top: 27px;
+ width: 100%;
+}
+
+.ms-PeoplePicker-searchMorePrimary {
+ padding-top: 2px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+.ms-PeoplePicker-searchMoreSecondary {
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover {
+ background-color: inherit;
+ cursor: default;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ color: #666666;
+}
+
+.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary {
+ color: #666666;
+ font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+ font-size: 11px;
+ line-height: 20px;
+ position: relative;
+ top: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups {
+ max-height: 209px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction {
+ height: 32px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon {
+ margin-top: -8px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore {
+ height: 49px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner {
+ width: 28px;
+ height: 28px;
+ top: 12px;
+ left: 12px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon {
+ background-size: 16px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon {
+ height: 50px;
+ width: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ font-size: 17px;
+ top: 0;
+ margin-top: 0;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 45px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox {
+ height: 30px;
+ min-height: 30px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField {
+ height: 28px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,
+.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona {
+ cursor: pointer;
+}
+
+.ms-PeoplePicker-selected {
+ margin-bottom: 20px;
+ display: none;
+}
+
+.ms-PeoplePicker-selected.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results {
+ border-bottom: 0;
+ padding: 20px 0 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results {
+ position: relative;
+ border: 0;
+ box-shadow: none;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eaeaea;
+}
+
+@media (max-width: 479px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image {
+ width: 32px;
+ height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder {
+ font-size: 28px;
+ top: 6px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials {
+ font-size: 12px;
+ line-height: 32px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence {
+ left: 19px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details {
+ padding-left: 8px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText {
+ font-size: 14px;
+ padding-top: 3px;
+ }
+
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText {
+ display: none;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText {
+ display: block;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn,
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn {
+ height: 42px;
+ }
+}
+
+@media (min-width: 480px) {
+ .ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction {
+ height: 42px;
+ }
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable {
+ padding: 0;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore {
+ display: none;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn {
+ padding-left: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon {
+ width: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary {
+ font-size: 12px;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon {
+ top: 0;
+ line-height: 48px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner {
+ top: 16px;
+ left: 14px;
+ height: 20px;
+ width: 20px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard {
+ display: none;
+ position: absolute;
+ height: 200px;
+}
+
+.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active {
+ display: block;
+}
+
+.ms-PeoplePicker-selectedHeader,
+.ms-PeoplePicker-peopleListHeader {
+ color: #0078d7;
+ font-size: 12px;
+ font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+ height: 50px;
+ line-height: 50px;
+}
+
+.ms-PeoplePicker-selectedPeople,
+.ms-PeoplePicker-peopleList {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ list-style: none;
+}
+
+.ms-PeoplePicker-selectedPerson {
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.ms-PeoplePicker-peopleListItem {
+ margin-bottom: 6px;
+ position: relative;
+}
diff --git a/dist/samples/Components/PeoplePicker/PeoplePicker.min.css b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css
new file mode 100644
index 000000000..e3cd34941
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/PeoplePicker.min.css
@@ -0,0 +1,2 @@
+/* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. */
+.ms-Label{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;font-weight:400;margin:0;padding:0;box-shadow:none;box-sizing:border-box;display:block;padding:5px 0}.ms-Label.is-required:after{content:' *';color:#a80000}.ms-Label.is-disabled{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.ms-Label.is-disabled{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.ms-Label.is-disabled{color:#600000}}.is-disabled .ms-Label{color:#a6a6a6}@media screen and (-ms-high-contrast:active){.is-disabled .ms-Label{color:#0f0}}@media screen and (-ms-high-contrast:black-on-white){.is-disabled .ms-Label{color:#600000}}.ms-Persona{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;box-sizing:border-box;margin:0;padding:0;box-shadow:none;display:table;line-height:1;position:relative}.ms-Persona-imageArea{position:relative;display:block;overflow:hidden;text-align:center;width:48px;height:48px;border-radius:50%;z-index:0}@media screen and (-ms-high-contrast:active){.ms-Persona-imageArea{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona-imageArea{border:1px solid #000}}.ms-Persona-placeholder{color:#fff;position:absolute;right:0;left:0;font-size:47px;top:9px}.ms-Persona-initials{color:#fff;font-size:17px;font-family:Segoe UI Light WestEuropean,Segoe UI Light,Segoe UI,Tahoma,Arial,sans-serif;line-height:48px}.ms-Persona-initials.ms-Persona-initials--lightBlue{background-color:#6ba5e7}.ms-Persona-initials.ms-Persona-initials--blue{background-color:#2d89ef}.ms-Persona-initials.ms-Persona-initials--darkBlue{background-color:#2b5797}.ms-Persona-initials.ms-Persona-initials--teal{background-color:#00aba9}.ms-Persona-initials.ms-Persona-initials--lightGreen{background-color:#99b433}.ms-Persona-initials.ms-Persona-initials--green{background-color:#00a300}.ms-Persona-initials.ms-Persona-initials--darkGreen{background-color:#1e7145}.ms-Persona-initials.ms-Persona-initials--lightPink{background-color:#e773bd}.ms-Persona-initials.ms-Persona-initials--pink{background-color:#ff0097}.ms-Persona-initials.ms-Persona-initials--magenta{background-color:#7e3878}.ms-Persona-initials.ms-Persona-initials--purple{background-color:#603cba}.ms-Persona-initials.ms-Persona-initials--black{background-color:#1d1d1d}.ms-Persona-initials.ms-Persona-initials--orange{background-color:#da532c}.ms-Persona-initials.ms-Persona-initials--red{background-color:#e11}.ms-Persona-initials.ms-Persona-initials--darkRed{background-color:#b91d47}.ms-Persona-image{display:table-cell;margin-right:10px;position:absolute;top:0;left:0;width:48px;height:48px}.ms-Persona-image[src='']{display:none}.ms-Persona-presence{background-color:#5dd255;position:absolute;height:12px;width:12px;border-radius:50%;top:auto;left:34px;bottom:-1px;border:2px solid #fff}.ms-Persona-details{display:table-cell;padding:0 12px;vertical-align:middle;overflow:hidden}.ms-Persona-optionalText,.ms-Persona-primaryText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{display:block;white-space:nowrap;width:190px;overflow:hidden;text-overflow:ellipsis}.ms-Persona-primaryText{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:17px;margin-top:-3px;line-height:1.4}.ms-Persona-optionalText,.ms-Persona-secondaryText,.ms-Persona-tertiaryText{color:#666;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;white-space:nowrap;line-height:1.3}.ms-Persona-secondaryText{padding-top:3px}.ms-Persona-optionalText,.ms-Persona-tertiaryText{padding-top:5px;display:none}.ms-Persona.ms-Persona--square .ms-Persona-imageArea{background-color:#a6a6a6;border-radius:0}.ms-Persona.ms-Persona--square .ms-Persona-presence{top:0;left:0;bottom:auto;right:auto;height:48px;width:5px;border-radius:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--square .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny{height:30px;display:inline-block}.ms-Persona.ms-Persona--tiny .ms-Persona-imageArea{overflow:visible;background:transparent;height:0;width:0}.ms-Persona.ms-Persona--tiny .ms-Persona-presence{right:auto;top:10px;left:0;border:0}@media screen and (-ms-high-contrast:active){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{top:9px;border:1px solid #fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Persona.ms-Persona--tiny .ms-Persona-presence{border:1px solid #000}}.ms-Persona.ms-Persona--tiny .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--tiny .ms-Persona-primaryText{font-size:14px;padding-top:9px}.ms-Persona.ms-Persona--tiny .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly{padding:0;background-color:transparent}.ms-Persona.ms-Persona--tiny.ms-Persona--readonly .ms-Persona-primaryText:after{content:';'}.ms-Persona.ms-Persona--square.ms-Persona--tiny .ms-Persona-presence{height:12px;width:12px;top:10px}.ms-Persona.ms-Persona--xs .ms-Persona-image,.ms-Persona.ms-Persona--xs .ms-Persona-imageArea{width:32px;height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-placeholder{font-size:28px;top:6px}.ms-Persona.ms-Persona--xs .ms-Persona-initials{font-size:12px;line-height:32px}.ms-Persona.ms-Persona--xs .ms-Persona-presence{left:19px}.ms-Persona.ms-Persona--xs .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--xs .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-Persona.ms-Persona--xs .ms-Persona-secondaryText{display:none}.ms-Persona.ms-Persona--square.ms-Persona--xs .ms-Persona-presence{height:32px;width:4px;left:0}.ms-Persona.ms-Persona--sm .ms-Persona-image,.ms-Persona.ms-Persona--sm .ms-Persona-imageArea{width:40px;height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-placeholder{font-size:38px;top:5px}.ms-Persona.ms-Persona--sm .ms-Persona-initials{font-size:14px;line-height:40px}.ms-Persona.ms-Persona--sm .ms-Persona-presence{left:27px}.ms-Persona.ms-Persona--sm .ms-Persona-details{padding-left:8px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText{font-size:14px}.ms-Persona.ms-Persona--sm .ms-Persona-primaryText,.ms-Persona.ms-Persona--sm .ms-Persona-secondaryText{padding-top:1px}.ms-Persona.ms-Persona--square.ms-Persona--sm .ms-Persona-presence{height:40px;width:4px;left:0}.ms-Persona.ms-Persona--lg .ms-Persona-image,.ms-Persona.ms-Persona--lg .ms-Persona-imageArea{width:72px;height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-placeholder{font-size:67px;top:10px}.ms-Persona.ms-Persona--lg .ms-Persona-initials{font-size:28px;line-height:72px}.ms-Persona.ms-Persona--lg .ms-Persona-presence{left:49px}.ms-Persona.ms-Persona--lg .ms-Persona-secondaryText{padding-top:3px}.ms-Persona.ms-Persona--lg .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--lg .ms-Persona-presence{height:72px;width:7px;left:0}.ms-Persona.ms-Persona--xl .ms-Persona-image,.ms-Persona.ms-Persona--xl .ms-Persona-imageArea{width:100px;height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-placeholder{font-size:95px;top:12px}.ms-Persona.ms-Persona--xl .ms-Persona-initials{font-size:42px;line-height:100px}.ms-Persona.ms-Persona--xl .ms-Persona-presence{height:20px;width:20px;left:71px}.ms-Persona.ms-Persona--xl .ms-Persona-details{padding-left:20px}.ms-Persona.ms-Persona--xl .ms-Persona-primaryText{font-size:21px;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;margin-top:0}.ms-Persona.ms-Persona--xl .ms-Persona-secondaryText{padding-top:2px}.ms-Persona.ms-Persona--xl .ms-Persona-optionalText,.ms-Persona.ms-Persona--xl .ms-Persona-tertiaryText{padding-top:5px;display:block}.ms-Persona.ms-Persona--square.ms-Persona--xl .ms-Persona-presence{height:100px;width:9px;left:0}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-primaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-primaryText{color:#212121}.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-optionalText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-secondaryText,.ms-PeoplePicker-result .ms-Persona:hover .ms-Persona-tertiaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-optionalText,.ms-Persona.ms-Persona--darkText .ms-Persona-secondaryText,.ms-Persona.ms-Persona--darkText .ms-Persona-tertiaryText{color:#333}.ms-Persona.ms-Persona--selectable{cursor:pointer;padding:0 10px}.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):focus,.ms-Persona.ms-Persona--selectable:not(.ms-Persona--xl):hover{background-color:#deecf9;outline:1px solid transparent}.ms-Persona.ms-Persona--available .ms-Persona-presence{background-color:#5dd255}.ms-Persona.ms-Persona--away .ms-Persona-presence{background-color:#ffd200}.ms-Persona.ms-Persona--blocked .ms-Persona-presence{background-color:#dedede;background-image:linear-gradient(180deg,#dedede 0,#dedede 48%,#c72d25 0,#c72d25 58%,#dedede 0,#dedede)}.ms-Persona.ms-Persona--busy .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 1px,#d00e0d 0,#d00e0d 2px)}.ms-Persona.ms-Persona--busy.ms-Persona--square .ms-Persona-presence{background-color:#d93b3b;background:repeating-linear-gradient(-45deg,#e57a79,#e57a79 3px,#d00e0d 0,#d00e0d 6px)}.ms-Persona.ms-Persona--dnd .ms-Persona-presence{background-color:#c72d25;background-image:linear-gradient(180deg,#c72d25 0,#c72d25 48%,#fff 0,#fff 52%,#c72d25 0,#c72d25)}.ms-Persona.ms-Persona--offline .ms-Persona-presence{background-color:#b6cfd8}.ms-PersonaCard{color:#333;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-size:14px;font-weight:400;-webkit-animation-name:fadeIn,slideUpIn10;animation-name:fadeIn,slideUpIn10;-webkit-animation-duration:.167s;-moz-animation-duration:.167s;-ms-animation-duration:.167s;-o-animation-duration:.167s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both;bottom:0;left:0;position:fixed;right:0;outline:1px solid transparent}.ms-PersonaCard-persona{background-color:#f4f4f4}.ms-PersonaCard-persona .ms-Persona .ms-Persona-imageArea{width:80px;height:80px;margin:12px 0 12px 20px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-image{width:80px;height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-placeholder{font-size:75px;left:1px;top:11px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-initials{font-size:28px;line-height:80px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-presence{border-color:#f4f4f4;left:77px;bottom:12px}.ms-PersonaCard-persona .ms-Persona .ms-Persona-optionalText,.ms-PersonaCard-persona .ms-Persona .ms-Persona-tertiaryText{display:block}.ms-PersonaCard-actions{box-sizing:border-box;list-style:none;margin:0;padding:0 10px;border-bottom:1px solid #c8c8c8;background-color:#fff;height:48px}.ms-PersonaCard-action,.ms-PersonaCard-overflow{display:inline-block;cursor:pointer;font-size:17px;height:48px;line-height:48px;padding:0 10px;color:#666;position:relative;box-sizing:border-box}.ms-PersonaCard-action:hover,.ms-PersonaCard-overflow:hover{color:#212121}.is-active.ms-PersonaCard-overflow,.ms-PersonaCard-action.is-active,.ms-PersonaCard-action:active,.ms-PersonaCard-overflow:active{color:#0078d7}.is-active.ms-PersonaCard-overflow:after,.ms-PersonaCard-action.is-active:after{box-sizing:border-box;-webkit-transform:rotate(45deg);transform:rotate(45deg);content:'';width:10px;height:10px;border:1px solid #c8c8c8;background-color:#fff;position:absolute;border-right:0;border-bottom:0;bottom:-4px;left:15px}.ms-PersonaCard-overflow{font-size:14px;color:#333;float:right;margin-top:-1px}.ms-PersonaCard-overflow:hover{color:#0078d7}.ms-PersonaCard-orgChart{position:absolute;right:12px;top:0}.ms-PersonaCard-actionDetailBox{min-height:48px;overflow-y:auto;overflow-x:hidden;background-color:#fff}.ms-PersonaCard-actionDetails{list-style:none;width:20%;float:left;min-height:48px;color:#666;padding:9px 20px;transition:max-height .267s cubic-bezier(.1,.9,.2,1) .2s;box-sizing:border-box}.ms-PersonaCard-actionDetails.is-collapsed{height:30px;overflow:hidden}.ms-PersonaCard-actionDetails.is-collapsed .ms-PersonaCard-detailExpander:after{content:'\e088'}.ms-PersonaCard-detailChat,.ms-PersonaCard-detailMail,.ms-PersonaCard-detailOrg,.ms-PersonaCard-detailPhone,.ms-PersonaCard-detailVideo{overflow:hidden;width:500%;padding:0;margin:0}.ms-PersonaCard-detailOrg{overflow-y:auto}.ms-PersonaCard-detailChat{margin-left:0}.ms-PersonaCard-detailPhone{margin-left:-100%}.ms-PersonaCard-detailVideo{margin-left:-200%}.ms-PersonaCard-detailMail{margin-left:-300%}.ms-PersonaCard-detailOrg{margin-left:-400%}.ms-PersonaCard-detailChat .detail-1,.ms-PersonaCard-detailMail .detail-4,.ms-PersonaCard-detailPhone .detail-2,.ms-PersonaCard-detailVideo .detail-3{max-height:78px;transition:max-height .25s ease}.ms-PersonaCard-detailOrg .detail-5{max-height:300px;transition:max-height .25s ease}.ms-PersonaCard-detailChat .detail-2,.ms-PersonaCard-detailChat .detail-3,.ms-PersonaCard-detailChat .detail-4,.ms-PersonaCard-detailChat .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,.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{max-height:48px}.ms-PersonaCard-detailExpander{color:#333;cursor:pointer;font-size:15px;height:30px;line-height:30px;margin-top:1px;position:absolute;right:10px;text-align:center;width:30px}.ms-PersonaCard-detailExpander:after{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-family:Office365Icons;font-style:normal;font-weight:400;line-height:1;speak:none;content:'\e087'}.ms-PersonaCard-detailLine{color:#333;line-height:30px}.ms-PersonaCard-detailLabel{color:#666}.ms-PersonaCard-action.ms-PersonaCard-orgChart:after,.ms-PersonaCard-orgChart.ms-PersonaCard-overflow:after{display:none}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-image,.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-imageArea{width:100px;height:100px;margin:0}.ms-PersonaCard.ms-PersonaCard--square .ms-PersonaCard-persona .ms-Persona-presence{left:0}@media (min-width:480px){.ms-PersonaCard{box-shadow:0 0 5px 0 rgba(0,0,0,.4);max-width:360px;position:relative}}.ms-Spinner{position:relative;height:20px}.ms-Spinner.ms-Spinner--large{height:28px}.ms-Spinner.ms-Spinner--large .ms-Spinner-label{left:34px;top:6px}.ms-Spinner-circle{position:absolute;border-radius:100px;background-color:#0078d7;opacity:0}@media screen and (-ms-high-contrast:active){.ms-Spinner-circle{background-color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.ms-Spinner-circle{background-color:#000}}.ms-Spinner-label{position:relative;color:#333;font-size:12px;color:#0078d7;left:28px;top:2px}.ms-PeoplePicker,.ms-Spinner-label{font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;font-weight:400}.ms-PeoplePicker{color:#333;font-size:14px;box-sizing:border-box;margin:0;padding:0;box-shadow:none;background-color:#fff;margin-bottom:10px}.ms-PeoplePicker-searchBox{*zoom:1;border:1px solid #c8c8c8;box-sizing:border-box;min-height:40px;width:100%}.ms-PeoplePicker-searchBox:after,.ms-PeoplePicker-searchBox:before{display:table;content:'';line-height:0}.ms-PeoplePicker-searchBox:after{clear:both}.ms-PeoplePicker-searchBox:hover{border-color:#767676}.ms-PeoplePicker.is-active .ms-PeoplePicker-searchBox{border-color:#0078d7}.ms-PeoplePicker-searchField{border:0;box-sizing:border-box;display:inline-block;float:left;height:38px;outline:none;padding-left:8px;width:100%}.ms-PeoplePicker-persona{display:inline-block;float:left;margin:4px;outline:1px solid transparent}.ms-PeoplePicker-persona .ms-Persona{background-color:#f4f4f4;float:left;min-height:30px}.ms-PeoplePicker-persona.has-error .ms-Persona-primaryText{color:#a80000}.ms-PeoplePicker-personaRemove{background:none;border:0;cursor:pointer;background-color:#f4f4f4;color:#666;display:inline-block;float:left;text-align:center;height:32px;width:32px}.ms-PeoplePicker-personaRemove:hover{background-color:#eaeaea;color:#333;cursor:pointer}.ms-PeoplePicker-personaRemove:focus{background-color:#eaeaea;color:#333;border:1px solid #0078d7;outline:none}.ms-PeoplePicker-results{box-shadow:0 0 5px 0 rgba(0,0,0,.4);background-color:#fff;border:1px solid #c8c8c8;display:none;margin-bottom:-1px;max-width:340px;padding-top:9px;position:absolute;z-index:1}.ms-PeoplePicker.is-active .ms-PeoplePicker-results{display:block;opacity:1}.ms-PeoplePicker-resultGroups{max-height:309px;overflow-y:scroll}.ms-PeoplePicker-resultGroup{border-top:1px solid #eaeaea}.ms-PeoplePicker-resultGroup:first-child{border-top:0}.ms-PeoplePicker-resultGroupTitle{color:#0078d7;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:12px;padding:17px 0 0 12px;text-transform:uppercase;height:40px}.ms-PeoplePicker-resultList{box-sizing:border-box;margin:0;padding:0;box-shadow:none;margin-bottom:-1px;list-style-type:none}.ms-PeoplePicker-result{position:relative}.ms-PeoplePicker-result .ms-Persona:hover{cursor:pointer}.ms-PeoplePicker-result .ms-Persona:active{background-color:#c7e0f4}.ms-PeoplePicker-result .ms-Persona-details{width:100%}.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{cursor:pointer;position:relative;box-sizing:border-box;height:34px;width:100%;background:none;border:0;text-align:left;margin:0 0 10px;padding:0 0 0 9px}@media (min-width:480px){.ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker-resultBtn{height:48px}}.ms-PeoplePicker-peopleListBtn:hover,.ms-PeoplePicker-resultBtn:hover{background-color:#eaeaea;outline:1px solid transparent}.ms-PeoplePicker-peopleListBtn:focus,.ms-PeoplePicker-resultBtn:focus{outline:1}.ms-PeoplePicker-peopleListBtn.ms-PeoplePicker-resultBtn--compact,.ms-PeoplePicker-resultBtn.ms-PeoplePicker-resultBtn--compact{height:32px}.ms-PeoplePicker-peopleListBtn{margin-bottom:0;padding:0}.ms-PeoplePicker-peopleListBtn:hover{background-color:transparent}.ms-PeoplePicker-resultAction{background:none;border:0;cursor:pointer;display:block;height:34px;transition:background-color .367s cubic-bezier(.1,.9,.2,1);position:absolute;right:0;top:0;width:30px;text-align:center}@media (min-width:480px){.ms-PeoplePicker-resultAction{height:48px}}.ms-PeoplePicker-resultAction .ms-Icon{color:#666;font-size:15px}.ms-PeoplePicker-resultAction:hover{background-color:#c8c8c8;outline:1px solid transparent}.ms-PeoplePicker-resultAction:active{background-color:#71afe5}.ms-PeoplePicker-resultAdditionalContent{display:none}.ms-PeoplePicker-result.is-expanded{background-color:#f4f4f4;margin-bottom:11px}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAction .ms-Icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ms-PeoplePicker-result.is-expanded .ms-PeoplePicker-resultAdditionalContent{display:block}.ms-PeoplePicker-searchMore{border-top:1px solid #eaeaea;height:69px;position:relative;overflow:hidden}.ms-PeoplePicker-searchMore .ms-Spinner{position:absolute;width:32px;height:32px;top:20px;left:20px;display:none}.ms-PeoplePicker-searchMore .ms-Spinner .ms-Spinner-circle{background-color:#0078d7}.ms-PeoplePicker-searchMore.is-searching .ms-Spinner{display:block}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon .ms-Icon{display:none}.ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMorePrimary{color:#0078d7}.ms-PeoplePicker-searchMore.is-searching:hover{background-color:transparent;cursor:default}.ms-PeoplePicker-searchMoreBtn{background:none;border:0;cursor:pointer;position:relative;height:69px;width:100%;padding:0;margin:0;padding-left:70px;text-align:left}.ms-PeoplePicker-searchMoreBtn:hover{background-color:#eaeaea;cursor:pointer}.ms-PeoplePicker-searchMoreBtn:active,.ms-PeoplePicker-searchMoreBtn:focus{background-color:#c7e0f4}.ms-PeoplePicker-searchMoreBtn.ms-PeoplePicker-searchMoreBtn--compact{height:49px;padding-left:50px}.ms-PeoplePicker-searchMoreIcon{height:70px;position:absolute;top:0;left:0;width:70px}.ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#333;font-size:16px;position:absolute;text-align:center;top:27px;width:100%}.ms-PeoplePicker-searchMorePrimary{padding-top:2px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif}.ms-PeoplePicker-searchMoreSecondary{font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected:hover{background-color:inherit;cursor:default}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMoreIcon .ms-Icon{color:#666}.ms-PeoplePicker-searchMore.ms-PeoplePicker-searchMore--disconnected .ms-PeoplePicker-searchMorePrimary{color:#666;font-family:Segoe UI Semilight WestEuropean,Segoe UI Semilight,Segoe UI,Tahoma,Arial,sans-serif;font-size:11px;line-height:20px;position:relative;top:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultGroups{max-height:209px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction{height:32px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-resultAction .ms-Icon{margin-top:-8px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore{height:49px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore .ms-Spinner{width:28px;height:28px;top:12px;left:12px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMore.is-searching .ms-PeoplePicker-searchMoreIcon{background-size:16px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon{height:50px;width:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreIcon .ms-Icon{font-size:17px;top:0;margin-top:0;line-height:50px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:45px}.ms-PeoplePicker.ms-PeoplePicker--compact .ms-PeoplePicker-searchMoreSecondary{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchBox,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchBox{height:30px;min-height:30px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchField,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-PeoplePicker-searchField{height:28px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona,.ms-PeoplePicker.ms-PeoplePicker--membersList .ms-Persona{cursor:pointer}.ms-PeoplePicker-selected{margin-bottom:20px;display:none}.ms-PeoplePicker-selected.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-results{border-bottom:0;padding:20px 0 0}.ms-PeoplePicker.ms-PeoplePicker--Facepile.is-searching .ms-PeoplePicker-peopleListHeader{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results{position:relative;border:0;box-shadow:none;margin:0;max-width:100%;padding:0;padding-bottom:10px;border-bottom:1px solid #eaeaea}@media (max-width:479px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-imageArea,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-image,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-imageArea{width:32px;height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-placeholder,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-placeholder{font-size:28px;top:6px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-initials,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-initials{font-size:12px;line-height:32px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-presence,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-presence{left:19px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-details,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-details{padding-left:8px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-primaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-primaryText{font-size:14px;padding-top:3px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona-secondaryText{display:none}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-results .ms-Persona .ms-Persona-secondaryText,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-selectedPeople .ms-Persona .ms-Persona-secondaryText{display:block}}@media (min-width:480px){.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-peopleListBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultAction,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-resultBtn{height:42px}}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Persona.ms-Persona--selectable{padding:0}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore{display:none}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore.is-active{display:block}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMore,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn,.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreBtn{padding-left:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon{width:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMorePrimary{font-size:12px;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PeoplePicker-searchMoreIcon .ms-Icon{top:0;line-height:48px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-Spinner{top:16px;left:14px;height:20px;width:20px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard{display:none;position:absolute;height:200px}.ms-PeoplePicker.ms-PeoplePicker--Facepile .ms-PersonaCard.is-active{display:block}.ms-PeoplePicker-peopleListHeader,.ms-PeoplePicker-selectedHeader{color:#0078d7;font-size:12px;font-family:Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;height:50px;line-height:50px}.ms-PeoplePicker-peopleList,.ms-PeoplePicker-selectedPeople{box-sizing:border-box;margin:0;padding:0;box-shadow:none;list-style:none}.ms-PeoplePicker-selectedPerson{margin-bottom:8px;position:relative}.ms-PeoplePicker-peopleListItem{margin-bottom:6px;position:relative}
\ No newline at end of file
diff --git a/dist/samples/Components/PeoplePicker/index.html b/dist/samples/Components/PeoplePicker/index.html
new file mode 100644
index 000000000..7d2c62d32
--- /dev/null
+++ b/dist/samples/Components/PeoplePicker/index.html
@@ -0,0 +1,1185 @@
+
+
+
+
+
+ Component PeoplePicker
+
+ PeoplePicker
+
+
People Picker
+
A form input that allows for the choice of one or more people.
+
Variants
+
Default
+
Uses the standard sized Persona component.
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+ Showing top 5 results
+ Search Contacts & Directory
+
+
+
+
+
+
+
Compact
+
Use the extra small Persona component to fit more results.
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
Showing top 5 results
+
Search Contacts & Directory
+
+
+
+
+
+
+
Members List
+
Has a smaller search field.
+
+
+
People picker
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
GS
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
Facepile
+
Presents the selected people in a list below the search field, rather than inline.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Marketing
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Public Relations
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
Search Contacts & Directory
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
More options
+
Disconnected
+
If the network is unavailable, you can present an error message in the search more area.
+
+
+
+
+
+
+
+
Top results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
Other results
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
Grant Steel (bask)
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
We are having trouble connecting to the server.
+
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.PeoplePicker) {
+ $('.ms-PeoplePicker').PeoplePicker();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
Dependencies
+
This component uses Persona and PersonaCard to display people and Label for the Members List variant. It also uses a Spinner when searching for results.
+
+
Component Persona
+
+ Persona
+
+
Persona
+
Represents a person, complete with a profile image and additional details. Where a profile image is not available, the user's initials can be shown instead.
+
Variants
+
Profile image shape
+
Circle (default)
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
Square
+
Apply the .ms-Persona--square class to any persona to change it to a square.
+
+
+
+
+
+
+
AL
+
+
+
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
In a meeting
+
Available at 4:00pm
+
+
+
+
+
Initials
+
Where no profile image is available, you can use the person's initials.
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Presence indicators
+
Available
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Away
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Blocked
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Busy
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Do not disturb
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Offline
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Accountant
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Replace the sample HTML content (such as the name within .ms-Persona-primaryText) with your content.
+
+
Dependencies
+
This component has no dependencies.
+
+
Component PersonaCard
+
+ PersonaCard
+
+
Persona Card
+
The visualization of details of an individual including Skype contact details, email, location information, and location within the hierarchy of an organization. Within Office 365, PersonaCards often appear when a user hovers, taps, or clicks on a Persona.
+
Variants
+
Default
+
+
+
+
+
+
AL
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
RM
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
DF
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
GS
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
HW
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
ML
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
MG
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
JF
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
+
Square
+
+
+
+
+
+
+
+
+
Alton Lafferty
+
Interior Designer, Contoso
+
Office: 7/1234
+
Available - Video capable
+
+
+
+
+ View profile
+
+
+
+
+
+
+
+ Personal: 555.206.2443
+ Work: 555.929.8240
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Russel Miller
+
Sales
+
+
+
+
+
+
+
+
+
+
+
+
Douglas Fielder
+
Public Relations
+
+
+
+
+
+
+
Manager
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Staff
+
+
+
+
+
+
+
+
+
+
Harvey Wallin
+
Public Relations
+
+
+
+
+
+
+
+
+
+
+
+
Marcus Lauer
+
Technical Support
+
+
+
+
+
+
+
+
+
+
+
+
Marcel Groce
+
Delivery
+
+
+
+
+
+
+
+
+
+
+
+
Jessica Fischer
+
Marketing
+
+
+
+
+
+
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Persona Card components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.PersonaCard) {
+ $('.ms-PersonaCard').PersonaCard();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
Dependencies
+
This component uses a Persona component to present the person, an OrgChart to present the persona's position within the organization, and a Link for navigation.
+
+
Component Pivot
+
+ Pivot
+
+
Pivot
+
A layout component that allows a user to switch between different sets of content or filters on the content currently visible. This is in contrast to a purely navigational UI element such as NavBar or a commanding element such as CommandBar. An example would be Read vs. Unread items in the Outlook Web App.
+
Variants
+
Default
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
Large
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
Tabs
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
Large tabs
+
+
+ My files
+ Recent
+ Shared with me
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Pivot components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.Pivot) {
+ $('.ms-Pivot').Pivot();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+Replace the sample HTML content with your content.
+
+
Dependencies
+
This component has no dependency on other components.
+
+
Component ProgressIndicator
+
+ ProgressIndicator
+
+
Progress Indicator
+
Displays the progress of an operation when the percentage complete can be determined. Unable to determine how much of the operation is complete? Use a Spinner instead.
+
Variants
+
Default
+
+
+
Example.jpg
+
+
My Progress Description
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all ProgressIndicators on the page: <script>
+ $(document).ready(function() {
+ if (typeof fabric !== "undefined") {
+ if ('ProgressIndicator' in fabric) {
+ var elements = document.querySelectorAll('.ms-ProgressIndicator');
+ var i = elements.length;
+ var component;
+ while(i--) {
+ component = new fabric['ProgressIndicator'](elements[i]);
+ }
+ }
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+
+
Dependencies
+
This component has no dependency on other components.
+
+
Component SearchBox
+
+ SearchBox
+
+
Search Box
+
A special form field that allows for the input of search text.
+
Variants
+
Default
+
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all SearchBox components on the page: <script>
+ $(document).ready(function() {
+ if ($.fn.SearchBox) {
+ $('.ms-SearchBox').SearchBox();
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+
+
Dependencies
+
This component has a dependency on the Label component.
+
+
Component Spinner
+
+ Spinner
+
+
Spinner
+
Displays the progress of an operation when the percentage complete can not be determined. Do you know how much of the operation is complete? Use a ProgressIndicator instead.
+
Variants
+
Default
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ <script src="jquery-2.2.1.min.js"></script>
+ <script src="jquery.fabric.min.js"></script>
+ </head>
+
+Copy the HTML from the sample above into your page.
+Add the following <script> tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Spinners on the page: <script>
+ $(document).ready(function() {
+ if (typeof fabric !== "undefined") {
+ if ('Spinner' in fabric) {
+ var elements = document.querySelectorAll('.ms-Spinner');
+ var i = elements.length;
+ var component;
+ while(i--) {
+ component = new fabric['Spinner'](elements[i]);
+ }
+ }
+ }
+ });
+ </script>
+
+Verify that the component is working the same as in the sample above.
+
+
Dependencies
+
This component has no dependency on other components.
+
+
Component Table
+
+ Table
+
+
Table
+
Presents tabular data with multiple rows and columns. The table's width is flexible, but it does not have any advanced responsive behaviors.
+
Variants
+
Default
+
+
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+ Cupcake ipsum dolor sit amet cake gummies bear claw cake. Chocolate chocolate bar donut.
+ Candy canes bear claw marzipan icing wafer.
+ Chocolate chocolate bar donut.
+ Candy canes cupcake macaroon toffee.
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+ File name
+ Location
+ Modified
+ Type
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from the sample above into your page.
+Replace the content with your own data. You can add more rows or columns.
+
+
Dependencies
+
This component has no dependency on other components.
+
+
Component TextField
+
+ TextField
+
+
Text Field
+
Allows for the input of text. Can be a single line or multiple lines. Typically used to accept user input within a form.
+
Variants
+
Default
+
+
+ Name
+ This should be your first and last name.
+
+
+
+
Multiline
+
+
+ Enter street
+
+
+
+
+
Placeholder text
+
+
+ Given name
+
+
+
+
Underlined
+
+
+ Name:
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Update the .ms-Label to contain your label text.
+
+
Dependencies
+
This component has a dependency on the Label component.
+
+
Component Toggle
+
+ Toggle
+
+
Toggle
+
Allows for turning on or off a setting. This is best suited for simple, singular configuration (e.g. application level settings) whereas the ChoiceField is better suited when there is a longer list of individual choices or in a form (e.g. signing up for different newsletters during registration for an event).
+
Variants
+
Label above (default)
+
+
+ Let apps use my location
+
+ Off
+ On
+
+
+
+
+
Label on left
+
+
+ Let apps use my location
+
+ Off
+ On
+
+
+
+
+
Using this component
+
+Confirm that you have references to Fabric's CSS on your page: <head>
+ <link rel="stylesheet" href="fabric.min.css">
+ <link rel="stylesheet" href="fabric.components.min.css">
+ </head>
+
+Copy the HTML from one of the samples above into your page.
+Update the .ms-Label to contain your label text.
+
+
Dependencies
+
This component has a dependency on the Label component.
+
+
Example Form
+
+
+
+
+
+
+
+
+
+
+
+
Create an account to start using Nod.
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/dist/samples/Form/sass/Form.scss b/dist/samples/Form/sass/Form.scss
new file mode 100644
index 000000000..cac00f760
--- /dev/null
+++ b/dist/samples/Form/sass/Form.scss
@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+// Import Fabric and Fabric Components to use its variables and mixins
+@import '../../../sass/Fabric.Common.scss';
+@import '../../../sass/Fabric.Components.scss';
+
+html,
+body {
+ @include ms-font-m;
+ font-size: inherit;
+ padding: 0;
+ margin: 0;
+}
+
+a {
+ @include ms-Link;
+ font-size: inherit;
+ text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+}
+
+h1 {
+ @include ms-font-xxl;
+ color: inherit;
+ letter-spacing: -1px;
+}
+
+h2 {
+ @include ms-font-xl;
+ color: inherit;
+}
+
+h3 {
+ @include ms-font-l;
+ color: inherit;
+}
+
+h4 {
+ @include ms-font-m;
+ color: inherit;
+}
+
+h5 {
+ @include ms-font-s;
+ color: inherit;
+}
+
+h6 {
+ @include ms-font-xs;
+ color: inherit;
+}
+
+.u-contentCenter {
+ max-width: 400px;
+ padding: 0 20px 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+.Container {
+ margin: 0;
+ padding: 0;
+}
+
+.Header {
+ border-bottom-style: solid;
+ border-bottom-width: 20px;
+}
+
+.Header-text {
+ padding: 40px 0 35px;
+}
+
+.Content {
+ padding: 20px 0;
+}
+
+.Intro {
+ margin-bottom: 16px;
+}
+
+.SubmitButton {
+ margin-top: 20px;
+}
diff --git a/dist/samples/Icons/index.html b/dist/samples/Icons/index.html
new file mode 100644
index 000000000..7c2b395c7
--- /dev/null
+++ b/dist/samples/Icons/index.html
@@ -0,0 +1,438 @@
+
+
+
+
+
+ Fabric Icons
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Popular
+ All Videos
+ My Videos
+
+
+
+
+
+
+
+
+
+
Video Portal Example App
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+ Video Portal Example App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Uploaded on
+ July 27, 2014
+ |
+ 345 views
+
+
+
+ Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
+
+
+
+
+
+
You might also like
+
+
+
+
+
+
+
+
+
+
Fabric Samples Index
+ Components
+
+
+ Samples
+
+
+
+
\ No newline at end of file
diff --git a/dist/sass/Fabric.Animations.Output.scss b/dist/sass/Fabric.Animations.Output.scss
new file mode 100644
index 000000000..38227eb79
--- /dev/null
+++ b/dist/sass/Fabric.Animations.Output.scss
@@ -0,0 +1,419 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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.
+
+@import "Fabric.Animations";
+
+// slideRightIn10
+.ms-u-slideRightIn10 {
+ @include ms-u-slideRightIn10;
+}
+@-webkit-keyframes slideRightIn10 {
+ from { -webkit-transform:translate3d(-10px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn10 {
+ from { transform:translate3d(-10px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn20
+.ms-u-slideRightIn20 {
+ @include ms-u-slideRightIn20;
+}
+@-webkit-keyframes slideRightIn20 {
+ from { -webkit-transform:translate3d(-20px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn20 {
+ from { transform:translate3d(-20px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn40
+.ms-u-slideRightIn40 {
+ @include ms-u-slideRightIn40;
+}
+@-webkit-keyframes slideRightIn40 {
+ from { -webkit-transform:translate3d(-40px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn40 {
+ from { transform:translate3d(-40px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn10
+.ms-u-slideLeftIn10 {
+ @include ms-u-slideLeftIn10;
+}
+@-webkit-keyframes slideLeftIn10 {
+ from { -webkit-transform:translate3d(10px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn10 {
+ from { transform:translate3d(10px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn20
+.ms-u-slideLeftIn20 {
+ @include ms-u-slideLeftIn20;
+}
+@-webkit-keyframes slideLeftIn20 {
+ from { -webkit-transform:translate3d(20px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn20 {
+ from { transform:translate3d(20px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn40
+.ms-u-slideLeftIn40 {
+ @include ms-u-slideLeftIn40;
+}
+@-webkit-keyframes slideLeftIn40 {
+ from { -webkit-transform:translate3d(40px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideLeftIn40 {
+ from { transform:translate3d(40px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightIn400
+.ms-u-slideRightIn400 {
+ @include ms-u-slideRightIn400;
+}
+@-webkit-keyframes slideRightIn400 {
+ from { -webkit-transform:translate3d(-400px, 0px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideRightIn400 {
+ from { transform:translate3d(-400px, 0px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideLeftIn400
+.ms-u-slideLeftIn400 {
+ @include ms-u-slideLeftIn400;
+}
+@-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 {
+ @include ms-u-slideUpIn20;
+}
+@-webkit-keyframes slideUpIn20 {
+ from { -webkit-transform:translate3d(0px, 20px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideUpIn20 {
+ from { transform:translate3d(0px, 20px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideUpIn10
+.ms-u-slideUpIn10 {
+ @include ms-u-slideUpIn10;
+}
+@-webkit-keyframes slideUpIn10 {
+ from { -webkit-transform:translate3d(0px, 10px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideUpIn10 {
+ from { transform:translate3d(0px, 10px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideDownIn20
+.ms-u-slideDownIn20 {
+ @include ms-u-slideDownIn20;
+}
+@-webkit-keyframes slideDownIn20 {
+ from { -webkit-transform:translate3d(0px, -20px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideDownIn20 {
+ from { transform:translate3d(0px, -20px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideDownIn10
+.ms-u-slideDownIn10 {
+ @include ms-u-slideDownIn10;
+}
+@-webkit-keyframes slideDownIn10 {
+ from { -webkit-transform:translate3d(0px, -10px, 0px); }
+ to { -webkit-transform:translate3d(0px, 0px, 0px); }
+}
+@keyframes slideDownIn10 {
+ from { transform:translate3d(0px, -10px, 0px); }
+ to { transform:translate3d(0px, 0px, 0px); }
+}
+
+// slideRightOut40
+.ms-u-slideRightOut40 {
+ @include ms-u-slideRightOut40;
+}
+@-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 {
+ @include ms-u-slideLeftOut40;
+}
+@-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 {
+ @include ms-u-slideRightOut400;
+}
+@-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 {
+ @include ms-u-slideLeftOut400;
+}
+@-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 {
+ @include ms-u-slideUpOut20;
+}
+@-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 {
+ @include ms-u-slideUpOut10;
+}
+@-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 {
+ @include ms-u-slideDownOut20;
+}
+@-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 {
+ @include ms-u-slideDownOut10;
+}
+@-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 {
+ @include ms-u-scaleUpIn100;
+}
+@-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 {
+ @include ms-u-scaleDownIn100;
+}
+@-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 {
+ @include ms-u-scaleUpOut103;
+}
+@-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 {
+ @include ms-u-scaleDownOut98;
+}
+@-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-fadeIn400 {
+ @include ms-u-fadeIn400;
+}
+.ms-u-fadeIn100 {
+ @include ms-u-fadeIn100;
+}
+.ms-u-fadeIn200 {
+ @include ms-u-fadeIn200;
+}
+.ms-u-fadeIn500 {
+ @include ms-u-fadeIn500;
+}
+@-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-fadeOut400 {
+ @include ms-u-fadeOut400;
+}
+.ms-u-fadeOut100 {
+ @include ms-u-fadeOut100;
+}
+.ms-u-fadeOut200 {
+ @include ms-u-fadeOut200;
+}
+.ms-u-fadeOut500 {
+ @include ms-u-fadeOut500;
+}
+@-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 {
+ @include ms-u-rotate90deg;
+}
+@-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 {
+ @include ms-u-rotateN90deg;
+}
+@-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 {
+ @include ms-u-expandCollapse400;
+}
+
+// expandCollapse200
+.ms-u-expandCollapse200 {
+ @include ms-u-expandCollapse200;
+}
+
+// expandCollapse100
+.ms-u-expandCollapse100 {
+ @include ms-u-expandCollapse100;
+}
+
+// delay100
+.ms-u-delay100 {
+ @include ms-u-delay100;
+}
+
+// delay200
+.ms-u-delay200 {
+ @include ms-u-delay200;
+}
diff --git a/dist/sass/Fabric.Animations.RTL.Output.scss b/dist/sass/Fabric.Animations.RTL.Output.scss
new file mode 100644
index 000000000..8ad465a5b
--- /dev/null
+++ b/dist/sass/Fabric.Animations.RTL.Output.scss
@@ -0,0 +1,80 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabric Animations
+
+
+@import "Fabric.Animations.Output";
+@import "Fabric.Animations.RTL";
+
+// slideRightIn10
+.ms-u-slideRightIn10 {
+ @include ms-u-slideRightIn10;
+}
+
+// slideRightIn20
+.ms-u-slideRightIn20 {
+ @include ms-u-slideRightIn20;
+}
+
+// slideRightIn40
+.ms-u-slideRightIn40 {
+ @include ms-u-slideRightIn40;
+}
+
+// slideLeftIn10
+.ms-u-slideLeftIn10 {
+ @include ms-u-slideLeftIn10;
+}
+
+// slideLeftIn20
+.ms-u-slideLeftIn20 {
+ @include ms-u-slideLeftIn20;
+}
+
+// slideLeftIn40
+.ms-u-slideLeftIn40 {
+ @include ms-u-slideLeftIn40;
+}
+
+// slideRightIn400
+.ms-u-slideRightIn400 {
+ @include ms-u-slideRightIn400;
+}
+
+// slideLeftIn400
+.ms-u-slideLeftIn400 {
+ @include ms-u-slideLeftIn400;
+}
+
+// slideRightOut40
+.ms-u-slideRightOut40 {
+ @include ms-u-slideRightOut40;
+}
+
+// slideLeftOut40
+.ms-u-slideLeftOut40 {
+ @include ms-u-slideLeftOut40;
+}
+
+// slideRightOut400
+.ms-u-slideRightOut400 {
+ @include ms-u-slideRightOut400;
+}
+
+// slideLeftOut400
+.ms-u-slideLeftOut400 {
+ @include ms-u-slideLeftOut400;
+}
+
+// rotate90deg
+.ms-u-rotate90deg {
+ @include ms-u-rotate90deg;
+}
+
+// rotateN90deg
+.ms-u-rotateN90deg {
+ @include ms-u-rotateN90deg;
+}
diff --git a/dist/sass/Fabric.Color.Mixins.Output.scss b/dist/sass/Fabric.Color.Mixins.Output.scss
new file mode 100644
index 000000000..bfc71044e
--- /dev/null
+++ b/dist/sass/Fabric.Color.Mixins.Output.scss
@@ -0,0 +1,458 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Color Mixins
+
+@import "Fabric.Color.Mixins";
+
+//== Background colors
+//
+// Theme colors
+.ms-bgColor-themeDark,
+.ms-bgColor-themeDark--hover:hover {
+ @include ms-bgColor-themeDark;
+}
+
+.ms-bgColor-themeDarkAlt,
+.ms-bgColor-themeDarkAlt--hover:hover {
+ @include ms-bgColor-themeDarkAlt;
+}
+
+.ms-bgColor-themeDarker,
+.ms-bgColor-themeDarker--hover:hover {
+ @include ms-bgColor-themeDarker;
+}
+
+.ms-bgColor-themePrimary,
+.ms-bgColor-themePrimary--hover:hover {
+ @include ms-bgColor-themePrimary;
+}
+
+.ms-bgColor-themeSecondary,
+.ms-bgColor-themeSecondary--hover:hover {
+ @include ms-bgColor-themeSecondary;
+}
+
+.ms-bgColor-themeTertiary,
+.ms-bgColor-themeTertiary--hover:hover {
+ @include ms-bgColor-themeTertiary;
+}
+
+.ms-bgColor-themeLight,
+.ms-bgColor-themeLight--hover:hover {
+ @include ms-bgColor-themeLight;
+}
+
+.ms-bgColor-themeLighter,
+.ms-bgColor-themeLighter--hover:hover {
+ @include ms-bgColor-themeLighter;
+}
+
+.ms-bgColor-themeLighterAlt,
+.ms-bgColor-themeLighterAlt--hover:hover {
+ @include ms-bgColor-themeLighterAlt;
+}
+
+// Neutral colors
+.ms-bgColor-black,
+.ms-bgColor-black--hover:hover {
+ @include ms-bgColor-black;
+}
+
+.ms-bgColor-neutralDark,
+.ms-bgColor-neutralDark--hover:hover {
+ @include ms-bgColor-neutralDark;
+}
+
+.ms-bgColor-neutralPrimary,
+.ms-bgColor-neutralPrimary--hover:hover {
+ @include ms-bgColor-neutralPrimary;
+}
+
+.ms-bgColor-neutralPrimaryAlt,
+.ms-bgColor-neutralPrimaryAlt--hover:hover {
+ @include ms-bgColor-neutralPrimaryAlt;
+}
+
+.ms-bgColor-neutralSecondary,
+.ms-bgColor-neutralSecondary--hover:hover {
+ @include ms-bgColor-neutralSecondary;
+}
+
+.ms-bgColor-neutralSecondaryAlt,
+.ms-bgColor-neutralSecondaryAlt--hover:hover {
+ @include ms-bgColor-neutralSecondaryAlt;
+}
+
+.ms-bgColor-neutralTertiary,
+.ms-bgColor-neutralTertiary--hover:hover {
+ @include ms-bgColor-neutralTertiary;
+}
+
+.ms-bgColor-neutralTertiaryAlt,
+.ms-bgColor-neutralTertiaryAlt--hover:hover {
+ @include ms-bgColor-neutralTertiaryAlt;
+}
+
+.ms-bgColor-neutralLight,
+.ms-bgColor-neutralLight--hover:hover {
+ @include ms-bgColor-neutralLight;
+}
+
+.ms-bgColor-neutralLighter,
+.ms-bgColor-neutralLighter--hover:hover {
+ @include ms-bgColor-neutralLighter;
+}
+
+.ms-bgColor-neutralLighterAlt,
+.ms-bgColor-neutralLighterAlt--hover:hover {
+ @include ms-bgColor-neutralLighterAlt;
+}
+
+.ms-bgColor-white,
+.ms-bgColor-white--hover:hover {
+ @include ms-bgColor-white;
+}
+
+
+// Brand and accent colors
+.ms-bgColor-yellow {
+ @include ms-bgColor-yellow;
+}
+
+.ms-bgColor-yellowLight {
+ @include ms-bgColor-yellowLight;
+}
+
+.ms-bgColor-orange {
+ @include ms-bgColor-orange;
+}
+
+.ms-bgColor-orangeLight {
+ @include ms-bgColor-orangeLight;
+}
+
+.ms-bgColor-orangeLighter {
+ @include ms-bgColor-orangeLighter;
+}
+
+.ms-bgColor-redDark {
+ @include ms-bgColor-redDark;
+}
+
+.ms-bgColor-red {
+ @include ms-bgColor-red;
+}
+
+.ms-bgColor-magentaDark {
+ @include ms-bgColor-magentaDark;
+}
+
+.ms-bgColor-magenta {
+ @include ms-bgColor-magenta;
+}
+
+.ms-bgColor-magentaLight {
+ @include ms-bgColor-magentaLight;
+}
+
+.ms-bgColor-purpleDark {
+ @include ms-bgColor-purpleDark;
+}
+
+.ms-bgColor-purple {
+ @include ms-bgColor-purple;
+}
+
+.ms-bgColor-purpleLight {
+ @include ms-bgColor-purpleLight;
+}
+
+.ms-bgColor-blueDark {
+ @include ms-bgColor-blueDark;
+}
+
+.ms-bgColor-blueMid {
+ @include ms-bgColor-blueMid;
+}
+
+.ms-bgColor-blue {
+ @include ms-bgColor-blue;
+}
+
+.ms-bgColor-blueLight {
+ @include ms-bgColor-blueLight;
+}
+
+.ms-bgColor-tealDark {
+ @include ms-bgColor-tealDark;
+}
+
+.ms-bgColor-teal {
+ @include ms-bgColor-teal;
+}
+
+.ms-bgColor-tealLight {
+ @include ms-bgColor-tealLight;
+}
+
+.ms-bgColor-greenDark {
+ @include ms-bgColor-greenDark;
+}
+
+.ms-bgColor-green {
+ @include ms-bgColor-green;
+}
+
+.ms-bgColor-greenLight {
+ @include ms-bgColor-greenLight;
+}
+
+// Message colors
+.ms-bgColor-info {
+ @include ms-bgColor-info;
+}
+
+.ms-bgColor-success {
+ @include ms-bgColor-success;
+}
+
+.ms-bgColor-alert {
+ @include ms-bgColor-alert;
+}
+
+.ms-bgColor-error {
+ @include ms-bgColor-error;
+}
+
+
+//== Border colors
+//
+
+// Theme colors
+.ms-borderColor-themeDark,
+.ms-borderColor-themeDark--hover:hover {
+ @include ms-borderColor-themeDark;
+}
+
+.ms-borderColor-themeDarkAlt,
+.ms-borderColor-themeDarkAlt--hover:hover {
+ @include ms-borderColor-themeDarkAlt;
+}
+
+.ms-borderColor-themeDarker,
+.ms-borderColor-themeDarker--hover:hover {
+ @include ms-borderColor-themeDarker;
+}
+
+.ms-borderColor-themePrimary,
+.ms-borderColor-themePrimary--hover:hover {
+ @include ms-borderColor-themePrimary;
+}
+
+.ms-borderColor-themeSecondary,
+.ms-borderColor-themeSecondary--hover:hover {
+ @include ms-borderColor-themeSecondary;
+}
+
+.ms-borderColor-themeTertiary,
+.ms-borderColor-themeTertiary--hover:hover {
+ @include ms-borderColor-themeTertiary;
+}
+
+.ms-borderColor-themeLight,
+.ms-borderColor-themeLight--hover:hover {
+ @include ms-borderColor-themeLight;
+}
+
+.ms-borderColor-themeLighter,
+.ms-borderColor-themeLighter--hover:hover {
+ @include ms-borderColor-themeLighter;
+}
+
+.ms-borderColor-themeLighterAlt,
+.ms-borderColor-themeLighterAlt--hover:hover {
+ @include ms-borderColor-themeLighterAlt;
+}
+
+
+// Neutral colors
+.ms-borderColor-black,
+.ms-borderColor-black--hover:hover {
+ @include ms-borderColor-black;
+}
+
+.ms-borderColor-neutralDark,
+.ms-borderColor-neutralDark--hover:hover {
+ @include ms-borderColor-neutralDark;
+}
+
+.ms-borderColor-neutralPrimary,
+.ms-borderColor-neutralPrimary--hover:hover {
+ @include ms-borderColor-neutralPrimary;
+}
+
+.ms-borderColor-neutralPrimaryAlt,
+.ms-borderColor-neutralPrimaryAlt--hover:hover {
+ @include ms-borderColor-neutralPrimaryAlt;
+}
+
+.ms-borderColor-neutralSecondary,
+.ms-borderColor-neutralSecondary--hover:hover {
+ @include ms-borderColor-neutralSecondary;
+}
+
+.ms-borderColor-neutralSecondaryAlt,
+.ms-borderColor-neutralSecondaryAlt--hover:hover {
+ @include ms-borderColor-neutralSecondaryAlt;
+}
+
+.ms-borderColor-neutralTertiary,
+.ms-borderColor-neutralTertiary--hover:hover {
+ @include ms-borderColor-neutralTertiary;
+}
+
+.ms-borderColor-neutralTertiaryAlt,
+.ms-borderColor-neutralTertiaryAlt--hover:hover {
+ @include ms-borderColor-neutralTertiaryAlt;
+}
+
+.ms-borderColor-neutralLight,
+.ms-borderColor-neutralLight--hover:hover {
+ @include ms-borderColor-neutralLight;
+}
+
+.ms-borderColor-neutralLighter,
+.ms-borderColor-neutralLighter--hover:hover {
+ @include ms-borderColor-neutralLighter;
+}
+
+.ms-borderColor-neutralLighterAlt,
+.ms-borderColor-neutralLighterAlt--hover:hover {
+ @include ms-borderColor-neutralLighterAlt;
+}
+
+.ms-borderColor-white,
+.ms-borderColor-white--hover:hover {
+ @include ms-borderColor-white;
+}
+
+// Brand and accent colors
+.ms-borderColor-yellow {
+ @include ms-borderColor-yellow;
+}
+
+.ms-borderColor-yellowLight {
+ @include ms-borderColor-yellowLight;
+}
+
+.ms-borderColor-orange {
+ @include ms-borderColor-orange;
+}
+
+.ms-borderColor-orangeLight {
+ @include ms-borderColor-orangeLight;
+}
+
+.ms-borderColor-orangeLighter {
+ @include ms-borderColor-orangeLighter;
+}
+
+.ms-borderColor-redDark {
+ @include ms-borderColor-redDark;
+}
+
+.ms-borderColor-red {
+ @include ms-borderColor-red;
+}
+
+.ms-borderColor-magentaDark {
+ @include ms-borderColor-magentaDark;
+}
+
+.ms-borderColor-magenta {
+ @include ms-borderColor-magenta;
+}
+
+.ms-borderColor-magentaLight {
+ @include ms-borderColor-magentaLight;
+}
+
+.ms-borderColor-purpleDark {
+ @include ms-borderColor-purpleDark;
+}
+
+.ms-borderColor-purple {
+ @include ms-borderColor-purple;
+}
+
+.ms-borderColor-purpleLight {
+ @include ms-borderColor-purpleLight;
+}
+
+.ms-borderColor-blueDark {
+ @include ms-borderColor-blueDark;
+}
+
+.ms-borderColor-blueMid {
+ @include ms-borderColor-blueMid;
+}
+
+.ms-borderColor-blue {
+ @include ms-borderColor-blue;
+}
+
+.ms-borderColor-blueLight {
+ @include ms-borderColor-blueLight;
+}
+
+.ms-borderColor-tealDark {
+ @include ms-borderColor-tealDark;
+}
+
+.ms-borderColor-teal {
+ @include ms-borderColor-teal;
+}
+
+.ms-borderColor-tealLight {
+ @include ms-borderColor-tealLight;
+}
+
+.ms-borderColor-greenDark {
+ @include ms-borderColor-greenDark;
+}
+
+.ms-borderColor-green {
+ @include ms-borderColor-green;
+}
+
+.ms-borderColor-greenLight {
+ @include ms-borderColor-greenLight;
+}
+
+
+// Message colors
+.ms-borderColor-info {
+ @include ms-borderColor-info;
+}
+
+.ms-borderColor-success {
+ @include ms-borderColor-success;
+}
+
+.ms-borderColor-alert {
+ @include ms-borderColor-alert;
+}
+
+.ms-borderColor-error {
+ @include ms-borderColor-error;
+}
+
+
+// Individual borders, by request
+.ms-borderColorTop-themePrimary,
+.ms-borderColorTop-themePrimary--hover:hover {
+ @include ms-borderColorTop-themePrimary;
+}
diff --git a/dist/sass/Fabric.Components.scss b/dist/sass/Fabric.Components.scss
new file mode 100644
index 000000000..d26c653ee
--- /dev/null
+++ b/dist/sass/Fabric.Components.scss
@@ -0,0 +1,31 @@
+@import 'Fabric.Common';
+
+@import '../components/Breadcrumb/Breadcrumb';
+@import '../components/Button/Button';
+@import '../components/Callout/Callout';
+@import '../components/ChoiceField/ChoiceField';
+@import '../components/CommandBar/CommandBar';
+@import '../components/ContextualMenu/ContextualMenu';
+@import '../components/DatePicker/DatePicker';
+@import '../components/Dialog/Dialog';
+@import '../components/Dropdown/Dropdown';
+@import '../components/Facepile/Facepile';
+@import '../components/Label/Label';
+@import '../components/Link/Link';
+@import '../components/List/List';
+@import '../components/ListItem/ListItem';
+@import '../components/MessageBanner/MessageBanner';
+@import '../components/NavBar/NavBar';
+@import '../components/OrgChart/OrgChart';
+@import '../components/Overlay/Overlay';
+@import '../components/Panel/Panel';
+@import '../components/PeoplePicker/PeoplePicker';
+@import '../components/Persona/Persona';
+@import '../components/PersonaCard/PersonaCard';
+@import '../components/Pivot/Pivot';
+@import '../components/ProgressIndicator/ProgressIndicator';
+@import '../components/SearchBox/SearchBox';
+@import '../components/Spinner/Spinner';
+@import '../components/Table/Table';
+@import '../components/TextField/TextField';
+@import '../components/Toggle/Toggle';
diff --git a/dist/sass/Fabric.Grid.Output.scss b/dist/sass/Fabric.Grid.Output.scss
new file mode 100644
index 000000000..eabedd697
--- /dev/null
+++ b/dist/sass/Fabric.Grid.Output.scss
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+@import "Fabric.Grid";
+
+//== Grid container (same for all sizes)
+//
+.ms-Grid {
+ @include ms-Grid;
+}
+
+//== Grid rows (pull first and last column out)
+//
+.ms-Grid-row {
+ @include ms-Grid-row;
+}
+
+//== Grid cells
+//
+.ms-Grid-col {
+ @include ms-Grid-col;
+}
+
+// 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/dist/sass/Fabric.Icons.Font.Output.scss b/dist/sass/Fabric.Icons.Font.Output.scss
new file mode 100644
index 000000000..d15af33a2
--- /dev/null
+++ b/dist/sass/Fabric.Icons.Font.Output.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon font-family definition
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+@import "Fabric.Typography.Fonts";
+
+@font-face {
+ font-family: 'Office365Icons';
+ src: url('#{$ms-font-directory}/icons/office365icons.eot?');
+ src: url('#{$ms-font-directory}/icons/office365icons.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/icons/office365icons.woff?') format('woff'),
+ url('#{$ms-font-directory}/icons/office365icons.ttf?') format('truetype'),
+ url('#{$ms-font-directory}/icons/office365icons.svg?#office365icons') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
diff --git a/dist/sass/Fabric.Icons.Output.scss b/dist/sass/Fabric.Icons.Output.scss
new file mode 100644
index 000000000..d5c733d74
--- /dev/null
+++ b/dist/sass/Fabric.Icons.Output.scss
@@ -0,0 +1,771 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon definitions
+
+
+@import './Fabric.Icons';
+
+// Base icon definition
+.ms-Icon {
+ @include ms-Icon();
+}
+
+// Modifiers: Each of the icons.
+//*-- Start
+.ms-Icon--circleEmpty:before { @include ms-Icon--circleEmpty; }
+.ms-Icon--circleFill:before { @include ms-Icon--circleFill; }
+.ms-Icon--placeholder:before { @include ms-Icon--placeholder; }
+.ms-Icon--star:before { @include ms-Icon--star; }
+.ms-Icon--plus:before { @include ms-Icon--plus; }
+.ms-Icon--minus:before { @include ms-Icon--minus; }
+.ms-Icon--question:before { @include ms-Icon--question; }
+.ms-Icon--exclamation:before { @include ms-Icon--exclamation; }
+.ms-Icon--person:before { @include ms-Icon--person; }
+.ms-Icon--mail:before { @include ms-Icon--mail; }
+.ms-Icon--infoCircle:before { @include ms-Icon--infoCircle; }
+.ms-Icon--alert:before { @include ms-Icon--alert; }
+.ms-Icon--xCircle:before { @include ms-Icon--xCircle; }
+.ms-Icon--mailOpen:before { @include ms-Icon--mailOpen; }
+.ms-Icon--people:before { @include ms-Icon--people; }
+.ms-Icon--bell:before { @include ms-Icon--bell; }
+.ms-Icon--calendar:before { @include ms-Icon--calendar; }
+.ms-Icon--scheduling:before { @include ms-Icon--scheduling; }
+.ms-Icon--event:before { @include ms-Icon--event; }
+.ms-Icon--folder:before { @include ms-Icon--folder; }
+.ms-Icon--documents:before { @include ms-Icon--documents; }
+.ms-Icon--onedrive:before { @include ms-Icon--onedrive; }
+.ms-Icon--chat:before { @include ms-Icon--chat; }
+.ms-Icon--sites:before { @include ms-Icon--sites; }
+.ms-Icon--listBullets:before { @include ms-Icon--listBullets; }
+.ms-Icon--calendarWeek:before { @include ms-Icon--calendarWeek; }
+.ms-Icon--calendarWorkWeek:before { @include ms-Icon--calendarWorkWeek; }
+.ms-Icon--calendarDay:before { @include ms-Icon--calendarDay; }
+.ms-Icon--folderMove:before { @include ms-Icon--folderMove; }
+.ms-Icon--panel:before { @include ms-Icon--panel; }
+.ms-Icon--popout:before { @include ms-Icon--popout; }
+.ms-Icon--menu:before { @include ms-Icon--menu; }
+.ms-Icon--home:before { @include ms-Icon--home; }
+.ms-Icon--favorites:before { @include ms-Icon--favorites; }
+.ms-Icon--phone:before { @include ms-Icon--phone; }
+.ms-Icon--mailSend:before { @include ms-Icon--mailSend; }
+.ms-Icon--save:before { @include ms-Icon--save; }
+.ms-Icon--trash:before { @include ms-Icon--trash; }
+.ms-Icon--pencil:before { @include ms-Icon--pencil; }
+.ms-Icon--flag:before { @include ms-Icon--flag; }
+.ms-Icon--reply:before { @include ms-Icon--reply; }
+.ms-Icon--miniatures:before { @include ms-Icon--miniatures; }
+.ms-Icon--voicemail:before { @include ms-Icon--voicemail; }
+.ms-Icon--play:before { @include ms-Icon--play; }
+.ms-Icon--pause:before { @include ms-Icon--pause; }
+.ms-Icon--onlineAdd:before { @include ms-Icon--onlineAdd; }
+.ms-Icon--onlineJoin:before { @include ms-Icon--onlineJoin; }
+.ms-Icon--replyAll:before { @include ms-Icon--replyAll; }
+.ms-Icon--attachment:before { @include ms-Icon--attachment; }
+.ms-Icon--drm:before { @include ms-Icon--drm; }
+.ms-Icon--pinDown:before { @include ms-Icon--pinDown; }
+.ms-Icon--refresh:before { @include ms-Icon--refresh; }
+.ms-Icon--gear:before { @include ms-Icon--gear; }
+.ms-Icon--smiley:before { @include ms-Icon--smiley; }
+.ms-Icon--info:before { @include ms-Icon--info; }
+.ms-Icon--lock:before { @include ms-Icon--lock; }
+.ms-Icon--search:before { @include ms-Icon--search; }
+.ms-Icon--questionReverse:before { @include ms-Icon--questionReverse; }
+.ms-Icon--notRecurring:before { @include ms-Icon--notRecurring; }
+.ms-Icon--tasks:before { @include ms-Icon--tasks; }
+.ms-Icon--check:before { @include ms-Icon--check; }
+.ms-Icon--x:before { @include ms-Icon--x; }
+.ms-Icon--ellipsis:before { @include ms-Icon--ellipsis; }
+.ms-Icon--dot:before { @include ms-Icon--dot; }
+.ms-Icon--arrowUp:before { @include ms-Icon--arrowUp; }
+.ms-Icon--arrowDown:before { @include ms-Icon--arrowDown; }
+.ms-Icon--arrowLeft:before { @include ms-Icon--arrowLeft; }
+.ms-Icon--arrowRight:before { @include ms-Icon--arrowRight; }
+.ms-Icon--download:before { @include ms-Icon--download; }
+.ms-Icon--directions:before { @include ms-Icon--directions; }
+.ms-Icon--microphone:before { @include ms-Icon--microphone; }
+.ms-Icon--caretUp:before { @include ms-Icon--caretUp; }
+.ms-Icon--caretDown:before { @include ms-Icon--caretDown; }
+.ms-Icon--caretLeft:before { @include ms-Icon--caretLeft; }
+.ms-Icon--caretRight:before { @include ms-Icon--caretRight; }
+.ms-Icon--caretUpLeft:before { @include ms-Icon--caretUpLeft; }
+.ms-Icon--caretUpRight:before { @include ms-Icon--caretUpRight; }
+.ms-Icon--caretDownRight:before { @include ms-Icon--caretDownRight; }
+.ms-Icon--caretDownLeft:before { @include ms-Icon--caretDownLeft; }
+.ms-Icon--note:before { @include ms-Icon--note; }
+.ms-Icon--noteReply:before { @include ms-Icon--noteReply; }
+.ms-Icon--noteForward:before { @include ms-Icon--noteForward; }
+.ms-Icon--key:before { @include ms-Icon--key; }
+.ms-Icon--tile:before { @include ms-Icon--tile; }
+.ms-Icon--taskRecurring:before { @include ms-Icon--taskRecurring; }
+.ms-Icon--starEmpty:before { @include ms-Icon--starEmpty; }
+.ms-Icon--upload:before { @include ms-Icon--upload; }
+.ms-Icon--wrench:before { @include ms-Icon--wrench; }
+.ms-Icon--share:before { @include ms-Icon--share; }
+.ms-Icon--documentReply:before { @include ms-Icon--documentReply; }
+.ms-Icon--documentForward:before { @include ms-Icon--documentForward; }
+.ms-Icon--partner:before { @include ms-Icon--partner; }
+.ms-Icon--reactivate:before { @include ms-Icon--reactivate; }
+.ms-Icon--sort:before { @include ms-Icon--sort; }
+.ms-Icon--personAdd:before { @include ms-Icon--personAdd; }
+.ms-Icon--chevronUp:before { @include ms-Icon--chevronUp; }
+.ms-Icon--chevronDown:before { @include ms-Icon--chevronDown; }
+.ms-Icon--chevronLeft:before { @include ms-Icon--chevronLeft; }
+.ms-Icon--chevronRight:before { @include ms-Icon--chevronRight; }
+.ms-Icon--peopleAdd:before { @include ms-Icon--peopleAdd; }
+.ms-Icon--newsfeed:before { @include ms-Icon--newsfeed; }
+.ms-Icon--notebook:before { @include ms-Icon--notebook; }
+.ms-Icon--link:before { @include ms-Icon--link; }
+.ms-Icon--chevronsUp:before { @include ms-Icon--chevronsUp; }
+.ms-Icon--chevronsDown:before { @include ms-Icon--chevronsDown; }
+.ms-Icon--chevronsLeft:before { @include ms-Icon--chevronsLeft; }
+.ms-Icon--chevronsRight:before { @include ms-Icon--chevronsRight; }
+.ms-Icon--clutter:before { @include ms-Icon--clutter; }
+.ms-Icon--subscribe:before { @include ms-Icon--subscribe; }
+.ms-Icon--unsubscribe:before { @include ms-Icon--unsubscribe; }
+.ms-Icon--personRemove:before { @include ms-Icon--personRemove; }
+.ms-Icon--receiptForward:before { @include ms-Icon--receiptForward; }
+.ms-Icon--receiptReply:before { @include ms-Icon--receiptReply; }
+.ms-Icon--receiptCheck:before { @include ms-Icon--receiptCheck; }
+.ms-Icon--peopleRemove:before { @include ms-Icon--peopleRemove; }
+.ms-Icon--merge:before { @include ms-Icon--merge; }
+.ms-Icon--split:before { @include ms-Icon--split; }
+.ms-Icon--eventCancel:before { @include ms-Icon--eventCancel; }
+.ms-Icon--eventShare:before { @include ms-Icon--eventShare; }
+.ms-Icon--today:before { @include ms-Icon--today; }
+.ms-Icon--oofReply:before { @include ms-Icon--oofReply; }
+.ms-Icon--voicemailReply:before { @include ms-Icon--voicemailReply; }
+.ms-Icon--voicemailForward:before { @include ms-Icon--voicemailForward; }
+.ms-Icon--ribbon:before { @include ms-Icon--ribbon; }
+.ms-Icon--contact:before { @include ms-Icon--contact; }
+.ms-Icon--eye:before { @include ms-Icon--eye; }
+.ms-Icon--glasses:before { @include ms-Icon--glasses; }
+.ms-Icon--print:before { @include ms-Icon--print; }
+.ms-Icon--room:before { @include ms-Icon--room; }
+.ms-Icon--post:before { @include ms-Icon--post; }
+.ms-Icon--toggle:before { @include ms-Icon--toggle; }
+.ms-Icon--touch:before { @include ms-Icon--touch; }
+.ms-Icon--clock:before { @include ms-Icon--clock; }
+.ms-Icon--fax:before { @include ms-Icon--fax; }
+.ms-Icon--lightning:before { @include ms-Icon--lightning; }
+.ms-Icon--dialpad:before { @include ms-Icon--dialpad; }
+.ms-Icon--phoneTransfer:before { @include ms-Icon--phoneTransfer; }
+.ms-Icon--phoneAdd:before { @include ms-Icon--phoneAdd; }
+.ms-Icon--late:before { @include ms-Icon--late; }
+.ms-Icon--chatAdd:before { @include ms-Icon--chatAdd; }
+.ms-Icon--conflict:before { @include ms-Icon--conflict; }
+.ms-Icon--navigate:before { @include ms-Icon--navigate; }
+.ms-Icon--camera:before { @include ms-Icon--camera; }
+.ms-Icon--filter:before { @include ms-Icon--filter; }
+.ms-Icon--fullscreen:before { @include ms-Icon--fullscreen; }
+.ms-Icon--new:before { @include ms-Icon--new; }
+.ms-Icon--mailEmpty:before { @include ms-Icon--mailEmpty; }
+.ms-Icon--editBox:before { @include ms-Icon--editBox; }
+.ms-Icon--waffle:before { @include ms-Icon--waffle; }
+.ms-Icon--work:before { @include ms-Icon--work; }
+.ms-Icon--eventRecurring:before { @include ms-Icon--eventRecurring; }
+.ms-Icon--cart:before { @include ms-Icon--cart; }
+.ms-Icon--socialListening:before { @include ms-Icon--socialListening; }
+.ms-Icon--mapMarker:before { @include ms-Icon--mapMarker; }
+.ms-Icon--org:before { @include ms-Icon--org; }
+.ms-Icon--replyAlt:before { @include ms-Icon--replyAlt; }
+.ms-Icon--replyAllAlt:before { @include ms-Icon--replyAllAlt; }
+.ms-Icon--eventInfo:before { @include ms-Icon--eventInfo; }
+.ms-Icon--group:before { @include ms-Icon--group; }
+.ms-Icon--money:before { @include ms-Icon--money; }
+.ms-Icon--graph:before { @include ms-Icon--graph; }
+.ms-Icon--noteEdit:before { @include ms-Icon--noteEdit; }
+.ms-Icon--dashboard:before { @include ms-Icon--dashboard; }
+.ms-Icon--mailEdit:before { @include ms-Icon--mailEdit; }
+.ms-Icon--pinLeft:before { @include ms-Icon--pinLeft; }
+.ms-Icon--heart:before { @include ms-Icon--heart; }
+.ms-Icon--heartEmpty:before { @include ms-Icon--heartEmpty; }
+.ms-Icon--picture:before { @include ms-Icon--picture; }
+.ms-Icon--cake:before { @include ms-Icon--cake; }
+.ms-Icon--books:before { @include ms-Icon--books; }
+.ms-Icon--chart:before { @include ms-Icon--chart; }
+.ms-Icon--video:before { @include ms-Icon--video; }
+.ms-Icon--soccer:before { @include ms-Icon--soccer; }
+.ms-Icon--meal:before { @include ms-Icon--meal; }
+.ms-Icon--balloon:before { @include ms-Icon--balloon; }
+.ms-Icon--cat:before { @include ms-Icon--cat; }
+.ms-Icon--dog:before { @include ms-Icon--dog; }
+.ms-Icon--bag:before { @include ms-Icon--bag; }
+.ms-Icon--music:before { @include ms-Icon--music; }
+.ms-Icon--stopwatch:before { @include ms-Icon--stopwatch; }
+.ms-Icon--coffee:before { @include ms-Icon--coffee; }
+.ms-Icon--briefcase:before { @include ms-Icon--briefcase; }
+.ms-Icon--pill:before { @include ms-Icon--pill; }
+.ms-Icon--trophy:before { @include ms-Icon--trophy; }
+.ms-Icon--firstAid:before { @include ms-Icon--firstAid; }
+.ms-Icon--plane:before { @include ms-Icon--plane; }
+.ms-Icon--page:before { @include ms-Icon--page; }
+.ms-Icon--car:before { @include ms-Icon--car; }
+.ms-Icon--dogAlt:before { @include ms-Icon--dogAlt; }
+.ms-Icon--document:before { @include ms-Icon--document; }
+.ms-Icon--metadata:before { @include ms-Icon--metadata; }
+.ms-Icon--pointItem:before { @include ms-Icon--pointItem; }
+.ms-Icon--text:before { @include ms-Icon--text; }
+.ms-Icon--fieldText:before { @include ms-Icon--fieldText; }
+.ms-Icon--fieldNumber:before { @include ms-Icon--fieldNumber; }
+.ms-Icon--dropdown:before { @include ms-Icon--dropdown; }
+.ms-Icon--radioButton:before { @include ms-Icon--radioButton; }
+.ms-Icon--checkbox:before { @include ms-Icon--checkbox; }
+.ms-Icon--story:before { @include ms-Icon--story; }
+.ms-Icon--bold:before { @include ms-Icon--bold; }
+.ms-Icon--italic:before { @include ms-Icon--italic; }
+.ms-Icon--underline:before { @include ms-Icon--underline; }
+.ms-Icon--quote:before { @include ms-Icon--quote; }
+.ms-Icon--styleRemove:before { @include ms-Icon--styleRemove; }
+.ms-Icon--pictureAdd:before { @include ms-Icon--pictureAdd; }
+.ms-Icon--pictureRemove:before { @include ms-Icon--pictureRemove; }
+.ms-Icon--desktop:before { @include ms-Icon--desktop; }
+.ms-Icon--tablet:before { @include ms-Icon--tablet; }
+.ms-Icon--mobile:before { @include ms-Icon--mobile; }
+.ms-Icon--table:before { @include ms-Icon--table; }
+.ms-Icon--hide:before { @include ms-Icon--hide; }
+.ms-Icon--shield:before { @include ms-Icon--shield; }
+.ms-Icon--header:before { @include ms-Icon--header; }
+.ms-Icon--paint:before { @include ms-Icon--paint; }
+.ms-Icon--support:before { @include ms-Icon--support; }
+.ms-Icon--settings:before { @include ms-Icon--settings; }
+.ms-Icon--creditCard:before { @include ms-Icon--creditCard; }
+.ms-Icon--reload:before { @include ms-Icon--reload; }
+.ms-Icon--peopleSecurity:before { @include ms-Icon--peopleSecurity; }
+.ms-Icon--fieldTextBox:before { @include ms-Icon--fieldTextBox; }
+.ms-Icon--multiChoice:before { @include ms-Icon--multiChoice; }
+.ms-Icon--fieldMail:before { @include ms-Icon--fieldMail; }
+.ms-Icon--contactForm:before { @include ms-Icon--contactForm; }
+.ms-Icon--circleHalfFilled:before { @include ms-Icon--circleHalfFilled; }
+.ms-Icon--documentPDF:before { @include ms-Icon--documentPDF; }
+.ms-Icon--bookmark:before { @include ms-Icon--bookmark; }
+.ms-Icon--circleUnfilled:before { @include ms-Icon--circleUnfilled; }
+.ms-Icon--circleFilled:before { @include ms-Icon--circleFilled; }
+.ms-Icon--textBox:before { @include ms-Icon--textBox; }
+.ms-Icon--drop:before { @include ms-Icon--drop; }
+.ms-Icon--sun:before { @include ms-Icon--sun; }
+.ms-Icon--lifesaver:before { @include ms-Icon--lifesaver; }
+.ms-Icon--lifesaverLock:before { @include ms-Icon--lifesaverLock; }
+.ms-Icon--mailUnread:before { @include ms-Icon--mailUnread; }
+.ms-Icon--mailRead:before { @include ms-Icon--mailRead; }
+.ms-Icon--inboxCheck:before { @include ms-Icon--inboxCheck; }
+.ms-Icon--folderSearch:before { @include ms-Icon--folderSearch; }
+.ms-Icon--collapse:before { @include ms-Icon--collapse; }
+.ms-Icon--expand:before { @include ms-Icon--expand; }
+.ms-Icon--ascending:before { @include ms-Icon--ascending; }
+.ms-Icon--descending:before { @include ms-Icon--descending; }
+.ms-Icon--filterClear:before { @include ms-Icon--filterClear; }
+.ms-Icon--checkboxEmpty:before { @include ms-Icon--checkboxEmpty; }
+.ms-Icon--checkboxMixed:before { @include ms-Icon--checkboxMixed; }
+.ms-Icon--boards:before { @include ms-Icon--boards; }
+.ms-Icon--checkboxCheck:before { @include ms-Icon--checkboxCheck; }
+.ms-Icon--frowny:before { @include ms-Icon--frowny; }
+.ms-Icon--lightBulb:before { @include ms-Icon--lightBulb; }
+.ms-Icon--globe:before { @include ms-Icon--globe; }
+.ms-Icon--deviceWipe:before { @include ms-Icon--deviceWipe; }
+.ms-Icon--listCheck:before { @include ms-Icon--listCheck; }
+.ms-Icon--listGroup:before { @include ms-Icon--listGroup; }
+.ms-Icon--timeline:before { @include ms-Icon--timeline; }
+.ms-Icon--fontIncrease:before { @include ms-Icon--fontIncrease; }
+.ms-Icon--fontDecrease:before { @include ms-Icon--fontDecrease; }
+.ms-Icon--fontColor:before { @include ms-Icon--fontColor; }
+.ms-Icon--mailCheck:before { @include ms-Icon--mailCheck; }
+.ms-Icon--mailDown:before { @include ms-Icon--mailDown; }
+.ms-Icon--listCheckbox:before { @include ms-Icon--listCheckbox; }
+.ms-Icon--sunAdd:before { @include ms-Icon--sunAdd; }
+.ms-Icon--sunQuestion:before { @include ms-Icon--sunQuestion; }
+.ms-Icon--chevronThinUp:before { @include ms-Icon--chevronThinUp; }
+.ms-Icon--chevronThinDown:before { @include ms-Icon--chevronThinDown; }
+.ms-Icon--chevronThinLeft:before { @include ms-Icon--chevronThinLeft; }
+.ms-Icon--chevronThinRight:before { @include ms-Icon--chevronThinRight; }
+.ms-Icon--chevronThickUp:before { @include ms-Icon--chevronThickUp; }
+.ms-Icon--chevronThickDown:before { @include ms-Icon--chevronThickDown; }
+.ms-Icon--chevronThickLeft:before { @include ms-Icon--chevronThickLeft; }
+.ms-Icon--chevronThickRight:before { @include ms-Icon--chevronThickRight; }
+.ms-Icon--linkRemove:before { @include ms-Icon--linkRemove; }
+.ms-Icon--alertOutline:before { @include ms-Icon--alertOutline; }
+.ms-Icon--documentLandscape:before { @include ms-Icon--documentLandscape; }
+.ms-Icon--documentAdd:before { @include ms-Icon--documentAdd; }
+.ms-Icon--toggleMiddle:before { @include ms-Icon--toggleMiddle; }
+.ms-Icon--embed:before { @include ms-Icon--embed; }
+.ms-Icon--listNumbered:before { @include ms-Icon--listNumbered; }
+.ms-Icon--peopleCheck:before { @include ms-Icon--peopleCheck; }
+.ms-Icon--caretUpOutline:before { @include ms-Icon--caretUpOutline; }
+.ms-Icon--caretDownOutline:before { @include ms-Icon--caretDownOutline; }
+.ms-Icon--caretLeftOutline:before { @include ms-Icon--caretLeftOutline; }
+.ms-Icon--caretRightOutline:before { @include ms-Icon--caretRightOutline; }
+.ms-Icon--mailSync:before { @include ms-Icon--mailSync; }
+.ms-Icon--mailError:before { @include ms-Icon--mailError; }
+.ms-Icon--mailPause:before { @include ms-Icon--mailPause; }
+.ms-Icon--peopleSync:before { @include ms-Icon--peopleSync; }
+.ms-Icon--peopleError:before { @include ms-Icon--peopleError; }
+.ms-Icon--peoplePause:before { @include ms-Icon--peoplePause; }
+.ms-Icon--circleBall:before { @include ms-Icon--circleBall; }
+.ms-Icon--circleBalloons:before { @include ms-Icon--circleBalloons; }
+.ms-Icon--circleCar:before { @include ms-Icon--circleCar; }
+.ms-Icon--circleCat:before { @include ms-Icon--circleCat; }
+.ms-Icon--circleCoffee:before { @include ms-Icon--circleCoffee; }
+.ms-Icon--circleDog:before { @include ms-Icon--circleDog; }
+.ms-Icon--circleLightning:before { @include ms-Icon--circleLightning; }
+.ms-Icon--circlePill:before { @include ms-Icon--circlePill; }
+.ms-Icon--circlePlane:before { @include ms-Icon--circlePlane; }
+.ms-Icon--circlePoodle:before { @include ms-Icon--circlePoodle; }
+.ms-Icon--checkPeople:before { @include ms-Icon--checkPeople; }
+.ms-Icon--documentSearch:before { @include ms-Icon--documentSearch; }
+.ms-Icon--sortLines:before { @include ms-Icon--sortLines; }
+.ms-Icon--calendarPublic:before { @include ms-Icon--calendarPublic; }
+.ms-Icon--contactPublic:before { @include ms-Icon--contactPublic; }
+.ms-Icon--classNotebook:before { @include ms-Icon--classNotebook; }
+.ms-Icon--triangleUp:before { @include ms-Icon--triangleUp; }
+.ms-Icon--triangleRight:before { @include ms-Icon--triangleRight; }
+.ms-Icon--triangleDown:before { @include ms-Icon--triangleDown; }
+.ms-Icon--triangleLeft:before { @include ms-Icon--triangleLeft; }
+.ms-Icon--triangleEmptyUp:before { @include ms-Icon--triangleEmptyUp; }
+.ms-Icon--triangleEmptyRight:before { @include ms-Icon--triangleEmptyRight; }
+.ms-Icon--triangleEmptyDown:before { @include ms-Icon--triangleEmptyDown; }
+.ms-Icon--triangleEmptyLeft:before { @include ms-Icon--triangleEmptyLeft; }
+.ms-Icon--filePDF:before { @include ms-Icon--filePDF; }
+.ms-Icon--fileImage:before { @include ms-Icon--fileImage; }
+.ms-Icon--fileDocument:before { @include ms-Icon--fileDocument; }
+.ms-Icon--listGroup2:before { @include ms-Icon--listGroup2; }
+.ms-Icon--copy:before { @include ms-Icon--copy; }
+.ms-Icon--creditCardOutline:before { @include ms-Icon--creditCardOutline; }
+.ms-Icon--mailPublic:before { @include ms-Icon--mailPublic; }
+.ms-Icon--folderPublic:before { @include ms-Icon--folderPublic; }
+.ms-Icon--teamwork:before { @include ms-Icon--teamwork; }
+.ms-Icon--move:before { @include ms-Icon--move; }
+.ms-Icon--classroom:before { @include ms-Icon--classroom; }
+.ms-Icon--menu2:before { @include ms-Icon--menu2; }
+.ms-Icon--plus2:before { @include ms-Icon--plus2; }
+.ms-Icon--tag:before { @include ms-Icon--tag; }
+.ms-Icon--arrowUp2:before { @include ms-Icon--arrowUp2; }
+.ms-Icon--arrowDown2:before { @include ms-Icon--arrowDown2; }
+.ms-Icon--circlePlus:before { @include ms-Icon--circlePlus; }
+.ms-Icon--circleInfo:before { @include ms-Icon--circleInfo; }
+.ms-Icon--section:before { @include ms-Icon--section; }
+.ms-Icon--sections:before { @include ms-Icon--sections; }
+.ms-Icon--at:before { @include ms-Icon--at; }
+.ms-Icon--arrowUpRight:before { @include ms-Icon--arrowUpRight; }
+.ms-Icon--arrowDownRight:before { @include ms-Icon--arrowDownRight; }
+.ms-Icon--arrowDownLeft:before { @include ms-Icon--arrowDownLeft; }
+.ms-Icon--arrowUpLeft:before { @include ms-Icon--arrowUpLeft; }
+.ms-Icon--bundle:before { @include ms-Icon--bundle; }
+.ms-Icon--pictureEdit:before { @include ms-Icon--pictureEdit; }
+.ms-Icon--protectionCenter:before { @include ms-Icon--protectionCenter; }
+.ms-Icon--alert2:before { @include ms-Icon--alert2; }
+
+//*-- end
+// Modifier: Place the icon in a circle.
+.ms-Icon--circle {
+ @include ms-Icon--circle;
+}
+
+// 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--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--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--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/dist/sass/Fabric.Icons.RTL.Output.scss b/dist/sass/Fabric.Icons.RTL.Output.scss
new file mode 100644
index 000000000..d7dfcaf13
--- /dev/null
+++ b/dist/sass/Fabric.Icons.RTL.Output.scss
@@ -0,0 +1,114 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabricicons
+
+
+@import 'Fabric.Icons.Output';
+
+// 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/dist/sass/Fabric.RTL.scss b/dist/sass/Fabric.RTL.scss
new file mode 100644
index 000000000..b3e6562fa
--- /dev/null
+++ b/dist/sass/Fabric.RTL.scss
@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// OSS Framework Design Language
+// --------------------------------------------------
+// Fabric Core Module Loader (RTL)
+
+// Common utilities
+@import './Fabric.Utilities.Output';
+@import './Fabric.ZIndex.Variables';
+@import './Fabric.Mixins';
+@import './Fabric.Mixins.RTL';
+
+// Colors
+@import './Fabric.Color.Variables';
+@import './Fabric.Color.Mixins.Output';
+
+// Typography
+@import './Fabric.Typography.Variables';
+@import './Fabric.Typography.Fonts.Output';
+@import './Fabric.Typography.Output';
+@import './Fabric.Typography.Language.Overrides.Output';
+
+// Icons
+@import './Fabric.Icons.Font.Output';
+@import './Fabric.Icons.RTL.Output';
+
+// Animations
+@import './Fabric.Animations.RTL.Output';
+
+// Responsive
+@import './Fabric.Responsive.Variables';
+@import './Fabric.Responsive.Utilities.Output';
+
+// Grid
+@import './Fabric.Grid.Output';
+
+// Office colors
+@import './Office.Color.Variables';
\ No newline at end of file
diff --git a/dist/sass/Fabric.Responsive.Utilities.Output.scss b/dist/sass/Fabric.Responsive.Utilities.Output.scss
new file mode 100644
index 000000000..caa7c267b
--- /dev/null
+++ b/dist/sass/Fabric.Responsive.Utilities.Output.scss
@@ -0,0 +1,1022 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Responsive utilities based on defined variables, component visibility,
+// and size for different displays.
+@import "./Fabric.Responsive.Variables";
+@import "./Fabric.Responsive.Utilities.Variables";
+
+//== 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 {
+ @include ms-u-sm12;
+}
+.ms-u-sm11 {
+ @include ms-u-sm11;
+}
+.ms-u-sm10 {
+ @include ms-u-sm10;
+}
+.ms-u-sm9 {
+ @include ms-u-sm9;
+}
+.ms-u-sm8 {
+ @include ms-u-sm8;
+}
+.ms-u-sm7 {
+ @include ms-u-sm7;
+}
+.ms-u-sm6 {
+ @include ms-u-sm6;
+}
+.ms-u-sm5 {
+ @include ms-u-sm5;
+}
+.ms-u-sm4 {
+ @include ms-u-sm4;
+}
+.ms-u-sm3 {
+ @include ms-u-sm3;
+}
+.ms-u-sm2 {
+ @include ms-u-sm2;
+}
+.ms-u-sm1 {
+ @include ms-u-sm1;
+}
+.ms-u-smPull12 {
+ @include ms-u-smPull12;
+}
+.ms-u-smPull11 {
+ @include ms-u-smPull11;
+}
+.ms-u-smPull10 {
+ @include ms-u-smPull10;
+}
+.ms-u-smPull9 {
+ @include ms-u-smPull9;
+}
+.ms-u-smPull8 {
+ @include ms-u-smPull8;
+}
+.ms-u-smPull7 {
+ @include ms-u-smPull7;
+}
+.ms-u-smPull6 {
+ @include ms-u-smPull6;
+}
+.ms-u-smPull5 {
+ @include ms-u-smPull5;
+}
+.ms-u-smPull4 {
+ @include ms-u-smPull4;
+}
+.ms-u-smPull3 {
+ @include ms-u-smPull3;
+}
+.ms-u-smPull2 {
+ @include ms-u-smPull2;
+}
+.ms-u-smPull1 {
+ @include ms-u-smPull1;
+}
+.ms-u-smPull0 {
+ @include ms-u-smPull0;
+}
+.ms-u-smPush12 {
+ @include ms-u-smPush12;
+}
+.ms-u-smPush11 {
+ @include ms-u-smPush11;
+}
+.ms-u-smPush10 {
+ @include ms-u-smPush10;
+}
+.ms-u-smPush9 {
+ @include ms-u-smPush9;
+}
+.ms-u-smPush8 {
+ @include ms-u-smPush8;
+}
+.ms-u-smPush7 {
+ @include ms-u-smPush7;
+}
+.ms-u-smPush6 {
+ @include ms-u-smPush6;
+}
+.ms-u-smPush5 {
+ @include ms-u-smPush5;
+}
+.ms-u-smPush4 {
+ @include ms-u-smPush4;
+}
+.ms-u-smPush3 {
+ @include ms-u-smPush3;
+}
+.ms-u-smPush2 {
+ @include ms-u-smPush2;
+}
+.ms-u-smPush1 {
+ @include ms-u-smPush1;
+}
+.ms-u-smPush0 {
+ @include ms-u-smPush0;
+}
+
+// Small Offset classes 0 ... 11
+.ms-u-smOffset11 {
+ margin-left: 91.66666666666666%;
+}
+.ms-u-smOffset10 {
+ margin-left: 83.33333333333334%;
+}
+.ms-u-smOffset9 {
+ margin-left: 75%;
+}
+.ms-u-smOffset8 {
+ margin-left: 66.66666666666666%;
+}
+.ms-u-smOffset7 {
+ margin-left: 58.333333333333336%;
+}
+.ms-u-smOffset6 {
+ margin-left: 50%;
+}
+.ms-u-smOffset5 {
+ margin-left: 41.66666666666667%;
+}
+.ms-u-smOffset4 {
+ margin-left: 33.33333333333333%;
+}
+.ms-u-smOffset3 {
+ margin-left: 25%;
+}
+.ms-u-smOffset2 {
+ margin-left: 16.666666666666664%;
+}
+.ms-u-smOffset1 {
+ margin-left: 8.333333333333332%;
+}
+.ms-u-smOffset0 {
+ margin-left: 0;
+}
+
+// Medium screens
+@media (min-width: $ms-screen-md-min) {
+ .ms-u-md12 {
+ @include ms-u-md12;
+ }
+ .ms-u-md11 {
+ @include ms-u-md11;
+ }
+ .ms-u-md10 {
+ @include ms-u-md10;
+ }
+ .ms-u-md9 {
+ @include ms-u-md9;
+ }
+ .ms-u-md8 {
+ @include ms-u-md8;
+ }
+ .ms-u-md7 {
+ @include ms-u-md7;
+ }
+ .ms-u-md6 {
+ @include ms-u-md6;
+ }
+ .ms-u-md5 {
+ @include ms-u-md5;
+ }
+ .ms-u-md4 {
+ @include ms-u-md4;
+ }
+ .ms-u-md3 {
+ @include ms-u-md3;
+ }
+ .ms-u-md2 {
+ @include ms-u-md2;
+ }
+ .ms-u-md1 {
+ @include ms-u-md1;
+ }
+ .ms-u-mdPull12 {
+ @include ms-u-mdPull12;
+ }
+ .ms-u-mdPull11 {
+ @include ms-u-mdPull11;
+ }
+ .ms-u-mdPull10 {
+ @include ms-u-mdPull10;
+ }
+ .ms-u-mdPull9 {
+ @include ms-u-mdPull9;
+ }
+ .ms-u-mdPull8 {
+ @include ms-u-mdPull8;
+ }
+ .ms-u-mdPull7 {
+ @include ms-u-mdPull7;
+ }
+ .ms-u-mdPull6 {
+ @include ms-u-mdPull6;
+ }
+ .ms-u-mdPull5 {
+ @include ms-u-mdPull5;
+ }
+ .ms-u-mdPull4 {
+ @include ms-u-mdPull4;
+ }
+ .ms-u-mdPull3 {
+ @include ms-u-mdPull3;
+ }
+ .ms-u-mdPull2 {
+ @include ms-u-mdPull2;
+ }
+ .ms-u-mdPull1 {
+ @include ms-u-mdPull1;
+ }
+ .ms-u-mdPull0 {
+ @include ms-u-mdPull0;
+ }
+ .ms-u-mdPush12 {
+ @include ms-u-mdPush12;
+ }
+ .ms-u-mdPush11 {
+ @include ms-u-mdPush11;
+ }
+ .ms-u-mdPush10 {
+ @include ms-u-mdPush10;
+ }
+ .ms-u-mdPush9 {
+ @include ms-u-mdPush9;
+ }
+ .ms-u-mdPush8 {
+ @include ms-u-mdPush8;
+ }
+ .ms-u-mdPush7 {
+ @include ms-u-mdPush7;
+ }
+ .ms-u-mdPush6 {
+ @include ms-u-mdPush6;
+ }
+ .ms-u-mdPush5 {
+ @include ms-u-mdPush5;
+ }
+ .ms-u-mdPush4 {
+ @include ms-u-mdPush4;
+ }
+ .ms-u-mdPush3 {
+ @include ms-u-mdPush3;
+ }
+ .ms-u-mdPush2 {
+ @include ms-u-mdPush2;
+ }
+ .ms-u-mdPush1 {
+ @include ms-u-mdPush1;
+ }
+ .ms-u-mdPush0 {
+ @include ms-u-mdPush0;
+ }
+
+ // Medium Offset classes 0 ... 11
+ .ms-u-mdOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-mdOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-mdOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-mdOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-mdOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-mdOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-mdOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-mdOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-mdOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-mdOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-mdOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-mdOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Large screens
+@media (min-width: $ms-screen-lg-min) {
+ .ms-u-lg12 {
+ @include ms-u-lg12;
+ }
+ .ms-u-lg11 {
+ @include ms-u-lg11;
+ }
+ .ms-u-lg10 {
+ @include ms-u-lg10;
+ }
+ .ms-u-lg9 {
+ @include ms-u-lg9;
+ }
+ .ms-u-lg8 {
+ @include ms-u-lg8;
+ }
+ .ms-u-lg7 {
+ @include ms-u-lg7;
+ }
+ .ms-u-lg6 {
+ @include ms-u-lg6;
+ }
+ .ms-u-lg5 {
+ @include ms-u-lg5;
+ }
+ .ms-u-lg4 {
+ @include ms-u-lg4;
+ }
+ .ms-u-lg3 {
+ @include ms-u-lg3;
+ }
+ .ms-u-lg2 {
+ @include ms-u-lg2;
+ }
+ .ms-u-lg1 {
+ @include ms-u-lg1;
+ }
+ .ms-u-lgPull12 {
+ @include ms-u-lgPull12;
+ }
+ .ms-u-lgPull11 {
+ @include ms-u-lgPull11;
+ }
+ .ms-u-lgPull10 {
+ @include ms-u-lgPull10;
+ }
+ .ms-u-lgPull9 {
+ @include ms-u-lgPull9;
+ }
+ .ms-u-lgPull8 {
+ @include ms-u-lgPull8;
+ }
+ .ms-u-lgPull7 {
+ @include ms-u-lgPull7;
+ }
+ .ms-u-lgPull6 {
+ @include ms-u-lgPull6;
+ }
+ .ms-u-lgPull5 {
+ @include ms-u-lgPull5;
+ }
+ .ms-u-lgPull4 {
+ @include ms-u-lgPull4;
+ }
+ .ms-u-lgPull3 {
+ @include ms-u-lgPull3;
+ }
+ .ms-u-lgPull2 {
+ @include ms-u-lgPull2;
+ }
+ .ms-u-lgPull1 {
+ @include ms-u-lgPull1;
+ }
+ .ms-u-lgPull0 {
+ @include ms-u-lgPull0;
+ }
+ .ms-u-lgPush12 {
+ @include ms-u-lgPush12;
+ }
+ .ms-u-lgPush11 {
+ @include ms-u-lgPush11;
+ }
+ .ms-u-lgPush10 {
+ @include ms-u-lgPush10;
+ }
+ .ms-u-lgPush9 {
+ @include ms-u-lgPush9;
+ }
+ .ms-u-lgPush8 {
+ @include ms-u-lgPush8;
+ }
+ .ms-u-lgPush7 {
+ @include ms-u-lgPush7;
+ }
+ .ms-u-lgPush6 {
+ @include ms-u-lgPush6;
+ }
+ .ms-u-lgPush5 {
+ @include ms-u-lgPush5;
+ }
+ .ms-u-lgPush4 {
+ @include ms-u-lgPush4;
+ }
+ .ms-u-lgPush3 {
+ @include ms-u-lgPush3;
+ }
+ .ms-u-lgPush2 {
+ @include ms-u-lgPush2;
+ }
+ .ms-u-lgPush1 {
+ @include ms-u-lgPush1;
+ }
+ .ms-u-lgPush0 {
+ @include ms-u-lgPush0;
+ }
+
+ // Large Offset classes 0 ... 11
+ .ms-u-lgOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-lgOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-lgOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-lgOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-lgOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-lgOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-lgOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-lgOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-lgOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-lgOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-lgOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-lgOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra large screens
+@media (min-width: $ms-screen-xl-min) {
+ .ms-u-xl12 {
+ @include ms-u-xl12;
+ }
+ .ms-u-xl11 {
+ @include ms-u-xl11;
+ }
+ .ms-u-xl10 {
+ @include ms-u-xl10;
+ }
+ .ms-u-xl9 {
+ @include ms-u-xl9;
+ }
+ .ms-u-xl8 {
+ @include ms-u-xl8;
+ }
+ .ms-u-xl7 {
+ @include ms-u-xl7;
+ }
+ .ms-u-xl6 {
+ @include ms-u-xl6;
+ }
+ .ms-u-xl5 {
+ @include ms-u-xl5;
+ }
+ .ms-u-xl4 {
+ @include ms-u-xl4;
+ }
+ .ms-u-xl3 {
+ @include ms-u-xl3;
+ }
+ .ms-u-xl2 {
+ @include ms-u-xl2;
+ }
+ .ms-u-xl1 {
+ @include ms-u-xl1;
+ }
+ .ms-u-xlPull12 {
+ @include ms-u-xlPull12;
+ }
+ .ms-u-xlPull11 {
+ @include ms-u-xlPull11;
+ }
+ .ms-u-xlPull10 {
+ @include ms-u-xlPull10;
+ }
+ .ms-u-xlPull9 {
+ @include ms-u-xlPull9;
+ }
+ .ms-u-xlPull8 {
+ @include ms-u-xlPull8;
+ }
+ .ms-u-xlPull7 {
+ @include ms-u-xlPull7;
+ }
+ .ms-u-xlPull6 {
+ @include ms-u-xlPull6;
+ }
+ .ms-u-xlPull5 {
+ @include ms-u-xlPull5;
+ }
+ .ms-u-xlPull4 {
+ @include ms-u-xlPull4;
+ }
+ .ms-u-xlPull3 {
+ @include ms-u-xlPull3;
+ }
+ .ms-u-xlPull2 {
+ @include ms-u-xlPull2;
+ }
+ .ms-u-xlPull1 {
+ @include ms-u-xlPull1;
+ }
+ .ms-u-xlPull0 {
+ @include ms-u-xlPull0;
+ }
+ .ms-u-xlPush12 {
+ @include ms-u-xlPush12;
+ }
+ .ms-u-xlPush11 {
+ @include ms-u-xlPush11;
+ }
+ .ms-u-xlPush10 {
+ @include ms-u-xlPush10;
+ }
+ .ms-u-xlPush9 {
+ @include ms-u-xlPush9;
+ }
+ .ms-u-xlPush8 {
+ @include ms-u-xlPush8;
+ }
+ .ms-u-xlPush7 {
+ @include ms-u-xlPush7;
+ }
+ .ms-u-xlPush6 {
+ @include ms-u-xlPush6;
+ }
+ .ms-u-xlPush5 {
+ @include ms-u-xlPush5;
+ }
+ .ms-u-xlPush4 {
+ @include ms-u-xlPush4;
+ }
+ .ms-u-xlPush3 {
+ @include ms-u-xlPush3;
+ }
+ .ms-u-xlPush2 {
+ @include ms-u-xlPush2;
+ }
+ .ms-u-xlPush1 {
+ @include ms-u-xlPush1;
+ }
+ .ms-u-xlPush0 {
+ @include ms-u-xlPush0;
+ }
+
+ // Large Offset classes 0 ... 11
+ .ms-u-xlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xlOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra extra large screens
+@media (min-width: $ms-screen-xxl-min) {
+ .ms-u-xxl12 {
+ @include ms-u-xxl12;
+ }
+ .ms-u-xxl11 {
+ @include ms-u-xxl11;
+ }
+ .ms-u-xxl10 {
+ @include ms-u-xxl10;
+ }
+ .ms-u-xxl9 {
+ @include ms-u-xxl9;
+ }
+ .ms-u-xxl8 {
+ @include ms-u-xxl8;
+ }
+ .ms-u-xxl7 {
+ @include ms-u-xxl7;
+ }
+ .ms-u-xxl6 {
+ @include ms-u-xxl6;
+ }
+ .ms-u-xxl5 {
+ @include ms-u-xxl5;
+ }
+ .ms-u-xxl4 {
+ @include ms-u-xxl4;
+ }
+ .ms-u-xxl3 {
+ @include ms-u-xxl3;
+ }
+ .ms-u-xxl2 {
+ @include ms-u-xxl2;
+ }
+ .ms-u-xxl1 {
+ @include ms-u-xxl1;
+ }
+ .ms-u-xxlPull12 {
+ @include ms-u-xxlPull12;
+ }
+ .ms-u-xxlPull11 {
+ @include ms-u-xxlPull11;
+ }
+ .ms-u-xxlPull10 {
+ @include ms-u-xxlPull10;
+ }
+ .ms-u-xxlPull9 {
+ @include ms-u-xxlPull9;
+ }
+ .ms-u-xxlPull8 {
+ @include ms-u-xxlPull8;
+ }
+ .ms-u-xxlPull7 {
+ @include ms-u-xxlPull7;
+ }
+ .ms-u-xxlPull6 {
+ @include ms-u-xxlPull6;
+ }
+ .ms-u-xxlPull5 {
+ @include ms-u-xxlPull5;
+ }
+ .ms-u-xxlPull4 {
+ @include ms-u-xxlPull4;
+ }
+ .ms-u-xxlPull3 {
+ @include ms-u-xxlPull3;
+ }
+ .ms-u-xxlPull2 {
+ @include ms-u-xxlPull2;
+ }
+ .ms-u-xxlPull1 {
+ @include ms-u-xxlPull1;
+ }
+ .ms-u-xxlPull0 {
+ @include ms-u-xxlPull0;
+ }
+ .ms-u-xxlPush12 {
+ @include ms-u-xxlPush12;
+ }
+ .ms-u-xxlPush11 {
+ @include ms-u-xxlPush11;
+ }
+ .ms-u-xxlPush10 {
+ @include ms-u-xxlPush10;
+ }
+ .ms-u-xxlPush9 {
+ @include ms-u-xxlPush9;
+ }
+ .ms-u-xxlPush8 {
+ @include ms-u-xxlPush8;
+ }
+ .ms-u-xxlPush7 {
+ @include ms-u-xxlPush7;
+ }
+ .ms-u-xxlPush6 {
+ @include ms-u-xxlPush6;
+ }
+ .ms-u-xxlPush5 {
+ @include ms-u-xxlPush5;
+ }
+ .ms-u-xxlPush4 {
+ @include ms-u-xxlPush4;
+ }
+ .ms-u-xxlPush3 {
+ @include ms-u-xxlPush3;
+ }
+ .ms-u-xxlPush2 {
+ @include ms-u-xxlPush2;
+ }
+ .ms-u-xxlPush1 {
+ @include ms-u-xxlPush1;
+ }
+ .ms-u-xxlPush0 {
+ @include ms-u-xxlPush0;
+ }
+
+ // Extra extra large Offset classes 0 ... 11
+ .ms-u-xxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xxlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xxlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xxlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xxlOffset0 {
+ margin-left: 0;
+ }
+}
+
+// Extra extra extra large screens
+@media (min-width: $ms-screen-xxxl-min) {
+ .ms-u-xxxl12 {
+ @include ms-u-xxxl12;
+ }
+ .ms-u-xxxl11 {
+ @include ms-u-xxxl11;
+ }
+ .ms-u-xxxl10 {
+ @include ms-u-xxxl10;
+ }
+ .ms-u-xxxl9 {
+ @include ms-u-xxxl9;
+ }
+ .ms-u-xxxl8 {
+ @include ms-u-xxxl8;
+ }
+ .ms-u-xxxl7 {
+ @include ms-u-xxxl7;
+ }
+ .ms-u-xxxl6 {
+ @include ms-u-xxxl6;
+ }
+ .ms-u-xxxl5 {
+ @include ms-u-xxxl5;
+ }
+ .ms-u-xxxl4 {
+ @include ms-u-xxxl4;
+ }
+ .ms-u-xxxl3 {
+ @include ms-u-xxxl3;
+ }
+ .ms-u-xxxl2 {
+ @include ms-u-xxxl2;
+ }
+ .ms-u-xxxl1 {
+ @include ms-u-xxxl1;
+ }
+ .ms-u-xxxlPull12 {
+ @include ms-u-xxxlPull12;
+ }
+ .ms-u-xxxlPull11 {
+ @include ms-u-xxxlPull11;
+ }
+ .ms-u-xxxlPull10 {
+ @include ms-u-xxxlPull10;
+ }
+ .ms-u-xxxlPull9 {
+ @include ms-u-xxxlPull9;
+ }
+ .ms-u-xxxlPull8 {
+ @include ms-u-xxxlPull8;
+ }
+ .ms-u-xxxlPull7 {
+ @include ms-u-xxxlPull7;
+ }
+ .ms-u-xxxlPull6 {
+ @include ms-u-xxxlPull6;
+ }
+ .ms-u-xxxlPull5 {
+ @include ms-u-xxxlPull5;
+ }
+ .ms-u-xxxlPull4 {
+ @include ms-u-xxxlPull4;
+ }
+ .ms-u-xxxlPull3 {
+ @include ms-u-xxxlPull3;
+ }
+ .ms-u-xxxlPull2 {
+ @include ms-u-xxxlPull2;
+ }
+ .ms-u-xxxlPull1 {
+ @include ms-u-xxxlPull1;
+ }
+ .ms-u-xxxlPull0 {
+ @include ms-u-xxxlPull0;
+ }
+ .ms-u-xxxlPush12 {
+ @include ms-u-xxxlPush12;
+ }
+ .ms-u-xxxlPush11 {
+ @include ms-u-xxxlPush11;
+ }
+ .ms-u-xxxlPush10 {
+ @include ms-u-xxxlPush10;
+ }
+ .ms-u-xxxlPush9 {
+ @include ms-u-xxxlPush9;
+ }
+ .ms-u-xxxlPush8 {
+ @include ms-u-xxxlPush8;
+ }
+ .ms-u-xxxlPush7 {
+ @include ms-u-xxxlPush7;
+ }
+ .ms-u-xxxlPush6 {
+ @include ms-u-xxxlPush6;
+ }
+ .ms-u-xxxlPush5 {
+ @include ms-u-xxxlPush5;
+ }
+ .ms-u-xxxlPush4 {
+ @include ms-u-xxxlPush4;
+ }
+ .ms-u-xxxlPush3 {
+ @include ms-u-xxxlPush3;
+ }
+ .ms-u-xxxlPush2 {
+ @include ms-u-xxxlPush2;
+ }
+ .ms-u-xxxlPush1 {
+ @include ms-u-xxxlPush1;
+ }
+ .ms-u-xxxlPush0 {
+ @include ms-u-xxxlPush0;
+ }
+
+ // Extra extra extra large Offset classes 0 ... 11
+ .ms-u-xxxlOffset11 {
+ margin-left: 91.66666666666666%;
+ }
+ .ms-u-xxxlOffset10 {
+ margin-left: 83.33333333333334%;
+ }
+ .ms-u-xxxlOffset9 {
+ margin-left: 75%;
+ }
+ .ms-u-xxxlOffset8 {
+ margin-left: 66.66666666666666%;
+ }
+ .ms-u-xxxlOffset7 {
+ margin-left: 58.333333333333336%;
+ }
+ .ms-u-xxxlOffset6 {
+ margin-left: 50%;
+ }
+ .ms-u-xxxlOffset5 {
+ margin-left: 41.66666666666667%;
+ }
+ .ms-u-xxxlOffset4 {
+ margin-left: 33.33333333333333%;
+ }
+ .ms-u-xxxlOffset3 {
+ margin-left: 25%;
+ }
+ .ms-u-xxxlOffset2 {
+ margin-left: 16.666666666666664%;
+ }
+ .ms-u-xxxlOffset1 {
+ margin-left: 8.333333333333332%;
+ }
+ .ms-u-xxxlOffset0 {
+ margin-left: 0;
+ }
+}
diff --git a/dist/sass/Fabric.Typography.Fonts.Output.scss b/dist/sass/Fabric.Typography.Fonts.Output.scss
new file mode 100644
index 000000000..63edecd6a
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Fonts.Output.scss
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Font definitions
+
+@import "Fabric.Typography.Fonts";
+
+// Additional @font-face rules for the Leelawadee font.
+@font-face {
+ font-family: "Leelawadee UI Bold";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Bold#LeelawadeeUI-Bold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Leelawadee UI";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Regular#LeelawadeeUI-Regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Leelawadee UI Semilight";
+ src: url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.eot?#iefix') format('embedded-opentype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.woff') format('woff'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight.ttf') format('truetype'),
+ url('#{$ms-font-directory}/LeelawadeeUI-Thai/LeelawadeeUI-Semilight#LeelawadeeUI-Semilight') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+// Mixins to generate language-specific font faces.
+@include SegoeUIArabicLight;
+@include SegoeUIArabicRegular;
+@include SegoeUIArabicSemibold;
+@include SegoeUIArabicSemilight;
+
+@include SegoeUICyrillicLight;
+@include SegoeUICyrillicRegular;
+@include SegoeUICyrillicSemibold;
+@include SegoeUICyrillicSemilight;
+
+@include SegoeUIEastEuropeanLight;
+@include SegoeUIEastEuropeanRegular;
+@include SegoeUIEastEuropeanSemibold;
+@include SegoeUIEastEuropeanSemilight;
+
+@include SegoeUIGreekLight;
+@include SegoeUIGreekRegular;
+@include SegoeUIGreekSemibold;
+@include SegoeUIGreekSemilight;
+
+@include SegoeUIHebrewLight;
+@include SegoeUIHebrewRegular;
+@include SegoeUIHebrewSemibold;
+@include SegoeUIHebrewSemilight;
+
+@include SegoeUIVietnameseLight;
+@include SegoeUIVietnameseRegular;
+@include SegoeUIVietnameseSemibold;
+@include SegoeUIVietnameseSemilight;
+
+@include SegoeUIWestEuropeanLight;
+@include SegoeUIWestEuropeanRegular;
+@include SegoeUIWestEuropeanSemibold;
+@include SegoeUIWestEuropeanSemilight;
\ No newline at end of file
diff --git a/dist/sass/Fabric.Typography.Language.Overrides.Output.scss b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss
new file mode 100644
index 000000000..66f464b58
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Language.Overrides.Output.scss
@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Language override definitions
+
+@import "./Fabric.Typography.Language.Overrides";
+
+// Generate the override classes for non-distributed fonts.
+@include language-override-system-fonts(ja-JP, $ms-font-stack-japanese);
+@include language-override-system-fonts(ko-KR, $ms-font-stack-korean);
+@include language-override-system-fonts(ch-ZHS, $ms-font-stack-chinese-simplified);
+@include language-override-system-fonts(ch-ZHT, $ms-font-stack-chinese-traditional);
+@include language-override-system-fonts(hi-IN, $ms-font-stack-hindi);
+
+// Generate the override classes for web fonts.
+// Leelawadee
+// th-TH
+@include 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
+@include 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
+@include 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);
+@include 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);
+@include 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
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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);
+@include 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
+@include 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
+@include 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
+@include 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);
\ No newline at end of file
diff --git a/dist/sass/Fabric.Typography.Output.scss b/dist/sass/Fabric.Typography.Output.scss
new file mode 100644
index 000000000..2ef2b0781
--- /dev/null
+++ b/dist/sass/Fabric.Typography.Output.scss
@@ -0,0 +1,379 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Typographic mixins arranged with appropriate size and family combinations.
+@import './Fabric.Typography';
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+.ms-font-su {
+ @include ms-font-su;
+}
+// No touch class for Super
+
+// Extra-Extra-Large
+// Allowed weights: Light, SemiLight
+.ms-font-xxl {
+ @include ms-font-xxl;
+}
+
+// Extra-Large Styles
+// Allowed weights: Light, SemiLight
+.ms-font-xl {
+ @include ms-font-xl;
+}
+
+// Large Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-l {
+ @include ms-font-l;
+}
+
+// Medium Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m-plus {
+ @include ms-font-m-plus;
+}
+
+// Medium Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-m {
+ @include ms-font-m;
+}
+
+// Small Plus Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s-plus {
+ @include ms-font-s-plus;
+}
+
+// Small Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-s {
+ @include ms-font-s;
+}
+
+// XS Styles
+// Allowed weights: SemiLight, Regular, Semibold
+.ms-font-xs {
+ @include ms-font-xs;
+}
+
+// Micro Styles (LIMITED USE)
+// Weights: Semibold
+.ms-font-mi {
+ @include ms-font-mi;
+}
+
+//== Helper classes & mixins
+//
+// Helper mixins to override default type values
+
+// Font weights
+.ms-fontWeight-light,
+.ms-fontWeight-light--hover:hover {
+ @include ms-fontWeight-light;
+}
+
+.ms-fontWeight-semilight,
+.ms-fontWeight-semilight--hover:hover {
+ @include ms-fontWeight-semilight;
+}
+
+.ms-fontWeight-regular,
+.ms-fontWeight-regular--hover:hover {
+ @include ms-fontWeight-regular;
+}
+
+.ms-fontWeight-semibold,
+.ms-fontWeight-semibold--hover:hover {
+ @include ms-fontWeight-semibold;
+}
+
+// Font sizes
+.ms-fontSize-su {
+ @include ms-fontSize-su;
+}
+
+.ms-fontSize-xxl {
+ @include ms-fontSize-xxl;
+}
+
+.ms-fontSize-xl {
+ @include ms-fontSize-xl;
+}
+
+.ms-fontSize-l {
+ @include ms-fontSize-l;
+}
+
+.ms-fontSize-mPlus {
+ @include ms-fontSize-mPlus;
+}
+
+.ms-fontSize-m {
+ @include ms-fontSize-m;
+}
+
+.ms-fontSize-sPlus {
+ @include ms-fontSize-sPlus;
+}
+
+.ms-fontSize-s {
+ @include ms-fontSize-s;
+}
+
+.ms-fontSize-xs {
+ @include ms-fontSize-xs;
+}
+
+.ms-fontSize-mi {
+ @include ms-fontSize-mi;
+}
+
+// Theme colors
+.ms-fontColor-themeDarker,
+.ms-fontColor-themeDarker--hover:hover {
+ @include ms-fontColor-themeDarker;
+}
+
+.ms-fontColor-themeDark,
+.ms-fontColor-themeDark--hover:hover {
+ @include ms-fontColor-themeDark;
+}
+
+.ms-fontColor-themeDarkAlt,
+.ms-fontColor-themeDarkAlt--hover:hover {
+ @include ms-fontColor-themeDarkAlt;
+}
+
+.ms-fontColor-themePrimary,
+.ms-fontColor-themePrimary--hover:hover {
+ @include ms-fontColor-themePrimary;
+}
+
+.ms-fontColor-themeSecondary,
+.ms-fontColor-themeSecondary--hover:hover {
+ @include ms-fontColor-themeSecondary;
+}
+
+.ms-fontColor-themeTertiary,
+.ms-fontColor-themeTertiary--hover:hover {
+ @include ms-fontColor-themeTertiary;
+}
+
+.ms-fontColor-themeLight,
+.ms-fontColor-themeLight--hover:hover {
+ @include ms-fontColor-themeLight;
+}
+
+.ms-fontColor-themeLighter,
+.ms-fontColor-themeLighter--hover:hover {
+ @include ms-fontColor-themeLighter;
+}
+
+.ms-fontColor-themeLighterAlt,
+.ms-fontColor-themeLighterAlt--hover:hover {
+ @include ms-fontColor-themeLighterAlt;
+}
+
+
+// Neutral colors
+.ms-fontColor-black,
+.ms-fontColor-black--hover:hover {
+ @include ms-fontColor-black;
+}
+
+.ms-fontColor-neutralDark,
+.ms-fontColor-neutralDark--hover:hover {
+ @include ms-fontColor-neutralDark;
+}
+
+.ms-fontColor-neutralPrimary,
+.ms-fontColor-neutralPrimary--hover:hover {
+ @include ms-fontColor-neutralPrimary;
+}
+
+.ms-fontColor-neutralPrimaryAlt,
+.ms-fontColor-neutralPrimaryAlt--hover:hover {
+ @include ms-fontColor-neutralPrimaryAlt;
+}
+
+.ms-fontColor-neutralSecondary,
+.ms-fontColor-neutralSecondary--hover:hover {
+ @include ms-fontColor-neutralSecondary;
+}
+
+.ms-fontColor-neutralSecondaryAlt,
+.ms-fontColor-neutralSecondaryAlt--hover:hover {
+ @include ms-fontColor-neutralSecondaryAlt;
+}
+
+.ms-fontColor-neutralTertiary,
+.ms-fontColor-neutralTertiary--hover:hover {
+ @include ms-fontColor-neutralTertiary;
+}
+
+.ms-fontColor-neutralTertiaryAlt,
+.ms-fontColor-neutralTertiaryAlt--hover:hover {
+ @include ms-fontColor-neutralTertiaryAlt;
+}
+
+.ms-fontColor-neutralLight,
+.ms-fontColor-neutralLight--hover:hover {
+ @include ms-fontColor-neutralLight;
+}
+
+.ms-fontColor-neutralLighter,
+.ms-fontColor-neutralLighter--hover:hover {
+ @include ms-fontColor-neutralLighter;
+}
+
+.ms-fontColor-neutralLighterAlt,
+.ms-fontColor-neutralLighterAlt--hover:hover {
+ @include ms-fontColor-neutralLighterAlt;
+}
+
+.ms-fontColor-white,
+.ms-fontColor-white--hover:hover {
+ @include ms-fontColor-white;
+}
+
+// Brand and accent colors
+.ms-fontColor-yellow,
+.ms-fontColor-yellow--hover:hover {
+ @include ms-fontColor-yellow;
+}
+
+.ms-fontColor-yellowLight,
+.ms-fontColor-yellowLight--hover:hover {
+ @include ms-fontColor-yellowLight;
+}
+
+.ms-fontColor-orange,
+.ms-fontColor-orange--hover:hover {
+ @include ms-fontColor-orange;
+}
+
+.ms-fontColor-orangeLight,
+.ms-fontColor-orangeLight--hover:hover {
+ @include ms-fontColor-orangeLight;
+}
+
+.ms-fontColor-orangeLighter,
+.ms-fontColor-orangeLighter--hover:hover {
+ @include ms-fontColor-orangeLighter;
+}
+
+.ms-fontColor-redDark,
+.ms-fontColor-redDark--hover:hover {
+ @include ms-fontColor-redDark;
+}
+
+.ms-fontColor-red,
+.ms-fontColor-red--hover:hover {
+ @include ms-fontColor-red;
+}
+
+.ms-fontColor-magentaDark,
+.ms-fontColor-magentaDark--hover:hover {
+ @include ms-fontColor-magentaDark;
+}
+
+.ms-fontColor-magenta,
+.ms-fontColor-magenta--hover:hover {
+ @include ms-fontColor-magenta;
+}
+
+.ms-fontColor-magentaLight,
+.ms-fontColor-magentaLight--hover:hover {
+ @include ms-fontColor-magentaLight;
+}
+
+.ms-fontColor-purpleDark,
+.ms-fontColor-purpleDark--hover:hover {
+ @include ms-fontColor-purpleDark;
+}
+
+.ms-fontColor-purple,
+.ms-fontColor-purple--hover:hover {
+ @include ms-fontColor-purple;
+}
+
+.ms-fontColor-purpleLight,
+.ms-fontColor-purpleLight--hover:hover {
+ @include ms-fontColor-purpleLight;
+}
+
+.ms-fontColor-blueDark,
+.ms-fontColor-blueDark--hover:hover {
+ @include ms-fontColor-blueDark;
+}
+
+.ms-fontColor-blueMid,
+.ms-fontColor-blueMid--hover:hover {
+ @include ms-fontColor-blueMid;
+}
+
+.ms-fontColor-blue,
+.ms-fontColor-blue--hover:hover {
+ @include ms-fontColor-blue;
+}
+
+.ms-fontColor-blueLight,
+.ms-fontColor-blueLight--hover:hover {
+ @include ms-fontColor-blueLight;
+}
+
+.ms-fontColor-tealDark,
+.ms-fontColor-tealDark--hover:hover {
+ @include ms-fontColor-tealDark;
+}
+
+.ms-fontColor-teal,
+.ms-fontColor-teal--hover:hover {
+ @include ms-fontColor-teal;
+}
+
+.ms-fontColor-tealLight,
+.ms-fontColor-tealLight--hover:hover {
+ @include ms-fontColor-tealLight;
+}
+
+.ms-fontColor-greenDark,
+.ms-fontColor-greenDark--hover:hover {
+ @include ms-fontColor-greenDark;
+}
+
+.ms-fontColor-green,
+.ms-fontColor-green--hover:hover {
+ @include ms-fontColor-green;
+}
+
+.ms-fontColor-greenLight,
+.ms-fontColor-greenLight--hover:hover {
+ @include ms-fontColor-greenLight;
+}
+
+// Message colors
+.ms-fontColor-info,
+.ms-fontColor-info--hover:hover {
+ @include ms-fontColor-info;
+}
+
+.ms-fontColor-success,
+.ms-fontColor-success--hover:hover {
+ @include ms-fontColor-success;
+}
+
+.ms-fontColor-alert,
+.ms-fontColor-alert--hover:hover {
+ @include ms-fontColor-alert;
+}
+
+.ms-fontColor-error,
+.ms-fontColor-error--hover:hover {
+ @include ms-fontColor-error;
+}
diff --git a/dist/sass/Fabric.Utilities.Output.scss b/dist/sass/Fabric.Utilities.Output.scss
new file mode 100644
index 000000000..c34806274
--- /dev/null
+++ b/dist/sass/Fabric.Utilities.Output.scss
@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Utility classes and mixins used throughout Fabric.
+
+@import "Fabric.Utilities";
+
+// The best box is a border box.
+.ms-u-borderBox, .ms-u-borderBox:before, .ms-u-borderBox:after {
+ @include ms-u-borderBox;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+.ms-u-clearfix {
+ @include ms-u-clearfix;
+}
+
+// Basic border-box, margin, and padding reset.
+.ms-u-normalize {
+ @include ms-u-normalize;
+}
diff --git a/dist/sass/Fabric.scss b/dist/sass/Fabric.scss
new file mode 100644
index 000000000..c76c2f066
--- /dev/null
+++ b/dist/sass/Fabric.scss
@@ -0,0 +1,40 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// Core Module Loader
+
+
+// Common utilities
+@import './Fabric.Utilities.Output';
+@import './Fabric.ZIndex.Variables';
+@import './Fabric.Mixins';
+@import "./Fabric.Mixins.RTL";
+
+// Colors
+@import './Fabric.Color.Variables';
+@import './Fabric.Color.Mixins.Output';
+
+// Typography
+@import './Fabric.Typography.Variables';
+@import './Fabric.Typography.Output';
+@import './Fabric.Typography.Fonts.Output';
+@import './Fabric.Typography.Language.Overrides.Output';
+
+// Icons
+@import './Fabric.Icons.Font.Output';
+@import './Fabric.Icons.Output';
+
+// Animations
+@import './Fabric.Animations.Output';
+
+// Responsive
+@import './Fabric.Responsive.Variables';
+@import './Fabric.Responsive.Utilities.Variables';
+@import './Fabric.Responsive.Utilities.Output';
+
+// Grid
+@import './Fabric.Grid.Output';
+
+// Office colors
+@import './Office.Color.Variables';
diff --git a/dist/sass/_Fabric.Animations.RTL.scss b/dist/sass/_Fabric.Animations.RTL.scss
new file mode 100644
index 000000000..c6d1a6190
--- /dev/null
+++ b/dist/sass/_Fabric.Animations.RTL.scss
@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// RTL overrides for Fabric Animations
+
+
+@import 'Fabric.Animations';
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+ @include animationMix((fadeIn, slideLeft10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+ @include animationMix((fadeIn, slideLeft20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+ @include animationMix((fadeIn, slideLeft40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+ @include animationMix((fadeIn, slideRight10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+ @include animationMix((fadeIn, slideRight20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+ @include animationMix((fadeIn, slideRight40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+ @include animationMix((fadeIn, slideRight400), $ms-duration3, $ms-ease1);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
+}
diff --git a/dist/sass/_Fabric.Animations.scss b/dist/sass/_Fabric.Animations.scss
new file mode 100644
index 000000000..5b92983de
--- /dev/null
+++ b/dist/sass/_Fabric.Animations.scss
@@ -0,0 +1,237 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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
+@mixin animationMix($ms-name, $ms-duration, $ms-ease: $ms-ease1, $ms-fillMode: both) {
+ @include animationName($ms-name);
+ @include animationDuration($ms-duration);
+ @include animationTiming($ms-ease);
+ @include animationFillMode($ms-fillMode);
+}
+
+// slideRightIn10
+@mixin ms-u-slideRightIn10 {
+ @include animationMix((fadeIn, slideRightIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn20
+@mixin ms-u-slideRightIn20 {
+ @include animationMix((fadeIn, slideRightIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn40
+@mixin ms-u-slideRightIn40 {
+ @include animationMix((fadeIn, slideRightIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn10
+@mixin ms-u-slideLeftIn10 {
+ @include animationMix((fadeIn, slideLeftIn10), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn20
+@mixin ms-u-slideLeftIn20 {
+ @include animationMix((fadeIn, slideLeftIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn40
+@mixin ms-u-slideLeftIn40 {
+ @include animationMix((fadeIn, slideLeftIn40), $ms-duration3, $ms-ease1);
+}
+
+// slideRightIn400
+@mixin ms-u-slideRightIn400 {
+ @include animationMix((fadeIn, slideRightIn400), $ms-duration3, $ms-ease1);
+}
+
+// slideLeftIn400
+@mixin ms-u-slideLeftIn400 {
+ @include animationMix((fadeIn, slideLeft400), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn20
+@mixin ms-u-slideUpIn20 {
+ @include animationMix((fadeIn, slideUpIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideUpIn10
+@mixin ms-u-slideUpIn10 {
+ @include animationMix((fadeIn, slideUpIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownIn20
+@mixin ms-u-slideDownIn20 {
+ @include animationMix((fadeIn, slideDownIn20), $ms-duration3, $ms-ease1);
+}
+
+// slideDownIn10
+@mixin ms-u-slideDownIn10 {
+ @include animationMix((fadeIn, slideDownIn10), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut40
+@mixin ms-u-slideRightOut40 {
+ @include animationMix((fadeOut, slideRightOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut40
+@mixin ms-u-slideLeftOut40 {
+ @include animationMix((fadeOut, slideLeftOut40), $ms-duration1, $ms-ease2);
+}
+
+// slideRightOut400
+@mixin ms-u-slideRightOut400 {
+ @include animationMix((fadeOut, slideRightOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideLeftOut400
+@mixin ms-u-slideLeftOut400 {
+ @include animationMix((fadeOut, slideLeftOut400), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut20
+@mixin ms-u-slideUpOut20 {
+ @include animationMix((fadeOut, slideUpOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideUpOut10
+@mixin ms-u-slideUpOut10 {
+ @include animationMix((fadeOut, slideUpOut10), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut20
+@mixin ms-u-slideDownOut20 {
+ @include animationMix((fadeOut, slideDownOut20), $ms-duration1, $ms-ease2);
+}
+
+// slideDownOut10
+@mixin ms-u-slideDownOut10 {
+ @include animationMix((fadeOut, slideDownOut10), $ms-duration1, $ms-ease2);
+}
+
+// scaleUpIn100
+@mixin ms-u-scaleUpIn100 {
+ @include animationMix((fadeIn, scaleUp100), $ms-duration3, $ms-ease1);
+}
+
+// scaleDownIn100
+@mixin ms-u-scaleDownIn100 {
+ @include animationMix((fadeIn, scaleDown100), $ms-duration3, $ms-ease1);
+}
+
+// scaleUpOut103
+@mixin ms-u-scaleUpOut103 {
+ @include animationMix((fadeOut, scaleUp103), $ms-duration1, $ms-ease2);
+}
+
+// scaleDownOut98
+@mixin ms-u-scaleDownOut98 {
+ @include animationMix((fadeOut, scaleDown98), $ms-duration1, $ms-ease2);
+}
+
+// fadeIn
+@mixin ms-u-fadeIn400 {
+ -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;
+}
+@mixin ms-u-fadeIn100 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration1;
+ animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeIn200 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration2;
+ animation-duration: $ms-duration2;
+}
+@mixin ms-u-fadeIn500 {
+ @include ms-u-fadeIn400;
+ -webkit-animation-duration: $ms-duration4;
+ animation-duration: $ms-duration4;
+}
+
+// fadeOut
+@mixin ms-u-fadeOut400 {
+ -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;
+}
+@mixin ms-u-fadeOut100 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: 0.1s;
+ animation-duration: 0.1s;
+}
+@mixin ms-u-fadeOut200 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: $ms-duration1;
+ animation-duration: $ms-duration1;
+}
+@mixin ms-u-fadeOut500 {
+ @include ms-u-fadeOut400;
+ -webkit-animation-duration: $ms-duration4;
+ animation-duration: $ms-duration4;
+}
+
+// rotate90deg
+@mixin ms-u-rotate90deg {
+ @include animationMix(rotate90, 0.1s, $ms-ease2);
+}
+
+// rotateN90deg
+@mixin ms-u-rotateN90deg {
+ @include animationMix(rotateN90, 0.1s, $ms-ease2);
+}
+
+// expandCollapse400
+@mixin ms-u-expandCollapse400 {
+ -webkit-transition: height $ms-duration3 $ms-ease2;
+ transition: height $ms-duration3 $ms-ease2;
+}
+
+// expandCollapse200
+@mixin ms-u-expandCollapse200 {
+ -webkit-transition: height $ms-duration1 $ms-ease2;
+ transition: height $ms-duration1 $ms-ease2;
+}
+
+// expandCollapse100
+@mixin ms-u-expandCollapse100 {
+ -webkit-transition: height 0.1s $ms-ease2;
+ transition: height 0.1s $ms-ease2;
+}
+
+// delay100
+@mixin ms-u-delay100 {
+ -webkit-animation-delay: $ms-duration1;
+ animation-delay: $ms-duration1;
+}
+
+// delay200
+@mixin ms-u-delay200 {
+ -webkit-animation-delay: 0.267s;
+ animation-delay: 0.267s;
+}
diff --git a/dist/sass/_Fabric.Color.Mixins.scss b/dist/sass/_Fabric.Color.Mixins.scss
new file mode 100644
index 000000000..dcc1b42cc
--- /dev/null
+++ b/dist/sass/_Fabric.Color.Mixins.scss
@@ -0,0 +1,414 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Color Mixins
+
+
+//== Background colors
+//
+// Theme colors
+@mixin ms-bgColor-themeDark {
+ background-color: $ms-color-themeDark;
+}
+
+@mixin ms-bgColor-themeDarkAlt {
+ background-color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-bgColor-themeDarker {
+ background-color: $ms-color-themeDarker;
+}
+
+@mixin ms-bgColor-themePrimary {
+ background-color: $ms-color-themePrimary;
+}
+
+@mixin ms-bgColor-themeSecondary {
+ background-color: $ms-color-themeSecondary;
+}
+
+@mixin ms-bgColor-themeTertiary {
+ background-color: $ms-color-themeTertiary;
+}
+
+@mixin ms-bgColor-themeLight {
+ background-color: $ms-color-themeLight;
+}
+
+@mixin ms-bgColor-themeLighter {
+ background-color: $ms-color-themeLighter;
+}
+
+@mixin ms-bgColor-themeLighterAlt {
+ background-color: $ms-color-themeLighterAlt;
+}
+
+// Neutral colors
+@mixin ms-bgColor-black {
+ background-color: $ms-color-black;
+}
+
+@mixin ms-bgColor-neutralDark {
+ background-color: $ms-color-neutralDark;
+}
+
+@mixin ms-bgColor-neutralPrimary {
+ background-color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-bgColor-neutralPrimaryAlt {
+ background-color: $ms-color-neutralPrimaryAlt;
+}
+
+@mixin ms-bgColor-neutralSecondary {
+ background-color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-bgColor-neutralSecondaryAlt {
+ background-color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-bgColor-neutralTertiary {
+ background-color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-bgColor-neutralTertiaryAlt {
+ background-color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-bgColor-neutralLight {
+ background-color: $ms-color-neutralLight;
+}
+
+@mixin ms-bgColor-neutralLighter {
+ background-color: $ms-color-neutralLighter;
+}
+
+@mixin ms-bgColor-neutralLighterAlt {
+ background-color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-bgColor-white {
+ background-color: $ms-color-white;
+}
+
+
+// Brand and accent colors
+@mixin ms-bgColor-yellow {
+ background-color: $ms-color-yellow;
+}
+
+@mixin ms-bgColor-yellowLight {
+ background-color: $ms-color-yellowLight;
+}
+
+@mixin ms-bgColor-orange {
+ background-color: $ms-color-orange;
+}
+
+@mixin ms-bgColor-orangeLight {
+ background-color: $ms-color-orangeLight;
+}
+
+@mixin ms-bgColor-orangeLighter {
+ background-color: $ms-color-orangeLighter;
+}
+
+@mixin ms-bgColor-redDark {
+ background-color: $ms-color-redDark;
+}
+
+@mixin ms-bgColor-red {
+ background-color: $ms-color-red;
+}
+
+@mixin ms-bgColor-magentaDark {
+ background-color: $ms-color-magentaDark;
+}
+
+@mixin ms-bgColor-magenta {
+ background-color: $ms-color-magenta;
+}
+
+@mixin ms-bgColor-magentaLight {
+ background-color: $ms-color-magentaLight;
+}
+
+@mixin ms-bgColor-purpleDark {
+ background-color: $ms-color-purpleDark;
+}
+
+@mixin ms-bgColor-purple {
+ background-color: $ms-color-purple;
+}
+
+@mixin ms-bgColor-purpleLight {
+ background-color: $ms-color-purpleLight;
+}
+
+@mixin ms-bgColor-blueDark {
+ background-color: $ms-color-blueDark;
+}
+
+@mixin ms-bgColor-blueMid {
+ background-color: $ms-color-blueMid;
+}
+
+@mixin ms-bgColor-blue {
+ background-color: $ms-color-blue;
+}
+
+@mixin ms-bgColor-blueLight {
+ background-color: $ms-color-blueLight;
+}
+
+@mixin ms-bgColor-tealDark {
+ background-color: $ms-color-tealDark;
+}
+
+@mixin ms-bgColor-teal {
+ background-color: $ms-color-teal;
+}
+
+@mixin ms-bgColor-tealLight {
+ background-color: $ms-color-tealLight;
+}
+
+@mixin ms-bgColor-greenDark {
+ background-color: $ms-color-greenDark;
+}
+
+@mixin ms-bgColor-green {
+ background-color: $ms-color-green;
+}
+
+@mixin ms-bgColor-greenLight {
+ background-color: $ms-color-greenLight;
+}
+
+// Message colors
+@mixin ms-bgColor-info {
+ background-color: $ms-color-infoBackground;
+}
+
+@mixin ms-bgColor-success {
+ background-color: $ms-color-successBackground;
+}
+
+@mixin ms-bgColor-alert {
+ background-color: $ms-color-alertBackground;
+}
+
+@mixin ms-bgColor-error {
+ background-color: $ms-color-errorBackground;
+}
+
+
+//== Border colors
+//
+
+// Theme colors
+@mixin ms-borderColor-themeDark {
+ border-color: $ms-color-themeDark;
+}
+
+@mixin ms-borderColor-themeDarkAlt {
+ border-color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-borderColor-themeDarker {
+ border-color: $ms-color-themeDarker;
+}
+
+@mixin ms-borderColor-themePrimary {
+ border-color: $ms-color-themePrimary;
+}
+
+@mixin ms-borderColor-themeSecondary {
+ border-color: $ms-color-themeSecondary;
+}
+
+@mixin ms-borderColor-themeTertiary {
+ border-color: $ms-color-themeTertiary;
+}
+
+@mixin ms-borderColor-themeLight {
+ border-color: $ms-color-themeLight;
+}
+
+@mixin ms-borderColor-themeLighter {
+ border-color: $ms-color-themeLighter;
+}
+
+@mixin ms-borderColor-themeLighterAlt {
+ border-color: $ms-color-themeLighterAlt;
+}
+
+
+// Neutral colors
+@mixin ms-borderColor-black {
+ border-color: $ms-color-black;
+}
+
+@mixin ms-borderColor-neutralDark {
+ border-color: $ms-color-neutralDark;
+}
+
+@mixin ms-borderColor-neutralPrimary {
+ border-color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-borderColor-neutralPrimaryAlt {
+ border-color: $ms-color-neutralPrimaryAlt;
+}
+
+@mixin ms-borderColor-neutralSecondary {
+ border-color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-borderColor-neutralSecondaryAlt {
+ border-color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-borderColor-neutralTertiary {
+ border-color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-borderColor-neutralTertiaryAlt {
+ border-color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-borderColor-neutralLight {
+ border-color: $ms-color-neutralLight;
+}
+
+@mixin ms-borderColor-neutralLighter {
+ border-color: $ms-color-neutralLighter;
+}
+
+@mixin ms-borderColor-neutralLighterAlt {
+ border-color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-borderColor-white {
+ border-color: $ms-color-white;
+}
+
+// Brand and accent colors
+@mixin ms-borderColor-yellow {
+ border-color: $ms-color-yellow;
+}
+
+@mixin ms-borderColor-yellowLight {
+ border-color: $ms-color-yellowLight;
+}
+
+@mixin ms-borderColor-orange {
+ border-color: $ms-color-orange;
+}
+
+@mixin ms-borderColor-orangeLight {
+ border-color: $ms-color-orangeLight;
+}
+
+@mixin ms-borderColor-orangeLighter {
+ border-color: $ms-color-orangeLighter;
+}
+
+@mixin ms-borderColor-redDark {
+ border-color: $ms-color-redDark;
+}
+
+@mixin ms-borderColor-red {
+ border-color: $ms-color-red;
+}
+
+@mixin ms-borderColor-magentaDark {
+ border-color: $ms-color-magentaDark;
+}
+
+@mixin ms-borderColor-magenta {
+ border-color: $ms-color-magenta;
+}
+
+@mixin ms-borderColor-magentaLight {
+ border-color: $ms-color-magentaLight;
+}
+
+@mixin ms-borderColor-purpleDark {
+ border-color: $ms-color-purpleDark;
+}
+
+@mixin ms-borderColor-purple {
+ border-color: $ms-color-purple;
+}
+
+@mixin ms-borderColor-purpleLight {
+ border-color: $ms-color-purpleLight;
+}
+
+@mixin ms-borderColor-blueDark {
+ border-color: $ms-color-blueDark;
+}
+
+@mixin ms-borderColor-blueMid {
+ border-color: $ms-color-blueMid;
+}
+
+@mixin ms-borderColor-blue {
+ border-color: $ms-color-blue;
+}
+
+@mixin ms-borderColor-blueLight {
+ border-color: $ms-color-blueLight;
+}
+
+@mixin ms-borderColor-tealDark {
+ border-color: $ms-color-tealDark;
+}
+
+@mixin ms-borderColor-teal {
+ border-color: $ms-color-teal;
+}
+
+@mixin ms-borderColor-tealLight {
+ border-color: $ms-color-tealLight;
+}
+
+@mixin ms-borderColor-greenDark {
+ border-color: $ms-color-greenDark;
+}
+
+@mixin ms-borderColor-green {
+ border-color: $ms-color-green;
+}
+
+@mixin ms-borderColor-greenLight {
+ border-color: $ms-color-greenLight;
+}
+
+
+// Message colors
+@mixin ms-borderColor-info {
+ border-color: $ms-color-info;
+}
+
+@mixin ms-borderColor-success {
+ border-color: $ms-color-success;
+}
+
+@mixin ms-borderColor-alert {
+ border-color: $ms-color-alert;
+}
+
+@mixin ms-borderColor-error {
+ border-color: $ms-color-error;
+}
+
+
+// Individual borders, by request
+@mixin ms-borderColorTop-themePrimary {
+ border-top-color: $ms-color-themePrimary;
+}
diff --git a/dist/sass/_Fabric.Color.Variables.scss b/dist/sass/_Fabric.Color.Variables.scss
new file mode 100644
index 000000000..3110c6dd4
--- /dev/null
+++ b/dist/sass/_Fabric.Color.Variables.scss
@@ -0,0 +1,90 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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-neutralPrimaryAlt: #3C3C3C;
+$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: #ea4300;
+$ms-color-orangeLighter: #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;
+
+
+//== Message colors
+//
+$ms-color-info: $ms-color-green;
+$ms-color-infoBackground: $ms-color-neutralLighter;
+$ms-color-success: $ms-color-green;
+$ms-color-successBackground: #dff6dd;
+$ms-color-alert: $ms-color-orange;
+$ms-color-alertBackground: #fed9cc;
+$ms-color-error: $ms-color-redDark;
+$ms-color-errorBackground: #fde7e9;
+
+
+//== High contrast colors
+//
+$ms-color-contrastBlackDisabled: #00ff00;
+$ms-color-contrastWhiteDisabled: #600000;
+$ms-color-contrastBlackSelected: #1AEBFF;
+$ms-color-contrastWhiteSelected: #37006E;
+$ms-color-contrastBlackLink: #8080ff;
+$ms-color-contrastWhiteLink: #00009F;
diff --git a/dist/sass/_Fabric.Common.scss b/dist/sass/_Fabric.Common.scss
new file mode 100644
index 000000000..73f289f58
--- /dev/null
+++ b/dist/sass/_Fabric.Common.scss
@@ -0,0 +1,15 @@
+@import "./Fabric.Animations";
+@import "./Fabric.Color.Mixins";
+@import "./Fabric.Color.Variables";
+@import "./Fabric.Grid";
+@import "./Fabric.Icons";
+@import "./Fabric.Mixins";
+@import "./Fabric.Mixins.RTL";
+@import './Fabric.Responsive.Utilities.Variables';
+@import "./Fabric.Responsive.Variables";
+@import "./Fabric.Typography";
+@import "./Fabric.Typography.Fonts";
+@import "./Fabric.Typography.Variables";
+@import "./Fabric.Utilities";
+@import "./Fabric.ZIndex.Variables";
+@import "./Office.Color.Variables";
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Grid.scss b/dist/sass/_Fabric.Grid.scss
new file mode 100644
index 000000000..14430d2d8
--- /dev/null
+++ b/dist/sass/_Fabric.Grid.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fluid 12-column grids for small, medium, and large devices
+
+
+//== Grid container (same for all sizes)
+//
+@mixin ms-Grid {
+ @include ms-u-borderBox;
+ @include ms-u-clearfix;
+ padding: 0 8px;
+}
+
+//== Grid rows (pull first and last column out)
+//
+@mixin ms-Grid-row {
+ margin: 0 -8px;
+ @include ms-u-borderBox;
+ @include ms-u-clearfix;
+}
+
+//== Grid cells
+//
+@mixin ms-Grid-col {
+ position: relative;
+ min-height: 1px;
+ padding-left: 8px;
+ padding-right: 8px;
+ @include ms-u-borderBox;
+ float: left;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Icons.scss b/dist/sass/_Fabric.Icons.scss
new file mode 100644
index 000000000..929059d65
--- /dev/null
+++ b/dist/sass/_Fabric.Icons.scss
@@ -0,0 +1,397 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Icon definitions
+
+@mixin 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.
+@mixin ms-Icon--circleEmpty { content: '\e000'; } // ''
+@mixin ms-Icon--circleFill { content: '\e001'; } // ''
+@mixin ms-Icon--placeholder { content: '\e002'; } // ''
+@mixin ms-Icon--star { content: '\e003'; } // ''
+@mixin ms-Icon--plus { content: '\e004'; } // ''
+@mixin ms-Icon--minus { content: '\e005'; } // ''
+@mixin ms-Icon--question { content: '\e006'; } // ''
+@mixin ms-Icon--exclamation { content: '\e007'; } // ''
+@mixin ms-Icon--person { content: '\e008'; } // ''
+@mixin ms-Icon--mail { content: '\e009'; } // ''
+@mixin ms-Icon--infoCircle { content: '\e00a'; } // ''
+@mixin ms-Icon--alert { content: '\e00b'; } // ''
+@mixin ms-Icon--xCircle { content: '\e00c'; } // ''
+@mixin ms-Icon--mailOpen { content: '\e00d'; } // ''
+@mixin ms-Icon--people { content: '\e00e'; } // ''
+@mixin ms-Icon--bell { content: '\e010'; } // ''
+@mixin ms-Icon--calendar { content: '\e011'; } // ''
+@mixin ms-Icon--scheduling { content: '\e012'; } // ''
+@mixin ms-Icon--event { content: '\e013'; } // ''
+@mixin ms-Icon--folder { content: '\e014'; } // ''
+@mixin ms-Icon--documents { content: '\e015'; } // ''
+@mixin ms-Icon--onedrive { content: '\e016'; } // ''
+@mixin ms-Icon--chat { content: '\e017'; } // ''
+@mixin ms-Icon--sites { content: '\e018'; } // ''
+@mixin ms-Icon--listBullets { content: '\e019'; } // ''
+@mixin ms-Icon--calendarWeek { content: '\e01a'; } // ''
+@mixin ms-Icon--calendarWorkWeek { content: '\e01b'; } // ''
+@mixin ms-Icon--calendarDay { content: '\e01c'; } // ''
+@mixin ms-Icon--folderMove { content: '\e01d'; } // ''
+@mixin ms-Icon--panel { content: '\e01e'; } // ''
+@mixin ms-Icon--popout { content: '\e01f'; } // ''
+@mixin ms-Icon--menu { content: '\e020'; } // ''
+@mixin ms-Icon--home { content: '\e021'; } // ''
+@mixin ms-Icon--favorites { content: '\e022'; } // ''
+@mixin ms-Icon--phone { content: '\e023'; } // ''
+@mixin ms-Icon--mailSend { content: '\e024'; } // ''
+@mixin ms-Icon--save { content: '\e025'; } // ''
+@mixin ms-Icon--trash { content: '\e026'; } // ''
+@mixin ms-Icon--pencil { content: '\e027'; } // ''
+@mixin ms-Icon--flag { content: '\e028'; } // ''
+@mixin ms-Icon--reply { content: '\e029'; } // ''
+@mixin ms-Icon--miniatures { content: '\e02a'; } // ''
+@mixin ms-Icon--voicemail { content: '\e02b'; } // ''
+@mixin ms-Icon--play { content: '\e02c'; } // ''
+@mixin ms-Icon--pause { content: '\e02d'; } // ''
+@mixin ms-Icon--onlineAdd { content: '\e02e'; } // ''
+@mixin ms-Icon--onlineJoin { content: '\e02f'; } // ''
+@mixin ms-Icon--replyAll { content: '\e030'; } // ''
+@mixin ms-Icon--attachment { content: '\e031'; } // ''
+@mixin ms-Icon--drm { content: '\e032'; } // ''
+@mixin ms-Icon--pinDown { content: '\e033'; } // ''
+@mixin ms-Icon--refresh { content: '\e034'; } // ''
+@mixin ms-Icon--gear { content: '\e035'; } // ''
+@mixin ms-Icon--smiley { content: '\e036'; } // ''
+@mixin ms-Icon--info { content: '\e037'; } // ''
+@mixin ms-Icon--lock { content: '\e038'; } // ''
+@mixin ms-Icon--search { content: '\e039'; } // ''
+@mixin ms-Icon--questionReverse { content: '\e03a'; } // ''
+@mixin ms-Icon--notRecurring { content: '\e03b'; } // ''
+@mixin ms-Icon--tasks { content: '\e040'; } // ''
+@mixin ms-Icon--check { content: '\e041'; } // ''
+@mixin ms-Icon--x { content: '\e042'; } // ''
+@mixin ms-Icon--ellipsis { content: '\e045'; } // ''
+@mixin ms-Icon--dot { content: '\e046'; } // ''
+@mixin ms-Icon--arrowUp { content: '\e047'; } // ''
+@mixin ms-Icon--arrowDown { content: '\e048'; } // ''
+@mixin ms-Icon--arrowLeft { content: '\e049'; } // ''
+@mixin ms-Icon--arrowRight { content: '\e04a'; } // ''
+@mixin ms-Icon--download { content: '\e04b'; } // ''
+@mixin ms-Icon--directions { content: '\e04c'; } // ''
+@mixin ms-Icon--microphone { content: '\e04f'; } // ''
+@mixin ms-Icon--caretUp { content: '\e051'; } // ''
+@mixin ms-Icon--caretDown { content: '\e052'; } // ''
+@mixin ms-Icon--caretLeft { content: '\e053'; } // ''
+@mixin ms-Icon--caretRight { content: '\e054'; } // ''
+@mixin ms-Icon--caretUpLeft { content: '\e05a'; } // ''
+@mixin ms-Icon--caretUpRight { content: '\e05b'; } // ''
+@mixin ms-Icon--caretDownRight { content: '\e05c'; } // ''
+@mixin ms-Icon--caretDownLeft { content: '\e05d'; } // ''
+@mixin ms-Icon--note { content: '\e06a'; } // ''
+@mixin ms-Icon--noteReply { content: '\e06b'; } // ''
+@mixin ms-Icon--noteForward { content: '\e06c'; } // ''
+@mixin ms-Icon--key { content: '\e06f'; } // ''
+@mixin ms-Icon--tile { content: '\e070'; } // ''
+@mixin ms-Icon--taskRecurring { content: '\e071'; } // ''
+@mixin ms-Icon--starEmpty { content: '\e073'; } // ''
+@mixin ms-Icon--upload { content: '\e076'; } // ''
+@mixin ms-Icon--wrench { content: '\e077'; } // ''
+@mixin ms-Icon--share { content: '\e078'; } // ''
+@mixin ms-Icon--documentReply { content: '\e079'; } // ''
+@mixin ms-Icon--documentForward { content: '\e07a'; } // ''
+@mixin ms-Icon--partner { content: '\e080'; } // ''
+@mixin ms-Icon--reactivate { content: '\e084'; } // ''
+@mixin ms-Icon--sort { content: '\e085'; } // ''
+@mixin ms-Icon--personAdd { content: '\e086'; } // ''
+@mixin ms-Icon--chevronUp { content: '\e087'; } // ''
+@mixin ms-Icon--chevronDown { content: '\e088'; } // ''
+@mixin ms-Icon--chevronLeft { content: '\e089'; } // ''
+@mixin ms-Icon--chevronRight { content: '\e08a'; } // ''
+@mixin ms-Icon--peopleAdd { content: '\e08c'; } // ''
+@mixin ms-Icon--newsfeed { content: '\e08d'; } // ''
+@mixin ms-Icon--notebook { content: '\e08e'; } // ''
+@mixin ms-Icon--link { content: '\e08f'; } // ''
+@mixin ms-Icon--chevronsUp { content: '\e090'; } // ''
+@mixin ms-Icon--chevronsDown { content: '\e091'; } // ''
+@mixin ms-Icon--chevronsLeft { content: '\e092'; } // ''
+@mixin ms-Icon--chevronsRight { content: '\e093'; } // ''
+@mixin ms-Icon--clutter { content: '\e09a'; } // ''
+@mixin ms-Icon--subscribe { content: '\e09c'; } // ''
+@mixin ms-Icon--unsubscribe { content: '\e09d'; } // ''
+@mixin ms-Icon--personRemove { content: '\e09e'; } // ''
+@mixin ms-Icon--receiptForward { content: '\e0a0'; } // ''
+@mixin ms-Icon--receiptReply { content: '\e0a1'; } // ''
+@mixin ms-Icon--receiptCheck { content: '\e0a2'; } // ''
+@mixin ms-Icon--peopleRemove { content: '\e0a3'; } // ''
+@mixin ms-Icon--merge { content: '\e0a4'; } // ''
+@mixin ms-Icon--split { content: '\e0a5'; } // ''
+@mixin ms-Icon--eventCancel { content: '\e0a6'; } // ''
+@mixin ms-Icon--eventShare { content: '\e0a7'; } // ''
+@mixin ms-Icon--today { content: '\e0a9'; } // ''
+@mixin ms-Icon--oofReply { content: '\e0aa'; } // ''
+@mixin ms-Icon--voicemailReply { content: '\e0ac'; } // ''
+@mixin ms-Icon--voicemailForward { content: '\e0ad'; } // ''
+@mixin ms-Icon--ribbon { content: '\e0af'; } // ''
+@mixin ms-Icon--contact { content: '\e0b0'; } // ''
+@mixin ms-Icon--eye { content: '\e0b1'; } // ''
+@mixin ms-Icon--glasses { content: '\e0b2'; } // ''
+@mixin ms-Icon--print { content: '\e100'; } // ''
+@mixin ms-Icon--room { content: '\e101'; } // ''
+@mixin ms-Icon--post { content: '\e102'; } // ''
+@mixin ms-Icon--toggle { content: '\e103'; } // ''
+@mixin ms-Icon--touch { content: '\e104'; } // ''
+@mixin ms-Icon--clock { content: '\e105'; } // ''
+@mixin ms-Icon--fax { content: '\e106'; } // ''
+@mixin ms-Icon--lightning { content: '\e110'; } // ''
+@mixin ms-Icon--dialpad { content: '\e111'; } // ''
+@mixin ms-Icon--phoneTransfer { content: '\e112'; } // ''
+@mixin ms-Icon--phoneAdd { content: '\e113'; } // ''
+@mixin ms-Icon--late { content: '\e114'; } // ''
+@mixin ms-Icon--chatAdd { content: '\e115'; } // ''
+@mixin ms-Icon--conflict { content: '\e116'; } // ''
+@mixin ms-Icon--navigate { content: '\e117'; } // ''
+@mixin ms-Icon--camera { content: '\e119'; } // ''
+@mixin ms-Icon--filter { content: '\e11a'; } // ''
+@mixin ms-Icon--fullscreen { content: '\e11b'; } // ''
+@mixin ms-Icon--new { content: '\e11c'; } // ''
+@mixin ms-Icon--mailEmpty { content: '\e11d'; } // ''
+@mixin ms-Icon--editBox { content: '\e11e'; } // ''
+@mixin ms-Icon--waffle { content: '\e11f'; } // ''
+@mixin ms-Icon--work { content: '\e120'; } // ''
+@mixin ms-Icon--eventRecurring { content: '\e121'; } // ''
+@mixin ms-Icon--cart { content: '\e122'; } // ''
+@mixin ms-Icon--socialListening { content: '\e123'; } // ''
+@mixin ms-Icon--mapMarker { content: '\e124'; } // ''
+@mixin ms-Icon--org { content: '\e125'; } // ''
+@mixin ms-Icon--replyAlt { content: '\e150'; } // ''
+@mixin ms-Icon--replyAllAlt { content: '\e152'; } // ''
+@mixin ms-Icon--eventInfo { content: '\e154'; } // ''
+@mixin ms-Icon--group { content: '\e155'; } // ''
+@mixin ms-Icon--money { content: '\e161'; } // ''
+@mixin ms-Icon--graph { content: '\e162'; } // ''
+@mixin ms-Icon--noteEdit { content: '\e163'; } // ''
+@mixin ms-Icon--dashboard { content: '\e164'; } // ''
+@mixin ms-Icon--mailEdit { content: '\e165'; } // ''
+@mixin ms-Icon--pinLeft { content: '\e167'; } // ''
+@mixin ms-Icon--heart { content: '\e16a'; } // ''
+@mixin ms-Icon--heartEmpty { content: '\e16b'; } // ''
+@mixin ms-Icon--picture { content: '\e16c'; } // ''
+@mixin ms-Icon--cake { content: '\e16d'; } // ''
+@mixin ms-Icon--books { content: '\e16e'; } // ''
+@mixin ms-Icon--chart { content: '\e16f'; } // ''
+@mixin ms-Icon--video { content: '\e170'; } // ''
+@mixin ms-Icon--soccer { content: '\e171'; } // ''
+@mixin ms-Icon--meal { content: '\e172'; } // ''
+@mixin ms-Icon--balloon { content: '\e173'; } // ''
+@mixin ms-Icon--cat { content: '\e174'; } // ''
+@mixin ms-Icon--dog { content: '\e175'; } // ''
+@mixin ms-Icon--bag { content: '\e176'; } // ''
+@mixin ms-Icon--music { content: '\e177'; } // ''
+@mixin ms-Icon--stopwatch { content: '\e178'; } // ''
+@mixin ms-Icon--coffee { content: '\e179'; } // ''
+@mixin ms-Icon--briefcase { content: '\e17a'; } // ''
+@mixin ms-Icon--pill { content: '\e17b'; } // ''
+@mixin ms-Icon--trophy { content: '\e17c'; } // ''
+@mixin ms-Icon--firstAid { content: '\e17d'; } // ''
+@mixin ms-Icon--plane { content: '\e17e'; } // ''
+@mixin ms-Icon--page { content: '\e17f'; } // ''
+@mixin ms-Icon--car { content: '\e180'; } // ''
+@mixin ms-Icon--dogAlt { content: '\e181'; } // ''
+@mixin ms-Icon--document { content: '\e182'; } // ''
+@mixin ms-Icon--metadata { content: '\e183'; } // ''
+@mixin ms-Icon--pointItem { content: '\e184'; } // ''
+@mixin ms-Icon--text { content: '\e185'; } // ''
+@mixin ms-Icon--fieldText { content: '\e186'; } // ''
+@mixin ms-Icon--fieldNumber { content: '\e187'; } // ''
+@mixin ms-Icon--dropdown { content: '\e188'; } // ''
+@mixin ms-Icon--radioButton { content: '\e189'; } // ''
+@mixin ms-Icon--checkbox { content: '\e18a'; } // ''
+@mixin ms-Icon--story { content: '\e18b'; } // ''
+@mixin ms-Icon--bold { content: '\e18c'; } // ''
+@mixin ms-Icon--italic { content: '\e18d'; } // ''
+@mixin ms-Icon--underline { content: '\e18e'; } // ''
+@mixin ms-Icon--quote { content: '\e18f'; } // ''
+@mixin ms-Icon--styleRemove { content: '\e190'; } // ''
+@mixin ms-Icon--pictureAdd { content: '\e191'; } // ''
+@mixin ms-Icon--pictureRemove { content: '\e192'; } // ''
+@mixin ms-Icon--desktop { content: '\e193'; } // ''
+@mixin ms-Icon--tablet { content: '\e194'; } // ''
+@mixin ms-Icon--mobile { content: '\e195'; } // ''
+@mixin ms-Icon--table { content: '\e196'; } // ''
+@mixin ms-Icon--hide { content: '\e197'; } // ''
+@mixin ms-Icon--shield { content: '\e198'; } // ''
+@mixin ms-Icon--header { content: '\e19a'; } // ''
+@mixin ms-Icon--paint { content: '\e19b'; } // ''
+@mixin ms-Icon--support { content: '\e19c'; } // ''
+@mixin ms-Icon--settings { content: '\e19d'; } // ''
+@mixin ms-Icon--creditCard { content: '\e19e'; } // ''
+@mixin ms-Icon--reload { content: '\e19f'; } // ''
+@mixin ms-Icon--peopleSecurity { content: '\e200'; } // ''
+@mixin ms-Icon--fieldTextBox { content: '\e203'; } // ''
+@mixin ms-Icon--multiChoice { content: '\e204'; } // ''
+@mixin ms-Icon--fieldMail { content: '\e205'; } // ''
+@mixin ms-Icon--contactForm { content: '\e206'; } // ''
+@mixin ms-Icon--circleHalfFilled { content: '\e207'; } // ''
+@mixin ms-Icon--documentPDF { content: '\e208'; } // ''
+@mixin ms-Icon--bookmark { content: '\e209'; } // ''
+@mixin ms-Icon--circleUnfilled { content: '\e20b'; } // ''
+@mixin ms-Icon--circleFilled { content: '\e20c'; } // ''
+@mixin ms-Icon--textBox { content: '\e20e'; } // ''
+@mixin ms-Icon--drop { content: '\e20f'; } // ''
+@mixin ms-Icon--sun { content: '\e210'; } // ''
+@mixin ms-Icon--lifesaver { content: '\e211'; } // ''
+@mixin ms-Icon--lifesaverLock { content: '\e212'; } // ''
+@mixin ms-Icon--mailUnread { content: '\e213'; } // ''
+@mixin ms-Icon--mailRead { content: '\e214'; } // ''
+@mixin ms-Icon--inboxCheck { content: '\e215'; } // ''
+@mixin ms-Icon--folderSearch { content: '\e216'; } // ''
+@mixin ms-Icon--collapse { content: '\e217'; } // ''
+@mixin ms-Icon--expand { content: '\e218'; } // ''
+@mixin ms-Icon--ascending { content: '\e219'; } // ''
+@mixin ms-Icon--descending { content: '\e21a'; } // ''
+@mixin ms-Icon--filterClear { content: '\e21b'; } // ''
+@mixin ms-Icon--checkboxEmpty { content: '\e21c'; } // ''
+@mixin ms-Icon--checkboxMixed { content: '\e21d'; } // ''
+@mixin ms-Icon--boards { content: '\e21e'; } // ''
+@mixin ms-Icon--checkboxCheck { content: '\e21f'; } // ''
+@mixin ms-Icon--frowny { content: '\e220'; } // ''
+@mixin ms-Icon--lightBulb { content: '\e221'; } // ''
+@mixin ms-Icon--globe { content: '\e222'; } // ''
+@mixin ms-Icon--deviceWipe { content: '\e223'; } // ''
+@mixin ms-Icon--listCheck { content: '\e226'; } // ''
+@mixin ms-Icon--listGroup { content: '\e227'; } // ''
+@mixin ms-Icon--timeline { content: '\e228'; } // ''
+@mixin ms-Icon--fontIncrease { content: '\e229'; } // ''
+@mixin ms-Icon--fontDecrease { content: '\e22a'; } // ''
+@mixin ms-Icon--fontColor { content: '\e22b'; } // ''
+@mixin ms-Icon--mailCheck { content: '\e22c'; } // ''
+@mixin ms-Icon--mailDown { content: '\e22d'; } // ''
+@mixin ms-Icon--listCheckbox { content: '\e22e'; } // ''
+@mixin ms-Icon--sunAdd { content: '\e22f'; } // ''
+@mixin ms-Icon--sunQuestion { content: '\e230'; } // ''
+@mixin ms-Icon--chevronThinUp { content: '\e231'; } // ''
+@mixin ms-Icon--chevronThinDown { content: '\e232'; } // ''
+@mixin ms-Icon--chevronThinLeft { content: '\e233'; } // ''
+@mixin ms-Icon--chevronThinRight { content: '\e234'; } // ''
+@mixin ms-Icon--chevronThickUp { content: '\e235'; } // ''
+@mixin ms-Icon--chevronThickDown { content: '\e236'; } // ''
+@mixin ms-Icon--chevronThickLeft { content: '\e237'; } // ''
+@mixin ms-Icon--chevronThickRight { content: '\e238'; } // ''
+@mixin ms-Icon--linkRemove { content: '\e239'; } // ''
+@mixin ms-Icon--alertOutline { content: '\e23b'; } // ''
+@mixin ms-Icon--documentLandscape { content: '\e23c'; } // ''
+@mixin ms-Icon--documentAdd { content: '\e23d'; } // ''
+@mixin ms-Icon--toggleMiddle { content: '\e23e'; } // ''
+@mixin ms-Icon--embed { content: '\e23f'; } // ''
+@mixin ms-Icon--listNumbered { content: '\e240'; } // ''
+@mixin ms-Icon--peopleCheck { content: '\e242'; } // ''
+@mixin ms-Icon--caretUpOutline { content: '\e243'; } // ''
+@mixin ms-Icon--caretDownOutline { content: '\e244'; } // ''
+@mixin ms-Icon--caretLeftOutline { content: '\e245'; } // ''
+@mixin ms-Icon--caretRightOutline { content: '\e246'; } // ''
+@mixin ms-Icon--mailSync { content: '\e248'; } // ''
+@mixin ms-Icon--mailError { content: '\e249'; } // ''
+@mixin ms-Icon--mailPause { content: '\e24a'; } // ''
+@mixin ms-Icon--peopleSync { content: '\e24b'; } // ''
+@mixin ms-Icon--peopleError { content: '\e24c'; } // ''
+@mixin ms-Icon--peoplePause { content: '\e24d'; } // ''
+@mixin ms-Icon--circleBall { content: '\e24e'; } // ''
+@mixin ms-Icon--circleBalloons { content: '\e24f'; } // ''
+@mixin ms-Icon--circleCar { content: '\e250'; } // ''
+@mixin ms-Icon--circleCat { content: '\e251'; } // ''
+@mixin ms-Icon--circleCoffee { content: '\e252'; } // ''
+@mixin ms-Icon--circleDog { content: '\e253'; } // ''
+@mixin ms-Icon--circleLightning { content: '\e254'; } // ''
+@mixin ms-Icon--circlePill { content: '\e255'; } // ''
+@mixin ms-Icon--circlePlane { content: '\e256'; } // ''
+@mixin ms-Icon--circlePoodle { content: '\e257'; } // ''
+@mixin ms-Icon--checkPeople { content: '\e259'; } // ''
+@mixin ms-Icon--documentSearch { content: '\e25a'; } // ''
+@mixin ms-Icon--sortLines { content: '\e25c'; } // ''
+@mixin ms-Icon--calendarPublic { content: '\e25d'; } // ''
+@mixin ms-Icon--contactPublic { content: '\e25e'; } // ''
+@mixin ms-Icon--classNotebook { content: '\e25f'; } // ''
+@mixin ms-Icon--triangleUp { content: '\e260'; } // ''
+@mixin ms-Icon--triangleRight { content: '\e261'; } // ''
+@mixin ms-Icon--triangleDown { content: '\e262'; } // ''
+@mixin ms-Icon--triangleLeft { content: '\e263'; } // ''
+@mixin ms-Icon--triangleEmptyUp { content: '\e264'; } // ''
+@mixin ms-Icon--triangleEmptyRight { content: '\e265'; } // ''
+@mixin ms-Icon--triangleEmptyDown { content: '\e266'; } // ''
+@mixin ms-Icon--triangleEmptyLeft { content: '\e267'; } // ''
+@mixin ms-Icon--filePDF { content: '\e268'; } // ''
+@mixin ms-Icon--fileImage { content: '\e26c'; } // ''
+@mixin ms-Icon--fileDocument { content: '\e26d'; } // ''
+@mixin ms-Icon--listGroup2 { content: '\e26e'; } // ''
+@mixin ms-Icon--copy { content: '\e26f'; } // ''
+@mixin ms-Icon--creditCardOutline { content: '\e270'; } // ''
+@mixin ms-Icon--mailPublic { content: '\e272'; } // ''
+@mixin ms-Icon--folderPublic { content: '\e273'; } // ''
+@mixin ms-Icon--teamwork { content: '\e274'; } // ''
+@mixin ms-Icon--move { content: '\e275'; } // ''
+@mixin ms-Icon--classroom { content: '\e276'; } // ''
+@mixin ms-Icon--menu2 { content: '\e277'; } // ''
+@mixin ms-Icon--plus2 { content: '\e278'; } // ''
+@mixin ms-Icon--tag { content: '\e279'; } // ''
+@mixin ms-Icon--arrowUp2 { content: '\e27a'; } // ''
+@mixin ms-Icon--arrowDown2 { content: '\e27b'; } // ''
+@mixin ms-Icon--circlePlus { content: '\e27c'; } // ''
+@mixin ms-Icon--circleInfo { content: '\e27d'; } // ''
+@mixin ms-Icon--section { content: '\e27e'; } // ''
+@mixin ms-Icon--sections { content: '\e27f'; } // ''
+@mixin ms-Icon--at { content: '\e282'; } // ''
+@mixin ms-Icon--arrowUpRight { content: '\e283'; } // ''
+@mixin ms-Icon--arrowDownRight { content: '\e284'; } // ''
+@mixin ms-Icon--arrowDownLeft { content: '\e285'; } // ''
+@mixin ms-Icon--arrowUpLeft { content: '\e286'; } // ''
+@mixin ms-Icon--bundle { content: '\e287'; } // ''
+@mixin ms-Icon--pictureEdit { content: '\e288'; } // ''
+@mixin ms-Icon--protectionCenter { content: '\e289'; } // ''
+@mixin ms-Icon--alert2 { content: '\e28a'; } // ''
+
+
+@mixin 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;
+ }
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Mixins.RTL.scss b/dist/sass/_Fabric.Mixins.RTL.scss
new file mode 100644
index 000000000..553e72f91
--- /dev/null
+++ b/dist/sass/_Fabric.Mixins.RTL.scss
@@ -0,0 +1,315 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Internationalization mixins
+
+
+// Base left-to-right mixin definition.
+@mixin LTR {
+ [dir='ltr'] & {
+ @content;
+ }
+}
+
+// Base right-to-left mixin definition.
+@mixin RTL {
+ [dir='rtl'] & {
+ @content;
+ }
+}
+
+// Use baseRTL on a root element (e.g. page or region) that needs RTL support.
+@mixin baseRtl {
+ @include RTL {
+ direction: rtl;
+ unicode-bidi: bidi-override;
+ }
+}
+
+
+// Common CSS property mixins with support for RTL.
+// Use to automatically create RTL versions of your properties.
+
+// Border styles.
+@mixin border-color($top, $right, $bottom, $left) {
+ border-color: $top $right $bottom $left;
+
+ @include RTL {
+ border-color: $top $left $bottom $right;
+ }
+}
+
+@mixin border-left($width, $style, $color) {
+ @include LTR {
+ border-left: $width $style $color;
+ }
+
+ @include RTL {
+ border-right: $width $style $color;
+ }
+}
+
+@mixin border-left-color($color) {
+ @include LTR {
+ border-left-color: $color;
+ }
+
+ @include RTL {
+ border-right-color: $color;
+ }
+}
+
+@mixin border-left-style($style) {
+ @include LTR {
+ border-left-style: $style;
+ }
+
+ @include RTL {
+ border-right-style: $style;
+ }
+}
+
+@mixin border-left-width($width) {
+ @include LTR {
+ border-left-width: $width;
+ }
+
+ @include RTL {
+ border-right-width: $width;
+ }
+}
+
+@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {
+ border-radius: $topLeft $topRight $bottomRight $bottomLeft;
+
+ @include RTL {
+ border-radius: $topRight $topLeft $bottomLeft $bottomRight;
+ }
+}
+
+@mixin border-right($width, $style, $color) {
+ @include LTR {
+ border-right: $width $style $color;
+ }
+
+ @include RTL {
+ border-left: $width $style $color;
+ }
+}
+
+@mixin border-right-color($color) {
+ @include LTR {
+ border-right-color: $color;
+ }
+
+ @include RTL {
+ border-left-color: $color;
+ }
+}
+
+@mixin border-right-style($style) {
+ @include LTR {
+ border-right-style: $style;
+ }
+
+ @include RTL {
+ border-left-style: $style;
+ }
+}
+
+@mixin border-right-width($width) {
+ @include LTR {
+ border-right-width: $width;
+ }
+
+ @include RTL {
+ border-left-width: $width;
+ }
+}
+
+// Floats.
+@mixin clear($side) {
+ @if $side == left {
+ @include LTR {
+ clear: $side;
+ }
+
+ @include RTL {
+ clear: right;
+ }
+ } @else if $side == right {
+ @include LTR {
+ clear: $side;
+ }
+
+ @include RTL {
+ clear: left;
+ }
+ } @else {
+ clear: $side;
+ }
+}
+
+@mixin float($direction) {
+ @if $direction == left {
+ @include LTR {
+ float: left;
+ }
+
+ @include RTL {
+ float: right;
+ }
+ } @else {
+ @include LTR {
+ float: right;
+ }
+
+ @include RTL {
+ float: left;
+ }
+ }
+}
+
+// Positioning.
+@mixin left($distance) {
+ @include LTR {
+ left: $distance;
+ }
+
+ @include RTL {
+ right: $distance;
+ }
+}
+
+@mixin right($distance) {
+ @include LTR {
+ right: $distance;
+ }
+
+ @include RTL {
+ left: $distance;
+ }
+}
+
+// Margins.
+@mixin margin($top, $right, $bottom, $left) {
+ margin: $top $right $bottom $left;
+
+ @include RTL {
+ margin: $top $left $bottom $right;
+ }
+}
+
+@mixin margin-left($distance) {
+ @include LTR {
+ margin-left: $distance;
+ }
+
+ @include RTL {
+ margin-right: $distance;
+ }
+}
+
+@mixin margin-right($distance) {
+ @include LTR {
+ margin-right: $distance;
+ }
+ @include RTL {
+ margin-left: $distance;
+ }
+}
+
+// Padding.
+@mixin padding($top, $right, $bottom, $left) {
+ padding: $top $right $bottom $left;
+
+ @include RTL {
+ padding: $top $left $bottom $right;
+ }
+}
+
+@mixin padding-left($distance) {
+ @include LTR {
+ padding-left: $distance;
+ }
+
+ @include RTL {
+ padding-right: $distance;
+ }
+}
+
+@mixin padding-right($distance) {
+ @include LTR {
+ padding-right: $distance;
+ }
+
+ @include RTL {
+ padding-left: $distance;
+ }
+}
+
+// Text-alignment.
+@mixin text-align($direction) {
+ @if $direction == left {
+ @include LTR {
+ text-align: left;
+ }
+
+ @include RTL {
+ text-align: right;
+ }
+ } @else {
+ @include LTR {
+ text-align: right;
+ }
+
+ @include RTL {
+ text-align: left;
+ }
+ }
+}
+
+// Box-shadow.
+@mixin box-shadow($left, $etc) {
+ @include LTR {
+ box-shadow: $left $etc;
+ }
+
+ @include RTL {
+ box-shadow: -$left $etc;
+ }
+}
+
+// Transforms.
+@mixin transform-rtl() {
+ @include LTR {
+ transform: scaleX(1);
+ }
+
+ @include RTL {
+ transform: scaleX(-1);
+ }
+}
+
+// Transitions. Only supported when ONLY left/right are declared
+@mixin transition-property($direction) {
+ @if $direction == left {
+ @include LTR {
+ transition-property: left;
+ }
+
+ @include RTL {
+ transition-property: right;
+ }
+ } @else {
+ @include LTR {
+ transition-property: right;
+ }
+
+ @include RTL {
+ transition-property: left;
+ }
+ }
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Mixins.scss b/dist/sass/_Fabric.Mixins.scss
new file mode 100644
index 000000000..518d9bf04
--- /dev/null
+++ b/dist/sass/_Fabric.Mixins.scss
@@ -0,0 +1,274 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Vendor-prefixed mixins
+
+
+// Border radius.
+@mixin border-radius($ms-radius: 5px) {
+ border-radius: $ms-radius;
+ background-clip: padding-box;
+}
+
+// Drop shadow.
+@mixin drop-shadow($ms-x-offset: 0, $ms-y-offset: 0, $ms-blur: 5px, $ms-spread: 0, $ms-alpha: 0.4) {
+ box-shadow: $ms-x-offset $ms-y-offset $ms-blur $ms-spread rgba(0, 0, 0, $ms-alpha);
+}
+
+// Background gradient.
+@mixin background-gradient($ms-origin: left, $ms-start: #000, $ms-start-location: 0%, $ms-stop: #FFF, $ms-stop-location: 100%) {
+ background-color: $ms-start;
+ background-image: linear-gradient($ms-origin, $ms-start $ms-start-location, $ms-stop $ms-stop-location);
+}
+
+// Rotation.
+@mixin rotate($ms-deg) {
+ transform: rotate($ms-deg);
+}
+
+// Reset button styles.
+@mixin button-reset() {
+ background: none;
+ border: 0;
+ cursor: pointer;
+}
+
+@mixin resetAnimation() {
+ -webkit-animation: none;
+ -moz-animation: none;
+ -ms-animation: none;
+ -o-animation: none;
+ animation: none;
+}
+
+@mixin resetBackface() {
+ backface-visibility: visible;
+}
+
+@mixin resetBackground() {
+ background: 0;
+ background-clip: border-box;
+ background-origin: padding-box;
+}
+
+@mixin resetBorder() {
+ border: 0;
+ border-collapse: separate;
+ border-image: none;
+ border-radius: 0;
+ border-spacing: 0;
+}
+
+@mixin resetBoxShadow() {
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+@mixin resetBoxSizing() {
+ box-sizing: content-box;
+}
+
+@mixin resetColumns() {
+ columns: auto;
+ column-count: auto;
+ column-fill: balance;
+ column-gap: normal;
+ column-rule: medium none currentColor;
+ column-rule-color: currentColor;
+ column-rule-style: none;
+ column-rule-width: none;
+ column-span: 1;
+ column-width: auto;
+}
+
+
+// Fonts and Typography Resets
+@mixin resetFont() {
+ font: normal;
+ font-family: inherit;
+ font-size: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+}
+
+@mixin resetTextStyling() {
+ text-align: inherit;
+ text-align-last: auto;
+ text-decoration: none;
+ text-decoration-color: inherit;
+ text-decoration-line: none;
+ text-decoration-style: solid;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ line-height: normal;
+ letter-spacing: normal;
+ word-spacing: normal;
+}
+
+
+// Box Model Resets
+@mixin resetPadding() {
+ padding: 0;
+}
+
+@mixin resetMargins() {
+ margin: 0;
+}
+
+@mixin resetOverflow() {
+ overflow: visible;
+}
+
+@mixin resetMax() {
+ max-height: none;
+ max-width: none;
+}
+
+@mixin resetMin() {
+ min-height: 0;
+ min-width: 0;
+}
+
+@mixin resetPositioning() {
+ bottom: auto;
+ left: auto;
+ top: auto;
+ left: auto;
+}
+
+@mixin resetFloat() {
+ float: none;
+}
+
+@mixin resetHeight($ms-useMaxMin: false) {
+ height: auto;
+ @if $ms-useMaxMin == true {
+ min-height: 0;
+ max-height: 0;
+ }
+}
+
+@mixin resetWidth($ms-useMaxMin: false) {
+ width: auto;
+ @if $ms-useMaxMin == true {
+ min-width: 0;
+ max-width: 0;
+ }
+}
+
+@mixin resetPosition() {
+ position: static;
+}
+
+@mixin resetPerspective() {
+ -webkit-perspective: none;
+ -webkit-perspective-origin: 50% 50%;
+ perspective: none;
+ perspective-origin: 50% 50%;
+
+}
+
+@mixin resetTransition() {
+ -webkit-transition: none;
+ transition: none;
+}
+
+@mixin resetListStyle() {
+ list-style: none;
+}
+
+@mixin resetTransform() {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -webkit-transform-style: flat;
+ transform: none;
+ transform-style: flat;
+}
+
+@mixin resetOutline() {
+ outline: 0;
+}
+
+@mixin resetPageBreak() {
+ page-break-after: auto;
+ page-break-before: auto;
+ page-break-inside: auto;
+}
+
+@mixin resetDisplay() {
+ display: block;
+}
+
+@mixin resetVerticalAlign() {
+ vertical-align: baseline;
+}
+
+// Prevents the text within a block element from wrapping to second line.
+@mixin noWrap() {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// Input placehoder
+@mixin input-placeholder {
+ &::-webkit-input-placeholder,
+ &::-moz-placeholder,
+ &:-moz-placeholder,
+ &:-ms-input-placeholder {
+ @content;
+ }
+}
+
+// Animations
+@mixin animationName($ms-name) {
+ -webkit-animation-name: $ms-name;
+ -moz-animation-name: $ms-name;
+ -ms-animation-name: $ms-name;
+ -o-animation-name: $ms-name;
+ animation-name: $ms-name;
+}
+
+@mixin animationDuration($ms-duration) {
+ -webkit-animation-duration: $ms-duration;
+ -moz-animation-duration: $ms-duration;
+ -ms-animation-duration: $ms-duration;
+ -o-animation-duration: $ms-duration;
+}
+
+@mixin animationTiming($ms-function) {
+ -webkit-animation-timing-function: $ms-function;
+ -moz-animation-timing-function: $ms-function;
+ -ms-animation-timing-function: $ms-function;
+ -o-animation-timing-function: $ms-function;
+ animation-timing-function: $ms-function;
+}
+
+@mixin animationFillMode($ms-mode) {
+ -webkit-animation-fill-mode: $ms-mode;
+ -moz-animation-fill-mode: $ms-mode;
+ -ms-animation-fill-mode: $ms-mode;
+ -o-animation-fill-mode: $ms-mode;
+ animation-fill-mode: $ms-mode;
+}
+
+// Flexbox
+@mixin flexBox() {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
+@mixin alignItems($ms-mode) {
+ -webkit-box-align: $ms-mode;
+ -moz-box-align: $ms-mode;
+ -ms-flex-align: $ms-mode;
+ -webkit-align-items: $ms-mode;
+ align-items: $ms-mode;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Responsive.Utilities.Variables.scss b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss
new file mode 100644
index 000000000..ab234df8f
--- /dev/null
+++ b/dist/sass/_Fabric.Responsive.Utilities.Variables.scss
@@ -0,0 +1,697 @@
+// Small Screens
+@mixin ms-u-sm12 {
+ width: 100%;
+}
+@mixin ms-u-sm11 {
+ width: 91.66666666666666%;
+}
+@mixin ms-u-sm10 {
+ width: 83.33333333333334%;
+}
+@mixin ms-u-sm9 {
+ width: 75%;
+}
+@mixin ms-u-sm8 {
+ width: 66.66666666666666%;
+}
+@mixin ms-u-sm7 {
+ width: 58.333333333333336%;
+}
+@mixin ms-u-sm6 {
+ width: 50%;
+}
+@mixin ms-u-sm5 {
+ width: 41.66666666666667%;
+}
+@mixin ms-u-sm4 {
+ width: 33.33333333333333%;
+}
+@mixin ms-u-sm3 {
+ width: 25%;
+}
+@mixin ms-u-sm2 {
+ width: 16.666666666666664%;
+}
+@mixin ms-u-sm1 {
+ width: 8.333333333333332%;
+}
+@mixin ms-u-smPull12 {
+ right: 100%;
+}
+@mixin ms-u-smPull11 {
+ right: 91.66666666666666%;
+}
+@mixin ms-u-smPull10 {
+ right: 83.33333333333334%;
+}
+@mixin ms-u-smPull9 {
+ right: 75%;
+}
+@mixin ms-u-smPull8 {
+ right: 66.66666666666666%;
+}
+@mixin ms-u-smPull7 {
+ right: 58.333333333333336%;
+}
+@mixin ms-u-smPull6 {
+ right: 50%;
+}
+@mixin ms-u-smPull5 {
+ right: 41.66666666666667%;
+}
+@mixin ms-u-smPull4 {
+ right: 33.33333333333333%;
+}
+@mixin ms-u-smPull3 {
+ right: 25%;
+}
+@mixin ms-u-smPull2 {
+ right: 16.666666666666664%;
+}
+@mixin ms-u-smPull1 {
+ right: 8.333333333333332%;
+}
+@mixin ms-u-smPull0 {
+ right: auto;
+}
+@mixin ms-u-smPush12 {
+ left: 100%;
+}
+@mixin ms-u-smPush11 {
+ left: 91.66666666666666%;
+}
+@mixin ms-u-smPush10 {
+ left: 83.33333333333334%;
+}
+@mixin ms-u-smPush9 {
+ left: 75%;
+}
+@mixin ms-u-smPush8 {
+ left: 66.66666666666666%;
+}
+@mixin ms-u-smPush7 {
+ left: 58.333333333333336%;
+}
+@mixin ms-u-smPush6 {
+ left: 50%;
+}
+@mixin ms-u-smPush5 {
+ left: 41.66666666666667%;
+}
+@mixin ms-u-smPush4 {
+ left: 33.33333333333333%;
+}
+@mixin ms-u-smPush3 {
+ left: 25%;
+}
+@mixin ms-u-smPush2 {
+ left: 16.666666666666664%;
+}
+@mixin ms-u-smPush1 {
+ left: 8.333333333333332%;
+}
+@mixin ms-u-smPush0 {
+ left: auto;
+}
+
+// Medium Screens
+@mixin ms-u-md12 {
+width: 100%;
+}
+@mixin ms-u-md11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-md10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-md9 {
+width: 75%;
+}
+@mixin ms-u-md8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-md7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-md6 {
+width: 50%;
+}
+@mixin ms-u-md5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-md4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-md3 {
+width: 25%;
+}
+@mixin ms-u-md2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-md1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-mdPull12 {
+right: 100%;
+}
+@mixin ms-u-mdPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-mdPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-mdPull9 {
+right: 75%;
+}
+@mixin ms-u-mdPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-mdPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-mdPull6 {
+right: 50%;
+}
+@mixin ms-u-mdPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-mdPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-mdPull3 {
+right: 25%;
+}
+@mixin ms-u-mdPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-mdPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-mdPull0 {
+right: auto;
+}
+@mixin ms-u-mdPush12 {
+left: 100%;
+}
+@mixin ms-u-mdPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-mdPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-mdPush9 {
+left: 75%;
+}
+@mixin ms-u-mdPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-mdPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-mdPush6 {
+left: 50%;
+}
+@mixin ms-u-mdPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-mdPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-mdPush3 {
+left: 25%;
+}
+@mixin ms-u-mdPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-mdPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-mdPush0 {
+left: auto;
+}
+
+// Large screens
+@mixin ms-u-lg12 {
+width: 100%;
+}
+@mixin ms-u-lg11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-lg10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-lg9 {
+width: 75%;
+}
+@mixin ms-u-lg8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-lg7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-lg6 {
+width: 50%;
+}
+@mixin ms-u-lg5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-lg4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-lg3 {
+width: 25%;
+}
+@mixin ms-u-lg2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-lg1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-lgPull12 {
+right: 100%;
+}
+@mixin ms-u-lgPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-lgPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-lgPull9 {
+right: 75%;
+}
+@mixin ms-u-lgPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-lgPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-lgPull6 {
+right: 50%;
+}
+@mixin ms-u-lgPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-lgPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-lgPull3 {
+right: 25%;
+}
+@mixin ms-u-lgPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-lgPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-lgPull0 {
+right: auto;
+}
+@mixin ms-u-lgPush12 {
+left: 100%;
+}
+@mixin ms-u-lgPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-lgPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-lgPush9 {
+left: 75%;
+}
+@mixin ms-u-lgPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-lgPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-lgPush6 {
+left: 50%;
+}
+@mixin ms-u-lgPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-lgPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-lgPush3 {
+left: 25%;
+}
+@mixin ms-u-lgPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-lgPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-lgPush0 {
+left: auto;
+}
+
+// Extra Large Screens
+@mixin ms-u-xl12 {
+width: 100%;
+}
+@mixin ms-u-xl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xl9 {
+width: 75%;
+}
+@mixin ms-u-xl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xl6 {
+width: 50%;
+}
+@mixin ms-u-xl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xl3 {
+width: 25%;
+}
+@mixin ms-u-xl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xlPull12 {
+right: 100%;
+}
+@mixin ms-u-xlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xlPull9 {
+right: 75%;
+}
+@mixin ms-u-xlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xlPull6 {
+right: 50%;
+}
+@mixin ms-u-xlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xlPull3 {
+right: 25%;
+}
+@mixin ms-u-xlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xlPull0 {
+right: auto;
+}
+@mixin ms-u-xlPush12 {
+left: 100%;
+}
+@mixin ms-u-xlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xlPush9 {
+left: 75%;
+}
+@mixin ms-u-xlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xlPush6 {
+left: 50%;
+}
+@mixin ms-u-xlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xlPush3 {
+left: 25%;
+}
+@mixin ms-u-xlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xlPush0 {
+left: auto;
+}
+
+
+// XXL Screens
+@mixin ms-u-xxl12 {
+width: 100%;
+}
+@mixin ms-u-xxl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xxl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xxl9 {
+width: 75%;
+}
+@mixin ms-u-xxl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xxl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xxl6 {
+width: 50%;
+}
+@mixin ms-u-xxl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xxl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xxl3 {
+width: 25%;
+}
+@mixin ms-u-xxl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xxl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xxlPull12 {
+right: 100%;
+}
+@mixin ms-u-xxlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xxlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xxlPull9 {
+right: 75%;
+}
+@mixin ms-u-xxlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xxlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xxlPull6 {
+right: 50%;
+}
+@mixin ms-u-xxlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xxlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xxlPull3 {
+right: 25%;
+}
+@mixin ms-u-xxlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xxlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xxlPull0 {
+right: auto;
+}
+@mixin ms-u-xxlPush12 {
+left: 100%;
+}
+@mixin ms-u-xxlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xxlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xxlPush9 {
+left: 75%;
+}
+@mixin ms-u-xxlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xxlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xxlPush6 {
+left: 50%;
+}
+@mixin ms-u-xxlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xxlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xxlPush3 {
+left: 25%;
+}
+@mixin ms-u-xxlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xxlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xxlPush0 {
+left: auto;
+}
+
+// Extra extra extra large screens
+
+@mixin ms-u-xxxl12 {
+width: 100%;
+}
+@mixin ms-u-xxxl11 {
+width: 91.66666666666666%;
+}
+@mixin ms-u-xxxl10 {
+width: 83.33333333333334%;
+}
+@mixin ms-u-xxxl9 {
+width: 75%;
+}
+@mixin ms-u-xxxl8 {
+width: 66.66666666666666%;
+}
+@mixin ms-u-xxxl7 {
+width: 58.333333333333336%;
+}
+@mixin ms-u-xxxl6 {
+width: 50%;
+}
+@mixin ms-u-xxxl5 {
+width: 41.66666666666667%;
+}
+@mixin ms-u-xxxl4 {
+width: 33.33333333333333%;
+}
+@mixin ms-u-xxxl3 {
+width: 25%;
+}
+@mixin ms-u-xxxl2 {
+width: 16.666666666666664%;
+}
+@mixin ms-u-xxxl1 {
+width: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPull12 {
+right: 100%;
+}
+@mixin ms-u-xxxlPull11 {
+right: 91.66666666666666%;
+}
+@mixin ms-u-xxxlPull10 {
+right: 83.33333333333334%;
+}
+@mixin ms-u-xxxlPull9 {
+right: 75%;
+}
+@mixin ms-u-xxxlPull8 {
+right: 66.66666666666666%;
+}
+@mixin ms-u-xxxlPull7 {
+right: 58.333333333333336%;
+}
+@mixin ms-u-xxxlPull6 {
+right: 50%;
+}
+@mixin ms-u-xxxlPull5 {
+right: 41.66666666666667%;
+}
+@mixin ms-u-xxxlPull4 {
+right: 33.33333333333333%;
+}
+@mixin ms-u-xxxlPull3 {
+right: 25%;
+}
+@mixin ms-u-xxxlPull2 {
+right: 16.666666666666664%;
+}
+@mixin ms-u-xxxlPull1 {
+right: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPull0 {
+right: auto;
+}
+@mixin ms-u-xxxlPush12 {
+left: 100%;
+}
+@mixin ms-u-xxxlPush11 {
+left: 91.66666666666666%;
+}
+@mixin ms-u-xxxlPush10 {
+left: 83.33333333333334%;
+}
+@mixin ms-u-xxxlPush9 {
+left: 75%;
+}
+@mixin ms-u-xxxlPush8 {
+left: 66.66666666666666%;
+}
+@mixin ms-u-xxxlPush7 {
+left: 58.333333333333336%;
+}
+@mixin ms-u-xxxlPush6 {
+left: 50%;
+}
+@mixin ms-u-xxxlPush5 {
+left: 41.66666666666667%;
+}
+@mixin ms-u-xxxlPush4 {
+left: 33.33333333333333%;
+}
+@mixin ms-u-xxxlPush3 {
+left: 25%;
+}
+@mixin ms-u-xxxlPush2 {
+left: 16.666666666666664%;
+}
+@mixin ms-u-xxxlPush1 {
+left: 8.333333333333332%;
+}
+@mixin ms-u-xxxlPush0 {
+left: auto;
+}
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Responsive.Variables.scss b/dist/sass/_Fabric.Responsive.Variables.scss
new file mode 100644
index 000000000..e553f6a8f
--- /dev/null
+++ b/dist/sass/_Fabric.Responsive.Variables.scss
@@ -0,0 +1,35 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric responsive variables
+
+
+//== Variables for responsive breakpoints
+//
+
+// Small screen / phone (320px - 479px)
+$ms-screen-sm-min: 320px;
+
+// Medium screen / tablet (480px - 639px)
+$ms-screen-md-min: 480px;
+
+// Large screen / tablet (640px - 1023px)
+$ms-screen-lg-min: 640px;
+
+// Extra large screen / tablet (1024px - 1365px)
+$ms-screen-xl-min: 1024px;
+
+// Extra extra large screen / desktop (1366px - 1919px)
+$ms-screen-xxl-min: 1366px;
+
+// Extra extra extra large screen / desktop (1366px and up)
+$ms-screen-xxxl-min: 1920px;
+
+// Set all maxes since order matters in SASS
+$ms-screen-sm-max: ($ms-screen-md-min - 1);
+$ms-screen-md-max: ($ms-screen-lg-min - 1);
+$ms-screen-lg-max: ($ms-screen-xl-min - 1);
+$ms-screen-xl-max: ($ms-screen-xxl-min - 1);
+$ms-screen-xxl-max: ($ms-screen-xxxl-min - 1);
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Typography.Fonts.scss b/dist/sass/_Fabric.Typography.Fonts.scss
new file mode 100644
index 000000000..1b56a88cb
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Fonts.scss
@@ -0,0 +1,170 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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-directory: "https://appsforoffice.microsoft.com/fabric/fonts";
+$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";
+
+
+/*
+ Your use of the content in the files referenced here are subject to the terms of the license at http://aka.ms/fabric-font-license
+*/
+
+// Mixins to generate @font-face rules for unique languages.
+@mixin SegoeUILight($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-light} #{$ms-font-language}";
+ src: local("Segoe UI Light"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Light.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUIRegular($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-regular} #{$ms-font-language}";
+ src: local("Segoe UI"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUISemilight($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-semilight} #{$ms-font-language}";
+ src: local("Segoe UI Semilight"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semilight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+@mixin SegoeUISemibold($ms-font-language, $ms-font-path) {
+ @font-face {
+ font-family: "#{$ms-semibold} #{$ms-font-language}";
+ src: local("Segoe UI Semibold"),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff2') format('woff2'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.woff') format('woff'),
+ url('#{$ms-font-directory}/#{$ms-font-path}/SegoeUI-Semibold.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+}
+
+// Mixins to generate language-specific font faces.
+@mixin SegoeUIArabicLight {
+ @include SegoeUILight("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicRegular {
+ @include SegoeUIRegular("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemibold {
+ @include SegoeUISemibold("Arabic", $ms-font-path-arabic);
+}
+@mixin SegoeUIArabicSemilight {
+ @include SegoeUISemilight("Arabic", $ms-font-path-arabic);
+}
+
+@mixin SegoeUICyrillicLight {
+ @include SegoeUILight("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicRegular {
+ @include SegoeUIRegular("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemibold {
+ @include SegoeUISemibold("Cyrillic", $ms-font-path-cyrillic);
+}
+@mixin SegoeUICyrillicSemilight {
+ @include SegoeUISemilight("Cyrillic", $ms-font-path-cyrillic);
+}
+
+@mixin SegoeUIEastEuropeanLight {
+ @include SegoeUILight("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanRegular {
+ @include SegoeUIRegular("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemibold {
+ @include SegoeUISemibold("EastEuropean", $ms-font-path-easteuropean);
+}
+@mixin SegoeUIEastEuropeanSemilight {
+ @include SegoeUISemilight("EastEuropean", $ms-font-path-easteuropean);
+}
+
+@mixin SegoeUIGreekLight {
+ @include SegoeUILight("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekRegular {
+ @include SegoeUIRegular("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemibold {
+ @include SegoeUISemibold("Greek", $ms-font-path-greek);
+}
+@mixin SegoeUIGreekSemilight {
+ @include SegoeUISemilight("Greek", $ms-font-path-greek);
+}
+
+@mixin SegoeUIHebrewLight {
+ @include SegoeUILight("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewRegular {
+ @include SegoeUIRegular("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemibold {
+ @include SegoeUISemibold("Hebrew", $ms-font-path-hebrew);
+}
+@mixin SegoeUIHebrewSemilight {
+ @include SegoeUISemilight("Hebrew", $ms-font-path-hebrew);
+}
+
+@mixin SegoeUIVietnameseLight {
+ @include SegoeUILight("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseRegular {
+ @include SegoeUIRegular("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemibold {
+ @include SegoeUISemibold("Vietnamese", $ms-font-path-vietnamese);
+}
+@mixin SegoeUIVietnameseSemilight {
+ @include SegoeUISemilight("Vietnamese", $ms-font-path-vietnamese);
+}
+
+@mixin SegoeUIWestEuropeanLight {
+ @include SegoeUILight("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanRegular {
+ @include SegoeUIRegular("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemibold {
+ @include SegoeUISemibold("WestEuropean", $ms-font-path-westeuropean);
+}
+@mixin SegoeUIWestEuropeanSemilight {
+ @include SegoeUISemilight("WestEuropean", $ms-font-path-westeuropean);
+}
diff --git a/dist/sass/_Fabric.Typography.Language.Overrides.scss b/dist/sass/_Fabric.Typography.Language.Overrides.scss
new file mode 100644
index 000000000..c47014a67
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Language.Overrides.scss
@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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.
+@mixin 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-fontWeight-light,
+ .ms-fontWeight-light-hover:hover,
+ .ms-fontWeight-semilight,
+ .ms-fontWeight-semilight-hover:hover,
+ .ms-fontWeight-regular,
+ .ms-fontWeight-regular-hover:hover,
+ .ms-fontWeight-semibold,
+ .ms-fontWeight-semibold-hover:hover {
+ font-family: $ms-font-family;
+ }
+ }
+}
+
+// Base font stack.
+$ms-font-system-base: 'Segoe UI', Tahoma, Arial, sans-serif;
+
+// Variables for each of the non-distributed (native) font stacks.
+$ms-font-stack-japanese: 'Yu Gothic', '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;
+
+
+//== 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.
+@mixin 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-fontWeight-light,
+ .ms-fontWeight-light-hover:hover {
+ font-family: $ms-font-family-light;
+ }
+ .ms-font-l,
+ .ms-font-su,
+ .ms-fontWeight-semilight,
+ .ms-fontWeight-semilight-hover:hover {
+ font-family: $ms-font-family-semilight;
+ }
+ .ms-fontWeight-regular,
+ .ms-fontweight-regular-hover:hover {
+ font-family: $ms-font-family-regular;
+ }
+ .ms-font-mi,
+ .ms-fontWeight-semibold,
+ .ms-fontWeight-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;
\ No newline at end of file
diff --git a/dist/sass/_Fabric.Typography.Variables.scss b/dist/sass/_Fabric.Typography.Variables.scss
new file mode 100644
index 000000000..71a556581
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.Variables.scss
@@ -0,0 +1,27 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Fabric Core Typography variables
+
+
+$ms-font-family-light: 'Segoe UI Light WestEuropean', 'Segoe UI Light', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-regular: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semilight: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe UI', Tahoma, Arial, sans-serif;
+$ms-font-family-semibold: 'Segoe UI Semibold WestEuropean', 'Segoe UI Semibold', 'Segoe UI', 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;
diff --git a/dist/sass/_Fabric.Typography.scss b/dist/sass/_Fabric.Typography.scss
new file mode 100644
index 000000000..b39926dde
--- /dev/null
+++ b/dist/sass/_Fabric.Typography.scss
@@ -0,0 +1,357 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Typographic mixins arranged with appropriate size and family combinations.
+@import 'Fabric.Typography.Variables';
+
+// Super Styles (LIMITED USE)
+// Weights: Light
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin 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
+@mixin ms-fontWeight-light{
+ font-family: $ms-font-family-light;
+}
+
+@mixin ms-fontWeight-semilight{
+ font-family: $ms-font-family-semilight;
+}
+
+@mixin ms-fontWeight-regular {
+ font-family: $ms-font-family-regular;
+}
+
+@mixin ms-fontWeight-semibold {
+ font-family: $ms-font-family-semibold;
+}
+
+// Font sizes
+@mixin ms-fontSize-su {
+ font-size: $ms-font-size-su;
+}
+
+@mixin ms-fontSize-xxl {
+ font-size: $ms-font-size-xxl;
+}
+
+@mixin ms-fontSize-xl {
+ font-size: $ms-font-size-xl;
+}
+
+@mixin ms-fontSize-l {
+ font-size: $ms-font-size-l;
+}
+
+@mixin ms-fontSize-mPlus {
+ font-size: $ms-font-size-m-plus;
+}
+
+@mixin ms-fontSize-m {
+ font-size: $ms-font-size-m;
+}
+
+@mixin ms-fontSize-sPlus {
+ font-size: $ms-font-size-s-plus;
+}
+
+@mixin ms-fontSize-s {
+ font-size: $ms-font-size-s;
+}
+
+@mixin ms-fontSize-xs {
+ font-size: $ms-font-size-xs;
+}
+
+@mixin ms-fontSize-mi {
+ font-size: $ms-font-size-mi;
+}
+
+// Theme colors
+@mixin ms-fontColor-themeDarker {
+ color: $ms-color-themeDarker;
+}
+
+@mixin ms-fontColor-themeDark {
+ color: $ms-color-themeDark;
+}
+
+@mixin ms-fontColor-themeDarkAlt {
+ color: $ms-color-themeDarkAlt;
+}
+
+@mixin ms-fontColor-themePrimary {
+ color: $ms-color-themePrimary;
+}
+
+@mixin ms-fontColor-themeSecondary {
+ color: $ms-color-themeSecondary;
+}
+
+@mixin ms-fontColor-themeTertiary {
+ color: $ms-color-themeTertiary;
+}
+
+@mixin ms-fontColor-themeLight {
+ color: $ms-color-themeLight;
+}
+
+@mixin ms-fontColor-themeLighter {
+ color: $ms-color-themeLighter;
+}
+
+@mixin ms-fontColor-themeLighterAlt {
+ color: $ms-color-themeLighterAlt;
+}
+
+
+// Neutral colors
+@mixin ms-fontColor-black {
+ color: $ms-color-black;
+}
+
+@mixin ms-fontColor-neutralDark {
+ color: $ms-color-neutralDark;
+}
+
+@mixin ms-fontColor-neutralPrimary {
+ color: $ms-color-neutralPrimary;
+}
+
+@mixin ms-fontColor-neutralPrimaryAlt {
+ color: $ms-color-neutralPrimaryAlt;
+}
+
+@mixin ms-fontColor-neutralSecondary {
+ color: $ms-color-neutralSecondary;
+}
+
+@mixin ms-fontColor-neutralSecondaryAlt {
+ color: $ms-color-neutralSecondaryAlt;
+}
+
+@mixin ms-fontColor-neutralTertiary {
+ color: $ms-color-neutralTertiary;
+}
+
+@mixin ms-fontColor-neutralTertiaryAlt {
+ color: $ms-color-neutralTertiaryAlt;
+}
+
+@mixin ms-fontColor-neutralLight {
+ color: $ms-color-neutralLight;
+}
+
+@mixin ms-fontColor-neutralLighter {
+ color: $ms-color-neutralLighter;
+}
+
+@mixin ms-fontColor-neutralLighterAlt {
+ color: $ms-color-neutralLighterAlt;
+}
+
+@mixin ms-fontColor-white {
+ color: $ms-color-white;
+}
+
+// Brand and accent colors
+@mixin ms-fontColor-yellow {
+ color: $ms-color-yellow;
+}
+
+@mixin ms-fontColor-yellowLight {
+ color: $ms-color-yellowLight;
+}
+
+@mixin ms-fontColor-orange {
+ color: $ms-color-orange;
+}
+
+@mixin ms-fontColor-orangeLight {
+ color: $ms-color-orangeLight;
+}
+
+@mixin ms-fontColor-orangeLighter {
+ color: $ms-color-orangeLighter;
+}
+
+@mixin ms-fontColor-redDark {
+ color: $ms-color-redDark;
+}
+
+@mixin ms-fontColor-red {
+ color: $ms-color-red;
+}
+
+@mixin ms-fontColor-magentaDark {
+ color: $ms-color-magentaDark;
+}
+
+@mixin ms-fontColor-magenta {
+ color: $ms-color-magenta;
+}
+
+@mixin ms-fontColor-magentaLight {
+ color: $ms-color-magentaLight;
+}
+
+@mixin ms-fontColor-purpleDark {
+ color: $ms-color-purpleDark;
+}
+
+@mixin ms-fontColor-purple {
+ color: $ms-color-purple;
+}
+
+@mixin ms-fontColor-purpleLight {
+ color: $ms-color-purpleLight;
+}
+
+@mixin ms-fontColor-blueDark {
+ color: $ms-color-blueDark;
+}
+
+@mixin ms-fontColor-blueMid {
+ color: $ms-color-blueMid;
+}
+
+@mixin ms-fontColor-blue {
+ color: $ms-color-blue;
+}
+
+@mixin ms-fontColor-blueLight {
+ color: $ms-color-blueLight;
+}
+
+@mixin ms-fontColor-tealDark {
+ color: $ms-color-tealDark;
+}
+
+@mixin ms-fontColor-teal {
+ color: $ms-color-teal;
+}
+
+@mixin ms-fontColor-tealLight {
+ color: $ms-color-tealLight;
+}
+
+@mixin ms-fontColor-greenDark {
+ color: $ms-color-greenDark;
+}
+
+@mixin ms-fontColor-green {
+ color: $ms-color-green;
+}
+
+@mixin ms-fontColor-greenLight {
+ color: $ms-color-greenLight;
+}
+
+// Message colors
+@mixin ms-fontColor-info {
+ color: $ms-color-info;
+}
+
+@mixin ms-fontColor-success {
+ color: $ms-color-success;
+}
+
+@mixin ms-fontColor-alert {
+ color: $ms-color-alert;
+}
+
+@mixin ms-fontColor-error {
+ color: $ms-color-error;
+}
diff --git a/dist/sass/_Fabric.Utilities.scss b/dist/sass/_Fabric.Utilities.scss
new file mode 100644
index 000000000..ced677042
--- /dev/null
+++ b/dist/sass/_Fabric.Utilities.scss
@@ -0,0 +1,36 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Utility classes and mixins used throughout Fabric.
+
+@import "Fabric.Mixins";
+
+// The best box is a border box.
+@mixin ms-u-borderBox {
+ box-sizing: border-box;
+}
+
+// Ensures the block expands to the full height to enclose its floated childen.
+
+@mixin ms-u-clearfix {
+ *zoom: 1;
+ &:before,
+ &:after {
+ display: table;
+ content: "";
+ line-height: 0;
+ }
+ &:after {
+ clear: both;
+ }
+}
+
+// Basic border-box, margin, and padding reset.
+@mixin ms-u-normalize {
+ @include ms-u-borderBox;
+ @include resetMargins;
+ @include resetPadding;
+ @include resetBoxShadow;
+}
diff --git a/dist/sass/_Fabric.ZIndex.Variables.scss b/dist/sass/_Fabric.ZIndex.Variables.scss
new file mode 100644
index 000000000..4855d7cd0
--- /dev/null
+++ b/dist/sass/_Fabric.ZIndex.Variables.scss
@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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;
diff --git a/dist/sass/_Office.Color.Variables.scss b/dist/sass/_Office.Color.Variables.scss
new file mode 100644
index 000000000..d8df9a710
--- /dev/null
+++ b/dist/sass/_Office.Color.Variables.scss
@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// 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;