superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/components/_subnav.scss

@@ -5,10 +5,10 @@
 .subnav {
     position: relative;
     display: flex;
-    height:$subnav-height;
+    height: $subnav-height;
     background: $subnav-background;
     border-bottom: 0px;
-    @include box-shadow-both(0 1px 3px rgba(0,0,0,0.07), 0 1px 0 0 rgba(0,0,0,0.1));
+    box-shadow: var(--sd-shadow__subnav);
     @include transition(all, 0.3s, ease);
     z-index: 3;
     align-items: center;
@@ -21,284 +21,295 @@
         background: $subnav-background-darker !important;
     }
     &--dark-blue-grey, &--blueGreyDarker {
-      background: $subnav-background-dark-blue-grey !important;
-      color: $white;
+        background: $subnav-background-dark-blue-grey !important;
+        color: $white;
         .navbtn:hover {
-          background: rgba(255, 255, 255, 0.20);
-      }
+            background: rgba(255, 255, 255, 0.20);
+        }
     }
     &--mid-blue-grey, &--blueGrey {
-      background: $subnav-background-blue-grey !important;
-      color: $white;
-    }
-    &--dark-ui, &--darkUi {
-      background: $subnav-background-darkUi !important;
-      @include box-shadow-both(0 1px 3px rgba(0,0,0,0.12), 0 1px 0 0 rgba(0,0,0,0.1));
-      color: $white;
+        background: $subnav-background-blue-grey !important;
+        color: $white;
     }
     &--absolute {
-      position: absolute;
-      top:48px;
-      left:0;
-      right:0;
+        position: absolute;
+        top:48px;
+        left:0;
+        right:0;
     }
     + .subnav,
     &--lower-z-index {
-      z-index: 2 !important;
-  }
-  .sd-check__group {
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
+        z-index: 2;
+    }
+    .sd-check__group {
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
 }
 .subnav__element-grow {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 .subnav__page-title {
-  padding: 1rem 2rem;
-  color: inherit;
-  font-size: 1.8rem;
-  line-height: 2.8rem;
-  flex-grow: 1;
-  @include text-overflow();
-  @include text-normal();
-  &--no-grow {
-    flex-grow: 0;
-  }
+    padding: 0 1.6rem;
+    color: inherit;
+    font-size: 1.8rem;
+    line-height: 2.8rem;
+    flex-grow: 1;
+    @include text-overflow();
+    @include text-normal();
+    &--no-grow {
+        flex-grow: 0;
+    }
 }
 .subnav__desk-stage {
     flex-grow: 1;
 }
 
+.subnav__divider {
+    display: inline-flex;
+    height: 100%;
+    &--small {
+        width: $sd-base-increment * 1.5;
+    }
+    &--medium {
+        width: $sd-base-increment * 2;
+    }
+    &--large {
+        width: $sd-base-increment * 3;
+    }
+    &--x-large {
+        width: $sd-base-increment * 4;
+    }
+}
+
 
 .subnav {
-  &.subnav--level2 {
-      position: absolute;
-      top:0;
-      left: 0;
-      z-index: 2;
-      box-shadow: none;
-  }
+    &.subnav--level2 {
+        position: absolute;
+        top:0;
+        left: 0;
+        z-index: 2;
+        box-shadow: none;
+    }
+    .sd-nav-tabs {
+        box-shadow: none;
+    }
 }
 
 .subnav__sliding-toolbar {
-  @include sliding-toolbar; // See mixins.scss for details
+    @include sliding-toolbar; // See mixins.scss for details
 }
 
 // ============================================================================
 // NEW NAVBUTTONS
 // ============================================================================
-
-:root {
-  --color-navbutton-border:            rgba(0,0,0,.1);
-  --color-navbutton-bg-hover:          rgba(0,0,0, 0.05);
-  --color-navbutton-bg-active:         rgba(255,255,255,1);
-  --color-navbutton-dropdown-open-bg:  rgba(255, 255, 255, 1);
-  --color-navbutton-bg-100:            rgba(0,0,0,.06);
-  --color-navbutton-bg-100-hover:      rgba(0,0,0,.12);
-}
-
-.sd-top-menu {
-  --color-navbutton-border:            rgba(255,255,255,0.06);
-}
-  
-.subnav--dark-ui,
-[data-theme="dark-ui"] {
-  --color-navbutton-border:            rgba(0,0,0,.15);
-  --color-navbutton-bg-hover:          rgba(0,0,0,.1);
-  --color-navbutton-bg-active:         rgba(255,255,255,.08);
-  --color-navbutton-bg-100:            rgba(0,0,0,.1);
-  --color-navbutton-bg-100-hover:      rgba(0,0,0,.2);
-}
   
-$navbutton-border-color: var(--color-navbutton-border);
-$navbutton-bg-color: transparent;
 $navbutton-transition: all 0.2s ease-out, color 0.1s ease-out;
-$navbutton-bg-color-hover: var(--color-navbutton-bg-hover);
-$navbutton-bg-color-active: var(--color-navbutton-bg-active);
-$navbutton-bg-color-darker: var(--color-navbutton-bg-100);
-$navbutton-bg-color-darker-hover: var(--color-navbutton-bg-100-hover);
-
-$navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px rgba(94, 169, 200, 0.3);
+$navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-70), inset 0 0 0 3px var(--sd-colour-interactive--alpha-40);
   
 @mixin navbutton-base {
-  position: relative;
-  height: $subnav-height;
-  width: 4.8rem;
+    position: relative;
+    height: $subnav-height;
+    width: 4.8rem;
 
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  
-  background: $navbutton-bg-color;
-  color: inherit;
-  text-align: center;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
-  text-decoration: none;
-  border: 0;
-  border: 1px solid $navbutton-border-color;
-  border-width: 0 0 0 1px;
-  cursor: pointer;
-  transition: $navbutton-transition;
+    background: transparent;
+    color: var(--color-text);
+    text-align: center;
 
-  i {
-    opacity: 0.75;
-    vertical-align: baseline !important;
-    transition: opacity 0.2s ease-out;
-  }
-  [class^="big-icon--"], [class*=" big-icon--"],
-  [class^="icon-"], [class*=" icon-"] {
-    color: currentColor;
-  }
-  &:hover {
-    background: $navbutton-bg-color-hover;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:active{
-    background: $navbutton-bg-color-active;
-      > i {
-          opacity: 1;
-      }
-  }
-  &:focus-visible {
-    box-shadow: $navbutton-focus-box-shadow;
-    > i {
-      opacity: 1;
-  }
-  }
+    text-decoration: none;
+    border: 0;
+    border: 0px solid var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
+    cursor: pointer;
+    transition: $navbutton-transition;
+
+    i {
+        opacity: 0.75;
+        vertical-align: baseline !important;
+        transition: opacity 0.2s ease-out;
+    }
+    [class^="big-icon--"], [class*=" big-icon--"],
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+    &:hover {
+        background: var(--color-navbutton-bg-hover);
+        > i {
+            opacity: 1;
+        }
+    }
+    &:active {
+        background: transparent;
+        box-shadow: inset 0 0 0 4px var(--color-navbutton-shadow-active);
+        > i {
+            opacity: 1;
+        }
+    }
+    &:focus-visible {
+        box-shadow: $navbutton-focus-box-shadow;
+        > i {
+            opacity: 1;
+        }
+    }
 }
   
 .sd-navbtn {
-  @include navbutton-base;
-  &.sd-navbtn--highlight {
-    background: $purple;
-    border-color: darken($purple, 5%);
-    color: $white;
-    &:hover {
-      background-color: darken($purple, 5%);
-      border-color: darken($purple, 10%);
+    @include navbutton-base;
+    &.sd-navbtn--highlight {
+        background: var(--sd-colour-highlight);
+        border-color: var(--sd-colour-highlight);
+        color: $white;
+        &:hover {
+            background-color: var(--sd-colour-highlight--hover);
+            border-color: var(--sd-colour-highlight--hover);
+        }
+        &:active {
+            background: var(--sd-colour-highlight);
+            border-color: var(--sd-colour-highlight);
+
+        }
     }
-    &:active {
-      background-color: lighten($purple, 5%);
-      border-color: darken($purple, 5%);
+    &.sd-navbtn--darker {
+        background: var(--color-navbutton-bg-100);
+        &:hover {
+            background-color: var(--color-navbutton-bg-100-hover);
+        }
+        &:active {
+            background: var(--color-navbutton-bg-100);
+        }
     }
-  }
-  &.sd-navbtn--darker {
-    background: $navbutton-bg-color-darker;
-    &:hover {
-      background-color: $navbutton-bg-color-darker-hover;
+    &.sd-navbtn--dark {
+        background: var(--color-navbutton-bg-dark);
+        color: $white;
+        &:hover {
+            background-color: var(--color-navbutton-bg-dark-hover);
+        }
+        &:active {
+            background: var(--color-navbutton-bg-dark);
+        }
     }
-    &:active {
-      background-color: $navbutton-bg-color-active;
+    &.sd-navbtn--primary,
+    &.sd-navbtn--active {
+        background: var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        color: $white;
+        &:hover {
+            background-color:  var(--sd-colour-interactive--hover);
+            border-color:  var(--sd-colour-interactive--hover);
+        }
+        &:active {
+            background: var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
+        }
+        
+    }
+    &--left {
+        border-width: 0 1px 0 0;
+    }
+    &--textual {
+        width: auto;
+        @include sd-padding('1', 'x');
+        .sd-navbtn__text {
+            display: inline-flex;
+            font-size: 1.4rem;
+            position: relative;
+            @include sd-margin('0-5', 'x');
+            margin-right: $sd-base-increment / 2;
+            margin-left: $sd-base-increment;
+        }
+        i {
+            margin-left: $sd-base-increment / 2;
+        }
     }
-  }
-  &.sd-navbtn--primary, &.sd-navbtn--active {
-    background: $sd-blue;
-    border-color: darken($sd-blue, 5%);
-    color: $white;
-    &:hover {
-      background-color: darken($sd-blue, 5%);
-      border-color: darken($sd-blue, 10%);
-    }
-    &:active{
-      background-color: lighten($sd-blue, 5%);
-      border-color: darken($sd-blue, 5%);
-    }
-    
-  }
-  &--left {
-    border-width: 0 1px 0 0;
-  }
-  &--textual {
-    width: auto;
-    @include sd-padding('1', 'x');
-    .sd-navbtn__text {
-      display: inline-flex;
-      font-size: 1.4rem;
-      position: relative;
-      @include sd-margin('0-5', 'x');
-      margin-right: $sd-base-increment / 2;
-      margin-left: $sd-base-increment;
+    .badge {
+        position: absolute;
+        top: $sd-base-increment / 2;
+        right: $sd-base-increment / 2;
+        z-index: 1;
     }
-    i {
-      margin-left: $sd-base-increment / 2;
-    }
-  }
-  .badge {
-    position: absolute;
-    top: $sd-base-increment / 2;
-    right: $sd-base-increment / 2;
-    z-index: 1;
-  }
 }
 .dropdown {
-  .sd-navbtn {
-    &.sd-navbtn--textual {
-      .sd-navbtn__text {
-        color: currentColor;
-        padding-right: 16px;
-        &::after {
-          content: '';
-          display: inline-flex;
-          width: 0;
-          height: 0;
-          position: absolute;
-          top: calc(50% - 2px);
-          right: 0;
-          vertical-align: middle;
-          //margin-top: -2px;
-          margin-left: 8px;
-          border-left:  4px solid transparent;
-          border-right: 4px solid transparent;
-          border-top:   4px solid currentColor;
-          opacity: .75;
-          @include transition(all, 0.1s, ease-in);
-        }
-      }
-    }
-  }
+    .sd-navbtn {
+        &.sd-navbtn--textual {
+            .sd-navbtn__text {
+                color: currentColor;
+                padding-right: 16px;
+                &::after {
+                    content: '';
+                    display: inline-flex;
+                    width: 0;
+                    height: 0;
+                    position: absolute;
+                    top: calc(50% - 2px);
+                    right: 0;
+                    vertical-align: middle;
+                    //margin-top: -2px;
+                    margin-left: 8px;
+                    border-left:  4px solid transparent;
+                    border-right: 4px solid transparent;
+                    border-top:   4px solid currentColor;
+                    opacity: .75;
+                    @include transition(all, 0.1s, ease-in);
+                }
+            }
+        }
+    }
 }
   
 .dropdown.open {
-  .sd-navbtn {
-    background-color: var(--color-navbutton-dropdown-open-bg);
-    position: relative;
-    box-shadow: 0 8px 0 0px var(--color-navbutton-dropdown-open-bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
-    border-color: transparent !important;
-    z-index: 1001;
-    i {
-      opacity: 1;
-      color: $sd-blue;
-    }
-    &.sd-navbtn--textual {
-      .sd-navbtn__text {
-        &::after {
-          opacity: 1;
+    .sd-navbtn {
+        background-color: var(--color-dropdown-menu-Bg);
+        position: relative;
+        box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+        border-color: transparent !important;
+        z-index: 2001;
+        i {
+            opacity: 1;
+            color: $sd-colour-interactive;
+        }
+        &.sd-navbtn--textual {
+            .sd-navbtn__text {
+                color: $sd-colour-interactive;
+                &::after {
+                    opacity: 1;
+                }
+            }
         }
-      }
     }
-  }
+    .sd-create-btn {
+        background-color: var(--color-dropdown-menu-Bg);
+        position: relative;
+        box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+        border-color: transparent !important;
+        z-index: 1001;
+    }
 }
   
 .navbtn {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     height: $subnav-height;
     width: 4.8rem;
-    padding: 0 10px;
+    padding: 0;
     background: transparent;
-    color: inherit;
+    color: $sd-text;
     text-align: center;
-    line-height: 5.6rem;
     text-decoration: none;
-    border: 0;
-    border-left: 1px solid rgba(0,0,0,.1);
+    border: 0px solid transparent;
+    border-color: var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
     cursor:pointer;
+    background: transparent;
     transition: background-color 0.2s ease-out, color 0.1s ease-out;
     i {
         opacity: 0.75;
@@ -307,230 +318,226 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
     }
     [class^="big-icon--"],
     [class*=" big-icon--"] {
-      line-height: 1;
-      color: currentColor;
-      display: block;
+        line-height: 1;
+        color: $sd-text;
+        display: block;
     }
     .big-icon--send-to {
-      margin-left: 0.3rem;
+        margin-left: 0.3rem;
     }
     [class^="icon-"],
     [class*=" icon-"] {
-      color: currentColor;
+        color: $sd-text;
     }
     &:hover {
-        background: rgba(255, 255, 255, 0.5);
+        background: var(--color-navbutton-bg-hover);
         > i {
             opacity: 1;
         }
     }
     &.navbtn--left {
-      border-left: none;
-      border-right: 1px solid rgba(0,0,0,.1);
+        border-inline-width: 0 1px;
     }
     &.navbtn--blue {
-        background: $sd-blue;
-        border-left: 1px solid lighten($sd-blue, 10%);
+        background: $sd-colour-interactive;
+        border-color: var(--sd-colour-interactive--lighten-10);
         color: $white;
         &.disabled {
-            background: #898989;
+            background: var(--sd-colour-interactive--lighten-30);
         }
     }
     &.navbtn--text-only {
-      width: auto;
-      line-height: $subnav-height;
-      padding: 0 20px;
-      border-left: none;
-      font-size: 1.5rem;
+        width: auto;
+        line-height: $subnav-height;
+        padding: 0 20px;
+        border-inline-width: 0 1px;
+        font-size: 1.5rem;
     }
     &.navbtn--border-r {
-      border-right: 1px solid rgba(0,0,0,.1) !important;
+        border-inline-end: 1px !important;
     }
     &.navbtn--highlighted {
-      background-color: $purple !important;
-      transition: all 0.3s;
-      padding: 0 0 0 9px;
-      color: $white;
-      &:hover {
+        background-color: $purple !important;
+        transition: all 0.3s;
+        padding: 0 0 0 9px;
+        color: $white;
+    &:hover {
         background-color: darken($purple, 10%);
-      }
+    }
     }
     &.navbtn--darker {
-      background-color: rgba(0, 0, 0, 0.05);
+        background-color: rgba(0, 0, 0, 0.05);
     }
     &.navbtn--active {
-      background-color: $sd-blue;
+        background-color: $sd-colour-interactive;
         > i {
-          opacity: 1;
-          color: $white;
-      }
+        opacity: 1;
+        color: $white;
+    }
     }
     &.navbtn--publish {
-      background-color: rgba(0, 0, 0, 0.05);
+        background-color: rgba(0, 0, 0, 0.05);
     }
 }
-.subnav--dark-ui {
-  .navbtn:hover {
-    background-color: rgba(255, 255, 255, 0.06);
-  }
-}
+
 .dropdown.open {
     .navbtn {
-        background: rgba(255, 255, 255, 1);
+        background: var(--color-dropdown-menu-Bg);
+        color: $sd-colour-interactive;
         box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
         z-index: $zindexDropdown + 1;
         > i {
             opacity: 1;
-            color: $sd-blue;
+            color: $sd-colour-interactive;
         }
     }
     .sd-create-btn {
-      i {
-        color: $white;
-      }
+        i {
+            color: $white;
+        }
     }
 }
   
 .subnav__stretch-bar {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-  @include sd-margin('1-5', 'x');
-  align-items: center;
-  &.subnav__stretch-bar--right {
-    text-align: right;
-    justify-content: flex-end;
-  }
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    @include sd-margin('1-5', 'x');
+    align-items: center;
+    &.subnav__stretch-bar--right {
+        text-align: end;
+        justify-content: flex-end;
+    }
 }
 .subnav__content-bar {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 0;
-  flex-shrink: 1;
-  @include sd-margin('1-5', 'x');
-  align-items: center;
-  &.subnav__content-bar--right {
-    text-align: right;
-    justify-content: flex-end;
-  }
+    display: flex;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 1;
+    @include sd-margin('1-5', 'x');
+    align-items: center;
+    &.subnav__content-bar--right {
+        text-align: end;
+        justify-content: flex-end;
+        }
 }
 .subnav__spacer {
-  width: 1px;
-  height: $subnav-height;
-  flex-grow: 0;
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin: auto 2rem;
-  &--dotted {
-    border-left: 1px dotted rgba(0,0,0,.3);
-    height: $subnav-height / 2;
-  }
-  &--no-r-margin {
-    margin-right: -0.1rem;
-  }
-  &--no-l-margin {
-    margin-left: 0;
-  }
-  &--no-margin {
-    margin-left: 0;
-    margin-right: 0; 
-  }
+    width: 1px;
+    height: $subnav-height;
+    flex-grow: 0;
+    border-left: 1px solid rgba(0,0,0,.1);
+    margin: auto 2rem;
+    &--dotted {
+        border-left: 1px dotted rgba(0,0,0,.3);
+        height: $subnav-height / 2;
+    }
+    &--no-r-margin {
+        margin-right: -0.1rem;
+    }
+    &--no-l-margin {
+        margin-left: 0;
+    }
+    &--no-margin {
+        margin-left: 0;
+        margin-right: 0; 
+    }
   
 }
 .subnav__button-stack {
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  
-  &--square-buttons {
-    height:48px;
-    margin: 0 0 0 16px;
+    position: relative;
     display: flex;
     flex-wrap: nowrap;
-    flex-grow: 0;
-    flex-shrink: 1;
-    max-width: 100%;
-  }
-  &--custom-buttons {
-    margin: 0 auto;
-    padding: 10px 12px;
-    border: 1px solid rgba(0,0,0,0.1);
-    border-width: 0 1px;
-    box-sizing: border-box;
-    display: flex;
-    max-width: 100%;
-    .btn {
-      flex-grow: 0;
-      margin:0 4px;
+    align-items: center;
+
+    &--square-buttons {
+        height:48px;
+        margin: 0 0 0 16px;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-grow: 0;
+        flex-shrink: 1;
+        max-width: 100%;
+    }
+    &--custom-buttons {
+        margin: 0 auto;
+        padding: 10px 12px;
+        border: 1px solid rgba(0,0,0,0.1);
+        border-width: 0 1px;
+        box-sizing: border-box;
+        display: flex;
+        max-width: 100%;
+        .btn {
+            flex-grow: 0;
+            margin:0 4px;
+        }
+        .btn__text--short {
+            display: none;
+        }
+        .btn__text {
+            display: inline;
+        }
     }
-    .btn__text--short {
-      display: none;
+    &--right {
+        text-align: end;
+        padding-right: 2rem;
+    }
+    &--padded {
+        padding: 0 1rem;
+        flex-shrink: 0;
     }
-    .btn__text {
-      display: inline;
-    }
-  }
-  &--right {
-    text-align: right;
-    padding-right: 2rem;
-  }
-  &--padded {
-    padding: 0 1rem;
-    flex-shrink: 0;
-  }
 }
 
 .subnav__button-stack--custom-buttons {
-  .btn__text--short {
-    display: none;
-  }
-  .btn__text {
-    display: inline;
-  }
-}
-.compact {
-  .subnav__button-stack--custom-buttons {
     .btn__text--short {
-      display: inline;
+        display: none;
     }
     .btn__text {
-      display: none;
+        display: inline;
+    }
+}
+.compact {
+    .subnav__button-stack--custom-buttons {
+        .btn__text--short {
+            display: inline;
+        }
+        .btn__text {
+            display: none;
+        }
     }
-  }
 }
 
 .subnav__button-stack--default {
-  display: flex;
-  flex-grow: 1;
-  justify-content: flex-end;
-  padding: 10px 0;
-  .btn {
-    flex-grow: 0;
-    margin:0 4px;
-  }
-  .btn--close {
-    .btn__text--alt-icon {
-      display: none;
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    padding: 10px 0;
+    .btn {
+        flex-grow: 0;
+        margin:0 4px;
     }
-    .btn__text {
-      display: inline;
+    .btn--close {
+        .btn__text--alt-icon {
+            display: none;
+        }
+        .btn__text {
+            display: inline;
+        }
     }
-  }
 }
 
 .subnav__button-stack--default {
-  &.compact {
-    .btn--close {
-      padding: 0 3px 0 6px;
-      .btn__text--alt-icon {
-        display: inline;
-        opacity: 0.7;
-      }
-      .btn__text {
-        display: none;
-      }
+    &.compact {
+        .btn--close {
+            padding: 0 3px 0 6px;
+            .btn__text--alt-icon {
+            display: inline;
+            opacity: 0.7;
+            }
+            .btn__text {
+            display: none;
+            }
+        }
     }
-  }
 }
 
 // ============================================================================
@@ -538,138 +545,132 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
 // ============================================================================
 
 .subnav--responsive {
-  .navbtn.navbtn--text-only {
-    font-size: 1.4rem;
-  }
-
-  .subnav__stretch-bar {
-    margin-right: 0;
-  }
-
-  .subnav__spacer {
-    margin-left: 1.2rem;
-  }
-
-  #planning-dropdown {
-    display: none;
-    margin-left: -1.2rem;
-  }
-
-  .dropdown__toggle {
-    white-space: nowrap;
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 2.6rem !important;
-    .dropdown__caret {
-      position: absolute;
-      top: 50%;
-      right: 1rem;
-    }
-  }
-  .navbtn {
-    flex-shrink: 0;
-  }
-  .navbtn.navbtn--text-only {
-    flex-shrink: 1;
-    padding: 0 1.2rem;
-  }
-}
-  
-.sd-page-content--slide-in--open {
-  .subnav--responsive {
-    .sd-check__wrapper + .sd-check__wrapper {
-      margin-left: 0.4rem;
+    .navbtn.navbtn--text-only {
+        font-size: 1.4rem;
     }
-
     .subnav__stretch-bar {
-      margin: 0 1.2rem;
-      margin-right: 0;
+        margin-right: 0;
     }
-
-    .subnav__button-stack--padded {
-      padding: 0 0.6rem;
+    .subnav__spacer {
+        margin-left: 1.2rem;
+    }
+    #planning-dropdown {
+        display: none;
+        margin-left: -1.2rem;
+    }
+    .dropdown__toggle {
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 2.6rem !important;
+        .dropdown__caret {
+            position: absolute;
+            top: 50%;
+            inset-inline-end: 1rem;
+        }
+    }
+    .navbtn {
+        flex-shrink: 0;
     }
-
     .navbtn.navbtn--text-only {
-      font-size: 1.3rem;
+        flex-shrink: 1;
+        padding: 0 1.2rem;
+    }
+}
+  
+.sd-page-content--slide-in--open {
+    .subnav--responsive {
+        .sd-check__wrapper + .sd-check__wrapper {
+            margin-left: 0.4rem;
+        }
+
+        .subnav__stretch-bar {
+            margin: 0 1.2rem;
+            margin-right: 0;
+        }
+        .subnav__button-stack--padded {
+            padding: 0 0.6rem;
+        }
+        .navbtn.navbtn--text-only {
+            font-size: 1.3rem;
+        }
     }
-  }
 }
   
 // ------------- MEDIA QUERIES ---------------------
 // -------------------------------------------------
   
 @media only screen and (max-width: 1366px) {
-  .sd-page-content--slide-in--open .sd-page-content__content-block--30-slide {
-    width: 50rem;
-  }
+    .sd-page-content--slide-in--open .sd-page-content__content-block--30-slide {
+        width: 50rem;
+    }
 
-  .sd-page-content--slide-in--open .sd-page-content__content-block--main {
-    width: calc(100vw - 54.8rem);
-  }
+    .sd-page-content--slide-in--open .sd-page-content__content-block--main {
+        width: calc(100vw - 54.8rem);
+    }
 }
   
 // Editing Closed
   
 @media only screen and (max-width: 800px) {
-  .subnav--responsive {
-    #planning-dropdown {
-      display: block;
-    }
-    #planning-buttons {
-      display: none;
-    }
-    .dropdown__toggle {
-      max-width: 160px;
-    }
-    &.compact--level-1 {
-      .dropdown__toggle {
-        max-width: 160px;
-      }
+    .subnav--responsive {
+        #planning-dropdown {
+            display: block;
+        }
+        #planning-buttons {
+            display: none;
+        }
+        .dropdown__toggle {
+            max-width: 160px;
+        }
+        &.compact--level-1 {
+            .dropdown__toggle {
+            max-width: 160px;
+            }
+        }
     }
-  }
 }
 @media only screen and (max-width: 1024px) {
-  .subnav--responsive.compact--level-1 {
-    #planning-dropdown {
-      display: block;
-    }
-    #planning-buttons {
-      display: none;
+    .subnav--responsive.compact--level-1 {
+        #planning-dropdown {
+            display: block;
+        }
+        #planning-buttons {
+            display: none;
+        }
     }
-  }
 }
   
 // Editing Open
-  
+
 @media only screen and (max-width: 1480px) {
-  .sd-page-content--slide-in--open {
-    .subnav--responsive {
-      &.compact--level-1 {
-        #planning-dropdown {
-          display: block;
-        }
-        #planning-buttons {
-          display: none;
+    .sd-page-content--slide-in--open {
+        .subnav--responsive {
+            &.compact--level-1 {
+                #planning-dropdown {
+                    display: block;
+                }
+                #planning-buttons {
+                    display: none;
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @media only screen and (max-width: 1250px) {
-  .sd-page-content--slide-in--open {
-    .subnav--responsive {
-      #planning-dropdown {
-        display: block;
-      }
-      #planning-buttons {
-        display: none;
-      }
-      .dropdown__toggle {
-        max-width: 160px;
-      }
+    .sd-page-content--slide-in--open {
+        .subnav--responsive {
+            #planning-dropdown {
+                display: block;
+            }
+            #planning-buttons {
+                display: none;
+            }
+            .dropdown__toggle {
+                max-width: 160px;
+            }
+        }
     }
-  }
 }