Final changes for the Use cases on the live site.
[yaffs-website] / web / themes / custom / yaffs / scss / style.scss
index 0fd60e03ffd2f49c405e5bba4f294f3d82de6509..a778a20ea1d7d22c5fce085402cb1fca52b1901d 100644 (file)
@@ -1,8 +1,407 @@
 // Default variables.
 @import "default-variables";
-
 // Bootstrap Framework.
 @import '../bootstrap/assets/stylesheets/bootstrap';
-
+@import '../fonts/font-awesome/scss/font-awesome.scss';
 // Base-theme overrides.
 @import 'overrides';
+
+body {
+  background-color: #fafefe;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family-serif;
+}
+
+.main-container {
+  background-color: #fafafa;
+}
+
+// Top bar.
+header {
+
+  .region-navigation-collapsible {
+
+    .logo {
+      -webkit-transition: height 0.3s;
+      -moz-transition: height 0.3s;
+      -ms-transition: height 0.3s;
+      -o-transition: height 0.3s;
+      transition: height 0.3s;
+
+      height: 6.5em;
+
+      .smaller {
+        height: 2em;
+      }
+
+    }
+
+
+    .navbar-nav {
+      margin-top: -0.4em;;
+    }
+
+    #block-mainnavigation {
+      float: left;
+    }
+
+
+    .search-block-form {
+      //margin-top: 2.2em;
+      margin-top: 2.6em;
+
+      input {
+        width: 30ex;
+        float: right;
+      }
+    }
+  }
+
+  -webkit-transition: height 0.3s;
+  -moz-transition: height 0.3s;
+  -ms-transition: height 0.3s;
+  -o-transition: height 0.3s;
+  transition: height 0.3s;
+
+  .smaller {
+    height: 75px;
+  }
+
+}
+
+.main-container {
+  padding-top:75px;
+}
+
+/* ----------------------------------------------
+* Generated by Animista on 2017-3-17 18:21:18
+* http://animista.net
+* T: @cssanimista
+* ---------------------------------------------- */
+
+/**
+* ----------------------------------------
+* animation slide-in-bck-center
+* ----------------------------------------
+*/
+@keyframes slide-in-bck-center {
+  0% {
+    transform: translateZ(700px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateZ(1);
+    opacity: 1;
+  }
+}
+
+/**
+* ----------------------------------------
+* animation kenburns-top
+* ----------------------------------------
+*/
+@keyframes kenburns-top {
+  0% {
+    transform: scale(1) translateY(0);
+    transform-origin: 50% 16%;
+  }
+  100% {
+    transform: scale(1.25) translateY(-15px);
+    transform-origin: top;
+  }
+
+}
+
+/*****************************/
+
+/**
+* Yaffs
+*/
+.highlightlink {
+  position: absolute;
+  right: 0;
+  display: block;
+}
+
+.front_highlight.row {
+  .region {
+    margin-top: 1em;
+  }
+}
+
+/* Pane 1 - Images */
+.container-fluid.front-pane-1 {
+  margin-top: 35px;
+  margin-bottom: 35px;
+}
+
+/* Pane 2 - Logos */
+.container-fluid.front-pane-2 {
+  background: $yaffs-fade-1;
+  padding-bottom: 2em;
+}
+
+/* Pane 3 - Features */
+.container-fluid.front-pane-3 {
+  margin-top: 35px;
+  margin-bottom: 35px;
+}
+
+/* Pane 4 - documents */
+.container-fluid.front-pane-4 {
+  margin-bottom: 35px;
+  background: $yaffs-fade-1;
+
+  .region-front-pane-4 {
+    margin-bottom: 35px;
+  }
+
+  .row {
+    margin-top: 15px;
+  }
+
+  .views-field-field-teaser-image {
+    float: left;
+
+    img {
+      margin-right: 1em;
+      margin-top: 1.5em;
+    }
+  }
+
+  .views-field-title {
+
+  }
+
+  .views-field-body {
+    @include clearfix();
+  }
+
+  .views-field-upload-1 {
+    .file > span {
+      background-color: inherit;
+    }
+  }
+}
+
+/* Footer region 1 */
+.region-footer-first {
+  @include make-xs-column(6);
+}
+
+/* Footer region 1 */
+.region-footer-second {
+  @include make-xs-column(6);
+  text-align: right;
+}
+
+.yaffs-menu-btn {
+  @include button-variant(blue, $yaffs-fade-1, blue);
+}
+
+.view-id-yaffs_document_highlights {
+  @include make_row() {}
+}
+
+.yaffs-more-docs {
+  a {
+    font-weight: bolder;
+  }
+}
+
+.view-yaffs-document-highlights {
+
+}
+
+/* Logos molecule */
+.view-id-yaffs_user_logos {
+
+  .row {
+    /* FLex is going to be an issue on IE old. */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2em;
+  }
+
+}
+
+/* Features molecule */
+.view-id-highlighted_yaffs_features {
+
+  .col {
+    .views-field-field-icon-text {
+      font-size: 60px;
+      margin-right: 25px;
+      float: left;
+    }
+
+    .views-field-title {
+      @include clearfix();
+    }
+
+    margin-bottom: 35px;
+
+  }
+}
+
+/* Space the use-cases page. */
+.view-id-use_cases, .view-id-use {
+  .view-header {
+    .views-field-title {
+      margin-top: inherit;
+      padding-top: inherit;
+      border-top-width: inherit;
+      border-top-style: inherit;
+      border-top-color: inherit;
+    }
+    .views-field-field-image {
+      margin-top: inherit;
+      margin-bottom: inherit;
+    }
+  }
+  .view-content {
+    .views-field-title {
+      margin-top: 2.2em;
+      padding-top: 0;
+      border-top-width: 1px;
+      border-top-style: solid;
+      border-top-color: $yaffs-fade-1;
+    }
+    .views-field-field-image {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+  }
+  .view-footer {
+    h3 {
+      margin-top: 1.7em;
+      padding-top: 1em;
+      border-top-width: 1px;
+      border-top-style: solid;
+      border-top-color: $yaffs-fade-1;
+    }
+  }
+}
+
+/* For admin, stop the silliness with search rollover stopping clicks on nav links */
+.region-navigation-collapsible {
+  #block-searchform.search-block-form.contextual-region.block.block-search.block-search-form-block {
+      position: inherit !important;
+  }
+}
+
+
+
+// Space the use-cases page.
+.view-id-use-case, .view-id-use {
+  .view-header {
+    .views-field-title {
+      margin-top: inherit;
+      padding-top: inherit;
+      border-top-width: inherit;
+      border-top-style: inherit;
+      border-top-color: inherit;
+    }
+    .views-field-field-image {
+      margin-top: inherit;
+      margin-bottom: inherit;
+    }
+  }
+  .view-content {
+    .views-field-title {
+      margin-top: 2.2em;
+      padding-top: 0;
+      border-top-width: 1px;
+      border-top-style: solid;
+      border-top-color: $yaffs-fade-1;
+    }
+    .views-field-field-image {
+      margin-top: 0.6em;
+      margin-bottom: 0.6em;
+    }
+  }
+}
+
+// For admin, stop the silliness with search rollover stopping clicks on nav links
+.search-block-form.contextual-region {
+  position:static;
+}
+
+/* Styling for Yaffs papers */
+.paper, .page {
+
+  p {
+    orphans: 2;
+    widows: 2;
+    page-break-before: auto
+  }
+  //p { font-size: 16px }
+  #Frame1 {
+    img {
+      clear: left;
+      margin-top: 1em;
+    }
+
+  }
+
+  #Frame2 {
+    p.frame-contents-western {
+      font-size: 20px
+    }
+    p.frame-contents-western:first-child {
+      @include hide-text();
+    }
+    p.frame-contents-western:last-child {
+      font-size: 18px;
+    }
+  }
+
+  table {
+    border: 1px solid $table-border-color;
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th,
+        > td {
+          border: 1px solid $table-border-color;
+          padding: 1ex;
+        }
+      }
+    }
+    > thead > tr {
+      > th,
+      > td {
+        border-bottom-width: 2px;
+        padding: 1ex;
+      }
+    }
+  }
+
+  /*p.western { font-family: "Liberation Sans", sans-serif; font-size: 11pt }
+    p.cjk { font-size: 10pt }*/
+
+  /*h1 { margin-bottom: 0.21cm }
+  h1.western { font-family: "Liberation Sans", sans-serif; font-size: 16pt }
+  h1.cjk { font-family: "DejaVu Sans"; font-size: 16pt }
+  h1.ctl { font-family: "Lohit Hindi"; font-size: 16pt }
+  h2 { margin-top: 0.42cm; page-break-before: auto }
+  h2.western { font-family: "Liberation Sans", sans-serif; font-size: 16pt; font-style: italic }
+  h2.cjk { font-size: 16pt; font-style: italic; font-weight: normal }
+  h2.ctl { font-family: "Lohit Hindi"; font-size: 16pt; font-style: italic }
+  h3 { margin-top: 0.42cm }
+  h3.western { font-family: "Liberation Sans", sans-serif }
+  h3.ctl { font-family: "Lohit Hindi" }
+  h4 { margin-top: 0.42cm }
+  h4.western { font-family: "Liberation Sans", sans-serif; font-size: 11pt; font-style: italic }
+  h4.cjk { font-size: 11pt; font-style: italic }
+  h4.ctl { font-family: "Lohit Hindi"; font-size: 11pt; font-style: italic }
+  td p { margin-bottom: 0cm }
+  td p.western { font-family: "Liberation Serif", serif }
+  td p.cjk { font-size: 10pt }
+  a:link { so-language: zxx }
+  */
+}