polaris_view_helpers 0.0.3 → 0.0.4

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 (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,4 @@
1
+ @import 'styles/foundation';
2
+ @import 'styles/shared';
3
+ @import 'styles/global';
4
+ @import 'styles/components';
@@ -0,0 +1,51 @@
1
+ @import 'components/AccountConnection';
2
+ @import 'components/ActionList';
3
+ @import 'components/Avatar';
4
+ @import 'components/Badge';
5
+ @import 'components/Banner';
6
+ @import 'components/Breadcrumbs';
7
+ @import 'components/Button';
8
+ @import 'components/ButtonGroup';
9
+ @import 'components/CalloutCard';
10
+ @import 'components/Caption';
11
+ @import 'components/Card';
12
+ @import 'components/Checkbox';
13
+ @import 'components/Choice';
14
+ @import 'components/ChoiceList';
15
+ @import 'components/Collapsible';
16
+ @import 'components/ColorPicker';
17
+ @import 'components/Connected';
18
+ @import 'components/DatePicker';
19
+ @import 'components/DescriptionList';
20
+ @import 'components/DisplayText';
21
+ @import 'components/EmptyState';
22
+ @import 'components/FooterHelp';
23
+ @import 'components/FormLayout';
24
+ @import 'components/Heading';
25
+ @import 'components/Icon';
26
+ @import 'components/KeyboardKey';
27
+ @import 'components/Label';
28
+ @import 'components/Labelled';
29
+ @import 'components/Layout';
30
+ @import 'components/Link';
31
+ @import 'components/List';
32
+ @import 'components/Page';
33
+ @import 'components/PageActions';
34
+ @import 'components/Pagination';
35
+ @import 'components/Popover';
36
+ @import 'components/PositionedOverlay';
37
+ @import 'components/RadioButton';
38
+ @import 'components/ResourceList';
39
+ @import 'components/Scrollable';
40
+ @import 'components/Select';
41
+ @import 'components/SettingAction';
42
+ @import 'components/Stack';
43
+ @import 'components/Subheading';
44
+ @import 'components/Tabs';
45
+ @import 'components/Tag';
46
+ @import 'components/TextContainer';
47
+ @import 'components/TextField';
48
+ @import 'components/TextStyle';
49
+ @import 'components/Thumbnail';
50
+ @import 'components/Tooltip';
51
+ @import 'components/VisuallyHidden';
@@ -0,0 +1,9 @@
1
+ .Polaris-AccountConnection__TermsOfService {
2
+ margin-top: spacing(loose);
3
+ }
4
+
5
+ .Polaris-AccountConnection__Content {
6
+ > * + * {
7
+ margin-top: spacing(tight);
8
+ }
9
+ }
@@ -0,0 +1,75 @@
1
+ $image-size: rem(24px);
2
+ $item-min-height: rem(40px);
3
+ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
4
+
5
+ .Polaris-ActionList {
6
+ list-style: none;
7
+ margin: 0;
8
+ padding: spacing(tight) 0;
9
+
10
+ + .Polaris-ActionList {
11
+ border-top: border();
12
+ }
13
+ }
14
+
15
+ .Polaris-ActionList__Actions {
16
+ list-style: none;
17
+ margin: 0;
18
+ padding: 0;
19
+ }
20
+
21
+ .Polaris-ActionList__Title {
22
+ @include text-style-subheading;
23
+ padding: (spacing(tight) * 1.5) spacing();
24
+ border-bottom: border();
25
+ font-weight: 400;
26
+ }
27
+
28
+ .Polaris-ActionList__Item {
29
+ @include unstyled-button;
30
+ @include unstyled-link;
31
+ display: block;
32
+ width: 100%;
33
+ min-height: $item-min-height;
34
+ padding: $item-vertical-padding spacing();
35
+ text-align: left;
36
+ cursor: pointer;
37
+
38
+ &:hover,
39
+ &:focus,
40
+ &:active {
41
+ background: color(indigo);
42
+ outline: none;
43
+ color: color(white);
44
+
45
+ .Polaris-ActionList__Image {
46
+ @include recolor-icon(color(sky));
47
+ }
48
+ }
49
+ }
50
+
51
+ .Polaris-ActionList__Content {
52
+ display: flex;
53
+ align-items: center;
54
+ }
55
+
56
+ .Polaris-ActionList__Image {
57
+ @include recolor-icon(color(ink, lightest));
58
+ display: flex;
59
+ flex: 0 0 auto;
60
+ justify-content: center;
61
+ align-items: center;
62
+ height: $image-size;
63
+ width: $image-size;
64
+
65
+ // We need the negative margin to ensure that the image does not set
66
+ // the minimum height of the action item.
67
+ margin: (-0.5 * $image-size) spacing() (-0.5 * $image-size) 0;
68
+ background-size: cover;
69
+ background-position: center center;
70
+ }
71
+
72
+ .Polaris-ActionList__Text {
73
+ @include layout-flex-fix;
74
+ flex: 1 0 auto;
75
+ }
@@ -0,0 +1,70 @@
1
+ $small-size: rem(32px);
2
+ $medium-size: rem(40px);
3
+ $large-size: rem(60px);
4
+
5
+ .Polaris-Avatar {
6
+ position: relative;
7
+ display: flex;
8
+ overflow: hidden;
9
+ justify-content: center;
10
+ align-items: center;
11
+ background: color(teal);
12
+ border-radius: 50%;
13
+ user-select: none;
14
+ }
15
+
16
+ .Polaris-Avatar--sizeSmall {
17
+ height: $small-size;
18
+ width: $small-size;
19
+ font-size: rem(14px);
20
+ }
21
+
22
+ .Polaris-Avatar--sizeMedium {
23
+ height: $medium-size;
24
+ width: $medium-size;
25
+ font-size: rem(18px);
26
+ }
27
+
28
+ .Polaris-Avatar--sizeLarge {
29
+ height: $large-size;
30
+ width: $large-size;
31
+ font-size: rem(26px);
32
+ }
33
+
34
+ .Polaris-Avatar--styleOne {
35
+ background: color(teal);
36
+ }
37
+
38
+ .Polaris-Avatar--styleTwo {
39
+ background: color(red);
40
+ }
41
+
42
+ .Polaris-Avatar--styleThree {
43
+ background: color(orange);
44
+ }
45
+
46
+ .Polaris-Avatar--styleFour {
47
+ background: color(green);
48
+ }
49
+
50
+ .Polaris-Avatar--styleFive {
51
+ background: color(blue);
52
+ }
53
+
54
+ .Polaris-Avatar--styleSix {
55
+ background: color(purple);
56
+ }
57
+
58
+ .Polaris-Avatar--hasImage {
59
+ background: transparent;
60
+ }
61
+
62
+ .Polaris-Avatar__Image {
63
+ width: 100%;
64
+ }
65
+
66
+ .Polaris-Avatar__Initials {
67
+ line-height: 0;
68
+ color: color(white);
69
+ text-transform: uppercase;
70
+ }
@@ -0,0 +1,68 @@
1
+ $height: rem(20px);
2
+ $horizontal-padding: ($height / 2);
3
+
4
+ $pip-size: rem(10px);
5
+ $pip-spacing: ($height - $pip-size) / 2;
6
+
7
+ @mixin pip-color($color) {
8
+ .Polaris-Badge__Pip {
9
+ color: $color;
10
+ }
11
+ }
12
+
13
+ .Polaris-Badge {
14
+ @include pip-color(color(ink, lightest));
15
+ display: inline-flex;
16
+ align-items: center;
17
+ padding: 0 $horizontal-padding;
18
+ background-color: color(sky);
19
+ border: 2px solid color(white);
20
+ border-radius: $height;
21
+ font-size: rem(13px);
22
+ line-height: $height;
23
+ color: color(ink, light);
24
+ }
25
+
26
+ .Polaris-Badge--statusSuccess {
27
+ @include pip-color(color(green, dark));
28
+ background-color: color(green, light);
29
+ color: color(green, text);
30
+ }
31
+
32
+ .Polaris-Badge--statusInfo {
33
+ @include pip-color(color(blue, dark));
34
+ background-color: color(blue, light);
35
+ color: color(blue, text);
36
+ }
37
+
38
+ .Polaris-Badge--statusAttention {
39
+ @include pip-color(color(yellow, dark));
40
+ background-color: color(yellow, light);
41
+ color: color(yellow, text);
42
+ }
43
+
44
+ .Polaris-Badge--statusWarning {
45
+ @include pip-color(color(orange, dark));
46
+ background-color: color(orange, light);
47
+ color: color(orange, text);
48
+ }
49
+
50
+ .Polaris-Badge--progressIncomplete .Polaris-Badge__Pip {
51
+ background: transparent;
52
+ }
53
+
54
+ .Polaris-Badge--progressPartiallyComplete .Polaris-Badge__Pip {
55
+ background: linear-gradient(to top, currentColor, currentColor 50%, transparent 50%, transparent);
56
+ }
57
+
58
+ .Polaris-Badge--progressComplete .Polaris-Badge__Pip {
59
+ background: currentColor;
60
+ }
61
+
62
+ .Polaris-Badge__Pip {
63
+ height: $pip-size;
64
+ width: $pip-size;
65
+ margin: 0 spacing(extra-tight) 0 ($pip-spacing - $horizontal-padding);
66
+ border: rem(2px) solid currentColor;
67
+ border-radius: 50%;
68
+ }
@@ -0,0 +1,140 @@
1
+ $accent-height: 3px;
2
+ $dismiss-size: rem(16px);
3
+ $ribbon-flex-basis: rem(32px);
4
+ $secondary-action-vertical-padding: 0.5 * (control-height() - line-height(body));
5
+ $secondary-action-horizontal-padding: 1.5 * spacing(tight);
6
+
7
+ @mixin banner-colors($highlight, $background) {
8
+ background-color: $background;
9
+ box-shadow:
10
+ inset 0 $accent-height 0 0 $highlight,
11
+ inset shadow(transparent),
12
+ shadow();
13
+
14
+ &:focus {
15
+ box-shadow:
16
+ inset 0 $accent-height 0 0 $highlight,
17
+ inset 0 0 0 $accent-height $highlight,
18
+ shadow();
19
+ }
20
+ }
21
+
22
+ .Polaris-Banner {
23
+ @include banner-colors(color(ink, lighter), color(sky, light));
24
+ position: relative;
25
+ display: flex;
26
+ padding: spacing();
27
+ border-radius: 0 0 border-radius() border-radius();
28
+ transition: box-shadow duration() easing();
29
+
30
+ + .Polaris-Banner {
31
+ margin-top: spacing(loose);
32
+ }
33
+
34
+ &:focus {
35
+ outline: none;
36
+ }
37
+ }
38
+
39
+ .Polaris-Banner--hasDismiss {
40
+ padding-right: $dismiss-size + (2 * spacing());
41
+ }
42
+
43
+ .Polaris-Banner--statusSuccess {
44
+ @include banner-colors(color(green), color(green, lighter));
45
+ }
46
+
47
+ .Polaris-Banner--statusInfo {
48
+ @include banner-colors(color(teal), color(teal, lighter));
49
+ }
50
+
51
+ .Polaris-Banner--statusWarning {
52
+ @include banner-colors(color(yellow), color(yellow, lighter));
53
+ }
54
+
55
+ .Polaris-Banner--statusCritical {
56
+ @include banner-colors(color(red), color(red, lighter));
57
+ }
58
+
59
+ .Polaris-Banner__Ribbon {
60
+ flex: 0 0 $ribbon-flex-basis;
61
+ margin-right: spacing();
62
+ }
63
+
64
+ .Polaris-Banner__Heading {
65
+ margin-top: spacing(extra-tight);
66
+ }
67
+
68
+ .Polaris-Banner__Actions {
69
+ margin-top: spacing();
70
+ }
71
+
72
+ .Polaris-Banner__Content {
73
+ margin: spacing(tight) 0;
74
+ }
75
+
76
+ // We need pretty high specificity to do the descendant selectors
77
+ // onto the text, which needs to be the relative positioned wrapper
78
+ // so that the borders/ backgrounds do not extend outside of it.
79
+ // stylelint-disable selector-max-specificity
80
+
81
+ .Polaris-Banner__SecondaryAction {
82
+ @include unstyled-button;
83
+ @include unstyled-link;
84
+ margin: (-1 * $secondary-action-vertical-padding) (-0.5 * $secondary-action-horizontal-padding);
85
+ padding: $secondary-action-vertical-padding $secondary-action-horizontal-padding;
86
+ color: color(ink);
87
+
88
+ &:hover > .Polaris-Banner__Text::after {
89
+ opacity: 0.75;
90
+ }
91
+
92
+ &:active > .Polaris-Banner__Text::after {
93
+ opacity: 0;
94
+ }
95
+
96
+ &:focus > .Polaris-Banner__Text {
97
+ &::before {
98
+ opacity: 1;
99
+ }
100
+
101
+ &::after {
102
+ opacity: 0;
103
+ }
104
+ }
105
+ }
106
+
107
+ // stylelint-enable selector-max-specificity
108
+
109
+ .Polaris-Banner__Text {
110
+ position: relative;
111
+
112
+ &::after,
113
+ &::before {
114
+ content: '';
115
+ position: absolute;
116
+ }
117
+
118
+ &::before {
119
+ @include plain-button-backdrop;
120
+ opacity: 0;
121
+ }
122
+
123
+ &::after {
124
+ bottom: 0;
125
+ left: 0;
126
+ right: 0;
127
+ display: block;
128
+ border: 1px solid currentColor;
129
+ opacity: 0.25;
130
+ will-change: opacity;
131
+ transition: opacity duration() easing();
132
+ }
133
+ }
134
+
135
+ .Polaris-Banner__Dismiss {
136
+ position: absolute;
137
+ top: $accent-height;
138
+ right: 0;
139
+ padding: (spacing(tight) * 1.5);
140
+ }
@@ -0,0 +1,45 @@
1
+ $vertical-padding: (control-height() - line-height(body)) / 2;
2
+ $horizontal-padding: rem(10px);
3
+ $icon-size: rem(20px);
4
+
5
+ // The inset bounding box of the icon causes it not to be lined up with
6
+ // the side of the container. This fixes that issue.
7
+ $icon-horizontal-adjustment: rem(-3px);
8
+
9
+ .Polaris-Breadcrumbs__Breadcrumb {
10
+ @include text-style-body;
11
+ @include text-emphasis-subdued;
12
+ display: inline-flex;
13
+ align-items: center;
14
+ min-height: control-height();
15
+ margin: 0 (-1 * $horizontal-padding);
16
+ padding: $vertical-padding $horizontal-padding;
17
+ border-radius: border-radius();
18
+ color: color(ink, lighter);
19
+ text-decoration: none;
20
+ will-change: background;
21
+ transition: background duration() easing();
22
+
23
+ &:hover,
24
+ &:active {
25
+ color: color(ink);
26
+
27
+ .Polaris-Breadcrumbs__Icon {
28
+ @include recolor-icon(color(ink));
29
+ }
30
+ }
31
+
32
+ &:focus {
33
+ background: plain-button-background();
34
+ outline: none;
35
+ }
36
+ }
37
+
38
+ .Polaris-Breadcrumbs__Icon {
39
+ @include recolor-icon(color(ink, lighter));
40
+ height: $icon-size;
41
+ width: $icon-size;
42
+
43
+ // We set negative top/ bottom margin so the icon never sets the height of the content.
44
+ margin: (-0.5 * $icon-size) spacing(extra-tight) (-0.5 * $icon-size) $icon-horizontal-adjustment;
45
+ }