sfc-utils 1.3.24 → 1.3.27

package/example/src/styles/footer.less

@@ -0,0 +1,345 @@
+@import (less) "values";
+
+.pageFooter {
+  background-color: #222;
+  overflow: auto;
+  padding: 30px 20px;
+  position: relative;
+
+  &.invert {
+    background-color: #ececec;
+    color: #000;
+  }
+}
+
+.pageFooter--left {
+  text-indent: -9999px;
+  margin-bottom: 15px;
+}
+
+.pageFooter--left-logo {
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-bottom: none;
+  display: block;
+  height: 20px;
+  width: 100%;
+  min-width: 100px;
+
+  &.mobile {
+    display: none;
+  }
+
+  @media @mobile{
+    display: none;
+
+    &.mobile {
+      display: block;
+    }
+  }
+}
+
+
+
+.pageFooter--left-social {
+  float: left;
+  margin-top: 20px !important;
+  margin-bottom: 30px !important;
+  width: 100%;
+}
+
+.pageFooter--left-social li {
+  float: left;
+  height: 25px;
+  margin-right: 10px;
+  width: 25px;
+}
+
+.pageFooter--left-social a {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.pageFooter--left-social .facebook a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1a19 19 0 1 0 19 19A18.954 18.954 0 0 0 20 1zm3.958 19h-2.691v9.5h-3.959V20h-1.9v-3.325h1.9v-2.217a3.707 3.707 0 0 1 3.325-3.958h3.642v3.325h-2.058a.748.748 0 0 0-.792.792v2.058h3.008z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .facebook a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1a19 19 0 1 0 19 19A18.954 18.954 0 0 0 20 1zm3.958 19h-2.691v9.5h-3.959V20h-1.9v-3.325h1.9v-2.217a3.707 3.707 0 0 1 3.325-3.958h3.642v3.325h-2.058a.748.748 0 0 0-.792.792v2.058h3.008z' fill='%233b5999'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .twitter a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1A19 19 0 1 1 1 20 19.056 19.056 0 0 1 20 1zm9.025 15.833a14.671 14.671 0 0 0 2.217-2.216 6.636 6.636 0 0 1-2.375.633 4.045 4.045 0 0 0 1.9-2.375 13.697 13.697 0 0 1-2.692 1.108 3.986 3.986 0 0 0-3.167-1.425 4.257 4.257 0 0 0-4.275 4.275 2.008 2.008 0 0 0 .159.95 13.243 13.243 0 0 1-4.909-1.266 12.953 12.953 0 0 1-3.958-3.167 5.154 5.154 0 0 0-.633 2.217 3.798 3.798 0 0 0 1.9 3.483 4.216 4.216 0 0 1-1.9-.475 4.3 4.3 0 0 0 .95 2.692 3.733 3.733 0 0 0 2.533 1.425 2.695 2.695 0 0 1-1.108.158h-.792a4.053 4.053 0 0 0 1.583 2.058 4.785 4.785 0 0 0 2.534.792 8.285 8.285 0 0 1-5.384 1.9H10.5a11.934 11.934 0 0 0 6.492 1.9 10.23 10.23 0 0 0 4.275-.792 14.9 14.9 0 0 0 3.483-1.9 10.37 10.37 0 0 0 2.375-2.85 10.781 10.781 0 0 0 1.583-3.325 12.347 12.347 0 0 0 .475-3.483c-.158 0-.158-.158-.158-.317z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .twitter a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1A19 19 0 1 1 1 20 19.056 19.056 0 0 1 20 1zm9.025 15.833a14.671 14.671 0 0 0 2.217-2.216 6.636 6.636 0 0 1-2.375.633 4.045 4.045 0 0 0 1.9-2.375 13.697 13.697 0 0 1-2.692 1.108 3.986 3.986 0 0 0-3.167-1.425 4.257 4.257 0 0 0-4.275 4.275 2.008 2.008 0 0 0 .159.95 13.243 13.243 0 0 1-4.909-1.266 12.953 12.953 0 0 1-3.958-3.167 5.154 5.154 0 0 0-.633 2.217 3.798 3.798 0 0 0 1.9 3.483 4.216 4.216 0 0 1-1.9-.475 4.3 4.3 0 0 0 .95 2.692 3.733 3.733 0 0 0 2.533 1.425 2.695 2.695 0 0 1-1.108.158h-.792a4.053 4.053 0 0 0 1.583 2.058 4.785 4.785 0 0 0 2.534.792 8.285 8.285 0 0 1-5.384 1.9H10.5a11.934 11.934 0 0 0 6.492 1.9 10.23 10.23 0 0 0 4.275-.792 14.9 14.9 0 0 0 3.483-1.9 10.37 10.37 0 0 0 2.375-2.85 10.781 10.781 0 0 0 1.583-3.325 12.347 12.347 0 0 0 .475-3.483c-.158 0-.158-.158-.158-.317z' fill='%23429bd5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .linkedin a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M39 20A19 19 0 1 1 20 1a18.823 18.823 0 0 1 16.625 9.975A17.881 17.881 0 0 1 39 20zm-9.658 8.708v-6.491a4.86 4.86 0 0 0-1.267-3.8 3.442 3.442 0 0 0-3.167-1.267 3.087 3.087 0 0 0-1.266.158l-.95.475c-.159.159-.475.317-.634.634-.158.158-.316.475-.475.633v-1.583h-3.8v11.4h3.8v-6.334a2.008 2.008 0 0 1 .159-.95 2.327 2.327 0 0 1 .791-.95 1.231 1.231 0 0 1 1.267-.316 1.543 1.543 0 0 1 1.425.633 4.216 4.216 0 0 1 .475 1.9v6.017zM15.25 15.25a2.358 2.358 0 0 0 .633-1.425 1.72 1.72 0 0 0-.633-1.425 2.033 2.033 0 0 0-1.583-.633 2.033 2.033 0 0 0-1.584.633 2.358 2.358 0 0 0-.633 1.425 1.72 1.72 0 0 0 .633 1.425 1.519 1.519 0 0 0 1.584.475 1.914 1.914 0 0 0 1.583-.475zm.317 13.458v-11.4h-3.8v11.4z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .linkedin a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M39 20A19 19 0 1 1 20 1a18.823 18.823 0 0 1 16.625 9.975A17.881 17.881 0 0 1 39 20zm-9.658 8.708v-6.491a4.86 4.86 0 0 0-1.267-3.8 3.442 3.442 0 0 0-3.167-1.267 3.087 3.087 0 0 0-1.266.158l-.95.475c-.159.159-.475.317-.634.634-.158.158-.316.475-.475.633v-1.583h-3.8v11.4h3.8v-6.334a2.008 2.008 0 0 1 .159-.95 2.327 2.327 0 0 1 .791-.95 1.231 1.231 0 0 1 1.267-.316 1.543 1.543 0 0 1 1.425.633 4.216 4.216 0 0 1 .475 1.9v6.017zM15.25 15.25a2.358 2.358 0 0 0 .633-1.425 1.72 1.72 0 0 0-.633-1.425 2.033 2.033 0 0 0-1.583-.633 2.033 2.033 0 0 0-1.584.633 2.358 2.358 0 0 0-.633 1.425 1.72 1.72 0 0 0 .633 1.425 1.519 1.519 0 0 0 1.584.475 1.914 1.914 0 0 0 1.583-.475zm.317 13.458v-11.4h-3.8v11.4z' fill='%23017bb6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--left-social .instagram a {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 38.05A18.05 18.05 0 1 1 38.05 20 18.05 18.05 0 0 1 20 38.05zm4.061-27.827H15.94c-5.596 0-5.566 5.565-5.566 5.565v8.123c0 5.565 5.566 5.565 5.566 5.565h8.122c5.566 0 5.566-5.565 5.566-5.565v-8.123c0-5.565-5.566-5.565-5.566-5.565z'/%3E%3Cpath d='M27.822 23.76a3.595 3.595 0 0 1-3.911 3.911h-7.822a3.595 3.595 0 0 1-3.91-3.91v-7.822a3.595 3.595 0 0 1 3.91-3.911h7.822a3.595 3.595 0 0 1 3.91 3.91zM24.964 20A4.964 4.964 0 1 0 20 24.964 4.964 4.964 0 0 0 24.964 20zM20 23.31A3.31 3.31 0 1 1 23.31 20 3.324 3.324 0 0 1 20 23.31zm5.265-9.778a1.203 1.203 0 1 0 1.203 1.203 1.203 1.203 0 0 0-1.203-1.203z'/%3E%3Ccircle cx='20' cy='20' r='3.309' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 25px;
+  width: 25px;
+}
+
+.pageFooter--left-social .instagram a:hover {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 38.05A18.05 18.05 0 1 1 38.05 20 18.05 18.05 0 0 1 20 38.05zm4.061-27.827H15.94c-5.596 0-5.566 5.565-5.566 5.565v8.123c0 5.565 5.566 5.565 5.566 5.565h8.122c5.566 0 5.566-5.565 5.566-5.565v-8.123c0-5.565-5.566-5.565-5.566-5.565z' fill='%23c84274'/%3E%3Cpath d='M27.822 23.76a3.595 3.595 0 0 1-3.911 3.911h-7.822a3.595 3.595 0 0 1-3.91-3.91v-7.822a3.595 3.595 0 0 1 3.91-3.911h7.822a3.595 3.595 0 0 1 3.91 3.91zM24.964 20A4.964 4.964 0 1 0 20 24.964 4.964 4.964 0 0 0 24.964 20zM20 23.31A3.31 3.31 0 1 1 23.31 20 3.324 3.324 0 0 1 20 23.31zm5.265-9.778a1.203 1.203 0 1 0 1.203 1.203 1.203 1.203 0 0 0-1.203-1.203z' fill='%23c84274'/%3E%3Ccircle cx='20' cy='20' r='3.309' fill='none'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.pageFooter--right {
+  float: left;
+}
+
+.pageFooter--right-topLine {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+
+.pageFooter--right-topLine .return {
+  margin-bottom: 13px;
+  text-transform: uppercase;
+  width: 38px;
+}
+
+.pageFooter--right-topLine .full {
+  display: none;
+}
+
+.pageFooter--right-links ul {
+  float: left;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  list-style: none;
+}
+
+.pageFooter--right-links li {
+  margin-bottom: 10px;
+  padding: 0;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    &:hover {
+      color: #ccc;
+    }
+    &:visited{
+      color: @gray;
+    }
+  }
+}
+
+.invert .pageFooter--right-links li { 
+  a {
+    color: #222;
+  }
+  a:hover {
+    color: @brand;
+  }
+  &:visited{
+    color: @gray;
+  }
+}
+
+.pageFooter--right-links .section {
+  -webkit-column-count: 2;
+  column-count: 2;
+  margin: 11px 0 18px;
+}
+
+.pageFooter--right-links .footer-title {
+  margin-bottom: 4px;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.pageFooter--branding {
+  border-top: 1px solid #999;
+  float: left;
+  padding-top: 17px;
+  width: 100%;
+  color: #fff;
+}
+
+.invert .pageFooter--branding {
+  color: #000;
+}
+
+.pageFooter--branding-logo {
+  height: 11px;
+  width: 114px;
+}
+
+.pageFooter--branding-copyright {
+  display: inline-block;
+  width: 100%;
+}
+@media (min-width:48rem) {
+  .pageFooter {
+    padding: 36px 64px;
+  }
+
+  .pageFooter--wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .pageFooter--left {
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-right: 64px;
+  }
+
+  .pageFooter--right-topLine {
+    border-bottom: 1px solid #999;
+    margin-bottom: 14px;
+    position: static;
+    text-align: right;
+
+    a {
+      color: #222;
+    }
+  }
+
+  .pageFooter--right-topLine .full {
+    display: inline-block;
+  }
+
+  .pageFooter--right-links .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .pageFooter--right-links .wrapper > li {
+    -webkit-box-flex: 0;
+    padding-bottom: 0;
+  }
+
+  .pageFooter--right-links .section {
+    -webkit-column-count: 1;
+    column-count: 1;
+    margin-bottom: 0;
+    margin-right: 5px;
+  }
+
+  .pageFooter--right-links .section > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .pageFooter--branding {
+    border-top: none;
+    bottom: 36px;
+    position: absolute;
+    width: 216px;
+  }
+}
+@media (min-width:58rem) {
+  .pageFooter {
+    padding: 36px;
+  }
+
+  .pageFooter--right {
+    width: 600px;
+  }
+}
+@media (min-width:88.75rem) {
+  .pageFooter {
+    padding: 36px 0;
+  }
+
+  .pageFooter--branding {
+    bottom: 0;
+  }
+}
+
+.pageFooter {
+  font-family: @sans-light;
+  font-variant-numeric: lining-nums;
+  font-weight: 300;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke: 0.45px rgba(0,0,0,.1);
+  color: #000;
+  font-size: 12px;
+  line-height: 1.17;
+}
+
+.pageFooter .footer-title {
+  font-family: @sans-bold;
+  font-variant-numeric: lining-nums;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: 1px;
+  color: #fff;
+}
+
+.pageFooter.invert .footer-title {
+  color: #000;
+}
+
+.pageFooter .footer-title,
+.pageFooter .return {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-stroke: 0.45px rgba(0,0,0,.1);
+}
+
+.pageFooter .return {
+  font-family: @sans-med;
+  font-variant-numeric: lining-nums;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+
+#scrollTop {
+  color: #222;
+  min-width: 120px;
+  cursor: pointer;
+  font-size: 12px;
+}
+@media (min-width: 88.75rem) {
+  .lock {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0 auto !important;
+    position: relative !important;
+    padding: 0 60px;
+    width: 1420px!important;
+  }
+}

package/example/src/styles/modules/ad.module.less

@@ -0,0 +1,21 @@
+@import (less) '../values.less';
+
+.ad {
+  background-color: #F5F5F5;
+  padding: 0 0 20px;
+  text-align: center;
+  width: 100%;
+}
+
+.adhed {
+  background-color: #F5F5F5;
+  color: #111;
+  display: inline-block;
+  font-family: @sans-light;
+  font-size: 0.7em;
+  margin: 5px 0;
+  padding: 0px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}

package/example/src/styles/modules/ai2html.module.less

@@ -0,0 +1,19 @@
+@import (less) '../values.less';
+.container {
+	margin: @step-3 auto;
+	padding: 0 @step--1;
+	@media @tablet {
+		max-width: 720px;
+	}
+}
+.sideBar {
+	float: left;
+	padding-right: @step-2;
+	margin: @step-3 2% @step-3 10%;
+	@media @tablet {
+		float: none;
+		width: 100%;
+		padding: 0px;
+		margin: @step-3 auto;
+	}
+}

package/example/src/styles/modules/button.module.less

@@ -0,0 +1,94 @@
+@import (less) '../values.less';
+
+.btn-primary {
+  appearance: none;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  transition: all 0.1s linear;
+  color: #fff;
+  background-color: @brand;
+  border: 1px solid @brand;
+  font-family: @sans-bold;
+  user-select: none;
+  font-size: @step--1;
+  line-height: unset;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  align-items: center;
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: @step-4;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100px;
+
+  &:hover,
+  &:focus {
+    color: darken(@brand, 40%);
+    background-color: fade(@brand, 50%);
+    border: 1px solid darken(@brand, 10%);
+  }
+}
+
+.btn-secondary {
+  appearance: none;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  transition: all 0.1s linear;
+  color: @brand;
+  background-color: @off-white;
+  border: 1px solid @brand;
+  font-family: @sans-bold;
+  user-select: none;
+  font-size: @step--1;
+  line-height: unset;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  align-items: center;
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: @step-4;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100px;
+
+  &:hover,
+  &:focus {
+    color: @off-white;
+    background-color: @brand;
+    border-color: darken(@brand, 10%);
+  }
+}
+
+.btn-disabled {
+  appearance: none;
+  background-repeat: no-repeat;
+  cursor: default;
+  pointer-events: none;
+  outline: none;
+  padding: 0;
+  transition: all 0.1s linear;
+  color: @gray;
+  background-color: @off-white;
+  border: 1px solid @light-gray;
+  font-family: @sans-bold;
+  user-select: none;
+  font-size: @step--1;
+  line-height: unset;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  align-items: center;
+  border-radius: 2px;
+  box-sizing: border-box;
+  height: @step-4;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100px;
+}

package/example/src/styles/modules/byline.module.less

@@ -0,0 +1,11 @@
+@import (less) '../values.less';
+
+.byline {
+  font-family: @sans-med;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &:hover {
+    color: @brand;
+  }
+}

package/example/src/styles/modules/creditline.module.less

@@ -0,0 +1,12 @@
+@import (less) "../values.less";
+
+.link {
+  font-family: @sans-med;
+}
+
+.text {
+  margin-bottom: @step--2;
+  @media @mobile {
+    font-size: @step--1;
+  }
+}

package/example/src/styles/modules/credits.module.less

@@ -0,0 +1,7 @@
+@import (less) "../values.less";
+
+.title {
+  margin-top: @step-0;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

package/example/src/styles/modules/creditssection.module.less

@@ -0,0 +1,17 @@
+@import (less) "../values.less";
+
+.section {
+  margin: @step-3 auto;
+  text-align: center;
+  font-size: @step-0;
+  font-family: @sans-light;
+}
+
+.hed {
+  font-family: @sans-med;
+  font-size: @step-1;
+  color: @dark-gray;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0;
+}

package/example/src/styles/modules/dropcap.module.less

@@ -0,0 +1,18 @@
+@import (less) '../values.less';
+
+.dropcap {
+  float: left;
+  font-size: 100px;
+  line-height: .75em;
+  font-family: @hed;
+  margin-right: .115em;
+  color: #000;
+  text-transform: uppercase;
+}
+
+@media @tablet {
+	.dropcap {
+	  font-size: 80px;
+	  line-height: .75em;
+	}
+}

package/example/src/styles/modules/geocoder.module.less

@@ -0,0 +1,79 @@
+@import (less) "../values.less";
+
+//geocoder-------------------------------
+.wrapper {
+  z-index: 500;
+  position: relative;
+  max-width: 96vw;
+  padding: 0;
+  margin: @step-3 auto;
+  @media (orientation: landscape) {
+    max-width: 60ch;
+  }
+}
+
+.address-input {
+  width: 100%;
+  margin-top: @step--1;
+  display: flex;
+
+  input {
+    flex: 1 0 50%;
+    height: 30px;
+    font-family: @sans-light;
+    font-size: @step--1;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border: 2px solid #ccc;
+    padding-left: calc(@step--2 / 4);
+    font-variant-numeric: lining-nums;
+  }
+
+  button {
+    height: 30px;
+    width: 88px;
+    padding: calc(@step--2 / 2);
+    font-size: @step--1;
+    border: none;
+    border-radius: 3px;
+    background-color: #1b1b1b;
+    color: #fff;
+    font-family: 'National Medium', 'Source Sans Pro', Arial, Helvetica,
+      sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 1;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+
+    img {
+      max-height: 100%;
+    }
+
+    &:hover {
+      background-color: @brand;
+    }
+
+    &:active {
+      background-color: @dark-gray;
+      color: @white;
+    }
+  }
+}
+
+.result-box {
+  position: absolute;
+  width: 100%;
+}
+
+.result {
+  border: 1px solid @black;
+  padding: calc(@step--2 / 2);
+  background-color: @light-gray;
+  font-family: @sans-light;
+  line-height: 1.2;
+
+  &:not(.empty):hover {
+    background-color: @gray;
+  }
+}