luna-one 3.1.430 → 3.1.433

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 (168) hide show
  1. package/README.md +2315 -2315
  2. package/dist/application/assets/images/carat-down.svg +3 -3
  3. package/dist/application/assets/images/carat-up.svg +3 -3
  4. package/dist/application/assets/images/close-blue.svg +4 -4
  5. package/dist/application/assets/images/close.svg +3 -3
  6. package/dist/application/assets/images/ellipses.svg +6 -6
  7. package/dist/application/assets/images/facebook.svg +13 -13
  8. package/dist/application/assets/images/instagram.svg +19 -19
  9. package/dist/application/assets/images/linkedin.svg +15 -15
  10. package/dist/application/assets/images/twitter.svg +17 -17
  11. package/dist/application/assets/images/youtube.svg +14 -14
  12. package/dist/application/components/Loading/Loading.scss +10 -10
  13. package/dist/global-styles/content/typography.scss +140 -140
  14. package/dist/global-styles/fonts/benton.scss +5 -5
  15. package/dist/global-styles/global-terra.scss +10 -10
  16. package/dist/global-styles/global-vars.scss +600 -600
  17. package/dist/global-styles/layout/_css-grid.scss +20 -20
  18. package/dist/global-styles/layout/_media-queries.scss +35 -35
  19. package/dist/global-styles/layout/_normalize.scss +340 -340
  20. package/dist/global-styles/layout/_reset.scss +13 -13
  21. package/dist/global-styles/mixins/_box-shadow.scss +6 -6
  22. package/dist/global-styles/mixins/_mixins.scss +5 -5
  23. package/dist/global-styles/mixins/_organism-padding-hack.scss +7 -7
  24. package/dist/global-styles/mixins/_typography.scss +110 -110
  25. package/dist/global-styles/mixins/_yiq.scss +50 -50
  26. package/dist/global-styles/mixins/_z-index.scss +3 -3
  27. package/dist/global-styles/terra.scss +15 -15
  28. package/dist/global-styles/utilities/_box-shadow.scss +8 -8
  29. package/dist/global-styles/utilities/_display.scss +48 -48
  30. package/dist/global-styles/utilities/_font-family.scss +15 -15
  31. package/dist/global-styles/utilities/_parallax.scss +23 -23
  32. package/dist/global-styles/utilities/_text-align.scss +24 -24
  33. package/dist/luna/components/2x2/2x2.scss +776 -776
  34. package/dist/luna/components/AdminCategoryData/AdminCategoryData.scss +81 -81
  35. package/dist/luna/components/AdminProductData/AdminProductData.scss +75 -75
  36. package/dist/luna/components/BlockListItems/AppCards.js +1 -1
  37. package/dist/luna/components/BlockListItems/BlockListItems.scss +236 -236
  38. package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
  39. package/dist/luna/components/CTAButtons/CTAButtons.scss +19 -19
  40. package/dist/luna/components/ComparisonTable/ComparisonTable.scss +354 -354
  41. package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +279 -279
  42. package/dist/luna/components/DataPoint/DataPoint.scss +160 -160
  43. package/dist/luna/components/EventCard/EventCard.scss +134 -134
  44. package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss +26 -26
  45. package/dist/luna/components/Header/Header.scss +34 -34
  46. package/dist/luna/components/ImageGallery/ImageGallery.scss +438 -438
  47. package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss +124 -124
  48. package/dist/luna/components/JobPosting/JobPosting.scss +171 -171
  49. package/dist/luna/components/LinkList/LinkList.scss +44 -44
  50. package/dist/luna/components/Login/Login.scss +180 -180
  51. package/dist/luna/components/MegaMenu/MegaMenu.scss +570 -570
  52. package/dist/luna/components/MiniFeatDropdown/MiniFeatDropdown.scss +107 -107
  53. package/dist/luna/components/MobileLogin/MobileLogin.scss +38 -38
  54. package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +272 -272
  55. package/dist/luna/components/MobileMenu/MobileMenu.scss +70 -70
  56. package/dist/luna/components/MobileNav/MobileNav.scss +283 -283
  57. package/dist/luna/components/NavBarTop/NavBarTop.scss +408 -408
  58. package/dist/luna/components/NavSearch/NavSearch.scss +129 -129
  59. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntries.scss +338 -338
  60. package/dist/luna/components/OverlayNotice/OverlayNotice.scss +248 -248
  61. package/dist/luna/components/Pagination/Pagination.scss +27 -27
  62. package/dist/luna/components/ProductSummary/ProductSummary.scss +266 -266
  63. package/dist/luna/components/ProseLayout/ProseLayout.scss +384 -384
  64. package/dist/luna/components/RegionCard/RegionCard.scss +86 -86
  65. package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +219 -219
  66. package/dist/luna/components/SketchUpPricingCard/SketchUpPricingCard.scss +142 -142
  67. package/dist/luna/components/SlideOutFeat/SlideOutFeat.scss +124 -124
  68. package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
  69. package/dist/luna/components/SupportCard/SupportCard.scss +134 -134
  70. package/dist/luna/components/Tabs/Tabs.scss +747 -747
  71. package/dist/luna/components/TimeBasedList/TimeBasedList.scss +394 -394
  72. package/dist/luna/components/TrainerCard/TrainerCard.scss +51 -51
  73. package/dist/luna/components/UnboundedCard/UnboundedCard.scss +101 -101
  74. package/dist/luna/components/UnboundedCard/playIcon.svg +17 -17
  75. package/dist/luna/components/VariableContentCard/VariableContentCard.scss +253 -253
  76. package/dist/luna/components/Video/Video.scss +207 -207
  77. package/dist/luna/components/VidyardModal/VidyardModal.scss +32 -32
  78. package/dist/luna/featurettes/Accordion/Accordion.scss +137 -137
  79. package/dist/luna/featurettes/CustomFeat/CustomFeat.scss +17 -17
  80. package/dist/luna/featurettes/Feat1/Feat1.scss +110 -110
  81. package/dist/luna/featurettes/Feat2A/Feat2A.scss +132 -132
  82. package/dist/luna/featurettes/Feat2B/Feat2B.scss +231 -231
  83. package/dist/luna/featurettes/Feat3/Feat3.scss +49 -49
  84. package/dist/luna/featurettes/Feat4/Feat4.scss +86 -86
  85. package/dist/luna/featurettes/Feat5/Feat5.scss +235 -235
  86. package/dist/luna/featurettes/Feat7/Feat7.scss +49 -49
  87. package/dist/luna/featurettes/Feat8/Feat8.scss +103 -103
  88. package/dist/luna/featurettes/IconTextList/IconTextList.scss +118 -118
  89. package/dist/luna/featurettes/ProductsPackage/ProductsPackage.scss +187 -187
  90. package/dist/luna/featurettes/PullQuote/PullQuote.scss +322 -322
  91. package/dist/luna/featurettes/PullQuote/ico-quote-white.svg +3 -3
  92. package/dist/luna/featurettes/PullQuote/ico-quote.svg +3 -3
  93. package/dist/luna/heroes/FilterHero/FilterHero.scss +80 -80
  94. package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.scss +605 -605
  95. package/dist/luna/heroes/Hero1/Hero1.scss +223 -223
  96. package/dist/luna/heroes/Hero2/Hero2.scss +165 -165
  97. package/dist/luna/heroes/Hero3/Hero3.scss +250 -250
  98. package/dist/luna/heroes/Hero4/Hero4.scss +112 -112
  99. package/dist/luna/heroes/Hero6/Hero6.scss +127 -127
  100. package/dist/luna/heroes/Hero7/Hero7.scss +193 -193
  101. package/dist/luna/heroes/SuperHero/SuperHero.scss +774 -774
  102. package/dist/luna/images/arrow-diagonal-black.svg +13 -13
  103. package/dist/luna/images/arrow-diagonal-blue.svg +13 -13
  104. package/dist/luna/images/arrow-diagonal-white.svg +13 -13
  105. package/dist/luna/images/bulletpoint.svg +3 -3
  106. package/dist/luna/images/callout-icon.svg +3 -3
  107. package/dist/luna/images/check-blue.svg +4 -4
  108. package/dist/luna/images/circle-arrow-right-black.svg +3 -3
  109. package/dist/luna/images/circle-arrow-right-white.svg +3 -3
  110. package/dist/luna/images/circle-arrow.svg +3 -3
  111. package/dist/luna/images/close-button.svg +42 -42
  112. package/dist/luna/images/close-dark-navy.svg +3 -3
  113. package/dist/luna/images/close-icon.svg +3 -3
  114. package/dist/luna/images/collapse-close-blue.svg +5 -5
  115. package/dist/luna/images/collapse-close-gold.svg +5 -5
  116. package/dist/luna/images/collapse-open-blue.svg +4 -4
  117. package/dist/luna/images/collapse-open-gold.svg +4 -4
  118. package/dist/luna/images/cross-medium-blue.svg +4 -4
  119. package/dist/luna/images/cross-medium-white.svg +5 -5
  120. package/dist/luna/images/down-caret-dark-blue.svg +4 -4
  121. package/dist/luna/images/down-caret-dark-gray.svg +4 -4
  122. package/dist/luna/images/down-caret-light-gray.svg +4 -4
  123. package/dist/luna/images/downArrow.svg +36 -36
  124. package/dist/luna/images/external-arrow-blue.svg +11 -11
  125. package/dist/luna/images/external-arrow-white-theme.svg +12 -12
  126. package/dist/luna/images/external-arrow.svg +12 -12
  127. package/dist/luna/images/form-border-top-light.svg +4 -4
  128. package/dist/luna/images/frame-intersection.svg +3 -3
  129. package/dist/luna/images/gallery-image-corner-border.svg +3 -3
  130. package/dist/luna/images/green-tick.svg +3 -3
  131. package/dist/luna/images/internal-arrow-blue.svg +15 -15
  132. package/dist/luna/images/internal-arrow-white-theme.svg +15 -15
  133. package/dist/luna/images/internal-arrow.svg +15 -15
  134. package/dist/luna/images/logo-icon.svg +17 -17
  135. package/dist/luna/images/pdf-doc.svg +9 -9
  136. package/dist/luna/images/play.svg +17 -17
  137. package/dist/luna/images/right-caret-dark-blue.svg +3 -3
  138. package/dist/luna/images/right-caret-light-gray.svg +4 -4
  139. package/dist/luna/images/right-caret-light-yellow-stroke.svg +9 -9
  140. package/dist/luna/images/right-caret-light-yellow.svg +4 -4
  141. package/dist/luna/images/right-caret-medium-gray.svg +4 -4
  142. package/dist/luna/images/search.svg +9 -9
  143. package/dist/luna/images/skipicon.svg +154 -154
  144. package/dist/luna/images/text-doc.svg +9 -9
  145. package/dist/luna/images/text-lines.svg +22 -22
  146. package/dist/luna/images/tooltip-close-icon.svg +3 -3
  147. package/dist/luna/images/tooltip-icon.svg +3 -3
  148. package/dist/luna/images/up-arrow.svg +36 -36
  149. package/dist/luna/images/up-right-arrow.svg +9 -9
  150. package/dist/luna/images/user-profile.svg +37 -37
  151. package/dist/luna/images/worldwide.svg +19 -19
  152. package/dist/luna/list-feats/ListFeat/ListFeat.scss +112 -112
  153. package/dist/luna/list-feats/ListFeat1/ListFeat1.scss +94 -94
  154. package/dist/luna/list-feats/ListFeat2/ListFeat2.scss +19 -19
  155. package/dist/luna/list-feats/ListFeat4/ListFeat4.scss +32 -32
  156. package/dist/luna/list-feats/ListFeat5/ListFeat5.scss +26 -26
  157. package/dist/luna/list-feats/ListFeat6/ListFeat6.scss +34 -34
  158. package/dist/luna/list-feats/ListFeat7/ListFeat7.scss +13 -13
  159. package/dist/luna/list-feats/ListFeatCustom/ListFeatCustom.scss +7 -7
  160. package/dist/luna/other-organisms/Carousel/Carousel.scss +134 -134
  161. package/dist/luna/other-organisms/Flyout/Flyout.scss +254 -254
  162. package/dist/luna/other-organisms/Footer/Footer.scss +469 -469
  163. package/dist/luna/other-organisms/LanguageSelector/LanguageSelector.scss +317 -317
  164. package/dist/luna/other-organisms/MarketoForm/MarketoForm.scss +56 -56
  165. package/dist/luna/other-organisms/NavBar/NavBar.js +2 -1
  166. package/dist/luna/other-organisms/NavBar/NavBar.scss +636 -638
  167. package/dist/luna/other-organisms/SubNav/SubNav.scss +232 -232
  168. package/package.json +93 -93
@@ -1,13 +1,13 @@
1
- /**
2
- * Reset
3
- */
4
-
5
- html {
6
- box-sizing: border-box;
7
- }
8
-
9
- *,
10
- *:before,
11
- *:after {
12
- box-sizing: inherit;
13
- }
1
+ /**
2
+ * Reset
3
+ */
4
+
5
+ html {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ *,
10
+ *:before,
11
+ *:after {
12
+ box-sizing: inherit;
13
+ }
@@ -1,7 +1,7 @@
1
- /**
2
- * Box Shadow
3
- */
4
-
5
- @mixin box-shadow($level) {
6
- box-shadow: map-get($box-shadows, $level);
1
+ /**
2
+ * Box Shadow
3
+ */
4
+
5
+ @mixin box-shadow($level) {
6
+ box-shadow: map-get($box-shadows, $level);
7
7
  }
@@ -1,5 +1,5 @@
1
- // modules
2
- @import "box-shadow";
3
- @import "typography";
4
- @import "yiq";
5
- @import "z-index";
1
+ // modules
2
+ @import "box-shadow";
3
+ @import "typography";
4
+ @import "yiq";
5
+ @import "z-index";
@@ -1,7 +1,7 @@
1
- @mixin organism-padding() {
2
- padding: spacing("super") calc((100vw - 1200px) / 2);
3
-
4
- @media screen and (max-width: 1272px) {
5
- padding: spacing("super") 36px;
6
- }
7
- }
1
+ @mixin organism-padding() {
2
+ padding: spacing("super") calc((100vw - 1200px) / 2);
3
+
4
+ @media screen and (max-width: 1272px) {
5
+ padding: spacing("super") 36px;
6
+ }
7
+ }
@@ -1,110 +1,110 @@
1
- // header type setting
2
- @mixin header-type-setting() {
3
- font-size: 1em;
4
- font-family: $header-font-family;
5
- line-height: line-height('tight');
6
- font-weight: $header-font-weight;
7
- color: $header-font-color;
8
- display: block;
9
- margin: 0 0 0.67em 0;
10
- }
11
-
12
- // general type setting
13
- @mixin type-setting($font-size: 'base', $line-height: 'regular') {
14
- font-size: font-size($font-size);
15
- line-height: line-height($line-height);
16
- }
17
-
18
- // paragraph type setting
19
- @mixin paragraph-type-setting {
20
- @include type-setting('base', 'loose');
21
- margin: 0 0 1.5em 0;
22
- }
23
-
24
- // sets font-size
25
- @mixin font-size($size) {
26
- @include type-setting($size);
27
- }
28
-
29
- // sets font-size
30
- $normal-font-family: 'Benton Sans W05 Book', -apple-system, BlinkMacSystemFont,
31
- 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
32
- sans-serif;
33
-
34
- $light-font-weight: 100;
35
- $light-font-family: 'Benton Sans W05 Light', -apple-system, BlinkMacSystemFont,
36
- 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
37
- sans-serif;
38
-
39
- $regular-font-weight: 400;
40
- $regular-font-family: 'Benton Sans W05 Regular', -apple-system,
41
- BlinkMacSystemFont, 'helvetica neue', helvetica, ubuntu, roboto, noto,
42
- 'segoe ui', arial, sans-serif;
43
-
44
- $medium-font-weight: 400;
45
- $medium-font-family: 'Benton Sans W05 Medium', -apple-system, BlinkMacSystemFont,
46
- 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
47
- sans-serif;
48
-
49
- $bold-font-weight: 400;
50
- $bold-font-family: 'Benton Sans W05 Bold', -apple-system, BlinkMacSystemFont,
51
- 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
52
- sans-serif;
53
-
54
- $very-bold-font-family: 'Benton Sans W05 Black', -apple-system,
55
- BlinkMacSystemFont, 'helvetica neue', helvetica, ubuntu, roboto, noto,
56
- 'segoe ui', arial, sans-serif;
57
-
58
- @mixin font-size($size) {
59
- @include type-setting($size);
60
- }
61
-
62
- // NEW BENTING FONT STYLING
63
- @mixin benton-normal() {
64
- font-family: $normal-font-family;
65
- }
66
-
67
- @mixin benton-light() {
68
- font-family: $light-font-family;
69
- font-weight: $light-font-weight;
70
- }
71
-
72
- @mixin benton-regular() {
73
- font-family: $regular-font-family;
74
- font-weight: $regular-font-weight;
75
- }
76
-
77
- @mixin benton-medium() {
78
- font-family: $medium-font-family;
79
- font-weight: $medium-font-weight;
80
- }
81
-
82
- @mixin benton-bold() {
83
- font-family: $bold-font-family;
84
- font-weight: $bold-font-weight;
85
- }
86
-
87
- @mixin benton-very-bold() {
88
- font-family: $very-bold-font-family;
89
- }
90
-
91
- h3,
92
- h2 {
93
- @include benton-very-bold();
94
- }
95
-
96
- strong {
97
- @include benton-medium();
98
- }
99
-
100
- .ter-feat__sub-header-container,
101
- .ter-feat__sub-header,
102
- .ter-hero__sub-header,
103
- .ter-hero__sub-header-container {
104
- @include benton-light();
105
- }
106
-
107
- .ter-hero__header,
108
- .ter-feat__header {
109
- @include benton-very-bold();
110
- }
1
+ // header type setting
2
+ @mixin header-type-setting() {
3
+ font-size: 1em;
4
+ font-family: $header-font-family;
5
+ line-height: line-height('tight');
6
+ font-weight: $header-font-weight;
7
+ color: $header-font-color;
8
+ display: block;
9
+ margin: 0 0 0.67em 0;
10
+ }
11
+
12
+ // general type setting
13
+ @mixin type-setting($font-size: 'base', $line-height: 'regular') {
14
+ font-size: font-size($font-size);
15
+ line-height: line-height($line-height);
16
+ }
17
+
18
+ // paragraph type setting
19
+ @mixin paragraph-type-setting {
20
+ @include type-setting('base', 'loose');
21
+ margin: 0 0 1.5em 0;
22
+ }
23
+
24
+ // sets font-size
25
+ @mixin font-size($size) {
26
+ @include type-setting($size);
27
+ }
28
+
29
+ // sets font-size
30
+ $normal-font-family: 'Benton Sans W05 Book', -apple-system, BlinkMacSystemFont,
31
+ 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
32
+ sans-serif;
33
+
34
+ $light-font-weight: 100;
35
+ $light-font-family: 'Benton Sans W05 Light', -apple-system, BlinkMacSystemFont,
36
+ 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
37
+ sans-serif;
38
+
39
+ $regular-font-weight: 400;
40
+ $regular-font-family: 'Benton Sans W05 Regular', -apple-system,
41
+ BlinkMacSystemFont, 'helvetica neue', helvetica, ubuntu, roboto, noto,
42
+ 'segoe ui', arial, sans-serif;
43
+
44
+ $medium-font-weight: 400;
45
+ $medium-font-family: 'Benton Sans W05 Medium', -apple-system, BlinkMacSystemFont,
46
+ 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
47
+ sans-serif;
48
+
49
+ $bold-font-weight: 400;
50
+ $bold-font-family: 'Benton Sans W05 Bold', -apple-system, BlinkMacSystemFont,
51
+ 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
52
+ sans-serif;
53
+
54
+ $very-bold-font-family: 'Benton Sans W05 Black', -apple-system,
55
+ BlinkMacSystemFont, 'helvetica neue', helvetica, ubuntu, roboto, noto,
56
+ 'segoe ui', arial, sans-serif;
57
+
58
+ @mixin font-size($size) {
59
+ @include type-setting($size);
60
+ }
61
+
62
+ // NEW BENTING FONT STYLING
63
+ @mixin benton-normal() {
64
+ font-family: $normal-font-family;
65
+ }
66
+
67
+ @mixin benton-light() {
68
+ font-family: $light-font-family;
69
+ font-weight: $light-font-weight;
70
+ }
71
+
72
+ @mixin benton-regular() {
73
+ font-family: $regular-font-family;
74
+ font-weight: $regular-font-weight;
75
+ }
76
+
77
+ @mixin benton-medium() {
78
+ font-family: $medium-font-family;
79
+ font-weight: $medium-font-weight;
80
+ }
81
+
82
+ @mixin benton-bold() {
83
+ font-family: $bold-font-family;
84
+ font-weight: $bold-font-weight;
85
+ }
86
+
87
+ @mixin benton-very-bold() {
88
+ font-family: $very-bold-font-family;
89
+ }
90
+
91
+ h3,
92
+ h2 {
93
+ @include benton-very-bold();
94
+ }
95
+
96
+ strong {
97
+ @include benton-medium();
98
+ }
99
+
100
+ .ter-feat__sub-header-container,
101
+ .ter-feat__sub-header,
102
+ .ter-hero__sub-header,
103
+ .ter-hero__sub-header-container {
104
+ @include benton-light();
105
+ }
106
+
107
+ .ter-hero__header,
108
+ .ter-feat__header {
109
+ @include benton-very-bold();
110
+ }
@@ -1,50 +1,50 @@
1
- /// Determines whether a given color is light or dark.
2
- /// The YIQ color space function gives weights each RGB value according to how sensitive they are to human eyesight.
3
- /// @param {Color} $color - The color to test
4
- /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $color should be tested against. Acceptable values are between 0 & 255.
5
- /// @returns {Boolean}
6
- @function yiq-is-light(
7
- $color,
8
- $threshold: $yiq-contrasted-threshold
9
- ) {
10
- $red: red($color);
11
- $green: green($color);
12
- $blue: blue($color);
13
-
14
- $yiq: (($red*299)+($green*587)+($blue*114))/1000;
15
-
16
- @if $yiq-debug { @debug $yiq, $threshold; }
17
-
18
- @return if($yiq >= $threshold, true, false);
19
- }
20
-
21
- /// Returns an appropriate color to ensure proper contrast
22
- /// @param {Color} $base - The color to be tested
23
- /// @param {Color} $dark - The color to return if $base is light
24
- /// @param {Color} $light - The color to return if $base is dark
25
- /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $base should be tested against. Acceptable values are between 0 & 255.
26
- /// @returns {Color} - $dark if $base is light, $light is $base if dark
27
- @function yiq-contrast-color(
28
- $base,
29
- $dark: $yiq-contrasted-dark-default,
30
- $light: $yiq-contrasted-light-default,
31
- $threshold: $yiq-contrasted-threshold
32
- ) {
33
- @return if(yiq-is-light($base, $threshold), $dark, $light);
34
- }
35
-
36
- /// Sets the specified background color and calculates a dark or light contrasted text color
37
- /// @param {Color} $base - The color to be tested
38
- /// @param {Color} $dark - The color to return if $base is light
39
- /// @param {Color} $light - The color to return if $base is dark
40
- /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $base should be tested against. Acceptable values are between 0 & 255.
41
- /// @outputs a background-color/text color combination with proper contrasting
42
- @mixin yiq-contrasted(
43
- $background-color,
44
- $dark: $yiq-contrasted-dark-default,
45
- $light: $yiq-contrasted-light-default,
46
- $threshold: $yiq-contrasted-threshold
47
- ) {
48
- background-color: $background-color;
49
- color: yiq-contrast-color($background-color, $dark, $light, $threshold);
50
- }
1
+ /// Determines whether a given color is light or dark.
2
+ /// The YIQ color space function gives weights each RGB value according to how sensitive they are to human eyesight.
3
+ /// @param {Color} $color - The color to test
4
+ /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $color should be tested against. Acceptable values are between 0 & 255.
5
+ /// @returns {Boolean}
6
+ @function yiq-is-light(
7
+ $color,
8
+ $threshold: $yiq-contrasted-threshold
9
+ ) {
10
+ $red: red($color);
11
+ $green: green($color);
12
+ $blue: blue($color);
13
+
14
+ $yiq: (($red*299)+($green*587)+($blue*114))/1000;
15
+
16
+ @if $yiq-debug { @debug $yiq, $threshold; }
17
+
18
+ @return if($yiq >= $threshold, true, false);
19
+ }
20
+
21
+ /// Returns an appropriate color to ensure proper contrast
22
+ /// @param {Color} $base - The color to be tested
23
+ /// @param {Color} $dark - The color to return if $base is light
24
+ /// @param {Color} $light - The color to return if $base is dark
25
+ /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $base should be tested against. Acceptable values are between 0 & 255.
26
+ /// @returns {Color} - $dark if $base is light, $light is $base if dark
27
+ @function yiq-contrast-color(
28
+ $base,
29
+ $dark: $yiq-contrasted-dark-default,
30
+ $light: $yiq-contrasted-light-default,
31
+ $threshold: $yiq-contrasted-threshold
32
+ ) {
33
+ @return if(yiq-is-light($base, $threshold), $dark, $light);
34
+ }
35
+
36
+ /// Sets the specified background color and calculates a dark or light contrasted text color
37
+ /// @param {Color} $base - The color to be tested
38
+ /// @param {Color} $dark - The color to return if $base is light
39
+ /// @param {Color} $light - The color to return if $base is dark
40
+ /// @param {Number} $threshold [$yiq-contrasted-threshold] - The YIQ lightness value that $base should be tested against. Acceptable values are between 0 & 255.
41
+ /// @outputs a background-color/text color combination with proper contrasting
42
+ @mixin yiq-contrasted(
43
+ $background-color,
44
+ $dark: $yiq-contrasted-dark-default,
45
+ $light: $yiq-contrasted-light-default,
46
+ $threshold: $yiq-contrasted-threshold
47
+ ) {
48
+ background-color: $background-color;
49
+ color: yiq-contrast-color($background-color, $dark, $light, $threshold);
50
+ }
@@ -1,3 +1,3 @@
1
- @mixin z-index($level) {
2
- z-index: $level * 100;
3
- }
1
+ @mixin z-index($level) {
2
+ z-index: $level * 100;
3
+ }
@@ -1,15 +1,15 @@
1
- // global
2
- @import "./global-vars.scss";
3
- @import "~terra-one/dist/global-styles/global-colors.scss";
4
- @import "~terra-one/dist/global-styles/global-text-sizes.scss";
5
- @import "~terra-one/dist/global-styles/global-vars.scss";
6
-
7
- // mixins
8
- @import "./mixins/box-shadow";
9
- @import "./mixins/typography";
10
- @import "./mixins/yiq";
11
- @import "./mixins/organism-padding-hack";
12
-
13
- // layout
14
- @import "./layout/media-queries";
15
- @import "./layout/css-grid";
1
+ // global
2
+ @import "./global-vars.scss";
3
+ @import "~terra-one/dist/global-styles/global-colors.scss";
4
+ @import "~terra-one/dist/global-styles/global-text-sizes.scss";
5
+ @import "~terra-one/dist/global-styles/global-vars.scss";
6
+
7
+ // mixins
8
+ @import "./mixins/box-shadow";
9
+ @import "./mixins/typography";
10
+ @import "./mixins/yiq";
11
+ @import "./mixins/organism-padding-hack";
12
+
13
+ // layout
14
+ @import "./layout/media-queries";
15
+ @import "./layout/css-grid";
@@ -1,9 +1,9 @@
1
- /**
2
- * Box Shadow
3
- */
4
-
5
- @each $level, $value in $box-shadows {
6
- .box-shadow-#{$level} {
7
- box-shadow: $value;
8
- }
1
+ /**
2
+ * Box Shadow
3
+ */
4
+
5
+ @each $level, $value in $box-shadows {
6
+ .box-shadow-#{$level} {
7
+ box-shadow: $value;
8
+ }
9
9
  }
@@ -1,49 +1,49 @@
1
- /**
2
- * Display
3
- */
4
-
5
- .d-inline { display: inline; }
6
- .d-inline-block { display: inline-block; }
7
- .d-block { display: block; }
8
- .d-flex { display: flex; }
9
- .d-inline-flex { display: inline-flex; }
10
- .d-table { display: table; }
11
- .d-table-cell { display: table-cell; }
12
- .d-table-row { display: table-row; }
13
- .d-none { display: none; }
14
-
15
- @media only screen and (min-width: $breakpoint-xs) {
16
- .d-sm-inline { display: inline; }
17
- .d-sm-inline-block { display: inline-block; }
18
- .d-sm-block { display: block; }
19
- .d-sm-flex { display: flex; }
20
- .d-sm-inline-flex { display: inline-flex; }
21
- .d-sm-table { display: table; }
22
- .d-sm-table-cell { display: table-cell; }
23
- .d-sm-table-row { display: table-row; }
24
- .d-sm-none { display: none; }
25
- }
26
-
27
- @media only screen and (min-width: $breakpoint-sm) {
28
- .d-md-inline { display: inline; }
29
- .d-md-inline-block { display: inline-block; }
30
- .d-md-block { display: block; }
31
- .d-md-flex { display: flex; }
32
- .d-md-inline-flex { display: inline-flex; }
33
- .d-md-table { display: table; }
34
- .d-md-table-cell { display: table-cell; }
35
- .d-md-table-row { display: table-row; }
36
- .d-md-none { display: none; }
37
- }
38
-
39
- @media only screen and (min-width: $breakpoint-md) {
40
- .d-lg-inline { display: inline; }
41
- .d-lg-inline-block { display: inline-block; }
42
- .d-lg-block { display: block; }
43
- .d-lg-flex { display: flex; }
44
- .d-lg-inline-flex { display: inline-flex; }
45
- .d-lg-table { display: table; }
46
- .d-lg-table-cell { display: table-cell; }
47
- .d-lg-table-row { display: table-row; }
48
- .d-lg-none { display: none; }
1
+ /**
2
+ * Display
3
+ */
4
+
5
+ .d-inline { display: inline; }
6
+ .d-inline-block { display: inline-block; }
7
+ .d-block { display: block; }
8
+ .d-flex { display: flex; }
9
+ .d-inline-flex { display: inline-flex; }
10
+ .d-table { display: table; }
11
+ .d-table-cell { display: table-cell; }
12
+ .d-table-row { display: table-row; }
13
+ .d-none { display: none; }
14
+
15
+ @media only screen and (min-width: $breakpoint-xs) {
16
+ .d-sm-inline { display: inline; }
17
+ .d-sm-inline-block { display: inline-block; }
18
+ .d-sm-block { display: block; }
19
+ .d-sm-flex { display: flex; }
20
+ .d-sm-inline-flex { display: inline-flex; }
21
+ .d-sm-table { display: table; }
22
+ .d-sm-table-cell { display: table-cell; }
23
+ .d-sm-table-row { display: table-row; }
24
+ .d-sm-none { display: none; }
25
+ }
26
+
27
+ @media only screen and (min-width: $breakpoint-sm) {
28
+ .d-md-inline { display: inline; }
29
+ .d-md-inline-block { display: inline-block; }
30
+ .d-md-block { display: block; }
31
+ .d-md-flex { display: flex; }
32
+ .d-md-inline-flex { display: inline-flex; }
33
+ .d-md-table { display: table; }
34
+ .d-md-table-cell { display: table-cell; }
35
+ .d-md-table-row { display: table-row; }
36
+ .d-md-none { display: none; }
37
+ }
38
+
39
+ @media only screen and (min-width: $breakpoint-md) {
40
+ .d-lg-inline { display: inline; }
41
+ .d-lg-inline-block { display: inline-block; }
42
+ .d-lg-block { display: block; }
43
+ .d-lg-flex { display: flex; }
44
+ .d-lg-inline-flex { display: inline-flex; }
45
+ .d-lg-table { display: table; }
46
+ .d-lg-table-cell { display: table-cell; }
47
+ .d-lg-table-row { display: table-row; }
48
+ .d-lg-none { display: none; }
49
49
  }
@@ -1,16 +1,16 @@
1
- /**
2
- * Font Family
3
- */
4
-
5
-
6
- .font-sans-serif {
7
- font-family: $font-sans-serif;
8
- }
9
-
10
- .font-serif {
11
- font-family: $font-serif;
12
- }
13
-
14
- .font-code {
15
- font-family: $font-code;
1
+ /**
2
+ * Font Family
3
+ */
4
+
5
+
6
+ .font-sans-serif {
7
+ font-family: $font-sans-serif;
8
+ }
9
+
10
+ .font-serif {
11
+ font-family: $font-serif;
12
+ }
13
+
14
+ .font-code {
15
+ font-family: $font-code;
16
16
  }
@@ -1,23 +1,23 @@
1
- .ter-feat-one,
2
- .ter-feat-two,
3
- .ter-feat-three,
4
- .ter-feat-four,
5
- .ter-feat-five,
6
- .ter-feat-six,
7
- .ter-feat-seven,
8
- .ter-feat-eight,
9
- .ter-feat9,
10
- .ter-feat-ten,
11
- .ter-hero-two,
12
- .ter-hero-four,
13
- .ter-hero-five,
14
- .ter-feat-four-flex {
15
- &__background-image {
16
- transition: 0.1s;
17
- // background-size: contain;
18
- // This is potentially bad for parallax performance optmization
19
-
20
- background-repeat: no-repeat;
21
- }
22
- overflow: hidden;
23
- }
1
+ .ter-feat-one,
2
+ .ter-feat-two,
3
+ .ter-feat-three,
4
+ .ter-feat-four,
5
+ .ter-feat-five,
6
+ .ter-feat-six,
7
+ .ter-feat-seven,
8
+ .ter-feat-eight,
9
+ .ter-feat9,
10
+ .ter-feat-ten,
11
+ .ter-hero-two,
12
+ .ter-hero-four,
13
+ .ter-hero-five,
14
+ .ter-feat-four-flex {
15
+ &__background-image {
16
+ transition: 0.1s;
17
+ // background-size: contain;
18
+ // This is potentially bad for parallax performance optmization
19
+
20
+ background-repeat: no-repeat;
21
+ }
22
+ overflow: hidden;
23
+ }