qpp-style 2.0.1 → 2.0.2-sm.2

package/styles/components/sidebar/_links.scss

@@ -1,269 +0,0 @@
-/*
-Inline and back links
- */
-.sidebar {
-	.link-inline,
-	.link-back {
-		@include typography('Rubik', 16px, 22px, $color-teal-light);
-		@include hover($color-white);
-		align-items: center;
-		display: flex;
-		fill: $color-teal-light;
-		&.freeze {
-			color: $color-white;
-			fill: $color-white;
-		}
-	}
-	.link-inline {
-		padding: 10px 30px;
-		.left-icon {
-			height: 25px;
-			margin-right: 15px;
-			width: 25px;
-		}
-		&.one-line{
-			padding: 10px 15px 10px 30px;
-		}
-		&[disabled] {
-			color: $color-gray-dark;
-			.left-icon,
-			.right-icon {
-				fill: $color-gray-dark;
-			}
-		}
-	}
-	.link-back {
-		padding: 25px 30px 0;
-		.left-icon {
-			height: 12px;
-			margin-right: 15px;
-			width: 12px;
-		}
-		&:hover {
-			& > svg {
-				animation: left-bounce .6s;
-			}
-		}
-	}
-}
-
-/*
-Collapsed links (when the sidebar is collapsed)
- */
-.sidebar-content {
-	.link-collapsed {
-		align-items: center;
-		display: flex;
-		fill: $color-teal-light;
-		justify-content: center;
-		padding: 15px 0;
-		.left-icon {
-			height: 25px;
-			width: 25px;
-		}
-		&.freeze {
-			color: $color-white;
-			fill: $color-white;
-		}
-		&[disabled] {
-			.left-icon{
-				fill: $color-gray-dark;
-			}
-		}
-	}
-}
-
-/*
-Slide-out links
- */
-.sidebar-content {
-	.link-slide-out {
-		.switcher {
-			@include typography('Rubik', 14px, 16px, $color-gray-medium);
-			align-items: center;
-			display: flex;
-			fill: $color-gray-medium;
-			flex-direction: row;
-			svg {
-				height: 12px;
-				width: 12px;
-			}
-			.link-body {
-				flex-grow: 1;
-			}
-			.left-icon {
-				margin-right: 10px;
-			}
-			.right-icon {
-				transition: transform .6s;
-				&.rotated {
-					transform: rotate(180deg);
-				}
-			}
-			&:hover {
-				& > .right-icon {
-					animation: right-bounce .6s;
-				}
-			}
-		}
-		.switcher-content {
-			@include typography('Rubik', 16px, 22px, $color-teal-light);
-			background: $color-slate-dark;
-			height: 100%;
-			opacity: 0;
-			padding: 0 30px;
-			position: absolute;
-			top: 0;
-			left: 0;
-			transition: z-index .6s step-start, opacity .6s step-end, left .6s;
-			width: 300px;
-			z-index: -1;
-			li {
-				padding-bottom: 15px;
-				a {
-					@include typography('Rubik', 16px, 22px, $color-teal-light);
-				}
-			}
-			.practices-title {
-				@include typography('Rubik', 18px, 26px, $color-white);
-				font-weight: 500;
-				padding: 23px 0;
-			}
-			&.open {
-				left: 300px;
-				opacity: 1;
-				transition: z-index .6s step-end, left .6s;
-				z-index: 1;
-			}
-		}
-	}
-}
-
-/*
-Drawer links
- */
-.sidebar-content {
-	.link-drawer {
-		display: flex;
-		flex-direction: column;
-		button {
-			background: transparent;
-			border: none;
-		}
-		.link-body {
-			align-items: center;
-			display: flex;
-			flex-grow: 1;
-		}
-		.right-icon {
-			height: 12px;
-			transition: transform .6s;
-			width: 12px;
-		}
-		.rotated {
-			transform: rotate(180deg);
-		}
-		.drawer {
-			background: $color-slate-dark;
-			height: 0;
-			opacity: 0;
-			overflow: hidden;
-			padding: 0;
-			transition: opacity .25s;
-			li {
-				padding: 2px 0;
-				margin-left: 58px;
-			}
-			a {
-				@include typography('Rubik', 14px, 22px, $color-teal-light);
-			}
-			.active-link {
-				color: $color-teal-light;
-				list-style: disc;
-				& a {
-					color: $color-white;
-				}
-			}
-			&.open {
-				height: auto;
-				opacity: 1;
-				padding: 0 30px;
-				transition: opacity .25s;
-			}
-		}
-	}
-}
-
-/*
-Collapse/Expand link (button on bottom of the sidebar)
- */
-.sidebar {
-	.link-collapse,
-	.link-expand {
-		align-items: center;
-		background: transparent;
-		border: none;
-		border-top: 1px solid $color-gray-medium;
-		display: flex;
-		fill: $color-gray-medium;
-		justify-content: center;
-		text-transform: uppercase;
-		.left-icon {
-			height: 40px;
-			width: 40px;
-		}
-	}
-	.link-collapse {
-		@include typography('Rubik', 14px, 0, $color-gray-medium);
-		padding: 20px 0;
-		.left-icon {
-			margin-right: 15px;
-		}
-		&.alt-style {
-			background: $color-slate-dark;
-		}
-	}
-	.link-expand {
-		@include typography('Rubik', 14px, 14px, $color-gray-medium);
-		flex-direction: column;
-		padding:6px 0 20px;
-		.left-icon {
-			margin-right: 0;
-		}
-		&.alt-style {
-			background: $color-slate-dark;
-		}
-	}
-}
-
-/*
-Active link
- */
-.sidebar {
-	.active {
-		background: $color-slate-dark;
-		border-left: solid 3px $color-teal-light;
-		color: $color-white;
-		fill: $color-white;
-		padding-left: 27px;
-		&.link-collapsed {
-			padding-left: 0;
-		}
-		&.light {
-			background: $color-blue-dark;
-			border-left: solid 3px $color-teal-light;
-			color: $color-white;
-			fill: $color-white;
-		}
-		&[disabled] {
-			background: none;
-			border-left: 0;
-			color: $color-gray-dark;
-			fill: $color-gray-dark;
-			padding-left: 30px;
-			&.link-collapsed {
-				padding-left: 0;
-			}
-		}
-	}
-}

package/styles/components/sidebar/_sidebar.scss

@@ -1,107 +0,0 @@
-/*
-General sidebar styles
- */
-.sidebar {
-    background: $color-blue-dark;
-    box-shadow: 4px 0 10px 0 transparentize($color-black, .7);
-    color: $color-white;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    position: relative;
-    transition: width .6s;
-    width: 300px;
-    a {
-        text-decoration: none;
-    }
-    hr {
-        border-top: 1px solid transparentize($color-white, 0.8);
-        height: 1px;
-        margin: 25px auto;
-        width: 240px;
-    }
-    ul {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-    svg {
-        position: relative;
-    }
-    .SVGInline {
-        display: none;
-    }
-    &.closed {
-        width: 90px;
-    }
-    .alt-style {
-        background: $color-slate-dark;
-        .alt-style-header {
-            background: $color-blue-dark;
-            padding-bottom: 25px;
-        }
-        .alt-style-nav {
-            padding-bottom: 25px;
-        }
-    }
-}
-
-/*
-Sidebar content
- */
-.sidebar {
-    .sidebar-content {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        overflow-x: hidden;
-        transition: overflow-x .6s;
-        .label {
-            @include typography('Rubik', 20px, 26px, $color-white);
-            padding: 30px 25px 20px;
-            text-align: left;
-        }
-    }
-}
-
-/*
-Sidebar chart
- */
-.sidebar {
-    .chart-title {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        p {
-            margin: 0;
-        }
-        .title {
-            @include typography('Rubik', 16px, 22px, $color-white);
-            text-transform: uppercase;
-        }
-        .disclaimer {
-            @include typography('Rubik', 14px, 20px, transparentize($color-white, .2));
-            align-items: center;
-            display: flex;
-            padding: 5px 0 10px;
-            svg {
-                height: 20px;
-                width: 20px;
-            }
-            .left-icon {
-                fill: transparentize($color-white, .2);
-                margin-right: 10px;
-            }
-            .right-icon {
-                fill: $color-teal-light;
-                margin-left: 10px;
-            }
-        }
-        .timestamp {
-            @include typography('Rubik', 13px, 20px, $color-white);
-            padding: 5px 0 20px;
-            text-transform: uppercase;
-        }
-    }
-}

package/styles/guide/_layout.scss

@@ -1,120 +0,0 @@
-$space: 20px;
-
-/* Layout */
-body {
-  color: $text-color;
-  padding-top: 0;
-}
-
-.footer {
-  font-size: 16px;
-  padding-top: 19px;
-  color: #777;
-  background-color: #fff;
-  border-top: 1px solid #e5e5e5;
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 730px;
-  }
-}
-.container-narrow > hr {
-  margin: 30px 0;
-}
-
-hr {
-  margin-bottom: 2rem;
-}
-
-/* Type */
-#h1, #h2, #h3, #h4, #h5, #h6 {
-  margin-top: $space/2;
-  margin-bottom: 1.25em;
-  text-align: center;
-  color: $brand-primary-dark;
-  font-weight: 400;
-}
-
-p {
-  &.arial {
-    font-family: 'Arial', sans-serif;
-  }
-}
-
-/* Nav */
-.header {
-  padding: $space 0;
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: $space*2;
-  .nav {
-    padding: 25px 0;
-    a {
-      font-weight: 500;
-      font-size: 16px;
-      color: $brand-primary-dark;
-      padding: 0 10px;
-      text-decoration: none;
-    }
-  }
-  img {
-    width: 250px;
-    margin: 10px 0;
-  }
-}
-
-.nav-pills>li>a.active, .nav-pills>li>a.active:focus, .nav-pills>li>a.active:hover {
-  background: none;
-  color: $brand-secondary-dark;
-}
-.nav>li>a:focus, .nav>li>a:hover {
-  background: none;
-  color: $brand-secondary-dark;
-  text-decoration: none;
-}
-
-/* Elements */
-
-.circle {
-  margin: 0 auto $space auto;
-  width: 75px;
-  height: 75px;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  border-radius: 50%;
-}
-
-.description {
-  margin-bottom: $space*2;
-}
-
-.row-label {
-  margin: 25px 0;
-}
-
-.label {
-  color: $color-gray-light;
-  font-size: 16px;
-}
-
-/* Colors Page */
-.colors {
-  font-size: 16px;
-}
-
-/* Type Page */
-.headings {
-  .col-12 {
-    margin-bottom: $space*2;
-  }
-}
-
-.container>h1, .container>h2, .container>h3, .container>h4, .container>h5, .container>h6 {
-  margin-bottom: $space*2;
-  text-align: center;
-}
-
-select.form-control,
-textarea.form-control {
-	height: 110px;
-}

package/styles/guide/sidebar-demo.css

@@ -1,121 +0,0 @@
-@charset "UTF-8";
-/* CSS Document */
-
-/* apply a natural box layout model to all elements, but allowing components to change */
-html {
-  box-sizing: border-box;
-}
-html,
-body {
-  overflow: hidden;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-body {
-  background-color: #196e76;
-  line-height: 1.2;
-}
-
-#header{
- background-color: #DCDCDC;
-    border-bottom: 1px solid #B2B2B2;
-    width: 100%;
-    height: 60px;
-    padding: 25px 20px 20px 20px;
-    color: #000000;
-
-}
-/**
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    contenteditable attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that are clearfixed.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-.cf:before,
-.cf:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
-}
-
-.cf:after {
-    clear: both;
-}
-
-/**
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-.cf {
-    *zoom: 1;
-}
-.scroll {
-  height: 350px;
-  overflow: scroll;
-  background-color: #e7ebef;
-  padding: 0 0px;
-  width: 100%;
-  max-width: 550px;
-  margin-right: auto;
-  margin-left: auto;
-  margin-top: 20px;
-  margin-bottom: 200px;
-  overflow-x: hidden;
-}
-.wrapper {
-  margin-top: 0px;
-}
-.content {
-  padding: 0 0px;
-  width: 320px;
-}
-.content h1 {
-  margin-top: 0;
-}
-.content p,
-.sidebar p{
-  font-family: "BLOKKNeue-Regular";
-}
-.sidebar {
-  padding: 20px;
-  width: 170px;
-  height: 350px;
-  background-color: #21344C;
-  color: #fff;
-  overflow-y: auto;
-  margin: 0px 20px 0px 0;
-}
-.sidebar h3 {
-  margin: 0;
-}
-.content,
-.sidebar {
-  float: left;
-}
-
-.footer{
-    width:170px;
-    height:30px;
-    background-color: #DCDCDC;
-    color:#000;
-    font-size: 8px;
-    border: 1px solid #B2B2B2;
-    padding: 25px 20px 20px 20px;
-}
-
-
-/* The sticky */
-.sidebar {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-}
-
-.footer {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 320px;
-}