Merge pull request #36 from treehouse/website-redesign

Website redesign
treehouse · Jul 29, 2020 · 9570f4e · 9570f4e
2 parents 591e5f4 + 0461083
commit 9570f4e
Show file tree

Hide file tree

Showing 26 changed files with 1,418 additions and 272 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Leap is an internal CSS library made for Treehouse. It contains immutable utilit
 ## Quick Start
 Several options are available for installing Leap into your project.
 
-* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.10.0.zip)
+* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.11.0.zip)
 
 * Clone the repo: `git clone https://github.com/treehouse/project-leap.git`
 * Install with [Bower](http://bower.io)
@@ -24,4 +24,4 @@ To get Jekyll running follow these steps:
 Way to go, nerd. You should be up and running now!
 
 ## Copyright and license
-Code and documentation copyright 2018 Treehouse Island, Inc. Code released under the [MIT license](https://github.com/treehouse/project-leap/LICENSE).
+Code and documentation copyright 2020 Treehouse Island, Inc. Code released under the [MIT license](https://github.com/treehouse/project-leap/LICENSE).
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -7,7 +7,7 @@
 </div>
 
 <footer class="guide-contentinfo" role="contentinfo">
-  <p class="guide-contentinfo-copy">Copyright &copy; 2018 Treehouse. All rights reserved.</p>
+  <p class="guide-contentinfo-copy">Copyright &copy; 2020 Treehouse. All rights reserved.</p>
 </footer>
 
 <script src="js/prism.js"></script>

diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss
@@ -1,8 +1,9 @@
-$leap-version: "0.9.2";
+$leap-version: "0.11.0";
 
 // Brand Colors
 $brand-colors: (
   "green": #5fcf80,
+  "green-dark": #2F9D4F,
   "gray":  #3e474f,
   "blue-light": #387bab, // AA 4.58
   "blue-medium": #2a5d81,
@@ -42,6 +43,21 @@ $ui-colors: (
   "success":          #24793d
 );
 
+// Pop Colors
+$pop-colors: (
+  "blue-pastel":    #5185c1,
+  "blue":           #3859a2,
+  "blue-dark":      #323952,
+  "teal":           #0498b1,
+  "green":          #6ac17e,
+  "golden":         #ecc148,
+  "orange":         #e98134,
+  "red-orange":     #e95e31,
+  "purple-pastel":  #8171a0,
+  "purple":      #4a4290,
+  "magenta":         #b15592
+);
+
 // Category colors 
 $category-colors: (
   "back-end": (
@@ -91,6 +107,8 @@ $category-colors: (
   )
 );
 
+
+
 // Spacing Units
 //   0   = 0px
 //   0.5 = 8px
@@ -124,14 +142,22 @@ $spacing-sides: (
 
 // Type Variables
 $text-size: (
-  0: 3rem,
-  1: 2.25rem,
-  2: 1.75rem,
-  3: 1.25rem,
+  0: 3.75rem,
+  1: 3rem,
+  2: 2.25rem,
+  3: 1.5rem,
   4: 1.125rem,
   5: 1rem,
   6: 0.875rem
 );
+
+$text-tracking: (
+  0: 1.4px,
+  1: 1.3px,
+  2: 1.2px,
+  3: 1px
+);
+
 $gotham: "Gotham Rounded A", "Gotham Rounded B", "Helvetica", Helvetica, Arial, sans-serif;
 $bold: 500;
 

diff --git a/_sass/leap/atoms/_button.sass b/_sass/leap/atoms/_button.sass
@@ -33,17 +33,29 @@
     fill: brand-color(green)
 
 
-
   // Primary buttons
   &--primary
-    background-color: brand-color(green) !important
-    border-color: brand-color(green) !important
+    background: #50b06c !important
+    background: linear-gradient(to bottom, #55ba73 0%,#50b06c 100%) !important
+    border-color: transparent !important
+    color: #fff !important
+    svg
+      fill: #fff !important
+    +selected
+      background: linear-gradient(#408d56,#408d56) !important
+      border-color: transparent !important
+      color: #fff !important
+
+  &--primary-teal
+    background: #008298 !important
+    background: linear-gradient(to bottom,  #008298 0%,#007589 100%) !important
+    border-color: transparent !important
     color: #fff !important
     svg
       fill: #fff !important
     +selected
-      background-color: darken(brand-color(green), 15%) !important
-      border-color: darken(brand-color(green), 15%) !important
+      background: linear-gradient(#004652,#004652) !important
+      border-color: transparent !important
       color: #fff !important
 
   &--primary-blue
@@ -60,7 +72,7 @@
 
   // Secondary buttons
   &--secondary
-    background-color: transparent !important
+    background-color: #fff !important
     border-color: $border-color-normal !important
     color: text-color(base) !important
     svg
@@ -107,7 +119,7 @@
     opacity: 0.88 !important
     svg
       fill: #fff !important
-    +selected
+    +selected-inverse
       border-color: #fff !important
       color: #fff !important
       opacity: 1 !important
@@ -119,14 +131,25 @@
       opacity: 0.88
       svg
         fill: text-color(medium) !important
-      +selected
+      +selected-inverse
+        opacity: 1 !important
+
+    &-primary-teal
+      background-color: #fff !important
+      border-color: #fff !important
+      color: text-color(medium) !important
+      opacity: 0.88
+      svg
+        fill: pop-color(teal) !important
+      +selected-inverse
+        color: darken(pop-color(teal), 6%) !important
         opacity: 1 !important
 
     &-disabled
       border-color: #fff !important
       color: #fff !important
       opacity: 0.15 !important
-      +selected
+      +selected-inverse
         border-color: #fff !important
         color: #fff !important
         opacity: 0.15 !important
@@ -136,14 +159,13 @@
       border-color: #fff !important
       color: text-color(medium) !important
       opacity: 0.15 !important
-      +selected
+      +selected-inverse
         background-color: #fff !important
         border-color: #fff !important
         color: text-color(medium) !important
         opacity: 0.15 !important
 
 
-
   // Inline buttons next to input fields
   &--inline
     margin-top: 28px !important
@@ -215,11 +237,11 @@
         svg
           fill: darken(category-color(#{$category}, base), 10%) !important
       &.button--primary
-        background-color: category-color(#{$category}, base) !important
+        background: category-color(#{$category}, base) !important
         border-color: category-color(#{$category}, base) !important
         color: #fff !important
         +selected
-          background-color: darken(category-color(#{$category}, base), 10%) !important
+          background: darken(category-color(#{$category}, base), 10%) !important
           border-color: darken(category-color(#{$category}, base), 10%) !important
           svg
             fill: #fff !important

diff --git a/_sass/leap/atoms/_color.sass b/_sass/leap/atoms/_color.sass
@@ -123,3 +123,26 @@ $properties: fill stroke color border-color background-color
       @else
         .category-#{$property}-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important
+
+// Iterate through pop-colors map to create colors for classes
+@each $color-name, $color in $pop-colors
+
+  // Iterate through properties var to create properties for classes
+  @each $property in $properties
+
+    // We want to use 'bg' for the class name when using the
+    // background-color property
+    //
+    // We want to use 'border' for the class name when using the
+    // border-color property
+    //
+    // Else just use the regular property name
+    @if $property == background-color
+      .pop-bg-#{$color-name}
+        #{$property}: pop-color($color-name) !important
+    @else if $property == border-color
+      .pop-border-#{$color-name}
+        #{$property}: pop-color($color-name) !important
+    @else
+      .pop-#{$property}-#{$color-name}
+        #{$property}: pop-color($color-name) !important
diff --git a/_sass/leap/atoms/_flexbox.sass b/_sass/leap/atoms/_flexbox.sass
@@ -1,10 +1,10 @@
-// Adds flex and flex-inline classes
+// Adds flex and inline-flex classes
 @mixin flex-container($suffix)
   .flex
     &-block-#{$suffix}
       display: flex !important
     &-inline-#{$suffix}
-      display: flex-inline !important
+      display: inline-flex !important
 
 // Adds flex direction classes
 @mixin flex-direction($suffix)
@@ -107,8 +107,12 @@
       align-self: auto !important
     &-start-#{$suffix}
       align-self: flex-start !important
+    &-start-flush-#{$suffix}
+      align-self: start !important
     &-end-#{$suffix}
       align-self: flex-end !important
+    &-end-flush-#{$suffix}
+      align-self: end !important
     &-center-#{$suffix}
       align-self: center !important
     &-stretch-#{$suffix}

diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass
@@ -99,9 +99,11 @@ $form-states: success, warning, error
       &:focus
         background-color: $form-background-active
         border-color: $form-border-active
+        box-shadow: 0 0 0px 2px $form-border-active
         // Focus & Hover States for Form Feedback
         +form-feedback-bg-active
         +form-feedback-active(border-color)
+        box-shadow: 0 0 0px 2px $form-border-active
       // Default Hover State
       &:hover
         border-color: $form-border-active
@@ -141,6 +143,7 @@ $form-states: success, warning, error
     &:focus
       background-color: $form-background-active
       border: 2px solid $form-border-active
+      box-shadow: 0 0 0px 2px $form-border-active
       +form-feedback-bg-active
       +form-feedback-active(border-color)
     &:hover
@@ -189,8 +192,9 @@ $form-states: success, warning, error
       color: $form-color-active
       &:before
         border: 2px solid $form-border-active
+        box-shadow: 0 0 0px 2px $form-border-active
     // Hover states for radio and checkboxes
-    &:hover+.form-label
+    &:hover+.form-label, &:focus+.form-label
       cursor: pointer
       &:before
         border: 2px solid $form-border-active
@@ -199,6 +203,7 @@ $form-states: success, warning, error
     &:hover+.text-color-white, &:focus+.text-color-white
       &:before
         border: 2px solid #fff
+        box-shadow: 0 0 0px 2px $form-border-active
   // Default Radio Styles
   &-radio
     &+.form-label:before
@@ -253,6 +258,7 @@ $form-states: success, warning, error
     &:focus + .form-label
       background-color: $form-background-active
       border: 2px solid $form-border-active
+      box-shadow: 0 0 0px 2px $form-border-active
       color: $form-color-active
       // Form feedback
       +form-feedback-active(border-color, color)
@@ -302,6 +308,9 @@ $form-states: success, warning, error
         float: left
         &:focus
           border: 2px solid #fff
+          box-shadow: 0 0 0px 4px rgba(0,0,0,.75)
+          outline: 2px dotted transparent
+          outline-offset: 2px
 
       // Variable width feedback message with top arrow
       .form-radio ~ .form-feedback,
@@ -431,12 +440,15 @@ $form-states: success, warning, error
         +form-feedback-bg-active
         +form-feedback-active(border-color)
         // Default Hover and Focus States
-        &:hover, &:focus
+        &:hover
           -webkit-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
           -moz-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
           box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
         &:focus
           border: 2px solid #fff
+          box-shadow: 0 0 0px 4px rgba(0,0,0,.75)
+          outline: 2px dotted transparent
+          outline-offset: 2px
           // Focus & Hover States for Form Feedback
           +form-feedback-bg-active
       // Getting rid of extra spacing that appears below textarea; size varies among browsers.
@@ -470,9 +482,9 @@ $form-states: success, warning, error
       &:focus
         background-color: $form-background-active
         border: 2px solid #fff
-        -webkit-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
-        -moz-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
-        box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
+        box-shadow: 0 0 0px 4px rgba(0,0,0,.75)
+        outline: 2px dotted transparent
+        outline-offset: 2px
       &:hover
         background-color: $form-background-active
         color: $form-color-active
@@ -517,13 +529,20 @@ $form-states: success, warning, error
           color: #fff
       // Adding in focus states for accessibility
       // Hover states for radio and checkboxes
-      &:hover+.form-label, &:focus+.form-label
+      &:hover+.form-label
         &:before
           border: 2px solid #fff
           cursor: pointer
           -webkit-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
           -moz-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
           box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
+      &:focus+.form-label
+        &:before
+          border: 2px solid #fff
+          cursor: pointer
+          box-shadow: 0 0 0px 4px rgba(0,0,0,.75)
+          outline: 2px dotted transparent
+          outline-offset: 2px
     // Default Radio Styles
     &-radio
       &+.form-label:before
@@ -576,10 +595,13 @@ $form-states: success, warning, error
         +form-feedback-bg-active
         +form-feedback(border-color, color)
       // Adding in focus & hover states
-      &:focus + .form-label,
       & + .form-label:hover
         -webkit-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
         -moz-box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
         box-shadow: 0px 0px 0px 3px rgba(45,51,57,0.6)
+      &:focus + .form-label
+        box-shadow: 0 0 0px 4px rgba(0,0,0,.75)
+        outline: 2px dotted transparent
+        outline-offset: 2px
         color: $form-color-active
         // Focused & Hover states for form feedback