polaris_view_helpers 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. checksums.yaml +4 -4
  2. data/lib/polaris_view_helpers/version.rb +1 -1
  3. data/vendor/assets/stylesheets/shopify-polaris-1.0.3.css +3414 -0
  4. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles.scss +4 -0
  5. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components.scss +51 -0
  6. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/AccountConnection.scss +9 -0
  7. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ActionList.scss +75 -0
  8. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Avatar.scss +70 -0
  9. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Badge.scss +68 -0
  10. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Banner.scss +140 -0
  11. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Breadcrumbs.scss +45 -0
  12. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Button.scss +228 -0
  13. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ButtonGroup.scss +67 -0
  14. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/CalloutCard.scss +27 -0
  15. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Caption.scss +4 -0
  16. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Card.scss +43 -0
  17. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Checkbox.scss +78 -0
  18. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Choice.scss +62 -0
  19. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ChoiceList.scss +22 -0
  20. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Collapsible.scss +18 -0
  21. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ColorPicker.scss +133 -0
  22. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Connected.scss +67 -0
  23. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DatePicker.scss +147 -0
  24. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DescriptionList.scss +44 -0
  25. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/DisplayText.scss +19 -0
  26. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/EmptyState.scss +63 -0
  27. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/FooterHelp.scss +26 -0
  28. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/FormLayout.scss +35 -0
  29. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Heading.scss +4 -0
  30. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Icon.scss +226 -0
  31. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/KeyboardKey.scss +22 -0
  32. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Label.scss +18 -0
  33. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Labelled.scss +24 -0
  34. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Layout.scss +69 -0
  35. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Link.scss +18 -0
  36. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/List.scss +52 -0
  37. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Page.scss +125 -0
  38. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/PageActions.scss +9 -0
  39. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Pagination.scss +139 -0
  40. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Popover.scss +98 -0
  41. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/PositionedOverlay.scss +8 -0
  42. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/RadioButton.scss +68 -0
  43. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/ResourceList.scss +272 -0
  44. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Scrollable.scss +28 -0
  45. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Select.scss +103 -0
  46. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/SettingAction.scss +22 -0
  47. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Stack.scss +98 -0
  48. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Subheading.scss +4 -0
  49. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tabs.scss +150 -0
  50. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tag.scss +37 -0
  51. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextContainer.scss +12 -0
  52. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextField.scss +219 -0
  53. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/TextStyle.scss +15 -0
  54. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Thumbnail.scss +49 -0
  55. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/Tooltip.scss +70 -0
  56. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/components/VisuallyHidden.scss +3 -0
  57. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation.scss +11 -0
  58. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/border-radius.scss +12 -0
  59. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/borders.scss +19 -0
  60. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/colors.scss +142 -0
  61. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/duration.scss +24 -0
  62. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/easing.scss +23 -0
  63. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/layout.scss +46 -0
  64. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/shadows.scss +25 -0
  65. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/spacing.scss +25 -0
  66. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/typography.scss +127 -0
  67. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/utilities.scss +90 -0
  68. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/z-index.scss +19 -0
  69. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/global.scss +55 -0
  70. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared.scss +8 -0
  71. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/accessibility.scss +16 -0
  72. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/breakpoints.scss +127 -0
  73. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/buttons.scss +87 -0
  74. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/controls.scss +59 -0
  75. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/icons.scss +11 -0
  76. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/layout.scss +8 -0
  77. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/links.scss +8 -0
  78. data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/shared/typography.scss +128 -0
  79. metadata +79 -3
@@ -0,0 +1,98 @@
1
+ $arrow-size: rem(14px);
2
+ $visible-portion-of-arrow: rem(5px);
3
+ $content-max-height: rem(295px);
4
+ $content-max-width: rem(400px);
5
+
6
+ .Polaris-Popover {
7
+ max-width: calc(100vw - #{2 * spacing()});
8
+ margin: $visible-portion-of-arrow spacing() spacing();
9
+ opacity: 1;
10
+ box-shadow: shadow(deep);
11
+ border-radius: border-radius(large);
12
+ will-change: opacity, left, top;
13
+ transition: opacity duration() easing(in);
14
+ }
15
+
16
+ .Polaris-Popover--measuring:not(.Polaris-Popover--leaving),
17
+ .Polaris-Popover--leaving {
18
+ opacity: 0;
19
+ }
20
+
21
+ .Polaris-Popover--measuring {
22
+ .Polaris-Popover__Content {
23
+ display: block;
24
+ }
25
+ }
26
+
27
+ .Polaris-Popover--leaving {
28
+ transition-timing-function: easing(out);
29
+ }
30
+
31
+ .Polaris-Popover--positionedAbove {
32
+ margin: spacing() spacing() $visible-portion-of-arrow;
33
+
34
+ .Polaris-Popover__Tip {
35
+ top: inherit;
36
+ bottom: 0;
37
+ border-top-left-radius: 0;
38
+ border-bottom-right-radius: border-radius();
39
+ }
40
+ }
41
+
42
+ .Polaris-Popover__Wrapper {
43
+ position: relative;
44
+ overflow: hidden;
45
+ background-color: color(white);
46
+ border-radius: border-radius(large);
47
+ }
48
+
49
+ .Polaris-Popover__Content {
50
+ position: relative;
51
+ display: flex;
52
+ flex-direction: column;
53
+ border-radius: border-radius(large);
54
+ max-width: $content-max-width;
55
+ max-height: $content-max-height;
56
+
57
+ &:focus {
58
+ outline: none;
59
+ }
60
+ }
61
+
62
+ .Polaris-Popover__Tip {
63
+ position: absolute;
64
+ top: 0;
65
+ left: 50%;
66
+ transform: translateX(-50%) rotate(45deg);
67
+ height: $arrow-size;
68
+ width: $arrow-size;
69
+ background: color(white);
70
+ border-top-left-radius: border-radius();
71
+ box-shadow: shadow(deep);
72
+ }
73
+
74
+ .Polaris-Popover__Pane {
75
+ flex: 1 1 0%;
76
+ max-width: 100%;
77
+
78
+ + .Polaris-Popover__Pane {
79
+ border-top: border();
80
+ }
81
+ }
82
+
83
+ .Polaris-Popover__Pane--fixed {
84
+ overflow: visible;
85
+ flex: 0 0 auto;
86
+ }
87
+
88
+ .Polaris-Popover__Section {
89
+ padding: spacing();
90
+
91
+ + .Polaris-Popover__Section {
92
+ border-top: border();
93
+ }
94
+ }
95
+
96
+ .Polaris-Popover__FocusTracker {
97
+ @include visually-hidden;
98
+ }
@@ -0,0 +1,8 @@
1
+ .Polaris-PositionedOverlay {
2
+ position: absolute;
3
+ z-index: z-index(overlay);
4
+ }
5
+
6
+ .Polaris-PositionedOverlay--calculating {
7
+ visibility: hidden;
8
+ }
@@ -0,0 +1,68 @@
1
+ .Polaris-RadioButton {
2
+ position: relative;
3
+ }
4
+
5
+ .Polaris-RadioButton__Input {
6
+ margin: 0;
7
+ padding: 0;
8
+ opacity: 0;
9
+ appearance: none;
10
+
11
+ &:focus,
12
+ &:active,
13
+ &:checked {
14
+ + .Polaris-RadioButton__Backdrop {
15
+ background: color(indigo);
16
+ }
17
+ }
18
+
19
+ &:checked {
20
+ ~ .Polaris-RadioButton__Icon {
21
+ transform: translate(-50%, -50%) scale(1);
22
+ }
23
+ }
24
+
25
+ &:focus,
26
+ &:active {
27
+ + .Polaris-RadioButton__Backdrop {
28
+ @include control-backdrop(focused);
29
+ }
30
+ }
31
+
32
+ &:disabled {
33
+ + .Polaris-RadioButton__Backdrop {
34
+ @include control-backdrop(disabled);
35
+ }
36
+
37
+ ~ .Polaris-RadioButton__Icon {
38
+ background-color: color(sky, dark);
39
+ }
40
+ }
41
+ }
42
+
43
+ .Polaris-RadioButton__Backdrop {
44
+ @include control-backdrop;
45
+ position: absolute;
46
+ top: 0;
47
+ bottom: 0;
48
+ left: 0;
49
+ right: 0;
50
+ border-radius: 50%;
51
+
52
+ &::after {
53
+ border-radius: 50%;
54
+ }
55
+ }
56
+
57
+ .Polaris-RadioButton__Icon {
58
+ position: absolute;
59
+ top: 50%;
60
+ left: 50%;
61
+ transform: translate(-50%, -50%) scale(0);
62
+ transform-origin: 50% 50%;
63
+ height: 50%;
64
+ width: 50%;
65
+ background: color(indigo);
66
+ border-radius: 50%;
67
+ transition: control-icon-transition();
68
+ }
@@ -0,0 +1,272 @@
1
+ $stacking-order: (
2
+ link: 10,
3
+ content: 20,
4
+ );
5
+
6
+ $avatar-small-size: rem(32px);
7
+ $avatar-medium-size: rem(40px);
8
+ $avatar-large-size: rem(60px);
9
+
10
+ $thumbnail-small-size: rem(40px);
11
+ $thumbnail-medium-size: rem(60px);
12
+ $thumbnail-large-size: rem(80px);
13
+
14
+ $action-button-height: rem(30px);
15
+
16
+ .Polaris-ResourceList {
17
+ margin: 0;
18
+ padding: 0;
19
+ list-style: none;
20
+ }
21
+
22
+ .Polaris-ResourceList__ItemWrapper {
23
+ + .Polaris-ResourceList__ItemWrapper {
24
+ border-top: border();
25
+ }
26
+ }
27
+
28
+ .Polaris-ResourceList__Item {
29
+ position: relative;
30
+
31
+ &:not(.Polaris-ResourceList__Item--persistActions) {
32
+ .Polaris-ResourceList__Actions {
33
+ position: absolute;
34
+ right: spacing(tight);
35
+ display: none;
36
+ pointer-events: initial;
37
+ }
38
+
39
+ &.Polaris-ResourceList__Item--focused {
40
+ // Need this deeply nested selector to override the more specific :not()
41
+ // selector needed above.
42
+ // stylelint-disable-next-line selector-max-specificity
43
+ .Polaris-ResourceList__Actions {
44
+ display: flex;
45
+ }
46
+ }
47
+ }
48
+ }
49
+
50
+ .Polaris-ResourceList__Item--persistActions {
51
+ .Polaris-ResourceList__AttributeThree {
52
+ margin-left: 0;
53
+ }
54
+
55
+ .Polaris-ResourceList__Actions {
56
+ display: flex;
57
+ flex: 0 0 auto;
58
+ align-items: center;
59
+ margin-left: spacing();
60
+ pointer-events: initial;
61
+
62
+ @include page-content-when-partially-condensed {
63
+ display: none;
64
+ }
65
+ }
66
+ }
67
+
68
+ .Polaris-ResourceList__Item--link {
69
+ cursor: pointer;
70
+ }
71
+
72
+ .Polaris-ResourceList__Item--focused {
73
+ background: color(sky, lighter);
74
+ }
75
+
76
+ // Had min-height style below instead of height. Need height for IE11 vertical centering
77
+ // to work with display: flex. Reference: http://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
78
+ .Polaris-ResourceList__Item--mediaAvatar {
79
+ &.Polaris-ResourceList__Item--sizeSmall {
80
+ .Polaris-ResourceList__Actions {
81
+ height: $avatar-small-size;
82
+ }
83
+ }
84
+
85
+ &.Polaris-ResourceList__Item--sizeMedium {
86
+ .Polaris-ResourceList__Actions {
87
+ height: $avatar-medium-size;
88
+ }
89
+ }
90
+
91
+ &.Polaris-ResourceList__Item--sizeLarge {
92
+ .Polaris-ResourceList__Actions {
93
+ height: $avatar-large-size;
94
+ }
95
+ }
96
+ }
97
+
98
+ .Polaris-ResourceList__Item--mediaThumbnail {
99
+ &.Polaris-ResourceList__Item--sizeSmall {
100
+ .Polaris-ResourceList__Actions {
101
+ height: $thumbnail-small-size;
102
+ }
103
+ }
104
+
105
+ &.Polaris-ResourceList__Item--sizeMedium {
106
+ .Polaris-ResourceList__Actions {
107
+ height: $thumbnail-medium-size;
108
+ }
109
+ }
110
+
111
+ &.Polaris-ResourceList__Item--sizeLarge {
112
+ .Polaris-ResourceList__Actions {
113
+ height: $thumbnail-large-size;
114
+ }
115
+ }
116
+ }
117
+
118
+ .Polaris-ResourceList__Media {
119
+ flex: 0 0 auto;
120
+ margin-right: spacing(loose);
121
+ color: inherit;
122
+ text-decoration: none;
123
+ }
124
+
125
+ .Polaris-ResourceList__Container {
126
+ position: relative;
127
+ z-index: z-index(content, $stacking-order);
128
+ display: flex;
129
+ pointer-events: none;
130
+ padding: (0.75 * spacing()) spacing(loose);
131
+ }
132
+
133
+ .Polaris-ResourceList__Content {
134
+ @include layout-flex-fix;
135
+ flex: 1 1 auto;
136
+ align-self: center;
137
+
138
+ // Adding with 100% for IE11 fix
139
+ width: 100%;
140
+ }
141
+
142
+ .Polaris-ResourceList__Attributes {
143
+ display: flex;
144
+ flex: 1 1 auto;
145
+ flex-wrap: wrap;
146
+ align-items: center;
147
+ color: inherit;
148
+ text-decoration: none;
149
+ hyphens: auto;
150
+ min-height: $action-button-height;
151
+
152
+ @include page-content-when-partially-condensed {
153
+ flex-direction: column;
154
+ align-items: flex-start;
155
+ }
156
+ }
157
+
158
+ .Polaris-ResourceList__AttributeOne,
159
+ .Polaris-ResourceList__AttributeTwo {
160
+ flex-shrink: 0;
161
+ margin-right: (0.75 * spacing());
162
+ }
163
+
164
+ .Polaris-ResourceList__AttributeOne {
165
+ font-weight: 600;
166
+ }
167
+
168
+ .Polaris-ResourceList__AttributeThree {
169
+ margin-left: auto;
170
+
171
+ @include page-content-when-partially-condensed {
172
+ margin-left: 0;
173
+ }
174
+ }
175
+
176
+ .Polaris-ResourceList__Badge {
177
+ flex-shrink: 0;
178
+ flex-basis: auto;
179
+ margin-right: spacing();
180
+
181
+ @include page-content-when-partially-condensed {
182
+ order: 4;
183
+ align-self: auto;
184
+ margin-top: rem(4px);
185
+ margin-bottom: rem(4px);
186
+ }
187
+ }
188
+
189
+ .Polaris-ResourceList__Actions {
190
+ display: flex;
191
+ flex-basis: auto;
192
+ align-items: center;
193
+ }
194
+
195
+ .Polaris-ResourceList__Disclosure {
196
+ display: none;
197
+ pointer-events: initial;
198
+
199
+ @include page-content-when-partially-condensed {
200
+ display: block;
201
+ }
202
+ }
203
+
204
+ .Polaris-ResourceList__ExceptionList {
205
+ margin: spacing(extra-tight) 0 0 0;
206
+ padding: 0;
207
+ list-style: none;
208
+ }
209
+
210
+ .Polaris-ResourceList__ExceptionItem {
211
+ @include text-emphasis-subdued;
212
+ display: flex;
213
+ align-items: center;
214
+
215
+ &::before {
216
+ content: '';
217
+ display: block;
218
+ flex-shrink: 0;
219
+ height: rem(6px);
220
+ width: rem(6px);
221
+ margin-right: spacing(tight);
222
+ background: color(ink, lightest);
223
+ border-radius: 100%;
224
+ }
225
+ }
226
+
227
+ .Polaris-ResourceList__ExceptionItem--statusWarning {
228
+ .Polaris-ResourceList__Title {
229
+ color: color(orange, dark);
230
+ }
231
+
232
+ &::before {
233
+ background: color(orange);
234
+ }
235
+ }
236
+
237
+ .Polaris-ResourceList__ExceptionItem--statusCritical {
238
+ .Polaris-ResourceList__Title {
239
+ color: color(red, dark);
240
+ }
241
+
242
+ &::before {
243
+ background: color(red);
244
+ }
245
+ }
246
+
247
+ .Polaris-ResourceList__Title {
248
+ @include text-emphasis-subdued;
249
+ white-space: nowrap;
250
+ }
251
+
252
+ .Polaris-ResourceList__Description {
253
+ text-overflow: ellipsis;
254
+ overflow: hidden;
255
+ white-space: nowrap;
256
+ }
257
+
258
+ .Polaris-ResourceList__Title + .Polaris-ResourceList__Description::before {
259
+ content: '\2013';
260
+ padding: 0 spacing(extra-tight);
261
+ color: color(ink, lighter);
262
+ }
263
+
264
+ .Polaris-ResourceList__Link {
265
+ position: absolute;
266
+ z-index: z-index(link, $stacking-order);
267
+ top: 0;
268
+ left: 0;
269
+ height: 100%;
270
+ width: 100%;
271
+ opacity: 0;
272
+ }