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,160 +1,160 @@
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
- // Callout styles
11
-
12
- $ms-Callout-commandButtonHeight: 27px;
13
-
14
- .ms-Callout {
15
- @include ms-baseFont;
16
- width: 288px;
17
-
18
- &.is-hidden {
19
- display: none;
20
- }
21
- }
22
-
23
- .ms-Callout-header {
24
- z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
25
- padding-top: 24px;
26
- padding-bottom: 12px;
27
- padding-left: 28px;
28
- padding-right: 28px;
29
- }
30
-
31
- .ms-Callout-title {
32
- margin: 0;
33
- font-weight: $ms-font-weight-semilight;
34
- font-size: $ms-font-size-xl;
35
- }
36
-
37
- .ms-Callout-subText {
38
- margin: 0;
39
- font-weight: $ms-font-weight-semilight;
40
- color: $ms-color-neutralPrimary;
41
- font-size: $ms-font-size-s;
42
- }
43
-
44
- .ms-Callout-close {
45
- margin: 0;
46
- border: 0;
47
- background: none;
48
- cursor: pointer;
49
- position: absolute;
50
- top: 12px;
51
- right: 12px;
52
- padding: 8px;
53
- width: 32px;
54
- height: 32px;
55
- font-size: 14px;
56
- color: $ms-color-neutralSecondary;
57
- z-index: 110;
58
- }
59
-
60
- .ms-Callout-link {
61
- font-size: $ms-font-size-m;
62
- }
63
-
64
- .ms-Callout-inner {
65
- height: 100%;
66
- padding-top: 0;
67
- padding-bottom: 12px;
68
- padding-left: 28px;
69
- padding-right: 28px;
70
- }
71
-
72
- .ms-Callout-actions {
73
- position: relative;
74
- margin-top: 20px;
75
- width: 100%;
76
- white-space: nowrap;
77
-
78
- .ms-CommandButton.ms-CommandButton--inline {
79
- height: $ms-Callout-commandButtonHeight;
80
- line-height: $ms-Callout-commandButtonHeight;
81
-
82
- .ms-CommandButton-button {
83
- height: $ms-Callout-commandButtonHeight;
84
- line-height: $ms-Callout-commandButtonHeight;
85
- }
86
-
87
- .ms-CommandButton-label {
88
- line-height: $ms-Callout-commandButtonHeight;
89
- }
90
-
91
- .ms-CommandButton-icon {
92
- line-height: $ms-Callout-commandButtonHeight;
93
- }
94
-
95
- &:hover .ms-Button,
96
- &:focus .ms-Button {
97
- color: $ms-color-themePrimary;
98
- }
99
- }
100
-
101
- .ms-Callout-button {
102
- margin-right: 12px;
103
- }
104
- }
105
-
106
- //= Modifier: OOBE (Out of box experience) callout
107
- //
108
- .ms-Callout.ms-Callout--OOBE {
109
-
110
- .ms-Callout-header {
111
- padding: 28px 24px;
112
- background-color: $ms-color-themePrimary;
113
- }
114
-
115
- .ms-Callout-title {
116
- font-weight: $ms-font-weight-light;
117
- font-size: $ms-font-size-xxl;
118
- color: $ms-color-white;
119
- }
120
-
121
- .ms-Callout-inner {
122
- padding-top: 20px;
123
- }
124
-
125
- .ms-Callout-subText {
126
- font-size: $ms-font-size-m;
127
- }
128
- }
129
-
130
-
131
- //= Modifier: ActionText callout
132
- //
133
- .ms-Callout.ms-Callout--actionText {
134
- .ms-Callout-actions {
135
- border-top: 1px solid $ms-color-neutralLight;
136
- padding-top: 12px;
137
- }
138
-
139
- .ms-Callout-inner {
140
- padding-bottom: 12px;
141
- }
142
- }
143
-
144
-
145
- //= Modifier: Peek callout
146
- //
147
- .ms-Callout.ms-Callout--peek {
148
- .ms-Callout-header {
149
- padding-bottom: 0;
150
- }
151
-
152
- .ms-Callout-title {
153
- font-size: $ms-font-size-m;
154
- }
155
-
156
- .ms-Callout-actions {
157
- margin-top: 12px;
158
- margin-bottom: -4px;
159
- }
160
- }
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
+ // Callout styles
11
+
12
+ $ms-Callout-commandButtonHeight: 27px;
13
+
14
+ .ms-Callout {
15
+ @include ms-baseFont;
16
+ width: 288px;
17
+
18
+ &.is-hidden {
19
+ display: none;
20
+ }
21
+ }
22
+
23
+ .ms-Callout-header {
24
+ z-index: ($ms-zIndex-Callout + $ms-zIndex-middle);
25
+ padding-top: 24px;
26
+ padding-bottom: 12px;
27
+ padding-left: 28px;
28
+ padding-right: 28px;
29
+ }
30
+
31
+ .ms-Callout-title {
32
+ margin: 0;
33
+ font-weight: $ms-font-weight-semilight;
34
+ font-size: $ms-font-size-xl;
35
+ }
36
+
37
+ .ms-Callout-subText {
38
+ margin: 0;
39
+ font-weight: $ms-font-weight-semilight;
40
+ color: $ms-color-neutralPrimary;
41
+ font-size: $ms-font-size-s;
42
+ }
43
+
44
+ .ms-Callout-close {
45
+ margin: 0;
46
+ border: 0;
47
+ background: none;
48
+ cursor: pointer;
49
+ position: absolute;
50
+ top: 12px;
51
+ right: 12px;
52
+ padding: 8px;
53
+ width: 32px;
54
+ height: 32px;
55
+ font-size: 14px;
56
+ color: $ms-color-neutralSecondary;
57
+ z-index: 110;
58
+ }
59
+
60
+ .ms-Callout-link {
61
+ font-size: $ms-font-size-m;
62
+ }
63
+
64
+ .ms-Callout-inner {
65
+ height: 100%;
66
+ padding-top: 0;
67
+ padding-bottom: 12px;
68
+ padding-left: 28px;
69
+ padding-right: 28px;
70
+ }
71
+
72
+ .ms-Callout-actions {
73
+ position: relative;
74
+ margin-top: 20px;
75
+ width: 100%;
76
+ white-space: nowrap;
77
+
78
+ .ms-CommandButton.ms-CommandButton--inline {
79
+ height: $ms-Callout-commandButtonHeight;
80
+ line-height: $ms-Callout-commandButtonHeight;
81
+
82
+ .ms-CommandButton-button {
83
+ height: $ms-Callout-commandButtonHeight;
84
+ line-height: $ms-Callout-commandButtonHeight;
85
+ }
86
+
87
+ .ms-CommandButton-label {
88
+ line-height: $ms-Callout-commandButtonHeight;
89
+ }
90
+
91
+ .ms-CommandButton-icon {
92
+ line-height: $ms-Callout-commandButtonHeight;
93
+ }
94
+
95
+ &:hover .ms-Button,
96
+ &:focus .ms-Button {
97
+ color: $ms-color-themePrimary;
98
+ }
99
+ }
100
+
101
+ .ms-Callout-button {
102
+ margin-right: 12px;
103
+ }
104
+ }
105
+
106
+ //= Modifier: OOBE (Out of box experience) callout
107
+ //
108
+ .ms-Callout.ms-Callout--OOBE {
109
+
110
+ .ms-Callout-header {
111
+ padding: 28px 24px;
112
+ background-color: $ms-color-themePrimary;
113
+ }
114
+
115
+ .ms-Callout-title {
116
+ font-weight: $ms-font-weight-light;
117
+ font-size: $ms-font-size-xxl;
118
+ color: $ms-color-white;
119
+ }
120
+
121
+ .ms-Callout-inner {
122
+ padding-top: 20px;
123
+ }
124
+
125
+ .ms-Callout-subText {
126
+ font-size: $ms-font-size-m;
127
+ }
128
+ }
129
+
130
+
131
+ //= Modifier: ActionText callout
132
+ //
133
+ .ms-Callout.ms-Callout--actionText {
134
+ .ms-Callout-actions {
135
+ border-top: 1px solid $ms-color-neutralLight;
136
+ padding-top: 12px;
137
+ }
138
+
139
+ .ms-Callout-inner {
140
+ padding-bottom: 12px;
141
+ }
142
+ }
143
+
144
+
145
+ //= Modifier: Peek callout
146
+ //
147
+ .ms-Callout.ms-Callout--peek {
148
+ .ms-Callout-header {
149
+ padding-bottom: 0;
150
+ }
151
+
152
+ .ms-Callout-title {
153
+ font-size: $ms-font-size-m;
154
+ }
155
+
156
+ .ms-Callout-actions {
157
+ margin-top: 12px;
158
+ margin-bottom: -4px;
159
+ }
160
+ }
@@ -1,175 +1,175 @@
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
- // CheckBox styles
11
-
12
- $ms-checkbox-field-size: 20px;
13
- $ms-checkbox-transition-duration: 200ms;
14
- $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
15
-
16
-
17
- .ms-CheckBox {
18
- box-sizing: border-box;
19
- color: $ms-color-neutralPrimary;
20
- font-family: $ms-font-family-base;
21
- font-size: $ms-font-size-m;
22
- font-weight: $ms-font-weight-regular;
23
- min-height: 36px;
24
- position: relative;
25
-
26
- .ms-Label {
27
- font-size: $ms-font-size-m;
28
- padding: 0 0 0 26px;
29
- cursor: pointer;
30
- display: inline-block;
31
- }
32
- }
33
-
34
- // The hidden input
35
- .ms-CheckBox-input {
36
- position: absolute;
37
- opacity: 0;
38
- }
39
-
40
- // The checkbox square container
41
- .ms-CheckBox-field::before {
42
- content: '';
43
- display: inline-block;
44
- border: 2px solid $ms-color-neutralTertiary;
45
- width: $ms-checkbox-field-size;
46
- height: $ms-checkbox-field-size;
47
- cursor: pointer;
48
- font-weight: normal;
49
- position: absolute;
50
- box-sizing: border-box;
51
- transition-property: background, border, border-color;
52
- transition-duration: $ms-checkbox-transition-duration;
53
- transition-timing-function: $ms-checkbox-transition-timing;
54
- }
55
-
56
- // The check mark icon
57
- .ms-CheckBox-field::after {
58
- @include ms-Icon--CheckMark;
59
- font-family: 'FabricMDL2Icons';
60
- display: none;
61
- position: absolute;
62
- font-weight: 900;
63
- background-color: transparent;
64
- font-size: $ms-font-size-s-plus;
65
- top: 0;
66
- color: $ms-color-white;
67
- line-height: $ms-checkbox-field-size;
68
- width: $ms-checkbox-field-size;
69
- text-align: center;
70
-
71
- @media screen and (-ms-high-contrast: active) {
72
- color: $ms-color-black;
73
- }
74
-
75
- @media screen and (-ms-high-contrast: black-on-white) {
76
- color: $ms-color-white;
77
- }
78
- }
79
-
80
- // The checkbox field
81
- .ms-CheckBox-field {
82
- display: inline-block;
83
- cursor: pointer;
84
- margin-top: 8px;
85
- position: relative;
86
- outline: 0;
87
- vertical-align: top;
88
-
89
- &:hover,
90
- &:focus {
91
- &::before {
92
- border-color: $ms-color-neutralSecondaryAlt;
93
- }
94
-
95
- .ms-Label {
96
- color: $ms-color-black;
97
- }
98
- }
99
-
100
- //== State: A disabled checkbox
101
- //
102
- &.is-disabled {
103
- cursor: default;
104
-
105
- &::before {
106
- background-color: $ms-color-neutralTertiaryAlt;
107
- border-color: $ms-color-neutralTertiaryAlt;
108
- color: $ms-color-neutralTertiaryAlt;
109
-
110
- @media screen and (-ms-high-contrast: active) {
111
- border-color: $ms-color-contrastBlackDisabled;
112
- }
113
-
114
- @media screen and (-ms-high-contrast: black-on-white) {
115
- border-color: $ms-color-contrastWhiteDisabled;
116
- }
117
- }
118
-
119
- .ms-Label {
120
- color: $ms-color-neutralTertiary;
121
-
122
- @media screen and (-ms-high-contrast: active) {
123
- color: $ms-color-contrastBlackDisabled;
124
- }
125
-
126
- @media screen and (-ms-high-contrast: black-on-white) {
127
- color: $ms-color-contrastWhiteDisabled;
128
- }
129
- }
130
- }
131
-
132
- //== State: A checkbox in focus
133
- //
134
- &.in-focus {
135
- &::before {
136
- border-color: $ms-color-neutralSecondaryAlt;
137
- }
138
-
139
- &.is-disabled::before {
140
- border-color: $ms-color-neutralTertiaryAlt;
141
- }
142
-
143
- &.is-checked::before {
144
- border-color: $ms-color-themeDarkAlt;
145
- }
146
- }
147
- }
148
-
149
- //== State: When the checkbox is checked
150
- //
151
- .ms-CheckBox-field.is-checked {
152
- &::before {
153
- border: 10px solid $ms-color-themePrimary;
154
- background-color: $ms-color-themePrimary;
155
-
156
- @media screen and (-ms-high-contrast: active) {
157
- border-color: $ms-color-contrastBlackSelected;
158
- }
159
-
160
- @media screen and (-ms-high-contrast: black-on-white) {
161
- border-color: $ms-color-contrastWhiteSelected;
162
- }
163
- }
164
-
165
- &::after {
166
- display: block;
167
- }
168
-
169
- &:hover,
170
- &:focus {
171
- &::before {
172
- border-color: $ms-color-themeDarkAlt;
173
- }
174
- }
175
- }
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
+ // CheckBox styles
11
+
12
+ $ms-checkbox-field-size: 20px;
13
+ $ms-checkbox-transition-duration: 200ms;
14
+ $ms-checkbox-transition-timing: cubic-bezier(.4, 0, .23, 1);
15
+
16
+
17
+ .ms-CheckBox {
18
+ box-sizing: border-box;
19
+ color: $ms-color-neutralPrimary;
20
+ font-family: $ms-font-family-base;
21
+ font-size: $ms-font-size-m;
22
+ font-weight: $ms-font-weight-regular;
23
+ min-height: 36px;
24
+ position: relative;
25
+
26
+ .ms-Label {
27
+ font-size: $ms-font-size-m;
28
+ padding: 0 0 0 26px;
29
+ cursor: pointer;
30
+ display: inline-block;
31
+ }
32
+ }
33
+
34
+ // The hidden input
35
+ .ms-CheckBox-input {
36
+ position: absolute;
37
+ opacity: 0;
38
+ }
39
+
40
+ // The checkbox square container
41
+ .ms-CheckBox-field::before {
42
+ content: '';
43
+ display: inline-block;
44
+ border: 2px solid $ms-color-neutralTertiary;
45
+ width: $ms-checkbox-field-size;
46
+ height: $ms-checkbox-field-size;
47
+ cursor: pointer;
48
+ font-weight: normal;
49
+ position: absolute;
50
+ box-sizing: border-box;
51
+ transition-property: background, border, border-color;
52
+ transition-duration: $ms-checkbox-transition-duration;
53
+ transition-timing-function: $ms-checkbox-transition-timing;
54
+ }
55
+
56
+ // The check mark icon
57
+ .ms-CheckBox-field::after {
58
+ @include ms-Icon--CheckMark;
59
+ font-family: 'FabricMDL2Icons';
60
+ display: none;
61
+ position: absolute;
62
+ font-weight: 900;
63
+ background-color: transparent;
64
+ font-size: $ms-font-size-s-plus;
65
+ top: 0;
66
+ color: $ms-color-white;
67
+ line-height: $ms-checkbox-field-size;
68
+ width: $ms-checkbox-field-size;
69
+ text-align: center;
70
+
71
+ @media screen and (-ms-high-contrast: active) {
72
+ color: $ms-color-black;
73
+ }
74
+
75
+ @media screen and (-ms-high-contrast: black-on-white) {
76
+ color: $ms-color-white;
77
+ }
78
+ }
79
+
80
+ // The checkbox field
81
+ .ms-CheckBox-field {
82
+ display: inline-block;
83
+ cursor: pointer;
84
+ margin-top: 8px;
85
+ position: relative;
86
+ outline: 0;
87
+ vertical-align: top;
88
+
89
+ &:hover,
90
+ &:focus {
91
+ &::before {
92
+ border-color: $ms-color-neutralSecondaryAlt;
93
+ }
94
+
95
+ .ms-Label {
96
+ color: $ms-color-black;
97
+ }
98
+ }
99
+
100
+ //== State: A disabled checkbox
101
+ //
102
+ &.is-disabled {
103
+ cursor: default;
104
+
105
+ &::before {
106
+ background-color: $ms-color-neutralTertiaryAlt;
107
+ border-color: $ms-color-neutralTertiaryAlt;
108
+ color: $ms-color-neutralTertiaryAlt;
109
+
110
+ @media screen and (-ms-high-contrast: active) {
111
+ border-color: $ms-color-contrastBlackDisabled;
112
+ }
113
+
114
+ @media screen and (-ms-high-contrast: black-on-white) {
115
+ border-color: $ms-color-contrastWhiteDisabled;
116
+ }
117
+ }
118
+
119
+ .ms-Label {
120
+ color: $ms-color-neutralTertiary;
121
+
122
+ @media screen and (-ms-high-contrast: active) {
123
+ color: $ms-color-contrastBlackDisabled;
124
+ }
125
+
126
+ @media screen and (-ms-high-contrast: black-on-white) {
127
+ color: $ms-color-contrastWhiteDisabled;
128
+ }
129
+ }
130
+ }
131
+
132
+ //== State: A checkbox in focus
133
+ //
134
+ &.in-focus {
135
+ &::before {
136
+ border-color: $ms-color-neutralSecondaryAlt;
137
+ }
138
+
139
+ &.is-disabled::before {
140
+ border-color: $ms-color-neutralTertiaryAlt;
141
+ }
142
+
143
+ &.is-checked::before {
144
+ border-color: $ms-color-themeDarkAlt;
145
+ }
146
+ }
147
+ }
148
+
149
+ //== State: When the checkbox is checked
150
+ //
151
+ .ms-CheckBox-field.is-checked {
152
+ &::before {
153
+ border: 10px solid $ms-color-themePrimary;
154
+ background-color: $ms-color-themePrimary;
155
+
156
+ @media screen and (-ms-high-contrast: active) {
157
+ border-color: $ms-color-contrastBlackSelected;
158
+ }
159
+
160
+ @media screen and (-ms-high-contrast: black-on-white) {
161
+ border-color: $ms-color-contrastWhiteSelected;
162
+ }
163
+ }
164
+
165
+ &::after {
166
+ display: block;
167
+ }
168
+
169
+ &:hover,
170
+ &:focus {
171
+ &::before {
172
+ border-color: $ms-color-themeDarkAlt;
173
+ }
174
+ }
175
+ }