This repository has been archived by the owner on Mar 26, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mike Wheaton
committed
Nov 4, 2016
1 parent
e23042d
commit fc50d35
Showing
184 changed files
with
49,119 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "Breadcrumb", | ||
"dependencies": [ | ||
"ContextualMenu" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"name": "Button", | ||
"props": { | ||
"label": "Create Account", | ||
"tag": "button" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"name": "Callout", | ||
"dependencies": [ | ||
"Button", | ||
"Label", | ||
"Link", | ||
"ContextualHost", | ||
"CommandButton" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "CheckBox", | ||
"dependencies": [ | ||
"Label" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"name": "ChoiceFieldGroup", | ||
"dependencies": [ | ||
"Label", | ||
"CheckBox" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"name": "CommandBar", | ||
"dependencies": [ | ||
"ContextualMenu", | ||
"Button", | ||
"Label", | ||
"SearchBox", | ||
"CommandButton", | ||
"ContextualHost" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"name": "ContextualHost" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "ContextualMenu", | ||
"dependencies": [ | ||
"ContextualHost" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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…"> | ||
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"name": "DatePicker" | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"name": "Dialog", | ||
"dependencies": [ | ||
"Button", | ||
"CheckBox", | ||
"Overlay", | ||
"ContextualHost" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"name": "DialogHost" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "Dropdown", | ||
"dependencies": [ | ||
"Label" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"name": "Label" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"name": "Link" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "List", | ||
"dependencies": [ | ||
"ListItem" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"name": "ListItem", | ||
"dependencies": [ | ||
"List" | ||
] | ||
} |
Oops, something went wrong.