diff --git a/UI/WebServerResources/scss/components/_components/_articles-list.scss b/UI/WebServerResources/scss/components/_components/_articles-list.scss
deleted file mode 100755
index 431efa0d0..000000000
--- a/UI/WebServerResources/scss/components/_components/_articles-list.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
-*
-* Articles list
-*
-**/
-
-.articles-list {
- padding-left: 0;
-}
-
-.articles-list__item {
-
- padding-bottom: $lineHeight * 2;
-
- &:last-child {
- padding-bottom: $lineHeight * 2 + 1;
- }
-
- padding-left: 0;
-
- &::before {
- content: "";
- display: block;
- width: 40%;
- height: 1px;
- box-shadow: inset 0 1px 0 0 $colorGrayKeyline;
- margin-right: 0;
- margin-left: 30%;
- }
-
- h3 {
- a:hover {
- text-decoration: none;
- }
- }
-
- p {
- margin-top: $lineHeight;
- margin-bottom: $lineHeight;
- }
-
- &:first-child {
- padding-top: 0;
-
- @include medium {
- padding-top: $lineHeight - 2;
- }
-
- &::before {
- display: none;
- }
- }
-
-}
-
diff --git a/UI/WebServerResources/scss/components/_components/_breadcrumb.scss b/UI/WebServerResources/scss/components/_components/_breadcrumb.scss
deleted file mode 100755
index 5a8c7dbbc..000000000
--- a/UI/WebServerResources/scss/components/_components/_breadcrumb.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
-*
-* Breadcrumb
-*
-**/
-
-.breadcrumbs {
- display: none;
- @include medium {
- display: block;
- }
-
- position: relative;
- z-index: 1;
-}
-
-.breadcrumbs p {
- @include type--small;
- padding-top: $lineHeight;
-}
-
-.breadcrumbs__link {
- @include type--small;
- color: black;
- font-weight: 400;
- padding-top: 0;
-
- @include medium {
- padding-top: 0;
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_button.scss b/UI/WebServerResources/scss/components/_components/_button.scss
deleted file mode 100755
index 349566d5d..000000000
--- a/UI/WebServerResources/scss/components/_components/_button.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
-*
-* Button
-*
-**/
-
-.button {
- display: inline-block;
- padding: (($lineHeight / 2) - 1) 32px;
- margin-bottom: $lineHeight / 2;
- margin-top: $lineHeight / 2;
- min-height: $lineHeight;
-
- text-align: center;
-
- font-family: $fontHighlight;
- font-weight: 600;
- text-decoration: none;
-
- outline: 0;
-
- transition: none;
-
- &:hover {
- background: #4d4d4d;
- color: #ffffff;
- border: 1px solid #4d4d4d;
- text-decoration: none;
- }
-}
-
-// Mixin to create buttons
-@mixin style-button($color, $textColor, $isInverted: false) {
-
- background: $color;
- color: $textColor;
- border: 1px solid darken($color, 10%);
-
- @if $isInverted { border-color: transparent;}
-}
-
-
-.button--primary {
- @extend .button;
- @include style-button(#4285f4, #ffffff);
-}
-
-.button--secondary {
- @extend .button;
- @include style-button(#ffffff, $colorBlue);
-}
-
-.button--secondary-variation {
- @extend .button;
- @include style-button(#ffffff, $colorBlue, true);
-}
diff --git a/UI/WebServerResources/scss/components/_components/_column-list.scss b/UI/WebServerResources/scss/components/_components/_column-list.scss
deleted file mode 100755
index 1e8fb9afa..000000000
--- a/UI/WebServerResources/scss/components/_components/_column-list.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
-*
-* Column list
-*
-**/
-
-.columns-list-wrapper {
- @include wide {
- margin-right: $mediumColWidth;
- }
-
-}
-
-.list--columns {
- border-bottom: 1px solid #ccc;
- padding-bottom: $lineHeight - 1;
- margin-bottom: 1px;
-
- @include medium {
- column-count: 2;
- column-rule: 0 none transparent;
- column-gap: 0;
- }
-
- & li,
- & .columns-list-item {
- @include type--small;
- padding: 0;
- }
-
- & a {
- display: block;
- position: relative;
- padding-left: 39px;
-
- &::before {
- line-height: 26px;
- }
- }
-
-}
-
diff --git a/UI/WebServerResources/scss/components/_components/_grid.scss b/UI/WebServerResources/scss/components/_components/_grid.scss
deleted file mode 100755
index fa30c683e..000000000
--- a/UI/WebServerResources/scss/components/_components/_grid.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
-*
-* Grid
-*
-**/
-
-
-@include medium-only {
- // Generating grid classes for medium view
- @for $i from 1 through $mediumColCount {
- .g-medium--#{$i} {
- @include rule--col(medium);
- width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
- @if $i == $mediumColCount { margin-right: 0; }
- }
-
- @if $i < $mediumColCount {
- .g-medium--push-#{$i} {
- margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
- }
- .g-medium--pull-#{$i} {
- margin-right: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
- }
- }
- }
-
- .g-medium--full {
- @include rule--col(medium);
- margin-right: 0;
- width: 100%;
- }
-
- .g--third {
- @include rule--col(medium);
- width: $mediumColWidth;
- }
-
- .g--half,
- .g-medium--half {
- @include rule--col(medium);
- width: 50% - $mediumGutterWidth/2;
- }
-
- .g-medium--last { margin-right: 0; }
- .g-medium--last + .g-medium--half { clear: left; }
-
- .g--pull-half { margin-right: 50% + $mediumGutterWidth/2; }
-}
-
-
-@include wide {
- // Generating grid classes for wide view
- @for $i from 1 through $wideColCount {
- .g-wide--#{$i} {
- @include rule--col(wide);
- width: ($wideColWidth*$i) + ($wideGutterWidth*($i + -1));
- @if $i == $wideColCount { margin-right: 0; }
- }
-
- @if $i < $wideColCount {
- .g-wide--push-#{$i} {
- margin-left: ($wideColWidth*$i) + ($wideGutterWidth*$i);
- }
- .g-wide--pull-#{$i} {
- margin-right: ($wideColWidth*$i) + ($wideGutterWidth*$i);
- }
- }
- }
-
- .g-wide--last { margin-right: 0; }
-
- .g-wide--full {
- @include rule--col(wide);
- margin-right: 0;
- width: 100%;
- }
-
- .g--third {
- @include rule--col(wide);
- width: 30.8%;
- }
-
- .g--half,
- .g-wide--half {
- @include rule--col(wide);
- width: 50% - $wideGutterWidth/2;
- }
-
- .g--pull-half { margin-right: 50% + $wideGutterWidth/2; }
-}
-
-
-// This is a global 'last' class
-// to be used with global grid classes, such as 'half' or 'third'
-// Example usage:
-//
-//
-//
-.g--last { margin-right: 0; }
-
-
-// This is a global 'centered' class
-.g--centered {
- float: none; // reset float to none so we can center it
- margin-left: auto;
- margin-right: auto;
-}
-
-// This is a grid overlay
-// Its purpose is to show users our grid system
-// It becomes visible when a class 'debug' is added to the body
-.grid-overlay {
-
- display: none;
- pointer-events: none;
-
- // Only show when parents (body) has debug class
- .debug & {
- @include container(true);
-
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- height: 100%;
- display: block;
-
- [class*="g-"] {
- height: 100%;
- background-color: rgba(lighten(#000, 35%), .2);
- }
-
- @include medium-only {
- .g-wide--last {
- display: none;
- }
- }
-
- @include small-only {
- display: none;
- }
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_guides-list.scss b/UI/WebServerResources/scss/components/_components/_guides-list.scss
deleted file mode 100755
index b7a18b989..000000000
--- a/UI/WebServerResources/scss/components/_components/_guides-list.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
-*
-* Guides List
-*
-**/
-
-
-.guides-list {
- overflow: hidden;
-
- @include medium {
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
-
- padding-top: $lineHeight*2;
- }
-}
-
-.guides-list__item {
- padding: 0;
- background: #ffffff;
- margin-top: $lineHeight;
- margin-bottom: 0;
-
- @include medium {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- }
-
- h3 {
- margin: 0 32px;
- }
-
- p {
- margin: $lineHeight 32px 0;
- }
-
- .primary-content {
- @include medium {
- flex: 1;
- }
- }
-
- .secondary-content {
- position: relative;
- // background: #f5f5f5;
- margin-top: ($lineHeight*2) - 1;
- border-top: 1px solid $colorGrayKeyline;
-
- @include medium {
- width: 100%; // needed due to parent being flex
- }
-
- .icon-circle {
- position: absolute;
- top: -$lineHeight - 2;
- left: 50%;
- margin-left: -21px;
- border: 2px solid #ffffff;
-
- & i {
- font-size: 23px;
- }
- }
- }
-
- ol {
- margin: $lineHeight 0 0;
- padding: $lineHeight*2 0 $lineHeight*2;
- margin-top: 0;
- }
-
- &::before {
- display: none;
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_icon-circle.scss b/UI/WebServerResources/scss/components/_components/_icon-circle.scss
deleted file mode 100755
index ee5ba5d67..000000000
--- a/UI/WebServerResources/scss/components/_components/_icon-circle.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
-*
-* Icon Circle
-*
-**/
-
-.icon-circle,
-.icon-circle--large {
- height: 0;
- width: 0;
- background: $colorGray;
- display: block;
- position: relative;
- border-radius: 100%;
- font-size: 0;
- padding: 22px; // Breaks baseline grid
- margin: 4px auto; // Adds margin top/bottom to fix baseline grid ;)
-
- i,
- span {
- position: absolute;
- line-height: 0px;
- top: 50%;
- width: 100%;
- left: 0;
- text-align: center;
- color: #ffffff;
- font-size: $fontLarge;
- }
-
- span {
- font-family: $fontHighlight;
- font-size: $fontLarge;
- font-weight: 700;
-
- @include medium {
- font-size: $fontXLarge;
- }
- }
-}
-
-.icon-circle--large {
- margin-top: 0;
- margin-bottom: 0;
- padding: $lineHeight;
- position: relative;
-
- i {
- font-size: $fontLarge;
-
- @include medium {
- font-size: $fontXLarge;
- }
- }
-
- @include medium {
- padding: ($lineHeight + $lineHeight/2) - 2;
- border: 2px solid #ffffff;
-
- a & {
- padding: ($lineHeight + $lineHeight/2) - 1;
-
- box-shadow: inset 0px 0px 0px 1px rgba(#ffffff, .42);
- border: 1px solid;
-
- // demo transition
- transition: all 100ms linear;
- transform: translateZ(0); // kick in hardware acceleration
- }
-
- .no-touch a:hover & {
- box-shadow: inset 0px 0px 0px 1px #ffffff;
- transform: scale(1.1);
- }
- }
-
-}
-
-.icon-circle--nav {
- height: 0;
- width: 0;
- background: $colorGray;
- display: block;
- position: relative;
- border-radius: 100%;
- font-size: 0;
- padding: $lineHeight/2;
- margin: 0 auto;
-
- @include medium {
- padding: 22px; // Breaks baseline grid
- margin-top: 4px; // Adds margin top/bottom to fix baseline grid ;)
- margin-bottom: 4px; // Adds margin top/bottom to fix baseline grid ;)
- }
-
- i {
- position: absolute;
- line-height: 1px;
- top: 50%;
- width: 100%;
- left: 0;
- text-align: center;
- color: #ffffff;
- font-size: $fontBase;
-
- @include medium {
- font-size: $fontLarge;
- }
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_icons.scss b/UI/WebServerResources/scss/components/_components/_icons.scss
deleted file mode 100755
index ebc077ed5..000000000
--- a/UI/WebServerResources/scss/components/_components/_icons.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@font-face {
- font-family: icons;
- src: url(../images/icons/icons.eot);
- src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'),
- url(../images/icons/icons.woff2) format('woff2'),
- url(../images/icons/icons.woff) format('woff'),
- url(../images/icons/icons.ttf) format('truetype'),
- url(../images/icons/icons.svg?#icons) format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-.icon {
- font-family: 'icons';
- display: inline-block;
- vertical-align: top;
- line-height: 1;
- font-weight: normal;
- font-style: normal;
- speak: none;
- text-decoration: inherit;
- text-transform: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-// Icons
-$icon-bullet: '\e001';
-.icon-bullet::before {
- content:"\e001";
-}
-
-$icon-chevron-down: '\e002';
-.icon-chevron-down::before {
- content: '\e002';
-}
-
-$icon-chevron-large: '\e003';
-.icon-chevron-large::before {
- content: '\e003';
-}
-
-$icon-chevron-left: '\e004';
-.icon-chevron-left::before {
- content: '\e004';
-}
-
-$icon-chevron-right: '\e005';
-.icon-chevron-right::before {
- content: '\e005';
-}
-
-$icon-chevron-up: '\e006';
-.icon-chevron-up::before {
- content: '\e006';
-}
-
-$icon-close: '\e007';
-.icon-close::before {
- content: '\e007';
-}
-
-$icon-cog: '\e008';
-.icon-cog::before {
- content: '\e008';
-}
-
-$icon-diamond: '\e009';
-.icon-diamond::before {
- content: '\e009';
-}
-
-$icon-exclamation: '\e00a';
-.icon-exclamation::before {
- content: '\e00a';
-}
-
-$icon-google-dev: '\e00b';
-.icon-google-dev::before {
- content: '\e00b';
-}
-
-$icon-hash: '\e00c';
-.icon-hash::before {
- content: '\e00c';
-}
-
-$icon-introduction-to-media: '\e00d';
-.icon-introduction-to-media::before {
- content: '\e00d';
-}
-
-$icon-lessons: '\e00e';
-.icon-lessons::before {
- content: '\e00e';
-}
-
-$icon-menu: '\e00f';
-.icon-menu::before {
- content: '\e00f';
-}
-
-$icon-minus: '\e010';
-.icon-minus::before {
- content: '\e010';
-}
-
-$icon-multi-device-layouts: '\e011';
-.icon-multi-device-layouts::before {
- content: '\e011';
-}
-
-$icon-performance: '\e012';
-.icon-performance::before {
- content: '\e012';
-}
-
-$icon-plus: '\e013';
-.icon-plus::before {
- content: '\e013';
-}
-
-$icon-question: '\e014';
-.icon-question::before {
- content: '\e014';
-}
-
-$icon-slash: '\e015';
-.icon-slash::before {
- content: '\e015';
-}
-
-$icon-star: '\e016';
-.icon-star::before {
- content: '\e016';
-}
-
-$icon-tick: '\e017';
-.icon-tick::before {
- content: '\e017';
-}
-
-$icon-user-input: '\e018';
-.icon-user-input::before {
- content: '\e018';
-}
diff --git a/UI/WebServerResources/scss/components/_components/_link.scss b/UI/WebServerResources/scss/components/_components/_link.scss
deleted file mode 100755
index a9a11bad0..000000000
--- a/UI/WebServerResources/scss/components/_components/_link.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
-*
-* Link
-*
-**/
-
-a {
- color: $colorBlue;
-}
-
-a:hover {
- text-decoration: none;
-}
-
-.cta--primary {
- @include style-cta($colorBlue, $icon-chevron-right);
-}
-
-.cta--secondary {
- @include style-cta($colorBlue);
-}
diff --git a/UI/WebServerResources/scss/components/_components/_list.scss b/UI/WebServerResources/scss/components/_components/_list.scss
deleted file mode 100755
index 01a53d6bd..000000000
--- a/UI/WebServerResources/scss/components/_components/_list.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
-*
-* List
-*
-**/
-
-ul,
-ol {
- list-style: none;
- margin: 0;
-
- @include small-only {
- padding-left: 0;
- }
-}
-
-ul li {
- position: relative;
- padding-left: 16px;
- @include bullet-type("", icon-bullet);
-
- &::before {
- font-size: 4px;
- }
-}
-
-ol {
- counter-reset: list;
- > li {
- @include numbered-list;
- position: relative;
- padding-left: 32px;
-
- // This selected every adjacent
- // from the 10th and overrides the
- // content property of each
- &:nth-child(10n) ~ li::before,
- &:nth-child(10n)::before {
- content: counter(list);
- }
-
- }
-}
-
-ul ol,
-ol ul {
- padding-top: 0;
-}
-
-
-/*========== LIST LINKS ==========*/
-
-ul.list-links {
- li::before {
- display: none;
- }
- a {
- @include bullet-type("", icon-bullet);
-
- &::before {
- font-size: 4px;
- }
-
- font-weight: 400;
- }
-
- &.list-links--primary {
- a {
- @include bullet-type("", icon-chevron-right);
- font-weight: 400;
- font-family: $fontHighlight;
- line-height: 1; // fixes baseline grid alignment
- text-decoration: none;
- }
- }
-}
-
-ol.list-links {
- li {
- &::before {
- display: none;
- }
-
- a {
- display: inline-block;
- @include numbered-list;
- font-weight: 300;
- }
-
- &:nth-child(10n) ~ li a::before,
- &:nth-child(10n) a::before {
- content: counter(list);
- }
- }
-
- &.list-links--secondary {
- a::before {
- display: none;
- }
- }
-}
-
-.list-links--secondary {
- @include type--base;
- padding-left: 0;
-
- li {
- padding-left: 0;
- }
-}
-
-/*========== ANCHOR LIST ==========*/
-
-.list-anchor {
- padding-left: 0;
-
- li {
- @include type--base;
- padding-top: 0;
- padding-left: 0;
-
- &::before {
- display: none
- }
-
- }
-
- a {
- @include bullet-type("", icon-bullet);
- line-height: 1; // fixes baseline grid alignment
- display: inline-block;
- padding-left: 16px;
-
- &::before {
- font-size: 4px;
- }
- }
-}
-
-/*========== SMALL LIST ==========*/
-
-.list-small {
-
- li {
- @include medium {
- @include type--small;
- padding-top: 0;
- }
- }
-}
-
-/*========== CENTERED LIST ==========*/
-
-.list-centered {
- text-align: center;
- padding-left: 0;
-}
-
-/*========== FEATURED LIST ==========*/
-
-.featured-list {
- padding-top: $lineHeight * 3;
- padding-bottom: $lineHeight * 3;
-}
-
-.featured-list__item {
- background: #ffffff;
- padding-left: 0;
- padding-top: $lineHeight;
- padding-bottom: $lineHeight;
-
- @include medium {
- min-height: $lineHeight * 13;
- padding: $lineHeight * 2 32px;
- }
-
- margin-top: $lineHeight;
-
- &:first-child {
- margin-top: 0;
- }
-
- p {
- margin-bottom: $lineHeight;
- }
-}
-
-.featured-list__img-wrapper {
- display: none;
- position: relative;
- padding-top: $lineHeight;
- margin: 0 -5%;
-
- @include medium {
- display: block;
- padding-top: 0;
- margin: 0;
- }
-}
-
-.featured-list__img {
- @include medium {
- padding-top: 60.8%;
- padding-bottom: 0;
- height: 0;
- overflow: hidden;
- position: absolute;
- width: 100%;
-
- }
-
- img {
- display: block;
- margin: 0 auto;
- max-width: 100%;
-
- @include medium {
- margin: 0;
- position: absolute;
- top: 0;
- height: 100%;
- width: 100%;
- left: 0;
- }
- }
-}
-
-/*========== RELATED GUIDES LIST ==========*/
-.related-guides-list {
- font-family: $fontHighlight;
- padding-top: 0;
- padding-left: 0;
-
- @include medium {
- padding-top: $lineHeight
- }
-
- @include wide {
- padding-top: 0
- }
-
- p {
- padding-top: 0;
- }
-
- .tag {
- padding-top: 0;
- }
-
- li {
- padding-top: $lineHeight;
- padding-bottom: $lineHeight - 1;
- border-bottom: 1px solid $colorGrayKeyline;
-
- &:last-child {
- border-color: transparent;
- }
-
- @include medium {
- padding-top: 0;
- padding-bottom: 0;
- border-color: transparent;
- }
- }
-}
-
-/*========== LIST RESET ==========*/
-
-.list--reset {
- padding-left: 0;
-
- li {
- padding-left: 0;
- }
-
- &.list-links a::before,
- & li::before {
- display: none !important; // Fine to use !important when we are forcing an override
- }
-}
-
-
-/*========== LESSONS ==========*/
-.list-lessons {
- padding-left: 0;
-
- & a {
- color: #ffffff;
- }
-
- & .current {
- &,
- a {
- text-decoration: none;
- cursor: default;
- }
-
- & .icon {
- font-size: $fontSmall;
- display: inline-block;
- background: rgba(#000000, .2);
- border-radius: 100%;
- width: 26px;
- line-height: 26px;
- text-align: center;
- margin-left: 7px;
- }
- }
-
-}
-
-
-/*========== GUIDES INTO - used on homepage ==========*/
-.list-guides-intro {
- margin-bottom: $lineHeight*2;
-
- @include small-only {
- padding-top: $lineHeight*2;
- }
-
- li {
- border-bottom: 1px solid $colorGrayKeyline;
- padding-bottom: ($lineHeight*2) - 1;
- margin-bottom: ($lineHeight*2);
-
- @include medium {
- border-color: transparent;
- padding-bottom: 0;
- }
-
- &:last-child {
- border-bottom: transparent;
- margin-bottom: 0;
- }
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_media.scss b/UI/WebServerResources/scss/components/_components/_media.scss
deleted file mode 100755
index 3d4e7ba18..000000000
--- a/UI/WebServerResources/scss/components/_components/_media.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-*
-* Media - imgs/videos
-*
-**/
-
-img,
-video,
-object {
- max-width: 100%;
-}
-
-img {
-
- .content & {
- margin-top: $lineHeight;
- margin-bottom: $lineHeight;
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_subsection-title.scss b/UI/WebServerResources/scss/components/_components/_subsection-title.scss
deleted file mode 100755
index 0d0b786c6..000000000
--- a/UI/WebServerResources/scss/components/_components/_subsection-title.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
-*
-* subsection__title
-*
-**/
-
-.subsection-title {
- color: $colorGrayDark;
- margin-top: $lineHeight * 2;
-}
-
-.subsection-number {
- @include type--base;
- padding-top: 0;
- display: block;
-}
diff --git a/UI/WebServerResources/scss/components/_components/_table.scss b/UI/WebServerResources/scss/components/_components/_table.scss
deleted file mode 100755
index dd489747d..000000000
--- a/UI/WebServerResources/scss/components/_components/_table.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
-*
-* Table
-*
-**/
-
-table {
- margin-top: $lineHeight;
- width: 100%;
-
- thead {
- background: $colorBlue;
- color: #ffffff;
- }
-
- th {
- text-align: center;
- display: none;
- font-family: $fontHighlight;
- @include type--medium;
- }
-
- tr {
- @include medium {
- border-bottom: 1px solid #ffffff;
- }
- }
-
- tbody {
- background: $colorGrayBackground;
- }
-
- td {
- display: block;
- padding-top: $lineHeight/2;
- padding-bottom: $lineHeight/2;
-
- // This is to re-plicate the table-headers for mobile
- &::before {
- content: attr(data-th) " :";
- display: inline-block;
- color: #ffffff;
- background: $colorBlue;
- border-right: 2px solid #ffffff;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 100px;
- max-height: 100%;
- font-family: $fontHighlight;
- font-size: 16px;
- font-weight: 400;
- padding-left: $lineHeight/2;
- padding-top: $lineHeight/2;
-
- @include medium {
- display: none;
- }
- }
- }
-
- th,
- td {
- position: relative;
- padding-left: 140px;
-
- @include medium {
- display: table-cell;
- }
- }
-
- th {
- @include medium {
- padding: $lineHeight;
- padding-top: 13px;
- padding-bottom: $lineHeight/2 - 1;
- }
- }
-
- td {
- @include medium {
- padding: $lineHeight;
- padding-bottom: $lineHeight - 1;
- }
- }
-}
-
-td:last-child::after {
- content: "";
- display: block;
- background: #ffffff;
- height: 1px;
- left: 0;
- position: absolute;
- bottom: 0;
- width: 100%;
- @include medium {
- display: none;
- }
-}
-
-.table-2 {
- col {
- width: $mediumContainer / 2;
- @include wide {
- width: $wideContainer / 2;
- }
- }
-
- th,
- td {
- @include medium {
- &:first-child {
- border-right: 2px solid #ffffff;
- }
- }
- }
-}
-
-.table-3 {
- col {
- width: $mediumContainer / 3;
- @include wide {
- width: $wideContainer / 3;
- }
- }
-
- th,
- td {
- @include medium {
- &:nth-child(2) {
- border-left: 2px solid #ffffff;
- border-right: 2px solid #ffffff;
- }
- }
- }
-}
-
-.table-4 {
- col {
- width: $mediumContainer / 4;
- @include wide {
- width: $wideContainer / 4;
- }
- }
-
- th,
- td {
- @include medium {
- &:nth-child(2),
- &:nth-child(3) {
- border-left: 2px solid #ffffff;
- border-right: 2px solid #ffffff;
- }
- }
- }
-}
diff --git a/UI/WebServerResources/scss/components/_components/_typography.scss b/UI/WebServerResources/scss/components/_components/_typography.scss
deleted file mode 100755
index 0a6c6e476..000000000
--- a/UI/WebServerResources/scss/components/_components/_typography.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
-*
-* Typography
-*
-**/
-
-// Just normalizing text
-// Recommend using padding instead of margin
-h1, h2, h3, h4, h5, p {
- margin: 0;
-}
-
-// Definitions
-.small,
-small {
- @include type--small;
-}
-
-.base,
-p,
-ul,
-ol {
- @include type--base;
-}
-
-.medium,
-h4 {
- @include type--medium;
-}
-
-.large,
-h3 {
- @include type--large;
-}
-.xlarge,
-h2 {
- @include type--xlarge;
-}
-
-.xxlarge,
-h1 {
- @include type--xxlarge;
-}
-
-.huge {
- @include type--huge;
-}
-
-
-li > p {
- padding-top: 0;
-}