timequake 1.0.5 → 2.0.0

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; }
+  }
+}

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

@@ -2,9 +2,7 @@ $modal-bg-color: $white !default;
 $modal-max-width: 1200px !default;
 $modal-content-padding: 20px !default;
 $modal-border-radius: 5px !default;
-$modal-border-color: $white !default;
-$modal-border-width: 5px !default;
-$modal-border-style: solid !default;
+$modal-border: 5px solid $white !default;
 $modal-close-size: 30px !default;
 $modal-close-color: $copy-color !default;
 $modal-close-transform: rotate(45deg) !default;
@@ -19,7 +17,7 @@ $modal-close-transform: rotate(45deg) !default;
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 0;
+  z-index: -1;
   opacity: 0;
   transition: 500ms all;
 
@@ -39,9 +37,7 @@ $modal-close-transform: rotate(45deg) !default;
     background: $modal-bg-color;
     border-radius: $modal-border-radius;
     padding: $modal-content-padding;
-    border-width: $modal-border-width;
-    border-style: $modal-border-style;
-    border-color: $modal-border-color;
+    border: $modal-border;
     max-width: $modal-max-width;
 
     .modal-close {

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

@@ -0,0 +1,246 @@
+.px-hr {
+  padding-left: .5rem !important;
+  padding-right: .5rem !important;
+}
+
+.py-hr {
+  padding-top: .5rem !important;
+  padding-bottom: .5rem !important;
+}
+
+@for $i from 0 through 8 {
+  .px-#{$i} {
+    padding-left: #{$i}rem !important;
+    padding-right: #{$i}rem !important;
+  }
+
+  .py-#{$i} {
+    padding-top: #{$i}rem !important;
+    padding-bottom: #{$i}rem !important;
+  }
+}
+
+.p-hr { padding: .5rem !important; }
+@for $i from 0 through 8 {
+  .p-#{$i} { padding: #{$i}rem !important; }
+}
+
+.pb-hr { padding-bottom: .5rem !important; }
+@for $i from 0 through 8 {
+  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
+}
+
+.pt-hr { padding-top: .5rem !important; }
+@for $i from 0 through 8 {
+  .pt-#{$i} { padding-top: #{$i}rem !important; }
+}
+
+.pr-hr { padding-right: .5rem !important; }
+@for $i from 0 through 8 {
+  .pr-#{$i} { padding-right: #{$i}rem !important; }
+}
+
+.pl-hr { padding-left: .5rem !important; }
+@for $i from 0 through 8 {
+  .pl-#{$i} { padding-left: #{$i}rem !important; }
+}
+
+// MEDIUM
+@media (min-width: $medium) {
+  .md-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .md-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .md-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .md-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .md-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .md-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .md-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .md-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .md-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// LARGE
+@media (min-width: $large) {
+  .lg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .lg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .lg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .lg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .lg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .lg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .lg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .lg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .lg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// XLARGE
+@media (min-width: $xlarge) {
+  .xlg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .xlg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xlg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .xlg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xlg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .xlg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .xlg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .xlg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .xlg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// XXLARGE
+@media (min-width: $xxlarge) {
+  .xxlg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .xxlg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xxlg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .xxlg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xxlg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .xxlg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .xxlg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .xxlg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .xxlg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}