Style for portals

services/web/public/stylesheets/app/portals.less

@@ -0,0 +1,161 @@
+.content-portal {
+  padding-top: @navbar-height!important;
+
+  /*
+    Begin Header
+  */
+  .banner-image {
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    height: 375px;
+  }
+
+  .image-fill {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .institution-logo {
+    left: 50%;
+    margin-left: -100px;
+    padding: 0;
+    position: absolute;
+    div {
+      background-color: @white;
+      box-shadow: 1px 11px 22px -9px @black-alpha-strong;
+      display: inline-block;
+      height: 125px;
+      overflow: hidden;
+      position: absolute;
+      text-align: center;
+      top: -110px;
+      white-space: nowrap;
+      width: @btn-portal-width;
+    }
+    img {
+      max-height: 75px;
+      max-width: 150px;
+      vertical-align: middle;
+    }
+  }
+
+  .portal-name {
+    background-color: @ol-blue-gray-0;
+    padding-bottom: @line-height-computed; //- center header when no tabs
+    padding-top: @padding-md;
+    text-align: center;
+    width: 100%;
+  }
+  // End Header
+
+  /*
+    Begin Layout
+  */
+  .button-pull,
+  .content-pull {
+    float: left;
+  }
+
+  .button-pull {
+    text-align: right;
+    > a.btn {
+      white-space: normal;
+      width: @btn-portal-width;
+      text-align: center;
+    }
+  }
+  .content-pull {
+    padding-right: @padding-sm;
+    width: calc(~"100% - "@btn-portal-width);
+  }
+  // End Layout
+
+  /*
+    Begin Card
+  */
+  .card {
+    margin-bottom: @margin-md;
+  }
+  // End Card
+
+  /*
+    Begin Actions
+  */
+  .portal-actions {
+    i {
+      margin-bottom: @margin-sm;
+    }
+  }
+  // End Actions
+
+  /*
+    Begin Print
+  */
+  .print {
+    .hidden-print {
+      display: none;
+    }
+  }
+  // End Print
+
+  /*
+    Begin Tabs
+  */
+  .nav-tabs {
+    // Overrides for nav.less
+    background-color: @ol-blue-gray-0;
+    border: 0!important;
+    margin-bottom: @margin-md;
+    margin-top: -@line-height-computed; //- adjusted for portal-name
+    padding: @padding-lg 0 @padding-md;
+    text-align: center;
+
+    a {
+      color: @link-color;
+      &:hover {
+        background-color: transparent!important;
+        border: 0!important;
+        color: @link-hover-color!important;
+      }
+    }
+
+    li {
+      display: inline-block;
+      float: none;
+      a {
+        border: 0;
+      }
+    }
+
+    li.active > a {
+      background-color: transparent!important;
+      border: 0;
+      border-bottom: 1px solid @accent-color-secondary!important;
+      color: @accent-color-secondary;
+      &:hover {
+        color: @accent-color-secondary!important;
+      }
+    }
+  }
+
+  .tab-content:extend(.container) {
+    background-color: transparent!important;
+    border: none!important;
+  }
+  // End Tabs
+
+  @media (max-width: @screen-size-sm-max) {
+    .content-pull {
+      padding: 0;
+      width: auto;
+    }
+
+    .button-pull {
+      > a.btn {
+        width: auto;
+      }
+    }
+  }
+}

services/web/public/stylesheets/components/embed-responsive.less

@@ -0,0 +1,26 @@
+.embed-responsive {
+  display: block;
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.embed-responsive-16by9 {
+  padding-bottom: 56.25% !important;
+}
+.embed-responsive-4by3 {
+  padding-bottom: 75% !important;
+}

services/web/public/stylesheets/components/icons.less

@@ -0,0 +1,9 @@
+// Colors
+.icon-accent {
+  color: @accent-color-secondary;
+}
+
+// Sizes
+.icon-lg {
+  font-size: @font-size-h1;
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -62,9 +62,12 @@
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-@margin-sm: 10px;
-@margin-md: 20px;
-@margin-lg: 30px;
+@margin-xs:                  5px;
+@margin-sm:                 10px;
+@margin-md:                 20px;
+@margin-lg:                 30px;
+@margin-xl:                 40px;
+@margin-xxl:                50px;
 
 @padding-base-vertical:     5px;
 @padding-base-horizontal:   16px;

services/web/public/stylesheets/core/ol-variables.less

@@ -6,6 +6,7 @@
 @footer-height: 50px;
 
 // Styleguide colors
+@ol-blue-gray-0 : #f4f5f8;
 @ol-blue-gray-1 : #E4E8EE;
 @ol-blue-gray-2 : #9DA7B7;
 @ol-blue-gray-3 : #5D6879;
@@ -21,6 +22,8 @@
 @ol-dark-red    : #A6312B;
 
 @ol-type-color  : @ol-blue-gray-3;
+@accent-color-primary: @ol-green; 
+@accent-color-secondary: @ol-dark-green;
 
 // Navbar customization
 @navbar-title-color       : @ol-blue-gray-1;
@@ -65,8 +68,14 @@
 @btn-info-bg             : @ol-blue;
 @btn-info-border         : transparent;
 
+// Padding
 @padding-xs-horizontal   : 8px;
 
+@padding-sm: 10px;
+@padding-md: 20px;
+@padding-lg: 30px;
+@padding-xl: 40px;
+
 // Alerts
 @alert-padding : 15px;
 @alert-border-radius : @border-radius-base;
@@ -167,6 +176,9 @@
 @folders-tag-menu-hover         : rgba(0, 0, 0, .1);
 @folders-tag-menu-active-hover  : rgba(0, 0, 0, .1);
 
+// Portal
+@btn-portal-width               : 200px;
+
 // Project table
 @structured-list-line-height    : 2.5;
 @structured-list-link-color     : @ol-blue;
@@ -273,6 +285,9 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// Portals
+@black-alpha-strong             : rgba(0,0,0,0.8);
+
 
 // v2 History
 @history-base-font-size          : @font-size-small;
@@ -284,6 +299,12 @@
 @history-toolbar-bg-color        : @editor-toolbar-bg;
 @history-toolbar-color           : #FFF;
 
+// Screens
+// added -size to not conflict with common_variables
+@screen-size-sm-max                   : 767px;
+@screen-size-md-min                   : 768px;
+@screen-size-md-max                   : 991px;
+
 // System messages
 @sys-msg-background             : @ol-blue;
 @sys-msg-color                  : #FFF;
@@ -300,6 +321,7 @@
 @gray-light:            #a4a4a4;
 @gray-lighter:          #cfcfcf;
 @gray-lightest:         #f0f0f0;
+@white:                 #ffffff;
 
 @blue:                  #405ebf;
 @blueDark:              #040D2D;

services/web/public/stylesheets/ol-style.less

@@ -6,8 +6,11 @@
 @import "app/ol-style-guide.less";
 @import "_style_includes.less";
 @import "_ol_style_includes.less";
+@import "components/embed-responsive.less";
+@import "components/icons.less";
 
 // Pages
 @import "app/about.less";
 @import "app/blog-posts.less";
-@import "app/cms-page.less";
+@import "app/cms-page.less";
+@import "app/portals.less";