Merge branch 'new_typography' into v2

# Conflicts:
#	src/app/pages/typography/typography.html

src/app/pages/dashboard/dashboard.html

@@ -47,3 +47,11 @@
     </blur-panel>
   </div>
 </div>
+
+<div class="row">
+  <div class="col-lg-4 col-sm-6 col-xs-12">
+    <blur-panel title="Weather" class-container="medium-panel with-scroll">
+      <blur-weather forecast="5"></blur-weather>
+    </blur-panel>
+  </div>
+</div>

src/app/pages/dashboard/widgets/weather/_weather.scss

@@ -0,0 +1,81 @@
+.weather-wrapper {
+
+  height: 100%;
+
+  .weather-main-info {
+    min-height: 140px;
+
+    div i {
+      display: inline-block;
+      width: 48px;
+      text-align: center;
+    }
+
+    .city-date {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  .temp-by-time {
+    height: calc(100% - 210px);
+  }
+
+  .select-day {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    height: 70px;
+
+    .day {
+      display: table-cell;
+      line-height: 1;
+      text-align: center;
+      cursor: pointer;
+
+      i.weatherIcon {
+        transition: color 0.5s ease;
+      }
+
+      .select-day-info {
+        vertical-align: super;
+      }
+    }
+
+    .day:hover {
+      i.weatherIcon {
+        color: #40BDE8;
+      }
+    }
+  }
+
+  .rightHeading {
+    display: block;
+    float: right;
+  }
+
+  .weather-info {
+    display: inline-block;
+    vertical-align: super;
+  }
+
+  .font-x1dot25 {
+    font-size: 1.5em;
+  }
+
+  .font-x1dot5 {
+    font-size: 1.5em;
+  }
+
+  .font-x2 {
+    font-size: 2em;
+  }
+
+  .font-x3 {
+    font-size: 3em;
+  }
+
+}
+
+

src/app/pages/dashboard/widgets/weather/weather.html

@@ -0,0 +1,45 @@
+<div class="weather-wrapper">
+  <div class="weather-main-info">
+    <h5 class="city-date font-x1dot5">
+      <div>
+        {{geoData.geoplugin_city}} - {{geoData.geoplugin_countryName | uppercase}}
+      </div>
+      <div>
+        {{ weather.days[weather.current].date | date : 'EEEE h:mm'}}
+      </div>
+    </h5>
+    <div class="weather-description font-x1dot5">
+      <i class="font-x3 {{weatherIcons[weather.days[weather.current].icon]}}"></i>
+
+      <div class="weather-info">{{weather.days[weather.current].main}} -
+        {{weather.days[weather.current].description}}
+      </div>
+    </div>
+    <div class="weather-temp font-x1dot5">
+      <i class="font-x2 ion-thermometer"></i>
+
+      <div class="weather-info" ng-switch on="units">
+                <span ng-switch-when="metric">{{weather.days[weather.current].temp}} °C | <a
+                    ng-click="switchUnits('imperial')" href>°F</a></span>
+                <span ng-switch-when="imperial">{{weather.days[weather.current].temp}} °F | <a
+                    ng-click="switchUnits('metric')" href>°C</a></span>
+      </div>
+    </div>
+  </div>
+  <div id="tempChart" class="temp-by-time"></div>
+  <div class="select-day">
+    <div class="day" ng-repeat="day in weather.days" ng-click="switchDay($index)">
+      <div>
+        <span class="font-x1dot25">{{day.temp}}</span>
+      </div>
+      <div>
+        <i class="weatherIcon font-x2 {{weatherIcons[day.icon]}}"></i></td>
+        <span class="select-day-info">{{day.main}}</span>
+      </div>
+      <div>
+        <span>{{day.date | date : 'EEE'}}</span>
+      </div>
+    </div>
+  </div>
+</div>
+</div>

src/app/pages/dashboard/widgets/weather/weather.js

@@ -0,0 +1,141 @@
+'use strict';
+
+blurAdminApp.directive('blurWeather', function () {
+  return {
+    restrict: 'EA',
+    controller: ['$scope', '$http', '$timeout', '$element', function ($scope, $http, $timeout, $element) {
+      var url = 'http://api.openweathermap.org/data/2.5/forecast';
+      var method = 'GET';
+      var key = '2de143494c0b295cca9337e1e96b00e0';
+      var middleOfTheDay = 15;
+      $scope.units = 'metric';
+      $scope.weatherIcons = {
+        '01d': 'ion-ios-sunny-outline',
+        '02d': 'ion-ios-partlysunny-outline',
+        '03d': 'ion-ios-cloud-outline',
+        '04d': 'ion-ios-cloud',
+        '09d': 'ion-ios-rainy',
+        '10d': 'ion-ios-rainy-outline',
+        '11d': 'ion-ios-thunderstorm-outline',
+        '13d': 'ion-ios-snowy',
+        '50d': 'ion-ios-cloudy-outline',
+        '01n': 'ion-ios-cloudy-night-outline',
+        '02n': 'ion-ios-cloudy-night',
+        '03n': 'ion-ios-cloud-outline',
+        '04n': 'ion-ios-cloud',
+        '09n': 'ion-ios-rainy',
+        '10n': 'ion-ios-rainy-outline',
+        '11n': 'ion-ios-thunderstorm',
+        '13n': 'ion-ios-snowy',
+        '50n': 'ion-ios-cloudy-outline'
+      };
+      $scope.weather = {};
+
+      $scope.switchUnits = function (name) {
+        $scope.units = name;
+        $scope.updateWeather();
+      };
+
+      $scope.switchDay = function (day) {
+        $scope.weather.current = day;
+        makeChart($scope.weather.days[$scope.weather.current].timeTemp)
+      };
+
+      $scope.updateWeather = function () {
+        $http({
+          method: method, url: url, params: {
+            appid: key,
+            lat: $scope.geoData.geoplugin_latitude,
+            lon: $scope.geoData.geoplugin_longitude,
+            units: $scope.units
+          }
+        }).then(function success(response) {
+          saveWeatherData(response.data);
+          makeChart($scope.weather.days[$scope.weather.current].timeTemp)
+        }, function error() {
+          console.log("WEATHER FAILED")
+        });
+      };
+
+      function updateGeoData() {
+        $http.jsonp('http://www.geoplugin.net/json.gp?jsoncallback=JSON_CALLBACK').then(function success(response) {
+          $scope.geoData = response.data;
+          $scope.updateWeather();
+        }, function error() {
+          console.log("GEO FAILED")
+        });
+      }
+
+      function makeChart(data) {
+        AmCharts.makeChart('tempChart', {
+          type: 'serial',
+          theme: 'blur',
+          handDrawn: true,
+          categoryField: 'time',
+          dataProvider: data,
+          valueAxes: [
+            {
+              axisAlpha: 0.3,
+              gridAlpha: 0
+            }
+          ],
+          graphs: [
+            {
+              bullet: 'square',
+              fillAlphas: 0.3,
+              fillColorsField: 'lineColor',
+              legendValueText: '[[value]]',
+              lineColorField: 'lineColor',
+              title: 'Temp',
+              valueField: 'temp'
+            }
+          ],
+          categoryAxis: {
+            gridAlpha: 0,
+            axisAlpha: 0.3
+          }
+        }).write('tempChart');
+      }
+
+      function saveWeatherData(data) {
+        var firstItem = data.list[0];
+        var weather = {
+          days: [{
+            date: new Date(),
+            timeTemp: [],
+            main: firstItem.weather[0].main,
+            description: firstItem.weather[0].description,
+            icon: firstItem.weather[0].icon,
+            temp: firstItem.main.temp
+          }], current: 0
+        };
+        data.list.forEach(function (item, i) {
+          var itemDate = new Date(item.dt_txt);
+          if (itemDate.getDate() !== weather.days[weather.days.length - 1].date.getDate()) {
+            weather.days.push({date: itemDate, timeTemp: []});
+          }
+          var lastItem = weather.days[weather.days.length - 1];
+          lastItem.timeTemp.push({
+            time: itemDate.getHours(),
+            temp: item.main.temp
+          });
+          if ((weather.days.length > 1 && itemDate.getHours() == middleOfTheDay) || i == data.list.length - 1) {
+            lastItem.main = item.weather[0].main;
+            lastItem.description = item.weather[0].description;
+            lastItem.icon = item.weather[0].icon;
+            lastItem.temp = item.main.temp;
+            lastItem.date.setHours(i == data.list.length - 1 ? 0 : middleOfTheDay);
+            lastItem.date.setMinutes(0);
+          }
+        });
+        console.log(weather.days[weather.current].date);
+        weather.days = weather.days.slice(0, $element.attr('forecast') || 5);
+        $scope.weather = weather;
+      }
+
+      updateGeoData();
+
+    }],
+    templateUrl: 'app/pages/dashboard/widgets/weather/weather.html'
+  };
+});

src/app/pages/typography/_typography.scss

@@ -18,44 +18,274 @@ a {
 }
 
 h1 {
-  font-size: 36px;
-  line-height: 38px;
+  font-size: 32px;
+  line-height: 40px;
   margin-bottom: 14px;
   font-weight: 100;
 }
 
 h2 {
-  font-size: 26px;
-  line-height: 38px;
+  font-size: 24px;
+  line-height: 40px;
   margin-bottom: 10px;
   font-weight: 200;
 }
 
 h3 {
-  font-size: 22px;
-  line-height: 42px;
+  font-size: 20px;
+  line-height: 40px;
   margin-bottom: 6px;
   font-weight: 300;
 }
 
 h4 {
-  font-size: 19px;
-  line-height: 43px;
+  font-size: 18px;
+  line-height: 38px;
   margin-bottom: 5px;
 }
 
 h5 {
-  font-size: 16px;
-  line-height: 45px;
+  font-size: 15px;
+  line-height: 35px;
   margin-bottom: 3px;
 }
 
+.typography-document-samples {
+
+
+  .typography-document{
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .typography-widget {
+
+    div.panel{
+      height: 620px;
+    }
+    height: 100%;
+    .panel-body {
+      padding: 15px 30px 0 30px;
+    }
+
+    .typography-widget-header {
+      text-align: center;
+      margin: 0;
+      width: 100%;
+      font-weight: 100;
+    }
+
+    .heading-widget {
+      text-align: center;
+
+      h1, h2, h3, h4, h5, h6 {
+        width: 100%;
+        font-weight: 100;
+      }
+
+      p {
+        line-height: 16px;
+        font-weight: 100;
+      }
+    }
+
+    .more-text-widget {
+      text-align: center;
+      font-size: 14px;
+
+      p {
+        line-height: 17px;
+      }
+
+      .gray {
+        color: #767676;
+      }
+
+      .black {
+        color: #585858;
+      }
+
+      .light-text {
+        font-weight: 100;
+      }
+
+      .regular-text {
+        font-weight: 600;
+      }
+
+      .upper-text {
+        text-transform: uppercase;
+      }
+
+      .bold-text {
+        font-weight: 900;
+      }
+
+      .small-text {
+        padding: 5px 0 24px 0;
+        p {
+          font-size: 10px;
+          font-weight: 100;
+          line-height: 10px;
+        }
+      }
+    }
+
+    .color-widget {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 300;
+      p {
+        line-height: 17px;
+      }
+
+      .section-block{
+        margin: 14px 0;
+      }
+
+      .red-text p{
+        color: $dribble-color;
+      }
+
+      .blue-text p{
+        color: $primary;
+      }
+
+      .links {
+        h3 {
+          margin-bottom: 10px;
+        }
+        p {
+          margin-bottom: 0;
+          &.hovered {
+            a {
+              color: $danger;
+            }
+          }
+        }
+      }
+
+    }
+
+    .lists-widget{
+
+
+      font-weight: 100;
+      .list-header{
+        width: 100%;
+        font-weight: 100;
+        text-align: center;
+      }
+
+      .accent {
+        margin-top: 44px;
+        color: $dribble-color;
+        line-height: 14px;
+        font-size: 14px;
+        margin-bottom: 36px;
+        padding-left: 11px;
+        border-left: 4px solid $dribble-color;
+        margin-left: 13px;
+      }
+
+      ul.blur, ol.blur {
+        padding-left: 13px;
+        margin-bottom: 19px;
+        list-style: none;
+        padding-top: 1px;
+        li {
+          margin-top: 5px;
+          color: $default-text;
+          font-size: 14px;
+          ul, ol {
+            padding-left: 20px;
+            margin-bottom: 0;
+            list-style: none;
+          }
+        }
+      }
+
+      ul.blur {
+        li {
+          &:before {
+            content: "• ";
+            color: $dribble-color;
+            width: 10px;
+            display: inline-block;
+          }
+        }
+      }
+
+      ol.blur {
+        counter-reset: section;
+        li {
+          color: $dribble-color;
+          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;
   color: $default-text;
   font-family: $font-family;
   font-size: 14px;
-  line-height: 24px;
 }
 
 p.small-text {
@@ -65,16 +295,7 @@ p.small-text {
   margin-bottom: 8px;
 }
 
-.accent {
-  margin-top: 5px;
-  color: $danger;
-  line-height: 24px;
-  font-size: 16px;
-  margin-bottom: 36px;
-  padding-left: 24px;
-  border-left: 6px solid $danger;
-  margin-left: 36px;
-}
+
 
 .cols-two {
   margin-bottom: 50px;
@@ -121,114 +342,30 @@ a.learn-more {
   margin-bottom: 10px;
 }
 
-ul.blur, ol.blur {
-  padding-left: 32px;
-  margin-bottom: 19px;
-  list-style: none;
-  padding-top: 1px;
-  li {
-    line-height: 22px;
-    color: $default-text;
-    font-size: 14px;
-    margin-bottom: 8px;
-    ul, ol {
-      padding-left: 20px;
-      margin-bottom: 0;
-      margin-top: 8px;
-      list-style: none;
-    }
-  }
-}
 
-ul.blur {
-  li {
-    &:before {
-      content: "• ";
-      color: $danger;
-      width: 15px;
-      display: inline-block;
-    }
-  }
-}
-
-ol.blur {
-  counter-reset: section;
-  li {
-    color: $danger;
-    font-weight: bold;
-    padding-left: 0;
-    position: relative;
-    span {
-      color: $default-text;
-      font-weight: normal;
-      display: block;
-    }
-    ol {
-      padding-left: 0;
-      margin-left: 34px;
-    }
-    &: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: 19px;
-    }
-  }
-  ol {
-    counter-reset: section;
-    & > li {
-      &:before {
-        width: 30px;
-      }
-      span {
-        padding-left: 30px
-      }
-    }
-    ol {
-      & > li {
-        &:before {
-          width: 40px;
-        }
-        span {
-          padding-left: 40px;
-        }
-      }
-    }
-  }
-}
 
 .banner {
   position: relative;
-  padding-top: 17px;
-  margin-bottom: 27px;
+  margin-bottom: 20px;
 }
 
 .large-banner-wrapper {
   overflow: hidden;
-  height: 252px;
+  height: 400px;
   img {
+    height: 100%;
     display: block
   }
 }
 
 .banner-text-wrapper {
-  margin-top: -261px;
-  height: 261px;
+  margin-top: -400px;
+  height: 400px;
   text-align: center;
 }
 
 .banner-text {
-  padding: 30px 20px;
+  padding: 85px 90px 60px;
   display: inline-block;
   margin: 67px auto;
   background: #fff;
@@ -237,19 +374,32 @@ ol.blur {
   background: rgba(0, 0, 0, 0.75);
   color: #ffffff;
 
-  h3 {
+  h1 {
+    font-weight: bold;
     width: 100%;
     color: #ffffff;
+    margin-bottom: 10px;
   }
   p {
-    color: $warning;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 300;
+    color: $primary;
     margin-bottom: 0px;
   }
 }
 
 @media (max-width: 600px) {
   .banner-text {
-    min-width: 0px;
+    padding: 55px 60px 30px;
+    min-width: 0;
+    h1{
+      font-size: 24px;
+    }
+
+    p{
+      font-size: 16px;
+    }
   }
 }
 
@@ -274,19 +424,7 @@ ol.blur {
   }
 }
 
-.links {
-  h2 {
-    margin-bottom: 10px;
-  }
-  p {
-    margin-bottom: 0;
-    &.hovered {
-      a {
-        color: $danger;
-      }
-    }
-  }
-}
+
 
 .section-block {
   padding-bottom: 12px;
@@ -301,7 +439,11 @@ ol.blur {
 }
 
 .section {
-  padding-top: 7px;
-  padding-bottom: 12px;
+  padding: 0 20px 50px 20px;
+}
+
+div.banner-column-panel{
+  padding: 0;
+  margin-bottom: 50px;
 }
 

src/app/pages/typography/typography.html

@@ -1,181 +1,271 @@
 <div class="widgets">
-  <div class="widgets-block">
-    <div class="panel panel-default invisible" zoom-in>
-      <div class="panel-body content-panel">
-        <div class="panel-content">
-          <div class="section-block">
-            <h1>H1. Blur Admin Heading</h1>
-
-            <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-              vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-              ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-              id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-              fusce.</p>
-          </div>
-          <div class="section-block">
-            <h2>H2. Blur Admin Heading</h2>
-
-            <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-              vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-              ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-              id dolor sollicitudin. </p>
-          </div>
-          <div class="section-block">
-            <h3>H3. Blur Admin Heading</h3>
-
-            <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-              vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-              ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-              id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-              fusce.</p>
-          </div>
-          <div class="section-block">
-            <h4 class="color">H4. Color Blur Admin Heading</h4>
-
-            <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-              vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-              ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-              id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-              fusce.</p>
-          </div>
-          <div class="section-block">
-            <h5 class="color">H5. Color Blur Admin Heading</h5>
-
-            <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
-              vestibulum eleifend pellentesque, mi nam. Odio amet viverra rutrum quisque, dolor elit, dolor mauris integer
-              ut non at sed. Quisque neque metus sit montes diam. Eiusmod id id volutpat gravida, eleifend consequat at,
-              id dolor sollicitudin. Ut id et libero mauris id. Dolor eget vel non aenean arcu, sociis neque molestie
-              fusce.</p>
-          </div>
-
-          <div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,
-            lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam. Lorem ipsum dolor sit amet,
-            id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum eleifend pellentesque,
-            mi nam.
-          </div>
-
-          <div class="section-block">
-            <p class="small-text">Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia
-              scelerisque pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
-
-            <p class="small-text">Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque
-              pharetra, placerat vestibulum eleifend pellentesque, mi nam.</p>
-          </div>
-
-          <div class="section">
-            <h2>Columns</h2>
-
-            <div class="row">
-              <div class="col-sm-6">
-                <div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
-                <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
-                    href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
-                    href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
-                    href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
-                  ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed penatibus
-                  arcu nulla.</p>
-              </div>
-              <div class="col-sm-6">
-                <div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
-                <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum
-                  lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet
-                  fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
-              </div>
+  <div class="typography-document-samples row-fluid">
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel heading-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Text Size</h2>
             </div>
+            <div class="section-block">
+              <h1>H1. Heading 1</h1>
 
-            <div class="separator"></div>
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl </p>
 
-            <div class="row">
-              <div class="col-sm-4">
-                <h4>Column heading example</h4>
-              </div>
-              <div class="col-sm-4">
-                <h4>Yet another column heading example</h4>
-              </div>
-              <div class="col-sm-4">
-                <h4>Third column heading example</h4>
-              </div>
+              <p>pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
             </div>
-            <div class="row">
-              <div class="col-sm-4">
-                <div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
-                <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
-                  maecenas</p>
-                <a href class="learn-more">Lean more</a>
-              </div>
-              <div class="col-sm-4">
-                <div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
-                <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in
-                  velit</p>
-                <a href class="learn-more">Lean more</a>
-              </div>
-              <div class="col-sm-4">
-                <div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
-                <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
-                <a href class="learn-more">Lean more</a>
-              </div>
+            <div class="section-block">
+              <h2>H2. Heading 2</h2>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
+            </div>
+            <div class="section-block">
+              <h3>H3. Heading 3</h3>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
+            </div>
+            <div class="section-block">
+              <h4>H4. Heading 4</h4>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
+                vestibulum eleifend pellentesque, mi nam.</p>
+            </div>
+            <div class="section-block">
+              <h5>H5. Heading 5</h5>
+
+              <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel more-text-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Some more text</h2>
+            </div>
+            <div class="section-block light-text">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
+                parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+              </p>
+            </div>
 
-          <div class="separator"></div>
+            <div class="section-block regular-text">
+              <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna
+                mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+                ridiculus
+                mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
+              </p>
+            </div>
+            <div class="section-block upper-text bold-text">
+              <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. </p>
+            </div>
+            <div class="section-block bold-text">
+              <p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla.
+              </p>
+            </div>
+            <div class="section-block small-text">
+              <p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
 
-          <h5>Unordered list:</h5>
-          <ul class="blur">
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Сlacinia scelerisque pharetra
-              <ul>
-                <li>Dui rhoncus quisque integer lorem
+              <p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
+
+              <p> pellentesque, mi nam.</p>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel lists-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Lists</h2>
+            </div>
+            <div class="section-block">
+              <h5 class="list-header">Unordered list:</h5>
+              <ul class="blur">
+                <li>Lorem ipsum dolor sit amet</li>
+                <li>Сlacinia scelerisque pharetra
                   <ul>
-                    <li>Libero iaculis vestibulum eu vitae phasellus enim</li>
+                    <li>Dui rhoncus quisque integer lorem
+                      <ul>
+                        <li>Libero iaculis vestibulum eu vitae</li>
+                      </ul>
+                    </li>
                   </ul>
                 </li>
+                <li>Nisl lectus nibh habitasse suspendisse ut</li>
+                <li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
               </ul>
-            </li>
-            <li>Nisl lectus nibh habitasse suspendisse ut</li>
-            <li>Posuere cursus hac, vestibulum wisi nulla bibendum fames, magna vel turpis dis nibh</li>
-          </ul>
-
-          <h5>Ordered Lists:</h5>
-          <ol class="blur">
-            <li><span>Eu non nec cursus quis mollis, amet quam nec quam</span></li>
-            <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
-              <ol>
-                <li><span>Interdum et justo nulla</span>
+              <h5 class="list-header">Ordered Lists:</h5>
+              <ol class="blur">
+                <li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
+                <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
                   <ol>
-                    <li><span>Magna amet, suscipit suscipit non amet fames sed erat</span></li>
+                    <li><span>Interdum et justo nulla</span>
+                      <ol>
+                        <li><span>Magna amet, suscipit suscipit non amet</span></li>
+                      </ol>
+                    </li>
                   </ol>
                 </li>
+                <li><span>Metus duis eu non eu ridiculus turpis</span></li>
+                <li>
+                  <span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
+                </li>
               </ol>
-            </li>
-            <li><span>Metus duis eu non eu ridiculus turpis</span></li>
-            <li><span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
-            </li>
-          </ol>
-
-          <div class="banner">
-            <div class="large-banner-wrapper">
-              <img src="img/banner.png" alt=""/>
-            </div>
-
-            <div class="banner-text-wrapper">
-              <div class="banner-text">
-                <h3>Sample Banner Text</h3>
-
-                <p>Lorem ipsum dolor sit amet</p>
-
-                <p>Odio amet viverra rutrum</p>
+              <div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
+                pulvinar,
+                lacinia scelerisque pharetra.
               </div>
             </div>
-
-            <div class="photo-desc"><p class="small-text">Banner Description Text</p></div>
           </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
+      <div class="widgets-block typography-widget">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel color-widget">
+            <div class="section-block">
+              <h2 class="typography-widget-header">Text Color</h2>
+            </div>
 
-          <div class="links">
-            <h2>Links</h2>
+            <div class="section-block red-text ">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
+                ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
+                ornare
+                nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
+                dis
+                parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
+              </p>
+            </div>
 
-            <p><a href>Active link — #41bee9</a></p>
+            <div class="section-block blue-text ">
+              <p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
+                urna
+                mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+                ridiculus
+                mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
+              </p>
+            </div>
 
-            <p class="hovered"><a href>Hover link — #9d498c</a></p>
+            <div class="section-block links">
+              <p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
+                quis
+                <a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
+                    href>mattis</a> vel eros. In sed ornare
+                nulla.
+              </p>
+            </div>
+
+            <div class="section-block links">
+              <p><a href>Active link — #41bee9</a></p>
+
+              <p class="hovered"><a href>Hover link — #9d498c</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row-fluid">
+    <div class="col-lg-12 col-sm-12 col-xs-12">
+      <div class="widgets-block">
+        <div class="panel panel-default invisible with-scroll" zoom-in>
+          <div class="panel-body content-panel banner-column-panel">
+            <div class="banner">
+              <div class="large-banner-wrapper">
+                <img src="img/banner.png" alt=""/>
+              </div>
+              <div class="banner-text-wrapper">
+                <div class="banner-text">
+                  <h1>Simple Banner Text</h1>
+
+                  <p>Lorem ipsum dolor sit amet</p>
+
+                  <p>Odio amet viverra rutrum</p>
+                </div>
+              </div>
+            </div>
+            <div class="section">
+              <h2>Columns</h2>
+
+              <div class="row">
+                <div class="col-sm-6">
+                  <div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
+                  <p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
+                      href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
+                      href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
+                      href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
+                    ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
+                    penatibus
+                    arcu nulla.</p>
+                </div>
+                <div class="col-sm-6">
+                  <div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
+                  <p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
+                    fermentum
+                    lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
+                    aliquet
+                    fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
+                </div>
+              </div>
+
+              <div class="separator"></div>
+
+              <div class="row">
+                <div class="col-sm-4">
+                  <h4>Column heading example</h4>
+                </div>
+                <div class="col-sm-4">
+                  <h4>Yet another column heading example</h4>
+                </div>
+                <div class="col-sm-4">
+                  <h4>Third column heading example</h4>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
+                  <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
+                    maecenas</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
+                  <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
+                    in
+                    velit</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+                <div class="col-sm-4">
+                  <div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
+                  <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
+                  <a href class="learn-more">Lean more</a>
+                </div>
+              </div>
+              <div class="separator"></div>
+            </div>
           </div>
         </div>
       </div>

src/assets/css/main.scss

@@ -31,6 +31,7 @@
 "../../app/pages/dashboard/widgets/trafficChart/trafficChart.scss",
 "../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
 "../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
+"../../app/pages/dashboard/widgets/weather/weather.scss",
 "../../app/pages/maps/widgets/leaflet/leaflet.scss",
 "../../app/pages/maps/widgets/google-maps/google-maps.scss",
 "../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",