timequake 1.0.5 → 2.0.0

data/app/assets/stylesheets/timequake/typography.scss

@@ -9,17 +9,20 @@ $heading-3-font-size: 1.17rem !default;
 $heading-4-font-size: 1.12rem !default;
 $heading-5-font-size: .83rem !default;
 $heading-6-font-size: .75rem !default;
+$heading-margin: 0 0 .5rem 0 !default;
+$copy-margin: 0 0 .5rem 0 !default;
 $btn-font: $copy-font !default;
 
 html {
   font-family: $body-font;
   font-size: $body-font-size;
+  color: $heading-color;
 }
 
 .copy {
   font-family: $copy-font;
   color: $copy-color;
-  margin: 0 0 .5rem 0;
+  margin: $copy-margin;
   font-size: $copy-font-size;
 }
 
@@ -31,7 +34,7 @@ html {
 .heading-5,
 .heading-6, {
   font-family: $heading-font;
-  margin: 0 0 .5rem 0;
+  margin: $heading-margin;
 }
 
 .heading-1 { font-size: $heading-1-font-size; }
@@ -40,3 +43,60 @@ html {
 .heading-4 { font-size: $heading-4-font-size; }
 .heading-5 { font-size: $heading-5-font-size; }
 .heading-6 { font-size: $heading-6-font-size; }
+
+@for $i from 1 through 100 {
+  .fz-#{$i} { font-size: #{$i}px; }
+}
+
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+/* TEXT HELPERS */
+.bold { font-weight: bold !important; }
+.italic { font-style: italic !important; }
+.uppercase { text-transform: uppercase !important; }
+.lowercase { text-transform: lowercase !important; }
+.capitalize { text-transform: capitalize !important; }
+.nowrap { white-space: nowrap !important; }
+.underline { text-decoration: underline !important; }
+.line-through { text-decoration: line-through !important; }
+
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.text-justify { text-align: justify !important; }
+
+@media (min-width: $medium) {
+  .md-text-center { text-align: center !important; }
+  .md-text-right { text-align: right !important; }
+  .md-text-left { text-align: left !important; }
+  .md-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $large) {
+  .lg-text-center { text-align: center !important; }
+  .lg-text-right { text-align: right !important; }
+  .lg-text-left { text-align: left !important; }
+  .lg-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-text-center { text-align: center !important; }
+  .xlg-text-right { text-align: right !important; }
+  .xlg-text-left { text-align: left !important; }
+  .xlg-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-text-center { text-align: center !important; }
+  .xxlg-text-right { text-align: right !important; }
+  .xxlg-text-left { text-align: left !important; }
+  .xxlg-text-justify { text-align: justify !important; }
+}

data/app/assets/stylesheets/timequake/universal.scss

@@ -2,12 +2,18 @@ $main-overflow: hidden !default;
 $section-padding-desktop: 2rem 0 !default;
 $section-padding-mobile: 1rem 0 !default;
 
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 main { overflow: $main-overflow; }
 
 section {
   padding: $section-padding-mobile;
 
-  @include breakpoint('large') {
+  @media (min-width: $large) {
     padding: $section-padding-desktop;
   }
 }
@@ -15,11 +21,16 @@ section {
 a {
   color: inherit;
   text-decoration: none;
+  transition: 300ms;
 }
 
 ul,
 ol {
   &.no-style { list-style-type: none; }
+  &.circle { list-style-type: circle; }
+  &.square { list-style-type: square; }
+  &.upper-roman { list-style-type: upper-roman; }
+  &.lower-alpha { list-style-type: lower-alpha; }
 }
 
 img {

data/app/assets/stylesheets/timequake/visibility.scss

@@ -0,0 +1,39 @@
+/* VISIBILITY HELPERS */
+.hide { display: none !important; }
+.md-show { display: none !important; }
+.md-show-inline { display: none !important; }
+.lg-show { display: none !important; }
+.lg-show-inline { display: none !important; }
+.xlg-show { display: none !important; }
+.xlg-show-inline { display: none !important; }
+.xxlg-show { display: none !important; }
+.xxlg-show-inline { display: none !important; }
+.invisible { visibility: hidden !important; }
+
+@media (min-width: $medium) {
+  .md-hide { display: none !important; }
+  .md-show { display: block !important; }
+  .md-show-inline { display: inline-block !important; }
+  .md-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $large) {
+  .lg-hide { display: none !important; }
+  .lg-show { display: block !important; }
+  .lg-show-inline { display: inline-block !important; }
+  .lg-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-hide { display: none !important; }
+  .xlg-show { display: block !important; }
+  .xlg-show-inline { display: inline-block !important; }
+  .xlg-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-hide { display: none !important; }
+  .xxlg-show { display: block !important; }
+  .xxlg-show-inline { display: inline-block !important; }
+  .xxlg-invisible { visibility: hidden !important; }
+}

data/lib/generators/timequake/templates/timequake_overrides.scss

@@ -1,3 +1,15 @@
+//FONTS add fonts here
+// e.g.
+// @font-face {
+//   font-family: 'Butler Black';
+//   src: font-url('butler_black.otf')
+// }
+//
+// @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;900&display=swap');
+//
+// $butler_black: 'Butler Black', serif;
+// $raleway: 'Raleway', sans-serif;
+
 // BREAKPOINTS
 $medium: 600px;
 $large: 800px;
@@ -23,6 +35,7 @@ $teal: #2D9FA2;
 $primary-color: $red;
 $secondary-color: $yellow;
 $tertiary-color: $blue;
+$heading-color: #333;
 $copy-color: #333;
 $success-color: #2FAC58;
 $info-color: #25327C;
@@ -42,6 +55,8 @@ $heading-3-font-size: 1.17rem;
 $heading-4-font-size: 1.12rem;
 $heading-5-font-size: .83rem;
 $heading-6-font-size: .75rem;
+$heading-margin: 0 0 .5rem 0;
+$copy-margin: 0 0 .5rem 0;
 
 // BUTTONS
 $btn-min-width: 145px;
@@ -50,6 +65,7 @@ $btn-border-radius: 5px;
 $btn-border-width: 1px;
 $btn-padding: 11px 5px;
 $btn-font-size: 16px;
+$btn-font-weight: 700;
 $btn-font: $copy-font;
 $btn-color: $primary-color;
 $btn-border-color: $primary-color;
@@ -77,15 +93,17 @@ $label-font: $form-font;
 $input-font-size: $copy-font-size;
 $label-font-size: $copy-font-size;
 $file-font-size: 14px;
+$checkbox-width: 16px;
+$checkbox-margin-bottom: 8px;
+$radio-width: 13px;
+$radio-margin-bottom: 8px;
 
 // MODALS
 $modal-bg-color: $white;
 $modal-max-width: 1200px;
 $modal-content-padding: 20px;
 $modal-border-radius: 5px;
-$modal-border-color: $white;
-$modal-border-width: 5px;
-$modal-border-style: solid;
+$modal-border: 5px solid $white;
 $modal-close-size: 30px;
 $modal-close-color: $copy-color;
 $modal-close-transform: rotate(45deg);
@@ -106,3 +124,60 @@ $section-padding-desktop: 2rem 0;
 $section-padding-mobile: 1rem 0;
 
 @import 'timequake/index';
+
+// HAMBURGERS
+$hamburger-padding-x           : 15px;
+$hamburger-padding-y           : 15px;
+$hamburger-layer-width         : 40px;
+$hamburger-layer-height        : 4px;
+$hamburger-layer-spacing       : 6px;
+$hamburger-layer-color         : #789798;
+$hamburger-layer-border-radius : 4px;
+$hamburger-hover-opacity       : 0.7;
+$hamburger-active-layer-color  : $hamburger-layer-color;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity;
+
+// To use CSS filters as the hover effect instead of opacity,
+// set $hamburger-hover-use-filter as true and
+// change the value of $hamburger-hover-filter accordingly.
+$hamburger-hover-use-filter   : false;
+$hamburger-hover-filter       : opacity(0%);
+$hamburger-active-hover-filter: $hamburger-hover-filter;
+
+// Remove or comment out the hamburger types you don’t want
+// or need, so they get excluded from the compiled CSS.
+$hamburger-types: (
+  3dx,
+  3dx-r,
+  3dy,
+  3dy-r,
+  3dxy,
+  3dxy-r,
+  arrow,
+  arrow-r,
+  arrowalt,
+  arrowalt-r,
+  arrowturn,
+  arrowturn-r,
+  boring,
+  collapse,
+  collapse-r,
+  elastic,
+  elastic-r,
+  emphatic,
+  emphatic-r,
+  minus,
+  slider,
+  slider-r,
+  spring,
+  spring-r,
+  stand,
+  stand-r,
+  spin,
+  spin-r,
+  squeeze,
+  vortex,
+  vortex-r
+);
+
+@import "hamburgers/hamburgers"

data/lib/timequake/version.rb

@@ -1,3 +1,3 @@
 module Timequake
-  VERSION = "1.0.5"
+  VERSION = "2.0.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: timequake
 version: !ruby/object:Gem::Version
-  version: 1.0.5
+  version: 2.0.0
 platform: ruby
 authors:
 - George Morris
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-07-29 00:00:00.000000000 Z
+date: 2020-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails
@@ -57,16 +57,55 @@ files:
 - app/assets/config/timequake_manifest.js
 - app/assets/javascripts/timequake.js
 - app/assets/javascripts/timequake/modals.js
+- app/assets/stylesheets/hamburgers/_base.scss
+- app/assets/stylesheets/hamburgers/hamburgers.scss
+- app/assets/stylesheets/hamburgers/types/_3dx-r.scss
+- app/assets/stylesheets/hamburgers/types/_3dx.scss
+- app/assets/stylesheets/hamburgers/types/_3dxy-r.scss
+- app/assets/stylesheets/hamburgers/types/_3dxy.scss
+- app/assets/stylesheets/hamburgers/types/_3dy-r.scss
+- app/assets/stylesheets/hamburgers/types/_3dy.scss
+- app/assets/stylesheets/hamburgers/types/_arrow-r.scss
+- app/assets/stylesheets/hamburgers/types/_arrow.scss
+- app/assets/stylesheets/hamburgers/types/_arrowalt-r.scss
+- app/assets/stylesheets/hamburgers/types/_arrowalt.scss
+- app/assets/stylesheets/hamburgers/types/_arrowturn-r.scss
+- app/assets/stylesheets/hamburgers/types/_arrowturn.scss
+- app/assets/stylesheets/hamburgers/types/_boring.scss
+- app/assets/stylesheets/hamburgers/types/_collapse-r.scss
+- app/assets/stylesheets/hamburgers/types/_collapse.scss
+- app/assets/stylesheets/hamburgers/types/_elastic-r.scss
+- app/assets/stylesheets/hamburgers/types/_elastic.scss
+- app/assets/stylesheets/hamburgers/types/_emphatic-r.scss
+- app/assets/stylesheets/hamburgers/types/_emphatic.scss
+- app/assets/stylesheets/hamburgers/types/_minus.scss
+- app/assets/stylesheets/hamburgers/types/_slider-r.scss
+- app/assets/stylesheets/hamburgers/types/_slider.scss
+- app/assets/stylesheets/hamburgers/types/_spin-r.scss
+- app/assets/stylesheets/hamburgers/types/_spin.scss
+- app/assets/stylesheets/hamburgers/types/_spring-r.scss
+- app/assets/stylesheets/hamburgers/types/_spring.scss
+- app/assets/stylesheets/hamburgers/types/_squeeze.scss
+- app/assets/stylesheets/hamburgers/types/_stand-r.scss
+- app/assets/stylesheets/hamburgers/types/_stand.scss
+- app/assets/stylesheets/hamburgers/types/_vortex-r.scss
+- app/assets/stylesheets/hamburgers/types/_vortex.scss
 - app/assets/stylesheets/timequake/_index.scss
 - app/assets/stylesheets/timequake/breakpoints.scss
 - app/assets/stylesheets/timequake/buttons.scss
 - app/assets/stylesheets/timequake/colors.scss
+- app/assets/stylesheets/timequake/display.scss
+- app/assets/stylesheets/timequake/flex.scss
 - app/assets/stylesheets/timequake/forms.scss
+- app/assets/stylesheets/timequake/layout.scss
+- app/assets/stylesheets/timequake/margin.scss
 - app/assets/stylesheets/timequake/modals.scss
+- app/assets/stylesheets/timequake/padding.scss
 - app/assets/stylesheets/timequake/settings.scss
 - app/assets/stylesheets/timequake/tables.scss
 - app/assets/stylesheets/timequake/typography.scss
 - app/assets/stylesheets/timequake/universal.scss
+- app/assets/stylesheets/timequake/visibility.scss
 - bin/console
 - bin/setup
 - lib/generators/timequake/install_generator.rb