office-ui-fabric-js-rails 1.3.0.0 → 1.4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/lib/office-ui-fabric-js-rails/version.rb +2 -2
  3. data/package.json +2 -2
  4. data/vendor/assets/css/fabric.components.css +18 -6
  5. data/vendor/assets/css/fabric.components.min.css +2 -2
  6. data/vendor/assets/css/fabric.components.rtl.css +18 -6
  7. data/vendor/assets/css/fabric.components.rtl.min.css +2 -2
  8. data/vendor/assets/js/fabric.js +32 -41
  9. data/vendor/assets/js/fabric.min.js +4 -4
  10. data/vendor/assets/scss/components/Breadcrumb.scss +174 -174
  11. data/vendor/assets/scss/components/Button.scss +300 -286
  12. data/vendor/assets/scss/components/Callout.scss +157 -157
  13. data/vendor/assets/scss/components/CheckBox.scss +172 -172
  14. data/vendor/assets/scss/components/ChoiceFieldGroup.scss +14 -13
  15. data/vendor/assets/scss/components/CommandBar.scss +138 -138
  16. data/vendor/assets/scss/components/CommandButton.scss +293 -293
  17. data/vendor/assets/scss/components/ContextualHost.scss +142 -142
  18. data/vendor/assets/scss/components/ContextualMenu.scss +208 -208
  19. data/vendor/assets/scss/components/DatePicker.scss +527 -527
  20. data/vendor/assets/scss/components/DetailsList.scss +337 -337
  21. data/vendor/assets/scss/components/Dialog.scss +118 -118
  22. data/vendor/assets/scss/components/DialogHost.scss +12 -12
  23. data/vendor/assets/scss/components/Dropdown.scss +251 -251
  24. data/vendor/assets/scss/components/FacePile.scss +104 -104
  25. data/vendor/assets/scss/components/Label.scss +37 -37
  26. data/vendor/assets/scss/components/Link.scss +31 -31
  27. data/vendor/assets/scss/components/List.scss +16 -16
  28. data/vendor/assets/scss/components/ListItem.scss +237 -237
  29. data/vendor/assets/scss/components/MessageBanner.scss +128 -128
  30. data/vendor/assets/scss/components/MessageBar.scss +87 -87
  31. data/vendor/assets/scss/components/OrgChart.scss +46 -46
  32. data/vendor/assets/scss/components/Overlay.scss +34 -34
  33. data/vendor/assets/scss/components/Panel.scss +155 -155
  34. data/vendor/assets/scss/components/PanelHost.scss +15 -15
  35. data/vendor/assets/scss/components/PeoplePicker.scss +449 -449
  36. data/vendor/assets/scss/components/Persona.scss +731 -731
  37. data/vendor/assets/scss/components/PersonaCard.scss +208 -208
  38. data/vendor/assets/scss/components/Pivot.scss +201 -201
  39. data/vendor/assets/scss/components/ProgressIndicator.scss +64 -64
  40. data/vendor/assets/scss/components/RadioButton.scss +194 -194
  41. data/vendor/assets/scss/components/SearchBox.scss +368 -369
  42. data/vendor/assets/scss/components/Spinner.scss +48 -48
  43. data/vendor/assets/scss/components/Table.scss +123 -123
  44. data/vendor/assets/scss/components/TextField.scss +232 -232
  45. data/vendor/assets/scss/components/Toggle.scss +249 -249
  46. metadata +2 -2
@@ -1,107 +1,107 @@
1
1
  /**
2
- * Office UI Fabric JS 1.3.0
2
+ * Office UI Fabric JS 1.4.0
3
3
  * The JavaScript front-end framework for building experiences for Office 365.
4
4
  **/
5
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
-
7
- //
8
- // Office UI Fabric
9
- // --------------------------------------------------
10
- // FacePile styles
11
-
12
- .ms-FacePile {
13
- @include ms-baseFont;
14
- position: relative;
15
- height: 32px;
16
- width: auto;
17
-
18
- .ms-FacePile-personaCardHost {
19
- display: none;
20
- }
21
- }
22
-
23
- .ms-FacePile-addButton {
24
- @include button-reset;
25
- position: relative;
26
- height: 32px;
27
- width: 32px;
28
- line-height: 32px;
29
- text-align: center;
30
- float: left;
31
- padding: 0;
32
- margin-right: 4px;
33
- outline: transparent;
34
- border-radius: 50%;
35
- vertical-align: top;
36
-
37
- .ms-Persona-presence,
38
- .ms-Persona-details {
39
- display: none;
40
- }
41
- }
42
-
43
- .ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
44
- background-color: $ms-color-themePrimary;
45
- color: $ms-color-white;
46
- font-size: $ms-font-size-l - 1;
47
-
48
- &:hover,
49
- &:focus {
50
- background-color: $ms-color-themeDark;
51
- }
52
-
53
- &:active {
54
- background-color: $ms-color-themeDarker;
55
- }
56
-
57
- &:disabled {
58
- background-color: $ms-color-neutralTertiaryAlt;
59
- }
60
- }
61
-
62
- .ms-FacePile-addButton.ms-FacePile-addButton--overflow {
63
- background-color: $ms-color-neutralLight;
64
- color: $ms-color-neutralSecondary;
65
- display: none;
66
-
67
- &.is-active {
68
- display: block;
69
- }
70
-
71
- &:hover {
72
- color: $ms-color-neutralDark;
73
- }
74
-
75
- &:disabled {
76
- color: $ms-color-neutralTertiaryAlt;
77
- }
78
- }
79
-
80
- .ms-FacePile-addPersonIcon {
81
- position: relative;
82
- top: -1px;
83
- }
84
-
85
- .ms-FacePile-overflowText {
86
- font-size: $ms-font-size-m;
87
- }
88
-
89
- //== Panels
90
- // Overflow panel - only show member list
91
- .ms-FacePile-panel.ms-FacePile-panel--overflow {
92
- .ms-Panel-headerText,
93
- .ms-PeoplePicker-searchBox,
94
- .ms-PeoplePicker-results,
95
- .ms-PeoplePicker-resultAction {
96
- display: none;
97
- }
98
-
99
- .ms-PeoplePicker-selectedHeader {
100
- font-weight: $ms-font-weight-light;
101
- font-size: $ms-font-size-xl;
102
- color: $ms-color-neutralPrimary;
103
- line-height: 82px;
104
- height: 74px;
105
- text-transform: none;
106
- }
107
- }
5
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
+
7
+ //
8
+ // Office UI Fabric
9
+ // --------------------------------------------------
10
+ // FacePile styles
11
+
12
+ .ms-FacePile {
13
+ @include ms-baseFont;
14
+ position: relative;
15
+ height: 32px;
16
+ width: auto;
17
+
18
+ .ms-FacePile-personaCardHost {
19
+ display: none;
20
+ }
21
+ }
22
+
23
+ .ms-FacePile-addButton {
24
+ @include button-reset;
25
+ position: relative;
26
+ height: 32px;
27
+ width: 32px;
28
+ line-height: 32px;
29
+ text-align: center;
30
+ float: left;
31
+ padding: 0;
32
+ margin-right: 4px;
33
+ outline: transparent;
34
+ border-radius: 50%;
35
+ vertical-align: top;
36
+
37
+ .ms-Persona-presence,
38
+ .ms-Persona-details {
39
+ display: none;
40
+ }
41
+ }
42
+
43
+ .ms-FacePile-addButton.ms-FacePile-addButton--addPerson {
44
+ background-color: $ms-color-themePrimary;
45
+ color: $ms-color-white;
46
+ font-size: $ms-font-size-l - 1;
47
+
48
+ &:hover,
49
+ &:focus {
50
+ background-color: $ms-color-themeDark;
51
+ }
52
+
53
+ &:active {
54
+ background-color: $ms-color-themeDarker;
55
+ }
56
+
57
+ &:disabled {
58
+ background-color: $ms-color-neutralTertiaryAlt;
59
+ }
60
+ }
61
+
62
+ .ms-FacePile-addButton.ms-FacePile-addButton--overflow {
63
+ background-color: $ms-color-neutralLight;
64
+ color: $ms-color-neutralSecondary;
65
+ display: none;
66
+
67
+ &.is-active {
68
+ display: block;
69
+ }
70
+
71
+ &:hover {
72
+ color: $ms-color-neutralDark;
73
+ }
74
+
75
+ &:disabled {
76
+ color: $ms-color-neutralTertiaryAlt;
77
+ }
78
+ }
79
+
80
+ .ms-FacePile-addPersonIcon {
81
+ position: relative;
82
+ top: -1px;
83
+ }
84
+
85
+ .ms-FacePile-overflowText {
86
+ font-size: $ms-font-size-m;
87
+ }
88
+
89
+ //== Panels
90
+ // Overflow panel - only show member list
91
+ .ms-FacePile-panel.ms-FacePile-panel--overflow {
92
+ .ms-Panel-headerText,
93
+ .ms-PeoplePicker-searchBox,
94
+ .ms-PeoplePicker-results,
95
+ .ms-PeoplePicker-resultAction {
96
+ display: none;
97
+ }
98
+
99
+ .ms-PeoplePicker-selectedHeader {
100
+ font-weight: $ms-font-weight-light;
101
+ font-size: $ms-font-size-xl;
102
+ color: $ms-color-neutralPrimary;
103
+ line-height: 82px;
104
+ height: 74px;
105
+ text-transform: none;
106
+ }
107
+ }
@@ -1,40 +1,40 @@
1
1
  /**
2
- * Office UI Fabric JS 1.3.0
2
+ * Office UI Fabric JS 1.4.0
3
3
  * The JavaScript front-end framework for building experiences for Office 365.
4
4
  **/
5
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
-
7
- //
8
- // Office UI Fabric
9
- // --------------------------------------------------
10
- // Form field label styles
11
-
12
- @mixin ms-Label-is-disabled {
13
- color: $ms-color-neutralTertiary;
14
- }
15
-
16
- @mixin ms-Label-is-required {
17
- &::after {
18
- content: ' *';
19
- color: $ms-color-error;
20
- }
21
- }
22
-
23
- .ms-Label {
24
- @include ms-baseFont;
25
- @include ms-u-normalize;
26
- color: $ms-color-neutralPrimary;
27
- font-size: $ms-font-size-s;
28
- font-weight: $ms-font-weight-regular;
29
- box-sizing: border-box;
30
- display: block;
31
- padding: 5px 0;
32
-
33
- &.is-required {
34
- @include ms-Label-is-required;
35
- }
36
-
37
- &.is-disabled {
38
- @include ms-Label-is-disabled;
39
- }
40
- }
5
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
+
7
+ //
8
+ // Office UI Fabric
9
+ // --------------------------------------------------
10
+ // Form field label styles
11
+
12
+ @mixin ms-Label-is-disabled {
13
+ color: $ms-color-neutralTertiary;
14
+ }
15
+
16
+ @mixin ms-Label-is-required {
17
+ &::after {
18
+ content: ' *';
19
+ color: $ms-color-error;
20
+ }
21
+ }
22
+
23
+ .ms-Label {
24
+ @include ms-baseFont;
25
+ @include ms-u-normalize;
26
+ color: $ms-color-neutralPrimary;
27
+ font-size: $ms-font-size-s;
28
+ font-weight: $ms-font-weight-regular;
29
+ box-sizing: border-box;
30
+ display: block;
31
+ padding: 5px 0;
32
+
33
+ &.is-required {
34
+ @include ms-Label-is-required;
35
+ }
36
+
37
+ &.is-disabled {
38
+ @include ms-Label-is-disabled;
39
+ }
40
+ }
@@ -1,34 +1,34 @@
1
1
  /**
2
- * Office UI Fabric JS 1.3.0
2
+ * Office UI Fabric JS 1.4.0
3
3
  * The JavaScript front-end framework for building experiences for Office 365.
4
4
  **/
5
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
-
7
- //
8
- // Office UI Fabric
9
- // --------------------------------------------------
10
- // Link (anchor) styles
11
-
12
-
13
- @mixin ms-Link {
14
- @include ms-baseFont;
15
- font-size: $ms-font-size-m;
16
- font-weight: $ms-font-weight-regular;
17
- color: $ms-color-themePrimary;
18
- text-decoration: none;
19
- cursor: pointer;
20
- outline: none;
21
-
22
- &:hover,
23
- &:focus {
24
- color: $ms-color-themeDarker;
25
- }
26
-
27
- &:active {
28
- color: $ms-color-themePrimary;
29
- }
30
- }
31
-
32
- .ms-Link {
33
- @include ms-Link;
34
- }
5
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
+
7
+ //
8
+ // Office UI Fabric
9
+ // --------------------------------------------------
10
+ // Link (anchor) styles
11
+
12
+
13
+ @mixin ms-Link {
14
+ @include ms-baseFont;
15
+ font-size: $ms-font-size-m;
16
+ font-weight: $ms-font-weight-regular;
17
+ color: $ms-color-themePrimary;
18
+ text-decoration: none;
19
+ cursor: pointer;
20
+ outline: none;
21
+
22
+ &:hover,
23
+ &:focus {
24
+ color: $ms-color-themeDarker;
25
+ }
26
+
27
+ &:active {
28
+ color: $ms-color-themePrimary;
29
+ }
30
+ }
31
+
32
+ .ms-Link {
33
+ @include ms-Link;
34
+ }
@@ -1,19 +1,19 @@
1
1
  /**
2
- * Office UI Fabric JS 1.3.0
2
+ * Office UI Fabric JS 1.4.0
3
3
  * The JavaScript front-end framework for building experiences for Office 365.
4
4
  **/
5
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
-
7
- //
8
- // Office UI Fabric
9
- // --------------------------------------------------
10
- // List styles
11
-
12
- .ms-List {
13
- @include ms-baseFont;
14
- @include ms-u-normalize;
15
- color: $ms-color-neutralPrimary;
16
- font-size: $ms-font-size-m;
17
- font-weight: $ms-font-weight-regular;
18
- list-style-type: none;
19
- }
5
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
+
7
+ //
8
+ // Office UI Fabric
9
+ // --------------------------------------------------
10
+ // List styles
11
+
12
+ .ms-List {
13
+ @include ms-baseFont;
14
+ @include ms-u-normalize;
15
+ color: $ms-color-neutralPrimary;
16
+ font-size: $ms-font-size-m;
17
+ font-weight: $ms-font-weight-regular;
18
+ list-style-type: none;
19
+ }
@@ -1,240 +1,240 @@
1
1
  /**
2
- * Office UI Fabric JS 1.3.0
2
+ * Office UI Fabric JS 1.4.0
3
3
  * The JavaScript front-end framework for building experiences for Office 365.
4
4
  **/
5
- // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
-
7
- //
8
- // Office UI Fabric
9
- // --------------------------------------------------
10
- // List item styles
11
-
12
-
13
- .ms-ListItem {
14
- @include ms-baseFont;
15
- @include ms-u-normalize;
16
- @include ms-u-clearfix;
17
- color: $ms-color-neutralPrimary;
18
- font-size: $ms-font-size-m;
19
- font-weight: $ms-font-weight-regular;
20
- padding: 9px 28px 3px;
21
- position: relative;
22
- display: block;
23
- }
24
-
25
- .ms-ListItem-primaryText,
26
- .ms-ListItem-secondaryText,
27
- .ms-ListItem-tertiaryText {
28
- @include noWrap;
29
- display: block;
30
- }
31
-
32
- .ms-ListItem-primaryText {
33
- color: $ms-color-neutralDark;
34
- font-weight: $ms-font-weight-semilight;
35
- font-size: $ms-font-size-xl;
36
- padding-right: 80px; // Prevent overlap with up to three actions.
37
- position: relative;
38
- top: -4px;
39
- }
40
-
41
- .ms-ListItem-secondaryText {
42
- color: $ms-color-neutralPrimary;
43
- font-weight: $ms-font-weight-regular;
44
- font-size: $ms-font-size-m;
45
- line-height: 25px;
46
- position: relative;
47
- top: -7px;
48
- padding-right: 30px;
49
- }
50
-
51
- .ms-ListItem-tertiaryText {
52
- color: $ms-color-neutralSecondaryAlt;
53
- font-weight: $ms-font-weight-semilight;
54
- font-size: $ms-font-size-m;
55
- position: relative;
56
- top: -9px;
57
- margin-bottom: -4px;
58
- padding-right: 30px;
59
- }
60
-
61
- .ms-ListItem-metaText {
62
- color: $ms-color-neutralPrimary;
63
- font-weight: $ms-font-weight-semilight;
64
- font-size: $ms-font-size-xs;
65
- position: absolute;
66
- right: 30px;
67
- top: 39px;
68
- }
69
-
70
- .ms-ListItem-image {
71
- float: left;
72
- height: 70px;
73
- margin-left: -8px; // Images sit closer to the edge than text.
74
- margin-right: 10px;
75
- width: 70px;
76
- background-color: $ms-color-neutralPrimary;
77
- }
78
-
79
- .ms-ListItem-selectionTarget {
80
- display: none;
81
- }
82
-
83
- .ms-ListItem-actions {
84
- max-width: 80px; // Up to three actions.
85
- position: absolute;
86
- right: 30px;
87
- text-align: right;
88
- top: 10px;
89
- }
90
-
91
- .ms-ListItem-action {
92
- color: $ms-color-neutralTertiary;
93
- display: inline-block;
94
- font-size: 15px;
95
- position: relative;
96
- text-align: center;
97
- top: 3px;
98
- cursor: pointer;
99
- height: 16px;
100
- width: 16px;
101
-
102
- .ms-Icon {
103
- vertical-align: top;
104
- }
105
-
106
- &:hover {
107
- color: $ms-color-neutralSecondary;
108
- outline: 1px solid transparent;
109
- }
110
- }
111
-
112
-
113
- //== State: Unread list item
114
- //
115
- .ms-ListItem.is-unread {
116
- border-left: 3px solid $ms-color-themePrimary;
117
- padding-left: 27px; // Reduce padding to allow room for border.
118
-
119
- .ms-ListItem-secondaryText,
120
- .ms-ListItem-metaText {
121
- color: $ms-color-themePrimary;
122
- font-weight: $ms-font-weight-semibold;
123
- }
124
- }
125
-
126
-
127
- //== State: Unseen list item
128
- //
129
- .ms-ListItem.is-unseen {
130
- &::after {
131
- border-right: 10px solid transparent;
132
- border-top: 10px solid $ms-color-themePrimary;
133
- left: 0;
134
- position: absolute;
135
- top: 0;
136
- }
137
- }
138
-
139
-
140
- //== State: Selectable list item
141
- //
142
- .ms-ListItem.is-selectable {
143
- .ms-ListItem-selectionTarget {
144
- display: block;
145
- height: 20px;
146
- left: 6px;
147
- position: absolute;
148
- top: 13px;
149
- width: 20px;
150
- }
151
-
152
- .ms-ListItem-image {
153
- margin-left: 0;
154
- }
155
-
156
- &:hover {
157
- background-color: $ms-color-neutralLight;
158
- cursor: pointer;
159
- outline: 1px solid transparent;
160
-
161
- // Insert the empty box.
162
- &::before {
163
- @include ms-Icon;
164
- position: absolute;
165
- top: 14px;
166
- left: 7px;
167
- height: 15px;
168
- width: 15px;
169
- border: 1px solid $ms-color-neutralSecondaryAlt;
170
- }
171
- }
172
- }
173
-
174
-
175
- //== State: Selected list item
176
- //
177
- .ms-ListItem.is-selected {
178
- // Insert the checkmark.
179
- &::before {
180
- border: 1px solid transparent;
181
- }
182
-
183
- &::before,
184
- &:hover::before {
185
- @include ms-Icon;
186
- content: '\e73A';
187
- font-size: $ms-font-size-l;
188
- color: $ms-color-neutralSecondaryAlt;
189
- position: absolute;
190
- top: 23px;
191
- left: 7px;
192
- border: 0;
193
- }
194
-
195
- &:hover {
196
- background-color: $ms-color-themeLight;
197
- outline: 1px solid transparent;
198
- }
199
- }
200
-
201
-
202
- //== Modifier: Document list item
203
- //
204
- .ms-ListItem.ms-ListItem--document {
205
- padding: 0;
206
-
207
- // The icon for a file or folder in the items list. This may
208
- // be an .ms-Icon or a specific modifier that loads an image.
209
- .ms-ListItem-itemIcon {
210
- width: 70px;
211
- height: 70px;
212
- float: left;
213
- text-align: center;
214
- }
215
-
216
- // If the item icon is an .ms-Icon, position and color it appropriately.
217
- .ms-ListItem-itemIcon .ms-Icon {
218
- font-size: 38px;
219
- line-height: 70px;
220
- color: $ms-color-neutralSecondary;
221
- }
222
-
223
- // Primary text, typically the name.
224
- .ms-ListItem-primaryText {
225
- @include noWrap;
226
- font-size: $ms-font-size-m;
227
- padding-top: 15px;
228
- padding-right: 0;
229
- position: static;
230
- }
231
-
232
- // Secondary text, typically the modified date or some other metadata.
233
- .ms-ListItem-secondaryText {
234
- @include noWrap;
235
- color: $ms-color-neutralSecondary;
236
- font-weight: $ms-font-weight-regular;
237
- font-size: $ms-font-size-xs;
238
- padding-top: 6px;
239
- }
240
- }
5
+ // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
6
+
7
+ //
8
+ // Office UI Fabric
9
+ // --------------------------------------------------
10
+ // List item styles
11
+
12
+
13
+ .ms-ListItem {
14
+ @include ms-baseFont;
15
+ @include ms-u-normalize;
16
+ @include ms-u-clearfix;
17
+ color: $ms-color-neutralPrimary;
18
+ font-size: $ms-font-size-m;
19
+ font-weight: $ms-font-weight-regular;
20
+ padding: 9px 28px 3px;
21
+ position: relative;
22
+ display: block;
23
+ }
24
+
25
+ .ms-ListItem-primaryText,
26
+ .ms-ListItem-secondaryText,
27
+ .ms-ListItem-tertiaryText {
28
+ @include noWrap;
29
+ display: block;
30
+ }
31
+
32
+ .ms-ListItem-primaryText {
33
+ color: $ms-color-neutralDark;
34
+ font-weight: $ms-font-weight-semilight;
35
+ font-size: $ms-font-size-xl;
36
+ padding-right: 80px; // Prevent overlap with up to three actions.
37
+ position: relative;
38
+ top: -4px;
39
+ }
40
+
41
+ .ms-ListItem-secondaryText {
42
+ color: $ms-color-neutralPrimary;
43
+ font-weight: $ms-font-weight-regular;
44
+ font-size: $ms-font-size-m;
45
+ line-height: 25px;
46
+ position: relative;
47
+ top: -7px;
48
+ padding-right: 30px;
49
+ }
50
+
51
+ .ms-ListItem-tertiaryText {
52
+ color: $ms-color-neutralSecondaryAlt;
53
+ font-weight: $ms-font-weight-semilight;
54
+ font-size: $ms-font-size-m;
55
+ position: relative;
56
+ top: -9px;
57
+ margin-bottom: -4px;
58
+ padding-right: 30px;
59
+ }
60
+
61
+ .ms-ListItem-metaText {
62
+ color: $ms-color-neutralPrimary;
63
+ font-weight: $ms-font-weight-semilight;
64
+ font-size: $ms-font-size-xs;
65
+ position: absolute;
66
+ right: 30px;
67
+ top: 39px;
68
+ }
69
+
70
+ .ms-ListItem-image {
71
+ float: left;
72
+ height: 70px;
73
+ margin-left: -8px; // Images sit closer to the edge than text.
74
+ margin-right: 10px;
75
+ width: 70px;
76
+ background-color: $ms-color-neutralPrimary;
77
+ }
78
+
79
+ .ms-ListItem-selectionTarget {
80
+ display: none;
81
+ }
82
+
83
+ .ms-ListItem-actions {
84
+ max-width: 80px; // Up to three actions.
85
+ position: absolute;
86
+ right: 30px;
87
+ text-align: right;
88
+ top: 10px;
89
+ }
90
+
91
+ .ms-ListItem-action {
92
+ color: $ms-color-neutralTertiary;
93
+ display: inline-block;
94
+ font-size: 15px;
95
+ position: relative;
96
+ text-align: center;
97
+ top: 3px;
98
+ cursor: pointer;
99
+ height: 16px;
100
+ width: 16px;
101
+
102
+ .ms-Icon {
103
+ vertical-align: top;
104
+ }
105
+
106
+ &:hover {
107
+ color: $ms-color-neutralSecondary;
108
+ outline: 1px solid transparent;
109
+ }
110
+ }
111
+
112
+
113
+ //== State: Unread list item
114
+ //
115
+ .ms-ListItem.is-unread {
116
+ border-left: 3px solid $ms-color-themePrimary;
117
+ padding-left: 27px; // Reduce padding to allow room for border.
118
+
119
+ .ms-ListItem-secondaryText,
120
+ .ms-ListItem-metaText {
121
+ color: $ms-color-themePrimary;
122
+ font-weight: $ms-font-weight-semibold;
123
+ }
124
+ }
125
+
126
+
127
+ //== State: Unseen list item
128
+ //
129
+ .ms-ListItem.is-unseen {
130
+ &::after {
131
+ border-right: 10px solid transparent;
132
+ border-top: 10px solid $ms-color-themePrimary;
133
+ left: 0;
134
+ position: absolute;
135
+ top: 0;
136
+ }
137
+ }
138
+
139
+
140
+ //== State: Selectable list item
141
+ //
142
+ .ms-ListItem.is-selectable {
143
+ .ms-ListItem-selectionTarget {
144
+ display: block;
145
+ height: 20px;
146
+ left: 6px;
147
+ position: absolute;
148
+ top: 13px;
149
+ width: 20px;
150
+ }
151
+
152
+ .ms-ListItem-image {
153
+ margin-left: 0;
154
+ }
155
+
156
+ &:hover {
157
+ background-color: $ms-color-neutralLight;
158
+ cursor: pointer;
159
+ outline: 1px solid transparent;
160
+
161
+ // Insert the empty box.
162
+ &::before {
163
+ @include ms-Icon;
164
+ position: absolute;
165
+ top: 14px;
166
+ left: 7px;
167
+ height: 15px;
168
+ width: 15px;
169
+ border: 1px solid $ms-color-neutralSecondaryAlt;
170
+ }
171
+ }
172
+ }
173
+
174
+
175
+ //== State: Selected list item
176
+ //
177
+ .ms-ListItem.is-selected {
178
+ // Insert the checkmark.
179
+ &::before {
180
+ border: 1px solid transparent;
181
+ }
182
+
183
+ &::before,
184
+ &:hover::before {
185
+ @include ms-Icon;
186
+ content: '\e73A';
187
+ font-size: $ms-font-size-l;
188
+ color: $ms-color-neutralSecondaryAlt;
189
+ position: absolute;
190
+ top: 23px;
191
+ left: 7px;
192
+ border: 0;
193
+ }
194
+
195
+ &:hover {
196
+ background-color: $ms-color-themeLight;
197
+ outline: 1px solid transparent;
198
+ }
199
+ }
200
+
201
+
202
+ //== Modifier: Document list item
203
+ //
204
+ .ms-ListItem.ms-ListItem--document {
205
+ padding: 0;
206
+
207
+ // The icon for a file or folder in the items list. This may
208
+ // be an .ms-Icon or a specific modifier that loads an image.
209
+ .ms-ListItem-itemIcon {
210
+ width: 70px;
211
+ height: 70px;
212
+ float: left;
213
+ text-align: center;
214
+ }
215
+
216
+ // If the item icon is an .ms-Icon, position and color it appropriately.
217
+ .ms-ListItem-itemIcon .ms-Icon {
218
+ font-size: 38px;
219
+ line-height: 70px;
220
+ color: $ms-color-neutralSecondary;
221
+ }
222
+
223
+ // Primary text, typically the name.
224
+ .ms-ListItem-primaryText {
225
+ @include noWrap;
226
+ font-size: $ms-font-size-m;
227
+ padding-top: 15px;
228
+ padding-right: 0;
229
+ position: static;
230
+ }
231
+
232
+ // Secondary text, typically the modified date or some other metadata.
233
+ .ms-ListItem-secondaryText {
234
+ @include noWrap;
235
+ color: $ms-color-neutralSecondary;
236
+ font-weight: $ms-font-weight-regular;
237
+ font-size: $ms-font-size-xs;
238
+ padding-top: 6px;
239
+ }
240
+ }