From 259ac60ac33bed8a2814938a92952523b6825fb0 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Mon, 2 May 2016 13:36:49 +0300
Subject: [PATCH] missed global typography styles

---
 src/app/theme/pageTop/pageTop.scss  |   4 +
 src/app/theme/sass/_typography.scss | 473 ++++++++++++++++++++++++++++
 src/app/theme/sass/conf/conf.scss   |   2 +-
 src/app/theme/theme.scss            |   1 +
 4 files changed, 479 insertions(+), 1 deletion(-)
 create mode 100644 src/app/theme/sass/_typography.scss

diff --git a/src/app/theme/pageTop/pageTop.scss b/src/app/theme/pageTop/pageTop.scss
index 5876d14a..0869d695 100644
--- a/src/app/theme/pageTop/pageTop.scss
+++ b/src/app/theme/pageTop/pageTop.scss
@@ -27,6 +27,10 @@ a.al-logo {
   line-height: 60px;
   text-decoration: none;
 
+  &:hover {
+    color: $hoverlink;
+  }
+
   span {
     color: $primary;
   }
diff --git a/src/app/theme/sass/_typography.scss b/src/app/theme/sass/_typography.scss
new file mode 100644
index 00000000..2548984c
--- /dev/null
+++ b/src/app/theme/sass/_typography.scss
@@ -0,0 +1,473 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-family;
+  width: 100%;
+  margin-top: 0;
+}
+
+h1.color, h2.color, h3.color, h4.color, h5.color, h6.color {
+  color: $danger;
+}
+
+body a {
+  color: $activelink;
+  text-decoration: none !important;
+  transition: color 0.2s ease;
+  &:hover {
+    color: $hoverlink;
+  }
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h4 {
+  font-size: 18px;
+}
+
+h5 {
+  font-size: 15px;
+}
+
+.typography-document-samples {
+
+
+  p {
+    margin: 0;
+  }
+
+  .typography-widget {
+    height: 100%;
+
+    .panel {
+      height: 620px;
+    }
+
+    .panel-title{
+      text-align: center;
+      width: 100%;
+    }
+
+    .panel.with-scroll .panel-body{
+      height: calc(100% - 45px);
+    }
+
+    .panel-content{
+      padding: 15px 22px 5px 22px;
+    }
+
+  }
+
+}
+
+.heading-widget {
+
+  h1, h2, h3, h4, h5, h6 {
+    width: 100%;
+    font-weight: $font-light;
+    text-align: center;
+  }
+
+  p {
+    line-height: 16px;
+    font-weight: $font-normal;
+    text-align: center;
+  }
+}
+
+.more-text-widget {
+  text-align: center;
+  font-size: 14px;
+
+  p {
+    line-height: 17px;
+  }
+
+  .gray {
+    color: #767676;
+  }
+
+  .black {
+    color: #585858;
+  }
+
+  .light-text {
+    font-weight: $font-light;
+  }
+
+  .regular-text {
+    font-weight: $font-normal;
+  }
+
+  .upper-text {
+    text-transform: uppercase;
+  }
+
+  .bold-text {
+    font-weight: $font-bold;
+  }
+
+  .small-text {
+    padding: 5px 0 0 0;
+    p {
+      font-size: 9px;
+      font-weight: $font-light;
+      line-height: 10px;
+    }
+  }
+}
+
+.color-widget {
+  text-align: center;
+  font-size: 14px;
+  font-weight: $font-normal;
+  p {
+    line-height: 17px;
+  }
+
+  .section-block {
+    margin: 14px 0;
+  }
+
+  .yellow-text p {
+    color: $warning-bg;
+  }
+
+  .red-text p {
+    color: $danger-bg;
+  }
+
+  .links {
+    h3 {
+      margin-bottom: 10px;
+    }
+    p {
+      margin-bottom: 0;
+      &.hovered {
+        a {
+          color: $hoverlink;
+        }
+      }
+    }
+  }
+
+}
+
+.lists-widget {
+
+  font-weight: $font-normal;
+  .list-header {
+    width: 100%;
+    text-align: center;
+  }
+
+  .accent {
+    margin-top: 30px;
+    color: $warning-bg;
+    line-height: 14px;
+    font-size: 14px;
+    padding-left: 11px;
+    border-left: 4px solid $warning-bg;
+    margin-left: 13px;
+  }
+
+  ul.blur, ol.blur {
+    padding-left: 13px;
+    margin-bottom: 19px;
+    list-style: none;
+    padding-top: 1px;
+    li {
+      margin-top: 5px;
+      font-size: 14px;
+      ul, ol {
+        padding-left: 20px;
+        margin-bottom: 0;
+        list-style: none;
+      }
+    }
+  }
+
+  ul.blur {
+    li {
+      &:before {
+        content: "• ";
+        color: $warning-bg;
+        width: 10px;
+        display: inline-block;
+      }
+    }
+  }
+
+  ol.blur {
+    counter-reset: section;
+    li {
+      color: $warning-bg;
+      padding-left: 0;
+      line-height: 14px;
+      position: relative;
+      span {
+        color: $default-text;
+        display: block;
+      }
+      ol {
+        padding-left: 0;
+        margin-left: 12px;
+      }
+      &:before {
+        content: counters(section, ".") ".";
+        counter-increment: section;
+        width: 19px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    & > li {
+      span {
+        padding-left: 14px;
+      }
+    }
+    ol {
+      counter-reset: section;
+      & > li {
+        &:before {
+          width: 30px;
+        }
+        span {
+          padding-left: 27px
+        }
+      }
+      ol {
+        & > li {
+          &:before {
+            width: 40px;
+          }
+          span {
+            padding-left: 40px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.columns-section {
+  background-color: white;
+}
+
+p {
+  margin-bottom: 12px;
+  font-family: $font-family;
+  font-size: 14px;
+}
+
+p.small-text {
+  color: $help-text;
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 8px;
+}
+
+.cols-two {
+  margin-bottom: 50px;
+  & > div {
+    float: left;
+    width: 350px;
+    margin-left: 40px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+.cols-three {
+  margin-bottom: 50px;
+  & > div {
+    float: left;
+    width: 222px;
+    margin-left: 40px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+a.learn-more {
+  font-size: 14px;
+  font-weight: $font-bold;
+  text-decoration: none;
+  line-height: 24px;
+}
+
+.img-wrapper {
+  margin-bottom: 19px;
+  margin-top: 5px;
+  overflow: hidden;
+  height: 180px;
+  img {
+    width: 100%;
+  }
+}
+
+.cols-three p {
+  margin-bottom: 10px;
+}
+
+.banner {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.large-banner-wrapper {
+  overflow: hidden;
+  height: 400px;
+  img {
+    height: 100%;
+    width: 100%;
+    display: block
+  }
+}
+
+.banner-text-wrapper {
+  margin-top: -400px;
+  height: 400px;
+  text-align: center;
+}
+
+.banner-text {
+  padding: 85px 90px 60px;
+  display: inline-block;
+  margin: 67px auto;
+  background: #fff;
+  min-width: 432px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.75);
+  color: #ffffff;
+
+  h1 {
+    font-weight: $font-bold;
+    width: 100%;
+    color: #ffffff;
+    margin-bottom: 10px;
+  }
+  p {
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: $font-light;
+    color: $primary;
+    margin-bottom: 0px;
+  }
+}
+
+@media (max-width: 600px) {
+  .banner-text {
+    padding: 55px 60px 30px;
+    min-width: 0;
+    h1 {
+      font-size: 24px;
+    }
+
+    p {
+      font-size: 16px;
+    }
+  }
+}
+
+@media (max-width: 400px) {
+  .banner-text {
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}
+
+.photo-desc {
+  margin-top: 12px;
+  text-align: center;
+}
+
+.text-info {
+  width: 90%;
+  p {
+    margin-bottom: 10px;
+  }
+}
+
+.section-block {
+  padding-bottom: 12px;
+}
+
+.separator {
+  height: 1px;
+  background: $border-light;
+  width: 100%;
+  margin-bottom: 19px;
+  margin-top: 16px;
+}
+
+.section {
+  padding: 0 20px 50px 20px;
+}
+
+.panel.banner-column-panel {
+  padding: 0;
+  margin-bottom: 90px;
+
+  .panel-body{
+    padding: 0;
+  }
+}
+
+
+
+
+  @media screen and (min-width: 1620px) {
+    .col-xlg-1{
+      width: 8.33333333%;
+    }
+    .col-xlg-2{
+      width: 16.66666667%;
+    }
+    .col-xlg-3{
+      width: 25%;
+    }
+    .col-xlg-4{
+      width: 33.33333333%;
+    }
+    .col-xlg-5{
+      width: 41.66666667%;
+    }
+    .col-xlg-6{
+      width: 50%;
+    }
+    .col-xlg-7{
+      width: 58.33333333%;
+    }
+    .col-xlg-8{
+      width: 66.66666667%;
+    }
+    .col-xlg-9{
+      width: 75%;
+    }
+    .col-xlg-10{
+      width: 83.33333333%;
+    }
+    .col-xlg-11{
+      width: 91.66666667%;
+    }
+    .col-xlg-12{
+      width: 100%;
+    }
+  }
diff --git a/src/app/theme/sass/conf/conf.scss b/src/app/theme/sass/conf/conf.scss
index 315617f8..e38fc3c0 100644
--- a/src/app/theme/sass/conf/conf.scss
+++ b/src/app/theme/sass/conf/conf.scss
@@ -1,3 +1,3 @@
 @import 'mixins';
 @import 'colorScheme';
-@import 'variables';
\ No newline at end of file
+@import 'variables';
diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss
index 9a9647cc..674a4c03 100644
--- a/src/app/theme/theme.scss
+++ b/src/app/theme/theme.scss
@@ -1,6 +1,7 @@
 @import "sass/conf/conf";
 @import "sass/bootstrap-overrides/overrides";
 @import "sass/blur-admin-theme";
+@import "sass/typography";
 @import "sass/buttons";
 @import "sass/icons";
 @import "sass/layout";