@lightspeed/design-system-css 1.2.0 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. package/README.md +2 -39
  2. package/dist/index.css +151 -80
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +151 -80
  5. package/package.json +1 -34
  6. package/src/images-ui/images-ui-ns.scss +1 -1
  7. package/src/vend-stylelint/use-colour-function.js +25 -22
  8. package/src/vend-styles/components/BarChart/BarChart.scss +9 -9
  9. package/src/vend-styles/components/CodeInput/CodeInput.scss +0 -1
  10. package/src/vend-styles/components/DatePicker/DatePicker.scss +3 -11
  11. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +1 -1
  12. package/src/vend-styles/components/LineChart/LineChart.scss +5 -4
  13. package/src/vend-styles/components/Modal/Modal.scss +25 -12
  14. package/src/vend-styles/components/Modal/_Modal-ns.scss +7 -2
  15. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
  16. package/src/vend-styles/components/TableList/TableList.scss +2 -1
  17. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +1 -6
  18. package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss +15 -7
  19. package/src/vend.ui/behaviours/vd-align/vd-align.scss +9 -3
  20. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +4 -3
  21. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +7 -7
  22. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  23. package/src/vend.ui/components/vd-badges/vd-badges.scss +1 -1
  24. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +7 -3
  25. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +5 -1
  26. package/src/vend.ui/components/vd-banner/vd-banner.scss +8 -4
  27. package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
  28. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +15 -15
  29. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +4 -3
  30. package/src/vend.ui/components/vd-btn/vd-btn.scss +11 -9
  31. package/src/vend.ui/components/vd-card/vd-card-ns.scss +0 -1
  32. package/src/vend.ui/components/vd-card/vd-card.scss +0 -4
  33. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -2
  34. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +33 -12
  35. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +2 -2
  36. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +16 -6
  37. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +3 -1
  38. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +13 -13
  39. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  40. package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss +1 -1
  41. package/src/vend.ui/components/vd-dott/vd-dott.scss +5 -4
  42. package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss +1 -1
  43. package/src/vend.ui/components/vd-flag/vd-flag.scss +1 -2
  44. package/src/vend.ui/components/vd-flex/vd-flex.scss +39 -13
  45. package/src/vend.ui/components/vd-hero/vd-hero-ns.scss +2 -2
  46. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +0 -2
  47. package/src/vend.ui/components/vd-input/vd-input-ns.scss +19 -12
  48. package/src/vend.ui/components/vd-input/vd-input.scss +12 -4
  49. package/src/vend.ui/components/vd-link/vd-link.scss +12 -4
  50. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  51. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +22 -7
  52. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  53. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +1 -1
  54. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  55. package/src/vend.ui/components/vd-p/vd-p.scss +3 -1
  56. package/src/vend.ui/components/vd-popover/vd-popover.scss +3 -1
  57. package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss +3 -1
  58. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +1 -2
  59. package/src/vend.ui/components/vd-promo/vd-promo-ns.scss +1 -1
  60. package/src/vend.ui/components/vd-promo/vd-promo.scss +0 -1
  61. package/src/vend.ui/components/vd-radio/vd-radio.scss +30 -10
  62. package/src/vend.ui/components/vd-section/vd-section.scss +26 -11
  63. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +3 -1
  64. package/src/vend.ui/components/vd-select/vd-select-group.scss +11 -5
  65. package/src/vend.ui/components/vd-select/vd-select-inline.scss +2 -1
  66. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  67. package/src/vend.ui/components/vd-settings/vd-settings.scss +1 -1
  68. package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss +5 -2
  69. package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss +2 -5
  70. package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss +5 -2
  71. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list-ns.scss +2 -2
  72. package/src/vend.ui/components/vd-table/vd-table.scss +102 -33
  73. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -2
  74. package/src/vend.ui/components/vd-text/vd-text.scss +13 -5
  75. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +2 -1
  76. package/src/vend.ui/components/vd-visibility/vd-visibility.scss +9 -3
  77. package/src/vend.ui/styles/global/_base-mixins.scss +1 -2
  78. package/src/vend.ui/styles/global/_grid.scss +5 -5
  79. package/src/vend.ui/styles/global/_layout.scss +2 -2
  80. package/src/vend.ui/styles/global/_normalise.scss +8 -1
  81. package/src/vend.ui/styles/global/_z-index.scss +0 -8
  82. package/src/vend.ui/styles/global/colour/_base.scss +8 -13
  83. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -10
  84. package/src/vend.ui/styles/global/colour/_colour.scss +3 -3
  85. package/src/vend.ui/styles/global/effects/_effects-ns.scss +4 -4
  86. package/src/vend.ui/styles/global/effects/_effects.scss +19 -9
  87. package/src/vend.ui/styles/global/spacing/_spacing-functions.scss +2 -2
  88. package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss +2 -6
  89. package/src/vend.ui/styles/global/text/_base.scss +1 -1
  90. package/src/vend.ui/styles/global/text/_text-definitions.scss +13 -13
  91. package/src/vend.ui/styles/global/text/_text-mixins.scss +15 -23
  92. package/src/vend.ui/styles/global/text/_text.scss +2 -2
  93. package/src/vend.ui/styles/global/utils/_functions.scss +2 -2
  94. package/src/vend.ui/styles/global/viewport/_viewport-data.scss +30 -30
  95. package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss +1 -1
  96. package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss +16 -16
  97. package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss +9 -9
  98. package/src/vend.ui/styles/navi/_nv-topnav-title.scss +1 -1
  99. package/src/vend.ui/styles/navi/_nv-topnav.scss +4 -4
  100. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +2 -2
  101. package/src/vend.ui/styles/navi/navi.scss +8 -8
  102. package/src/vend.ui/styles/navi/non-styles/_mixins.scss +6 -4
  103. package/CHANGELOG.md +0 -192
@@ -1,7 +1,7 @@
1
1
  // Base mixins.
2
2
 
3
3
  // Reset container defaults
4
- @mixin vd-reset () {
4
+ @mixin vd-reset() {
5
5
  @include font-smoothing;
6
6
 
7
7
  font-family: $vd-font-lato;
@@ -9,4 +9,3 @@
9
9
  line-height: normal;
10
10
  color: vd-colour(text);
11
11
  }
12
-
@@ -1,7 +1,7 @@
1
1
  // =================================== Responsive Grid =================================== //
2
2
 
3
3
  // Grid Settings
4
- @use "sass:math";
4
+ @use 'sass:math';
5
5
 
6
6
  $vd-grid-columns: 12 !default;
7
7
  $vd-grid-block-max: 8 !default;
@@ -15,7 +15,7 @@ $vd-grid-row-gutter-large: 24px;
15
15
  //
16
16
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
17
17
  //
18
- @mixin vd-grid-columns ($breakpoint) {
18
+ @mixin vd-grid-columns($breakpoint) {
19
19
  @for $i from 1 through $vd-grid-columns {
20
20
  $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
21
21
 
@@ -33,7 +33,7 @@ $vd-grid-row-gutter-large: 24px;
33
33
  //
34
34
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
35
35
  //
36
- @mixin vd-grid-block-columns ($breakpoint) {
36
+ @mixin vd-grid-block-columns($breakpoint) {
37
37
  @for $i from 1 through $vd-grid-block-max {
38
38
  .vd-g-#{$breakpoint}-up-#{$i} {
39
39
  flex-wrap: wrap;
@@ -54,7 +54,7 @@ $vd-grid-row-gutter-large: 24px;
54
54
  //
55
55
  // @param {String} $breakpoint - the breakpoint size to attach to the column.
56
56
  //
57
- @mixin vd-build-grid-columns ($breakpoint) {
57
+ @mixin vd-build-grid-columns($breakpoint) {
58
58
  @include vd-grid-columns($breakpoint);
59
59
  @include vd-grid-block-columns($breakpoint);
60
60
  }
@@ -63,7 +63,7 @@ $vd-grid-row-gutter-large: 24px;
63
63
  //
64
64
  // @mixin vd-build-grid.
65
65
  //
66
- @mixin vd-build-grid () {
66
+ @mixin vd-build-grid() {
67
67
  .vd-g-row {
68
68
  max-width: $vd-section-wrap-max-width;
69
69
  margin-left: auto;
@@ -1,10 +1,10 @@
1
1
  // Layout Spacing; @todo this should be renamed - it has nothing to do with the grid.
2
2
  $vd-grid-unit: 4px;
3
3
 
4
- @function vd-grid-unit ($times:1) {
4
+ @function vd-grid-unit($times: 1) {
5
5
  @return $vd-grid-unit * $times;
6
6
  }
7
7
 
8
- @function vd-grid-gutter ($times:1) {
8
+ @function vd-grid-gutter($times: 1) {
9
9
  @return vd-grid-unit(4) * $times;
10
10
  }
@@ -11,6 +11,13 @@ a:link {
11
11
  }
12
12
 
13
13
  // Enables fast-tap optimisation in iOS Safari when page is zoomed
14
- a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
14
+ a,
15
+ button,
16
+ input,
17
+ textarea,
18
+ select,
19
+ details,
20
+ [ng-click],
21
+ .vd-fast-tap {
15
22
  touch-action: manipulation;
16
23
  }
@@ -3,15 +3,11 @@
3
3
  // Any content with an explicit position
4
4
  $vd-z-index-content-base: 100 !default;
5
5
 
6
-
7
-
8
6
  // =================================== [200] Navigation ===================================================== //
9
7
 
10
8
  // Top navigation, side navigation and level 2 actions (fixed action bars)
11
9
  $vd-z-index-navigation-base: $vd-z-index-content-base * 2 !default;
12
10
 
13
-
14
-
15
11
  // =================================== [300] Popovers ======================================================= //
16
12
 
17
13
  // Search results, drop downs, selects, tooltips, date pickers, etc
@@ -19,8 +15,6 @@ $vd-z-index-popover-base: $vd-z-index-content-base * 3 !default;
19
15
 
20
16
  $vd-popover-z-index: $vd-z-index-popover-base !default;
21
17
 
22
-
23
-
24
18
  // =================================== [400] Modals ========================================================= //
25
19
 
26
20
  // Splashes, dialogs, etc
@@ -30,8 +24,6 @@ $vd-modals-z-index: $vd-z-index-modal-base + 10 !default; // 410
30
24
 
31
25
  $vd-popover-inside-modal-z-index: $vd-modals-z-index + 10 !default; // 420
32
26
 
33
-
34
-
35
27
  // =================================== [500] Toasts ========================================================= //
36
28
 
37
29
  // Toast notifications etc
@@ -75,15 +75,6 @@ $vd-colour-charcoal-110: #242e34;
75
75
  $vd-colour-black: #000;
76
76
  $vd-colour-white: #fff;
77
77
 
78
- // @Depreacted use the theme based swatches instead
79
- $vd-colour-golden-sand: #f2c17b;
80
- $vd-colour-gothic: #678e98;
81
- $vd-colour-lavender-purple: #aa88b5;
82
- $vd-colour-new-york-pink: #d77173;
83
- $vd-colour-shuttle-gray: #62676f;
84
- $vd-colour-sinbad: #99c8d4;
85
- $vd-colour-tacao: #f49b8c;
86
-
87
78
  // Navigation
88
79
  $vd-nav-item-colours: (
89
80
  // Old nav colours; @todo once all apps are on a version of vend.ui which include the new nav colours, navago should
@@ -94,11 +85,15 @@ $vd-nav-item-colours: (
94
85
  shakespeare: #56bad6,
95
86
 
96
87
  // New nav colours (these actually match those used by Design)
97
- downy: #70b8d3, // Should replace `shakespeare`
98
- fern: #65b479, // Should replace `ocean-green`
88
+ downy: #70b8d3,
89
+ // Should replace `shakespeare`
90
+ fern: #65b479,
91
+ // Should replace `ocean-green`
99
92
  fiord: #4b576e,
100
- rob-roy: #ebc381, // Should replace `rajah`
101
- terracotta: #e57d66, // Should replace `carnation`
93
+ rob-roy: #ebc381,
94
+ // Should replace `rajah`
95
+ terracotta: #e57d66,
96
+ // Should replace `carnation`
102
97
  wistera: #965fb0
103
98
  );
104
99
 
@@ -28,11 +28,7 @@
28
28
  /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
29
29
  /// @return {Colour<String>} - The highlighted colour
30
30
  @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
31
- @return mix(
32
- vd-colour($_vd-primary-element),
33
- vd-colour($_vd-secondary-element),
34
- 10
35
- );
31
+ @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
36
32
  }
37
33
 
38
34
  /// Generating a solid border for permitted border types (currently either keyline or framing)
@@ -41,11 +37,7 @@
41
37
  /// @param {String} $_vd-border-type - The border type, either keyline or framing
42
38
  /// @param {Unit} [$_vd-border-width=1px] - The width of the border
43
39
  /// @param {String} [$_vd-border-style=solid] - The style of the border
44
- @function vd-border(
45
- $_vd-border-type,
46
- $_vd-border-width: 1px,
47
- $_vd-border-style: solid
48
- ) {
40
+ @function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
49
41
  @if (null != index($vd-border-types, $_vd-border-type)) {
50
42
  @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
51
43
  } @else {
@@ -1,5 +1,5 @@
1
- @import "colour-functions";
1
+ @import 'colour-functions';
2
2
 
3
3
  // @todo Remove these imports once theme functions and mixins have been introduced
4
- @import "base";
5
- @import "./themes/colour-themes";
4
+ @import 'base';
5
+ @import './themes/colour-themes';
@@ -1,13 +1,13 @@
1
- $vd-time-s: .2s !default;
2
- $vd-time-m: .5s !default;
3
- $vd-time-l: .8s !default;
1
+ $vd-time-s: 0.2s !default;
2
+ $vd-time-m: 0.5s !default;
3
+ $vd-time-l: 0.8s !default;
4
4
  $vd-time-xl: 1s !default;
5
5
 
6
6
  @mixin vd-slow-rotate {
7
7
  animation: vd-rotate $vd-time-xl ease-in-out infinite;
8
8
  }
9
9
 
10
- @mixin vd-fade-in ($time: $vd-time-m) {
10
+ @mixin vd-fade-in($time: $vd-time-m) {
11
11
  animation: vd-fade-in $time ease-in-out;
12
12
  animation-fill-mode: forwards;
13
13
  }
@@ -5,30 +5,40 @@
5
5
  }
6
6
 
7
7
  @keyframes vd-fade-in {
8
- 0% { opacity: 0; }
9
- 100% { opacity: 1; }
8
+ 0% {
9
+ opacity: 0;
10
+ }
11
+ 100% {
12
+ opacity: 1;
13
+ }
10
14
  }
11
15
 
12
16
  @keyframes vd-flash {
13
- 0% {opacity: 0;}
14
- 30%, 70% {opacity: 1;}
15
- 100% {opacity: 0;}
17
+ 0% {
18
+ opacity: 0;
19
+ }
20
+ 30%,
21
+ 70% {
22
+ opacity: 1;
23
+ }
24
+ 100% {
25
+ opacity: 0;
26
+ }
16
27
  }
17
28
 
18
29
  .vd-fade-out {
19
30
  animation-duration: 1.5s;
20
31
  animation-name: vd-flash;
21
- animation-fill-mode:forwards;
32
+ animation-fill-mode: forwards;
22
33
  }
23
34
 
24
35
  @keyframes vd-blink-highlight {
25
- 20%,
36
+ 20%,
26
37
  70% {
27
- background-color: vd-colour(go-highlight);
38
+ background-color: vd-colour(go-highlight);
28
39
  }
29
40
  }
30
41
 
31
-
32
42
  @keyframes vd-shake {
33
43
  10%,
34
44
  90% {
@@ -3,9 +3,9 @@
3
3
  /// @function vd-spacer
4
4
  /// @param {Number} $_vd-multiplier - The number of times to multiply the spacing unit.
5
5
  /// @return {Unit<px>} - The calculated spacing value.
6
- @function vd-spacer ($_vd-multiplier:1) {
6
+ @function vd-spacer($_vd-multiplier: 1) {
7
7
  @if ($_vd-multiplier > $vd-spacing-max-multiplier) {
8
- @error('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
8
+ @error ('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
9
9
  } @else {
10
10
  @return $vd-spacing-unit * $_vd-multiplier;
11
11
  }
@@ -6,15 +6,11 @@
6
6
  $_vd-spacing_value: $i * $vd-spacing-unit;
7
7
 
8
8
  @if $_vd-position_value == a {
9
- .vd-#{nth($_vd-spacing_type, 1)
10
- + nth($_vd-position_value, 1)
11
- + $i} {
9
+ .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
12
10
  #{nth($_vd-spacing_type, 2)}: $_vd-spacing_value !important;
13
11
  }
14
12
  } @else {
15
- .vd-#{nth($_vd-spacing_type, 1)
16
- + nth($_vd-position_value, 1)
17
- + $i} {
13
+ .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
18
14
  #{nth($_vd-spacing_type, 2)}-#{nth($_vd-position_value, 2)}: $_vd-spacing_value !important;
19
15
  }
20
16
  }
@@ -2,5 +2,5 @@ $vd-font-weight--regular: 400;
2
2
  $vd-font-weight--bold: 700;
3
3
  $vd-font-weight--ultra-bold: 900;
4
4
 
5
- $vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; // stylelint-disable-line value-keyword-case
5
+ $vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; // stylelint-disable-line value-keyword-case
6
6
  $vd-font-primary: $vd-font-lato !default;
@@ -2,64 +2,64 @@ $_vd-text-definitions: (
2
2
  grand: (
3
3
  size: 48,
4
4
  leading: 56,
5
- font-weight: 700
5
+ font-weight: 700,
6
6
  ),
7
7
  hero: (
8
8
  size: 32,
9
9
  leading: 48,
10
- font-weight: 700
10
+ font-weight: 700,
11
11
  ),
12
12
  heading: (
13
13
  size: 24,
14
14
  leading: 32,
15
- font-weight: 700
15
+ font-weight: 700,
16
16
  ),
17
17
  sub-heading: (
18
18
  size: 18,
19
19
  leading: 24,
20
- font-weight: 700
20
+ font-weight: 700,
21
21
  ),
22
22
  intro: (
23
23
  size: 18,
24
24
  leading: 24,
25
- font-weight: 400
25
+ font-weight: 400,
26
26
  ),
27
27
  signpost: (
28
28
  size: 15,
29
29
  leading: 20,
30
30
  font-weight: 900,
31
31
  tracking: 1.5,
32
- casing: uppercase
32
+ casing: uppercase,
33
33
  ),
34
34
  label: (
35
35
  size: 15,
36
36
  leading: 20,
37
- font-weight: 700
37
+ font-weight: 700,
38
38
  ),
39
39
  body: (
40
40
  size: 15,
41
41
  leading: 20,
42
- font-weight: 400
42
+ font-weight: 400,
43
43
  ),
44
44
  supplementary: (
45
45
  size: 12,
46
46
  leading: 15,
47
- font-weight: 400
47
+ font-weight: 400,
48
48
  ),
49
49
  mini-signpost: (
50
50
  size: 10,
51
51
  leading: 12,
52
52
  font-weight: 900,
53
- casing: uppercase
53
+ casing: uppercase,
54
54
  ),
55
55
  mini-copy: (
56
56
  size: 10,
57
57
  leading: 12,
58
- font-weight: 400
58
+ font-weight: 400,
59
59
  ),
60
60
  button: (
61
61
  size: 15,
62
62
  leading: 18,
63
- font-weight: 700
64
- )
63
+ font-weight: 700,
64
+ ),
65
65
  );
@@ -1,6 +1,6 @@
1
- @use "sass:math";
1
+ @use 'sass:math';
2
2
 
3
- @import "text-definitions";
3
+ @import 'text-definitions';
4
4
 
5
5
  @mixin font-smoothing {
6
6
  font-synthesis: none;
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  // Heading Reset - Ensure correct styling continue for H<1..6>'s
13
- @mixin vd-heading-reset ($color: vd-colour(text)) {
13
+ @mixin vd-heading-reset($color: vd-colour(text)) {
14
14
  word-break: break-word;
15
15
  font-weight: $vd-font-weight--bold;
16
16
  margin: 0;
@@ -19,12 +19,12 @@
19
19
 
20
20
  // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
21
21
  // required font size.
22
- @mixin vd-line-height ($leading, $font-size) {
23
- line-height: math.div($leading, $font-size)
22
+ @mixin vd-line-height($leading, $font-size) {
23
+ line-height: math.div($leading, $font-size);
24
24
  }
25
25
 
26
26
  // Intro
27
- @mixin vd-text-intro () {
27
+ @mixin vd-text-intro() {
28
28
  @include vd-text(intro);
29
29
  }
30
30
 
@@ -43,7 +43,7 @@
43
43
  ///
44
44
  /// @mixin vd-text-clamp
45
45
  ///
46
- @mixin vd-text-clamp ($lines: 2) {
46
+ @mixin vd-text-clamp($lines: 2) {
47
47
  // Autoprefixer removes out-of-date vendor prefixes
48
48
  // These old prefixes below are required for line clamping to work.
49
49
  // Use autoprefixer control comments so these rules are ignored
@@ -63,7 +63,7 @@
63
63
  ///
64
64
  /// @param {String} $name - The required text; e.g. grand, heading, body
65
65
  ///
66
- @mixin vd-text ($name, $color: text) {
66
+ @mixin vd-text($name, $color: text) {
67
67
  @if (map-has-key($_vd-text-definitions, $name)) {
68
68
  $_vd-requested-type-styles: map-get($_vd-text-definitions, $name);
69
69
  $_size: map-get($_vd-requested-type-styles, 'size');
@@ -77,21 +77,13 @@
77
77
  @each $property, $value in $_vd-requested-type-styles {
78
78
  @if ($property == 'leading') {
79
79
  @include vd-line-height($value, $_size);
80
- }
81
-
82
- @else if ($property == 'casing') {
80
+ } @else if ($property == 'casing') {
83
81
  text-transform: $value;
84
- }
85
-
86
- @else if ($property == 'tracking') {
82
+ } @else if ($property == 'tracking') {
87
83
  letter-spacing: $value * 0.1 * 1em;
88
- }
89
-
90
- @else if ($property == 'size') {
84
+ } @else if ($property == 'size') {
91
85
  font-size: $value * 1px;
92
- }
93
-
94
- @else {
86
+ } @else {
95
87
  #{$property}: $value;
96
88
  }
97
89
  }
@@ -117,9 +109,9 @@
117
109
  /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
118
110
  /// @return {Number} - The font size of the requested requested text definition.
119
111
  ///
120
- @function vd-text-size ($_vd-text-name) {
112
+ @function vd-text-size($_vd-text-name) {
121
113
  @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
122
- @return map-deep-get($_vd-text-definitions, $_vd-text-name,size) * 1px;
114
+ @return map-deep-get($_vd-text-definitions, $_vd-text-name, size) * 1px;
123
115
  } @else {
124
116
  @error "[text-functions] The specified text definition (#{$_vd-text-name}) does not exist.";
125
117
  @return null;
@@ -133,7 +125,7 @@
133
125
  /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
134
126
  /// @return {Number} - The font weight of the requested text definition.
135
127
  ///
136
- @function vd-text-weight ($_vd-text-name) {
128
+ @function vd-text-weight($_vd-text-name) {
137
129
  @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
138
130
  @return map-deep-get($_vd-text-definitions, $_vd-text-name, font-weight);
139
131
  } @else {
@@ -1,3 +1,3 @@
1
1
  // Text Module Non-styles
2
- @import "base";
3
- @import "text-mixins";
2
+ @import 'base';
3
+ @import 'text-mixins';
@@ -3,9 +3,9 @@
3
3
  /// @function vd-px-unit
4
4
  /// @param {Number} $_value - Number to add 'px'
5
5
  /// @return {Number} - Number with px unit
6
- @use "sass:math";
6
+ @use 'sass:math';
7
7
 
8
- @function vd-px-unit ($_value) {
8
+ @function vd-px-unit($_value) {
9
9
  @return $_value * 1px;
10
10
  }
11
11
 
@@ -1,37 +1,37 @@
1
1
  $vd-viewport: (
2
- "identifier": (
3
- "id": "vd-viewport-identifier",
4
- "pseudoElement": "before",
5
- "IEContentProp": "vd-content"
2
+ 'identifier': (
3
+ 'id': 'vd-viewport-identifier',
4
+ 'pseudoElement': 'before',
5
+ 'IEContentProp': 'vd-content',
6
6
  ),
7
- "ranges": (
8
- "xsmall": (
9
- "range": (
10
- "max": 480
11
- )
7
+ 'ranges': (
8
+ 'xsmall': (
9
+ 'range': (
10
+ 'max': 480,
11
+ ),
12
12
  ),
13
- "small": (
14
- "range": (
15
- "min": 481,
16
- "max": 768
17
- )
13
+ 'small': (
14
+ 'range': (
15
+ 'min': 481,
16
+ 'max': 768,
17
+ ),
18
18
  ),
19
- "medium": (
20
- "range": (
21
- "min": 769,
22
- "max": 1000
23
- )
19
+ 'medium': (
20
+ 'range': (
21
+ 'min': 769,
22
+ 'max': 1000,
23
+ ),
24
24
  ),
25
- "large": (
26
- "range": (
27
- "min": 1001,
28
- "max": 1200
29
- )
25
+ 'large': (
26
+ 'range': (
27
+ 'min': 1001,
28
+ 'max': 1200,
29
+ ),
30
30
  ),
31
- "xlarge": (
32
- "range": (
33
- "min": 1201
34
- )
35
- )
36
- )
31
+ 'xlarge': (
32
+ 'range': (
33
+ 'min': 1201,
34
+ ),
35
+ ),
36
+ ),
37
37
  );
@@ -24,7 +24,7 @@
24
24
  @each $_vd-viewport in map-keys($vd-viewport-ranges-map) {
25
25
  $_vd-viewport-content: quote($_vd-viewport);
26
26
 
27
- @include vd-viewport-media-only ($_vd-viewport) {
27
+ @include vd-viewport-media-only($_vd-viewport) {
28
28
  &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
29
29
  content: $_vd-viewport-content;
30
30
  }