Skip to content
This repository has been archived by the owner on Mar 26, 2019. It is now read-only.

Commit

Permalink
Add all built files for 1.2.0
Browse files Browse the repository at this point in the history
Mike Wheaton committed Nov 4, 2016

Verified

This commit was signed with the committer’s verified signature.
1 parent e23042d commit fc50d35
Showing 184 changed files with 49,119 additions and 8 deletions.
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ npm-debug.log
# Fabric files
*.sublime-workspace
docs.css
dist

# Docs files
docs/app
21 changes: 21 additions & 0 deletions dist/components/Breadcrumb/Breadcrumb.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-Breadcrumb {{#if props.customClasses}} {{props.customClasses}}{{/if}}">
<div class="ms-Breadcrumb-overflow">
<div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More" tabindex="1"></div>
<div class="ms-Breadcrumb-overflowMenu">
<ul class="ms-ContextualMenu is-open"></ul>
</div>
</div>
<ul class="ms-Breadcrumb-list">
{{#each props.items}}
<li class="ms-Breadcrumb-listItem">
<a class="ms-Breadcrumb-itemLink" tabindex="0">{{name}}</a>
<i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
</li>
{{/each}}
</ul>
</div>
6 changes: 6 additions & 0 deletions dist/components/Breadcrumb/Breadcrumb.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "Breadcrumb",
"dependencies": [
"ContextualMenu"
]
}
177 changes: 177 additions & 0 deletions dist/components/Breadcrumb/Breadcrumb.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Breadcrumb styles


.ms-Breadcrumb {
@include ms-baseFont;
margin: 23px 0 1px;

&.is-overflow {
.ms-Breadcrumb-overflow {
display: inline;
}
}
}

.ms-Breadcrumb-chevron {
font-size: $ms-font-size-s;
color: $ms-color-neutralSecondary;
vertical-align: top;
margin: 11px 7px;
}

.ms-Breadcrumb-list {
display: inline;
white-space: nowrap;
padding: 0;
margin: 0;

.ms-Breadcrumb-listItem {
list-style-type: none;
vertical-align: top;
margin: 0;
padding: 0;
display: inline-block;

&:last-of-type {
.ms-Breadcrumb-chevron {
display: none;
}
}
}
}

.ms-Breadcrumb-overflow {
display: none;
position: relative;

.ms-Breadcrumb-overflowButton {
font-size: 16px;
display: inline-block;
color: $ms-color-themePrimary;
padding: 8px;
cursor: pointer;
vertical-align: top;
}
}

.ms-Breadcrumb-overflowMenu {
display: none;
position: absolute;
margin-right: -2px;

&.is-open {
display: block;
top: 36px;
left: 0;
@include drop-shadow;
background-color: $ms-color-white;
border: 1px solid $ms-color-neutralTertiaryAlt;
z-index: ($ms-zIndex-ContextualMenu + $ms-zIndex-middle);
}

&::before {
position: absolute;
@include drop-shadow;
top: -6px;
left: 6px;
content: ' ';
width: 16px;
height: 16px;
transform: rotate(45deg);
background-color: $ms-color-white;
}

.ms-ContextualMenu {
border: 0;
box-shadow: none;
position: relative;
width: 190px;

&.is-open {
margin-bottom: 0;
}
}
}

.ms-Breadcrumb-itemLink,
.ms-Breadcrumb-overflowButton {
text-decoration: none;
outline: transparent;

&:hover {
background-color: $ms-color-neutralLighter;
cursor: pointer;
}

&:focus {
outline: $ms-color-neutralSecondaryAlt solid 1px;
color: $ms-color-black;
}

&:active {
outline: transparent;
background-color: $ms-color-neutralTertiaryAlt;
}
}

.ms-Breadcrumb-itemLink {
font-weight: $ms-font-weight-light;
font-size: $ms-font-size-xl;
color: $ms-color-neutralPrimary;
display: inline-block;
padding: 0 4px;
max-width: 160px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}


@media screen and (max-width: $ms-screen-md-max) {
.ms-Breadcrumb {
margin: 10px 0;
}

.ms-Breadcrumb-itemLink {
font-size: $ms-font-size-l;
}

.ms-Breadcrumb-chevron {
font-size: 10px;
margin: 8px 5px;
}

.ms-Breadcrumb-overflow {
.ms-Breadcrumb-overflowButton {
font-size: 16px;
padding: 5px 4px;
}
}
}

@media screen and (max-width: $ms-screen-sm-max) {
.ms-Breadcrumb-itemLink {
font-size: $ms-font-size-m;
max-width: 116px;
}

.ms-Breadcrumb-chevron {
margin: 5px 4px;
}

.ms-Breadcrumb-overflow {
.ms-Breadcrumb-overflowButton {
padding: 2px 4px;
}
}
}
19 changes: 19 additions & 0 deletions dist/components/Button/Button.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<{{props.tag}} class="ms-Button {{props.customClasses}}
{{#if props.modifier}}ms-Button--{{props.modifier}}{{/if}}
{{#if props.label}}{{else}}ms-Button--noLabel{{/if}}">
{{#if props.icon}}
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--{{props.icon}}"></i></span>
{{/if}}
<span class="ms-Button-label">{{props.label}}</span>
{{#if props.description}}
<span class="ms-Button-description">{{props.description}}</span>
{{/if}}
{{#if props.dropdownIcon}}
<span class="ms-Button-dropdownIcon"><i class="ms-Icon ms-Icon--{{props.dropdownIcon}}"></i></span>
{{/if}}
</{{props.tag}}>
7 changes: 7 additions & 0 deletions dist/components/Button/Button.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "Button",
"props": {
"label": "Create Account",
"tag": "button"
}
}
289 changes: 289 additions & 0 deletions dist/components/Button/Button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,289 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Button styles


.ms-Button {
@include ms-u-normalize;
@include ms-baseFont;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
background-color: $ms-color-neutralLighter;
border: 1px solid $ms-color-neutralLighter;
cursor: pointer;
display: inline-block;
height: 32px;
min-width: 80px;
padding: 4px 20px 6px;

&.is-hidden {
display: none;
}

&:hover {
background-color: $ms-color-neutralLight;
border-color: $ms-color-neutralLight;

.ms-Button-label {
color: $ms-color-black;
}

@media screen and (-ms-high-contrast: active) {
color: $ms-color-contrastBlackSelected;
border-color: $ms-color-contrastBlackSelected;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-contrastWhiteSelected;
border-color: $ms-color-contrastWhiteSelected;
}
}

&:focus {
background-color: $ms-color-neutralLight;
border-color: $ms-color-themePrimary;
outline: 1px solid transparent;

.ms-Button-label {
color: $ms-color-black;
}
}

&:active {
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;

.ms-Button-label {
color: $ms-color-white;
}
}

&:disabled,
&.is-disabled {
background-color: $ms-color-neutralLighter;
border-color: $ms-color-neutralLighter;
cursor: default;

.ms-Button-label {
color: $ms-color-neutralTertiary;
}

&:hover,
&:focus {
outline: 0;
}
}
}

.ms-Button-label {
color: $ms-color-neutralPrimary;
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
}

.ms-Button-icon,
.ms-Button-description {
display: none;
}

//== Modifier: Primary action button
//
.ms-Button.ms-Button--primary {
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;

.ms-Button-label {
color: $ms-color-white;
}

&:hover {
background-color: $ms-color-themeDark;
border-color: $ms-color-themeDark;
}

&:focus {
background-color: $ms-color-themeDark;
border-color: $ms-color-themeDarker;
}

&:active {
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
}

&:disabled,
&.is-disabled {
background-color: $ms-color-neutralLighter;
border-color: $ms-color-neutralLighter;

.ms-Button-label {
color: $ms-color-neutralTertiary;
}
}
}


//== Modifier: Hero button
//
.ms-Button.ms-Button--hero {
align-items: center;
background-color: transparent;
border: 0;
display: flex;
padding: 0;

.ms-Button-icon {
color: $ms-color-themePrimary;
display: inline-block;
font-size: $ms-font-size-s;
margin-right: 4px;
position: relative;
top: 1px;
text-align: center;

.ms-Icon {
border-radius: 18px;
border: 1px solid $ms-color-themePrimary;
font-size: $ms-font-size-s;
height: 18px;
line-height: 18px;
width: 18px;
}
}

.ms-Button-label {
color: $ms-color-themePrimary;
font-size: $ms-font-size-xl;
font-weight: $ms-font-weight-light;
position: relative;
text-decoration: none;
}

&:hover,
&:focus {
.ms-Button-icon {
color: $ms-color-themeDark;

.ms-Icon {
border: 1px solid $ms-color-themeDark;
}
}

.ms-Button-label {
color: $ms-color-themeDarker;
}
}

&:active {
.ms-Button-icon {
color: $ms-color-themePrimary;

.ms-Icon {
border: 1px solid $ms-color-themePrimary;
}
}

.ms-Button-label {
color: $ms-color-themePrimary;
}
}

&:disabled,
&.is-disabled {
.ms-Button-icon {
color: $ms-color-neutralTertiaryAlt;

.ms-Icon {
border: 1px solid $ms-color-neutralTertiaryAlt;
}
}

.ms-Button-label {
color: $ms-color-neutralTertiary;
}
}
}


//== Modifier: Compound button
//
.ms-Button.ms-Button--compound {
display: block;
height: auto;
max-width: 280px;
min-height: 72px;
padding: 20px;

.ms-Button-label {
display: block;
font-weight: $ms-font-weight-semibold;
position: relative;
text-align: left;
margin-top: -5px;
}

.ms-Button-description {
color: $ms-color-neutralSecondary;
display: block;
font-weight: $ms-font-weight-regular;
font-size: $ms-font-size-s;
position: relative;
text-align: left;
top: 3px;
}

&:hover {
.ms-Button-description {
color: $ms-color-neutralDark;
}
}

&:focus {
border-color: $ms-color-themePrimary;
background-color: $ms-color-neutralLighter;

.ms-Button-label {
color: $ms-color-neutralPrimary;
}

.ms-Button-description {
color: $ms-color-neutralSecondary;
}
}

&:active {
background-color: $ms-color-themePrimary;

.ms-Button-description,
.ms-Button-label {
color: $ms-color-white;
}
}

&:disabled,
&.is-disabled {
.ms-Button-label,
.ms-Button-description {
color: $ms-color-neutralTertiary;
}

&:focus,
&:active {
border-color: $ms-color-neutralLighter;
background-color: $ms-color-neutralLighter;

.ms-Button-label,
.ms-Button-description {
color: $ms-color-neutralTertiary;
}
}
}
}
30 changes: 30 additions & 0 deletions dist/components/Callout/Callout.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-Callout
{{#if props.arrowPosition}} ms-Callout--{{props.arrowPosition}} {{/if}}
{{#if props.modifier}} ms-Callout--{{props.modifier}}{{/if}} {{props.state}}">
<div class="ms-Callout-main">
{{#if props.closeIcon}}
<button class="ms-Callout-close">
<i class="ms-Icon ms-Icon--{{props.closeIcon}}"></i>
</button>
{{/if}}
<div class="ms-Callout-header">
<p class="ms-Callout-title">{{{props.title}}}</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<p class="ms-Callout-subText {{#if props.subText}} ms-Callout-subText--{{props.subTextSize}} {{/if}}">{{props.subText}}</p>
</div>
<div class="ms-Callout-actions">
{{#each props.actions}}
{{renderPartial component props}}
{{/each}}
</div>
</div>
</div>
</div>
10 changes: 10 additions & 0 deletions dist/components/Callout/Callout.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"name": "Callout",
"dependencies": [
"Button",
"Label",
"Link",
"ContextualHost",
"CommandButton"
]
}
160 changes: 160 additions & 0 deletions dist/components/Callout/Callout.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Callout styles

$ms-Callout-commandButtonHeight: 27px;

.ms-Callout {
@include ms-baseFont;
width: 288px;

&.is-hidden {
display: none;
}
}

.ms-Callout-header {
z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
padding-top: 24px;
padding-bottom: 12px;
padding-left: 28px;
padding-right: 28px;
}

.ms-Callout-title {
margin: 0;
font-weight: $ms-font-weight-semilight;
font-size: $ms-font-size-xl;
}

.ms-Callout-subText {
margin: 0;
font-weight: $ms-font-weight-semilight;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-s;
}

.ms-Callout-close {
margin: 0;
border: 0;
background: none;
cursor: pointer;
position: absolute;
top: 12px;
right: 12px;
padding: 8px;
width: 32px;
height: 32px;
font-size: 14px;
color: $ms-color-neutralSecondary;
z-index: 110;
}

.ms-Callout-link {
font-size: $ms-font-size-m;
}

.ms-Callout-inner {
height: 100%;
padding-top: 0;
padding-bottom: 12px;
padding-left: 28px;
padding-right: 28px;
}

.ms-Callout-actions {
position: relative;
margin-top: 20px;
width: 100%;
white-space: nowrap;

.ms-CommandButton.ms-CommandButton--inline {
height: $ms-Callout-commandButtonHeight;
line-height: $ms-Callout-commandButtonHeight;

.ms-CommandButton-button {
height: $ms-Callout-commandButtonHeight;
line-height: $ms-Callout-commandButtonHeight;
}

.ms-CommandButton-label {
line-height: $ms-Callout-commandButtonHeight;
}

.ms-CommandButton-icon {
line-height: $ms-Callout-commandButtonHeight;
}

&:hover .ms-Button,
&:focus .ms-Button {
color: $ms-color-themePrimary;
}
}

.ms-Callout-button {
margin-right: 12px;
}
}

//= Modifier: OOBE (Out of box experience) callout
//
.ms-Callout.ms-Callout--OOBE {

.ms-Callout-header {
padding: 28px 24px;
background-color: $ms-color-themePrimary;
}

.ms-Callout-title {
font-weight: $ms-font-weight-light;
font-size: $ms-font-size-xxl;
color: $ms-color-white;
}

.ms-Callout-inner {
padding-top: 20px;
}

.ms-Callout-subText {
font-size: $ms-font-size-m;
}
}


//= Modifier: ActionText callout
//
.ms-Callout.ms-Callout--actionText {
.ms-Callout-actions {
border-top: 1px solid $ms-color-neutralLight;
padding-top: 12px;
}

.ms-Callout-inner {
padding-bottom: 12px;
}
}


//= Modifier: Peek callout
//
.ms-Callout.ms-Callout--peek {
.ms-Callout-header {
padding-bottom: 0;
}

.ms-Callout-title {
font-size: $ms-font-size-m;
}

.ms-Callout-actions {
margin-top: 12px;
margin-bottom: -4px;
}
}
19 changes: 19 additions & 0 deletions dist/components/CheckBox/CheckBox.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-CheckBox">
<input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
<label role="{{props.type}}"
class="ms-CheckBox-field {{#if props.disabled}} is-disabled {{/if}}"
tabindex="0"
aria-checked="{{props.checked}}"
name="{{props.name}}"
{{#if props.disabled}}
aria-disabled="true"
{{/if}}>
<span class="ms-Label">{{props.label}}</span>
</label>
</div>
6 changes: 6 additions & 0 deletions dist/components/CheckBox/CheckBox.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "CheckBox",
"dependencies": [
"Label"
]
}
175 changes: 175 additions & 0 deletions dist/components/CheckBox/CheckBox.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// CheckBox styles

$ms-checkbox-field-size: 20px;
$ms-checkbox-transition-duration: 200ms;
$ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);


.ms-CheckBox {
box-sizing: border-box;
color: $ms-color-neutralPrimary;
font-family: $ms-font-family-base;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
min-height: 36px;
position: relative;

.ms-Label {
font-size: $ms-font-size-m;
padding: 0 0 0 26px;
cursor: pointer;
display: inline-block;
}
}

// The hidden input
.ms-CheckBox-input {
position: absolute;
opacity: 0;
}

// The checkbox square container
.ms-CheckBox-field::before {
content: '';
display: inline-block;
border: 2px solid $ms-color-neutralTertiary;
width: $ms-checkbox-field-size;
height: $ms-checkbox-field-size;
cursor: pointer;
font-weight: normal;
position: absolute;
box-sizing: border-box;
transition-property: background, border, border-color;
transition-duration: $ms-checkbox-transition-duration;
transition-timing-function: $ms-checkbox-transition-timing;
}

// The check mark icon
.ms-CheckBox-field::after {
@include ms-Icon--CheckMark;
font-family: 'FabricMDL2Icons';
display: none;
position: absolute;
font-weight: 900;
background-color: transparent;
font-size: $ms-font-size-s-plus;
top: 0;
color: $ms-color-white;
line-height: $ms-checkbox-field-size;
width: $ms-checkbox-field-size;
text-align: center;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-black;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-white;
}
}

// The checkbox field
.ms-CheckBox-field {
display: inline-block;
cursor: pointer;
margin-top: 8px;
position: relative;
outline: 0;
vertical-align: top;

&:hover,
&:focus {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}

.ms-Label {
color: $ms-color-black;
}
}

//== State: A disabled checkbox
//
&.is-disabled {
cursor: default;

&::before {
background-color: $ms-color-neutralTertiaryAlt;
border-color: $ms-color-neutralTertiaryAlt;
color: $ms-color-neutralTertiaryAlt;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
border-color: $ms-color-contrastWhiteDisabled;
}
}

.ms-Label {
color: $ms-color-neutralTertiary;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-contrastWhiteDisabled;
}
}
}

//== State: A checkbox in focus
//
&.in-focus {
&::before {
border-color: $ms-color-neutralSecondaryAlt;
}

&.is-disabled::before {
border-color: $ms-color-neutralTertiaryAlt;
}

&.is-checked::before {
border-color: $ms-color-themeDarkAlt;
}
}
}

//== State: When the checkbox is checked
//
.ms-CheckBox-field.is-checked {
&::before {
border: 10px solid $ms-color-themePrimary;
background-color: $ms-color-themePrimary;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-contrastBlackSelected;
}

@media screen and (-ms-high-contrast: black-on-white) {
border-color: $ms-color-contrastWhiteSelected;
}
}

&::after {
display: block;
}

&:hover,
&:focus {
&::before {
border-color: $ms-color-themeDarkAlt;
}
}
}
15 changes: 15 additions & 0 deletions dist/components/ChoiceFieldGroup/ChoiceFieldGroup.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-ChoiceFieldGroup" id="{{props.id}}" role="{{props.groupType}}">
<div class="ms-ChoiceFieldGroup-title">
<label class="ms-Label {{#if props.required}} is-required {{/if}}">{{props.title}}</label>
</div>
<ul class="ms-ChoiceFieldGroup-list">
{{#each props.fields}}
{{renderPartial component props}}
{{/each}}
</ul>
</div>
7 changes: 7 additions & 0 deletions dist/components/ChoiceFieldGroup/ChoiceFieldGroup.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"name": "ChoiceFieldGroup",
"dependencies": [
"Label",
"CheckBox"
]
}
16 changes: 16 additions & 0 deletions dist/components/ChoiceFieldGroup/ChoiceFieldGroup.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
//== Component: Choicefield group
//
// Choice field groups contain multiple radio buttons or checkboxes
.ms-ChoiceFieldGroup {
@include ms-baseFont;
margin-bottom: 4px;

.ms-ChoiceFieldGroup-list {
padding: 0;
margin: 0;
}
}
27 changes: 27 additions & 0 deletions dist/components/CommandBar/CommandBar.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-CommandBar {{#if props.modifier}} ms-CommandBar--{{props.modifier}} {{/if}}">
{{#if props.sideCommands}}
<div class="ms-CommandBar-sideCommands">
{{#each props.sideCommands}}
{{renderPartial component props}}
{{/each}}
</div>
{{/if}}
<div class="ms-CommandBar-mainArea">
{{#if props.transientComponent}}
{{renderPartial props.transientComponent.component props.transientComponent.props}}
{{/if}}
{{#each props.commands}}
{{renderPartial component props}}
{{/each}}
{{#if props.overflow}}
<!-- Overflow Command -->
{{renderPartial props.overflow.component props.overflow.props}}
<!-- End Overflow Command -->
{{/if}}
</div>
</div>
11 changes: 11 additions & 0 deletions dist/components/CommandBar/CommandBar.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "CommandBar",
"dependencies": [
"ContextualMenu",
"Button",
"Label",
"SearchBox",
"CommandButton",
"ContextualHost"
]
}
141 changes: 141 additions & 0 deletions dist/components/CommandBar/CommandBar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Command Bar styles

$CommandBar-height: 40px;
$CommandBar-md-height: 44px;
$CommandBar-iconSize: 18px;
$CommandBar-sideAreaWidthsm: 128px;
$SearchBox-width: 220px;
$CommandBarItem-height: $CommandBar-height;
$red: #FF0000;

@mixin highContrastBorder($color) {
border-left: 1px solid $color;
border-right: 1px solid $color;
}

.ms-CommandBar {
@include ms-baseFont;
background-color: $ms-color-neutralLighter;
height: $CommandBar-height;
white-space: nowrap;
padding-left: 0;
border: 0;
position: relative;

&:focus {
outline: none;
}

.ms-CommandButton--actionButton {
border-right: 1px solid $ms-color-neutralLight;
}

//== CommandBar -> ms-Button specific changes
//
.ms-Button {
height: 100%;

&.ms-Button--noLabel {
.ms-Button-icon {
padding-right: 0;
}
}

&.is-hidden {
display: none;
}
}

.ms-SearchBox,
.ms-SearchBox-field,
.ms-SearchBox-label {
height: 100%;
}

.ms-SearchBox {
display: inline-block;
vertical-align: top;
transition: margin-right $ms-duration2;
}

.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
width: $SearchBox-width;

@media only screen and (max-width: $ms-screen-md-max) {
width: 100%;
position: absolute;
left: 0;
right: 0;
z-index: $ms-zIndex-front;
}
}

.ms-CommandBar-overflowButton {
.ms-CommandButton-button {
font-size: 18px;
padding: 0 11px;
}
}

// Search is collapsed unless activated and its only
// collapsed < L break points

@media only screen and (min-width: $ms-screen-xl-min) {
.ms-SearchBox {
margin-right: 24px;
}
}

@media only screen and (max-width: $ms-screen-md-max) {
height: $CommandBar-md-height;
}

@media only screen and (min-width: $ms-screen-lg-min) {

&.search-expanded {
.ms-SearchBox {
margin-right: 8px;
}
}

.ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
transition: none;
}
}
}

.ms-CommandBar-mainArea {
overflow-x: hidden;
display: block;
height: 100%;
overflow: hidden;
}

.ms-CommandBar-sideCommands {
float: right;
text-align: right;
width: auto;
padding-right: 4px;
height: 100%;

.ms-Button:last-child {
margin-right: 0;
}

@media only screen and (min-width: $ms-screen-lg-min) {
min-width: $CommandBar-sideAreaWidthsm;
}

@media only screen and (min-width: $ms-screen-xl-min) {
padding-right: 20px;
}
}
20 changes: 20 additions & 0 deletions dist/components/CommandButton/CommandButton.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-CommandButton {{props.customClasses}} {{#if props.modifier}}ms-CommandButton--{{props.modifier}}{{/if}} {{props.state}} {{#if props.disabled}}is-disabled{{/if}}">
<{{props.tag}} class="ms-CommandButton-button" {{#if props.disabled}}tabIndex="-1"{{/if}}>
{{#if props.icon}}
<span class="ms-CommandButton-icon {{#if props.iconColor}}ms-fontColor-{{props.iconColor}}{{/if}}"><i class="ms-Icon ms-Icon--{{props.icon}}"></i></span>{{/if}}<span class="ms-CommandButton-label">{{props.label}}</span>{{#if props.dropdownIcon}}<span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--{{props.dropdownIcon}}"></i></span>
{{/if}}
</{{props.tag}}>
{{#if props.splitIcon}}
<{{props.tag}} class="ms-CommandButton-splitIcon">
<i class="ms-Icon ms-Icon--{{props.splitIcon}}"></i>
</{{props.tag}}>
{{/if}}
{{#if props.dropdown}}
{{renderPartial props.dropdown.component props.dropdown.props}}
{{/if}}
</div>
13 changes: 13 additions & 0 deletions dist/components/CommandButton/CommandButton.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "CommandButton",
"dependencies": [
"ContextualMenu",
"ContextualHost"
],
"props": {
"label": "Command",
"icon": "circleFill",
"tag": "button",
"iconColor": "themePrimary"
}
}
296 changes: 296 additions & 0 deletions dist/components/CommandButton/CommandButton.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Button styles

$CommandButton-height: 40px;
$CommandButton-md-height: 44px;
$CommandButton-padding: 8px;
$CommandButtonIcon-size: 16px;
$CommandButtonIcon-md-size: 20px;

.ms-CommandButton {
@include ms-baseFont;
display: inline-block;
position: relative;
vertical-align: top;

&.is-hidden {
display: none;
}

&:disabled,
&.is-disabled {
.ms-CommandButton-button {
cursor: default;

&:hover {
background-color: $ms-color-themeLighterAlt;
}

.ms-CommandButton-label {
color: $ms-color-neutralTertiary;
}

.ms-CommandButton-icon {
color: $ms-color-neutralTertiary;
}
}
}

.ms-ContextualMenu {
display: none;
}
}

//== Mixins: Base button, focus, and icon alignments
//
@mixin ms-CommandButton-iconBase {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@mixin ms-CommandBar-focusRectangle {
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid $ms-color-neutralPrimary;
position: absolute;
z-index: 10;
content: '';
outline: none;
}

@mixin ms-CommandBarButton-buttonBase {
@include ms-u-normalize;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
// background-color: $ms-color-themeLighterAlt;
// border: 1px solid $ms-color-themeLighterAlt;
cursor: pointer;
display: inline-block;
height: $CommandButton-height;
line-height: $CommandButton-height;
outline: 1px solid transparent;
padding: 0 $CommandButton-padding;
position: relative;
vertical-align: top;
background: transparent;

&:hover {
background-color: $ms-color-neutralLight;

.ms-CommandButton-label {
color: $ms-color-neutralDark;
}
}

&:active {
background-color: $ms-color-neutralLight;
}

&:focus::before {
@include ms-CommandBar-focusRectangle;
}

&:focus {
outline: 0;
}

@media only screen and (max-width: $ms-screen-md-max) {
height: $CommandButton-md-height;

.ms-CommandButton-icon {
font-size: $CommandButtonIcon-md-size;
}

.ms-CommandButton-label {
line-height: $CommandButton-md-height;
}
}
}

.ms-CommandButton-button,
.ms-CommandButton-splitIcon {
@include ms-CommandBarButton-buttonBase;
}

.ms-CommandButton-button {
border: 0;
margin: 0;
}

// Add space between adjacent command buttons.
.ms-CommandButton + .ms-CommandButton {
margin-left: 8px;

@media only screen and (max-width: $ms-screen-md-max) {
margin-left: 4px;
}
}

.ms-CommandButton-icon {
display: inline-block;
margin-right: $CommandButton-padding;
position: relative;
font-size: $CommandButtonIcon-size;
min-width: 16px;
height: 100%;

.ms-Icon {
@include ms-CommandButton-iconBase;
}
}

.ms-CommandButton-label {
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
color: $ms-color-neutralPrimary;
line-height: $CommandButton-height;
height: 100%;
display: inline-block;
vertical-align: top;

&:hover {
color: $ms-color-neutralDark;
}
}

.ms-CommandButton-dropdownIcon,
.ms-CommandButton-splitIcon {
display: inline-block;
position: relative;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-s;
font-weight: $ms-font-weight-semilight;
min-width: 12px;
height: 100%;
vertical-align: top;
margin-left: 8px;

.ms-Icon {
line-height: normal;
padding-top: $CommandButton-padding * 2;
}

&:focus::before {
@include ms-CommandBar-focusRectangle;
}

@media only screen and (max-width: $ms-screen-md-max) {
display: none;
}
}

.ms-CommandButton-splitIcon {
margin-left: -2px;
width: 27px;
border: 0;

.ms-Icon {
margin-left: -1px;
position: relative;
padding-top: 16px;

&::after {
position: absolute;
content: ' ';
width: 1px;
height: 16px;
top: 12px;
left: -8px;
border-left: 1px solid $ms-color-neutralTertiaryAlt;
}
}
}

//= Modifier: No Label modifier
//
.ms-CommandButton.ms-CommandButton--noLabel {
.ms-CommandButton-icon {
margin-right: 0;
}

.ms-CommandButton-label {
display: none;
}

.ms-CommandButton-button {
padding: 0 12px;
}
}

//= Modifier: Inline modifier
//
.ms-CommandButton.ms-CommandButton--inline {
.ms-CommandButton-button {
background: none;
}
}

//= Modifier: Action Button modifier
//
.ms-CommandButton.ms-CommandButton--actionButton {
.ms-CommandButton-button {
width: 50px;
height: $CommandButton-height;
}

.ms-CommandButton-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
padding-right: 0;
}
}

@mixin ms-CommandButton-pivotLine {
content: '';
height: 2px;
position: absolute;
left: 0;
right: 0;
background-color: $ms-color-themePrimary;
bottom: 0;
z-index: $ms-zIndex-middle;
}

//= Modifier: Pivot Button modifier
//
.ms-CommandButton.ms-CommandButton--pivot {

&.is-active::before {
@include ms-CommandButton-pivotLine;
}

&:hover {
&::before {
@include ms-CommandButton-pivotLine;
}
}
}

.ms-CommandButton.ms-CommandButton--textOnly,
.ms-CommandButton.ms-CommandButton--pivot {

.ms-CommandButton-label {
display: inline-block;

@media only screen and (max-width: $ms-screen-sm-max) {
font-size: 16px;
}
}
}
15 changes: 15 additions & 0 deletions dist/components/ContextualHost/ContextualHost.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-ContextualHost
{{#if props.arrowPosition}} ms-ContextualHost--{{props.arrowPosition}} {{/if}}
{{#if props.modifier}} ms-ContextualHost--{{props.modifier}} {{/if}}
{{#if props.state}} {{props.state}} {{/if}}">
<div class="ms-ContextualHost-main">
{{#if @partial-block}} {{> @partial-block }} {{/if}}
</div>
<div class="ms-ContextualHost-beak"></div>
</div>
3 changes: 3 additions & 0 deletions dist/components/ContextualHost/ContextualHost.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name": "ContextualHost"
}
143 changes: 143 additions & 0 deletions dist/components/ContextualHost/ContextualHost.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
.ms-ContextualHost {
@include ms-baseFont;
z-index: $ms-zIndex-front;
margin: 16px auto;
position: relative;
min-width: 10px;
display: none;
background-color: $ms-color-white;
@include drop-shadow;

&.is-positioned {
position: absolute;
margin: 0;
}

&.is-open {
display: inline-block;
}
}

// Mixin for arrow size and color
@mixin arrowBorders($ms-color-top, $ms-color-right, $ms-color-bottom, $ms-color-left) {
border-top: 10px solid $ms-color-top;
border-right: 10px solid $ms-color-right;
border-bottom: 10px solid $ms-color-bottom;
border-left: 10px solid $ms-color-left;
}

.ms-ContextualHost-beak {
box-shadow: 0 0 15px -5px $ms-color-neutralPrimaryAlt;
position: absolute;
width: 28px;
height: 28px;
background: $ms-color-white;;
border: 1px solid $ms-color-neutralLight;
box-sizing: border-box;
top: -6px;
display: none;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: $ms-zIndex-back;
outline: 1px solid transparent;
}

//= Modifier: ContextualHost with left and right arrows
//
.ms-ContextualHost.ms-ContextualHost--arrowLeft,
.ms-ContextualHost.ms-ContextualHost--arrowRight {
.ms-ContextualHost-beak {
top: 40px;
display: none; // Hide left and right arrows on sm screens
}
}

.ms-ContextualHost.ms-ContextualHost--arrowLeft {
.ms-ContextualHost-beak {
left: -10px;
}
}

.ms-ContextualHost.ms-ContextualHost--arrowRight {
.ms-ContextualHost-beak {
right: -10px;
}
}

.ms-ContextualHost.ms-ContextualHost--arrowTop {
.ms-ContextualHost-beak {
top: -10px;
}
}

.ms-ContextualHost.ms-ContextualHost--arrowBottom {
.ms-ContextualHost-beak {
bottom: -10px;
}
}

// The actual ContextualHost element
.ms-ContextualHost-main {
position: relative;
background-color: $ms-color-white;
box-sizing: border-box;
outline: 1px solid transparent;
z-index: $ms-zIndex-middle;
min-height: 10px;
}

.ms-ContextualHost-close {
margin: 0;
border: 0;
background: none;
cursor: pointer;
position: absolute;
top: 12px;
right: 12px;
padding: 8px;
width: 32px;
height: 32px;
font-size: $ms-font-size-m;
color: $ms-color-neutralSecondary;
z-index: $ms-zIndex-front;
}

//= Modifier: Close button ContextualHost
//
.ms-ContextualHost.ms-ContextualHost--close {
.ms-ContextualHost-title {
margin-right: 20px; // Avoid overlap with close button
}
}

//= Modifier: Close button ContextualHost
//

.ms-ContextualHost.ms-ContextualHost--primaryArrow {
.ms-ContextualHost-beak {
background-color: $ms-color-themePrimary;
}
}

@media (min-width: $ms-screen-md-min) {
// Make width larger and remove centering on md+ screens
.ms-ContextualHost {
margin: 16px;

&.is-positioned {
margin: 0;
}
}

// Show arrows right and left
.ms-ContextualHost.ms-ContextualHost--arrowRight,
.ms-ContextualHost.ms-ContextualHost--arrowLeft {
.ms-ContextualHost-beak {
display: block;
}
}
}
28 changes: 28 additions & 0 deletions dist/components/ContextualMenu/ContextualMenu.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<ul class="ms-ContextualMenu {{#if props.state}} {{props.state}}{{/if}} {{#if props.modifier}}ms-ContextualMenu--{{props.modifier}}{{/if}}">
{{#each props.items}}
{{#if modifier}}
<li class="ms-ContextualMenu-item ms-ContextualMenu-item--{{modifier}}">{{title}}</li>
{{else}}
<li class="ms-ContextualMenu-item {{#if subMenuItems}}ms-ContextualMenu-item--hasMenu{{/if}}">
<a class="ms-ContextualMenu-link {{#if state}} {{state}} {{/if}}" tabindex="1" {{#if href}} href="" {{/if}}>{{title}}</a>
{{#if icon}}<i class="ms-Icon ms-Icon--{{icon}} {{#if iconSize}}ms-fontSize-{{iconSize}}{{/if}}"></i>{{/if}}
{{#if subMenuItems}}
<i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--ChevronRight"></i>
<ul class="ms-ContextualMenu is-hidden">
{{#each subMenuItems}}
<li class="ms-ContextualMenu-item">
<a class="ms-ContextualMenu-link {{#if state}} {{state}} {{/if}}" tabindex="1" {{#if href}} href="" {{/if}}>{{title}}</a>
{{#if icon}}<i class="ms-Icon ms-Icon--{{icon}} {{#if iconSize}}ms-fontSize-{{iconSize}}{{/if}}"></i>{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/if}}
{{/each}}
</ul>
6 changes: 6 additions & 0 deletions dist/components/ContextualMenu/ContextualMenu.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "ContextualMenu",
"dependencies": [
"ContextualHost"
]
}
211 changes: 211 additions & 0 deletions dist/components/ContextualMenu/ContextualMenu.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Contextual Menu styles

.ms-ContextualMenu {
@include ms-baseFont;
@include ms-u-normalize;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
display: block;
min-width: 180px;
max-width: 220px;
list-style-type: none;
position: relative;
background-color: $ms-color-white;

&.is-hidden {
display: none;
}
}

.ms-ContextualMenu-item {
position: relative;
}

.ms-ContextualMenu-link {
@include ms-u-borderBox;
text-decoration: none;
color: $ms-color-neutralPrimary;
border: 1px solid transparent;
cursor: pointer;
display: block;
height: 36px;
overflow: hidden;
line-height: 34px;
padding: 0 16px 0 25px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;

&:hover,
&:active,
&:focus {
background-color: $ms-color-neutralLighter;
color: $ms-color-neutralDark;

.ms-ContextualMenu-subMenuIcon {
color: $ms-color-neutralDark;
}
}

&:focus {
outline: transparent;
border: 1px solid $ms-color-neutralSecondary;
}

&.is-selected {
background-color: $ms-color-neutralQuaternaryAlt;
color: $ms-color-black;
font-weight: $ms-font-weight-semibold;

~.ms-ContextualMenu-subMenuIcon {
color: $ms-color-black;
}

&:hover {
background-color: $ms-color-neutralQuaternary;
}
}

&.is-disabled {
color: $ms-color-neutralTertiary;
background-color: $ms-color-white;
pointer-events: none;

&:active,
&:focus {
border-color: $ms-color-white;
}

.ms-Icon {
color: $ms-color-neutralTertiary;
pointer-events: none;
cursor: default;
}
}
}

// Modifier: Menu item Dividers
.ms-ContextualMenu-item.ms-ContextualMenu-item--divider {
cursor: default;
display: block;
height: 1px;
background-color: $ms-color-neutralLight;
position: relative;
}

// Modifier: Menu item Headers
.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
color: $ms-color-themePrimary;
font-size: $ms-font-size-s;
text-transform: uppercase;
height: 36px;
line-height: 36px;
padding: 0 18px;
}

// Modifier: Contextual menu with submenu
.ms-ContextualMenu-item.ms-ContextualMenu-item--hasMenu .ms-ContextualMenu {
position: absolute;
top: -1px;
left: 178px; // Move the submenu to the left of the menu item that triggered it
}

// Right chevron.
// Note: The .ms-ContextualMenu-caretRight class has been deprecated.
// Please use .ms-ContextualMenu-subMenuIcon.
.ms-ContextualMenu-subMenuIcon,
.ms-ContextualMenu-caretRight {
color: $ms-color-neutralPrimary;
font-size: 8px;
font-weight: 600;
width: 24px;
height: 36px;
line-height: 36px;
position: absolute;
text-align: center;
top: 0;
right: 0;
z-index: 1;
pointer-events: none;
}

//== Modifier: Multi-select menu
//
.ms-ContextualMenu.ms-ContextualMenu--multiselect {

// Align the header with the items
.ms-ContextualMenu-item.ms-ContextualMenu-item--header {
padding: 0 16px 0 26px;
}

.ms-ContextualMenu-link {

// Multi-select checkmark
&.is-selected {
background-color: $ms-color-white;
font-weight: $ms-font-weight-semibold;
color: $ms-color-neutralPrimary;

// Checkmark
&::after {
@include ms-Icon;
color: $ms-color-neutralPrimary;
content: '\E73E';
font-size: $ms-icon-size-xs;
font-weight: 800;
height: 36px;
line-height: 36px;
position: absolute;
left: 7px;
}

&:hover,
&:focus {
color: $ms-color-neutralDark;
background-color: $ms-color-neutralLighter;

&::after {
color: $ms-color-neutralDark;
}
}

&:active {
color: $ms-color-black;
background-color: $ms-color-neutralQuaternary;

&::after {
color: $ms-color-black;
}
}
}
}
}

.ms-ContextualMenu.ms-ContextualMenu--hasIcons,
.ms-ContextualMenu.ms-ContextualMenu--hasChecks {
.ms-ContextualMenu-link {
padding-left: 40px;
}

.ms-Icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
text-align: center;
}
}

.ms-ContextualMenu.ms-ContextualMenu--hasIcons {
width: 220px;
}
49 changes: 49 additions & 0 deletions dist/components/DatePicker/DatePicker.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- This is a sample Date Picker that works for Gregorian calendars. It uses jQuery and pickadate.js for demonstration. -->
<!-- For more information on this version of pickadate.js (3.5.3), go here: https://github.com/amsul/pickadate.js/tree/505e00b9208a81ffb169338042c0b9c781e76fb7 -->

<div class="ms-DatePicker">
<div class="ms-TextField">
<label class="ms-Label">Start date</label>
<i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
<input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
</div>
<div class="ms-DatePicker-monthComponents">
<span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
<span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
<div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
</div>
<span class="ms-DatePicker-goToday js-goToday">Go to today</span>
<div class="ms-DatePicker-monthPicker">
<div class="ms-DatePicker-header">
<div class="ms-DatePicker-yearComponents">
<span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
<span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
</div>
<div class="ms-DatePicker-currentYear js-showYearPicker"></div>
</div>
<div class="ms-DatePicker-optionGrid">
<span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span>
<span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span>
</div>
</div>
<div class="ms-DatePicker-yearPicker">
<div class="ms-DatePicker-decadeComponents">
<span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
<span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
</div>
</div>
</div>
3 changes: 3 additions & 0 deletions dist/components/DatePicker/DatePicker.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name": "DatePicker"
}
530 changes: 530 additions & 0 deletions dist/components/DatePicker/DatePicker.scss

Large diffs are not rendered by default.

115 changes: 115 additions & 0 deletions dist/components/DetailsList/DetailsList.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!-- Top level: DetailsList -->
<div class="ms-DetailsList">
<!-- DetailsHeader -->
<div class="ms-DetailsHeader ms-font-m">
<button class="ms-DetailsHeader-cell is-check">
<svg class="ms-Check" height="20" width="20">
<!-- <svg class="ms-Check is-checked" height="20" width="20"> -->
<circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
<polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
</svg>
</button>

<div class="ms-DetailsHeader-cellSizeWrapper">
<div class="ms-DetailsHeader-cellWrapper">
<button class="ms-DetailsHeader-cell" style="width: 300px">
<span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
<i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
</span>
<span class="ms-DetailsHeader-cellText">Name</span>
</button>
<!-- Resizer -->
<div class="ms-DetailsHeader-cell is-sizer"></div>
</div>
</div>

<div class="ms-DetailsHeader-cellSizeWrapper">
<div class="ms-DetailsHeader-cellWrapper">
<button class="ms-DetailsHeader-cell" style="width: 200px">
<span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
<i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
</span>
<span class="ms-DetailsHeader-cellText">Modified date</span>
</button>
<!-- Resizer -->
<div class="ms-DetailsHeader-cell is-sizer"></div>
</div>
</div>

<div class="ms-DetailsHeader-cellSizeWrapper">
<div class="ms-DetailsHeader-cellWrapper">
<button class="ms-DetailsHeader-cell" style="width: 200px">
<span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
<i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
</span>
<span class="ms-DetailsHeader-cellText">Modified by</span>
</button>
<!-- Resizer -->
<div class="ms-DetailsHeader-cell is-sizer"></div>
</div>
</div>

<div class="ms-DetailsHeader-cellSizeWrapper">
<div class="ms-DetailsHeader-cellWrapper">
<button class="ms-DetailsHeader-cell" style="width: 200px">
<span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
<i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
</span>
<span class="ms-DetailsHeader-cellText">Sharing</span>
</button>
<!-- Resizer -->
<div class="ms-DetailsHeader-cell is-sizer"></div>
</div>
</div>
<div class="ms-DetailsHeader-sizerCover"></div>
</div>
<!-- /DetailsHeader -->

<!-- List -->
<div class="ms-DetailsList-list">
<!-- DetailsRow -->
<div class="ms-DetailsRow ms-font-m is-selected">
<div class="ms-DetailsRow-focusBox"></div>

<button class="ms-DetailsRow-check">
<svg class="ms-Check" height="20" width="20">
<circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
<polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
</svg>
</button>

<div class="ms-DetailsRow-cell is-clipped" style="width: 300px">Commissioned Research</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Yesterday, 3:34pm</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Alton Lafferty</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px"><i class="ms-DetailsRow-cellIcon ms-Icon ms-Icon--People"></i><span class="ms-DetailsRow-cellText">Editor</span></div>

<span class="ms-DetailsRow-cell ms-DetailsRow-cellMeasurer"></span>
</div>


<div class="ms-DetailsRow ms-font-m">
<div class="ms-DetailsRow-focusBox"></div>

<button class="ms-DetailsRow-check">
<svg class="ms-Check" height="20" width="20">
<circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
<polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
</svg>
</button>

<div class="ms-DetailsRow-cell is-clipped" style="width: 300px">Commissioned Research</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Yesterday, 3:34pm</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Alex Darrow</div>
<div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px"><i class="ms-DetailsRow-cellIcon ms-Icon ms-Icon--People"></i><span class="ms-DetailsRow-cellText">Editor</span></div>

<span class="ms-DetailsRow-cell ms-DetailsRow-cellMeasurer"></span>
</div>
<!-- /DetailsRow -->
</div>
</div>
13 changes: 13 additions & 0 deletions dist/components/DetailsList/DetailsList.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "DetailsList",
"notes": "",
"description": "DetailsList is a derivative of List and provides a sortable, filterable, justified table for rendering large sets of items.",
"template": "DetailsList.html",
"class": "ms-DetailsList",
"branches": [
{
"name": "Default",
"default": true
}
]
}
340 changes: 340 additions & 0 deletions dist/components/DetailsList/DetailsList.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,340 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Styles for details list

// Variables
$rowHeight: 36px;
$selectedColor: $ms-color-themeLighter;
$selectedHoverColor: $ms-color-themeLight;
$focusedBorderColor: $ms-color-neutralTertiary;
$selectedColor: $ms-color-themeLighter;
$selectedHoverColor: $ms-color-themeLight;
$unselectedHoverColor: $ms-color-themeLighterAlt;

//== DetailsList
//
.ms-DetailsList {
position: relative;
}

.ms-DetailsList.is-horizontalConstrained {
overflow-x: auto;
overflow-y: inherit;
}

.ms-DetailsList-cell {
word-break: break-word;
}


//== DetailsHeader
//
.ms-DetailsHeader {
display: inline-block;
min-width: 100%;
height: $rowHeight;
line-height: $rowHeight;
white-space: nowrap;
padding-bottom: 1px;
border-bottom: 1px solid $ms-color-neutralLight;
margin-bottom: 1px;
cursor: default;

@include user-select(none);

&.is-singleSelect {
padding-left: 40px;
}

&.is-resizingColumn .ms-DetailsHeader-sizerCover {
background: transparent;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 99;
cursor: col-resize;
}
}

.ms-DetailsHeader-cell.is-check .ms-Check-circle {
visibility: hidden;
}

.ms-DetailsHeader-cell.is-check:hover .ms-Check-circle,
.ms-DetailsHeader.is-allSelected .ms-Check-circle {
visibility: visible;
}

.ms-DetailsHeader-cellWrapper {
display: inline-block;
position: relative;
}

.ms-DetailsHeader-cellSizeWrapper {
display: inline-block;
vertical-align: top;
margin-right: 16px;

&:last-child {
margin-right: 0;
}
}

.ms-DetailsHeader-filterChevron.ms-Icon {
color: $ms-color-neutralTertiary;
padding-left: 4px;
vertical-align: middle;
}

.ms-DetailsHeader-cell {
display: inline-block;
box-sizing: border-box;
padding: 0 8px;
color: $ms-color-neutralTertiary;
border: 0;
background: none;
line-height: inherit;
margin: 0;
font-size: inherit;
font-family: inherit;
text-align: left;
height: $rowHeight;
vertical-align: top;

&.is-check {
position: relative;
padding: 8px 10px;
margin: 0;
}

&:focus {
outline: transparent;
}

&.is-sortable {
color: $ms-color-black;
cursor: default;

&:hover {
background-color: $ms-color-neutralLight;
}
}

&.is-filter {
position: absolute;
right: 0;
width: 20px;
top: 0;
bottom: 0;
padding: 0;
text-align: center;
color: $ms-color-black;

&:hover {
background-color: $ms-color-neutralLight;
}
}

&.is-filter::before {
content: '';
position: absolute;
border-left: 1px solid $ms-color-neutralTertiary;
top: 10px;
bottom: 10px;
left: 0;
}

&.is-sizer {
position: absolute;
width: 16px;
cursor: col-resize;
bottom: 0;
top: 0;
height: inherit;
z-index: 99;
}

&.is-sorted.is-sortable .ms-DetailsHeader-sortArrow {
display: inline;
}

&is-sortedDescending .ms-DetailsHeader-sortArrow {
transform: rotate(180deg);
}
}

.ms-DetailsHeader-cell.is-resizing.is-sizer::after,
.ms-DetailsHeader-cell.is-sizer:hover::after {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: $ms-color-neutralLight;
border: 1px solid $ms-color-white;
}

.ms-Fabric.is-focusVisible .ms-DetailsHeader-cell:focus::before,
// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
.ms-DetailsHeader-cell:focus::before {
content: '';
pointer-events: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid $ms-color-neutralTertiary;
}

.ms-DetailsHeader-sortArrow.ms-Icon {
font-size: 12px;
margin-right: 4px;
display: none;
color: $ms-color-neutralTertiary;
}


//== DetailsRow
//
.ms-DetailsRow {
position: relative;
display: inline-block;
min-width: 100%;
min-height: $rowHeight;
vertical-align: top;
white-space: nowrap;
padding: 10px 0;

@include user-select(none);

cursor: default;
box-sizing: border-box;

&:focus {
outline: transparent;
}

&.ms-DetailsRow.is-selected {
background: $selectedColor;
}
}

.ms-Fabric.is-stationary .ms-DetailsRow:hover,
// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
.ms-DetailsRow:hover {
background: $unselectedHoverColor;
}

.ms-Fabric.is-stationary .ms-DetailsRow.is-selected:hover,
// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
.ms-DetailsRow.is-selected:hover {
background: $selectedHoverColor;
}

.ms-DetailsRow-cell {
display: inline-block;
box-sizing: border-box;
padding: 0 8px;
vertical-align: top;
white-space: normal;
word-break: break-word;
margin-right: 16px;

&.is-clipped {
overflow: hidden;
}
}

.ms-DetailsRow-cell:last-child {
margin-right: 0;
}

.ms-DetailsRow-cellIcon {
display: inline-block;
margin-right: 6px;
position: relative;
bottom: -2px;
}

.ms-DetailsRow-check {
display: inline-block;
cursor: default;
padding: 10px;
margin: -10px 0;
box-sizing: border-box;
vertical-align: top;
background: none;
border: 0;
visibility: hidden;

&:focus {
outline: transparent;
}
}

.ms-Fabric.is-stationary .ms-DetailsRow:hover .ms-DetailsRow-check,
// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
.ms-DetailsRow:hover .ms-DetailsRow-check,
.ms-DetailsRow.is-selected .ms-DetailsRow-check {
visibility: visible;
}

.ms-Fabric.is-focusVisible .ms-DetailsRow:focus .ms-DetailsRow-focusBox,
// TODO: Scope this state to *not* apply when wrapped in ms-Fabric
.ms-DetailsRow:focus .ms-DetailsRow-focusBox {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px solid $focusedBorderColor;
}

.ms-DetailsRow-cellMeasurer {
position: absolute;
visibility: hidden;
white-space: nowrap;
top: -1000000000;
}

//== Check
//
.ms-Check {
display: inline-block;
cursor: default;
line-height: 0;
vertical-align: top;

&.is-checked {

.ms-Check-circle {
fill: $ms-color-themePrimary;
stroke: $ms-color-white;
stroke-width: 1px;
}

.ms-Check-check {
stroke: $ms-color-white;
}
}
}

.ms-Check-circle {
fill: $ms-color-white;
stroke: $ms-color-neutralTertiaryAlt;
}

.ms-Check-check {
stroke: $ms-color-neutralTertiaryAlt;
}
30 changes: 30 additions & 0 deletions dist/components/Dialog/Dialog.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<div class="ms-Dialog {{#if props.modifier}} ms-Dialog--{{props.modifier}} {{/if}}">
{{#if props.closeIcon}}
<button class="ms-Dialog-button ms-Dialog-buttonClose">
<i class="ms-Icon ms-Icon--{{props.closeIcon}}"></i>
</button>
{{/if}}
<div class="ms-Dialog-title">{{props.title}}</div>
<div class="ms-Dialog-content">
{{#if props.subText}}
<p class="ms-Dialog-subText">{{props.subText}}</p>
{{/if}}
{{#if props.components}}
{{#each props.components}}
{{renderPartial component props}}
{{/each}}
{{/if}}
</div>
{{#if props.actions}}
<div class="ms-Dialog-actions">
{{#each props.actions}}
{{renderPartial component props}}
{{/each}}
</div>
{{/if}}
</div>
9 changes: 9 additions & 0 deletions dist/components/Dialog/Dialog.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"name": "Dialog",
"dependencies": [
"Button",
"CheckBox",
"Overlay",
"ContextualHost"
]
}
121 changes: 121 additions & 0 deletions dist/components/Dialog/Dialog.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Dialog styles

.ms-Dialog {
@include ms-baseFont;
@include drop-shadow(0, 0, 5px, 0, .4);
background-color: $ms-color-white;
display: none;
height: auto;
min-width: 220px;
max-width: 340px;
padding: 28px 24px;
z-index: $ms-zIndex-front;
position: fixed;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}

.ms-Dialog.is-open {
display: block;
}

.ms-Dialog-title {
font-size: $ms-font-size-xl;
font-weight: $ms-font-weight-light;
margin-bottom: 24px;
}

.ms-Dialog-content {
position: relative;
}

.ms-Dialog-subText {
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-s;
font-weight: $ms-font-weight-semilight;
line-height: 1.5;
}

.ms-Dialog-actions {
margin-top: 24px;
text-align: right;
}

//= Modifier: Multiline button dialog
//
.ms-Dialog--multiline {
.ms-Dialog-title {
font-size: $ms-font-size-xxl;
}
}

//= Modifier: Large header dialog
//
.ms-Dialog.ms-Dialog--lgHeader {
.ms-Dialog-title {
background-color: $ms-color-themePrimary;
color: $ms-color-white;
font-size: $ms-font-size-xxl;
font-weight: $ms-font-weight-light;
padding: 28px 24px;
margin-top: -28px;
margin-left: -24px;
margin-right: -24px;
}
}

// Close button, hidden by default
.ms-Dialog-buttonClose {
background: none;
border: 0;
cursor: pointer;
margin: 0;
padding: 4px;
position: absolute;
right: 12px;
top: 12px;
z-index: $ms-zIndex-front;

.ms-Icon.ms-Icon--Cancel {
color: $ms-color-neutralSecondary;
font-size: 16px;
}
}

// Add margin bottom between compound buttons
.ms-Button.ms-Button--compound:not(:last-child) {
margin-bottom: 20px;
}

//= Modifier: Dialog with close button
//
.ms-Dialog.ms-Dialog--close:not(.ms-Dialog--lgHeader) {
// Push the right side over so the icon doesn't overlap the text
.ms-Dialog-title {
margin-right: 20px;
}

// Show the close button
.ms-Dialog-button.ms-Dialog-buttonClose {
display: block;
}
}

@media (min-width: $ms-screen-md-min) {
// Allow wider dialog on larger screens
.ms-Dialog-main {
width: auto;
min-width: 288px;
max-width: 340px;
}
}
10 changes: 10 additions & 0 deletions dist/components/DialogHost/DialogHost.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<div class="ms-DialogHost
{{#if props.modifier}} ms-DialogHost--{{props.modifier}} {{/if}} {{props.state}}">
<div class="ms-DialogHost-main">
{{#if @partial-block}} {{> @partial-block }} {{/if}}
</div>
</div>
3 changes: 3 additions & 0 deletions dist/components/DialogHost/DialogHost.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name": "DialogHost"
}
15 changes: 15 additions & 0 deletions dist/components/DialogHost/DialogHost.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
.ms-DialogHost {
@include ms-baseFont;
@include drop-shadow;
background-color: $ms-color-white;
box-sizing: border-box;
line-height: 1.35;
width: 288px;
position: relative;
text-align: left;
outline: 1px solid transparent;
}
16 changes: 16 additions & 0 deletions dist/components/Dropdown/Dropdown.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!-- Future implementation to be discussed -->
<div class="ms-Dropdown {{#if props.modifier}} ms-Dropdown--{{props.modifier}} {{/if}} {{props.state}}" tabindex="0">
<label class="ms-Label">{{props.label}}</label>
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
<select class="ms-Dropdown-select">
{{#each props.items}}
<option>{{name}}</option>
{{/each}}
</select>
</div>
6 changes: 6 additions & 0 deletions dist/components/Dropdown/Dropdown.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "Dropdown",
"dependencies": [
"Label"
]
}
243 changes: 243 additions & 0 deletions dist/components/Dropdown/Dropdown.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Dropdown styles

// Mixin for high contrast mode link states
@mixin highContrastListItemState {
@media screen and (-ms-high-contrast: active) {
background-color: $ms-color-contrastBlackSelected;
border-color: $ms-color-contrastBlackSelected;
color: $ms-color-black;

&:focus {
border-color: $ms-color-black;
}
}

@media screen and (-ms-high-contrast: black-on-white) {
background-color: $ms-color-contrastWhiteSelected;
border-color: $ms-color-contrastWhiteSelected;
color: $ms-color-white;
}
}

.ms-Dropdown {
@include ms-baseFont;
@include ms-u-normalize;
color: $ms-color-neutralPrimary;

font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
margin-bottom: 10px;
position: relative;
outline: 0;

&:hover,
&:focus,
&:active {
.ms-Dropdown-title,
.ms-Dropdown-caretDown {
color: $ms-color-black;
}
}

&:hover,
&:active {
.ms-Dropdown-title {
border-color: $ms-color-neutralSecondaryAlt;
}
}

&:focus {
.ms-Dropdown-title {
border-color: $ms-color-themePrimary;
}
}

.ms-Label {
display: inline-block;
margin-bottom: 8px;
}
}

//== State: A disabled dropdown
.ms-Dropdown.is-disabled {
.ms-Dropdown-title {
background-color: $ms-color-neutralLighter;
border-color: $ms-color-neutralLighter;
color: $ms-color-neutralTertiary;
cursor: default;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-contrastBlackDisabled;
color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
border-color: $ms-color-contrastWhiteDisabled;
color: $ms-color-contrastWhiteDisabled;
}
}

.ms-Dropdown-caretDown {
color: $ms-color-neutralTertiary;

@media screen and (-ms-high-contrast: active) {
color: $ms-color-contrastBlackDisabled;
}

@media screen and (-ms-high-contrast: black-on-white) {
color: $ms-color-contrastWhiteDisabled;
}
}
}

// When the dropdown is opened
.ms-Dropdown.is-open .ms-Dropdown-items {
display: block;
position: absolute;
}

// Adjustments for when the dropdown is open as a panel on small screens
.ms-Panel .ms-Dropdown-items {
box-shadow: none;
overflow-y: auto;
padding-top: 4px;
max-height: 100%;

.ms-Dropdown-item {
padding: 7px 16px;
}

&::before {
content: none;
border: 0;
}
}

// Hide the original dropdown
.ms-Dropdown-select {
display: none;
}

.ms-Dropdown-caretDown {
color: $ms-color-neutralDark;
font-size: $ms-icon-size-s;
position: absolute;
right: 13px;
bottom: 9px;
z-index: 1;
pointer-events: none;
}

// Style the new, replacement component
.ms-Dropdown-title {
@include ms-u-normalize;
background: $ms-color-white;
border: 1px solid $ms-color-neutralTertiaryAlt;
cursor: pointer;
display: block;
height: 32px;
padding: 5px 32px 0 10px;
position: relative;
overflow: hidden;
}

// Container for the dropdown items, displayed as a panel on small screens.
.ms-Dropdown-items {
@include ms-u-normalize;
@include drop-shadow;
background-color: $ms-color-white;
display: none;
list-style-type: none;
position: absolute;
width: 100%;
max-height: 200px;
z-index: ($ms-zIndex-Dropdown + $ms-zIndex-back);
overflow-y: scroll;

top: auto;
right: auto;
bottom: auto;
left: auto;
max-width: 100%;

&::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid $ms-color-neutralLight;
}

@media screen and (-ms-high-contrast: active) {
border: 1px solid $ms-color-white;
}

@media screen and (-ms-high-contrast: black-on-white) {
border: 1px solid $ms-color-black;
}
}

.ms-Dropdown-item {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 36px;
padding: 7px 10px;
position: relative;
border: 1px solid transparent;
white-space: nowrap;

@media screen and (-ms-high-contrast: active) {
border-color: $ms-color-black;
}

@media screen and (-ms-high-contrast: black-on-white) {
border-color: $ms-color-white;
}

&:hover {
background-color: $ms-color-neutralLight;
color: $ms-color-black;

@include highContrastListItemState;
}

&:active {
background-color: $ms-color-neutralLight;
border-color: $ms-color-themePrimary;
color: $ms-color-black;
}

&.is-disabled {
background: $ms-color-white;
color: $ms-color-neutralTertiary;
cursor: default;
}
}

//== State: A selected dropdown item
// Note: .ms-Dropdown-item--selected is deprecated and will be removed in a future version.
// Use .is-selected instead.
.ms-Dropdown-item.is-selected,
.ms-Dropdown-item.ms-Dropdown-item--selected {
background-color: $ms-color-themeLight;
color: $ms-color-black;

&:hover {
background-color: $ms-color-themeLight;
}

@include highContrastListItemState;
}
19 changes: 19 additions & 0 deletions dist/components/FacePile/FacePile.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-FacePile">
<button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
<i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
</button>

{{#each props.members}}
{{> Persona props=props}}
{{/each}}

<button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
<span class="ms-FacePile-overflowText">+3</span>
</button>
</div>
13 changes: 13 additions & 0 deletions dist/components/FacePile/FacePile.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"name": "FacePile",
"dependencies": [
"Overlay",
"Link",
"Panel",
"PeoplePicker",
"Persona",
"PersonaCard",
"Spinner",
"ContextualHost"
]
}
107 changes: 107 additions & 0 deletions dist/components/FacePile/FacePile.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// FacePile styles

.ms-FacePile {
@include ms-baseFont;
position: relative;
height: 32px;
width: auto;

.ms-FacePile-personaCardHost {
display: none;
}
}

.ms-FacePile-addButton {
@include button-reset;
position: relative;
height: 32px;
width: 32px;
line-height: 32px;
text-align: center;
float: left;
padding: 0;
margin-right: 4px;
outline: transparent;
border-radius: 50%;
vertical-align: top;

.ms-Persona-presence,
.ms-Persona-details {
display: none;
}
}

.ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
background-color: $ms-color-themePrimary;
color: $ms-color-white;
font-size: $ms-font-size-l - 1;

&:hover,
&:focus {
background-color: $ms-color-themeDark;
}

&:active {
background-color: $ms-color-themeDarker;
}

&:disabled {
background-color: $ms-color-neutralTertiaryAlt;
}
}

.ms-FacePile-addButton.ms-FacePile-addButton--overflow {
background-color: $ms-color-neutralLight;
color: $ms-color-neutralSecondary;
display: none;

&.is-active {
display: block;
}

&:hover {
color: $ms-color-neutralDark;
}

&:disabled {
color: $ms-color-neutralTertiaryAlt;
}
}

.ms-FacePile-addPersonIcon {
position: relative;
top: -1px;
}

.ms-FacePile-overflowText {
font-size: $ms-font-size-m;
}

//== Panels
// Overflow panel - only show member list
.ms-FacePile-panel.ms-FacePile-panel--overflow {
.ms-Panel-headerText,
.ms-PeoplePicker-searchBox,
.ms-PeoplePicker-results,
.ms-PeoplePicker-resultAction {
display: none;
}

.ms-PeoplePicker-selectedHeader {
font-weight: $ms-font-weight-light;
font-size: $ms-font-size-xl;
color: $ms-color-neutralPrimary;
line-height: 82px;
height: 74px;
text-transform: none;
}
}
6 changes: 6 additions & 0 deletions dist/components/Label/Label.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
<label class="ms-Label {{props.state}} {{#if props.modifier}} ms-Label--{{props.modifier}}{{/if}}">{{props.label}}</label>
3 changes: 3 additions & 0 deletions dist/components/Label/Label.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name": "Label"
}
40 changes: 40 additions & 0 deletions dist/components/Label/Label.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Form field label styles

@mixin ms-Label-is-disabled {
color: $ms-color-neutralTertiary;
}

@mixin ms-Label-is-required {
&::after {
content: ' *';
color: $ms-color-error;
}
}

.ms-Label {
@include ms-baseFont;
@include ms-u-normalize;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-s;
font-weight: $ms-font-weight-regular;
box-sizing: border-box;
display: block;
padding: 5px 0;

&.is-required {
@include ms-Label-is-required;
}

&.is-disabled {
@include ms-Label-is-disabled;
}
}
11 changes: 11 additions & 0 deletions dist/components/Link/Link.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<a class="ms-Link {{props.customClasses}} {{#if props.modifierClass}} ms-Link--{{props.modifierClass}} {{/if}}"
{{#if props.href}} href="{{props.href}}" {{/if}}
{{#if props.title}} title="{{props.title}}" {{/if}}
{{#if props.tabIndex}} tabindex="{{props.tabIndex}}" {{/if}}>{{props.label}}</a>

3 changes: 3 additions & 0 deletions dist/components/Link/Link.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"name": "Link"
}
34 changes: 34 additions & 0 deletions dist/components/Link/Link.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Link (anchor) styles


@mixin ms-Link {
@include ms-baseFont;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
color: $ms-color-themePrimary;
text-decoration: none;
cursor: pointer;
outline: none;

&:hover,
&:focus {
color: $ms-color-themeDarker;
}

&:active {
color: $ms-color-themePrimary;
}
}

.ms-Link {
@include ms-Link;
}
11 changes: 11 additions & 0 deletions dist/components/List/List.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<ul class="ms-List {{#if props.modifier}} ms-List--{{props.modifier}} {{/if}}">
{{#each props.listItems}}
{{> (lookup . 'name') props=props}}
{{/each}}
</ul>
6 changes: 6 additions & 0 deletions dist/components/List/List.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "List",
"dependencies": [
"ListItem"
]
}
19 changes: 19 additions & 0 deletions dist/components/List/List.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* Office UI Fabric JS 1.2.0
* The JavaScript front-end framework for building experiences for Office 365.
**/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// List styles

.ms-List {
@include ms-baseFont;
@include ms-u-normalize;
color: $ms-color-neutralPrimary;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
list-style-type: none;
}
23 changes: 23 additions & 0 deletions dist/components/ListItem/ListItem.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!--
Office UI Fabric JS 1.2.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<li class="ms-ListItem {{#if props.modifier}} ms-ListItem--{{props.modifier}} {{/if}} {{props.state}}" tabindex="0">
{{#if props.image}}<div class="ms-ListItem-image"></div>{{/if}}
{{#if props.primaryText}}<span class="ms-ListItem-primaryText">{{props.primaryText}}</span>{{/if}}
{{#if props.secondaryText}}<span class="ms-ListItem-secondaryText">{{props.secondaryText}}</span>{{/if}}
{{#if props.tertiaryText}}<span class="ms-ListItem-tertiaryText">{{props.tertiaryText}}</span>{{/if}}
{{#if props.metaText}}<span class="ms-ListItem-metaText">{{props.metaText}}</span>{{/if}}
{{#if props.listIcon}}<div class="ms-ListItem-itemIcon ms-ListItem-itemIcon--{{props.listIcon}}"></div>{{/if}}
<div class="ms-ListItem-selectionTarget"></div>
<div class="ms-ListItem-actions">
{{#each props.actions}}{{/each}}
<div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
<div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
<div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
<div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
</div>
</li>

6 changes: 6 additions & 0 deletions dist/components/ListItem/ListItem.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "ListItem",
"dependencies": [
"List"
]
}
Loading

0 comments on commit fc50d35

Please sign in to comment.