supernav-test 2.2.14 → 2.2.18

package/src/components/lsac-supernavbar/stylesheets/study-filter.scss

@@ -0,0 +1,358 @@
+// TODO - this is literally copied+pasted from myriad, we should probably figure out some other approach?
+// NOTE - this file uses rem units - the base is set from the HTML root. As LSAC defines this, and it is used only within
+//        the LSAC Analytics product, leaving it as is.
+$standard-corner-radius: 0.5rem;
+$dropdown-tag-lateral-padding: 0.5rem;
+$dropdown-font-size: 1.4rem;
+$form-input-height: 3.8rem;
+
+$blue1: #34454f;
+$blue2: #4d6678;
+$blue3: #758ea0;
+$blue4: #618dad;
+$blue5: #1e77b3;
+$blue6: #0084b7;
+$blue7: #0092c8;
+$blue8: #b1cadc;
+$blue9: #cfe8fa;
+$blue10: #e0f1f9;
+$blue11:#416783;
+$blue12:#1D96DD;
+$blueGray3: #e5e8ea;
+$grey1: #58585b;
+$grey2: #989898;
+$grey3: #cbcbcb;
+$grey4: #e5e5e5;
+$grey5: #efefef;
+$grey6: #b2b2b2;
+$grey7: #cccccc;
+$grey8: #f7f7f7;
+
+$gray2: #fafafa;
+$gray5: #f2f2f2;
+$gray10: #e5e5e5;
+$gray15: #d9d9d9;
+$gray20: #cccccc;
+$gray30: #b2b2b2;
+$gray40: #989898;
+$gray50: #808080;
+$gray60: #666666;
+$gray65: #585858;
+$gray70: #4d4d4d;
+$gray80: #333333;
+$gray90: #1a1a1a;
+
+$bodyText: $gray80;
+$brandColor:$blue12;
+
+$black: #000;
+$white: #fff;
+
+$dottedBorderColor: #d9d9d9;
+$dropdown-tag-background-color: $blue9;
+$dropdown-placeholder-color: $gray40;
+$dropdown-hover-color: $blueGray3;
+$dropdown-icons-color: $gray60;
+$dropdown-icons-hover-color: $black;
+$tooltip-heading-text-color: $gray30;
+$tooltip-drilldown-item-hover-color: $gray50; // The background color for selectable elements in a frozen tooltip, like the drilldown one.
+$studySessionFilterBorder: .1rem solid $gray15;
+$studySessionFilterBorder: .1rem solid $gray15;
+
+$regular: 400;
+$semibold: 600;
+$bold: 800;
+
+$dropdown-open-z-index: 700;
+$study-filter-dropdown-z-index:1000;
+$study-filter-z-index:1000;
+$top-nav-dropdown-z-index: 3500;
+
+$sidebar-width-value: 6;
+$sidebar-expanded-width-value: 25;
+$sidebar-width: $sidebar-width-value * 1rem;
+$sidebar-expanded-width: $sidebar-expanded-width-value * 1rem;
+$main-content-padding: 3rem;
+$main-content-left-pad: $sidebar-width + $main-content-padding;
+$minimized-study-filter-height: 5.6rem;
+$main-content-height: calc(100% - 3.5rem);
+
+/// Changes cursor to pointer on hover.
+@mixin clickable {
+  cursor: pointer;
+
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  &:active {
+    text-shadow: 0rem 0rem 1rem $grey3;
+  }
+}
+
+.study-session-filter {
+
+  // Mark this element as a flex container.
+  display: -ms-flexbox;
+  display: flex;
+  // Force contained flex items into a single line.
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  // Align the items to the center of the rows.
+  align-items: center;
+  -ms-flex-align: center;
+  width: 100%;
+  padding:0 4.5rem 0 3rem;
+
+  &.mobile {
+    width: 100%;
+    padding: 0 3rem;
+    background-color: $blueGray3;
+    border-top: $studySessionFilterBorder;
+    border-bottom: $studySessionFilterBorder;
+  }
+
+  &.disabled > span {
+    color: $gray20 !important;
+  }
+
+  .title {
+    // Override Safari defaults `flex-shrink: 1` to 0. To ensure
+    // title field won't collapse.
+    flex-shrink: 0;
+  }
+
+  .title, .selected-study {
+    font-weight: $semibold;
+    font-size: 1.6rem;
+    color: $blue1;
+  }
+
+  .selected-study {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 1rem;
+  }
+
+  .study-filter-display-mode {
+    @include clickable;
+    color: $blue5;
+    &:hover {
+      color: $blue7;
+    }
+  }
+
+  .study-filter-action {
+    // Override Safari defaults `flex-shrink: 1` to 0. To ensure
+    // `study-filter-display-mode` text field won't collapse.
+    flex-shrink: 0;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    margin-right: 0.5rem;
+  }
+
+  .study-filter-not-applicable {
+    padding-left: 1rem;
+  }
+
+  .study-filter-dropdown-container {
+    margin: 1.4rem 1rem;
+    max-width: 36rem;
+    min-width: 40%;
+    z-index: $top-nav-dropdown-z-index;
+  }
+}
+
+.selected-study-tooltip {
+  margin: 0 $main-content-padding 0 #{$main-content-left-pad + 2rem};
+}
+
+.study-filter-dropdown {
+  height: 3.6rem;
+
+  .study-filter-combobox, .study-selector-content {
+    -webkit-box-shadow: 0px 8px 10px -4px rgba(189,189,189,0.75);
+    -moz-box-shadow: 0px 8px 10px -4px rgba(189,189,189,0.75);
+    box-shadow: 0px 8px 10px -4px rgba(189,189,189,0.75);
+    position: relative;
+    z-index: $study-filter-z-index;
+  }
+  .study-filter-selector {
+    padding-right: 0.8rem;
+    padding-left: 0.8rem;
+    width: 28.5rem;
+
+    .input-container {
+      .Select-menu-outer {
+        display: none;
+      }
+      .Select-value {
+        border: .1rem solid #d9d9d9;
+        padding: 0 0.5rem 0 0;
+        font-weight: $regular;
+        &.is-archived{
+          background-color: $white;
+        }
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    .dropdown-container {
+      position: relative;
+      z-index: $study-filter-dropdown-z-index;
+      .study-selector-content {
+        z-index: $dropdown-open-z-index;
+        position: absolute;
+        width: 36rem;
+        background-color: $white;
+        border: .1rem solid #d9d9d9;
+        padding: 1rem 1rem 1rem 1rem;
+        border-radius: 0 5px 5px 5px;
+
+        .search-input {
+          width: 100%;
+          margin-right: 2rem;
+          background: none transparent;
+          border: 1px solid $grey7;
+        }
+
+        .checkbox {
+          padding-right: 2rem;
+        }
+
+        .selector-options-container {
+          max-height: 50rem;
+          overflow-y: auto;
+          .study-option {
+            cursor: pointer;
+            display: inline-flex;
+            flex-direction: row-reverse;
+            -ms-flex-direction: row-reverse;
+            line-height: 2.0rem;
+            padding: 0 0.5rem;
+            background-color: #cfe8fa;
+            color: #333333;
+            border: .2rem solid #d9d9d9;
+            border-radius: 0.5rem;
+            margin: .2rem;
+            &.is-archived{
+              background-color: $white;
+            }
+            &:hover {
+              opacity: 0.7;
+            }
+            &.is-disabled,
+            &.is-archived.is-disabled {
+              color: $grey1;
+              background-color: $grey2;
+              cursor: not-allowed;
+              opacity: 0.7;
+            }
+          }
+        }
+      }
+    }
+  }
+  .checkbox-container{
+    margin-top: 4px;
+    .checkbox{
+      position: relative;
+      top: 2px;
+    }
+  }
+}
+
+/// This file contains style overrides for the react-select component we use as our Combobox.
+
+.report-selector-dropdown {
+  z-index: 500;
+}
+
+.Select {
+
+  color: $bodyText;
+
+  &.is-disabled {
+    opacity: 0.5;
+  }
+
+  .Select-control {
+    border-radius: $standard-corner-radius;
+    height: $form-input-height;
+
+    .Select-placeholder {
+      color: $dropdown-placeholder-color;
+    }
+
+    .Select-placeholder, .Select-placeholder, :not(.Select--multi) > .Select-control .Select-value {
+      line-height: $form-input-height;
+    }
+  }
+
+  &.Select--multi {
+    .Select-value {
+      // TODO: The flex code seems to work even without `display: -ms-flexbox;` in IE 10, confirm this is the case.
+      display: inline-flex;
+      // react-select lays out the removal X before the label, using this direction we place them in reverse order.
+      flex-direction: row-reverse;
+      -ms-flex-direction: row-reverse;
+
+      line-height: 2.0rem;  // Increased from react-select 1.4rem default, due to our greater input element height.
+      padding: 0 $dropdown-tag-lateral-padding;
+
+      // TODO: Double check the blue color
+      background-color: $dropdown-tag-background-color;
+      color: $bodyText;
+      // Transparent white. Basically, eliminate the border. For some reason removing the border just doesn't look good,
+      // as it messes with the layout.
+      border-color: rgba(255, 255, 255, 0);
+      border-radius: $standard-corner-radius;
+
+      .icon {
+        // Force icons we inject into the selected tags to be sized same as the text so they don't mess with tag height.
+        font-size: inherit;
+        padding-right: 0.5rem;
+      }
+
+      .Select-value-label {
+        display: inherit;
+        flex-grow: 1;  // This ensures that the label takes up all available space not used up by the icon.
+        color: $bodyText;
+        font-size: $dropdown-font-size;
+      }
+
+      // This is the X that removes selections.
+      .Select-value-icon {
+        display: inherit;
+        flex-grow: 0;  // This tells the icon to only grow as much as it needs to display itself and no more.
+        -ms-flex: 0;
+        border-right: none;  // Eliminate the close button's border.
+        padding: 0.3rem 1rem 0.1rem 0.5rem;  // Mirror image of the default react-select padding, with the right padding doubled to match the left.
+        margin-right: $dropdown-tag-lateral-padding * -1;
+
+        font-weight: $bold;
+        font-size: $dropdown-font-size + 0.2rem;
+        color: $dropdown-icons-color;
+
+        &:hover, &:focus {
+          background-color: transparent;
+          color: $dropdown-icons-hover-color;
+        }
+      }
+    }
+  }
+
+  .Select-menu {
+    // We're using disabled items as group-headings, so they shouldn't appear disabled.
+    .Select-option.is-disabled {
+      color: $bodyText;
+      font-weight: $semibold;
+    }
+
+    .Select-option.is-focused {
+      background-color: lighten($color: $brandColor, $amount: 47);;
+      color: $bodyText;
+    }
+  }
+}

package/src/components/lsac-supernavbar/stylesheets/topnav.scss

@@ -0,0 +1,371 @@
+@import './fontIcons.css';
+@import './font-face.scss';
+$blueGray2: #8a929e;
+$white: #fff;
+$semibold: 600;
+$minimized-study-filter-height: 5.6em;
+$gray2: #fafafa;
+$gray5: #f2f2f2;
+$gray10: #e5e5e5;
+$gray15: #d9d9d9;
+$gray20: #cccccc;
+$gray30: #b2b2b2;
+$gray40: #989898;
+$gray50: #808080;
+$gray60: #666666;
+$gray65: #585858;
+$gray70: #4d4d4d;
+$gray80: #333333;
+$gray90: #1a1a1a;
+$blue12:#1D96DD;
+
+$bodyText: $gray80;
+
+.top-nav-minimal {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.top-nav {
+  display: flex;
+  margin-bottom: 5.6em + 0.5em;
+  color: $blueGray2;
+  background-color: $white;
+  font-weight: $semibold;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 500;
+  font-family: 'proxima-nova' ,'Helvetica Neue'!important;
+  &:not(&.minimal) {
+    -webkit-box-shadow: 0px 1px 8px 0px rgba(50, 50, 50, 0.2);
+    -moz-box-shadow:    0px 1px 8px 0px rgba(50, 50, 50, 0.2);
+    box-shadow:         0px 1px 8px 0px rgba(50, 50, 50, 0.2);
+  } 
+
+  &.is-admin {
+    width:100%;
+  }
+  
+  &:not(.is-admin) {
+    width: 100%;
+  }
+  
+  &.minimal {
+    width: auto !important;
+  }
+
+  .top-nav-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .top-nav-item {
+    white-space: nowrap;
+    padding-right: 1.25em;
+
+    &.notification-dropdown{
+      padding-right: 1em;
+    }
+  }
+
+  .top-nav-left-items {
+    display: flex;
+    flex-shrink: 100;
+    width: 40%;
+    margin-left: 1em;
+
+    &.minimized{
+      overflow: hidden;
+    }
+  }
+
+  .session-filter{
+    width: 100%;
+  }
+
+  .top-nav-right-items {
+    display: flex;
+    height: $minimized-study-filter-height - 3.5em;
+    margin-left: auto;
+    justify-content: flex-end;
+  }
+
+  .simple-dropdown {
+
+    &:hover:not(&.disabled) {
+      color: $gray50;
+    }
+
+    &.disabled {
+      color: $gray20;
+    }
+
+    .simple-dropdown-contents {
+      color: $bodyText;
+    }
+  }
+
+  .logout-menu {
+    position: absolute;
+    right: 1em;
+    &:not(.click-disabled) {
+      cursor: pointer;
+    }
+    font-weight: normal;
+    .account-name{
+      font-family: 'proxima-nova', 'Helvetica Neue' !important;
+      color:$blue12;
+      display: flex;
+      margin-right:4px;
+      line-height: 32px;
+      font-size: 14px;
+    }
+    .dropdown-toggle{
+      position: relative;
+      display: flex;
+      padding-right:0;
+      &:after{
+        position: absolute;
+        right: 11px;
+        top: 40px;
+        border: 4px solid transparent;
+        border-color: rgba(29, 150, 221, 0);
+        border-top-color: #1d96dd;
+      }
+      &:hover, &:active, &:focus{
+        outline: none;
+        box-shadow:none;
+      }
+    }
+    .dropdown-menu{
+      top:10px !important;
+      margin-top:-5px;
+      right:0 !important;
+      padding:0 !important;
+      line-height: 18px;
+      font-size: 14px;
+      font-family: 'proxima-nova', 'Helvetica Neue' !important;
+      border: 1px solid rgba(85,96,110,.4);
+      text-align: left;
+      transform: translate(-170px, 39px);
+      width: 225px;
+
+      .switch-account-link-wrapper{
+        display: block;
+
+        a{
+          height: 33px;
+          line-height: 33px;
+          color:#333;
+          padding: 0;
+          &:hover{
+            background: none;
+          }
+        }
+      }
+      .user-details-logout{
+        margin: 0;
+        padding: 0 10px 0 0;
+        display: block;
+        a{
+          display: inline-block;
+          line-height: 33px;
+          &:hover{
+            background: none;
+            color:#333;
+          }
+        }
+      }
+      }
+    .dropdown-item{
+      padding: 0;
+    }
+  }
+}
+
+.clickable > svg {
+  cursor: pointer;
+}
+
+.lsac-topnav-toggle {
+  .hamburger-logo{
+    position: relative;
+    display: table;
+    height: 28px;
+    width: 28px;
+    min-width: 30px;
+    border: 1px solid #1d96dd;
+    margin-top: 5px;
+    margin-left: -5px;
+    margin-right: 15px;
+    border-radius: 5px;
+    &:hover{
+      background: #ECF4FA;
+    }
+  }
+
+  .hamburger-logo svg {
+    position: absolute;
+    top: 6px;
+    left: 4px;
+    margin: 0px;
+    width: auto;
+  }
+  .close-hamburger-icon svg{
+    top: 4px;
+  }
+  .saama-logo svg {
+    width: 125px;
+    height: 38px;
+  }
+  .clickable{
+    height: 28px;
+  }
+  .disable.hamburger-logo{
+    opacity: 0.4;
+  }
+  margin: 0 5px;
+  padding: 0 0.5em 0.1em 0.5em;
+  font-weight: $semibold;
+  color: $blueGray2;
+  display: flex;
+}
+
+.header-logo{
+  width: 20%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  z-index: 501;
+
+  .LSAC-logo{	
+    display: flex;	
+    padding-left: 15px;	
+    margin-left: 5px;	
+    border-left: 1px solid #ccc;    	
+    color: #666666;	
+    font-weight: 600;	
+    font-size: 13px;	
+    line-height: 18px;    	
+    padding-right: 15px;   	
+    min-width: 124px;
+    font-family: 'proxima-nova' ,'Helvetica Neue'!important;
+  }
+
+  .app-name{
+    display: flex;
+    align-items: center;
+    color:#666;
+    font-size: 15px;
+    line-height: 18px;
+    border-left: 1px solid #ccc;	
+    padding-left: 15px;    	
+    min-width: 129px;
+    font-family: 'proxima-nova' ,'Helvetica Neue'!important;
+  }
+}
+
+.clickable > svg {
+  cursor: pointer;
+}
+
+.lsac-topnav-toggle {
+  &.minimal {
+    padding-top: 2px;
+  }
+  svg {
+    width: 125px;
+    height: 38px;
+    margin: 0 0 0 -13px;
+  }
+  .clickable{
+    height: 28px;
+  }
+  margin: 0 5px;
+  padding: 0 0.5em 0.1em 0.5em;
+  font-weight: $semibold;
+  color: $blueGray2;
+  display: flex;
+}
+
+.user-icon { 
+  display: flex;
+  align-items: center;
+  color: $blue12;
+  
+  svg {
+    height: 30px;
+    width: 30px;
+    border: 1px solid $blue12;
+    border-radius: 50%;
+    color: $blue12;
+    padding: 4px;
+  }
+  .down-arrow{
+    width:7px;
+  }
+  .user-dropdown-contents{  
+    padding-bottom: 5px;  
+  svg {
+    height: 22px;
+    width: 22px;
+    border: none;
+    border-radius: 0;
+    margin-right: 8px;
+    margin-left: 7px;
+  }
+  &>div{
+    padding: 10px 0 !important;
+    span{
+      min-height: 33px;
+      &:hover{
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        background: rgba(85, 96, 110, 0.1);
+      }
+      &:first-child{  
+        line-height: 18px;
+        padding: 11px 0 8px 12px;
+        font-weight: bold;  
+        min-height: 33px;
+        display: block;
+        border-bottom: 1px solid #ccc;
+      }
+    }
+ 
+  }
+  .dropdown-user-name{
+    margin-left: 8px;
+  }
+  }
+}
+
+.logo-shadow{
+  background: #fff;
+    width: 38px;
+    height: 38px;
+    position: absolute;
+    z-index: -1;
+    margin-left: -5px;
+    border-radius: 50%;
+    -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.41);
+    -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.41);
+    box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.41);
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .hamburger-logo {
+  min-width:30px
+  }
+  }
+
+@media not all and (min-resolution:.001dpcm) { 
+  @supports (-webkit-appearance:none) {
+    .LSAC-logo, .app-name{
+      letter-spacing: -0.78px;
+     }
+  }
+}
+