integral 1.0.1 → 1.5.0

data/app/assets/stylesheets/integral/backend/shared.sass

@@ -47,6 +47,8 @@
 
 .button
   padding: 0.7em 1.5em
+  &.has-tip
+    cursor: pointer
   &.primary
     color: $white
   &.white
@@ -54,7 +56,6 @@
     background-color: $white
     color: $primary-color
     font-size: .8rem
-    margin: .5rem 0
     &:hover
       box-shadow: $card-shadow
       color: $secondary-color
@@ -71,12 +72,16 @@ span.label.clear
 input:disabled, input[readonly], textarea:disabled, textarea[readonly]
   border: none
 
+input[type='text'], textarea, select
+  margin-bottom: 0
+
 input[readonly].datepicker
   border: solid 0.5px #d4dfef
   background-color: transparent
   cursor: pointer
 
 .input.alternative
+  margin-bottom: 0.75rem
   label
     font-size: .9rem
     margin-bottom: 0
@@ -88,8 +93,8 @@ input[readonly].datepicker
   > select, > textarea, > input[type=text], > input[type=url], > input[type=number]
     border-radius: 0
     -webkit-appearance: none
+    margin-bottom: 0
     &.has-error
-      margin-bottom: 0
       color: $alert-color
       border-color: $alert-color
       background-color: transparentize($alert-color, 0.9)
@@ -100,6 +105,8 @@ input[readonly].datepicker
     margin: .5em 0
     font-size: .9rem
     color: $alert-color
+  .help-text
+    margin-top: 5px
 
 ul.accordion
   background-color: transparent
@@ -292,11 +299,14 @@ ul.tabs
         font-size: .75rem
 
 .record-selector.reveal
+  .create-button
+    margin-bottom: 0
   .loader
     margin: 3rem 0
     color: $primary-color
   .top-bar
     margin-top: 1em
+    margin-bottom: 1rem
     .filter.search
       max-width: 16em
       input
@@ -371,6 +381,8 @@ ul.tabs
 .card.list-management
   .top-bar
     @include top-bar-unstack
+    .input.alternative
+      margin-bottom: 0
     .top-bar-right .input.alternative
       display: flex
       align-items: center
@@ -446,6 +458,9 @@ ul.tabs
   label
     font-size: 1em
 
+.card
+  overflow: initial
+
 .card.profile
   position: relative
   a.settings
@@ -482,6 +497,10 @@ ul.tabs
 
 
 /** Forms **/
+.input
+  .form-error
+    margin: 0
+
 .field-with-errors
   > input, > textarea, > select
     @include form-input-error
@@ -533,6 +552,12 @@ p.help-text
     &.collection_radio_buttons
       font-size: 0.7em
       color: $body-font-color-secondary
+
+.radio_buttons .radio label
+  font-size: 1rem
+  color: $body-font-color-secondary
+  margin-bottom: 0
+
 // Filters
 .filter.search
   position: relative
@@ -712,17 +737,6 @@ table
       background-color: rgba(212, 223, 239, 0.3)
       font-size: 0.9em
       padding: 0.5em 1em
-    .actions
-      a
-        color: $body-font-color-secondary
-        border-radius: 50%
-        padding: 0.4em 0.25em
-        &:hover
-          background-color: $primary-color
-          color: $white
-        .fa
-          width: 2em
-          text-align: center
     tr.empty-grid
       &:hover
         background-color: transparent
@@ -768,3 +782,97 @@ table
   left: 0.25em
   transform: rotate(-135deg)
 
+.help-text
+  margin-top: 5px
+  margin-bottom: 0
+
+.card-action-title
+  display: flex
+  justify-content: space-between
+
+
+.button--action-pane
+  cursor: pointer
+  border-radius: 50%
+  padding: .25rem
+  &:hover, &.hover
+    color: $white
+    background-color: $primary-color
+
+.dropdown-pane--actions
+  padding: 0
+  background-color: transparent
+  box-shadow: none
+  width: auto
+  padding-top: 20px
+  .menu
+    padding: .5rem 0
+    background-color: $white
+    box-shadow: 1px 6px 15px 0 rgba(35, 52, 69, 0.15)
+    &:after
+      content: ' '
+      position: absolute
+      right: 0
+      top: -2.2em
+      height: 2.2em
+      width: 70%
+    &:before
+      content: ' '
+      width: 20px
+      height: 20px
+      border-radius: 0 0 0.5em 0
+      background: linear-gradient(-45deg, #ffffff 50%, transparent 50%)
+      position: absolute
+      margin: 0
+      right: 5px
+      transform: rotate(225deg) skewX(8deg) skewY(8deg)
+      top: -5px
+    i
+      width: 30px
+      text-align: center
+    a, button
+      display: block
+      width: 100%
+      padding: .75rem 1rem
+      color: $secondary-color
+      text-align: left
+      cursor: pointer
+      &.disabled
+        opacity: 0.25
+        cursor: not-allowed
+      &:hover
+        background-color: scale-color($primary-color, $lightness: 95%)
+
+
+.stat-table-heading
+  display: flex
+  border-bottom: 2px solid rgba(158, 158, 158, 0.15)
+  padding-bottom: 8px
+  margin-top: -15px
+  align-items: flex-end
+  justify-content: space-between
+
+.stat-table-header-count
+  font-size: 1.75rem
+  color: $primary-color
+.stat-table-header
+  font-size: .8rem
+
+.tr--clickable
+  cursor: pointer
+
+.grid-x
+  > .cell
+    @include xy-cell-gutters($gutter-type: padding) //($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical)
+
+.grid-y, .grid-x
+  > .input, > .image-select
+    @include card-container($card-background, $card-font-color, $card-margin-bottom, $card-border, $card-border-radius, $card-shadow)
+    @include card-section
+    overflow: initial
+
+.card
+  @include card-section
+
+.card-unpadded
+  @include card-container($card-background, $card-font-color, $card-margin-bottom, $card-border, $card-border-radius, $card-shadow)

data/app/assets/stylesheets/integral/frontend.scss

@@ -0,0 +1,45 @@
+@import 'font-awesome-sprockets';
+@import 'font-awesome';
+@import "toastr";
+
+@import 'integral/frontend/foundation_and_overrides';
+
+$nprogress-color: $primary-color;
+$nprogress-height: 5px;
+
+@import 'nprogress';
+@import 'nprogress-turbolinks5';
+
+@import 'integral/support/mixins';
+@import 'integral/support/scroll-to-top';
+@import 'integral/support/media-query-indicator';
+@import 'integral/support/gallery';
+@import "integral/support/swiper";
+
+// Glob import only works without the /integral however if this file is copied to the host application then it fails
+// It should also work within host application
+// https://github.com/rails/sass-rails/issues/166#event-2225118948
+// @import "frontend/modules/*"; - Works in engine but not host application
+// @import "integralfrontend/modules/*"; - Doesn't work in either
+
+@import "integral/frontend/modules/article-footer";
+@import "integral/frontend/modules/article";
+@import "integral/frontend/modules/horizontal-post";
+@import "integral/frontend/modules/inline-articles";
+@import "integral/frontend/modules/latest-post";
+@import "integral/frontend/modules/list-widget";
+@import "integral/frontend/modules/piped-list";
+@import "integral/frontend/modules/sidebar-articles";
+@import "integral/frontend/modules/sidebar-tags";
+@import "integral/frontend/modules/sidebar-widget";
+@import "integral/frontend/modules/vertical-post";
+@import "integral/frontend/modules/post-tags";
+@import "integral/frontend/modules/scroll-container";
+
+@import 'integral/frontend/share_modal';
+@import 'integral/frontend/layout';
+@import 'integral/frontend/shared';
+@import 'integral/frontend/demo';
+@import 'integral/frontend/blog';
+
+@import 'integral/frontend/overrides';

data/app/assets/stylesheets/integral/frontend/_foundation_settings.scss

@@ -825,8 +825,8 @@ $titlebar-icon-spacing: 0.25rem;
 // -----------
 
 $has-tip-cursor: help;
-$has-tip-font-weight: $global-weight-bold;
-$has-tip-border-bottom: dotted 1px $dark-gray;
+$has-tip-font-weight: initial;
+$has-tip-border-bottom: none;
 $tooltip-background-color: $black;
 $tooltip-color: $white;
 $tooltip-padding: 0.75rem;

data/app/assets/stylesheets/integral/frontend/blog.sass

@@ -85,122 +85,122 @@ body.posts.show
     i
       margin-right: 0.5em
       font-size: 0.9em
-ul.post-list
-  margin-left: 0
-  list-style: none
-  > li
-    padding-bottom: 2em
-    margin-bottom: 2em
-    border-bottom: 1px solid #ececec
-    @include breakpoint(small down)
-      padding-bottom: 1em
-    &:last-of-type
-      border-bottom: none
-.record--post
-  .post--title
-    color: $secondary-color
-    font-size: 2em
-    font-weight: bold
-    text-transform: none
-    letter-spacing: 0.7px
-    @include breakpoint(small down)
-      font-size: 1.35em
-      letter-spacing: 0.4px
-      line-height: 1.3
-  .post--image
-    margin: 1em 0
-    width: 100%
-    height: 20em
-    object-fit: cover
-    @include breakpoint(small down)
-      height: 15em
-      margin: 0.5em 0
-.post--date
-  font-family: $header-font-family
-  font-size: 0.8em
-  text-transform: uppercase
-  letter-spacing: 0.5px
-  color: $primary-color
-  font-weight: bold
-ul.tag-list
-  margin-left: 0
-  list-style: none
-  margin-top: 1em
-  text-align: center
-  @include breakpoint(small down)
-    margin-top: 0.5em
-  &.left
-    text-align: left
-  li
-    display: inline-block
-    margin: 0 1.5em 1em 0
-    text-transform: uppercase
-    font-weight: bold
-    font-size: 0.9em
-    @include breakpoint(small down)
-      margin: 0 .5em .5em 0
-    &:before
-      content: '#'
-      color: $primary-color
-      margin-right: 0.1em
-    a
-      color: $body-font-color
-      &:hover
-        color: $primary-color
-.blog-widget
-  h4
-    display: flex
-    margin-bottom: 2em
-    font-size: 1em
-    text-transform: uppercase
-    span
-      &:first-of-type
-        flex-shrink: 1
-      &:last-of-type
-        flex-grow: 1
-        border-bottom: 1px solid black
-        margin-bottom: 0.5em
-        margin-left: 0.5em
-    &:after
-      content: ''
-  ul.record-list
-    @include xy-grid
-    margin-left: 0
-    margin-bottom: 2em
-    list-style: none
-    li
-      @include xy-cell(full, false, 0)
-      @include breakpoint(medium only)
-        @include xy-cell(1 of 2, false, 0)
-      .grid-x
-        margin-bottom: 1em
-        > a
-          @include xy-cell(1 of 6, false, 0)
-        .meta
-          @include xy-cell(5 of 6, true, $grid-margin-gutters, margin, left)
-        img
-          width: 100%
-          height: 100%
-          object-fit: cover
-    h5
-      margin-bottom: 0
-      font-size: 1em
-      a
-        color: $secondary-color
-        &:hover
-          color: $primary-color
-    .subtitle
-      font-family: $header-font-family
-      color: $primary-color
-      text-transform: uppercase
-      font-size: 0.7em
-      font-weight: bold
-  ul.tag-list
-    text-align: left
-    font-size: 0.8em
-    li
-      margin: 0 1em 0.75em 0
-      font-family: $header-font-family
+// ul.post-list
+//   margin-left: 0
+//   list-style: none
+//   > li
+//     padding-bottom: 2em
+//     margin-bottom: 2em
+//     border-bottom: 1px solid #ececec
+//     @include breakpoint(small down)
+//       padding-bottom: 1em
+//     &:last-of-type
+//       border-bottom: none
+// .record--post
+//   .post--title
+//     color: $secondary-color
+//     font-size: 2em
+//     font-weight: bold
+//     text-transform: none
+//     letter-spacing: 0.7px
+//     @include breakpoint(small down)
+//       font-size: 1.35em
+//       letter-spacing: 0.4px
+//       line-height: 1.3
+//   .post--image
+//     margin: 1em 0
+//     width: 100%
+//     height: 20em
+//     object-fit: cover
+//     @include breakpoint(small down)
+//       height: 15em
+//       margin: 0.5em 0
+// .post--date
+//   font-family: $header-font-family
+//   font-size: 0.8em
+//   text-transform: uppercase
+//   letter-spacing: 0.5px
+//   color: $primary-color
+//   font-weight: bold
+// ul.tag-list
+//   margin-left: 0
+//   list-style: none
+//   margin-top: 1em
+//   text-align: center
+//   @include breakpoint(small down)
+//     margin-top: 0.5em
+//   &.left
+//     text-align: left
+//   li
+//     display: inline-block
+//     margin: 0 1.5em 1em 0
+//     text-transform: uppercase
+//     font-weight: bold
+//     font-size: 0.9em
+//     @include breakpoint(small down)
+//       margin: 0 .5em .5em 0
+//     &:before
+//       content: '#'
+//       color: $primary-color
+//       margin-right: 0.1em
+//     a
+//       color: $body-font-color
+//       &:hover
+//         color: $primary-color
+.sidebar-widget
+  // h4
+  //   display: flex
+  //   margin-bottom: 2em
+  //   font-size: 1em
+  //   text-transform: uppercase
+  //   span
+  //     &:first-of-type
+  //       flex-shrink: 1
+  //     &:last-of-type
+  //       flex-grow: 1
+  //       border-bottom: 1px solid black
+  //       margin-bottom: 0.5em
+  //       margin-left: 0.5em
+  //   &:after
+  //     content: ''
+  // ul.record-list
+  //   @include xy-grid
+  //   margin-left: 0
+  //   margin-bottom: 2em
+  //   list-style: none
+  //   li
+  //     @include xy-cell(full, false, 0)
+  //     @include breakpoint(medium only)
+  //       @include xy-cell(1 of 2, false, 0)
+  //     .grid-x
+  //       margin-bottom: 1em
+  //       > a
+  //         @include xy-cell(1 of 6, false, 0)
+  //       .meta
+  //         @include xy-cell(5 of 6, true, $grid-margin-gutters, margin, left)
+  //       img
+  //         width: 100%
+  //         height: 100%
+  //         object-fit: cover
+  //   h5
+  //     margin-bottom: 0
+  //     font-size: 1em
+  //     a
+  //       color: $secondary-color
+  //       &:hover
+  //         color: $primary-color
+  //   .subtitle
+  //     font-family: $header-font-family
+  //     color: $primary-color
+  //     text-transform: uppercase
+  //     font-size: 0.7em
+  //     font-weight: bold
+  // ul.tag-list
+  //   text-align: left
+  //   font-size: 0.8em
+  //   li
+  //     margin: 0 1em 0.75em 0
+  //     font-family: $header-font-family
 
   &.newsletter-signup
     padding: 2em 0.5em
@@ -215,6 +215,7 @@ ul.tag-list
       margin: 1em 0
       font-weight: bold
       font-size: 1.25em
+      color: $white
     p
       font-size: .9em
     form
@@ -233,31 +234,43 @@ ul.tag-list
         box-shadow: none
         background-color: $white
         font-size: .9em
-.share-widget
-  span
-    @include button(false, $secondary-color)
-    text-transform: uppercase
-  a
-    @include button
-
-section.related-posts
-  margin: 1rem 0
+// .share-widget
+//   span
+//     @include button(false, $secondary-color)
+//     text-transform: uppercase
+//   a
+//     @include button
+//
+// section.related-posts
+//   margin: 1rem 0
+//
+// article
+//   h2, h3, h4
+//     @include headerAnchor
+//
+//   blockquote
+//     border: none
+//     &:before
+//       @include font-awesome('\f10d')
+//       display: block
+//       font-size: 4em
+//       text-align: center
+//       color: $header-color
+//     p
+//       color: $body-font-color
+//       font-size: 1.1em
+//     h3
+//       text-align: center
+//       font-size: 1.5em
 
-article
+.wysiwyg-content--post
   h2, h3, h4
-    @include headerAnchor
-
-  blockquote
-    border: none
-    &:before
-      @include font-awesome('\f10d')
-      display: block
-      font-size: 4em
-      text-align: center
-      color: $header-color
-    p
-      color: $body-font-color
-      font-size: 1.1em
-    h3
-      text-align: center
-      font-size: 1.5em
+    margin: 1rem 0
+  h3, h4
+    font-weight: normal
+  h2
+    font-size: 1.5rem
+  h3
+    font-size: 1.25rem
+  h4
+    font-size: 1.15rem