@helsenorge/designsystem-react 10.6.0 → 10.6.2

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 (73) hide show
  1. package/CHANGELOG.md +852 -1402
  2. package/components/AnchorLink/styles.module.scss +9 -8
  3. package/components/Avatar/styles.module.scss +9 -9
  4. package/components/Badge/styles.module.scss +9 -9
  5. package/components/Button/styles.module.scss +59 -65
  6. package/components/Checkbox/styles.module.scss +103 -103
  7. package/components/Chip/styles.module.scss +22 -22
  8. package/components/Close/styles.module.scss +4 -4
  9. package/components/DictionaryTrigger/styles.module.scss +5 -5
  10. package/components/Drawer/styles.module.scss +16 -16
  11. package/components/Dropdown/styles.module.scss +51 -51
  12. package/components/Duolist/styles.module.scss +4 -5
  13. package/components/EmptyState/styles.module.scss +12 -12
  14. package/components/Expander/styles.module.scss +46 -46
  15. package/components/ExpanderHierarchy/expander.module.scss +29 -29
  16. package/components/ExpanderHierarchy/styles.module.scss +5 -4
  17. package/components/ExpanderList/styles.module.scss +30 -30
  18. package/components/EyebrowHeader/styles.module.scss +2 -0
  19. package/components/FormGroup/styles.module.scss +9 -9
  20. package/components/FormLayout/styles.module.scss +5 -4
  21. package/components/HelpBubble/styles.module.scss +13 -13
  22. package/components/HelpPanel/styles.module.scss +2 -2
  23. package/components/HelpQuestion/styles.module.scss +19 -19
  24. package/components/HighlightPanel/styles.module.scss +20 -20
  25. package/components/HorizontalScroll/styles.module.scss +3 -4
  26. package/components/Input/styles.module.scss +12 -12
  27. package/components/Label/styles.module.scss +15 -15
  28. package/components/LinkList/styles.module.scss +33 -33
  29. package/components/ListHeader/styles.module.scss +8 -8
  30. package/components/Loader/styles.module.scss +14 -14
  31. package/components/MaxCharacters/styles.module.scss +11 -11
  32. package/components/Modal/styles.module.scss +34 -34
  33. package/components/NotificationPanel/styles.module.scss +33 -33
  34. package/components/Panel/styles.module.scss +45 -45
  35. package/components/PanelList/styles.module.scss +5 -5
  36. package/components/PopMenu/styles.module.scss +15 -15
  37. package/components/PopOver/styles.module.scss +14 -13
  38. package/components/PopOver/styles.module.scss.d.ts +3 -0
  39. package/components/Progressbar/styles.module.scss +4 -4
  40. package/components/PromoPanel/styles.module.scss +22 -22
  41. package/components/RadioButton/styles.module.scss +99 -99
  42. package/components/Select/styles.module.scss +21 -21
  43. package/components/ServiceMessage/styles.module.scss +49 -49
  44. package/components/SharingStatus/styles.module.scss +13 -13
  45. package/components/Slider/styles.module.scss +24 -24
  46. package/components/Spacer/styles.module.scss +14 -14
  47. package/components/StatusDot/styles.module.scss +22 -22
  48. package/components/Step/styles.module.scss +3 -3
  49. package/components/StepButtons/styles.module.scss +9 -9
  50. package/components/Stepper/styles.module.scss +15 -23
  51. package/components/StickyNote/styles.module.scss +3 -3
  52. package/components/Table/styles.module.scss +32 -32
  53. package/components/Tabs/TabList/styles.module.scss +1 -1
  54. package/components/Tabs/TabPanel/styles.module.scss +5 -5
  55. package/components/Tabs/styles.module.scss +1 -1
  56. package/components/Tag/styles.module.scss +16 -16
  57. package/components/TagList/styles.module.scss +4 -4
  58. package/components/Textarea/styles.module.scss +9 -9
  59. package/components/Tile/styles.module.scss +25 -25
  60. package/components/Title/styles.module.scss +8 -8
  61. package/components/Toggle/styles.module.scss +14 -14
  62. package/components/Tooltip/TooltipWord/styles.module.scss +4 -4
  63. package/components/Trigger/styles.module.scss +21 -21
  64. package/components/Validation/styles.module.scss +10 -10
  65. package/package.json +1 -1
  66. package/scss/_body.scss +6 -5
  67. package/scss/_breakpoints.scss +2 -2
  68. package/scss/_font-mixins.scss +2 -2
  69. package/scss/_fonts.scss +2 -0
  70. package/scss/_input.scss +50 -53
  71. package/scss/_print.scss +2 -2
  72. package/scss/layout.module.scss +2 -2
  73. package/scss/typography.module.scss +43 -44
package/components/Input/styles.module.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
- @use '../../scss/input' as input;
5
- @use '../../scss/font-mixins' as fonts;
6
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/breakpoints';
4
+ @import '../../scss/palette';
5
+ @import '../../scss/input';
6
+ @import '../../scss/font-mixins';
7
7
 
8
8
  .input-wrapper {
9
- @include input.input-wrapper;
9
+ @include input-wrapper;
10
10
 
11
- margin: spacers.getSpacer(l) 0;
11
+ margin: getSpacer(l) 0;
12
12
  }
13
13
 
14
14
  .input-wrapper:first-of-type {
@@ -37,7 +37,7 @@
37
37
  padding: 0.5rem 0;
38
38
  align-items: center;
39
39
 
40
- @include input.input-container;
40
+ @include input-container;
41
41
 
42
42
  &--with-icon {
43
43
  padding: 1px 0;
@@ -48,13 +48,13 @@
48
48
  }
49
49
 
50
50
  &--with-icon#{&}--large {
51
- padding: spacers.getSpacer(2xs) 0;
51
+ padding: getSpacer(2xs) 0;
52
52
  }
53
53
 
54
54
  &__input {
55
- @include fonts.input-text;
55
+ @include input-text;
56
56
 
57
- height: spacers.getSpacer(m);
57
+ height: getSpacer(m);
58
58
 
59
59
  &--large {
60
60
  height: 2.5rem;
@@ -64,7 +64,7 @@
64
64
  height: 2.125rem;
65
65
 
66
66
  &--large {
67
- @include fonts.input-text-large;
67
+ @include input-text-large;
68
68
 
69
69
  height: 3.5rem;
70
70
  }
package/components/Label/styles.module.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
- @use '../../scss/font-settings' as font-settings;
5
- @use '../../scss/font-mixins' as fonts;
6
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/breakpoints';
4
+ @import '../../scss/palette';
5
+ @import '../../scss/font-settings';
6
+ @import '../../scss/font-mixins';
7
7
 
8
8
  .label-wrapper {
9
- margin-bottom: spacers.getSpacer(2xs);
10
- line-height: font-settings.$lineheight-size-xs;
9
+ margin-bottom: getSpacer(2xs);
10
+ line-height: $lineheight-size-xs;
11
11
 
12
12
  @media (min-width: map.get($grid-breakpoints, sm)) {
13
- line-height: font-settings.$lineheight-size-sm;
13
+ line-height: $lineheight-size-sm;
14
14
  }
15
15
 
16
16
  &--no-bottom-margin {
@@ -29,14 +29,14 @@
29
29
  }
30
30
 
31
31
  .label {
32
- @include fonts.label;
32
+ @include label;
33
33
 
34
34
  &--subdued {
35
- @include fonts.label-subdued;
35
+ @include label-subdued;
36
36
  }
37
37
 
38
38
  &--on-dark {
39
- color: palette.$white;
39
+ color: $white;
40
40
  }
41
41
 
42
42
  &::after {
@@ -49,14 +49,14 @@
49
49
  }
50
50
 
51
51
  .sublabel {
52
- @include fonts.sublabel;
52
+ @include sublabel;
53
53
 
54
54
  &--subdued {
55
- @include fonts.sublabel-subdued;
55
+ @include sublabel-subdued;
56
56
  }
57
57
 
58
58
  &--on-dark {
59
- color: palette.$white;
59
+ color: $white;
60
60
  }
61
61
 
62
62
  &::after {
@@ -65,5 +65,5 @@
65
65
  }
66
66
 
67
67
  .after-label-children {
68
- padding-left: spacers.getSpacer(xs);
68
+ padding-left: getSpacer(xs);
69
69
  }
package/components/LinkList/styles.module.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/font-settings' as font-settings;
4
- @use '../../scss/palette' as palette;
5
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/breakpoints';
4
+ @import '../../scss/font-settings';
5
+ @import '../../scss/palette';
6
6
  @import '../../scss/supernova/styles/colors';
7
7
 
8
8
  .link-list {
@@ -22,42 +22,42 @@
22
22
 
23
23
  &--outline {
24
24
  &--white {
25
- border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
26
- border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
27
- border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
25
+ border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
26
+ border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
27
+ border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
28
28
 
29
29
  &:last-of-type {
30
- border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
30
+ border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
31
31
  }
32
32
  }
33
33
 
34
34
  &--blueberry {
35
- border-top: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
36
- border-left: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
37
- border-right: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
35
+ border-top: getSpacer(2xs) var(--core-color-blueberry-100) solid;
36
+ border-left: getSpacer(2xs) var(--core-color-blueberry-100) solid;
37
+ border-right: getSpacer(2xs) var(--core-color-blueberry-100) solid;
38
38
 
39
39
  &:last-of-type {
40
- border-bottom: spacers.getSpacer(2xs) var(--core-color-blueberry-100) solid;
40
+ border-bottom: getSpacer(2xs) var(--core-color-blueberry-100) solid;
41
41
  }
42
42
  }
43
43
 
44
44
  &--cherry {
45
- border-top: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
46
- border-left: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
47
- border-right: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
45
+ border-top: getSpacer(2xs) var(--core-color-cherry-100) solid;
46
+ border-left: getSpacer(2xs) var(--core-color-cherry-100) solid;
47
+ border-right: getSpacer(2xs) var(--core-color-cherry-100) solid;
48
48
 
49
49
  &:last-of-type {
50
- border-bottom: spacers.getSpacer(2xs) var(--core-color-cherry-100) solid;
50
+ border-bottom: getSpacer(2xs) var(--core-color-cherry-100) solid;
51
51
  }
52
52
  }
53
53
 
54
54
  &--neutral {
55
- border-top: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
56
- border-left: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
57
- border-right: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
55
+ border-top: getSpacer(2xs) var(--core-color-neutral-100) solid;
56
+ border-left: getSpacer(2xs) var(--core-color-neutral-100) solid;
57
+ border-right: getSpacer(2xs) var(--core-color-neutral-100) solid;
58
58
 
59
59
  &:last-of-type {
60
- border-bottom: spacers.getSpacer(2xs) var(--core-color-neutral-100) solid;
60
+ border-bottom: getSpacer(2xs) var(--core-color-neutral-100) solid;
61
61
  }
62
62
  }
63
63
  }
@@ -100,7 +100,7 @@
100
100
 
101
101
  &--fill,
102
102
  &--fill-negative {
103
- margin-top: spacers.getSpacer(s);
103
+ margin-top: getSpacer(s);
104
104
  }
105
105
 
106
106
  &--fill-negative {
@@ -108,34 +108,34 @@
108
108
  }
109
109
 
110
110
  &--small {
111
- font-size: font-settings.$font-size-xs;
112
- line-height: font-settings.$lineheight-size-xs;
111
+ font-size: $font-size-xs;
112
+ line-height: $lineheight-size-xs;
113
113
  }
114
114
 
115
115
  &--medium {
116
- font-size: font-settings.$font-size-sm;
117
- line-height: font-settings.$lineheight-size-sm;
116
+ font-size: $font-size-sm;
117
+ line-height: $lineheight-size-sm;
118
118
  }
119
119
 
120
120
  &--large {
121
- font-size: font-settings.$font-size-md;
122
- line-height: font-settings.$lineheight-size-md;
121
+ font-size: $font-size-md;
122
+ line-height: $lineheight-size-md;
123
123
  }
124
124
 
125
125
  @media (min-width: map.get($grid-breakpoints, md)) {
126
126
  &--small {
127
- font-size: font-settings.$font-size-sm;
128
- line-height: font-settings.$lineheight-size-sm;
127
+ font-size: $font-size-sm;
128
+ line-height: $lineheight-size-sm;
129
129
  }
130
130
 
131
131
  &--medium {
132
- font-size: font-settings.$font-size-md;
133
- line-height: font-settings.$lineheight-size-md;
132
+ font-size: $font-size-md;
133
+ line-height: $lineheight-size-md;
134
134
  }
135
135
 
136
136
  &--large {
137
- font-size: font-settings.$font-size-lg;
138
- line-height: font-settings.$lineheight-size-lg;
137
+ font-size: $font-size-lg;
138
+ line-height: $lineheight-size-lg;
139
139
  }
140
140
  }
141
141
 
package/components/ListHeader/styles.module.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/breakpoints';
4
+ @import '../../scss/palette';
5
5
 
6
6
  .list-header {
7
7
  display: grid;
8
8
  grid-template:
9
9
  'icon text badge chevron' 4rem
10
10
  '. text . .' auto / min-content auto min-content min-content;
11
- column-gap: spacers.getSpacer(2xs);
12
- margin-left: spacers.getSpacer(2xs);
13
- margin-right: spacers.getSpacer(2xs);
11
+ column-gap: getSpacer(2xs);
12
+ margin-left: getSpacer(2xs);
13
+ margin-right: getSpacer(2xs);
14
14
  width: 100%;
15
15
  height: 100%;
16
16
  text-align: left;
@@ -38,12 +38,12 @@
38
38
  }
39
39
 
40
40
  &--spacing {
41
- margin-left: spacers.getSpacer(2xs);
41
+ margin-left: getSpacer(2xs);
42
42
  }
43
43
 
44
44
  :focus > &,
45
45
  :focus-visible > & {
46
- border-color: palette.$black;
46
+ border-color: $black;
47
47
  }
48
48
  }
49
49
 
package/components/Loader/styles.module.scss CHANGED
@@ -1,6 +1,6 @@
1
- @use '../../scss/spacers' as spacers;
2
- @use '../../scss/palette' as palette;
3
- @use '../../scss/screen-reader' as *;
1
+ @import '../../scss/spacers';
2
+ @import '../../scss/palette';
3
+ @import '../../scss/screen-reader';
4
4
 
5
5
  @mixin keyframes($name) {
6
6
  @keyframes #{$name} {
@@ -48,7 +48,7 @@
48
48
 
49
49
  &--inline {
50
50
  align-self: center;
51
- padding-left: spacers.getSpacer(2xs);
51
+ padding-left: getSpacer(2xs);
52
52
  }
53
53
 
54
54
  &--overlay {
@@ -58,7 +58,7 @@
58
58
  }
59
59
 
60
60
  &--overlay-screen {
61
- background: palette.$transparent-grey;
61
+ background: $transparent-grey;
62
62
  position: fixed;
63
63
  inset: 0;
64
64
  }
@@ -67,7 +67,7 @@
67
67
  position: absolute;
68
68
  top: 0;
69
69
  left: 0;
70
- background: palette.$transparent-grey;
70
+ background: $transparent-grey;
71
71
  height: 100%;
72
72
  width: 100%;
73
73
  }
@@ -102,7 +102,7 @@
102
102
  position: absolute;
103
103
  width: 8px;
104
104
  height: 8px;
105
- background-color: palette.$blueberry500;
105
+ background-color: $blueberry500;
106
106
  border-radius: 50%;
107
107
 
108
108
  // Sets a form of easing animation curve
@@ -124,31 +124,31 @@
124
124
  }
125
125
 
126
126
  &--banana {
127
- background-color: palette.$banana500;
127
+ background-color: $banana500;
128
128
  }
129
129
 
130
130
  &--cherry {
131
- background-color: palette.$cherry500;
131
+ background-color: $cherry500;
132
132
  }
133
133
 
134
134
  &--kiwi {
135
- background-color: palette.$kiwi500;
135
+ background-color: $kiwi500;
136
136
  }
137
137
 
138
138
  &--neutral {
139
- background-color: palette.$neutral500;
139
+ background-color: $neutral500;
140
140
  }
141
141
 
142
142
  &--plum {
143
- background-color: palette.$plum500;
143
+ background-color: $plum500;
144
144
  }
145
145
 
146
146
  &--black {
147
- background-color: palette.$black;
147
+ background-color: $black;
148
148
  }
149
149
 
150
150
  &--white {
151
- background-color: palette.$white;
151
+ background-color: $white;
152
152
  }
153
153
 
154
154
  // Scales up the first dot
package/components/MaxCharacters/styles.module.scss CHANGED
@@ -1,28 +1,28 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
- @use '../../scss/font-settings' as font-settings;
5
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/breakpoints';
4
+ @import '../../scss/palette';
5
+ @import '../../scss/font-settings';
6
6
 
7
7
  .max-characters {
8
8
  display: flex;
9
9
  justify-content: flex-end;
10
- padding-top: spacers.getSpacer(2xs);
10
+ padding-top: getSpacer(2xs);
11
11
  padding-right: 2px;
12
- font-size: font-settings.$font-size-sm;
13
- line-height: font-settings.$lineheight-size-sm;
12
+ font-size: $font-size-sm;
13
+ line-height: $lineheight-size-sm;
14
14
 
15
15
  @media (min-width: map.get($grid-breakpoints, md)) {
16
- line-height: font-settings.$lineheight-size-md;
17
- font-size: font-settings.$font-size-md;
16
+ line-height: $lineheight-size-md;
17
+ font-size: $font-size-md;
18
18
  }
19
19
 
20
20
  &--on-dark {
21
- color: palette.$white;
21
+ color: $white;
22
22
  }
23
23
 
24
24
  &--invalid {
25
- color: palette.$cherry600;
25
+ color: $cherry600;
26
26
  font-weight: 600;
27
27
  }
28
28
  }
package/components/Modal/styles.module.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  @use 'sass:map';
2
- @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
- @use '../../scss/font-settings' as font-settings;
5
- @use '../../scss/breakpoints' as *;
2
+ @import '../../scss/spacers';
3
+ @import '../../scss/palette';
4
+ @import '../../scss/breakpoints';
5
+ @import '../../scss/font-settings';
6
6
 
7
7
  .modal-overlay {
8
8
  background: rgb(51 51 51 / 75%);
@@ -32,26 +32,26 @@
32
32
  .modal {
33
33
  pointer-events: auto;
34
34
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
35
- background-color: palette.$white;
35
+ background-color: $white;
36
36
  animation: open 200ms 1;
37
37
  outline: none;
38
38
 
39
39
  &__title {
40
40
  &--error {
41
- color: palette.$cherry600;
41
+ color: $cherry600;
42
42
  }
43
43
 
44
44
  &--success {
45
- color: palette.$kiwi900;
45
+ color: $kiwi900;
46
46
  }
47
47
  }
48
48
 
49
49
  &__iconWrapper {
50
- padding-right: spacers.getSpacer(xs);
50
+ padding-right: getSpacer(xs);
51
51
  }
52
52
 
53
53
  &__afterTitleChildren {
54
- padding-left: spacers.getSpacer(xs);
54
+ padding-left: getSpacer(xs);
55
55
  }
56
56
 
57
57
  p {
@@ -59,24 +59,24 @@
59
59
  }
60
60
 
61
61
  &--normal {
62
- background-color: palette.$white;
62
+ background-color: $white;
63
63
  }
64
64
 
65
65
  &--error {
66
- background-color: palette.$cherry100;
66
+ background-color: $cherry100;
67
67
  }
68
68
 
69
69
  &--warning {
70
- background-color: palette.$banana50;
70
+ background-color: $banana50;
71
71
  }
72
72
 
73
73
  &--success {
74
- background-color: palette.$kiwi50;
74
+ background-color: $kiwi50;
75
75
  }
76
76
 
77
77
  &--large {
78
78
  width: calc(100vw - 0.75rem);
79
- padding-bottom: spacers.getSpacer(l);
79
+ padding-bottom: getSpacer(l);
80
80
 
81
81
  @media (max-width: map.get($grid-breakpoints, sm)) {
82
82
  p {
@@ -85,7 +85,7 @@
85
85
  }
86
86
 
87
87
  @media (min-width: map.get($grid-breakpoints, md)) {
88
- padding-bottom: spacers.getSpacer(xl);
88
+ padding-bottom: getSpacer(xl);
89
89
  width: 612px;
90
90
  }
91
91
 
@@ -94,13 +94,13 @@
94
94
  }
95
95
 
96
96
  @include tiny-screens-media-query {
97
- padding-bottom: spacers.getSpacer(2xs);
97
+ padding-bottom: getSpacer(2xs);
98
98
  }
99
99
  }
100
100
 
101
101
  &--medium {
102
102
  width: calc(100vw - 0.75rem);
103
- padding-bottom: spacers.getSpacer(m);
103
+ padding-bottom: getSpacer(m);
104
104
 
105
105
  @media (min-width: map.get($grid-breakpoints, md)) {
106
106
  width: 335px;
@@ -160,8 +160,8 @@
160
160
 
161
161
  &__close {
162
162
  position: absolute;
163
- right: spacers.getSpacer(3xs);
164
- top: spacers.getSpacer(3xs);
163
+ right: getSpacer(3xs);
164
+ top: getSpacer(3xs);
165
165
  }
166
166
  }
167
167
 
@@ -172,7 +172,7 @@
172
172
  overflow-x: hidden;
173
173
 
174
174
  &:focus-visible {
175
- outline: 1px solid palette.$black;
175
+ outline: 1px solid $black;
176
176
  outline-offset: -1px;
177
177
  }
178
178
 
@@ -191,30 +191,30 @@
191
191
 
192
192
  &__scroll {
193
193
  &--large {
194
- padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
194
+ padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
195
195
 
196
196
  @media (min-width: map.get($grid-breakpoints, md)) {
197
- padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
197
+ padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
198
198
  }
199
199
 
200
200
  @include tiny-screens-media-query {
201
- padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
201
+ padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
202
202
  }
203
203
  }
204
204
 
205
205
  &--medium {
206
- padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
206
+ padding: getSpacer(l) getSpacer(m) getSpacer(2xs);
207
207
 
208
208
  @media (min-width: map.get($grid-breakpoints, md)) {
209
- padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
209
+ padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
210
210
  }
211
211
 
212
212
  @include tiny-screens-media-query {
213
- padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
213
+ padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
214
214
  }
215
215
  }
216
216
  &--large#{&}--image {
217
- padding: spacers.getSpacer(xl) spacers.getSpacer(2xs) spacers.getSpacer(l);
217
+ padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
218
218
  }
219
219
  }
220
220
 
@@ -240,8 +240,8 @@
240
240
  }
241
241
 
242
242
  &__imageDescription {
243
- font-size: font-settings.$font-size-xs;
244
- padding-top: spacers.getSpacer(s);
243
+ font-size: $font-size-xs;
244
+ padding-top: getSpacer(s);
245
245
  display: block;
246
246
  }
247
247
  }
@@ -258,22 +258,22 @@
258
258
  }
259
259
 
260
260
  &--large {
261
- padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
261
+ padding: getSpacer(l) getSpacer(m) 0;
262
262
 
263
263
  @media (min-width: map.get($grid-breakpoints, md)) {
264
- padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
264
+ padding: getSpacer(l) getSpacer(xl) 0;
265
265
  }
266
266
 
267
267
  @include tiny-screens-media-query {
268
- padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
268
+ padding: getSpacer(2xs) getSpacer(2xs) 0;
269
269
  }
270
270
  }
271
271
 
272
272
  &--medium {
273
- padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
273
+ padding: getSpacer(m) getSpacer(m) 0;
274
274
 
275
275
  @include tiny-screens-media-query {
276
- padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
276
+ padding: getSpacer(2xs) getSpacer(2xs) 0;
277
277
  }
278
278
  }
279
279
  }