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,62 @@
1
+ $control-size: rem(16px);
2
+
3
+ // Need to push the control down just a little to have it appear
4
+ // vertically centered with the label.
5
+ $control-vertical-adjustment: 2px;
6
+
7
+ // Negative margin on the left compensates for the icon being inset
8
+ // within its viewbox.
9
+ $icon-horizontal-adjustment: 2px;
10
+
11
+ .Polaris-Choice {
12
+ display: flex;
13
+ align-items: flex-start;
14
+ padding: spacing(extra-tight) 0;
15
+ }
16
+
17
+ .Polaris-Choice--labelHidden {
18
+ > .Polaris-Choice__Label {
19
+ @include visually-hidden;
20
+ }
21
+ }
22
+
23
+ .Polaris-Choice__Control {
24
+ display: flex;
25
+ flex: 0 0 auto;
26
+ align-items: stretch;
27
+ height: $control-size;
28
+ width: $control-size;
29
+ margin-top: $control-vertical-adjustment;
30
+ margin-right: spacing(tight);
31
+
32
+ > * {
33
+ width: 100%;
34
+ }
35
+ }
36
+
37
+ .Polaris-Choice__Label {
38
+ @include text-style-body;
39
+ flex: 1 1 0%;
40
+ -webkit-tap-highlight-color: transparent;
41
+ }
42
+
43
+ .Polaris-Choice__Descriptions {
44
+ padding-left: spacing(tight) + $control-size;
45
+ }
46
+
47
+ .Polaris-Choice__HelpText {
48
+ @include text-style-body;
49
+ @include text-emphasis-subdued;
50
+ margin-bottom: spacing(extra-tight);
51
+ }
52
+
53
+ .Polaris-Choice__Error {
54
+ display: flex;
55
+ margin-bottom: spacing(extra-tight);
56
+ color: color(red, dark);
57
+ }
58
+
59
+ .Polaris-Choice__ErrorIcon {
60
+ @include recolor-icon(color(red));
61
+ margin: 0 spacing(extra-tight) 0 (-1 * $icon-horizontal-adjustment);
62
+ }
@@ -0,0 +1,22 @@
1
+ .Polaris-ChoiceList {
2
+ margin: 0;
3
+ padding: 0;
4
+ border: none;
5
+ }
6
+
7
+ .Polaris-ChoiceList--titleHidden > .Polaris-ChoiceList__Title {
8
+ @include visually-hidden;
9
+ }
10
+
11
+ .Polaris-ChoiceList__Choices {
12
+ list-style: none;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ .Polaris-ChoiceList__Title {
18
+ @include text-style-body;
19
+ display: block;
20
+ margin: 0 0 spacing(extra-tight);
21
+ padding: 0;
22
+ }
@@ -0,0 +1,18 @@
1
+ .Polaris-Collapsible {
2
+ overflow: hidden;
3
+ height: 0;
4
+ padding-top: 0;
5
+ padding-bottom: 0;
6
+ opacity: 0;
7
+ will-change: opacity, height;
8
+ }
9
+
10
+ .Polaris-Collapsible--animating {
11
+ transition-property: opacity, height;
12
+ transition-duration: duration(slow);
13
+ transition-timing-function: easing(out);
14
+ }
15
+
16
+ .Polaris-Collapsible--open {
17
+ opacity: 1;
18
+ }
@@ -0,0 +1,133 @@
1
+ $picker-size: rem(160px);
2
+ $dragger-size: rem(18px);
3
+ $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
4
+
5
+ $stacking-order: (
6
+ color: 10,
7
+ adjustments: 20,
8
+ dragger: 30,
9
+ );
10
+
11
+ @mixin checkers {
12
+ background-image:
13
+ linear-gradient(45deg, color(sky) 25%, transparent 25%),
14
+ linear-gradient(-45deg, color(sky) 25%, transparent 25%),
15
+ linear-gradient(45deg, transparent 75%, color(sky) 75%),
16
+ linear-gradient(-45deg, transparent 75%, color(sky) 75%);
17
+ background-size: spacing() spacing();
18
+ background-position: 0 0, 0 spacing(tight), spacing(tight) -1 * spacing(tight), -1 * spacing(tight) 0;
19
+ }
20
+
21
+ .Polaris-ColorPicker {
22
+ user-select: none;
23
+ display: flex;
24
+ }
25
+
26
+ .Polaris-ColorPicker__MainColor {
27
+ @include checkers;
28
+ position: relative;
29
+ overflow: hidden;
30
+ height: $picker-size;
31
+ width: $picker-size;
32
+
33
+ // Need an extra pixel to avoid a small color bleed from happening
34
+ border-radius: border-radius() + 1px;
35
+ cursor: pointer;
36
+
37
+ .Polaris-ColorPicker__Dragger {
38
+ right: 0.5 * $dragger-size;
39
+ margin: 0;
40
+ }
41
+
42
+ .Polaris-ColorPicker__ColorLayer {
43
+ box-shadow: inset shadow(deep);
44
+ border-radius: border-radius() + 1px;
45
+ }
46
+
47
+ &::after,
48
+ &::before {
49
+ content: '';
50
+ position: absolute;
51
+ z-index: z-index(adjustments, $stacking-order);
52
+ top: 0;
53
+ left: 0;
54
+ display: block;
55
+ height: 100%;
56
+ width: 100%;
57
+ pointer-events: none;
58
+ border-radius: border-radius();
59
+ }
60
+
61
+ &::before {
62
+ background: linear-gradient(to right, white, transparent);
63
+ }
64
+
65
+ &::after {
66
+ // Indistinguishable colors linter is blanking on alpha difference
67
+ // stylelint-disable-next-line no-indistinguishable-colors
68
+ background-image: linear-gradient(to top, black, transparent);
69
+ box-shadow: inset shadow(deep);
70
+ }
71
+ }
72
+
73
+ .Polaris-ColorPicker__Dragger {
74
+ position: relative;
75
+ z-index: z-index(dragger, $stacking-order);
76
+ bottom: 0.5 * $dragger-size;
77
+ transform: none;
78
+ height: $dragger-size;
79
+ width: $dragger-size;
80
+ margin: 0 auto;
81
+ will-change: transform;
82
+ background: transparent;
83
+ border: border-radius() solid color(white);
84
+ box-shadow: shadow(deep), inset shadow(deep);
85
+ border-radius: 50%;
86
+ pointer-events: none;
87
+ }
88
+
89
+ $green: rgb(0, 255, 0);
90
+ $purple: rgb(255, 0, 255);
91
+ $huepicker-padding: $dragger-size;
92
+ $huepicker-bottom-padding-start: $picker-size - $dragger-size;
93
+
94
+ .Polaris-ColorPicker__HuePicker,
95
+ .Polaris-ColorPicker__AlphaPicker {
96
+ position: relative;
97
+ overflow: hidden;
98
+ height: $picker-size;
99
+ width: rem(24px);
100
+ margin-left: spacing(tight);
101
+ border-width: border-radius();
102
+ border-radius: $picker-size * 0.5;
103
+ }
104
+
105
+ .Polaris-ColorPicker__HuePicker {
106
+ background-image: linear-gradient(to bottom, red $dragger-size, yellow, $green, cyan, blue, $purple, red $huepicker-bottom-padding-start);
107
+ box-shadow: $inner-shadow;
108
+ }
109
+
110
+ .Polaris-ColorPicker__AlphaPicker {
111
+ @include checkers;
112
+
113
+ .Polaris-ColorPicker__ColorLayer {
114
+ border-radius: $picker-size * 0.5;
115
+ }
116
+ }
117
+
118
+ .Polaris-ColorPicker__ColorLayer {
119
+ position: absolute;
120
+ z-index: z-index(color, $stacking-order);
121
+ top: 0;
122
+ left: 0;
123
+ height: 100%;
124
+ width: 100%;
125
+ box-shadow: $inner-shadow;
126
+ pointer-events: none;
127
+ }
128
+
129
+ .Polaris-ColorPicker__Slidable {
130
+ height: 100%;
131
+ width: 100%;
132
+ cursor: pointer;
133
+ }
@@ -0,0 +1,67 @@
1
+ $staacking-order: (
2
+ item: 10,
3
+ primary: 20,
4
+ focused: 30,
5
+ );
6
+
7
+ .Polaris-Connected {
8
+ position: relative;
9
+ display: flex;
10
+ }
11
+
12
+ .Polaris-Connected__Item {
13
+ position: relative;
14
+ z-index: z-index(item, $staacking-order);
15
+ flex: 0 0 auto;
16
+
17
+ &:not(:first-child) {
18
+ margin-left: -1px;
19
+ }
20
+ }
21
+
22
+ // This is a violation of our component model, but it's the cleanest
23
+ // way to remove the border radii on connected elements.
24
+ // stylelint-disable declaration-no-important
25
+
26
+ .Polaris-Connected__Item--primary {
27
+ z-index: z-index(primary, $staacking-order);
28
+ flex: 1 1 auto;
29
+
30
+ &:not(:first-child) * {
31
+ border-top-left-radius: 0 !important;
32
+ border-bottom-left-radius: 0 !important;
33
+ }
34
+
35
+ &:not(:last-child) * {
36
+ border-top-right-radius: 0 !important;
37
+ border-bottom-right-radius: 0 !important;
38
+ }
39
+ }
40
+
41
+ .Polaris-Connected__Item--connection {
42
+ &:first-child * {
43
+ border-top-right-radius: 0 !important;
44
+ border-bottom-right-radius: 0 !important;
45
+
46
+ &::after {
47
+ border-top-right-radius: 0 !important;
48
+ border-bottom-right-radius: 0 !important;
49
+ }
50
+ }
51
+
52
+ &:last-child * {
53
+ border-top-left-radius: 0 !important;
54
+ border-bottom-left-radius: 0 !important;
55
+
56
+ &::after {
57
+ border-top-left-radius: 0 !important;
58
+ border-bottom-left-radius: 0 !important;
59
+ }
60
+ }
61
+ }
62
+
63
+ // stylelint-enable declaration-no-important
64
+
65
+ .Polaris-Connected__Item--focused {
66
+ z-index: z-index(focused, $staacking-order);
67
+ }
@@ -0,0 +1,147 @@
1
+ $stacking-order: (
2
+ in-range: 20,
3
+ selected: 30,
4
+ );
5
+
6
+ $font-size: rem(12px);
7
+
8
+ // Need to define raw colour for the borders of inRange
9
+ // stylelint-disable-next-line color-no-hex
10
+ $in-range-border-color: #9ca6de;
11
+
12
+ .Polaris-DatePicker {
13
+ position: relative;
14
+ }
15
+
16
+ .Polaris-DatePicker__MonthContainer {
17
+ display: flex;
18
+ flex-wrap: wrap;
19
+ margin-top: -1 * spacing();
20
+ margin-left: -1 * spacing();
21
+ }
22
+
23
+ .Polaris-DatePicker__Month {
24
+ flex: 1 1 auto;
25
+ margin-top: spacing();
26
+ margin-left: spacing();
27
+ max-width: calc(100% - #{spacing()});
28
+ min-width: rem(230px);
29
+ }
30
+
31
+ .Polaris-DatePicker__Week,
32
+ .Polaris-DatePicker__WeekHeadings {
33
+ display: flex;
34
+
35
+ + .Polaris-DatePicker__Week {
36
+ margin-top: -1px;
37
+ }
38
+ }
39
+
40
+ .Polaris-DatePicker__Day {
41
+ display: block;
42
+ flex: 1 0 0%;
43
+ width: (100% / 7);
44
+ margin: 0;
45
+ padding: spacing(tight);
46
+ background: transparent;
47
+ border: border();
48
+ outline: none;
49
+ font-size: $font-size;
50
+ text-align: center;
51
+ cursor: pointer;
52
+
53
+ &:hover {
54
+ background: color(sky);
55
+ }
56
+
57
+ &:focus {
58
+ box-shadow: inset 0 0 0 2px color(indigo);
59
+ }
60
+
61
+ + .Polaris-DatePicker__Day,
62
+ + .Polaris-DatePicker__EmptyDay {
63
+ margin-left: -1px;
64
+ }
65
+ }
66
+
67
+ .Polaris-DatePicker__Day--inRange {
68
+ z-index: z-index(in-range, $stacking-order);
69
+ background: color(indigo, light);
70
+ border: 1px solid $in-range-border-color;
71
+
72
+ &:hover {
73
+ background: darken(color(indigo, light), 5%);
74
+ }
75
+ }
76
+
77
+ .Polaris-DatePicker__Day--selected {
78
+ z-index: z-index(selected, $stacking-order);
79
+ background: color(indigo);
80
+ border: 1px solid color(indigo);
81
+ color: color(white);
82
+
83
+ &:hover {
84
+ background: darken(color(indigo), 5%);
85
+ }
86
+
87
+ &:focus {
88
+ box-shadow: inset 0 0 0 2px color(indigo, dark);
89
+ }
90
+ }
91
+
92
+ .Polaris-DatePicker__Day--disabled {
93
+ background-color: color(sky, lighter);
94
+ color: color(sky, dark);
95
+ cursor: default;
96
+
97
+ &:hover {
98
+ background-color: color(sky, lighter);
99
+ }
100
+
101
+ &:focus {
102
+ box-shadow: none;
103
+ }
104
+ }
105
+
106
+ .Polaris-DatePicker__EmptyDay {
107
+ display: block;
108
+ flex: 1 0 0%;
109
+ width: calc(100% / 7);
110
+ margin: 0;
111
+ padding: spacing(tight);
112
+ border: border();
113
+
114
+ + .Polaris-DatePicker__EmptyDay,
115
+ + .Polaris-DatePicker__Day {
116
+ margin-left: -1px;
117
+ }
118
+ }
119
+
120
+ .Polaris-DatePicker__Weekday {
121
+ display: block;
122
+ flex: 1 0 0%;
123
+ padding: spacing(tight);
124
+ background: transparent;
125
+ font-size: $font-size;
126
+ color: color(ink, lighter);
127
+ text-align: center;
128
+
129
+ + .Polaris-DatePicker__Weekday {
130
+ margin-left: -1px;
131
+ }
132
+ }
133
+
134
+ .Polaris-DatePicker__Header {
135
+ position: absolute;
136
+ top: spacing();
137
+ display: flex;
138
+ justify-content: space-between;
139
+ width: 100%;
140
+ }
141
+
142
+ .Polaris-DatePicker__Title {
143
+ flex: 1 1 auto;
144
+ margin-top: rem(2px);
145
+ padding-bottom: spacing(extra-tight);
146
+ text-align: center;
147
+ }