Merge pull request #1 from evanmac123/style_guide

Style guide

assets/components/foundation-sites/scss/_global.scss

@@ -22,7 +22,7 @@ $global-lineheight: 1.5 !default;
 
 /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
 /// @type Map
-$foundation-palette: (
+$theme-palette: (
   primary: #1779ba,
   secondary: #767676,
   success: #3adb76,
@@ -94,8 +94,8 @@ $global-text-direction: ltr !default;
 /// @type Boolean
 $global-flexbox: false !default;
 
-@if not map-has-key($foundation-palette, primary) {
-  @error 'In $foundation-palette, you must have a color named "primary".';
+@if not map-has-key($theme-palette, primary) {
+  @error 'In $theme-palette, you must have a color named "primary".';
 }
 
 // Internal variables used for text direction

assets/components/foundation-sites/scss/components/_badge.scss

@@ -20,7 +20,7 @@ $badge-color-alt: $black !default;
 
 /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
 /// @type Map
-$badge-palette: $foundation-palette !default;
+$badge-palette: $theme-palette !default;
 
 /// Default padding inside badges.
 /// @type Number

assets/components/foundation-sites/scss/components/_button-group.scss

@@ -207,7 +207,7 @@ $buttongroup-radius-on-each: true !default;
     &.expanded { @include button-group-expand; }
 
     // Colors
-    @each $name, $color in $foundation-palette {
+    @each $name, $color in $theme-palette {
       @if $button-fill != hollow {
         &.#{$name} #{$buttongroup-child-selector} {
           @include button-style($color, auto, auto);

assets/components/foundation-sites/scss/components/_button.scss

@@ -53,7 +53,7 @@ $button-sizes: (
 
 /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
 /// @type Map
-$button-palette: $foundation-palette !default;
+$button-palette: $theme-palette !default;
 
 /// opacity for a disabled button.
 /// @type List

assets/components/foundation-sites/scss/components/_callout.scss

@@ -89,7 +89,7 @@ $callout-link-tint: 30% !default;
   .callout {
     @include callout;
 
-    @each $name, $color in $foundation-palette {
+    @each $name, $color in $theme-palette {
       &.#{$name} {
         @include callout-style($color);
       }

assets/components/foundation-sites/scss/components/_label.scss

@@ -20,7 +20,7 @@ $label-color-alt: $black !default;
 
 /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
 /// @type Map
-$label-palette: $foundation-palette !default;
+$label-palette: $theme-palette !default;
 
 /// Default font size for labels.
 /// @type Number

assets/components/foundation-sites/scss/components/_progress-bar.scss

@@ -43,7 +43,7 @@
   .progress {
     @include progress-container;
 
-    @each $name, $color in $foundation-palette {
+    @each $name, $color in $theme-palette {
       &.#{$name} {
         .progress-meter {
           background-color: $color;

assets/components/foundation-sites/scss/forms/_progress.scss

@@ -67,7 +67,7 @@ $progress-radius: $global-radius !default;
       }
     }
 
-    @each $name, $color in $foundation-palette {
+    @each $name, $color in $theme-palette {
       &.#{$name} {
         // Internet Explorer sets the fill with color
         color: $color;

assets/components/foundation-sites/scss/settings/_settings.scss

@@ -49,7 +49,7 @@
 $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
-$foundation-palette: (
+$theme-palette: (
   primary: #1779ba,
   secondary: #767676,
   success: #3adb76,
@@ -220,7 +220,7 @@ $accordionmenu-arrow-size: 6px;
 $badge-background: $primary-color;
 $badge-color: $white;
 $badge-color-alt: $black;
-$badge-palette: $foundation-palette;
+$badge-palette: $theme-palette;
 $badge-padding: 0.3em;
 $badge-minwidth: 2.1em;
 $badge-font-size: 0.6rem;
@@ -254,7 +254,7 @@ $button-sizes: (
   default: 0.9rem,
   large: 1.25rem,
 );
-$button-palette: $foundation-palette;
+$button-palette: $theme-palette;
 $button-opacity-disabled: 0.25;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
@@ -394,7 +394,7 @@ $form-button-radius: $global-radius;
 $label-background: $primary-color;
 $label-color: $white;
 $label-color-alt: $black;
-$label-palette: $foundation-palette;
+$label-palette: $theme-palette;
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
 $label-radius: $global-radius;

assets/components/foundation-sites/scss/util/_color.scss

@@ -92,35 +92,35 @@
   @return scale-color($color, $lightness: $scale);
 }
 
-/// Get color from foundation-palette
+/// Get color from theme-palette
 ///
-/// @param {key} color key from foundation-palette
+/// @param {key} color key from theme-palette
 ///
-/// @returns {Color} color from foundation-palette
+/// @returns {Color} color from theme-palette
 @function get-color($key) {
-  @if map-has-key($foundation-palette, $key) {
-    @return map-get($foundation-palette, $key);
+  @if map-has-key($theme-palette, $key) {
+    @return map-get($theme-palette, $key);
   }
   @else {
-    @error 'given $key is not available in $foundation-palette';
+    @error 'given $key is not available in $theme-palette';
   }
 }
 
-/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+/// Transfers the colors in the `$theme-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
 @mixin add-foundation-colors() {
-  @if map-has-key($foundation-palette, primary) {
-    $primary-color: map-get($foundation-palette, primary) !global;
+  @if map-has-key($theme-palette, primary) {
+    $primary-color: map-get($theme-palette, primary) !global;
   }
-  @if map-has-key($foundation-palette, secondary) {
-    $secondary-color: map-get($foundation-palette, secondary) !global;
+  @if map-has-key($theme-palette, secondary) {
+    $secondary-color: map-get($theme-palette, secondary) !global;
   }
-  @if map-has-key($foundation-palette, success) {
-    $success-color: map-get($foundation-palette, success) !global;
+  @if map-has-key($theme-palette, success) {
+    $success-color: map-get($theme-palette, success) !global;
   }
-  @if map-has-key($foundation-palette, warning) {
-    $warning-color: map-get($foundation-palette, warning) !global;
+  @if map-has-key($theme-palette, warning) {
+    $warning-color: map-get($theme-palette, warning) !global;
   }
-  @if map-has-key($foundation-palette, alert) {
-    $alert-color: map-get($foundation-palette, alert) !global;
+  @if map-has-key($theme-palette, alert) {
+    $alert-color: map-get($theme-palette, alert) !global;
   }
 }

assets/javascript/custom/custom.js

@@ -0,0 +1 @@
+jQuery(document);

assets/javascript/custom/init-foundation.js

@@ -1 +1,28 @@
 jQuery(document).foundation();
+
+$('li.top-link').click(function(e) {
+  $('li.top-link').not(this).find('ul').hide();
+  $(this).find('ul').toggle();
+  e.preventDefault();
+    console.log("here");
+});
+
+$('.opener').click(function(e) {
+  e.preventDefault();
+  var $this = $(this).parent();
+
+  if($this.hasClass("opened")){
+    $('.sub-menu').slideUp(400);
+    $this.removeClass("opened");
+  }
+  else{
+    $(".opener").removeClass("opened");
+    $('.sub-menu').slideUp(400);
+    $this.children('.sub-menu').delay(400).slideDown("slow");
+    $this.addClass("opened");
+  }
+});
+
+$('.sub-menu-closer').click(function(e){
+  $('.sub-menu').slideUp(400);
+});

assets/scss/_mixins.scss

@@ -0,0 +1,47 @@
+@mixin hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@mixin fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+@mixin underline{
+  &:after {
+    content: '';
+    display:block;
+    width: 100%;
+    height: 1.4px;
+    background-color: $primary-color;
+    transform-origin: left;
+    transform: scaleX(0);
+    transition: transform 0.45s;
+    margin-top:.2em;
+  }
+}
+
+@mixin menu-item{
+  font-size: 0.9em;
+  font-weight: 400;
+  border-bottom: 1px $secondary-color solid;
+  line-height: 2.3em;
+}
+
+@mixin shadow{
+  -webkit-box-shadow: 1px 1px 15px -1px rgba(80,79,79,0.41);
+  -moz-box-shadow: 1px 1px 15px -1px rgba(80,79,79,0.41);
+  box-shadow: 1px 1px 15px -1px rgba(80,79,79,0.41);
+}
+
+@mixin inner-shadow{
+  -webkit-box-shadow: inset 1px 1px 15px -1px rgba(80,79,79,0.41);
+  -moz-box-shadow: inset 1px 1px 15px -1px rgba(80,79,79,0.41);
+  box-shadow: inset 1px 1px 15px -1px rgba(80,79,79,0.41);
+}

assets/scss/_typography.scss

@@ -0,0 +1,98 @@
+h1 {
+  text-transform: uppercase;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $light-gray;
+}
+
+.sidebar-left .row {
+  //subtitle
+  margin-top: 2em;
+}
+
+blockquote {
+  color: $primary-color;
+  font-style: italic;
+  font-weight: 300;
+  font-size: 1.9em;
+}
+//for all bolded statments
+.bold,
+.type__callout,
+bold {
+  font-weight: bold;
+  color: $medium-gray;
+}
+
+p a {
+  position: relative;
+  display: inline-block;
+  @include underline;
+  color: $primary-color;
+  cursor: pointer;
+  //transition: opacity 0.35s;
+}
+
+a:hover {
+  &:after {
+    transform-origin: right;
+    transform: scaleX(1);
+  }
+}
+
+.no-underline {
+  &:hover {
+    opacity: 0.9;
+  }
+
+  &:after {
+    display: none;
+  }
+}
+
+ul li {
+  list-style-type: none;
+}
+
+ul li:before {
+  color: $primary-color;
+  float: left;
+  margin: 0 0 0 -1em;
+  width: 1em;
+  content: '\25AA';
+}
+
+input::-webkit-input-placeholder {
+  /* Chrome */
+  color: $white;
+}
+
+input:-ms-input-placeholder {
+  /* IE 10+ */
+  color: $white;
+}
+
+input::-moz-placeholder {
+  /* Firefox 19+ */
+  color: $white;
+  opacity: 1;
+}
+
+input:-moz-placeholder {
+  /* Firefox 4 - 18 */
+  color: $white;
+  opacity: 1;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

assets/scss/foundation.scss

@@ -22,6 +22,9 @@
 @import 'font-awesome';
 @import 'motion-ui';
 
+//Mixins
+@import 'mixins';
+
 // Foundation global styles
 @include foundation-global-styles;
 
@@ -90,3 +93,8 @@
 // Templates
 @import "templates/front";
 @import "templates/kitchen-sink";
+@import "templates/left-sidebar";
+@import "templates/top-menus";
+
+// Custom Global Styling
+@import "typography";