luna-one 3.1.592 → 3.1.593

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) 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 +113 -113
  15. package/dist/global-styles/global-terra.scss +10 -10
  16. package/dist/global-styles/global-vars.scss +599 -599
  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 +102 -102
  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 +915 -915
  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/BlockListItems.scss +285 -285
  37. package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss +6 -6
  38. package/dist/luna/components/CTAButtons/CTAButtons.scss +19 -19
  39. package/dist/luna/components/ComparisonTable/ComparisonTable.scss +331 -331
  40. package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss +324 -324
  41. package/dist/luna/components/DataPoint/DataPoint.scss +170 -170
  42. package/dist/luna/components/EventCard/EventCard.scss +134 -134
  43. package/dist/luna/components/FilterSection/FilterSection.scss +175 -175
  44. package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss +51 -51
  45. package/dist/luna/components/Header/Header.scss +36 -36
  46. package/dist/luna/components/ImageGallery/ImageGallery.scss +442 -442
  47. package/dist/luna/components/InPageJumpNav/InPageJumpNav.scss +122 -122
  48. package/dist/luna/components/JobPosting/JobPosting.scss +171 -171
  49. package/dist/luna/components/LinkList/LinkList.scss +59 -59
  50. package/dist/luna/components/LoadingSpinner/LoadingSpinner.scss +34 -34
  51. package/dist/luna/components/Login/Login.scss +180 -180
  52. package/dist/luna/components/MegaMenu/MegaMenu.scss +570 -570
  53. package/dist/luna/components/MiniFeatDropdown/MiniFeatDropdown.scss +107 -107
  54. package/dist/luna/components/MobileLogin/MobileLogin.scss +38 -38
  55. package/dist/luna/components/MobileMegaMenu/MobileMegaMenu.scss +289 -289
  56. package/dist/luna/components/MobileMenu/MobileMenu.scss +70 -70
  57. package/dist/luna/components/MobileNav/MobileNav.scss +286 -286
  58. package/dist/luna/components/NavBarTop/NavBarTop.scss +403 -403
  59. package/dist/luna/components/NavSearch/NavSearch.scss +130 -130
  60. package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntries.scss +339 -339
  61. package/dist/luna/components/OverlayNotice/OverlayNotice.scss +247 -247
  62. package/dist/luna/components/Pagination/Pagination.scss +27 -27
  63. package/dist/luna/components/ProductSummary/ProductSummary.scss +273 -273
  64. package/dist/luna/components/ProseLayout/ProseLayout.scss +384 -384
  65. package/dist/luna/components/RegionCard/RegionCard.scss +86 -86
  66. package/dist/luna/components/ResourceGrid/ResourceGrid.scss +34 -34
  67. package/dist/luna/components/ScrollInPlace/ScrollInPlace.scss +219 -219
  68. package/dist/luna/components/SketchUpPricingCard/SketchUpPricingCard.scss +142 -142
  69. package/dist/luna/components/SlideOutFeat/SlideOutFeat.scss +124 -124
  70. package/dist/luna/components/StoreFrontCard/StoreFrontCard.scss +434 -434
  71. package/dist/luna/components/SupportCard/SupportCard.scss +134 -134
  72. package/dist/luna/components/Tabs/Tabs.scss +871 -871
  73. package/dist/luna/components/TimeBasedList/TimeBasedList.scss +394 -394
  74. package/dist/luna/components/TrainerCard/TrainerCard.scss +51 -51
  75. package/dist/luna/components/TrialForm/TrialComponents/TrialSpecifics.scss +44 -44
  76. package/dist/luna/components/TrialForm/TrialComponents/TrialSummary.scss +57 -57
  77. package/dist/luna/components/TrialForm/TrialFormStart/TrialFormStart.scss +28 -28
  78. package/dist/luna/components/TrialForm/images/check.svg +3 -3
  79. package/dist/luna/components/TrialForm/images/form-border-bottom-dark.svg +4 -4
  80. package/dist/luna/components/TrialForm/images/form-border-bottom-light.svg +4 -4
  81. package/dist/luna/components/TrialForm/images/form-border-top-dark.svg +4 -4
  82. package/dist/luna/components/TrialForm/images/form-border-top-light.svg +4 -4
  83. package/dist/luna/components/UnboundedCard/UnboundedCard.scss +108 -108
  84. package/dist/luna/components/UnboundedCard/playIcon.svg +17 -17
  85. package/dist/luna/components/VariableContentCard/VariableContentCard.scss +253 -253
  86. package/dist/luna/components/Video/Video.scss +209 -209
  87. package/dist/luna/components/VidyardModal/VidyardModal.scss +34 -34
  88. package/dist/luna/components/WaffleMenu/WaffleMenu.scss +73 -73
  89. package/dist/luna/featurettes/Accordion/Accordion.scss +154 -154
  90. package/dist/luna/featurettes/CustomFeat/CustomFeat.scss +17 -17
  91. package/dist/luna/featurettes/Feat1/Feat1.scss +110 -110
  92. package/dist/luna/featurettes/Feat2A/Feat2A.scss +132 -132
  93. package/dist/luna/featurettes/Feat2B/Feat2B.scss +231 -231
  94. package/dist/luna/featurettes/Feat3/Feat3.scss +49 -49
  95. package/dist/luna/featurettes/Feat4/Feat4.scss +86 -86
  96. package/dist/luna/featurettes/Feat5/Feat5.scss +235 -235
  97. package/dist/luna/featurettes/Feat7/Feat7.scss +49 -49
  98. package/dist/luna/featurettes/Feat8/Feat8.scss +103 -103
  99. package/dist/luna/featurettes/IconTextList/IconTextList.scss +124 -124
  100. package/dist/luna/featurettes/ProductsPackage/ProductsPackage.scss +194 -194
  101. package/dist/luna/featurettes/PullQuote/PullQuote.scss +400 -400
  102. package/dist/luna/featurettes/PullQuote/ico-quote-white.svg +3 -3
  103. package/dist/luna/featurettes/PullQuote/ico-quote.svg +3 -3
  104. package/dist/luna/heroes/FilterHero/FilterHero.scss +80 -80
  105. package/dist/luna/heroes/FullBackgroundHero/FullBackgroundHero.scss +722 -722
  106. package/dist/luna/heroes/Hero1/Hero1.scss +223 -223
  107. package/dist/luna/heroes/Hero2/Hero2.scss +165 -165
  108. package/dist/luna/heroes/Hero3/Hero3.scss +250 -250
  109. package/dist/luna/heroes/Hero4/Hero4.scss +112 -112
  110. package/dist/luna/heroes/Hero6/Hero6.scss +127 -127
  111. package/dist/luna/heroes/Hero7/Hero7.scss +193 -193
  112. package/dist/luna/heroes/SuperHero/SuperHero.scss +804 -804
  113. package/dist/luna/images/arrow-diagonal-black.svg +13 -13
  114. package/dist/luna/images/arrow-diagonal-blue.svg +13 -13
  115. package/dist/luna/images/arrow-diagonal-white.svg +13 -13
  116. package/dist/luna/images/bulletpoint.svg +3 -3
  117. package/dist/luna/images/callout-icon.svg +3 -3
  118. package/dist/luna/images/check-blue.svg +4 -4
  119. package/dist/luna/images/circle-arrow-right-black.svg +3 -3
  120. package/dist/luna/images/circle-arrow-right-white.svg +3 -3
  121. package/dist/luna/images/circle-arrow.svg +3 -3
  122. package/dist/luna/images/close-button.svg +42 -42
  123. package/dist/luna/images/close-dark-navy.svg +3 -3
  124. package/dist/luna/images/close-icon.svg +3 -3
  125. package/dist/luna/images/collapse-close-blue.svg +5 -5
  126. package/dist/luna/images/collapse-close-gold.svg +5 -5
  127. package/dist/luna/images/collapse-open-blue.svg +4 -4
  128. package/dist/luna/images/collapse-open-gold.svg +4 -4
  129. package/dist/luna/images/cross-medium-blue.svg +4 -4
  130. package/dist/luna/images/cross-medium-white.svg +5 -5
  131. package/dist/luna/images/down-caret-dark-blue.svg +4 -4
  132. package/dist/luna/images/down-caret-dark-gray.svg +4 -4
  133. package/dist/luna/images/down-caret-light-gray.svg +4 -4
  134. package/dist/luna/images/downArrow.svg +36 -36
  135. package/dist/luna/images/external-arrow-blue.svg +11 -11
  136. package/dist/luna/images/external-arrow-white-theme.svg +12 -12
  137. package/dist/luna/images/external-arrow.svg +12 -12
  138. package/dist/luna/images/form-border-top-light.svg +4 -4
  139. package/dist/luna/images/frame-intersection.svg +3 -3
  140. package/dist/luna/images/gallery-image-corner-border.svg +3 -3
  141. package/dist/luna/images/green-tick.svg +3 -3
  142. package/dist/luna/images/internal-arrow-blue.svg +15 -15
  143. package/dist/luna/images/internal-arrow-white-theme.svg +15 -15
  144. package/dist/luna/images/internal-arrow.svg +15 -15
  145. package/dist/luna/images/logo-icon.svg +17 -17
  146. package/dist/luna/images/pdf-doc.svg +9 -9
  147. package/dist/luna/images/play.svg +17 -17
  148. package/dist/luna/images/right-caret-dark-blue.svg +3 -3
  149. package/dist/luna/images/right-caret-light-gray.svg +4 -4
  150. package/dist/luna/images/right-caret-light-yellow-stroke.svg +9 -9
  151. package/dist/luna/images/right-caret-light-yellow.svg +4 -4
  152. package/dist/luna/images/right-caret-medium-gray.svg +4 -4
  153. package/dist/luna/images/search.svg +9 -9
  154. package/dist/luna/images/skipicon.svg +154 -154
  155. package/dist/luna/images/text-doc.svg +9 -9
  156. package/dist/luna/images/text-lines.svg +22 -22
  157. package/dist/luna/images/tooltip-close-icon.svg +3 -3
  158. package/dist/luna/images/tooltip-icon.svg +3 -3
  159. package/dist/luna/images/up-arrow.svg +36 -36
  160. package/dist/luna/images/up-right-arrow.svg +9 -9
  161. package/dist/luna/images/user-profile.svg +37 -37
  162. package/dist/luna/images/user.svg +4 -4
  163. package/dist/luna/images/waffle.svg +11 -11
  164. package/dist/luna/images/worldwide.svg +19 -19
  165. package/dist/luna/list-feats/ListFeat/ListFeat.scss +112 -112
  166. package/dist/luna/list-feats/ListFeat1/ListFeat1.scss +94 -94
  167. package/dist/luna/list-feats/ListFeat2/ListFeat2.scss +19 -19
  168. package/dist/luna/list-feats/ListFeat4/ListFeat4.scss +32 -32
  169. package/dist/luna/list-feats/ListFeat5/ListFeat5.scss +26 -26
  170. package/dist/luna/list-feats/ListFeat6/ListFeat6.scss +34 -34
  171. package/dist/luna/list-feats/ListFeat7/ListFeat7.scss +13 -13
  172. package/dist/luna/list-feats/ListFeatCustom/ListFeatCustom.scss +7 -7
  173. package/dist/luna/other-organisms/Carousel/Carousel.scss +155 -155
  174. package/dist/luna/other-organisms/Flyout/Flyout.js +1 -0
  175. package/dist/luna/other-organisms/Flyout/Flyout.scss +367 -367
  176. package/dist/luna/other-organisms/Footer/Footer.scss +484 -484
  177. package/dist/luna/other-organisms/Footer/GlobalFooter.js +4 -4
  178. package/dist/luna/other-organisms/LanguageSelector/LanguageSelector.scss +318 -318
  179. package/dist/luna/other-organisms/MarketoForm/MarketoForm.scss +56 -56
  180. package/dist/luna/other-organisms/NavBar/NavBar.scss +628 -628
  181. package/dist/luna/other-organisms/SubNav/SubNav.scss +274 -274
  182. package/package.json +91 -91
@@ -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,102 +1,102 @@
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 for Trimble W05";
31
-
32
- $light-font-weight: 100;
33
- $light-font-family: "Benton Sans for Trimble W05";
34
-
35
- $regular-font-weight: 350;
36
- $regular-font-family: "Benton Sans for Trimble W05";
37
-
38
- $medium-font-weight: 400;
39
- $medium-font-family: "Benton Sans for Trimble W05";
40
-
41
- $bold-font-weight: 600;
42
-
43
- $very-bold-font-weight: 800;
44
- $bold-font-family: "Benton Sans for Trimble W05";
45
-
46
- $very-bold-font-family: "Benton Sans for Trimble W05";
47
-
48
- @mixin font-size($size) {
49
- @include type-setting($size);
50
- }
51
-
52
- // NEW BENTING FONT STYLING
53
- @mixin benton-normal() {
54
- font-family: $normal-font-family;
55
- font-weight: 400;
56
- }
57
-
58
- @mixin benton-light() {
59
- font-family: $light-font-family;
60
- font-weight: $light-font-weight;
61
- }
62
-
63
- @mixin benton-regular() {
64
- font-family: $regular-font-family;
65
- font-weight: $regular-font-weight;
66
- }
67
-
68
- @mixin benton-medium() {
69
- font-family: $medium-font-family;
70
- font-weight: $medium-font-weight;
71
- }
72
-
73
- @mixin benton-bold() {
74
- font-family: $bold-font-family;
75
- font-weight: $bold-font-weight;
76
- }
77
-
78
- @mixin benton-very-bold() {
79
- font-family: $very-bold-font-family;
80
- font-weight: $very-bold-font-weight;
81
- }
82
-
83
- h3,
84
- h2 {
85
- @include benton-very-bold();
86
- }
87
-
88
- strong {
89
- @include benton-medium();
90
- }
91
-
92
- .ter-feat__sub-header-container,
93
- .ter-feat__sub-header,
94
- .ter-hero__sub-header,
95
- .ter-hero__sub-header-container {
96
- @include benton-light();
97
- }
98
-
99
- .ter-hero__header,
100
- .ter-feat__header {
101
- @include benton-very-bold();
102
- }
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 for Trimble W05";
31
+
32
+ $light-font-weight: 100;
33
+ $light-font-family: "Benton Sans for Trimble W05";
34
+
35
+ $regular-font-weight: 350;
36
+ $regular-font-family: "Benton Sans for Trimble W05";
37
+
38
+ $medium-font-weight: 400;
39
+ $medium-font-family: "Benton Sans for Trimble W05";
40
+
41
+ $bold-font-weight: 600;
42
+
43
+ $very-bold-font-weight: 800;
44
+ $bold-font-family: "Benton Sans for Trimble W05";
45
+
46
+ $very-bold-font-family: "Benton Sans for Trimble W05";
47
+
48
+ @mixin font-size($size) {
49
+ @include type-setting($size);
50
+ }
51
+
52
+ // NEW BENTING FONT STYLING
53
+ @mixin benton-normal() {
54
+ font-family: $normal-font-family;
55
+ font-weight: 400;
56
+ }
57
+
58
+ @mixin benton-light() {
59
+ font-family: $light-font-family;
60
+ font-weight: $light-font-weight;
61
+ }
62
+
63
+ @mixin benton-regular() {
64
+ font-family: $regular-font-family;
65
+ font-weight: $regular-font-weight;
66
+ }
67
+
68
+ @mixin benton-medium() {
69
+ font-family: $medium-font-family;
70
+ font-weight: $medium-font-weight;
71
+ }
72
+
73
+ @mixin benton-bold() {
74
+ font-family: $bold-font-family;
75
+ font-weight: $bold-font-weight;
76
+ }
77
+
78
+ @mixin benton-very-bold() {
79
+ font-family: $very-bold-font-family;
80
+ font-weight: $very-bold-font-weight;
81
+ }
82
+
83
+ h3,
84
+ h2 {
85
+ @include benton-very-bold();
86
+ }
87
+
88
+ strong {
89
+ @include benton-medium();
90
+ }
91
+
92
+ .ter-feat__sub-header-container,
93
+ .ter-feat__sub-header,
94
+ .ter-hero__sub-header,
95
+ .ter-hero__sub-header-container {
96
+ @include benton-light();
97
+ }
98
+
99
+ .ter-hero__header,
100
+ .ter-feat__header {
101
+ @include benton-very-bold();
102
+ }
@@ -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
+ }
@@ -1,25 +1,25 @@
1
- /**
2
- * Text Align
3
- */
4
-
5
- .text-left { text-align: left; }
6
- .text-right { text-align: right; }
7
- .text-center { text-align: center; }
8
-
9
- @media only screen and (min-width: $breakpoint-xs) {
10
- .text-sm-left { text-align: left; }
11
- .text-sm-right { text-align: right; }
12
- .text-sm-center { text-align: center; }
13
- }
14
-
15
- @media only screen and (min-width: $breakpoint-sm) {
16
- .text-md-left { text-align: left; }
17
- .text-md-right { text-align: right; }
18
- .text-md-center { text-align: center; }
19
- }
20
-
21
- @media only screen and (min-width: $breakpoint-md) {
22
- .text-lg-left { text-align: left; }
23
- .text-lg-right { text-align: right; }
24
- .text-lg-center { text-align: center; }
1
+ /**
2
+ * Text Align
3
+ */
4
+
5
+ .text-left { text-align: left; }
6
+ .text-right { text-align: right; }
7
+ .text-center { text-align: center; }
8
+
9
+ @media only screen and (min-width: $breakpoint-xs) {
10
+ .text-sm-left { text-align: left; }
11
+ .text-sm-right { text-align: right; }
12
+ .text-sm-center { text-align: center; }
13
+ }
14
+
15
+ @media only screen and (min-width: $breakpoint-sm) {
16
+ .text-md-left { text-align: left; }
17
+ .text-md-right { text-align: right; }
18
+ .text-md-center { text-align: center; }
19
+ }
20
+
21
+ @media only screen and (min-width: $breakpoint-md) {
22
+ .text-lg-left { text-align: left; }
23
+ .text-lg-right { text-align: right; }
24
+ .text-lg-center { text-align: center; }
25
25
  }