-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
List and other example updates (#8508)
- Loading branch information
1 parent
ac9cc96
commit 07fddfc
Showing
17 changed files
with
527 additions
and
550 deletions.
There are no files selected for viewing
11 changes: 11 additions & 0 deletions
11
common/changes/office-ui-fabric-react/list-examples_2019-03-27-23-59.json
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 @@ | ||
{ | ||
"changes": [ | ||
{ | ||
"packageName": "office-ui-fabric-react", | ||
"comment": "List and other example updates", | ||
"type": "patch" | ||
} | ||
], | ||
"packageName": "office-ui-fabric-react", | ||
"email": "[email protected]" | ||
} |
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
4 changes: 2 additions & 2 deletions
4
packages/office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx
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
52 changes: 25 additions & 27 deletions
52
packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss
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 |
---|---|---|
@@ -1,37 +1,35 @@ | ||
@import '../../../common/common'; | ||
|
||
// UHF overrides link color and state so we need to re-assign them for the website documentation | ||
:global { | ||
.docs-LinkExample { | ||
.ms-Link { | ||
// Element: ms-Link root component | ||
.root { | ||
color: $ms-color-themePrimary; | ||
margin: 0; | ||
overflow: inherit; | ||
padding: 0; | ||
text-overflow: inherit; | ||
} | ||
|
||
// State: The button is not disabled. | ||
.isEnabled { | ||
&:active, | ||
&:hover, | ||
&:active:hover { | ||
color: $ms-color-themeDarker; | ||
} | ||
.linkExample { | ||
:global(.ms-Link) { | ||
// Element: ms-Link root component | ||
.root { | ||
color: $ms-color-themePrimary; | ||
margin: 0; | ||
overflow: inherit; | ||
padding: 0; | ||
text-overflow: inherit; | ||
} | ||
|
||
&:focus { | ||
color: $ms-color-themePrimary; | ||
} | ||
// State: The button is not disabled. | ||
.isEnabled { | ||
&:active, | ||
&:hover, | ||
&:active:hover { | ||
color: $ms-color-themeDarker; | ||
} | ||
|
||
// State: The button is disabled. | ||
.isDisabled { | ||
color: $ms-color-neutralTertiary; | ||
pointer-events: none; | ||
cursor: default; | ||
&:focus { | ||
color: $ms-color-themePrimary; | ||
} | ||
} | ||
|
||
// State: The button is disabled. | ||
.isDisabled { | ||
color: $ms-color-neutralTertiary; | ||
pointer-events: none; | ||
cursor: default; | ||
} | ||
} | ||
} |
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
73 changes: 36 additions & 37 deletions
73
packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.scss
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 |
---|---|---|
@@ -1,48 +1,47 @@ | ||
@import '../../../common/common'; | ||
|
||
:global { | ||
.ms-ListBasicExample-itemCell { | ||
@include focus-border(); | ||
|
||
min-height: 54px; | ||
padding: 10px; | ||
box-sizing: border-box; | ||
border-bottom: 1px solid $bodyDividerColor; | ||
display: flex; | ||
} | ||
.itemCell { | ||
@include focus-border(); | ||
|
||
min-height: 54px; | ||
padding: 10px; | ||
box-sizing: border-box; | ||
border-bottom: 1px solid $bodyDividerColor; | ||
display: flex; | ||
|
||
.ms-ListBasicExample-itemCell:hover { | ||
&:hover { | ||
background: #EEE; | ||
} | ||
} | ||
|
||
.ms-ListBasicExample-itemImage { | ||
flex-shrink: 0; | ||
} | ||
|
||
.ms-ListBasicExample-itemContent { | ||
@include margin-left(10px); | ||
overflow: hidden; | ||
flex-grow: 1; | ||
} | ||
.itemImage { | ||
flex-shrink: 0; | ||
} | ||
|
||
.ms-ListBasicExample-itemName { | ||
@include ms-font-xl; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
.itemContent { | ||
@include margin-left(10px); | ||
overflow: hidden; | ||
flex-grow: 1; | ||
} | ||
|
||
.ms-ListBasicExample-itemIndex { | ||
font-size: $ms-font-size-s; | ||
color: $ms-color-neutralTertiary; | ||
margin-bottom: 10px; | ||
} | ||
.itemName { | ||
@include ms-font-xl; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
|
||
.ms-ListBasicExample-chevron { | ||
align-self: center; | ||
@include margin-left(10px); | ||
color: $ms-color-neutralTertiary; | ||
font-size: $ms-font-size-l; | ||
flex-shrink: 0; | ||
} | ||
.itemIndex { | ||
font-size: $ms-font-size-s; | ||
color: $ms-color-neutralTertiary; | ||
margin-bottom: 10px; | ||
} | ||
|
||
.chevron { | ||
align-self: center; | ||
@include margin-left(10px); | ||
color: $ms-color-neutralTertiary; | ||
font-size: $ms-font-size-l; | ||
flex-shrink: 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
56 changes: 25 additions & 31 deletions
56
packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.scss
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 |
---|---|---|
@@ -1,39 +1,33 @@ | ||
@import '../../../common/common'; | ||
|
||
:global { | ||
.ms-ListScrollingExample { | ||
&-container { | ||
overflow: auto; | ||
max-height: 500px; | ||
margin-top: 20px; | ||
} | ||
.container { | ||
overflow: auto; | ||
max-height: 500px; | ||
margin-top: 20px; | ||
} | ||
|
||
&-itemCell { | ||
.ms-ListScrollingExample-itemContent { | ||
@include ms-font-m; | ||
@include ms-normalize; | ||
@include ms-clearfix; | ||
position: relative; | ||
display: block; | ||
.itemContent { | ||
@include ms-font-m; | ||
@include ms-normalize; | ||
@include ms-clearfix; | ||
position: relative; | ||
display: block; | ||
|
||
border-left: 3px solid $ms-color-themePrimary; | ||
padding-left: 27px; // Reduce padding to allow room for border. | ||
border-left: 3px solid $ms-color-themePrimary; | ||
padding-left: 27px; // Reduce padding to allow room for border. | ||
} | ||
|
||
&-odd { | ||
height: 50px; | ||
line-height: 50px; | ||
background: $ms-color-neutralLighter; | ||
} | ||
.itemContentOdd { | ||
height: 50px; | ||
line-height: 50px; | ||
background: $ms-color-neutralLighter; | ||
} | ||
|
||
&-even { | ||
height: 25px; | ||
line-height: 25px; | ||
} | ||
} | ||
} | ||
.itemContentEven { | ||
height: 25px; | ||
line-height: 25px; | ||
} | ||
|
||
&-selected { | ||
background: lightblue; | ||
} | ||
} | ||
.selected { | ||
background: lightblue; | ||
} |
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
Oops, something went wrong.