supernav-test 1.0.0 → 2.2.1

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

@@ -1,358 +0,0 @@
-// 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/dist/components/lsac-supernavbar/stylesheets/topnav.scss

@@ -1,371 +0,0 @@
-@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;
-     }
-  }
-}
-