timequake 1.0.9 → 2.0.0

data/app/assets/stylesheets/hamburgers/types/_vortex.scss

@@ -0,0 +1,48 @@
+@if index($hamburger-types, vortex) {
+  /*
+   * Vortex
+   */
+  .hamburger--vortex {
+    .hamburger-inner {
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+      &::before,
+      &::after {
+        transition-duration: 0s;
+        transition-delay: 0.1s;
+        transition-timing-function: linear;
+      }
+
+      &::before {
+        transition-property: top, opacity;
+      }
+
+      &::after {
+        transition-property: bottom, transform;
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(765deg);
+        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+        &::before,
+        &::after {
+          transition-delay: 0s;
+        }
+
+        &::before {
+          top: 0;
+          opacity: 0;
+        }
+
+        &::after {
+          bottom: 0;
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}

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

@@ -1,9 +1,15 @@
 @import 'breakpoints';
 @import 'colors';
 @import 'typography';
+@import 'visibility';
+@import 'display';
+@import 'flex';
+@import 'margin';
+@import 'padding';
 @import 'buttons';
 @import 'forms';
 @import 'modals';
 @import 'tables';
 @import 'universal';
-@import 'settings.scss';
+@import 'layout';
+// @import 'settings.scss';

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

@@ -4,6 +4,7 @@ $btn-border-radius: 5px !default;
 $btn-border-width: 1px !default;
 $btn-padding: 11px 5px !default;
 $btn-font-size: 16px !default;
+$btn-font-weight: 700 !default;
 $btn-font: $copy-font !default;
 $btn-color: $primary-color !default;
 $btn-border-color: $primary-color !default;
@@ -34,9 +35,10 @@ $btn-mini-padding: 8px !default;
   cursor: pointer;
   transition: 300ms all;
   font-size: $btn-font-size;
+  font-weight: $btn-font-weight;
 
   &:hover { background-color: lighten($btn-color, 5%); }
-  &:active { transform: scale(.95); }
+  &:active { transform: scale(.97); }
 
   &.clear {
     color: $btn-color;

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

@@ -11,6 +11,7 @@ $indigo: #31457D !default;
 $violet: #973999 !default;
 $teal: #2D9FA2 !default;
 
+$heading-color: #333 !default;
 $copy-color: #333 !default;
 $primary-color: $red !default;
 $secondary-color: $yellow !default;

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

@@ -0,0 +1,143 @@
+/* DISPLAY HELPERS */
+.inline-block { display: inline-block !important; }
+.block { display: block !important; }
+
+
+@media (min-width: $medium) {
+  .md-inline-block { display: inline-block !important; }
+  .md-block { display: block !important; }
+}
+
+@media (min-width: $large) {
+  .lg-inline-block { display: inline-block !important; }
+  .lg-block { display: block !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-inline-block { display: inline-block !important; }
+  .xlg-block { display: block !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-inline-block { display: inline-block !important; }
+  .xxlg-block { display: block !important; }
+}
+
+/* POSITION HELPERS */
+.relative { position: relative !important; }
+.absolute { position: absolute !important; }
+.fixed { position: fixed !important; }
+.static { position: static !important; }
+.float-right { float: right !important; }
+.float-left { float: left !important; }
+
+.vert-horz-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vert-center {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: $medium) {
+  .md-relative { position: relative !important; }
+  .md-absolute { position: absolute !important; }
+  .md-fixed { position: fixed !important; }
+  .md-static { position: static !important; }
+  .md-float-right { float: right !important; }
+  .md-float-left { float: left !important; }
+}
+
+@media (min-width: $large) {
+  .lg-relative { position: relative !important; }
+  .lg-absolute { position: absolute !important; }
+  .lg-fixed { position: fixed !important; }
+  .lg-static { position: static !important; }
+  .lg-float-right { float: right !important; }
+  .lg-float-left { float: left !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-relative { position: relative !important; }
+  .xlg-absolute { position: absolute !important; }
+  .xlg-fixed { position: fixed !important; }
+  .xlg-static { position: static !important; }
+  .xlg-float-right { float: right !important; }
+  .xlg-float-left { float: left !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-relative { position: relative !important; }
+  .xxlg-absolute { position: absolute !important; }
+  .xxlg-fixed { position: fixed !important; }
+  .xxlg-static { position: static !important; }
+  .xxlg-float-right { float: right !important; }
+  .xxlg-float-left { float: left !important; }
+}
+
+/* SIZE HELPERS */
+.width-100 { width: 100% !important; }
+.width-50 { width: 50% !important; }
+.width-33 { width: 33.33% !important; }
+.width-25 { width: 25% !important; }
+.width-auto { width: auto !important; }
+.height-100 { height: 100% !important; }
+.height-50 { height: 50% !important; }
+.height-33 { height: 33.33% !important; }
+.height-25 { height: 25% !important; }
+.height-auto { height: auto !important; }
+
+@media (min-width: $medium) {
+  .md-width-100 { width: 100% !important; }
+  .md-width-50 { width: 50% !important; }
+  .md-width-33 { width: 33.33% !important; }
+  .md-width-25 { width: 25% !important; }
+  .md-width-auto { width: auto !important; }
+  .md-height-100 { height: 100% !important; }
+  .md-height-50 { height: 50% !important; }
+  .md-height-33 { height: 33.33% !important; }
+  .md-height-25 { height: 25% !important; }
+  .md-height-auto { height: auto !important; }
+}
+
+@media (min-width: $large) {
+  .lg-width-100 { width: 100% !important; }
+  .lg-width-50 { width: 50% !important; }
+  .lg-width-33 { width: 33.33% !important; }
+  .lg-width-25 { width: 25% !important; }
+  .lg-width-auto { width: auto !important; }
+  .lg-height-100 { height: 100% !important; }
+  .lg-height-50 { height: 50% !important; }
+  .lg-height-33 { height: 33.33% !important; }
+  .lg-height-25 { height: 25% !important; }
+  .lg-height-auto { height: auto !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-width-100 { width: 100% !important; }
+  .xlg-width-50 { width: 50% !important; }
+  .xlg-width-33 { width: 33.33% !important; }
+  .xlg-width-25 { width: 25% !important; }
+  .xlg-width-auto { width: auto !important; }
+  .xlg-height-100 { height: 100% !important; }
+  .xlg-height-50 { height: 50% !important; }
+  .xlg-height-33 { height: 33.33% !important; }
+  .xlg-height-25 { height: 25% !important; }
+  .xlg-height-auto { height: auto !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-width-100 { width: 100% !important; }
+  .xxlg-width-50 { width: 50% !important; }
+  .xxlg-width-33 { width: 33.33% !important; }
+  .xxlg-width-25 { width: 25% !important; }
+  .xxlg-width-auto { width: auto !important; }
+  .xxlg-height-100 { height: 100% !important; }
+  .xxlg-height-50 { height: 50% !important; }
+  .xxlg-height-33 { height: 33.33% !important; }
+  .xxlg-height-25 { height: 25% !important; }
+  .xxlg-height-auto { height: auto !important; }
+}

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

@@ -0,0 +1,128 @@
+/* FLEX HELPERS */
+.flex { display: flex !important; }
+.no-flex-wrap { flex-wrap: nowrap !important; }
+.flex-wrap { flex-wrap: wrap !important; }
+.flex-dir-col { flex-direction: column !important; }
+.flex-dir-row { flex-direction: row !important; }
+
+.jc-start { justify-content: flex-start !important; }
+.jc-end { justify-content: flex-end !important; }
+.jc-center { justify-content: center !important; }
+.jc-space-around { justify-content: space-around !important; }
+.jc-space-between { justify-content: space-between !important; }
+.jc-space-evenly { justify-content: space-evenly !important; }
+
+.ai-start { align-items: flex-start !important; }
+.ai-end { align-items: flex-end !important; }
+.ai-center { align-items: center !important; }
+.ai-stretch { align-items: stretch !important; }
+.ai-baseline { align-items: baseline !important; }
+
+.as-start { align-self: flex-start !important; }
+.as-end { align-self: flex-end !important; }
+.as-center { align-self: center !important; }
+.as-stretch { align-self: stretch !important; }
+
+@media (min-width: $medium) {
+  .md-flex { display: flex !important; }
+  .md-no-flex-wrap { flex-wrap: nowrap !important; }
+  .md-flex-wrap { flex-wrap: wrap !important; }
+  .md-flex-dir-col { flex-direction: column !important; }
+  .md-flex-dir-row { flex-direction: row !important; }
+
+  .md-jc-start { justify-content: flex-start !important; }
+  .md-jc-end { justify-content: flex-end !important; }
+  .md-jc-center { justify-content: center !important; }
+  .md-jc-space-around { justify-content: space-around !important; }
+  .md-jc-space-between { justify-content: space-between !important; }
+  .md-jc-space-evenly { justify-content: space-evenly !important; }
+
+  .md-ai-start { align-items: flex-start !important; }
+  .md-ai-end { align-items: flex-end !important; }
+  .md-ai-center { align-items: center !important; }
+  .md-ai-stretch { align-items: stretch !important; }
+  .md-ai-baseline { align-items: baseline !important; }
+
+  .md-as-start { align-self: flex-start !important; }
+  .md-as-end { align-self: flex-end !important; }
+  .md-as-center { align-self: center !important; }
+  .md-as-stretch { align-self: stretch !important; }
+}
+
+@media (min-width: $large) {
+  .lg-flex { display: flex !important; }
+  .lg-no-flex-wrap { flex-wrap: nowrap !important; }
+  .lg-flex-wrap { flex-wrap: wrap !important; }
+  .lg-flex-dir-col { flex-direction: column !important; }
+  .lg-flex-dir-row { flex-direction: row !important; }
+
+  .lg-jc-start { justify-content: flex-start !important; }
+  .lg-jc-end { justify-content: flex-end !important; }
+  .lg-jc-center { justify-content: center !important; }
+  .lg-jc-space-around { justify-content: space-around !important; }
+  .lg-jc-space-between { justify-content: space-between !important; }
+  .lg-jc-space-evenly { justify-content: space-evenly !important; }
+
+  .lg-ai-start { align-items: flex-start !important; }
+  .lg-ai-end { align-items: flex-end !important; }
+  .lg-ai-center { align-items: center !important; }
+  .lg-ai-stretch { align-items: stretch !important; }
+  .lg-ai-baseline { align-items: baseline !important; }
+
+  .lg-as-start { align-self: flex-start !important; }
+  .lg-as-end { align-self: flex-end !important; }
+  .lg-as-center { align-self: center !important; }
+  .lg-as-stretch { align-self: stretch !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-flex { display: flex !important; }
+  .xlg-no-flex-wrap { flex-wrap: nowrap !important; }
+  .xlg-flex-wrap { flex-wrap: wrap !important; }
+  .xlg-flex-dir-col { flex-direction: column !important; }
+  .xlg-flex-dir-row { flex-direction: row !important; }
+
+  .xlg-jc-start { justify-content: flex-start !important; }
+  .xlg-jc-end { justify-content: flex-end !important; }
+  .xlg-jc-center { justify-content: center !important; }
+  .xlg-jc-space-around { justify-content: space-around !important; }
+  .xlg-jc-space-between { justify-content: space-between !important; }
+  .xlg-jc-space-evenly { justify-content: space-evenly !important; }
+
+  .xlg-ai-start { align-items: flex-start !important; }
+  .xlg-ai-end { align-items: flex-end !important; }
+  .xlg-ai-center { align-items: center !important; }
+  .xlg-ai-stretch { align-items: stretch !important; }
+  .xlg-ai-baseline { align-items: baseline !important; }
+
+  .xlg-as-start { align-self: flex-start !important; }
+  .xlg-as-end { align-self: flex-end !important; }
+  .xlg-as-center { align-self: center !important; }
+  .xlg-as-stretch { align-self: stretch !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-flex { display: flex !important; }
+  .xxlg-no-flex-wrap { flex-wrap: nowrap !important; }
+  .xxlg-flex-wrap { flex-wrap: wrap !important; }
+  .xxlg-flex-dir-col { flex-direction: column !important; }
+  .xxlg-flex-dir-row { flex-direction: row !important; }
+
+  .xxlg-jc-start { justify-content: flex-start !important; }
+  .xxlg-jc-end { justify-content: flex-end !important; }
+  .xxlg-jc-center { justify-content: center !important; }
+  .xxlg-jc-space-around { justify-content: space-around !important; }
+  .xxlg-jc-space-between { justify-content: space-between !important; }
+  .xxlg-jc-space-evenly { justify-content: space-evenly !important; }
+
+  .xxlg-ai-start { align-items: flex-start !important; }
+  .xxlg-ai-end { align-items: flex-end !important; }
+  .xxlg-ai-center { align-items: center !important; }
+  .xxlg-ai-stretch { align-items: stretch !important; }
+  .xxlg-ai-baseline { align-items: baseline !important; }
+
+  .xxlg-as-start { align-self: flex-start !important; }
+  .xxlg-as-end { align-self: flex-end !important; }
+  .xxlg-as-center { align-self: center !important; }
+  .xxlg-as-stretch { align-self: stretch !important; }
+}

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

@@ -0,0 +1,51 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.column {
+  width: 100%;
+  padding: 0 10px;
+
+  &.no-gutters { padding: 0; }
+}
+
+@for $i from 1 through 12 {
+  .sm-#{$i} { width: 100% / 12 * $i; }
+  .sm-offset-#{$i} { margin-left: 100% / 12 * $i; }
+  .sm-order-#{$i} { order: $i; }
+}
+
+@media (min-width: $medium) {
+  @for $i from 1 through 12 {
+    .md-#{$i} { width: 100% / 12 * $i; }
+    .md-offset-#{$i} { margin-left: 100% / 12 * $i; }
+    .md-order-#{$i} { order: $i; }
+  }
+}
+
+@media (min-width: $large) {
+  @for $i from 1 through 12 {
+    .lg-#{$i} { width: 100% / 12 * $i; }
+    .lg-offset-#{$i} { margin-left: 100% / 12 * $i; }
+    .lg-order-#{$i} { order: $i; }
+  }
+}
+
+@media (min-width: $xlarge) {
+  @for $i from 1 through 12 {
+    .xlg-#{$i} { width: 100% / 12 * $i; }
+    .xlg-offset-#{$i} { margin-left: 100% / 12 * $i; }
+    .xlg-order-#{$i} { order: $i; }
+  }
+}
+
+@media (min-width: $xxlarge) {
+  @for $i from 1 through 12 {
+    .xxlg-#{$i} { width: 100% / 12 * $i; }
+    .xxlg-offset-#{$i} { margin-left: 100% / 12 * $i; }
+    .xxlg-order-#{$i} { order: $i; }
+  }
+}

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

@@ -0,0 +1,246 @@
+.mx-hr {
+  margin-left: .5rem !important;
+  margin-right: .5rem !important;
+}
+
+.my-hr {
+  margin-top: .5rem !important;
+  margin-bottom: .5rem !important;
+}
+
+@for $i from 0 through 8 {
+  .mx-#{$i} {
+    margin-left: #{$i}rem !important;
+    margin-right: #{$i}rem !important;
+  }
+
+  .my-#{$i} {
+    margin-top: #{$i}rem !important;
+    margin-bottom: #{$i}rem !important;
+  }
+}
+
+.m-hr { margin: .5rem !important; }
+@for $i from 0 through 8 {
+  .m-#{$i} { margin: #{$i}rem !important; }
+}
+
+.mb-hr { margin-bottom: .5rem !important; }
+@for $i from 0 through 8 {
+  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
+}
+
+.mt-hr { margin-top: .5rem !important; }
+@for $i from 0 through 8 {
+  .mt-#{$i} { margin-top: #{$i}rem !important; }
+}
+
+.mr-hr { margin-right: .5rem !important; }
+@for $i from 0 through 8 {
+  .mr-#{$i} { margin-right: #{$i}rem !important; }
+}
+
+.ml-hr { margin-left: .5rem !important; }
+@for $i from 0 through 8 {
+  .ml-#{$i} { margin-left: #{$i}rem !important; }
+}
+
+// MEDIUM
+@media (min-width: $medium) {
+  .md-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .md-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .md-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .md-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .md-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .md-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .md-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .md-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .md-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// LARGE
+@media (min-width: $large) {
+  .lg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .lg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .lg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .lg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .lg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .lg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .lg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .lg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .lg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// XLARGE
+@media (min-width: $xlarge) {
+  .xlg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .xlg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xlg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .xlg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xlg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .xlg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .xlg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .xlg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .xlg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// XXLARGE
+@media (min-width: $xxlarge) {
+  .xxlg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .xxlg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xxlg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .xxlg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xxlg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .xxlg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .xxlg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .xxlg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .xxlg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}