tuxedo-css-rails 0.0.1

data/vendor/assets/javascripts/tuxedo-css.js

@@ -0,0 +1,118 @@
+$(document).ready(function() {
+  //=================Animation functionality=============//
+  function animations() {
+    $(window).scroll( function(){  /* Every time the window is scrolled ... */
+
+      /* Check the location of each animate-in elements */
+      $('.animate-in').each( function(){
+        var objectBottom = $(this).offset().top + $(this).outerHeight() - 200;
+        var windowBottom = $(window).scrollTop() + $(window).height();
+
+        /* If the object is completely visible in the window, fade it it */
+        if (objectBottom < windowBottom) { //object comes into view (scrolling down)
+          if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
+        } else { //object goes out of view (scrolling up) fade out
+          if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
+        }
+      });
+    });
+  }
+
+  //=================Mobile menu functionality=============//
+  function mobileMenu() {
+    $('.hamburger').click(function() {
+      $('.flyout').show();
+      $('body').css({'overflow': 'hidden'});
+    });
+    $('.close').click(function() {
+      $('.flyout').hide();
+      $('body').css({'overflow': 'auto'});
+    });
+    $('.fly-dropdown').click(function() {
+      $(this).children('.dropdown-menu').fadeToggle();
+    });
+    $('.sub-fly-dropdown').hover(function() {
+      $(this).children('.sub-dropdown-menu').fadeToggle();
+    });
+  }
+
+
+  // ================Slideshow Functionality ================//
+function heroSlideshow() {
+    var totalImages = $(".images").children().length; // # of total slideshow images
+    var imageCounter = $(".images").children().length; // keeps track of current image
+    var interval = null;
+      function startSlideshow() { interval = setInterval(function() {
+      var photoNumber = parseInt($(".images .active").attr('class')); // active photo
+      $(".images img").removeClass("active");
+      if (photoNumber < totalImages) {
+        imageCounter = photoNumber + 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      } else if (photoNumber === totalImages) {
+        imageCounter = 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      } else {
+        imageCounter += 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      }
+      photoNumber += 1;
+      $(".circle").removeClass("active");
+      $(".circle:nth-child("+imageCounter+")").addClass("active");
+    }, 5000); }
+
+    function stopSlideshow() { clearInterval(interval)}
+
+    startSlideshow();
+    $('.left-arrow').click(function(){
+      stopSlideshow();
+      var photoNumber = parseInt($(".images .active").attr('class')); // active photo
+      $(".circle").removeClass("active");
+      $(".images img").removeClass("active");
+      if (photoNumber===1) {
+        imageCounter = $(".images").children().length;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      } else {
+        imageCounter -= 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      }
+      $(".circle:nth-child("+imageCounter+")").addClass("active");
+      startSlideshow();
+    });
+
+    $('.right-arrow').click(function(){
+      stopSlideshow();
+      var photoNumber = parseInt($(".images .active").attr('class')); // active photo
+      $(".circle").removeClass("active");
+      $(".images img").removeClass("active");
+      if (photoNumber < totalImages) {
+        imageCounter = photoNumber + 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      } else if (photoNumber === totalImages) {
+        imageCounter = 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      } else {
+        imageCounter += 1;
+        $(".images img:nth-child("+imageCounter+")").addClass("active");
+      }
+      $(".circle:nth-child("+imageCounter+")").addClass("active");
+      startSlideshow();
+    });
+    $(".circle").click(function(){
+      stopSlideshow();
+      var circleNumber = $(this).attr('class').replace(/[^\d]/g, ""); // clicked circle
+      $(".circle").removeClass("active");
+      $(this).addClass("active");
+      $(".images img").removeClass("active");
+      $(".images img:nth-child("+circleNumber+")").addClass("active");
+      imageCounter = circleNumber;
+      startSlideshow();
+    });
+  }
+
+
+////////// Add Functions to Call HERE//////////
+heroSlideshow();
+mobileMenu();
+animations();
+
+});

data/vendor/assets/stylesheets/_animations.scss

@@ -0,0 +1,3 @@
+.animate-in {
+  opacity: 0;
+}

data/vendor/assets/stylesheets/_buttons.scss

@@ -0,0 +1,68 @@
+button {
+  font-family: $header-font;
+  font-size: 1rem;
+  min-height: 50px;
+  font-weight: 500;
+  padding: 15px 40px;
+  margin-bottom: 20px;
+  transition: background ease-in-out 200ms, border ease-in-out 200ms;
+  &:hover, &:focus {
+    cursor: pointer;
+    outline: none;
+  }
+}
+.btn-light {
+  color: $dark;
+  background: $light;
+  border: 2px solid $light;
+  &:hover {
+    background: darken($light, 10%);
+    border-color: darken($light, 10%);
+  }
+}
+.btn-dark {
+  color: $light;
+  background: $dark;
+  border: 2px solid $dark;
+  &:hover {
+    background: lighten($dark, 20%);
+    border-color: lighten($dark, 20%);
+  }
+}
+.btn-pop {
+  color: $light;
+  background: $color-pop;
+  border: 2px solid $color-pop;
+  &:hover {
+    background: darken($color-pop, 10%);
+    border-color: darken($color-pop, 10%);
+  }
+}
+[class*="btn-ghost"] {
+  background: none;
+}
+.btn-ghost-light {
+  border: 2px solid $light;
+  color: $light;
+  &:hover {
+    background: $light;
+    color: $dark;
+  }
+}
+.btn-ghost-dark {
+  border: 2px solid $dark;
+  color: $dark;
+  &:hover {
+    background: $dark;
+    color: $light;
+  }
+}
+.btn-ghost-pop {
+  border: 2px solid $color-pop;
+  color: $color-pop;
+  &:hover {
+    border: 2px solid $color-pop;
+    background: $color-pop;
+    color: $light;
+  }
+}

data/vendor/assets/stylesheets/_fonts.scss

@@ -0,0 +1,83 @@
+h1, h2, h3, h4, h5, blockquote {
+  font-family: $header-font;
+}
+h1 {
+    font-size: 36px;
+    line-height: 40px;
+    margin-top: 20px;
+    padding: 10px 0;
+}
+
+h2 {
+    font-size: 30px;
+    line-height: 36px;
+    padding: 10px 0;
+}
+
+h3 {
+    font-size: 24px;
+    line-height: 28px;
+    padding: 10px 0;
+}
+
+h4 {
+    font-size: 18px;
+    line-height: 22px;
+    padding: 5px 0;
+}
+
+h5 {
+    font-size: 16px;
+    line-height: 20px;
+    padding: 5px 0;
+}
+
+h6 {
+  @extend %body-font;
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: normal;
+  color: $dark-grey;
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+}
+p {
+  @extend %body-font;
+  font-size: 16px;
+  line-height: 20px;
+  margin-bottom: 20px;
+}
+small {
+  @extend %body-font;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 14px;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+  &:hover {
+    color: $md-grey;
+    cursor: pointer;
+  }
+}
+blockquote {
+  font-size: 24px;
+  font-style: italic;
+  font-weight: lighter;
+  max-width: 500px;
+  border-left: 2px solid $dark;
+  padding-left: 30px;
+  line-height: 34px;
+  margin-bottom: 20px;
+  cite {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+  }
+}
+ul {
+  font-family: $body-font;
+  font-weight: lighter;
+  list-style-position: inside;
+}

data/vendor/assets/stylesheets/_footer.scss

@@ -0,0 +1,14 @@
+footer {
+  position: relative;
+  justify-content: space-around;
+  align-items: center;
+  bottom: 0;
+  width: 100%;
+  min-height: 65px;
+  height: auto;
+  background: $light;
+  @media screen and #{$tablet} {
+    height: auto;
+    min-height: 65px;
+  }
+}

data/vendor/assets/stylesheets/_forms.scss

@@ -0,0 +1,285 @@
+form {
+  margin: auto; //centers forms
+  padding: 40px;
+}
+[class*="form-divide"] { // Form-divide styling
+  margin: 30px 0;
+  height: 1px;
+}
+.form-divide-light {
+  border-bottom: 2px solid $light;
+}
+.form-divide-dark {
+  border-bottom: 2px solid $dark;
+}
+.form-divide-pop {
+  border-bottom: 2px solid $color-pop;
+}
+label {     // For labels used with selects/inputs/textareas
+  font-size: 1rem;
+  font-family: $header-font;
+}
+[class*="form-header"] {   // form-header styling
+  font-size: 3rem;
+  padding: 2rem;
+  font-family: $header-font;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+.form-header-dark {
+  color: $dark;
+  border-bottom: 2px solid $dark;
+}
+.form-header-light {
+  color: $light;
+  border-bottom: 2px solid $light;
+}
+input, textarea, select { // Base styling for inputs/textareas/selects
+  display: block;
+  margin: 5px 0 30px 0;
+  width: 100%;
+  font-size: 1rem;
+  font-family: $header-font;
+  &:focus {
+    outline: none;
+  }
+}
+// ===============Input Styling==============//
+input {
+  height: 3rem;
+  padding-left: 20px;
+  background: none;
+}
+// Input Placeholder color
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+  color: $md-grey;
+}
+::-moz-placeholder { /* Firefox 19+ */
+  color: $md-grey;
+}
+:-ms-input-placeholder { /* IE 10+ */
+  color: $md-grey;
+}
+:-moz-placeholder { /* Firefox 18- */
+  color: $md-grey;
+}
+.input-light {
+  border: 3px solid $light;
+  background: $light;
+  color: $dark;
+}
+.input-dark {
+  border: 3px solid $dark;
+  background: $dark;
+  color: $light;
+}
+.input-pop {
+  border: 3px solid $color-pop;
+  background: $color-pop;
+  color: $light;
+}
+// ===============Select Styling==============//
+select {
+  height: 3em;
+  -webkit-appearance: none;
+  padding-left: 20px;
+  border-radius: 0px;
+  outline: none;
+  // Dropdown Arrow SVG image:
+  background: url("data:image/svg+xml;utf8,<svg width='17px'    height='9px' viewBox='456 21 17 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+  <polygon id='Path-2' stroke='none' fill='#F4F4F4' fill-rule='evenodd' points='456 21 473 21 464.5 29.1301693'></polygon>
+  </svg>");
+  background-position: 96% 50%;
+  background-color: white;
+  background-repeat: no-repeat;
+  border: white;
+}
+.select-light {
+  border: $light;
+  // Dropdown Arrow SVG image on light background:
+  background: url("data:image/svg+xml;utf8,<svg width='17px'    height='9px' viewBox='456 21 17 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+  <polygon id='Path-2' stroke='none' fill='#191919' fill-rule='evenodd' points='456 21 473 21 464.5 29.1301693'></polygon>
+  </svg>");
+  background-position: 96% 50%;
+  background-color: $light;
+  background-repeat: no-repeat;
+}
+.select-dark {
+  border: $dark;
+  background-color: $dark;
+  color: $light;
+}
+.select-pop {
+  border: $color-pop;
+  background-color: $color-pop;
+  color: $light;
+}
+
+// ===============Textarea Styling==============//
+textarea {
+  border: none;
+  max-width: 100%; //keeps textarea from expanding outside container
+  max-height: 300px; //keeps textarea at or under 300px height expanded
+  padding: 20px 0 0 20px;
+}
+
+.textarea-light {
+  border: 3px solid $light;
+  background: $light;
+  color: $dark;
+}
+.textarea-dark {
+  border: 3px solid $dark;
+  background: $dark;
+  color: $light;
+}
+.textarea-pop {
+  border: 3px solid $color-pop;
+  background: $color-pop;
+  color: $light;
+}
+
+// ===============Checkbox Styling==============//
+.checkbox-light {
+  margin: 20px 0;
+  color: $light;
+}
+.checkbox-dark {
+  margin: 20px 0;
+  color: $dark;
+}
+
+[type="checkbox"]:not(:checked), //Keeps actual checkbox hidden offscreen
+[type="checkbox"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+[type="checkbox"]:not(:checked) + label, //Position of the label
+[type="checkbox"]:checked + label {
+  position: relative;
+  padding-left: 2.5rem;
+  margin-right: 20px;
+  padding-top: 4px;
+  cursor: pointer;
+}
+[type="checkbox"]:not(:checked) + label:before, //Size and styling of box
+[type="checkbox"]:checked + label:before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0;
+  width: 1rem; height: 1rem;
+}
+.checkbox-light [type="checkbox"]:not(:checked) + label:before,
+.checkbox-light [type="checkbox"]:checked + label:before {
+  border: 3px solid $light;
+}
+.checkbox-dark [type="checkbox"]:not(:checked) + label:before,
+.checkbox-dark [type="checkbox"]:checked + label:before {
+  border: 3px solid $dark;
+}
+[type="checkbox"]:not(:checked) + label:after,
+[type="checkbox"]:checked + label:after { //Check mark styling
+  content: ''; //Add content to make something appear inside box
+  position: absolute;
+  top: 1px; left: 1px;
+  width: 1.3rem;
+  height: 1.3rem;
+  transition: width ease-in 200ms, height ease-in 200ms; //Transitions width and height when changed - if you want to transition another property change width and height values and add 'Starting Values' below
+}
+.checkbox-light [type="checkbox"]:not(:checked) + label:after,
+.checkbox-light [type="checkbox"]:checked + label:after {
+  background: $light;
+}
+.checkbox-dark [type="checkbox"]:not(:checked) + label:after,
+.checkbox-dark [type="checkbox"]:checked + label:after {
+  background: $dark;
+}
+[type="checkbox"]:not(:checked) + label:after { //Starting Values for check mark
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+[type="checkbox"]:disabled:not(:checked) + label:before,
+[type="checkbox"]:disabled:checked + label:before { //Disabled Checkbox Styling
+  border-color: $md-grey;
+  background-color: $md-grey;
+}
+[type="checkbox"]:disabled:checked + label:after { //Disabled Label Styling
+  color: $md-grey;
+}
+[type="checkbox"]:disabled + label {
+  color: $md-grey;
+}
+// ===============Radio Button Styling==============//
+.radio-light {
+  margin: 20px 0;
+  color: $light;
+}
+.radio-dark {
+  margin: 20px 0;
+  color: $dark;
+}
+[type="radio"]:not(:checked), //Keeps actual radio button hidden offscreen
+[type="radio"]:checked {
+  position: absolute;
+  left: -9999px;
+}
+[type="radio"]:not(:checked) + label, //Position of the label
+[type="radio"]:checked + label {
+  position: relative;
+  padding-left: 2.5rem;
+  margin-right: 20px;
+  padding-top: 4px;
+  cursor: pointer;
+}
+/* radio button styling */
+[type="radio"]:not(:checked) + label:before, //Size and styling of button
+[type="radio"]:checked + label:before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0;
+  width: 1rem; height: 1rem;
+  border-radius: 50%;
+}
+.radio-light [type="radio"]:not(:checked) + label:before,
+.radio-light [type="radio"]:checked + label:before {
+  border: 3px solid $light;
+}
+.radio-dark [type="radio"]:not(:checked) + label:before,
+.radio-dark [type="radio"]:checked + label:before {
+  border: 3px solid $dark;
+}
+[type="radio"]:not(:checked) + label:after, //Radio Button selected fill
+[type="radio"]:checked + label:after {
+  content: ''; //Add content to make something appear inside button
+  position: absolute;
+  top: 1px; left: 1px;
+  width: 1.3rem;
+  height: 1.3rem;
+  border-radius: 100%;
+  transition: width ease-in 200ms, height ease-in 200ms; //Transitions width and height when changed - if you want to transition another property change width and height values and add 'Starting Values' below
+}
+.radio-light [type="radio"]:not(:checked) + label:after,
+.radio-light [type="radio"]:checked + label:after {
+  background: $light;
+}
+.radio-dark [type="radio"]:not(:checked) + label:after,
+.radio-dark [type="radio"]:checked + label:after {
+  background: $dark;
+}
+[type="radio"]:not(:checked) + label:after { //Starting Values of button fill
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+[type="radio"]:disabled:not(:checked) + label:before, //Disabled button
+[type="radio"]:disabled:checked + label:before {
+  border-color: $md-grey;
+  background-color: $md-grey;
+}
+[type="radio"]:disabled:checked + label:after { //Disabled label
+  color: $md-grey;
+}
+[type="radio"]:disabled + label {
+  color: $md-grey;
+}