test-kitchen 1.23.2 → 1.23.3

data/docs/themes/kitchen/static/sass/typography/_code.scss

@@ -0,0 +1,72 @@
+code {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 1px solid $ash;
+  border-radius: $border-radius-base;
+  padding: rem-calc(4px 12px);
+}
+
+
+a {
+  code {
+    color: $blue-darker;
+  }
+}
+
+pre {
+  color: $charcoal;
+  background-color: $sidebargray;
+  border: 1px solid $ash;
+  border-radius: $border-radius-base;
+  padding: rem-calc(4px 8px);
+  margin-bottom: rem-calc(24);
+
+  code {
+    background-color: transparent;
+    border: none;
+    word-wrap: break-word;
+    padding: 0px;
+  }
+
+  // customization for CodeMirror's line numbers
+  .line-numbers {
+    margin-right: rem-calc(16px);
+    user-select: none;
+  }
+}
+
+.code {
+  background-color: $slate;
+  color: $orange;
+  font-family: $font-family-monospace;
+
+  .output {
+    color: $sidebargray;
+  }
+}
+
+.codeblock {
+  .title {
+    font-weight: bold;
+  }
+}
+
+.browser {
+  .url {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    top: 18px;
+    left: 0px;
+
+    > span {
+      padding: 1px 80px;
+      border-radius: $border-radius-base;
+      color: $white;
+      background: $slate-light;
+
+    }
+  }
+}
+
+
+@import "chroma";

data/docs/themes/kitchen/static/sass/typography/_headers.scss

@@ -0,0 +1,90 @@
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6,{
+	margin: 0;
+
+	// Adjust the anchor position to account for the fixed header
+	&:before {
+		content: '';
+		display: block;
+		position: relative;
+		width: 0px;
+		height: rem-calc(100px);
+		margin-top: rem-calc(-100px);
+	}
+
+	& > a {
+		color: inherit;
+		text-decoration: none;
+
+		&:hover {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+}
+
+h1, .h1 {
+	@include muli();
+	line-height: 1.25;
+	font-weight: normal;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: none;
+	margin-bottom: 26px;
+}
+
+h2, .h2 {
+	@include muli();
+	line-height: 1.25;
+	font-weight: normal;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: none;
+	margin-bottom: 12px;
+	margin-top: rem-calc(24px);
+}
+
+h3, .h3 {
+	@include muli();
+	line-height: 1.33;
+	font-weight: normal;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: none;
+	margin-bottom: 17px;
+	margin-top: rem-calc(48px);
+}
+
+h4, .h4 {
+	@include muli();
+	line-height: 1.36;
+	font-weight: $bold;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: none;
+	margin-bottom: 7px;
+}
+
+h5, .h5 {
+	@include muli();
+	line-height: 1.67;
+	font-weight: $bold;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: uppercase;
+	margin-bottom: 8px;
+}
+
+h6, .h6, {
+	@include muli();
+	line-height: 1.25;
+	font-weight: $bold;
+	letter-spacing: normal;
+	color: $charcoal;
+	text-transform: uppercase;
+	margin-bottom: 8px;
+}

data/docs/themes/kitchen/static/sass/typography/_links.scss

@@ -0,0 +1,127 @@
+.button {
+	@include button();
+
+	@include breakpoint(small down) {
+		width: 100%;
+		display: block;
+
+		& + .button {
+			margin: rem-calc(16 0);
+		}
+	}
+
+	&.blue {
+		background: $blue-darker;
+		color: $white;
+
+		&:hover {
+			background-color: transparent;
+		}
+
+		body:not(.touch-device) & {
+			&:hover {
+				background-color: transparent;
+				color: $blue-darker;
+			}
+		}
+
+
+		&:visited {
+			color: $white;
+
+			&:hover {
+				background-color: none;
+
+				body:not(.touch-device) & {
+					background-color: transparent;
+					color: $blue-darker;
+				}
+
+			}
+		}
+	}
+
+	&.white {
+		background: white;
+		color: $orange-darker;
+
+		&:hover {
+			background-color: transparent;
+		}
+
+		body:not(.touch-device) & {
+			&:hover {
+				background-color: transparent;
+				color: $orange;
+			}
+		}
+
+
+		&:visited {
+			color: $orange-darker;
+
+			&:hover {
+				background-color: none;
+
+				body:not(.touch-device) & {
+					background-color: transparent;
+					color: $orange;
+				}
+
+			}
+		}
+	}
+}
+
+.arrow{
+	&-right {
+		position: relative;
+
+		&:after {
+			@include fa-icon;
+			@extend .fas;
+			content: fa-content($fa-var-angle-right);
+			margin-left: 5px;
+			font-size: 10px;
+			position: absolute;
+			bottom: 18px;
+			font-size: 10px;
+		}
+	}
+
+	&-left {
+		position: relative;
+
+		&:before {
+			@include fa-icon;
+			@extend .fas;
+			content: fa-content($fa-var-angle-left);
+			margin-right: 5px;
+			font-size: 10px;
+			position: absolute;
+			bottom: 18px;
+			font-size: 10px;
+		}
+	}
+}
+
+.cta {
+	@extend .arrow-right;
+	padding: 0;
+	padding-right: 10px;
+	text-align: left;
+	font-weight: 700;
+	width: auto;
+	color: $orange-darker;
+
+	&:after {
+		bottom: 7px;
+	}
+
+	body:not(.touch-device) & {
+		&:hover {
+			background-color: transparent;
+			color: $orange;
+		}
+	}
+}

data/docs/themes/kitchen/static/sass/typography/_lists.scss

@@ -0,0 +1,155 @@
+.col-content,
+.content {
+  ul, ol {
+    margin-bottom: 28px;
+
+    li {
+      @extend .p;
+      margin-bottom: 16px;
+    }
+  }
+
+  ol {
+    padding-left: rem-calc(16);
+
+    > li > ol {
+      list-style-type: lower-alpha;
+    }
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      padding-left: 21px;
+
+      &:before {
+        @include fa-icon;
+        @extend .fas;
+        content: fa-content($fa-var-circle);
+        margin-left: -22px;
+        vertical-align: middle;
+        font-size: 6px;
+        color: $blue;
+        position: relative;
+        padding-right: 14px;
+        top: -1px;
+      }
+    }
+
+    &.reset {
+      @include reset-ul();
+    }
+
+    &.bordered-items {
+      @extend ul, .reset;
+      margin-bottom: 50px;
+      margin-top: rem-calc(24);
+
+      li {
+        padding-left: rem-calc(16);
+        position: relative;
+        margin-bottom: rem-calc(24);
+
+        &:before {
+          display: block;
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 2px;
+          background-color: $blue;
+          margin: 0;
+          padding: 0;
+        }
+
+        .title {
+          @extend .p;
+          text-transform: uppercase;
+          margin-bottom: rem-calc(8);
+          font-weight: bold;
+          font-size: rem-calc(14);
+        }
+
+        .desc {
+          @extend .p;
+          margin-bottom: 0;
+          color: rgba($white, 0.65);
+          font-size: rem-calc(14);
+        }
+      }
+    }
+  }
+
+  ol.styled-nums,
+  div.styled-nums > ol {
+    @extend ul;
+    padding: 0;
+    margin-left: 0 !important;
+    margin-top: rem-calc(48);
+
+    @include breakpoint(large) {
+      margin-top: rem-calc(8);
+    };
+
+    li {
+      counter-increment: item;
+      margin-bottom: rem-calc(32);
+      padding-top: rem-calc(48);
+      padding-left: rem-calc(8);
+      position: relative;
+
+      @include breakpoint(medium) {
+        padding-left: rem-calc(40);
+        padding-top: 0;
+      }
+
+      &:before {
+        content: counter(item);
+        font-size: inherit;
+        font-family: inherit;
+        width: 32px;
+        height: 32px;
+        background: $blue;
+        border-radius: 50%;
+        color: $white;
+        text-align: center;
+        font-weight: 600;
+        line-height: 32px;
+        padding: 0;
+        display: inline-block;
+
+        @include breakpoint(small down) {
+          position: absolute;
+          top: 0;
+          left: 8px;
+          margin: 0;
+        }
+
+        @include breakpoint(medium) {
+          margin-left: -48px;
+          margin-right: 16px;
+        }
+
+      }
+    }
+
+    + .cta {
+      @include breakpoint(medium) {
+        margin-left: 48px;
+      }
+    }
+  }
+
+  dl {
+    dt {
+      margin-bottom: rem-calc(4px);
+    }
+
+    dd {
+      margin-bottom: rem-calc(16px);
+      margin-left: rem-calc(16px);
+    }
+  }
+}

data/docs/themes/kitchen/static/sass/typography/_prose.scss

@@ -0,0 +1,29 @@
+.prose {
+  h1, h2, h3, h4, h5, h6 {
+    .svg-inline--fa {
+      padding-left: rem-calc(10px);
+      font-size: 90%;
+    }
+  }
+
+  > p, .p {
+    @include base-type();
+    margin-bottom: 28px;
+    color: $charcoal;
+
+    &.intro {
+      font-size: 20px;
+      line-height: 1.6;
+
+      &-medium {
+        font-size: 22px;
+        line-height: 1.45;
+      }
+    }
+
+    &.desc {
+      font-size: 16px;
+      line-height: 1.5;
+    }
+  }
+}