custom assets ported

app/assets/stylesheets/molecules/_admin.scss

@@ -0,0 +1,35 @@
+main {
+  @include outer-container;
+  .saveadd {
+    @include span-columns(12);
+  }
+  .savecancel {
+    @include span-columns(12);
+  }
+  .error {
+    background-color: transparent;
+    color: $accent-color-1;
+  }
+  label.error {
+    text-align: right;
+    padding-top: 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media only screen and (min-width: $tablet) {
+  main {
+    @include outer-container;
+    .viewall {
+      text-align: right;
+    }
+    .saveadd {
+      @include span-columns(6);
+    }
+    .savecancel {
+      @include span-columns(6);
+      @include omega();
+      text-align: right;
+    }
+  }
+}

app/assets/stylesheets/molecules/_buttongroups.scss

@@ -0,0 +1,26 @@
+.btn-group {
+  > button {
+    float: left;
+    background-color: $white;
+    color: $secondary-color;
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: $secondary-color;
+    margin: 0;
+    &:first-child {
+      border-radius: 999px 0 0 999px;
+      border-width:1px 0 1px 1px;
+    }
+    &:last-child {
+      border-radius: 0 999px 999px 0;
+      border-width:1px 1px 1px 0;
+    }
+    &.selected {
+      background-color: $primary-color;
+      color:$white;
+    }
+  }
+  &:after {
+    @include clearfix;
+  }
+}

app/assets/stylesheets/molecules/_buttons.scss

@@ -0,0 +1,100 @@
+#{$all-buttons}, .btn {
+  appearance: none;
+  background-color: $primary-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $primary-font-face;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  letter-spacing: 0.2rem;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
+  line-height: 1;
+  padding: 1.2em 2em;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+
+
+  &:hover,
+  &:focus {
+    &:not([disabled]) {
+      background-color: $secondary-color;
+      color: #fff;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+}
+.secondary-btn {
+  background-color: $secondary-color;
+}
+
+.tertiary-btn {
+  background-color: transparent;
+  color: $primary-color;
+  border: 1px solid $primary-color;
+}
+
+.button-save {
+  display: none;
+}
+
+.button-cancel {
+  color: #ef0734;
+  border: 1px solid #ef0734;
+  display: none;
+
+  &:hover {
+    &:not([disabled]) {
+      color: #fff;
+      background-color: #ef0734;
+    }
+  }
+}
+
+.answer-buttons {
+  .button-cancel {
+    margin-left: .5rem;
+  }
+}
+
+.disabled-button {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: default;
+}
+
+// JS-enabled styles
+html.no-js {
+  .tertiary-btn.button-edit {
+    border: none;
+  }
+  .button-save,
+  .button-cancel {
+    display: none;
+  }
+}
+html.js {
+  .button-edit {
+    @extend .btn;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  html.no-js {
+    .tertiary-btn.button-edit {
+      display: inline-block;
+      padding-top: .75rem;
+    }
+  }
+}

app/assets/stylesheets/molecules/_forms.scss

@@ -0,0 +1,266 @@
+// TODO: Align colors with variables.scss
+fieldset {
+  background-color: transparent;
+  // border: 1px solid $input-border;
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+legend {
+  font-weight: 300;
+  margin-bottom: $small-spacing / 2;
+  padding: 0;
+}
+
+label {
+  display: block;
+  font-weight: 300;
+}
+
+#{$all-text-inputs} {
+  display: block;
+  font-size: $base-font-size;
+  border-left:0;
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid $secondary-color;
+  box-shadow: none;
+  border-radius: $base-border-radius;
+  box-sizing: border-box;
+  margin-bottom: 1.4em;
+  padding: $base-spacing / 3;
+  width: 100%;
+  font-weight: 300;
+  font-family: $primary-font-face;
+  line-height: 1.5em;
+
+  &:hover {
+    border-color: shade($base-border-color, 20%);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    background-color: shade($base-background-color, 5%);
+    cursor: default;
+
+    &:hover {
+      border: $base-border;
+    }
+  }
+}
+button:disabled,
+input[type='submit']:disabled {
+  opacity: .3;
+  cursor: default;
+}
+
+textarea {
+  resize: vertical;
+  background: transparent;
+  padding: 0 0 3rem;
+}
+
+[type="search"] {
+  appearance: none;
+}
+
+%multiple-choice {
+  display: inline;
+  margin-right: $small-spacing / 2;
+  &:not(:checked),
+  &:checked {
+    position: absolute;
+    left: -9999px;
+    + label {
+      position: relative;
+      padding-left: 25px;
+      cursor: pointer;
+      &:after {
+        position: absolute;
+        line-height: 0.8;
+        color: $primary-color;
+        transition: all .2s;
+      }
+    }
+    &:disabled {
+      + label {
+        &:before {
+          box-shadow: none;
+          border-color: #bbb;
+          background-color: #ddd;
+        }
+      }
+    }
+  }
+  &:not(:checked) {
+    + label {
+      &:after {
+        opacity: 0;
+        transform: scale(0);
+      }
+    }
+  }
+  &:checked {
+    + label {
+      &:before {
+        border: 1px solid $gray;
+        background: transparent;
+      }
+      &:after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    &:disabled {
+      + label {
+        &:after {
+          color: #999;
+        }
+      }
+    }
+  }
+  &:hover:not(:disabled) {
+    + label {
+      &:before {
+        border: 2px solid $primary-color;
+      }
+    }
+  }
+  &:disabled {
+    + label {
+      color: #aaa;
+    }
+  }
+  + label {
+    &:before {
+      content: '';
+      position: absolute;
+      left:0; top: 2px;
+      width: 20px; height: 20px;
+      box-shadow: 0;
+      border: 1px solid $primary-color;
+      background: transparent;
+      box-sizing: border-box;
+    }
+  }
+}
+
+[type="radio"] {
+  @extend %multiple-choice;
+  &:not(:checked),
+  &:checked {
+    + label {
+      &:after {
+        content: '\2022';
+        font-size: 28px;
+        top: 1px;
+        left: 2px;
+      }
+    }
+  }
+  + label {
+    &:before {
+      border-radius: 50%;
+    }
+  }
+  &:not(:disabled) + label:before {
+    background-color: white;
+  }
+}
+
+[type="checkbox"] {
+  @extend %multiple-choice;
+  &:not(:checked),
+  &:checked {
+    + label {
+      &:after {
+        font-family: 'Zapf Dingbats', 'Menlo';
+        content: '\2714';
+        font-size: 13px;
+        top: 7px;
+        left: 5px;
+      }
+    }
+  }
+  &:not(:disabled) + label:before {
+    background-color: white;
+  }
+}
+
+[type="file"] {
+  margin-bottom: $small-spacing;
+  width: 100%;
+}
+
+select {
+  margin-bottom: 0.75em;
+  max-width: 100%;
+  width: auto; // needed?
+  background-color: $white;
+  border: 1px solid #aaa;
+  border-radius: 0px;
+  font-weight: 300;
+  font-family: $primary-font-face;
+  font-size: 1rem;
+  &::-ms-expand {
+    display: none;
+  }
+  &:not([multiple]) {
+    background-image: url(../../assets/images/icon-dropdownlist.png);
+    background-repeat: no-repeat;
+    background-position: right 10px bottom 50%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 10px 40px 10px 10px;
+  }
+  option {
+    font-weight: 300;
+    font-family: $primary-font-face;
+    font-size: 1rem;
+  }
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 1.2rem;
+
+  label {
+    transition: 0.2s ease;
+    + #{$all-text-inputs} {
+      background: transparent;
+    }
+    &.loaded {
+      left: 0;
+      top: 5px;
+      font-size: 1em;
+      position: absolute;
+      pointer-events: none;
+    }
+    &.animate {
+      font-size: 0.8em;
+      top: -10px;
+    }
+  }
+}
+.form-group-multiples { // radios, checks wrappers
+  margin-bottom: .5rem;
+}
+
+.button-group {
+  margin-top: 2rem;
+}
+
+.skills-app-form {
+  margin-top: 2rem;
+}
+
+html.no-js {
+  .chars {
+    display: none;
+  }
+}

app/assets/stylesheets/molecules/_lists.scss

@@ -0,0 +1,35 @@
+ul, ol {
+  margin: 0;
+  padding: 0 0 0 1em;
+  li {
+    line-height: 2em;
+  }
+}
+
+dl {
+  margin: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0;
+}
+
+dd {
+  margin: 0;
+}
+
+ul {
+  list-style-type: none;
+  list-style-position: inside;
+  li {
+    position:relative;
+    padding-left:1em;
+    &:before {
+      position: absolute;
+      top: 3px;
+      left:0;
+      content:url('../../assets/images/icon-unorderedlistbullet.png');
+    }
+  }
+}

app/assets/stylesheets/molecules/_livecoder.scss

@@ -0,0 +1,60 @@
+.code-input {
+  margin: 10px 0;
+
+  textarea {
+    border: 1px solid black;
+    min-height: 200px;
+    padding: 10px;
+    width: 100%;
+    margin-bottom: 0;
+    background-color: #fff;
+
+    &[disabled] {
+      background-color: #ddd;
+    }
+  }
+}
+
+.code-input ~ button { 
+  margin-left: 0;
+  clear: both;
+  display: block;
+}
+
+.results {
+  border: 1px solid black;
+  clear: both;
+  margin: 10px 0;
+  min-height: 200px;
+  width: 100%;
+  background-color: #fff;
+}
+
+iframe {
+  border: 0;
+  height: 100%;
+  min-height: 190px;
+  width: 100%;
+}
+
+.live-coder-summary{
+  button.update-button{
+    display: none;
+  }
+}
+
+@media only screen and (min-width: $desktop) {
+  .code-input {
+    float: left;
+    margin: 10px 1%;
+    width: 32%;
+
+    &:nth-of-type(1) {
+      margin-left: 0;
+    }
+
+    &:nth-of-type(3) {
+      margin-right: 0;
+    }
+  }
+}

app/assets/stylesheets/molecules/_progressbar.scss

@@ -0,0 +1,41 @@
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-height: 84px;
+}
+
+.progress-bar {
+  background-color: $primary-color;
+  color:white;
+  text-align: right;
+  line-height: 8vw;
+  // padding: 0 5px;
+  font-weight: 900;
+  min-width: 50px;
+  position: relative;
+  transform: skewX(-16.5deg);
+
+  span {
+    display: inline-block;
+    transform: skewX(16.5deg);
+    margin-right: .85rem;
+    font-size: 3vw;
+    line-height: 8vw;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .progress-bar span {
+    font-size: 16px;
+  }
+}
+
+@media only screen and (min-width: $desktop) {
+  .progress-bar,
+  .progress-bar span {
+    line-height: 84px;
+    max-height: 84px;
+  }
+}

app/assets/stylesheets/molecules/_tables.scss

@@ -0,0 +1,22 @@
+table {
+  border-collapse: collapse;
+  margin: $small-spacing 0;
+  width: 100%;
+}
+
+th {
+  border-bottom: 1px solid shade($base-border-color, 25%);
+  font-weight: 600;
+  padding: $small-spacing 0;
+  text-align: left;
+}
+
+td {
+  padding: $small-spacing 0;
+}
+
+tr,
+td,
+th {
+  vertical-align: middle;
+}