fontcustom_canvas 0.1.0 → 0.1.2

data/public/_ic_app_header.scss

@@ -0,0 +1,463 @@
+/*
+ * Copyright (C) 2015 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// @mixin primary-nav-badge-border($border-color) { box-shadow: 0 0 0 2px $border-color; }
+
+/// These are editable variables from the theme editor.
+/// For more info view stylesheets/brandable_variables.json
+// ic-brand-global-nav-bgd
+// ic-brand-global-nav-ic-icon-svg-fill
+// ic-brand-global-nav-menu-item__text-color
+// ic-brand-global-nav-avatar-border
+// ic-brand-global-nav-menu-item__badge-bgd
+// ic-brand-global-nav-menu-item__badge-text
+// ic-brand-global-nav-ic-icon-svg-fill--active
+// ic-brand-global-nav-logo-bgd
+
+$ic-global-nav-link-hover: rgba(black, 0.2);
+$ic-global-nav-link-active: rgba(black, 0.4);
+$ic-masquerade-color: $ic-color-action;
+$ic-subnav-panel-bgd: $ic-color-light;
+$ic-subnav-tray-bgd: black;
+$ic-tooltip-arrow-size: 0.375rem;
+
+@include desktop-only {
+  .tray-with-space-for-global-nav {
+    margin-#{direction(left)}: $ic-header-primary-width - 10;
+    body.primary-nav-expanded & {
+      margin-#{direction(left)}: $ic-header-primary-width;
+    }
+  }
+  .navigation-tray-container {
+    min-height: 100vh;
+  }
+}
+
+.ic-app-header {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  #{direction(left)}: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: $ic-header-primary-width - 15;
+  z-index: 100;
+  background-color: var(--ic-brand-global-nav-bgd);
+}
+
+.ic-app-header__main-navigation {
+  box-sizing: border-box;
+  flex: 1 0 auto;
+}
+
+.ic-app-header__secondary-navigation {
+  box-sizing: border-box;
+  position: absolute;
+  #{direction(left)}: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+}
+
+.ic-app-header__menu-list {
+  @include reset-list;
+}
+
+.ic-app-header__menu-list-item {
+  box-sizing: border-box;
+
+  font-size: 16px !important;
+  
+  &.ic-app-header__menu-list-item--active {
+    .ic-app-header__menu-list-link {
+      background: $ic-color-light;
+
+      body:not(.primary-nav-expanded) & {
+        &:hover,
+        &:focus {
+          .menu-item__text {
+            transition: none;
+            transition-delay: 0;
+            transform: none;
+            opacity: 0;
+          }
+        }
+      }
+      &:focus {
+        box-shadow: inset 0 0 0 1px var(--ic-brand-global-nav-bgd),
+          inset 0 0 0 2px var(--ic-brand-global-nav-menu-item__text-color--active);
+      }
+    }
+    .ic-icon-svg {
+      fill: var(--ic-brand-global-nav-ic-icon-svg-fill--active);
+    }
+    .ic-avatar {
+      border-color: $ic-border-light;
+      &.ic-avatar--fake-student {
+        border-color: $ic-masquerade-color;
+      }
+    }
+    .menu-item-icon-container {
+      color: var(--ic-brand-global-nav-ic-icon-svg-fill--active);
+    }
+  }
+}
+
+.ic-app-header__menu-list-link {
+  box-sizing: border-box;
+  transition: background-color 0.3s, padding 0.3s;
+  position: relative;
+  text-align: center;
+  display: block;
+  color: var(--ic-brand-global-nav-menu-item__text-color);
+  border-style: none;
+
+  &:not(.ic-app-header__menu-list-link--nav-toggle) {
+    padding: 0.25rem 0;
+    @media only screen and (min-height: 400px) {
+      padding: 0.4375rem 0;
+    }
+  }
+
+  &.ic-app-header__menu-list-link--nav-toggle {
+    width: 100%;
+    perspective: 600px;
+
+    .ic-icon-svg--navtoggle {
+      transition: all 0.4s;
+      transform: direction-if(rtl, rotate3d(0, 1, 0, -180deg));
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $ic-global-nav-link-hover;
+    @if $use_high_contrast == false {
+      text-decoration: none;
+      outline: none;
+    }
+    .ic-avatar {
+      border-color: var(--ic-brand-global-nav-avatar-border);
+      &.ic-avatar--fake-student {
+        border-color: $ic-masquerade-color;
+      }
+    }
+    .menu-item__text {
+      transform: translate3d($ic-tooltip-arrow-size, 0, 0);
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 0 1px var(--ic-brand-global-nav-bgd),
+      inset 0 0 0 2px var(--ic-brand-global-nav-menu-item__text-color);
+  }
+
+  &:active {
+    background-color: $ic-global-nav-link-active;
+    box-shadow: inset 0 1px 1px rgba(black, 0.3);
+  }
+
+  .ic-icon-svg {
+    width: 26px;
+    display: inline-block;
+    vertical-align: middle;
+    fill: var(--ic-brand-global-nav-ic-icon-svg-fill);
+  }
+}
+
+button.ic-app-header__menu-list-link {
+  background: transparent;
+  outline: none;
+  width: 100%;
+}
+
+.ic-avatar {
+  overflow: hidden;
+  border-radius: 100%;
+  border: 2px solid var(--ic-brand-global-nav-avatar-border);
+  width: 50px;
+  height: 50px;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  &.ic-avatar--fake-student {
+    border-color: $ic-masquerade-color;
+  }
+}
+
+.menu-item-icon-container {
+  transform: translate3d(0, 0, 0);
+  position: relative;
+  z-index: 1;
+  width: $ic-sp * 4;
+  margin: 0 auto;
+  color: var(--ic-brand-global-nav-ic-icon-svg-fill);
+
+  .ic-avatar {
+    transform: translate3d(0, 0, 0);
+    width: $ic-sp * 2.5;
+    height: $ic-sp * 2.5;
+
+    body.primary-nav-expanded & {
+      width: $ic-sp * 3;
+      height: $ic-sp * 3;
+    }
+  }
+}
+
+.menu-item__text {
+  // set up properties to transition on hover/focus
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+
+  pointer-events: none;
+  box-sizing: border-box;
+  background-color: var(--ic-brand-global-nav-ic-icon-svg-fill--active);
+  position: absolute;
+  #{direction(left)}: 100%;
+  top: 50%;
+  padding: 0 $ic-sp;
+  line-height: 1.8rem;
+  margin-top: -0.9rem;
+  @include fontSize($ic-font-size--xsmall);
+  font-size: 16px !important;
+  border-radius: $ic-border-radius / 2;
+  color: $ic-color-light;
+  white-space: nowrap;
+
+  // this class is added after a 1s delay because the
+  // transitions look weird when the nav is being closed
+  body.primary-nav-transitions & {
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
+    transition-delay: 0.3s;
+  }
+
+  &::after {
+    #{direction(right)}: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: transparent;
+    border-#{direction(right)}-color: var(--ic-brand-global-nav-ic-icon-svg-fill--active);
+    border-width: $ic-tooltip-arrow-size;
+    margin-top: -($ic-tooltip-arrow-size);
+  }
+}
+
+.menu-item__badge {
+  @include ic-badge-maker;
+  transition: all 0.3s ease-out;
+  position: absolute;
+  top: -0.5em;
+  #{direction(right)}: 0;
+  background: var(--ic-brand-global-nav-menu-item__badge-bgd);
+  color: var(--ic-brand-global-nav-menu-item__badge-text);
+}
+
+.ic-app-header__logomark-container {
+  width: 100%;
+  background-color: var(--ic-brand-global-nav-logo-bgd);
+  box-sizing: border-box;
+}
+
+.ic-app-header__logomark {
+  display: block;
+  overflow: hidden;
+  background-image: var(--ic-brand-header-image);
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  transition: transform 0.3s;
+  height: 75px;
+
+  body.primary-nav-expanded & {
+    height: 85px;
+  }
+  &:focus {
+    outline-style: none;
+    box-shadow: inset 0 0 0 1px var(--ic-brand-global-nav-bgd),
+      inset 0 0 0 2px var(--ic-brand-global-nav-menu-item__text-color);
+  }
+}
+// set to block to avoid any exta inline spacing at bottom
+.ic-app-header__uploaded-logo {
+  display: block;
+}
+
+.ic-app-header__menu-list-link {
+  padding: 0.5625rem 0;
+}
+
+// stuff that changes when the nav is expanded
+body.primary-nav-expanded {
+  .ic-app-header {
+    width: $ic-header-primary-width;
+    overflow-y: auto;
+    -ms-overflow-style: none; // IE11 and below was throwing on scrollbars no matter if needed or not
+  }
+
+  .ic-app-header__secondary-navigation {
+    position: static;
+    #{direction(left)}: auto;
+    bottom: auto;
+    z-index: auto;
+    width: auto;
+  }
+
+  .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active {
+    .menu-item__text {
+      @if $use_high_contrast {
+        color: var(--ic-link-color);
+      } @else {
+        color: var(--ic-brand-global-nav-menu-item__text-color--active);
+      }
+    }
+  }
+
+  .ic-app-header__menu-list-link {
+    &.ic-app-header__menu-list-link--nav-toggle {
+      .ic-icon-svg--navtoggle {
+        transform: direction-if(rtl, none, rotate3d(0, 1, 0, -180deg));
+      }
+    }
+
+    &:hover,
+    &:focus {
+      .menu-item__text {
+        transform: none;
+      }
+    }
+  }
+
+  .menu-item__text {
+    transition: none;
+    position: static;
+    #{direction(left)}: auto;
+    top: auto;
+    transform: none;
+    opacity: 1;
+    text-align: center;
+    display: block;
+    line-height: 1.4;
+    border-radius: 0;
+    margin: $ic-sp/4 0 0;
+    padding: 0;
+    background: transparent;
+    color: var(--ic-brand-global-nav-menu-item__text-color);
+    white-space: normal;
+    word-wrap: break-word;
+    padding-#{direction(left)}: 0.25rem;
+    padding-#{direction(right)}: 0.25rem;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+// help dialog/tray styles
+.ic-HelpDialog__form-legend {
+  display: table;
+  font-size: 1em;
+  line-height: inherit;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.ic-HelpDialog__form-fieldset {
+  border: 0;
+  padding: 0.01em 0 0;
+  min-width: 0;
+  margin: direction-sides(0 0 $spacing-width/2 0);
+}
+
+.ic-HelpDialog__form-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#mobile-header {
+  z-index: 100;
+  background-color: var(--ic-brand-global-nav-bgd);
+  * {
+    color: var(--ic-brand-global-nav-menu-item__text-color);
+  }
+}
+#mobileContextNavContainer {
+  overflow: hidden;
+  // we transition max-height instead of height because otherwise we'd have to give it an explicit height and not "auto"
+  transition: max-height 1.5s ease-out;
+  max-height: 0px;
+  &[aria-expanded='true'] {
+    max-height: 3000px;
+    margin-bottom: 50px;
+    box-shadow: 0 0.375rem 0.4375rem rgba(0, 0, 0, 0.1), 0 0.625rem 1.75rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+@include desktop-only {
+  #mobile-header,
+  #mobileContextNavContainer {
+    display: none;
+  }
+}
+.mobile-header-hamburger {
+  float: direction(left);
+}
+.mobile-header-title {
+  text-align: center;
+  display: block;
+}
+.mobile-header-hamburger,
+.mobile-header-title {
+  padding: $ic-sp * 1.3;
+}
+.ic-brand-mobile-global-nav-logo {
+  height: 48px;
+  display: block;
+  background-image: var(--ic-brand-mobile-global-nav-logo);
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+// Tourpoints Styles
+#___reactour {
+  .reactour__helper {
+    background-color: white;
+    color: unset;
+    max-width: 515px;
+    width: calc(100vw - 20px);
+  }
+  .tour-star-image {
+    max-width: 120px;
+    padding: 1rem 0;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+